@trading-game/design-intelligence-layer 0.16.2 → 0.16.4

package/README.md

@@ -308,7 +308,8 @@ Dismissible **promotional / marketing** surface — for feature launches, offers
   layout="inline"
   title={<>Spring release <b>is here.</b></>}        // wrap emphasis in <b> for brand-blue accent
   description="New features just landed — take a look at what's changed."
-  icon={<MyIcon />}                                   // omit to use the default 40px brand-blue gift badge
+  glyph={<Sparkles className="size-5" />}             // swaps the icon *inside* the default brand badge (default <Gift />)
+  icon={<MyIcon />}                                   // full override — replaces the brand badge entirely; null to omit
   action="Get started"                                // string wrapped in Button variant="primary"
   onDismiss={() => setOpen(false)}                    // when provided, close X is rendered
   dismissLabel="Dismiss"                              // aria-label for the close X
@@ -335,8 +336,8 @@ Dismissible **promotional / marketing** surface — for feature launches, offers
 
 **Visual:**
 - Surface: 135° diagonal gradient `#EBEBFF → #FFFFFF` with `border-primary/20` light-blue edge.
-- Default icon: 40px brand-blue circle with a white `Gift` glyph. Override via `icon` (pass any `ReactNode`) or `icon={null}` to omit.
-- Default action button: `Button variant="primary"` (single inline action) or `[Secondary, Primary]` pair (card actions). Pass `<Button>` elements explicitly to override variant/size.
+- Default icon: 40px brand-blue square (4px corners, matches the trading.game logo) with a white `Gift` glyph. 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.
+- 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.
 - Title supports `<b>` children styled with `text-primary` for in-line brand-blue accent.
 - Close X (32px) hovers to `bg-secondary-hover`.
 

package/dist/index.cjs

@@ -1176,15 +1176,16 @@ function Badge(_a) {
 var React2 = __toESM(require("react"), 1);
 var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var SURFACE_CLASSES = "w-full rounded-md border border-primary/20 bg-[linear-gradient(135deg,#EBEBFF_0%,#FFFFFF_100%)] px-4 py-3.5";
-function DefaultIconBadge() {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Gift, { className: "size-5" }) });
+var SURFACE_CLASSES = "w-full rounded-md border border-primary/[0.16] bg-primary/[0.08] px-4 py-3.5";
+function IconBadge({ glyph }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-xs bg-primary text-on-primary", children: glyph });
 }
 function Banner(_a) {
   var _b = _a, {
     layout = "inline",
     title,
     description,
+    glyph,
     icon,
     action,
     actions,
@@ -1196,6 +1197,7 @@ function Banner(_a) {
     "layout",
     "title",
     "description",
+    "glyph",
     "icon",
     "action",
     "actions",
@@ -1215,7 +1217,12 @@ function Banner(_a) {
   }
   const isInline = layout === "inline";
   const showIcon = icon !== null;
-  const resolvedIcon = icon === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DefaultIconBadge, {}) : icon;
+  const resolvedIcon = icon === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconBadge, { glyph: glyph != null ? glyph : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Gift, { className: "size-5" }) }) : icon;
+  if (process.env.NODE_ENV !== "production" && icon !== void 0 && glyph !== void 0) {
+    console.warn(
+      "Banner: `glyph` is ignored when `icon` is also set. `icon` overrides the entire badge; `glyph` only swaps the inner icon of the default badge."
+    );
+  }
   const showCloseButton = typeof onDismiss === "function";
   const isClickable = typeof onClick === "function";
   const buttonsSuppressed = isClickable && (Boolean(action) || ((_a2 = actions == null ? void 0 : actions.length) != null ? _a2 : 0) > 0);
@@ -1290,7 +1297,7 @@ function Banner(_a) {
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-1 row-start-1", children: iconColumn }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-2 row-start-1 min-w-0", children: body }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-3 row-start-1 sm:col-start-4", children: closeButton }),
-          hasAction ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-2 row-start-2 justify-self-start sm:col-start-3 sm:row-start-1 sm:self-center sm:justify-self-end", children: wrapAction2(effectiveAction, "primary") }) : null
+          hasAction ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-2 row-start-2 justify-self-start sm:col-start-3 sm:row-start-1 sm:self-center sm:justify-self-end", children: wrapAction2(effectiveAction) }) : null
         ]
       })
     );
@@ -1312,17 +1319,14 @@ function Banner(_a) {
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-1 row-start-1", children: iconColumn }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-2 row-start-1 min-w-0", children: body }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-3 row-start-1", children: closeButton }),
-        effectiveActions && effectiveActions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-span-3 col-start-2 row-start-2 flex flex-wrap items-center justify-start gap-2", children: effectiveActions.slice(0, 2).map((node, i) => {
-          const fallbackVariant = i === 0 ? "secondary" : "primary";
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(React2.Fragment, { children: wrapAction2(node, fallbackVariant) }, i);
-        }) }) : null
+        effectiveActions && effectiveActions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-span-3 col-start-2 row-start-2 flex flex-wrap items-center justify-start gap-2", children: effectiveActions.slice(0, 2).map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(React2.Fragment, { children: wrapAction2(node) }, i)) }) : null
       ]
     })
   );
 }
-function wrapAction2(node, defaultVariant = "primary") {
+function wrapAction2(node) {
   if (React2.isValidElement(node)) return node;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { variant: defaultVariant, size: "sm", children: node });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { variant: "secondary", size: "sm", children: node });
 }
 
 // components/ui/breadcrumb.tsx
@@ -7735,7 +7739,7 @@ function PositionsList({
       i < positions.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "h-px mx-4 bg-border-subtle" })
     ] }, i)) }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Separator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "shrink-0 flex justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { variant: "tertiary", size: "md", onClick: onViewHistory, children: "View transaction history" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "shrink-0 flex justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { variant: "tertiary", size: "md", onClick: onViewHistory, children: "View trade history" }) })
   ] });
 }
 function PositionRow({ position }) {
@@ -7790,7 +7794,7 @@ function DefaultEmptyState({ onViewHistory }) {
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Empty, { className: "flex min-h-0 flex-1 flex-col justify-center border-none rounded-none p-6 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(EmptyHeader, { className: "gap-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(EmptyMedia, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react29.History, { className: "size-8 text-on-subtle" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(EmptyTitle, { className: "text-base leading-6 font-semibold tracking-normal body-md text-on-subtle", children: "No trades yet." }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { variant: "tertiary", size: "md", onClick: onViewHistory, children: "View transaction history" })
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { variant: "tertiary", size: "md", onClick: onViewHistory, children: "View trade history" })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node: