{
  "name": "date-picker-form",
  "type": "registry:ui",
  "registryDependencies": [
    "calendar",
    "button",
    "form",
    "sonner",
    "popover"
  ],
  "files": [
    {
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { z } from \"zod\";\nimport { format } from \"date-fns\";\nimport { useForm } from \"react-hook-form\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\n\nimport { toast } from \"sonner\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/components/ui/form\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required, Morty! Don't screw this up!\",\n  }),\n});\n\nexport default function DatePickerForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  });\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast.success(\n      \"Wubba Lubba Dub-Dub! Date submitted! Now, where's my Szechuan sauce?\"\n    );\n    form.reset();\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] 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>Pick a date, Morty! Quick!</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\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                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth, Morty. Try not to create a branching\n                timeline!\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\" className=\"hover:cursor-pointer\">\n          Submit\n        </Button>\n      </form>\n    </Form>\n  );\n}\n",
      "path": "ui/date-picker-form.tsx",
      "target": "components/ui/date-picker-form.tsx"
    }
  ]
}