{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-3",
  "type": "registry:component",
  "title": "Form 3",
  "description": "Form 3. A collection of input fields, controls, and actions used to capture and submit user data, such as text, selections, and files.",
  "dependencies": [
    "@hookform/resolvers",
    "date-fns",
    "react-hook-form",
    "react-icons",
    "sonner",
    "zod"
  ],
  "registryDependencies": [
    "alert",
    "button",
    "calendar",
    "field",
    "popover"
  ],
  "files": [
    {
      "path": "components/watermelon/form-3.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { FaCalendarAlt, FaCheckDouble } from 'react-icons/fa';\n\nimport { format } from 'date-fns';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Controller, useForm } from 'react-hook-form';\nimport { toast } from 'sonner';\nimport { z } from 'zod';\n\nimport { Alert, AlertTitle } from '@/components/base-ui/alert';\nimport { Button } from '@/components/base-ui/button';\nimport { Calendar } from '@/components/base-ui/calendar';\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from '@/components/base-ui/field';\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/base-ui/popover';\n\nimport { cn } from '@/lib/utils';\n\nconst FormSchema = z.object({\n  dob: z.date().refine((val) => val !== undefined, {\n    message: 'Please select your date of birth.',\n  }),\n});\n\nconst Form3 = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  });\n\n  function onSubmit() {\n    toast.custom(() => (\n      <Alert className=\"border-success text-success flex items-center gap-2 sm:w-100\">\n        <FaCheckDouble className=\"animate-pulse\" />\n        <AlertTitle>Your personalized recommendations are ready 🎉</AlertTitle>\n      </Alert>\n    ));\n  }\n\n  return (\n    <form\n      onSubmit={form.handleSubmit(onSubmit)}\n      className=\"w-full max-w-xs space-y-6\"\n    >\n      <Field>\n        <FieldLabel className=\"flex items-center gap-2\">\n          <FaCalendarAlt className=\"text-muted-foreground\" />\n          Select Your Birth Date\n        </FieldLabel>\n\n        <FieldContent>\n          <Controller\n            control={form.control}\n            name=\"dob\"\n            render={({ field }) => (\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    className={cn(\n                      'bg-muted/50 w-full rounded-sm pl-3 text-left font-normal',\n                      !field.value && 'text-muted-foreground',\n                    )}\n                  >\n                    {field.value ? (\n                      format(field.value, 'PPP')\n                    ) : (\n                      <span>Choose your date</span>\n                    )}\n                    <FaCalendarAlt className=\"ml-auto opacity-50\" />\n                  </Button>\n                </PopoverTrigger>\n\n                <PopoverContent\n                  className=\"animate-in fade-in zoom-in-95 w-auto p-0\"\n                  align=\"start\"\n                >\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date('1900-01-01')\n                    }\n                  />\n                </PopoverContent>\n              </Popover>\n            )}\n          />\n        </FieldContent>\n\n        <FieldDescription>\n          Your date helps us personalize your experience and tailor content just\n          for you.\n        </FieldDescription>\n\n        <FieldError className=\"text-destructive text-xs\">\n          {form.formState.errors.dob?.message}\n        </FieldError>\n      </Field>\n\n      <Button\n        type=\"submit\"\n        className=\"from-primary to-primary/70 flex w-full items-center justify-center gap-2 rounded-sm border border-black/10 bg-gradient-to-b shadow-sm transition-all text-shadow-xs active:scale-98\"\n      >\n        Continue\n      </Button>\n    </form>\n  );\n};\n\nexport default Form3;\n"
    }
  ]
}