@spark-ui/button 2.1.5 → 2.1.7

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.7](https://github.com/adevinta/spark/compare/@spark-ui/button@2.1.6...@spark-ui/button@2.1.7) (2023-09-04)
+
+**Note:** Version bump only for package @spark-ui/button
+
+## [2.1.6](https://github.com/adevinta/spark/compare/@spark-ui/button@2.1.5...@spark-ui/button@2.1.6) (2023-09-01)
+
+**Note:** Version bump only for package @spark-ui/button
+
 ## [2.1.5](https://github.com/adevinta/spark/compare/@spark-ui/button@2.1.4...@spark-ui/button@2.1.5) (2023-08-31)
 
 **Note:** Version bump only for package @spark-ui/button

package/dist/Button.d.ts

@@ -1,6 +1,6 @@
-import React, { type PropsWithChildren } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import { type ButtonStylesProps } from './Button.styles';
-export interface ButtonProps extends PropsWithChildren<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>>, ButtonStylesProps {
+export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>, ButtonStylesProps {
     /**
      * Change the component to the HTML tag or custom component of the only child.
      */

package/dist/index.mjs

@@ -1,16 +1,16 @@
 import { wrapPolymorphicSlot as M, Slot as N } from "@spark-ui/slot";
 import { Spinner as g } from "@spark-ui/spinner";
 import { cva as k, cx as S } from "class-variance-authority";
-import n, { useMemo as K } from "react";
+import s, { forwardRef as K, useMemo as L } from "react";
 import { tw as e, makeVariants as a } from "@spark-ui/internal-utils";
-const L = [{ intent: "main", design: "filled", class: e(["bg-main", "text-on-main", "hover:bg-main-hovered", "enabled:active:bg-main-pressed", "focus-visible:bg-main-focused"]) }, { intent: "support", design: "filled", class: e(["bg-support", "text-on-support", "hover:bg-support-hovered", "enabled:active:bg-support-pressed", "focus-visible:bg-support-focused"]) }, { intent: "accent", design: "filled", class: e(["bg-accent", "text-on-accent", "hover:bg-accent-hovered", "enabled:active:bg-accent-pressed", "focus-visible:bg-accent-focused"]) }, { intent: "basic", design: "filled", class: e(["bg-basic", "text-on-basic", "hover:bg-basic-hovered", "enabled:active:bg-basic-pressed", "focus-visible:bg-basic-focused"]) }, { intent: "success", design: "filled", class: e(["bg-success", "text-on-success", "hover:bg-success-hovered", "enabled:active:bg-success-pressed", "focus-visible:bg-success-focused"]) }, { intent: "alert", design: "filled", class: e(["bg-alert", "text-on-alert", "hover:bg-alert-hovered", "enabled:active:bg-alert-pressed", "focus-visible:bg-alert-focused"]) }, { intent: "danger", design: "filled", class: e(["text-on-error bg-error", "hover:bg-error-hovered enabled:active:bg-error-pressed", "focus-visible:bg-error-focused"]) }, { intent: "info", design: "filled", class: e(["text-on-error bg-info", "hover:bg-info-hovered enabled:active:bg-info-pressed", "focus-visible:bg-info-focused"]) }, { intent: "neutral", design: "filled", class: e(["bg-neutral", "text-on-neutral", "hover:bg-neutral-hovered", "enabled:active:bg-neutral-pressed", "focus-visible:bg-neutral-focused"]) }, { intent: "surface", design: "filled", class: e(["bg-surface", "text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], P = [{ intent: "main", design: "ghost", class: e(["text-main", "hover:bg-main/dim-5", "enabled:active:bg-main/dim-5", "focus-visible:bg-main/dim-5"]) }, { intent: "support", design: "ghost", class: e(["text-support", "hover:bg-support/dim-5", "enabled:active:bg-support/dim-5", "focus-visible:bg-support/dim-5"]) }, { intent: "accent", design: "ghost", class: e(["text-accent", "hover:bg-accent/dim-5", "enabled:active:bg-accent/dim-5", "focus-visible:bg-accent/dim-5"]) }, { intent: "basic", design: "ghost", class: e(["text-basic", "hover:bg-basic/dim-5", "enabled:active:bg-basic/dim-5", "focus-visible:bg-basic/dim-5"]) }, { intent: "success", design: "ghost", class: e(["text-success", "hover:bg-success/dim-5", "enabled:active:bg-success/dim-5", "focus-visible:bg-success/dim-5"]) }, { intent: "alert", design: "ghost", class: e(["text-alert", "hover:bg-alert/dim-5", "enabled:active:bg-alert/dim-5", "focus-visible:bg-alert/dim-5"]) }, { intent: "danger", design: "ghost", class: e(["text-error", "hover:bg-error/dim-5", "enabled:active:bg-error/dim-5", "focus-visible:bg-error/dim-5"]) }, { intent: "info", design: "ghost", class: e(["text-info", "hover:bg-info/dim-5", "enabled:active:bg-info/dim-5", "focus-visible:bg-info/dim-5"]) }, { intent: "neutral", design: "ghost", class: e(["text-neutral", "hover:bg-neutral/dim-5", "enabled:active:bg-neutral/dim-5", "focus-visible:bg-neutral/dim-5"]) }, { intent: "surface", design: "ghost", class: e(["text-surface", "hover:bg-surface/dim-5", "enabled:active:bg-surface/dim-5", "focus-visible:bg-surface/dim-5"]) }], V = [{ intent: "main", design: "outlined", class: e(["hover:bg-main/dim-5", "enabled:active:bg-main/dim-5", "focus-visible:bg-main/dim-5", "text-main"]) }, { intent: "support", design: "outlined", class: e(["hover:bg-support/dim-5", "enabled:active:bg-support/dim-5", "focus-visible:bg-support/dim-5", "text-support"]) }, { intent: "accent", design: "outlined", class: e(["hover:bg-accent/dim-5", "enabled:active:bg-accent/dim-5", "focus-visible:bg-accent/dim-5", "text-accent"]) }, { intent: "basic", design: "outlined", class: e(["hover:bg-basic/dim-5", "enabled:active:bg-basic/dim-5", "focus-visible:bg-basic/dim-5", "text-basic"]) }, { intent: "success", design: "outlined", class: e(["hover:bg-success/dim-5", "enabled:active:bg-success/dim-5", "focus-visible:bg-success/dim-5", "text-success"]) }, { intent: "alert", design: "outlined", class: e(["hover:bg-alert/dim-5", "enabled:active:bg-alert/dim-5", "focus-visible:bg-alert/dim-5", "text-alert"]) }, { intent: "danger", design: "outlined", class: e(["hover:bg-error/dim-5", "enabled:active:bg-error/dim-5", "focus-visible:bg-error/dim-5", "text-error"]) }, { intent: "info", design: "outlined", class: e(["hover:bg-info/dim-5", "enabled:active:bg-info/dim-5", "focus-visible:bg-info/dim-5", "text-info"]) }, { intent: "neutral", design: "outlined", class: e(["hover:bg-neutral/dim-5", "enabled:active:bg-neutral/dim-5", "focus-visible:bg-neutral/dim-5", "text-neutral"]) }, { intent: "surface", design: "outlined", class: e(["hover:bg-surface/dim-5", "enabled:active:bg-surface/dim-5", "focus-visible:bg-surface/dim-5", "text-surface"]) }], B = [{ intent: "main", design: "tinted", class: e(["bg-main-container", "text-on-main-container", "hover:bg-main-container-hovered", "enabled:active:bg-main-container-pressed", "focus-visible:bg-main-container-focused"]) }, { intent: "support", design: "tinted", class: e(["bg-support-container", "text-on-support-container", "hover:bg-support-container-hovered", "enabled:active:bg-support-container-pressed", "focus-visible:bg-support-container-focused"]) }, { intent: "accent", design: "tinted", class: e(["bg-accent-container", "text-on-accent-container", "hover:bg-accent-container-hovered", "enabled:active:bg-accent-container-pressed", "focus-visible:bg-accent-container-focused"]) }, { intent: "basic", design: "tinted", class: e(["bg-basic-container", "text-on-basic-container", "hover:bg-basic-container-hovered", "enabled:active:bg-basic-container-pressed", "focus-visible:bg-basic-container-focused"]) }, { intent: "success", design: "tinted", class: e(["bg-success-container", "text-on-success-container", "hover:bg-success-container-hovered", "enabled:active:bg-success-container-pressed", "focus-visible:bg-success-container-focused"]) }, { intent: "alert", design: "tinted", class: e(["bg-alert-container", "text-on-alert-container", "hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-pressed", "focus-visible:bg-alert-container-focused"]) }, { intent: "danger", design: "tinted", class: e(["bg-error-container", "text-on-error-container", "hover:bg-error-container-hovered", "enabled:active:bg-error-container-pressed", "focus-visible:bg-error-container-focused"]) }, { intent: "info", design: "tinted", class: e(["bg-info-container", "text-on-info-container", "hover:bg-info-container-hovered", "enabled:active:bg-info-container-pressed", "focus-visible:bg-info-container-focused"]) }, { intent: "neutral", design: "tinted", class: e(["bg-neutral-container", "text-on-neutral-container", "hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-pressed", "focus-visible:bg-neutral-container-focused"]) }, { intent: "surface", design: "tinted", class: e(["bg-surface", "text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], C = [{ intent: "main", design: "contrast", class: e(["text-main", "hover:bg-main-container-hovered", "enabled:active:bg-main-container-pressed", "focus-visible:bg-main-container-focused"]) }, { intent: "support", design: "contrast", class: e(["text-support", "hover:bg-support-container-hovered", "enabled:active:bg-support-container-pressed", "focus-visible:bg-support-container-focused"]) }, { intent: "accent", design: "contrast", class: e(["text-accent", "hover:bg-accent-container-hovered", "enabled:active:bg-accent-container-pressed", "focus-visible:bg-accent-container-focused"]) }, { intent: "basic", design: "contrast", class: e(["text-basic", "hover:bg-basic-container-hovered", "enabled:active:bg-basic-container-pressed", "focus-visible:bg-basic-container-focused"]) }, { intent: "success", design: "contrast", class: e(["text-success", "hover:bg-success-container-hovered", "enabled:active:bg-success-container-pressed", "focus-visible:bg-success-container-focused"]) }, { intent: "alert", design: "contrast", class: e(["text-alert", "hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-pressed", "focus-visible:bg-alert-container-focused"]) }, { intent: "danger", design: "contrast", class: e(["text-error", "hover:bg-error-container-hovered", "enabled:active:bg-error-container-pressed", "focus-visible:bg-error-container-focused"]) }, { intent: "info", design: "contrast", class: e(["text-info", "hover:bg-info-container-hovered", "enabled:active:bg-info-container-pressed", "focus-visible:bg-info-container-focused"]) }, { intent: "neutral", design: "contrast", class: e(["text-neutral", "hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-pressed", "focus-visible:bg-neutral-container-focused"]) }, { intent: "surface", design: "contrast", class: e(["text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], D = k(["u-shadow-border-transition", "box-border inline-flex items-center justify-center gap-md whitespace-nowrap", "px-lg", "text-body-1 font-bold", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-high [&:not(:focus-visible)]:ring-inset"], { variants: { design: a({ filled: [], outlined: ["bg-transparent", "ring-1", "ring-current"], tinted: [], ghost: [], contrast: ["bg-surface"] }), intent: a({ main: [], support: [], accent: [], basic: [], success: [], alert: [], danger: [], info: [], neutral: [], surface: [] }), size: a({ sm: ["min-w-sz-32", "h-sz-32"], md: ["min-w-sz-44", "h-sz-44"], lg: ["min-w-sz-56", "h-sz-56"] }), shape: a({ rounded: ["rounded-lg"], square: ["rounded-none"], pill: ["rounded-full"] }), disabled: { true: ["cursor-not-allowed", "opacity-dim-3"] } }, compoundVariants: [...L, ...V, ...B, ...P, ...C], defaultVariants: { design: "filled", intent: "main", size: "md", shape: "rounded" } }), O = ["onClick", "onMouseDown", "onMouseUp", "onMouseEnter", "onMouseLeave", "onMouseOver", "onMouseOut", "onKeyDown", "onKeyPress", "onKeyUp", "onSubmit"], U = n.forwardRef(({ children: u, design: v = "filled", disabled: r = !1, intent: f = "main", isLoading: i = !1, loadingLabel: o, loadingText: t, shape: m = "rounded", size: p = "md", spinnerPlacement: d = "left", asChild: b, className: h, ...x }, w) => {
-  const y = b ? N : "button", c = !!r || i, z = K(() => {
-    const s = {};
-    return c && O.forEach((E) => s[E] = void 0), s;
+const P = [{ intent: "main", design: "filled", class: e(["bg-main", "text-on-main", "hover:bg-main-hovered", "enabled:active:bg-main-pressed", "focus-visible:bg-main-focused"]) }, { intent: "support", design: "filled", class: e(["bg-support", "text-on-support", "hover:bg-support-hovered", "enabled:active:bg-support-pressed", "focus-visible:bg-support-focused"]) }, { intent: "accent", design: "filled", class: e(["bg-accent", "text-on-accent", "hover:bg-accent-hovered", "enabled:active:bg-accent-pressed", "focus-visible:bg-accent-focused"]) }, { intent: "basic", design: "filled", class: e(["bg-basic", "text-on-basic", "hover:bg-basic-hovered", "enabled:active:bg-basic-pressed", "focus-visible:bg-basic-focused"]) }, { intent: "success", design: "filled", class: e(["bg-success", "text-on-success", "hover:bg-success-hovered", "enabled:active:bg-success-pressed", "focus-visible:bg-success-focused"]) }, { intent: "alert", design: "filled", class: e(["bg-alert", "text-on-alert", "hover:bg-alert-hovered", "enabled:active:bg-alert-pressed", "focus-visible:bg-alert-focused"]) }, { intent: "danger", design: "filled", class: e(["text-on-error bg-error", "hover:bg-error-hovered enabled:active:bg-error-pressed", "focus-visible:bg-error-focused"]) }, { intent: "info", design: "filled", class: e(["text-on-error bg-info", "hover:bg-info-hovered enabled:active:bg-info-pressed", "focus-visible:bg-info-focused"]) }, { intent: "neutral", design: "filled", class: e(["bg-neutral", "text-on-neutral", "hover:bg-neutral-hovered", "enabled:active:bg-neutral-pressed", "focus-visible:bg-neutral-focused"]) }, { intent: "surface", design: "filled", class: e(["bg-surface", "text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], V = [{ intent: "main", design: "ghost", class: e(["text-main", "hover:bg-main/dim-5", "enabled:active:bg-main/dim-5", "focus-visible:bg-main/dim-5"]) }, { intent: "support", design: "ghost", class: e(["text-support", "hover:bg-support/dim-5", "enabled:active:bg-support/dim-5", "focus-visible:bg-support/dim-5"]) }, { intent: "accent", design: "ghost", class: e(["text-accent", "hover:bg-accent/dim-5", "enabled:active:bg-accent/dim-5", "focus-visible:bg-accent/dim-5"]) }, { intent: "basic", design: "ghost", class: e(["text-basic", "hover:bg-basic/dim-5", "enabled:active:bg-basic/dim-5", "focus-visible:bg-basic/dim-5"]) }, { intent: "success", design: "ghost", class: e(["text-success", "hover:bg-success/dim-5", "enabled:active:bg-success/dim-5", "focus-visible:bg-success/dim-5"]) }, { intent: "alert", design: "ghost", class: e(["text-alert", "hover:bg-alert/dim-5", "enabled:active:bg-alert/dim-5", "focus-visible:bg-alert/dim-5"]) }, { intent: "danger", design: "ghost", class: e(["text-error", "hover:bg-error/dim-5", "enabled:active:bg-error/dim-5", "focus-visible:bg-error/dim-5"]) }, { intent: "info", design: "ghost", class: e(["text-info", "hover:bg-info/dim-5", "enabled:active:bg-info/dim-5", "focus-visible:bg-info/dim-5"]) }, { intent: "neutral", design: "ghost", class: e(["text-neutral", "hover:bg-neutral/dim-5", "enabled:active:bg-neutral/dim-5", "focus-visible:bg-neutral/dim-5"]) }, { intent: "surface", design: "ghost", class: e(["text-surface", "hover:bg-surface/dim-5", "enabled:active:bg-surface/dim-5", "focus-visible:bg-surface/dim-5"]) }], B = [{ intent: "main", design: "outlined", class: e(["hover:bg-main/dim-5", "enabled:active:bg-main/dim-5", "focus-visible:bg-main/dim-5", "text-main"]) }, { intent: "support", design: "outlined", class: e(["hover:bg-support/dim-5", "enabled:active:bg-support/dim-5", "focus-visible:bg-support/dim-5", "text-support"]) }, { intent: "accent", design: "outlined", class: e(["hover:bg-accent/dim-5", "enabled:active:bg-accent/dim-5", "focus-visible:bg-accent/dim-5", "text-accent"]) }, { intent: "basic", design: "outlined", class: e(["hover:bg-basic/dim-5", "enabled:active:bg-basic/dim-5", "focus-visible:bg-basic/dim-5", "text-basic"]) }, { intent: "success", design: "outlined", class: e(["hover:bg-success/dim-5", "enabled:active:bg-success/dim-5", "focus-visible:bg-success/dim-5", "text-success"]) }, { intent: "alert", design: "outlined", class: e(["hover:bg-alert/dim-5", "enabled:active:bg-alert/dim-5", "focus-visible:bg-alert/dim-5", "text-alert"]) }, { intent: "danger", design: "outlined", class: e(["hover:bg-error/dim-5", "enabled:active:bg-error/dim-5", "focus-visible:bg-error/dim-5", "text-error"]) }, { intent: "info", design: "outlined", class: e(["hover:bg-info/dim-5", "enabled:active:bg-info/dim-5", "focus-visible:bg-info/dim-5", "text-info"]) }, { intent: "neutral", design: "outlined", class: e(["hover:bg-neutral/dim-5", "enabled:active:bg-neutral/dim-5", "focus-visible:bg-neutral/dim-5", "text-neutral"]) }, { intent: "surface", design: "outlined", class: e(["hover:bg-surface/dim-5", "enabled:active:bg-surface/dim-5", "focus-visible:bg-surface/dim-5", "text-surface"]) }], C = [{ intent: "main", design: "tinted", class: e(["bg-main-container", "text-on-main-container", "hover:bg-main-container-hovered", "enabled:active:bg-main-container-pressed", "focus-visible:bg-main-container-focused"]) }, { intent: "support", design: "tinted", class: e(["bg-support-container", "text-on-support-container", "hover:bg-support-container-hovered", "enabled:active:bg-support-container-pressed", "focus-visible:bg-support-container-focused"]) }, { intent: "accent", design: "tinted", class: e(["bg-accent-container", "text-on-accent-container", "hover:bg-accent-container-hovered", "enabled:active:bg-accent-container-pressed", "focus-visible:bg-accent-container-focused"]) }, { intent: "basic", design: "tinted", class: e(["bg-basic-container", "text-on-basic-container", "hover:bg-basic-container-hovered", "enabled:active:bg-basic-container-pressed", "focus-visible:bg-basic-container-focused"]) }, { intent: "success", design: "tinted", class: e(["bg-success-container", "text-on-success-container", "hover:bg-success-container-hovered", "enabled:active:bg-success-container-pressed", "focus-visible:bg-success-container-focused"]) }, { intent: "alert", design: "tinted", class: e(["bg-alert-container", "text-on-alert-container", "hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-pressed", "focus-visible:bg-alert-container-focused"]) }, { intent: "danger", design: "tinted", class: e(["bg-error-container", "text-on-error-container", "hover:bg-error-container-hovered", "enabled:active:bg-error-container-pressed", "focus-visible:bg-error-container-focused"]) }, { intent: "info", design: "tinted", class: e(["bg-info-container", "text-on-info-container", "hover:bg-info-container-hovered", "enabled:active:bg-info-container-pressed", "focus-visible:bg-info-container-focused"]) }, { intent: "neutral", design: "tinted", class: e(["bg-neutral-container", "text-on-neutral-container", "hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-pressed", "focus-visible:bg-neutral-container-focused"]) }, { intent: "surface", design: "tinted", class: e(["bg-surface", "text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], D = [{ intent: "main", design: "contrast", class: e(["text-main", "hover:bg-main-container-hovered", "enabled:active:bg-main-container-pressed", "focus-visible:bg-main-container-focused"]) }, { intent: "support", design: "contrast", class: e(["text-support", "hover:bg-support-container-hovered", "enabled:active:bg-support-container-pressed", "focus-visible:bg-support-container-focused"]) }, { intent: "accent", design: "contrast", class: e(["text-accent", "hover:bg-accent-container-hovered", "enabled:active:bg-accent-container-pressed", "focus-visible:bg-accent-container-focused"]) }, { intent: "basic", design: "contrast", class: e(["text-basic", "hover:bg-basic-container-hovered", "enabled:active:bg-basic-container-pressed", "focus-visible:bg-basic-container-focused"]) }, { intent: "success", design: "contrast", class: e(["text-success", "hover:bg-success-container-hovered", "enabled:active:bg-success-container-pressed", "focus-visible:bg-success-container-focused"]) }, { intent: "alert", design: "contrast", class: e(["text-alert", "hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-pressed", "focus-visible:bg-alert-container-focused"]) }, { intent: "danger", design: "contrast", class: e(["text-error", "hover:bg-error-container-hovered", "enabled:active:bg-error-container-pressed", "focus-visible:bg-error-container-focused"]) }, { intent: "info", design: "contrast", class: e(["text-info", "hover:bg-info-container-hovered", "enabled:active:bg-info-container-pressed", "focus-visible:bg-info-container-focused"]) }, { intent: "neutral", design: "contrast", class: e(["text-neutral", "hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-pressed", "focus-visible:bg-neutral-container-focused"]) }, { intent: "surface", design: "contrast", class: e(["text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], O = k(["u-shadow-border-transition", "box-border inline-flex items-center justify-center gap-md whitespace-nowrap", "px-lg", "text-body-1 font-bold", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-high [&:not(:focus-visible)]:ring-inset"], { variants: { design: a({ filled: [], outlined: ["bg-transparent", "ring-1", "ring-current"], tinted: [], ghost: [], contrast: ["bg-surface"] }), intent: a({ main: [], support: [], accent: [], basic: [], success: [], alert: [], danger: [], info: [], neutral: [], surface: [] }), size: a({ sm: ["min-w-sz-32", "h-sz-32"], md: ["min-w-sz-44", "h-sz-44"], lg: ["min-w-sz-56", "h-sz-56"] }), shape: a({ rounded: ["rounded-lg"], square: ["rounded-none"], pill: ["rounded-full"] }), disabled: { true: ["cursor-not-allowed", "opacity-dim-3"] } }, compoundVariants: [...P, ...B, ...C, ...V, ...D], defaultVariants: { design: "filled", intent: "main", size: "md", shape: "rounded" } }), U = ["onClick", "onMouseDown", "onMouseUp", "onMouseEnter", "onMouseLeave", "onMouseOver", "onMouseOut", "onKeyDown", "onKeyPress", "onKeyUp", "onSubmit"], j = K(({ children: u, design: v = "filled", disabled: r = !1, intent: f = "main", isLoading: i = !1, loadingLabel: o, loadingText: t, shape: m = "rounded", size: p = "md", spinnerPlacement: d = "left", asChild: b, className: h, ...x }, w) => {
+  const z = b ? N : "button", c = !!r || i, y = L(() => {
+    const n = {};
+    return c && U.forEach((E) => n[E] = void 0), n;
   }, [c]), l = { size: "current", className: t ? "inline-block" : "absolute", ...o && { "aria-label": o } };
-  return n.createElement(y, { "data-spark-component": "button", ref: w, className: D({ className: h, design: v, disabled: c, intent: f, shape: m, size: p }), disabled: !!r, "aria-busy": i, "aria-live": i ? "assertive" : "off", ...x, ...z }, M(b, u, (s) => i ? n.createElement(n.Fragment, null, d === "left" && n.createElement(g, { ...l }), t && t, d === "right" && n.createElement(g, { ...l }), n.createElement("div", { "aria-hidden": !0, className: S("inline-flex gap-md", t ? "hidden" : "opacity-0") }, s)) : s));
+  return s.createElement(z, { "data-spark-component": "button", ref: w, className: O({ className: h, design: v, disabled: c, intent: f, shape: m, size: p }), disabled: !!r, "aria-busy": i, "aria-live": i ? "assertive" : "off", ...x, ...y }, M(b, u, (n) => i ? s.createElement(s.Fragment, null, d === "left" && s.createElement(g, { ...l }), t && t, d === "right" && s.createElement(g, { ...l }), s.createElement("div", { "aria-hidden": !0, className: S("inline-flex gap-md", t ? "hidden" : "opacity-0") }, n)) : n));
 });
-U.displayName = "Button";
+j.displayName = "Button";
 export {
-  U as Button
+  j as Button
 };

package/dist/public/docgen.json

@@ -0,0 +1,253 @@
+{
+  "Button": {
+    "tags": {},
+    "description": "",
+    "displayName": "Button",
+    "methods": [],
+    "props": {
+      "asChild": {
+        "defaultValue": null,
+        "description": "Change the component to the HTML tag or custom component of the only child.",
+        "name": "asChild",
+        "parent": {
+          "fileName": "button/src/Button.tsx",
+          "name": "ButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "button/src/Button.tsx",
+            "name": "ButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "isLoading": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "Display a spinner to indicate to the user that the button is loading something after they interacted with it.",
+        "name": "isLoading",
+        "parent": {
+          "fileName": "button/src/Button.tsx",
+          "name": "ButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "button/src/Button.tsx",
+            "name": "ButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "loadingLabel": {
+        "defaultValue": null,
+        "description": "If your loading state should only display a spinner, it's better to specify a label for it (a11y).",
+        "name": "loadingLabel",
+        "parent": {
+          "fileName": "button/src/Button.tsx",
+          "name": "ButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "button/src/Button.tsx",
+            "name": "ButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "loadingText": {
+        "defaultValue": null,
+        "description": "If your loading state should also display a label, you can use this prop instead of `loadingLabel`.\n**Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**",
+        "name": "loadingText",
+        "parent": {
+          "fileName": "button/src/Button.tsx",
+          "name": "ButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "button/src/Button.tsx",
+            "name": "ButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "spinnerPlacement": {
+        "defaultValue": {
+          "value": "left"
+        },
+        "description": "",
+        "name": "spinnerPlacement",
+        "parent": {
+          "fileName": "button/src/Button.tsx",
+          "name": "ButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "button/src/Button.tsx",
+            "name": "ButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"left\" | \"right\"",
+          "value": [
+            {
+              "value": "\"left\""
+            },
+            {
+              "value": "\"right\""
+            }
+          ]
+        }
+      },
+      "disabled": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "Disable the button, preventing user interaction and adding opacity.",
+        "name": "disabled",
+        "declarations": [],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "design": {
+        "defaultValue": {
+          "value": "filled"
+        },
+        "description": "Main style of the button.\n\n- `filled`: Button will be plain.\n\n- `outlined`: Button will be transparent with an outline.\n\n- `tinted`: Button will be filled but using a lighter color scheme.\n\n- `ghost`: Button will look like a link. No borders, plain text.\n\n- `contrast`: Button will be surface filled. No borders, plain text.",
+        "name": "design",
+        "declarations": [],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"filled\" | \"outlined\" | \"tinted\" | \"ghost\" | \"contrast\"",
+          "value": [
+            {
+              "value": "\"filled\""
+            },
+            {
+              "value": "\"outlined\""
+            },
+            {
+              "value": "\"tinted\""
+            },
+            {
+              "value": "\"ghost\""
+            },
+            {
+              "value": "\"contrast\""
+            }
+          ]
+        }
+      },
+      "intent": {
+        "defaultValue": {
+          "value": "main"
+        },
+        "description": "Color scheme of the button.",
+        "name": "intent",
+        "declarations": [],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"main\" | \"support\" | \"accent\" | \"basic\" | \"success\" | \"alert\" | \"danger\" | \"info\" | \"neutral\" | \"surface\"",
+          "value": [
+            {
+              "value": "\"main\""
+            },
+            {
+              "value": "\"support\""
+            },
+            {
+              "value": "\"accent\""
+            },
+            {
+              "value": "\"basic\""
+            },
+            {
+              "value": "\"success\""
+            },
+            {
+              "value": "\"alert\""
+            },
+            {
+              "value": "\"danger\""
+            },
+            {
+              "value": "\"info\""
+            },
+            {
+              "value": "\"neutral\""
+            },
+            {
+              "value": "\"surface\""
+            }
+          ]
+        }
+      },
+      "shape": {
+        "defaultValue": {
+          "value": "rounded"
+        },
+        "description": "",
+        "name": "shape",
+        "declarations": [],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"rounded\" | \"square\" | \"pill\"",
+          "value": [
+            {
+              "value": "\"rounded\""
+            },
+            {
+              "value": "\"square\""
+            },
+            {
+              "value": "\"pill\""
+            }
+          ]
+        }
+      },
+      "size": {
+        "defaultValue": {
+          "value": "md"
+        },
+        "description": "",
+        "name": "size",
+        "declarations": [],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"sm\" | \"md\" | \"lg\"",
+          "value": [
+            {
+              "value": "\"sm\""
+            },
+            {
+              "value": "\"md\""
+            },
+            {
+              "value": "\"lg\""
+            }
+          ]
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/button",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "description": "Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.",
   "publishConfig": {
     "access": "public"
@@ -25,11 +25,11 @@
   "dependencies": {
     "@spark-ui/internal-utils": "^2.1.2",
     "@spark-ui/slot": "^1.6.6",
-    "@spark-ui/spinner": "^2.1.5",
+    "@spark-ui/spinner": "^2.1.6",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
-    "@spark-ui/theme-utils": "^3.0.2",
+    "@spark-ui/theme-utils": "^4.0.0",
     "react": "16.8 || ^17.0 || ^18.0",
     "react-dom": "^16.8 || ^17.0 || ^18.0",
     "tailwindcss": "^3.0.0"
@@ -44,5 +44,5 @@
   },
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
-  "gitHead": "4cdee86bb86f13da6e349580b97b8b577000e59c"
+  "gitHead": "e98a5abd16667218cead4b366bb0e69435d7f8ed"
 }