@devalok/shilp-sutra 0.8.3 → 0.9.0

package/dist/ui/badge.js

@@ -2,100 +2,124 @@
 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";
-const u = x("inline-flex items-center gap-ds-02b font-sans font-medium rounded-ds-full border", {
-  variants: {
-    variant: {
-      subtle: "",
-      secondary: "",
-      // alias → subtle
-      solid: "",
-      outline: "",
-      destructive: ""
-      // alias → solid + error
+import { m as x } from "../_chunks/vendor.js";
+import { c as m } from "../_chunks/utils.js";
+const u = x(
+  "inline-flex items-center gap-ds-02b font-sans font-medium rounded-ds-full border",
+  {
+    variants: {
+      variant: {
+        subtle: "",
+        secondary: "",
+        // alias → subtle
+        solid: "",
+        outline: "",
+        destructive: ""
+        // alias → solid + error
+      },
+      color: {
+        default: "",
+        info: "",
+        success: "",
+        error: "",
+        warning: "",
+        brand: "",
+        accent: "",
+        teal: "",
+        amber: "",
+        slate: "",
+        indigo: "",
+        cyan: "",
+        orange: "",
+        emerald: ""
+      },
+      size: {
+        xs: "h-[16px] px-ds-02b text-ds-xs",
+        sm: "h-[20px] px-ds-03 text-ds-xs",
+        md: "h-ds-xs px-ds-03 text-ds-sm",
+        lg: "h-ds-xs-plus px-ds-04 text-ds-md"
+      }
     },
-    color: {
-      default: "",
-      info: "",
-      success: "",
-      error: "",
-      warning: "",
-      brand: "",
-      accent: "",
-      teal: "",
-      amber: "",
-      slate: "",
-      indigo: "",
-      cyan: "",
-      orange: "",
-      emerald: ""
-    },
-    size: {
-      xs: "h-[16px] px-ds-02b text-ds-xs",
-      sm: "h-[20px] px-ds-03 text-ds-xs",
-      md: "h-ds-xs px-ds-03 text-ds-sm",
-      lg: "h-ds-xs-plus px-ds-04 text-ds-md"
+    compoundVariants: [
+      // subtle (surface bg)
+      { variant: "subtle", color: "default", className: "bg-field text-text-secondary border-border" },
+      // "secondary" alias → same as subtle + default
+      { variant: "secondary", color: "default", className: "bg-field text-text-secondary border-border" },
+      // "destructive" alias → solid + error
+      { variant: "destructive", color: "default", className: "bg-error text-text-on-color border-transparent" },
+      { variant: "destructive", color: "error", className: "bg-error text-text-on-color border-transparent" },
+      { variant: "subtle", color: "info", className: "bg-info-surface text-info-text border-info-border" },
+      { variant: "subtle", color: "success", className: "bg-success-surface text-success-text border-success-border" },
+      { variant: "subtle", color: "error", className: "bg-error-surface text-error-text border-error-border" },
+      { variant: "subtle", color: "warning", className: "bg-warning-surface text-warning-text border-warning-border" },
+      { variant: "subtle", color: "brand", className: "bg-interactive-subtle text-text-brand border-interactive" },
+      { variant: "subtle", color: "accent", className: "bg-accent-subtle text-accent border-accent" },
+      { variant: "subtle", color: "teal", className: "bg-category-teal-surface text-category-teal-text border-category-teal-border" },
+      { variant: "subtle", color: "amber", className: "bg-category-amber-surface text-category-amber-text border-category-amber-border" },
+      { variant: "subtle", color: "slate", className: "bg-category-slate-surface text-category-slate-text border-category-slate-border" },
+      { variant: "subtle", color: "indigo", className: "bg-category-indigo-surface text-category-indigo-text border-category-indigo-border" },
+      { variant: "subtle", color: "cyan", className: "bg-category-cyan-surface text-category-cyan-text border-category-cyan-border" },
+      { variant: "subtle", color: "orange", className: "bg-category-orange-surface text-category-orange-text border-category-orange-border" },
+      { variant: "subtle", color: "emerald", className: "bg-category-emerald-surface text-category-emerald-text border-category-emerald-border" },
+      // solid (filled bg)
+      { variant: "solid", color: "default", className: "bg-interactive text-text-on-color border-transparent" },
+      { variant: "solid", color: "info", className: "bg-info text-text-on-color border-transparent" },
+      { variant: "solid", color: "success", className: "bg-success text-text-on-color border-transparent" },
+      { variant: "solid", color: "error", className: "bg-error text-text-on-color border-transparent" },
+      { variant: "solid", color: "warning", className: "bg-warning text-text-on-color border-transparent" },
+      { variant: "solid", color: "brand", className: "bg-interactive text-text-on-color border-transparent" },
+      { variant: "solid", color: "accent", className: "bg-accent text-text-on-color border-transparent" },
+      { variant: "solid", color: "teal", className: "bg-category-teal text-text-on-color border-transparent" },
+      { variant: "solid", color: "amber", className: "bg-category-amber text-text-on-color border-transparent" },
+      { variant: "solid", color: "slate", className: "bg-category-slate text-text-on-color border-transparent" },
+      { variant: "solid", color: "indigo", className: "bg-category-indigo text-text-on-color border-transparent" },
+      { variant: "solid", color: "cyan", className: "bg-category-cyan text-text-on-color border-transparent" },
+      { variant: "solid", color: "orange", className: "bg-category-orange text-text-on-color border-transparent" },
+      { variant: "solid", color: "emerald", className: "bg-category-emerald text-text-on-color border-transparent" },
+      // outline (border only)
+      { variant: "outline", color: "default", className: "bg-transparent text-text-secondary border-border" },
+      { variant: "outline", color: "info", className: "bg-transparent text-info-text border-info-border" },
+      { variant: "outline", color: "success", className: "bg-transparent text-success-text border-success-border" },
+      { variant: "outline", color: "error", className: "bg-transparent text-error-text border-error-border" },
+      { variant: "outline", color: "warning", className: "bg-transparent text-warning-text border-warning-border" },
+      { variant: "outline", color: "brand", className: "bg-transparent text-text-brand border-interactive" },
+      { variant: "outline", color: "accent", className: "bg-transparent text-accent border-accent" },
+      { variant: "outline", color: "teal", className: "bg-transparent text-category-teal-text border-category-teal-border" },
+      { variant: "outline", color: "amber", className: "bg-transparent text-category-amber-text border-category-amber-border" },
+      { variant: "outline", color: "slate", className: "bg-transparent text-category-slate-text border-category-slate-border" },
+      { variant: "outline", color: "indigo", className: "bg-transparent text-category-indigo-text border-category-indigo-border" },
+      { variant: "outline", color: "cyan", className: "bg-transparent text-category-cyan-text border-category-cyan-border" },
+      { variant: "outline", color: "orange", className: "bg-transparent text-category-orange-text border-category-orange-border" },
+      { variant: "outline", color: "emerald", className: "bg-transparent text-category-emerald-text border-category-emerald-border" }
+    ],
+    defaultVariants: {
+      variant: "subtle",
+      color: "default",
+      size: "md"
     }
-  },
-  compoundVariants: [
-    // subtle (surface bg)
-    { variant: "subtle", color: "default", className: "bg-field text-text-secondary border-border" },
-    // "secondary" alias → same as subtle + default
-    { variant: "secondary", color: "default", className: "bg-field text-text-secondary border-border" },
-    // "destructive" alias → solid + error
-    { variant: "destructive", color: "default", className: "bg-error text-text-on-color border-transparent" },
-    { variant: "destructive", color: "error", className: "bg-error text-text-on-color border-transparent" },
-    { variant: "subtle", color: "info", className: "bg-info-surface text-info-text border-info-border" },
-    { variant: "subtle", color: "success", className: "bg-success-surface text-success-text border-success-border" },
-    { variant: "subtle", color: "error", className: "bg-error-surface text-error-text border-error-border" },
-    { variant: "subtle", color: "warning", className: "bg-warning-surface text-warning-text border-warning-border" },
-    { variant: "subtle", color: "brand", className: "bg-interactive-subtle text-text-brand border-interactive" },
-    { variant: "subtle", color: "accent", className: "bg-accent-subtle text-accent border-accent" },
-    { variant: "subtle", color: "teal", className: "bg-category-teal-surface text-category-teal-text border-category-teal-border" },
-    { variant: "subtle", color: "amber", className: "bg-category-amber-surface text-category-amber-text border-category-amber-border" },
-    { variant: "subtle", color: "slate", className: "bg-category-slate-surface text-category-slate-text border-category-slate-border" },
-    { variant: "subtle", color: "indigo", className: "bg-category-indigo-surface text-category-indigo-text border-category-indigo-border" },
-    { variant: "subtle", color: "cyan", className: "bg-category-cyan-surface text-category-cyan-text border-category-cyan-border" },
-    { variant: "subtle", color: "orange", className: "bg-category-orange-surface text-category-orange-text border-category-orange-border" },
-    { variant: "subtle", color: "emerald", className: "bg-category-emerald-surface text-category-emerald-text border-category-emerald-border" },
-    // solid (filled bg)
-    { variant: "solid", color: "default", className: "bg-interactive text-text-on-color border-transparent" },
-    { variant: "solid", color: "info", className: "bg-info text-text-on-color border-transparent" },
-    { variant: "solid", color: "success", className: "bg-success text-text-on-color border-transparent" },
-    { variant: "solid", color: "error", className: "bg-error text-text-on-color border-transparent" },
-    { variant: "solid", color: "warning", className: "bg-warning text-text-on-color border-transparent" },
-    { variant: "solid", color: "brand", className: "bg-interactive text-text-on-color border-transparent" },
-    { variant: "solid", color: "accent", className: "bg-accent text-text-on-color border-transparent" },
-    { variant: "solid", color: "teal", className: "bg-category-teal text-text-on-color border-transparent" },
-    { variant: "solid", color: "amber", className: "bg-category-amber text-text-on-color border-transparent" },
-    { variant: "solid", color: "slate", className: "bg-category-slate text-text-on-color border-transparent" },
-    { variant: "solid", color: "indigo", className: "bg-category-indigo text-text-on-color border-transparent" },
-    { variant: "solid", color: "cyan", className: "bg-category-cyan text-text-on-color border-transparent" },
-    { variant: "solid", color: "orange", className: "bg-category-orange text-text-on-color border-transparent" },
-    { variant: "solid", color: "emerald", className: "bg-category-emerald text-text-on-color border-transparent" },
-    // outline (border only)
-    { variant: "outline", color: "default", className: "bg-transparent text-text-secondary border-border" },
-    { variant: "outline", color: "info", className: "bg-transparent text-info-text border-info-border" },
-    { variant: "outline", color: "success", className: "bg-transparent text-success-text border-success-border" },
-    { variant: "outline", color: "error", className: "bg-transparent text-error-text border-error-border" },
-    { variant: "outline", color: "warning", className: "bg-transparent text-warning-text border-warning-border" },
-    { variant: "outline", color: "brand", className: "bg-transparent text-text-brand border-interactive" },
-    { variant: "outline", color: "accent", className: "bg-transparent text-accent border-accent" },
-    { variant: "outline", color: "teal", className: "bg-transparent text-category-teal-text border-category-teal-border" },
-    { variant: "outline", color: "amber", className: "bg-transparent text-category-amber-text border-category-amber-border" },
-    { variant: "outline", color: "slate", className: "bg-transparent text-category-slate-text border-category-slate-border" },
-    { variant: "outline", color: "indigo", className: "bg-transparent text-category-indigo-text border-category-indigo-border" },
-    { variant: "outline", color: "cyan", className: "bg-transparent text-category-cyan-text border-category-cyan-border" },
-    { variant: "outline", color: "orange", className: "bg-transparent text-category-orange-text border-category-orange-border" },
-    { variant: "outline", color: "emerald", className: "bg-transparent text-category-emerald-text border-category-emerald-border" }
-  ],
-  defaultVariants: {
-    variant: "subtle",
-    color: "default",
-    size: "md"
   }
-}), v = g.forwardRef(({ className: t, variant: a, color: o, size: s, dot: n, onDismiss: e, children: c, ...l }, i) => d("span", { ref: i, className: m(u({ variant: a, color: o, size: s }), t), ...l, children: [n && r("span", { className: "h-ds-02b w-ds-02b rounded-ds-full bg-current opacity-[0.7] shrink-0", "aria-hidden": "true" }), c, e && r("button", { type: "button", onClick: e, className: "ml-ds-01 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-full text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus", "aria-label": "Remove", children: r(b, { className: "h-ico-sm w-ico-sm" }) })] }));
+), v = g.forwardRef(
+  ({ className: t, variant: a, color: o, size: s, dot: n, onDismiss: e, children: c, ...l }, i) => /* @__PURE__ */ d("span", { ref: i, className: m(u({ variant: a, color: o, size: s }), t), ...l, children: [
+    n && /* @__PURE__ */ r(
+      "span",
+      {
+        className: "h-ds-02b w-ds-02b rounded-ds-full bg-current opacity-[0.7] shrink-0",
+        "aria-hidden": "true"
+      }
+    ),
+    c,
+    e && /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        onClick: e,
+        className: "ml-ds-01 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-full text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
+        "aria-label": "Remove",
+        children: /* @__PURE__ */ r(b, { className: "h-ico-sm w-ico-sm" })
+      }
+    )
+  ] })
+);
 v.displayName = "Badge";
 export {
   v as Badge,

package/dist/ui/banner.d.ts

@@ -2,7 +2,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const bannerVariants: (props?: ({
-    color?: "error" | "warning" | "success" | "neutral" | "info" | null | undefined;
+    color?: "error" | "info" | "success" | "warning" | "neutral" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Props for Banner — a full-width notification strip with a colored icon, message, optional

package/dist/ui/banner.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { IconInfoCircle as n, IconAlertCircle as f, IconAlertTriangle as m, IconCircleCheck as b, IconX as u } from "@tabler/icons-react";
+import { IconInfoCircle as n, 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 { cn as p } from "./lib/utils.js";
+import { m as g } from "../_chunks/vendor.js";
+import { c as p } from "../_chunks/utils.js";
 const h = g(
   "flex items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md font-medium border-b",
   {
@@ -21,8 +21,8 @@ const h = g(
 ), N = {
   info: n,
   success: b,
-  warning: m,
-  error: f,
+  warning: f,
+  error: m,
   neutral: n
 }, v = x.forwardRef(
   ({ className: t, color: e = "info", action: s, onDismiss: o, children: i, ...c }, a) => {

package/dist/ui/breadcrumb.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx as s, jsxs as i } from "react/jsx-runtime";
-import { Root as c } from "../primitives/react-slot.js";
+import { S as c } from "../_chunks/primitives.js";
 import { IconDots as n, IconChevronRight as d } from "@tabler/icons-react";
-import * as m from "react";
-import { cn as o } from "./lib/utils.js";
-const l = m.forwardRef(({ ...e }, r) => /* @__PURE__ */ s("nav", { ref: r, "aria-label": "breadcrumb", ...e }));
+import * as o 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 }));
 l.displayName = "Breadcrumb";
-const p = m.forwardRef(
+const p = o.forwardRef(
   ({ className: e, ...r }, a) => /* @__PURE__ */ s(
     "ol",
     {
       ref: a,
-      className: o(
+      className: m(
         "flex flex-wrap items-center gap-ds-02b break-words text-ds-md text-text-secondary sm:gap-ds-03",
         e
       ),
@@ -20,15 +20,15 @@ const p = m.forwardRef(
   )
 );
 p.displayName = "BreadcrumbList";
-const u = m.forwardRef(
-  ({ className: e, ...r }, a) => /* @__PURE__ */ s("li", { ref: a, className: o("inline-flex items-center gap-ds-02b", e), ...r })
+const u = o.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 = m.forwardRef(({ className: e, asChild: r = !1, ...a }, t) => /* @__PURE__ */ s(
+const f = o.forwardRef(({ className: e, asChild: r = !1, ...a }, t) => /* @__PURE__ */ s(
   r ? c : "a",
   {
     ref: t,
-    className: o(
+    className: m(
       "transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus rounded-ds-sm",
       e
     ),
@@ -36,13 +36,13 @@ const f = m.forwardRef(({ className: e, asChild: r = !1, ...a }, t) => /* @__PUR
   }
 ));
 f.displayName = "BreadcrumbLink";
-const b = m.forwardRef(
+const b = o.forwardRef(
   ({ className: e, ...r }, a) => /* @__PURE__ */ s(
     "span",
     {
       ref: a,
       "aria-current": "page",
-      className: o("font-normal text-text-primary", e),
+      className: m("font-normal text-text-primary", e),
       ...r
     }
   )
@@ -53,7 +53,7 @@ const N = ({ children: e, className: r, ...a }) => /* @__PURE__ */ s(
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: o("[&>svg]:h-ico-sm [&>svg]:w-ico-sm", r),
+    className: m("[&>svg]:h-ico-sm [&>svg]:w-ico-sm", r),
     ...a,
     children: e ?? /* @__PURE__ */ s(d, {})
   }
@@ -64,7 +64,7 @@ const x = ({ className: e, ...r }) => /* @__PURE__ */ i(
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: o("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center", e),
+    className: m("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center", e),
     ...r,
     children: [
       /* @__PURE__ */ s(n, { className: "h-ico-sm w-ico-sm" }),

package/dist/ui/button-group.js

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

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" | "default" | "outline" | "ghost" | "destructive" | null | undefined;
+    variant?: "link" | "default" | "solid" | "outline" | "destructive" | "ghost" | null | undefined;
     color?: "default" | "error" | null | undefined;
-    size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    size?: "sm" | "md" | "icon" | "lg" | "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.js

@@ -1,64 +1,66 @@
 "use client";
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import { cva as B } from "class-variance-authority";
-import { Root as R, Slottable as E } from "../primitives/react-slot.js";
+import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import { m as B } from "../_chunks/vendor.js";
+import { S as R, a as E } from "../_chunks/primitives.js";
 import * as G from "react";
-import { useButtonGroup as M } from "./button-group.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]", {
-  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]"
+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] 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]",
+  {
+    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: {
+        default: "",
+        error: ""
+      },
+      size: {
+        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"
+      }
     },
-    color: {
-      default: "",
-      error: ""
-    },
-    size: {
-      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"
+    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)
+      { variant: "outline", color: "default", className: "bg-transparent text-interactive border-border-interactive hover:bg-interactive-subtle active:bg-layer-active" },
+      // 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" },
+      // ghost + default
+      { variant: "ghost", color: "default", className: "bg-transparent text-text-secondary hover:bg-layer-02 hover:text-text-primary active:bg-layer-active" },
+      // ghost + error
+      { variant: "ghost", color: "error", className: "bg-transparent text-error hover:bg-error-surface hover:text-error active:bg-error-surface" }
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "default",
+      size: "md"
     }
-  },
-  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)
-    { variant: "outline", color: "default", className: "bg-transparent text-interactive border-border-interactive hover:bg-interactive-subtle active:bg-layer-active" },
-    // 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" },
-    // ghost + default
-    { variant: "ghost", color: "default", className: "bg-transparent text-text-secondary hover:bg-layer-02 hover:text-text-primary active:bg-layer-active" },
-    // ghost + error
-    { variant: "ghost", color: "error", className: "bg-transparent text-error hover:bg-error-surface hover:text-error active:bg-error-surface" }
-  ],
-  defaultVariants: {
-    variant: "solid",
-    color: "default",
-    size: "md"
   }
-}), A = {
+), A = {
   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",
@@ -74,23 +76,64 @@ const x = B("inline-flex items-center justify-center gap-ds-03 whitespace-nowrap
   "icon-sm": "sm",
   "icon-md": "sm",
   "icon-lg": "md"
-}, F = G.forwardRef(({ className: c, variant: w, color: N, size: y, asChild: z = !1, startIcon: d, endIcon: l, loading: e = !1, loadingPosition: s = "start", fullWidth: m = !1, disabled: v, children: i, ...u }, 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 ? r(q, { size: S }) : null;
-  if (z) {
-    const V = {
-      className: t(x({ variant: b, color: f, size: o }), m && "w-full", c),
-      ref: h,
-      disabled: v || e,
-      "aria-busy": e || void 0,
-      ...u
-    };
-    return r(R, { ...V, children: r(E, { children: i }) });
+}, F = G.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: i,
+    ...u
+  }, h) => {
+    const a = M(), b = w ?? a.variant, g = N ?? a.color, o = y ?? a.size ?? "md", f = A[o], z = D[o], n = e ? /* @__PURE__ */ r(q, { size: z }) : null;
+    if (S) {
+      const V = {
+        className: s(
+          p({ variant: b, color: g, size: o }),
+          m && "w-full",
+          c
+        ),
+        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" ? n : d ? /* @__PURE__ */ r("span", { className: s("inline-flex shrink-0 items-center justify-center", f), children: d }) : null, k = () => e && t === "end" ? n : l ? /* @__PURE__ */ r("span", { className: s("inline-flex shrink-0 items-center justify-center", f), 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: i }),
+      /* @__PURE__ */ r("span", { className: "absolute inset-0 flex items-center justify-center", children: n })
+    ] }) : i;
+    return /* @__PURE__ */ x(
+      "button",
+      {
+        className: s(
+          p({ variant: b, color: g, size: o }),
+          m && "w-full",
+          c
+        ),
+        ref: h,
+        disabled: v || e,
+        "aria-busy": e || void 0,
+        ...u,
+        children: [
+          j(),
+          C(),
+          k()
+        ]
+      }
+    );
   }
-  const j = () => e && s === "start" ? n : d ? r("span", { className: t("inline-flex shrink-0 items-center justify-center", g), children: d }) : null, k = () => e && s === "end" ? n : l ? r("span", { className: t("inline-flex shrink-0 items-center justify-center", g), children: l }) : null, C = () => e && s === "center" ? p("span", { className: "relative inline-flex items-center justify-center", children: [r("span", { className: "invisible", children: i }), r("span", { className: "absolute inset-0 flex items-center justify-center", children: n })] }) : i;
-  return p("button", { className: t(x({ variant: b, color: f, size: o }), m && "w-full", c), ref: h, disabled: v || e, "aria-busy": e || void 0, ...u, children: [j(), C(), k()] });
-});
+);
 F.displayName = "Button";
 export {
   F as Button,
-  x as buttonVariants
+  p as buttonVariants
 };