@trading-game/design-intelligence-layer 0.16.9 → 0.17.1

package/dist/index.js

@@ -165,7 +165,7 @@ function Spinner(_a) {
 // components/ui/button.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-24 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 font-display font-bold",
+  "inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-[color,border-color,opacity,box-shadow,transform] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-24 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 font-display font-bold",
   {
     variants: {
       variant: {
@@ -456,7 +456,7 @@ function Alert(_a) {
     }, props), {
       children: [
         iconColumn,
-        /* @__PURE__ */ jsx4("div", { className: "col-span-2 col-start-2 row-start-1", children: body }),
+        /* @__PURE__ */ jsx4("div", { className: "col-start-2 row-start-1 min-w-0", children: body }),
         /* @__PURE__ */ jsx4("div", { className: "col-start-3 row-start-1", children: closeButton }),
         actions && actions.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "col-span-3 col-start-2 row-start-2 mt-2 flex flex-wrap items-center justify-start gap-2", children: actions.slice(0, 2).map((node, i) => /* @__PURE__ */ jsx4(React.Fragment, { children: wrapAction(node, buttonVariant) }, i)) }) : null
       ]
@@ -821,9 +821,9 @@ 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/[0.16] bg-primary/[0.08] px-4 py-3.5";
+var SURFACE_CLASSES = "w-full rounded-sm 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-full bg-primary text-on-primary", children: 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, {
@@ -923,7 +923,9 @@ function Banner(_a) {
   const iconColumn = showIcon ? /* @__PURE__ */ jsx9("div", { "aria-hidden": true, className: "inline-flex shrink-0 translate-y-px", children: resolvedIcon }) : null;
   if (isInline) {
     const hasAction = Boolean(effectiveAction);
+    const hasDescription = Boolean(description);
     const rowTemplate = hasAction ? "grid-rows-[auto_auto] gap-y-3 sm:grid-rows-1 sm:gap-y-0" : "grid-rows-1 gap-y-0";
+    const gridCols = hasDescription ? "grid-cols-[auto_1fr] sm:grid-cols-[auto_1fr_auto]" : "grid-cols-[auto_1fr_auto] sm:grid-cols-[auto_1fr_auto_auto]";
     return /* @__PURE__ */ jsxs6(
       "div",
       __spreadProps(__spreadValues(__spreadValues({
@@ -931,9 +933,15 @@ function Banner(_a) {
         "data-layout": "inline",
         "data-clickable": isClickable ? "true" : void 0,
         className: cn(
-          "grid grid-cols-[auto_1fr_auto] items-center gap-x-4 sm:grid-cols-[auto_1fr_auto_auto]",
+          "grid gap-x-4",
+          // Single-line banners vertically-centre the row (icon + title);
+          // multi-line banners top-align so the leading icon sits next to
+          // the title instead of floating mid-body.
+          hasDescription ? "items-start" : "items-center",
+          gridCols,
           rowTemplate,
           SURFACE_CLASSES,
+          hasDescription && "relative pr-12",
           clickableClasses,
           className
         )
@@ -941,7 +949,7 @@ function Banner(_a) {
         children: [
           /* @__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 }),
+          hasDescription ? /* @__PURE__ */ jsx9("div", { className: "absolute top-3 right-3", children: closeButton }) : /* @__PURE__ */ jsx9("div", { className: "col-start-3 row-start-1 self-center 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) }) : null
         ]
       })
@@ -954,8 +962,10 @@ function Banner(_a) {
       "data-layout": "card",
       "data-clickable": isClickable ? "true" : void 0,
       className: cn(
-        "grid grid-cols-[auto_1fr_auto] grid-rows-[auto_auto] items-center gap-x-4 gap-y-3",
+        // Card layout is always multi-row — top-align the icon with the title.
+        "relative grid grid-cols-[auto_1fr] grid-rows-[auto_auto] items-start gap-x-4 gap-y-3",
         SURFACE_CLASSES,
+        "pr-12",
         clickableClasses,
         className
       )
@@ -963,8 +973,8 @@ function Banner(_a) {
       children: [
         /* @__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) => /* @__PURE__ */ jsx9(React2.Fragment, { children: wrapAction2(node) }, i)) }) : null
+        /* @__PURE__ */ jsx9("div", { className: "absolute top-3 right-3", children: closeButton }),
+        effectiveActions && effectiveActions.length > 0 ? /* @__PURE__ */ jsx9("div", { className: "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
       ]
     })
   );
@@ -4166,7 +4176,7 @@ import { cva as cva10 } from "class-variance-authority";
 import { Slot as Slot6 } from "radix-ui";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var linkVariants = cva10(
-  "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:inline font-display font-bold normal-case text-primary hover:underline decoration-2 underline-offset-4",
+  "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:inline font-display font-bold normal-case text-primary underline decoration-2 underline-offset-4",
   {
     variants: {
       size: {
@@ -5506,8 +5516,8 @@ function TooltipContent(_a) {
       /* @__PURE__ */ jsx51(DrawerFooter, { children: /* @__PURE__ */ jsx51(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx51(Button, { variant: "primary", size: "md", children: closeLabel }) }) })
     ] });
   }
-  const surfaceClasses = variant === "inverse" ? "bg-prominent text-on-prominent shadow-sm" : "bg-primary text-on-primary";
-  const arrowClasses = variant === "inverse" ? "fill-prominent" : "fill-primary";
+  const surfaceClasses = variant === "inverse" ? "bg-prominent text-on-prominent shadow-sm" : "bg-prominent-inverse text-on-prominent-inverse";
+  const arrowClasses = variant === "inverse" ? "fill-prominent" : "fill-prominent-inverse";
   return /* @__PURE__ */ jsx51(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs25(
     TooltipPrimitive.Content,
     __spreadProps(__spreadValues({
@@ -5515,7 +5525,7 @@ function TooltipContent(_a) {
       "data-variant": variant,
       sideOffset,
       className: cn(
-        "z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md border-0 px-3 py-1.5 text-sm font-medium text-balance whitespace-normal fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md border-0 px-3 py-1.5 has-[[data-slot=kbd]]:px-3.5 has-[[data-slot=kbd]]:py-2 has-[[data-slot=kbd]]:space-y-1.5 text-sm font-medium text-balance whitespace-normal fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         surfaceClasses,
         className
       )
@@ -5808,7 +5818,10 @@ function SidebarHeader(_a) {
     __spreadValues({
       "data-slot": "sidebar-header",
       "data-sidebar": "header",
-      className: cn("flex flex-col gap-2 p-2", className)
+      className: cn(
+        "flex flex-col gap-2 px-layout-margin-inline py-2 group-data-[collapsible=icon]:px-2",
+        className
+      )
     }, props)
   );
 }
@@ -5819,7 +5832,10 @@ function SidebarFooter(_a) {
     __spreadValues({
       "data-slot": "sidebar-footer",
       "data-sidebar": "footer",
-      className: cn("flex flex-col gap-2 p-2", className)
+      className: cn(
+        "flex flex-col gap-2 px-layout-margin-inline py-2 group-data-[collapsible=icon]:px-2",
+        className
+      )
     }, props)
   );
 }
@@ -5859,7 +5875,10 @@ function SidebarGroup(_a) {
     __spreadValues({
       "data-slot": "sidebar-group",
       "data-sidebar": "group",
-      className: cn("relative flex w-full min-w-0 flex-col p-2", className)
+      className: cn(
+        "relative flex w-full min-w-0 flex-col px-layout-margin-inline py-2 group-data-[collapsible=icon]:px-2",
+        className
+      )
     }, props)
   );
 }
@@ -5947,7 +5966,7 @@ function SidebarMenuItem(_a) {
   );
 }
 var sidebarMenuButtonVariants = cva13(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-sm p-2 text-left text-sidebar-foreground text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-secondary-hover hover:text-primary focus-visible:ring-2 active:bg-secondary-hover active:text-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-secondary-hover data-[active=true]:font-semibold data-[active=true]:text-primary data-[active=true]:hover:bg-secondary-hover data-[active=true]:hover:text-primary data-[state=open]:hover:bg-secondary-hover data-[state=open]:hover:text-primary [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 data-[active=true]:[&>svg]:text-primary",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-sm p-2 text-left text-sidebar-foreground text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-secondary-hover hover:text-primary focus-visible:ring-2 active:bg-secondary-hover active:text-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-primary/10 data-[active=true]:font-semibold data-[active=true]:text-primary data-[active=true]:hover:bg-primary/10 data-[active=true]:hover:text-primary data-[state=open]:hover:bg-secondary-hover data-[state=open]:hover:text-primary [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 data-[active=true]:[&>svg]:text-primary",
   {
     variants: {
       variant: {
@@ -5957,7 +5976,7 @@ var sidebarMenuButtonVariants = cva13(
       size: {
         default: "h-8 text-sm",
         sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:justify-center"
       }
     },
     defaultVariants: {
@@ -6157,7 +6176,7 @@ function SidebarMenuSubButton(_a) {
       "data-active": isActive,
       className: cn(
         "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-sm px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-secondary-hover hover:text-primary focus-visible:ring-2 active:bg-secondary-hover active:text-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 data-[active=true]:[&>svg]:text-primary",
-        "data-[active=true]:bg-secondary-hover data-[active=true]:text-primary",
+        "data-[active=true]:bg-primary/10 data-[active=true]:text-primary",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
         "group-data-[collapsible=icon]:hidden",
@@ -6454,7 +6473,7 @@ function Switch(_a) {
       "data-slot": "switch",
       "data-size": size,
       className: cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-[6px] border border-transparent p-[3px] shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-[state=checked]:bg-slider-range data-[state=unchecked]:bg-input",
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent p-[3px] shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
         className
       )
     }, props), {
@@ -6463,7 +6482,7 @@ function Switch(_a) {
         {
           "data-slot": "switch-thumb",
           className: cn(
-            "pointer-events-none block rounded-[3px] ring-0 transition-transform group-data-[size=default]/switch:size-[18px] group-data-[size=sm]/switch:size-[14px] data-[state=checked]:translate-x-[calc(100%+1px)] data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary data-[state=unchecked]:bg-on-subtle"
+            "pointer-events-none block rounded-full bg-prominent ring-0 transition-transform group-data-[size=default]/switch:size-[18px] group-data-[size=sm]/switch:size-[14px] data-[state=checked]:translate-x-[calc(100%+1px)] data-[state=unchecked]:translate-x-0"
           )
         }
       )