import { type JSX } from "react";
/**
 * Properties for the {@link Dialog} component.
 * Extends the standard HTML dialog attributes with animation support.
 */
export type DialogProps = JSX.IntrinsicElements["dialog"] & {
    /**
     * The CSS animation name or shorthand to apply when the dialog is shown.
     * @example "fade-in 0.3s ease-out"
     */
    enterAnimation?: string;
    /**
     * The CSS animation name or shorthand to apply when the dialog is hidden.
     * @example "fade-out 0.2s ease-in"
     */
    exitAnimation?: string;
};
/**
 * A responsive, accessible Dialog component built on top of the native HTML `<dialog>` element.
 *
 * @remarks
 * Features:
 * - Native `<dialog>` implementation for accessibility.
 * - Automatic focus trapping using {@link useFocusTrap}.
 * - Body scroll prevention using {@link usePreventScroll}.
 * - Backdrop click-to-close functionality.
 * - Support for entry and exit animations.
 *
 * @param props - The properties for the Dialog component.
 * @returns A JSX element representing the Dialog.
 *
 * @example
 * ### Basic Usage
 * ```tsx
 * const [isOpen, setIsOpen] = useState(false);
 *
 * return (
 *   <>
 *     <button onClick={() => setIsOpen(true)}>Open Dialog</button>
 *     <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
 *       <h2>Welcome</h2>
 *       <p>This is a native dialog.</p>
 *       <button onClick={() => setIsOpen(false)}>Close</button>
 *     </Dialog>
 *   </>
 * );
 * ```
 *
 * @example
 * ### With Animations
 * ```tsx
 * <Dialog
 *   open={isOpen}
 *   enterAnimation="slide-up 0.3s ease-out"
 *   exitAnimation="slide-down 0.2s ease-in"
 *   onClose={handleClose}
 * >
 *   <p>Animated content</p>
 * </Dialog>
 * ```
 */
export declare function Dialog({ open, ref, onClose, enterAnimation, exitAnimation, ...props }: DialogProps): JSX.Element;