@trading-game/design-intelligence-layer 0.10.1 → 0.11.1

package/guides/design-system-guide/trading-game-ds-guide.md

@@ -151,6 +151,7 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
 | `--on-prominent`                | `text-on-prominent`                     | Primary text (headings, body) |
 | `--on-prominent-static-inverse` | `text-on-prominent-static-inverse`      | Always-white text (e.g. on primary blue buttons) |
 | `--on-subtle`                   | `text-on-subtle`                        | Secondary text (descriptions, labels) |
+| `--on-disabled`                 | `text-on-disabled`                      | Disabled text (inactive controls, placeholders) |
 
 ### 2.5 — Borders & Inputs
 
@@ -281,6 +282,7 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
 | Write primary heading text             | `text-on-prominent`               | Pure white, raw hex colors             |
 | Write body / description text          | `text-on-subtle`                  | `text-on-prominent` for descriptions   |
 | Write a subtle label                   | `text-on-subtle`                  | Raw gray values                        |
+| Write disabled / inactive text         | `text-on-disabled`                | `text-gray-300`, raw light hex values  |
 | Add a default border                   | `border-border-subtle`            | Solid black borders, `border-border`   |
 | Add a strong border                    | `border-border-prominent`         | —                                      |
 | Style an input (resting)               | `border-input`                    | Solid colored backgrounds              |
@@ -529,6 +531,7 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 | Label | [simple] | — |
 | Link | [simple] | — |
 | Menubar | [complex] | MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarLabel, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, MenubarShortcut |
+| NavigationButton | [simple] | — |
 | NavigationMenu | [complex] | NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle |
 | NativeSelect | [simple] | NativeSelectOption, NativeSelectOptGroup |
 | Pagination | [composed] | PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis |
@@ -537,7 +540,7 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 | RadioGroup | [composed] | RadioGroupItem |
 | Resizable | [complex] | ResizablePanelGroup, ResizablePanel, ResizableHandle |
 | ScrollArea | [simple] | ScrollBar |
-| Select | [composed] | SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectLabel, SelectItem, SelectSeparator |
+| Select | [composed] | SelectTrigger (`size`: sm/md/lg, default md), SelectValue, SelectContent, SelectGroup, SelectLabel, SelectItem, SelectSeparator |
 | Separator | [simple] | — |
 | Sheet | [complex] | SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetClose |
 | Sidebar | [complex] | SidebarProvider, SidebarTrigger, SidebarInset, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarRail, useSidebar |
@@ -550,7 +553,7 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 | Table | [composed] | TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption |
 | Tabs | [composed] | TabsList (`variant`: default/line, `size`: sm/md/lg), TabsTrigger (`iconPosition`: inline/top), TabsContent. Root accepts `orientation`: horizontal/vertical. |
 | Textarea | [simple] | — |
-| TicketCard | [composed] | — |
+| TicketCard | [composed] | — (`icon`, `label`, `value`, `currency`, `stubLabel`, `onStubClick`, `stubDisabled`, `welcomeCredit`, `creditUsed`, `creditTotal`, `creditCurrency`, `creditLabel`, `creditFullWidth`, `freeCredit` *(deprecated)*) |
 | Toggle | [simple] | — |
 | ToggleGroup | [composed] | ToggleGroupItem |
 | Tooltip | [composed] | TooltipTrigger, TooltipContent, TooltipProvider |
@@ -566,11 +569,12 @@ These are styling behaviors you can't discover from TypeScript types alone:
 | Input | Resting: `border-input`. Focus: `border-ring` + `ring-[3px] ring-ring/50`. Radius: `rounded-sm` (6px) |
 | InputGroup | Wraps `Input` with inline addons (icons, buttons, text). **Sizes:** `sm` (h-8) / `md` (h-10, default) / `lg` (h-12) — pass `size` to `InputGroup`, it flows to `InputGroupInput` via context. **Padding:** when any `inline-start` or `inline-end` addon is present, input text gets equal `pl-2 pr-2` (8px) on both sides for visual symmetry. Without addons, Input's default `px-3`/`px-4` applies. |
 | InputOTP | **Variants:** OTP 4 digits (single group, 4 slots), OTP 6 digits (single group, 6 slots), OTP 6 split (two groups of 3 with `InputOTPSeparator`), OTP 8 digits (single group, 8 slots), OTP 6 separated (each slot in its own `InputOTPGroup` for individually spaced boxes). Slot: `h-9 w-9`, `border-border-subtle`, `rounded-sm` on first/last. Focus: `border-primary` + `ring-primary/[0.08]`. |
+| NavigationButton | Icon-only tertiary button for navigation. `text-on-prominent` (black icons), `hover:bg-secondary-hover`. **Sizes (8-point grid):** `lg` 48px / 24px icon, `md` 40px / 20px icon, `sm` 32px / 20px icon, `xs` 24px / 16px icon. States: focus `ring-ring/50`, active `opacity-60`, disabled `opacity-24`. Supports `asChild`. |
 | Tooltip | Bubble: `bg-primary` + `text-on-prominent-static-inverse` (not `bg-popover`). Always wrap in `<TooltipProvider>` |
 | Sidebar | Menu buttons use `rounded-sm`. Selection: `bg-secondary-hover` + `text-primary` + `font-semibold` |
 | Breadcrumb | Active page: `text-primary font-medium`. Links: `text-on-subtle` |
 | Tabs | **Variants:** `default` (pill, `bg-tabs`) and `line` (underline, transparent bg). **Sizes:** `sm` (h-8, text-xs), `md` (h-10, text-sm, default), `lg` (h-12, text-base). **Icon position:** `inline` (default) or `top` (stacks icon above label). **Orientation:** `horizontal` (default) or `vertical` (line variant renders left-edge indicator). Hover: `bg-secondary-hover` (default) / `text-primary` (line). Selected: `bg-tabs-active` + `text-primary font-semibold`. Line variant underline: `bg-primary`. |
-| Select | Item hover: `bg-primary/[0.08]`. Selected: `text-primary font-medium` + checkmark. `SelectTrigger` accepts `readOnly` prop: blocks interaction, retains full default appearance, chevron renders at `opacity-30` |
+| Select | **Sizes:** `SelectTrigger` accepts `size` prop: `"sm"` (h-8, text-xs) / `"md"` (h-10, text-sm, **default**) / `"lg"` (h-12, text-base) — matches `Input` and `InputGroup` height scale. Item hover: `bg-primary/[0.08]`. Selected: `text-primary font-medium` + checkmark. `SelectTrigger` also accepts `readOnly` prop: blocks interaction, retains full default appearance, chevron renders at `opacity-30`. |
 | Progress | Track: `bg-primary/20`. Indicator: `bg-primary`. Radius: `rounded-2xs` |
 | Spinner | Inherits parent text color. **Always pass `text-primary` for standalone use** |
 | Stepper | Numeric input flanked by `−` / `+` `secondary` `icon-xs` buttons. Composes `InputGroup` internally. Props: `value`, `defaultValue`, `onValueChange`, `min`, `max`, `step` (default 1), `size` (`"sm" \| "md" \| "lg"`, default `"md"`), `disabled`, `placeholder`. **Sizes:** `sm` — h-8 (32px), `icon-xs` buttons, `size-3` icons; `md` — h-10 (40px), `icon-xs` buttons, `size-3.5` icons; `lg` — h-12 (48px), `icon-sm` buttons, `size-4` icons. Matches `Input` and `InputGroup` height scale exactly. Supports controlled & uncontrolled modes, keyboard Arrow Up/Down, and floating-point steps. Default width: `w-32`. An `InputGroupText` unit label (e.g. `USDT`) can be placed in the `inline-end` addon alongside the `+` button — use `font-normal text-on-subtle` for regular weight and subtle colour. Exports `StepperSize` type. |
@@ -578,6 +582,7 @@ These are styling behaviors you can't discover from TypeScript types alone:
 | Slider | Thumb: square `rounded-[4px]`, `bg-primary`. Track range: `bg-slider-range` |
 | Dialog/Sheet | Footer buttons should use `size="md"`. Overlay: `bg-overlay` |
 | Menubar | Hover: `bg-primary/[0.08]`. Open state: `bg-primary/10` |
+| TicketCard | **Icon:** pass any `ReactNode` via `icon`. Icon container: `size-10` rounded-full, `border-2 border-primary`, `text-primary`. **Labels:** `label` (above value) and `stubLabel` (stub button) render in sentence case — do NOT apply `uppercase` or `tracking-widest`. Stub: `w-[100px]` `bg-primary` button, `text-on-prominent-static-inverse`, shimmer sweep animation. Disabled stub: `opacity-50`, `cursor-not-allowed`. Perforation notches sit outside the card box — do NOT put `overflow-hidden` on the card wrapper. **Welcome credit bar:** enabled via `welcomeCredit` prop. Colors are hardcoded per Figma spec — icon + label text `#713813` (dark amber), progress bar fill `#ef9f00` (golden amber). Padding: `p-2` (8px). **`creditFullWidth`** (default `false`): `false` = desktop, bar is `calc(100% - 112px)` wide (stops flush with stub left edge); `true` = mobile, bar is `w-full`. Customise bar copy via `creditUsed`, `creditTotal`, `creditCurrency`, `creditLabel`. `freeCredit` is a deprecated alias for `welcomeCredit`. |
 | Toggle | Pressed: `bg-primary/10` + `border-primary` + `text-primary` |
 | Calendar | Selected: `bg-secondary-hover` + `text-primary font-bold`. Today: primary dot below date |
 
@@ -641,6 +646,7 @@ Landing page hero sections in multiple layout types.
 | Installing `lucide-react` separately | Already bundled — import icons directly |
 | Adding `tailwind.config.js` | Tailwind v4 uses CSS config via the package |
 | Using `bg-gray-*`, `text-zinc-*`, etc. | Use semantic tokens only |
+| Using `text-gray-400` for disabled text | Use `text-on-disabled` |
 
 ---
 

package/guides/rules/design-system-consuming-project.mdc

@@ -12,7 +12,7 @@ alwaysApply: true
 
 ### Available components (check this list first)
 
-Accordion, Alert, AlertDialog, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, ContextMenu, Dialog, Drawer, DropdownMenu, EmptyState, Field, Form, HoverCard, Input, InputGroup, InputOTP, Item, Kbd, Label, Menubar, NativeSelect, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Spinner, Switch, Table, Tabs, Textarea, Toast/Toaster, Toggle, ToggleGroup, Tooltip
+Accordion, Alert, AlertDialog, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, ContextMenu, Dialog, Drawer, DropdownMenu, EmptyState, Field, Form, HoverCard, Input, InputGroup, InputOTP, Item, Kbd, Label, Menubar, NativeSelect, NavigationButton, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Spinner, Switch, Table, Tabs, Textarea, Toast/Toaster, Toggle, ToggleGroup, Tooltip
 
 ### Decision flow
 
@@ -70,6 +70,7 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
 ✅ text-on-prominent                — primary text (black #000000)
 ✅ text-on-prominent-static-inverse — always white — for text on dark/primary bg
 ✅ text-on-subtle                   — secondary text (mid grey)
+✅ text-on-disabled                 — disabled / inactive text (light grey ~#BBBBBB)
 
 ✅ text-primary                     — brand blue #2323FF
 ✅ text-semantic-win                — green — profit/positive

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/styles.css

@@ -37,6 +37,7 @@
   --color-border-prominent: var(--border-prominent);
   --color-secondary-hover: var(--secondary-hover);
   --color-on-subtle: var(--on-subtle);
+  --color-on-disabled: var(--on-disabled);
   --color-subtle: var(--subtle);
   --color-primary: var(--primary);
   --color-primary-hover: var(--primary-hover);
@@ -163,6 +164,12 @@
   --primitive-orange-400: oklch(0.751 0.179 58.3);
   /* #FF8C00 */
 
+  /* ── Amber ── */
+  --primitive-amber-500: oklch(0.74 0.18 72);
+  /* #ef9f00 — golden amber; ticket credit progress fill */
+  --primitive-amber-800: oklch(0.40 0.10 52);
+  /* #713813 — dark amber/brown; ticket credit label text */
+
   /* ── Violet ── */
   --primitive-violet-500: oklch(0.601 0.263 301.6);
   /* #A040FF */
@@ -242,6 +249,7 @@
   --primary-hover: oklch(0.403 0.251 267.5);
   --subtle: oklch(0.96 0 0);
   --on-subtle: oklch(0.52 0 0);
+  --on-disabled: var(--primitive-mono-400);
 
   --border-subtle: oklch(0.92 0 0);
   --border: var(--border-subtle);
@@ -259,6 +267,7 @@
   --semantic-warning: var(--primitive-orange-500);
   --tabs: var(--primitive-mono-alpha-4);
   --tabs-active: var(--primitive-mono-50);
+
   --semantic-layout-diagram-max-default: var(--primitive-layout-diagram-max-default);
   --semantic-layout-diagram-max-small: var(--primitive-layout-diagram-max-small);
   --semantic-layout-diagram-max-medium: var(--primitive-layout-diagram-max-medium);
@@ -355,6 +364,12 @@
   }
 }
 
+/* Ticket card stub — shimmer sweep across deposit/action button */
+@keyframes stub-shimmer {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
 /* Spinner — pill-style activity indicator */
 @keyframes spinner-fade {
   0% {