{
  "name": "TimePicker",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/TimePicker.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "time-picker",
  "elName": "TimePicker",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#time-picker",
  "hasLiveDemo": false,
  "description": "Simple HH:MM time input. Wraps the native `<input type=\"time\">` for\nkeyboard parity + accessibility, with an optional 12-hour caption.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "TimePicker",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "TimePickerProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { TimePicker } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "string",
      "doc": "Controlled value in 24-hour `HH:MM` format."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "string",
      "doc": "Uncontrolled initial value in 24-hour `HH:MM` format."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(value: string) => void",
      "doc": "Fires with the 24-hour `HH:MM` string."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional visible label."
    },
    {
      "name": "stepMinutes",
      "optional": true,
      "type": "number",
      "doc": "Step in minutes (used by the native time picker). Default `15`."
    },
    {
      "name": "min",
      "optional": true,
      "type": "string",
      "doc": "Min time (24-hour `HH:MM`)."
    },
    {
      "name": "max",
      "optional": true,
      "type": "string",
      "doc": "Max time (24-hour `HH:MM`)."
    },
    {
      "name": "use12Hour",
      "optional": true,
      "type": "boolean",
      "doc": "Render in 12-hour display. The stored value remains 24-hour. Default `false`."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable interaction."
    }
  ],
  "classesUsed": [
    "time-picker",
    "time-picker-12h",
    "time-picker-input",
    "time-picker-label",
    "time-picker-row"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"time-picker\">\n  <label class=\"time-picker-label\" for=\"tp-demo\">Start of day</label>\n  <div class=\"time-picker-row\">\n    <input id=\"tp-demo\" type=\"time\" class=\"time-picker-input\" value=\"09:00\" step=\"900\" min=\"06:00\" max=\"22:00\">\n    <span class=\"time-picker-12h\" aria-hidden=\"true\">09:00 AM</span>\n  </div>\n</div>",
    "css": ".time-picker { display: flex; flex-direction: column; gap: 6px; }\n\n.time-picker-12h {\n  font: 400 12.5px/1 var(--f-mono);\n  color: var(--fg-soft);\n  font-variant-numeric: tabular-nums;\n}\n\n.time-picker-input {\n  height: 32px;\n  padding: 0 var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 400 13px/1 var(--f-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n.time-picker-label { font: 500 13px/1.3 var(--f-body); color: var(--fg); }\n\n.time-picker-row { display: inline-flex; align-items: center; gap: var(--s-2); }"
  }
}