react-confirm-lite 1.2.5 → 1.4.0

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 
 type ColorSchema = 'light' | 'dark' | 'blue' | 'red' | 'green' | 'purple';
+type AnimationType = 'slide' | 'fadeScale' | 'bounce' | 'flip' | 'zoom' | 'rotate' | 'fadeUp' | 'drop' | 'slideRight' | 'slideLeft' | 'fadeDown' | 'slideDown' | 'rotateRight' | 'zoomSmall' | 'bounceSmall' | 'fadeBlur' | 'fadeShrink';
 type ConfirmClasses = {
     overlay?: string;
     wrapper?: string;
@@ -12,38 +12,70 @@ type ConfirmClasses = {
     cancel?: string;
     ok?: string;
 };
-type ConfirmInput = string | {
+type ConfirmInput = {
+    id?: string;
     title?: string;
     message: string;
     colorSchema?: ColorSchema;
     okText?: string;
     cancelText?: string;
-    isDestructive?: boolean;
 };
 type ConfirmOptions = {
+    id: string;
     title: string;
     message: string;
-    resolve: (value: boolean) => void;
+    resolve: (value: boolean | null) => void;
     colorSchema?: ColorSchema;
     okText?: string;
     cancelText?: string;
-    isDestructive?: boolean;
 };
+interface EnterExit {
+    enter: string;
+    exit: string;
+}
+interface animationPairs {
+    slide: EnterExit;
+    fadeScale: EnterExit;
+    bounce: EnterExit;
+    flip: EnterExit;
+    zoom: EnterExit;
+    rotate: EnterExit;
+    fadeUp: EnterExit;
+    drop: EnterExit;
+    slideRight: EnterExit;
+    slideLeft: EnterExit;
+    fadeDown: EnterExit;
+    slideVertical: EnterExit;
+    rotateRight: EnterExit;
+    zoomSmall: EnterExit;
+    bounceSmall: EnterExit;
+    fadeBlur: EnterExit;
+    fadeShrink: EnterExit;
+}
 
 type Props = {
     classes?: ConfirmClasses;
-    animationDuration?: number;
     defaultColorSchema?: ColorSchema;
+    closeOnEscape?: boolean;
+    closeOnClickOutside?: boolean;
+    animation?: AnimationType;
+    animationDuration?: number;
+    animationDurationIn?: number;
+    animationDurationOut?: number;
     children?: (props: {
         isVisible: boolean;
         confirm: ConfirmOptions;
         handleCancel: () => void;
         handleOk: () => void;
+        containerRef: React.RefObject<HTMLDivElement | null>;
         colorSchema: ColorSchema;
+        animationClass: string;
+        animationStyle: CSSProperties;
     }) => ReactNode;
+    id?: string;
 };
-declare const ConfirmContainer: ({ classes, animationDuration, defaultColorSchema, children }: Props) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+declare const ConfirmContainer: ({ classes, animationDuration, defaultColorSchema, closeOnEscape, closeOnClickOutside, animation, animationDurationIn, animationDurationOut, children, id }: Props) => react_jsx_runtime.JSX.Element;
 
-declare function confirm(input: ConfirmInput): Promise<boolean>;
+declare function confirm(input: string | ConfirmInput): Promise<boolean | null>;
 
-export { type ColorSchema, type ConfirmClasses, ConfirmContainer, type ConfirmInput, type ConfirmOptions, confirm };
+export { type AnimationType, type ColorSchema, type ConfirmClasses, ConfirmContainer, type ConfirmInput, type ConfirmOptions, type animationPairs, confirm };

package/dist/index.js

@@ -1,17 +1,31 @@
 'use client';
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/confirm_store.ts
+var containerId = "";
 var confirms = [];
 var listeners = /* @__PURE__ */ new Set();
-function addAlert(input) {
+var isActiveContainer = false;
+var containers = [];
+var activeContainerId = null;
+function setIsContainerActive(value) {
+  isActiveContainer = value;
+}
+function getIsContainerActive() {
+  return isActiveContainer;
+}
+function setActiveContainer(id) {
+  activeContainerId = id;
+}
+function getActiveContainerId() {
+  return activeContainerId;
+}
+async function addAlert(input) {
   return new Promise((resolve) => {
-    const alert = typeof input === "string" ? {
-      title: "Confirm",
-      message: input,
-      resolve
-    } : {
+    const alert = {
+      id: input.id || "",
+      // Keep the ID for container targeting
       title: input.title || "Confirm",
       message: input.message,
       okText: input.okText,
@@ -20,16 +34,25 @@ function addAlert(input) {
       resolve
     };
     confirms = [...confirms, alert];
+    if (input.id) {
+      setActiveContainer(input.id);
+    } else {
+      setActiveContainer(null);
+    }
     if (confirms.length === 1) {
       emit();
     }
   });
 }
-function closeAlert(result) {
+async function closeAlert(result) {
   const alert = confirms[0];
+  containerId = "";
   if (!alert) return;
   alert.resolve(result);
   confirms = confirms.slice(1);
+  if (confirms.length === 0) {
+    setActiveContainer(null);
+  }
   emit();
 }
 function subscribe(listener) {
@@ -40,12 +63,46 @@ function subscribe(listener) {
 function emit() {
   listeners.forEach((listener) => listener(confirms));
 }
+var EventListener = (e) => {
+  if (containers.length === 0) {
+    containers.push(document.querySelectorAll(".null-confirm-container"));
+  }
+  if (containers.length === 0) return;
+  let parentElement = e.view?.document.activeElement?.parentElement;
+  let container = parentElement?.querySelector(".null-confirm-container");
+  while (true) {
+    if (container?.id) {
+      break;
+    }
+    parentElement = parentElement?.parentElement;
+    container = parentElement?.querySelector(".null-confirm-container");
+  }
+  if (container?.id) {
+    containerId = container.id;
+  }
+};
+async function getElement() {
+  document.addEventListener("click", EventListener, { once: true });
+  await new Promise((resolve) => {
+    setTimeout(() => {
+      document.removeEventListener("click", EventListener);
+      resolve();
+    }, 0);
+  });
+  if (containerId === "") {
+    if (containers.length === 0) {
+      containers.push(document.querySelectorAll(".null-confirm-container"));
+    }
+    return containers[0][0].id;
+  }
+  return containerId;
+}
 
 // src/confirm.css
-var confirm_default = "/* confirm.css */\n.alert-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 9999;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  backdrop-filter: blur(4px);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  animation: overlayFadeIn 0.3s ease-out forwards;\n}\n\n.alert-overlay-exit {\n  animation: overlayFadeOut 0.3s ease-in forwards;\n}\n\n.alert-wrapper {\n  width: 90%;\n  max-width: 400px;\n  border-radius: 12px;\n  padding: 24px;\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04),\n    0 0 0 1px rgba(0, 0, 0, 0.05);\n  animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n  opacity: 0;\n  transform: translateY(20px) scale(0.98);\n}\n\n.alert-wrapper-exit {\n  animation: modalSlideDown 0.3s ease-in forwards;\n}\n\n.alert-title {\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.4;\n  margin: 0 0 12px 0;\n}\n\n.alert-message {\n  font-size: 14px;\n  line-height: 1.5;\n  margin: 0 0 24px 0;\n}\n\n.alert-buttons {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  margin-top: 8px;\n}\n\n.alert-button {\n  padding: 10px 20px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  border: none;\n  cursor: pointer;\n  font-family: inherit;\n  transition: all 0.2s ease;\n  min-width: 80px;\n  text-align: center;\n}\n\n.alert-button:focus {\n  outline-offset: 2px;\n}\n\n.alert-button:active {\n  transform: translateY(1px);\n}";
+var confirm_default = "/* confirm.css */\n.alert-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 9999;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  backdrop-filter: blur(4px);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  animation: overlayFadeIn 0.3s ease-out forwards;\n}\n\n.alert-overlay-exit {\n  animation: overlayFadeOut 0.3s ease-in forwards;\n}\n\n.alert-wrapper {\n  width: 90%;\n  max-width: 400px;\n  border-radius: 12px;\n  padding: 24px;\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04),\n    0 0 0 1px rgba(0, 0, 0, 0.05);\n  animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n  transform: translateY(20px) scale(0.98);\n}\n\n.alert-wrapper-exit {\n  animation: modalSlideDown 0.3s ease-in forwards;\n}\n\n.alert-title {\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.4;\n  margin: 0 0 12px 0;\n}\n\n.alert-message {\n  font-size: 14px;\n  line-height: 1.5;\n  margin: 0 0 24px 0;\n}\n\n.alert-buttons {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  margin-top: 8px;\n}\n\n.alert-button {\n  padding: 10px 20px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  border: none;\n  cursor: pointer;\n  font-family: inherit;\n  transition: all 0.2s ease;\n  min-width: 80px;\n  text-align: center;\n}\n\n.alert-button:focus {\n  outline-offset: 2px;\n}\n\n.alert-button:active {\n  transform: translateY(1px);\n}\n\n/* Default animations */\n.alert-wrapper-exit {\n  animation: modalSlideDown 0.3s ease-in forwards;\n}\n\n/* Entrance Animation Classes */\n.alert-animate-fadeInScale {\n  animation: fadeInScale 0.4s ease-out forwards;\n}\n\n.alert-animate-bounceIn {\n  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;\n}\n\n.alert-animate-flipIn {\n  animation: flipIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;\n}\n\n.alert-animate-zoomIn {\n  animation: zoomIn 0.3s ease-out forwards;\n}\n\n.alert-animate-rotateIn {\n  animation: rotateIn 0.5s ease-out forwards;\n}\n\n.alert-animate-fadeInUp {\n  animation: fadeInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n\n.alert-animate-dropIn {\n  animation: dropIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;\n}\n\n.alert-animate-slideInRight {\n  animation: slideInRight 0.4s ease-out forwards;\n}\n\n.alert-animate-slideInLeft {\n  animation: slideInLeft 0.4s ease-out forwards;\n}\n\n.alert-animate-fadeInDown {\n  animation: fadeInDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n\n.alert-animate-slideDownIn {\n  animation: slideDownIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n\n.alert-animate-rotateInRight {\n  animation: rotateInRight 0.5s ease-out forwards;\n}\n\n.alert-animate-zoomInSmall {\n  animation: zoomInSmall 0.3s ease-out forwards;\n}\n\n.alert-animate-bounceInSmall {\n  animation: bounceInSmall 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;\n}\n\n.alert-animate-fadeInBlur {\n  animation: fadeInBlur 0.4s ease-out forwards;\n}\n\n.alert-animate-fadeInShrink {\n  animation: fadeInShrink 0.3s ease-out forwards;\n}\n\n/* Exit Animation Classes */\n.alert-animate-fadeOutScale {\n  animation: fadeOutScale 0.3s ease-in forwards;\n}\n\n.alert-animate-bounceOut {\n  animation: bounceOut 0.4s ease-in forwards;\n}\n\n.alert-animate-zoomOut {\n  animation: zoomOut 0.3s ease-in forwards;\n}\n\n.alert-animate-rotateOut {\n  animation: rotateOut 0.3s ease-in forwards;\n}\n\n.alert-animate-fadeOutDown {\n  animation: fadeOutDown 0.3s ease-in forwards;\n}\n\n.alert-animate-slideOutRight {\n  animation: slideOutRight 0.3s ease-in forwards;\n}\n\n.alert-animate-slideOutLeft {\n  animation: slideOutLeft 0.3s ease-in forwards;\n}\n\n.alert-animate-flipOut {\n  animation: flipOut 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;\n}\n\n.alert-animate-dropOut {\n  animation: dropOut 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;\n}\n\n.alert-animate-fadeOutUp {\n  animation: fadeOutUp 0.3s ease-in forwards;\n}\n\n.alert-animate-slideUpOut {\n  animation: slideUpOut 0.3s ease-in forwards;\n}\n\n.alert-animate-rotateOutLeft {\n  animation: rotateOutLeft 0.3s ease-in forwards;\n}\n\n.alert-animate-zoomOutSmall {\n  animation: zoomOutSmall 0.3s ease-in forwards;\n}\n\n.alert-animate-bounceOutSmall {\n  animation: bounceOutSmall 0.4s ease-in forwards;\n}\n\n.alert-animate-fadeOutBlur {\n  animation: fadeOutBlur 0.4s ease-in forwards;\n}\n\n.alert-animate-fadeOutShrink {\n  animation: fadeOutShrink 0.3s ease-in forwards;\n}\n\n.alert-wrapper {\n  width: 90%;\n  max-width: 400px;\n  border-radius: 12px;\n  padding: 24px;\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04),\n    0 0 0 1px rgba(0, 0, 0, 0.05);\n}\n\n.null-confirm-container{\n  width: 0;\n  height: 0;\n  opacity: 0;\n}";
 
 // src/animations.css
-var animations_default = "/* Animation Keyframes */\n@keyframes overlayFadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes overlayFadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes modalSlideUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes modalSlideDown {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(20px) scale(0.98);\n  }\n}\n\n/* Accessibility: Reduce motion */\n@media (prefers-reduced-motion: reduce) {\n  .alert-overlay,\n  .alert-wrapper,\n  .alert-button {\n    animation-duration: 0.01ms;\n    animation-iteration-count: 1;\n    transition-duration: 0.01ms;\n  }\n  \n  .alert-overlay {\n    animation: none;\n    opacity: 1;\n  }\n  \n  .alert-wrapper {\n    animation: none;\n    opacity: 1;\n    transform: none;\n  }\n}";
+var animations_default = "/* animations.css - Complete Animation Keyframes */\n\n/* Overlay Animations */\n@keyframes overlayFadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes overlayFadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n/* Default Modal Animations */\n@keyframes modalSlideUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes modalSlideDown {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(20px) scale(0.98);\n  }\n}\n\n/* Fade In/Out with Scale */\n@keyframes fadeInScale {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fadeOutScale {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n/* Slide In/Out from Right */\n@keyframes slideInRight {\n  from {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideOutRight {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n}\n\n/* Slide In/Out from Left */\n@keyframes slideInLeft {\n  from {\n    opacity: 0;\n    transform: translateX(-30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideOutLeft {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(-30px);\n  }\n}\n\n/* Bounce In/Out */\n@keyframes bounceIn {\n  0% {\n    opacity: 0;\n    transform: scale(0.3);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1.05);\n  }\n  70% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n@keyframes bounceOut {\n  20% {\n    transform: scale(1.1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(0.3);\n  }\n}\n\n/* Small Bounce In/Out */\n@keyframes bounceInSmall {\n  0% {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1.05);\n  }\n  70% {\n    transform: scale(0.95);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n@keyframes bounceOutSmall {\n  20% {\n    transform: scale(1.05);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n}\n\n/* Flip In/Out */\n@keyframes flipIn {\n  0% {\n    opacity: 0;\n    transform: perspective(400px) rotateY(90deg);\n  }\n  100% {\n    opacity: 1;\n    transform: perspective(400px) rotateY(0deg);\n  }\n}\n\n@keyframes flipOut {\n  0% {\n    opacity: 1;\n    transform: perspective(400px) rotateY(0deg);\n  }\n  100% {\n    opacity: 0;\n    transform: perspective(400px) rotateY(90deg);\n  }\n}\n\n/* Zoom In/Out */\n@keyframes zoomIn {\n  from {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes zoomOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n}\n\n/* Small Zoom In/Out */\n@keyframes zoomInSmall {\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes zoomOutSmall {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n}\n\n/* Rotate In/Out */\n@keyframes rotateIn {\n  from {\n    opacity: 0;\n    transform: rotate(-15deg) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: rotate(0deg) scale(1);\n  }\n}\n\n@keyframes rotateOut {\n  from {\n    opacity: 1;\n    transform: rotate(0deg) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: rotate(15deg) scale(0.95);\n  }\n}\n\n/* Rotate Right In/Left Out */\n@keyframes rotateInRight {\n  from {\n    opacity: 0;\n    transform: rotate(15deg) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: rotate(0deg) scale(1);\n  }\n}\n\n@keyframes rotateOutLeft {\n  from {\n    opacity: 1;\n    transform: rotate(0deg) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: rotate(-15deg) scale(0.95);\n  }\n}\n\n/* Fade Up In/Down Out */\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(40px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fadeOutDown {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(40px);\n  }\n}\n\n/* Fade Down In/Up Out */\n@keyframes fadeInDown {\n  from {\n    opacity: 0;\n    transform: translateY(-40px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fadeOutUp {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-40px);\n  }\n}\n\n/* Drop In/Out (3D) */\n@keyframes dropIn {\n  0% {\n    opacity: 0;\n    transform: translateY(-100px) rotateX(90deg);\n  }\n  70% {\n    opacity: 1;\n    transform: translateY(10px) rotateX(-10deg);\n  }\n  100% {\n    transform: translateY(0) rotateX(0deg);\n  }\n}\n\n@keyframes dropOut {\n  0% {\n    opacity: 1;\n    transform: translateY(0) rotateX(0deg);\n  }\n  30% {\n    opacity: 1;\n    transform: translateY(10px) rotateX(-10deg);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-100px) rotateX(90deg);\n  }\n}\n\n/* Slide Up Out/Down In */\n@keyframes slideUpOut {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-20px) scale(0.98);\n  }\n}\n\n@keyframes slideDownIn {\n  from {\n    opacity: 0;\n    transform: translateY(-20px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n/* Blur In/Out Effects */\n@keyframes fadeInBlur {\n  from {\n    opacity: 0;\n    filter: blur(10px);\n  }\n  to {\n    opacity: 1;\n    filter: blur(0px);\n  }\n}\n\n@keyframes fadeOutBlur {\n  from {\n    opacity: 1;\n    filter: blur(0px);\n  }\n  to {\n    opacity: 0;\n    filter: blur(10px);\n  }\n}\n\n/* Shrink In/Out Effects */\n@keyframes fadeInShrink {\n  from {\n    opacity: 0;\n    transform: scale(1.2) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n@keyframes fadeOutShrink {\n  from {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.8) translateY(20px);\n  }\n}\n\n/* Background Blur Animations */\n@keyframes blurIn {\n  from {\n    backdrop-filter: blur(0px);\n  }\n  to {\n    backdrop-filter: blur(4px);\n  }\n}\n\n@keyframes blurOut {\n  from {\n    backdrop-filter: blur(4px);\n  }\n  to {\n    backdrop-filter: blur(0px);\n  }\n}\n\n/* Special Effects Animations */\n\n/* Shake Animation (for errors) */\n@keyframes shake {\n  0%, 100% {\n    transform: translateX(0);\n  }\n  10%, 30%, 50%, 70%, 90% {\n    transform: translateX(-5px);\n  }\n  20%, 40%, 60%, 80% {\n    transform: translateX(5px);\n  }\n}\n\n/* Pulse Animation (for emphasis) */\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.05);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/* Button Hover Effects */\n@keyframes buttonHover {\n  0% {\n    transform: translateY(0);\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  }\n  50% {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);\n  }\n  100% {\n    transform: translateY(-1px);\n    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n  }\n}\n\n/* Accessibility: Reduce motion */\n@media (prefers-reduced-motion: reduce) {\n  .alert-overlay,\n  .alert-wrapper,\n  .alert-button {\n    animation-duration: 0.01ms;\n    animation-iteration-count: 1;\n    transition-duration: 0.01ms;\n  }\n  \n  .alert-overlay {\n    animation: none;\n    opacity: 1;\n  }\n  \n  .alert-wrapper {\n    animation: none;\n    opacity: 1;\n    transform: none;\n  }\n}";
 
 // src/colorSchemas.css
 var colorSchemas_default = "/* ========== LIGHT SCHEMA (Default) ========== */\n.schema-light-overlay {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n\n.schema-light-wrapper {\n  background-color: #ffffff;\n  color: #111827;\n}\n\n.schema-light-title {\n  color: #111827;\n}\n\n.schema-light-message {\n  color: #6b7280;\n}\n\n.schema-light-cancel {\n  background-color: #f3f4f6;\n  color: #374151;\n  outline-color: #9ca3af;\n}\n\n.schema-light-cancel:hover {\n  background-color: #e5e7eb;\n  transform: translateY(-1px);\n}\n\n.schema-light-cancel:active {\n  background-color: #d1d5db;\n}\n\n.schema-light-cancel-danger {\n  background-color: #fee2e2;\n  color: #991b1b;\n  outline-color: #f87171;\n}\n\n.schema-light-cancel-danger:hover {\n  background-color: #fecaca;\n}\n\n.schema-light-ok {\n  background-color: #10b981;\n  color: #ffffff;\n  outline-color: #34d399;\n}\n\n.schema-light-ok:hover {\n  background-color: #059669;\n  transform: translateY(-1px);\n}\n\n.schema-light-ok:active {\n  background-color: #047857;\n}\n\n.schema-light-ok-danger {\n  background-color: #ef4444;\n  color: #ffffff;\n  outline-color: #f87171;\n}\n\n.schema-light-ok-danger:hover {\n  background-color: #dc2626;\n}\n\n/* ========== DARK SCHEMA ========== */\n.schema-dark-overlay {\n  background-color: rgba(0, 0, 0, 0.7);\n}\n\n.schema-dark-wrapper {\n  background-color: #18181b;\n  color: #f4f4f5;\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.3),\n    0 10px 10px -5px rgba(0, 0, 0, 0.2),\n    0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n\n.schema-dark-title {\n  color: #f4f4f5;\n}\n\n.schema-dark-message {\n  color: #a1a1aa;\n}\n\n.schema-dark-cancel {\n  background-color: #27272a;\n  color: #e4e4e7;\n  outline-color: #71717a;\n}\n\n.schema-dark-cancel:hover {\n  background-color: #3f3f46;\n  transform: translateY(-1px);\n}\n\n.schema-dark-cancel:active {\n  background-color: #52525b;\n}\n\n.schema-dark-cancel-danger {\n  background-color: #7f1d1d;\n  color: #fecaca;\n  outline-color: #ef4444;\n}\n\n.schema-dark-cancel-danger:hover {\n  background-color: #991b1b;\n}\n\n.schema-dark-ok {\n  background-color: #10b981;\n  color: #ffffff;\n  outline-color: #34d399;\n}\n\n.schema-dark-ok:hover {\n  background-color: #059669;\n  transform: translateY(-1px);\n}\n\n.schema-dark-ok:active {\n  background-color: #047857;\n}\n\n.schema-dark-ok-danger {\n  background-color: #dc2626;\n  color: #ffffff;\n  outline-color: #ef4444;\n}\n\n.schema-dark-ok-danger:hover {\n  background-color: #b91c1c;\n}\n\n/* ========== BLUE SCHEMA ========== */\n.schema-blue-overlay {\n  background-color: rgba(59, 130, 246, 0.3);\n}\n\n.schema-blue-wrapper {\n  background-color: #eff6ff;\n  color: #1e3a8a;\n  box-shadow: \n    0 20px 25px -5px rgba(59, 130, 246, 0.15),\n    0 10px 10px -5px rgba(59, 130, 246, 0.1),\n    0 0 0 1px rgba(59, 130, 246, 0.1);\n}\n\n.schema-blue-title {\n  color: #1e3a8a;\n}\n\n.schema-blue-message {\n  color: #3b82f6;\n}\n\n.schema-blue-cancel {\n  background-color: #dbeafe;\n  color: #1e40af;\n  outline-color: #60a5fa;\n}\n\n.schema-blue-cancel:hover {\n  background-color: #bfdbfe;\n  transform: translateY(-1px);\n}\n\n.schema-blue-cancel:active {\n  background-color: #93c5fd;\n}\n\n.schema-blue-cancel-danger {\n  background-color: #fee2e2;\n  color: #991b1b;\n  outline-color: #f87171;\n}\n\n.schema-blue-ok {\n  background-color: #3b82f6;\n  color: #ffffff;\n  outline-color: #60a5fa;\n}\n\n.schema-blue-ok:hover {\n  background-color: #2563eb;\n  transform: translateY(-1px);\n}\n\n.schema-blue-ok:active {\n  background-color: #1d4ed8;\n}\n\n.schema-blue-ok-danger {\n  background-color: #ef4444;\n  color: #ffffff;\n  outline-color: #f87171;\n}\n\n/* ========== RED SCHEMA ========== */\n.schema-red-overlay {\n  background-color: rgba(220, 38, 38, 0.2);\n}\n\n.schema-red-wrapper {\n  background-color: #fef2f2;\n  color: #7f1d1d;\n  box-shadow: \n    0 20px 25px -5px rgba(220, 38, 38, 0.15),\n    0 10px 10px -5px rgba(220, 38, 38, 0.1),\n    0 0 0 1px rgba(220, 38, 38, 0.1);\n}\n\n.schema-red-title {\n  color: #7f1d1d;\n}\n\n.schema-red-message {\n  color: #ef4444;\n}\n\n.schema-red-cancel {\n  background-color: #fecaca;\n  color: #991b1b;\n  outline-color: #f87171;\n}\n\n.schema-red-cancel:hover {\n  background-color: #fca5a5;\n  transform: translateY(-1px);\n}\n\n.schema-red-cancel:active {\n  background-color: #f87171;\n}\n\n.schema-red-ok {\n  background-color: #dc2626;\n  color: #ffffff;\n  outline-color: #ef4444;\n}\n\n.schema-red-ok:hover {\n  background-color: #b91c1c;\n  transform: translateY(-1px);\n}\n\n.schema-red-ok:active {\n  background-color: #991b1b;\n}\n\n.schema-red-ok-danger {\n  background-color: #991b1b;\n  color: #ffffff;\n  outline-color: #dc2626;\n}\n\n/* ========== GREEN SCHEMA ========== */\n.schema-green-overlay {\n  background-color: rgba(16, 185, 129, 0.2);\n}\n\n.schema-green-wrapper {\n  background-color: #ecfdf5;\n  color: #064e3b;\n  box-shadow: \n    0 20px 25px -5px rgba(16, 185, 129, 0.15),\n    0 10px 10px -5px rgba(16, 185, 129, 0.1),\n    0 0 0 1px rgba(16, 185, 129, 0.1);\n}\n\n.schema-green-title {\n  color: #064e3b;\n}\n\n.schema-green-message {\n  color: #10b981;\n}\n\n.schema-green-cancel {\n  background-color: #d1fae5;\n  color: #047857;\n  outline-color: #34d399;\n}\n\n.schema-green-cancel:hover {\n  background-color: #a7f3d0;\n  transform: translateY(-1px);\n}\n\n.schema-green-cancel:active {\n  background-color: #6ee7b7;\n}\n\n.schema-green-cancel-danger {\n  background-color: #fee2e2;\n  color: #991b1b;\n  outline-color: #f87171;\n}\n\n.schema-green-ok {\n  background-color: #10b981;\n  color: #ffffff;\n  outline-color: #34d399;\n}\n\n.schema-green-ok:hover {\n  background-color: #059669;\n  transform: translateY(-1px);\n}\n\n.schema-green-ok:active {\n  background-color: #047857;\n}\n\n.schema-green-ok-danger {\n  background-color: #ef4444;\n  color: #ffffff;\n  outline-color: #f87171;\n}\n\n/* ========== PURPLE SCHEMA ========== */\n.schema-purple-overlay {\n  background-color: rgba(139, 92, 246, 0.2);\n}\n\n.schema-purple-wrapper {\n  background-color: #f5f3ff;\n  color: #5b21b6;\n  box-shadow: \n    0 20px 25px -5px rgba(139, 92, 246, 0.15),\n    0 10px 10px -5px rgba(139, 92, 246, 0.1),\n    0 0 0 1px rgba(139, 92, 246, 0.1);\n}\n\n.schema-purple-title {\n  color: #5b21b6;\n}\n\n.schema-purple-message {\n  color: #8b5cf6;\n}\n\n.schema-purple-cancel {\n  background-color: #ede9fe;\n  color: #6d28d9;\n  outline-color: #a78bfa;\n}\n\n.schema-purple-cancel:hover {\n  background-color: #ddd6fe;\n  transform: translateY(-1px);\n}\n\n.schema-purple-cancel:active {\n  background-color: #c4b5fd;\n}\n\n.schema-purple-cancel-danger {\n  background-color: #fee2e2;\n  color: #991b1b;\n  outline-color: #f87171;\n}\n\n.schema-purple-ok {\n  background-color: #8b5cf6;\n  color: #ffffff;\n  outline-color: #a78bfa;\n}\n\n.schema-purple-ok:hover {\n  background-color: #7c3aed;\n  transform: translateY(-1px);\n}\n\n.schema-purple-ok:active {\n  background-color: #6d28d9;\n}\n\n.schema-purple-ok-danger {\n  background-color: #ef4444;\n  color: #ffffff;\n  outline-color: #f87171;\n}\n";
@@ -67,22 +124,51 @@ function ensureStyles() {
   style.textContent = ALL_CSS;
   document.head.appendChild(style);
   stylesInjected = true;
-  console.log("React Confirm Lite: Styles injected");
 }
 function cx(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+var animationPairs = {
+  slide: { enter: "", exit: "alert-wrapper-exit" },
+  fadeScale: { enter: "alert-animate-fadeInScale", exit: "alert-animate-fadeOutScale" },
+  bounce: { enter: "alert-animate-bounceIn", exit: "alert-animate-bounceOut" },
+  flip: { enter: "alert-animate-flipIn", exit: "alert-animate-flipOut" },
+  zoom: { enter: "alert-animate-zoomIn", exit: "alert-animate-zoomOut" },
+  rotate: { enter: "alert-animate-rotateIn", exit: "alert-animate-rotateOut" },
+  fadeUp: { enter: "alert-animate-fadeInUp", exit: "alert-animate-fadeOutDown" },
+  drop: { enter: "alert-animate-dropIn", exit: "alert-animate-dropOut" },
+  slideRight: { enter: "alert-animate-slideInRight", exit: "alert-animate-slideOutLeft" },
+  slideLeft: { enter: "alert-animate-slideInLeft", exit: "alert-animate-slideOutRight" },
+  fadeDown: { enter: "alert-animate-fadeInDown", exit: "alert-animate-fadeOutUp" },
+  slideVertical: { enter: "alert-animate-slideDownIn", exit: "alert-animate-slideUpOut" },
+  rotateRight: { enter: "alert-animate-rotateInRight", exit: "alert-animate-rotateOutLeft" },
+  zoomSmall: { enter: "alert-animate-zoomInSmall", exit: "alert-animate-zoomOutSmall" },
+  bounceSmall: { enter: "alert-animate-bounceInSmall", exit: "alert-animate-bounceOutSmall" },
+  fadeBlur: { enter: "alert-animate-fadeInBlur", exit: "alert-animate-fadeOutBlur" },
+  fadeShrink: { enter: "alert-animate-fadeInShrink", exit: "alert-animate-fadeOutShrink" }
+};
 var ConfirmContainer = ({
   classes = {},
   animationDuration = 300,
   defaultColorSchema = "dark",
-  children
+  closeOnEscape = true,
+  closeOnClickOutside = true,
+  animation = "slide",
+  animationDurationIn,
+  animationDurationOut,
+  children,
+  id
 }) => {
   const [alerts, setAlerts] = useState([]);
   const [isVisible, setIsVisible] = useState(false);
   const [currentAlert, setCurrentAlert] = useState(null);
-  const [isAnimating, setisAnimating] = useState(false);
+  const [isExiting, setIsExiting] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
   const overlayRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const exitTimerRef = useRef(null);
+  const containerId2 = useRef(id || `confirm-${Date.now().toString()}`);
+  const nullElement = /* @__PURE__ */ jsx("div", { id: containerId2.current, className: "null-confirm-container" });
   useEffect(() => {
     subscribe((newAlerts) => {
       setAlerts(newAlerts);
@@ -92,135 +178,229 @@ var ConfirmContainer = ({
     ensureStyles();
   }, []);
   useEffect(() => {
-    if (alerts.length > 0 && !currentAlert) {
-      setCurrentAlert(alerts[0]);
-    } else if (alerts.length > 0 && currentAlert && alerts[0] !== currentAlert) {
-      requestAnimationFrame(() => {
-        setIsVisible(false);
-      });
-      setTimeout(() => {
-        setCurrentAlert(alerts[0]);
-      }, animationDuration);
-    } else if (alerts.length === 0 && currentAlert) {
-      requestAnimationFrame(() => {
-        setIsVisible(false);
-      });
-      setTimeout(() => {
+    if (alerts.length > 0 && !currentAlert && !isExiting) {
+      const nextAlert = alerts[0];
+      const shouldShowAlert = (
+        // Case 1: Alert has no ID (can be shown by any container)
+        !nextAlert.id || // Case 2: Alert has an ID that matches our container ID
+        nextAlert.id === containerId2.current || // Case 3: No container is currently active
+        !getActiveContainerId()
+      );
+      if (shouldShowAlert) {
+        const currentActive = getActiveContainerId();
+        if (!currentActive || currentActive === containerId2.current) {
+          setActiveContainer(containerId2.current);
+          setIsContainerActive(true);
+          setIsMounted(true);
+          setCurrentAlert(nextAlert);
+          setIsVisible(true);
+        }
+      }
+    } else if (alerts.length === 0 && currentAlert && isVisible) {
+      console.log("Starting exit animation");
+      setIsExiting(true);
+      setIsVisible(false);
+      if (exitTimerRef.current) {
+        clearTimeout(exitTimerRef.current);
+      }
+      const exitDuration = animationDurationOut || animationDuration;
+      exitTimerRef.current = setTimeout(() => {
+        console.log("Exit animation complete");
+        setIsContainerActive(false);
+        setIsExiting(false);
+        setCurrentAlert(null);
+        setIsMounted(false);
+      }, exitDuration);
+    } else if (alerts.length > 0 && currentAlert && alerts[0].id !== currentAlert.id) {
+      console.log("Replacing with new alert");
+      setIsExiting(true);
+      setIsVisible(false);
+      if (exitTimerRef.current) {
+        clearTimeout(exitTimerRef.current);
+      }
+      const exitDuration = animationDurationOut || animationDuration;
+      exitTimerRef.current = setTimeout(() => {
+        setIsContainerActive(false);
+        setIsExiting(false);
         setCurrentAlert(null);
-      }, animationDuration);
+        setIsMounted(false);
+      }, exitDuration);
     }
-  }, [alerts, animationDuration]);
+  }, [alerts, currentAlert, animationDuration, animationDurationOut, isVisible]);
+  const handleClose = useCallback(async (value) => {
+    if (!currentAlert || isExiting) return;
+    setIsExiting(true);
+    setIsVisible(false);
+    const exitDuration = animationDurationOut || animationDuration;
+    if (exitTimerRef.current) {
+      clearTimeout(exitTimerRef.current);
+    }
+    exitTimerRef.current = setTimeout(() => {
+      closeAlert(value);
+      setIsExiting(false);
+      setCurrentAlert(null);
+      setIsMounted(false);
+      setIsContainerActive(false);
+    }, exitDuration);
+  }, [currentAlert, isExiting, animationDuration, animationDurationOut]);
+  const handleCancel = useCallback(() => {
+    if (currentAlert && isVisible && !isExiting) {
+      handleClose(false);
+    }
+  }, [currentAlert, isVisible, isExiting, handleClose]);
+  const handleOk = useCallback(() => {
+    if (currentAlert && isVisible && !isExiting) {
+      handleClose(true);
+    }
+  }, [currentAlert, isVisible, isExiting, handleClose]);
+  const handleEscKey = useCallback((event) => {
+    if (event.key === "Escape" && closeOnEscape && currentAlert && isVisible && !isExiting) {
+      event.preventDefault();
+      event.stopPropagation();
+      handleClose(null);
+    }
+  }, [closeOnEscape, currentAlert, isVisible, isExiting, handleClose]);
   useEffect(() => {
-    if (currentAlert) {
-      setisAnimating(true);
-    } else if (!currentAlert) {
-      setisAnimating(false);
+    if (currentAlert && isVisible && !isExiting) {
+      window.addEventListener("keydown", handleEscKey, { capture: true });
     }
-    if (currentAlert && !children) {
-      setIsVisible(true);
-    } else if (currentAlert && children) {
-      requestAnimationFrame(() => {
-        setIsVisible(true);
-      });
+    return () => {
+      window.removeEventListener("keydown", handleEscKey, { capture: true });
+    };
+  }, [handleEscKey, currentAlert, isVisible, isExiting]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target) && closeOnClickOutside && currentAlert && isVisible && !isExiting) {
+        handleClose(null);
+      }
+    };
+    if (currentAlert && isVisible && !isExiting) {
+      document.addEventListener("mousedown", handleClickOutside);
     }
-  }, [currentAlert, children]);
-  const handleClose = useCallback((value) => {
-    closeAlert(value);
-  }, []);
-  const handleCancel = useCallback(() => handleClose(false), [handleClose]);
-  const handleOk = useCallback(() => handleClose(true), [handleClose]);
-  if (!currentAlert && !isVisible) {
-    return null;
-  }
-  if (!currentAlert) {
-    return null;
-  }
-  if (currentAlert && !isAnimating) {
-    return null;
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [closeOnClickOutside, currentAlert, isVisible, isExiting, handleClose]);
+  if (!isMounted && !isExiting) {
+    return nullElement;
   }
-  const colorSchema = currentAlert.colorSchema || defaultColorSchema;
-  if (children) {
-    return children({
-      isVisible,
-      confirm: currentAlert,
-      handleCancel,
-      handleOk,
-      colorSchema
-    });
+  if (!currentAlert || !getIsContainerActive()) {
+    return nullElement;
   }
+  const colorSchema = currentAlert?.colorSchema || defaultColorSchema;
   const schemaClass = `schema-${colorSchema}`;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: overlayRef,
-      className: cx(
-        "alert-overlay",
-        !isVisible ? "alert-overlay-exit" : "",
-        `${schemaClass}-overlay`,
-        classes.overlay
-      ),
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cx(
-            "alert-wrapper",
-            !isVisible ? "alert-wrapper-exit" : "",
-            `${schemaClass}-wrapper`,
-            classes.wrapper
-          ),
-          children: [
-            /* @__PURE__ */ jsx("h2", { className: cx(
-              "alert-title",
-              `${schemaClass}-title`,
-              classes.title
-            ), children: currentAlert.title }),
-            /* @__PURE__ */ jsx("p", { className: cx(
-              "alert-message",
-              `${schemaClass}-message`,
-              classes.message
-            ), children: currentAlert.message }),
-            /* @__PURE__ */ jsxs("div", { className: "alert-buttons", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: handleCancel,
-                  disabled: !isVisible,
-                  className: cx(
-                    "alert-button alert-button-cancel",
-                    `${schemaClass}-cancel`,
-                    currentAlert.isDestructive ? `${schemaClass}-cancel-danger` : "",
-                    classes.button,
-                    classes.cancel
-                  ),
-                  children: currentAlert.cancelText || "Cancel"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: handleOk,
-                  disabled: !isVisible,
-                  className: cx(
-                    "alert-button alert-button-ok",
-                    `${schemaClass}-ok`,
-                    currentAlert.isDestructive ? `${schemaClass}-ok-danger` : "",
-                    classes.button,
-                    classes.ok
-                  ),
-                  children: currentAlert.okText || "OK"
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  );
+  const animationStyle = {};
+  const currentDuration = isVisible ? animationDurationIn || animationDuration : animationDurationOut || animationDuration;
+  animationStyle.animationDuration = `${currentDuration}ms`;
+  animationStyle.animationFillMode = "forwards";
+  const animationClass = isVisible ? animationPairs[animation].enter : animationPairs[animation].exit;
+  if (children && currentAlert && getActiveContainerId() === containerId2.current) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      nullElement,
+      children({
+        isVisible: isVisible && !isExiting,
+        confirm: currentAlert,
+        handleCancel,
+        handleOk,
+        containerRef: wrapperRef,
+        colorSchema,
+        animationClass,
+        animationStyle
+      })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    nullElement,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: overlayRef,
+        className: cx(
+          "alert-overlay",
+          !isVisible ? "alert-overlay-exit" : "",
+          `${schemaClass}-overlay`,
+          classes.overlay
+        ),
+        style: animationStyle,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: wrapperRef,
+            className: cx(
+              "alert-wrapper",
+              animationClass,
+              `${schemaClass}-wrapper`,
+              classes.wrapper
+            ),
+            style: animationStyle,
+            children: [
+              /* @__PURE__ */ jsx("h2", { className: cx(
+                "alert-title",
+                `${schemaClass}-title`,
+                classes.title
+              ), children: currentAlert.title }),
+              /* @__PURE__ */ jsx("p", { className: cx(
+                "alert-message",
+                `${schemaClass}-message`,
+                classes.message
+              ), children: currentAlert.message }),
+              /* @__PURE__ */ jsxs("div", { className: "alert-buttons", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleCancel,
+                    disabled: isExiting || !isVisible,
+                    className: cx(
+                      "alert-button alert-button-cancel",
+                      `${schemaClass}-cancel`,
+                      classes.button,
+                      classes.cancel
+                    ),
+                    children: currentAlert.cancelText || "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleOk,
+                    disabled: isExiting || !isVisible,
+                    className: cx(
+                      "alert-button alert-button-ok",
+                      `${schemaClass}-ok`,
+                      classes.button,
+                      classes.ok
+                    ),
+                    children: currentAlert.okText || "OK"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
 };
 var confirmContainer_default = ConfirmContainer;
 
 // src/confirm.ts
 async function confirm(input) {
+  if (typeof input === "string") {
+    const containerId2 = await getElement();
+    const result2 = await addAlert({
+      message: input,
+      id: containerId2
+    });
+    return result2;
+  }
+  if (!input.id) {
+    const containerId2 = await getElement();
+    const result2 = await addAlert({
+      ...input,
+      id: containerId2
+    });
+    return result2;
+  }
   const result = await addAlert(input);
   return result;
 }