import { Dialog as BaseDialog } from '@base-ui/react/dialog';
import * as React from 'react';
/**
 * The four widths this draws, with `'medium'` as a second name for the middle one.
 *
 * `small | medium | large` is the scale a caller expects, and `size="medium"` used to be a type
 * error — a plausible guess that `tsc` caught but only after someone had written it. `'default'`
 * names a position in a scale by its status rather than by its size, which is why the guess happens.
 *
 * Both spellings resolve to the same class list, and `'default'` stays the default so no existing
 * call site changes. Adding the alias rather than renaming: `'default'` is what shipped and is in
 * consumers' code, and a rename would be a breaking change to fix a naming preference.
 */
export type DialogSize = 'default' | 'medium' | 'small' | 'large' | 'full-screen';
export type DialogPortalContainer = HTMLElement | React.RefObject<HTMLElement | null> | null;
export declare const dialogPopupVariants: (props?: ({
    size?: "large" | "medium" | "small" | "default" | "full-screen" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface DialogRootProps {
    children?: React.ReactNode;
    /**
     * Allow dismissal by backdrop click and Escape.
     * @default true
     */
    dismissible?: boolean;
    /** Controlled open state. Pair with `onModalVisibleChange`. */
    isModalOpen?: boolean;
    onBackDropClick?: () => void;
    onModalVisibleChange?: (isModalOpen: boolean) => void;
    /** Where to portal. Defaults to `document.body`. */
    portalContainer?: DialogPortalContainer;
    /**
     * Render the accent splash on a full-screen dialog.
     * @default true
     */
    showFullScreenModalAccent?: boolean;
    /**
     * `'default' | 'medium' | 'small' | 'large' | 'full-screen'`. `'medium'` is an alias for
     * `'default'`, so the scale reads `small | medium | large` if that is what you reach for.
     * @default 'default'
     */
    size?: DialogSize;
    /** Clicking this opens the dialog, which is all an uncontrolled dialog needs. */
    trigger?: React.ReactElement | null;
    backdropClassName?: string;
    /**
     * Render the default backdrop. Turn it off when supplying {@link DialogBackdrop}
     * yourself.
     * @default true
     */
    renderDefaultBackdrop?: boolean;
}
export declare const DialogBackdrop: {
    ({ className, onClick, }: {
        className?: string;
        onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
    }): React.JSX.Element;
    displayName: string;
};
export declare const DialogRoot: {
    ({ backdropClassName, children, dismissible, isModalOpen, onBackDropClick, onModalVisibleChange, portalContainer, renderDefaultBackdrop, showFullScreenModalAccent, size, trigger, }: DialogRootProps): React.JSX.Element;
    displayName: string;
};
export interface DialogPopupProps {
    children?: React.ReactNode;
    className?: string;
    /**
     * Move focus into the dialog on open. Leave it on: the focus trap is the point of
     * a modal, and a keyboard user otherwise stays on the trigger with the page inert.
     * @default true
     */
    initialFocus?: boolean;
    /** Accessible name. Provide this or `ariaLabelledBy`. */
    ariaLabel?: string;
    /** Id of an element inside the dialog that names it. */
    ariaLabelledBy?: string;
}
/**
 * **Portalled.** Stamps the active theme, since the dialog renders into
 * `document.body`, outside the element carrying `data-theme`.
 */
export declare const DialogPopup: React.ForwardRefExoticComponent<DialogPopupProps & React.RefAttributes<HTMLDivElement>>;
export interface DialogCloseButtonProps {
    /**
     * @default 'Close'
     */
    ariaLabel?: string;
    ariaLabelledBy?: string;
    className?: string;
    onCloseAction?: () => void;
    icon?: React.ReactNode;
    /**
     * Positioning mode: 'absolute' (default) pins the button to the dialog corner;
     * 'static' or 'inline' keeps it in-flow so it can be placed in a header flex row.
     * @default 'absolute'
     */
    position?: 'absolute' | 'static' | 'inline';
}
export declare const DialogCloseButton: React.ForwardRefExoticComponent<DialogCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
export interface DialogTriggerProps extends React.ComponentPropsWithoutRef<typeof BaseDialog.Trigger> {
}
/**
 * The control that opens the dialog.
 *
 * A part rather than the root's `trigger` prop, which took a `ReactElement` and cloned it. Cloning
 * worked but constrained the caller to exactly one element and meant the root had to reach into it
 * — and Base UI already solves this with `render`, which is what a routing library or a custom
 * button needs anyway.
 */
export declare const DialogTrigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
export interface DialogTitleProps extends React.ComponentPropsWithoutRef<typeof BaseDialog.Title> {
}
/**
 * The dialog's accessible name.
 *
 * `BaseDialog.Title` rather than a heading of our own: Base UI wires it to the popup's
 * `aria-labelledby`, so composing a title is what names the dialog. That is why `ariaLabel` on the
 * popup is only needed when there is no visible title.
 */
export declare const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
export interface DialogDescriptionProps extends React.ComponentPropsWithoutRef<typeof BaseDialog.Description> {
}
/** Supporting copy, wired to the popup's `aria-describedby` by Base UI. */
export declare const DialogDescription: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
export type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
export declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
export type DialogContentProps = React.HTMLAttributes<HTMLDivElement>;
/**
 * The dialog's body.
 *
 * `overflow-y-auto` because the popup is capped at 90% of the viewport: without it, a long body is
 * clipped rather than scrolled, and on a phone that is most bodies.
 */
export declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
/**
 * The action row.
 *
 * `flex-col-reverse` below `sm` so the primary action sits at the bottom on a phone, where the
 * thumb is — and reversed rather than reordered so the DOM order still puts the primary action
 * first for a screen reader and the keyboard.
 */
export declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
export interface DialogProps extends DialogRootProps, Pick<DialogPopupProps, 'ariaLabel' | 'ariaLabelledBy' | 'initialFocus'> {
    className?: string;
}
export declare const Dialog: {
    ({ children, className, ariaLabel, ariaLabelledBy, initialFocus, ...rootProps }: DialogProps): React.JSX.Element;
    displayName: string;
} & {
    Root: {
        ({ backdropClassName, children, dismissible, isModalOpen, onBackDropClick, onModalVisibleChange, portalContainer, renderDefaultBackdrop, showFullScreenModalAccent, size, trigger, }: DialogRootProps): React.JSX.Element;
        displayName: string;
    };
    Backdrop: {
        ({ className, onClick, }: {
            className?: string;
            onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
        }): React.JSX.Element;
        displayName: string;
    };
    Popup: React.ForwardRefExoticComponent<DialogPopupProps & React.RefAttributes<HTMLDivElement>>;
    CloseButton: React.ForwardRefExoticComponent<DialogCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
};
//# sourceMappingURL=dialog.d.ts.map