aark-react-modalify 1.0.5 → 1.2.0

package/dist/index.d.ts

@@ -1,6 +1,9 @@
+import "./assets/styles/aark-modal.css";
 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, ModalType, ModalProps, NotificationProps, 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/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, ModalProps, NotificationProps } from "../types";
 type ModalListener = (event: ModalEvent) => void;
 declare function subscribe(listener: ModalListener): () => void;
-declare function fire(content: ReactNode, options?: ModalOptions): void;
+declare function fireModal(contentOrProps: ReactNode | ModalProps, options?: ModalOptions): void;
+declare function fireNotification(contentOrProps: ReactNode | NotificationProps, options?: NotificationOptions): void;
+declare function fire(contentOrProps: ReactNode | ModalProps, 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, ModalProps, NotificationProps } from "../types";
 import type { AarkModalTheme } from "../utils/theme";
 declare const aark: {
-    fire: (content: ReactNode, options?: ModalOptions) => 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

@@ -1,26 +1,102 @@
 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 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;
-    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;
+    content?: ReactNode;
+    props?: ModalProps;
     options?: ModalOptions;
+    mode: "modal";
+}
+export interface NotificationConfig {
+    content?: ReactNode;
+    props?: NotificationProps;
+    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/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-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/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,18 +1,24 @@
 {
 	"name": "aark-react-modalify",
-	"version": "1.0.5",
+	"version": "1.2.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",
 	"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"
-		}
+		},
+		"./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",
@@ -20,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",

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}

package/dist/index.cjs.js

@@ -1,23 +0,0 @@
-"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)
-break
-case"close":o(!1),t(null)}})
-return o(k.isOpen()),t(k.getCurrentConfig()),a},[]),{isOpen:a,config:r,close:e}}