@acronis-platform/ui-react 4.1.0 → 5.1.0

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, ChartPalette, ChartReferenceLine, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCategoryRange, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
+import { ChartLegend, ChartTooltip, ChartConfig, ChartPalette, ChartStatusTone, ChartReferenceLine, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCategoryRange, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const barChartVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
@@ -117,7 +117,14 @@ export declare function createTrackShape({ inRange, trackFill, paint, }: {
     trackFill: string;
     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 recharts bar chart: bars rising from a category X axis, with axes, grid,
+ * tooltip and legend. This is the default — `orientation` is only spelled out
+ * to discriminate it from the horizontal mode below.
+ */
+export interface BarChartVerticalProps extends Omit<React.ComponentProps<'div'>, 'children'>, Omit<VariantProps<typeof barChartVariants>, 'orientation'>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
+    /** Selects the recharts bar chart. Omit it — this is the default. */
+    orientation?: 'vertical';
     /**
      * 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`.
@@ -136,9 +143,9 @@ export interface BarChartProps extends Omit<React.ComponentProps<'div'>, 'childr
     /** Category axis key (the shared dimension across rows, e.g. `"month"`). */
     xKey: string;
     /**
-     * One or more dashed reference/average lines on the value axis (Y for vertical
-     * bars, X for horizontal). Each is driven by a fixed `value` or a computed
-     * series `average`. Pass a single object or an array to draw several at once.
+     * One or more dashed reference/average lines on the value (Y) axis. Each is
+     * driven by a fixed `value` or a computed series `average`. Pass a single
+     * object or an array to draw several at once.
      */
     referenceLine?: ChartReferenceLine | ChartReferenceLine[];
     /**
@@ -152,8 +159,6 @@ export interface BarChartProps extends Omit<React.ComponentProps<'div'>, 'childr
      * normally.
      */
     barSettings?: Record<string, BarChartBarSettings>;
-    /** Unit suffix on X-axis tick values (recharts `unit`) — applies when the X axis is numeric (`orientation="horizontal"`). */
-    xUnit?: string;
     /** Corner radius applied to the growing end of each bar. */
     barRadius?: number;
     /** How every bar is painted. Per-range overrides come from `barSettings`. */
@@ -187,10 +192,70 @@ export interface BarChartProps extends Omit<React.ComponentProps<'div'>, 'childr
     };
     showLegend?: boolean;
     /**
-     * Position of the value labels when `showLabels` is on. Defaults to the growing
-     * end — `top` for vertical bars, `right` for horizontal.
+     * Position of the value labels when `showLabels` is on. Defaults to the bar's
+     * growing end (`top`), or the segment centre when the layout is stacked.
      */
     labelPosition?: CartesianLabelPosition;
 }
-declare const BarChart: React.ForwardRefExoticComponent<Omit<BarChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** One row of the horizontal bar list. */
+export interface BarChartItem {
+    /** Row label, shown at the start of the row. */
+    label: string;
+    /** The value this row represents. */
+    value: number;
+    /**
+     * Fill color — any CSS color; prefer an existing `--ui-*` token. Required
+     * when no `palette` is passed to the chart. Omit when supplying `tone`
+     * together with `palette`.
+     */
+    color?: string;
+    /**
+     * Palette tone for this row. Resolved against the `palette` prop on the
+     * enclosing `BarChart`; ignored when `palette` is omitted and `color` is set.
+     */
+    tone?: {
+        status: ChartStatusTone;
+    };
+    /**
+     * Projected/forecast total value. When set and greater than `value`, renders
+     * a translucent bar (same color, 30% opacity) extending from the actual
+     * value's edge to the forecast value. The actual bar renders solid on top.
+     * ARIA values always reflect the actual value; `aria-valuetext` also
+     * mentions the forecast value. Ignored when `<= value`.
+     */
+    forecast?: number;
+}
+/**
+ * The labelled proportional bar list: one row per `items` entry carrying its
+ * label, value, share of `max`, and a track bar. No axes, grid, or recharts.
+ */
+export interface BarChartHorizontalProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** Selects the labelled bar list. */
+    orientation: 'horizontal';
+    /** Rows to render — one labelled bar per item. */
+    items: BarChartItem[];
+    /** Upper bound the values are shares of. Defaults to the sum of every item's value. */
+    max?: number;
+    /** Format the numeric value in the label. Defaults to `toLocaleString()`. */
+    valueFormatter?: (value: number) => string;
+    /** Show the hover tooltip per row. On by default. */
+    showTooltip?: boolean;
+    /** Tooltip content shared by every row (replaces the default). Ignored when `showTooltip` is false. */
+    tooltip?: React.ReactNode;
+    /**
+     * Dataviz palette to resolve each item's color from. When provided, each
+     * `items` entry should carry a `tone` (and can omit `color`). The colors are
+     * resolved in the same order and with the same tone rules as the vertical
+     * chart — `status` tones pick a specific palette stop, slot-less items
+     * consume the next available stop.
+     */
+    palette?: ChartPalette;
+}
+/**
+ * Unified BarChart props — `orientation` selects what gets rendered:
+ * - omitted / `'vertical'`: the recharts bar chart (axes, grid, legend).
+ * - `'horizontal'`: the labelled proportional bar list.
+ */
+export type BarChartProps = BarChartVerticalProps | BarChartHorizontalProps;
+declare const BarChart: React.ForwardRefExoticComponent<(Omit<BarChartVerticalProps, "ref"> | Omit<BarChartHorizontalProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
 export { BarChart, barChartVariants };

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

@@ -0,0 +1,146 @@
+import type * as React from 'react';
+type BarChartBarShape = 'rounded' | 'pill' | 'gradient' | 'pattern';
+type CartesianLabelPosition = 'top' | 'bottom' | 'left' | 'right' | 'center' | 'insideTop' | 'insideBottom' | 'insideLeft' | 'insideRight' | 'insideStart' | 'insideEnd';
+export interface BarChartItem {
+    /** Row label, shown at the start of the row. */
+    label: string;
+    /** The value this row represents. */
+    value: number;
+    /** Fill color — any CSS color; prefer an existing `--ui-*` token. Required when no `palette` is passed to the chart. */
+    color?: string;
+    /** Palette tone for this row. Resolved against the `palette` prop on the enclosing `BarChart`. */
+    tone?: {
+        status: 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    };
+    /** Projected/forecast total. When greater than `value`, renders a translucent bar (30% opacity) extending from `value` to `forecast`. */
+    forecast?: number;
+}
+export interface BarChartVerticalProps {
+    /** Selects the recharts bar chart. Omit it — this is the default. */
+    orientation?: 'vertical';
+    /** 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` / `icon` / `tone`. */
+    config: Record<string, {
+        label: string;
+        icon?: React.ComponentType;
+        color?: string;
+        tone?: string;
+    }>;
+    /** Series to plot — one `<Bar>` per key. Each must exist in `config` and in every data row. */
+    dataKeys: string[];
+    /** Category axis key (the shared dimension across rows, e.g. `"month"`). */
+    xKey: string;
+    /** Dataviz palette for series colors. Series that state no `color` of their own take a stop from it. */
+    palette?: string;
+    /** `"grouped"` (side-by-side, default) or `"stacked"` (summed into one column). */
+    layout?: 'grouped' | 'stacked';
+    /** One or more dashed reference/average lines on the value (Y) axis. */
+    referenceLine?: object | object[];
+    /** One or more shaded bands behind a range of categories. */
+    referenceArea?: object | object[];
+    /** Per-series style override for a range of categories, keyed by `dataKeys` entry. */
+    barSettings?: Record<string, object>;
+    /** Corner radius applied to the growing end of each bar. */
+    barRadius?: number;
+    /** How every bar is painted. Per-range overrides come from `barSettings`. */
+    barShape?: BarChartBarShape;
+    /** Fixed bar thickness, in px. */
+    barSize?: number;
+    /** Upper bound on the computed bar thickness, in px. */
+    maxBarSize?: number;
+    /** Gap between bars of the same category, in px or a percentage string. */
+    barGap?: number | string;
+    /** Gap between category groups, in px or a percentage string. */
+    barCategoryGap?: number | string;
+    /** Minimum rendered length for a bar, in px, so a tiny value stays visible. */
+    minPointSize?: number;
+    /** Draw a full-height track behind every bar. */
+    showBackground?: boolean;
+    /** Fill for the track background. Defaults to the secondary surface. */
+    backgroundFill?: string;
+    /** Highlight the hovered bar. */
+    showActiveBar?: boolean;
+    /** Painting of the hovered bar. */
+    activeBar?: {
+        fill?: string;
+        opacity?: number;
+    };
+    /** Show the legend. */
+    showLegend?: boolean;
+    /** Position of the value labels when `showLabels` is on. */
+    labelPosition?: CartesianLabelPosition;
+    /** Render the CartesianGrid. Defaults to `true`. */
+    showGrid?: boolean;
+    /** Render the hover tooltip. Defaults to `true`. */
+    showTooltip?: boolean;
+    /** Replace the default tooltip content. */
+    tooltipContent?: React.ReactNode;
+    /** Title rendered beneath the X axis. */
+    xAxisLabel?: string;
+    /** Title rendered beside the Y axis (rotated). */
+    yAxisLabel?: string;
+    /** Unit suffix appended to the Y axis's tick values. */
+    yUnit?: string;
+    /** Show the X axis. Defaults to `true`. */
+    showXAxis?: boolean;
+    /** Show the Y axis. Defaults to `true`. */
+    showYAxis?: boolean;
+    /** Format each X-axis tick value. */
+    xTickFormatter?: (value: string | number, index: number) => string;
+    /** Format each Y-axis tick value. */
+    yTickFormatter?: (value: string | number, index: number) => string;
+    /** Rotate the X-axis tick labels by this many degrees. */
+    xAxisAngle?: number;
+    /** X-axis tick density. */
+    xAxisInterval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart';
+    /** Desired number of ticks on the value axis. */
+    yAxisTickCount?: number;
+    /** Value-axis domain preset. */
+    yAxisDomain?: 'auto' | 'dataMin-dataMax' | 'zero';
+    /** Draw grid lines dashed instead of solid. Defaults to `true`. */
+    gridDashed?: boolean;
+    /** Show horizontal grid lines. */
+    gridHorizontal?: boolean;
+    /** Show vertical grid lines. */
+    gridVertical?: boolean;
+    /** Enable entrance animation. Defaults to `false`. */
+    animate?: boolean;
+    /** Animation duration in ms. */
+    animationDuration?: number;
+    /** Delay before the animation starts, in ms. */
+    animationBegin?: number;
+    /** Easing curve. */
+    animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+    /** Render a range brush beneath the chart. */
+    showBrush?: boolean;
+    /** Height of the brush strip in px. Defaults to 28. */
+    brushHeight?: number;
+    /** Accessible name for the brush's range handles. */
+    brushAriaLabel?: string;
+    /** Render a value label on each data point. Defaults to `false`. */
+    showLabels?: boolean;
+    /** Format each label value. */
+    labelFormatter?: (value: string | number, index: number) => string;
+    /** Additional CSS class names. */
+    className?: string;
+}
+export interface BarChartHorizontalProps {
+    /** Selects the labelled bar list. */
+    orientation: 'horizontal';
+    /** Rows to render — one labelled bar per item. */
+    items: BarChartItem[];
+    /** Upper bound the values are shares of. Defaults to the sum of every item's value. */
+    max?: number;
+    /** Format the numeric value in the label. Defaults to `toLocaleString()`. */
+    valueFormatter?: (value: number) => string;
+    /** Show the hover tooltip per row. On by default. */
+    showTooltip?: boolean;
+    /** Tooltip content shared by every row (replaces the default). */
+    tooltip?: React.ReactNode;
+    /** Dataviz palette to resolve each item's color from. Items should carry a `tone` when a palette is set. */
+    palette?: string;
+    /** Additional CSS class names. */
+    className?: string;
+}
+export {};

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

@@ -1 +1 @@
-export { BarChart, barChartVariants, type BarChartProps, type BarChartReferenceArea, type BarChartBarSettings, type BarChartBarShape, } from './bar-chart';
+export { BarChart, barChartVariants, type BarChartProps, type BarChartVerticalProps, type BarChartHorizontalProps, type BarChartItem, type BarChartReferenceArea, type BarChartBarSettings, type BarChartBarShape, } from './bar-chart';

package/dist/src/components/ui/card-widget-carousel/card-widget-carousel.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface CardWidgetCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Accessible label for the Next chevron button. Defaults to `'Next'`. */
+    nextLabel?: string;
+    /** Accessible label for the Previous chevron button. Defaults to `'Previous'`. */
+    prevLabel?: string;
+}
+declare const CardWidgetCarousel: React.ForwardRefExoticComponent<CardWidgetCarouselProps & React.RefAttributes<HTMLDivElement>>;
+export { CardWidgetCarousel };

package/dist/src/components/ui/card-widget-carousel/card-widget.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+declare const statusBgToken: {
+    readonly danger: "var(--ui-background-status-danger)";
+    readonly warning: "var(--ui-background-status-warning)";
+    readonly info: "var(--ui-background-status-info)";
+};
+export type CardWidgetStatus = keyof typeof statusBgToken;
+export interface CardWidgetProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Semantic status — drives the icon-box background and icon glyph color. */
+    status?: CardWidgetStatus;
+    /** The 16 px icon placed inside the status-colored icon box. */
+    icon?: React.ReactNode;
+    /** Card header title (the widget/category name, e.g. "Phishing attacks"). */
+    header?: string;
+    /** Insight title in the body (14 px, semibold). Hidden while `skeleton` is true. */
+    title?: string;
+    /** Supporting description (12 px). Hidden while `skeleton` is true. */
+    description?: string;
+    /**
+     * Primary value / metric (24 px, semibold). Accepts a string or any node.
+     * Hidden while `skeleton` is true.
+     */
+    metric?: React.ReactNode;
+    /** Small caption beside the metric (12 px). Hidden while `skeleton` is true. */
+    caption?: string;
+    /**
+     * When true the body shows animated placeholder lines instead of
+     * `title` / `description` / `metric` / `caption`.
+     */
+    skeleton?: boolean;
+    /**
+     * Accessible label for the skeleton loading indicator (`aria-label`).
+     * Defaults to `'Loading'`. Localize when deploying in a non-English context.
+     */
+    loadingLabel?: string;
+    /**
+     * Content rendered in the card footer (action buttons). Omit the prop to
+     * hide the footer entirely.
+     */
+    footer?: React.ReactNode;
+}
+declare const CardWidget: React.ForwardRefExoticComponent<CardWidgetProps & React.RefAttributes<HTMLDivElement>>;
+export { CardWidget };

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

@@ -0,0 +1,2 @@
+export { CardWidgetCarousel, type CardWidgetCarouselProps } from './card-widget-carousel';
+export { CardWidget, type CardWidgetProps, type CardWidgetStatus } from './card-widget';

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

@@ -26,7 +26,7 @@ export interface CartesianChartProps {
     yAxisLabel?: string;
     /**
      * Unit suffix appended to the Y axis's tick values (recharts `unit`) — applies
-     * when the Y axis is the numeric one. `BarChart` with
+     * when the Y axis is the numeric one. `ComposedChart` with
      * `orientation="horizontal"` puts the values on X instead; use `xUnit` there.
      */
     yUnit?: string;
@@ -263,6 +263,14 @@ export interface ResolvedAnimation {
  * library has no other reduced-motion escape hatch.
  */
 export declare function resolveAnimation(props: ChartAnimationProps): ResolvedAnimation;
+/**
+ * Remove synthetic `_proj_*` series entries from a recharts payload array so
+ * they don't appear in custom tooltip or legend content. Safe to call with
+ * `undefined` — returns `undefined` unchanged.
+ */
+export declare function dropProjectionPayload<T extends {
+    dataKey?: unknown;
+}>(payload: readonly T[] | undefined): T[] | undefined;
 /** Where a data label sits on a cartesian series (recharts `LabelList` position). */
 export type CartesianLabelPosition = 'top' | 'bottom' | 'left' | 'right' | 'center' | 'insideTop' | 'insideBottom' | 'insideLeft' | 'insideRight' | 'insideStart' | 'insideEnd';
 /**

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

@@ -10,6 +10,8 @@ export type ChartDivergingPair = 'blue-orange' | 'teal-violet';
  * tier, not a typo here.
  */
 export type ChartStatusTone = 'danger' | 'critical' | 'warning' | 'success' | 'info' | 'neutral';
+/** Which hue side of a diverging pair a series belongs to. */
+export type ChartDivergingSide = 'a' | 'b';
 /** Which palette a chart's series are painted from. */
 export type ChartPalette = {
     type: 'categorical';
@@ -25,29 +27,40 @@ export type ChartPalette = {
 /**
  * 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:
+ * Three palettes accept a per-series override:
  *
  * - `categorical` — `{ slot }` picks one of the 16 hues.
- * - `status` — `{ status }` names a tone.
+ * - `status` — `{ status }` names a tone (required; there is no meaningful
+ *   positional fallback for status colors).
+ * - `diverging` — `{ side: 'a' | 'b' }` pins the series to one hue family.
+ *   All side-`a` series walk the a-hue stops (a3 → a2 → a1, strongest-first,
+ *   wrapping past three). All side-`b` series walk the b-hue stops likewise.
+ *   Un-sided series walk the default interleaved ramp (a3-b3-a2-b2-a1-b1),
+ *   skipping any stop already claimed by a sided series. This assignment
+ *   requires the full config, so it happens in `resolveChartColors`, not here.
  *
- * `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
+ * `sequential` accepts no override: its stops are a ramp, meaningful only in
+ * relation to each other. An override passed under a non-matching palette is
  * ignored, with a dev warning.
  *
- * Neither form can express a color from outside the palette — that is the point.
+ * `{ sameAs: key }` is palette-agnostic: the series mirrors whatever color
+ * another series resolves to. Use it for a twin series that is the *same*
+ * metric drawn differently (a forecast tail, a projection band), where two
+ * distinct hues would read as two separate metrics. An aliased series doesn't
+ * consume a stop.
+ *
+ * No form can express a color from outside the active palette — that is the point.
  */
 export type ChartSeriesTone = {
     slot: number;
     status?: never;
     sameAs?: never;
+    side?: never;
 } | {
     slot?: never;
     status: ChartStatusTone;
     sameAs?: never;
+    side?: never;
 }
 /**
  * Paint whatever the series under this key paints, under any palette. For a
@@ -60,10 +73,25 @@ export type ChartSeriesTone = {
     slot?: never;
     status?: never;
     sameAs: string;
+    side?: never;
+}
+/**
+ * Diverging palette only. Pins this series to one of the two hue sides.
+ * `resolveChartColors` groups all series that share a side together and
+ * assigns them that side's three stops (strongest first, wrapping). Series
+ * that declare no side walk the default interleaved ramp.
+ *
+ * Under any palette other than `diverging`, this is ignored with a dev warning.
+ */
+ | {
+    slot?: never;
+    status?: never;
+    sameAs?: never;
+    side: ChartDivergingSide;
 };
 /** 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). */
+/** Each sequential ramp's eight stops, darkest (8) to lightest (1). */
 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[]>>;

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

@@ -80,6 +80,13 @@ export type ChartLegendContentProps = {
      * stringified with `String()`.
      */
     valueFormatter?: (value: string | number) => string;
+    /**
+     * Extra Tailwind class(es) applied to the right-hand value in a list entry,
+     * merged on top of the default colour (`text-[var(--ui-text-on-surface-link-idle)]`).
+     * Pass a replacement colour class to override the default; other utilities
+     * (e.g. `tabular-nums`) are additive and leave the default colour in place.
+     */
+    valueClassName?: string;
 };
 export interface ChartContainerProps extends React.ComponentProps<'div'> {
     /**
@@ -110,5 +117,5 @@ declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
 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, variant, valueKey, valueFormatter, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, config: configFromProps, variant, valueKey, valueFormatter, valueClassName, }: 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,6 +1,6 @@
 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 { ChartPalette, ChartSeriesTone, ChartSequentialRamp, ChartDivergingPair, ChartDivergingSide, 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, dropProjectionPayload, } 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/funnel-chart/funnel-chart.d.ts

@@ -8,13 +8,12 @@ declare const funnelChartVariants: (props?: ({
 export type FunnelChartLabelPosition = 'right' | 'left' | 'inside';
 /** What a stage's label says. */
 export type FunnelChartLabelFormat = 'name' | 'value' | 'percent' | 'name-value' | 'name-percent' | 'value-percent';
-/** How the stages are coloured: one `config` entry each, or one shared ramp. */
-export type FunnelChartColorMode = 'palette' | 'gradient';
 /** Override for a single stage, keyed by its `nameKey` value. */
 export interface FunnelChartStageSettings {
     /**
-     * Paint this stage with a colour of its own, overriding both `config` and
-     * `colorMode`. Reference an existing semantic `--ui-*` token.
+     * Paint this stage with a colour of its own instead of its `palette` stop —
+     * the same per-item escape hatch `PieChart`'s `sliceSettings` offers.
+     * Reference an existing semantic `--ui-*` token.
      */
     color?: string;
     /**
@@ -33,6 +32,75 @@ export interface FunnelChartStageSettings {
  * name with its own value.
  */
 export declare function funnelChartOppositeSide(labelPosition: FunnelChartLabelPosition): FunnelChartLabelPosition;
+/**
+ * The palette Figma paints the funnel from: the sequential blue ramp, whose
+ * stops read as one quantity falling down the funnel. Every other chart keeps
+ * the shared categorical default — a funnel's stages are an *ordered* series,
+ * which is what a sequential ramp is for.
+ *
+ * Figma `8811:175245` uses `dataviz/sequential/blue/{2,4,6,8}`.
+ */
+export declare const FUNNEL_CHART_DEFAULT_PALETTE: ChartPalette;
+/**
+ * The `d` for one funnel stage — recharts' trapezoid geometry with the design's
+ * rounded corners.
+ *
+ * `x`/`y` is the top-left of the *upper* edge and the shape is centred on
+ * `x + upperWidth / 2`, matching recharts' own `getTrapezoidPath`.
+ *
+ * Either edge can collapse to a single rounded apex rather than a zero-length
+ * one — the `triangle` last shape narrows to a point at the bottom, and a
+ * `reversed` funnel stands that same triangle on its head at the top.
+ */
+export declare function funnelChartStagePath(options: {
+    x: number;
+    y: number;
+    upperWidth: number;
+    lowerWidth: number;
+    height: number;
+    /**
+     * Uniform corner radius — applies to all four corners. Overridden per-side
+     * by `topRadius` / `bottomRadius`. When absent, defaults to
+     * `STAGE_RADIUS` (top) and `STAGE_BOTTOM_RADIUS` (bottom).
+     */
+    radius?: number;
+    /** Radius for the two upper corners (default: `STAGE_RADIUS = 2`). */
+    topRadius?: number;
+    /**
+     * Radius for the two lower corners (default: `STAGE_BOTTOM_RADIUS = 1`).
+     *
+     * Figma's bottom corners clip ~0.85px — much smaller than the upper ones —
+     * so the default is intentionally lower than `topRadius`.
+     */
+    bottomRadius?: number;
+}): string;
+/**
+ * Pull a stage's **top** edge down by `gap`, so surface shows between it and the
+ * stage above.
+ *
+ * The top rather than the bottom on purpose: the bottom edge is what
+ * `lastShapeType` defines — the triangle's apex — so leaving it exactly where
+ * recharts put it keeps a `triangle` funnel ending in a real point instead of a
+ * blunt 2px edge. The upper edge slides down the funnel's own slope, so the
+ * taper is unchanged rather than steepened.
+ *
+ * A stage with no room for the gap is returned untouched: better a missing gap
+ * than an inverted shape.
+ */
+export declare function funnelChartStageInset(options: {
+    x: number;
+    y: number;
+    upperWidth: number;
+    lowerWidth: number;
+    height: number;
+    gap: number;
+}): {
+    x: number;
+    y: number;
+    upperWidth: number;
+    lowerWidth: number;
+    height: number;
+};
 /**
  * Reserve room for a composite label beside the funnel, by narrowing the
  * **funnel** rather than the plot area.
@@ -70,11 +138,15 @@ export declare function funnelChartLabelReserve(options: {
     labelFormat: FunnelChartLabelFormat;
 }): string | undefined;
 /**
- * The plot-area margin. Reserves the left inset when a label list sits there, so
- * a left-hand label isn't clipped at the SVG edge; the right inset is always
- * reserved, since that is the geometry every existing funnel was drawn with.
+ * The plot-area margin.
+ *
+ * With nothing beside the funnel — the default, and what Figma draws — the plot
+ * is the design's own inset (`PLOT_MARGIN`): just the few px the rounded corners
+ * and the apex need, so the funnel fills its 120px square instead of being
+ * squeezed into the middle by label room it isn't using.
  *
- * This is overflow protection, not label room — the wrap width comes from
+ * As soon as a label list *does* sit beside the funnel, the side insets come
+ * back: this is overflow protection, not label room — the wrap width comes from
  * `funnelChartLabelReserve`. A caller-supplied `margin` is merged over these
  * defaults per side, so `margin={{ right: 160 }}` keeps the default top, bottom
  * and left rather than collapsing them to zero.
@@ -85,10 +157,10 @@ export declare function funnelChartLabelMargin(options: {
     showValueLabels: boolean;
     valuePosition: FunnelChartLabelPosition;
 }): {
-    left: number;
     top: number;
     right: number;
     bottom: number;
+    left: number;
 };
 /**
  * Format a conversion share the way the default `percent` label reads it:
@@ -121,8 +193,12 @@ export declare function funnelChartLabelText(options: {
 }): 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`.
+     * The dataviz palette the stages are painted from — the only source of a
+     * stage's colour, bar a per-stage `stageSettings.color`. Defaults to
+     * `FUNNEL_CHART_DEFAULT_PALETTE` (the sequential blue ramp), which is what
+     * Figma paints the funnel with; a funnel's stages are an ordered series, so a
+     * ramp reads them better than the shared categorical default.
+     * See `ChartPalette`.
      */
     palette?: ChartPalette;
     /** Row-per-stage data. Each object holds the stage's `nameKey` label + its `dataKey` numeric value. */
@@ -186,23 +262,13 @@ export interface FunnelChartProps extends Omit<React.ComponentProps<'div'>, 'chi
      * for a locale that doesn't write a bare `%`.
      */
     percentFormatter?: TickFormatter;
-    /** Render the legend. Off by default: a funnel labels its stages on the chart. */
-    showLegend?: boolean;
-    /** Which edge the legend sits on. */
-    legendPos?: 'top' | 'bottom';
     /**
-     * How the stages are coloured. `palette` (the default) gives each stage its own
-     * `config` colour; `gradient` ramps one hue — `gradientColor` — from the widest
-     * stage down to the narrowest.
+     * Render the stage list beside the funnel. On by default: the design's funnel
+     * carries no on-plot labels, so the legend is where the stages are named.
      */
-    colorMode?: FunnelChartColorMode;
-    /**
-     * The hue `colorMode="gradient"` ramps. Defaults to the first visible stage's
-     * own colour — including a `stageSettings` colour set on it — so a palette
-     * config becomes a ramp without a second colour decision. Ignored when
-     * `colorMode` is `palette`.
-     */
-    gradientColor?: string;
+    showLegend?: boolean;
+    /** Format the value in each legend row — the stage's `dataKey` number. */
+    legendValueFormatter?: (value: string | number) => string;
     /** Per-stage `color` / `hidden` overrides, keyed by the stage's `nameKey` value. */
     stageSettings?: Record<string, FunnelChartStageSettings>;
     /** Outline the hovered segment. */

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

@@ -1 +1 @@
-export { FunnelChart, funnelChartVariants, funnelChartPercent, type FunnelChartProps, type FunnelChartColorMode, type FunnelChartLabelFormat, type FunnelChartLabelPosition, type FunnelChartStageSettings, } from './funnel-chart';
+export { FunnelChart, funnelChartVariants, funnelChartPercent, FUNNEL_CHART_DEFAULT_PALETTE, type FunnelChartProps, type FunnelChartLabelFormat, type FunnelChartLabelPosition, type FunnelChartStageSettings, } from './funnel-chart';