@devalok/shilp-sutra 0.6.2 → 0.8.0

package/dist/tailwind/index.cjs

@@ -160,6 +160,7 @@ const r = {
         "layer-01": "var(--color-layer-01)",
         "layer-02": "var(--color-layer-02)",
         "layer-03": "var(--color-layer-03)",
+        "layer-active": "var(--color-layer-active)",
         overlay: "var(--color-overlay)",
         field: "var(--color-field)",
         "field-hover": "var(--color-field-hover)",
@@ -172,6 +173,7 @@ const r = {
         "text-error": "var(--color-text-error)",
         "text-success": "var(--color-text-success)",
         "text-warning": "var(--color-text-warning)",
+        "text-info": "var(--color-text-info)",
         "text-link": "var(--color-text-link)",
         "text-on-color": "var(--color-text-on-color)",
         "text-inverse": "var(--color-text-inverse)",
@@ -334,6 +336,7 @@ const r = {
         sticky: "var(--z-sticky)",
         overlay: "var(--z-overlay)",
         modal: "var(--z-modal)",
+        popover: "var(--z-popover)",
         toast: "var(--z-toast)",
         tooltip: "var(--z-tooltip)"
       }

package/dist/tailwind/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAuV3B,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CA0V3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/tailwind/preset.js

@@ -160,6 +160,7 @@ const r = {
         "layer-01": "var(--color-layer-01)",
         "layer-02": "var(--color-layer-02)",
         "layer-03": "var(--color-layer-03)",
+        "layer-active": "var(--color-layer-active)",
         overlay: "var(--color-overlay)",
         field: "var(--color-field)",
         "field-hover": "var(--color-field-hover)",
@@ -172,6 +173,7 @@ const r = {
         "text-error": "var(--color-text-error)",
         "text-success": "var(--color-text-success)",
         "text-warning": "var(--color-text-warning)",
+        "text-info": "var(--color-text-info)",
         "text-link": "var(--color-text-link)",
         "text-on-color": "var(--color-text-on-color)",
         "text-inverse": "var(--color-text-inverse)",
@@ -334,6 +336,7 @@ const r = {
         sticky: "var(--z-sticky)",
         overlay: "var(--z-overlay)",
         modal: "var(--z-modal)",
+        popover: "var(--z-popover)",
         toast: "var(--z-toast)",
         tooltip: "var(--z-tooltip)"
       }

package/dist/tokens/semantic.css

@@ -58,6 +58,7 @@
   --color-layer-01:             var(--neutral-0);
   --color-layer-02:             var(--neutral-50);
   --color-layer-03:             var(--neutral-100);
+  --color-layer-active:         var(--neutral-200);
   --color-layer-accent-subtle:  var(--pink-50);
   --color-overlay:              rgba(5, 5, 5, 0.50);
   --color-field:                var(--neutral-50);
@@ -67,7 +68,7 @@
   --color-text-primary:         var(--neutral-900);
   --color-text-secondary:       var(--neutral-700);
   --color-text-tertiary:        var(--neutral-600);
-  --color-text-placeholder:     var(--neutral-400);
+  --color-text-placeholder:     var(--neutral-500);
   --color-text-helper:          var(--neutral-600);
   --color-text-disabled:        var(--neutral-400);
   --color-text-error:           var(--red-600);
@@ -226,6 +227,7 @@
   --z-sticky: 1100;
   --z-overlay: 1200;
   --z-modal: 1300;
+  --z-popover: 1400;
   --z-toast: 1500;
   --z-tooltip: 1600;
 
@@ -282,6 +284,7 @@
   --color-layer-01:             var(--neutral-900);
   --color-layer-02:             var(--neutral-800);
   --color-layer-03:             var(--neutral-700);
+  --color-layer-active:         var(--neutral-700);
   --color-layer-accent-subtle:  var(--pink-950);
   --color-overlay:              rgba(0, 0, 0, 0.70);
   /* Fields */
@@ -413,6 +416,12 @@
   --chart-8: var(--orange-400);
 }
 
+/* Ensure Radix popper content (Select, Combobox, Popover, etc.)
+   renders above Sheet/Dialog overlays */
+[data-radix-popper-content-wrapper] {
+  z-index: var(--z-popover) !important;
+}
+
 /* ── Reduced Motion ──────────────────────────────────── */
 @media (prefers-reduced-motion: reduce) {
   *,

package/dist/ui/alert.js

@@ -4,75 +4,54 @@ import { IconInfoCircle as s, IconAlertCircle as x, IconAlertTriangle as m, Icon
 import * as g from "react";
 import { cva as v } from "class-variance-authority";
 import { cn as p } from "./lib/utils.js";
-const N = v(
-  "relative flex gap-ds-04 rounded-ds-lg border p-ds-05",
-  {
-    variants: {
-      variant: {
-        subtle: "",
-        filled: "",
-        outline: ""
-      },
-      color: {
-        info: "",
-        success: "",
-        warning: "",
-        error: "",
-        neutral: ""
-      }
+const N = v("relative flex gap-ds-04 rounded-ds-lg border p-ds-05", {
+  variants: {
+    variant: {
+      subtle: "",
+      filled: "",
+      outline: ""
     },
-    compoundVariants: [
-      // subtle (surface bg) — default, matches previous behavior
-      { variant: "subtle", color: "info", className: "bg-info-surface border-info-border text-info-text" },
-      { variant: "subtle", color: "success", className: "bg-success-surface border-success-border text-success-text" },
-      { variant: "subtle", color: "warning", className: "bg-warning-surface border-warning-border text-warning-text" },
-      { variant: "subtle", color: "error", className: "bg-error-surface border-error-border text-error-text" },
-      { variant: "subtle", color: "neutral", className: "bg-layer-02 border-border text-text-primary [&>svg]:text-text-secondary" },
-      // filled (solid bg, white text)
-      { variant: "filled", color: "info", className: "bg-info text-text-on-color border-transparent [&>svg]:text-text-on-color" },
-      { variant: "filled", color: "success", className: "bg-success text-text-on-color border-transparent [&>svg]:text-text-on-color" },
-      { variant: "filled", color: "warning", className: "bg-warning text-text-on-color border-transparent [&>svg]:text-text-on-color" },
-      { variant: "filled", color: "error", className: "bg-error text-text-on-color border-transparent [&>svg]:text-text-on-color" },
-      { variant: "filled", color: "neutral", className: "bg-layer-03 text-text-primary border-transparent [&>svg]:text-text-secondary" },
-      // outline (transparent bg, colored border)
-      { variant: "outline", color: "info", className: "bg-transparent border-info-border text-info-text" },
-      { variant: "outline", color: "success", className: "bg-transparent border-success-border text-success-text" },
-      { variant: "outline", color: "warning", className: "bg-transparent border-warning-border text-warning-text" },
-      { variant: "outline", color: "error", className: "bg-transparent border-error-border text-error-text" },
-      { variant: "outline", color: "neutral", className: "bg-transparent border-border text-text-primary [&>svg]:text-text-secondary" }
-    ],
-    defaultVariants: { variant: "subtle", color: "info" }
-  }
-), w = {
+    color: {
+      info: "",
+      success: "",
+      warning: "",
+      error: "",
+      neutral: ""
+    }
+  },
+  compoundVariants: [
+    // subtle (surface bg) — default, matches previous behavior
+    { variant: "subtle", color: "info", className: "bg-info-surface border-info-border text-info-text" },
+    { variant: "subtle", color: "success", className: "bg-success-surface border-success-border text-success-text" },
+    { variant: "subtle", color: "warning", className: "bg-warning-surface border-warning-border text-warning-text" },
+    { variant: "subtle", color: "error", className: "bg-error-surface border-error-border text-error-text" },
+    { variant: "subtle", color: "neutral", className: "bg-layer-02 border-border text-text-primary [&>svg]:text-text-secondary" },
+    // filled (solid bg, white text)
+    { variant: "filled", color: "info", className: "bg-info text-text-on-color border-transparent [&>svg]:text-text-on-color" },
+    { variant: "filled", color: "success", className: "bg-success text-text-on-color border-transparent [&>svg]:text-text-on-color" },
+    { variant: "filled", color: "warning", className: "bg-warning text-text-on-color border-transparent [&>svg]:text-text-on-color" },
+    { variant: "filled", color: "error", className: "bg-error text-text-on-color border-transparent [&>svg]:text-text-on-color" },
+    { variant: "filled", color: "neutral", className: "bg-layer-03 text-text-primary border-transparent [&>svg]:text-text-secondary" },
+    // outline (transparent bg, colored border)
+    { variant: "outline", color: "info", className: "bg-transparent border-info-border text-info-text" },
+    { variant: "outline", color: "success", className: "bg-transparent border-success-border text-success-text" },
+    { variant: "outline", color: "warning", className: "bg-transparent border-warning-border text-warning-text" },
+    { variant: "outline", color: "error", className: "bg-transparent border-error-border text-error-text" },
+    { variant: "outline", color: "neutral", className: "bg-transparent border-border text-text-primary [&>svg]:text-text-secondary" }
+  ],
+  defaultVariants: { variant: "subtle", color: "info" }
+}), w = {
   info: s,
   success: u,
   warning: m,
   error: x,
   neutral: s
-}, y = g.forwardRef(
-  ({ className: n, variant: c = "subtle", color: e = "info", title: t, onDismiss: o, children: i, ...l }, d) => {
-    const b = w[e ?? "info"];
-    return /* @__PURE__ */ a("div", { ref: d, className: p(N({ variant: c, color: e }), n), role: "alert", ...l, children: [
-      /* @__PURE__ */ r(b, { className: "mt-ds-01 h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
-      /* @__PURE__ */ a("div", { className: "flex-1 min-w-0", children: [
-        t && /* @__PURE__ */ r("p", { className: "text-ds-md font-semibold mb-ds-01", children: t }),
-        /* @__PURE__ */ r("div", { className: "text-ds-md opacity-[0.9]", children: i })
-      ] }),
-      o && /* @__PURE__ */ r(
-        "button",
-        {
-          type: "button",
-          onClick: o,
-          className: "shrink-0 min-h-6 min-w-6 flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
-          "aria-label": "Dismiss",
-          children: /* @__PURE__ */ r(f, { className: "h-ico-sm w-ico-sm" })
-        }
-      )
-    ] });
-  }
-);
-y.displayName = "Alert";
+}, h = g.forwardRef(({ className: n, variant: c = "subtle", color: e = "info", title: t, onDismiss: o, children: i, ...l }, d) => {
+  const b = w[e ?? "info"];
+  return a("div", { ref: d, className: p(N({ variant: c, color: e }), n), role: "alert", ...l, children: [r(b, { className: "mt-ds-01 h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }), a("div", { className: "flex-1 min-w-0", children: [t && r("p", { className: "text-ds-md font-semibold mb-ds-01", children: t }), r("div", { className: "text-ds-md opacity-[0.9]", children: i })] }), o && r("button", { type: "button", onClick: o, className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus", "aria-label": "Dismiss", children: r(f, { className: "h-ico-sm w-ico-sm" }) })] });
+});
+h.displayName = "Alert";
 export {
-  y as Alert,
+  h as Alert,
   N as alertVariants
 };

package/dist/ui/avatar.js

@@ -4,26 +4,23 @@ import * as i from "react";
 import { Root as n, Fallback as o, Image as t } from "../primitives/react-avatar.js";
 import { cva as u } from "class-variance-authority";
 import { cn as r } from "./lib/utils.js";
-const w = u(
-  "relative flex shrink-0 overflow-hidden",
-  {
-    variants: {
-      size: {
-        xs: "h-ds-xs w-ds-xs",
-        sm: "h-ds-sm w-ds-sm",
-        md: "h-ds-md w-ds-md",
-        lg: "h-ds-lg w-ds-lg",
-        xl: "h-ds-xl w-ds-xl"
-      },
-      shape: {
-        circle: "rounded-ds-full",
-        square: "rounded-ds-none",
-        rounded: "rounded-ds-md"
-      }
+const h = u("relative flex shrink-0 overflow-hidden", {
+  variants: {
+    size: {
+      xs: "h-ds-xs w-ds-xs",
+      sm: "h-ds-sm w-ds-sm",
+      md: "h-ds-md w-ds-md",
+      lg: "h-ds-lg w-ds-lg",
+      xl: "h-ds-xl w-ds-xl"
     },
-    defaultVariants: { size: "md", shape: "circle" }
-  }
-), h = {
+    shape: {
+      circle: "rounded-ds-full",
+      square: "rounded-ds-none",
+      rounded: "rounded-ds-md"
+    }
+  },
+  defaultVariants: { size: "md", shape: "circle" }
+}), w = {
   online: "bg-success",
   offline: "bg-layer-03",
   busy: "bg-error",
@@ -39,54 +36,15 @@ const w = u(
   md: "h-ds-03 w-ds-03",
   lg: "h-[12px] w-[12px]",
   xl: "h-ds-04 w-ds-04"
-}, g = i.forwardRef(({ className: a, size: s, shape: e, status: d, children: m, ...f }, c) => /* @__PURE__ */ p("span", { className: "relative inline-flex shrink-0", children: [
-  /* @__PURE__ */ l(
-    n,
-    {
-      ref: c,
-      className: r(w({ size: s, shape: e }), a),
-      ...f,
-      children: m
-    }
-  ),
-  d && /* @__PURE__ */ l(
-    "span",
-    {
-      className: r(
-        "absolute bottom-0 right-0 rounded-ds-full ring-2 ring-layer-01",
-        h[d],
-        b[s ?? "md"]
-      ),
-      role: "img",
-      "aria-label": x[d]
-    }
-  )
-] }));
+}, g = i.forwardRef(({ className: a, size: s, shape: e, status: d, children: m, ...f }, c) => p("span", { className: "relative inline-flex shrink-0", children: [l(n, { ref: c, className: r(h({ size: s, shape: e }), a), ...f, children: m }), d && l("span", { className: r("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-layer-01", w[d], b[s ?? "md"]), role: "img", "aria-label": x[d] })] }));
 g.displayName = n.displayName;
-const y = i.forwardRef(({ className: a, ...s }, e) => /* @__PURE__ */ l(
-  t,
-  {
-    ref: e,
-    className: r("aspect-square h-full w-full", a),
-    ...s
-  }
-));
+const y = i.forwardRef(({ className: a, ...s }, e) => l(t, { ref: e, className: r("aspect-square h-full w-full", a), ...s }));
 y.displayName = t.displayName;
-const v = i.forwardRef(({ className: a, ...s }, e) => /* @__PURE__ */ l(
-  o,
-  {
-    ref: e,
-    className: r(
-      "flex h-full w-full items-center justify-center rounded-ds-full bg-interactive-subtle text-interactive",
-      a
-    ),
-    ...s
-  }
-));
+const v = i.forwardRef(({ className: a, ...s }, e) => l(o, { ref: e, className: r("flex h-full w-full items-center justify-center rounded-ds-full bg-interactive-subtle text-interactive", a), ...s }));
 v.displayName = o.displayName;
 export {
   g as Avatar,
   v as AvatarFallback,
   y as AvatarImage,
-  w as avatarVariants
+  h as avatarVariants
 };

package/dist/ui/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 declare const badgeVariants: (props?: ({
     variant?: "solid" | "outline" | "destructive" | "subtle" | "secondary" | null | undefined;
     color?: "accent" | "default" | "error" | "warning" | "success" | "cyan" | "indigo" | "orange" | "teal" | "info" | "brand" | "amber" | "slate" | "emerald" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Props for Badge — a compact inline label with a two-axis variant system, an optional

package/dist/ui/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa;;;;8EA2FlB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,EAC1D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,oFAwBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa;;;;8EA4FlB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,EAC1D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,oFAwBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/badge.js

@@ -4,121 +4,98 @@ import { IconX as b } from "@tabler/icons-react";
 import * as g from "react";
 import { cva as x } from "class-variance-authority";
 import { cn as m } from "./lib/utils.js";
-const u = x(
-  "inline-flex items-center gap-ds-02b font-sans font-medium rounded-ds-full border",
-  {
-    variants: {
-      variant: {
-        subtle: "",
-        secondary: "",
-        // alias → subtle
-        solid: "",
-        outline: "",
-        destructive: ""
-        // alias → solid + error
-      },
-      color: {
-        default: "",
-        info: "",
-        success: "",
-        error: "",
-        warning: "",
-        brand: "",
-        accent: "",
-        teal: "",
-        amber: "",
-        slate: "",
-        indigo: "",
-        cyan: "",
-        orange: "",
-        emerald: ""
-      },
-      size: {
-        sm: "h-[20px] px-ds-03 text-ds-xs",
-        md: "h-ds-xs px-ds-03 text-ds-sm",
-        lg: "h-ds-xs-plus px-ds-04 text-ds-md"
-      }
+const u = x("inline-flex items-center gap-ds-02b font-sans font-medium rounded-ds-full border", {
+  variants: {
+    variant: {
+      subtle: "",
+      secondary: "",
+      // alias → subtle
+      solid: "",
+      outline: "",
+      destructive: ""
+      // alias → solid + error
     },
-    compoundVariants: [
-      // subtle (surface bg)
-      { variant: "subtle", color: "default", className: "bg-field text-text-secondary border-border" },
-      // "secondary" alias → same as subtle + default
-      { variant: "secondary", color: "default", className: "bg-field text-text-secondary border-border" },
-      // "destructive" alias → solid + error
-      { variant: "destructive", color: "default", className: "bg-error text-text-on-color border-transparent" },
-      { variant: "destructive", color: "error", className: "bg-error text-text-on-color border-transparent" },
-      { variant: "subtle", color: "info", className: "bg-info-surface text-info-text border-info-border" },
-      { variant: "subtle", color: "success", className: "bg-success-surface text-success-text border-success-border" },
-      { variant: "subtle", color: "error", className: "bg-error-surface text-error-text border-error-border" },
-      { variant: "subtle", color: "warning", className: "bg-warning-surface text-warning-text border-warning-border" },
-      { variant: "subtle", color: "brand", className: "bg-interactive-subtle text-text-brand border-interactive" },
-      { variant: "subtle", color: "accent", className: "bg-accent-subtle text-accent border-accent" },
-      { variant: "subtle", color: "teal", className: "bg-category-teal-surface text-category-teal-text border-category-teal-border" },
-      { variant: "subtle", color: "amber", className: "bg-category-amber-surface text-category-amber-text border-category-amber-border" },
-      { variant: "subtle", color: "slate", className: "bg-category-slate-surface text-category-slate-text border-category-slate-border" },
-      { variant: "subtle", color: "indigo", className: "bg-category-indigo-surface text-category-indigo-text border-category-indigo-border" },
-      { variant: "subtle", color: "cyan", className: "bg-category-cyan-surface text-category-cyan-text border-category-cyan-border" },
-      { variant: "subtle", color: "orange", className: "bg-category-orange-surface text-category-orange-text border-category-orange-border" },
-      { variant: "subtle", color: "emerald", className: "bg-category-emerald-surface text-category-emerald-text border-category-emerald-border" },
-      // solid (filled bg)
-      { variant: "solid", color: "default", className: "bg-interactive text-text-on-color border-transparent" },
-      { variant: "solid", color: "info", className: "bg-info text-text-on-color border-transparent" },
-      { variant: "solid", color: "success", className: "bg-success text-text-on-color border-transparent" },
-      { variant: "solid", color: "error", className: "bg-error text-text-on-color border-transparent" },
-      { variant: "solid", color: "warning", className: "bg-warning text-text-on-color border-transparent" },
-      { variant: "solid", color: "brand", className: "bg-interactive text-text-on-color border-transparent" },
-      { variant: "solid", color: "accent", className: "bg-accent text-text-on-color border-transparent" },
-      { variant: "solid", color: "teal", className: "bg-category-teal text-text-on-color border-transparent" },
-      { variant: "solid", color: "amber", className: "bg-category-amber text-text-on-color border-transparent" },
-      { variant: "solid", color: "slate", className: "bg-category-slate text-text-on-color border-transparent" },
-      { variant: "solid", color: "indigo", className: "bg-category-indigo text-text-on-color border-transparent" },
-      { variant: "solid", color: "cyan", className: "bg-category-cyan text-text-on-color border-transparent" },
-      { variant: "solid", color: "orange", className: "bg-category-orange text-text-on-color border-transparent" },
-      { variant: "solid", color: "emerald", className: "bg-category-emerald text-text-on-color border-transparent" },
-      // outline (border only)
-      { variant: "outline", color: "default", className: "bg-transparent text-text-secondary border-border" },
-      { variant: "outline", color: "info", className: "bg-transparent text-info-text border-info-border" },
-      { variant: "outline", color: "success", className: "bg-transparent text-success-text border-success-border" },
-      { variant: "outline", color: "error", className: "bg-transparent text-error-text border-error-border" },
-      { variant: "outline", color: "warning", className: "bg-transparent text-warning-text border-warning-border" },
-      { variant: "outline", color: "brand", className: "bg-transparent text-text-brand border-interactive" },
-      { variant: "outline", color: "accent", className: "bg-transparent text-accent border-accent" },
-      { variant: "outline", color: "teal", className: "bg-transparent text-category-teal-text border-category-teal-border" },
-      { variant: "outline", color: "amber", className: "bg-transparent text-category-amber-text border-category-amber-border" },
-      { variant: "outline", color: "slate", className: "bg-transparent text-category-slate-text border-category-slate-border" },
-      { variant: "outline", color: "indigo", className: "bg-transparent text-category-indigo-text border-category-indigo-border" },
-      { variant: "outline", color: "cyan", className: "bg-transparent text-category-cyan-text border-category-cyan-border" },
-      { variant: "outline", color: "orange", className: "bg-transparent text-category-orange-text border-category-orange-border" },
-      { variant: "outline", color: "emerald", className: "bg-transparent text-category-emerald-text border-category-emerald-border" }
-    ],
-    defaultVariants: {
-      variant: "subtle",
-      color: "default",
-      size: "md"
+    color: {
+      default: "",
+      info: "",
+      success: "",
+      error: "",
+      warning: "",
+      brand: "",
+      accent: "",
+      teal: "",
+      amber: "",
+      slate: "",
+      indigo: "",
+      cyan: "",
+      orange: "",
+      emerald: ""
+    },
+    size: {
+      xs: "h-[16px] px-ds-02b text-ds-xs",
+      sm: "h-[20px] px-ds-03 text-ds-xs",
+      md: "h-ds-xs px-ds-03 text-ds-sm",
+      lg: "h-ds-xs-plus px-ds-04 text-ds-md"
     }
+  },
+  compoundVariants: [
+    // subtle (surface bg)
+    { variant: "subtle", color: "default", className: "bg-field text-text-secondary border-border" },
+    // "secondary" alias → same as subtle + default
+    { variant: "secondary", color: "default", className: "bg-field text-text-secondary border-border" },
+    // "destructive" alias → solid + error
+    { variant: "destructive", color: "default", className: "bg-error text-text-on-color border-transparent" },
+    { variant: "destructive", color: "error", className: "bg-error text-text-on-color border-transparent" },
+    { variant: "subtle", color: "info", className: "bg-info-surface text-info-text border-info-border" },
+    { variant: "subtle", color: "success", className: "bg-success-surface text-success-text border-success-border" },
+    { variant: "subtle", color: "error", className: "bg-error-surface text-error-text border-error-border" },
+    { variant: "subtle", color: "warning", className: "bg-warning-surface text-warning-text border-warning-border" },
+    { variant: "subtle", color: "brand", className: "bg-interactive-subtle text-text-brand border-interactive" },
+    { variant: "subtle", color: "accent", className: "bg-accent-subtle text-accent border-accent" },
+    { variant: "subtle", color: "teal", className: "bg-category-teal-surface text-category-teal-text border-category-teal-border" },
+    { variant: "subtle", color: "amber", className: "bg-category-amber-surface text-category-amber-text border-category-amber-border" },
+    { variant: "subtle", color: "slate", className: "bg-category-slate-surface text-category-slate-text border-category-slate-border" },
+    { variant: "subtle", color: "indigo", className: "bg-category-indigo-surface text-category-indigo-text border-category-indigo-border" },
+    { variant: "subtle", color: "cyan", className: "bg-category-cyan-surface text-category-cyan-text border-category-cyan-border" },
+    { variant: "subtle", color: "orange", className: "bg-category-orange-surface text-category-orange-text border-category-orange-border" },
+    { variant: "subtle", color: "emerald", className: "bg-category-emerald-surface text-category-emerald-text border-category-emerald-border" },
+    // solid (filled bg)
+    { variant: "solid", color: "default", className: "bg-interactive text-text-on-color border-transparent" },
+    { variant: "solid", color: "info", className: "bg-info text-text-on-color border-transparent" },
+    { variant: "solid", color: "success", className: "bg-success text-text-on-color border-transparent" },
+    { variant: "solid", color: "error", className: "bg-error text-text-on-color border-transparent" },
+    { variant: "solid", color: "warning", className: "bg-warning text-text-on-color border-transparent" },
+    { variant: "solid", color: "brand", className: "bg-interactive text-text-on-color border-transparent" },
+    { variant: "solid", color: "accent", className: "bg-accent text-text-on-color border-transparent" },
+    { variant: "solid", color: "teal", className: "bg-category-teal text-text-on-color border-transparent" },
+    { variant: "solid", color: "amber", className: "bg-category-amber text-text-on-color border-transparent" },
+    { variant: "solid", color: "slate", className: "bg-category-slate text-text-on-color border-transparent" },
+    { variant: "solid", color: "indigo", className: "bg-category-indigo text-text-on-color border-transparent" },
+    { variant: "solid", color: "cyan", className: "bg-category-cyan text-text-on-color border-transparent" },
+    { variant: "solid", color: "orange", className: "bg-category-orange text-text-on-color border-transparent" },
+    { variant: "solid", color: "emerald", className: "bg-category-emerald text-text-on-color border-transparent" },
+    // outline (border only)
+    { variant: "outline", color: "default", className: "bg-transparent text-text-secondary border-border" },
+    { variant: "outline", color: "info", className: "bg-transparent text-info-text border-info-border" },
+    { variant: "outline", color: "success", className: "bg-transparent text-success-text border-success-border" },
+    { variant: "outline", color: "error", className: "bg-transparent text-error-text border-error-border" },
+    { variant: "outline", color: "warning", className: "bg-transparent text-warning-text border-warning-border" },
+    { variant: "outline", color: "brand", className: "bg-transparent text-text-brand border-interactive" },
+    { variant: "outline", color: "accent", className: "bg-transparent text-accent border-accent" },
+    { variant: "outline", color: "teal", className: "bg-transparent text-category-teal-text border-category-teal-border" },
+    { variant: "outline", color: "amber", className: "bg-transparent text-category-amber-text border-category-amber-border" },
+    { variant: "outline", color: "slate", className: "bg-transparent text-category-slate-text border-category-slate-border" },
+    { variant: "outline", color: "indigo", className: "bg-transparent text-category-indigo-text border-category-indigo-border" },
+    { variant: "outline", color: "cyan", className: "bg-transparent text-category-cyan-text border-category-cyan-border" },
+    { variant: "outline", color: "orange", className: "bg-transparent text-category-orange-text border-category-orange-border" },
+    { variant: "outline", color: "emerald", className: "bg-transparent text-category-emerald-text border-category-emerald-border" }
+  ],
+  defaultVariants: {
+    variant: "subtle",
+    color: "default",
+    size: "md"
   }
-), v = g.forwardRef(
-  ({ className: t, variant: a, color: o, size: s, dot: n, onDismiss: e, children: c, ...l }, i) => /* @__PURE__ */ d("span", { ref: i, className: m(u({ variant: a, color: o, size: s }), t), ...l, children: [
-    n && /* @__PURE__ */ r(
-      "span",
-      {
-        className: "h-ds-02b w-ds-02b rounded-ds-full bg-current opacity-[0.7] shrink-0",
-        "aria-hidden": "true"
-      }
-    ),
-    c,
-    e && /* @__PURE__ */ r(
-      "button",
-      {
-        type: "button",
-        onClick: e,
-        className: "ml-ds-01 min-h-6 min-w-6 flex items-center justify-center rounded-ds-full text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
-        "aria-label": "Remove",
-        children: /* @__PURE__ */ r(b, { className: "h-ico-sm w-ico-sm" })
-      }
-    )
-  ] })
-);
+}), v = g.forwardRef(({ className: t, variant: a, color: o, size: s, dot: n, onDismiss: e, children: c, ...l }, i) => d("span", { ref: i, className: m(u({ variant: a, color: o, size: s }), t), ...l, children: [n && r("span", { className: "h-ds-02b w-ds-02b rounded-ds-full bg-current opacity-[0.7] shrink-0", "aria-hidden": "true" }), c, e && r("button", { type: "button", onClick: e, className: "ml-ds-01 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-full text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus", "aria-label": "Remove", children: r(b, { className: "h-ico-sm w-ico-sm" }) })] }));
 v.displayName = "Badge";
 export {
   v as Badge,

package/dist/ui/banner.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { IconInfoCircle as s, IconAlertCircle as f, IconAlertTriangle as m, IconCircleCheck as b, IconX as u } from "@tabler/icons-react";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { IconInfoCircle as n, IconAlertCircle as f, IconAlertTriangle as m, IconCircleCheck as b, IconX as u } from "@tabler/icons-react";
 import * as x from "react";
 import { cva as g } from "class-variance-authority";
 import { cn as p } from "./lib/utils.js";
@@ -19,24 +19,24 @@ const h = g(
     defaultVariants: { color: "info" }
   }
 ), N = {
-  info: s,
+  info: n,
   success: b,
   warning: m,
   error: f,
-  neutral: s
+  neutral: n
 }, v = x.forwardRef(
-  ({ className: t, color: e = "info", action: o, onDismiss: n, children: i, ...c }, a) => {
-    const l = N[e ?? "info"];
-    return /* @__PURE__ */ d("div", { ref: a, className: p(h({ color: e }), t), role: "alert", ...c, children: [
-      /* @__PURE__ */ r(l, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
+  ({ className: t, color: e = "info", action: s, onDismiss: o, children: i, ...c }, a) => {
+    const d = N[e ?? "info"];
+    return /* @__PURE__ */ l("div", { ref: a, className: p(h({ color: e }), t), role: "alert", ...c, children: [
+      /* @__PURE__ */ r(d, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
       /* @__PURE__ */ r("span", { className: "flex-1", children: i }),
-      o && /* @__PURE__ */ r("span", { className: "shrink-0", children: o }),
-      n && /* @__PURE__ */ r(
+      s && /* @__PURE__ */ r("span", { className: "shrink-0", children: s }),
+      o && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
-          onClick: n,
-          className: "shrink-0 min-h-6 min-w-6 flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
+          onClick: o,
+          className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
           "aria-label": "Dismiss",
           children: /* @__PURE__ */ r(u, { className: "h-ico-sm w-ico-sm" })
         }