toastify-pro 1.2.0 → 1.4.0

package/dist/toastify-pro.umd.js

@@ -17,16 +17,26 @@
    * - Progress bar with shimmer effects
    * - Responsive design for mobile devices
    * - Framework agnostic (works with React, Vue, Angular, etc.)
+   * - Confirmation dialogs with customizable buttons and callbacks
+   * - Center position support for enhanced focus
+   * - Independent positioning for confirmations
+   * - Loading states for async operations
+   * - Custom gradient colors with primaryColor/secondaryColor
+   * - Single instance mode with shake animation
    * 
-   * @version 1.2.0
+   * @version 1.4.0
    * @author ToastifyPro Team
    * @license MIT
    */
+
+  // Global active confirmation tracker (shared across all instances)
+  let globalActiveConfirmation = null;
+
   class ToastifyPro {
     /**
      * Creates a new ToastifyPro instance
      * @param {Object} options - Configuration options
-     * @param {string} options.position - Toast position (top-left, top-right, bottom-left, bottom-right, top-center, bottom-center)
+     * @param {string} options.position - Toast position (top-left, top-right, bottom-left, bottom-right, top-center, bottom-center, center)
      * @param {number} options.timeout - Auto-dismiss timeout in milliseconds (0 to disable)
      * @param {boolean} options.allowClose - Whether to show close button
      * @param {number} options.maxLength - Maximum message length
@@ -40,14 +50,14 @@
 
       // Merge with default options
       this.defaultOptions = {
-        position: options.position || "bottom-center", // top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
+        position: options.position || "bottom-center", // top-left, top-right, bottom-left, bottom-right, top-center, bottom-center, center
         timeout: options.timeout || 3000,
         allowClose: options.allowClose !== false, // default true
         maxLength: options.maxLength || 100,
       };
 
       // Validate position
-      const validPositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'];
+      const validPositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center', 'center'];
       if (!validPositions.includes(this.defaultOptions.position)) {
         console.warn(`ToastifyPro: Invalid position "${this.defaultOptions.position}". Using "bottom-center".`);
         this.defaultOptions.position = "bottom-center";
@@ -143,6 +153,7 @@
     .toastify-pro-container.bottom-right { bottom: 50px; right: 24px; align-items: flex-end; }
     .toastify-pro-container.top-center { top: 50px; left: 50%; transform: translateX(-50%); }
     .toastify-pro-container.bottom-center { bottom: 50px; left: 50%; transform: translateX(-50%); }
+    .toastify-pro-container.center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
 
     .toastify-pro {
       min-width: 280px;
@@ -300,6 +311,26 @@
       100% { transform: translateX(100%); }
     }
     
+    @keyframes shake {
+      0%, 100% { transform: translate(0, 0); }
+      10%, 30%, 50%, 70%, 90% { transform: translate(-10px, 0); }
+      20%, 40%, 60%, 80% { transform: translate(10px, 0); }
+    }
+    
+    @keyframes shakeCenter {
+      0%, 100% { transform: scale(1) translateX(0); }
+      10%, 30%, 50%, 70%, 90% { transform: scale(1) translateX(-10px); }
+      20%, 40%, 60%, 80% { transform: scale(1) translateX(10px); }
+    }
+    
+    .toastify-pro.shake {
+      animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
+    }
+    
+    .toastify-pro-container.center .toastify-pro.shake {
+      animation: shakeCenter 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
+    }
+    
     .toastify-pro.show { 
       opacity: 1; 
       transform: scale(1);
@@ -402,6 +433,11 @@
         opacity: 0;
       }
     }
+    
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
 
     .toastify-pro .toast-icon svg {
       width: 18px;
@@ -481,6 +517,287 @@
       .toastify-pro-container.top-right,
       .toastify-pro-container.bottom-right { right: 16px; }
     }
+
+    /* Confirmation Toast Styles - Enhanced Modern Design */
+    .toastify-pro.confirmation {
+      min-width: 380px;
+      max-width: 500px;
+      padding: 32px 28px 28px;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 24px;
+      position: relative;
+      backdrop-filter: blur(24px) saturate(180%);
+      box-shadow: 
+        0 24px 48px -12px rgba(0, 0, 0, 0.25),
+        0 12px 24px -8px rgba(0, 0, 0, 0.15),
+        0 0 0 1px rgba(255, 255, 255, 0.08),
+        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
+      border: 1.5px solid rgba(255, 255, 255, 0.15);
+      border-radius: 20px;
+    }
+
+    /* Hide progress bar for confirmation toasts */
+    .toastify-pro.confirmation::after {
+      display: none;
+    }
+
+    /* Shimmer effect for confirmation toasts */
+    .toastify-pro.confirmation::before {
+      opacity: 0.5;
+    }
+
+    /* Close button for confirmation dialogs */
+    .toastify-pro.confirmation .conf-close-btn {
+      position: absolute;
+      top: 14px;
+      right: 14px;
+      cursor: pointer;
+      font-size: 20px;
+      color: inherit;
+      opacity: 0.5;
+      padding: 6px;
+      border-radius: 8px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.08);
+      backdrop-filter: blur(10px);
+      font-weight: 300;
+      line-height: 1;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+    }
+    
+    .toastify-pro.confirmation .conf-close-btn:hover { 
+      opacity: 0.9; 
+      background: rgba(255, 255, 255, 0.15);
+      transform: scale(1.1) rotate(90deg);
+      border-color: rgba(255, 255, 255, 0.25);
+    }
+    
+    .toastify-pro.confirmation.light .conf-close-btn {
+      background: rgba(15, 23, 42, 0.06);
+      border-color: rgba(15, 23, 42, 0.12);
+      opacity: 0.6;
+    }
+    
+    .toastify-pro.confirmation.light .conf-close-btn:hover { 
+      background: rgba(15, 23, 42, 0.12);
+      border-color: rgba(15, 23, 42, 0.2);
+      opacity: 1;
+    }
+
+    /* Icon styling for confirmation */
+    .toastify-pro.confirmation .toast-icon {
+      width: 56px;
+      height: 56px;
+      margin: 0 auto 8px;
+      background: rgba(255, 255, 255, 0.15);
+      backdrop-filter: blur(12px);
+      border: 2px solid rgba(255, 255, 255, 0.2);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+    }
+
+    .toastify-pro.confirmation .toast-icon svg {
+      width: 28px;
+      height: 28px;
+    }
+
+    .toastify-pro.confirmation.light .toast-icon {
+      background: rgba(15, 23, 42, 0.08);
+      border-color: rgba(15, 23, 42, 0.15);
+    }
+
+    .toastify-pro.confirmation .toast-content {
+      text-align: center;
+      margin-bottom: 4px;
+    }
+
+    .toastify-pro.confirmation .toast-message {
+      font-weight: 700;
+      font-size: 20px;
+      margin-bottom: 8px;
+      letter-spacing: -0.02em;
+      line-height: 1.3;
+    }
+
+    .toastify-pro.confirmation .toast-description {
+      font-size: 15px;
+      opacity: 0.85;
+      margin-top: 8px;
+      line-height: 1.5;
+      font-weight: 400;
+    }
+
+    /* Fix text visibility for dark/light variants */
+    .toastify-pro.confirmation.dark .toast-message,
+    .toastify-pro.confirmation.dark .toast-description {
+      color: white;
+    }
+
+    .toastify-pro.confirmation.light .toast-message,
+    .toastify-pro.confirmation.light .toast-description {
+      color: #1e293b;
+    }
+
+    .toast-actions {
+      display: flex;
+      gap: 14px;
+      margin-top: 4px;
+    }
+
+    .toast-btn {
+      flex: 1;
+      padding: 14px 20px;
+      border: none;
+      border-radius: 12px;
+      font-weight: 600;
+      font-size: 15px;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      backdrop-filter: blur(10px);
+      position: relative;
+      overflow: hidden;
+      letter-spacing: 0.01em;
+    }
+
+    .toast-btn::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.3);
+      transform: translate(-50%, -50%);
+      transition: width 0.6s, height 0.6s;
+    }
+
+    .toast-btn:hover::after {
+      width: 300px;
+      height: 300px;
+    }
+
+    .toast-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    }
+
+    .toast-btn:active {
+      transform: translateY(0);
+      transition: all 0.1s;
+    }
+
+    .toast-btn-cancel {
+      background: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.9);
+      border: 1.5px solid rgba(255, 255, 255, 0.25);
+      font-weight: 600;
+    }
+
+    .toast-btn-cancel:hover {
+      background: rgba(255, 255, 255, 0.15);
+      color: white;
+      border-color: rgba(255, 255, 255, 0.35);
+    }
+    
+    .toast-btn-cancel:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .toast-btn-confirm {
+      color: white;
+      font-weight: 700;
+      border: 2px solid rgba(255, 255, 255, 0.4);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+      position: relative;
+      overflow: hidden;
+      background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
+    }
+
+    .toast-btn-confirm::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
+      transition: left 0.6s;
+    }
+
+    .toast-btn-confirm:hover::before {
+      left: 100%;
+    }
+
+    .toast-btn-confirm:hover {
+      background: linear-gradient(135deg, rgba(15, 23, 42, 1), rgba(30, 41, 59, 1));
+      border-color: rgba(255, 255, 255, 0.5);
+      box-shadow: 0 8px 28px rgba(15, 23, 42, 0.5);
+    }
+    
+    .toast-btn-confirm.loading {
+      opacity: 0.7;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+    
+    .toast-btn-confirm .btn-spinner {
+      display: none;
+      width: 16px;
+      height: 16px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-top-color: white;
+      border-radius: 50%;
+      animation: spin 0.6s linear infinite;
+      margin-right: 8px;
+    }
+    
+    .toast-btn-confirm.loading .btn-spinner {
+      display: inline-block;
+    }
+    
+    .toast-btn-confirm.loading .btn-text {
+      opacity: 0.7;
+    }
+
+    .toastify-pro.light .toast-btn-cancel {
+      background: rgba(15, 23, 42, 0.08);
+      color: rgba(15, 23, 42, 0.85);
+      border-color: rgba(15, 23, 42, 0.2);
+    }
+
+    .toastify-pro.light .toast-btn-cancel:hover {
+      background: rgba(15, 23, 42, 0.12);
+      color: rgba(15, 23, 42, 1);
+      border-color: rgba(15, 23, 42, 0.3);
+    }
+
+    /* Enhanced light theme confirm buttons */
+    .toastify-pro.light .toast-btn-confirm {
+      border-color: rgba(15, 23, 42, 0.35);
+      background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+      color: white;
+    }
+
+    .toastify-pro.light .toast-btn-confirm:hover {
+      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+      border-color: rgba(15, 23, 42, 0.5);
+      box-shadow: 0 8px 28px rgba(15, 23, 42, 0.3);
+    }
+
+    @media (max-width: 640px) {
+      .toastify-pro.confirmation {
+        min-width: 280px;
+        max-width: calc(100vw - 32px);
+      }
+    }
   `;
         document.head.appendChild(style);
       } catch (error) {
@@ -721,6 +1038,444 @@
       }
       this.show(msg, "light", opts);
     }
+
+    /**
+     * Shows a confirmation toast with confirm/cancel buttons
+     * @param {string} message - Main confirmation question
+     * @param {string|Function|Object} descriptionOrCallback - Description text, callback function, or options object
+     * @param {Function} callback - Callback function (if description provided)
+     */
+    conf(message, descriptionOrCallback, callback) {
+      // Check if there's already an active confirmation (GLOBAL CHECK)
+      if (globalActiveConfirmation && globalActiveConfirmation.element && globalActiveConfirmation.element.parentNode) {
+        // Trigger shake animation on existing confirmation toast element
+        const existingToast = globalActiveConfirmation.element;
+        existingToast.classList.remove('shake');
+        // Force reflow to restart animation
+        void existingToast.offsetWidth;
+        existingToast.classList.add('shake');
+        
+        // Remove shake class after animation completes
+        setTimeout(() => {
+          if (existingToast && existingToast.parentNode) {
+            existingToast.classList.remove('shake');
+          }
+        }, 600);
+        
+        return globalActiveConfirmation;
+      }
+      
+      // Parse arguments to support multiple usage patterns
+      let description = '';
+      let options = {};
+      let resultCallback = null;
+
+      // Pattern 1: conf('message', callback)
+      if (typeof descriptionOrCallback === 'function' && !callback) {
+        resultCallback = descriptionOrCallback;
+      }
+      // Pattern 2: conf('message', 'description', callback)
+      else if (typeof descriptionOrCallback === 'string' && typeof callback === 'function') {
+        description = descriptionOrCallback;
+        resultCallback = callback;
+      }
+      // Pattern 3: conf('message', options) with onConfirm/onCancel
+      else if (typeof descriptionOrCallback === 'object' && descriptionOrCallback !== null) {
+        options = descriptionOrCallback;
+        description = options.description || '';
+        
+        // Use onConfirm/onCancel if provided, otherwise use callback parameter
+        if (options.onConfirm || options.onCancel) {
+          // Don't use the callback parameter if onConfirm/onCancel are provided
+          resultCallback = null;
+        } else if (typeof callback === 'function') {
+          resultCallback = callback;
+        }
+      }
+      // Pattern 4: conf('message', 'description', options) - legacy support
+      else if (typeof descriptionOrCallback === 'string' && typeof callback === 'object') {
+        description = descriptionOrCallback;
+        options = callback || {};
+        // In this case, no unified callback, rely on onConfirm/onCancel
+        resultCallback = null;
+      }
+
+      // Default options for confirmation
+      const confirmOptions = {
+        timeout: 0, // No auto-dismiss for confirmations
+        allowClose: false, // No close button, must choose
+        confirmText: options.confirmText || 'Confirm',
+        cancelText: options.cancelText || 'Cancel',
+        theme: options.theme || options.color || 'dark', // Support both theme and color for backward compatibility
+        position: options.position || 'center', // Default to center for confirmations
+        primaryColor: options.primaryColor || null,
+        secondaryColor: options.secondaryColor || null,
+        loading: options.loading || false, // Support external loading state (for React/Vue)
+        ...options
+      };
+
+      // Validate and set theme to only dark or light
+      if (confirmOptions.theme === 'light' || confirmOptions.theme === 'white') {
+        confirmOptions.theme = 'light';
+      } else {
+        confirmOptions.theme = 'dark'; // Default to dark for all other values
+      }
+
+      // Helper function to determine if a color is light or dark
+      const isLightColor = (color) => {
+        if (!color) return false;
+        const hex = color.replace('#', '');
+        const r = parseInt(hex.substr(0, 2), 16);
+        const g = parseInt(hex.substr(2, 2), 16);
+        const b = parseInt(hex.substr(4, 2), 16);
+        const brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+        return brightness > 155;
+      };
+
+      // Determine text color based on background
+      let textColor = confirmOptions.theme === 'light' ? '#1e293b' : 'white';
+      if (confirmOptions.primaryColor) {
+        textColor = isLightColor(confirmOptions.primaryColor) ? '#1e293b' : 'white';
+      }
+
+      // Validate position for confirmation toast
+      const validPositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center', 'center'];
+      if (!validPositions.includes(confirmOptions.position)) {
+        console.warn(`ToastifyPro: Invalid confirmation position "${confirmOptions.position}". Using default position.`);
+        confirmOptions.position = this.defaultOptions.position;
+      }
+
+      // Get or create container for the specified position
+      let confirmContainer = document.querySelector(`.toastify-pro-container.${confirmOptions.position}`);
+      
+      if (!confirmContainer) {
+        try {
+          confirmContainer = document.createElement("div");
+          confirmContainer.className = `toastify-pro-container ${confirmOptions.position}`;
+          document.body.appendChild(confirmContainer);
+        } catch (error) {
+          console.warn('ToastifyPro: Failed to create confirmation container. Using default container.');
+          confirmContainer = this.container;
+        }
+      }
+
+      // Create control functions for loading state
+      let confirmBtnElement = null;
+      let cancelBtnElement = null;
+      let closeBtnElement = null;
+      let isLoading = false;
+      let useLoading = false; // Track if user wants loading behavior
+      let toastElement = null; // Reference to toast element
+      
+      const setLoading = (loading) => {
+        useLoading = true; // User is manually controlling loading
+        isLoading = loading;
+        if (confirmBtnElement) {
+          if (loading) {
+            confirmBtnElement.classList.add('loading');
+            confirmBtnElement.disabled = true;
+          } else {
+            confirmBtnElement.classList.remove('loading');
+            confirmBtnElement.disabled = false;
+          }
+        }
+        // Disable/enable cancel and close buttons during loading
+        if (cancelBtnElement) {
+          cancelBtnElement.disabled = loading;
+          cancelBtnElement.style.opacity = loading ? '0.5' : '1';
+          cancelBtnElement.style.cursor = loading ? 'not-allowed' : 'pointer';
+        }
+        if (closeBtnElement) {
+          closeBtnElement.style.opacity = loading ? '0.3' : '0.5';
+          closeBtnElement.style.cursor = loading ? 'not-allowed' : 'pointer';
+          closeBtnElement.style.pointerEvents = loading ? 'none' : 'auto';
+        }
+      };
+      
+      const closeConfirmation = () => {
+        if (toastElement && toastElement.parentNode) {
+          globalActiveConfirmation = null;
+          this.removeToast(toastElement);
+        }
+      };
+      
+      // Helper function to handle confirmation result
+      const handleConfirmation = async (confirmed) => {
+        if (confirmed) {
+          // Call onConfirm if provided
+          if (options.onConfirm && typeof options.onConfirm === 'function') {
+            try {
+              const result = options.onConfirm({ setLoading, close: closeConfirmation });
+              // Check if it's a promise
+              if (result && typeof result.then === 'function') {
+                // If user didn't manually set loading, auto-set it
+                if (!useLoading) {
+                  setLoading(true);
+                }
+                await result;
+                // Auto-close after promise resolves if user didn't manually close
+                if (toastElement && toastElement.parentNode) {
+                  setLoading(false);
+                  closeConfirmation();
+                }
+              } else {
+                // Synchronous callback - only close if user didn't start loading
+                if (!useLoading) {
+                  closeConfirmation();
+                }
+              }
+            } catch (error) {
+              console.error('ToastifyPro: Error in onConfirm callback:', error);
+              setLoading(false);
+              closeConfirmation();
+            }
+          }
+          // Call unified callback if provided
+          else if (resultCallback && typeof resultCallback === 'function') {
+            try {
+              const result = resultCallback(true, { setLoading, close: closeConfirmation });
+              if (result && typeof result.then === 'function') {
+                if (!useLoading) {
+                  setLoading(true);
+                }
+                await result;
+                if (toastElement && toastElement.parentNode) {
+                  setLoading(false);
+                  closeConfirmation();
+                }
+              } else {
+                if (!useLoading) {
+                  closeConfirmation();
+                }
+              }
+            } catch (error) {
+              console.error('ToastifyPro: Error in confirmation callback:', error);
+              setLoading(false);
+              closeConfirmation();
+            }
+          } else {
+            // No callback - just close
+            closeConfirmation();
+          }
+        } else {
+          // Cancel - no loading needed, check if not currently loading
+          if (isLoading) return; // Don't allow cancel while loading
+          
+          // Call onCancel if provided
+          if (options.onCancel && typeof options.onCancel === 'function') {
+            try {
+              options.onCancel();
+            } catch (error) {
+              console.error('ToastifyPro: Error in onCancel callback:', error);
+            }
+          }
+          // Call unified callback if provided
+          if (resultCallback && typeof resultCallback === 'function') {
+            try {
+              resultCallback(false);
+            } catch (error) {
+              console.error('ToastifyPro: Error in confirmation callback:', error);
+            }
+          }
+          closeConfirmation();
+        }
+      };
+
+      try {
+        // Create confirmation toast element
+        const toast = document.createElement("div");
+        toast.className = `toastify-pro confirmation ${confirmOptions.theme}`;
+        
+        // Store reference to toast element
+        toastElement = toast;
+
+        // Apply custom colors if provided
+        if (confirmOptions.primaryColor) {
+          const primary = confirmOptions.primaryColor;
+          const secondary = confirmOptions.secondaryColor;
+          
+          if (secondary) {
+            // Both colors provided - create gradient
+            toast.style.background = `linear-gradient(135deg, ${primary} 0%, ${secondary} 100%)`;
+          } else {
+            // Only primary color - solid with slight transparency
+            toast.style.background = primary;
+          }
+          
+          // Set text color based on background brightness
+          toast.style.color = textColor;
+          
+          // Adjust border color to match
+          const borderOpacity = isLightColor(primary) ? '0.2' : '0.15';
+          toast.style.borderColor = `rgba(255, 255, 255, ${borderOpacity})`;
+        }
+
+        // Create close button for confirmation
+        const closeBtn = document.createElement("span");
+        closeBtn.className = "conf-close-btn";
+        closeBtn.innerHTML = "×";
+        closeBtn.setAttribute('aria-label', 'Cancel confirmation');
+        closeBtn.onclick = () => {
+          if (!isLoading) {
+            handleConfirmation(false);
+          }
+        };
+        if (confirmOptions.primaryColor) {
+          closeBtn.style.color = textColor;
+        }
+        closeBtnElement = closeBtn;
+        toast.appendChild(closeBtn);
+
+        // Create icon wrapper
+        const iconWrapper = document.createElement("div");
+        iconWrapper.className = "toast-icon";
+        iconWrapper.innerHTML = this.getIconSVG('info'); // Default to info icon
+        if (confirmOptions.primaryColor) {
+          iconWrapper.style.color = textColor;
+        }
+        toast.appendChild(iconWrapper);
+
+        // Create content wrapper
+        const contentWrapper = document.createElement("div");
+        contentWrapper.className = "toast-content";
+        
+        // Main message
+        const messageElement = document.createElement("div");
+        messageElement.className = "toast-message";
+        messageElement.textContent = message.substring(0, this.defaultOptions.maxLength);
+        if (confirmOptions.primaryColor) {
+          messageElement.style.color = textColor;
+        }
+        contentWrapper.appendChild(messageElement);
+        
+        // Optional description
+        if (description) {
+          const descriptionElement = document.createElement("div");
+          descriptionElement.className = "toast-description";
+          descriptionElement.textContent = description.substring(0, this.defaultOptions.maxLength * 2);
+          if (confirmOptions.primaryColor) {
+            descriptionElement.style.color = textColor;
+          }
+          contentWrapper.appendChild(descriptionElement);
+        }
+        
+        toast.appendChild(contentWrapper);
+
+        // Create action buttons container
+        const actionsWrapper = document.createElement("div");
+        actionsWrapper.className = "toast-actions";
+
+        // Cancel button
+        const cancelBtn = document.createElement("button");
+        cancelBtn.className = "toast-btn toast-btn-cancel";
+        cancelBtn.textContent = confirmOptions.cancelText;
+        cancelBtn.onclick = () => {
+          if (!isLoading) {
+            handleConfirmation(false);
+          }
+        };
+        
+        // Store cancel button reference
+        cancelBtnElement = cancelBtn;
+        
+        // Style cancel button with custom colors
+        if (confirmOptions.primaryColor) {
+          const isLight = isLightColor(confirmOptions.primaryColor);
+          cancelBtn.style.background = isLight ? 'rgba(15, 23, 42, 0.08)' : 'rgba(255, 255, 255, 0.1)';
+          cancelBtn.style.color = textColor;
+          cancelBtn.style.borderColor = isLight ? 'rgba(15, 23, 42, 0.2)' : 'rgba(255, 255, 255, 0.25)';
+        }
+
+        // Confirm button
+        const confirmBtn = document.createElement("button");
+        confirmBtn.className = `toast-btn toast-btn-confirm`;
+        
+        // Create spinner element
+        const spinner = document.createElement("span");
+        spinner.className = "btn-spinner";
+        confirmBtn.appendChild(spinner);
+        
+        // Create text wrapper
+        const textWrapper = document.createElement("span");
+        textWrapper.className = "btn-text";
+        textWrapper.textContent = confirmOptions.confirmText;
+        confirmBtn.appendChild(textWrapper);
+        
+        confirmBtn.onclick = () => {
+          if (!isLoading) {
+            handleConfirmation(true);
+          }
+        };
+        
+        // Store reference for loading state control
+        confirmBtnElement = confirmBtn;
+        
+        // Style confirm button with custom colors
+        if (confirmOptions.primaryColor) {
+          const primary = confirmOptions.primaryColor;
+          const secondary = confirmOptions.secondaryColor;
+          const isLight = isLightColor(primary);
+          
+          if (secondary) {
+            // Gradient confirm button
+            confirmBtn.style.background = `linear-gradient(135deg, ${primary} 0%, ${secondary} 100%)`;
+          } else {
+            // Solid color confirm button with enhanced styling
+            confirmBtn.style.background = primary;
+          }
+          
+          // Determine button text color (always use contrasting color for readability)
+          confirmBtn.style.color = isLight ? '#1e293b' : 'white';
+          confirmBtn.style.borderColor = isLight ? 'rgba(15, 23, 42, 0.3)' : 'rgba(255, 255, 255, 0.4)';
+        }
+
+        actionsWrapper.appendChild(cancelBtn);
+        actionsWrapper.appendChild(confirmBtn);
+        toast.appendChild(actionsWrapper);
+
+        // Add toast to the specified container (not default container)
+        confirmContainer.appendChild(toast);
+        
+        // Create control object
+        const controlObject = {
+          element: toast,
+          setLoading: setLoading,
+          close: closeConfirmation
+        };
+        
+        // Store as global active confirmation (with control object)
+        globalActiveConfirmation = controlObject;
+        
+        // Apply initial loading state if provided (for React/Vue)
+        if (confirmOptions.loading) {
+          setLoading(true);
+        }
+
+        // Entrance animation
+        setTimeout(() => {
+          toast.classList.add("show");
+          const icon = toast.querySelector('.toast-icon');
+          if (icon) {
+            icon.style.animation = 'iconBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
+          }
+        }, 10);
+
+        // Return control object with toast element and control functions
+        return controlObject;
+      } catch (error) {
+        console.error('ToastifyPro: Failed to create confirmation toast:', error);
+      }
+    }
+
+    /**
+     * Alias for conf() method - shows a confirmation toast
+     * @param {string} message - Main confirmation question
+     * @param {string|Function|Object} descriptionOrCallback - Description text, callback function, or options object
+     * @param {Function} callback - Callback function (if description provided)
+     */
+    confirm(message, descriptionOrCallback, callback) {
+      return this.conf(message, descriptionOrCallback, callback);
+    }
   }
 
   /**