toastonstaroid/dist/index.mjs

A simple and beautiful toast notification library for React

// src/index.tsx
function _array_like_to_array(arr, len) {
    if (len == null || len > arr.length) len = arr.length;
    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
    return arr2;
}
function _array_with_holes(arr) {
    if (Array.isArray(arr)) return arr;
}
function _array_without_holes(arr) {
    if (Array.isArray(arr)) return _array_like_to_array(arr);
}
function _define_property(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}
function _iterable_to_array(iter) {
    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _iterable_to_array_limit(arr, i) {
    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
    if (_i == null) return;
    var _arr = [];
    var _n = true;
    var _d = false;
    var _s, _e;
    try {
        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
            _arr.push(_s.value);
            if (i && _arr.length === i) break;
        }
    } catch (err) {
        _d = true;
        _e = err;
    } finally{
        try {
            if (!_n && _i["return"] != null) _i["return"]();
        } finally{
            if (_d) throw _e;
        }
    }
    return _arr;
}
function _non_iterable_rest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _non_iterable_spread() {
    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _object_spread(target) {
    for(var i = 1; i < arguments.length; i++){
        var source = arguments[i] != null ? arguments[i] : {};
        var ownKeys = Object.keys(source);
        if (typeof Object.getOwnPropertySymbols === "function") {
            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
            }));
        }
        ownKeys.forEach(function(key) {
            _define_property(target, key, source[key]);
        });
    }
    return target;
}
function ownKeys(object, enumerableOnly) {
    var keys = Object.keys(object);
    if (Object.getOwnPropertySymbols) {
        var symbols = Object.getOwnPropertySymbols(object);
        if (enumerableOnly) {
            symbols = symbols.filter(function(sym) {
                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
            });
        }
        keys.push.apply(keys, symbols);
    }
    return keys;
}
function _object_spread_props(target, source) {
    source = source != null ? source : {};
    if (Object.getOwnPropertyDescriptors) {
        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
        ownKeys(Object(source)).forEach(function(key) {
            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
        });
    }
    return target;
}
function _sliced_to_array(arr, i) {
    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _to_consumable_array(arr) {
    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
}
function _type_of(obj) {
    "@swc/helpers - typeof";
    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
}
function _unsupported_iterable_to_array(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _array_like_to_array(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(n);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
}
import React, { useEffect, useRef, useState } from "react";
// src/store.ts
import { create } from "zustand";
var useToastStore = create(function(set) {
    return {
        toasts: [],
        addToast: function(toast2) {
            var id = Math.random().toString(36).substring(2, 9);
            set(function(state) {
                return {
                    toasts: _to_consumable_array(state.toasts).concat([
                        _object_spread_props(_object_spread({}, toast2), {
                            id: id
                        })
                    ])
                };
            });
            if (toast2.duration !== 0) {
                setTimeout(function() {
                    set(function(state) {
                        return {
                            toasts: state.toasts.filter(function(t) {
                                return t.id !== id;
                            })
                        };
                    });
                }, toast2.duration || 3e3);
            }
        },
        removeToast: function(id) {
            return set(function(state) {
                return {
                    toasts: state.toasts.filter(function(toast2) {
                        return toast2.id !== id;
                    })
                };
            });
        }
    };
});
// src/variants/base.ts
var glassEffect = {
    backdropFilter: "blur(12px) saturate(180%)",
    WebkitBackdropFilter: "blur(12px) saturate(180%)",
    backgroundColor: "var(--toast-bg, rgba(30, 41, 59, 0.8))",
    border: "1px solid var(--toast-border, rgba(255, 255, 255, 0.1))",
    borderRadius: "8px",
    boxShadow: "var(--toast-shadow, 0 4px 12px rgba(0, 0, 0, 0.15))",
    transition: "all 0.2s ease-out",
    width: "320px",
    minHeight: "56px",
    maxWidth: "calc(100vw - 32px)",
    boxSizing: "border-box",
    position: "relative",
    overflow: "visible",
    margin: "4px 0",
    cursor: "default",
    userSelect: "none",
    pointerEvents: "auto",
    zIndex: 1e3,
    "&::before": {
        content: '""',
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        height: "2px"
    },
    "&:hover": {
        transform: "translateY(-2px)"
    }
};
var getPositionStyles = function(position) {
    var baseStyles = {
        position: "fixed",
        zIndex: 9999,
        pointerEvents: "none",
        padding: "16px",
        maxWidth: "100vw",
        width: "100%",
        display: "flex",
        flexDirection: "column",
        gap: "12px"
    };
    var positionStyles = {
        "top-left": {
            top: "env(safe-area-inset-top, 0)",
            left: "env(safe-area-inset-left, 0)",
            alignItems: "flex-start"
        },
        "top-center": {
            top: "env(safe-area-inset-top, 0)",
            left: "50%",
            transform: "translateX(-50%)",
            alignItems: "center"
        },
        "top-right": {
            top: "env(safe-area-inset-top, 0)",
            right: "env(safe-area-inset-right, 0)",
            alignItems: "flex-end"
        },
        "bottom-left": {
            bottom: "env(safe-area-inset-bottom, 0)",
            left: "env(safe-area-inset-left, 0)",
            alignItems: "flex-start"
        },
        "bottom-center": {
            bottom: "env(safe-area-inset-bottom, 0)",
            left: "50%",
            transform: "translateX(-50%)",
            alignItems: "center"
        },
        "bottom-right": {
            bottom: "env(safe-area-inset-bottom, 0)",
            right: "env(safe-area-inset-right, 0)",
            alignItems: "flex-end"
        }
    };
    return _object_spread({}, baseStyles, positionStyles[position]);
};
// src/variants/success.ts
import { gsap } from "gsap";
var animateIn = function(element, fromX, fromY) {
    gsap.fromTo(element, {
        x: fromX,
        y: fromY,
        opacity: 0,
        scale: 0.9,
        transformOrigin: "center"
    }, {
        x: 0,
        y: 0,
        opacity: 1,
        scale: 1,
        duration: 0.6,
        ease: "elastic.out(1, 0.7)"
    });
    return gsap.timeline();
};
var successToast = {
    animation: function(element, position) {
        var fromX = position.includes("right") ? 40 : -40;
        var fromY = position.includes("top") ? -40 : 40;
        var closeButton = element.querySelector('button[aria-label="Close toast"]');
        if (closeButton) {
            closeButton.style.pointerEvents = "auto";
            closeButton.style.zIndex = "1001";
            closeButton.style.position = "relative";
        }
        gsap.set(element, {
            opacity: 0,
            y: fromY,
            x: fromX,
            pointerEvents: "auto",
            zIndex: 1e3
        });
        var tl = gsap.timeline();
        tl.add(animateIn(element, fromX, fromY));
        tl.to(element, {
            duration: 2,
            "--toast-shadow": "0 0 15px rgba(74, 222, 128, 0.3)",
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut",
            pointerEvents: "auto"
        }, "+=0.2");
        tl.to(element, {
            scale: 1.02,
            duration: 0.2,
            yoyo: true,
            repeat: 1,
            ease: "power1.inOut"
        }, "+=0.5");
        return tl;
    },
    containerStyles: _object_spread_props(_object_spread({}, glassEffect), {
        "--toast-bg": "rgba(16, 185, 129, 0.15)",
        "--toast-border": "rgba(255, 255, 255, 0.1)",
        "--toast-shadow": "0 8px 32px 0 rgba(16, 185, 129, 0.1)",
        color: "white",
        display: "flex",
        alignItems: "center",
        maxWidth: "380px",
        position: "relative",
        overflow: "hidden",
        background: "linear-gradient(\n      to bottom,\n      rgba(16, 185, 129, 0.15) 0%,\n      rgba(16, 185, 129, 0.1) 2px,\n      rgba(16, 185, 129, 0.1) 100%\n    ),\n    linear-gradient(\n      to right,\n      rgba(16, 185, 129, 0.8) 0%,\n      rgba(5, 150, 105, 0.8) 100%\n    ) 0 0 / 100% 2px no-repeat",
        "&:hover": {
            transform: "translateY(-2px)",
            "--toast-shadow": "0 12px 40px 0 rgba(16, 185, 129, 0.15)"
        }
    })
};
// src/variants/error.ts
import { gsap as gsap2 } from "gsap";
var animateIn2 = function(element, fromX, fromY) {
    return gsap2.fromTo(element, {
        x: fromX,
        y: fromY,
        opacity: 0,
        scale: 0.9,
        transformOrigin: "center"
    }, {
        x: 0,
        y: 0,
        opacity: 1,
        scale: 1,
        duration: 0.6,
        ease: "elastic.out(1, 0.7)"
    });
};
var errorToast = {
    animation: function(element, position) {
        var fromX = position.includes("right") ? 40 : -40;
        var fromY = position.includes("top") ? -40 : 40;
        var closeButton = element.querySelector('button[aria-label="Close toast"]');
        if (closeButton) {
            closeButton.style.pointerEvents = "auto";
            closeButton.style.zIndex = "1001";
            closeButton.style.position = "relative";
        }
        gsap2.set(element, {
            opacity: 0,
            y: fromY,
            x: fromX,
            pointerEvents: "auto",
            zIndex: 1e3
        });
        var tl = gsap2.timeline();
        tl.add(animateIn2(element, fromX, fromY));
        tl.to(element, {
            duration: 0.1,
            x: "+=3",
            repeat: 5,
            yoyo: true,
            ease: "power1.inOut",
            pointerEvents: "auto"
        }, "+=0.2");
        tl.to(element, {
            duration: 2,
            "--toast-shadow": "0 0 15px rgba(239, 68, 68, 0.3)",
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut"
        }, "+=0.1");
        return tl;
    },
    containerStyles: _object_spread_props(_object_spread({}, glassEffect), {
        "--toast-bg": "rgba(239, 68, 68, 0.15)",
        "--toast-border": "rgba(255, 255, 255, 0.1)",
        "--toast-shadow": "0 8px 32px 0 rgba(239, 68, 68, 0.1)",
        color: "white",
        display: "flex",
        alignItems: "center",
        maxWidth: "380px",
        position: "relative",
        overflow: "hidden",
        background: "linear-gradient(\n      to bottom,\n      rgba(239, 68, 68, 0.15) 0%,\n      rgba(239, 68, 68, 0.1) 2px,\n      rgba(239, 68, 68, 0.1) 100%\n    ),\n    linear-gradient(\n      to right,\n      rgba(239, 68, 68, 0.8) 0%,\n      rgba(220, 38, 38, 0.8) 100%\n    ) 0 0 / 100% 2px no-repeat",
        "&:hover": {
            transform: "translateY(-2px)",
            "--toast-shadow": "0 12px 40px 0 rgba(239, 68, 68, 0.15)"
        }
    })
};
// src/variants/warning.ts
import { gsap as gsap3 } from "gsap";
var animateIn3 = function(element, fromX, fromY) {
    return gsap3.fromTo(element, {
        x: fromX,
        y: fromY,
        opacity: 0,
        scale: 0.9,
        transformOrigin: "center"
    }, {
        x: 0,
        y: 0,
        opacity: 1,
        scale: 1,
        duration: 0.6,
        ease: "elastic.out(1, 0.7)"
    });
};
var warningToast = {
    animation: function(element, position) {
        var fromX = position.includes("right") ? 40 : -40;
        var fromY = position.includes("top") ? -40 : 40;
        var closeButton = element.querySelector('button[aria-label="Close toast"]');
        if (closeButton) {
            closeButton.style.pointerEvents = "auto";
            closeButton.style.zIndex = "1001";
            closeButton.style.position = "relative";
        }
        gsap3.set(element, {
            opacity: 0,
            y: fromY,
            x: fromX,
            pointerEvents: "auto",
            zIndex: 1e3
        });
        var tl = gsap3.timeline();
        tl.add(animateIn3(element, fromX, fromY));
        tl.to(element, {
            duration: 2,
            "--toast-shadow": "0 0 15px rgba(251, 191, 36, 0.3)",
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut",
            pointerEvents: "auto"
        }, "+=0.2");
        tl.to(element, {
            duration: 2,
            "--toast-shadow": "0 0 15px rgba(245, 158, 11, 0.3)",
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut"
        }, "+=0.1");
        return tl;
    },
    containerStyles: _object_spread_props(_object_spread({}, glassEffect), {
        "--toast-bg": "rgba(245, 158, 11, 0.15)",
        "--toast-border": "rgba(255, 255, 255, 0.1)",
        "--toast-shadow": "0 8px 32px 0 rgba(245, 158, 11, 0.15)",
        color: "white",
        display: "flex",
        alignItems: "center",
        maxWidth: "380px",
        position: "relative",
        overflow: "hidden",
        transition: "all 0.3s ease"
    }),
    additionalStyles: "\n    &::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 2px;\n      background: linear-gradient(90deg, rgba(245, 158, 11, 0.8), rgba(251, 191, 36, 0.8));\n    }\n    &:hover {\n      transform: translateY(-2px);\n      --toast-shadow: 0 12px 40px 0 rgba(245, 158, 11, 0.15);\n    }\n  "
};
// src/variants/info.ts
import { gsap as gsap4 } from "gsap";
var animateIn4 = function(element, fromX, fromY) {
    return gsap4.fromTo(element, {
        x: fromX,
        y: fromY,
        opacity: 0,
        scale: 0.9,
        transformOrigin: "center"
    }, {
        x: 0,
        y: 0,
        opacity: 1,
        scale: 1,
        duration: 0.6,
        ease: "elastic.out(1, 0.7)"
    });
};
var infoToast = {
    animation: function(element, position) {
        var fromX = position.includes("right") ? 40 : -40;
        var fromY = position.includes("top") ? -40 : 40;
        var closeButton = element.querySelector('button[aria-label="Close toast"]');
        if (closeButton) {
            closeButton.style.pointerEvents = "auto";
            closeButton.style.zIndex = "1001";
            closeButton.style.position = "relative";
        }
        gsap4.set(element, {
            opacity: 0,
            y: fromY,
            x: fromX,
            pointerEvents: "auto",
            zIndex: 1e3
        });
        var tl = gsap4.timeline();
        tl.add(animateIn4(element, fromX, fromY));
        tl.to(element, {
            duration: 2,
            "--toast-shadow": "0 0 15px rgba(59, 130, 246, 0.3)",
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut",
            pointerEvents: "auto"
        }, "+=0.2");
        tl.to(element, {
            duration: 3,
            "--toast-shadow": "0 0 15px rgba(59, 130, 246, 0.2)",
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut"
        }, "+=0.1");
        return tl;
    },
    containerStyles: _object_spread_props(_object_spread({}, glassEffect), {
        "--toast-bg": "rgba(59, 130, 246, 0.15)",
        "--toast-border": "rgba(255, 255, 255, 0.1)",
        "--toast-shadow": "0 8px 32px 0 rgba(59, 130, 246, 0.1)",
        color: "white",
        display: "flex",
        alignItems: "center",
        maxWidth: "380px",
        position: "relative",
        overflow: "hidden",
        background: "linear-gradient(\n      to bottom,\n      rgba(59, 130, 246, 0.15) 0%,\n      rgba(59, 130, 246, 0.1) 2px,\n      rgba(59, 130, 246, 0.1) 100%\n    ),\n    linear-gradient(\n      to right,\n      rgba(59, 130, 246, 0.8) 0%,\n      rgba(96, 165, 250, 0.8) 100%\n    ) 0 0 / 100% 2px no-repeat",
        "&:hover": {
            transform: "translateY(-2px)",
            "--toast-shadow": "0 12px 40px 0 rgba(59, 130, 246, 0.15)"
        }
    })
};
// src/variants/fire.ts
import { gsap as gsap5 } from "gsap";
var createFireEffect = function(element) {
    var fireContainer = document.createElement("div");
    fireContainer.style.position = "absolute";
    fireContainer.style.bottom = "0";
    fireContainer.style.left = "0";
    fireContainer.style.width = "100%";
    fireContainer.style.height = "4px";
    fireContainer.style.overflow = "hidden";
    fireContainer.style.borderRadius = "0 0 8px 8px";
    fireContainer.style.pointerEvents = "none";
    fireContainer.style.zIndex = "0";
    fireContainer.style.borderRadius = "8px";
    fireContainer.style.background = "linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%)";
    fireContainer.style.overflow = "visible";
    fireContainer.style.clipPath = "inset(0 0 0 0)";
    for(var i = 0; i < 5; i++){
        var flame = document.createElement("div");
        flame.style.position = "absolute";
        flame.style.bottom = "0";
        flame.style.width = "".concat(10 + Math.random() * 10, "px");
        flame.style.height = "10px";
        flame.style.background = "linear-gradient(to top, #ff7800, #ff4800, #ff1e00)";
        flame.style.borderRadius = "50% 50% 0 0";
        flame.style.left = "".concat(10 + i * 20, "%");
        flame.style.filter = "blur(1px)";
        gsap5.to(flame, {
            scaleY: 1.5,
            duration: 0.5,
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut",
            delay: Math.random() * 0.5
        });
        fireContainer.appendChild(flame);
    }
    element.style.position = "relative";
    element.style.overflow = "visible";
    var closeButton = element.querySelector('button[aria-label="Close toast"]');
    if (closeButton) {
        var button = closeButton;
        button.style.position = "relative";
        button.style.zIndex = "1000";
        button.style.pointerEvents = "auto";
        var buttonContainer = button.parentElement;
        if (buttonContainer) {
            buttonContainer.style.position = "relative";
            buttonContainer.style.zIndex = "1000";
            buttonContainer.style.pointerEvents = "auto";
        }
    }
    element.appendChild(fireContainer);
    return fireContainer;
};
var fireToast = {
    animation: function(element, position) {
        var fromX = position.includes("right") ? 40 : -40;
        var fromY = position.includes("top") ? -40 : 40;
        gsap5.set(element, {
            opacity: 0,
            y: fromY,
            x: fromX
        });
        var tl = gsap5.timeline({
            onComplete: function() {
                createFireEffect(element);
            }
        });
        tl.to(element, {
            x: 0,
            y: 0,
            opacity: 1,
            duration: 0.6,
            ease: "back.out(1.7)"
        });
        tl.to(element, {
            keyframes: [
                {
                    opacity: 0.9,
                    duration: 0.05
                },
                {
                    opacity: 1,
                    duration: 0.05
                },
                {
                    opacity: 0.95,
                    duration: 0.05
                }
            ],
            repeat: -1,
            yoyo: true,
            ease: "none"
        }, 0);
        return tl;
    },
    containerStyles: _object_spread_props(_object_spread({}, glassEffect), {
        "--toast-bg": "rgba(120, 53, 15, 0.2)",
        "--toast-border": "1px solid rgba(255, 120, 0, 0.2)",
        "--toast-shadow": "0 8px 32px 0 rgba(255, 72, 0, 0.2)",
        color: "#ffedd5",
        borderLeft: "3px solid #ff7700",
        padding: "12px 16px",
        "&::before": {
            background: "linear-gradient(90deg, #ff4800, #ff7700)"
        },
        "&:hover": {
            boxShadow: "0 8px 32px 0 rgba(255, 72, 0, 0.3)",
            transform: "translateY(-2px)"
        }
    })
};
// src/variants/rain.ts
import { gsap as gsap6 } from "gsap";
var createRainEffect = function(element) {
    var rainContainer = document.createElement("div");
    rainContainer.style.position = "absolute";
    rainContainer.style.top = "0";
    rainContainer.style.left = "0";
    rainContainer.style.width = "100%";
    rainContainer.style.height = "100%";
    rainContainer.style.overflow = "hidden";
    rainContainer.style.borderRadius = "8px";
    rainContainer.style.pointerEvents = "none";
    rainContainer.style.zIndex = "0";
    rainContainer.style.clipPath = "inset(0 0 0 0)";
    for(var i = 0; i < 15; i++){
        var drop = document.createElement("div");
        drop.style.position = "absolute";
        drop.style.width = "1px";
        drop.style.height = "15px";
        drop.style.background = "rgba(147, 197, 253, 0.7)";
        drop.style.left = "".concat(Math.random() * 100, "%");
        drop.style.top = "-20px";
        gsap6.to(drop, {
            y: "150%",
            duration: 0.8 + Math.random() * 0.5,
            repeat: -1,
            delay: Math.random() * 2,
            ease: "linear"
        });
        rainContainer.appendChild(drop);
    }
    element.style.position = "relative";
    element.style.overflow = "visible";
    var closeButton = element.querySelector('button[aria-label="Close toast"]');
    if (closeButton) {
        var button = closeButton;
        button.style.position = "relative";
        button.style.zIndex = "1000";
        button.style.pointerEvents = "auto";
        var buttonContainer = button.parentElement;
        if (buttonContainer) {
            buttonContainer.style.position = "relative";
            buttonContainer.style.zIndex = "1000";
            buttonContainer.style.pointerEvents = "auto";
        }
    }
    if (element.firstChild) {
        element.insertBefore(rainContainer, element.firstChild);
    } else {
        element.appendChild(rainContainer);
    }
    return rainContainer;
};
var animateIn5 = function(element, fromX, fromY) {
    gsap6.fromTo(element, {
        x: fromX,
        y: fromY,
        opacity: 0,
        scale: 0.9,
        transformOrigin: "center"
    }, {
        x: 0,
        y: 0,
        opacity: 1,
        scale: 1,
        duration: 0.6,
        ease: "elastic.out(1, 0.7)"
    });
    return gsap6.timeline();
};
var rainToast = {
    animation: function(element, position) {
        var fromX = position.includes("right") ? 40 : -40;
        var fromY = position.includes("top") ? -40 : 40;
        gsap6.set(element, {
            opacity: 0,
            y: fromY,
            x: fromX
        });
        var tl = gsap6.timeline({
            onStart: function() {
                createRainEffect(element);
            }
        });
        tl.add(animateIn5(element, fromX, fromY));
        tl.to(element, {
            duration: 2,
            "--toast-shadow": "0 0 15px rgba(59, 130, 246, 0.3)",
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut"
        }, "+=0.2");
        tl.to(element, {
            scale: 1.01,
            duration: 0.3,
            yoyo: true,
            repeat: 1,
            ease: "power1.inOut"
        }, "+=0.5");
        return tl;
    },
    containerStyles: _object_spread_props(_object_spread({}, glassEffect), {
        "--toast-bg": "rgba(30, 58, 138, 0.15)",
        "--toast-border": "1px solid rgba(96, 165, 250, 0.2)",
        "--toast-shadow": "0 8px 32px 0 rgba(59, 130, 246, 0.1)",
        color: "#e0f2fe",
        display: "flex",
        alignItems: "center",
        maxWidth: "380px",
        position: "relative",
        overflow: "hidden",
        background: "linear-gradient(\n      to bottom,\n      rgba(30, 58, 138, 0.15) 0%,\n      rgba(30, 58, 138, 0.1) 2px,\n      rgba(30, 58, 138, 0.1) 100%\n    ),\n    linear-gradient(\n      to right,\n      rgba(59, 130, 246, 0.8) 0%,\n      rgba(37, 99, 235, 0.8) 100%\n    ) 0 0 / 100% 2px no-repeat",
        "&:hover": {
            transform: "translateY(-2px)",
            "--toast-shadow": "0 12px 40px 0 rgba(59, 130, 246, 0.15)"
        }
    })
};
// src/variants/smoke.ts
import { gsap as gsap7 } from "gsap";
var createSmokeEffect = function(element) {
    var smokeContainer = document.createElement("div");
    smokeContainer.style.position = "absolute";
    smokeContainer.style.bottom = "0";
    smokeContainer.style.left = "0";
    smokeContainer.style.width = "100%";
    smokeContainer.style.height = "100%";
    smokeContainer.style.overflow = "hidden";
    smokeContainer.style.pointerEvents = "none";
    smokeContainer.style.borderRadius = "8px";
    smokeContainer.style.zIndex = "0";
    smokeContainer.style.clipPath = "inset(0 0 0 0)";
    for(var i = 0; i < 8; i++){
        var smoke = document.createElement("div");
        smoke.style.position = "absolute";
        smoke.style.width = "20px";
        smoke.style.height = "20px";
        smoke.style.background = "rgba(255, 255, 255, 0.6)";
        smoke.style.borderRadius = "50%";
        smoke.style.filter = "blur(5px)";
        smoke.style.left = "".concat(20 + Math.random() * 60, "%");
        smoke.style.bottom = "0";
        smoke.style.opacity = "0";
        gsap7.to(smoke, {
            y: -60,
            x: "+=".concat((Math.random() - 0.5) * 40),
            scale: 2 + Math.random() * 2,
            opacity: 0.3,
            duration: 3 + Math.random() * 2,
            repeat: -1,
            delay: Math.random() * 3,
            ease: "power1.out"
        });
        smokeContainer.appendChild(smoke);
    }
    element.style.position = "relative";
    element.style.overflow = "visible";
    var closeButton = element.querySelector('button[aria-label="Close toast"]');
    if (closeButton) {
        var button = closeButton;
        button.style.position = "relative";
        button.style.zIndex = "1000";
        button.style.pointerEvents = "auto";
        var buttonContainer = button.parentElement;
        if (buttonContainer) {
            buttonContainer.style.position = "relative";
            buttonContainer.style.zIndex = "1000";
            buttonContainer.style.pointerEvents = "auto";
        }
    }
    element.appendChild(smokeContainer);
    return smokeContainer;
};
var smokeToast = {
    animation: function(element, position) {
        var fromX = position.includes("right") ? 40 : -40;
        var fromY = position.includes("top") ? -40 : 40;
        gsap7.set(element, {
            opacity: 0,
            y: fromY,
            x: fromX
        });
        var tl = gsap7.timeline({
            onStart: function() {
                createSmokeEffect(element);
            }
        });
        tl.to(element, {
            x: 0,
            y: 0,
            opacity: 1,
            duration: 0.8,
            ease: "power2.out"
        });
        tl.to(element, {
            opacity: 0.95,
            duration: 2,
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut"
        }, 0);
        return tl;
    },
    containerStyles: _object_spread_props(_object_spread({}, glassEffect), {
        "--toast-bg": "rgba(75, 85, 99, 0.15)",
        "--toast-border": "1px solid rgba(209, 213, 219, 0.2)",
        "--toast-shadow": "0 8px 32px 0 rgba(156, 163, 175, 0.1)",
        color: "#f3f4f6",
        borderLeft: "3px solid #9ca3af",
        padding: "12px 16px",
        "&::before": {
            background: "linear-gradient(90deg, #4b5563, #9ca3af)"
        },
        "&:hover": {
            boxShadow: "0 8px 32px 0 rgba(156, 163, 175, 0.2)",
            transform: "translateY(-2px)"
        }
    })
};
// src/variants/cyberpunk.ts
import { gsap as gsap8 } from "gsap";
var createCyberpunkEffect = function(element) {
    var container = document.createElement("div");
    container.style.position = "absolute";
    container.style.top = "0";
    container.style.left = "0";
    container.style.width = "100%";
    container.style.height = "100%";
    container.style.overflow = "hidden";
    container.style.pointerEvents = "none";
    container.style.borderRadius = "8px";
    container.style.zIndex = "0";
    container.style.clipPath = "inset(0 0 0 0)";
    var scanlines = document.createElement("div");
    scanlines.style.position = "absolute";
    scanlines.style.top = "0";
    scanlines.style.left = "0";
    scanlines.style.width = "100%";
    scanlines.style.height = "200%";
    scanlines.style.background = "repeating-linear-gradient(to bottom, rgba(0, 255, 255, 0.05) 0px, rgba(0, 255, 255, 0.05) 1px, transparent 1px, transparent 3px)";
    gsap8.to(scanlines, {
        y: "-100%",
        duration: 4,
        repeat: -1,
        ease: "none"
    });
    var grid = document.createElement("div");
    grid.style.position = "absolute";
    grid.style.top = "0";
    grid.style.left = "0";
    grid.style.width = "100%";
    grid.style.height = "100%";
    grid.style.backgroundImage = "linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px)";
    grid.style.backgroundSize = "20px 20px";
    grid.style.opacity = "0.5";
    var createCorner = function(position) {
        var corner = document.createElement("div");
        corner.style.position = "absolute";
        corner.style.width = "10px";
        corner.style.height = "10px";
        corner.style.borderColor = "#00ffff";
        corner.style.borderStyle = "solid";
        corner.style.borderWidth = "0";
        switch(position){
            case "top-left":
                corner.style.top = "0";
                corner.style.left = "0";
                corner.style.borderTopWidth = "2px";
                corner.style.borderLeftWidth = "2px";
                corner.style.borderTopLeftRadius = "4px";
                break;
            case "top-right":
                corner.style.top = "0";
                corner.style.right = "0";
                corner.style.borderTopWidth = "2px";
                corner.style.borderRightWidth = "2px";
                corner.style.borderTopRightRadius = "4px";
                break;
            case "bottom-left":
                corner.style.bottom = "0";
                corner.style.left = "0";
                corner.style.borderBottomWidth = "2px";
                corner.style.borderLeftWidth = "2px";
                corner.style.borderBottomLeftRadius = "4px";
                break;
            case "bottom-right":
                corner.style.bottom = "0";
                corner.style.right = "0";
                corner.style.borderBottomWidth = "2px";
                corner.style.borderRightWidth = "2px";
                corner.style.borderBottomRightRadius = "4px";
                break;
        }
        return corner;
    };
    container.appendChild(scanlines);
    container.appendChild(grid);
    container.appendChild(createCorner("top-left"));
    container.appendChild(createCorner("top-right"));
    container.appendChild(createCorner("bottom-left"));
    container.appendChild(createCorner("bottom-right"));
    element.style.position = "relative";
    element.style.overflow = "visible";
    var closeButton = element.querySelector('button[aria-label="Close toast"]');
    if (closeButton) {
        var button = closeButton;
        button.style.position = "relative";
        button.style.zIndex = "1000";
        button.style.pointerEvents = "auto";
        var buttonContainer = button.parentElement;
        if (buttonContainer) {
            buttonContainer.style.position = "relative";
            buttonContainer.style.zIndex = "1000";
            buttonContainer.style.pointerEvents = "auto";
        }
    }
    element.appendChild(container);
    return container;
};
var cyberpunkToast = {
    animation: function(element, position) {
        var fromX = position.includes("right") ? 40 : -40;
        var fromY = position.includes("top") ? -40 : 40;
        gsap8.set(element, {
            opacity: 0,
            y: fromY,
            x: fromX
        });
        createCyberpunkEffect(element);
        var tl = gsap8.timeline();
        tl.to(element, {
            x: 0,
            y: 0,
            opacity: 1,
            duration: 0.6,
            ease: "power2.out"
        });
        return tl;
    },
    containerStyles: _object_spread_props(_object_spread({}, glassEffect), {
        "--toast-bg": "rgba(6, 2, 23, 0.7)",
        "--toast-border": "1px solid rgba(0, 255, 255, 0.3)",
        "--toast-shadow": "0 0 15px rgba(0, 255, 255, 0.3)",
        color: "#00ffff",
        textShadow: "0 0 5px rgba(0, 255, 255, 0.7)",
        padding: "12px 16px",
        borderRadius: "4px",
        background: "linear-gradient(135deg, rgba(6, 2, 23, 0.9) 0%, rgba(22, 11, 57, 0.9) 100%)",
        backdropFilter: "blur(4px)",
        boxShadow: "0 0 15px rgba(0, 255, 255, 0.3)",
        transition: "all 0.3s ease",
        "&:hover": {
            transform: "translateY(-2px)",
            boxShadow: "0 0 20px rgba(0, 255, 255, 0.5)"
        }
    })
};
// src/variants/dragonball.ts
import { gsap as gsap9 } from "gsap";
var createDragonBallEffect = function(element) {
    var container = document.createElement("div");
    container.style.position = "absolute";
    container.style.top = "0";
    container.style.left = "0";
    container.style.width = "100%";
    container.style.height = "100%";
    container.style.overflow = "hidden";
    container.style.pointerEvents = "none";
    container.style.zIndex = "0";
    container.style.borderRadius = "8px";
    container.style.opacity = "0.7";
    container.style.background = "radial-gradient(circle, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 100%)";
    container.style.overflow = "visible";
    container.style.clipPath = "inset(0 0 0 0)";
    var createAuraLayer = function(size, color, blur, delay) {
        var aura = document.createElement("div");
        aura.style.position = "absolute";
        aura.style.top = "50%";
        aura.style.left = "50%";
        aura.style.width = size;
        aura.style.height = size;
        aura.style.background = "radial-gradient(circle, ".concat(color, " 0%, transparent 70%)");
        aura.style.transform = "translate(-50%, -50%)";
        aura.style.borderRadius = "50%";
        aura.style.filter = "blur(".concat(blur, ")");
        aura.style.opacity = "0";
        gsap9.to(aura, {
            scale: 1.5,
            opacity: 0.4,
            duration: 2 + Math.random(),
            delay: delay,
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut"
        });
        return aura;
    };
    container.appendChild(createAuraLayer("200%", "rgba(255,215,0,0.3)", "15px", 0));
    container.appendChild(createAuraLayer("180%", "rgba(255,165,0,0.2)", "12px", 0.2));
    container.appendChild(createAuraLayer("220%", "rgba(255,100,0,0.15)", "20px", 0.4));
    for(var i = 0; i < 8; i++){
        var particle = document.createElement("div");
        var size = Math.random() * 6 + 4;
        var posX = Math.random() * 100;
        var posY = Math.random() * 100;
        var duration = 3 + Math.random() * 4;
        var delay = Math.random() * 2;
        particle.style.position = "absolute";
        particle.style.width = "".concat(size, "px");
        particle.style.height = "".concat(size, "px");
        particle.style.background = "radial-gradient(circle, #FFD700 0%, #FFA500 100%)";
        particle.style.borderRadius = "50%";
        particle.style.left = "".concat(posX, "%");
        particle.style.top = "".concat(posY, "%");
        particle.style.filter = "blur(1px)";
        particle.style.opacity = "0.7";
        gsap9.to(particle, {
            x: "+=".concat((Math.random() - 0.5) * 40),
            y: "+=".concat((Math.random() - 0.5) * 40),
            scale: 0.5,
            duration: duration,
            delay: delay,
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut"
        });
        container.appendChild(particle);
    }
    element.style.position = "relative";
    element.style.overflow = "visible";
    var closeButton = element.querySelector('button[aria-label="Close toast"]');
    if (closeButton) {
        var button = closeButton;
        button.style.position = "relative";
        button.style.zIndex = "1000";
        button.style.pointerEvents = "auto";
        var buttonContainer = button.parentElement;
        if (buttonContainer) {
            buttonContainer.style.position = "relative";
            buttonContainer.style.zIndex = "1000";
            buttonContainer.style.pointerEvents = "auto";
        }
    }
    element.appendChild(container);
    return container;
};
var dragonballToast = {
    animation: function(element, position) {
        var fromX = position.includes("right") ? 40 : -40;
        var fromY = position.includes("top") ? -40 : 40;
        gsap9.set(element, {
            opacity: 0,
            y: fromY,
            x: fromX,
            scale: 0.8,
            transformOrigin: "center center"
        });
        createDragonBallEffect(element);
        var tl = gsap9.timeline();
        tl.to(element, {
            x: 0,
            y: 0,
            opacity: 1,
            scale: 1.1,
            duration: 0.3,
            ease: "power2.out"
        }).to(element, {
            scale: 0.95,
            duration: 0.2,
            ease: "power2.inOut"
        }).to(element, {
            scale: 1,
            duration: 0.3,
            ease: "elastic.out(1, 0.5)"
        });
        return tl;
    },
    containerStyles: _object_spread_props(_object_spread({}, glassEffect), {
        "--toast-bg": "rgba(10, 5, 0, 0.85)",
        "--toast-border": "2px solid #FFD700",
        "--toast-shadow": "0 0 30px rgba(255, 100, 0, 0.6)",
        color: "#FFD700",
        textShadow: "0 0 8px rgba(255, 215, 0, 0.9), 0 0 15px rgba(255, 100, 0, 0.7)",
        padding: "14px 22px",
        borderRadius: "12px",
        background: "linear-gradient(145deg, rgba(30, 15, 0, 0.9) 0%, rgba(10, 5, 0, 0.95) 100%)",
        backdropFilter: "blur(5px)",
        border: "2px solid rgba(255, 165, 0, 0.6)",
        boxShadow: "0 0 25px rgba(255, 100, 0, 0.4), inset 0 0 15px rgba(255, 165, 0, 0.2)",
        fontWeight: "bold",
        letterSpacing: "0.8px",
        fontFamily: '"Arial Black", sans-serif',
        textTransform: "uppercase",
        position: "relative",
        overflow: "visible",
        "&:hover": {
            transform: "scale(1.03) translateY(-2px)",
            boxShadow: "0 5px 35px rgba(255, 100, 0, 0.7), inset 0 0 20px rgba(255, 215, 0, 0.3)",
            "--toast-shadow": "0 0 40px rgba(255, 100, 0, 0.8)"
        }
    })
};
// src/variants/waterflow.ts
import { gsap as gsap10 } from "gsap";
var createWaterFlowEffect = function(element) {
    var container = document.createElement("div");
    container.style.position = "absolute";
    container.style.top = "0";
    container.style.left = "0";
    container.style.width = "100%";
    container.style.height = "100%";
    container.style.overflow = "hidden";
    container.style.pointerEvents = "none";
    container.style.zIndex = "0";
    container.style.borderRadius = "8px";
    container.style.clipPath = "inset(0 0 0 0)";
    container.style.transform = "translateZ(0)";
    var waterSurface = document.createElement("div");
    waterSurface.style.position = "absolute";
    waterSurface.style.top = "0";
    waterSurface.style.left = "0";
    waterSurface.style.width = "100%";
    waterSurface.style.height = "100%";
    waterSurface.style.background = "linear-gradient(0deg, rgba(64, 164, 223, 0.1), rgba(100, 200, 255, 0.2))";
    waterSurface.style.overflow = "hidden";
    var createWaveLayer = function(speed, size, opacity, direction) {
        var wave = document.createElement("div");
        wave.style.position = "absolute";
        wave.style.bottom = "0";
        wave.style.left = "0";
        wave.style.width = "200%";
        wave.style.height = "".concat(size, "%");
        wave.style.background = "linear-gradient(90deg, \n      rgba(100, 200, 255, ".concat(opacity, ") 0%, \n      rgba(64, 164, 223, ").concat(opacity * 0.8, ") 50%, \n      rgba(100, 200, 255, ").concat(opacity, ") 100%)");
        wave.style.transform = "translateX(0)";
        wave.style.animation = "waveMove ".concat(speed, "s linear infinite");
        wave.style.animationDirection = direction > 0 ? "normal" : "reverse";
        var keyframes = "\n      @keyframes waveMove {\n        0% { transform: translateX(0); }\n        100% { transform: translateX(-50%); }\n      }\n    ";
        var style = document.createElement("style");
        style.textContent = keyframes;
        document.head.appendChild(style);
        return wave;
    };
    var wave1 = createWaveLayer(20, 40, 0.4, 1);
    var wave2 = createWaveLayer(15, 30, 0.3, -1);
    var wave3 = createWaveLayer(25, 20, 0.2, 1);
    waterSurface.appendChild(wave1);
    waterSurface.appendChild(wave2);
    waterSurface.appendChild(wave3);
    var createBubble = function() {
        var bubble = document.createElement("div");
        var size = Math.random() * 6 + 2;
        var startX = Math.random() * 100;
        var startY = 100 + Math.random() * 20;
        var duration = 3 + Math.random() * 4;
        var delay = Math.random() * 5;
        var drift = (Math.random() - 0.5) * 30;
        bubble.style.position = "absolute";
        bubble.style.width = "".concat(size, "px");
        bubble.style.height = "".concat(size, "px");
        bubble.style.background = "rgba(255, 255, 255, ".concat(0.4 + Math.random() * 0.4, ")");
        bubble.style.borderRadius = "50%";
        bubble.style.left = "".concat(startX, "%");
        bubble.style.bottom = "0";
        bubble.style.filter = "blur(0.5px)";
        bubble.style.opacity = "0";
        bubble.style.transform = "translateY(0)";
        bubble.style.willChange = "transform, opacity";
        gsap10.to(bubble, {
            y: "-".concat(startY, "%"),
            x: "".concat(drift, "px"),
            opacity: 0.8,
            duration: duration,
            delay: delay,
            ease: "sine.in",
            onComplete: function() {
                bubble.remove();
                createBubble();
            }
        });
        container.appendChild(bubble);
        return bubble;
    };
    for(var i = 0; i < 8; i++){
        setTimeout(createBubble, i * 500);
    }
    container.appendChild(waterSurface);
    element.appendChild(container);
    var bubbleInterval = setInterval(function() {
        if (Math.random() > 0.7) {
            createBubble();
        }
    }, 800);
    var closeButton = element.querySelector('button[aria-label="Close toast"]');
    if (closeButton) {
        var button = closeButton;
        button.style.position = "relative";
        button.style.zIndex = "1000";
        button.style.pointerEvents = "auto";
        var buttonContainer = button.parentElement;
        if (buttonContainer) {
            buttonContainer.style.position = "relative";
            buttonContainer.style.zIndex = "1000";
            buttonContainer.style.pointerEvents = "auto";
        }
    }
    return function() {
        clearInterval(bubbleInterval);
        container.remove();
    };
};
var waterflowToast = {
    animation: function(element, position) {
        var fromX = position.includes("right") ? 40 : -40;
        var fromY = position.includes("top") ? -40 : 40;
        element.style.willChange = "transform, opacity";
        element.style.position = "relative";
        element.style.overflow = "visible";
        gsap10.set(element, {
            opacity: 0,
            y: fromY,
            x: fromX,
            margin: "8px 0"
        });
        var cleanup = createWaterFlowEffect(element);
        var tl = gsap10.timeline({
            onComplete: function() {
                element.style.zIndex = "auto";
            }
        });
        tl.to(element, {
            x: 0,
            y: 0,
            opacity: 1,
            duration: 0.6,
            ease: "power2.out",
            onStart: function() {
                element.style.zIndex = "999";
            }
        });
        return tl;
    },
    containerStyles: _object_spread_props(_object_spread({}, glassEffect), {
        "--toast-bg": "rgba(13, 71, 161, 0.3)",
        "--toast-border": "1px solid rgba(100, 200, 255, 0.4)",
        "--toast-shadow": "0 0 15px rgba(64, 164, 223, 0.3)",
        color: "#e1f5fe",
        textShadow: "0 0 8px rgba(100, 200, 255, 0.8)",
        padding: "12px 20px",
        margin: "8px 0",
        // Consistent margin with other toasts
        borderRadius: "8px",
        background: "linear-gradient(135deg, rgba(13, 71, 161, 0.4) 0%, rgba(2, 119, 189, 0.4) 100%)",
        backdropFilter: "blur(5px)",
        border: "1px solid rgba(100, 200, 255, 0.4)",
        boxShadow: "0 4px 15px rgba(64, 164, 223, 0.3)",
        overflow: "visible",
        // Changed from hidden to prevent clipping
        position: "relative",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        minHeight: "56px",
        // Match other toasts
        boxSizing: "border-box",
        transition: "all 0.3s ease, transform 0.2s ease-out",
        "&:hover": {
            transform: "translateY(-2px)",
            boxShadow: "0 6px 20px rgba(100, 200, 255, 0.4)"
        },
        "&::before": {
            content: '""',
            position: "absolute",
            top: "0",
            left: "0",
            right: "0",
            height: "2px",
            background: "linear-gradient(90deg, transparent, rgba(100, 200, 255, 0.6), transparent)",
            animation: "shine 3s infinite"
        }
    }),
    // Add shine animation
    additionalStyles: "\n    @keyframes shine {\n      0% { transform: translateX(-100%) }\n      20%, 100% { transform: translateX(100%) }\n    }\n  "
};
// src/variants/basic.ts
import { gsap as gsap11 } from "gsap";
var animateIn6 = function(element, fromX, fromY) {
    gsap11.fromTo(element, {
        x: fromX,
        y: fromY,
        opacity: 0,
        scale: 0.9,
        transformOrigin: "center"
    }, {
        x: 0,
        y: 0,
        opacity: 1,
        scale: 1,
        duration: 0.4,
        ease: "power2.out"
    });
    return gsap11.timeline();
};
var basicToast = {
    animation: function(element, position) {
        var fromX = position.includes("right") ? 40 : -40;
        var fromY = position.includes("top") ? -40 : 40;
        var closeButton = element.querySelector('button[aria-label="Close toast"]');
        if (closeButton) {
            closeButton.style.pointerEvents = "auto";
            closeButton.style.zIndex = "1001";
            closeButton.style.position = "relative";
        }
        gsap11.set(element, {
            opacity: 0,
            y: fromY,
            x: fromX,
            pointerEvents: "auto",
            zIndex: 1e3
        });
        var tl = gsap11.timeline({
            paused: true
        });
        tl.add(animateIn6(element, fromX, fromY));
        element.addEventListener("mouseenter", function() {
            gsap11.to(element, {
                y: "-=2",
                duration: 0.2,
                ease: "power2.out"
            });
        });
        element.addEventListener("mouseleave", function() {
            gsap11.to(element, {
                y: 0,
                duration: 0.2,
                ease: "power2.out"
            });
        });
        return tl;
    },
    containerStyles: _object_spread_props(_object_spread({}, glassEffect), {
        "--toast-bg": "#ffffff",
        "--toast-border": "rgba(0, 0, 0, 0.1)",
        "--toast-shadow": "0 2px 8px rgba(0, 0, 0, 0.1)",
        color: "#000000",
        "&:hover": {
            "--toast-shadow": "0 4px 12px rgba(0, 0, 0, 0.15)"
        },
        "&::before": {
            background: "linear-gradient(90deg, #3b82f6, #8b5cf6)"
        }
    }),
    additionalStyles: "\n    .toast-button {\n      color: #000000;\n      transition: all 0.2s ease;\n    }\n    .toast-button:hover {\n      color: #333333;\n      background-colo