import "./metric.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
export type MetricFormat = "currency" | "number" | "percentage" | "none";
/** Semantic colour of the figure. `default` inherits the text colour. */
export type MetricTone = "default" | "warning" | "danger";
/**
 * Visual scale. `md` matches the body display size; `hero` is for the single
 * most important number in a section, with smaller supporting figures below it.
 */
export type MetricSize = "sm" | "md" | "lg" | "hero";
export interface MetricProps extends StyleProps {
    value: number | string | null | undefined;
    /**
     * The uppercase overline above the figure — what this number IS. Given one,
     * the entry is the labelled tile a `MetricStrip` column holds; without one it is
     * the bare figure, for a legend row or a totals line.
     */
    label?: string;
    /** Abbreviate large numeric values for display density: ≥1 tỷ → "1,28 tỷ",
     *  ≥1 triệu → "486 tr" (vi convention; other locales fall back to compact
     *  notation). For stat strips and cards where the full figure lives in the
     *  table below — never for the table itself. */
    compact?: boolean;
    format?: MetricFormat;
    currency?: string;
    locale?: string;
    emptyLabel?: string;
    tone?: MetricTone;
    size?: MetricSize;
    /**
     * Signed percent delta beside the figure — the "is this good?" indicator, as a
     * `Trend` chip. Pass `null` rather than omitting where the comparator base is
     * 0 and the percentage would be meaningless.
     */
    trend?: number | null;
    /** Below the figure: comparator detail ("Last month: 50,000,000 ₫"), a unit
     *  hint, or a short caveat. */
    caption?: string;
    /** What this figure means, or how it is computed — the ⓘ beside the label,
     *  opening the explanation in a popover. */
    info?: string;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * A HEADLINE FIGURE — the atom of every stat band, dashboard tile and summary
 * line. The label is the axis: with one it is the labelled tile (an overline, an
 * optional ⓘ, the figure beside its delta, a caption under it), without one the
 * bare number.
 *
 * A band of these is a `MetricStrip`, which aligns them; a row of loose cards does
 * not. And the comparison is never a second control — derive the comparator
 * from the selected range and pass it as `trend`, because a grain switch re-adds
 * the mode the date field removed.
 */
export declare function Metric(props: MetricProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;