@spark-ui/button 1.2.1 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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.0](https://github.com/adevinta/spark/compare/@spark-ui/button@1.2.1...@spark-ui/button@1.3.0) (2023-03-24)
7
+
8
+ ### Features
9
+
10
+ - **button:** add link support ([48ee339](https://github.com/adevinta/spark/commit/48ee339e7dfb7ff5dc1ef489322b5d701ddedeac))
11
+
6
12
  ## [1.2.1](https://github.com/adevinta/spark/compare/@spark-ui/button@1.2.0...@spark-ui/button@1.2.1) (2023-03-22)
7
13
 
8
14
  **Note:** Version bump only for package @spark-ui/button
package/dist/Button.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import React from 'react';
1
+ import React, { PropsWithChildren } from 'react';
2
2
  import { type ButtonStylesProps } from './Button.styles';
3
- /** Review: Prop VS ButtonProps */
4
- export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'disabled'>, ButtonStylesProps {
3
+ export interface ButtonProps extends PropsWithChildren<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>>, ButtonStylesProps {
4
+ /**
5
+ * Change the component to the HTML tag or custom component of the only child.
6
+ */
7
+ asChild?: boolean;
5
8
  }
6
- export declare const Button: React.ForwardRefExoticComponent<ButtonProps & {
7
- children?: React.ReactNode;
8
- } & React.RefAttributes<HTMLButtonElement>>;
9
+ export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),i=[{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"]}],d=[{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-container-hovered","enabled:active:bg-surface-container-hovered","focus-visible:bg-surface-container-focused"]}],l=[{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-container-hovered","enabled:active:bg-surface-container-hovered","focus-visible:bg-surface-container-focused","text-surface"]}],b=[{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-container","text-on-surface-container","enabled:hover:bg-surface-container-hovered","enabled:active:bg-surface-container-hovered","focus-visible:bg-surface-container-focused"]}],u=[{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-container-hovered","enabled:active:bg-surface-container-hovered","focus-visible:bg-surface-container-focused"]}],g=require("class-variance-authority").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:[...i,...l,...b,...d,...u],defaultVariants:{design:"filled",intent:"primary",size:"md",shape:"rounded"}}),v=n.forwardRef(({design:r="filled",disabled:e=!1,intent:a="primary",shape:t="rounded",size:s="md",...o},c)=>n.createElement("button",{ref:c,className:g({design:r,disabled:e,intent:a,shape:t,size:s}),disabled:!!e,...o}));exports.Button=v;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),g=require("class-variance-authority");function d(){return d=Object.assign?Object.assign.bind():function(t){for(var a=1;a<arguments.length;a++){var n=arguments[a];for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&(t[e]=n[e])}return t},d.apply(this,arguments)}function v(...t){return a=>t.forEach(n=>{return o=a,void(typeof(e=n)=="function"?e(o):e!=null&&(e.current=o));var e,o})}const u=r.forwardRef((t,a)=>{const{children:n,...e}=t,o=r.Children.toArray(n),s=o.find(h);if(s){const i=s.props.children,l=o.map(c=>c===s?r.Children.count(i)>1?r.Children.only(null):r.isValidElement(i)?i.props.children:null:c);return r.createElement(b,d({},e,{ref:a}),r.isValidElement(i)?r.cloneElement(i,void 0,l):null)}return r.createElement(b,d({},e,{ref:a}),n)});u.displayName="Slot";const b=r.forwardRef((t,a)=>{const{children:n,...e}=t;return r.isValidElement(n)?r.cloneElement(n,{...y(e,n.props),ref:v(a,n.ref)}):r.Children.count(n)>1?r.Children.only(null):null});b.displayName="SlotClone";const f=({children:t})=>r.createElement(r.Fragment,null,t);function h(t){return r.isValidElement(t)&&t.type===f}function y(t,a){const n={...a};for(const e in a){const o=t[e],s=a[e];/^on[A-Z]/.test(e)?o&&s?n[e]=(...i)=>{s(...i),o(...i)}:o&&(n[e]=o):e==="style"?n[e]={...o,...s}:e==="className"&&(n[e]=[o,s].filter(Boolean).join(" "))}return{...t,...n}}const p=r.forwardRef((t,a)=>r.createElement(u,{ref:a,...t})),m=[{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"]}],x=[{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-container-hovered","enabled:active:bg-surface-container-hovered","focus-visible:bg-surface-container-focused"]}],E=[{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-container-hovered","enabled:active:bg-surface-container-hovered","focus-visible:bg-surface-container-focused","text-surface"]}],w=[{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-container","text-on-surface-container","enabled:hover:bg-surface-container-hovered","enabled:active:bg-surface-container-hovered","focus-visible:bg-surface-container-focused"]}],C=[{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-container-hovered","enabled:active:bg-surface-container-hovered","focus-visible:bg-surface-container-focused"]}],j=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:[...m,...E,...w,...x,...C],defaultVariants:{design:"filled",intent:"primary",size:"md",shape:"rounded"}}),V=r.forwardRef(({design:t="filled",disabled:a=!1,intent:n="primary",shape:e="rounded",size:o="md",asChild:s,...i},l)=>{const c=s?p:"button";return r.createElement(c,{ref:l,className:j({design:t,disabled:a,intent:n,shape:e,size:o}),disabled:!!a,...i})});exports.Button=V;
package/dist/index.mjs CHANGED
@@ -1,6 +1,53 @@
1
- import n from "react";
2
- import { cva as i } from "class-variance-authority";
3
- const d = i(["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-container-hovered", "enabled:active:bg-surface-container-hovered", "focus-visible:bg-surface-container-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-container", "text-on-surface-container", "enabled:hover:bg-surface-container-hovered", "enabled:active:bg-surface-container-hovered", "focus-visible:bg-surface-container-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-container-hovered", "enabled:active:bg-surface-container-hovered", "focus-visible:bg-surface-container-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-container-hovered", "enabled:active:bg-surface-container-hovered", "focus-visible:bg-surface-container-focused"] }], defaultVariants: { design: "filled", intent: "primary", size: "md", shape: "rounded" } }), g = n.forwardRef(({ design: r = "filled", disabled: e = !1, intent: a = "primary", shape: t = "rounded", size: s = "md", ...o }, c) => n.createElement("button", { ref: c, className: d({ design: r, disabled: e, intent: a, shape: t, size: s }), disabled: !!e, ...o }));
1
+ import u, { forwardRef as f, Children as c, isValidElement as d, createElement as g, cloneElement as h, Fragment as p } from "react";
2
+ import { cva as m } from "class-variance-authority";
3
+ function l() {
4
+ return l = Object.assign ? Object.assign.bind() : function(r) {
5
+ for (var t = 1; t < arguments.length; t++) {
6
+ var n = arguments[t];
7
+ for (var e in n)
8
+ Object.prototype.hasOwnProperty.call(n, e) && (r[e] = n[e]);
9
+ }
10
+ return r;
11
+ }, l.apply(this, arguments);
12
+ }
13
+ function x(...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(E);
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: x(t, n.ref) }) : c.count(n) > 1 ? c.only(null) : null;
31
+ });
32
+ v.displayName = "SlotClone";
33
+ const w = ({ children: r }) => g(p, null, r);
34
+ function E(r) {
35
+ return d(r) && r.type === w;
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 })), N = m(["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-container-hovered", "enabled:active:bg-surface-container-hovered", "focus-visible:bg-surface-container-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-container", "text-on-surface-container", "enabled:hover:bg-surface-container-hovered", "enabled:active:bg-surface-container-hovered", "focus-visible:bg-surface-container-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-container-hovered", "enabled:active:bg-surface-container-hovered", "focus-visible:bg-surface-container-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-container-hovered", "enabled:active:bg-surface-container-hovered", "focus-visible:bg-surface-container-focused"] }], defaultVariants: { design: "filled", intent: "primary", size: "md", shape: "rounded" } }), V = u.forwardRef(({ design: r = "filled", disabled: t = !1, intent: n = "primary", shape: e = "rounded", size: a = "md", asChild: s, ...o }, b) => {
48
+ const i = s ? z : "button";
49
+ return u.createElement(i, { ref: b, className: N({ design: r, disabled: t, intent: n, shape: e, size: a }), disabled: !!t, ...o });
50
+ });
4
51
  export {
5
- g as Button
52
+ V as Button
6
53
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-ui/button",
3
- "version": "1.2.1",
3
+ "version": "1.3.0",
4
4
  "description": "Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -12,7 +12,8 @@
12
12
  "build": "vite build"
13
13
  },
14
14
  "dependencies": {
15
+ "@spark-ui/slot": "^1.2.0",
15
16
  "class-variance-authority": "0.4.0"
16
17
  },
17
- "gitHead": "8d5929fd944837fe356de0a553b2db7577fa83d2"
18
+ "gitHead": "d2c72b9463e333753139f8f509080dd3b522cdf2"
18
19
  }