{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form",
  "title": "Form",
  "description": "Builds forms with React Hook Form.",
  "dependencies": [
    "react-hook-form",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/label.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/form.jsx",
      "content": "\"use client\";\nimport * as React from \"react\";\nimport {\n\tController,\n\tFormProvider,\n\tuseFormContext,\n\tuseFormState,\n} from \"react-hook-form\";\n\nimport { cn } from \"@/registry/optics/lib/utils\";\nimport { Label } from \"@/registry/optics/label\";\n\nconst Slot = ({ children, ...props }) => {\n\tif (React.isValidElement(children)) {\n\t\treturn React.cloneElement(children, {\n\t\t\t...props,\n\t\t\t...children.props,\n\t\t\tclassName: cn(props.className, children.props.className),\n\t\t});\n\t}\n\treturn null;\n};\n\nconst Form = FormProvider;\n\nconst FormFieldContext = React.createContext({ name: \"\" });\n\nconst FormField = ({ ...props }) => {\n\treturn (\n\t\t<FormFieldContext.Provider value={{ name: props.name }}>\n\t\t\t<Controller {...props} />\n\t\t</FormFieldContext.Provider>\n\t);\n};\n\nconst useFormField = () => {\n\tconst fieldContext = React.useContext(FormFieldContext);\n\tconst itemContext = React.useContext(FormItemContext);\n\tconst { getFieldState } = useFormContext();\n\tconst formState = useFormState({ name: fieldContext.name });\n\tconst fieldState = getFieldState(fieldContext.name, formState);\n\n\tif (!fieldContext) {\n\t\tthrow new Error(\"useFormField should be used within <FormField>\");\n\t}\n\n\tconst { id } = itemContext;\n\n\treturn {\n\t\tid,\n\t\tname: fieldContext.name,\n\t\tformItemId: `${id}-form-item`,\n\t\tformDescriptionId: `${id}-form-item-description`,\n\t\tformMessageId: `${id}-form-item-message`,\n\t\t...fieldState,\n\t};\n};\n\nconst FormItemContext = React.createContext({});\n\nfunction FormItem({ className = \"\", ...props }) {\n\tconst id = React.useId();\n\n\treturn (\n\t\t<FormItemContext.Provider value={{ id }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"form-item\"\n\t\t\t\tclassName={cn(\"grid gap-2\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</FormItemContext.Provider>\n\t);\n}\n\nfunction FormLabel({ className = \"\", ...props }) {\n\tconst { error, formItemId } = useFormField();\n\n\treturn (\n\t\t<Label\n\t\t\tdata-slot=\"form-label\"\n\t\t\tdata-error={!!error}\n\t\t\tclassName={cn(\"data-[error=true]:text-destructive\", className)}\n\t\t\thtmlFor={formItemId}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction FormControl({ render = undefined, ...props }) {\n\tconst { error, formItemId, formDescriptionId, formMessageId } =\n\t\tuseFormField();\n\n\treturn (\n\t\t<Slot\n\t\t\tdata-slot=\"form-control\"\n\t\t\tid={formItemId}\n\t\t\taria-describedby={\n\t\t\t\t!error\n\t\t\t\t\t? `${formDescriptionId}`\n\t\t\t\t\t: `${formDescriptionId} ${formMessageId}`\n\t\t\t}\n\t\t\taria-invalid={!!error}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction FormDescription({ className = \"\", ...props }) {\n\tconst { formDescriptionId } = useFormField();\n\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"form-description\"\n\t\t\tid={formDescriptionId}\n\t\t\tclassName={cn(\"text-muted-foreground text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction FormMessage({ className = \"\", children = null, ...props }) {\n\tconst { error, formMessageId } = useFormField();\n\tconst body = error ? String(error?.message ?? \"\") : children;\n\n\tif (!body) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"form-message\"\n\t\t\tid={formMessageId}\n\t\t\tclassName={cn(\"text-destructive text-sm\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{body}\n\t\t</p>\n\t);\n}\n\nForm.displayName = \"Form\";\nFormItem.displayName = \"FormItem\";\nFormLabel.displayName = \"FormLabel\";\nFormControl.displayName = \"FormControl\";\nFormDescription.displayName = \"FormDescription\";\nFormMessage.displayName = \"FormMessage\";\nFormField.displayName = \"FormField\";\n\nexport {\n\tuseFormField,\n\tForm,\n\tFormItem,\n\tFormLabel,\n\tFormControl,\n\tFormDescription,\n\tFormMessage,\n\tFormField,\n};\n",
      "type": "registry:component",
      "target": "components/optics/form.jsx"
    }
  ],
  "type": "registry:component"
}