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

/** One figure and what it counts. */
interface StatListItem {
    /** The figure. Emphasised — it is what the eye lands on first. */
    value: ReactNode;
    /** What the figure counts. */
    label: ReactNode;
    /**
     * Stable handle for this row, for an agent reading a figure off the page.
     *
     * Defaults to `label` when it is a plain string, which covers the common
     * case without asking a caller to repeat themselves.
     */
    key?: string;
}
interface StatListProps extends HTMLAttributes<HTMLDivElement> {
    /** The figures. Data rather than children — the repeated thing is a shape. */
    items: StatListItem[];
    /** Which edge the stack aligns to. Default `"right"`. */
    align?: "left" | "right";
}

/**
 * The mono figure stack — `70 packages / 261 components / MIT licensed`.
 *
 * The Inspiration index and `/packages` each hand-rolled this from tokens, which
 * is the gallery working as intended: it stress-tests the kit, and what it
 * hand-rolls is the gap list. The list only pays off when the gap comes back
 * here, otherwise every surface keeps a copy and they drift apart.
 *
 * Takes `items` as DATA rather than children. What those surfaces repeat is a
 * shape, not a layout, so there is nothing to assemble at the call site — and a
 * data prop is what an agent can emit, which children are not.
 *
 * The value is a `<b>` rather than a colour, because in most of these stacks the
 * figure is the only part that is not muted, and expressing that structurally
 * keeps it meaningful when a design replaces the styling wholesale.
 */
declare const StatList: react.ForwardRefExoticComponent<StatListProps & react.RefAttributes<HTMLDivElement>>;

export { StatList, type StatListItem, type StatListProps };