sonner 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,7 @@
1
+ # react-temps
2
+
3
+ An opinionated toast component for React.
4
+
5
+ ## Usage
6
+
7
+ `npm install react-temps`
@@ -0,0 +1,53 @@
1
+ import React from 'react';
2
+
3
+ type ToastTypes = 'normal' | 'action' | 'success' | 'error' | 'loading';
4
+ type PromiseData = {
5
+ loading: string;
6
+ success: string | React.ReactNode;
7
+ error: string | React.ReactNode;
8
+ };
9
+ type PromiseT = () => Promise<any>;
10
+ interface ToastT {
11
+ id: number;
12
+ title?: string;
13
+ type?: ToastTypes;
14
+ icon?: React.ReactNode;
15
+ jsx?: React.ReactNode;
16
+ invert?: boolean;
17
+ description?: string;
18
+ duration?: number;
19
+ important?: boolean;
20
+ action?: {
21
+ label: string;
22
+ onClick: () => void;
23
+ };
24
+ cancel?: {
25
+ label: string;
26
+ onClick?: () => void;
27
+ };
28
+ promise?: PromiseT;
29
+ promiseData?: PromiseData;
30
+ style?: React.CSSProperties;
31
+ className?: string;
32
+ }
33
+ type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
34
+ type ExternalToast = Omit<ToastT, 'id' | 'type' | 'title'>;
35
+
36
+ declare const toast: ((message: string, data?: ExternalToast) => void) & {
37
+ success: (message: string, data?: ExternalToast) => void;
38
+ error: (message: string, data?: ExternalToast) => void;
39
+ custom: (jsx: (id: number) => React.ReactElement) => void;
40
+ message: (message: string, data?: ExternalToast) => void;
41
+ promise: (promise: PromiseT, data?: PromiseData) => void;
42
+ };
43
+
44
+ interface ToasterProps {
45
+ invert?: boolean;
46
+ position?: Position;
47
+ hotkey?: string[];
48
+ expand?: boolean;
49
+ dismissable?: boolean;
50
+ }
51
+ declare const Toaster: (props: ToasterProps) => JSX.Element;
52
+
53
+ export { Toaster as default, toast };
package/dist/index.mjs ADDED
@@ -0,0 +1,4 @@
1
+ "use client"
2
+ import e from"react";function U(r,{insertAt:o}={}){if(!r||typeof document=="undefined")return;let t=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css",o==="top"&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=r:i.appendChild(document.createTextNode(r))}U(`.toaster{position:fixed;width:var(--width);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;--gray1: hsl(0, 0%, 99%);--gray2: hsl(0, 0%, 97.3%);--gray3: hsl(0, 0%, 95.1%);--gray4: hsl(0, 0%, 93%);--gray5: hsl(0, 0%, 90.9%);--gray6: hsl(0, 0%, 88.7%);--gray7: hsl(0, 0%, 85.8%);--gray8: hsl(0, 0%, 78%);--gray9: hsl(0, 0%, 56.1%);--gray10: hsl(0, 0%, 52.3%);--gray11: hsl(0, 0%, 43.5%);--gray12: hsl(0, 0%, 9%);--border-radius: 6px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:none;z-index:999999999}.toaster[data-x-position=right]{right:var(--offset)}.toaster[data-x-position=left]{left:var(--offset)}.toaster[data-x-position=center]{left:50%;transform:translate(-50%)}.toaster[data-y-position=top]{top:var(--offset)}.toaster[data-y-position=bottom]{bottom:var(--offset)}[data-react-temps-toast]{--y: translateY(100%);--lift-amount: calc(var(--lift) * var(--gap));--background: white;--border-color: var(--gray3);--color: var(--gray12);z-index:var(--z-index);display:flex;align-items:center;gap:6px;position:absolute;opacity:0;transform:var(--y);padding:16px;background:var(--background);border:1px solid var(--border-color);color:var(--color);border-radius:var(--border-radius);box-shadow:0 4px 12px #0000001a;width:var(--width);font-size:13px;touch-action:none;will-change:transform,opacity,height;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:none}[data-react-temps-toast][data-invert=true]{--background: var(--gray12);--border-color: var(--gray11);--color: var(--gray1)}[data-react-temps-toast]:focus-visible{box-shadow:0 4px 12px #0000001a,0 0 0 2px #0003}[data-react-temps-toast][data-y-position=top]{top:0;--y: translateY(-100%);--lift: 1;--lift-amount: calc(1 * var(--gap))}[data-react-temps-toast][data-y-position=bottom]{bottom:0;--y: translateY(100%);--lift: -1;--lift-amount: calc(var(--lift) * var(--gap))}[data-react-temps-toast] [data-description]{font-weight:400;line-height:1.4;color:var(--color)}[data-react-temps-toast] [data-title]{font-weight:500;color:var(--color)}[data-react-temps-toast] [data-icon]{display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:-3px;margin-right:4px}[data-react-temps-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);animation:fade-in .3s ease forwards}[data-react-temps-toast] [data-icon]>*{flex-shrink:0}[data-react-temps-toast] [data-content]{display:flex;flex-direction:column;gap:2px}[data-react-temps-toast] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--background);background:var(--color);border:none;cursor:pointer;outline:none;transition:opacity .4s,box-shadow .2s}[data-react-temps-toast] [data-button]:focus-visible{box-shadow:0 0 0 2px #0006}[data-react-temps-toast] [data-button]:first-of-type{margin-left:auto}[data-react-temps-toast] [data-cancel]{color:var(--color);background:var(--border-color)}[data-react-temps-toast] [data-close-button]{position:absolute;left:0;top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;background:var(--gray1);border:1px solid var(--gray4);transform:translate(-35%,-35%);border-radius:50%;opacity:0;cursor:pointer;transition:opacity .1s,background .2s,border-color .2s}[data-react-temps-toast]:hover [data-close-button]{opacity:1}[data-react-temps-toast]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-react-temps-toast][data-swiping=true]:before{content:"";position:absolute;top:50%;left:0;right:0;height:100%;transform:scaleX(3) translateY(-50%)}[data-react-temps-toast][data-swiping=false][data-removed=true]:before{content:"";position:absolute;inset:0;transform:scaleY(2)}[data-react-temps-toast]:after{content:"";position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-react-temps-toast][data-mounted=true]{--y: translateY(0);opacity:1}[data-react-temps-toast][data-expanded=false][data-front=false]{--scale: var(--toasts-before) * .05 + 1;--y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-react-temps-toast]>*{transition:opacity .4s}[data-react-temps-toast][data-expanded=false][data-front=false]>*{opacity:0}[data-react-temps-toast][data-visible=false]{opacity:0;pointer-events:none}[data-react-temps-toast][data-expanded=true]{--y: translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-react-temps-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y: translateY(100%);opacity:0}[data-react-temps-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y: translateY(calc(var(--lift) * var(--offset) + 150%));opacity:0;transtion:transform .2s,opacity .1s}[data-react-temps-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{opacity:0;transtion:opacity .2s}[data-react-temps-toast][data-removed=true][data-front=false]:before{height:calc(var(--initial-height) + 20%)}[data-react-temps-toast][data-swiping=true]{transform:var(--y) translate(var(--swipe-amount, 0px));transition:none}[data-react-temps-toast][data-swipe-out=true][data-x-position=right],[data-react-temps-toast][data-swipe-out=true][data-x-position=center]{animation:swipe-out-right .2s ease-out}[data-react-temps-toast][data-swipe-out=true][data-x-position=left]{animation:swipe-out-left .2s ease-out}@keyframes swipe-out-left{0%{transform:var(--y) translate(var(--swipe-amount, 0px));opacity:1}to{transform:var(--y) translate(-100%);opacity:0}}@keyframes swipe-out-right{0%{transform:var(--y) translate(var(--swipe-amount, 0px));opacity:1}to{transform:var(--y) translate(100%);opacity:0}}@media (max-width: 600px){.toaster{position:fixed;bottom:20px;right:20px;left:20px;width:100%}[data-react-temps-toast]{bottom:0;width:calc(100% - 40px)}}.react-temps-loading-wrapper{--size: 16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.react-temps-loading-wrapper[data-visible=false]{animation:fade-out .2s ease forwards}.react-temps-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.react-temps-loading-bar{animation:spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.react-temps-loading-bar:nth-child(1){animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.react-temps-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.react-temps-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.react-temps-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.react-temps-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.react-temps-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.react-temps-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.react-temps-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.react-temps-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.react-temps-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.react-temps-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.react-temps-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes spin{0%{opacity:1}to{opacity:.15}}@media (prefers-reduced-motion){[data-react-temps-toast],[data-react-temps-toast]>*,.react-temps-loading-bar{transition:none!important;animation:none!important}}
3
+ `);import g from"react";var W=r=>{switch(r){case"success":return rt;case"error":return it;default:}},st=Array(12).fill(0),J=({visible:r})=>g.createElement("div",{className:"react-temps-loading-wrapper","data-visible":r},g.createElement("div",{className:"react-temps-spinner"},st.map((o,t)=>g.createElement("div",{className:"react-temps-loading-bar",key:`spinner-bar-${t}`})))),rt=g.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",height:"20",width:"20"},g.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",clipRule:"evenodd"}));var it=g.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",height:"20",width:"20"},g.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",clipRule:"evenodd"}));var E=0,$=class{constructor(){this.subscribe=o=>(this.subscribers.push(o),()=>{let t=this.subscribers.indexOf(o);this.subscribers.splice(t,1)});this.publish=o=>{this.subscribers.forEach(t=>t(o))};this.message=(o,t)=>{this.publish({...t,id:E++,title:o})};this.error=(o,t)=>{this.publish({...t,id:E++,type:"error",title:o})};this.success=(o,t)=>{this.publish({...t,id:E++,type:"success",title:o})};this.promise=(o,t)=>{this.publish({promiseData:t,promise:o,id:E++})};this.custom=o=>{let t=E++;this.publish({jsx:o(t),id:t})};this.subscribers=[]}},m=new $,nt=(r,o)=>{m.publish({title:r,...o,id:E++})},lt=nt,dt=Object.assign(lt,{success:m.success,error:m.error,custom:m.custom,message:m.message,promise:m.promise});var ct=3,pt=32,mt=4e3,ut=356,G=14,ft=40,gt=200,ht=r=>{var V;let{invert:o,toast:t,interacting:i,setHeights:u,heights:h,index:l,toasts:P,expanded:b,removeToast:C,dismissable:A,position:p,expandByDefault:f}=r,[S,L]=e.useState(!1),[M,y]=e.useState(!1),[O,z]=e.useState(!1),[k,d]=e.useState(!1),[s,v]=e.useState(null),[H,I]=e.useState(0),[q,Q]=e.useState(0),x=e.useRef(null),Z=l===0,tt=l+1<=ct,F=t.type,N=e.useMemo(()=>h.findIndex(a=>a.toastId===t.id)||0,[h,t.id]),j=e.useMemo(()=>t.duration||mt,[t.duration]),Y=e.useRef(0),K=e.useRef(j),B=e.useRef(null),[et,_]=p.split("-"),X=e.useMemo(()=>h.reduce((a,n,c)=>c>=N?a:a+n.height,0),[h,N]),at=t.invert||o,R=e.useMemo(()=>N*G+X,[N,X]);e.useEffect(()=>{L(!0)},[]),e.useEffect(()=>{t.promise&&(v("loading"),t.promise().then(()=>{v("success")}).catch(()=>{v("error")}))},[t.promise]);let w=e.useCallback(()=>{y(!0),u(a=>a.filter(n=>n.toastId!==t.id)),setTimeout(()=>{C(t)},gt)},[t,C,u]);e.useEffect(()=>{if(t.promise&&s==="loading")return;let a;return!b&&!i||f?(()=>{Y.current||(Y.current=new Date().getTime()),a=setTimeout(()=>{w()},K.current)})():(()=>{let T=new Date().getTime(),D=Y.current+j-T;K.current=D})(),()=>clearTimeout(a)},[b,f,t,j,w,t.promise,s,i]),e.useEffect(()=>{let a=x.current;if(a){let n=a.getBoundingClientRect().height;return Q(n),u(c=>[{toastId:t.id,height:n},...c]),()=>u(c=>c.filter(T=>T.toastId!==t.id))}},[u,t.id]);let ot=e.useMemo(()=>{switch(s){case"loading":return t.promiseData.loading;case"success":return t.promiseData.success;case"error":return t.promiseData.error;default:return null}},[t.promiseData,s]);return e.createElement("li",{"aria-live":t.important?"assertive":"polite","aria-atomic":"true",role:"status",tabIndex:0,ref:x,className:t.className,"data-react-temps-toast":"","data-mounted":S,"data-promise":Boolean(t.promise),"data-removed":M,"data-visible":tt,"data-y-position":et,"data-x-position":_,"data-index":l,"data-front":Z,"data-swiping":O,"data-type":F,"data-invert":at,"data-swipe-out":k,"data-expanded":Boolean(b||f&&S),style:{"--index":l,"--toasts-before":l,"--z-index":P.length-l,"--offset":`${M?H:R}px`,"--initial-height":f?"auto":`${q}px`,...t.style},onPointerDown:a=>{I(R),a.target.setPointerCapture(a.pointerId),a.target.tagName!=="BUTTON"&&(z(!0),B.current=a.clientX)},onPointerUp:()=>{var n,c;if(k)return;let a=Number(((n=x.current)==null?void 0:n.style.getPropertyValue("--swipe-amount").replace("px",""))||0);if(Math.abs(a)>=ft){I(R),w(),d(!0);return}(c=x.current)==null||c.style.setProperty("--swipe-amount","0px"),B.current=null,z(!1)},onPointerMove:a=>{var T,D;if(!B.current)return;let n=a.clientX-B.current;if(_==="right"||_==="center"?n<0:n>0){(T=x.current)==null||T.style.setProperty("--swipe-amount","0px");return}(D=x.current)==null||D.style.setProperty("--swipe-amount",`${n}px`)}},A?e.createElement("button",{"aria-label":"Close toast","data-close-button":!0,onClick:w},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},e.createElement("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.createElement("line",{x1:"6",y1:"6",x2:"18",y2:"18"}))):null,t.jsx?t.jsx:e.createElement(e.Fragment,null,F||t.icon||t.promise?e.createElement("div",{"data-icon":""},t.promise?e.createElement(J,{visible:s==="loading"}):null,t.icon||W(s!=null?s:t.type)):null,e.createElement("div",{"data-content":""},e.createElement("div",{"data-title":""},(V=t.title)!=null?V:ot),t.description?e.createElement("div",{"data-description":""},t.description):null),t.cancel?e.createElement("button",{"data-button":!0,"data-cancel":!0,onClick:()=>{var a;w(),(a=t.cancel)!=null&&a.onClick&&t.cancel.onClick()}},t.cancel.label):null,t.action?e.createElement("button",{"data-button":"",onClick:()=>{var a;w(),(a=t.action)==null||a.onClick()}},t.action.label):null))},bt=r=>{var k;let{invert:o,position:t="bottom-right",hotkey:i=["altKey","KeyT"],expand:u,dismissable:h}=r,[l,P]=e.useState([]),[b,C]=e.useState([]),[A,p]=e.useState(!1),[f,S]=e.useState(!1),[L,M]=t.split("-"),y=e.useRef(null),O=i.join("+").replace(/Key/g,"").replace(/Digit/g,""),z=e.useCallback(d=>P(s=>s.filter(({id:v})=>v!==d.id)),[]);return e.useEffect(()=>m.subscribe(d=>{P(s=>[d,...s])}),[]),e.useEffect(()=>{l.length<=1&&p(!1)},[l]),e.useEffect(()=>{let d=s=>{var H;i.every(I=>s[I]||s.code===I)&&(p(!0),(H=y.current)==null||H.focus()),s.code==="Escape"&&(document.activeElement===y.current||y.current.contains(document.activeElement))&&p(!1)};return document.addEventListener("keydown",d),()=>document.removeEventListener("keydown",d)},[i]),e.createElement("div",{role:"region","aria-label":`Notifications ${O}`,tabIndex:-1},e.createElement("ol",{tabIndex:-1,ref:y,className:"toaster","data-y-position":L,"data-x-position":M,style:{"--front-toast-height":`${(k=b[0])==null?void 0:k.height}px`,"--offset":`${pt}px`,"--width":`${ut}px`,"--gap":`${G}px`},onMouseEnter:()=>p(!0),onMouseMove:()=>p(!0),onMouseLeave:()=>{f||p(!1)},onPointerDown:()=>{S(!0)},onPointerUp:()=>S(!1)},l.map((d,s)=>e.createElement(ht,{key:d.id,index:s,toast:d,invert:o,dismissable:h,interacting:f,position:t,removeToast:z,toasts:l,heights:b,setHeights:C,expandByDefault:u,expanded:A}))))};var Pt=bt;export{Pt as default,dt as toast};
4
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.tsx","#style-inject:#style-inject","../src/styles.css","../src/assets.tsx","../src/state.ts"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport './styles.css';\nimport { getAsset, Loader } from './assets';\nimport { HeightT, Position, ToastT } from './types';\nimport { ToastState, toast } from './state';\n\n// Visible toasts amount\nconst VISIBLE_TOASTS_AMOUNT = 3;\n\n// Viewport padding\nconst VIEWPORT_OFFSET = 32;\n\n// Default lifetime of a toasts (in ms)\nconst TOAST_LIFETIME = 4_000;\n\n// Default toast width\nconst TOAST_WIDTH = 356;\n\n// Default gap between toasts\nconst GAP = 14;\n\nconst SWIPE_TRESHOLD = 40;\n\nconst TIME_BEFORE_UNMOUNT = 200;\n\ninterface ToastProps {\n toast: ToastT;\n toasts: ToastT[];\n index: number;\n expanded: boolean;\n invert: boolean;\n heights: HeightT[];\n setHeights: React.Dispatch<React.SetStateAction<HeightT[]>>;\n removeToast: (toast: ToastT) => void;\n position: Position;\n expandByDefault: boolean;\n dismissable: boolean;\n interacting: boolean;\n}\n\nconst Toast = (props: ToastProps) => {\n const {\n invert: ToasterInvert,\n toast,\n interacting,\n setHeights,\n heights,\n index,\n toasts,\n expanded,\n removeToast,\n dismissable,\n position,\n expandByDefault,\n } = props;\n const [mounted, setMounted] = React.useState(false);\n const [removed, setRemoved] = React.useState(false);\n const [swiping, setSwiping] = React.useState(false);\n const [swipeOut, setSwipeOut] = React.useState(false);\n const [promiseStatus, setPromiseStatus] = React.useState<\n 'loading' | 'success' | 'error' | null\n >(null);\n const [offsetBeforeRemove, setOffsetBeforeRemove] = React.useState(0);\n const [initialHeight, setInitialHeight] = React.useState(0);\n const toastRef = React.useRef<HTMLLIElement>(null);\n const isFront = index === 0;\n const isVisible = index + 1 <= VISIBLE_TOASTS_AMOUNT;\n const toastType = toast.type;\n // Height index is used to calculate the offset as it gets updated before the toast array, which means we can calculate the new layout faster.\n const heightIndex = React.useMemo(\n () => heights.findIndex((height) => height.toastId === toast.id) || 0,\n [heights, toast.id]\n );\n const duration = React.useMemo(\n () => toast.duration || TOAST_LIFETIME,\n [toast.duration]\n );\n const closeTimerStartTimeRef = React.useRef(0);\n const closeTimerRemainingTimeRef = React.useRef(duration);\n const pointerStartXRef = React.useRef<number | null>(null);\n const [y, x] = position.split('-');\n const toastsHeightBefore = React.useMemo(() => {\n return heights.reduce((prev, curr, reducerIndex) => {\n // Calculate offset up untill current toast\n if (reducerIndex >= heightIndex) {\n return prev;\n }\n\n return prev + curr.height;\n }, 0);\n }, [heights, heightIndex]);\n const invert = toast.invert || ToasterInvert;\n\n const offset = React.useMemo(\n () => heightIndex * GAP + toastsHeightBefore,\n [heightIndex, toastsHeightBefore]\n );\n\n React.useEffect(() => {\n // Trigger enter animation without using CSS animation\n setMounted(true);\n }, []);\n\n React.useEffect(() => {\n if (toast.promise) {\n setPromiseStatus('loading');\n toast\n .promise()\n .then(() => {\n setPromiseStatus('success');\n })\n .catch(() => {\n setPromiseStatus('error');\n });\n }\n }, [toast.promise]);\n\n const deleteToast = React.useCallback(() => {\n // Save the offset for the exit swipe animation\n setRemoved(true);\n setHeights((h) => h.filter((height) => height.toastId !== toast.id));\n\n setTimeout(() => {\n removeToast(toast);\n }, TIME_BEFORE_UNMOUNT);\n }, [toast, removeToast, setHeights]);\n\n React.useEffect(() => {\n if (toast.promise && promiseStatus === 'loading') return;\n let timeoutId: NodeJS.Timeout;\n\n // Pause the timer on each hover\n const pauseTimer = () => {\n const now = new Date().getTime();\n // Calculate how much time is left (total duration + start time - current time) will give us the remaining time\n const timeRemaining = closeTimerStartTimeRef.current + duration - now;\n closeTimerRemainingTimeRef.current = timeRemaining;\n };\n\n const startTimer = () => {\n if (!closeTimerStartTimeRef.current) {\n closeTimerStartTimeRef.current = new Date().getTime();\n }\n\n timeoutId = setTimeout(() => {\n deleteToast();\n }, closeTimerRemainingTimeRef.current);\n };\n\n // Stop the timer if the toast is expanded/expanded by default or we are interacting with it (e.g. mobile swipe without expand)\n if ((!expanded && !interacting) || expandByDefault) {\n startTimer();\n } else {\n pauseTimer();\n }\n\n return () => clearTimeout(timeoutId);\n }, [\n expanded,\n expandByDefault,\n toast,\n duration,\n deleteToast,\n toast.promise,\n promiseStatus,\n interacting,\n ]);\n\n React.useEffect(() => {\n const toastNode = toastRef.current;\n\n if (toastNode) {\n const height = toastNode.getBoundingClientRect().height;\n\n setInitialHeight(height);\n setHeights((h) => [{ toastId: toast.id, height }, ...h]);\n\n return () =>\n setHeights((h) => h.filter((height) => height.toastId !== toast.id));\n }\n }, [setHeights, toast.id]);\n\n const promiseTitle = React.useMemo(() => {\n switch (promiseStatus) {\n case 'loading':\n return toast.promiseData.loading;\n case 'success':\n return toast.promiseData.success;\n case 'error':\n return toast.promiseData.error;\n default:\n return null;\n }\n }, [toast.promiseData, promiseStatus]);\n\n return (\n <li\n aria-live={toast.important ? 'assertive' : 'polite'}\n aria-atomic=\"true\"\n role=\"status\"\n tabIndex={0}\n ref={toastRef}\n className={toast.className}\n data-react-temps-toast=\"\"\n data-mounted={mounted}\n data-promise={Boolean(toast.promise)}\n data-removed={removed}\n data-visible={isVisible}\n data-y-position={y}\n data-x-position={x}\n data-index={index}\n data-front={isFront}\n data-swiping={swiping}\n data-type={toastType}\n data-invert={invert}\n data-swipe-out={swipeOut}\n data-expanded={Boolean(expanded || (expandByDefault && mounted))}\n style={\n {\n '--index': index,\n '--toasts-before': index,\n '--z-index': toasts.length - index,\n '--offset': `${removed ? offsetBeforeRemove : offset}px`,\n '--initial-height': expandByDefault ? 'auto' : `${initialHeight}px`,\n ...toast.style,\n } as React.CSSProperties\n }\n onPointerDown={(event) => {\n setOffsetBeforeRemove(offset);\n // Ensure we maintain correct pointer capture even when going outside of the toast (e.g. when swiping)\n (event.target as HTMLElement).setPointerCapture(event.pointerId);\n if ((event.target as HTMLElement).tagName === 'BUTTON') return;\n setSwiping(true);\n pointerStartXRef.current = event.clientX;\n }}\n onPointerUp={() => {\n if (swipeOut) return;\n const swipeAmount = Number(\n toastRef.current?.style\n .getPropertyValue('--swipe-amount')\n .replace('px', '') || 0\n );\n\n // Remove only if treshold is met\n if (Math.abs(swipeAmount) >= SWIPE_TRESHOLD) {\n setOffsetBeforeRemove(offset);\n deleteToast();\n setSwipeOut(true);\n return;\n }\n\n toastRef.current?.style.setProperty('--swipe-amount', '0px');\n pointerStartXRef.current = null;\n setSwiping(false);\n }}\n onPointerMove={(event) => {\n if (!pointerStartXRef.current) return;\n const xPosition = event.clientX - pointerStartXRef.current;\n const isAllowedToSwipe =\n x === 'right' || x === 'center' ? xPosition < 0 : xPosition > 0;\n // We don't want to swipe to the left and vice versa depending on toast position\n if (isAllowedToSwipe) {\n toastRef.current?.style.setProperty('--swipe-amount', '0px');\n return;\n }\n\n toastRef.current?.style.setProperty('--swipe-amount', `${xPosition}px`);\n }}\n >\n {dismissable ? (\n <button\n aria-label=\"Close toast\"\n data-close-button\n onClick={deleteToast}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n ) : null}\n {toast.jsx ? (\n toast.jsx\n ) : (\n <>\n {toastType || toast.icon || toast.promise ? (\n <div data-icon=\"\">\n {toast.promise ? (\n <Loader visible={promiseStatus === 'loading'} />\n ) : null}\n {toast.icon || getAsset(promiseStatus ?? toast.type)}\n </div>\n ) : null}\n\n <div data-content=\"\">\n <div data-title=\"\">{toast.title ?? promiseTitle}</div>\n {toast.description ? (\n <div data-description=\"\">{toast.description}</div>\n ) : null}\n </div>\n {toast.cancel ? (\n <button\n data-button\n data-cancel\n onClick={() => {\n deleteToast();\n if (toast.cancel?.onClick) {\n toast.cancel.onClick();\n }\n }}\n >\n {toast.cancel.label}\n </button>\n ) : null}\n {toast.action ? (\n <button\n data-button=\"\"\n onClick={() => {\n deleteToast();\n toast.action?.onClick();\n }}\n >\n {toast.action.label}\n </button>\n ) : null}\n </>\n )}\n </li>\n );\n};\n\ninterface ToasterProps {\n invert?: boolean;\n position?: Position;\n hotkey?: string[];\n expand?: boolean;\n dismissable?: boolean;\n}\n\nconst Toaster = (props: ToasterProps) => {\n const {\n invert,\n position = 'bottom-right',\n hotkey = ['altKey', 'KeyT'],\n expand,\n dismissable,\n } = props;\n const [toasts, setToasts] = React.useState<ToastT[]>([]);\n const [heights, setHeights] = React.useState<HeightT[]>([]);\n const [expanded, setExpanded] = React.useState(false);\n const [interacting, setInteracting] = React.useState(false);\n const [y, x] = position.split('-');\n const listRef = React.useRef<HTMLOListElement>(null);\n const hotkeyLabel = hotkey\n .join('+')\n .replace(/Key/g, '')\n .replace(/Digit/g, '');\n\n const removeToast = React.useCallback(\n (toast: ToastT) =>\n setToasts((toasts) => toasts.filter(({ id }) => id !== toast.id)),\n []\n );\n\n React.useEffect(() => {\n return ToastState.subscribe((toast) => {\n setToasts((toasts) => [toast, ...toasts]);\n });\n }, []);\n\n React.useEffect(() => {\n // Ensure expanded is always false when no toasts are present / only one left\n if (toasts.length <= 1) {\n setExpanded(false);\n }\n }, [toasts]);\n\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const isHotkeyPressed = hotkey.every(\n (key) => (event as any)[key] || event.code === key\n );\n\n if (isHotkeyPressed) {\n setExpanded(true);\n listRef.current?.focus();\n }\n\n if (\n event.code === 'Escape' &&\n (document.activeElement === listRef.current ||\n listRef.current.contains(document.activeElement))\n ) {\n setExpanded(false);\n }\n };\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [hotkey]);\n\n return (\n // Remove item from normal navigation flow, only available via hotkey\n <div\n role=\"region\"\n aria-label={`Notifications ${hotkeyLabel}`}\n tabIndex={-1}\n >\n <ol\n tabIndex={-1}\n ref={listRef}\n className=\"toaster\"\n data-y-position={y}\n data-x-position={x}\n style={\n {\n '--front-toast-height': `${heights[0]?.height}px`,\n '--offset': `${VIEWPORT_OFFSET}px`,\n '--width': `${TOAST_WIDTH}px`,\n '--gap': `${GAP}px`,\n } as React.CSSProperties\n }\n onMouseEnter={() => setExpanded(true)}\n onMouseMove={() => setExpanded(true)}\n onMouseLeave={() => {\n // Avoid setting expanded to false when interacting with a toast, e.g. swiping\n if (!interacting) {\n setExpanded(false);\n }\n }}\n onPointerDown={() => {\n setInteracting(true);\n }}\n onPointerUp={() => setInteracting(false)}\n >\n {toasts.map((toast, index) => (\n <Toast\n key={toast.id}\n index={index}\n toast={toast}\n invert={invert}\n dismissable={dismissable}\n interacting={interacting}\n position={position}\n removeToast={removeToast}\n toasts={toasts}\n heights={heights}\n setHeights={setHeights}\n expandByDefault={expand}\n expanded={expanded}\n />\n ))}\n </ol>\n </div>\n );\n};\nexport { toast };\nexport default Toaster;\n","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".toaster{position:fixed;width:var(--width);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;--gray1: hsl(0, 0%, 99%);--gray2: hsl(0, 0%, 97.3%);--gray3: hsl(0, 0%, 95.1%);--gray4: hsl(0, 0%, 93%);--gray5: hsl(0, 0%, 90.9%);--gray6: hsl(0, 0%, 88.7%);--gray7: hsl(0, 0%, 85.8%);--gray8: hsl(0, 0%, 78%);--gray9: hsl(0, 0%, 56.1%);--gray10: hsl(0, 0%, 52.3%);--gray11: hsl(0, 0%, 43.5%);--gray12: hsl(0, 0%, 9%);--border-radius: 6px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:none;z-index:999999999}.toaster[data-x-position=right]{right:var(--offset)}.toaster[data-x-position=left]{left:var(--offset)}.toaster[data-x-position=center]{left:50%;transform:translate(-50%)}.toaster[data-y-position=top]{top:var(--offset)}.toaster[data-y-position=bottom]{bottom:var(--offset)}[data-react-temps-toast]{--y: translateY(100%);--lift-amount: calc(var(--lift) * var(--gap));--background: white;--border-color: var(--gray3);--color: var(--gray12);z-index:var(--z-index);display:flex;align-items:center;gap:6px;position:absolute;opacity:0;transform:var(--y);padding:16px;background:var(--background);border:1px solid var(--border-color);color:var(--color);border-radius:var(--border-radius);box-shadow:0 4px 12px #0000001a;width:var(--width);font-size:13px;touch-action:none;will-change:transform,opacity,height;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:none}[data-react-temps-toast][data-invert=true]{--background: var(--gray12);--border-color: var(--gray11);--color: var(--gray1)}[data-react-temps-toast]:focus-visible{box-shadow:0 4px 12px #0000001a,0 0 0 2px #0003}[data-react-temps-toast][data-y-position=top]{top:0;--y: translateY(-100%);--lift: 1;--lift-amount: calc(1 * var(--gap))}[data-react-temps-toast][data-y-position=bottom]{bottom:0;--y: translateY(100%);--lift: -1;--lift-amount: calc(var(--lift) * var(--gap))}[data-react-temps-toast] [data-description]{font-weight:400;line-height:1.4;color:var(--color)}[data-react-temps-toast] [data-title]{font-weight:500;color:var(--color)}[data-react-temps-toast] [data-icon]{display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:-3px;margin-right:4px}[data-react-temps-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);animation:fade-in .3s ease forwards}[data-react-temps-toast] [data-icon]>*{flex-shrink:0}[data-react-temps-toast] [data-content]{display:flex;flex-direction:column;gap:2px}[data-react-temps-toast] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--background);background:var(--color);border:none;cursor:pointer;outline:none;transition:opacity .4s,box-shadow .2s}[data-react-temps-toast] [data-button]:focus-visible{box-shadow:0 0 0 2px #0006}[data-react-temps-toast] [data-button]:first-of-type{margin-left:auto}[data-react-temps-toast] [data-cancel]{color:var(--color);background:var(--border-color)}[data-react-temps-toast] [data-close-button]{position:absolute;left:0;top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;background:var(--gray1);border:1px solid var(--gray4);transform:translate(-35%,-35%);border-radius:50%;opacity:0;cursor:pointer;transition:opacity .1s,background .2s,border-color .2s}[data-react-temps-toast]:hover [data-close-button]{opacity:1}[data-react-temps-toast]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-react-temps-toast][data-swiping=true]:before{content:\\\"\\\";position:absolute;top:50%;left:0;right:0;height:100%;transform:scaleX(3) translateY(-50%)}[data-react-temps-toast][data-swiping=false][data-removed=true]:before{content:\\\"\\\";position:absolute;inset:0;transform:scaleY(2)}[data-react-temps-toast]:after{content:\\\"\\\";position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-react-temps-toast][data-mounted=true]{--y: translateY(0);opacity:1}[data-react-temps-toast][data-expanded=false][data-front=false]{--scale: var(--toasts-before) * .05 + 1;--y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-react-temps-toast]>*{transition:opacity .4s}[data-react-temps-toast][data-expanded=false][data-front=false]>*{opacity:0}[data-react-temps-toast][data-visible=false]{opacity:0;pointer-events:none}[data-react-temps-toast][data-expanded=true]{--y: translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-react-temps-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y: translateY(100%);opacity:0}[data-react-temps-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y: translateY(calc(var(--lift) * var(--offset) + 150%));opacity:0;transtion:transform .2s,opacity .1s}[data-react-temps-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{opacity:0;transtion:opacity .2s}[data-react-temps-toast][data-removed=true][data-front=false]:before{height:calc(var(--initial-height) + 20%)}[data-react-temps-toast][data-swiping=true]{transform:var(--y) translate(var(--swipe-amount, 0px));transition:none}[data-react-temps-toast][data-swipe-out=true][data-x-position=right],[data-react-temps-toast][data-swipe-out=true][data-x-position=center]{animation:swipe-out-right .2s ease-out}[data-react-temps-toast][data-swipe-out=true][data-x-position=left]{animation:swipe-out-left .2s ease-out}@keyframes swipe-out-left{0%{transform:var(--y) translate(var(--swipe-amount, 0px));opacity:1}to{transform:var(--y) translate(-100%);opacity:0}}@keyframes swipe-out-right{0%{transform:var(--y) translate(var(--swipe-amount, 0px));opacity:1}to{transform:var(--y) translate(100%);opacity:0}}@media (max-width: 600px){.toaster{position:fixed;bottom:20px;right:20px;left:20px;width:100%}[data-react-temps-toast]{bottom:0;width:calc(100% - 40px)}}.react-temps-loading-wrapper{--size: 16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.react-temps-loading-wrapper[data-visible=false]{animation:fade-out .2s ease forwards}.react-temps-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.react-temps-loading-bar{animation:spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.react-temps-loading-bar:nth-child(1){animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.react-temps-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.react-temps-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.react-temps-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.react-temps-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.react-temps-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.react-temps-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.react-temps-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.react-temps-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.react-temps-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.react-temps-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.react-temps-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes spin{0%{opacity:1}to{opacity:.15}}@media (prefers-reduced-motion){[data-react-temps-toast],[data-react-temps-toast]>*,.react-temps-loading-bar{transition:none!important;animation:none!important}}\\n\")","'use client';\nimport React from 'react';\nimport { ToastTypes } from './types';\n\nexport const getAsset = (type: ToastTypes): JSX.Element | null => {\n switch (type) {\n case 'success':\n return SuccessIcon;\n\n case 'error':\n return ErrorIcon;\n\n default:\n null;\n }\n};\n\nconst bars = Array(12).fill(0);\n\nexport const Loader = ({ visible }: { visible: boolean }) => {\n return (\n <div className=\"react-temps-loading-wrapper\" data-visible={visible}>\n <div className=\"react-temps-spinner\">\n {bars.map((_, i) => (\n <div className=\"react-temps-loading-bar\" key={`spinner-bar-${i}`} />\n ))}\n </div>\n </div>\n );\n};\n\nconst SuccessIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n height=\"20\"\n width=\"20\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nconst InfoIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n height=\"20\"\n width=\"20\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n\nconst ErrorIcon = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n height=\"20\"\n width=\"20\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n","import React from 'react';\nimport { ExternalToast, ToastT, PromiseData, PromiseT } from './types';\n\nlet toastsCounter = 0;\n\nclass Observer {\n subscribers: Array<(toast: ExternalToast) => void>;\n\n constructor() {\n this.subscribers = [];\n }\n\n // We use arrow functions to maintain the correct `this` reference\n subscribe = (subscriber: (toast: ToastT) => void) => {\n this.subscribers.push(subscriber);\n\n return () => {\n const index = this.subscribers.indexOf(subscriber);\n this.subscribers.splice(index, 1);\n };\n };\n\n publish = (data: ToastT) => {\n this.subscribers.forEach((subscriber) => subscriber(data));\n };\n\n message = (message: string, data?: ExternalToast) => {\n this.publish({ ...data, id: toastsCounter++, title: message });\n };\n\n error = (message: string, data?: ExternalToast) => {\n this.publish({ ...data, id: toastsCounter++, type: 'error', title: message });\n };\n\n success = (message: string, data?: ExternalToast) => {\n this.publish({ ...data, id: toastsCounter++, type: 'success', title: message });\n };\n\n promise = (promise: PromiseT, data?: PromiseData) => {\n this.publish({ promiseData: data, promise, id: toastsCounter++ });\n };\n\n // We can't provide the toast we just created as a prop as we didn't creat it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()?\n custom = (jsx: (id: number) => React.ReactElement) => {\n const id = toastsCounter++;\n this.publish({ jsx: jsx(id), id });\n };\n}\n\nexport const ToastState = new Observer();\n\n// bind this to the toast function\nconst toastFunction = (message: string, data?: ExternalToast) => {\n ToastState.publish({\n title: message,\n ...data,\n id: toastsCounter++,\n });\n};\n\nconst basicToast = toastFunction;\n\n// We use `Object.assign` to maintain the correct types as we would lose them otherwise\nexport const toast = Object.assign(basicToast, {\n success: ToastState.success,\n error: ToastState.error,\n custom: ToastState.custom,\n message: ToastState.message,\n promise: ToastState.promise,\n});\n"],"mappings":";AAEA,OAAOA,MAAW,QCDO,SAARC,EAA6BC,EAAK,CAAE,SAAAC,CAAS,EAAI,CAAC,EAAG,CAC1D,GAAI,CAACD,GAAO,OAAO,UAAa,YAAa,OAE7C,IAAME,EAAO,SAAS,MAAQ,SAAS,qBAAqB,MAAM,EAAE,GAC9DC,EAAQ,SAAS,cAAc,OAAO,EAC5CA,EAAM,KAAO,WAETF,IAAa,OACXC,EAAK,WACPA,EAAK,aAAaC,EAAOD,EAAK,UAAU,EAK1CA,EAAK,YAAYC,CAAK,EAGpBA,EAAM,WACRA,EAAM,WAAW,QAAUH,EAE3BG,EAAM,YAAY,SAAS,eAAeH,CAAG,CAAC,CAElD,CCvB8BI,EAAY;AAAA,CAAq8P,ECCz/P,OAAOC,MAAW,QAGX,IAAMC,EAAYC,GAAyC,CAChE,OAAQA,EAAM,CACZ,IAAK,UACH,OAAOC,GAET,IAAK,QACH,OAAOC,GAET,QAEF,CACF,EAEMC,GAAO,MAAM,EAAE,EAAE,KAAK,CAAC,EAEhBC,EAAS,CAAC,CAAE,QAAAC,CAAQ,IAE7BP,EAAA,cAAC,OAAI,UAAU,8BAA8B,eAAcO,GACzDP,EAAA,cAAC,OAAI,UAAU,uBACZK,GAAK,IAAI,CAACG,EAAGC,IACZT,EAAA,cAAC,OAAI,UAAU,0BAA0B,IAAK,eAAeS,IAAK,CACnE,CACH,CACF,EAIEN,GACJH,EAAA,cAAC,OACC,MAAM,6BACN,QAAQ,YACR,KAAK,eACL,OAAO,KACP,MAAM,MAENA,EAAA,cAAC,QACC,SAAS,UACT,EAAE,yJACF,SAAS,UACX,CACF,EAmBF,IAAMU,GACJC,EAAA,cAAC,OACC,MAAM,6BACN,QAAQ,YACR,KAAK,eACL,OAAO,KACP,MAAM,MAENA,EAAA,cAAC,QACC,SAAS,UACT,EAAE,sIACF,SAAS,UACX,CACF,ECzEF,IAAIC,EAAgB,EAEdC,EAAN,KAAe,CAGb,aAAc,CAKd,eAAaC,IACX,KAAK,YAAY,KAAKA,CAAU,EAEzB,IAAM,CACX,IAAMC,EAAQ,KAAK,YAAY,QAAQD,CAAU,EACjD,KAAK,YAAY,OAAOC,EAAO,CAAC,CAClC,GAGF,aAAWC,GAAiB,CAC1B,KAAK,YAAY,QAASF,GAAeA,EAAWE,CAAI,CAAC,CAC3D,EAEA,aAAU,CAACC,EAAiBD,IAAyB,CACnD,KAAK,QAAQ,CAAE,GAAGA,EAAM,GAAIJ,IAAiB,MAAOK,CAAQ,CAAC,CAC/D,EAEA,WAAQ,CAACA,EAAiBD,IAAyB,CACjD,KAAK,QAAQ,CAAE,GAAGA,EAAM,GAAIJ,IAAiB,KAAM,QAAS,MAAOK,CAAQ,CAAC,CAC9E,EAEA,aAAU,CAACA,EAAiBD,IAAyB,CACnD,KAAK,QAAQ,CAAE,GAAGA,EAAM,GAAIJ,IAAiB,KAAM,UAAW,MAAOK,CAAQ,CAAC,CAChF,EAEA,aAAU,CAACC,EAAmBF,IAAuB,CACnD,KAAK,QAAQ,CAAE,YAAaA,EAAM,QAAAE,EAAS,GAAIN,GAAgB,CAAC,CAClE,EAGA,YAAUO,GAA4C,CACpD,IAAMC,EAAKR,IACX,KAAK,QAAQ,CAAE,IAAKO,EAAIC,CAAE,EAAG,GAAAA,CAAG,CAAC,CACnC,EArCE,KAAK,YAAc,CAAC,CACtB,CAqCF,EAEaC,EAAa,IAAIR,EAGxBS,GAAgB,CAACL,EAAiBD,IAAyB,CAC/DK,EAAW,QAAQ,CACjB,MAAOJ,EACP,GAAGD,EACH,GAAIJ,GACN,CAAC,CACH,EAEMW,GAAaD,GAGNE,GAAQ,OAAO,OAAOD,GAAY,CAC7C,QAASF,EAAW,QACpB,MAAOA,EAAW,MAClB,OAAQA,EAAW,OACnB,QAASA,EAAW,QACpB,QAASA,EAAW,OACtB,CAAC,EJ3DD,IAAMI,GAAwB,EAGxBC,GAAkB,GAGlBC,GAAiB,IAGjBC,GAAc,IAGdC,EAAM,GAENC,GAAiB,GAEjBC,GAAsB,IAiBtBC,GAASC,GAAsB,CA3CrC,IAAAC,EA4CE,GAAM,CACJ,OAAQC,EACR,MAAAC,EACA,YAAAC,EACA,WAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,SAAAC,EACA,gBAAAC,CACF,EAAIb,EACE,CAACc,EAASC,CAAU,EAAIC,EAAM,SAAS,EAAK,EAC5C,CAACC,EAASC,CAAU,EAAIF,EAAM,SAAS,EAAK,EAC5C,CAACG,EAASC,CAAU,EAAIJ,EAAM,SAAS,EAAK,EAC5C,CAACK,EAAUC,CAAW,EAAIN,EAAM,SAAS,EAAK,EAC9C,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAE9C,IAAI,EACA,CAACS,EAAoBC,CAAqB,EAAIV,EAAM,SAAS,CAAC,EAC9D,CAACW,EAAeC,CAAgB,EAAIZ,EAAM,SAAS,CAAC,EACpDa,EAAWb,EAAM,OAAsB,IAAI,EAC3Cc,EAAUvB,IAAU,EACpBwB,GAAYxB,EAAQ,GAAKf,GACzBwC,EAAY7B,EAAM,KAElB8B,EAAcjB,EAAM,QACxB,IAAMV,EAAQ,UAAW4B,GAAWA,EAAO,UAAY/B,EAAM,EAAE,GAAK,EACpE,CAACG,EAASH,EAAM,EAAE,CACpB,EACMgC,EAAWnB,EAAM,QACrB,IAAMb,EAAM,UAAYT,GACxB,CAACS,EAAM,QAAQ,CACjB,EACMiC,EAAyBpB,EAAM,OAAO,CAAC,EACvCqB,EAA6BrB,EAAM,OAAOmB,CAAQ,EAClDG,EAAmBtB,EAAM,OAAsB,IAAI,EACnD,CAACuB,GAAGC,CAAC,EAAI5B,EAAS,MAAM,GAAG,EAC3B6B,EAAqBzB,EAAM,QAAQ,IAChCV,EAAQ,OAAO,CAACoC,EAAMC,EAAMC,IAE7BA,GAAgBX,EACXS,EAGFA,EAAOC,EAAK,OAClB,CAAC,EACH,CAACrC,EAAS2B,CAAW,CAAC,EACnBY,GAAS1C,EAAM,QAAUD,EAEzB4C,EAAS9B,EAAM,QACnB,IAAMiB,EAAcrC,EAAM6C,EAC1B,CAACR,EAAaQ,CAAkB,CAClC,EAEAzB,EAAM,UAAU,IAAM,CAEpBD,EAAW,EAAI,CACjB,EAAG,CAAC,CAAC,EAELC,EAAM,UAAU,IAAM,CAChBb,EAAM,UACRqB,EAAiB,SAAS,EAC1BrB,EACG,QAAQ,EACR,KAAK,IAAM,CACVqB,EAAiB,SAAS,CAC5B,CAAC,EACA,MAAM,IAAM,CACXA,EAAiB,OAAO,CAC1B,CAAC,EAEP,EAAG,CAACrB,EAAM,OAAO,CAAC,EAElB,IAAM4C,EAAc/B,EAAM,YAAY,IAAM,CAE1CE,EAAW,EAAI,EACfb,EAAY2C,GAAMA,EAAE,OAAQd,GAAWA,EAAO,UAAY/B,EAAM,EAAE,CAAC,EAEnE,WAAW,IAAM,CACfO,EAAYP,CAAK,CACnB,EAAGL,EAAmB,CACxB,EAAG,CAACK,EAAOO,EAAaL,CAAU,CAAC,EAEnCW,EAAM,UAAU,IAAM,CACpB,GAAIb,EAAM,SAAWoB,IAAkB,UAAW,OAClD,IAAI0B,EAqBJ,MAAK,CAACxC,GAAY,CAACL,GAAgBS,GAXhB,IAAM,CAClBuB,EAAuB,UAC1BA,EAAuB,QAAU,IAAI,KAAK,EAAE,QAAQ,GAGtDa,EAAY,WAAW,IAAM,CAC3BF,EAAY,CACd,EAAGV,EAA2B,OAAO,CACvC,GAIa,GAnBM,IAAM,CACvB,IAAMa,EAAM,IAAI,KAAK,EAAE,QAAQ,EAEzBC,EAAgBf,EAAuB,QAAUD,EAAWe,EAClEb,EAA2B,QAAUc,CACvC,GAgBa,EAGN,IAAM,aAAaF,CAAS,CACrC,EAAG,CACDxC,EACAI,EACAV,EACAgC,EACAY,EACA5C,EAAM,QACNoB,EACAnB,CACF,CAAC,EAEDY,EAAM,UAAU,IAAM,CACpB,IAAMoC,EAAYvB,EAAS,QAE3B,GAAIuB,EAAW,CACb,IAAMlB,EAASkB,EAAU,sBAAsB,EAAE,OAEjD,OAAAxB,EAAiBM,CAAM,EACvB7B,EAAY2C,GAAM,CAAC,CAAE,QAAS7C,EAAM,GAAI,OAAA+B,CAAO,EAAG,GAAGc,CAAC,CAAC,EAEhD,IACL3C,EAAY2C,GAAMA,EAAE,OAAQd,GAAWA,EAAO,UAAY/B,EAAM,EAAE,CAAC,CACvE,CACF,EAAG,CAACE,EAAYF,EAAM,EAAE,CAAC,EAEzB,IAAMkD,GAAerC,EAAM,QAAQ,IAAM,CACvC,OAAQO,EAAe,CACrB,IAAK,UACH,OAAOpB,EAAM,YAAY,QAC3B,IAAK,UACH,OAAOA,EAAM,YAAY,QAC3B,IAAK,QACH,OAAOA,EAAM,YAAY,MAC3B,QACE,OAAO,IACX,CACF,EAAG,CAACA,EAAM,YAAaoB,CAAa,CAAC,EAErC,OACEP,EAAA,cAAC,MACC,YAAWb,EAAM,UAAY,YAAc,SAC3C,cAAY,OACZ,KAAK,SACL,SAAU,EACV,IAAK0B,EACL,UAAW1B,EAAM,UACjB,yBAAuB,GACvB,eAAcW,EACd,eAAc,QAAQX,EAAM,OAAO,EACnC,eAAcc,EACd,eAAcc,GACd,kBAAiBQ,GACjB,kBAAiBC,EACjB,aAAYjC,EACZ,aAAYuB,EACZ,eAAcX,EACd,YAAWa,EACX,cAAaa,GACb,iBAAgBxB,EAChB,gBAAe,QAAQZ,GAAaI,GAAmBC,CAAQ,EAC/D,MACE,CACE,UAAWP,EACX,kBAAmBA,EACnB,YAAaC,EAAO,OAASD,EAC7B,WAAY,GAAGU,EAAUQ,EAAqBqB,MAC9C,mBAAoBjC,EAAkB,OAAS,GAAGc,MAClD,GAAGxB,EAAM,KACX,EAEF,cAAgBmD,GAAU,CACxB5B,EAAsBoB,CAAM,EAE3BQ,EAAM,OAAuB,kBAAkBA,EAAM,SAAS,EAC1DA,EAAM,OAAuB,UAAY,WAC9ClC,EAAW,EAAI,EACfkB,EAAiB,QAAUgB,EAAM,QACnC,EACA,YAAa,IAAM,CA9OzB,IAAArD,EAAAsD,EA+OQ,GAAIlC,EAAU,OACd,IAAMmC,EAAc,SAClBvD,EAAA4B,EAAS,UAAT,YAAA5B,EAAkB,MACf,iBAAiB,kBACjB,QAAQ,KAAM,MAAO,CAC1B,EAGA,GAAI,KAAK,IAAIuD,CAAW,GAAK3D,GAAgB,CAC3C6B,EAAsBoB,CAAM,EAC5BC,EAAY,EACZzB,EAAY,EAAI,EAChB,MACF,EAEAiC,EAAA1B,EAAS,UAAT,MAAA0B,EAAkB,MAAM,YAAY,iBAAkB,OACtDjB,EAAiB,QAAU,KAC3BlB,EAAW,EAAK,CAClB,EACA,cAAgBkC,GAAU,CAlQhC,IAAArD,EAAAsD,EAmQQ,GAAI,CAACjB,EAAiB,QAAS,OAC/B,IAAMmB,EAAYH,EAAM,QAAUhB,EAAiB,QAInD,GAFEE,IAAM,SAAWA,IAAM,SAAWiB,EAAY,EAAIA,EAAY,EAE1C,EACpBxD,EAAA4B,EAAS,UAAT,MAAA5B,EAAkB,MAAM,YAAY,iBAAkB,OACtD,MACF,EAEAsD,EAAA1B,EAAS,UAAT,MAAA0B,EAAkB,MAAM,YAAY,iBAAkB,GAAGE,MAC3D,GAEC9C,EACCK,EAAA,cAAC,UACC,aAAW,cACX,oBAAiB,GACjB,QAAS+B,GAET/B,EAAA,cAAC,OACC,MAAM,6BACN,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,SAEfA,EAAA,cAAC,QAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,EACpCA,EAAA,cAAC,QAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CACtC,CACF,EACE,KACHb,EAAM,IACLA,EAAM,IAENa,EAAA,cAAAA,EAAA,cACGgB,GAAa7B,EAAM,MAAQA,EAAM,QAChCa,EAAA,cAAC,OAAI,YAAU,IACZb,EAAM,QACLa,EAAA,cAAC0C,EAAA,CAAO,QAASnC,IAAkB,UAAW,EAC5C,KACHpB,EAAM,MAAQwD,EAASpC,GAAA,KAAAA,EAAiBpB,EAAM,IAAI,CACrD,EACE,KAEJa,EAAA,cAAC,OAAI,eAAa,IAChBA,EAAA,cAAC,OAAI,aAAW,KAAIf,EAAAE,EAAM,QAAN,KAAAF,EAAeoD,EAAa,EAC/ClD,EAAM,YACLa,EAAA,cAAC,OAAI,mBAAiB,IAAIb,EAAM,WAAY,EAC1C,IACN,EACCA,EAAM,OACLa,EAAA,cAAC,UACC,cAAW,GACX,cAAW,GACX,QAAS,IAAM,CA7T7B,IAAAf,EA8TgB8C,EAAY,GACR9C,EAAAE,EAAM,SAAN,MAAAF,EAAc,SAChBE,EAAM,OAAO,QAAQ,CAEzB,GAECA,EAAM,OAAO,KAChB,EACE,KACHA,EAAM,OACLa,EAAA,cAAC,UACC,cAAY,GACZ,QAAS,IAAM,CA1U7B,IAAAf,EA2UgB8C,EAAY,GACZ9C,EAAAE,EAAM,SAAN,MAAAF,EAAc,SAChB,GAECE,EAAM,OAAO,KAChB,EACE,IACN,CAEJ,CAEJ,EAUMyD,GAAW5D,GAAwB,CAhWzC,IAAAC,EAiWE,GAAM,CACJ,OAAA4C,EACA,SAAAjC,EAAW,eACX,OAAAiD,EAAS,CAAC,SAAU,MAAM,EAC1B,OAAAC,EACA,YAAAnD,CACF,EAAIX,EACE,CAACQ,EAAQuD,CAAS,EAAI/C,EAAM,SAAmB,CAAC,CAAC,EACjD,CAACV,EAASD,CAAU,EAAIW,EAAM,SAAoB,CAAC,CAAC,EACpD,CAACP,EAAUuD,CAAW,EAAIhD,EAAM,SAAS,EAAK,EAC9C,CAACZ,EAAa6D,CAAc,EAAIjD,EAAM,SAAS,EAAK,EACpD,CAACuB,EAAGC,CAAC,EAAI5B,EAAS,MAAM,GAAG,EAC3BsD,EAAUlD,EAAM,OAAyB,IAAI,EAC7CmD,EAAcN,EACjB,KAAK,GAAG,EACR,QAAQ,OAAQ,EAAE,EAClB,QAAQ,SAAU,EAAE,EAEjBnD,EAAcM,EAAM,YACvBb,GACC4D,EAAWvD,GAAWA,EAAO,OAAO,CAAC,CAAE,GAAA4D,CAAG,IAAMA,IAAOjE,EAAM,EAAE,CAAC,EAClE,CAAC,CACH,EAEA,OAAAa,EAAM,UAAU,IACPqD,EAAW,UAAWlE,GAAU,CACrC4D,EAAWvD,GAAW,CAACL,EAAO,GAAGK,CAAM,CAAC,CAC1C,CAAC,EACA,CAAC,CAAC,EAELQ,EAAM,UAAU,IAAM,CAEhBR,EAAO,QAAU,GACnBwD,EAAY,EAAK,CAErB,EAAG,CAACxD,CAAM,CAAC,EAEXQ,EAAM,UAAU,IAAM,CACpB,IAAMsD,EAAiBhB,GAAyB,CAvYpD,IAAArD,EAwY8B4D,EAAO,MAC5BU,GAASjB,EAAciB,IAAQjB,EAAM,OAASiB,CACjD,IAGEP,EAAY,EAAI,GAChB/D,EAAAiE,EAAQ,UAAR,MAAAjE,EAAiB,SAIjBqD,EAAM,OAAS,WACd,SAAS,gBAAkBY,EAAQ,SAClCA,EAAQ,QAAQ,SAAS,SAAS,aAAa,IAEjDF,EAAY,EAAK,CAErB,EACA,gBAAS,iBAAiB,UAAWM,CAAa,EAE3C,IAAM,SAAS,oBAAoB,UAAWA,CAAa,CACpE,EAAG,CAACT,CAAM,CAAC,EAIT7C,EAAA,cAAC,OACC,KAAK,SACL,aAAY,iBAAiBmD,IAC7B,SAAU,IAEVnD,EAAA,cAAC,MACC,SAAU,GACV,IAAKkD,EACL,UAAU,UACV,kBAAiB3B,EACjB,kBAAiBC,EACjB,MACE,CACE,uBAAwB,IAAGvC,EAAAK,EAAQ,KAAR,YAAAL,EAAY,WACvC,WAAY,GAAGR,OACf,UAAW,GAAGE,OACd,QAAS,GAAGC,KACd,EAEF,aAAc,IAAMoE,EAAY,EAAI,EACpC,YAAa,IAAMA,EAAY,EAAI,EACnC,aAAc,IAAM,CAEb5D,GACH4D,EAAY,EAAK,CAErB,EACA,cAAe,IAAM,CACnBC,EAAe,EAAI,CACrB,EACA,YAAa,IAAMA,EAAe,EAAK,GAEtCzD,EAAO,IAAI,CAACL,EAAOI,IAClBS,EAAA,cAACjB,GAAA,CACC,IAAKI,EAAM,GACX,MAAOI,EACP,MAAOJ,EACP,OAAQ0C,EACR,YAAalC,EACb,YAAaP,EACb,SAAUQ,EACV,YAAaF,EACb,OAAQF,EACR,QAASF,EACT,WAAYD,EACZ,gBAAiByD,EACjB,SAAUrD,EACZ,CACD,CACH,CACF,CAEJ,EAEA,IAAO+D,GAAQC","names":["React","styleInject","css","insertAt","head","style","styleInject","React","getAsset","type","SuccessIcon","ErrorIcon","bars","Loader","visible","_","i","ErrorIcon","React","toastsCounter","Observer","subscriber","index","data","message","promise","jsx","id","ToastState","toastFunction","basicToast","toast","VISIBLE_TOASTS_AMOUNT","VIEWPORT_OFFSET","TOAST_LIFETIME","TOAST_WIDTH","GAP","SWIPE_TRESHOLD","TIME_BEFORE_UNMOUNT","Toast","props","_a","ToasterInvert","toast","interacting","setHeights","heights","index","toasts","expanded","removeToast","dismissable","position","expandByDefault","mounted","setMounted","React","removed","setRemoved","swiping","setSwiping","swipeOut","setSwipeOut","promiseStatus","setPromiseStatus","offsetBeforeRemove","setOffsetBeforeRemove","initialHeight","setInitialHeight","toastRef","isFront","isVisible","toastType","heightIndex","height","duration","closeTimerStartTimeRef","closeTimerRemainingTimeRef","pointerStartXRef","y","x","toastsHeightBefore","prev","curr","reducerIndex","invert","offset","deleteToast","h","timeoutId","now","timeRemaining","toastNode","promiseTitle","event","_b","swipeAmount","xPosition","Loader","getAsset","Toaster","hotkey","expand","setToasts","setExpanded","setInteracting","listRef","hotkeyLabel","id","ToastState","handleKeyDown","key","src_default","Toaster"]}
package/package.json ADDED
@@ -0,0 +1,37 @@
1
+ {
2
+ "name": "sonner",
3
+ "version": "0.0.1",
4
+ "description": "An opinionated toast component for React.",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "scripts": {
12
+ "build": "tsup src/index.tsx",
13
+ "dev": "tsup src/index.tsx --watch",
14
+ "dev:website": "turbo run dev --filter=website..."
15
+ },
16
+ "keywords": [
17
+ "react",
18
+ "notifications",
19
+ "toast",
20
+ "snackbar",
21
+ "message"
22
+ ],
23
+ "author": "Emil Kowalski <e@emilkowal.ski>",
24
+ "license": "MIT",
25
+ "devDependencies": {
26
+ "@types/node": "^18.11.13",
27
+ "@types/react": "^18.0.26",
28
+ "react": "^18.2.0",
29
+ "tsup": "^6.4.0",
30
+ "turbo": "1.6",
31
+ "typescript": "^4.8.4"
32
+ },
33
+ "peerDependencies": {
34
+ "react": "^18.0.0"
35
+ },
36
+ "packageManager": "pnpm@6.32.11"
37
+ }