import { ContainerProps } from "../Container/index.js";
import { FC, ReactNode } from "react";

//#region src/components/Modal/Modal.d.ts

/**
 * Enumeration of available modal sizes
 */
declare enum ModalSize {
  /** Small modal: max height 30vh, max width xl */
  SM = "sm",
  /** Medium modal: max height 50vh, max width xl */
  MD = "md",
  /** Large modal: max height 70vh, max width 2xl */
  LG = "lg",
  /** Extra large modal: max height 95vh, max width 6xl */
  XL = "xl",
  /** Unset size: max height 95vh, full width responsive */
  UNSET = "unset",
}
/**
 * Props for the Modal component
 */
type ModalProps = {
  /** Content to be displayed inside the modal */
  children: ReactNode;
  /** Controls whether the modal is visible */
  isOpen: boolean;
  /** Callback function called when the modal should be closed */
  onClose?: () => void;
  /** Container element to render the modal into (defaults to document.body) */
  container?: HTMLElement;
  /** Whether to disable scrolling on the background content */
  disableScroll?: boolean;
  /** Whether to display a close button in the modal header */
  hasCloseButton?: boolean;
  /** Optional title displayed at the top of the modal */
  title?: string;
  /** Size variant for the modal */
  size?: ModalSize | `${ModalSize}`;
} & Pick<ContainerProps, 'className' | 'transparency' | 'border' | 'background' | 'roundedSize' | 'borderColor' | 'padding' | 'separator' | 'gap'>;
/**
 * Modal Component
 *
 * A highly customizable modal dialog component with portal rendering, Framer Motion animations,
 * and comprehensive accessibility features. Supports multiple size variants and scroll management.
 *
 * Features:
 * - Portal rendering to any container element (defaults to document.body)
 * - Smooth animations with Framer Motion
 * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing
 * - Optional title and close button
 * - Background scroll prevention
 * - Click-outside-to-close functionality
 * - Full accessibility support with ARIA attributes
 * - Keyboard navigation support (ESC to close)
 * - Extensible styling with Container props
 *
 * @example
 * Basic usage:
 * ```jsx
 * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
 *   <p>Modal content goes here</p>
 * </Modal>
 * ```
 *
 * @example
 * With title and close button:
 * ```jsx
 * <Modal
 *   isOpen={isOpen}
 *   onClose={onClose}
 *   title="Confirm Action"
 *   hasCloseButton
 *   size={ModalSize.LG}
 * >
 *   <div>
 *     <p>Are you sure you want to continue?</p>
 *     <Button onClick={onConfirm}>Confirm</Button>
 *   </div>
 * </Modal>
 * ```
 *
 * @example
 * Custom container and styling:
 * ```jsx
 * <Modal
 *   isOpen={isOpen}
 *   onClose={onClose}
 *   container={customContainer}
 *   background="card"
 *   padding="lg"
 *   border="default"
 * >
 *   Content with custom styling
 * </Modal>
 * ```
 *
 * Accessibility Notes:
 * - Modal receives focus when opened
 * - Background content is hidden from screen readers when modal is open
 * - ESC key closes modal (handled by browser for role="dialog")
 * - Click outside modal closes it
 * - Close button has descriptive label for screen readers
 *
 * @param props - Modal component props
 * @returns JSX element rendered via createPortal
 */
declare const Modal: FC<ModalProps>;
//#endregion
export { Modal, ModalSize };
//# sourceMappingURL=Modal.d.ts.map