@nexus-cross/design-system 1.0.0

package/dist/chunks/chunk-3VFBPFZF.mjs

@@ -0,0 +1,640 @@
+import { useDraggableBottomSheet } from './chunk-U56AGSLE.mjs';
+import { useDraggableWindow } from './chunk-4J3GCZ7W.mjs';
+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 { cn } from './chunk-MCKOWMLS.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 = ["nexus-modal-component"];
+      if (modal.props.portalId) {
+        baseClasses.push("nexus-modal-component--portal");
+      }
+      if (["enter", "enter-done", "leave"].includes(status)) {
+        baseClasses.push("nexus-modal-component--visible");
+      }
+      if (status === "enter") {
+        baseClasses.push("nexus-modal-component--enter");
+      } else if (status === "leave") {
+        baseClasses.push("nexus-modal-component--leave");
+      }
+      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: cn("nexus-modal-portal-target", className) });
+};
+var ModalPortalTarget_default = ModalPortalTarget;
+var modalWrapVariants = cva("nexus-modal-wrap", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-wrap--bottom-sheet",
+      "slide-left": "nexus-modal-wrap--slide-left",
+      "slide-right": "nexus-modal-wrap--slide-right",
+      "full-page": "nexus-modal-wrap--full-page",
+      "full-page-reverse": "nexus-modal-wrap--full-page-reverse",
+      draggable: ""
+    }
+  },
+  defaultVariants: {
+    layout: "default"
+  }
+});
+var modalInnerVariants = cva("nexus-modal-inner", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-inner--bottom-sheet",
+      "slide-left": "nexus-modal-inner--slide-left",
+      "slide-right": "nexus-modal-inner--slide-right",
+      "full-page": "nexus-modal-inner--full-page",
+      "full-page-reverse": "nexus-modal-inner--full-page-reverse",
+      draggable: "nexus-modal-inner--draggable"
+    },
+    hasFooter: {
+      true: "nexus-modal-inner--has-footer",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    { layout: "bottom-sheet", hasFooter: true, class: "nexus-modal-inner--bottom-sheet nexus-modal-inner--has-footer" }
+  ],
+  defaultVariants: {
+    layout: "default",
+    hasFooter: false
+  }
+});
+var modalHeaderVariants = cva("nexus-modal-header", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-header--bottom-sheet",
+      "slide-left": "",
+      "slide-right": "",
+      "full-page": "",
+      "full-page-reverse": "",
+      draggable: "nexus-modal-header--draggable"
+    }
+  },
+  defaultVariants: {
+    layout: "default"
+  }
+});
+var modalCloseButtonVariants = cva("nexus-modal-close-btn", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-close-btn--bottom-sheet",
+      "slide-left": "",
+      "slide-right": "",
+      "full-page": "",
+      "full-page-reverse": "",
+      draggable: ""
+    }
+  },
+  defaultVariants: {
+    layout: "default"
+  }
+});
+var modalTitleVariants = cva("nexus-modal-title", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-title--bottom-sheet",
+      "slide-left": "",
+      "slide-right": "",
+      "full-page": "",
+      "full-page-reverse": "",
+      draggable: ""
+    }
+  },
+  defaultVariants: {
+    layout: "default"
+  }
+});
+var modalBodyVariants = cva("nexus-modal-body", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-body--bottom-sheet",
+      "slide-left": "nexus-modal-body--slide",
+      "slide-right": "nexus-modal-body--slide",
+      "full-page": "nexus-modal-body--full-page",
+      "full-page-reverse": "nexus-modal-body--full-page",
+      draggable: ""
+    },
+    hasHeader: {
+      true: "",
+      false: ""
+    },
+    hasFooter: {
+      true: "",
+      false: "nexus-modal-body--no-footer"
+    }
+  },
+  defaultVariants: {
+    layout: "default",
+    hasHeader: false,
+    hasFooter: false
+  }
+});
+var modalFooterVariants = cva("nexus-modal-footer", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-footer--bottom-sheet",
+      "slide-left": "",
+      "slide-right": "",
+      "full-page": "",
+      "full-page-reverse": "",
+      draggable: "nexus-modal-footer--draggable"
+    }
+  },
+  defaultVariants: {
+    layout: "default"
+  }
+});
+var modalDimVariants = cva("nexus-modal-dim", {
+  variants: {
+    visible: {
+      true: "",
+      false: "nexus-modal-dim--hidden"
+    }
+  },
+  defaultVariants: {
+    visible: true
+  }
+});
+var CloseIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "nexus-modal-close-icon",
+    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);
+    useEffect(() => {
+      const inner = innerRef.current;
+      if (!inner) return;
+      const focusableSelector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+      const handleKeyDown = (e) => {
+        if (e.key !== "Tab") return;
+        const focusable = inner.querySelectorAll(focusableSelector);
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey) {
+          if (document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      };
+      inner.addEventListener("keydown", handleKeyDown);
+      const prev = document.activeElement;
+      const firstFocusable = inner.querySelector(focusableSelector);
+      firstFocusable?.focus();
+      return () => {
+        inner.removeEventListener("keydown", handleKeyDown);
+        prev?.focus();
+      };
+    }, []);
+    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("nexus-modal-dim nexus-modal-dim--draggable", dimClassName),
+              onClick: closeModal2
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: innerRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": typeof title === "string" ? title : void 0,
+              className: cn(
+                modalInnerVariants({ layout, hasFooter }),
+                innerClassName
+              ),
+              style: innerStyle,
+              children: [
+                isBottomSheet && /* @__PURE__ */ jsx("span", { className: "nexus-modal-bottom-sheet-handle", children: /* @__PURE__ */ jsx("span", { className: "nexus-modal-bottom-sheet-bar" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "nexus-contents", children: [
+                  hasHeader && /* @__PURE__ */ jsxs(
+                    "header",
+                    {
+                      className: cn(modalHeaderVariants({ layout }), headerClassName),
+                      ref: modalHeaderRef,
+                      onMouseDown: isDraggable && enableDrag ? windowDrag.handleMouseDown : void 0,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: modalCloseButtonVariants({ layout }),
+                            onClick: () => close(),
+                            "aria-label": "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: "nexus-modal-desc", 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 };