@pheralb/toast
Version:
A lightweight, customizable, and dependency-free notification library for React.
4 lines • 13.5 kB
JavaScript
"use client"
;var P=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var Q=Object.prototype.hasOwnProperty;var X=(t,o)=>{for(var e in o)P(t,e,{get:o[e],enumerable:!0})},G=(t,o,e,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of H(o))!Q.call(t,i)&&i!==e&&P(t,i,{get:()=>o[i],enumerable:!(a=$(o,i))||a.enumerable});return t};var q=t=>G(P({},"__esModule",{value:!0}),t);var ot={};X(ot,{Toaster:()=>Y,toast:()=>D});module.exports=q(ot);function C(t,{insertAt:o}={}){if(!t||typeof document>"u")return;let e=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css",o==="top"&&e.firstChild?e.insertBefore(a,e.firstChild):e.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.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%)}}
`);var v=require("react");var u=require("react");var d=require("react/jsx-runtime"),V=t=>(0,d.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",...t,children:(0,d.jsx)("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"})}),A=t=>(0,d.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",...t,children:(0,d.jsx)("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"})}),I=t=>(0,d.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",...t,children:(0,d.jsx)("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"})}),z=t=>(0,d.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",...t,children:(0,d.jsx)("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"})}),E=t=>(0,d.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",...t,children:(0,d.jsx)("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"})});var r=require("react"),R=(t,o)=>{let e=(0,r.useRef)(0),a=(0,r.useRef)(t),i=(0,r.useRef)(0),p=(0,r.useRef)(o),m=(0,r.useRef)(!0),f=(0,r.useCallback)(()=>{e.current&&window.clearTimeout(e.current)},[]),b=(0,r.useCallback)(()=>{!m.current||!i.current||(f(),p.current-=Date.now()-i.current,m.current=!1)},[f]),g=(0,r.useCallback)(()=>{m.current||(i.current=Date.now(),e.current=window.setTimeout(a.current,p.current),m.current=!0)},[]),s=(0,r.useCallback)(()=>{f(),p.current=o,i.current=Date.now(),e.current=window.setTimeout(a.current,o),m.current=!0},[f,o]);return(0,r.useEffect)(()=>{a.current=t},[t]),(0,r.useEffect)(()=>(s(),f),[o,s,f]),{pause:b,resume:g,reset:s,isActive:m.current}};var c=(...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 y={success:"#22c55e",error:"#ef4444",warning:"#eab308",info:"#3b82f6",loading:"currentColor"},J={"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"},K={"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"},Z={"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,e)=>t?o==="swipe"?Z[e]:K[e]:J[e];var n=require("react/jsx-runtime"),tt=t=>{let[o,e]=(0,u.useState)(t.variant||"info"),[a,i]=(0,u.useState)(y[o]),[p,m]=(0,u.useState)(t.text),[f,b]=(0,u.useState)(!1),g=t.delayDuration||4e3,{pause:s,resume:h}=R(()=>{w()},g),l=c("t_icon",t.variant==="loading"&&o==="loading"?"t_loading":""),T={success:(0,n.jsx)(V,{width:18,height:18,style:{fill:a},className:l}),error:(0,n.jsx)(I,{width:18,height:18,style:{fill:a},className:l}),warning:(0,n.jsx)(A,{width:18,height:18,style:{fill:a},className:l}),info:(0,n.jsx)(z,{width:18,height:18,style:{fill:a},className:l}),loading:(0,n.jsx)(E,{width:18,height:18,style:{fill:a},className:l})},j=t.toastOptions?.icons?t.toastOptions?.icons[o]:T[o],w=(0,u.useCallback)(()=>{b(!0),N()?t.onClose&&t.onClose():setTimeout(()=>{t.onClose&&t.onClose()},300)},[t]),O=()=>{h()},W=()=>{s()};return(0,u.useEffect)(()=>{t.variant==="loading"&&t.options&&(s(),(typeof t.options.promise=="function"?t.options.promise():Promise.resolve(t.options.promise)).then(_=>{h(),e("success"),t.options.autoDismiss&&setTimeout(()=>{w()},g),m(t.options.success),i(y.success),t.options?.onSuccess&&t.options.onSuccess(_)}).catch(_=>{e("error"),m(t.options.error),i(y.error),t.options.autoDismiss&&setTimeout(()=>{w()},g),t.options?.onError&&t.options.onError(_)}))},[g,w,s,t.options,t.variant,h]),(0,n.jsxs)("div",{role:"alert","aria-labelledby":`toast-title-${t.id}`,"aria-describedby":`toast-description-${t.id}`,title:t.text,className:c(N()?"":B(f,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:W,onMouseLeave:O,onFocus:W,onBlur:O,children:[(0,n.jsxs)("div",{className:c(t.toastOptions?.headless?"":"t_container",t.toastOptions?.classNames?.container),children:[t.variant&&!t.icon?(0,n.jsx)("div",{className:c(t.toastOptions?.headless?"":"t_icon",t.toastOptions?.classNames?.icon),children:j}):t.icon&&(0,n.jsx)("div",{className:c(t.toastOptions?.headless?"":"t_icon",t.toastOptions?.classNames?.icon),children:t.icon}),(0,n.jsxs)("div",{className:c(t.toastOptions?.headless?"":"t_content",t.toastOptions?.classNames?.content),children:[(0,n.jsx)("p",{id:`toast-title-${t.id}`,children:p}),t.description&&(0,n.jsx)("p",{id:`toast-description-${t.id}`,children:t.description})]})]}),(0,n.jsxs)("div",{className:c(t.toastOptions?.headless?"":"t_actions",t.toastOptions?.classNames?.actions?.container),children:[t.action&&(0,n.jsx)("button",{onClick:t.action.onClick,title:typeof t.action.content=="string"?t.action.content:"Action Button",className:c(t.toastOptions?.classNames?.actions?.actionBtn),children:t.action.content??t.toastOptions?.defaultActionContent??"Action"}),(0,n.jsx)("button",{onClick:w,title:"Close toast",className:c(t.toastOptions?.classNames?.actions?.closeBtn),children:t.toastOptions?.defaultCloseContent??"Close"})]})]})},F=tt;var M=require("react/jsx-runtime"),k,Y=({maxToasts:t=4,position:o="bottom-right",theme:e="system",toastOptions:a})=>{let[i,p]=(0,v.useState)([]),[m,f]=(0,v.useState)(!1);(0,v.useEffect)(()=>{f(!0)},[]);let b=s=>{let h={...s,id:S()};p(l=>{let T=o==="top-left"||o==="top-right"||o==="top-center";return l.length>=t?T?[h,...l.slice(0,-1)]:[...l.slice(1),h]:T?[h,...l]:[...l,h]})},g=s=>{p(h=>h.filter(l=>l.id!==s))};return k=b,m&&i.length>0&&(0,M.jsx)("section",{"aria-label":"Toast Notifications",role:"alert","aria-live":"polite",className:c("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":"",a?.font?a?.font:"t_default_font"),children:i.map(s=>(0,M.jsx)(F,{theme:e,toastPosition:o,onClose:()=>g(s.id),toastOptions:a,active:i.indexOf(s)===i.length-1,...s},s.id))})},x=t=>{k?k(t):console.error("\u{1F514} <Toaster /> component is not mounted. Check toast.pheralb.dev/toaster for more information.")};var D={default:t=>(x({...t}),t),success:t=>(x({...t,variant:"success"}),t),error:t=>(x({...t,variant:"error"}),t),warning:t=>(x({...t,variant:"warning"}),t),info:t=>(x({...t,variant:"info"}),t),loading:t=>(x({...t,variant:"loading"}),t)};0&&(module.exports={Toaster,toast});
//# sourceMappingURL=main.cjs.map