import { MouseEventHandler } from 'react';
import { BackdropVariant } from '@mezzanine-ui/core/backdrop';
import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
import { PortalProps } from '../Portal';
export interface BackdropProps extends Pick<PortalProps, 'children' | 'container' | 'disablePortal'>, NativeElementPropsWithoutKeyAndRef<'div'> {
    /**
     * Controls whether to disable closing element while backdrop clicked.
     * @default false
     */
    disableCloseOnBackdropClick?: boolean;
    /**
     * Controls whether to disable scroll locking when backdrop is open.
     * @default false
     */
    disableScrollLock?: boolean;
    /**
     * Click handler for backdrop.
     */
    onBackdropClick?: MouseEventHandler;
    /**
     * Callback fired while the element will be closed.
     */
    onClose?: VoidFunction;
    /**
     * Controls whether to show the element.
     * @default false
     */
    open?: boolean;
    /**
     * The variant of backdrop.
     * @default 'dark'
     */
    variant?: BackdropVariant;
}
/**
 * 用於 Modal、Drawer 等覆蓋層元件的遮罩底層元件。
 *
 * 透過 `Portal` 渲染至指定的 DOM 容器，並使用 `Fade` 動畫處理顯示與隱藏過渡。
 * 開啟時會自動鎖定 body 捲動（可透過 `disableScrollLock` 停用）。
 * 點擊遮罩時預設觸發 `onClose`，可透過 `disableCloseOnBackdropClick` 停用此行為。
 *
 * @example
 * ```tsx
 * import Backdrop from '@mezzanine-ui/react/Backdrop';
 *
 * // 基本用法
 * <Backdrop open={open} onClose={() => setOpen(false)}>
 *   <div>浮層內容</div>
 * </Backdrop>
 *
 * // 使用淺色遮罩並停用點擊關閉
 * <Backdrop
 *   open={open}
 *   onClose={() => setOpen(false)}
 *   variant="light"
 *   disableCloseOnBackdropClick
 * >
 *   <div>強制顯示的內容</div>
 * </Backdrop>
 *
 * // 渲染至自訂容器
 * <Backdrop open={open} onClose={() => setOpen(false)} container={containerRef}>
 *   <div>相對定位的浮層</div>
 * </Backdrop>
 * ```
 *
 * @see {@link Modal} 對話框元件
 * @see {@link Drawer} 抽屜面板元件
 */
declare const Backdrop: import("react").ForwardRefExoticComponent<BackdropProps & import("react").RefAttributes<HTMLDivElement>>;
export default Backdrop;