@krizaka/ui 3.1.0 → 3.3.0

package/registry/dialog.json

@@ -6,7 +6,7 @@
   "description": "A window over the page — centred, a bottom sheet or a side panel — and `AlertDialog` for a confirmation.",
   "status": "stable",
   "category": "overlays",
-  "platforms": "web",
+  "platforms": "both",
   "whenToUse": [
     "For a short task that must be finished or cancelled before going back: invite someone, edit a title.",
     "`AlertDialog` to confirm a destructive or irreversible action, with an async `onConfirm`.",
@@ -308,7 +308,78 @@
       }
     ]
   },
-  "native": null,
+  "native": {
+    "entry": "@krizaka/ui/native",
+    "import": "import { Sheet } from \"@krizaka/ui/native\";",
+    "differences": [
+      "One component, `Sheet`: a bottom sheet on React Native's `Modal` (focus kept inside, the back button and the scrim close it), its grip on top, rising with the theme's ease.",
+      "It holds what a phone shows over a screen: a choice (`Select`, `Combobox` use it), the details of a pin on a map, a short form."
+    ],
+    "props": [
+      {
+        "component": "Sheet",
+        "description": "A bottom sheet: it rises over a dimmed screen, its grip on top, the scrim closes it. The web `Dialog` on a phone —\na choice (`Select`, `Combobox`), the details of a pin on a map, a short form. React Native's `Modal`: focus stays\ninside, the back button closes it. Rises with the theme's ease; still under reduced motion.",
+        "props": [
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The content: a list, details, a form.",
+            "required": true
+          },
+          {
+            "name": "onOpenChange",
+            "type": "(open: boolean) => void",
+            "default": null,
+            "description": "Called to close it: the scrim pressed, the back button, a choice made.",
+            "required": true
+          },
+          {
+            "name": "open",
+            "type": "boolean",
+            "default": null,
+            "description": "Open (controlled).",
+            "required": true
+          },
+          {
+            "name": "closeLabel",
+            "type": "string",
+            "default": "Close",
+            "description": "The name of the close action read by screen readers (\"Close\"), passed translated.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the sheet.",
+            "required": false
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "The title at the top of the sheet (its accessible name), passed translated.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "sheet",
+        "title": "Bottom sheet",
+        "description": "The details of a pick-up point over the dimmed screen.",
+        "path": "examples/dialog/native/sheet.tsx",
+        "module": "@krizaka/ui/registry/examples/dialog/native/sheet",
+        "code": "import { Button, Sheet, Txt } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\n// A bottom sheet: it rises over the dimmed screen, the scrim or the back button closes it.\nexport default function NativeDialogSheet({ defaultOpen }: { defaultOpen?: boolean }) {\n  const [open, setOpen] = React.useState(Boolean(defaultOpen));\n  return (\n    <View>\n      <Button label=\"Show the pick-up point\" onPress={() => setOpen(true)} />\n      <Sheet open={open} onOpenChange={setOpen} title=\"Café Olimpico\">\n        <Txt tone=\"secondary\">124 Rue Saint-Viateur O, Montréal · 350 m away</Txt>\n        <Txt>Open until 10 pm. Ask for the order under your name at the counter.</Txt>\n        <Button label=\"Get directions\" variant=\"primary\" onPress={() => setOpen(false)} />\n      </Sheet>\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/dialog/native/sheet.dark.png",
+          "light": "examples/dialog/native/sheet.light.png"
+        }
+      }
+    ]
+  },
   "files": [
     {
       "path": "dialog/alert-dialog.tsx",
@@ -324,7 +395,7 @@
     },
     {
       "path": "dialog/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Dialog\",\n  summary: \"A window over the page — centred, a bottom sheet or a side panel — and `AlertDialog` for a confirmation.\",\n  status: \"stable\",\n  category: \"overlays\",\n  platforms: \"web\",\n  whenToUse: [\n    \"For a short task that must be finished or cancelled before going back: invite someone, edit a title.\",\n    \"`AlertDialog` to confirm a destructive or irreversible action, with an async `onConfirm`.\",\n    \"`Sheet` (bottom) on phones, `placement=\\\"right\\\"` for a side panel of details.\",\n    \"A gate the user must answer (age, terms): `hideClose` and `dismissible={false}`.\",\n  ],\n  whenNotToUse: [\n    { when: \"For information next to an element, without blocking the page.\", use: \"popover\" },\n    { when: \"For a message that needs no answer.\", use: \"toast\" },\n    { when: \"For a long form or a flow of several steps: give it its own page.\" },\n    { when: \"To confirm the deletion of one item in place.\", use: \"confirm-button\" },\n  ],\n  bestPractices: [\n    \"Always a `Dialog.Title`; a `Dialog.Description` when the title is not enough.\",\n    \"Name the buttons by what they do (“Send the invitation”), the cancel one by what it keeps (“Keep it”).\",\n    \"Pass `closeLabel` translated: it names the close button.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Esc\", action: \"Closes the dialog (unless `dismissible={false}`).\" },\n      { keys: \"Tab / Shift+Tab\", action: \"Move within the dialog: the focus is trapped while it is open.\" },\n    ],\n    notes: [\n      \"Radix Dialog: `role=\\\"dialog\\\"` (or `alertdialog`), `aria-modal`, named by its title and described by its description.\",\n      \"The focus moves into the dialog when it opens and returns to the trigger when it closes; the page behind does not scroll.\",\n      \"`AlertDialog` keeps the focus on the cancel button first.\",\n    ],\n  },\n  related: [\"popover\", \"confirm-button\", \"command\", \"toast\"],\n  web: {\n    imports: [\"Dialog\", \"Sheet\", \"AlertDialog\"],\n    examples: [\n      { name: \"center\", title: \"Centred\", description: \"A short form, `size=\\\"md\\\"`.\" },\n      { name: \"bottom\", title: \"Bottom sheet\", description: \"`placement=\\\"bottom\\\"`: a sheet on a phone, centred from `sm` up.\" },\n      { name: \"right\", title: \"Side panel\", description: \"`placement=\\\"right\\\"`: full height, for details.\" },\n      { name: \"left\", title: \"Navigation drawer\", description: \"`placement=\\\"left\\\"`: full height from the left, for an app's navigation on a phone.\" },\n      { name: \"sheet-form\", title: \"Sheet with a form\", description: \"`Sheet`, `size=\\\"lg\\\"`.\" },\n      { name: \"alert-destructive\", title: \"Alert dialog\", description: \"`AlertDialog tone=\\\"danger\\\"` with an async `onConfirm`.\" },\n      { name: \"gate\", title: \"Gate\", description: \"No close button: it closes only through its actions.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Dialog\",\n  summary: \"A window over the page — centred, a bottom sheet or a side panel — and `AlertDialog` for a confirmation.\",\n  status: \"stable\",\n  category: \"overlays\",\n  platforms: \"both\",\n  whenToUse: [\n    \"For a short task that must be finished or cancelled before going back: invite someone, edit a title.\",\n    \"`AlertDialog` to confirm a destructive or irreversible action, with an async `onConfirm`.\",\n    \"`Sheet` (bottom) on phones, `placement=\\\"right\\\"` for a side panel of details.\",\n    \"A gate the user must answer (age, terms): `hideClose` and `dismissible={false}`.\",\n  ],\n  whenNotToUse: [\n    { when: \"For information next to an element, without blocking the page.\", use: \"popover\" },\n    { when: \"For a message that needs no answer.\", use: \"toast\" },\n    { when: \"For a long form or a flow of several steps: give it its own page.\" },\n    { when: \"To confirm the deletion of one item in place.\", use: \"confirm-button\" },\n  ],\n  bestPractices: [\n    \"Always a `Dialog.Title`; a `Dialog.Description` when the title is not enough.\",\n    \"Name the buttons by what they do (“Send the invitation”), the cancel one by what it keeps (“Keep it”).\",\n    \"Pass `closeLabel` translated: it names the close button.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Esc\", action: \"Closes the dialog (unless `dismissible={false}`).\" },\n      { keys: \"Tab / Shift+Tab\", action: \"Move within the dialog: the focus is trapped while it is open.\" },\n    ],\n    notes: [\n      \"Radix Dialog: `role=\\\"dialog\\\"` (or `alertdialog`), `aria-modal`, named by its title and described by its description.\",\n      \"The focus moves into the dialog when it opens and returns to the trigger when it closes; the page behind does not scroll.\",\n      \"`AlertDialog` keeps the focus on the cancel button first.\",\n    ],\n  },\n  related: [\"popover\", \"confirm-button\", \"command\", \"toast\"],\n  web: {\n    imports: [\"Dialog\", \"Sheet\", \"AlertDialog\"],\n    examples: [\n      { name: \"center\", title: \"Centred\", description: \"A short form, `size=\\\"md\\\"`.\" },\n      { name: \"bottom\", title: \"Bottom sheet\", description: \"`placement=\\\"bottom\\\"`: a sheet on a phone, centred from `sm` up.\" },\n      { name: \"right\", title: \"Side panel\", description: \"`placement=\\\"right\\\"`: full height, for details.\" },\n      { name: \"left\", title: \"Navigation drawer\", description: \"`placement=\\\"left\\\"`: full height from the left, for an app's navigation on a phone.\" },\n      { name: \"sheet-form\", title: \"Sheet with a form\", description: \"`Sheet`, `size=\\\"lg\\\"`.\" },\n      { name: \"alert-destructive\", title: \"Alert dialog\", description: \"`AlertDialog tone=\\\"danger\\\"` with an async `onConfirm`.\" },\n      { name: \"gate\", title: \"Gate\", description: \"No close button: it closes only through its actions.\" },\n    ],\n  },\n  native: {\n    imports: [\"Sheet\"],\n    differences: [\n      \"One component, `Sheet`: a bottom sheet on React Native's `Modal` (focus kept inside, the back button and the scrim close it), its grip on top, rising with the theme's ease.\",\n      \"It holds what a phone shows over a screen: a choice (`Select`, `Combobox` use it), the details of a pin on a map, a short form.\",\n    ],\n    examples: [{ name: \"sheet\", title: \"Bottom sheet\", description: \"The details of a pick-up point over the dimmed screen.\" }],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "meta.ts",

package/registry/examples/combobox/native/multiple.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/combobox/native/multiple.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/combobox/native/multiple.tsx
+import { Combobox } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var TOPICS = ["Music", "Sport", "Art", "Cooking", "Gaming", "Travel"].map((t) => ({ value: t.toLowerCase(), label: t }));
+function NativeComboboxMultiple() {
+  const [topics, setTopics] = React.useState(["music", "travel"]);
+  return /* @__PURE__ */ jsx(View, { style: { width: 300 }, children: /* @__PURE__ */ jsx(Combobox, { label: "Interests", multiple: true, options: TOPICS, value: topics, onValueChange: (v) => setTopics(Array.isArray(v) ? v : [v]) }) });
+}
+export {
+  NativeComboboxMultiple as default
+};

package/registry/examples/combobox/native/multiple.tsx

@@ -0,0 +1,15 @@
+import { Combobox } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+const TOPICS = ["Music", "Sport", "Art", "Cooking", "Gaming", "Travel"].map((t) => ({ value: t.toLowerCase(), label: t }));
+
+// Several values: checkboxes in the sheet, Done closes it; the field lists the choices.
+export default function NativeComboboxMultiple() {
+  const [topics, setTopics] = React.useState<string[]>(["music", "travel"]);
+  return (
+    <View style={{ width: 300 }}>
+      <Combobox label="Interests" multiple options={TOPICS} value={topics} onValueChange={(v) => setTopics(Array.isArray(v) ? v : [v])} />
+    </View>
+  );
+}

package/registry/examples/combobox/native/search.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/combobox/native/search.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/combobox/native/search.tsx
+import { Combobox } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var CITIES = ["Montr\xE9al", "Qu\xE9bec", "Laval", "Gatineau", "Sherbrooke", "Trois-Rivi\xE8res"].map((c) => ({ value: c.toLowerCase(), label: c }));
+function NativeComboboxSearch() {
+  const [city, setCity] = React.useState("montr\xE9al");
+  return /* @__PURE__ */ jsx(View, { style: { width: 300 }, children: /* @__PURE__ */ jsx(Combobox, { label: "City", placeholder: "Choose a city", options: CITIES, value: city, onValueChange: (v) => setCity(String(v)) }) });
+}
+export {
+  NativeComboboxSearch as default
+};

package/registry/examples/combobox/native/search.tsx

@@ -0,0 +1,15 @@
+import { Combobox } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+const CITIES = ["Montréal", "Québec", "Laval", "Gatineau", "Sherbrooke", "Trois-Rivières"].map((c) => ({ value: c.toLowerCase(), label: c }));
+
+// A choice among many, searched in a sheet: what is typed filters the options.
+export default function NativeComboboxSearch() {
+  const [city, setCity] = React.useState<string>("montréal");
+  return (
+    <View style={{ width: 300 }}>
+      <Combobox label="City" placeholder="Choose a city" options={CITIES} value={city} onValueChange={(v) => setCity(String(v))} />
+    </View>
+  );
+}

package/registry/examples/date-picker/birth-date-wheel.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/date-picker/birth-date-wheel.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/date-picker/birth-date-wheel.tsx
+import { DateWheel } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function DatePickerBirthDateWheel() {
+  const [birth, setBirth] = React.useState("1994-06-18");
+  return /* @__PURE__ */ jsx(DateWheel, { label: "Date of birth", locale: "en-US", value: birth, onValueChange: setBirth, max: "2008-10-11", hint: "You must be 18 or older." });
+}
+export {
+  DatePickerBirthDateWheel as default
+};

package/registry/examples/date-picker/birth-date-wheel.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { DateWheel } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+// The wheels of a date of birth, in the locale's order, ending at the 18th birthday: an under-18 date cannot be chosen.
+// `max` is fixed here for the documentation; in an app, `max={latestBirthDate(18)}`.
+export default function DatePickerBirthDateWheel() {
+  const [birth, setBirth] = React.useState<string | null>("1994-06-18");
+  return <DateWheel label="Date of birth" locale="en-US" value={birth} onValueChange={setBirth} max="2008-10-11" hint="You must be 18 or older." />;
+}

package/registry/examples/date-picker/birth-date.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/date-picker/birth-date.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/date-picker/birth-date.tsx
+import { DateField, isRealDate, latestBirthDate } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function DatePickerBirthDate() {
+  const [birth, setBirth] = React.useState("2015-03-27");
+  const minor = isRealDate(birth) && birth > latestBirthDate(18);
+  return /* @__PURE__ */ jsx(
+    DateField,
+    {
+      label: "Date of birth",
+      locale: "en-GB",
+      autoComplete: "bday",
+      value: birth,
+      onValueChange: setBirth,
+      hint: "Private, never shown. For example, 27 3 1990.",
+      error: minor ? "You must be 18 or older to create an account." : void 0
+    }
+  );
+}
+export {
+  DatePickerBirthDate as default
+};

package/registry/examples/date-picker/birth-date.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { DateField, isRealDate, latestBirthDate } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+// A date of birth typed as day, month and year (the browser can fill it); an under-18 date is refused at once.
+export default function DatePickerBirthDate() {
+  const [birth, setBirth] = React.useState("2015-03-27");
+  const minor = isRealDate(birth) && birth > latestBirthDate(18);
+  return (
+    <DateField
+      label="Date of birth"
+      locale="en-GB"
+      autoComplete="bday"
+      value={birth}
+      onValueChange={setBirth}
+      hint="Private, never shown. For example, 27 3 1990."
+      error={minor ? "You must be 18 or older to create an account." : undefined}
+    />
+  );
+}

package/registry/examples/date-picker/calendar.js

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 var weekend = (iso) => [0, 6].includes((/* @__PURE__ */ new Date(`${iso}T12:00:00`)).getDay());
 function DatePickerCalendar() {
   const [day, setDay] = React.useState("2026-10-15");
-  return /* @__PURE__ */ jsx("div", { className: "inline-block rounded-xl border border-border-default bg-surface-1 p-3", children: /* @__PURE__ */ jsx(Calendar, { locale: "en-GB", value: day, onSelect: setDay, isDateDisabled: weekend, min: "2026-10-12", today: "2026-10-11" }) });
+  return /* @__PURE__ */ jsx(Calendar, { variant: "card", locale: "en-GB", value: day, onSelect: setDay, isDateDisabled: weekend, min: "2026-10-12", today: "2026-10-11" });
 }
 export {
   DatePickerCalendar as default

package/registry/examples/date-picker/calendar.tsx

@@ -5,12 +5,8 @@ import * as React from "react";
 
 const weekend = (iso: string) => [0, 6].includes(new Date(`${iso}T12:00:00`).getDay());
 
-// The month is the interface: pick a day for a call, weekends unavailable.
+// The month is the interface: a card of its own, weekends unavailable, today marked by the node.
 export default function DatePickerCalendar() {
   const [day, setDay] = React.useState("2026-10-15");
-  return (
-    <div className="inline-block rounded-xl border border-border-default bg-surface-1 p-3">
-      <Calendar locale="en-GB" value={day} onSelect={setDay} isDateDisabled={weekend} min="2026-10-12" today="2026-10-11" />
-    </div>
-  );
+  return <Calendar variant="card" locale="en-GB" value={day} onSelect={setDay} isDateDisabled={weekend} min="2026-10-12" today="2026-10-11" />;
 }

package/registry/examples/date-picker/day-strip.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/date-picker/day-strip.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/date-picker/day-strip.tsx
+import { DayStrip } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var closed = (iso) => (/* @__PURE__ */ new Date(`${iso}T12:00:00`)).getDay() === 0;
+var sessions = /* @__PURE__ */ new Set(["2026-10-14", "2026-10-17", "2026-10-21"]);
+function DatePickerDayStrip() {
+  const [day, setDay] = React.useState("2026-10-14");
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    DayStrip,
+    {
+      label: "Session day",
+      locale: "en-US",
+      value: day,
+      onValueChange: setDay,
+      start: "2026-10-11",
+      today: "2026-10-11",
+      isDateDisabled: closed,
+      isDateMarked: (d) => sessions.has(d),
+      labels: { marked: "has a session" }
+    }
+  ) });
+}
+export {
+  DatePickerDayStrip as default
+};

package/registry/examples/date-picker/day-strip.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { DayStrip } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+const closed = (iso: string) => new Date(`${iso}T12:00:00`).getDay() === 0;
+const sessions = new Set(["2026-10-14", "2026-10-17", "2026-10-21"]);
+
+// The next two weeks in a row: Sundays closed, the days with a session marked.
+export default function DatePickerDayStrip() {
+  const [day, setDay] = React.useState<string | null>("2026-10-14");
+  return (
+    <div className="w-full max-w-md">
+      <DayStrip
+        label="Session day"
+        locale="en-US"
+        value={day}
+        onValueChange={setDay}
+        start="2026-10-11"
+        today="2026-10-11"
+        isDateDisabled={closed}
+        isDateMarked={(d) => sessions.has(d)}
+        labels={{ marked: "has a session" }}
+      />
+    </div>
+  );
+}

package/registry/examples/date-picker/month-year.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/date-picker/month-year.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/date-picker/month-year.tsx
+import { MonthPicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function DatePickerMonthYear() {
+  const [month, setMonth] = React.useState("2026-09");
+  return /* @__PURE__ */ jsx(MonthPicker, { variant: "card", locale: "en-US", value: month, onValueChange: setMonth, max: "2026-10", current: "2026-10" });
+}
+export {
+  DatePickerMonthYear as default
+};

package/registry/examples/date-picker/month-year.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { MonthPicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+// A billing month: twelve months at a glance, the year above them, nothing later than this month.
+export default function DatePickerMonthYear() {
+  const [month, setMonth] = React.useState<string | null>("2026-09");
+  return <MonthPicker variant="card" locale="en-US" value={month} onValueChange={setMonth} max="2026-10" current="2026-10" />;
+}

package/registry/examples/date-picker/native/birth-date-wheel.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/date-picker/native/birth-date-wheel.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/date-picker/native/birth-date-wheel.tsx
+import { DateWheel } from "@krizaka/ui/native";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function NativeDatePickerBirthDateWheel() {
+  const [birth, setBirth] = React.useState("1994-06-18");
+  return /* @__PURE__ */ jsx(DateWheel, { label: "Date of birth", locale: "en-US", value: birth, onValueChange: setBirth, max: "2008-10-11", hint: "You must be 18 or older." });
+}
+export {
+  NativeDatePickerBirthDateWheel as default
+};

package/registry/examples/date-picker/native/birth-date-wheel.tsx

@@ -0,0 +1,9 @@
+import { DateWheel } from "@krizaka/ui/native";
+import * as React from "react";
+
+// The wheels of a date of birth in the locale's order, ending at the 18th birthday; each value passed ticks under the
+// thumb (the app's `haptics`). `max` is fixed here for the documentation; in an app, `max={latestBirthDate(18)}`.
+export default function NativeDatePickerBirthDateWheel() {
+  const [birth, setBirth] = React.useState<string | null>("1994-06-18");
+  return <DateWheel label="Date of birth" locale="en-US" value={birth} onValueChange={setBirth} max="2008-10-11" hint="You must be 18 or older." />;
+}

package/registry/examples/date-picker/native/calendar.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/date-picker/native/calendar.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/date-picker/native/calendar.tsx
+import { Calendar } from "@krizaka/ui/native";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function NativeDatePickerCalendar() {
+  const [day, setDay] = React.useState("2026-10-15");
+  return /* @__PURE__ */ jsx(Calendar, { locale: "en-US", value: day, onSelect: setDay, min: "2026-10-11", today: "2026-10-11" });
+}
+export {
+  NativeDatePickerCalendar as default
+};

package/registry/examples/date-picker/native/calendar.tsx

@@ -0,0 +1,8 @@
+import { Calendar } from "@krizaka/ui/native";
+import * as React from "react";
+
+// A month to book a day: 44-pt days, today's node, the past unavailable.
+export default function NativeDatePickerCalendar() {
+  const [day, setDay] = React.useState("2026-10-15");
+  return <Calendar locale="en-US" value={day} onSelect={setDay} min="2026-10-11" today="2026-10-11" />;
+}

package/registry/examples/date-picker/native/day-strip.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/date-picker/native/day-strip.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/date-picker/native/day-strip.tsx
+import { DayStrip } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var sessions = /* @__PURE__ */ new Set(["2026-10-14", "2026-10-17"]);
+function NativeDatePickerDayStrip() {
+  const [day, setDay] = React.useState("2026-10-14");
+  return /* @__PURE__ */ jsx(View, { style: { width: 320 }, children: /* @__PURE__ */ jsx(
+    DayStrip,
+    {
+      label: "Session day",
+      locale: "en-US",
+      value: day,
+      onValueChange: setDay,
+      start: "2026-10-11",
+      today: "2026-10-11",
+      days: 10,
+      isDateDisabled: (d) => (/* @__PURE__ */ new Date(`${d}T12:00:00`)).getDay() === 0,
+      isDateMarked: (d) => sessions.has(d),
+      markedLabel: "has a session"
+    }
+  ) });
+}
+export {
+  NativeDatePickerDayStrip as default
+};

package/registry/examples/date-picker/native/day-strip.tsx

@@ -0,0 +1,26 @@
+import { DayStrip } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+const sessions = new Set(["2026-10-14", "2026-10-17"]);
+
+// The days ahead, swiped sideways: Sundays closed, the days with a session marked.
+export default function NativeDatePickerDayStrip() {
+  const [day, setDay] = React.useState<string | null>("2026-10-14");
+  return (
+    <View style={{ width: 320 }}>
+      <DayStrip
+        label="Session day"
+        locale="en-US"
+        value={day}
+        onValueChange={setDay}
+        start="2026-10-11"
+        today="2026-10-11"
+        days={10}
+        isDateDisabled={(d) => new Date(`${d}T12:00:00`).getDay() === 0}
+        isDateMarked={(d) => sessions.has(d)}
+        markedLabel="has a session"
+      />
+    </View>
+  );
+}

package/registry/examples/date-picker/native/month-year.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/date-picker/native/month-year.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/date-picker/native/month-year.tsx
+import { MonthPicker } from "@krizaka/ui/native";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function NativeDatePickerMonthYear() {
+  const [month, setMonth] = React.useState("2026-09");
+  return /* @__PURE__ */ jsx(MonthPicker, { locale: "en-US", value: month, onValueChange: setMonth, max: "2026-10" });
+}
+export {
+  NativeDatePickerMonthYear as default
+};

package/registry/examples/date-picker/native/month-year.tsx

@@ -0,0 +1,8 @@
+import { MonthPicker } from "@krizaka/ui/native";
+import * as React from "react";
+
+// A billing month: the twelve months of the year, nothing later than this month.
+export default function NativeDatePickerMonthYear() {
+  const [month, setMonth] = React.useState<string | null>("2026-09");
+  return <MonthPicker locale="en-US" value={month} onValueChange={setMonth} max="2026-10" />;
+}

package/registry/examples/date-picker/native/time-slots.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/date-picker/native/time-slots.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/date-picker/native/time-slots.tsx
+import { TimePicker, timeSlots } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var taken = /* @__PURE__ */ new Set(["10:00", "11:30"]);
+function NativeDatePickerTimeSlots() {
+  const [time, setTime] = React.useState("10:30");
+  return /* @__PURE__ */ jsx(View, { style: { width: 320 }, children: /* @__PURE__ */ jsx(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 }) });
+}
+export {
+  NativeDatePickerTimeSlots as default
+};