import { BaseChartProps, StandardChartDisplayProps } from '../types/chart.types';
/**
 * Individual ring configuration
 */
export interface RingData {
    /** Progress value (0-100) */
    value: number;
    /** Optional label for the ring (e.g., "Move", "Exercise") */
    label?: string;
    /** Ring color (CSS variable or hex) */
    color?: string;
}
/**
 * ActivityRings theme overrides
 */
export interface ActivityRingsThemeOverrides {
    /** Base container styles */
    baseStyle?: string;
    /** SVG wrapper styles */
    svgStyle?: string;
    /** Ring defaults */
    ringDefaults?: {
        strokeWidth?: number;
        gap?: number;
        /** Default colors */
        colors?: string[];
    };
    /** Center text styles */
    centerText?: {
        label?: string;
        suffix?: string;
    };
}
/**
 * ActivityRings props - multiple concentric circular progress rings
 */
export interface ActivityRingsProps extends Pick<BaseChartProps, 'className' | 'children' | 'title' | 'description'>, Pick<StandardChartDisplayProps, 'variant'> {
    /** Array of rings (ordered from outer to inner) */
    rings: RingData[];
    /** Center label content (text or ReactNode) */
    centerLabel?: React.ReactNode;
    /** Optional suffix for center label (e.g., "cal", "steps") */
    centerSuffix?: string;
    /** Size of the chart (px or string with units) */
    size?: number | string;
    /** Ring stroke width (default: 12) */
    strokeWidth?: number;
    /** Gap between rings (default: 8) */
    gap?: number;
    /** Whether to show animations (default: true) */
    showAnimation?: boolean;
    /**
     * Custom color palette for rings. Colors are applied in order from outer to inner ring.
     * If fewer colors than rings, colors will cycle. Individual ring.color takes precedence.
     * When provided, overrides both light and dark theme defaults - choose colors appropriate
     * for your background.
     * @example ['#3b82f6', '#10b981', '#f59e0b']
     * @example ['var(--color-primary)', 'var(--color-success)', 'var(--color-warning)']
     */
    colors?: string[];
    /** Theme overrides */
    theme?: ActivityRingsThemeOverrides;
    /**
     * Force dark mode styling for the chart. Use when placing the chart on a dark background
     * while the page is in light mode. This applies the 'dark' class to the chart container,
     * making text, borders, and other elements use light colors for visibility.
     * @default false
     */
    darkMode?: boolean;
    /** Development and debugging props */
    showValidationWarnings?: boolean;
}
export declare const ACTIVITY_RINGS_DEFAULTS: {
    readonly size: 240;
    readonly strokeWidth: 14;
    readonly gap: 4;
    readonly showAnimation: true;
    readonly variant: "default";
};
