{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "time-picker",
  "dependencies": [
    "@zenithui/time-picker",
    "lucide-react"
  ],
  "registryDependencies": [
    "popover",
    "scroll-area",
    "toggle-group"
  ],
  "files": [
    {
      "path": "registry/ui/time-picker.tsx",
      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\nimport { cn } from \"@/lib/utils\"\nimport { useTimePicker } from \"@zenithui/time-picker\"\nimport { useEffect, useRef } from \"react\"\nimport { Clock } from \"lucide-react\"\n\nfunction formatTimeto24(time: string) {\n  const [hours, minutes] = time.split(\":\").map(Number)\n  const period = hours >= 12 ? \"PM\" : \"AM\"\n  // Convert 0 -> 12 for AM and 12 -> 12 for PM\n  const formattedHours = hours % 12 || 12\n  // Ensure two-digit minutes\n  const formattedMinutes = String(minutes).padStart(2, \"0\")\n  return `${formattedHours}:${formattedMinutes} ${period}`\n}\n\ninterface TimePickerProps {\n  time: string // HH:MM\n  onTimeChange: (time: string) => void // HH:MM\n  className?: string\n  format?: \"12-hours\" | \"24-hours\"\n  align?: \"center\" | \"end\" | \"start\"\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  alignOffset?: number\n  sideOffset?: number\n  formatter?: (time: string) => string\n}\n\nexport default function TimePicker({\n  time,\n  onTimeChange,\n  className,\n  format = \"12-hours\",\n  align = \"center\",\n  side = \"bottom\",\n  alignOffset = 0,\n  sideOffset = 0,\n  formatter = formatTimeto24,\n}: TimePickerProps) {\n  const {\n    hours,\n    minutes,\n    periods,\n    hour,\n    minute,\n    period,\n    setHour,\n    setMinute,\n    setPeriod,\n  } = useTimePicker({\n    format: format,\n    initialTime: time,\n    onTimeChange: onTimeChange,\n  })\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          className={cn(\n            \"flex w-full max-w-32 items-center justify-between\",\n            className,\n          )}\n        >\n          <span className=\"text-sky-950\">{`${formatter(time)}`}</span>\n          <Clock className=\"size-5 cursor-pointer self-center text-slate-500\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        align={align}\n        side={side}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"grid h-fit gap-1 overflow-hidden rounded-sm px-0 py-4\",\n          format === \"12-hours\" ? \"w-60 grid-cols-3\" : \"w-40 grid-cols-2\",\n        )}\n        onWheel={(e) => {\n          e.stopPropagation()\n        }}\n      >\n        <TimeScrollList\n          options={hours}\n          value={hour}\n          onChange={setHour}\n        />\n        <TimeScrollList\n          options={minutes}\n          value={minute}\n          onChange={setMinute}\n        />\n        {format === \"12-hours\" ? (\n          <TimeScrollList\n            options={periods}\n            value={period}\n            onChange={setPeriod}\n          />\n        ) : null}\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n// Helper Components and Functions\nfunction TimeScrollList({\n  options,\n  value,\n  onChange,\n}: {\n  options: string[]\n  value: string\n  onChange: (value: string) => void\n}) {\n  const listRef = useRef<HTMLDivElement>(null)\n\n  // Scroll to the selected item when the list renders\n  useEffect(() => {\n    const index = options.findIndex((option) => option === value)\n    if (listRef.current && index >= 0) {\n      const item = listRef.current.children[index] as HTMLElement\n      item?.scrollIntoView({ behavior: \"smooth\", block: \"center\" })\n    }\n  }, [value, options])\n\n  return (\n    <ScrollArea className=\"h-80 overflow-y-auto\">\n      <ToggleGroup\n        ref={listRef}\n        type=\"single\"\n        className=\"pointer-events-auto flex flex-col gap-2 p-0\"\n        value={value}\n        onValueChange={(value) => {\n          if (value) onChange(value)\n        }}\n      >\n        {options.map((option) => (\n          <ToggleGroupItem\n            key={option}\n            value={option}\n            aria-label={option}\n            className={cn(\n              \"data-[state='on']:!bg-primary h-12 w-12 border data-[state='on']:!text-white\",\n            )}\n          >\n            {option}\n          </ToggleGroupItem>\n        ))}\n      </ToggleGroup>\n    </ScrollArea>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}