@spark-ui/components 17.15.9 → 18.0.0

package/dist/avatar/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime-CMqjfN_6.js"),t=require("../slot/index.js"),n=require("../icon-DY4l9nsc.js"),r=require("../icon-button-DWaNkUqV.js");let i=require("class-variance-authority"),a=require("react");a=e.t(a);let o=require("react/jsx-runtime"),s=require("@spark-ui/icons/PenOutline");var c=a.createContext(void 0),l=()=>{let e=a.useContext(c);if(!e)throw Error(`useAvatarContext must be used within an Avatar component`);return e},u={xs:24,sm:32,md:40,lg:56,xl:64,"2xl":96},d=a.forwardRef(({className:e,size:n=`xl`,isOnline:r=!1,onlineText:s,username:l,asChild:d,children:f,shape:p=`circle`,...m},h)=>{let g=d?t.Slot:`div`;return(0,o.jsx)(c,{value:a.useMemo(()=>({size:n,isOnline:r,onlineText:s,username:l,shape:p,pixelSize:u[n]}),[n,r,l,p,s]),children:(0,o.jsx)(g,{ref:h,style:{width:u[n],height:u[n]},"data-spark-component":`avatar`,className:(0,i.cx)(`relative inline-flex items-center justify-center`,e),...m,children:f})})});d.displayName=`Avatar`;var f=({className:e,children:a,asChild:c,angle:u=135,ariaLabel:d,...f})=>{let p=c?t.Slot:r.t,{pixelSize:m,shape:h}=l();function g(e){let t=(90-u)*Math.PI/180,n=e/2;return{x:n+n*Math.cos(t),y:n-n*Math.sin(t)}}let _=g(m),v=c;return(0,o.jsx)(p,{"data-spark-component":`avatar-action`,style:{position:`absolute`,...h===`circle`?{left:`${_.x}px`,top:`${_.y}px`}:{},...h===`square`?{right:`0px`,bottom:`0px`}:{}},className:(0,i.cx)(`z-raised`,h===`circle`?`-translate-x-1/2 -translate-y-1/2`:`translate-x-1/4 translate-y-1/4`,{"shadow-sm":!v},e),"aria-label":d,title:d,...v?{}:{size:`sm`,intent:`support`,design:`contrast`},...f,children:a||(0,o.jsx)(n.t,{size:`sm`,children:(0,o.jsx)(s.PenOutline,{})})})};f.displayName=`AvatarAction`;var p=({className:e,asChild:n,src:r,onLoad:s,onError:c,...u})=>{let{username:d,isOnline:f,onlineText:p}=l(),m=n?t.Slot:`img`,[h,g]=(0,a.useState)(!1),_=f&&p?`${d} (${p})`:d;return(0,a.useEffect)(()=>{g(!1)},[r]),r?(0,o.jsx)(m,{"aria-hidden":!0,className:(0,i.cx)(`absolute inset-0 size-full`,`object-cover`,{"transition-all duration-300 group-hover:scale-120":u.onClick},`focus-visible:u-outline`,h?`block`:`hidden`,e),alt:_,src:r,onLoad:e=>{g(!0),s?.(e)},onError:e=>{g(!1),c?.(e)},...u}):null};p.displayName=`AvatarImage`;var m=({angle:e=135,...t})=>{let{isOnline:n,pixelSize:r,shape:a,onlineText:s,size:c}=l();if(!n)return null;function u(t){let n=(90-e)*Math.PI/180,r=t/2;return{x:r+r*Math.cos(n),y:r-r*Math.sin(n)}}let d=u(r);return(0,o.jsx)(`div`,{"data-spark-component":`avatar-online-badge`,role:`status`,"aria-label":s,style:{...a===`circle`?{left:`${d.x}px`,top:`${d.y}px`}:{right:`0px`,bottom:`0px`}},className:(0,i.cx)(`bg-success outline-surface absolute rounded-full`,a===`circle`?`-translate-x-1/2 -translate-y-1/2`:`translate-x-1/4 translate-y-1/4`,[`lg`,`xl`,`2xl`].includes(c)?(0,i.cx)(`size-sz-12 outline-4`):(0,i.cx)(`size-sz-8 outline-2`)),...t})};m.displayName=`AvatarOnlineBadge`;var h=({className:e,children:t,...n})=>{let{size:r,username:a}=l(),s=a?.charAt(0);return(0,o.jsx)(`div`,{"aria-hidden":!0,className:(0,i.cx)(`absolute inset-0 flex size-full items-center justify-center`,`default:bg-neutral default:text-on-neutral`,{"text-display-1":r===`2xl`,"text-display-2":[`xl`,`lg`].includes(r),"text-display-3":r===`md`,"text-headline-2":r===`sm`,"text-body-2-highlight":r===`xs`},e),...n,children:t||s})};h.displayName=`AvatarPlaceholder`;var g=({asChild:e,children:n,className:r,...a})=>{let{shape:s,isOnline:c,onlineText:u,username:d}=l(),f=e?t.Slot:`div`,p=c&&u?`${d} (${u})`:d;return(0,o.jsx)(f,{...!e&&{role:`img`},"aria-label":p,title:p,className:(0,i.cx)(`group default:border-outline relative size-full overflow-hidden`,`focus-visible:u-outline`,{"default:rounded-full":s===`circle`,"default:rounded-md":s===`square`,"hover:opacity-dim-1 cursor-pointer":e||a.onClick},r),...a,children:n})};g.displayName=`AvatarUser`;var _=Object.assign(d,{Image:p,Action:f,OnlineBadge:m,User:g,Placeholder:h});_.displayName=`Avatar`,p.displayName=`Avatar.Image`,f.displayName=`Avatar.Action`,m.displayName=`Avatar.OnlineBadge`,g.displayName=`Avatar.User`,h.displayName=`Avatar.Placeholder`,exports.Avatar=_;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime-CMqjfN_6.js"),t=require("../slot/index.js"),n=require("../icon-DY4l9nsc.js"),r=require("../icon-button-DRFf308H.js");let i=require("class-variance-authority"),a=require("react");a=e.t(a);let o=require("react/jsx-runtime"),s=require("@spark-ui/icons/PenOutline");var c=a.createContext(void 0),l=()=>{let e=a.useContext(c);if(!e)throw Error(`useAvatarContext must be used within an Avatar component`);return e},u={xs:24,sm:32,md:40,lg:56,xl:64,"2xl":96},d=a.forwardRef(({className:e,size:n=`xl`,isOnline:r=!1,onlineText:s,username:l,asChild:d,children:f,shape:p=`circle`,...m},h)=>{let g=d?t.Slot:`div`;return(0,o.jsx)(c,{value:a.useMemo(()=>({size:n,isOnline:r,onlineText:s,username:l,shape:p,pixelSize:u[n]}),[n,r,l,p,s]),children:(0,o.jsx)(g,{ref:h,style:{width:u[n],height:u[n]},"data-spark-component":`avatar`,className:(0,i.cx)(`relative inline-flex items-center justify-center`,e),...m,children:f})})});d.displayName=`Avatar`;var f=({className:e,children:a,asChild:c,angle:u=135,ariaLabel:d,...f})=>{let p=c?t.Slot:r.t,{pixelSize:m,shape:h}=l();function g(e){let t=(90-u)*Math.PI/180,n=e/2;return{x:n+n*Math.cos(t),y:n-n*Math.sin(t)}}let _=g(m),v=c;return(0,o.jsx)(p,{"data-spark-component":`avatar-action`,style:{position:`absolute`,...h===`circle`?{left:`${_.x}px`,top:`${_.y}px`}:{},...h===`square`?{right:`0px`,bottom:`0px`}:{}},className:(0,i.cx)(`z-raised`,h===`circle`?`-translate-x-1/2 -translate-y-1/2`:`translate-x-1/4 translate-y-1/4`,{"shadow-sm":!v},e),"aria-label":d,title:d,...v?{}:{size:`sm`,intent:`support`,design:`contrast`},...f,children:a||(0,o.jsx)(n.t,{size:`sm`,children:(0,o.jsx)(s.PenOutline,{})})})};f.displayName=`AvatarAction`;var p=({className:e,asChild:n,src:r,onLoad:s,onError:c,...u})=>{let{username:d,isOnline:f,onlineText:p}=l(),m=n?t.Slot:`img`,[h,g]=(0,a.useState)(!1),_=f&&p?`${d} (${p})`:d;return(0,a.useEffect)(()=>{g(!1)},[r]),r?(0,o.jsx)(m,{"aria-hidden":!0,className:(0,i.cx)(`absolute inset-0 size-full`,`object-cover`,{"transition-all duration-300 group-hover:scale-120":u.onClick},`focus-visible:u-outline`,h?`block`:`hidden`,e),alt:_,src:r,onLoad:e=>{g(!0),s?.(e)},onError:e=>{g(!1),c?.(e)},...u}):null};p.displayName=`AvatarImage`;var m=({angle:e=135,...t})=>{let{isOnline:n,pixelSize:r,shape:a,onlineText:s,size:c}=l();if(!n)return null;function u(t){let n=(90-e)*Math.PI/180,r=t/2;return{x:r+r*Math.cos(n),y:r-r*Math.sin(n)}}let d=u(r);return(0,o.jsx)(`div`,{"data-spark-component":`avatar-online-badge`,role:`status`,"aria-label":s,style:{...a===`circle`?{left:`${d.x}px`,top:`${d.y}px`}:{right:`0px`,bottom:`0px`}},className:(0,i.cx)(`bg-success outline-surface absolute rounded-full`,a===`circle`?`-translate-x-1/2 -translate-y-1/2`:`translate-x-1/4 translate-y-1/4`,[`lg`,`xl`,`2xl`].includes(c)?(0,i.cx)(`size-sz-12 outline-4`):(0,i.cx)(`size-sz-8 outline-2`)),...t})};m.displayName=`AvatarOnlineBadge`;var h=({className:e,children:t,...n})=>{let{size:r,username:a}=l(),s=a?.charAt(0);return(0,o.jsx)(`div`,{"aria-hidden":!0,className:(0,i.cx)(`absolute inset-0 flex size-full items-center justify-center`,`default:bg-neutral default:text-on-neutral`,{"text-display-1":r===`2xl`,"text-display-2":[`xl`,`lg`].includes(r),"text-display-3":r===`md`,"text-headline-2":r===`sm`,"text-body-2-highlight":r===`xs`},e),...n,children:t||s})};h.displayName=`AvatarPlaceholder`;var g=({asChild:e,children:n,className:r,...a})=>{let{shape:s,isOnline:c,onlineText:u,username:d}=l(),f=e?t.Slot:`div`,p=c&&u?`${d} (${u})`:d;return(0,o.jsx)(f,{...!e&&{role:`img`},"aria-label":p,title:p,className:(0,i.cx)(`group default:border-outline relative size-full overflow-hidden`,`focus-visible:u-outline`,{"default:rounded-full":s===`circle`,"default:rounded-md":s===`square`,"hover:opacity-dim-1 cursor-pointer":e||a.onClick},r),...a,children:n})};g.displayName=`AvatarUser`;var _=Object.assign(d,{Image:p,Action:f,OnlineBadge:m,User:g,Placeholder:h});_.displayName=`Avatar`,p.displayName=`Avatar.Image`,f.displayName=`Avatar.Action`,m.displayName=`Avatar.OnlineBadge`,g.displayName=`Avatar.User`,h.displayName=`Avatar.Placeholder`,exports.Avatar=_;
 //# sourceMappingURL=index.js.map

package/dist/avatar/index.mjs

@@ -1,6 +1,6 @@
 import { Slot as e } from "../slot/index.mjs";
 import { t } from "../icon-Bs-39J-H.mjs";
-import { t as n } from "../icon-button-DwFo4BqM.mjs";
+import { t as n } from "../icon-button-C1ThqdK1.mjs";
 import { cx as r } from "class-variance-authority";
 import * as i from "react";
 import { useEffect as a, useState as o } from "react";

package/dist/button/Button.appearance-styles.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const buttonAppearanceStyles: (props?: ({
+    underline?: boolean | null | undefined;
+    appearance?: "success" | "danger" | "primary" | "secondary" | "tertiary" | "contrast" | "ghost" | "boost" | "AI" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ButtonAppearanceStylesProps = VariantProps<typeof buttonAppearanceStyles>;

package/dist/button/Button.d.ts

@@ -1,6 +1,20 @@
 import { ComponentPropsWithoutRef, Ref } from 'react';
+import { ButtonAppearanceStylesProps } from './Button.appearance-styles';
 import { ButtonStylesProps } from './Button.styles';
-export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>, ButtonStylesProps {
+export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>, Omit<ButtonStylesProps, 'design' | 'intent'>, Pick<ButtonAppearanceStylesProps, 'appearance'> {
+    /**
+     * Main style of the button.
+     */
+    design?: ButtonStylesProps['design'];
+    /**
+     * Color scheme of the button.
+     */
+    intent?: ButtonStylesProps['intent'];
+    /**
+     * Combined appearance preset (replaces `design` and `intent`).
+     * @beta This API is in beta and may change in future versions.
+     */
+    appearance?: ButtonAppearanceStylesProps['appearance'];
     /**
      * Change the component to the HTML tag or custom component of the only child.
      */
@@ -30,6 +44,6 @@ export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'd
  * A clickable element that triggers an action or event when activated by the user.
  */
 export declare const Button: {
-    ({ children, design, disabled, ariaDisabled, intent, isLoading, loadingLabel, loadingText, shape, size, asChild, className, underline, ref, ...others }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, design, disabled, ariaDisabled, intent, isLoading, loadingLabel, loadingText, shape, size, asChild, className, underline, appearance, ref, ...others }: ButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/button/Button.styles.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const buttonStyles: (props?: ({
-    design?: "filled" | "outlined" | "ghost" | "tinted" | "contrast" | null | undefined;
+    design?: "filled" | "outlined" | "contrast" | "ghost" | "tinted" | null | undefined;
     underline?: boolean | null | undefined;
     intent?: "main" | "alert" | "surface" | "support" | "accent" | "success" | "info" | "neutral" | "ai" | "danger" | "surfaceInverse" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;

package/dist/button/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../button-jPMfDNvm.js");exports.Button=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../button-D0s-21qo.js");exports.Button=e.t;

package/dist/button/index.mjs

@@ -1,2 +1,2 @@
-import { t as e } from "../button-DbwdRRfP.mjs";
+import { t as e } from "../button-DwLTXeJX.mjs";
 export { e as Button };

package/dist/button-D0s-21qo.js

@@ -0,0 +1,2 @@
+const e=require("./slot/index.js"),t=require("./spinner-CmPypfJR.js");let n=require("class-variance-authority"),r=require("react"),i=require("react/jsx-runtime"),a=require("@spark-ui/internal-utils");var o=(0,n.cva)([`u-shadow-border-transition`,`box-border inline-flex items-center justify-center gap-md whitespace-nowrap`,`default:px-lg`,`rounded-button`,`text-body-1-highlight`,`focus-visible:u-outline`],{variants:{underline:{true:[`underline`]},appearance:{primary:[`bg-main`,`text-on-main`,`rounded-button`,`enabled:hover:bg-main-hovered`,`enabled:active:bg-main-hovered`,`enabled:focus-visible:bg-main-hovered`],secondary:[`bg-support`,`text-on-support`,`rounded-button`,`enabled:hover:bg-support-hovered`,`enabled:active:bg-support-hovered`,`enabled:focus-visible:bg-support-hovered`],tertiary:[`border-outline`,`border-sm`,`bg-surface`,`text-on-surface`,`rounded-button`,`enabled:hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`enabled:focus-visible:bg-surface-hovered`],contrast:[`bg-surface`,`text-on-surface`,`rounded-button`,`enabled:hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`enabled:focus-visible:bg-surface-hovered`],ghost:[`text-on-surface default:-mx-md px-md enabled:hover:bg-surface-hovered`],success:[`border-outline`,`border-sm`,`bg-transparent`,`text-success`,`rounded-button`,`enabled:hover:bg-success-container`,`enabled:active:bg-success-container`,`enabled:focus-visible:bg-success-container`],danger:[`border-outline`,`border-sm`,`bg-transparent`,`text-error`,`rounded-button`,`enabled:hover:bg-error-container`,`enabled:active:bg-error-container`,`enabled:focus-visible:bg-error-container`],boost:[`bg-accent`,`text-on-accent`,`rounded-button`,`enabled:hover:bg-accent-hovered`,`enabled:active:bg-accent-hovered`,`enabled:focus-visible:bg-accent-hovered`],AI:[`bg-ai`,`text-on-ai`,`rounded-button`,`enabled:hover:bg-ai-hovered`,`enabled:active:bg-ai-hovered`,`enabled:focus-visible:bg-ai-hovered`]},size:(0,a.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`]}),disabled:{true:[`cursor-not-allowed opacity-dim-3`],false:[`cursor-pointer`]}},defaultVariants:{size:`md`}}),s=[{intent:`main`,design:`filled`,class:(0,a.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:(0,a.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:(0,a.tw)([`bg-accent`,`text-on-accent`,`hover:bg-accent-hovered`,`enabled:active:bg-accent-hovered`,`focus-visible:bg-accent-hovered`])},{intent:`ai`,design:`filled`,class:(0,a.tw)([`bg-ai`,`text-on-ai`,`hover:bg-ai-hovered`,`enabled:active:bg-ai-hovered`,`focus-visible:bg-ai-hovered`])},{intent:`success`,design:`filled`,class:(0,a.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:(0,a.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:(0,a.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:(0,a.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:(0,a.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:(0,a.tw)([`bg-surface`,`text-on-surface`,`hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`focus-visible:bg-surface-hovered`])},{intent:`surfaceInverse`,design:`filled`,class:(0,a.tw)([`bg-surface-inverse`,`text-on-surface-inverse`,`hover:bg-surface-inverse-hovered`,`enabled:active:bg-surface-inverse-hovered`,`focus-visible:bg-surface-inverse-hovered`])}],c=[{intent:`main`,design:`ghost`,class:(0,a.tw)([`text-on-main-container`,`hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`])},{intent:`support`,design:`ghost`,class:(0,a.tw)([`text-on-support-container`,`hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`])},{intent:`accent`,design:`ghost`,class:(0,a.tw)([`text-on-accent-container`,`hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`])},{intent:`ai`,design:`ghost`,class:(0,a.tw)([`text-on-ai-container`,`hover:bg-ai/dim-5`,`enabled:active:bg-ai/dim-5`,`focus-visible:bg-ai/dim-5`])},{intent:`success`,design:`ghost`,class:(0,a.tw)([`text-on-success-container`,`hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`])},{intent:`alert`,design:`ghost`,class:(0,a.tw)([`text-on-alert-container`,`hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`])},{intent:`danger`,design:`ghost`,class:(0,a.tw)([`text-on-error-container`,`hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`])},{intent:`info`,design:`ghost`,class:(0,a.tw)([`text-on-info-container`,`hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`])},{intent:`neutral`,design:`ghost`,class:(0,a.tw)([`text-on-neutral-container`,`hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`])},{intent:`surface`,design:`ghost`,class:(0,a.tw)([`text-surface`,`hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`])},{intent:`surfaceInverse`,design:`ghost`,class:(0,a.tw)([`text-surface-inverse`,`hover:bg-surface-inverse/dim-5`,`enabled:active:bg-surface-inverse/dim-5`,`focus-visible:bg-surface-inverse/dim-5`])}],l=[{intent:`main`,design:`outlined`,class:(0,a.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:(0,a.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:(0,a.tw)([`hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`,`text-accent`])},{intent:`ai`,design:`outlined`,class:(0,a.tw)([`hover:bg-ai/dim-5`,`enabled:active:bg-ai/dim-5`,`focus-visible:bg-ai/dim-5`,`text-ai`])},{intent:`success`,design:`outlined`,class:(0,a.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:(0,a.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:(0,a.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:(0,a.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:(0,a.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:(0,a.tw)([`hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`,`text-surface`])},{intent:`surfaceInverse`,design:`outlined`,class:(0,a.tw)([`hover:bg-surface-inverse/dim-5`,`enabled:active:bg-surface-inverse/dim-5`,`focus-visible:bg-surface-inverse/dim-5`,`text-surface-inverse`])}],u=[{intent:`main`,design:`tinted`,class:(0,a.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:(0,a.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:(0,a.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:`ai`,design:`tinted`,class:(0,a.tw)([`bg-ai-container`,`text-on-ai-container`,`hover:bg-ai-container-hovered`,`enabled:active:bg-ai-container-hovered`,`focus-visible:bg-ai-container-hovered`])},{intent:`success`,design:`tinted`,class:(0,a.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:(0,a.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:(0,a.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:(0,a.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:(0,a.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:(0,a.tw)([`bg-surface`,`text-on-surface`,`hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`focus-visible:bg-surface-hovered`])},{intent:`surfaceInverse`,design:`tinted`,class:(0,a.tw)([`bg-surface-inverse`,`text-on-surface-inverse`,`hover:bg-surface-inverse-hovered`,`enabled:active:bg-surface-inverse-hovered`,`focus-visible:bg-surface-inverse-hovered`])}],d=[{intent:`main`,design:`contrast`,class:(0,a.tw)([`text-on-main-contaier bg-surface`,`hover:bg-main-container-hovered`,`enabled:active:bg-main-container-hovered`,`focus-visible:bg-main-container-hovered`])},{intent:`support`,design:`contrast`,class:(0,a.tw)([`text-on-support-container bg-surface`,`hover:bg-support-container-hovered`,`enabled:active:bg-support-container-hovered`,`focus-visible:bg-support-container-hovered`])},{intent:`accent`,design:`contrast`,class:(0,a.tw)([`text-on-accent-container bg-surface`,`hover:bg-accent-container-hovered`,`enabled:active:bg-accent-container-hovered`,`focus-visible:bg-accent-container-hovered`])},{intent:`ai`,design:`contrast`,class:(0,a.tw)([`text-on-ai-container bg-surface`,`hover:bg-ai-container-hovered`,`enabled:active:bg-ai-container-hovered`,`focus-visible:bg-ai-container-hovered`])},{intent:`success`,design:`contrast`,class:(0,a.tw)([`text-on-success-container bg-surface`,`hover:bg-success-container-hovered`,`enabled:active:bg-success-container-hovered`,`focus-visible:bg-success-container-hovered`])},{intent:`alert`,design:`contrast`,class:(0,a.tw)([`text-on-alert-container bg-surface`,`hover:bg-alert-container-hovered`,`enabled:active:bg-alert-container-hovered`,`focus-visible:bg-alert-container-hovered`])},{intent:`danger`,design:`contrast`,class:(0,a.tw)([`text-on-error-container bg-surface`,`hover:bg-error-container-hovered`,`enabled:active:bg-error-container-hovered`,`focus-visible:bg-error-container-hovered`])},{intent:`info`,design:`contrast`,class:(0,a.tw)([`text-on-info-container bg-surface`,`hover:bg-info-container-hovered`,`enabled:active:bg-info-container-hovered`,`focus-visible:bg-info-container-hovered`])},{intent:`neutral`,design:`contrast`,class:(0,a.tw)([`text-on-neutral-container bg-surface`,`hover:bg-neutral-container-hovered`,`enabled:active:bg-neutral-container-hovered`,`focus-visible:bg-neutral-container-hovered`])},{intent:`surface`,design:`contrast`,class:(0,a.tw)([`text-on-surface bg-surface`,`hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`focus-visible:bg-surface-hovered`])},{intent:`surfaceInverse`,design:`contrast`,class:(0,a.tw)([`text-on-surface-inverse bg-surface-inverse`,`hover:bg-surface-inverse-hovered`,`enabled:active:bg-surface-inverse-hovered`,`focus-visible:bg-surface-inverse-hovered`])}],f=(0,n.cva)([`u-shadow-border-transition`,`box-border inline-flex items-center justify-center gap-md whitespace-nowrap`,`default:px-lg`,`text-body-1-highlight`,`focus-visible:u-outline`],{variants:{design:(0,a.makeVariants)({filled:[],outlined:[`bg-transparent`,`border-sm`,`border-current`],tinted:[],ghost:[`default:-mx-md px-md hover:bg-main/dim-5`],contrast:[]}),underline:{true:[`underline`]},intent:(0,a.makeVariants)({main:[],support:[],accent:[],ai:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[],surfaceInverse:[]}),size:(0,a.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:(0,a.makeVariants)({rounded:[`rounded-button`],square:[`rounded-0`],pill:[`rounded-full`]}),disabled:{true:[`cursor-not-allowed`,`opacity-dim-3`],false:[`cursor-pointer`]}},compoundVariants:[...s,...l,...u,...c,...d],defaultVariants:{design:`filled`,intent:`main`,size:`md`,shape:`rounded`}}),p=[`onClick`,`onMouseDown`,`onMouseUp`,`onMouseEnter`,`onMouseLeave`,`onMouseOver`,`onMouseOut`,`onKeyDown`,`onKeyPress`,`onKeyUp`,`onSubmit`],m=({children:a,design:s=`filled`,disabled:c=!1,ariaDisabled:l=!1,intent:u=`main`,isLoading:d=!1,loadingLabel:m,loadingText:h,shape:g=`pill`,size:_=`md`,asChild:v,className:y,underline:b=!1,appearance:x,ref:S,...C})=>{let w=v?e.Slot:`button`,T=!!c||!!l||d,E=!!c&&!l,D=(0,r.useMemo)(()=>{let e={};return T&&p.forEach(t=>{e[t]=e=>{e.type===`keydown`&&e.key===`Tab`||e.preventDefault()}}),e},[T]),O={size:`current`,className:h?`inline-block`:`absolute`,...m&&{"aria-label":m}},k=x?o({className:y,appearance:x,disabled:T,size:_,underline:b}):f({className:y,design:s,disabled:T,intent:u,shape:g,size:_,underline:b});return(0,i.jsx)(w,{"data-spark-component":`button`,...w===`button`&&{type:`button`},ref:S,className:k,disabled:E,"aria-disabled":T?!0:void 0,"aria-busy":d,"aria-live":d?`assertive`:`off`,...C,...D,children:e.wrapPolymorphicSlot(v,a,e=>d?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.t,{...O}),h,(0,i.jsx)(`div`,{"aria-hidden":!0,className:(0,n.cx)(`gap-md`,h?`hidden`:`inline-flex opacity-0`),children:e})]}):e)})};m.displayName=`Button`,Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return m}});
+//# sourceMappingURL=button-D0s-21qo.js.map

package/dist/button-D0s-21qo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-D0s-21qo.js","names":[],"sources":["../src/button/Button.appearance-styles.tsx","../src/button/variants/filled.ts","../src/button/variants/ghost.ts","../src/button/variants/outlined.ts","../src/button/variants/tinted.ts","../src/button/variants/contrast.ts","../src/button/Button.styles.tsx","../src/button/Button.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const buttonAppearanceStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'rounded-button',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Add underline to the button text.\n       */\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Semantic appearance of the button that combines design and intent.\n       * When specified, this prop overrides both `design` and `intent`.\n       *\n       * - `primary`: Main action, filled background\n       * - `secondary`: Secondary action, filled support background\n       * - `tertiary`: Tertiary action, outlined with surface background\n       * - `contrast`: Contrast action, surface background\n       * - `ghost`: Link-style without background\n       * - `success`: Success action, outlined with transparent background\n       * - `danger`: Danger action, outlined with transparent background\n       * - `boost`: Accent action, filled accent background\n       * - `AI`: AI action, filled AI background\n       */\n      appearance: {\n        primary: [\n          'bg-main',\n          'text-on-main',\n          'rounded-button',\n          'enabled:hover:bg-main-hovered',\n          'enabled:active:bg-main-hovered',\n          'enabled:focus-visible:bg-main-hovered',\n        ],\n        secondary: [\n          'bg-support',\n          'text-on-support',\n          'rounded-button',\n          'enabled:hover:bg-support-hovered',\n          'enabled:active:bg-support-hovered',\n          'enabled:focus-visible:bg-support-hovered',\n        ],\n        tertiary: [\n          'border-outline',\n          'border-sm',\n          'bg-surface',\n          'text-on-surface',\n          'rounded-button',\n          'enabled:hover:bg-surface-hovered',\n          'enabled:active:bg-surface-hovered',\n          'enabled:focus-visible:bg-surface-hovered',\n        ],\n        contrast: [\n          'bg-surface',\n          'text-on-surface',\n          'rounded-button',\n          'enabled:hover:bg-surface-hovered',\n          'enabled:active:bg-surface-hovered',\n          'enabled:focus-visible:bg-surface-hovered',\n        ],\n        ghost: ['text-on-surface default:-mx-md px-md enabled:hover:bg-surface-hovered'],\n        success: [\n          'border-outline',\n          'border-sm',\n          'bg-transparent',\n          'text-success',\n          'rounded-button',\n          'enabled:hover:bg-success-container',\n          'enabled:active:bg-success-container',\n          'enabled:focus-visible:bg-success-container',\n        ],\n        danger: [\n          'border-outline',\n          'border-sm',\n          'bg-transparent',\n          'text-error',\n          'rounded-button',\n          'enabled:hover:bg-error-container',\n          'enabled:active:bg-error-container',\n          'enabled:focus-visible:bg-error-container',\n        ],\n        boost: [\n          'bg-accent',\n          'text-on-accent',\n          'rounded-button',\n          'enabled:hover:bg-accent-hovered',\n          'enabled:active:bg-accent-hovered',\n          'enabled:focus-visible:bg-accent-hovered',\n        ],\n        AI: [\n          'bg-ai',\n          'text-on-ai',\n          'rounded-button',\n          'enabled:hover:bg-ai-hovered',\n          'enabled:active:bg-ai-hovered',\n          'enabled:focus-visible:bg-ai-hovered',\n        ],\n      },\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32 h-sz-32'],\n        md: ['min-w-sz-44 h-sz-44'],\n        lg: ['min-w-sz-56 h-sz-56'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\nexport type ButtonAppearanceStylesProps = VariantProps<typeof buttonAppearanceStyles>\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  // Main\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw([\n      'bg-main',\n      'text-on-main',\n      'hover:bg-main-hovered',\n      'enabled:active:bg-main-hovered',\n      'focus-visible:bg-main-hovered',\n    ]),\n  },\n  // Support\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw([\n      'bg-support',\n      'text-on-support',\n      'hover:bg-support-hovered',\n      'enabled:active:bg-support-hovered',\n      'focus-visible:bg-support-hovered',\n    ]),\n  },\n  // Accent\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw([\n      'bg-accent',\n      'text-on-accent',\n      'hover:bg-accent-hovered',\n      'enabled:active:bg-accent-hovered',\n      'focus-visible:bg-accent-hovered',\n    ]),\n  },\n  // AI\n  {\n    intent: 'ai',\n    design: 'filled',\n    class: tw([\n      'bg-ai',\n      'text-on-ai',\n      'hover:bg-ai-hovered',\n      'enabled:active:bg-ai-hovered',\n      'focus-visible:bg-ai-hovered',\n    ]),\n  },\n  // Success\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw([\n      'bg-success',\n      'text-on-success',\n      'hover:bg-success-hovered',\n      'enabled:active:bg-success-hovered',\n      'focus-visible:bg-success-hovered',\n    ]),\n  },\n  // Alert\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw([\n      'bg-alert',\n      'text-on-alert',\n      'hover:bg-alert-hovered',\n      'enabled:active:bg-alert-hovered',\n      'focus-visible:bg-alert-hovered',\n    ]),\n  },\n  // Danger\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-error',\n      'hover:bg-error-hovered enabled:active:bg-error-hovered',\n      'focus-visible:bg-error-hovered',\n    ]),\n  },\n  // Info\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-info',\n      'hover:bg-info-hovered enabled:active:bg-info-hovered',\n      'focus-visible:bg-info-hovered',\n    ]),\n  },\n  // Neutral\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw([\n      'bg-neutral',\n      'text-on-neutral',\n      'hover:bg-neutral-hovered',\n      'enabled:active:bg-neutral-hovered',\n      'focus-visible:bg-neutral-hovered',\n    ]),\n  },\n  // Surface\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'filled',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const ghostVariants = [\n  {\n    intent: 'main',\n    design: 'ghost',\n    class: tw([\n      'text-on-main-container',\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'ghost',\n    class: tw([\n      'text-on-support-container',\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'ghost',\n    class: tw([\n      'text-on-accent-container',\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'ghost',\n    class: tw([\n      'text-on-ai-container',\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'ghost',\n    class: tw([\n      'text-on-success-container',\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'ghost',\n    class: tw([\n      'text-on-alert-container',\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'ghost',\n    class: tw([\n      'text-on-error-container',\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'ghost',\n    class: tw([\n      'text-on-info-container',\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'ghost',\n    class: tw([\n      'text-on-neutral-container',\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'ghost',\n    class: tw([\n      'text-surface',\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'ghost',\n    class: tw([\n      'text-surface-inverse',\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n      'text-ai',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'text-surface',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n      'text-surface-inverse',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'text-on-main-container',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'text-on-support-container',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'text-on-accent-container',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'tinted',\n    class: tw([\n      'bg-ai-container',\n      'text-on-ai-container',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'text-on-success-container',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'text-on-alert-container',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'text-on-error-container',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'text-on-info-container',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'text-on-neutral-container',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'tinted',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const contrastVariants = [\n  {\n    intent: 'main',\n    design: 'contrast',\n    class: tw([\n      'text-on-main-contaier bg-surface',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'contrast',\n    class: tw([\n      'text-on-support-container bg-surface',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'contrast',\n    class: tw([\n      'text-on-accent-container bg-surface',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'contrast',\n    class: tw([\n      'text-on-ai-container bg-surface',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'contrast',\n    class: tw([\n      'text-on-success-container bg-surface',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'contrast',\n    class: tw([\n      'text-on-alert-container bg-surface',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'contrast',\n    class: tw([\n      'text-on-error-container bg-surface',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'contrast',\n    class: tw([\n      'text-on-info-container bg-surface',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'contrast',\n    class: tw([\n      'text-on-neutral-container bg-surface',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface bg-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface-inverse bg-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport {\n  contrastVariants,\n  filledVariants,\n  ghostVariants,\n  outlinedVariants,\n  tintedVariants,\n} from './variants'\n\nexport const buttonStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * 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.\n       *\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n        filled: [],\n        outlined: ['bg-transparent', 'border-sm', 'border-current'],\n        tinted: [],\n        ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n        contrast: [],\n      }),\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'ai',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        ai: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32', 'h-sz-32'],\n        md: ['min-w-sz-44', 'h-sz-44'],\n        lg: ['min-w-sz-56', 'h-sz-56'],\n      }),\n      /**\n       * Shape of the button.\n       */\n      shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n        rounded: ['rounded-button'],\n        square: ['rounded-0'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    compoundVariants: [\n      ...filledVariants,\n      ...outlinedVariants,\n      ...tintedVariants,\n      ...ghostVariants,\n      ...contrastVariants,\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'main',\n      size: 'md',\n      shape: 'rounded',\n    },\n  }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'\n\nimport { Slot, wrapPolymorphicSlot } from '../slot'\nimport { Spinner, type SpinnerProps } from '../spinner'\nimport {\n  buttonAppearanceStyles,\n  type ButtonAppearanceStylesProps,\n} from './Button.appearance-styles'\nimport { buttonStyles, type ButtonStylesProps } from './Button.styles'\n\nexport interface ButtonProps\n  extends\n    Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>,\n    Omit<ButtonStylesProps, 'design' | 'intent'>,\n    Pick<ButtonAppearanceStylesProps, 'appearance'> {\n  /**\n   * Main style of the button.\n   */\n  design?: ButtonStylesProps['design']\n  /**\n   * Color scheme of the button.\n   */\n  intent?: ButtonStylesProps['intent']\n  /**\n   * Combined appearance preset (replaces `design` and `intent`).\n   * @beta This API is in beta and may change in future versions.\n   */\n  appearance?: ButtonAppearanceStylesProps['appearance']\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Display a spinner to indicate to the user that the button is loading something after they interacted with it.\n   */\n  isLoading?: boolean\n  /**\n   * If your loading state should only display a spinner, it is better to specify a label for it (a11y).\n   */\n  loadingLabel?: string\n  /**\n   * 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.**\n   */\n  loadingText?: string\n  /**\n   * When true, the button is non-interactive and has disabled styling but stays focusable (uses\n   * `aria-disabled` instead of native `disabled`). Use for cases where the user should be able to\n   * focus the control to discover why it is disabled (e.g. form submit, bulk bar actions).\n   */\n  ariaDisabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n  DOMAttributes<HTMLButtonElement>,\n  'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseOver',\n  'onMouseOut',\n  'onKeyDown',\n  'onKeyPress',\n  'onKeyUp',\n  'onSubmit',\n]\n\n/**\n * A clickable element that triggers an action or event when activated by the user.\n */\nexport const Button = ({\n  children,\n  design = 'filled',\n  disabled = false,\n  ariaDisabled = false,\n  intent = 'main',\n  isLoading = false,\n  loadingLabel,\n  loadingText,\n  shape = 'pill',\n  size = 'md',\n  asChild,\n  className,\n  underline = false,\n  appearance,\n  ref,\n  ...others\n}: ButtonProps) => {\n  const Component = asChild ? Slot : 'button'\n\n  const shouldNotInteract = !!disabled || !!ariaDisabled || isLoading\n  const useNativeDisabled = !!disabled && !ariaDisabled\n\n  const disabledEventHandlers = useMemo(() => {\n    const result: Partial<Record<DOMAttributesEventHandler, (e: React.SyntheticEvent) => void>> = {}\n\n    if (shouldNotInteract) {\n      blockedEventHandlers.forEach(key => {\n        result[key] = (e: React.SyntheticEvent) => {\n          // Allow Tab to move focus away from the button\n          if (e.type === 'keydown' && (e as React.KeyboardEvent).key === 'Tab') return\n          /*\n            Setting handlers to `undefined` (e.g. `result[eventHandler] = undefined`) only blocks JS-level handlers, it does not prevent native browser behavior.\n            Calling preventDefault() here also blocks native form submission when type=\"submit\", since the browser triggers it from the click chain.\n          */\n          e.preventDefault()\n        }\n      })\n    }\n\n    return result\n  }, [shouldNotInteract])\n\n  const spinnerProps = {\n    size: 'current' as SpinnerProps['size'],\n    className: loadingText ? 'inline-block' : 'absolute',\n    ...(loadingLabel && { 'aria-label': loadingLabel }),\n  }\n\n  // Use appearance styles when appearance is specified, otherwise use legacy styles\n  const buttonClassName = appearance\n    ? buttonAppearanceStyles({\n        className,\n        appearance,\n        disabled: shouldNotInteract,\n        size,\n        underline,\n      })\n    : buttonStyles({\n        className,\n        design,\n        disabled: shouldNotInteract,\n        intent,\n        shape,\n        size,\n        underline,\n      })\n\n  return (\n    <Component\n      data-spark-component=\"button\"\n      {...(Component === 'button' && { type: 'button' })}\n      ref={ref}\n      className={buttonClassName}\n      disabled={useNativeDisabled}\n      aria-disabled={shouldNotInteract ? true : undefined}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'assertive' : 'off'}\n      {...others}\n      {...disabledEventHandlers}\n    >\n      {wrapPolymorphicSlot(asChild, children, slotted =>\n        isLoading ? (\n          <>\n            <Spinner {...spinnerProps} />\n            {loadingText}\n\n            <div\n              aria-hidden\n              className={cx('gap-md', loadingText ? 'hidden' : 'inline-flex opacity-0')}\n            >\n              {slotted}\n            </div>\n          </>\n        ) : (\n          slotted\n        )\n      )}\n    </Component>\n  )\n}\n\nButton.displayName = 'Button'\n"],"mappings":"wMAGA,IAAa,GAAA,EAAA,EAAA,IAAA,CACX,CACE,6BACA,8EACA,gBACA,iBACA,wBACA,yBACF,EACA,CACE,SAAU,CAIR,UAAW,CACT,KAAM,CAAC,WAAW,CACpB,EAeA,WAAY,CACV,QAAS,CACP,UACA,eACA,iBACA,gCACA,iCACA,uCACF,EACA,UAAW,CACT,aACA,kBACA,iBACA,mCACA,oCACA,0CACF,EACA,SAAU,CACR,iBACA,YACA,aACA,kBACA,iBACA,mCACA,oCACA,0CACF,EACA,SAAU,CACR,aACA,kBACA,iBACA,mCACA,oCACA,0CACF,EACA,MAAO,CAAC,uEAAuE,EAC/E,QAAS,CACP,iBACA,YACA,iBACA,eACA,iBACA,qCACA,sCACA,4CACF,EACA,OAAQ,CACN,iBACA,YACA,iBACA,aACA,iBACA,mCACA,oCACA,0CACF,EACA,MAAO,CACL,YACA,iBACA,iBACA,kCACA,mCACA,yCACF,EACA,GAAI,CACF,QACA,aACA,iBACA,8BACA,+BACA,qCACF,CACF,EAIA,MAAA,EAAA,EAAA,aAAA,CAA+C,CAC7C,GAAI,CAAC,qBAAqB,EAC1B,GAAI,CAAC,qBAAqB,EAC1B,GAAI,CAAC,qBAAqB,CAC5B,CAAC,EAID,SAAU,CACR,KAAM,CAAC,kCAAkC,EACzC,MAAO,CAAC,gBAAgB,CAC1B,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EC7Ha,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,UACA,eACA,wBACA,iCACA,+BACF,CAAC,CACH,EAEA,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,aACA,kBACA,2BACA,oCACA,kCACF,CAAC,CACH,EAEA,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,YACA,iBACA,0BACA,mCACA,iCACF,CAAC,CACH,EAEA,CACE,OAAQ,KACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,QACA,aACA,sBACA,+BAC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"}

package/dist/{button-DbwdRRfP.mjs → button-DwLTXeJX.mjs}

@@ -4,8 +4,102 @@ import { cva as r, cx as i } from "class-variance-authority";
 import { useMemo as a } from "react";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 import { makeVariants as l, tw as u } from "@spark-ui/internal-utils";
-//#region src/button/variants/filled.ts
-var d = [
+//#region src/button/Button.appearance-styles.tsx
+var d = r([
+	"u-shadow-border-transition",
+	"box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
+	"default:px-lg",
+	"rounded-button",
+	"text-body-1-highlight",
+	"focus-visible:u-outline"
+], {
+	variants: {
+		underline: { true: ["underline"] },
+		appearance: {
+			primary: [
+				"bg-main",
+				"text-on-main",
+				"rounded-button",
+				"enabled:hover:bg-main-hovered",
+				"enabled:active:bg-main-hovered",
+				"enabled:focus-visible:bg-main-hovered"
+			],
+			secondary: [
+				"bg-support",
+				"text-on-support",
+				"rounded-button",
+				"enabled:hover:bg-support-hovered",
+				"enabled:active:bg-support-hovered",
+				"enabled:focus-visible:bg-support-hovered"
+			],
+			tertiary: [
+				"border-outline",
+				"border-sm",
+				"bg-surface",
+				"text-on-surface",
+				"rounded-button",
+				"enabled:hover:bg-surface-hovered",
+				"enabled:active:bg-surface-hovered",
+				"enabled:focus-visible:bg-surface-hovered"
+			],
+			contrast: [
+				"bg-surface",
+				"text-on-surface",
+				"rounded-button",
+				"enabled:hover:bg-surface-hovered",
+				"enabled:active:bg-surface-hovered",
+				"enabled:focus-visible:bg-surface-hovered"
+			],
+			ghost: ["text-on-surface default:-mx-md px-md enabled:hover:bg-surface-hovered"],
+			success: [
+				"border-outline",
+				"border-sm",
+				"bg-transparent",
+				"text-success",
+				"rounded-button",
+				"enabled:hover:bg-success-container",
+				"enabled:active:bg-success-container",
+				"enabled:focus-visible:bg-success-container"
+			],
+			danger: [
+				"border-outline",
+				"border-sm",
+				"bg-transparent",
+				"text-error",
+				"rounded-button",
+				"enabled:hover:bg-error-container",
+				"enabled:active:bg-error-container",
+				"enabled:focus-visible:bg-error-container"
+			],
+			boost: [
+				"bg-accent",
+				"text-on-accent",
+				"rounded-button",
+				"enabled:hover:bg-accent-hovered",
+				"enabled:active:bg-accent-hovered",
+				"enabled:focus-visible:bg-accent-hovered"
+			],
+			AI: [
+				"bg-ai",
+				"text-on-ai",
+				"rounded-button",
+				"enabled:hover:bg-ai-hovered",
+				"enabled:active:bg-ai-hovered",
+				"enabled:focus-visible:bg-ai-hovered"
+			]
+		},
+		size: l({
+			sm: ["min-w-sz-32 h-sz-32"],
+			md: ["min-w-sz-44 h-sz-44"],
+			lg: ["min-w-sz-56 h-sz-56"]
+		}),
+		disabled: {
+			true: ["cursor-not-allowed opacity-dim-3"],
+			false: ["cursor-pointer"]
+		}
+	},
+	defaultVariants: { size: "md" }
+}), f = [
 	{
 		intent: "main",
 		design: "filled",
@@ -123,7 +217,7 @@ var d = [
 			"focus-visible:bg-surface-inverse-hovered"
 		])
 	}
-], f = [
+], p = [
 	{
 		intent: "main",
 		design: "ghost",
@@ -234,7 +328,7 @@ var d = [
 			"focus-visible:bg-surface-inverse/dim-5"
 		])
 	}
-], p = [
+], m = [
 	{
 		intent: "main",
 		design: "outlined",
@@ -345,7 +439,7 @@ var d = [
 			"text-surface-inverse"
 		])
 	}
-], m = [
+], h = [
 	{
 		intent: "main",
 		design: "tinted",
@@ -467,7 +561,7 @@ var d = [
 			"focus-visible:bg-surface-inverse-hovered"
 		])
 	}
-], h = [
+], g = [
 	{
 		intent: "main",
 		design: "contrast",
@@ -578,7 +672,7 @@ var d = [
 			"focus-visible:bg-surface-inverse-hovered"
 		])
 	}
-], g = r([
+], _ = r([
 	"u-shadow-border-transition",
 	"box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
 	"default:px-lg",
@@ -627,11 +721,11 @@ var d = [
 		}
 	},
 	compoundVariants: [
-		...d,
-		...p,
-		...m,
 		...f,
-		...h
+		...m,
+		...h,
+		...p,
+		...g
 	],
 	defaultVariants: {
 		design: "filled",
@@ -639,7 +733,7 @@ var d = [
 		size: "md",
 		shape: "rounded"
 	}
-}), _ = [
+}), v = [
 	"onClick",
 	"onMouseDown",
 	"onMouseUp",
@@ -651,51 +745,57 @@ var d = [
 	"onKeyPress",
 	"onKeyUp",
 	"onSubmit"
-], v = ({ children: r, design: l = "filled", disabled: u = !1, ariaDisabled: d = !1, intent: f = "main", isLoading: p = !1, loadingLabel: m, loadingText: h, shape: v = "pill", size: y = "md", asChild: b, className: x, underline: S = !1, ref: C, ...w }) => {
-	let T = b ? e : "button", E = !!u || !!d || p, D = !!u && !d, O = a(() => {
+], y = ({ children: r, design: l = "filled", disabled: u = !1, ariaDisabled: f = !1, intent: p = "main", isLoading: m = !1, loadingLabel: h, loadingText: g, shape: y = "pill", size: b = "md", asChild: x, className: S, underline: C = !1, appearance: w, ref: T, ...E }) => {
+	let D = x ? e : "button", O = !!u || !!f || m, k = !!u && !f, A = a(() => {
 		let e = {};
-		return E && _.forEach((t) => {
+		return O && v.forEach((t) => {
 			e[t] = (e) => {
 				e.type === "keydown" && e.key === "Tab" || e.preventDefault();
 			};
 		}), e;
-	}, [E]), k = {
+	}, [O]), j = {
 		size: "current",
-		className: h ? "inline-block" : "absolute",
-		...m && { "aria-label": m }
-	};
-	return /* @__PURE__ */ s(T, {
+		className: g ? "inline-block" : "absolute",
+		...h && { "aria-label": h }
+	}, M = w ? d({
+		className: S,
+		appearance: w,
+		disabled: O,
+		size: b,
+		underline: C
+	}) : _({
+		className: S,
+		design: l,
+		disabled: O,
+		intent: p,
+		shape: y,
+		size: b,
+		underline: C
+	});
+	return /* @__PURE__ */ s(D, {
 		"data-spark-component": "button",
-		...T === "button" && { type: "button" },
-		ref: C,
-		className: g({
-			className: x,
-			design: l,
-			disabled: E,
-			intent: f,
-			shape: v,
-			size: y,
-			underline: S
-		}),
-		disabled: D,
-		"aria-disabled": E ? !0 : void 0,
-		"aria-busy": p,
-		"aria-live": p ? "assertive" : "off",
-		...w,
-		...O,
-		children: t(b, r, (e) => p ? /* @__PURE__ */ c(o, { children: [
-			/* @__PURE__ */ s(n, { ...k }),
-			h,
+		...D === "button" && { type: "button" },
+		ref: T,
+		className: M,
+		disabled: k,
+		"aria-disabled": O ? !0 : void 0,
+		"aria-busy": m,
+		"aria-live": m ? "assertive" : "off",
+		...E,
+		...A,
+		children: t(x, r, (e) => m ? /* @__PURE__ */ c(o, { children: [
+			/* @__PURE__ */ s(n, { ...j }),
+			g,
 			/* @__PURE__ */ s("div", {
 				"aria-hidden": !0,
-				className: i("gap-md", h ? "hidden" : "inline-flex opacity-0"),
+				className: i("gap-md", g ? "hidden" : "inline-flex opacity-0"),
 				children: e
 			})
 		] }) : e)
 	});
 };
-v.displayName = "Button";
+y.displayName = "Button";
 //#endregion
-export { g as n, v as t };
+export { _ as n, y as t };
 
-//# sourceMappingURL=button-DbwdRRfP.mjs.map
+//# sourceMappingURL=button-DwLTXeJX.mjs.map

package/dist/button-DwLTXeJX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-DwLTXeJX.mjs","names":[],"sources":["../src/button/Button.appearance-styles.tsx","../src/button/variants/filled.ts","../src/button/variants/ghost.ts","../src/button/variants/outlined.ts","../src/button/variants/tinted.ts","../src/button/variants/contrast.ts","../src/button/Button.styles.tsx","../src/button/Button.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const buttonAppearanceStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'rounded-button',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Add underline to the button text.\n       */\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Semantic appearance of the button that combines design and intent.\n       * When specified, this prop overrides both `design` and `intent`.\n       *\n       * - `primary`: Main action, filled background\n       * - `secondary`: Secondary action, filled support background\n       * - `tertiary`: Tertiary action, outlined with surface background\n       * - `contrast`: Contrast action, surface background\n       * - `ghost`: Link-style without background\n       * - `success`: Success action, outlined with transparent background\n       * - `danger`: Danger action, outlined with transparent background\n       * - `boost`: Accent action, filled accent background\n       * - `AI`: AI action, filled AI background\n       */\n      appearance: {\n        primary: [\n          'bg-main',\n          'text-on-main',\n          'rounded-button',\n          'enabled:hover:bg-main-hovered',\n          'enabled:active:bg-main-hovered',\n          'enabled:focus-visible:bg-main-hovered',\n        ],\n        secondary: [\n          'bg-support',\n          'text-on-support',\n          'rounded-button',\n          'enabled:hover:bg-support-hovered',\n          'enabled:active:bg-support-hovered',\n          'enabled:focus-visible:bg-support-hovered',\n        ],\n        tertiary: [\n          'border-outline',\n          'border-sm',\n          'bg-surface',\n          'text-on-surface',\n          'rounded-button',\n          'enabled:hover:bg-surface-hovered',\n          'enabled:active:bg-surface-hovered',\n          'enabled:focus-visible:bg-surface-hovered',\n        ],\n        contrast: [\n          'bg-surface',\n          'text-on-surface',\n          'rounded-button',\n          'enabled:hover:bg-surface-hovered',\n          'enabled:active:bg-surface-hovered',\n          'enabled:focus-visible:bg-surface-hovered',\n        ],\n        ghost: ['text-on-surface default:-mx-md px-md enabled:hover:bg-surface-hovered'],\n        success: [\n          'border-outline',\n          'border-sm',\n          'bg-transparent',\n          'text-success',\n          'rounded-button',\n          'enabled:hover:bg-success-container',\n          'enabled:active:bg-success-container',\n          'enabled:focus-visible:bg-success-container',\n        ],\n        danger: [\n          'border-outline',\n          'border-sm',\n          'bg-transparent',\n          'text-error',\n          'rounded-button',\n          'enabled:hover:bg-error-container',\n          'enabled:active:bg-error-container',\n          'enabled:focus-visible:bg-error-container',\n        ],\n        boost: [\n          'bg-accent',\n          'text-on-accent',\n          'rounded-button',\n          'enabled:hover:bg-accent-hovered',\n          'enabled:active:bg-accent-hovered',\n          'enabled:focus-visible:bg-accent-hovered',\n        ],\n        AI: [\n          'bg-ai',\n          'text-on-ai',\n          'rounded-button',\n          'enabled:hover:bg-ai-hovered',\n          'enabled:active:bg-ai-hovered',\n          'enabled:focus-visible:bg-ai-hovered',\n        ],\n      },\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32 h-sz-32'],\n        md: ['min-w-sz-44 h-sz-44'],\n        lg: ['min-w-sz-56 h-sz-56'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\nexport type ButtonAppearanceStylesProps = VariantProps<typeof buttonAppearanceStyles>\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  // Main\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw([\n      'bg-main',\n      'text-on-main',\n      'hover:bg-main-hovered',\n      'enabled:active:bg-main-hovered',\n      'focus-visible:bg-main-hovered',\n    ]),\n  },\n  // Support\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw([\n      'bg-support',\n      'text-on-support',\n      'hover:bg-support-hovered',\n      'enabled:active:bg-support-hovered',\n      'focus-visible:bg-support-hovered',\n    ]),\n  },\n  // Accent\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw([\n      'bg-accent',\n      'text-on-accent',\n      'hover:bg-accent-hovered',\n      'enabled:active:bg-accent-hovered',\n      'focus-visible:bg-accent-hovered',\n    ]),\n  },\n  // AI\n  {\n    intent: 'ai',\n    design: 'filled',\n    class: tw([\n      'bg-ai',\n      'text-on-ai',\n      'hover:bg-ai-hovered',\n      'enabled:active:bg-ai-hovered',\n      'focus-visible:bg-ai-hovered',\n    ]),\n  },\n  // Success\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw([\n      'bg-success',\n      'text-on-success',\n      'hover:bg-success-hovered',\n      'enabled:active:bg-success-hovered',\n      'focus-visible:bg-success-hovered',\n    ]),\n  },\n  // Alert\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw([\n      'bg-alert',\n      'text-on-alert',\n      'hover:bg-alert-hovered',\n      'enabled:active:bg-alert-hovered',\n      'focus-visible:bg-alert-hovered',\n    ]),\n  },\n  // Danger\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-error',\n      'hover:bg-error-hovered enabled:active:bg-error-hovered',\n      'focus-visible:bg-error-hovered',\n    ]),\n  },\n  // Info\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-info',\n      'hover:bg-info-hovered enabled:active:bg-info-hovered',\n      'focus-visible:bg-info-hovered',\n    ]),\n  },\n  // Neutral\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw([\n      'bg-neutral',\n      'text-on-neutral',\n      'hover:bg-neutral-hovered',\n      'enabled:active:bg-neutral-hovered',\n      'focus-visible:bg-neutral-hovered',\n    ]),\n  },\n  // Surface\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'filled',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const ghostVariants = [\n  {\n    intent: 'main',\n    design: 'ghost',\n    class: tw([\n      'text-on-main-container',\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'ghost',\n    class: tw([\n      'text-on-support-container',\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'ghost',\n    class: tw([\n      'text-on-accent-container',\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'ghost',\n    class: tw([\n      'text-on-ai-container',\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'ghost',\n    class: tw([\n      'text-on-success-container',\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'ghost',\n    class: tw([\n      'text-on-alert-container',\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'ghost',\n    class: tw([\n      'text-on-error-container',\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'ghost',\n    class: tw([\n      'text-on-info-container',\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'ghost',\n    class: tw([\n      'text-on-neutral-container',\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'ghost',\n    class: tw([\n      'text-surface',\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'ghost',\n    class: tw([\n      'text-surface-inverse',\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n      'text-ai',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'text-surface',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n      'text-surface-inverse',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'text-on-main-container',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'text-on-support-container',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'text-on-accent-container',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'tinted',\n    class: tw([\n      'bg-ai-container',\n      'text-on-ai-container',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'text-on-success-container',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'text-on-alert-container',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'text-on-error-container',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'text-on-info-container',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'text-on-neutral-container',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'tinted',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const contrastVariants = [\n  {\n    intent: 'main',\n    design: 'contrast',\n    class: tw([\n      'text-on-main-contaier bg-surface',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'contrast',\n    class: tw([\n      'text-on-support-container bg-surface',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'contrast',\n    class: tw([\n      'text-on-accent-container bg-surface',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'contrast',\n    class: tw([\n      'text-on-ai-container bg-surface',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'contrast',\n    class: tw([\n      'text-on-success-container bg-surface',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'contrast',\n    class: tw([\n      'text-on-alert-container bg-surface',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'contrast',\n    class: tw([\n      'text-on-error-container bg-surface',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'contrast',\n    class: tw([\n      'text-on-info-container bg-surface',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'contrast',\n    class: tw([\n      'text-on-neutral-container bg-surface',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface bg-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface-inverse bg-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport {\n  contrastVariants,\n  filledVariants,\n  ghostVariants,\n  outlinedVariants,\n  tintedVariants,\n} from './variants'\n\nexport const buttonStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * 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.\n       *\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n        filled: [],\n        outlined: ['bg-transparent', 'border-sm', 'border-current'],\n        tinted: [],\n        ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n        contrast: [],\n      }),\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'ai',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        ai: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32', 'h-sz-32'],\n        md: ['min-w-sz-44', 'h-sz-44'],\n        lg: ['min-w-sz-56', 'h-sz-56'],\n      }),\n      /**\n       * Shape of the button.\n       */\n      shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n        rounded: ['rounded-button'],\n        square: ['rounded-0'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    compoundVariants: [\n      ...filledVariants,\n      ...outlinedVariants,\n      ...tintedVariants,\n      ...ghostVariants,\n      ...contrastVariants,\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'main',\n      size: 'md',\n      shape: 'rounded',\n    },\n  }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'\n\nimport { Slot, wrapPolymorphicSlot } from '../slot'\nimport { Spinner, type SpinnerProps } from '../spinner'\nimport {\n  buttonAppearanceStyles,\n  type ButtonAppearanceStylesProps,\n} from './Button.appearance-styles'\nimport { buttonStyles, type ButtonStylesProps } from './Button.styles'\n\nexport interface ButtonProps\n  extends\n    Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>,\n    Omit<ButtonStylesProps, 'design' | 'intent'>,\n    Pick<ButtonAppearanceStylesProps, 'appearance'> {\n  /**\n   * Main style of the button.\n   */\n  design?: ButtonStylesProps['design']\n  /**\n   * Color scheme of the button.\n   */\n  intent?: ButtonStylesProps['intent']\n  /**\n   * Combined appearance preset (replaces `design` and `intent`).\n   * @beta This API is in beta and may change in future versions.\n   */\n  appearance?: ButtonAppearanceStylesProps['appearance']\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Display a spinner to indicate to the user that the button is loading something after they interacted with it.\n   */\n  isLoading?: boolean\n  /**\n   * If your loading state should only display a spinner, it is better to specify a label for it (a11y).\n   */\n  loadingLabel?: string\n  /**\n   * 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.**\n   */\n  loadingText?: string\n  /**\n   * When true, the button is non-interactive and has disabled styling but stays focusable (uses\n   * `aria-disabled` instead of native `disabled`). Use for cases where the user should be able to\n   * focus the control to discover why it is disabled (e.g. form submit, bulk bar actions).\n   */\n  ariaDisabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n  DOMAttributes<HTMLButtonElement>,\n  'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseOver',\n  'onMouseOut',\n  'onKeyDown',\n  'onKeyPress',\n  'onKeyUp',\n  'onSubmit',\n]\n\n/**\n * A clickable element that triggers an action or event when activated by the user.\n */\nexport const Button = ({\n  children,\n  design = 'filled',\n  disabled = false,\n  ariaDisabled = false,\n  intent = 'main',\n  isLoading = false,\n  loadingLabel,\n  loadingText,\n  shape = 'pill',\n  size = 'md',\n  asChild,\n  className,\n  underline = false,\n  appearance,\n  ref,\n  ...others\n}: ButtonProps) => {\n  const Component = asChild ? Slot : 'button'\n\n  const shouldNotInteract = !!disabled || !!ariaDisabled || isLoading\n  const useNativeDisabled = !!disabled && !ariaDisabled\n\n  const disabledEventHandlers = useMemo(() => {\n    const result: Partial<Record<DOMAttributesEventHandler, (e: React.SyntheticEvent) => void>> = {}\n\n    if (shouldNotInteract) {\n      blockedEventHandlers.forEach(key => {\n        result[key] = (e: React.SyntheticEvent) => {\n          // Allow Tab to move focus away from the button\n          if (e.type === 'keydown' && (e as React.KeyboardEvent).key === 'Tab') return\n          /*\n            Setting handlers to `undefined` (e.g. `result[eventHandler] = undefined`) only blocks JS-level handlers, it does not prevent native browser behavior.\n            Calling preventDefault() here also blocks native form submission when type=\"submit\", since the browser triggers it from the click chain.\n          */\n          e.preventDefault()\n        }\n      })\n    }\n\n    return result\n  }, [shouldNotInteract])\n\n  const spinnerProps = {\n    size: 'current' as SpinnerProps['size'],\n    className: loadingText ? 'inline-block' : 'absolute',\n    ...(loadingLabel && { 'aria-label': loadingLabel }),\n  }\n\n  // Use appearance styles when appearance is specified, otherwise use legacy styles\n  const buttonClassName = appearance\n    ? buttonAppearanceStyles({\n        className,\n        appearance,\n        disabled: shouldNotInteract,\n        size,\n        underline,\n      })\n    : buttonStyles({\n        className,\n        design,\n        disabled: shouldNotInteract,\n        intent,\n        shape,\n        size,\n        underline,\n      })\n\n  return (\n    <Component\n      data-spark-component=\"button\"\n      {...(Component === 'button' && { type: 'button' })}\n      ref={ref}\n      className={buttonClassName}\n      disabled={useNativeDisabled}\n      aria-disabled={shouldNotInteract ? true : undefined}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'assertive' : 'off'}\n      {...others}\n      {...disabledEventHandlers}\n    >\n      {wrapPolymorphicSlot(asChild, children, slotted =>\n        isLoading ? (\n          <>\n            <Spinner {...spinnerProps} />\n            {loadingText}\n\n            <div\n              aria-hidden\n              className={cx('gap-md', loadingText ? 'hidden' : 'inline-flex opacity-0')}\n            >\n              {slotted}\n            </div>\n          </>\n        ) : (\n          slotted\n        )\n      )}\n    </Component>\n  )\n}\n\nButton.displayName = 'Button'\n"],"mappings":";;;;;;;AAGA,IAAa,IAAyB,EACpC;CACE;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EAIR,WAAW,EACT,MAAM,CAAC,WAAW,EACpB;EAeA,YAAY;GACV,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;IACA;IACA;GACF;GACA,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO,CAAC,uEAAuE;GAC/E,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EAIA,MAAM,EAAyC;GAC7C,IAAI,CAAC,qBAAqB;GAC1B,IAAI,CAAC,qBAAqB;GAC1B,IAAI,CAAC,qBAAqB;EAC5B,CAAC;EAID,UAAU;GACR,MAAM,CAAC,kCAAkC;GACzC,OAAO,CAAC,gBAAgB;EAC1B;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF,GC7Ha,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GChIa,IAAgB;CAC3B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GC/Ga,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GC/Ga,IAAiB;CAC5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GC1Ha,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GAC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"}