@astryxdesign/core 0.3.0-canary.6afcfb7 → 0.3.0-canary.b8cfd19
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/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +12 -8
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +8 -12
- package/dist/ProgressBar/ProgressBar.d.ts +11 -4
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +96 -6
- package/dist/astryx.css +4 -3
- package/dist/astryx.umd.js +37 -37
- package/dist/astryx.umd.js.map +3 -3
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +0 -13
- package/package.json +2 -2
- package/src/Avatar/Avatar.doc.mjs +1 -12
- package/src/Avatar/Avatar.test.tsx +23 -8
- package/src/Avatar/Avatar.tsx +27 -20
- package/src/Pagination/Pagination.test.tsx +15 -0
- package/src/Pagination/Pagination.tsx +10 -6
- package/src/ProgressBar/ProgressBar.doc.mjs +11 -5
- package/src/ProgressBar/ProgressBar.test.tsx +183 -0
- package/src/ProgressBar/ProgressBar.tsx +113 -16
- package/src/theme/derivedVarRegistry.test.ts +0 -1
- package/src/theme/derivedVarRegistry.ts +0 -6
- package/src/theme/generateThemeRules.test.ts +20 -20
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAoC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AA4BrD;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAsJD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAwDD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAoC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AA4BrD;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAsJD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAwDD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BA2Pb;yBA9Qe,MAAM"}
|
package/dist/Avatar/Avatar.js
CHANGED
|
@@ -119,10 +119,10 @@ const styles = {
|
|
|
119
119
|
kjj79g: "xl56j7k",
|
|
120
120
|
kzqmXN: "xh8yej3",
|
|
121
121
|
kZKoxP: "x5yr21d",
|
|
122
|
-
kWkggS: "
|
|
123
|
-
kMwMTN: "
|
|
122
|
+
kWkggS: "x17x4s8c",
|
|
123
|
+
kMwMTN: "xv1l7n4",
|
|
124
124
|
kMv6JI: "x9ynric",
|
|
125
|
-
k63SB2: "
|
|
125
|
+
k63SB2: "x1e4wzip",
|
|
126
126
|
kP9fke: "xtvhhri",
|
|
127
127
|
$$css: true
|
|
128
128
|
},
|
|
@@ -178,7 +178,7 @@ const dynamicStyles = {
|
|
|
178
178
|
"--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size)
|
|
179
179
|
}],
|
|
180
180
|
fontSize: size => [_temp, {
|
|
181
|
-
"--x-fontSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(
|
|
181
|
+
"--x-fontSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`${size * INITIALS_FONT_SIZE_RATIO}px`)
|
|
182
182
|
}],
|
|
183
183
|
statusPosition: size => [_temp2, {
|
|
184
184
|
"--x-bottom": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size * CIRCLE_EDGE_OFFSET_RATIO),
|
|
@@ -402,12 +402,16 @@ export function Avatar({
|
|
|
402
402
|
className: "xh8yej3 x5yr21d xl1xv1r"
|
|
403
403
|
}
|
|
404
404
|
}), showInitials && /*#__PURE__*/_jsx("div", {
|
|
405
|
-
...
|
|
405
|
+
...mergeProps(themeProps('avatar-fallback', {
|
|
406
|
+
size: resolvedSize
|
|
407
|
+
}), stylex.props(styles.fallback, dynamicStyles.fontSize(numericSize))),
|
|
406
408
|
children: getInitials(name)
|
|
407
409
|
}), showIcon && /*#__PURE__*/_jsx("div", {
|
|
408
|
-
...{
|
|
409
|
-
|
|
410
|
-
},
|
|
410
|
+
...mergeProps(themeProps('avatar-fallback', {
|
|
411
|
+
size: resolvedSize
|
|
412
|
+
}), {
|
|
413
|
+
className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d x17x4s8c xv1l7n4 x9ynric x1e4wzip xtvhhri"
|
|
414
|
+
}),
|
|
411
415
|
children: /*#__PURE__*/_jsx(DefaultIcon, {
|
|
412
416
|
size: numericSize
|
|
413
417
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,SAAS,CAAC;AAMlD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,oBAAoB,CAAC;AAE3D,uCAAuC;AACvC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGtD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG9C;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAGtB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuHD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CA6CpB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,QAAQ,EAAE,YAAiB,EAC3B,eAAe,EACf,gBAAgB,EAChB,OAAiB,EACjB,SAAS,EACT,YAAmB,EACnB,IAAI,EAAE,QAAY,EAClB,YAAgB,EAChB,IAAW,EACX,UAAkB,EAClB,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,SAAS,CAAC;AAMlD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,oBAAoB,CAAC;AAE3D,uCAAuC;AACvC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGtD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG9C;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAGtB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuHD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CA6CpB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,QAAQ,EAAE,YAAiB,EAC3B,eAAe,EACf,gBAAgB,EAChB,OAAiB,EACjB,SAAS,EACT,YAAmB,EACnB,IAAI,EAAE,QAAY,EAClB,YAAgB,EAChB,IAAW,EACX,UAAkB,EAClB,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,sCA4ejB;yBApgBe,UAAU"}
|
|
@@ -602,12 +602,10 @@ export function Pagination({
|
|
|
602
602
|
tooltip: isDisabled || !hasPrevious ? undefined : previousLabel,
|
|
603
603
|
variant: "ghost",
|
|
604
604
|
size: buttonSize,
|
|
605
|
-
icon: /*#__PURE__*/_jsx(
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
size: isSm ? 'sm' : 'md'
|
|
610
|
-
})
|
|
605
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
|
606
|
+
icon: "chevronLeft",
|
|
607
|
+
size: isSm ? 'sm' : 'md',
|
|
608
|
+
xstyle: rtlStyles.mirror
|
|
611
609
|
}),
|
|
612
610
|
onClick: handlePrevious,
|
|
613
611
|
isDisabled: isDisabled || !hasPrevious,
|
|
@@ -617,12 +615,10 @@ export function Pagination({
|
|
|
617
615
|
tooltip: isDisabled || !hasNext ? undefined : nextLabel,
|
|
618
616
|
variant: "ghost",
|
|
619
617
|
size: buttonSize,
|
|
620
|
-
icon: /*#__PURE__*/_jsx(
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
size: isSm ? 'sm' : 'md'
|
|
625
|
-
})
|
|
618
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
|
619
|
+
icon: "chevronRight",
|
|
620
|
+
size: isSm ? 'sm' : 'md',
|
|
621
|
+
xstyle: rtlStyles.mirror
|
|
626
622
|
}),
|
|
627
623
|
onClick: handleNext,
|
|
628
624
|
isDisabled: isDisabled || !hasNext,
|
|
@@ -77,8 +77,12 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
|
|
|
77
77
|
/**
|
|
78
78
|
* Target marks drawn on the track at fixed points in the same `0..max`
|
|
79
79
|
* scale as `value` — e.g. a goal line. Marks stay visible whether progress
|
|
80
|
-
* is below or past them
|
|
81
|
-
*
|
|
80
|
+
* is below or past them, and take their color from what they sit on: a mark
|
|
81
|
+
* inside the filled area uses the fill variant's on-color (on-accent,
|
|
82
|
+
* on-warning, on-error, …), while a mark still out on the bare track uses
|
|
83
|
+
* `--color-text-primary` (`--color-text-secondary` on a disabled bar, which
|
|
84
|
+
* dims everything it draws). Each mark's required `label` names it for
|
|
85
|
+
* assistive tech and is revealed via a `Tooltip` on hover/focus. Ignored when
|
|
82
86
|
* `isIndeterminate` is true.
|
|
83
87
|
*/
|
|
84
88
|
marks?: ReadonlyArray<ProgressBarMark>;
|
|
@@ -119,8 +123,11 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
|
|
|
119
123
|
* ```
|
|
120
124
|
*
|
|
121
125
|
* A mark's height, width, and color are directly themeable via the
|
|
122
|
-
* `progressbar-mark` target
|
|
123
|
-
*
|
|
126
|
+
* `progressbar-mark` target. The target reflects `data-placement`
|
|
127
|
+
* (`"fill"` when the mark sits inside the filled area, `"track"` when it is
|
|
128
|
+
* still out on the bare track) and `data-variant` (the fill's variant), so a
|
|
129
|
+
* theme can style the two cases separately — e.g. a taller "goal flag" tick
|
|
130
|
+
* that overhangs the bar (centered, so the overhang is symmetric):
|
|
124
131
|
*
|
|
125
132
|
* @example
|
|
126
133
|
* ```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAUnD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAUnD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA2OD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAmKlB;yBApLe,WAAW"}
|
|
@@ -84,6 +84,16 @@ const styles = {
|
|
|
84
84
|
kyAemX: "x4hg4is",
|
|
85
85
|
ko0y90: "xa4qsjk",
|
|
86
86
|
$$css: true
|
|
87
|
+
},
|
|
88
|
+
mark: {
|
|
89
|
+
kVAEAm: "x10l6tqk",
|
|
90
|
+
k87sOh: "xwa60dl",
|
|
91
|
+
kzqmXN: "xfo62xy",
|
|
92
|
+
kZKoxP: "xdk7pt",
|
|
93
|
+
kI3sdo: "x1a2a7pz x17nn4n9",
|
|
94
|
+
kInvED: "x1wfwxd8 x7s97pk",
|
|
95
|
+
k3aq6I: "x11lhmoz xoffwj3",
|
|
96
|
+
$$css: true
|
|
87
97
|
}
|
|
88
98
|
};
|
|
89
99
|
const variantStyles = {
|
|
@@ -112,6 +122,69 @@ const variantStyles = {
|
|
|
112
122
|
$$css: true
|
|
113
123
|
}
|
|
114
124
|
};
|
|
125
|
+
|
|
126
|
+
// A mark sitting inside the filled area is drawn *on* the bar, so it takes the
|
|
127
|
+
// on-color that pairs with the fill's own variant color — the same pairing
|
|
128
|
+
// Badge uses for solid semantic backgrounds.
|
|
129
|
+
//
|
|
130
|
+
// `neutral` and `disabled` both fill with the muted `--color-text-disabled`
|
|
131
|
+
// gray, which carries no semantic weight and has no dedicated on-token, so
|
|
132
|
+
// they fall back to a plain foreground. They pick different ones: a `neutral`
|
|
133
|
+
// bar is live, so its mark keeps the full-contrast `--color-text-primary` a
|
|
134
|
+
// mark uses out on the track; a `disabled` bar is deliberately low-emphasis —
|
|
135
|
+
// its own label and value text drop to muted colors — so its mark steps down
|
|
136
|
+
// to `--color-text-secondary` rather than becoming the loudest thing on a
|
|
137
|
+
// grayed-out component.
|
|
138
|
+
const markOnFillStyles = {
|
|
139
|
+
accent: {
|
|
140
|
+
kWkggS: "x1azo05",
|
|
141
|
+
$$css: true
|
|
142
|
+
},
|
|
143
|
+
success: {
|
|
144
|
+
kWkggS: "x9mohwv",
|
|
145
|
+
$$css: true
|
|
146
|
+
},
|
|
147
|
+
warning: {
|
|
148
|
+
kWkggS: "xmgwp2l",
|
|
149
|
+
$$css: true
|
|
150
|
+
},
|
|
151
|
+
error: {
|
|
152
|
+
kWkggS: "xfba6wv",
|
|
153
|
+
$$css: true
|
|
154
|
+
},
|
|
155
|
+
neutral: {
|
|
156
|
+
kWkggS: "x19aspcf",
|
|
157
|
+
$$css: true
|
|
158
|
+
},
|
|
159
|
+
disabled: {
|
|
160
|
+
kWkggS: "xdomwnj",
|
|
161
|
+
$$css: true
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
// A mark out on the bare track is a foreground tick over the muted track
|
|
166
|
+
// background, so it takes `--color-text-primary`.
|
|
167
|
+
//
|
|
168
|
+
// The obvious candidate was `--color-border-emphasized` — the emphasized
|
|
169
|
+
// divider color `Divider`'s `strong` variant and `Slider`'s marks use — but
|
|
170
|
+
// divider tokens sit a step or two from the track on the same neutral ramp, so
|
|
171
|
+
// a mark drawn in one is at or near invisible: measured against each shipped
|
|
172
|
+
// theme's track it lands between 1.00:1 (theme-neutral, both modes, where the
|
|
173
|
+
// track is aliased to that very token) and 2.9:1, under the 3:1 WCAG 1.4.11
|
|
174
|
+
// non-text floor in 7 of 8 themes. `--color-text-secondary` still misses in
|
|
175
|
+
// two. `--color-text-primary` is the one foreground guaranteed to read against
|
|
176
|
+
// every surface a theme defines: 5.8:1 to 15.7:1 on the track across all
|
|
177
|
+
// themes and both modes.
|
|
178
|
+
const markOnTrackStyles = {
|
|
179
|
+
track: {
|
|
180
|
+
kWkggS: "x19aspcf",
|
|
181
|
+
$$css: true
|
|
182
|
+
},
|
|
183
|
+
trackDisabled: {
|
|
184
|
+
kWkggS: "xdomwnj",
|
|
185
|
+
$$css: true
|
|
186
|
+
}
|
|
187
|
+
};
|
|
115
188
|
function defaultFormatValueLabel(value, max) {
|
|
116
189
|
const pct = max > 0 ? Math.round(value / max * 100) : 0;
|
|
117
190
|
return `${pct}%`;
|
|
@@ -143,8 +216,11 @@ function defaultFormatValueLabel(value, max) {
|
|
|
143
216
|
* ```
|
|
144
217
|
*
|
|
145
218
|
* A mark's height, width, and color are directly themeable via the
|
|
146
|
-
* `progressbar-mark` target
|
|
147
|
-
*
|
|
219
|
+
* `progressbar-mark` target. The target reflects `data-placement`
|
|
220
|
+
* (`"fill"` when the mark sits inside the filled area, `"track"` when it is
|
|
221
|
+
* still out on the bare track) and `data-variant` (the fill's variant), so a
|
|
222
|
+
* theme can style the two cases separately — e.g. a taller "goal flag" tick
|
|
223
|
+
* that overhangs the bar (centered, so the overhang is symmetric):
|
|
148
224
|
*
|
|
149
225
|
* @example
|
|
150
226
|
* ```
|
|
@@ -190,13 +266,21 @@ export function ProgressBar({
|
|
|
190
266
|
// Marks make no sense without a determinate value, so they are only drawn
|
|
191
267
|
// in determinate mode. Non-finite mark values are dropped; the rest are
|
|
192
268
|
// clamped to the track edges, matching the bar's own `clampedValue`.
|
|
269
|
+
//
|
|
270
|
+
// Each mark also records whether it lands on the filled part of the bar
|
|
271
|
+
// (`isOnFill`), which decides its color: a mark inside the fill reads against
|
|
272
|
+
// the variant color, one out on the bare track reads against the track. A
|
|
273
|
+
// mark exactly at the fill's leading edge counts as on the fill — it is the
|
|
274
|
+
// "reached the target" moment — except at zero progress, where there is no
|
|
275
|
+
// fill for it to sit on.
|
|
193
276
|
const resolvedMarks = !isIndeterminate && marks ? marks.filter(mark => Number.isFinite(mark.value)).map(mark => {
|
|
194
277
|
const clamped = Math.min(Math.max(0, mark.value), safeMax);
|
|
195
278
|
const pct = safeMax > 0 ? clamped / safeMax * 100 : 0;
|
|
196
279
|
return {
|
|
197
280
|
value: mark.value,
|
|
198
281
|
label: mark.label,
|
|
199
|
-
pct
|
|
282
|
+
pct,
|
|
283
|
+
isOnFill: percentage > 0 && pct <= percentage
|
|
200
284
|
};
|
|
201
285
|
}) : [];
|
|
202
286
|
return /*#__PURE__*/_jsxs("div", {
|
|
@@ -272,11 +356,17 @@ export function ProgressBar({
|
|
|
272
356
|
// fallback shown while the lazy Tooltip chunk loads, so the tick is
|
|
273
357
|
// always visible and the label attaches once ready. The list `key`
|
|
274
358
|
// lives on the mapped <Suspense>, not here.
|
|
359
|
+
//
|
|
360
|
+
// `placement` is reflected as `data-placement` (and a class) so a
|
|
361
|
+
// theme can style the two cases separately on the
|
|
362
|
+
// `progressbar-mark` target; `variant` mirrors the fill's variant
|
|
363
|
+
// for the same reason.
|
|
275
364
|
const markEl = /*#__PURE__*/_jsx("span", {
|
|
276
365
|
tabIndex: 0,
|
|
277
|
-
...mergeProps(themeProps('progressbar-mark'
|
|
278
|
-
|
|
279
|
-
|
|
366
|
+
...mergeProps(themeProps('progressbar-mark', {
|
|
367
|
+
variant: fillVariant,
|
|
368
|
+
placement: mark.isOnFill ? 'fill' : 'track'
|
|
369
|
+
}), stylex.props(styles.mark, mark.isOnFill ? markOnFillStyles[fillVariant] : isDisabled ? markOnTrackStyles.trackDisabled : markOnTrackStyles.track)),
|
|
280
370
|
style: {
|
|
281
371
|
insetInlineStart: `${mark.pct}%`
|
|
282
372
|
}
|
package/dist/astryx.css
CHANGED
|
@@ -548,7 +548,6 @@
|
|
|
548
548
|
.xgcd1z6:not(#\#):not(#\#):not(#\#){background-color:inherit}
|
|
549
549
|
.xcpsgoo:not(#\#):not(#\#):not(#\#){background-color:rgba(0,0,0,.5)}
|
|
550
550
|
.xjbqb8w:not(#\#):not(#\#):not(#\#){background-color:transparent}
|
|
551
|
-
.xelv01g:not(#\#):not(#\#):not(#\#){background-color:var(--_avatar-fallback-background,var(--color-neutral))}
|
|
552
551
|
.xgcxg3y:not(#\#):not(#\#):not(#\#){background-color:var(--color-accent-muted)}
|
|
553
552
|
.x1ewilqj:not(#\#):not(#\#):not(#\#){background-color:var(--color-accent)}
|
|
554
553
|
.x1o0wnni:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-blue)}
|
|
@@ -576,6 +575,9 @@
|
|
|
576
575
|
.x1q5y3ey:not(#\#):not(#\#):not(#\#){background-color:var(--color-icon-secondary)}
|
|
577
576
|
.x17x4s8c:not(#\#):not(#\#):not(#\#){background-color:var(--color-neutral)}
|
|
578
577
|
.x1azo05:not(#\#):not(#\#):not(#\#){background-color:var(--color-on-accent)}
|
|
578
|
+
.xfba6wv:not(#\#):not(#\#):not(#\#){background-color:var(--color-on-error)}
|
|
579
|
+
.x9mohwv:not(#\#):not(#\#):not(#\#){background-color:var(--color-on-success)}
|
|
580
|
+
.xmgwp2l:not(#\#):not(#\#):not(#\#){background-color:var(--color-on-warning)}
|
|
579
581
|
.x1lmrjuc:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}
|
|
580
582
|
.xi89dp7:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}
|
|
581
583
|
.x1u4601x:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay)}
|
|
@@ -585,6 +587,7 @@
|
|
|
585
587
|
.xzyc27v:not(#\#):not(#\#):not(#\#){background-color:var(--color-syntax-background)}
|
|
586
588
|
.x16fr6go:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-disabled)}
|
|
587
589
|
.x19aspcf:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-primary)}
|
|
590
|
+
.xdomwnj:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-secondary)}
|
|
588
591
|
.xdsb6cv:not(#\#):not(#\#):not(#\#){background-color:var(--color-track)}
|
|
589
592
|
.x24i8r5:not(#\#):not(#\#):not(#\#){background-color:var(--color-warning-muted)}
|
|
590
593
|
.x1q8g9m5:not(#\#):not(#\#):not(#\#){background-color:var(--color-warning)}
|
|
@@ -651,7 +654,6 @@
|
|
|
651
654
|
.xj8ax7g:not(#\#):not(#\#):not(#\#){color:#FF0000}
|
|
652
655
|
.x1heor9g:not(#\#):not(#\#):not(#\#){color:inherit}
|
|
653
656
|
.x19co3pv:not(#\#):not(#\#):not(#\#){color:transparent}
|
|
654
|
-
.xicfil:not(#\#):not(#\#):not(#\#){color:var(--_avatar-fallback-color,var(--color-text-secondary))}
|
|
655
657
|
.xqwr325:not(#\#):not(#\#):not(#\#){color:var(--color-accent)}
|
|
656
658
|
.xrkvqaz:not(#\#):not(#\#):not(#\#){color:var(--color-background-surface)}
|
|
657
659
|
.xjt36v0:not(#\#):not(#\#):not(#\#){color:var(--color-error)}
|
|
@@ -794,7 +796,6 @@
|
|
|
794
796
|
.xk50ysn:not(#\#):not(#\#):not(#\#){font-weight:500}
|
|
795
797
|
.x1s688f:not(#\#):not(#\#):not(#\#){font-weight:600}
|
|
796
798
|
.x1pd3egz:not(#\#):not(#\#):not(#\#){font-weight:inherit}
|
|
797
|
-
.xi08x9w:not(#\#):not(#\#):not(#\#){font-weight:var(--_avatar-fallback-font-weight,var(--font-weight-medium))}
|
|
798
799
|
.x1lvx875:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-bold)}
|
|
799
800
|
.x1e4wzip:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-medium)}
|
|
800
801
|
.x1sodnla:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-normal)}
|