@devalok/shilp-sutra 0.25.0 → 0.26.0

package/dist/composed/multi-select-popover.js

@@ -0,0 +1,185 @@
+"use client";
+import { jsxs as l, jsx as n, Fragment as H } from "react/jsx-runtime";
+import * as r from "react";
+import { cn as L } from "../ui/lib/utils.js";
+import { Popover as J, PopoverTrigger as Q, PopoverContent as V } from "../ui/popover.js";
+import { IconSearch as W, IconCheck as X } from "@tabler/icons-react";
+import { springs as P } from "../ui/lib/motion.js";
+import { Spinner as Y } from "../ui/spinner.js";
+import { m as A } from "../_chunks/framer.js";
+const Z = r.forwardRef(
+  ({
+    items: g,
+    groups: o,
+    value: d,
+    onValueChange: w,
+    searchPlaceholder: T = "Search...",
+    onSearch: c,
+    searchDebounce: v = 300,
+    renderItem: N,
+    emptyMessage: j = "No results found",
+    maxSelections: k,
+    align: q = "start",
+    width: F,
+    children: O,
+    className: K,
+    ...$
+  }, z) => {
+    const [f, G] = r.useState(!1), [a, C] = r.useState(""), [u, m] = r.useState(null), [S, h] = r.useState(!1), [i, p] = r.useState(-1), y = r.useRef(), I = r.useRef(null);
+    r.useEffect(() => {
+      f || (C(""), m(null), p(-1));
+    }, [f]), r.useEffect(() => {
+      if (!(!c || !f)) {
+        if (!a.trim()) {
+          m(null), h(!1);
+          return;
+        }
+        return h(!0), clearTimeout(y.current), y.current = setTimeout(() => {
+          c(a).then((e) => m(e)).catch(() => m([])).finally(() => h(!1));
+        }, v), () => clearTimeout(y.current);
+      }
+    }, [a, c, v, f]);
+    const b = r.useMemo(() => u || (o ? o.flatMap((e) => e.items) : g ?? []), [g, o, u]), x = r.useMemo(() => {
+      if (c) return b;
+      const e = a.toLowerCase();
+      return e ? b.filter((s) => s.label.toLowerCase().includes(e)) : b;
+    }, [b, a, c]), R = r.useMemo(() => {
+      if (!o || c || u) return null;
+      const e = a.toLowerCase();
+      return o.map((s) => ({
+        ...s,
+        items: e ? s.items.filter((t) => t.label.toLowerCase().includes(e)) : s.items
+      })).filter((s) => s.items.length > 0);
+    }, [o, a, c, u]);
+    function M(e) {
+      if (d.includes(e))
+        w(d.filter((t) => t !== e));
+      else {
+        if (k && d.length >= k) return;
+        w([...d, e]);
+      }
+    }
+    r.useEffect(() => {
+      p(-1);
+    }, [a]), r.useEffect(() => {
+      var t;
+      if (i < 0) return;
+      const e = I.current;
+      if (!e) return;
+      (t = e.querySelectorAll("[data-multiselect-item]")[i]) == null || t.scrollIntoView({ block: "nearest" });
+    }, [i]);
+    function U(e) {
+      const s = x.length;
+      if (s !== 0) {
+        if (e.key === "ArrowDown")
+          e.preventDefault(), p((t) => t < s - 1 ? t + 1 : 0);
+        else if (e.key === "ArrowUp")
+          e.preventDefault(), p((t) => t <= 0 ? s - 1 : t - 1);
+        else if (e.key === "Enter" && i >= 0) {
+          e.preventDefault();
+          const t = x[i];
+          t && !t.disabled && M(t.id);
+        }
+      }
+    }
+    let B = 0;
+    function D(e) {
+      const s = d.includes(e.id), t = B++, E = t === i;
+      return /* @__PURE__ */ l(
+        A.button,
+        {
+          id: `msp-item-${t}`,
+          type: "button",
+          disabled: e.disabled,
+          "data-multiselect-item": "",
+          "data-focused": E ? "" : void 0,
+          initial: { opacity: 0, x: -8 },
+          animate: { opacity: 1, x: 0 },
+          transition: { ...P.snappy, delay: t * 0.02 },
+          onClick: () => M(e.id),
+          className: L(
+            "flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard",
+            "hover:bg-surface-raised-hover",
+            "disabled:opacity-action-disabled disabled:cursor-not-allowed",
+            s && "bg-accent-2 text-accent-11",
+            E && "bg-surface-raised-hover"
+          ),
+          children: [
+            N ? /* @__PURE__ */ n("span", { className: "flex-1 min-w-0", children: N(e, s) }) : /* @__PURE__ */ l(H, { children: [
+              e.image && /* @__PURE__ */ n(
+                "img",
+                {
+                  src: e.image,
+                  alt: "",
+                  className: "h-ico-md w-ico-md rounded-full object-cover shrink-0"
+                }
+              ),
+              /* @__PURE__ */ l("span", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ n("span", { className: "block truncate text-ds-md font-body text-surface-fg", children: e.label }),
+                e.description && /* @__PURE__ */ n("span", { className: "block truncate text-ds-xs text-surface-fg-subtle", children: e.description })
+              ] })
+            ] }),
+            s && /* @__PURE__ */ n(
+              A.span,
+              {
+                initial: { scale: 0 },
+                animate: { scale: 1 },
+                transition: P.bouncy,
+                className: "inline-flex shrink-0",
+                children: /* @__PURE__ */ n(X, { className: "h-ico-sm w-ico-sm text-accent-11" })
+              }
+            )
+          ]
+        },
+        e.id
+      );
+    }
+    return /* @__PURE__ */ l(J, { open: f, onOpenChange: G, children: [
+      /* @__PURE__ */ n(Q, { asChild: !0, children: O }),
+      /* @__PURE__ */ l(
+        V,
+        {
+          ref: z,
+          ...$,
+          className: L(
+            "border-surface-border-strong bg-surface-overlay p-0",
+            K
+          ),
+          style: { width: F ?? 240 },
+          align: q,
+          sideOffset: 4,
+          children: [
+            /* @__PURE__ */ l("div", { className: "flex items-center gap-ds-03 border-b border-surface-border-strong px-ds-04 py-ds-03", children: [
+              /* @__PURE__ */ n(W, { className: "h-ico-sm w-ico-sm shrink-0 text-surface-fg-subtle", stroke: 1.5 }),
+              /* @__PURE__ */ n(
+                "input",
+                {
+                  type: "text",
+                  placeholder: T,
+                  value: a,
+                  onChange: (e) => C(e.target.value),
+                  onKeyDown: U,
+                  "aria-label": "Search",
+                  "aria-activedescendant": i >= 0 ? `msp-item-${i}` : void 0,
+                  className: "w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-none"
+                }
+              ),
+              S && /* @__PURE__ */ n(Y, { size: "sm" })
+            ] }),
+            /* @__PURE__ */ l("div", { ref: I, className: "max-h-[240px] overflow-y-auto py-ds-02", children: [
+              R ? R.map((e) => /* @__PURE__ */ l("div", { children: [
+                /* @__PURE__ */ n("div", { className: "px-ds-04 py-ds-02 text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle", children: e.label }),
+                e.items.map(D)
+              ] }, e.label)) : x.map(D),
+              !S && x.length === 0 && /* @__PURE__ */ n("p", { className: "px-ds-04 py-ds-05 text-center text-ds-sm font-body text-surface-fg-subtle", children: j })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Z.displayName = "MultiSelectPopover";
+export {
+  Z as MultiSelectPopover
+};

package/dist/composed/responsive-overlay.d.ts

@@ -0,0 +1,15 @@
+"use client";
+import * as React from 'react';
+export interface ResponsiveOverlayProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    description?: string;
+    /** Below this breakpoint renders as bottom Sheet @default 'md' */
+    breakpoint?: 'sm' | 'md';
+    children: React.ReactNode;
+    className?: string;
+}
+declare function ResponsiveOverlay({ open, onOpenChange, title, description, breakpoint, children, className, }: ResponsiveOverlayProps): import("react/jsx-runtime").JSX.Element;
+export { ResponsiveOverlay };
+//# sourceMappingURL=responsive-overlay.d.ts.map

package/dist/composed/responsive-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-overlay.d.ts","sourceRoot":"","sources":["../../src/composed/responsive-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA8BD,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAiB,EACjB,QAAQ,EACR,SAAS,GACV,EAAE,sBAAsB,2CAgCxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/composed/responsive-overlay.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import * as h from "react";
+import { Dialog as c, DialogContent as d, DialogHeader as m, DialogTitle as f, DialogDescription as u } from "../ui/dialog.js";
+import { Sheet as D, SheetContent as b, SheetHeader as g, SheetTitle as v, SheetDescription as x } from "../ui/sheet.js";
+const M = {
+  sm: "640px",
+  md: "768px"
+};
+function S(t) {
+  const [i, r] = h.useState(!1);
+  return h.useEffect(() => {
+    if (typeof window > "u") return;
+    const e = window.matchMedia(`(max-width: ${M[t]})`);
+    r(e.matches);
+    const o = (s) => r(s.matches);
+    return e.addEventListener("change", o), () => e.removeEventListener("change", o);
+  }, [t]), i;
+}
+function j({
+  open: t,
+  onOpenChange: i,
+  title: r,
+  description: e,
+  breakpoint: o = "md",
+  children: s,
+  className: a
+}) {
+  return S(o) ? /* @__PURE__ */ n(D, { open: t, onOpenChange: i, children: /* @__PURE__ */ l(b, { side: "bottom", className: a, children: [
+    (r || e) && /* @__PURE__ */ l(g, { children: [
+      r && /* @__PURE__ */ n(v, { children: r }),
+      e && /* @__PURE__ */ n(x, { children: e })
+    ] }),
+    s
+  ] }) }) : /* @__PURE__ */ n(c, { open: t, onOpenChange: i, children: /* @__PURE__ */ l(d, { className: a, children: [
+    (r || e) && /* @__PURE__ */ l(m, { children: [
+      r && /* @__PURE__ */ n(f, { children: r }),
+      e && /* @__PURE__ */ n(u, { children: e })
+    ] }),
+    s
+  ] }) });
+}
+export {
+  j as ResponsiveOverlay
+};

package/dist/ui/alert-dialog.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as s, jsxs as h } from "react/jsx-runtime";
 import * as o from "react";
-import { O as p, w as R, x as u, y as g, D as y, A as x, z as b, B as C, E as j } from "../_chunks/primitives.js";
+import { O as p, v as R, w as u, x as g, D as y, A as x, y as b, z as C, B as j } from "../_chunks/primitives.js";
 import { cn as i } from "./lib/utils.js";
 import { tweens as f, springs as M } from "./lib/motion.js";
 import { A as T, m } from "../_chunks/framer.js";
@@ -111,7 +111,7 @@ const B = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   }
 ));
 B.displayName = g.displayName;
-const E = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+const I = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   y,
   {
     ref: e,
@@ -119,8 +119,8 @@ const E = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
     ...a
   }
 ));
-E.displayName = y.displayName;
-const I = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+I.displayName = y.displayName;
+const S = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   x,
   {
     ref: e,
@@ -131,8 +131,8 @@ const I = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
     ...a
   }
 ));
-I.displayName = x.displayName;
-const S = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+S.displayName = x.displayName;
+const V = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   b,
   {
     ref: e,
@@ -143,13 +143,13 @@ const S = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
     ...a
   }
 ));
-S.displayName = b.displayName;
+V.displayName = b.displayName;
 export {
   P as AlertDialog,
-  I as AlertDialogAction,
-  S as AlertDialogCancel,
+  S as AlertDialogAction,
+  V as AlertDialogCancel,
   H as AlertDialogContent,
-  E as AlertDialogDescription,
+  I as AlertDialogDescription,
   k as AlertDialogFooter,
   O as AlertDialogHeader,
   N as AlertDialogOverlay,

package/dist/ui/avatar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as a, jsxs as R } from "react/jsx-runtime";
 import * as l from "react";
-import { F as v, J as N, K as C } from "../_chunks/primitives.js";
+import { E as v, F as N, J as C } from "../_chunks/primitives.js";
 import { ay as F } from "../_chunks/vendor-utils.js";
 import { springs as k } from "./lib/motion.js";
 import { cn as n } from "./lib/utils.js";

package/dist/ui/button.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "outline" | "default" | "solid" | "destructive" | "ghost" | null | undefined;
     color?: "default" | "error" | null | undefined;
-    size?: "sm" | "md" | "icon" | "lg" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    size?: "xs" | "sm" | "md" | "icon" | "lg" | "icon-xs" | "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;AAIjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,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;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxE,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,QAAA,MAAM,MAAM,uFA8KX,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;AAIjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,eAAO,MAAM,cAAc;;;;8EAsD1B,CAAA;AA4BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxE,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,QAAA,MAAM,MAAM,uFA8KX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/ui/button.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as e, jsxs as C } from "react/jsx-runtime";
-import { ay as K } from "../_chunks/vendor-utils.js";
+import { ay as J } from "../_chunks/vendor-utils.js";
 import { IconCheck as L, IconX as O } from "@tabler/icons-react";
-import { S as P, M as Q } from "../_chunks/primitives.js";
+import { S as P, K as Q } from "../_chunks/primitives.js";
 import * as a from "react";
 import { useButtonGroup as U } from "./button-group.js";
 import { springs as Y } from "./lib/motion.js";
 import { cn as c } from "./lib/utils.js";
 import { Spinner as Z } from "./spinner.js";
 import { A as _, m as $ } from "../_chunks/framer.js";
-const R = K(
+const R = J(
   "inline-flex items-center justify-center gap-ds-03 whitespace-nowrap font-sans font-semibold select-none border border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled disabled:cursor-not-allowed",
   {
     variants: {
@@ -28,11 +28,13 @@ const R = K(
         error: ""
       },
       size: {
+        xs: "h-ds-xs-plus rounded-ds-sm px-ds-03 text-ds-sm",
         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-xs": "h-ds-xs-plus w-ds-xs-plus rounded-ds-sm",
         "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"
@@ -43,12 +45,12 @@ const R = K(
       { variant: "solid", color: "default", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised hover:shadow-brand" },
       // "default" alias → same as solid + default
       { variant: "default", color: "default", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised hover:shadow-brand" },
-      { variant: "default", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-raised" },
+      { variant: "default", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-10 active:bg-error-10 shadow-raised" },
       // "destructive" alias → solid + error
-      { variant: "destructive", color: "default", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-raised" },
-      { variant: "destructive", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-raised" },
+      { variant: "destructive", color: "default", className: "bg-error-9 text-accent-fg hover:bg-error-10 active:bg-error-10 shadow-raised" },
+      { variant: "destructive", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-10 active:bg-error-10 shadow-raised" },
       // solid + error
-      { variant: "solid", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-raised" },
+      { variant: "solid", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-10 active:bg-error-10 shadow-raised" },
       // outline + default (secondary)
       { variant: "outline", color: "default", className: "bg-transparent text-accent-11 border-accent-7 hover:bg-accent-2 active:bg-surface-raised-active" },
       // outline + error (error-ghost)
@@ -65,35 +67,39 @@ const R = K(
     }
   }
 ), W = {
+  xs: "h-3.5 w-3.5 [&>svg]:h-3.5 [&>svg]:w-3.5",
   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-xs": "h-3.5 w-3.5 [&>svg]:h-3.5 [&>svg]:w-3.5",
   "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"
 }, ee = {
+  xs: "sm",
   sm: "sm",
   md: "sm",
   lg: "md",
   icon: "sm",
+  "icon-xs": "sm",
   "icon-sm": "sm",
   "icon-md": "sm",
   "icon-lg": "md"
-}, re = a.forwardRef(
+}, se = a.forwardRef(
   ({
-    className: b,
+    className: h,
     variant: A,
     color: V,
     size: B,
-    asChild: M = !1,
-    startIcon: h,
+    asChild: E = !1,
+    startIcon: b,
     endIcon: p,
-    loading: E = !1,
+    loading: F = !1,
     loadingPosition: l = "start",
-    fullWidth: w = !1,
-    disabled: x,
-    onClick: F,
+    fullWidth: x = !1,
+    disabled: w,
+    onClick: M,
     onClickAsync: m,
     asyncFeedbackDuration: T = 1500,
     children: n,
@@ -113,25 +119,25 @@ const R = K(
           o.current && d("idle");
         }, T));
       }));
-    }, j = !!m, r = j ? t === "loading" : E, s = t === "success" || t === "error", g = r ? /* @__PURE__ */ e(Z, { size: G }) : null;
-    if (M) {
+    }, j = !!m, s = j ? t === "loading" : F, r = t === "success" || t === "error", g = s ? /* @__PURE__ */ e(Z, { size: G }) : null;
+    if (E) {
       const v = {
         className: c(
           R({ variant: S, color: z, size: i }),
-          w && "w-full",
-          b
+          x && "w-full",
+          h
         ),
         ref: N,
-        disabled: x || r,
-        "aria-busy": r || void 0,
+        disabled: w || s,
+        "aria-busy": s || void 0,
         ...y
       };
       return /* @__PURE__ */ e(P, { ...v, children: /* @__PURE__ */ e(Q, { children: n }) });
     }
-    const X = () => r && l === "start" ? g : h ? /* @__PURE__ */ e("span", { className: c("inline-flex shrink-0 items-center justify-center", f), children: h }) : null, q = () => r && l === "end" ? g : p ? /* @__PURE__ */ e("span", { className: c("inline-flex shrink-0 items-center justify-center", f), children: p }) : null, D = () => r && l === "center" ? /* @__PURE__ */ C("span", { className: "relative inline-flex items-center justify-center", children: [
+    const K = () => s && l === "start" ? g : b ? /* @__PURE__ */ e("span", { className: c("inline-flex shrink-0 items-center justify-center", f), children: b }) : null, X = () => s && l === "end" ? g : p ? /* @__PURE__ */ e("span", { className: c("inline-flex shrink-0 items-center justify-center", f), children: p }) : null, q = () => s && l === "center" ? /* @__PURE__ */ C("span", { className: "relative inline-flex items-center justify-center", children: [
       /* @__PURE__ */ e("span", { className: "invisible", children: n }),
       /* @__PURE__ */ e("span", { className: "absolute inset-0 flex items-center justify-center", children: g })
-    ] }) : n, H = s ? t === "success" ? "bg-success-9 text-accent-fg border-transparent hover:bg-success-9" : "bg-error-9 text-accent-fg border-transparent hover:bg-error-9" : void 0, J = s ? /* @__PURE__ */ e(_, { mode: "wait", children: /* @__PURE__ */ e(
+    ] }) : n, D = r ? t === "success" ? "bg-success-9 text-accent-fg border-transparent hover:bg-success-9" : "bg-error-9 text-accent-fg border-transparent hover:bg-error-9" : void 0, H = r ? /* @__PURE__ */ e(_, { mode: "wait", children: /* @__PURE__ */ e(
       $.span,
       {
         initial: { opacity: 0, scale: 0.5 },
@@ -149,27 +155,27 @@ const R = K(
         ...y,
         className: c(
           R({ variant: S, color: z, size: i }),
-          w && "w-full",
-          !r && !s && "active:scale-[0.95] transition-[color,background-color,border-color,box-shadow,transform] duration-fast-01 ease-productive-standard",
-          H,
-          s && "transition-colors duration-moderate-01 ease-productive-standard",
-          b
+          x && "w-full",
+          !s && !r && "active:scale-[0.95] transition-[color,background-color,border-color,box-shadow,transform] duration-fast-01 ease-productive-standard",
+          D,
+          r && "transition-colors duration-moderate-01 ease-productive-standard",
+          h
         ),
         ref: N,
-        disabled: x || r || s,
-        "aria-busy": r || void 0,
-        onClick: j ? I : F,
+        disabled: w || s || r,
+        "aria-busy": s || void 0,
+        onClick: j ? I : M,
         children: [
-          s ? J : X(),
-          s ? n : D(),
-          s ? null : q()
+          r ? H : K(),
+          r ? n : q(),
+          r ? null : X()
         ]
       }
     );
   }
 );
-re.displayName = "Button";
+se.displayName = "Button";
 export {
-  re as Button,
+  se as Button,
   R as buttonVariants
 };

package/dist/ui/card.d.ts

@@ -4,56 +4,14 @@ import * as React from 'react';
 declare const cardVariants: (props?: ({
     variant?: "flat" | "outline" | "default" | "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
- * an optional interactive hover state.
- *
- * **Variants:** `default` (subtle border + shadow-raised) | `elevated` (stronger shadow-raised-hover) |
- * `outline` (2px solid border, no shadow) | `flat` (filled background, no shadow)
- *
- * **Composition:** Use sub-components `<CardHeader>`, `<CardTitle>`, `<CardDescription>`,
- * `<CardContent>`, and `<CardFooter>` for consistent internal spacing.
- *
- * **Interactive:** Pass `interactive` to enable hover shadow lift and pointer cursor —
- * useful for clickable cards in grids.
- *
- * @example
- * // Standard content card with header and body:
- * <Card>
- *   <CardHeader>
- *     <CardTitle>Project Alpha</CardTitle>
- *     <CardDescription>Last updated 2 hours ago</CardDescription>
- *   </CardHeader>
- *   <CardContent>
- *     <p>Sprint 4 is in progress with 12 open tasks.</p>
- *   </CardContent>
- * </Card>
- *
- * @example
- * // Elevated card for a dashboard stat widget:
- * <Card variant="elevated">
- *   <CardContent>
- *     <StatCard label="Revenue" value="$12,400" delta={{ value: "+8%", direction: "up" }} />
- *   </CardContent>
- * </Card>
- *
- * @example
- * // Clickable card in a project grid (interactive hover effect):
- * <Card interactive onClick={() => router.push(`/projects/${id}`)}>
- *   <CardHeader>
- *     <CardTitle>{project.name}</CardTitle>
- *   </CardHeader>
- * </Card>
- *
- * @example
- * // Flat card for a sidebar panel section (no shadow):
- * <Card variant="flat" className="p-ds-05">
- *   <p className="text-surface-fg-muted text-ds-sm">No recent activity</p>
- * </Card>
- * // These are just a few ways — feel free to combine props creatively!
- */
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
     interactive?: boolean;
+    /** Position of the accent border strip */
+    accent?: 'left' | 'top' | 'right' | 'bottom';
+    /** Semantic color key or any CSS color string for the accent strip. Requires `accent` to be set. @default 'default' */
+    accentColor?: 'default' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | (string & {});
+    /** Width of the accent strip in pixels @default 3 */
+    accentWidth?: 2 | 3 | 4 | 6;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/ui/card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,YAAY;;8EAajB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,QAAA,MAAM,IAAI,kFAuBT,CAAA;AAGD,QAAA,MAAM,UAAU,6GASd,CAAA;AAGF,QAAA,MAAM,SAAS,6GASb,CAAA;AAGF,QAAA,MAAM,eAAe,6GASnB,CAAA;AAGF,QAAA,MAAM,WAAW,6GAKf,CAAA;AAGF,QAAA,MAAM,UAAU,6GASd,CAAA;AAGF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/ui/card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,YAAY;;8EAajB,CAAA;AA2DD,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC5C,uHAAuH;IACvH,WAAW,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IAChG,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CAC5B;AAwBD,QAAA,MAAM,IAAI,kFA2CT,CAAA;AAGD,QAAA,MAAM,UAAU,6GASd,CAAA;AAGF,QAAA,MAAM,SAAS,6GASb,CAAA;AAGF,QAAA,MAAM,eAAe,6GASnB,CAAA;AAGF,QAAA,MAAM,WAAW,6GAKf,CAAA;AAGF,QAAA,MAAM,UAAU,6GASd,CAAA;AAGF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA"}