@acronis-platform/ui-react 4.1.0 → 5.1.0

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/line-chart/line-chart.d.ts

@@ -26,7 +26,7 @@ type TooltipRenderProps = Parameters<TooltipContentFn>[0];
  * function-form tooltip keeps its state across re-renders here too. The returned
  * 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 declare function createBandStrippedTooltip(tooltipContent: TooltipContentType): (props: TooltipRenderProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * 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
@@ -113,6 +113,16 @@ export interface LineChartProps extends Omit<React.ComponentProps<'div'>, 'child
      * several at once.
      */
     referenceLine?: ChartReferenceLine | ChartReferenceLine[];
+    /**
+     * The category value (matching an `xKey` entry) at which the projection
+     * zone starts. Ticks from this point onward render in the disabled text
+     * color (`--ui-text-on-surface-disabled`). The chart data and series
+     * themselves are not affected — only the X-axis tick appearance changes.
+     *
+     * Use this when displaying a forecast/projection range where future
+     * data points should be visually de-emphasized on the axis.
+     */
+    projectionStart?: string | number;
     showLegend?: boolean;
     /** Position of the value labels when `showLabels` is on. Defaults to `top`. */
     labelPosition?: CartesianLabelPosition;

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/components/ui/separator/separator.d.ts

@@ -1,3 +1,11 @@
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const separatorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "S1" | "S2" | "S3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface SeparatorProps extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive>, Pick<VariantProps<typeof separatorVariants>, 'size'> {
+}
+declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
 export { Separator };

package/dist/src/components/ui/sidebar-secondary/sidebar-secondary.d.ts

@@ -8,6 +8,14 @@ export interface SidebarSecondaryProps extends React.ComponentPropsWithoutRef<'n
     defaultExpanded?: boolean;
     /** Fires when the expanded state changes (e.g. a consumer toggle). */
     onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Allow the user to collapse/expand the panel (resize-edge click, drag past
+     * the collapse threshold, keyboard, and the footer collapse trigger).
+     * When `false` those interactions never change `expanded` and the footer
+     * trigger renders `disabled`; dragging still resizes the panel, clamped to
+     * the minimum width. Defaults to `true`.
+     */
+    collapsible?: boolean;
     /**
      * Enable the draggable resize edge on the right border.
      * When `true`, the sidebar can be resized between the expanded-width token
@@ -20,9 +28,17 @@ export interface SidebarSecondaryProps extends React.ComponentPropsWithoutRef<'n
     onWidthChange?: (width: number) => void;
     /** Accessible label for the resize edge (`role="separator"`). Defaults to `'Resize sidebar'`. */
     resizeAriaLabel?: string;
-    /** Tooltip content shown when the sidebar is expanded. Pass `null` to hide the tooltip entirely. */
+    /**
+     * Tooltip content shown when the sidebar is expanded. Pass `null` to hide
+     * the tooltip entirely. The default omits the "Collapse: Click" line when
+     * `collapsible` is `false`, since that gesture does nothing then.
+     */
     resizeTooltipExpanded?: React.ReactNode;
-    /** Tooltip content shown when the sidebar is collapsed. Pass `null` to hide the tooltip entirely. */
+    /**
+     * Tooltip content shown when the sidebar is collapsed. Pass `null` to hide
+     * the tooltip entirely. When `collapsible` is `false` the default narrows to
+     * "Reset size: Double click" — the one gesture that still has an effect.
+     */
     resizeTooltipCollapsed?: React.ReactNode;
     /**
      * Replace the rendered `<nav>` with another element or component
@@ -105,7 +121,11 @@ declare const SidebarSecondaryMenuItemExtras: React.ForwardRefExoticComponent<Si
 export interface SidebarSecondaryCollapseTriggerProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> {
     /** Leading 16px icon (e.g. a panel-left glyph). Rotates 180° between expanded/collapsed — same as `SidebarPrimaryCollapseTrigger`. */
     icon?: React.ReactNode;
-    /** Tooltip text shown when the sidebar is collapsed. Defaults to `'Expand'`. */
+    /**
+     * Tooltip text shown when the sidebar is collapsed. Defaults to `'Expand'`.
+     * Not shown when the panel is `collapsible={false}` — the trigger is
+     * disabled then, so the copy would advertise an action that can't run.
+     */
     expandTooltip?: React.ReactNode;
     /** Trailing extras (e.g. a keyboard shortcut hint), same slot as `SidebarSecondaryMenuItem`. */
     extras?: React.ReactNode;

package/dist/src/components/ui/tree-item/index.d.ts

@@ -0,0 +1 @@
+export { TreeItem, type TreeItemProps } from './tree-item';

package/dist/src/components/ui/tree-item/tree-item.d.ts

@@ -0,0 +1,64 @@
+import { useRender } from '@base-ui/react/use-render';
+import { Checkbox } from '../checkbox';
+import * as React from 'react';
+export interface TreeItemProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The row's label. Rendered as the row's own text, so it is a prop with the
+     * literal only as its default (never inlined) — pass a localized string.
+     *
+     * Note this shadows the native `title` tooltip attribute on the underlying
+     * `<div>`: the Figma component names this property `title`, and it is the
+     * row's visible label, not a tooltip.
+     */
+    title?: string;
+    /** Show the leading icon slot. */
+    hasIcon?: boolean;
+    /**
+     * The leading icon. Only rendered when `hasIcon` is true; falls back to the
+     * design's `SquareDashedIcon` placeholder, which is what the Figma node shows.
+     */
+    icon?: React.ReactNode;
+    /** Show a leading `Checkbox`. */
+    hasCheckbox?: boolean;
+    /**
+     * Props forwarded verbatim to the leading `Checkbox` — this row holds no
+     * checked state of its own, so control it from here (`checked` /
+     * `onCheckedChange`) exactly as you would a standalone `Checkbox`. Defaults
+     * its `aria-label` to `title`, since the box renders without a visible label.
+     */
+    checkboxProps?: React.ComponentPropsWithoutRef<typeof Checkbox>;
+    /**
+     * Show the leading expand chevron. Purely a visual affordance: this row does
+     * not implement expand/collapse and renders no nested list — the consumer owns
+     * that state and composes the child rows.
+     */
+    isExpandable?: boolean;
+    /**
+     * Whether the row's nested list is currently expanded. Purely visual — like
+     * `isExpandable`, this row owns no expand/collapse state and renders no
+     * nested list. Rotates the leading chevron to reflect the state the consumer
+     * is already tracking (and should also be reflecting via `aria-expanded` on
+     * their own `render` target, e.g. `<li role="treeitem" aria-expanded={open}>`).
+     * Has no effect when `isExpandable` is false.
+     */
+    expanded?: boolean;
+    /** Render the trailing extras slot (`children`) at all. */
+    hasExtras?: boolean;
+    /**
+     * Whether the row is selected. Drives the persistent highlighted background —
+     * the same fill Figma's `state=active` swatch previews.
+     */
+    selected?: boolean;
+    /**
+     * Trailing extras — action buttons, a count badge. Only rendered when
+     * `hasExtras` is true.
+     */
+    children?: React.ReactNode;
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition) — e.g. the `<li role="treeitem">` of a real ARIA tree.
+     */
+    render?: useRender.RenderProp;
+}
+declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLDivElement>>;
+export { TreeItem };

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

@@ -30,8 +30,20 @@ interface TreemapCellProps {
     secondaryLabel?: string;
     showLabels?: boolean;
     labelAlign?: TreemapLabelAlign;
+    /**
+     * How the leaf's fill relates to text contrast. Stamped by `Treemap` onto each
+     * row before recharts hands it to the cell renderer. Auto-computed from the
+     * resolved token name suffix:
+     *
+     * - `'dark'` — saturated/dark in both themes → always white text.
+     * - `'pale'` — pale in both themes → always dark text (via theme-adaptive token).
+     * - `'inverts'` — dark in light, pale in dark (sequential stops 7–8 whose
+     *   `light-dark()` values mirror across themes) → white text in light, dark text
+     *   in dark, achieved by a `light-dark()` color value in CSS.
+     */
+    fillTone?: 'dark' | 'pale' | 'inverts';
 }
-export declare function TreemapCell({ x, y, width, height, name, primaryLabel, secondaryLabel, showLabels, labelAlign, }: TreemapCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreemapCell({ x, y, width, height, name, primaryLabel, secondaryLabel, showLabels, labelAlign, fillTone, }: TreemapCellProps): import("react/jsx-runtime").JSX.Element;
 export interface TreemapProps extends Omit<React.ComponentProps<'div'>, 'children'>, ChartAnimationProps {
     /**
      * The dataviz palette this chart's series are painted from. Series that
@@ -70,10 +82,9 @@ export interface TreemapProps extends Omit<React.ComponentProps<'div'>, 'childre
     /** Render each leaf's label inside its cell (when it fits). */
     showLabels?: boolean;
     /**
-     * Where a cell's label sits. Defaults to `bottom-start` — the design's
-     * placement, which keeps the label anchored to a tile corner as the tiling
-     * reflows. `top-start` anchors it to the opposite corner; `center` centers the
-     * block in the tile. The corner variants are named for the tile's *start* edge
+     * Where a cell's label sits. Defaults to `center` — the Figma-canonical placement.
+     * `bottom-start` anchors the block to the tile's bottom start corner; `top-start`
+     * to the top start corner. The corner variants are named for the tile's *start* edge
      * because they mirror under `dir="rtl"`.
      */
     labelAlign?: TreemapLabelAlign;

package/dist/src/index.d.ts

@@ -18,6 +18,7 @@ export * from './components/ui/calendar-panel';
 export * from './components/ui/card';
 export * from './components/ui/card-filter';
 export * from './components/ui/card-section';
+export * from './components/ui/card-widget-carousel';
 export * from './components/ui/category-bar';
 export * from './components/ui/chart';
 export * from './components/ui/chart-state';
@@ -61,7 +62,6 @@ export * from './components/ui/label';
 export * from './components/ui/line-chart';
 export * from './components/ui/link';
 export * from './components/ui/loading';
-export * from './components/ui/meter';
 export * from './components/ui/metric';
 export * from './components/ui/number-field';
 export * from './components/ui/page-content';
@@ -105,6 +105,7 @@ export * from './components/ui/tag';
 export * from './components/ui/timeline';
 export * from './components/ui/timer';
 export { Tag as Badge, type TagProps as BadgeProps, } from './components/ui/tag';
+export * from './components/ui/tree-item';
 export * from './components/ui/treemap';
 export * from './components/ui/trend-indicator';
 export * from './components/ui/widget-placeholder';