@acronis-platform/ui-react 0.57.1 → 0.60.0

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

@@ -24,4 +24,16 @@ export interface PopoverContentProps extends React.ComponentPropsWithoutRef<type
     keepMounted?: PopoverPrimitive.Portal.Props['keepMounted'];
 }
 declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
-export { Popover, PopoverTrigger, PopoverPortal, PopoverContent };
+/**
+ * Vertical-rhythm wrapper for a `PopoverContent`'s main content — the `Body`
+ * slot in the Figma node. Themed from `--ui-popover-body-*` (gap, padding-y);
+ * horizontal inset is a plain utility since the design has no dedicated
+ * component token for it.
+ */
+declare const PopoverBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Default action-row footer — the `FooterDefault` (`variant=default`) recipe
+ * from the Figma node. Themed from the shared `--ui-footer-*` tier.
+ */
+declare const PopoverFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverPortal, PopoverContent, PopoverBody, PopoverFooter, };

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

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

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

@@ -0,0 +1,40 @@
+import { VariantProps } from 'class-variance-authority';
+import { ChartTooltip, ChartConfig } from '../chart';
+import * as React from 'react';
+declare const radarChartVariants: (props?: ({
+    gridType?: "circle" | "polygon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof radarChartVariants> {
+    /** Row-per-axis data. Each object holds the `angleKey` label + one numeric field per series. */
+    data: ReadonlyArray<Record<string, string | number>>;
+    /**
+     * Per-series map of `label` / `color` (imported from the shared `Chart`
+     * primitives). Turned into `--color-<key>` custom properties. Series colors
+     * are caller-supplied — reference an existing semantic `--ui-*` token; there is
+     * no chart palette tier yet.
+     */
+    config: ChartConfig;
+    /** Series to plot — one `<Radar>` per key. Each must exist in `config` and in every data row. */
+    dataKeys: string[];
+    /** The categorical axis key placed around the web (e.g. `"subject"`). */
+    angleKey: string;
+    /** Fill opacity of each radar area. */
+    fillOpacity?: number;
+    /** Stroke width of each radar outline. */
+    strokeWidth?: number;
+    /** Render a dot at each axis point. */
+    showDots?: boolean;
+    /** Render the polar grid (the web). */
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    /**
+     * Replace the default tooltip. Pass a configured `ChartTooltipContent`
+     * (imported from this library) — e.g. with a `formatter` / `labelFormatter` /
+     * `indicator` — to customize formatting, per-series rows, or extra fields
+     * without composing recharts yourself. Ignored when `showTooltip` is false.
+     */
+    tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+}
+declare const RadarChart: React.ForwardRefExoticComponent<Omit<RadarChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { RadarChart, radarChartVariants };

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

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

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

@@ -0,0 +1,45 @@
+import { ChartTooltip, ChartConfig } from '../chart';
+import * as React from 'react';
+export interface RadialBarChartProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** Row-per-arc data. Each object holds the arc's `nameKey` label + its `dataKey` numeric value. */
+    data: ReadonlyArray<Record<string, string | number>>;
+    /**
+     * Per-arc map of `label` / `color`, keyed by the arc's `nameKey` value
+     * (imported from the shared `Chart` primitives). Turned into `--color-<name>`
+     * custom properties. Colors are caller-supplied — reference an existing
+     * semantic `--ui-*` token; there is no chart palette tier yet.
+     */
+    config: ChartConfig;
+    /** Numeric field that sizes each arc. */
+    dataKey: string;
+    /**
+     * Label field that names each arc (drives the legend, tooltip, and
+     * `--color-<name>` lookup). Values should be unique per chart (arcs sharing a
+     * name share one `config`/color entry) and CSS-safe — they become part of a
+     * custom-property name.
+     */
+    nameKey: string;
+    /** Inner radius of the innermost arc. */
+    innerRadius?: number;
+    /** Outer radius of the outermost arc. */
+    outerRadius?: number;
+    /** Angle (degrees) the arcs sweep from. */
+    startAngle?: number;
+    /** Angle (degrees) the arcs sweep to (default is a full clockwise circle). */
+    endAngle?: number;
+    /** Corner radius on each arc's ends. */
+    cornerRadius?: number;
+    /** Render a muted background track behind each arc. */
+    showBackground?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    /**
+     * Replace the default tooltip. Pass a configured `ChartTooltipContent`
+     * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —
+     * to customize formatting, per-arc rows, or extra fields without composing
+     * recharts yourself. Ignored when `showTooltip` is false.
+     */
+    tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+}
+declare const RadialBarChart: React.ForwardRefExoticComponent<Omit<RadialBarChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { RadialBarChart };

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

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

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

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

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

@@ -0,0 +1 @@
+export { ScatterChart, type ScatterChartProps, type ScatterSeries, type ScatterMarkerShape, } from './scatter-chart';

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

@@ -0,0 +1,35 @@
+import { ChartConfig, CartesianChartProps } from '../chart';
+import * as React from 'react';
+export type ScatterMarkerShape = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+export interface ScatterSeries {
+    /** Series key — must match a `config` entry; drives its `--color-<key>` fill and legend label. */
+    key: string;
+    /** This series' points — each row holds at least `xKey` and `yKey` (and `zKey` when used). */
+    data: ReadonlyArray<Record<string, number>>;
+}
+export interface ScatterChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps {
+    /** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */
+    series: ScatterSeries[];
+    /**
+     * Per-series map of `label` / `color`, keyed by `series[].key` (imported from
+     * the shared `Chart` primitives). Turned into `--color-<key>` custom
+     * properties. Colors are caller-supplied — reference an existing semantic
+     * `--ui-*` token; there is no chart palette tier yet.
+     */
+    config: ChartConfig;
+    /** Numeric field for the horizontal axis. */
+    xKey: string;
+    /** Numeric field for the vertical axis. */
+    yKey: string;
+    /** Unit suffix appended to X-axis tick values (recharts `unit`). */
+    xUnit?: string;
+    /** Optional numeric field mapped to point size (a bubble chart), via recharts `ZAxis`. */
+    zKey?: string;
+    /** Point-size range `[min, max]` the `zKey` maps into. Ignored when `zKey` is unset (points use recharts' default size). */
+    zRange?: [number, number];
+    /** Marker shape for every point. */
+    shape?: ScatterMarkerShape;
+    showLegend?: boolean;
+}
+declare const ScatterChart: React.ForwardRefExoticComponent<Omit<ScatterChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ScatterChart };

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

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const stackVariants: (props?: ({
     direction?: "horizontal" | "vertical" | null | undefined;
-    gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    gap?: "none" | "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
     align?: "center" | "end" | "start" | "stretch" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | null | undefined;
     wrap?: boolean | null | undefined;

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

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

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

@@ -0,0 +1,41 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const timelineVariants: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+    density?: "compact" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TimelineProps extends React.ComponentProps<'ol'>, VariantProps<typeof timelineVariants> {
+    /**
+     * `Timeline.Item`s — pass them as direct children (the connector auto-hides on
+     * the last one). Grouping/headings aren't supported as intervening children.
+     */
+    children?: React.ReactNode;
+}
+export type TimelineStatus = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'critical';
+export interface TimelineItemProps extends Omit<React.ComponentProps<'li'>, 'title'> {
+    /** Event time — pass a `<time dateTime>` for an accessible, machine-readable stamp. */
+    timestamp?: React.ReactNode;
+    /** Event title (the primary line). */
+    title: React.ReactNode;
+    /** Optional secondary description. */
+    description?: React.ReactNode;
+    /** Semantic status — tints the marker (a subtle cue, never large blocks of text). */
+    status?: TimelineStatus;
+    /** Icon shown in a status-tinted marker badge instead of the plain dot. */
+    icon?: React.ReactNode;
+    /** Metadata slot under the description — e.g. `Tag`s. */
+    metadata?: React.ReactNode;
+    /** Actions slot — e.g. a `Link` or `ButtonMenu`. */
+    actions?: React.ReactNode;
+    /** Emphasize this item as the current one (a ringed marker). */
+    current?: boolean;
+    /** Dim a non-applicable / inactive item. */
+    disabled?: boolean;
+    /** Expandable detail composed by the caller — e.g. an `Accordion`. */
+    children?: React.ReactNode;
+}
+declare const TimelineItem: React.ForwardRefExoticComponent<Omit<TimelineItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const Timeline: React.ForwardRefExoticComponent<Omit<TimelineProps, "ref"> & React.RefAttributes<HTMLOListElement>> & {
+    Item: React.ForwardRefExoticComponent<Omit<TimelineItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+};
+export { Timeline, TimelineItem };

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

@@ -0,0 +1 @@
+export { Treemap, type TreemapProps } from './treemap';

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

@@ -0,0 +1,44 @@
+import { ChartTooltip, ChartConfig } from '../chart';
+import * as React from 'react';
+interface TreemapCellProps {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    name?: string;
+    showLabels?: boolean;
+}
+export declare function TreemapCell({ x, y, width, height, name, showLabels, }: TreemapCellProps): import("react/jsx-runtime").JSX.Element;
+export interface TreemapProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** Row-per-leaf data. Each object holds the leaf's `nameKey` label + its `dataKey` numeric size. */
+    data: ReadonlyArray<Record<string, string | number>>;
+    /**
+     * Per-leaf map of `label` / `color`, keyed by the leaf's `nameKey` value
+     * (imported from the shared `Chart` primitives). Turned into `--color-<name>`
+     * custom properties. Colors are caller-supplied — reference an existing
+     * semantic `--ui-*` token; there is no chart palette tier yet.
+     */
+    config: ChartConfig;
+    /** Numeric field that sizes each leaf's rectangle. */
+    dataKey: string;
+    /**
+     * Label field that names each leaf (drives the on-cell label, tooltip, and
+     * `--color-<name>` lookup). Values should be unique and CSS-safe (they become
+     * part of a custom-property name).
+     */
+    nameKey: string;
+    /** Width-to-height ratio the tiling targets. */
+    aspectRatio?: number;
+    /** Render each leaf's name inside its cell (when it fits). */
+    showLabels?: boolean;
+    showTooltip?: boolean;
+    /**
+     * Replace the default tooltip. Pass a configured `ChartTooltipContent`
+     * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —
+     * to customize formatting, per-cell rows, or extra fields without composing
+     * recharts yourself. Ignored when `showTooltip` is false.
+     */
+    tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+}
+declare const Treemap: React.ForwardRefExoticComponent<Omit<TreemapProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Treemap };

package/dist/src/components/ui/trend-indicator/index.d.ts

@@ -0,0 +1 @@
+export { TrendIndicator, trendIndicatorVariants, type TrendIndicatorProps, } from './trend-indicator';

package/dist/src/components/ui/trend-indicator/trend-indicator.d.ts

@@ -0,0 +1,32 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const trendIndicatorVariants: (props?: ({
+    sentiment?: "neutral" | "positive" | "negative" | null | undefined;
+    size?: "small" | "medium" | null | undefined;
+    variant?: "inline" | "badge" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TrendIndicatorProps extends Omit<React.ComponentProps<'span'>, 'children'>, VariantProps<typeof trendIndicatorVariants> {
+    /** What changed mathematically — selects the direction glyph. */
+    direction: 'up' | 'down' | 'flat';
+    /**
+     * Already-formatted change to display — e.g. `"12%"`, `"3.5 h"`,
+     * `"Improving"`, `"4.2 h → 2.8 h"`. The kit does not format or compute it.
+     */
+    value?: React.ReactNode;
+    /** Secondary comparison caption — e.g. `"vs previous quarter"`, `"YoY"`. */
+    comparisonLabel?: React.ReactNode;
+    /** Contextual hint shown on hover/focus (Base UI Tooltip). */
+    tooltip?: React.ReactNode;
+    /** Show the leading direction glyph. Defaults to `true` — color alone isn't enough. */
+    showIcon?: boolean;
+    /**
+     * Accessible sentence describing the trend (e.g. "Revenue increased 12%
+     * compared with the previous quarter"). Applied as the element's label via
+     * `role="img"`, since the kit can't build a correct, localized sentence from
+     * `direction` + `value` alone. Without it, assistive tech reads the visible
+     * `value` / `comparisonLabel` text (the glyph is decorative).
+     */
+    ariaLabel?: string;
+}
+declare const TrendIndicator: React.ForwardRefExoticComponent<Omit<TrendIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { TrendIndicator, trendIndicatorVariants };

package/dist/src/index.d.ts

@@ -1,10 +1,12 @@
 export { cn } from './lib/utils';
 export * from './hooks';
+export * from './lib/breakpoints';
 export { PortalContainerProvider, usePortalContainer, type PortalContainerProviderProps, } from './lib/portal-container';
 export * from './components/ui/accordion';
 export * from './components/ui/alert';
 export * from './components/ui/app-shell';
 export * from './components/ui/app-shell-chat';
+export * from './components/ui/area-chart';
 export * from './components/ui/auth-layout';
 export * from './components/ui/avatar';
 export * from './components/ui/bar-chart';
@@ -14,36 +16,56 @@ export * from './components/ui/button-menu';
 export * from './components/ui/calendar';
 export * from './components/ui/card';
 export * from './components/ui/card-filter';
+export * from './components/ui/category-bar';
 export * from './components/ui/chart';
+export * from './components/ui/chart-state';
 export * from './components/ui/checkbox';
 export * from './components/ui/chip';
 export * from './components/ui/collapsible';
 export * from './components/ui/combobox';
+export * from './components/ui/composed-chart';
+export * from './components/ui/confidence-cone';
 export * from './components/ui/data-table';
 export * from './components/ui/date-range-picker';
 export * from './components/ui/description-list';
-export * from './components/ui/dialog';
+export { Dialog, DialogClose, type DialogProps, type DialogVariant, } from './components/ui/dialog';
+export * from './components/ui/dialog-footer-carousel';
+export * from './components/ui/dialog-footer-default';
+export * from './components/ui/dialog-welcome';
 export * from './components/ui/dropdown-menu';
 export * from './components/ui/empty';
 export * from './components/ui/field';
+export * from './components/ui/funnel-chart';
 export * from './components/ui/grid';
+export * from './components/ui/histogram';
 export * from './components/ui/form';
+export * from './components/ui/radar-chart';
+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-otp';
+export * from './components/ui/input-password';
 export * from './components/ui/input-search';
 export * from './components/ui/input-select';
 export * from './components/ui/input-text';
 export * from './components/ui/input-text-area';
 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';
 export * from './components/ui/page-header';
 export * from './components/ui/pagination';
+export * from './components/ui/pie-chart';
 export * from './components/ui/popover';
 export * from './components/ui/progress';
 export * from './components/ui/progress-circle';
+export * from './components/ui/sankey-chart';
+export * from './components/ui/scatter-chart';
 export * from './components/ui/scroll-area';
 export * from './components/ui/search-global';
 export { InputText as Input, type InputTextProps as InputProps, } from './components/ui/input-text';
@@ -55,12 +77,12 @@ export * from './components/ui/separator';
 export * from './components/ui/sheet';
 export * from './components/ui/skeleton';
 export * from './components/ui/slider';
-export * from './components/ui/spinner';
 export * from './components/ui/stack';
 export * from './components/ui/resizable';
 export * from './components/ui/sidebar-primary';
 export * from './components/ui/sidebar-secondary';
 export * from './components/ui/button-icon';
+export * from './components/ui/button-icon-input';
 export * from './components/ui/filter-search';
 export * from './components/ui/switch';
 export * from './components/ui/table';
@@ -70,5 +92,8 @@ export * from './components/ui/toggle-group';
 export * from './components/ui/toolbar';
 export * from './components/ui/tooltip';
 export * from './components/ui/tag';
+export * from './components/ui/timeline';
 export { Tag as Badge, type TagProps as BadgeProps, } from './components/ui/tag';
+export * from './components/ui/treemap';
+export * from './components/ui/trend-indicator';
 export * from './components/ui/widget-placeholder';