{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "time-picker",
  "title": "Time Picker",
  "description": "Popover time selector built from hour and minute columns.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/time-picker/time-picker.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Clock } from \"lucide-react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Button } from \"@vllnt/ui\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@vllnt/ui\";\n\nfunction pad(value: number): string {\n  return value.toString().padStart(2, \"0\");\n}\n\nfunction buildOptions(count: number, step: number): string[] {\n  return Array.from({ length: Math.ceil(count / step) }, (_unused, index) =>\n    pad(index * step),\n  );\n}\n\nfunction splitTime(value: string) {\n  const [hour = \"\", minute = \"\"] = value.split(\":\");\n  return { hour, minute };\n}\n\ntype TimeColumnProps = {\n  label: string;\n  onSelect: (value: string) => void;\n  options: string[];\n  selected: string;\n};\n\nfunction TimeColumn({ label, onSelect, options, selected }: TimeColumnProps) {\n  return (\n    <div\n      aria-label={label}\n      className=\"flex max-h-56 flex-col gap-1 overflow-y-auto px-1\"\n      role=\"listbox\"\n    >\n      {options.map((option) => (\n        <button\n          aria-selected={option === selected}\n          className={cn(\n            \"rounded-sm px-3 py-1.5 text-sm tabular-nums outline-none transition-colors hover:bg-accent focus-visible:bg-accent\",\n            option === selected &&\n              \"bg-primary text-primary-foreground hover:bg-primary\",\n          )}\n          key={option}\n          onClick={() => {\n            onSelect(option);\n          }}\n          role=\"option\"\n          type=\"button\"\n        >\n          {option}\n        </button>\n      ))}\n    </div>\n  );\n}\n\n/** Popover-based time selector built from hour and minute columns. */\nexport type TimePickerProps = {\n  className?: string;\n  defaultValue?: string;\n  minuteStep?: number;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  value?: string;\n};\n\nconst TimePicker = ({\n  className,\n  defaultValue = \"\",\n  minuteStep = 5,\n  onValueChange,\n  placeholder = \"Select time\",\n  ref,\n  value,\n}: TimePickerProps & { ref?: React.Ref<HTMLButtonElement> }) => {\n  const [internalValue, setInternalValue] = React.useState(defaultValue);\n  const currentValue = value ?? internalValue;\n  const { hour, minute } = splitTime(currentValue);\n\n  const commit = (nextHour: string, nextMinute: string) => {\n    const next = `${nextHour || \"00\"}:${nextMinute || \"00\"}`;\n    if (value === undefined) {\n      setInternalValue(next);\n    }\n\n    onValueChange?.(next);\n  };\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          className={cn(\n            \"w-full justify-start text-left font-normal\",\n            !currentValue && \"text-muted-foreground\",\n            className,\n          )}\n          ref={ref}\n          variant=\"outline\"\n        >\n          <Clock className=\"mr-2 size-4\" />\n          {currentValue || placeholder}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-auto p-2\">\n        <div className=\"flex gap-2\">\n          <TimeColumn\n            label=\"Hour\"\n            onSelect={(nextHour) => {\n              commit(nextHour, minute);\n            }}\n            options={buildOptions(24, 1)}\n            selected={hour}\n          />\n          <TimeColumn\n            label=\"Minute\"\n            onSelect={(nextMinute) => {\n              commit(hour, nextMinute);\n            }}\n            options={buildOptions(60, minuteStep)}\n            selected={minute}\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n};\nTimePicker.displayName = \"TimePicker\";\n\nexport { TimePicker };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}