{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "files": [
    {
      "content": "\"use client\";\n\nimport { useForm } from \"@tanstack/react-form\";\nimport { toast } from \"sonner\";\nimport { z } from \"zod\";\nimport { Button } from \"~/registry/ui/button\";\nimport { Field } from \"~/registry/ui/field\";\nimport { Input } from \"~/registry/ui/input\";\nimport { TextField } from \"~/registry/ui/text-field\";\nimport { Textarea } from \"~/registry/ui/textarea\";\n\nconst formSchema = z.object({\n  title: z\n    .string()\n    .min(5, \"Title must be at least 5 characters.\")\n    .max(32, \"Title must be at most 32 characters.\"),\n  description: z\n    .string()\n    .min(20, \"Description must be at least 20 characters.\")\n    .max(200, \"Description must be at most 200 characters.\"),\n});\n\nexport function TanstackFormDemo() {\n  const form = useForm({\n    defaultValues: {\n      title: \"\",\n      description: \"\",\n    },\n    validators: {\n      onChange: formSchema,\n    },\n    onSubmit: ({ value }) => {\n      toast(JSON.stringify(value, null, 2));\n    },\n  });\n\n  return (\n    <form\n      className=\"flex w-full max-w-md flex-col gap-4\"\n      onSubmit={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        form.handleSubmit();\n      }}\n    >\n      <form.Field\n        children={(field) => {\n          const isInvalid =\n            field.state.meta.isTouched && !field.state.meta.isValid;\n          return (\n            <Field.Root\n              render={\n                <TextField\n                  id={field.name}\n                  isInvalid={isInvalid}\n                  name={field.name}\n                  onBlur={field.handleBlur}\n                  onChange={field.handleChange}\n                  value={field.state.value}\n                />\n              }\n            >\n              <Field.Label>Title</Field.Label>\n              <Input placeholder=\"Bug report title\" />\n              <Field.Description>\n                Provide a concise title for your report.\n              </Field.Description>\n              <Field.Error errors={field.state.meta.errors} />\n            </Field.Root>\n          );\n        }}\n        name=\"title\"\n      />\n      <form.Field\n        children={(field) => {\n          const isInvalid =\n            field.state.meta.isTouched && !field.state.meta.isValid;\n          return (\n            <Field.Root\n              render={\n                <TextField\n                  id={field.name}\n                  isInvalid={isInvalid}\n                  name={field.name}\n                  onBlur={field.handleBlur}\n                  onChange={field.handleChange}\n                  value={field.state.value}\n                />\n              }\n            >\n              <Field.Label>Description</Field.Label>\n              <Textarea\n                className=\"min-h-15\"\n                placeholder=\"Describe the issue in detail...\"\n              />\n              <Field.Description>\n                Include steps to reproduce the issue.\n              </Field.Description>\n              <Field.Error errors={field.state.meta.errors} />\n            </Field.Root>\n          );\n        }}\n        name=\"description\"\n      />\n      <div className=\"flex gap-2\">\n        <Button onPress={() => form.reset()} type=\"reset\" variant=\"outline\">\n          Reset\n        </Button>\n        <Button type=\"submit\">Submit</Button>\n      </div>\n    </form>\n  );\n}\n",
      "path": "src/registry/examples/form/tanstack-form/tanstack-form-demo.tsx",
      "type": "registry:example"
    }
  ],
  "name": "tanstack-form-demo",
  "registryDependencies": [
    "@kanpeki/form"
  ],
  "type": "registry:example"
}