/**
 * @file Overlay.tsx
 * @input Uses React, useOverlay
 * @output Exports Overlay component
 * @position Overlay system component; thin wrapper over useOverlay
 *
 * Wraps content with an overlay scrim. Same pattern as Tooltip:
 * `children` is the base content, `content` is what appears on top.
 *
 * For applying overlay behavior to an existing container (Card),
 * use the useOverlay hook directly.
 */
import type { ReactNode, Ref } from 'react';
import type { BaseProps } from '../BaseProps';
import type { OverlayScrimMode, OverlayPosition, OverlayAlign, OverlayShowOn } from './OverlayScrim';
export interface OverlayProps extends Pick<BaseProps<HTMLDivElement>, 'xstyle' | 'className' | 'style'> {
    /** Ref forwarded to the container element. */
    ref?: Ref<HTMLDivElement>;
    /** Base content (image, card, video, etc.). */
    children?: ReactNode;
    /** Content rendered inside the overlay scrim. */
    content: ReactNode;
    /** @default "always" */
    showOn?: OverlayShowOn;
    /** JS-controlled visibility override. */
    isOpen?: boolean;
    /** @default "dark" */
    scrim?: OverlayScrimMode;
    /** @default "fill" */
    position?: OverlayPosition;
    /** @default "end" */
    align?: OverlayAlign;
}
/**
 * Overlay — renders content on top of media with a scrim background
 * and automatic theme inversion.
 *
 * `children` = base content, `content` = what appears on top.
 *
 * @compositionHint Wrap images, video, or media content.
 *
 * @example
 * ```
 * <Overlay
 *   showOn="hover"
 *   content={<Button label="Quick view" variant="ghost" />}>
 *   <AspectRatio ratio={16/9}>
 *     <img src="hero.jpg" style={{objectFit: 'cover', width: '100%', height: '100%'}} />
 *   </AspectRatio>
 * </Overlay>
 * ```
 */
export declare function Overlay({ children, content, showOn, isOpen, scrim, position, align, xstyle, className, style, ref, }: OverlayProps): import("react").JSX.Element;
export declare namespace Overlay {
    var displayName: string;
}
//# sourceMappingURL=Overlay.d.ts.map