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

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

@@ -553,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] | — (icon, label, value, stubIcon, stubLabel, onStubClick, stubDisabled) |
+| 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 |
@@ -582,7 +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:** default icon is `Wallet` (lucide) — pass any `ReactNode` via the `icon` prop. Icon container: `size-11` (sm: `size-12`) rounded-full circle, `border-2 border-primary`, `text-primary`. **Labels:** `label` (above value) and `stubLabel` (stub button) both render in sentence case with default letter spacing — do NOT apply `uppercase` or `tracking-widest` when passing string values. Stub: `bg-primary` button, `text-on-prominent-static-inverse`. Disabled stub: `bg-primary/30`, `opacity-50`, `cursor-not-allowed`. Perforation notches sit outside the card box and require the card wrapper to NOT use `overflow-hidden`. |
+| 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 |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "0.11.0",
+  "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

@@ -164,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 */
@@ -261,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);
@@ -357,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% {