import { Size, type SheetDefaultSize } from "@trackunit/react-components";
import { type PropsWithChildren, type ReactElement } from "react";
import type { UseModalReturnValue } from "./useModal";
/**
 * Modal props extend the return type of useModal and add presentational-only props.
 */
export type ModalProps = PropsWithChildren<UseModalReturnValue & {
    /**
     * The size of the modal card.
     */
    size: Size;
    /**
     * The classes for the modal.
     */
    className?: string;
    /**
     * The test ID applied to the modal.
     */
    "data-testid"?: string;
    /**
     * Initial snap size of the sheet when Modal renders in sheet mode.
     * Only relevant on narrow viewports where the modal becomes a bottom sheet.
     *
     * @default "fit"
     */
    sheetDefaultSize?: SheetDefaultSize;
    /**
     * Determines if focus should be restored to the nearest tabbable element
     * if the currently focused element inside the modal is removed from the DOM.
     *
     * @default true
     */
    restoreFocus?: boolean;
}>;
/**
 * Modal presents critical information or requests user input in an overlay dialog that interrupts the current workflow.
 * It renders inside a Portal with a backdrop overlay, focus trapping, and proper accessibility roles.
 * Modals must always be used together with the `useModal` hook, which manages open/close state and Floating UI integration.
 *
 * When the container width is below the "sm" breakpoint (480px), the Modal
 * automatically renders as a bottom Sheet with gesture support.
 *
 * Compose the modal body with `ModalHeader`, `ModalBody`, and `ModalFooter` for consistent structure.
 *
 * ### When to use
 * Use Modal for confirmations, forms, or critical information that requires user attention before proceeding.
 *
 * ### When not to use
 * Do not use Modal for non-blocking notifications — use `Notice` or `Alert`.
 * Do not use Modal for simple tooltips or contextual info — use `Popover`.
 *
 * @example Modal with header, body, and footer
 * ```tsx
 * import { Modal, ModalHeader, ModalBody, ModalFooter, useModal } from "@trackunit/react-modal";
 *
 * const ConfirmDialog = () => {
 *   const modal = useModal();
 *   return (
 *     <>
 *       <button onClick={modal.open}>Open</button>
 *       <Modal {...modal} size="medium">
 *         <ModalHeader onClickClose={modal.close} heading="Confirm Action" />
 *         <ModalBody>Are you sure you want to proceed?</ModalBody>
 *         <ModalFooter onCancel={modal.close} primaryLabel="Confirm" />
 *       </Modal>
 *     </>
 *   );
 * };
 * ```
 * @param {ModalProps} props - The props for the Modal component
 * @returns {ReactElement} Modal component
 */
export declare const Modal: ({ children, container, dismiss, isOpen, mode, requestClose, role, "data-testid": dataTestId, className, size, stack, floatingUi, ref, sheetDefaultSize, restoreFocus, onCloseComplete, }: ModalProps) => ReactElement;