@acronis-platform/ui-react 0.57.1 → 0.60.0

package/dist/src/components/ui/dialog/dialog.docs.d.ts

@@ -1,11 +1,8 @@
 import type * as React from 'react';
 /** Props for `DialogContent` — the portaled, centered dialog popup. */
 export interface DialogContentProps {
-    /**
-     * Popup max-width. One of `xs` (464px) · `sm` (512px, default) · `md` (672px)
-     * · `lg` (832px) · `xl` (992px) · `2xl` (1136px).
-     */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Popup max-width. `sm` (512px, default) is the Figma-defined size; `large` (832px) is a legacy backward-compatibility size. */
+    size?: 'sm' | 'large';
     /**
      * Render the content inside a portal (default `true`). Disable only when you
      * supply your own `DialogPortal` ancestor (e.g. inline usage).
@@ -22,3 +19,83 @@ export interface DialogContentProps {
     className?: string;
     children?: React.ReactNode;
 }
+/** Props for `Dialog` — the public, variant-driven dialog recipe. */
+export interface DialogProps {
+    /**
+     * Selects the canned title / body / footer preset. Defaults to `'default'`.
+     * `'wide'` is a legacy escape hatch (no Figma preset) kept for backward
+     * compatibility — pair it with `size="large"` and the `footer` prop.
+     */
+    variant?: 'default' | 'rename' | 'save changes' | 'reset password' | 'discard changes' | 'accept' | 'read-only' | 'wide';
+    /**
+     * Show a spinner overlay across the body + footer, and make both `inert`
+     * so a keyboard user can't activate the obscured footer buttons.
+     */
+    hasLoading?: boolean;
+    /** Overrides the loading overlay's accessible label. Ignored when `hasLoading` is `false`. */
+    loadingLabel?: string;
+    /**
+     * Show the header (title + close button). Defaults to `true`. When `false`,
+     * the title is still rendered off-screen so the dialog keeps an accessible
+     * name — only the visible bar and close button are omitted.
+     */
+    hasHeader?: boolean;
+    /** Show the footer (action buttons). Defaults to `true`. When `false`, `footer` is not rendered either. */
+    hasFooter?: boolean;
+    /** Overrides the variant's default body content. */
+    children?: React.ReactNode;
+    /** Overrides the variant's default title. */
+    title?: string;
+    /**
+     * The real name of the object being acted on (e.g. a file or resource
+     * name). Interpolated into the `rename`/`discard changes`/`accept`
+     * variants' canned title/body in place of the generic placeholder text;
+     * ignored by variants that don't reference an object name.
+     */
+    objectName?: string;
+    /**
+     * Overrides the accessible name of the `rename` variant's text field
+     * (default `'Object name'`). Ignored by every other variant.
+     */
+    objectNameLabel?: string;
+    /**
+     * Overrides the variant's default secondary (dismiss) button label. Passing
+     * this on a variant with no secondary button by default (e.g. `read-only`)
+     * also makes the button appear. Ignored when `footer` is provided.
+     */
+    secondaryLabel?: string;
+    /** Overrides the variant's default primary button label. Ignored when `footer` is provided. */
+    primaryLabel?: string;
+    /**
+     * Fires when the primary footer button is clicked. The dialog does not
+     * close automatically afterwards — pair this with `open`/`onOpenChange` to
+     * close it once the action completes. Ignored when `footer` is provided.
+     */
+    onPrimaryAction?: () => void;
+    /**
+     * Replaces the footer's action content entirely with free-form buttons —
+     * the escape hatch the `wide` variant is meant to be paired with, for
+     * legacy call sites that don't fit one of the seven canned presets.
+     */
+    footer?: React.ReactNode;
+    /** Overrides the close button's accessible name. Defaults to `'Close'`. */
+    closeLabel?: string;
+    /** Popup max-width. Defaults to `'sm'`, or to `'large'` when `variant` is `'wide'`. */
+    size?: 'sm' | 'large';
+    /** Render inside a portal (default `true`). */
+    portal?: boolean;
+    /** Portal container. Pass a shadow-root mount for isolated-style previews. */
+    portalContainer?: HTMLElement | null;
+    /** Keep the content mounted while closed. */
+    keepMounted?: boolean;
+    /** Extra classes merged onto the popup container. */
+    className?: string;
+    /** Controlled open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open on mount, uncontrolled. */
+    defaultOpen?: boolean;
+    /** Modal behavior — focus trap and scroll lock while open. Defaults to `true`. */
+    modal?: boolean | 'trap-focus';
+    /** Fires when the dialog opens or closes. */
+    onOpenChange?: (open: boolean, eventDetails: unknown) => void;
+}

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

@@ -1 +1 @@
-export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogCloseButton, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogBody, DialogDescription, dialogContentVariants, type DialogContentProps, } from './dialog';
+export { DialogRoot, DialogPortal, DialogOverlay, DialogClose, DialogCloseButton, DialogTrigger, DialogContent, DialogHeaderRoot, DialogFooterRoot, DialogTitle, DialogBodyRoot, DialogDescription, dialogContentVariants, Dialog, type DialogContentProps, type DialogCloseButtonProps, type DialogProps, type DialogVariant, } from './dialog';

package/dist/src/components/ui/dialog-footer-carousel/dialog-footer-carousel.d.ts

@@ -0,0 +1,9 @@
+import { CarouselDialogProps } from '../carousel-dialog';
+import * as React from 'react';
+export type DialogFooterCarouselVariant = 'start' | 'middle' | 'end';
+export interface DialogFooterCarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, Pick<CarouselDialogProps, 'slideCount' | 'selectedIndex' | 'onSelectIndex' | 'onBack' | 'onNext' | 'onPrimaryAction' | 'backLabel' | 'nextLabel' | 'primaryLabel' | 'goToSlideLabel'> {
+    /** Which slide position this renders for. Defaults to `'start'`. */
+    variant?: DialogFooterCarouselVariant;
+}
+declare const DialogFooterCarousel: React.ForwardRefExoticComponent<DialogFooterCarouselProps & React.RefAttributes<HTMLDivElement>>;
+export { DialogFooterCarousel };

package/dist/src/components/ui/dialog-footer-carousel/index.d.ts

@@ -0,0 +1 @@
+export { DialogFooterCarousel, type DialogFooterCarouselProps, type DialogFooterCarouselVariant, } from './dialog-footer-carousel';

package/dist/src/components/ui/dialog-footer-default/dialog-footer-default.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface DialogFooterDefaultProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Truncated description text next to the actions. Mutually exclusive with `link`. */
+    description?: string;
+    /** A `Link` (or similar) element next to the actions. Mutually exclusive with `description`. */
+    link?: React.ReactNode;
+    /** End-aligned actions — typically a secondary and a primary `Button`. */
+    children?: React.ReactNode;
+}
+declare const DialogFooterDefault: React.ForwardRefExoticComponent<DialogFooterDefaultProps & React.RefAttributes<HTMLDivElement>>;
+export { DialogFooterDefault };

package/dist/src/components/ui/dialog-footer-default/index.d.ts

@@ -0,0 +1 @@
+export { DialogFooterDefault, type DialogFooterDefaultProps } from './dialog-footer-default';

package/dist/src/components/ui/dialog-welcome/dialog-welcome.d.ts

@@ -0,0 +1,54 @@
+import { DialogContentProps, DialogRoot } from '../dialog';
+import * as React from 'react';
+export interface DialogWelcomeSlide {
+    /** Illustration/media for the slide. Falls back to a placeholder surface when omitted. */
+    image?: React.ReactNode;
+    title: string;
+    description: string;
+}
+export type DialogWelcomeVariant = 'carousel' | 'single';
+type DialogRootProps = React.ComponentPropsWithoutRef<typeof DialogRoot>;
+export interface DialogWelcomeProps extends Omit<DialogRootProps, 'children'> {
+    /** Selects the Figma-defined layout. Defaults to `'carousel'`. */
+    variant?: DialogWelcomeVariant;
+    /** Slides shown one at a time (`variant="carousel"`). Defaults to a 3-slide placeholder. */
+    slides?: DialogWelcomeSlide[];
+    /** Controls the active slide (`variant="carousel"`). Uncontrolled when omitted. */
+    selectedIndex?: number;
+    /** Fires whenever the active slide changes (`variant="carousel"`). */
+    onSelectedIndexChange?: (index: number) => void;
+    /** `Back` button label (`variant="carousel"`). Defaults to `'Back'`. */
+    backLabel?: string;
+    /** `Next` button label (`variant="carousel"`). Defaults to `'Next'`. */
+    nextLabel?: string;
+    /** Builds each carousel dot's accessible name (`variant="carousel"`). */
+    goToSlideLabel?: (index: number, count: number) => string;
+    /** Illustration/media (`variant="single"`). */
+    image?: React.ReactNode;
+    /** Title (`variant="single"`). Defaults to `'Title'`. */
+    title?: string;
+    /** Description (`variant="single"`). Defaults to `'Feature description.'`. */
+    description?: string;
+    /** `Close` link label (`variant="single"`). Defaults to `'Close'`. */
+    closeLabel?: string;
+    /** Fires when `Close` (`variant="single"`) is activated, before the dialog closes. */
+    onCloseAction?: () => void;
+    /**
+     * Call-to-action button label — the last carousel slide's button
+     * (`variant="carousel"`) or the single body's primary button
+     * (`variant="single"`). Defaults to `'Call to action'`.
+     */
+    primaryLabel?: string;
+    /** Fires when the call-to-action button is activated. */
+    onPrimaryAction?: () => void;
+    /** Render inside a portal (forwarded to `DialogContent`). Defaults to `true`. */
+    portal?: boolean;
+    /** Portal container (forwarded to `DialogContent`). */
+    portalContainer?: DialogContentProps['portalContainer'];
+    /** Keep the content mounted while closed (forwarded to `DialogContent`). */
+    keepMounted?: DialogContentProps['keepMounted'];
+    /** Extra classes merged onto the popup container. */
+    className?: string;
+}
+declare const DialogWelcome: React.ForwardRefExoticComponent<DialogWelcomeProps & React.RefAttributes<HTMLDivElement>>;
+export { DialogWelcome };

package/dist/src/components/ui/dialog-welcome/dialog-welcome.docs.d.ts

@@ -0,0 +1,55 @@
+/** Props for `DialogWelcome` — the onboarding/announcement dialog recipe. */
+export interface DialogWelcomeProps {
+    /** Selects the Figma-defined layout. Defaults to `'carousel'`. */
+    variant?: 'carousel' | 'single';
+    /** Slides shown one at a time (`variant="carousel"`). Defaults to a 3-slide placeholder. */
+    slides?: Array<{
+        image?: unknown;
+        title: string;
+        description: string;
+    }>;
+    /** Controls the active slide (`variant="carousel"`). Uncontrolled when omitted. */
+    selectedIndex?: number;
+    /** Fires whenever the active slide changes (`variant="carousel"`). */
+    onSelectedIndexChange?: (index: number) => void;
+    /** `Back` button label (`variant="carousel"`). Defaults to `'Back'`. */
+    backLabel?: string;
+    /** `Next` button label (`variant="carousel"`). Defaults to `'Next'`. */
+    nextLabel?: string;
+    /** Builds each carousel dot's accessible name (`variant="carousel"`). */
+    goToSlideLabel?: (index: number, count: number) => string;
+    /** Illustration/media (`variant="single"`). */
+    image?: unknown;
+    /** Title (`variant="single"`). Defaults to `'Title'`. */
+    title?: string;
+    /** Description (`variant="single"`). Defaults to `'Feature description.'`. */
+    description?: string;
+    /** `Close` link label (`variant="single"`). Defaults to `'Close'`. */
+    closeLabel?: string;
+    /** Fires when `Close` (`variant="single"`) is activated, before the dialog closes. */
+    onCloseAction?: () => void;
+    /**
+     * Call-to-action button label — the last carousel slide's button
+     * (`variant="carousel"`) or the single body's primary button
+     * (`variant="single"`). Defaults to `'Call to action'`.
+     */
+    primaryLabel?: string;
+    /** Fires when the call-to-action button is activated. */
+    onPrimaryAction?: () => void;
+    /** Render inside a portal (forwarded to `DialogContent`). Defaults to `true`. */
+    portal?: boolean;
+    /** Portal container (forwarded to `DialogContent`). */
+    portalContainer?: HTMLElement | null;
+    /** Keep the content mounted while closed (forwarded to `DialogContent`). */
+    keepMounted?: boolean;
+    /** Extra classes merged onto the popup container. */
+    className?: string;
+    /** Controlled open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open on mount, uncontrolled. */
+    defaultOpen?: boolean;
+    /** Modal behavior — focus trap and scroll lock while open. Defaults to `true`. */
+    modal?: boolean | 'trap-focus';
+    /** Fires when the dialog opens or closes. */
+    onOpenChange?: (open: boolean, eventDetails: unknown) => void;
+}

package/dist/src/components/ui/dialog-welcome/index.d.ts

@@ -0,0 +1 @@
+export { DialogWelcome, type DialogWelcomeProps, type DialogWelcomeSlide, type DialogWelcomeVariant, } from './dialog-welcome';

package/dist/src/components/ui/filter-search/filter-search.d.ts

@@ -16,7 +16,7 @@ interface FilterSearchFiltersContextValue {
  * `onChange` to `setFilter`; Apply commits the draft, Cancel/dismiss reverts it.
  */
 export declare function useFilterSearchFilters(): FilterSearchFiltersContextValue;
-export interface FilterSearchFiltersProps {
+export interface FilterSearchFiltersProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'onValueChange'> {
     /** The applied filter values, keyed by an arbitrary consumer-chosen id. */
     value: Record<string, unknown>;
     /** Called with the committed filters when Apply is pressed. */

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

@@ -0,0 +1,39 @@
+import { VariantProps } from 'class-variance-authority';
+import { ChartTooltip, ChartConfig } from '../chart';
+import * as React from 'react';
+declare const funnelChartVariants: (props?: ({
+    lastShape?: "triangle" | "rectangle" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface FunnelChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof funnelChartVariants> {
+    /** Row-per-stage data. Each object holds the stage's `nameKey` label + its `dataKey` numeric value. */
+    data: ReadonlyArray<Record<string, string | number>>;
+    /**
+     * Per-stage map of `label` / `color`, keyed by the stage'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 stage (the funnel narrows as it drops). */
+    dataKey: string;
+    /**
+     * Label field that names each stage (drives the legend, tooltip, on-chart
+     * labels, and the `--color-<name>` lookup). Values should be unique per chart —
+     * stages sharing a name share one `config`/color entry.
+     */
+    nameKey: string;
+    /** Flip the funnel so it widens toward the bottom instead of narrowing. */
+    reversed?: boolean;
+    /** Render each stage's name beside its segment. */
+    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-series rows, or extra fields without composing
+     * recharts yourself. Ignored when `showTooltip` is false.
+     */
+    tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+}
+declare const FunnelChart: React.ForwardRefExoticComponent<Omit<FunnelChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { FunnelChart, funnelChartVariants };

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

@@ -0,0 +1 @@
+export { FunnelChart, funnelChartVariants, type FunnelChartProps, } from './funnel-chart';

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

@@ -0,0 +1,40 @@
+import { ChartConfig, CartesianChartProps } from '../chart';
+import * as React from 'react';
+export interface HistogramBin {
+    /** Lower bound of the bin (inclusive). */
+    x0: number;
+    /** Upper bound of the bin (exclusive, except the last bin which is inclusive). */
+    x1: number;
+    /** Human-readable range label, e.g. `"0–10"`. */
+    label: string;
+    /** How many samples fell in the bin. */
+    count: number;
+}
+/**
+ * Split `values` into `binCount` equal-width bins and count the samples in each.
+ * The range is `domain` if given, else the data's [min, max]; values outside the
+ * domain are dropped, and the max value lands in the last (inclusive) bin.
+ * Returns [] when there's nothing to bin. Exported for unit tests; not part of
+ * the package's public API.
+ */
+export declare function computeHistogramBins(values: ReadonlyArray<number>, binCount: number, domain?: [number, number]): HistogramBin[];
+export interface HistogramProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps {
+    /** 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.
+     */
+    config: ChartConfig;
+    /** `config` key that colors + labels the frequency bars. */
+    dataKey?: string;
+    /** Number of equal-width bins. */
+    binCount?: number;
+    /** Fix the binning range instead of deriving it from the data's min/max. */
+    domain?: [number, number];
+    /** Corner radius on the top of each bar. */
+    barRadius?: number;
+}
+declare const Histogram: React.ForwardRefExoticComponent<Omit<HistogramProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Histogram };

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

@@ -0,0 +1 @@
+export { Histogram, type HistogramProps, type HistogramBin } from './histogram';

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

@@ -0,0 +1 @@
+export { InputOTP, type InputOTPProps } from './input-otp';

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface InputOTPProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue' | 'children'> {
+    /** Number of single-character slots. */
+    length?: number;
+    /** Controlled value (the digits entered so far, left to right). */
+    value?: string;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Fires with the full value on every change. */
+    onChange?: (value: string) => void;
+    /** Fires once, the moment the value reaches `length` characters. */
+    onComplete?: (value: string) => void;
+    /** Disables every slot. */
+    disabled?: boolean;
+    /** Switches every slot to the error treatment. */
+    error?: boolean;
+    /** Focuses the first slot on mount. */
+    autoFocus?: boolean;
+    /** Builds the accessible name for a slot from its 1-based index and the total length. */
+    slotAriaLabel?: (index: number, length: number) => string;
+}
+declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLDivElement>>;
+export { InputOTP };

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

@@ -0,0 +1 @@
+export { InputPassword, type InputPasswordProps } from './input-password';

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export interface InputPasswordProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children' | 'type'> {
+    /** Field label, rendered above the input. */
+    label?: React.ReactNode;
+    /** Marks the field required — appends a `*` after the label. */
+    required?: boolean;
+    /** Helper text below the input. Hidden while `error` is set. */
+    description?: React.ReactNode;
+    /**
+     * Error message below the input. Its presence switches the field to the error
+     * treatment (red box border + red message).
+     */
+    error?: React.ReactNode;
+    /** Accessible label for the toggle button while the password is hidden. */
+    showPasswordLabel?: string;
+    /** Accessible label for the toggle button while the password is shown. */
+    hidePasswordLabel?: string;
+}
+export declare function getInputPasswordBoxClassName(hasError: boolean, disabled?: boolean): string;
+declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProps & React.RefAttributes<HTMLInputElement>>;
+export { InputPassword };

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

@@ -0,0 +1 @@
+export { LineChart, lineChartVariants, type LineChartProps } from './line-chart';

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

@@ -0,0 +1,68 @@
+import { VariantProps } from 'class-variance-authority';
+import { ChartTooltip, ChartConfig, CartesianChartProps } from '../chart';
+import * as React from 'react';
+declare const lineChartVariants: (props?: ({
+    curve?: "step" | "linear" | "monotone" | null | undefined;
+    lineStyle?: "dashed" | "solid" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Drop the synthetic delta-band range series from a recharts tooltip/legend
+ * payload, keeping the real series (and their order). recharts already excludes
+ * the band via `legendType`/`tooltipType="none"`, so this is a second, explicit
+ * guard — hence it's unit-tested rather than relying on that behavior.
+ */
+export declare function dropBandSeries<T extends {
+    dataKey?: unknown;
+}>(payload: readonly T[] | undefined): T[] | undefined;
+type TooltipContentType = NonNullable<React.ComponentProps<typeof ChartTooltip>['content']>;
+type TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;
+type TooltipRenderProps = Parameters<TooltipContentFn>[0];
+/**
+ * Wrap a caller-supplied `tooltipContent` so the synthetic delta bands are
+ * stripped from the payload before it renders, while preserving recharts' own
+ * mount semantics — a function is mounted via `createElement` (its own component
+ * identity + hook state), an element via `cloneElement`. This mirrors what the
+ * pass-through charts get by handing `content` straight to recharts, so a
+ * 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 interface LineChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof lineChartVariants>, CartesianChartProps {
+    /** 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.
+     */
+    config: ChartConfig;
+    /** Series to plot — one `<Line>` per key. Each must exist in `config` and in every data row. */
+    dataKeys: string[];
+    /**
+     * Subset of `dataKeys` to render as comparison/trend overlays (e.g. a
+     * previous quarter or year) — dashed, dimmed, and dot-less, so they read as
+     * secondary to the current-period lines. Keeps each series' own `config` color.
+     */
+    comparisonKeys?: string[];
+    /**
+     * Pairs of `[currentKey, comparisonKey]` to shade a delta band between — a
+     * dimmed area filling the gap between the two series at each point,
+     * visualizing the QoQ/YoY difference. Tinted with the first key's `config`
+     * color. Rows where either value isn't numeric are left un-banded.
+     *
+     * Each pair mints an internal `__band_<n>` field (kept out of the tooltip and
+     * legend), so avoid data/`config` keys with that reserved prefix.
+     */
+    deltaBands?: Array<[string, string]>;
+    /** Category axis key (the shared dimension across rows, e.g. `"month"`). */
+    xKey: string;
+    /** Stroke width of each line. */
+    strokeWidth?: number;
+    /** Render a dot at each data point. */
+    showDots?: boolean;
+    /** Bridge `null` gaps in the data instead of breaking the line. */
+    connectNulls?: boolean;
+    showLegend?: boolean;
+}
+declare const LineChart: React.ForwardRefExoticComponent<Omit<LineChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { LineChart, lineChartVariants };

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

@@ -0,0 +1 @@
+export { Loading, loadingVariants, type LoadingProps } from './loading';

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

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const loadingVariants: (props?: ({
+    variant?: "inline" | "onSurfacePrimary" | "onSurfaceSecondary" | "onScreen" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface LoadingProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof loadingVariants> {
+    /** Whether the label is rendered. When `false`, `label` is still exposed to assistive tech via `aria-label`. */
+    hasLabel?: boolean;
+    /** The loading message. */
+    label?: string;
+}
+declare const Loading: React.ForwardRefExoticComponent<LoadingProps & React.RefAttributes<HTMLDivElement>>;
+export { Loading, loadingVariants };

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

@@ -0,0 +1 @@
+export { Meter, type MeterProps } from './meter';

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

@@ -0,0 +1,25 @@
+import { Meter as MeterPrimitive } from '@base-ui/react/meter';
+import * as React from 'react';
+export interface MeterProps extends Omit<React.ComponentPropsWithoutRef<typeof MeterPrimitive.Root>, 'value' | 'color'> {
+    /** Row label shown on the left. */
+    label: string;
+    /** The value this meter represents. */
+    value: number;
+    /** Upper bound of the range — the whole the value is a share of. */
+    max?: number;
+    /** Fill color for the bar — an existing semantic `--ui-*` token (or any CSS color). */
+    color: string;
+    /** Format the numeric value (label + tooltip). Defaults to `toLocaleString()`. */
+    valueFormatter?: (value: number) => string;
+    /** Show the hover tooltip (`label · value of max · %`). */
+    showTooltip?: boolean;
+    /**
+     * Custom tooltip content — replaces the default (dot + label + `value of max
+     * · %`) inside the same chart-style card. Ignored when `showTooltip` is false.
+     */
+    tooltip?: React.ReactNode;
+    /** Render with the tooltip initially open (Base UI `defaultOpen`). */
+    defaultOpen?: boolean;
+}
+declare const Meter: React.ForwardRefExoticComponent<MeterProps & React.RefAttributes<HTMLDivElement>>;
+export { Meter };

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

@@ -0,0 +1 @@
+export { Metric, type MetricProps } from './metric';

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

@@ -0,0 +1,37 @@
+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" | "neutral" | "danger" | 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;
+    /**
+     * The primary value, already formatted (`73`, `"94%"`, `"$72K"`, `"2.8"`).
+     * The kit does not format currency, units, or decimals.
+     */
+    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?: 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%". */
+    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?: React.ReactNode;
+    /** Contextual hint on an info affordance next to the label (Base UI Tooltip). */
+    tooltip?: React.ReactNode;
+    /** Accessible name for the info affordance that reveals `tooltip`. */
+    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. */
+    children?: React.ReactNode;
+}
+declare const Metric: React.ForwardRefExoticComponent<Omit<MetricProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Metric };

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

@@ -0,0 +1 @@
+export { PieChart, pieChartVariants, type PieChartProps, type PieChartCenterLabel, } from './pie-chart';

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

@@ -0,0 +1,54 @@
+import { VariantProps } from 'class-variance-authority';
+import { ChartTooltip, ChartConfig } from '../chart';
+import * as React from 'react';
+declare const pieChartVariants: (props?: ({
+    shape?: "pie" | "donut" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface PieChartCenterLabel {
+    /** Headline metric rendered large in the donut hole (e.g. a total). */
+    value?: string | number;
+    /** Caption rendered under the value. */
+    label?: string | number;
+}
+export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof pieChartVariants> {
+    /** Row-per-slice data. Each object holds the slice's `nameKey` label + its `dataKey` numeric value. */
+    data: ReadonlyArray<Record<string, string | number>>;
+    /**
+     * 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.
+     */
+    config: ChartConfig;
+    /** Numeric field that sizes each slice. */
+    dataKey: string;
+    /**
+     * Label field that names each slice (drives the legend, tooltip, and
+     * `--color-<name>` lookup). Values should be unique per chart — rows sharing a
+     * name share one `config`/color entry.
+     */
+    nameKey: string;
+    /** Inner radius of the arc when `shape="donut"` (ignored for `shape="pie"`). */
+    innerRadius?: number;
+    /**
+     * Custom content for the donut hole — a headline `value` and/or a `label`
+     * caption, stacked and centered. Rendered only for `shape="donut"` (a filled
+     * pie has no hole).
+     */
+    centerLabel?: PieChartCenterLabel;
+    /** Outer radius of the arc. Omit to use recharts' responsive default. */
+    outerRadius?: number;
+    /** Gap between slices, in degrees. */
+    paddingAngle?: number;
+    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-slice rows, or extra fields without composing
+     * recharts yourself. Ignored when `showTooltip` is false.
+     */
+    tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+}
+declare const PieChart: React.ForwardRefExoticComponent<Omit<PieChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { PieChart, pieChartVariants };

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

@@ -1 +1 @@
-export { Popover, PopoverTrigger, PopoverPortal, PopoverContent, type PopoverContentProps, } from './popover';
+export { Popover, PopoverTrigger, PopoverPortal, PopoverContent, type PopoverContentProps, PopoverBody, PopoverFooter, } from './popover';