@acronis-platform/ui-react 0.58.0 → 0.61.0

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

@@ -1,10 +1,125 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartConfig } from '../chart';
+import { ChartTooltip, ChartAnimationProps, ChartConfig, TickFormatter } from '../chart';
 import * as React from 'react';
 declare const funnelChartVariants: (props?: ({
     lastShape?: "triangle" | "rectangle" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface FunnelChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof funnelChartVariants> {
+/** Where a stage's label sits relative to its segment. */
+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.
+     */
+    color?: string;
+    /**
+     * Drop the stage from the funnel — and from the legend, labels and the
+     * conversion percentages, which are computed over the visible stages only.
+     */
+    hidden?: boolean;
+}
+/**
+ * Where the value labels sit when the caller doesn't say: opposite the names, so
+ * the two lists never stack on the same edge. `inside` names sit on the segments
+ * and leave both edges free, so the values take the default `right`.
+ *
+ * A static default can't do this — `valuePosition="left"` beside
+ * `labelPosition="left"` draws both lists at the same anchor, overprinting the
+ * name with its own value.
+ */
+export declare function funnelChartOppositeSide(labelPosition: FunnelChartLabelPosition): FunnelChartLabelPosition;
+/**
+ * Reserve room for a composite label beside the funnel, by narrowing the
+ * **funnel** rather than the plot area.
+ *
+ * recharts word-wraps a label against the space between its trapezoid's
+ * mid-height edge and the *plot area* edge (`getCartesianPosition` clamps
+ * `width` to `parentViewBox`, which `Funnel` sets to the plot box). A margin
+ * shrinks the plot area and the funnel inside it in lockstep, so widening
+ * `margin.right` moves the clamp edge *inward* and leaves a composite label
+ * with less room, not more — the reserved strip sits outside `parentViewBox`
+ * where the text can never reach it.
+ *
+ * `Funnel`'s `width` is the lever that works: it scales the funnel within the
+ * plot area while `parentViewBox` stays put, and because recharts anchors the
+ * funnel at the plot area's left edge (`offsetX = offset.left`), everything it
+ * frees lands on the right. Narrowing the funnel to
+ * `COMPOSITE_FUNNEL_WIDTH` turns ~35px of wrap width into ~140px on a 460px
+ * chart.
+ *
+ * Returns `undefined` — i.e. leave the funnel at its full width — for every
+ * other case, so a funnel with plain labels, no labels, or `inside` labels keeps
+ * exactly the geometry it has always had.
+ *
+ * There is no equivalent lever for `labelPosition="left"`: the widest trapezoid
+ * always starts flush at the plot area's left edge, so a left-hand label is
+ * bounded by how sharply the funnel narrows and narrowing it further only makes
+ * that worse. Composite left-hand labels wrap; that's a recharts limitation, not
+ * a tuning choice.
+ *
+ * A caller-supplied `funnelWidth` always wins — this is only the default.
+ */
+export declare function funnelChartLabelReserve(options: {
+    showLabels: boolean;
+    labelPosition: FunnelChartLabelPosition;
+    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.
+ *
+ * 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.
+ */
+export declare function funnelChartLabelMargin(options: {
+    showLabels: boolean;
+    labelPosition: FunnelChartLabelPosition;
+    showValueLabels: boolean;
+    valuePosition: FunnelChartLabelPosition;
+}): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+/**
+ * Format a conversion share the way the default `percent` label reads it:
+ * `0.52 → "52.0%"`. Exported so a `percentFormatter` can wrap or replace it.
+ */
+export declare const funnelChartPercent: TickFormatter;
+/**
+ * Compose one stage's label text.
+ *
+ * `base` is the value the percentage is measured against — the funnel's widest
+ * stage, not the sum of every stage. A funnel's stages are nested subsets of
+ * each other rather than parts of a whole, so their values don't add up to
+ * anything meaningful; the share that reads as information is the conversion
+ * from the top of the funnel. (A pie's `percent` is the other way round — there
+ * a slice really is a share of the total.)
+ *
+ * Only the numeric part goes through `formatter`, so a label and its tooltip can
+ * share one formatter; the share goes through `percentFormatter`, so a locale
+ * that doesn't write a bare `%` can replace it. The percent formats degrade to
+ * the name (or to the value) rather than printing `NaN%` when there is nothing
+ * to divide by.
+ */
+export declare function funnelChartLabelText(options: {
+    name: string;
+    value: number | string;
+    base: number;
+    format: FunnelChartLabelFormat;
+    formatter?: TickFormatter;
+    percentFormatter?: TickFormatter;
+}): string;
+export interface FunnelChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof funnelChartVariants>, ChartAnimationProps {
     /** Row-per-stage data. Each object holds the stage's `nameKey` label + its `dataKey` numeric value. */
     data: ReadonlyArray<Record<string, string | number>>;
     /**
@@ -24,8 +139,91 @@ export interface FunnelChartProps extends Omit<React.ComponentProps<'div'>, 'chi
     nameKey: string;
     /** Flip the funnel so it widens toward the bottom instead of narrowing. */
     reversed?: boolean;
-    /** Render each stage's name beside its segment. */
+    /** Render a label for each stage — see `labelFormat` and `labelPosition`. */
     showLabels?: boolean;
+    /**
+     * What each stage's label says. `percent` is the stage's share of the widest
+     * stage — its conversion from the top of the funnel.
+     */
+    labelFormat?: FunnelChartLabelFormat;
+    /**
+     * Where each stage's label sits. Defaults to `right`, beside the segment.
+     * `inside` centres it on the segment, which only works while every stage is
+     * wide enough to hold the text — a funnel narrows, so its last stages often
+     * are not. Keep the text short there (`percent`) or leave the labels beside
+     * the funnel.
+     */
+    labelPosition?: FunnelChartLabelPosition;
+    /**
+     * Render a second label carrying the stage's value, so the name and the number
+     * can sit on opposite sides of the funnel.
+     */
+    showValueLabels?: boolean;
+    /**
+     * Where the value label sits. Defaults to the side opposite `labelPosition`,
+     * where every stage has room — so it follows the names rather than pinning
+     * itself to one edge. See `labelPosition` before choosing `inside`.
+     */
+    valuePosition?: FunnelChartLabelPosition;
+    /**
+     * Colour for both label lists, overriding the contrast-matched default (the
+     * on-surface token beside the funnel, the on-fill token on a segment). Pass a
+     * `--ui-*` token; only use it when the default doesn't work on your surface.
+     */
+    labelFill?: string;
+    /** Format the numeric part of a label — pass the same formatter used elsewhere. */
+    labelFormatter?: TickFormatter;
+    /**
+     * Format the conversion share behind the `percent` formats. Receives the share
+     * as a fraction (`0.52`); defaults to `funnelChartPercent` (`"52.0%"`). Pass
+     * `createTickFormatter({ style: 'percent', minimumFractionDigits: 1 }, locale)`
+     * 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.
+     */
+    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;
+    /** Per-stage `color` / `hidden` overrides, keyed by the stage's `nameKey` value. */
+    stageSettings?: Record<string, FunnelChartStageSettings>;
+    /** Outline the hovered segment. */
+    showActiveShape?: boolean;
+    /**
+     * Segment border colour. Reference an existing semantic `--ui-*` token.
+     * Defaults to the border token when `strokeWidth` is set on its own.
+     */
+    stroke?: string;
+    /** Segment border width, in px. Implies a default `stroke` when given alone. */
+    strokeWidth?: number;
+    /**
+     * Funnel width — a number in px or a percentage of the plot area (`'70%'`).
+     * Defaults to the full plot area, except that a composite `labelFormat` beside
+     * the funnel narrows it to leave the label real room to wrap into.
+     */
+    funnelWidth?: number | string;
+    /**
+     * Plot-area margin, in px. Merged over the defaults per side, so passing one
+     * side keeps the others.
+     */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
     showTooltip?: boolean;
     /**
      * Replace the default tooltip. Pass a configured `ChartTooltipContent`

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

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

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

@@ -1,4 +1,4 @@
-import { ChartTooltip, ChartConfig } from '../chart';
+import { ChartConfig, CartesianChartProps, ChartAnimationProps } from '../chart';
 import * as React from 'react';
 export interface HistogramBin {
     /** Lower bound of the bin (inclusive). */
@@ -18,7 +18,7 @@ export interface HistogramBin {
  * the package's public API.
  */
 export declare function computeHistogramBins(values: ReadonlyArray<number>, binCount: number, domain?: [number, number]): HistogramBin[];
-export interface HistogramProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+export interface HistogramProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps, ChartAnimationProps {
     /** Raw continuous samples to bin (non-finite values are ignored). */
     values: ReadonlyArray<number>;
     /**
@@ -33,23 +33,8 @@ export interface HistogramProps extends Omit<React.ComponentProps<'div'>, 'child
     binCount?: number;
     /** Fix the binning range instead of deriving it from the data's min/max. */
     domain?: [number, number];
-    /** Title rendered beneath the horizontal (X) axis. */
-    xAxisLabel?: string;
-    /** Title rendered beside the vertical (Y) axis (rotated). */
-    yAxisLabel?: string;
-    /** Unit suffix appended to Y-axis tick values (recharts `unit`; the X axis is the bin label). */
-    yUnit?: string;
     /** Corner radius on the top of each bar. */
     barRadius?: number;
-    showGrid?: boolean;
-    showTooltip?: boolean;
-    /**
-     * Replace the default tooltip. Pass a configured `ChartTooltipContent`
-     * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —
-     * to customize the tooltip without composing recharts yourself. Ignored when
-     * `showTooltip` is false.
-     */
-    tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
 }
 declare const Histogram: React.ForwardRefExoticComponent<Omit<HistogramProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Histogram };

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

@@ -1 +1 @@
-export { LineChart, lineChartVariants, type LineChartProps } from './line-chart';
+export { LineChart, lineChartVariants, type LineChartProps, type LineChartLineSettings, } from './line-chart';

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

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartConfig } from '../chart';
+import { ChartTooltip, ChartConfig, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const lineChartVariants: (props?: ({
-    curve?: "step" | "linear" | "monotone" | null | undefined;
+    curve?: "step" | "linear" | "monotone" | "natural" | "basis" | "stepBefore" | "stepAfter" | null | undefined;
     lineStyle?: "dashed" | "solid" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
@@ -27,7 +27,34 @@ type TooltipRenderProps = Parameters<TooltipContentFn>[0];
  * component is a stable content type (memoize it on `tooltipContent`).
  */
 export declare function createBandStrippedTooltip(tooltipContent: TooltipContentType): (props: TooltipRenderProps) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.FunctionComponentElement<import('recharts').TooltipContentProps<import('recharts').TooltipValueType, import('recharts/types/component/DefaultTooltipContent').NameType>>;
-export interface LineChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof lineChartVariants> {
+/**
+ * Style override for one series, keyed by its `dataKeys` entry. Anything left
+ * unset falls back to the chart-wide prop, so an entry only states what differs
+ * — e.g. one thicker, dashed "target" line among otherwise identical series.
+ *
+ * A series listed in `comparisonKeys` keeps its dashed, dimmed, dot-less
+ * treatment: `color`, `strokeWidth` and `curveType` still apply to it, but
+ * `showDots` / `dotSize` do not (the overlay is defined by having no dots).
+ */
+export interface LineChartLineSettings {
+    /** Stroke color. Defaults to the series' `config` color. */
+    color?: string;
+    /** Stroke width. Defaults to the chart's `strokeWidth`. */
+    strokeWidth?: number;
+    /** Dash this series' stroke, whatever the chart-wide `lineStyle` is. */
+    dashed?: boolean;
+    /** Interpolation for this series only. Defaults to the chart's `curve`. */
+    curveType?: ChartCurveType;
+    /** Render this series' per-point dots. Defaults to the chart's `showDots`. */
+    showDots?: boolean;
+    /** Dot radius for this series, in px. Defaults to the chart's `dotSize`. */
+    dotSize?: number;
+    /** Show/hide this series' value labels, overriding the chart's `showLabels`. */
+    showLabel?: boolean;
+    /** Position of this series' value labels. Defaults to the chart's `labelPosition`. */
+    labelPosition?: CartesianLabelPosition;
+}
+export interface LineChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof lineChartVariants>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
     /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the line unless `connectNulls`). */
     data: ReadonlyArray<Record<string, string | number | null>>;
     /**
@@ -56,28 +83,34 @@ export interface LineChartProps extends Omit<React.ComponentProps<'div'>, 'child
     deltaBands?: Array<[string, string]>;
     /** Category axis key (the shared dimension across rows, e.g. `"month"`). */
     xKey: string;
-    /** Title rendered beneath the horizontal (X) axis. */
-    xAxisLabel?: string;
-    /** Title rendered beside the vertical (Y) axis (rotated). */
-    yAxisLabel?: string;
-    /** Unit suffix appended to Y-axis tick values (recharts `unit`; the X axis is categorical). */
-    yUnit?: string;
     /** Stroke width of each line. */
     strokeWidth?: number;
     /** Render a dot at each data point. */
     showDots?: boolean;
+    /** Radius of each point's dot, in px. Its hover dot is 2px larger. */
+    dotSize?: number;
+    /**
+     * Enlarge the hovered point's dot. Defaults to following `showDots`, so pass
+     * it explicitly to get hover dots on a dot-less line (`showDots={false}`
+     * with `showActiveDot`) or a static-only line (dots without the hover one).
+     */
+    showActiveDot?: boolean;
     /** Bridge `null` gaps in the data instead of breaking the line. */
     connectNulls?: boolean;
-    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.
+     * Per-series style overrides, keyed by `dataKeys` entry. Series with no entry
+     * render from the chart-wide props.
      */
-    tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+    lineSettings?: Record<string, LineChartLineSettings>;
+    /**
+     * One or more dashed reference/average lines on the value axis — a target, a
+     * threshold, or a series mean. Pass a single object or an array to draw
+     * several at once.
+     */
+    referenceLine?: ChartReferenceLine | ChartReferenceLine[];
+    showLegend?: boolean;
+    /** Position of the value labels when `showLabels` is on. Defaults to `top`. */
+    labelPosition?: CartesianLabelPosition;
 }
 declare const LineChart: React.ForwardRefExoticComponent<Omit<LineChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { LineChart, lineChartVariants };

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

@@ -1 +1 @@
-export { PieChart, pieChartVariants, type PieChartProps, type PieChartCenterLabel, } from './pie-chart';
+export { PieChart, pieChartVariants, type PieChartProps, type PieChartCenterLabel, type PieChartLabelFormat, type PieChartTooltipFormat, type PieChartSliceSettings, } from './pie-chart';

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

@@ -1,18 +1,88 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartConfig } from '../chart';
+import { ChartTooltip, ChartConfig, ChartTooltipContentProps, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
 import * as React from 'react';
 declare const pieChartVariants: (props?: ({
     shape?: "pie" | "donut" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Row-per-slice datum: the `nameKey` label plus the `dataKey` value. */
+type PieChartDatum = Record<string, string | number>;
+/**
+ * What a slice's data label reads. `percent` is the slice's share of the sum of
+ * every slice value, to one decimal.
+ */
+export type PieChartLabelFormat = 'value' | 'name-value' | 'name-percent' | 'percent';
+/** What the tooltip's value reads — the raw value, or the value and its share. */
+export type PieChartTooltipFormat = 'value' | 'value-percent';
+/** Per-slice overrides, keyed by the slice's `nameKey` value. */
+export interface PieChartSliceSettings {
+    /**
+     * Fill for this slice, overriding its `config` color. Reference an existing
+     * semantic `--ui-*` token, same as `config`.
+     */
+    color?: string;
+    /** Drop this slice's data label while every other slice keeps its own. */
+    hideLabel?: boolean;
+    /** Label format for this slice only — overrides the chart-level `labelFormat`. */
+    labelFormat?: PieChartLabelFormat;
+}
+/**
+ * Compose one slice's data-label text. Exported for unit tests; not part of the
+ * package's public API.
+ *
+ * A percent needs a numeric slice value *and* a non-zero total, and a value
+ * label needs a value at all — so every format degrades rather than printing
+ * `NaN%` or a dangling `"Chrome: "`. The two name-carrying formats fall back to
+ * the bare name; the value-only ones to `''`, which `resolveSliceLabel`
+ * normalizes to `null` (the one value recharts renders no `<text>` for).
+ *
+ * `labelFormatter` formats the slice's *value*, so it reaches `value` and
+ * `name-value` only. A percent is always composed by `slicePercentText` and
+ * never passes through the formatter.
+ */
+export declare function pieChartLabelText(options: {
+    format: PieChartLabelFormat;
+    name: string | number;
+    value: string | number | undefined;
+    total: number;
+    formatter?: TickFormatter;
+}): string;
+/**
+ * The row renderer behind `tooltipFormat="value-percent"` — a slice's value
+ * followed by its share. Exported for unit tests; not part of the package's
+ * public API.
+ *
+ * A `formatter` replaces the default row wholesale, so the swatch and the name
+ * are rebuilt here to match it: the shared `ChartTooltipContent` prefers a
+ * `config` entry's `icon` over the color swatch, and this has to do the same or
+ * a chart with icons would silently lose them under this preset — and the
+ * name/value `gap-4`, which has to be repeated here because a `formatter`
+ * replaces the shared row that carries it.
+ */
+export declare function pieChartValuePercentRow(options: {
+    config: ChartConfig;
+    total: number;
+}): NonNullable<ChartTooltipContentProps['formatter']>;
+/**
+ * The configured `ChartTooltipContent` for `tooltipFormat="value-percent"`.
+ * Exported so the visual-regression story renders the very same element the
+ * component does — recharts can only open a hover tooltip statically via
+ * `defaultIndex` on a raw composition, so the preset has to be reachable from
+ * outside the component to be snapshotted at all.
+ */
+export declare function pieChartValuePercentTooltip(options: {
+    nameKey: string;
+    config: ChartConfig;
+    total: number;
+}): React.ReactElement;
 export interface PieChartCenterLabel {
     /** Headline metric rendered large in the donut hole (e.g. a total). */
     value?: string | number;
     /** Caption rendered under the value. */
     label?: string | number;
 }
-export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof pieChartVariants> {
+export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof pieChartVariants>, ChartAnimationProps, ChartDataLabelProps {
     /** Row-per-slice data. Each object holds the slice's `nameKey` label + its `dataKey` numeric value. */
-    data: ReadonlyArray<Record<string, string | number>>;
+    data: ReadonlyArray<PieChartDatum>;
     /**
      * Per-slice map of `label` / `color`, keyed by the slice's `nameKey` value
      * (imported from the shared `Chart` primitives). Turned into `--color-<name>`
@@ -40,15 +110,86 @@ export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'childr
     outerRadius?: number;
     /** Gap between slices, in degrees. */
     paddingAngle?: number;
+    /** Corner radius of each slice. */
+    cornerRadius?: number;
+    /**
+     * Angle the sweep starts at, in degrees (0 is 3 o'clock, counter-clockwise).
+     * Pair with `endAngle` for a semicircle (`180` → `0`) or an arc.
+     *
+     * A partial sweep still centres on the full plot area, so a half turn fills
+     * only half its box — give the chart a short, wide one rather than expecting
+     * the arc to grow into a square.
+     */
+    startAngle?: number;
+    /** Angle the sweep ends at, in degrees. Defaults to a full `360` circle. */
+    endAngle?: number;
+    /**
+     * Smallest angle a non-zero slice may occupy, in degrees — keeps a tiny slice
+     * visible (and hoverable) at the cost of being drawn out of proportion.
+     */
+    minAngle?: number;
+    /**
+     * Per-slice overrides keyed by the slice's `nameKey` value: its `color`, and
+     * whether/how its data label reads. A name with no entry keeps the chart-level
+     * behavior.
+     */
+    sliceSettings?: Record<string, PieChartSliceSettings>;
     showTooltip?: boolean;
     showLegend?: boolean;
+    /** Which edge the legend sits on. Defaults to `bottom`. */
+    legendPosition?: 'top' | 'bottom';
+    /** Plot-area margin, in px. Omit to use recharts' default (5 on every side). */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
     /**
      * Replace the default tooltip. Pass a configured `ChartTooltipContent`
      * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —
      * to customize formatting, per-slice rows, or extra fields without composing
-     * recharts yourself. Ignored when `showTooltip` is false.
+     * recharts yourself. Takes precedence over `tooltipFormat`. Ignored when
+     * `showTooltip` is false.
      */
     tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+    /**
+     * How the default tooltip reads a slice: its `value` alone (the default), or
+     * the value followed by its share of the total (`value-percent`). The preset
+     * covers the common case without hand-rolling a `tooltipContent`.
+     *
+     * The share is rendered as `NN.N%`, same as a data label's — not locale-aware.
+     * Pass your own `tooltipContent` if you need to format it.
+     */
+    tooltipFormat?: PieChartTooltipFormat;
+    /**
+     * Position of the value labels when `showLabels` is on. Defaults to `outside`,
+     * which keeps them on the chart surface — the only placement that reliably
+     * has contrast, since slice fills are caller-supplied saturated colors. The
+     * on-arc placements are available but switch to the on-fill label token.
+     * Ignored when `labelLine` is on — a leader line only ever ends outside the arc.
+     */
+    labelPosition?: PolarLabelPosition;
+    /**
+     * What each data label reads when `showLabels` is on — the value alone (the
+     * default), or the slice name and/or its share of the total. Overridable per
+     * slice via `sliceSettings`.
+     *
+     * `labelFormatter` formats the slice's *value*, so it reaches `value` and
+     * `name-value` only: a share is always rendered as `NN.N%` (a `.` decimal and
+     * a bare `%`, not locale-aware) and never passes through the formatter.
+     */
+    labelFormat?: PieChartLabelFormat;
+    /**
+     * Draw a leader line from each slice to its data label, in the slice's own
+     * color. Moves the labels outside the arc (see `labelPosition`); slices whose
+     * label is hidden by `sliceSettings` get no line either.
+     *
+     * A label reaching out past the arc needs horizontal room — give the chart a
+     * box wider than it is tall, or shrink the arc (`outerRadius`/`margin`), or
+     * the outermost labels are clipped at the surface edge.
+     */
+    labelLine?: boolean;
 }
 declare const PieChart: React.ForwardRefExoticComponent<Omit<PieChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { PieChart, pieChartVariants };

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

@@ -1 +1 @@
-export { RadarChart, radarChartVariants, type RadarChartProps } from './radar-chart';
+export { RadarChart, radarChartVariants, type RadarChartProps, type RadarChartSeriesSettings, } from './radar-chart';