@spark-ui/button 1.13.1 → 1.13.2-contrast

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.13.2](https://github.com/adevinta/spark/compare/@spark-ui/button@1.13.1...@spark-ui/button@1.13.2) (2023-06-23)
+
+**Note:** Version bump only for package @spark-ui/button
+
 ## [1.13.1](https://github.com/adevinta/spark/compare/@spark-ui/button@1.13.0...@spark-ui/button@1.13.1) (2023-06-21)
 
 **Note:** Version bump only for package @spark-ui/button

package/dist/Button.styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const buttonStyles: (props?: ({
-    design?: "filled" | "outlined" | "tinted" | "ghost" | "contrast" | null | undefined;
-    intent?: "primary" | "secondary" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | null | undefined;
+    design?: "filled" | "outlined" | "tinted" | "ghost" | null | undefined;
+    intent?: "primary" | "secondary" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | "contrast" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     shape?: "rounded" | "square" | "pill" | null | undefined;
     disabled?: boolean | null | undefined;

package/dist/index.js

@@ -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"),n=require("react"),e=require("@spark-ui/internal-utils"),N=[{intent:"primary",design:"filled",class:e.tw(["bg-primary","text-on-primary","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled:hover:bg-surface-hovered","enabled:active:bg-surface-pressed","focus-visible:bg-surface-focused"])}],V=[{intent:"primary",design:"ghost",class:e.tw(["text-primary","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled:hover:bg-surface-hovered","enabled:active:bg-surface-pressed","focus-visible:bg-surface-focused"])}],C=[{intent:"primary",design:"contrast",class:e.tw(["text-primary","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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=n.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:d="left",asChild:c,className:w,...x},z)=>{const k=c?b.Slot:"button",r=!!m||t,l=t?n.createElement(q.Spinner,{size:"current",className:i?"inline-block":"absolute",...a&&{"aria-label":a}}):null;return n.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:s=>{r&&s.preventDefault(),o&&o(s)},...x},b.wrapPolymorphicSlot(c,v,s=>t?n.createElement(n.Fragment,null,d==="left"&&l,i&&i,d==="right"&&l,n.createElement("div",{"aria-hidden":!0,className:u.cx("gap-md inline-flex",i?"hidden":"opacity-0")},s)):s))});g.displayName="Button",exports.Button=g;
+"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"),n=require("react"),e=require("@spark-ui/internal-utils"),N=[{intent:"primary",design:"filled",class:e.tw(["bg-primary","text-on-primary","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled:hover:bg-surface-hovered","enabled:active:bg-surface-pressed","focus-visible:bg-surface-focused"])},{intent:"contrast",design:"filled",class:e.tw(["bg-on-surface","text-surface","enabled:hover:bg-on-surface-hovered enabled:hover:opacity-dim-1","enabled:active:bg-on-surface-pressed enabled:active:opacity-dim-1","focus-visible:bg-on-surface-focused focus-visible:opacity-dim-1"])}],V=[{intent:"primary",design:"ghost",class:e.tw(["text-primary","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled:hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5"])},{intent:"contrast",design:"ghost",class:e.tw(["text-on-surface","enabled:hover:bg-on-surface/dim-5","enabled:active:bg-on-surface/dim-5","focus-visible:bg-on-surface/dim-5"])}],S=[{intent:"primary",design:"outlined",class:e.tw(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled:hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5","text-surface"])},{intent:"contrast",design:"outlined",class:e.tw(["enabled:hover:bg-on-surface/dim-5","enabled:active:bg-on-surface/dim-5","focus-visible:bg-on-surface/dim-5","text-on-surface"])}],E=[{intent:"primary",design:"tinted",class:e.tw(["bg-primary-container","text-on-primary-container","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled: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","enabled:hover:bg-surface-hovered","enabled:active:bg-surface-pressed","focus-visible:bg-surface-focused"])},{intent:"contrast",design:"tinted",class:e.tw(["bg-surface-container","text-on-surface-container","enabled:hover:bg-surface-container-hovered","enabled:active:bg-surface-container-pressed","focus-visible:bg-surface-container-focused"])}],C=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:[]}),intent:e.makeVariants({primary:[],secondary:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[],contrast:[]}),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],defaultVariants:{design:"filled",intent:"contrast",size:"md",shape:"rounded"}}),g=n.forwardRef(({children:f,design:v="filled",disabled:m=!1,intent:h="contrast",isLoading:i=!1,loadingLabel:r,loadingText:t,onClick:d,shape:p="rounded",size:y="md",spinnerPlacement:o="left",asChild:c,className:w,...x},z)=>{const k=c?b.Slot:"button",a=!!m||i,l=i?n.createElement(q.Spinner,{size:"current",className:t?"inline-block":"absolute",...r&&{"aria-label":r}}):null;return n.createElement(k,{"data-spark-component":"button",ref:z,className:C({className:w,design:v,disabled:a,intent:h,shape:p,size:y}),disabled:a,"aria-live":i?"assertive":"off",onClick:s=>{a&&s.preventDefault(),d&&d(s)},...x},b.wrapPolymorphicSlot(c,f,s=>i?n.createElement(n.Fragment,null,o==="left"&&l,t&&t,o==="right"&&l,n.createElement("div",{"aria-hidden":!0,className:u.cx("gap-md inline-flex",t?"hidden":"opacity-0")},s)):s))});g.displayName="Button",exports.Button=g;

package/dist/index.mjs

@@ -2,14 +2,14 @@ import { wrapPolymorphicSlot as w, Slot as k } from "@spark-ui/slot";
 import { Spinner as N } from "@spark-ui/spinner";
 import { cva as E, cx as C } from "class-variance-authority";
 import n from "react";
-import { tw as e, makeVariants as a } from "@spark-ui/internal-utils";
-const S = [{ intent: "primary", design: "filled", class: e(["bg-primary", "text-on-primary", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], V = [{ intent: "primary", design: "ghost", class: e(["text-primary", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled:hover:bg-surface/dim-5", "enabled:active:bg-surface/dim-5", "focus-visible:bg-surface/dim-5"]) }], B = [{ intent: "primary", design: "outlined", class: e(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }], P = [{ intent: "primary", design: "contrast", class: e(["text-primary", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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: a({ filled: [], outlined: ["bg-transparent", "ring-1", "ring-current"], tinted: [], ghost: [], contrast: ["bg-surface"] }), intent: a({ primary: [], secondary: [], success: [], alert: [], danger: [], info: [], neutral: [], surface: [] }), size: a({ sm: ["min-w-sz-32", "h-sz-32"], md: ["min-w-sz-44", "h-sz-44"], lg: ["min-w-sz-56", "h-sz-56"] }), shape: a({ rounded: ["rounded-lg"], square: ["rounded-none"], pill: ["rounded-full"] }), disabled: { true: ["cursor-not-allowed", "opacity-dim-3"] } }, compoundVariants: [...S, ...B, ...L, ...V, ...P], defaultVariants: { design: "filled", intent: "primary", size: "md", shape: "rounded" } }), q = n.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) => {
-  const z = l ? k : "button", t = !!f || i, b = i ? n.createElement(N, { size: "current", className: r ? "inline-block" : "absolute", ...o && { "aria-label": o } }) : null;
-  return n.createElement(z, { "data-spark-component": "button", ref: x, className: j({ className: p, design: u, disabled: t, intent: v, shape: m, size: h }), disabled: t, "aria-live": i ? "assertive" : "off", onClick: (s) => {
-    t && s.preventDefault(), c && c(s);
-  }, ...y }, w(l, g, (s) => i ? n.createElement(n.Fragment, null, d === "left" && b, r && r, d === "right" && b, n.createElement("div", { "aria-hidden": !0, className: C("gap-md inline-flex", r ? "hidden" : "opacity-0") }, s)) : s));
+import { tw as e, makeVariants as r } from "@spark-ui/internal-utils";
+const S = [{ intent: "primary", design: "filled", class: e(["bg-primary", "text-on-primary", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }, { intent: "contrast", design: "filled", class: e(["bg-on-surface", "text-surface", "enabled:hover:bg-on-surface-hovered enabled:hover:opacity-dim-1", "enabled:active:bg-on-surface-pressed enabled:active:opacity-dim-1", "focus-visible:bg-on-surface-focused focus-visible:opacity-dim-1"]) }], V = [{ intent: "primary", design: "ghost", class: e(["text-primary", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled:hover:bg-surface/dim-5", "enabled:active:bg-surface/dim-5", "focus-visible:bg-surface/dim-5"]) }, { intent: "contrast", design: "ghost", class: e(["text-on-surface", "enabled:hover:bg-on-surface/dim-5", "enabled:active:bg-on-surface/dim-5", "focus-visible:bg-on-surface/dim-5"]) }], B = [{ intent: "primary", design: "outlined", class: e(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled: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(["enabled:hover:bg-surface/dim-5", "enabled:active:bg-surface/dim-5", "focus-visible:bg-surface/dim-5", "text-surface"]) }, { intent: "contrast", design: "outlined", class: e(["enabled:hover:bg-on-surface/dim-5", "enabled:active:bg-on-surface/dim-5", "focus-visible:bg-on-surface/dim-5", "text-on-surface"]) }], L = [{ intent: "primary", design: "tinted", class: e(["bg-primary-container", "text-on-primary-container", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled: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", "enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-pressed", "focus-visible:bg-surface-focused"]) }, { intent: "contrast", design: "tinted", class: e(["bg-surface-container", "text-on-surface-container", "enabled:hover:bg-surface-container-hovered", "enabled:active:bg-surface-container-pressed", "focus-visible:bg-surface-container-focused"]) }], P = 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: r({ filled: [], outlined: ["bg-transparent", "ring-1", "ring-current"], tinted: [], ghost: [] }), intent: r({ primary: [], secondary: [], success: [], alert: [], danger: [], info: [], neutral: [], surface: [], contrast: [] }), size: r({ 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: r({ rounded: ["rounded-lg"], square: ["rounded-none"], pill: ["rounded-full"] }), disabled: { true: ["cursor-not-allowed", "opacity-dim-3"] } }, compoundVariants: [...S, ...B, ...L, ...V], defaultVariants: { design: "filled", intent: "contrast", size: "md", shape: "rounded" } }), j = n.forwardRef(({ children: g, design: u = "filled", disabled: f = !1, intent: v = "contrast", isLoading: i = !1, loadingLabel: o, loadingText: a, onClick: d, shape: m = "rounded", size: h = "md", spinnerPlacement: c = "left", asChild: l, className: p, ...y }, x) => {
+  const z = l ? k : "button", t = !!f || i, b = i ? n.createElement(N, { size: "current", className: a ? "inline-block" : "absolute", ...o && { "aria-label": o } }) : null;
+  return n.createElement(z, { "data-spark-component": "button", ref: x, className: P({ className: p, design: u, disabled: t, intent: v, shape: m, size: h }), disabled: t, "aria-live": i ? "assertive" : "off", onClick: (s) => {
+    t && s.preventDefault(), d && d(s);
+  }, ...y }, w(l, g, (s) => i ? n.createElement(n.Fragment, null, c === "left" && b, a && a, c === "right" && b, n.createElement("div", { "aria-hidden": !0, className: C("gap-md inline-flex", a ? "hidden" : "opacity-0") }, s)) : s));
 });
-q.displayName = "Button";
+j.displayName = "Button";
 export {
-  q as Button
+  j as Button
 };

package/dist/variants/filled.d.ts

@@ -30,4 +30,8 @@ export declare const filledVariants: readonly [{
     readonly intent: "surface";
     readonly design: "filled";
     readonly class: string[];
+}, {
+    readonly intent: "contrast";
+    readonly design: "filled";
+    readonly class: string[];
 }];

package/dist/variants/ghost.d.ts

@@ -30,4 +30,8 @@ export declare const ghostVariants: readonly [{
     readonly intent: "surface";
     readonly design: "ghost";
     readonly class: string[];
+}, {
+    readonly intent: "contrast";
+    readonly design: "ghost";
+    readonly class: string[];
 }];

package/dist/variants/index.d.ts

@@ -2,4 +2,3 @@ export { filledVariants } from './filled';
 export { ghostVariants } from './ghost';
 export { outlinedVariants } from './outlined';
 export { tintedVariants } from './tinted';
-export { contrastVariants } from './contrast';

package/dist/variants/outlined.d.ts

@@ -30,4 +30,8 @@ export declare const outlinedVariants: readonly [{
     readonly intent: "surface";
     readonly design: "outlined";
     readonly class: string[];
+}, {
+    readonly intent: "contrast";
+    readonly design: "outlined";
+    readonly class: string[];
 }];

package/dist/variants/tinted.d.ts

@@ -30,4 +30,8 @@ export declare const tintedVariants: readonly [{
     readonly intent: "surface";
     readonly design: "tinted";
     readonly class: string[];
+}, {
+    readonly intent: "contrast";
+    readonly design: "tinted";
+    readonly class: string[];
 }];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/button",
-  "version": "1.13.1",
+  "version": "1.13.2-contrast",
   "description": "Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@spark-ui/internal-utils": "^1.6.1",
-    "@spark-ui/slot": "^1.6.0",
+    "@spark-ui/slot": "^1.6.1",
     "@spark-ui/spinner": "^0.3.1",
     "class-variance-authority": "0.5.2"
   },
@@ -31,6 +31,5 @@
     "url": "https://github.com/adevinta/spark/issues"
   },
   "homepage": "https://sparkui.vercel.app",
-  "license": "MIT",
-  "gitHead": "367746eb8895988990bf351a9dd1ac3823b9f3af"
+  "license": "MIT"
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) Adevinta ASA.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/variants/contrast.d.ts

@@ -1,33 +0,0 @@
-export declare const contrastVariants: readonly [{
-    readonly intent: "primary";
-    readonly design: "contrast";
-    readonly class: string[];
-}, {
-    readonly intent: "secondary";
-    readonly design: "contrast";
-    readonly class: string[];
-}, {
-    readonly intent: "success";
-    readonly design: "contrast";
-    readonly class: string[];
-}, {
-    readonly intent: "alert";
-    readonly design: "contrast";
-    readonly class: string[];
-}, {
-    readonly intent: "danger";
-    readonly design: "contrast";
-    readonly class: string[];
-}, {
-    readonly intent: "info";
-    readonly design: "contrast";
-    readonly class: string[];
-}, {
-    readonly intent: "neutral";
-    readonly design: "contrast";
-    readonly class: string[];
-}, {
-    readonly intent: "surface";
-    readonly design: "contrast";
-    readonly class: string[];
-}];