import * as react from 'react';
import { ReactNode, CSSProperties, RefObject } from 'react';
import { ThemeOverrideProps } from '@xsolla/xui-core';
export { useModalId } from '@xsolla/xui-core';
import * as react_jsx_runtime from 'react/jsx-runtime';

type ModalSize = "sm" | "md" | "lg";
type ModalVariant = "popup" | "bottom-sheet" | "full-screen";
/**
 * How the footer content is aligned across the modal's width.
 *
 * - `stretch` (default) — the footer node fills the width and lays itself out.
 * - `start` / `center` / `end` — the footer shrinks to its content and is
 *   pinned to that edge (or centred).
 */
type ModalFooterAlign = "stretch" | "start" | "center" | "end";
interface ModalProps extends ThemeOverrideProps {
    children: ReactNode;
    size?: ModalSize;
    /** Modal presentation type */
    type?: ModalVariant;
    openContent?: boolean;
    closeOutside?: boolean;
    /**
     * Modal surface background — accepts any token from the theme background
     * group (e.g. `theme.colors.background.secondary`) or a CSS color.
     * Defaults to `theme.colors.background.primary`.
     */
    backgroundColor?: string;
    onClose?: () => void;
    /** Callback for the back button — renders a back button in the header when provided */
    onBack?: () => void;
    /** Content alignment within the modal body */
    align?: "left" | "center";
    /** Heading text centered in the default header between the back/close buttons */
    heading?: ReactNode;
    /** Subheading text rendered under the heading in the default header */
    subheading?: ReactNode;
    /** Custom header content — replaces the default back/close button row */
    header?: ReactNode;
    /** Footer content rendered below children (e.g. ButtonGroup) */
    footer?: ReactNode;
    /**
     * Alignment of the `footer` content across the modal's width. Defaults to
     * `"stretch"`, which lets the footer node fill the width and position its own
     * children. Use `"center"` for the centred confirm/cancel pair in the Figma
     * reference, or `"end"` for right-aligned actions.
     */
    footerAlign?: ModalFooterAlign;
    styled?: CSSProperties;
    maxWidth?: string | number;
    minHeight?: string | number;
    /** Accessible title for the modal - creates aria-labelledby */
    title?: string;
    /** Alternative to title prop for accessible name */
    "aria-label"?: string;
    /** ID of element describing the modal content */
    "aria-describedby"?: string;
    /** Ref to element that should receive focus when modal opens */
    initialFocusRef?: RefObject<HTMLElement>;
    testID?: string;
    /** Test ID applied to the close (X) button — renders as `data-testid` on web */
    closeButtonTestId?: string;
    /** Size of the default header buttons (close and back). @default "xl" */
    closeButtonSize?: "xs" | "sm" | "md" | "lg" | "xl";
}
type ModalType = (props: any) => ReactNode;
interface ModalContextType {
    onOpenModal: (key: string, modal: ModalType) => void;
    onCloseModal: (key: string) => void;
}
interface ModalProviderProps {
    children: ReactNode;
    testID?: string;
}
interface ModalRootProps {
    modals: Record<string, ModalType>;
    testID?: string;
}
type WorkAreaSize = "sm" | "md" | "lg";
interface WorkAreaProps extends ThemeOverrideProps {
    children: ReactNode;
    indent?: WorkAreaSize;
    openContent?: boolean;
    stretched?: boolean;
    fetching?: boolean;
    /**
     * Surface background — accepts any token from the theme background group
     * or a CSS color. Defaults to `theme.colors.background.primary`.
     */
    backgroundColor?: string;
    /** Modal presentation type — affects border-radius and shadow */
    type?: ModalVariant;
    /** Content alignment */
    align?: "left" | "center";
    testID?: string;
}

declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<any>>;

declare const ModalProvider: ({ children, testID }: ModalProviderProps) => react_jsx_runtime.JSX.Element;

declare const useModal: (modal: ModalType) => [() => void, () => void];

declare const WorkArea: react.ForwardRefExoticComponent<WorkAreaProps & react.RefAttributes<any>>;

export { Modal, type ModalContextType, type ModalFooterAlign, type ModalProps, ModalProvider, type ModalProviderProps, type ModalRootProps, type ModalSize, type ModalType, type ModalVariant, WorkArea, type WorkAreaProps, type WorkAreaSize, useModal };