toastify-pro 1.1.0 → 1.2.0

package/dist/toastify-pro.umd.js

@@ -1,11 +1,44 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+(function (factory) {
   typeof define === 'function' && define.amd ? define(factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ToastifyPro = factory());
-})(this, (function () { 'use strict';
+  factory();
+})((function () { 'use strict';
 
+  /**
+   * ToastifyPro - Modern Toast Notification Library
+   * A beautiful, customizable toast notification library with glassmorphism design,
+   * Apple AirDrop-style animations, and car swipe exit effects.
+   * 
+   * Features:
+   * - Glassmorphism design with backdrop-filter effects
+   * - Apple AirDrop-style entrance animations
+   * - Position-aware car swipe exit animations  
+   * - Description support for enhanced messaging
+   * - Six theme variants (success, error, info, warning, dark, light)
+   * - Progress bar with shimmer effects
+   * - Responsive design for mobile devices
+   * - Framework agnostic (works with React, Vue, Angular, etc.)
+   * 
+   * @version 1.2.0
+   * @author ToastifyPro Team
+   * @license MIT
+   */
   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 {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
+     */
     constructor(options = {}) {
+      // Validate options parameter
+      if (typeof options !== 'object' || options === null) {
+        console.warn('ToastifyPro: Invalid options parameter. Using defaults.');
+        options = {};
+      }
+
+      // Merge with default options
       this.defaultOptions = {
         position: options.position || "bottom-center", // top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
         timeout: options.timeout || 3000,
@@ -13,153 +46,710 @@
         maxLength: options.maxLength || 100,
       };
 
-      // create container only once
+      // Validate position
+      const validPositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'];
+      if (!validPositions.includes(this.defaultOptions.position)) {
+        console.warn(`ToastifyPro: Invalid position "${this.defaultOptions.position}". Using "bottom-center".`);
+        this.defaultOptions.position = "bottom-center";
+      }
+
+      // Check if we're in a browser environment
+      if (typeof document === 'undefined') {
+        throw new Error('ToastifyPro: This library requires a DOM environment (browser).');
+      }
+
+      // Create or reuse container for this position
       const existing = document.querySelector(
         `.toastify-pro-container.${this.defaultOptions.position}`
       );
+      
       if (existing) {
         this.container = existing;
       } else {
-        this.container = document.createElement("div");
-        this.container.className = `toastify-pro-container ${this.defaultOptions.position}`;
-        document.body.appendChild(this.container);
+        try {
+          this.container = document.createElement("div");
+          this.container.className = `toastify-pro-container ${this.defaultOptions.position}`;
+          document.body.appendChild(this.container);
+        } catch (error) {
+          throw new Error('ToastifyPro: Failed to create container element. DOM may not be ready.');
+        }
       }
 
+      // Inject styles once
       this.injectStyles();
     }
 
+    /**
+     * Returns the SVG icon for a given toast type
+     * @param {string} type - Toast type (success, error, info, warning, dark, light)
+     * @returns {string} SVG icon markup
+     */
+    getIconSVG(type) {
+      // Validate type parameter
+      if (typeof type !== 'string') {
+        console.warn('ToastifyPro: Invalid icon type. Using default info icon.');
+        type = 'info';
+      }
+
+      const icons = {
+        success: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/>
+      </svg>`,
+        error: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="currentColor"/>
+      </svg>`,
+        info: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="currentColor"/>
+      </svg>`,
+        warning: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="currentColor"/>
+      </svg>`,
+        dark: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/>
+      </svg>`,
+        light: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 11H7v6h2v-6zm4 0h-2v6h2v-6zm4 0h-2v6h2v-6zm2.5-9H19V1h-2v1H7V1H5v1H4.5C3.11 2 2 3.11 2 4.5v14C2 19.89 3.11 21 4.5 21h15c1.39 0 2.5-1.11 2.5-2.5v-14C22 3.11 20.89 2 19.5 2zm0 16h-15v-11h15v11z" fill="currentColor"/>
+      </svg>`
+      };
+      
+      return icons[type] || icons.info;
+    }
+
+    /**
+     * Injects the CSS styles into the document head
+     * Styles include glassmorphism design, animations, and responsive layout
+     */
     injectStyles() {
-      if (document.getElementById("toastify-pro-styles")) return; // load once
-      const style = document.createElement("style");
-      style.id = "toastify-pro-styles";
-      style.textContent = `
+      // Prevent duplicate style injection
+      if (document.getElementById("toastify-pro-styles")) return;
+      
+      try {
+        const style = document.createElement("style");
+        style.id = "toastify-pro-styles";
+        style.textContent = `
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+    
     .toastify-pro-container {
       position: fixed;
       z-index: 9999;
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 16px;
       pointer-events: none;
     }
-    .toastify-pro-container.top-left { top: 20px; left: 20px; align-items: flex-start; }
-    .toastify-pro-container.top-right { top: 20px; right: 20px; align-items: flex-end; }
-    .toastify-pro-container.bottom-left { bottom: 20px; left: 20px; align-items: flex-start; }
-    .toastify-pro-container.bottom-right { bottom: 20px; right: 20px; align-items: flex-end; }
-    .toastify-pro-container.top-center { top: 20px; left: 50%; transform: translateX(-50%); }
-    .toastify-pro-container.bottom-center { bottom: 150px; left: 50%; transform: translateX(-50%); }
+    .toastify-pro-container.top-left { top: 50px; left: 24px; align-items: flex-start; }
+    .toastify-pro-container.top-right { top: 50px; right: 24px; align-items: flex-end; }
+    .toastify-pro-container.bottom-left { bottom: 50px; left: 24px; align-items: flex-start; }
+    .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 {
-      min-width: 220px;
-      max-width: 320px;
-      padding: 12px 18px;
-      border-radius: 20px;
-      font-size: 14px;
-      font-family: sans-serif;
+      min-width: 280px;
+      max-width: 400px;
+      padding: 20px 24px;
+      border-radius: 16px;
+      font-size: 15px;
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-weight: 500;
       color: white;
       opacity: 0;
-      transform: translateY(20px);
-      transition: all 0.3s ease;
+      transform: scale(0.3);
+      transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       pointer-events: auto;
       position: relative;
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      gap: 12px;
+      gap: 16px;
+      backdrop-filter: blur(20px);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      box-shadow: 
+        0 20px 25px -5px rgba(0, 0, 0, 0.1),
+        0 10px 10px -5px rgba(0, 0, 0, 0.04),
+        0 0 0 1px rgba(255, 255, 255, 0.05);
+      overflow: hidden;
+    }
+    
+    .toastify-pro::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, 
+        rgba(255, 255, 255, 0.8) 0%,
+        rgba(255, 255, 255, 0.4) 50%,
+        rgba(255, 255, 255, 0.8) 100%);
+      animation: shimmer 2s infinite;
+      transition: opacity 0.8s ease;
+    }
+    
+    .toastify-pro::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 3px;
+      background: rgba(255, 255, 255, 0.6);
+      animation: progress var(--duration, 5s) linear;
+      border-radius: 0 0 16px 16px;
+    }
+    
+    @keyframes airdropPop {
+      0% { 
+        opacity: 0;
+        transform: scale(0.3) rotateY(-20deg); 
+      }
+      30% { 
+        opacity: 0.8;
+        transform: scale(1.1) rotateY(10deg); 
+      }
+      60% { 
+        opacity: 1;
+        transform: scale(0.98) rotateY(-3deg); 
+      }
+      100% { 
+        opacity: 1;
+        transform: scale(1) rotateY(0deg); 
+      }
+    }
+    
+    @keyframes carSwipeBottom {
+      0% { 
+        opacity: 1;
+        transform: scale(1) translateY(0); 
+      }
+      15% { 
+        opacity: 1;
+        transform: scale(1.02) translateY(-8px); 
+      }
+      100% { 
+        opacity: 0;
+        transform: scale(0.8) translateY(200px); 
+      }
+    }
+    
+    @keyframes carSwipeTop {
+      0% { 
+        opacity: 1;
+        transform: scale(1) translateY(0); 
+      }
+      15% { 
+        opacity: 1;
+        transform: scale(1.02) translateY(8px); 
+      }
+      100% { 
+        opacity: 0;
+        transform: scale(0.8) translateY(-200px); 
+      }
+    }
+    
+    @keyframes carSwipeLeft {
+      0% { 
+        opacity: 1;
+        transform: scale(1) translateX(0); 
+      }
+      15% { 
+        opacity: 1;
+        transform: scale(1.02) translateX(8px); 
+      }
+      100% { 
+        opacity: 0;
+        transform: scale(0.8) translateX(-300px); 
+      }
+    }
+    
+    @keyframes carSwipeRight {
+      0% { 
+        opacity: 1;
+        transform: scale(1) translateX(0); 
+      }
+      15% { 
+        opacity: 1;
+        transform: scale(1.02) translateX(-8px); 
+      }
+      100% { 
+        opacity: 0;
+        transform: scale(0.8) translateX(300px); 
+      }
+    }
+    
+    @keyframes carSwipeCenter {
+      0% { 
+        opacity: 1;
+        transform: scale(1) translateY(0); 
+      }
+      15% { 
+        opacity: 1;
+        transform: scale(1.02) translateY(-5px); 
+      }
+      100% { 
+        opacity: 0;
+        transform: scale(0.6) translateY(150px); 
+      }
+    }
+    
+    @keyframes progress {
+      0% { width: 100%; }
+      100% { width: 0%; }
+    }
+    
+    @keyframes shimmer {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
+    }
+    
+    .toastify-pro.show { 
+      opacity: 1; 
+      transform: scale(1);
+      animation: airdropPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    
+    .toastify-pro.success { 
+      background: linear-gradient(135deg, 
+        rgba(34, 197, 94, 0.9) 0%,
+        rgba(21, 128, 61, 0.9) 100%);
+      border-color: rgba(34, 197, 94, 0.3);
+    }
+    
+    .toastify-pro.error { 
+      background: linear-gradient(135deg, 
+        rgba(239, 68, 68, 0.9) 0%,
+        rgba(185, 28, 28, 0.9) 100%);
+      border-color: rgba(239, 68, 68, 0.3);
+    }
+    
+    .toastify-pro.info { 
+      background: linear-gradient(135deg, 
+        rgba(59, 130, 246, 0.9) 0%,
+        rgba(29, 78, 216, 0.9) 100%);
+      border-color: rgba(59, 130, 246, 0.3);
+    }
+    
+    .toastify-pro.warning { 
+      background: linear-gradient(135deg, 
+        rgba(245, 158, 11, 0.9) 0%,
+        rgba(217, 119, 6, 0.9) 100%);
+      border-color: rgba(245, 158, 11, 0.3);
+    }
+    
+    .toastify-pro.dark { 
+      background: linear-gradient(135deg, 
+        rgba(15, 23, 42, 0.95) 0%,
+        rgba(30, 41, 59, 0.95) 100%);
+      border-color: rgba(148, 163, 184, 0.2);
+    }
+    
+    .toastify-pro.light { 
+      background: linear-gradient(135deg, 
+        rgba(255, 255, 255, 0.95) 0%,
+        rgba(248, 250, 252, 0.95) 100%);
+      color: #1e293b;
+      border-color: rgba(226, 232, 240, 0.8);
+      box-shadow: 
+        0 20px 25px -5px rgba(0, 0, 0, 0.08),
+        0 10px 10px -5px rgba(0, 0, 0, 0.03);
+    }
+    
+    .toastify-pro.light::before {
+      background: linear-gradient(90deg, 
+        rgba(30, 41, 59, 0.8) 0%,
+        rgba(30, 41, 59, 0.4) 50%,
+        rgba(30, 41, 59, 0.8) 100%);
+    }
+    
+    .toastify-pro.light::after {
+      background: rgba(30, 41, 59, 0.6);
+    }
+
+    .toastify-pro .toast-icon {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(10px);
+      animation: iconPulse 2s infinite;
+    }
+    
+    @keyframes iconPulse {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+    }
+    
+    @keyframes iconBounce {
+      0% { transform: scale(0.2) rotate(-15deg); }
+      40% { transform: scale(1.2) rotate(8deg); }
+      70% { transform: scale(0.95) rotate(-3deg); }
+      100% { transform: scale(1) rotate(0deg); }
+    }
+    
+    @keyframes iconCarExit {
+      0% { 
+        transform: scale(1) rotate(0deg); 
+        opacity: 1;
+      }
+      20% { 
+        transform: scale(1.1) rotate(-10deg); 
+        opacity: 0.9;
+      }
+      100% { 
+        transform: scale(0.3) rotate(180deg); 
+        opacity: 0;
+      }
+    }
+
+    .toastify-pro .toast-icon svg {
+      width: 18px;
+      height: 18px;
+      color: inherit;
+      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+    }
+
+    .toastify-pro.light .toast-icon {
+      background: rgba(15, 23, 42, 0.1);
     }
-    .toastify-pro.show { opacity: 1; transform: translateY(0); }
-    .toastify-pro.success { background: rgba(76, 175, 80, 0.9); }
-    .toastify-pro.error { background: rgba(244, 67, 54, 0.9); }
-    .toastify-pro.info { background: rgba(33, 150, 243, 0.9); }
-    .toastify-pro.warning { background: rgba(255, 152, 0, 0.9); }
-    .toastify-pro.dark { background: rgba(0,0,0,0.85); }
-    .toastify-pro.light { background: rgba(255,255,255,0.9); color: #000; }
 
     .toastify-pro .toast-content {
       flex: 1;
-      padding-right: 8px;
+      line-height: 1.5;
+      font-weight: 500;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+
+    .toastify-pro .toast-message {
+      font-size: 15px;
+      font-weight: 500;
+      margin-bottom: 0;
+    }
+
+    .toastify-pro .toast-description {
+      font-size: 13px;
+      font-weight: 400;
+      opacity: 0.85;
+      margin-top: 4px;
       line-height: 1.4;
     }
 
     .toastify-pro .close-btn {
       cursor: pointer;
-      font-size: 18px;
+      font-size: 20px;
       color: inherit;
-      opacity: 0.8;
-      padding: 2px 4px;
-      border-radius: 3px;
-      transition: opacity 0.2s ease, background-color 0.2s ease;
+      opacity: 0.7;
+      padding: 8px;
+      border-radius: 50%;
+      transition: all 0.2s ease;
       flex-shrink: 0;
-      min-width: 20px;
-      text-align: center;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      font-weight: 300;
       line-height: 1;
     }
+    
     .toastify-pro .close-btn:hover { 
       opacity: 1; 
-      background-color: rgba(0,0,0,0.1);
+      background: rgba(255, 255, 255, 0.2);
+      transform: scale(1.1);
     }
+    
+    .toastify-pro.light .close-btn {
+      background: rgba(15, 23, 42, 0.08);
+    }
+    
     .toastify-pro.light .close-btn:hover { 
-      background-color: rgba(0,0,0,0.05);
+      background: rgba(15, 23, 42, 0.15);
+    }
+    
+    @media (max-width: 640px) {
+      .toastify-pro {
+        min-width: 260px;
+        max-width: calc(100vw - 48px);
+        margin: 0 8px;
+      }
+      
+      .toastify-pro-container.top-left,
+      .toastify-pro-container.bottom-left { left: 16px; }
+      .toastify-pro-container.top-right,
+      .toastify-pro-container.bottom-right { right: 16px; }
     }
   `;
-      document.head.appendChild(style);
+        document.head.appendChild(style);
+      } catch (error) {
+        console.error('ToastifyPro: Failed to inject styles:', error);
+      }
     }
 
+    /**
+     * Creates and displays a toast notification
+     * @param {string} message - Main message text
+     * @param {string} type - Toast type (success, error, info, warning, dark, light)
+     * @param {Object} opts - Additional options
+     * @param {string} opts.description - Optional description text
+     * @param {number} opts.timeout - Override default timeout
+     * @param {boolean} opts.allowClose - Override close button setting
+     * @param {number} opts.maxLength - Override max message length
+     */
     show(message, type = "dark", opts = {}) {
-      const options = { ...this.defaultOptions, ...opts };
+      // Input validation
+      if (typeof message !== 'string') {
+        console.warn('ToastifyPro: Message must be a string. Converting to string.');
+        message = String(message);
+      }
 
-      const toast = document.createElement("div");
-      toast.className = `toastify-pro ${type}`;
+      if (!message.trim()) {
+        console.warn('ToastifyPro: Empty message provided.');
+        return;
+      }
 
-      // Create content wrapper for the message
-      const contentWrapper = document.createElement("div");
-      contentWrapper.className = "toast-content";
-      contentWrapper.textContent = message.substring(0, options.maxLength);
-      toast.appendChild(contentWrapper);
+      // Validate type
+      const validTypes = ['success', 'error', 'info', 'warning', 'dark', 'light'];
+      if (!validTypes.includes(type)) {
+        console.warn(`ToastifyPro: Invalid type "${type}". Using "dark".`);
+        type = 'dark';
+      }
 
-      if (options.allowClose) {
-        const closeBtn = document.createElement("span");
-        closeBtn.className = "close-btn";
-        closeBtn.innerHTML = "&times;";
-        closeBtn.onclick = () => this.removeToast(toast);
-        toast.appendChild(closeBtn);
+      // Validate and merge options
+      if (typeof opts !== 'object' || opts === null) {
+        console.warn('ToastifyPro: Invalid options parameter. Using defaults.');
+        opts = {};
       }
 
-      this.container.appendChild(toast);
+      const options = { ...this.defaultOptions, ...opts };
 
-      // show animation
-      setTimeout(() => toast.classList.add("show"), 50);
+      try {
+        // Create toast element
+        const toast = document.createElement("div");
+        toast.className = `toastify-pro ${type}`;
+        
+        // Set duration for progress bar animation
+        if (options.timeout > 0) {
+          toast.style.setProperty('--duration', `${options.timeout}ms`);
+        }
 
-      // auto remove
-      if (options.timeout > 0) {
-        setTimeout(() => this.removeToast(toast), options.timeout);
+        // Create icon wrapper
+        const iconWrapper = document.createElement("div");
+        iconWrapper.className = "toast-icon";
+        iconWrapper.innerHTML = this.getIconSVG(type);
+        toast.appendChild(iconWrapper);
+
+        // Create content wrapper for the message and description
+        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, options.maxLength);
+        contentWrapper.appendChild(messageElement);
+        
+        // Optional description (if provided)
+        if (options.description && typeof options.description === 'string') {
+          const descriptionElement = document.createElement("div");
+          descriptionElement.className = "toast-description";
+          descriptionElement.textContent = options.description.substring(0, options.maxLength * 2);
+          contentWrapper.appendChild(descriptionElement);
+        }
+        
+        toast.appendChild(contentWrapper);
+
+        // Add close button if enabled
+        if (options.allowClose) {
+          const closeBtn = document.createElement("span");
+          closeBtn.className = "close-btn";
+          closeBtn.innerHTML = "&times;";
+          closeBtn.setAttribute('aria-label', 'Close notification');
+          closeBtn.onclick = () => this.removeToast(toast);
+          toast.appendChild(closeBtn);
+        }
+
+        // Add toast to container
+        this.container.appendChild(toast);
+
+        // Apple AirDrop-style entrance animation
+        setTimeout(() => {
+          toast.classList.add("show");
+          // Add icon bounce effect with Apple-style timing
+          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);
+
+        // Auto-remove after timeout
+        if (options.timeout > 0) {
+          setTimeout(() => this.removeToast(toast), options.timeout);
+        }
+
+        return toast; // Return element for potential future manipulation
+      } catch (error) {
+        console.error('ToastifyPro: Failed to create toast:', error);
       }
     }
 
+    /**
+     * Removes a toast with position-aware car swipe animation
+     * @param {HTMLElement} toast - Toast element to remove
+     */
     removeToast(toast) {
-      toast.classList.remove("show");
-      setTimeout(() => toast.remove(), 300);
+      if (!toast || !toast.parentNode) {
+        console.warn('ToastifyPro: Invalid toast element for removal.');
+        return;
+      }
+
+      try {
+        // Detect position to choose the right swipe direction
+        const container = toast.parentNode;
+        const position = container.className.split(' ')[1]; // get position class
+        
+        let swipeAnimation = 'carSwipeBottom'; // default fallback
+        
+        // Choose animation based on position - car swipes away from screen edge
+        if (position.includes('bottom')) {
+          swipeAnimation = 'carSwipeBottom'; // swipe down off screen
+        } else if (position.includes('top')) {
+          swipeAnimation = 'carSwipeTop'; // swipe up off screen
+        } else if (position.includes('left')) {
+          swipeAnimation = 'carSwipeLeft'; // swipe left off screen
+        } else if (position.includes('right')) {
+          swipeAnimation = 'carSwipeRight'; // swipe right off screen
+        } else if (position.includes('center')) {
+          swipeAnimation = 'carSwipeCenter'; // swipe down for center
+        }
+        
+        // Apply fast car swipe animation with improved easing
+        toast.style.animation = `${swipeAnimation} 0.4s cubic-bezier(0.4, 0.0, 1, 1) forwards`;
+        
+        // Add spinning icon animation for extra polish
+        const icon = toast.querySelector('.toast-icon');
+        if (icon) {
+          icon.style.animation = 'iconCarExit 0.4s cubic-bezier(0.4, 0.0, 1, 1) forwards';
+        }
+        
+        // Remove element after animation completes
+        setTimeout(() => {
+          if (toast.parentNode) {
+            toast.remove();
+          }
+        }, 400);
+      } catch (error) {
+        console.error('ToastifyPro: Error removing toast:', error);
+        // Fallback: remove immediately if animation fails
+        if (toast.parentNode) {
+          toast.remove();
+        }
+      }
     }
 
+    /**
+     * Shows a success toast notification
+     * @param {string} msg - Main message
+     * @param {string|Object} opts - Description string or options object
+     */
     success(msg, opts) {
+      // Handle both (message) and (message, description) formats
+      if (typeof opts === 'string') {
+        opts = { description: opts };
+      }
       this.show(msg, "success", opts);
     }
+
+    /**
+     * Shows an error toast notification
+     * @param {string} msg - Main message
+     * @param {string|Object} opts - Description string or options object
+     */
     error(msg, opts) {
+      if (typeof opts === 'string') {
+        opts = { description: opts };
+      }
       this.show(msg, "error", opts);
     }
+
+    /**
+     * Shows an info toast notification
+     * @param {string} msg - Main message
+     * @param {string|Object} opts - Description string or options object
+     */
     info(msg, opts) {
+      if (typeof opts === 'string') {
+        opts = { description: opts };
+      }
       this.show(msg, "info", opts);
     }
+
+    /**
+     * Shows a warning toast notification
+     * @param {string} msg - Main message
+     * @param {string|Object} opts - Description string or options object
+     */
     warning(msg, opts) {
+      if (typeof opts === 'string') {
+        opts = { description: opts };
+      }
       this.show(msg, "warning", opts);
     }
+
+    /**
+     * Shows a dark-themed toast notification
+     * @param {string} msg - Main message
+     * @param {string|Object} opts - Description string or options object
+     */
     dark(msg, opts) {
+      if (typeof opts === 'string') {
+        opts = { description: opts };
+      }
       this.show(msg, "dark", opts);
     }
+
+    /**
+     * Shows a light-themed toast notification
+     * @param {string} msg - Main message
+     * @param {string|Object} opts - Description string or options object
+     */
     light(msg, opts) {
+      if (typeof opts === 'string') {
+        opts = { description: opts };
+      }
       this.show(msg, "light", opts);
     }
+  }
+
+  /**
+   * Export for different environments
+   * Supports CommonJS (Node.js), AMD, and browser globals
+   */
+
+  // CommonJS export (Node.js/npm)
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = ToastifyPro;
+  }
+
+  // ES6 module export
+  if (typeof exports !== 'undefined') {
+    exports.ToastifyPro = ToastifyPro;
+    exports.default = ToastifyPro;
+  }
+
+  // AMD export (RequireJS)
+  if (typeof define === 'function' && define.amd) {
+    define(function() {
+      return ToastifyPro;
+    });
+  }
+
+  // Browser global
+  if (typeof window !== 'undefined') {
+    window.ToastifyPro = ToastifyPro;
   }
 
-  return ToastifyPro;
-
 }));
+//# sourceMappingURL=toastify-pro.umd.js.map