@devalok/shilp-sutra 0.27.2 → 0.29.0

package/dist/ui/button.js

@@ -1,39 +1,53 @@
 "use client";
-import { jsx as e, jsxs as C } from "react/jsx-runtime";
-import { c as J } from "../_chunks/vendor-utils.js";
-import { IconCheck as L, IconX as O } from "@tabler/icons-react";
-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 { jsx as e, jsxs as j, Fragment as ue } from "react/jsx-runtime";
+import { a as ge } from "../_chunks/vendor-utils.js";
+import { IconCheck as ve, IconX as fe } from "@tabler/icons-react";
+import { S as be, i as he } from "../_chunks/primitives.js";
+import * as t from "react";
+import { useButtonGroup as pe } from "./button-group.js";
+import { Icon as xe } from "./icon.js";
+import { IconProvider as we } from "./icon-context.js";
+import { motionProps as Ne } from "./lib/motion.js";
+import { ProcessingOverlay as ye } from "./button-processing.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 = 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",
+import { Spinner as T } from "./spinner.js";
+import { u as ke, m as Se } from "../_chunks/framer.js";
+const X = ge(
+  "relative inline-flex items-center justify-center whitespace-nowrap font-sans select-none overflow-hidden isolate 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 disabled:saturate-[0.3] [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]",
   {
     variants: {
       variant: {
         solid: "",
-        default: "",
-        // alias → solid
-        outline: "",
+        soft: "",
+        outline: "border",
         ghost: "",
-        destructive: "",
-        // alias → solid + error
-        link: "text-info-11 underline-offset-4 hover:underline active:opacity-80"
+        link: "underline-offset-4 hover:underline active:opacity-80",
+        // Deprecated aliases
+        default: "",
+        destructive: ""
       },
       color: {
-        default: "",
-        error: ""
+        accent: "",
+        error: "",
+        success: "",
+        warning: "",
+        neutral: "",
+        // Deprecated alias
+        default: ""
+      },
+      weight: {
+        semibold: "font-semibold",
+        normal: "font-normal"
       },
       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",
+        xs: "h-ds-xs-plus rounded-ds-md px-ds-03 text-ds-sm gap-1",
+        sm: "h-ds-sm rounded-ds-md px-ds-04 text-ds-sm gap-1.5",
+        md: "h-ds-md rounded-ds-lg px-ds-05 text-ds-md gap-2",
+        lg: "h-ds-lg rounded-ds-xl px-ds-06 text-ds-base gap-2.5",
+        "compact-xs": "rounded-ds-md px-ds-02 py-[3px] text-ds-sm gap-1",
+        "compact-sm": "rounded-ds-md px-ds-03 py-[5px] text-ds-sm gap-1.5",
+        "compact-md": "rounded-ds-lg px-ds-04 py-ds-03 text-ds-md gap-2",
         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",
@@ -41,141 +55,243 @@ const R = J(
       }
     },
     compoundVariants: [
-      // solid + default (primary)
-      { 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-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-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-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)
-      { variant: "outline", color: "error", className: "bg-transparent text-error-11 border border-error-7 hover:bg-error-3 active:bg-error-3" },
-      // ghost + default
-      { variant: "ghost", color: "default", className: "bg-transparent text-surface-fg-muted hover:bg-surface-raised hover:text-surface-fg active:bg-surface-raised-active" },
-      // ghost + error
-      { variant: "ghost", color: "error", className: "bg-transparent text-error-11 hover:bg-error-3 hover:text-error-11 active:bg-error-3" }
+      // ============ SOLID ============ (colored hover shadows — shadow tints with the button's own hue)
+      { variant: "solid", color: "accent", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 shadow-raised hover:shadow-brand" },
+      { variant: "solid", color: "error", className: "bg-error-9 text-error-fg hover:bg-error-10 shadow-raised hover:shadow-error" },
+      { variant: "solid", color: "success", className: "bg-success-9 text-success-fg hover:bg-success-10 shadow-raised hover:shadow-success" },
+      { variant: "solid", color: "warning", className: "bg-warning-9 text-warning-fg hover:bg-warning-10 shadow-raised hover:shadow-warning" },
+      { variant: "solid", color: "neutral", className: "bg-neutral-5 text-surface-fg hover:bg-neutral-7 shadow-raised" },
+      // ============ SOFT ============
+      { variant: "soft", color: "accent", className: "bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5" },
+      { variant: "soft", color: "error", className: "bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5" },
+      { variant: "soft", color: "success", className: "bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5" },
+      { variant: "soft", color: "warning", className: "bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5" },
+      { variant: "soft", color: "neutral", className: "bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5" },
+      // ============ OUTLINE ============
+      { variant: "outline", color: "accent", className: "bg-transparent text-accent-11 border-accent-7 hover:bg-accent-3 active:bg-accent-4" },
+      { variant: "outline", color: "error", className: "bg-transparent text-error-11 border-error-7 hover:bg-error-3 active:bg-error-4" },
+      { variant: "outline", color: "success", className: "bg-transparent text-success-11 border-success-7 hover:bg-success-3 active:bg-success-4" },
+      { variant: "outline", color: "warning", className: "bg-transparent text-warning-11 border-warning-7 hover:bg-warning-3 active:bg-warning-4" },
+      { variant: "outline", color: "neutral", className: "bg-transparent text-surface-fg border-surface-border-strong hover:bg-surface-raised-hover active:bg-surface-raised-active" },
+      // ============ GHOST ============
+      // ghost+accent uses neutral look for backward compat (most common ghost is toolbar/icon ghost)
+      { variant: "ghost", color: "accent", className: "bg-transparent text-surface-fg-muted hover:bg-surface-raised-hover hover:text-surface-fg active:bg-surface-raised-active" },
+      { variant: "ghost", color: "error", className: "bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4" },
+      { variant: "ghost", color: "success", className: "bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4" },
+      { variant: "ghost", color: "warning", className: "bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4" },
+      { variant: "ghost", color: "neutral", className: "bg-transparent text-surface-fg-muted hover:bg-surface-raised-hover hover:text-surface-fg active:bg-surface-raised-active" },
+      // ============ LINK ============
+      { variant: "link", color: "accent", className: "text-accent-11" },
+      { variant: "link", color: "error", className: "text-error-11" },
+      { variant: "link", color: "success", className: "text-success-11" },
+      { variant: "link", color: "warning", className: "text-warning-11" },
+      { variant: "link", color: "neutral", className: "text-surface-fg-muted" },
+      // ============ DEPRECATED ALIASES ============
+      // "default" variant → solid
+      { variant: "default", color: "accent", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 shadow-raised hover:shadow-brand" },
+      { variant: "default", color: "error", className: "bg-error-9 text-error-fg hover:bg-error-10 shadow-raised" },
+      { variant: "default", color: "default", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 shadow-raised hover:shadow-brand" },
+      // "destructive" → solid + error (ignores color prop)
+      { variant: "destructive", color: "accent", className: "bg-error-9 text-error-fg hover:bg-error-10 shadow-raised" },
+      { variant: "destructive", color: "error", className: "bg-error-9 text-error-fg hover:bg-error-10 shadow-raised" },
+      { variant: "destructive", color: "default", className: "bg-error-9 text-error-fg hover:bg-error-10 shadow-raised" },
+      // "default" color alias → accent
+      { variant: "solid", color: "default", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 shadow-raised hover:shadow-brand" },
+      { variant: "soft", color: "default", className: "bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5" },
+      { variant: "outline", color: "default", className: "bg-transparent text-accent-11 border-accent-7 hover:bg-accent-3 active:bg-accent-4" },
+      { variant: "ghost", color: "default", className: "bg-transparent text-surface-fg-muted hover:bg-surface-raised-hover hover:text-surface-fg active:bg-surface-raised-active" },
+      { variant: "link", color: "default", className: "text-accent-11" }
     ],
     defaultVariants: {
       variant: "solid",
-      color: "default",
+      color: "accent",
+      weight: "semibold",
       size: "md"
     }
   }
-), 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: "px-ds-04",
+  sm: "px-ds-05",
+  md: "px-ds-06",
+  lg: "px-ds-07",
+  "compact-xs": "px-ds-03",
+  "compact-sm": "px-ds-04",
+  "compact-md": "px-ds-05"
+}, Re = {
+  xs: { start: "-ml-0.5", end: "-mr-0.5" },
+  sm: { start: "-ml-1", end: "-mr-1" },
+  md: { start: "-ml-1.5", end: "-mr-1.5" },
+  lg: { start: "-ml-2", end: "-mr-2" },
+  "compact-xs": { start: "-ml-0.5", end: "-mr-0.5" },
+  "compact-sm": { start: "-ml-0.5", end: "-mr-0.5" },
+  "compact-md": { start: "-ml-1", end: "-mr-1" },
+  icon: { start: "", end: "" },
+  "icon-xs": { start: "", end: "" },
+  "icon-sm": { start: "", end: "" },
+  "icon-md": { start: "", end: "" },
+  "icon-lg": { start: "", end: "" }
+}, A = {
   xs: "sm",
   sm: "sm",
   md: "sm",
   lg: "md",
+  "compact-xs": "sm",
+  "compact-sm": "sm",
+  "compact-md": "sm",
   icon: "sm",
   "icon-xs": "sm",
   "icon-sm": "sm",
   "icon-md": "sm",
   "icon-lg": "md"
-}, se = a.forwardRef(
+}, ze = {
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  "compact-xs": "xs",
+  "compact-sm": "sm",
+  "compact-md": "md",
+  icon: "md",
+  "icon-xs": "xs",
+  "icon-sm": "sm",
+  "icon-md": "md",
+  "icon-lg": "lg"
+}, Ce = t.forwardRef(
   ({
-    className: h,
-    variant: A,
-    color: V,
-    size: B,
-    asChild: E = !1,
-    startIcon: b,
-    endIcon: p,
-    loading: F = !1,
-    loadingPosition: l = "start",
-    fullWidth: x = !1,
-    disabled: w,
-    onClick: M,
-    onClickAsync: m,
-    asyncFeedbackDuration: T = 1500,
-    children: n,
-    ...N
-  }, y) => {
-    const u = U(), S = A ?? u.variant, z = V ?? u.color, i = B ?? u.size ?? "md", f = W[i], G = ee[i], [t, d] = a.useState("idle"), k = a.useRef(), o = a.useRef(!0);
-    a.useEffect(() => () => {
-      o.current = !1, clearTimeout(k.current);
+    className: B,
+    variant: H,
+    color: J,
+    weight: K,
+    size: L,
+    asChild: Q = !1,
+    shape: Y,
+    startIcon: h,
+    endIcon: y,
+    loading: D = !1,
+    loadingPosition: k = "start",
+    fullWidth: l = !1,
+    disabled: I,
+    onClick: W,
+    onClickAsync: S,
+    asyncFeedbackDuration: ee = 1500,
+    processing: m,
+    processingColor: re,
+    processingDisabled: R = !0,
+    children: O,
+    ..._
+  }, u) => {
+    const g = pe(), o = H ?? g.variant, p = J ?? g.color, F = K ?? g.weight ?? "semibold", x = Y ?? g.shape ?? "default", n = L ?? g.size ?? "md", V = ke(), P = t.useRef(null), G = t.useRef(null), z = t.useRef(void 0);
+    t.useEffect(() => {
+      const r = G.current, N = P.current;
+      if (!(!r || !N || l || V))
+        return z.current = requestAnimationFrame(() => {
+          N.style.width = "auto";
+          const q = r.offsetWidth;
+          q > 0 && (N.getBoundingClientRect(), N.style.width = `${q}px`);
+        }), () => {
+          z.current && cancelAnimationFrame(z.current);
+        };
+    });
+    const [i, w] = t.useState("idle"), M = t.useRef(void 0), v = t.useRef(!0);
+    t.useEffect(() => () => {
+      v.current = !1, clearTimeout(M.current);
     }, []);
-    const I = (v) => {
-      !m || t !== "idle" || (d("loading"), m(v).then(() => {
-        o.current && d("success");
+    const se = (r) => {
+      !S || i !== "idle" || (w("loading"), S(r).then(() => {
+        v.current && w("success");
       }).catch(() => {
-        o.current && d("error");
+        v.current && w("error");
       }).finally(() => {
-        o.current && (k.current = setTimeout(() => {
-          o.current && d("idle");
-        }, T));
+        v.current && (M.current = setTimeout(() => {
+          v.current && w("idle");
+        }, ee));
       }));
-    }, j = !!m, s = j ? t === "loading" : F, r = t === "success" || t === "error", g = s ? /* @__PURE__ */ e(Z, { size: G }) : null;
-    if (E) {
-      const v = {
+    }, C = !!S, a = C ? i === "loading" : D, s = i === "success" || i === "error", U = s ? void 0 : m === !0 ? "working" : m === !1 || !m ? C && i === "loading" && !m ? "working" : void 0 : m, d = !!U, te = re ?? (p === "default" ? "accent" : p) ?? "accent";
+    if (Q) {
+      const r = {
         className: c(
-          R({ variant: S, color: z, size: i }),
-          x && "w-full",
-          h
+          X({ variant: o, color: p, weight: F, size: n }),
+          x === "pill" && "rounded-full",
+          x === "pill" && $[n],
+          l && "w-full",
+          B
         ),
-        ref: y,
-        disabled: w || s,
-        "aria-busy": s || void 0,
-        ...N
+        ref: u,
+        disabled: I || a,
+        "aria-busy": a || void 0,
+        ..._
       };
-      return /* @__PURE__ */ e(P, { ...v, children: /* @__PURE__ */ e(Q, { children: n }) });
+      return /* @__PURE__ */ e(be, { ...r, children: /* @__PURE__ */ e(he, { children: O }) });
     }
-    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, 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,
+    const f = Re[n] ?? { start: "", end: "" }, Z = o === "solid" || o === "soft" || o === "outline", ae = () => a && k === "start" ? /* @__PURE__ */ e("span", { className: c("inline-flex shrink-0 items-center justify-center", h && f.start), children: /* @__PURE__ */ e(T, { size: A[n], variant: "bare" }) }) : h ? /* @__PURE__ */ e("span", { className: c("inline-flex shrink-0 items-center justify-center pointer-events-none", f.start, Z && "opacity-90"), children: h }) : null, ne = () => a && k === "end" ? /* @__PURE__ */ e("span", { className: c("inline-flex shrink-0 items-center justify-center", y && f.end), children: /* @__PURE__ */ e(T, { size: A[n], variant: "bare" }) }) : y ? /* @__PURE__ */ e("span", { className: c("inline-flex shrink-0 items-center justify-center pointer-events-none", f.end, Z && "opacity-90"), children: y }) : null, oe = t.Children.toArray(O), E = [], b = [];
+    oe.forEach((r) => {
+      t.isValidElement(r) && r.type?.displayName === "DevalokGrain" ? E.push(r) : b.push(r);
+    });
+    const ce = () => a && k === "center" ? /* @__PURE__ */ j("span", { className: "relative inline-flex items-center justify-center", children: [
+      /* @__PURE__ */ e("span", { className: "invisible", children: b }),
+      /* @__PURE__ */ e("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(T, { size: A[n], variant: "bare" }) })
+    ] }) : E.length > 0 ? /* @__PURE__ */ e("span", { children: b }) : /* @__PURE__ */ e(ue, { children: b }), ie = s ? i === "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, de = s ? /* @__PURE__ */ e("span", { className: c("inline-flex shrink-0 items-center justify-center pointer-events-none", h && f.start), children: /* @__PURE__ */ e(xe, { icon: i === "success" ? ve : fe, animate: "draw" }) }) : null, le = ze[n] ?? "md", me = /* @__PURE__ */ j(
+      Se.button,
       {
-        initial: { opacity: 0, scale: 0.5 },
-        animate: { opacity: 1, scale: 1 },
-        exit: { opacity: 0, scale: 0.5 },
-        transition: Y.bouncy,
-        className: c("inline-flex shrink-0 items-center justify-center", f),
-        children: t === "success" ? /* @__PURE__ */ e(L, { className: "h-full w-full" }) : /* @__PURE__ */ e(O, { className: "h-full w-full" })
-      },
-      t
-    ) }) : null;
-    return /* @__PURE__ */ C(
-      "button",
-      {
-        ...N,
+        ...Ne(_),
         className: c(
-          R({ variant: S, color: z, size: i }),
-          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
+          X({
+            // When processing (and not showing async feedback), force soft variant so ants pop
+            variant: d && !s && o !== "ghost" && o !== "outline" && o !== "link" ? "soft" : o,
+            color: p,
+            weight: F,
+            size: n
+          }),
+          x === "pill" && "rounded-full",
+          x === "pill" && $[n],
+          l && "w-full",
+          // Asymmetric timing: hover-out is slow+relaxed, hover-in is fast+snappy (applied via hover: override)
+          !a && !s && "transition-[color,background-color,border-color,box-shadow,transform,filter] duration-moderate-01 ease-productive-exit",
+          !a && !s && "hover:duration-fast-02 hover:ease-productive-entrance",
+          !a && !s && "active:scale-[0.95] active:brightness-[0.92] active:saturate-[1.1] active:duration-[0ms]",
+          ie,
+          s && "transition-colors duration-moderate-01 ease-productive-standard",
+          d && R && "pointer-events-none cursor-default",
+          B
         ),
-        ref: y,
-        disabled: w || s || r,
-        "aria-busy": s || void 0,
-        onClick: j ? I : M,
+        ref: (r) => {
+          G.current = r, typeof u == "function" ? u(r) : u && (u.current = r);
+        },
+        disabled: I || a && !d,
+        "aria-busy": a || d || void 0,
+        "aria-disabled": d && R || void 0,
+        onClick: C ? se : d && R ? void 0 : W,
         children: [
-          r ? H : K(),
-          r ? n : q(),
-          r ? null : X()
+          E,
+          s ? de : ae(),
+          s ? b : ce(),
+          s ? null : ne()
         ]
       }
     );
+    return /* @__PURE__ */ e(we, { size: le, children: /* @__PURE__ */ j(
+      "span",
+      {
+        ref: P,
+        className: c("relative inline-flex", l && "w-full"),
+        style: l || V ? void 0 : { transition: "width 0.2s cubic-bezier(0.25, 0.1, 0.25, 1)" },
+        children: [
+          me,
+          /* @__PURE__ */ e(
+            ye,
+            {
+              active: d,
+              speed: U ?? "working",
+              color: te
+            }
+          )
+        ]
+      }
+    ) });
   }
 );
-se.displayName = "Button";
+Ce.displayName = "Button";
 export {
-  se as Button,
-  R as buttonVariants
+  Ce as Button,
+  X as buttonVariants
 };

package/dist/ui/card.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as t, jsxs as p } from "react/jsx-runtime";
 import * as s from "react";
-import { c as v } from "../_chunks/vendor-utils.js";
+import { a as v } from "../_chunks/vendor-utils.js";
 import { tweens as w, springs as b, motionProps as g } from "./lib/motion.js";
 import { cn as o } from "./lib/utils.js";
 import { m } from "../_chunks/framer.js";
@@ -36,19 +36,18 @@ const x = v(
   right: "right-0 top-0 bottom-0 rounded-r-ds-lg",
   bottom: "bottom-0 left-0 right-0 rounded-b-ds-lg"
 };
-function R(r, a) {
-  var e;
-  return `${N[r] ?? ""} ${((e = y[r]) == null ? void 0 : e[a]) ?? ""}`;
+function R(r, e) {
+  return `${N[r] ?? ""} ${y[r]?.[e] ?? ""}`;
 }
 function H(r) {
   return C[r] ?? r;
 }
 const P = s.forwardRef(
-  ({ className: r, variant: a, interactive: e, accent: d, accentColor: u = "default", accentWidth: h = 3, children: n, ...i }, c) => {
+  ({ className: r, variant: e, interactive: a, accent: d, accentColor: u = "default", accentWidth: h = 3, children: n, ...i }, c) => {
     const l = o(
-      x({ variant: a }),
+      x({ variant: e }),
       d && "relative overflow-hidden",
-      e && "hover:shadow-raised-hover hover:border-surface-border-strong cursor-pointer transition-shadow duration-fast-02 ease-productive-standard",
+      a && "hover:shadow-raised-hover hover:border-surface-border-strong cursor-pointer transition-shadow duration-fast-02 ease-productive-standard",
       r
     ), f = d ? /* @__PURE__ */ t(
       m.span,
@@ -61,7 +60,7 @@ const P = s.forwardRef(
         style: { backgroundColor: H(u) }
       }
     ) : null;
-    return e ? /* @__PURE__ */ p(
+    return a ? /* @__PURE__ */ p(
       m.div,
       {
         ref: c,
@@ -82,41 +81,41 @@ const P = s.forwardRef(
   }
 );
 P.displayName = "Card";
-const T = s.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+const T = s.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ t(
   "div",
   {
-    ref: e,
+    ref: a,
     className: o("flex flex-col space-y-ds-02b p-ds-06", r),
-    ...a
+    ...e
   }
 ));
 T.displayName = "CardHeader";
-const j = s.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+const j = s.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ t(
   "div",
   {
-    ref: e,
+    ref: a,
     className: o("font-sans font-semibold leading-ds-none tracking-normal text-surface-fg", r),
-    ...a
+    ...e
   }
 ));
 j.displayName = "CardTitle";
-const k = s.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+const k = s.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ t(
   "div",
   {
-    ref: e,
+    ref: a,
     className: o("text-ds-md text-surface-fg-muted", r),
-    ...a
+    ...e
   }
 ));
 k.displayName = "CardDescription";
-const A = s.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t("div", { ref: e, className: o("p-ds-06 pt-0", r), ...a }));
+const A = s.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ t("div", { ref: a, className: o("p-ds-06 pt-0", r), ...e }));
 A.displayName = "CardContent";
-const D = s.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+const D = s.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ t(
   "div",
   {
-    ref: e,
+    ref: a,
     className: o("flex items-center p-ds-06 pt-0", r),
-    ...a
+    ...e
   }
 ));
 D.displayName = "CardFooter";