@devalok/shilp-sutra 0.17.2 → 0.18.0

package/dist/ui/banner.js

@@ -1,53 +1,67 @@
 "use client";
-import { jsxs as b, jsx as r } from "react/jsx-runtime";
-import { IconInfoCircle as n, IconAlertCircle as x, IconAlertTriangle as g, IconCircleCheck as p, IconX as h } from "@tabler/icons-react";
-import * as s from "react";
-import { e as v } from "../_chunks/vendor-utils.js";
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import { IconInfoCircle as o, IconAlertCircle as g, IconAlertTriangle as p, IconCircleCheck as h, IconX as x } from "@tabler/icons-react";
+import * as r from "react";
+import { ag as v } from "../_chunks/vendor-utils.js";
 import { c as w } from "../_chunks/utils.js";
-const N = v(
+import { s as N, m as I } from "../_chunks/motion2.js";
+import { A as C, m as y } from "../_chunks/motion.js";
+const k = v(
   "flex items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md font-medium border-b",
   {
     variants: {
       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: "bg-info-3 border-info-7 text-info-11",
+        success: "bg-success-3 border-success-7 text-success-11",
+        warning: "bg-warning-3 border-warning-7 text-warning-11",
+        error: "bg-error-3 border-error-7 text-error-11",
+        neutral: "bg-surface-2 border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted"
       }
     },
     defaultVariants: { color: "info" }
   }
-), y = {
-  info: n,
-  success: p,
-  warning: g,
-  error: x,
-  neutral: n
-}, I = s.forwardRef(
-  ({ className: a, color: t = "info", action: o, onDismiss: e, children: i, ...c }, l) => {
-    const d = y[t ?? "info"], [f, m] = s.useState(!1), u = s.useCallback(() => {
-      m(!0), setTimeout(() => e == null ? void 0 : e(), 150);
-    }, [e]);
-    return /* @__PURE__ */ b("div", { ref: l, className: w(N({ color: t }), f && "animate-collapse-out overflow-hidden", a), role: "alert", ...c, children: [
-      /* @__PURE__ */ r(d, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
-      /* @__PURE__ */ r("span", { className: "flex-1", children: i }),
-      o && /* @__PURE__ */ r("span", { className: "shrink-0", children: o }),
-      e && /* @__PURE__ */ r(
-        "button",
-        {
-          type: "button",
-          onClick: u,
-          className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
-          "aria-label": "Dismiss",
-          children: /* @__PURE__ */ r(h, { className: "h-ico-sm w-ico-sm" })
-        }
-      )
-    ] });
+), A = {
+  info: o,
+  success: h,
+  warning: p,
+  error: g,
+  neutral: o
+}, V = r.forwardRef(
+  ({ className: t, color: s = "info", action: n, onDismiss: i, children: a, ...c }, l) => {
+    const m = A[s ?? "info"], [f, d] = r.useState(!0), u = r.useCallback(() => {
+      d(!1);
+    }, []);
+    return /* @__PURE__ */ e(C, { onExitComplete: i, children: f && /* @__PURE__ */ b(
+      y.div,
+      {
+        ref: l,
+        initial: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: N.snappy,
+        className: w(k({ color: s }), "overflow-hidden", t),
+        role: "alert",
+        ...I(c),
+        children: [
+          /* @__PURE__ */ e(m, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ e("span", { className: "flex-1", children: a }),
+          n && /* @__PURE__ */ e("span", { className: "shrink-0", children: n }),
+          i && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: u,
+              className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted hover:bg-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
+              "aria-label": "Dismiss",
+              children: /* @__PURE__ */ e(x, { className: "h-ico-sm w-ico-sm" })
+            }
+          )
+        ]
+      }
+    ) });
   }
 );
-I.displayName = "Banner";
+V.displayName = "Banner";
 export {
-  I as Banner,
-  N as bannerVariants
+  V as Banner,
+  k as bannerVariants
 };

package/dist/ui/breadcrumb.d.ts

@@ -17,5 +17,7 @@ declare const BreadcrumbEllipsis: {
     ({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export type BreadcrumbProps = React.ComponentPropsWithoutRef<'nav'>;
+export type BreadcrumbLinkProps = React.ComponentPropsWithoutRef<'a'>;
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
 //# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/ui/breadcrumb.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,QAAA,MAAM,UAAU;gBAEwC,KAAK,CAAC,SAAS;qCACO,CAAA;AAG9E,QAAA,MAAM,cAAc,2KAWnB,CAAA;AAGD,QAAA,MAAM,cAAc,kKAInB,CAAA;AAGD,QAAA,MAAM,cAAc;cAEgC,OAAO;2CAczD,CAAA;AAGF,QAAA,MAAM,cAAc,sKASnB,CAAA;AAGD,QAAA,MAAM,mBAAmB;wCAAuC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;;CASzF,CAAA;AAGD,QAAA,MAAM,kBAAkB;8BAA6B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;;CAUhF,CAAA;AAGD,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/ui/breadcrumb.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,QAAA,MAAM,UAAU;gBAEwC,KAAK,CAAC,SAAS;qCACO,CAAA;AAG9E,QAAA,MAAM,cAAc,2KAWnB,CAAA;AAGD,QAAA,MAAM,cAAc,kKAInB,CAAA;AAGD,QAAA,MAAM,cAAc;cAEgC,OAAO;2CAczD,CAAA;AAGF,QAAA,MAAM,cAAc,sKASnB,CAAA;AAGD,QAAA,MAAM,mBAAmB;wCAAuC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;;CASzF,CAAA;AAGD,QAAA,MAAM,kBAAkB;8BAA6B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;;CAUhF,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AACnE,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAErE,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAA"}

package/dist/ui/breadcrumb.js

@@ -1,48 +1,48 @@
 "use client";
 import { jsx as s, jsxs as i } from "react/jsx-runtime";
-import { S as c } from "../_chunks/primitives.js";
+import { S as t } from "../_chunks/primitives.js";
 import { IconDots as n, IconChevronRight as d } from "@tabler/icons-react";
-import * as o from "react";
+import * as c from "react";
 import { c as m } from "../_chunks/utils.js";
-const l = o.forwardRef(({ ...e }, r) => /* @__PURE__ */ s("nav", { ref: r, "aria-label": "breadcrumb", ...e }));
+const l = c.forwardRef(({ ...e }, r) => /* @__PURE__ */ s("nav", { ref: r, "aria-label": "breadcrumb", ...e }));
 l.displayName = "Breadcrumb";
-const p = o.forwardRef(
+const f = c.forwardRef(
   ({ className: e, ...r }, a) => /* @__PURE__ */ s(
     "ol",
     {
       ref: a,
       className: m(
-        "flex flex-wrap items-center gap-ds-02b break-words text-ds-md text-text-secondary sm:gap-ds-03",
+        "flex flex-wrap items-center gap-ds-02b break-words text-ds-md text-surface-fg-muted sm:gap-ds-03",
         e
       ),
       ...r
     }
   )
 );
-p.displayName = "BreadcrumbList";
-const u = o.forwardRef(
+f.displayName = "BreadcrumbList";
+const p = c.forwardRef(
   ({ className: e, ...r }, a) => /* @__PURE__ */ s("li", { ref: a, className: m("inline-flex items-center gap-ds-02b", e), ...r })
 );
-u.displayName = "BreadcrumbItem";
-const f = o.forwardRef(({ className: e, asChild: r = !1, ...a }, t) => /* @__PURE__ */ s(
-  r ? c : "a",
+p.displayName = "BreadcrumbItem";
+const u = c.forwardRef(({ className: e, asChild: r = !1, ...a }, o) => /* @__PURE__ */ s(
+  r ? t : "a",
   {
-    ref: t,
+    ref: o,
     className: m(
-      "transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus rounded-ds-sm",
+      "transition-colors hover:text-surface-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm",
       e
     ),
     ...a
   }
 ));
-f.displayName = "BreadcrumbLink";
-const b = o.forwardRef(
+u.displayName = "BreadcrumbLink";
+const b = c.forwardRef(
   ({ className: e, ...r }, a) => /* @__PURE__ */ s(
     "span",
     {
       ref: a,
       "aria-current": "page",
-      className: m("font-normal text-text-primary", e),
+      className: m("font-normal text-surface-fg", e),
       ...r
     }
   )
@@ -59,7 +59,7 @@ const N = ({ children: e, className: r, ...a }) => /* @__PURE__ */ s(
   }
 );
 N.displayName = "BreadcrumbSeparator";
-const x = ({ className: e, ...r }) => /* @__PURE__ */ i(
+const g = ({ className: e, ...r }) => /* @__PURE__ */ i(
   "span",
   {
     role: "presentation",
@@ -72,13 +72,13 @@ const x = ({ className: e, ...r }) => /* @__PURE__ */ i(
     ]
   }
 );
-x.displayName = "BreadcrumbEllipsis";
+g.displayName = "BreadcrumbEllipsis";
 export {
   l as Breadcrumb,
-  x as BreadcrumbEllipsis,
-  u as BreadcrumbItem,
-  f as BreadcrumbLink,
-  p as BreadcrumbList,
+  g as BreadcrumbEllipsis,
+  p as BreadcrumbItem,
+  u as BreadcrumbLink,
+  f as BreadcrumbList,
   b as BreadcrumbPage,
   N as BreadcrumbSeparator
 };

package/dist/ui/button.d.ts

@@ -2,7 +2,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "solid" | "outline" | "destructive" | "ghost" | null | undefined;
+    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;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -60,6 +60,15 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     loadingPosition?: 'start' | 'end' | 'center';
     /** Stretch to full width of parent */
     fullWidth?: boolean;
+    /**
+     * Async click handler — auto-manages loading → success/error states.
+     * When provided, the button shows a spinner while the promise is pending,
+     * then briefly flashes green (success) or red (error) before reverting.
+     * Overrides `onClick` and `loading` when active.
+     */
+    onClickAsync?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+    /** How long (ms) to show the success/error state before reverting. Default: 1500 */
+    asyncFeedbackDuration?: number;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

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;;;;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"}
+{"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"}

package/dist/ui/button.js

@@ -1,12 +1,16 @@
 "use client";
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
-import { e as B } from "../_chunks/vendor-utils.js";
-import { S as R, a as E } from "../_chunks/primitives.js";
-import * as G from "react";
-import { u as M, S as q } from "../_chunks/spinner.js";
-import { c as s } from "../_chunks/utils.js";
-const p = 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,transform] duration-fast-01 ease-productive-standard active:translate-y-px 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]",
+import { jsx as e, jsxs as C } from "react/jsx-runtime";
+import { ag as K } from "../_chunks/vendor-utils.js";
+import { IconCheck as L, IconX as O } from "@tabler/icons-react";
+import { S as P, a as Q } from "../_chunks/primitives.js";
+import * as a from "react";
+import { u as U } from "../_chunks/button-group.js";
+import { s as Y } from "../_chunks/motion2.js";
+import { c as n } from "../_chunks/utils.js";
+import { S as Z } from "../_chunks/spinner.js";
+import { A as _, m as $ } from "../_chunks/motion.js";
+const R = K(
+  "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",
   {
     variants: {
       variant: {
@@ -17,7 +21,7 @@ const p = B(
         ghost: "",
         destructive: "",
         // alias → solid + error
-        link: "text-text-link underline-offset-4 hover:underline active:opacity-[0.8]"
+        link: "text-info-11 underline-offset-4 hover:underline active:opacity-80"
       },
       color: {
         default: "",
@@ -36,23 +40,23 @@ const p = 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" },
+      { variant: "solid", color: "default", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 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" },
+      { variant: "default", color: "default", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-01 hover:shadow-brand" },
+      { variant: "default", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 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" },
+      { variant: "destructive", color: "default", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-01" },
+      { variant: "destructive", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 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" },
+      { variant: "solid", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-01" },
       // outline + default (secondary)
-      { variant: "outline", color: "default", className: "bg-transparent text-interactive border-border-interactive hover:bg-interactive-subtle active:bg-layer-active" },
+      { variant: "outline", color: "default", className: "bg-transparent text-accent-11 border-accent-7 hover:bg-accent-2 active:bg-surface-4" },
       // outline + error (error-ghost)
-      { variant: "outline", color: "error", className: "bg-transparent text-error border border-border-error hover:bg-error-surface active:bg-error-surface" },
+      { 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-text-secondary hover:bg-layer-02 hover:text-text-primary active:bg-layer-active" },
+      { variant: "ghost", color: "default", className: "bg-transparent text-surface-fg-muted hover:bg-surface-2 hover:text-surface-fg active:bg-surface-4" },
       // ghost + error
-      { variant: "ghost", color: "error", className: "bg-transparent text-error hover:bg-error-surface hover:text-error active:bg-error-surface" }
+      { variant: "ghost", color: "error", className: "bg-transparent text-error-11 hover:bg-error-3 hover:text-error-11 active:bg-error-3" }
     ],
     defaultVariants: {
       variant: "solid",
@@ -60,7 +64,7 @@ const p = B(
       size: "md"
     }
   }
-), A = {
+), W = {
   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",
@@ -68,7 +72,7 @@ const p = B(
   "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"
-}, D = {
+}, ee = {
   sm: "sm",
   md: "sm",
   lg: "md",
@@ -76,64 +80,96 @@ const p = B(
   "icon-sm": "sm",
   "icon-md": "sm",
   "icon-lg": "md"
-}, F = G.forwardRef(
+}, re = a.forwardRef(
   ({
-    className: c,
-    variant: w,
-    color: N,
-    size: y,
-    asChild: S = !1,
-    startIcon: d,
-    endIcon: l,
-    loading: e = !1,
-    loadingPosition: t = "start",
-    fullWidth: m = !1,
-    disabled: v,
-    children: a,
-    ...u
-  }, h) => {
-    const i = M(), b = w ?? i.variant, f = N ?? i.color, o = y ?? i.size ?? "md", g = A[o], z = D[o], n = e ? /* @__PURE__ */ r(q, { size: z }) : null;
-    if (S) {
-      const V = {
-        className: s(
-          p({ variant: b, color: f, size: o }),
-          m && "w-full",
-          c
+    className: b,
+    variant: A,
+    color: V,
+    size: B,
+    asChild: E = !1,
+    startIcon: h,
+    endIcon: p,
+    loading: F = !1,
+    loadingPosition: d = "start",
+    fullWidth: w = !1,
+    disabled: x,
+    onClick: M,
+    onClickAsync: m,
+    asyncFeedbackDuration: T = 1500,
+    children: c,
+    ...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, l] = a.useState("idle"), j = a.useRef(), o = a.useRef(!0);
+    a.useEffect(() => () => {
+      o.current = !1, clearTimeout(j.current);
+    }, []);
+    const I = (v) => {
+      !m || t !== "idle" || (l("loading"), m(v).then(() => {
+        o.current && l("success");
+      }).catch(() => {
+        o.current && l("error");
+      }).finally(() => {
+        o.current && (j.current = setTimeout(() => {
+          o.current && l("idle");
+        }, T));
+      }));
+    }, k = !!m, r = k ? t === "loading" : F, s = t === "success" || t === "error", g = r ? /* @__PURE__ */ e(Z, { size: G }) : null;
+    if (E) {
+      const v = {
+        className: n(
+          R({ variant: S, color: z, size: i }),
+          w && "w-full",
+          b
         ),
-        ref: h,
-        disabled: v || e,
-        "aria-busy": e || void 0,
-        ...u
+        ref: y,
+        disabled: x || r,
+        "aria-busy": r || void 0,
+        ...N
       };
-      return /* @__PURE__ */ r(R, { ...V, children: /* @__PURE__ */ r(E, { children: a }) });
+      return /* @__PURE__ */ e(P, { ...v, children: /* @__PURE__ */ e(Q, { children: c }) });
     }
-    const j = () => e && t === "start" ? n : d ? /* @__PURE__ */ r("span", { className: s("inline-flex shrink-0 items-center justify-center", g), children: d }) : null, k = () => e && t === "end" ? n : l ? /* @__PURE__ */ r("span", { className: s("inline-flex shrink-0 items-center justify-center", g), children: l }) : null, C = () => e && t === "center" ? /* @__PURE__ */ x("span", { className: "relative inline-flex items-center justify-center", children: [
-      /* @__PURE__ */ r("span", { className: "invisible", children: a }),
-      /* @__PURE__ */ r("span", { className: "absolute inset-0 flex items-center justify-center", children: n })
-    ] }) : a;
-    return /* @__PURE__ */ x(
+    const X = () => r && d === "start" ? g : h ? /* @__PURE__ */ e("span", { className: n("inline-flex shrink-0 items-center justify-center", f), children: h }) : null, q = () => r && d === "end" ? g : p ? /* @__PURE__ */ e("span", { className: n("inline-flex shrink-0 items-center justify-center", f), children: p }) : null, D = () => r && d === "center" ? /* @__PURE__ */ C("span", { className: "relative inline-flex items-center justify-center", children: [
+      /* @__PURE__ */ e("span", { className: "invisible", children: c }),
+      /* @__PURE__ */ e("span", { className: "absolute inset-0 flex items-center justify-center", children: g })
+    ] }) : c, 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(
+      $.span,
+      {
+        initial: { opacity: 0, scale: 0.5 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.5 },
+        transition: Y.bouncy,
+        className: n("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",
       {
-        className: s(
-          p({ variant: b, color: f, size: o }),
-          m && "w-full",
-          c
+        ...N,
+        className: n(
+          R({ variant: S, color: z, size: i }),
+          w && "w-full",
+          !r && !s && "active:scale-[0.97] transition-transform duration-100",
+          H,
+          s && "transition-colors duration-200",
+          b
         ),
-        ref: h,
-        disabled: v || e,
-        "aria-busy": e || void 0,
-        ...u,
+        ref: y,
+        disabled: x || r || s,
+        "aria-busy": r || void 0,
+        onClick: k ? I : M,
         children: [
-          j(),
-          C(),
-          k()
+          s ? J : X(),
+          s ? c : D(),
+          s ? null : q()
         ]
       }
     );
   }
 );
-F.displayName = "Button";
+re.displayName = "Button";
 export {
-  F as Button,
-  p as buttonVariants
+  re as Button,
+  R as buttonVariants
 };

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" | "default" | "outline" | "elevated" | null | undefined;
+    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
@@ -48,7 +48,7 @@ declare const cardVariants: (props?: ({
  * @example
  * // Flat card for a sidebar panel section (no shadow):
  * <Card variant="flat" className="p-ds-05">
- *   <p className="text-text-secondary text-ds-sm">No recent activity</p>
+ *   <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!
  */

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;AAIjE,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,kFAaT,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;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"}