import * as react from 'react';
import { ReactNode } from 'react';
import * as tailwind_variants from 'tailwind-variants';
import * as _heroui_system from '@heroui/system';
import { HTMLHeroUIProps, PropGetter } from '@heroui/system';
import { SlotsToClasses, ModalSlots, ModalVariantProps } from '@heroui/theme';
import { HTMLMotionProps } from 'framer-motion';
import { AriaModalOverlayProps } from '@react-aria/overlays';
import { ReactRef } from '@heroui/react-utils';
import { OverlayTriggerProps } from '@react-stately/overlays';

interface Props extends HTMLHeroUIProps<"section"> {
    /**
     * Ref to the DOM node.
     */
    ref?: ReactRef<HTMLElement | null>;
    /**
     * The props to modify the framer motion animation. Use the `variants` API to create your own animation.
     */
    motionProps?: Omit<HTMLMotionProps<"section">, "ref">;
    /**
     * Determines whether to hide the modal close button.
     * @default false
     */
    hideCloseButton?: boolean;
    /**
     * Custom modal close button element.
     */
    closeButton?: ReactNode;
    /**
     * Whether the animation should be disabled.
     * @default false
     */
    disableAnimation?: boolean;
    /**
     * The container element in which the overlay portal will be placed.
     * @default document.body
     */
    portalContainer?: Element;
    /**
     * Whether the scroll should be blocked when the modal is open.
     * @default true
     */
    shouldBlockScroll?: boolean;
    /**
     *  Callback fired when the modal is closed.
     */
    onClose?: () => void;
    /**
     * Classname or List of classes to change the classNames of the element.
     * if `className` is passed, it will be added to the base slot.
     *
     * @example
     * ```ts
     * <Modal classNames={{
     *    wrapper: "wrapper-classes", // main modal wrapper
     *    backdrop: "backdrop-classes",
     *    base:"base-classes", // modal content wrapper
     *    header: "header-classes", // modal header
     *    body: "body-classes", // modal body
     *    footer: "footer-classes", // modal footer
     *    closeButton: "close-button-classes", // modal close button
     * }} />
     * ```
     */
    classNames?: SlotsToClasses<ModalSlots>;
    /**
     * Whether to close the overlay when the user interacts outside it.
     * @default true
     */
    isDismissable?: boolean;
}
type UseModalProps = Props & OverlayTriggerProps & Omit<AriaModalOverlayProps, "isDismissable"> & ModalVariantProps;
declare function useModal(originalProps: UseModalProps): {
    Component: _heroui_system.As<any>;
    slots: {
        wrapper: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        base: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        backdrop: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        header: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        body: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        footer: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        closeButton: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
    } & {
        wrapper: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        base: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        backdrop: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        header: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        body: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        footer: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        closeButton: (slotProps?: ({
            shadow?: "none" | "md" | "sm" | "lg" | undefined;
            size?: "md" | "full" | "sm" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined;
            radius?: "none" | "md" | "sm" | "lg" | undefined;
            disableAnimation?: boolean | undefined;
            backdrop?: "transparent" | "blur" | "opaque" | undefined;
            placement?: "auto" | "bottom" | "top" | "center" | "top-center" | "bottom-center" | undefined;
            scrollBehavior?: "inside" | "outside" | "normal" | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
    } & {};
    domRef: react.RefObject<HTMLElement>;
    headerId: string;
    bodyId: string;
    motionProps: Omit<HTMLMotionProps<"section">, "ref"> | undefined;
    classNames: SlotsToClasses<"base" | "header" | "body" | "footer" | "wrapper" | "backdrop" | "closeButton"> | undefined;
    isDismissable: boolean;
    closeButton: ReactNode;
    hideCloseButton: boolean;
    portalContainer: Element | undefined;
    shouldBlockScroll: boolean;
    backdrop: "transparent" | "blur" | "opaque";
    isOpen: boolean;
    onClose: () => void;
    disableAnimation: boolean;
    setBodyMounted: react.Dispatch<react.SetStateAction<boolean>>;
    setHeaderMounted: react.Dispatch<react.SetStateAction<boolean>>;
    getDialogProps: PropGetter;
    getBackdropProps: PropGetter;
    getCloseButtonProps: PropGetter;
};
type UseModalReturn = ReturnType<typeof useModal>;

export { type UseModalProps, type UseModalReturn, useModal };