{
  "title": "Form Error",
  "description": "A component for displaying form validation errors.",
  "name": "form-error",
  "dependencies": [
    "@tanstack/react-form"
  ],
  "registryDependencies": [],
  "type": "registry:component",
  "files": [
    {
      "path": "components/ui/forms/form-error.tsx",
      "type": "registry:component",
      "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 component for displaying form validation errors. Relies on @tanstack/react-form. Optimal for building reusable interface elements and user input flows.",
    "tags": [
      "component",
      "form"
    ]
  }
}