{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "time-picker",
  "title": "Time Picker",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A native time field with optional quick-pick presets and controlled or uncontrolled state.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/i18n.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/time-picker.tsx",
      "content": "// Ballmac UI: Time Picker. https://ui.ballmac.com/components/time-picker\n\"use client\"\n\nimport * as React from \"react\"\nimport { Clock } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { useMessages } from \"@/lib/ballmac/i18n\"\n\ntype TimePreset = { label: string; value: string }\ntype TimePickerProps = Omit<\n  React.ComponentProps<\"input\">,\n  \"type\" | \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n  /** Controlled time in HH:mm format. */\n  value?: string\n  /** Initial time when uncontrolled. */\n  defaultValue?: string\n  /** Called with the new HH:mm time. */\n  onValueChange?: (value: string) => void\n  /** Accessible name of the time field. */\n  label?: string\n  /** Optional shortcuts to common times. */\n  presets?: TimePreset[]\n}\nfunction TimePicker({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  label,\n  presets = [],\n  className,\n  disabled,\n  ...props\n}: TimePickerProps) {\n  const msg = useMessages()\n  label ??= msg(\"time-picker.label\", \"Time\")\n  const [internal, setInternal] = React.useState(defaultValue)\n  const current = value ?? internal\n  function commit(next: string) {\n    if (value === undefined) setInternal(next)\n    onValueChange?.(next)\n  }\n  return (\n    <div data-slot=\"time-picker\" className={cn(\"w-full min-w-0\", className)}>\n      <div className=\"flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 shadow-xs transition-[border-color,box-shadow] duration-150 motion-reduce:transition-none focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50\">\n        <Clock\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0 text-muted-foreground\"\n        />\n        <input\n          data-slot=\"time-picker-input\"\n          type=\"time\"\n          aria-label={label}\n          disabled={disabled}\n          value={current}\n          onChange={(event) => commit(event.currentTarget.value)}\n          className=\"h-full min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none disabled:opacity-50\"\n          {...props}\n        />\n      </div>\n      {presets.length > 0 && (\n        <div\n          data-slot=\"time-picker-presets\"\n          className=\"mt-2 flex flex-wrap gap-1.5\"\n        >\n          {presets.map((preset) => (\n            <button\n              key={preset.value}\n              type=\"button\"\n              disabled={disabled}\n              onClick={() => commit(preset.value)}\n              className={cn(\n                \"rounded-md border border-border px-2.5 py-1 text-xs outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50\",\n                current === preset.value && \"border-ring bg-accent font-medium\",\n              )}\n            >\n              {preset.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\nexport { TimePicker, type TimePickerProps, type TimePreset }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/time-picker.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "time",
      "schedule",
      "input"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "A native time field with optional quick-pick presets and controlled or uncontrolled state.",
      "whenToUse": [
        "Schedule an appointment or reminder",
        "Offer common meeting times as shortcuts"
      ],
      "whenNotToUse": [
        "Use date-range-picker for a period across days"
      ],
      "composesWith": [
        "input"
      ],
      "a11y": [
        {
          "keys": "Arrow keys",
          "action": "Edits the native time field"
        },
        {
          "keys": "Tab / Enter",
          "action": "Activates a time preset"
        }
      ],
      "customization": [
        "presets",
        "value / defaultValue and onValueChange"
      ]
    },
    "examples": [
      "time-picker-demo",
      "time-picker-states"
    ],
    "url": "https://ui.ballmac.com/components/time-picker"
  },
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}