@devalok/shilp-sutra 0.5.0 → 0.6.1

package/dist/shell/sidebar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import * as g from "react";
+import * as N from "react";
 import { useLink as m } from "./link-context.js";
 import { Sidebar as u, SidebarHeader as S, SidebarSeparator as o, SidebarContent as y, SidebarGroup as w, SidebarGroupLabel as A, SidebarGroupContent as L, SidebarMenu as C, SidebarFooter as M, SidebarMenuItem as j, SidebarMenuButton as k } from "../ui/sidebar.js";
 import { Avatar as G, AvatarImage as F, AvatarFallback as I } from "../ui/avatar.js";
@@ -24,7 +24,7 @@ function R({ item: t, isActive: a }) {
           "aria-label": t.title,
           "aria-current": a ? "page" : void 0,
           children: [
-            /* @__PURE__ */ e(t.icon, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
+            /* @__PURE__ */ e("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0", "aria-hidden": "true", children: t.icon }),
             /* @__PURE__ */ e("span", { className: "text-ds-base", children: t.title })
           ]
         }
@@ -32,7 +32,7 @@ function R({ item: t, isActive: a }) {
     }
   ) });
 }
-const z = g.forwardRef(
+const z = N.forwardRef(
   ({
     currentPath: t = "/",
     user: a,
@@ -43,7 +43,7 @@ const z = g.forwardRef(
     ...f
   }, b) => {
     var c;
-    const N = m(), v = (r, s = !1) => s || r === "/" ? t === r : t.startsWith(r);
+    const v = m(), g = (r, s = !1) => s || r === "/" ? t === r : t.startsWith(r);
     return /* @__PURE__ */ l(
       u,
       {
@@ -75,7 +75,7 @@ const z = g.forwardRef(
                 R,
                 {
                   item: d,
-                  isActive: v(d.href, d.exact)
+                  isActive: g(d.href, d.exact)
                 },
                 d.href
               )) }) })
@@ -84,7 +84,7 @@ const z = g.forwardRef(
           n.length > 0 && /* @__PURE__ */ e(M, { className: "px-ds-06 py-ds-05", children: /* @__PURE__ */ e("div", { className: "flex items-center justify-start gap-ds-03", children: n.map((r, s) => /* @__PURE__ */ l("div", { className: "flex items-center gap-ds-03", children: [
             s > 0 && /* @__PURE__ */ e("div", { className: "h-[16px] w-px bg-border" }),
             /* @__PURE__ */ e(
-              N,
+              v,
               {
                 className: "text-ds-md text-text-placeholder transition-colors hover:text-interactive",
                 href: r.href,

package/dist/ui/alert.d.ts

@@ -2,12 +2,15 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const alertVariants: (props?: ({
+    variant?: "outline" | "filled" | "subtle" | null | undefined;
     color?: "error" | "warning" | "success" | "neutral" | "info" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Props for Alert — an inline message block with a colored icon, optional title, optional body,
  * and an optional dismiss button. Renders with `role="alert"` for screen reader announcements.
  *
+ * **Variants:** `subtle` (default, tinted surface) | `filled` (solid colored bg) | `outline` (transparent bg, colored border)
+ *
  * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`
  * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa;;8EAmBlB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,mFAwBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa;;;8EAuClB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,mFAwBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/alert.js

@@ -1,53 +1,78 @@
 "use client";
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { IconInfoCircle as i, IconAlertCircle as m, IconAlertTriangle as f, IconCircleCheck as b, IconX as u } from "@tabler/icons-react";
-import * as x from "react";
-import { cva as g } from "class-variance-authority";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { IconInfoCircle as s, IconAlertCircle as x, IconAlertTriangle as m, IconCircleCheck as u, IconX as f } from "@tabler/icons-react";
+import * as g from "react";
+import { cva as v } from "class-variance-authority";
 import { cn as p } from "./lib/utils.js";
-const h = g(
+const N = v(
   "relative flex gap-ds-04 rounded-ds-lg border p-ds-05",
   {
     variants: {
+      variant: {
+        subtle: "",
+        filled: "",
+        outline: ""
+      },
       color: {
-        info: "bg-info-surface border-info-border text-info-text",
-        success: "bg-success-surface border-success-border text-success-text",
-        warning: "bg-warning-surface border-warning-border text-warning-text",
-        error: "bg-error-surface border-error-border text-error-text",
-        neutral: "bg-layer-02 border-border text-text-primary [&>svg]:text-text-secondary"
+        info: "",
+        success: "",
+        warning: "",
+        error: "",
+        neutral: ""
       }
     },
-    defaultVariants: { color: "info" }
+    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" }
   }
-), v = {
-  info: i,
-  success: b,
-  warning: f,
-  error: m,
-  neutral: i
-}, w = x.forwardRef(
-  ({ className: n, color: e = "info", title: o, onDismiss: s, children: c, ...a }, d) => {
-    const l = v[e ?? "info"];
-    return /* @__PURE__ */ t("div", { ref: d, className: p(h({ color: e }), n), role: "alert", ...a, children: [
-      /* @__PURE__ */ r(l, { className: "mt-ds-01 h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
-      /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
-        o && /* @__PURE__ */ r("p", { className: "text-ds-md font-semibold mb-ds-01", children: o }),
-        /* @__PURE__ */ r("div", { className: "text-ds-md opacity-[0.9]", children: c })
+), 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 })
       ] }),
-      s && /* @__PURE__ */ r(
+      o && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
-          onClick: s,
+          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(u, { className: "h-ico-sm w-ico-sm" })
+          children: /* @__PURE__ */ r(f, { className: "h-ico-sm w-ico-sm" })
         }
       )
     ] });
   }
 );
-w.displayName = "Alert";
+y.displayName = "Alert";
 export {
-  w as Alert,
-  h as alertVariants
+  y as Alert,
+  N as alertVariants
 };

package/dist/ui/badge.d.ts

@@ -2,7 +2,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "solid" | "outline" | "subtle" | null | undefined;
+    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;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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;;;;8EAoFlB,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;;;;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"}

package/dist/ui/badge.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsxs as b, jsx as r } from "react/jsx-runtime";
-import { IconX as d } from "@tabler/icons-react";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+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";
@@ -10,8 +10,12 @@ const u = x(
     variants: {
       variant: {
         subtle: "",
+        secondary: "",
+        // alias → subtle
         solid: "",
-        outline: ""
+        outline: "",
+        destructive: ""
+        // alias → solid + error
       },
       color: {
         default: "",
@@ -38,6 +42,11 @@ const u = x(
     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" },
@@ -88,8 +97,8 @@ const u = x(
       size: "md"
     }
   }
-), y = g.forwardRef(
-  ({ className: t, variant: a, color: o, size: s, dot: n, onDismiss: e, children: c, ...l }, i) => /* @__PURE__ */ b("span", { ref: i, className: m(u({ variant: a, color: o, size: s }), t), ...l, children: [
+), 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",
       {
@@ -105,13 +114,13 @@ const u = x(
         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(d, { className: "h-ico-sm w-ico-sm" })
+        children: /* @__PURE__ */ r(b, { className: "h-ico-sm w-ico-sm" })
       }
     )
   ] })
 );
-y.displayName = "Badge";
+v.displayName = "Badge";
 export {
-  y as Badge,
+  v as Badge,
   u as badgeVariants
 };

package/dist/ui/button.d.ts

@@ -2,9 +2,9 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "solid" | "outline" | "ghost" | null | undefined;
+    variant?: "link" | "solid" | "default" | "outline" | "ghost" | "destructive" | null | undefined;
     color?: "default" | "error" | null | undefined;
-    size?: "sm" | "md" | "lg" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Props for Button — the primary action component with a two-axis variant system,

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,eAAO,MAAM,cAAc;;;;8EA2C1B,CAAA;AAsBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,MAAM,uFAgHX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,eAAO,MAAM,cAAc;;;;8EAoD1B,CAAA;AAwBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,MAAM,uFAgHX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/ui/button.js

@@ -4,7 +4,7 @@ import { cva as B } from "class-variance-authority";
 import { Root as R, Slottable as E } from "../primitives/react-slot.js";
 import * as G from "react";
 import { useButtonGroup as M } from "./button-group.js";
-import { cn as o } from "./lib/utils.js";
+import { cn as t } from "./lib/utils.js";
 import { Spinner as q } from "./spinner.js";
 const x = B(
   "inline-flex items-center justify-center gap-ds-03 whitespace-nowrap font-sans font-semibold select-none border border-transparent transition-[color,background-color,border-color,box-shadow] duration-fast-01 ease-productive-standard focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-[0.38]",
@@ -12,8 +12,12 @@ const x = B(
     variants: {
       variant: {
         solid: "",
+        default: "",
+        // alias → solid
         outline: "",
         ghost: "",
+        destructive: "",
+        // alias → solid + error
         link: "text-text-link underline-offset-4 hover:underline active:opacity-[0.8]"
       },
       color: {
@@ -24,6 +28,8 @@ const x = B(
         sm: "h-ds-sm rounded-ds-md px-ds-04 text-ds-sm",
         md: "h-ds-md rounded-ds-md px-ds-05 text-ds-md",
         lg: "h-ds-lg rounded-ds-lg px-ds-06 text-ds-base",
+        icon: "h-ds-md w-ds-md rounded-ds-md",
+        // alias → icon-md
         "icon-sm": "h-ds-sm w-ds-sm rounded-ds-md",
         "icon-md": "h-ds-md w-ds-md rounded-ds-md",
         "icon-lg": "h-ds-lg w-ds-lg rounded-ds-lg"
@@ -32,6 +38,12 @@ const x = B(
     compoundVariants: [
       // solid + default (primary)
       { variant: "solid", color: "default", className: "bg-interactive text-text-on-color hover:bg-interactive-hover active:bg-interactive-active shadow-01 hover:shadow-brand" },
+      // "default" alias → same as solid + default
+      { variant: "default", color: "default", className: "bg-interactive text-text-on-color hover:bg-interactive-hover active:bg-interactive-active shadow-01 hover:shadow-brand" },
+      { variant: "default", color: "error", className: "bg-error text-text-on-color hover:bg-error-hover active:bg-error-hover shadow-01" },
+      // "destructive" alias → solid + error
+      { variant: "destructive", color: "default", className: "bg-error text-text-on-color hover:bg-error-hover active:bg-error-hover shadow-01" },
+      { variant: "destructive", color: "error", className: "bg-error text-text-on-color hover:bg-error-hover active:bg-error-hover shadow-01" },
       // solid + error
       { variant: "solid", color: "error", className: "bg-error text-text-on-color hover:bg-error-hover active:bg-error-hover shadow-01" },
       // outline + default (secondary)
@@ -53,6 +65,7 @@ const x = B(
   sm: "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
   md: "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
   lg: "h-ico-md w-ico-md [&>svg]:h-ico-md [&>svg]:w-ico-md",
+  icon: "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
   "icon-sm": "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
   "icon-md": "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
   "icon-lg": "h-ico-md w-ico-md [&>svg]:h-ico-md [&>svg]:w-ico-md"
@@ -60,6 +73,7 @@ const x = B(
   sm: "sm",
   md: "sm",
   lg: "md",
+  icon: "sm",
   "icon-sm": "sm",
   "icon-md": "sm",
   "icon-lg": "md"
@@ -67,46 +81,46 @@ const x = B(
   ({
     className: c,
     variant: w,
-    color: y,
-    size: N,
+    color: N,
+    size: y,
     asChild: z = !1,
     startIcon: d,
     endIcon: l,
     loading: e = !1,
-    loadingPosition: t = "start",
+    loadingPosition: s = "start",
     fullWidth: m = !1,
     disabled: v,
     children: i,
     ...u
-  }, f) => {
-    const n = M(), b = w ?? n.variant, h = y ?? n.color, s = N ?? n.size ?? "md", g = A[s], S = D[s], a = e ? /* @__PURE__ */ r(q, { size: S }) : null;
+  }, h) => {
+    const a = M(), b = w ?? a.variant, f = N ?? a.color, o = y ?? a.size ?? "md", g = A[o], S = D[o], n = e ? /* @__PURE__ */ r(q, { size: S }) : null;
     if (z) {
       const V = {
-        className: o(
-          x({ variant: b, color: h, size: s }),
+        className: t(
+          x({ variant: b, color: f, size: o }),
           m && "w-full",
           c
         ),
-        ref: f,
+        ref: h,
         disabled: v || e,
         "aria-busy": e || void 0,
         ...u
       };
       return /* @__PURE__ */ r(R, { ...V, children: /* @__PURE__ */ r(E, { children: i }) });
     }
-    const j = () => e && t === "start" ? a : d ? /* @__PURE__ */ r("span", { className: o("inline-flex shrink-0 items-center justify-center", g), children: d }) : null, k = () => e && t === "end" ? a : l ? /* @__PURE__ */ r("span", { className: o("inline-flex shrink-0 items-center justify-center", g), children: l }) : null, C = () => e && t === "center" ? /* @__PURE__ */ p("span", { className: "relative inline-flex items-center justify-center", children: [
+    const j = () => e && s === "start" ? n : d ? /* @__PURE__ */ r("span", { className: t("inline-flex shrink-0 items-center justify-center", g), children: d }) : null, k = () => e && s === "end" ? n : l ? /* @__PURE__ */ r("span", { className: t("inline-flex shrink-0 items-center justify-center", g), children: l }) : null, C = () => e && s === "center" ? /* @__PURE__ */ p("span", { className: "relative inline-flex items-center justify-center", children: [
       /* @__PURE__ */ r("span", { className: "invisible", children: i }),
-      /* @__PURE__ */ r("span", { className: "absolute inset-0 flex items-center justify-center", children: a })
+      /* @__PURE__ */ r("span", { className: "absolute inset-0 flex items-center justify-center", children: n })
     ] }) : i;
     return /* @__PURE__ */ p(
       "button",
       {
-        className: o(
-          x({ variant: b, color: h, size: s }),
+        className: t(
+          x({ variant: b, color: f, size: o }),
           m && "w-full",
           c
         ),
-        ref: f,
+        ref: h,
         disabled: v || e,
         "aria-busy": e || void 0,
         ...u,

package/dist/ui/card.d.ts

@@ -2,7 +2,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const cardVariants: (props?: ({
-    variant?: "flat" | "outline" | "default" | "elevated" | null | undefined;
+    variant?: "flat" | "default" | "outline" | "elevated" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Props for Card — a general-purpose content container with 4 elevation/style variants and

package/dist/ui/sidebar.d.ts

@@ -46,7 +46,7 @@ declare const SidebarMenuButton: import('react').ForwardRefExoticComponent<Omit<
     isActive?: boolean;
     tooltip?: string | ComponentProps<typeof TooltipContent>;
 } & VariantProps<(props?: ({
-    variant?: "outline" | "default" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 declare const SidebarMenuAction: import('react').ForwardRefExoticComponent<Omit<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {

package/dist/ui/stat-card.d.ts

@@ -41,7 +41,10 @@ import * as React from 'react';
  * // These are just a few ways — feel free to combine props creatively!
  */
 export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    label: string;
+    /** Heading text for the metric. `title` is an alias for `label`. */
+    label?: string;
+    /** Alias for `label` — use whichever feels natural. */
+    title?: string;
     value: string | number;
     delta?: {
         value: string;

package/dist/ui/stat-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/ui/stat-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;KACrC,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,QAAQ,sFAgEb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/ui/stat-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;KACrC,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,QAAQ,sFAiEb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/ui/stat-card.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import { IconTrendingUp as p, IconTrendingDown as x, IconMinus as h } from "@tabler/icons-react";
+import { IconTrendingUp as h, IconTrendingDown as f, IconMinus as g } from "@tabler/icons-react";
 import * as m from "react";
 import { cn as d } from "./lib/utils.js";
-const f = m.forwardRef(
-  ({ className: o, label: c, value: a, delta: e, icon: r, loading: u, ...t }, i) => {
-    if (u)
+const w = m.forwardRef(
+  ({ className: o, label: c, title: a, value: u, delta: e, icon: r, loading: b, ...t }, i) => {
+    const l = a ?? c ?? "";
+    if (b)
       return /* @__PURE__ */ n(
         "div",
         {
@@ -22,7 +23,7 @@ const f = m.forwardRef(
           ]
         }
       );
-    const b = (e == null ? void 0 : e.direction) === "up" ? p : (e == null ? void 0 : e.direction) === "down" ? x : h, l = (e == null ? void 0 : e.direction) === "up" ? "text-success" : (e == null ? void 0 : e.direction) === "down" ? "text-error" : "text-text-secondary";
+    const p = (e == null ? void 0 : e.direction) === "up" ? h : (e == null ? void 0 : e.direction) === "down" ? f : g, x = (e == null ? void 0 : e.direction) === "up" ? "text-success" : (e == null ? void 0 : e.direction) === "down" ? "text-error" : "text-text-secondary";
     return /* @__PURE__ */ n(
       "div",
       {
@@ -34,12 +35,12 @@ const f = m.forwardRef(
         ...t,
         children: [
           /* @__PURE__ */ n("div", { className: "flex items-center justify-between mb-ds-04", children: [
-            /* @__PURE__ */ s("p", { className: "text-ds-md font-medium text-text-secondary", children: c }),
+            /* @__PURE__ */ s("p", { className: "text-ds-md font-medium text-text-secondary", children: l }),
             r && /* @__PURE__ */ s("span", { className: "text-text-secondary", "aria-hidden": "true", children: typeof r == "function" ? m.createElement(r, { className: "h-ico-lg w-ico-lg" }) : r })
           ] }),
-          /* @__PURE__ */ s("p", { className: "text-ds-3xl font-semibold text-text-primary tabular-nums", children: a }),
-          e && /* @__PURE__ */ n("div", { className: d("mt-ds-03 flex items-center gap-ds-02 text-ds-sm font-medium", l), children: [
-            /* @__PURE__ */ s(b, { className: "h-ico-sm w-ico-sm", "aria-hidden": "true" }),
+          /* @__PURE__ */ s("p", { className: "text-ds-3xl font-semibold text-text-primary tabular-nums", children: u }),
+          e && /* @__PURE__ */ n("div", { className: d("mt-ds-03 flex items-center gap-ds-02 text-ds-sm font-medium", x), children: [
+            /* @__PURE__ */ s(p, { className: "h-ico-sm w-ico-sm", "aria-hidden": "true" }),
             /* @__PURE__ */ s("span", { children: e.value })
           ] })
         ]
@@ -47,7 +48,7 @@ const f = m.forwardRef(
     );
   }
 );
-f.displayName = "StatCard";
+w.displayName = "StatCard";
 export {
-  f as StatCard
+  w as StatCard
 };

package/dist/ui/toggle-group.d.ts

@@ -4,11 +4,11 @@ import { toggleVariants } from './toggle';
 import * as React from 'react';
 import * as ToggleGroupPrimitive from '../primitives/react-toggle-group';
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
-    variant?: "outline" | "default" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
 declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "outline" | "default" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 export type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>;

package/dist/ui/toggle.d.ts

@@ -3,11 +3,11 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import * as TogglePrimitive from '../primitives/react-toggle';
 declare const toggleVariants: (props?: ({
-    variant?: "outline" | "default" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "outline" | "default" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 export type ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>;