@acronis-platform/ui-react 2.0.0 → 4.0.0

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/dialog/dialog.d.ts

@@ -2,7 +2,7 @@ import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const dialogContentVariants: (props?: ({
-    size?: "sm" | "large" | null | undefined;
+    size?: "large" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const DialogRoot: typeof DialogPrimitive.Root;
 declare const DialogTrigger: DialogPrimitive.Trigger;

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

@@ -0,0 +1,20 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const emptyOverlayIconVariants: (props?: ({
+    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). */
+    icon?: React.ReactNode;
+    /** The empty-state headline. */
+    title: React.ReactNode;
+    /** Supporting copy shown under the title. */
+    description?: React.ReactNode;
+}
+/**
+ * A full-bleed empty-state overlay: a colored icon badge over a centered
+ * title/description, on a fade-to-solid backdrop. Size it via the parent
+ * (e.g. `absolute inset-0`) — the component fills whatever box it's given.
+ */
+declare const EmptyOverlay: React.ForwardRefExoticComponent<EmptyOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export { EmptyOverlay, emptyOverlayIconVariants };

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

@@ -0,0 +1,2 @@
+export { EmptyOverlay, emptyOverlayIconVariants } from './empty-overlay';
+export type { EmptyOverlayProps } from './empty-overlay';

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). */

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const gridVariants: (props?: ({
-    cols?: 1 | 2 | 6 | 3 | 4 | 12 | null | undefined;
+    cols?: 1 | 2 | 3 | 6 | 4 | 12 | null | undefined;
     gap?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {

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

@@ -1,4 +1,4 @@
-import { ChartConfig, CartesianChartProps, ChartAnimationProps } from '../chart';
+import { ChartConfig, ChartPalette, CartesianChartProps, ChartAnimationProps } from '../chart';
 import * as React from 'react';
 export interface HistogramBin {
     /** Lower bound of the bin (inclusive). */
@@ -19,12 +19,18 @@ export interface HistogramBin {
  */
 export declare function computeHistogramBins(values: ReadonlyArray<number>, binCount: number, domain?: [number, number]): HistogramBin[];
 export interface HistogramProps 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;
     /** Raw continuous samples to bin (non-finite values are ignored). */
     values: ReadonlyArray<number>;
     /**
-     * Single-series map of `label` / `color`, keyed by `dataKey` (imported from
-     * the shared `Chart` primitives). Color is caller-supplied — reference an
-     * existing semantic `--ui-*` token; there is no chart palette tier yet.
+     * Single-series map of `label` / `icon` / `tone`, keyed by `dataKey` (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`.
      */
     config: ChartConfig;
     /** `config` key that colors + labels the frequency bars. */

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

@@ -1 +1 @@
-export { Label, labelClassName, type LabelProps } from './label';
+export { labelClassName } from './label';

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

@@ -1,5 +1 @@
-import * as React from 'react';
-declare const labelClassName = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
-export type LabelProps = React.ComponentPropsWithoutRef<'label'>;
-declare const Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
-export { Label, labelClassName };
+export declare const labelClassName = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";

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

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartConfig, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const lineChartVariants: (props?: ({
     curve?: "step" | "linear" | "monotone" | "natural" | "basis" | "stepBefore" | "stepAfter" | null | undefined;
@@ -55,12 +55,17 @@ export interface LineChartLineSettings {
     labelPosition?: CartesianLabelPosition;
 }
 export interface LineChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof lineChartVariants>, 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 line 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 `<Line>` per key. Each must exist in `config` and in every data row. */

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

@@ -1,12 +1,5 @@
-import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-declare const metricVariants: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
-    status?: "info" | "success" | "warning" | "critical" | "danger" | "neutral" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface MetricProps extends React.ComponentProps<'div'>, VariantProps<typeof metricVariants> {
-    /** What the value measures — e.g. "Gross margin". Rendered as an uppercase note heading. */
-    label: React.ReactNode;
+export interface MetricProps extends React.ComponentProps<'div'> {
     /**
      * The primary value, already formatted (`73`, `"94%"`, `"$72K"`, `"2.8"`).
      * The kit does not format currency, units, or decimals.
@@ -14,15 +7,21 @@ export interface MetricProps extends React.ComponentProps<'div'>, VariantProps<t
     value: React.ReactNode;
     /** Unit shown next to the value at a smaller, muted size — e.g. `"%"`, `"hours"`. */
     unit?: React.ReactNode;
-    /** A top-right caption aligned with the label — e.g. a timeframe `Tag` ("Last 30 days"). */
+    /** Caption at the right end of the stats row — e.g. a timeframe `Tag`. */
     caption?: React.ReactNode;
-    /** A trend slot on the right of the value — typically a `TrendIndicator`. */
-    trend?: React.ReactNode;
-    /** Secondary line below the value — e.g. "Target: 99%". */
+    /**
+     * Trend direction — renders a `TrendIndicator` on its own row below the value.
+     * Sentiment follows direction: `up` → positive, `down` → negative, `stable` → neutral.
+     * Pair with `trendValue` for the change text.
+     */
+    trend?: 'up' | 'down' | 'stable';
+    /** Change text shown next to the trend arrow — e.g. `"20%"`, `"+3"`. Requires `trend`. */
+    trendValue?: React.ReactNode;
+    /** Secondary line below the trend — e.g. "Target: 99%". */
     supportingText?: React.ReactNode;
     /** A small badge / metadata slot beside the value — e.g. a `Tag`. */
     badge?: React.ReactNode;
-    /** Icon rendered in a status-tinted badge before the value. */
+    /** Icon rendered in a status-info-tinted badge before the value. */
     icon?: React.ReactNode;
     /** Contextual hint on an info affordance next to the label (Base UI Tooltip). */
     tooltip?: React.ReactNode;
@@ -30,7 +29,7 @@ export interface MetricProps extends React.ComponentProps<'div'>, VariantProps<t
     tooltipLabel?: string;
     /** Show a skeleton in place of the value, preserving its space. */
     loading?: boolean;
-    /** Card body below the header — e.g. a chart, a Separator, an insight line. */
+    /** Content below the stats strip — e.g. a chart, a `Separator`, an insight line. */
     children?: React.ReactNode;
 }
 declare const Metric: React.ForwardRefExoticComponent<Omit<MetricProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartConfig, ChartTooltipContentProps, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette, ChartTooltipContentProps, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
 import * as React from 'react';
 declare const pieChartVariants: (props?: ({
-    shape?: "pie" | "donut" | null | undefined;
+    shape?: "donut" | "pie" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /** Row-per-slice datum: the `nameKey` label plus the `dataKey` value. */
 type PieChartDatum = Record<string, string | number>;
@@ -81,13 +81,19 @@ export interface PieChartCenterLabel {
     label?: string | number;
 }
 export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof pieChartVariants>, ChartAnimationProps, 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-slice data. Each object holds the slice's `nameKey` label + its `dataKey` numeric value. */
     data: ReadonlyArray<PieChartDatum>;
     /**
-     * Per-slice map of `label` / `color`, keyed by the slice'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-slice map of `label` / `icon` / `tone`, keyed by the slice'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 slice. */
@@ -136,8 +142,11 @@ export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'childr
     sliceSettings?: Record<string, PieChartSliceSettings>;
     showTooltip?: boolean;
     showLegend?: boolean;
-    /** Which edge the legend sits on. Defaults to `bottom`. */
-    legendPosition?: 'top' | 'bottom';
+    /**
+     * Format each slice's value in the list legend. When omitted the raw value is
+     * stringified with `String()`.
+     */
+    legendValueFormatter?: (value: string | number) => string;
     /** Plot-area margin, in px. Omit to use recharts' default (5 on every side). */
     margin?: {
         top?: number;

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

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { AxisDomainItem } from 'recharts';
-import { ChartTooltip, ChartConfig, ChartAnimationProps, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette, ChartAnimationProps, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const radarChartVariants: (props?: ({
     gridType?: "circle" | "polygon" | null | undefined;
@@ -79,6 +79,11 @@ export interface RadarSeriesStyle {
  */
 export declare function radarSeriesStyle(key: string, settings: RadarChartSeriesSettings | undefined, defaults: RadarSeriesDefaults): RadarSeriesStyle;
 export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof radarChartVariants>, ChartAnimationProps, 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-axis data. Each object holds the `angleKey` label + one numeric field
      * per series. Every plotted series needs a value in every row: recharts places a
@@ -86,10 +91,10 @@ export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'chil
      */
     data: ReadonlyArray<Record<string, string | number>>;
     /**
-     * Per-series map of `label` / `color` (imported from the shared `Chart`
-     * primitives). Turned into `--color-<key>` custom properties. 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` (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;
     /** Series to plot — one `<Radar>` per key. Each must exist in `config` and in every data row. */

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

@@ -1,4 +1,4 @@
-import { ChartTooltip, ChartConfig, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
 import * as React from 'react';
 /** Row-per-arc datum: the `nameKey` label plus each metric's numeric value. */
 type RadialBarChartDatum = Record<string, string | number>;
@@ -117,14 +117,19 @@ export declare function RadialBarChartSegmentedTooltipContent({ active, payload,
  */
 export declare function radialBarChartBandName(row: RadialBarChartDatum | undefined, nameKey: string): string;
 export interface RadialBarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, ChartAnimationProps, 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-arc data. Each object holds the arc's `nameKey` label + its `dataKey` numeric value. */
     data: ReadonlyArray<RadialBarChartDatum>;
     /**
-     * Per-arc map of `label` / `color`, keyed by the arc's `nameKey` value — or, in
-     * multi-metric mode, by each `dataKeys` entry (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-arc map of `label` / `icon` / `tone`, keyed by the arc's `nameKey` value
+     * — or, in multi-metric mode, by each `dataKeys` entry (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 arc. Ignored when `dataKeys` is set. */
@@ -223,6 +228,12 @@ export interface RadialBarChartProps extends Omit<React.ComponentProps<'div'>, '
     centerLabel?: RadialBarChartCenterLabel;
     showTooltip?: boolean;
     showLegend?: boolean;
+    /**
+     * Format each arc's value in the list legend. In single-metric mode each arc
+     * row gets its formatted value next to its label; in multi-metric mode values
+     * are per-row (not per-series) so this is ignored.
+     */
+    legendValueFormatter?: (value: string | number) => string;
     /**
      * Replace the default tooltip. Pass a configured `ChartTooltipContent`
      * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —

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

@@ -1,4 +1,4 @@
-import { ChartTooltip, ChartConfig } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette } from '../chart';
 import * as React from 'react';
 /** A node in the flow — `name` is its color/config key (CSS-safe, unique). */
 export interface SankeyChartNode {
@@ -20,16 +20,21 @@ export interface SankeyChartLink {
     color?: string;
 }
 export interface SankeyChartProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /**
+     * 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;
     /** The graph: `nodes` (color keys) + `links` (source/target indices + value). */
     data: {
         nodes: ReadonlyArray<SankeyChartNode>;
         links: ReadonlyArray<SankeyChartLink>;
     };
     /**
-     * Per-node map of `label` / `color`, keyed by the node's `name` (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-node map of `label` / `icon` / `tone`, keyed by the node's `name`
+     * (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;
     /** Vertical gap between nodes in the same column. */

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

@@ -1,4 +1,4 @@
-import { ChartConfig, CartesianChartProps, ChartAnimationProps } from '../chart';
+import { ChartConfig, ChartPalette, CartesianChartProps, ChartAnimationProps } from '../chart';
 import * as React from 'react';
 export type ScatterMarkerShape = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
 export interface ScatterSeries {
@@ -8,13 +8,18 @@ export interface ScatterSeries {
     data: ReadonlyArray<Record<string, number>>;
 }
 export interface ScatterChartProps 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;
     /** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */
     series: ScatterSeries[];
     /**
-     * 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;
     /** Numeric field for the horizontal axis. */

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

@@ -1 +1 @@
-export { Section, SectionHeader, SectionTitle, SectionDescription, SectionContent, } from './section';
+export { Section, SectionHeader, SectionContent, sectionVariants, useSectionContext, type SectionVariant, type SectionProps, type SectionHeaderProps, type SectionContentProps, } from './section';