{
  "title": "Form Textarea",
  "description": "A textarea input field with validation and error handling.",
  "name": "form-textarea",
  "dependencies": [
    "@tanstack/react-form"
  ],
  "registryDependencies": [
    "field",
    "textarea"
  ],
  "type": "registry:component",
  "files": [
    {
      "path": "components/ui/forms/form-textarea.tsx",
      "type": "registry:component",
      "content": "import { type AnyFormApi, type DeepKeys, useField } from \"@tanstack/react-form\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Field, FieldLabel } from \"@/components/ui/field\";\nimport { FormError } from \"@/components/ui/forms/form-error\";\nimport { type GetFormData } from \"@/components/ui/forms/helpers\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport type FormTextareaProps<TForm extends AnyFormApi> = Omit<\n    ComponentProps<\"textarea\">,\n    \"name\" | \"form\" | \"prefix\"\n> & {\n    label?: ReactNode;\n    form: TForm;\n    name: DeepKeys<GetFormData<TForm>>;\n};\n\nexport const FormTextarea = <TForm extends AnyFormApi>({ label, form, name, ...rest }: FormTextareaProps<TForm>) => {\n    const field = useField({\n        form,\n        name,\n    });\n\n    const errors = field.state.meta.errors[0];\n\n    const error = typeof errors === \"object\" ? errors.message : errors;\n\n    return (\n        <Field data-invalid={error != undefined} className=\"gap-1.5\">\n            {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}\n            <Textarea\n                id={field.name}\n                name={field.name}\n                value={field.state.value ?? \"\"}\n                onBlur={field.handleBlur}\n                onChange={(e) => field.handleChange(e.target.value)}\n                aria-invalid={error != undefined}\n                {...rest}\n            />\n            <FormError form={form} name={name} className=\"mt-0.5\" />\n        </Field>\n    );\n};\n"
    },
    {
      "path": "components/ui/forms/form-error.tsx",
      "type": "registry:ui",
      "content": "import { type AnyFormApi, type DeepKeys, useField } from \"@tanstack/react-form\";\nimport type { InputHTMLAttributes } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { type GetFormData } from \"@/components/ui/forms/helpers\";\n\nexport type FormErrorProps<TForm extends AnyFormApi> = Omit<\n    InputHTMLAttributes<HTMLParagraphElement>,\n    \"name\" | \"form\"\n> & {\n    form: TForm;\n    name: DeepKeys<GetFormData<TForm>>;\n};\n\nexport const FormError = <TForm extends AnyFormApi>({ form, name = \"\", className, ...rest }: FormErrorProps<TForm>) => {\n    const field = useField({\n        form,\n        name,\n    });\n\n    const errors = field.state.meta.errors[0];\n    const error = typeof errors === \"object\" ? errors.message : errors;\n\n    return (\n        <>\n            {error && (\n                <p {...rest} className={cn(\"text-destructive text-sm\", className)}>\n                    {error}\n                </p>\n            )}\n        </>\n    );\n};\n"
    },
    {
      "path": "components/ui/forms/helpers.ts",
      "type": "registry:ui",
      "content": "import { type AnyFormApi, type DeepKeys, type FormApi } from \"@tanstack/react-form\";\n\nexport type GetFormData<TForm> =\n    TForm extends FormApi<infer TData, any, any, any, any, any, any, any, any, any, any, any> ? TData : never;\n\nexport const setFieldError = <TForm extends AnyFormApi>(\n    form: TForm,\n    field: DeepKeys<GetFormData<TForm>>,\n    error: string,\n) => {\n    form.setFieldMeta(field, (prev) => ({\n        ...prev,\n        errorMap: {\n            ...prev.errorMap,\n            onSubmit: error,\n        },\n    }));\n};\n\nexport const clearFormErrors = <TForm extends AnyFormApi>(form: TForm) => {\n    form.setErrorMap({ onDynamic: { fields: {} } });\n};\n"
    }
  ],
  "mcp": {
    "description": "Provides refined UI interactions and accessible controls. A textarea input field with validation and error handling. Relies on @tanstack/react-form, field, textarea. Optimal for building reusable interface elements and user input flows.",
    "tags": [
      "component",
      "form"
    ]
  }
}