aark-react-modalify 1.0.5 → 1.2.0

package/dist/index.esm.js

@@ -1,405 +0,0 @@
-import { createElement, useState, useCallback, useEffect } from "react";
-import { createRoot } from "react-dom/client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-const listeners = /* @__PURE__ */ new Set();
-let currentConfig = null;
-let container = null;
-let root = null;
-function init() {
-  if (container) return;
-  container = document.createElement("div");
-  container.id = "aark-react-modalify-root";
-  container.style.position = "relative";
-  container.style.zIndex = "9999";
-  document.body.appendChild(container);
-  import("./ModalProvider-BAlPeDjm.js").then(({ default: ModalProvider }) => {
-    if (container) {
-      root = createRoot(container);
-      root.render(createElement(ModalProvider));
-    }
-  });
-}
-function subscribe(listener) {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
-}
-function emit(type, config) {
-  const event = { type, config };
-  listeners.forEach((listener) => listener(event));
-}
-function fire(content, options) {
-  init();
-  const config = {
-    content,
-    options: Object.assign(
-      {
-        position: "center",
-        mode: "modal",
-        showCloseIcon: true,
-        preventEscClose: false,
-        preventOverlayClose: false
-      },
-      options
-    )
-  };
-  currentConfig = config;
-  emit("open", config);
-}
-function close() {
-  if (currentConfig) {
-    emit("beforeClose", currentConfig);
-    currentConfig = null;
-    emit("close");
-  }
-}
-function isOpen() {
-  return currentConfig !== null;
-}
-function getCurrentConfig() {
-  return currentConfig;
-}
-function closeAll() {
-  close();
-}
-function cleanup() {
-  if (container && container.parentNode) {
-    container.parentNode.removeChild(container);
-    container = null;
-    root = null;
-  }
-}
-const modalManager = {
-  subscribe,
-  fire,
-  close,
-  isOpen,
-  getCurrentConfig,
-  closeAll,
-  cleanup
-};
-function setAarkModalTheme(theme) {
-  const root2 = document.documentElement;
-  if (theme.overlayBackground) {
-    root2.style.setProperty("--aark-modal-overlay-bg", theme.overlayBackground);
-  }
-  if (theme.overlayBlur) {
-    root2.style.setProperty("--aark-modal-overlay-blur", theme.overlayBlur);
-  }
-  if (theme.modalBackground) {
-    root2.style.setProperty("--aark-modal-bg", theme.modalBackground);
-  }
-  if (theme.modalBorderRadius) {
-    root2.style.setProperty(
-      "--aark-modal-border-radius",
-      theme.modalBorderRadius
-    );
-  }
-  if (theme.modalShadow) {
-    root2.style.setProperty("--aark-modal-shadow", theme.modalShadow);
-  }
-  if (theme.modalPadding) {
-    root2.style.setProperty("--aark-modal-padding", theme.modalPadding);
-  }
-  if (theme.modalZIndex) {
-    root2.style.setProperty(
-      "--aark-modal-z-index",
-      theme.modalZIndex.toString()
-    );
-  }
-  if (theme.modalContentZIndex) {
-    root2.style.setProperty(
-      "--aark-modal-content-z-index",
-      theme.modalContentZIndex.toString()
-    );
-  }
-  if (theme.closeButtonColor) {
-    root2.style.setProperty("--aark-modal-close-color", theme.closeButtonColor);
-  }
-  if (theme.closeButtonHoverBackground) {
-    root2.style.setProperty(
-      "--aark-modal-close-hover-bg",
-      theme.closeButtonHoverBackground
-    );
-  }
-  if (theme.closeButtonHoverColor) {
-    root2.style.setProperty(
-      "--aark-modal-close-hover-color",
-      theme.closeButtonHoverColor
-    );
-  }
-  if (theme.closeButtonFocusOutline) {
-    root2.style.setProperty(
-      "--aark-modal-close-focus-outline",
-      theme.closeButtonFocusOutline
-    );
-  }
-  if (theme.animationDuration) {
-    root2.style.setProperty(
-      "--aark-modal-animation-duration",
-      theme.animationDuration
-    );
-  }
-  if (theme.fadeDuration) {
-    root2.style.setProperty("--aark-modal-fade-duration", theme.fadeDuration);
-  }
-  if (theme.customOverlayBackground) {
-    root2.style.setProperty(
-      "--aark-custom-overlay-bg",
-      theme.customOverlayBackground
-    );
-  }
-  if (theme.customOverlayBlur) {
-    root2.style.setProperty(
-      "--aark-custom-overlay-blur",
-      theme.customOverlayBlur
-    );
-  }
-  if (theme.customModalGradientStart) {
-    root2.style.setProperty(
-      "--aark-custom-modal-gradient-start",
-      theme.customModalGradientStart
-    );
-  }
-  if (theme.customModalGradientEnd) {
-    root2.style.setProperty(
-      "--aark-custom-modal-gradient-end",
-      theme.customModalGradientEnd
-    );
-  }
-  if (theme.customModalTextColor) {
-    root2.style.setProperty(
-      "--aark-custom-modal-text-color",
-      theme.customModalTextColor
-    );
-  }
-  if (theme.customModalShadow) {
-    root2.style.setProperty(
-      "--aark-custom-modal-shadow",
-      theme.customModalShadow
-    );
-  }
-  if (theme.customModalCloseColor) {
-    root2.style.setProperty(
-      "--aark-custom-modal-close-color",
-      theme.customModalCloseColor
-    );
-  }
-  if (theme.customModalCloseHoverBackground) {
-    root2.style.setProperty(
-      "--aark-custom-modal-close-hover-bg",
-      theme.customModalCloseHoverBackground
-    );
-  }
-  if (theme.customModalCloseHoverColor) {
-    root2.style.setProperty(
-      "--aark-custom-modal-close-hover-color",
-      theme.customModalCloseHoverColor
-    );
-  }
-}
-function resetAarkModalTheme() {
-  const root2 = document.documentElement;
-  const properties = [
-    "--aark-modal-overlay-bg",
-    "--aark-modal-overlay-blur",
-    "--aark-modal-bg",
-    "--aark-modal-border-radius",
-    "--aark-modal-shadow",
-    "--aark-modal-padding",
-    "--aark-modal-z-index",
-    "--aark-modal-content-z-index",
-    "--aark-modal-close-color",
-    "--aark-modal-close-hover-bg",
-    "--aark-modal-close-hover-color",
-    "--aark-modal-close-focus-outline",
-    "--aark-modal-animation-duration",
-    "--aark-modal-fade-duration",
-    "--aark-custom-overlay-bg",
-    "--aark-custom-overlay-blur",
-    "--aark-custom-modal-gradient-start",
-    "--aark-custom-modal-gradient-end",
-    "--aark-custom-modal-text-color",
-    "--aark-custom-modal-shadow",
-    "--aark-custom-modal-close-color",
-    "--aark-custom-modal-close-hover-bg",
-    "--aark-custom-modal-close-hover-color"
-  ];
-  properties.forEach((property) => {
-    root2.style.removeProperty(property);
-  });
-}
-function getAarkModalTheme() {
-  const root2 = document.documentElement;
-  const computedStyle = getComputedStyle(root2);
-  return {
-    overlayBackground: computedStyle.getPropertyValue("--aark-modal-overlay-bg").trim(),
-    overlayBlur: computedStyle.getPropertyValue("--aark-modal-overlay-blur").trim(),
-    modalBackground: computedStyle.getPropertyValue("--aark-modal-bg").trim(),
-    modalBorderRadius: computedStyle.getPropertyValue("--aark-modal-border-radius").trim(),
-    modalShadow: computedStyle.getPropertyValue("--aark-modal-shadow").trim(),
-    modalPadding: computedStyle.getPropertyValue("--aark-modal-padding").trim(),
-    modalZIndex: parseInt(computedStyle.getPropertyValue("--aark-modal-z-index").trim()) || void 0,
-    modalContentZIndex: parseInt(
-      computedStyle.getPropertyValue("--aark-modal-content-z-index").trim()
-    ) || void 0,
-    closeButtonColor: computedStyle.getPropertyValue("--aark-modal-close-color").trim(),
-    closeButtonHoverBackground: computedStyle.getPropertyValue("--aark-modal-close-hover-bg").trim(),
-    closeButtonHoverColor: computedStyle.getPropertyValue("--aark-modal-close-hover-color").trim(),
-    closeButtonFocusOutline: computedStyle.getPropertyValue("--aark-modal-close-focus-outline").trim(),
-    animationDuration: computedStyle.getPropertyValue("--aark-modal-animation-duration").trim(),
-    fadeDuration: computedStyle.getPropertyValue("--aark-modal-fade-duration").trim(),
-    customOverlayBackground: computedStyle.getPropertyValue("--aark-custom-overlay-bg").trim(),
-    customOverlayBlur: computedStyle.getPropertyValue("--aark-custom-overlay-blur").trim(),
-    customModalGradientStart: computedStyle.getPropertyValue("--aark-custom-modal-gradient-start").trim(),
-    customModalGradientEnd: computedStyle.getPropertyValue("--aark-custom-modal-gradient-end").trim(),
-    customModalTextColor: computedStyle.getPropertyValue("--aark-custom-modal-text-color").trim(),
-    customModalShadow: computedStyle.getPropertyValue("--aark-custom-modal-shadow").trim(),
-    customModalCloseColor: computedStyle.getPropertyValue("--aark-custom-modal-close-color").trim(),
-    customModalCloseHoverBackground: computedStyle.getPropertyValue("--aark-custom-modal-close-hover-bg").trim(),
-    customModalCloseHoverColor: computedStyle.getPropertyValue("--aark-custom-modal-close-hover-color").trim()
-  };
-}
-const aark = {
-  fire: (content, options) => modalManager.fire(content, options),
-  close: () => modalManager.close(),
-  isOpen: () => modalManager.isOpen(),
-  closeAll: () => modalManager.closeAll(),
-  setTheme: (theme) => setAarkModalTheme(theme),
-  resetTheme: () => resetAarkModalTheme(),
-  getTheme: () => getAarkModalTheme()
-};
-function useModal() {
-  const [isOpen2, setIsOpen] = useState(false);
-  const [config, setConfig] = useState(null);
-  const close2 = useCallback(() => {
-    modalManager.close();
-  }, []);
-  useEffect(() => {
-    const handleModalEvent = (event) => {
-      switch (event.type) {
-        case "open":
-          setIsOpen(true);
-          setConfig(event.config || null);
-          break;
-        case "close":
-          setIsOpen(false);
-          setConfig(null);
-          break;
-      }
-    };
-    const unsubscribe = modalManager.subscribe(handleModalEvent);
-    setIsOpen(modalManager.isOpen());
-    setConfig(modalManager.getCurrentConfig());
-    return unsubscribe;
-  }, []);
-  return {
-    isOpen: isOpen2,
-    config,
-    close: close2
-  };
-}
-const injectStyles = (css, id) => {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(id)) return;
-  const style = document.createElement("style");
-  style.id = id;
-  style.innerHTML = css;
-  document.head.appendChild(style);
-};
-const MODAL_CSS = `:root{--aark-modal-overlay-bg:rgba(0,0,0,.5);--aark-modal-bg:#fff;--aark-modal-radius:8px;--aark-modal-shadow:0 10px 25px rgba(0,0,0,.15);--aark-modal-pad:16px;--aark-modal-z:9999;--aark-close-color:#666;--aark-close-hover:#f5f5f5;--aark-anim:.2s}.aark-modal-container{position:fixed;inset:0;z-index:var(--aark-modal-z)}.aark-modal-container.notification{pointer-events:none}.aark-modal-overlay{position:absolute;inset:0;background:var(--aark-modal-overlay-bg);backdrop-filter:blur(2px)}.aark-modal-content{position:fixed;background:var(--aark-modal-bg);border-radius:var(--aark-modal-radius);box-shadow:var(--aark-modal-shadow);padding:var(--aark-modal-pad);z-index:calc(var(--aark-modal-z) + 1);max-width:90vw;max-height:90vh;overflow:auto}.aark-modal-content.notification{pointer-events:auto}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center{top:20px;left:50%;transform:translateX(-50%)}.aark-modal-content.top-right{top:20px;right:20px}.aark-modal-content.bottom-right{bottom:20px;right:20px}.aark-modal-content.bottom-center{bottom:20px;left:50%;transform:translateX(-50%)}.aark-modal-close{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:0;border:0;color:var(--aark-close-color);cursor:pointer;border-radius:50%;font-size:14px;line-height:1;transition:all var(--aark-anim)}.aark-modal-close:hover{background:var(--aark-close-hover);color:#333}.aark-modal-close:focus{outline:2px solid #007bff;outline-offset:2px}.aark-modal-body{padding-top:8px}.aark-modal-container{animation:f var(--aark-anim)}.aark-modal-content{animation:s var(--aark-anim)}@keyframes f{0%{opacity:0}to{opacity:1}}@keyframes s{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.aark-modal-content.top-center{animation:d var(--aark-anim)}.aark-modal-content.top-right,.aark-modal-content.bottom-right{animation:l var(--aark-anim)}.aark-modal-content.bottom-center{animation:u var(--aark-anim)}@keyframes d{0%{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes l{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}@keyframes u{0%{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@media (max-width:768px){.aark-modal-content{margin:10px;max-width:calc(100vw - 20px)}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center,.aark-modal-content.bottom-center{left:50%;transform:translateX(-50%)}.aark-modal-content.top-right{right:10px;left:auto;transform:none}.aark-modal-content.bottom-right{right:10px;bottom:10px;left:auto;transform:none}}`;
-const ModalRenderer = ({ config, onClose }) => {
-  const { content, options = {} } = config;
-  const {
-    position = "center",
-    mode = "modal",
-    showCloseIcon = true,
-    autoCloseTime,
-    className = "",
-    overlayClassName = "",
-    preventEscClose = false,
-    preventOverlayClose = false
-  } = options;
-  useEffect(() => {
-    injectStyles(MODAL_CSS, "aark-modal-styles");
-  }, []);
-  useEffect(() => {
-    if (autoCloseTime && mode === "notification") {
-      const timer = setTimeout(onClose, autoCloseTime);
-      return () => clearTimeout(timer);
-    }
-  }, [autoCloseTime, mode, onClose]);
-  useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape" && !preventEscClose) {
-        onClose();
-      }
-    };
-    if (!preventEscClose) {
-      document.addEventListener("keydown", handleKeyDown);
-      return () => document.removeEventListener("keydown", handleKeyDown);
-    }
-  }, [onClose, preventEscClose]);
-  const handleOverlayClick = useCallback(
-    (event) => {
-      if (event.target === event.currentTarget && !preventOverlayClose) {
-        onClose();
-      }
-    },
-    [onClose, preventOverlayClose]
-  );
-  const handleCloseClick = useCallback(
-    (event) => {
-      event.stopPropagation();
-      onClose();
-    },
-    [onClose]
-  );
-  const containerClasses = `aark-modal-container ${mode === "notification" ? "notification" : ""}`;
-  const contentClasses = `aark-modal-content ${position} ${mode === "notification" ? "notification" : ""} ${className}`.trim();
-  const overlayClasses = `aark-modal-overlay ${overlayClassName}`.trim();
-  const modalContainer = document.getElementById("aark-react-modalify-root") || document.body;
-  return createPortal(
-    /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
-      mode === "modal" && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: overlayClasses,
-          onClick: handleOverlayClick,
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: contentClasses,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": "aark-modal-content",
-          children: [
-            showCloseIcon && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: handleCloseClick,
-                className: "aark-modal-close",
-                "aria-label": "Close modal",
-                type: "button",
-                children: "×"
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { id: "aark-modal-content", className: "aark-modal-body", children: content })
-          ]
-        }
-      )
-    ] }),
-    modalContainer
-  );
-};
-export {
-  ModalRenderer,
-  aark,
-  getAarkModalTheme,
-  resetAarkModalTheme,
-  setAarkModalTheme,
-  useModal
-};