/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b04eed0 | Cube Dev Team */
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { _Overlay } from "./Overlay.js";
import { _Underlay } from "./Underlay.js";
import { tasty } from "@tenphi/tasty";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useModal, useOverlay, usePreventScroll } from "react-aria";
import { useDOMRef } from "@react-spectrum/utils";

//#region src/components/overlays/Modal/Modal.tsx
const OVERLAY_WRAPPER_STYLES = {
	position: "fixed",
	display: "grid",
	left: 0,
	top: 0,
	placeItems: {
		"": "center",
		"type=fullscreen": "center",
		"type=fullscreenTakeover | type=panel": "stretch"
	},
	boxSizing: "border-box",
	width: "100vw",
	height: "100dvh",
	pointerEvents: "none",
	zIndex: 10,
	transition: {
		"": "visibility .5s steps(2, start)",
		open: "visibility 0s linear"
	}
};
const ModalWrapperElement = tasty({
	qa: "ModalWrapper",
	styles: OVERLAY_WRAPPER_STYLES
});
const ModalElement = tasty({ styles: {
	display: {
		"": "none",
		"entering | entered": "grid",
		exiting: "grid",
		exited: "none"
	},
	zIndex: 10,
	height: {
		"": "max 90dvh",
		"type=fullscreenTakeover | type=panel": "100dvh 100dvh",
		"type=fullscreen": "(100dvh - 8x) (100dvh - 8x)",
		"type=panel": "auto"
	},
	width: {
		"": "$min-dialog-size (100dvw - 8x)",
		"type=panel": "auto"
	},
	pointerEvents: "none",
	transition: "opacity .25s linear, transform .25s ease-in-out",
	transform: {
		"": "initial",
		"type=modal & !open": "translate(0, -3x) scale(1, 1)",
		"(type^=fullscreen | type=panel) & !open": "translate(0, 0) scale(1.02, 1.02)"
	},
	opacity: {
		"": 0,
		open: .9999
	}
} });
function Modal(props, ref) {
	let { qa, children, onClose, type, styles, ...otherProps } = props;
	let domRef = useDOMRef(ref);
	let { overlayProps, underlayProps } = useOverlay({ ...props }, domRef);
	return /* @__PURE__ */ jsxs(_Overlay, {
		...otherProps,
		children: [type !== "fullscreenTakeover" && type !== "panel" && /* @__PURE__ */ jsx(_Underlay, { ...underlayProps }), /* @__PURE__ */ jsx(ModalWrapper, {
			ref: domRef,
			qa,
			type,
			overlayProps,
			styles,
			onClose,
			children
		})]
	});
}
let ModalWrapper = forwardRef(function ModalWrapper(props, ref) {
	let { qa, children, isOpen, type, placement, styles, overlayProps, transitionState, ...otherProps } = props;
	usePreventScroll({ isDisabled: transitionState !== "entered" });
	let { modalProps } = useModal({ isDisabled: transitionState !== "entered" });
	return /* @__PURE__ */ jsx(ModalWrapperElement, {
		"data-type": type,
		"data-placement": placement,
		children: /* @__PURE__ */ jsx(ModalElement, {
			qa: qa || "Modal",
			styles,
			mods: {
				open: isOpen,
				entering: transitionState === "entering",
				exiting: transitionState === "exiting",
				exited: transitionState === "exited",
				entered: transitionState === "entered"
			},
			"data-type": type,
			"data-placement": placement,
			...mergeProps$1(otherProps, overlayProps, modalProps),
			ref,
			children
		})
	});
});
let _Modal = forwardRef(Modal);
_Modal.displayName = "Modal";

//#endregion
export { OVERLAY_WRAPPER_STYLES, _Modal };
//# sourceMappingURL=Modal.js.map