@trading-game/design-intelligence-layer 0.10.0 → 0.11.0

package/README.md

@@ -83,7 +83,7 @@ npm install react react-dom tailwindcss
 
 ## What's inside
 
-- **55 UI components** — buttons, forms, dialogs, charts, sidebars, and more
+- **56 UI components** — buttons, forms, dialogs, charts, sidebars, and more
 - **Design tokens** — CSS custom properties for color, radius, typography, and transitions synced from Figma
 - **Transition tokens** — semantic duration and easing tokens (`duration-base`, `ease-standard`, etc.) — no hardcoded `duration-200` anywhere
 - **Light-only theme** — white backgrounds, black text, primary blue accents — no dark mode
@@ -129,6 +129,7 @@ npm install react react-dom tailwindcss
 | Link | `Link` |
 | Menubar | `Menubar, MenubarMenu, MenubarTrigger, MenubarContent, ...` |
 | Native Select | `NativeSelect, NativeSelectOptGroup, NativeSelectOption` |
+| Navigation Button | `NavigationButton, navigationButtonVariants` |
 | Navigation Menu | `NavigationMenu, NavigationMenuList, NavigationMenuTrigger, ...` |
 | Pagination | `Pagination, PaginationContent, PaginationLink, ...` |
 | Popover | `Popover, PopoverTrigger, PopoverContent, PopoverAnchor` |
@@ -185,6 +186,23 @@ Blocks are pre-composed UI patterns built from design system primitives. They ar
 <Button size="icon-xs" /> // 24px square
 ```
 
+## Navigation Button
+
+An icon-only tertiary button for navigation actions. Transparent background, black icon color (`text-on-prominent`), grey hover (`bg-secondary-hover`). All sizes follow the 8-point grid.
+
+```tsx
+<NavigationButton size="lg" aria-label="Home"><HomeIcon /></NavigationButton>
+```
+
+| Size | Button | Icon |
+|------|--------|------|
+| `lg` | 48px | 24px |
+| `md` | 40px | 20px |
+| `sm` | 32px | 20px |
+| `xs` | 24px | 16px |
+
+States: hover (`bg-secondary-hover`), focus (3px `ring-ring/50`), active (`opacity-60`), disabled (`opacity-24`). Supports `asChild` for custom elements.
+
 ## Badge variants
 
 ```tsx
@@ -241,6 +259,15 @@ The `lg` variant of `Link` uses `text-base` (16px). The `md` and `sm` variants u
 <Link size="sm" />  // 12px — font-xs
 ```
 
+### Select — sizes
+`SelectTrigger` accepts a `size` prop with three values matching the `Input` height scale:
+
+```tsx
+<SelectTrigger size="sm" />   // h-8  (32px) — text-xs
+<SelectTrigger size="md" />   // h-10 (40px) — text-sm  (default)
+<SelectTrigger size="lg" />   // h-12 (48px) — text-base
+```
+
 ### Tabs — line variant hover
 On the `line` variant, hover state shows `text-primary` (blue) with no background fill. On the `default` (pill) variant, hover shows a grey background with `text-on-prominent`.
 
@@ -274,6 +301,7 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 | `text-on-prominent` | `#000000` | Primary text on light backgrounds |
 | `text-on-prominent-static-inverse` | `#FFFFFF` | Always white — for text on dark/primary backgrounds |
 | `text-on-subtle` | mid grey | Secondary / supporting text |
+| `text-on-disabled` | `#BBBBBB` | Disabled / inactive text |
 
 | `text-primary` | `#2323FF` | Brand blue inline text |
 | `text-semantic-win` | green | Profit / positive text |
@@ -480,6 +508,7 @@ See node_modules/@trading-game/design-intelligence-layer/README.md for complete
 | `bg-white` | `bg-prominent` or `bg-card` | Not a semantic token |
 | `text-white` | `text-on-prominent-static-inverse` | Use the semantic inverse token |
 | `text-black` | `text-on-prominent` | Not a semantic token |
+| `text-gray-400` | `text-on-disabled` | Use the disabled text token |
 | `bg-black/50` | `bg-overlay` | Overlay has its own token |
 | `bg-[#2323FF]` | `bg-primary` | Hardcoded hex — use token |
 | `border-border` | `border-border-subtle` | Old name — prefer the new explicit name |
@@ -548,6 +577,11 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 
 ## Changelog
 
+### v0.10.1
+- **TicketCard — Wallet icon:** Default icon in the circular badge is now a `Wallet` icon (replaces `CircleDollarSign`).
+- **TicketCard — sentence case labels:** The label above the value (e.g. "Total balance") and the stub label (e.g. "Deposit") no longer apply `uppercase` or `tracking-widest`. Both render in sentence case with default letter spacing.
+- **Select — sm / md / lg sizes:** `SelectTrigger` now accepts `size="sm"` (h-8, text-xs) | `"md"` (h-10, text-sm, **default**) | `"lg"` (h-12, text-base), matching the `Input` and `InputGroup` height scale. The previous `"default"` size alias is replaced by `"md"`.
+
 ### v0.10.0
 - **Demo app — responsive mobile layout:** The component playground is now fully mobile-friendly. Foundations / Components / Blocks navigation moves to a fixed bottom tab bar on mobile. A hamburger menu opens a slide-in Sheet to pick any component within the active tab. The desktop sidebar and inline tab switcher are unchanged.
 - **Sonner toast — mobile-aware behaviour:** Toasts now appear at `top-center` on mobile (single visible toast) and `bottom-right` on desktop (up to 3). Added custom token-based styling (`--on-prominent` background, inverse text, `font-display` title).