aark-react-modalify 1.0.4 → 1.0.5

package/README.md

@@ -126,7 +126,7 @@ Get current theme values.
 
 ```typescript
 interface ModalOptions {
-	mode?: "modal" | "drawer" | "popup";
+	mode?: "modal" | "notification" | "popup";
 	position?: "center" | "top" | "bottom" | "left" | "right";
 	showCloseIcon?: boolean;
 	closeOnOverlayClick?: boolean;

package/dist/components/ModalRenderer.d.ts

@@ -1,6 +1,5 @@
 import type { FC } from 'react';
 import type { ModalConfig } from '../types';
-import '../assets/styles/aark-modal.css';
 interface ModalRendererProps {
     config: ModalConfig;
     onClose: () => void;

package/dist/index.cjs.js

@@ -1,20 +1,23 @@
 "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)
+function a(a,o){const r={type:a,config:o}
+m.forEach(a=>a(r))}function o(){s&&(a("beforeClose",s),s=null,a("close"))}function r(a){const o=document.documentElement
+a.overlayBackground&&o.style.setProperty("--aark-modal-overlay-bg",a.overlayBackground),a.overlayBlur&&o.style.setProperty("--aark-modal-overlay-blur",a.overlayBlur),a.modalBackground&&o.style.setProperty("--aark-modal-bg",a.modalBackground),a.modalBorderRadius&&o.style.setProperty("--aark-modal-border-radius",a.modalBorderRadius),a.modalShadow&&o.style.setProperty("--aark-modal-shadow",a.modalShadow),a.modalPadding&&o.style.setProperty("--aark-modal-padding",a.modalPadding),a.modalZIndex&&o.style.setProperty("--aark-modal-z-index",a.modalZIndex.toString()),a.modalContentZIndex&&o.style.setProperty("--aark-modal-content-z-index",a.modalContentZIndex.toString()),a.closeButtonColor&&o.style.setProperty("--aark-modal-close-color",a.closeButtonColor),a.closeButtonHoverBackground&&o.style.setProperty("--aark-modal-close-hover-bg",a.closeButtonHoverBackground),a.closeButtonHoverColor&&o.style.setProperty("--aark-modal-close-hover-color",a.closeButtonHoverColor),a.closeButtonFocusOutline&&o.style.setProperty("--aark-modal-close-focus-outline",a.closeButtonFocusOutline),a.animationDuration&&o.style.setProperty("--aark-modal-animation-duration",a.animationDuration),a.fadeDuration&&o.style.setProperty("--aark-modal-fade-duration",a.fadeDuration),a.customOverlayBackground&&o.style.setProperty("--aark-custom-overlay-bg",a.customOverlayBackground),a.customOverlayBlur&&o.style.setProperty("--aark-custom-overlay-blur",a.customOverlayBlur),a.customModalGradientStart&&o.style.setProperty("--aark-custom-modal-gradient-start",a.customModalGradientStart),a.customModalGradientEnd&&o.style.setProperty("--aark-custom-modal-gradient-end",a.customModalGradientEnd),a.customModalTextColor&&o.style.setProperty("--aark-custom-modal-text-color",a.customModalTextColor),a.customModalShadow&&o.style.setProperty("--aark-custom-modal-shadow",a.customModalShadow),a.customModalCloseColor&&o.style.setProperty("--aark-custom-modal-close-color",a.customModalCloseColor),a.customModalCloseHoverBackground&&o.style.setProperty("--aark-custom-modal-close-hover-bg",a.customModalCloseHoverBackground),a.customModalCloseHoverColor&&o.style.setProperty("--aark-custom-modal-close-hover-color",a.customModalCloseHoverColor)}function t(){const a=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(o=>{a.style.removeProperty(o)})}function e(){const a=document.documentElement,o=getComputedStyle(a)
+return{overlayBackground:o.getPropertyValue("--aark-modal-overlay-bg").trim(),overlayBlur:o.getPropertyValue("--aark-modal-overlay-blur").trim(),modalBackground:o.getPropertyValue("--aark-modal-bg").trim(),modalBorderRadius:o.getPropertyValue("--aark-modal-border-radius").trim(),modalShadow:o.getPropertyValue("--aark-modal-shadow").trim(),modalPadding:o.getPropertyValue("--aark-modal-padding").trim(),modalZIndex:parseInt(o.getPropertyValue("--aark-modal-z-index").trim())||void 0,modalContentZIndex:parseInt(o.getPropertyValue("--aark-modal-content-z-index").trim())||void 0,closeButtonColor:o.getPropertyValue("--aark-modal-close-color").trim(),closeButtonHoverBackground:o.getPropertyValue("--aark-modal-close-hover-bg").trim(),closeButtonHoverColor:o.getPropertyValue("--aark-modal-close-hover-color").trim(),closeButtonFocusOutline:o.getPropertyValue("--aark-modal-close-focus-outline").trim(),animationDuration:o.getPropertyValue("--aark-modal-animation-duration").trim(),fadeDuration:o.getPropertyValue("--aark-modal-fade-duration").trim(),customOverlayBackground:o.getPropertyValue("--aark-custom-overlay-bg").trim(),customOverlayBlur:o.getPropertyValue("--aark-custom-overlay-blur").trim(),customModalGradientStart:o.getPropertyValue("--aark-custom-modal-gradient-start").trim(),customModalGradientEnd:o.getPropertyValue("--aark-custom-modal-gradient-end").trim(),customModalTextColor:o.getPropertyValue("--aark-custom-modal-text-color").trim(),customModalShadow:o.getPropertyValue("--aark-custom-modal-shadow").trim(),customModalCloseColor:o.getPropertyValue("--aark-custom-modal-close-color").trim(),customModalCloseHoverBackground:o.getPropertyValue("--aark-custom-modal-close-hover-bg").trim(),customModalCloseHoverColor:o.getPropertyValue("--aark-custom-modal-close-hover-color").trim()}}Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})
+const l=require("react"),n=require("react-dom/client"),d=require("react/jsx-runtime"),c=require("react-dom"),m=new Set
+let s=null,i=null,u=null
+const k={subscribe:function(a){return m.add(a),()=>m.delete(a)},fire:function(o,r){i||(i=document.createElement("div"),i.id="aark-react-modalify-root",i.style.position="relative",i.style.zIndex="9999",document.body.appendChild(i),Promise.resolve().then(()=>require("./ModalProvider-DA6KcJdZ.cjs")).then(({default:a})=>{i&&(u=n.createRoot(i),u.render(l.createElement(a)))}))
+const t={content:o,options:Object.assign({position:"center",mode:"modal",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},r)}
+s=t,a("open",t)},close:o,isOpen:function(){return null!==s},getCurrentConfig:function(){return s},closeAll:function(){o()},cleanup:function(){i&&i.parentNode&&(i.parentNode.removeChild(i),i=null,u=null)}},p={fire:(a,o)=>k.fire(a,o),close:()=>k.close(),isOpen:()=>k.isOpen(),closeAll:()=>k.closeAll(),setTheme:a=>r(a),resetTheme:()=>t(),getTheme:()=>e()}
+exports.ModalRenderer=({config:a,onClose:o})=>{const{content:r,options:t={}}=a,{position:e="center",mode:n="modal",showCloseIcon:m=!0,autoCloseTime:s,className:i="",overlayClassName:u="",preventEscClose:k=!1,preventOverlayClose:p=!1}=t
+l.useEffect(()=>{((a,o)=>{if("undefined"==typeof document)return
+if(document.getElementById(o))return
+const r=document.createElement("style")
+r.id=o,r.innerHTML=":root{--aark-modal-overlay-bg:rgba(0,0,0,.5);--aark-modal-bg:#fff;--aark-modal-radius:8px;--aark-modal-shadow:0 10px 25px rgba(0,0,0,.15);--aark-modal-pad:16px;--aark-modal-z:9999;--aark-close-color:#666;--aark-close-hover:#f5f5f5;--aark-anim:.2s}.aark-modal-container{position:fixed;inset:0;z-index:var(--aark-modal-z)}.aark-modal-container.notification{pointer-events:none}.aark-modal-overlay{position:absolute;inset:0;background:var(--aark-modal-overlay-bg);backdrop-filter:blur(2px)}.aark-modal-content{position:fixed;background:var(--aark-modal-bg);border-radius:var(--aark-modal-radius);box-shadow:var(--aark-modal-shadow);padding:var(--aark-modal-pad);z-index:calc(var(--aark-modal-z) + 1);max-width:90vw;max-height:90vh;overflow:auto}.aark-modal-content.notification{pointer-events:auto}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center{top:20px;left:50%;transform:translateX(-50%)}.aark-modal-content.top-right{top:20px;right:20px}.aark-modal-content.bottom-right{bottom:20px;right:20px}.aark-modal-content.bottom-center{bottom:20px;left:50%;transform:translateX(-50%)}.aark-modal-close{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:0;border:0;color:var(--aark-close-color);cursor:pointer;border-radius:50%;font-size:14px;line-height:1;transition:all var(--aark-anim)}.aark-modal-close:hover{background:var(--aark-close-hover);color:#333}.aark-modal-close:focus{outline:2px solid #007bff;outline-offset:2px}.aark-modal-body{padding-top:8px}.aark-modal-container{animation:f var(--aark-anim)}.aark-modal-content{animation:s var(--aark-anim)}@keyframes f{0%{opacity:0}to{opacity:1}}@keyframes s{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.aark-modal-content.top-center{animation:d var(--aark-anim)}.aark-modal-content.top-right,.aark-modal-content.bottom-right{animation:l var(--aark-anim)}.aark-modal-content.bottom-center{animation:u var(--aark-anim)}@keyframes d{0%{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes l{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}@keyframes u{0%{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@media (max-width:768px){.aark-modal-content{margin:10px;max-width:calc(100vw - 20px)}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center,.aark-modal-content.bottom-center{left:50%;transform:translateX(-50%)}.aark-modal-content.top-right{right:10px;left:auto;transform:none}.aark-modal-content.bottom-right{right:10px;bottom:10px;left:auto;transform:none}}",document.head.appendChild(r)})(0,"aark-modal-styles")},[]),l.useEffect(()=>{if(s&&"notification"===n){const a=setTimeout(o,s)
+return()=>clearTimeout(a)}},[s,n,o]),l.useEffect(()=>{const a=a=>{"Escape"!==a.key||k||o()}
+if(!k)return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[o,k])
+const f=l.useCallback(a=>{a.target!==a.currentTarget||p||o()},[o,p]),v=l.useCallback(a=>{a.stopPropagation(),o()},[o]),b="aark-modal-container "+("notification"===n?"notification":""),g=`aark-modal-content ${e} ${"notification"===n?"notification":""} ${i}`.trim(),h=("aark-modal-overlay "+u).trim(),x=document.getElementById("aark-react-modalify-root")||document.body
+return c.createPortal(d.jsxs("div",{className:b,children:["modal"===n&&d.jsx("div",{className:h,onClick:f,"aria-hidden":"true"}),d.jsxs("div",{className:g,role:"dialog","aria-modal":"true","aria-labelledby":"aark-modal-content",children:[m&&d.jsx("button",{onClick:v,className:"aark-modal-close","aria-label":"Close modal",type:"button",children:"×"}),d.jsx("div",{id:"aark-modal-content",className:"aark-modal-body",children:r})]})]}),x)},exports.aark=p,exports.getAarkModalTheme=e,exports.resetAarkModalTheme=t,exports.setAarkModalTheme=r,exports.useModal=function(){const[a,o]=l.useState(!1),[r,t]=l.useState(null),e=l.useCallback(()=>{k.close()},[])
+return l.useEffect(()=>{const a=k.subscribe(a=>{switch(a.type){case"open":o(!0),t(a.config||null)
 break
-case"close":a(!1),r(null)}})
-return a(k.isOpen()),r(k.getCurrentConfig()),o},[]),{isOpen:o,config:e,close:l}}
+case"close":o(!1),t(null)}})
+return o(k.isOpen()),t(k.getCurrentConfig()),a},[]),{isOpen:a,config:r,close:e}}

package/dist/index.esm.js

@@ -299,6 +299,15 @@ function useModal() {
     close: close2
   };
 }
+const injectStyles = (css, id) => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(id)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.innerHTML = css;
+  document.head.appendChild(style);
+};
+const MODAL_CSS = `:root{--aark-modal-overlay-bg:rgba(0,0,0,.5);--aark-modal-bg:#fff;--aark-modal-radius:8px;--aark-modal-shadow:0 10px 25px rgba(0,0,0,.15);--aark-modal-pad:16px;--aark-modal-z:9999;--aark-close-color:#666;--aark-close-hover:#f5f5f5;--aark-anim:.2s}.aark-modal-container{position:fixed;inset:0;z-index:var(--aark-modal-z)}.aark-modal-container.notification{pointer-events:none}.aark-modal-overlay{position:absolute;inset:0;background:var(--aark-modal-overlay-bg);backdrop-filter:blur(2px)}.aark-modal-content{position:fixed;background:var(--aark-modal-bg);border-radius:var(--aark-modal-radius);box-shadow:var(--aark-modal-shadow);padding:var(--aark-modal-pad);z-index:calc(var(--aark-modal-z) + 1);max-width:90vw;max-height:90vh;overflow:auto}.aark-modal-content.notification{pointer-events:auto}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center{top:20px;left:50%;transform:translateX(-50%)}.aark-modal-content.top-right{top:20px;right:20px}.aark-modal-content.bottom-right{bottom:20px;right:20px}.aark-modal-content.bottom-center{bottom:20px;left:50%;transform:translateX(-50%)}.aark-modal-close{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:0;border:0;color:var(--aark-close-color);cursor:pointer;border-radius:50%;font-size:14px;line-height:1;transition:all var(--aark-anim)}.aark-modal-close:hover{background:var(--aark-close-hover);color:#333}.aark-modal-close:focus{outline:2px solid #007bff;outline-offset:2px}.aark-modal-body{padding-top:8px}.aark-modal-container{animation:f var(--aark-anim)}.aark-modal-content{animation:s var(--aark-anim)}@keyframes f{0%{opacity:0}to{opacity:1}}@keyframes s{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.aark-modal-content.top-center{animation:d var(--aark-anim)}.aark-modal-content.top-right,.aark-modal-content.bottom-right{animation:l var(--aark-anim)}.aark-modal-content.bottom-center{animation:u var(--aark-anim)}@keyframes d{0%{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes l{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}@keyframes u{0%{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@media (max-width:768px){.aark-modal-content{margin:10px;max-width:calc(100vw - 20px)}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center,.aark-modal-content.bottom-center{left:50%;transform:translateX(-50%)}.aark-modal-content.top-right{right:10px;left:auto;transform:none}.aark-modal-content.bottom-right{right:10px;bottom:10px;left:auto;transform:none}}`;
 const ModalRenderer = ({ config, onClose }) => {
   const { content, options = {} } = config;
   const {
@@ -311,6 +320,9 @@ const ModalRenderer = ({ config, onClose }) => {
     preventEscClose = false,
     preventOverlayClose = false
   } = options;
+  useEffect(() => {
+    injectStyles(MODAL_CSS, "aark-modal-styles");
+  }, []);
   useEffect(() => {
     if (autoCloseTime && mode === "notification") {
       const timer = setTimeout(onClose, autoCloseTime);
@@ -346,6 +358,7 @@ const ModalRenderer = ({ config, onClose }) => {
   const containerClasses = `aark-modal-container ${mode === "notification" ? "notification" : ""}`;
   const contentClasses = `aark-modal-content ${position} ${mode === "notification" ? "notification" : ""} ${className}`.trim();
   const overlayClasses = `aark-modal-overlay ${overlayClassName}`.trim();
+  const modalContainer = document.getElementById("aark-react-modalify-root") || document.body;
   return createPortal(
     /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
       mode === "modal" && /* @__PURE__ */ jsx(
@@ -379,7 +392,7 @@ const ModalRenderer = ({ config, onClose }) => {
         }
       )
     ] }),
-    document.body
+    modalContainer
   );
 };
 export {

package/dist/utils/inject-styles.d.ts

@@ -0,0 +1 @@
+export declare const injectStyles: (css: string, id: string) => void;

package/dist/utils/modal-css.d.ts

@@ -0,0 +1 @@
+export declare const MODAL_CSS = ":root{--aark-modal-overlay-bg:rgba(0,0,0,.5);--aark-modal-bg:#fff;--aark-modal-radius:8px;--aark-modal-shadow:0 10px 25px rgba(0,0,0,.15);--aark-modal-pad:16px;--aark-modal-z:9999;--aark-close-color:#666;--aark-close-hover:#f5f5f5;--aark-anim:.2s}.aark-modal-container{position:fixed;inset:0;z-index:var(--aark-modal-z)}.aark-modal-container.notification{pointer-events:none}.aark-modal-overlay{position:absolute;inset:0;background:var(--aark-modal-overlay-bg);backdrop-filter:blur(2px)}.aark-modal-content{position:fixed;background:var(--aark-modal-bg);border-radius:var(--aark-modal-radius);box-shadow:var(--aark-modal-shadow);padding:var(--aark-modal-pad);z-index:calc(var(--aark-modal-z) + 1);max-width:90vw;max-height:90vh;overflow:auto}.aark-modal-content.notification{pointer-events:auto}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center{top:20px;left:50%;transform:translateX(-50%)}.aark-modal-content.top-right{top:20px;right:20px}.aark-modal-content.bottom-right{bottom:20px;right:20px}.aark-modal-content.bottom-center{bottom:20px;left:50%;transform:translateX(-50%)}.aark-modal-close{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:0;border:0;color:var(--aark-close-color);cursor:pointer;border-radius:50%;font-size:14px;line-height:1;transition:all var(--aark-anim)}.aark-modal-close:hover{background:var(--aark-close-hover);color:#333}.aark-modal-close:focus{outline:2px solid #007bff;outline-offset:2px}.aark-modal-body{padding-top:8px}.aark-modal-container{animation:f var(--aark-anim)}.aark-modal-content{animation:s var(--aark-anim)}@keyframes f{0%{opacity:0}to{opacity:1}}@keyframes s{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.aark-modal-content.top-center{animation:d var(--aark-anim)}.aark-modal-content.top-right,.aark-modal-content.bottom-right{animation:l var(--aark-anim)}.aark-modal-content.bottom-center{animation:u var(--aark-anim)}@keyframes d{0%{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes l{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}@keyframes u{0%{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@media (max-width:768px){.aark-modal-content{margin:10px;max-width:calc(100vw - 20px)}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center,.aark-modal-content.bottom-center{left:50%;transform:translateX(-50%)}.aark-modal-content.top-right{right:10px;left:auto;transform:none}.aark-modal-content.bottom-right{right:10px;bottom:10px;left:auto;transform:none}}";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "aark-react-modalify",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"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.",
 	"private": false,
 	"main": "dist/index.cjs.js",
@@ -16,7 +16,6 @@
 	},
 	"files": [
 		"dist",
-		"src/assets/styles/aark-modal.css",
 		"README.md",
 		"LICENSE"
 	],

package/dist/aark-react-modalify.css

@@ -1 +0,0 @@
-: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/src/assets/styles/aark-modal.css

@@ -1,183 +0,0 @@
-/* AARK React Modalify - Optimized CSS */
-:root {
-  --aark-modal-overlay-bg: rgba(0, 0, 0, 0.5);
-  --aark-modal-bg: #fff;
-  --aark-modal-radius: 8px;
-  --aark-modal-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-  --aark-modal-pad: 16px;
-  --aark-modal-z: 9999;
-  --aark-close-color: #666;
-  --aark-close-hover: #f5f5f5;
-  --aark-anim: 0.2s;
-}
-.aark-modal-container {
-  position: fixed;
-  inset: 0;
-  z-index: var(--aark-modal-z);
-}
-.aark-modal-container.notification {
-  pointer-events: none;
-}
-.aark-modal-overlay {
-  position: absolute;
-  inset: 0;
-  background: var(--aark-modal-overlay-bg);
-  backdrop-filter: blur(2px);
-}
-.aark-modal-content {
-  position: fixed;
-  background: var(--aark-modal-bg);
-  border-radius: var(--aark-modal-radius);
-  box-shadow: var(--aark-modal-shadow);
-  padding: var(--aark-modal-pad);
-  z-index: calc(var(--aark-modal-z) + 1);
-  max-width: 90vw;
-  max-height: 90vh;
-  overflow: auto;
-}
-.aark-modal-content.notification {
-  pointer-events: auto;
-}
-.aark-modal-content.center {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.aark-modal-content.top-center {
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.aark-modal-content.top-right {
-  top: 20px;
-  right: 20px;
-}
-.aark-modal-content.bottom-right {
-  bottom: 20px;
-  right: 20px;
-}
-.aark-modal-content.bottom-center {
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.aark-modal-close {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: 0;
-  border: 0;
-  color: var(--aark-close-color);
-  cursor: pointer;
-  border-radius: 50%;
-  font-size: 14px;
-  line-height: 1;
-  transition: all var(--aark-anim);
-}
-.aark-modal-close:hover {
-  background: var(--aark-close-hover);
-  color: #333;
-}
-.aark-modal-close:focus {
-  outline: 2px solid #007bff;
-  outline-offset: 2px;
-}
-.aark-modal-body {
-  padding-top: 8px;
-}
-.aark-modal-container {
-  animation: f var(--aark-anim);
-}
-.aark-modal-content {
-  animation: s var(--aark-anim);
-}
-@keyframes f {
-  0% {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes s {
-  0% {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-.aark-modal-content.top-center {
-  animation: d var(--aark-anim);
-}
-.aark-modal-content.top-right,
-.aark-modal-content.bottom-right {
-  animation: l var(--aark-anim);
-}
-.aark-modal-content.bottom-center {
-  animation: u var(--aark-anim);
-}
-@keyframes d {
-  0% {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-@keyframes l {
-  0% {
-    opacity: 0;
-    transform: translateX(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes u {
-  0% {
-    opacity: 0;
-    transform: translateX(-50%) translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-@media (max-width: 768px) {
-  .aark-modal-content {
-    margin: 10px;
-    max-width: calc(100vw - 20px);
-  }
-  .aark-modal-content.center {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-  .aark-modal-content.top-center,
-  .aark-modal-content.bottom-center {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  .aark-modal-content.top-right {
-    right: 10px;
-    left: auto;
-    transform: none;
-  }
-  .aark-modal-content.bottom-right {
-    right: 10px;
-    bottom: 10px;
-    left: auto;
-    transform: none;
-  }
-}