import * as react from 'react';
import { HTMLAttributes, ReactNode } from 'react';

interface StatProps extends HTMLAttributes<HTMLDivElement> {
    /** The figure itself — `"2016"`, `"120+"`, `"08"`. */
    value?: ReactNode;
    /** The caption under it. */
    label?: ReactNode;
    size?: "sm" | "md" | "lg";
}
interface StatBandProps extends HTMLAttributes<HTMLDivElement> {
    /** Columns in the band. Default `4`. */
    columns?: number;
}

declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttributes<HTMLDivElement>> & {
    Band: react.ForwardRefExoticComponent<StatBandProps & react.RefAttributes<HTMLDivElement>>;
};

/**
 * The row a set of `<Stat>`s sits in.
 *
 * A plain grid, but it is the reason `<Stat>` defaults to `tabular-nums`: a
 * figure alone can be proportional without anyone noticing, and only becomes
 * wrong once it has neighbours to fail to line up with.
 */
declare const StatBand: react.ForwardRefExoticComponent<StatBandProps & react.RefAttributes<HTMLDivElement>>;

export { Stat, StatBand, type StatBandProps, type StatProps };