{
  "generatedFrom": "datepicker.contract.json",
  "component": "DatePicker",
  "slug": "datepicker",
  "group": "Data Entry",
  "tier": "composite-antd",
  "summary": "Pick a date or a date range from a calendar — schedules, deadlines, filters — rendered through the shared DatePicker.",
  "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/datepicker-theme';",
    "element": null,
    "registers": null
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/datepicker/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/datepicker/datepicker.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/datepicker.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/datepicker.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 | [Dayjs, Dayjs]",
      "default": "—",
      "desc": "Selected date (or range for RangePicker)"
    },
    {
      "name": "picker",
      "type": "date | week | month | quarter | year",
      "default": "date",
      "desc": "Granularity"
    },
    {
      "name": "size",
      "type": "small | middle | large",
      "default": "middle",
      "desc": "Field height — 24 / 32 / 40"
    },
    {
      "name": "status",
      "type": "error | warning",
      "default": "—",
      "desc": "Validation state on the field"
    },
    {
      "name": "showTime",
      "type": "boolean | object",
      "default": "false",
      "desc": "Add a time picker to the panel"
    },
    {
      "name": "allowClear",
      "type": "boolean",
      "default": "true",
      "desc": "Show the clear affordance when a value is set"
    },
    {
      "name": "presets",
      "type": "{ label, value }[]",
      "default": "—",
      "desc": "Quick ranges (RangePicker) — reporting windows"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "default": "false",
      "desc": "Disable the field"
    },
    {
      "name": "format",
      "type": "string",
      "default": "YYYY-MM-DD",
      "desc": "Display/parse format"
    },
    {
      "name": "disabledDate",
      "type": "(d) => boolean",
      "default": "—",
      "desc": "Constrain selectable dates"
    },
    {
      "name": "onChange",
      "type": "(date) => void",
      "default": "—",
      "desc": "Fires with the new date(s)"
    }
  ],
  "tokens": [
    "colorPrimary",
    "borderRadius",
    "controlHeight",
    "colorBorder",
    "DatePicker.cellActiveWithRangeBg",
    "DatePicker.cellHoverBg"
  ],
  "spec": [
    {
      "label": "Field",
      "value": "height 32 · radius 8 · 1px #E3E3E3 border"
    },
    {
      "label": "Selected cell",
      "value": "brand #6A1EBB"
    },
    {
      "label": "In-range",
      "value": "brand-tint #F9F5FF"
    },
    {
      "label": "Hover cell",
      "value": "#F7F7F7 (gray-20)"
    },
    {
      "label": "Placeholder",
      "value": "#8A8A8A"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "DatePicker",
        "when": "a single date — a deadline, a start date"
      },
      {
        "what": "RangePicker",
        "when": "a start and end together — a reporting window, a schedule"
      },
      {
        "what": "Input",
        "when": "a free-form date the user already knows precisely — but prefer the picker for validity"
      }
    ],
    "note": "Pre-fill a sensible default (today, or the current period) rather than empty. Constrain impossible dates with disabledDate instead of validating after the fact. Dates use Day.js.",
    "dsv3": "COVERED — antd v6 DatePicker themed by the shared datepickerTheme (ant-design-vue v4 for Vue), matrix: picker (date/week/month/quarter/year) · RangePicker (range) · size (small/middle/large) · status (error/warning) · disabled · showTime · allowClear · presets. The preview playground exposes Picker · Size · Status · Range · Disabled as live React controls (plus a showTime example); verified via Figma search_design_system against the DS V3 Date-Picker component set (componentKey ef5053a5…, fileKey MwjvUjVI0HnfwD9EwPXRAy)."
  },
  "surfaces": [
    "editor",
    "dashboard",
    "settings"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step, no bundler.\n     DatePicker is a COMPOSITE (antd, no framework-free element), so its HTML form is a\n     CDN-React page — React + antd load from a CDN (esm.sh) and mount on open. It\n     consumes the SAME shared `datepickerTheme` the React/Vue wrappers use, so it renders\n     the DS V3 look (32px field, radius 8, #E3E3E3 border, brand-selected cell).\n     Shows the matrix: picker granularity, size, status, showTime, range + presets, disabled.\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 dayjs from 'https://esm.sh/dayjs@1';\n  import { ConfigProvider, DatePicker } from 'https://esm.sh/antd@6?deps=react@18,react-dom@18';\n  import { datepickerTheme } from 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/datepicker-theme.js';\n\n  const h = React.createElement;\n  const { RangePicker } = DatePicker;\n  const presets = [\n    { label: 'Last 7 days', value: [dayjs().add(-7, 'd'), dayjs()] },\n    { label: 'Last 30 days', value: [dayjs().add(-30, 'd'), dayjs()] },\n  ];\n\n  createRoot(document.getElementById('root')).render(\n    h(ConfigProvider, { theme: datepickerTheme },\n      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },\n        // Granularity + size (small | middle | large)\n        h(DatePicker, { defaultValue: dayjs(), placeholder: 'Pick a date', allowClear: true, style: { width: 240 } }),\n        h(DatePicker, { picker: 'month', size: 'large', placeholder: 'Pick a month', style: { width: 240 } }),\n        // Date + time\n        h(DatePicker, { showTime: true, placeholder: 'Pick date & time', style: { width: 260 } }),\n        // Validation state\n        h(DatePicker, { status: 'error', placeholder: 'Required', style: { width: 240 } }),\n        // Range with quick presets\n        h(RangePicker, { presets: presets, style: { width: 300 } }),\n        // Disabled\n        h(DatePicker, { disabled: true, defaultValue: dayjs(), style: { width: 240 } })\n      )\n    )\n  );\n</script>\n",
    "react": "import { ConfigProvider, DatePicker } from 'antd';   // antd v6\nimport dayjs from 'dayjs';\nimport { datepickerTheme } from '@ahaslides-product/design/datepicker-theme';\n\nconst { RangePicker } = DatePicker;\n\nconst presets = [\n  { label: 'Last 7 days', value: [dayjs().add(-7, 'd'), dayjs()] },\n  { label: 'Last 30 days', value: [dayjs().add(-30, 'd'), dayjs()] },\n];\n\n<ConfigProvider theme={datepickerTheme}>\n  {/* Granularity: picker=\"date | week | month | quarter | year\" */}\n  <DatePicker\n    picker=\"date\"\n    size=\"middle\"            {/* small | middle | large → 24 / 32 / 40 */}\n    defaultValue={dayjs()}\n    placeholder=\"Pick a date\"\n    allowClear\n    disabledDate={(d) => d && d < dayjs().startOf('day')}\n    onChange={setDate}\n    style={{ width: 240 }}\n  />\n\n  {/* Date + time */}\n  <DatePicker showTime placeholder=\"Pick date & time\" onChange={setDate} />\n\n  {/* Validation state on the field */}\n  <DatePicker status=\"error\" placeholder=\"Required\" onChange={setDate} />\n\n  {/* A start + end together — with quick presets for reporting windows */}\n  <RangePicker presets={presets} onChange={setRange} style={{ width: 300 }} />\n\n  {/* Disabled */}\n  <DatePicker disabled defaultValue={dayjs()} />\n</ConfigProvider>\n// One shared datepickerTheme → the DS V3 look; use disabledDate to constrain, not post-validation.\n",
    "vue": "<script setup>\nimport { ref } from 'vue';\nimport { ConfigProvider, DatePicker, RangePicker } from 'ant-design-vue';   // ant-design-vue v4\nimport dayjs from 'dayjs';\nimport { datepickerTheme } from '@ahaslides-product/design/datepicker-theme';\n\nconst date = ref(dayjs());\nconst range = ref();\nconst presets = [\n  { label: 'Last 7 days', value: [dayjs().add(-7, 'd'), dayjs()] },\n  { label: 'Last 30 days', value: [dayjs().add(-30, 'd'), dayjs()] },\n];\nconst disabledDate = (d) => d && d < dayjs().startOf('day');\n</script>\n\n<template>\n  <a-config-provider :theme=\"datepickerTheme\">\n    <!-- Granularity: picker=\"date | week | month | quarter | year\"; size small|middle|large -->\n    <a-date-picker v-model:value=\"date\" picker=\"date\" size=\"middle\"\n      placeholder=\"Pick a date\" allow-clear :disabled-date=\"disabledDate\" style=\"width: 240px\" />\n\n    <!-- Date + time -->\n    <a-date-picker show-time placeholder=\"Pick date & time\" />\n\n    <!-- Validation state -->\n    <a-date-picker status=\"error\" placeholder=\"Required\" />\n\n    <!-- Range with quick presets -->\n    <a-range-picker v-model:value=\"range\" :presets=\"presets\" style=\"width: 300px\" />\n\n    <!-- Disabled -->\n    <a-date-picker :value=\"date\" disabled />\n  </a-config-provider>\n</template>\n<!-- The SAME datepickerTheme as React → one DS V3 look across both vendor libraries. -->\n",
    "theme": "// @ahaslides-product/design/datepicker-theme — declared ONCE, consumed by both tiers.\nimport { datepickerTheme } from '@ahaslides-product/design/datepicker-theme';\n\nexport const datepickerTheme = {\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    DatePicker: {\n      borderRadius: 8,\n      controlHeight: 32,\n      cellActiveWithRangeBg: '#F9F5FF',   // brand-tint in-range cells\n      cellHoverBg: '#F7F7F7',\n    },\n  },\n};\n"
  }
}