@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/src/components/ui/area-chart/area-chart.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartConfig, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
+import { ChartConfig, ChartPalette, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const areaChartVariants: (props?: ({
     layout?: "single" | "stacked" | null | undefined;
@@ -34,12 +34,17 @@ export interface AreaChartAreaSettings {
     labelPosition?: CartesianLabelPosition;
 }
 export interface AreaChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof areaChartVariants>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
+    /**
+     * The dataviz palette this chart's series are painted from. Series that
+     * state no `color` of their own take a stop of it. See `ChartPalette`.
+     */
+    palette?: ChartPalette;
     /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the area unless `connectNulls`). */
     data: ReadonlyArray<Record<string, string | number | null>>;
     /**
-     * Per-series map of `label` / `color` (imported from the shared `Chart`
-     * primitives). Series colors are caller-supplied — reference an existing
-     * semantic `--ui-*` token; there is no chart palette tier yet.
+     * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`
+     * primitives). Series take their colour from the container's `palette`; each
+     * entry maps a key to a `label` and an optional `tone`.
      */
     config: ChartConfig;
     /** Series to plot — one `<Area>` per key. Each must exist in `config` and in every data row. */

package/dist/src/components/ui/avatar/avatar.d.ts

@@ -2,7 +2,7 @@ import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const avatarVariants: (props?: ({
-    color?: "blue" | "gray" | "green" | "orange" | "red" | "teal" | "violet" | "yellow" | null | undefined;
+    color?: "blue" | "green" | "gray" | "orange" | "red" | "teal" | "violet" | "yellow" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
 /** The avatar image; hidden by Base UI until it loads, revealing the fallback. */

package/dist/src/components/ui/bar-chart/bar-chart.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { BarShapeProps } from 'recharts/types/cartesian/Bar';
-import { ChartLegend, ChartTooltip, ChartConfig, ChartReferenceLine, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCategoryRange, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
+import { ChartLegend, ChartTooltip, ChartConfig, ChartPalette, ChartReferenceLine, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCategoryRange, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const barChartVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
@@ -118,12 +118,17 @@ export declare function createTrackShape({ inRange, trackFill, paint, }: {
     paint?: BarPaintOverride;
 }): ({ background: track, index: row, ...bar }: BarShapeProps) => import("react/jsx-runtime").JSX.Element;
 export interface BarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof barChartVariants>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
+    /**
+     * The dataviz palette this chart's series are painted from. Series that
+     * state no `color` of their own take a stop of it. See `ChartPalette`.
+     */
+    palette?: ChartPalette;
     /** Row-per-category data. Each object holds the category key + one numeric field per series. */
     data: ReadonlyArray<Record<string, string | number>>;
     /**
-     * Per-series map of `label` / `color` (imported from the shared `Chart`
-     * primitives). Series colors are caller-supplied — reference an existing
-     * semantic `--ui-*` token; there is no chart palette tier yet.
+     * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`
+     * primitives). Series take their colour from the container's `palette`; each
+     * entry maps a key to a `label` and an optional `tone`.
      */
     config: ChartConfig;
     /** Series to plot — one `<Bar>` per key. Each must exist in `config` and in every data row. */

package/dist/src/components/ui/category-bar/category-bar.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartConfig } from '../chart';
+import { ChartConfig, ChartPalette } from '../chart';
 import * as React from 'react';
 declare const categoryBarVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -18,16 +18,22 @@ export interface CategoryBarTooltipContext extends CategoryBarSegment {
     percent: number;
     /**
      * CSS color reference for the segment — the `var(--color-<key>)` bridge, which
-     * resolves the config entry's `color` or its per-theme `theme` value. Usable
-     * anywhere a CSS color is (e.g. a `style` background); not a literal value.
+     * resolves the palette stop assigned to this segment. Usable anywhere a CSS
+     * color is (e.g. a `style` background); not a literal value.
      */
     color: string;
 }
 export interface CategoryBarProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof categoryBarVariants> {
     /** Ordered segments (left → right). Widths are proportional to `value`. */
     data: ReadonlyArray<CategoryBarSegment>;
-    /** Maps each segment `key` to a `label` and `color` (an existing `--ui-*` token). */
+    /** Maps each segment `key` to a `label` and, optionally, a palette `tone`. */
     config: ChartConfig;
+    /**
+     * The dataviz palette the segments are painted from. Segments take a stop of
+     * it in the palette's defined order, or the one their `tone` names. Defaults
+     * to `categorical`.
+     */
+    palette?: ChartPalette;
     /** Show the legend below the bar (color dot + label + value + %). */
     showLegend?: boolean;
     /** Show a hover tooltip per segment (dot + label + value + %). */

package/dist/src/components/ui/chart/__stories__/palette-control.d.ts

@@ -0,0 +1,48 @@
+export declare const paletteArgTypes: {
+    palette: {
+        name: string;
+        description: string;
+        control: {
+            type: "select";
+        };
+        options: string[];
+        mapping: {
+            categorical: {
+                type: "categorical";
+            };
+            'sequential-blue': {
+                type: "sequential";
+                ramp: "blue";
+            };
+            'sequential-teal': {
+                type: "sequential";
+                ramp: "teal";
+            };
+            'sequential-orange': {
+                type: "sequential";
+                ramp: "orange";
+            };
+            'sequential-violet': {
+                type: "sequential";
+                ramp: "violet";
+            };
+            'diverging-blue-orange': {
+                type: "diverging";
+                pair: "blue-orange";
+            };
+            'diverging-teal-violet': {
+                type: "diverging";
+                pair: "teal-violet";
+            };
+            status: {
+                type: "status";
+            };
+        };
+        table: {
+            category: string;
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+};

package/dist/src/components/ui/chart/__tests__/chart-palette.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/ui/chart/chart-palette.d.ts

@@ -0,0 +1,128 @@
+/** A sequential ramp: one hue, eight stops from lightest to darkest. */
+export type ChartSequentialRamp = 'blue' | 'teal' | 'orange' | 'violet';
+/** A diverging pair: two hues meeting at a pale midpoint. */
+export type ChartDivergingPair = 'blue-orange' | 'teal-violet';
+/**
+ * A semantic status tone. Ordered by severity in the product's picker:
+ * danger (red) · critical (orange) · warning (yellow) · success (green) ·
+ * info (blue) · neutral (gray). Note that `critical` is orange and ranks
+ * *below* `danger` — that is what the tokens say, across the whole semantic
+ * tier, not a typo here.
+ */
+export type ChartStatusTone = 'danger' | 'critical' | 'warning' | 'success' | 'info' | 'neutral';
+/** Which palette a chart's series are painted from. */
+export type ChartPalette = {
+    type: 'categorical';
+} | {
+    type: 'sequential';
+    ramp: ChartSequentialRamp;
+} | {
+    type: 'diverging';
+    pair: ChartDivergingPair;
+} | {
+    type: 'status';
+};
+/**
+ * How one series picks its color out of the active palette.
+ *
+ * Only the two palettes whose colors are independent of each other accept an
+ * override:
+ *
+ * - `categorical` — `{ slot }` picks one of the 16 hues.
+ * - `status` — `{ status }` names a tone.
+ *
+ * `sequential` and `diverging` accept none. Their stops are a *ramp*: the
+ * colors mean something only in relation to each other, so letting one series
+ * jump to an arbitrary stop would break the reading order the ramp exists to
+ * convey. The product's widget editor agrees — it offers a ramp/pair picker
+ * and no per-series control. An override passed under those palettes is
+ * ignored, with a dev warning.
+ *
+ * Neither form can express a color from outside the palette — that is the point.
+ */
+export type ChartSeriesTone = {
+    slot: number;
+    status?: never;
+    sameAs?: never;
+} | {
+    slot?: never;
+    status: ChartStatusTone;
+    sameAs?: never;
+}
+/**
+ * Paint whatever the series under this key paints, under any palette. For a
+ * twin series that is the *same* metric drawn differently — a forecast tail
+ * continuing its actuals, a projection band behind its bars — where two hues
+ * would read as two metrics. Resolved by `resolveChartColors`, which is the
+ * only place the whole config is in view.
+ */
+ | {
+    slot?: never;
+    status?: never;
+    sameAs: string;
+};
+/** The 16 categorical hues, in the order the product's picker lists them. */
+export declare const CHART_CATEGORICAL_TOKENS: readonly string[];
+/** Each sequential ramp's eight stops, lightest (1) to darkest (8). */
+export declare const CHART_SEQUENTIAL_TOKENS: Readonly<Record<ChartSequentialRamp, readonly string[]>>;
+/** Each diverging pair's six stops, one hue's strongest through to the other's. */
+export declare const CHART_DIVERGING_TOKENS: Readonly<Record<ChartDivergingPair, readonly string[]>>;
+/** The six semantic status tones. */
+export declare const CHART_STATUS_TOKENS: Readonly<Record<ChartStatusTone, string>>;
+/** The default palette — what a chart paints with when none is chosen. */
+export declare const CHART_DEFAULT_PALETTE: ChartPalette;
+/**
+ * The stops a palette offers, in picker order. `status` has named tones rather
+ * than positional stops, so it returns an empty list — use
+ * `CHART_STATUS_TOKENS` for those.
+ */
+export declare function listPaletteStops(palette: ChartPalette): readonly string[];
+/**
+ * Every choice a per-series picker may offer for this palette — what the
+ * product's widget editor renders in its dropdown. Pure, so the form can build
+ * its UI without re-deriving the palette.
+ *
+ * Empty for `sequential` and `diverging`: those have no per-series control, so
+ * a form driven by this function renders no picker for them, which is exactly
+ * the design.
+ */
+export declare function listPaletteChoices(palette: ChartPalette): readonly ChartSeriesTone[];
+export interface ResolveSeriesColorOptions {
+    /** This series' position among the chart's series. */
+    index: number;
+    /** This series' explicit choice within the palette, if it may make one. */
+    tone?: ChartSeriesTone;
+}
+/**
+ * The color one series paints with.
+ *
+ * Series walk the palette **in its defined order** — series 1 takes stop 1,
+ * series 2 takes stop 2, and so on, wrapping once the stops run out. The order
+ * is the design's, not something derived here: no re-ordering, no spreading
+ * across a ramp, no skipping stops.
+ *
+ * On top of that, `categorical` and `status` honour a per-series override
+ * (see `ChartSeriesTone`); `sequential` and `diverging` do not.
+ *
+ * Always returns a token from the active palette. A `slot` out of range is
+ * clamped (with a dev warning) rather than passed through, so switching
+ * palettes can never leave a series painting off-palette.
+ */
+export declare function resolveSeriesColor(palette: ChartPalette, { index, tone }: ResolveSeriesColorOptions): string;
+/**
+ * Series that would paint the same color — what the widget editor's "duplicate
+ * color" warning is keyed to. Returns one group per collision, each holding the
+ * colliding series' keys in input order.
+ *
+ * Only series that named a `tone` can collide: automatic assignment is
+ * injective by construction (up to `categorical`'s 16-series wrap).
+ *
+ * Pass the chart's `config` to exclude intentional aliases: a series with
+ * `tone: { sameAs }` shares its target's colour on purpose, so it is not a
+ * collision. Without the config every alias reads as a duplicate.
+ */
+export declare function findDuplicateTones(colors: Readonly<Record<string, string>>, config?: Readonly<Record<string, {
+    tone?: {
+        sameAs?: string;
+    };
+}>>): string[][];

package/dist/src/components/ui/chart/chart.d.ts

@@ -2,24 +2,43 @@ import { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
 import { NameType, Payload, ValueType } from 'recharts/types/component/DefaultTooltipContent';
 import { Props as LegendProps } from 'recharts/types/component/Legend';
 import { TooltipContentProps } from 'recharts/types/component/Tooltip';
+import { ChartPalette, ChartSeriesTone } from './chart-palette';
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
-declare const THEMES: {
-    readonly light: "";
-    readonly dark: "[data-theme='dark']";
-};
 export type ChartConfig = {
     [k in string]: {
         label?: React.ReactNode;
         icon?: React.ComponentType;
-    } & ({
-        color?: string;
-        theme?: never;
-    } | {
-        color?: never;
-        theme: Record<keyof typeof THEMES, string>;
-    });
+        /**
+         * Which stop of the container's `palette` this series paints with. Left
+         * unset, it is assigned from the series' position. See `ChartSeriesTone`.
+         *
+         * There is deliberately no free-form `color` here: every series colour
+         * comes from the chart's palette, so a chart cannot paint a hue the design
+         * system does not define. Pick a different palette on `ChartContainer`, or
+         * a different stop of it with this.
+         */
+        tone?: ChartSeriesTone;
+    };
+};
+/**
+ * A `ChartConfig` with every series' palette colour filled in. This is what the
+ * container puts on the context, so the plot, the tooltip rows and the legend
+ * markers all read the same resolved colour.
+ */
+export type ResolvedChartConfig = {
+    [k in string]: ChartConfig[string] & {
+        color: string;
+    };
 };
+/**
+ * Resolve each series' colour out of `palette` — in the palette's defined
+ * order, honouring any `tone` a series named.
+ *
+ * Exported for tests and for the widget editor, which needs the same resolved
+ * map to detect duplicate colours (`findDuplicateTones`) without re-deriving it.
+ */
+export declare function resolveChartColors(config: ChartConfig, palette: ChartPalette): ResolvedChartConfig;
 export type ChartTooltipContentProps = Partial<TooltipContentProps<ValueType, NameType>> & {
     className?: string;
     hideLabel?: boolean;
@@ -44,20 +63,52 @@ export type ChartLegendContentProps = {
      * legend out inside its plot (see `Treemap`).
      */
     config?: ChartConfig;
+    /**
+     * `default` — the current horizontal wrap layout (one row of chips).
+     * `list` — a vertical list where each entry is `[dot] [label flex-1] [value]`,
+     * matching the Figma donut/radial widget legend. Use alongside a manually-built
+     * `payload` passed from outside the chart's recharts composition.
+     */
+    variant?: 'default' | 'list';
+    /**
+     * When `variant="list"`, the field on `payload[i].payload` to display as the
+     * right-hand value. Typically the chart's `dataKey` (the numeric series field).
+     */
+    valueKey?: string;
+    /**
+     * Format the value shown in each list entry. When omitted the raw value is
+     * stringified with `String()`.
+     */
+    valueFormatter?: (value: string | number) => string;
 };
 export interface ChartContainerProps extends React.ComponentProps<'div'> {
+    /**
+     * The series this chart draws, keyed by data field.
+     *
+     * Declare exactly what the chart plots. A stop is assigned by an entry's
+     * position here, not by which series end up rendered, so an entry for a
+     * series the chart doesn't draw still consumes a colour and shifts the ones
+     * that follow it. (That is deliberate: a series then keeps its colour when a
+     * sibling is toggled off, instead of the whole chart recolouring.)
+     */
     config: ChartConfig;
+    /**
+     * The dataviz palette this chart's series are painted from. Series take a
+     * stop of it in the palette's defined order, or the one their `tone` names.
+     * Defaults to `categorical` — there is no "no palette" state.
+     */
+    palette?: ChartPalette;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
 }
-declare function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
-declare const ChartStyle: ({ id, config }: {
+declare function ChartContainer({ id, className, children, config, palette, ...props }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
+declare const ChartStyle: ({ id, config, }: {
     id: string;
-    config: ChartConfig;
+    config: ResolvedChartConfig;
 }) => import("react/jsx-runtime").JSX.Element | null;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
 /** The `content` a caller passes to override the default tooltip (recharts' `Tooltip['content']`). */
 export type ChartTooltipContentType = React.ComponentProps<typeof ChartTooltip>['content'];
 declare function ChartTooltipContent({ active, payload, label, className, hideLabel, hideIndicator, labelFormatter, formatter, labelClassName, color, nameKey, labelKey, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
 declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, config: configFromProps, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, config: configFromProps, variant, valueKey, valueFormatter, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/src/components/ui/chart/index.d.ts

@@ -1,4 +1,6 @@
-export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, } from './chart';
-export type { ChartConfig, ChartContainerProps, ChartTooltipContentProps, ChartLegendContentProps, ChartTooltipContentType, } from './chart';
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, resolveChartColors, } from './chart';
+export type { ChartConfig, ResolvedChartConfig, ChartContainerProps, ChartTooltipContentProps, ChartLegendContentProps, ChartTooltipContentType, } from './chart';
+export { CHART_CATEGORICAL_TOKENS, CHART_SEQUENTIAL_TOKENS, CHART_DIVERGING_TOKENS, CHART_STATUS_TOKENS, CHART_DEFAULT_PALETTE, listPaletteStops, listPaletteChoices, resolveSeriesColor, findDuplicateTones, } from './chart-palette';
+export type { ChartPalette, ChartSeriesTone, ChartSequentialRamp, ChartDivergingPair, ChartStatusTone, ResolveSeriesColorOptions, } from './chart-palette';
 export { formatCompactNumber, formatPercent, createTickFormatter, resolveAxisDomain, resolveRotatedTickAnchor, resolveXAxisHeight, resolveXAxisTitle, resolveYAxisTitle, resolveCategoryRange, resolveAnimation, toLabelFormatter, resolveLabelFillClass, resolveCartesianLabelPosition, resolveBrushProps, resolveChartReferenceValue, resolveReferenceLineProps, toReferenceLineList, CHART_REFERENCE_LINE_STROKE, CHART_LABEL_MARGIN, CHART_LABEL_FILL_CLASS, CHART_LABEL_FILL_ON_SERIES_CLASS, CHART_LABEL_FONT_SIZE, CHART_BRUSH_HEIGHT, CHART_BRUSH_ARIA_LABEL, } from './chart-format';
 export type { TickFormatter, ChartCurveType, ChartReferenceLine, ChartReferenceLabelPosition, CartesianChartProps, ChartCategoryRange, ChartYAxisTarget, SecondaryYAxisProps, ChartAnimationProps, ChartAnimationEasing, ResolvedAnimation, ChartDataLabelProps, CartesianLabelPosition, PolarLabelPosition, ChartLabelPosition, ChartBrushProps, ResolvedBrush, } from './chart-format';

package/dist/src/components/ui/chart-state/chart-state-illustrations.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/** The chart types the design draws an empty state for. */
+export type ChartStateVariant = 'area' | 'bar' | 'line' | 'donut' | 'radial' | 'funnel' | 'radar' | 'sankey' | 'scatter' | 'treemap' | 'table' | 'text';
+export declare const CHART_STATE_ILLUSTRATIONS: Record<ChartStateVariant, (props: {
+    className?: string;
+}) => React.ReactElement>;

package/dist/src/components/ui/chart-state/chart-state.d.ts

@@ -1,9 +1,20 @@
+import { ChartStateVariant } from './chart-state-illustrations';
 import * as React from 'react';
 export interface ChartStateProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
     /** Which placeholder to show. Drives the leading glyph and default label. */
     state: 'loading' | 'empty' | 'error';
-    /** Overrides the default label for the current `state`. */
-    message?: string;
+    /**
+     * Which chart the slot holds. `empty` then draws that type's silhouette
+     * instead of the generic inbox glyph — the design defines one per chart type.
+     * Ignored by `loading` and `error`, which share one treatment.
+     */
+    variant?: ChartStateVariant;
+    /**
+     * Text shown below the illustration or glyph. Defaults to `"Data is
+     * loading…"` / `"No data found"` / `"Something went wrong"` based on
+     * `state`. Pass a value to override for any state.
+     */
+    description?: React.ReactNode;
     /** Trailing action (e.g. a "Try again" button) — shown for `error` only. */
     action?: React.ReactNode;
 }

package/dist/src/components/ui/chart-state/index.d.ts

@@ -1 +1,2 @@
 export { ChartState, type ChartStateProps } from './chart-state';
+export { CHART_STATE_ILLUSTRATIONS, type ChartStateVariant, } from './chart-state-illustrations';

package/dist/src/components/ui/chart-widget/chart-widget.d.ts

@@ -0,0 +1,64 @@
+import { useRender } from '@base-ui/react/use-render';
+import { CardHeaderProps } from '../card';
+import { ChartStateProps, ChartStateVariant } from '../chart-state';
+import * as React from 'react';
+export interface ChartWidgetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition), forwarded to `Card`. This is how a dashboard gives each
+     * widget a landmark role — `render={<section aria-label="Sessions" />}` — the
+     * one thing the widget can't infer for itself.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Which chart the widget holds. Only used while `state="empty"`, to pick the
+     * silhouette the design draws for that chart type — the widget itself needs
+     * no size, so this carries nothing else.
+     */
+    variant?: ChartStateVariant;
+    /**
+     * The card header, forwarded verbatim to `CardHeader`. Everything that
+     * component takes works here — `title`, `actions` (the ⋯ menu), `extras` (a
+     * filter chip), `isDraggable`, `hasRename`, … Omit it for a header-less
+     * widget.
+     */
+    header?: CardHeaderProps;
+    /**
+     * The readout beside or above the plot — typically a `Metric`.
+     *
+     * - `'vertical'` (default) — metric above the plot, full width. The metric
+     *   takes its natural height; the plot fills the rest of the card body.
+     * - `'horizontal'` — metric and plot side by side, each `flex-1`. Use for
+     *   compact widgets (sm/288px) where vertical space is at a premium.
+     *
+     * Figma: vertical → `8174:22335`, horizontal → `8982:31681`.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * The readout beside or above the plot — typically a `Metric`. Layout is
+     * controlled by `orientation`.
+     */
+    metric?: React.ReactNode;
+    /**
+     * Show a placeholder instead of the plot, for a widget whose data isn't there
+     * yet. `error` also gives the card its error border.
+     */
+    state?: ChartStateProps['state'];
+    /**
+     * Text below the placeholder illustration or glyph — defaults to
+     * `"Data is loading…"` / `"No data found"` / `"Something went wrong"`.
+     */
+    stateDescription?: ChartStateProps['description'];
+    /** Trailing action on the `error` placeholder — e.g. a "Try again" button. */
+    stateAction?: ChartStateProps['action'];
+    /**
+     * Class for the card body. Rarely needed — the body already fills the card.
+     * Use it where nothing above gives a height and the content can't either, e.g.
+     * a placeholder-only widget outside a sized grid cell.
+     */
+    bodyClassName?: string;
+    /** The chart. Replaced by the placeholder while `state` is set. */
+    children?: React.ReactNode;
+}
+declare const ChartWidget: React.ForwardRefExoticComponent<ChartWidgetProps & React.RefAttributes<HTMLDivElement>>;
+export { ChartWidget };

package/dist/src/components/ui/chart-widget/index.d.ts

@@ -0,0 +1 @@
+export { ChartWidget, type ChartWidgetProps } from './chart-widget';

package/dist/src/components/ui/composed-chart/composed-chart.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartConfig, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCategoryRange, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition, ChartYAxisTarget, SecondaryYAxisProps } from '../chart';
+import { ChartConfig, ChartPalette, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCategoryRange, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition, ChartYAxisTarget, SecondaryYAxisProps } from '../chart';
 import * as React from 'react';
 declare const composedChartVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
@@ -35,8 +35,8 @@ export interface ComposedSeries {
      */
     yAxis?: ChartYAxisTarget;
     /**
-     * Paint for this series, overriding its `config` color. Reference an existing
-     * semantic `--ui-*` token; there is no chart palette tier yet.
+     * Paint for this series, overriding the stop of the container's `palette` it
+     * would otherwise take. Reference an existing semantic `--ui-*` token.
      */
     color?: string;
     /**
@@ -108,13 +108,18 @@ export interface ComposedChartReferenceArea extends ChartCategoryRange {
     label?: string;
 }
 export interface ComposedChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof composedChartVariants>, CartesianChartProps, SecondaryYAxisProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
+    /**
+     * The dataviz palette this chart's series are painted from. Series that
+     * state no `color` of their own take a stop of it. See `ChartPalette`.
+     */
+    palette?: ChartPalette;
     /** Row-per-category data. Each object holds `xKey` + one numeric field per series (`null` breaks a line/area unless `connectNulls`). */
     data: ReadonlyArray<Record<string, string | number | null>>;
     /**
-     * Per-series map of `label` / `color`, keyed by `series[].key` (imported from
-     * the shared `Chart` primitives). Turned into `--color-<key>` custom
-     * properties. Colors are caller-supplied — reference an existing semantic
-     * `--ui-*` token; there is no chart palette tier yet.
+     * Per-series map of `label` / `icon` / `tone`, keyed by `series[].key`
+     * (imported from the shared `Chart` primitives). Turned into `--color-<key>`
+     * custom properties. Series take their colour from the container's `palette`;
+     * each entry maps a key to a `label` and an optional `tone`.
      */
     config: ChartConfig;
     /**

package/dist/src/components/ui/confidence-cone/confidence-cone.d.ts

@@ -1,4 +1,4 @@
-import { ChartTooltip, ChartConfig, CartesianChartProps, ChartAnimationProps } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette, CartesianChartProps, ChartAnimationProps } from '../chart';
 import * as React from 'react';
 /**
  * Drop every synthetic cone-band range series from a recharts tooltip/legend
@@ -82,6 +82,11 @@ export interface ConfidenceConeReferenceLine {
  * and a story's. Not re-exported from `index.ts`; not part of the public API.
  */
 export interface ConfidenceConeBaseProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps, ChartAnimationProps {
+    /**
+     * The dataviz palette this chart's series are painted from. Series that
+     * state no `color` of their own take a stop of it. See `ChartPalette`.
+     */
+    palette?: ChartPalette;
     /**
      * Row-per-point data — the shared x dimension plus each series' actual /
      * forecast / bound fields. Rows are naturally sparse (a point has either an
@@ -91,10 +96,10 @@ export interface ConfidenceConeBaseProps extends Omit<React.ComponentProps<'div'
      */
     data: ReadonlyArray<Record<string, string | number | null | undefined>>;
     /**
-     * Per-series map of `label` / `color` for the actual + forecast lines
-     * (imported from the shared `Chart` primitives). Colors are caller-supplied —
-     * reference an existing semantic `--ui-*` token; there is no chart palette tier
-     * yet. Each metric renders in one hue: its cone band and forecast line both
+     * Per-series map of `label` / `icon` / `tone` for the actual + forecast lines
+     * (imported from the shared `Chart` primitives). Series take their colour from
+     * the container's `palette`; each entry maps a key to a `label` and an optional
+     * `tone`. Each metric renders in one hue: its cone band and forecast line both
      * reuse its actual series' color — actual and forecast differ by line style,
      * not hue.
      */

package/dist/src/components/ui/empty-overlay/empty-overlay.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const emptyOverlayIconVariants: (props?: ({
-    color?: "blue" | "gray" | "green" | "orange" | "red" | "teal" | "violet" | "yellow" | null | undefined;
+    color?: "blue" | "green" | "gray" | "orange" | "red" | "teal" | "violet" | "yellow" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface EmptyOverlayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'color' | 'children'>, VariantProps<typeof emptyOverlayIconVariants> {
     /** Icon rendered in the colored badge (e.g. an `icons-react` glyph at 24px). */

package/dist/src/components/ui/funnel-chart/funnel-chart.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartAnimationProps, ChartConfig, TickFormatter } from '../chart';
+import { ChartTooltip, ChartAnimationProps, ChartConfig, ChartPalette, TickFormatter } from '../chart';
 import * as React from 'react';
 declare const funnelChartVariants: (props?: ({
     lastShape?: "triangle" | "rectangle" | null | undefined;
@@ -120,13 +120,19 @@ export declare function funnelChartLabelText(options: {
     percentFormatter?: TickFormatter;
 }): string;
 export interface FunnelChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof funnelChartVariants>, ChartAnimationProps {
+    /**
+     * The dataviz palette this chart's series are painted from. Series that
+     * state no `color` of their own take a stop of it. See `ChartPalette`.
+     */
+    palette?: ChartPalette;
     /** Row-per-stage data. Each object holds the stage's `nameKey` label + its `dataKey` numeric value. */
     data: ReadonlyArray<Record<string, string | number>>;
     /**
-     * Per-stage map of `label` / `color`, keyed by the stage's `nameKey` value
-     * (imported from the shared `Chart` primitives). Turned into `--color-<name>`
-     * custom properties. Colors are caller-supplied — reference an existing
-     * semantic `--ui-*` token; there is no chart palette tier yet.
+     * Per-stage map of `label` / `icon` / `tone`, keyed by the stage's `nameKey`
+     * value (imported from the shared `Chart` primitives). Turned into
+     * `--color-<name>` custom properties. Series take their colour from the
+     * container's `palette`; each entry maps a key to a `label` and an optional
+     * `tone`.
      */
     config: ChartConfig;
     /** Numeric field that sizes each stage (the funnel narrows as it drops). */