import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import { Fragment } from "react";
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import { X } from "lucide-react";
export function Modal({ className, children, isOpen, onClose, noCloseButton = false, allowOverflow = false, disableCloseOnClickOutside = false, }) {
    const setOpen = (open) => {
        if (!open) {
            onClose();
        }
    };
    return (_jsx(Transition, { show: isOpen, as: Fragment, children: _jsxs(Dialog, { style: { zIndex: 50 }, as: "div", className: "relative", onClose: disableCloseOnClickOutside ? () => { } : setOpen, children: [_jsx(TransitionChild, { as: Fragment, enter: "ease-out duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "ease-in duration-200", leaveFrom: "opacity-100", leaveTo: "opacity-0", unmount: true, children: _jsx("div", { className: "fixed inset-0 bg-gray-500  dark:bg-slate-800 dark:opacity-75 opacity-75 transition-opacity" }) }), _jsx("div", { className: "fixed inset-0 z-10 w-screen overflow-y-auto", children: _jsx("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: _jsx(TransitionChild, { as: Fragment, enter: "ease-out duration-300", enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95", enterTo: "opacity-100 translate-y-0 sm:scale-100", leave: "ease-in duration-200", leaveFrom: "opacity-100 translate-y-0 sm:scale-100", leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95", children: _jsxs(DialogPanel, { className: clsx("p-0! relative transform rounded-lg bg-white dark:bg-slate-900 text-left dark:text-slate-100 shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6", allowOverflow ? "overflow-visible" : "overflow-hidden", className), children: [!noCloseButton && _jsx(ModalCloseButton, { onClose: onClose }), children] }) }) }) })] }) }));
}
function ModalCloseButton({ onClose }) {
    return (_jsx("div", { className: "absolute right-0 top-0 hidden pr-4 pt-4 sm:block", children: _jsxs("button", { tabIndex: -1, type: "button", className: "rounded-md bg-white text-gray-400 dark:text-slate-200 dark:bg-slate-800 hover:brightness-95 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 hover:cursor-pointer", onClick: onClose, children: [_jsx("span", { className: "sr-only", children: "Close" }), _jsx(X, { className: "size-6", "aria-hidden": "true" })] }) }));
}
export function ModalTitle({ children, showDivider = false }) {
    return (_jsx("div", { className: showDivider ? "border-b-solid border-b border-b-1" : "", children: _jsx(DialogTitle, { as: "h3", className: "py-4 pl-4 pr-8 text-base font-semibold leading-6 text-gray-900 dark:text-slate-50", children: children }) }));
}
export function ModalFooter({ children, className = "justify-end", fill = false }) {
    return (_jsx("div", { className: clsx("w-full flex space-x-2 p-4 border-t-solid border-t-gray-100 dark:border-t-gray-800 border-t", className || "justify-end", fill ? "bg-gray-100 dark:bg-slate-800" : ""), children: children }));
}
export function ModalBody({ children, className = "" }) {
    return _jsx("div", { className: clsx("p-4", className), children: children });
}
//# sourceMappingURL=Modal.js.map