aark-react-modalify 1.0.5 → 1.2.0

package/dist/index-no-styles.esm.js

@@ -0,0 +1,898 @@
+import { useState, useCallback, useEffect, memo, useMemo, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+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 colors = {
+  white: "#FFFFFF",
+  black: "#0B071A"
+};
+const Icon = memo(
+  ({
+    name,
+    color = "black",
+    style,
+    className = "",
+    noHoverEffect = false,
+    onClick,
+    size = 24,
+    "aria-label": ariaLabel,
+    title
+  }) => {
+    const resolvedSize = useMemo(() => {
+      return String(size);
+    }, [size]);
+    const resolvedColor = useMemo(() => {
+      if (colors[color]) {
+        return colors[color];
+      }
+      if (color.startsWith("#")) {
+        return color;
+      }
+      return color;
+    }, [color]);
+    const iconElement = useMemo(() => {
+      const fill = resolvedColor;
+      switch (name) {
+        case "close":
+          return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: resolvedSize, height: resolvedSize, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M15.281 14.2198C15.3507 14.2895 15.406 14.3722 15.4437 14.4632C15.4814 14.5543 15.5008 14.6519 15.5008 14.7504C15.5008 14.849 15.4814 14.9465 15.4437 15.0376C15.406 15.1286 15.3507 15.2114 15.281 15.281C15.2114 15.3507 15.1286 15.406 15.0376 15.4437C14.9465 15.4814 14.849 15.5008 14.7504 15.5008C14.6519 15.5008 14.5543 15.4814 14.4632 15.4437C14.3722 15.406 14.2895 15.3507 14.2198 15.281L8.00042 9.06073L1.78104 15.281C1.64031 15.4218 1.44944 15.5008 1.25042 15.5008C1.05139 15.5008 0.860523 15.4218 0.719792 15.281C0.579062 15.1403 0.5 14.9494 0.5 14.7504C0.5 14.5514 0.579062 14.3605 0.719792 14.2198L6.9401 8.00042L0.719792 1.78104C0.579062 1.64031 0.5 1.44944 0.5 1.25042C0.5 1.05139 0.579062 0.860523 0.719792 0.719792C0.860523 0.579062 1.05139 0.5 1.25042 0.5C1.44944 0.5 1.64031 0.579062 1.78104 0.719792L8.00042 6.9401L14.2198 0.719792C14.3605 0.579062 14.5514 0.5 14.7504 0.5C14.9494 0.5 15.1403 0.579062 15.281 0.719792C15.4218 0.860523 15.5008 1.05139 15.5008 1.25042C15.5008 1.44944 15.4218 1.64031 15.281 1.78104L9.06073 8.00042L15.281 14.2198Z", fill }) });
+        default:
+          return null;
+      }
+    }, [name, resolvedColor, resolvedSize]);
+    const accessibilityProps = useMemo(() => {
+      const props = {};
+      if (ariaLabel) {
+        props["aria-label"] = ariaLabel;
+      } else {
+        props["aria-label"] = `${name} icon`;
+      }
+      if (title) {
+        props.title = title;
+      }
+      props.role = onClick ? "button" : "img";
+      return props;
+    }, [ariaLabel, title, name, onClick]);
+    const handleKeyDown = useMemo(() => {
+      if (!onClick) return void 0;
+      return (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onClick();
+        }
+      };
+    }, [onClick]);
+    return /* @__PURE__ */ jsx(
+      "i",
+      {
+        className: `
+        inline-flex items-center justify-center bg-transparent outline-none border-none
+        ${!noHoverEffect && onClick && "hover:opacity-80 cursor-pointer transition-opacity duration-200"}
+        ${onClick && "focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}
+        ${className}
+      `.trim(),
+        style,
+        onClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: onClick ? 0 : void 0,
+        ...accessibilityProps,
+        children: iconElement
+      }
+    );
+  }
+);
+Icon.displayName = "Icon";
+const typeIcons$1 = {
+  success: "✓",
+  error: "✕",
+  warning: "⚠",
+  info: "ⓘ",
+  question: "?"
+};
+const typeColors$1 = {
+  success: "#4ade80",
+  error: "#ef4444",
+  warning: "#f59e0b",
+  info: "#3b82f6",
+  question: "#8b5cf6"
+};
+const StandardModal = ({ props, onClose }) => {
+  const {
+    title,
+    text,
+    type = "info",
+    cancelText = "Cancel",
+    confirmText = "OK",
+    onCancel,
+    onConfirm,
+    icon,
+    html,
+    showCancelButton = false,
+    showConfirmButton = true,
+    reverseButtons = false,
+    width = "auto",
+    fullWidth = false,
+    customClass = {}
+  } = props;
+  const handleCancel = () => {
+    onCancel?.();
+    onClose();
+  };
+  const handleConfirm = () => {
+    onConfirm?.();
+    onClose();
+  };
+  const iconElement = useMemo(() => {
+    if (icon) {
+      return typeof icon === "string" ? /* @__PURE__ */ jsx("span", { children: icon }) : icon;
+    }
+    return /* @__PURE__ */ jsx("span", { style: { color: typeColors$1[type] }, children: typeIcons$1[type] });
+  }, [icon, type]);
+  const buttonOrder = reverseButtons ? ["confirm", "cancel"] : ["cancel", "confirm"];
+  const modalStyle = useMemo(() => {
+    const baseStyle = {};
+    if (fullWidth) {
+      baseStyle.width = "calc(100vw - 20px)";
+      baseStyle.maxWidth = "calc(100vw - 20px)";
+    } else {
+      if (typeof width === "number") {
+        baseStyle.width = `${width}px`;
+      } else {
+        baseStyle.width = width;
+      }
+    }
+    return baseStyle;
+  }, [width, fullWidth]);
+  return /* @__PURE__ */ jsxs("div", { className: `aark-standard-modal ${customClass.popup || ""}`, style: modalStyle, children: [
+    /* @__PURE__ */ jsxs("div", { className: `aark-modal-content ${customClass.content || ""}`, children: [
+      iconElement && /* @__PURE__ */ jsx("div", { className: `aark-modal-icon ${customClass.icon || ""}`, children: iconElement }),
+      title && /* @__PURE__ */ jsx("div", { className: `aark-modal-header ${customClass.header || ""}`, children: /* @__PURE__ */ jsx("h2", { className: `aark-modal-title ${customClass.title || ""}`, children: title }) }),
+      html ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: typeof html === "string" ? html : "" } }) : text ? /* @__PURE__ */ jsx("p", { children: text }) : null
+    ] }),
+    (showCancelButton || showConfirmButton) && /* @__PURE__ */ jsx("div", { className: `aark-modal-footer ${customClass.actions || ""}`, children: buttonOrder.map((buttonType) => {
+      if (buttonType === "cancel" && showCancelButton) {
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleCancel,
+            className: `aark-modal-cancel-button ${customClass.cancelButton || ""}`,
+            children: cancelText
+          },
+          "cancel"
+        );
+      }
+      if (buttonType === "confirm" && showConfirmButton) {
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleConfirm,
+            className: `aark-modal-confirm-button ${customClass.confirmButton || ""}`,
+            style: {
+              background: typeColors$1[type]
+            },
+            children: confirmText
+          },
+          "confirm"
+        );
+      }
+      return null;
+    }) })
+  ] });
+};
+let modalRoot = null;
+const getModalRoot = () => {
+  if (!modalRoot) {
+    modalRoot = document.getElementById("aark-react-modalify-root");
+    if (!modalRoot) {
+      modalRoot = document.createElement("div");
+      modalRoot.id = "aark-react-modalify-root";
+      modalRoot.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 9998;
+      `;
+      document.body.appendChild(modalRoot);
+    }
+  }
+  return modalRoot;
+};
+const cleanupModalRoot = () => {
+  if (modalRoot && modalRoot.children.length === 0) {
+    modalRoot.remove();
+    modalRoot = null;
+  }
+};
+const Modal = ({ config, onClose }) => {
+  const { content, props, options = {} } = config;
+  const {
+    position = "center",
+    showCloseIcon = true,
+    className = "",
+    overlayClassName = "",
+    preventEscClose = false,
+    preventOverlayClose = false
+  } = options;
+  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 contentClasses = `aark-modal-container ${position} ${className}`.trim();
+  const modalContainer = getModalRoot();
+  const renderContent = () => {
+    if (props) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: contentClasses,
+          role: "dialog",
+          "aria-modal": "true",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            showCloseIcon && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleCloseClick,
+                className: "aark-modal-close",
+                "aria-label": "Close Modal",
+                type: "button",
+                children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 12 })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "aark-modal-wrapper", children: /* @__PURE__ */ jsx(StandardModal, { props, onClose }) })
+          ]
+        }
+      );
+    } else if (content) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: contentClasses,
+          role: "dialog",
+          "aria-modal": "true",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            showCloseIcon && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleCloseClick,
+                className: "aark-modal-close",
+                "aria-label": "Close Modal",
+                type: "button",
+                children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 12 })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "aark-modal-body", children: content })
+          ]
+        }
+      );
+    }
+    return null;
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `aark-modal-overlay ${overlayClassName}`.trim(),
+        onClick: handleOverlayClick,
+        "aria-hidden": "true",
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 9999,
+          background: "var(--aark-modal-overlay-bg)",
+          backdropFilter: "blur(2px)",
+          animation: "fade-in var(--aark-anim)",
+          display: "flex",
+          alignItems: position.includes("center") ? "center" : position.includes("top") ? "flex-start" : "flex-end",
+          justifyContent: position.includes("center") ? "center" : position.includes("right") ? "flex-end" : "flex-start",
+          padding: "1rem"
+        },
+        children: renderContent()
+      }
+    ),
+    modalContainer
+  );
+};
+const typeIcons = {
+  success: "✓",
+  error: "✕",
+  warning: "⚠",
+  info: "ⓘ",
+  question: "?"
+};
+const typeColors = {
+  success: "#4ade80",
+  error: "#ef4444",
+  warning: "#f59e0b",
+  info: "#3b82f6",
+  question: "#8b5cf6"
+};
+const StandardNotification = ({ props, onClose }) => {
+  const {
+    title,
+    text,
+    type = "info",
+    icon,
+    html,
+    timer = 5e3,
+    showCloseButton = true,
+    clickToClose = true,
+    width = "300px",
+    fullWidth = false,
+    padding = "1rem",
+    background = "#ffffff",
+    customClass = {}
+  } = props;
+  useEffect(() => {
+    if (timer && timer > 0) {
+      const timeoutId = setTimeout(onClose, timer);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [timer, onClose]);
+  const handleClick = () => {
+    if (clickToClose) {
+      onClose();
+    }
+  };
+  const iconElement = useMemo(() => {
+    if (icon) {
+      return typeof icon === "string" ? /* @__PURE__ */ jsx("span", { children: icon }) : icon;
+    }
+    return /* @__PURE__ */ jsx("span", { style: { color: typeColors[type] }, children: typeIcons[type] });
+  }, [icon, type]);
+  const notificationStyle = useMemo(() => {
+    const baseStyle = {
+      padding,
+      background,
+      borderRadius: "8px",
+      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+      border: `1px solid ${typeColors[type]}`,
+      cursor: clickToClose ? "pointer" : "default",
+      position: "relative",
+      overflow: "hidden"
+    };
+    if (fullWidth) {
+      baseStyle.width = "calc(100vw - 40px)";
+      baseStyle.maxWidth = "calc(100vw - 40px)";
+    } else {
+      baseStyle.width = typeof width === "number" ? `${width}px` : width;
+    }
+    return baseStyle;
+  }, [width, fullWidth, padding, background, type, clickToClose]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `aark-standard-notification ${customClass.popup || ""}`,
+      style: notificationStyle,
+      onClick: handleClick,
+      children: [
+        timer && timer > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              height: "3px",
+              background: typeColors[type],
+              animation: `aark-notification-progress ${timer}ms linear forwards`,
+              transformOrigin: "left"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.75rem" }, children: [
+          iconElement && /* @__PURE__ */ jsx("div", { className: `aark-notification-icon ${customClass.icon || ""}`, style: { fontSize: "1.25rem", flexShrink: 0, marginTop: "0.125rem" }, children: iconElement }),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+            title && /* @__PURE__ */ jsx("div", { className: `aark-notification-header ${customClass.header || ""}`, children: /* @__PURE__ */ jsx("h4", { className: `aark-notification-title ${customClass.title || ""}`, style: { margin: 0, fontSize: "0.875rem", fontWeight: "600", color: "#1f2937" }, children: title }) }),
+            /* @__PURE__ */ jsx("div", { className: `aark-notification-content ${customClass.content || ""}`, style: { marginTop: title ? "0.25rem" : 0 }, children: html ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: typeof html === "string" ? html : "" } }) : text ? /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "0.75rem", color: "#6b7280", lineHeight: "1.4" }, children: text }) : null })
+          ] }),
+          showCloseButton && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onClose();
+              },
+              className: `aark-notification-close ${customClass.closeButton || ""}`,
+              style: {
+                background: "none",
+                border: "none",
+                fontSize: "1rem",
+                color: "#9ca3af",
+                cursor: "pointer",
+                padding: 0,
+                lineHeight: 1,
+                flexShrink: 0
+              },
+              "aria-label": "Close notification",
+              children: "×"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes aark-notification-progress {
+            from {
+              transform: scaleX(1);
+            }
+            to {
+              transform: scaleX(0);
+            }
+          }
+        ` })
+      ]
+    }
+  );
+};
+const Notification = ({ config, onClose }) => {
+  const { content, props, options = {} } = config;
+  const {
+    position = "top-right",
+    showCloseIcon = true,
+    autoCloseTime = 5e3,
+    className = "",
+    preventEscClose = false
+  } = options;
+  useEffect(() => {
+    if (autoCloseTime && !props) {
+      const timer = setTimeout(onClose, autoCloseTime);
+      return () => clearTimeout(timer);
+    }
+  }, [autoCloseTime, onClose, props]);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && !preventEscClose) {
+        onClose();
+      }
+    };
+    if (!preventEscClose) {
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [onClose, preventEscClose]);
+  const handleCloseClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      onClose();
+    },
+    [onClose]
+  );
+  const contentClasses = `aark-notification-container ${position} ${className}`.trim();
+  const modalContainer = getModalRoot();
+  const getPositionStyles = () => {
+    const baseStyles = {
+      position: "fixed",
+      zIndex: 1e4,
+      margin: "1rem"
+    };
+    switch (position) {
+      case "top-left":
+        return { ...baseStyles, top: 0, left: 0 };
+      case "top-center":
+        return { ...baseStyles, top: 0, left: "50%", transform: "translateX(-50%)" };
+      case "top-right":
+        return { ...baseStyles, top: 0, right: 0 };
+      case "bottom-left":
+        return { ...baseStyles, bottom: 0, left: 0 };
+      case "bottom-center":
+        return { ...baseStyles, bottom: 0, left: "50%", transform: "translateX(-50%)" };
+      case "bottom-right":
+        return { ...baseStyles, bottom: 0, right: 0 };
+      default:
+        return { ...baseStyles, top: 0, right: 0 };
+    }
+  };
+  const renderContent = () => {
+    if (props) {
+      return /* @__PURE__ */ jsx("div", { className: "aark-notification-wrapper", children: /* @__PURE__ */ jsx(StandardNotification, { props, onClose }) });
+    } else if (content) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: contentClasses,
+          role: "alert",
+          "aria-live": "polite",
+          "aria-labelledby": "aark-notification-content",
+          children: [
+            showCloseIcon && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleCloseClick,
+                className: "aark-notification-close",
+                "aria-label": "Close notification",
+                type: "button",
+                children: "×"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { id: "aark-notification-body", className: "aark-notification-body", children: content })
+          ]
+        }
+      );
+    }
+    return null;
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { style: getPositionStyles(), children: renderContent() }),
+    modalContainer
+  );
+};
+const ModalProvider = () => {
+  const { isOpen: isOpen2, config, close: close2 } = useModal();
+  if (!isOpen2 || !config) {
+    return null;
+  }
+  if (config.mode === "modal") {
+    return /* @__PURE__ */ jsx(Modal, { config, onClose: close2 });
+  }
+  if (config.mode === "notification") {
+    return /* @__PURE__ */ jsx(Notification, { config, onClose: close2 });
+  }
+  return null;
+};
+const listeners = /* @__PURE__ */ new Set();
+let currentConfig = null;
+let root = null;
+function init() {
+  if (root) return;
+  const container = getModalRoot();
+  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 fireModal(contentOrProps, options) {
+  init();
+  let content;
+  let props;
+  if (contentOrProps && typeof contentOrProps === "object" && !("$$typeof" in contentOrProps) && !Array.isArray(contentOrProps)) {
+    props = contentOrProps;
+    content = void 0;
+  } else {
+    content = contentOrProps;
+    props = void 0;
+  }
+  const config = {
+    content,
+    props,
+    mode: "modal",
+    options: Object.assign(
+      {
+        position: "center",
+        showCloseIcon: true,
+        preventEscClose: false,
+        preventOverlayClose: false
+      },
+      options
+    )
+  };
+  currentConfig = config;
+  emit("open", config);
+}
+function fireNotification(contentOrProps, options) {
+  init();
+  let content;
+  let props;
+  if (contentOrProps && typeof contentOrProps === "object" && !("$$typeof" in contentOrProps) && !Array.isArray(contentOrProps)) {
+    props = contentOrProps;
+    content = void 0;
+  } else {
+    content = contentOrProps;
+    props = void 0;
+  }
+  const config = {
+    content,
+    props,
+    mode: "notification",
+    options: Object.assign(
+      {
+        position: "top-right",
+        showCloseIcon: true,
+        autoCloseTime: 5e3,
+        preventEscClose: false
+      },
+      options
+    )
+  };
+  currentConfig = config;
+  emit("open", config);
+}
+function fire(contentOrProps, options) {
+  fireModal(contentOrProps, options);
+}
+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 (root) {
+    root.unmount();
+    root = null;
+  }
+  cleanupModalRoot();
+}
+const modalManager = {
+  subscribe,
+  fire,
+  fireModal,
+  fireNotification,
+  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: (contentOrProps, options) => modalManager.fire(contentOrProps, options),
+  modal: (contentOrProps, options) => modalManager.fireModal(contentOrProps, options),
+  notification: (contentOrProps, options) => modalManager.fireNotification(contentOrProps, options),
+  close: () => modalManager.close(),
+  isOpen: () => modalManager.isOpen(),
+  closeAll: () => modalManager.closeAll(),
+  setTheme: (theme) => setAarkModalTheme(theme),
+  resetTheme: () => resetAarkModalTheme(),
+  getTheme: () => getAarkModalTheme()
+};
+export {
+  Modal,
+  ModalProvider,
+  Notification,
+  aark,
+  getAarkModalTheme,
+  resetAarkModalTheme,
+  setAarkModalTheme,
+  useModal
+};