import type { ReactElement, ReactNode } from 'react';
/**
 * KPI card variant for the left coloured accent stripe.
 *
 * - `'neutral'` (default): no stripe — Polaris/Carbon-style minimalist card.
 * - `'primary'`: stripe in `var(--dataviz-accent)` — for the dashboard's headline KPI.
 * - number `0..7`: stripe in `var(--dataviz-cat-{N+1})` — used when several KPIs share
 *   the same dashboard and need a quick visual category cue (e.g. matching the
 *   companion chart's series colour). Order is significant — passing `2` will always
 *   render the same colour as `getCategoricalColor(2)` and the corresponding chart series.
 */
export type KpiAccent = 'neutral' | 'primary' | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
export interface KpiTrend {
    /** Numeric or pre-formatted value to display next to the trend icon (e.g. "+12%"). */
    readonly value: number | string;
    readonly direction: 'up' | 'down' | 'neutral';
    /** Optional sub-label ("vs last month"). */
    readonly label?: string;
}
export interface KpiCardProps {
    readonly title: string;
    readonly value: string | number;
    readonly icon?: ReactNode;
    readonly subtitle?: string;
    readonly trend?: KpiTrend;
    /** See {@link KpiAccent}. Defaults to `'neutral'`. */
    readonly accent?: KpiAccent;
    readonly onClick?: () => void;
    /** Optional aria-label override; falls back to `title`. */
    readonly ariaLabel?: string;
}
/**
 * Centralised KPI card component for all SmartStack dashboards.
 *
 * Replaces the 9 ad-hoc `KpiCard()` functions previously duplicated across the
 * dashboard pages. Colours come exclusively from `--dataviz-*` CSS variables
 * driven by the active theme (see `UiTheme.dataVizColorsJson`).
 *
 * Accessibility:
 * - Trend direction is communicated through both colour *and* icon (↑/↓/→), in
 *   line with WCAG 1.4.1 (Use of Color).
 * - When `onClick` is provided, the card renders as a `<button>` with the
 *   expected keyboard semantics; otherwise it's a plain `<div>`.
 */
export declare function KpiCard({ title, value, icon, subtitle, trend, accent, onClick, ariaLabel, }: KpiCardProps): ReactElement;
//# sourceMappingURL=KpiCard.d.ts.map