@acronis-platform/ui-react 3.0.0 → 4.1.0

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

@@ -1,4 +1,4 @@
-import { ChartConfig, CartesianChartProps, ChartAnimationProps } from '../chart';
+import { ChartConfig, ChartPalette, CartesianChartProps, ChartAnimationProps } from '../chart';
 import * as React from 'react';
 export interface HistogramBin {
     /** Lower bound of the bin (inclusive). */
@@ -19,12 +19,18 @@ export interface HistogramBin {
  */
 export declare function computeHistogramBins(values: ReadonlyArray<number>, binCount: number, domain?: [number, number]): HistogramBin[];
 export interface HistogramProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps, 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`.
+     */
+    palette?: ChartPalette;
     /** Raw continuous samples to bin (non-finite values are ignored). */
     values: ReadonlyArray<number>;
     /**
-     * Single-series map of `label` / `color`, keyed by `dataKey` (imported from
-     * the shared `Chart` primitives). Color is caller-supplied — reference an
-     * existing semantic `--ui-*` token; there is no chart palette tier yet.
+     * Single-series map of `label` / `icon` / `tone`, keyed by `dataKey` (imported
+     * from the shared `Chart` primitives). Series take their colour from the
+     * container's `palette`; each entry maps a key to a `label` and an optional
+     * `tone`.
      */
     config: ChartConfig;
     /** `config` key that colors + labels the frequency bars. */

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/label/index.d.ts

@@ -1 +1 @@
-export { Label, labelClassName, type LabelProps } from './label';
+export { labelClassName } from './label';

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

@@ -1,5 +1 @@
-import * as React from 'react';
-declare const labelClassName = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
-export type LabelProps = React.ComponentPropsWithoutRef<'label'>;
-declare const Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
-export { Label, labelClassName };
+export declare const labelClassName = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";

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

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartConfig, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const lineChartVariants: (props?: ({
     curve?: "step" | "linear" | "monotone" | "natural" | "basis" | "stepBefore" | "stepAfter" | null | undefined;
@@ -55,12 +55,17 @@ export interface LineChartLineSettings {
     labelPosition?: CartesianLabelPosition;
 }
 export interface LineChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof lineChartVariants>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
+    /**
+     * 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`.
+     */
+    palette?: ChartPalette;
     /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the line unless `connectNulls`). */
     data: ReadonlyArray<Record<string, string | number | null>>;
     /**
-     * Per-series map of `label` / `color` (imported from the shared `Chart`
-     * primitives). Series colors are caller-supplied — reference an existing
-     * semantic `--ui-*` token; there is no chart palette tier yet.
+     * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`
+     * primitives). Series take their colour from the container's `palette`; each
+     * entry maps a key to a `label` and an optional `tone`.
      */
     config: ChartConfig;
     /** Series to plot — one `<Line>` per key. Each must exist in `config` and in every data row. */

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

@@ -1,12 +1,5 @@
-import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-declare const metricVariants: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
-    status?: "info" | "success" | "warning" | "critical" | "danger" | "neutral" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface MetricProps extends React.ComponentProps<'div'>, VariantProps<typeof metricVariants> {
-    /** What the value measures — e.g. "Gross margin". Rendered as an uppercase note heading. */
-    label: React.ReactNode;
+export interface MetricProps extends React.ComponentProps<'div'> {
     /**
      * The primary value, already formatted (`73`, `"94%"`, `"$72K"`, `"2.8"`).
      * The kit does not format currency, units, or decimals.
@@ -14,15 +7,21 @@ export interface MetricProps extends React.ComponentProps<'div'>, VariantProps<t
     value: React.ReactNode;
     /** Unit shown next to the value at a smaller, muted size — e.g. `"%"`, `"hours"`. */
     unit?: React.ReactNode;
-    /** A top-right caption aligned with the label — e.g. a timeframe `Tag` ("Last 30 days"). */
+    /** Caption at the right end of the stats row — e.g. a timeframe `Tag`. */
     caption?: React.ReactNode;
-    /** A trend slot on the right of the value — typically a `TrendIndicator`. */
-    trend?: React.ReactNode;
-    /** Secondary line below the value — e.g. "Target: 99%". */
+    /**
+     * Trend direction — renders a `TrendIndicator` on its own row below the value.
+     * Sentiment follows direction: `up` → positive, `down` → negative, `stable` → neutral.
+     * Pair with `trendValue` for the change text.
+     */
+    trend?: 'up' | 'down' | 'stable';
+    /** Change text shown next to the trend arrow — e.g. `"20%"`, `"+3"`. Requires `trend`. */
+    trendValue?: React.ReactNode;
+    /** Secondary line below the trend — e.g. "Target: 99%". */
     supportingText?: React.ReactNode;
     /** A small badge / metadata slot beside the value — e.g. a `Tag`. */
     badge?: React.ReactNode;
-    /** Icon rendered in a status-tinted badge before the value. */
+    /** Icon rendered in a status-info-tinted badge before the value. */
     icon?: React.ReactNode;
     /** Contextual hint on an info affordance next to the label (Base UI Tooltip). */
     tooltip?: React.ReactNode;
@@ -30,7 +29,7 @@ export interface MetricProps extends React.ComponentProps<'div'>, VariantProps<t
     tooltipLabel?: string;
     /** Show a skeleton in place of the value, preserving its space. */
     loading?: boolean;
-    /** Card body below the header — e.g. a chart, a Separator, an insight line. */
+    /** Content below the stats strip — e.g. a chart, a `Separator`, an insight line. */
     children?: React.ReactNode;
 }
 declare const Metric: React.ForwardRefExoticComponent<Omit<MetricProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartConfig, ChartTooltipContentProps, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette, ChartTooltipContentProps, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
 import * as React from 'react';
 declare const pieChartVariants: (props?: ({
-    shape?: "pie" | "donut" | null | undefined;
+    shape?: "donut" | "pie" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /** Row-per-slice datum: the `nameKey` label plus the `dataKey` value. */
 type PieChartDatum = Record<string, string | number>;
@@ -81,13 +81,19 @@ export interface PieChartCenterLabel {
     label?: string | number;
 }
 export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof pieChartVariants>, ChartAnimationProps, ChartDataLabelProps {
+    /**
+     * 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`.
+     */
+    palette?: ChartPalette;
     /** Row-per-slice data. Each object holds the slice's `nameKey` label + its `dataKey` numeric value. */
     data: ReadonlyArray<PieChartDatum>;
     /**
-     * Per-slice map of `label` / `color`, keyed by the slice's `nameKey` value
-     * (imported from the shared `Chart` primitives). Turned into `--color-<name>`
-     * custom properties. Colors are caller-supplied — reference an existing
-     * semantic `--ui-*` token; there is no chart palette tier yet.
+     * Per-slice map of `label` / `icon` / `tone`, keyed by the slice's `nameKey`
+     * value (imported from the shared `Chart` primitives). Turned into
+     * `--color-<name>` custom properties. Series take their colour from the
+     * container's `palette`; each entry maps a key to a `label` and an optional
+     * `tone`.
      */
     config: ChartConfig;
     /** Numeric field that sizes each slice. */
@@ -136,8 +142,11 @@ export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'childr
     sliceSettings?: Record<string, PieChartSliceSettings>;
     showTooltip?: boolean;
     showLegend?: boolean;
-    /** Which edge the legend sits on. Defaults to `bottom`. */
-    legendPosition?: 'top' | 'bottom';
+    /**
+     * Format each slice's value in the list legend. When omitted the raw value is
+     * stringified with `String()`.
+     */
+    legendValueFormatter?: (value: string | number) => string;
     /** Plot-area margin, in px. Omit to use recharts' default (5 on every side). */
     margin?: {
         top?: number;

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

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { AxisDomainItem } from 'recharts';
-import { ChartTooltip, ChartConfig, ChartAnimationProps, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette, ChartAnimationProps, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const radarChartVariants: (props?: ({
     gridType?: "circle" | "polygon" | null | undefined;
@@ -79,6 +79,11 @@ export interface RadarSeriesStyle {
  */
 export declare function radarSeriesStyle(key: string, settings: RadarChartSeriesSettings | undefined, defaults: RadarSeriesDefaults): RadarSeriesStyle;
 export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof radarChartVariants>, ChartAnimationProps, ChartDataLabelProps {
+    /**
+     * 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`.
+     */
+    palette?: ChartPalette;
     /**
      * Row-per-axis data. Each object holds the `angleKey` label + one numeric field
      * per series. Every plotted series needs a value in every row: recharts places a
@@ -86,10 +91,10 @@ export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'chil
      */
     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.
+     * Per-series map of `label` / `icon` / `tone` (imported from the shared
+     * `Chart` primitives). Turned into `--color-<key>` custom properties. Series
+     * take their colour from the container's `palette`; each entry maps a key to a
+     * `label` and an optional `tone`.
      */
     config: ChartConfig;
     /** Series to plot — one `<Radar>` per key. Each must exist in `config` and in every data row. */

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

@@ -1,4 +1,4 @@
-import { ChartTooltip, ChartConfig, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
 import * as React from 'react';
 /** Row-per-arc datum: the `nameKey` label plus each metric's numeric value. */
 type RadialBarChartDatum = Record<string, string | number>;
@@ -117,14 +117,19 @@ export declare function RadialBarChartSegmentedTooltipContent({ active, payload,
  */
 export declare function radialBarChartBandName(row: RadialBarChartDatum | undefined, nameKey: string): string;
 export interface RadialBarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, ChartAnimationProps, ChartDataLabelProps {
+    /**
+     * 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`.
+     */
+    palette?: ChartPalette;
     /** Row-per-arc data. Each object holds the arc's `nameKey` label + its `dataKey` numeric value. */
     data: ReadonlyArray<RadialBarChartDatum>;
     /**
-     * Per-arc map of `label` / `color`, keyed by the arc's `nameKey` value — or, in
-     * multi-metric mode, by each `dataKeys` entry (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.
+     * Per-arc map of `label` / `icon` / `tone`, keyed by the arc's `nameKey` value
+     * — or, in multi-metric mode, by each `dataKeys` entry (imported from the
+     * shared `Chart` primitives). Turned into `--color-<name>` custom properties.
+     * Series take their colour from the container's `palette`; each entry maps a
+     * key to a `label` and an optional `tone`.
      */
     config: ChartConfig;
     /** Numeric field that sizes each arc. Ignored when `dataKeys` is set. */
@@ -223,6 +228,12 @@ export interface RadialBarChartProps extends Omit<React.ComponentProps<'div'>, '
     centerLabel?: RadialBarChartCenterLabel;
     showTooltip?: boolean;
     showLegend?: boolean;
+    /**
+     * Format each arc's value in the list legend. In single-metric mode each arc
+     * row gets its formatted value next to its label; in multi-metric mode values
+     * are per-row (not per-series) so this is ignored.
+     */
+    legendValueFormatter?: (value: string | number) => string;
     /**
      * Replace the default tooltip. Pass a configured `ChartTooltipContent`
      * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —

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

@@ -1,4 +1,4 @@
-import { ChartTooltip, ChartConfig } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette } from '../chart';
 import * as React from 'react';
 /** A node in the flow — `name` is its color/config key (CSS-safe, unique). */
 export interface SankeyChartNode {
@@ -20,16 +20,21 @@ export interface SankeyChartLink {
     color?: string;
 }
 export interface SankeyChartProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /**
+     * 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`.
+     */
+    palette?: ChartPalette;
     /** 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.
+     * Per-node map of `label` / `icon` / `tone`, keyed by the node's `name`
+     * (imported from the shared `Chart` primitives). Turned into `--color-<name>`
+     * custom properties. Series take their colour from the container's `palette`;
+     * each entry maps a key to a `label` and an optional `tone`.
      */
     config: ChartConfig;
     /** Vertical gap between nodes in the same column. */

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

@@ -1,4 +1,4 @@
-import { ChartConfig, CartesianChartProps, ChartAnimationProps } from '../chart';
+import { ChartConfig, ChartPalette, CartesianChartProps, ChartAnimationProps } from '../chart';
 import * as React from 'react';
 export type ScatterMarkerShape = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
 export interface ScatterSeries {
@@ -8,13 +8,18 @@ export interface ScatterSeries {
     data: ReadonlyArray<Record<string, number>>;
 }
 export interface ScatterChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps, 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`.
+     */
+    palette?: ChartPalette;
     /** 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.
+     * Per-series map of `label` / `icon` / `tone`, keyed by `series[].key`
+     * (imported from the shared `Chart` primitives). Turned into `--color-<key>`
+     * custom properties. Series take their colour from the container's `palette`;
+     * each entry maps a key to a `label` and an optional `tone`.
      */
     config: ChartConfig;
     /** Numeric field for the horizontal axis. */

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

@@ -1 +1 @@
-export { Section, SectionHeader, SectionTitle, SectionDescription, SectionContent, } from './section';
+export { Section, SectionHeader, SectionContent, sectionVariants, useSectionContext, type SectionVariant, type SectionProps, type SectionHeaderProps, type SectionContentProps, } from './section';

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

@@ -1,7 +1,76 @@
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-declare const Section: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-declare const SectionHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const SectionTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-declare const SectionDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-declare const SectionContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export { Section, SectionHeader, SectionTitle, SectionDescription, SectionContent, };
+declare const sectionVariants: (props?: ({
+    variant?: "table" | "column1" | "column2-70-30" | "grid3" | null | undefined;
+    hasBottomBorder?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type SectionVariant = NonNullable<VariantProps<typeof sectionVariants>['variant']>;
+interface SectionContextValue {
+    variant: SectionVariant;
+}
+/**
+ * Reads the content layout of the nearest `Section` ancestor. Falls back to
+ * `column1` for a part rendered outside a `Section`.
+ */
+declare const useSectionContext: () => SectionContextValue;
+export interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof sectionVariants> {
+    /**
+     * Replace the rendered `<section>` with another element or component (Base UI
+     * composition).
+     */
+    render?: useRender.RenderProp;
+}
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
+export interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The section's title. Renders nothing when omitted. */
+    title?: string;
+    /** Helper text shown under the title; only rendered when `hasDescription`. */
+    description?: string;
+    /** Shows `description` below the title. */
+    hasDescription?: boolean;
+    /** Shows a toggle switch at the start of the header. */
+    isSwitchable?: boolean;
+    /** Controlled checked state of the header switch. */
+    switchChecked?: boolean;
+    /** Uncontrolled initial checked state of the header switch. */
+    defaultSwitchChecked?: boolean;
+    /** Fires when the header switch is toggled. */
+    onSwitchCheckedChange?: (checked: boolean) => void;
+    /** Disables the header switch. */
+    switchDisabled?: boolean;
+    /** Accessible label for the header switch. */
+    switchLabel?: string;
+    /** Extra content rendered inline next to the title (e.g. a tag or badge). */
+    extras?: React.ReactNode;
+    /** Actions rendered at the end of the header (e.g. a button). */
+    actions?: React.ReactNode;
+    /**
+     * Shows a disclosure trigger at the end of the header. Only has an effect
+     * when this header renders inside a collapsible `AccordionContainer` —
+     * see the collapsible composition example.
+     */
+    isCollapsible?: boolean;
+    /** Accessible label for the collapse trigger. */
+    collapseLabel?: string;
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition).
+     */
+    render?: useRender.RenderProp;
+}
+declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface SectionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The narrow (~30%) second column of the `column2-70-30` layout. Ignored by
+     * every other variant, which has only one content area.
+     */
+    secondaryContent?: React.ReactNode;
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition).
+     */
+    render?: useRender.RenderProp;
+}
+declare const SectionContent: React.ForwardRefExoticComponent<SectionContentProps & React.RefAttributes<HTMLDivElement>>;
+export { Section, SectionHeader, SectionContent, sectionVariants, useSectionContext, type SectionVariant, };

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

@@ -2,8 +2,8 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const stepperItemVariants: (props?: ({
-    variant?: "current" | "completed" | "future" | null | undefined;
-    state?: "active" | "hover" | "idle" | null | undefined;
+    variant?: "completed" | "current" | "future" | null | undefined;
+    state?: "focus" | "active" | "hover" | "idle" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /** Kept in lockstep with the `cva` axes above. */
 export type StepperItemVariant = NonNullable<VariantProps<typeof stepperItemVariants>['variant']>;
@@ -17,9 +17,10 @@ export interface StepperItemProps extends React.ComponentPropsWithoutRef<'div'>
     variant?: StepperItemVariant;
     /**
      * Interaction state. Only produces a different look when `variant` is
-     * `completed` (`idle` has no background, `hover` and `active` paint one).
-     * Ignored for `current`, which always renders in its highlighted look, and for
-     * `future`, which always renders disabled and non-interactive.
+     * `completed` — each of `idle`, `hover`, `active`, and `focus` is wired to its
+     * own token, so a brand can style any of them independently. Ignored for
+     * `current`, which always renders in its highlighted look, and for `future`,
+     * which always renders disabled and non-interactive.
      */
     state?: StepperItemState;
     /**

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const tagVariants: (props?: ({
-    variant?: "info" | "success" | "warning" | "critical" | "danger" | "ai" | "neutral" | null | undefined;
+    variant?: "info" | "success" | "warning" | "critical" | "danger" | "neutral" | "ai" | null | undefined;
     size?: "default" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TagProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tagVariants> {

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

@@ -1,4 +1,4 @@
-import { ChartTooltip, ChartConfig, ChartAnimationProps, TickFormatter } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette, ChartAnimationProps, TickFormatter } from '../chart';
 import * as React from 'react';
 /**
  * Where a cell's label block sits inside its rectangle. Named logically, not
@@ -33,6 +33,11 @@ interface TreemapCellProps {
 }
 export declare function TreemapCell({ x, y, width, height, name, primaryLabel, secondaryLabel, showLabels, labelAlign, }: 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
+     * state no `color` of their own take a stop of it. See `ChartPalette`.
+     */
+    palette?: ChartPalette;
     /**
      * Row-per-leaf data. Each object holds the leaf's `nameKey` label + its
      * `dataKey` numeric size.
@@ -45,10 +50,11 @@ export interface TreemapProps extends Omit<React.ComponentProps<'div'>, 'childre
      */
     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.
+     * Per-leaf map of `label` / `icon` / `tone`, keyed by the leaf's `nameKey`
+     * value (imported from the shared `Chart` primitives). Turned into
+     * `--color-<name>` custom properties. Series take their colour from the
+     * container's `palette`; each entry maps a key to a `label` and an optional
+     * `tone`.
      */
     config: ChartConfig;
     /** Numeric field that sizes each leaf's rectangle. */

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

@@ -1,20 +1,16 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const trendIndicatorVariants: (props?: ({
-    sentiment?: "positive" | "neutral" | "negative" | null | undefined;
-    size?: "small" | "medium" | null | undefined;
-    variant?: "inline" | "badge" | null | undefined;
+    sentiment?: "neutral" | "positive" | "negative" | 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.
+     * `"Improving"`. 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. */
@@ -24,7 +20,7 @@ export interface TrendIndicatorProps extends Omit<React.ComponentProps<'span'>,
      * 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).
+     * `value` text (the glyph is decorative).
      */
     ariaLabel?: string;
 }

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

@@ -0,0 +1 @@
+export { Wizard, WizardHeader, WizardSubtitle, WizardBody } from './wizard';

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare const Wizard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WizardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WizardSubtitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const WizardBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Wizard, WizardHeader, WizardSubtitle, WizardBody };

package/dist/src/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useSortState, type SortDirection, type SortState, type SortComparator, type UseSortStateOptions, type UseSortStateResult, } from './use-sort-state';
 export { useIntersectionObserver, type UseIntersectionObserverOptions, } from './use-intersection-observer';
 export { useTableUrlState, parseTableUrlState, serializeTableUrlState, DEFAULT_TABLE_URL_PARAM_KEYS, type TableUrlState, type TablePaginationState, type TableSortingState, type TableColumnFilterState, type TableUrlParamKeys, type TableUrlUpdater, type UseTableUrlStateOptions, type UseTableUrlStateResult, } from './use-table-url-state';
+export { useWizard, type WizardStep, type WizardStepAvatarColor, type WizardStepVariant, type WizardStepState, type UseWizardOptions, type UseWizardResult, } from './use-wizard';

package/dist/src/hooks/use-wizard.d.ts

@@ -0,0 +1,80 @@
+export interface WizardStep {
+    /** Stable identifier; `goToStep` and `initialStep` accept it as a string. */
+    id: string;
+    /** Step label, rendered by `StepperItem` and the `Stepper` summary. */
+    label: string;
+}
+export type WizardStepAvatarColor = 'blue' | 'green' | 'gray';
+export type WizardStepVariant = 'completed' | 'current' | 'future';
+/**
+ * A step enriched with everything a `StepperItem` needs. Intersects `TStep`, so
+ * any extra fields the consumer put on their own step objects survive.
+ */
+export type WizardStepState<TStep extends WizardStep = WizardStep> = TStep & {
+    /** Zero-based position in `steps`. */
+    index: number;
+    /** One-based position, for the avatar's displayed number. */
+    stepNumber: number;
+    /** `StepperItem`'s `variant`, derived from the position vs. `currentIndex`. */
+    variant: WizardStepVariant;
+    /** `Avatar`'s `color` for this step's variant. */
+    avatarColor: WizardStepAvatarColor;
+    /** Classes to merge onto this step's `Avatar`. */
+    avatarClassName: string;
+};
+export interface UseWizardOptions<TStep extends WizardStep = WizardStep> {
+    /** The flow's steps, in order. Must not be empty. */
+    steps: TStep[];
+    /**
+     * Where the flow starts — a zero-based index or a step `id`. A numeric
+     * index is truncated toward zero and clamped into range; `NaN` and an id
+     * that matches no step fall back to the first step. A seed, not a
+     * controlled input: later changes are ignored.
+     */
+    initialStep?: number | string;
+}
+export interface UseWizardResult<TStep extends WizardStep = WizardStep> {
+    /** `steps` with per-step `variant`/avatar presentation derived. */
+    steps: WizardStepState<TStep>[];
+    /**
+     * Zero-based index of the active step. Always a valid index into `steps`:
+     * if `steps` shrinks so that the stored index is past the end, the
+     * effective index clamps to `steps.length - 1`.
+     */
+    currentIndex: number;
+    /** One-based number of the active step, for `Stepper`'s `currentStep`. */
+    currentStepNumber: number;
+    /** Total number of steps, for `Stepper`'s `totalSteps`. */
+    stepCount: number;
+    /** The active step's label, for `Stepper`'s `current`. */
+    currentStepLabel: string;
+    /** The following step's label, or `undefined` on the last step. */
+    nextStepLabel: string | undefined;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    /** Advance one step; no-op on the last step (never wraps). */
+    goToNextStep: () => void;
+    /** Go back one step; no-op on the first step (never wraps). */
+    goToPreviousStep: () => void;
+    /**
+     * Jump to a zero-based index or a step `id`. A numeric index is truncated
+     * toward zero (`1.5` → `1`) and clamped into range; `NaN` is a no-op. An
+     * id that matches no step is a no-op; on duplicate ids the first wins.
+     */
+    goToStep: (target: number | string) => void;
+}
+/**
+ * Headless step state for a `Wizard`'s `Stepper` (the `Wizard` components
+ * themselves stay presentational and own no state). Returns the `Stepper`
+ * summary props plus a per-step `variant` + avatar presentation, and the
+ * navigation callbacks a consumer wires to its Back/Next buttons.
+ *
+ * Opt-in: a consumer that already owns its step state can keep driving
+ * `Stepper`/`StepperItem` by hand.
+ *
+ * `steps` may be a live, per-render value. The active index is stored as
+ * state but re-clamped against the *current* `steps.length` on every read,
+ * so a `steps` array that shrinks past the active index resolves to the last
+ * remaining step instead of reading past the end.
+ */
+export declare function useWizard<TStep extends WizardStep = WizardStep>({ steps, initialStep, }: UseWizardOptions<TStep>): UseWizardResult<TStep>;