@spark-ui/button 1.0.0-beta.0 → 1.2.1

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.2.1](https://github.com/adevinta/spark/compare/@spark-ui/button@1.2.0...@spark-ui/button@1.2.1) (2023-03-22)
+
+**Note:** Version bump only for package @spark-ui/button
+
+# [1.2.0](https://github.com/adevinta/spark/compare/@spark-ui/button@1.1.0...@spark-ui/button@1.2.0) (2023-03-21)
+
+### Bug Fixes
+
+- **button:** get rid of TS errors ([ccd31d6](https://github.com/adevinta/spark/commit/ccd31d656beb5da72217099de50b5e139fa1515e))
+- **button:** ring styles ([afc280f](https://github.com/adevinta/spark/commit/afc280f95027c2e9b0ebdfdf0f1c1c967c3f6471)), closes [#388](https://github.com/adevinta/spark/issues/388)
+
+### Features
+
+- **button:** add contrast design, surface intent and remove reverse button ([1a59450](https://github.com/adevinta/spark/commit/1a594508040a35c6cca1d09231c06320e6b25893))
+- **button:** add first main combinations ([8e243de](https://github.com/adevinta/spark/commit/8e243de27ea0deee46db6117a103551c9a7b5628))
+- **button:** bump ([f444e99](https://github.com/adevinta/spark/commit/f444e99df05dc2c5a8a30487ed0fcaa1daf4c7c2))
+- **button:** fix button hover-focus states ([696ddab](https://github.com/adevinta/spark/commit/696ddabda874501983d17abbd703794df14064c9))
+- **button:** implement every button variants ([febdcb2](https://github.com/adevinta/spark/commit/febdcb2e5f0b7cb8ab9d986c2249c84026dc1361))
+- **button:** setup button component ([99077a9](https://github.com/adevinta/spark/commit/99077a92f675c7c4135961c7e279e59bd542454a))
+- remove button component for now ([36d1475](https://github.com/adevinta/spark/commit/36d1475c112b242bd6afc4142d972a5c5cbfc47a))

package/LICENSE

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

package/dist/Button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type ButtonStylesProps } from './Button.styles';
+/** Review: Prop VS ButtonProps */
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'disabled'>, ButtonStylesProps {
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/Button.styles.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const buttonStyles: (props?: ({
+    design?: "filled" | "outlined" | "tinted" | "ghost" | "contrast" | null | undefined;
+    intent?: "primary" | "secondary" | "success" | "alert" | "danger" | "neutral" | "surface" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    disabled?: boolean | null | undefined;
+    shape?: "rounded" | "square" | "pill" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export type ButtonStylesProps = VariantProps<typeof buttonStyles>;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/dist/index.js

@@ -0,0 +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;

package/dist/index.mjs

@@ -0,0 +1,6 @@
+import n from "react";
+import { cva as i } from "class-variance-authority";
+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 }));
+export {
+  g as Button
+};

package/dist/variants/contrast.d.ts

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

package/dist/variants/default.d.ts

@@ -0,0 +1,7 @@
+export declare const defaultVariants: {
+    readonly design: "filled";
+    readonly intent: "primary";
+    readonly size: "md";
+    readonly shape: "rounded";
+};
+export declare const tw: <T>(a: T) => T;

package/dist/variants/filled.d.ts

@@ -0,0 +1,29 @@
+export declare const filledVariants: ({
+    intent: "primary";
+    design: "filled";
+    class: string[];
+} | {
+    intent: "secondary";
+    design: "filled";
+    class: string[];
+} | {
+    intent: "success";
+    design: "filled";
+    class: string[];
+} | {
+    intent: "alert";
+    design: "filled";
+    class: string[];
+} | {
+    intent: "danger";
+    design: "filled";
+    class: string[];
+} | {
+    intent: "neutral";
+    design: "filled";
+    class: string[];
+} | {
+    intent: "surface";
+    design: "filled";
+    class: string[];
+})[];

package/dist/variants/ghost.d.ts

@@ -0,0 +1,29 @@
+export declare const ghostVariants: ({
+    intent: "primary";
+    design: "ghost";
+    class: string[];
+} | {
+    intent: "secondary";
+    design: "ghost";
+    class: string[];
+} | {
+    intent: "success";
+    design: "ghost";
+    class: string[];
+} | {
+    intent: "alert";
+    design: "ghost";
+    class: string[];
+} | {
+    intent: "danger";
+    design: "ghost";
+    class: string[];
+} | {
+    intent: "neutral";
+    design: "ghost";
+    class: string[];
+} | {
+    intent: "surface";
+    design: "ghost";
+    class: string[];
+})[];

package/dist/variants/index.d.ts

@@ -0,0 +1,6 @@
+export { defaultVariants } from './default';
+export { filledVariants } from './filled';
+export { ghostVariants } from './ghost';
+export { outlinedVariants } from './outlined';
+export { tintedVariants } from './tinted';
+export { contrastVariants } from './contrast';

package/dist/variants/outlined.d.ts

@@ -0,0 +1,29 @@
+export declare const outlinedVariants: ({
+    intent: "primary";
+    design: "outlined";
+    class: string[];
+} | {
+    intent: "secondary";
+    design: "outlined";
+    class: string[];
+} | {
+    intent: "success";
+    design: "outlined";
+    class: string[];
+} | {
+    intent: "alert";
+    design: "outlined";
+    class: string[];
+} | {
+    intent: "danger";
+    design: "outlined";
+    class: string[];
+} | {
+    intent: "neutral";
+    design: "outlined";
+    class: string[];
+} | {
+    intent: "surface";
+    design: "outlined";
+    class: string[];
+})[];

package/dist/variants/tinted.d.ts

@@ -0,0 +1,29 @@
+export declare const tintedVariants: ({
+    intent: "primary";
+    design: "tinted";
+    class: string[];
+} | {
+    intent: "secondary";
+    design: "tinted";
+    class: string[];
+} | {
+    intent: "success";
+    design: "tinted";
+    class: string[];
+} | {
+    intent: "alert";
+    design: "tinted";
+    class: string[];
+} | {
+    intent: "danger";
+    design: "tinted";
+    class: string[];
+} | {
+    intent: "neutral";
+    design: "tinted";
+    class: string[];
+} | {
+    intent: "surface";
+    design: "tinted";
+    class: string[];
+})[];

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "@spark-ui/button",
-  "version": "1.0.0-beta.0",
-  "description": "Spark Design System Button",
+  "version": "1.2.1",
+  "description": "Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.",
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
     "build": "vite build"
-  }
+  },
+  "dependencies": {
+    "class-variance-authority": "0.4.0"
+  },
+  "gitHead": "8d5929fd944837fe356de0a553b2db7577fa83d2"
 }

package/tsconfig.json

@@ -1,12 +1,4 @@
 {
   "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "declarationDir": "./dist",
-    "rootDir": "./src"
-  },
-  "include": [
-    "src/**/*",
-    "../../../global.d.ts"
-  ]
-}
+  "include": ["src/**/*", "../../../global.d.ts"]
+}

package/vite.config.ts

@@ -1,7 +1,6 @@
 import path from 'path'
-
 import { getComponentConfiguration } from '../../../config/index'
 
-const {name} = require(path.resolve(__dirname, 'package.json'))
+const { name } = require(path.resolve(__dirname, 'package.json'))
 
-export default getComponentConfiguration(name)
+export default getComponentConfiguration(name)