react-next-toast/dist/index.mjs

A premium, modern toast notification system for React applications

import{createContext as mt,useContext as ut,useState as xt,useCallback as B}from"react";import{createRoot as Tt}from"react-dom/client";import{useEffect as gt}from"react";var m={success:"#10B981",error:"#EF4444",warning:"#F59E0B",info:"#3B82F6",loading:"#6366F1",default:"#6B7280"},k={dark:{surface:"rgba(23, 25, 30, 0.92)",surfaceSolid:"#17191E",border:"rgba(255, 255, 255, 0.08)",textPrimary:"#FFFFFF",textSecondary:"#9CA3AF",backdrop:"rgba(0, 0, 0, 0.4)"},light:{surface:"rgba(255, 255, 255, 0.92)",surfaceSolid:"#FFFFFF",border:"rgba(0, 0, 0, 0.08)",textPrimary:"#111827",textSecondary:"#6B7280",backdrop:"rgba(255, 255, 255, 0.4)"}},nt=`
@keyframes toast-slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes toast-slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes toast-slide-in-top {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toast-slide-in-bottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toast-spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes toast-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
`,X=!1;function V(){if(X||typeof document>"u")return;let t=document.createElement("style");t.id="react-next-toast-styles",t.textContent=nt,document.head.appendChild(t),X=!0}var j=(t,o,r)=>{let s=t.startsWith("top"),e=t.endsWith("left"),a=t.endsWith("center");return{position:"fixed",zIndex:999999,pointerEvents:"none",display:"flex",flexDirection:s?"column":"column-reverse",gap:`${r}px`,padding:"16px",maxHeight:"100vh",boxSizing:"border-box",...s?{top:0}:{bottom:0},...a?{left:"50%",transform:"translateX(-50%)"}:e?{left:0}:{right:0}}},U=(t,o,r)=>{let s=k[o];return{position:"relative",pointerEvents:"auto",display:"flex",alignItems:"flex-start",gap:"12px",width:"380px",maxWidth:"calc(100vw - 32px)",padding:"14px 16px",backgroundColor:s.surface,backdropFilter:"blur(12px)",WebkitBackdropFilter:"blur(12px)",border:`1px solid ${s.border}`,borderRadius:"12px",boxShadow:o==="dark"?"0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2)":"0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)",overflow:"hidden",animation:r?"toast-slide-out-right 0.2s ease-in forwards":"toast-slide-in-right 0.3s ease-out"}},_=t=>({position:"absolute",left:0,top:0,bottom:0,width:"3px",backgroundColor:m[t]||m.default,borderRadius:"3px 0 0 3px"}),G=t=>({flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",width:"24px",height:"24px",marginTop:"1px"}),$={flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:"2px"},Y=t=>({margin:0,fontSize:"14px",fontWeight:500,lineHeight:1.4,color:k[t].textPrimary,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'}),z=t=>({margin:0,fontSize:"13px",fontWeight:400,lineHeight:1.4,color:k[t].textSecondary,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'}),Z={display:"flex",alignItems:"center",gap:"8px",flexShrink:0,marginLeft:"auto"},q=t=>({padding:"6px 12px",fontSize:"13px",fontWeight:500,color:"#3B82F6",backgroundColor:"transparent",border:"none",borderRadius:"6px",cursor:"pointer",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',transition:"background-color 0.15s ease"}),J=t=>({display:"flex",alignItems:"center",justifyContent:"center",width:"24px",height:"24px",padding:0,backgroundColor:"transparent",border:"none",borderRadius:"6px",cursor:"pointer",color:k[t].textSecondary,opacity:.6,transition:"opacity 0.15s ease, background-color 0.15s ease"}),K={width:"20px",height:"20px",animation:"toast-spinner 1s linear infinite"};import{useState as lt,useEffect as pt,useCallback as dt}from"react";import{jsx as i,jsxs as b}from"react/jsx-runtime";var v=({size:t=20,color:o=m.success})=>b("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i("rect",{width:"24",height:"24",rx:"6",fill:o,fillOpacity:"0.15"}),i("path",{d:"M7.5 12L10.5 15L16.5 9",stroke:o,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),w=({size:t=20,color:o=m.error})=>b("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i("circle",{cx:"12",cy:"12",r:"10",fill:o,fillOpacity:"0.15"}),i("circle",{cx:"12",cy:"12",r:"10",stroke:o,strokeWidth:"1.5"}),i("path",{d:"M12 8V12",stroke:o,strokeWidth:"2",strokeLinecap:"round"}),i("circle",{cx:"12",cy:"16",r:"1",fill:o})]}),I=({size:t=20,color:o=m.warning})=>b("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i("path",{d:"M12 3L22 20H2L12 3Z",fill:o,fillOpacity:"0.15",stroke:o,strokeWidth:"1.5",strokeLinejoin:"round"}),i("path",{d:"M12 10V14",stroke:o,strokeWidth:"2",strokeLinecap:"round"}),i("circle",{cx:"12",cy:"17",r:"1",fill:o})]}),x=({size:t=20,color:o=m.info})=>b("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i("circle",{cx:"12",cy:"12",r:"10",fill:o,fillOpacity:"0.15"}),i("circle",{cx:"12",cy:"12",r:"10",stroke:o,strokeWidth:"1.5"}),i("circle",{cx:"12",cy:"8",r:"1",fill:o}),i("path",{d:"M12 11V16",stroke:o,strokeWidth:"2",strokeLinecap:"round"})]}),tt=({size:t=20,color:o=m.loading})=>b("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:K,children:[i("circle",{cx:"12",cy:"12",r:"10",stroke:o,strokeOpacity:"0.2",strokeWidth:"2.5"}),i("path",{d:"M12 2C6.48 2 2 6.48 2 12",stroke:o,strokeWidth:"2.5",strokeLinecap:"round"})]}),A=({size:t=16,color:o="currentColor"})=>i("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:i("path",{d:"M18 6L6 18M6 6L18 18",stroke:o,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),at=({size:t=20,color:o="#9CA3AF"})=>b("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i("path",{d:"M3 6H21M19 6V20C19 21 18 22 17 22H7C6 22 5 21 5 20V6M8 6V4C8 3 9 2 10 2H14C15 2 16 3 16 4V6",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),i("path",{d:"M10 11V17M14 11V17",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),Q={success:v,error:w,warning:I,info:x,loading:tt,default:x};function W(t){let o=Q[t]||Q.default;return i(o,{})}var ct={Success:()=>i(v,{}),Error:()=>i(w,{}),Warning:()=>i(I,{}),Info:()=>i(x,{})};import{jsx as T,jsxs as E}from"react/jsx-runtime";var L=({toast:t,theme:o,onDismiss:r})=>{let[s,e]=lt(!1),a=dt(()=>{e(!0),setTimeout(()=>{r(t?.id)},200)},[t?.id,r]);pt(()=>{if(t?.duration===0)return;let c=setTimeout(()=>{a()},t?.duration);return()=>clearTimeout(c)},[t?.duration,a]);let l=()=>{t?.action?.onClick(),a()};return E("div",{style:U(t?.variant,o,s),role:"alert","aria-live":"polite","data-toast-id":t?.id,children:[T("div",{style:_(t?.variant)}),T("div",{style:G(t?.variant),children:t?.icon||W(t?.variant)}),E("div",{style:$,children:[T("p",{style:Y(o),children:t?.title}),t?.description&&T("p",{style:z(o),children:t?.description})]}),E("div",{style:Z,children:[t.action&&T("button",{style:q(o),onClick:l,onMouseEnter:c=>{c.currentTarget.style.backgroundColor=o==="dark"?"rgba(59, 130, 246, 0.1)":"rgba(59, 130, 246, 0.08)"},onMouseLeave:c=>{c.currentTarget.style.backgroundColor="transparent"},children:t?.action?.label}),t.dismissible&&T("button",{style:J(o),onClick:a,onMouseEnter:c=>{c.currentTarget.style.opacity="1",c.currentTarget.style.backgroundColor=o==="dark"?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.05)"},onMouseLeave:c=>{c.currentTarget.style.opacity="0.6",c.currentTarget.style.backgroundColor="transparent"},"aria-label":"Dismiss notification",children:T(A,{size:14})})]})]})};import{Fragment as ft,jsx as M}from"react/jsx-runtime";var P=({toasts:t,onDismiss:o,position:r="bottom-right",theme:s="dark",maxVisible:e=5,gap:a=12})=>{gt(()=>{V()},[]);let l=t.reduce((n,d)=>{let g=d.position||r;return n[g]||(n[g]=[]),n[g].push(d),n},{}),c=Object.entries(l).reduce((n,[d,g])=>(n[d]=g.slice(-e),n),{}),R=n=>typeof window>"u"?n:window.innerWidth<640&&(n==="bottom-right"||n==="bottom-left")?"top-center":n;return M(ft,{children:Object.entries(c).map(([n,d])=>{let g=R(n);return M("div",{style:j(g,s,a),"data-toast-container":n,children:d.map(h=>M(L,{toast:h,theme:s,onDismiss:o},h.id))},n)})})};import{jsx as et,jsxs as kt}from"react/jsx-runtime";var ot=mt(null),yt=()=>{let t=ut(ot);if(!t)throw new Error("useToast must be used within a ToastProvider");return t},ht=({children:t,position:o="bottom-right",theme:r="dark",maxVisible:s=5,gap:e=12})=>{let[a,l]=xt([]),c=()=>`toast-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,R=B((h,O,f={})=>{let H=f.id||c(),st={id:H,variant:h,title:O,description:f.description,duration:f.duration??5e3,dismissible:f.dismissible??!0,action:f.action,icon:f.icon,position:f.position??o,createdAt:Date.now()};return l(it=>[...it,st]),H},[o]),n=B(h=>{l(O=>O.filter(f=>f.id!==h))},[]),d=B(()=>{l([])},[]),g={toasts:a,addToast:R,dismissToast:n,dismissAll:d};return kt(ot.Provider,{value:g,children:[t,et(P,{toasts:a,onDismiss:n,position:o,theme:r,maxVisible:s,gap:e})]})},F=null,p={toasts:[]},y={position:"bottom-right",theme:"dark",maxVisible:5,gap:12};function bt(){if(!(typeof document>"u")){if(!F){let t=document.createElement("div");t.id="react-next-toast-root",document.body.appendChild(t),F=Tt(t)}S()}}function S(){if(!F)return;let t=o=>{p={...p,toasts:p.toasts.filter(r=>r.id!==o)},S()};F.render(et(P,{toasts:p.toasts,onDismiss:t,position:y.position,theme:y.theme,maxVisible:y.maxVisible,gap:y.gap}))}function St(){return`toast-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}function u(t,o,r={}){bt();let s=r.id||St(),e={id:s,variant:t,title:o,description:r.description,duration:r.duration??5e3,dismissible:r.dismissible??!0,action:r.action,icon:r.icon,position:r.position??y.position??"bottom-right",createdAt:Date.now()};return p={...p,toasts:[...p.toasts,e]},S(),s}function N(t){p={...p,toasts:p.toasts.filter(o=>o.id!==t)},S()}function Ct(){p={toasts:[]},S()}var C=Object.assign((t,o)=>u("default",t,o),{success:(t,o)=>u("success",t,o),error:(t,o)=>u("error",t,o),warning:(t,o)=>u("warning",t,o),info:(t,o)=>u("info",t,o),loading:(t,o)=>u("loading",t,{...o,duration:0}),dismiss:N,dismissAll:Ct,promise:async function(t,o,r){let s=u("loading",o.loading,{...r,duration:0});try{let e=await t;N(s);let a=typeof o.success=="function"?o.success(e):o.success;return u("success",a,r),e}catch(e){N(s);let a=typeof o.error=="function"?o.error(e):o.error;throw u("error",a,r),e}},configure:t=>{y={...y,...t},S()}});var rt=(e=>(e.SUCCESS="success",e.ERROR="error",e.WARNING="warning",e.INFO="info",e))(rt||{});import{jsx as D,jsxs as Rt}from"react/jsx-runtime";var vt={success:v,error:w,warning:I,info:x},wt=({message:t,backgroundColor:o,textColor:r,type:s,position:e})=>{let a=vt[s]||x,l={top:"30px",bottom:"30px",right:"10px",left:"10px"},c={position:"fixed",top:e==="top-right"||e==="top-left"||!e?l.top:void 0,bottom:e==="bottom-right"||e==="bottom-left"||!e?l.bottom:void 0,right:e==="top-right"||e==="bottom-right"||!e?l.right:void 0,left:e==="top-left"||e==="bottom-left"||e==="left"?l.left:void 0,maxWidth:"30%",minWidth:"320px",maxHeight:"max-content",backgroundColor:o||(s==="success"?"#10B981":s==="error"?"#EF4444":s==="warning"?"#F59E0B":s==="info"?"#3B82F6":"#6B7280"),border:"1px solid rgba(255, 255, 255, 0.1)",borderRadius:"12px",display:"flex",alignItems:"center",gap:"12px",paddingInline:"16px",paddingBlock:"14px",zIndex:99999999,backdropFilter:"blur(12px)"};return Rt("div",{style:c,"data-toast-container":!0,children:[D("div",{style:{flexShrink:0},children:D(a,{size:20,color:"#FFFFFF"})}),D("p",{style:{color:r||"#FFFFFF",fontSize:"14px",fontWeight:500,maxHeight:"100px",overflowX:"hidden",overflowY:"visible",textOverflow:"ellipsis",whiteSpace:"pre-line",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',margin:0},dangerouslySetInnerHTML:{__html:t}})]})},It=wt;var ro={success:(t,o)=>C.success(t,{duration:o}),error:(t,o)=>C.error(t,{duration:o}),warning:(t,o)=>C.warning(t,{duration:o}),info:(t,o)=>C.info(t,{duration:o})};export{A as CloseIcon,w as ErrorIcon,ct as Icon,x as InfoIcon,tt as LoadingIcon,v as SuccessIcon,L as Toast,P as ToastContainer,It as ToastNotification,ht as ToastProvider,rt as ToastTypeEnum,at as TrashIcon,I as WarningIcon,m as colors,W as getVariantIcon,V as injectStyles,ro as showToast,k as theme,C as toast,yt as useToast};
//# sourceMappingURL=index.mjs.map