@krizaka/ui 3.1.0 → 3.2.0

package/registry/date-picker.json

@@ -2,19 +2,23 @@
   "name": "date-picker",
   "type": "primitive",
   "title": "Date picker",
-  "summary": "A date or a period chosen on a calendar — ISO values (`2026-10-11`) the form, the address and the API share, read in the locale's own words through @krizaka/intl.",
-  "description": "A date or a period chosen on a calendar — ISO values (`2026-10-11`) the form, the address and the API share, read in the locale's own words through @krizaka/intl.",
+  "summary": "Dates and times chosen the way the task asks — a calendar, a period with presets, a strip of days, wheels, time slots, a month, a date of birth — as ISO values (`2026-10-11`, `2026-10`, `18:30`) the form, the address and the API share, in the locale's own words.",
+  "description": "Dates and times chosen the way the task asks — a calendar, a period with presets, a strip of days, wheels, time slots, a month, a date of birth — as ISO values (`2026-10-11`, `2026-10`, `18:30`) the form, the address and the API share, in the locale's own words.",
   "status": "beta",
   "category": "forms",
   "platforms": "both",
   "whenToUse": [
-    "To schedule something on a day: a publication, an auction's end, a reminder.",
-    "With `DateRangePicker` for a period: an earnings report, an audit log, a campaign — with presets.",
-    "With `Calendar` alone when the month itself is the interface (availability, a booking)."
+    "`DatePicker`: a day near today in a form — a publication, an auction's end, a reminder.",
+    "`DateRangePicker`: a period — an earnings report, an audit log — with presets and two months side by side.",
+    "`Calendar` inline (`variant=\"card\"`): when the month itself is the interface (availability, a booking).",
+    "`DayStrip`: the next days in a row (a delivery day, a session, an agenda) — one thumb away on a phone.",
+    "`TimePicker`: wheels to set a time (a reminder); `variant=\"slots\"` to book one among the free times.",
+    "`MonthPicker`: a month of a year (a billing month, a card's expiry, a report).",
+    "`DateField` (typed) or `DateWheel` (wheels): a memorable date far away — a date of birth with an age gate."
   ],
   "whenNotToUse": [
     {
-      "when": "For a date of birth or a date far away: three fields (day, month, year) are faster than paging through years.",
+      "when": "For a date of birth or any date years away: a calendar makes it slow — use `DateField` or `DateWheel`.",
       "use": "field"
     },
     {
@@ -23,28 +27,33 @@
     }
   ],
   "bestPractices": [
-    "Always pass the person's `locale`: month and day names, the first day of the week and the date's format follow it.",
-    "Keep the value as an ISO date in state and in the address; format it only for display.",
-    "Bound the choice with `min` / `max` and `isDateDisabled` rather than refusing after the fact.",
-    "Offer presets on a period picker: most people want “Last 30 days”, not two clicks."
+    "Always pass the person's `locale`: names, the first day of the week, the order of day · month · year and 12/24 hours follow it.",
+    "Keep values as ISO strings in state and in the address (`YYYY-MM-DD`, `YYYY-MM`, `HH:mm`); format them only for display.",
+    "Bound the choice with `min` / `max`, `isDateDisabled` or `isTimeDisabled` rather than refusing after the fact — an age gate is `max={latestBirthDate(18)}`.",
+    "Offer presets on a period picker: most people want “Last 30 days”, not two clicks.",
+    "Mark the days that have something (`isDateMarked`) on a strip: the dot is read in the day's name too."
   ],
   "accessibility": {
     "keyboard": [
       {
         "keys": "Arrow keys",
-        "action": "Move by a day or a week."
+        "action": "Calendar: move by a day or a week. Month picker: by a month or a row. Day strip and slots: move and pick."
       },
       {
         "keys": "Home / End",
-        "action": "First or last day of the week."
+        "action": "First or last day of the week (calendar), first or last item (strip, slots, wheel)."
       },
       {
         "keys": "Page Up / Page Down",
-        "action": "Previous or next month (with Shift: year)."
+        "action": "Calendar: previous or next month (with Shift: year). Month picker: year. Wheel: by five values."
+      },
+      {
+        "keys": "Up / Down",
+        "action": "Wheel: the previous or next value."
       },
       {
         "keys": "Enter / Space",
-        "action": "Pick the focused day."
+        "action": "Pick the focused day or month."
       },
       {
         "keys": "Esc",
@@ -52,20 +61,23 @@
       }
     ],
     "notes": [
-      "The APG date picker: the month is a `grid` labelled by its title, one day in the tab order, each day named by its full date.",
-      "Today carries `aria-current=\"date\"`; chosen days `aria-selected`; unavailable days are disabled buttons.",
-      "The month's title is a polite live region: a change of month is heard.",
-      "The field is a button named by its `<label>`, with `aria-haspopup=\"dialog\"`; Radix returns the focus to it on close."
+      "The APG date picker: the month is a `grid` labelled by its month, one day in the tab order, each day named by its full date; today carries `aria-current=\"date\"`, chosen days `aria-selected`, unavailable days are disabled.",
+      "The month's title is a button that opens the months of the year (`aria-expanded`); a change of month is announced by a polite live region.",
+      "A wheel is a `spinbutton` (`aria-valuetext` reads the value as words); on React Native an adjustable control — swipe up or down with VoiceOver or TalkBack.",
+      "The day strip and the time slots are radio groups: one tab stop, the arrows move and pick, taken or closed items are disabled and skipped.",
+      "`DateField` is a fieldset named by its legend, each box named by its part; the error is read with the field (`aria-describedby`).",
+      "Nothing moves under reduced motion: the month's slide stops; the wheel's curve is tied to the scroll, not to time."
     ]
   },
   "related": [
     "field",
     "popover",
-    "filter-bar"
+    "filter-bar",
+    "form"
   ],
   "web": {
     "entry": "@krizaka/ui/date-picker",
-    "import": "import { DatePicker, DateRangePicker, Calendar } from \"@krizaka/ui/date-picker\";",
+    "import": "import { DatePicker, DateRangePicker, Calendar, MonthPicker, DayStrip, WheelPicker, Wheel, TimePicker, DateField, DateWheel, latestBirthDate, timeSlots } from \"@krizaka/ui/date-picker\";",
     "props": [
       {
         "component": "Calendar",
@@ -131,7 +143,14 @@
             "name": "month",
             "type": "string",
             "default": null,
-            "description": "The month shown, any day of it (controlled).",
+            "description": "The month shown (the first one, with `numberOfMonths={2}`), any day of it (controlled).",
+            "required": false
+          },
+          {
+            "name": "numberOfMonths",
+            "type": "1 | 2",
+            "default": "1",
+            "description": "One month, or two side by side (a period: from a phone's width up, they stack on a phone).",
             "required": false
           },
           {
@@ -152,7 +171,7 @@
             "name": "range",
             "type": "DateRange | null",
             "default": null,
-            "description": "The chosen range (range mode): its ends are marked, the days between tinted.",
+            "description": "The chosen range (range mode): its ends are lit, the days between are one band.",
             "required": false
           },
           {
@@ -169,6 +188,13 @@
             "description": "The chosen date (one-date mode).",
             "required": false
           },
+          {
+            "name": "variant",
+            "type": "\"plain\" | \"card\"",
+            "default": null,
+            "description": "`plain` (inside a popover, a card of the app) or `card` (the calendar is the interface: its own raised surface).",
+            "required": false
+          },
           {
             "name": "weekStartsOn",
             "type": "number",
@@ -178,6 +204,207 @@
           }
         ]
       },
+      {
+        "component": "DateField",
+        "description": "Day · month · year typed in the locale's order: numeric keyboards, the next box focused when one is full.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (the group's name).",
+            "required": true
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "default": null,
+            "description": "The BCP 47 locale: the order of the parts, the names of the months.",
+            "required": true
+          },
+          {
+            "name": "autoComplete",
+            "type": "\"off\" | \"bday\"",
+            "default": null,
+            "description": "`bday` for a date of birth: the browser offers to fill it.",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the root.",
+            "required": false
+          },
+          {
+            "name": "defaultValue",
+            "type": "string",
+            "default": "",
+            "description": "The date at first, uncontrolled.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "string",
+            "default": null,
+            "description": "An error under the field: marks it invalid and is read with it. Replaces the hint.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the field (\"For example, 27 3 1990\").",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<DateFieldLabels>",
+            "default": null,
+            "description": "The names of the parts, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The name of a hidden input holding the value, for a plain `<form>` post.",
+            "required": false
+          },
+          {
+            "name": "onBlur",
+            "type": "(() => void)",
+            "default": null,
+            "description": "Called when the focus leaves the field.",
+            "required": false
+          },
+          {
+            "name": "onValueChange",
+            "type": "((value: string) => void)",
+            "default": null,
+            "description": "Called on every key with the date typed so far (`\"\"` when the boxes are empty).",
+            "required": false
+          },
+          {
+            "name": "value",
+            "type": "string",
+            "default": null,
+            "description": "The date, `YYYY-MM-DD` (controlled); `\"\"` for none. What is typed comes back as it is, real date or not: the schema decides.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "DateWheel",
+        "description": "Day, month and year as three wheels in the locale's order, bounded by `min` and `max`: always a real date.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (the group's name).",
+            "required": true
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "default": null,
+            "description": "The BCP 47 locale: the order of the parts, the names of the months.",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the root.",
+            "required": false
+          },
+          {
+            "name": "defaultValue",
+            "type": "string | null",
+            "default": "null",
+            "description": "The date at first, uncontrolled.",
+            "required": false
+          },
+          {
+            "name": "defaultView",
+            "type": "string",
+            "default": null,
+            "description": "Where the wheels rest while there is no value. Default: `max` (a birth date: the youngest allowed).",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "string",
+            "default": null,
+            "description": "An error under the field: marks it invalid and is read with it. Replaces the hint.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the field (\"For example, 27 3 1990\").",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<DateFieldLabels>",
+            "default": null,
+            "description": "The names of the parts, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "max",
+            "type": "string",
+            "default": null,
+            "description": "The latest date (ISO): `latestBirthDate(18)` for an age gate. Default: today.",
+            "required": false
+          },
+          {
+            "name": "min",
+            "type": "string",
+            "default": null,
+            "description": "The earliest date (ISO): the years start there, the days before it are refused. Default: 120 years ago.",
+            "required": false
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The name of a hidden input holding the value, for a plain `<form>` post.",
+            "required": false
+          },
+          {
+            "name": "onValueChange",
+            "type": "((value: string) => void)",
+            "default": null,
+            "description": "Called with the date under the band, always a real date within `min` / `max`.",
+            "required": false
+          },
+          {
+            "name": "value",
+            "type": "string | null",
+            "default": null,
+            "description": "The date, `YYYY-MM-DD` (controlled); `\"\"` or `null` for none (the wheels then rest on `defaultView`).",
+            "required": false
+          }
+        ]
+      },
       {
         "component": "DatePicker",
         "description": "A date field: a button showing the date in the locale's format, a calendar in a popover, an ISO value.",
@@ -433,6 +660,13 @@
             "description": "The name of a hidden input holding the ISO value, for a plain `<form>` post.",
             "required": false
           },
+          {
+            "name": "numberOfMonths",
+            "type": "1 | 2",
+            "default": "2",
+            "description": "Two months side by side (default, from a phone's width up) or one.",
+            "required": false
+          },
           {
             "name": "onValueChange",
             "type": "((value: { start: string; end: string; } | null) => void)",
@@ -476,206 +710,769 @@
             "required": false
           }
         ]
-      }
-    ],
-    "examples": [
-      {
-        "name": "schedule",
-        "title": "Schedule",
-        "description": "A publication date, from today on, written the way the locale writes it.",
-        "path": "examples/date-picker/schedule.tsx",
-        "module": "@krizaka/ui/registry/examples/date-picker/schedule",
-        "code": "\"use client\";\n\nimport { DatePicker } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\n// `today` is fixed here for the documentation; leave it out in an app.\nexport default function DatePickerSchedule() {\n  const [date, setDate] = React.useState<string | null>(\"2026-10-14\");\n  return (\n    <DatePicker\n      label=\"Publish on\"\n      locale=\"en-US\"\n      value={date}\n      onValueChange={setDate}\n      min=\"2026-10-11\"\n      today=\"2026-10-11\"\n      clearable\n      placeholder=\"Publish now\"\n      hint=\"Your followers are told when it goes live.\"\n    />\n  );\n}\n"
-      },
-      {
-        "name": "open",
-        "title": "Calendar open",
-        "description": "The popover open on the month: today marked, the chosen day filled.",
-        "path": "examples/date-picker/open.tsx",
-        "module": "@krizaka/ui/registry/examples/date-picker/open",
-        "code": "\"use client\";\n\nimport { DatePicker } from \"@krizaka/ui/date-picker\";\n\n// The calendar open: today marked, the chosen day filled, the past unavailable.\nexport default function DatePickerOpen({ defaultOpen }: { defaultOpen?: boolean }) {\n  return <DatePicker label=\"Auction ends\" locale=\"en-US\" defaultValue=\"2026-10-18\" min=\"2026-10-11\" today=\"2026-10-11\" defaultOpen={defaultOpen} />;\n}\n"
-      },
-      {
-        "name": "range",
-        "title": "Period with presets",
-        "description": "`DateRangePicker` for an earnings report: presets beside the calendar.",
-        "path": "examples/date-picker/range.tsx",
-        "module": "@krizaka/ui/registry/examples/date-picker/range",
-        "code": "\"use client\";\n\nimport { DateRangePicker } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\n// An earnings report: presets for the usual periods, two clicks for any other.\nexport default function DatePickerRange({ defaultOpen }: { defaultOpen?: boolean }) {\n  const [period, setPeriod] = React.useState<{ start: string; end: string } | null>({ start: \"2026-10-01\", end: \"2026-10-11\" });\n  return (\n    <DateRangePicker\n      label=\"Period\"\n      locale=\"en-US\"\n      value={period}\n      onValueChange={setPeriod}\n      max=\"2026-10-11\"\n      today=\"2026-10-11\"\n      defaultOpen={defaultOpen}\n      presets={[\n        { label: \"Last 7 days\", start: \"2026-10-05\", end: \"2026-10-11\" },\n        { label: \"This month\", start: \"2026-10-01\", end: \"2026-10-11\" },\n        { label: \"Last month\", start: \"2026-09-01\", end: \"2026-09-30\" },\n      ]}\n    />\n  );\n}\n"
-      },
-      {
-        "name": "french",
-        "title": "In French",
-        "description": "`locale=\"fr-CA\"`: the names, the order and the first day of the week follow.",
-        "path": "examples/date-picker/french.tsx",
-        "module": "@krizaka/ui/registry/examples/date-picker/french",
-        "code": "import { DatePicker } from \"@krizaka/ui/date-picker\";\n\n// fr-CA: “11 oct. 2026”, the months and days in French, the week as Canada counts it.\nexport default function DatePickerFrench() {\n  return (\n    <DatePicker\n      label=\"Date du rendez-vous\"\n      locale=\"fr-CA\"\n      defaultValue=\"2026-10-11\"\n      today=\"2026-10-11\"\n      labels={{ previousMonth: \"Mois précédent\", nextMonth: \"Mois suivant\", clear: \"Effacer la date\" }}\n    />\n  );\n}\n"
       },
       {
-        "name": "calendar",
-        "title": "Calendar alone",
-        "description": "`Calendar` inline: the month is the interface, weekends unavailable.",
-        "path": "examples/date-picker/calendar.tsx",
-        "module": "@krizaka/ui/registry/examples/date-picker/calendar",
-        "code": "\"use client\";\n\nimport { Calendar } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\nconst weekend = (iso: string) => [0, 6].includes(new Date(`${iso}T12:00:00`).getDay());\n\n// The month is the interface: pick a day for a call, weekends unavailable.\nexport default function DatePickerCalendar() {\n  const [day, setDay] = React.useState(\"2026-10-15\");\n  return (\n    <div className=\"inline-block rounded-xl border border-border-default bg-surface-1 p-3\">\n      <Calendar locale=\"en-GB\" value={day} onSelect={setDay} isDateDisabled={weekend} min=\"2026-10-12\" today=\"2026-10-11\" />\n    </div>\n  );\n}\n"
-      }
-    ]
-  },
-  "native": {
-    "entry": "@krizaka/ui/native",
-    "import": "import { DateField, datePartsOrder, composeDate } from \"@krizaka/ui/native\";",
-    "differences": [
-      "`DateField` is a date typed as day, month and year (a memorable date: a birth date, an expiry), not a calendar: numeric keypads, the boxes in the locale's order, the next one focused when a box is full.",
-      "The value is a `YYYY-MM-DD` string of what was typed (`\"\"` when empty), real date or not: the form's schema decides (and the server again). No native module."
-    ],
-    "props": [
-      {
-        "component": "DateField",
-        "description": "A date typed as day, month and year — a memorable date (a birth date, an expiry) that a calendar would make slow to\nreach: numeric keypads, the boxes in the locale's order, the next box focused once one is full. No native module.",
+        "component": "DayStrip",
+        "description": "The days ahead in a row that scrolls sideways: one picked, today and the marked days shown.",
         "props": [
           {
             "name": "label",
             "type": "string",
             "default": null,
-            "description": "The visible label of the date, passed translated (the group's accessible name).",
+            "description": "The group's accessible name (\"Delivery day\"), passed translated.",
             "required": true
           },
           {
-            "name": "autoComplete",
-            "type": "\"off\" | \"bday\"",
+            "name": "locale",
+            "type": "string",
             "default": null,
-            "description": "`bday` for a date of birth: the system offers to fill it.",
-            "required": false
+            "description": "The BCP 47 locale of the names and the dates: always explicit.",
+            "required": true
           },
           {
-            "name": "defaultValue",
+            "name": "className",
             "type": "string",
             "default": null,
-            "description": "The date at first, uncontrolled.",
+            "description": "Classes merged on the root.",
             "required": false
           },
           {
-            "name": "disabled",
-            "type": "boolean",
-            "default": null,
-            "description": "Not available.",
+            "name": "days",
+            "type": "number",
+            "default": "14",
+            "description": "How many days. Default 14.",
             "required": false
           },
           {
-            "name": "error",
-            "type": "string",
-            "default": null,
-            "description": "An error under the boxes: a danger border and caption, read with them and announced. Replaces the hint.",
-            "required": false
+            "name": "defaultValue",
+            "type": "string | null",
+            "default": "null",
+            "description": "The chosen day at first, uncontrolled.",
+            "required": false
           },
           {
-            "name": "hint",
+            "name": "isDateDisabled",
+            "type": "((date: string) => boolean)",
+            "default": null,
+            "description": "Refuses some days (closed, full): drawn dashed, skipped by the arrows.",
+            "required": false
+          },
+          {
+            "name": "isDateMarked",
+            "type": "((date: string) => boolean)",
+            "default": null,
+            "description": "Marks the days that have something (a session, an event): a dot, and `labels.marked` in their name.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<DayStripLabels>",
+            "default": null,
+            "description": "The words, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "onValueChange",
+            "type": "((value: string) => void)",
+            "default": null,
+            "description": "Called with the day picked.",
+            "required": false
+          },
+          {
+            "name": "showHeader",
+            "type": "boolean",
+            "default": "true",
+            "description": "Shows the month of the chosen day (or of the first) and the page buttons above the strip.",
+            "required": false
+          },
+          {
+            "name": "start",
             "type": "string",
             "default": null,
-            "description": "A help text under the boxes (\"For example, 27 3 1990\").",
+            "description": "The first day of the strip. Default: today.",
             "required": false
           },
           {
-            "name": "inputRef",
-            "type": "Ref<TextInput>",
+            "name": "today",
+            "type": "string",
             "default": null,
-            "description": "The first box (in the locale's order), to focus the field from the one before it.",
+            "description": "Today (marked by the node): inject it for a stable render or a test. Default: the device's date.",
+            "required": false
+          },
+          {
+            "name": "value",
+            "type": "string | null",
+            "default": null,
+            "description": "The chosen day, ISO (controlled); `null` for none.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "MonthPicker",
+        "description": "A month of a year: twelve months in a grid, the year above them.",
+        "props": [
+          {
+            "name": "locale",
+            "type": "string",
+            "default": null,
+            "description": "The BCP 47 locale of the month names: always explicit.",
+            "required": true
+          },
+          {
+            "name": "autoFocus",
+            "type": "boolean",
+            "default": null,
+            "description": "Moves the focus to the active month when it mounts.",
+            "required": false
+          },
+          {
+            "name": "bare",
+            "type": "boolean",
+            "default": null,
+            "description": "Without its own year header (inside the calendar, which has one).",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the root.",
+            "required": false
+          },
+          {
+            "name": "current",
+            "type": "string",
+            "default": null,
+            "description": "This month (marked): inject it for a stable render or a test. Default: the device's.",
+            "required": false
+          },
+          {
+            "name": "defaultValue",
+            "type": "string | null",
+            "default": "null",
+            "description": "The chosen month at first, uncontrolled.",
             "required": false
           },
           {
             "name": "labels",
-            "type": "Partial<DateFieldLabels>",
+            "type": "Partial<MonthPickerLabels>",
             "default": null,
-            "description": "The names of the boxes, passed translated; English by default.",
+            "description": "The words, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "max",
+            "type": "string",
+            "default": null,
+            "description": "The latest month that can be picked, `YYYY-MM`.",
+            "required": false
+          },
+          {
+            "name": "min",
+            "type": "string",
+            "default": null,
+            "description": "The earliest month that can be picked, `YYYY-MM`.",
+            "required": false
+          },
+          {
+            "name": "onValueChange",
+            "type": "((value: string | null) => void)",
+            "default": null,
+            "description": "Called with the month picked.",
+            "required": false
+          },
+          {
+            "name": "onYearChange",
+            "type": "((year: number) => void)",
+            "default": null,
+            "description": "Called when the year shown changes.",
+            "required": false
+          },
+          {
+            "name": "value",
+            "type": "string | null",
+            "default": null,
+            "description": "The chosen month, `YYYY-MM` (controlled); `null` for none.",
+            "required": false
+          },
+          {
+            "name": "variant",
+            "type": "\"plain\" | \"card\"",
+            "default": null,
+            "description": "`plain` or `card` (its own raised surface).",
+            "required": false
+          },
+          {
+            "name": "year",
+            "type": "number",
+            "default": null,
+            "description": "The year shown (controlled).",
             "required": false
+          }
+        ]
+      },
+      {
+        "component": "TimePicker",
+        "description": "A time of day: wheels to set one, or slots to book one.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The accessible name of the picker (\"Pick-up time\"), passed translated.",
+            "required": true
           },
           {
             "name": "locale",
             "type": "string",
-            "default": "en-US",
-            "description": "The locale that orders the boxes (day · month · year, or month · day · year). Default `en-US`.",
+            "default": null,
+            "description": "The BCP 47 locale: how times are written, and whether the day has a period (AM/PM).",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the root.",
             "required": false
           },
           {
-            "name": "onBlur",
-            "type": "(() => void)",
+            "name": "defaultValue",
+            "type": "string | null",
             "default": null,
-            "description": "Called when focus leaves the last box.",
+            "description": "The time at first, uncontrolled.",
             "required": false
           },
           {
-            "name": "onSubmitEditing",
-            "type": "(() => void)",
+            "name": "disabled",
+            "type": "boolean",
             "default": null,
-            "description": "Called by the last box's return key (`returnKeyType`): move to the next field, or send the form.",
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "groupLabels",
+            "type": "{ morning: string; afternoon: string; evening: string; }",
+            "default": null,
+            "description": "Splits the slots under headings by part of the day: `{ morning: \"Morning\", afternoon: \"Afternoon\", evening: \"Evening\" }`.",
+            "required": false
+          },
+          {
+            "name": "hour12",
+            "type": "boolean",
+            "default": null,
+            "description": "Forces 12 or 24 hours. Default: the locale's.",
+            "required": false
+          },
+          {
+            "name": "isTimeDisabled",
+            "type": "((time: string) => boolean)",
+            "default": null,
+            "description": "Refuses some slots (taken, too soon): drawn struck through, skipped by the arrows.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<TimePickerLabels>",
+            "default": null,
+            "description": "The words of the wheels, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "minuteStep",
+            "type": "number",
+            "default": null,
+            "description": "The minutes' step: 1, 5 (default), 10, 15, 30.",
             "required": false
           },
           {
             "name": "onValueChange",
             "type": "((value: string) => void)",
             "default": null,
-            "description": "Called on every key with the date typed so far (`\"\"` when the boxes are empty).",
+            "description": "Called with the time chosen.",
             "required": false
           },
           {
-            "name": "returnKeyType",
-            "type": "\"next\" | \"done\" | \"go\" | \"send\"",
-            "default": "done",
-            "description": "The last box's return key. Default `done`.",
+            "name": "slots",
+            "type": "readonly string[]",
+            "default": null,
+            "description": "The times offered, `HH:mm` (`timeSlots(\"09:00\", \"17:00\", 30)`).",
             "required": false
           },
           {
-            "name": "style",
-            "type": "StyleProp<ViewStyle>",
+            "name": "value",
+            "type": "string | null",
             "default": null,
-            "description": "Styles merged last, on the field.",
+            "description": "The time, `HH:mm` on 24 hours (controlled); `null` for none.",
             "required": false
           },
           {
-            "name": "value",
+            "name": "variant",
+            "type": "\"slots\" | \"wheel\"",
+            "default": null,
+            "description": "`wheel`: hours and minutes (and the period) as wheels — a time you set (a reminder, an alarm).\n`slots`: the free times as buttons — a booking, a delivery window, an appointment.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Wheel",
+        "description": "One column of a `WheelPicker`: a spinbutton over a scroll-snapped list of values.",
+        "props": [
+          {
+            "name": "label",
             "type": "string",
             "default": null,
-            "description": "The date, `YYYY-MM-DD` (controlled); `\"\"` for none. What is typed comes back in the same order, real date or not: the schema decides.",
+            "description": "The column's accessible name (\"Hour\", \"Month\"), passed translated.",
+            "required": true
+          },
+          {
+            "name": "options",
+            "type": "readonly WheelOption[]",
+            "default": null,
+            "description": "The values, in order.",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the column (a width: `w-20`).",
+            "required": false
+          },
+          {
+            "name": "defaultValue",
+            "type": "string",
+            "default": null,
+            "description": "The chosen value at first, uncontrolled. Default: the first one.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "onValueChange",
+            "type": "((value: string) => void)",
+            "default": null,
+            "description": "Called with the value that comes to rest under the band.",
+            "required": false
+          },
+          {
+            "name": "value",
+            "type": "string | null",
+            "default": null,
+            "description": "The chosen value (controlled).",
             "required": false
           }
         ]
-      }
-    ],
-    "examples": [
+      },
       {
-        "name": "birth-date",
-        "title": "Date of birth",
-        "description": "Day, month and year with `autoComplete=\"bday\"`, and the error of an under-18 date.",
-        "path": "examples/date-picker/native/birth-date.tsx",
-        "module": "@krizaka/ui/registry/examples/date-picker/native/birth-date",
-        "code": "import { DateField } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\nconst latestAdult = () => {\n  const today = new Date();\n  return new Date(Date.UTC(today.getFullYear() - 18, today.getMonth(), today.getDate())).toISOString().slice(0, 10);\n};\n\n// A date of birth typed as day, month and year, in the locale's order; an under-18 date is refused at once.\nexport default function NativeDateFieldBirthDate() {\n  const [birth, setBirth] = React.useState(\"2015-03-27\");\n  const minor = /^\\d{4}-\\d{2}-\\d{2}$/.test(birth) && birth > latestAdult();\n  return (\n    <View style={{ width: 296 }}>\n      <DateField\n        label=\"Date of birth\"\n        locale=\"en-GB\"\n        autoComplete=\"bday\"\n        value={birth}\n        onValueChange={setBirth}\n        hint=\"Private, never shown. For example, 27 3 1990.\"\n        error={minor ? \"You must be 18 or older to create an account.\" : undefined}\n      />\n    </View>\n  );\n}\n",
-        "screenshots": {
-          "dark": "examples/date-picker/native/birth-date.dark.png",
-          "light": "examples/date-picker/native/birth-date.light.png"
-        }
-      }
-    ]
-  },
-  "files": [
-    {
-      "path": "date-picker/calendar.tsx",
-      "content": "// Client. A month as an ARIA grid (the APG date picker): one day in the tab order, the arrows walk the days, Home /\n// End the week, Page Up / Page Down the months (Shift: the years), Enter or Space picks. Dates are ISO calendar dates\n// (`\"2026-10-11\"`): no time zone, nothing to convert, safe in an address. Month and day names come from\n// `@krizaka/intl` for the `locale` given — never the runtime's default.\nimport { formatDate, getDateTimeFormat } from \"@krizaka/intl\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\n\n/** A calendar date, `YYYY-MM-DD`. */\nexport type IsoDate = string;\n/** A range of calendar dates; `end` is `null` while the second date is not chosen. */\nexport type DateRange = { start: IsoDate; end: IsoDate | null };\n\nexport const calendar = tv({\n  slots: {\n    root: \"w-[17.5rem] select-none text-sm text-fg\",\n    header: \"mb-2 flex items-center justify-between gap-2\",\n    title: \"text-sm font-semibold capitalize\",\n    nav:\n      \"inline-flex h-8 w-8 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    grid: \"w-full border-collapse\",\n    weekday: \"h-8 w-10 text-center text-[11px] font-semibold uppercase text-fg-secondary\",\n    cell: \"p-0 text-center\",\n    day:\n      \"relative h-10 w-10 rounded-lg text-sm tabular-nums text-fg transition-colors hover:bg-surface-3 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"data-[outside]:text-fg-secondary data-[today]:font-bold data-[today]:not-data-[selected]:text-fg-accent \" +\n      \"data-[in-range]:rounded-none data-[in-range]:bg-accent-soft \" +\n      \"data-[selected]:bg-accent data-[selected]:text-on-accent data-[selected]:hover:bg-accent \" +\n      \"disabled:cursor-not-allowed disabled:text-fg-muted disabled:line-through disabled:opacity-50 disabled:hover:bg-transparent\",\n  },\n});\n\nexport const pad = (n: number) => String(n).padStart(2, \"0\");\nconst parts = (iso: IsoDate) => iso.split(\"-\").map(Number) as [number, number, number];\n/** A local `Date` at midnight for an ISO date (for formatting). */\nexport const toLocalDate = (iso: IsoDate) => {\n  const [y, m, d] = parts(iso);\n  return new Date(y, m - 1, d);\n};\n/** The ISO date of a local `Date`. */\nexport const toIsoDate = (date: Date): IsoDate => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\nexport const addDays = (iso: IsoDate, days: number) => {\n  const date = toLocalDate(iso);\n  date.setDate(date.getDate() + days);\n  return toIsoDate(date);\n};\nexport const addMonths = (iso: IsoDate, months: number) => {\n  const [y, m, d] = parts(iso);\n  const first = new Date(y, m - 1 + months, 1);\n  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();\n  return toIsoDate(new Date(first.getFullYear(), first.getMonth(), Math.min(d, last)));\n};\nconst monthOf = (iso: IsoDate) => `${iso.slice(0, 7)}-01`;\nconst clampIso = (iso: IsoDate, min?: IsoDate, max?: IsoDate) => (min && iso < min ? min : max && iso > max ? max : iso);\n\n/** The first day of the week for a locale (0 = Sunday … 6 = Saturday), from `Intl.Locale` week info; Monday otherwise. */\nexport function weekStartOf(locale: string): number {\n  try {\n    const info = new Intl.Locale(locale) as Intl.Locale & { getWeekInfo?: () => { firstDay: number }; weekInfo?: { firstDay: number } };\n    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;\n    return firstDay ? firstDay % 7 : 1;\n  } catch {\n    return 1;\n  }\n}\n\nexport type CalendarLabels = {\n  /** The previous-month button (\"Previous month\"). */\n  previousMonth: string;\n  /** The next-month button (\"Next month\"). */\n  nextMonth: string;\n};\n\nexport const calendarLabels: CalendarLabels = { previousMonth: \"Previous month\", nextMonth: \"Next month\" };\n\nexport type CalendarProps = {\n  /** The BCP 47 locale of the month and day names (`\"en-US\"`, `\"fr-CA\"`): always explicit. */\n  locale: string;\n  /** The chosen date (one-date mode). */\n  value?: IsoDate | null;\n  /** The chosen range (range mode): its ends are marked, the days between tinted. */\n  range?: DateRange | null;\n  /** Called with the day picked. */\n  onSelect?: (date: IsoDate) => void;\n  /** The month shown, any day of it (controlled). */\n  month?: IsoDate;\n  /** The month shown at first. Default: the value's, or today's. */\n  defaultMonth?: IsoDate;\n  /** Called when the month shown changes. */\n  onMonthChange?: (month: IsoDate) => void;\n  /** The earliest date that can be picked. */\n  min?: IsoDate;\n  /** The latest date that can be picked. */\n  max?: IsoDate;\n  /** Refuses some dates (`(d) => isWeekend(d)`). */\n  isDateDisabled?: (date: IsoDate) => boolean;\n  /** The first day of the week, 0 = Sunday. Default: the locale's. */\n  weekStartsOn?: number;\n  /** Today (marked): inject it for a stable server render or a test. Default: the device's date. */\n  today?: IsoDate;\n  /** Moves the focus to the active day when it mounts (inside a popover). */\n  autoFocus?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<CalendarLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** A month grid to pick a date or the ends of a range, with the full keyboard of the APG date picker. */\nexport function Calendar({\n  locale,\n  value,\n  range,\n  onSelect,\n  month: monthProp,\n  defaultMonth,\n  onMonthChange,\n  min,\n  max,\n  isDateDisabled,\n  weekStartsOn,\n  today: todayProp,\n  autoFocus,\n  labels: given,\n  className,\n}: CalendarProps) {\n  const labels = { ...calendarLabels, ...given };\n  const s = calendar();\n  const today = todayProp ?? toIsoDate(new Date());\n  const anchor = value ?? range?.start ?? clampIso(today, min, max);\n  const [innerMonth, setInnerMonth] = React.useState(monthOf(defaultMonth ?? anchor));\n  const month = monthProp ? monthOf(monthProp) : innerMonth;\n  const [focused, setFocused] = React.useState<IsoDate>(anchor.slice(0, 7) === month.slice(0, 7) ? anchor : month);\n  const [hover, setHover] = React.useState<IsoDate | null>(null);\n  const grid = React.useRef<HTMLTableElement>(null);\n  const moved = React.useRef(Boolean(autoFocus));\n  const titleId = React.useId();\n\n  const setMonth = (next: IsoDate) => {\n    const m = monthOf(next);\n    if (!monthProp) setInnerMonth(m);\n    onMonthChange?.(m);\n  };\n  // The focused day follows the month shown when it is changed from outside (the buttons, a controlled `month`).\n  const active = focused.slice(0, 7) === month.slice(0, 7) ? focused : month;\n\n  React.useEffect(() => {\n    if (!moved.current) return;\n    moved.current = false;\n    grid.current?.querySelector<HTMLButtonElement>(`[data-date=\"${active}\"]`)?.focus();\n  }, [active]);\n\n  const disabled = (iso: IsoDate) => Boolean((min && iso < min) || (max && iso > max) || isDateDisabled?.(iso));\n  const start = weekStartsOn ?? weekStartOf(locale);\n  const first = toLocalDate(month);\n  const lead = (first.getDay() - start + 7) % 7;\n  const gridStart = addDays(month, -lead);\n  const days = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));\n  const weeks = Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7)).filter((week, w) => w < 5 || week[0]!.slice(0, 7) === month.slice(0, 7));\n  const weekdayShort = getDateTimeFormat(locale, { weekday: \"short\" });\n  const weekdayLong = getDateTimeFormat(locale, { weekday: \"long\" });\n  const title = getDateTimeFormat(locale, { month: \"long\", year: \"numeric\" }).format(first);\n\n  const rangeEnd = range ? (range.end ?? hover) : null;\n  const [lo, hi] = range && rangeEnd ? (range.start <= rangeEnd ? [range.start, rangeEnd] : [rangeEnd, range.start]) : [null, null];\n\n  const focusDay = (iso: IsoDate) => {\n    moved.current = true;\n    setFocused(iso);\n    if (iso.slice(0, 7) !== month.slice(0, 7)) setMonth(iso);\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const weekday = (toLocalDate(active).getDay() - start + 7) % 7;\n    const moves: Record<string, () => IsoDate> = {\n      ArrowLeft: () => addDays(active, -1),\n      ArrowRight: () => addDays(active, 1),\n      ArrowUp: () => addDays(active, -7),\n      ArrowDown: () => addDays(active, 7),\n      Home: () => addDays(active, -weekday),\n      End: () => addDays(active, 6 - weekday),\n      PageUp: () => addMonths(active, event.shiftKey ? -12 : -1),\n      PageDown: () => addMonths(active, event.shiftKey ? 12 : 1),\n    };\n    const move = moves[event.key];\n    if (!move) return;\n    event.preventDefault();\n    focusDay(move());\n  };\n\n  const prevDisabled = Boolean(min && addDays(month, -1) < min);\n  const nextDisabled = Boolean(max && addMonths(month, 1) > max);\n\n  return (\n    <div className={s.root({ className })}>\n      <div className={s.header()}>\n        <button type=\"button\" className={s.nav()} aria-label={labels.previousMonth} disabled={prevDisabled} onClick={() => setMonth(addMonths(month, -1))}>\n          <ChevronGlyph direction=\"left\" />\n        </button>\n        <h2 id={titleId} className={s.title()} aria-live=\"polite\">\n          {title}\n        </h2>\n        <button type=\"button\" className={s.nav()} aria-label={labels.nextMonth} disabled={nextDisabled} onClick={() => setMonth(addMonths(month, 1))}>\n          <ChevronGlyph direction=\"right\" />\n        </button>\n      </div>\n      <table ref={grid} role=\"grid\" aria-labelledby={titleId} className={s.grid()} onKeyDown={onKeyDown}>\n        <thead>\n          <tr>\n            {days.slice(0, 7).map((iso) => (\n              <th key={iso} scope=\"col\" abbr={weekdayLong.format(toLocalDate(iso))} className={s.weekday()}>\n                {weekdayShort.format(toLocalDate(iso)).replace(/\\.$/, \"\")}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {weeks.map((week) => (\n            <tr key={week[0]}>\n              {week.map((iso) => {\n                const selected = iso === value || (range && (iso === range.start || iso === range.end));\n                const inRange = Boolean(lo && hi && iso > lo && iso < hi);\n                return (\n                  <td key={iso} role=\"gridcell\" aria-selected={selected || inRange || undefined} className={s.cell()}>\n                    <button\n                      type=\"button\"\n                      data-date={iso}\n                      tabIndex={iso === active ? 0 : -1}\n                      aria-label={formatDate(toLocalDate(iso), { locale, style: \"long\" })}\n                      aria-current={iso === today ? \"date\" : undefined}\n                      data-today={iso === today ? \"\" : undefined}\n                      data-outside={iso.slice(0, 7) !== month.slice(0, 7) ? \"\" : undefined}\n                      data-selected={selected ? \"\" : undefined}\n                      data-in-range={inRange ? \"\" : undefined}\n                      disabled={disabled(iso)}\n                      className={s.day()}\n                      onClick={() => {\n                        setFocused(iso);\n                        onSelect?.(iso);\n                      }}\n                      onMouseEnter={range && !range.end ? () => setHover(iso) : undefined}\n                      onFocus={range && !range.end ? () => setHover(iso) : undefined}\n                    >\n                      {Number(iso.slice(8))}\n                    </button>\n                  </td>\n                );\n              })}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"
-    },
-    {
+        "component": "WheelDivider",
+        "description": "A divider between two wheels (`:` between the hours and the minutes).",
+        "props": []
+      },
+      {
+        "component": "WheelPicker",
+        "description": "The frame of one or several wheels: a raised surface, the lit band across them, a group named by `label`.",
+        "props": [
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The wheels (`Wheel`), and dividers (`WheelDivider`) between them.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The group's accessible name (\"Departure time\"), passed translated.",
+            "required": true
+          },
+          {
+            "name": "aria-describedby",
+            "type": "string",
+            "default": null,
+            "description": "The help text or the error that describes the group (their ids).",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the root.",
+            "required": false
+          },
+          {
+            "name": "invalid",
+            "type": "boolean",
+            "default": null,
+            "description": "Marks the group invalid (a danger edge): pair it with an error read through `aria-describedby`.",
+            "required": false
+          },
+          {
+            "name": "visible",
+            "type": "3 | 5 | 7",
+            "default": "5",
+            "description": "How many values are visible: 3, 5 (default) or 7.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "schedule",
+        "title": "Schedule",
+        "description": "A publication date, from today on, written the way the locale writes it.",
+        "path": "examples/date-picker/schedule.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/schedule",
+        "code": "\"use client\";\n\nimport { DatePicker } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\n// `today` is fixed here for the documentation; leave it out in an app.\nexport default function DatePickerSchedule() {\n  const [date, setDate] = React.useState<string | null>(\"2026-10-14\");\n  return (\n    <DatePicker\n      label=\"Publish on\"\n      locale=\"en-US\"\n      value={date}\n      onValueChange={setDate}\n      min=\"2026-10-11\"\n      today=\"2026-10-11\"\n      clearable\n      placeholder=\"Publish now\"\n      hint=\"Your followers are told when it goes live.\"\n    />\n  );\n}\n"
+      },
+      {
+        "name": "open",
+        "title": "Calendar open",
+        "description": "The popover open on the month: today's node, the chosen day lit.",
+        "path": "examples/date-picker/open.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/open",
+        "code": "\"use client\";\n\nimport { DatePicker } from \"@krizaka/ui/date-picker\";\n\n// The calendar open: today marked, the chosen day filled, the past unavailable.\nexport default function DatePickerOpen({ defaultOpen }: { defaultOpen?: boolean }) {\n  return <DatePicker label=\"Auction ends\" locale=\"en-US\" defaultValue=\"2026-10-18\" min=\"2026-10-11\" today=\"2026-10-11\" defaultOpen={defaultOpen} />;\n}\n"
+      },
+      {
+        "name": "range",
+        "title": "Period with presets",
+        "description": "`DateRangePicker` for an earnings report: presets beside two months, the period as one band.",
+        "path": "examples/date-picker/range.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/range",
+        "code": "\"use client\";\n\nimport { DateRangePicker } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\n// An earnings report: presets for the usual periods, two clicks for any other.\nexport default function DatePickerRange({ defaultOpen }: { defaultOpen?: boolean }) {\n  const [period, setPeriod] = React.useState<{ start: string; end: string } | null>({ start: \"2026-10-01\", end: \"2026-10-11\" });\n  return (\n    <DateRangePicker\n      label=\"Period\"\n      locale=\"en-US\"\n      value={period}\n      onValueChange={setPeriod}\n      max=\"2026-10-11\"\n      today=\"2026-10-11\"\n      defaultOpen={defaultOpen}\n      presets={[\n        { label: \"Last 7 days\", start: \"2026-10-05\", end: \"2026-10-11\" },\n        { label: \"This month\", start: \"2026-10-01\", end: \"2026-10-11\" },\n        { label: \"Last month\", start: \"2026-09-01\", end: \"2026-09-30\" },\n      ]}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "french",
+        "title": "In French",
+        "description": "`locale=\"fr-CA\"`: the names, the order and the first day of the week follow.",
+        "path": "examples/date-picker/french.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/french",
+        "code": "import { DatePicker } from \"@krizaka/ui/date-picker\";\n\n// fr-CA: “11 oct. 2026”, the months and days in French, the week as Canada counts it.\nexport default function DatePickerFrench() {\n  return (\n    <DatePicker\n      label=\"Date du rendez-vous\"\n      locale=\"fr-CA\"\n      defaultValue=\"2026-10-11\"\n      today=\"2026-10-11\"\n      labels={{ previousMonth: \"Mois précédent\", nextMonth: \"Mois suivant\", clear: \"Effacer la date\" }}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "calendar",
+        "title": "Inline calendar",
+        "description": "`Calendar variant=\"card\"`: the month is the interface, weekends unavailable; its title opens the months.",
+        "path": "examples/date-picker/calendar.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/calendar",
+        "code": "\"use client\";\n\nimport { Calendar } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\nconst weekend = (iso: string) => [0, 6].includes(new Date(`${iso}T12:00:00`).getDay());\n\n// The month is the interface: a card of its own, weekends unavailable, today marked by the node.\nexport default function DatePickerCalendar() {\n  const [day, setDay] = React.useState(\"2026-10-15\");\n  return <Calendar variant=\"card\" locale=\"en-GB\" value={day} onSelect={setDay} isDateDisabled={weekend} min=\"2026-10-12\" today=\"2026-10-11\" />;\n}\n"
+      },
+      {
+        "name": "month-year",
+        "title": "Month and year",
+        "description": "`MonthPicker`: a billing month, nothing later than this one.",
+        "path": "examples/date-picker/month-year.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/month-year",
+        "code": "\"use client\";\n\nimport { MonthPicker } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\n// A billing month: twelve months at a glance, the year above them, nothing later than this month.\nexport default function DatePickerMonthYear() {\n  const [month, setMonth] = React.useState<string | null>(\"2026-09\");\n  return <MonthPicker variant=\"card\" locale=\"en-US\" value={month} onValueChange={setMonth} max=\"2026-10\" current=\"2026-10\" />;\n}\n"
+      },
+      {
+        "name": "day-strip",
+        "title": "Day strip",
+        "description": "`DayStrip`: the next two weeks in a row, closed days dashed, the days with a session marked.",
+        "path": "examples/date-picker/day-strip.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/day-strip",
+        "code": "\"use client\";\n\nimport { DayStrip } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\nconst closed = (iso: string) => new Date(`${iso}T12:00:00`).getDay() === 0;\nconst sessions = new Set([\"2026-10-14\", \"2026-10-17\", \"2026-10-21\"]);\n\n// The next two weeks in a row: Sundays closed, the days with a session marked.\nexport default function DatePickerDayStrip() {\n  const [day, setDay] = React.useState<string | null>(\"2026-10-14\");\n  return (\n    <div className=\"w-full max-w-md\">\n      <DayStrip\n        label=\"Session day\"\n        locale=\"en-US\"\n        value={day}\n        onValueChange={setDay}\n        start=\"2026-10-11\"\n        today=\"2026-10-11\"\n        isDateDisabled={closed}\n        isDateMarked={(d) => sessions.has(d)}\n        labels={{ marked: \"has a session\" }}\n      />\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "wheel",
+        "title": "Wheel",
+        "description": "`WheelPicker` + `Wheel`: any short list turned by the thumb or the arrows — a party size.",
+        "path": "examples/date-picker/wheel.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/wheel",
+        "code": "\"use client\";\n\nimport { Wheel, WheelPicker } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\nconst sizes = Array.from({ length: 12 }, (_, i) => ({ value: String(i + 1), label: i === 0 ? \"1 guest\" : `${i + 1} guests` }));\n\n// Any short list turned by the thumb: a party size. The keyboard moves it too (↑ ↓, Page Up / Down, Home / End).\nexport default function DatePickerWheel() {\n  const [size, setSize] = React.useState(\"4\");\n  return (\n    <WheelPicker label=\"Party size\">\n      <Wheel label=\"Guests\" options={sizes} value={size} onValueChange={setSize} className=\"w-36\" />\n    </WheelPicker>\n  );\n}\n"
+      },
+      {
+        "name": "time-wheel",
+        "title": "Time, wheels",
+        "description": "`TimePicker`: hours, minutes by 5 and the period of a 12-hour locale; the value is `HH:mm`.",
+        "path": "examples/date-picker/time-wheel.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/time-wheel",
+        "code": "\"use client\";\n\nimport { TimePicker } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\n// A reminder set by the thumb: hours, minutes by 5 and the period, as the locale writes them. The value is \"HH:mm\".\nexport default function DatePickerTimeWheel() {\n  const [time, setTime] = React.useState<string | null>(\"19:30\");\n  return <TimePicker label=\"Remind me at\" locale=\"en-US\" value={time} onValueChange={setTime} minuteStep={5} />;\n}\n"
+      },
+      {
+        "name": "time-slots",
+        "title": "Time, slots",
+        "description": "`TimePicker variant=\"slots\"`: the free times of an agenda by part of the day, taken ones struck through.",
+        "path": "examples/date-picker/time-slots.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/time-slots",
+        "code": "\"use client\";\n\nimport { TimePicker, timeSlots } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\nconst taken = new Set([\"10:00\", \"13:30\", \"14:00\"]);\n\n// The free times of an agenda, by part of the day; taken slots are struck through and skipped by the arrows.\nexport default function DatePickerTimeSlots() {\n  const [time, setTime] = React.useState<string | null>(\"11:00\");\n  return (\n    <div className=\"w-full max-w-md\">\n      <TimePicker\n        variant=\"slots\"\n        label=\"Appointment time\"\n        locale=\"en-US\"\n        slots={timeSlots(\"09:00\", \"17:00\", 30)}\n        isTimeDisabled={(t) => taken.has(t)}\n        groupLabels={{ morning: \"Morning\", afternoon: \"Afternoon\", evening: \"Evening\" }}\n        value={time}\n        onValueChange={setTime}\n      />\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "birth-date",
+        "title": "Date of birth, typed",
+        "description": "`DateField`: day · month · year in the locale's order, autofilled, an under-18 date refused.",
+        "path": "examples/date-picker/birth-date.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/birth-date",
+        "code": "\"use client\";\n\nimport { DateField, isRealDate, latestBirthDate } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\n// A date of birth typed as day, month and year (the browser can fill it); an under-18 date is refused at once.\nexport default function DatePickerBirthDate() {\n  const [birth, setBirth] = React.useState(\"2015-03-27\");\n  const minor = isRealDate(birth) && birth > latestBirthDate(18);\n  return (\n    <DateField\n      label=\"Date of birth\"\n      locale=\"en-GB\"\n      autoComplete=\"bday\"\n      value={birth}\n      onValueChange={setBirth}\n      hint=\"Private, never shown. For example, 27 3 1990.\"\n      error={minor ? \"You must be 18 or older to create an account.\" : undefined}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "birth-date-wheel",
+        "title": "Date of birth, wheels",
+        "description": "`DateWheel` with `max` at the 18th birthday: an under-18 date cannot be chosen.",
+        "path": "examples/date-picker/birth-date-wheel.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/birth-date-wheel",
+        "code": "\"use client\";\n\nimport { DateWheel } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\n// The wheels of a date of birth, in the locale's order, ending at the 18th birthday: an under-18 date cannot be chosen.\n// `max` is fixed here for the documentation; in an app, `max={latestBirthDate(18)}`.\nexport default function DatePickerBirthDateWheel() {\n  const [birth, setBirth] = React.useState<string | null>(\"1994-06-18\");\n  return <DateWheel label=\"Date of birth\" locale=\"en-US\" value={birth} onValueChange={setBirth} max=\"2008-10-11\" hint=\"You must be 18 or older.\" />;\n}\n"
+      }
+    ]
+  },
+  "native": {
+    "entry": "@krizaka/ui/native",
+    "import": "import { Calendar, MonthPicker, DayStrip, TimePicker, DateWheel, WheelPicker, Wheel, DateField, latestBirthDate, timeSlots } from \"@krizaka/ui/native\";",
+    "differences": [
+      "No popover field (`DatePicker`, `DateRangePicker`): on a phone, the `Calendar`, the `DayStrip` or the wheels sit in the screen or in a `Sheet`.",
+      "`DateField` is typed (day · month · year, numeric keypads); `DateWheel` is the same date as three wheels — the native form's `DateField` uses the wheels.",
+      "Each value a wheel passes, each day or slot pressed plays a `selection` haptic — when the app passes `haptics` to the `ThemeProvider` (expo-haptics): the platform has no native module.",
+      "A wheel is an adjustable control for VoiceOver and TalkBack (swipe up or down), named by its `label`, its value read as words."
+    ],
+    "props": [
+      {
+        "component": "DateField",
+        "description": "A date typed as day, month and year — a memorable date (a birth date, an expiry) that a calendar would make slow to\nreach: numeric keypads, the boxes in the locale's order, the next box focused once one is full. No native module.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label of the date, passed translated (the group's accessible name).",
+            "required": true
+          },
+          {
+            "name": "autoComplete",
+            "type": "\"off\" | \"bday\"",
+            "default": null,
+            "description": "`bday` for a date of birth: the system offers to fill it.",
+            "required": false
+          },
+          {
+            "name": "defaultValue",
+            "type": "string",
+            "default": null,
+            "description": "The date at first, uncontrolled.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "string",
+            "default": null,
+            "description": "An error under the boxes: a danger border and caption, read with them and announced. Replaces the hint.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the boxes (\"For example, 27 3 1990\").",
+            "required": false
+          },
+          {
+            "name": "inputRef",
+            "type": "Ref<TextInput>",
+            "default": null,
+            "description": "The first box (in the locale's order), to focus the field from the one before it.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<DateFieldLabels>",
+            "default": null,
+            "description": "The names of the boxes, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "default": "en-US",
+            "description": "The locale that orders the boxes (day · month · year, or month · day · year). Default `en-US`.",
+            "required": false
+          },
+          {
+            "name": "onBlur",
+            "type": "(() => void)",
+            "default": null,
+            "description": "Called when focus leaves the last box.",
+            "required": false
+          },
+          {
+            "name": "onSubmitEditing",
+            "type": "(() => void)",
+            "default": null,
+            "description": "Called by the last box's return key (`returnKeyType`): move to the next field, or send the form.",
+            "required": false
+          },
+          {
+            "name": "onValueChange",
+            "type": "((value: string) => void)",
+            "default": null,
+            "description": "Called on every key with the date typed so far (`\"\"` when the boxes are empty).",
+            "required": false
+          },
+          {
+            "name": "returnKeyType",
+            "type": "\"next\" | \"done\" | \"go\" | \"send\"",
+            "default": "done",
+            "description": "The last box's return key. Default `done`.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          },
+          {
+            "name": "value",
+            "type": "string",
+            "default": null,
+            "description": "The date, `YYYY-MM-DD` (controlled); `\"\"` for none. What is typed comes back in the same order, real date or not: the schema decides.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "birth-date",
+        "title": "Date of birth, typed",
+        "description": "Day, month and year with `autoComplete=\"bday\"`, and the error of an under-18 date.",
+        "path": "examples/date-picker/native/birth-date.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/native/birth-date",
+        "code": "import { DateField } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\nconst latestAdult = () => {\n  const today = new Date();\n  return new Date(Date.UTC(today.getFullYear() - 18, today.getMonth(), today.getDate())).toISOString().slice(0, 10);\n};\n\n// A date of birth typed as day, month and year, in the locale's order; an under-18 date is refused at once.\nexport default function NativeDateFieldBirthDate() {\n  const [birth, setBirth] = React.useState(\"2015-03-27\");\n  const minor = /^\\d{4}-\\d{2}-\\d{2}$/.test(birth) && birth > latestAdult();\n  return (\n    <View style={{ width: 296 }}>\n      <DateField\n        label=\"Date of birth\"\n        locale=\"en-GB\"\n        autoComplete=\"bday\"\n        value={birth}\n        onValueChange={setBirth}\n        hint=\"Private, never shown. For example, 27 3 1990.\"\n        error={minor ? \"You must be 18 or older to create an account.\" : undefined}\n      />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/date-picker/native/birth-date.dark.png",
+          "light": "examples/date-picker/native/birth-date.light.png"
+        }
+      },
+      {
+        "name": "birth-date-wheel",
+        "title": "Date of birth, wheels",
+        "description": "`DateWheel` ending at the 18th birthday: an under-18 date cannot be chosen.",
+        "path": "examples/date-picker/native/birth-date-wheel.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/native/birth-date-wheel",
+        "code": "import { DateWheel } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\n\n// The wheels of a date of birth in the locale's order, ending at the 18th birthday; each value passed ticks under the\n// thumb (the app's `haptics`). `max` is fixed here for the documentation; in an app, `max={latestBirthDate(18)}`.\nexport default function NativeDatePickerBirthDateWheel() {\n  const [birth, setBirth] = React.useState<string | null>(\"1994-06-18\");\n  return <DateWheel label=\"Date of birth\" locale=\"en-US\" value={birth} onValueChange={setBirth} max=\"2008-10-11\" hint=\"You must be 18 or older.\" />;\n}\n",
+        "screenshots": {
+          "dark": "examples/date-picker/native/birth-date-wheel.dark.png",
+          "light": "examples/date-picker/native/birth-date-wheel.light.png"
+        }
+      },
+      {
+        "name": "calendar",
+        "title": "Calendar",
+        "description": "A month to book a day: 44-pt days, today's node, the past unavailable.",
+        "path": "examples/date-picker/native/calendar.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/native/calendar",
+        "code": "import { Calendar } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\n\n// A month to book a day: 44-pt days, today's node, the past unavailable.\nexport default function NativeDatePickerCalendar() {\n  const [day, setDay] = React.useState(\"2026-10-15\");\n  return <Calendar locale=\"en-US\" value={day} onSelect={setDay} min=\"2026-10-11\" today=\"2026-10-11\" />;\n}\n",
+        "screenshots": {
+          "dark": "examples/date-picker/native/calendar.dark.png",
+          "light": "examples/date-picker/native/calendar.light.png"
+        }
+      },
+      {
+        "name": "day-strip",
+        "title": "Day strip",
+        "description": "The days ahead swiped sideways, closed days dashed, marked days with a dot.",
+        "path": "examples/date-picker/native/day-strip.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/native/day-strip",
+        "code": "import { DayStrip } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\nconst sessions = new Set([\"2026-10-14\", \"2026-10-17\"]);\n\n// The days ahead, swiped sideways: Sundays closed, the days with a session marked.\nexport default function NativeDatePickerDayStrip() {\n  const [day, setDay] = React.useState<string | null>(\"2026-10-14\");\n  return (\n    <View style={{ width: 320 }}>\n      <DayStrip\n        label=\"Session day\"\n        locale=\"en-US\"\n        value={day}\n        onValueChange={setDay}\n        start=\"2026-10-11\"\n        today=\"2026-10-11\"\n        days={10}\n        isDateDisabled={(d) => new Date(`${d}T12:00:00`).getDay() === 0}\n        isDateMarked={(d) => sessions.has(d)}\n        markedLabel=\"has a session\"\n      />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/date-picker/native/day-strip.dark.png",
+          "light": "examples/date-picker/native/day-strip.light.png"
+        }
+      },
+      {
+        "name": "time-wheel",
+        "title": "Time, wheels",
+        "description": "Hours, minutes by 5 and the period; the value is `HH:mm`.",
+        "path": "examples/date-picker/native/time-wheel.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/native/time-wheel",
+        "code": "import { TimePicker } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\n\n// A reminder set by the thumb: hours, minutes by 5, the period of a 12-hour locale. The value is \"HH:mm\".\nexport default function NativeDatePickerTimeWheel() {\n  const [time, setTime] = React.useState<string | null>(\"19:30\");\n  return <TimePicker label=\"Remind me at\" locale=\"en-US\" value={time} onValueChange={setTime} />;\n}\n",
+        "screenshots": {
+          "dark": "examples/date-picker/native/time-wheel.dark.png",
+          "light": "examples/date-picker/native/time-wheel.light.png"
+        }
+      },
+      {
+        "name": "time-slots",
+        "title": "Time, slots",
+        "description": "The free times of an agenda as buttons, taken ones dashed.",
+        "path": "examples/date-picker/native/time-slots.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/native/time-slots",
+        "code": "import { TimePicker, timeSlots } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\nconst taken = new Set([\"10:00\", \"11:30\"]);\n\n// The free times of an agenda as buttons; taken ones dashed and struck through.\nexport default function NativeDatePickerTimeSlots() {\n  const [time, setTime] = React.useState<string | null>(\"10:30\");\n  return (\n    <View style={{ width: 320 }}>\n      <TimePicker variant=\"slots\" label=\"Appointment time\" locale=\"en-US\" slots={timeSlots(\"09:00\", \"12:00\", 30)} isTimeDisabled={(t) => taken.has(t)} value={time} onValueChange={setTime} />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/date-picker/native/time-slots.dark.png",
+          "light": "examples/date-picker/native/time-slots.light.png"
+        }
+      },
+      {
+        "name": "month-year",
+        "title": "Month and year",
+        "description": "`MonthPicker`: the twelve months, nothing later than this one.",
+        "path": "examples/date-picker/native/month-year.tsx",
+        "module": "@krizaka/ui/registry/examples/date-picker/native/month-year",
+        "code": "import { MonthPicker } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\n\n// A billing month: the twelve months of the year, nothing later than this month.\nexport default function NativeDatePickerMonthYear() {\n  const [month, setMonth] = React.useState<string | null>(\"2026-09\");\n  return <MonthPicker locale=\"en-US\" value={month} onValueChange={setMonth} max=\"2026-10\" />;\n}\n",
+        "screenshots": {
+          "dark": "examples/date-picker/native/month-year.dark.png",
+          "light": "examples/date-picker/native/month-year.light.png"
+        }
+      }
+    ]
+  },
+  "files": [
+    {
+      "path": "date-picker/calendar.tsx",
+      "content": "// Client. A month as an ARIA grid (the APG date picker): one day in the tab order, the arrows walk the days, Home /\n// End the week, Page Up / Page Down the months (Shift: the years), Enter or Space picks. Dates are ISO calendar dates\n// (`\"2026-10-11\"`): no time zone, nothing to convert, safe in an address. Month and day names come from\n// `@krizaka/intl` for the `locale` given — never the runtime's default.\n//\n// The material (BRAND.md §6): the chosen day is a lit fill (the accent, its shade, its glow), today carries the node —\n// the diamond of the marks — and a range is one continuous band. The month's title opens the months of the year\n// (`MonthPicker`): years are reached in a click, not by paging.\nimport { formatDate, getDateTimeFormat } from \"@krizaka/intl\";\nimport * as React from \"react\";\n\nimport { ChevronGlyph } from \"../glyphs\";\nimport { tv } from \"../tv\";\nimport { MonthPicker } from \"./month-picker\";\nimport { addDays, addMonths, toIsoDate, toLocalDate, weekStartOf } from \"./parts\";\n\nexport { addDays, addMonths, toIsoDate, toLocalDate, weekStartOf };\n\n/** A calendar date, `YYYY-MM-DD`. */\nexport type IsoDate = string;\n/** A range of calendar dates; `end` is `null` while the second date is not chosen. */\nexport type DateRange = { start: IsoDate; end: IsoDate | null };\n\nexport const calendar = tv({\n  slots: {\n    root: \"inline-flex select-none flex-col text-sm text-fg\",\n    header: \"mb-3 flex items-center justify-between gap-2\",\n    caption:\n      \"inline-flex h-9 items-center gap-1.5 rounded-lg px-2.5 text-sm font-semibold capitalize text-fg transition-colors hover:bg-surface-3 \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring aria-expanded:bg-surface-3\",\n    nav:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-2 bg-sheen text-fg-secondary inset-shadow-edge \" +\n      \"transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring \" +\n      \"disabled:pointer-events-none disabled:opacity-35\",\n    months: \"flex flex-col gap-6 sm:flex-row\",\n    month: \"kz-month flex flex-col gap-2\",\n    monthTitle: \"px-1 text-xs font-semibold capitalize text-fg-secondary\",\n    grid: \"border-separate border-spacing-y-1\",\n    weekday: \"h-7 w-10 pb-1 text-center text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    cell:\n      \"p-0 text-center data-[band]:bg-accent-soft data-[band=start]:rounded-l-xl data-[band=end]:rounded-r-xl data-[band=solo]:rounded-xl \" +\n      \"data-[band=preview]:bg-surface-3\",\n    day:\n      \"relative h-10 w-10 rounded-xl text-sm tabular-nums text-fg transition-[background-color,box-shadow,transform] duration-150 \" +\n      \"hover:bg-surface-3 active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 \" +\n      \"focus-visible:z-10 focus-visible:outline-hidden focus-visible:focus-ring \" +\n      \"data-[outside]:text-fg-secondary data-[outside]:font-normal data-[weekend]:not-data-[selected]:text-fg-secondary \" +\n      \"data-[today]:font-bold data-[today]:not-data-[selected]:text-fg-accent \" +\n      \"data-[in-range]:hover:bg-accent/15 \" +\n      \"data-[selected]:bg-accent data-[selected]:bg-fill-shade data-[selected]:font-semibold data-[selected]:text-on-accent \" +\n      \"data-[selected]:shadow-glow data-[selected]:inset-shadow-edge-fill data-[selected]:hover:bg-accent \" +\n      \"disabled:cursor-not-allowed disabled:text-fg-muted disabled:line-through disabled:opacity-50 disabled:hover:bg-transparent\",\n    // Today: the node under the number (the marks' diamond), on-accent when today is the chosen day.\n    node: \"pointer-events-none absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rotate-45 rounded-[1px] bg-accent group-data-[selected]:bg-on-accent\",\n    live: \"sr-only\",\n  },\n  variants: {\n    variant: {\n      plain: {},\n      card: { root: \"rounded-2xl border border-border-default bg-surface-1 bg-sheen p-4 shadow-raised inset-shadow-edge\" },\n    },\n  },\n  defaultVariants: { variant: \"plain\" },\n});\n\nconst monthOf = (iso: IsoDate) => `${iso.slice(0, 7)}-01`;\nconst clampIso = (iso: IsoDate, min?: IsoDate, max?: IsoDate) => (min && iso < min ? min : max && iso > max ? max : iso);\nconst monthsBetween = (a: IsoDate, b: IsoDate) => (Number(b.slice(0, 4)) - Number(a.slice(0, 4))) * 12 + Number(b.slice(5, 7)) - Number(a.slice(5, 7));\n\nexport type CalendarLabels = {\n  /** The previous-month button (\"Previous month\"). */\n  previousMonth: string;\n  /** The next-month button (\"Next month\"). */\n  nextMonth: string;\n  /** The month's title as a button: opens the months of the year (\"Choose month and year\"). */\n  chooseMonth: string;\n  /** The previous-year button of the months view (\"Previous year\"). */\n  previousYear: string;\n  /** The next-year button of the months view (\"Next year\"). */\n  nextYear: string;\n};\n\nexport const calendarLabels: CalendarLabels = {\n  previousMonth: \"Previous month\",\n  nextMonth: \"Next month\",\n  chooseMonth: \"Choose month and year\",\n  previousYear: \"Previous year\",\n  nextYear: \"Next year\",\n};\n\nexport type CalendarProps = {\n  /** The BCP 47 locale of the month and day names (`\"en-US\"`, `\"fr-CA\"`): always explicit. */\n  locale: string;\n  /** The chosen date (one-date mode). */\n  value?: IsoDate | null;\n  /** The chosen range (range mode): its ends are lit, the days between are one band. */\n  range?: DateRange | null;\n  /** Called with the day picked. */\n  onSelect?: (date: IsoDate) => void;\n  /** The month shown (the first one, with `numberOfMonths={2}`), any day of it (controlled). */\n  month?: IsoDate;\n  /** The month shown at first. Default: the value's, or today's. */\n  defaultMonth?: IsoDate;\n  /** Called when the month shown changes. */\n  onMonthChange?: (month: IsoDate) => void;\n  /** One month, or two side by side (a period: from a phone's width up, they stack on a phone). */\n  numberOfMonths?: 1 | 2;\n  /** The earliest date that can be picked. */\n  min?: IsoDate;\n  /** The latest date that can be picked. */\n  max?: IsoDate;\n  /** Refuses some dates (`(d) => isWeekend(d)`). */\n  isDateDisabled?: (date: IsoDate) => boolean;\n  /** The first day of the week, 0 = Sunday. Default: the locale's. */\n  weekStartsOn?: number;\n  /** Today (marked): inject it for a stable server render or a test. Default: the device's date. */\n  today?: IsoDate;\n  /** Moves the focus to the active day when it mounts (inside a popover). */\n  autoFocus?: boolean;\n  /** `plain` (inside a popover, a card of the app) or `card` (the calendar is the interface: its own raised surface). */\n  variant?: \"plain\" | \"card\";\n  /** The words, passed translated; English by default. */\n  labels?: Partial<CalendarLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** A month grid to pick a date or the ends of a range, with the full keyboard of the APG date picker. */\nexport function Calendar({\n  locale,\n  value,\n  range,\n  onSelect,\n  month: monthProp,\n  defaultMonth,\n  onMonthChange,\n  numberOfMonths = 1,\n  min,\n  max,\n  isDateDisabled,\n  weekStartsOn,\n  today: todayProp,\n  autoFocus,\n  variant,\n  labels: given,\n  className,\n}: CalendarProps) {\n  const labels = { ...calendarLabels, ...given };\n  const s = calendar({ variant });\n  const today = todayProp ?? toIsoDate(new Date());\n  const anchor = value ?? range?.start ?? clampIso(today, min, max);\n  const [innerMonth, setInnerMonth] = React.useState(monthOf(defaultMonth ?? anchor));\n  const month = monthProp ? monthOf(monthProp) : innerMonth;\n  const shown = Array.from({ length: numberOfMonths }, (_, i) => addMonths(month, i));\n  const lastShown = shown[shown.length - 1]!;\n  const isShown = (iso: IsoDate) => iso.slice(0, 7) >= month.slice(0, 7) && iso.slice(0, 7) <= lastShown.slice(0, 7);\n  const [focused, setFocused] = React.useState<IsoDate>(isShown(anchor) ? anchor : month);\n  const [hover, setHover] = React.useState<IsoDate | null>(null);\n  const [view, setView] = React.useState<\"days\" | \"months\">(\"days\");\n  const [direction, setDirection] = React.useState<\"next\" | \"previous\" | null>(null);\n  const root = React.useRef<HTMLDivElement>(null);\n  const moved = React.useRef(Boolean(autoFocus));\n  const titleId = React.useId();\n\n  const setMonth = (next: IsoDate) => {\n    const m = monthOf(next);\n    setDirection(m > month ? \"next\" : m < month ? \"previous\" : null);\n    if (!monthProp) setInnerMonth(m);\n    onMonthChange?.(m);\n  };\n  // The focused day follows the months shown when they are changed from outside (the buttons, a controlled `month`).\n  const active = isShown(focused) ? focused : month;\n\n  React.useEffect(() => {\n    if (!moved.current || view !== \"days\") return;\n    moved.current = false;\n    root.current?.querySelector<HTMLButtonElement>(`[data-date=\"${active}\"]`)?.focus();\n  }, [active, view]);\n\n  const disabled = (iso: IsoDate) => Boolean((min && iso < min) || (max && iso > max) || isDateDisabled?.(iso));\n  const start = weekStartsOn ?? weekStartOf(locale);\n  const weekdayShort = getDateTimeFormat(locale, { weekday: \"short\" });\n  const weekdayLong = getDateTimeFormat(locale, { weekday: \"long\" });\n  const titleFormat = getDateTimeFormat(locale, { month: \"long\", year: \"numeric\" });\n  const title = titleFormat.format(toLocalDate(month));\n  const fullTitle = numberOfMonths === 2 ? `${title} – ${titleFormat.format(toLocalDate(lastShown))}` : title;\n\n  const rangeEnd = range ? (range.end ?? hover) : null;\n  const [lo, hi] = range && rangeEnd ? (range.start <= rangeEnd ? [range.start, rangeEnd] : [rangeEnd, range.start]) : [null, null];\n  const previewing = Boolean(range && !range.end);\n\n  const focusDay = (iso: IsoDate) => {\n    moved.current = true;\n    setFocused(iso);\n    if (!isShown(iso)) setMonth(iso < month ? iso : addMonths(iso, -(numberOfMonths - 1)));\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const weekday = (toLocalDate(active).getDay() - start + 7) % 7;\n    const moves: Record<string, () => IsoDate> = {\n      ArrowLeft: () => addDays(active, -1),\n      ArrowRight: () => addDays(active, 1),\n      ArrowUp: () => addDays(active, -7),\n      ArrowDown: () => addDays(active, 7),\n      Home: () => addDays(active, -weekday),\n      End: () => addDays(active, 6 - weekday),\n      PageUp: () => addMonths(active, event.shiftKey ? -12 : -1),\n      PageDown: () => addMonths(active, event.shiftKey ? 12 : 1),\n    };\n    const move = moves[event.key];\n    if (!move) return;\n    event.preventDefault();\n    focusDay(move());\n  };\n\n  const prevDisabled = Boolean(min && addDays(month, -1) < min);\n  const nextDisabled = Boolean(max && addMonths(lastShown, 1) > max);\n\n  const band = (iso: IsoDate): string | undefined => {\n    if (!lo || !hi) return undefined;\n    if (iso < lo || iso > hi) return undefined;\n    if (lo === hi) return undefined;\n    if (previewing && iso !== range?.start) return iso === lo ? \"start\" : iso === hi ? \"end\" : \"preview\";\n    return iso === lo ? \"start\" : iso === hi ? \"end\" : \"middle\";\n  };\n\n  const renderMonth = (first: IsoDate, index: number) => {\n    const firstDate = toLocalDate(first);\n    const lead = (firstDate.getDay() - start + 7) % 7;\n    const gridStart = addDays(first, -lead);\n    const days = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));\n    const weeks = Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7)).filter((week, w) => w < 5 || week[0]!.slice(0, 7) === first.slice(0, 7));\n    const monthTitle = titleFormat.format(firstDate);\n    const gridLabelId = `${titleId}-m${index}`;\n    return (\n      <div key={first} className={s.month()} data-dir={direction ?? undefined}>\n        {numberOfMonths === 2 ? (\n          <div id={gridLabelId} className={s.monthTitle()}>\n            {monthTitle}\n          </div>\n        ) : null}\n        <table role=\"grid\" aria-label={monthTitle} className={s.grid()} onKeyDown={onKeyDown}>\n          <thead>\n            <tr>\n              {days.slice(0, 7).map((iso) => (\n                <th key={iso} scope=\"col\" abbr={weekdayLong.format(toLocalDate(iso))} className={s.weekday()}>\n                  {weekdayShort.format(toLocalDate(iso)).replace(/\\.$/, \"\")}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {weeks.map((week) => (\n              <tr key={week[0]}>\n                {week.map((iso) => {\n                  const outside = iso.slice(0, 7) !== first.slice(0, 7);\n                  // With two months, a day outside its month is the other month's: drawn once, where it belongs.\n                  if (outside && numberOfMonths === 2) return <td key={iso} role=\"gridcell\" className={s.cell()} />;\n                  const selected = iso === value || Boolean(range && (iso === range.start || iso === range.end));\n                  const inRange = Boolean(lo && hi && iso > lo && iso < hi);\n                  const dow = toLocalDate(iso).getDay();\n                  return (\n                    <td key={iso} role=\"gridcell\" aria-selected={selected || inRange || undefined} data-band={band(iso)} className={s.cell()}>\n                      <button\n                        type=\"button\"\n                        data-date={iso}\n                        tabIndex={iso === active ? 0 : -1}\n                        aria-label={formatDate(toLocalDate(iso), { locale, style: \"long\" })}\n                        aria-current={iso === today ? \"date\" : undefined}\n                        data-today={iso === today ? \"\" : undefined}\n                        data-outside={outside ? \"\" : undefined}\n                        data-weekend={dow === 0 || dow === 6 ? \"\" : undefined}\n                        data-selected={selected ? \"\" : undefined}\n                        data-in-range={inRange ? \"\" : undefined}\n                        disabled={disabled(iso)}\n                        className={s.day({ className: \"group\" })}\n                        onClick={() => {\n                          setFocused(iso);\n                          onSelect?.(iso);\n                        }}\n                        onMouseEnter={previewing ? () => setHover(iso) : undefined}\n                        onFocus={previewing ? () => setHover(iso) : undefined}\n                      >\n                        {Number(iso.slice(8))}\n                        {iso === today ? <span aria-hidden className={s.node()} /> : null}\n                      </button>\n                    </td>\n                  );\n                })}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={root} className={s.root({ className })}>\n      <div className={s.header()}>\n        <button\n          type=\"button\"\n          className={s.nav()}\n          aria-label={view === \"days\" ? labels.previousMonth : labels.previousYear}\n          disabled={view === \"days\" ? prevDisabled : Boolean(min && Number(month.slice(0, 4)) - 1 < Number(min.slice(0, 4)))}\n          onClick={() => setMonth(addMonths(month, view === \"days\" ? -1 : -12))}\n        >\n          <ChevronGlyph direction=\"left\" className=\"h-4 w-4\" />\n        </button>\n        <button type=\"button\" className={s.caption()} aria-expanded={view === \"months\"} aria-label={`${labels.chooseMonth}, ${fullTitle}`} onClick={() => setView(view === \"days\" ? \"months\" : \"days\")}>\n          <span aria-hidden>{view === \"days\" ? fullTitle : month.slice(0, 4)}</span>\n          <ChevronGlyph direction={view === \"months\" ? \"up\" : \"down\"} className=\"h-3.5 w-3.5 text-fg-secondary\" />\n        </button>\n        <button\n          type=\"button\"\n          className={s.nav()}\n          aria-label={view === \"days\" ? labels.nextMonth : labels.nextYear}\n          disabled={view === \"days\" ? nextDisabled : Boolean(max && Number(month.slice(0, 4)) + 1 > Number(max.slice(0, 4)))}\n          onClick={() => setMonth(addMonths(month, view === \"days\" ? 1 : 12))}\n        >\n          <ChevronGlyph direction=\"right\" className=\"h-4 w-4\" />\n        </button>\n      </div>\n      <span id={titleId} className={s.live()} aria-live=\"polite\">\n        {fullTitle}\n      </span>\n      {view === \"days\" ? (\n        <div className={s.months()}>{shown.map(renderMonth)}</div>\n      ) : (\n        <MonthPicker\n          locale={locale}\n          bare\n          year={Number(month.slice(0, 4))}\n          onYearChange={(y) => setMonth(`${y}-${month.slice(5, 7)}-01`)}\n          value={month.slice(0, 7)}\n          min={min?.slice(0, 7)}\n          max={max?.slice(0, 7)}\n          autoFocus\n          onValueChange={(m) => {\n            if (!m) return;\n            const target = `${m}-01`;\n            setMonth(target);\n            setView(\"days\");\n            moved.current = true;\n            setFocused(clampIso(addMonths(active, monthsBetween(monthOf(active), target)), min, max));\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "date-picker/date-field.tsx",
+      "content": "// Client. Two ways to give a memorable date — a birth date, an expiry — that a calendar would make slow to reach:\n// `DateField` (day · month · year typed in the locale's order, the next box focused once one is full; the web form's\n// `entry=\"parts\"`) and `DateWheel` (three wheels: the touch idiom, bounded by `min` / `max` — an age gate is\n// `max={latestBirthDate(18)}`). The value is `YYYY-MM-DD` either way, like the native `DateField` and `DateWheel`.\nimport * as React from \"react\";\n\nimport { useControllable } from \"../media\";\nimport { tv } from \"../tv\";\nimport { composeDate, DATE_PART_LENGTH, type DatePart, datePartsOrder, daysInMonth, isoOf, isoParts, monthNames, splitDate, todayIso, yearRange } from \"./parts\";\nimport { Wheel, WheelPicker } from \"./wheel\";\n\nexport const dateField = tv({\n  slots: {\n    root: \"flex flex-col gap-1.5 border-0 p-0\",\n    legend: \"mb-1.5 p-0 text-xs font-semibold text-fg-secondary\",\n    row: \"flex gap-2\",\n    part: \"flex flex-col gap-1 text-xs text-fg-secondary\",\n    input:\n      \"h-11 rounded-lg border border-border-default bg-surface-2 px-2 text-center text-base tabular-nums text-fg inset-shadow-well transition-[border-color,box-shadow] \" +\n      \"placeholder:text-fg-muted focus-visible:border-accent focus-visible:outline-hidden focus-visible:focus-ring-inset aria-invalid:border-danger disabled:cursor-not-allowed disabled:opacity-50\",\n    hint: \"text-xs text-fg-secondary\",\n    error: \"flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger\",\n  },\n});\n\nexport type DateFieldLabels = {\n  /** The name of the day (\"Day\"). */\n  day: string;\n  /** The name of the month (\"Month\"). */\n  month: string;\n  /** The name of the year (\"Year\"). */\n  year: string;\n};\n\nexport const dateFieldLabels: DateFieldLabels = { day: \"Day\", month: \"Month\", year: \"Year\" };\n\ntype Common = {\n  /** The visible label, passed translated (the group's name). */\n  label: string;\n  /** The BCP 47 locale: the order of the parts, the names of the months. */\n  locale: string;\n  /** A help text under the field (\"For example, 27 3 1990\"). */\n  hint?: string;\n  /** An error under the field: marks it invalid and is read with it. Replaces the hint. */\n  error?: string;\n  /** Not available. */\n  disabled?: boolean;\n  /** The name of a hidden input holding the value, for a plain `<form>` post. */\n  name?: string;\n  /** The names of the parts, passed translated; English by default. */\n  labels?: Partial<DateFieldLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nexport type DateFieldProps = Common & {\n  /** The date, `YYYY-MM-DD` (controlled); `\"\"` for none. What is typed comes back as it is, real date or not: the schema decides. */\n  value?: string;\n  /** The date at first, uncontrolled. */\n  defaultValue?: string;\n  /** Called on every key with the date typed so far (`\"\"` when the boxes are empty). */\n  onValueChange?: (value: string) => void;\n  /** Called when the focus leaves the field. */\n  onBlur?: () => void;\n  /** `bday` for a date of birth: the browser offers to fill it. */\n  autoComplete?: \"bday\" | \"off\";\n};\n\nfunction Caption({ id, hint, error }: { id: string; hint?: string; error?: string }) {\n  const s = dateField();\n  if (error)\n    return (\n      <p id={`${id}-error`} className={s.error()}>\n        {error}\n      </p>\n    );\n  return hint ? (\n    <p id={`${id}-hint`} className={s.hint()}>\n      {hint}\n    </p>\n  ) : null;\n}\n\n/** Day · month · year typed in the locale's order: numeric keyboards, the next box focused when one is full. */\nexport function DateField({ label, locale, hint, error, disabled, name, labels: given, className, value: valueProp, defaultValue = \"\", onValueChange, onBlur, autoComplete }: DateFieldProps) {\n  const labels = { ...dateFieldLabels, ...given };\n  const s = dateField();\n  const id = React.useId();\n  const [value, setValue] = useControllable<string>(valueProp, defaultValue, onValueChange);\n  const order = React.useMemo(() => datePartsOrder(locale), [locale]);\n  const [parts, setParts] = React.useState(() => splitDate(value));\n  // A value set from outside (a reset, a suggestion) replaces what is in the boxes.\n  if ((value ?? \"\") !== composeDate(parts) && composeDate(splitDate(value)) === (value ?? \"\")) setParts(splitDate(value));\n  const refs = { day: React.useRef<HTMLInputElement>(null), month: React.useRef<HTMLInputElement>(null), year: React.useRef<HTMLInputElement>(null) };\n  const describedBy = error ? `${id}-error` : hint ? `${id}-hint` : undefined;\n  return (\n    <fieldset className={s.root({ className })} aria-describedby={describedBy} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && onBlur?.()}>\n      <legend className={s.legend()}>{label}</legend>\n      <div className={s.row()}>\n        {order.map((part: DatePart) => (\n          <label key={part} className={s.part()}>\n            {labels[part]}\n            <input\n              ref={refs[part]}\n              inputMode=\"numeric\"\n              autoComplete={autoComplete === \"bday\" ? `bday-${part}` : \"off\"}\n              maxLength={DATE_PART_LENGTH[part]}\n              value={parts[part]}\n              disabled={disabled}\n              aria-invalid={error ? true : undefined}\n              className={s.input({ className: part === \"year\" ? \"w-20\" : \"w-14\" })}\n              onChange={(e) => {\n                const digits = e.target.value.replace(/\\D/g, \"\").slice(0, DATE_PART_LENGTH[part]);\n                const next = { ...parts, [part]: digits };\n                setParts(next);\n                setValue(composeDate(next));\n                const following = order[order.indexOf(part) + 1];\n                if (digits.length === DATE_PART_LENGTH[part] && following) refs[following].current?.focus();\n              }}\n            />\n          </label>\n        ))}\n      </div>\n      {name ? <input type=\"hidden\" name={name} value={value ?? \"\"} /> : null}\n      <Caption id={id} hint={hint} error={error} />\n    </fieldset>\n  );\n}\n\nexport type DateWheelProps = Common & {\n  /** The date, `YYYY-MM-DD` (controlled); `\"\"` or `null` for none (the wheels then rest on `defaultView`). */\n  value?: string | null;\n  /** The date at first, uncontrolled. */\n  defaultValue?: string | null;\n  /** Called with the date under the band, always a real date within `min` / `max`. */\n  onValueChange?: (value: string) => void;\n  /** The earliest date (ISO): the years start there, the days before it are refused. Default: 120 years ago. */\n  min?: string;\n  /** The latest date (ISO): `latestBirthDate(18)` for an age gate. Default: today. */\n  max?: string;\n  /** Where the wheels rest while there is no value. Default: `max` (a birth date: the youngest allowed). */\n  defaultView?: string;\n};\n\n/** Day, month and year as three wheels in the locale's order, bounded by `min` and `max`: always a real date. */\nexport function DateWheel({ label, locale, hint, error, disabled, name, labels: given, className, value: valueProp, defaultValue = null, onValueChange, min, max, defaultView }: DateWheelProps) {\n  const labels = { ...dateFieldLabels, ...given };\n  const id = React.useId();\n  const [value, setValue] = useControllable<string | null>(valueProp, defaultValue, (v) => v && onValueChange?.(v));\n  const today = todayIso();\n  const hi = max ?? today;\n  const lo = min ?? isoOf(Number(today.slice(0, 4)) - 120, 1, 1);\n  const shown = value || defaultView || hi;\n  const { year, month, day } = isoParts(shown);\n  const order = React.useMemo(() => datePartsOrder(locale), [locale]);\n  const months = React.useMemo(() => monthNames(locale, \"long\"), [locale]);\n  const number = React.useMemo(() => new Intl.NumberFormat(locale, { useGrouping: false }), [locale]);\n  const inBounds = (iso: string) => iso >= lo && iso <= hi;\n  const set = (y: number, m: number, d: number) => {\n    let next = isoOf(y, m, d);\n    if (next > hi) next = hi;\n    if (next < lo) next = lo;\n    setValue(next);\n  };\n  const lastDay = daysInMonth(year, month);\n  const columns: Record<DatePart, React.ReactNode> = {\n    day: (\n      <Wheel\n        key=\"day\"\n        label={labels.day}\n        disabled={disabled}\n        options={Array.from({ length: lastDay }, (_, i) => ({ value: String(i + 1), label: number.format(i + 1), disabled: !inBounds(isoOf(year, month, i + 1)) }))}\n        value={String(Math.min(day, lastDay))}\n        onValueChange={(v) => set(year, month, Number(v))}\n        className=\"min-w-14\"\n      />\n    ),\n    month: (\n      <Wheel\n        key=\"month\"\n        label={labels.month}\n        disabled={disabled}\n        options={months.map((n, i) => ({ value: String(i + 1), label: n, disabled: isoOf(year, i + 1, daysInMonth(year, i + 1)) < lo || isoOf(year, i + 1, 1) > hi }))}\n        value={String(month)}\n        onValueChange={(v) => set(year, Number(v), day)}\n        className=\"min-w-32 capitalize\"\n      />\n    ),\n    year: (\n      <Wheel\n        key=\"year\"\n        label={labels.year}\n        disabled={disabled}\n        options={yearRange(Number(hi.slice(0, 4)), Number(lo.slice(0, 4))).map((y) => ({ value: String(y), label: number.format(y) }))}\n        value={String(year)}\n        onValueChange={(v) => set(Number(v), month, day)}\n        className=\"min-w-20\"\n      />\n    ),\n  };\n  return (\n    <div className={dateField().root({ className })}>\n      <span aria-hidden className={dateField().legend()}>\n        {label}\n      </span>\n      <WheelPicker label={label} aria-describedby={error ? `${id}-error` : hint ? `${id}-hint` : undefined} invalid={Boolean(error)}>{order.map((part) => columns[part])}</WheelPicker>\n      {name ? <input type=\"hidden\" name={name} value={value ?? \"\"} /> : null}\n      <Caption id={id} hint={hint} error={error} />\n    </div>\n  );\n}\n"
+    },
+    {
       "path": "date-picker/date-picker.tsx",
-      "content": "// Client (a portal). A field-like button that opens the `Calendar` in a Popover (Radix: Escape closes, the focus\n// returns to the button). The value is an ISO date (`\"2026-10-11\"`) — the same string in a form, an address and an\n// API; the button reads it in the `locale`'s own format through `@krizaka/intl`.\nimport { formatDate, getDateTimeFormat } from \"@krizaka/intl\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CalendarGlyph, CloseGlyph } from \"../glyphs\";\nimport { useControllable } from \"../media\";\nimport { Popover } from \"../popover\";\nimport { Calendar, type CalendarLabels, type CalendarProps, type DateRange, type IsoDate, toLocalDate } from \"./calendar\";\n\nexport const datePicker = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-1.5\",\n    label: \"text-xs font-semibold text-fg-secondary\",\n    row: \"relative flex w-full\",\n    trigger:\n      \"flex h-11 w-full items-center gap-2.5 rounded-lg border border-border-default bg-surface-2 px-3 text-left text-sm text-fg \" +\n      \"transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"data-[placeholder]:text-fg-muted aria-invalid:border-danger disabled:cursor-not-allowed disabled:opacity-50 data-[clearable]:pr-10\",\n    icon: \"h-4 w-4 shrink-0 text-fg-secondary\",\n    clear:\n      \"absolute right-1.5 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    content: \"w-auto p-3\",\n    layout: \"flex flex-col gap-3 sm:flex-row\",\n    presets: \"flex flex-wrap gap-1.5 sm:w-36 sm:flex-col sm:flex-nowrap sm:border-r sm:border-border-default sm:pr-3\",\n    preset:\n      \"rounded-md px-2.5 py-1.5 text-left text-xs font-semibold text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-accent-soft aria-pressed:text-fg\",\n    hint: \"text-xs text-fg-secondary\",\n    error: \"flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger\",\n  },\n});\n\nexport type DatePickerLabels = CalendarLabels & {\n  /** The clear button (\"Clear date\"). */\n  clear: string;\n};\n\nexport const datePickerLabels: DatePickerLabels = { previousMonth: \"Previous month\", nextMonth: \"Next month\", clear: \"Clear date\" };\n\ntype Shared = Pick<CalendarProps, \"locale\" | \"min\" | \"max\" | \"isDateDisabled\" | \"weekStartsOn\" | \"today\"> & {\n  /** The visible label, passed translated (also the button's accessible name, with the value). */\n  label: string;\n  /** Shown while nothing is chosen (\"Pick a date\"), passed translated. */\n  placeholder?: string;\n  /** `short` · `medium` (default) · `long`: how the button writes the date. */\n  format?: \"short\" | \"medium\" | \"long\";\n  /** Adds a button that empties the value. */\n  clearable?: boolean;\n  /** A help text under the field. */\n  hint?: string;\n  /** An error under the field: marks it invalid and is read with it. */\n  error?: string;\n  /** Not available. */\n  disabled?: boolean;\n  /** The name of a hidden input holding the ISO value, for a plain `<form>` post. */\n  name?: string;\n  /** Opens the calendar at first (a story, a test). */\n  defaultOpen?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<DatePickerLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nexport type DatePickerProps = Shared & {\n  /** The chosen date, ISO (controlled); `null` for none. */\n  value?: IsoDate | null;\n  /** The chosen date at first, uncontrolled. */\n  defaultValue?: IsoDate | null;\n  /** Called with the date picked, or `null` when cleared. */\n  onValueChange?: (value: IsoDate | null) => void;\n};\n\nfunction Field({\n  shared,\n  text,\n  hasValue,\n  onClear,\n  hidden,\n  open,\n  setOpen,\n  children,\n}: {\n  shared: Shared;\n  text: string | null;\n  hasValue: boolean;\n  onClear: () => void;\n  hidden: string;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  children: React.ReactNode;\n}) {\n  const { label, placeholder, clearable, hint, error, disabled, name, className } = shared;\n  const labels = { ...datePickerLabels, ...shared.labels };\n  const s = datePicker();\n  const id = React.useId();\n  const describedBy = [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(\" \") || undefined;\n  return (\n    <div className={s.root({ className })}>\n      <label htmlFor={`${id}-trigger`} className={s.label()}>\n        {label}\n      </label>\n      <Popover.Root open={open} onOpenChange={setOpen}>\n        <div className={s.row()}>\n          <Popover.Trigger asChild>\n            <button\n              id={`${id}-trigger`}\n              type=\"button\"\n              aria-haspopup=\"dialog\"\n              aria-describedby={describedBy}\n              aria-invalid={error ? true : undefined}\n              disabled={disabled}\n              data-placeholder={hasValue ? undefined : \"\"}\n              data-clearable={clearable && hasValue ? \"\" : undefined}\n              className={s.trigger()}\n            >\n              <CalendarGlyph className={s.icon()} />\n              <span className=\"truncate\">{text ?? placeholder ?? \"\"}</span>\n            </button>\n          </Popover.Trigger>\n          {clearable && hasValue && !disabled ? (\n            <button type=\"button\" aria-label={labels.clear} className={s.clear()} onClick={onClear}>\n              <CloseGlyph className=\"h-4 w-4\" />\n            </button>\n          ) : null}\n        </div>\n        <Popover.Content align=\"start\" aria-label={label} className={s.content()}>\n          {children}\n        </Popover.Content>\n      </Popover.Root>\n      {name ? <input type=\"hidden\" name={name} value={hidden} /> : null}\n      {hint ? (\n        <p id={`${id}-hint`} className={s.hint()}>\n          {hint}\n        </p>\n      ) : null}\n      {error ? (\n        <p id={`${id}-error`} className={s.error()}>\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\n/** A date field: a button showing the date in the locale's format, a calendar in a popover, an ISO value. */\nexport function DatePicker({ value: valueProp, defaultValue = null, onValueChange, defaultOpen = false, ...shared }: DatePickerProps) {\n  const [value, setValue] = useControllable<IsoDate | null>(valueProp, defaultValue, onValueChange);\n  const [open, setOpen] = React.useState(defaultOpen);\n  const { locale, format = \"medium\" } = shared;\n  return (\n    <Field\n      shared={shared}\n      text={value ? formatDate(toLocalDate(value), { locale, style: format }) : null}\n      hasValue={Boolean(value)}\n      onClear={() => setValue(null)}\n      hidden={value ?? \"\"}\n      open={open}\n      setOpen={setOpen}\n    >\n      <Calendar\n        {...shared}\n        autoFocus\n        value={value}\n        onSelect={(date) => {\n          setValue(date);\n          setOpen(false);\n        }}\n      />\n    </Field>\n  );\n}\n\nexport type DateRangePreset = {\n  /** Its name, passed translated (\"Last 7 days\"). */\n  label: string;\n  /** The first day, ISO. */\n  start: IsoDate;\n  /** The last day, ISO. */\n  end: IsoDate;\n};\n\nexport type DateRangePickerProps = Shared & {\n  /** The chosen range (controlled); `null` for none. `end` is never `null` in a committed value. */\n  value?: { start: IsoDate; end: IsoDate } | null;\n  /** The range at first, uncontrolled. */\n  defaultValue?: { start: IsoDate; end: IsoDate } | null;\n  /** Called once both ends are chosen (or with `null` when cleared). */\n  onValueChange?: (value: { start: IsoDate; end: IsoDate } | null) => void;\n  /** Ranges one click away (\"Last 7 days\", \"This month\"), beside the calendar. */\n  presets?: readonly DateRangePreset[];\n};\n\n/** Formats a range as the locale writes one (\"Oct 1 – 11, 2026\"), through Intl's `formatRange` where available. */\nfunction formatRange(locale: string, start: IsoDate, end: IsoDate, style: \"short\" | \"medium\" | \"long\") {\n  const formatter = getDateTimeFormat(locale, { dateStyle: style }) as Intl.DateTimeFormat & { formatRange?: (a: Date, b: Date) => string };\n  return formatter.formatRange\n    ? formatter.formatRange(toLocalDate(start), toLocalDate(end))\n    : `${formatter.format(toLocalDate(start))} – ${formatter.format(toLocalDate(end))}`;\n}\n\n/** A period field: two clicks on one calendar (the days between tinted as you hover), optional presets. */\nexport function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange, presets, defaultOpen = false, ...shared }: DateRangePickerProps) {\n  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);\n  const [draft, setDraft] = React.useState<DateRange | null>(null);\n  const [open, setOpenState] = React.useState(defaultOpen);\n  const { locale, format = \"medium\" } = shared;\n  const s = datePicker();\n  const setOpen = (next: boolean) => {\n    setOpenState(next);\n    setDraft(null);\n  };\n  const shown: DateRange | null = draft ?? value;\n  const pick = (date: IsoDate) => {\n    if (!draft) setDraft({ start: date, end: null });\n    else {\n      const [start, end] = date < draft.start ? [date, draft.start] : [draft.start, date];\n      setValue({ start, end });\n      setOpen(false);\n    }\n  };\n  return (\n    <Field\n      shared={shared}\n      text={value ? formatRange(locale, value.start, value.end, format) : null}\n      hasValue={Boolean(value)}\n      onClear={() => setValue(null)}\n      hidden={value ? `${value.start}/${value.end}` : \"\"}\n      open={open}\n      setOpen={setOpen}\n    >\n      <div className={s.layout()}>\n        {presets?.length ? (\n          <div className={s.presets()}>\n            {presets.map((preset) => (\n              <button\n                key={preset.label}\n                type=\"button\"\n                aria-pressed={value?.start === preset.start && value?.end === preset.end}\n                className={s.preset()}\n                onClick={() => {\n                  setValue({ start: preset.start, end: preset.end });\n                  setOpen(false);\n                }}\n              >\n                {preset.label}\n              </button>\n            ))}\n          </div>\n        ) : null}\n        <Calendar {...shared} autoFocus range={shown} onSelect={pick} />\n      </div>\n    </Field>\n  );\n}\n"
+      "content": "// Client (a portal). A field-like button that opens the `Calendar` in a Popover (Radix: Escape closes, the focus\n// returns to the button). The value is an ISO date (`\"2026-10-11\"`) — the same string in a form, an address and an\n// API; the button reads it in the `locale`'s own format through `@krizaka/intl`.\nimport { formatDate, getDateTimeFormat } from \"@krizaka/intl\";\nimport * as React from \"react\";\n\nimport { CalendarGlyph, CloseGlyph } from \"../glyphs\";\nimport { useControllable } from \"../media\";\nimport { Popover } from \"../popover\";\nimport { tv } from \"../tv\";\nimport { Calendar, type CalendarLabels, calendarLabels, type CalendarProps, type DateRange, type IsoDate, toLocalDate } from \"./calendar\";\n\nexport const datePicker = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-1.5\",\n    label: \"text-xs font-semibold text-fg-secondary\",\n    row: \"relative flex w-full\",\n    // The field is a well (inset), the calendar opens on a raised, lit surface.\n    trigger:\n      \"group flex h-11 w-full items-center gap-2.5 rounded-lg border border-border-default bg-surface-2 px-3 text-left text-sm text-fg inset-shadow-well \" +\n      \"transition-[border-color,box-shadow] hover:border-border-strong focus-visible:border-accent focus-visible:outline-hidden focus-visible:focus-ring-inset \" +\n      \"data-[state=open]:border-accent data-[placeholder]:text-fg-muted aria-invalid:border-danger disabled:cursor-not-allowed disabled:opacity-50 data-[clearable]:pr-10\",\n    icon: \"h-4 w-4 shrink-0 text-fg-secondary transition-colors group-data-[state=open]:text-fg-accent\",\n    clear:\n      \"absolute right-1.5 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring\",\n    content: \"w-auto rounded-2xl bg-sheen p-4 shadow-floating inset-shadow-edge\",\n    layout: \"flex flex-col gap-4 sm:flex-row\",\n    presets: \"flex gap-1.5 overflow-x-auto pb-1 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-border-subtle sm:pb-0 sm:pr-4\",\n    preset:\n      \"inline-flex shrink-0 items-center gap-2.5 whitespace-nowrap rounded-lg px-2.5 py-2 text-left text-xs font-semibold text-fg-secondary transition-colors \" +\n      \"hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring aria-pressed:bg-accent-soft aria-pressed:text-fg\",\n    presetNode: \"node shrink-0 group-aria-pressed:node-lit\",\n    hint: \"text-xs text-fg-secondary\",\n    error: \"flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger\",\n  },\n});\n\nexport type DatePickerLabels = CalendarLabels & {\n  /** The clear button (\"Clear date\"). */\n  clear: string;\n};\n\nexport const datePickerLabels: DatePickerLabels = { ...calendarLabels, clear: \"Clear date\" };\n\ntype Shared = Pick<CalendarProps, \"locale\" | \"min\" | \"max\" | \"isDateDisabled\" | \"weekStartsOn\" | \"today\"> & {\n  /** The visible label, passed translated (also the button's accessible name, with the value). */\n  label: string;\n  /** Shown while nothing is chosen (\"Pick a date\"), passed translated. */\n  placeholder?: string;\n  /** `short` · `medium` (default) · `long`: how the button writes the date. */\n  format?: \"short\" | \"medium\" | \"long\";\n  /** Adds a button that empties the value. */\n  clearable?: boolean;\n  /** A help text under the field. */\n  hint?: string;\n  /** An error under the field: marks it invalid and is read with it. */\n  error?: string;\n  /** Not available. */\n  disabled?: boolean;\n  /** The name of a hidden input holding the ISO value, for a plain `<form>` post. */\n  name?: string;\n  /** Opens the calendar at first (a story, a test). */\n  defaultOpen?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<DatePickerLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nexport type DatePickerProps = Shared & {\n  /** The chosen date, ISO (controlled); `null` for none. */\n  value?: IsoDate | null;\n  /** The chosen date at first, uncontrolled. */\n  defaultValue?: IsoDate | null;\n  /** Called with the date picked, or `null` when cleared. */\n  onValueChange?: (value: IsoDate | null) => void;\n};\n\nfunction Field({\n  shared,\n  text,\n  hasValue,\n  onClear,\n  hidden,\n  open,\n  setOpen,\n  children,\n}: {\n  shared: Shared;\n  text: string | null;\n  hasValue: boolean;\n  onClear: () => void;\n  hidden: string;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  children: React.ReactNode;\n}) {\n  const { label, placeholder, clearable, hint, error, disabled, name, className } = shared;\n  const labels = { ...datePickerLabels, ...shared.labels };\n  const s = datePicker();\n  const id = React.useId();\n  const describedBy = [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(\" \") || undefined;\n  return (\n    <div className={s.root({ className })}>\n      <label htmlFor={`${id}-trigger`} className={s.label()}>\n        {label}\n      </label>\n      <Popover.Root open={open} onOpenChange={setOpen}>\n        <div className={s.row()}>\n          <Popover.Trigger asChild>\n            <button\n              id={`${id}-trigger`}\n              type=\"button\"\n              aria-haspopup=\"dialog\"\n              aria-describedby={describedBy}\n              aria-invalid={error ? true : undefined}\n              disabled={disabled}\n              data-placeholder={hasValue ? undefined : \"\"}\n              data-clearable={clearable && hasValue ? \"\" : undefined}\n              className={s.trigger()}\n            >\n              <CalendarGlyph className={s.icon()} />\n              <span className=\"truncate\">{text ?? placeholder ?? \"\"}</span>\n            </button>\n          </Popover.Trigger>\n          {clearable && hasValue && !disabled ? (\n            <button type=\"button\" aria-label={labels.clear} className={s.clear()} onClick={onClear}>\n              <CloseGlyph className=\"h-4 w-4\" />\n            </button>\n          ) : null}\n        </div>\n        <Popover.Content align=\"start\" aria-label={label} className={s.content()}>\n          {children}\n        </Popover.Content>\n      </Popover.Root>\n      {name ? <input type=\"hidden\" name={name} value={hidden} /> : null}\n      {hint ? (\n        <p id={`${id}-hint`} className={s.hint()}>\n          {hint}\n        </p>\n      ) : null}\n      {error ? (\n        <p id={`${id}-error`} className={s.error()}>\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\n/** A date field: a button showing the date in the locale's format, a calendar in a popover, an ISO value. */\nexport function DatePicker({ value: valueProp, defaultValue = null, onValueChange, defaultOpen = false, ...shared }: DatePickerProps) {\n  const [value, setValue] = useControllable<IsoDate | null>(valueProp, defaultValue, onValueChange);\n  const [open, setOpen] = React.useState(defaultOpen);\n  const { locale, format = \"medium\" } = shared;\n  return (\n    <Field\n      shared={shared}\n      text={value ? formatDate(toLocalDate(value), { locale, style: format }) : null}\n      hasValue={Boolean(value)}\n      onClear={() => setValue(null)}\n      hidden={value ?? \"\"}\n      open={open}\n      setOpen={setOpen}\n    >\n      <Calendar\n        {...shared}\n        autoFocus\n        value={value}\n        onSelect={(date) => {\n          setValue(date);\n          setOpen(false);\n        }}\n      />\n    </Field>\n  );\n}\n\nexport type DateRangePreset = {\n  /** Its name, passed translated (\"Last 7 days\"). */\n  label: string;\n  /** The first day, ISO. */\n  start: IsoDate;\n  /** The last day, ISO. */\n  end: IsoDate;\n};\n\nexport type DateRangePickerProps = Shared & {\n  /** The chosen range (controlled); `null` for none. `end` is never `null` in a committed value. */\n  value?: { start: IsoDate; end: IsoDate } | null;\n  /** The range at first, uncontrolled. */\n  defaultValue?: { start: IsoDate; end: IsoDate } | null;\n  /** Called once both ends are chosen (or with `null` when cleared). */\n  onValueChange?: (value: { start: IsoDate; end: IsoDate } | null) => void;\n  /** Ranges one click away (\"Last 7 days\", \"This month\"), beside the calendar. */\n  presets?: readonly DateRangePreset[];\n  /** Two months side by side (default, from a phone's width up) or one. */\n  numberOfMonths?: 1 | 2;\n};\n\n/** Formats a range as the locale writes one (\"Oct 1 – 11, 2026\"), through Intl's `formatRange` where available. */\nfunction formatRange(locale: string, start: IsoDate, end: IsoDate, style: \"short\" | \"medium\" | \"long\") {\n  const formatter = getDateTimeFormat(locale, { dateStyle: style }) as Intl.DateTimeFormat & { formatRange?: (a: Date, b: Date) => string };\n  return formatter.formatRange\n    ? formatter.formatRange(toLocalDate(start), toLocalDate(end))\n    : `${formatter.format(toLocalDate(start))} – ${formatter.format(toLocalDate(end))}`;\n}\n\n/** A period field: two clicks on one calendar (the days between tinted as you hover), optional presets. */\nexport function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange, presets, numberOfMonths = 2, defaultOpen = false, ...shared }: DateRangePickerProps) {\n  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);\n  const [draft, setDraft] = React.useState<DateRange | null>(null);\n  const [open, setOpenState] = React.useState(defaultOpen);\n  const { locale, format = \"medium\" } = shared;\n  const s = datePicker();\n  const setOpen = (next: boolean) => {\n    setOpenState(next);\n    setDraft(null);\n  };\n  const shown: DateRange | null = draft ?? value;\n  const pick = (date: IsoDate) => {\n    if (!draft) setDraft({ start: date, end: null });\n    else {\n      const [start, end] = date < draft.start ? [date, draft.start] : [draft.start, date];\n      setValue({ start, end });\n      setOpen(false);\n    }\n  };\n  return (\n    <Field\n      shared={shared}\n      text={value ? formatRange(locale, value.start, value.end, format) : null}\n      hasValue={Boolean(value)}\n      onClear={() => setValue(null)}\n      hidden={value ? `${value.start}/${value.end}` : \"\"}\n      open={open}\n      setOpen={setOpen}\n    >\n      <div className={s.layout()}>\n        {presets?.length ? (\n          <div className={s.presets()}>\n            {presets.map((preset) => (\n              <button\n                key={preset.label}\n                type=\"button\"\n                aria-pressed={value?.start === preset.start && value?.end === preset.end}\n                className={s.preset({ className: \"group\" })}\n                onClick={() => {\n                  setValue({ start: preset.start, end: preset.end });\n                  setOpen(false);\n                }}\n              >\n                <span aria-hidden className={s.presetNode()} />\n                {preset.label}\n              </button>\n            ))}\n          </div>\n        ) : null}\n        <Calendar {...shared} autoFocus range={shown} onSelect={pick} numberOfMonths={numberOfMonths} />\n      </div>\n    </Field>\n  );\n}\n"
+    },
+    {
+      "path": "date-picker/day-strip.tsx",
+      "content": "// Client. The days ahead as a strip that scrolls sideways — the agenda of the next two weeks, a delivery day, a\n// session. A radio group: one tab stop, the arrows move and pick (Home / End: the first and last day), each day named by\n// its full date; a marked day (it has something) says so in its name. The buttons at the ends page by a screen.\nimport { formatDate, getDateTimeFormat } from \"@krizaka/intl\";\nimport * as React from \"react\";\n\nimport { ChevronGlyph } from \"../glyphs\";\nimport { useControllable, usePrefersReducedMotion } from \"../media\";\nimport { tv } from \"../tv\";\nimport { addDays, type IsoDate, toIsoDate, toLocalDate } from \"./calendar\";\n\nexport const dayStrip = tv({\n  slots: {\n    root: \"flex w-full min-w-0 flex-col gap-2\",\n    header: \"flex items-center justify-between gap-2\",\n    title: \"text-sm font-semibold capitalize text-fg\",\n    navs: \"flex gap-1.5\",\n    nav:\n      \"inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-subtle bg-surface-2 bg-sheen text-fg-secondary inset-shadow-edge \" +\n      \"transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-35\",\n    track:\n      \"-mx-1 flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth px-1 py-1.5 [scrollbar-width:none] motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden\",\n    day:\n      \"relative flex h-[4.5rem] w-14 shrink-0 snap-start flex-col items-center justify-center gap-0.5 rounded-2xl border border-border-default bg-surface-2 bg-sheen text-fg inset-shadow-edge \" +\n      \"transition-[background-color,border-color,box-shadow,transform] duration-150 hover:border-border-strong active:scale-95 \" +\n      \"motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-hidden focus-visible:focus-ring \" +\n      \"aria-checked:border-transparent aria-checked:bg-accent aria-checked:bg-fill-shade aria-checked:text-on-accent aria-checked:shadow-glow aria-checked:inset-shadow-edge-fill \" +\n      \"disabled:cursor-not-allowed disabled:border-dashed disabled:bg-transparent disabled:bg-none disabled:text-fg-muted disabled:shadow-none\",\n    weekday: \"text-[11px] font-semibold uppercase tracking-wider text-fg-secondary group-aria-checked:text-on-accent group-disabled:text-fg-muted\",\n    number: \"text-lg font-semibold tabular-nums leading-none\",\n    // Today: the node of the marks above the number; a marked day: a dot under it.\n    node: \"absolute top-1.5 h-1 w-1 rotate-45 rounded-[1px] bg-accent group-aria-checked:bg-on-accent\",\n    mark: \"h-1.5 w-1.5 rounded-full bg-fg-secondary group-aria-checked:bg-on-accent\",\n    noMark: \"h-1.5 w-1.5\",\n  },\n});\n\nexport type DayStripLabels = {\n  /** The button that shows the earlier days (\"Earlier days\"). */\n  previous: string;\n  /** The button that shows the later days (\"Later days\"). */\n  next: string;\n  /** Added to the name of a marked day (\"has events\"). */\n  marked: string;\n};\n\nexport const dayStripLabels: DayStripLabels = { previous: \"Earlier days\", next: \"Later days\", marked: \"has events\" };\n\nexport type DayStripProps = {\n  /** The group's accessible name (\"Delivery day\"), passed translated. */\n  label: string;\n  /** The BCP 47 locale of the names and the dates: always explicit. */\n  locale: string;\n  /** The chosen day, ISO (controlled); `null` for none. */\n  value?: IsoDate | null;\n  /** The chosen day at first, uncontrolled. */\n  defaultValue?: IsoDate | null;\n  /** Called with the day picked. */\n  onValueChange?: (value: IsoDate) => void;\n  /** The first day of the strip. Default: today. */\n  start?: IsoDate;\n  /** How many days. Default 14. */\n  days?: number;\n  /** Refuses some days (closed, full): drawn dashed, skipped by the arrows. */\n  isDateDisabled?: (date: IsoDate) => boolean;\n  /** Marks the days that have something (a session, an event): a dot, and `labels.marked` in their name. */\n  isDateMarked?: (date: IsoDate) => boolean;\n  /** Today (marked by the node): inject it for a stable render or a test. Default: the device's date. */\n  today?: IsoDate;\n  /** Shows the month of the chosen day (or of the first) and the page buttons above the strip. */\n  showHeader?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<DayStripLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** The days ahead in a row that scrolls sideways: one picked, today and the marked days shown. */\nexport function DayStrip({ label, locale, value: valueProp, defaultValue = null, onValueChange, start, days = 14, isDateDisabled, isDateMarked, today: todayProp, showHeader = true, labels: given, className }: DayStripProps) {\n  const labels = { ...dayStripLabels, ...given };\n  const s = dayStrip();\n  const today = todayProp ?? toIsoDate(new Date());\n  const first = start ?? today;\n  const list = React.useMemo(() => Array.from({ length: days }, (_, i) => addDays(first, i)), [first, days]);\n  const [value, setValue] = useControllable<IsoDate | null>(valueProp, defaultValue, (v) => v && onValueChange?.(v));\n  const enabled = list.filter((d) => !isDateDisabled?.(d));\n  const tabStop = value && enabled.includes(value) ? value : enabled[0];\n  const track = React.useRef<HTMLDivElement>(null);\n  const reduce = usePrefersReducedMotion();\n  const weekday = getDateTimeFormat(locale, { weekday: \"short\" });\n  const monthTitle = getDateTimeFormat(locale, { month: \"long\", year: \"numeric\" }).format(toLocalDate(value ?? first));\n\n  const reveal = (iso: IsoDate, focus: boolean) => {\n    const el = track.current?.querySelector<HTMLButtonElement>(`[data-date=\"${iso}\"]`);\n    if (!el) return;\n    if (focus) el.focus({ preventScroll: true });\n    el.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\", behavior: reduce ? \"auto\" : \"smooth\" });\n  };\n  // The chosen day is in view when the strip appears.\n  React.useEffect(() => {\n    if (value) track.current?.querySelector<HTMLElement>(`[data-date=\"${value}\"]`)?.scrollIntoView?.({ block: \"nearest\", inline: \"center\" });\n    // Only once: afterwards the person scrolls.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const i = enabled.indexOf(tabStop ?? \"\");\n    const moves: Record<string, number> = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1, ArrowUp: i - 1, Home: 0, End: enabled.length - 1 };\n    const to = moves[event.key];\n    if (to === undefined) return;\n    event.preventDefault();\n    const next = enabled[Math.min(enabled.length - 1, Math.max(0, to))];\n    if (!next) return;\n    setValue(next);\n    reveal(next, true);\n  };\n  const page = (by: number) => {\n    const el = track.current;\n    if (!el) return;\n    el.scrollBy?.({ left: by * el.clientWidth * 0.8, behavior: reduce ? \"auto\" : \"smooth\" });\n  };\n\n  return (\n    <div className={s.root({ className })}>\n      {showHeader ? (\n        <div className={s.header()}>\n          <span className={s.title()} aria-hidden>\n            {monthTitle}\n          </span>\n          <span className={s.navs()}>\n            <button type=\"button\" className={s.nav()} aria-label={labels.previous} onClick={() => page(-1)}>\n              <ChevronGlyph direction=\"left\" className=\"h-4 w-4\" />\n            </button>\n            <button type=\"button\" className={s.nav()} aria-label={labels.next} onClick={() => page(1)}>\n              <ChevronGlyph direction=\"right\" className=\"h-4 w-4\" />\n            </button>\n          </span>\n        </div>\n      ) : null}\n      <div ref={track} role=\"radiogroup\" aria-label={label} className={s.track()} onKeyDown={onKeyDown}>\n        {list.map((iso) => {\n          const marked = Boolean(isDateMarked?.(iso));\n          const name = formatDate(toLocalDate(iso), { locale, style: \"long\" });\n          return (\n            <button\n              key={iso}\n              type=\"button\"\n              role=\"radio\"\n              data-date={iso}\n              aria-checked={iso === value}\n              aria-current={iso === today ? \"date\" : undefined}\n              aria-label={marked ? `${name}, ${labels.marked}` : name}\n              tabIndex={iso === tabStop ? 0 : -1}\n              disabled={Boolean(isDateDisabled?.(iso))}\n              className={s.day({ className: \"group\" })}\n              onClick={() => setValue(iso)}\n            >\n              {iso === today ? <span aria-hidden className={s.node()} /> : null}\n              <span aria-hidden className={s.weekday()}>\n                {weekday.format(toLocalDate(iso)).replace(/\\.$/, \"\")}\n              </span>\n              <span aria-hidden className={s.number()}>\n                {Number(iso.slice(8))}\n              </span>\n              <span aria-hidden className={marked ? s.mark() : s.noMark()} />\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
     },
     {
       "path": "date-picker/index.ts",
-      "content": "/** @krizaka/ui/date-picker — `DatePicker`, `DateRangePicker`, `Calendar` (ISO dates, the locale's names through @krizaka/intl), the date helpers and slots. Client (\"use client\"). */\nexport {\n  addDays,\n  addMonths,\n  Calendar,\n  calendar,\n  type CalendarLabels,\n  calendarLabels,\n  type CalendarProps,\n  type DateRange,\n  type IsoDate,\n  toIsoDate,\n  toLocalDate,\n  weekStartOf,\n} from \"./calendar\";\nexport {\n  DatePicker,\n  datePicker,\n  type DatePickerLabels,\n  datePickerLabels,\n  type DatePickerProps,\n  DateRangePicker,\n  type DateRangePickerProps,\n  type DateRangePreset,\n} from \"./date-picker\";\n"
+      "content": "/**\n * @krizaka/ui/date-picker — dates and times, ISO values the form, the address and the API share, the locale's words\n * through @krizaka/intl: `DatePicker`, `DateRangePicker` (presets, two months), `Calendar` (inline), `MonthPicker`,\n * `DayStrip`, `WheelPicker` + `Wheel`, `TimePicker` (wheels or slots), `DateField` (typed), `DateWheel`, and the date\n * and time helpers. Client (\"use client\").\n */\nexport {\n  addDays,\n  addMonths,\n  Calendar,\n  calendar,\n  type CalendarLabels,\n  calendarLabels,\n  type CalendarProps,\n  type DateRange,\n  type IsoDate,\n  toIsoDate,\n  toLocalDate,\n  weekStartOf,\n} from \"./calendar\";\nexport { DateField, dateField, type DateFieldLabels, dateFieldLabels, type DateFieldProps, DateWheel, type DateWheelProps } from \"./date-field\";\nexport {\n  DatePicker,\n  datePicker,\n  type DatePickerLabels,\n  datePickerLabels,\n  type DatePickerProps,\n  DateRangePicker,\n  type DateRangePickerProps,\n  type DateRangePreset,\n} from \"./date-picker\";\nexport { DayStrip, dayStrip, type DayStripLabels, dayStripLabels, type DayStripProps } from \"./day-strip\";\nexport { type IsoMonth, MonthPicker, monthPicker, type MonthPickerLabels, monthPickerLabels, type MonthPickerProps } from \"./month-picker\";\nexport {\n  ageOn,\n  composeDate,\n  type DatePart,\n  datePartsOrder,\n  dayPeriods,\n  daysInMonth,\n  formatTime,\n  isoOf,\n  isRealDate,\n  latestBirthDate,\n  minutesToTime,\n  monthNames,\n  timeSlots,\n  timeToMinutes,\n  type TimeValue,\n  todayIso,\n  uses12Hours,\n  yearRange,\n} from \"./parts\";\nexport { TimePicker, timePicker, type TimePickerLabels, timePickerLabels, type TimePickerProps } from \"./time-picker\";\nexport { Wheel, wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps } from \"./wheel\";\n"
     },
     {
       "path": "date-picker/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Date picker\",\n  summary: \"A date or a period chosen on a calendar — ISO values (`2026-10-11`) the form, the address and the API share, read in the locale's own words through @krizaka/intl.\",\n  status: \"beta\",\n  category: \"forms\",\n  platforms: \"both\",\n  whenToUse: [\n    \"To schedule something on a day: a publication, an auction's end, a reminder.\",\n    \"With `DateRangePicker` for a period: an earnings report, an audit log, a campaign — with presets.\",\n    \"With `Calendar` alone when the month itself is the interface (availability, a booking).\",\n  ],\n  whenNotToUse: [\n    { when: \"For a date of birth or a date far away: three fields (day, month, year) are faster than paging through years.\", use: \"field\" },\n    { when: \"For a relative choice (“last 7 days”, “this month”) without a calendar: chips.\", use: \"chip\" },\n  ],\n  bestPractices: [\n    \"Always pass the person's `locale`: month and day names, the first day of the week and the date's format follow it.\",\n    \"Keep the value as an ISO date in state and in the address; format it only for display.\",\n    \"Bound the choice with `min` / `max` and `isDateDisabled` rather than refusing after the fact.\",\n    \"Offer presets on a period picker: most people want “Last 30 days”, not two clicks.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Arrow keys\", action: \"Move by a day or a week.\" },\n      { keys: \"Home / End\", action: \"First or last day of the week.\" },\n      { keys: \"Page Up / Page Down\", action: \"Previous or next month (with Shift: year).\" },\n      { keys: \"Enter / Space\", action: \"Pick the focused day.\" },\n      { keys: \"Esc\", action: \"Close the calendar and return to the field.\" },\n    ],\n    notes: [\n      \"The APG date picker: the month is a `grid` labelled by its title, one day in the tab order, each day named by its full date.\",\n      \"Today carries `aria-current=\\\"date\\\"`; chosen days `aria-selected`; unavailable days are disabled buttons.\",\n      \"The month's title is a polite live region: a change of month is heard.\",\n      \"The field is a button named by its `<label>`, with `aria-haspopup=\\\"dialog\\\"`; Radix returns the focus to it on close.\",\n    ],\n  },\n  related: [\"field\", \"popover\", \"filter-bar\"],\n  web: {\n    imports: [\"DatePicker\", \"DateRangePicker\", \"Calendar\"],\n    examples: [\n      { name: \"schedule\", title: \"Schedule\", description: \"A publication date, from today on, written the way the locale writes it.\" },\n      { name: \"open\", title: \"Calendar open\", description: \"The popover open on the month: today marked, the chosen day filled.\" },\n      { name: \"range\", title: \"Period with presets\", description: \"`DateRangePicker` for an earnings report: presets beside the calendar.\" },\n      { name: \"french\", title: \"In French\", description: \"`locale=\\\"fr-CA\\\"`: the names, the order and the first day of the week follow.\" },\n      { name: \"calendar\", title: \"Calendar alone\", description: \"`Calendar` inline: the month is the interface, weekends unavailable.\" },\n    ],\n  },\n  native: {\n    imports: [\"DateField\", \"datePartsOrder\", \"composeDate\"],\n    differences: [\n      \"`DateField` is a date typed as day, month and year (a memorable date: a birth date, an expiry), not a calendar: numeric keypads, the boxes in the locale's order, the next one focused when a box is full.\",\n      \"The value is a `YYYY-MM-DD` string of what was typed (`\\\"\\\"` when empty), real date or not: the form's schema decides (and the server again). No native module.\",\n    ],\n    examples: [\n      { name: \"birth-date\", title: \"Date of birth\", description: \"Day, month and year with `autoComplete=\\\"bday\\\"`, and the error of an under-18 date.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Date picker\",\n  summary:\n    \"Dates and times chosen the way the task asks — a calendar, a period with presets, a strip of days, wheels, time slots, a month, a date of birth — as ISO values (`2026-10-11`, `2026-10`, `18:30`) the form, the address and the API share, in the locale's own words.\",\n  status: \"beta\",\n  category: \"forms\",\n  platforms: \"both\",\n  whenToUse: [\n    \"`DatePicker`: a day near today in a form — a publication, an auction's end, a reminder.\",\n    \"`DateRangePicker`: a period — an earnings report, an audit log — with presets and two months side by side.\",\n    \"`Calendar` inline (`variant=\\\"card\\\"`): when the month itself is the interface (availability, a booking).\",\n    \"`DayStrip`: the next days in a row (a delivery day, a session, an agenda) — one thumb away on a phone.\",\n    \"`TimePicker`: wheels to set a time (a reminder); `variant=\\\"slots\\\"` to book one among the free times.\",\n    \"`MonthPicker`: a month of a year (a billing month, a card's expiry, a report).\",\n    \"`DateField` (typed) or `DateWheel` (wheels): a memorable date far away — a date of birth with an age gate.\",\n  ],\n  whenNotToUse: [\n    { when: \"For a date of birth or any date years away: a calendar makes it slow — use `DateField` or `DateWheel`.\", use: \"field\" },\n    { when: \"For a relative choice (“last 7 days”, “this month”) without a calendar: chips.\", use: \"chip\" },\n  ],\n  bestPractices: [\n    \"Always pass the person's `locale`: names, the first day of the week, the order of day · month · year and 12/24 hours follow it.\",\n    \"Keep values as ISO strings in state and in the address (`YYYY-MM-DD`, `YYYY-MM`, `HH:mm`); format them only for display.\",\n    \"Bound the choice with `min` / `max`, `isDateDisabled` or `isTimeDisabled` rather than refusing after the fact — an age gate is `max={latestBirthDate(18)}`.\",\n    \"Offer presets on a period picker: most people want “Last 30 days”, not two clicks.\",\n    \"Mark the days that have something (`isDateMarked`) on a strip: the dot is read in the day's name too.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Arrow keys\", action: \"Calendar: move by a day or a week. Month picker: by a month or a row. Day strip and slots: move and pick.\" },\n      { keys: \"Home / End\", action: \"First or last day of the week (calendar), first or last item (strip, slots, wheel).\" },\n      { keys: \"Page Up / Page Down\", action: \"Calendar: previous or next month (with Shift: year). Month picker: year. Wheel: by five values.\" },\n      { keys: \"Up / Down\", action: \"Wheel: the previous or next value.\" },\n      { keys: \"Enter / Space\", action: \"Pick the focused day or month.\" },\n      { keys: \"Esc\", action: \"Close the calendar and return to the field.\" },\n    ],\n    notes: [\n      \"The APG date picker: the month is a `grid` labelled by its month, one day in the tab order, each day named by its full date; today carries `aria-current=\\\"date\\\"`, chosen days `aria-selected`, unavailable days are disabled.\",\n      \"The month's title is a button that opens the months of the year (`aria-expanded`); a change of month is announced by a polite live region.\",\n      \"A wheel is a `spinbutton` (`aria-valuetext` reads the value as words); on React Native an adjustable control — swipe up or down with VoiceOver or TalkBack.\",\n      \"The day strip and the time slots are radio groups: one tab stop, the arrows move and pick, taken or closed items are disabled and skipped.\",\n      \"`DateField` is a fieldset named by its legend, each box named by its part; the error is read with the field (`aria-describedby`).\",\n      \"Nothing moves under reduced motion: the month's slide stops; the wheel's curve is tied to the scroll, not to time.\",\n    ],\n  },\n  related: [\"field\", \"popover\", \"filter-bar\", \"form\"],\n  web: {\n    imports: [\"DatePicker\", \"DateRangePicker\", \"Calendar\", \"MonthPicker\", \"DayStrip\", \"WheelPicker\", \"Wheel\", \"TimePicker\", \"DateField\", \"DateWheel\", \"latestBirthDate\", \"timeSlots\"],\n    examples: [\n      { name: \"schedule\", title: \"Schedule\", description: \"A publication date, from today on, written the way the locale writes it.\" },\n      { name: \"open\", title: \"Calendar open\", description: \"The popover open on the month: today's node, the chosen day lit.\" },\n      { name: \"range\", title: \"Period with presets\", description: \"`DateRangePicker` for an earnings report: presets beside two months, the period as one band.\" },\n      { name: \"french\", title: \"In French\", description: \"`locale=\\\"fr-CA\\\"`: the names, the order and the first day of the week follow.\" },\n      { name: \"calendar\", title: \"Inline calendar\", description: \"`Calendar variant=\\\"card\\\"`: the month is the interface, weekends unavailable; its title opens the months.\" },\n      { name: \"month-year\", title: \"Month and year\", description: \"`MonthPicker`: a billing month, nothing later than this one.\" },\n      { name: \"day-strip\", title: \"Day strip\", description: \"`DayStrip`: the next two weeks in a row, closed days dashed, the days with a session marked.\" },\n      { name: \"wheel\", title: \"Wheel\", description: \"`WheelPicker` + `Wheel`: any short list turned by the thumb or the arrows — a party size.\" },\n      { name: \"time-wheel\", title: \"Time, wheels\", description: \"`TimePicker`: hours, minutes by 5 and the period of a 12-hour locale; the value is `HH:mm`.\" },\n      { name: \"time-slots\", title: \"Time, slots\", description: \"`TimePicker variant=\\\"slots\\\"`: the free times of an agenda by part of the day, taken ones struck through.\" },\n      { name: \"birth-date\", title: \"Date of birth, typed\", description: \"`DateField`: day · month · year in the locale's order, autofilled, an under-18 date refused.\" },\n      { name: \"birth-date-wheel\", title: \"Date of birth, wheels\", description: \"`DateWheel` with `max` at the 18th birthday: an under-18 date cannot be chosen.\" },\n    ],\n  },\n  native: {\n    imports: [\"Calendar\", \"MonthPicker\", \"DayStrip\", \"TimePicker\", \"DateWheel\", \"WheelPicker\", \"Wheel\", \"DateField\", \"latestBirthDate\", \"timeSlots\"],\n    differences: [\n      \"No popover field (`DatePicker`, `DateRangePicker`): on a phone, the `Calendar`, the `DayStrip` or the wheels sit in the screen or in a `Sheet`.\",\n      \"`DateField` is typed (day · month · year, numeric keypads); `DateWheel` is the same date as three wheels — the native form's `DateField` uses the wheels.\",\n      \"Each value a wheel passes, each day or slot pressed plays a `selection` haptic — when the app passes `haptics` to the `ThemeProvider` (expo-haptics): the platform has no native module.\",\n      \"A wheel is an adjustable control for VoiceOver and TalkBack (swipe up or down), named by its `label`, its value read as words.\",\n    ],\n    examples: [\n      { name: \"birth-date\", title: \"Date of birth, typed\", description: \"Day, month and year with `autoComplete=\\\"bday\\\"`, and the error of an under-18 date.\" },\n      { name: \"birth-date-wheel\", title: \"Date of birth, wheels\", description: \"`DateWheel` ending at the 18th birthday: an under-18 date cannot be chosen.\" },\n      { name: \"calendar\", title: \"Calendar\", description: \"A month to book a day: 44-pt days, today's node, the past unavailable.\" },\n      { name: \"day-strip\", title: \"Day strip\", description: \"The days ahead swiped sideways, closed days dashed, marked days with a dot.\" },\n      { name: \"time-wheel\", title: \"Time, wheels\", description: \"Hours, minutes by 5 and the period; the value is `HH:mm`.\" },\n      { name: \"time-slots\", title: \"Time, slots\", description: \"The free times of an agenda as buttons, taken ones dashed.\" },\n      { name: \"month-year\", title: \"Month and year\", description: \"`MonthPicker`: the twelve months, nothing later than this one.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "date-picker/month-picker.tsx",
+      "content": "// Client. The twelve months of a year as a grid (three columns): the arrows walk them (Up / Down by a row), Page Up /\n// Page Down change the year, Enter or Space picks. The value is `YYYY-MM` — a billing month, a card's expiry, a report.\n// The calendar's title opens it, so a year away is two clicks, not twelve pages.\nimport * as React from \"react\";\n\nimport { ChevronGlyph } from \"../glyphs\";\nimport { tv } from \"../tv\";\nimport { monthNames } from \"./parts\";\n\n/** A calendar month, `YYYY-MM`. */\nexport type IsoMonth = string;\n\nexport const monthPicker = tv({\n  slots: {\n    root: \"inline-flex select-none flex-col gap-3 text-sm text-fg\",\n    header: \"flex items-center justify-between gap-2\",\n    year: \"text-sm font-semibold tabular-nums\",\n    nav:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-2 bg-sheen text-fg-secondary inset-shadow-edge \" +\n      \"transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-35\",\n    grid: \"kz-fade grid grid-cols-3 gap-1.5\",\n    month:\n      \"relative h-11 min-w-[5.5rem] rounded-xl px-2 text-sm font-medium capitalize text-fg transition-[background-color,box-shadow,transform] duration-150 \" +\n      \"hover:bg-surface-3 active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-hidden focus-visible:focus-ring \" +\n      \"data-[current]:font-bold data-[current]:not-data-[selected]:text-fg-accent \" +\n      \"data-[selected]:bg-accent data-[selected]:bg-fill-shade data-[selected]:font-semibold data-[selected]:text-on-accent data-[selected]:shadow-glow data-[selected]:inset-shadow-edge-fill \" +\n      \"disabled:cursor-not-allowed disabled:text-fg-muted disabled:opacity-50 disabled:hover:bg-transparent\",\n  },\n  variants: {\n    variant: {\n      plain: {},\n      card: { root: \"rounded-2xl border border-border-default bg-surface-1 bg-sheen p-4 shadow-raised inset-shadow-edge\" },\n    },\n  },\n  defaultVariants: { variant: \"plain\" },\n});\n\nexport type MonthPickerLabels = {\n  /** The previous-year button (\"Previous year\"). */\n  previousYear: string;\n  /** The next-year button (\"Next year\"). */\n  nextYear: string;\n};\n\nexport const monthPickerLabels: MonthPickerLabels = { previousYear: \"Previous year\", nextYear: \"Next year\" };\n\nexport type MonthPickerProps = {\n  /** The BCP 47 locale of the month names: always explicit. */\n  locale: string;\n  /** The chosen month, `YYYY-MM` (controlled); `null` for none. */\n  value?: IsoMonth | null;\n  /** The chosen month at first, uncontrolled. */\n  defaultValue?: IsoMonth | null;\n  /** Called with the month picked. */\n  onValueChange?: (value: IsoMonth | null) => void;\n  /** The year shown (controlled). */\n  year?: number;\n  /** Called when the year shown changes. */\n  onYearChange?: (year: number) => void;\n  /** The earliest month that can be picked, `YYYY-MM`. */\n  min?: IsoMonth;\n  /** The latest month that can be picked, `YYYY-MM`. */\n  max?: IsoMonth;\n  /** This month (marked): inject it for a stable render or a test. Default: the device's. */\n  current?: IsoMonth;\n  /** Moves the focus to the active month when it mounts. */\n  autoFocus?: boolean;\n  /** Without its own year header (inside the calendar, which has one). */\n  bare?: boolean;\n  /** `plain` or `card` (its own raised surface). */\n  variant?: \"plain\" | \"card\";\n  /** The words, passed translated; English by default. */\n  labels?: Partial<MonthPickerLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** A month of a year: twelve months in a grid, the year above them. */\nexport function MonthPicker({ locale, value: valueProp, defaultValue = null, onValueChange, year: yearProp, onYearChange, min, max, current, autoFocus, bare, variant, labels: given, className }: MonthPickerProps) {\n  const labels = { ...monthPickerLabels, ...given };\n  const s = monthPicker({ variant });\n  const [own, setOwn] = React.useState<IsoMonth | null>(defaultValue);\n  const value = valueProp !== undefined ? valueProp : own;\n  const now = new Date();\n  const thisMonth = current ?? `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, \"0\")}`;\n  const [ownYear, setOwnYear] = React.useState(() => Number((value ?? thisMonth).slice(0, 4)));\n  const year = yearProp ?? ownYear;\n  const setYear = (y: number) => {\n    if (yearProp === undefined) setOwnYear(y);\n    onYearChange?.(y);\n  };\n  const names = React.useMemo(() => monthNames(locale, \"short\").map((n) => n.replace(/\\.$/, \"\")), [locale]);\n  const longNames = React.useMemo(() => monthNames(locale, \"long\"), [locale]);\n  const iso = (y: number, m: number) => `${String(y).padStart(4, \"0\")}-${String(m).padStart(2, \"0\")}`;\n  const disabled = (m: IsoMonth) => Boolean((min && m < min) || (max && m > max));\n  const [focused, setFocused] = React.useState(() => (value && Number(value.slice(0, 4)) === year ? Number(value.slice(5, 7)) : Number(thisMonth.slice(5, 7))));\n  const grid = React.useRef<HTMLDivElement>(null);\n  const moved = React.useRef(Boolean(autoFocus));\n  React.useEffect(() => {\n    if (!moved.current) return;\n    moved.current = false;\n    grid.current?.querySelector<HTMLButtonElement>(`[data-month=\"${iso(year, focused)}\"]`)?.focus();\n  }, [year, focused]);\n\n  const pick = (m: IsoMonth) => {\n    if (valueProp === undefined) setOwn(m);\n    onValueChange?.(m);\n  };\n  const move = (to: number) => {\n    moved.current = true;\n    const y = year + Math.floor((to - 1) / 12);\n    const m = ((((to - 1) % 12) + 12) % 12) + 1;\n    if (y !== year) setYear(y);\n    setFocused(m);\n  };\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const moves: Record<string, number> = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -3, ArrowDown: 3, PageUp: -12, PageDown: 12 };\n    if (event.key === \"Home\" || event.key === \"End\") {\n      event.preventDefault();\n      moved.current = true;\n      setFocused(event.key === \"Home\" ? 1 : 12);\n      return;\n    }\n    const by = moves[event.key];\n    if (by === undefined) return;\n    event.preventDefault();\n    move(focused + by);\n  };\n  const rows = [0, 1, 2, 3].map((r) => [1, 2, 3].map((c) => r * 3 + c));\n  return (\n    <div className={s.root({ className })}>\n      {bare ? null : (\n        <div className={s.header()}>\n          <button type=\"button\" className={s.nav()} aria-label={labels.previousYear} disabled={Boolean(min && year - 1 < Number(min.slice(0, 4)))} onClick={() => setYear(year - 1)}>\n            <ChevronGlyph direction=\"left\" className=\"h-4 w-4\" />\n          </button>\n          <span className={s.year()} aria-live=\"polite\">\n            {year}\n          </span>\n          <button type=\"button\" className={s.nav()} aria-label={labels.nextYear} disabled={Boolean(max && year + 1 > Number(max.slice(0, 4)))} onClick={() => setYear(year + 1)}>\n            <ChevronGlyph direction=\"right\" className=\"h-4 w-4\" />\n          </button>\n        </div>\n      )}\n      <div ref={grid} role=\"grid\" aria-label={String(year)} className={s.grid()} key={year} onKeyDown={onKeyDown}>\n        {rows.map((row) => (\n          <div role=\"row\" key={row[0]} className=\"contents\">\n            {row.map((m) => {\n              const id = iso(year, m);\n              return (\n                <div role=\"gridcell\" key={m} aria-selected={id === value || undefined} className=\"flex\">\n                  <button\n                    type=\"button\"\n                    data-month={id}\n                    tabIndex={m === focused ? 0 : -1}\n                    aria-current={id === thisMonth ? \"date\" : undefined}\n                    data-current={id === thisMonth ? \"\" : undefined}\n                    data-selected={id === value ? \"\" : undefined}\n                    disabled={disabled(id)}\n                    className={s.month({ className: \"w-full\" })}\n                    onClick={() => {\n                      setFocused(m);\n                      pick(id);\n                    }}\n                  >\n                    <span aria-hidden>{names[m - 1]}</span>\n                    <span className=\"sr-only\">{`${longNames[m - 1]} ${year}`}</span>\n                  </button>\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
     },
     {
       "path": "date-picker/parts.ts",
-      "content": "// Platform-neutral: a date typed as day, month and year (the native `DateField`, the form's `DateField entry=\"parts\"`).\n// Values are ISO calendar dates, `YYYY-MM-DD`, compared as strings.\n\n/** A part of a typed date. */\nexport type DatePart = \"day\" | \"month\" | \"year\";\n\n/** The digits of each part. */\nexport const DATE_PART_LENGTH: Readonly<Record<DatePart, number>> = { day: 2, month: 2, year: 4 };\n\n/** The order of day, month and year in a locale (`en-US` → month, day, year; `fr` → day, month, year). */\nexport function datePartsOrder(locale: string): DatePart[] {\n  try {\n    const parts = new Intl.DateTimeFormat(locale, { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" }).formatToParts(new Date(2001, 10, 22));\n    const order = parts.map((p) => p.type).filter((t): t is DatePart => t === \"day\" || t === \"month\" || t === \"year\");\n    if (order.length === 3) return order;\n  } catch {\n    // An engine without Intl's parts: day, month, year.\n  }\n  return [\"day\", \"month\", \"year\"];\n}\n\n/** The ISO-ordered value of what was typed: `\"\"` when nothing is, `YYYY-MM-DD` otherwise (not necessarily a real date). */\nexport function composeDate(parts: Readonly<Record<DatePart, string>>): string {\n  if (!parts.day && !parts.month && !parts.year) return \"\";\n  const pad = (v: string) => (v.length === 1 ? `0${v}` : v);\n  return `${parts.year}-${pad(parts.month)}-${pad(parts.day)}`;\n}\n\n/** The parts of a value (`\"\"` → three empty parts). */\nexport function splitDate(value: string | null | undefined): Record<DatePart, string> {\n  const m = /^(\\d*)-(\\d*)-(\\d*)$/.exec(value ?? \"\");\n  return m ? { year: m[1]!, month: m[2]!, day: m[3]! } : { day: \"\", month: \"\", year: \"\" };\n}\n\n/** True for a real calendar date written `YYYY-MM-DD` (not `2001-02-30`). */\nexport function isRealDate(value: string): boolean {\n  if (!/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) return false;\n  const date = new Date(`${value}T00:00:00Z`);\n  return !Number.isNaN(date.getTime()) && date.toISOString().slice(0, 10) === value;\n}\n\n/** The latest date of birth of someone `age` years old today (`YYYY-MM-DD`): an age gate's `max`, `value <= latestBirthDate(18)`. */\nexport function latestBirthDate(age: number, today = new Date()): string {\n  return new Date(Date.UTC(today.getFullYear() - age, today.getMonth(), today.getDate())).toISOString().slice(0, 10);\n}\n"
+      "content": "// Platform-neutral: a date typed as day, month and year (the native `DateField`, the form's `DateField entry=\"parts\"`).\n// Values are ISO calendar dates, `YYYY-MM-DD`, compared as strings.\n\n/** A part of a typed date. */\nexport type DatePart = \"day\" | \"month\" | \"year\";\n\n/** The digits of each part. */\nexport const DATE_PART_LENGTH: Readonly<Record<DatePart, number>> = { day: 2, month: 2, year: 4 };\n\n/** The order of day, month and year in a locale (`en-US` → month, day, year; `fr` → day, month, year). */\nexport function datePartsOrder(locale: string): DatePart[] {\n  try {\n    const parts = new Intl.DateTimeFormat(locale, { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" }).formatToParts(new Date(2001, 10, 22));\n    const order = parts.map((p) => p.type).filter((t): t is DatePart => t === \"day\" || t === \"month\" || t === \"year\");\n    if (order.length === 3) return order;\n  } catch {\n    // An engine without Intl's parts: day, month, year.\n  }\n  return [\"day\", \"month\", \"year\"];\n}\n\n/** The ISO-ordered value of what was typed: `\"\"` when nothing is, `YYYY-MM-DD` otherwise (not necessarily a real date). */\nexport function composeDate(parts: Readonly<Record<DatePart, string>>): string {\n  if (!parts.day && !parts.month && !parts.year) return \"\";\n  const pad = (v: string) => (v.length === 1 ? `0${v}` : v);\n  return `${parts.year}-${pad(parts.month)}-${pad(parts.day)}`;\n}\n\n/** The parts of a value (`\"\"` → three empty parts). */\nexport function splitDate(value: string | null | undefined): Record<DatePart, string> {\n  const m = /^(\\d*)-(\\d*)-(\\d*)$/.exec(value ?? \"\");\n  return m ? { year: m[1]!, month: m[2]!, day: m[3]! } : { day: \"\", month: \"\", year: \"\" };\n}\n\n/** True for a real calendar date written `YYYY-MM-DD` (not `2001-02-30`). */\nexport function isRealDate(value: string): boolean {\n  if (!/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) return false;\n  const date = new Date(`${value}T00:00:00Z`);\n  return !Number.isNaN(date.getTime()) && date.toISOString().slice(0, 10) === value;\n}\n\n/** The latest date of birth of someone `age` years old today (`YYYY-MM-DD`): an age gate's `max`, `value <= latestBirthDate(18)`. */\nexport function latestBirthDate(age: number, today = new Date()): string {\n  return new Date(Date.UTC(today.getFullYear() - age, today.getMonth(), today.getDate())).toISOString().slice(0, 10);\n}\n\n// ─── Shared by the pickers, web and native (no DOM, no React) ───────────────────────────────────────────────────────\n\n/** The days of a month (`month` 1–12). */\nexport function daysInMonth(year: number, month: number): number {\n  return new Date(Date.UTC(year, month, 0)).getUTCDate();\n}\n\n/** `2026-10-11` → `{ year: 2026, month: 10, day: 11 }` (no check: pair it with `isRealDate`). */\nexport function isoParts(iso: string): { year: number; month: number; day: number } {\n  const [year = 0, month = 0, day = 0] = iso.split(\"-\").map(Number);\n  return { year, month, day };\n}\n\n/** `{ 2026, 10, 11 }` → `2026-10-11`, the day kept inside the month (`2026-02-31` → `2026-02-28`). */\nexport function isoOf(year: number, month: number, day: number): string {\n  const d = Math.min(Math.max(day, 1), daysInMonth(year, month));\n  return `${String(year).padStart(4, \"0\")}-${String(month).padStart(2, \"0\")}-${String(d).padStart(2, \"0\")}`;\n}\n\n/** The ISO date of today on this device (or of the `Date` given). */\nexport function todayIso(now = new Date()): string {\n  return isoOf(now.getFullYear(), now.getMonth() + 1, now.getDate());\n}\n\n/** The age in whole years on `today` of someone born on `birth` (both ISO). */\nexport function ageOn(birth: string, today: string = todayIso()): number {\n  const b = isoParts(birth);\n  const t = isoParts(today);\n  return t.year - b.year - (t.month < b.month || (t.month === b.month && t.day < b.day) ? 1 : 0);\n}\n\n/** The month names of a locale, January first (`long` · `short` · `narrow`). */\nexport function monthNames(locale: string, style: \"long\" | \"short\" | \"narrow\" = \"long\"): string[] {\n  const format = new Intl.DateTimeFormat(locale, { month: style, timeZone: \"UTC\" });\n  return Array.from({ length: 12 }, (_, i) => format.format(new Date(Date.UTC(2001, i, 1))));\n}\n\n/** The years from `from` to `to`, both included, in that order (descending when `from > to`). */\nexport function yearRange(from: number, to: number): number[] {\n  const step = from <= to ? 1 : -1;\n  return Array.from({ length: Math.abs(to - from) + 1 }, (_, i) => from + i * step);\n}\n\n/** A time of day, `HH:mm` on 24 hours (`\"09:30\"`, `\"18:00\"`): the value of every time picker. */\nexport type TimeValue = string;\n\n/** `\"9:5\"` / `\"09:05\"` → minutes since midnight; `null` when it is not a time. */\nexport function timeToMinutes(value: string | null | undefined): number | null {\n  const m = /^(\\d{1,2}):(\\d{1,2})$/.exec(value ?? \"\");\n  if (!m) return null;\n  const h = Number(m[1]);\n  const min = Number(m[2]);\n  return h < 24 && min < 60 ? h * 60 + min : null;\n}\n\n/** Minutes since midnight → `HH:mm`. */\nexport function minutesToTime(minutes: number): TimeValue {\n  const m = ((Math.round(minutes) % 1440) + 1440) % 1440;\n  return `${String(Math.floor(m / 60)).padStart(2, \"0\")}:${String(m % 60).padStart(2, \"0\")}`;\n}\n\n/** The slots of a day from `start` to `end` (excluded) every `step` minutes: `timeSlots(\"09:00\", \"12:00\", 30)`. */\nexport function timeSlots(start: TimeValue, end: TimeValue, step = 30): TimeValue[] {\n  const a = timeToMinutes(start);\n  const b = timeToMinutes(end);\n  if (a === null || b === null || step <= 0) return [];\n  const slots: TimeValue[] = [];\n  for (let m = a; m < b; m += step) slots.push(minutesToTime(m));\n  return slots;\n}\n\n/** True when the locale writes the time on 12 hours with a day period (`en-US` → true, `fr-CA` → false). */\nexport function uses12Hours(locale: string): boolean {\n  try {\n    const options = new Intl.DateTimeFormat(locale, { hour: \"numeric\" }).resolvedOptions() as Intl.ResolvedDateTimeFormatOptions & { hourCycle?: string };\n    return options.hourCycle ? options.hourCycle === \"h12\" || options.hourCycle === \"h11\" : Boolean(options.hour12);\n  } catch {\n    return false;\n  }\n}\n\n/** The day periods of a locale, morning first (`[\"AM\", \"PM\"]`, `[\"a.m.\", \"p.m.\"]`). */\nexport function dayPeriods(locale: string): [string, string] {\n  const format = new Intl.DateTimeFormat(locale, { hour: \"numeric\", hour12: true, timeZone: \"UTC\" });\n  const period = (h: number) => format.formatToParts(new Date(Date.UTC(2001, 0, 1, h))).find((p) => p.type === \"dayPeriod\")?.value ?? (h < 12 ? \"AM\" : \"PM\");\n  return [period(9), period(15)];\n}\n\n/** A time written the locale's way (`\"18:30\"` → `\"6:30 PM\"` in en-US, `\"18 h 30\"` in fr-CA). */\nexport function formatTime(locale: string, value: TimeValue): string {\n  const minutes = timeToMinutes(value);\n  if (minutes === null) return \"\";\n  return new Intl.DateTimeFormat(locale, { hour: \"numeric\", minute: \"2-digit\", timeZone: \"UTC\" }).format(new Date(Date.UTC(2001, 0, 1, 0, minutes)));\n}\n\n/** A local `Date` at midnight for an ISO date (for formatting). */\nexport const toLocalDate = (iso: string) => {\n  const { year, month, day } = isoParts(iso);\n  return new Date(year, month - 1, day);\n};\n/** The ISO date of a local `Date`. */\nexport const toIsoDate = (date: Date): string => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, \"0\")}-${String(date.getDate()).padStart(2, \"0\")}`;\n/** The ISO date `days` later (or earlier). */\nexport const addDays = (iso: string, days: number) => {\n  const date = toLocalDate(iso);\n  date.setDate(date.getDate() + days);\n  return toIsoDate(date);\n};\n/** The ISO date `months` later (or earlier), the day kept inside the shorter months (`01-31` + 1 → `02-28`). */\nexport const addMonths = (iso: string, months: number) => {\n  const { year, month, day } = isoParts(iso);\n  const first = new Date(year, month - 1 + months, 1);\n  return isoOf(first.getFullYear(), first.getMonth() + 1, day);\n};\n\n/** The first day of the week for a locale (0 = Sunday … 6 = Saturday), from `Intl.Locale` week info; Monday otherwise. */\nexport function weekStartOf(locale: string): number {\n  try {\n    const info = new Intl.Locale(locale) as Intl.Locale & { getWeekInfo?: () => { firstDay: number }; weekInfo?: { firstDay: number } };\n    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;\n    return firstDay ? firstDay % 7 : 1;\n  } catch {\n    return 1;\n  }\n}\n\n/** The weeks of a month's grid (six at most), each seven ISO dates from the locale's first day of the week. */\nexport function monthGrid(month: string, weekStartsOn: number): string[][] {\n  const first = `${month.slice(0, 7)}-01`;\n  const lead = (toLocalDate(first).getDay() - weekStartsOn + 7) % 7;\n  const start = addDays(first, -lead);\n  const days = Array.from({ length: 42 }, (_, i) => addDays(start, i));\n  return Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7)).filter((week, w) => w < 5 || week[0]!.slice(0, 7) === first.slice(0, 7));\n}\n"
+    },
+    {
+      "path": "date-picker/time-picker.tsx",
+      "content": "// Client. A time of day, `HH:mm` on 24 hours whatever the locale shows: as wheels (hours, minutes by a step, the day\n// period where the locale uses one) or as slots (the free times of an agenda, a radio group: one tab stop, the arrows\n// move and pick). The words come from Intl for the `locale` given.\nimport * as React from \"react\";\n\nimport { useControllable } from \"../media\";\nimport { tv } from \"../tv\";\nimport { dayPeriods, formatTime, timeToMinutes, type TimeValue, uses12Hours } from \"./parts\";\nimport { Wheel, WheelDivider, type WheelOption, WheelPicker } from \"./wheel\";\n\nexport const timePicker = tv({\n  slots: {\n    slots: \"grid grid-cols-[repeat(auto-fill,minmax(5.5rem,1fr))] gap-2\",\n    slot:\n      \"h-11 rounded-xl border border-border-default bg-surface-2 bg-sheen px-3 text-sm font-semibold tabular-nums text-fg inset-shadow-edge \" +\n      \"transition-[background-color,border-color,box-shadow,transform] duration-150 hover:border-border-strong active:scale-[0.97] \" +\n      \"motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-hidden focus-visible:focus-ring \" +\n      \"aria-checked:border-transparent aria-checked:bg-accent aria-checked:bg-fill-shade aria-checked:text-on-accent aria-checked:shadow-glow aria-checked:inset-shadow-edge-fill \" +\n      \"disabled:cursor-not-allowed disabled:border-dashed disabled:bg-transparent disabled:bg-none disabled:font-normal disabled:text-fg-muted disabled:line-through disabled:shadow-none\",\n    group: \"flex flex-col gap-2\",\n    heading: \"text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n  },\n});\n\nexport type TimePickerLabels = {\n  /** The hours' wheel (\"Hours\"). */\n  hours: string;\n  /** The minutes' wheel (\"Minutes\"). */\n  minutes: string;\n  /** The day period's wheel (\"AM/PM\"). */\n  period: string;\n};\n\nexport const timePickerLabels: TimePickerLabels = { hours: \"Hours\", minutes: \"Minutes\", period: \"AM/PM\" };\n\ntype Shared = {\n  /** The accessible name of the picker (\"Pick-up time\"), passed translated. */\n  label: string;\n  /** The BCP 47 locale: how times are written, and whether the day has a period (AM/PM). */\n  locale: string;\n  /** The time, `HH:mm` on 24 hours (controlled); `null` for none. */\n  value?: TimeValue | null;\n  /** The time at first, uncontrolled. */\n  defaultValue?: TimeValue | null;\n  /** Called with the time chosen. */\n  onValueChange?: (value: TimeValue) => void;\n  /** Not available. */\n  disabled?: boolean;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nexport type TimePickerProps = Shared &\n  (\n    | {\n        /** `wheel`: hours and minutes (and the period) as wheels — a time you set (a reminder, an alarm). */\n        variant?: \"wheel\";\n        /** The minutes' step: 1, 5 (default), 10, 15, 30. */\n        minuteStep?: number;\n        /** Forces 12 or 24 hours. Default: the locale's. */\n        hour12?: boolean;\n        /** The words of the wheels, passed translated; English by default. */\n        labels?: Partial<TimePickerLabels>;\n        slots?: never;\n        isTimeDisabled?: never;\n        groupLabels?: never;\n      }\n    | {\n        /** `slots`: the free times as buttons — a booking, a delivery window, an appointment. */\n        variant: \"slots\";\n        /** The times offered, `HH:mm` (`timeSlots(\"09:00\", \"17:00\", 30)`). */\n        slots: readonly TimeValue[];\n        /** Refuses some slots (taken, too soon): drawn struck through, skipped by the arrows. */\n        isTimeDisabled?: (time: TimeValue) => boolean;\n        /** Splits the slots under headings by part of the day: `{ morning: \"Morning\", afternoon: \"Afternoon\", evening: \"Evening\" }`. */\n        groupLabels?: { morning: string; afternoon: string; evening: string };\n        minuteStep?: never;\n        hour12?: never;\n        labels?: never;\n      }\n  );\n\n/** A time of day: wheels to set one, or slots to book one. */\nexport function TimePicker(props: TimePickerProps) {\n  return props.variant === \"slots\" ? <TimeSlots {...props} /> : <TimeWheels {...props} />;\n}\n\nfunction TimeWheels({ label, locale, value: valueProp, defaultValue = null, onValueChange, disabled, className, minuteStep = 5, hour12, labels: given }: Extract<TimePickerProps, { variant?: \"wheel\" }>) {\n  const labels = { ...timePickerLabels, ...given };\n  const [value, setValue] = useControllable<TimeValue | null>(valueProp, defaultValue, (v) => v && onValueChange?.(v));\n  const twelve = hour12 ?? uses12Hours(locale);\n  const total = timeToMinutes(value) ?? 9 * 60;\n  const h24 = Math.floor(total / 60);\n  const minute = total % 60;\n  const pm = h24 >= 12;\n  const two = (n: number) => String(n).padStart(2, \"0\");\n  const number = React.useMemo(() => new Intl.NumberFormat(locale, { minimumIntegerDigits: 2, useGrouping: false }), [locale]);\n  const hours: WheelOption[] = twelve\n    ? Array.from({ length: 12 }, (_, i) => ({ value: String(i === 0 ? 12 : i), label: String(i === 0 ? 12 : i) })).sort((a, b) => (Number(a.value) % 12) - (Number(b.value) % 12))\n    : Array.from({ length: 24 }, (_, i) => ({ value: String(i), label: number.format(i) }));\n  const minutes: WheelOption[] = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => ({ value: String(i * minuteStep), label: number.format(i * minuteStep) }));\n  // A minute that is not on the step (an existing value) is rounded to the nearest one shown.\n  const shownMinute = String(Math.min(60 - minuteStep, Math.round(minute / minuteStep) * minuteStep));\n  const [am, pmLabel] = dayPeriods(locale);\n  const set = (h: number, m: number) => setValue(`${two(h)}:${two(m)}`);\n  return (\n    <WheelPicker label={`${label}, ${value ? formatTime(locale, value) : \"\"}`.replace(/, $/, \"\")} className={className}>\n      <Wheel\n        label={labels.hours}\n        options={hours}\n        disabled={disabled}\n        value={twelve ? String(h24 % 12 === 0 ? 12 : h24 % 12) : String(h24)}\n        onValueChange={(v) => set(twelve ? (Number(v) % 12) + (pm ? 12 : 0) : Number(v), minute)}\n      />\n      <WheelDivider>:</WheelDivider>\n      <Wheel label={labels.minutes} options={minutes} disabled={disabled} value={shownMinute} onValueChange={(v) => set(h24, Number(v))} />\n      {twelve ? (\n        <Wheel\n          label={labels.period}\n          options={[\n            { value: \"am\", label: am },\n            { value: \"pm\", label: pmLabel },\n          ]}\n          disabled={disabled}\n          value={pm ? \"pm\" : \"am\"}\n          onValueChange={(v) => set((h24 % 12) + (v === \"pm\" ? 12 : 0), minute)}\n        />\n      ) : null}\n    </WheelPicker>\n  );\n}\n\nfunction TimeSlots({ label, locale, value: valueProp, defaultValue = null, onValueChange, disabled, className, slots, isTimeDisabled, groupLabels }: Extract<TimePickerProps, { variant: \"slots\" }>) {\n  const s = timePicker();\n  const [value, setValue] = useControllable<TimeValue | null>(valueProp, defaultValue, (v) => v && onValueChange?.(v));\n  const enabled = slots.filter((t) => !disabled && !isTimeDisabled?.(t));\n  const tabStop = value && enabled.includes(value) ? value : enabled[0];\n  const root = React.useRef<HTMLDivElement>(null);\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const i = enabled.indexOf(tabStop ?? \"\");\n    const moves: Record<string, number> = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1, ArrowUp: i - 1, Home: 0, End: enabled.length - 1 };\n    const to = moves[event.key];\n    if (to === undefined) return;\n    event.preventDefault();\n    const next = enabled[(to + enabled.length) % enabled.length];\n    if (!next) return;\n    setValue(next);\n    root.current?.querySelector<HTMLButtonElement>(`[data-time=\"${next}\"]`)?.focus();\n  };\n  const button = (t: TimeValue) => {\n    const off = disabled || Boolean(isTimeDisabled?.(t));\n    return (\n      <button\n        key={t}\n        type=\"button\"\n        role=\"radio\"\n        data-time={t}\n        aria-checked={t === value}\n        tabIndex={t === tabStop ? 0 : -1}\n        disabled={off}\n        className={s.slot()}\n        onClick={() => setValue(t)}\n      >\n        {formatTime(locale, t)}\n      </button>\n    );\n  };\n  const part = (t: TimeValue) => {\n    const m = timeToMinutes(t) ?? 0;\n    return m < 12 * 60 ? \"morning\" : m < 18 * 60 ? \"afternoon\" : \"evening\";\n  };\n  return (\n    <div ref={root} role=\"radiogroup\" aria-label={label} aria-disabled={disabled || undefined} className={className} onKeyDown={onKeyDown}>\n      {groupLabels ? (\n        <div className=\"flex flex-col gap-4\">\n          {([\"morning\", \"afternoon\", \"evening\"] as const).map((p) => {\n            const inPart = slots.filter((t) => part(t) === p);\n            if (!inPart.length) return null;\n            return (\n              <div key={p} role=\"group\" aria-label={groupLabels[p]} className={s.group()}>\n                <span aria-hidden className={s.heading()}>\n                  {groupLabels[p]}\n                </span>\n                <div className={s.slots()}>{inPart.map(button)}</div>\n              </div>\n            );\n          })}\n        </div>\n      ) : (\n        <div className={s.slots()}>{slots.map(button)}</div>\n      )}\n    </div>\n  );\n}\n\n\n"
+    },
+    {
+      "path": "date-picker/wheel.tsx",
+      "content": "// Client. A wheel: a column of values that turns under a lit band — the touch idiom of a time, a date of birth, a\n// quantity. Each column is a `spinbutton` for assistive technologies and the keyboard (Up / Down, Page Up / Page Down by\n// five, Home / End), its value read as words (`aria-valuetext`); the hand scrolls it (scroll snap) or clicks a value.\n// The curve is a scroll-driven animation (CSS `animation-timeline: view()`): no script per frame, flat where unsupported.\nimport * as React from \"react\";\n\nimport { usePrefersReducedMotion } from \"../media\";\nimport { tv } from \"../tv\";\n\n/** A value of a wheel: what is stored, and its words (passed translated or formatted for the locale). */\nexport type WheelOption = { value: string; label: string; disabled?: boolean };\n\nexport const wheel = tv({\n  slots: {\n    root: \"relative inline-flex select-none items-stretch gap-1 rounded-2xl border border-border-default data-[invalid]:border-danger bg-surface-1 bg-sheen px-2 shadow-raised inset-shadow-edge\",\n    band: \"pointer-events-none absolute inset-x-1.5 top-1/2 -translate-y-1/2 rounded-xl border border-border-subtle bg-surface-3 inset-shadow-well\",\n    column:\n      \"relative z-[1] min-w-14 flex-1 rounded-xl outline-hidden focus-visible:focus-ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-40\",\n    scroller:\n      \"kz-wheel h-full snap-y snap-mandatory overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n      \"[mask-image:linear-gradient(to_bottom,transparent,#000_30%,#000_70%,transparent)]\",\n    item:\n      \"kz-wheel-item flex snap-center items-center justify-center px-2 text-base tabular-nums text-fg-secondary transition-colors \" +\n      \"data-[selected]:font-semibold data-[selected]:text-fg data-[disabled]:text-fg-muted data-[disabled]:line-through\",\n    divider: \"z-[1] self-center text-base font-semibold text-fg-secondary\",\n  },\n});\n\nconst ITEM = 40;\n\nexport type WheelProps = {\n  /** The column's accessible name (\"Hour\", \"Month\"), passed translated. */\n  label: string;\n  /** The values, in order. */\n  options: readonly WheelOption[];\n  /** The chosen value (controlled). */\n  value?: string | null;\n  /** The chosen value at first, uncontrolled. Default: the first one. */\n  defaultValue?: string;\n  /** Called with the value that comes to rest under the band. */\n  onValueChange?: (value: string) => void;\n  /** Not available. */\n  disabled?: boolean;\n  /** Classes merged on the column (a width: `w-20`). */\n  className?: string;\n};\n\nexport type WheelPickerProps = {\n  /** The group's accessible name (\"Departure time\"), passed translated. */\n  label: string;\n  /** The wheels (`Wheel`), and dividers (`WheelDivider`) between them. */\n  children: React.ReactNode;\n  /** How many values are visible: 3, 5 (default) or 7. */\n  visible?: 3 | 5 | 7;\n  /** The help text or the error that describes the group (their ids). */\n  \"aria-describedby\"?: string;\n  /** Marks the group invalid (a danger edge): pair it with an error read through `aria-describedby`. */\n  invalid?: boolean;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nconst VisibleContext = React.createContext(5);\n\n/** The frame of one or several wheels: a raised surface, the lit band across them, a group named by `label`. */\nexport function WheelPicker({ label, children, visible = 5, \"aria-describedby\": describedBy, invalid, className }: WheelPickerProps) {\n  const s = wheel();\n  return (\n    <VisibleContext.Provider value={visible}>\n      <div role=\"group\" aria-label={label} aria-describedby={describedBy} data-invalid={invalid ? \"\" : undefined} className={s.root({ className })} style={{ height: ITEM * visible }}>\n        <span aria-hidden className={s.band()} style={{ height: ITEM }} />\n        {children}\n      </div>\n    </VisibleContext.Provider>\n  );\n}\n\n/** A divider between two wheels (`:` between the hours and the minutes). */\nexport function WheelDivider({ children }: { children: React.ReactNode }) {\n  return (\n    <span aria-hidden className={wheel().divider()}>\n      {children}\n    </span>\n  );\n}\n\nconst nearestEnabled = (options: readonly WheelOption[], index: number) => {\n  for (let d = 0; d < options.length; d++) {\n    if (options[index + d] && !options[index + d]!.disabled) return index + d;\n    if (options[index - d] && !options[index - d]!.disabled) return index - d;\n  }\n  return index;\n};\n\n/** One column of a `WheelPicker`: a spinbutton over a scroll-snapped list of values. */\nexport function Wheel({ label, options, value: valueProp, defaultValue, onValueChange, disabled, className }: WheelProps) {\n  const s = wheel();\n  const visible = React.useContext(VisibleContext);\n  const [own, setOwn] = React.useState(defaultValue ?? options[0]?.value ?? \"\");\n  const value = valueProp ?? own;\n  const index = Math.max(0, options.findIndex((o) => o.value === value));\n  const scroller = React.useRef<HTMLDivElement>(null);\n  const settle = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const programmatic = React.useRef(false);\n  const reduce = usePrefersReducedMotion();\n  const mounted = React.useRef(false);\n\n  const commit = React.useCallback(\n    (i: number) => {\n      const target = nearestEnabled(options, Math.min(options.length - 1, Math.max(0, i)));\n      const option = options[target];\n      if (!option) return;\n      if (valueProp === undefined) setOwn(option.value);\n      if (option.value !== value) onValueChange?.(option.value);\n    },\n    [options, valueProp, value, onValueChange],\n  );\n\n  // The list follows the value (a key, a click, a change from outside): at once the first time, smoothly after.\n  React.useEffect(() => {\n    const el = scroller.current;\n    if (!el) return;\n    const top = index * ITEM;\n    if (Math.abs(el.scrollTop - top) < 1) return;\n    programmatic.current = true;\n    if (typeof el.scrollTo === \"function\") el.scrollTo({ top, behavior: mounted.current && !reduce ? \"smooth\" : \"auto\" });\n    else el.scrollTop = top;\n    mounted.current = true;\n    const t = setTimeout(() => (programmatic.current = false), 400);\n    return () => clearTimeout(t);\n  }, [index, reduce]);\n\n  const onScroll = () => {\n    if (programmatic.current) return;\n    if (settle.current) clearTimeout(settle.current);\n    settle.current = setTimeout(() => {\n      const el = scroller.current;\n      if (el) commit(Math.round(el.scrollTop / ITEM));\n    }, 90);\n  };\n  React.useEffect(() => () => void (settle.current && clearTimeout(settle.current)), []);\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const step = (by: number) => {\n      let i = index + by;\n      while (options[i]?.disabled) i += Math.sign(by);\n      return options[i] ? i : index;\n    };\n    const moves: Record<string, () => number> = {\n      ArrowUp: () => step(-1),\n      ArrowDown: () => step(1),\n      PageUp: () => Math.max(0, nearestEnabled(options, index - 5)),\n      PageDown: () => Math.min(options.length - 1, nearestEnabled(options, index + 5)),\n      Home: () => nearestEnabled(options, 0),\n      End: () => nearestEnabled(options, options.length - 1),\n    };\n    const move = moves[event.key];\n    if (!move) return;\n    event.preventDefault();\n    commit(move());\n  };\n\n  const pad = ((visible - 1) / 2) * ITEM;\n  const current = options[index];\n  return (\n    <div\n      role=\"spinbutton\"\n      tabIndex={disabled ? -1 : 0}\n      aria-label={label}\n      aria-valuenow={index}\n      aria-valuemin={0}\n      aria-valuemax={Math.max(0, options.length - 1)}\n      aria-valuetext={current?.label}\n      aria-disabled={disabled || undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      className={s.column({ className })}\n      onKeyDown={onKeyDown}\n    >\n      <div ref={scroller} aria-hidden className={s.scroller()} style={{ paddingBlock: pad, scrollPaddingBlock: pad }} onScroll={onScroll}>\n        {options.map((o, i) => (\n          <div\n            key={o.value}\n            data-value={o.value}\n            data-selected={i === index ? \"\" : undefined}\n            data-disabled={o.disabled ? \"\" : undefined}\n            className={s.item()}\n            style={{ height: ITEM }}\n            onClick={() => !o.disabled && commit(i)}\n          >\n            {o.label}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
     },
     {
       "path": "glyphs.tsx",
@@ -686,26 +1483,364 @@
       "content": "// Shared by the data and media primitives (client): the clock format, the reduced-motion preference, the\n// in-view observer, a debounced callback. Never an entry of its own.\nimport * as React from \"react\";\n\n/** Seconds as a clock: `75` → `1:15`, `3725` → `1:02:05`. Negative or unknown values read `0:00`. */\nexport function formatClock(seconds: number): string {\n  const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;\n  const h = Math.floor(s / 3600);\n  const m = Math.floor((s % 3600) / 60);\n  const rest = String(s % 60).padStart(2, \"0\");\n  return h > 0 ? `${h}:${String(m).padStart(2, \"0\")}:${rest}` : `${m}:${rest}`;\n}\n\n/** Clamps `value` between `min` and `max`. */\nexport const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst REDUCE = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduce = (notify: () => void) => {\n  if (typeof window === \"undefined\" || !window.matchMedia) return () => undefined;\n  const query = window.matchMedia(REDUCE);\n  query.addEventListener?.(\"change\", notify);\n  return () => query.removeEventListener?.(\"change\", notify);\n};\n\n/** `true` when the person asked for less motion (`prefers-reduced-motion: reduce`); follows a change of the setting. */\nexport function usePrefersReducedMotion(): boolean {\n  return React.useSyncExternalStore(\n    subscribeReduce,\n    () => (typeof window !== \"undefined\" && window.matchMedia ? window.matchMedia(REDUCE).matches : false),\n    () => false,\n  );\n}\n\n/** The latest value of a callback, for an effect or an event that must not re-subscribe when it changes. */\nexport function useLatest<T>(value: T) {\n  const ref = React.useRef(value);\n  React.useLayoutEffect(() => {\n    ref.current = value;\n  });\n  return ref;\n}\n\n/** Calls `onChange(visible)` when at least `threshold` of the element enters or leaves the viewport. */\nexport function useInView(ref: React.RefObject<Element | null>, onChange: (visible: boolean) => void, enabled = true, threshold = 0.25) {\n  const latest = useLatest(onChange);\n  React.useEffect(() => {\n    const element = ref.current;\n    if (!enabled || !element || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver(([entry]) => entry && latest.current(entry.isIntersecting), { threshold });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref, enabled, threshold, latest]);\n}\n\n/** A stable function that runs `callback` once `delay` ms have passed without a new call; `cancel()` drops the pending one. */\nexport function useDebouncedCallback<A extends unknown[]>(callback: (...args: A) => void, delay: number) {\n  const latest = useLatest(callback);\n  const [debounced] = React.useState(() => {\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let wait = delay;\n    const run = (...args: A) => {\n      clearTimeout(timer);\n      if (wait <= 0) latest.current(...args);\n      else timer = setTimeout(() => latest.current(...args), wait);\n    };\n    return Object.assign(run, {\n      cancel: () => clearTimeout(timer),\n      setDelay: (next: number) => {\n        wait = next;\n      },\n    });\n  });\n  React.useEffect(() => debounced.setDelay(delay), [debounced, delay]);\n  React.useEffect(() => () => debounced.cancel(), [debounced]);\n  return debounced;\n}\n\n/** A value controlled by a prop when it is given, held inside otherwise; `set` calls `onChange` either way. */\nexport function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void) {\n  const [inner, setInner] = React.useState(defaultValue);\n  const controlled = value !== undefined;\n  const current = controlled ? value : inner;\n  const set = React.useCallback(\n    (next: T) => {\n      if (!controlled) setInner(next);\n      onChange?.(next);\n    },\n    [controlled, onChange],\n  );\n  return [current, set] as const;\n}\n\n/** Starts a media element without an unhandled rejection (autoplay refused, the source replaced meanwhile). */\nexport function playSafely(media: HTMLMediaElement | null | undefined) {\n  try {\n    const started = media?.play() as Promise<void> | undefined;\n    started?.catch?.(() => undefined);\n  } catch {\n    // Not playable here (no media support): the controls stay as they are.\n  }\n}\n"
     },
     {
-      "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
-    }
-  ],
-  "dependencies": [
-    "@krizaka/intl@^0.1.0",
-    "tailwind-variants@^3.3.1"
-  ],
-  "registryDependencies": [
-    "popover"
-  ],
-  "demo": {
-    "path": "examples/date-picker/schedule.tsx",
-    "content": "\"use client\";\n\nimport { DatePicker } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\n// `today` is fixed here for the documentation; leave it out in an app.\nexport default function DatePickerSchedule() {\n  const [date, setDate] = React.useState<string | null>(\"2026-10-14\");\n  return (\n    <DatePicker\n      label=\"Publish on\"\n      locale=\"en-US\"\n      value={date}\n      onValueChange={setDate}\n      min=\"2026-10-11\"\n      today=\"2026-10-11\"\n      clearable\n      placeholder=\"Publish now\"\n      hint=\"Your followers are told when it goes live.\"\n    />\n  );\n}\n"
-  },
-  "props": [
-    {
-      "component": "Calendar",
-      "description": "A month grid to pick a date or the ends of a range, with the full keyboard of the APG date picker.",
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    },
+    {
+      "path": "tv.ts",
+      "content": "import { createTV } from \"tailwind-variants\";\n\nimport { twMergeConfig } from \"./cn\";\n\n/** `tv` with the preset's utilities known to the merge engine (`twMergeConfig`): what a primitive wearing the material is styled with. */\nexport const tv = createTV({ twMergeConfig });\n"
+    }
+  ],
+  "dependencies": [
+    "@krizaka/intl@^0.1.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "cn",
+    "popover"
+  ],
+  "demo": {
+    "path": "examples/date-picker/schedule.tsx",
+    "content": "\"use client\";\n\nimport { DatePicker } from \"@krizaka/ui/date-picker\";\nimport * as React from \"react\";\n\n// `today` is fixed here for the documentation; leave it out in an app.\nexport default function DatePickerSchedule() {\n  const [date, setDate] = React.useState<string | null>(\"2026-10-14\");\n  return (\n    <DatePicker\n      label=\"Publish on\"\n      locale=\"en-US\"\n      value={date}\n      onValueChange={setDate}\n      min=\"2026-10-11\"\n      today=\"2026-10-11\"\n      clearable\n      placeholder=\"Publish now\"\n      hint=\"Your followers are told when it goes live.\"\n    />\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "Calendar",
+      "description": "A month grid to pick a date or the ends of a range, with the full keyboard of the APG date picker.",
+      "props": [
+        {
+          "name": "locale",
+          "type": "string",
+          "default": null,
+          "description": "The BCP 47 locale of the month and day names (`\"en-US\"`, `\"fr-CA\"`): always explicit.",
+          "required": true
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean",
+          "default": null,
+          "description": "Moves the focus to the active day when it mounts (inside a popover).",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the root.",
+          "required": false
+        },
+        {
+          "name": "defaultMonth",
+          "type": "string",
+          "default": null,
+          "description": "The month shown at first. Default: the value's, or today's.",
+          "required": false
+        },
+        {
+          "name": "isDateDisabled",
+          "type": "((date: string) => boolean)",
+          "default": null,
+          "description": "Refuses some dates (`(d) => isWeekend(d)`).",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<CalendarLabels>",
+          "default": null,
+          "description": "The words, passed translated; English by default.",
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "string",
+          "default": null,
+          "description": "The latest date that can be picked.",
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "string",
+          "default": null,
+          "description": "The earliest date that can be picked.",
+          "required": false
+        },
+        {
+          "name": "month",
+          "type": "string",
+          "default": null,
+          "description": "The month shown (the first one, with `numberOfMonths={2}`), any day of it (controlled).",
+          "required": false
+        },
+        {
+          "name": "numberOfMonths",
+          "type": "1 | 2",
+          "default": "1",
+          "description": "One month, or two side by side (a period: from a phone's width up, they stack on a phone).",
+          "required": false
+        },
+        {
+          "name": "onMonthChange",
+          "type": "((month: string) => void)",
+          "default": null,
+          "description": "Called when the month shown changes.",
+          "required": false
+        },
+        {
+          "name": "onSelect",
+          "type": "((date: string) => void)",
+          "default": null,
+          "description": "Called with the day picked.",
+          "required": false
+        },
+        {
+          "name": "range",
+          "type": "DateRange | null",
+          "default": null,
+          "description": "The chosen range (range mode): its ends are lit, the days between are one band.",
+          "required": false
+        },
+        {
+          "name": "today",
+          "type": "string",
+          "default": null,
+          "description": "Today (marked): inject it for a stable server render or a test. Default: the device's date.",
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "string | null",
+          "default": null,
+          "description": "The chosen date (one-date mode).",
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "\"plain\" | \"card\"",
+          "default": null,
+          "description": "`plain` (inside a popover, a card of the app) or `card` (the calendar is the interface: its own raised surface).",
+          "required": false
+        },
+        {
+          "name": "weekStartsOn",
+          "type": "number",
+          "default": null,
+          "description": "The first day of the week, 0 = Sunday. Default: the locale's.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "DateField",
+      "description": "Day · month · year typed in the locale's order: numeric keyboards, the next box focused when one is full.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (the group's name).",
+          "required": true
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "default": null,
+          "description": "The BCP 47 locale: the order of the parts, the names of the months.",
+          "required": true
+        },
+        {
+          "name": "autoComplete",
+          "type": "\"off\" | \"bday\"",
+          "default": null,
+          "description": "`bday` for a date of birth: the browser offers to fill it.",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the root.",
+          "required": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "default": "",
+          "description": "The date at first, uncontrolled.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "default": null,
+          "description": "An error under the field: marks it invalid and is read with it. Replaces the hint.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the field (\"For example, 27 3 1990\").",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<DateFieldLabels>",
+          "default": null,
+          "description": "The names of the parts, passed translated; English by default.",
+          "required": false
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The name of a hidden input holding the value, for a plain `<form>` post.",
+          "required": false
+        },
+        {
+          "name": "onBlur",
+          "type": "(() => void)",
+          "default": null,
+          "description": "Called when the focus leaves the field.",
+          "required": false
+        },
+        {
+          "name": "onValueChange",
+          "type": "((value: string) => void)",
+          "default": null,
+          "description": "Called on every key with the date typed so far (`\"\"` when the boxes are empty).",
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "default": null,
+          "description": "The date, `YYYY-MM-DD` (controlled); `\"\"` for none. What is typed comes back as it is, real date or not: the schema decides.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "DateWheel",
+      "description": "Day, month and year as three wheels in the locale's order, bounded by `min` and `max`: always a real date.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (the group's name).",
+          "required": true
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "default": null,
+          "description": "The BCP 47 locale: the order of the parts, the names of the months.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the root.",
+          "required": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | null",
+          "default": "null",
+          "description": "The date at first, uncontrolled.",
+          "required": false
+        },
+        {
+          "name": "defaultView",
+          "type": "string",
+          "default": null,
+          "description": "Where the wheels rest while there is no value. Default: `max` (a birth date: the youngest allowed).",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "default": null,
+          "description": "An error under the field: marks it invalid and is read with it. Replaces the hint.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the field (\"For example, 27 3 1990\").",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<DateFieldLabels>",
+          "default": null,
+          "description": "The names of the parts, passed translated; English by default.",
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "string",
+          "default": null,
+          "description": "The latest date (ISO): `latestBirthDate(18)` for an age gate. Default: today.",
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "string",
+          "default": null,
+          "description": "The earliest date (ISO): the years start there, the days before it are refused. Default: 120 years ago.",
+          "required": false
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The name of a hidden input holding the value, for a plain `<form>` post.",
+          "required": false
+        },
+        {
+          "name": "onValueChange",
+          "type": "((value: string) => void)",
+          "default": null,
+          "description": "Called with the date under the band, always a real date within `min` / `max`.",
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "string | null",
+          "default": null,
+          "description": "The date, `YYYY-MM-DD` (controlled); `\"\"` or `null` for none (the wheels then rest on `defaultView`).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "DatePicker",
+      "description": "A date field: a button showing the date in the locale's format, a calendar in a popover, an ISO value.",
       "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the button's accessible name, with the value).",
+          "required": true
+        },
         {
           "name": "locale",
           "type": "string",
@@ -714,12 +1849,151 @@
           "required": true
         },
         {
-          "name": "autoFocus",
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the root.",
+          "required": false
+        },
+        {
+          "name": "clearable",
           "type": "boolean",
           "default": null,
-          "description": "Moves the focus to the active day when it mounts (inside a popover).",
+          "description": "Adds a button that empties the value.",
+          "required": false
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Opens the calendar at first (a story, a test).",
+          "required": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | null",
+          "default": "null",
+          "description": "The chosen date at first, uncontrolled.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "default": null,
+          "description": "An error under the field: marks it invalid and is read with it.",
+          "required": false
+        },
+        {
+          "name": "format",
+          "type": "\"short\" | \"medium\" | \"long\"",
+          "default": null,
+          "description": "`short` · `medium` (default) · `long`: how the button writes the date.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the field.",
+          "required": false
+        },
+        {
+          "name": "isDateDisabled",
+          "type": "((date: string) => boolean)",
+          "default": null,
+          "description": "Refuses some dates (`(d) => isWeekend(d)`).",
           "required": false
         },
+        {
+          "name": "labels",
+          "type": "Partial<DatePickerLabels>",
+          "default": null,
+          "description": "The words, passed translated; English by default.",
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "string",
+          "default": null,
+          "description": "The latest date that can be picked.",
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "string",
+          "default": null,
+          "description": "The earliest date that can be picked.",
+          "required": false
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The name of a hidden input holding the ISO value, for a plain `<form>` post.",
+          "required": false
+        },
+        {
+          "name": "onValueChange",
+          "type": "((value: string | null) => void)",
+          "default": null,
+          "description": "Called with the date picked, or `null` when cleared.",
+          "required": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "default": null,
+          "description": "Shown while nothing is chosen (\"Pick a date\"), passed translated.",
+          "required": false
+        },
+        {
+          "name": "today",
+          "type": "string",
+          "default": null,
+          "description": "Today (marked): inject it for a stable server render or a test. Default: the device's date.",
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "string | null",
+          "default": null,
+          "description": "The chosen date, ISO (controlled); `null` for none.",
+          "required": false
+        },
+        {
+          "name": "weekStartsOn",
+          "type": "number",
+          "default": null,
+          "description": "The first day of the week, 0 = Sunday. Default: the locale's.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "DateRangePicker",
+      "description": "A period field: two clicks on one calendar (the days between tinted as you hover), optional presets.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the button's accessible name, with the value).",
+          "required": true
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "default": null,
+          "description": "The BCP 47 locale of the month and day names (`\"en-US\"`, `\"fr-CA\"`): always explicit.",
+          "required": true
+        },
         {
           "name": "className",
           "type": "string",
@@ -728,10 +2002,52 @@
           "required": false
         },
         {
-          "name": "defaultMonth",
+          "name": "clearable",
+          "type": "boolean",
+          "default": null,
+          "description": "Adds a button that empties the value.",
+          "required": false
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Opens the calendar at first (a story, a test).",
+          "required": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "{ start: string; end: string; } | null",
+          "default": "null",
+          "description": "The range at first, uncontrolled.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "error",
           "type": "string",
           "default": null,
-          "description": "The month shown at first. Default: the value's, or today's.",
+          "description": "An error under the field: marks it invalid and is read with it.",
+          "required": false
+        },
+        {
+          "name": "format",
+          "type": "\"short\" | \"medium\" | \"long\"",
+          "default": null,
+          "description": "`short` · `medium` (default) · `long`: how the button writes the date.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the field.",
           "required": false
         },
         {
@@ -743,7 +2059,7 @@
         },
         {
           "name": "labels",
-          "type": "Partial<CalendarLabels>",
+          "type": "Partial<DatePickerLabels>",
           "default": null,
           "description": "The words, passed translated; English by default.",
           "required": false
@@ -763,31 +2079,38 @@
           "required": false
         },
         {
-          "name": "month",
+          "name": "name",
           "type": "string",
           "default": null,
-          "description": "The month shown, any day of it (controlled).",
+          "description": "The name of a hidden input holding the ISO value, for a plain `<form>` post.",
           "required": false
         },
         {
-          "name": "onMonthChange",
-          "type": "((month: string) => void)",
+          "name": "numberOfMonths",
+          "type": "1 | 2",
+          "default": "2",
+          "description": "Two months side by side (default, from a phone's width up) or one.",
+          "required": false
+        },
+        {
+          "name": "onValueChange",
+          "type": "((value: { start: string; end: string; } | null) => void)",
           "default": null,
-          "description": "Called when the month shown changes.",
+          "description": "Called once both ends are chosen (or with `null` when cleared).",
           "required": false
         },
         {
-          "name": "onSelect",
-          "type": "((date: string) => void)",
+          "name": "placeholder",
+          "type": "string",
           "default": null,
-          "description": "Called with the day picked.",
+          "description": "Shown while nothing is chosen (\"Pick a date\"), passed translated.",
           "required": false
         },
         {
-          "name": "range",
-          "type": "DateRange | null",
+          "name": "presets",
+          "type": "readonly DateRangePreset[]",
           "default": null,
-          "description": "The chosen range (range mode): its ends are marked, the days between tinted.",
+          "description": "Ranges one click away (\"Last 7 days\", \"This month\"), beside the calendar.",
           "required": false
         },
         {
@@ -799,9 +2122,9 @@
         },
         {
           "name": "value",
-          "type": "string | null",
+          "type": "{ start: string; end: string; } | null",
           "default": null,
-          "description": "The chosen date (one-date mode).",
+          "description": "The chosen range (controlled); `null` for none. `end` is never `null` in a committed value.",
           "required": false
         },
         {
@@ -814,21 +2137,21 @@
       ]
     },
     {
-      "component": "DatePicker",
-      "description": "A date field: a button showing the date in the locale's format, a calendar in a popover, an ISO value.",
+      "component": "DayStrip",
+      "description": "The days ahead in a row that scrolls sideways: one picked, today and the marked days shown.",
       "props": [
         {
           "name": "label",
           "type": "string",
           "default": null,
-          "description": "The visible label, passed translated (also the button's accessible name, with the value).",
+          "description": "The group's accessible name (\"Delivery day\"), passed translated.",
           "required": true
         },
         {
           "name": "locale",
           "type": "string",
           "default": null,
-          "description": "The BCP 47 locale of the month and day names (`\"en-US\"`, `\"fr-CA\"`): always explicit.",
+          "description": "The BCP 47 locale of the names and the dates: always explicit.",
           "required": true
         },
         {
@@ -839,142 +2162,197 @@
           "required": false
         },
         {
-          "name": "clearable",
-          "type": "boolean",
+          "name": "days",
+          "type": "number",
+          "default": "14",
+          "description": "How many days. Default 14.",
+          "required": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | null",
+          "default": "null",
+          "description": "The chosen day at first, uncontrolled.",
+          "required": false
+        },
+        {
+          "name": "isDateDisabled",
+          "type": "((date: string) => boolean)",
           "default": null,
-          "description": "Adds a button that empties the value.",
+          "description": "Refuses some days (closed, full): drawn dashed, skipped by the arrows.",
           "required": false
         },
         {
-          "name": "defaultOpen",
-          "type": "boolean",
-          "default": "false",
-          "description": "Opens the calendar at first (a story, a test).",
+          "name": "isDateMarked",
+          "type": "((date: string) => boolean)",
+          "default": null,
+          "description": "Marks the days that have something (a session, an event): a dot, and `labels.marked` in their name.",
           "required": false
         },
         {
-          "name": "defaultValue",
-          "type": "string | null",
-          "default": "null",
-          "description": "The chosen date at first, uncontrolled.",
+          "name": "labels",
+          "type": "Partial<DayStripLabels>",
+          "default": null,
+          "description": "The words, passed translated; English by default.",
           "required": false
         },
         {
-          "name": "disabled",
-          "type": "boolean",
+          "name": "onValueChange",
+          "type": "((value: string) => void)",
           "default": null,
-          "description": "Not available.",
+          "description": "Called with the day picked.",
           "required": false
         },
         {
-          "name": "error",
+          "name": "showHeader",
+          "type": "boolean",
+          "default": "true",
+          "description": "Shows the month of the chosen day (or of the first) and the page buttons above the strip.",
+          "required": false
+        },
+        {
+          "name": "start",
           "type": "string",
           "default": null,
-          "description": "An error under the field: marks it invalid and is read with it.",
+          "description": "The first day of the strip. Default: today.",
           "required": false
         },
         {
-          "name": "format",
-          "type": "\"short\" | \"medium\" | \"long\"",
+          "name": "today",
+          "type": "string",
           "default": null,
-          "description": "`short` · `medium` (default) · `long`: how the button writes the date.",
+          "description": "Today (marked by the node): inject it for a stable render or a test. Default: the device's date.",
           "required": false
         },
         {
-          "name": "hint",
+          "name": "value",
+          "type": "string | null",
+          "default": null,
+          "description": "The chosen day, ISO (controlled); `null` for none.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "MonthPicker",
+      "description": "A month of a year: twelve months in a grid, the year above them.",
+      "props": [
+        {
+          "name": "locale",
           "type": "string",
           "default": null,
-          "description": "A help text under the field.",
+          "description": "The BCP 47 locale of the month names: always explicit.",
+          "required": true
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean",
+          "default": null,
+          "description": "Moves the focus to the active month when it mounts.",
           "required": false
         },
         {
-          "name": "isDateDisabled",
-          "type": "((date: string) => boolean)",
+          "name": "bare",
+          "type": "boolean",
           "default": null,
-          "description": "Refuses some dates (`(d) => isWeekend(d)`).",
+          "description": "Without its own year header (inside the calendar, which has one).",
           "required": false
         },
         {
-          "name": "labels",
-          "type": "Partial<DatePickerLabels>",
+          "name": "className",
+          "type": "string",
           "default": null,
-          "description": "The words, passed translated; English by default.",
+          "description": "Classes merged on the root.",
           "required": false
         },
         {
-          "name": "max",
+          "name": "current",
           "type": "string",
           "default": null,
-          "description": "The latest date that can be picked.",
+          "description": "This month (marked): inject it for a stable render or a test. Default: the device's.",
           "required": false
         },
         {
-          "name": "min",
+          "name": "defaultValue",
+          "type": "string | null",
+          "default": "null",
+          "description": "The chosen month at first, uncontrolled.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<MonthPickerLabels>",
+          "default": null,
+          "description": "The words, passed translated; English by default.",
+          "required": false
+        },
+        {
+          "name": "max",
           "type": "string",
           "default": null,
-          "description": "The earliest date that can be picked.",
+          "description": "The latest month that can be picked, `YYYY-MM`.",
           "required": false
         },
         {
-          "name": "name",
+          "name": "min",
           "type": "string",
           "default": null,
-          "description": "The name of a hidden input holding the ISO value, for a plain `<form>` post.",
+          "description": "The earliest month that can be picked, `YYYY-MM`.",
           "required": false
         },
         {
           "name": "onValueChange",
           "type": "((value: string | null) => void)",
           "default": null,
-          "description": "Called with the date picked, or `null` when cleared.",
+          "description": "Called with the month picked.",
           "required": false
         },
         {
-          "name": "placeholder",
-          "type": "string",
+          "name": "onYearChange",
+          "type": "((year: number) => void)",
           "default": null,
-          "description": "Shown while nothing is chosen (\"Pick a date\"), passed translated.",
+          "description": "Called when the year shown changes.",
           "required": false
         },
         {
-          "name": "today",
-          "type": "string",
+          "name": "value",
+          "type": "string | null",
           "default": null,
-          "description": "Today (marked): inject it for a stable server render or a test. Default: the device's date.",
+          "description": "The chosen month, `YYYY-MM` (controlled); `null` for none.",
           "required": false
         },
         {
-          "name": "value",
-          "type": "string | null",
+          "name": "variant",
+          "type": "\"plain\" | \"card\"",
           "default": null,
-          "description": "The chosen date, ISO (controlled); `null` for none.",
+          "description": "`plain` or `card` (its own raised surface).",
           "required": false
         },
         {
-          "name": "weekStartsOn",
+          "name": "year",
           "type": "number",
           "default": null,
-          "description": "The first day of the week, 0 = Sunday. Default: the locale's.",
+          "description": "The year shown (controlled).",
           "required": false
         }
       ]
     },
     {
-      "component": "DateRangePicker",
-      "description": "A period field: two clicks on one calendar (the days between tinted as you hover), optional presets.",
+      "component": "TimePicker",
+      "description": "A time of day: wheels to set one, or slots to book one.",
       "props": [
         {
           "name": "label",
           "type": "string",
           "default": null,
-          "description": "The visible label, passed translated (also the button's accessible name, with the value).",
+          "description": "The accessible name of the picker (\"Pick-up time\"), passed translated.",
           "required": true
         },
         {
           "name": "locale",
           "type": "string",
           "default": null,
-          "description": "The BCP 47 locale of the month and day names (`\"en-US\"`, `\"fr-CA\"`): always explicit.",
+          "description": "The BCP 47 locale: how times are written, and whether the day has a period (AM/PM).",
           "required": true
         },
         {
@@ -985,129 +2363,188 @@
           "required": false
         },
         {
-          "name": "clearable",
-          "type": "boolean",
+          "name": "defaultValue",
+          "type": "string | null",
           "default": null,
-          "description": "Adds a button that empties the value.",
+          "description": "The time at first, uncontrolled.",
           "required": false
         },
         {
-          "name": "defaultOpen",
+          "name": "disabled",
           "type": "boolean",
-          "default": "false",
-          "description": "Opens the calendar at first (a story, a test).",
+          "default": null,
+          "description": "Not available.",
           "required": false
         },
         {
-          "name": "defaultValue",
-          "type": "{ start: string; end: string; } | null",
-          "default": "null",
-          "description": "The range at first, uncontrolled.",
+          "name": "groupLabels",
+          "type": "{ morning: string; afternoon: string; evening: string; }",
+          "default": null,
+          "description": "Splits the slots under headings by part of the day: `{ morning: \"Morning\", afternoon: \"Afternoon\", evening: \"Evening\" }`.",
           "required": false
         },
         {
-          "name": "disabled",
+          "name": "hour12",
           "type": "boolean",
           "default": null,
-          "description": "Not available.",
+          "description": "Forces 12 or 24 hours. Default: the locale's.",
           "required": false
         },
         {
-          "name": "error",
-          "type": "string",
+          "name": "isTimeDisabled",
+          "type": "((time: string) => boolean)",
           "default": null,
-          "description": "An error under the field: marks it invalid and is read with it.",
+          "description": "Refuses some slots (taken, too soon): drawn struck through, skipped by the arrows.",
           "required": false
         },
         {
-          "name": "format",
-          "type": "\"short\" | \"medium\" | \"long\"",
+          "name": "labels",
+          "type": "Partial<TimePickerLabels>",
           "default": null,
-          "description": "`short` · `medium` (default) · `long`: how the button writes the date.",
+          "description": "The words of the wheels, passed translated; English by default.",
           "required": false
         },
         {
-          "name": "hint",
-          "type": "string",
+          "name": "minuteStep",
+          "type": "number",
           "default": null,
-          "description": "A help text under the field.",
+          "description": "The minutes' step: 1, 5 (default), 10, 15, 30.",
           "required": false
         },
         {
-          "name": "isDateDisabled",
-          "type": "((date: string) => boolean)",
+          "name": "onValueChange",
+          "type": "((value: string) => void)",
           "default": null,
-          "description": "Refuses some dates (`(d) => isWeekend(d)`).",
+          "description": "Called with the time chosen.",
           "required": false
         },
         {
-          "name": "labels",
-          "type": "Partial<DatePickerLabels>",
+          "name": "slots",
+          "type": "readonly string[]",
           "default": null,
-          "description": "The words, passed translated; English by default.",
+          "description": "The times offered, `HH:mm` (`timeSlots(\"09:00\", \"17:00\", 30)`).",
           "required": false
         },
         {
-          "name": "max",
-          "type": "string",
+          "name": "value",
+          "type": "string | null",
           "default": null,
-          "description": "The latest date that can be picked.",
+          "description": "The time, `HH:mm` on 24 hours (controlled); `null` for none.",
           "required": false
         },
         {
-          "name": "min",
+          "name": "variant",
+          "type": "\"slots\" | \"wheel\"",
+          "default": null,
+          "description": "`wheel`: hours and minutes (and the period) as wheels — a time you set (a reminder, an alarm).\n`slots`: the free times as buttons — a booking, a delivery window, an appointment.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Wheel",
+      "description": "One column of a `WheelPicker`: a spinbutton over a scroll-snapped list of values.",
+      "props": [
+        {
+          "name": "label",
           "type": "string",
           "default": null,
-          "description": "The earliest date that can be picked.",
+          "description": "The column's accessible name (\"Hour\", \"Month\"), passed translated.",
+          "required": true
+        },
+        {
+          "name": "options",
+          "type": "readonly WheelOption[]",
+          "default": null,
+          "description": "The values, in order.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the column (a width: `w-20`).",
           "required": false
         },
         {
-          "name": "name",
+          "name": "defaultValue",
           "type": "string",
           "default": null,
-          "description": "The name of a hidden input holding the ISO value, for a plain `<form>` post.",
+          "description": "The chosen value at first, uncontrolled. Default: the first one.",
           "required": false
         },
         {
-          "name": "onValueChange",
-          "type": "((value: { start: string; end: string; } | null) => void)",
+          "name": "disabled",
+          "type": "boolean",
           "default": null,
-          "description": "Called once both ends are chosen (or with `null` when cleared).",
+          "description": "Not available.",
           "required": false
         },
         {
-          "name": "placeholder",
-          "type": "string",
+          "name": "onValueChange",
+          "type": "((value: string) => void)",
           "default": null,
-          "description": "Shown while nothing is chosen (\"Pick a date\"), passed translated.",
+          "description": "Called with the value that comes to rest under the band.",
           "required": false
         },
         {
-          "name": "presets",
-          "type": "readonly DateRangePreset[]",
+          "name": "value",
+          "type": "string | null",
           "default": null,
-          "description": "Ranges one click away (\"Last 7 days\", \"This month\"), beside the calendar.",
+          "description": "The chosen value (controlled).",
           "required": false
+        }
+      ]
+    },
+    {
+      "component": "WheelDivider",
+      "description": "A divider between two wheels (`:` between the hours and the minutes).",
+      "props": []
+    },
+    {
+      "component": "WheelPicker",
+      "description": "The frame of one or several wheels: a raised surface, the lit band across them, a group named by `label`.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The wheels (`Wheel`), and dividers (`WheelDivider`) between them.",
+          "required": true
         },
         {
-          "name": "today",
+          "name": "label",
           "type": "string",
           "default": null,
-          "description": "Today (marked): inject it for a stable server render or a test. Default: the device's date.",
+          "description": "The group's accessible name (\"Departure time\"), passed translated.",
+          "required": true
+        },
+        {
+          "name": "aria-describedby",
+          "type": "string",
+          "default": null,
+          "description": "The help text or the error that describes the group (their ids).",
           "required": false
         },
         {
-          "name": "value",
-          "type": "{ start: string; end: string; } | null",
+          "name": "className",
+          "type": "string",
           "default": null,
-          "description": "The chosen range (controlled); `null` for none. `end` is never `null` in a committed value.",
+          "description": "Classes merged on the root.",
           "required": false
         },
         {
-          "name": "weekStartsOn",
-          "type": "number",
+          "name": "invalid",
+          "type": "boolean",
           "default": null,
-          "description": "The first day of the week, 0 = Sunday. Default: the locale's.",
+          "description": "Marks the group invalid (a danger edge): pair it with an error read through `aria-describedby`.",
+          "required": false
+        },
+        {
+          "name": "visible",
+          "type": "3 | 5 | 7",
+          "default": "5",
+          "description": "How many values are visible: 3, 5 (default) or 7.",
           "required": false
         }
       ]