@arolariu/components/dist/cjs/components/ui/form.cjs.map

A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)!

{"version":3,"file":"components\\ui\\form.cjs","sources":["webpack://@arolariu/components/./src/components/ui/form.tsx"],"sourcesContent":["\r\n\r\nimport * as React from \"react\";\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport {\r\n  Controller,\r\n  ControllerProps,\r\n  FieldPath,\r\n  FieldValues,\r\n  FormProvider,\r\n  useFormContext,\r\n  useFormState,\r\n} from \"react-hook-form\";\r\nimport { cn } from \"./../../lib/utils\";\r\nimport { Label } from \"./label\";\r\n\r\nconst Form = FormProvider;\r\n\r\ntype FormFieldContextValue<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> = {\r\n  name: TName;\r\n};\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\r\n  {} as FormFieldContextValue\r\n);\r\n\r\nconst FormField = <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n  ...props\r\n}: ControllerProps<TFieldValues, TName>) => {\r\n  return (\r\n    <FormFieldContext.Provider value={{ name: props.name }}>\r\n      <Controller {...props} />\r\n    </FormFieldContext.Provider>\r\n  );\r\n};\r\n\r\nconst useFormField = () => {\r\n  const fieldContext = React.useContext(FormFieldContext);\r\n  const itemContext = React.useContext(FormItemContext);\r\n  const { getFieldState } = useFormContext();\r\n  const formState = useFormState({ name: fieldContext.name });\r\n  const fieldState = getFieldState(fieldContext.name, formState);\r\n\r\n  if (!fieldContext) {\r\n    throw new Error(\"useFormField should be used within <FormField>\");\r\n  }\r\n\r\n  const { id } = itemContext;\r\n\r\n  return {\r\n    id,\r\n    name: fieldContext.name,\r\n    formItemId: `${id}-form-item`,\r\n    formDescriptionId: `${id}-form-item-description`,\r\n    formMessageId: `${id}-form-item-message`,\r\n    ...fieldState,\r\n  };\r\n};\r\n\r\ntype FormItemContextValue = {\r\n  id: string;\r\n};\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue>(\r\n  {} as FormItemContextValue\r\n);\r\n\r\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  const id = React.useId();\r\n\r\n  return (\r\n    <FormItemContext.Provider value={{ id }}>\r\n      <div\r\n        data-slot=\"form-item\"\r\n        className={cn(\"grid gap-2\", className)}\r\n        {...props}\r\n      />\r\n    </FormItemContext.Provider>\r\n  );\r\n}\r\n\r\nfunction FormLabel({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\r\n  const { error, formItemId } = useFormField();\r\n\r\n  return (\r\n    <Label\r\n      data-slot=\"form-label\"\r\n      data-error={!!error}\r\n      className={cn(\r\n        \"data-[error=true]:text-neutral-50 dark:data-[error=true]:text-neutral-50\",\r\n        className\r\n      )}\r\n      htmlFor={formItemId}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\r\n  const { error, formItemId, formDescriptionId, formMessageId } =\r\n    useFormField();\r\n\r\n  return (\r\n    <Slot\r\n      data-slot=\"form-control\"\r\n      id={formItemId}\r\n      aria-describedby={\r\n        !error\r\n          ? `${formDescriptionId}`\r\n          : `${formDescriptionId} ${formMessageId}`\r\n      }\r\n      aria-invalid={!!error}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\r\n  const { formDescriptionId } = useFormField();\r\n\r\n  return (\r\n    <p\r\n      data-slot=\"form-description\"\r\n      id={formDescriptionId}\r\n      className={cn(\r\n        \"text-neutral-500 text-sm dark:text-neutral-400\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\r\n  const { error, formMessageId } = useFormField();\r\n  const body = error ? String(error?.message ?? \"\") : props.children;\r\n\r\n  if (!body) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <p\r\n      data-slot=\"form-message\"\r\n      id={formMessageId}\r\n      className={cn(\"text-neutral-50 text-sm dark:text-neutral-50\", className)}\r\n      {...props}\r\n    >\r\n      {body}\r\n    </p>\r\n  );\r\n}\r\n\r\nexport {\r\n  useFormField,\r\n  Form,\r\n  FormItem,\r\n  FormLabel,\r\n  FormControl,\r\n  FormDescription,\r\n  FormMessage,\r\n  FormField,\r\n};\r\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","useFormContext","formState","useFormState","fieldState","Error","id","FormItem","className","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","body","String"],"mappings":"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"}