import { default as React } from 'react';
import { MetricRating } from '../components/MetricRow';
export interface CustomMetric {
    /** Unique identifier */
    id: string;
    /** Display label */
    label: string;
    /** Metric value */
    value: number | string;
    /** Unit suffix (e.g., 'ms', 'KB') */
    unit?: string;
    /** Description text */
    description?: string;
    /** Thresholds for rating (only for numeric values) */
    thresholds?: {
        good: number;
        poor: number;
    };
    /** Override rating color */
    rating?: MetricRating;
}
export interface CustomSectionProps {
    /** Section title */
    title?: string;
    /** Title color class */
    titleColor?: string;
    /** Custom metrics to display */
    metrics: CustomMetric[];
    /** Custom className */
    className?: string;
}
/**
 * CustomSection - Display user-defined custom metrics
 *
 * @example
 * ```tsx
 * <CustomSection
 *   title="Web3 Metrics"
 *   titleColor="text-orange-400"
 *   metrics={[
 *     { id: 'walletConnect', label: 'Wallet Connect', value: 245, unit: 'ms', thresholds: { good: 300, poor: 1000 } },
 *     { id: 'txPending', label: 'Pending Txs', value: 3 },
 *   ]}
 * />
 * ```
 */
export declare const CustomSection: React.FC<CustomSectionProps>;
//# sourceMappingURL=CustomSection.d.ts.map