@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/button.js

@@ -1,281 +1,395 @@
 "use client";
-import { jsx as e, jsxs as T, Fragment as pe } from "react/jsx-runtime";
-import { a as be } from "../_chunks/vendor-utils.js";
-import { IconCheck as he, IconX as xe } from "@tabler/icons-react";
-import { S as we, i as Ne } from "../_chunks/primitives.js";
-import * as t from "react";
-import { useButtonGroup as ye, useButtonGroupItem as ke, getGroupPositionStyle as Se } from "./button-group.js";
-import { Icon as Re } from "./icon.js";
-import { IconProvider as ze } from "./icon-context.js";
-import { motionProps as Ce } from "./lib/motion.js";
-import { ProcessingOverlay as Ee } from "./button-processing.js";
+import { Hn as e, Un as t } from "../_chunks/primitives.js";
+import { a as n, n as ee } from "../_chunks/framer.js";
+import { motionProps as te } from "./lib/motion.js";
+import { t as r } from "../_chunks/vendor-utils.js";
 import { cn as i } from "./lib/utils.js";
-import { Spinner as B } from "./spinner.js";
-import { u as je, m as Ie } from "../_chunks/framer.js";
-const H = be(
-  "relative inline-flex items-center justify-center whitespace-nowrap font-sans select-none overflow-hidden isolate focus-visible:outline-hidden 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: "",
-        soft: "",
-        outline: "border",
-        ghost: "",
-        link: "underline-offset-4 hover:underline active:opacity-80"
-      },
-      color: {
-        accent: "",
-        error: "",
-        success: "",
-        warning: "",
-        neutral: ""
-      },
-      weight: {
-        semibold: "font-semibold",
-        normal: "font-normal"
-      },
-      size: {
-        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",
-        "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"
-      }
-    },
-    compoundVariants: [
-      // ============ 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" }
-    ],
-    defaultVariants: {
-      variant: "solid",
-      color: "accent",
-      weight: "semibold",
-      size: "md"
-    }
-  }
-), J = {
-  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"
-}, Te = {
-  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: "" }
-}, _ = {
-  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"
-}, Be = {
-  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"
-}, _e = t.forwardRef(
-  ({
-    className: A,
-    variant: K,
-    color: L,
-    weight: Q,
-    size: Y,
-    asChild: W = !1,
-    shape: ee,
-    startIcon: b,
-    endIcon: y,
-    loading: se = !1,
-    loadingPosition: k = "start",
-    fullWidth: m = !1,
-    disabled: re,
-    onClick: te,
-    onClickAsync: S,
-    asyncFeedbackDuration: ae = 1500,
-    processing: u,
-    processingColor: ne,
-    processingDisabled: R = !0,
-    children: O,
-    ...z
-  }, g) => {
-    const n = ye(), F = ke(), c = K ?? n.variant, C = L ?? n.color, P = Q ?? n.weight ?? "semibold", h = ee ?? n.shape ?? "default", o = Y ?? n.size ?? "md", V = re ?? n.disabled, G = F && n.attached !== !1 ? Se(F.position, n.orientation ?? "horizontal") : void 0, x = n._stretch ?? !1, M = je(), U = t.useRef(null), Z = t.useRef(null), E = t.useRef(void 0);
-    t.useEffect(() => {
-      const s = Z.current, N = U.current;
-      if (!(!s || !N || m || x || M))
-        return E.current = requestAnimationFrame(() => {
-          N.style.width = "auto";
-          const D = s.offsetWidth;
-          D > 0 && (N.getBoundingClientRect(), N.style.width = `${D}px`);
-        }), () => {
-          E.current && cancelAnimationFrame(E.current);
-        };
-    });
-    const [d, w] = t.useState("idle"), q = t.useRef(void 0), f = t.useRef(!0);
-    t.useEffect(() => () => {
-      f.current = !1, clearTimeout(q.current);
-    }, []);
-    const oe = (s) => {
-      !S || d !== "idle" || (w("loading"), S(s).then(() => {
-        f.current && w("success");
-      }).catch(() => {
-        f.current && w("error");
-      }).finally(() => {
-        f.current && (q.current = setTimeout(() => {
-          f.current && w("idle");
-        }, ae));
-      }));
-    }, j = !!S, a = j ? d === "loading" : se, r = d === "success" || d === "error", X = r ? void 0 : u === !0 ? "working" : u === !1 || !u ? j && d === "loading" && !u ? "working" : void 0 : u, l = !!X, ce = ne ?? C ?? "accent";
-    if (W) {
-      const s = {
-        className: i(
-          H({ variant: c, color: C, weight: P, size: o }),
-          h === "pill" && "rounded-full",
-          h === "pill" && J[o],
-          (m || x) && "w-full",
-          A
-        ),
-        ref: g,
-        disabled: V || a,
-        "aria-busy": a || void 0,
-        ...z
-      };
-      return /* @__PURE__ */ e(we, { ...s, children: /* @__PURE__ */ e(Ne, { children: O }) });
-    }
-    const v = Te[o] ?? { start: "", end: "" }, $ = c === "solid" || c === "soft" || c === "outline", ie = () => a && k === "start" ? /* @__PURE__ */ e("span", { className: i("inline-flex shrink-0 items-center justify-center", b && v.start), children: /* @__PURE__ */ e(B, { size: _[o], variant: "bare" }) }) : b ? /* @__PURE__ */ e("span", { className: i("inline-flex shrink-0 items-center justify-center pointer-events-none", v.start, $ && "opacity-90"), children: b }) : null, de = () => a && k === "end" ? /* @__PURE__ */ e("span", { className: i("inline-flex shrink-0 items-center justify-center", y && v.end), children: /* @__PURE__ */ e(B, { size: _[o], variant: "bare" }) }) : y ? /* @__PURE__ */ e("span", { className: i("inline-flex shrink-0 items-center justify-center pointer-events-none", v.end, $ && "opacity-90"), children: y }) : null, le = t.Children.toArray(O), I = [], p = [];
-    le.forEach((s) => {
-      t.isValidElement(s) && s.type?.displayName === "DevalokGrain" ? I.push(s) : p.push(s);
-    });
-    const me = () => a && k === "center" ? /* @__PURE__ */ T("span", { className: "relative inline-flex items-center justify-center", children: [
-      /* @__PURE__ */ e("span", { className: "invisible", children: p }),
-      /* @__PURE__ */ e("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(B, { size: _[o], variant: "bare" }) })
-    ] }) : I.length > 0 ? /* @__PURE__ */ e("span", { children: p }) : /* @__PURE__ */ e(pe, { children: p }), ue = r ? d === "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, ge = r ? /* @__PURE__ */ e("span", { className: i("inline-flex shrink-0 items-center justify-center pointer-events-none", b && v.start), children: /* @__PURE__ */ e(Re, { icon: d === "success" ? he : xe, animate: "draw" }) }) : null, fe = Be[o] ?? "md", ve = /* @__PURE__ */ T(
-      Ie.button,
-      {
-        ...Ce(z),
-        style: { ...z.style, ...G },
-        className: i(
-          H({
-            // When processing (and not showing async feedback), force soft variant so ants pop
-            variant: l && !r && c !== "ghost" && c !== "outline" && c !== "link" ? "soft" : c,
-            color: C,
-            weight: P,
-            size: o
-          }),
-          h === "pill" && "rounded-full",
-          h === "pill" && J[o],
-          (m || x) && "w-full",
-          // Asymmetric timing: hover-out is slow+relaxed, hover-in is fast+snappy (applied via hover: override)
-          !a && !r && "transition-[color,background-color,border-color,box-shadow,transform,filter] duration-moderate-01 ease-productive-exit",
-          !a && !r && "hover:duration-fast-02 hover:ease-productive-entrance",
-          !a && !r && "active:scale-[0.95] active:brightness-[0.92] active:saturate-[1.1] active:duration-[0ms]",
-          ue,
-          r && "transition-colors duration-moderate-01 ease-productive-standard",
-          l && R && "pointer-events-none cursor-default",
-          A
-        ),
-        ref: (s) => {
-          Z.current = s, typeof g == "function" ? g(s) : g && (g.current = s);
-        },
-        disabled: V || a && !l,
-        "aria-busy": a || l || void 0,
-        "aria-disabled": l && R || void 0,
-        onClick: j ? oe : l && R ? void 0 : te,
-        children: [
-          I,
-          r ? ge : ie(),
-          r ? p : me(),
-          r ? null : de()
-        ]
-      }
-    );
-    return /* @__PURE__ */ e(ze, { size: fe, children: /* @__PURE__ */ T(
-      "span",
-      {
-        ref: U,
-        className: i("relative inline-flex", m && "w-full"),
-        style: {
-          ...m || x || M ? void 0 : { transition: "width 0.2s cubic-bezier(0.25, 0.1, 0.25, 1)" },
-          ...G
-        },
-        children: [
-          ve,
-          /* @__PURE__ */ e(
-            Ee,
-            {
-              active: l,
-              speed: X ?? "working",
-              color: ce
-            }
-          )
-        ]
-      }
-    ) });
-  }
-);
-_e.displayName = "Button";
-export {
-  _e as Button,
-  H as buttonVariants
-};
+import { Spinner as a } from "./spinner.js";
+import { IconProvider as o } from "./icon-context.js";
+import { Icon as ne } from "./icon.js";
+import { getGroupPositionStyle as re, useButtonGroup as ie, useButtonGroupItem as ae } from "./button-group.js";
+import { ProcessingOverlay as s } from "./button-processing.js";
+import * as c from "react";
+import { Fragment as oe, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { IconCheck as se, IconX as ce } from "@tabler/icons-react";
+//#region src/ui/button.tsx
+var d = r("relative inline-flex items-center justify-center whitespace-nowrap font-sans select-none overflow-hidden isolate focus-visible:outline-hidden 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: "",
+			soft: "",
+			outline: "border",
+			ghost: "",
+			link: "underline-offset-4 hover:underline active:opacity-80"
+		},
+		color: {
+			accent: "",
+			error: "",
+			success: "",
+			warning: "",
+			neutral: ""
+		},
+		weight: {
+			semibold: "font-semibold",
+			normal: "font-normal"
+		},
+		size: {
+			xs: "h-ds-xs-plus rounded-ds-md px-ds-03 text-ds-sm gap-ds-02",
+			sm: "h-ds-sm rounded-ds-md px-ds-04 text-ds-sm gap-ds-02b",
+			md: "h-ds-md rounded-ds-lg px-ds-05 text-ds-md gap-ds-03",
+			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-ds-02",
+			"compact-sm": "rounded-ds-md px-ds-03 py-[5px] text-ds-sm gap-ds-02b",
+			"compact-md": "rounded-ds-lg px-ds-04 py-ds-03 text-ds-md gap-ds-03",
+			icon: "h-ds-md w-ds-md rounded-ds-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"
+		}
+	},
+	compoundVariants: [
+		{
+			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"
+		},
+		{
+			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"
+		},
+		{
+			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"
+		},
+		{
+			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"
+		},
+		{
+			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"
+		}
+	],
+	defaultVariants: {
+		variant: "solid",
+		color: "accent",
+		weight: "semibold",
+		size: "md"
+	}
+}), f = {
+	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"
+}, le = {
+	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: ""
+	}
+}, p = {
+	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"
+}, ue = {
+	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"
+}, m = c.forwardRef(({ className: r, variant: m, color: h, weight: de, size: fe, asChild: pe = !1, shape: me, startIcon: g, endIcon: _, loading: v = !1, loadingPosition: y = "start", fullWidth: b = !1, disabled: he, onClick: ge, onClickAsync: x, asyncFeedbackDuration: _e = 1500, processing: S, processingColor: ve, processingDisabled: C = !0, children: w, ...T }, E) => {
+	let D = ie(), O = ae(), k = m ?? D.variant, A = h ?? D.color, j = de ?? D.weight ?? "semibold", M = me ?? D.shape ?? "default", N = fe ?? D.size ?? "md", P = he ?? D.disabled, F = O && D.attached !== !1 ? re(O.position, D.orientation ?? "horizontal") : void 0, I = D._stretch ?? !1, L = ee(), R = c.useRef(null), z = c.useRef(null), B = c.useRef(void 0);
+	c.useEffect(() => {
+		let e = z.current, t = R.current;
+		if (!(!e || !t || b || I || L)) return B.current = requestAnimationFrame(() => {
+			t.style.width = "auto";
+			let n = e.offsetWidth;
+			n > 0 && (t.getBoundingClientRect(), t.style.width = `${n}px`);
+		}), () => {
+			B.current && cancelAnimationFrame(B.current);
+		};
+	});
+	let [V, H] = c.useState("idle"), U = c.useRef(void 0), W = c.useRef(!0);
+	c.useEffect(() => () => {
+		W.current = !1, clearTimeout(U.current);
+	}, []);
+	let ye = (e) => {
+		!x || V !== "idle" || (H("loading"), x(e).then(() => {
+			W.current && H("success");
+		}).catch(() => {
+			W.current && H("error");
+		}).finally(() => {
+			W.current && (U.current = setTimeout(() => {
+				W.current && H("idle");
+			}, _e));
+		}));
+	}, G = !!x, K = G ? V === "loading" : v, q = V === "success" || V === "error", J = q ? void 0 : S === !0 ? "working" : S === !1 || !S ? G && V === "loading" && !S ? "working" : void 0 : S, Y = !!J, be = ve ?? A ?? "accent";
+	if (pe) return /* @__PURE__ */ l(e, {
+		className: i(d({
+			variant: k,
+			color: A,
+			weight: j,
+			size: N
+		}), M === "pill" && "rounded-full", M === "pill" && f[N], (b || I) && "w-full", r),
+		ref: E,
+		disabled: P || K,
+		"aria-busy": K || void 0,
+		...T,
+		children: /* @__PURE__ */ l(t, { children: w })
+	});
+	let X = le[N] ?? {
+		start: "",
+		end: ""
+	}, Z = k === "solid" || k === "soft" || k === "outline", xe = () => K && y === "start" ? /* @__PURE__ */ l("span", {
+		className: i("inline-flex shrink-0 items-center justify-center", g && X.start),
+		children: /* @__PURE__ */ l(a, {
+			size: p[N],
+			variant: "bare"
+		})
+	}) : g ? /* @__PURE__ */ l("span", {
+		className: i("inline-flex shrink-0 items-center justify-center pointer-events-none", X.start, Z && "opacity-90"),
+		children: g
+	}) : null, Se = () => K && y === "end" ? /* @__PURE__ */ l("span", {
+		className: i("inline-flex shrink-0 items-center justify-center", _ && X.end),
+		children: /* @__PURE__ */ l(a, {
+			size: p[N],
+			variant: "bare"
+		})
+	}) : _ ? /* @__PURE__ */ l("span", {
+		className: i("inline-flex shrink-0 items-center justify-center pointer-events-none", X.end, Z && "opacity-90"),
+		children: _
+	}) : null, Ce = c.Children.toArray(w), Q = [], $ = [];
+	Ce.forEach((e) => {
+		c.isValidElement(e) && e.type?.displayName === "DevalokGrain" ? Q.push(e) : $.push(e);
+	});
+	let we = () => K && y === "center" ? /* @__PURE__ */ u("span", {
+		className: "relative inline-flex items-center justify-center",
+		children: [/* @__PURE__ */ l("span", {
+			className: "invisible",
+			children: $
+		}), /* @__PURE__ */ l("span", {
+			className: "absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ l(a, {
+				size: p[N],
+				variant: "bare"
+			})
+		})]
+	}) : Q.length > 0 ? /* @__PURE__ */ l("span", { children: $ }) : /* @__PURE__ */ l(oe, { children: $ }), Te = q ? V === "success" ? "bg-success-9 text-success-fg border-transparent hover:bg-success-9" : "bg-error-9 text-error-fg border-transparent hover:bg-error-9" : void 0, Ee = q ? /* @__PURE__ */ l("span", {
+		className: i("inline-flex shrink-0 items-center justify-center pointer-events-none", g && X.start),
+		children: /* @__PURE__ */ l(ne, {
+			icon: V === "success" ? se : ce,
+			animate: "draw"
+		})
+	}) : null, De = ue[N] ?? "md", Oe = /* @__PURE__ */ u(n.button, {
+		...te(T),
+		style: {
+			...T.style,
+			...F
+		},
+		className: i(d({
+			variant: Y && !q && k !== "ghost" && k !== "outline" && k !== "link" ? "soft" : k,
+			color: A,
+			weight: j,
+			size: N
+		}), M === "pill" && "rounded-full", M === "pill" && f[N], (b || I) && "w-full", !K && !q && "transition-[color,background-color,border-color,box-shadow,transform,filter] duration-moderate-01 ease-productive-exit", !K && !q && "hover:duration-fast-02 hover:ease-productive-entrance", !K && !q && "active:scale-[0.95] active:brightness-[0.92] active:saturate-[1.1] active:duration-[0ms]", Te, q && "transition-colors duration-moderate-01 ease-productive-standard", Y && C && "pointer-events-none cursor-default", r),
+		ref: (e) => {
+			z.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
+		},
+		disabled: P || K && !Y,
+		"aria-busy": K || Y || void 0,
+		"aria-disabled": Y && C || void 0,
+		onClick: G ? ye : Y && C ? void 0 : ge,
+		children: [
+			Q,
+			q ? Ee : xe(),
+			q ? $ : we(),
+			q ? null : Se()
+		]
+	});
+	return /* @__PURE__ */ l(o, {
+		size: De,
+		children: /* @__PURE__ */ u("span", {
+			ref: R,
+			className: i("relative inline-flex", b && "w-full"),
+			style: {
+				...b || I || L ? void 0 : { transition: "width 0.2s cubic-bezier(0.25, 0.1, 0.25, 1)" },
+				...F
+			},
+			children: [Oe, /* @__PURE__ */ l(s, {
+				active: Y,
+				speed: J ?? "working",
+				color: be
+			})]
+		})
+	});
+});
+m.displayName = "Button";
+//#endregion
+export { m as Button, d as buttonVariants };