{
  "generatedFrom": "time-picker.contract.json",
  "component": "TimePicker",
  "slug": "time-picker",
  "group": "Data Entry",
  "tier": "composite-antd",
  "summary": "Pick a time of day from scrolling hour/minute/second columns — schedules, reminders, durations — rendered through the shared TimePicker.",
  "install": {
    "package": "@ahaslides-product/design",
    "registry": "https://npm.pkg.github.com",
    "scope": "@ahaslides-product",
    "auth": "Published to GitHub Packages — needs a GitHub token with read:packages. Configure the @ahaslides-product scope in .npmrc before installing.",
    "npmrc": "@ahaslides-product:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages",
    "command": "npm i @ahaslides-product/design",
    "tokenLayer": "import '@ahaslides-product/design/tokens.css';",
    "import": "import '@ahaslides-product/design/time-picker-theme';",
    "element": null,
    "registers": null
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/time-picker/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/time-picker/time-picker.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/time-picker.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/time-picker.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler. Paste into an .html file and it renders with no build step.",
  "frameworks": {
    "react": {
      "package": "antd",
      "major": 6
    },
    "vue": {
      "package": "ant-design-vue",
      "major": 4
    },
    "html": {
      "via": "cdn-react",
      "runnable": "paste-and-run — React + antd loaded from a CDN, no build step"
    }
  },
  "props": [
    {
      "name": "value",
      "type": "Dayjs",
      "default": "—",
      "desc": "Selected time"
    },
    {
      "name": "size",
      "type": "'small' | 'middle' | 'large'",
      "default": "'middle'",
      "desc": "Field height: 24 / 32 / 40"
    },
    {
      "name": "status",
      "type": "'error' | 'warning'",
      "default": "—",
      "desc": "Validation state — tints the border"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "default": "false",
      "desc": "Non-interactive, greyed field"
    },
    {
      "name": "format",
      "type": "string",
      "default": "HH:mm:ss",
      "desc": "Display/parse format (HH:mm · HH:mm:ss · h:mm a)"
    },
    {
      "name": "use12Hours",
      "type": "boolean",
      "default": "false",
      "desc": "12-hour clock with AM/PM"
    },
    {
      "name": "allowClear",
      "type": "boolean",
      "default": "true",
      "desc": "Show the clear (×) affordance"
    },
    {
      "name": "minuteStep",
      "type": "number",
      "default": "1",
      "desc": "Granularity of the minute column"
    },
    {
      "name": "onChange",
      "type": "(time) => void",
      "default": "—",
      "desc": "Fires with the new time"
    }
  ],
  "tokens": [
    "colorPrimary",
    "borderRadius",
    "controlHeight",
    "colorBorder",
    "DatePicker.cellHoverBg",
    "DatePicker.borderRadius"
  ],
  "spec": [
    {
      "label": "Field",
      "value": "height 32 · radius 8 · 1px #E3E3E3 border"
    },
    {
      "label": "Sizes",
      "value": "small 24 · default 32 · large 40 (via size)"
    },
    {
      "label": "Status",
      "value": "error/warning tints the border (#FF5A7A error)"
    },
    {
      "label": "Selected cell",
      "value": "brand #6A1EBB"
    },
    {
      "label": "Hover cell",
      "value": "#F7F7F7 (gray-20)"
    },
    {
      "label": "Format",
      "value": "HH:mm · HH:mm:ss · h:mm a (use12Hours)"
    },
    {
      "label": "Range",
      "value": "TimePicker.RangePicker — start → end"
    },
    {
      "label": "Placeholder",
      "value": "#8A8A8A"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "TimePicker",
        "when": "a time of day on its own — a reminder, a daily schedule slot"
      },
      {
        "what": "DatePicker showTime",
        "when": "a date AND a time together — a precise timestamp"
      },
      {
        "what": "Select",
        "when": "a small fixed set of times (e.g. 15-min slots) — a list beats scrolling"
      }
    ],
    "note": "Match format to the precision you need — HH:mm hides seconds. Use minuteStep to snap to sensible increments rather than every minute. Times use Day.js.",
    "dsv3": "COVERED — antd v6 TimePicker (DatePicker internals) themed by the shared timePickerTheme, no re-implementation. Matrix: size (small 24 / default 32 / large 40) · status (error / warning) · disabled · format (HH:mm / HH:mm:ss / h:mm a via use12Hours) · allowClear · RangePicker (start → end). Field look inherits the DS V3 input treatment (radius 8, 1px #E3E3E3 border, brand #6A1EBB selected cell, error #FF5A7A). Verified via Figma search_design_system against the DS V3 set (fileKey MwjvUjVI0HnfwD9EwPXRAy): no dedicated TimePicker component exists in DS V3 — the DS themes antd rather than redrawing it, so antd v6's TimePicker API is the reference; field styling matches the measured DS V3 input matrix (inp|{sm,md,lg})."
  },
  "surfaces": [
    "editor",
    "dashboard",
    "settings"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step, no bundler.\n     TimePicker is a COMPOSITE (antd, no framework-free element), so its HTML form is a CDN-React\n     page — React + antd load from a CDN (esm.sh) and mount on open. It consumes the SAME shared\n     `timePickerTheme` the React/Vue wrappers use, so it renders the DS V3 look (32px field, radius\n     8, #E3E3E3 border, brand-selected cell). Times use Day.js.\n     No JSX here (JSX needs a compiler) — we use React.createElement via the `h` alias. -->\n<div id=\"root\"></div>\n<script type=\"module\">\n  import React from 'https://esm.sh/react@18';\n  import { createRoot } from 'https://esm.sh/react-dom@18/client';\n  import { ConfigProvider, TimePicker } from 'https://esm.sh/antd@6?deps=react@18,react-dom@18';\n  import dayjs from 'https://esm.sh/dayjs@1';\n  import { timePickerTheme } from 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/time-picker-theme.js';\n\n  const h = React.createElement;\n  const { RangePicker } = TimePicker;\n  const seed = dayjs('09:30', 'HH:mm');\n\n  createRoot(document.getElementById('root')).render(\n    h(ConfigProvider, { theme: timePickerTheme },\n      h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 12 } },\n        // Default · 24-hour\n        h(TimePicker, { defaultValue: seed, format: 'HH:mm', allowClear: true, style: { width: 200 } }),\n        // Sizes — small 24 · large 40\n        h(TimePicker, { size: 'small', format: 'HH:mm', style: { width: 200 } }),\n        h(TimePicker, { size: 'large', format: 'HH:mm', style: { width: 200 } }),\n        // Status — error / warning border\n        h(TimePicker, { status: 'error', format: 'HH:mm', style: { width: 200 } }),\n        h(TimePicker, { status: 'warning', format: 'HH:mm', style: { width: 200 } }),\n        // 12-hour · seconds · disabled\n        h(TimePicker, { use12Hours: true, format: 'h:mm a', minuteStep: 15, style: { width: 240 } }),\n        h(TimePicker, { format: 'HH:mm:ss', style: { width: 240 } }),\n        h(TimePicker, { disabled: true, format: 'HH:mm', style: { width: 200 } }),\n        // Range — start → end\n        h(RangePicker, { format: 'HH:mm', style: { width: 320 } })\n      )\n    )\n  );\n</script>\n",
    "react": "import { ConfigProvider, TimePicker } from 'antd';   // antd v6\nimport dayjs from 'dayjs';\nimport { timePickerTheme } from '@ahaslides-product/design/time-picker-theme';\n\nconst { RangePicker } = TimePicker;\n\n<ConfigProvider theme={timePickerTheme}>\n  {/* Default — 24-hour, minute granularity */}\n  <TimePicker\n    defaultValue={dayjs('09:30', 'HH:mm')}\n    format=\"HH:mm\"\n    minuteStep={15}\n    allowClear\n    onChange={setTime}\n    style={{ width: 200 }}\n  />\n\n  {/* Sizes — small 24 · default 32 · large 40 */}\n  <TimePicker size=\"small\" format=\"HH:mm\" style={{ width: 200 }} />\n  <TimePicker size=\"large\" format=\"HH:mm\" style={{ width: 200 }} />\n\n  {/* Status — tints the border */}\n  <TimePicker status=\"error\" format=\"HH:mm\" style={{ width: 200 }} />\n  <TimePicker status=\"warning\" format=\"HH:mm\" style={{ width: 200 }} />\n\n  {/* 12-hour + seconds + disabled */}\n  <TimePicker use12Hours format=\"h:mm a\" style={{ width: 240 }} />\n  <TimePicker format=\"HH:mm:ss\" style={{ width: 240 }} />\n  <TimePicker disabled format=\"HH:mm\" style={{ width: 200 }} />\n\n  {/* Range — start → end */}\n  <RangePicker format=\"HH:mm\" style={{ width: 320 }} />\n</ConfigProvider>\n// One shared timePickerTheme → the DS V3 look; match format to the precision you need. Times use Day.js.\n",
    "vue": "<script setup>\nimport { ref } from 'vue';\nimport { ConfigProvider, TimePicker } from 'ant-design-vue';   // ant-design-vue v4\nimport dayjs from 'dayjs';\nimport { timePickerTheme } from '@ahaslides-product/design/time-picker-theme';\n\nconst time = ref(dayjs('09:30', 'HH:mm'));\nconst range = ref([dayjs('09:30', 'HH:mm'), dayjs('10:30', 'HH:mm')]);\n</script>\n\n<template>\n  <a-config-provider :theme=\"timePickerTheme\">\n    <!-- Default — 24-hour, 15-min step -->\n    <a-time-picker v-model:value=\"time\" format=\"HH:mm\" :minute-step=\"15\" allow-clear style=\"width: 200px\" />\n\n    <!-- Sizes — small 24 · default 32 · large 40 -->\n    <a-time-picker size=\"small\" format=\"HH:mm\" style=\"width: 200px\" />\n    <a-time-picker size=\"large\" format=\"HH:mm\" style=\"width: 200px\" />\n\n    <!-- Status · 12-hour · seconds · disabled -->\n    <a-time-picker status=\"error\" format=\"HH:mm\" style=\"width: 200px\" />\n    <a-time-picker status=\"warning\" format=\"HH:mm\" style=\"width: 200px\" />\n    <a-time-picker use12-hours format=\"h:mm a\" style=\"width: 240px\" />\n    <a-time-picker format=\"HH:mm:ss\" style=\"width: 240px\" />\n    <a-time-picker disabled format=\"HH:mm\" style=\"width: 200px\" />\n\n    <!-- Range — start → end -->\n    <a-time-picker-range-picker v-model:value=\"range\" format=\"HH:mm\" style=\"width: 320px\" />\n  </a-config-provider>\n</template>\n<!-- The SAME timePickerTheme as React → one DS V3 look across both vendor libraries. -->\n",
    "theme": "// @ahaslides-product/design/time-picker-theme — declared ONCE, consumed by both tiers.\nimport { timePickerTheme } from '@ahaslides-product/design/time-picker-theme';\n\nexport const timePickerTheme = {\n  token: {\n    colorPrimary: '#6A1EBB',\n    borderRadius: 8,\n    controlHeight: 32,\n    colorBorder: '#E3E3E3',\n    colorTextPlaceholder: '#8A8A8A',\n    fontFamily: 'var(--aha-font-product, \"Plus Jakarta Sans\", sans-serif)',\n  },\n  components: {\n    // TimePicker is built on Ant's DatePicker internals — theme it through the DatePicker token.\n    DatePicker: {\n      borderRadius: 8,\n      controlHeight: 32,\n      cellHoverBg: '#F7F7F7',        // hovered time cell (gray-20)\n      cellActiveWithRangeBg: '#F9F5FF',\n    },\n  },\n};\n"
  }
}