@vinyasa/button 1.0.15 → 1.0.17
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 +114 -12
- package/dist/cjs/index.cjs +241 -7
- package/dist/cjs/index.css +114 -12
- package/dist/esm/button.css +114 -12
- 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/dist/cjs/index.cjs
CHANGED
|
@@ -1,16 +1,250 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __webpack_modules__ = {
|
|
3
|
-
|
|
3
|
+
397 (__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__(397);
|
|
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,26 +1,128 @@
|
|
|
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
|
|
|
22
17
|
._1bwnrav0:focus-visible {
|
|
23
|
-
outline:
|
|
24
|
-
outline-offset:
|
|
18
|
+
outline: var(--vinyasa-focus-ring-width) solid var(--vinyasa-focus);
|
|
19
|
+
outline-offset: var(--vinyasa-focus-ring-offset);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
._1bwnrav0:disabled {
|
|
23
|
+
cursor: not-allowed;
|
|
24
|
+
opacity: var(--vinyasa-opacity-disabled);
|
|
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: var(--vinyasa-opacity-hover);
|
|
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: var(--vinyasa-opacity-hover);
|
|
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: var(--vinyasa-opacity-hover);
|
|
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: var(--vinyasa-opacity-hover);
|
|
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;
|
|
25
127
|
}
|
|
26
128
|
|
package/dist/esm/button.css
CHANGED
|
@@ -1,26 +1,128 @@
|
|
|
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
|
|
|
22
17
|
._1bwnrav0:focus-visible {
|
|
23
|
-
outline:
|
|
24
|
-
outline-offset:
|
|
18
|
+
outline: var(--vinyasa-focus-ring-width) solid var(--vinyasa-focus);
|
|
19
|
+
outline-offset: var(--vinyasa-focus-ring-offset);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
._1bwnrav0:disabled {
|
|
23
|
+
cursor: not-allowed;
|
|
24
|
+
opacity: var(--vinyasa-opacity-disabled);
|
|
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: var(--vinyasa-opacity-hover);
|
|
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: var(--vinyasa-opacity-hover);
|
|
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: var(--vinyasa-opacity-hover);
|
|
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: var(--vinyasa-opacity-hover);
|
|
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;
|
|
25
127
|
}
|
|
26
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;
|