@krizaka/ui 3.1.0 → 3.2.0

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
+};

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

@@ -0,0 +1,15 @@
+import { TimePicker, timeSlots } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+const taken = new Set(["10:00", "11:30"]);
+
+// The free times of an agenda as buttons; taken ones dashed and struck through.
+export default function NativeDatePickerTimeSlots() {
+  const [time, setTime] = React.useState<string | null>("10:30");
+  return (
+    <View style={{ width: 320 }}>
+      <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} />
+    </View>
+  );
+}

package/registry/examples/date-picker/native/time-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/time-wheel.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/date-picker/native/time-wheel.tsx
+import { TimePicker } from "@krizaka/ui/native";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function NativeDatePickerTimeWheel() {
+  const [time, setTime] = React.useState("19:30");
+  return /* @__PURE__ */ jsx(TimePicker, { label: "Remind me at", locale: "en-US", value: time, onValueChange: setTime });
+}
+export {
+  NativeDatePickerTimeWheel as default
+};

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

@@ -0,0 +1,8 @@
+import { TimePicker } from "@krizaka/ui/native";
+import * as React from "react";
+
+// A reminder set by the thumb: hours, minutes by 5, the period of a 12-hour locale. The value is "HH:mm".
+export default function NativeDatePickerTimeWheel() {
+  const [time, setTime] = React.useState<string | null>("19:30");
+  return <TimePicker label="Remind me at" locale="en-US" value={time} onValueChange={setTime} />;
+}

package/registry/examples/date-picker/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/time-slots.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/date-picker/time-slots.tsx
+import { TimePicker, timeSlots } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var taken = /* @__PURE__ */ new Set(["10:00", "13:30", "14:00"]);
+function DatePickerTimeSlots() {
+  const [time, setTime] = React.useState("11:00");
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    TimePicker,
+    {
+      variant: "slots",
+      label: "Appointment time",
+      locale: "en-US",
+      slots: timeSlots("09:00", "17:00", 30),
+      isTimeDisabled: (t) => taken.has(t),
+      groupLabels: { morning: "Morning", afternoon: "Afternoon", evening: "Evening" },
+      value: time,
+      onValueChange: setTime
+    }
+  ) });
+}
+export {
+  DatePickerTimeSlots as default
+};

package/registry/examples/date-picker/time-slots.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { TimePicker, timeSlots } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+const taken = new Set(["10:00", "13:30", "14:00"]);
+
+// The free times of an agenda, by part of the day; taken slots are struck through and skipped by the arrows.
+export default function DatePickerTimeSlots() {
+  const [time, setTime] = React.useState<string | null>("11:00");
+  return (
+    <div className="w-full max-w-md">
+      <TimePicker
+        variant="slots"
+        label="Appointment time"
+        locale="en-US"
+        slots={timeSlots("09:00", "17:00", 30)}
+        isTimeDisabled={(t) => taken.has(t)}
+        groupLabels={{ morning: "Morning", afternoon: "Afternoon", evening: "Evening" }}
+        value={time}
+        onValueChange={setTime}
+      />
+    </div>
+  );
+}

package/registry/examples/date-picker/time-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/time-wheel.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/date-picker/time-wheel.tsx
+import { TimePicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function DatePickerTimeWheel() {
+  const [time, setTime] = React.useState("19:30");
+  return /* @__PURE__ */ jsx(TimePicker, { label: "Remind me at", locale: "en-US", value: time, onValueChange: setTime, minuteStep: 5 });
+}
+export {
+  DatePickerTimeWheel as default
+};

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

@@ -0,0 +1,10 @@
+"use client";
+
+import { TimePicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+// A reminder set by the thumb: hours, minutes by 5 and the period, as the locale writes them. The value is "HH:mm".
+export default function DatePickerTimeWheel() {
+  const [time, setTime] = React.useState<string | null>("19:30");
+  return <TimePicker label="Remind me at" locale="en-US" value={time} onValueChange={setTime} minuteStep={5} />;
+}

package/registry/examples/date-picker/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/wheel.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/date-picker/wheel.tsx
+import { Wheel, WheelPicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var sizes = Array.from({ length: 12 }, (_, i) => ({ value: String(i + 1), label: i === 0 ? "1 guest" : `${i + 1} guests` }));
+function DatePickerWheel() {
+  const [size, setSize] = React.useState("4");
+  return /* @__PURE__ */ jsx(WheelPicker, { label: "Party size", children: /* @__PURE__ */ jsx(Wheel, { label: "Guests", options: sizes, value: size, onValueChange: setSize, className: "w-36" }) });
+}
+export {
+  DatePickerWheel as default
+};

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

@@ -0,0 +1,16 @@
+"use client";
+
+import { Wheel, WheelPicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+const sizes = Array.from({ length: 12 }, (_, i) => ({ value: String(i + 1), label: i === 0 ? "1 guest" : `${i + 1} guests` }));
+
+// Any short list turned by the thumb: a party size. The keyboard moves it too (↑ ↓, Page Up / Down, Home / End).
+export default function DatePickerWheel() {
+  const [size, setSize] = React.useState("4");
+  return (
+    <WheelPicker label="Party size">
+      <Wheel label="Guests" options={sizes} value={size} onValueChange={setSize} className="w-36" />
+    </WheelPicker>
+  );
+}