{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "datepicker",
  "version": "2.0.0",
  "name": "DatePicker",
  "category": "form-input",
  "appStatus": "planned",
  "appMapping": "adapted",
  "appNote": "カレンダー自作はしない。OS 標準の日付ピッカー（@react-native-community/datetimepicker 等）への委譲でトークンのみ供給",
  "intent": "日付選択コンポーネント。カレンダーポップアップ + キーボードナビ。",
  "docPath": "components/datepicker.md",
  "anatomy": ["trigger", "hiddenInput", "calendarPopup", "monthHeader", "dayOfWeekHeader", "dayGrid", "todayButton?"],
  "variants": {
    "trigger": {
      "description": "日付表示トリガーボタン",
      "tokenRefs": {
        "bg": "color.semantic.light.input-bg",
        "border": "color.semantic.light.input-border",
        "radius": "radius.md"
      },
      "tailwind": "w-full flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-base"
    },
    "calendar": {
      "description": "カレンダーポップアップ本体",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "radius": "radius.lg",
        "elevation": "elevation.md",
        "z": "zIndex.dropdown"
      },
      "tailwind": "absolute mt-1 w-[320px] bg-white rounded-xl border border-slate-200 shadow-md z-20 p-4"
    },
    "day-cell": {
      "description": "個々の日付セル",
      "tokenRefs": {
        "radius": "radius.md"
      },
      "tailwind": "w-10 h-10 inline-flex items-center justify-center text-sm rounded-lg"
    }
  },
  "sizes": {},
  "states": [
    "default",
    "open",
    "selected",
    "today",
    "disabled",
    "error",
    "hover",
    "focus"
  ],
  "stateSpecs": {
    "open": { "description": "カレンダー展開。calendar variant が開いた姿そのもの＝差分なし。", "tailwind": "", "ariaChanges": "トリガーに aria-expanded=\"true\"。calendarPopup を role=\"dialog\" で表示しフォーカス移動。", "htmlNote": "structural 状態。calendar variant の tailwind（absolute mt-1 ... z-20）が open の表示。default は calendarPopup を hidden で隠す。" },
    "selected": { "description": "選択済み日セル。day-cell 基底への overlay 差分。", "tailwind": "bg-primary-500 text-white hover:bg-primary-600", "ariaChanges": "当該 day セルに aria-selected=\"true\"。" },
    "today": { "description": "今日のマーカー。day-cell 基底への overlay 差分（選択とは独立）。", "tailwind": "font-semibold ring-1 ring-inset ring-primary-300", "htmlNote": "text color は持たず ring + 太字のみ＝selected(bg-primary-500 text-white) と併用しても文字色が衝突しない。未選択時は基底の text 色を継承。" },
    "error": { "description": "不正入力。trigger 基底への overlay 差分。", "tailwind": "border-red-600", "ariaChanges": "トリガーに aria-invalid=\"true\" + aria-describedby でエラーメッセージ参照。" },
    "disabled": { "description": "操作不可。全 variant 共通。", "tailwind": "opacity-50 cursor-not-allowed pointer-events-none", "ariaChanges": "トリガーに disabled 属性 + aria-disabled=\"true\"。カレンダーを開けない。" }
  },
  "a11y": {
    "role": "dialog (popup)",
    "required": [
      "aria-label=\"カレンダーを開く\"",
      "aria-selected (day)",
      "keyboard navigation"
    ],
    "keyboard": ["Enter", "Space", "Escape", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "PageUp", "PageDown"],
    "focusRing": "focus:ring-2 focus:ring-primary-500/50"
  },
  "rules": [
    {
      "id": "DATEPICKER_NO_NATIVE_INPUT",
      "severity": "warn"
    },
    {
      "id": "DATEPICKER_NO_SHADOW_LG",
      "severity": "error"
    },
    {
      "id": "DATEPICKER_Z_INDEX_20",
      "severity": "error"
    },
    {
      "id": "DATEPICKER_NO_COLOR_ONLY_TODAY",
      "severity": "error"
    },
    {
      "id": "DATEPICKER_KEYBOARD_NAV_REQUIRED",
      "severity": "error"
    },
    {
      "id": "DATEPICKER_WEEKDAY_HEADER_REQUIRED",
      "severity": "error"
    }
  ],
  "htmlSample": "<button class=\"w-full flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-base focus:ring-2 focus:ring-primary-500/50\" aria-label=\"カレンダーを開く\"><span>日付を選択</span></button>"
}