@krizaka/ui 3.1.0 → 3.2.0

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "items": [
     {
       "name": "achievement",
@@ -592,20 +592,21 @@
       "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",
       "examples": {
-        "web": 5,
-        "native": 1
+        "web": 12,
+        "native": 7
       },
       "dependencies": [
         "@krizaka/intl@^0.1.0",
         "tailwind-variants@^3.3.1"
       ],
       "registryDependencies": [
+        "cn",
         "popover"
       ]
     },

package/registry/theme.json

@@ -153,6 +153,13 @@
             "description": "Font families the app has loaded (`expo-font`…); absent: the system font.",
             "required": false
           },
+          {
+            "name": "haptics",
+            "type": "((kind: HapticKind) => void)",
+            "default": null,
+            "description": "Plays the haptics of the controls (a wheel's tick, a slider's step, a tactile button). The platform has no module:\nthe app passes one — `(kind) => kind === \"selection\" ? Haptics.selectionAsync() : Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)`\nwith expo-haptics. Absent: no haptics.",
+            "required": false
+          },
           {
             "name": "mode",
             "type": "Mode",

package/skills/date-picker/SKILL.md

@@ -0,0 +1,43 @@
+---
+name: krizaka-date-picker
+description: Dates and times in a Krizaka app (Next.js or Expo) with @krizaka/ui/date-picker and @krizaka/ui/native — DatePicker, DateRangePicker (presets, two months), Calendar inline, MonthPicker, DayStrip, WheelPicker + Wheel, TimePicker (wheels or slots), DateField (typed) and DateWheel (an age gate), with ISO values (YYYY-MM-DD, YYYY-MM, HH:mm) and the helpers (latestBirthDate, timeSlots, ageOn, formatTime). Use it instead of <input type="date">, a date library's picker, @react-native-community/datetimepicker or a hand-made calendar.
+---
+
+# @krizaka/ui/date-picker · @krizaka/ui/native
+
+## Rules
+
+1. Values are ISO strings everywhere — state, address, form, API: a day `YYYY-MM-DD`, a month `YYYY-MM`, a time `HH:mm`
+   (24 hours, whatever the locale shows). Format only for display (`formatTime`, `@krizaka/intl`'s `formatDate`).
+2. Always pass the person's `locale`: month and day names, the first day of the week, the order of day · month · year
+   and 12 / 24 hours follow it. Words of the controls (`labels`) arrive translated.
+3. Pick by the task, not by habit:
+   - a day near today in a form → `DatePicker`; a period → `DateRangePicker` with `presets`;
+   - the month is the interface (availability, booking) → `<Calendar variant="card">` (native: `Calendar`);
+   - the next days (delivery, session, agenda) → `DayStrip` (`isDateDisabled`, `isDateMarked`);
+   - a time to set → `TimePicker` (wheels, `minuteStep`); a time to book → `<TimePicker variant="slots" slots={timeSlots("09:00", "17:00", 30)} isTimeDisabled={…}>`;
+   - a month (billing, expiry, report) → `MonthPicker`;
+   - a date of birth or any date years away → `DateField` (typed, `autoComplete="bday"`) or `DateWheel` — never a calendar.
+4. Bound rather than refuse: `min` / `max`, `isDateDisabled`, `isTimeDisabled`. An age gate is
+   `max={latestBirthDate(18)}` on `DateWheel`, and the same rule in the schema (`d <= latestBirthDate(18)`), checked again by the server.
+5. Native haptics come from the app: `<ThemeProvider haptics={(k) => k === "selection" ? Haptics.selectionAsync() : Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}>`
+   (expo-haptics). The platform has no native module.
+6. In a form, use the form's `DateField` (`@krizaka/ui/form`: `entry="calendar" | "parts" | "wheel"`; native: wheels by
+   default) — never wire a picker to a field by hand.
+
+## Recipes
+
+```tsx
+import { DateRangePicker, DayStrip, TimePicker, timeSlots, DateWheel, latestBirthDate } from "@krizaka/ui/date-picker";
+
+<DateRangePicker label={t("report.period")} locale={locale} value={period} onValueChange={setPeriod} max={today}
+  presets={[{ label: t("report.last7"), start: addDays(today, -6), end: today }]} />
+<DayStrip label={t("delivery.day")} locale={locale} value={day} onValueChange={setDay} isDateDisabled={isSunday} />
+<TimePicker variant="slots" label={t("booking.time")} locale={locale} slots={timeSlots("09:00", "17:00", 30)}
+  isTimeDisabled={(t) => taken.has(t)} value={time} onValueChange={setTime} />
+<DateWheel label={t("signUp.birth")} locale={locale} max={latestBirthDate(18)} value={birth} onValueChange={setBirth} />
+```
+
+- Native has no popover field: put `Calendar`, `DayStrip` or the wheels in the screen or in a `Sheet`.
+- A wheel is a `spinbutton` (web: ↑ ↓, Page Up / Down, Home / End) and an adjustable control on iOS / Android (swipe up
+  or down with VoiceOver / TalkBack): always give each `Wheel` its `label`.

package/dist/chunk-2USC2YT6.js

@@ -1,17 +0,0 @@
-"use client";
-
-// src/cn.ts
-import { clsx } from "clsx";
-import { cn as merge } from "tailwind-variants";
-function cn(...inputs) {
-  return merge(clsx(inputs)) ?? "";
-}
-
-// src/floating.ts
-var floating = "kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden";
-
-export {
-  cn,
-  floating
-};
-//# sourceMappingURL=chunk-2USC2YT6.js.map

package/dist/chunk-2USC2YT6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/cn.ts","../src/floating.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cn as merge } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n * tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer):\n * hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean\n * install of the packed package.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return merge(clsx(inputs)) ?? \"\";\n}\n","// The one surface of everything that floats next to its trigger (popover, menu, tooltip): a raised surface, a border,\n// the large shadow and the `kz-pop` entrance from the side Radix measured (`--radix-*-transform-origin`).\nexport const floating =\n  \"kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden\";\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,MAAM,aAAa;AAWrB,SAAS,MAAM,QAA8B;AAClD,SAAO,MAAM,KAAK,MAAM,CAAC,KAAK;AAChC;;;ACZO,IAAM,WACX;","names":[]}

package/dist/chunk-5AXLA4LK.js

@@ -1,13 +0,0 @@
-"use client";
-
-// src/cn.ts
-import { clsx } from "clsx";
-import { cn as merge } from "tailwind-variants";
-function cn(...inputs) {
-  return merge(clsx(inputs)) ?? "";
-}
-
-export {
-  cn
-};
-//# sourceMappingURL=chunk-5AXLA4LK.js.map

package/dist/chunk-5AXLA4LK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cn as merge } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n * tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer):\n * hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean\n * install of the packed package.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return merge(clsx(inputs)) ?? \"\";\n}\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,MAAM,aAAa;AAWrB,SAAS,MAAM,QAA8B;AAClD,SAAO,MAAM,KAAK,MAAM,CAAC,KAAK;AAChC;","names":[]}

package/dist/chunk-FJDSLNXK.js

@@ -1,11 +0,0 @@
-// src/cn.ts
-import { clsx } from "clsx";
-import { cn as merge } from "tailwind-variants";
-function cn(...inputs) {
-  return merge(clsx(inputs)) ?? "";
-}
-
-export {
-  cn
-};
-//# sourceMappingURL=chunk-FJDSLNXK.js.map

package/dist/chunk-FJDSLNXK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cn as merge } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n * tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer):\n * hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean\n * install of the packed package.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return merge(clsx(inputs)) ?? \"\";\n}\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,MAAM,aAAa;AAWrB,SAAS,MAAM,QAA8B;AAClD,SAAO,MAAM,KAAK,MAAM,CAAC,KAAK;AAChC;","names":[]}

package/dist/chunk-KNBYZGSQ.js

@@ -1,11 +0,0 @@
-// src/cn.ts
-import { clsx } from "clsx";
-import { cn as merge } from "tailwind-variants";
-function cn(...inputs) {
-  return merge(clsx(inputs)) ?? "";
-}
-
-export {
-  cn
-};
-//# sourceMappingURL=chunk-KNBYZGSQ.js.map

package/dist/chunk-KNBYZGSQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cn as merge } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n * tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer):\n * hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean\n * install of the packed package.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return merge(clsx(inputs)) ?? \"\";\n}\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,MAAM,aAAa;AAWrB,SAAS,MAAM,QAA8B;AAClD,SAAO,MAAM,KAAK,MAAM,CAAC,KAAK;AAChC;","names":[]}

package/dist/chunk-VCAAHCHL.js

@@ -1,17 +0,0 @@
-// src/cn.ts
-import { clsx } from "clsx";
-import { cn as merge } from "tailwind-variants";
-function cn(...inputs) {
-  return merge(clsx(inputs)) ?? "";
-}
-
-// src/story-variant.ts
-var storyVariantClass = (variant) => variant === "arcade" ? "kzs-arcade" : void 0;
-var brandClass = (brand) => brand ? `brand-${brand}` : void 0;
-
-export {
-  cn,
-  storyVariantClass,
-  brandClass
-};
-//# sourceMappingURL=chunk-VCAAHCHL.js.map

package/dist/chunk-VCAAHCHL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/cn.ts","../src/story-variant.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cn as merge } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n * tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer):\n * hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean\n * install of the packed package.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return merge(clsx(inputs)) ?? \"\";\n}\n","// The two looks of the storytelling kit (story.css), shared by its entries. Server-safe.\n\n/** The look of the storytelling kit: `default` (sober, for any app) or `arcade` (the opt-in cabinet flavour). */\nexport type StoryVariant = \"default\" | \"arcade\";\n\n/** The class a storytelling component adds for its look (`kzs-arcade` for the arcade flavour). */\nexport const storyVariantClass = (variant: StoryVariant | undefined) => (variant === \"arcade\" ? \"kzs-arcade\" : undefined);\n\n/** The class of a brand scope (`brand-orochia`): the accent and the gradient become that brand's. */\nexport const brandClass = (brand: string | undefined) => (brand ? `brand-${brand}` : undefined);\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,MAAM,aAAa;AAWrB,SAAS,MAAM,QAA8B;AAClD,SAAO,MAAM,KAAK,MAAM,CAAC,KAAK;AAChC;;;ACRO,IAAM,oBAAoB,CAAC,YAAuC,YAAY,WAAW,eAAe;AAGxG,IAAM,aAAa,CAAC,UAA+B,QAAQ,SAAS,KAAK,KAAK;","names":[]}