@spark-ui/components 13.1.4 → 13.2.0

package/dist/{chunk-2YM6GKWW.mjs → Button-C3C0aixy.mjs}

@@ -1,27 +1,15 @@
-import {
-  Spinner
-} from "./chunk-GAK4SC2F.mjs";
-import {
-  Slot,
-  wrapPolymorphicSlot
-} from "./chunk-6QCEPQ3U.mjs";
-
-// src/button/Button.tsx
-import { cx } from "class-variance-authority";
-import { useMemo } from "react";
-
-// src/button/Button.styles.tsx
-import { makeVariants } from "@spark-ui/internal-utils";
-import { cva } from "class-variance-authority";
-
-// src/button/variants/filled.ts
-import { tw } from "@spark-ui/internal-utils";
-var filledVariants = [
+import { jsx as a, jsxs as V, Fragment as I } from "react/jsx-runtime";
+import { cva as M, cx as S } from "class-variance-authority";
+import { useMemo as k } from "react";
+import { a as N, w as E } from "./Slot-D2Bbf8Gw.mjs";
+import { S as j } from "./Spinner-jF3-zoh_.mjs";
+import { tw as e, makeVariants as s } from "@spark-ui/internal-utils";
+const B = [
   // Main
   {
     intent: "main",
     design: "filled",
-    class: tw([
+    class: e([
       "bg-main",
       "text-on-main",
       "hover:bg-main-hovered",
@@ -33,7 +21,7 @@ var filledVariants = [
   {
     intent: "support",
     design: "filled",
-    class: tw([
+    class: e([
       "bg-support",
       "text-on-support",
       "hover:bg-support-hovered",
@@ -45,7 +33,7 @@ var filledVariants = [
   {
     intent: "accent",
     design: "filled",
-    class: tw([
+    class: e([
       "bg-accent",
       "text-on-accent",
       "hover:bg-accent-hovered",
@@ -57,7 +45,7 @@ var filledVariants = [
   {
     intent: "basic",
     design: "filled",
-    class: tw([
+    class: e([
       "bg-basic",
       "text-on-basic",
       "hover:bg-basic-hovered",
@@ -69,7 +57,7 @@ var filledVariants = [
   {
     intent: "success",
     design: "filled",
-    class: tw([
+    class: e([
       "bg-success",
       "text-on-success",
       "hover:bg-success-hovered",
@@ -81,7 +69,7 @@ var filledVariants = [
   {
     intent: "alert",
     design: "filled",
-    class: tw([
+    class: e([
       "bg-alert",
       "text-on-alert",
       "hover:bg-alert-hovered",
@@ -93,7 +81,7 @@ var filledVariants = [
   {
     intent: "danger",
     design: "filled",
-    class: tw([
+    class: e([
       "text-on-error bg-error",
       "hover:bg-error-hovered enabled:active:bg-error-hovered",
       "focus-visible:bg-error-hovered"
@@ -103,7 +91,7 @@ var filledVariants = [
   {
     intent: "info",
     design: "filled",
-    class: tw([
+    class: e([
       "text-on-error bg-info",
       "hover:bg-info-hovered enabled:active:bg-info-hovered",
       "focus-visible:bg-info-hovered"
@@ -113,7 +101,7 @@ var filledVariants = [
   {
     intent: "neutral",
     design: "filled",
-    class: tw([
+    class: e([
       "bg-neutral",
       "text-on-neutral",
       "hover:bg-neutral-hovered",
@@ -125,7 +113,7 @@ var filledVariants = [
   {
     intent: "surface",
     design: "filled",
-    class: tw([
+    class: e([
       "bg-surface",
       "text-on-surface",
       "hover:bg-surface-hovered",
@@ -136,7 +124,7 @@ var filledVariants = [
   {
     intent: "surfaceInverse",
     design: "filled",
-    class: tw([
+    class: e([
       "bg-surface-inverse",
       "text-on-surface-inverse",
       "hover:bg-surface-inverse-hovered",
@@ -144,15 +132,11 @@ var filledVariants = [
       "focus-visible:bg-surface-inverse-hovered"
     ])
   }
-];
-
-// src/button/variants/ghost.ts
-import { tw as tw2 } from "@spark-ui/internal-utils";
-var ghostVariants = [
+], K = [
   {
     intent: "main",
     design: "ghost",
-    class: tw2([
+    class: e([
       "text-on-main-container",
       "hover:bg-main/dim-5",
       "enabled:active:bg-main/dim-5",
@@ -162,7 +146,7 @@ var ghostVariants = [
   {
     intent: "support",
     design: "ghost",
-    class: tw2([
+    class: e([
       "text-on-support-container",
       "hover:bg-support/dim-5",
       "enabled:active:bg-support/dim-5",
@@ -172,7 +156,7 @@ var ghostVariants = [
   {
     intent: "accent",
     design: "ghost",
-    class: tw2([
+    class: e([
       "text-on-accent-container",
       "hover:bg-accent/dim-5",
       "enabled:active:bg-accent/dim-5",
@@ -182,7 +166,7 @@ var ghostVariants = [
   {
     intent: "basic",
     design: "ghost",
-    class: tw2([
+    class: e([
       "text-on-basic-container",
       "hover:bg-basic/dim-5",
       "enabled:active:bg-basic/dim-5",
@@ -192,7 +176,7 @@ var ghostVariants = [
   {
     intent: "success",
     design: "ghost",
-    class: tw2([
+    class: e([
       "text-on-success-container",
       "hover:bg-success/dim-5",
       "enabled:active:bg-success/dim-5",
@@ -202,7 +186,7 @@ var ghostVariants = [
   {
     intent: "alert",
     design: "ghost",
-    class: tw2([
+    class: e([
       "text-on-alert-container",
       "hover:bg-alert/dim-5",
       "enabled:active:bg-alert/dim-5",
@@ -212,7 +196,7 @@ var ghostVariants = [
   {
     intent: "danger",
     design: "ghost",
-    class: tw2([
+    class: e([
       "text-on-error-container",
       "hover:bg-error/dim-5",
       "enabled:active:bg-error/dim-5",
@@ -222,7 +206,7 @@ var ghostVariants = [
   {
     intent: "info",
     design: "ghost",
-    class: tw2([
+    class: e([
       "text-on-info-container",
       "hover:bg-info/dim-5",
       "enabled:active:bg-info/dim-5",
@@ -232,7 +216,7 @@ var ghostVariants = [
   {
     intent: "neutral",
     design: "ghost",
-    class: tw2([
+    class: e([
       "text-on-neutral-container",
       "hover:bg-neutral/dim-5",
       "enabled:active:bg-neutral/dim-5",
@@ -242,7 +226,7 @@ var ghostVariants = [
   {
     intent: "surface",
     design: "ghost",
-    class: tw2([
+    class: e([
       "text-surface",
       "hover:bg-surface/dim-5",
       "enabled:active:bg-surface/dim-5",
@@ -252,22 +236,18 @@ var ghostVariants = [
   {
     intent: "surfaceInverse",
     design: "ghost",
-    class: tw2([
+    class: e([
       "text-surface-inverse",
       "hover:bg-surface-inverse/dim-5",
       "enabled:active:bg-surface-inverse/dim-5",
       "focus-visible:bg-surface-inverse/dim-5"
     ])
   }
-];
-
-// src/button/variants/outlined.ts
-import { tw as tw3 } from "@spark-ui/internal-utils";
-var outlinedVariants = [
+], P = [
   {
     intent: "main",
     design: "outlined",
-    class: tw3([
+    class: e([
       "hover:bg-main/dim-5",
       "enabled:active:bg-main/dim-5",
       "focus-visible:bg-main/dim-5",
@@ -277,7 +257,7 @@ var outlinedVariants = [
   {
     intent: "support",
     design: "outlined",
-    class: tw3([
+    class: e([
       "hover:bg-support/dim-5",
       "enabled:active:bg-support/dim-5",
       "focus-visible:bg-support/dim-5",
@@ -287,7 +267,7 @@ var outlinedVariants = [
   {
     intent: "accent",
     design: "outlined",
-    class: tw3([
+    class: e([
       "hover:bg-accent/dim-5",
       "enabled:active:bg-accent/dim-5",
       "focus-visible:bg-accent/dim-5",
@@ -297,7 +277,7 @@ var outlinedVariants = [
   {
     intent: "basic",
     design: "outlined",
-    class: tw3([
+    class: e([
       "hover:bg-basic/dim-5",
       "enabled:active:bg-basic/dim-5",
       "focus-visible:bg-basic/dim-5",
@@ -307,7 +287,7 @@ var outlinedVariants = [
   {
     intent: "success",
     design: "outlined",
-    class: tw3([
+    class: e([
       "hover:bg-success/dim-5",
       "enabled:active:bg-success/dim-5",
       "focus-visible:bg-success/dim-5",
@@ -317,7 +297,7 @@ var outlinedVariants = [
   {
     intent: "alert",
     design: "outlined",
-    class: tw3([
+    class: e([
       "hover:bg-alert/dim-5",
       "enabled:active:bg-alert/dim-5",
       "focus-visible:bg-alert/dim-5",
@@ -327,7 +307,7 @@ var outlinedVariants = [
   {
     intent: "danger",
     design: "outlined",
-    class: tw3([
+    class: e([
       "hover:bg-error/dim-5",
       "enabled:active:bg-error/dim-5",
       "focus-visible:bg-error/dim-5",
@@ -337,7 +317,7 @@ var outlinedVariants = [
   {
     intent: "info",
     design: "outlined",
-    class: tw3([
+    class: e([
       "hover:bg-info/dim-5",
       "enabled:active:bg-info/dim-5",
       "focus-visible:bg-info/dim-5",
@@ -347,7 +327,7 @@ var outlinedVariants = [
   {
     intent: "neutral",
     design: "outlined",
-    class: tw3([
+    class: e([
       "hover:bg-neutral/dim-5",
       "enabled:active:bg-neutral/dim-5",
       "focus-visible:bg-neutral/dim-5",
@@ -357,7 +337,7 @@ var outlinedVariants = [
   {
     intent: "surface",
     design: "outlined",
-    class: tw3([
+    class: e([
       "hover:bg-surface/dim-5",
       "enabled:active:bg-surface/dim-5",
       "focus-visible:bg-surface/dim-5",
@@ -367,22 +347,18 @@ var outlinedVariants = [
   {
     intent: "surfaceInverse",
     design: "outlined",
-    class: tw3([
+    class: e([
       "hover:bg-surface-inverse/dim-5",
       "enabled:active:bg-surface-inverse/dim-5",
       "focus-visible:bg-surface-inverse/dim-5",
       "text-surface-inverse"
     ])
   }
-];
-
-// src/button/variants/tinted.ts
-import { tw as tw4 } from "@spark-ui/internal-utils";
-var tintedVariants = [
+], D = [
   {
     intent: "main",
     design: "tinted",
-    class: tw4([
+    class: e([
       "bg-main-container",
       "text-on-main-container",
       "hover:bg-main-container-hovered",
@@ -393,7 +369,7 @@ var tintedVariants = [
   {
     intent: "support",
     design: "tinted",
-    class: tw4([
+    class: e([
       "bg-support-container",
       "text-on-support-container",
       "hover:bg-support-container-hovered",
@@ -404,7 +380,7 @@ var tintedVariants = [
   {
     intent: "accent",
     design: "tinted",
-    class: tw4([
+    class: e([
       "bg-accent-container",
       "text-on-accent-container",
       "hover:bg-accent-container-hovered",
@@ -415,7 +391,7 @@ var tintedVariants = [
   {
     intent: "basic",
     design: "tinted",
-    class: tw4([
+    class: e([
       "bg-basic-container",
       "text-on-basic-container",
       "hover:bg-basic-container-hovered",
@@ -426,7 +402,7 @@ var tintedVariants = [
   {
     intent: "success",
     design: "tinted",
-    class: tw4([
+    class: e([
       "bg-success-container",
       "text-on-success-container",
       "hover:bg-success-container-hovered",
@@ -437,7 +413,7 @@ var tintedVariants = [
   {
     intent: "alert",
     design: "tinted",
-    class: tw4([
+    class: e([
       "bg-alert-container",
       "text-on-alert-container",
       "hover:bg-alert-container-hovered",
@@ -448,7 +424,7 @@ var tintedVariants = [
   {
     intent: "danger",
     design: "tinted",
-    class: tw4([
+    class: e([
       "bg-error-container",
       "text-on-error-container",
       "hover:bg-error-container-hovered",
@@ -459,7 +435,7 @@ var tintedVariants = [
   {
     intent: "info",
     design: "tinted",
-    class: tw4([
+    class: e([
       "bg-info-container",
       "text-on-info-container",
       "hover:bg-info-container-hovered",
@@ -470,7 +446,7 @@ var tintedVariants = [
   {
     intent: "neutral",
     design: "tinted",
-    class: tw4([
+    class: e([
       "bg-neutral-container",
       "text-on-neutral-container",
       "hover:bg-neutral-container-hovered",
@@ -481,7 +457,7 @@ var tintedVariants = [
   {
     intent: "surface",
     design: "tinted",
-    class: tw4([
+    class: e([
       "bg-surface",
       "text-on-surface",
       "hover:bg-surface-hovered",
@@ -492,7 +468,7 @@ var tintedVariants = [
   {
     intent: "surfaceInverse",
     design: "tinted",
-    class: tw4([
+    class: e([
       "bg-surface-inverse",
       "text-on-surface-inverse",
       "hover:bg-surface-inverse-hovered",
@@ -500,15 +476,11 @@ var tintedVariants = [
       "focus-visible:bg-surface-inverse-hovered"
     ])
   }
-];
-
-// src/button/variants/contrast.ts
-import { tw as tw5 } from "@spark-ui/internal-utils";
-var contrastVariants = [
+], H = [
   {
     intent: "main",
     design: "contrast",
-    class: tw5([
+    class: e([
       "text-on-main-contaier bg-surface",
       "hover:bg-main-container-hovered",
       "enabled:active:bg-main-container-hovered",
@@ -518,7 +490,7 @@ var contrastVariants = [
   {
     intent: "support",
     design: "contrast",
-    class: tw5([
+    class: e([
       "text-on-support-container bg-surface",
       "hover:bg-support-container-hovered",
       "enabled:active:bg-support-container-hovered",
@@ -528,7 +500,7 @@ var contrastVariants = [
   {
     intent: "accent",
     design: "contrast",
-    class: tw5([
+    class: e([
       "text-on-accent-container bg-surface",
       "hover:bg-accent-container-hovered",
       "enabled:active:bg-accent-container-hovered",
@@ -538,7 +510,7 @@ var contrastVariants = [
   {
     intent: "basic",
     design: "contrast",
-    class: tw5([
+    class: e([
       "text-on-basic-container bg-surface",
       "hover:bg-basic-container-hovered",
       "enabled:active:bg-basic-container-hovered",
@@ -548,7 +520,7 @@ var contrastVariants = [
   {
     intent: "success",
     design: "contrast",
-    class: tw5([
+    class: e([
       "text-on-success-container bg-surface",
       "hover:bg-success-container-hovered",
       "enabled:active:bg-success-container-hovered",
@@ -558,7 +530,7 @@ var contrastVariants = [
   {
     intent: "alert",
     design: "contrast",
-    class: tw5([
+    class: e([
       "text-on-alert-container bg-surface",
       "hover:bg-alert-container-hovered",
       "enabled:active:bg-alert-container-hovered",
@@ -568,7 +540,7 @@ var contrastVariants = [
   {
     intent: "danger",
     design: "contrast",
-    class: tw5([
+    class: e([
       "text-on-error-container bg-surface",
       "hover:bg-error-container-hovered",
       "enabled:active:bg-error-container-hovered",
@@ -578,7 +550,7 @@ var contrastVariants = [
   {
     intent: "info",
     design: "contrast",
-    class: tw5([
+    class: e([
       "text-on-info-container bg-surface",
       "hover:bg-info-container-hovered",
       "enabled:active:bg-info-container-hovered",
@@ -588,7 +560,7 @@ var contrastVariants = [
   {
     intent: "neutral",
     design: "contrast",
-    class: tw5([
+    class: e([
       "text-on-neutral-container bg-surface",
       "hover:bg-neutral-container-hovered",
       "enabled:active:bg-neutral-container-hovered",
@@ -598,7 +570,7 @@ var contrastVariants = [
   {
     intent: "surface",
     design: "contrast",
-    class: tw5([
+    class: e([
       "text-on-surface bg-surface",
       "hover:bg-surface-hovered",
       "enabled:active:bg-surface-hovered",
@@ -608,17 +580,14 @@ var contrastVariants = [
   {
     intent: "surfaceInverse",
     design: "contrast",
-    class: tw5([
+    class: e([
       "text-on-surface-inverse bg-surface-inverse",
       "hover:bg-surface-inverse-hovered",
       "enabled:active:bg-surface-inverse-hovered",
       "focus-visible:bg-surface-inverse-hovered"
     ])
   }
-];
-
-// src/button/Button.styles.tsx
-var buttonStyles = cva(
+], O = M(
   [
     "u-shadow-border-transition",
     "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
@@ -642,7 +611,7 @@ var buttonStyles = cva(
        * - `contrast`: Button will be surface filled. No borders, plain text.
        *
        */
-      design: makeVariants({
+      design: s({
         filled: [],
         outlined: ["bg-transparent", "border-sm", "border-current"],
         tinted: [],
@@ -655,7 +624,7 @@ var buttonStyles = cva(
       /**
        * Color scheme of the button.
        */
-      intent: makeVariants({
+      intent: s({
         main: [],
         support: [],
         accent: [],
@@ -671,7 +640,7 @@ var buttonStyles = cva(
       /**
        * Size of the button.
        */
-      size: makeVariants({
+      size: s({
         sm: ["min-w-sz-32", "h-sz-32"],
         md: ["min-w-sz-44", "h-sz-44"],
         lg: ["min-w-sz-56", "h-sz-56"]
@@ -679,7 +648,7 @@ var buttonStyles = cva(
       /**
        * Shape of the button.
        */
-      shape: makeVariants({
+      shape: s({
         rounded: ["rounded-lg"],
         square: ["rounded-0"],
         pill: ["rounded-full"]
@@ -693,11 +662,11 @@ var buttonStyles = cva(
       }
     },
     compoundVariants: [
-      ...filledVariants,
-      ...outlinedVariants,
-      ...tintedVariants,
-      ...ghostVariants,
-      ...contrastVariants
+      ...B,
+      ...P,
+      ...D,
+      ...K,
+      ...H
     ],
     defaultVariants: {
       design: "filled",
@@ -706,11 +675,7 @@ var buttonStyles = cva(
       shape: "rounded"
     }
   }
-);
-
-// src/button/Button.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var blockedEventHandlers = [
+), U = [
   "onClick",
   "onMouseDown",
   "onMouseUp",
@@ -722,80 +687,72 @@ var blockedEventHandlers = [
   "onKeyPress",
   "onKeyUp",
   "onSubmit"
-];
-var Button = ({
-  children,
-  design = "filled",
-  disabled = false,
-  intent = "main",
-  isLoading = false,
-  loadingLabel,
-  loadingText,
-  shape = "rounded",
-  size = "md",
-  asChild,
-  className,
-  underline = false,
-  ref,
-  ...others
+], q = ({
+  children: l,
+  design: v = "filled",
+  disabled: o = !1,
+  intent: g = "main",
+  isLoading: t = !1,
+  loadingLabel: c,
+  loadingText: i,
+  shape: u = "rounded",
+  size: f = "md",
+  asChild: d,
+  className: h,
+  underline: m = !1,
+  ref: p,
+  ...x
 }) => {
-  const Component = asChild ? Slot : "button";
-  const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = useMemo(() => {
-    const result = {};
-    if (shouldNotInteract) {
-      blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
-    }
-    return result;
-  }, [shouldNotInteract]);
-  const spinnerProps = {
+  const b = d ? N : "button", r = !!o || t, w = k(() => {
+    const n = {};
+    return r && U.forEach((z) => n[z] = void 0), n;
+  }, [r]), y = {
     size: "current",
-    className: loadingText ? "inline-block" : "absolute",
-    ...loadingLabel && { "aria-label": loadingLabel }
+    className: i ? "inline-block" : "absolute",
+    ...c && { "aria-label": c }
   };
-  return /* @__PURE__ */ jsx(
-    Component,
+  return /* @__PURE__ */ a(
+    b,
     {
       "data-spark-component": "button",
-      ...Component === "button" && { type: "button" },
-      ref,
-      className: buttonStyles({
-        className,
-        design,
-        disabled: shouldNotInteract,
-        intent,
-        shape,
-        size,
-        underline
+      ...b === "button" && { type: "button" },
+      ref: p,
+      className: O({
+        className: h,
+        design: v,
+        disabled: r,
+        intent: g,
+        shape: u,
+        size: f,
+        underline: m
       }),
-      disabled: !!disabled,
-      "aria-busy": isLoading,
-      "aria-live": isLoading ? "assertive" : "off",
-      ...others,
-      ...disabledEventHandlers,
-      children: wrapPolymorphicSlot(
-        asChild,
-        children,
-        (slotted) => isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Spinner, { ...spinnerProps }),
-          loadingText && loadingText,
-          /* @__PURE__ */ jsx(
+      disabled: !!o,
+      "aria-busy": t,
+      "aria-live": t ? "assertive" : "off",
+      ...x,
+      ...w,
+      children: E(
+        d,
+        l,
+        (n) => t ? /* @__PURE__ */ V(I, { children: [
+          /* @__PURE__ */ a(j, { ...y }),
+          i && i,
+          /* @__PURE__ */ a(
             "div",
             {
-              "aria-hidden": true,
-              className: cx("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
-              children: slotted
+              "aria-hidden": !0,
+              className: S("gap-md", i ? "hidden" : "inline-flex opacity-0"),
+              children: n
             }
           )
-        ] }) : slotted
+        ] }) : n
       )
     }
   );
 };
-Button.displayName = "Button";
-
+q.displayName = "Button";
 export {
-  buttonStyles,
-  Button
+  q as B,
+  O as b
 };
-//# sourceMappingURL=chunk-2YM6GKWW.mjs.map
+//# sourceMappingURL=Button-C3C0aixy.mjs.map