react-toast-kit/dist/index.mjs

A modern, accessible toast notification system for React applications with automatic CSS injection

import {a,b,h}from'./chunk-AANTHRRE.mjs';export{f as cleanup,d as registerPlugin,c as toast,e as unregisterPlugin,b as useToastStore}from'./chunk-AANTHRRE.mjs';import*as ve from'react';import {createPortal}from'react-dom';import {motion,AnimatePresence}from'framer-motion';import {jsx,jsxs,Fragment}from'react/jsx-runtime';/* React Toast Kit - CSS auto-injection enabled */
var{useEffect:Z,useState:z,memo:V,useRef:W,useCallback:I,useMemo:O}=ve,Q=(()=>{let e=null,o=0,m=5e3;return ()=>{let l=Date.now();if(e!==null&&l-o<m)return e;let r=99998;if(typeof window>"u")return r;try{let i=document.getElementsByTagName("*");for(let s=0;s<i.length;s++){let u=i[s],f=window.getComputedStyle(u),a=parseInt(f.zIndex,10);a&&a>r&&(r=a);let c=u.classList;if(c.contains("rpt-dialog")||c.contains("modal")||c.contains("dialog")||c.contains("overlay")||u.tagName==="DIALOG"){let h=parseInt(f.zIndex,10)||1e3;h>r&&(r=h);}}}catch(i){console.warn("React Toast Kit: Failed to find highest z-index",i);}return e=Math.max(r+1e3,99999),o=l,e}})(),J={mobile:640,tablet:1024},xe={mobile:320,tablet:360,desktop:380},ee=V(({svgString:e,className:o=""})=>{let m=O(()=>({__html:e}),[e]);return jsx("div",{className:o,dangerouslySetInnerHTML:m})});ee.displayName="SVGIcon";var te=V(({toasts:e})=>{let[o,m]=z(""),l=W(""),r=W(null);return Z(()=>{if(e.length===0)return;let i=e[0];if(i.id===r.current)return;let s="";i.variant&&(s+=`${i.variant} notification: `),i.title&&(s+=i.title,i.description&&(s+=". ")),i.description&&(s+=i.description),s&&s!==l.current&&(l.current=s,r.current=i.id,m(s),setTimeout(()=>{m("");},1e3));},[e]),o?jsx("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",role:"status",children:o}):null});te.displayName="AccessibilityAnnouncer";var we=(e,o,m=100)=>{let l=W(0),r=W(0),i=W(false),s=I(a=>{if(!e)return;let c=a.touches[0];l.current=c.clientX,r.current=c.clientY,i.current=false;},[e]),u=I(a=>{if(!e)return;let c=a.touches[0],h=Math.abs(c.clientX-l.current),k=Math.abs(c.clientY-r.current);h>k&&h>10&&(i.current=true,a.preventDefault());},[e]),f=I(a=>{if(!e||!i.current)return;let c=a.changedTouches[0];Math.abs(c.clientX-l.current)>m&&o(),i.current=false;},[e,o,m]);return {handleTouchStart:s,handleTouchMove:u,handleTouchEnd:f}},ne=V(({toast:e,onDismiss:o,onPause:m,onResume:l,animation:r,position:i,toastTheme:s,defaultStyle:u})=>{let f=W(null),a=I(()=>{o(e.id);},[o,e.id]),c=I(()=>{e.pauseOnHover&&m(e.id);},[m,e.id,e.pauseOnHover]),h=I(()=>{l(e.id);},[l,e.id]),k=I(()=>{e.duration>0&&a();},[a,e.duration]),w=we(e.swipeToDismiss||false,a),N=I(n=>{if(e.rippleEffect&&f.current){let g=f.current,p=g.getBoundingClientRect(),L=n.clientX-p.left,M=n.clientY-p.top,E=document.createElement("div");E.className="toast-ripple-element",E.style.left=`${L}px`,E.style.top=`${M}px`,g.appendChild(E),requestAnimationFrame(()=>{setTimeout(()=>{g.contains(E)&&g.removeChild(E);},700);});}e.dismissOnClick&&a();},[e.rippleEffect,e.dismissOnClick,a]),y=O(()=>{let n=s==="dark",g=e.visualStyle||u,p={};if(g==="gradient")switch(e.variant){case "success":p["--toast-gradient-from"]=n?"rgba(5, 95, 70, 0.9)":"rgba(16, 185, 129, 0.8)",p["--toast-gradient-to"]=n?"rgba(4, 120, 87, 0.8)":"rgba(5, 150, 105, 0.7)";break;case "error":p["--toast-gradient-from"]=n?"rgba(153, 27, 27, 0.9)":"rgba(239, 68, 68, 0.8)",p["--toast-gradient-to"]=n?"rgba(185, 28, 28, 0.8)":"rgba(220, 38, 38, 0.7)";break;case "warning":p["--toast-gradient-from"]=n?"rgba(146, 64, 14, 0.9)":"rgba(245, 158, 11, 0.8)",p["--toast-gradient-to"]=n?"rgba(180, 83, 9, 0.8)":"rgba(217, 119, 6, 0.7)";break;case "info":p["--toast-gradient-from"]=n?"rgba(30, 64, 175, 0.9)":"rgba(59, 130, 246, 0.8)",p["--toast-gradient-to"]=n?"rgba(29, 78, 216, 0.8)":"rgba(37, 99, 235, 0.7)";break;default:p["--toast-gradient-from"]=n?"rgba(55, 65, 81, 0.9)":"rgba(229, 231, 235, 0.8)",p["--toast-gradient-to"]=n?"rgba(75, 85, 99, 0.8)":"rgba(209, 213, 219, 0.7)";}return p},[e.variant,s,e.visualStyle,u]),_=O(()=>{if(e.customAnimation)return {initial:e.customAnimation.initial,animate:e.customAnimation.animate,exit:e.customAnimation.exit};let n=e.animation||r,g=e.position||i,p=g.startsWith("top"),L=g.startsWith("bottom"),M=g.endsWith("left"),E=g.endsWith("right"),B=g.endsWith("center");if(n==="none")return {initial:{opacity:1},animate:{opacity:1},exit:{opacity:1}};if(n==="fade")return {initial:{opacity:0},animate:{opacity:1},exit:{opacity:0}};if(n==="bounce"){let t={opacity:0,scale:.9};return p?Object.assign(t,{y:-80}):L?Object.assign(t,{y:80}):M?Object.assign(t,{x:-80}):E&&Object.assign(t,{x:80}),{initial:t,animate:{opacity:1,y:0,x:0,scale:1,transition:{type:"spring",stiffness:350,damping:25}},exit:{opacity:0,scale:.9,transition:{duration:.2}}}}if(n==="flip")return {initial:{opacity:0,rotateX:90,perspective:400},animate:{opacity:1,rotateX:0,perspective:400,transition:{type:"spring",stiffness:300,damping:25}},exit:{opacity:0,rotateX:90,perspective:400,transition:{duration:.3}}};if(n==="zoom")return {initial:{opacity:0,scale:.5},animate:{opacity:1,scale:1,transition:{type:"spring",stiffness:400,damping:30}},exit:{opacity:0,scale:.5,transition:{duration:.2}}};let x={opacity:0},A={opacity:0};return p?(Object.assign(x,{y:-20}),Object.assign(A,{y:-20})):L?(Object.assign(x,{y:20}),Object.assign(A,{y:20})):M?(Object.assign(x,{x:-20}),Object.assign(A,{x:-20})):E?(Object.assign(x,{x:20}),Object.assign(A,{x:20})):B&&(p?(Object.assign(x,{y:-20}),Object.assign(A,{y:-20})):(Object.assign(x,{y:20}),Object.assign(A,{y:20}))),{initial:x,animate:{opacity:1,y:0,x:0},exit:A}},[e.customAnimation,e.animation,r,e.position,i]),S=O(()=>{let n=[];e.floating&&n.push("react-toast-floating"),e.rippleEffect&&n.push("toast-ripple");let g=e.visualStyle||u;return (g==="glass"||g==="gradient")&&n.push("toast-soft-shadow"),n.join(" ")},[e.floating,e.rippleEffect,e.visualStyle,u]),b=O(()=>e.variant==="custom"?"":!e.variant||e.variant==="default"?s==="dark"?"text-gray-300":"text-gray-500":"text-white",[e.variant,s]),C=O(()=>{let n="react-toast-progress";return e.progressBarStyle?`${n} ${e.progressBarStyle}`:e.variant==="custom"?`${n} bg-white/20`:!e.variant||e.variant==="default"?s==="dark"?`${n} bg-gray-600`:`${n} bg-gray-300`:`${n} bg-white/30`},[e.progressBarStyle,e.variant,s]),j=O(()=>e.emoji?jsx("div",{className:"flex-shrink-0 mr-3 toast-emoji",children:e.emoji}):null,[e.emoji]),P=e.iconString;return jsx(motion.div,{className:"react-toast-item w-full",initial:_.initial,animate:_.animate,exit:_.exit,transition:{duration:e.updating?.1:.2},layout:true,children:jsxs("div",{ref:f,role:e.variant==="error"?"alert":"status","aria-live":e.variant==="error"?"assertive":"polite",className:`relative overflow-hidden shadow-lg rounded-lg react-toast w-full ${e.className||""} ${S}`,style:{...e.style||{},...y},onMouseEnter:c,onMouseLeave:h,onClick:N,onTouchStart:w.handleTouchStart,onTouchMove:w.handleTouchMove,onTouchEnd:w.handleTouchEnd,"data-variant":e.variant,"data-theme":s,"data-style":e.visualStyle||u,"data-progress-position":e.progressBarPosition||"bottom","data-testid":`toast-${e.id}`,tabIndex:0,children:[e.duration>0&&jsx("div",{className:C,children:jsx(motion.div,{initial:{width:"100%"},animate:{width:"0%"},transition:{duration:e.duration/1e3,ease:e.progressAnimation||"linear"},onAnimationComplete:k,className:"react-toast-progress-fill",style:{backgroundColor:e.progressBarColor||void 0,height:e.progressBarThickness?`${e.progressBarThickness}px`:void 0,[e.progressBarPosition==="left"||e.progressBarPosition==="right"?"width":"height"]:e.progressBarThickness?`${e.progressBarThickness}px`:void 0}})}),jsx("div",{className:"p-4 toast-content",children:e.variant==="custom"&&e.component?e.component:jsxs("div",{className:"flex items-start",children:[j||(e.icon?jsx("div",{className:`flex-shrink-0 mr-3 ${b} toast-icon-container toast-icon-animated`,children:e.icon}):P?jsx("div",{className:`flex-shrink-0 mr-3 ${b} toast-icon-container toast-icon-animated`,children:jsx(ee,{svgString:P,className:b})}):null),jsxs("div",{className:"flex-1",children:[e.title&&jsx("h4",{className:"font-medium mb-1",children:e.title}),e.description&&jsx("div",{children:e.description})]}),e.dismissible&&jsx("button",{onClick:n=>{n.stopPropagation(),a();},className:"react-toast-close","aria-label":"Close notification","data-dismiss":"toast",children:jsx("svg",{className:"w-4 h-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})})]})})]})},e.id)});ne.displayName="ToastItem";var ie=V(({position:e,toasts:o,positionStyle:m,onDismiss:l,onPause:r,onResume:i,defaultAnimation:s,toastTheme:u,defaultStyle:f,containerClassName:a})=>jsx("div",{className:`fixed flex flex-col z-50 react-toast-container ${a||""}`,"data-position":e,"data-theme":u,style:m,children:jsx(AnimatePresence,{mode:"sync",children:o.map(c=>jsx(ne,{toast:c,onDismiss:l,onPause:r,onResume:i,animation:c.animation||s,position:e,toastTheme:u,defaultStyle:f},c.id))})}));ie.displayName="ToastContainer";var oe=({containerClassName:e="",topOffset:o=16,bottomOffset:m=16,leftOffset:l=16,rightOffset:r=16,defaultAnimation:i="slide",defaultStyle:s="solid",enableAccessibleAnnouncements:u=true,suppressHydrationWarning:f=false})=>{let[a,c]=z(false),[h,k]=z(null),[w,N]=z(1024),[y,_]=z("desktop"),{toasts:S,removeToast:b$1,pauseToast:C,resumeToast:j,effectiveTheme:P,updateEffectiveTheme:n}=b();Z(()=>{if(typeof window>"u")return;n();let t=window.matchMedia("(prefers-color-scheme: dark)"),d=()=>{n();};return t.addEventListener?t.addEventListener("change",d):t.addListener&&t.addListener(d),()=>{t.removeEventListener?t.removeEventListener("change",d):t.removeListener&&t.removeListener(d);}},[n]);let g=I(()=>{if(typeof window>"u")return;let t=window.innerWidth;N(t);let d=t<J.mobile?"mobile":t<J.tablet?"tablet":"desktop";d!==y&&_(d);},[y]);Z(()=>{if(typeof window>"u")return;g(),c(true);let t=document.getElementById("react-toast-kit-portal");if(t){let R=Q();t.style.zIndex=R.toString(),t.setAttribute("data-z-index",R.toString());}else {t=document.createElement("div"),t.id="react-toast-kit-portal",t.style.position="fixed",t.style.top="0",t.style.left="0",t.style.width="0",t.style.height="0",t.style.pointerEvents="none";let R=Q();t.style.zIndex=R.toString(),f&&t.setAttribute("data-suppress-hydration-warning","true"),t.setAttribute("data-react-toast-kit","true"),t.setAttribute("data-z-index",R.toString()),document.body.appendChild(t);}k(t);let d,v=()=>{clearTimeout(d),d=window.setTimeout(g,100);};return window.addEventListener("resize",v),()=>{window.removeEventListener("resize",v),clearTimeout(d),t&&t.parentNode&&!document.getElementById("react-toast-kit-portal-static")&&document.body.removeChild(t);}},[g,f]);let p=O(()=>S.map(t=>({...t,position:t.position||"top-right"})),[S]),L=O(()=>p.reduce((t,d)=>{let v=d.position;return t[v]||(t[v]=[]),t[v].push(d),t},{}),[p]),M=I(()=>xe[y],[y]),E=I(t=>{let d=M(),v={position:"fixed",width:`${d}px`,display:"flex",flexDirection:"column",gap:"0.5rem"};if(y==="mobile"){let R=Math.min(d,w-(l+r));v.width=`${R}px`,v.maxWidth=`calc(100vw - ${l+r}px)`;}switch(t){case "top-left":return {...v,top:`${o}px`,left:`${l}px`,alignItems:"flex-start"};case "top-center":return {...v,top:`${o}px`,left:"50%",transform:"translateX(-50%)",alignItems:"center"};case "top-right":return {...v,top:`${o}px`,right:`${r}px`,alignItems:"flex-end"};case "bottom-left":return {...v,bottom:`${m}px`,left:`${l}px`,alignItems:"flex-start"};case "bottom-center":return {...v,bottom:`${m}px`,left:"50%",transform:"translateX(-50%)",alignItems:"center"};case "bottom-right":return {...v,bottom:`${m}px`,right:`${r}px`,alignItems:"flex-end"};default:return {...v,top:`${o}px`,right:`${r}px`,alignItems:"flex-end"}}},[M,y,w,l,r,o,m]),B=P||"light",x=O(()=>jsxs(Fragment,{children:[u&&jsx(te,{toasts:S}),Object.entries(L).map(([t,d])=>jsx(ie,{position:t,toasts:d,positionStyle:E(t),onDismiss:b$1,onPause:C,onResume:j,defaultAnimation:i,toastTheme:B,defaultStyle:s,containerClassName:e},t))]}),[L,E,b$1,C,j,i,B,s,e,S,u]);return !a||!h?null:createPortal(f?jsx("div",{suppressHydrationWarning:true,children:x}):x,h)};oe.displayName="ToastPortal";var se=V(oe);var {createContext:Pe,useContext:Ee,useEffect:X,useState:Ae,useRef:ke}=ve,ae=Pe(null),_e=({children:e,theme:o="system",position:m="top-right",maxToasts:l=3,defaultAnimation:r="slide",defaultStyle:i="solid",defaultDuration:s=4e3,defaultDismissible:u=true,defaultPauseOnHover:f=true,defaultDismissOnClick:a=false,defaultProgressBarStyle:c,defaultProgressBarColor:h$1,defaultProgressBarPosition:k="bottom",defaultProgressBarThickness:w=3,defaultProgressAnimation:N="linear",defaultFloating:y=false,defaultRippleEffect:_=false,defaultSwipeToDismiss:S=false,defaultPriority:b$1="normal",defaultStagger:C=0,containerClassName:j,topOffset:P,bottomOffset:n,leftOffset:g,rightOffset:p,enableAccessibleAnnouncements:L=true,enableDevMode:M=false,enableDevTools:E=false,suppressHydrationWarning:B=false,globalClassName:x,globalStyle:A})=>{let t=ke(false),[d,v]=Ae(false),{setTheme:R,setMaxToasts:F,effectiveTheme:de,theme:me}=b();X(()=>(t.current=true,me!==o&&R(o),F(l),M&&typeof window<"u"&&process.env.NODE_ENV==="development"&&(window.__TOAST_DEV_MODE__=true,window.__TOAST_DEFAULTS__={duration:s,dismissible:u,pauseOnHover:f,dismissOnClick:a,animation:r,style:i,progressBarStyle:c,progressBarColor:h$1,progressBarPosition:k,progressBarThickness:w,progressAnimation:N,floating:y,rippleEffect:_,swipeToDismiss:S,priority:b$1,stagger:C,globalClassName:x,globalStyle:A}),typeof window<"u"&&(window.__TOAST_CONFIG__={defaultDuration:s,defaultDismissible:u,defaultPauseOnHover:f,defaultDismissOnClick:a,defaultAnimation:r,defaultStyle:i,defaultProgressBarStyle:c,defaultProgressBarColor:h$1,defaultProgressBarPosition:k,defaultProgressBarThickness:w,defaultProgressAnimation:N,defaultFloating:y,defaultRippleEffect:_,defaultSwipeToDismiss:S,defaultPriority:b$1,defaultStagger:C,globalClassName:x,globalStyle:A}),v(true),()=>{t.current=false,typeof window<"u"&&(delete window.__TOAST_DEV_MODE__,delete window.__TOAST_DEFAULTS__,delete window.__TOAST_CONFIG__);}),[]),X(()=>{d&&t.current&&R(o);},[o,d,R]),X(()=>{d&&t.current&&F(l);},[l,d,F]),X(()=>{d&&typeof window<"u"&&(window.__TOAST_CONFIG__={defaultDuration:s,defaultDismissible:u,defaultPauseOnHover:f,defaultDismissOnClick:a,defaultAnimation:r,defaultStyle:i,defaultProgressBarStyle:c,defaultProgressBarColor:h$1,defaultProgressBarPosition:k,defaultProgressBarThickness:w,defaultProgressAnimation:N,defaultFloating:y,defaultRippleEffect:_,defaultSwipeToDismiss:S,defaultPriority:b$1,defaultStagger:C,globalClassName:x,globalStyle:A});},[d,s,u,f,a,r,i,c,h$1,k,w,N,y,_,S,b$1,C,x,A]),X(()=>{if(o==="system"&&typeof window<"u"){b.getState().updateEffectiveTheme();let D=window.matchMedia("(prefers-color-scheme: dark)"),H=()=>{b.getState().updateEffectiveTheme();};return D.addEventListener?D.addEventListener("change",H):D.addListener&&D.addListener(H),()=>{D.removeEventListener?D.removeEventListener("change",H):D.removeListener&&D.removeListener(H);}}},[o]);let ue={theme:o,effectiveTheme:de,position:m,maxToasts:l,defaultAnimation:r,defaultStyle:i,defaultDuration:s,defaultDismissible:u,defaultPauseOnHover:f,defaultDismissOnClick:a,defaultProgressBarStyle:c,defaultProgressBarColor:h$1,defaultProgressBarPosition:k,defaultProgressBarThickness:w,defaultProgressAnimation:N,defaultFloating:y,defaultRippleEffect:_,defaultSwipeToDismiss:S,defaultPriority:b$1,defaultStagger:C,globalClassName:x,globalStyle:A},pe=E&&process.env.NODE_ENV==="development";return jsxs(ae.Provider,{value:ue,children:[e,jsx(se,{containerClassName:j,topOffset:P,bottomOffset:n,leftOffset:g,rightOffset:p,defaultAnimation:r,defaultStyle:i,enableAccessibleAnnouncements:L,suppressHydrationWarning:B}),pe&&jsx(h,{})]})},Ne=()=>{let e=Ee(ae);if(!e)throw new Error("useToastProvider must be used within a ToastProvider");return e};var {useCallback:ce,useMemo:Oe}=ve,Le=()=>{let{toasts:e,theme:o,effectiveTheme:m,maxToasts:l,plugins:r,addToast:i,removeToast:s,updateToast:u,clearAllToasts:f,pauseToast:a,resumeToast:c,setTheme:h,setMaxToasts:k,registerPlugin:w,unregisterPlugin:N}=b(),y=Oe(()=>{let b=e.length,C=e.reduce((P,n)=>(P[n.variant]=(P[n.variant]||0)+1,P),{}),j=e.reduce((P,n)=>(P[n.position]=(P[n.position]||0)+1,P),{});return {total:b,byVariant:C,byPosition:j}},[e]),_=ce(b=>e.find(C=>C.id===b),[e]),S=ce(()=>e.length>0,[e]);return {toasts:e,theme:o,effectiveTheme:m,maxToasts:l,plugins:r,addToast:i,removeToast:s,updateToast:u,clearAllToasts:f,pauseToast:a,resumeToast:c,setTheme:h,setMaxToasts:k,registerPlugin:w,unregisterPlugin:N,getToastById:_,hasToasts:S,stats:y}};var Y=false,le=()=>{if(!(typeof document>"u"||Y)){if(document.getElementById("react-toast-kit-styles")){Y=true;return}try{let e=document.createElement("style");e.id="react-toast-kit-styles",e.setAttribute("data-toast-kit-version","1.0.3");let o="/* Base toast container styles */\n.react-toast-container {\n  position: fixed;\n  z-index: 99999; /* Tăng z-index để hiển thị trên tất cả component */\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  pointer-events: none;\n}\n\n.react-toast-container[data-position=\"top-right\"] {\n  top: 1rem;\n  right: 1rem;\n  align-items: flex-end;\n}\n\n.react-toast-container[data-position=\"top-center\"] {\n  top: 1rem;\n  left: 50%;\n  transform: translateX(-50%);\n  align-items: center;\n}\n\n.react-toast-container[data-position=\"top-left\"] {\n  top: 1rem;\n  left: 1rem;\n  align-items: flex-start;\n}\n\n.react-toast-container[data-position=\"bottom-right\"] {\n  bottom: 1rem;\n  right: 1rem;\n  align-items: flex-end;\n}\n\n.react-toast-container[data-position=\"bottom-center\"] {\n  bottom: 1rem;\n  left: 50%;\n  transform: translateX(-50%);\n  align-items: center;\n}\n\n.react-toast-container[data-position=\"bottom-left\"] {\n  bottom: 1rem;\n  left: 1rem;\n  align-items: flex-start;\n}\n\n/* Toast item styles */\n.react-toast-item {\n  width: 100%;\n  pointer-events: auto;\n  max-width: 380px;\n}\n\n@media (max-width: 640px) {\n  .react-toast-item {\n    max-width: 92vw;\n  }\n}\n\n/* Toast styles */\n.react-toast {\n  position: relative;\n  overflow: hidden;\n  padding: 0.5rem;\n  border-radius: 0.5rem;\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04),\n    0 0 0 1px rgba(0, 0, 0, 0.05); /* Thêm border subtle */\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 0.95rem;\n  word-break: break-word;\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  hyphens: auto;\n  backdrop-filter: blur(8px); /* Thêm blur effect */\n  -webkit-backdrop-filter: blur(8px); /* Safari support */\n}\n\n/* Add glass effect styling from docs */\n.react-toast[data-style=\"glass\"] {\n  background: rgba(255, 255, 255, 0.9); /* Tăng opacity để rõ hơn */\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04),\n    inset 0 1px 0 rgba(255, 255, 255, 0.1);\n}\n\n.react-toast[data-theme=\"dark\"][data-style=\"glass\"] {\n  background: rgba(15, 23, 42, 0.9); /* Tăng opacity cho dark mode */\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.3),\n    0 10px 10px -5px rgba(0, 0, 0, 0.1),\n    inset 0 1px 0 rgba(255, 255, 255, 0.05);\n}\n\n/* Gradient style */\n.react-toast[data-style=\"gradient\"] {\n  background-image: linear-gradient(to right, var(--toast-gradient-from, rgba(59, 130, 246, 0.7)), var(--toast-gradient-to, rgba(37, 99, 235, 0.8)));\n}\n\n/* Shimmer effect styling */\n.react-toast[data-style=\"shimmer\"] {\n  position: relative;\n  overflow: hidden;\n}\n\n.react-toast[data-style=\"shimmer\"]::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);\n  animation: shimmer 2s linear infinite;\n}\n\n@keyframes shimmer {\n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(100%); }\n}\n\n/* Neon effect */\n.react-toast[data-style=\"neon\"] {\n  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n  animation: pulse-glow 2s ease-in-out infinite;\n}\n\n@keyframes pulse-glow {\n  0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }\n  50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 0 30px rgba(59, 130, 246, 0.3); }\n}\n\n/* Pill style */\n.react-toast[data-style=\"pill\"] {\n  border-radius: 50px;\n}\n\n/* Retro style */\n.react-toast[data-style=\"retro\"] {\n  border: 2px solid #000;\n  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.9);\n}\n\n.react-toast[data-theme=\"dark\"][data-style=\"retro\"] {\n  border: 2px solid #fff;\n  box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.7);\n}\n\n/* Confetti style */\n.react-toast[data-style=\"confetti\"] {\n  background-image: url(\"data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,.1)' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E\");\n}\n\n/* Variant styles */\n.react-toast[data-variant=\"success\"] {\n  background-color: #10b981;\n  color: #ffffff;\n  box-shadow: \n    0 20px 25px -5px rgba(16, 185, 129, 0.3),\n    0 10px 10px -5px rgba(16, 185, 129, 0.1);\n}\n\n.react-toast[data-variant=\"error\"] {\n  background-color: #ef4444;\n  color: #ffffff;\n  box-shadow: \n    0 20px 25px -5px rgba(239, 68, 68, 0.3),\n    0 10px 10px -5px rgba(239, 68, 68, 0.1);\n}\n\n.react-toast[data-variant=\"warning\"] {\n  background-color: #f59e0b;\n  color: #ffffff;\n  box-shadow: \n    0 20px 25px -5px rgba(245, 158, 11, 0.3),\n    0 10px 10px -5px rgba(245, 158, 11, 0.1);\n}\n\n.react-toast[data-variant=\"info\"] {\n  background-color: #3b82f6;\n  color: #ffffff;\n  box-shadow: \n    0 20px 25px -5px rgba(59, 130, 246, 0.3),\n    0 10px 10px -5px rgba(59, 130, 246, 0.1);\n}\n\n.react-toast[data-variant=\"loading\"] {\n  background-color: #6b7280;\n  color: #ffffff;\n  box-shadow: \n    0 20px 25px -5px rgba(107, 114, 128, 0.3),\n    0 10px 10px -5px rgba(107, 114, 128, 0.1);\n}\n\n.react-toast[data-variant=\"default\"] {\n  background-color: #ffffff;\n  color: #1f2937;\n  border: 1px solid #e5e7eb;\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04);\n}\n\n/* Dark mode variants with stronger contrast */\n.react-toast[data-theme=\"dark\"][data-variant=\"success\"] {\n  background-color: #047857; /* Darker but still visible */\n  color: #ffffff;\n  border: 1px solid #059669;\n  box-shadow: \n    0 20px 25px -5px rgba(4, 120, 87, 0.4),\n    0 10px 10px -5px rgba(4, 120, 87, 0.2);\n}\n\n.react-toast[data-theme=\"dark\"][data-variant=\"error\"] {\n  background-color: #b91c1c; /* Darker but still visible */\n  color: #ffffff;\n  border: 1px solid #dc2626;\n  box-shadow: \n    0 20px 25px -5px rgba(185, 28, 28, 0.4),\n    0 10px 10px -5px rgba(185, 28, 28, 0.2);\n}\n\n.react-toast[data-theme=\"dark\"][data-variant=\"warning\"] {\n  background-color: #b45309; /* Darker but still visible */\n  color: #ffffff;\n  border: 1px solid #d97706;\n  box-shadow: \n    0 20px 25px -5px rgba(180, 83, 9, 0.4),\n    0 10px 10px -5px rgba(180, 83, 9, 0.2);\n}\n\n.react-toast[data-theme=\"dark\"][data-variant=\"info\"] {\n  background-color: #1d4ed8; /* Darker but still visible */\n  color: #ffffff;\n  border: 1px solid #2563eb;\n  box-shadow: \n    0 20px 25px -5px rgba(29, 78, 216, 0.4),\n    0 10px 10px -5px rgba(29, 78, 216, 0.2);\n}\n\n.react-toast[data-theme=\"dark\"][data-variant=\"loading\"] {\n  background-color: #4b5563; /* Darker but still visible */\n  color: #ffffff;\n  border: 1px solid #6b7280;\n  box-shadow: \n    0 20px 25px -5px rgba(75, 85, 99, 0.4),\n    0 10px 10px -5px rgba(75, 85, 99, 0.2);\n}\n\n.react-toast[data-theme=\"dark\"][data-variant=\"default\"] {\n  background-color: #1f2937;\n  color: #f9fafb;\n  border: 1px solid #374151;\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.3),\n    0 10px 10px -5px rgba(0, 0, 0, 0.1);\n}\n\n/* Toast content */\n.toast-content {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Title */\n.react-toast h4 {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.5;\n}\n\n/* Description */\n.react-toast div:not(.toast-content) {\n  /* margin-top: 0.25rem; */\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n\n/* Icon container */\n.toast-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: 0.75rem;\n}\n\n.toast-icon-animated {\n  animation: toast-icon-animation 1s ease-in-out;\n}\n\n@keyframes toast-icon-animation {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  50% {\n    transform: scale(1.2);\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* Progress bar */\n.react-toast-progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n}\n\n.react-toast[data-progress-position=\"top\"] .react-toast-progress {\n  top: 0;\n  bottom: auto;\n}\n\n.react-toast[data-progress-position=\"left\"] .react-toast-progress {\n  top: 0;\n  bottom: 0;\n  right: auto;\n  width: 3px;\n  height: 100%;\n}\n\n.react-toast[data-progress-position=\"right\"] .react-toast-progress {\n  top: 0;\n  bottom: 0;\n  left: auto;\n  width: 3px;\n  height: 100%;\n}\n\n.react-toast-progress-fill {\n  height: 100%;\n  width: 100%;\n}\n\n/* Enhanced progress bar styles */\n.react-toast-progress.fancy {\n  background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));\n  backdrop-filter: blur(4px);\n}\n\n.react-toast-progress.gradient-wave .react-toast-progress-fill {\n  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);\n  background-size: 300% 100%;\n  animation: gradient-wave 2s linear infinite;\n}\n\n@keyframes gradient-wave {\n  0% { background-position: 0% 50%; }\n  100% { background-position: 100% 50%; }\n}\n\n.react-toast-progress.pulse .react-toast-progress-fill {\n  animation: progress-pulse 2s infinite;\n}\n\n@keyframes progress-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n\n.react-toast-progress.three-d .react-toast-progress-fill {\n  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);\n}\n\n.react-toast-progress.glow .react-toast-progress-fill {\n  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);\n}\n\n.react-toast-progress.rainbow .react-toast-progress-fill {\n  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);\n  background-size: 700% 100%;\n  animation: rainbow 4s linear infinite;\n}\n\n@keyframes rainbow {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n\n.react-toast-progress.dashed .react-toast-progress-fill {\n  background-image: linear-gradient(to right, currentColor 50%, transparent 50%);\n  background-size: 20px 100%;\n}\n\n/* Close button */\n.react-toast-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: none;\n  background: transparent;\n  color: currentColor;\n  opacity: 0.5;\n  cursor: pointer;\n  transition: opacity 0.2s;\n}\n\n.react-toast-close:hover {\n  opacity: 1;\n}\n\n/* Ripple effect */\n.toast-ripple {\n  position: relative;\n  overflow: hidden;\n}\n\n.toast-ripple-element {\n  position: absolute;\n  border-radius: 50%;\n  background-color: rgba(255, 255, 255, 0.3);\n  width: 100px;\n  height: 100px;\n  margin-top: -50px;\n  margin-left: -50px;\n  animation: ripple 0.7s linear;\n  transform: scale(0);\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 0;\n  }\n}\n\n/* Floating animation */\n.react-toast-floating {\n  animation: float 3s ease-in-out infinite;\n}\n\n@keyframes float {\n  0% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(-5px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n/* Accessibility */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n  .react-toast-container {\n    width: calc(100% - 2rem);\n    max-width: 100%;\n  }\n\n  .react-toast-item {\n    width: 100%;\n  }\n\n  .react-toast {\n    font-size: 0.9rem;\n  }\n\n  .toast-content {\n    padding: 0.75rem;\n  }\n\n  /* Improved touch targets */\n  .react-toast-close {\n    width: 2rem;\n    height: 2rem;\n  }\n}",m="/* Progress bar styles will be injected during build */";e.textContent=o+m,document.head&&(document.head.firstChild?document.head.insertBefore(e,document.head.firstChild):document.head.appendChild(e)),Y=!0;}catch(e){console.warn("[react-toast-kit] Could not auto-inject CSS:",e);}}};typeof window<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",le):le());typeof process<"u"&&process.env.NODE_ENV==="development"&&typeof window<"u"&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1")&&setTimeout(()=>{let e=["react-hot-toast","react-toastify","react-toast-notifications"].filter(o=>{try{return a.resolve(o)}catch{return  false}});e.length>0&&console.warn(`React Toast Kit: Detected other toast libraries: ${e.join(", ")}. This may cause conflicts. Consider removing them.`);},1e3);
export{_e as ToastProvider,le as injectCSS,Le as useToast,Ne as useToastProvider};//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map