import { default as React } from 'react';
import { CustomMetric } from './sections/CustomSection';
import { WebVitalsMetrics } from './hooks/useWebVitals';
import { BundleMetrics } from './hooks/useBundleMetrics';
import { ApiMetrics } from './hooks/useApiMetrics';
export type PerformancePanelSection = 'webVitals' | 'bundle' | 'api' | 'memory' | 'custom';
export interface PerformancePanelProps {
    /** Enable the panel (default: only in development) */
    enabled?: boolean;
    /** Start collapsed (default: true) */
    defaultCollapsed?: boolean;
    /** Start visible (default: true) */
    defaultVisible?: boolean;
    /** Position on screen */
    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
    /** Enable dragging (default: true) */
    draggable?: boolean;
    /** Sections to display (default: all) */
    sections?: PerformancePanelSection[];
    /** Custom metrics to display */
    customMetrics?: CustomMetric[];
    /** Custom section title */
    customSectionTitle?: string;
    /** API URL patterns to track */
    apiPatterns?: string[];
    /** Callback when metrics update */
    onMetricsUpdate?: (metrics: {
        webVitals: WebVitalsMetrics;
        bundle: BundleMetrics;
        api: ApiMetrics;
    }) => void;
    /** Custom className */
    className?: string;
}
/**
 * PerformancePanel - A floating dev panel for monitoring performance metrics
 *
 * @example
 * ```tsx
 * // Basic usage (dev only)
 * <PerformancePanel />
 *
 * // With custom metrics
 * <PerformancePanel
 *   customMetrics={[
 *     { id: 'walletConnect', label: 'Wallet Connect', value: 245, unit: 'ms' },
 *   ]}
 * />
 *
 * // Specific sections only
 * <PerformancePanel sections={['webVitals', 'api']} />
 * ```
 */
export declare const PerformancePanel: React.FC<PerformancePanelProps>;
//# sourceMappingURL=PerformancePanel.d.ts.map