@vinyasa/button 1.0.15 → 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.
- package/README.md +133 -0
- package/dist/cjs/button.cjs +239 -5
- package/dist/cjs/button.css +112 -10
- package/dist/cjs/index.cjs +241 -7
- package/dist/cjs/index.css +112 -10
- package/dist/esm/button.css +112 -10
- package/dist/esm/button.js +147 -6
- package/dist/esm/components/button/Button.css.d.ts +84 -1
- package/dist/esm/components/button/Button.d.ts +14 -2
- package/dist/esm/components/button/Spinner.css.d.ts +1 -0
- package/dist/esm/components/button/Spinner.d.ts +2 -0
- package/dist/esm/components/button/index.d.ts +1 -0
- package/dist/esm/index.d.ts +1 -0
- package/package.json +4 -3
package/README.md
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
# @vinyasa/button
|
|
2
|
+
|
|
3
|
+
A styled, accessible button component with six visual variants, three sizes, configurable corner radius, icon slots, and a loading state — built on `@vinyasa/tokens`.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @vinyasa/button @vinyasa/tokens react react-dom
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
`@vinyasa/tokens` is a peer dependency: Button's styles reference the shared design-token contract, and rendering it requires a `VinyasaProvider` (from `@vinyasa/tokens`) somewhere above it in the tree. See [`@vinyasa/tokens`'s README](../tokens/README.md) for what that provider does.
|
|
12
|
+
|
|
13
|
+
No separate stylesheet import is needed — Button's CSS is bundled into its own JS entry and loads automatically when you import the component.
|
|
14
|
+
|
|
15
|
+
## Setup
|
|
16
|
+
|
|
17
|
+
Wrap your app once, near the root, in `VinyasaProvider`:
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { VinyasaProvider } from '@vinyasa/tokens';
|
|
21
|
+
import { Button } from '@vinyasa/button';
|
|
22
|
+
|
|
23
|
+
function App() {
|
|
24
|
+
return (
|
|
25
|
+
<VinyasaProvider>
|
|
26
|
+
<Button>Save changes</Button>
|
|
27
|
+
</VinyasaProvider>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Usage
|
|
33
|
+
|
|
34
|
+
### Variants
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
<Button variant="primary">Primary</Button>
|
|
38
|
+
<Button variant="secondary">Secondary</Button>
|
|
39
|
+
<Button variant="tertiary">Tertiary</Button>
|
|
40
|
+
<Button variant="danger">Danger</Button>
|
|
41
|
+
<Button variant="outline">Outline</Button>
|
|
42
|
+
<Button variant="ghost">Ghost</Button>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
`variant` defaults to `"primary"`.
|
|
46
|
+
|
|
47
|
+
### Sizes
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
<Button size="sm">Small</Button>
|
|
51
|
+
<Button size="md">Medium</Button>
|
|
52
|
+
<Button size="lg">Large</Button>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
`size` defaults to `"md"`.
|
|
56
|
+
|
|
57
|
+
### Radius
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
<Button radius="sm">Sharper corners</Button>
|
|
61
|
+
<Button radius="md">Rounded rectangle</Button>
|
|
62
|
+
<Button radius="full">Pill (default)</Button>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
`radius` defaults to `"full"`. Independent of `size` — pick any radius at any size.
|
|
66
|
+
|
|
67
|
+
### Icons
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
<Button leadingIcon={<PlusIcon />}>Add item</Button>
|
|
71
|
+
<Button variant="outline" trailingIcon={<ArrowIcon />}>Continue</Button>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Icons are rendered at `1em`, so they scale automatically with whichever `size` is active.
|
|
75
|
+
|
|
76
|
+
### Loading
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
<Button loading>Saving</Button>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
While `loading` is `true`, the button is disabled, gets `aria-busy="true"`, and its `leadingIcon` (if any) is replaced by a spinner. The label stays visible so the button doesn't change width.
|
|
83
|
+
|
|
84
|
+
### Disabled
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
<Button disabled>Can't click me</Button>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Any other native `<button>` attribute (`onClick`, `type`, `id`, `aria-*`, ...) can be passed directly — `ButtonProps` extends `ComponentPropsWithoutRef<'button'>`.
|
|
91
|
+
|
|
92
|
+
### Ref forwarding
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
const ref = useRef<HTMLButtonElement>(null);
|
|
96
|
+
|
|
97
|
+
<Button ref={ref}>Save</Button>;
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Props
|
|
101
|
+
|
|
102
|
+
| Prop | Type | Default | Description |
|
|
103
|
+
| -------------- | ---------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------ |
|
|
104
|
+
| `children` | `ReactNode` | — | Required. The button's label. |
|
|
105
|
+
| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'danger' \| 'outline' \| 'ghost'` | `'primary'` | Visual style. |
|
|
106
|
+
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size. |
|
|
107
|
+
| `radius` | `'sm' \| 'md' \| 'full'` | `'full'` | Corner rounding, independent of `size`. |
|
|
108
|
+
| `loading` | `boolean` | `false` | Shows a spinner in place of `leadingIcon`, forces `disabled`. |
|
|
109
|
+
| `leadingIcon` | `ReactNode` | — | Rendered before `children`. Hidden while `loading`. |
|
|
110
|
+
| `trailingIcon` | `ReactNode` | — | Rendered after `children`. Hidden while `loading`. |
|
|
111
|
+
| `disabled` | `boolean` | `false` | Native disabled state. |
|
|
112
|
+
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Defaults to `'button'` (not the native `'submit'`) to avoid accidental form submits inside a `<form>`. |
|
|
113
|
+
|
|
114
|
+
All other native `<button>` props (`onClick`, `id`, `aria-*`, `name`, ...) pass through unchanged.
|
|
115
|
+
|
|
116
|
+
## Subpath import
|
|
117
|
+
|
|
118
|
+
For finer-grained bundling, import the component directly instead of through the package root:
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
import Button from '@vinyasa/button/button';
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## Development
|
|
125
|
+
|
|
126
|
+
From the repository root:
|
|
127
|
+
|
|
128
|
+
```bash
|
|
129
|
+
pnpm --filter @vinyasa/button build
|
|
130
|
+
pnpm --filter @vinyasa/button test
|
|
131
|
+
pnpm --filter @vinyasa/button lint
|
|
132
|
+
pnpm storybook # Components/Button — Playground, Variants, Sizes, Radii, Disabled, Loading, WithIcons
|
|
133
|
+
```
|
package/dist/cjs/button.cjs
CHANGED
|
@@ -31,12 +31,246 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
31
31
|
default: ()=>components_button
|
|
32
32
|
});
|
|
33
33
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
34
|
-
require("react");
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
const external_react_namespaceObject = require("react");
|
|
35
|
+
function toPrimitive(t, r) {
|
|
36
|
+
if ("object" != typeof t || !t) return t;
|
|
37
|
+
var e = t[Symbol.toPrimitive];
|
|
38
|
+
if (void 0 !== e) {
|
|
39
|
+
var i = e.call(t, r || "default");
|
|
40
|
+
if ("object" != typeof i) return i;
|
|
41
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
42
|
+
}
|
|
43
|
+
return ("string" === r ? String : Number)(t);
|
|
44
|
+
}
|
|
45
|
+
function toPropertyKey(t) {
|
|
46
|
+
var i = toPrimitive(t, "string");
|
|
47
|
+
return "symbol" == typeof i ? i : String(i);
|
|
48
|
+
}
|
|
49
|
+
function _defineProperty(obj, key, value) {
|
|
50
|
+
key = toPropertyKey(key);
|
|
51
|
+
if (key in obj) Object.defineProperty(obj, key, {
|
|
52
|
+
value: value,
|
|
53
|
+
enumerable: true,
|
|
54
|
+
configurable: true,
|
|
55
|
+
writable: true
|
|
39
56
|
});
|
|
57
|
+
else obj[key] = value;
|
|
58
|
+
return obj;
|
|
59
|
+
}
|
|
60
|
+
function createRuntimeFn_62c9670f_esm_ownKeys(e, r) {
|
|
61
|
+
var t = Object.keys(e);
|
|
62
|
+
if (Object.getOwnPropertySymbols) {
|
|
63
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
64
|
+
r && (o = o.filter(function(r) {
|
|
65
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
66
|
+
})), t.push.apply(t, o);
|
|
67
|
+
}
|
|
68
|
+
return t;
|
|
69
|
+
}
|
|
70
|
+
function _objectSpread2(e) {
|
|
71
|
+
for(var r = 1; r < arguments.length; r++){
|
|
72
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
73
|
+
r % 2 ? createRuntimeFn_62c9670f_esm_ownKeys(Object(t), !0).forEach(function(r) {
|
|
74
|
+
_defineProperty(e, r, t[r]);
|
|
75
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : createRuntimeFn_62c9670f_esm_ownKeys(Object(t)).forEach(function(r) {
|
|
76
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
return e;
|
|
80
|
+
}
|
|
81
|
+
function mapValues(input, fn) {
|
|
82
|
+
var result = {};
|
|
83
|
+
for(var _key in input)result[_key] = fn(input[_key], _key);
|
|
84
|
+
return result;
|
|
85
|
+
}
|
|
86
|
+
var shouldApplyCompound = (compoundCheck, selections, defaultVariants)=>{
|
|
87
|
+
for (var key of Object.keys(compoundCheck)){
|
|
88
|
+
var _selections$key;
|
|
89
|
+
if (compoundCheck[key] !== (null != (_selections$key = selections[key]) ? _selections$key : defaultVariants[key])) return false;
|
|
90
|
+
}
|
|
91
|
+
return true;
|
|
92
|
+
};
|
|
93
|
+
var createRuntimeFn = (config)=>{
|
|
94
|
+
var runtimeFn = (options)=>{
|
|
95
|
+
var className = config.defaultClassName;
|
|
96
|
+
var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
|
|
97
|
+
for(var variantName in selections){
|
|
98
|
+
var _selections$variantNa;
|
|
99
|
+
var variantSelection = null != (_selections$variantNa = selections[variantName]) ? _selections$variantNa : config.defaultVariants[variantName];
|
|
100
|
+
if (null != variantSelection) {
|
|
101
|
+
var selection = variantSelection;
|
|
102
|
+
if ('boolean' == typeof selection) selection = true === selection ? 'true' : 'false';
|
|
103
|
+
var selectionClassName = config.variantClassNames[variantName][selection];
|
|
104
|
+
if (selectionClassName) className += ' ' + selectionClassName;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
for (var [compoundCheck, compoundClassName] of config.compoundVariants)if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) className += ' ' + compoundClassName;
|
|
108
|
+
return className;
|
|
109
|
+
};
|
|
110
|
+
runtimeFn.variants = ()=>Object.keys(config.variantClassNames);
|
|
111
|
+
runtimeFn.classNames = {
|
|
112
|
+
get base () {
|
|
113
|
+
return config.defaultClassName.split(' ')[0];
|
|
114
|
+
},
|
|
115
|
+
get variants () {
|
|
116
|
+
return mapValues(config.variantClassNames, (classNames)=>mapValues(classNames, (className)=>className.split(' ')[0]));
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
return runtimeFn;
|
|
120
|
+
};
|
|
121
|
+
var Button_css_button = createRuntimeFn({
|
|
122
|
+
defaultClassName: '_1bwnrav0',
|
|
123
|
+
variantClassNames: {
|
|
124
|
+
variant: {
|
|
125
|
+
primary: '_1bwnrav1',
|
|
126
|
+
secondary: '_1bwnrav2',
|
|
127
|
+
tertiary: '_1bwnrav3',
|
|
128
|
+
danger: '_1bwnrav4',
|
|
129
|
+
outline: '_1bwnrav5',
|
|
130
|
+
ghost: '_1bwnrav6'
|
|
131
|
+
},
|
|
132
|
+
size: {
|
|
133
|
+
sm: '_1bwnrav7',
|
|
134
|
+
md: '_1bwnrav8',
|
|
135
|
+
lg: '_1bwnrav9'
|
|
136
|
+
},
|
|
137
|
+
radius: {
|
|
138
|
+
sm: '_1bwnrava',
|
|
139
|
+
md: '_1bwnravb',
|
|
140
|
+
full: '_1bwnravc'
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
defaultVariants: {
|
|
144
|
+
variant: 'primary',
|
|
145
|
+
size: 'md',
|
|
146
|
+
radius: 'full'
|
|
147
|
+
},
|
|
148
|
+
compoundVariants: []
|
|
149
|
+
});
|
|
150
|
+
var spinner = '_18kjv2i1';
|
|
151
|
+
const Spinner = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
152
|
+
className: spinner,
|
|
153
|
+
"aria-hidden": "true"
|
|
154
|
+
});
|
|
155
|
+
const button_Spinner = Spinner;
|
|
156
|
+
function _define_property(obj, key, value) {
|
|
157
|
+
if (key in obj) Object.defineProperty(obj, key, {
|
|
158
|
+
value: value,
|
|
159
|
+
enumerable: true,
|
|
160
|
+
configurable: true,
|
|
161
|
+
writable: true
|
|
162
|
+
});
|
|
163
|
+
else obj[key] = value;
|
|
164
|
+
return obj;
|
|
165
|
+
}
|
|
166
|
+
function _object_spread(target) {
|
|
167
|
+
for(var i = 1; i < arguments.length; i++){
|
|
168
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
|
169
|
+
var ownKeys = Object.keys(source);
|
|
170
|
+
if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
171
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
172
|
+
}));
|
|
173
|
+
ownKeys.forEach(function(key) {
|
|
174
|
+
_define_property(target, key, source[key]);
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
return target;
|
|
178
|
+
}
|
|
179
|
+
function Button_ownKeys(object, enumerableOnly) {
|
|
180
|
+
var keys = Object.keys(object);
|
|
181
|
+
if (Object.getOwnPropertySymbols) {
|
|
182
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
183
|
+
if (enumerableOnly) symbols = symbols.filter(function(sym) {
|
|
184
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
185
|
+
});
|
|
186
|
+
keys.push.apply(keys, symbols);
|
|
187
|
+
}
|
|
188
|
+
return keys;
|
|
189
|
+
}
|
|
190
|
+
function _object_spread_props(target, source) {
|
|
191
|
+
source = null != source ? source : {};
|
|
192
|
+
if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
193
|
+
else Button_ownKeys(Object(source)).forEach(function(key) {
|
|
194
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
195
|
+
});
|
|
196
|
+
return target;
|
|
197
|
+
}
|
|
198
|
+
function _object_without_properties(source, excluded) {
|
|
199
|
+
if (null == source) return {};
|
|
200
|
+
var target = {}, sourceKeys, key, i;
|
|
201
|
+
if ("u" > typeof Reflect && Reflect.ownKeys) {
|
|
202
|
+
sourceKeys = Reflect.ownKeys(Object(source));
|
|
203
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
204
|
+
key = sourceKeys[i];
|
|
205
|
+
if (!(excluded.indexOf(key) >= 0)) {
|
|
206
|
+
if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
return target;
|
|
210
|
+
}
|
|
211
|
+
target = _object_without_properties_loose(source, excluded);
|
|
212
|
+
if (Object.getOwnPropertySymbols) {
|
|
213
|
+
sourceKeys = Object.getOwnPropertySymbols(source);
|
|
214
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
215
|
+
key = sourceKeys[i];
|
|
216
|
+
if (!(excluded.indexOf(key) >= 0)) {
|
|
217
|
+
if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
return target;
|
|
222
|
+
}
|
|
223
|
+
function _object_without_properties_loose(source, excluded) {
|
|
224
|
+
if (null == source) return {};
|
|
225
|
+
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
|
|
226
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
227
|
+
key = sourceKeys[i];
|
|
228
|
+
if (!(excluded.indexOf(key) >= 0)) {
|
|
229
|
+
if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
return target;
|
|
233
|
+
}
|
|
234
|
+
const Button = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
|
|
235
|
+
let _ref = [
|
|
236
|
+
_0,
|
|
237
|
+
_1
|
|
238
|
+
], [_ref1, ..._rest] = _ref, { children, variant, size, radius, loading = false, leadingIcon, trailingIcon, disabled = false, type = 'button', className } = _ref1, rest = _object_without_properties(_ref1, [
|
|
239
|
+
"children",
|
|
240
|
+
"variant",
|
|
241
|
+
"size",
|
|
242
|
+
"radius",
|
|
243
|
+
"loading",
|
|
244
|
+
"leadingIcon",
|
|
245
|
+
"trailingIcon",
|
|
246
|
+
"disabled",
|
|
247
|
+
"type",
|
|
248
|
+
"className"
|
|
249
|
+
]), [ref] = _rest;
|
|
250
|
+
const classes = className ? `${Button_css_button({
|
|
251
|
+
variant,
|
|
252
|
+
size,
|
|
253
|
+
radius
|
|
254
|
+
})} ${className}` : Button_css_button({
|
|
255
|
+
variant,
|
|
256
|
+
size,
|
|
257
|
+
radius
|
|
258
|
+
});
|
|
259
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", _object_spread_props(_object_spread({
|
|
260
|
+
ref: ref,
|
|
261
|
+
type: type,
|
|
262
|
+
disabled: disabled || loading,
|
|
263
|
+
"aria-busy": loading || void 0,
|
|
264
|
+
className: classes
|
|
265
|
+
}, rest), {
|
|
266
|
+
children: [
|
|
267
|
+
loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_Spinner, {}) : leadingIcon,
|
|
268
|
+
children,
|
|
269
|
+
!loading && trailingIcon
|
|
270
|
+
]
|
|
271
|
+
}));
|
|
272
|
+
});
|
|
273
|
+
Button.displayName = 'Button';
|
|
40
274
|
const button_Button = Button;
|
|
41
275
|
const components_button = button_Button;
|
|
42
276
|
exports["default"] = __webpack_exports__["default"];
|
package/dist/cjs/button.css
CHANGED
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
._1bwnrav0 {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
padding: var(--vinyasa-space3) var(--vinyasa-space4);
|
|
6
|
-
font-size: var(--vinyasa-font-size-sm);
|
|
2
|
+
justify-content: center;
|
|
3
|
+
align-items: center;
|
|
4
|
+
gap: var(--vinyasa-space2);
|
|
7
5
|
font-weight: var(--vinyasa-font-weight-semibold);
|
|
8
6
|
line-height: var(--vinyasa-line-height-tight);
|
|
9
7
|
cursor: pointer;
|
|
10
8
|
transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), opacity var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
|
|
11
9
|
border: none;
|
|
10
|
+
display: inline-flex;
|
|
12
11
|
}
|
|
13
12
|
|
|
14
|
-
._1bwnrav0:
|
|
15
|
-
opacity: .92;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
._1bwnrav0:active {
|
|
13
|
+
._1bwnrav0:active:not(:disabled) {
|
|
19
14
|
transform: translateY(1px);
|
|
20
15
|
}
|
|
21
16
|
|
|
@@ -24,3 +19,110 @@
|
|
|
24
19
|
outline-offset: 2px;
|
|
25
20
|
}
|
|
26
21
|
|
|
22
|
+
._1bwnrav0:disabled {
|
|
23
|
+
cursor: not-allowed;
|
|
24
|
+
opacity: .5;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
._1bwnrav1 {
|
|
28
|
+
background-color: var(--vinyasa-primary);
|
|
29
|
+
color: var(--vinyasa-on-primary);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
._1bwnrav1:hover:not(:disabled) {
|
|
33
|
+
opacity: .92;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
._1bwnrav2 {
|
|
37
|
+
background-color: var(--vinyasa-secondary);
|
|
38
|
+
color: var(--vinyasa-on-secondary);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
._1bwnrav2:hover:not(:disabled) {
|
|
42
|
+
opacity: .92;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
._1bwnrav3 {
|
|
46
|
+
background-color: var(--vinyasa-tertiary);
|
|
47
|
+
color: var(--vinyasa-on-tertiary);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
._1bwnrav3:hover:not(:disabled) {
|
|
51
|
+
opacity: .92;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
._1bwnrav4 {
|
|
55
|
+
background-color: var(--vinyasa-error);
|
|
56
|
+
color: var(--vinyasa-on-error);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
._1bwnrav4:hover:not(:disabled) {
|
|
60
|
+
opacity: .92;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
._1bwnrav5 {
|
|
64
|
+
color: var(--vinyasa-primary);
|
|
65
|
+
border: var(--vinyasa-border-width-thin) solid var(--vinyasa-primary);
|
|
66
|
+
background-color: rgba(0, 0, 0, 0);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
._1bwnrav5:hover:not(:disabled) {
|
|
70
|
+
background-color: var(--vinyasa-secondary);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
._1bwnrav6 {
|
|
74
|
+
color: var(--vinyasa-primary);
|
|
75
|
+
background-color: rgba(0, 0, 0, 0);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
._1bwnrav6:hover:not(:disabled) {
|
|
79
|
+
background-color: var(--vinyasa-secondary);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
._1bwnrav7 {
|
|
83
|
+
padding: var(--vinyasa-space2) var(--vinyasa-space3);
|
|
84
|
+
font-size: var(--vinyasa-font-size-sm);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
._1bwnrav8 {
|
|
88
|
+
padding: var(--vinyasa-space3) var(--vinyasa-space4);
|
|
89
|
+
font-size: var(--vinyasa-font-size-sm);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
._1bwnrav9 {
|
|
93
|
+
padding: var(--vinyasa-space4) var(--vinyasa-space5);
|
|
94
|
+
font-size: var(--vinyasa-font-size-md);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
._1bwnrava {
|
|
98
|
+
border-radius: var(--vinyasa-radius-sm);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
._1bwnravb {
|
|
102
|
+
border-radius: var(--vinyasa-radius-md);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
._1bwnravc {
|
|
106
|
+
border-radius: var(--vinyasa-radius-full);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@keyframes _18kjv2i0 {
|
|
110
|
+
from {
|
|
111
|
+
transform: rotate(0);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
to {
|
|
115
|
+
transform: rotate(360deg);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
._18kjv2i1 {
|
|
120
|
+
border-radius: var(--vinyasa-radius-full);
|
|
121
|
+
border: .15em solid;
|
|
122
|
+
border-right-color: rgba(0, 0, 0, 0);
|
|
123
|
+
width: 1em;
|
|
124
|
+
height: 1em;
|
|
125
|
+
animation: .6s linear infinite _18kjv2i0;
|
|
126
|
+
display: inline-block;
|
|
127
|
+
}
|
|
128
|
+
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -1,16 +1,250 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __webpack_modules__ = {
|
|
3
|
-
|
|
3
|
+
527 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
|
|
4
4
|
__webpack_require__.d(__webpack_exports__, {
|
|
5
5
|
default: ()=>components_button
|
|
6
6
|
});
|
|
7
7
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
8
|
-
require("react");
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
const external_react_namespaceObject = require("react");
|
|
9
|
+
function toPrimitive(t, r) {
|
|
10
|
+
if ("object" != typeof t || !t) return t;
|
|
11
|
+
var e = t[Symbol.toPrimitive];
|
|
12
|
+
if (void 0 !== e) {
|
|
13
|
+
var i = e.call(t, r || "default");
|
|
14
|
+
if ("object" != typeof i) return i;
|
|
15
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
16
|
+
}
|
|
17
|
+
return ("string" === r ? String : Number)(t);
|
|
18
|
+
}
|
|
19
|
+
function toPropertyKey(t) {
|
|
20
|
+
var i = toPrimitive(t, "string");
|
|
21
|
+
return "symbol" == typeof i ? i : String(i);
|
|
22
|
+
}
|
|
23
|
+
function _defineProperty(obj, key, value) {
|
|
24
|
+
key = toPropertyKey(key);
|
|
25
|
+
if (key in obj) Object.defineProperty(obj, key, {
|
|
26
|
+
value: value,
|
|
27
|
+
enumerable: true,
|
|
28
|
+
configurable: true,
|
|
29
|
+
writable: true
|
|
30
|
+
});
|
|
31
|
+
else obj[key] = value;
|
|
32
|
+
return obj;
|
|
33
|
+
}
|
|
34
|
+
function createRuntimeFn_62c9670f_esm_ownKeys(e, r) {
|
|
35
|
+
var t = Object.keys(e);
|
|
36
|
+
if (Object.getOwnPropertySymbols) {
|
|
37
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
38
|
+
r && (o = o.filter(function(r) {
|
|
39
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
40
|
+
})), t.push.apply(t, o);
|
|
41
|
+
}
|
|
42
|
+
return t;
|
|
43
|
+
}
|
|
44
|
+
function _objectSpread2(e) {
|
|
45
|
+
for(var r = 1; r < arguments.length; r++){
|
|
46
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
47
|
+
r % 2 ? createRuntimeFn_62c9670f_esm_ownKeys(Object(t), !0).forEach(function(r) {
|
|
48
|
+
_defineProperty(e, r, t[r]);
|
|
49
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : createRuntimeFn_62c9670f_esm_ownKeys(Object(t)).forEach(function(r) {
|
|
50
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
return e;
|
|
54
|
+
}
|
|
55
|
+
function mapValues(input, fn) {
|
|
56
|
+
var result = {};
|
|
57
|
+
for(var _key in input)result[_key] = fn(input[_key], _key);
|
|
58
|
+
return result;
|
|
59
|
+
}
|
|
60
|
+
var shouldApplyCompound = (compoundCheck, selections, defaultVariants)=>{
|
|
61
|
+
for (var key of Object.keys(compoundCheck)){
|
|
62
|
+
var _selections$key;
|
|
63
|
+
if (compoundCheck[key] !== (null != (_selections$key = selections[key]) ? _selections$key : defaultVariants[key])) return false;
|
|
64
|
+
}
|
|
65
|
+
return true;
|
|
66
|
+
};
|
|
67
|
+
var createRuntimeFn = (config)=>{
|
|
68
|
+
var runtimeFn = (options)=>{
|
|
69
|
+
var className = config.defaultClassName;
|
|
70
|
+
var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
|
|
71
|
+
for(var variantName in selections){
|
|
72
|
+
var _selections$variantNa;
|
|
73
|
+
var variantSelection = null != (_selections$variantNa = selections[variantName]) ? _selections$variantNa : config.defaultVariants[variantName];
|
|
74
|
+
if (null != variantSelection) {
|
|
75
|
+
var selection = variantSelection;
|
|
76
|
+
if ('boolean' == typeof selection) selection = true === selection ? 'true' : 'false';
|
|
77
|
+
var selectionClassName = config.variantClassNames[variantName][selection];
|
|
78
|
+
if (selectionClassName) className += ' ' + selectionClassName;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
for (var [compoundCheck, compoundClassName] of config.compoundVariants)if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) className += ' ' + compoundClassName;
|
|
82
|
+
return className;
|
|
83
|
+
};
|
|
84
|
+
runtimeFn.variants = ()=>Object.keys(config.variantClassNames);
|
|
85
|
+
runtimeFn.classNames = {
|
|
86
|
+
get base () {
|
|
87
|
+
return config.defaultClassName.split(' ')[0];
|
|
88
|
+
},
|
|
89
|
+
get variants () {
|
|
90
|
+
return mapValues(config.variantClassNames, (classNames)=>mapValues(classNames, (className)=>className.split(' ')[0]));
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
return runtimeFn;
|
|
94
|
+
};
|
|
95
|
+
var Button_css_button = createRuntimeFn({
|
|
96
|
+
defaultClassName: '_1bwnrav0',
|
|
97
|
+
variantClassNames: {
|
|
98
|
+
variant: {
|
|
99
|
+
primary: '_1bwnrav1',
|
|
100
|
+
secondary: '_1bwnrav2',
|
|
101
|
+
tertiary: '_1bwnrav3',
|
|
102
|
+
danger: '_1bwnrav4',
|
|
103
|
+
outline: '_1bwnrav5',
|
|
104
|
+
ghost: '_1bwnrav6'
|
|
105
|
+
},
|
|
106
|
+
size: {
|
|
107
|
+
sm: '_1bwnrav7',
|
|
108
|
+
md: '_1bwnrav8',
|
|
109
|
+
lg: '_1bwnrav9'
|
|
110
|
+
},
|
|
111
|
+
radius: {
|
|
112
|
+
sm: '_1bwnrava',
|
|
113
|
+
md: '_1bwnravb',
|
|
114
|
+
full: '_1bwnravc'
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
defaultVariants: {
|
|
118
|
+
variant: 'primary',
|
|
119
|
+
size: 'md',
|
|
120
|
+
radius: 'full'
|
|
121
|
+
},
|
|
122
|
+
compoundVariants: []
|
|
123
|
+
});
|
|
124
|
+
var spinner = '_18kjv2i1';
|
|
125
|
+
const Spinner = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
126
|
+
className: spinner,
|
|
127
|
+
"aria-hidden": "true"
|
|
13
128
|
});
|
|
129
|
+
const button_Spinner = Spinner;
|
|
130
|
+
function _define_property(obj, key, value) {
|
|
131
|
+
if (key in obj) Object.defineProperty(obj, key, {
|
|
132
|
+
value: value,
|
|
133
|
+
enumerable: true,
|
|
134
|
+
configurable: true,
|
|
135
|
+
writable: true
|
|
136
|
+
});
|
|
137
|
+
else obj[key] = value;
|
|
138
|
+
return obj;
|
|
139
|
+
}
|
|
140
|
+
function _object_spread(target) {
|
|
141
|
+
for(var i = 1; i < arguments.length; i++){
|
|
142
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
|
143
|
+
var ownKeys = Object.keys(source);
|
|
144
|
+
if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
145
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
146
|
+
}));
|
|
147
|
+
ownKeys.forEach(function(key) {
|
|
148
|
+
_define_property(target, key, source[key]);
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
return target;
|
|
152
|
+
}
|
|
153
|
+
function Button_ownKeys(object, enumerableOnly) {
|
|
154
|
+
var keys = Object.keys(object);
|
|
155
|
+
if (Object.getOwnPropertySymbols) {
|
|
156
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
157
|
+
if (enumerableOnly) symbols = symbols.filter(function(sym) {
|
|
158
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
159
|
+
});
|
|
160
|
+
keys.push.apply(keys, symbols);
|
|
161
|
+
}
|
|
162
|
+
return keys;
|
|
163
|
+
}
|
|
164
|
+
function _object_spread_props(target, source) {
|
|
165
|
+
source = null != source ? source : {};
|
|
166
|
+
if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
167
|
+
else Button_ownKeys(Object(source)).forEach(function(key) {
|
|
168
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
169
|
+
});
|
|
170
|
+
return target;
|
|
171
|
+
}
|
|
172
|
+
function _object_without_properties(source, excluded) {
|
|
173
|
+
if (null == source) return {};
|
|
174
|
+
var target = {}, sourceKeys, key, i;
|
|
175
|
+
if ("u" > typeof Reflect && Reflect.ownKeys) {
|
|
176
|
+
sourceKeys = Reflect.ownKeys(Object(source));
|
|
177
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
178
|
+
key = sourceKeys[i];
|
|
179
|
+
if (!(excluded.indexOf(key) >= 0)) {
|
|
180
|
+
if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
return target;
|
|
184
|
+
}
|
|
185
|
+
target = _object_without_properties_loose(source, excluded);
|
|
186
|
+
if (Object.getOwnPropertySymbols) {
|
|
187
|
+
sourceKeys = Object.getOwnPropertySymbols(source);
|
|
188
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
189
|
+
key = sourceKeys[i];
|
|
190
|
+
if (!(excluded.indexOf(key) >= 0)) {
|
|
191
|
+
if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
return target;
|
|
196
|
+
}
|
|
197
|
+
function _object_without_properties_loose(source, excluded) {
|
|
198
|
+
if (null == source) return {};
|
|
199
|
+
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
|
|
200
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
201
|
+
key = sourceKeys[i];
|
|
202
|
+
if (!(excluded.indexOf(key) >= 0)) {
|
|
203
|
+
if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
return target;
|
|
207
|
+
}
|
|
208
|
+
const Button = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
|
|
209
|
+
let _ref = [
|
|
210
|
+
_0,
|
|
211
|
+
_1
|
|
212
|
+
], [_ref1, ..._rest] = _ref, { children, variant, size, radius, loading = false, leadingIcon, trailingIcon, disabled = false, type = 'button', className } = _ref1, rest = _object_without_properties(_ref1, [
|
|
213
|
+
"children",
|
|
214
|
+
"variant",
|
|
215
|
+
"size",
|
|
216
|
+
"radius",
|
|
217
|
+
"loading",
|
|
218
|
+
"leadingIcon",
|
|
219
|
+
"trailingIcon",
|
|
220
|
+
"disabled",
|
|
221
|
+
"type",
|
|
222
|
+
"className"
|
|
223
|
+
]), [ref] = _rest;
|
|
224
|
+
const classes = className ? `${Button_css_button({
|
|
225
|
+
variant,
|
|
226
|
+
size,
|
|
227
|
+
radius
|
|
228
|
+
})} ${className}` : Button_css_button({
|
|
229
|
+
variant,
|
|
230
|
+
size,
|
|
231
|
+
radius
|
|
232
|
+
});
|
|
233
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", _object_spread_props(_object_spread({
|
|
234
|
+
ref: ref,
|
|
235
|
+
type: type,
|
|
236
|
+
disabled: disabled || loading,
|
|
237
|
+
"aria-busy": loading || void 0,
|
|
238
|
+
className: classes
|
|
239
|
+
}, rest), {
|
|
240
|
+
children: [
|
|
241
|
+
loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_Spinner, {}) : leadingIcon,
|
|
242
|
+
children,
|
|
243
|
+
!loading && trailingIcon
|
|
244
|
+
]
|
|
245
|
+
}));
|
|
246
|
+
});
|
|
247
|
+
Button.displayName = 'Button';
|
|
14
248
|
const button_Button = Button;
|
|
15
249
|
const components_button = button_Button;
|
|
16
250
|
}
|
|
@@ -53,7 +287,7 @@ function __webpack_require__(moduleId) {
|
|
|
53
287
|
var __webpack_exports__ = {};
|
|
54
288
|
(()=>{
|
|
55
289
|
__webpack_require__.r(__webpack_exports__);
|
|
56
|
-
var _components_button__rspack_import_0 = __webpack_require__(
|
|
290
|
+
var _components_button__rspack_import_0 = __webpack_require__(527);
|
|
57
291
|
__webpack_require__.d(__webpack_exports__, {
|
|
58
292
|
Button: ()=>_components_button__rspack_import_0["default"],
|
|
59
293
|
default: ()=>_components_button__rspack_import_0["default"]
|
package/dist/cjs/index.css
CHANGED
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
._1bwnrav0 {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
padding: var(--vinyasa-space3) var(--vinyasa-space4);
|
|
6
|
-
font-size: var(--vinyasa-font-size-sm);
|
|
2
|
+
justify-content: center;
|
|
3
|
+
align-items: center;
|
|
4
|
+
gap: var(--vinyasa-space2);
|
|
7
5
|
font-weight: var(--vinyasa-font-weight-semibold);
|
|
8
6
|
line-height: var(--vinyasa-line-height-tight);
|
|
9
7
|
cursor: pointer;
|
|
10
8
|
transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), opacity var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
|
|
11
9
|
border: none;
|
|
10
|
+
display: inline-flex;
|
|
12
11
|
}
|
|
13
12
|
|
|
14
|
-
._1bwnrav0:
|
|
15
|
-
opacity: .92;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
._1bwnrav0:active {
|
|
13
|
+
._1bwnrav0:active:not(:disabled) {
|
|
19
14
|
transform: translateY(1px);
|
|
20
15
|
}
|
|
21
16
|
|
|
@@ -24,3 +19,110 @@
|
|
|
24
19
|
outline-offset: 2px;
|
|
25
20
|
}
|
|
26
21
|
|
|
22
|
+
._1bwnrav0:disabled {
|
|
23
|
+
cursor: not-allowed;
|
|
24
|
+
opacity: .5;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
._1bwnrav1 {
|
|
28
|
+
background-color: var(--vinyasa-primary);
|
|
29
|
+
color: var(--vinyasa-on-primary);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
._1bwnrav1:hover:not(:disabled) {
|
|
33
|
+
opacity: .92;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
._1bwnrav2 {
|
|
37
|
+
background-color: var(--vinyasa-secondary);
|
|
38
|
+
color: var(--vinyasa-on-secondary);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
._1bwnrav2:hover:not(:disabled) {
|
|
42
|
+
opacity: .92;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
._1bwnrav3 {
|
|
46
|
+
background-color: var(--vinyasa-tertiary);
|
|
47
|
+
color: var(--vinyasa-on-tertiary);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
._1bwnrav3:hover:not(:disabled) {
|
|
51
|
+
opacity: .92;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
._1bwnrav4 {
|
|
55
|
+
background-color: var(--vinyasa-error);
|
|
56
|
+
color: var(--vinyasa-on-error);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
._1bwnrav4:hover:not(:disabled) {
|
|
60
|
+
opacity: .92;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
._1bwnrav5 {
|
|
64
|
+
color: var(--vinyasa-primary);
|
|
65
|
+
border: var(--vinyasa-border-width-thin) solid var(--vinyasa-primary);
|
|
66
|
+
background-color: rgba(0, 0, 0, 0);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
._1bwnrav5:hover:not(:disabled) {
|
|
70
|
+
background-color: var(--vinyasa-secondary);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
._1bwnrav6 {
|
|
74
|
+
color: var(--vinyasa-primary);
|
|
75
|
+
background-color: rgba(0, 0, 0, 0);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
._1bwnrav6:hover:not(:disabled) {
|
|
79
|
+
background-color: var(--vinyasa-secondary);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
._1bwnrav7 {
|
|
83
|
+
padding: var(--vinyasa-space2) var(--vinyasa-space3);
|
|
84
|
+
font-size: var(--vinyasa-font-size-sm);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
._1bwnrav8 {
|
|
88
|
+
padding: var(--vinyasa-space3) var(--vinyasa-space4);
|
|
89
|
+
font-size: var(--vinyasa-font-size-sm);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
._1bwnrav9 {
|
|
93
|
+
padding: var(--vinyasa-space4) var(--vinyasa-space5);
|
|
94
|
+
font-size: var(--vinyasa-font-size-md);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
._1bwnrava {
|
|
98
|
+
border-radius: var(--vinyasa-radius-sm);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
._1bwnravb {
|
|
102
|
+
border-radius: var(--vinyasa-radius-md);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
._1bwnravc {
|
|
106
|
+
border-radius: var(--vinyasa-radius-full);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@keyframes _18kjv2i0 {
|
|
110
|
+
from {
|
|
111
|
+
transform: rotate(0);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
to {
|
|
115
|
+
transform: rotate(360deg);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
._18kjv2i1 {
|
|
120
|
+
border-radius: var(--vinyasa-radius-full);
|
|
121
|
+
border: .15em solid;
|
|
122
|
+
border-right-color: rgba(0, 0, 0, 0);
|
|
123
|
+
width: 1em;
|
|
124
|
+
height: 1em;
|
|
125
|
+
animation: .6s linear infinite _18kjv2i0;
|
|
126
|
+
display: inline-block;
|
|
127
|
+
}
|
|
128
|
+
|
package/dist/esm/button.css
CHANGED
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
._1bwnrav0 {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
padding: var(--vinyasa-space3) var(--vinyasa-space4);
|
|
6
|
-
font-size: var(--vinyasa-font-size-sm);
|
|
2
|
+
justify-content: center;
|
|
3
|
+
align-items: center;
|
|
4
|
+
gap: var(--vinyasa-space2);
|
|
7
5
|
font-weight: var(--vinyasa-font-weight-semibold);
|
|
8
6
|
line-height: var(--vinyasa-line-height-tight);
|
|
9
7
|
cursor: pointer;
|
|
10
8
|
transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), opacity var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
|
|
11
9
|
border: none;
|
|
10
|
+
display: inline-flex;
|
|
12
11
|
}
|
|
13
12
|
|
|
14
|
-
._1bwnrav0:
|
|
15
|
-
opacity: .92;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
._1bwnrav0:active {
|
|
13
|
+
._1bwnrav0:active:not(:disabled) {
|
|
19
14
|
transform: translateY(1px);
|
|
20
15
|
}
|
|
21
16
|
|
|
@@ -24,3 +19,110 @@
|
|
|
24
19
|
outline-offset: 2px;
|
|
25
20
|
}
|
|
26
21
|
|
|
22
|
+
._1bwnrav0:disabled {
|
|
23
|
+
cursor: not-allowed;
|
|
24
|
+
opacity: .5;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
._1bwnrav1 {
|
|
28
|
+
background-color: var(--vinyasa-primary);
|
|
29
|
+
color: var(--vinyasa-on-primary);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
._1bwnrav1:hover:not(:disabled) {
|
|
33
|
+
opacity: .92;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
._1bwnrav2 {
|
|
37
|
+
background-color: var(--vinyasa-secondary);
|
|
38
|
+
color: var(--vinyasa-on-secondary);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
._1bwnrav2:hover:not(:disabled) {
|
|
42
|
+
opacity: .92;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
._1bwnrav3 {
|
|
46
|
+
background-color: var(--vinyasa-tertiary);
|
|
47
|
+
color: var(--vinyasa-on-tertiary);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
._1bwnrav3:hover:not(:disabled) {
|
|
51
|
+
opacity: .92;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
._1bwnrav4 {
|
|
55
|
+
background-color: var(--vinyasa-error);
|
|
56
|
+
color: var(--vinyasa-on-error);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
._1bwnrav4:hover:not(:disabled) {
|
|
60
|
+
opacity: .92;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
._1bwnrav5 {
|
|
64
|
+
color: var(--vinyasa-primary);
|
|
65
|
+
border: var(--vinyasa-border-width-thin) solid var(--vinyasa-primary);
|
|
66
|
+
background-color: #0000;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
._1bwnrav5:hover:not(:disabled) {
|
|
70
|
+
background-color: var(--vinyasa-secondary);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
._1bwnrav6 {
|
|
74
|
+
color: var(--vinyasa-primary);
|
|
75
|
+
background-color: #0000;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
._1bwnrav6:hover:not(:disabled) {
|
|
79
|
+
background-color: var(--vinyasa-secondary);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
._1bwnrav7 {
|
|
83
|
+
padding: var(--vinyasa-space2) var(--vinyasa-space3);
|
|
84
|
+
font-size: var(--vinyasa-font-size-sm);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
._1bwnrav8 {
|
|
88
|
+
padding: var(--vinyasa-space3) var(--vinyasa-space4);
|
|
89
|
+
font-size: var(--vinyasa-font-size-sm);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
._1bwnrav9 {
|
|
93
|
+
padding: var(--vinyasa-space4) var(--vinyasa-space5);
|
|
94
|
+
font-size: var(--vinyasa-font-size-md);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
._1bwnrava {
|
|
98
|
+
border-radius: var(--vinyasa-radius-sm);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
._1bwnravb {
|
|
102
|
+
border-radius: var(--vinyasa-radius-md);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
._1bwnravc {
|
|
106
|
+
border-radius: var(--vinyasa-radius-full);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@keyframes _18kjv2i0 {
|
|
110
|
+
from {
|
|
111
|
+
transform: rotate(0);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
to {
|
|
115
|
+
transform: rotate(360deg);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
._18kjv2i1 {
|
|
120
|
+
border-radius: var(--vinyasa-radius-full);
|
|
121
|
+
border: .15em solid;
|
|
122
|
+
border-right-color: #0000;
|
|
123
|
+
width: 1em;
|
|
124
|
+
height: 1em;
|
|
125
|
+
animation: .6s linear infinite _18kjv2i0;
|
|
126
|
+
display: inline-block;
|
|
127
|
+
}
|
|
128
|
+
|
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
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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;
|
|
@@ -1 +1,84 @@
|
|
|
1
|
-
export declare const button:
|
|
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
|
+
}>;
|
|
@@ -1,3 +1,15 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
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;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const spinner: string;
|
package/dist/esm/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vinyasa/button",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.16",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"react": "^18.0.0 || ^19.0.0",
|
|
43
43
|
"react-dom": "^18.0.0 || ^19.0.0",
|
|
44
|
-
"@vinyasa/tokens": "^1.0.
|
|
44
|
+
"@vinyasa/tokens": "^1.0.16"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@rsbuild/plugin-react": "^2.1.0",
|
|
@@ -50,10 +50,11 @@
|
|
|
50
50
|
"@types/node": "^26.0.1",
|
|
51
51
|
"@types/react": "^19.0.0",
|
|
52
52
|
"@vanilla-extract/css": "^1.21.0",
|
|
53
|
+
"@vanilla-extract/recipes": "^0.5.7",
|
|
53
54
|
"@vanilla-extract/vite-plugin": "^5.2.3",
|
|
54
55
|
"@vanilla-extract/webpack-plugin": "^2.3.27",
|
|
55
56
|
"typescript": "^5.7.3",
|
|
56
|
-
"@vinyasa/tokens": "1.0.
|
|
57
|
+
"@vinyasa/tokens": "1.0.16"
|
|
57
58
|
},
|
|
58
59
|
"scripts": {
|
|
59
60
|
"build": "rslib build && node ../../scripts/postbuild-package.mjs",
|