@pheralb/toast/dist/main.js

A lightweight, customizable, and dependency-free notification library for React.

"use client"
function C(t,{insertAt:o}={}){if(!t||typeof document>"u")return;let a=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css",o==="top"&&a.firstChild?a.insertBefore(e,a.firstChild):a.appendChild(e),e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t))}C(`:root{--pheralb-toast-animation-enter: .4s;--pheralb-toast-animation-exit: .4s}:where(.t_global){--box-shadow: rgba(0, 0, 0, .1);--background-color: #ffffff;--hover-bg-color: #f5f5f5;--border-color: #e5e5e5;--text-color: #171717;--description-color: #262626;--focus-color: #a3a3a3}.t_light-theme{--box-shadow: rgba(0, 0, 0, .1);--background-color: #ffffff;--hover-bg-color: #f5f5f5;--border-color: #e5e5e5;--text-color: #171717;--description-color: #262626;--focus-color: #a3a3a3}.t_dark-theme{--box-shadow: rgba(0, 0, 0, .1);--background-color: #171717;--hover-bg-color: #27272a;--border-color: #262626;--text-color: #fafafa;--description-color: #e5e5e5;--focus-color: #404040}@media (prefers-color-scheme: dark){:where(.t_global){--box-shadow: rgba(0, 0, 0, .1);--background-color: #171717;--hover-bg-color: #27272a;--border-color: #262626;--text-color: #fafafa;--description-color: #e5e5e5;--focus-color: #404040}}.t_toasts{display:flex;flex-direction:column;gap:10px;padding:14px;position:fixed;z-index:999;overflow:hidden;transition:max-height .5s ease-in-out;width:100%}.t_default_font{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.t_top-left{top:0;left:0}.t_top-right{top:0;right:0}.t_top-center{top:0;left:50%;transform:translate(-50%)}.t_bottom-left{bottom:0;left:0}.t_bottom-right{bottom:0;right:0}.t_bottom-center{bottom:0;left:50%;transform:translate(-50%)}@media (min-width: 768px){.t_toasts{max-width:355px}}.t_global{display:flex;justify-content:space-between;padding:0;margin:0;list-style:none;outline:none;background-color:var(--background-color);width:auto;box-shadow:0 1px 3px 0 var(--box-shadow),0 1px 2px -1px var(--box-shadow);border:1px solid var(--border-color);border-radius:.375rem;font-size:.875rem;line-height:1.25rem;overflow:hidden}.t_global button{border:none;outline:none}.t_global button:focus{outline:1px solid var(--focus-color);outline-offset:0px;background-color:var(--hover-color)}.t_container{display:flex;flex-direction:row;align-items:center;width:100%;max-width:20rem;height:100wh;gap:.6rem;padding:12px;word-wrap:break-word;overflow-wrap:break-word}.t_icon{fill:var(--text-color);margin-top:.1rem;flex-shrink:0}.t_content{display:flex;flex-direction:column;justify-content:center;max-width:100%}.t_content p{font-weight:600;color:var(--text-color);margin:0}.t_content p:nth-of-type(2){font-weight:400;font-size:.75rem;color:var(--description-color)}.t_actions{display:flex;flex-direction:column;border-left:1px solid var(--border-color);height:100wh}.t_actions>button{flex:1 1 0%;width:100%;padding:6px 20px;font-size:13px;background-color:transparent;cursor:pointer;border:none}.t_actions>button:nth-child(1){color:var(--text-color);font-weight:500}.t_actions>button:nth-child(2){color:var(--text-color);border-top:1px solid var(--border-color)}.t_actions>button:hover{background-color:var(--hover-color)}.t_loading{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.t_slide-enter-top{animation:slide-top var(--pheralb-toast-animation-enter) ease}@keyframes slide-top{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.t_slide-enter-bottom{animation:slide-bottom var(--pheralb-toast-animation-enter) ease}@keyframes slide-bottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.t-slide-exit-top,.t-slide-exit-bottom{will-change:transform,opacity}.t-slide-exit-top{animation:slide-top-exit var(--pheralb-toast-animation-exit) ease}@keyframes slide-top-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}.t-slide-exit-bottom{animation:slide-bottom-exit var(--pheralb-toast-animation-exit) ease}@keyframes slide-bottom-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}.t_swipe-exit-center{animation:swipe-center-exit var(--pheralb-toast-animation-exit) ease}@keyframes swipe-center-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}.t_swipe-exit-left{animation:swipe-left-exit var(--pheralb-toast-animation-exit) ease}@keyframes swipe-left-exit{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}.t_swipe-exit-right{animation:swipe-right-exit var(--pheralb-toast-animation-exit) ease}@keyframes swipe-right-exit{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}
`);import{useEffect as J,useState as Y}from"react";import{useCallback as X,useEffect as G,useState as y}from"react";import{jsx as f}from"react/jsx-runtime";var W=t=>f("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",...t,children:f("path",{d:"M128 24a104 104 0 10104 104A104.11 104.11 0 00128 24zm45.66 85.66l-56 56a8 8 0 01-11.32 0l-24-24a8 8 0 0111.32-11.32L112 148.69l50.34-50.35a8 8 0 0111.32 11.32z"})}),V=t=>f("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",...t,children:f("path",{d:"M236.8 188.09L149.35 36.22a24.76 24.76 0 00-42.7 0L19.2 188.09a23.51 23.51 0 000 23.72A24.35 24.35 0 0040.55 224h174.9a24.35 24.35 0 0021.33-12.19 23.51 23.51 0 00.02-23.72zM120 104a8 8 0 0116 0v40a8 8 0 01-16 0zm8 88a12 12 0 1112-12 12 12 0 01-12 12z"})}),A=t=>f("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",...t,children:f("path",{d:"M128 24a104 104 0 10104 104A104.11 104.11 0 00128 24zm-8 56a8 8 0 0116 0v56a8 8 0 01-16 0zm8 104a12 12 0 1112-12 12 12 0 01-12 12z"})}),I=t=>f("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",...t,children:f("path",{d:"M128 24a104 104 0 10104 104A104.11 104.11 0 00128 24zm-4 48a12 12 0 11-12 12 12 12 0 0112-12zm12 112a16 16 0 01-16-16v-40a8 8 0 010-16 16 16 0 0116 16v40a8 8 0 010 16z"})}),z=t=>f("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",...t,children:f("path",{d:"M136 32v32a8 8 0 01-16 0V32a8 8 0 0116 0zm37.25 58.75a8 8 0 005.66-2.35l22.63-22.62a8 8 0 00-11.32-11.32L167.6 77.09a8 8 0 005.65 13.66zM224 120h-32a8 8 0 000 16h32a8 8 0 000-16zm-45.09 47.6a8 8 0 00-11.31 11.31l22.62 22.63a8 8 0 0011.32-11.32zM128 184a8 8 0 00-8 8v32a8 8 0 0016 0v-32a8 8 0 00-8-8zm-50.91-16.4l-22.63 22.62a8 8 0 0011.32 11.32l22.62-22.63a8 8 0 00-11.31-11.31zM72 128a8 8 0 00-8-8H32a8 8 0 000 16h32a8 8 0 008-8zm-6.22-73.54a8 8 0 00-11.32 11.32L77.09 88.4A8 8 0 0088.4 77.09z"})});import{useCallback as v,useEffect as E,useRef as b}from"react";var R=(t,o)=>{let a=b(0),e=b(t),s=b(0),h=b(o),l=b(!0),m=v(()=>{a.current&&window.clearTimeout(a.current)},[]),g=v(()=>{!l.current||!s.current||(m(),h.current-=Date.now()-s.current,l.current=!1)},[m]),u=v(()=>{l.current||(s.current=Date.now(),a.current=window.setTimeout(e.current,h.current),l.current=!0)},[]),i=v(()=>{m(),h.current=o,s.current=Date.now(),a.current=window.setTimeout(e.current,o),l.current=!0},[m,o]);return E(()=>{e.current=t},[t]),E(()=>(i(),m),[o,i,m]),{pause:g,resume:u,reset:i,isActive:l.current}};var r=(...t)=>t.filter(Boolean).join(" "),S=()=>Math.floor(Math.random()*1e6),N=(()=>{let t;return()=>(t===void 0&&(typeof window<"u"&&window.matchMedia!==void 0?t=window.matchMedia("(prefers-reduced-motion: reduce)").matches:t=!1),t)})(),L=()=>typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"t_dark-theme":"t_light-theme";var T={success:"#22c55e",error:"#ef4444",warning:"#eab308",info:"#3b82f6",loading:"currentColor"},$={"top-left":"t_slide-enter-top","top-right":"t_slide-enter-top","top-center":"t_slide-enter-top","bottom-left":"t_slide-enter-bottom","bottom-right":"t_slide-enter-bottom","bottom-center":"t_slide-enter-bottom"},H={"top-left":"t-slide-exit-top","top-right":"t-slide-exit-top","top-center":"t-slide-exit-top","bottom-left":"t-slide-exit-bottom","bottom-right":"t-slide-exit-bottom","bottom-center":"t-slide-exit-bottom"},Q={"top-left":"t_swipe-exit-left","top-right":"t_swipe-exit-right","top-center":"t_swipe-exit-center","bottom-left":"t_swipe-exit-left","bottom-right":"t_swipe-exit-right","bottom-center":"t_swipe-exit-center"},B=(t,o,a)=>t?o==="swipe"?Q[a]:H[a]:$[a];import{jsx as c,jsxs as _}from"react/jsx-runtime";var q=t=>{let[o,a]=y(t.variant||"info"),[e,s]=y(T[o]),[h,l]=y(t.text),[m,g]=y(!1),u=t.delayDuration||4e3,{pause:i,resume:d}=R(()=>{x()},u),n=r("t_icon",t.variant==="loading"&&o==="loading"?"t_loading":""),w={success:c(W,{width:18,height:18,style:{fill:e},className:n}),error:c(A,{width:18,height:18,style:{fill:e},className:n}),warning:c(V,{width:18,height:18,style:{fill:e},className:n}),info:c(I,{width:18,height:18,style:{fill:e},className:n}),loading:c(z,{width:18,height:18,style:{fill:e},className:n})},j=t.toastOptions?.icons?t.toastOptions?.icons[o]:w[o],x=X(()=>{g(!0),N()?t.onClose&&t.onClose():setTimeout(()=>{t.onClose&&t.onClose()},300)},[t]),M=()=>{d()},O=()=>{i()};return G(()=>{t.variant==="loading"&&t.options&&(i(),(typeof t.options.promise=="function"?t.options.promise():Promise.resolve(t.options.promise)).then(P=>{d(),a("success"),t.options.autoDismiss&&setTimeout(()=>{x()},u),l(t.options.success),s(T.success),t.options?.onSuccess&&t.options.onSuccess(P)}).catch(P=>{a("error"),l(t.options.error),s(T.error),t.options.autoDismiss&&setTimeout(()=>{x()},u),t.options?.onError&&t.options.onError(P)}))},[u,x,i,t.options,t.variant,d]),_("div",{role:"alert","aria-labelledby":`toast-title-${t.id}`,"aria-describedby":`toast-description-${t.id}`,title:t.text,className:r(N()?"":B(m,t.toastOptions?.animationOnClose||"slide",t.toastPosition),!t.toastOptions?.headless&&t.theme==="system"?L():"",!t.toastOptions?.headless&&t.theme==="dark"?"t_dark-theme":"",!t.toastOptions?.headless&&t.theme==="light"?"t_light-theme":"",t.toastOptions?.headless?"":"t_global",t.toastOptions?.classNames?.toast),style:{zIndex:t.active?1e3:999},onMouseEnter:O,onMouseLeave:M,onFocus:O,onBlur:M,children:[_("div",{className:r(t.toastOptions?.headless?"":"t_container",t.toastOptions?.classNames?.container),children:[t.variant&&!t.icon?c("div",{className:r(t.toastOptions?.headless?"":"t_icon",t.toastOptions?.classNames?.icon),children:j}):t.icon&&c("div",{className:r(t.toastOptions?.headless?"":"t_icon",t.toastOptions?.classNames?.icon),children:t.icon}),_("div",{className:r(t.toastOptions?.headless?"":"t_content",t.toastOptions?.classNames?.content),children:[c("p",{id:`toast-title-${t.id}`,children:h}),t.description&&c("p",{id:`toast-description-${t.id}`,children:t.description})]})]}),_("div",{className:r(t.toastOptions?.headless?"":"t_actions",t.toastOptions?.classNames?.actions?.container),children:[t.action&&c("button",{onClick:t.action.onClick,title:typeof t.action.content=="string"?t.action.content:"Action Button",className:r(t.toastOptions?.classNames?.actions?.actionBtn),children:t.action.content??t.toastOptions?.defaultActionContent??"Action"}),c("button",{onClick:x,title:"Close toast",className:r(t.toastOptions?.classNames?.actions?.closeBtn),children:t.toastOptions?.defaultCloseContent??"Close"})]})]})},F=q;import{jsx as D}from"react/jsx-runtime";var k,K=({maxToasts:t=4,position:o="bottom-right",theme:a="system",toastOptions:e})=>{let[s,h]=Y([]),[l,m]=Y(!1);J(()=>{m(!0)},[]);let g=i=>{let d={...i,id:S()};h(n=>{let w=o==="top-left"||o==="top-right"||o==="top-center";return n.length>=t?w?[d,...n.slice(0,-1)]:[...n.slice(1),d]:w?[d,...n]:[...n,d]})},u=i=>{h(d=>d.filter(n=>n.id!==i))};return k=g,l&&s.length>0&&D("section",{"aria-label":"Toast Notifications",role:"alert","aria-live":"polite",className:r("t_toasts",o==="top-left"?"t_top-left":"",o==="top-right"?"t_top-right":"",o==="top-center"?"t_top-center":"",o==="bottom-left"?"t_bottom-left":"",o==="bottom-right"?"t_bottom-right":"",o==="bottom-center"?"t_bottom-center":"",e?.font?e?.font:"t_default_font"),children:s.map(i=>D(F,{theme:a,toastPosition:o,onClose:()=>u(i.id),toastOptions:e,active:s.indexOf(i)===s.length-1,...i},i.id))})},p=t=>{k?k(t):console.error("\u{1F514} <Toaster /> component is not mounted. Check toast.pheralb.dev/toaster for more information.")};var Z={default:t=>(p({...t}),t),success:t=>(p({...t,variant:"success"}),t),error:t=>(p({...t,variant:"error"}),t),warning:t=>(p({...t,variant:"warning"}),t),info:t=>(p({...t,variant:"info"}),t),loading:t=>(p({...t,variant:"loading"}),t)};export{K as Toaster,Z as toast};
//# sourceMappingURL=main.js.map