@acronis-platform/ui-react 0.60.0 → 0.61.0

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

@@ -83,6 +83,421 @@ export interface CartesianChartProps {
  * make the preset indistinguishable from `zero`.
  */
 export declare function resolveAxisDomain(preset: 'auto' | 'dataMin-dataMax' | 'zero' | undefined): Readonly<[AxisDomainItem, AxisDomainItem]> | undefined;
+/**
+ * `text-anchor` for a rotated X tick row, so the tick's text ends (or begins) at
+ * the tick it labels instead of straddling it. Shared by all 7 cartesian charts.
+ *
+ * A tick rotated anti-clockwise trails off to the lower left, so it must be
+ * anchored at its end; a clockwise one trails to the lower right and is anchored
+ * at its start. Only an *omitted* angle keeps recharts' own default (`middle`):
+ * the branch is on `angle < 0`, so `angle={0}` anchors at `start` like any
+ * clockwise rotation. A caller that normalises "upright" to `0` instead of
+ * leaving `xAxisAngle` off therefore gets the rotated-tick treatment — here and
+ * in `resolveXAxisHeight`.
+ */
+export declare function resolveRotatedTickAnchor(angle: number | undefined): 'start' | 'end' | undefined;
+/**
+ * Height to reserve for the X tick row, or `undefined` to keep recharts' own
+ * default. Shared by all 7 cartesian charts.
+ *
+ * recharts' default 30 covers one upright tick row and nothing else, so a
+ * rotated row (+20) and an axis title (+18) each need their own allowance. The
+ * two are additive rather than exclusive — a chart can rotate its ticks *and*
+ * title the axis, which a label-or-angle ternary under-allocates.
+ *
+ * The +20 keys off the angle being *present*, not non-zero, so `angle={0}`
+ * reserves the rotated row's height as well — the same edge case
+ * `resolveRotatedTickAnchor` has, kept consistent between the two.
+ */
+export declare function resolveXAxisHeight(label: string | undefined, angle: number | undefined): number | undefined;
+/**
+ * recharts `label` for an X axis title, placed below the tick row. Shared by all
+ * 7 cartesian charts; `insideTop` is for a secondary scale on the top edge.
+ */
+export declare function resolveXAxisTitle(label: string | undefined, position?: 'insideBottom' | 'insideTop', offset?: number): {
+    value: string;
+    position: "insideBottom" | "insideTop";
+    offset: number;
+} | undefined;
+/**
+ * recharts `label` for a rotated value-axis title, angled so it reads from the
+ * outside in — upward on a left axis (the convention), downward on a right one,
+ * where -90° would put the text's baseline against the plot. Shared by all 7
+ * cartesian charts; only `ComposedChart` currently uses the right-hand side.
+ */
+export declare function resolveYAxisTitle(label: string | undefined, orientation?: 'left' | 'right'): {
+    value: string;
+    angle: number;
+    position: "insideLeft" | "insideRight";
+    style: {
+        textAnchor: "middle";
+    };
+} | undefined;
+/**
+ * A category range on a cartesian chart: `from`/`to` accept either the
+ * category's value (an `xKey` cell, e.g. `'Sep'`) or its 0-based row index. Both
+ * ends are inclusive, and either can be omitted to run to that end of the data.
+ * Shared by the charts that scope something to a slice of the categories — a
+ * reference band, a per-series style override.
+ */
+export interface ChartCategoryRange {
+    from?: string | number;
+    to?: string | number;
+}
+/**
+ * Resolve a category range to inclusive row indices. A bound is either the
+ * category's own value (matched against the `xKey` cell) or a 0-based index;
+ * an omitted bound runs to that end of the data. Returns `undefined` when the
+ * data is empty or the range resolves to nothing (an unknown value, or a `to`
+ * that lands before its `from`).
+ *
+ * Exported for unit tests; not part of the package's public API.
+ */
+export declare function resolveCategoryRange(range: ChartCategoryRange, data: ReadonlyArray<Record<string, unknown>>, xKey: string): [number, number] | undefined;
+/**
+ * Which value axis a series is measured against, on a chart that can carry two.
+ *
+ * `secondary` is the opt-in: the second axis exists only when at least one series
+ * asks for it, so a chart whose series all leave this unset keeps the single
+ * shared scale — and its recharts output — exactly as before.
+ */
+export type ChartYAxisTarget = 'primary' | 'secondary';
+/**
+ * Second value-axis props, for a chart whose series can be measured on two
+ * independent scales. **Only `ComposedChart` implements these today.** It is the
+ * one chart in the suite where two scales are unambiguous: its series already
+ * differ in mark type, so a bar read against the left axis and a line against the
+ * right can't be mistaken for two marks sharing one. On a single-mark chart (Bar,
+ * Area) two scales invite comparing heights that aren't comparable, which is why
+ * these props are not mixed into `CartesianChartProps`.
+ *
+ * The primary axis is configured through `CartesianChartProps` (`yAxisLabel`,
+ * `yUnit`, `yTickFormatter`, `yAxisTickCount`, `yAxisDomain`, `showYAxis`); every
+ * `secondary*` prop here is its counterpart on the second axis, so the two scales
+ * format and bound themselves independently, and each is inert until a series
+ * selects that axis.
+ *
+ * `yAxisOrientation` is the exception on both counts: it places the *primary*
+ * axis, and it applies whether or not a second one exists. It lives here because
+ * it is only meaningful once a chart can mirror a pair of axes — a single-axis
+ * chart has no second side to give up.
+ */
+export interface SecondaryYAxisProps {
+    /**
+     * Which side the *primary* value axis sits on. Defaults to `left`. The secondary
+     * axis always takes the opposite side. Unlike the `secondary*` props below, this
+     * one applies to a single-scale chart too.
+     *
+     * Inert on a chart whose marks grow horizontally: the value axis is X there, so
+     * the primary sits along the bottom edge and the secondary along the top, and
+     * neither has a left/right side to pick.
+     */
+    yAxisOrientation?: 'left' | 'right';
+    /**
+     * Show the secondary axis's ticks + title. Defaults to `true`. Setting it false
+     * keeps the second *scale* (series still measure against it) and only drops its
+     * chrome — the same meaning `showYAxis` has for the primary axis.
+     */
+    showSecondaryYAxis?: boolean;
+    /** Title rendered beside the secondary axis (rotated). */
+    secondaryYAxisLabel?: string;
+    /** Unit suffix appended to the secondary axis's tick values (recharts `unit`). */
+    secondaryYUnit?: string;
+    /** Format each secondary-axis tick value — the counterpart of `yTickFormatter`. */
+    secondaryYTickFormatter?: TickFormatter;
+    /** Desired number of ticks on the secondary axis (recharts `tickCount`; a hint, not exact). */
+    secondaryYAxisTickCount?: number;
+    /** Domain preset for the secondary axis — same presets as `yAxisDomain`. */
+    secondaryYAxisDomain?: 'auto' | 'dataMin-dataMax' | 'zero';
+}
+/**
+ * How a series interpolates between its points (recharts `type`), shared by the
+ * Line and Area families so both offer the same set:
+ *
+ * - `linear` — straight segments between points.
+ * - `monotone` — smoothed, without overshooting a point's value.
+ * - `natural` — a natural cubic spline; smoother than `monotone`, but it may
+ *   overshoot, so read it as a trend rather than exact values.
+ * - `basis` — a B-spline that is *not* required to pass through the points at
+ *   all; the smoothest option, and the least literal.
+ * - `step` — right-angle segments, changing value at the midpoint between two
+ *   points; `stepBefore` changes at the leading point and `stepAfter` at the
+ *   trailing one.
+ */
+export type ChartCurveType = 'linear' | 'monotone' | 'natural' | 'basis' | 'step' | 'stepBefore' | 'stepAfter';
+/** recharts animation easing curves. */
+export type ChartAnimationEasing = 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+/**
+ * Entrance-animation props shared by *every* chart type (not just the cartesian
+ * ones) — charts hardcode `isAnimationActive={false}` otherwise. All optional and
+ * off by default, so an unset chart renders byte-identically to before (and its
+ * VR baselines stay stable). Spread `resolveAnimation(props)` onto each series.
+ */
+export interface ChartAnimationProps {
+    /** Enable entrance animation. Defaults to `false` (keeps output/baselines stable). */
+    animate?: boolean;
+    /** Animation duration in ms (recharts `animationDuration`). */
+    animationDuration?: number;
+    /** Delay before the animation starts, in ms (recharts `animationBegin`). */
+    animationBegin?: number;
+    /** Easing curve (recharts `animationEasing`). */
+    animationEasing?: ChartAnimationEasing;
+}
+/** The resolved recharts animation props to spread onto a series/shape. */
+export interface ResolvedAnimation {
+    isAnimationActive: boolean | 'auto';
+    animationDuration?: number;
+    animationBegin?: number;
+    animationEasing?: ChartAnimationEasing;
+}
+/**
+ * Turn the shared `ChartAnimationProps` into the recharts series props. The
+ * timing props only appear when given, so an unset chart spreads exactly
+ * `{ isAnimationActive: false }` — the previous hardcoded value.
+ *
+ * `animate` maps to recharts' `'auto'`, not to a literal `true`: `'auto'` is the
+ * only value that honors `prefers-reduced-motion` (and disables the animation in
+ * SSR). recharts resolves it as
+ * `isActive = isActiveProp === 'auto' ? !isSsr && !prefersReducedMotion : isActiveProp`,
+ * so a literal `true` would force motion on users who asked for none — this
+ * library has no other reduced-motion escape hatch.
+ */
+export declare function resolveAnimation(props: ChartAnimationProps): ResolvedAnimation;
+/** 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';
+/**
+ * Where a data label sits on a *polar* series (Pie, RadialBar). Deliberately not
+ * `CartesianLabelPosition`: recharts routes a polar label list through
+ * `getAttrsOfPolarLabel` / `renderRadialLabel`, which understand only these
+ * seven values — every cartesian-only position (`top`, `insideLeft`, …) silently
+ * collapses to the same mid-radius placement, so offering them would advertise
+ * distinctions that don't exist.
+ */
+export type PolarLabelPosition = 'outside' | 'center' | 'centerTop' | 'centerBottom' | 'insideStart' | 'insideEnd' | 'end';
+/** Any position accepted by the suite's data labels. */
+export type ChartLabelPosition = CartesianLabelPosition | PolarLabelPosition;
+/**
+ * Data-label props shared by the charts that can annotate each point/segment with
+ * its value. `labelPosition` stays per-chart (the valid position set differs by
+ * family), but `showLabels` + `labelFormatter` are common. Label formatting reuses
+ * the same `TickFormatter` type as the axes, so a label and its axis read the same.
+ */
+export interface ChartDataLabelProps {
+    /** Render a value label on each data point/segment. Defaults to `false`. */
+    showLabels?: boolean;
+    /** Format each label value — pass the same formatter used on the value axis. */
+    labelFormatter?: TickFormatter;
+}
+/**
+ * Fill for a label that sits on the chart *surface* — i.e. an outside position
+ * (`top`, `right`, polar `outside`). Inverts with the theme, so it only works
+ * against the surface background.
+ */
+export declare const CHART_LABEL_FILL_CLASS = "fill-[var(--ui-text-on-surface-primary)]!";
+/**
+ * Fill for a label that sits on an *opaque series fill* — any `inside*`
+ * position, a polar mid-radius/centroid placement, or a stacked bar/arc segment
+ * (an area's fill is translucent, so it uses the on-surface token). The on-surface
+ * token must not be used there: it resolves near-white in dark mode and drops to
+ * ~1.6:1 against the saturated status/brand fills the charts colour series with,
+ * failing the `accessibility/contrast` grammar rule (`must`, WCAG 1.4.3). This is
+ * the same "text on a strong colored surface" token `Treemap` already uses; it is
+ * white in both themes, so it holds up over every series colour.
+ */
+export declare const CHART_LABEL_FILL_ON_SERIES_CLASS = "fill-[var(--ui-text-on-status-strong-neutral)]!";
+export declare const CHART_LABEL_FONT_SIZE = 12;
+/**
+ * Plot-area inset to apply when a Line/Area series carries outside data labels.
+ * recharts hands those label lists `parentViewBox: undefined` (its own source
+ * calls this out as a bug in `cartesian/Line.js`), so `getCartesianPosition`'s
+ * `clamp` has nothing to clamp against and the first/last point's value is cut
+ * off at the SVG edge. Widening the margin is the only lever a composition over
+ * recharts has. `Bar` does pass a `parentViewBox`, so bar series don't need it.
+ */
+export declare const CHART_LABEL_MARGIN: {
+    readonly top: 16;
+    readonly right: 24;
+    readonly bottom: 5;
+    readonly left: 12;
+};
+/**
+ * Resolve where a cartesian value label sits, given the caller's override, the
+ * layout, and the position of the series' growing end (`top` for a vertical bar
+ * or a line/area point, `right` for a horizontal bar).
+ *
+ * The stacked branch is the reason this isn't inlined: a stacked segment has no
+ * free space at its growing end — the next segment is drawn there — so a `top`
+ * label lands *inside* its neighbour rather than over its own segment. Centring
+ * it in its own segment is the readable placement; `resolveLabelFillClass` then
+ * pairs it with the fill that has contrast over that family's series colour.
+ */
+export declare function resolveCartesianLabelPosition(options: {
+    labelPosition?: CartesianLabelPosition;
+    isStacked?: boolean;
+    growingEnd?: CartesianLabelPosition;
+}): CartesianLabelPosition;
+/**
+ * Pick the label fill that actually has contrast at `position`. Callers must pass
+ * the *resolved* position (after their own default), never `undefined` for a
+ * polar chart — recharts' polar fallback is a mid-radius placement, which is on
+ * the fill even though no `inside*` value was given.
+ *
+ * Returns a `className`, not a `fill` attribute, and the utility is `!`-flagged:
+ * the cartesian charts scope `[&_.recharts-label]:fill-foreground` on their
+ * container to theme axis titles, and a `LabelList`'s text carries
+ * `.recharts-label` too — so a CSS rule would quietly beat an SVG presentation
+ * attribute and undo the contrast fix.
+ *
+ * `translucentSeries` opts a family out of the on-fill token: an area's fill is
+ * a gradient (0.8 → 0.1 alpha) or a flat `fillOpacity`, so what sits behind the
+ * label is the surface tinted by the series colour, not the series colour. The
+ * white on-fill token disappears into it in light mode — the theme-inverting
+ * on-surface token is the readable one there, and stays white in dark mode.
+ */
+export declare function resolveLabelFillClass(position: ChartLabelPosition, options?: {
+    translucentSeries?: boolean;
+}): string;
+/**
+ * Adapt a `TickFormatter` to recharts' `LabelList` `formatter` prop, whose value
+ * type is wider. Returns `undefined` when no formatter is given, so a label
+ * renders its raw value. Lets labels reuse the same formatters as the value axis.
+ *
+ * Null/undefined is filtered out rather than forwarded: recharts builds a label
+ * entry for *every* point including the null ones that `connectNulls` is meant to
+ * bridge, and the tick formatters coerce (`formatCompactNumber(null)` is `"0"`,
+ * `formatPercent(undefined)` is `"undefined"`) — which would paint a phantom
+ * value over an intentional gap.
+ */
+export declare function toLabelFormatter(formatter: TickFormatter | undefined): ((value: unknown) => string) | undefined;
+/** Where a reference line's caption sits relative to the rule. */
+export type ChartReferenceLabelPosition = 'top' | 'insideTopLeft' | 'insideTopRight' | 'insideBottomLeft' | 'insideBottomRight';
+/**
+ * A dashed rule across the value axis — a target, a threshold, or a series
+ * average. Shared by the cartesian charts that draw one (`BarChart`,
+ * `LineChart`, `AreaChart`) so the config reads the same on all three.
+ */
+export interface ChartReferenceLine {
+    /** Fixed position on the value axis. Takes precedence over `average`. */
+    value?: number;
+    /**
+     * Draw the line at the mean of one series (a `dataKeys` entry) or, when
+     * `true`, of every plotted series' values.
+     */
+    average?: boolean | string;
+    /** Optional caption rendered alongside the line. */
+    label?: string;
+    /**
+     * Where the caption sits. Defaults to the chart's own placement — move it
+     * when the rule lands where the series already is and the two collide.
+     */
+    labelPosition?: ChartReferenceLabelPosition;
+}
+/**
+ * Normalize the `referenceLine` prop — a single config or an array — to a list.
+ * Every chart accepts both forms, so this keeps the render path uniform.
+ */
+export declare function toReferenceLineList(referenceLine: ChartReferenceLine | ChartReferenceLine[] | undefined): ChartReferenceLine[];
+/**
+ * Resolve a `referenceLine` config to a position on the value axis: a fixed
+ * `value` wins; otherwise the mean of the requested series (a single `dataKeys`
+ * entry, or all of them when `average` is `true`). Returns `undefined` when
+ * there is nothing to draw (no config, or no numeric values to average) — the
+ * caller skips the line rather than drawing it at 0.
+ *
+ * Rows are `unknown`-valued because `ComposedChart` types its data that way; the
+ * body only ever reads cells that are numbers, so a wider row type costs nothing
+ * and saves every caller a cast.
+ */
+export declare function resolveChartReferenceValue(referenceLine: ChartReferenceLine | undefined, data: ReadonlyArray<Record<string, unknown>>, dataKeys: string[]): number | undefined;
+/**
+ * Stroke (and caption fill) of a reference rule. The muted text token, so the
+ * rule reads as annotation rather than as another series — and stays legible in
+ * both themes without competing with the series colors.
+ */
+export declare const CHART_REFERENCE_LINE_STROKE = "var(--ui-text-on-surface-secondary)";
+/**
+ * The recharts props that paint a reference rule: a dashed line in the muted
+ * text token with an optional caption. Shared so the three charts that draw one
+ * can't drift on the stroke, dash pattern, or caption styling.
+ *
+ * `labelPosition` is the chart's default placement; a config's own
+ * `labelPosition` overrides it at the call site.
+ *
+ * `ifOverflow: 'extendDomain'` is part of the contract, not a detail: a target
+ * above the data maximum is exactly the case a reference line is for, and
+ * recharts' default (`discard`) would silently drop it.
+ */
+export declare function resolveReferenceLineProps(label: string | undefined, labelPosition?: ChartReferenceLabelPosition): {
+    stroke: string;
+    strokeDasharray: string;
+    ifOverflow: "extendDomain";
+    label: {
+        value: string;
+        position: ChartReferenceLabelPosition;
+        fill: string;
+        fontSize: number;
+    } | undefined;
+};
+/**
+ * Range-brush props for the cartesian charts that support one — `BarChart`,
+ * `LineChart`, `AreaChart`, `ComposedChart`. Deliberately not folded into
+ * `CartesianChartProps`: `ScatterChart` plots a continuous X (the brush indexes
+ * rows, not values) and `Histogram` / `ConfidenceCone` render a derived series,
+ * so a brush over their row order would slice the wrong thing.
+ */
+export interface ChartBrushProps {
+    /**
+     * Render a range brush beneath the chart — drag its handles (or the selected
+     * window) to zoom the series to a slice of the data. Defaults to `false`.
+     */
+    showBrush?: boolean;
+    /** Height of the brush strip in px. Defaults to 28. */
+    brushHeight?: number;
+    /**
+     * Accessible name for the brush's two range handles. Both are focusable
+     * `role="slider"` elements, so they need one. Defaults to
+     * `'Chart range selector'`.
+     */
+    brushAriaLabel?: string;
+}
+/**
+ * Height of the brush strip. recharts' own default is 40, which eats an eighth
+ * of a 320px-tall dashboard widget; 28 still fits the travellers and the
+ * range captions.
+ */
+export declare const CHART_BRUSH_HEIGHT = 28;
+/**
+ * Accessible name for the brush handles. recharts' own fallback is
+ * `"Min value: ".concat(start, ", Max value: ").concat(end)`, where both halves
+ * come from a `name` property on the data row — a field none of our charts
+ * require, so it announces "Min value: undefined, Max value: undefined". Always
+ * pass `ariaLabel` to suppress it.
+ */
+export declare const CHART_BRUSH_ARIA_LABEL = "Chart range selector";
+/** The resolved recharts brush props to spread onto a `<Brush>`. */
+export interface ResolvedBrush {
+    height: number;
+    fill: string;
+    stroke: string;
+    travellerWidth: number;
+    ariaLabel: string;
+}
+/**
+ * Theme + size a recharts `<Brush>` from the shared `ChartBrushProps`.
+ *
+ * recharts derives the *whole* brush from two color props, so both have to be
+ * chosen for every element they reach (`cartesian/Brush.js`):
+ * - `fill` paints only the strip's background rect.
+ * - `stroke` paints its border, the traveller handles' **fill**, the selected
+ *   window at 20% opacity, and the range caption text.
+ *
+ * Hence the mid-grey text token rather than the border one: the travellers are
+ * solid `stroke`-colored rects with two hardcoded `#fff` grip lines drawn on
+ * top, so a pale stroke would render the grips invisible in light mode. That
+ * token is theme-stable (same grey in light and dark), and white grips read
+ * against it either way.
+ */
+export declare function resolveBrushProps({ brushHeight, brushAriaLabel, }: Omit<ChartBrushProps, 'showBrush'>): ResolvedBrush;
 /**
  * Compact thousands/millions: `1234 → "1.2K"`, `1_500_000 → "1.5M"`. Non-numeric
  * values (including blank strings) pass through unchanged. Use for large-count

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

@@ -24,7 +24,6 @@ export type ChartTooltipContentProps = Partial<TooltipContentProps<ValueType, Na
     className?: string;
     hideLabel?: boolean;
     hideIndicator?: boolean;
-    indicator?: 'line' | 'dot' | 'dashed';
     nameKey?: string;
     labelKey?: string;
     labelFormatter?: (label: TooltipContentProps<number, string>['label'], payload: TooltipContentProps<number, string>['payload']) => React.ReactNode;
@@ -38,6 +37,13 @@ export type ChartLegendContentProps = {
     verticalAlign?: LegendProps['verticalAlign'];
     payload?: LegendPayload[];
     nameKey?: string;
+    /**
+     * The series config the entries take their labels and icons from. Defaults to
+     * the enclosing `ChartContainer`'s — pass it only to render the legend *outside*
+     * the container, which a chart type has to do when the renderer can't lay a
+     * legend out inside its plot (see `Treemap`).
+     */
+    config?: ChartConfig;
 };
 export interface ChartContainerProps extends React.ComponentProps<'div'> {
     config: ChartConfig;
@@ -51,7 +57,7 @@ declare const ChartStyle: ({ id, config }: {
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
 /** The `content` a caller passes to override the default tooltip (recharts' `Tooltip['content']`). */
 export type ChartTooltipContentType = React.ComponentProps<typeof ChartTooltip>['content'];
-declare function ChartTooltipContent({ active, payload, label, className, indicator, hideLabel, hideIndicator, labelFormatter, formatter, labelClassName, color, nameKey, labelKey, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+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, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, config: configFromProps, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

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

@@ -1,4 +1,4 @@
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, } from './chart';
 export type { ChartConfig, ChartContainerProps, ChartTooltipContentProps, ChartLegendContentProps, ChartTooltipContentType, } from './chart';
-export { formatCompactNumber, formatPercent, createTickFormatter, resolveAxisDomain, } from './chart-format';
-export type { TickFormatter, CartesianChartProps } from './chart-format';
+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/composed-chart/composed-chart.d.ts

@@ -1,15 +1,115 @@
-import { ChartConfig, CartesianChartProps } from '../chart';
+import { VariantProps } from 'class-variance-authority';
+import { ChartConfig, 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;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ComposedSeriesType = 'bar' | 'line' | 'area';
+/** Interpolation for a line or area series. */
+export type ComposedCurveType = 'linear' | 'monotone' | 'step';
+/**
+ * How a series is marked in the legend. Deliberately narrower than recharts'
+ * icon set: `ChartLegendContent` draws its own marker and reads only whether the
+ * entry is a `line` (a rule, dashed when the series is) or anything else (a
+ * swatch), so the wider union would advertise icons that never render. `none`
+ * keeps the series off the legend entirely.
+ */
+export type ComposedSeriesLegendType = 'line' | 'rect' | 'none';
+/** Plot-area inset, in px. Any side left out keeps the chart's own default. */
+export interface ComposedChartMargin {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
 export interface ComposedSeries {
     /** Column key to plot — must match a `config` entry; drives its `--color-<key>` paint. */
     key: string;
     /** How this series renders. */
     type: ComposedSeriesType;
+    /**
+     * Which value axis this series is measured against. Defaults to `primary`.
+     * The secondary axis is rendered only when at least one series selects it — use
+     * it when a series carries a different unit or magnitude (a rate next to a
+     * count) that a shared scale would flatten.
+     */
+    yAxis?: ChartYAxisTarget;
+    /**
+     * Paint for this series, overriding its `config` color. Reference an existing
+     * semantic `--ui-*` token; there is no chart palette tier yet.
+     */
+    color?: string;
+    /**
+     * Stack this series with every other series of the *same mark type* carrying
+     * the same id. Bars stack with bars and areas with areas — the ids are
+     * namespaced per type, so one id can't merge a bar into an area stack. Ignored
+     * on a line series, which recharts does not stack.
+     */
+    stackId?: string;
+    /** Interpolation, overriding the chart's `curve`. Line and area series only. */
+    curve?: ComposedCurveType;
+    /**
+     * Stroke width, overriding the chart's `strokeWidth` on a line or area series.
+     * On a bar it sizes the dashed outline `strokeDasharray` draws — a bar has no
+     * other stroke, so the chart-level default never reaches one and this is the
+     * only way to set it.
+     */
+    strokeWidth?: number;
+    /**
+     * Dash pattern for the stroke (an SVG `stroke-dasharray`, e.g. `'5 5'`) — the
+     * conventional way to mark a series as a projection. On a bar series it draws a
+     * dashed outline in the series colour.
+     */
+    strokeDasharray?: string;
+    /** Render a dot at each point, overriding the chart's `showDots`. Line and area series only. */
+    showDots?: boolean;
+    /** Render the hover dot, overriding the chart's `showActiveDots`. Line and area series only. */
+    showActiveDots?: boolean;
+    /** Bridge `null` gaps instead of breaking the series, overriding `connectNulls`. */
+    connectNulls?: boolean;
+    /** Corner radius on the growing end, overriding the chart's `barRadius`. Bar series only. */
+    barRadius?: number;
+    /** Fixed bar thickness in px, overriding the chart's `barSize`. Bar series only. */
+    barSize?: number;
+    /** Highlight this bar on hover, overriding the chart's `showActiveBar`. Bar series only. */
+    showActiveBar?: boolean;
+    /** Draw a full-height track behind this series' bars, overriding `showBackground`. Bar series only. */
+    showBackground?: boolean;
+    /** Fill opacity, overriding the chart's `fillOpacity` (which applies to area series). */
+    fillOpacity?: number;
+    /** How this series is marked in the legend — `none` keeps it off the legend. */
+    legendType?: ComposedSeriesLegendType;
 }
-export interface ComposedChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps {
-    /** Row-per-category data. Each object holds `xKey` + one numeric field per series. */
-    data: ReadonlyArray<Record<string, string | number>>;
+/**
+ * A dashed rule on the chart. Either a position on the *value* axis (a fixed
+ * `value`, or the mean of one/every series via `average`) or, with `category`, a
+ * rule across the *category* axis at one category — the "today" divider between
+ * actuals and forecast. A value position wins if both are given.
+ */
+export interface ComposedChartReferenceLine extends ChartReferenceLine {
+    /**
+     * Category to draw the rule at — the category's own value (an `xKey` cell) or
+     * its 0-based row index.
+     */
+    category?: string | number;
+    /**
+     * Which value axis the rule is measured against, on a chart carrying two.
+     * Defaults to the axis of the series named by `average`, and to `primary`
+     * otherwise — so a target read off the secondary scale lands on it rather
+     * than being plotted against the primary one. `average: true` then pools only
+     * the series on this axis, never two scales at once. Inert while no series
+     * selects the secondary axis.
+     */
+    yAxis?: ChartYAxisTarget;
+}
+/** A shaded band behind a range of categories. */
+export interface ComposedChartReferenceArea extends ChartCategoryRange {
+    /** Caption above the band. */
+    label?: string;
+}
+export interface ComposedChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof composedChartVariants>, CartesianChartProps, SecondaryYAxisProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
+    /** 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
@@ -17,17 +117,66 @@ export interface ComposedChartProps extends Omit<React.ComponentProps<'div'>, 'c
      * `--ui-*` token; there is no chart palette tier yet.
      */
     config: ChartConfig;
-    /** Series to plot, each `{ key, type }` — one bar/line/area per entry. Each key must exist in `config` and every data row. */
+    /**
+     * Series to plot, each `{ key, type }` plus any per-series style override —
+     * one bar/line/area per entry. Each key must exist in `config` and every data
+     * row. Every styling prop on the chart is the default a series overrides here.
+     */
     series: ComposedSeries[];
     /** Category axis key (the shared dimension across rows, e.g. `"month"`). */
     xKey: string;
+    /**
+     * One or more dashed reference lines — on a value axis (`value` / `average`,
+     * placed by the entry's `yAxis`) or across the category axis (`category`).
+     * Pass a single object or an array.
+     */
+    referenceLine?: ComposedChartReferenceLine | ComposedChartReferenceLine[];
+    /**
+     * One or more shaded bands behind a range of categories — e.g. a forecast
+     * period. Pass a single object or an array to draw several.
+     */
+    referenceArea?: ComposedChartReferenceArea | ComposedChartReferenceArea[];
+    /** Unit suffix on the value-axis tick values when it is X (`orientation="horizontal"`). */
+    xUnit?: string;
     /** Interpolation for the line and area series. */
-    curve?: 'linear' | 'monotone' | 'step';
+    curve?: ComposedCurveType;
     /** Corner radius on the growing end of bar series. */
     barRadius?: number;
+    /** Fixed bar thickness, in px. Unset, recharts sizes bars from the available width. */
+    barSize?: 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;
+    /** 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;
     /** Flat-fill opacity for area series. */
     fillOpacity?: number;
+    /** Stroke width for the line series. Areas keep recharts' thinner outline unless set. */
+    strokeWidth?: number;
+    /** Render a dot at each point of the line and area series. */
+    showDots?: boolean;
+    /** Render the hover dot on the line and area series. Unset, recharts' own default applies. */
+    showActiveDots?: boolean;
+    /** Bridge `null` gaps in the data instead of breaking the line/area. */
+    connectNulls?: boolean;
+    /** Plot-area inset. Any side left out keeps the chart's own default. */
+    margin?: ComposedChartMargin;
+    /** Draw the hover cursor (the band/rule under the tooltip). Defaults to `true`. */
+    tooltipCursor?: boolean;
     showLegend?: boolean;
+    /** Which edge the legend sits on. Defaults to `bottom`. */
+    legendPosition?: 'top' | 'bottom';
+    /**
+     * Position of the value labels when `showLabels` is on. Defaults to each
+     * series' growing end — `top` (or `right` when horizontal), and the centre of
+     * a stacked segment, which has no free space at its end.
+     */
+    labelPosition?: CartesianLabelPosition;
 }
 declare const ComposedChart: React.ForwardRefExoticComponent<Omit<ComposedChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { ComposedChart };
+export { ComposedChart, composedChartVariants };

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

@@ -1 +1 @@
-export { ComposedChart, type ComposedChartProps, type ComposedSeries, type ComposedSeriesType, } from './composed-chart';
+export { ComposedChart, composedChartVariants, type ComposedChartProps, type ComposedChartMargin, type ComposedChartReferenceArea, type ComposedChartReferenceLine, type ComposedCurveType, type ComposedSeries, type ComposedSeriesLegendType, type ComposedSeriesType, } from './composed-chart';