@devalok/shilp-sutra 0.6.1 → 0.7.0

package/dist/tailwind/index.cjs

@@ -334,6 +334,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,CAwV3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/tailwind/preset.js

@@ -334,6 +334,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

@@ -226,6 +226,7 @@
   --z-sticky: 1100;
   --z-overlay: 1200;
   --z-modal: 1300;
+  --z-popover: 1400;
   --z-toast: 1500;
   --z-tooltip: 1600;
 
@@ -413,6 +414,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-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: 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,97 @@ 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: {
+      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-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: r(b, { className: "h-ico-sm w-ico-sm" }) })] }));
 v.displayName = "Badge";
 export {
   v as Badge,

package/dist/ui/button-group.js

@@ -6,35 +6,20 @@ const l = o.createContext({});
 function h() {
   return o.useContext(l);
 }
-const p = o.forwardRef(
-  ({ className: u, variant: t, color: n, size: e, orientation: i = "horizontal", children: d, ...c }, s) => {
-    const f = o.useMemo(() => ({ variant: t, color: n, size: e }), [t, n, e]);
-    return /* @__PURE__ */ r(l.Provider, { value: f, children: /* @__PURE__ */ r(
-      "div",
-      {
-        ref: s,
-        role: "group",
-        className: a(
-          "inline-flex",
-          i === "horizontal" ? [
-            "flex-row",
-            "[&>*:not(:first-child)]:rounded-l-none",
-            "[&>*:not(:last-child)]:rounded-r-none",
-            "[&>*:not(:first-child)]:-ml-px"
-          ] : [
-            "flex-col",
-            "[&>*:not(:first-child)]:rounded-t-none",
-            "[&>*:not(:last-child)]:rounded-b-none",
-            "[&>*:not(:first-child)]:-mt-px"
-          ],
-          u
-        ),
-        ...c,
-        children: d
-      }
-    ) });
-  }
-);
+const p = o.forwardRef(({ className: i, variant: t, color: n, size: e, orientation: u = "horizontal", children: d, ...c }, s) => {
+  const f = o.useMemo(() => ({ variant: t, color: n, size: e }), [t, n, e]);
+  return r(l.Provider, { value: f, children: r("div", { ref: s, role: "group", className: a("inline-flex", u === "horizontal" ? [
+    "flex-row",
+    "[&>*:not(:first-child)]:rounded-l-none",
+    "[&>*:not(:last-child)]:rounded-r-none",
+    "[&>*:not(:first-child)]:-ml-px"
+  ] : [
+    "flex-col",
+    "[&>*:not(:first-child)]:rounded-t-none",
+    "[&>*:not(:last-child)]:rounded-b-none",
+    "[&>*:not(:first-child)]:-mt-px"
+  ], i), ...c, children: d }) });
+});
 p.displayName = "ButtonGroup";
 export {
   p as ButtonGroup,