@spark-ui/button 7.3.7 → 8.0.1

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.
 
+## [8.0.1](https://github.com/adevinta/spark/compare/v8.0.0...v8.0.1) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/button
+
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/button
+
 ## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/button

package/dist/Button.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, Ref } from 'react';
 import { type ButtonStylesProps } from './Button.styles';
 export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>, ButtonStylesProps {
     /**
@@ -18,5 +18,9 @@ export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'd
      * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**
      */
     loadingText?: string;
+    ref?: Ref<HTMLButtonElement>;
 }
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: {
+    ({ children, design, disabled, intent, isLoading, loadingLabel, loadingText, shape, size, asChild, className, ref, ...others }: ButtonProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("@spark-ui/slot"),k=require("@spark-ui/spinner"),g=require("class-variance-authority"),t=require("react"),e=require("@spark-ui/internal-utils"),q=[{intent:"main",design:"filled",class:e.tw(["bg-main","text-on-main","hover:bg-main-hovered","enabled:active:bg-main-hovered","focus-visible:bg-main-hovered"])},{intent:"support",design:"filled",class:e.tw(["bg-support","text-on-support","hover:bg-support-hovered","enabled:active:bg-support-hovered","focus-visible:bg-support-hovered"])},{intent:"accent",design:"filled",class:e.tw(["bg-accent","text-on-accent","hover:bg-accent-hovered","enabled:active:bg-accent-hovered","focus-visible:bg-accent-hovered"])},{intent:"basic",design:"filled",class:e.tw(["bg-basic","text-on-basic","hover:bg-basic-hovered","enabled:active:bg-basic-hovered","focus-visible:bg-basic-hovered"])},{intent:"success",design:"filled",class:e.tw(["bg-success","text-on-success","hover:bg-success-hovered","enabled:active:bg-success-hovered","focus-visible:bg-success-hovered"])},{intent:"alert",design:"filled",class:e.tw(["bg-alert","text-on-alert","hover:bg-alert-hovered","enabled:active:bg-alert-hovered","focus-visible:bg-alert-hovered"])},{intent:"danger",design:"filled",class:e.tw(["text-on-error bg-error","hover:bg-error-hovered enabled:active:bg-error-hovered","focus-visible:bg-error-hovered"])},{intent:"info",design:"filled",class:e.tw(["text-on-error bg-info","hover:bg-info-hovered enabled:active:bg-info-hovered","focus-visible:bg-info-hovered"])},{intent:"neutral",design:"filled",class:e.tw(["bg-neutral","text-on-neutral","hover:bg-neutral-hovered","enabled:active:bg-neutral-hovered","focus-visible:bg-neutral-hovered"])},{intent:"surface",design:"filled",class:e.tw(["bg-surface","text-on-surface","hover:bg-surface-hovered","enabled:active:bg-surface-hovered","focus-visible:bg-surface-hovered"])}],E=[{intent:"main",design:"ghost",class:e.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["text-surface","hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5"])}],N=[{intent:"main",design:"outlined",class:e.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5","text-surface"])}],S=[{intent:"main",design:"tinted",class:e.tw(["bg-main-container","text-on-main-container","hover:bg-main-container-hovered","enabled:active:bg-main-container-hovered","focus-visible:bg-main-container-hovered"])},{intent:"support",design:"tinted",class:e.tw(["bg-support-container","text-on-support-container","hover:bg-support-container-hovered","enabled:active:bg-support-container-hovered","focus-visible:bg-support-container-hovered"])},{intent:"accent",design:"tinted",class:e.tw(["bg-accent-container","text-on-accent-container","hover:bg-accent-container-hovered","enabled:active:bg-accent-container-hovered","focus-visible:bg-accent-container-hovered"])},{intent:"basic",design:"tinted",class:e.tw(["bg-basic-container","text-on-basic-container","hover:bg-basic-container-hovered","enabled:active:bg-basic-container-hovered","focus-visible:bg-basic-container-hovered"])},{intent:"success",design:"tinted",class:e.tw(["bg-success-container","text-on-success-container","hover:bg-success-container-hovered","enabled:active:bg-success-container-hovered","focus-visible:bg-success-container-hovered"])},{intent:"alert",design:"tinted",class:e.tw(["bg-alert-container","text-on-alert-container","hover:bg-alert-container-hovered","enabled:active:bg-alert-container-hovered","focus-visible:bg-alert-container-hovered"])},{intent:"danger",design:"tinted",class:e.tw(["bg-error-container","text-on-error-container","hover:bg-error-container-hovered","enabled:active:bg-error-container-hovered","focus-visible:bg-error-container-hovered"])},{intent:"info",design:"tinted",class:e.tw(["bg-info-container","text-on-info-container","hover:bg-info-container-hovered","enabled:active:bg-info-container-hovered","focus-visible:bg-info-container-hovered"])},{intent:"neutral",design:"tinted",class:e.tw(["bg-neutral-container","text-on-neutral-container","hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-hovered","focus-visible:bg-neutral-container-hovered"])},{intent:"surface",design:"tinted",class:e.tw(["bg-surface","text-on-surface","hover:bg-surface-hovered","enabled:active:bg-surface-hovered","focus-visible:bg-surface-hovered"])}],V=[{intent:"main",design:"contrast",class:e.tw(["text-main","hover:bg-main-container-hovered","enabled:active:bg-main-container-hovered","focus-visible:bg-main-container-hovered"])},{intent:"support",design:"contrast",class:e.tw(["text-support","hover:bg-support-container-hovered","enabled:active:bg-support-container-hovered","focus-visible:bg-support-container-hovered"])},{intent:"accent",design:"contrast",class:e.tw(["text-accent","hover:bg-accent-container-hovered","enabled:active:bg-accent-container-hovered","focus-visible:bg-accent-container-hovered"])},{intent:"basic",design:"contrast",class:e.tw(["text-basic","hover:bg-basic-container-hovered","enabled:active:bg-basic-container-hovered","focus-visible:bg-basic-container-hovered"])},{intent:"success",design:"contrast",class:e.tw(["text-success","hover:bg-success-container-hovered","enabled:active:bg-success-container-hovered","focus-visible:bg-success-container-hovered"])},{intent:"alert",design:"contrast",class:e.tw(["text-alert","hover:bg-alert-container-hovered","enabled:active:bg-alert-container-hovered","focus-visible:bg-alert-container-hovered"])},{intent:"danger",design:"contrast",class:e.tw(["text-error","hover:bg-error-container-hovered","enabled:active:bg-error-container-hovered","focus-visible:bg-error-container-hovered"])},{intent:"info",design:"contrast",class:e.tw(["text-info","hover:bg-info-container-hovered","enabled:active:bg-info-container-hovered","focus-visible:bg-info-container-hovered"])},{intent:"neutral",design:"contrast",class:e.tw(["text-neutral","hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-hovered","focus-visible:bg-neutral-container-hovered"])},{intent:"surface",design:"contrast",class:e.tw(["text-on-surface","hover:bg-surface-hovered","enabled:active:bg-surface-hovered","focus-visible:bg-surface-hovered"])}],K=g.cva(["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:u-ring [&:not(:focus-visible)]:ring-inset"],{variants:{design:e.makeVariants({filled:[],outlined:["bg-transparent","border-sm","border-current"],tinted:[],ghost:[],contrast:["bg-surface"]}),intent:e.makeVariants({main:[],support:[],accent:[],basic:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),size:e.makeVariants({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:e.makeVariants({rounded:["rounded-lg"],square:["rounded-none"],pill:["rounded-full"]}),disabled:{true:["cursor-not-allowed","opacity-dim-3"]}},compoundVariants:[...q,...N,...S,...E,...V],defaultVariants:{design:"filled",intent:"main",size:"md",shape:"rounded"}}),L=["onClick","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","onMouseOver","onMouseOut","onKeyDown","onKeyPress","onKeyUp","onSubmit"],l=t.forwardRef(({children:v,design:u="filled",disabled:r=!1,intent:h="main",isLoading:i=!1,loadingLabel:o,loadingText:s,shape:f="rounded",size:m="md",asChild:c,className:p,...w},x)=>{const d=c?b.Slot:"button",a=!!r||i,y=t.useMemo(()=>{const n={};return a&&L.forEach(M=>n[M]=void 0),n},[a]),z={size:"current",className:s?"inline-block":"absolute",...o&&{"aria-label":o}};return t.createElement(d,{"data-spark-component":"button",...d==="button"&&{type:"button"},ref:x,className:K({className:p,design:u,disabled:a,intent:h,shape:f,size:m}),disabled:!!r,"aria-busy":i,"aria-live":i?"assertive":"off",...w,...y},b.wrapPolymorphicSlot(c,v,n=>i?t.createElement(t.Fragment,null,t.createElement(k.Spinner,{...z}),s&&s,t.createElement("div",{"aria-hidden":!0,className:g.cx("inline-flex gap-md",s?"hidden":"opacity-0")},n)):n))});l.displayName="Button",exports.Button=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("@spark-ui/slot"),k=require("@spark-ui/spinner"),g=require("class-variance-authority"),t=require("react"),e=require("@spark-ui/internal-utils"),q=[{intent:"main",design:"filled",class:e.tw(["bg-main","text-on-main","hover:bg-main-hovered","enabled:active:bg-main-hovered","focus-visible:bg-main-hovered"])},{intent:"support",design:"filled",class:e.tw(["bg-support","text-on-support","hover:bg-support-hovered","enabled:active:bg-support-hovered","focus-visible:bg-support-hovered"])},{intent:"accent",design:"filled",class:e.tw(["bg-accent","text-on-accent","hover:bg-accent-hovered","enabled:active:bg-accent-hovered","focus-visible:bg-accent-hovered"])},{intent:"basic",design:"filled",class:e.tw(["bg-basic","text-on-basic","hover:bg-basic-hovered","enabled:active:bg-basic-hovered","focus-visible:bg-basic-hovered"])},{intent:"success",design:"filled",class:e.tw(["bg-success","text-on-success","hover:bg-success-hovered","enabled:active:bg-success-hovered","focus-visible:bg-success-hovered"])},{intent:"alert",design:"filled",class:e.tw(["bg-alert","text-on-alert","hover:bg-alert-hovered","enabled:active:bg-alert-hovered","focus-visible:bg-alert-hovered"])},{intent:"danger",design:"filled",class:e.tw(["text-on-error bg-error","hover:bg-error-hovered enabled:active:bg-error-hovered","focus-visible:bg-error-hovered"])},{intent:"info",design:"filled",class:e.tw(["text-on-error bg-info","hover:bg-info-hovered enabled:active:bg-info-hovered","focus-visible:bg-info-hovered"])},{intent:"neutral",design:"filled",class:e.tw(["bg-neutral","text-on-neutral","hover:bg-neutral-hovered","enabled:active:bg-neutral-hovered","focus-visible:bg-neutral-hovered"])},{intent:"surface",design:"filled",class:e.tw(["bg-surface","text-on-surface","hover:bg-surface-hovered","enabled:active:bg-surface-hovered","focus-visible:bg-surface-hovered"])}],E=[{intent:"main",design:"ghost",class:e.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["text-surface","hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5"])}],N=[{intent:"main",design:"outlined",class:e.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5","text-surface"])}],S=[{intent:"main",design:"tinted",class:e.tw(["bg-main-container","text-on-main-container","hover:bg-main-container-hovered","enabled:active:bg-main-container-hovered","focus-visible:bg-main-container-hovered"])},{intent:"support",design:"tinted",class:e.tw(["bg-support-container","text-on-support-container","hover:bg-support-container-hovered","enabled:active:bg-support-container-hovered","focus-visible:bg-support-container-hovered"])},{intent:"accent",design:"tinted",class:e.tw(["bg-accent-container","text-on-accent-container","hover:bg-accent-container-hovered","enabled:active:bg-accent-container-hovered","focus-visible:bg-accent-container-hovered"])},{intent:"basic",design:"tinted",class:e.tw(["bg-basic-container","text-on-basic-container","hover:bg-basic-container-hovered","enabled:active:bg-basic-container-hovered","focus-visible:bg-basic-container-hovered"])},{intent:"success",design:"tinted",class:e.tw(["bg-success-container","text-on-success-container","hover:bg-success-container-hovered","enabled:active:bg-success-container-hovered","focus-visible:bg-success-container-hovered"])},{intent:"alert",design:"tinted",class:e.tw(["bg-alert-container","text-on-alert-container","hover:bg-alert-container-hovered","enabled:active:bg-alert-container-hovered","focus-visible:bg-alert-container-hovered"])},{intent:"danger",design:"tinted",class:e.tw(["bg-error-container","text-on-error-container","hover:bg-error-container-hovered","enabled:active:bg-error-container-hovered","focus-visible:bg-error-container-hovered"])},{intent:"info",design:"tinted",class:e.tw(["bg-info-container","text-on-info-container","hover:bg-info-container-hovered","enabled:active:bg-info-container-hovered","focus-visible:bg-info-container-hovered"])},{intent:"neutral",design:"tinted",class:e.tw(["bg-neutral-container","text-on-neutral-container","hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-hovered","focus-visible:bg-neutral-container-hovered"])},{intent:"surface",design:"tinted",class:e.tw(["bg-surface","text-on-surface","hover:bg-surface-hovered","enabled:active:bg-surface-hovered","focus-visible:bg-surface-hovered"])}],V=[{intent:"main",design:"contrast",class:e.tw(["text-main","hover:bg-main-container-hovered","enabled:active:bg-main-container-hovered","focus-visible:bg-main-container-hovered"])},{intent:"support",design:"contrast",class:e.tw(["text-support","hover:bg-support-container-hovered","enabled:active:bg-support-container-hovered","focus-visible:bg-support-container-hovered"])},{intent:"accent",design:"contrast",class:e.tw(["text-accent","hover:bg-accent-container-hovered","enabled:active:bg-accent-container-hovered","focus-visible:bg-accent-container-hovered"])},{intent:"basic",design:"contrast",class:e.tw(["text-basic","hover:bg-basic-container-hovered","enabled:active:bg-basic-container-hovered","focus-visible:bg-basic-container-hovered"])},{intent:"success",design:"contrast",class:e.tw(["text-success","hover:bg-success-container-hovered","enabled:active:bg-success-container-hovered","focus-visible:bg-success-container-hovered"])},{intent:"alert",design:"contrast",class:e.tw(["text-alert","hover:bg-alert-container-hovered","enabled:active:bg-alert-container-hovered","focus-visible:bg-alert-container-hovered"])},{intent:"danger",design:"contrast",class:e.tw(["text-error","hover:bg-error-container-hovered","enabled:active:bg-error-container-hovered","focus-visible:bg-error-container-hovered"])},{intent:"info",design:"contrast",class:e.tw(["text-info","hover:bg-info-container-hovered","enabled:active:bg-info-container-hovered","focus-visible:bg-info-container-hovered"])},{intent:"neutral",design:"contrast",class:e.tw(["text-neutral","hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-hovered","focus-visible:bg-neutral-container-hovered"])},{intent:"surface",design:"contrast",class:e.tw(["text-on-surface","hover:bg-surface-hovered","enabled:active:bg-surface-hovered","focus-visible:bg-surface-hovered"])}],K=g.cva(["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:u-ring [&:not(:focus-visible)]:ring-inset"],{variants:{design:e.makeVariants({filled:[],outlined:["bg-transparent","border-sm","border-current"],tinted:[],ghost:[],contrast:["bg-surface"]}),intent:e.makeVariants({main:[],support:[],accent:[],basic:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),size:e.makeVariants({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:e.makeVariants({rounded:["rounded-lg"],square:["rounded-none"],pill:["rounded-full"]}),disabled:{true:["cursor-not-allowed","opacity-dim-3"]}},compoundVariants:[...q,...N,...S,...E,...V],defaultVariants:{design:"filled",intent:"main",size:"md",shape:"rounded"}}),L=["onClick","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","onMouseOver","onMouseOut","onKeyDown","onKeyPress","onKeyUp","onSubmit"],l=({children:v,design:u="filled",disabled:r=!1,intent:h="main",isLoading:i=!1,loadingLabel:o,loadingText:s,shape:f="rounded",size:m="md",asChild:c,className:p,ref:w,...x})=>{const d=c?b.Slot:"button",a=!!r||i,y=t.useMemo(()=>{const n={};return a&&L.forEach(M=>n[M]=void 0),n},[a]),z={size:"current",className:s?"inline-block":"absolute",...o&&{"aria-label":o}};return t.createElement(d,{"data-spark-component":"button",...d==="button"&&{type:"button"},ref:w,className:K({className:p,design:u,disabled:a,intent:h,shape:f,size:m}),disabled:!!r,"aria-busy":i,"aria-live":i?"assertive":"off",...x,...y},b.wrapPolymorphicSlot(c,v,n=>i?t.createElement(t.Fragment,null,t.createElement(k.Spinner,{...z}),s&&s,t.createElement("div",{"aria-hidden":!0,className:g.cx("inline-flex gap-md",s?"hidden":"opacity-0")},n)):n))};l.displayName="Button",exports.Button=l;

package/dist/index.mjs

@@ -1,16 +1,16 @@
 import { wrapPolymorphicSlot as y, Slot as E } from "@spark-ui/slot";
 import { Spinner as M } from "@spark-ui/spinner";
 import { cva as N, cx as k } from "class-variance-authority";
-import t, { forwardRef as S, useMemo as K } from "react";
+import t, { useMemo as S } 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-hovered", "focus-visible:bg-main-hovered"]) }, { intent: "support", design: "filled", class: e(["bg-support", "text-on-support", "hover:bg-support-hovered", "enabled:active:bg-support-hovered", "focus-visible:bg-support-hovered"]) }, { intent: "accent", design: "filled", class: e(["bg-accent", "text-on-accent", "hover:bg-accent-hovered", "enabled:active:bg-accent-hovered", "focus-visible:bg-accent-hovered"]) }, { intent: "basic", design: "filled", class: e(["bg-basic", "text-on-basic", "hover:bg-basic-hovered", "enabled:active:bg-basic-hovered", "focus-visible:bg-basic-hovered"]) }, { intent: "success", design: "filled", class: e(["bg-success", "text-on-success", "hover:bg-success-hovered", "enabled:active:bg-success-hovered", "focus-visible:bg-success-hovered"]) }, { intent: "alert", design: "filled", class: e(["bg-alert", "text-on-alert", "hover:bg-alert-hovered", "enabled:active:bg-alert-hovered", "focus-visible:bg-alert-hovered"]) }, { intent: "danger", design: "filled", class: e(["text-on-error bg-error", "hover:bg-error-hovered enabled:active:bg-error-hovered", "focus-visible:bg-error-hovered"]) }, { intent: "info", design: "filled", class: e(["text-on-error bg-info", "hover:bg-info-hovered enabled:active:bg-info-hovered", "focus-visible:bg-info-hovered"]) }, { intent: "neutral", design: "filled", class: e(["bg-neutral", "text-on-neutral", "hover:bg-neutral-hovered", "enabled:active:bg-neutral-hovered", "focus-visible:bg-neutral-hovered"]) }, { intent: "surface", design: "filled", class: e(["bg-surface", "text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-hovered"]) }], 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-hovered", "focus-visible:bg-main-container-hovered"]) }, { intent: "support", design: "tinted", class: e(["bg-support-container", "text-on-support-container", "hover:bg-support-container-hovered", "enabled:active:bg-support-container-hovered", "focus-visible:bg-support-container-hovered"]) }, { intent: "accent", design: "tinted", class: e(["bg-accent-container", "text-on-accent-container", "hover:bg-accent-container-hovered", "enabled:active:bg-accent-container-hovered", "focus-visible:bg-accent-container-hovered"]) }, { intent: "basic", design: "tinted", class: e(["bg-basic-container", "text-on-basic-container", "hover:bg-basic-container-hovered", "enabled:active:bg-basic-container-hovered", "focus-visible:bg-basic-container-hovered"]) }, { intent: "success", design: "tinted", class: e(["bg-success-container", "text-on-success-container", "hover:bg-success-container-hovered", "enabled:active:bg-success-container-hovered", "focus-visible:bg-success-container-hovered"]) }, { intent: "alert", design: "tinted", class: e(["bg-alert-container", "text-on-alert-container", "hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-hovered", "focus-visible:bg-alert-container-hovered"]) }, { intent: "danger", design: "tinted", class: e(["bg-error-container", "text-on-error-container", "hover:bg-error-container-hovered", "enabled:active:bg-error-container-hovered", "focus-visible:bg-error-container-hovered"]) }, { intent: "info", design: "tinted", class: e(["bg-info-container", "text-on-info-container", "hover:bg-info-container-hovered", "enabled:active:bg-info-container-hovered", "focus-visible:bg-info-container-hovered"]) }, { intent: "neutral", design: "tinted", class: e(["bg-neutral-container", "text-on-neutral-container", "hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-hovered", "focus-visible:bg-neutral-container-hovered"]) }, { intent: "surface", design: "tinted", class: e(["bg-surface", "text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-hovered"]) }], D = [{ intent: "main", design: "contrast", class: e(["text-main", "hover:bg-main-container-hovered", "enabled:active:bg-main-container-hovered", "focus-visible:bg-main-container-hovered"]) }, { intent: "support", design: "contrast", class: e(["text-support", "hover:bg-support-container-hovered", "enabled:active:bg-support-container-hovered", "focus-visible:bg-support-container-hovered"]) }, { intent: "accent", design: "contrast", class: e(["text-accent", "hover:bg-accent-container-hovered", "enabled:active:bg-accent-container-hovered", "focus-visible:bg-accent-container-hovered"]) }, { intent: "basic", design: "contrast", class: e(["text-basic", "hover:bg-basic-container-hovered", "enabled:active:bg-basic-container-hovered", "focus-visible:bg-basic-container-hovered"]) }, { intent: "success", design: "contrast", class: e(["text-success", "hover:bg-success-container-hovered", "enabled:active:bg-success-container-hovered", "focus-visible:bg-success-container-hovered"]) }, { intent: "alert", design: "contrast", class: e(["text-alert", "hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-hovered", "focus-visible:bg-alert-container-hovered"]) }, { intent: "danger", design: "contrast", class: e(["text-error", "hover:bg-error-container-hovered", "enabled:active:bg-error-container-hovered", "focus-visible:bg-error-container-hovered"]) }, { intent: "info", design: "contrast", class: e(["text-info", "hover:bg-info-container-hovered", "enabled:active:bg-info-container-hovered", "focus-visible:bg-info-container-hovered"]) }, { intent: "neutral", design: "contrast", class: e(["text-neutral", "hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-hovered", "focus-visible:bg-neutral-container-hovered"]) }, { intent: "surface", design: "contrast", class: e(["text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-hovered"]) }], O = N(["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:u-ring [&:not(:focus-visible)]:ring-inset"], { variants: { design: a({ filled: [], outlined: ["bg-transparent", "border-sm", "border-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, ...B, ...C, ...V, ...D], defaultVariants: { design: "filled", intent: "main", size: "md", shape: "rounded" } }), P = ["onClick", "onMouseDown", "onMouseUp", "onMouseEnter", "onMouseLeave", "onMouseOver", "onMouseOut", "onKeyDown", "onKeyPress", "onKeyUp", "onSubmit"], U = S(({ children: l, design: g = "filled", disabled: o = !1, intent: v = "main", isLoading: i = !1, loadingLabel: c, loadingText: s, shape: u = "rounded", size: h = "md", asChild: d, className: f, ...m }, p) => {
-  const b = d ? E : "button", r = !!o || i, x = K(() => {
+const K = [{ intent: "main", design: "filled", class: e(["bg-main", "text-on-main", "hover:bg-main-hovered", "enabled:active:bg-main-hovered", "focus-visible:bg-main-hovered"]) }, { intent: "support", design: "filled", class: e(["bg-support", "text-on-support", "hover:bg-support-hovered", "enabled:active:bg-support-hovered", "focus-visible:bg-support-hovered"]) }, { intent: "accent", design: "filled", class: e(["bg-accent", "text-on-accent", "hover:bg-accent-hovered", "enabled:active:bg-accent-hovered", "focus-visible:bg-accent-hovered"]) }, { intent: "basic", design: "filled", class: e(["bg-basic", "text-on-basic", "hover:bg-basic-hovered", "enabled:active:bg-basic-hovered", "focus-visible:bg-basic-hovered"]) }, { intent: "success", design: "filled", class: e(["bg-success", "text-on-success", "hover:bg-success-hovered", "enabled:active:bg-success-hovered", "focus-visible:bg-success-hovered"]) }, { intent: "alert", design: "filled", class: e(["bg-alert", "text-on-alert", "hover:bg-alert-hovered", "enabled:active:bg-alert-hovered", "focus-visible:bg-alert-hovered"]) }, { intent: "danger", design: "filled", class: e(["text-on-error bg-error", "hover:bg-error-hovered enabled:active:bg-error-hovered", "focus-visible:bg-error-hovered"]) }, { intent: "info", design: "filled", class: e(["text-on-error bg-info", "hover:bg-info-hovered enabled:active:bg-info-hovered", "focus-visible:bg-info-hovered"]) }, { intent: "neutral", design: "filled", class: e(["bg-neutral", "text-on-neutral", "hover:bg-neutral-hovered", "enabled:active:bg-neutral-hovered", "focus-visible:bg-neutral-hovered"]) }, { intent: "surface", design: "filled", class: e(["bg-surface", "text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-hovered"]) }], L = [{ 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-hovered", "focus-visible:bg-main-container-hovered"]) }, { intent: "support", design: "tinted", class: e(["bg-support-container", "text-on-support-container", "hover:bg-support-container-hovered", "enabled:active:bg-support-container-hovered", "focus-visible:bg-support-container-hovered"]) }, { intent: "accent", design: "tinted", class: e(["bg-accent-container", "text-on-accent-container", "hover:bg-accent-container-hovered", "enabled:active:bg-accent-container-hovered", "focus-visible:bg-accent-container-hovered"]) }, { intent: "basic", design: "tinted", class: e(["bg-basic-container", "text-on-basic-container", "hover:bg-basic-container-hovered", "enabled:active:bg-basic-container-hovered", "focus-visible:bg-basic-container-hovered"]) }, { intent: "success", design: "tinted", class: e(["bg-success-container", "text-on-success-container", "hover:bg-success-container-hovered", "enabled:active:bg-success-container-hovered", "focus-visible:bg-success-container-hovered"]) }, { intent: "alert", design: "tinted", class: e(["bg-alert-container", "text-on-alert-container", "hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-hovered", "focus-visible:bg-alert-container-hovered"]) }, { intent: "danger", design: "tinted", class: e(["bg-error-container", "text-on-error-container", "hover:bg-error-container-hovered", "enabled:active:bg-error-container-hovered", "focus-visible:bg-error-container-hovered"]) }, { intent: "info", design: "tinted", class: e(["bg-info-container", "text-on-info-container", "hover:bg-info-container-hovered", "enabled:active:bg-info-container-hovered", "focus-visible:bg-info-container-hovered"]) }, { intent: "neutral", design: "tinted", class: e(["bg-neutral-container", "text-on-neutral-container", "hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-hovered", "focus-visible:bg-neutral-container-hovered"]) }, { intent: "surface", design: "tinted", class: e(["bg-surface", "text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-hovered"]) }], C = [{ intent: "main", design: "contrast", class: e(["text-main", "hover:bg-main-container-hovered", "enabled:active:bg-main-container-hovered", "focus-visible:bg-main-container-hovered"]) }, { intent: "support", design: "contrast", class: e(["text-support", "hover:bg-support-container-hovered", "enabled:active:bg-support-container-hovered", "focus-visible:bg-support-container-hovered"]) }, { intent: "accent", design: "contrast", class: e(["text-accent", "hover:bg-accent-container-hovered", "enabled:active:bg-accent-container-hovered", "focus-visible:bg-accent-container-hovered"]) }, { intent: "basic", design: "contrast", class: e(["text-basic", "hover:bg-basic-container-hovered", "enabled:active:bg-basic-container-hovered", "focus-visible:bg-basic-container-hovered"]) }, { intent: "success", design: "contrast", class: e(["text-success", "hover:bg-success-container-hovered", "enabled:active:bg-success-container-hovered", "focus-visible:bg-success-container-hovered"]) }, { intent: "alert", design: "contrast", class: e(["text-alert", "hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-hovered", "focus-visible:bg-alert-container-hovered"]) }, { intent: "danger", design: "contrast", class: e(["text-error", "hover:bg-error-container-hovered", "enabled:active:bg-error-container-hovered", "focus-visible:bg-error-container-hovered"]) }, { intent: "info", design: "contrast", class: e(["text-info", "hover:bg-info-container-hovered", "enabled:active:bg-info-container-hovered", "focus-visible:bg-info-container-hovered"]) }, { intent: "neutral", design: "contrast", class: e(["text-neutral", "hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-hovered", "focus-visible:bg-neutral-container-hovered"]) }, { intent: "surface", design: "contrast", class: e(["text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-hovered"]) }], D = N(["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:u-ring [&:not(:focus-visible)]:ring-inset"], { variants: { design: a({ filled: [], outlined: ["bg-transparent", "border-sm", "border-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: [...K, ...V, ...B, ...L, ...C], defaultVariants: { design: "filled", intent: "main", size: "md", shape: "rounded" } }), O = ["onClick", "onMouseDown", "onMouseUp", "onMouseEnter", "onMouseLeave", "onMouseOver", "onMouseOut", "onKeyDown", "onKeyPress", "onKeyUp", "onSubmit"], P = ({ children: l, design: g = "filled", disabled: o = !1, intent: v = "main", isLoading: i = !1, loadingLabel: c, loadingText: s, shape: u = "rounded", size: h = "md", asChild: d, className: f, ref: m, ...p }) => {
+  const b = d ? E : "button", r = !!o || i, x = S(() => {
     const n = {};
-    return r && P.forEach((z) => n[z] = void 0), n;
+    return r && O.forEach((z) => n[z] = void 0), n;
   }, [r]), w = { size: "current", className: s ? "inline-block" : "absolute", ...c && { "aria-label": c } };
-  return t.createElement(b, { "data-spark-component": "button", ...b === "button" && { type: "button" }, ref: p, className: O({ className: f, design: g, disabled: r, intent: v, shape: u, size: h }), disabled: !!o, "aria-busy": i, "aria-live": i ? "assertive" : "off", ...m, ...x }, y(d, l, (n) => i ? t.createElement(t.Fragment, null, t.createElement(M, { ...w }), s && s, t.createElement("div", { "aria-hidden": !0, className: k("inline-flex gap-md", s ? "hidden" : "opacity-0") }, n)) : n));
-});
-U.displayName = "Button";
+  return t.createElement(b, { "data-spark-component": "button", ...b === "button" && { type: "button" }, ref: m, className: D({ className: f, design: g, disabled: r, intent: v, shape: u, size: h }), disabled: !!o, "aria-busy": i, "aria-live": i ? "assertive" : "off", ...p, ...x }, y(d, l, (n) => i ? t.createElement(t.Fragment, null, t.createElement(M, { ...w }), s && s, t.createElement("div", { "aria-hidden": !0, className: k("inline-flex gap-md", s ? "hidden" : "opacity-0") }, n)) : n));
+};
+P.displayName = "Button";
 export {
-  U as Button
+  P as Button
 };

package/dist/public/docgen.json

@@ -83,6 +83,25 @@
           "name": "string"
         }
       },
+      "ref": {
+        "defaultValue": null,
+        "description": "",
+        "name": "ref",
+        "parent": {
+          "fileName": "button/src/Button.tsx",
+          "name": "ButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "button/src/Button.tsx",
+            "name": "ButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLButtonElement>"
+        }
+      },
       "disabled": {
         "defaultValue": {
           "value": false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/button",
-  "version": "7.3.7",
+  "version": "8.0.1",
   "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"
@@ -23,9 +23,9 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/internal-utils": "^7.3.7",
-    "@spark-ui/slot": "^7.3.7",
-    "@spark-ui/spinner": "^7.3.7",
+    "@spark-ui/internal-utils": "^8.0.1",
+    "@spark-ui/slot": "^8.0.1",
+    "@spark-ui/spinner": "^8.0.1",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
@@ -49,5 +49,5 @@
   },
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
-  "gitHead": "ca2b7a1f2a4a921fd4c6ad8521c2dfd90471f7d6"
+  "gitHead": "e95952850b8ff436e3b05a600fdd39820b9a5386"
 }