import { default as React } from 'react';
import { StatusLevel } from '../utils';
export type MonitoringStatus = StatusLevel;
export interface MonitoringIconProps {
    /** Current status of the monitored item */
    status: MonitoringStatus;
    /** Primary label (always visible) */
    label: string;
    /** Sub-label for dynamic info (optional) */
    sublabel?: string;
    /** Icon name or custom icon element */
    icon?: string | React.ReactNode;
    /** Notification count badge */
    notifications?: number;
    /** Show tooltip on hover */
    tooltip?: string;
    /** Custom className */
    className?: string;
    /** Click handler */
    onClick?: () => void;
    /**
     * Show percentage arc display instead of icon
     * When true, displays a circular arc showing the percentage value
     */
    showPercentage?: boolean;
    /** Percentage value (0-100) - displayed as arc when showPercentage is true */
    percentage?: number;
    /** Map percentage to status colors (e.g., low = critical, high = normal) */
    percentageToStatus?: "ascending" | "descending";
    /** Show percentage value as text inside the arc */
    showPercentageValue?: boolean;
}
/**
 * MonitoringIcon - Pure React monitoring icon component
 *
 * Displays system status with icon, label, and optional notification badge.
 * Fully Astro UX compliant with theme integration.
 *
 * @example
 * ```tsx
 * // Standard monitoring icon
 * <MonitoringIcon
 *   status="normal"
 *   label="Power"
 *   sublabel="85%"
 *   icon="power"
 * />
 *
 * // Percentage arc display
 * <MonitoringIcon
 *   status="normal"
 *   label="Battery"
 *   showPercentage
 *   percentage={75}
 *   percentageToStatus="ascending"
 * />
 * ```
 */
export declare const MonitoringIcon: React.NamedExoticComponent<MonitoringIconProps>;