import React, { ReactNode } from 'react';
interface MetricCardProps {
    /** Metric label */
    label: string;
    /** Metric value */
    value: string | number;
    /** Optional unit (e.g., '%', '$') */
    unit?: string;
    /** Optional icon */
    icon?: ReactNode;
    /** Optional description/subtitle */
    description?: string;
    /** Optional color variant */
    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
    /** Test ID */
    testId?: string;
    /** Optional CSS class */
    className?: string;
    /** Optional aria-label for accessibility */
    ariaLabel?: string;
}
/**
 * Reusable card component for displaying key metrics
 *
 * ## Business Perspective
 *
 * This component presents key security metrics in a consistent,
 * easy-to-scan format. Standardized metric cards help stakeholders
 * quickly understand critical security indicators. 📊
 *
 * **DESIGN SYSTEM**: Uses Tailwind classes only - no inline styles.
 * Follows 8px grid system (p-sm=8px minimum) for consistent spacing.
 *
 * @example
 * ```tsx
 * <MetricCard
 *   label="Uptime Target"
 *   value="99.9"
 *   unit="%"
 *   icon="⏱️"
 *   description="Expected system availability"
 *   variant="success"
 *   testId="uptime-metric"
 * />
 * ```
 */
export declare const MetricCard: React.FC<MetricCardProps>;
export default MetricCard;
//# sourceMappingURL=MetricCard.d.ts.map