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 {
  SM = "sm",
  MD = "md",
  LG = "lg",
  XL = "xl",
  UNSET = "unset",
}
type ModalProps = {
  children: ReactNode;
  isOpen: boolean;
  onClose?: () => void;
  container?: HTMLElement;
  disableScroll?: boolean;
  hasCloseButton?: boolean;
  title?: ReactNode;
  size?: ModalSize | `${ModalSize}`;
  /**
   * Defines if the modal content area is scrollable.
   */
  isScrollable?: boolean | 'x' | 'y';
} & 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