@charcuterie/ui 4.10.0 → 4.10.2
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAKd,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAO3D,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,CACX,GAAG;IACF,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,UAAU,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,WAAW,GAAI,iIAazB,gBAAgB,KAAG,
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAKd,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAO3D,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,CACX,GAAG;IACF,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,UAAU,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,WAAW,GAAI,iIAazB,gBAAgB,KAAG,SA8GrB,CAAA"}
|
|
@@ -40,19 +40,22 @@ export const ProgressBar = ({ className, intent = "accent", isIndeterminate = fa
|
|
|
40
40
|
const percent = toProgressPercent(value, max);
|
|
41
41
|
const clampedValue = toProgressValue(value, max);
|
|
42
42
|
const fillIntent = getProgressIntent(percent, intent, thresholds);
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
43
|
+
// The grid wrapper exists only for an overlay. Without one the
|
|
44
|
+
// track is a direct child again, as it was before `overlay` —
|
|
45
|
+
// apps size `[role="progressbar"]` against its parent, and an
|
|
46
|
+
// always-present wrapper with no height collapsed their fill.
|
|
47
|
+
const track = (_jsx("div", { "aria-busy": isIndeterminate || undefined, "aria-labelledby": labelId, "aria-valuemax": max, "aria-valuemin": 0, "aria-valuenow": isIndeterminate ? undefined : clampedValue, className: toClassName("relative w-full overflow-hidden rounded-full bg-surface-sunken", overlay == null
|
|
48
|
+
? TRACK_SIZE_CLASS[size]
|
|
49
|
+
: "h-full rounded-xl [grid-area:1/1]"), role: "progressbar", children: isIndeterminate ? (_jsx("span", { className: toClassName(
|
|
50
|
+
// The sweep animates `inset-inline-start`, so it runs
|
|
51
|
+
// the other way in RTL for free — and its
|
|
52
|
+
// reduced-motion fallback hatches the whole track
|
|
53
|
+
// rather than parking at one end.
|
|
54
|
+
"charcuterie-sweep absolute inset-y-0 w-2/5 rounded-full", INTENT_SOLID_FILL_CLASS[fillIntent], overlay == null
|
|
55
|
+
? undefined
|
|
56
|
+
: "rounded-none opacity-30") })) : (_jsx("span", { className: toClassName("block h-full rounded-full transition-[inline-size] duration-(--duration-normal) ease-standard", INTENT_SOLID_FILL_CLASS[fillIntent], overlay == null
|
|
57
|
+
? undefined
|
|
58
|
+
: "rounded-none opacity-30"), style: { inlineSize: `${percent}%` } })) }));
|
|
59
|
+
return (_jsxs("div", { ...divProps, className: toClassName("flex flex-col gap-1", className), children: [isLabelVisible || isValueShown ? (_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-sm", children: [isLabelVisible ? (_jsx("span", { className: "text-content-secondary", id: labelId, children: label })) : (_jsx(VisuallyHidden, { id: labelId, children: label })), isValueShown && !isIndeterminate ? (_jsxs("span", { className: "text-content-muted tabular-nums", children: [percent, "%"] })) : null] })) : (_jsx(VisuallyHidden, { id: labelId, children: label })), overlay == null ? (track) : (_jsxs("div", { className: "grid overflow-hidden rounded-xl", children: [track, _jsx("div", { className: "relative min-w-0 [grid-area:1/1]", children: overlay })] }))] }));
|
|
57
60
|
};
|
|
58
61
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAOhD,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAsC,CAAA;AAErE,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,oBAAoB,CAAA;AA6B3B,MAAM,gBAAgB,GAAoC;IACxD,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;CACV,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,SAAS,EACT,MAAM,GAAG,QAAQ,EACjB,eAAe,GAAG,KAAK,EACvB,cAAc,GAAG,KAAK,EACtB,YAAY,GAAG,KAAK,EACpB,KAAK,EACL,GAAG,GAAG,GAAG,EACT,OAAO,EACP,IAAI,GAAG,IAAI,EACX,UAAU,EACV,KAAK,GAAG,CAAC,EACT,GAAG,QAAQ,EACM,EAAa,EAAE;IAChC,MAAM,OAAO,GAAG,WAAW,EAAE,CAAA;IAE7B,MAAM,OAAO,GAAG,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAE7C,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAEhD,MAAM,UAAU,GAAG,iBAAiB,CAClC,OAAO,EACP,MAAM,EACN,UAAU,CACX,CAAA;IAED,
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcuterie/ui",
|
|
3
|
-
"version": "4.10.
|
|
3
|
+
"version": "4.10.2",
|
|
4
4
|
"description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@charcuterie/logic": "2.4.0",
|
|
57
|
-
"@charcuterie/tokens": "1.10.
|
|
57
|
+
"@charcuterie/tokens": "1.10.2",
|
|
58
58
|
"@floating-ui/react": "^0.27.20",
|
|
59
59
|
"@tanstack/react-virtual": "^3.13.12",
|
|
60
60
|
"tailwind-merge": "^3.6.0"
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
}
|
|
95
95
|
},
|
|
96
96
|
"devDependencies": {
|
|
97
|
-
"@charcuterie/storybook-config": "0.4.
|
|
97
|
+
"@charcuterie/storybook-config": "0.4.3",
|
|
98
98
|
"@codemirror/commands": "^6",
|
|
99
99
|
"@codemirror/lang-markdown": "^6",
|
|
100
100
|
"@codemirror/language": "^6",
|
|
@@ -72,3 +72,17 @@ test("aria-valuenow tracks the fill to completion", async () => {
|
|
|
72
72
|
bar.querySelector(".bg-intent-success-solid"),
|
|
73
73
|
).toBeInTheDocument()
|
|
74
74
|
})
|
|
75
|
+
|
|
76
|
+
test("with no overlay the track is a direct child of the root", async () => {
|
|
77
|
+
// An app's CSS sizes `[role="progressbar"]` against its parent —
|
|
78
|
+
// rip-deck's kiosk sets the track to `block-size: 100%`. The overlay
|
|
79
|
+
// grid wrapper, present unconditionally in 4.9.0-4.10.1, has no
|
|
80
|
+
// height, so that fill collapsed to nothing.
|
|
81
|
+
const { canvas } = await mountStory(Playground)
|
|
82
|
+
|
|
83
|
+
const bar = canvas.getByRole("progressbar")
|
|
84
|
+
|
|
85
|
+
await expect(bar.parentElement?.className).toContain(
|
|
86
|
+
"flex-col",
|
|
87
|
+
)
|
|
88
|
+
})
|
|
@@ -100,6 +100,56 @@ export const ProgressBar = ({
|
|
|
100
100
|
thresholds,
|
|
101
101
|
)
|
|
102
102
|
|
|
103
|
+
// The grid wrapper exists only for an overlay. Without one the
|
|
104
|
+
// track is a direct child again, as it was before `overlay` —
|
|
105
|
+
// apps size `[role="progressbar"]` against its parent, and an
|
|
106
|
+
// always-present wrapper with no height collapsed their fill.
|
|
107
|
+
const track = (
|
|
108
|
+
<div
|
|
109
|
+
aria-busy={isIndeterminate || undefined}
|
|
110
|
+
aria-labelledby={labelId}
|
|
111
|
+
aria-valuemax={max}
|
|
112
|
+
aria-valuemin={0}
|
|
113
|
+
aria-valuenow={
|
|
114
|
+
isIndeterminate ? undefined : clampedValue
|
|
115
|
+
}
|
|
116
|
+
className={toClassName(
|
|
117
|
+
"relative w-full overflow-hidden rounded-full bg-surface-sunken",
|
|
118
|
+
overlay == null
|
|
119
|
+
? TRACK_SIZE_CLASS[size]
|
|
120
|
+
: "h-full rounded-xl [grid-area:1/1]",
|
|
121
|
+
)}
|
|
122
|
+
role="progressbar"
|
|
123
|
+
>
|
|
124
|
+
{isIndeterminate ? (
|
|
125
|
+
<span
|
|
126
|
+
className={toClassName(
|
|
127
|
+
// The sweep animates `inset-inline-start`, so it runs
|
|
128
|
+
// the other way in RTL for free — and its
|
|
129
|
+
// reduced-motion fallback hatches the whole track
|
|
130
|
+
// rather than parking at one end.
|
|
131
|
+
"charcuterie-sweep absolute inset-y-0 w-2/5 rounded-full",
|
|
132
|
+
INTENT_SOLID_FILL_CLASS[fillIntent],
|
|
133
|
+
overlay == null
|
|
134
|
+
? undefined
|
|
135
|
+
: "rounded-none opacity-30",
|
|
136
|
+
)}
|
|
137
|
+
/>
|
|
138
|
+
) : (
|
|
139
|
+
<span
|
|
140
|
+
className={toClassName(
|
|
141
|
+
"block h-full rounded-full transition-[inline-size] duration-(--duration-normal) ease-standard",
|
|
142
|
+
INTENT_SOLID_FILL_CLASS[fillIntent],
|
|
143
|
+
overlay == null
|
|
144
|
+
? undefined
|
|
145
|
+
: "rounded-none opacity-30",
|
|
146
|
+
)}
|
|
147
|
+
style={{ inlineSize: `${percent}%` }}
|
|
148
|
+
/>
|
|
149
|
+
)}
|
|
150
|
+
</div>
|
|
151
|
+
)
|
|
152
|
+
|
|
103
153
|
return (
|
|
104
154
|
<div
|
|
105
155
|
{...divProps}
|
|
@@ -135,62 +185,16 @@ export const ProgressBar = ({
|
|
|
135
185
|
</VisuallyHidden>
|
|
136
186
|
)}
|
|
137
187
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
>
|
|
145
|
-
<div
|
|
146
|
-
aria-busy={isIndeterminate || undefined}
|
|
147
|
-
aria-labelledby={labelId}
|
|
148
|
-
aria-valuemax={max}
|
|
149
|
-
aria-valuemin={0}
|
|
150
|
-
aria-valuenow={
|
|
151
|
-
isIndeterminate ? undefined : clampedValue
|
|
152
|
-
}
|
|
153
|
-
className={toClassName(
|
|
154
|
-
"relative w-full overflow-hidden rounded-full bg-surface-sunken",
|
|
155
|
-
overlay == null
|
|
156
|
-
? TRACK_SIZE_CLASS[size]
|
|
157
|
-
: "h-full rounded-xl [grid-area:1/1]",
|
|
158
|
-
)}
|
|
159
|
-
role="progressbar"
|
|
160
|
-
>
|
|
161
|
-
{isIndeterminate ? (
|
|
162
|
-
<span
|
|
163
|
-
className={toClassName(
|
|
164
|
-
// The sweep animates `inset-inline-start`, so it runs
|
|
165
|
-
// the other way in RTL for free — and its
|
|
166
|
-
// reduced-motion fallback hatches the whole track
|
|
167
|
-
// rather than parking at one end.
|
|
168
|
-
"charcuterie-sweep absolute inset-y-0 w-2/5 rounded-full",
|
|
169
|
-
INTENT_SOLID_FILL_CLASS[fillIntent],
|
|
170
|
-
overlay == null
|
|
171
|
-
? undefined
|
|
172
|
-
: "rounded-none opacity-30",
|
|
173
|
-
)}
|
|
174
|
-
/>
|
|
175
|
-
) : (
|
|
176
|
-
<span
|
|
177
|
-
className={toClassName(
|
|
178
|
-
"block h-full rounded-full transition-[inline-size] duration-(--duration-normal) ease-standard",
|
|
179
|
-
INTENT_SOLID_FILL_CLASS[fillIntent],
|
|
180
|
-
overlay == null
|
|
181
|
-
? undefined
|
|
182
|
-
: "rounded-none opacity-30",
|
|
183
|
-
)}
|
|
184
|
-
style={{ inlineSize: `${percent}%` }}
|
|
185
|
-
/>
|
|
186
|
-
)}
|
|
187
|
-
</div>
|
|
188
|
-
{overlay == null ? null : (
|
|
188
|
+
{overlay == null ? (
|
|
189
|
+
track
|
|
190
|
+
) : (
|
|
191
|
+
<div className="grid overflow-hidden rounded-xl">
|
|
192
|
+
{track}
|
|
189
193
|
<div className="relative min-w-0 [grid-area:1/1]">
|
|
190
194
|
{overlay}
|
|
191
195
|
</div>
|
|
192
|
-
|
|
193
|
-
|
|
196
|
+
</div>
|
|
197
|
+
)}
|
|
194
198
|
</div>
|
|
195
199
|
)
|
|
196
200
|
}
|