@spark-ui/button 1.13.5 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/index.js +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.15.0](https://github.com/adevinta/spark/compare/@spark-ui/button@1.14.0...@spark-ui/button@1.15.0) (2023-07-26)
7
+
8
+ ### Features
9
+
10
+ - got some beta packages out of beta ([599e348](https://github.com/adevinta/spark/commit/599e3487d1fee532d93015dbac495cf230452c8a))
11
+
12
+ # [1.14.0](https://github.com/adevinta/spark/compare/@spark-ui/button@1.13.5...@spark-ui/button@1.14.0) (2023-07-10)
13
+
14
+ ### Features
15
+
16
+ - **input:** first iteration of border ([4aeb861](https://github.com/adevinta/spark/commit/4aeb861844d13437c8c1f9b4a97123512083b6b2))
17
+
6
18
  ## [1.13.5](https://github.com/adevinta/spark/compare/@spark-ui/button@1.13.4...@spark-ui/button@1.13.5) (2023-07-10)
7
19
 
8
20
  **Note:** Version bump only for package @spark-ui/button
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("@spark-ui/slot"),q=require("@spark-ui/spinner"),u=require("class-variance-authority"),s=require("react"),e=require("@spark-ui/internal-utils"),N=[{intent:"primary",design:"filled",class:e.tw(["bg-primary","text-on-primary","hover:bg-primary-hovered","enabled:active:bg-primary-pressed","focus-visible:bg-primary-focused"])},{intent:"secondary",design:"filled",class:e.tw(["bg-secondary","text-on-secondary","hover:bg-secondary-hovered","enabled:active:bg-secondary-pressed","focus-visible:bg-secondary-focused"])},{intent:"success",design:"filled",class:e.tw(["bg-success","text-on-success","hover:bg-success-hovered","enabled:active:bg-success-pressed","focus-visible:bg-success-focused"])},{intent:"alert",design:"filled",class:e.tw(["bg-alert","text-on-alert","hover:bg-alert-hovered","enabled:active:bg-alert-pressed","focus-visible:bg-alert-focused"])},{intent:"danger",design:"filled",class:e.tw(["text-on-error bg-error","hover:bg-error-hovered enabled:active:bg-error-pressed","focus-visible:bg-error-focused"])},{intent:"info",design:"filled",class:e.tw(["text-on-error bg-info","hover:bg-info-hovered enabled:active:bg-info-pressed","focus-visible:bg-info-focused"])},{intent:"neutral",design:"filled",class:e.tw(["bg-neutral","text-on-neutral","hover:bg-neutral-hovered","enabled:active:bg-neutral-pressed","focus-visible:bg-neutral-focused"])},{intent:"surface",design:"filled",class:e.tw(["bg-surface","text-on-surface","hover:bg-surface-hovered","enabled:active:bg-surface-pressed","focus-visible:bg-surface-focused"])}],V=[{intent:"primary",design:"ghost",class:e.tw(["text-primary","hover:bg-primary/dim-5","enabled:active:bg-primary/dim-5","focus-visible:bg-primary/dim-5"])},{intent:"secondary",design:"ghost",class:e.tw(["text-secondary","hover:bg-secondary/dim-5","enabled:active:bg-secondary/dim-5","focus-visible:bg-secondary/dim-5"])},{intent:"success",design:"ghost",class:e.tw(["text-success","hover:bg-success/dim-5","enabled:active:bg-success/dim-5","focus-visible:bg-success/dim-5"])},{intent:"alert",design:"ghost",class:e.tw(["text-alert","hover:bg-alert/dim-5","enabled:active:bg-alert/dim-5","focus-visible:bg-alert/dim-5"])},{intent:"danger",design:"ghost",class:e.tw(["text-error","hover:bg-error/dim-5","enabled:active:bg-error/dim-5","focus-visible:bg-error/dim-5"])},{intent:"info",design:"ghost",class:e.tw(["text-info","hover:bg-info/dim-5","enabled:active:bg-info/dim-5","focus-visible:bg-info/dim-5"])},{intent:"neutral",design:"ghost",class:e.tw(["text-neutral","hover:bg-neutral/dim-5","enabled:active:bg-neutral/dim-5","focus-visible:bg-neutral/dim-5"])},{intent:"surface",design:"ghost",class:e.tw(["text-surface","hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5"])}],S=[{intent:"primary",design:"outlined",class:e.tw(["hover:bg-primary/dim-5","enabled:active:bg-primary/dim-5","focus-visible:bg-primary/dim-5","text-primary"])},{intent:"secondary",design:"outlined",class:e.tw(["hover:bg-secondary/dim-5","enabled:active:bg-secondary/dim-5","focus-visible:bg-secondary/dim-5","text-secondary"])},{intent:"success",design:"outlined",class:e.tw(["hover:bg-success/dim-5","enabled:active:bg-success/dim-5","focus-visible:bg-success/dim-5","text-success"])},{intent:"alert",design:"outlined",class:e.tw(["hover:bg-alert/dim-5","enabled:active:bg-alert/dim-5","focus-visible:bg-alert/dim-5","text-alert"])},{intent:"danger",design:"outlined",class:e.tw(["hover:bg-error/dim-5","enabled:active:bg-error/dim-5","focus-visible:bg-error/dim-5","text-error"])},{intent:"info",design:"outlined",class:e.tw(["hover:bg-info/dim-5","enabled:active:bg-info/dim-5","focus-visible:bg-info/dim-5","text-info"])},{intent:"neutral",design:"outlined",class:e.tw(["hover:bg-neutral/dim-5","enabled:active:bg-neutral/dim-5","focus-visible:bg-neutral/dim-5","text-neutral"])},{intent:"surface",design:"outlined",class:e.tw(["hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5","text-surface"])}],E=[{intent:"primary",design:"tinted",class:e.tw(["bg-primary-container","text-on-primary-container","hover:bg-primary-container-hovered","enabled:active:bg-primary-container-pressed","focus-visible:bg-primary-container-focused"])},{intent:"secondary",design:"tinted",class:e.tw(["bg-secondary-container","text-on-secondary-container","hover:bg-secondary-container-hovered","enabled:active:bg-secondary-container-pressed","focus-visible:bg-secondary-container-focused"])},{intent:"success",design:"tinted",class:e.tw(["bg-success-container","text-on-success-container","hover:bg-success-container-hovered","enabled:active:bg-success-container-pressed","focus-visible:bg-success-container-focused"])},{intent:"alert",design:"tinted",class:e.tw(["bg-alert-container","text-on-alert-container","hover:bg-alert-container-hovered","enabled:active:bg-alert-container-pressed","focus-visible:bg-alert-container-focused"])},{intent:"danger",design:"tinted",class:e.tw(["bg-error-container","text-on-error-container","hover:bg-error-container-hovered","enabled:active:bg-error-container-pressed","focus-visible:bg-error-container-focused"])},{intent:"info",design:"tinted",class:e.tw(["bg-info-container","text-on-info-container","hover:bg-info-container-hovered","enabled:active:bg-info-container-pressed","focus-visible:bg-info-container-focused"])},{intent:"neutral",design:"tinted",class:e.tw(["bg-neutral-container","text-on-neutral-container","hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-pressed","focus-visible:bg-neutral-container-focused"])},{intent:"surface",design:"tinted",class:e.tw(["bg-surface","text-on-surface","hover:bg-surface-hovered","enabled:active:bg-surface-pressed","focus-visible:bg-surface-focused"])}],C=[{intent:"primary",design:"contrast",class:e.tw(["text-primary","hover:bg-primary-container-hovered","enabled:active:bg-primary-container-pressed","focus-visible:bg-primary-container-focused"])},{intent:"secondary",design:"contrast",class:e.tw(["text-secondary","hover:bg-secondary-container-hovered","enabled:active:bg-secondary-container-pressed","focus-visible:bg-secondary-container-focused"])},{intent:"success",design:"contrast",class:e.tw(["text-success","hover:bg-success-container-hovered","enabled:active:bg-success-container-pressed","focus-visible:bg-success-container-focused"])},{intent:"alert",design:"contrast",class:e.tw(["text-alert","hover:bg-alert-container-hovered","enabled:active:bg-alert-container-pressed","focus-visible:bg-alert-container-focused"])},{intent:"danger",design:"contrast",class:e.tw(["text-error","hover:bg-error-container-hovered","enabled:active:bg-error-container-pressed","focus-visible:bg-error-container-focused"])},{intent:"info",design:"contrast",class:e.tw(["text-info","hover:bg-info-container-hovered","enabled:active:bg-info-container-pressed","focus-visible:bg-info-container-focused"])},{intent:"neutral",design:"contrast",class:e.tw(["text-neutral","hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-pressed","focus-visible:bg-neutral-container-focused"])},{intent:"surface",design:"contrast",class:e.tw(["text-on-surface","hover:bg-surface-hovered","enabled:active:bg-surface-pressed","focus-visible:bg-surface-focused"])}],P=u.cva(["u-shadow-border-transition","box-border inline-flex items-center justify-center gap-md whitespace-nowrap","px-lg","text-body-1 font-bold","ring-inset focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-high"],{variants:{design:e.makeVariants({filled:[],outlined:["bg-transparent","ring-1","ring-current"],tinted:[],ghost:[],contrast:["bg-surface"]}),intent:e.makeVariants({primary:[],secondary:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),size:e.makeVariants({sm:["min-w-sz-32","h-sz-32"],md:["min-w-sz-44","h-sz-44"],lg:["min-w-sz-56","h-sz-56"]}),shape:e.makeVariants({rounded:["rounded-lg"],square:["rounded-none"],pill:["rounded-full"]}),disabled:{true:["cursor-not-allowed","opacity-dim-3"]}},compoundVariants:[...N,...S,...E,...V,...C],defaultVariants:{design:"filled",intent:"primary",size:"md",shape:"rounded"}}),g=s.forwardRef(({children:v,design:f="filled",disabled:m=!1,intent:h="primary",isLoading:t=!1,loadingLabel:a,loadingText:i,onClick:o,shape:p="rounded",size:y="md",spinnerPlacement:c="left",asChild:d,className:w,...x},z)=>{const k=d?b.Slot:"button",r=!!m||t,l=t?s.createElement(q.Spinner,{size:"current",className:i?"inline-block":"absolute",...a&&{"aria-label":a}}):null;return s.createElement(k,{"data-spark-component":"button",ref:z,className:P({className:w,design:f,disabled:r,intent:h,shape:p,size:y}),disabled:r,"aria-live":t?"assertive":"off",onClick:n=>{r&&n.preventDefault(),o&&o(n)},...x},b.wrapPolymorphicSlot(d,v,n=>t?s.createElement(s.Fragment,null,c==="left"&&l,i&&i,c==="right"&&l,s.createElement("div",{"aria-hidden":!0,className:u.cx("gap-md inline-flex",i?"hidden":"opacity-0")},n)):n))});g.displayName="Button",exports.Button=g;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("@spark-ui/slot"),q=require("@spark-ui/spinner"),u=require("class-variance-authority"),s=require("react"),e=require("@spark-ui/internal-utils"),N=[{intent:"primary",design:"filled",class:e.tw(["bg-primary","text-on-primary","hover:bg-primary-hovered","enabled:active:bg-primary-pressed","focus-visible:bg-primary-focused"])},{intent:"secondary",design:"filled",class:e.tw(["bg-secondary","text-on-secondary","hover:bg-secondary-hovered","enabled:active:bg-secondary-pressed","focus-visible:bg-secondary-focused"])},{intent:"success",design:"filled",class:e.tw(["bg-success","text-on-success","hover:bg-success-hovered","enabled:active:bg-success-pressed","focus-visible:bg-success-focused"])},{intent:"alert",design:"filled",class:e.tw(["bg-alert","text-on-alert","hover:bg-alert-hovered","enabled:active:bg-alert-pressed","focus-visible:bg-alert-focused"])},{intent:"danger",design:"filled",class:e.tw(["text-on-error bg-error","hover:bg-error-hovered enabled:active:bg-error-pressed","focus-visible:bg-error-focused"])},{intent:"info",design:"filled",class:e.tw(["text-on-error bg-info","hover:bg-info-hovered enabled:active:bg-info-pressed","focus-visible:bg-info-focused"])},{intent:"neutral",design:"filled",class:e.tw(["bg-neutral","text-on-neutral","hover:bg-neutral-hovered","enabled:active:bg-neutral-pressed","focus-visible:bg-neutral-focused"])},{intent:"surface",design:"filled",class:e.tw(["bg-surface","text-on-surface","hover:bg-surface-hovered","enabled:active:bg-surface-pressed","focus-visible:bg-surface-focused"])}],V=[{intent:"primary",design:"ghost",class:e.tw(["text-primary","hover:bg-primary/dim-5","enabled:active:bg-primary/dim-5","focus-visible:bg-primary/dim-5"])},{intent:"secondary",design:"ghost",class:e.tw(["text-secondary","hover:bg-secondary/dim-5","enabled:active:bg-secondary/dim-5","focus-visible:bg-secondary/dim-5"])},{intent:"success",design:"ghost",class:e.tw(["text-success","hover:bg-success/dim-5","enabled:active:bg-success/dim-5","focus-visible:bg-success/dim-5"])},{intent:"alert",design:"ghost",class:e.tw(["text-alert","hover:bg-alert/dim-5","enabled:active:bg-alert/dim-5","focus-visible:bg-alert/dim-5"])},{intent:"danger",design:"ghost",class:e.tw(["text-error","hover:bg-error/dim-5","enabled:active:bg-error/dim-5","focus-visible:bg-error/dim-5"])},{intent:"info",design:"ghost",class:e.tw(["text-info","hover:bg-info/dim-5","enabled:active:bg-info/dim-5","focus-visible:bg-info/dim-5"])},{intent:"neutral",design:"ghost",class:e.tw(["text-neutral","hover:bg-neutral/dim-5","enabled:active:bg-neutral/dim-5","focus-visible:bg-neutral/dim-5"])},{intent:"surface",design:"ghost",class:e.tw(["text-surface","hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5"])}],S=[{intent:"primary",design:"outlined",class:e.tw(["hover:bg-primary/dim-5","enabled:active:bg-primary/dim-5","focus-visible:bg-primary/dim-5","text-primary"])},{intent:"secondary",design:"outlined",class:e.tw(["hover:bg-secondary/dim-5","enabled:active:bg-secondary/dim-5","focus-visible:bg-secondary/dim-5","text-secondary"])},{intent:"success",design:"outlined",class:e.tw(["hover:bg-success/dim-5","enabled:active:bg-success/dim-5","focus-visible:bg-success/dim-5","text-success"])},{intent:"alert",design:"outlined",class:e.tw(["hover:bg-alert/dim-5","enabled:active:bg-alert/dim-5","focus-visible:bg-alert/dim-5","text-alert"])},{intent:"danger",design:"outlined",class:e.tw(["hover:bg-error/dim-5","enabled:active:bg-error/dim-5","focus-visible:bg-error/dim-5","text-error"])},{intent:"info",design:"outlined",class:e.tw(["hover:bg-info/dim-5","enabled:active:bg-info/dim-5","focus-visible:bg-info/dim-5","text-info"])},{intent:"neutral",design:"outlined",class:e.tw(["hover:bg-neutral/dim-5","enabled:active:bg-neutral/dim-5","focus-visible:bg-neutral/dim-5","text-neutral"])},{intent:"surface",design:"outlined",class:e.tw(["hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5","text-surface"])}],E=[{intent:"primary",design:"tinted",class:e.tw(["bg-primary-container","text-on-primary-container","hover:bg-primary-container-hovered","enabled:active:bg-primary-container-pressed","focus-visible:bg-primary-container-focused"])},{intent:"secondary",design:"tinted",class:e.tw(["bg-secondary-container","text-on-secondary-container","hover:bg-secondary-container-hovered","enabled:active:bg-secondary-container-pressed","focus-visible:bg-secondary-container-focused"])},{intent:"success",design:"tinted",class:e.tw(["bg-success-container","text-on-success-container","hover:bg-success-container-hovered","enabled:active:bg-success-container-pressed","focus-visible:bg-success-container-focused"])},{intent:"alert",design:"tinted",class:e.tw(["bg-alert-container","text-on-alert-container","hover:bg-alert-container-hovered","enabled:active:bg-alert-container-pressed","focus-visible:bg-alert-container-focused"])},{intent:"danger",design:"tinted",class:e.tw(["bg-error-container","text-on-error-container","hover:bg-error-container-hovered","enabled:active:bg-error-container-pressed","focus-visible:bg-error-container-focused"])},{intent:"info",design:"tinted",class:e.tw(["bg-info-container","text-on-info-container","hover:bg-info-container-hovered","enabled:active:bg-info-container-pressed","focus-visible:bg-info-container-focused"])},{intent:"neutral",design:"tinted",class:e.tw(["bg-neutral-container","text-on-neutral-container","hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-pressed","focus-visible:bg-neutral-container-focused"])},{intent:"surface",design:"tinted",class:e.tw(["bg-surface","text-on-surface","hover:bg-surface-hovered","enabled:active:bg-surface-pressed","focus-visible:bg-surface-focused"])}],C=[{intent:"primary",design:"contrast",class:e.tw(["text-primary","hover:bg-primary-container-hovered","enabled:active:bg-primary-container-pressed","focus-visible:bg-primary-container-focused"])},{intent:"secondary",design:"contrast",class:e.tw(["text-secondary","hover:bg-secondary-container-hovered","enabled:active:bg-secondary-container-pressed","focus-visible:bg-secondary-container-focused"])},{intent:"success",design:"contrast",class:e.tw(["text-success","hover:bg-success-container-hovered","enabled:active:bg-success-container-pressed","focus-visible:bg-success-container-focused"])},{intent:"alert",design:"contrast",class:e.tw(["text-alert","hover:bg-alert-container-hovered","enabled:active:bg-alert-container-pressed","focus-visible:bg-alert-container-focused"])},{intent:"danger",design:"contrast",class:e.tw(["text-error","hover:bg-error-container-hovered","enabled:active:bg-error-container-pressed","focus-visible:bg-error-container-focused"])},{intent:"info",design:"contrast",class:e.tw(["text-info","hover:bg-info-container-hovered","enabled:active:bg-info-container-pressed","focus-visible:bg-info-container-focused"])},{intent:"neutral",design:"contrast",class:e.tw(["text-neutral","hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-pressed","focus-visible:bg-neutral-container-focused"])},{intent:"surface",design:"contrast",class:e.tw(["text-on-surface","hover:bg-surface-hovered","enabled:active:bg-surface-pressed","focus-visible:bg-surface-focused"])}],P=u.cva(["u-shadow-border-transition","box-border inline-flex items-center justify-center gap-md whitespace-nowrap","px-lg","text-body-1 font-bold","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-high [&:not(:focus-visible)]:ring-inset"],{variants:{design:e.makeVariants({filled:[],outlined:["bg-transparent","ring-1","ring-current"],tinted:[],ghost:[],contrast:["bg-surface"]}),intent:e.makeVariants({primary:[],secondary:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),size:e.makeVariants({sm:["min-w-sz-32","h-sz-32"],md:["min-w-sz-44","h-sz-44"],lg:["min-w-sz-56","h-sz-56"]}),shape:e.makeVariants({rounded:["rounded-lg"],square:["rounded-none"],pill:["rounded-full"]}),disabled:{true:["cursor-not-allowed","opacity-dim-3"]}},compoundVariants:[...N,...S,...E,...V,...C],defaultVariants:{design:"filled",intent:"primary",size:"md",shape:"rounded"}}),g=s.forwardRef(({children:v,design:f="filled",disabled:m=!1,intent:h="primary",isLoading:t=!1,loadingLabel:a,loadingText:i,onClick:o,shape:p="rounded",size:y="md",spinnerPlacement:c="left",asChild:d,className:w,...x},z)=>{const k=d?b.Slot:"button",r=!!m||t,l=t?s.createElement(q.Spinner,{size:"current",className:i?"inline-block":"absolute",...a&&{"aria-label":a}}):null;return s.createElement(k,{"data-spark-component":"button",ref:z,className:P({className:w,design:f,disabled:r,intent:h,shape:p,size:y}),disabled:r,"aria-live":t?"assertive":"off",onClick:n=>{r&&n.preventDefault(),o&&o(n)},...x},b.wrapPolymorphicSlot(d,v,n=>t?s.createElement(s.Fragment,null,c==="left"&&l,i&&i,c==="right"&&l,s.createElement("div",{"aria-hidden":!0,className:u.cx("gap-md inline-flex",i?"hidden":"opacity-0")},n)):n))});g.displayName="Button",exports.Button=g;
package/dist/index.mjs CHANGED
@@ -3,7 +3,7 @@ import { Spinner as N } from "@spark-ui/spinner";
3
3
  import { cva as E, cx as C } from "class-variance-authority";
4
4
  import s from "react";
5
5
  import { tw as e, makeVariants as t } from "@spark-ui/internal-utils";
6
- const S = [{ intent: "primary", design: "filled", class: e(["bg-primary", "text-on-primary", "hover:bg-primary-hovered", "enabled:active:bg-primary-pressed", "focus-visible:bg-primary-focused"]) }, { intent: "secondary", design: "filled", class: e(["bg-secondary", "text-on-secondary", "hover:bg-secondary-hovered", "enabled:active:bg-secondary-pressed", "focus-visible:bg-secondary-focused"]) }, { intent: "success", design: "filled", class: e(["bg-success", "text-on-success", "hover:bg-success-hovered", "enabled:active:bg-success-pressed", "focus-visible:bg-success-focused"]) }, { intent: "alert", design: "filled", class: e(["bg-alert", "text-on-alert", "hover:bg-alert-hovered", "enabled:active:bg-alert-pressed", "focus-visible:bg-alert-focused"]) }, { intent: "danger", design: "filled", class: e(["text-on-error bg-error", "hover:bg-error-hovered enabled:active:bg-error-pressed", "focus-visible:bg-error-focused"]) }, { intent: "info", design: "filled", class: e(["text-on-error bg-info", "hover:bg-info-hovered enabled:active:bg-info-pressed", "focus-visible:bg-info-focused"]) }, { intent: "neutral", design: "filled", class: e(["bg-neutral", "text-on-neutral", "hover:bg-neutral-hovered", "enabled:active:bg-neutral-pressed", "focus-visible:bg-neutral-focused"]) }, { intent: "surface", design: "filled", class: e(["bg-surface", "text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], V = [{ intent: "primary", design: "ghost", class: e(["text-primary", "hover:bg-primary/dim-5", "enabled:active:bg-primary/dim-5", "focus-visible:bg-primary/dim-5"]) }, { intent: "secondary", design: "ghost", class: e(["text-secondary", "hover:bg-secondary/dim-5", "enabled:active:bg-secondary/dim-5", "focus-visible:bg-secondary/dim-5"]) }, { intent: "success", design: "ghost", class: e(["text-success", "hover:bg-success/dim-5", "enabled:active:bg-success/dim-5", "focus-visible:bg-success/dim-5"]) }, { intent: "alert", design: "ghost", class: e(["text-alert", "hover:bg-alert/dim-5", "enabled:active:bg-alert/dim-5", "focus-visible:bg-alert/dim-5"]) }, { intent: "danger", design: "ghost", class: e(["text-error", "hover:bg-error/dim-5", "enabled:active:bg-error/dim-5", "focus-visible:bg-error/dim-5"]) }, { intent: "info", design: "ghost", class: e(["text-info", "hover:bg-info/dim-5", "enabled:active:bg-info/dim-5", "focus-visible:bg-info/dim-5"]) }, { intent: "neutral", design: "ghost", class: e(["text-neutral", "hover:bg-neutral/dim-5", "enabled:active:bg-neutral/dim-5", "focus-visible:bg-neutral/dim-5"]) }, { intent: "surface", design: "ghost", class: e(["text-surface", "hover:bg-surface/dim-5", "enabled:active:bg-surface/dim-5", "focus-visible:bg-surface/dim-5"]) }], B = [{ intent: "primary", design: "outlined", class: e(["hover:bg-primary/dim-5", "enabled:active:bg-primary/dim-5", "focus-visible:bg-primary/dim-5", "text-primary"]) }, { intent: "secondary", design: "outlined", class: e(["hover:bg-secondary/dim-5", "enabled:active:bg-secondary/dim-5", "focus-visible:bg-secondary/dim-5", "text-secondary"]) }, { intent: "success", design: "outlined", class: e(["hover:bg-success/dim-5", "enabled:active:bg-success/dim-5", "focus-visible:bg-success/dim-5", "text-success"]) }, { intent: "alert", design: "outlined", class: e(["hover:bg-alert/dim-5", "enabled:active:bg-alert/dim-5", "focus-visible:bg-alert/dim-5", "text-alert"]) }, { intent: "danger", design: "outlined", class: e(["hover:bg-error/dim-5", "enabled:active:bg-error/dim-5", "focus-visible:bg-error/dim-5", "text-error"]) }, { intent: "info", design: "outlined", class: e(["hover:bg-info/dim-5", "enabled:active:bg-info/dim-5", "focus-visible:bg-info/dim-5", "text-info"]) }, { intent: "neutral", design: "outlined", class: e(["hover:bg-neutral/dim-5", "enabled:active:bg-neutral/dim-5", "focus-visible:bg-neutral/dim-5", "text-neutral"]) }, { intent: "surface", design: "outlined", class: e(["hover:bg-surface/dim-5", "enabled:active:bg-surface/dim-5", "focus-visible:bg-surface/dim-5", "text-surface"]) }], L = [{ intent: "primary", design: "tinted", class: e(["bg-primary-container", "text-on-primary-container", "hover:bg-primary-container-hovered", "enabled:active:bg-primary-container-pressed", "focus-visible:bg-primary-container-focused"]) }, { intent: "secondary", design: "tinted", class: e(["bg-secondary-container", "text-on-secondary-container", "hover:bg-secondary-container-hovered", "enabled:active:bg-secondary-container-pressed", "focus-visible:bg-secondary-container-focused"]) }, { intent: "success", design: "tinted", class: e(["bg-success-container", "text-on-success-container", "hover:bg-success-container-hovered", "enabled:active:bg-success-container-pressed", "focus-visible:bg-success-container-focused"]) }, { intent: "alert", design: "tinted", class: e(["bg-alert-container", "text-on-alert-container", "hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-pressed", "focus-visible:bg-alert-container-focused"]) }, { intent: "danger", design: "tinted", class: e(["bg-error-container", "text-on-error-container", "hover:bg-error-container-hovered", "enabled:active:bg-error-container-pressed", "focus-visible:bg-error-container-focused"]) }, { intent: "info", design: "tinted", class: e(["bg-info-container", "text-on-info-container", "hover:bg-info-container-hovered", "enabled:active:bg-info-container-pressed", "focus-visible:bg-info-container-focused"]) }, { intent: "neutral", design: "tinted", class: e(["bg-neutral-container", "text-on-neutral-container", "hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-pressed", "focus-visible:bg-neutral-container-focused"]) }, { intent: "surface", design: "tinted", class: e(["bg-surface", "text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], P = [{ intent: "primary", design: "contrast", class: e(["text-primary", "hover:bg-primary-container-hovered", "enabled:active:bg-primary-container-pressed", "focus-visible:bg-primary-container-focused"]) }, { intent: "secondary", design: "contrast", class: e(["text-secondary", "hover:bg-secondary-container-hovered", "enabled:active:bg-secondary-container-pressed", "focus-visible:bg-secondary-container-focused"]) }, { intent: "success", design: "contrast", class: e(["text-success", "hover:bg-success-container-hovered", "enabled:active:bg-success-container-pressed", "focus-visible:bg-success-container-focused"]) }, { intent: "alert", design: "contrast", class: e(["text-alert", "hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-pressed", "focus-visible:bg-alert-container-focused"]) }, { intent: "danger", design: "contrast", class: e(["text-error", "hover:bg-error-container-hovered", "enabled:active:bg-error-container-pressed", "focus-visible:bg-error-container-focused"]) }, { intent: "info", design: "contrast", class: e(["text-info", "hover:bg-info-container-hovered", "enabled:active:bg-info-container-pressed", "focus-visible:bg-info-container-focused"]) }, { intent: "neutral", design: "contrast", class: e(["text-neutral", "hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-pressed", "focus-visible:bg-neutral-container-focused"]) }, { intent: "surface", design: "contrast", class: e(["text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], j = E(["u-shadow-border-transition", "box-border inline-flex items-center justify-center gap-md whitespace-nowrap", "px-lg", "text-body-1 font-bold", "ring-inset focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-high"], { variants: { design: t({ filled: [], outlined: ["bg-transparent", "ring-1", "ring-current"], tinted: [], ghost: [], contrast: ["bg-surface"] }), intent: t({ primary: [], secondary: [], success: [], alert: [], danger: [], info: [], neutral: [], surface: [] }), size: t({ 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: t({ rounded: ["rounded-lg"], square: ["rounded-none"], pill: ["rounded-full"] }), disabled: { true: ["cursor-not-allowed", "opacity-dim-3"] } }, compoundVariants: [...S, ...B, ...L, ...V, ...P], defaultVariants: { design: "filled", intent: "primary", size: "md", shape: "rounded" } }), q = s.forwardRef(({ children: g, design: u = "filled", disabled: f = !1, intent: v = "primary", isLoading: i = !1, loadingLabel: o, loadingText: r, onClick: c, shape: m = "rounded", size: h = "md", spinnerPlacement: d = "left", asChild: l, className: p, ...y }, x) => {
6
+ const S = [{ intent: "primary", design: "filled", class: e(["bg-primary", "text-on-primary", "hover:bg-primary-hovered", "enabled:active:bg-primary-pressed", "focus-visible:bg-primary-focused"]) }, { intent: "secondary", design: "filled", class: e(["bg-secondary", "text-on-secondary", "hover:bg-secondary-hovered", "enabled:active:bg-secondary-pressed", "focus-visible:bg-secondary-focused"]) }, { intent: "success", design: "filled", class: e(["bg-success", "text-on-success", "hover:bg-success-hovered", "enabled:active:bg-success-pressed", "focus-visible:bg-success-focused"]) }, { intent: "alert", design: "filled", class: e(["bg-alert", "text-on-alert", "hover:bg-alert-hovered", "enabled:active:bg-alert-pressed", "focus-visible:bg-alert-focused"]) }, { intent: "danger", design: "filled", class: e(["text-on-error bg-error", "hover:bg-error-hovered enabled:active:bg-error-pressed", "focus-visible:bg-error-focused"]) }, { intent: "info", design: "filled", class: e(["text-on-error bg-info", "hover:bg-info-hovered enabled:active:bg-info-pressed", "focus-visible:bg-info-focused"]) }, { intent: "neutral", design: "filled", class: e(["bg-neutral", "text-on-neutral", "hover:bg-neutral-hovered", "enabled:active:bg-neutral-pressed", "focus-visible:bg-neutral-focused"]) }, { intent: "surface", design: "filled", class: e(["bg-surface", "text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], V = [{ intent: "primary", design: "ghost", class: e(["text-primary", "hover:bg-primary/dim-5", "enabled:active:bg-primary/dim-5", "focus-visible:bg-primary/dim-5"]) }, { intent: "secondary", design: "ghost", class: e(["text-secondary", "hover:bg-secondary/dim-5", "enabled:active:bg-secondary/dim-5", "focus-visible:bg-secondary/dim-5"]) }, { intent: "success", design: "ghost", class: e(["text-success", "hover:bg-success/dim-5", "enabled:active:bg-success/dim-5", "focus-visible:bg-success/dim-5"]) }, { intent: "alert", design: "ghost", class: e(["text-alert", "hover:bg-alert/dim-5", "enabled:active:bg-alert/dim-5", "focus-visible:bg-alert/dim-5"]) }, { intent: "danger", design: "ghost", class: e(["text-error", "hover:bg-error/dim-5", "enabled:active:bg-error/dim-5", "focus-visible:bg-error/dim-5"]) }, { intent: "info", design: "ghost", class: e(["text-info", "hover:bg-info/dim-5", "enabled:active:bg-info/dim-5", "focus-visible:bg-info/dim-5"]) }, { intent: "neutral", design: "ghost", class: e(["text-neutral", "hover:bg-neutral/dim-5", "enabled:active:bg-neutral/dim-5", "focus-visible:bg-neutral/dim-5"]) }, { intent: "surface", design: "ghost", class: e(["text-surface", "hover:bg-surface/dim-5", "enabled:active:bg-surface/dim-5", "focus-visible:bg-surface/dim-5"]) }], B = [{ intent: "primary", design: "outlined", class: e(["hover:bg-primary/dim-5", "enabled:active:bg-primary/dim-5", "focus-visible:bg-primary/dim-5", "text-primary"]) }, { intent: "secondary", design: "outlined", class: e(["hover:bg-secondary/dim-5", "enabled:active:bg-secondary/dim-5", "focus-visible:bg-secondary/dim-5", "text-secondary"]) }, { intent: "success", design: "outlined", class: e(["hover:bg-success/dim-5", "enabled:active:bg-success/dim-5", "focus-visible:bg-success/dim-5", "text-success"]) }, { intent: "alert", design: "outlined", class: e(["hover:bg-alert/dim-5", "enabled:active:bg-alert/dim-5", "focus-visible:bg-alert/dim-5", "text-alert"]) }, { intent: "danger", design: "outlined", class: e(["hover:bg-error/dim-5", "enabled:active:bg-error/dim-5", "focus-visible:bg-error/dim-5", "text-error"]) }, { intent: "info", design: "outlined", class: e(["hover:bg-info/dim-5", "enabled:active:bg-info/dim-5", "focus-visible:bg-info/dim-5", "text-info"]) }, { intent: "neutral", design: "outlined", class: e(["hover:bg-neutral/dim-5", "enabled:active:bg-neutral/dim-5", "focus-visible:bg-neutral/dim-5", "text-neutral"]) }, { intent: "surface", design: "outlined", class: e(["hover:bg-surface/dim-5", "enabled:active:bg-surface/dim-5", "focus-visible:bg-surface/dim-5", "text-surface"]) }], L = [{ intent: "primary", design: "tinted", class: e(["bg-primary-container", "text-on-primary-container", "hover:bg-primary-container-hovered", "enabled:active:bg-primary-container-pressed", "focus-visible:bg-primary-container-focused"]) }, { intent: "secondary", design: "tinted", class: e(["bg-secondary-container", "text-on-secondary-container", "hover:bg-secondary-container-hovered", "enabled:active:bg-secondary-container-pressed", "focus-visible:bg-secondary-container-focused"]) }, { intent: "success", design: "tinted", class: e(["bg-success-container", "text-on-success-container", "hover:bg-success-container-hovered", "enabled:active:bg-success-container-pressed", "focus-visible:bg-success-container-focused"]) }, { intent: "alert", design: "tinted", class: e(["bg-alert-container", "text-on-alert-container", "hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-pressed", "focus-visible:bg-alert-container-focused"]) }, { intent: "danger", design: "tinted", class: e(["bg-error-container", "text-on-error-container", "hover:bg-error-container-hovered", "enabled:active:bg-error-container-pressed", "focus-visible:bg-error-container-focused"]) }, { intent: "info", design: "tinted", class: e(["bg-info-container", "text-on-info-container", "hover:bg-info-container-hovered", "enabled:active:bg-info-container-pressed", "focus-visible:bg-info-container-focused"]) }, { intent: "neutral", design: "tinted", class: e(["bg-neutral-container", "text-on-neutral-container", "hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-pressed", "focus-visible:bg-neutral-container-focused"]) }, { intent: "surface", design: "tinted", class: e(["bg-surface", "text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], P = [{ intent: "primary", design: "contrast", class: e(["text-primary", "hover:bg-primary-container-hovered", "enabled:active:bg-primary-container-pressed", "focus-visible:bg-primary-container-focused"]) }, { intent: "secondary", design: "contrast", class: e(["text-secondary", "hover:bg-secondary-container-hovered", "enabled:active:bg-secondary-container-pressed", "focus-visible:bg-secondary-container-focused"]) }, { intent: "success", design: "contrast", class: e(["text-success", "hover:bg-success-container-hovered", "enabled:active:bg-success-container-pressed", "focus-visible:bg-success-container-focused"]) }, { intent: "alert", design: "contrast", class: e(["text-alert", "hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-pressed", "focus-visible:bg-alert-container-focused"]) }, { intent: "danger", design: "contrast", class: e(["text-error", "hover:bg-error-container-hovered", "enabled:active:bg-error-container-pressed", "focus-visible:bg-error-container-focused"]) }, { intent: "info", design: "contrast", class: e(["text-info", "hover:bg-info-container-hovered", "enabled:active:bg-info-container-pressed", "focus-visible:bg-info-container-focused"]) }, { intent: "neutral", design: "contrast", class: e(["text-neutral", "hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-pressed", "focus-visible:bg-neutral-container-focused"]) }, { intent: "surface", design: "contrast", class: e(["text-on-surface", "hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], j = E(["u-shadow-border-transition", "box-border inline-flex items-center justify-center gap-md whitespace-nowrap", "px-lg", "text-body-1 font-bold", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-high [&:not(:focus-visible)]:ring-inset"], { variants: { design: t({ filled: [], outlined: ["bg-transparent", "ring-1", "ring-current"], tinted: [], ghost: [], contrast: ["bg-surface"] }), intent: t({ primary: [], secondary: [], success: [], alert: [], danger: [], info: [], neutral: [], surface: [] }), size: t({ 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: t({ rounded: ["rounded-lg"], square: ["rounded-none"], pill: ["rounded-full"] }), disabled: { true: ["cursor-not-allowed", "opacity-dim-3"] } }, compoundVariants: [...S, ...B, ...L, ...V, ...P], defaultVariants: { design: "filled", intent: "primary", size: "md", shape: "rounded" } }), q = s.forwardRef(({ children: g, design: u = "filled", disabled: f = !1, intent: v = "primary", isLoading: i = !1, loadingLabel: o, loadingText: r, onClick: c, shape: m = "rounded", size: h = "md", spinnerPlacement: d = "left", asChild: l, className: p, ...y }, x) => {
7
7
  const z = l ? k : "button", a = !!f || i, b = i ? s.createElement(N, { size: "current", className: r ? "inline-block" : "absolute", ...o && { "aria-label": o } }) : null;
8
8
  return s.createElement(z, { "data-spark-component": "button", ref: x, className: j({ className: p, design: u, disabled: a, intent: v, shape: m, size: h }), disabled: a, "aria-live": i ? "assertive" : "off", onClick: (n) => {
9
9
  a && n.preventDefault(), c && c(n);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-ui/button",
3
- "version": "1.13.5",
3
+ "version": "1.15.0",
4
4
  "description": "Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -14,7 +14,7 @@
14
14
  "dependencies": {
15
15
  "@spark-ui/internal-utils": "^1.6.1",
16
16
  "@spark-ui/slot": "^1.6.1",
17
- "@spark-ui/spinner": "^0.3.3",
17
+ "@spark-ui/spinner": "^1.1.0",
18
18
  "class-variance-authority": "0.5.2"
19
19
  },
20
20
  "peerDependencies": {
@@ -32,5 +32,5 @@
32
32
  },
33
33
  "homepage": "https://sparkui.vercel.app",
34
34
  "license": "MIT",
35
- "gitHead": "ef8f12a41596f286a4f49bedf98d170cfce33b90"
35
+ "gitHead": "d03490b3a41b577d9624f953955c6ce7e328c4f9"
36
36
  }