aark-react-modalify 1.0.0 → 1.0.1

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-B_DFPtUh.cjs

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

package/dist/ModalProvider-Bxtotq_Y.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+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/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-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);backdrop-filter:blur(var(--aark-modal-overlay-blur))}.custom-overlay{background-color:var(--aark-custom-overlay-bg)!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}}

package/dist/index.cjs.js

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

package/dist/index.esm.js

@@ -1,9 +1,486 @@
-import { M as r, a as s, g as o, r as d, s as M, u as l } from "./index-DIT0k89J.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import React, { useState, useCallback, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+class ModalManager {
+  constructor() {
+    __publicField(this, "listeners", /* @__PURE__ */ new Set());
+    __publicField(this, "currentConfig", null);
+    __publicField(this, "container", null);
+    __publicField(this, "root", null);
+  }
+  /**
+   * Initialize the modal system
+   */
+  init() {
+    if (this.container) return;
+    this.container = document.createElement("div");
+    this.container.id = "aark-react-modalify-root";
+    this.container.style.position = "relative";
+    this.container.style.zIndex = "9999";
+    document.body.appendChild(this.container);
+    import("./ModalProvider-Bxtotq_Y.js").then(({ default: ModalProvider }) => {
+      if (this.container) {
+        this.root = createRoot(this.container);
+        this.root.render(React.createElement(ModalProvider));
+      }
+    });
+  }
+  /**
+   * Subscribe to modal events
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  /**
+   * Emit modal events to all listeners
+   */
+  emit(type, config) {
+    const event = { type, config };
+    this.listeners.forEach((listener) => listener(event));
+  }
+  /**
+   * Open a modal with content and options
+   */
+  fire(content, options) {
+    this.init();
+    const config = {
+      content,
+      options: __spreadValues({
+        position: "center",
+        mode: "modal",
+        showCloseIcon: true,
+        preventEscClose: false,
+        preventOverlayClose: false
+      }, options)
+    };
+    this.currentConfig = config;
+    this.emit("open", config);
+  }
+  /**
+   * Close the current modal
+   */
+  close() {
+    if (this.currentConfig) {
+      this.emit("beforeClose", this.currentConfig);
+      this.currentConfig = null;
+      this.emit("close");
+    }
+  }
+  /**
+   * Check if a modal is currently open
+   */
+  isOpen() {
+    return this.currentConfig !== null;
+  }
+  /**
+   * Get the current modal configuration
+   */
+  getCurrentConfig() {
+    return this.currentConfig;
+  }
+  /**
+   * Force close all modals (useful for cleanup)
+   */
+  closeAll() {
+    this.close();
+  }
+  /**
+   * Cleanup the modal system (useful for testing or when unmounting the app)
+   */
+  cleanup() {
+    if (this.container && this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+      this.container = null;
+      this.root = null;
+    }
+  }
+}
+const modalManager = new ModalManager();
+function setAarkModalTheme(theme) {
+  const root = document.documentElement;
+  if (theme.overlayBackground) {
+    root.style.setProperty("--aark-modal-overlay-bg", theme.overlayBackground);
+  }
+  if (theme.overlayBlur) {
+    root.style.setProperty("--aark-modal-overlay-blur", theme.overlayBlur);
+  }
+  if (theme.modalBackground) {
+    root.style.setProperty("--aark-modal-bg", theme.modalBackground);
+  }
+  if (theme.modalBorderRadius) {
+    root.style.setProperty(
+      "--aark-modal-border-radius",
+      theme.modalBorderRadius
+    );
+  }
+  if (theme.modalShadow) {
+    root.style.setProperty("--aark-modal-shadow", theme.modalShadow);
+  }
+  if (theme.modalPadding) {
+    root.style.setProperty("--aark-modal-padding", theme.modalPadding);
+  }
+  if (theme.modalZIndex) {
+    root.style.setProperty(
+      "--aark-modal-z-index",
+      theme.modalZIndex.toString()
+    );
+  }
+  if (theme.modalContentZIndex) {
+    root.style.setProperty(
+      "--aark-modal-content-z-index",
+      theme.modalContentZIndex.toString()
+    );
+  }
+  if (theme.closeButtonColor) {
+    root.style.setProperty("--aark-modal-close-color", theme.closeButtonColor);
+  }
+  if (theme.closeButtonHoverBackground) {
+    root.style.setProperty(
+      "--aark-modal-close-hover-bg",
+      theme.closeButtonHoverBackground
+    );
+  }
+  if (theme.closeButtonHoverColor) {
+    root.style.setProperty(
+      "--aark-modal-close-hover-color",
+      theme.closeButtonHoverColor
+    );
+  }
+  if (theme.closeButtonFocusOutline) {
+    root.style.setProperty(
+      "--aark-modal-close-focus-outline",
+      theme.closeButtonFocusOutline
+    );
+  }
+  if (theme.animationDuration) {
+    root.style.setProperty(
+      "--aark-modal-animation-duration",
+      theme.animationDuration
+    );
+  }
+  if (theme.fadeDuration) {
+    root.style.setProperty("--aark-modal-fade-duration", theme.fadeDuration);
+  }
+  if (theme.customOverlayBackground) {
+    root.style.setProperty(
+      "--aark-custom-overlay-bg",
+      theme.customOverlayBackground
+    );
+  }
+  if (theme.customOverlayBlur) {
+    root.style.setProperty(
+      "--aark-custom-overlay-blur",
+      theme.customOverlayBlur
+    );
+  }
+  if (theme.customModalGradientStart) {
+    root.style.setProperty(
+      "--aark-custom-modal-gradient-start",
+      theme.customModalGradientStart
+    );
+  }
+  if (theme.customModalGradientEnd) {
+    root.style.setProperty(
+      "--aark-custom-modal-gradient-end",
+      theme.customModalGradientEnd
+    );
+  }
+  if (theme.customModalTextColor) {
+    root.style.setProperty(
+      "--aark-custom-modal-text-color",
+      theme.customModalTextColor
+    );
+  }
+  if (theme.customModalShadow) {
+    root.style.setProperty(
+      "--aark-custom-modal-shadow",
+      theme.customModalShadow
+    );
+  }
+  if (theme.customModalCloseColor) {
+    root.style.setProperty(
+      "--aark-custom-modal-close-color",
+      theme.customModalCloseColor
+    );
+  }
+  if (theme.customModalCloseHoverBackground) {
+    root.style.setProperty(
+      "--aark-custom-modal-close-hover-bg",
+      theme.customModalCloseHoverBackground
+    );
+  }
+  if (theme.customModalCloseHoverColor) {
+    root.style.setProperty(
+      "--aark-custom-modal-close-hover-color",
+      theme.customModalCloseHoverColor
+    );
+  }
+}
+function resetAarkModalTheme() {
+  const root = 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) => {
+    root.style.removeProperty(property);
+  });
+}
+function getAarkModalTheme() {
+  const root = document.documentElement;
+  const computedStyle = getComputedStyle(root);
+  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 = class _Aark {
+  constructor() {
+  }
+  /**
+   * Get the singleton instance of Aark
+   */
+  static getInstance() {
+    if (!_Aark.instance) {
+      _Aark.instance = new _Aark();
+    }
+    return _Aark.instance;
+  }
+  /**
+   * Fire/open a modal with content and optional configuration
+   * @param content - React component or element to render in modal
+   * @param options - Optional configuration for modal behavior and styling
+   */
+  fire(content, options) {
+    modalManager.fire(content, options);
+  }
+  /**
+   * Close the currently open modal
+   */
+  close() {
+    modalManager.close();
+  }
+  /**
+   * Check if a modal is currently open
+   */
+  isOpen() {
+    return modalManager.isOpen();
+  }
+  /**
+   * Close all modals (alias for close since only one modal can be open at a time)
+   */
+  closeAll() {
+    modalManager.closeAll();
+  }
+  /**
+   * Set custom theme for AARK modals
+   */
+  setTheme(theme) {
+    setAarkModalTheme(theme);
+  }
+  /**
+   * Reset theme to default values
+   */
+  resetTheme() {
+    resetAarkModalTheme();
+  }
+  /**
+   * Get current theme values
+   */
+  getTheme() {
+    return getAarkModalTheme();
+  }
+  /**
+   * Destroy the singleton instance (useful for testing)
+   */
+  static destroy() {
+    _Aark.instance = null;
+  }
+};
+__publicField(_Aark, "instance", null);
+let Aark = _Aark;
+const aark = Aark.getInstance();
+function useModal() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [config, setConfig] = useState(null);
+  const close = 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,
+    config,
+    close
+  };
+}
+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.1",
+	"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,6 @@
 	},
 	"files": [
 		"dist",
-		"src/styles/aark-modal.css",
 		"README.md",
 		"LICENSE"
 	],
@@ -28,7 +27,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 +37,13 @@
 		"toast",
 		"popup",
 		"dialog",
+		"alert",
+		"confirm",
 		"typescript",
-		"tailwindcss"
+		"imperative",
+		"lightweight",
+		"flexible",
+		"customizable"
 	],
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -46,6 +51,7 @@
 	},
 	"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",
@@ -56,6 +62,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"

package/dist/ModalProvider-ComHxfXZ.js

@@ -1,9 +0,0 @@
-import { u as s, j as n, M as t } from "./index-DIT0k89J.js";
-import "react";
-const i = () => {
-  const { isOpen: e, config: o, close: r } = s();
-  return !e || !o ? null : /* @__PURE__ */ n.jsx(t, { config: o, onClose: r });
-};
-export {
-  i as default
-};

package/dist/ModalProvider-zcVXiybl.cjs

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