react-confirm-lite 1.3.0 → 1.4.0

package/README.md

@@ -27,14 +27,23 @@ pnpm add react-confirm-lite
 
 ## 🚀 Quick Start
 
-### 1. Add the Container Component
+### Complete Example
 
-Place `<ConfirmContainer />` in your app (usually in root layout):
+Place `<ConfirmContainer />` in your app (usually in root layout) and use it with `confirm`
 
 ```tsx
-import { ConfirmContainer } from 'react-confirm-lite';
+import { ConfirmContainer, confirm } from 'react-confirm-lite';
 
 function App() {
+  async function handleAction() {
+    const result = await confirm('Are you sure?');
+    
+    if (result) {
+      console.log('User confirmed!');
+    } else {
+      console.log('User cancelled!');
+    }
+  }
   return (
     <div>
       {/* Your app content */}
@@ -44,23 +53,17 @@ function App() {
 }
 ```
 
-### 2. Use the Confirm Function
-
-Import and use `confirm()` anywhere in your app:
-
-```tsx
-import { confirm } from 'react-confirm-lite';
+### Important 
+By default it shows the closest container to button to which you clicked to show the confirmation dialog but you are a programmer and you will try thing and sometimes you may use it in useEffect hook then in this case it will show the first rendered confirm container.
 
-async function handleAction() {
-  const result = await confirm('Are you sure?');
-  
-  if (result) {
-    console.log('User confirmed!');
-  } else {
-    console.log('User cancelled!');
-  }
-}
+If you want to show a specific container by confirm api no matters where it is then you can pass the id like this
+```jsx
+// In confirm Api
+confirm({id:'1' , message:'Are you sure?'})
+// And in confirm Container
+<ConfirmContainer id='1'/>
 ```
+And make sure that not to pass same id to different `<ConfirmContainer />` In this way It will show both of these containers
 
 ## 🎯 Features
 
@@ -163,6 +166,7 @@ const result = await confirm({
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+|`id`|`string`| `random` | To show a specific container with a specific confirm() app |
 | `animation` | `AnimationType` | `'slide'` | Animation type (18 options) |
 | `animationDuration` | `number` | `300` | Base animation duration (ms) |
 | `animationDurationIn` | `number` | - | Enter animation duration |
@@ -383,6 +387,10 @@ const handleFlexibleDialog = async () => {
 
 ## 🚨 Troubleshooting
 
+### Multiple dialogs are showing?
+- Make sure you are on version `>=1.4`
+- Make sure you didn't pass same id to different `<ConfirmContainer />`
+
 ### Dialog not showing?
 - Make sure `<ConfirmContainer />` is mounted
 - Check it's not conditionally rendered
@@ -408,6 +416,9 @@ const handleFlexibleDialog = async () => {
 - Use `classes` prop to override styles
 - Check CSS specificity
 
+ You can also use it in TanStack with react easily
+
+
 ## 📱 Next.js Support
 
 ### App Router (Next.js 15+)
@@ -475,6 +486,207 @@ if (result === true) {
 - Zero configuration
 - Three return states (true/false/null)
 
+# Contributing to react-confirm-lite
+
+Thanks for your interest in contributing. This project is intentionally lightweight, so the contribution workflow is kept simple and explicit. Please read this fully before starting.
+
+---
+
+## 📦 Project Structure
+
+```
+react-confirm-lite/
+├─ src/               # Library source code
+├─ dist/              # Built output (generated)
+├─ example/           # Local playground app (Vite + React)
+├─ CONTRIBUTING.md
+├─ README.md
+├─ package.json
+├─ tsup.config.ts
+```
+
+* **src/** → where you make changes
+* **dist/** → auto-generated by tsup (do not edit manually)
+* **example/** → used to test changes locally
+
+---
+
+## 🧰 Prerequisites
+
+* Node.js >= 18
+* npm >= 9
+* Basic familiarity with React + TypeScript
+
+---
+
+## 🚀 Local Development Setup
+
+### 1. Clone the repository
+
+```bash
+git clone https://github.com/SaadNasir-git/react-confirm-lite.git
+cd react-confirm-lite
+```
+
+### 2. Install dependencies (root)
+
+```bash
+npm install
+```
+
+---
+
+## 🔁 Development Workflow (IMPORTANT)
+
+This project uses **tsup watch mode** for live rebuilding.
+
+### Terminal 1 — Run library in watch mode
+
+From the project root:
+
+```bash
+npm run build:watch
+```
+
+This will:
+
+* Watch `src/` for changes
+* Automatically rebuild `dist/`
+* Re-run post-build steps when files change
+
+⚠️ Leave this terminal running.
+
+---
+
+### Terminal 2 — Run example app
+
+```bash
+cd example
+npm install
+npm run dev
+```
+
+Open the provided local URL in your browser.
+
+---
+
+## 🧪 How to Test Your Changes
+
+1. Modify files inside `src/`
+2. tsup automatically rebuilds the library
+3. Refresh the browser running the example app
+4. Verify behavior visually and via console logs
+
+You **do not** need to:
+
+* run `npm pack`
+* reinstall the package
+* publish to npm
+
+This setup mirrors real-world library development.
+
+---
+
+## 🧠 What to Change (and What Not to)
+
+### ✅ You can change
+
+* Logic in `src/`
+* Types in `types.ts`
+* Styles / animations
+* README documentation
+
+### ❌ Do not change
+
+* `dist/` files manually
+* Version number (maintainer handles releases)
+* Build configuration unless discussed
+
+---
+
+## 🧹 Code Style
+
+* Use TypeScript types explicitly
+* Avoid unnecessary abstractions
+* Prefer clarity over cleverness
+* Keep bundle size in mind
+
+---
+
+## 🐞 Reporting Bugs
+
+When opening an issue, include:
+
+* What you expected
+* What actually happened
+* Steps to reproduce
+* Browser and React version
+
+---
+
+## 💡 Feature Requests
+
+Feature requests are welcome, but keep in mind:
+
+* This library aims to stay minimal
+* Features should not add heavy dependencies
+* API simplicity is a priority
+
+---
+
+## 🛠 Development & Contributing
+
+If you want to contribute or modify the library locally, use the built-in example app and watch mode.
+
+### Local Development Setup
+
+```bash
+git clone https://github.com/SaadNasir-git/react-confirm-lite.git
+cd react-confirm-lite
+npm install
+```
+
+### Run Library in Watch Mode
+
+In the project root:
+
+```bash
+npm run build:watch
+```
+
+This watches the `src/` directory and automatically rebuilds `dist/` on every change.
+
+### Run Example App
+
+In a second terminal:
+
+```bash
+cd example
+npm install
+npm run dev
+```
+
+Open the local URL shown by Vite. Any change you make in `src/` will be reflected after a browser refresh.
+
+### Notes
+
+* Do **not** edit files inside `dist/` manually
+* You do **not** need to run `npm pack` or reinstall the package
+* Versioning and releases are handled by the maintainer
+
+For more details, see **CONTRIBUTING.md**.
+
+---
+
+## 📄 License
+
+By contributing, you agree that your contributions will be licensed under the MIT License.
+
+---
+
+Thanks for contributing to **react-confirm-lite** 🙌
+
+
 ## 📄 License
 
 MIT License - free for personal and commercial use.

package/dist/index.d.ts

@@ -12,7 +12,8 @@ type ConfirmClasses = {
     cancel?: string;
     ok?: string;
 };
-type ConfirmInput = string | {
+type ConfirmInput = {
+    id?: string;
     title?: string;
     message: string;
     colorSchema?: ColorSchema;
@@ -20,6 +21,7 @@ type ConfirmInput = string | {
     cancelText?: string;
 };
 type ConfirmOptions = {
+    id: string;
     title: string;
     message: string;
     resolve: (value: boolean | null) => void;
@@ -70,9 +72,10 @@ type Props = {
         animationClass: string;
         animationStyle: CSSProperties;
     }) => ReactNode;
+    id?: string;
 };
-declare const ConfirmContainer: ({ classes, animationDuration, defaultColorSchema, closeOnEscape, closeOnClickOutside, animation, animationDurationIn, animationDurationOut, children }: Props) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.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 | null>;
+declare function confirm(input: string | ConfirmInput): Promise<boolean | null>;
 
 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,9 +63,43 @@ 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  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}";
+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 = "/* 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}";
@@ -99,7 +156,8 @@ var ConfirmContainer = ({
   animation = "slide",
   animationDurationIn,
   animationDurationOut,
-  children
+  children,
+  id
 }) => {
   const [alerts, setAlerts] = useState([]);
   const [isVisible, setIsVisible] = useState(false);
@@ -109,6 +167,8 @@ var ConfirmContainer = ({
   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);
@@ -119,13 +179,25 @@ var ConfirmContainer = ({
   }, []);
   useEffect(() => {
     if (alerts.length > 0 && !currentAlert && !isExiting) {
-      setIsMounted(true);
-      const newAlert = alerts[0];
-      setCurrentAlert(newAlert);
-      requestAnimationFrame(() => {
-        setIsVisible(true);
-      });
+      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) {
@@ -133,11 +205,14 @@ var ConfirmContainer = ({
       }
       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] !== currentAlert) {
+    } else if (alerts.length > 0 && currentAlert && alerts[0].id !== currentAlert.id) {
+      console.log("Replacing with new alert");
       setIsExiting(true);
       setIsVisible(false);
       if (exitTimerRef.current) {
@@ -145,25 +220,29 @@ var ConfirmContainer = ({
       }
       const exitDuration = animationDurationOut || animationDuration;
       exitTimerRef.current = setTimeout(() => {
+        setIsContainerActive(false);
         setIsExiting(false);
-        const newAlert = alerts[0];
-        setCurrentAlert(newAlert);
-        requestAnimationFrame(() => {
-          setIsVisible(true);
-        });
+        setCurrentAlert(null);
+        setIsMounted(false);
       }, exitDuration);
     }
   }, [alerts, currentAlert, animationDuration, animationDurationOut, isVisible]);
-  useEffect(() => {
-    return () => {
-      if (exitTimerRef.current) {
-        clearTimeout(exitTimerRef.current);
-      }
-    };
-  }, []);
-  const handleClose = useCallback((value) => {
-    closeAlert(value);
-  }, []);
+  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);
@@ -203,105 +282,125 @@ var ConfirmContainer = ({
     };
   }, [closeOnClickOutside, currentAlert, isVisible, isExiting, handleClose]);
   if (!isMounted && !isExiting) {
-    return null;
+    return nullElement;
+  }
+  if (!currentAlert || !getIsContainerActive()) {
+    return nullElement;
   }
   const colorSchema = currentAlert?.colorSchema || defaultColorSchema;
   const schemaClass = `schema-${colorSchema}`;
   const animationStyle = {};
   const currentDuration = isVisible ? animationDurationIn || animationDuration : animationDurationOut || animationDuration;
-  if (currentDuration && currentDuration !== 300) {
-    animationStyle.animationDuration = `${currentDuration}ms`;
-  }
+  animationStyle.animationDuration = `${currentDuration}ms`;
   animationStyle.animationFillMode = "forwards";
   const animationClass = isVisible ? animationPairs[animation].enter : animationPairs[animation].exit;
-  if (children && currentAlert) {
-    return children({
-      isVisible: isVisible && !isExiting,
-      confirm: currentAlert,
-      handleCancel,
-      handleOk,
-      containerRef: wrapperRef,
-      colorSchema,
-      animationClass,
-      animationStyle
-    });
-  }
-  if (!currentAlert) {
-    return null;
+  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__ */ 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"
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  );
+  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;
 }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/confirm_store.ts","../src/confirm.css","../src/animations.css","../src/colorSchemas.css","../src/bundle-css.ts","../src/confirmContainer.tsx","../src/confirm.ts"],"names":[],"mappings":";;;;AAIA,IAAI,WAA6B,EAAC;AAClC,IAAI,SAAA,uBAAgB,GAAA,EAAc;AAE3B,SAAS,SAAS,KAAA,EAA8C;AACrE,EAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,KAAY;AAC9B,IAAA,MAAM,KAAA,GACJ,OAAO,KAAA,KAAU,QAAA,GACb;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,OAAA,EAAS,KAAA;AAAA,MACT;AAAA,KACF,GACE;AAAA,MACA,KAAA,EAAO,MAAM,KAAA,IAAS,SAAA;AAAA,MACtB,SAAS,KAAA,CAAM,OAAA;AAAA,MACf,QAAQ,KAAA,CAAM,MAAA;AAAA,MACd,YAAY,KAAA,CAAM,UAAA;AAAA,MAClB,aAAa,KAAA,CAAM,WAAA;AAAA,MACnB;AAAA,KACF;AAEJ,IAAA,QAAA,GAAW,CAAC,GAAG,QAAA,EAAU,KAAK,CAAA;AAE9B,IAAA,IAAI,QAAA,CAAS,WAAW,CAAA,EAAG;AACzB,MAAA,IAAA,EAAK;AAAA,IACP;AAAA,EACF,CAAC,CAAA;AACH;AAEO,SAAS,WAAW,MAAA,EAAwB;AACjD,EAAA,MAAM,KAAA,GAAQ,SAAS,CAAC,CAAA;AACxB,EAAA,IAAI,CAAC,KAAA,EAAO;AAGZ,EAAA,KAAA,CAAM,QAAQ,MAAM,CAAA;AAGpB,EAAA,QAAA,GAAW,QAAA,CAAS,MAAM,CAAC,CAAA;AAE3B,EAAA,IAAA,EAAK;AACP;AAEO,SAAS,UAAU,QAAA,EAAoB;AAC5C,EAAA,SAAA,CAAU,IAAI,QAAQ,CAAA;AACtB,EAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,EAAA,OAAO,MAAM,SAAA,CAAU,MAAA,CAAO,QAAQ,CAAA;AACxC;AAEO,SAAS,IAAA,GAAO;AACrB,EAAA,SAAA,CAAU,OAAA,CAAQ,CAAC,QAAA,KAAa,QAAA,CAAS,QAAQ,CAAC,CAAA;AACpD;;;ACtDA,IAAA,eAAA,GAAA,g6JAAA;;;ACAA,IAAA,kBAAA,GAAA,u2PAAA;;;ACAA,IAAA,oBAAA,GAAA,o7NAAA;;;ACKA,IAAM,OAAA,GAAU,GAAG,eAAU;AAAA,EAAK,kBAAa;AAAA,EAAK,oBAAe,CAAA,CAAA;AAEnE,IAAI,cAAA,GAAiB,KAAA;AAEd,SAAS,YAAA,GAAe;AAC7B,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACnC,IAAA;AAAA,EACF;AAEA,EAAA,IAAI,cAAA,EAAgB;AAClB,IAAA;AAAA,EACF;AAGA,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AAC5C,EAAA,KAAA,CAAM,YAAA,CAAa,2BAA2B,EAAE,CAAA;AAChD,EAAA,KAAA,CAAM,WAAA,GAAc,OAAA;AACpB,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,KAAK,CAAA;AAE/B,EAAA,cAAA,GAAiB,IAAA;AACnB;ACjBA,SAAS,MAAM,OAAA,EAAiC;AAC9C,EAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACzC;AAEA,IAAM,cAAA,GAAiB;AAAA,EACrB,KAAA,EAAO,EAAE,KAAA,EAAO,EAAA,EAAI,MAAM,oBAAA,EAAqB;AAAA,EAC/C,SAAA,EAAW,EAAE,KAAA,EAAO,2BAAA,EAA6B,MAAM,4BAAA,EAA6B;AAAA,EACpF,MAAA,EAAQ,EAAE,KAAA,EAAO,wBAAA,EAA0B,MAAM,yBAAA,EAA0B;AAAA,EAC3E,IAAA,EAAM,EAAE,KAAA,EAAO,sBAAA,EAAwB,MAAM,uBAAA,EAAwB;AAAA,EACrE,IAAA,EAAM,EAAE,KAAA,EAAO,sBAAA,EAAwB,MAAM,uBAAA,EAAwB;AAAA,EACrE,MAAA,EAAQ,EAAE,KAAA,EAAO,wBAAA,EAA0B,MAAM,yBAAA,EAA0B;AAAA,EAC3E,MAAA,EAAQ,EAAE,KAAA,EAAO,wBAAA,EAA0B,MAAM,2BAAA,EAA4B;AAAA,EAC7E,IAAA,EAAM,EAAE,KAAA,EAAO,sBAAA,EAAwB,MAAM,uBAAA,EAAwB;AAAA,EACrE,UAAA,EAAY,EAAE,KAAA,EAAO,4BAAA,EAA8B,MAAM,4BAAA,EAA6B;AAAA,EACtF,SAAA,EAAW,EAAE,KAAA,EAAO,2BAAA,EAA6B,MAAM,6BAAA,EAA8B;AAAA,EACrF,QAAA,EAAU,EAAE,KAAA,EAAO,0BAAA,EAA4B,MAAM,yBAAA,EAA0B;AAAA,EAC/E,aAAA,EAAe,EAAE,KAAA,EAAO,2BAAA,EAA6B,MAAM,0BAAA,EAA2B;AAAA,EACtF,WAAA,EAAa,EAAE,KAAA,EAAO,6BAAA,EAA+B,MAAM,6BAAA,EAA8B;AAAA,EACzF,SAAA,EAAW,EAAE,KAAA,EAAO,2BAAA,EAA6B,MAAM,4BAAA,EAA6B;AAAA,EACpF,WAAA,EAAa,EAAE,KAAA,EAAO,6BAAA,EAA+B,MAAM,8BAAA,EAA+B;AAAA,EAC1F,QAAA,EAAU,EAAE,KAAA,EAAO,0BAAA,EAA4B,MAAM,2BAAA,EAA4B;AAAA,EACjF,UAAA,EAAY,EAAE,KAAA,EAAO,4BAAA,EAA8B,MAAM,6BAAA;AAC3D,CAAA;AAuBA,IAAM,mBAAmB,CAAC;AAAA,EACxB,UAAU,EAAC;AAAA,EACX,iBAAA,GAAoB,GAAA;AAAA,EACpB,kBAAA,GAAqB,MAAA;AAAA,EACrB,aAAA,GAAgB,IAAA;AAAA,EAChB,mBAAA,GAAsB,IAAA;AAAA,EACtB,SAAA,GAAY,OAAA;AAAA,EACZ,mBAAA;AAAA,EACA,oBAAA;AAAA,EACA;AACF,CAAA,KAAa;AACX,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,QAAA,CAA2B,EAAE,CAAA;AACzD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAgC,IAAI,CAAA;AAC5E,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,EAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,EAAA,MAAM,YAAA,GAAe,OAAsB,IAAI,CAAA;AAE/C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAA,CAAU,CAAC,SAAA,KAAc;AACvB,MAAA,SAAA,CAAU,SAAS,CAAA;AAAA,IACrB,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,EAAa;AAAA,EACf,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,OAAO,MAAA,GAAS,CAAA,IAAK,CAAC,YAAA,IAAgB,CAAC,SAAA,EAAW;AAEpD,MAAA,YAAA,CAAa,IAAI,CAAA;AACjB,MAAA,MAAM,QAAA,GAAW,OAAO,CAAC,CAAA;AACzB,MAAA,eAAA,CAAgB,QAAQ,CAAA;AACxB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,YAAA,CAAa,IAAI,CAAA;AAAA,MACnB,CAAC,CAAA;AAAA,IACH,CAAA,MAAA,IAAW,MAAA,CAAO,MAAA,KAAW,CAAA,IAAK,gBAAgB,SAAA,EAAW;AAE3D,MAAA,YAAA,CAAa,IAAI,CAAA;AACjB,MAAA,YAAA,CAAa,KAAK,CAAA;AAGlB,MAAA,IAAI,aAAa,OAAA,EAAS;AACxB,QAAA,YAAA,CAAa,aAAa,OAAO,CAAA;AAAA,MACnC;AAGA,MAAA,MAAM,eAAe,oBAAA,IAAwB,iBAAA;AAC7C,MAAA,YAAA,CAAa,OAAA,GAAU,WAAW,MAAM;AACtC,QAAA,YAAA,CAAa,KAAK,CAAA;AAClB,QAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,QAAA,YAAA,CAAa,KAAK,CAAA;AAAA,MACpB,GAAG,YAAY,CAAA;AAAA,IACjB,CAAA,MAAA,IAAW,OAAO,MAAA,GAAS,CAAA,IAAK,gBAAgB,MAAA,CAAO,CAAC,MAAM,YAAA,EAAc;AAE1E,MAAA,YAAA,CAAa,IAAI,CAAA;AACjB,MAAA,YAAA,CAAa,KAAK,CAAA;AAElB,MAAA,IAAI,aAAa,OAAA,EAAS;AACxB,QAAA,YAAA,CAAa,aAAa,OAAO,CAAA;AAAA,MACnC;AAEA,MAAA,MAAM,eAAe,oBAAA,IAAwB,iBAAA;AAC7C,MAAA,YAAA,CAAa,OAAA,GAAU,WAAW,MAAM;AACtC,QAAA,YAAA,CAAa,KAAK,CAAA;AAClB,QAAA,MAAM,QAAA,GAAW,OAAO,CAAC,CAAA;AACzB,QAAA,eAAA,CAAgB,QAAQ,CAAA;AACxB,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAA,YAAA,CAAa,IAAI,CAAA;AAAA,QACnB,CAAC,CAAA;AAAA,MACH,GAAG,YAAY,CAAA;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,MAAA,EAAQ,cAAc,iBAAA,EAAmB,oBAAA,EAAsB,SAAS,CAAC,CAAA;AAE7E,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,aAAa,OAAA,EAAS;AACxB,QAAA,YAAA,CAAa,aAAa,OAAO,CAAA;AAAA,MACnC;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,WAAA,GAAc,WAAA,CAAY,CAAC,KAAA,KAA0B;AACzD,IAAA,UAAA,CAAW,KAAK,CAAA;AAAA,EAClB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,IAAI,YAAA,IAAgB,SAAA,IAAa,CAAC,SAAA,EAAW;AAC3C,MAAA,WAAA,CAAY,KAAK,CAAA;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,YAAA,EAAc,SAAA,EAAW,SAAA,EAAW,WAAW,CAAC,CAAA;AAEpD,EAAA,MAAM,QAAA,GAAW,YAAY,MAAM;AACjC,IAAA,IAAI,YAAA,IAAgB,SAAA,IAAa,CAAC,SAAA,EAAW;AAC3C,MAAA,WAAA,CAAY,IAAI,CAAA;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,YAAA,EAAc,SAAA,EAAW,SAAA,EAAW,WAAW,CAAC,CAAA;AAEpD,EAAA,MAAM,YAAA,GAAe,WAAA,CAAY,CAAC,KAAA,KAAyB;AACzD,IAAA,IAAI,MAAM,GAAA,KAAQ,QAAA,IAAY,iBAAiB,YAAA,IAAgB,SAAA,IAAa,CAAC,SAAA,EAAW;AACtF,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,WAAA,CAAY,IAAI,CAAA;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,aAAA,EAAe,cAAc,SAAA,EAAW,SAAA,EAAW,WAAW,CAAC,CAAA;AAEnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,IAAgB,SAAA,IAAa,CAAC,SAAA,EAAW;AAC3C,MAAA,MAAA,CAAO,iBAAiB,SAAA,EAAW,YAAA,EAAc,EAAE,OAAA,EAAS,MAAM,CAAA;AAAA,IACpE;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,oBAAoB,SAAA,EAAW,YAAA,EAAc,EAAE,OAAA,EAAS,MAAM,CAAA;AAAA,IACvE,CAAA;AAAA,EACF,GAAG,CAAC,YAAA,EAAc,YAAA,EAAc,SAAA,EAAW,SAAS,CAAC,CAAA;AAErD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,kBAAA,GAAqB,CAAC,KAAA,KAAsB;AAChD,MAAA,IAAI,UAAA,CAAW,OAAA,IACb,CAAC,UAAA,CAAW,OAAA,CAAQ,QAAA,CAAS,KAAA,CAAM,MAAc,CAAA,IACjD,mBAAA,IACA,YAAA,IACA,SAAA,IACA,CAAC,SAAA,EAAW;AACZ,QAAA,WAAA,CAAY,IAAI,CAAA;AAAA,MAClB;AAAA,IACF,CAAA;AAEA,IAAA,IAAI,YAAA,IAAgB,SAAA,IAAa,CAAC,SAAA,EAAW;AAC3C,MAAA,QAAA,CAAS,gBAAA,CAAiB,aAAa,kBAAkB,CAAA;AAAA,IAC3D;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,aAAa,kBAAkB,CAAA;AAAA,IAC9D,CAAA;AAAA,EACF,GAAG,CAAC,mBAAA,EAAqB,cAAc,SAAA,EAAW,SAAA,EAAW,WAAW,CAAC,CAAA;AAGzE,EAAA,IAAI,CAAC,SAAA,IAAa,CAAC,SAAA,EAAW;AAC5B,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,WAAA,GAAc,cAAc,WAAA,IAAe,kBAAA;AACjD,EAAA,MAAM,WAAA,GAAc,UAAU,WAAW,CAAA,CAAA;AAEzC,EAAA,MAAM,iBAAgC,EAAC;AACvC,EAAA,MAAM,eAAA,GAAkB,SAAA,GACnB,mBAAA,IAAuB,iBAAA,GACvB,oBAAA,IAAwB,iBAAA;AAE7B,EAAA,IAAI,eAAA,IAAmB,oBAAoB,GAAA,EAAK;AAC9C,IAAA,cAAA,CAAe,iBAAA,GAAoB,GAAG,eAAe,CAAA,EAAA,CAAA;AAAA,EACvD;AACA,EAAA,cAAA,CAAe,iBAAA,GAAoB,UAAA;AAEnC,EAAA,MAAM,cAAA,GAAiB,YACnB,cAAA,CAAe,SAAiC,EAAE,KAAA,GAClD,cAAA,CAAe,SAAiC,CAAA,CAAE,IAAA;AAGtD,EAAA,IAAI,YAAY,YAAA,EAAc;AAC5B,IAAA,OAAO,QAAA,CAAS;AAAA,MACd,SAAA,EAAW,aAAa,CAAC,SAAA;AAAA,MACzB,OAAA,EAAS,YAAA;AAAA,MACT,YAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA,EAAc,UAAA;AAAA,MACd,WAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,EACH;AAEA,EAAA,IAAI,CAAC,YAAA,EAAc;AACjB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,UAAA;AAAA,MACL,SAAA,EAAW,EAAA;AAAA,QACT,eAAA;AAAA,QACA,CAAC,YAAY,oBAAA,GAAuB,EAAA;AAAA,QACpC,GAAG,WAAW,CAAA,QAAA,CAAA;AAAA,QACd,OAAA,CAAQ;AAAA,OACV;AAAA,MACA,KAAA,EAAO,cAAA;AAAA,MAEP,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,UAAA;AAAA,UACL,SAAA,EAAW,EAAA;AAAA,YACT,eAAA;AAAA,YACA,cAAA;AAAA,YACA,GAAG,WAAW,CAAA,QAAA,CAAA;AAAA,YACd,OAAA,CAAQ;AAAA,WACV;AAAA,UACA,KAAA,EAAO,cAAA;AAAA,UAEP,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAG,SAAA,EAAW,EAAA;AAAA,cACb,aAAA;AAAA,cACA,GAAG,WAAW,CAAA,MAAA,CAAA;AAAA,cACd,OAAA,CAAQ;AAAA,aACV,EACG,uBAAa,KAAA,EAChB,CAAA;AAAA,4BACA,GAAA,CAAC,OAAE,SAAA,EAAW,EAAA;AAAA,cACZ,eAAA;AAAA,cACA,GAAG,WAAW,CAAA,QAAA,CAAA;AAAA,cACd,OAAA,CAAQ;AAAA,aACV,EACG,uBAAa,OAAA,EAChB,CAAA;AAAA,4BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,eAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,OAAA,EAAS,YAAA;AAAA,kBACT,QAAA,EAAU,aAAa,CAAC,SAAA;AAAA,kBACxB,SAAA,EAAW,EAAA;AAAA,oBACT,kCAAA;AAAA,oBACA,GAAG,WAAW,CAAA,OAAA,CAAA;AAAA,oBACd,OAAA,CAAQ,MAAA;AAAA,oBACR,OAAA,CAAQ;AAAA,mBACV;AAAA,kBAEC,uBAAa,UAAA,IAAc;AAAA;AAAA,eAC9B;AAAA,8BACA,GAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,OAAA,EAAS,QAAA;AAAA,kBACT,QAAA,EAAU,aAAa,CAAC,SAAA;AAAA,kBACxB,SAAA,EAAW,EAAA;AAAA,oBACT,8BAAA;AAAA,oBACA,GAAG,WAAW,CAAA,GAAA,CAAA;AAAA,oBACd,OAAA,CAAQ,MAAA;AAAA,oBACR,OAAA,CAAQ;AAAA,mBACV;AAAA,kBAEC,uBAAa,MAAA,IAAU;AAAA;AAAA;AAC1B,aAAA,EACF;AAAA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,wBAAA,GAAQ;;;ACzSf,eAAsB,QAAQ,KAAA,EAA8C;AAC1E,EAAA,MAAM,MAAA,GAAS,MAAM,QAAA,CAAS,KAAK,CAAA;AACnC,EAAA,OAAO,MAAA;AACT","file":"index.js","sourcesContent":["import type { ConfirmOptions, ConfirmInput } from \"./types\";\n\ntype Listener = (alerts: ConfirmOptions[]) => void;\n\nlet confirms: ConfirmOptions[] = [];\nlet listeners = new Set<Listener>();\n\nexport function addAlert(input: ConfirmInput): Promise<boolean | null> {\n  return new Promise((resolve) => {\n    const alert: ConfirmOptions =\n      typeof input === \"string\"\n        ? {\n          title: \"Confirm\",\n          message: input,\n          resolve\n        }\n        : {\n          title: input.title || \"Confirm\",\n          message: input.message,\n          okText: input.okText,\n          cancelText: input.cancelText,\n          colorSchema: input.colorSchema,\n          resolve\n        };\n\n    confirms = [...confirms, alert];\n    \n    if (confirms.length === 1) {\n      emit();\n    }\n  });\n}\n\nexport function closeAlert(result: boolean | null) {\n  const alert = confirms[0];\n  if (!alert) return;\n\n  // Resolve current alert\n  alert.resolve(result);\n  \n  // Remove from queue\n  confirms = confirms.slice(1);\n  \n  emit()\n}\n\nexport function subscribe(listener: Listener) {\n  listeners.add(listener);\n  listener(confirms);\n  return () => listeners.delete(listener);\n}\n\nexport function emit() {\n  listeners.forEach((listener) => listener(confirms));\n}","/* 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}","/* 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}","/* ========== 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","import confirmCSS from './confirm.css';\nimport animationsCSS from './animations.css';\nimport colorSchemasCSS from './colorSchemas.css';\n\n// Combine all CSS\nconst ALL_CSS = `${confirmCSS}\\n${animationsCSS}\\n${colorSchemasCSS}`;\n\nlet stylesInjected = false;\n\nexport function ensureStyles() {\n  if (typeof document === 'undefined') {\n    return; // Server-side rendering\n  }\n  \n  if (stylesInjected) {\n    return; // Already injected\n  }\n  \n  // Create and inject style tag\n  const style = document.createElement('style');\n  style.setAttribute('data-react-confirm-lite', '');\n  style.textContent = ALL_CSS;\n  document.head.appendChild(style);\n  \n  stylesInjected = true;\n}","import React, { useEffect, useState, useCallback, useRef, type ReactNode, type CSSProperties } from \"react\";\nimport { subscribe, closeAlert } from \"./confirm_store\";\nimport type { ConfirmClasses, ConfirmOptions, ColorSchema, AnimationType, animationPairs } from \"./types\";\nimport \"./confirm.css\";\nimport './animations.css'\nimport './colorSchemas.css'\nimport { ensureStyles } from \"./bundle-css\";\n\nfunction cx(...classes: (string | undefined)[]) {\n  return classes.filter(Boolean).join(\" \");\n}\n\nconst animationPairs = {\n  slide: { enter: '', exit: 'alert-wrapper-exit' },\n  fadeScale: { enter: 'alert-animate-fadeInScale', exit: 'alert-animate-fadeOutScale' },\n  bounce: { enter: 'alert-animate-bounceIn', exit: 'alert-animate-bounceOut' },\n  flip: { enter: 'alert-animate-flipIn', exit: 'alert-animate-flipOut' },\n  zoom: { enter: 'alert-animate-zoomIn', exit: 'alert-animate-zoomOut' },\n  rotate: { enter: 'alert-animate-rotateIn', exit: 'alert-animate-rotateOut' },\n  fadeUp: { enter: 'alert-animate-fadeInUp', exit: 'alert-animate-fadeOutDown' },\n  drop: { enter: 'alert-animate-dropIn', exit: 'alert-animate-dropOut' },\n  slideRight: { enter: 'alert-animate-slideInRight', exit: 'alert-animate-slideOutLeft' },\n  slideLeft: { enter: 'alert-animate-slideInLeft', exit: 'alert-animate-slideOutRight' },\n  fadeDown: { enter: 'alert-animate-fadeInDown', exit: 'alert-animate-fadeOutUp' },\n  slideVertical: { enter: 'alert-animate-slideDownIn', exit: 'alert-animate-slideUpOut' },\n  rotateRight: { enter: 'alert-animate-rotateInRight', exit: 'alert-animate-rotateOutLeft' },\n  zoomSmall: { enter: 'alert-animate-zoomInSmall', exit: 'alert-animate-zoomOutSmall' },\n  bounceSmall: { enter: 'alert-animate-bounceInSmall', exit: 'alert-animate-bounceOutSmall' },\n  fadeBlur: { enter: 'alert-animate-fadeInBlur', exit: 'alert-animate-fadeOutBlur' },\n  fadeShrink: { enter: 'alert-animate-fadeInShrink', exit: 'alert-animate-fadeOutShrink' },\n} as const;\n\ntype Props = {\n  classes?: ConfirmClasses;\n  defaultColorSchema?: ColorSchema;\n  closeOnEscape?: boolean;\n  closeOnClickOutside?: boolean;\n  animation?: AnimationType;\n  animationDuration?: number;\n  animationDurationIn?: number;\n  animationDurationOut?: number;\n  children?: (props: {\n    isVisible: boolean;\n    confirm: ConfirmOptions;\n    handleCancel: () => void;\n    handleOk: () => void;\n    containerRef: React.RefObject<HTMLDivElement | null>;\n    colorSchema: ColorSchema;\n    animationClass: string;\n    animationStyle: CSSProperties;\n  }) => ReactNode;\n};\n\nconst ConfirmContainer = ({\n  classes = {},\n  animationDuration = 300,\n  defaultColorSchema = 'dark',\n  closeOnEscape = true,\n  closeOnClickOutside = true,\n  animation = 'slide',\n  animationDurationIn,\n  animationDurationOut,\n  children\n}: Props) => {\n  const [alerts, setAlerts] = useState<ConfirmOptions[]>([]);\n  const [isVisible, setIsVisible] = useState(false);\n  const [currentAlert, setCurrentAlert] = useState<ConfirmOptions | null>(null);\n  const [isExiting, setIsExiting] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const exitTimerRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    subscribe((newAlerts) => {\n      setAlerts(newAlerts);\n    });\n  }, []);\n\n  useEffect(() => {\n    ensureStyles()\n  }, [])\n  \n\n  useEffect(() => {\n    if (alerts.length > 0 && !currentAlert && !isExiting) {\n      // New alert arriving - start mount sequence\n      setIsMounted(true);\n      const newAlert = alerts[0];\n      setCurrentAlert(newAlert);\n      requestAnimationFrame(() => {\n        setIsVisible(true);\n      });\n    } else if (alerts.length === 0 && currentAlert && isVisible) {\n      // Start exit animation\n      setIsExiting(true);\n      setIsVisible(false);\n\n      // Clear any existing timer\n      if (exitTimerRef.current) {\n        clearTimeout(exitTimerRef.current);\n      }\n\n      // Keep component mounted until exit animation completes\n      const exitDuration = animationDurationOut || animationDuration;\n      exitTimerRef.current = setTimeout(() => {\n        setIsExiting(false);\n        setCurrentAlert(null);\n        setIsMounted(false);\n      }, exitDuration);\n    } else if (alerts.length > 0 && currentAlert && alerts[0] !== currentAlert) {\n      // Replacing current alert\n      setIsExiting(true);\n      setIsVisible(false);\n\n      if (exitTimerRef.current) {\n        clearTimeout(exitTimerRef.current);\n      }\n\n      const exitDuration = animationDurationOut || animationDuration;\n      exitTimerRef.current = setTimeout(() => {\n        setIsExiting(false);\n        const newAlert = alerts[0];\n        setCurrentAlert(newAlert);\n        requestAnimationFrame(() => {\n          setIsVisible(true);\n        });\n      }, exitDuration);\n    }\n  }, [alerts, currentAlert, animationDuration, animationDurationOut, isVisible]);\n\n  useEffect(() => {\n    return () => {\n      if (exitTimerRef.current) {\n        clearTimeout(exitTimerRef.current);\n      }\n    };\n  }, []);\n\n  const handleClose = useCallback((value: boolean | null) => {\n    closeAlert(value);\n  }, []);\n\n  const handleCancel = useCallback(() => {\n    if (currentAlert && isVisible && !isExiting) {\n      handleClose(false);\n    }\n  }, [currentAlert, isVisible, isExiting, handleClose]);\n\n  const handleOk = useCallback(() => {\n    if (currentAlert && isVisible && !isExiting) {\n      handleClose(true);\n    }\n  }, [currentAlert, isVisible, isExiting, handleClose]);\n\n  const handleEscKey = useCallback((event: KeyboardEvent) => {\n    if (event.key === 'Escape' && closeOnEscape && currentAlert && isVisible && !isExiting) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleClose(null);\n    }\n  }, [closeOnEscape, currentAlert, isVisible, isExiting, handleClose]);\n\n  useEffect(() => {\n    if (currentAlert && isVisible && !isExiting) {\n      window.addEventListener('keydown', handleEscKey, { capture: true });\n    }\n\n    return () => {\n      window.removeEventListener('keydown', handleEscKey, { capture: true });\n    };\n  }, [handleEscKey, currentAlert, isVisible, isExiting]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (wrapperRef.current &&\n        !wrapperRef.current.contains(event.target as Node) &&\n        closeOnClickOutside &&\n        currentAlert &&\n        isVisible &&\n        !isExiting) {\n        handleClose(null);\n      }\n    };\n\n    if (currentAlert && isVisible && !isExiting) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [closeOnClickOutside, currentAlert, isVisible, isExiting, handleClose]);\n\n  // Don't render anything if not mounted and not exiting\n  if (!isMounted && !isExiting) {\n    return null;\n  }\n\n  const colorSchema = currentAlert?.colorSchema || defaultColorSchema;\n  const schemaClass = `schema-${colorSchema}`;\n\n  const animationStyle: CSSProperties = {};\n  const currentDuration = isVisible\n    ? (animationDurationIn || animationDuration)\n    : (animationDurationOut || animationDuration);\n\n  if (currentDuration && currentDuration !== 300) {\n    animationStyle.animationDuration = `${currentDuration}ms`;\n  }\n  animationStyle.animationFillMode = 'forwards';\n\n  const animationClass = isVisible\n    ? animationPairs[animation as keyof animationPairs].enter\n    : animationPairs[animation as keyof animationPairs].exit;\n\n  // For children render\n  if (children && currentAlert) {\n    return children({\n      isVisible: isVisible && !isExiting,\n      confirm: currentAlert,\n      handleCancel,\n      handleOk,\n      containerRef: wrapperRef,\n      colorSchema,\n      animationClass,\n      animationStyle\n    });\n  }\n\n  if (!currentAlert) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={overlayRef}\n      className={cx(\n        \"alert-overlay\",\n        !isVisible ? \"alert-overlay-exit\" : '',\n        `${schemaClass}-overlay`,\n        classes.overlay\n      )}\n      style={animationStyle}\n    >\n      <div\n        ref={wrapperRef}\n        className={cx(\n          \"alert-wrapper\",\n          animationClass,\n          `${schemaClass}-wrapper`,\n          classes.wrapper\n        )}\n        style={animationStyle}\n      >\n        <h2 className={cx(\n          \"alert-title\",\n          `${schemaClass}-title`,\n          classes.title\n        )}>\n          {currentAlert.title}\n        </h2>\n        <p className={cx(\n          \"alert-message\",\n          `${schemaClass}-message`,\n          classes.message\n        )}>\n          {currentAlert.message}\n        </p>\n        <div className=\"alert-buttons\">\n          <button\n            onClick={handleCancel}\n            disabled={isExiting || !isVisible}\n            className={cx(\n              \"alert-button alert-button-cancel\",\n              `${schemaClass}-cancel`,\n              classes.button,\n              classes.cancel\n            )}\n          >\n            {currentAlert.cancelText || 'Cancel'}\n          </button>\n          <button\n            onClick={handleOk}\n            disabled={isExiting || !isVisible}\n            className={cx(\n              'alert-button alert-button-ok',\n              `${schemaClass}-ok`,\n              classes.button,\n              classes.ok\n            )}\n          >\n            {currentAlert.okText || 'OK'}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ConfirmContainer;","import { addAlert } from \"./confirm_store\";\nimport type { ConfirmInput } from \"./types\";\n\nexport async function confirm(input: ConfirmInput): Promise<boolean | null> {\n  const result = await addAlert(input);\n  return result;\n}"]}
+{"version":3,"sources":["../src/confirm_store.ts","../src/confirm.css","../src/animations.css","../src/colorSchemas.css","../src/bundle-css.ts","../src/confirmContainer.tsx","../src/confirm.ts"],"names":["containerId","result"],"mappings":"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","file":"index.js","sourcesContent":["import type { ConfirmOptions, ConfirmInput } from \"./types\";\n\ntype Listener = (alerts: ConfirmOptions[]) => void;\n\nlet containerId: string = '';\nlet confirms: ConfirmOptions[] = [];\nlet listeners = new Set<Listener>();\nlet isActiveContainer: boolean = false\nconst containers: NodeListOf<Element>[] = [];\n\n// Global lock - only ONE container can show alerts at a time\nlet activeContainerId: string | null = null;\n\nexport function setIsContainerActive(value: boolean) {\n  isActiveContainer = value;\n}\n\nexport function getIsContainerActive() {\n  return isActiveContainer;\n}\n\nexport function setActiveContainer(id: string | null) {\n  activeContainerId = id;\n}\n\nexport function getActiveContainerId(): string | null {\n  return activeContainerId;\n}\n\nexport async function addAlert(input: ConfirmInput): Promise<boolean | null> {\n  return new Promise((resolve) => {\n    const alert: ConfirmOptions = {\n      id: input.id || '', // Keep the ID for container targeting\n      title: input.title || \"Confirm\",\n      message: input.message,\n      okText: input.okText,\n      cancelText: input.cancelText,\n      colorSchema: input.colorSchema,\n      resolve\n    };\n\n    confirms = [...confirms, alert];\n\n    // If this alert has an ID, set it as the active container\n    if (input.id) {\n      setActiveContainer(input.id);\n    }\n    // If this alert doesn't have an ID, clear any active container\n    // so any container can potentially show it\n    else {\n      setActiveContainer(null);\n    }\n\n    if (confirms.length === 1) {\n      emit();\n    }\n  });\n}\n\nexport async function closeAlert(result: boolean | null) {\n  const alert = confirms[0];\n  containerId = '';\n  if (!alert) return;\n\n  // Resolve current alert\n  alert.resolve(result);\n  // Remove from queue\n  confirms = confirms.slice(1);\n\n  // If there are no more alerts, clear the active container\n  if (confirms.length === 0) {\n    setActiveContainer(null);\n  }\n\n  emit();\n}\n\nexport function subscribe(listener: Listener) {\n  listeners.add(listener);\n  listener(confirms);\n  return () => listeners.delete(listener);\n}\n\nexport function emit() {\n  listeners.forEach((listener) => listener(confirms));\n}\n\n\nconst EventListener = (e: PointerEvent) => {\n  if (containers.length === 0) {\n    containers.push(document.querySelectorAll('.null-confirm-container'));\n  }\n  if (containers.length === 0) return;\n\n  let parentElement = e.view?.document.activeElement?.parentElement;\n  let container = parentElement?.querySelector('.null-confirm-container');\n\n  while (true) {\n    if (container?.id) {\n      break;\n    }\n    parentElement = parentElement?.parentElement;\n    container = parentElement?.querySelector('.null-confirm-container');\n  }\n\n  if (container?.id) {\n    containerId = container.id;\n  }\n}\n\nexport async function getElement() {\n  document.addEventListener('click', EventListener, { once: true })\n  await new Promise<void>((resolve) => {\n    setTimeout(() => {\n      document.removeEventListener('click', EventListener)\n      resolve()\n    }, 0);\n  })\n  if (containerId === '') {\n    if (containers.length === 0) {\n      containers.push(document.querySelectorAll('.null-confirm-container'));\n    }\n    return containers[0][0].id\n  }\n  return containerId;\n}","/* 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}","/* 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}","/* ========== 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","import confirmCSS from './confirm.css';\nimport animationsCSS from './animations.css';\nimport colorSchemasCSS from './colorSchemas.css';\n\n// Combine all CSS\nconst ALL_CSS = `${confirmCSS}\\n${animationsCSS}\\n${colorSchemasCSS}`;\n\nlet stylesInjected = false;\n\nexport function ensureStyles() {\n  if (typeof document === 'undefined') {\n    return; // Server-side rendering\n  }\n  \n  if (stylesInjected) {\n    return; // Already injected\n  }\n  \n  // Create and inject style tag\n  const style = document.createElement('style');\n  style.setAttribute('data-react-confirm-lite', '');\n  style.textContent = ALL_CSS;\n  document.head.appendChild(style);\n  \n  stylesInjected = true;\n}","import React, { useEffect, useState, useCallback, useRef, type ReactNode, type CSSProperties } from \"react\";\nimport { subscribe, closeAlert, setActiveContainer, setIsContainerActive, getIsContainerActive, getActiveContainerId } from \"./confirm_store\";\nimport type { ConfirmClasses, ConfirmOptions, ColorSchema, AnimationType, animationPairs } from \"./types\";\nimport \"./confirm.css\";\nimport './animations.css'\nimport './colorSchemas.css'\nimport { ensureStyles } from \"./bundle-css\";\n\nfunction cx(...classes: (string | undefined)[]) {\n  return classes.filter(Boolean).join(\" \");\n}\n\nconst animationPairs = {\n  slide: { enter: '', exit: 'alert-wrapper-exit' },\n  fadeScale: { enter: 'alert-animate-fadeInScale', exit: 'alert-animate-fadeOutScale' },\n  bounce: { enter: 'alert-animate-bounceIn', exit: 'alert-animate-bounceOut' },\n  flip: { enter: 'alert-animate-flipIn', exit: 'alert-animate-flipOut' },\n  zoom: { enter: 'alert-animate-zoomIn', exit: 'alert-animate-zoomOut' },\n  rotate: { enter: 'alert-animate-rotateIn', exit: 'alert-animate-rotateOut' },\n  fadeUp: { enter: 'alert-animate-fadeInUp', exit: 'alert-animate-fadeOutDown' },\n  drop: { enter: 'alert-animate-dropIn', exit: 'alert-animate-dropOut' },\n  slideRight: { enter: 'alert-animate-slideInRight', exit: 'alert-animate-slideOutLeft' },\n  slideLeft: { enter: 'alert-animate-slideInLeft', exit: 'alert-animate-slideOutRight' },\n  fadeDown: { enter: 'alert-animate-fadeInDown', exit: 'alert-animate-fadeOutUp' },\n  slideVertical: { enter: 'alert-animate-slideDownIn', exit: 'alert-animate-slideUpOut' },\n  rotateRight: { enter: 'alert-animate-rotateInRight', exit: 'alert-animate-rotateOutLeft' },\n  zoomSmall: { enter: 'alert-animate-zoomInSmall', exit: 'alert-animate-zoomOutSmall' },\n  bounceSmall: { enter: 'alert-animate-bounceInSmall', exit: 'alert-animate-bounceOutSmall' },\n  fadeBlur: { enter: 'alert-animate-fadeInBlur', exit: 'alert-animate-fadeOutBlur' },\n  fadeShrink: { enter: 'alert-animate-fadeInShrink', exit: 'alert-animate-fadeOutShrink' },\n} as const;\n\ntype Props = {\n  classes?: ConfirmClasses;\n  defaultColorSchema?: ColorSchema;\n  closeOnEscape?: boolean;\n  closeOnClickOutside?: boolean;\n  animation?: AnimationType;\n  animationDuration?: number;\n  animationDurationIn?: number;\n  animationDurationOut?: number;\n  children?: (props: {\n    isVisible: boolean;\n    confirm: ConfirmOptions;\n    handleCancel: () => void;\n    handleOk: () => void;\n    containerRef: React.RefObject<HTMLDivElement | null>;\n    colorSchema: ColorSchema;\n    animationClass: string;\n    animationStyle: CSSProperties;\n  }) => ReactNode;\n  id?: string;\n};\n\nconst ConfirmContainer = ({\n  classes = {},\n  animationDuration = 300,\n  defaultColorSchema = 'dark',\n  closeOnEscape = true,\n  closeOnClickOutside = true,\n  animation = 'slide',\n  animationDurationIn,\n  animationDurationOut,\n  children,\n  id\n}: Props) => {\n  const [alerts, setAlerts] = useState<ConfirmOptions[]>([]);\n  const [isVisible, setIsVisible] = useState(false);\n  const [currentAlert, setCurrentAlert] = useState<ConfirmOptions | null>(null);\n  const [isExiting, setIsExiting] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const exitTimerRef = useRef<number | null>(null);\n  const containerId = useRef(id || `confirm-${Date.now().toString()}`)\n  const nullElement = <div id={containerId.current} className=\"null-confirm-container\"></div>\n\n  useEffect(() => {\n    subscribe((newAlerts) => {\n      setAlerts(newAlerts);\n    });\n  }, []);\n\n  useEffect(() => {\n    ensureStyles()\n  }, []);\n\n  useEffect(() => {\n    if (alerts.length > 0 && !currentAlert && !isExiting) {\n      const nextAlert = alerts[0];\n\n      // Check if we should show this alert\n      const shouldShowAlert =\n        // Case 1: Alert has no ID (can be shown by any container)\n        !nextAlert.id ||\n        // Case 2: Alert has an ID that matches our container ID\n        nextAlert.id === containerId.current ||\n        // Case 3: No container is currently active\n        !getActiveContainerId();\n\n      if (shouldShowAlert) {\n        // Check if we can become active\n        const currentActive = getActiveContainerId();\n\n        if (!currentActive || currentActive === containerId.current) {\n          setActiveContainer(containerId.current);\n          setIsContainerActive(true);\n\n          // Show the alert\n          setIsMounted(true);\n          setCurrentAlert(nextAlert);\n          setIsVisible(true);\n        }\n      }\n    }\n    else if (alerts.length === 0 && currentAlert && isVisible) {\n      // No more alerts, but we're showing one - start exit\n      console.log(\"Starting exit animation\");\n      setIsExiting(true);\n      setIsVisible(false);\n\n      if (exitTimerRef.current) {\n        clearTimeout(exitTimerRef.current);\n      }\n\n      const exitDuration = animationDurationOut || animationDuration;\n      exitTimerRef.current = setTimeout(() => {\n        console.log(\"Exit animation complete\");\n        setIsContainerActive(false);\n        setIsExiting(false);\n        setCurrentAlert(null);\n        setIsMounted(false);\n      }, exitDuration);\n    }\n    else if (alerts.length > 0 && currentAlert && alerts[0].id !== currentAlert.id) {\n      // New alert with different ID is replacing current one\n      console.log(\"Replacing with new alert\");\n      setIsExiting(true);\n      setIsVisible(false);\n\n      if (exitTimerRef.current) {\n        clearTimeout(exitTimerRef.current);\n      }\n\n      const exitDuration = animationDurationOut || animationDuration;\n      exitTimerRef.current = setTimeout(() => {\n        setIsContainerActive(false);\n        setIsExiting(false);\n        setCurrentAlert(null);\n        setIsMounted(false);\n\n        // The new alert will be picked up in the next render\n      }, exitDuration);\n    }\n  }, [alerts, currentAlert, animationDuration, animationDurationOut, isVisible]);\n\n  const handleClose = useCallback(async (value: boolean | null) => {\n    if (!currentAlert || isExiting) return;\n\n    // Start exit animation immediately\n    setIsExiting(true);\n    setIsVisible(false);\n\n    // Delay the actual closeAlert call until animation completes\n    const exitDuration = animationDurationOut || animationDuration;\n\n    if (exitTimerRef.current) {\n      clearTimeout(exitTimerRef.current);\n    }\n\n    exitTimerRef.current = setTimeout(() => {\n      // Now call closeAlert which will resolve the promise\n      closeAlert(value);\n\n      // Reset state\n      setIsExiting(false);\n      setCurrentAlert(null);\n      setIsMounted(false);\n      setIsContainerActive(false);\n    }, exitDuration);\n  }, [currentAlert, isExiting, animationDuration, animationDurationOut]);\n\n  const handleCancel = useCallback(() => {\n    if (currentAlert && isVisible && !isExiting) {\n      handleClose(false);\n    }\n  }, [currentAlert, isVisible, isExiting, handleClose]);\n\n  const handleOk = useCallback(() => {\n    if (currentAlert && isVisible && !isExiting) {\n      handleClose(true);\n    }\n  }, [currentAlert, isVisible, isExiting, handleClose]);\n\n  const handleEscKey = useCallback((event: KeyboardEvent) => {\n    if (event.key === 'Escape' && closeOnEscape && currentAlert && isVisible && !isExiting) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleClose(null);\n    }\n  }, [closeOnEscape, currentAlert, isVisible, isExiting, handleClose]);\n\n  useEffect(() => {\n    if (currentAlert && isVisible && !isExiting) {\n      window.addEventListener('keydown', handleEscKey, { capture: true });\n    }\n\n    return () => {\n      window.removeEventListener('keydown', handleEscKey, { capture: true });\n    };\n  }, [handleEscKey, currentAlert, isVisible, isExiting]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (wrapperRef.current &&\n        !wrapperRef.current.contains(event.target as Node) &&\n        closeOnClickOutside &&\n        currentAlert &&\n        isVisible &&\n        !isExiting) {\n        handleClose(null);\n      }\n    };\n\n    if (currentAlert && isVisible && !isExiting) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [closeOnClickOutside, currentAlert, isVisible, isExiting, handleClose]);\n\n  // Replace the render conditions with:\n  if (!isMounted && !isExiting) {\n    return nullElement;\n  }\n\n  if (!currentAlert || !getIsContainerActive()) {\n    return nullElement;\n  }\n\n  // Always render if we have a current alert\n  const colorSchema = currentAlert?.colorSchema || defaultColorSchema;\n  const schemaClass = `schema-${colorSchema}`;\n\n  const animationStyle: CSSProperties = {};\n  const currentDuration = isVisible\n    ? (animationDurationIn || animationDuration)\n    : (animationDurationOut || animationDuration);\n\n  animationStyle.animationDuration = `${currentDuration}ms`;\n  animationStyle.animationFillMode = 'forwards';\n\n  const animationClass = isVisible\n    ? animationPairs[animation as keyof animationPairs].enter\n    : animationPairs[animation as keyof animationPairs].exit;\n\n\n  // For children render\n  if (children && currentAlert && getActiveContainerId() === containerId.current) {\n    return (\n      <>\n        {nullElement}\n        {children({\n          isVisible: isVisible && !isExiting,\n          confirm: currentAlert,\n          handleCancel,\n          handleOk,\n          containerRef: wrapperRef,\n          colorSchema,\n          animationClass,\n          animationStyle\n        })}\n      </>\n    )\n  }\n\n  return (\n    <>\n      {nullElement}\n      <div\n        ref={overlayRef}\n        className={cx(\n          \"alert-overlay\",\n          !isVisible ? \"alert-overlay-exit\" : '',\n          `${schemaClass}-overlay`,\n          classes.overlay\n        )}\n        style={animationStyle}\n      >\n        <div\n          ref={wrapperRef}\n          className={cx(\n            \"alert-wrapper\",\n            animationClass,\n            `${schemaClass}-wrapper`,\n            classes.wrapper\n          )}\n          style={animationStyle}\n        >\n          <h2 className={cx(\n            \"alert-title\",\n            `${schemaClass}-title`,\n            classes.title\n          )}>\n            {currentAlert.title}\n          </h2>\n          <p className={cx(\n            \"alert-message\",\n            `${schemaClass}-message`,\n            classes.message\n          )}>\n            {currentAlert.message}\n          </p>\n          <div className=\"alert-buttons\">\n            <button\n              onClick={handleCancel}\n              disabled={isExiting || !isVisible}\n              className={cx(\n                \"alert-button alert-button-cancel\",\n                `${schemaClass}-cancel`,\n                classes.button,\n                classes.cancel\n              )}\n            >\n              {currentAlert.cancelText || 'Cancel'}\n            </button>\n            <button\n              onClick={handleOk}\n              disabled={isExiting || !isVisible}\n              className={cx(\n                'alert-button alert-button-ok',\n                `${schemaClass}-ok`,\n                classes.button,\n                classes.ok\n              )}\n            >\n              {currentAlert.okText || 'OK'}\n            </button>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default ConfirmContainer;","import { addAlert, getElement } from \"./confirm_store\";\nimport type { ConfirmInput } from \"./types\";\n\nexport async function confirm(input: string | ConfirmInput): Promise<boolean | null> {\n  if (typeof input === 'string') {\n    const containerId = await getElement();\n    const result = await addAlert({ \n      message: input, \n      id: containerId \n    });\n    return result;\n  } \n  \n  if (!input.id) {\n    const containerId = await getElement();\n    const result = await addAlert({ \n      ...input, \n      id: containerId \n    });\n    return result;\n  } \n  \n  const result = await addAlert(input);\n  return result;\n}"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-confirm-lite",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A lightweight, promise-based confirm dialog for React, designed to be as easy to use as react-toastify, while remaining fully customizable.",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,10 +21,11 @@
   },
   "homepage": "https://github.com/SaadNasir-git/react-confirm-lite#readme",
   "scripts": {
-    "build": "tsup && cp LICENSE dist/",
-    "clean": "rm -rf dist",
-    "postbuild": "echo \"'use client';\" | cat - dist/index.js > temp && mv temp dist/index.js",
-    "prepack": "npm run clean && npm run build"
+  "build": "tsup && cp LICENSE dist/",
+  "build:watch": "tsup --watch",
+  "clean": "rm -rf dist",
+  "postbuild": "echo \"'use client';\" | cat - dist/index.js > temp && mv temp dist/index.js",
+  "prepack": "npm run clean && npm run build"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -38,5 +39,11 @@
   },
   "license": "MIT",
   "author": "Saad Nasir",
-  "keywords": ["react-confirm" , "react-confirm-lite" , "react confirm lite" , "react confirm" , "confirm"]
+  "keywords": [
+    "react-confirm",
+    "react-confirm-lite",
+    "react confirm lite",
+    "react confirm",
+    "confirm"
+  ]
 }