aark-react-modalify 1.0.0 → 1.0.2

package/README.md

@@ -213,7 +213,7 @@ npm run lint
 
 ## 📄 License
 
-MIT License - see the [LICENSE](LICENSE) file for details.
+Licensed under MIT
 
 ## 🤝 Contributing
 

package/dist/ModalProvider-BAlPeDjm.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { useModal, ModalRenderer } from "./index.esm.js";
+const ModalProvider = () => {
+  const { isOpen, config, close } = useModal();
+  if (!isOpen || !config) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ModalRenderer, { config, onClose: close });
+};
+export {
+  ModalProvider as default
+};

package/dist/ModalProvider-DA6KcJdZ.cjs

@@ -0,0 +1,5 @@
+"use strict"
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})
+const e=require("react/jsx-runtime"),s=require("./index.cjs.js")
+exports.default=()=>{const{isOpen:o,config:r,close:n}=s.useModal()
+return o&&r?e.jsx(s.ModalRenderer,{config:r,onClose:n}):null}

package/dist/aark-react-modalify.css

@@ -1 +1 @@
-:root{--aark-modal-overlay-bg: rgba(0, 0, 0, .5);--aark-modal-overlay-blur: 2px;--aark-modal-bg: #ffffff;--aark-modal-border-radius: 8px;--aark-modal-shadow: 0 10px 25px rgba(0, 0, 0, .15);--aark-modal-padding: 16px;--aark-modal-z-index: 9999;--aark-modal-content-z-index: 10000;--aark-modal-close-color: #666666;--aark-modal-close-hover-bg: #f5f5f5;--aark-modal-close-hover-color: #333333;--aark-modal-close-focus-outline: #007bff;--aark-modal-animation-duration: .2s;--aark-modal-fade-duration: .15s;--aark-custom-overlay-bg: rgba(0, 0, 0, .8);--aark-custom-overlay-blur: 5px;--aark-custom-modal-gradient-start: #667eea;--aark-custom-modal-gradient-end: #764ba2;--aark-custom-modal-text-color: #ffffff;--aark-custom-modal-shadow: 0 20px 40px rgba(0, 0, 0, .3);--aark-custom-modal-close-color: rgba(255, 255, 255, .8);--aark-custom-modal-close-hover-bg: rgba(255, 255, 255, .2);--aark-custom-modal-close-hover-color: #ffffff}.aark-modal-container{position:fixed;inset:0;z-index:var(--aark-modal-z-index)}.aark-modal-container.notification{pointer-events:none}.aark-modal-overlay{position:absolute;inset:0;background-color:var(--aark-modal-overlay-bg);-webkit-backdrop-filter:blur(var(--aark-modal-overlay-blur));backdrop-filter:blur(var(--aark-modal-overlay-blur))}.custom-overlay{background-color:var(--aark-custom-overlay-bg)!important;-webkit-backdrop-filter:blur(var(--aark-custom-overlay-blur))!important;backdrop-filter:blur(var(--aark-custom-overlay-blur))!important}.aark-modal-content{position:fixed;background-color:var(--aark-modal-bg);border-radius:var(--aark-modal-border-radius);box-shadow:var(--aark-modal-shadow);padding:var(--aark-modal-padding);z-index:var(--aark-modal-content-z-index);max-width:90vw;max-height:90vh;overflow:auto}.aark-modal-content.notification{pointer-events:auto}.aark-modal-content.custom-modal{background:linear-gradient(135deg,var(--aark-custom-modal-gradient-start) 0%,var(--aark-custom-modal-gradient-end) 100%)!important;color:var(--aark-custom-modal-text-color)!important;border:none!important;box-shadow:var(--aark-custom-modal-shadow)!important}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center{top:20px;left:50%;transform:translate(-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:translate(-50%)}.aark-modal-close{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--aark-modal-close-color);cursor:pointer;border-radius:50%;font-size:14px;line-height:1;transition:all var(--aark-modal-animation-duration) ease}.aark-modal-close:hover{background-color:var(--aark-modal-close-hover-bg);color:var(--aark-modal-close-hover-color)}.aark-modal-close:focus{outline:2px solid var(--aark-modal-close-focus-outline);outline-offset:2px}.aark-modal-content.custom-modal .aark-modal-close{color:var(--aark-custom-modal-close-color)}.aark-modal-content.custom-modal .aark-modal-close:hover{background-color:var(--aark-custom-modal-close-hover-bg);color:var(--aark-custom-modal-close-hover-color)}.aark-modal-body{padding-top:8px}.aark-modal-container{animation:aark-modal-fade-in var(--aark-modal-fade-duration) ease-out}.aark-modal-content{animation:aark-modal-slide-in var(--aark-modal-animation-duration) ease-out}@keyframes aark-modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes aark-modal-slide-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.aark-modal-content.top-center{animation:aark-modal-slide-down var(--aark-modal-animation-duration) ease-out}.aark-modal-content.top-right,.aark-modal-content.bottom-right{animation:aark-modal-slide-left var(--aark-modal-animation-duration) ease-out}.aark-modal-content.bottom-center{animation:aark-modal-slide-up var(--aark-modal-animation-duration) ease-out}@keyframes aark-modal-slide-down{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes aark-modal-slide-left{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}@keyframes aark-modal-slide-up{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-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:translate(-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}}
+: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:translate(-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:translate(-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:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes l{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}@keyframes u{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-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:translate(-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}}

package/dist/index.cjs.js

@@ -1 +1,20 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CvIFkjib.cjs");exports.ModalRenderer=e.ModalRenderer;exports.aark=e.aark;exports.getAarkModalTheme=e.getAarkModalTheme;exports.resetAarkModalTheme=e.resetAarkModalTheme;exports.setAarkModalTheme=e.setAarkModalTheme;exports.useModal=e.useModal;
+"use strict"
+function o(o,a){const e={type:o,config:a}
+s.forEach(o=>o(e))}function a(){m&&(o("beforeClose",m),m=null,o("close"))}function e(o){const a=document.documentElement
+o.overlayBackground&&a.style.setProperty("--aark-modal-overlay-bg",o.overlayBackground),o.overlayBlur&&a.style.setProperty("--aark-modal-overlay-blur",o.overlayBlur),o.modalBackground&&a.style.setProperty("--aark-modal-bg",o.modalBackground),o.modalBorderRadius&&a.style.setProperty("--aark-modal-border-radius",o.modalBorderRadius),o.modalShadow&&a.style.setProperty("--aark-modal-shadow",o.modalShadow),o.modalPadding&&a.style.setProperty("--aark-modal-padding",o.modalPadding),o.modalZIndex&&a.style.setProperty("--aark-modal-z-index",o.modalZIndex.toString()),o.modalContentZIndex&&a.style.setProperty("--aark-modal-content-z-index",o.modalContentZIndex.toString()),o.closeButtonColor&&a.style.setProperty("--aark-modal-close-color",o.closeButtonColor),o.closeButtonHoverBackground&&a.style.setProperty("--aark-modal-close-hover-bg",o.closeButtonHoverBackground),o.closeButtonHoverColor&&a.style.setProperty("--aark-modal-close-hover-color",o.closeButtonHoverColor),o.closeButtonFocusOutline&&a.style.setProperty("--aark-modal-close-focus-outline",o.closeButtonFocusOutline),o.animationDuration&&a.style.setProperty("--aark-modal-animation-duration",o.animationDuration),o.fadeDuration&&a.style.setProperty("--aark-modal-fade-duration",o.fadeDuration),o.customOverlayBackground&&a.style.setProperty("--aark-custom-overlay-bg",o.customOverlayBackground),o.customOverlayBlur&&a.style.setProperty("--aark-custom-overlay-blur",o.customOverlayBlur),o.customModalGradientStart&&a.style.setProperty("--aark-custom-modal-gradient-start",o.customModalGradientStart),o.customModalGradientEnd&&a.style.setProperty("--aark-custom-modal-gradient-end",o.customModalGradientEnd),o.customModalTextColor&&a.style.setProperty("--aark-custom-modal-text-color",o.customModalTextColor),o.customModalShadow&&a.style.setProperty("--aark-custom-modal-shadow",o.customModalShadow),o.customModalCloseColor&&a.style.setProperty("--aark-custom-modal-close-color",o.customModalCloseColor),o.customModalCloseHoverBackground&&a.style.setProperty("--aark-custom-modal-close-hover-bg",o.customModalCloseHoverBackground),o.customModalCloseHoverColor&&a.style.setProperty("--aark-custom-modal-close-hover-color",o.customModalCloseHoverColor)}function r(){const o=document.documentElement;["--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"].forEach(a=>{o.style.removeProperty(a)})}function l(){const o=document.documentElement,a=getComputedStyle(o)
+return{overlayBackground:a.getPropertyValue("--aark-modal-overlay-bg").trim(),overlayBlur:a.getPropertyValue("--aark-modal-overlay-blur").trim(),modalBackground:a.getPropertyValue("--aark-modal-bg").trim(),modalBorderRadius:a.getPropertyValue("--aark-modal-border-radius").trim(),modalShadow:a.getPropertyValue("--aark-modal-shadow").trim(),modalPadding:a.getPropertyValue("--aark-modal-padding").trim(),modalZIndex:parseInt(a.getPropertyValue("--aark-modal-z-index").trim())||void 0,modalContentZIndex:parseInt(a.getPropertyValue("--aark-modal-content-z-index").trim())||void 0,closeButtonColor:a.getPropertyValue("--aark-modal-close-color").trim(),closeButtonHoverBackground:a.getPropertyValue("--aark-modal-close-hover-bg").trim(),closeButtonHoverColor:a.getPropertyValue("--aark-modal-close-hover-color").trim(),closeButtonFocusOutline:a.getPropertyValue("--aark-modal-close-focus-outline").trim(),animationDuration:a.getPropertyValue("--aark-modal-animation-duration").trim(),fadeDuration:a.getPropertyValue("--aark-modal-fade-duration").trim(),customOverlayBackground:a.getPropertyValue("--aark-custom-overlay-bg").trim(),customOverlayBlur:a.getPropertyValue("--aark-custom-overlay-blur").trim(),customModalGradientStart:a.getPropertyValue("--aark-custom-modal-gradient-start").trim(),customModalGradientEnd:a.getPropertyValue("--aark-custom-modal-gradient-end").trim(),customModalTextColor:a.getPropertyValue("--aark-custom-modal-text-color").trim(),customModalShadow:a.getPropertyValue("--aark-custom-modal-shadow").trim(),customModalCloseColor:a.getPropertyValue("--aark-custom-modal-close-color").trim(),customModalCloseHoverBackground:a.getPropertyValue("--aark-custom-modal-close-hover-bg").trim(),customModalCloseHoverColor:a.getPropertyValue("--aark-custom-modal-close-hover-color").trim()}}Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})
+const t=require("react"),n=require("react-dom/client"),d=require("react/jsx-runtime"),c=require("react-dom"),s=new Set
+let m=null,u=null,i=null
+const k={subscribe:function(o){return s.add(o),()=>s.delete(o)},fire:function(a,e){u||(u=document.createElement("div"),u.id="aark-react-modalify-root",u.style.position="relative",u.style.zIndex="9999",document.body.appendChild(u),Promise.resolve().then(()=>require("./ModalProvider-DA6KcJdZ.cjs")).then(({default:o})=>{u&&(i=n.createRoot(u),i.render(t.createElement(o)))}))
+const r={content:a,options:Object.assign({position:"center",mode:"modal",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},e)}
+m=r,o("open",r)},close:a,isOpen:function(){return null!==m},getCurrentConfig:function(){return m},closeAll:function(){a()},cleanup:function(){u&&u.parentNode&&(u.parentNode.removeChild(u),u=null,i=null)}},v={fire:(o,a)=>k.fire(o,a),close:()=>k.close(),isOpen:()=>k.isOpen(),closeAll:()=>k.closeAll(),setTheme:o=>e(o),resetTheme:()=>r(),getTheme:()=>l()}
+exports.ModalRenderer=({config:o,onClose:a})=>{const{content:e,options:r={}}=o,{position:l="center",mode:n="modal",showCloseIcon:s=!0,autoCloseTime:m,className:u="",overlayClassName:i="",preventEscClose:k=!1,preventOverlayClose:v=!1}=r
+t.useEffect(()=>{if(m&&"notification"===n){const o=setTimeout(a,m)
+return()=>clearTimeout(o)}},[m,n,a]),t.useEffect(()=>{const o=o=>{"Escape"!==o.key||k||a()}
+if(!k)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,k])
+const g=t.useCallback(o=>{o.target!==o.currentTarget||v||a()},[a,v]),b=t.useCallback(o=>{o.stopPropagation(),a()},[a]),f="aark-modal-container "+("notification"===n?"notification":""),h=`aark-modal-content ${l} ${"notification"===n?"notification":""} ${u}`.trim(),p=("aark-modal-overlay "+i).trim()
+return c.createPortal(d.jsxs("div",{className:f,children:["modal"===n&&d.jsx("div",{className:p,onClick:g,"aria-hidden":"true"}),d.jsxs("div",{className:h,role:"dialog","aria-modal":"true","aria-labelledby":"aark-modal-content",children:[s&&d.jsx("button",{onClick:b,className:"aark-modal-close","aria-label":"Close modal",type:"button",children:"×"}),d.jsx("div",{id:"aark-modal-content",className:"aark-modal-body",children:e})]})]}),document.body)},exports.aark=v,exports.getAarkModalTheme=l,exports.resetAarkModalTheme=r,exports.setAarkModalTheme=e,exports.useModal=function(){const[o,a]=t.useState(!1),[e,r]=t.useState(null),l=t.useCallback(()=>{k.close()},[])
+return t.useEffect(()=>{const o=k.subscribe(o=>{switch(o.type){case"open":a(!0),r(o.config||null)
+break
+case"close":a(!1),r(null)}})
+return a(k.isOpen()),r(k.getCurrentConfig()),o},[]),{isOpen:o,config:e,close:l}}

package/dist/index.esm.js

@@ -1,9 +1,392 @@
-import { M as r, a as s, g as o, r as d, s as M, u as l } from "./index-DIT0k89J.js";
+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 ModalRenderer = ({ config, onClose }) => {
+  const { content, options = {} } = config;
+  const {
+    position = "center",
+    mode = "modal",
+    showCloseIcon = true,
+    autoCloseTime,
+    className = "",
+    overlayClassName = "",
+    preventEscClose = false,
+    preventOverlayClose = false
+  } = options;
+  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();
+  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 })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+};
 export {
-  r as ModalRenderer,
-  s as aark,
-  o as getAarkModalTheme,
-  d as resetAarkModalTheme,
-  M as setAarkModalTheme,
-  l as useModal
+  ModalRenderer,
+  aark,
+  getAarkModalTheme,
+  resetAarkModalTheme,
+  setAarkModalTheme,
+  useModal
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "aark-react-modalify",
-	"version": "1.0.0",
-	"description": "A simple, global modal/notification library for React with TypeScript and TailwindCSS.",
+	"version": "1.0.2",
+	"description": "A lightweight, flexible React modal and notification library with TypeScript support. Features automatic DOM mounting, customizable styling, and a simple imperative API for displaying modals, alerts, confirmations, and toast notifications.",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.esm.js",
 	"types": "dist/index.d.ts",
@@ -15,7 +15,7 @@
 	},
 	"files": [
 		"dist",
-		"src/styles/aark-modal.css",
+		"src/assets/styles/aark-modal.css",
 		"README.md",
 		"LICENSE"
 	],
@@ -28,7 +28,8 @@
 		"prepare": "npm run build",
 		"lint": "eslint src --ext .ts,.tsx",
 		"lint:fix": "eslint src --ext .ts,.tsx --fix",
-		"typecheck": "tsc --noEmit"
+		"typecheck": "tsc --noEmit",
+		"analyze": "npm run build && npx bundlesize"
 	},
 	"keywords": [
 		"react",
@@ -37,8 +38,13 @@
 		"toast",
 		"popup",
 		"dialog",
+		"alert",
+		"confirm",
 		"typescript",
-		"tailwindcss"
+		"imperative",
+		"lightweight",
+		"flexible",
+		"customizable"
 	],
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -46,9 +52,11 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.32.0",
+		"@types/node": "^24.2.1",
 		"@types/react": "^19.1.9",
 		"@types/react-dom": "^19.1.7",
 		"@vitejs/plugin-react": "^4.7.0",
+		"cssnano": "^7.1.0",
 		"eslint": "^9.32.0",
 		"eslint-plugin-react-hooks": "^5.2.0",
 		"eslint-plugin-react-refresh": "^0.4.20",
@@ -56,6 +64,7 @@
 		"react": "^19.1.1",
 		"react-dom": "^19.1.1",
 		"rimraf": "^6.0.1",
+		"terser": "^5.43.1",
 		"typescript": "~5.8.3",
 		"typescript-eslint": "^8.39.0",
 		"vite": "^7.1.0"