@tsirosgeorge/toastnotification 5.1.1 → 5.3.0

package/Readme.md

@@ -6,7 +6,7 @@ A lightweight, customizable, and dependency-free toast notification system writt
 
 ## 📦 Include package via cdn
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/toast.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.3.0/toast.min.js"></script>
 ```
 
 ## 📦 Include package via npm
@@ -63,6 +63,23 @@ if (ok) {
 }
 ```
 
+- With Input Field
+```javascript
+const name = await toast.confirm('Enter your name:', {
+  title: 'Welcome',
+  input: 'text',  // 'text', 'email', 'password', 'number', 'textarea'
+  inputPlaceholder: 'Your name here...',
+  inputValue: '',  // optional default value
+  confirmText: 'Submit',
+  cancelText: 'Cancel',
+});
+if (name) {
+  console.log('Hello', name);
+} else {
+  console.log('Cancelled');
+}
+```
+
 - Callback API
 ```javascript
 toast('Are you sure?', {
@@ -110,8 +127,8 @@ t.update('Done!', { type: 'success', duration: 2000 });
 | `cancelButtonBg` | `string` | `null` | Inline background color for cancel button. |
 | `cancelButtonColor` | `string` | `null` | Inline text color for cancel button. |
 
-### 🧪 Playground
-Open `index.html` to experiment with all options (message, type, position, animation, duration, icon, loader, confirm title/texts, overlay, close, and button colors).
+### 🧪 Live Demo
+Open the online demo to try all options: https://tsirosgeorge.github.io/toast-notification/
 
 
 ## 📝 License

package/assets/css/toast.css

@@ -87,6 +87,8 @@
     border-radius: 12px;
     padding: 16px 20px;
     box-shadow: var(--toast-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
+    /* Add transitions for overlay confirms */
+    transition: opacity 0.5s ease, transform 0.5s ease;
 }
 
 .ts-toast.ts-toast-confirm .ts-toast-content {
@@ -107,15 +109,33 @@
     margin-top: 12px;
 }
 
+.ts-toast-input {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid var(--toast-border, #e5e7eb);
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 0.95rem;
+    margin-top: 12px;
+    background: var(--toast-bg, #fff);
+    color: var(--toast-color, #000);
+    outline: none;
+    transition: border-color 0.2s ease;
+}
+
+.ts-toast-input:focus {
+    border-color: #3b82f6;
+}
+
 /* Show toast with animation */
-.ts-toast-container .ts-toast.show {
+.ts-toast-container .ts-toast.ts-toast-show {
     opacity: 1;
     transform: translateY(0);
     /* Move to final position */
 }
 
 /* Animations for different effects */
-@keyframes slide-left {
+@keyframes ts-toast-slide-left {
     from {
         transform: translateX(-100%);
     }
@@ -125,7 +145,7 @@
     }
 }
 
-@keyframes slide-right {
+@keyframes ts-toast-slide-right {
     from {
         transform: translateX(100%);
     }
@@ -135,7 +155,7 @@
     }
 }
 
-@keyframes slide-top {
+@keyframes ts-toast-slide-top {
     from {
         transform: translateY(-100%);
     }
@@ -145,7 +165,7 @@
     }
 }
 
-@keyframes slide-bottom {
+@keyframes ts-toast-slide-bottom {
     from {
         transform: translateY(100%);
     }
@@ -155,7 +175,7 @@
     }
 }
 
-@keyframes zoom-in {
+@keyframes ts-toast-zoom-in {
     from {
         transform: scale(0);
     }
@@ -165,7 +185,12 @@
     }
 }
 
-@keyframes flip {
+@keyframes ts-toast-zoom-out {
+    from { transform: scale(1); }
+    to { transform: scale(0); }
+}
+
+@keyframes ts-toast-flip {
     from {
         transform: rotateY(90deg);
     }
@@ -200,12 +225,12 @@
     border: 3px solid #f3f3f3;
     border-top: 3px solid var(--toast-loader-color, #66ee78);
     border-radius: 50%;
-    animation: spin 1s linear infinite;
+    animation: ts-toast-spin 1s linear infinite;
     /* Continuous spinning */
 }
 
 /* Keyframe for spinning effect */
-@keyframes spin {
+@keyframes ts-toast-spin {
     0% {
         transform: rotate(0deg);
     }
@@ -230,7 +255,7 @@
 }
 
 /* Show the icon after the loader has completed */
-.ts-toast-container .ts-toast.show .ts-toast-icon {
+.ts-toast-container .ts-toast.ts-toast-show .ts-toast-icon {
     opacity: 1;
     /* Fade in the icon */
 }
@@ -246,7 +271,7 @@
 }
 
 /* Reverse Slide-out Animations */
-@keyframes slide-top-reverse {
+@keyframes ts-toast-slide-top-reverse {
     from {
         transform: translateY(0);
     }
@@ -256,7 +281,7 @@
     }
 }
 
-@keyframes slide-bottom-reverse {
+@keyframes ts-toast-slide-bottom-reverse {
     from {
         transform: translateY(0);
     }
@@ -266,7 +291,7 @@
     }
 }
 
-@keyframes slide-left-reverse {
+@keyframes ts-toast-slide-left-reverse {
     from {
         transform: translateX(0);
     }
@@ -276,7 +301,7 @@
     }
 }
 
-@keyframes slide-right-reverse {
+@keyframes ts-toast-slide-right-reverse {
     from {
         transform: translateX(0);
     }
@@ -286,11 +311,9 @@
     }
 }
 
-/* Slide-out when removed */
-.ts-toast-container .ts-toast.slide-out {
-    animation-duration: 0.5s;
-    animation-timing-function: ease-in-out;
-    animation-fill-mode: forwards;
+/* Slide-out when removed: use the same opacity/transform transition */
+.ts-toast.ts-toast-slide-out {
+    opacity: 0;
 }
 
 /* Overlay for confirm dialogs */
@@ -304,11 +327,17 @@
     z-index: 2147483646;
 }
 
+/* Position-based overlay alignment */
+.ts-toast-overlay.top-left { align-items: flex-start; justify-content: flex-start; padding: 1rem; }
+.ts-toast-overlay.top-center { align-items: flex-start; justify-content: center; padding: 1rem; }
+.ts-toast-overlay.top-right { align-items: flex-start; justify-content: flex-end; padding: 1rem; }
+.ts-toast-overlay.bottom-left { align-items: flex-end; justify-content: flex-start; padding: 1rem; }
+.ts-toast-overlay.bottom-center { align-items: flex-end; justify-content: center; padding: 1rem; }
+.ts-toast-overlay.bottom-right { align-items: flex-end; justify-content: flex-end; padding: 1rem; }
+
 /* Tiny utility: flex icon container */
-.d-flex {
-    display: inline-flex;
-    align-items: center;
-}
+/* Scoped utility to avoid conflicts */
+.ts-toast-d-flex { display: inline-flex; align-items: center; }
 
 /* Prevent scroll behind confirm overlay */
 body.ts-toast-no-scroll {

package/assets/css/toast.min.css

@@ -1 +1 @@
-.ts-toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;width:fit-content;max-width:calc(100% - 2rem)}.ts-toast-container>:not(:last-child){margin-bottom:0!important}.ts-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end}.ts-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start}.ts-toast-container.top-center{top:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end}.ts-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start}.ts-toast-container.bottom-center{bottom:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container .ts-toast{display:flex;align-items:center;gap:.75rem;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);padding:.75rem 1rem;border-radius:8px;border:1px solid var(--toast-border,#e5e7eb);box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1));font-family:sans-serif;font-size:.95rem;pointer-events:all;position:relative;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;width:auto!important}.ts-toast.ts-toast-confirm{display:flex;align-items:center;justify-content:center;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);border:1px solid var(--toast-border,#e5e7eb);border-radius:12px;padding:16px 20px;box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1))}.ts-toast.ts-toast-confirm .ts-toast-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.ts-toast.ts-toast-confirm .ts-toast-body{text-align:center}.ts-toast-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}.ts-toast-container .ts-toast.show{opacity:1;transform:translateY(0)}@keyframes slide-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes zoom-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes flip{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}.ts-toast-container .ts-toast-icon{font-size:1.2rem}.ts-toast-container .ts-toast-success .ts-toast-icon{color:var(--toast-success-color,#66ee78)}.ts-toast-container .ts-toast-error .ts-toast-icon{color:var(--toast-error-color,#ef4444)}.ts-toast-container .ts-toast-loader{width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid var(--toast-loader-color,#66ee78);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.ts-toast-container .ts-toast-loader.done{animation:none;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast-icon{font-size:1.2rem;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast.show .ts-toast-icon{opacity:1}@keyframes progress-bar{0%{width:0%}100%{width:100%}}@keyframes slide-top-reverse{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-bottom-reverse{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-left-reverse{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-right-reverse{from{transform:translateX(0)}to{transform:translateX(100%)}}.ts-toast-container .ts-toast.slide-out{animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}.ts-toast-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2147483646}.d-flex{display:inline-flex;align-items:center}body.ts-toast-no-scroll{overflow:hidden}
+.ts-toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;width:fit-content;max-width:calc(100% - 2rem)}.ts-toast-container>:not(:last-child){margin-bottom:0!important}.ts-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end}.ts-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start}.ts-toast-container.top-center{top:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end}.ts-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start}.ts-toast-container.bottom-center{bottom:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container .ts-toast{display:flex;align-items:center;gap:.75rem;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);padding:.75rem 1rem;border-radius:8px;border:1px solid var(--toast-border,#e5e7eb);box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1));font-family:sans-serif;font-size:.95rem;pointer-events:all;position:relative;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;width:auto!important}.ts-toast.ts-toast-confirm{display:flex;align-items:center;justify-content:center;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);border:1px solid var(--toast-border,#e5e7eb);border-radius:12px;padding:16px 20px;box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1));transition:opacity .5s ease,transform .5s ease}.ts-toast.ts-toast-confirm .ts-toast-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.ts-toast.ts-toast-confirm .ts-toast-body{text-align:center}.ts-toast-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}.ts-toast-input{width:100%;padding:8px 12px;border:1px solid var(--toast-border,#e5e7eb);border-radius:8px;font-family:inherit;font-size:.95rem;margin-top:12px;background:var(--toast-bg,#fff);color:var(--toast-color,#000);outline:0;transition:border-color .2s ease}.ts-toast-input:focus{border-color:#3b82f6}.ts-toast-container .ts-toast.ts-toast-show{opacity:1;transform:translateY(0)}@keyframes ts-toast-slide-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes ts-toast-slide-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes ts-toast-slide-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes ts-toast-slide-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes ts-toast-zoom-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes ts-toast-zoom-out{from{transform:scale(1)}to{transform:scale(0)}}@keyframes ts-toast-flip{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}.ts-toast-container .ts-toast-icon{font-size:1.2rem}.ts-toast-container .ts-toast-success .ts-toast-icon{color:var(--toast-success-color,#66ee78)}.ts-toast-container .ts-toast-error .ts-toast-icon{color:var(--toast-error-color,#ef4444)}.ts-toast-container .ts-toast-loader{width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid var(--toast-loader-color,#66ee78);border-radius:50%;animation:ts-toast-spin 1s linear infinite}@keyframes ts-toast-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.ts-toast-container .ts-toast-loader.done{animation:none;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast-icon{font-size:1.2rem;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast.ts-toast-show .ts-toast-icon{opacity:1}@keyframes progress-bar{0%{width:0%}100%{width:100%}}@keyframes ts-toast-slide-top-reverse{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes ts-toast-slide-bottom-reverse{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes ts-toast-slide-left-reverse{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes ts-toast-slide-right-reverse{from{transform:translateX(0)}to{transform:translateX(100%)}}.ts-toast.ts-toast-slide-out{opacity:0}.ts-toast-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2147483646}.ts-toast-overlay.top-left{align-items:flex-start;justify-content:flex-start;padding:1rem}.ts-toast-overlay.top-center{align-items:flex-start;justify-content:center;padding:1rem}.ts-toast-overlay.top-right{align-items:flex-start;justify-content:flex-end;padding:1rem}.ts-toast-overlay.bottom-left{align-items:flex-end;justify-content:flex-start;padding:1rem}.ts-toast-overlay.bottom-center{align-items:flex-end;justify-content:center;padding:1rem}.ts-toast-overlay.bottom-right{align-items:flex-end;justify-content:flex-end;padding:1rem}.ts-toast-d-flex{display:inline-flex;align-items:center}body.ts-toast-no-scroll{overflow:hidden}

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@tsirosgeorge/toastnotification",
-  "version": "5.1.1",
+  "version": "5.3.0",
   "description": "a toast notification plugin",
   "main": "toast.min.js",
+  "module": "toast.module.js",
+  "exports": {
+    ".": {
+      "import": "./toast.module.js",
+      "require": "./toast.min.js"
+    }
+  },
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "build:css": "cleancss -o assets/css/toast.min.css assets/css/toast.css",
@@ -14,9 +21,10 @@
   "files": [
     "toast.js",
     "toast.min.js",
+    "toast.module.js",
     "assets/css/toast.css",
-  "assets/css/toast.min.css",
-  "assets/img/"
+    "assets/css/toast.min.css",
+    "assets/img/"
   ],
   "repository": {
     "type": "git",

package/toast.js

@@ -1,13 +1,12 @@
-(function () {
-    "use strict";
+"use strict";
 
-    // Dynamically load the external CSS file
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = "https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/css/toast.min.css";// Pinned to current release
-    document.head.appendChild(link);
+// Dynamically load the external CSS file
+const link = document.createElement("link");
+link.rel = "stylesheet";
+link.href = "./assets/css/toast.css"; // Local for testing
+document.head.appendChild(link);
 
-    // Inject minimal styles for confirm actions and overlay (kept tiny to avoid breaking existing CSS)
+        // Inject minimal styles for confirm actions and overlay (kept tiny to avoid breaking existing CSS)
     (function injectInlineStyles() {
         const STYLE_ID = 'ts-toast-inline-extras';
         if (document.getElementById(STYLE_ID)) return;
@@ -39,7 +38,7 @@
         document.head.appendChild(style);
     })();
 
-    const toast = function (message, options = {}) {
+const toast = function (message, options = {}) {
         const {
             position = 'top-right',
             animation = 'slide-right', // Default fallback animation
@@ -53,6 +52,10 @@
             title = null,
             confirmText = 'Yes',
             cancelText = 'No',
+            // input field options
+            input = false, // 'text', 'email', 'password', 'number', 'textarea', or false
+            inputPlaceholder = '',
+            inputValue = '',
             // confirm button color customization (optional)
             confirmButtonBg = null,
             confirmButtonColor = null,
@@ -75,39 +78,52 @@
 
         // Pick an animation intelligently when one wasn't explicitly provided
         const resolvedAnimation = (typeof options.animation === 'string' && options.animation.trim())
-            ? options.animation.trim()
-            : (isConfirm ? 'zoom-in' : (position.startsWith('top') ? 'slide-top'
-                : position.startsWith('bottom') ? 'slide-bottom'
-                : position.endsWith('left') ? 'slide-left'
-                : 'slide-right'));
-
-        // helper: remove with reverse animation and cleanup
+            ? (function mapAnim(a){
+                const m = {
+                    'slide-top':'ts-toast-slide-top',
+                    'slide-bottom':'ts-toast-slide-bottom',
+                    'slide-left':'ts-toast-slide-left',
+                    'slide-right':'ts-toast-slide-right',
+                    'zoom-in':'ts-toast-zoom-in',
+                    'zoom-out':'ts-toast-zoom-out',
+                    'flip':'ts-toast-flip'
+                };
+                return m[a] || a;
+            })(options.animation.trim())
+            : (isConfirm ? 'ts-toast-zoom-in' : (position.startsWith('top') ? 'ts-toast-slide-top'
+                : position.startsWith('bottom') ? 'ts-toast-slide-bottom'
+                : position.endsWith('left') ? 'ts-toast-slide-left'
+                : 'ts-toast-slide-right'));
+
+        // helper: remove with smooth CSS transition and cleanup (used by alerts)
         const removeWithAnimation = (el, callback) => {
-            // Get the current animation applied to the toast
-            const currentAnimation = el.style.animation || '';
-
-            // Determine the reverse animation based on the current animation
-            let reverseAnimation = '';
-            if (currentAnimation.includes('slide-top')) {
-                reverseAnimation = 'slide-top-reverse';
-            } else if (currentAnimation.includes('slide-bottom')) {
-                reverseAnimation = 'slide-bottom-reverse';
-            } else if (currentAnimation.includes('slide-left')) {
-                reverseAnimation = 'slide-left-reverse';
-            } else if (currentAnimation.includes('slide-right')) {
-                reverseAnimation = 'slide-right-reverse';
-            } else if (currentAnimation.includes('zoom-in')) {
-                reverseAnimation = 'zoom-out';
+            const anim = el.dataset && el.dataset.anim ? el.dataset.anim : (el.style.animation || '');
+            let transform = '';
+            if (anim.includes('ts-toast-slide-top')) {
+                // Entered from top, exit upwards
+                transform = 'translateY(-100%)';
+            } else if (anim.includes('ts-toast-slide-bottom')) {
+                // Entered from bottom, exit upwards
+                transform = 'translateY(100%)';
+            } else if (anim.includes('ts-toast-slide-left')) {
+                // Entered from left, exit to right
+                transform = 'translateX(100%)';
+            } else if (anim.includes('ts-toast-slide-right')) {
+                // Entered from right, exit to right
+                transform = 'translateX(100%)';
             }
 
-            // Apply the reverse animation dynamically
-            el.classList.add('slide-out');
-            el.style.animation = `${reverseAnimation} 0.5s ease`;
+            el.classList.add('ts-toast-slide-out');
+            el.classList.remove('ts-toast-show');
+            // Stop any running keyframe animation and drive exit via CSS transition
+            el.style.animation = '';
+            if (transform) {
+                el.style.transform = transform;
+            }
+            el.style.opacity = '0';
 
-            // Wait for the reverse animation to finish before removing the toast
             setTimeout(() => {
-                el.classList.remove('show', 'slide-out');
-                el.style.animation = '';
+                el.classList.remove('ts-toast-slide-out');
                 if (el.parentNode) el.parentNode.removeChild(el);
                 if (typeof callback === 'function') callback();
             }, 500);
@@ -115,6 +131,7 @@
 
     const toastElement = document.createElement('div');
         toastElement.className = `ts-toast ts-toast-${type}${isConfirm ? ' ts-toast-confirm' : ''}`;
+    toastElement.dataset.anim = resolvedAnimation;
     toastElement.style.animation = `${resolvedAnimation} 0.5s ease`;
         // In confirm mode, we stack content vertically; in alert mode keep original layout
         if (!isConfirm) {
@@ -135,7 +152,7 @@
             img.style.height = '30px';
             img.style.objectFit = 'contain';
 
-            const baseUrl = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/';
+            const baseUrl = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.3.0/assets/img/';
             const timestamp = new Date().getTime(); // 🔄 force refresh
 
             if (type === 'success') {
@@ -174,6 +191,22 @@
             toastElement.appendChild(toastBody);
         }
 
+        // Input field (for confirm mode with input)
+        let inputElement = null;
+        if (isConfirm && input) {
+            if (input === 'textarea') {
+                inputElement = document.createElement('textarea');
+                inputElement.rows = 3;
+            } else {
+                inputElement = document.createElement('input');
+                inputElement.type = input === 'text' || input === 'email' || input === 'password' || input === 'number' ? input : 'text';
+            }
+            inputElement.className = 'ts-toast-input';
+            inputElement.placeholder = inputPlaceholder;
+            inputElement.value = inputValue;
+            toastElement.appendChild(inputElement);
+        }
+
         // Actions (for confirm mode)
         let actionsContainer = null;
         let resultResolver = null;
@@ -203,10 +236,12 @@
             toastElement.result = new Promise((resolve) => { resultResolver = resolve; });
 
             const resolveAndClose = (value) => {
-                if (resultResolver) resultResolver(value);
-                if (value && typeof onConfirm === 'function') onConfirm(toastElement);
+                const result = (value && inputElement !== null) ? inputElement.value : value;
+                if (resultResolver) resultResolver(result);
+                if (value && typeof onConfirm === 'function') onConfirm((inputElement !== null) ? inputElement.value : value, toastElement);
                 if (!value && typeof onCancel === 'function') onCancel(toastElement);
-                if (typeof onResult === 'function') onResult(value, toastElement);
+                if (typeof onResult === 'function') onResult(result, toastElement);
+                // Use the same slide+fade removal as alerts
                 removeWithAnimation(toastElement, () => {
                     if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
                     // Remove overlay if present
@@ -230,7 +265,7 @@
         let overlay = null;
         if (isConfirm && useOverlay) {
             overlay = document.createElement('div');
-            overlay.className = 'ts-toast-overlay';
+            overlay.className = `ts-toast-overlay ${position}`;
             document.body.appendChild(overlay);
             overlay.appendChild(toastElement);
             if (showClose) {
@@ -282,7 +317,7 @@
 
         // Show Toast with animation
         setTimeout(() => {
-            toastElement.classList.add('show');
+            toastElement.classList.add('ts-toast-show');
         }, 100);
 
         // Handle Loader and Icon
@@ -403,13 +438,13 @@
             img.style.objectFit = 'contain';
 
             if (type === 'success') {
-                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/success.gif';
+                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/success.gif';
             } else if (type === 'error') {
-                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/error.gif';
+                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/error.gif';
             } else if (type === 'info') {
-                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/info.gif';
+                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/info.gif';
             } else if (type === 'warning') {
-                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/warning.gif';
+                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/warning.gif';
             }
 
             iconElement.appendChild(img);
@@ -435,21 +470,12 @@
 
         // Set the auto-remove timer again to ensure toast disappears after the duration
         const autoRemove = setTimeout(() => {
-            // Use the same helper removal used above
-            // Re-create the helper here in case update() is used alone
             const removeWithAnimation = (el, cb) => {
-                const currentAnimation = el.style.animation || '';
-                let reverseAnimation = '';
-                if (currentAnimation.includes('slide-top')) reverseAnimation = 'slide-top-reverse';
-                else if (currentAnimation.includes('slide-bottom')) reverseAnimation = 'slide-bottom-reverse';
-                else if (currentAnimation.includes('slide-left')) reverseAnimation = 'slide-left-reverse';
-                else if (currentAnimation.includes('slide-right')) reverseAnimation = 'slide-right-reverse';
-                else if (currentAnimation.includes('zoom-in')) reverseAnimation = 'zoom-out';
-                el.classList.add('slide-out');
-                el.style.animation = `${reverseAnimation} 0.5s ease`;
+                el.classList.add('ts-toast-slide-out');
+                el.classList.remove('ts-toast-show');
+                el.style.animation = '';
                 setTimeout(() => {
-                    el.classList.remove('show', 'slide-out');
-                    el.style.animation = '';
+                    el.classList.remove('ts-toast-slide-out');
                     if (el.parentNode) el.parentNode.removeChild(el);
                     if (typeof cb === 'function') cb();
                 }, 500);
@@ -474,7 +500,7 @@
 
         // Force reflow and add animation after DOM insert
         requestAnimationFrame(() => {
-            toastElement.classList.add('show');
+            toastElement.classList.add('ts-toast-show');
         });
 
         const loader = toastElement.querySelector('.ts-toast-loader');
@@ -510,18 +536,11 @@
             },
             close: () => {
                 if (toastElement._autoRemove) clearTimeout(toastElement._autoRemove);
-                const currentAnimation = toastElement.style.animation || '';
-                let reverseAnimation = '';
-                if (currentAnimation.includes('slide-top')) reverseAnimation = 'slide-top-reverse';
-                else if (currentAnimation.includes('slide-bottom')) reverseAnimation = 'slide-bottom-reverse';
-                else if (currentAnimation.includes('slide-left')) reverseAnimation = 'slide-left-reverse';
-                else if (currentAnimation.includes('slide-right')) reverseAnimation = 'slide-right-reverse';
-                else if (currentAnimation.includes('zoom-in')) reverseAnimation = 'zoom-out';
-                toastElement.classList.add('slide-out');
-                toastElement.style.animation = `${reverseAnimation} 0.5s ease`;
+                toastElement.classList.add('ts-toast-slide-out');
+                toastElement.classList.remove('ts-toast-show');
+                toastElement.style.animation = '';
                 setTimeout(() => {
-                    toastElement.classList.remove('show', 'slide-out');
-                    toastElement.style.animation = '';
+                    toastElement.classList.remove('ts-toast-slide-out');
                     if (toastElement.parentNode) toastElement.parentNode.removeChild(toastElement);
                 }, 500);
             }
@@ -537,7 +556,7 @@
                 mode: 'confirm',
                 duration: 0, // prevent auto-dismiss
                 dismissOnClick: false,
-                onResult: (val) => resolve(!!val)
+                onResult: (val) => resolve(val)
             });
             // If consumer needs the element, it is returned by toast() but we ignore here.
             // They can still call toast(...) with mode: 'confirm' to get the element and read el.result
@@ -545,6 +564,12 @@
         });
     };
 
-    // Expose globally
+// Expose globally for CDN / browser usage
+if (typeof window !== 'undefined') {
     window.toast = toast;
-})();
+}
+
+// CommonJS export for Node/bundlers (safe no-op in browsers)
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = toast;
+}

package/toast.min.js

@@ -1 +1 @@
-!function(){"use strict";const t=document.createElement("link");t.rel="stylesheet",t.href="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/css/toast.min.css",document.head.appendChild(t),function(){const t="ts-toast-inline-extras";if(document.getElementById(t))return;const e=document.createElement("style");e.id=t,e.textContent="\n            /* Ensure center positions exist even if external CSS lacks them */\n            .ts-toast-container.top-center { top: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }\n            .ts-toast-container.bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }\n            .ts-toast-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2147483646; }\n            .ts-toast.ts-toast-confirm { max-width: min(92vw, 440px); width: max(320px, 60%); flex-direction: column; gap: 12px; padding: 16px 20px; background: var(--toast-bg, #fff); color: var(--toast-color, #000); border: 1px solid var(--toast-border, #e5e7eb); border-radius: 12px; box-shadow: var(--toast-shadow, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)); text-align: center; }\n            .ts-toast.ts-toast-confirm .ts-toast-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }\n            .ts-toast-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }\n            .ts-toast-btn { appearance: none; border: 0; padding: 8px 12px; border-radius: 8px; font-weight: 600; cursor: pointer; }\n            .ts-toast-btn.cancel { background: #e9ecef; color: #1f2937; }\n            .ts-toast-btn.confirm { background: #3b82f6; color: #fff; }\n            .ts-toast.ts-toast-error .ts-toast-btn.confirm,\n            .ts-toast.ts-toast-warning .ts-toast-btn.confirm { background: #ef4444; color: #fff; }\n            .ts-toast.ts-toast-confirm .ts-toast-title { font-weight: 700; font-size: 1.05rem; margin-top: 4px; }\n            .ts-toast.ts-toast-confirm .ts-toast-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 999px; border: 0; background: transparent; color: #6b7280; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }\n            .ts-toast.ts-toast-confirm .ts-toast-close:hover { background: rgba(0,0,0,0.06); }\n            .ts-toast.ts-toast-confirm .ts-toast-icon { width: 64px; height: 64px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }\n            .ts-toast.ts-toast-confirm .ts-toast-icon img { width: 36px; height: 36px; }\n            .ts-toast.ts-toast-confirm.ts-toast-success .ts-toast-icon { background: #dcfce7; }\n            .ts-toast.ts-toast-confirm.ts-toast-info .ts-toast-icon { background: #dbeafe; }\n            .ts-toast.ts-toast-confirm.ts-toast-warning .ts-toast-icon { background: #fef3c7; }\n            .ts-toast.ts-toast-confirm.ts-toast-error .ts-toast-icon { background: #fee2e2; }\n        ",document.head.appendChild(e)}();const e=function(t,e={}){const{position:o="top-right",animation:s="slide-right",type:n="info",duration:i=3e3,icon:a=null,showLoader:l=!1,mode:r="alert",title:c=null,confirmText:d="Yes",cancelText:m="No",confirmButtonBg:u=null,confirmButtonColor:p=null,cancelButtonBg:f=null,cancelButtonColor:g=null,onConfirm:h=null,onCancel:y=null,onResult:v=null,useOverlay:x=!0,closeOnOverlayClick:b=!0,showClose:C=!1,dismissOnClick:w=!0,onClick:L=null,onShow:N=null,onDismiss:E=null}=e,k="confirm"===r||"swal"===r,T="string"==typeof e.animation&&e.animation.trim()?e.animation.trim():k?"zoom-in":o.startsWith("top")?"slide-top":o.startsWith("bottom")?"slide-bottom":o.endsWith("left")?"slide-left":"slide-right",$=(t,e)=>{const o=t.style.animation||"";let s="";o.includes("slide-top")?s="slide-top-reverse":o.includes("slide-bottom")?s="slide-bottom-reverse":o.includes("slide-left")?s="slide-left-reverse":o.includes("slide-right")?s="slide-right-reverse":o.includes("zoom-in")&&(s="zoom-out"),t.classList.add("slide-out"),t.style.animation=`${s} 0.5s ease`,setTimeout((()=>{t.classList.remove("show","slide-out"),t.style.animation="",t.parentNode&&t.parentNode.removeChild(t),"function"==typeof e&&e()}),500)},j=document.createElement("div");j.className=`ts-toast ts-toast-${n}${k?" ts-toast-confirm":""}`,j.style.animation=`${T} 0.5s ease`,k||(j.style.flexDirection="row-reverse",j.style.justifyContent="flex-end");const _=document.createElement("span");if(_.className="ts-toast-icon",_.style.display="flex",a)_.textContent=a;else{const t=document.createElement("img");t.src="",t.style.width="30px",t.style.height="30px",t.style.objectFit="contain";const e="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/",o=(new Date).getTime();"success"===n?t.src=`${e}success.gif?t=${o}`:"error"===n?t.src=`${e}error.gif?t=${o}`:"info"===n?t.src=`${e}info.gif?t=${o}`:"warning"===n&&(t.src=`${e}warning.gif?t=${o}`),_.appendChild(t)}const R=document.createElement("div");R.className="ts-toast-body",R.innerHTML=t;let B=null;if(k){if(B=document.createElement("div"),B.className="ts-toast-content",B.appendChild(_),c){const t=document.createElement("div");t.className="ts-toast-title",t.textContent=c,B.appendChild(t)}B.appendChild(R),j.appendChild(B)}else j.appendChild(R);let z=null,S=null;if(k){z=document.createElement("div"),z.className="ts-toast-actions";const t=document.createElement("button");t.className="ts-toast-btn cancel",t.textContent=m;const e=document.createElement("button");e.className="ts-toast-btn confirm",e.textContent=d,f&&(t.style.background=f),g&&(t.style.color=g),u&&(e.style.background=u),p&&(e.style.color=p),z.appendChild(t),z.appendChild(e),j.appendChild(z),j.result=new Promise((t=>{S=t}));const o=t=>{S&&S(t),t&&"function"==typeof h&&h(j),t||"function"!=typeof y||y(j),"function"==typeof v&&v(t,j),$(j,(()=>{E&&"function"==typeof E&&E(j),O&&O.parentNode&&O.parentNode.removeChild(O)}))};t.addEventListener("click",(t=>{t.stopPropagation(),o(!1)})),e.addEventListener("click",(t=>{t.stopPropagation(),o(!0)}))}let q=null;l&&(q=document.createElement("div"),q.className="ts-toast-loader",j.appendChild(q));let O=null;if(k&&x){if(O=document.createElement("div"),O.className="ts-toast-overlay",document.body.appendChild(O),O.appendChild(j),C){const t=document.createElement("button");t.className="ts-toast-close",t.setAttribute("aria-label","Close"),t.innerHTML="×",t.addEventListener("click",(t=>{t.stopPropagation(),$(j,(()=>{E&&"function"==typeof E&&E(j),O&&O.parentNode&&O.parentNode.removeChild(O)}))})),j.appendChild(t)}b&&O.addEventListener("click",(t=>{t.target===O&&(j.result&&"function"==typeof S&&S(!1),$(j,(()=>{E&&"function"==typeof E&&E(j),O&&O.parentNode&&O.parentNode.removeChild(O)})))}))}else{let t=document.querySelector(`.ts-toast-container.${o}`);t||(t=document.createElement("div"),t.className=`ts-toast-container ${o}`,document.body.appendChild(t)),t.appendChild(j)}if(N&&"function"==typeof N&&N(j),setTimeout((()=>{j.classList.add("show")}),100),l&&q&&setTimeout((()=>{j._managedByLoading||(q.classList.add("done"),q.remove(),j.contains(_)||(k&&B?B.appendChild(_):j.appendChild(_)))}),2e3),l||k||j.contains(_)||j.appendChild(_),!k&&i>0){const t=setTimeout((()=>{$(j,(()=>{E&&"function"==typeof E&&E(j)}))}),i);j._autoRemove=t}if(!k&&w&&j.addEventListener("click",(()=>{j._autoRemove&&clearTimeout(j._autoRemove),$(j,(()=>{L&&"function"==typeof L&&L(j),E&&"function"==typeof E&&E(j)}))})),!k){let t=0,e=0;j.addEventListener("touchstart",(e=>{t=e.changedTouches[0].screenX})),j.addEventListener("touchend",(o=>{e=o.changedTouches[0].screenX,Math.abs(t-e)>50&&(j._autoRemove&&clearTimeout(j._autoRemove),$(j,(()=>{E&&"function"==typeof E&&E(j)})))}))}return j};e.success=function(t,o){e(t,{...o,type:"success"})},e.error=function(t,o){e(t,{...o,type:"error"})},e.update=function(t,e,o={}){const{type:s=null,icon:n=null,showLoader:i=!1,duration:a=3e3,position:l="top-right",onClick:r=null,onShow:c=null,onDismiss:d=null}=o,m=t.querySelector(".ts-toast-loader"),u=t.querySelector(".ts-toast-icon");m&&m.remove(),s&&(t.className=`ts-toast ts-toast-${s} show ${l}`);const p=t.querySelector(".ts-toast-body");p&&(p.innerHTML=e),u&&u.remove();const f=document.createElement("span");if(f.className="ts-toast-icon",f.style.display="flex",n)f.textContent=n;else{const t=document.createElement("img");t.style.width="30px",t.style.height="30px",t.style.objectFit="contain","success"===s?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/success.gif":"error"===s?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/error.gif":"info"===s?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/info.gif":"warning"===s&&(t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/warning.gif"),f.appendChild(t)}if(t.appendChild(f),i){const e=document.createElement("div");e.className="ts-toast-loader",t.appendChild(e),setTimeout((()=>{e.classList.add("done")}),2e3)}t._autoRemove&&clearTimeout(t._autoRemove);const g=setTimeout((()=>{((t,e)=>{const o=t.style.animation||"";let s="";o.includes("slide-top")?s="slide-top-reverse":o.includes("slide-bottom")?s="slide-bottom-reverse":o.includes("slide-left")?s="slide-left-reverse":o.includes("slide-right")?s="slide-right-reverse":o.includes("zoom-in")&&(s="zoom-out"),t.classList.add("slide-out"),t.style.animation=`${s} 0.5s ease`,setTimeout((()=>{t.classList.remove("show","slide-out"),t.style.animation="",t.parentNode&&t.parentNode.removeChild(t),"function"==typeof e&&e()}),500)})(t,(()=>{d&&"function"==typeof d&&d(t)}))}),a);t._autoRemove=g},e.loading=function(t,o={}){const s=e(t,{...o,type:o.type||"info",duration:0,showLoader:!0,icon:null});requestAnimationFrame((()=>{s.classList.add("show")}));const n=s.querySelector(".ts-toast-loader");let i=s.querySelector(".ts-toast-icon");return i||(i=document.createElement("span"),i.className="ts-toast-icon",i.style.display="flex",s.appendChild(i)),s._managedByLoading=!0,n&&setTimeout((()=>{s._managedByLoading||n.classList.add("done")}),2e3),{update:(t,o={})=>{s._managedByLoading=!1,e.update(s,t,{...o,showLoader:!1})},close:()=>{s._autoRemove&&clearTimeout(s._autoRemove);const t=s.style.animation||"";let e="";t.includes("slide-top")?e="slide-top-reverse":t.includes("slide-bottom")?e="slide-bottom-reverse":t.includes("slide-left")?e="slide-left-reverse":t.includes("slide-right")?e="slide-right-reverse":t.includes("zoom-in")&&(e="zoom-out"),s.classList.add("slide-out"),s.style.animation=`${e} 0.5s ease`,setTimeout((()=>{s.classList.remove("show","slide-out"),s.style.animation="",s.parentNode&&s.parentNode.removeChild(s)}),500)}}},e.confirm=function(t,o={}){return new Promise((s=>{e(t,{...o,mode:"confirm",duration:0,dismissOnClick:!1,onResult:t=>s(!!t)})}))},window.toast=e}();
+"use strict";const link=document.createElement("link");link.rel="stylesheet",link.href="./assets/css/toast.css",document.head.appendChild(link),function(){const t="ts-toast-inline-extras";if(document.getElementById(t))return;const e=document.createElement("style");e.id=t,e.textContent="\n            /* Ensure center positions exist even if external CSS lacks them */\n            .ts-toast-container.top-center { top: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }\n            .ts-toast-container.bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }\n            .ts-toast-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2147483646; }\n            .ts-toast.ts-toast-confirm { max-width: min(92vw, 440px); width: max(320px, 60%); flex-direction: column; gap: 12px; padding: 16px 20px; background: var(--toast-bg, #fff); color: var(--toast-color, #000); border: 1px solid var(--toast-border, #e5e7eb); border-radius: 12px; box-shadow: var(--toast-shadow, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)); text-align: center; }\n            .ts-toast.ts-toast-confirm .ts-toast-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }\n            .ts-toast-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }\n            .ts-toast-btn { appearance: none; border: 0; padding: 8px 12px; border-radius: 8px; font-weight: 600; cursor: pointer; }\n            .ts-toast-btn.cancel { background: #e9ecef; color: #1f2937; }\n            .ts-toast-btn.confirm { background: #3b82f6; color: #fff; }\n            .ts-toast.ts-toast-error .ts-toast-btn.confirm,\n            .ts-toast.ts-toast-warning .ts-toast-btn.confirm { background: #ef4444; color: #fff; }\n            .ts-toast.ts-toast-confirm .ts-toast-title { font-weight: 700; font-size: 1.05rem; margin-top: 4px; }\n            .ts-toast.ts-toast-confirm .ts-toast-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 999px; border: 0; background: transparent; color: #6b7280; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }\n            .ts-toast.ts-toast-confirm .ts-toast-close:hover { background: rgba(0,0,0,0.06); }\n            .ts-toast.ts-toast-confirm .ts-toast-icon { width: 64px; height: 64px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }\n            .ts-toast.ts-toast-confirm .ts-toast-icon img { width: 36px; height: 36px; }\n            .ts-toast.ts-toast-confirm.ts-toast-success .ts-toast-icon { background: #dcfce7; }\n            .ts-toast.ts-toast-confirm.ts-toast-info .ts-toast-icon { background: #dbeafe; }\n            .ts-toast.ts-toast-confirm.ts-toast-warning .ts-toast-icon { background: #fef3c7; }\n            .ts-toast.ts-toast-confirm.ts-toast-error .ts-toast-icon { background: #fee2e2; }\n        ",document.head.appendChild(e)}();const toast=function(t,e={}){const{position:o="top-right",animation:s="slide-right",type:n="info",duration:a=3e3,icon:i=null,showLoader:l=!1,mode:c="alert",title:r=null,confirmText:d="Yes",cancelText:m="No",input:u=!1,inputPlaceholder:p="",inputValue:f="",confirmButtonBg:g=null,confirmButtonColor:h=null,cancelButtonBg:y=null,cancelButtonColor:x=null,onConfirm:v=null,onCancel:b=null,onResult:C=null,useOverlay:w=!0,closeOnOverlayClick:L=!0,showClose:E=!1,dismissOnClick:N=!0,onClick:k=null,onShow:T=null,onDismiss:$=null}=e,_="confirm"===c||"swal"===c,j="string"==typeof e.animation&&e.animation.trim()?{"slide-top":"ts-toast-slide-top","slide-bottom":"ts-toast-slide-bottom","slide-left":"ts-toast-slide-left","slide-right":"ts-toast-slide-right","zoom-in":"ts-toast-zoom-in","zoom-out":"ts-toast-zoom-out",flip:"ts-toast-flip"}[R=e.animation.trim()]||R:_?"ts-toast-zoom-in":o.startsWith("top")?"ts-toast-slide-top":o.startsWith("bottom")?"ts-toast-slide-bottom":o.endsWith("left")?"ts-toast-slide-left":"ts-toast-slide-right";var R;const B=(t,e)=>{const o=t.dataset&&t.dataset.anim?t.dataset.anim:t.style.animation||"";let s="";o.includes("ts-toast-slide-top")?s="translateY(-100%)":o.includes("ts-toast-slide-bottom")?s="translateY(100%)":(o.includes("ts-toast-slide-left")||o.includes("ts-toast-slide-right"))&&(s="translateX(100%)"),t.classList.add("ts-toast-slide-out"),t.classList.remove("ts-toast-show"),t.style.animation="",s&&(t.style.transform=s),t.style.opacity="0",setTimeout((()=>{t.classList.remove("ts-toast-slide-out"),t.parentNode&&t.parentNode.removeChild(t),"function"==typeof e&&e()}),500)},S=document.createElement("div");S.className=`ts-toast ts-toast-${n}${_?" ts-toast-confirm":""}`,S.dataset.anim=j,S.style.animation=`${j} 0.5s ease`,_||(S.style.flexDirection="row-reverse",S.style.justifyContent="flex-end");const z=document.createElement("span");if(z.className="ts-toast-icon",z.style.display="flex",i)z.textContent=i;else{const t=document.createElement("img");t.src="",t.style.width="30px",t.style.height="30px",t.style.objectFit="contain";const e="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.3.0/assets/img/",o=(new Date).getTime();"success"===n?t.src=`${e}success.gif?t=${o}`:"error"===n?t.src=`${e}error.gif?t=${o}`:"info"===n?t.src=`${e}info.gif?t=${o}`:"warning"===n&&(t.src=`${e}warning.gif?t=${o}`),z.appendChild(t)}const q=document.createElement("div");q.className="ts-toast-body",q.innerHTML=t;let P=null;if(_){if(P=document.createElement("div"),P.className="ts-toast-content",P.appendChild(z),r){const t=document.createElement("div");t.className="ts-toast-title",t.textContent=r,P.appendChild(t)}P.appendChild(q),S.appendChild(P)}else S.appendChild(q);let O=null;_&&u&&("textarea"===u?(O=document.createElement("textarea"),O.rows=3):(O=document.createElement("input"),O.type="text"===u||"email"===u||"password"===u||"number"===u?u:"text"),O.className="ts-toast-input",O.placeholder=p,O.value=f,S.appendChild(O));let X=null,D=null;if(_){X=document.createElement("div"),X.className="ts-toast-actions";const t=document.createElement("button");t.className="ts-toast-btn cancel",t.textContent=m;const e=document.createElement("button");e.className="ts-toast-btn confirm",e.textContent=d,y&&(t.style.background=y),x&&(t.style.color=x),g&&(e.style.background=g),h&&(e.style.color=h),X.appendChild(t),X.appendChild(e),S.appendChild(X),S.result=new Promise((t=>{D=t}));const o=t=>{const e=t&&null!==O?O.value:t;D&&D(e),t&&"function"==typeof v&&v(null!==O?O.value:t,S),t||"function"!=typeof b||b(S),"function"==typeof C&&C(e,S),B(S,(()=>{$&&"function"==typeof $&&$(S),F&&F.parentNode&&F.parentNode.removeChild(F)}))};t.addEventListener("click",(t=>{t.stopPropagation(),o(!1)})),e.addEventListener("click",(t=>{t.stopPropagation(),o(!0)}))}let M=null;l&&(M=document.createElement("div"),M.className="ts-toast-loader",S.appendChild(M));let F=null;if(_&&w){if(F=document.createElement("div"),F.className=`ts-toast-overlay ${o}`,document.body.appendChild(F),F.appendChild(S),E){const t=document.createElement("button");t.className="ts-toast-close",t.setAttribute("aria-label","Close"),t.innerHTML="×",t.addEventListener("click",(t=>{t.stopPropagation(),B(S,(()=>{$&&"function"==typeof $&&$(S),F&&F.parentNode&&F.parentNode.removeChild(F)}))})),S.appendChild(t)}L&&F.addEventListener("click",(t=>{t.target===F&&(S.result&&"function"==typeof D&&D(!1),B(S,(()=>{$&&"function"==typeof $&&$(S),F&&F.parentNode&&F.parentNode.removeChild(F)})))}))}else{let t=document.querySelector(`.ts-toast-container.${o}`);t||(t=document.createElement("div"),t.className=`ts-toast-container ${o}`,document.body.appendChild(t)),t.appendChild(S)}if(T&&"function"==typeof T&&T(S),setTimeout((()=>{S.classList.add("ts-toast-show")}),100),l&&M&&setTimeout((()=>{S._managedByLoading||(M.classList.add("done"),M.remove(),S.contains(z)||(_&&P?P.appendChild(z):S.appendChild(z)))}),2e3),l||_||S.contains(z)||S.appendChild(z),!_&&a>0){const t=setTimeout((()=>{B(S,(()=>{$&&"function"==typeof $&&$(S)}))}),a);S._autoRemove=t}if(!_&&N&&S.addEventListener("click",(()=>{S._autoRemove&&clearTimeout(S._autoRemove),B(S,(()=>{k&&"function"==typeof k&&k(S),$&&"function"==typeof $&&$(S)}))})),!_){let t=0,e=0;S.addEventListener("touchstart",(e=>{t=e.changedTouches[0].screenX})),S.addEventListener("touchend",(o=>{e=o.changedTouches[0].screenX,Math.abs(t-e)>50&&(S._autoRemove&&clearTimeout(S._autoRemove),B(S,(()=>{$&&"function"==typeof $&&$(S)})))}))}return S};toast.success=function(t,e){toast(t,{...e,type:"success"})},toast.error=function(t,e){toast(t,{...e,type:"error"})},toast.update=function(t,e,o={}){const{type:s=null,icon:n=null,showLoader:a=!1,duration:i=3e3,position:l="top-right",onClick:c=null,onShow:r=null,onDismiss:d=null}=o,m=t.querySelector(".ts-toast-loader"),u=t.querySelector(".ts-toast-icon");m&&m.remove(),s&&(t.className=`ts-toast ts-toast-${s} show ${l}`);const p=t.querySelector(".ts-toast-body");p&&(p.innerHTML=e),u&&u.remove();const f=document.createElement("span");if(f.className="ts-toast-icon",f.style.display="flex",n)f.textContent=n;else{const t=document.createElement("img");t.style.width="30px",t.style.height="30px",t.style.objectFit="contain","success"===s?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/success.gif":"error"===s?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/error.gif":"info"===s?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/info.gif":"warning"===s&&(t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/warning.gif"),f.appendChild(t)}if(t.appendChild(f),a){const e=document.createElement("div");e.className="ts-toast-loader",t.appendChild(e),setTimeout((()=>{e.classList.add("done")}),2e3)}t._autoRemove&&clearTimeout(t._autoRemove);const g=setTimeout((()=>{var e,o;o=()=>{d&&"function"==typeof d&&d(t)},(e=t).classList.add("ts-toast-slide-out"),e.classList.remove("ts-toast-show"),e.style.animation="",setTimeout((()=>{e.classList.remove("ts-toast-slide-out"),e.parentNode&&e.parentNode.removeChild(e),"function"==typeof o&&o()}),500)}),i);t._autoRemove=g},toast.loading=function(t,e={}){const o=toast(t,{...e,type:e.type||"info",duration:0,showLoader:!0,icon:null});requestAnimationFrame((()=>{o.classList.add("ts-toast-show")}));const s=o.querySelector(".ts-toast-loader");let n=o.querySelector(".ts-toast-icon");return n||(n=document.createElement("span"),n.className="ts-toast-icon",n.style.display="flex",o.appendChild(n)),o._managedByLoading=!0,s&&setTimeout((()=>{o._managedByLoading||s.classList.add("done")}),2e3),{update:(t,e={})=>{o._managedByLoading=!1,toast.update(o,t,{...e,showLoader:!1})},close:()=>{o._autoRemove&&clearTimeout(o._autoRemove),o.classList.add("ts-toast-slide-out"),o.classList.remove("ts-toast-show"),o.style.animation="",setTimeout((()=>{o.classList.remove("ts-toast-slide-out"),o.parentNode&&o.parentNode.removeChild(o)}),500)}}},toast.confirm=function(t,e={}){return new Promise((o=>{toast(t,{...e,mode:"confirm",duration:0,dismissOnClick:!1,onResult:t=>o(t)})}))},"undefined"!=typeof window&&(window.toast=toast),"undefined"!=typeof module&&module.exports&&(module.exports=toast);

package/toast.module.js

@@ -0,0 +1,542 @@
+"use strict";
+
+// Dynamically load the external CSS file (same as toast.js)
+const link = document.createElement("link");
+link.rel = "stylesheet";
+link.href = "./assets/css/toast.css"; // Local for testing
+document.head.appendChild(link);
+
+// Inject minimal styles for confirm actions and overlay (same as toast.js)
+(function injectInlineStyles() {
+	const STYLE_ID = "ts-toast-inline-extras";
+	if (document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = `
+            /* Ensure center positions exist even if external CSS lacks them */
+            .ts-toast-container.top-center { top: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }
+            .ts-toast-container.bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }
+            .ts-toast-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2147483646; }
+            .ts-toast.ts-toast-confirm { max-width: min(92vw, 440px); width: max(320px, 60%); flex-direction: column; gap: 12px; padding: 16px 20px; background: var(--toast-bg, #fff); color: var(--toast-color, #000); border: 1px solid var(--toast-border, #e5e7eb); border-radius: 12px; box-shadow: var(--toast-shadow, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)); text-align: center; }
+            .ts-toast.ts-toast-confirm .ts-toast-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
+            .ts-toast-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
+            .ts-toast-btn { appearance: none; border: 0; padding: 8px 12px; border-radius: 8px; font-weight: 600; cursor: pointer; }
+            .ts-toast-btn.cancel { background: #e9ecef; color: #1f2937; }
+            .ts-toast-btn.confirm { background: #3b82f6; color: #fff; }
+            .ts-toast.ts-toast-error .ts-toast-btn.confirm,
+            .ts-toast.ts-toast-warning .ts-toast-btn.confirm { background: #ef4444; color: #fff; }
+            .ts-toast.ts-toast-confirm .ts-toast-title { font-weight: 700; font-size: 1.05rem; margin-top: 4px; }
+            .ts-toast.ts-toast-confirm .ts-toast-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 999px; border: 0; background: transparent; color: #6b7280; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
+            .ts-toast.ts-toast-confirm .ts-toast-close:hover { background: rgba(0,0,0,0.06); }
+            .ts-toast.ts-toast-confirm .ts-toast-icon { width: 64px; height: 64px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
+            .ts-toast.ts-toast-confirm .ts-toast-icon img { width: 36px; height: 36px; }
+            .ts-toast.ts-toast-confirm.ts-toast-success .ts-toast-icon { background: #dcfce7; }
+            .ts-toast.ts-toast-confirm.ts-toast-info .ts-toast-icon { background: #dbeafe; }
+            .ts-toast.ts-toast-confirm.ts-toast-warning .ts-toast-icon { background: #fef3c7; }
+            .ts-toast.ts-toast-confirm.ts-toast-error .ts-toast-icon { background: #fee2e2; }
+        `;
+	document.head.appendChild(style);
+})();
+
+// Full implementation copied from toast.js but exposed as ES module
+const toast = function (message, options = {}) {
+	const {
+		position = "top-right",
+		animation = "slide-right",
+		type = "info",
+		duration = 3000,
+		icon = null,
+		showLoader = false,
+		mode = "alert",
+		title = null,
+		confirmText = "Yes",
+		cancelText = "No",
+		input = false,
+		inputPlaceholder = "",
+		inputValue = "",
+		confirmButtonBg = null,
+		confirmButtonColor = null,
+		cancelButtonBg = null,
+		cancelButtonColor = null,
+		onConfirm = null,
+		onCancel = null,
+		onResult = null,
+		useOverlay = true,
+		closeOnOverlayClick = true,
+		showClose = false,
+		dismissOnClick = true,
+		onClick = null,
+		onShow = null,
+		onDismiss = null,
+	} = options;
+
+	const isConfirm = mode === "confirm" || mode === "swal";
+
+	const resolvedAnimation =
+		typeof options.animation === "string" && options.animation.trim()
+			? (function mapAnim(a) {
+				const m = {
+					"slide-top": "ts-toast-slide-top",
+					"slide-bottom": "ts-toast-slide-bottom",
+					"slide-left": "ts-toast-slide-left",
+					"slide-right": "ts-toast-slide-right",
+					"zoom-in": "ts-toast-zoom-in",
+					"zoom-out": "ts-toast-zoom-out",
+					flip: "ts-toast-flip",
+				};
+				return m[a] || a;
+			})(options.animation.trim())
+			: isConfirm
+			? "ts-toast-zoom-in"
+			: position.startsWith("top")
+			? "ts-toast-slide-top"
+			: position.startsWith("bottom")
+			? "ts-toast-slide-bottom"
+			: position.endsWith("left")
+			? "ts-toast-slide-left"
+			: "ts-toast-slide-right";
+
+	// helper: remove with smooth CSS transition and cleanup (used by alerts and confirms)
+	const removeWithAnimation = (el, callback) => {
+		const anim = el.dataset && el.dataset.anim ? el.dataset.anim : (el.style.animation || "");
+		let transform = "";
+		if (anim.includes("ts-toast-slide-top")) {
+			// Entered from top, exit upwards
+			transform = "translateY(-100%)";
+		} else if (anim.includes("ts-toast-slide-bottom")) {
+			// Entered from bottom, exit upwards
+			transform = "translateY(100%)";
+		} else if (anim.includes("ts-toast-slide-left")) {
+			// Entered from left, exit to right
+			transform = "translateX(100%)";
+		} else if (anim.includes("ts-toast-slide-right")) {
+			// Entered from right, exit to right
+			transform = "translateX(100%)";
+		}
+
+		el.classList.add("ts-toast-slide-out");
+		el.classList.remove("ts-toast-show");
+		el.style.animation = "";
+		if (transform) {
+			el.style.transform = transform;
+		}
+		el.style.opacity = "0";
+
+		setTimeout(() => {
+			el.classList.remove("ts-toast-slide-out");
+			if (el.parentNode) el.parentNode.removeChild(el);
+			if (typeof callback === "function") callback();
+		}, 500);
+	};
+
+	const toastElement = document.createElement("div");
+	toastElement.className = `ts-toast ts-toast-${type}${isConfirm ? " ts-toast-confirm" : ""}`;
+	toastElement.dataset.anim = resolvedAnimation;
+	toastElement.style.animation = `${resolvedAnimation} 0.5s ease`;
+	if (!isConfirm) {
+		toastElement.style.flexDirection = "row-reverse";
+		toastElement.style.justifyContent = "flex-end";
+	}
+
+	const iconElement = document.createElement("span");
+	iconElement.className = "ts-toast-icon";
+	iconElement.style.display = "flex";
+	if (icon) {
+		iconElement.textContent = icon;
+	} else {
+		const img = document.createElement("img");
+		img.src = "";
+		img.style.width = "30px";
+		img.style.height = "30px";
+		img.style.objectFit = "contain";
+
+		const baseUrl =
+			"https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.3.0/assets/img/";
+		const timestamp = new Date().getTime();
+
+		if (type === "success") {
+			img.src = `${baseUrl}success.gif?t=${timestamp}`;
+		} else if (type === "error") {
+			img.src = `${baseUrl}error.gif?t=${timestamp}`;
+		} else if (type === "info") {
+			img.src = `${baseUrl}info.gif?t=${timestamp}`;
+		} else if (type === "warning") {
+			img.src = `${baseUrl}warning.gif?t=${timestamp}`;
+		}
+
+		iconElement.appendChild(img);
+	}
+
+	const toastBody = document.createElement("div");
+	toastBody.className = "ts-toast-body";
+	toastBody.innerHTML = message;
+
+	let contentRow = null;
+	if (isConfirm) {
+		contentRow = document.createElement("div");
+		contentRow.className = "ts-toast-content";
+		contentRow.appendChild(iconElement);
+		if (title) {
+			const titleEl = document.createElement("div");
+			titleEl.className = "ts-toast-title";
+			titleEl.textContent = title;
+			contentRow.appendChild(titleEl);
+		}
+		contentRow.appendChild(toastBody);
+		toastElement.appendChild(contentRow);
+	} else {
+		toastElement.appendChild(toastBody);
+	}
+
+	// Input field (for confirm mode with input)
+	let inputElement = null;
+	if (isConfirm && input) {
+		if (input === "textarea") {
+			inputElement = document.createElement("textarea");
+			inputElement.rows = 3;
+		} else {
+			inputElement = document.createElement("input");
+			inputElement.type = input === "text" || input === "email" || input === "password" || input === "number" ? input : "text";
+		}
+		inputElement.className = "ts-toast-input";
+		inputElement.placeholder = inputPlaceholder;
+		inputElement.value = inputValue;
+		toastElement.appendChild(inputElement);
+	}
+
+	let actionsContainer = null;
+	let resultResolver = null;
+	if (isConfirm) {
+		actionsContainer = document.createElement("div");
+		actionsContainer.className = "ts-toast-actions";
+
+		const cancelBtn = document.createElement("button");
+		cancelBtn.className = "ts-toast-btn cancel";
+		cancelBtn.textContent = cancelText;
+
+		const confirmBtn = document.createElement("button");
+		confirmBtn.className = "ts-toast-btn confirm";
+		confirmBtn.textContent = confirmText;
+
+		if (cancelButtonBg) cancelBtn.style.background = cancelButtonBg;
+		if (cancelButtonColor) cancelBtn.style.color = cancelButtonColor;
+		if (confirmButtonBg) confirmBtn.style.background = confirmButtonBg;
+		if (confirmButtonColor) confirmBtn.style.color = confirmButtonColor;
+
+		actionsContainer.appendChild(cancelBtn);
+		actionsContainer.appendChild(confirmBtn);
+		toastElement.appendChild(actionsContainer);
+
+		toastElement.result = new Promise((resolve) => {
+			resultResolver = resolve;
+		});
+
+		const resolveAndClose = (value) => {
+			const result = (value && inputElement !== null) ? inputElement.value : value;
+			if (resultResolver) resultResolver(result);
+			if (value && typeof onConfirm === "function") onConfirm((inputElement !== null) ? inputElement.value : value, toastElement);
+			if (!value && typeof onCancel === "function") onCancel(toastElement);
+			if (typeof onResult === "function") onResult(result, toastElement);
+			// Use the same slide+fade removal as alerts
+			removeWithAnimation(toastElement, () => {
+				if (onDismiss && typeof onDismiss === "function") onDismiss(toastElement);
+				if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
+			});
+		};
+
+		cancelBtn.addEventListener("click", (e) => {
+			e.stopPropagation();
+			resolveAndClose(false);
+		});
+		confirmBtn.addEventListener("click", (e) => {
+			e.stopPropagation();
+			resolveAndClose(true);
+		});
+	}
+
+	let loader = null;
+	if (showLoader) {
+		loader = document.createElement("div");
+		loader.className = "ts-toast-loader";
+		toastElement.appendChild(loader);
+	}
+
+	let overlay = null;
+		if (isConfirm && useOverlay) {
+		overlay = document.createElement("div");
+		overlay.className = `ts-toast-overlay ${position}`;
+		document.body.appendChild(overlay);
+		overlay.appendChild(toastElement);
+		if (showClose) {
+			const closeBtn = document.createElement("button");
+			closeBtn.className = "ts-toast-close";
+			closeBtn.setAttribute("aria-label", "Close");
+			closeBtn.innerHTML = "×";
+			closeBtn.addEventListener("click", (e) => {
+				e.stopPropagation();
+					removeWithAnimation(toastElement, () => {
+						if (onDismiss && typeof onDismiss === "function") onDismiss(toastElement);
+						if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
+					});
+			});
+			toastElement.appendChild(closeBtn);
+		}
+		if (closeOnOverlayClick) {
+			overlay.addEventListener("click", (e) => {
+				if (e.target === overlay) {
+					if (toastElement.result) {
+						if (typeof resultResolver === "function") {
+							resultResolver(false);
+						}
+					}
+						removeWithAnimation(toastElement, () => {
+							if (onDismiss && typeof onDismiss === "function") onDismiss(toastElement);
+							if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
+						});
+				}
+			});
+		}
+	} else {
+		let container = document.querySelector(`.ts-toast-container.${position}`);
+		if (!container) {
+			container = document.createElement("div");
+			container.className = `ts-toast-container ${position}`;
+			document.body.appendChild(container);
+		}
+		container.appendChild(toastElement);
+	}
+
+	if (onShow && typeof onShow === "function") {
+		onShow(toastElement);
+	}
+
+	setTimeout(() => {
+		toastElement.classList.add("ts-toast-show");
+	}, 100);
+
+	if (showLoader && loader) {
+		setTimeout(() => {
+			if (toastElement._managedByLoading) return;
+			loader.classList.add("done");
+			loader.remove();
+			if (!toastElement.contains(iconElement)) {
+				if (isConfirm && contentRow) contentRow.appendChild(iconElement);
+				else toastElement.appendChild(iconElement);
+			}
+		}, 2000);
+	}
+	if (!showLoader) {
+		if (!isConfirm && !toastElement.contains(iconElement)) {
+			toastElement.appendChild(iconElement);
+		}
+	}
+
+	if (!isConfirm && duration > 0) {
+		const autoRemove = setTimeout(() => {
+			removeWithAnimation(toastElement, () => {
+				if (onDismiss && typeof onDismiss === "function") onDismiss(toastElement);
+			});
+		}, duration);
+		toastElement._autoRemove = autoRemove;
+	}
+
+	if (!isConfirm && dismissOnClick) {
+		toastElement.addEventListener("click", () => {
+			if (toastElement._autoRemove) clearTimeout(toastElement._autoRemove);
+			removeWithAnimation(toastElement, () => {
+				if (onClick && typeof onClick === "function") onClick(toastElement);
+				if (onDismiss && typeof onDismiss === "function") onDismiss(toastElement);
+			});
+		});
+	}
+
+	if (!isConfirm) {
+		let touchStartX = 0;
+		let touchEndX = 0;
+
+		toastElement.addEventListener("touchstart", (e) => {
+			touchStartX = e.changedTouches[0].screenX;
+		});
+
+		toastElement.addEventListener("touchend", (e) => {
+			touchEndX = e.changedTouches[0].screenX;
+			if (Math.abs(touchStartX - touchEndX) > 50) {
+				if (toastElement._autoRemove) clearTimeout(toastElement._autoRemove);
+				removeWithAnimation(toastElement, () => {
+					if (onDismiss && typeof onDismiss === "function") onDismiss(toastElement);
+				});
+			}
+		});
+	}
+
+	return toastElement;
+};
+
+toast.success = function (message, options) {
+	toast(message, { ...options, type: "success" });
+};
+
+toast.error = function (message, options) {
+	toast(message, { ...options, type: "error" });
+};
+
+toast.update = function (toastElement, message, options = {}) {
+	const {
+		type = null,
+		icon = null,
+		showLoader = false,
+		duration = 3000,
+		position = "top-right",
+		onClick = null,
+		onShow = null,
+		onDismiss = null,
+	} = options;
+
+	const oldLoader = toastElement.querySelector(".ts-toast-loader");
+	const oldIcon = toastElement.querySelector(".ts-toast-icon");
+	if (oldLoader) oldLoader.remove();
+
+	if (type) {
+		toastElement.className = `ts-toast ts-toast-${type} show ${position}`;
+	}
+	const toastBody = toastElement.querySelector(".ts-toast-body");
+	if (toastBody) {
+		toastBody.innerHTML = message;
+	}
+
+	if (oldIcon) {
+		oldIcon.remove();
+	}
+
+	const iconElement = document.createElement("span");
+	iconElement.className = "ts-toast-icon";
+	iconElement.style.display = "flex";
+
+	if (icon) {
+		iconElement.textContent = icon;
+	} else {
+		const img = document.createElement("img");
+		img.style.width = "30px";
+		img.style.height = "30px";
+		img.style.objectFit = "contain";
+
+		if (type === "success") {
+			img.src =
+				"https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/success.gif";
+		} else if (type === "error") {
+			img.src =
+				"https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/error.gif";
+		} else if (type === "info") {
+			img.src =
+				"https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/info.gif";
+		} else if (type === "warning") {
+			img.src =
+				"https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/warning.gif";
+		}
+
+		iconElement.appendChild(img);
+	}
+
+	toastElement.appendChild(iconElement);
+
+	if (showLoader) {
+		const loader = document.createElement("div");
+		loader.className = "ts-toast-loader";
+		toastElement.appendChild(loader);
+		setTimeout(() => {
+			loader.classList.add("done");
+		}, 2000);
+	}
+
+	if (toastElement._autoRemove) {
+		clearTimeout(toastElement._autoRemove);
+	}
+
+	const autoRemove = setTimeout(() => {
+		const removeWithAnimation = (el, cb) => {
+			el.classList.add("ts-toast-slide-out");
+			el.classList.remove("ts-toast-show");
+			el.style.animation = "";
+			setTimeout(() => {
+				el.classList.remove("ts-toast-slide-out");
+				if (el.parentNode) el.parentNode.removeChild(el);
+				if (typeof cb === "function") cb();
+			}, 500);
+		};
+
+		removeWithAnimation(toastElement, () => {
+			if (onDismiss && typeof onDismiss === "function") onDismiss(toastElement);
+		});
+	}, duration);
+
+	toastElement._autoRemove = autoRemove;
+};
+
+toast.loading = function (message, options = {}) {
+	const toastElement = toast(message, {
+		...options,
+		type: options.type || "info",
+		duration: 0,
+		showLoader: true,
+		icon: null,
+	});
+
+	requestAnimationFrame(() => {
+		toastElement.classList.add("ts-toast-show");
+	});
+
+	const loader = toastElement.querySelector(".ts-toast-loader");
+	let iconElement = toastElement.querySelector(".ts-toast-icon");
+
+	if (!iconElement) {
+		iconElement = document.createElement("span");
+		iconElement.className = "ts-toast-icon";
+		iconElement.style.display = "flex";
+		toastElement.appendChild(iconElement);
+	}
+
+	toastElement._managedByLoading = true;
+
+	if (loader) {
+		setTimeout(() => {
+			if (!toastElement._managedByLoading) loader.classList.add("done");
+		}, 2000);
+	}
+
+	return {
+		update: (newMessage, newOptions = {}) => {
+			toastElement._managedByLoading = false;
+			toast.update(toastElement, newMessage, {
+				...newOptions,
+				showLoader: false,
+			});
+		},
+		close: () => {
+			if (toastElement._autoRemove) clearTimeout(toastElement._autoRemove);
+			toastElement.classList.add("ts-toast-slide-out");
+			toastElement.classList.remove("ts-toast-show");
+			toastElement.style.animation = "";
+			setTimeout(() => {
+				toastElement.classList.remove("ts-toast-slide-out");
+				if (toastElement.parentNode) toastElement.parentNode.removeChild(toastElement);
+			}, 500);
+		},
+	};
+};
+
+toast.confirm = function (message, options = {}) {
+	return new Promise((resolve) => {
+		const el = toast(message, {
+			...options,
+			mode: "confirm",
+			duration: 0,
+			dismissOnClick: false,
+			onResult: (val) => resolve(val),
+		});
+		void el;
+	});
+};
+
+// ES module export
+export default toast;
+export { toast };