@spark-ui/button 1.6.2 → 1.7.1
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 +16 -0
- package/dist/Button.styles.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/index.mjs +5 -4
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
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.7.1](https://github.com/adevinta/spark/compare/@spark-ui/button@1.7.0...@spark-ui/button@1.7.1) (2023-04-25)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- **button:** update sm size ([1dd0440](https://github.com/adevinta/spark/commit/1dd0440a2d56ce00ebfade575f8822275ef909bd))
|
|
11
|
+
|
|
12
|
+
# [1.7.0](https://github.com/adevinta/spark/compare/@spark-ui/button@1.6.2...@spark-ui/button@1.7.0) (2023-04-24)
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
- **button:** add display name ([4d1e9d7](https://github.com/adevinta/spark/commit/4d1e9d7e99bcfde3524eb83a06120d3a224f4160))
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
- **button:** improve button styles ([c796d57](https://github.com/adevinta/spark/commit/c796d57c501d7a595d0c9976de0b9a6e1acd4941))
|
|
21
|
+
|
|
6
22
|
## [1.6.2](https://github.com/adevinta/spark/compare/@spark-ui/button@1.6.1...@spark-ui/button@1.6.2) (2023-04-19)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @spark-ui/button
|
package/dist/Button.styles.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { type VariantProps } from 'class-variance-authority';
|
|
2
2
|
export declare const buttonStyles: (props?: ({
|
|
3
3
|
design?: "filled" | "outlined" | "tinted" | "ghost" | "contrast" | null | undefined;
|
|
4
|
-
intent?: "
|
|
5
|
-
size?: "
|
|
4
|
+
intent?: "primary" | "secondary" | "success" | "alert" | "danger" | "neutral" | "surface" | null | undefined;
|
|
5
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
6
|
shape?: "rounded" | "square" | "pill" | null | undefined;
|
|
7
7
|
disabled?: boolean | null | undefined;
|
|
8
8
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("@spark-ui/slot"),r=require("react"),e=require("@spark-ui/internal-utils"),v=require("class-variance-authority"),f=[{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(["text-on-error bg-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"])}],h=[{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:"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"])}],m=[{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:"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"])}],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-on-surface","enabled:hover:bg-surface-hovered","enabled:active:bg-surface-hovered","focus-visible:bg-surface-focused"])}],w=v.cva(["gap-md box-border inline-flex items-center justify-center whitespace-nowrap","px-lg","text-body-1 font-bold","focus-visible:ring-outline-high ring-inset focus-visible:outline-none focus-visible:ring-2"],{variants:{design:e.makeVariants({filled:[],outlined:["bg-transparent","ring-2","ring-current"],tinted:[],ghost:[],contrast:["bg-surface"]}),intent:e.makeVariants({primary:[],secondary:[],success:[],alert:[],danger:[],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:[...f,...m,...y,...h,...p],defaultVariants:{design:"filled",intent:"primary",size:"md",shape:"rounded"}}),t=r.forwardRef(({design:s="filled",disabled:n=!1,intent:a="primary",shape:i="rounded",size:c="md",asChild:d,className:o,...l},b)=>{const g=d?u.Slot:"button";return r.createElement(g,{"data-spark-component":"button",ref:b,className:w({className:o,design:s,disabled:n,intent:a,shape:i,size:c}),disabled:!!n,...l})});t.displayName="Button",exports.Button=t;
|
package/dist/index.mjs
CHANGED
|
@@ -2,10 +2,11 @@ import { Slot as u } from "@spark-ui/slot";
|
|
|
2
2
|
import s from "react";
|
|
3
3
|
import { tw as e, makeVariants as n } from "@spark-ui/internal-utils";
|
|
4
4
|
import { cva as v } from "class-variance-authority";
|
|
5
|
-
const f = [{ 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(["text-on-error bg-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"]) }], m = [{ 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: "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"]) }], h = [{ 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: "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"]) }], y = [{ 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"]) }], p = [{ 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-on-surface", "enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-focused"]) }], x = v(["gap-md box-border flex items-center justify-center whitespace-nowrap", "text-body-1 font-bold", "focus-visible:ring-outline-high ring-inset focus-visible:outline-none focus-visible:ring-2"], { variants: { design: n({ filled: [], outlined: ["bg-transparent", "ring-2", "ring-current"], tinted: [], ghost: [], contrast: ["bg-surface"] }), intent: n({ primary: [], secondary: [], success: [], alert: [], danger: [], neutral: [], surface: [] }), size: n({ sm: ["
|
|
6
|
-
const g =
|
|
7
|
-
return s.createElement(g, { "data-spark-component": "button", ref: b, className: x({ className: d, design: a, disabled: r, intent: t, shape: i, size:
|
|
5
|
+
const f = [{ 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(["text-on-error bg-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"]) }], m = [{ 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: "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"]) }], h = [{ 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: "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"]) }], y = [{ 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"]) }], p = [{ 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-on-surface", "enabled:hover:bg-surface-hovered", "enabled:active:bg-surface-hovered", "focus-visible:bg-surface-focused"]) }], x = v(["gap-md box-border inline-flex items-center justify-center whitespace-nowrap", "px-lg", "text-body-1 font-bold", "focus-visible:ring-outline-high ring-inset focus-visible:outline-none focus-visible:ring-2"], { variants: { design: n({ filled: [], outlined: ["bg-transparent", "ring-2", "ring-current"], tinted: [], ghost: [], contrast: ["bg-surface"] }), intent: n({ primary: [], secondary: [], success: [], alert: [], danger: [], neutral: [], surface: [] }), size: n({ 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: n({ rounded: ["rounded-lg"], square: ["rounded-none"], pill: ["rounded-full"] }), disabled: { true: ["cursor-not-allowed", "opacity-dim-3"] } }, compoundVariants: [...f, ...h, ...y, ...m, ...p], defaultVariants: { design: "filled", intent: "primary", size: "md", shape: "rounded" } }), z = s.forwardRef(({ design: a = "filled", disabled: r = !1, intent: t = "primary", shape: i = "rounded", size: o = "md", asChild: c, className: d, ...l }, b) => {
|
|
6
|
+
const g = c ? u : "button";
|
|
7
|
+
return s.createElement(g, { "data-spark-component": "button", ref: b, className: x({ className: d, design: a, disabled: r, intent: t, shape: i, size: o }), disabled: !!r, ...l });
|
|
8
8
|
});
|
|
9
|
+
z.displayName = "Button";
|
|
9
10
|
export {
|
|
10
|
-
|
|
11
|
+
z as Button
|
|
11
12
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-ui/button",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.1",
|
|
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"
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"build": "vite build"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@spark-ui/internal-utils": "^1.5.
|
|
15
|
+
"@spark-ui/internal-utils": "^1.5.2",
|
|
16
16
|
"@spark-ui/slot": "^1.4.4",
|
|
17
17
|
"class-variance-authority": "0.5.2"
|
|
18
18
|
},
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"url": "git@github.com:adevinta/spark.git",
|
|
27
27
|
"directory": "packages/components/button"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "0f3832f4be7e23b59e58ba78d0d170cca9450936"
|
|
30
30
|
}
|