'use client';


import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
import { cn } from "../../utils/cn.mjs";
import { Container } from "../Container/index.mjs";
import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
import { H3 } from "../Headers/index.mjs";
import { useEffect } from "react";
import { X } from "lucide-react";
import { cva } from "class-variance-authority";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { motion } from "framer-motion";
import { createPortal } from "react-dom";

//#region src/components/Modal/Modal.tsx
/**
* Enumeration of available modal sizes
*/
let ModalSize = /* @__PURE__ */ function(ModalSize$1) {
	/** Small modal: max height 30vh, max width xl */
	ModalSize$1["SM"] = "sm";
	/** Medium modal: max height 50vh, max width xl */
	ModalSize$1["MD"] = "md";
	/** Large modal: max height 70vh, max width 2xl */
	ModalSize$1["LG"] = "lg";
	/** Extra large modal: max height 95vh, max width 6xl */
	ModalSize$1["XL"] = "xl";
	/** Unset size: max height 95vh, full width responsive */
	ModalSize$1["UNSET"] = "unset";
	return ModalSize$1;
}({});
/**
* Class name variants for different modal sizes using class-variance-authority
* Defines responsive sizing and scrollable content for modal containers
*/
const modalVariants = cva("cursor-default justify-center overflow-auto p-3 shadow-sm", {
	variants: { size: {
		sm: "h-auto max-h-[30vh] w-[95vw] max-w-xl",
		md: "h-auto max-h-[50vh] w-[95vw] max-w-xl",
		lg: "h-auto max-h-[70vh] w-[95vw] max-w-2xl",
		xl: "h-auto max-h-[95vh] w-[95vw] max-w-6xl",
		unset: "h-auto max-h-[95vh] w-[95vw]"
	} },
	defaultVariants: { size: "unset" }
});
/**
* Motion-enabled modal component with Framer Motion support
* Extends Container component with motion capabilities for animations
*/
const MotionModal = motion.create(Container);
/**
* Modal Component
*
* A highly customizable modal dialog component with portal rendering, Framer Motion animations,
* and comprehensive accessibility features. Supports multiple size variants and scroll management.
*
* Features:
* - Portal rendering to any container element (defaults to document.body)
* - Smooth animations with Framer Motion
* - Size variants: SM, MD, LG, XL, UNSET with responsive sizing
* - Optional title and close button
* - Background scroll prevention
* - Click-outside-to-close functionality
* - Full accessibility support with ARIA attributes
* - Keyboard navigation support (ESC to close)
* - Extensible styling with Container props
*
* @example
* Basic usage:
* ```jsx
* <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
*   <p>Modal content goes here</p>
* </Modal>
* ```
*
* @example
* With title and close button:
* ```jsx
* <Modal
*   isOpen={isOpen}
*   onClose={onClose}
*   title="Confirm Action"
*   hasCloseButton
*   size={ModalSize.LG}
* >
*   <div>
*     <p>Are you sure you want to continue?</p>
*     <Button onClick={onConfirm}>Confirm</Button>
*   </div>
* </Modal>
* ```
*
* @example
* Custom container and styling:
* ```jsx
* <Modal
*   isOpen={isOpen}
*   onClose={onClose}
*   container={customContainer}
*   background="card"
*   padding="lg"
*   border="default"
* >
*   Content with custom styling
* </Modal>
* ```
*
* Accessibility Notes:
* - Modal receives focus when opened
* - Background content is hidden from screen readers when modal is open
* - ESC key closes modal (handled by browser for role="dialog")
* - Click outside modal closes it
* - Close button has descriptive label for screen readers
*
* @param props - Modal component props
* @returns JSX element rendered via createPortal
*/
const Modal = ({ children, isOpen, container, disableScroll = true, onClose, hasCloseButton = false, title, size = ModalSize.MD, className, ...props }) => {
	const containerElement = useGetElementOrWindow(container);
	useScrollBlockage({
		key: "modal",
		disableScroll: isOpen && disableScroll
	});
	useEffect(() => {
		const handleEscape = (event) => {
			if (event.key === "Escape" && isOpen && onClose) onClose();
		};
		document.addEventListener("keydown", handleEscape);
		return () => {
			document.removeEventListener("keydown", handleEscape);
		};
	}, [isOpen, onClose]);
	if (!containerElement) return /* @__PURE__ */ jsx(Fragment$1, {});
	const hasTitle = typeof title === "string";
	return createPortal(/* @__PURE__ */ jsx(motion.div, {
		className: "invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto bg-background/40 backdrop-blur",
		animate: isOpen ? "visible" : "invisible",
		variants: {
			visible: {
				opacity: 1,
				visibility: "visible",
				transition: {
					duration: .1,
					when: "beforeChildren"
				}
			},
			invisible: {
				opacity: 0,
				visibility: "hidden",
				transition: {
					duration: .1,
					when: "afterChildren"
				}
			}
		},
		onClick: (e) => {
			e.stopPropagation();
			onClose?.();
		},
		"aria-hidden": !isOpen,
		children: /* @__PURE__ */ jsxs(MotionModal, {
			onClick: (e) => e.stopPropagation(),
			initial: { scale: isOpen ? .5 : 1 },
			animate: { scale: isOpen ? 1 : .5 },
			transition: { duration: .3 },
			className: modalVariants({
				size,
				className
			}),
			role: "dialog",
			"aria-modal": true,
			roundedSize: "2xl",
			...props,
			children: [/* @__PURE__ */ jsxs("div", {
				className: cn("cursor-default", hasCloseButton && hasTitle ? `flex items-start` : hasCloseButton ? `flex justify-end` : hasTitle ? `items-center` : `hidden`),
				children: [hasTitle && /* @__PURE__ */ jsx(H3, {
					className: "mt-2 mb-4 ml-4 flex items-center justify-center font-bold text-lg",
					children: title
				}), hasCloseButton && /* @__PURE__ */ jsx(Button, {
					variant: ButtonVariant.HOVERABLE,
					color: ButtonColor.TEXT,
					label: "Close modal",
					className: "ml-auto",
					onClick: (e) => {
						e.stopPropagation();
						onClose?.();
					},
					Icon: X,
					size: ButtonSize.ICON_MD
				})]
			}), /* @__PURE__ */ jsx("div", {
				className: "flex flex-1 flex-col items-center",
				children
			})]
		})
	}), containerElement);
};

//#endregion
export { Modal, ModalSize };
//# sourceMappingURL=Modal.mjs.map