{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form",
  "type": "registry:ui",
  "dependencies": [
    "@modular-forms/solid"
  ],
  "registryDependencies": [
    "@gc-solid/label"
  ],
  "files": [
    {
      "path": "ui/form.tsx",
      "content": "import type { Component, ComponentProps, JSX, ValidComponent } from \"solid-js\"\nimport { createContext, createUniqueId, Show, splitProps, useContext } from \"solid-js\"\n\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\nimport type {\n  FieldPath,\n  FieldStore,\n  FieldValues,\n  FormStore,\n  ResponseData\n} from \"@modular-forms/solid\"\nimport { getValue, Field as ModularField } from \"@modular-forms/solid\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/components/ui/label\"\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TResponseData extends ResponseData = undefined,\n  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TFieldName\n  formStore: FormStore<TFieldValues, TResponseData>\n  fieldStore: FieldStore<TFieldValues, TFieldName>\n}\n\nconst FormFieldContext = createContext<FormFieldContextValue>()\n\ntype FormFieldComponent = <\n  TFieldValues extends FieldValues = FieldValues,\n  TResponseData extends ResponseData = undefined,\n  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(props: {\n  of: FormStore<TFieldValues, TResponseData>\n  name: TFieldName\n  children: JSX.Element\n}) => JSX.Element\n\nconst FormField: FormFieldComponent = (props) => {\n  return (\n    // @ts-expect-error - Complex generic type compatibility with @modular-forms/solid\n    <ModularField name={props.name} of={props.of}>\n      {(field) => (\n        <FormFieldContext.Provider\n          value={{\n            name: props.name,\n            // @ts-expect-error - Generic type narrowing issue\n            formStore: props.of,\n            // @ts-expect-error - Generic type narrowing issue\n            fieldStore: field\n          }}\n        >\n          {props.children}\n        </FormFieldContext.Provider>\n      )}\n    </ModularField>\n  )\n}\n\nfunction useFormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TResponseData extends ResponseData = undefined,\n  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>() {\n  const context = useContext(FormFieldContext) as\n    | FormFieldContextValue<TFieldValues, TResponseData, TFieldName>\n    | undefined\n\n  if (!context) {\n    throw new Error(\"useFormField must be used within <FormField>\")\n  }\n\n  const { name, formStore, fieldStore } = context\n\n  return {\n    name,\n    formStore,\n    fieldStore,\n    formItemId: String(name),\n    formDescriptionId: `${name}-description`,\n    formMessageId: `${name}-message`,\n    error: fieldStore.error,\n    value: () => getValue(formStore, name)\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = createContext<FormItemContextValue>()\n\nconst FormItem: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  const id = createUniqueId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div class={cn(\"grid gap-2\", local.class)} data-slot=\"form-item\" {...others} />\n    </FormItemContext.Provider>\n  )\n}\n\nconst FormLabel = <T extends ValidComponent = \"label\">(\n  props: PolymorphicProps<T, ComponentProps<typeof Label>>\n) => {\n  const [local, others] = splitProps(props as ComponentProps<typeof Label>, [\"class\"])\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      class={cn(\"data-[error=true]:text-destructive\", local.class)}\n      data-error={!!error}\n      data-slot=\"form-label\"\n      for={formItemId}\n      {...others}\n    />\n  )\n}\n\nconst FormControl: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n\n  return <div class={cn(local.class)} data-slot=\"form-control\" {...others} />\n}\n\nconst FormDescription: Component<ComponentProps<\"p\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      class={cn(\"text-muted-foreground text-sm\", local.class)}\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      {...others}\n    />\n  )\n}\n\nconst FormMessage: Component<ComponentProps<\"p\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\", \"children\"])\n  const { error, formMessageId } = useFormField()\n\n  const body = () => {\n    if (error) {\n      return String(error)\n    }\n    return local.children\n  }\n\n  return (\n    <Show when={body()}>\n      <p\n        class={cn(\"text-destructive text-sm\", local.class)}\n        data-slot=\"form-message\"\n        id={formMessageId}\n        {...others}\n      >\n        {body()}\n      </p>\n    </Show>\n  )\n}\n\nexport { FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage, useFormField }\n",
      "type": "registry:ui"
    }
  ]
}