{"_id":"@anasqumhiyeh-deriv/design-intelligence-layer","_rev":"3-c45605a0b76b7eb685ebbef76580f6fe","name":"@anasqumhiyeh-deriv/design-intelligence-layer","dist-tags":{"latest":"0.19.0"},"versions":{"0.17.0":{"name":"@anasqumhiyeh-deriv/design-intelligence-layer","version":"0.17.0","_id":"@anasqumhiyeh-deriv/design-intelligence-layer@0.17.0","maintainers":[{"name":"anasqumhiyeh-deriv","email":"anas.qumhiyeh@regentmarkets.com"}],"dist":{"shasum":"8a04e842a05c1d58c30939a37a384efcecc1e334","tarball":"https://registry.npmjs.org/@anasqumhiyeh-deriv/design-intelligence-layer/-/design-intelligence-layer-0.17.0.tgz","fileCount":16,"integrity":"sha512-gtAOkFR3asamMvFiFMaHwS2oY6BamzRgJUoL17gMI6TTvdpU58K5uYv+yuPQl4nsPa9FeHcOuCo/nmrnF3/TsA==","signatures":[{"sig":"MEUCIQCnrsMsomz0TluqYJokfYVOGdpvw6p5TA6WzPmE39u7XQIgBu1WZPV+0TfWbS4qPKVQ9QP2TpesStwfoB0qtRsAyYA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1861717},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles":"./src/styles.css"},"gitHead":"dee97dbce09a6104e2f6ddd8ff43f4a178909a41","scripts":{"dev":"next dev -H 127.0.0.1 -p 3000","lint":"eslint","build":"tsup","start":"next start","build:next":"next build","prepublishOnly":"npm run build","generate:registry":"node scripts/generate-component-registry.mjs"},"_npmUser":{"name":"anasqumhiyeh-deriv","email":"anas.qumhiyeh@regentmarkets.com"},"_npmVersion":"10.8.2","description":"Trading Game Design System — shadcn/ui components with Tailwind CSS v4","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.20.2","dependencies":{"zod":"^4.3.6","clsx":"^2.1.1","cmdk":"^1.1.1","vaul":"^1.1.2","sonner":"^2.0.7","date-fns":"^4.1.0","radix-ui":"^1.4.3","recharts":"^2.15.4","input-otp":"^1.4.2","lucide-react":"^0.577.0","@base-ui/react":"^1.2.0","tailwind-merge":"^3.5.0","react-hook-form":"^7.71.2","react-day-picker":"^9.14.0","@hookform/resolvers":"^5.2.2","embla-carousel-react":"^8.6.0","react-resizable-panels":"^4.7.1","class-variance-authority":"^0.7.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"next":"16.1.6","tsup":"^8.5.1","react":"19.2.3","eslint":"^9","shadcn":"^3.8.5","react-dom":"19.2.3","typescript":"^5","@types/node":"^20","next-themes":"^0.4.6","tailwindcss":"^4","@types/react":"^19","tw-animate-css":"^1.4.0","@types/react-dom":"^19","eslint-config-next":"16.1.6","@tailwindcss/postcss":"^4"},"peerDependencies":{"react":">=18","react-dom":">=18","tailwindcss":">=4"},"_npmOperationalInternal":{"tmp":"tmp/design-intelligence-layer_0.17.0_1782356496638_0.2432856251981581","host":"s3://npm-registry-packages-npm-production"}},"0.18.0":{"name":"@anasqumhiyeh-deriv/design-intelligence-layer","version":"0.18.0","_id":"@anasqumhiyeh-deriv/design-intelligence-layer@0.18.0","maintainers":[{"name":"anasqumhiyeh-deriv","email":"anas.qumhiyeh@regentmarkets.com"}],"dist":{"shasum":"1c0e0ad354062f4e8a06eb344e4d315b76744346","tarball":"https://registry.npmjs.org/@anasqumhiyeh-deriv/design-intelligence-layer/-/design-intelligence-layer-0.18.0.tgz","fileCount":16,"integrity":"sha512-RGWqFXJaV1tA4AsgOVSBGdYL4sMfTgLRQsDA5Pg9xUt3ofaCMwJ3cwWWTpJEwu8DP+UV3Z8/U3oySZ0wPs2f0A==","signatures":[{"sig":"MEUCIQCOqdkglAnI+GZEb3tP3Oe6B6aQuADcq7RWfe/3T/DeywIgdciKhLPON2UimzHoVyiviP69WgjEGYiv+lmg3udq1KQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1882864},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles":"./src/styles.css"},"gitHead":"7253d744ccfc7e2cdc1e6467068f7476472d0d7d","scripts":{"dev":"next dev -H 127.0.0.1 -p 3000","lint":"eslint","build":"tsup","start":"next start","build:next":"next build","prepublishOnly":"npm run build","generate:registry":"node scripts/generate-component-registry.mjs"},"_npmUser":{"name":"anasqumhiyeh-deriv","email":"anas.qumhiyeh@regentmarkets.com"},"_npmVersion":"10.8.2","description":"Trading Game Design System — shadcn/ui components with Tailwind CSS v4","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.20.2","dependencies":{"zod":"^4.3.6","clsx":"^2.1.1","cmdk":"^1.1.1","vaul":"^1.1.2","sonner":"^2.0.7","date-fns":"^4.1.0","radix-ui":"^1.4.3","recharts":"^2.15.4","input-otp":"^1.4.2","lucide-react":"^0.577.0","@base-ui/react":"^1.2.0","tailwind-merge":"^3.5.0","react-hook-form":"^7.71.2","react-day-picker":"^9.14.0","@hookform/resolvers":"^5.2.2","embla-carousel-react":"^8.6.0","react-resizable-panels":"^4.7.1","class-variance-authority":"^0.7.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"next":"16.1.6","tsup":"^8.5.1","react":"19.2.3","eslint":"^9","shadcn":"^3.8.5","react-dom":"19.2.3","typescript":"^5","@types/node":"^20","next-themes":"^0.4.6","tailwindcss":"^4","@types/react":"^19","tw-animate-css":"^1.4.0","@types/react-dom":"^19","eslint-config-next":"16.1.6","@tailwindcss/postcss":"^4"},"peerDependencies":{"react":">=18","react-dom":">=18","tailwindcss":">=4"},"_npmOperationalInternal":{"tmp":"tmp/design-intelligence-layer_0.18.0_1782368373481_0.6972387021681756","host":"s3://npm-registry-packages-npm-production"}},"0.19.0":{"name":"@anasqumhiyeh-deriv/design-intelligence-layer","version":"0.19.0","description":"Trading Game Design System — shadcn/ui components with Tailwind CSS v4","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles":"./src/styles.css"},"sideEffects":["**/*.css"],"scripts":{"dev":"next dev -H 127.0.0.1 -p 3000","generate:registry":"node scripts/generate-component-registry.mjs","build":"tsup","build:next":"next build","start":"next start","lint":"eslint","prepublishOnly":"npm run build"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=18","react-dom":">=18","tailwindcss":">=4"},"dependencies":{"@base-ui/react":"^1.2.0","@hookform/resolvers":"^5.2.2","class-variance-authority":"^0.7.1","clsx":"^2.1.1","cmdk":"^1.1.1","date-fns":"^4.1.0","embla-carousel-react":"^8.6.0","input-otp":"^1.4.2","lucide-react":"^0.577.0","radix-ui":"^1.4.3","react-day-picker":"^9.14.0","react-hook-form":"^7.71.2","react-resizable-panels":"^4.7.1","recharts":"^2.15.4","sonner":"^2.0.7","tailwind-merge":"^3.5.0","vaul":"^1.1.2","zod":"^4.3.6"},"devDependencies":{"@tailwindcss/postcss":"^4","@types/node":"^20","@types/react":"^19","@types/react-dom":"^19","eslint":"^9","eslint-config-next":"16.1.6","next":"16.1.6","next-themes":"^0.4.6","react":"19.2.3","react-dom":"19.2.3","shadcn":"^3.8.5","tailwindcss":"^4","tsup":"^8.5.1","tw-animate-css":"^1.4.0","typescript":"^5"},"_id":"@anasqumhiyeh-deriv/design-intelligence-layer@0.19.0","gitHead":"e9e42bdf4a386051dbb3daa6c665a892c9457fec","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-FmnvV/71ZmMICQRRPlB0hXT5jPSw2dziiuFv+f5wE9FV1oMNKTz+kZd6MzM6AG929iQZsQFiWwT/AGwE1dD1Ag==","shasum":"44f502ca8ed2c363865142ca13139529147db0b1","tarball":"https://registry.npmjs.org/@anasqumhiyeh-deriv/design-intelligence-layer/-/design-intelligence-layer-0.19.0.tgz","fileCount":16,"unpackedSize":1896056,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGJpsYON2YG/xkp6xU4qe+cYI6pJ2co7Nl9l6P/H7lDIAiAYgWI2yVKmwJMf7YGsOc/xfVJpOPo7+uqIjB9H1V2Ilw=="}]},"_npmUser":{"name":"anasqumhiyeh-deriv","email":"anas.qumhiyeh@regentmarkets.com"},"directories":{},"maintainers":[{"name":"anasqumhiyeh-deriv","email":"anas.qumhiyeh@regentmarkets.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-intelligence-layer_0.19.0_1782382869518_0.22466723325432536"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-25T03:01:36.398Z","modified":"2026-06-25T10:21:09.850Z","0.17.0":"2026-06-25T03:01:36.816Z","0.18.0":"2026-06-25T06:19:33.686Z","0.19.0":"2026-06-25T10:21:09.713Z"},"description":"Trading Game Design System — shadcn/ui components with Tailwind CSS v4","maintainers":[{"name":"anasqumhiyeh-deriv","email":"anas.qumhiyeh@regentmarkets.com"}],"readme":"# Trading Game Design System\n\nA component library and design token system for the Trading Game product. Built on [shadcn/ui](https://ui.shadcn.com/) with a custom Figma-driven token architecture, Tailwind CSS v4, and React 19.\n\nPublished as **`@trading-game/design-intelligence-layer`** on npm.\n\n---\n\n## Quick Start\n\n### Installation\n\n```bash\nnpm install @trading-game/design-intelligence-layer@latest --safe-chain-skip-minimum-package-age\n```\n\n> **Note:** The `--safe-chain-skip-minimum-package-age` flag bypasses npm's 72-hour safe-chain hold on newly published packages. Required when the latest version was published less than 72 hours ago (common for AI agents and CI pipelines).\n\n### 1. Add the CSS imports\n\nIn your main CSS file (e.g. `globals.css`), add these three lines **in this order**:\n\n```css\n@import \"@trading-game/design-intelligence-layer/styles\";\n@import \"tailwindcss\";\n@source \"../node_modules/@trading-game/design-intelligence-layer/dist\";\n```\n\n> **Why `@source`?** Tailwind v4 skips `node_modules` by default. Without this line, Tailwind won't generate CSS for the component classes. Adjust the path if your CSS file is not one level below `node_modules` (e.g. in a monorepo use `../../node_modules/...`).\n\n### 1b. Vite projects — add the Tailwind plugin\n\nIf your project uses **Vite** (e.g. Vite + React), you must add the Tailwind CSS plugin to your Vite config:\n\n```bash\nnpm install @tailwindcss/vite\n```\n\n```js\n// vite.config.js\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default {\n  plugins: [react(), tailwindcss()],\n}\n```\n\n> **Next.js projects** do not need this — Next.js uses PostCSS for Tailwind automatically.\n\n### 2. Fonts (handled automatically)\n\nThe styles import loads **Plus Jakarta Sans** from Google Fonts automatically. No additional font setup is needed.\n\nUse `font-body`, `font-display`, or `font-sans` in your Tailwind classes — all resolve to Plus Jakarta Sans.\n\n### 3. Use components\n\n```tsx\nimport { Button, Card, Badge } from \"@trading-game/design-intelligence-layer\"\n\nexport default function App() {\n  return (\n    <Card>\n      <Button variant=\"primary\">Trade Now</Button>\n      <Badge>Live</Badge>\n    </Card>\n  )\n}\n```\n\n### Peer dependencies\n\nMake sure these are installed in your project:\n\n```bash\nnpm install react react-dom tailwindcss\n```\n\n> Requires React 18+ and Tailwind CSS v4+.\n\n---\n\n## What's inside\n\n- **56 UI components** — buttons, forms, dialogs, charts, sidebars, and more\n- **Design tokens** — CSS custom properties for color, radius, typography, and transitions synced from Figma\n- **Transition tokens** — semantic duration and easing tokens (`duration-base`, `ease-standard`, etc.) — no hardcoded `duration-200` anywhere\n- **Light-only theme** — white backgrounds, black text, primary blue accents — no dark mode\n- **Typography classes** — heading scale (h1–xs) and body scale (lg–xs) ready to use\n- **TypeScript** — full type definitions included\n- **ESM + CJS** — works with any bundler\n\n---\n\n## Available components\n\n| Component | Import |\n|---|---|\n| Accordion | `Accordion, AccordionItem, AccordionTrigger, AccordionContent` |\n| Alert | `Alert` — dismissible status notification. Variants: `info`, `warning`, `danger`, `success`. Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`, `action`, `actions`, `onDismiss`. |\n| Alert Dialog | `AlertDialog, AlertDialogTrigger, AlertDialogContent, ...` |\n| Aspect Ratio | `AspectRatio` |\n| Avatar | `Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup` |\n| Badge | `Badge, badgeVariants` |\n| Banner | `Banner` — dismissible promotional surface on a tinted primary surface. Brand-blue circular `IconBadge` (40 px) with a swappable `glyph` (or pass `icon` to override the badge entirely). Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`/`glyph`, `action`, `actions`, `onDismiss`, `onClick` (whole-banner clickable). |\n| Breadcrumb | `Breadcrumb, BreadcrumbList, BreadcrumbItem, ...` |\n| Button | `Button, buttonVariants` |\n| Calendar | `Calendar, CalendarDayButton` |\n| Card | `Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter` |\n| Carousel | `Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext` |\n| Chart | `ChartContainer, ChartTooltip, ChartLegend, ChartStyle` |\n| Checkbox | `Checkbox` |\n| Chip | `Chip` — pill-shaped, toggle-able selection chip (e.g. game filters). Selected state takes `bg-primary/[0.08]` + `text-primary`; unselected uses outline + `text-on-prominent`. |\n| Collapsible | `Collapsible, CollapsibleTrigger, CollapsibleContent` |\n| Combobox | `Combobox, ComboboxInput, ComboboxContent, ComboboxItem, ...` |\n| Command | `Command, CommandDialog, CommandInput, CommandList, ...` |\n| Context Menu | `ContextMenu, ContextMenuTrigger, ContextMenuContent, ...` |\n| Dialog | `Dialog, DialogTrigger, DialogContent, DialogHeader, ...` |\n| Drawer | `Drawer, DrawerTrigger, DrawerContent, DrawerHeader, ...` |\n| Dropdown Menu | `DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, ...` |\n| Empty State | `Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent` |\n| Field | `Field, FieldLabel, FieldDescription, FieldError, FieldGroup` |\n| Form | `Form, FormItem, FormLabel, FormControl, FormField, FormMessage` |\n| Hover Card | `HoverCard, HoverCardTrigger, HoverCardContent` |\n| Input | `Input` |\n| Input Group | `InputGroup, InputGroupAddon, InputGroupButton, InputGroupText` |\n| Input OTP | `InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator` — Variants: OTP 4 digits, OTP 6 digits, OTP 6 split, OTP 8 digits, OTP 6 separated |\n| Item | `Item, ItemMedia, ItemContent, ItemTitle, ItemDescription` |\n| Kbd | `Kbd, KbdGroup` |\n| Label | `Label` |\n| Link | `Link` |\n| Menubar | `Menubar, MenubarMenu, MenubarTrigger, MenubarContent, ...` |\n| Native Select | `NativeSelect, NativeSelectOptGroup, NativeSelectOption` |\n| Navigation Button | `NavigationButton, navigationButtonVariants` |\n| Navigation Menu | `NavigationMenu, NavigationMenuList, NavigationMenuTrigger, ...` |\n| Pagination | `Pagination, PaginationContent, PaginationLink, ...` |\n| Popover | `Popover, PopoverTrigger, PopoverContent, PopoverAnchor` |\n| Progress | `Progress` |\n| Radio Group | `RadioGroup, RadioGroupItem` |\n| Resizable | `ResizableHandle, ResizablePanel, ResizablePanelGroup` |\n| Scroll Area | `ScrollArea, ScrollBar` |\n| Select | `Select, SelectTrigger, SelectContent, SelectItem, ...` |\n| Separator | `Separator` |\n| Sheet | `Sheet, SheetTrigger, SheetContent, SheetHeader, ...` |\n| Sidebar | `Sidebar, SidebarProvider, SidebarMenu, SidebarMenuItem, ...` |\n| Skeleton | `Skeleton` |\n| Slider | `Slider` |\n| Spinner | `Spinner` |\n| Stepper | `Stepper` |\n| Switch | `Switch` |\n| Table | `Table, TableHeader, TableBody, TableRow, TableHead, TableCell` |\n| Tabs | `Tabs, TabsList, TabsTrigger, TabsContent` |\n| Textarea | `Textarea` |\n| Ticket Card | `TicketCard`, `CreditTicketCard` |\n| Toast | `Toaster` |\n| Toggle | `Toggle, toggleVariants` |\n| Toggle Group | `ToggleGroup, ToggleGroupItem` |\n| Tooltip | `Tooltip, TooltipTrigger, TooltipContent, TooltipProvider` |\n\n---\n\n## Blocks\n\nBlocks are opinionated, composed UI patterns built from design system primitives — **exported from the package the same as primitives**. Import them by name and pass data via props. Variants (`layout` / `mode` / `status`) live on a single block, not separate components.\n\n```tsx\nimport { HeroBlock, ResultBlock, OpenPositionsBlock } from \"@trading-game/design-intelligence-layer\"\n```\n\n| Block | Variants | Description |\n|---|---|---|\n| `HeroBlock` | `layout: \"centered\" \\| \"split\"` | Marketing hero section. Centred = single-column, no image; split = two-column with image. Tagline pill, heading, body, primary + optional secondary CTA. |\n| `AuthBlock` | `mode: \"sign-in\" \\| \"sign-up\"` | Auth form — logo lockup, OAuth provider buttons (Google, Telegram, X), divider, email input, terms, primary CTA, footer cross-link. |\n| `FAQBlock` | `layout: \"desktop\" \\| \"mobile\"` | Eyebrow + heading + intro + accordion + optional \"Need more help\" card. Items passed as `{ value, question, answer }[]`. |\n| `NavBarBlock` | — (internal mobile-menu state) | Responsive marketing nav — brand logos, link buttons, Sign in / Sign up CTAs, hamburger drawer on mobile. |\n| `HeaderNavigationBlock` | — | In-app trading header. Back · badge · balance · optional history button with `history.count` numeric badge (`bg-primary`; ≥99 → `99+`) · actions slot. |\n| `OpenPositionsBlock` | `Position` discriminated union (`rise-fall` / `swipe` / `box-o` / `digits`) | Responsive Sheet (desktop) / Drawer (mobile) listing open positions. Consumer-provided trigger; default empty state. |\n| `ResultBlock` | `status: \"win\" \\| \"loss\"`, `ctaMode: \"next-round\" \\| \"go-again\" \\| \"conversion\"` | Win/loss result card. Animated halo + thumb illustration (bundled inline) + contract badge + duration badge + CTA. |\n| `ResultDialog` | — | Fixed-width system dialog (title + body + two CTAs). For messages like \"out of balance\" or \"on a roll\". |\n\nSee [`AGENTS.md`](./AGENTS.md#blocks) for full usage examples per block.\n\n---\n\n## Button variants and sizes\n\n```tsx\n<Button variant=\"primary\" />           // Blue filled — main CTA (light surfaces)\n<Button variant=\"primary-inverse\" />   // White filled + blue text — main CTA on dark/coloured surfaces\n<Button variant=\"secondary\" />         // Black outline — secondary actions (light surfaces)\n<Button variant=\"secondary-inverse\" /> // White outline + white text — secondary actions on dark/coloured surfaces\n<Button variant=\"tertiary\" />          // Text only — minimal (light surfaces)\n\n// Sizes\n<Button size=\"lg\" />      // 48px height (default)\n<Button size=\"md\" />      // 40px height\n<Button size=\"sm\" />      // 32px height\n<Button size=\"xs\" />      // 24px height\n<Button size=\"icon-lg\" /> // 48px square\n<Button size=\"icon-md\" /> // 40px square\n<Button size=\"icon-sm\" /> // 28px square\n<Button size=\"icon-xs\" /> // 24px square\n```\n\n## Navigation Button\n\nAn 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.\n\n```tsx\n<NavigationButton size=\"lg\" aria-label=\"Home\"><HomeIcon /></NavigationButton>\n```\n\n| Size | Button | Icon |\n|------|--------|------|\n| `lg` | 48px | 24px |\n| `md` | 40px | 20px |\n| `sm` | 32px | 20px |\n| `xs` | 24px | 16px |\n\nStates: hover (`bg-secondary-hover`), focus (3px `ring-ring/50`), active (`opacity-60`), disabled (`opacity-24`). Supports `asChild` for custom elements.\n\n## Badge variants\n\n```tsx\n// Default (solid)\n<Badge variant=\"default\" />         // Blue (#2323FF)\n<Badge variant=\"default-success\" /> // Green\n<Badge variant=\"default-fail\" />    // Red\n\n// Standard (neutral grey chip) — for non-status meta like contract type, duration\n<Badge variant=\"standard\" />\n\n// Fill (tint background)\n<Badge variant=\"fill\" />            // Blue tint\n<Badge variant=\"fill-success\" />    // Green tint\n<Badge variant=\"fill-fail\" />       // Red tint\n<Badge variant=\"fill-warning\" />    // Yellow tint — status/warning\n<Badge variant=\"fill-credit\" />     // Deep peach (#FDCA8A) + bold deep-amber (#521900) text — Welcome credit / bonus labels\n<Badge variant=\"fill-demo\" />       // Peach surface + red-orange text — demo/test-mode flags\n\n// Outline (black border, secondary-hover on hover)\n<Badge variant=\"outline\" />\n\n// Ghost (transparent)\n<Badge variant=\"ghost\" />\n<Badge variant=\"ghost-success\" />\n<Badge variant=\"ghost-fail\" />\n\n// Sizes\n<Badge size=\"sm\" />   // 24px height\n<Badge size=\"md\" />   // 32px height (default)\n<Badge size=\"lg\" />   // 40px height\n```\n\n## Alert variants\n\nDismissible **status** notification (info / warning / danger / success). For promotional / marketing surfaces, use **Banner** instead.\n\n```tsx\n// Variant — controls the surface tint and icon accent\n<Alert variant=\"info\" />      // sky-blue tint\n<Alert variant=\"warning\" />   // yellow tint\n<Alert variant=\"danger\" />    // red tint\n<Alert variant=\"success\" />   // green tint\n\n// Layout — controls the shape\n<Alert layout=\"inline\" />     // single row: icon · body · optional action · close X (default)\n<Alert layout=\"card\" />       // taller: icon · body · close X top-right, up to 2 buttons bottom-left\n\n// Slots — all optional (at least one of title or description is required)\n<Alert\n  variant=\"info\"\n  layout=\"inline\"\n  title=\"Verify your email\"\n  description=\"We sent a confirmation link to example@email.com.\"\n  icon={<MyIcon />}                 // pass null to omit; omit to use the variant default\n  action=\"Resend\"                   // inline only — string is wrapped in Button automatically\n  onDismiss={() => setOpen(false)}  // when provided, close X is rendered\n  dismissLabel=\"Dismiss\"            // aria-label for the close X\n/>\n\n<Alert\n  variant=\"info\"\n  layout=\"card\"\n  title=\"...\"\n  description=\"...\"\n  actions={[\"Learn more\", \"Open trading\"]}  // card only — array of up to 2 buttons\n  onDismiss={() => setOpen(false)}\n/>\n```\n\n**Behaviour:**\n- Dismissal is **controlled** — clicking the close X calls `onDismiss`; the parent owns visibility.\n- All variants' buttons default to `Button variant=\"secondary\"`. Pass a fully-styled `<Button>` to `action` / `actions` to override.\n- Inline + single-line content (only title OR only description) renders at a fixed 48px height with everything vertically centered. Inline + multi-line and card layouts grow to fit.\n- `role=\"alert\"` + `aria-live=\"assertive\"` for `danger` / `warning`; `role=\"status\"` + `aria-live=\"polite\"` for `info` / `success`.\n\n## Banner\n\nDismissible **promotional / marketing** surface — for feature launches, offers, onboarding nudges, cross-promo. Single visual treatment (no severity variants); for status messages use **Alert** instead.\n\n```tsx\n// Layout — controls the shape\n<Banner layout=\"inline\" />    // single row: icon · body · optional action · close X (default)\n<Banner layout=\"card\" />      // body on row 1, up to 2 action buttons on row 2 bottom-left\n\n// Slots — all optional (at least one of title or description is required)\n<Banner\n  layout=\"inline\"\n  title={<>Spring release <b>is here.</b></>}        // wrap emphasis in <b> for brand-blue accent\n  description=\"New features just landed — take a look at what's changed.\"\n  glyph={<Sparkles className=\"size-5\" />}             // swaps the icon *inside* the default brand badge (default <Gift />)\n  icon={<MyIcon />}                                   // full override — replaces the brand badge entirely; null to omit\n  action=\"Get started\"                                // string wrapped in Button variant=\"primary\"\n  onDismiss={() => setOpen(false)}                    // when provided, close X is rendered\n  dismissLabel=\"Dismiss\"                              // aria-label for the close X\n/>\n\n<Banner\n  layout=\"card\"\n  title=\"...\"\n  description=\"...\"\n  actions={[\"Learn more\", \"Get started\"]}             // first = Secondary, second = Primary\n  onDismiss={() => setOpen(false)}\n/>\n\n// Whole-banner clickable — the surface itself is the CTA.\n// Mutually exclusive with action / actions (buttons dropped, dev warning).\n<Banner\n  layout=\"inline\"\n  title=\"Tap anywhere on this banner\"\n  description=\"Whole surface is the click target.\"\n  onClick={() => navigate(\"/promo\")}\n  onDismiss={() => setOpen(false)}                    // close X still works independently\n/>\n```\n\n**Visual:**\n- Surface: tinted primary surface — `bg-primary/[0.08]` with `border-primary/[0.16]` edge, `rounded-md`.\n- Default icon: 40 px brand-blue **circle** (`rounded-full bg-primary`) with a white `Gift` glyph inside. Swap just the glyph via the `glyph` prop (e.g. `<Sparkles className=\"size-5\" />`); replace the entire badge via the `icon` prop; or `icon={null}` to omit the column entirely.\n- Default action button: `Button variant=\"secondary\"` size `sm` for every slot (inline `action` and both `actions[]` in card). Pass `<Button>` elements explicitly to override variant/size.\n- Title supports `<b>` children styled with `text-primary` for in-line brand-blue accent.\n- Close X (32 px): vertically-centred in the grid for single-line banners; pinned to the **top-right corner** (`absolute top-3 right-3`) when the banner is multi-line (`description` set) or `layout=\"card\"` — so it reads as a true corner dismiss instead of floating mid-body. Hovers to `bg-secondary-hover`.\n\n## Component behaviour notes\n\n### AlertDialog — button fill\n`AlertDialogAction` and `AlertDialogCancel` fill the full container width **only** when `size=\"sm\"`. On `size=\"default\"` (the default), buttons are natural width and right-aligned.\n\n```tsx\n<AlertDialogContent size=\"sm\">   // buttons fill width (50/50 grid)\n<AlertDialogContent size=\"default\"> // buttons natural width, right-aligned\n```\n\n### Drawer — footer buttons\n`DrawerFooter` makes all direct child buttons fill the full width automatically via `[&>*]:w-full`. Stack your buttons inside `DrawerFooter` and they will always be full-width.\n\n### Link — size lg\nThe `lg` variant of `Link` uses `text-base` (16px). The `md` and `sm` variants use `text-sm` (14px) and `text-xs` (12px) respectively.\n\n```tsx\n<Link size=\"lg\" />  // 16px — font-base\n<Link size=\"md\" />  // 14px — font-sm\n<Link size=\"sm\" />  // 12px — font-xs\n```\n\n### Select — sizes\n`SelectTrigger` accepts a `size` prop with three values matching the `Input` height scale:\n\n```tsx\n<SelectTrigger size=\"sm\" />   // h-8  (32px) — text-xs\n<SelectTrigger size=\"md\" />   // h-10 (40px) — text-sm  (default)\n<SelectTrigger size=\"lg\" />   // h-12 (48px) — text-base\n```\n\n### Tabs — line variant hover\nOn 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`.\n\n### Link — underline\nUnderline is **always visible** (not hover-only). Class chain: `underline decoration-2 underline-offset-4 text-primary`.\n\n### Switch — pill + circle\nTrack is a pill (`rounded-full`); thumb is always a white circle (`rounded-full bg-prominent`). Checked track: `bg-primary`. Unchecked track: `bg-input`.\n\n### Tooltip — default surface\nDefault variant uses a **black** surface (`bg-prominent-inverse text-on-prominent-inverse`) with a matching arrow. Use `variant=\"inverse\"` for a white tooltip when the trigger sits on a saturated coloured surface. The primitive bakes in `max-w-xs` + `whitespace-normal`, so consumers no longer need to pass them. When a `Kbd` is detected inside via `:has([data-slot=kbd])`, padding bumps to `px-3.5 py-2` and siblings receive `space-y-1.5` for breathing room.\n\n### Sidebar — selection + padding\n`SidebarHeader` / `SidebarFooter` / `SidebarGroup` use `px-layout-margin-inline py-2` (16 px horizontal via `--semantic-layout-margin-inline`), with `group-data-[collapsible=icon]:px-2` so the collapsed icon rail tightens to 8 px. Active selection: `bg-primary/10` + `text-primary` + `font-semibold`. For `size=\"lg\"` menu buttons (typical brand-block + label or profile pattern), the collapsed state uses `p-0! justify-center` so a 32 px brand block fills the rail while a 16 px lucide icon still centres on the same vertical line.\n\n### Button — bg transition\nThe button base sets `transition-[color,border-color,opacity,box-shadow,transform]` (not `transition-all`), so `background-color` flips instantly on hover instead of fading in over 150 ms. This prevents the brief partially-transparent phase where surrounding surface tints (e.g. an Alert) could bleed through a hovered secondary button.\n\n---\n\n## Design tokens\n\nAll tokens are CSS custom properties, loaded automatically via `@trading-game/design-intelligence-layer/styles`.\n\n### Background tokens\n\n| Tailwind class | CSS variable | Value | Usage |\n|---|---|---|---|\n| `bg-prominent` | `--prominent` | `#FFFFFF` | Page background |\n| `bg-prominent-inverse` | `--prominent-inverse` | `#000000` | Dark surface for use on light pages (e.g. toasts) |\n| `bg-card` | `--card` | `#FFFFFF` | Card/panel surface |\n| `bg-popover` | `--popover` | `#FFFFFF` | Popover/dropdown surface |\n| `bg-subtle` | `--subtle` | `#F5F5F5` | Subtle tinted surface |\n| `bg-overlay` | `--overlay` | black 50% | Modal/dialog backdrop only |\n| `bg-tabs` | `--tabs` | black 4% alpha | Tab container background (`variant=\"default\"`) |\n| `bg-tabs-active` | `--tabs-active` | `#FFFFFF` | Active / selected tab pill |\n| `bg-primary` | `--primary` | `#2323FF` | Brand blue — CTAs |\n| `bg-primary-hover` | `--primary-hover` | `#0B0BD2` | Primary button hover (darker blue) |\n| `bg-primary-inverse` | `--primary-inverse` | `#FFFFFF` | Inverted primary surface — white bg for use on dark/coloured areas |\n| `bg-secondary-hover` | `--secondary-hover` | `#EEEEEE` | Outline/secondary hover (light grey) |\n| `bg-semantic-win` | `--semantic-win` | green | Profit / positive state |\n| `bg-semantic-loss` | `--semantic-loss` | red | Loss / negative state |\n| `bg-semantic-boost` | `--semantic-boost` | `#F9840F` amber-orange | Boost / bonus badge background |\n\n### Text tokens\n\n> **Naming convention:** every surface (bg) token has a paired `text-on-<surface>` foreground (text/icon) token. Always use the pair together — `bg-primary` + `text-on-primary`, `bg-semantic-win` + `text-on-semantic-win`, etc. — for guaranteed legibility regardless of theme.\n\n| Tailwind class | Value | Usage |\n|---|---|---|\n| `text-on-prominent` | `#000000` | Text on `bg-prominent` (default body text on light surfaces) |\n| `text-on-prominent-inverse` | `#FFFFFF` | Text on `bg-prominent-inverse` (e.g. toast title/description) |\n| `text-on-subtle` | mid grey | Text on `bg-subtle` (secondary / supporting text) |\n| `text-on-disabled` | `#BBBBBB` | Disabled / inactive text |\n| `text-on-primary` | `#FFFFFF` | Text on `bg-primary` (e.g. primary button label, tooltip text) |\n| `text-on-primary-inverse` | `#2323FF` | Text on `bg-primary-inverse` (e.g. primary-inverse button label) |\n| `text-on-semantic-win` | `#FFFFFF` | Text on `bg-semantic-win` (e.g. success badge label) |\n| `text-on-semantic-loss` | `#FFFFFF` | Text on `bg-semantic-loss` (e.g. fail badge label) |\n| `text-on-semantic-warning` | `#FFFFFF` | Text on `bg-semantic-warning` (e.g. warning badge label) |\n| `text-on-semantic-boost` | `#713813` dark amber | Text on `bg-semantic-boost` (e.g. boost badge label) |\n| `text-primary` | `#2323FF` | Brand blue inline text (use as a foreground over neutral surfaces) |\n| `text-semantic-win` | green | Profit / positive inline text |\n| `text-semantic-loss` | red | Loss / negative inline text |\n\n> **Deprecated:** `text-on-prominent-static-inverse` and the matching `--on-prominent-static-inverse` CSS variable are still defined for backwards-compat with external code that references them via raw `var()`. Internal components no longer use them. For new code, pick the explicit `text-on-<surface>` paired with the actual background.\n\n### Border & focus tokens\n\n| Tailwind class | CSS variable | Value | Usage |\n|---|---|---|---|\n| `border-border-subtle` | `--border-subtle` | `#EEEEEE` | **Default** — cards, dividers, form borders |\n| `border-border-prominent` | `--border-prominent` | `#000000` | Outline variant components (button, badge, toggle) |\n| `border-border` | `--border` | `#EEEEEE` | @deprecated alias — prefer `border-border-subtle` |\n| `border-input` | `--input` | `#EEEEEE` | Input field borders |\n| `ring-ring` | `--ring` | `#2323FF` | Focus rings |\n\n> ⚠️ **`border-border` vs `border-border-subtle`:** Both resolve to the same light grey `#EEEEEE`. `border-border` is kept for backward compatibility. **Prefer `border-border-subtle` in all new code.**\n\n### Transition tokens\n\nDuration — primitive scale:\n\n| Tailwind class | CSS variable | Value | Used for |\n|---|---|---|---|\n| `duration-instant` | `--primitive-duration-instant` | `50ms` | Focus rings, hover tints |\n| `duration-fast` | `--primitive-duration-fast` | `100ms` | Buttons, inputs, badges |\n| `duration-base` | `--primitive-duration-base` | `200ms` | Dropdowns, popovers, accordions |\n| `duration-slow` | `--primitive-duration-slow` | `300ms` | Dialogs, sheets, drawers closing |\n| `duration-open` | `--primitive-duration-open` | `500ms` | Sheets, drawers entering |\n\nEasing — primitive scale:\n\n| Tailwind class | CSS variable | Value | Used for |\n|---|---|---|---|\n| `ease-standard` | `--primitive-ease-standard` | `cubic-bezier(0.2, 0, 0, 1)` | General UI — bidirectional state changes |\n| `ease-enter` | `--primitive-ease-enter` | `cubic-bezier(0, 0, 0.2, 1)` | Overlays / surfaces entering |\n| `ease-exit` | `--primitive-ease-exit` | `cubic-bezier(0.4, 0, 1, 1)` | Overlays / surfaces leaving |\n| `ease-linear` | `--primitive-ease-linear` | `linear` | Sidebar width, progress bar |\n\n> Always use token utilities — never raw `duration-200` or `ease-in-out` directly.\n\n### Other tokens\n\n| Tailwind class | Value | Usage |\n|---|---|---|\n| `bg-slider-range` | blue 40% | Slider filled range |\n| `rounded-lg` | `0.625rem` | Base border radius |\n\n### Using opacity with tokens\n\nOpacity on tokens is allowed and encouraged:\n\n```\n✅ bg-primary/20           → blue at 20% opacity\n✅ border-border-subtle/50 → light grey border at 50% opacity\n✅ ring-ring/10            → ring at 10% opacity\n\n❌ bg-black/50             → NOT a token, use bg-overlay instead\n❌ bg-white                → NOT a token, use bg-prominent or bg-card\n```\n\n### Primitive alpha scales\n\nFor structured alpha surfaces, the design system ships two internal alpha primitive scales. These are **CSS variables only** — not exposed as Tailwind utility classes. Always reference them via a semantic token, never directly in components.\n\n```\n--primitive-mono-alpha-4  through --primitive-mono-alpha-80   (black at N%)\n--primitive-blue-alpha-4  through --primitive-blue-alpha-80   (brand blue at N%)\nStops: 4 · 8 · 16 · 24 · 32 · 40 · 50 · 64 · 80\n```\n\nExample — how `--tabs` uses the alpha scale:\n```css\n--tabs: var(--primitive-mono-alpha-4); /* black at 4% — tab container background */\n```\n\n> `--primitive-black-50` is deprecated. It now aliases `--primitive-mono-alpha-50`. The `--overlay` semantic token is unaffected.\n\n---\n\n## Typography\n\nThe styles export includes pre-built typography classes using **Plus Jakarta Sans**.\n\n### Heading scale (Semibold 600 · tracking 1.5px · uppercase)\n\n| Class | Size / Line height |\n|---|---|\n| `heading-h1` | 72px / 72px |\n| `heading-h2` | 64px / 64px |\n| `heading-h3` | 48px / 48px |\n| `heading-h4` | 40px / 40px |\n| `heading-xs` | 24px / 24px |\n\n### Body scale (Semibold 600)\n\n| Class | Size / Line height |\n|---|---|\n| `body-lg` | 18px / 28px |\n| `body-md` | 16px / 24px |\n| `body-sm` | 12px / 16px |\n| `body-xs` | 8px / 12px |\n\n### Font utilities\n\n| Tailwind class | Font |\n|---|---|\n| `font-display` | Plus Jakarta Sans — headings, display text |\n| `font-body` or `font-sans` | Plus Jakarta Sans — body text |\n\n---\n\n## Upgrading the design system\n\nWhen you bump `@trading-game/design-intelligence-layer` and run `npm install` (or `npm ci`):\n\n| How you use the package | What happens |\n|-------------------------|----------------|\n| You **import** components only from `@trading-game/design-intelligence-layer` | After install and a rebuild, your app uses the **new** implementations in `node_modules/.../dist` — buttons, cards, etc. reflect the version you installed. |\n| You **copied** `components/ui/*` (or similar) into your repo | Those files **do not** auto-update. You must delete them and switch to package imports, or manually merge changes from the new package. |\n\n**Overrides:** Passing large `className` strings onto DS components can mask new defaults (e.g. old radius after a “pill button” update). After upgrading, review those callsites.\n\n**Cursor / AI agents:** The package ships agent rules at `node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc`. Cursor does **not** load rules from `node_modules` by default — **re-copy** that file into `.cursor/rules/` after each upgrade so instructions match the release (same command as in **AI Agent Setup** below). The rules include **Rule 7 — Package version upgrades**: agents should search for duplicated components, align with the package, and **tell you explicitly** if local component code was replaced.\n\n---\n\n## AI Agent Setup\n\n### All AI tools (Cursor, Windsurf, Claude Code, Copilot, and others)\n\nThe package ships an `AGENTS.md` file that most AI tools read automatically. After installing the package, copy it to your project root:\n\n```bash\ncp node_modules/@trading-game/design-intelligence-layer/AGENTS.md ./AGENTS.md\n```\n\nThis tells any AI agent to:\n1. Read the design principles before building any screen\n2. Follow the component and token rules\n3. Run the 7-point checklist before completing any view\n\n**Design principles file** (bundled in the package):\n```\nnode_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md\n```\n\n**Accessibility standards file** (bundled in the package):\n```\nnode_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md\n```\n\n**Personas file** (bundled in the package):\n```\nnode_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md\n```\n\n**Brand voice** (bundled in the package):\n```\nnode_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md\n```\n\nAll four files apply to all projects built with this package — landing pages, product screens, and games. Every AI agent must read all of them before starting any build. Run the design principles and accessibility checklists before completing any screen. Use the personas and brand voice to guide all player-facing copy.\n\n### Cursor\n\nCopy the included rule file into your project:\n\n```bash\nmkdir -p .cursor/rules\ncp node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc .cursor/rules/\n```\n\nRe-run this **`cp` after every design-system version bump** so your workspace rules stay in sync with the installed package.\n\n### Claude Code\n\nAdd the following to your project's `CLAUDE.md`:\n\n```markdown\n## Design System\n\nThis project uses @trading-game/design-intelligence-layer. Before writing any UI:\n1. Read node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md — apply the 8 principles and run the 7-point checklist on every screen\n2. Read node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md — apply WCAG 2.1 AA standards and run the 9-point accessibility checklist on every screen\n3. Read node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md — understand the 3 player modes (Edge Seeker, System Runner, Public Predictor) that shape all copy and UX\n4. Read node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md — apply the brand voice: channel-specific voice, banned phrases, vocabulary, and formatting rules for all player-facing copy\n5. Check if the component exists in the package — import it, don't re-implement\n6. Use only design token classes (bg-prominent, text-on-prominent, border-border-subtle, etc.) — no hardcoded hex or raw Tailwind palette colors\n7. Do not install lucide-react, tailwindcss, or other bundled dependencies separately\n8. If no token exists for a value, ask before using a hardcoded value\n9. After upgrading the package: prefer package imports over local copies of components; if replacing local UI code with the package version, tell the user what was overwritten; re-copy guides/rules/design-system-consuming-project.mdc into .cursor/rules if using Cursor\n\nSee node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc for full rules.\nSee node_modules/@trading-game/design-intelligence-layer/README.md for complete token and component reference.\n```\n\n---\n\n## Common mistakes\n\n| Wrong | Right | Why |\n|---|---|---|\n| `bg-gray-100` | `bg-subtle` | Raw Tailwind palette — use tokens |\n| `bg-white` | `bg-prominent` or `bg-card` | Not a semantic token |\n| `text-white` | `text-on-<surface>` (e.g. `text-on-primary`, `text-on-prominent-inverse`, `text-on-semantic-win`) | Pick the paired foreground for the actual background |\n| `text-black` | `text-on-prominent` | Not a semantic token |\n| `text-gray-400` | `text-on-disabled` | Use the disabled text token |\n| `bg-black/50` | `bg-overlay` | Overlay has its own token |\n| `bg-[#2323FF]` | `bg-primary` | Hardcoded hex — use token |\n| `border-border` | `border-border-subtle` | Old name — prefer the new explicit name |\n| `bg-[var(--primary)]` | `bg-primary` | Raw CSS var — Tailwind v4 maps tokens directly |\n| `hsl(var(--primary))` | `bg-primary` | Tailwind v3 syntax — not needed in v4 |\n| Installing `lucide-react` | Already bundled | Icons are included in the package |\n\n---\n\n## Do NOT install separately\n\nThese are bundled with the package. Installing them separately can cause version conflicts:\n\n- `lucide-react` — icon library\n- `radix-ui` — headless primitives\n- `class-variance-authority` — variant API\n- `cmdk` — command palette\n- `vaul` — drawer\n- `sonner` — toast\n- `recharts` — charts\n- `react-day-picker` — calendar\n- `embla-carousel-react` — carousel\n- `react-resizable-panels` — resizable panels\n\n---\n\n## Development (contributors only)\n\n```bash\n# Clone\ngit clone https://github.com/trading-game/TG-design-system.git\ncd TG-design-system\n\n# Install dependencies\nnpm install\n\n# Start dev server (Next.js component playground)\nnpm run dev\n\n# Build the library (ESM + CJS + types)\nnpm run build\n\n# Build the Next.js showcase app\nnpm run build:next\n```\n\n### Updating design tokens\n\nDesign tokens are managed in Figma and exported as CSS variables. To update:\n\n1. Update the CSS custom properties in `app/globals.css` (playground) and `src/styles.css` (published package)\n2. Update `guides/rules/design-system-consuming-project.mdc` to reflect any token renames\n3. Update this README's token tables\n\n---\n\n## Tech stack\n\n- **React 19** + **TypeScript**\n- **Tailwind CSS v4** — CSS-first configuration\n- **shadcn/ui** (New York style) — base component primitives\n- **Radix UI** — accessible headless primitives\n- **Figma** — source of truth for design tokens\n\n---\n\n## Changelog\n\n### Unreleased\n- **Tooltip — black surface by default:** `variant=\"default\"` switched from brand-blue to black (`bg-prominent-inverse` + `text-on-prominent-inverse`). The arrow follows. `variant=\"inverse\"` (white) is unchanged. Default primitive now bakes in `max-w-xs whitespace-normal`, so consumers no longer pass these classes.\n- **Tooltip — keyboard-shortcut breathing room:** when the tooltip contains a `Kbd` (detected via `:has([data-slot=kbd])`), padding bumps to `px-3.5 py-2` and child elements get `space-y-1.5` so the title / kbd-row pair doesn't crowd.\n- **Switch — pill + white circle knob:** track switched from `rounded-[6px]` to `rounded-full`, thumb from `rounded-[3px]` to `rounded-full`. Thumb is always `bg-prominent` (white) in both states. Checked track: `bg-primary`. Unchecked track: `bg-input`. No API change.\n- **Link — underline always visible:** swapped `hover:underline` → `underline` so the underline reads at rest, not only on hover.\n- **Sidebar — primary-tinted selection + 16 px padding rails:** active menu items now use `bg-primary/10` (brand-blue tint) instead of `bg-secondary-hover` (grey). `SidebarHeader` / `SidebarFooter` / `SidebarGroup` use `px-layout-margin-inline py-2` (16 px horizontal) when expanded; the icon-collapsed rail falls back to `px-2` so the icons still centre. The `lg`-size menu button gets `p-0! justify-center` when collapsed so a 32 px brand block fills the rail while a 16 px lucide icon still centres in the same column.\n- **Banner — close X corner anchor:** the close `X` stays grid-centred on single-line banners but pins to `absolute top-3 right-3` whenever `description` is set or `layout=\"card\"` — so it reads as a true corner dismiss instead of floating mid-body.\n- **Button — instant bg-color hover:** the button base now uses `transition-[color,border-color,opacity,box-shadow,transform]` instead of `transition-all`. `background-color` flips instantly on hover so the brief partially-transparent fade phase (which let surrounding surface tints bleed through a hovered secondary button) is gone.\n\n### v0.16.7\n- **Credit badge readability pass:** `<Badge variant=\"fill-credit\">` and the credit pill inside `CreditTicketCard` now sit on a deeper peach surface and use a bold deep-amber text for crisper read on the grey `bg-subtle` ticket card and on white / brand-blue surfaces alike. Token chain: `--primitive-amber-100` (#FEEBD9) → `--primitive-amber-300` (#FDCA8A) and `--primitive-amber-800` (#713813) → `--primitive-amber-900` (#521900). `--semantic-boost-surface` and `--on-semantic-boost` are repointed automatically. Variant class also bumps to `!font-bold`.\n- **CreditTicketCard — responsive compact layout:** Compact variant now keeps the credit badge inline next to the value when there's room and only wraps to a second line when balance + badge would overflow into the deposit stub (`flex-wrap` on the value/badge row, with `whitespace-nowrap` on the value so the number itself never splits). Non-compact keeps the existing inline behavior.\n- **Banner — brand `IconBadge` is now a circle:** The 40 px brand-blue icon badge (visible when the consumer passes a `glyph` prop) is now `rounded-full` instead of `rounded-xs`. No API change.\n- **Tooltip — `max-w-xs` + `whitespace-normal` built into the primitive:** Desktop tooltips now cap at 320 px by default with natural-word wrapping; consumers no longer need to pass these classes. Mobile drawers (the responsive Tooltip mode) keep the full sheet width — the consumer `className` is no longer applied to the drawer's inner content wrapper, so passing `max-w-xs` on `TooltipContent` for desktop tuning no longer leaks into and shrinks the mobile drawer text.\n- **Naming note:** the v0.14.0 entry below claimed a `fill-credit` → `fill-boost` and `CreditTicketCard` → `BoostTicketCard` rename. **Those renames were not landed** — the current shipped names are still `fill-credit`, `CreditTicketCard`, and `--semantic-boost-surface` / `--on-semantic-boost` (the boost tokens stayed, the variant/component names didn't get renamed alongside them).\n\n### v0.16.5 — v0.16.6\n- **New `Chip` component:** Pill-shaped toggle-able selection chip — `bg-primary/[0.08]` + `text-primary` when selected, outline + `text-on-prominent` when unselected. Used for game filters (All games, Rise & Fall, Swipe, Box-O, Digits) and similar mutually-exclusive selectors.\n- **FAQ block — two-column layout:** `FAQBlock` gained a two-column variant on desktop.\n- **Demo + block logos** repointed at the new `.webp` brand assets (`/assets/icon.webp`, `/assets/tg-logo-full.webp`).\n- **Open Positions block** — \"View transaction history\" footer link renamed to \"View trade history\".\n\n### v0.16.1 — v0.16.4\n- **New `Banner` component:** Promotional surface (separate from `Alert`, which is now status-only). Default variant places a brand-blue 40 px circular `IconBadge` (consumer-swappable via `glyph`) on a tinted primary surface. Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`/`glyph`, `action`, `actions`, `onDismiss`, `onClick` (whole-banner clickable).\n- **`fill-demo` Badge variant:** Opaque peach surface (color-mix of demo @ 10% with prominent) + red-orange `--semantic-demo` text — for demo / test-mode account flags. Works identically on any background.\n- **Alert slimmed to status-only:** `default` and `brand` variants removed — use `Banner` for promotional / marketing surfaces.\n\n### v0.14.0\n- **New Result block:** Fixed-width (320 px) end-of-round result card with 5 variants — Win/continuing, Loss/continuing, End of demo, Out of balance, On a roll. Thumb-up/down SVG with subtle radial halo + idle motion (float for win, head-shake for loss). Title (`You won!` / `You lost!`), amount headline in semantic colour, contract + duration `standard` Badge pills, and CTA(s). Digit contracts render the picked digit inside the contract pill with a thin vertical divider. Out-of-balance and on-a-roll variants are dialog-only (no thumb / no amount) — title + body + 2 CTAs. Lives under **Blocks → Result** in the playground.\n- **Sheet Open Positions redesign:** Each row now uses a 2-col layout — bet name + stake (left) / PnL + market·duration (right). Dropped per-row asset (`V100`), round number, and digit/multiplier suffix labels (the game is already implied by the sheet/tab title). Abbreviated durations (sec / min / hr / day) and dropped the `Stake ` prefix on amounts. Added an \"Edge cases\" row demonstrating drawer behavior with 1 item and 30 items.\n- **Section nav sheet — desktop-safe:** The mobile section picker `Sheet` is now conditionally mounted (`{isMobile && …}`) so it can't be triggered at desktop widths where the permanent sidebar is already visible, avoiding redundant overlay layers.\n- **Badge — new `standard` variant:** Neutral grey chip (`bg-subtle` / `text-on-prominent`) for non-status meta like contract type and duration. Existing `default` (solid blue) and all other variants are unchanged.\n- **TicketCard / BoostTicketCard:**\n  - Left content restructured as a 2-column grid so the icon circle scales to match the **label + value height** (was a fixed `size-10` centered against the entire column).\n  - Boost badge now sits in row 2 of column 2 — aligned under the value, not pinned to the card's left edge.\n  - **2-decimal balance formatting:** the `value` prop is now normalised by `formatBalanceValue` before render, so values always display with exactly two decimal places regardless of input (e.g. `$12,450` → `$12,450.00`, `$12,450.5` → `$12,450.50`, `1234` → `1,234.00`). Currency prefix/suffix is preserved.\n- **Token convention — `on-<surface>` foreground pairs:** Added a Material-style paired foreground for every semantic surface so colour roles are self-documenting and resolve robustly across consumer setups (incl. Module Federation, where raw `var()` fallbacks were previously needed). New CSS variables and Tailwind utilities:\n  - `--on-primary` (white) / `text-on-primary` — paired with `bg-primary`\n  - `--primary-inverse` (white) / `bg-primary-inverse` — inverted primary surface for use on dark/coloured areas\n  - `--on-primary-inverse` (blue) / `text-on-primary-inverse` — paired with `bg-primary-inverse`\n  - `--prominent-inverse` (black) / `bg-prominent-inverse` — dark surface for use on light pages (e.g. toasts)\n  - `--on-prominent-inverse` (white) / `text-on-prominent-inverse` — paired with `bg-prominent-inverse`\n  - `--on-semantic-win` / `--on-semantic-loss` / `--on-semantic-warning` (all white) and `--on-semantic-boost` (dark amber) — paired with the matching `bg-semantic-*` surfaces.\n- **Internal sweep:** all internal components (Button, Badge, Tooltip, Toast, Checkbox, Avatar, Input, NativeSelect, TicketCard, BoostTicketCard, sidebar mini-avatar) now use the explicit `on-<surface>` foregrounds — no more catch-all `text-on-prominent-static-inverse`.\n- **Backwards-compat aliases preserved:** `--on-prominent-static-inverse` (→ `var(--on-prominent-inverse)`) and `--surface-inverse-static` (→ `var(--primary-inverse)`) remain defined in CSS so existing consumer code referencing them via raw `var()` (e.g. `var(--on-prominent-static-inverse, #fff)`) keeps working. The Tailwind utility `text-on-prominent-static-inverse` is also still emitted, but new code should pick the explicit paired token.\n- **Sonner → Toast rename:** The toast wrapper file moved from `components/ui/sonner.tsx` to `components/ui/toast.tsx`. The wrapper component is still `Toaster`, and `toast` is now re-exported from this module so consumers no longer need `import { toast } from \"sonner\"` directly. Import path: `@trading-game/design-intelligence-layer` (was `... from \"sonner\"`).\n- **Boost token rename (kept):** `--semantic-credit` → `--semantic-boost` and `--semantic-credit-text` → `--on-semantic-boost`. The boost surface and on-boost text tokens are the current shipped names. **Breaking change** for consumers that referenced the legacy `--semantic-credit*` names directly.\n- **~~`fill-credit` → `fill-boost` Badge variant rename~~ — _not landed_.** The Badge variant for credit/bonus labels is still `fill-credit` (see current v0.16.7 entry above). The intended rename was rolled back during release.\n- **~~`CreditTicketCard` → `BoostTicketCard` rename~~ — _not landed_.** The component is still `CreditTicketCard`. Props remain `badgeIcon`, `badgeLabel`, `badgeValue`, `badgeCurrency`, etc. (see current entry above).\n- **Button `primary-inverse` / `secondary-inverse`:** Now built from the new `bg-primary-inverse` / `text-on-primary-inverse` / `border-primary-inverse` / `text-on-prominent-inverse` tokens. Visually identical to before, but the underlying class names are different.\n- **Toast — action button visual fix:** The toast action button (the inverse-coloured \"Undo\" pill) now uses `primary-inverse` colouring (white bg + blue text) to match the dark toast surface, instead of the previous `bg-primary` (blue on dark — low hierarchy / wrong surface-context).\n\n### v0.12.0\n- **New semantic tokens — credit/boost:** `--semantic-boost` (`#F9840F` amber-orange) and `--on-semantic-boost` (`#521900` deep amber, updated in v0.16.7 — was `#713813`) live in both `src/styles.css` and `app/globals.css`. Tailwind utilities: `bg-semantic-boost`, `text-on-semantic-boost`, plus `bg-semantic-boost-surface` for the tinted pill background.\n- **Badge — `fill-credit` variant:** Variant for credit/bonus labels — `bg-semantic-boost-surface` background with `text-on-semantic-boost` foreground. Pair with a `Gift` or `TicketPlus` icon. Badge base class no longer applies `tracking-wide`; letter spacing is default on all badge variants. _(Visual updated in v0.16.7 — see entry above.)_\n- **`CreditTicketCard` component:** Exported alongside `TicketCard`. Renders the same ticket shell (notches, tear-line, shimmer stub) but with a variable-height card body and an inline `<Badge variant=\"fill-credit\">` next to or below the value for credit/bonus display. Props include `icon`, `label`, `value`, `currency`, `stubLabel`, `onStubClick`, `stubDisabled`, `badgeIcon`, `badgeLabel`, `badgeValue`, `badgeCurrency`, `badgeInfo`, `compact`.\n- **`TicketCard` — `compact` prop:** New boolean prop (default `false`). When `true`, reduces left-content padding from `px-4 gap-4` to `px-2 gap-2` for mobile layouts.\n- **`TicketCard` — welcome-credit props removed:** `welcomeCredit`, `freeCredit` (deprecated alias), `creditUsed`, `creditTotal`, `creditCurrency`, `creditLabel`, `creditFullWidth`, and the `Progress`-based credit bar have been removed. Use `CreditTicketCard` for the credit use case.\n- **`tracking-wide` / `tracking-widest` removed from several components:** Badge base class, `Link` base class, `PaginationLink`, `CommandShortcut`, `ContextMenuShortcut`, `DropdownMenuShortcut`, and `MenubarShortcut` no longer apply letter-spacing overrides. All render with default tracking.\n\n### v0.10.1\n- **TicketCard — Wallet icon:** Default icon in the circular badge is now a `Wallet` icon (replaces `CircleDollarSign`).\n- **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.\n- **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\"`.\n\n### v0.10.0\n- **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.\n- **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).\n- **Toaster registered in root layout:** `<Toaster />` is now mounted in `app/layout.tsx` so toast notifications work globally.\n- **InputOTP docs:** README and design-system guide updated with full variant listing — OTP 4 digits, OTP 6 digits, OTP 6 split, OTP 8 digits, OTP 6 separated.\n","readmeFilename":"README.md"}