@acronis-platform/ui-react 0.58.0 → 0.61.0

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

@@ -1,11 +1,89 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartConfig } from '../chart';
+import { AxisDomainItem } from 'recharts';
+import { ChartTooltip, ChartConfig, ChartAnimationProps, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const radarChartVariants: (props?: ({
     gridType?: "circle" | "polygon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof radarChartVariants> {
-    /** Row-per-axis data. Each object holds the `angleKey` label + one numeric field per series. */
+/** Per-series overrides, keyed by the series' `dataKeys` entry. */
+export interface RadarChartSeriesSettings {
+    /**
+     * Fill for this series' area, overriding its `config` color. Reference an
+     * existing semantic `--ui-*` token, same as `config`.
+     */
+    color?: string;
+    /**
+     * Outline color, when it should read differently from the fill (e.g. a solid
+     * outline over a barely-tinted area). Defaults to the fill.
+     *
+     * recharts derives a Radar's legend/tooltip color from its stroke first, so
+     * setting this alone also recolors that series' legend swatch and tooltip dot
+     * — set `color` too if the marker should keep following the fill.
+     */
+    stroke?: string;
+    /** Fill opacity for this series, overriding the chart-level `fillOpacity`. */
+    fillOpacity?: number;
+    /** Outline width for this series, overriding the chart-level `strokeWidth`. */
+    strokeWidth?: number;
+    /** Per-point dots for this series, overriding the chart-level `showDots`. */
+    dot?: boolean;
+    /** Dot radius for this series, overriding the chart-level `dotRadius`. */
+    dotRadius?: number;
+    /**
+     * Highlight this series' hovered point, overriding the chart-level
+     * `activeDot`.
+     */
+    activeDot?: boolean;
+}
+/**
+ * Map the `radiusAxisDomain` preset to a recharts radius-axis `domain`. Exported
+ * for unit tests; not part of the package's public API.
+ *
+ * The radius axis is what scales the web, so this is the difference between "the
+ * largest value in the data reaches the outer ring" (recharts' own behavior, and
+ * what an unset preset keeps) and "the outer ring is a known maximum" (`fixed`
+ * plus `radiusAxisDomainMax`). The two only mean something together: a `fixed`
+ * preset with no maximum falls back to the data's own top, i.e. that same
+ * default.
+ */
+export declare function radarRadiusAxisDomain(preset: 'auto' | 'fixed' | undefined, max: number | undefined): Readonly<[AxisDomainItem, AxisDomainItem]> | undefined;
+/** The chart-level styling a `seriesSettings` entry overrides. */
+export interface RadarSeriesDefaults {
+    fillOpacity: number;
+    strokeWidth: number;
+    showDots: boolean;
+    dotRadius: number;
+    activeDot: boolean | undefined;
+}
+/** Resolved recharts `<Radar>` styling for one series. */
+export interface RadarSeriesStyle {
+    fill: string;
+    stroke: string;
+    fillOpacity: number;
+    strokeWidth: number;
+    dot: {
+        r: number;
+    } | false;
+    activeDot: boolean | undefined;
+}
+/**
+ * Fold a series' `seriesSettings` entry over the chart-level styling. Exported
+ * for unit tests; not part of the package's public API.
+ *
+ * Every fallback is `??`, not `||`, so a deliberate falsy override survives —
+ * `fillOpacity: 0` (outline only), `strokeWidth: 0` (fill only), `dot: false`
+ * and `activeDot: false` all have to beat a truthy chart-level value. An
+ * un-overridden fill stays the `--color-<key>` custom property the shared
+ * `ChartContainer` injects from `config`, so the series a caller doesn't name
+ * keeps reading its config color.
+ */
+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 {
+    /**
+     * 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
+     * missing one at the centre, which reads as a zero rather than as a gap.
+     */
     data: ReadonlyArray<Record<string, string | number>>;
     /**
      * Per-series map of `label` / `color` (imported from the shared `Chart`
@@ -18,23 +96,158 @@ export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'chil
     dataKeys: string[];
     /** The categorical axis key placed around the web (e.g. `"subject"`). */
     angleKey: string;
+    /**
+     * Per-series style overrides, keyed by a `dataKeys` entry — color, outline, and
+     * dots for one series while the rest keep the chart-level values. Keys that
+     * aren't plotted are ignored. An overridden `color` — or `stroke`, which
+     * recharts reads first — follows through to that series' legend swatch and
+     * tooltip dot.
+     */
+    seriesSettings?: Record<string, RadarChartSeriesSettings>;
     /** Fill opacity of each radar area. */
     fillOpacity?: number;
     /** Stroke width of each radar outline. */
     strokeWidth?: number;
     /** Render a dot at each axis point. */
     showDots?: boolean;
+    /** Radius of the per-point dots when `showDots` is on. */
+    dotRadius?: number;
+    /**
+     * Enlarge the hovered point's dot. On by default (recharts' behavior) — pass
+     * `false` for a chart that shouldn't react to the pointer at all.
+     */
+    activeDot?: boolean;
     /** Render the polar grid (the web). */
     showGrid?: boolean;
+    /**
+     * Draw the grid's spokes — the radial lines from the centre out to each
+     * category. Defaults to `true`; off leaves only the concentric rings.
+     */
+    radialLines?: boolean;
+    /**
+     * Render the categorical axis around the web (its spoke labels, tick lines,
+     * and outer line). Defaults to `true`. Turning it off keeps the axis itself —
+     * so the tooltip still names each category — and only hides its chrome.
+     */
+    showAngleAxis?: boolean;
+    /** Place the spoke labels outside the web (default) or inside it. */
+    angleAxisOrientation?: 'inner' | 'outer';
+    /** Draw the line around the web that the spoke labels sit against. Defaults to `true`. */
+    angleAxisLine?: boolean;
+    /**
+     * Shape of that line: straight-edged `polygon` (recharts' default) or a smooth
+     * `circle`. Independent of `gridType`, so pair them to keep a circular web's
+     * outline circular too.
+     */
+    angleAxisLineType?: 'polygon' | 'circle';
+    /** Draw a tick line from the axis line to each spoke label. Defaults to `true`. */
+    angleTickLine?: boolean;
+    /**
+     * Distance from the web to the spoke labels, in px (recharts' default is 8).
+     * Left alone, `showLabels` widens it so a vertex's value can't land on its own
+     * category label.
+     */
+    angleTickSize?: number;
+    /**
+     * Render the value scale — a radial axis of ticks from the centre outward, so
+     * an area can be read as a number and not only compared to its neighbours.
+     * Defaults to `false` (recharts draws no radius axis unless asked).
+     *
+     * `radiusAxisAngle` and `radiusAxisOrientation` only describe the drawn scale,
+     * so they need it shown. `radiusAxisDomain`, `radiusAxisReversed` and
+     * `radiusAxisTickCount` apply while it's hidden too — the first two scale the
+     * web, and the third sets how many rings the grid draws (recharts takes the
+     * grid's concentric radii from the radius axis' ticks).
+     */
+    showRadiusAxis?: boolean;
+    /**
+     * Angle the value scale is drawn at, in degrees counter-clockwise from 3
+     * o'clock (recharts' default is `0`). Point it *between* two spokes: on a
+     * spoke, the outermost tick collides with that category's own label.
+     *
+     * The ticks sit over the areas at any angle — a radar's plot area is its
+     * areas — so this trades one overlap for none of the other.
+     */
+    radiusAxisAngle?: number;
+    /** Which side of the scale its tick labels sit on. Defaults to `right`. */
+    radiusAxisOrientation?: 'left' | 'right' | 'middle';
+    /**
+     * How the value scale is bounded — and with it the web, since the radius axis
+     * is what maps a value to a radius:
+     *
+     * - unset — recharts' own scaling: the data's largest value reaches the outer
+     *   ring, so two charts of the same metric aren't comparable.
+     * - `fixed` — pin the outer ring to `radiusAxisDomainMax` (the metric's own
+     *   maximum, e.g. a score out of 150), which is what makes a radar readable as
+     *   an absolute profile rather than a relative one.
+     * - `auto` — fit the data at both ends; the scale need not start at 0.
+     *
+     * Takes effect whether or not the scale is shown, so a chart can be scaled to a
+     * known maximum without displaying the ticks.
+     */
+    radiusAxisDomain?: 'auto' | 'fixed';
+    /**
+     * The value at the outer ring when `radiusAxisDomain` is `fixed`. Must be
+     * positive — a `0` or negative maximum can't bound an outward-growing scale, so
+     * it falls back to the data's own top.
+     */
+    radiusAxisDomainMax?: number;
+    /**
+     * Desired number of ticks on the value scale (a hint, not exact). Defaults to
+     * recharts' `5`. Also sets how many rings the grid draws, whether or not the
+     * scale itself is shown.
+     */
+    radiusAxisTickCount?: number;
+    /**
+     * Invert the value scale — the maximum at the centre and 0 at the outer ring —
+     * for a metric where less is better (latency, error rate), so a good profile
+     * still reads as a large area.
+     */
+    radiusAxisReversed?: boolean;
+    /** Horizontal centre of the web, in px or a percentage of the width. Defaults to `50%`. */
+    cx?: number | string;
+    /** Vertical centre of the web, in px or a percentage of the height. Defaults to `50%`. */
+    cy?: number | string;
+    /** Angle the first category sits at, in degrees. Defaults to `90` (12 o'clock). */
+    startAngle?: number;
+    /**
+     * Angle the sweep ends at, in degrees. Defaults to `-270` — a full turn
+     * clockwise from `startAngle`. Together the two rotate the web (or wrap the
+     * categories into a partial sweep).
+     */
+    endAngle?: number;
+    /**
+     * Radius of the hole at the centre, in px or a percentage of the available
+     * radius. Defaults to `0`. Also lifts the grid and the areas off the centre,
+     * which separates the series where they all bottom out.
+     */
+    innerRadius?: number | string;
+    /** Outer radius of the web, in px or a percentage of the available radius. Defaults to `80%`. */
+    outerRadius?: number | string;
+    /**
+     * Plot-area margin, in px. Omit it entirely to use recharts' default (5 on
+     * every side) — passing the object replaces all four, and recharts fills the
+     * sides you leave out with `0`, not with `5`. Name every side you want.
+     */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
     showTooltip?: boolean;
     showLegend?: boolean;
+    /** Which side of the chart the legend sits on. Defaults to `bottom`. */
+    legendPosition?: 'top' | 'bottom';
     /**
      * Replace the default tooltip. Pass a configured `ChartTooltipContent`
-     * (imported from this library) — e.g. with a `formatter` / `labelFormatter` /
-     * `indicator` — to customize formatting, per-series rows, or extra fields
-     * without composing recharts yourself. Ignored when `showTooltip` is false.
+     * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —
+     * to customize formatting, per-series rows, or extra fields without composing
+     * recharts yourself. Ignored when `showTooltip` is false.
      */
     tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+    /** Position of the value labels when `showLabels` is on. Defaults to `top`. */
+    labelPosition?: CartesianLabelPosition;
 }
 declare const RadarChart: React.ForwardRefExoticComponent<Omit<RadarChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { RadarChart, radarChartVariants };

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

@@ -1 +1 @@
-export { RadialBarChart, type RadialBarChartProps, } from './radial-bar-chart';
+export { RadialBarChart, type RadialBarChartProps, type RadialBarChartCenterLabel, type RadialBarChartLabelFormat, } from './radial-bar-chart';

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

@@ -1,22 +1,148 @@
-import { ChartTooltip, ChartConfig } from '../chart';
+import { ChartTooltip, ChartConfig, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
 import * as React from 'react';
-export interface RadialBarChartProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+/** Row-per-arc datum: the `nameKey` label plus each metric's numeric value. */
+type RadialBarChartDatum = Record<string, string | number>;
+/** What an arc's data label reads. */
+export type RadialBarChartLabelFormat = 'value' | 'name-value';
+export interface RadialBarChartCenterLabel {
+    /** Headline metric rendered large in the hole (e.g. the gauge's value). */
+    value?: string | number;
+    /** Caption rendered under the value. */
+    label?: string | number;
+}
+/**
+ * Compose one arc's data-label text. Exported for unit tests; not part of the
+ * package's public API.
+ *
+ * `labelFormatter` only ever formats the numeric part, so a chart's labels and
+ * its tooltip stay in the same units under either format. A nullish value yields
+ * an empty label, which recharts renders as no `<text>` at all.
+ */
+export declare function radialBarChartLabelText(options: {
+    format: RadialBarChartLabelFormat;
+    name: string | number | undefined;
+    value: string | number | undefined;
+    formatter?: TickFormatter;
+}): string;
+/** One piece of a segmented gauge's ring: a length in degrees and what it is. */
+export interface RadialBarChartSegment {
+    /** Synthetic series key — stable for a given (index, kind). */
+    key: string;
+    /** Angular length of the piece, in degrees. */
+    degrees: number;
+    /** `value` is the metric, `track` the unreached remainder, `gap` the notch. */
+    kind: 'value' | 'track' | 'gap';
+}
+/**
+ * Cut a gauge's sweep into equal segments separated by gaps, and split the
+ * segment the value ends inside into its reached and unreached parts. Exported
+ * for unit tests; not part of the package's public API.
+ *
+ * Lengths come back in **degrees**, which is what lets the ring be built as one
+ * stack of synthetic series over a `[0, sweep]` angular scale: recharts lays
+ * stacked radial bars out sequentially along the angle, so a transparent series
+ * between two colored ones reads as a real notch in the ring. A `gap` that
+ * would leave no room for the segments themselves is clamped.
+ */
+export declare function radialBarChartSegments(options: {
+    value: number;
+    domain: [number, number];
+    segments: number;
+    gap: number;
+    /** Absolute sweep of the chart, in degrees. */
+    sweep: number;
+    /** A full-circle sweep also needs a gap between the last segment and the first. */
+    closed: boolean;
+}): RadialBarChartSegment[];
+/**
+ * Fill for one piece of a segmented gauge's ring. Exported for unit tests and so
+ * the forced-open tooltip story can build a ring from the real implementation
+ * rather than a copy of it; not part of the package's public API.
+ */
+export declare function radialBarChartSegmentFill(kind: RadialBarChartSegment['kind'], colorName: string | number): string;
+/**
+ * What a segmented gauge's tooltip reads. Exported for unit tests; not part of
+ * the package's public API.
+ *
+ * A segmented ring's series are pieces of geometry, so recharts would offer the
+ * hovered piece's own name and length ("seg-3-value", 41.2°). Hovering anywhere
+ * on the ring should read the metric instead, so the reading is rebuilt from the
+ * data row.
+ */
+export declare function radialBarChartSegmentedReading(options: {
+    config: ChartConfig;
+    row: RadialBarChartDatum;
+    nameKey: string;
+    dataKey: string;
+    /** The `valueDomain` maximum, when the gauge has one. */
+    domainMax?: number;
+}): {
+    colorName: string;
+    label: React.ReactNode;
+    valueText: string;
+};
+/**
+ * The tooltip a segmented gauge shows — the same swatch/name/value layout the
+ * default `ChartTooltipContent` row uses, dot included, over the reading from
+ * `radialBarChartSegmentedReading`. Exported for the forced-open
+ * visual-regression story; not part of the package's public API.
+ *
+ * `payload` is trimmed to one row: a radial tooltip is axis-shared and collects a
+ * row from every series — two dozen identical rows for one metric.
+ * (`tooltipType="none"` only tags them, and scoping the tooltip to the hovered
+ * item instead would drop it in the corner — unlike Pie/Bar sectors, a RadialBar
+ * sector carries no tooltip coordinate.)
+ *
+ * A real component rather than a closure so it can be handed to `ChartTooltip`
+ * as an *element*: recharts `cloneElement`s an element but `createElement`s a
+ * function, and a closure rebuilt each render is a new element *type* — which
+ * remounts the tooltip on every parent render instead of updating it.
+ */
+export declare function RadialBarChartSegmentedTooltipContent({ active, payload, ...reading }: {
+    active?: boolean;
+    payload?: readonly unknown[];
+    config: ChartConfig;
+    row: RadialBarChartDatum;
+    nameKey: string;
+    dataKey: string;
+    domainMax?: number;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The band a multi-metric tooltip's header names. Exported for unit tests; not
+ * part of the package's public API.
+ *
+ * Each tooltip row is one metric, so the header names the band the hovered arc
+ * belongs to. recharts' own label is the radius-axis index, which reads as a
+ * bare number.
+ */
+export declare function radialBarChartBandName(row: RadialBarChartDatum | undefined, nameKey: string): string;
+export interface RadialBarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, ChartAnimationProps, ChartDataLabelProps {
     /** Row-per-arc data. Each object holds the arc's `nameKey` label + its `dataKey` numeric value. */
-    data: ReadonlyArray<Record<string, string | number>>;
+    data: ReadonlyArray<RadialBarChartDatum>;
     /**
-     * Per-arc map of `label` / `color`, keyed by the arc'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-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.
      */
     config: ChartConfig;
-    /** Numeric field that sizes each arc. */
+    /** Numeric field that sizes each arc. Ignored when `dataKeys` is set. */
     dataKey: string;
+    /**
+     * Plot several metrics instead of one arc per row: one arc per key, colored and
+     * named from `config` keyed by the **key** (not by `nameKey`) — the same
+     * convention as the cartesian charts. Every metric shares one angular scale, so
+     * pair it with `valueDomain` when the metrics are measured against a known
+     * maximum. `nameKey` still names the band each metric's arc sits in.
+     */
+    dataKeys?: string[];
     /**
      * Label field that names each arc (drives the legend, tooltip, and
      * `--color-<name>` lookup). Values should be unique per chart (arcs sharing a
      * name share one `config`/color entry) and CSS-safe — they become part of a
-     * custom-property name.
+     * custom-property name. In multi-metric mode it names the band rather than the
+     * arc, so the legend and colors come from `dataKeys` instead.
      */
     nameKey: string;
     /** Inner radius of the innermost arc. */
@@ -27,10 +153,74 @@ export interface RadialBarChartProps extends Omit<React.ComponentProps<'div'>, '
     startAngle?: number;
     /** Angle (degrees) the arcs sweep to (default is a full clockwise circle). */
     endAngle?: number;
+    /**
+     * The value range the sweep represents, as `[min, max]`. Without it every arc
+     * is drawn relative to the largest value in the data — so a **single** value
+     * always fills the whole sweep, which is never what a gauge means. Set it to
+     * the metric's own scale (e.g. `[0, 100]` for a percentage) and each arc
+     * becomes that fraction of the sweep, over the `showBackground` track.
+     */
+    valueDomain?: [number, number];
     /** Corner radius on each arc's ends. */
     cornerRadius?: number;
+    /**
+     * Horizontal center of the arcs, in px or a percentage of the width.
+     * Defaults to the middle (`50%`).
+     */
+    cx?: number | string;
+    /**
+     * Vertical center of the arcs, in px or a percentage of the height. Defaults to
+     * the middle (`50%`) — worth moving for a half-circle gauge, whose drawn half
+     * otherwise sits in the upper half of the surface.
+     */
+    cy?: number | string;
+    /** Thickness of each arc, in px. Omit to let the radii and the gaps size it. */
+    barSize?: number;
+    /** Gap between the arcs of different metrics in one band, in px. */
+    barGap?: number | string;
+    /** Gap between bands, in px or a percentage string. */
+    barCategoryGap?: number | string;
+    /**
+     * Smallest angle a non-zero arc may occupy, in degrees, so a tiny value stays
+     * visible (and hoverable). recharts applies the floor to a `0` as well, which
+     * reads as a small positive value — leave this unset when a metric can
+     * legitimately be zero.
+     */
+    minAngle?: number;
+    /** Plot-area margin, in px. Omit to use recharts' default (5 on every side). */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /**
+     * Draw the gauge's ring as this many equal segments, notched apart — the
+     * segmented-gauge look. Applies to a **single-value gauge** only and needs
+     * `valueDomain` to know what a full ring means. Anything that isn't one — more
+     * than one row, `dataKeys` set, fewer than two segments, or a `dataKey` value
+     * that isn't a number (a stringified `"29"` off an API) — falls back to the
+     * normal concentric arcs, legend included, rather than erroring.
+     *
+     * The ring is then synthetic geometry rather than data rows, so the arc labels
+     * and the legend are suppressed: put the readout in `centerLabel`. The tooltip
+     * stays, and reads the metric (with the `valueDomain` maximum when there is
+     * one) wherever on the ring it is hovered. `showBackground` is redundant too —
+     * the unreached segments *are* the track.
+     */
+    segments?: number;
+    /** Gap between a segmented gauge's segments, in degrees. Defaults to `3`. */
+    segmentGap?: number;
     /** Render a muted background track behind each arc. */
     showBackground?: boolean;
+    /** Draw the concentric polar grid behind the arcs. */
+    showPolarGrid?: boolean;
+    /**
+     * Custom content for the hole at the center — a headline `value` and/or a
+     * `label` caption, stacked and centered. Needs an `innerRadius` big enough to
+     * hold the text; it is not clipped to the hole.
+     */
+    centerLabel?: RadialBarChartCenterLabel;
     showTooltip?: boolean;
     showLegend?: boolean;
     /**
@@ -38,8 +228,24 @@ export interface RadialBarChartProps extends Omit<React.ComponentProps<'div'>, '
      * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —
      * to customize formatting, per-arc rows, or extra fields without composing
      * recharts yourself. Ignored when `showTooltip` is false.
+     *
+     * On a segmented gauge it takes over from the built-in reading, and the payload
+     * it receives is the ring's synthetic pieces (`seg-2-track`, a length in
+     * degrees) rather than data rows — read the metric off `payload[0].payload`.
      */
     tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+    /**
+     * Position of the value labels when `showLabels` is on. Defaults to
+     * `insideStart` — the labels sit inside each arc, and therefore render in the
+     * on-fill label token so they stay legible over the arc colour.
+     */
+    labelPosition?: PolarLabelPosition;
+    /**
+     * What each data label reads when `showLabels` is on — the value alone (the
+     * default), or the arc's name and its value. The name is the row's `nameKey`
+     * value, or the metric's `config` label in multi-metric mode.
+     */
+    labelFormat?: RadialBarChartLabelFormat;
 }
 declare const RadialBarChart: React.ForwardRefExoticComponent<Omit<RadialBarChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { RadialBarChart };

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

@@ -0,0 +1,2 @@
+export { SankeyChart } from './sankey-chart';
+export type { SankeyChartProps, SankeyChartNode, SankeyChartLink, } from './sankey-chart';

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

@@ -0,0 +1,69 @@
+import { ChartTooltip, ChartConfig } from '../chart';
+import * as React from 'react';
+/** A node in the flow — `name` is its color/config key (CSS-safe, unique). */
+export interface SankeyChartNode {
+    name: string;
+}
+/** A directed flow between two nodes, referenced by their index in `nodes`. */
+export interface SankeyChartLink {
+    /** Index of the source node in `data.nodes`. */
+    source: number;
+    /** Index of the target node in `data.nodes`. */
+    target: number;
+    /** Flow magnitude — drives the link's width. */
+    value: number;
+    /**
+     * Ribbon color (any CSS color, e.g. a `var(--ui-*)` token), rendered at **full
+     * opacity** so it matches its node bar. Omit to use the target node's color at
+     * 35% (the default tinted ribbon).
+     */
+    color?: string;
+}
+export interface SankeyChartProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** 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.
+     */
+    config: ChartConfig;
+    /** Vertical gap between nodes in the same column. */
+    nodePadding?: number;
+    /** Thickness of each node bar. */
+    nodeWidth?: number;
+    /** Curviness of the links (0 = straight, 1 = fully curved). */
+    linkCurvature?: number;
+    /**
+     * Sort nodes vertically to minimize link crossings (recharts' relaxation).
+     * Defaults to `false` — nodes render in the order given by `data.nodes` within
+     * each column, which keeps curated flows tidy; set `true` to auto-order.
+     */
+    sort?: boolean;
+    /** Render each node's label (from `config[name].label`) beside its bar. */
+    showLabels?: boolean;
+    /** Render a legend (color dot + label + value + % per node) below the chart. */
+    showLegend?: boolean;
+    /** Show a hover tooltip on nodes and links (dot + `source → target` + value). */
+    showTooltip?: boolean;
+    /**
+     * Replace the default tooltip. Pass a configured `ChartTooltipContent`
+     * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —
+     * to customize formatting without composing recharts yourself. Ignored when
+     * `showTooltip` is false.
+     */
+    tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+}
+export declare function makeSankeyTooltip(config: ChartConfig, links: ReadonlyArray<SankeyChartLink>, nodes: ReadonlyArray<SankeyChartNode>): ({ active, payload, }: {
+    active?: boolean;
+    payload?: ReadonlyArray<{
+        name?: string | number;
+        value?: number | string | ReadonlyArray<number | string>;
+    }>;
+}) => import("react/jsx-runtime").JSX.Element | null;
+declare const SankeyChart: React.ForwardRefExoticComponent<Omit<SankeyChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { SankeyChart };

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

@@ -1,4 +1,4 @@
-import { ChartTooltip, ChartConfig } from '../chart';
+import { ChartConfig, CartesianChartProps, ChartAnimationProps } from '../chart';
 import * as React from 'react';
 export type ScatterMarkerShape = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
 export interface ScatterSeries {
@@ -7,7 +7,7 @@ export interface ScatterSeries {
     /** This series' points — each row holds at least `xKey` and `yKey` (and `zKey` when used). */
     data: ReadonlyArray<Record<string, number>>;
 }
-export interface ScatterChartProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+export interface ScatterChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps, ChartAnimationProps {
     /** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */
     series: ScatterSeries[];
     /**
@@ -21,30 +21,15 @@ export interface ScatterChartProps extends Omit<React.ComponentProps<'div'>, 'ch
     xKey: string;
     /** Numeric field for the vertical axis. */
     yKey: string;
-    /** Title rendered beneath the horizontal (X) axis. */
-    xAxisLabel?: string;
-    /** Title rendered beside the vertical (Y) axis (rotated). */
-    yAxisLabel?: string;
     /** Unit suffix appended to X-axis tick values (recharts `unit`). */
     xUnit?: string;
-    /** Unit suffix appended to Y-axis tick values (recharts `unit`). */
-    yUnit?: string;
     /** Optional numeric field mapped to point size (a bubble chart), via recharts `ZAxis`. */
     zKey?: string;
     /** Point-size range `[min, max]` the `zKey` maps into. Ignored when `zKey` is unset (points use recharts' default size). */
     zRange?: [number, number];
     /** Marker shape for every point. */
     shape?: ScatterMarkerShape;
-    showGrid?: boolean;
-    showTooltip?: boolean;
     showLegend?: boolean;
-    /**
-     * Replace the default tooltip. Pass a configured `ChartTooltipContent`
-     * (imported from this library) — e.g. with a `formatter` / `labelFormatter` /
-     * `indicator` — to customize formatting, per-series rows, or extra fields
-     * without composing recharts yourself. Ignored when `showTooltip` is false.
-     */
-    tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
 }
 declare const ScatterChart: React.ForwardRefExoticComponent<Omit<ScatterChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ScatterChart };

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

@@ -1 +1 @@
-export { Timeline, TimelineItem, type TimelineProps, type TimelineItemProps, type TimelineStatus, } from './timeline';
+export { Timeline, TimelineItem, type TimelineProps, type TimelineItemProps, type TimelineLevel, type TimelineMarkerColor, } from './timeline';