@nexus-cross/design-system 1.0.3-beta.1

package/dist/chunks/chunk-UH667FUK.mjs

@@ -0,0 +1,712 @@
+import { scrollRelease, scrollFreeze } from './chunk-54IA2P2Z.mjs';
+import { useCheckDevice_default } from './chunk-YEWKPWK3.mjs';
+import { useClickOutside_default } from './chunk-OTGS6BDQ.mjs';
+import { Modal_default } from './chunk-6H7V2I3X.mjs';
+import { useDraggableBottomSheet } from './chunk-U56AGSLE.mjs';
+import { useDraggableWindow } from './chunk-4J3GCZ7W.mjs';
+import { cn } from './chunk-XALPBGSC.mjs';
+import React, { forwardRef, useState, useMemo, useCallback, useEffect, useImperativeHandle, useRef, Suspense } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+import { cva } from 'class-variance-authority';
+
+function wait(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+var LazyLoadComponent = ({
+  onLoaded
+}) => {
+  useEffect(() => {
+    onLoaded();
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, {});
+};
+var Component = ({
+  is,
+  props,
+  handleOpenStatus
+}) => {
+  const [loading, setLoading] = useState(!is.displayName);
+  const component = useMemo(() => {
+    if (is.displayName) {
+      return /* @__PURE__ */ jsx(Fragment, { children: React.createElement(is, { ...props }) });
+    }
+    return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      React.createElement(is, { ...props }),
+      /* @__PURE__ */ jsx(LazyLoadComponent, { onLoaded: () => setLoading(false) })
+    ] }) });
+  }, [is, props]);
+  useEffect(() => {
+    if (!loading) {
+      handleOpenStatus();
+    }
+  }, [loading, handleOpenStatus]);
+  return component;
+};
+var ModalComponent = forwardRef(
+  ({ className, modal, breakPoints, scrollFreeze: scrollFreeze2, scrollRelease: scrollRelease2, deleteModal, resolveModal }, ref) => {
+    const { isMobile } = useCheckDevice_default(breakPoints);
+    const [status, setStatus] = useState("");
+    const clickOutSideTarget = useMemo(() => {
+      if (modal.props?.clickOutSideRef) {
+        return modal.props.clickOutSideRef.current ?? null;
+      }
+      if (modal.props?.portalId) {
+        return document.querySelector(`#${modal.props.portalId}`);
+      }
+      return null;
+    }, [modal.props?.clickOutSideRef, modal.props?.portalId]);
+    const animationInfo = useMemo(() => {
+      const animation = modal.props?.animation ?? {};
+      return {
+        name: isMobile ? animation.mobile ?? animation.name : animation.name,
+        duration: animation.duration || "0",
+        timingFunction: animation.timingFunc || "cubic-bezier(0.25, 0.1, 0.25, 1.0)",
+        leaveTimingFunction: animation.leaveTimingFunc ? animation.leaveTimingFunc : animation.timingFunc || "cubic-bezier(0.25, 0.1, 0.25, 1.0)"
+      };
+    }, [isMobile, modal.props?.animation]);
+    const resolvedLayout = useMemo(() => {
+      if (modal.props?.layout) {
+        return modal.props.layout;
+      }
+      if (animationInfo.name === "bottom-sheet") return "bottom-sheet";
+      if (animationInfo.name === "slide-left") return "slide-left";
+      if (animationInfo.name === "slide-right") return "slide-right";
+      if (animationInfo.name === "full-page") return "full-page";
+      if (animationInfo.name === "full-page-reverse") return "full-page-reverse";
+      return void 0;
+    }, [modal.props?.layout, animationInfo.name]);
+    const close = useCallback(
+      async (modalId, isAnimation = true) => {
+        setStatus("leave");
+        if (isAnimation && !!animationInfo.name) {
+          const duration = modal.props.animation?.duration ?? 0;
+          await wait(duration + 50);
+        }
+        deleteModal(modalId);
+      },
+      [animationInfo.name, deleteModal, modal.props.animation]
+    );
+    const resolve = (modal2, result, useClose) => {
+      resolveModal({ modal: modal2, result, useClose });
+    };
+    const handleOpenStatus = useCallback(async () => {
+      await wait(
+        modal.props?.animation?.delay ?? 0
+      );
+      setStatus("enter");
+      if (animationInfo.name) {
+        await wait(
+          modal.props.animation?.duration ?? 0
+        );
+      }
+      setStatus("enter-done");
+    }, [modal.props.animation, animationInfo.name]);
+    useEffect(() => {
+      if (!modal.props.scrollEnable) {
+        scrollFreeze2?.();
+        return () => {
+          scrollRelease2?.();
+        };
+      }
+    }, [modal.props.scrollEnable, scrollFreeze2, scrollRelease2]);
+    useClickOutside_default(clickOutSideTarget, () => {
+      close(modal.id, true);
+    });
+    useImperativeHandle(ref, () => ({
+      modalId: modal.id,
+      hasClose: !!modal.close,
+      close
+    }));
+    const getModalClassName = () => {
+      const baseClasses = ["nx:opacity-0"];
+      if (modal.props.portalId) {
+        baseClasses.push("nx:relative");
+      }
+      if (["enter", "enter-done", "leave"].includes(status)) {
+        baseClasses.push("nx:opacity-100");
+      }
+      if (status === "enter") {
+        baseClasses.push(
+          "nx:[&_.modal-inner]:[animation-direction:var(--modal-animation-direction)]",
+          "nx:[&_.modal-inner]:[animation-duration:var(--modal-animation-duration)]",
+          "nx:[&_.modal-inner]:[animation-name:var(--modal-animation-name)]",
+          "nx:[&_.modal-inner]:[animation-timing-function:var(--modal-animation-timing-function)]"
+        );
+      } else if (status === "leave") {
+        baseClasses.push(
+          "nx:[&_.modal-inner]:[animation-direction:reverse]",
+          "nx:[&_.modal-inner]:[animation-duration:var(--modal-animation-duration)]",
+          "nx:[&_.modal-inner]:[animation-fill-mode:var(--modal-animation-fill-mode)]",
+          "nx:[&_.modal-inner]:[animation-name:var(--modal-animation-name)]",
+          "nx:[&_.modal-inner]:[animation-timing-function:var(--modal-animation-timing-function)]"
+        );
+      }
+      if (className) {
+        baseClasses.push(className);
+      }
+      return baseClasses.join(" ");
+    };
+    const dimOpacity = status === "enter" || status === "enter-done" ? 1 : 0;
+    const getModalStyle = () => {
+      return {
+        "--modal-animation-name": status === "enter" || status === "leave" ? `modal-${animationInfo.name}` : "",
+        "--modal-animation-direction": status === "leave" ? "reverse" : "normal",
+        "--modal-animation-fill-mode": status === "leave" ? "forwards" : "",
+        "--modal-animation-duration": `${animationInfo.duration}ms`,
+        "--modal-animation-timing-function": status === "leave" ? animationInfo.leaveTimingFunction : animationInfo.timingFunction,
+        "--modal-dim-opacity": dimOpacity
+      };
+    };
+    return /* @__PURE__ */ jsx("div", { className: getModalClassName(), style: getModalStyle(), children: /* @__PURE__ */ jsx(
+      Component,
+      {
+        is: modal.component,
+        props: {
+          ...modal.props,
+          className: status,
+          layout: resolvedLayout,
+          close: (isAnimation) => close(modal.id, isAnimation),
+          resolve: (result, useClose = true) => resolve(modal, result, useClose)
+        },
+        handleOpenStatus
+      },
+      modal.id
+    ) });
+  }
+);
+ModalComponent.displayName = "ModalComponent";
+var ModalComponent_default = ModalComponent;
+var ModalPortal = ({ children, selector }) => {
+  const [mounted, setMounted] = useState(false);
+  let element = null;
+  if (typeof window !== "undefined") {
+    const elements = document.querySelectorAll(
+      selector.includes("#") ? selector : `#${selector}`
+    );
+    if (elements.length === 1) {
+      element = elements[0];
+    }
+  }
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  return mounted && element && children ? createPortal(children, element) : null;
+};
+var ModalPortal_default = ModalPortal;
+var ModalContainer = ({ className = "", breakPoints, ...defaultOption }) => {
+  const [modals, setModals] = useState(Modal_default.modalList);
+  const setModalClose = useCallback((params) => {
+    if (!params) return;
+    const { modalId, hasClose, close } = params;
+    if (!hasClose) {
+      Modal_default.modalList = Modal_default.modalList.map(
+        (m) => m.id === modalId ? { ...m, close } : m
+      );
+    }
+  }, []);
+  useEffect(() => {
+    Modal_default.observe({ options: defaultOption, observeFunction: setModals });
+    return () => {
+      Modal_default.unobserve();
+    };
+  }, [defaultOption]);
+  return /* @__PURE__ */ jsx("div", { id: "modal-wrapper", className, children: modals.map(
+    (m) => m.props.portalId ? /* @__PURE__ */ jsx(ModalPortal_default, { selector: m.props.portalId, children: /* @__PURE__ */ jsx(
+      ModalComponent_default,
+      {
+        ref: setModalClose,
+        modal: m,
+        breakPoints,
+        deleteModal: (id) => Modal_default.deleteModal(id),
+        resolveModal: (params) => Modal_default.resolveModal(params),
+        scrollFreeze,
+        scrollRelease
+      },
+      m.id
+    ) }, m.id) : /* @__PURE__ */ jsx(
+      ModalComponent_default,
+      {
+        ref: setModalClose,
+        modal: m,
+        breakPoints,
+        deleteModal: (id) => Modal_default.deleteModal(id),
+        resolveModal: (params) => Modal_default.resolveModal(params),
+        scrollFreeze,
+        scrollRelease
+      },
+      m.id
+    )
+  ) });
+};
+var ModalContainer_default = ModalContainer;
+var ModalPortalTarget = ({ id, className }) => {
+  return /* @__PURE__ */ jsx("div", { id, className: `nx:absolute nx:z-[9999] ${className || ""}` });
+};
+var ModalPortalTarget_default = ModalPortalTarget;
+var modalWrapVariants = cva(
+  "modal-wrap nx:pointer-events-none nx:fixed nx:inset-0 nx:z-[99999] nx:flex nx:h-full nx:items-center nx:justify-center nx:text-text-primary",
+  {
+    variants: {
+      layout: {
+        default: "",
+        "bottom-sheet": "nx:items-end",
+        "slide-left": "nx:h-full nx:justify-start",
+        "slide-right": "nx:h-full nx:justify-end",
+        "full-page": "nx:h-full nx:justify-start",
+        "full-page-reverse": "nx:h-full nx:justify-start",
+        draggable: ""
+      }
+    },
+    defaultVariants: {
+      layout: "default"
+    }
+  }
+);
+var modalInnerVariants = cva(
+  [
+    "modal-inner",
+    "nx:relative nx:z-[2] nx:min-h-[200px] nx:w-full nx:overflow-hidden",
+    "nx:pointer-events-auto nx:rounded-corner-lg nx:border nx:border-border-default nx:bg-surface-default nx:text-text-primary",
+    "nx:sm:w-[480px] nx:sm:min-h-auto",
+    "nx:[&>div]:contents"
+  ],
+  {
+    variants: {
+      layout: {
+        default: "",
+        "bottom-sheet": "nx:mx-0 nx:my-0 nx:w-full nx:rounded-t-2xl nx:rounded-b-none nx:border-t nx:border-border-default nx:px-4 nx:pt-6",
+        "slide-left": "nx:h-full nx:rounded-none",
+        "slide-right": "nx:h-full nx:rounded-none",
+        "full-page": "nx:h-full nx:w-full nx:sm:w-full nx:rounded-none nx:border-transparent",
+        "full-page-reverse": "nx:h-full nx:w-full nx:sm:w-full nx:rounded-none nx:border-transparent",
+        draggable: "nx:w-auto nx:min-w-[320px] nx:sm:w-auto nx:overflow-visible"
+      },
+      hasFooter: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { layout: "default", hasFooter: true, class: "nx:pb-[88px]" },
+      { layout: "bottom-sheet", hasFooter: true, class: "nx:pb-20" }
+    ],
+    defaultVariants: {
+      layout: "default",
+      hasFooter: false
+    }
+  }
+);
+var modalHeaderVariants = cva("modal-header nx:relative nx:px-5 nx:pt-6", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nx:p-0",
+      "slide-left": "",
+      "slide-right": "",
+      "full-page": "",
+      "full-page-reverse": "",
+      draggable: "nx:cursor-grab nx:active:cursor-grabbing nx:select-none"
+    }
+  },
+  defaultVariants: {
+    layout: "default"
+  }
+});
+var modalCloseButtonVariants = cva(
+  "btn-close nx:absolute nx:top-6 nx:right-5 nx:z-[1] nx:ml-auto nx:flex nx:cursor-pointer nx:items-center nx:justify-end",
+  {
+    variants: {
+      layout: {
+        default: "",
+        "bottom-sheet": "nx:relative nx:top-0 nx:right-0",
+        "slide-left": "",
+        "slide-right": "",
+        "full-page": "",
+        "full-page-reverse": "",
+        draggable: ""
+      }
+    },
+    defaultVariants: {
+      layout: "default"
+    }
+  }
+);
+var modalTitleVariants = cva(
+  "modal-title nx:m-0 nx:pr-[42px] nx:text-text-lg nx:font-semibold nx:leading-[26px] nx:tracking-[-0.002em] nx:text-text-primary",
+  {
+    variants: {
+      layout: {
+        default: "",
+        "bottom-sheet": "nx:pt-1.5 nx:leading-7 nx:tracking-[-0.012em]",
+        "slide-left": "",
+        "slide-right": "",
+        "full-page": "",
+        "full-page-reverse": "",
+        draggable: ""
+      }
+    },
+    defaultVariants: {
+      layout: "default"
+    }
+  }
+);
+var modalBodyVariants = cva(
+  ["modal-body", "nx:relative nx:overflow-y-auto nx:px-5 nx:pt-6", "nx:scrollbar-none"],
+  {
+    variants: {
+      layout: {
+        default: "",
+        "bottom-sheet": "nx:mt-6 nx:max-h-[calc(100vh-108px)] nx:p-0 nx:pb-6",
+        "slide-left": "nx:h-full nx:max-h-full nx:overflow-y-auto",
+        "slide-right": "nx:h-full nx:max-h-full nx:overflow-y-auto",
+        "full-page": "nx:h-full nx:max-h-full nx:overflow-y-auto nx:pb-0",
+        "full-page-reverse": "nx:h-full nx:max-h-full nx:overflow-y-auto nx:pb-0",
+        draggable: ""
+      },
+      hasHeader: {
+        true: "",
+        false: ""
+      },
+      hasFooter: {
+        true: "",
+        false: "nx:pb-6"
+      }
+    },
+    compoundVariants: [
+      {
+        layout: "default",
+        hasHeader: true,
+        class: "nx:max-h-[calc(90vh-var(--hd-height,60px))]"
+      },
+      {
+        layout: "default",
+        hasHeader: true,
+        hasFooter: true,
+        class: "nx:max-h-[calc(90vh-var(--ft-height,88px)-var(--hd-height,60px))]"
+      },
+      {
+        layout: "default",
+        hasFooter: true,
+        hasHeader: false,
+        class: "nx:max-h-[calc(90vh-var(--ft-height,88px))]"
+      },
+      {
+        layout: "bottom-sheet",
+        hasHeader: true,
+        class: "nx:max-h-[calc(100vh-var(--hd-height,60px)-124px)] nx:pb-0"
+      },
+      {
+        layout: "bottom-sheet",
+        hasHeader: true,
+        hasFooter: true,
+        class: "nx:max-h-[calc(100vh-var(--ft-height,88px)-var(--hd-height,60px)-100px)]"
+      },
+      {
+        layout: "full-page",
+        hasHeader: true,
+        class: "nx:max-h-[calc(100vh-var(--hd-height,60px))] nx:pb-0"
+      },
+      {
+        layout: "full-page",
+        hasHeader: true,
+        hasFooter: true,
+        class: "nx:max-h-[calc(100vh-var(--ft-height,88px)-var(--hd-height,60px))]"
+      },
+      {
+        layout: "full-page-reverse",
+        hasHeader: true,
+        class: "nx:max-h-[calc(100vh-var(--hd-height,60px))] nx:pb-0"
+      },
+      {
+        layout: "full-page-reverse",
+        hasHeader: true,
+        hasFooter: true,
+        class: "nx:max-h-[calc(100vh-var(--ft-height,88px)-var(--hd-height,60px))]"
+      },
+      {
+        layout: "slide-left",
+        hasHeader: true,
+        class: "nx:max-h-[calc(100%-var(--hd-height,60px))]"
+      },
+      {
+        layout: "slide-right",
+        hasHeader: true,
+        class: "nx:max-h-[calc(100%-var(--hd-height,60px))]"
+      }
+    ],
+    defaultVariants: {
+      layout: "default",
+      hasHeader: false,
+      hasFooter: false
+    }
+  }
+);
+var modalFooterVariants = cva(
+  [
+    "modal-footer",
+    "nx:absolute nx:bottom-0 nx:left-0 nx:z-[2] nx:flex nx:w-full nx:px-5 nx:py-6 nx:pb-5",
+    "nx:[&_button]:h-12 nx:[&_button]:flex-1"
+  ],
+  {
+    variants: {
+      layout: {
+        default: "",
+        "bottom-sheet": "nx:px-4 nx:py-3 nx:pb-6",
+        "slide-left": "",
+        "slide-right": "",
+        "full-page": "",
+        "full-page-reverse": "",
+        draggable: "nx:relative"
+      }
+    },
+    defaultVariants: {
+      layout: "default"
+    }
+  }
+);
+var modalDimVariants = cva(
+  "dim nx:pointer-events-auto nx:fixed nx:inset-0 nx:z-[1] nx:block nx:h-screen nx:w-screen nx:bg-static-black/75",
+  {
+    variants: {
+      visible: {
+        true: "",
+        false: "nx:hidden"
+      }
+    },
+    defaultVariants: {
+      visible: true
+    }
+  }
+);
+var CloseIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "nx:w-5 nx:h-5 nx:text-text-muted",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M6 18L18 6M6 6l12 12"
+      }
+    )
+  }
+);
+var ModalTemplate = forwardRef(
+  ({
+    className,
+    layout = "default",
+    showDim = true,
+    innerClassName,
+    bodyClassName,
+    footerClassName,
+    dimClassName,
+    headerClassName,
+    children,
+    title,
+    desc,
+    hideHeader = false,
+    hideFooter = true,
+    dimClose,
+    footer,
+    close,
+    enableDrag = true,
+    dragPersistKey
+  }, ref) => {
+    const elRef = useRef(null);
+    const modalFooterRef = useRef(null);
+    const modalHeaderRef = useRef(null);
+    const innerRef = useRef(null);
+    const { dimCloseEnable } = getModalDefaultOption();
+    const isBottomSheet = layout === "bottom-sheet";
+    const isDraggable = layout === "draggable";
+    const dragHandlers = useDraggableBottomSheet({
+      enabled: isBottomSheet && enableDrag,
+      onClose: () => close(false),
+      threshold: 0.5,
+      velocityThreshold: 0.3
+    });
+    const windowDrag = useDraggableWindow({
+      persistKey: dragPersistKey,
+      initialPosition: { x: -1, y: -1 },
+      targetRef: innerRef
+    });
+    const closeModal2 = useCallback(() => {
+      if (!(dimClose ?? dimCloseEnable)) return;
+      close();
+    }, [close, dimClose, dimCloseEnable]);
+    useEffect(() => {
+      const modalFooterHeight = modalFooterRef.current?.getBoundingClientRect().height;
+      const modalHeaderHeight = modalHeaderRef.current?.getBoundingClientRect().height;
+      if (modalFooterHeight) {
+        document.documentElement.style.setProperty(
+          "--ft-height",
+          modalFooterHeight + "px"
+        );
+      }
+      if (modalHeaderHeight) {
+        document.documentElement.style.setProperty(
+          "--hd-height",
+          modalHeaderHeight + "px"
+        );
+      }
+    }, []);
+    useImperativeHandle(ref, () => elRef.current);
+    const hasHeader = !hideHeader;
+    const hasFooter = !hideFooter;
+    const wrapStyle = {};
+    const innerStyle = {};
+    if (isDraggable && !windowDrag.isDefaultPosition) {
+      wrapStyle.alignItems = "flex-start";
+      wrapStyle.justifyContent = "flex-start";
+      innerStyle.position = "fixed";
+      innerStyle.left = windowDrag.position.x;
+      innerStyle.top = windowDrag.position.y;
+    }
+    if (isBottomSheet) {
+      if (dragHandlers.translateY !== 0) {
+        innerStyle.transform = `translateY(${dragHandlers.translateY}px)`;
+      }
+      if (dragHandlers.isAnimating) {
+        innerStyle.transition = "transform 250ms cubic-bezier(0.32, 0.72, 0, 1)";
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: elRef,
+        className: cn(modalWrapVariants({ layout }), className),
+        style: wrapStyle,
+        onTouchStart: isBottomSheet ? dragHandlers.onTouchStart : void 0,
+        onTouchMove: isBottomSheet ? dragHandlers.onTouchMove : void 0,
+        onTouchEnd: isBottomSheet ? dragHandlers.onTouchEnd : void 0,
+        children: [
+          showDim && !isDraggable && /* @__PURE__ */ jsx(
+            "div",
+            {
+              tabIndex: -1,
+              role: "button",
+              "aria-label": "modal-dim",
+              className: cn(modalDimVariants({ visible: showDim }), dimClassName),
+              style: isBottomSheet ? {
+                opacity: dragHandlers.dimOpacity,
+                transition: dragHandlers.isAnimating ? "opacity 250ms ease-out" : void 0
+              } : {
+                opacity: "var(--modal-dim-opacity, 0)",
+                transition: "opacity var(--modal-animation-duration, 300ms) ease"
+              },
+              onClick: closeModal2
+            }
+          ),
+          isDraggable && showDim && /* @__PURE__ */ jsx(
+            "div",
+            {
+              tabIndex: -1,
+              role: "button",
+              "aria-label": "modal-dim",
+              className: cn(
+                "dim nx:pointer-events-auto nx:fixed nx:inset-0 nx:z-[1] nx:block nx:h-screen nx:w-screen nx:bg-static-black/30",
+                dimClassName
+              ),
+              onClick: closeModal2
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: innerRef,
+              className: cn(
+                modalInnerVariants({ layout, hasFooter }),
+                innerClassName
+              ),
+              style: innerStyle,
+              children: [
+                isBottomSheet && /* @__PURE__ */ jsx("span", { className: "nx:flex nx:w-full nx:justify-center nx:pt-3 nx:pb-2", children: /* @__PURE__ */ jsx("span", { className: "nx:bg-border-default nx:h-1.5 nx:w-16 nx:rounded-full" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "nx:contents", children: [
+                  hasHeader && /* @__PURE__ */ jsxs(
+                    "header",
+                    {
+                      className: cn(modalHeaderVariants({ layout }), headerClassName),
+                      ref: modalHeaderRef,
+                      onMouseDown: isDraggable && enableDrag ? windowDrag.handleMouseDown : void 0,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            className: modalCloseButtonVariants({ layout }),
+                            onClick: () => close(),
+                            children: /* @__PURE__ */ jsx(CloseIcon, {})
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: "modal-header-inner", children: [
+                          title && /* @__PURE__ */ jsx("h1", { className: modalTitleVariants({ layout }), children: title }),
+                          desc && /* @__PURE__ */ jsx("p", { className: "modal-desc nx:text-text-muted nx:text-xs nx:mt-1", children: desc })
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "section",
+                    {
+                      className: cn(
+                        modalBodyVariants({ layout, hasHeader, hasFooter }),
+                        bodyClassName
+                      ),
+                      children
+                    }
+                  ),
+                  hasFooter && /* @__PURE__ */ jsx(
+                    "footer",
+                    {
+                      ref: modalFooterRef,
+                      className: cn(modalFooterVariants({ layout }), footerClassName),
+                      children: footer
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ModalTemplate.displayName = "ModalTemplate";
+var ModalTemplate_default = ModalTemplate;
+
+// src/modal/index.ts
+var openModal = ((arg1, arg2 = {}) => {
+  if ("component" in arg1) {
+    const { component, props = {}, options = {} } = arg1;
+    return Modal_default.openModal({
+      component,
+      props: { ...props, ...options }
+    });
+  } else {
+    return Modal_default.openModal({
+      component: arg1,
+      props: arg2
+    });
+  }
+});
+var closeModal = (id, isAnimation) => {
+  return Modal_default.closeModal(id, isAnimation);
+};
+var checkModal = (params) => {
+  return Modal_default.checkModal(params);
+};
+var resetModal = () => {
+  return Modal_default.resetModal();
+};
+var getModalDefaultOption = () => {
+  return Modal_default.getDefaultOption();
+};
+
+export { ModalContainer_default, ModalPortalTarget_default, ModalTemplate_default, checkModal, closeModal, getModalDefaultOption, openModal, resetModal };