aark-react-modalify 1.0.5 → 1.1.0

package/dist/aark-react-modalify.css

@@ -0,0 +1 @@
+: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-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;min-width:280px;max-height:90vh;overflow:auto}.aark-modal-content.notification{pointer-events:auto;background:var(--aark-modal-bg);box-shadow:var(--aark-modal-shadow);padding:var(--aark-modal-pad);width:auto;max-width:400px;min-width:280px;border-radius:var(--aark-modal-radius)}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%);animation:scale-in var(--aark-anim)}.aark-modal-content.top-center{top:20px;left:50%;transform:translate(-50%);animation:slide-down var(--aark-anim)}.aark-modal-content.top-right{top:20px;right:20px;animation:slide-left var(--aark-anim)}.aark-modal-content.top-left{top:20px;left:20px;animation:slide-right var(--aark-anim)}.aark-modal-content.bottom-right{bottom:20px;right:20px;animation:slide-left var(--aark-anim)}.aark-modal-content.bottom-left{bottom:20px;left:20px;animation:slide-right var(--aark-anim)}.aark-modal-content.bottom-center{bottom:20px;left:50%;transform:translate(-50%);animation:slide-up var(--aark-anim)}.aark-modal-header{position:relative;padding-bottom:6px}.aark-modal-close{position:absolute;top:8px;right:8px;width:30px;height:30px;padding:.5rem;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:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes scale-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes slide-down{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes slide-up{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes slide-left{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slide-right{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media (max-width: 768px){.aark-modal-content{margin:10px;max-width:calc(100vw - 20px);min-width:auto}.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.top-left{left:10px;right:auto;transform:none}.aark-modal-content.bottom-right{right:10px;bottom:10px;left:auto;transform:none}.aark-modal-content.bottom-left{left:10px;bottom:10px;right:auto;transform:none}.aark-modal-content.notification{width:auto;max-width:calc(100vw - 20px);min-width:auto}}@media (max-width: 480px){.aark-modal-content{max-width:calc(100vw - 10px);margin:5px}.aark-modal-content.center{top:10px;left:50%;transform:translate(-50%);max-height:calc(100vh - 20px)}}

package/dist/components/Icon.d.ts

@@ -0,0 +1,18 @@
+import type { FC, CSSProperties } from "react";
+declare const colors: Record<string, string>;
+export type IconName = "close";
+export type IconSize = string | number;
+export type IconColor = keyof typeof colors | string;
+export interface IconProps {
+    name: IconName;
+    size?: IconSize;
+    color?: IconColor;
+    style?: CSSProperties;
+    className?: string;
+    noHoverEffect?: boolean;
+    onClick?: () => void;
+    "aria-label"?: string;
+    title?: string;
+}
+declare const Icon: FC<IconProps>;
+export default Icon;

package/dist/components/{ModalRenderer.d.ts → Modal.d.ts}

@@ -1,8 +1,9 @@
 import type { FC } from 'react';
 import type { ModalConfig } from '../types';
-interface ModalRendererProps {
+import '../assets/styles/aark-modal.css';
+interface ModalProps {
     config: ModalConfig;
     onClose: () => void;
 }
-declare const ModalRenderer: FC<ModalRendererProps>;
-export default ModalRenderer;
+declare const Modal: FC<ModalProps>;
+export default Modal;

package/dist/components/Notification.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { NotificationConfig } from '../types';
+import '../assets/styles/aark-modal.css';
+interface NotificationProps {
+    config: NotificationConfig;
+    onClose: () => void;
+}
+declare const Notification: FC<NotificationProps>;
+export default Notification;

package/dist/hooks/useModal.d.ts

@@ -1,7 +1,7 @@
-import type { ModalConfig } from "../types";
+import type { ComponentConfig } from "../types";
 export interface UseModalReturn {
     isOpen: boolean;
-    config: ModalConfig | null;
+    config: ComponentConfig | null;
     close: () => void;
 }
 /**

package/dist/index.cjs.js

@@ -1,23 +1,32 @@
 "use strict"
-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)
+function o(){const[o,a]=s.useState(!1),[e,r]=s.useState(null),l=s.useCallback(()=>{y.close()},[])
+return s.useEffect(()=>{const o=y.subscribe(o=>{switch(o.type){case"open":a(!0),r(o.config||null)
 break
-case"close":o(!1),t(null)}})
-return o(k.isOpen()),t(k.getCurrentConfig()),a},[]),{isOpen:a,config:r,close:e}}
+case"close":a(!1),r(null)}})
+return a(y.isOpen()),r(y.getCurrentConfig()),o},[]),{isOpen:o,config:e,close:l}}function a(){g||(g=document.createElement("div"),g.id="aark-react-modalify-root",g.style.position="relative",g.style.zIndex="9999",document.body.appendChild(g),g&&(h=d.createRoot(g),h.render(s.createElement(C))))}function e(o,a){const e={type:o,config:a}
+b.forEach(o=>o(e))}function r(o,r){a()
+const l={content:o,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},r)}
+p=l,e("open",l)}function l(){p&&(e("beforeClose",p),p=null,e("close"))}function t(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 n(){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 c(){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 s=require("react"),d=require("react-dom/client"),i=require("react/jsx-runtime"),m=require("react-dom"),u={white:"#FFFFFF",black:"#0B071A"},k=s.memo(({name:o,color:a="black",style:e,className:r="",noHoverEffect:l=!1,onClick:t,size:n=24,"aria-label":c,title:d})=>{const m=s.useMemo(()=>n+"",[n]),k=s.useMemo(()=>u[a]?u[a]:(a.startsWith("#"),a),[a]),f=s.useMemo(()=>{const a=k
+return"close"===o?i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 16 16",fill:"none",children:i.jsx("path",{d:"M15.281 14.2198C15.3507 14.2895 15.406 14.3722 15.4437 14.4632C15.4814 14.5543 15.5008 14.6519 15.5008 14.7504C15.5008 14.849 15.4814 14.9465 15.4437 15.0376C15.406 15.1286 15.3507 15.2114 15.281 15.281C15.2114 15.3507 15.1286 15.406 15.0376 15.4437C14.9465 15.4814 14.849 15.5008 14.7504 15.5008C14.6519 15.5008 14.5543 15.4814 14.4632 15.4437C14.3722 15.406 14.2895 15.3507 14.2198 15.281L8.00042 9.06073L1.78104 15.281C1.64031 15.4218 1.44944 15.5008 1.25042 15.5008C1.05139 15.5008 0.860523 15.4218 0.719792 15.281C0.579062 15.1403 0.5 14.9494 0.5 14.7504C0.5 14.5514 0.579062 14.3605 0.719792 14.2198L6.9401 8.00042L0.719792 1.78104C0.579062 1.64031 0.5 1.44944 0.5 1.25042C0.5 1.05139 0.579062 0.860523 0.719792 0.719792C0.860523 0.579062 1.05139 0.5 1.25042 0.5C1.44944 0.5 1.64031 0.579062 1.78104 0.719792L8.00042 6.9401L14.2198 0.719792C14.3605 0.579062 14.5514 0.5 14.7504 0.5C14.9494 0.5 15.1403 0.579062 15.281 0.719792C15.4218 0.860523 15.5008 1.05139 15.5008 1.25042C15.5008 1.44944 15.4218 1.64031 15.281 1.78104L9.06073 8.00042L15.281 14.2198Z",fill:a})}):null},[o,k,m]),v=s.useMemo(()=>{const a={}
+return a["aria-label"]=c||o+" icon",d&&(a.title=d),a.role=t?"button":"img",a},[c,d,o,t]),C=s.useMemo(()=>{if(t)return o=>{"Enter"!==o.key&&" "!==o.key||(o.preventDefault(),t())}},[t])
+return i.jsx("i",{className:`\n        inline-flex items-center justify-center bg-transparent outline-none border-none\n        ${!l&&t&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}\n        ${t&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}\n        ${r}\n      `.trim(),style:e,onClick:t,onKeyDown:C,tabIndex:t?0:void 0,...v,children:f})})
+k.displayName="Icon"
+const f=({config:o,onClose:a})=>{const{content:e,options:r={}}=o,{position:l="center",showCloseIcon:t=!0,className:n="",overlayClassName:c="",preventEscClose:d=!1,preventOverlayClose:u=!1}=r
+s.useEffect(()=>{const o=o=>{"Escape"!==o.key||d||a()}
+if(!d)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,d])
+const f=s.useCallback(o=>{o.target!==o.currentTarget||u||a()},[a,u]),v=s.useCallback(o=>{o.stopPropagation(),a()},[a]),C=`aark-modal-content ${l} ${n}`.trim(),b=document.getElementById("aark-react-modalify-root")||document.body
+return m.createPortal(i.jsx("div",{className:("aark-modal-overlay "+c).trim(),onClick:f,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:"var(--aark-modal-z)",background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(2px)",animation:"fade-in var(--aark-anim)"},children:i.jsxs("div",{className:C,role:"dialog","aria-modal":"true","aria-labelledby":"aark-modal-content",onClick:o=>o.stopPropagation(),children:[t&&i.jsx("header",{className:"aark-modal-header",children:i.jsx("button",{onClick:v,className:"aark-modal-close","aria-label":"Close modal",type:"button",children:i.jsx(k,{name:"close",size:12})})}),i.jsx("div",{id:"aark-modal-content",className:"aark-modal-body",children:e})]})}),b)},v=({config:o,onClose:a})=>{const{content:e,options:r={}}=o,{position:l="top-right",showCloseIcon:t=!0,autoCloseTime:n=5e3,className:c="",preventEscClose:d=!1}=r
+s.useEffect(()=>{if(n){const o=setTimeout(a,n)
+return()=>clearTimeout(o)}},[n,a]),s.useEffect(()=>{const o=o=>{"Escape"!==o.key||d||a()}
+if(!d)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,d])
+const u=s.useCallback(o=>{o.stopPropagation(),a()},[a]),k=`aark-modal-content notification ${l} ${c}`.trim(),f=document.getElementById("aark-react-modalify-root")||document.body
+return m.createPortal(i.jsxs("div",{className:k,role:"alert","aria-live":"polite","aria-labelledby":"aark-notification-content",children:[t&&i.jsx("button",{onClick:u,className:"aark-modal-close","aria-label":"Close notification",type:"button",children:"×"}),i.jsx("div",{id:"aark-notification-content",className:"aark-modal-body",children:e})]}),f)},C=()=>{const{isOpen:a,config:e,close:r}=o()
+return a&&e?"modal"===e.mode?i.jsx(f,{config:e,onClose:r}):"notification"===e.mode?i.jsx(v,{config:e,onClose:r}):null:null},b=new Set
+let p=null,g=null,h=null
+const y={subscribe:function(o){return b.add(o),()=>b.delete(o)},fire:function(o,a){r(o,a)},fireModal:r,fireNotification:function(o,r){a()
+const l={content:o,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},r)}
+p=l,e("open",l)},close:l,isOpen:function(){return null!==p},getCurrentConfig:function(){return p},closeAll:function(){l()},cleanup:function(){g&&g.parentNode&&(g.parentNode.removeChild(g),g=null,h=null)}},x={fire:(o,a)=>y.fire(o,a),modal:(o,a)=>y.fireModal(o,a),notification:(o,a)=>y.fireNotification(o,a),close:()=>y.close(),isOpen:()=>y.isOpen(),closeAll:()=>y.closeAll(),setTheme:o=>t(o),resetTheme:()=>n(),getTheme:()=>c()}
+exports.Modal=f,exports.ModalProvider=C,exports.Notification=v,exports.aark=x,exports.getAarkModalTheme=c,exports.resetAarkModalTheme=n,exports.setAarkModalTheme=t,exports.useModal=o

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { default as aark } from "./logic/aark";
-export type { ModalOptions, ModalPosition, ModalMode, ModalConfig, ModalState, ModalEvent, ModalEventType, } from "./types";
+export type { ModalOptions, NotificationOptions, ModalPosition, NotificationPosition, ModalMode, ModalConfig, NotificationConfig, ComponentConfig, ModalState, ModalEvent, ModalEventType, } from "./types";
 export type { AarkModalTheme } from "./utils/theme";
 export { setAarkModalTheme, resetAarkModalTheme, getAarkModalTheme, } from "./utils/theme";
 export { useModal } from "./hooks/useModal";
-export { default as ModalRenderer } from "./components/ModalRenderer";
+export { default as Modal } from "./components/Modal";
+export { default as Notification } from "./components/Notification";
+export { default as ModalProvider } from "./components/ModalProvider";

package/dist/index.esm.js

@@ -1,7 +1,271 @@
-import { createElement, useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, memo, useMemo, createElement } from "react";
 import { createRoot } from "react-dom/client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
+function useModal() {
+  const [isOpen2, setIsOpen] = useState(false);
+  const [config, setConfig] = useState(null);
+  const close2 = useCallback(() => {
+    modalManager.close();
+  }, []);
+  useEffect(() => {
+    const handleModalEvent = (event) => {
+      switch (event.type) {
+        case "open":
+          setIsOpen(true);
+          setConfig(event.config || null);
+          break;
+        case "close":
+          setIsOpen(false);
+          setConfig(null);
+          break;
+      }
+    };
+    const unsubscribe = modalManager.subscribe(handleModalEvent);
+    setIsOpen(modalManager.isOpen());
+    setConfig(modalManager.getCurrentConfig());
+    return unsubscribe;
+  }, []);
+  return {
+    isOpen: isOpen2,
+    config,
+    close: close2
+  };
+}
+const colors = {
+  white: "#FFFFFF",
+  black: "#0B071A"
+};
+const Icon = memo(
+  ({
+    name,
+    color = "black",
+    style,
+    className = "",
+    noHoverEffect = false,
+    onClick,
+    size = 24,
+    "aria-label": ariaLabel,
+    title
+  }) => {
+    const resolvedSize = useMemo(() => {
+      return String(size);
+    }, [size]);
+    const resolvedColor = useMemo(() => {
+      if (colors[color]) {
+        return colors[color];
+      }
+      if (color.startsWith("#")) {
+        return color;
+      }
+      return color;
+    }, [color]);
+    const iconElement = useMemo(() => {
+      const fill = resolvedColor;
+      switch (name) {
+        case "close":
+          return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: resolvedSize, height: resolvedSize, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M15.281 14.2198C15.3507 14.2895 15.406 14.3722 15.4437 14.4632C15.4814 14.5543 15.5008 14.6519 15.5008 14.7504C15.5008 14.849 15.4814 14.9465 15.4437 15.0376C15.406 15.1286 15.3507 15.2114 15.281 15.281C15.2114 15.3507 15.1286 15.406 15.0376 15.4437C14.9465 15.4814 14.849 15.5008 14.7504 15.5008C14.6519 15.5008 14.5543 15.4814 14.4632 15.4437C14.3722 15.406 14.2895 15.3507 14.2198 15.281L8.00042 9.06073L1.78104 15.281C1.64031 15.4218 1.44944 15.5008 1.25042 15.5008C1.05139 15.5008 0.860523 15.4218 0.719792 15.281C0.579062 15.1403 0.5 14.9494 0.5 14.7504C0.5 14.5514 0.579062 14.3605 0.719792 14.2198L6.9401 8.00042L0.719792 1.78104C0.579062 1.64031 0.5 1.44944 0.5 1.25042C0.5 1.05139 0.579062 0.860523 0.719792 0.719792C0.860523 0.579062 1.05139 0.5 1.25042 0.5C1.44944 0.5 1.64031 0.579062 1.78104 0.719792L8.00042 6.9401L14.2198 0.719792C14.3605 0.579062 14.5514 0.5 14.7504 0.5C14.9494 0.5 15.1403 0.579062 15.281 0.719792C15.4218 0.860523 15.5008 1.05139 15.5008 1.25042C15.5008 1.44944 15.4218 1.64031 15.281 1.78104L9.06073 8.00042L15.281 14.2198Z", fill }) });
+        default:
+          return null;
+      }
+    }, [name, resolvedColor, resolvedSize]);
+    const accessibilityProps = useMemo(() => {
+      const props = {};
+      if (ariaLabel) {
+        props["aria-label"] = ariaLabel;
+      } else {
+        props["aria-label"] = `${name} icon`;
+      }
+      if (title) {
+        props.title = title;
+      }
+      props.role = onClick ? "button" : "img";
+      return props;
+    }, [ariaLabel, title, name, onClick]);
+    const handleKeyDown = useMemo(() => {
+      if (!onClick) return void 0;
+      return (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onClick();
+        }
+      };
+    }, [onClick]);
+    return /* @__PURE__ */ jsx(
+      "i",
+      {
+        className: `
+        inline-flex items-center justify-center bg-transparent outline-none border-none
+        ${!noHoverEffect && onClick && "hover:opacity-80 cursor-pointer transition-opacity duration-200"}
+        ${onClick && "focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}
+        ${className}
+      `.trim(),
+        style,
+        onClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: onClick ? 0 : void 0,
+        ...accessibilityProps,
+        children: iconElement
+      }
+    );
+  }
+);
+Icon.displayName = "Icon";
+const Modal = ({ config, onClose }) => {
+  const { content, options = {} } = config;
+  const {
+    position = "center",
+    showCloseIcon = true,
+    className = "",
+    overlayClassName = "",
+    preventEscClose = false,
+    preventOverlayClose = false
+  } = options;
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && !preventEscClose) {
+        onClose();
+      }
+    };
+    if (!preventEscClose) {
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [onClose, preventEscClose]);
+  const handleOverlayClick = useCallback(
+    (event) => {
+      if (event.target === event.currentTarget && !preventOverlayClose) {
+        onClose();
+      }
+    },
+    [onClose, preventOverlayClose]
+  );
+  const handleCloseClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      onClose();
+    },
+    [onClose]
+  );
+  const contentClasses = `aark-modal-content ${position} ${className}`.trim();
+  const modalContainer = document.getElementById("aark-react-modalify-root") || document.body;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `aark-modal-overlay ${overlayClassName}`.trim(),
+        onClick: handleOverlayClick,
+        "aria-hidden": "true",
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: "var(--aark-modal-z)",
+          background: "var(--aark-modal-overlay-bg)",
+          backdropFilter: "blur(2px)",
+          animation: "fade-in var(--aark-anim)"
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: contentClasses,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "aark-modal-content",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              showCloseIcon && /* @__PURE__ */ jsx("header", { className: "aark-modal-header", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleCloseClick,
+                  className: "aark-modal-close",
+                  "aria-label": "Close modal",
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 12 })
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { id: "aark-modal-content", className: "aark-modal-body", children: content })
+            ]
+          }
+        )
+      }
+    ),
+    modalContainer
+  );
+};
+const Notification = ({ config, onClose }) => {
+  const { content, options = {} } = config;
+  const {
+    position = "top-right",
+    showCloseIcon = true,
+    autoCloseTime = 5e3,
+    className = "",
+    preventEscClose = false
+  } = options;
+  useEffect(() => {
+    if (autoCloseTime) {
+      const timer = setTimeout(onClose, autoCloseTime);
+      return () => clearTimeout(timer);
+    }
+  }, [autoCloseTime, 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 handleCloseClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      onClose();
+    },
+    [onClose]
+  );
+  const contentClasses = `aark-modal-content notification ${position} ${className}`.trim();
+  const modalContainer = document.getElementById("aark-react-modalify-root") || document.body;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: contentClasses,
+        role: "alert",
+        "aria-live": "polite",
+        "aria-labelledby": "aark-notification-content",
+        children: [
+          showCloseIcon && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleCloseClick,
+              className: "aark-modal-close",
+              "aria-label": "Close notification",
+              type: "button",
+              children: "×"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { id: "aark-notification-content", className: "aark-modal-body", children: content })
+        ]
+      }
+    ),
+    modalContainer
+  );
+};
+const ModalProvider = () => {
+  const { isOpen: isOpen2, config, close: close2 } = useModal();
+  if (!isOpen2 || !config) {
+    return null;
+  }
+  if (config.mode === "modal") {
+    return /* @__PURE__ */ jsx(Modal, { config, onClose: close2 });
+  }
+  if (config.mode === "notification") {
+    return /* @__PURE__ */ jsx(Notification, { config, onClose: close2 });
+  }
+  return null;
+};
 const listeners = /* @__PURE__ */ new Set();
 let currentConfig = null;
 let container = null;
@@ -13,12 +277,10 @@ function init() {
   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));
-    }
-  });
+  if (container) {
+    root = createRoot(container);
+    root.render(createElement(ModalProvider));
+  }
 }
 function subscribe(listener) {
   listeners.add(listener);
@@ -28,14 +290,14 @@ function emit(type, config) {
   const event = { type, config };
   listeners.forEach((listener) => listener(event));
 }
-function fire(content, options) {
+function fireModal(content, options) {
   init();
   const config = {
     content,
+    mode: "modal",
     options: Object.assign(
       {
         position: "center",
-        mode: "modal",
         showCloseIcon: true,
         preventEscClose: false,
         preventOverlayClose: false
@@ -46,6 +308,27 @@ function fire(content, options) {
   currentConfig = config;
   emit("open", config);
 }
+function fireNotification(content, options) {
+  init();
+  const config = {
+    content,
+    mode: "notification",
+    options: Object.assign(
+      {
+        position: "top-right",
+        showCloseIcon: true,
+        autoCloseTime: 5e3,
+        preventEscClose: false
+      },
+      options
+    )
+  };
+  currentConfig = config;
+  emit("open", config);
+}
+function fire(content, options) {
+  fireModal(content, options);
+}
 function close() {
   if (currentConfig) {
     emit("beforeClose", currentConfig);
@@ -72,6 +355,8 @@ function cleanup() {
 const modalManager = {
   subscribe,
   fire,
+  fireModal,
+  fireNotification,
   close,
   isOpen,
   getCurrentConfig,
@@ -262,6 +547,8 @@ function getAarkModalTheme() {
 }
 const aark = {
   fire: (content, options) => modalManager.fire(content, options),
+  modal: (content, options) => modalManager.fireModal(content, options),
+  notification: (content, options) => modalManager.fireNotification(content, options),
   close: () => modalManager.close(),
   isOpen: () => modalManager.isOpen(),
   closeAll: () => modalManager.closeAll(),
@@ -269,134 +556,10 @@ const aark = {
   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 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 {
-    position = "center",
-    mode = "modal",
-    showCloseIcon = true,
-    autoCloseTime,
-    className = "",
-    overlayClassName = "",
-    preventEscClose = false,
-    preventOverlayClose = false
-  } = options;
-  useEffect(() => {
-    injectStyles(MODAL_CSS, "aark-modal-styles");
-  }, []);
-  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();
-  const modalContainer = document.getElementById("aark-react-modalify-root") || document.body;
-  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 })
-          ]
-        }
-      )
-    ] }),
-    modalContainer
-  );
-};
 export {
-  ModalRenderer,
+  Modal,
+  ModalProvider,
+  Notification,
   aark,
   getAarkModalTheme,
   resetAarkModalTheme,

package/dist/logic/ModalManager.d.ts

@@ -1,16 +1,20 @@
 import type { ReactNode } from "react";
-import type { ModalConfig, ModalOptions, ModalEvent } from "../types";
+import type { ComponentConfig, ModalOptions, NotificationOptions, ModalEvent } from "../types";
 type ModalListener = (event: ModalEvent) => void;
 declare function subscribe(listener: ModalListener): () => void;
+declare function fireModal(content: ReactNode, options?: ModalOptions): void;
+declare function fireNotification(content: ReactNode, options?: NotificationOptions): void;
 declare function fire(content: ReactNode, options?: ModalOptions): void;
 declare function close(): void;
 declare function isOpen(): boolean;
-declare function getCurrentConfig(): ModalConfig | null;
+declare function getCurrentConfig(): ComponentConfig | null;
 declare function closeAll(): void;
 declare function cleanup(): void;
 export declare const modalManager: {
     subscribe: typeof subscribe;
     fire: typeof fire;
+    fireModal: typeof fireModal;
+    fireNotification: typeof fireNotification;
     close: typeof close;
     isOpen: typeof isOpen;
     getCurrentConfig: typeof getCurrentConfig;

package/dist/logic/aark.d.ts

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

package/dist/types/index.d.ts

@@ -1,26 +1,38 @@
 import type { ReactNode } from "react";
 export type ModalPosition = "center" | "top-center" | "top-right" | "bottom-right" | "bottom-center";
+export type NotificationPosition = "top-right" | "top-center" | "top-left" | "bottom-right" | "bottom-center" | "bottom-left";
 export type ModalMode = "modal" | "notification";
-export interface ModalOptions {
-    position?: ModalPosition;
-    mode?: ModalMode;
+export interface BaseOptions {
     showCloseIcon?: boolean;
-    autoCloseTime?: number;
     className?: string;
-    overlayClassName?: string;
     preventEscClose?: boolean;
+}
+export interface ModalOptions extends BaseOptions {
+    position?: ModalPosition;
+    overlayClassName?: string;
     preventOverlayClose?: boolean;
 }
+export interface NotificationOptions extends BaseOptions {
+    position?: NotificationPosition;
+    autoCloseTime?: number;
+}
 export interface ModalConfig {
     content: ReactNode;
     options?: ModalOptions;
+    mode: "modal";
+}
+export interface NotificationConfig {
+    content: ReactNode;
+    options?: NotificationOptions;
+    mode: "notification";
 }
+export type ComponentConfig = ModalConfig | NotificationConfig;
 export interface ModalState {
     isOpen: boolean;
-    config: ModalConfig | null;
+    config: ComponentConfig | null;
 }
 export type ModalEventType = "open" | "close" | "beforeClose";
 export interface ModalEvent {
     type: ModalEventType;
-    config?: ModalConfig;
+    config?: ComponentConfig;
 }

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

@@ -1 +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}}";
+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-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;min-width:280px;max-height:90vh;overflow:auto}.aark-modal-content.notification{pointer-events:auto;background:var(--aark-modal-bg);box-shadow:var(--aark-modal-shadow);padding:var(--aark-modal-pad);width:auto;max-width:400px;min-width:280px;border-radius:var(--aark-modal-radius)}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%);animation:scale-in var(--aark-anim)}.aark-modal-content.top-center{top:20px;left:50%;transform:translateX(-50%);animation:slide-down var(--aark-anim)}.aark-modal-content.top-right{top:20px;right:20px;animation:slide-left var(--aark-anim)}.aark-modal-content.top-left{top:20px;left:20px;animation:slide-right var(--aark-anim)}.aark-modal-content.bottom-right{bottom:20px;right:20px;animation:slide-left var(--aark-anim)}.aark-modal-content.bottom-left{bottom:20px;left:20px;animation:slide-right var(--aark-anim)}.aark-modal-content.bottom-center{bottom:20px;left:50%;transform:translateX(-50%);animation:slide-up var(--aark-anim)}.aark-modal-close{position:absolute;top:8px;right:8px;width:30px;height:30px;padding:.5rem;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}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes scale-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes slide-down{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes slide-up{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes slide-left{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@media (max-width:768px){.aark-modal-content{margin:10px;max-width:calc(100vw - 20px);min-width:auto}.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.top-left{left:10px;right:auto;transform:none}.aark-modal-content.bottom-right{right:10px;bottom:10px;left:auto;transform:none}.aark-modal-content.bottom-left{left:10px;bottom:10px;right:auto;transform:none}.aark-modal-content.notification{width:auto;max-width:calc(100vw - 20px);min-width:auto}}@media (max-width:480px){.aark-modal-content{max-width:calc(100vw - 10px);margin:5px}.aark-modal-content.center{top:10px;left:50%;transform:translateX(-50%);max-height:calc(100vh - 20px)}}";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "aark-react-modalify",
-	"version": "1.0.5",
+	"version": "1.1.0",
 	"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",
@@ -12,6 +12,11 @@
 			"types": "./dist/index.d.ts",
 			"import": "./dist/index.esm.js",
 			"require": "./dist/index.cjs.js"
+		},
+		"./styles": {
+			"types": "./dist/index-with-styles.d.ts",
+			"import": "./dist/index-with-styles.esm.js",
+			"require": "./dist/index-with-styles.cjs.js"
 		}
 	},
 	"files": [

package/dist/ModalProvider-BAlPeDjm.js

@@ -1,12 +0,0 @@
-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

@@ -1,5 +0,0 @@
-"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}