import { type ComponentPropsWithoutRef, type ReactNode, type RefObject } from 'react';
import { type DialogSlotRecipeVariant } from '../../styled-system/recipes';
export type DialogProps = {
    /**
     * The main content of the dialog.
     */
    children?: ReactNode;
    /**
     * The heading title of the dialog.
     *
     * Accepts a string or any `ReactNode` (e.g. a `<Skeleton />` shown while the
     * title is loading asynchronously). Keep the node heading-appropriate —
     * inline text, status indicators, or icons — because the dialog uses
     * `aria-labelledby` to announce the title and screen readers will read the
     * entire subtree. Avoid placing interactive controls inside `title`.
     */
    title: ReactNode;
    /**
     * Whether the dialog is shown or not.
     * This prop is optional and should be passed when using the dialog as a controlled component.
     *
     * @default undefined
     */
    open?: boolean;
    /**
     * The handler to close the dialog.
     * This prop is optional and should be passed when using the dialog as a controlled component.
     *
     * @default undefined
     */
    onClose?: () => void;
    /**
     * ReactNode which will be displayed on the right of the Dialog footer.
     * Usually, we leave Buttons there
     *
     * @default undefined
     */
    actionSlot?: ReactNode;
    /**
     * The size of the dialog.
     * If it is `flexible`, the dialog size will based on the `min-width` and `min-height` of the dialog content.
     *
     * @default 'medium'
     */
    size?: DialogSlotRecipeVariant['size'];
    /**
     * Whether to hide the close button in the dialog header.
     *
     * @default false
     */
    hideCloseButton?: boolean;
    /**
     * The properties for the close button.
     * If this prop is not passed, the default values for each property will be applied.
     *
     * @property aria-label - The alternative text for the close button. default is '閉じる'.
     */
    closeButtonProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
    /**
     * The DOM node where the dialog should be rendered.
     *
     * If provided, the dialog is rendered inside this node. Otherwise, a suitable
     * DOM node is chosen automatically.
     *
     * @default undefined
     */
    targetDOMNode?: HTMLElement | null;
    /**
     * Enable auto unmounting of the dialog content when it's not displayed.
     * When true, the dialog content will return null instead of hiding via CSS.
     *
     * @default true
     */
    enableAutoUnmount?: boolean;
    /**
     * Disables closing the dialog when clicking on the backdrop.
     * When true, the dialog can only be closed via buttons or the close button.
     *
     * @default false
     */
    disableBackdropClose?: boolean;
    /**
     * Custom element to receive focus when the dialog opens.
     *
     * When provided, this element will receive focus instead of the dialog container.
     * This is useful for automatically focusing input fields or other interactive elements
     * when the dialog opens, improving user experience by reducing required clicks.
     *
     * Accepts either a React RefObject or a direct HTMLElement reference.
     *
     * @default undefined
     *
     * @example
     * ```tsx
     * const inputRef = useRef<HTMLInputElement>(null);
     * <Dialog customFocusElement={inputRef} ... />
     * ```
     */
    customFocusElement?: RefObject<HTMLElement | null> | HTMLElement | null;
} & Omit<ComponentPropsWithoutRef<'div'>, 'open' | 'onClose'>;