import type { ReactElement, ReactNode } from 'react';
export interface MetricGroupMetric {
    readonly id: string;
    /** Pre-translated label. */
    readonly label: string;
    /** Pre-formatted value (number, date, "—" for missing data). */
    readonly value: string;
    /** Optional secondary line under the value. */
    readonly hint?: string;
}
export type MetricGroupAlertSeverity = 'info' | 'warning' | 'error';
export interface MetricGroupAlert {
    readonly severity: MetricGroupAlertSeverity;
    /** Pre-translated message. */
    readonly message: string;
}
export interface MetricGroupCardProps {
    /** Pre-translated title (e.g. "Users synchronisation"). */
    readonly title: string;
    /** Optional subtitle (e.g. "Last sync ago"). */
    readonly subtitle?: string;
    /** Optional icon shown next to the title. */
    readonly icon?: ReactNode;
    /** 2-6 metrics rendered in an auto-fit grid. */
    readonly metrics: ReadonlyArray<MetricGroupMetric>;
    /** Optional list of alerts (warning, error). */
    readonly alerts?: ReadonlyArray<MetricGroupAlert>;
    /** Optional action slot pinned at the bottom (e.g. "Sync now" button). */
    readonly actions?: ReactNode;
    /** Categorical accent slot 0..7 for the title icon tint. */
    readonly accentSlot?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
}
/**
 * Compound metric card for cases where a single KPI value is not enough —
 * typically status/sync dashboards that need to surface several related
 * numbers, a freshness timestamp and a warning band in one card.
 *
 * Companion to `<KpiCard>` (single value) and `<ChartContainer>` (chart).
 * All colours come from the data-viz and status token palettes, so the card
 * follows theme changes automatically.
 */
export declare function MetricGroupCard({ title, subtitle, icon, metrics, alerts, actions, accentSlot, }: MetricGroupCardProps): ReactElement;
//# sourceMappingURL=MetricGroupCard.d.ts.map