@react-spectrum/s2 3.0.0-nightly-835f0aa1b-250107 → 3.0.0-nightly-d87cc4422-250109
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/dist/Accordion.cjs +3 -3
- package/dist/Accordion.css +2 -2
- package/dist/Accordion.mjs +3 -3
- package/dist/ActionBar.cjs +32 -32
- package/dist/ActionBar.css +34 -34
- package/dist/ActionBar.mjs +32 -32
- package/dist/ActionButton.cjs +61 -61
- package/dist/ActionButton.css +56 -56
- package/dist/ActionButton.mjs +61 -61
- package/dist/ActionButtonGroup.cjs +4 -4
- package/dist/ActionButtonGroup.css +3 -3
- package/dist/ActionButtonGroup.mjs +4 -4
- package/dist/Avatar.cjs +10 -10
- package/dist/Avatar.css +11 -11
- package/dist/Avatar.mjs +10 -10
- package/dist/AvatarGroup.cjs +97 -97
- package/dist/AvatarGroup.css +31 -31
- package/dist/AvatarGroup.mjs +97 -97
- package/dist/Badge.cjs +31 -31
- package/dist/Badge.css +33 -33
- package/dist/Badge.mjs +31 -31
- package/dist/Breadcrumbs.cjs +83 -82
- package/dist/Breadcrumbs.cjs.map +1 -1
- package/dist/Breadcrumbs.css +65 -59
- package/dist/Breadcrumbs.css.map +1 -1
- package/dist/Breadcrumbs.mjs +83 -82
- package/dist/Breadcrumbs.mjs.map +1 -1
- package/dist/Button.cjs +82 -77
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +65 -65
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +82 -77
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +15 -15
- package/dist/ButtonGroup.css +11 -11
- package/dist/ButtonGroup.mjs +15 -15
- package/dist/Card.cjs +157 -157
- package/dist/Card.css +117 -117
- package/dist/Card.mjs +157 -157
- package/dist/CardView.cjs +13 -13
- package/dist/CardView.css +14 -14
- package/dist/CardView.mjs +13 -13
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +2 -2
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +46 -46
- package/dist/Checkbox.css +42 -42
- package/dist/Checkbox.mjs +46 -46
- package/dist/CheckboxGroup.cjs +36 -36
- package/dist/CheckboxGroup.css +32 -32
- package/dist/CheckboxGroup.mjs +36 -36
- package/dist/ClearButton.cjs +5 -5
- package/dist/ClearButton.css +5 -5
- package/dist/ClearButton.mjs +5 -5
- package/dist/CloseButton.cjs +15 -15
- package/dist/CloseButton.css +15 -15
- package/dist/CloseButton.mjs +15 -15
- package/dist/ColorArea.cjs +9 -9
- package/dist/ColorArea.css +9 -9
- package/dist/ColorArea.mjs +9 -9
- package/dist/ColorField.cjs +29 -29
- package/dist/ColorField.css +24 -24
- package/dist/ColorField.mjs +29 -29
- package/dist/ColorHandle.cjs +9 -9
- package/dist/ColorHandle.css +16 -16
- package/dist/ColorHandle.mjs +9 -9
- package/dist/ColorSlider.cjs +34 -34
- package/dist/ColorSlider.css +42 -42
- package/dist/ColorSlider.mjs +34 -34
- package/dist/ColorSwatch.cjs +6 -6
- package/dist/ColorSwatch.css +14 -14
- package/dist/ColorSwatch.mjs +6 -6
- package/dist/ColorSwatchPicker.cjs +12 -12
- package/dist/ColorSwatchPicker.css +32 -32
- package/dist/ColorSwatchPicker.mjs +12 -12
- package/dist/ColorWheel.cjs +14 -14
- package/dist/ColorWheel.css +14 -14
- package/dist/ColorWheel.mjs +14 -14
- package/dist/ComboBox.cjs +51 -48
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css +47 -47
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +51 -48
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.css +23 -23
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/CustomDialog.cjs +8 -8
- package/dist/CustomDialog.css +9 -9
- package/dist/CustomDialog.mjs +8 -8
- package/dist/Dialog.cjs +10 -10
- package/dist/Dialog.css +39 -39
- package/dist/Dialog.mjs +10 -10
- package/dist/Disclosure.cjs +53 -53
- package/dist/Disclosure.css +47 -47
- package/dist/Disclosure.mjs +53 -53
- package/dist/Divider.cjs +5 -5
- package/dist/Divider.css +5 -5
- package/dist/Divider.mjs +5 -5
- package/dist/DropZone.cjs +24 -24
- package/dist/DropZone.css +24 -24
- package/dist/DropZone.mjs +24 -24
- package/dist/Field.cjs +98 -98
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +68 -68
- package/dist/Field.mjs +98 -98
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +4 -4
- package/dist/Form.css +3 -3
- package/dist/Form.mjs +4 -4
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +54 -54
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +117 -117
- package/dist/IllustratedMessage.css +58 -58
- package/dist/IllustratedMessage.mjs +117 -117
- package/dist/Image.cjs +10 -10
- package/dist/Image.css +11 -11
- package/dist/Image.mjs +10 -10
- package/dist/InlineAlert.cjs +41 -41
- package/dist/InlineAlert.css +44 -44
- package/dist/InlineAlert.mjs +41 -41
- package/dist/Link.cjs +27 -27
- package/dist/Link.css +27 -27
- package/dist/Link.mjs +27 -27
- package/dist/Menu.cjs +278 -207
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +114 -112
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +278 -207
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs +45 -45
- package/dist/Meter.css +51 -51
- package/dist/Meter.mjs +45 -45
- package/dist/Modal.cjs +37 -37
- package/dist/Modal.css +35 -35
- package/dist/Modal.mjs +37 -37
- package/dist/NumberField.cjs +57 -57
- package/dist/NumberField.css +65 -65
- package/dist/NumberField.mjs +57 -57
- package/dist/Picker.cjs +114 -111
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +79 -79
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +114 -111
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +40 -40
- package/dist/Popover.css +37 -37
- package/dist/Popover.mjs +40 -40
- package/dist/ProgressBar.cjs +57 -57
- package/dist/ProgressBar.css +61 -61
- package/dist/ProgressBar.mjs +57 -57
- package/dist/ProgressCircle.cjs +3 -3
- package/dist/ProgressCircle.css +2 -2
- package/dist/ProgressCircle.mjs +3 -3
- package/dist/Provider.cjs +4 -4
- package/dist/Provider.css +5 -5
- package/dist/Provider.mjs +4 -4
- package/dist/Radio.cjs +46 -46
- package/dist/Radio.css +42 -42
- package/dist/Radio.mjs +46 -46
- package/dist/RadioGroup.cjs +34 -34
- package/dist/RadioGroup.css +32 -32
- package/dist/RadioGroup.mjs +34 -34
- package/dist/SearchField.cjs +31 -31
- package/dist/SearchField.css +29 -29
- package/dist/SearchField.mjs +31 -31
- package/dist/SegmentedControl.cjs +54 -54
- package/dist/SegmentedControl.css +54 -54
- package/dist/SegmentedControl.mjs +54 -54
- package/dist/Slider.cjs +89 -89
- package/dist/Slider.css +82 -82
- package/dist/Slider.mjs +89 -89
- package/dist/StatusLight.cjs +26 -26
- package/dist/StatusLight.css +26 -26
- package/dist/StatusLight.mjs +26 -26
- package/dist/Switch.cjs +47 -47
- package/dist/Switch.css +40 -40
- package/dist/Switch.mjs +47 -47
- package/dist/TableView.cjs +137 -137
- package/dist/TableView.css +76 -76
- package/dist/TableView.mjs +137 -137
- package/dist/Tabs.cjs +60 -60
- package/dist/Tabs.css +52 -52
- package/dist/Tabs.mjs +60 -60
- package/dist/TabsPicker.cjs +63 -63
- package/dist/TabsPicker.css +61 -61
- package/dist/TabsPicker.mjs +63 -63
- package/dist/TagGroup.cjs +102 -102
- package/dist/TagGroup.css +84 -84
- package/dist/TagGroup.mjs +102 -102
- package/dist/TextField.cjs +36 -36
- package/dist/TextField.css +33 -33
- package/dist/TextField.mjs +36 -36
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +7 -7
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +29 -29
- package/dist/Tooltip.css +31 -31
- package/dist/Tooltip.mjs +29 -29
- package/dist/types.d.ts +2 -0
- package/dist/types.d.ts.map +1 -1
- package/icons/Skeleton.cjs +2 -2
- package/icons/Skeleton.css +5 -5
- package/icons/Skeleton.mjs +2 -2
- package/package.json +19 -19
- package/src/Button.tsx +18 -7
- package/src/ComboBox.tsx +2 -1
- package/src/Menu.tsx +40 -17
- package/src/Picker.tsx +2 -1
- package/style/dist/spectrum-theme.cjs +12 -1
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +12 -1
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/types.d.ts +2 -0
- package/style/dist/types.d.ts.map +1 -1
- package/style/spectrum-theme.ts +9 -1
package/dist/Button.cjs
CHANGED
|
@@ -56,60 +56,60 @@ const $25d06cf8d4e72761$export$1c1a176f3b9e48d3 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
56
56
|
const $25d06cf8d4e72761$var$iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
|
|
57
57
|
const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
|
|
58
58
|
let rules = " .";
|
|
59
|
-
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|
|
|
59
|
+
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
|
|
60
60
|
rules += matches.join('');
|
|
61
|
-
let $
|
|
61
|
+
let $V = false;
|
|
62
62
|
let $q = false;
|
|
63
63
|
let $l = false;
|
|
64
64
|
for (let p of matches){
|
|
65
|
-
if (/^\s*
|
|
65
|
+
if (/^\s*V/.test(p)) $V = true;
|
|
66
66
|
if (/^\s*q/.test(p)) $q = true;
|
|
67
67
|
if (/^\s*l/.test(p)) $l = true;
|
|
68
68
|
}
|
|
69
|
-
if (props.isFocusVisible) rules += '
|
|
70
|
-
else rules += '
|
|
69
|
+
if (props.isFocusVisible) rules += ' _Mb';
|
|
70
|
+
else rules += ' _Ma';
|
|
71
71
|
rules += ' da_____M';
|
|
72
72
|
if (props.isStaticColor) rules += ' d_____G';
|
|
73
73
|
else rules += ' dx';
|
|
74
|
-
rules += '
|
|
75
|
-
rules += '
|
|
74
|
+
rules += ' _Oc';
|
|
75
|
+
rules += ' _N-3t1z';
|
|
76
76
|
if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
|
|
77
77
|
else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
|
|
78
|
-
if (!$
|
|
79
|
-
rules += '
|
|
80
|
-
rules += '
|
|
81
|
-
rules += ' _1d';
|
|
78
|
+
if (!$V) rules += ' Vc';
|
|
79
|
+
rules += ' _0d';
|
|
80
|
+
rules += ' _2-soocicc';
|
|
82
81
|
rules += ' _2d';
|
|
83
|
-
rules += '
|
|
82
|
+
rules += ' _3d';
|
|
83
|
+
rules += ' _ka';
|
|
84
84
|
rules += ' jbH';
|
|
85
85
|
rules += ' jG';
|
|
86
|
-
rules += '
|
|
87
|
-
rules += '
|
|
88
|
-
rules += '
|
|
89
|
-
rules += '
|
|
90
|
-
rules += '
|
|
91
|
-
rules += '
|
|
92
|
-
rules += '
|
|
93
|
-
rules += '
|
|
86
|
+
rules += ' _d-bc1l9oh';
|
|
87
|
+
rules += ' _d-1uotwbwg';
|
|
88
|
+
rules += ' _d-eo0c6sf';
|
|
89
|
+
rules += ' _d-enzzrge';
|
|
90
|
+
rules += ' _d-enzykdd';
|
|
91
|
+
rules += ' _d-enzwzjc';
|
|
92
|
+
rules += ' _d-enzrfpb';
|
|
93
|
+
rules += ' _da';
|
|
94
94
|
if (props.size === "XL") {
|
|
95
|
-
rules += '
|
|
96
|
-
rules += '
|
|
95
|
+
rules += ' _ebj';
|
|
96
|
+
rules += ' _ei';
|
|
97
97
|
} else if (props.size === "L") {
|
|
98
|
-
rules += '
|
|
99
|
-
rules += '
|
|
98
|
+
rules += ' _ebh';
|
|
99
|
+
rules += ' _eg';
|
|
100
100
|
} else if (props.size === "S") {
|
|
101
|
-
rules += '
|
|
102
|
-
rules += '
|
|
101
|
+
rules += ' _ebd';
|
|
102
|
+
rules += ' _ec';
|
|
103
103
|
} else if (props.size === "XS") {
|
|
104
|
-
rules += '
|
|
105
|
-
rules += '
|
|
104
|
+
rules += ' _ebb';
|
|
105
|
+
rules += ' _ea';
|
|
106
106
|
} else {
|
|
107
|
-
rules += '
|
|
108
|
-
rules += '
|
|
107
|
+
rules += ' _ebf';
|
|
108
|
+
rules += ' _ee';
|
|
109
109
|
}
|
|
110
|
-
rules += '
|
|
111
|
-
rules += '
|
|
112
|
-
rules += '
|
|
110
|
+
rules += ' _fd';
|
|
111
|
+
rules += ' _g-1x99dlob';
|
|
112
|
+
rules += ' _ga';
|
|
113
113
|
if (props.fillStyle === "outline") {
|
|
114
114
|
if (props.isDisabled) rules += ' aa_____O';
|
|
115
115
|
else rules += ' aa_____K';
|
|
@@ -161,7 +161,7 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
|
|
|
161
161
|
else rules += ' an';
|
|
162
162
|
} else if (props.variant === "primary") rules += ' ad';
|
|
163
163
|
}
|
|
164
|
-
rules += '
|
|
164
|
+
rules += ' __Ea';
|
|
165
165
|
rules += ' o-375tou';
|
|
166
166
|
if (!$q) {
|
|
167
167
|
if (props.size === "XL") rules += ' q-soocicj';
|
|
@@ -170,23 +170,23 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
|
|
|
170
170
|
else if (props.size === "XS") rules += ' q-soocicg';
|
|
171
171
|
else rules += ' q-soocicf';
|
|
172
172
|
}
|
|
173
|
-
rules += ' _vg';
|
|
174
173
|
rules += ' _wg';
|
|
175
174
|
rules += ' _xg';
|
|
176
175
|
rules += ' _yg';
|
|
177
|
-
rules += '
|
|
176
|
+
rules += ' _zg';
|
|
177
|
+
rules += ' __oa';
|
|
178
178
|
if (!$l) rules += ' le';
|
|
179
|
-
rules += '
|
|
179
|
+
rules += ' _md';
|
|
180
180
|
rules += ' C-soocica';
|
|
181
181
|
rules += ' CJ';
|
|
182
182
|
rules += ' D-soocica';
|
|
183
183
|
rules += ' DJ';
|
|
184
184
|
rules += ' Ea';
|
|
185
185
|
rules += ' Fa';
|
|
186
|
-
rules += '
|
|
187
|
-
rules += '
|
|
188
|
-
rules += '
|
|
189
|
-
rules += '
|
|
186
|
+
rules += ' _c-soocicb';
|
|
187
|
+
rules += ' _Pa';
|
|
188
|
+
rules += ' _R-375x7f';
|
|
189
|
+
rules += ' _Sa';
|
|
190
190
|
rules += ' wa';
|
|
191
191
|
rules += ' u-375tp0';
|
|
192
192
|
rules += ' v-375tp1';
|
|
@@ -229,24 +229,23 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
|
|
|
229
229
|
else if (props.isHovered) rules += ' co';
|
|
230
230
|
else rules += ' cn';
|
|
231
231
|
}
|
|
232
|
-
rules += '
|
|
233
|
-
if (props.
|
|
234
|
-
else if (props.isDisabled) rules += ' _B-yknrp1';
|
|
232
|
+
rules += ' _Ca-yknrp1';
|
|
233
|
+
if (props.isDisabled) rules += ' _C-yknrp1';
|
|
235
234
|
else if (props.variant === "genai") {
|
|
236
|
-
if (props.isFocusVisible) rules += '
|
|
237
|
-
else if (props.isPressed) rules += '
|
|
238
|
-
else if (props.isHovered) rules += '
|
|
239
|
-
else rules += '
|
|
235
|
+
if (props.isFocusVisible) rules += ' _C-1gcd5pl';
|
|
236
|
+
else if (props.isPressed) rules += ' _C-1gcd5pl';
|
|
237
|
+
else if (props.isHovered) rules += ' _C-1gcd5pl';
|
|
238
|
+
else rules += ' _C-u0nzys';
|
|
240
239
|
} else if (props.variant === "premium") {
|
|
241
|
-
if (props.isFocusVisible) rules += '
|
|
242
|
-
else if (props.isPressed) rules += '
|
|
243
|
-
else if (props.isHovered) rules += '
|
|
244
|
-
else rules += '
|
|
240
|
+
if (props.isFocusVisible) rules += ' _C-2xhv0x';
|
|
241
|
+
else if (props.isPressed) rules += ' _C-2xhv0x';
|
|
242
|
+
else if (props.isHovered) rules += ' _C-2xhv0x';
|
|
243
|
+
else rules += ' _C-riuwfd';
|
|
245
244
|
}
|
|
246
245
|
rules += ' b-375toh';
|
|
247
246
|
rules += ' -rwx0fg_e-b';
|
|
248
|
-
rules += '
|
|
249
|
-
rules += '
|
|
247
|
+
rules += ' _Ab';
|
|
248
|
+
rules += ' __S-yksgrp';
|
|
250
249
|
if (props.size === "XL") rules += ' -_375tou_o-j';
|
|
251
250
|
else if (props.size === "L") rules += ' -_375tou_o-i';
|
|
252
251
|
else if (props.size === "S") rules += ' -_375tou_o-h';
|
|
@@ -268,17 +267,20 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
|
|
|
268
267
|
}
|
|
269
268
|
if (props.isStaticColor) {
|
|
270
269
|
if (props.fillStyle === "outline") {
|
|
271
|
-
if (props.isDisabled)
|
|
272
|
-
|
|
270
|
+
if (props.isDisabled) {
|
|
271
|
+
if (props.variant === "genai") rules += ' -_375toh_b-_____x';
|
|
272
|
+
else if (props.variant === "premium") rules += ' -_375toh_b-_____x';
|
|
273
|
+
else rules += ' -_375toh_b-a';
|
|
274
|
+
} else if (props.isFocusVisible) rules += ' -_375toh_b-_____x';
|
|
273
275
|
else if (props.isPressed) rules += ' -_375toh_b-_____x';
|
|
274
276
|
else if (props.isHovered) rules += ' -_375toh_b-_____x';
|
|
275
|
-
else if (props.variant === "genai") rules += ' -_375toh_b-
|
|
276
|
-
else if (props.variant === "premium") rules += ' -_375toh_b-
|
|
277
|
+
else if (props.variant === "genai") rules += ' -_375toh_b-_____x';
|
|
278
|
+
else if (props.variant === "premium") rules += ' -_375toh_b-_____x';
|
|
277
279
|
else rules += ' -_375toh_b-a';
|
|
278
280
|
} else if (props.fillStyle === "fill") {
|
|
279
281
|
if (props.isDisabled) rules += ' -_375toh_b-_____x';
|
|
280
|
-
else if (props.variant === "genai") rules += ' -_375toh_b-
|
|
281
|
-
else if (props.variant === "premium") rules += ' -_375toh_b-
|
|
282
|
+
else if (props.variant === "genai") rules += ' -_375toh_b-_____x';
|
|
283
|
+
else if (props.variant === "premium") rules += ' -_375toh_b-_____x';
|
|
282
284
|
else if (props.variant === "secondary") {
|
|
283
285
|
if (props.isPressed) rules += ' -_375toh_b-_____y';
|
|
284
286
|
else if (props.isFocusVisible) rules += ' -_375toh_b-_____y';
|
|
@@ -292,8 +294,11 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
|
|
|
292
294
|
}
|
|
293
295
|
}
|
|
294
296
|
} else if (props.fillStyle === "outline") {
|
|
295
|
-
if (props.isDisabled)
|
|
296
|
-
|
|
297
|
+
if (props.isDisabled) {
|
|
298
|
+
if (props.variant === "genai") rules += ' -_375toh_b-g';
|
|
299
|
+
else if (props.variant === "premium") rules += ' -_375toh_b-g';
|
|
300
|
+
else rules += ' -_375toh_b-a';
|
|
301
|
+
} else if (props.isFocusVisible) rules += ' -_375toh_b-g';
|
|
297
302
|
else if (props.isPressed) rules += ' -_375toh_b-g';
|
|
298
303
|
else if (props.isHovered) rules += ' -_375toh_b-g';
|
|
299
304
|
else if (props.variant === "genai") rules += ' -_375toh_b-g';
|
|
@@ -378,9 +383,9 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
378
383
|
let rules = " .";
|
|
379
384
|
rules += ' E-1gogtue';
|
|
380
385
|
rules += ' F-1gogtue';
|
|
381
|
-
rules += '
|
|
382
|
-
if (props.isProgressVisible) rules += '
|
|
383
|
-
else rules += '
|
|
386
|
+
rules += ' __B-3t1y';
|
|
387
|
+
if (props.isProgressVisible) rules += ' _L-3t1x';
|
|
388
|
+
else rules += ' _L-3t1y';
|
|
384
389
|
return rules;
|
|
385
390
|
}({
|
|
386
391
|
isProgressVisible: isProgressVisible
|
|
@@ -394,16 +399,16 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
394
399
|
{
|
|
395
400
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
396
401
|
slot: 'icon',
|
|
397
|
-
styles: " .
|
|
402
|
+
styles: " . __B-3t1x"
|
|
398
403
|
}),
|
|
399
404
|
styles: function anonymous(props) {
|
|
400
405
|
let rules = " .";
|
|
401
406
|
rules += ' l-1sthc3k';
|
|
402
407
|
rules += ' k-1sthc3k';
|
|
403
408
|
rules += ' y-oelgqu';
|
|
404
|
-
rules += '
|
|
405
|
-
if (props.isProgressVisible) rules += '
|
|
406
|
-
else rules += '
|
|
409
|
+
rules += ' _9-3t1x';
|
|
410
|
+
if (props.isProgressVisible) rules += ' _L-3t1x';
|
|
411
|
+
else rules += ' _L-3t1y';
|
|
407
412
|
return rules;
|
|
408
413
|
}({
|
|
409
414
|
isProgressVisible: isProgressVisible
|
|
@@ -418,12 +423,12 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
418
423
|
isPending && /*#__PURE__*/ (0, $8owBJ$reactjsxruntime.jsx)("div", {
|
|
419
424
|
className: function anonymous(props) {
|
|
420
425
|
let rules = " .";
|
|
421
|
-
rules += '
|
|
422
|
-
rules += ' X-3760fj';
|
|
426
|
+
rules += ' Va';
|
|
423
427
|
rules += ' Y-3760fj';
|
|
424
|
-
rules += '
|
|
425
|
-
|
|
426
|
-
|
|
428
|
+
rules += ' Z-3760fj';
|
|
429
|
+
rules += ' U-1tktoou';
|
|
430
|
+
if (props.isProgressVisible) rules += ' _L-3t1y';
|
|
431
|
+
else rules += ' _L-3t1x';
|
|
427
432
|
return rules;
|
|
428
433
|
}({
|
|
429
434
|
isProgressVisible: isProgressVisible,
|
|
@@ -483,7 +488,7 @@ const $25d06cf8d4e72761$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
483
488
|
[
|
|
484
489
|
(0, $6367bc87eb7d24ad$exports.TextContext),
|
|
485
490
|
{
|
|
486
|
-
styles: " . E-1gogtue F-1gogtue
|
|
491
|
+
styles: " . E-1gogtue F-1gogtue __B-3t1y",
|
|
487
492
|
// @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
|
|
488
493
|
'data-rsp-slot': 'text'
|
|
489
494
|
}
|
|
@@ -493,9 +498,9 @@ const $25d06cf8d4e72761$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
493
498
|
{
|
|
494
499
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
495
500
|
slot: 'icon',
|
|
496
|
-
styles: " .
|
|
501
|
+
styles: " . __B-3t1x"
|
|
497
502
|
}),
|
|
498
|
-
styles: " . l-1sthc3k k-1sthc3k y-oelgqu
|
|
503
|
+
styles: " . l-1sthc3k k-1sthc3k y-oelgqu _9-3t1x"
|
|
499
504
|
}
|
|
500
505
|
]
|
|
501
506
|
],
|
package/dist/Button.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n /**\n * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n *\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai',\n /**\n * The background style of the Button.\n *\n * @default 'fill'\n */\n fillStyle?: 'fill' | 'outline',\n /**\n * The size of the Button.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the Button appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n /** The content to display in the Button. */\n children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n /** The content to display in the Button. */\n children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n position: 'relative',\n display: 'flex',\n alignItems: {\n default: 'baseline',\n [iconOnly]: 'center'\n },\n justifyContent: 'center',\n textAlign: 'start',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'bold',\n userSelect: 'none',\n minHeight: 'control',\n minWidth: {\n [iconOnly]: 'control'\n },\n borderRadius: 'pill',\n boxSizing: 'border-box',\n width: 'fit',\n textDecoration: 'none', // for link buttons\n paddingX: {\n default: 'pill',\n [iconOnly]: 0\n },\n paddingY: 0,\n aspectRatio: {\n [iconOnly]: 'square'\n },\n transition: 'default',\n borderStyle: 'solid',\n borderWidth: {\n fillStyle: {\n fill: 0,\n outline: 2\n },\n variant: {\n premium: 0,\n genai: 0\n }\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n borderColor: {\n variant: {\n primary: baseColor('gray-800'),\n secondary: baseColor('gray-300')\n },\n isDisabled: 'disabled',\n isStaticColor: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-300')\n },\n isDisabled: 'transparent-overlay-300'\n },\n forcedColors: {\n default: 'ButtonBorder',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n backgroundImage: {\n variant: {\n premium: {\n default: linearGradient('96deg', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n isHovered: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isPressed: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isFocusVisible: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n },\n genai: {\n default: linearGradient('96deg', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n isHovered: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isPressed: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isFocusVisible: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n }\n },\n isDisabled: 'none',\n isPending: 'none',\n forcedColors: 'none'\n },\n backgroundColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'neutral',\n secondary: baseColor('gray-100'),\n accent: 'accent',\n negative: 'negative',\n premium: 'gray-100',\n genai: 'gray-100'\n },\n isDisabled: 'disabled'\n },\n outline: {\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n },\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isFocusVisible: 'gray-100',\n isDisabled: 'transparent'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-100'),\n premium: 'gray-800',\n genai: 'gray-800'\n },\n isDisabled: 'transparent-overlay-100'\n },\n outline: {\n variant: {\n premium: 'gray-800',\n genai: 'gray-800'\n },\n default: 'transparent',\n isHovered: 'transparent-overlay-100',\n isPressed: 'transparent-overlay-100',\n isFocusVisible: 'transparent-overlay-100',\n isDisabled: 'transparent'\n }\n }\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n },\n outline: 'ButtonFace'\n }\n }\n },\n color: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'gray-25',\n secondary: 'neutral',\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: 'neutral',\n variant: {\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'auto',\n secondary: baseColor('transparent-overlay-800'),\n premium: 'white',\n genai: 'white'\n }\n },\n outline: {\n variant: {\n premium: 'white',\n genai: 'white'\n },\n default: baseColor('transparent-overlay-800')\n }\n },\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonFace',\n isDisabled: 'HighlightText'\n },\n outline: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n forcedColorAdjust: 'none',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isPending,\n variant = 'primary',\n fillStyle = 'fill',\n size = 'M',\n staticColor\n } = props;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. */\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n isDisabled: renderProps.isDisabled || isProgressVisible,\n variant,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n flexShrink: 0,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending &&\n <div\n className={style({\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translate(-50%, -50%)',\n opacity: {\n default: 0,\n isProgressVisible: 1\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})} />\n </div>\n }\n </Provider>\n </RACButton>\n );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n props = useFormProps(props);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <Link\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n variant: props.variant || 'primary',\n fillStyle: props.fillStyle || 'fill',\n size: props.size || 'M',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor,\n isPending: false\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({paddingY: '--labelPadding', order: 1}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n /**\n * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n *\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai',\n /**\n * The background style of the Button.\n *\n * @default 'fill'\n */\n fillStyle?: 'fill' | 'outline',\n /**\n * The size of the Button.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the Button appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n /** The content to display in the Button. */\n children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n /** The content to display in the Button. */\n children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n position: 'relative',\n display: 'flex',\n alignItems: {\n default: 'baseline',\n [iconOnly]: 'center'\n },\n justifyContent: 'center',\n textAlign: 'start',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'bold',\n userSelect: 'none',\n minHeight: 'control',\n minWidth: {\n [iconOnly]: 'control'\n },\n borderRadius: 'pill',\n boxSizing: 'border-box',\n width: 'fit',\n textDecoration: 'none', // for link buttons\n paddingX: {\n default: 'pill',\n [iconOnly]: 0\n },\n paddingY: 0,\n aspectRatio: {\n [iconOnly]: 'square'\n },\n transition: 'default',\n borderStyle: 'solid',\n borderWidth: {\n fillStyle: {\n fill: 0,\n outline: 2\n },\n variant: {\n premium: 0,\n genai: 0\n }\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n borderColor: {\n variant: {\n primary: baseColor('gray-800'),\n secondary: baseColor('gray-300')\n },\n isDisabled: 'disabled',\n isStaticColor: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-300')\n },\n isDisabled: 'transparent-overlay-300'\n },\n forcedColors: {\n default: 'ButtonBorder',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n backgroundImage: {\n variant: {\n premium: {\n default: linearGradient('96deg', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n isHovered: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isPressed: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isFocusVisible: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n },\n genai: {\n default: linearGradient('96deg', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n isHovered: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isPressed: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isFocusVisible: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n }\n },\n isDisabled: 'none',\n forcedColors: 'none'\n },\n backgroundColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'neutral',\n secondary: baseColor('gray-100'),\n accent: 'accent',\n negative: 'negative',\n premium: 'gray-100',\n genai: 'gray-100'\n },\n isDisabled: 'disabled'\n },\n outline: {\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n },\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isFocusVisible: 'gray-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n }\n }\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-100'),\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n isDisabled: 'transparent-overlay-100'\n },\n outline: {\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n default: 'transparent',\n isHovered: 'transparent-overlay-100',\n isPressed: 'transparent-overlay-100',\n isFocusVisible: 'transparent-overlay-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n }\n }\n }\n }\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n },\n outline: 'ButtonFace'\n }\n }\n },\n color: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'gray-25',\n secondary: 'neutral',\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: 'neutral',\n variant: {\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'auto',\n secondary: baseColor('transparent-overlay-800'),\n premium: 'white',\n genai: 'white'\n }\n },\n outline: {\n variant: {\n premium: 'white',\n genai: 'white'\n },\n default: baseColor('transparent-overlay-800')\n }\n },\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonFace',\n isDisabled: 'HighlightText'\n },\n outline: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n forcedColorAdjust: 'none',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isPending,\n variant = 'primary',\n fillStyle = 'fill',\n size = 'M',\n staticColor\n } = props;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. */\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n isDisabled: renderProps.isDisabled || isProgressVisible,\n variant,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n flexShrink: 0,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending &&\n <div\n className={style({\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translate(-50%, -50%)',\n opacity: {\n default: 0,\n isProgressVisible: 1\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})} />\n </div>\n }\n </Provider>\n </RACButton>\n );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n props = useFormProps(props);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <Link\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n variant: props.variant || 'primary',\n fillStyle: props.fillStyle || 'fill',\n size: props.size || 'M',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor,\n isPending: false\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({paddingY: '--labelPadding', order: 1}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.cjs.map"}
|