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

package/dist/index.d.cts

@@ -113,9 +113,17 @@ interface BannerProps extends Omit<React$1.ComponentProps<"div">, "title" | "onC
     /** Description / supporting text. At least one of `title` or `description` is required. */
     description?: React$1.ReactNode;
     /**
-     * Leading icon. When `undefined`, a default badged-gift icon is used
-     * (40px brand-blue circle with white glyph — matches the reference).
-     * Pass `null` to omit, or any `ReactNode` to override.
+     * The glyph that sits **inside** the default brand-blue badge. Defaults to
+     * `<Gift className="size-5" />`. Pass any lucide icon (or other ~20-24px
+     * element) to swap the glyph while keeping the badge styling consistent.
+     * Ignored when `icon` is also set (which overrides the whole badge).
+     */
+    glyph?: React$1.ReactNode;
+    /**
+     * Full leading-icon override. When set, the consumer's JSX replaces the
+     * **entire** default badge — no brand-blue wrapper is rendered. Pass
+     * `null` to omit the icon column entirely. Leave undefined to use the
+     * default brand badge (with `glyph` inside).
      */
     icon?: React$1.ReactNode | null;
     /**
@@ -147,7 +155,7 @@ interface BannerProps extends Omit<React$1.ComponentProps<"div">, "title" | "onC
      */
     onClick?: () => void;
 }
-declare function Banner({ layout, title, description, icon, action, actions, onDismiss, dismissLabel, onClick, className, ...props }: BannerProps): react_jsx_runtime.JSX.Element | null;
+declare function Banner({ layout, title, description, glyph, icon, action, actions, onDismiss, dismissLabel, onClick, className, ...props }: BannerProps): react_jsx_runtime.JSX.Element | null;
 
 declare function Breadcrumb({ ...props }: React$1.ComponentProps<"nav">): react_jsx_runtime.JSX.Element;
 declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<"ol">): react_jsx_runtime.JSX.Element;
@@ -990,7 +998,7 @@ type OpenPositionsBlockProps = {
     sheetTitle?: string;
     /** Position items to render in the list. Empty array → emptyState is shown. */
     positions: Position[];
-    /** Footer link handler. The button label is fixed: "View transaction history". */
+    /** Footer link handler. The button label is fixed: "View trade history". */
     onViewHistory?: () => void;
     /** Replaces the default empty state when positions.length === 0. */
     emptyState?: React$1.ReactNode;

package/dist/index.d.ts

@@ -113,9 +113,17 @@ interface BannerProps extends Omit<React$1.ComponentProps<"div">, "title" | "onC
     /** Description / supporting text. At least one of `title` or `description` is required. */
     description?: React$1.ReactNode;
     /**
-     * Leading icon. When `undefined`, a default badged-gift icon is used
-     * (40px brand-blue circle with white glyph — matches the reference).
-     * Pass `null` to omit, or any `ReactNode` to override.
+     * The glyph that sits **inside** the default brand-blue badge. Defaults to
+     * `<Gift className="size-5" />`. Pass any lucide icon (or other ~20-24px
+     * element) to swap the glyph while keeping the badge styling consistent.
+     * Ignored when `icon` is also set (which overrides the whole badge).
+     */
+    glyph?: React$1.ReactNode;
+    /**
+     * Full leading-icon override. When set, the consumer's JSX replaces the
+     * **entire** default badge — no brand-blue wrapper is rendered. Pass
+     * `null` to omit the icon column entirely. Leave undefined to use the
+     * default brand badge (with `glyph` inside).
      */
     icon?: React$1.ReactNode | null;
     /**
@@ -147,7 +155,7 @@ interface BannerProps extends Omit<React$1.ComponentProps<"div">, "title" | "onC
      */
     onClick?: () => void;
 }
-declare function Banner({ layout, title, description, icon, action, actions, onDismiss, dismissLabel, onClick, className, ...props }: BannerProps): react_jsx_runtime.JSX.Element | null;
+declare function Banner({ layout, title, description, glyph, icon, action, actions, onDismiss, dismissLabel, onClick, className, ...props }: BannerProps): react_jsx_runtime.JSX.Element | null;
 
 declare function Breadcrumb({ ...props }: React$1.ComponentProps<"nav">): react_jsx_runtime.JSX.Element;
 declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<"ol">): react_jsx_runtime.JSX.Element;
@@ -990,7 +998,7 @@ type OpenPositionsBlockProps = {
     sheetTitle?: string;
     /** Position items to render in the list. Empty array → emptyState is shown. */
     positions: Position[];
-    /** Footer link handler. The button label is fixed: "View transaction history". */
+    /** Footer link handler. The button label is fixed: "View trade history". */
     onViewHistory?: () => void;
     /** Replaces the default empty state when positions.length === 0. */
     emptyState?: React$1.ReactNode;

package/dist/index.js

@@ -821,15 +821,16 @@ function Badge(_a) {
 import * as React2 from "react";
 import { Gift, X as X2 } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs6 } from "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__ */ jsx9("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary", children: /* @__PURE__ */ jsx9(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__ */ jsx9("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,
@@ -841,6 +842,7 @@ function Banner(_a) {
     "layout",
     "title",
     "description",
+    "glyph",
     "icon",
     "action",
     "actions",
@@ -860,7 +862,12 @@ function Banner(_a) {
   }
   const isInline = layout === "inline";
   const showIcon = icon !== null;
-  const resolvedIcon = icon === void 0 ? /* @__PURE__ */ jsx9(DefaultIconBadge, {}) : icon;
+  const resolvedIcon = icon === void 0 ? /* @__PURE__ */ jsx9(IconBadge, { glyph: glyph != null ? glyph : /* @__PURE__ */ jsx9(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);
@@ -935,7 +942,7 @@ function Banner(_a) {
           /* @__PURE__ */ jsx9("div", { className: "col-start-1 row-start-1", children: iconColumn }),
           /* @__PURE__ */ jsx9("div", { className: "col-start-2 row-start-1 min-w-0", children: body }),
           /* @__PURE__ */ jsx9("div", { className: "col-start-3 row-start-1 sm:col-start-4", children: closeButton }),
-          hasAction ? /* @__PURE__ */ jsx9("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__ */ jsx9("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
         ]
       })
     );
@@ -957,17 +964,14 @@ function Banner(_a) {
         /* @__PURE__ */ jsx9("div", { className: "col-start-1 row-start-1", children: iconColumn }),
         /* @__PURE__ */ jsx9("div", { className: "col-start-2 row-start-1 min-w-0", children: body }),
         /* @__PURE__ */ jsx9("div", { className: "col-start-3 row-start-1", children: closeButton }),
-        effectiveActions && effectiveActions.length > 0 ? /* @__PURE__ */ jsx9("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__ */ jsx9(React2.Fragment, { children: wrapAction2(node, fallbackVariant) }, i);
-        }) }) : null
+        effectiveActions && effectiveActions.length > 0 ? /* @__PURE__ */ jsx9("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__ */ jsx9(React2.Fragment, { children: wrapAction2(node) }, i)) }) : null
       ]
     })
   );
 }
-function wrapAction2(node, defaultVariant = "primary") {
+function wrapAction2(node) {
   if (React2.isValidElement(node)) return node;
-  return /* @__PURE__ */ jsx9(Button, { variant: defaultVariant, size: "sm", children: node });
+  return /* @__PURE__ */ jsx9(Button, { variant: "secondary", size: "sm", children: node });
 }
 
 // components/ui/breadcrumb.tsx
@@ -7402,7 +7406,7 @@ function PositionsList({
       i < positions.length - 1 && /* @__PURE__ */ jsx67("div", { className: "h-px mx-4 bg-border-subtle" })
     ] }, i)) }),
     /* @__PURE__ */ jsx67(Separator, {}),
-    /* @__PURE__ */ jsx67("div", { className: "shrink-0 flex justify-center py-4", children: /* @__PURE__ */ jsx67(Button, { variant: "tertiary", size: "md", onClick: onViewHistory, children: "View transaction history" }) })
+    /* @__PURE__ */ jsx67("div", { className: "shrink-0 flex justify-center py-4", children: /* @__PURE__ */ jsx67(Button, { variant: "tertiary", size: "md", onClick: onViewHistory, children: "View trade history" }) })
   ] });
 }
 function PositionRow({ position }) {
@@ -7457,7 +7461,7 @@ function DefaultEmptyState({ onViewHistory }) {
   return /* @__PURE__ */ jsx67(Empty, { className: "flex min-h-0 flex-1 flex-col justify-center border-none rounded-none p-6 text-center", children: /* @__PURE__ */ jsxs36(EmptyHeader, { className: "gap-4", children: [
     /* @__PURE__ */ jsx67(EmptyMedia, { children: /* @__PURE__ */ jsx67(History2, { className: "size-8 text-on-subtle" }) }),
     /* @__PURE__ */ jsx67(EmptyTitle, { className: "text-base leading-6 font-semibold tracking-normal body-md text-on-subtle", children: "No trades yet." }),
-    /* @__PURE__ */ jsx67(Button, { variant: "tertiary", size: "md", onClick: onViewHistory, children: "View transaction history" })
+    /* @__PURE__ */ jsx67(Button, { variant: "tertiary", size: "md", onClick: onViewHistory, children: "View trade history" })
   ] }) });
 }
 export {