import "./metric_strip.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
import type { MetricFormat, MetricProps, MetricSize, MetricTone } from "./metric";
export interface MetricStripItem {
    /** What `onSelect` hands back; a keyed item is pressable. The list key falls back to `label`. */
    key?: string;
    label: string;
    value: number | string | null | undefined;
    format?: MetricFormat;
    currency?: string;
    /** As `Metric`'s: a plain figure's unit, read in its ladder's largest rung where `compact`. */
    unit?: MetricProps["unit"];
    /** As `Metric`'s: the same measure in other units or currencies, each stacked under `value`. */
    also?: MetricProps["also"];
    locale?: string;
    emptyLabel?: string;
    tone?: MetricTone;
    /** Strip columns are narrow (≥1 triệu → "486 tr"); the full figure belongs below. */
    compact?: boolean;
    /** The ±% chip. */
    trend?: number | null;
    /** Which way the chip's change is good, as `Metric`'s. */
    goodDirection?: "up" | "down" | "none";
    /** Recent periods, oldest first, as `Metric`'s sparkline (three at least). */
    series?: readonly number[];
    /** The goal the figure works toward, as `Metric`'s. */
    max?: number | null;
    caption?: string;
    /** Opened by the ⓘ beside the label. The strip is informational; filtering belongs to the tabs below. */
    info?: string;
}
export interface MetricStripProps extends StyleProps {
    items: MetricStripItem[];
    /** Uniform across columns. Default `lg`. */
    size?: MetricSize;
    /** The keyed tile whose condition narrows the rows below; press again to clear. */
    selectedKey?: string | null;
    /** Omit for an informational band; with it each keyed tile is a toggle. */
    onSelect?: (key: string | null) => void;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** The dashboard stat band at the top of a page whose subject is the figures. Over a register's rows its
 *  figures stand in `ReadingGrid form="band"` beside the pictures, the rows' count and total a `TotalsLine`
 *  over them. Columns keep a 180px floor
 *  and wrap; a line's tiles share its rows — label, number, change and goal, history — so a name or a goal
 *  that wraps in one moves the others' alike and their histories start on one line. With `onSelect` a keyed
 *  tile is a toggle whose condition narrows what the page lists. */
export declare function MetricStrip({ items, size, selectedKey, onSelect, testID, render, ref, ...props }: MetricStripProps): React.JSX.Element;