@react-spectrum/s2 0.3.1 → 0.3.2-nightly.5030
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/AvatarGroup.cjs.map +1 -1
- package/dist/AvatarGroup.css.map +1 -1
- package/dist/AvatarGroup.mjs.map +1 -1
- package/dist/Badge.cjs +103 -53
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +140 -0
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +103 -53
- package/dist/Badge.mjs.map +1 -1
- package/dist/Meter.cjs +26 -22
- package/dist/Meter.cjs.map +1 -1
- package/dist/Meter.css +59 -47
- package/dist/Meter.css.map +1 -1
- package/dist/Meter.mjs +26 -22
- package/dist/Meter.mjs.map +1 -1
- package/dist/ProgressBar.cjs +31 -23
- package/dist/ProgressBar.cjs.map +1 -1
- package/dist/ProgressBar.css +63 -51
- package/dist/ProgressBar.css.map +1 -1
- package/dist/ProgressBar.mjs +31 -23
- package/dist/ProgressBar.mjs.map +1 -1
- package/dist/Tabs.cjs +2 -2
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +2 -2
- package/dist/Tabs.mjs.map +1 -1
- package/dist/types.d.ts +16 -4
- package/dist/types.d.ts.map +1 -1
- package/package.json +14 -14
- package/src/AvatarGroup.tsx +2 -2
- package/src/Badge.tsx +101 -37
- package/src/Meter.tsx +3 -2
- package/src/ProgressBar.tsx +22 -6
- package/src/Tabs.tsx +6 -5
- package/src/bar-utils.ts +33 -8
package/dist/Badge.mjs
CHANGED
|
@@ -61,12 +61,16 @@ const $6357025487dea614$var$badge = function anonymous(props, overrides) {
|
|
|
61
61
|
rules += ' _eb';
|
|
62
62
|
rules += ' _f-1x99dlob';
|
|
63
63
|
rules += ' _fa';
|
|
64
|
-
if (props.
|
|
65
|
-
else if (props.
|
|
66
|
-
else if (props.
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
if (props.fillStyle === "outline") rules += ' ap';
|
|
65
|
+
else if (props.fillStyle === "subtle") rules += ' ap';
|
|
66
|
+
else if (props.fillStyle === "bold") {
|
|
67
|
+
if (props.variant === "celery") rules += ' ab';
|
|
68
|
+
else if (props.variant === "charteuse") rules += ' ab';
|
|
69
|
+
else if (props.variant === "yellow") rules += ' ab';
|
|
70
|
+
else if (props.variant === "orange") rules += ' ab';
|
|
71
|
+
else if (props.variant === "notice") rules += ' ab';
|
|
72
|
+
else rules += ' ac';
|
|
73
|
+
}
|
|
70
74
|
rules += ' _2d';
|
|
71
75
|
rules += ' _1c';
|
|
72
76
|
rules += ' _vh';
|
|
@@ -84,52 +88,95 @@ const $6357025487dea614$var$badge = function anonymous(props, overrides) {
|
|
|
84
88
|
rules += ' -oelgqu_A--177861o';
|
|
85
89
|
rules += ' jbG';
|
|
86
90
|
rules += ' jF';
|
|
87
|
-
if (props.
|
|
88
|
-
else if (props.
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
if (props.
|
|
108
|
-
else if (props.
|
|
109
|
-
else if (props.
|
|
110
|
-
else rules += '
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
if (props.
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
else rules += '
|
|
117
|
-
|
|
118
|
-
if (props.
|
|
119
|
-
else if (props.
|
|
120
|
-
else if (props.
|
|
121
|
-
else rules += '
|
|
122
|
-
|
|
123
|
-
if (props.
|
|
124
|
-
else if (props.
|
|
125
|
-
else if (props.
|
|
126
|
-
else rules += '
|
|
127
|
-
|
|
128
|
-
if (props.
|
|
129
|
-
else if (props.
|
|
130
|
-
else if (props.
|
|
131
|
-
else rules += '
|
|
91
|
+
if (props.fillStyle === "outline") rules += ' bd';
|
|
92
|
+
else if (props.fillStyle === "subtle") {
|
|
93
|
+
if (props.variant === "silver") rules += ' b____z';
|
|
94
|
+
else if (props.variant === "cinnamon") rules += ' b____P';
|
|
95
|
+
else if (props.variant === "brown") rules += ' b____j';
|
|
96
|
+
else if (props.variant === "turquoise") rules += ' b___3';
|
|
97
|
+
else if (props.variant === "pink") rules += ' b___N';
|
|
98
|
+
else if (props.variant === "magenta") rules += ' b___x';
|
|
99
|
+
else if (props.variant === "fuchsia") rules += ' b___h';
|
|
100
|
+
else if (props.variant === "purple") rules += ' b__1';
|
|
101
|
+
else if (props.variant === "indigo") rules += ' b__L';
|
|
102
|
+
else if (props.variant === "blue") rules += ' br';
|
|
103
|
+
else if (props.variant === "cyan") rules += ' b__v';
|
|
104
|
+
else if (props.variant === "seafoam") rules += ' b__f';
|
|
105
|
+
else if (props.variant === "green") rules += ' b_Z';
|
|
106
|
+
else if (props.variant === "celery") rules += ' b_J';
|
|
107
|
+
else if (props.variant === "charteuse") rules += ' b_t';
|
|
108
|
+
else if (props.variant === "yellow") rules += ' b_d';
|
|
109
|
+
else if (props.variant === "orange") rules += ' bX';
|
|
110
|
+
else if (props.variant === "red") rules += ' bH';
|
|
111
|
+
else if (props.variant === "gray") rules += ' bg';
|
|
112
|
+
else if (props.variant === "negative") rules += ' bH';
|
|
113
|
+
else if (props.variant === "notice") rules += ' bX';
|
|
114
|
+
else if (props.variant === "positive") rules += ' b_Z';
|
|
115
|
+
else if (props.variant === "neutral") rules += ' bg';
|
|
116
|
+
else if (props.variant === "informative") rules += ' br';
|
|
117
|
+
else if (props.variant === "accent") rules += ' br';
|
|
118
|
+
} else if (props.fillStyle === "bold") {
|
|
119
|
+
if (props.variant === "silver") rules += ' b_____0';
|
|
120
|
+
else if (props.variant === "cinnamon") rules += ' b_____Y';
|
|
121
|
+
else if (props.variant === "brown") rules += ' b_____Z';
|
|
122
|
+
else if (props.variant === "turquoise") rules += ' b_____X';
|
|
123
|
+
else if (props.variant === "pink") rules += ' b_____W';
|
|
124
|
+
else if (props.variant === "magenta") rules += ' b_____V';
|
|
125
|
+
else if (props.variant === "fuchsia") rules += ' b_____U';
|
|
126
|
+
else if (props.variant === "purple") rules += ' b_____T';
|
|
127
|
+
else if (props.variant === "indigo") rules += ' b_____S';
|
|
128
|
+
else if (props.variant === "blue") rules += ' b_____E';
|
|
129
|
+
else if (props.variant === "cyan") rules += ' b_____R';
|
|
130
|
+
else if (props.variant === "seafoam") rules += ' b_____Q';
|
|
131
|
+
else if (props.variant === "green") rules += ' b_____K';
|
|
132
|
+
else if (props.variant === "celery") rules += ' b_____P';
|
|
133
|
+
else if (props.variant === "charteuse") rules += ' b_____O';
|
|
134
|
+
else if (props.variant === "yellow") rules += ' b_____N';
|
|
135
|
+
else if (props.variant === "orange") rules += ' b_____M';
|
|
136
|
+
else if (props.variant === "red") rules += ' b_____I';
|
|
137
|
+
else if (props.variant === "gray") rules += ' b_____G';
|
|
138
|
+
else if (props.variant === "negative") {
|
|
139
|
+
if (props.isPressed) rules += ' b_____J';
|
|
140
|
+
else if (props.isFocusVisible) rules += ' b_____J';
|
|
141
|
+
else if (props.isHovered) rules += ' b_____J';
|
|
142
|
+
else rules += ' b_____I';
|
|
143
|
+
} else if (props.variant === "notice") rules += ' b_____M';
|
|
144
|
+
else if (props.variant === "positive") {
|
|
145
|
+
if (props.isPressed) rules += ' b_____L';
|
|
146
|
+
else if (props.isFocusVisible) rules += ' b_____L';
|
|
147
|
+
else if (props.isHovered) rules += ' b_____L';
|
|
148
|
+
else rules += ' b_____K';
|
|
149
|
+
} else if (props.variant === "neutral") {
|
|
150
|
+
if (props.isPressed) rules += ' b_____H';
|
|
151
|
+
else if (props.isFocusVisible) rules += ' b_____H';
|
|
152
|
+
else if (props.isHovered) rules += ' b_____H';
|
|
153
|
+
else rules += ' b_____G';
|
|
154
|
+
} else if (props.variant === "informative") {
|
|
155
|
+
if (props.isPressed) rules += ' b_____F';
|
|
156
|
+
else if (props.isFocusVisible) rules += ' b_____F';
|
|
157
|
+
else if (props.isHovered) rules += ' b_____F';
|
|
158
|
+
else rules += ' b_____E';
|
|
159
|
+
} else if (props.variant === "accent") {
|
|
160
|
+
if (props.isPressed) rules += ' b_____F';
|
|
161
|
+
else if (props.isFocusVisible) rules += ' b_____F';
|
|
162
|
+
else if (props.isHovered) rules += ' b_____F';
|
|
163
|
+
else rules += ' b_____E';
|
|
164
|
+
}
|
|
132
165
|
}
|
|
166
|
+
rules += ' wa';
|
|
167
|
+
rules += ' __na';
|
|
168
|
+
rules += ' u-375tp0';
|
|
169
|
+
rules += ' v-375tp1';
|
|
170
|
+
rules += ' sc';
|
|
171
|
+
rules += ' tc';
|
|
172
|
+
if (props.fillStyle === "outline") {
|
|
173
|
+
if (props.variant === "negative") rules += ' cN';
|
|
174
|
+
else if (props.variant === "notice") rules += ' c2';
|
|
175
|
+
else if (props.variant === "positive") rules += ' c_4';
|
|
176
|
+
else if (props.variant === "neutral") rules += ' cm';
|
|
177
|
+
else if (props.variant === "informative") rules += ' cx';
|
|
178
|
+
else if (props.variant === "accent") rules += ' cx';
|
|
179
|
+
} else rules += ' ca';
|
|
133
180
|
rules += ' -rwx0fg_e-b';
|
|
134
181
|
if (props.size === "XL") {
|
|
135
182
|
rules += ' -_375tou_o-bw';
|
|
@@ -147,11 +194,13 @@ const $6357025487dea614$var$badge = function anonymous(props, overrides) {
|
|
|
147
194
|
rules += ' -_375tou_o-bp';
|
|
148
195
|
rules += ' -_375tou_o-o';
|
|
149
196
|
}
|
|
197
|
+
rules += ' -_375tp0_u-c';
|
|
198
|
+
rules += ' -_375tp1_v-c';
|
|
150
199
|
return rules;
|
|
151
200
|
};
|
|
152
201
|
function $6357025487dea614$var$Badge(props, ref) {
|
|
153
202
|
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $6357025487dea614$export$1d4627584e49159a);
|
|
154
|
-
let { children: children, variant: variant = 'neutral', size: size = 'S', ...otherProps } = props; // useProviderProps(props) in v3
|
|
203
|
+
let { children: children, variant: variant = 'neutral', size: size = 'S', fillStyle: fillStyle = 'bold', ...otherProps } = props; // useProviderProps(props) in v3
|
|
155
204
|
let domRef = (0, $22gMo$useDOMRef)(ref);
|
|
156
205
|
let isTextOnly = (0, $22gMo$react).Children.toArray(props.children).every((c)=>!/*#__PURE__*/ (0, $22gMo$react).isValidElement(c));
|
|
157
206
|
return /*#__PURE__*/ (0, $22gMo$jsx)((0, $22gMo$Provider), {
|
|
@@ -178,7 +227,8 @@ function $6357025487dea614$var$Badge(props, ref) {
|
|
|
178
227
|
role: "presentation",
|
|
179
228
|
className: (props.UNSAFE_className || '') + $6357025487dea614$var$badge({
|
|
180
229
|
variant: variant,
|
|
181
|
-
size: size
|
|
230
|
+
size: size,
|
|
231
|
+
fillStyle: fillStyle
|
|
182
232
|
}, props.styles),
|
|
183
233
|
ref: domRef,
|
|
184
234
|
children: typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, $22gMo$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
|
package/dist/Badge.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAyCM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,iBACV,OAAO,gBACP,YAAY,QACZ,GAAG,YACJ,GAAG,OAAO,gCAAgC;IAC3C,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,YAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,gBAAC,CAAA,GAAA,eAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBAAC,MAAM;gBAA+C;aAAE;YACtE;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;wBAAC,MAAM;wBAAQ,MAAM;oBAAmB;oBAC/D,MAAM;gBACR;aAAE;SACH;kBACD,cAAA,gBAAC;YACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;YAC9B,MAAK;YACL,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;yBAAC;sBAAS;2BAAM;YAAS,GAAG,MAAM,MAAM;YAC1F,KAAK;sBAEH,OAAO,aAAa,YAAY,2BAC5B,gBAAC,CAAA,GAAA,yCAAG;0BAAG;iBACP;;;AAKd;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Badge.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface BadgeStyleProps {\n /**\n * The size of the badge.\n *\n * @default 'S'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.\n *\n * @default 'neutral'\n */\n variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',\n /**\n * The fill of the badge.\n * @default 'bold'\n */\n fillStyle?: 'bold' | 'subtle' | 'outline'\n}\n\nexport interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {\n /**\n * The content to display in the badge.\n */\n children: ReactNode\n}\n\nexport const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style<BadgeStyleProps>({\n display: 'flex',\n font: 'control',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 'control',\n minHeight: 'control',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n aspectRatio: {\n ':has([slot=icon]:only-child)': 'square'\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n columnGap: 'text-to-visual',\n color: {\n fillStyle: {\n bold: {\n default: 'white',\n variant: {\n notice: 'black',\n orange: 'black',\n yellow: 'black',\n charteuse: 'black',\n celery: 'black'\n }\n },\n subtle: 'gray-1000',\n outline: 'gray-1000'\n }\n },\n backgroundColor: {\n fillStyle: {\n bold: {\n variant: {\n accent: 'accent',\n informative: 'informative',\n neutral: 'neutral-subdued',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n gray: 'gray',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n charteuse: 'chartreuse',\n celery: 'celery',\n green: 'green',\n seafoam: 'seafoam',\n cyan: 'cyan',\n blue: 'blue',\n indigo: 'indigo',\n purple: 'purple',\n fuchsia: 'fuchsia',\n magenta: 'magenta',\n pink: 'pink',\n turquoise: 'turquoise',\n brown: 'brown',\n cinnamon: 'cinnamon',\n silver: 'silver'\n }\n },\n subtle: {\n variant: {\n accent: 'accent-200',\n informative: 'informative-subtle',\n neutral: 'neutral-subtle',\n positive: 'positive-subtle',\n notice: 'notice-subtle',\n negative: 'negative-subtle',\n gray: 'gray-100',\n red: 'red-200',\n orange: 'orange-200',\n yellow: 'yellow-200',\n charteuse: 'chartreuse-200',\n celery: 'celery-200',\n green: 'green-200',\n seafoam: 'seafoam-200',\n cyan: 'cyan-200',\n blue: 'blue-200',\n indigo: 'indigo-200',\n purple: 'purple-200',\n fuchsia: 'fuchsia-200',\n magenta: 'magenta-200',\n pink: 'pink-200',\n turquoise: 'turquoise-200',\n brown: 'brown-200',\n cinnamon: 'cinnamon-200',\n silver: 'silver-200'\n }\n },\n outline: 'gray-25'\n }\n },\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderColor: {\n default: 'transparent',\n fillStyle: {\n outline: {\n variant: {\n accent: 'accent-800',\n informative: 'informative-800',\n neutral: 'gray-700',\n positive: 'positive-700',\n notice: 'notice-700',\n negative: 'negative-800'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n}, getAllowedOverrides());\n\nfunction Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);\n let {\n children,\n variant = 'neutral',\n size = 'S',\n fillStyle = 'bold',\n ...otherProps\n } = props; // useProviderProps(props) in v3\n let domRef = useDOMRef(ref);\n let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n return (\n <Provider\n values={[\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n <span\n {...filterDOMProps(otherProps)}\n role=\"presentation\"\n className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n ref={domRef}>\n {\n typeof children === 'string' || isTextOnly\n ? <Text>{children}</Text>\n : children\n }\n </span>\n </Provider>\n );\n}\n\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nlet _Badge = forwardRef(Badge);\nexport {_Badge as Badge};\n"],"names":[],"version":3,"file":"Badge.mjs.map"}
|
package/dist/Meter.cjs
CHANGED
|
@@ -46,16 +46,36 @@ const $f53cdf036c04454a$var$wrapper = function anonymous(props, overrides) {
|
|
|
46
46
|
}
|
|
47
47
|
if (!$U) rules += ' Uc';
|
|
48
48
|
rules += ' _Zf';
|
|
49
|
-
rules += ' __h-
|
|
50
|
-
rules += '
|
|
49
|
+
if (props.labelPosition === "side") rules += ' __h-jyg4vb';
|
|
50
|
+
else if (props.labelPosition === "top") rules += ' __h-1egg2pz';
|
|
51
|
+
if (props.labelPosition === "side") rules += ' __j-7y9rdj';
|
|
52
|
+
else if (props.labelPosition === "top") rules += ' __j-6w8ip8';
|
|
53
|
+
rules += ' _1d';
|
|
51
54
|
rules += ' __Fa';
|
|
52
55
|
if (!$q) {
|
|
53
56
|
rules += ' qbw';
|
|
54
57
|
rules += ' qv';
|
|
55
58
|
}
|
|
56
59
|
if (!$r) rules += ' r-3bwcc2';
|
|
57
|
-
|
|
58
|
-
|
|
60
|
+
if (props.size === "XL") {
|
|
61
|
+
rules += ' -aqrvqh_k-bw';
|
|
62
|
+
rules += ' -aqrvqh_k-v';
|
|
63
|
+
} else if (props.size === "L") {
|
|
64
|
+
rules += ' -aqrvqh_k-bs';
|
|
65
|
+
rules += ' -aqrvqh_k-p';
|
|
66
|
+
} else if (props.size === "S") {
|
|
67
|
+
rules += ' -aqrvqh_k-bl';
|
|
68
|
+
rules += ' -aqrvqh_k-k';
|
|
69
|
+
} else if (props.size === "XS") {
|
|
70
|
+
rules += ' -aqrvqh_k-bj';
|
|
71
|
+
rules += ' -aqrvqh_k-i';
|
|
72
|
+
} else {
|
|
73
|
+
rules += ' -aqrvqh_k-bp';
|
|
74
|
+
rules += ' -aqrvqh_k-o';
|
|
75
|
+
}
|
|
76
|
+
rules += ' -_1urhtf5_k-bc';
|
|
77
|
+
rules += ' -_1urhtf5_k-b';
|
|
78
|
+
rules += ' -_1inj1bc_i--q18lfg';
|
|
59
79
|
rules += ' jd';
|
|
60
80
|
if (!$l) {
|
|
61
81
|
if (props.size === "XL") {
|
|
@@ -72,22 +92,6 @@ const $f53cdf036c04454a$var$wrapper = function anonymous(props, overrides) {
|
|
|
72
92
|
rules += ' lP';
|
|
73
93
|
}
|
|
74
94
|
}
|
|
75
|
-
if (props.size === "XL") {
|
|
76
|
-
rules += ' -_375tou_o-bw';
|
|
77
|
-
rules += ' -_375tou_o-v';
|
|
78
|
-
} else if (props.size === "L") {
|
|
79
|
-
rules += ' -_375tou_o-bs';
|
|
80
|
-
rules += ' -_375tou_o-p';
|
|
81
|
-
} else if (props.size === "S") {
|
|
82
|
-
rules += ' -_375tou_o-bl';
|
|
83
|
-
rules += ' -_375tou_o-k';
|
|
84
|
-
} else if (props.size === "XS") {
|
|
85
|
-
rules += ' -_375tou_o-bj';
|
|
86
|
-
rules += ' -_375tou_o-i';
|
|
87
|
-
} else {
|
|
88
|
-
rules += ' -_375tou_o-bp';
|
|
89
|
-
rules += ' -_375tou_o-o';
|
|
90
|
-
}
|
|
91
95
|
return rules;
|
|
92
96
|
};
|
|
93
97
|
const $f53cdf036c04454a$var$valueStyles = function anonymous(props) {
|
|
@@ -144,7 +148,6 @@ const $f53cdf036c04454a$var$trackStyles = function anonymous(props) {
|
|
|
144
148
|
rules += ' __d-3773ju';
|
|
145
149
|
rules += ' __vb';
|
|
146
150
|
rules += ' __wb';
|
|
147
|
-
rules += ' Ab';
|
|
148
151
|
rules += ' _vf';
|
|
149
152
|
rules += ' _wf';
|
|
150
153
|
rules += ' _xf';
|
|
@@ -219,7 +222,8 @@ function $f53cdf036c04454a$var$Meter(props, ref) {
|
|
|
219
222
|
className: UNSAFE_className + $f53cdf036c04454a$var$wrapper({
|
|
220
223
|
size: size,
|
|
221
224
|
variant: variant,
|
|
222
|
-
staticColor: staticColor
|
|
225
|
+
staticColor: staticColor,
|
|
226
|
+
labelPosition: 'top'
|
|
223
227
|
}, styles),
|
|
224
228
|
children: ({ percentage: percentage, valueText: valueText })=>/*#__PURE__*/ (0, $aQdtU$reactjsxruntime.jsxs)((0, $aQdtU$reactjsxruntime.Fragment), {
|
|
225
229
|
children: [
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,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 width: {\n default: 208,\n size: {\n S: 192,\n L: 224,\n XL: 240\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 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
|
@@ -7,15 +7,27 @@
|
|
|
7
7
|
display: grid;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.__h-
|
|
10
|
+
.__h-1egg2pz {
|
|
11
11
|
grid-template-columns: 1fr auto;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
.__h-jyg4vb {
|
|
15
|
+
grid-template-columns: auto 1fr;
|
|
16
|
+
}
|
|
17
|
+
|
|
14
18
|
.__j-6w8ip8 {
|
|
15
19
|
grid-template-areas: "label value"
|
|
16
20
|
"bar bar";
|
|
17
21
|
}
|
|
18
22
|
|
|
23
|
+
.__j-7y9rdj {
|
|
24
|
+
grid-template-areas: "label bar value";
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
._1d {
|
|
28
|
+
align-items: baseline;
|
|
29
|
+
}
|
|
30
|
+
|
|
19
31
|
.__Fa {
|
|
20
32
|
isolation: isolate;
|
|
21
33
|
}
|
|
@@ -28,52 +40,52 @@
|
|
|
28
40
|
max-width: 768px;
|
|
29
41
|
}
|
|
30
42
|
|
|
31
|
-
|
|
32
|
-
|
|
43
|
+
.-aqrvqh_k-o {
|
|
44
|
+
--field-height: 2rem;
|
|
33
45
|
}
|
|
34
46
|
|
|
35
|
-
.-
|
|
36
|
-
--field-
|
|
47
|
+
.-aqrvqh_k-i {
|
|
48
|
+
--field-height: 1.25rem;
|
|
37
49
|
}
|
|
38
50
|
|
|
39
|
-
|
|
40
|
-
|
|
51
|
+
.-aqrvqh_k-k {
|
|
52
|
+
--field-height: 1.5rem;
|
|
41
53
|
}
|
|
42
54
|
|
|
43
|
-
|
|
44
|
-
|
|
55
|
+
.-aqrvqh_k-p {
|
|
56
|
+
--field-height: 2.5rem;
|
|
45
57
|
}
|
|
46
58
|
|
|
47
|
-
|
|
48
|
-
|
|
59
|
+
.-aqrvqh_k-v {
|
|
60
|
+
--field-height: 3rem;
|
|
49
61
|
}
|
|
50
62
|
|
|
51
|
-
|
|
52
|
-
|
|
63
|
+
.-_1urhtf5_k-b {
|
|
64
|
+
--track-to-label: .25rem;
|
|
53
65
|
}
|
|
54
66
|
|
|
55
|
-
|
|
56
|
-
|
|
67
|
+
.-_1inj1bc_i--q18lfg {
|
|
68
|
+
--field-gap: calc((calc(var(--field-height) + var(--track-to-label)) - var(--u, 0px) - var(--v, 0px) - 1lh) / 2);
|
|
57
69
|
}
|
|
58
70
|
|
|
59
|
-
|
|
60
|
-
|
|
71
|
+
.jd {
|
|
72
|
+
column-gap: .75rem;
|
|
61
73
|
}
|
|
62
74
|
|
|
63
|
-
|
|
64
|
-
|
|
75
|
+
.lP {
|
|
76
|
+
width: 13rem;
|
|
65
77
|
}
|
|
66
78
|
|
|
67
|
-
|
|
68
|
-
|
|
79
|
+
.lN {
|
|
80
|
+
width: 12rem;
|
|
69
81
|
}
|
|
70
82
|
|
|
71
|
-
|
|
72
|
-
|
|
83
|
+
.lR {
|
|
84
|
+
width: 14rem;
|
|
73
85
|
}
|
|
74
86
|
|
|
75
|
-
|
|
76
|
-
|
|
87
|
+
.lO {
|
|
88
|
+
width: 15rem;
|
|
77
89
|
}
|
|
78
90
|
|
|
79
91
|
._ca {
|
|
@@ -174,10 +186,6 @@
|
|
|
174
186
|
overflow-y: hidden;
|
|
175
187
|
}
|
|
176
188
|
|
|
177
|
-
.Ab {
|
|
178
|
-
margin-top: .25rem;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
189
|
.bi {
|
|
182
190
|
background-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
|
|
183
191
|
}
|
|
@@ -301,40 +309,44 @@
|
|
|
301
309
|
min-width: 3.75rem;
|
|
302
310
|
}
|
|
303
311
|
|
|
304
|
-
|
|
305
|
-
|
|
312
|
+
.-aqrvqh_k-bp {
|
|
313
|
+
--field-height: 2.5rem;
|
|
306
314
|
}
|
|
307
315
|
|
|
308
|
-
|
|
309
|
-
|
|
316
|
+
.-aqrvqh_k-bj {
|
|
317
|
+
--field-height: 1.5625rem;
|
|
310
318
|
}
|
|
311
319
|
|
|
312
|
-
|
|
313
|
-
|
|
320
|
+
.-aqrvqh_k-bl {
|
|
321
|
+
--field-height: 1.875rem;
|
|
314
322
|
}
|
|
315
323
|
|
|
316
|
-
|
|
317
|
-
|
|
324
|
+
.-aqrvqh_k-bs {
|
|
325
|
+
--field-height: 3.125rem;
|
|
318
326
|
}
|
|
319
327
|
|
|
320
|
-
.-
|
|
321
|
-
--
|
|
328
|
+
.-aqrvqh_k-bw {
|
|
329
|
+
--field-height: 3.75rem;
|
|
322
330
|
}
|
|
323
331
|
|
|
324
|
-
.-
|
|
325
|
-
--
|
|
332
|
+
.-_1urhtf5_k-bc {
|
|
333
|
+
--track-to-label: .3125rem;
|
|
326
334
|
}
|
|
327
335
|
|
|
328
|
-
|
|
329
|
-
|
|
336
|
+
.lbQ {
|
|
337
|
+
width: 16.25rem;
|
|
330
338
|
}
|
|
331
339
|
|
|
332
|
-
|
|
333
|
-
|
|
340
|
+
.lbO {
|
|
341
|
+
width: 15rem;
|
|
334
342
|
}
|
|
335
343
|
|
|
336
|
-
|
|
337
|
-
|
|
344
|
+
.lbS {
|
|
345
|
+
width: 17.5rem;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.lbT {
|
|
349
|
+
width: 18.75rem;
|
|
338
350
|
}
|
|
339
351
|
|
|
340
352
|
._dbf {
|
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;;;;EAYI;;;;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;;;;
|
|
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;;;;EAYI;;;;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;;;;EAaD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9BH;EAYI;;;;EAAA;;;;;AAZJ;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAYI;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AALA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaD;;;;;;AAbC","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 width: {\n default: 208,\n size: {\n S: 192,\n L: 224,\n XL: 240\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 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
|
@@ -39,16 +39,36 @@ const $bb56943300b294c6$var$wrapper = function anonymous(props, overrides) {
|
|
|
39
39
|
}
|
|
40
40
|
if (!$U) rules += ' Uc';
|
|
41
41
|
rules += ' _Zf';
|
|
42
|
-
rules += ' __h-
|
|
43
|
-
rules += '
|
|
42
|
+
if (props.labelPosition === "side") rules += ' __h-jyg4vb';
|
|
43
|
+
else if (props.labelPosition === "top") rules += ' __h-1egg2pz';
|
|
44
|
+
if (props.labelPosition === "side") rules += ' __j-7y9rdj';
|
|
45
|
+
else if (props.labelPosition === "top") rules += ' __j-6w8ip8';
|
|
46
|
+
rules += ' _1d';
|
|
44
47
|
rules += ' __Fa';
|
|
45
48
|
if (!$q) {
|
|
46
49
|
rules += ' qbw';
|
|
47
50
|
rules += ' qv';
|
|
48
51
|
}
|
|
49
52
|
if (!$r) rules += ' r-3bwcc2';
|
|
50
|
-
|
|
51
|
-
|
|
53
|
+
if (props.size === "XL") {
|
|
54
|
+
rules += ' -aqrvqh_k-bw';
|
|
55
|
+
rules += ' -aqrvqh_k-v';
|
|
56
|
+
} else if (props.size === "L") {
|
|
57
|
+
rules += ' -aqrvqh_k-bs';
|
|
58
|
+
rules += ' -aqrvqh_k-p';
|
|
59
|
+
} else if (props.size === "S") {
|
|
60
|
+
rules += ' -aqrvqh_k-bl';
|
|
61
|
+
rules += ' -aqrvqh_k-k';
|
|
62
|
+
} else if (props.size === "XS") {
|
|
63
|
+
rules += ' -aqrvqh_k-bj';
|
|
64
|
+
rules += ' -aqrvqh_k-i';
|
|
65
|
+
} else {
|
|
66
|
+
rules += ' -aqrvqh_k-bp';
|
|
67
|
+
rules += ' -aqrvqh_k-o';
|
|
68
|
+
}
|
|
69
|
+
rules += ' -_1urhtf5_k-bc';
|
|
70
|
+
rules += ' -_1urhtf5_k-b';
|
|
71
|
+
rules += ' -_1inj1bc_i--q18lfg';
|
|
52
72
|
rules += ' jd';
|
|
53
73
|
if (!$l) {
|
|
54
74
|
if (props.size === "XL") {
|
|
@@ -65,22 +85,6 @@ const $bb56943300b294c6$var$wrapper = function anonymous(props, overrides) {
|
|
|
65
85
|
rules += ' lP';
|
|
66
86
|
}
|
|
67
87
|
}
|
|
68
|
-
if (props.size === "XL") {
|
|
69
|
-
rules += ' -_375tou_o-bw';
|
|
70
|
-
rules += ' -_375tou_o-v';
|
|
71
|
-
} else if (props.size === "L") {
|
|
72
|
-
rules += ' -_375tou_o-bs';
|
|
73
|
-
rules += ' -_375tou_o-p';
|
|
74
|
-
} else if (props.size === "S") {
|
|
75
|
-
rules += ' -_375tou_o-bl';
|
|
76
|
-
rules += ' -_375tou_o-k';
|
|
77
|
-
} else if (props.size === "XS") {
|
|
78
|
-
rules += ' -_375tou_o-bj';
|
|
79
|
-
rules += ' -_375tou_o-i';
|
|
80
|
-
} else {
|
|
81
|
-
rules += ' -_375tou_o-bp';
|
|
82
|
-
rules += ' -_375tou_o-o';
|
|
83
|
-
}
|
|
84
88
|
return rules;
|
|
85
89
|
};
|
|
86
90
|
const $bb56943300b294c6$var$valueStyles = function anonymous(props) {
|
|
@@ -137,7 +141,6 @@ const $bb56943300b294c6$var$trackStyles = function anonymous(props) {
|
|
|
137
141
|
rules += ' __d-3773ju';
|
|
138
142
|
rules += ' __vb';
|
|
139
143
|
rules += ' __wb';
|
|
140
|
-
rules += ' Ab';
|
|
141
144
|
rules += ' _vf';
|
|
142
145
|
rules += ' _wf';
|
|
143
146
|
rules += ' _xf';
|
|
@@ -212,7 +215,8 @@ function $bb56943300b294c6$var$Meter(props, ref) {
|
|
|
212
215
|
className: UNSAFE_className + $bb56943300b294c6$var$wrapper({
|
|
213
216
|
size: size,
|
|
214
217
|
variant: variant,
|
|
215
|
-
staticColor: staticColor
|
|
218
|
+
staticColor: staticColor,
|
|
219
|
+
labelPosition: 'top'
|
|
216
220
|
}, styles),
|
|
217
221
|
children: ({ percentage: percentage, valueText: valueText })=>/*#__PURE__*/ (0, $blcZa$jsxs)((0, $blcZa$Fragment), {
|
|
218
222
|
children: [
|