{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field-input-form-demo",
  "type": "registry:component",
  "title": "Field Input Form Demo",
  "description": "A demo of the field input form",
  "dependencies": [
    "react-hook-form",
    "zod",
    "sonner"
  ],
  "registryDependencies": [
    "card",
    "form",
    "https://ui.ednesdayw.com/r/field-input.json"
  ],
  "files": [
    {
      "path": "src/registry/example/field-input/form.tsx",
      "content": "\"use client\";\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormMessage,\n} from \"@/components/ui/form\";\nimport { Button } from \"@/components/ui/button\";\nimport { FieldInput } from \"@/components/ui/field-input\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport * as React from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport { z } from \"zod\";\n\nconst formSchema = z.object({\n  email: z.string().email({\n    message: \"Invalid email\",\n  }),\n  password: z.string().min(6, {\n    message: \"Password must be at least 6 characters\",\n  }),\n});\n\nexport const FieldInputFormExample = () => {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      email: \"\",\n      password: \"\",\n    },\n  });\n\n  const onSubmit = async (values: z.infer<typeof formSchema>) => {\n    await new Promise((resolve) => setTimeout(resolve, 300));\n    toast.success(\"Register successfully\");\n  };\n\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle>Sign Up</CardTitle>\n        <CardDescription>\n          Create a new account to start using our service\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form {...form}>\n          <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n            <FormField\n              control={form.control}\n              name=\"email\"\n              render={({ field, fieldState }) => (\n                <FormItem>\n                  <FormControl>\n                    <FieldInput\n                      id=\"email\"\n                      label=\"Email\"\n                      variant=\"bordered\"\n                      aria-invalid={fieldState.invalid}\n                      {...field}\n                    />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n            <FormField\n              control={form.control}\n              name=\"password\"\n              render={({ field, fieldState }) => (\n                <FormItem>\n                  <FormControl>\n                    <FieldInput\n                      id=\"password\"\n                      label=\"Password\"\n                      type=\"password\"\n                      variant=\"bordered\"\n                      aria-invalid={fieldState.invalid}\n                      {...field}\n                    />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n            <div className=\"flex justify-end pt-2\">\n              <Button type=\"submit\" loading={form.formState.isSubmitting}>\n                Submit\n              </Button>\n            </div>\n          </form>\n        </Form>\n      </CardContent>\n    </Card>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/demo/field-input-form-demo.tsx"
    }
  ]
}