import type { ElementType, HTMLAttributes, MouseEventHandler, ReactNode } from "react";
import type { Tone } from "../../Theme/tokens/builders/tone";
type StatTrend = "up" | "down";
/** KPI tile; delta is green when `trend` matches `goodDirection`; other HTML attributes land on the root. */
export interface StatCardProps extends Omit<HTMLAttributes<HTMLElement>, "color" | "children" | "dangerouslySetInnerHTML" | "onClick" | "aria-label"> {
    /** Metric name in the card header, beside the optional icon chip. */
    label: ReactNode;
    /** Large tabular-number figure; pre-format it (currency, units) yourself. */
    value: ReactNode;
    /** Change text, e.g. "+12%"; muted unless `trend` is set. */
    delta?: ReactNode;
    /** Adds an arrow and SR "Up"/"Down" to the delta; no effect without `delta`. */
    trend?: StatTrend;
    /** Which trend counts as good (green); defaults to "up" — use "down" for costs or churn. */
    goodDirection?: StatTrend;
    /** Muted text beside the delta, e.g. "vs last month". */
    hint?: ReactNode;
    /** Small inline trend chart rendered beside the value, e.g. a sparkline SVG; bring your own — this only sizes/positions the slot (max 96px wide, 32px tall). */
    sparkline?: ReactNode;
    /** Content pinned to the bottom of the card below a divider, e.g. a "View details" link. */
    footer?: ReactNode;
    /** Icon component (not an element) shown in a tinted chip before the label. */
    icon?: ElementType;
    /** Paints the icon chip with a soft status tone; unset keeps the brand-primary chip, "neutral" is grey. */
    iconTone?: Tone;
    /** Shows a skeleton and disables the click target. */
    isLoading?: boolean;
    /** Turns the tile into a full-size button with hover and focus styles. */
    onClick?: MouseEventHandler<HTMLButtonElement>;
    /** Applied only when `onClick` makes the tile a button. */
    "aria-label"?: string;
    "data-testid"?: string;
}
export {};