toastify-pro 1.2.0 → 1.4.0

package/dist/toastify-pro.esm.js

@@ -12,16 +12,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
@@ -35,14 +45,14 @@ class ToastifyPro {
 
     // 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";
@@ -138,6 +148,7 @@ class ToastifyPro {
     .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;
@@ -295,6 +306,26 @@ class ToastifyPro {
       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);
@@ -397,6 +428,11 @@ class ToastifyPro {
         opacity: 0;
       }
     }
+    
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
 
     .toastify-pro .toast-icon svg {
       width: 18px;
@@ -476,6 +512,287 @@ class ToastifyPro {
       .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) {
@@ -716,6 +1033,444 @@ class ToastifyPro {
     }
     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);
+  }
 }
 
 /**