@vinyasa/button 1.0.14 → 1.0.16

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.
Files changed (14) hide show
  1. package/README.md +133 -0
  2. package/dist/cjs/button.cjs +239 -5
  3. package/dist/cjs/button.css +116 -14
  4. package/dist/cjs/index.cjs +241 -7
  5. package/dist/cjs/index.css +116 -14
  6. package/dist/esm/button.css +116 -14
  7. package/dist/esm/button.js +147 -6
  8. package/dist/esm/components/button/Button.css.d.ts +84 -1
  9. package/dist/esm/components/button/Button.d.ts +14 -2
  10. package/dist/esm/components/button/Spinner.css.d.ts +1 -0
  11. package/dist/esm/components/button/Spinner.d.ts +2 -0
  12. package/dist/esm/components/button/index.d.ts +1 -0
  13. package/dist/esm/index.d.ts +1 -0
  14. package/package.json +70 -68
package/dist/esm/button.js CHANGED
@@ -1,11 +1,152 @@
1
1
  import "./button.css";
2
- import { jsx } from "react/jsx-runtime";
3
- import "react";
4
- var Button_css_button = '_1bwnrav0';
5
- const Button = ()=>/*#__PURE__*/ jsx("button", {
6
- className: Button_css_button,
7
- children: "Button"
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { forwardRef } from "react";
4
+ function toPrimitive(t, r) {
5
+ if ("object" != typeof t || !t) return t;
6
+ var e = t[Symbol.toPrimitive];
7
+ if (void 0 !== e) {
8
+ var i = e.call(t, r || "default");
9
+ if ("object" != typeof i) return i;
10
+ throw new TypeError("@@toPrimitive must return a primitive value.");
11
+ }
12
+ return ("string" === r ? String : Number)(t);
13
+ }
14
+ function toPropertyKey(t) {
15
+ var i = toPrimitive(t, "string");
16
+ return "symbol" == typeof i ? i : String(i);
17
+ }
18
+ function _defineProperty(obj, key, value) {
19
+ key = toPropertyKey(key);
20
+ if (key in obj) Object.defineProperty(obj, key, {
21
+ value: value,
22
+ enumerable: true,
23
+ configurable: true,
24
+ writable: true
8
25
  });
26
+ else obj[key] = value;
27
+ return obj;
28
+ }
29
+ function ownKeys(e, r) {
30
+ var t = Object.keys(e);
31
+ if (Object.getOwnPropertySymbols) {
32
+ var o = Object.getOwnPropertySymbols(e);
33
+ r && (o = o.filter(function(r) {
34
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
35
+ })), t.push.apply(t, o);
36
+ }
37
+ return t;
38
+ }
39
+ function _objectSpread2(e) {
40
+ for(var r = 1; r < arguments.length; r++){
41
+ var t = null != arguments[r] ? arguments[r] : {};
42
+ r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
43
+ _defineProperty(e, r, t[r]);
44
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
45
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
46
+ });
47
+ }
48
+ return e;
49
+ }
50
+ function mapValues(input, fn) {
51
+ var result = {};
52
+ for(var _key in input)result[_key] = fn(input[_key], _key);
53
+ return result;
54
+ }
55
+ var shouldApplyCompound = (compoundCheck, selections, defaultVariants)=>{
56
+ for (var key of Object.keys(compoundCheck)){
57
+ var _selections$key;
58
+ if (compoundCheck[key] !== (null != (_selections$key = selections[key]) ? _selections$key : defaultVariants[key])) return false;
59
+ }
60
+ return true;
61
+ };
62
+ var createRuntimeFn = (config)=>{
63
+ var runtimeFn = (options)=>{
64
+ var className = config.defaultClassName;
65
+ var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
66
+ for(var variantName in selections){
67
+ var _selections$variantNa;
68
+ var variantSelection = null != (_selections$variantNa = selections[variantName]) ? _selections$variantNa : config.defaultVariants[variantName];
69
+ if (null != variantSelection) {
70
+ var selection = variantSelection;
71
+ if ('boolean' == typeof selection) selection = true === selection ? 'true' : 'false';
72
+ var selectionClassName = config.variantClassNames[variantName][selection];
73
+ if (selectionClassName) className += ' ' + selectionClassName;
74
+ }
75
+ }
76
+ for (var [compoundCheck, compoundClassName] of config.compoundVariants)if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) className += ' ' + compoundClassName;
77
+ return className;
78
+ };
79
+ runtimeFn.variants = ()=>Object.keys(config.variantClassNames);
80
+ runtimeFn.classNames = {
81
+ get base () {
82
+ return config.defaultClassName.split(' ')[0];
83
+ },
84
+ get variants () {
85
+ return mapValues(config.variantClassNames, (classNames)=>mapValues(classNames, (className)=>className.split(' ')[0]));
86
+ }
87
+ };
88
+ return runtimeFn;
89
+ };
90
+ var Button_css_button = createRuntimeFn({
91
+ defaultClassName: '_1bwnrav0',
92
+ variantClassNames: {
93
+ variant: {
94
+ primary: '_1bwnrav1',
95
+ secondary: '_1bwnrav2',
96
+ tertiary: '_1bwnrav3',
97
+ danger: '_1bwnrav4',
98
+ outline: '_1bwnrav5',
99
+ ghost: '_1bwnrav6'
100
+ },
101
+ size: {
102
+ sm: '_1bwnrav7',
103
+ md: '_1bwnrav8',
104
+ lg: '_1bwnrav9'
105
+ },
106
+ radius: {
107
+ sm: '_1bwnrava',
108
+ md: '_1bwnravb',
109
+ full: '_1bwnravc'
110
+ }
111
+ },
112
+ defaultVariants: {
113
+ variant: 'primary',
114
+ size: 'md',
115
+ radius: 'full'
116
+ },
117
+ compoundVariants: []
118
+ });
119
+ var spinner = '_18kjv2i1';
120
+ const Spinner = ()=>/*#__PURE__*/ jsx("span", {
121
+ className: spinner,
122
+ "aria-hidden": "true"
123
+ });
124
+ const button_Spinner = Spinner;
125
+ const Button = /*#__PURE__*/ forwardRef(({ children, variant, size, radius, loading = false, leadingIcon, trailingIcon, disabled = false, type = 'button', className, ...rest }, ref)=>{
126
+ const classes = className ? `${Button_css_button({
127
+ variant,
128
+ size,
129
+ radius
130
+ })} ${className}` : Button_css_button({
131
+ variant,
132
+ size,
133
+ radius
134
+ });
135
+ return /*#__PURE__*/ jsxs("button", {
136
+ ref: ref,
137
+ type: type,
138
+ disabled: disabled || loading,
139
+ "aria-busy": loading || void 0,
140
+ className: classes,
141
+ ...rest,
142
+ children: [
143
+ loading ? /*#__PURE__*/ jsx(button_Spinner, {}) : leadingIcon,
144
+ children,
145
+ !loading && trailingIcon
146
+ ]
147
+ });
148
+ });
149
+ Button.displayName = 'Button';
9
150
  const button_Button = Button;
10
151
  const components_button = button_Button;
11
152
  export default components_button;
package/dist/esm/components/button/Button.css.d.ts CHANGED
@@ -1 +1,84 @@
1
- export declare const button: string;
1
+ export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
2
+ variant: {
3
+ primary: {
4
+ backgroundColor: `var(--${string})`;
5
+ color: `var(--${string})`;
6
+ selectors: {
7
+ '&:hover:not(:disabled)': {
8
+ opacity: number;
9
+ };
10
+ };
11
+ };
12
+ secondary: {
13
+ backgroundColor: `var(--${string})`;
14
+ color: `var(--${string})`;
15
+ selectors: {
16
+ '&:hover:not(:disabled)': {
17
+ opacity: number;
18
+ };
19
+ };
20
+ };
21
+ tertiary: {
22
+ backgroundColor: `var(--${string})`;
23
+ color: `var(--${string})`;
24
+ selectors: {
25
+ '&:hover:not(:disabled)': {
26
+ opacity: number;
27
+ };
28
+ };
29
+ };
30
+ danger: {
31
+ backgroundColor: `var(--${string})`;
32
+ color: `var(--${string})`;
33
+ selectors: {
34
+ '&:hover:not(:disabled)': {
35
+ opacity: number;
36
+ };
37
+ };
38
+ };
39
+ outline: {
40
+ backgroundColor: "transparent";
41
+ color: `var(--${string})`;
42
+ border: `var(--${string}) solid var(--${string})`;
43
+ selectors: {
44
+ '&:hover:not(:disabled)': {
45
+ backgroundColor: `var(--${string})`;
46
+ };
47
+ };
48
+ };
49
+ ghost: {
50
+ backgroundColor: "transparent";
51
+ color: `var(--${string})`;
52
+ selectors: {
53
+ '&:hover:not(:disabled)': {
54
+ backgroundColor: `var(--${string})`;
55
+ };
56
+ };
57
+ };
58
+ };
59
+ size: {
60
+ sm: {
61
+ padding: `var(--${string}) var(--${string})`;
62
+ fontSize: `var(--${string})`;
63
+ };
64
+ md: {
65
+ padding: `var(--${string}) var(--${string})`;
66
+ fontSize: `var(--${string})`;
67
+ };
68
+ lg: {
69
+ padding: `var(--${string}) var(--${string})`;
70
+ fontSize: `var(--${string})`;
71
+ };
72
+ };
73
+ radius: {
74
+ sm: {
75
+ borderRadius: `var(--${string})`;
76
+ };
77
+ md: {
78
+ borderRadius: `var(--${string})`;
79
+ };
80
+ full: {
81
+ borderRadius: `var(--${string})`;
82
+ };
83
+ };
84
+ }>;
package/dist/esm/components/button/Button.d.ts CHANGED
@@ -1,3 +1,15 @@
1
- import React from 'react';
2
- declare const Button: () => React.JSX.Element;
1
+ import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
2
+ export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'outline' | 'ghost';
3
+ export type ButtonSize = 'sm' | 'md' | 'lg';
4
+ export type ButtonRadius = 'sm' | 'md' | 'full';
5
+ export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {
6
+ children: ReactNode;
7
+ variant?: ButtonVariant;
8
+ size?: ButtonSize;
9
+ radius?: ButtonRadius;
10
+ loading?: boolean;
11
+ leadingIcon?: ReactNode;
12
+ trailingIcon?: ReactNode;
13
+ }
14
+ declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
3
15
  export default Button;
package/dist/esm/components/button/Spinner.css.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const spinner: string;
package/dist/esm/components/button/Spinner.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const Spinner: () => import("react").JSX.Element;
2
+ export default Spinner;
package/dist/esm/components/button/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import Button from './Button';
2
2
  export default Button;
3
+ export type { ButtonProps, ButtonRadius, ButtonSize, ButtonVariant } from './Button';
package/dist/esm/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { default as Button } from './components/button';
2
2
  export { default } from './components/button';
3
+ export type { ButtonProps, ButtonRadius, ButtonSize, ButtonVariant } from './components/button';
package/package.json CHANGED
@@ -1,69 +1,71 @@
1
1
  {
2
- "name": "@vinyasa/button",
3
- "version": "1.0.14",
4
- "private": false,
5
- "type": "module",
6
- "sideEffects": [
7
- "**/*.css"
8
- ],
9
- "files": [
10
- "dist",
11
- "!dist/**/*.map",
12
- "!dist/**/__story__/**",
13
- "!dist/**/__test__/**",
14
- "!dist/**/*.stories.d.ts",
15
- "!dist/**/*.test.d.ts"
16
- ],
17
- "publishConfig": {
18
- "access": "public"
19
- },
20
- "main": "./dist/cjs/index.cjs",
21
- "module": "./dist/esm/index.js",
22
- "style": "./dist/esm/index.css",
23
- "types": "./dist/esm/index.d.ts",
24
- "exports": {
25
- ".": {
26
- "types": "./dist/esm/index.d.ts",
27
- "import": "./dist/esm/index.js",
28
- "require": "./dist/cjs/index.cjs",
29
- "default": "./dist/esm/index.js"
30
- },
31
- "./button": {
32
- "types": "./dist/esm/button.d.ts",
33
- "import": "./dist/esm/button.js",
34
- "require": "./dist/cjs/button.cjs",
35
- "default": "./dist/esm/button.js"
36
- },
37
- "./button/style.css": "./dist/esm/button.css",
38
- "./style.css": "./dist/esm/index.css",
39
- "./package.json": "./package.json"
40
- },
41
- "scripts": {
42
- "build": "rslib build && node ../../scripts/postbuild-package.mjs",
43
- "typecheck": "tsc --noEmit -p tsconfig.json",
44
- "lint": "eslint --config ../../configs/eslint.config.mjs src/**/*.{ts,tsx} --ignore-pattern src/**/__story__/** --ignore-pattern src/**/__test__/**",
45
- "lint:fix": "eslint --config ../../configs/eslint.config.mjs src/**/*.{ts,tsx} --ignore-pattern src/**/__story__/** --ignore-pattern src/**/__test__/** --fix",
46
- "format": "prettier . --config ../../configs/prettier.config.json --ignore-path ../../configs/.prettierignore --write",
47
- "format:check": "prettier . --config ../../configs/prettier.config.json --ignore-path ../../configs/.prettierignore --check",
48
- "test": "vitest run --config vitest.config.ts",
49
- "test:watch": "vitest --config vitest.config.ts",
50
- "test:coverage": "vitest run --config vitest.config.ts --coverage",
51
- "prepack": "pnpm build",
52
- "pack:check": "npm pack --dry-run"
53
- },
54
- "peerDependencies": {
55
- "react": "^18.0.0 || ^19.0.0",
56
- "react-dom": "^18.0.0 || ^19.0.0"
57
- },
58
- "devDependencies": {
59
- "@rsbuild/plugin-react": "^2.1.0",
60
- "@rslib/core": "^0.23.1",
61
- "@storybook/react-vite": "^10.4.6",
62
- "@types/node": "^26.0.1",
63
- "@types/react": "^19.0.0",
64
- "@vanilla-extract/css": "^1.21.0",
65
- "@vanilla-extract/vite-plugin": "^5.2.3",
66
- "@vanilla-extract/webpack-plugin": "^2.3.27",
67
- "typescript": "^5.7.3"
68
- }
69
- }
2
+ "name": "@vinyasa/button",
3
+ "version": "1.0.16",
4
+ "private": false,
5
+ "type": "module",
6
+ "sideEffects": [
7
+ "**/*.css"
8
+ ],
9
+ "files": [
10
+ "dist",
11
+ "!dist/**/*.map",
12
+ "!dist/**/__story__/**",
13
+ "!dist/**/__test__/**",
14
+ "!dist/**/*.stories.d.ts",
15
+ "!dist/**/*.test.d.ts"
16
+ ],
17
+ "publishConfig": {
18
+ "access": "public"
19
+ },
20
+ "main": "./dist/cjs/index.cjs",
21
+ "module": "./dist/esm/index.js",
22
+ "style": "./dist/esm/index.css",
23
+ "types": "./dist/esm/index.d.ts",
24
+ "exports": {
25
+ ".": {
26
+ "types": "./dist/esm/index.d.ts",
27
+ "import": "./dist/esm/index.js",
28
+ "require": "./dist/cjs/index.cjs",
29
+ "default": "./dist/esm/index.js"
30
+ },
31
+ "./button": {
32
+ "types": "./dist/esm/button.d.ts",
33
+ "import": "./dist/esm/button.js",
34
+ "require": "./dist/cjs/button.cjs",
35
+ "default": "./dist/esm/button.js"
36
+ },
37
+ "./button/style.css": "./dist/esm/button.css",
38
+ "./style.css": "./dist/esm/index.css",
39
+ "./package.json": "./package.json"
40
+ },
41
+ "peerDependencies": {
42
+ "react": "^18.0.0 || ^19.0.0",
43
+ "react-dom": "^18.0.0 || ^19.0.0",
44
+ "@vinyasa/tokens": "^1.0.16"
45
+ },
46
+ "devDependencies": {
47
+ "@rsbuild/plugin-react": "^2.1.0",
48
+ "@rslib/core": "^0.23.1",
49
+ "@storybook/react-vite": "^10.4.6",
50
+ "@types/node": "^26.0.1",
51
+ "@types/react": "^19.0.0",
52
+ "@vanilla-extract/css": "^1.21.0",
53
+ "@vanilla-extract/recipes": "^0.5.7",
54
+ "@vanilla-extract/vite-plugin": "^5.2.3",
55
+ "@vanilla-extract/webpack-plugin": "^2.3.27",
56
+ "typescript": "^5.7.3",
57
+ "@vinyasa/tokens": "1.0.16"
58
+ },
59
+ "scripts": {
60
+ "build": "rslib build && node ../../scripts/postbuild-package.mjs",
61
+ "typecheck": "tsc --noEmit -p tsconfig.json",
62
+ "lint": "eslint --config ../../configs/eslint.config.mjs src/**/*.{ts,tsx} --ignore-pattern src/**/__story__/** --ignore-pattern src/**/__test__/**",
63
+ "lint:fix": "eslint --config ../../configs/eslint.config.mjs src/**/*.{ts,tsx} --ignore-pattern src/**/__story__/** --ignore-pattern src/**/__test__/** --fix",
64
+ "format": "prettier . --config ../../configs/prettier.config.json --ignore-path ../../configs/.prettierignore --write",
65
+ "format:check": "prettier . --config ../../configs/prettier.config.json --ignore-path ../../configs/.prettierignore --check",
66
+ "test": "vitest run --config vitest.config.ts",
67
+ "test:watch": "vitest --config vitest.config.ts",
68
+ "test:coverage": "vitest run --config vitest.config.ts --coverage",
69
+ "pack:check": "npm pack --dry-run"
70
+ }
71
+ }