@trading-game/design-intelligence-layer 0.16.7 → 0.16.9

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

@@ -289,7 +289,7 @@ The system follows a Material-style `<surface>` / `on-<surface>` pair convention
 | Show WIN / profit / positive           | `text-semantic-win`               | Primary blue for profit                |
 | Show LOSS / negative                   | `text-semantic-loss`              | Any non-token red                      |
 | Show WARNING / caution                 | `text-semantic-warning`           | Raw orange hex or primary tint         |
-| Show a boost / bonus badge             | `<Badge variant="fill-boost">` (uses `bg-semantic-boost/16` + `text-on-semantic-boost`) | Hardcoded amber hex values |
+| Show a credit / boost / bonus badge    | `<Badge variant="fill-credit">` (uses `bg-semantic-boost-surface` `#FDCA8A` + `text-on-semantic-boost` `#521900`, bold) | Hardcoded amber hex values |
 | Color a tab container background       | `bg-tabs`                         | `bg-subtle` for tabs                   |
 | Color an active/selected tab           | `bg-tabs-active`                  | `bg-prominent` for active tab          |
 | Color a page background                | `bg-prominent`                    | `bg-white` directly                    |
@@ -533,6 +533,7 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 | Carousel | [complex] | CarouselContent, CarouselItem, CarouselPrevious, CarouselNext |
 | Chart | [complex] | ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle |
 | Checkbox | [simple] | — |
+| Chip | [simple] | — (`selected`, `disabled`, `onClick`, standard button props) — pill-shaped toggle-able selection chip. Selected: `bg-primary/[0.08]` + `text-primary`. Unselected: outline + `text-on-prominent`. |
 | Collapsible | [composed] | CollapsibleTrigger, CollapsibleContent |
 | Combobox | [complex] | ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxEmpty, ComboboxGroup, ComboboxLabel |
 | Command | [complex] | CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut |
@@ -576,7 +577,7 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 | Tabs | [composed] | TabsList (`variant`: default/line, `size`: sm/md/lg), TabsTrigger (`iconPosition`: inline/top), TabsContent. Root accepts `orientation`: horizontal/vertical. |
 | Textarea | [simple] | — |
 | TicketCard | [composed] | — (`icon`, `label`, `value`, `currency`, `stubLabel`, `onStubClick`, `stubDisabled`, `compact`) |
-| BoostTicketCard | [composed] | — (`icon`, `label`, `value`, `currency`, `stubLabel`, `onStubClick`, `stubDisabled`, `boostAmount`, `boostCurrency`, `compact`) — use when a boost badge must appear below the value |
+| CreditTicketCard | [composed] | — (`icon`, `label`, `value`, `currency`, `stubLabel`, `onStubClick`, `stubDisabled`, `badgeIcon`, `badgeLabel`, `badgeValue`, `badgeCurrency`, `badgeInfo`, `badgeInfoSide`, `badgeInfoAlign`, `badgeInfoTitle`, `badgeInfoCloseLabel`, `compact`) — use when a Welcome credit / bonus badge must sit next to (or, on narrow widths in compact mode, below) the value |
 | Toggle | [simple] | — |
 | ToggleGroup | [composed] | ToggleGroupItem |
 | Tooltip | [composed] | TooltipTrigger, TooltipContent, TooltipProvider |
@@ -606,10 +607,10 @@ These are styling behaviors you can't discover from TypeScript types alone:
 | Dialog/Sheet | Footer buttons should use `size="md"`. Overlay: `bg-overlay` |
 | Menubar | Hover: `bg-primary/[0.08]`. Open state: `bg-primary/10` |
 | Alert | Dismissible **status** notification. Flat-prop API — pass `title` / `description` / `icon` / `action` / `actions` / `onDismiss` directly; no sub-components. (Promotional / marketing surfaces belong on `Banner`.) **Variants:** `info` (`bg-semantic-info/10`), `warning` (`bg-semantic-warning/10`), `danger` (`bg-semantic-error/10`), `success` (`bg-semantic-win/10`). **Layouts:** `inline` (single row: icon · body · optional action · close X) and `card` (icon · body · close X top-right; up to 2 buttons at bottom-left). **Buttons:** `action` (inline, max 1) and `actions` (card, max 2). Strings get wrapped as `Button variant="secondary" size="sm"`; React elements pass through. **Title colour:** `text-on-prominent` across all variants. **Icon colour:** the variant accent (`text-semantic-info` etc.) carries the severity signal; pass `icon={null}` to omit, or any `ReactNode` to override the per-variant default (`Info`, `AlertTriangle`, `XCircle`, `CheckCircle2`). **Single-line height:** `min-h-12` (48px floor) when only `title` or only `description` is provided in inline layout; grows when content wraps on narrow viewports. **Dismiss:** controlled — `onDismiss` callback; parent owns visibility. **A11y:** `role="alert"` + `aria-live="assertive"` for `danger`/`warning`; `role="status"` + `aria-live="polite"` for `info`/`success`. |
-| Banner | Dismissible **promotional / marketing** surface — feature launches, offers, onboarding nudges, cross-promo. Single visual treatment (no severity variants); for status messages use `Alert`. Flat-prop API: `layout`, `title`, `description`, `icon`, `action`, `actions`, `onDismiss`, `dismissLabel`, `onClick`. **Surface:** 135° diagonal gradient `#EBEBFF → #FFFFFF` with `border-primary/20` light-blue edge, `rounded-md`, `px-4 py-3.5`. **Layouts:** `inline` (icon · body · optional action · close X, single row) and `card` (body row + actions row beneath, bottom-left, max 2 buttons). **Buttons:** strings get wrapped in `Button variant="secondary" size="sm"` across every slot (inline `action` and card `actions`). React elements pass through unchanged — consumers can pass `<Button variant="primary">` etc. to override per call-site. **Title:** `text-sm font-bold text-on-prominent`; wrap emphasis in `<b>` for an in-line brand-blue accent (`[&>b]:text-primary`). **Description:** `text-xs font-medium text-on-subtle`, `mt-0.5` from title. **Default icon:** built-in 40px brand-blue square (4px corners, `rounded-xs`, matches the trading.game logo) with a white `Gift` glyph. Two ways to customise: `glyph` swaps just the inner icon while keeping the brand-badge shell intact (use this for "different symbol, same brand badge"); `icon` replaces the entire wrapper (use for fully custom artwork). `icon={null}` omits the column. `icon` wins if both are set — a dev warning fires. **`onClick`:** when set, the whole surface becomes the CTA (cursor-pointer, hover/focus states, keyboard activation). Mutually exclusive with `action`/`actions` — buttons are silently dropped and a dev warning fires. Close X stops propagation so dismissing never triggers the surface click. **A11y:** no `role`/`aria-live` (Banner is not a status surface). |
+| Banner | Dismissible **promotional / marketing** surface — feature launches, offers, onboarding nudges, cross-promo. Single visual treatment (no severity variants); for status messages use `Alert`. Flat-prop API: `layout`, `title`, `description`, `icon`/`glyph`, `action`, `actions`, `onDismiss`, `dismissLabel`, `onClick`. **Surface:** tinted primary surface (`bg-primary/[0.08]`) with `border-primary/[0.16]` edge, `rounded-md`, `px-4 py-3.5`. **Layouts:** `inline` (icon · body · optional action · close X, single row) and `card` (body row + actions row beneath, bottom-left, max 2 buttons). **Buttons:** strings get wrapped in `Button variant="secondary" size="sm"` across every slot (inline `action` and card `actions`). React elements pass through unchanged. **Title:** `text-sm font-bold text-on-prominent`; wrap emphasis in `<b>` for an in-line brand-blue accent (`[&>b]:text-primary`). **Description:** `text-xs font-medium text-on-subtle`, `mt-0.5` from title. **Default icon:** built-in 40px brand-blue **circle** (`rounded-full bg-primary`) with a white `Gift` glyph inside. Two ways to customise: `glyph` swaps just the inner icon while keeping the brand-circle shell intact (use this for "different symbol, same brand badge"); `icon` replaces the entire wrapper (use for fully custom artwork). `icon={null}` omits the column. `icon` wins if both are set — a dev warning fires. **`onClick`:** when set, the whole surface becomes the CTA (cursor-pointer, hover/focus states, keyboard activation). Mutually exclusive with `action`/`actions` — buttons are silently dropped and a dev warning fires. Close X stops propagation so dismissing never triggers the surface click. **A11y:** no `role`/`aria-live` (Banner is not a status surface). |
 | Badge | Variants: `default` (solid blue), `default-success`, `default-fail`, `default-warning` (all use `bg-semantic-*` + matching `text-on-semantic-*` foreground); `fill` (blue tint), `fill-success`, `fill-fail`, `fill-warning`; `fill-credit` (light-peach solid `bg-semantic-boost-surface` + `text-on-semantic-boost` foreground — use for credit/bonus labels); `fill-demo` (red-orange tint — `bg-semantic-demo/10` + `text-semantic-demo` — dedicated to "demo account" / "test mode" flags, **not** a severity signal); `outline`; `ghost`, `ghost-success`, `ghost-fail`. Base class no longer applies `tracking-wide` — letter spacing is default. |
-| 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-primary`, 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. **`compact`** (default `false`): `true` = mobile layout — reduces left-content horizontal padding from `px-4 gap-4` to `px-2 gap-2`. **For boost use cases:** use `BoostTicketCard` instead — it renders a `<Badge variant="fill-boost">` inline below the value. |
-| BoostTicketCard | Same visual shell as `TicketCard` (perforation notches, tear-line, shimmer stub). The card height is **variable** (grows with content via `py-4`) rather than fixed at `h-20`. The boost is displayed as an inline `<Badge variant="fill-boost" size="sm">` with a leading `Rocket` icon and a trailing `Info` icon: *"Boost: {boostAmount} {boostCurrency}"*. Tokens used: `bg-subtle`, `bg-primary`, `bg-primary-hover`, `text-on-primary`, `bg-semantic-boost/16`, `text-on-semantic-boost`. Supports `compact` prop for mobile layout (same padding reduction as `TicketCard`). |
+| 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-primary`, 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. **`compact`** (default `false`): `true` = mobile layout — reduces left-content horizontal padding from `px-4 gap-4` to `px-2 gap-2`. **For Welcome credit / bonus use cases:** use `CreditTicketCard` instead — it renders a `<Badge variant="fill-credit">` next to (or below, on narrow compact widths) the value. |
+| CreditTicketCard | Same visual shell as `TicketCard` (perforation notches, tear-line, shimmer stub). The card height is **variable** (grows with content via `py-4`) rather than fixed at `h-20`. The credit is displayed as an inline `<Badge variant="fill-credit" size="sm">` formatted as *"{badgeValue} {badgeCurrency}"* (e.g. `10.00 USDT`). The badge composes optional `badgeIcon` (e.g. `<Gift />`) on the left and an info trigger on the right that opens `badgeInfo` (desktop: `Tooltip variant="inverse"`; mobile: `Drawer`). Tokens used: `bg-subtle`, `bg-primary`, `bg-primary-hover`, `text-on-primary`, `bg-semantic-boost-surface` (`#FDCA8A`), `text-on-semantic-boost` (`#521900`, bold). `compact` shrinks padding and lets the badge wrap to a second line under the value only when balance + badge would otherwise overflow into the deposit stub (responsive `flex-wrap`). |
 | Toggle | Pressed: `bg-primary/10` + `border-primary` + `text-primary` |
 | Calendar | Selected: `bg-secondary-hover` + `text-primary font-bold`. Today: primary dot below date |
 

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, NavigationButton, 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, AspectRatio, Avatar, AvatarGroup, Badge, **Banner**, Breadcrumb, Button, Calendar, Card, Carousel, Chart, Checkbox, **Chip**, Collapsible, Combobox, Command, ContextMenu, Dialog, Direction, Drawer, DropdownMenu, Empty, Field, Form, HoverCard, Input, InputGroup, InputOTP, Item, Kbd, Label, **Link**, Menubar, NativeSelect, NavigationButton, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Spinner, **Stepper**, Switch, Table, Tabs, Textarea, **TicketCard / CreditTicketCard**, Toast/Toaster, Toggle, ToggleGroup, Tooltip
 
 ### Decision flow
 
@@ -177,13 +177,18 @@ All variants support icon sizes — use `size="icon-lg|icon-md|icon-sm|icon-xs"`
 ```tsx
 // Solid
 <Badge variant="default" />         // Blue solid
+<Badge variant="standard" />        // Subtle grey solid
 <Badge variant="default-success" /> // Green solid
 <Badge variant="default-fail" />    // Red solid
+<Badge variant="default-warning" /> // Orange solid
 
 // Tint
 <Badge variant="fill" />            // Blue tint bg
 <Badge variant="fill-success" />    // Green tint bg
 <Badge variant="fill-fail" />       // Red tint bg
+<Badge variant="fill-warning" />    // Orange tint bg
+<Badge variant="fill-credit" />     // Deep peach (#FDCA8A) + bold amber text — credit/boost (Welcome credit, bonus)
+<Badge variant="fill-demo" />       // Peach + red-orange text — demo / test-mode indicator
 
 // Outline (black border, hover grey)
 <Badge variant="outline" />
@@ -192,6 +197,7 @@ All variants support icon sizes — use `size="icon-lg|icon-md|icon-sm|icon-xs"`
 <Badge variant="ghost" />
 <Badge variant="ghost-success" />
 <Badge variant="ghost-fail" />
+<Badge variant="ghost-warning" />
 ```
 
 ---

package/package.json

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

package/src/styles.css

@@ -181,8 +181,6 @@
   /* ── Amber ── */
   --primitive-amber-300: #FDCA8A;
   /* #FDCA8A — credit/boost badge surface (peach, contrast on grey card) */
-  --primitive-amber-500: oklch(0.74 0.18 72);
-  /* #ef9f00 — golden amber; ticket boost progress fill */
   --primitive-amber-600: #F9840F;
   /* #F9840F — warm orange-amber; boost badge background base */
   --primitive-amber-900: oklch(0.30 0.10 52);