import React from 'react';
/** Which direction of change is good news. */
export type StatTileGoodWhen = 'up' | 'down' | 'neutral';
/** How `change` is expressed. */
export type StatTileChangeUnit = 'percent' | 'points';
export interface StatTileLabels {
    /** The badge when the change rounds to zero — "No change". */
    noChange?: string;
    /**
     * The badge — "+3.2%", "−1.5 pts". Receives the change rounded to one
     * decimal, sign included, and its unit.
     */
    change?: (change: number, unit: StatTileChangeUnit) => string;
    /** Read after the badge when the change is good — ", better". */
    better?: string;
    /** Read after the badge when the change is bad — ", worse". */
    worse?: string;
}
export interface StatGroupProps extends React.HTMLAttributes<HTMLDListElement> {
    /** StatTile elements. */
    children?: React.ReactNode;
}
export interface StatTileProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
    /** What is being measured. Short: "Success rate", not a sentence. */
    label: string;
    /**
     * The figure, already formatted — "1.2k", "96.2%", "38s". Formatting is the
     * caller's: only it knows the locale, the precision and the unit.
     */
    value: React.ReactNode;
    /** Change against the comparison period. Omit when there is none. */
    change?: number;
    /**
     * `percent` for a relative change; `points` for a metric that is already a
     * percentage — 95% to 96% is +1 pt, and calling it +1.1% misreports it.
     */
    changeUnit?: StatTileChangeUnit;
    /**
     * Which direction is good news. `down` for costs, durations and queues;
     * `neutral` when a change is neither, so it is never coloured.
     */
    goodWhen?: StatTileGoodWhen;
    /** What `change` is measured against. */
    comparison?: string;
    /**
     * The change's words, for translation. English by default. StatTile renders
     * on the server, where there is no locale to read, so its default formats
     * the number the English way — pass `labels.change` to format it in the
     * reader's.
     */
    labels?: StatTileLabels;
    /** Shows a placeholder for the value and change while data loads. */
    isLoading?: boolean;
}
/**
 * StatGroup — a row of StatTiles.
 *
 * A `<dl>`: each tile is a term (the label) and its description (the figure),
 * which is what a screen reader announces as a pair. The grid wraps on its own,
 * so four tiles are one row on a desktop and two on a phone with no breakpoint
 * in the caller's code.
 */
export declare const StatGroup: React.ForwardRefExoticComponent<StatGroupProps & React.RefAttributes<HTMLDListElement>>;
/**
 * StatTile — one headline figure, and how it moved.
 *
 * Promoted from the demo app, where it was built for the Overview KPI row and
 * survived three phases unchanged.
 *
 * GOOD AND BAD ARE NOT UP AND DOWN
 *
 * A rising median run time is bad news and a rising success rate is good, so
 * the colour comes from `goodWhen` and the direction together — never from the
 * sign alone. `neutral` never colours: a run count going up is not a verdict.
 * The verdict is also spoken, as visually hidden text after the change, so it
 * never rests on the badge's colour.
 *
 * The change is rounded BEFORE it is judged, so −0.04 reads "No change" rather
 * than a red "−0.0%".
 *
 * It must sit inside a StatGroup: the tile renders a `<dt>` and a `<dd>`, which
 * are only valid inside a `<dl>`.
 */
export declare const StatTile: React.ForwardRefExoticComponent<StatTileProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=StatTile.d.ts.map