import type { ReactNode } from 'react';
import { type MetricColor } from './colors.ts';
export interface MetricRowProps {
    label: string;
    value: string | number;
    valueColor?: MetricColor;
    showColon?: boolean;
}
export declare function MetricRow({ label, value, valueColor, showColon }: MetricRowProps): import("react").JSX.Element;
interface MetricGridProps {
    metrics: MetricRowProps[];
    columns?: 2 | 3;
}
export declare function MetricGrid({ metrics, columns }: MetricGridProps): import("react").JSX.Element;
export declare function SectionHeader({ children }: {
    children: ReactNode;
}): import("react").JSX.Element;
interface ProgressBarProps {
    value: number;
    max?: number;
    className?: string;
    height?: 'sm' | 'md';
}
export declare function ProgressBar({ value, max, className, height }: ProgressBarProps): import("react").JSX.Element;
interface DonutChartProps {
    percentage: number;
    size?: number;
    strokeWidth?: number;
    className?: string;
}
export declare function DonutChart({ percentage, size, strokeWidth, className, }: DonutChartProps): import("react").JSX.Element;
interface SecondaryMetricProps {
    value: number;
    label: string;
    isBad?: boolean;
}
export declare function SecondaryMetric({ value, label, isBad }: SecondaryMetricProps): import("react").JSX.Element | null;
export {};