@acronis-platform/ui-react 5.0.0 → 5.1.0

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

@@ -0,0 +1,146 @@
+import type * as React from 'react';
+type BarChartBarShape = 'rounded' | 'pill' | 'gradient' | 'pattern';
+type CartesianLabelPosition = 'top' | 'bottom' | 'left' | 'right' | 'center' | 'insideTop' | 'insideBottom' | 'insideLeft' | 'insideRight' | 'insideStart' | 'insideEnd';
+export interface BarChartItem {
+    /** Row label, shown at the start of the row. */
+    label: string;
+    /** The value this row represents. */
+    value: number;
+    /** Fill color — any CSS color; prefer an existing `--ui-*` token. Required when no `palette` is passed to the chart. */
+    color?: string;
+    /** Palette tone for this row. Resolved against the `palette` prop on the enclosing `BarChart`. */
+    tone?: {
+        status: 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    };
+    /** Projected/forecast total. When greater than `value`, renders a translucent bar (30% opacity) extending from `value` to `forecast`. */
+    forecast?: number;
+}
+export interface BarChartVerticalProps {
+    /** Selects the recharts bar chart. Omit it — this is the default. */
+    orientation?: 'vertical';
+    /** Row-per-category data. Each object holds the category key + one numeric field per series. */
+    data: ReadonlyArray<Record<string, string | number>>;
+    /** Per-series map of `label` / `icon` / `tone`. */
+    config: Record<string, {
+        label: string;
+        icon?: React.ComponentType;
+        color?: string;
+        tone?: string;
+    }>;
+    /** Series to plot — one `<Bar>` per key. Each must exist in `config` and in every data row. */
+    dataKeys: string[];
+    /** Category axis key (the shared dimension across rows, e.g. `"month"`). */
+    xKey: string;
+    /** Dataviz palette for series colors. Series that state no `color` of their own take a stop from it. */
+    palette?: string;
+    /** `"grouped"` (side-by-side, default) or `"stacked"` (summed into one column). */
+    layout?: 'grouped' | 'stacked';
+    /** One or more dashed reference/average lines on the value (Y) axis. */
+    referenceLine?: object | object[];
+    /** One or more shaded bands behind a range of categories. */
+    referenceArea?: object | object[];
+    /** Per-series style override for a range of categories, keyed by `dataKeys` entry. */
+    barSettings?: Record<string, object>;
+    /** Corner radius applied to the growing end of each bar. */
+    barRadius?: number;
+    /** How every bar is painted. Per-range overrides come from `barSettings`. */
+    barShape?: BarChartBarShape;
+    /** Fixed bar thickness, in px. */
+    barSize?: number;
+    /** Upper bound on the computed bar thickness, in px. */
+    maxBarSize?: 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;
+    /** Minimum rendered length for a bar, in px, so a tiny value stays visible. */
+    minPointSize?: number;
+    /** 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;
+    /** Painting of the hovered bar. */
+    activeBar?: {
+        fill?: string;
+        opacity?: number;
+    };
+    /** Show the legend. */
+    showLegend?: boolean;
+    /** Position of the value labels when `showLabels` is on. */
+    labelPosition?: CartesianLabelPosition;
+    /** Render the CartesianGrid. Defaults to `true`. */
+    showGrid?: boolean;
+    /** Render the hover tooltip. Defaults to `true`. */
+    showTooltip?: boolean;
+    /** Replace the default tooltip content. */
+    tooltipContent?: React.ReactNode;
+    /** Title rendered beneath the X axis. */
+    xAxisLabel?: string;
+    /** Title rendered beside the Y axis (rotated). */
+    yAxisLabel?: string;
+    /** Unit suffix appended to the Y axis's tick values. */
+    yUnit?: string;
+    /** Show the X axis. Defaults to `true`. */
+    showXAxis?: boolean;
+    /** Show the Y axis. Defaults to `true`. */
+    showYAxis?: boolean;
+    /** Format each X-axis tick value. */
+    xTickFormatter?: (value: string | number, index: number) => string;
+    /** Format each Y-axis tick value. */
+    yTickFormatter?: (value: string | number, index: number) => string;
+    /** Rotate the X-axis tick labels by this many degrees. */
+    xAxisAngle?: number;
+    /** X-axis tick density. */
+    xAxisInterval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart';
+    /** Desired number of ticks on the value axis. */
+    yAxisTickCount?: number;
+    /** Value-axis domain preset. */
+    yAxisDomain?: 'auto' | 'dataMin-dataMax' | 'zero';
+    /** Draw grid lines dashed instead of solid. Defaults to `true`. */
+    gridDashed?: boolean;
+    /** Show horizontal grid lines. */
+    gridHorizontal?: boolean;
+    /** Show vertical grid lines. */
+    gridVertical?: boolean;
+    /** Enable entrance animation. Defaults to `false`. */
+    animate?: boolean;
+    /** Animation duration in ms. */
+    animationDuration?: number;
+    /** Delay before the animation starts, in ms. */
+    animationBegin?: number;
+    /** Easing curve. */
+    animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+    /** Render a range brush beneath the chart. */
+    showBrush?: boolean;
+    /** Height of the brush strip in px. Defaults to 28. */
+    brushHeight?: number;
+    /** Accessible name for the brush's range handles. */
+    brushAriaLabel?: string;
+    /** Render a value label on each data point. Defaults to `false`. */
+    showLabels?: boolean;
+    /** Format each label value. */
+    labelFormatter?: (value: string | number, index: number) => string;
+    /** Additional CSS class names. */
+    className?: string;
+}
+export interface BarChartHorizontalProps {
+    /** Selects the labelled bar list. */
+    orientation: 'horizontal';
+    /** Rows to render — one labelled bar per item. */
+    items: BarChartItem[];
+    /** Upper bound the values are shares of. Defaults to the sum of every item's value. */
+    max?: number;
+    /** Format the numeric value in the label. Defaults to `toLocaleString()`. */
+    valueFormatter?: (value: number) => string;
+    /** Show the hover tooltip per row. On by default. */
+    showTooltip?: boolean;
+    /** Tooltip content shared by every row (replaces the default). */
+    tooltip?: React.ReactNode;
+    /** Dataviz palette to resolve each item's color from. Items should carry a `tone` when a palette is set. */
+    palette?: string;
+    /** Additional CSS class names. */
+    className?: string;
+}
+export {};

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

@@ -1 +1 @@
-export { BarChart, barChartVariants, type BarChartProps, type BarChartReferenceArea, type BarChartBarSettings, type BarChartBarShape, } from './bar-chart';
+export { BarChart, barChartVariants, type BarChartProps, type BarChartVerticalProps, type BarChartHorizontalProps, type BarChartItem, type BarChartReferenceArea, type BarChartBarSettings, type BarChartBarShape, } from './bar-chart';

package/dist/src/components/ui/card-widget-carousel/card-widget-carousel.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface CardWidgetCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Accessible label for the Next chevron button. Defaults to `'Next'`. */
+    nextLabel?: string;
+    /** Accessible label for the Previous chevron button. Defaults to `'Previous'`. */
+    prevLabel?: string;
+}
+declare const CardWidgetCarousel: React.ForwardRefExoticComponent<CardWidgetCarouselProps & React.RefAttributes<HTMLDivElement>>;
+export { CardWidgetCarousel };

package/dist/src/components/ui/card-widget-carousel/card-widget.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+declare const statusBgToken: {
+    readonly danger: "var(--ui-background-status-danger)";
+    readonly warning: "var(--ui-background-status-warning)";
+    readonly info: "var(--ui-background-status-info)";
+};
+export type CardWidgetStatus = keyof typeof statusBgToken;
+export interface CardWidgetProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Semantic status — drives the icon-box background and icon glyph color. */
+    status?: CardWidgetStatus;
+    /** The 16 px icon placed inside the status-colored icon box. */
+    icon?: React.ReactNode;
+    /** Card header title (the widget/category name, e.g. "Phishing attacks"). */
+    header?: string;
+    /** Insight title in the body (14 px, semibold). Hidden while `skeleton` is true. */
+    title?: string;
+    /** Supporting description (12 px). Hidden while `skeleton` is true. */
+    description?: string;
+    /**
+     * Primary value / metric (24 px, semibold). Accepts a string or any node.
+     * Hidden while `skeleton` is true.
+     */
+    metric?: React.ReactNode;
+    /** Small caption beside the metric (12 px). Hidden while `skeleton` is true. */
+    caption?: string;
+    /**
+     * When true the body shows animated placeholder lines instead of
+     * `title` / `description` / `metric` / `caption`.
+     */
+    skeleton?: boolean;
+    /**
+     * Accessible label for the skeleton loading indicator (`aria-label`).
+     * Defaults to `'Loading'`. Localize when deploying in a non-English context.
+     */
+    loadingLabel?: string;
+    /**
+     * Content rendered in the card footer (action buttons). Omit the prop to
+     * hide the footer entirely.
+     */
+    footer?: React.ReactNode;
+}
+declare const CardWidget: React.ForwardRefExoticComponent<CardWidgetProps & React.RefAttributes<HTMLDivElement>>;
+export { CardWidget };

package/dist/src/components/ui/card-widget-carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { CardWidgetCarousel, type CardWidgetCarouselProps } from './card-widget-carousel';
+export { CardWidget, type CardWidgetProps, type CardWidgetStatus } from './card-widget';

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

@@ -26,7 +26,7 @@ export interface CartesianChartProps {
     yAxisLabel?: string;
     /**
      * Unit suffix appended to the Y axis's tick values (recharts `unit`) — applies
-     * when the Y axis is the numeric one. `BarChart` with
+     * when the Y axis is the numeric one. `ComposedChart` with
      * `orientation="horizontal"` puts the values on X instead; use `xUnit` there.
      */
     yUnit?: string;
@@ -263,6 +263,14 @@ export interface ResolvedAnimation {
  * library has no other reduced-motion escape hatch.
  */
 export declare function resolveAnimation(props: ChartAnimationProps): ResolvedAnimation;
+/**
+ * Remove synthetic `_proj_*` series entries from a recharts payload array so
+ * they don't appear in custom tooltip or legend content. Safe to call with
+ * `undefined` — returns `undefined` unchanged.
+ */
+export declare function dropProjectionPayload<T extends {
+    dataKey?: unknown;
+}>(payload: readonly T[] | undefined): T[] | undefined;
 /** 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';
 /**

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

@@ -10,6 +10,8 @@ export type ChartDivergingPair = 'blue-orange' | 'teal-violet';
  * tier, not a typo here.
  */
 export type ChartStatusTone = 'danger' | 'critical' | 'warning' | 'success' | 'info' | 'neutral';
+/** Which hue side of a diverging pair a series belongs to. */
+export type ChartDivergingSide = 'a' | 'b';
 /** Which palette a chart's series are painted from. */
 export type ChartPalette = {
     type: 'categorical';
@@ -25,29 +27,40 @@ export type ChartPalette = {
 /**
  * How one series picks its color out of the active palette.
  *
- * Only the two palettes whose colors are independent of each other accept an
- * override:
+ * Three palettes accept a per-series override:
  *
  * - `categorical` — `{ slot }` picks one of the 16 hues.
- * - `status` — `{ status }` names a tone.
+ * - `status` — `{ status }` names a tone (required; there is no meaningful
+ *   positional fallback for status colors).
+ * - `diverging` — `{ side: 'a' | 'b' }` pins the series to one hue family.
+ *   All side-`a` series walk the a-hue stops (a3 → a2 → a1, strongest-first,
+ *   wrapping past three). All side-`b` series walk the b-hue stops likewise.
+ *   Un-sided series walk the default interleaved ramp (a3-b3-a2-b2-a1-b1),
+ *   skipping any stop already claimed by a sided series. This assignment
+ *   requires the full config, so it happens in `resolveChartColors`, not here.
  *
- * `sequential` and `diverging` accept none. Their stops are a *ramp*: the
- * colors mean something only in relation to each other, so letting one series
- * jump to an arbitrary stop would break the reading order the ramp exists to
- * convey. The product's widget editor agrees — it offers a ramp/pair picker
- * and no per-series control. An override passed under those palettes is
+ * `sequential` accepts no override: its stops are a ramp, meaningful only in
+ * relation to each other. An override passed under a non-matching palette is
  * ignored, with a dev warning.
  *
- * Neither form can express a color from outside the palette — that is the point.
+ * `{ sameAs: key }` is palette-agnostic: the series mirrors whatever color
+ * another series resolves to. Use it for a twin series that is the *same*
+ * metric drawn differently (a forecast tail, a projection band), where two
+ * distinct hues would read as two separate metrics. An aliased series doesn't
+ * consume a stop.
+ *
+ * No form can express a color from outside the active palette — that is the point.
  */
 export type ChartSeriesTone = {
     slot: number;
     status?: never;
     sameAs?: never;
+    side?: never;
 } | {
     slot?: never;
     status: ChartStatusTone;
     sameAs?: never;
+    side?: never;
 }
 /**
  * Paint whatever the series under this key paints, under any palette. For a
@@ -60,10 +73,25 @@ export type ChartSeriesTone = {
     slot?: never;
     status?: never;
     sameAs: string;
+    side?: never;
+}
+/**
+ * Diverging palette only. Pins this series to one of the two hue sides.
+ * `resolveChartColors` groups all series that share a side together and
+ * assigns them that side's three stops (strongest first, wrapping). Series
+ * that declare no side walk the default interleaved ramp.
+ *
+ * Under any palette other than `diverging`, this is ignored with a dev warning.
+ */
+ | {
+    slot?: never;
+    status?: never;
+    sameAs?: never;
+    side: ChartDivergingSide;
 };
 /** The 16 categorical hues, in the order the product's picker lists them. */
 export declare const CHART_CATEGORICAL_TOKENS: readonly string[];
-/** Each sequential ramp's eight stops, lightest (1) to darkest (8). */
+/** Each sequential ramp's eight stops, darkest (8) to lightest (1). */
 export declare const CHART_SEQUENTIAL_TOKENS: Readonly<Record<ChartSequentialRamp, readonly string[]>>;
 /** Each diverging pair's six stops, one hue's strongest through to the other's. */
 export declare const CHART_DIVERGING_TOKENS: Readonly<Record<ChartDivergingPair, readonly string[]>>;

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

@@ -1,6 +1,6 @@
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, resolveChartColors, } from './chart';
 export type { ChartConfig, ResolvedChartConfig, ChartContainerProps, ChartTooltipContentProps, ChartLegendContentProps, ChartTooltipContentType, } from './chart';
 export { CHART_CATEGORICAL_TOKENS, CHART_SEQUENTIAL_TOKENS, CHART_DIVERGING_TOKENS, CHART_STATUS_TOKENS, CHART_DEFAULT_PALETTE, listPaletteStops, listPaletteChoices, resolveSeriesColor, findDuplicateTones, } from './chart-palette';
-export type { ChartPalette, ChartSeriesTone, ChartSequentialRamp, ChartDivergingPair, ChartStatusTone, ResolveSeriesColorOptions, } from './chart-palette';
-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 { ChartPalette, ChartSeriesTone, ChartSequentialRamp, ChartDivergingPair, ChartDivergingSide, ChartStatusTone, ResolveSeriesColorOptions, } from './chart-palette';
+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, dropProjectionPayload, } 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/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/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';