import { ReactNode, JSX } from 'react';
export type StatCardEmphasis = "compact" | "default" | "prominent";
export type StatCardTone = "default" | "success" | "warning" | "danger" | "info";
export type StatCardTrendDirection = "up" | "down" | "flat";
/**
 * How a numeric value arrives. `count` counts up from the previous value;
 * `digits` pops each character of the formatted value in, staggered, and
 * replays when the value changes.
 */
export type StatCardAnimation = "count" | "digits";
export interface StatCardTrend {
    /** Direction indicator (up / down / flat) */
    direction: StatCardTrendDirection;
    /** Human-readable delta label (e.g. "+12%", "-3", "0") */
    label: string;
    /** Optional ARIA description for screen readers */
    ariaLabel?: string;
}
export interface StatCardProps {
    /** Short label rendered above the value (UPPERCASE styled) */
    label: string;
    /**
     * Rendered in place of `label` when the label is not plain text: a glossary
     * term carrying its definition, a unit badge, an info affordance.
     *
     * `label` stays required and stays the accessible name, so the name is a
     * string the consumer wrote rather than whatever text happens to fall out of
     * a node. Pass the same words in both.
     */
    labelNode?: ReactNode;
    /** Primary metric value (number is coerced to localised string) */
    value: string | number;
    /** Optional suffix appended to the value (e.g. "/ 4", "GB") */
    valueSuffix?: string;
    /** Optional helper line under the value (e.g. context, secondary metric) */
    hint?: ReactNode;
    /** Optional leading icon node, rendered inside an accent badge */
    icon?: ReactNode;
    /** Visual tone, mirrors Badge variants. Default: "default" */
    tone?: StatCardTone;
    /** Optional trend indicator under the value */
    trend?: StatCardTrend;
    /** Click handler. Renders the card as keyboard-accessible button. */
    onClick?: () => void;
    /** Render skeletons instead of value/label content while loading */
    loading?: boolean;
    /** Optional aria label override (defaults to label + value) */
    ariaLabel?: string;
    /** Extra class name applied to the root */
    className?: string;
    /** Test id for unit tests */
    testId?: string;
    /**
     * Formatter for numeric values (e.g. abbreviate to "1.2K", append "%").
     * Defaults to `toLocaleString`. Ignored when `value` is a string.
     */
    format?: (value: number) => string;
    /**
     * Animate a numeric value on mount and on change. `true` or `"count"`
     * counts up to it; `"digits"` pops each character of the formatted value
     * in, staggered, rising into place from a light blur. Off by default so
     * existing consumers render the final value immediately; opt in for
     * dashboard metrics. Suppressed under `prefers-reduced-motion`, and ignored
     * for string values and while loading.
     */
    animate?: boolean | StatCardAnimation;
    /**
     * Optional trailing visual on the value line (e.g. a sparkline). Kept as a
     * slot so the card does not depend on any particular chart component.
     */
    sparkline?: ReactNode;
    /** Visual weight. Default: "default" */
    emphasis?: StatCardEmphasis;
}
declare function StatCardComponent({ label, labelNode, value, valueSuffix, hint, icon, tone, trend, onClick, loading, ariaLabel, className, testId, format, animate, sparkline, emphasis, }: StatCardProps): JSX.Element;
export declare const StatCard: import('react').MemoExoticComponent<typeof StatCardComponent>;
export {};