import { type ReactNode } from "react";
export type StatTrend = "up" | "down" | "flat";
/** Whether the change is good news. Money and volume are usually "neutral". */
export type StatSentiment = "positive" | "negative" | "neutral";
export interface StatDelta {
    /** Display text, "+12%" or "-2". */
    value: string;
    trend: StatTrend;
    sentiment?: StatSentiment | undefined;
    /** "vs previous 7 days". */
    comparison?: string | undefined;
}
export interface StatTileProps {
    label: string;
    /** Preformatted: "1,284", "$312.40", "48.2M". Rendered with tabular numbers. */
    value?: ReactNode | undefined;
    /** A small unit after the value: "GB", "sessions". */
    unit?: ReactNode | undefined;
    delta?: StatDelta | undefined;
    /** One muted line under the value (and under the delta when both): "Of 16 GB". */
    caption?: ReactNode | undefined;
    /** Values oldest to newest; drawn as a line under the number. */
    sparkline?: number[] | undefined;
    loading?: boolean | undefined;
    /** Shown instead of the value when there's no data: "No sessions yet". */
    empty?: ReactNode | undefined;
    /** Draw its own border. Off inside a StatGroup. */
    framed?: boolean | undefined;
    className?: string | undefined;
}
/** Normalizes values into SVG points in a 100 x 32 box. Exported for tests. */
export declare function sparklinePoints(values: number[], width?: number, height?: number, inset?: number): string;
export declare function StatTile({ label, value, unit, delta, caption, sparkline, loading, empty, framed, className, }: StatTileProps): import("react").JSX.Element;
/**
 * Tiles side by side with hairline dividers, in one bordered frame. Columns
 * follow the frame's own width: one under 320px, two under 768px, then all.
 */
export declare function StatGroup({ children, columns, label, className, }: {
    children: ReactNode;
    /** Columns at full width. */
    columns?: 2 | 3 | 4 | undefined;
    /** Accessible name for the group, for example "Last 7 days". */
    label?: string | undefined;
    className?: string | undefined;
}): import("react").JSX.Element;