{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-time-picker",
  "type": "registry:component",
  "title": "Date Time Picker",
  "description": "A date and time picker component for selecting dates and times.",
  "registryDependencies": [
    "button",
    "calendar",
    "form",
    "popover",
    "scroll-area"
  ],
  "files": [
    {
      "path": "src/components/ui/date-time-picker.tsx",
      "content": "import { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport type { ControllerRenderProps, UseFormReturn } from \"react-hook-form\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport {\n  FormControl,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/components/ui/form\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport { useCalendar } from \"@/features/calendar/contexts/calendar-context\";\nimport type { TEventFormData } from \"@/features/calendar/schemas\";\n\ninterface DatePickerProps {\n  form: UseFormReturn<TEventFormData>;\n  field: ControllerRenderProps<TEventFormData, \"endDate\" | \"startDate\">;\n}\n\nexport function DateTimePicker({ form, field }: DatePickerProps) {\n  const { use24HourFormat } = useCalendar();\n\n  function handleDateSelect(date: Date | undefined) {\n    if (date) {\n      form.setValue(field.name, date);\n    }\n  }\n\n  function handleTimeChange(type: \"hour\" | \"minute\" | \"ampm\", value: string) {\n    const currentDate = form.getValues(field.name) || new Date();\n    const newDate = new Date(currentDate);\n\n    if (type === \"hour\") {\n      newDate.setHours(parseInt(value, 10));\n    } else if (type === \"minute\") {\n      newDate.setMinutes(parseInt(value, 10));\n    } else if (type === \"ampm\") {\n      const hours = newDate.getHours();\n      if (value === \"AM\" && hours >= 12) {\n        newDate.setHours(hours - 12);\n      } else if (value === \"PM\" && hours < 12) {\n        newDate.setHours(hours + 12);\n      }\n    }\n\n    form.setValue(field.name, newDate);\n  }\n\n  return (\n    <FormItem className=\"flex flex-col\">\n      <FormLabel>\n        {field.name === \"startDate\" ? \"Start Date\" : \"End Date\"}\n      </FormLabel>\n      <Popover modal={true}>\n        <PopoverTrigger asChild>\n          <FormControl>\n            <Button\n              variant={\"outline\"}\n              className={cn(\n                \"w-full pl-3 text-left font-normal\",\n                !field.value && \"text-muted-foreground\",\n              )}\n            >\n              {field.value ? (\n                format(\n                  field.value,\n                  use24HourFormat ? \"MM/dd/yyyy HH:mm\" : \"MM/dd/yyyy hh:mm aa\",\n                )\n              ) : (\n                <span>MM/DD/YYYY hh:mm aa</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\">\n          <div className=\"sm:flex\">\n            <Calendar\n              mode=\"single\"\n              selected={field.value}\n              onSelect={handleDateSelect}\n              initialFocus\n            />\n            <div className=\"flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x\">\n              <ScrollArea className=\"w-64 sm:w-auto\">\n                <div className=\"flex sm:flex-col p-2\">\n                  {Array.from(\n                    { length: use24HourFormat ? 24 : 12 },\n                    (_, i) => i,\n                  ).map((hour) => (\n                    <Button\n                      key={hour}\n                      size=\"icon\"\n                      variant={\n                        field.value &&\n                        field.value.getHours() % (use24HourFormat ? 24 : 12) ===\n                          hour % (use24HourFormat ? 24 : 12)\n                          ? \"default\"\n                          : \"ghost\"\n                      }\n                      className=\"sm:w-full shrink-0 aspect-square\"\n                      onClick={() => handleTimeChange(\"hour\", hour.toString())}\n                    >\n                      {hour.toString().padStart(2, \"0\")}\n                    </Button>\n                  ))}\n                </div>\n                <ScrollBar orientation=\"horizontal\" className=\"sm:hidden\" />\n              </ScrollArea>\n              <ScrollArea className=\"w-64 sm:w-auto\">\n                <div className=\"flex sm:flex-col p-2\">\n                  {Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (\n                    <Button\n                      key={minute}\n                      size=\"icon\"\n                      variant={\n                        field.value && field.value.getMinutes() === minute\n                          ? \"default\"\n                          : \"ghost\"\n                      }\n                      className=\"sm:w-full shrink-0 aspect-square\"\n                      onClick={() =>\n                        handleTimeChange(\"minute\", minute.toString())\n                      }\n                    >\n                      {minute.toString().padStart(2, \"0\")}\n                    </Button>\n                  ))}\n                </div>\n                <ScrollBar orientation=\"horizontal\" className=\"sm:hidden\" />\n              </ScrollArea>\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n      <FormMessage />\n    </FormItem>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}