@trading-game/design-intelligence-layer 0.9.8 → 0.9.9

package/README.md

@@ -122,7 +122,7 @@ npm install react react-dom tailwindcss
 | Hover Card | `HoverCard, HoverCardTrigger, HoverCardContent` |
 | Input | `Input` |
 | Input Group | `InputGroup, InputGroupAddon, InputGroupButton, InputGroupText` |
-| Input OTP | `InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator` |
+| Input OTP | `InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator` — Variants: OTP 4 digits, OTP 6 digits, OTP 6 split, OTP 8 digits, OTP 6 separated |
 | Item | `Item, ItemMedia, ItemContent, ItemTitle, ItemDescription` |
 | Kbd | `Kbd, KbdGroup` |
 | Label | `Label` |
@@ -543,3 +543,13 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 - **shadcn/ui** (New York style) — base component primitives
 - **Radix UI** — accessible headless primitives
 - **Figma** — source of truth for design tokens
+
+---
+
+## Changelog
+
+### v0.9.9
+- **Demo app — responsive mobile layout:** The component playground is now fully mobile-friendly. Foundations / Components / Blocks navigation moves to a fixed bottom tab bar on mobile. A hamburger menu opens a slide-in Sheet to pick any component within the active tab. The desktop sidebar and inline tab switcher are unchanged.
+- **Sonner toast — mobile-aware behaviour:** Toasts now appear at `top-center` on mobile (single visible toast) and `bottom-right` on desktop (up to 3). Added custom token-based styling (`--on-prominent` background, inverse text, `font-display` title).
+- **Toaster registered in root layout:** `<Toaster />` is now mounted in `app/layout.tsx` so toast notifications work globally.
+- **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.

package/dist/index.cjs

@@ -6118,11 +6118,15 @@ var import_jsx_runtime51 = require("react/jsx-runtime");
 var Toaster = (_a) => {
   var props = __objRest(_a, []);
   const { theme = "system" } = (0, import_next_themes.useTheme)();
+  const isMobile = useIsMobile();
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_sonner.Toaster,
     __spreadValues({
       theme,
       className: "toaster group",
+      position: isMobile ? "top-center" : "bottom-right",
+      visibleToasts: isMobile ? 1 : 3,
+      duration: 4e3,
       icons: {
         success: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react21.CircleCheckIcon, { className: "size-4" }),
         info: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react21.InfoIcon, { className: "size-4" }),
@@ -6130,10 +6134,18 @@ var Toaster = (_a) => {
         error: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react21.OctagonXIcon, { className: "size-4" }),
         loading: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react21.Loader2Icon, { className: "size-4 animate-spin" })
       },
+      toastOptions: {
+        classNames: {
+          toast: "!bg-[var(--on-prominent)] !border-none",
+          title: "!text-[var(--on-prominent-static-inverse)] !font-display !font-bold",
+          description: "!text-[var(--on-prominent-static-inverse)] !opacity-60 !font-body",
+          actionButton: "!bg-[var(--primary)] !text-[var(--on-prominent-static-inverse)]"
+        }
+      },
       style: {
-        "--normal-bg": "var(--popover)",
-        "--normal-text": "var(--popover-foreground)",
-        "--normal-border": "var(--border)",
+        "--normal-bg": "var(--on-prominent)",
+        "--normal-text": "var(--on-prominent-static-inverse)",
+        "--normal-border": "transparent",
         "--border-radius": "var(--radius)"
       }
     }, props)