import { ReactNode, RefObject, CSSProperties } from 'react';
/**
 * Font size value - can be a theme token key or a CSS value
 */
export type FontSizeValue = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | CSSProperties['fontSize'];
/**
 * Size variants for the Modal component
 */
export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
/**
 * Props for the Modal component
 *
 * The Modal component provides a complete dialog solution with:
 * - Pre-built header with title and close button
 * - Scrollable body content area
 * - Footer for action buttons
 * - Size variants (sm, md, lg, xl, full)
 * - Uses Headless UI Dialog for accessibility
 * - Animated transitions for both backdrop and panel
 * - Transparent backdrop option for loading overlays or custom scenarios
 * - Custom z-index for stacking contexts
 * - Focus management with initial focus control
 *
 * @example
 * ```tsx
 * // Standard dialog with structure
 * <Modal isOpen={isOpen} onClose={handleClose} title="Confirm Delete">
 *   <p>Are you sure you want to delete this item?</p>
 *   <Modal.Footer>
 *     <Button onClick={handleClose}>Cancel</Button>
 *     <Button variant="primary" onClick={handleDelete}>Delete</Button>
 *   </Modal.Footer>
 * </Modal>
 *
 * // Loading overlay (transparent backdrop with just a spinner)
 * <Modal isOpen={isLoading} onClose={() => {}} transparent showCloseButton={false}>
 *   <Spinner size="lg" />
 * </Modal>
 *
 * // Custom z-index for stacking
 * <Modal isOpen={isOpen} onClose={handleClose} zIndex={2000}>
 *   <p>High z-index modal</p>
 * </Modal>
 * ```
 */
export interface ModalProps {
    /** Whether modal is open */
    isOpen: boolean;
    /** Close handler */
    onClose: () => void;
    /** Modal title */
    title?: string;
    /**
     * Font size for the title
     * Can be a theme token key ('xs', 'sm', 'base', 'md', 'lg', 'xl') or CSS value
     * @default 'lg'
     */
    titleFontSize?: FontSizeValue;
    /** Modal content */
    children: ReactNode;
    /** Size variant */
    size?: ModalSize;
    /** Whether clicking backdrop closes modal */
    closeOnBackdropClick?: boolean;
    /** Whether pressing Escape closes modal */
    closeOnEsc?: boolean;
    /** Show close button in header */
    showCloseButton?: boolean;
    /** Custom footer content */
    footer?: ReactNode;
    /** Additional CSS classes */
    className?: string;
    /** Portal container (defaults to document.body) */
    portalContainer?: HTMLElement;
    /** Test ID (deprecated, use dataTestId) */
    'data-testid'?: string;
    /** Test identifier for automated testing */
    dataTestId?: string;
    /** Data identifier for ib-ui compatibility */
    dataId?: string;
    /**
     * Whether the backdrop is transparent (no dark background)
     * Useful for loading overlays or custom scenarios
     * @default false
     */
    transparent?: boolean;
    /**
     * Z-index for the modal
     * @default 50
     */
    zIndex?: number;
    /**
     * Reference to an element that should receive initial focus when the modal opens
     * If not provided, focus will go to the first focusable element in the modal
     */
    initialFocusRef?: RefObject<HTMLElement | null>;
    /**
     * Callback fired when the modal finishes mounting
     */
    onMount?: (container: HTMLDivElement) => void;
    /**
     * ARIA label for the dialog region
     */
    'aria-label'?: string;
}
/**
 * Props for the ModalHeader compound component
 */
export interface ModalHeaderProps {
    /** Header content */
    children: ReactNode;
    /** Additional CSS classes */
    className?: string;
}
/**
 * Props for the ModalBody compound component
 */
export interface ModalBodyProps {
    /** Body content */
    children: ReactNode;
    /** Additional CSS classes */
    className?: string;
}
/**
 * Props for the ModalFooter compound component
 */
export interface ModalFooterProps {
    /** Footer content */
    children: ReactNode;
    /** Additional CSS classes */
    className?: string;
}
//# sourceMappingURL=Modal.types.d.ts.map