import { type ReactElement, type ReactNode } from 'react';
import { type ColorMode, type ThemeVariant } from '../../theme';
type HoverOverlayPlacement = 'bottom-start' | 'bottom-end';
type ColorModeCircleShape = 'square' | 'circle';
export interface ColorModeCircleProps {
    /** Current color mode. */
    colorMode: ColorMode;
    /** Called with the next color mode when the circle is clicked. */
    onColorModeChange: (mode: ColorMode) => void;
    /** Diameter of the circle in pixels. */
    size?: number;
    /** Optional overlay shown when hovering the circle. */
    hoverOverlay?: ReactNode;
    /** Keep legacy click-to-cycle behavior when an overlay is present. */
    cycleOnClick?: boolean;
    /** Overlay placement relative to the circle. */
    hoverOverlayPlacement?: HoverOverlayPlacement;
    /** Optional theme used to tint the circle border. */
    themeVariant?: ThemeVariant;
    /** Visual shape of the control. */
    shape?: ColorModeCircleShape;
}
/**
 * A single clickable circle that cycles the color mode through
 * light → dark → system (auto). The icon reflects the current mode.
 */
export declare function ColorModeCircle({ colorMode, onColorModeChange, size, hoverOverlay, cycleOnClick, hoverOverlayPlacement, themeVariant, shape, }: ColorModeCircleProps): ReactElement;
export default ColorModeCircle;