gridsmith-ui 0.6.5 → 0.6.6

package/dist/{chunk-KXNJJKIV.js → chunk-6UZZYWTY.js}

@@ -7,11 +7,11 @@ var variantStyles = {
   default: "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)]",
   neutral: "bg-[var(--ds-text-muted)]/[0.12] text-[var(--ds-text-secondary)]",
   subtle: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]",
-  success: "bg-[var(--ds-status-success)] text-[var(--ds-text-on-primary)]",
+  success: "bg-[var(--ds-status-success)] text-[var(--ds-text-on-success)]",
   "success-soft": "bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success)] border-[length:var(--ds-border-width)] border-[var(--ds-status-success)]/[0.2]",
-  warning: "bg-[var(--ds-status-warning)] text-[var(--ds-text-on-primary)]",
+  warning: "bg-[var(--ds-status-warning)] text-[var(--ds-text-on-warning)]",
   "warning-soft": "bg-[var(--ds-status-warning-bg)] text-[var(--ds-status-warning-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-warning)]/[0.2]",
-  error: "bg-[var(--ds-status-error)] text-[var(--ds-text-on-primary)]",
+  error: "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]",
   "error-soft": "bg-[var(--ds-status-error-bg)] text-[var(--ds-status-error)] border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]/[0.2]",
   outline: "bg-transparent text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
 };
@@ -32,11 +32,11 @@ var paletteByVariant = {
   outline: (n) => paletteOutline[n]
 };
 var paletteDefault = {
-  1: "bg-[var(--ds-palette-1-bold)] text-[var(--ds-text-on-primary)]",
-  2: "bg-[var(--ds-palette-2-bold)] text-[var(--ds-text-on-primary)]",
-  3: "bg-[var(--ds-palette-3-bold)] text-[var(--ds-text-on-primary)]",
-  4: "bg-[var(--ds-palette-4-bold)] text-[var(--ds-text-on-primary)]",
-  5: "bg-[var(--ds-palette-5-bold)] text-[var(--ds-text-on-primary)]"
+  1: "bg-[var(--ds-palette-1-bold)] text-[var(--ds-palette-1-on-bold)]",
+  2: "bg-[var(--ds-palette-2-bold)] text-[var(--ds-palette-2-on-bold)]",
+  3: "bg-[var(--ds-palette-3-bold)] text-[var(--ds-palette-3-on-bold)]",
+  4: "bg-[var(--ds-palette-4-bold)] text-[var(--ds-palette-4-on-bold)]",
+  5: "bg-[var(--ds-palette-5-bold)] text-[var(--ds-palette-5-on-bold)]"
 };
 var paletteSubtle = {
   1: "bg-[var(--ds-palette-1-bg)] text-[var(--ds-palette-1-text)]",
@@ -89,5 +89,5 @@ function Badge({ variant = "default", size = "md", color, iconLeft, iconRight, m
 }
 
 export { Badge };
-//# sourceMappingURL=chunk-KXNJJKIV.js.map
-//# sourceMappingURL=chunk-KXNJJKIV.js.map
+//# sourceMappingURL=chunk-6UZZYWTY.js.map
+//# sourceMappingURL=chunk-6UZZYWTY.js.map

package/dist/chunk-6UZZYWTY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/components/Badge.tsx"],"names":[],"mappings":"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","file":"chunk-6UZZYWTY.js","sourcesContent":["import { cn } from \"../lib/utils\";\nimport { Icon, type IconName } from \"../lib/icons\";\nimport { Tooltip } from \"./Tooltip\";\nimport { useTextOverflow } from \"../lib/use-text-overflow\";\nimport type { ReactNode } from \"react\";\n\nexport type BadgeVariant =\n  | \"default\"\n  | \"neutral\"\n  | \"subtle\"\n  | \"success\"\n  | \"success-soft\"\n  | \"warning\"\n  | \"warning-soft\"\n  | \"error\"\n  | \"error-soft\"\n  | \"outline\";\n\nexport type BadgeSize = \"xs\" | \"sm\" | \"md\";\nexport type BadgePaletteColor = 1 | 2 | 3 | 4 | 5;\n\nconst variantStyles: Record<BadgeVariant, string> = {\n  default: \"bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)]\",\n  neutral: \"bg-[var(--ds-text-muted)]/[0.12] text-[var(--ds-text-secondary)]\",\n  subtle: \"bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]\",\n  success: \"bg-[var(--ds-status-success)] text-[var(--ds-text-on-success)]\",\n  \"success-soft\": \"bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success)] border-[length:var(--ds-border-width)] border-[var(--ds-status-success)]/[0.2]\",\n  warning: \"bg-[var(--ds-status-warning)] text-[var(--ds-text-on-warning)]\",\n  \"warning-soft\": \"bg-[var(--ds-status-warning-bg)] text-[var(--ds-status-warning-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-warning)]/[0.2]\",\n  error: \"bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]\",\n  \"error-soft\": \"bg-[var(--ds-status-error-bg)] text-[var(--ds-status-error)] border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]/[0.2]\",\n  outline: \"bg-transparent text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n};\n\nconst sizeStyles: Record<BadgeSize, string> = {\n  xs: \"px-ds-1.5 py-[1px] text-[length:10px] gap-[3px]\",\n  sm: \"px-ds-2 py-ds-0.5 text-[length:var(--ds-font-size-xs)] gap-ds-1\",\n  md: \"px-ds-2.5 py-ds-0.5 text-[length:var(--ds-font-size-xs)] gap-ds-1\",\n};\n\nconst iconSizes: Record<BadgeSize, number> = {\n  xs: 10,\n  sm: 12,\n  md: 12,\n};\n\ntype PaletteStyleFn = (n: BadgePaletteColor) => string;\n\nconst paletteByVariant: Record<string, PaletteStyleFn> = {\n  default: (n) => paletteDefault[n],\n  neutral: (n) => paletteSubtle[n],\n  subtle: (n) => paletteSubtle[n],\n  outline: (n) => paletteOutline[n],\n};\n\nconst paletteDefault: Record<BadgePaletteColor, string> = {\n  1: \"bg-[var(--ds-palette-1-bold)] text-[var(--ds-palette-1-on-bold)]\",\n  2: \"bg-[var(--ds-palette-2-bold)] text-[var(--ds-palette-2-on-bold)]\",\n  3: \"bg-[var(--ds-palette-3-bold)] text-[var(--ds-palette-3-on-bold)]\",\n  4: \"bg-[var(--ds-palette-4-bold)] text-[var(--ds-palette-4-on-bold)]\",\n  5: \"bg-[var(--ds-palette-5-bold)] text-[var(--ds-palette-5-on-bold)]\",\n};\n\nconst paletteSubtle: Record<BadgePaletteColor, string> = {\n  1: \"bg-[var(--ds-palette-1-bg)] text-[var(--ds-palette-1-text)]\",\n  2: \"bg-[var(--ds-palette-2-bg)] text-[var(--ds-palette-2-text)]\",\n  3: \"bg-[var(--ds-palette-3-bg)] text-[var(--ds-palette-3-text)]\",\n  4: \"bg-[var(--ds-palette-4-bg)] text-[var(--ds-palette-4-text)]\",\n  5: \"bg-[var(--ds-palette-5-bg)] text-[var(--ds-palette-5-text)]\",\n};\n\nconst paletteOutline: Record<BadgePaletteColor, string> = {\n  1: \"bg-transparent text-[var(--ds-palette-1-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-1-bold)]\",\n  2: \"bg-transparent text-[var(--ds-palette-2-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-2-bold)]\",\n  3: \"bg-transparent text-[var(--ds-palette-3-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-3-bold)]\",\n  4: \"bg-transparent text-[var(--ds-palette-4-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-4-bold)]\",\n  5: \"bg-transparent text-[var(--ds-palette-5-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-5-bold)]\",\n};\n\nfunction getPaletteClasses(color: BadgePaletteColor, variant: BadgeVariant): string {\n  const styleFn = paletteByVariant[variant] ?? paletteByVariant.default;\n  return styleFn(color);\n}\n\ninterface BadgeProps {\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  /** Palette colour (1-5). Overrides variant colour with decorative palette tokens. */\n  color?: BadgePaletteColor;\n  /** Icon to show before the label */\n  iconLeft?: IconName;\n  /** Icon to show after the label */\n  iconRight?: IconName;\n  /** Max width before truncation (e.g. \"120px\", \"16ch\"). Shows tooltip when truncated. */\n  maxWidth?: string;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function Badge({ variant = \"default\", size = \"md\", color, iconLeft, iconRight, maxWidth, className, children }: BadgeProps) {\n  const { ref: truncRef, isTruncated } = useTextOverflow({ lines: 1, disabled: !maxWidth });\n  const iconSize = iconSizes[size];\n  const isIconOnly = (iconLeft || iconRight) && !children;\n\n  const colorClasses = color\n    ? getPaletteClasses(color, variant)\n    : variantStyles[variant];\n\n  const badge = (\n    <span\n      className={cn(\n        \"inline-flex items-center font-medium max-w-full whitespace-nowrap\",\n        \"rounded-[var(--ds-radius-full)]\",\n        sizeStyles[size],\n        isIconOnly && size === \"xs\" && \"px-[3px]\",\n        isIconOnly && size === \"sm\" && \"px-ds-1\",\n        isIconOnly && size === \"md\" && \"px-ds-1.5\",\n        colorClasses,\n        className\n      )}\n      style={maxWidth ? { maxWidth } : undefined}\n    >\n      {iconLeft && <Icon name={iconLeft} size={iconSize} className=\"shrink-0\" />}\n      {maxWidth ? (\n        <span ref={truncRef} className=\"truncate\">{children}</span>\n      ) : (\n        children\n      )}\n      {iconRight && <Icon name={iconRight} size={iconSize} className=\"shrink-0\" />}\n    </span>\n  );\n\n  if (isTruncated) {\n    return <Tooltip content={children}>{badge}</Tooltip>;\n  }\n  return badge;\n}\n"]}

package/dist/index.js

@@ -1,7 +1,7 @@
 import { Skeleton } from './chunk-QGBG72OB.js';
 export { Skeleton } from './chunk-QGBG72OB.js';
-import { Badge } from './chunk-KXNJJKIV.js';
-export { Badge } from './chunk-KXNJJKIV.js';
+import { Badge } from './chunk-6UZZYWTY.js';
+export { Badge } from './chunk-6UZZYWTY.js';
 import { useBreakpoint } from './chunk-EKQHHP72.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-EKQHHP72.js';
 import { Tooltip, useTextOverflow, usePosition, Slot, useLatest } from './chunk-DDKCQVKO.js';
@@ -39,9 +39,9 @@ var variantStyles = {
   tertiary: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)] border-transparent hover:brightness-95",
   outline: "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)]",
   ghost: "bg-transparent text-[var(--ds-text-primary)] border-transparent hover:bg-[var(--ds-bg-muted)] shadow-none",
-  destructive: "bg-[var(--ds-status-error)] text-[var(--ds-text-on-primary)] border-transparent hover:opacity-90",
-  success: "bg-[var(--ds-status-success)] text-[var(--ds-text-on-primary)] border-transparent hover:opacity-90",
-  warning: "bg-[var(--ds-status-warning)] text-[var(--ds-text-on-primary)] border-transparent hover:opacity-90",
+  destructive: "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)] border-transparent hover:opacity-90",
+  success: "bg-[var(--ds-status-success)] text-[var(--ds-text-on-success)] border-transparent hover:opacity-90",
+  warning: "bg-[var(--ds-status-warning)] text-[var(--ds-text-on-warning)] border-transparent hover:opacity-90",
   link: "bg-transparent text-[var(--ds-accent-primary)] hover:text-[var(--ds-accent-primary-hover)] hover:underline"
 };
 var sizeStyles = {
@@ -2501,11 +2501,11 @@ var paletteByVariant = {
   outline: (n) => tagPaletteOutline[n]
 };
 var tagPaletteDefault = {
-  1: "bg-[var(--ds-palette-1-bold)] text-[var(--ds-text-on-primary)]",
-  2: "bg-[var(--ds-palette-2-bold)] text-[var(--ds-text-on-primary)]",
-  3: "bg-[var(--ds-palette-3-bold)] text-[var(--ds-text-on-primary)]",
-  4: "bg-[var(--ds-palette-4-bold)] text-[var(--ds-text-on-primary)]",
-  5: "bg-[var(--ds-palette-5-bold)] text-[var(--ds-text-on-primary)]"
+  1: "bg-[var(--ds-palette-1-bold)] text-[var(--ds-palette-1-on-bold)]",
+  2: "bg-[var(--ds-palette-2-bold)] text-[var(--ds-palette-2-on-bold)]",
+  3: "bg-[var(--ds-palette-3-bold)] text-[var(--ds-palette-3-on-bold)]",
+  4: "bg-[var(--ds-palette-4-bold)] text-[var(--ds-palette-4-on-bold)]",
+  5: "bg-[var(--ds-palette-5-bold)] text-[var(--ds-palette-5-on-bold)]"
 };
 var tagPaletteSubtle = {
   1: "bg-[var(--ds-palette-1-bg)] text-[var(--ds-palette-1-text)]",
@@ -8173,7 +8173,7 @@ function StepCircle({ status, index, onClick, clickable }) {
         !clickable && "cursor-default",
         status === "complete" && "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)]",
         status === "current" && `border-2 ${ACTIVE_RING} text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)]`,
-        status === "error" && "bg-[var(--ds-status-error)] text-[var(--ds-text-on-primary)]",
+        status === "error" && "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]",
         status === "loading" && `border-2 ${ACTIVE_RING} text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)] animate-pulse`,
         status === "upcoming" && "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] text-[var(--ds-text-muted)] bg-[var(--ds-bg-surface)]"
       ),
@@ -9137,13 +9137,13 @@ function findScrollParent(el) {
 function Breadcrumbs3({ items, onLight, pill, separator = "chevron" }) {
   if (!items.length) return null;
   const sepEl = (key) => {
-    const cls = cn("select-none flex items-center", onLight ? "text-white/40" : "text-[var(--ds-text-muted)]");
+    const cls = cn("select-none flex items-center", onLight ? "text-[var(--ds-text-on-primary)]/40" : "text-[var(--ds-text-muted)]");
     if (separator === "slash") return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cls, children: "/" }, `s${key}`);
     if (separator === "dot") return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cls, children: "\xB7" }, `s${key}`);
     if (separator === "arrow") return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cls, children: /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: 12 }) }, `s${key}`);
     return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cls, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 12 }) }, `s${key}`);
   };
-  const pillCls = pill ? cn("rounded-[var(--ds-radius-full)]", onLight ? "bg-white/10 px-ds-2.5 py-ds-0.5" : "bg-[var(--ds-bg-muted)] px-ds-2.5 py-ds-0.5") : "";
+  const pillCls = pill ? cn("rounded-[var(--ds-radius-full)]", onLight ? "bg-[var(--ds-text-on-primary)]/10 px-ds-2.5 py-ds-0.5" : "bg-[var(--ds-bg-muted)] px-ds-2.5 py-ds-0.5") : "";
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-ds-1.5 text-sm", children: items.map((item, i) => {
     const isNavigable = !!(item.onClick || item.href);
     return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-ds-1.5", children: [
@@ -9158,14 +9158,14 @@ function Breadcrumbs3({ items, onLight, pill, separator = "chevron" }) {
           },
           className: cn(
             "transition-colors duration-[var(--ds-transition-speed)]",
-            onLight ? "text-white/60 hover:text-white/90" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]",
+            onLight ? "text-[var(--ds-text-on-primary)]/60 hover:text-[var(--ds-text-on-primary)]/90" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]",
             pillCls
           ),
           children: item.label
         }
       ) : /* @__PURE__ */ jsx("span", { className: cn(
         "font-medium",
-        onLight ? "text-white/80" : "text-[var(--ds-text-primary)]",
+        onLight ? "text-[var(--ds-text-on-primary)]/80" : "text-[var(--ds-text-primary)]",
         pillCls
       ), children: item.label })
     ] }, i);
@@ -9183,7 +9183,7 @@ function BackButton({ onLight, onClick }) {
         "w-[var(--ds-control-height-sm)] h-[var(--ds-control-height-sm)] rounded-[var(--ds-radius-md)]",
         "transition-colors duration-[var(--ds-transition-speed)]",
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        onLight ? "bg-white/10 text-white/80 hover:bg-white/20 hover:text-white" : [
+        onLight ? "bg-[var(--ds-text-on-primary)]/10 text-[var(--ds-text-on-primary)]/80 hover:bg-[var(--ds-text-on-primary)]/20 hover:text-[var(--ds-text-on-primary)]" : [
           "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)]",
           "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
           "hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
@@ -9531,13 +9531,13 @@ function ColourfulHeader({
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
                       /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: cn(
                         "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)]",
-                        isBold ? "text-white" : "text-[var(--ds-text-primary)]"
+                        isBold ? "text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)]"
                       ), children: title }),
                       badge
                     ] }),
                     description && /* @__PURE__ */ jsx(ClampedText, { className: cn(
                       "mt-ds-1 text-sm",
-                      isBold ? "text-white/70" : "text-[var(--ds-text-secondary)]"
+                      isBold ? "text-[var(--ds-text-on-primary)]/70" : "text-[var(--ds-text-secondary)]"
                     ), children: description })
                   ] })
                 ] }),
@@ -9734,13 +9734,13 @@ function SnappingHeader({
                         })(),
                         /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: cn(
                           "font-[family-name:var(--ds-font-display)] font-[var(--ds-weight-heading)]",
-                          collapsed ? "text-lg text-[var(--ds-text-primary)]" : cn("text-3xl", onLight ? "text-white" : "text-[var(--ds-text-primary)]")
+                          collapsed ? "text-lg text-[var(--ds-text-primary)]" : cn("text-3xl", onLight ? "text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)]")
                         ), children: title }),
                         badge
                       ] }),
                       !collapsed && description && /* @__PURE__ */ jsx(ClampedText, { className: cn(
                         "mt-ds-1 text-sm",
-                        onLight ? "text-white/70" : "text-[var(--ds-text-secondary)]"
+                        onLight ? "text-[var(--ds-text-on-primary)]/70" : "text-[var(--ds-text-secondary)]"
                       ), children: description })
                     ] })
                   ] }),
@@ -9942,7 +9942,7 @@ function Dock({
                       className: cn(
                         "absolute -top-1.5 -right-1.5 flex items-center justify-center",
                         "min-w-[16px] h-4 px-ds-1 text-2xs font-bold rounded-[var(--ds-radius-full)]",
-                        "bg-[var(--ds-status-error)] text-[var(--ds-text-on-primary)]",
+                        "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]",
                         "pointer-events-none"
                       ),
                       children: item.badge > 99 ? "99+" : item.badge