@trading-game/design-intelligence-layer 1.1.0 → 1.2.0

package/docs/components/calendar.md

@@ -6,7 +6,7 @@ Date and date-range picker built on react-day-picker, restyled with circular day
 
 - Picking expiry dates, statement ranges, or tournament windows — single dates or ranges.
 
-**When not:** For choosing from a short list of preset periods use [Chip](./chip.md) rows or a Select. Embed the calendar in a Popover for input-triggered pickers.
+**When not:** For choosing from a short list of preset periods use [Chip](./chip.md) rows or a Select. Embed the calendar in a Popover for input-triggered pickers. On phones, use [Date Wheel Picker](./date-wheel-picker.md) in a Drawer instead. The month grid is cramped at phone width and slow for dates years away.
 
 ## Anatomy
 

package/docs/components/date-wheel-picker.md

@@ -0,0 +1,106 @@
+# Date Wheel Picker
+
+The phone's date picker: three scroll-snap wheels (day / month / year) behind one selection band. The band is the only place the date shows.
+
+## When to use
+
+- Picking a date on a phone, especially far from today: date of birth, document expiry, an order's end date.
+- Inside a [Drawer](./drawer.md): the phone pattern. The picker owns no surface, header, or button, so the Drawer supplies the title and the footer supplies Save.
+
+**When not:** On desktop, or for picking near dates where seeing the week matters, use [Calendar](./calendar.md) (in a [Popover](./popover.md)). For a date range use Calendar `mode="range"`. Don't pair the wheels with a text field showing the same date. The band already shows it, and two readouts of one value is the redundancy this component exists to remove.
+
+## Anatomy
+
+- `DateWheelPicker`: `role="group"`, `aria-label="Date"`, a 200px row of three wheels with a 4px gap. `data-slot="date-wheel-picker"`.
+- Band: a 40px `rounded-md` row in `bg-background-brand-selected`, fixed behind the middle row. `data-slot="date-wheel-picker-band"`.
+- Wheels: one per part, `role="spinbutton"` with `aria-label` Day / Month / Year and `aria-valuetext` the visible label. `data-slot="date-wheel-picker-wheel"`. Five 40px rows show; edges fade with a mask.
+- Rows: `type-date-wheel-picker-item`, `data-selected` on the row under the band, `data-disabled` on rows outside the range.
+
+## API
+
+### DateWheelPicker
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `value` | `Date` | — | Controlled date. The wheels always show a date. |
+| `defaultValue` | `Date` | today | Uncontrolled start. Clamped to the range. |
+| `onValueChange` | `(date: Date) => void` | — | Fires once a wheel settles (~120ms after scrolling stops). It never fires mid-spin. |
+| `min` | `Date` | 1 Jan 1900 | Earliest selectable day (time ignored). |
+| `max` | `Date` | 31 Dec, 10 years ahead | Latest selectable day (time ignored). |
+| `order` | `"dmy" \| "mdy" \| "ymd"` | `"dmy"` | Wheel order, left to right. |
+| `monthFormat` | `"long" \| "short" \| "numeric"` | `"long"` | `January` / `Jan` / `01`. Long months get a wider wheel. |
+| `locale` | `string` | runtime locale | BCP 47 tag for month names. |
+
+`defaultValue` and `onChange` are omitted from the div props; everything else passes through.
+
+## Variants & sizes
+
+No variants and no sizes. The picker always uses the 40px row rail, five rows tall (200px), and fills its container's width.
+
+```tsx
+import {
+  Button,
+  DateWheelPicker,
+  Drawer,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@trading-game/design-intelligence-layer"
+
+// The profile pattern: "Add" opens a Drawer holding only the wheels and Save.
+const today = new Date()
+const adultCutoff = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate())
+
+const [draft, setDraft] = React.useState<Date>(dob ?? adultCutoff)
+
+<Drawer open={open} onOpenChange={setOpen}>
+  <DrawerContent dismiss="close">
+    <DrawerHeader>
+      <DrawerTitle>{dob ? "Edit" : "Add"} date of birth</DrawerTitle>
+    </DrawerHeader>
+    <div className="px-4">
+      <DateWheelPicker value={draft} onValueChange={setDraft} max={adultCutoff} />
+    </div>
+    <DrawerFooter>
+      <Button onClick={() => save(draft)}>Save</Button>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>
+
+// A future range, year first, numeric months:
+<DateWheelPicker value={expiry} onValueChange={setExpiry} min={new Date()} order="ymd" monthFormat="numeric" />
+```
+
+**Responsive:** render the wheels in a Drawer on phones and [Calendar](./calendar.md) in a Popover on desktop, switching on `useIsMobile()`. The demo app's Date Wheel Picker page shows both behind the screen-mode toggle.
+
+## Tokens
+
+**Colour (semantic):**
+- band: `bg-background-brand-selected`
+- selected row: `text-text-brand-selected`. Other rows: `text-text-subtle-default`. Out of range: `text-text-disabled-default`
+- focus: 3px `ring-ring-focus-strong` around the focused wheel
+
+**Type (private):** `--date-wheel-picker-item-*`: 16 / 24, regular, with the selected row stepping to semibold (`--date-wheel-picker-item-selected-font-weight`) through a CSS data-attribute rule on `.type-date-wheel-picker-item[data-selected]`.
+
+## Behaviour
+
+- **Settling.** Rows snap to the band. The highlight follows the finger live, and `onValueChange` fires only after the wheel has rested for ~120ms.
+- **Range.** Dates outside `min`/`max` stay visible but greyed. A wheel that settles on one springs back to the nearest allowed row, and the highlight moves straight away rather than waiting for the animation. A month is disabled only when none of its days are in range. The year wheel lists only years in range.
+- **Clamping.** Changing month or year clamps the day to the month's length (31 → 30, Feb 28/29 in leap years) and then to the range.
+- **Always a value.** The wheels always show a date. To let people save without spinning, start the controlled value at the date the picker opens on, as the profile does with the 18-years-ago cutoff.
+- **Keyboard.** Each wheel is a spinbutton: Arrow Up/Down step one allowed row, Page Up/Down step five, Home/End jump to the first or last allowed row.
+- **Motion.** Smooth scrolling and the selected row's 4% scale both turn off under `prefers-reduced-motion`. On Android, each row passed gives a light vibration tick. iOS ignores it.
+
+## Do / Don't
+
+**Do**
+- Put it in a Drawer with a clear title ("Add date of birth") and a Save button in the footer.
+- Set `max` for age rules and `min` for future-only dates, so impossible dates never reach validation.
+- Open on a sensible date (the age cutoff, today, or the saved value) so most people spin a few rows, not decades.
+
+**Don't**
+- Don't add a text field or a readout that repeats the selected date.
+- Don't use it on desktop. The calendar grid is faster with a mouse.
+- Don't wrap it in its own card or border inside a Drawer. The Drawer is the surface.
+- Don't restyle the band with brand washes (`bg-brand-default/10`). The selected family is what keeps it legible in dark.

package/docs/components/toast.md

@@ -21,7 +21,7 @@ Transient notification system — a themed wrapper around `sonner` on the invers
 | --- | --- | --- | --- |
 | ...props | sonner `ToasterProps` | — | All pass through; the wrapper presets the values below (overridable). |
 
-Preset defaults: `theme` from `next-themes` (`useTheme`, fallback `"system"`); `position` `"top-center"` on mobile / `"bottom-right"` on desktop (`useIsMobile`); `visibleToasts` 1 mobile / 3 desktop; `duration` 4000ms; status icons CircleCheck / Info / TriangleAlert / OctagonX / spinning Loader2, all `size-4`.
+Preset defaults: `theme` `"system"` (no theme-provider dependency); `position` `"top-center"` on mobile / `"bottom-right"` on desktop (`useIsMobile`); `visibleToasts` 1 mobile / 3 desktop; `duration` 4000ms; status icons CircleCheck / Info / TriangleAlert / OctagonX / spinning Loader2, all `size-4`.
 
 ## Variants & sizes
 
@@ -49,7 +49,7 @@ toast.error("Deposit failed", {
 
 - Renders on the inverse surface: dark card on the light theme, light card on dark — with no border and no shadow class of its own.
 - Position and stack depth adapt to viewport: mobile shows a single toast top-center; desktop stacks up to three bottom-right.
-- Theme sync comes from `next-themes`, so the app must be inside a `ThemeProvider` for correct light/dark toasts.
+- No theme provider needed: the toast paints from inverse tokens, which already follow the app's `dark` class. Sonner's `theme` prop only reaches its cancel and close buttons, so apps that use those can pass `theme` explicitly.
 - Every toast auto-dismisses after 4 seconds unless overridden per call.
 - All sonner options (promise toasts, custom duration, `richColors` off by default) remain available through the `toast` API and `Toaster` props.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -25,12 +25,13 @@
   "scripts": {
     "dev": "next dev -H 127.0.0.1 -p 4000",
     "generate:registry": "node scripts/generate-component-registry.mjs",
-    "build": "tsup",
+    "build": "tsup && npm run check:dist",
     "build:next": "next build",
     "start": "next start",
     "lint": "eslint",
     "prepublishOnly": "npm run build",
     "check:tokens": "node scripts/check-token-docs.mjs",
+    "check:dist": "node scripts/check-dist-imports.mjs",
     "predev": "rm -rf .next"
   },
   "files": [

package/src/styles.css

@@ -1245,6 +1245,10 @@
   --numpad-font-size: var(--primitive-font-size-20);
   --numpad-font-weight: var(--primitive-font-weight-medium);
   --numpad-line-height: var(--primitive-line-height-28);
+  --date-wheel-picker-item-font-size: var(--primitive-font-size-16);
+  --date-wheel-picker-item-line-height: var(--primitive-line-height-24);
+  --date-wheel-picker-item-font-weight: var(--primitive-font-weight-regular);
+  --date-wheel-picker-item-selected-font-weight: var(--primitive-font-weight-semibold);
   /* ── Pagination — component type tokens (private) ── */
   --pagination-font-size: var(--primitive-font-size-14);
   --pagination-font-weight: var(--primitive-font-weight-semibold);
@@ -1820,6 +1824,17 @@
   font-weight: var(--numpad-font-weight);
 }
 
+/* Date Wheel Picker rows — the selected row steps to semibold. A data-attribute
+   rule, not a variant: .type-* classes can't be gated by utilities. */
+.type-date-wheel-picker-item {
+  font-size: var(--date-wheel-picker-item-font-size);
+  line-height: var(--date-wheel-picker-item-line-height);
+  font-weight: var(--date-wheel-picker-item-font-weight);
+}
+.type-date-wheel-picker-item[data-selected] {
+  font-weight: var(--date-wheel-picker-item-selected-font-weight);
+}
+
 .type-pagination {
   font-size: var(--pagination-font-size);
   line-height: var(--pagination-line-height);