aark-react-modalify 1.1.0 → 1.2.1

package/dist/logic/aark.d.ts

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

package/dist/types/index.d.ts

@@ -2,6 +2,68 @@ 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 type ModalType = "success" | "error" | "warning" | "info" | "question";
+export interface ModalProps {
+    title?: string;
+    text?: string;
+    type?: ModalType;
+    cancelText?: string;
+    confirmText?: string;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    icon?: string | ReactNode;
+    html?: string | ReactNode;
+    showCancelButton?: boolean;
+    showConfirmButton?: boolean;
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+    reverseButtons?: boolean;
+    focusConfirm?: boolean;
+    focusCancel?: boolean;
+    width?: string | number;
+    fullWidth?: boolean;
+    padding?: string | number;
+    background?: string;
+    customClass?: {
+        container?: string;
+        popup?: string;
+        header?: string;
+        title?: string;
+        closeButton?: string;
+        icon?: string;
+        image?: string;
+        content?: string;
+        input?: string;
+        actions?: string;
+        confirmButton?: string;
+        cancelButton?: string;
+        footer?: string;
+    };
+}
+export interface NotificationProps {
+    title?: string;
+    text?: string;
+    type?: ModalType;
+    icon?: string | ReactNode;
+    html?: string | ReactNode;
+    timer?: number;
+    showCloseButton?: boolean;
+    clickToClose?: boolean;
+    width?: string | number;
+    fullWidth?: boolean;
+    padding?: string | number;
+    background?: string;
+    customClass?: {
+        container?: string;
+        popup?: string;
+        header?: string;
+        title?: string;
+        closeButton?: string;
+        icon?: string;
+        content?: string;
+        footer?: string;
+    };
+}
 export interface BaseOptions {
     showCloseIcon?: boolean;
     className?: string;
@@ -17,12 +79,14 @@ export interface NotificationOptions extends BaseOptions {
     autoCloseTime?: number;
 }
 export interface ModalConfig {
-    content: ReactNode;
+    content?: ReactNode;
+    props?: ModalProps;
     options?: ModalOptions;
     mode: "modal";
 }
 export interface NotificationConfig {
-    content: ReactNode;
+    content?: ReactNode;
+    props?: NotificationProps;
     options?: NotificationOptions;
     mode: "notification";
 }

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

@@ -1 +1,4 @@
 export declare const injectStyles: (css: string, id: string) => void;
+export declare const injectModalStyles: () => void;
+export declare const injectNotificationStyles: () => void;
+export declare const removeStyles: (id: string) => void;

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

@@ -0,0 +1,18 @@
+/**
+ * Utility to manage the single modal root container
+ * Ensures only one instance of aark-react-modalify-root exists
+ */
+/**
+ * Gets or creates the modal root container
+ * Returns the same instance for both modals and notifications
+ */
+export declare const getModalRoot: () => HTMLElement;
+/**
+ * Cleanup function to remove the modal root when no longer needed
+ * Should be called when the last modal/notification is closed
+ */
+export declare const cleanupModalRoot: () => void;
+/**
+ * Check if modal root exists and has content
+ */
+export declare const hasActiveModals: () => boolean;

package/package.json

@@ -1,23 +1,24 @@
 {
 	"name": "aark-react-modalify",
-	"version": "1.1.0",
+	"version": "1.2.1",
 	"description": "A lightweight, flexible React modal and notification library with TypeScript support. Features automatic DOM mounting, customizable styling, and a simple imperative API for displaying modals, alerts, confirmations, and toast notifications.",
 	"private": false,
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.esm.js",
 	"types": "dist/index.d.ts",
-	"type": "module",
 	"exports": {
 		".": {
 			"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"
-		}
+		"./no-styles": {
+			"types": "./dist/index-no-styles.d.ts",
+			"import": "./dist/index-no-styles.esm.js",
+			"require": "./dist/index-no-styles.cjs.js"
+		},
+		"./dist/aark-react-modalify.css": "./dist/aark-react-modalify.css",
+		"./css": "./dist/aark-react-modalify.css"
 	},
 	"files": [
 		"dist",
@@ -25,8 +26,9 @@
 		"LICENSE"
 	],
 	"scripts": {
-		"build": "npm run clean && npm run build:lib && npm run build:types",
+		"build": "npm run clean && npm run build:lib && npm run build:no-styles && npm run build:types",
 		"build:lib": "vite build --config vite.lib.config.ts",
+		"build:no-styles": "vite build --config vite.lib-no-styles.config.ts",
 		"build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly",
 		"clean": "rimraf dist",
 		"dev": "vite",
@@ -60,23 +62,23 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.32.0",
-		"@types/node": "^24.2.1",
-		"@types/react": "^19.1.9",
-		"@types/react-dom": "^19.1.7",
-		"@vitejs/plugin-react": "^4.7.0",
-		"cssnano": "^7.1.0",
-		"eslint": "^9.32.0",
-		"eslint-plugin-react-hooks": "^5.2.0",
-		"eslint-plugin-react-refresh": "^0.4.20",
-		"globals": "^16.3.0",
-		"react": "^19.1.1",
-		"react-dom": "^19.1.1",
-		"rimraf": "^6.0.1",
-		"terser": "^5.43.1",
-		"typescript": "~5.8.3",
-		"typescript-eslint": "^8.39.0",
-		"vite": "^7.1.0"
+		"@eslint/js": "^9.39.1",
+		"@types/node": "^24.10.1",
+		"@types/react": "^19.2.6",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^5.1.1",
+		"cssnano": "^7.1.2",
+		"eslint": "^9.39.1",
+		"eslint-plugin-react-hooks": "^7.0.1",
+		"eslint-plugin-react-refresh": "^0.4.24",
+		"globals": "^16.5.0",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
+		"rimraf": "^6.1.0",
+		"terser": "^5.44.1",
+		"typescript": "~5.9.3",
+		"typescript-eslint": "^8.47.0",
+		"vite": "^7.2.2"
 	},
 	"license": "MIT",
 	"author": "Mohammad Sumon",

package/dist/index.cjs.js

@@ -1,32 +0,0 @@
-"use strict"
-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":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