@spark-ui/button 1.3.3 → 1.3.4
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.
- package/CHANGELOG.md +6 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +8 -50
- package/package.json +3 -3
- package/vite.config.ts +1 -1
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,12 @@
|
|
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.3.4](https://github.com/adevinta/spark/compare/@spark-ui/button@1.3.3...@spark-ui/button@1.3.4) (2023-03-30)
|
7
|
+
|
8
|
+
### Bug Fixes
|
9
|
+
|
10
|
+
- revise code in accordance with the updated vite configuration ([4f4174a](https://github.com/adevinta/spark/commit/4f4174a0ef8df71f28af5c77acf0c5f7c7837e58)), closes [#503](https://github.com/adevinta/spark/issues/503)
|
11
|
+
|
6
12
|
## [1.3.3](https://github.com/adevinta/spark/compare/@spark-ui/button@1.3.2...@spark-ui/button@1.3.3) (2023-03-30)
|
7
13
|
|
8
14
|
**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 r=require("react"),
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("@spark-ui/slot"),r=require("react"),g=require("class-variance-authority"),e=require("@spark-ui/internal-utils"),v=[{intent:"primary",design:"filled",class:e.tw(["bg-primary","text-on-primary","enabled:hover:bg-primary-hovered","enabled:active:bg-primary-hovered","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-hovered","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-hovered","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-hovered","focus-visible:bg-alert-focused"])},{intent:"danger",design:"filled",class:e.tw(["bg-error","text-on-error","enabled:hover:bg-error-hovered","enabled:active:bg-error-hovered","focus-visible:bg-error-focused"])},{intent:"neutral",design:"filled",class:e.tw(["bg-neutral","text-on-neutral","enabled:hover:bg-neutral-hovered","enabled:active:bg-neutral-hovered","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-hovered","focus-visible:bg-surface-focused"])}],f=[{intent:"primary",design:"ghost",class:e.tw(["text-primary","enabled:hover:bg-primary-container-hovered","enabled:active:bg-primary-container-hovered","focus-visible:bg-primary-container-focused"])},{intent:"secondary",design:"ghost",class:e.tw(["text-secondary","enabled:hover:bg-secondary-container-hovered","enabled:active:bg-secondary-container-hovered","focus-visible:bg-secondary-container-focused"])},{intent:"success",design:"ghost",class:e.tw(["text-success","enabled:hover:bg-success-container-hovered","enabled:active:bg-success-container-hovered","focus-visible:bg-success-container-focused"])},{intent:"alert",design:"ghost",class:e.tw(["text-alert","enabled:hover:bg-alert-container-hovered","enabled:active:bg-alert-container-hovered","focus-visible:bg-alert-container-focused"])},{intent:"danger",design:"ghost",class:e.tw(["text-error","enabled:hover:bg-error-container-hovered","enabled:active:bg-error-container-hovered","focus-visible:bg-error-container-focused"])},{intent:"neutral",design:"ghost",class:e.tw(["text-neutral","enabled:hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-hovered","focus-visible:bg-neutral-container-focused"])},{intent:"surface",design:"ghost",class:e.tw(["text-on-surface","enabled:hover:bg-surface-hovered","enabled:active:bg-surface-hovered","focus-visible:bg-surface-focused"])}],h=[{intent:"primary",design:"outlined",class:e.tw(["enabled:hover:bg-primary-container-hovered","enabled:active:bg-primary-container-hovered","focus-visible:bg-primary-container-focused","text-primary"])},{intent:"secondary",design:"outlined",class:e.tw(["enabled:hover:bg-secondary-container-hovered","enabled:active:bg-secondary-container-hovered","focus-visible:bg-secondary-container-focused","text-secondary"])},{intent:"success",design:"outlined",class:e.tw(["enabled:hover:bg-success-container-hovered","enabled:active:bg-success-container-hovered","focus-visible:bg-success-container-focused","text-success"])},{intent:"alert",design:"outlined",class:e.tw(["enabled:hover:bg-alert-container-hovered","enabled:active:bg-alert-container-hovered","focus-visible:bg-alert-container-focused","text-alert"])},{intent:"danger",design:"outlined",class:e.tw(["enabled:hover:bg-error-container-hovered","enabled:active:bg-error-container-hovered","focus-visible:bg-error-container-focused","text-error"])},{intent:"neutral",design:"outlined",class:e.tw(["enabled:hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-hovered","focus-visible:bg-neutral-container-focused","text-neutral"])},{intent:"surface",design:"outlined",class:e.tw(["enabled:hover:bg-surface-hovered","enabled:active:bg-surface-hovered","focus-visible:bg-surface-focused","text-surface"])}],y=[{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-hovered","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-hovered","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-hovered","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-hovered","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-hovered","focus-visible:bg-error-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-hovered","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-hovered","focus-visible:bg-surface-focused"])}],p=[{intent:"primary",design:"contrast",class:e.tw(["text-primary","enabled:hover:bg-primary-container-hovered","enabled:active:bg-primary-container-hovered","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-hovered","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-hovered","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-hovered","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-hovered","focus-visible:bg-error-container-focused"])},{intent:"neutral",design:"contrast",class:e.tw(["text-neutral","enabled:hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-hovered","focus-visible:bg-neutral-container-focused"])},{intent:"surface",design:"contrast",class:e.tw(["text-surface","enabled:hover:bg-surface-hovered","enabled:active:bg-surface-hovered","focus-visible:bg-surface-focused"])}],m=g.cva(["flex items-center gap-md justify-center box-border whitespace-nowrap","text-body-1 font-bold","ring-inset focus-visible:ring-2 focus-visible:ring-outline-high focus-visible:outline-none"],{variants:{design:{filled:[],outlined:["bg-transparent","ring-2","ring-current"],tinted:[],ghost:[],contrast:["bg-surface"]},intent:{primary:[],secondary:[],success:[],alert:[],danger:[],neutral:[],surface:[]},size:{sm:["py-sm px-lg"],md:["py-md px-lg"],lg:["p-lg"]},disabled:{true:["cursor-not-allowed","opacity-dim-3"]},shape:{rounded:["rounded-lg"],square:["rounded-none"],pill:["rounded-full"]}},compoundVariants:[...v,...h,...y,...f,...p],defaultVariants:{design:"filled",intent:"primary",size:"md",shape:"rounded"}}),x=r.forwardRef(({design:t="filled",disabled:n=!1,intent:a="primary",shape:s="rounded",size:o="md",asChild:c,className:i,...d},l)=>{const b=c?u.Slot:"button";return r.createElement(b,{ref:l,className:m({className:i,design:t,disabled:n,intent:a,shape:s,size:o}),disabled:!!n,...d})});exports.Button=x;
|
package/dist/index.mjs
CHANGED
@@ -1,53 +1,11 @@
|
|
1
|
-
import
|
2
|
-
import
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
Object.prototype.hasOwnProperty.call(n, e) && (r[e] = n[e]);
|
9
|
-
}
|
10
|
-
return r;
|
11
|
-
}, l.apply(this, arguments);
|
12
|
-
}
|
13
|
-
function w(...r) {
|
14
|
-
return (t) => r.forEach((n) => {
|
15
|
-
return a = t, void (typeof (e = n) == "function" ? e(a) : e != null && (e.current = a));
|
16
|
-
var e, a;
|
17
|
-
});
|
18
|
-
}
|
19
|
-
const y = f((r, t) => {
|
20
|
-
const { children: n, ...e } = r, a = c.toArray(n), s = a.find(N);
|
21
|
-
if (s) {
|
22
|
-
const o = s.props.children, b = a.map((i) => i === s ? c.count(o) > 1 ? c.only(null) : d(o) ? o.props.children : null : i);
|
23
|
-
return g(v, l({}, e, { ref: t }), d(o) ? h(o, void 0, b) : null);
|
24
|
-
}
|
25
|
-
return g(v, l({}, e, { ref: t }), n);
|
26
|
-
});
|
27
|
-
y.displayName = "Slot";
|
28
|
-
const v = f((r, t) => {
|
29
|
-
const { children: n, ...e } = r;
|
30
|
-
return d(n) ? h(n, { ...j(e, n.props), ref: w(t, n.ref) }) : c.count(n) > 1 ? c.only(null) : null;
|
31
|
-
});
|
32
|
-
v.displayName = "SlotClone";
|
33
|
-
const E = ({ children: r }) => g(m, null, r);
|
34
|
-
function N(r) {
|
35
|
-
return d(r) && r.type === E;
|
36
|
-
}
|
37
|
-
function j(r, t) {
|
38
|
-
const n = { ...t };
|
39
|
-
for (const e in t) {
|
40
|
-
const a = r[e], s = t[e];
|
41
|
-
/^on[A-Z]/.test(e) ? a && s ? n[e] = (...o) => {
|
42
|
-
s(...o), a(...o);
|
43
|
-
} : a && (n[e] = a) : e === "style" ? n[e] = { ...a, ...s } : e === "className" && (n[e] = [a, s].filter(Boolean).join(" "));
|
44
|
-
}
|
45
|
-
return { ...r, ...n };
|
46
|
-
}
|
47
|
-
const z = f((r, t) => u.createElement(y, { ref: t, ...r })), O = x(["flex items-center gap-md justify-center box-border whitespace-nowrap", "text-body-1 font-bold", "ring-inset focus-visible:ring-2 focus-visible:ring-outline-high focus-visible:outline-none"], { variants: { design: { filled: [], outlined: ["bg-transparent", "ring-2", "ring-current"], tinted: [], ghost: [], contrast: ["bg-surface"] }, intent: { primary: [], secondary: [], success: [], alert: [], danger: [], neutral: [], surface: [] }, size: { sm: ["py-sm px-lg"], md: ["py-md px-lg"], lg: ["p-lg"] }, disabled: { true: ["cursor-not-allowed", "opacity-dim-3"] }, shape: { rounded: ["rounded-lg"], square: ["rounded-none"], pill: ["rounded-full"] } }, compoundVariants: [{ intent: "primary", design: "filled", class: ["bg-primary", "text-on-primary", "enabled:hover:bg-primary-hovered", "enabled:active:bg-primary-hovered", "focus-visible:bg-primary-focused"] }, { intent: "secondary", design: "filled", class: ["bg-secondary", "text-on-secondary", "enabled:hover:bg-secondary-hovered", "enabled:active:bg-secondary-hovered", "focus-visible:bg-secondary-focused"] }, { intent: "success", design: "filled", class: ["bg-success", "text-on-success", "enabled:hover:bg-success-hovered", "enabled:active:bg-success-hovered", "focus-visible:bg-success-focused"] }, { intent: "alert", design: "filled", class: ["bg-alert", "text-on-alert", "enabled:hover:bg-alert-hovered", "enabled:active:bg-alert-hovered", "focus-visible:bg-alert-focused"] }, { intent: "danger", design: "filled", class: ["bg-error", "text-on-error", "enabled:hover:bg-error-hovered", "enabled:active:bg-error-hovered", "focus-visible:bg-error-focused"] }, { intent: "neutral", design: "filled", class: ["bg-neutral", "text-on-neutral", "enabled:hover:bg-neutral-hovered", "enabled:active:bg-neutral-hovered", "focus-visible:bg-neutral-focused"] }, { intent: "surface", design: "filled", class: ["bg-surface", "text-on-surface", "enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-focused"] }, { intent: "primary", design: "outlined", class: ["enabled:hover:bg-primary-container-hovered", "enabled:active:bg-primary-container-hovered", "focus-visible:bg-primary-container-focused", "text-primary"] }, { intent: "secondary", design: "outlined", class: ["enabled:hover:bg-secondary-container-hovered", "enabled:active:bg-secondary-container-hovered", "focus-visible:bg-secondary-container-focused", "text-secondary"] }, { intent: "success", design: "outlined", class: ["enabled:hover:bg-success-container-hovered", "enabled:active:bg-success-container-hovered", "focus-visible:bg-success-container-focused", "text-success"] }, { intent: "alert", design: "outlined", class: ["enabled:hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-hovered", "focus-visible:bg-alert-container-focused", "text-alert"] }, { intent: "danger", design: "outlined", class: ["enabled:hover:bg-error-container-hovered", "enabled:active:bg-error-container-hovered", "focus-visible:bg-error-container-focused", "text-error"] }, { intent: "neutral", design: "outlined", class: ["enabled:hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-hovered", "focus-visible:bg-neutral-container-focused", "text-neutral"] }, { intent: "surface", design: "outlined", class: ["enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-focused", "text-surface"] }, { intent: "primary", design: "tinted", class: ["bg-primary-container", "text-on-primary-container", "enabled:hover:bg-primary-container-hovered", "enabled:active:bg-primary-container-hovered", "focus-visible:bg-primary-container-focused"] }, { intent: "secondary", design: "tinted", class: ["bg-secondary-container", "text-on-secondary-container", "enabled:hover:bg-secondary-container-hovered", "enabled:active:bg-secondary-container-hovered", "focus-visible:bg-secondary-container-focused"] }, { intent: "success", design: "tinted", class: ["bg-success-container", "text-on-success-container", "enabled:hover:bg-success-container-hovered", "enabled:active:bg-success-container-hovered", "focus-visible:bg-success-container-focused"] }, { intent: "alert", design: "tinted", class: ["bg-alert-container", "text-on-alert-container", "enabled:hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-hovered", "focus-visible:bg-alert-container-focused"] }, { intent: "danger", design: "tinted", class: ["bg-error-container", "text-on-error-container", "enabled:hover:bg-error-container-hovered", "enabled:active:bg-error-container-hovered", "focus-visible:bg-error-container-focused"] }, { intent: "neutral", design: "tinted", class: ["bg-neutral-container", "text-on-neutral-container", "enabled:hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-hovered", "focus-visible:bg-neutral-container-focused"] }, { intent: "surface", design: "tinted", class: ["bg-surface", "text-on-surface", "enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-focused"] }, { intent: "primary", design: "ghost", class: ["text-primary", "enabled:hover:bg-primary-container-hovered", "enabled:active:bg-primary-container-hovered", "focus-visible:bg-primary-container-focused"] }, { intent: "secondary", design: "ghost", class: ["text-secondary", "enabled:hover:bg-secondary-container-hovered", "enabled:active:bg-secondary-container-hovered", "focus-visible:bg-secondary-container-focused"] }, { intent: "success", design: "ghost", class: ["text-success", "enabled:hover:bg-success-container-hovered", "enabled:active:bg-success-container-hovered", "focus-visible:bg-success-container-focused"] }, { intent: "alert", design: "ghost", class: ["text-alert", "enabled:hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-hovered", "focus-visible:bg-alert-container-focused"] }, { intent: "danger", design: "ghost", class: ["text-error", "enabled:hover:bg-error-container-hovered", "enabled:active:bg-error-container-hovered", "focus-visible:bg-error-container-focused"] }, { intent: "neutral", design: "ghost", class: ["text-neutral", "enabled:hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-hovered", "focus-visible:bg-neutral-container-focused"] }, { intent: "surface", design: "ghost", class: ["text-on-surface", "enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-focused"] }, { intent: "primary", design: "contrast", class: ["text-primary", "enabled:hover:bg-primary-container-hovered", "enabled:active:bg-primary-container-hovered", "focus-visible:bg-primary-container-focused"] }, { intent: "secondary", design: "contrast", class: ["text-secondary", "enabled:hover:bg-secondary-container-hovered", "enabled:active:bg-secondary-container-hovered", "focus-visible:bg-secondary-container-focused"] }, { intent: "success", design: "contrast", class: ["text-success", "enabled:hover:bg-success-container-hovered", "enabled:active:bg-success-container-hovered", "focus-visible:bg-success-container-focused"] }, { intent: "alert", design: "contrast", class: ["text-alert", "enabled:hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-hovered", "focus-visible:bg-alert-container-focused"] }, { intent: "danger", design: "contrast", class: ["text-error", "enabled:hover:bg-error-container-hovered", "enabled:active:bg-error-container-hovered", "focus-visible:bg-error-container-focused"] }, { intent: "neutral", design: "contrast", class: ["text-neutral", "enabled:hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-hovered", "focus-visible:bg-neutral-container-focused"] }, { intent: "surface", design: "contrast", class: ["text-surface", "enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-focused"] }], defaultVariants: { design: "filled", intent: "primary", size: "md", shape: "rounded" } }), A = u.forwardRef(({ design: r = "filled", disabled: t = !1, intent: n = "primary", shape: e = "rounded", size: a = "md", asChild: s, className: o, ...b }, i) => {
|
48
|
-
const p = s ? z : "button";
|
49
|
-
return u.createElement(p, { ref: i, className: O({ className: o, design: r, disabled: t, intent: n, shape: e, size: a }), disabled: !!t, ...b });
|
1
|
+
import { Slot as g } from "@spark-ui/slot";
|
2
|
+
import r from "react";
|
3
|
+
import { cva as u } from "class-variance-authority";
|
4
|
+
import { tw as e } from "@spark-ui/internal-utils";
|
5
|
+
const v = [{ intent: "primary", design: "filled", class: e(["bg-primary", "text-on-primary", "enabled:hover:bg-primary-hovered", "enabled:active:bg-primary-hovered", "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-hovered", "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-hovered", "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-hovered", "focus-visible:bg-alert-focused"]) }, { intent: "danger", design: "filled", class: e(["bg-error", "text-on-error", "enabled:hover:bg-error-hovered", "enabled:active:bg-error-hovered", "focus-visible:bg-error-focused"]) }, { intent: "neutral", design: "filled", class: e(["bg-neutral", "text-on-neutral", "enabled:hover:bg-neutral-hovered", "enabled:active:bg-neutral-hovered", "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-hovered", "focus-visible:bg-surface-focused"]) }], f = [{ intent: "primary", design: "ghost", class: e(["text-primary", "enabled:hover:bg-primary-container-hovered", "enabled:active:bg-primary-container-hovered", "focus-visible:bg-primary-container-focused"]) }, { intent: "secondary", design: "ghost", class: e(["text-secondary", "enabled:hover:bg-secondary-container-hovered", "enabled:active:bg-secondary-container-hovered", "focus-visible:bg-secondary-container-focused"]) }, { intent: "success", design: "ghost", class: e(["text-success", "enabled:hover:bg-success-container-hovered", "enabled:active:bg-success-container-hovered", "focus-visible:bg-success-container-focused"]) }, { intent: "alert", design: "ghost", class: e(["text-alert", "enabled:hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-hovered", "focus-visible:bg-alert-container-focused"]) }, { intent: "danger", design: "ghost", class: e(["text-error", "enabled:hover:bg-error-container-hovered", "enabled:active:bg-error-container-hovered", "focus-visible:bg-error-container-focused"]) }, { intent: "neutral", design: "ghost", class: e(["text-neutral", "enabled:hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-hovered", "focus-visible:bg-neutral-container-focused"]) }, { intent: "surface", design: "ghost", class: e(["text-on-surface", "enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-focused"]) }], h = u(["flex items-center gap-md justify-center box-border whitespace-nowrap", "text-body-1 font-bold", "ring-inset focus-visible:ring-2 focus-visible:ring-outline-high focus-visible:outline-none"], { variants: { design: { filled: [], outlined: ["bg-transparent", "ring-2", "ring-current"], tinted: [], ghost: [], contrast: ["bg-surface"] }, intent: { primary: [], secondary: [], success: [], alert: [], danger: [], neutral: [], surface: [] }, size: { sm: ["py-sm px-lg"], md: ["py-md px-lg"], lg: ["p-lg"] }, disabled: { true: ["cursor-not-allowed", "opacity-dim-3"] }, shape: { rounded: ["rounded-lg"], square: ["rounded-none"], pill: ["rounded-full"] } }, compoundVariants: [...v, { intent: "primary", design: "outlined", class: e(["enabled:hover:bg-primary-container-hovered", "enabled:active:bg-primary-container-hovered", "focus-visible:bg-primary-container-focused", "text-primary"]) }, { intent: "secondary", design: "outlined", class: e(["enabled:hover:bg-secondary-container-hovered", "enabled:active:bg-secondary-container-hovered", "focus-visible:bg-secondary-container-focused", "text-secondary"]) }, { intent: "success", design: "outlined", class: e(["enabled:hover:bg-success-container-hovered", "enabled:active:bg-success-container-hovered", "focus-visible:bg-success-container-focused", "text-success"]) }, { intent: "alert", design: "outlined", class: e(["enabled:hover:bg-alert-container-hovered", "enabled:active:bg-alert-container-hovered", "focus-visible:bg-alert-container-focused", "text-alert"]) }, { intent: "danger", design: "outlined", class: e(["enabled:hover:bg-error-container-hovered", "enabled:active:bg-error-container-hovered", "focus-visible:bg-error-container-focused", "text-error"]) }, { intent: "neutral", design: "outlined", class: e(["enabled:hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-hovered", "focus-visible:bg-neutral-container-focused", "text-neutral"]) }, { intent: "surface", design: "outlined", class: e(["enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-focused", "text-surface"]) }, { intent: "primary", design: "tinted", class: e(["bg-primary-container", "text-on-primary-container", "enabled:hover:bg-primary-container-hovered", "enabled:active:bg-primary-container-hovered", "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-hovered", "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-hovered", "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-hovered", "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-hovered", "focus-visible:bg-error-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-hovered", "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-hovered", "focus-visible:bg-surface-focused"]) }, ...f, { intent: "primary", design: "contrast", class: e(["text-primary", "enabled:hover:bg-primary-container-hovered", "enabled:active:bg-primary-container-hovered", "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-hovered", "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-hovered", "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-hovered", "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-hovered", "focus-visible:bg-error-container-focused"]) }, { intent: "neutral", design: "contrast", class: e(["text-neutral", "enabled:hover:bg-neutral-container-hovered", "enabled:active:bg-neutral-container-hovered", "focus-visible:bg-neutral-container-focused"]) }, { intent: "surface", design: "contrast", class: e(["text-surface", "enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-focused"]) }], defaultVariants: { design: "filled", intent: "primary", size: "md", shape: "rounded" } }), w = r.forwardRef(({ design: a = "filled", disabled: n = !1, intent: s = "primary", shape: t = "rounded", size: o = "md", asChild: c, className: i, ...d }, l) => {
|
6
|
+
const b = c ? g : "button";
|
7
|
+
return r.createElement(b, { ref: l, className: h({ className: i, design: a, disabled: n, intent: s, shape: t, size: o }), disabled: !!n, ...d });
|
50
8
|
});
|
51
9
|
export {
|
52
|
-
|
10
|
+
w as Button
|
53
11
|
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@spark-ui/button",
|
3
|
-
"version": "1.3.
|
3
|
+
"version": "1.3.4",
|
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"
|
@@ -13,8 +13,8 @@
|
|
13
13
|
},
|
14
14
|
"dependencies": {
|
15
15
|
"@spark-ui/internal-utils": "1.1.0",
|
16
|
-
"@spark-ui/slot": "^1.2.
|
16
|
+
"@spark-ui/slot": "^1.2.1",
|
17
17
|
"class-variance-authority": "0.4.0"
|
18
18
|
},
|
19
|
-
"gitHead": "
|
19
|
+
"gitHead": "fc82061d3d539d3f24a0a43128cbf762a4b76cf9"
|
20
20
|
}
|
package/vite.config.ts
CHANGED