@react-spectrum/s2 0.3.2-nightly.5038 → 3.0.0-nightly-641446f65-240905
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/Meter.cjs +32 -17
- package/dist/Meter.cjs.map +1 -1
- package/dist/Meter.css +88 -40
- package/dist/Meter.css.map +1 -1
- package/dist/Meter.mjs +32 -17
- package/dist/Meter.mjs.map +1 -1
- package/dist/ProgressBar.cjs +52 -20
- package/dist/ProgressBar.cjs.map +1 -1
- package/dist/ProgressBar.css +112 -31
- package/dist/ProgressBar.css.map +1 -1
- package/dist/ProgressBar.mjs +52 -20
- package/dist/ProgressBar.mjs.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +15 -15
- package/src/Meter.tsx +1 -9
- package/src/ProgressBar.tsx +51 -16
- package/src/bar-utils.ts +2 -1
- package/LICENSE +0 -201
- package/style/dist/main.cjs +0 -1970
- package/style/dist/main.cjs.map +0 -1
- package/style/dist/module.mjs +0 -1959
- package/style/dist/module.mjs.map +0 -1
- package/style/dist/style-macro.cjs +0 -543
- package/style/dist/style-macro.cjs.map +0 -1
- package/style/dist/style-macro.mjs +0 -534
- package/style/dist/style-macro.mjs.map +0 -1
- package/style/dist/types.d.ts +0 -778
- package/style/dist/types.d.ts.map +0 -1
package/dist/Meter.cjs
CHANGED
|
@@ -37,12 +37,10 @@ const $f53cdf036c04454a$var$wrapper = function anonymous(props, overrides) {
|
|
|
37
37
|
let $U = false;
|
|
38
38
|
let $q = false;
|
|
39
39
|
let $r = false;
|
|
40
|
-
let $l = false;
|
|
41
40
|
for (let p of matches){
|
|
42
41
|
if (/^\s*U/.test(p)) $U = true;
|
|
43
42
|
if (/^\s*q/.test(p)) $q = true;
|
|
44
43
|
if (/^\s*r/.test(p)) $r = true;
|
|
45
|
-
if (/^\s*l/.test(p)) $l = true;
|
|
46
44
|
}
|
|
47
45
|
if (!$U) rules += ' Uc';
|
|
48
46
|
rules += ' _Zf';
|
|
@@ -77,21 +75,6 @@ const $f53cdf036c04454a$var$wrapper = function anonymous(props, overrides) {
|
|
|
77
75
|
rules += ' -_1urhtf5_k-b';
|
|
78
76
|
rules += ' -_1inj1bc_i--q18lfg';
|
|
79
77
|
rules += ' jd';
|
|
80
|
-
if (!$l) {
|
|
81
|
-
if (props.size === "XL") {
|
|
82
|
-
rules += ' lbT';
|
|
83
|
-
rules += ' lO';
|
|
84
|
-
} else if (props.size === "L") {
|
|
85
|
-
rules += ' lbS';
|
|
86
|
-
rules += ' lR';
|
|
87
|
-
} else if (props.size === "S") {
|
|
88
|
-
rules += ' lbO';
|
|
89
|
-
rules += ' lN';
|
|
90
|
-
} else {
|
|
91
|
-
rules += ' lbQ';
|
|
92
|
-
rules += ' lP';
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
78
|
return rules;
|
|
96
79
|
};
|
|
97
80
|
const $f53cdf036c04454a$var$valueStyles = function anonymous(props) {
|
|
@@ -146,6 +129,38 @@ const $f53cdf036c04454a$var$trackStyles = function anonymous(props) {
|
|
|
146
129
|
rules += ' __b-3773ju';
|
|
147
130
|
rules += ' __c-3773ju';
|
|
148
131
|
rules += ' __d-3773ju';
|
|
132
|
+
if (props.size === "XL") {
|
|
133
|
+
rules += ' qbw';
|
|
134
|
+
rules += ' qv';
|
|
135
|
+
} else if (props.size === "L") {
|
|
136
|
+
rules += ' qbs';
|
|
137
|
+
rules += ' qp';
|
|
138
|
+
} else if (props.size === "S") {
|
|
139
|
+
rules += ' qbl';
|
|
140
|
+
rules += ' qk';
|
|
141
|
+
} else if (props.size === "XS") {
|
|
142
|
+
rules += ' qbj';
|
|
143
|
+
rules += ' qi';
|
|
144
|
+
} else {
|
|
145
|
+
rules += ' qbp';
|
|
146
|
+
rules += ' qo';
|
|
147
|
+
}
|
|
148
|
+
if (props.isQuiet) rules += ' __ma';
|
|
149
|
+
else rules += ' __m-1s8glxue';
|
|
150
|
+
if (props.size === "XL") {
|
|
151
|
+
rules += ' -usygro_l-bT';
|
|
152
|
+
rules += ' -usygro_l-O';
|
|
153
|
+
} else if (props.size === "L") {
|
|
154
|
+
rules += ' -usygro_l-bS';
|
|
155
|
+
rules += ' -usygro_l-R';
|
|
156
|
+
} else if (props.size === "S") {
|
|
157
|
+
rules += ' -usygro_l-bO';
|
|
158
|
+
rules += ' -usygro_l-N';
|
|
159
|
+
} else {
|
|
160
|
+
rules += ' -usygro_l-bQ';
|
|
161
|
+
rules += ' -usygro_l-P';
|
|
162
|
+
}
|
|
163
|
+
rules += ' m-rwozxi';
|
|
149
164
|
rules += ' __vb';
|
|
150
165
|
rules += ' __wb';
|
|
151
166
|
rules += ' _vf';
|
package/dist/Meter.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAoCM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAyD;AAEjG,MAAM
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAoCM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,eACV,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;YACA,eAAe;QACjB,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAc;wBAAM,aAAa;kCAAc;;oBACnG,uBAAS,gCAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCACjF,gCAAC;wBAAI,WAAW,kCAAY;yCAAC;kCAAa;wBAAI;kCAC5C,cAAA,gCAAC;4BAAI,WAAW,iCAAW;6CAAC;yCAAa;4BAAO;4BAAI,OAAO;gCAAC,OAAO,aAAa;4BAAG;;;;;;AAM/F;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Meter.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 {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n */\n variant?: 'informative' | 'positive' | 'notice' | 'negative',\n /**\n * The size of the Meter.\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'\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: size(6),\n size: {\n S: 4, // progress-bar-thickness-small\n M: size(6), // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: size(10) // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'informative',\n variant: {\n positive: 'positive',\n notice: 'notice',\n negative: 'negative'\n },\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n ...groupProps\n } = props;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition: 'top'\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition=\"top\" staticColor={staticColor}>{label}</FieldLabel>}\n {label && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n <div className={trackStyles({staticColor, size})}>\n <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </>\n )}\n </AriaMeter>\n );\n}\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.cjs.map"}
|
package/dist/Meter.css
CHANGED
|
@@ -32,10 +32,6 @@
|
|
|
32
32
|
isolation: isolate;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.qv {
|
|
36
|
-
min-width: 3rem;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
35
|
.r-3bwcc2 {
|
|
40
36
|
max-width: 768px;
|
|
41
37
|
}
|
|
@@ -72,22 +68,6 @@
|
|
|
72
68
|
column-gap: .75rem;
|
|
73
69
|
}
|
|
74
70
|
|
|
75
|
-
.lP {
|
|
76
|
-
width: 13rem;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.lN {
|
|
80
|
-
width: 12rem;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.lR {
|
|
84
|
-
width: 14rem;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.lO {
|
|
88
|
-
width: 15rem;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
71
|
._ca {
|
|
92
72
|
font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
|
|
93
73
|
}
|
|
@@ -178,6 +158,50 @@
|
|
|
178
158
|
grid-row-end: bar;
|
|
179
159
|
}
|
|
180
160
|
|
|
161
|
+
.qo {
|
|
162
|
+
min-width: 2rem;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.qi {
|
|
166
|
+
min-width: 1.25rem;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.qk {
|
|
170
|
+
min-width: 1.5rem;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.qp {
|
|
174
|
+
min-width: 2.5rem;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.qv {
|
|
178
|
+
min-width: 3rem;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.__ma {
|
|
182
|
+
contain: none;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.-usygro_l-P {
|
|
186
|
+
--defaultWidth: 13rem;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.-usygro_l-N {
|
|
190
|
+
--defaultWidth: 12rem;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.-usygro_l-R {
|
|
194
|
+
--defaultWidth: 14rem;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.-usygro_l-O {
|
|
198
|
+
--defaultWidth: 15rem;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.m-rwozxi {
|
|
202
|
+
contain-intrinsic-width: calc(var(--defaultWidth) - var(--C, 0px) - var(--D, 0px) - var(--s, 0px) - var(--t, 0px));
|
|
203
|
+
}
|
|
204
|
+
|
|
181
205
|
.__vb {
|
|
182
206
|
overflow-x: hidden;
|
|
183
207
|
}
|
|
@@ -305,10 +329,6 @@
|
|
|
305
329
|
|
|
306
330
|
@layer _.b.b {
|
|
307
331
|
@media not ((hover: hover) and (pointer: fine)) {
|
|
308
|
-
.qbw {
|
|
309
|
-
min-width: 3.75rem;
|
|
310
|
-
}
|
|
311
|
-
|
|
312
332
|
.-aqrvqh_k-bp {
|
|
313
333
|
--field-height: 2.5rem;
|
|
314
334
|
}
|
|
@@ -333,22 +353,6 @@
|
|
|
333
353
|
--track-to-label: .3125rem;
|
|
334
354
|
}
|
|
335
355
|
|
|
336
|
-
.lbQ {
|
|
337
|
-
width: 16.25rem;
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
.lbO {
|
|
341
|
-
width: 15rem;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
.lbS {
|
|
345
|
-
width: 17.5rem;
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
.lbT {
|
|
349
|
-
width: 18.75rem;
|
|
350
|
-
}
|
|
351
|
-
|
|
352
356
|
._dbf {
|
|
353
357
|
font-size: 1.0625rem;
|
|
354
358
|
}
|
|
@@ -369,6 +373,42 @@
|
|
|
369
373
|
font-size: 1.375rem;
|
|
370
374
|
}
|
|
371
375
|
|
|
376
|
+
.qbp {
|
|
377
|
+
min-width: 2.5rem;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.qbj {
|
|
381
|
+
min-width: 1.5625rem;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.qbl {
|
|
385
|
+
min-width: 1.875rem;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.qbs {
|
|
389
|
+
min-width: 3.125rem;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.qbw {
|
|
393
|
+
min-width: 3.75rem;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.-usygro_l-bQ {
|
|
397
|
+
--defaultWidth: 16.25rem;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.-usygro_l-bO {
|
|
401
|
+
--defaultWidth: 15rem;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.-usygro_l-bS {
|
|
405
|
+
--defaultWidth: 17.5rem;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.-usygro_l-bT {
|
|
409
|
+
--defaultWidth: 18.75rem;
|
|
410
|
+
}
|
|
411
|
+
|
|
372
412
|
.kbc {
|
|
373
413
|
height: .3125rem;
|
|
374
414
|
}
|
|
@@ -451,6 +491,14 @@
|
|
|
451
491
|
}
|
|
452
492
|
}
|
|
453
493
|
|
|
494
|
+
@layer _.b.-_1s8glxu {
|
|
495
|
+
@supports (contain-intrinsic-width: 1px) {
|
|
496
|
+
.__m-1s8glxue {
|
|
497
|
+
contain: inline-size;
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
|
|
454
502
|
.\.:not(#a#b) {
|
|
455
503
|
all: revert-layer;
|
|
456
504
|
}
|
package/dist/Meter.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACgDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;
|
|
1
|
+
{"mappings":"ACgDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAII;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBH;EAII;;;;EAAA;;;;;AAJJ;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAII;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AALA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaD;;;;;;AAbC;EAAA;IAAA;;;;;;AAaD","sources":["9248845643c61064","packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["@import \"a82baabbcb8c2181\";\n@import \"387ba29f17cbbc9f\";\n@import \"ae93cf6195cc0b20\";\n@import \"c4a3f6bd0d23c6e6\";\n","/*\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 {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n */\n variant?: 'informative' | 'positive' | 'notice' | 'negative',\n /**\n * The size of the Meter.\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'\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: size(6),\n size: {\n S: 4, // progress-bar-thickness-small\n M: size(6), // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: size(10) // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'informative',\n variant: {\n positive: 'positive',\n notice: 'notice',\n negative: 'negative'\n },\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n ...groupProps\n } = props;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition: 'top'\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition=\"top\" staticColor={staticColor}>{label}</FieldLabel>}\n {label && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n <div className={trackStyles({staticColor, size})}>\n <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </>\n )}\n </AriaMeter>\n );\n}\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.css.map"}
|
package/dist/Meter.mjs
CHANGED
|
@@ -30,12 +30,10 @@ const $bb56943300b294c6$var$wrapper = function anonymous(props, overrides) {
|
|
|
30
30
|
let $U = false;
|
|
31
31
|
let $q = false;
|
|
32
32
|
let $r = false;
|
|
33
|
-
let $l = false;
|
|
34
33
|
for (let p of matches){
|
|
35
34
|
if (/^\s*U/.test(p)) $U = true;
|
|
36
35
|
if (/^\s*q/.test(p)) $q = true;
|
|
37
36
|
if (/^\s*r/.test(p)) $r = true;
|
|
38
|
-
if (/^\s*l/.test(p)) $l = true;
|
|
39
37
|
}
|
|
40
38
|
if (!$U) rules += ' Uc';
|
|
41
39
|
rules += ' _Zf';
|
|
@@ -70,21 +68,6 @@ const $bb56943300b294c6$var$wrapper = function anonymous(props, overrides) {
|
|
|
70
68
|
rules += ' -_1urhtf5_k-b';
|
|
71
69
|
rules += ' -_1inj1bc_i--q18lfg';
|
|
72
70
|
rules += ' jd';
|
|
73
|
-
if (!$l) {
|
|
74
|
-
if (props.size === "XL") {
|
|
75
|
-
rules += ' lbT';
|
|
76
|
-
rules += ' lO';
|
|
77
|
-
} else if (props.size === "L") {
|
|
78
|
-
rules += ' lbS';
|
|
79
|
-
rules += ' lR';
|
|
80
|
-
} else if (props.size === "S") {
|
|
81
|
-
rules += ' lbO';
|
|
82
|
-
rules += ' lN';
|
|
83
|
-
} else {
|
|
84
|
-
rules += ' lbQ';
|
|
85
|
-
rules += ' lP';
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
71
|
return rules;
|
|
89
72
|
};
|
|
90
73
|
const $bb56943300b294c6$var$valueStyles = function anonymous(props) {
|
|
@@ -139,6 +122,38 @@ const $bb56943300b294c6$var$trackStyles = function anonymous(props) {
|
|
|
139
122
|
rules += ' __b-3773ju';
|
|
140
123
|
rules += ' __c-3773ju';
|
|
141
124
|
rules += ' __d-3773ju';
|
|
125
|
+
if (props.size === "XL") {
|
|
126
|
+
rules += ' qbw';
|
|
127
|
+
rules += ' qv';
|
|
128
|
+
} else if (props.size === "L") {
|
|
129
|
+
rules += ' qbs';
|
|
130
|
+
rules += ' qp';
|
|
131
|
+
} else if (props.size === "S") {
|
|
132
|
+
rules += ' qbl';
|
|
133
|
+
rules += ' qk';
|
|
134
|
+
} else if (props.size === "XS") {
|
|
135
|
+
rules += ' qbj';
|
|
136
|
+
rules += ' qi';
|
|
137
|
+
} else {
|
|
138
|
+
rules += ' qbp';
|
|
139
|
+
rules += ' qo';
|
|
140
|
+
}
|
|
141
|
+
if (props.isQuiet) rules += ' __ma';
|
|
142
|
+
else rules += ' __m-1s8glxue';
|
|
143
|
+
if (props.size === "XL") {
|
|
144
|
+
rules += ' -usygro_l-bT';
|
|
145
|
+
rules += ' -usygro_l-O';
|
|
146
|
+
} else if (props.size === "L") {
|
|
147
|
+
rules += ' -usygro_l-bS';
|
|
148
|
+
rules += ' -usygro_l-R';
|
|
149
|
+
} else if (props.size === "S") {
|
|
150
|
+
rules += ' -usygro_l-bO';
|
|
151
|
+
rules += ' -usygro_l-N';
|
|
152
|
+
} else {
|
|
153
|
+
rules += ' -usygro_l-bQ';
|
|
154
|
+
rules += ' -usygro_l-P';
|
|
155
|
+
}
|
|
156
|
+
rules += ' m-rwozxi';
|
|
142
157
|
rules += ' __vb';
|
|
143
158
|
rules += ' __wb';
|
|
144
159
|
rules += ' _vf';
|
package/dist/Meter.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAoCM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAyD;AAEjG,MAAM
|
|
1
|
+
{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAoCM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,eACV,GAAG,YACJ,GAAG;IAEJ,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;YACA,eAAe;QACjB,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAc;wBAAM,aAAa;kCAAc;;oBACnG,uBAAS,gBAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCACjF,gBAAC;wBAAI,WAAW,kCAAY;yCAAC;kCAAa;wBAAI;kCAC5C,cAAA,gBAAC;4BAAI,WAAW,iCAAW;6CAAC;yCAAa;4BAAO;4BAAI,OAAO;gCAAC,OAAO,aAAa;4BAAG;;;;;;AAM/F;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Meter.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 {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n */\n variant?: 'informative' | 'positive' | 'notice' | 'negative',\n /**\n * The size of the Meter.\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'\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: size(6),\n size: {\n S: 4, // progress-bar-thickness-small\n M: size(6), // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: size(10) // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'informative',\n variant: {\n positive: 'positive',\n notice: 'notice',\n negative: 'negative'\n },\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n ...groupProps\n } = props;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition: 'top'\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition=\"top\" staticColor={staticColor}>{label}</FieldLabel>}\n {label && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n <div className={trackStyles({staticColor, size})}>\n <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </>\n )}\n </AriaMeter>\n );\n}\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.mjs.map"}
|
package/dist/ProgressBar.cjs
CHANGED
|
@@ -32,10 +32,7 @@ $parcel$export(module.exports, "ProgressBar", () => $83e59061dd392311$export$c17
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
const $83e59061dd392311$export$e9f3bf65a26ce129 = /*#__PURE__*/ (0, $gIpiX$react.createContext)(null);
|
|
35
|
-
|
|
36
|
-
// var(--spectrum-global-dimension-size-1700) -> 136px
|
|
37
|
-
// var(--spectrum-global-dimension-size-2400) -> 192px
|
|
38
|
-
const $83e59061dd392311$var$indeterminate = "-qe54ge";
|
|
35
|
+
const $83e59061dd392311$var$indeterminate = "-vliq1d";
|
|
39
36
|
const $83e59061dd392311$var$wrapper = function anonymous(props, overrides) {
|
|
40
37
|
let rules = " .";
|
|
41
38
|
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
|
|
@@ -43,19 +40,27 @@ const $83e59061dd392311$var$wrapper = function anonymous(props, overrides) {
|
|
|
43
40
|
let $U = false;
|
|
44
41
|
let $q = false;
|
|
45
42
|
let $r = false;
|
|
46
|
-
let $l = false;
|
|
47
43
|
for (let p of matches){
|
|
48
44
|
if (/^\s*U/.test(p)) $U = true;
|
|
49
45
|
if (/^\s*q/.test(p)) $q = true;
|
|
50
46
|
if (/^\s*r/.test(p)) $r = true;
|
|
51
|
-
if (/^\s*l/.test(p)) $l = true;
|
|
52
47
|
}
|
|
53
48
|
if (!$U) rules += ' Uc';
|
|
54
49
|
rules += ' _Zf';
|
|
55
|
-
if (props.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
else
|
|
50
|
+
if (props.isIndeterminate) {
|
|
51
|
+
if (props.labelPosition === "side") rules += ' __h-jyg4vb';
|
|
52
|
+
else if (props.labelPosition === "top") rules += ' __h-375yi6';
|
|
53
|
+
} else {
|
|
54
|
+
if (props.labelPosition === "side") rules += ' __h-jyg4vb';
|
|
55
|
+
else if (props.labelPosition === "top") rules += ' __h-1egg2pz';
|
|
56
|
+
}
|
|
57
|
+
if (props.isIndeterminate) {
|
|
58
|
+
if (props.labelPosition === "side") rules += ' __j-1uh5wa';
|
|
59
|
+
else if (props.labelPosition === "top") rules += ' __j-h9yogq';
|
|
60
|
+
} else {
|
|
61
|
+
if (props.labelPosition === "side") rules += ' __j-7y9rdj';
|
|
62
|
+
else if (props.labelPosition === "top") rules += ' __j-6w8ip8';
|
|
63
|
+
}
|
|
59
64
|
rules += ' _1d';
|
|
60
65
|
rules += ' __Fa';
|
|
61
66
|
if (!$q) {
|
|
@@ -83,10 +88,6 @@ const $83e59061dd392311$var$wrapper = function anonymous(props, overrides) {
|
|
|
83
88
|
rules += ' -_1urhtf5_k-b';
|
|
84
89
|
rules += ' -_1inj1bc_i--q18lfg';
|
|
85
90
|
rules += ' jd';
|
|
86
|
-
if (!$l) {
|
|
87
|
-
rules += ' lbO';
|
|
88
|
-
rules += ' lN';
|
|
89
|
-
}
|
|
90
91
|
return rules;
|
|
91
92
|
};
|
|
92
93
|
const $83e59061dd392311$var$valueStyles = function anonymous(props) {
|
|
@@ -141,6 +142,38 @@ const $83e59061dd392311$var$trackStyles = function anonymous(props) {
|
|
|
141
142
|
rules += ' __b-3773ju';
|
|
142
143
|
rules += ' __c-3773ju';
|
|
143
144
|
rules += ' __d-3773ju';
|
|
145
|
+
if (props.size === "XL") {
|
|
146
|
+
rules += ' qbw';
|
|
147
|
+
rules += ' qv';
|
|
148
|
+
} else if (props.size === "L") {
|
|
149
|
+
rules += ' qbs';
|
|
150
|
+
rules += ' qp';
|
|
151
|
+
} else if (props.size === "S") {
|
|
152
|
+
rules += ' qbl';
|
|
153
|
+
rules += ' qk';
|
|
154
|
+
} else if (props.size === "XS") {
|
|
155
|
+
rules += ' qbj';
|
|
156
|
+
rules += ' qi';
|
|
157
|
+
} else {
|
|
158
|
+
rules += ' qbp';
|
|
159
|
+
rules += ' qo';
|
|
160
|
+
}
|
|
161
|
+
if (props.isQuiet) rules += ' __ma';
|
|
162
|
+
else rules += ' __m-1s8glxue';
|
|
163
|
+
if (props.size === "XL") {
|
|
164
|
+
rules += ' -usygro_l-bT';
|
|
165
|
+
rules += ' -usygro_l-O';
|
|
166
|
+
} else if (props.size === "L") {
|
|
167
|
+
rules += ' -usygro_l-bS';
|
|
168
|
+
rules += ' -usygro_l-R';
|
|
169
|
+
} else if (props.size === "S") {
|
|
170
|
+
rules += ' -usygro_l-bO';
|
|
171
|
+
rules += ' -usygro_l-N';
|
|
172
|
+
} else {
|
|
173
|
+
rules += ' -usygro_l-bQ';
|
|
174
|
+
rules += ' -usygro_l-P';
|
|
175
|
+
}
|
|
176
|
+
rules += ' m-rwozxi';
|
|
144
177
|
rules += ' __vb';
|
|
145
178
|
rules += ' __wb';
|
|
146
179
|
rules += ' _vf';
|
|
@@ -193,12 +226,11 @@ const $83e59061dd392311$var$fill = function anonymous(props) {
|
|
|
193
226
|
else if (props.isHovered) rules += ' b_____F';
|
|
194
227
|
else rules += ' b_____E';
|
|
195
228
|
}
|
|
196
|
-
rules += '
|
|
197
|
-
rules += '
|
|
198
|
-
rules += ' _Ra';
|
|
229
|
+
if (props.isIndeterminate) rules += ' l2';
|
|
230
|
+
if (props.isIndeterminate) rules += ' __Gh';
|
|
199
231
|
return rules;
|
|
200
232
|
};
|
|
201
|
-
const $83e59061dd392311$var$indeterminateAnimation = " . _S-
|
|
233
|
+
const $83e59061dd392311$var$indeterminateAnimation = " . _S-1aanztv _T-yjb9nq _Ya _X-twzmrf __Pd Uc";
|
|
202
234
|
function $83e59061dd392311$var$ProgressBar(props, ref) {
|
|
203
235
|
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $83e59061dd392311$export$e9f3bf65a26ce129);
|
|
204
236
|
let { label: label, size: size = 'M', staticColor: staticColor, isIndeterminate: isIndeterminate, labelPosition: labelPosition = 'top', UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
|
|
@@ -221,7 +253,7 @@ function $83e59061dd392311$var$ProgressBar(props, ref) {
|
|
|
221
253
|
staticColor: staticColor,
|
|
222
254
|
children: label
|
|
223
255
|
}),
|
|
224
|
-
label && /*#__PURE__*/ (0, $gIpiX$reactjsxruntime.jsx)("span", {
|
|
256
|
+
label && !isIndeterminate && /*#__PURE__*/ (0, $gIpiX$reactjsxruntime.jsx)("span", {
|
|
225
257
|
className: $83e59061dd392311$var$valueStyles({
|
|
226
258
|
size: size,
|
|
227
259
|
labelAlign: 'end',
|
|
@@ -239,7 +271,7 @@ function $83e59061dd392311$var$ProgressBar(props, ref) {
|
|
|
239
271
|
staticColor: staticColor
|
|
240
272
|
}), isIndeterminate ? $83e59061dd392311$var$indeterminateAnimation : null),
|
|
241
273
|
style: {
|
|
242
|
-
width: isIndeterminate ?
|
|
274
|
+
width: isIndeterminate ? undefined : percentage + '%'
|
|
243
275
|
}
|
|
244
276
|
})
|
|
245
277
|
})
|
package/dist/ProgressBar.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA8CM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAE7G,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA8CM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAE7G,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM;AASN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SACF,KAAK,QAAE,OAAO,kBACd,WAAW,mBACX,eAAe,iBACf,gBAAgB,qBAChB,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,qBACE,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;QAAa,GAAG,MAAM,MAAM;kBAClF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,SAAS,CAAC,iCAAmB,gCAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCACrG,gCAAC;wBAAI,WAAW,kCAAY;4BAAC,GAAG,KAAK;wBAAA;kCACnC,cAAA,gCAAC;4BACC,WAAW,CAAA,GAAA,qCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;6CAAE;4BAAW,IAAK,kBAAkB,+CAAyB;4BAClG,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAM3E;AAEA;;;CAGC,GACD,MAAM,4CAAe,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ProgressBar.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 {\n ProgressBar as AriaProgressBar,\n ProgressBarProps as AriaProgressBarProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n /**\n * The size of the ProgressBar.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean,\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminate = keyframes(`\n 0% {\n transform: translateX(-70%) scaleX(0.7);\n }\n 100% {\n transform: translateX(100%) scaleX(0.7);\n }\n`);\n\nconst wrapper = style({\n ...bar(),\n gridTemplateColumns: {\n default: {\n labelPosition: {\n top: ['1fr', 'auto'],\n side: ['auto', '1fr']\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: ['1fr'],\n side: ['auto', '1fr']\n }\n }\n },\n gridTemplateAreas: {\n default: {\n labelPosition: {\n top: [\n 'label value',\n 'bar bar'\n ],\n side: [\n 'label bar value'\n ]\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: [\n 'label',\n 'bar'\n ],\n side: [\n 'label bar'\n ]\n }\n }\n }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: size(6),\n size: {\n S: 4, // progress-bar-thickness-small\n M: size(6), // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: size(10) // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'accent',\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n },\n width: {\n isIndeterminate: 'full'\n },\n transformOrigin: {\n isIndeterminate: 'left'\n }\n});\n\nconst indeterminateAnimation = style({\n animation: indeterminate,\n animationDuration: 1000,\n animationIterationCount: 'infinite',\n animationTimingFunction: 'in-out',\n willChange: 'transform',\n position: 'relative'\n});\n\nfunction ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n let {\n label, size = 'M',\n staticColor,\n isIndeterminate,\n labelPosition = 'top',\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n return (\n <AriaProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n <div className={trackStyles({...props})}>\n <div\n className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation : null))}\n style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n </div>\n </>\n )}\n </AriaProgressBar>\n );\n}\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nconst _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);\nexport {_ProgressBar as ProgressBar};\n\n"],"names":[],"version":3,"file":"ProgressBar.cjs.map"}
|