@acronis-platform/ui-react 4.0.0 → 5.0.0

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

@@ -80,6 +80,13 @@ export type ChartLegendContentProps = {
      * stringified with `String()`.
      */
     valueFormatter?: (value: string | number) => string;
+    /**
+     * Extra Tailwind class(es) applied to the right-hand value in a list entry,
+     * merged on top of the default colour (`text-[var(--ui-text-on-surface-link-idle)]`).
+     * Pass a replacement colour class to override the default; other utilities
+     * (e.g. `tabular-nums`) are additive and leave the default colour in place.
+     */
+    valueClassName?: string;
 };
 export interface ChartContainerProps extends React.ComponentProps<'div'> {
     /**
@@ -110,5 +117,5 @@ declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
 export type ChartTooltipContentType = React.ComponentProps<typeof ChartTooltip>['content'];
 declare function ChartTooltipContent({ active, payload, label, className, hideLabel, hideIndicator, labelFormatter, formatter, labelClassName, color, nameKey, labelKey, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
 declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, config: configFromProps, variant, valueKey, valueFormatter, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, config: configFromProps, variant, valueKey, valueFormatter, valueClassName, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

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

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

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

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

package/dist/src/components/ui/input-num-picker/index.d.ts

@@ -0,0 +1 @@
+export { InputNumPicker, type InputNumPickerProps } from './input-num-picker';

package/dist/src/components/ui/input-num-picker/input-num-picker.d.ts

@@ -0,0 +1,14 @@
+import { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';
+import * as React from 'react';
+export interface InputNumPickerProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Root>, 'children'> {
+    /** Field label, rendered above the stepper box. */
+    label?: React.ReactNode;
+    /** Marks the field required — appends a `*` after the label. */
+    required?: boolean;
+    /** Accessible label for the decrement button. */
+    decrementLabel?: string;
+    /** Accessible label for the increment button. */
+    incrementLabel?: string;
+}
+declare const InputNumPicker: React.ForwardRefExoticComponent<InputNumPickerProps & React.RefAttributes<HTMLInputElement>>;
+export { InputNumPicker };

package/dist/src/components/ui/input-select/input-select.d.ts

@@ -30,11 +30,43 @@ declare const InputSelectContent: React.ForwardRefExoticComponent<Omit<Omit<impo
     align?: SelectPrimitive.Positioner.Props["align"];
     side?: SelectPrimitive.Positioner.Props["side"];
     /**
-     * Container to portal the dropdown into. Defaults to the document body;
-     * pass an element to scope the portal (e.g. a shadow root, so the popup
+     * Offset in px along the alignment axis (perpendicular to `side`). Defaults
+     * to Base UI's own `0` when omitted — pass a value to nudge the dropdown
+     * along the trigger's edge without changing its `align`.
+     */
+    alignOffset?: SelectPrimitive.Positioner.Props["alignOffset"];
+    /**
+     * Collision-avoidance strategy. Defaults to Base UI's own flip/shift
+     * behavior, which may move the dropdown off the requested `side`/`align`
+     * when it doesn't fit. Pass `{ side: 'none', fallbackAxisSide: 'none' }`
+     * alongside an explicit `side`/`align` to lock the popup to that placement
+     * with no auto-flip fallback (e.g. "always to the right, no matter what":
+     * `side="right" sideOffset={20} collisionAvoidance={{ side: 'none',
+     * fallbackAxisSide: 'none' }}`).
+     */
+    collisionAvoidance?: SelectPrimitive.Positioner.Props["collisionAvoidance"];
+    /**
+     * Element (or ref/getter) the popup positions itself against, overriding
+     * the default of anchoring to `InputSelectTrigger`. Use when the visible
+     * trigger isn't the element Base UI tracks internally — e.g. an external
+     * button drives a hidden trigger, and the popup should align with the
+     * button instead of the hidden trigger's layout position.
+     */
+    anchor?: SelectPrimitive.Positioner.Props["anchor"];
+    /**
+     * Container to portal the dropdown into. Defaults to the nearest
+     * `PortalContainerProvider`, or `document.body` when there is none; pass an
+     * element to scope the portal explicitly (e.g. a shadow root, so the popup
      * inherits styles defined there).
      */
     portalContainer?: SelectPrimitive.Portal.Props["container"];
+    /**
+     * Render the dropdown chrome like `PopoverContent` (`--ui-popover-container-*`
+     * tokens, no shadow, fade/zoom/slide enter-exit animation) instead of the
+     * default `--ui-input-select-dropdown-container-*` tokens + static `shadow-md`.
+     * See `components/ui/popover/popover.tsx`.
+     */
+    isPopoverStyled?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 /**
  * In-dropdown search row (magnifier + input). By default it drives the

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

@@ -113,9 +113,9 @@ export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'chil
     fillOpacity?: number;
     /** Stroke width of each radar outline. */
     strokeWidth?: number;
-    /** Render a dot at each axis point. */
+    /** Render a dot at each axis point. Defaults to `true`. */
     showDots?: boolean;
-    /** Radius of the per-point dots when `showDots` is on. */
+    /** Radius of the per-point dots when `showDots` is on. Defaults to `2`. */
     dotRadius?: number;
     /**
      * Enlarge the hovered point's dot. On by default (recharts' behavior) — pass
@@ -148,9 +148,9 @@ export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'chil
     /** 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.
+     * Distance from each polygon vertex to its outer category label, in px.
+     * Defaults to `4` (Figma geometry). When `showLabels` is on and no explicit
+     * value is given, widens automatically to clear the value labels.
      */
     angleTickSize?: number;
     /**
@@ -211,7 +211,11 @@ export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'chil
     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%`. */
+    /**
+     * Vertical centre of the web, in px or a percentage of the height. Defaults to
+     * the middle of the plot band — i.e. `50%` of what the legend leaves, not of
+     * the whole box (see `radarPlotBox`).
+     */
     cy?: number | string;
     /** Angle the first category sits at, in degrees. Defaults to `90` (12 o'clock). */
     startAngle?: number;
@@ -227,7 +231,12 @@ export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'chil
      * 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%`. */
+    /**
+     * Outer radius of the web, in px or a percentage of the available radius.
+     * Defaults to `78px`, matching the Figma radar geometry. The legend and labels
+     * do not change the radius — they change the box it is drawn in (see
+     * `radarPlotBox`).
+     */
     outerRadius?: number | string;
     /**
      * Plot-area margin, in px. Omit it entirely to use recharts' default (5 on
@@ -242,8 +251,6 @@ export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'chil
     };
     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` —
@@ -254,5 +261,31 @@ export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'chil
     /** Position of the value labels when `showLabels` is on. Defaults to `top`. */
     labelPosition?: CartesianLabelPosition;
 }
+/** The chart's own box: the height it reserves, and the polar centre inside it. */
+export interface RadarPlotBox {
+    /**
+     * Tailwind height for the outer element. Merged *before* the consumer's
+     * `className`, so a caller-supplied height still wins.
+     */
+    heightClass: string;
+    /** `cy` for recharts, or `undefined` to keep its own `height / 2` default. */
+    cy: string | undefined;
+}
+/**
+ * Size the chart's box around its category ring, and centre the web in the part
+ * of that box the legend does not take. Exported for unit tests; not part of the
+ * package's public API.
+ *
+ * `ringRadius` is how far the category labels reach from the centre —
+ * `outerRadius + angleTickSize + RADAR_TICK_TEXT_HALF_LINE` — or `undefined`
+ * when `outerRadius` is a percentage, which recharts already fits to the plot
+ * area (legend included) on its own.
+ *
+ * `cy` comes back as a percentage rather than the px it resolves to at the
+ * default height, so a caller-supplied height keeps the proportion instead of
+ * pinning the web to an absolute offset. On a taller box that lifts the web a
+ * little further than the legend alone needs — towards the side with the slack.
+ */
+export declare function radarPlotBox(ringRadius: number | undefined, showLegend: boolean): RadarPlotBox;
 declare const RadarChart: React.ForwardRefExoticComponent<Omit<RadarChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { RadarChart, radarChartVariants };

package/dist/src/index.d.ts

@@ -50,6 +50,7 @@ export * from './components/ui/radial-bar-chart';
 export * from './components/ui/radio';
 export * from './components/ui/input';
 export * from './components/ui/input-date-picker';
+export * from './components/ui/input-num-picker';
 export * from './components/ui/input-otp';
 export * from './components/ui/input-password';
 export * from './components/ui/input-search';