{
  "name": "time-picker-form-demo",
  "type": "registry:example",
  "registryDependencies": [
    "button",
    "form",
    "sonner"
  ],
  "files": [
    {
      "path": "examples/time-picker-form-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport * as React from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport * as z from \"zod\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/bases/radix/ui/form\";\nimport {\n  TimePicker,\n  TimePickerContent,\n  TimePickerHour,\n  TimePickerInput,\n  TimePickerInputGroup,\n  TimePickerMinute,\n  TimePickerPeriod,\n  TimePickerSeparator,\n  TimePickerTrigger,\n} from \"@/registry/bases/radix/ui/time-picker\";\n\nconst formSchema = z.object({\n  appointmentTime: z.string().min(1, {\n    message: \"Please select an appointment time.\",\n  }),\n});\n\ntype FormSchema = z.infer<typeof formSchema>;\n\nexport default function TimePickerFormDemo() {\n  const form = useForm<FormSchema>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      appointmentTime: \"09:00\",\n    },\n  });\n\n  const onSubmit = React.useCallback((data: FormSchema) => {\n    toast.success(`Appointment scheduled for: ${data.appointmentTime}`);\n  }, []);\n\n  return (\n    <Form {...form}>\n      <form\n        onSubmit={form.handleSubmit(onSubmit)}\n        className=\"flex w-[280px] flex-col gap-4\"\n      >\n        <FormField\n          control={form.control}\n          name=\"appointmentTime\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Appointment time</FormLabel>\n              <FormControl>\n                <TimePicker\n                  value={field.value}\n                  onValueChange={field.onChange}\n                  className=\"w-[280px]\"\n                >\n                  <TimePickerInputGroup>\n                    <TimePickerInput segment=\"hour\" />\n                    <TimePickerSeparator />\n                    <TimePickerInput segment=\"minute\" />\n                    <TimePickerInput segment=\"period\" />\n                    <TimePickerTrigger />\n                  </TimePickerInputGroup>\n                  <TimePickerContent>\n                    <TimePickerHour />\n                    <TimePickerMinute />\n                    <TimePickerPeriod />\n                  </TimePickerContent>\n                </TimePicker>\n              </FormControl>\n              <FormDescription>\n                Select your preferred appointment time.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Schedule appointment</Button>\n      </form>\n    </Form>\n  );\n}\n",
      "target": ""
    }
  ]
}