aark-react-modalify 1.1.0 → 1.2.0

package/dist/{index.esm.js → index-no-styles.esm.js}

@@ -111,8 +111,132 @@ const Icon = memo(
   }
 );
 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, options = {} } = config;
+  const { content, props, options = {} } = config;
   const {
     position = "center",
     showCloseIcon = true,
@@ -147,8 +271,58 @@ const Modal = ({ config, onClose }) => {
     },
     [onClose]
   );
-  const contentClasses = `aark-modal-content ${position} ${className}`.trim();
-  const modalContainer = document.getElementById("aark-react-modalify-root") || document.body;
+  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",
@@ -159,41 +333,153 @@ const Modal = ({ config, onClose }) => {
         style: {
           position: "fixed",
           inset: 0,
-          zIndex: "var(--aark-modal-z)",
+          zIndex: 9999,
           background: "var(--aark-modal-overlay-bg)",
           backdropFilter: "blur(2px)",
-          animation: "fade-in var(--aark-anim)"
+          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: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: contentClasses,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": "aark-modal-content",
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              showCloseIcon && /* @__PURE__ */ jsx("header", { className: "aark-modal-header", children: /* @__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", { id: "aark-modal-content", className: "aark-modal-body", children: content })
-            ]
-          }
-        )
+        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, options = {} } = config;
+  const { content, props, options = {} } = config;
   const {
     position = "top-right",
     showCloseIcon = true,
@@ -202,11 +488,11 @@ const Notification = ({ config, onClose }) => {
     preventEscClose = false
   } = options;
   useEffect(() => {
-    if (autoCloseTime) {
+    if (autoCloseTime && !props) {
       const timer = setTimeout(onClose, autoCloseTime);
       return () => clearTimeout(timer);
     }
-  }, [autoCloseTime, onClose]);
+  }, [autoCloseTime, onClose, props]);
   useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape" && !preventEscClose) {
@@ -225,31 +511,62 @@ const Notification = ({ config, onClose }) => {
     },
     [onClose]
   );
-  const contentClasses = `aark-modal-content notification ${position} ${className}`.trim();
-  const modalContainer = document.getElementById("aark-react-modalify-root") || document.body;
+  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__ */ jsxs(
-      "div",
-      {
-        className: contentClasses,
-        role: "alert",
-        "aria-live": "polite",
-        "aria-labelledby": "aark-notification-content",
-        children: [
-          showCloseIcon && /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: handleCloseClick,
-              className: "aark-modal-close",
-              "aria-label": "Close notification",
-              type: "button",
-              children: "×"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { id: "aark-notification-content", className: "aark-modal-body", children: content })
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsx("div", { style: getPositionStyles(), children: renderContent() }),
     modalContainer
   );
 };
@@ -268,19 +585,12 @@ const ModalProvider = () => {
 };
 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);
-  if (container) {
-    root = createRoot(container);
-    root.render(createElement(ModalProvider));
-  }
+  if (root) return;
+  const container = getModalRoot();
+  root = createRoot(container);
+  root.render(createElement(ModalProvider));
 }
 function subscribe(listener) {
   listeners.add(listener);
@@ -290,10 +600,20 @@ function emit(type, config) {
   const event = { type, config };
   listeners.forEach((listener) => listener(event));
 }
-function fireModal(content, options) {
+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(
       {
@@ -308,10 +628,20 @@ function fireModal(content, options) {
   currentConfig = config;
   emit("open", config);
 }
-function fireNotification(content, options) {
+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(
       {
@@ -326,8 +656,8 @@ function fireNotification(content, options) {
   currentConfig = config;
   emit("open", config);
 }
-function fire(content, options) {
-  fireModal(content, options);
+function fire(contentOrProps, options) {
+  fireModal(contentOrProps, options);
 }
 function close() {
   if (currentConfig) {
@@ -346,11 +676,11 @@ function closeAll() {
   close();
 }
 function cleanup() {
-  if (container && container.parentNode) {
-    container.parentNode.removeChild(container);
-    container = null;
+  if (root) {
+    root.unmount();
     root = null;
   }
+  cleanupModalRoot();
 }
 const modalManager = {
   subscribe,
@@ -546,9 +876,9 @@ function getAarkModalTheme() {
   };
 }
 const aark = {
-  fire: (content, options) => modalManager.fire(content, options),
-  modal: (content, options) => modalManager.fireModal(content, options),
-  notification: (content, options) => modalManager.fireNotification(content, options),
+  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(),

package/dist/index.d.ts

@@ -1,5 +1,6 @@
+import "./assets/styles/aark-modal.css";
 export { default as aark } from "./logic/aark";
-export type { ModalOptions, NotificationOptions, ModalPosition, NotificationPosition, ModalMode, ModalConfig, NotificationConfig, ComponentConfig, ModalState, ModalEvent, ModalEventType, } from "./types";
+export type { ModalOptions, NotificationOptions, ModalPosition, NotificationPosition, ModalMode, ModalType, ModalProps, NotificationProps, ModalConfig, NotificationConfig, ComponentConfig, ModalState, ModalEvent, ModalEventType, } from "./types";
 export type { AarkModalTheme } from "./utils/theme";
 export { setAarkModalTheme, resetAarkModalTheme, getAarkModalTheme, } from "./utils/theme";
 export { useModal } from "./hooks/useModal";

package/dist/logic/ModalManager.d.ts

@@ -1,10 +1,10 @@
 import type { ReactNode } from "react";
-import type { ComponentConfig, ModalOptions, NotificationOptions, ModalEvent } from "../types";
+import type { ComponentConfig, ModalOptions, NotificationOptions, ModalEvent, ModalProps, NotificationProps } from "../types";
 type ModalListener = (event: ModalEvent) => void;
 declare function subscribe(listener: ModalListener): () => void;
-declare function fireModal(content: ReactNode, options?: ModalOptions): void;
-declare function fireNotification(content: ReactNode, options?: NotificationOptions): void;
-declare function fire(content: ReactNode, options?: ModalOptions): void;
+declare function fireModal(contentOrProps: ReactNode | ModalProps, options?: ModalOptions): void;
+declare function fireNotification(contentOrProps: ReactNode | NotificationProps, options?: NotificationOptions): void;
+declare function fire(contentOrProps: ReactNode | ModalProps, options?: ModalOptions): void;
 declare function close(): void;
 declare function isOpen(): boolean;
 declare function getCurrentConfig(): ComponentConfig | null;

package/dist/logic/aark.d.ts

@@ -1,10 +1,10 @@
 import type { ReactNode } from "react";
-import type { ModalOptions, NotificationOptions } from "../types";
+import type { ModalOptions, NotificationOptions, ModalProps, NotificationProps } from "../types";
 import type { AarkModalTheme } from "../utils/theme";
 declare const aark: {
-    fire: (content: ReactNode, options?: ModalOptions) => void;
-    modal: (content: ReactNode, options?: ModalOptions) => void;
-    notification: (content: ReactNode, options?: NotificationOptions) => void;
+    fire: (contentOrProps: ReactNode | ModalProps, options?: ModalOptions) => void;
+    modal: (contentOrProps: ReactNode | ModalProps, options?: ModalOptions) => void;
+    notification: (contentOrProps: ReactNode | NotificationProps, options?: NotificationOptions) => void;
     close: () => void;
     isOpen: () => boolean;
     closeAll: () => void;