@acronis-platform/ui-react 4.1.0 → 5.0.0
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/components/ui/chart/chart.js +17 -14
- package/dist/components/ui/chart/chart.js.map +1 -1
- package/dist/components/ui/funnel-chart/funnel-chart.js +189 -113
- package/dist/components/ui/funnel-chart/funnel-chart.js.map +1 -1
- package/dist/components/ui/input-select/input-select.js +18 -9
- package/dist/components/ui/input-select/input-select.js.map +1 -1
- package/dist/components/ui/radar-chart/radar-chart.js +76 -66
- package/dist/components/ui/radar-chart/radar-chart.js.map +1 -1
- package/dist/index.js +51 -51
- package/dist/llms/funnel-chart.md +269 -101
- package/dist/llms/input-select.md +175 -1
- package/dist/llms/radar-chart.md +15 -5
- package/dist/llms.txt +2 -2
- package/dist/react.js +51 -51
- package/dist/src/components/ui/chart/chart.d.ts +8 -1
- package/dist/src/components/ui/funnel-chart/funnel-chart.d.ts +92 -26
- package/dist/src/components/ui/funnel-chart/index.d.ts +1 -1
- package/dist/src/components/ui/input-select/input-select.d.ts +34 -2
- package/dist/src/components/ui/radar-chart/radar-chart.d.ts +42 -9
- package/dist/ui-react.css +1 -1
- package/package.json +3 -3
|
@@ -45,7 +45,10 @@ The next-gen select **field**: a label (with an optional required marker), a tri
|
|
|
45
45
|
box showing the value / placeholder and a chevron, an optional description or error,
|
|
46
46
|
and a floating dropdown with an in-dropdown search, sections, single- or
|
|
47
47
|
multiple-selectable items, and loading / empty / error status. It composes Base UI
|
|
48
|
-
`Select` and the `--ui-input-select-*` token tier.
|
|
48
|
+
`Select` and the `--ui-input-select-*` token tier. The dropdown's placement is
|
|
49
|
+
controllable (`side` / `align` / offsets / collision avoidance, or an explicit
|
|
50
|
+
`anchor` element to position against instead of the trigger), and
|
|
51
|
+
`is-popover-styled` swaps its chrome to the popover look — see `behavior.md`.
|
|
49
52
|
|
|
50
53
|
> `Select` is an alias of this family (re-pointed off the deleted `--ui-form-*` tier).
|
|
51
54
|
> Prefer importing `InputSelect*` directly in new code.
|
|
@@ -151,6 +154,14 @@ use it inside a custom tree/item renderer to filter items the flat
|
|
|
151
154
|
| `name` | `string` | — | no | Form field name submitted with the form (via a hidden input). |
|
|
152
155
|
| `placeholder` | `string` | — | no | Hint shown by the value part when nothing is selected. |
|
|
153
156
|
| `items` | `Record<string, string>` | — | no | Map of value → label for every selectable option, so the value part can render a selected option's label while the popup is closed without inspecting the rendered items. |
|
|
157
|
+
| `side` | `'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end'` | `'bottom'` | no | On the content — which side of the trigger the popup renders on. |
|
|
158
|
+
| `align` | `'start' | 'center' | 'end'` | `'start'` | no | On the content — alignment along the chosen side. |
|
|
159
|
+
| `side-offset` | `number` | `4` | no | On the content — distance in px from the trigger. |
|
|
160
|
+
| `align-offset` | `number` | `0` | no | On the content — offset in px along the alignment axis (perpendicular to `side`), to nudge the popup along the trigger's edge without changing its alignment. |
|
|
161
|
+
| `collision-avoidance` | `{ side?: 'flip' | 'shift' | 'none'; align?: 'flip' | 'shift' | 'none'; fallbackAxisSide?: 'start' | 'end' | 'none' }` | `the platform default (flip/shift)` | no | On the content — collision-avoidance strategy. Pass `{ side: 'none', fallbackAxisSide: 'none' }` alongside an explicit `side`/`align` to lock the popup to that placement with no auto-flip fallback. |
|
|
162
|
+
| `anchor` | `Element | VirtualElement | RefObject<Element | null> | (() => Element | VirtualElement | null) | null` | `the trigger element` | no | On the content — element (or ref/getter) the popup positions itself against, overriding the default of anchoring to the trigger. Use when the visible trigger isn't the element tracked internally — e.g. an external button drives a hidden trigger, and the popup should align with the button instead. |
|
|
163
|
+
| `portal-container` | `Element | ShadowRoot | null | RefObject<Element | ShadowRoot | null>` | `nearest PortalContainerProvider, or document.body` | no | On the content — container to portal the dropdown into. Pass an element to scope the portal (e.g. a shadow root, so the popup inherits styles defined there). |
|
|
164
|
+
| `is-popover-styled` | `boolean` | `false` | no | On the content — render the dropdown chrome like `PopoverContent` (fade/zoom/slide animation, no shadow) instead of the default static-shadow dropdown chrome. |
|
|
154
165
|
|
|
155
166
|
## Events
|
|
156
167
|
|
|
@@ -229,6 +240,112 @@ border.
|
|
|
229
240
|
**Then** it shows the matching icon and message (and, for `error`, an optional retry
|
|
230
241
|
action).
|
|
231
242
|
|
|
243
|
+
### Popup placement and chrome
|
|
244
|
+
|
|
245
|
+
**Given** no positioning props on the content
|
|
246
|
+
**When** the popup opens
|
|
247
|
+
**Then** it is placed against the **trigger**, below it and aligned to its start
|
|
248
|
+
edge, and the platform's own collision handling may flip or shift it to keep it in
|
|
249
|
+
view. `side` / `align` / `side-offset` / `align-offset` / `collision-avoidance`
|
|
250
|
+
each override one part of that; passing `collision-avoidance` with no fallbacks
|
|
251
|
+
alongside an explicit `side` pins the popup to that placement even when it
|
|
252
|
+
overflows.
|
|
253
|
+
|
|
254
|
+
**Given** an `anchor` on the content
|
|
255
|
+
**When** the popup opens
|
|
256
|
+
**Then** it positions itself against **that** element instead of the trigger,
|
|
257
|
+
decoupling where the popup appears from where the trigger sits in layout. This is
|
|
258
|
+
for the case where the element the user actually operates is not the trigger — an
|
|
259
|
+
external button drives the open state and the trigger stays mounted but visually
|
|
260
|
+
hidden — so the popup should align with the button, not with the hidden trigger's
|
|
261
|
+
position in flow. The trigger still owns the combobox semantics either way (see
|
|
262
|
+
`accessibility.md`).
|
|
263
|
+
|
|
264
|
+
**Given** an external button that drives a controlled `open` and is the popup's
|
|
265
|
+
`anchor`
|
|
266
|
+
**When** the user presses that button while the popup is open
|
|
267
|
+
**Then** the platform reports the press as an **outside press** close before the
|
|
268
|
+
button's own activation handler runs, so the consumer must cancel that specific
|
|
269
|
+
close (`open-change` with `reason = outside-press` and the event target inside
|
|
270
|
+
the button → `cancel()`) for the button to act as a toggle; otherwise the
|
|
271
|
+
activation handler reopens the popup and it can never be dismissed from the
|
|
272
|
+
button. A press outside both the button and the popup still closes it.
|
|
273
|
+
|
|
274
|
+
**Given** an external button that drives a controlled `open`, with the real
|
|
275
|
+
trigger kept mounted but visually hidden (screen-reader-only, not removed)
|
|
276
|
+
**When** the popup closes via Escape or by selecting an item
|
|
277
|
+
**Then** at the moment the close is reported focus is **still inside the popup
|
|
278
|
+
that is about to unmount**, and the platform can move it to **its own trigger** —
|
|
279
|
+
which is invisible — only **afterwards**, asynchronously. Neither path reports
|
|
280
|
+
the close with focus already on the trigger. So the consumer must (a) mark the
|
|
281
|
+
trigger `tab-index = -1` so it is never reached by Tab, and (b) reclaim focus for
|
|
282
|
+
their visible external control themselves once the close is committed,
|
|
283
|
+
**re-asserted once the platform's own focus-restore attempts have settled**. On
|
|
284
|
+
Escape, a gate that recognizes "focus is still inside the closing popup" matches
|
|
285
|
+
at the moment of the synchronous reclaim and moves focus to the external control
|
|
286
|
+
before the platform's own move happens, so nothing overwrites it afterwards; the
|
|
287
|
+
deferred re-assertion then finds the external control already focused and is a
|
|
288
|
+
no-op. On item selection, the same synchronous reclaim also lands, but the
|
|
289
|
+
platform's async move to the hidden trigger can still happen afterwards and pull
|
|
290
|
+
focus back onto it — so the deferred re-assertion is load-bearing on this path,
|
|
291
|
+
not a no-op, and reclaims focus a second time once that move has settled. Doing
|
|
292
|
+
only one of (a)/(b) is a WCAG 2.4.7 failure: `tab-index = -1` does not block the
|
|
293
|
+
platform's programmatic focus call, and the manual reclaim alone leaves an
|
|
294
|
+
invisible control in the tab order. The reclaim belongs after the state commit
|
|
295
|
+
in the same `open-change` handler, so a close the consumer cancels (see below)
|
|
296
|
+
does not move focus.
|
|
297
|
+
|
|
298
|
+
**Given** the same visually hidden trigger
|
|
299
|
+
**When** the popup closes because of an outside press onto **nothing focusable**
|
|
300
|
+
(a blank area of the page)
|
|
301
|
+
**Then** the platform performs **no** focus restore at all — focus is simply lost
|
|
302
|
+
to the document body. The consumer's own reclaim is the only thing that recovers
|
|
303
|
+
it, so it must cover this case too, not just the trigger-focused one.
|
|
304
|
+
|
|
305
|
+
**Given** the same visually hidden trigger
|
|
306
|
+
**When** the popup closes because of an outside press onto **another focusable
|
|
307
|
+
element** (an input elsewhere on the page)
|
|
308
|
+
**Then** focus must end up on **that** element, not on the external button — the
|
|
309
|
+
user deliberately focused it and pulling focus back is a bug. The platform
|
|
310
|
+
reports this close **once** (reason = outside press), while focus is still inside
|
|
311
|
+
the popup, so a gate keyed on "focus is unclaimed" (still inside the closing
|
|
312
|
+
popup, on the hidden trigger, or on the document body) **does** match on that
|
|
313
|
+
single report and does issue its focus call. The correct end state comes from the
|
|
314
|
+
platform's own native focus move to the pressed element happening **after** that
|
|
315
|
+
synchronous call and overriding it — not from the gate recognizing and skipping
|
|
316
|
+
this case. What the gate does guarantee is that the **deferred** re-assertion
|
|
317
|
+
cannot undo that: by the time it runs the pressed element holds focus, which is
|
|
318
|
+
not an unclaimed state, so it is a no-op. An unconditional focus return on close
|
|
319
|
+
is therefore still wrong — it would fire again after the platform's move and
|
|
320
|
+
steal focus back.
|
|
321
|
+
|
|
322
|
+
**Given** a cancelled close (the consumer called `cancel()` on `open-change`)
|
|
323
|
+
**When** the popup therefore stays open
|
|
324
|
+
**Then** the in-dropdown search query is **preserved** — a cancelled close does
|
|
325
|
+
not silently clear what the user typed. (A consumer that leaves the close
|
|
326
|
+
un-cancelled but simply doesn't act on it still gets the query reset; cancelling
|
|
327
|
+
is what marks the close as not taking effect.)
|
|
328
|
+
|
|
329
|
+
**Given** an external button that drives a controlled `open` and closes the
|
|
330
|
+
popup directly (its own handler sets `open = false`, so the platform never
|
|
331
|
+
reports the transition through `open-change`)
|
|
332
|
+
**When** the popup is reopened
|
|
333
|
+
**Then** the in-dropdown search query is **empty** — the reset follows the
|
|
334
|
+
`open` prop's `true → false` transition as well as `open-change`, so a
|
|
335
|
+
button-driven close cannot carry a stale query into the next open.
|
|
336
|
+
|
|
337
|
+
**Given** `is-popover-styled`
|
|
338
|
+
**When** the popup opens
|
|
339
|
+
**Then** its container chrome is drawn from the **popover** tokens rather than the
|
|
340
|
+
dropdown ones (fill / border / corner radius), the dropdown's static shadow is
|
|
341
|
+
dropped, and open/close is animated (fade + zoom, sliding in from the resolved
|
|
342
|
+
`side`) instead of appearing instantly. Reach for it when the dropdown is acting
|
|
343
|
+
as a floating menu that should read in the same visual language as `Popover` —
|
|
344
|
+
a tenant/entity picker opened from a page control, not a plain form field's
|
|
345
|
+
option list. It changes only the container chrome and the enter/exit transition:
|
|
346
|
+
the popup still sizes to the anchor width, keeps the dropdown's vertical padding,
|
|
347
|
+
and every row inside (search, sections, items, status) is unchanged.
|
|
348
|
+
|
|
232
349
|
### Interaction
|
|
233
350
|
|
|
234
351
|
**Given** the trigger
|
|
@@ -264,6 +381,63 @@ action).
|
|
|
264
381
|
Arrow-key roaming inside the listbox skips it entirely — it cannot be
|
|
265
382
|
reached with the keyboard once the popup is open, only by pointer. It
|
|
266
383
|
remains a normal native tab stop outside that roving focus order.
|
|
384
|
+
- **Decoupled anchor:** `anchor` moves only where the popup is _drawn_ — the
|
|
385
|
+
combobox semantics (`aria-expanded`, `aria-controls`, the accessible name) and
|
|
386
|
+
the focus return on close stay on the **trigger**, and cannot be relocated. So
|
|
387
|
+
if the visible control is a separate element (an external button opening a
|
|
388
|
+
visually hidden trigger), that button needs its own accessible name (visible
|
|
389
|
+
text or `aria-label`) and, because it is the control the user actually
|
|
390
|
+
operates, its own `aria-expanded` bound to the same controlled `open` state
|
|
391
|
+
that drives the popup. `aria-controls` on the button is optional and only
|
|
392
|
+
wirable by giving `InputSelectContent` an explicit `id` and referencing it
|
|
393
|
+
while the popup is open. Keep the trigger reachable — do not `display: none`
|
|
394
|
+
it, or closing returns focus to nothing. Prefer opening from the real trigger
|
|
395
|
+
whenever the design allows it.
|
|
396
|
+
- **Visually hidden trigger — focus is the consumer's job (2.4.7):** leaving the
|
|
397
|
+
trigger merely `sr-only`-reachable is **not** sufficient. It is still
|
|
398
|
+
focusable while invisible, and on the close paths where the platform restores
|
|
399
|
+
focus to it (Escape, selecting an item) keyboard focus lands on a control the
|
|
400
|
+
user cannot see — a WCAG 2.4.7 Focus Visible failure. On other close paths
|
|
401
|
+
(an outside press onto nothing focusable) the platform does not restore focus
|
|
402
|
+
at all and it is simply lost to the document body — also a failure. The
|
|
403
|
+
required pattern is **both** of:
|
|
404
|
+
1. `tabIndex={-1}` on the **trigger** (`InputSelectTrigger`) — not on the
|
|
405
|
+
`InputSelectField` wrapper, which is a plain non-focusable element — so the
|
|
406
|
+
invisible trigger is out of the natural Tab sequence;
|
|
407
|
+
2. a **conditional** focus return to the consumer's own visible control on
|
|
408
|
+
close (`onOpenChange` → after committing the new state, `if (!nextOpen)`
|
|
409
|
+
reclaim focus for the external button). Two properties of the platform make
|
|
410
|
+
this non-trivial. First, **the platform's own focus restore may still be
|
|
411
|
+
pending when the close is reported** — on the Escape and item-selection
|
|
412
|
+
paths focus is still inside the popup that is about to unmount at handler
|
|
413
|
+
time, and the move to the (invisible) trigger can land afterwards. On
|
|
414
|
+
Escape a synchronous reclaim already lands on the visible control before
|
|
415
|
+
that move happens, so nothing overwrites it; on item selection the
|
|
416
|
+
platform's move can still land on the hidden trigger after a synchronous
|
|
417
|
+
reclaim, so the reclaim must be re-asserted once that settles. Second,
|
|
418
|
+
**on some close reasons the platform's restore does not happen at all** —
|
|
419
|
+
an outside press onto nothing focusable leaves focus on the document
|
|
420
|
+
body. So the focus return must be **re-asserted once the platform's own
|
|
421
|
+
focus-restore attempts have settled**, not only synchronously during the
|
|
422
|
+
handler — even where the synchronous call already suffices, the deferred
|
|
423
|
+
re-assertion is a harmless no-op.
|
|
424
|
+
Crucially, the reclaim must **never override an element the user has
|
|
425
|
+
legitimately focused since** — an outside press onto another focusable
|
|
426
|
+
control is that user's choice of focus, and an unconditional refocus steals
|
|
427
|
+
it. Gate the reclaim on focus being _unclaimed_: still inside the closing
|
|
428
|
+
popup, on the hidden trigger, or lost to the document body. Anything else
|
|
429
|
+
is left alone.
|
|
430
|
+
`tabIndex={-1}` alone does not stop the platform's programmatic `.focus()`
|
|
431
|
+
call, and the reclaim alone leaves the invisible trigger in the Tab order —
|
|
432
|
+
each fixes one half. The reclaim must sit after the state commit, so the
|
|
433
|
+
cancelled `outside-press` branch (which returns early) does not move focus
|
|
434
|
+
for a close that never happened.
|
|
435
|
+
- **External-button toggle:** an external button must also cancel the
|
|
436
|
+
`outside-press` close that its own pointerdown triggers (`onOpenChange` →
|
|
437
|
+
`eventDetails.reason === 'outside-press'` and the event target inside the
|
|
438
|
+
button → `eventDetails.cancel()`), otherwise the popup cannot be dismissed
|
|
439
|
+
from the button at all — a keyboard/AT user who activates the button a second
|
|
440
|
+
time gets a popup that reopens instead of closing. Escape still closes it.
|
|
267
441
|
- **Selection indicator:** single-select shows a trailing check on the selected item;
|
|
268
442
|
multiple-select shows a leading checkbox per item (not focusable — the row is the
|
|
269
443
|
control).
|
package/dist/llms/radar-chart.md
CHANGED
|
@@ -98,8 +98,8 @@ across brands until the real data-viz palette lands.
|
|
|
98
98
|
| `seriesSettings` | `Record<string, RadarChartSeriesSettings>` | — | no | Per-series style overrides keyed by a `dataKeys` entry — `color`, `stroke`, `fillOpacity`, `strokeWidth`, `dot`, `dotRadius`, `activeDot`. Unplotted keys are ignored. An overridden `color` — or `stroke`, which the renderer reads first — carries into that series' legend swatch and tooltip dot. |
|
|
99
99
|
| `fillOpacity` | `number` | `0.3` | no | Fill opacity of each radar area. |
|
|
100
100
|
| `strokeWidth` | `number` | `2` | no | Stroke width of each radar outline. |
|
|
101
|
-
| `showDots` | `boolean` | `
|
|
102
|
-
| `dotRadius` | `number` | `
|
|
101
|
+
| `showDots` | `boolean` | `true` | no | Render a dot at each axis point. Visible by default to match the Figma chart. |
|
|
102
|
+
| `dotRadius` | `number` | `2` | no | Radius of the per-point dots when `showDots` is on. |
|
|
103
103
|
| `activeDot` | `boolean` | `true` | no | Enlarge the hovered point's dot. On by default; `false` for a chart that should not react to the pointer. |
|
|
104
104
|
| `showGrid` | `boolean` | `true` | no | Render the polar grid (the web). |
|
|
105
105
|
| `radialLines` | `boolean` | `true` | no | Draw the grid's spokes (the radial lines out to each category). Off leaves only the concentric rings. |
|
|
@@ -117,15 +117,14 @@ across brands until the real data-viz palette lands.
|
|
|
117
117
|
| `radiusAxisTickCount` | `number` | `5` | no | Desired number of ticks on the value scale (a hint, not exact). Also sets how many rings the grid draws, whether or not the scale is shown. |
|
|
118
118
|
| `radiusAxisReversed` | `boolean` | `false` | no | Invert the value scale (maximum at the centre) for a metric where less is better. |
|
|
119
119
|
| `cx` | `number | string` | `'50%'` | no | Horizontal centre of the web, in px or a percentage of the width. |
|
|
120
|
-
| `cy` | `number | string` | `
|
|
120
|
+
| `cy` | `number | string` | `the middle of the plot band` | no | Vertical centre of the web, in px or a percentage of the height. Defaults to the middle of the plot band — 50% of what the legend leaves, not of the whole box — because the underlying chart centres a polar plot on the whole surface and takes no account of the legend band beneath it. |
|
|
121
121
|
| `startAngle` | `number` | `90` | no | Angle the first category sits at, in degrees. |
|
|
122
122
|
| `endAngle` | `number` | `-270` | no | Angle the sweep ends at, in degrees — a full clockwise turn from `startAngle` by default. |
|
|
123
123
|
| `innerRadius` | `number | string` | `0` | no | Radius of the hole at the centre, in px or a percentage of the available radius. Lifts the grid and the areas off the centre. |
|
|
124
|
-
| `outerRadius` | `number | string` | `
|
|
124
|
+
| `outerRadius` | `number | string` | `78` | no | Outer radius of the web, in px or a percentage of the available radius. Defaults to 78px to match the Figma geometry; the legend and labels do not change the radius. |
|
|
125
125
|
| `margin` | `{ top?: number; right?: number; bottom?: number; left?: number }` | — | no | Plot-area margin, in px. Passing the object replaces all four sides; a side left out is `0`, not the default `5`, so name every side. |
|
|
126
126
|
| `showTooltip` | `boolean` | `true` | no | Render the hover tooltip. |
|
|
127
127
|
| `showLegend` | `boolean` | `true` | no | Render the legend. |
|
|
128
|
-
| `legendPosition` | `'top' | 'bottom'` | `'bottom'` | no | Which side of the chart the legend sits on. |
|
|
129
128
|
| `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Ignored when showTooltip is false. |
|
|
130
129
|
| `animate` | `boolean` | `false` | no | Enable entrance animation. Off by default so output/baselines are unchanged. |
|
|
131
130
|
| `animationDuration` | `number` | — | no | Animation duration in ms. |
|
|
@@ -231,6 +230,17 @@ Scenario: Geometry
|
|
|
231
230
|
Then the web, its axes, and the areas are all laid out to match
|
|
232
231
|
```
|
|
233
232
|
|
|
233
|
+
```gherkin
|
|
234
|
+
Scenario: The box holds the category labels
|
|
235
|
+
Given a fixed outerRadius
|
|
236
|
+
Then the chart reserves a plot band tall enough for the outer category labels
|
|
237
|
+
— the outer radius, the tick size, and half a line of tick text on each side
|
|
238
|
+
And showLabels, which widens the tick gap, widens that band with it
|
|
239
|
+
And the web is centred on the plot band rather than on the whole box, so the
|
|
240
|
+
bottom label clears the legend and the top one clears the upper edge
|
|
241
|
+
And a caller-supplied height or cy wins over both
|
|
242
|
+
```
|
|
243
|
+
|
|
234
244
|
```gherkin
|
|
235
245
|
Scenario: Tooltip on hover
|
|
236
246
|
Given showTooltip is true
|
package/dist/llms.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Acronis UI Kit for React — LLM Reference
|
|
2
2
|
|
|
3
|
-
> `@acronis-platform/ui-react`
|
|
3
|
+
> `@acronis-platform/ui-react` v5.0.0
|
|
4
4
|
|
|
5
5
|
Machine-readable component reference compiled from framework-agnostic specs.
|
|
6
6
|
Each entry links to a self-contained markdown file with props, behavior,
|
|
@@ -44,7 +44,7 @@ accessibility notes, and usage examples.
|
|
|
44
44
|
- [EmptyOverlay](./llms/empty-overlay.md): A full-bleed empty-state overlay — a colored icon badge over a centered title/description, on a fade-to-solid backdrop. Meant to sit over other content (e.g. a frozen/blurred widget preview); the developer sizes it (typically `absolute inset-0` over a positioned parent).
|
|
45
45
|
- [FilterCards](./llms/filter-cards.md): A horizontal row container (the Figma `FilterCards` component) that lays out a set of `CardFilter` items, stretching each to an equal share of the available width. Pure layout — it owns no visual styling of its own besides the inter-card gap. Figma's nested `ListCards` slot maps to `children`.
|
|
46
46
|
- [FilterChips](./llms/filter-chips.md): A wrapping row that summarises the filters currently applied to a data set (the Figma `FilterChips` component): one removable `Chip` per filter, closed by a ghost "Reset filters" action that clears them all at once. Pure layout — it owns no visual styling of its own besides the two gaps. Figma's nested `ListChips` slot maps to `FilterChipsList`'s children.
|
|
47
|
-
- [FunnelChart](./llms/funnel-chart.md): A typed funnel-chart composition over the shared `Chart` primitives.
|
|
47
|
+
- [FunnelChart](./llms/funnel-chart.md): A typed funnel-chart composition over the shared `Chart` primitives. The root is a row: a 120×120 square plot, a 16px gutter, then a stage-list legend taking every remaining pixel — the same composition `PieChart` and `RadialBarChart` use. The plot stacks one series of stages (`data` rows) as narrowing, 2px-gapped, 2px-rounded segments inside a `ChartContainer`, with a tooltip and optional on-plot labels. One variant axis: `lastShape` (the funnel narrows to a `triangle` point or ends `rectangle` flat). Stages are painted from the sequential blue ramp by default, because a funnel's stages are an ordered series rather than unrelated categories. Card-less by design: Figma's card, header and metric row are `ChartWidget`'s.
|
|
48
48
|
- [Histogram](./llms/histogram.md): A frequency histogram — bins a set of continuous samples (`values`) into equal-width ranges and plots the count of each as contiguous bars. Distinct from `BarChart`, which plots pre-categorized rows: the binning is the component's own job (a pure helper). Built on the shared `Chart` primitives; design-pending v1 (no `--ui-chart-*` palette yet, no `apps/demo` playground).
|
|
49
49
|
- [LineChart](./llms/line-chart.md): A typed line-chart composition over the shared `Chart` primitives. Takes `data` + `config` + a set of series `dataKeys` and renders a themed recharts `LineChart` inside a `ChartContainer`, with tooltip and legend chrome. Two variant axes: `curve` (linear / monotone / step interpolation) and `lineStyle` (solid / dashed stroke); single vs multi line is driven by the number of `dataKeys`. Ported from the apps/demo `ChartPlayground`.
|
|
50
50
|
- [Meter](./llms/meter.md): A labelled bar showing a scalar value within a known range — a fractional value / share (`role="meter"`, mirroring the HTML `<meter>` element), as opposed to `Progress` which tracks a task over time. One row: label + `value · %` over a proportional track bar, with a hover tooltip; designed to be stacked into a ranked breakdown (a "bar list"). Design-pending v1 (no `--ui-chart-*` palette; the fill color is caller-supplied per row).
|
package/dist/react.js
CHANGED
|
@@ -71,55 +71,55 @@ import { Separator as qr } from "./components/ui/separator/separator.js";
|
|
|
71
71
|
import { Field as Jr, FieldContent as Yr, FieldControl as Xr, FieldDescription as Zr, FieldError as Qr, FieldGroup as $r, FieldLabel as ei, FieldLegend as ti, FieldSeparator as ni, FieldSet as ri, FieldTitle as ii } from "./components/ui/field/field.js";
|
|
72
72
|
import { FittedActions as ai, computeFittedVisibleCount as oi } from "./components/ui/fitted-actions/fitted-actions.js";
|
|
73
73
|
import { FilterCards as si } from "./components/ui/filter-cards/filter-cards.js";
|
|
74
|
-
import {
|
|
75
|
-
import { Grid as
|
|
76
|
-
import { Histogram as
|
|
77
|
-
import { Form as
|
|
78
|
-
import { RadarChart as
|
|
79
|
-
import { RadialBarChart as
|
|
80
|
-
import { Radio as
|
|
81
|
-
import { InputNumPicker as
|
|
82
|
-
import { InputOTP as
|
|
83
|
-
import { InputPassword as
|
|
74
|
+
import { FUNNEL_CHART_DEFAULT_PALETTE as ci, FunnelChart as li, funnelChartPercent as ui, funnelChartVariants as di } from "./components/ui/funnel-chart/funnel-chart.js";
|
|
75
|
+
import { Grid as fi, gridVariants as pi } from "./components/ui/grid/grid.js";
|
|
76
|
+
import { Histogram as mi } from "./components/ui/histogram/histogram.js";
|
|
77
|
+
import { Form as hi } from "./components/ui/form/form.js";
|
|
78
|
+
import { RadarChart as gi, radarChartVariants as _i } from "./components/ui/radar-chart/radar-chart.js";
|
|
79
|
+
import { RadialBarChart as vi } from "./components/ui/radial-bar-chart/radial-bar-chart.js";
|
|
80
|
+
import { Radio as yi, RadioGroup as bi } from "./components/ui/radio/radio.js";
|
|
81
|
+
import { InputNumPicker as xi } from "./components/ui/input-num-picker/input-num-picker.js";
|
|
82
|
+
import { InputOTP as Si } from "./components/ui/input-otp/input-otp.js";
|
|
83
|
+
import { InputPassword as Ci } from "./components/ui/input-password/input-password.js";
|
|
84
84
|
import { InputTextArea as B } from "./components/ui/input-text-area/input-text-area.js";
|
|
85
|
-
import { LineChart as
|
|
86
|
-
import { Link as
|
|
87
|
-
import { Meter as
|
|
88
|
-
import { Skeleton as
|
|
89
|
-
import { TrendIndicator as
|
|
90
|
-
import { Metric as
|
|
91
|
-
import { NumberField as
|
|
92
|
-
import { PageContent as
|
|
93
|
-
import { Tag as V, tagVariants as
|
|
94
|
-
import { PageHeader as
|
|
95
|
-
import { Pagination as
|
|
96
|
-
import { PieChart as
|
|
97
|
-
import { Progress as
|
|
98
|
-
import { ProgressCircle as
|
|
99
|
-
import { SankeyChart as
|
|
100
|
-
import { ScatterChart as
|
|
101
|
-
import { ScrollArea as
|
|
102
|
-
import { Section as
|
|
103
|
-
import { Sheet as H, SheetBody as U, SheetClose as W, SheetCloseButton as G, SheetContent as K, SheetDescription as q, SheetFooter as J, SheetHeader as Y, SheetOverlay as X, SheetPortal as Z, SheetTitle as Q, SheetTrigger as $, sheetVariants as
|
|
104
|
-
import { SheetDetails as
|
|
105
|
-
import { Slider as
|
|
106
|
-
import { Stack as
|
|
107
|
-
import { Stepper as
|
|
108
|
-
import { StepperItem as
|
|
109
|
-
import { ResizableHandle as
|
|
110
|
-
import { SidebarPrimary as
|
|
111
|
-
import { SidebarSecondary as
|
|
112
|
-
import { ButtonIconMenu as
|
|
113
|
-
import { Tabs as
|
|
114
|
-
import { Toaster as
|
|
115
|
-
import { Toggle as
|
|
116
|
-
import { Toolbar as
|
|
117
|
-
import { middleTruncate as
|
|
118
|
-
import { measureTextWidth as
|
|
119
|
-
import { TruncateText as
|
|
120
|
-
import { Timeline as
|
|
121
|
-
import { Timer as
|
|
122
|
-
import { Treemap as
|
|
123
|
-
import { WidgetPlaceholder as
|
|
124
|
-
import { Wizard as
|
|
125
|
-
export { _e as Accordion, xe as AccordionContainer, Se as AccordionContainerContent, Ce as AccordionContainerTrigger, ve as AccordionContent, ye as AccordionItem, be as AccordionTrigger, n as Alert, r as AlertActions, i as AlertClose, a as AlertContent, o as AlertDescription, s as AlertIcon, c as AlertText, l as AlertTitle, h as AppShellChat, g as AppShellChatChat, _ as AppShellChatChatBody, v as AppShellChatChatHeader, y as AppShellChatContent, b as AppShellChatContentBody, x as AppShellChatContentHeader, S as AppShellChatSidebar, ot as AreaChart, ct as Avatar, lt as AvatarFallback, ut as AvatarGroup, dt as AvatarImage, ce as BREAKPOINT_2XL, le as BREAKPOINT_3XL, ue as BREAKPOINT_4XL, de as BREAKPOINT_LG, fe as BREAKPOINT_XL, V as Badge, pt as BarChart, ht as Breadcrumb, gt as BreadcrumbEllipsis, _t as BreadcrumbItem, vt as BreadcrumbLink, yt as BreadcrumbList, bt as BreadcrumbPage, xt as BreadcrumbSeparator, St as Button, wt as ButtonGroup, Tt as ButtonGroupItem, e as ButtonIcon, Gt as ButtonIconInput,
|
|
85
|
+
import { LineChart as wi, lineChartVariants as Ti } from "./components/ui/line-chart/line-chart.js";
|
|
86
|
+
import { Link as Ei, linkVariants as Di } from "./components/ui/link/link.js";
|
|
87
|
+
import { Meter as Oi } from "./components/ui/meter/meter.js";
|
|
88
|
+
import { Skeleton as ki } from "./components/ui/skeleton/skeleton.js";
|
|
89
|
+
import { TrendIndicator as Ai, trendIndicatorVariants as ji } from "./components/ui/trend-indicator/trend-indicator.js";
|
|
90
|
+
import { Metric as Mi } from "./components/ui/metric/metric.js";
|
|
91
|
+
import { NumberField as Ni, NumberFieldDecrement as Pi, NumberFieldGroup as Fi, NumberFieldIncrement as Ii, NumberFieldInput as Li } from "./components/ui/number-field/number-field.js";
|
|
92
|
+
import { PageContent as Ri } from "./components/ui/page-content/page-content.js";
|
|
93
|
+
import { Tag as V, tagVariants as zi } from "./components/ui/tag/tag.js";
|
|
94
|
+
import { PageHeader as Bi, PageHeaderActions as Vi, PageHeaderDescription as Hi, PageHeaderDescriptionRow as Ui, PageHeaderRow as Wi, PageHeaderTags as Gi, PageHeaderTitle as Ki } from "./components/ui/page-header/page-header.js";
|
|
95
|
+
import { Pagination as qi, PaginationContent as Ji, PaginationEllipsis as Yi, PaginationItem as Xi, PaginationLink as Zi, PaginationNext as Qi, PaginationPrevious as $i } from "./components/ui/pagination/pagination.js";
|
|
96
|
+
import { PieChart as ea, pieChartVariants as ta } from "./components/ui/pie-chart/pie-chart.js";
|
|
97
|
+
import { Progress as na } from "./components/ui/progress/progress.js";
|
|
98
|
+
import { ProgressCircle as ra, progressCircleVariants as ia } from "./components/ui/progress-circle/progress-circle.js";
|
|
99
|
+
import { SankeyChart as aa } from "./components/ui/sankey-chart/sankey-chart.js";
|
|
100
|
+
import { ScatterChart as oa } from "./components/ui/scatter-chart/scatter-chart.js";
|
|
101
|
+
import { ScrollArea as sa, ScrollBar as ca } from "./components/ui/scroll-area/scroll-area.js";
|
|
102
|
+
import { Section as la, SectionContent as ua, SectionHeader as da, sectionVariants as fa, useSectionContext as pa } from "./components/ui/section/section.js";
|
|
103
|
+
import { Sheet as H, SheetBody as U, SheetClose as W, SheetCloseButton as G, SheetContent as K, SheetDescription as q, SheetFooter as J, SheetHeader as Y, SheetOverlay as X, SheetPortal as Z, SheetTitle as Q, SheetTrigger as $, sheetVariants as ma } from "./components/ui/sheet/sheet.js";
|
|
104
|
+
import { SheetDetails as ha } from "./components/ui/sheet/sheet-details.js";
|
|
105
|
+
import { Slider as ga } from "./components/ui/slider/slider.js";
|
|
106
|
+
import { Stack as _a, stackVariants as va } from "./components/ui/stack/stack.js";
|
|
107
|
+
import { Stepper as ya } from "./components/ui/stepper/stepper.js";
|
|
108
|
+
import { StepperItem as ba, stepperItemVariants as xa } from "./components/ui/stepper-item/stepper-item.js";
|
|
109
|
+
import { ResizableHandle as Sa, ResizablePanel as Ca, ResizablePanelGroup as wa } from "./components/ui/resizable/resizable.js";
|
|
110
|
+
import { SidebarPrimary as Ta, SidebarPrimaryCollapseTrigger as Ea, SidebarPrimaryContent as Da, SidebarPrimaryFooter as Oa, SidebarPrimaryHeader as ka, SidebarPrimaryMenu as Aa, SidebarPrimaryMenuItem as ja, SidebarPrimaryMenuItemExtras as Ma, SidebarPrimarySection as Na, sidebarPrimaryMenuItemVariants as Pa } from "./components/ui/sidebar-primary/sidebar-primary.js";
|
|
111
|
+
import { SidebarSecondary as Fa, SidebarSecondaryCollapseTrigger as Ia, SidebarSecondaryContent as La, SidebarSecondaryFooter as Ra, SidebarSecondaryHeader as za, SidebarSecondaryMenu as Ba, SidebarSecondaryMenuItem as Va, SidebarSecondaryMenuItemExtras as Ha, SidebarSecondarySection as Ua, SidebarSecondarySectionLabel as Wa, sidebarSecondaryMenuItemVariants as Ga } from "./components/ui/sidebar-secondary/sidebar-secondary.js";
|
|
112
|
+
import { ButtonIconMenu as Ka } from "./components/ui/button-icon-menu/button-icon-menu.js";
|
|
113
|
+
import { Tabs as qa, TabsContent as Ja, TabsList as Ya, TabsTrigger as Xa } from "./components/ui/tabs/tabs.js";
|
|
114
|
+
import { Toaster as Za, toast as Qa, toastVariants as $a } from "./components/ui/toast/toast.js";
|
|
115
|
+
import { Toggle as eo, ToggleGroup as to, ToggleGroupItem as no } from "./components/ui/toggle-group/toggle-group.js";
|
|
116
|
+
import { Toolbar as ro, ToolbarActionList as io, ToolbarActions as ao } from "./components/ui/toolbar/toolbar.js";
|
|
117
|
+
import { middleTruncate as oo } from "./components/ui/truncate-text/middle-truncate.js";
|
|
118
|
+
import { measureTextWidth as so } from "./components/ui/truncate-text/text-width.js";
|
|
119
|
+
import { TruncateText as co } from "./components/ui/truncate-text/truncate-text.js";
|
|
120
|
+
import { Timeline as lo, TimelineItem as uo } from "./components/ui/timeline/timeline.js";
|
|
121
|
+
import { Timer as fo } from "./components/ui/timer/timer.js";
|
|
122
|
+
import { Treemap as po } from "./components/ui/treemap/treemap.js";
|
|
123
|
+
import { WidgetPlaceholder as mo, WidgetPlaceholderAction as ho, WidgetPlaceholderContent as go, WidgetPlaceholderFooter as _o, WidgetPlaceholderHeader as vo, WidgetPlaceholderIcon as yo, WidgetPlaceholderImage as bo, WidgetPlaceholderText as xo, WidgetPlaceholderTitle as So } from "./components/ui/widget-placeholder/widget-placeholder.js";
|
|
124
|
+
import { Wizard as Co, WizardBody as wo, WizardHeader as To, WizardSubtitle as Eo } from "./components/ui/wizard/wizard.js";
|
|
125
|
+
export { _e as Accordion, xe as AccordionContainer, Se as AccordionContainerContent, Ce as AccordionContainerTrigger, ve as AccordionContent, ye as AccordionItem, be as AccordionTrigger, n as Alert, r as AlertActions, i as AlertClose, a as AlertContent, o as AlertDescription, s as AlertIcon, c as AlertText, l as AlertTitle, h as AppShellChat, g as AppShellChatChat, _ as AppShellChatChatBody, v as AppShellChatChatHeader, y as AppShellChatContent, b as AppShellChatContentBody, x as AppShellChatContentHeader, S as AppShellChatSidebar, ot as AreaChart, ct as Avatar, lt as AvatarFallback, ut as AvatarGroup, dt as AvatarImage, ce as BREAKPOINT_2XL, le as BREAKPOINT_3XL, ue as BREAKPOINT_4XL, de as BREAKPOINT_LG, fe as BREAKPOINT_XL, V as Badge, pt as BarChart, ht as Breadcrumb, gt as BreadcrumbEllipsis, _t as BreadcrumbItem, vt as BreadcrumbLink, yt as BreadcrumbList, bt as BreadcrumbPage, xt as BreadcrumbSeparator, St as Button, wt as ButtonGroup, Tt as ButtonGroupItem, e as ButtonIcon, Gt as ButtonIconInput, Ka as ButtonIconMenu, Ot as ButtonMenu, Ie as CHART_BRUSH_ARIA_LABEL, Le as CHART_BRUSH_HEIGHT, T as CHART_CATEGORICAL_TOKENS, E as CHART_DEFAULT_PALETTE, D as CHART_DIVERGING_TOKENS, Re as CHART_LABEL_FILL_CLASS, ze as CHART_LABEL_FILL_ON_SERIES_CLASS, Be as CHART_LABEL_FONT_SIZE, Ve as CHART_LABEL_MARGIN, He as CHART_REFERENCE_LINE_STROKE, O as CHART_SEQUENTIAL_TOKENS, on as CHART_STATE_ILLUSTRATIONS, k as CHART_STATUS_TOKENS, At as Calendar, jt as CalendarDayButton, Ht as CalendarHeader, Ut as CalendarItem, Wt as CalendarPanel, Jt as Card, Yt as CardContent, $t as CardFilter, Xt as CardFooter, Zt as CardHeader, tn as CardSection, rn as CategoryBar, ke as ChartContainer, Ae as ChartLegend, je as ChartLegendContent, sn as ChartState, Me as ChartStyle, Ne as ChartTooltip, Pe as ChartTooltipContent, cn as ChartWidget, ln as Checkbox, un as Chip, fn as Combobox, pn as ComboboxContent, mn as ComboboxEmpty, hn as ComboboxGroup, gn as ComboboxGroupLabel, _n as ComboboxInput, vn as ComboboxItem, yn as ComboboxList, bn as ComposedChart, Sn as ConfidenceCone, re as DEFAULT_TABLE_URL_PARAM_KEYS, $n as DataTable, ir as DataTableBulkActionsBar, ar as DataTableColumnHeader, or as DataTableExpandTrigger, sr as DataTablePagination, Sr as DataTableToolbar, Qn as DataTableViewOptions, wr as DateRangePicker, R as DescriptionList, Tr as DescriptionListActions, Er as DescriptionListItem, Dr as DescriptionListLabel, Or as DescriptionListValue, kr as DescriptionListValueDescription, H as Details, U as DetailsBody, W as DetailsClose, G as DetailsCloseButton, K as DetailsContent, q as DetailsDescription, J as DetailsFooter, Y as DetailsHeader, X as DetailsOverlay, Z as DetailsPortal, Q as DetailsTitle, $ as DetailsTrigger, Nr as Dialog, Pr as DialogClose, Fr as DialogFooterCarousel, Mt as DialogFooterDefault, Ir as DialogWelcome, Cn as DropdownMenu, wn as DropdownMenuCheckboxItem, Tn as DropdownMenuContent, En as DropdownMenuGroup, Dn as DropdownMenuItem, On as DropdownMenuLabel, kn as DropdownMenuPortal, An as DropdownMenuRadioGroup, jn as DropdownMenuRadioItem, Mn as DropdownMenuSeparator, Nn as DropdownMenuShortcut, Pn as DropdownMenuSub, Fn as DropdownMenuSubContent, In as DropdownMenuSubTrigger, Ln as DropdownMenuTrigger, Lr as Empty, Rr as EmptyActions, zr as EmptyDescription, Br as EmptyHeader, Vr as EmptyIcon, Hr as EmptyLinks, Wr as EmptyOverlay, Ur as EmptyTitle, ci as FUNNEL_CHART_DEFAULT_PALETTE, Jr as Field, Yr as FieldContent, Xr as FieldControl, Zr as FieldDescription, Qr as FieldError, $r as FieldGroup, ei as FieldLabel, ti as FieldLegend, ni as FieldSeparator, ri as FieldSet, ii as FieldTitle, si as FilterCards, cr as FilterChips, lr as FilterChipsList, ur as FilterChipsReset, _r as FilterSearch, vr as FilterSearchActions, yr as FilterSearchAppliedFilters, br as FilterSearchFilters, ai as FittedActions, hi as Form, li as FunnelChart, fi as Grid, mi as Histogram, z as Input, Ar as InputBox, Cr as InputDatePicker, xi as InputNumPicker, Si as InputOTP, Ci as InputPassword, L as InputSearch, A as InputSelect, j as InputSelectContent, Nt as InputSelectDescription, Pt as InputSelectError, Ft as InputSelectExpander, It as InputSelectField, Lt as InputSelectGroup, M as InputSelectItem, Rt as InputSelectLabel, zt as InputSelectSearch, N as InputSelectSection, P as InputSelectSectionLabel, Bt as InputSelectStatus, F as InputSelectTrigger, I as InputSelectValue, z as InputText, B as InputTextArea, wi as LineChart, Ei as Link, jr as Loading, Oi as Meter, Mi as Metric, Ni as NumberField, Pi as NumberFieldDecrement, Fi as NumberFieldGroup, Ii as NumberFieldIncrement, Li as NumberFieldInput, Ri as PageContent, Bi as PageHeader, Vi as PageHeaderActions, Hi as PageHeaderDescription, Ui as PageHeaderDescriptionRow, Wi as PageHeaderRow, Gi as PageHeaderTags, Ki as PageHeaderTitle, qi as Pagination, Ji as PaginationContent, Yi as PaginationEllipsis, Xi as PaginationItem, Zi as PaginationLink, Qi as PaginationNext, $i as PaginationPrevious, ea as PieChart, dr as Popover, fr as PopoverBody, pr as PopoverContent, mr as PopoverFooter, hr as PopoverPortal, gr as PopoverTrigger, he as PortalContainerProvider, na as Progress, ra as ProgressCircle, pe as ROOT_FONT_SIZE_PX, gi as RadarChart, vi as RadialBarChart, yi as Radio, bi as RadioGroup, Sa as ResizableHandle, Ca as ResizablePanel, wa as ResizablePanelGroup, aa as SankeyChart, oa as ScatterChart, sa as ScrollArea, ca as ScrollBar, L as Search, la as Section, ua as SectionContent, da as SectionHeader, A as Select, j as SelectContent, N as SelectGroup, P as SelectGroupLabel, M as SelectItem, F as SelectTrigger, I as SelectValue, qr as Separator, H as Sheet, U as SheetBody, W as SheetClose, G as SheetCloseButton, K as SheetContent, q as SheetDescription, ha as SheetDetails, J as SheetFooter, Y as SheetHeader, X as SheetOverlay, Z as SheetPortal, Q as SheetTitle, $ as SheetTrigger, Ta as SidebarPrimary, Ea as SidebarPrimaryCollapseTrigger, Da as SidebarPrimaryContent, Oa as SidebarPrimaryFooter, ka as SidebarPrimaryHeader, Aa as SidebarPrimaryMenu, ja as SidebarPrimaryMenuItem, Ma as SidebarPrimaryMenuItemExtras, Na as SidebarPrimarySection, Fa as SidebarSecondary, Ia as SidebarSecondaryCollapseTrigger, La as SidebarSecondaryContent, Ra as SidebarSecondaryFooter, za as SidebarSecondaryHeader, Ba as SidebarSecondaryMenu, Va as SidebarSecondaryMenuItem, Ha as SidebarSecondaryMenuItemExtras, Ua as SidebarSecondarySection, Wa as SidebarSecondarySectionLabel, ki as Skeleton, ga as Slider, _a as Stack, ya as Stepper, ba as StepperItem, qt as Switch, Rn as Table, zn as TableActionsCell, Bn as TableBody, Vn as TableCaption, Hn as TableCell, Un as TableFooter, Wn as TableHead, Gn as TableHeader, Yn as TablePagination, Kn as TableRow, qn as TableSelectCell, Jn as TableSettingsCell, Xn as TableViewOptions, qa as Tabs, Ja as TabsContent, Ya as TabsList, Xa as TabsTrigger, V as Tag, B as Textarea, lo as Timeline, uo as TimelineItem, fo as Timer, Za as Toaster, eo as Toggle, to as ToggleGroup, no as ToggleGroupItem, ro as Toolbar, io as ToolbarActionList, ao as ToolbarActions, d as Tooltip, f as TooltipContent, p as TooltipProvider, m as TooltipTrigger, po as Treemap, Ai as TrendIndicator, co as TruncateText, mo as WidgetPlaceholder, ho as WidgetPlaceholderAction, go as WidgetPlaceholderContent, _o as WidgetPlaceholderFooter, vo as WidgetPlaceholderHeader, yo as WidgetPlaceholderIcon, bo as WidgetPlaceholderImage, xo as WidgetPlaceholderText, So as WidgetPlaceholderTitle, Co as Wizard, wo as WizardBody, To as WizardHeader, Eo as WizardSubtitle, u as alertVariants, st as areaChartVariants, ft as avatarVariants, mt as barChartVariants, Et as buttonGroupItemVariants, Dt as buttonGroupVariants, Kt as buttonIconInputVariants, t as buttonIconVariants, kt as buttonMenuVariants, Ct as buttonVariants, en as cardFilterVariants, nn as cardSectionVariants, Qt as cardVariants, an as categoryBarVariants, dn as chipVariants, ee as cn, xn as composedChartVariants, oi as computeFittedVisibleCount, Ue as createTickFormatter, Gr as emptyOverlayIconVariants, Te as findDuplicateTones, We as formatCompactNumber, Ge as formatPercent, ui as funnelChartPercent, di as funnelChartVariants, C as getAppShellChatInitialLayout, er as getCellStyle, tr as getColumnWidth, nr as getPinnedStyle, me as getViewportWidth, pi as gridVariants, Zn as isBulkSelectionActive, Kr as labelClassName, Ti as lineChartVariants, Di as linkVariants, Ee as listPaletteChoices, De as listPaletteStops, Mr as loadingVariants, so as measureTextWidth, oo as middleTruncate, ie as parseTableUrlState, ta as pieChartVariants, ia as progressCircleVariants, _i as radarChartVariants, rr as reorderColumn, Ke as resolveAnimation, qe as resolveAxisDomain, Je as resolveBrushProps, Ye as resolveCartesianLabelPosition, Xe as resolveCategoryRange, Fe as resolveChartColors, Ze as resolveChartReferenceValue, Qe as resolveLabelFillClass, $e as resolveReferenceLineProps, et as resolveRotatedTickAnchor, Oe as resolveSeriesColor, tt as resolveXAxisHeight, nt as resolveXAxisTitle, rt as resolveYAxisTitle, fa as sectionVariants, ae as serializeTableUrlState, ma as sheetVariants, Pa as sidebarPrimaryMenuItemVariants, Ga as sidebarSecondaryMenuItemVariants, va as stackVariants, xa as stepperItemVariants, zi as tagVariants, it as toLabelFormatter, at as toReferenceLineList, Qa as toast, $a as toastVariants, ji as trendIndicatorVariants, we as useAccordionContainerContext, w as useAppShellChatInitialLayout, xr as useFilterSearchFilters, Vt as useInputSelectFilter, ne as useIntersectionObserver, ge as usePortalContainer, pa as useSectionContext, te as useSortState, oe as useTableUrlState, se as useWizard };
|
|
@@ -80,6 +80,13 @@ export type ChartLegendContentProps = {
|
|
|
80
80
|
* stringified with `String()`.
|
|
81
81
|
*/
|
|
82
82
|
valueFormatter?: (value: string | number) => string;
|
|
83
|
+
/**
|
|
84
|
+
* Extra Tailwind class(es) applied to the right-hand value in a list entry,
|
|
85
|
+
* merged on top of the default colour (`text-[var(--ui-text-on-surface-link-idle)]`).
|
|
86
|
+
* Pass a replacement colour class to override the default; other utilities
|
|
87
|
+
* (e.g. `tabular-nums`) are additive and leave the default colour in place.
|
|
88
|
+
*/
|
|
89
|
+
valueClassName?: string;
|
|
83
90
|
};
|
|
84
91
|
export interface ChartContainerProps extends React.ComponentProps<'div'> {
|
|
85
92
|
/**
|
|
@@ -110,5 +117,5 @@ declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
|
|
|
110
117
|
export type ChartTooltipContentType = React.ComponentProps<typeof ChartTooltip>['content'];
|
|
111
118
|
declare function ChartTooltipContent({ active, payload, label, className, hideLabel, hideIndicator, labelFormatter, formatter, labelClassName, color, nameKey, labelKey, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
|
|
112
119
|
declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
|
|
113
|
-
declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, config: configFromProps, variant, valueKey, valueFormatter, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
|
|
120
|
+
declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, config: configFromProps, variant, valueKey, valueFormatter, valueClassName, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
|
|
114
121
|
export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };
|