import { Root, RootProps } from './modal-root';
import { Trigger, TriggerProps } from './modal-trigger';
import { Content, ContentProps } from './modal-content';
import { Title, TitleProps } from './modal-title';
import { Description, DescriptionProps } from './modal-description';
import { Overlay, OverlayProps } from './modal-overlay';
import { Group, GroupProps } from './modal-group';
import { Close, CloseProps } from './modal-close';
import { Image, ImageProps } from './modal-image';

type ModalProps = {
    Root: RootProps;
    Trigger: TriggerProps;
    Content: ContentProps;
    Title: TitleProps;
    Description: DescriptionProps;
    Overlay: OverlayProps;
    Group: GroupProps;
    Close: CloseProps;
    Image: ImageProps;
};
/**
 * Modal is a dialog that appears on top of the main content and moves the system into a special mode requiring user interaction.
 * It's commonly used for important information that requires immediate attention, or to gather user input without leaving the current page.
 *
 * @component
 *
 * @example
 * // Basic usage
 * <Modal>
 *   <Modal.Trigger>
 *     <Button variant="primary">Open Modal</Button>
 *   </Modal.Trigger>
 *   <Modal.Content>
 *     <Modal.Title as="h3">Modal Title</Modal.Title>
 *     <Modal.Close slot="floating" aria-label="close" />
 *     <Modal.Description>Modal content goes here.</Modal.Description>
 *   </Modal.Content>
 * </Modal>
 *
 * @example
 * // Advanced usage with action buttons and groups
 * <Modal>
 *   <Modal.Trigger>
 *     <Button variant="primary">Open Modal</Button>
 *   </Modal.Trigger>
 *   <Modal.Content>
 *     <Modal.Title as="h3">Confirm Action</Modal.Title>
 *     <Modal.Close slot="floating" aria-label="close" />
 *     <Modal.Description>
 *       Are you sure you want to proceed with this action?
 *     </Modal.Description>
 *     <Modal.Group variant="action">
 *       <Button variant="tertiary-purple">Cancel</Button>
 *       <Modal.Close slot="content">
 *         <Button variant="primary">Confirm</Button>
 *       </Modal.Close>
 *     </Modal.Group>
 *   </Modal.Content>
 * </Modal>
 */
declare const Modal: typeof Root & {
    /**
     * Trigger component that opens the modal when clicked.
     * Must be passed a single child component that will be used as the trigger.
     *
     * @component
     *
     * @example
     * <Modal.Trigger>
     *   <Button variant="primary">Open Modal</Button>
     * </Modal.Trigger>
     */
    Trigger: typeof Trigger;
    /**
     * Content component that contains the modal's content.
     * Handles the positioning and scrolling behavior of the modal content.
     *
     * @component
     *
     * @example
     * <Modal.Content>
     *   <Modal.Title>Title</Modal.Title>
     *   <Modal.Description>Content</Modal.Description>
     * </Modal.Content>
     */
    Content: typeof Content;
    /**
     * An accessible title to be announced when the dialog is opened.
     * It will render the internal Heading component
     * If you want to hide the title, wrap it inside our Visually Hidden utility like this`<VisuallyHidden asChild>`.
     *
     * @component
     *
     * @example
     * <Modal.Title as="h3">Modal Title</Modal.Title>
     */
    Title: typeof Title;
    /**
     * An optional accessible description to be announced when the dialog is opened.
     * This will render the internal Text component with an default p tag
     *
     * If you want to hide the description, wrap it inside our Visually Hidden utility like this  `<VisuallyHidden asChild>`
     *
     * @component
     *
     * @example
     * <Modal.Description>
     *   This is the main content of the modal.
     *   It can contain multiple paragraphs and other components.
     * </Modal.Description>
     */
    Description: typeof Description;
    /**
     * Overlay component provides the backdrop for the modal.
     * Handles the background dimming and click-outside behavior.
     *
     * @component
     *
     * @example
     * <Modal.Overlay>
     *   <Modal.Content>
     *     {/* Content will be centered in the overlay *\/}
     *   </Modal.Content>
     * </Modal.Overlay>
     */
    Overlay: typeof Overlay;
    /**
     * Group component for organizing content or actions within the modal.
     * Provides layout and styling for grouped content, especially useful for action buttons.
     *
     * @component
     *
     * @example
     * // Action buttons group
     * <Modal.Group variant="action">
     *   <Button variant="tertiary-purple">Cancel</Button>
     *   <Button variant="primary">Confirm</Button>
     * </Modal.Group>
     *
     * @example
     * // Content group
     * <Modal.Group>
     *   <Modal.Description>First section</Modal.Description>
     *   <div>Second section</div>
     * </Modal.Group>
     */
    Group: typeof Group;
    /**
     * Close component provides a button to close the modal.
     * Can be used either as a floating close button or within content.
     *
     * @component
     *
     * @example
     * // Floating close button
     * <Modal.Close slot="floating" aria-label="Lukk" />
     *
     * @example
     * // Close button within content
     * <Modal.Close slot="content">
     *   <Button variant="primary">Done</Button>
     * </Modal.Close>
     */
    Close: typeof Close;
    /**
     * Image component displays an image in the modal.
     * Handles proper sizing and positioning of images within the modal.
     *
     * @component
     *
     * @example
     * // Basic image
     * <Modal.Image src="/path/to/image.jpg" alt="Description" />
     *
     * @example
     * // Custom image component
     * <Modal.Image asChild>
     *   <img src="/path/to/image.jpg" alt="Description" />
     * </Modal.Image>
     */
    Image: typeof Image;
};
export { Modal };
export type { ModalProps };