{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form",
  "title": "form",
  "description": "shadcn's react-hook-form bindings (Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage, useFormField), drawn with the Field parts. For zod schemas, also install @hookform/resolvers and zod.",
  "dependencies": [
    "@radix-ui/react-slot@^1",
    "react-hook-form@^7"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils",
    "@dwellir/field"
  ],
  "files": [
    {
      "path": "components/ui/form.tsx",
      "content": "'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { type ComponentProps, createContext, useContext, useId } from 'react';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState,\n} from 'react-hook-form';\nimport { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';\nimport { cn } from '@/lib/utils';\n\n/*\n * shadcn's react-hook-form bindings, drawn with the Field parts. FormItem is a\n * Field, so a form built from either set looks the same. Validate with a\n * schema: useForm({ resolver: zodResolver(schema) }) from @hookform/resolvers.\n */\n\nconst Form = FormProvider;\n\nconst FormFieldContext = createContext<{ name: string } | null>(null);\nconst FormItemContext = createContext<{ id: string } | null>(null);\n\nfunction FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(props: ControllerProps<TFieldValues, TName>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n}\n\nfunction useFormField() {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext?.name });\n  if (!fieldContext || !itemContext) {\n    throw new Error('useFormField must sit inside a FormField and a FormItem');\n  }\n  const fieldState = getFieldState(fieldContext.name, formState);\n  const { id } = itemContext;\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n}\n\n/* One field: a Field that knows its form item's ids. Set orientation as on Field. */\nfunction FormItem(props: ComponentProps<typeof Field>) {\n  const id = useId();\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Field data-slot=\"form-item\" {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({ className, ...props }: ComponentProps<typeof FieldLabel>) {\n  const { error, formItemId } = useFormField();\n  return (\n    <FieldLabel\n      data-slot=\"form-label\"\n      data-error={Boolean(error)}\n      className={cn('data-[error=true]:text-destructive', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\n/* Wraps the one control, such as an Input or a SelectTrigger, and gives it the item's ids. */\nfunction FormControl(props: ComponentProps<typeof Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId}\n      aria-invalid={Boolean(error)}\n      {...props}\n    />\n  );\n}\n\nfunction FormDescription(props: ComponentProps<typeof FieldDescription>) {\n  const { formDescriptionId } = useFormField();\n  return <FieldDescription data-slot=\"form-description\" id={formDescriptionId} {...props} />;\n}\n\n/* The field's error from react-hook-form; without one, its children, if any. */\nfunction FormMessage({ children, ...props }: ComponentProps<typeof FieldError>) {\n  const { error, formMessageId } = useFormField();\n  return (\n    <FieldError data-slot=\"form-message\" id={formMessageId} errors={[error]} {...props}>\n      {error ? undefined : children}\n    </FieldError>\n  );\n}\n\nexport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n  useFormField,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}