import * as react from 'react';
import { HTMLAttributes, ReactNode } from 'react';
import { CardChangeDirection } from './card.js';

type StatCardTone = 'success' | 'error' | 'warning' | 'info';
interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
    label: string;
    /** Usually a string or number. Accepts any node — e.g. an `<Input>` for an inline-editable tile. */
    value: ReactNode;
    change?: {
        value?: string;
        direction: CardChangeDirection;
        /** Override the color. Omit to use the default (up=success, down=error, flat=info). */
        tone?: 'success' | 'error' | 'warning' | 'info' | 'accent';
    };
    accent?: boolean;
    /** Colors the value and border to signal status (e.g. an over-budget figure). Independent of `accent`; takes precedence when both are set. */
    tone?: StatCardTone;
    icon?: ReactNode;
    /** A secondary unit/value shown as a badge under the main value — e.g. price per liter next to a kr price. */
    secondaryValue?: ReactNode;
    /** `Badge` variant for `secondaryValue`. Defaults to `'default'`. */
    secondaryTone?: 'default' | 'accent' | 'success' | 'error' | 'warning' | 'info';
}
declare const StatCard: react.ForwardRefExoticComponent<StatCardProps & react.RefAttributes<HTMLDivElement>>;

export { StatCard, type StatCardProps, type StatCardTone };