solid-toast - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8-alpha.0

dist/cjs/index.js

@@ -1,2 +0,2 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var t=require("solid-js"),e=require("solid-js/store"),o=require("solid-js/web"),s=require("goober");const r=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;var i;exports.ActionType=void 0,(i=exports.ActionType||(exports.ActionType={}))[i.ADD_TOAST=0]="ADD_TOAST",i[i.UPDATE_TOAST=1]="UPDATE_TOAST",i[i.UPSERT_TOAST=2]="UPSERT_TOAST",i[i.DISMISS_TOAST=3]="DISMISS_TOAST",i[i.REMOVE_TOAST=4]="REMOVE_TOAST",i[i.START_PAUSE=5]="START_PAUSE",i[i.END_PAUSE=6]="END_PAUSE";const[n,a]=e.createStore({toasts:[],pausedAt:void 0}),c=new Map,l=(t,e)=>{if(c.has(t))return;const o=setTimeout((()=>{c.delete(t),p({type:exports.ActionType.REMOVE_TOAST,toastId:t})}),e);c.set(t,o)},p=t=>{switch(t.type){case exports.ActionType.ADD_TOAST:a("toasts",(e=>{const o=e;return[t.toast,...o]}));break;case exports.ActionType.DISMISS_TOAST:const{toastId:o}=t,s=n.toasts;if(o){const t=s.find((t=>t.id===o));t&&l(o,t.unmountDelay)}else s.forEach((t=>{l(t.id,t.unmountDelay)}));a("toasts",(t=>t.id===o),e.produce((t=>t.visible=!1)));break;case exports.ActionType.REMOVE_TOAST:if(!t.toastId){a("toasts",[]);break}a("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case exports.ActionType.UPDATE_TOAST:t.toast.id&&(t=>{const e=c.get(t);c.delete(t),e&&clearTimeout(e)})(t.toast.id),a("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case exports.ActionType.UPSERT_TOAST:n.toasts.find((e=>e.id===t.toast.id))?p({type:exports.ActionType.UPDATE_TOAST,toast:t.toast}):p({type:exports.ActionType.ADD_TOAST,toast:t.toast});break;case exports.ActionType.START_PAUSE:a("pausedAt",Date.now());break;case exports.ActionType.END_PAUSE:const r=t.time-(n.pausedAt||0);a(e.produce((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=r}))})))}},d={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},y={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},u={position:"top-right",toastOptions:y,gutter:8,containerStyle:{},containerClassName:""},m={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},f=(()=>{let t=0;return()=>String(++t)})(),v=(t,e)=>(t.position||e).includes("top")?1:-1,T={display:"flex","align-items":"center",background:"white",color:"#363636","box-shadow":"0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)","max-width":"350px","pointer-events":"auto",padding:"8px 10px","border-radius":"4px","line-height":"1.3","will-change":"transform"},g={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},A={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},_=s.keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`,h=s.keyframes`75%,100%{transform: scale(2.25);opacity:0;}`,S=s.keyframes`to{stroke-dashoffset: 0;}`,x=s.keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`,$=s.keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`,[b,P]=t.createSignal(u),E=t=>(e,o={})=>{const s=n.toasts.find((t=>t.id===o.id)),r=((t,e="blank",o)=>({...y,...b().toastOptions,...o,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||f(),style:{...y.style,...b().toastOptions?.style,...o.style},duration:o.duration||b().toastOptions?.duration||d[e],position:o.position||b().toastOptions?.position||b().position||y.position}))(e,t,{...s,duration:void 0,...o});return p({type:exports.ActionType.UPSERT_TOAST,toast:r}),r.id},k=(t,e)=>E("blank")(t,e);k.error=E("error"),k.success=E("success"),k.loading=E("loading"),k.custom=E("custom"),k.dismiss=t=>{p({type:exports.ActionType.DISMISS_TOAST,toastId:t})},k.promise=(t,e,o)=>{const s=k.loading(e.loading,{...o});return t.then((t=>(k.success(r(e.success,t),{id:s,...o}),t))).catch((t=>{k.error(r(e.error,t),{id:s,...o})})),t},k.remove=t=>{p({type:exports.ActionType.REMOVE_TOAST,toastId:t})};const w=o.template("<div></div>",2),O=o.template("<div></div>",2),D=o.template("<div><div></div></div>",4),C=e=>{const[i,n]=t.createSignal("");return t.createEffect((()=>{var t;e.toast.visible?n(`${s.keyframes((t=v(e.toast,e.position),`\n0% {transform: translate3d(0,${-200*t}%,0) scale(.6); opacity:.5;}\n100% {transform: translate3d(0,0,0) scale(1); opacity:1;}\n`))} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`):n(`${s.keyframes((t=>`\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,${-150*t}%,-1px) scale(.4); opacity:0;}\n`)(v(e.toast,e.position)))}  0.4s forwards cubic-bezier(.06,.71,.55,1)`)})),(()=>{const s=D.cloneNode(!0),n=s.firstChild;return o.insert(s,o.createComponent(t.Switch,{get children(){return[o.createComponent(t.Match,{get when(){return e.toast.icon},get children(){const t=O.cloneNode(!0);return o.insert(t,(()=>e.toast.icon)),o.effect((e=>o.style(t,A,e))),t}}),o.createComponent(t.Match,{get when(){return"loading"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(B,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,A,e))),t}}),o.createComponent(t.Match,{get when(){return"success"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(U,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,A,e))),t}}),o.createComponent(t.Match,{get when(){return"error"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(z,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,A,e))),t}})]}}),n),o.spread(n,(()=>e.toast.ariaProps),!1,!0),o.insert(n,(()=>r(e.toast.message,e.toast))),o.effect((t=>{const r=e.toast.className,a={...T,animation:i(),...e.toast.style},c=g;return r!==t._v$&&o.className(s,t._v$=r),t._v$2=o.style(s,a,t._v$2),t._v$3=o.style(n,c,t._v$3),t}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),s})()},N=o.template("<div></div>",2),M=s.css`z-index: 9999;> * { pointer-events: auto;}`,I=e=>{const s=()=>{const t=e.toast.position||y.position,o=((t,e)=>{const{toasts:o}=n,s=b().gutter||u.gutter||8,r=o.filter((t=>(t.position||e)===e&&t.height)),i=r.findIndex((e=>e.id===t.id)),a=r.filter(((t,e)=>e<i&&t.visible)).length;return r.slice(0,a).reduce(((t,e)=>t+s+(e.height||0)),0)})(e.toast,t),s=((t,e)=>{const o=t.includes("top");return{left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${e*(o?1:-1)}px)`,...o?{top:0}:{bottom:0},...t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{}}})(t,o);return s},[i,a]=t.createSignal(s());let c;return t.createEffect((()=>{const t=s();a(t)})),t.onMount((()=>{c&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&p({type:exports.ActionType.UPDATE_TOAST,toast:{id:e.id,height:o.height}})})(c,e.toast)})),(()=>{const t=N.cloneNode(!0);t.addEventListener("mouseleave",(()=>p({type:exports.ActionType.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>p({type:exports.ActionType.START_PAUSE,time:Date.now()})));return"function"==typeof c?c(t):c=t,o.insert(t,(()=>{const t=o.memo((()=>"custom"===e.toast.type),!0);return()=>t()?r(e.toast.message,e.toast):o.createComponent(C,{get toast(){return e.toast},get position(){return e.toast.position||y.position}})})()),o.effect((s=>{const r=i(),n=e.toast.visible?M:"";return s._v$=o.style(t,r,s._v$),n!==s._v$2&&o.className(t,s._v$2=n),s}),{_v$:void 0,_v$2:void 0}),t})()},F=o.template('<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7"></path></svg>',8),U=t=>{const e=`${_} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,s=`${h} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,r=`${S} 0.2s ease-out forwards`;return(()=>{const i=F.cloneNode(!0),n=i.firstChild,a=n.nextSibling,c=a.nextSibling;return i.style.setProperty("overflow","visible"),n.style.setProperty("animation",e),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","100ms"),n.style.setProperty("opacity","0"),a.style.setProperty("animation",s),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","250ms"),c.style.setProperty("animation",r),c.style.setProperty("stroke-dasharray","22"),c.style.setProperty("stroke-dashoffset","22"),c.style.setProperty("animation-delay","250ms"),o.effect((e=>{const s=t.primary||"#34C759",r=t.primary||"#34C759",i=t.secondary||"#FCFCFC";return s!==e._v$&&o.setAttribute(n,"fill",e._v$=s),r!==e._v$2&&o.setAttribute(a,"fill",e._v$2=r),i!==e._v$3&&o.setAttribute(c,"stroke",e._v$3=i),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),i})()},R=o.template('<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" d="M16,7l0,9"></path><circle cx="16" cy="16" r="2.5"></circle></svg>',10),z=t=>{const e=`${_} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,s=`${h} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,r=`${S} 0.1s ease-in forwards`,i=`${x} 0.2s ease-out forwards`;return(()=>{const n=R.cloneNode(!0),a=n.firstChild,c=a.nextSibling,l=c.nextSibling,p=l.nextSibling;return n.style.setProperty("overflow","visible"),a.style.setProperty("animation",e),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","100ms"),a.style.setProperty("opacity","0"),c.style.setProperty("animation",s),c.style.setProperty("transform-origin","50% 50%"),c.style.setProperty("animation-delay","320ms"),l.style.setProperty("animation",r),l.style.setProperty("stroke-dasharray","9"),l.style.setProperty("stroke-dashoffset","9"),l.style.setProperty("animation-delay","200ms"),p.style.setProperty("animation",i),p.style.setProperty("animation-delay","320ms"),p.style.setProperty("opacity","0"),o.effect((e=>{const s=t.primary||"#FF3B30",r=t.primary||"#FF3B30",i=t.secondary||"#FFFFFF",n=t.secondary||"#FFFFFF";return s!==e._v$&&o.setAttribute(a,"fill",e._v$=s),r!==e._v$2&&o.setAttribute(c,"fill",e._v$2=r),i!==e._v$3&&o.setAttribute(l,"stroke",e._v$3=i),n!==e._v$4&&o.setAttribute(p,"fill",e._v$4=n),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),n})()},j=o.template('<svg viewBox="0 0 32 32"><path fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c1.5,1.8,2.5,4,2.5,6.6c0,5.5-4.5,10-10,10S6,21.6,6,16S10.5,6,16,6z"></path><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c0.6,0.7,1.1,1.4,1.5,2.2"></path></svg>',6),B=t=>{const e=`${$} 0.75s linear infinite`;return(()=>{const s=j.cloneNode(!0),r=s.firstChild,i=r.nextSibling;return s.style.setProperty("overflow","visible"),i.style.setProperty("animation",e),i.style.setProperty("transform-origin","50% 50%"),o.effect((e=>{const s=t.primary||"#E5E7EB",n=t.secondary||"#4b5563";return s!==e._v$&&o.setAttribute(r,"stroke",e._v$=s),n!==e._v$2&&o.setAttribute(i,"stroke",e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),s})()};var V=k;exports.Toaster=e=>(t.createEffect((()=>{(t=>{P((e=>({containerClassName:t.containerClassName??e.containerClassName,containerStyle:t.containerStyle??e.containerStyle,gutter:t.gutter??e.gutter,position:t.position??e.position,toastOptions:{...t.toastOptions}})))})(e)})),t.createEffect((()=>{const e=(()=>{const{pausedAt:t,toasts:e}=n;if(t)return;const o=Date.now(),s=e.map((t=>{if(t.duration===1/0)return;const e=(t.duration||0)+t.pauseDuration-(o-t.createdAt);if(!(e<=0))return setTimeout((()=>{p({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&p({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}));return s})();t.onCleanup((()=>{e&&e.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const s=w.cloneNode(!0);return o.insert(s,o.createComponent(t.For,{get each(){return n.toasts},children:t=>o.createComponent(I,{toast:t})})),o.effect((t=>{const r={...m,...e.containerStyle},i=e.containerClassName;return t._v$=o.style(s,r,t._v$),i!==t._v$2&&o.className(s,t._v$2=i),t}),{_v$:void 0,_v$2:void 0}),s})()),exports.default=V,exports.resolveValue=r,exports.toast=k;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("solid-js"),e=require("solid-js/store"),o=require("solid-js/web"),s=require("goober");const r=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;var i;exports.ActionType=void 0,(i=exports.ActionType||(exports.ActionType={}))[i.ADD_TOAST=0]="ADD_TOAST",i[i.UPDATE_TOAST=1]="UPDATE_TOAST",i[i.UPSERT_TOAST=2]="UPSERT_TOAST",i[i.DISMISS_TOAST=3]="DISMISS_TOAST",i[i.REMOVE_TOAST=4]="REMOVE_TOAST",i[i.START_PAUSE=5]="START_PAUSE",i[i.END_PAUSE=6]="END_PAUSE";const[n,a]=e.createStore({toasts:[],pausedAt:void 0}),c=new Map,l=(t,e)=>{if(c.has(t))return;const o=setTimeout((()=>{c.delete(t),p({type:exports.ActionType.REMOVE_TOAST,toastId:t})}),e);c.set(t,o)},p=t=>{switch(t.type){case exports.ActionType.ADD_TOAST:a("toasts",(e=>{const o=e;return[t.toast,...o]}));break;case exports.ActionType.DISMISS_TOAST:const{toastId:o}=t,s=n.toasts;if(o){const t=s.find((t=>t.id===o));t&&l(o,t.unmountDelay)}else s.forEach((t=>{l(t.id,t.unmountDelay)}));a("toasts",(t=>t.id===o),e.produce((t=>t.visible=!1)));break;case exports.ActionType.REMOVE_TOAST:if(!t.toastId){a("toasts",[]);break}a("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case exports.ActionType.UPDATE_TOAST:t.toast.id&&(t=>{const e=c.get(t);c.delete(t),e&&clearTimeout(e)})(t.toast.id),a("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case exports.ActionType.UPSERT_TOAST:n.toasts.find((e=>e.id===t.toast.id))?p({type:exports.ActionType.UPDATE_TOAST,toast:t.toast}):p({type:exports.ActionType.ADD_TOAST,toast:t.toast});break;case exports.ActionType.START_PAUSE:a("pausedAt",Date.now());break;case exports.ActionType.END_PAUSE:const r=t.time-(n.pausedAt||0);a(e.produce((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=r}))})))}},d={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},y={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},u={position:"top-right",toastOptions:y,gutter:8,containerStyle:{},containerClassName:""},m={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},f=(()=>{let t=0;return()=>String(++t)})(),v=(t,e)=>(t.position||e).includes("top")?1:-1,T={display:"flex","align-items":"center",background:"white",color:"#363636","box-shadow":"0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)","max-width":"350px","pointer-events":"auto",padding:"8px 10px","border-radius":"4px","line-height":"1.3","will-change":"transform"},g={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},A={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},_=s.keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`,h=s.keyframes`75%,100%{transform: scale(2.25);opacity:0;}`,S=s.keyframes`to{stroke-dashoffset: 0;}`,x=s.keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`,$=s.keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`,[b,P]=t.createSignal(u),E=t=>(e,o={})=>{const s=n.toasts.find((t=>t.id===o.id)),r=((t,e="blank",o)=>({...y,...b().toastOptions,...o,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||f(),style:{...y.style,...b().toastOptions?.style,...o.style},duration:o.duration||b().toastOptions?.duration||d[e],position:o.position||b().toastOptions?.position||b().position||y.position}))(e,t,{...s,duration:void 0,...o});return p({type:exports.ActionType.UPSERT_TOAST,toast:r}),r.id},k=(t,e)=>E("blank")(t,e);k.error=E("error"),k.success=E("success"),k.loading=E("loading"),k.custom=E("custom"),k.dismiss=t=>{p({type:exports.ActionType.DISMISS_TOAST,toastId:t})},k.promise=(t,e,o)=>{const s=k.loading(e.loading,{...o});return t.then((t=>(k.success(r(e.success,t),{id:s,...o}),t))).catch((t=>{k.error(r(e.error,t),{id:s,...o})})),t},k.remove=t=>{p({type:exports.ActionType.REMOVE_TOAST,toastId:t})};const w=o.template("<div></div>",2),O=o.template("<div></div>",2),D=o.template("<div><div></div></div>",4),C=e=>{const[i,n]=t.createSignal("");return t.createEffect((()=>{var t;e.toast.visible?n(`${s.keyframes((t=v(e.toast,e.position),`\n0% {transform: translate3d(0,${-200*t}%,0) scale(.6); opacity:.5;}\n100% {transform: translate3d(0,0,0) scale(1); opacity:1;}\n`))} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`):n(`${s.keyframes((t=>`\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,${-150*t}%,-1px) scale(.4); opacity:0;}\n`)(v(e.toast,e.position)))}  0.4s forwards cubic-bezier(.06,.71,.55,1)`)})),(()=>{const s=D.cloneNode(!0),n=s.firstChild;return o.insert(s,o.createComponent(t.Switch,{get children(){return[o.createComponent(t.Match,{get when(){return e.toast.icon},get children(){const t=O.cloneNode(!0);return o.insert(t,(()=>e.toast.icon)),o.effect((e=>o.style(t,A,e))),t}}),o.createComponent(t.Match,{get when(){return"loading"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(B,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,A,e))),t}}),o.createComponent(t.Match,{get when(){return"success"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(U,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,A,e))),t}}),o.createComponent(t.Match,{get when(){return"error"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(z,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,A,e))),t}})]}}),n),o.spread(n,(()=>e.toast.ariaProps),!1,!0),o.insert(n,(()=>r(e.toast.message,e.toast))),o.effect((t=>{const r=e.toast.className,a={...T,animation:i(),...e.toast.style},c=g;return r!==t._v$&&o.className(s,t._v$=r),t._v$2=o.style(s,a,t._v$2),t._v$3=o.style(n,c,t._v$3),t}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),s})()},N=o.template("<div></div>",2),M=s.css`z-index: 9999;> * { pointer-events: auto;}`,I=e=>{const s=()=>{const t=e.toast.position||y.position,o=((t,e)=>{const{toasts:o}=n,s=b().gutter||u.gutter||8,r=o.filter((t=>(t.position||e)===e&&t.height)),i=r.findIndex((e=>e.id===t.id)),a=r.filter(((t,e)=>e<i&&t.visible)).length;return r.slice(0,a).reduce(((t,e)=>t+s+(e.height||0)),0)})(e.toast,t),s=((t,e)=>{const o=t.includes("top");return{left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${e*(o?1:-1)}px)`,...o?{top:0}:{bottom:0},...t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{}}})(t,o);return s},[i,a]=t.createSignal(s());let c;return t.createEffect((()=>{const t=s();a(t)})),t.onMount((()=>{c&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&p({type:exports.ActionType.UPDATE_TOAST,toast:{id:e.id,height:o.height}})})(c,e.toast)})),(()=>{const t=N.cloneNode(!0);t.addEventListener("mouseleave",(()=>p({type:exports.ActionType.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>p({type:exports.ActionType.START_PAUSE,time:Date.now()})));return"function"==typeof c?c(t):c=t,o.insert(t,(()=>{const t=o.memo((()=>"custom"===e.toast.type),!0);return()=>t()?r(e.toast.message,e.toast):o.createComponent(C,{get toast(){return e.toast},get position(){return e.toast.position||y.position}})})()),o.effect((s=>{const r=i(),n=e.toast.visible?M:"";return s._v$=o.style(t,r,s._v$),n!==s._v$2&&o.className(t,s._v$2=n),s}),{_v$:void 0,_v$2:void 0}),t})()},F=o.template('<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7"></path></svg>',8),U=t=>{const e=`${_} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,s=`${h} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,r=`${S} 0.2s ease-out forwards`;return(()=>{const i=F.cloneNode(!0),n=i.firstChild,a=n.nextSibling,c=a.nextSibling;return i.style.setProperty("overflow","visible"),n.style.setProperty("animation",e),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","100ms"),n.style.setProperty("opacity","0"),a.style.setProperty("animation",s),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","250ms"),c.style.setProperty("animation",r),c.style.setProperty("stroke-dasharray","22"),c.style.setProperty("stroke-dashoffset","22"),c.style.setProperty("animation-delay","250ms"),o.effect((e=>{const s=t.primary||"#34C759",r=t.primary||"#34C759",i=t.secondary||"#FCFCFC";return s!==e._v$&&o.setAttribute(n,"fill",e._v$=s),r!==e._v$2&&o.setAttribute(a,"fill",e._v$2=r),i!==e._v$3&&o.setAttribute(c,"stroke",e._v$3=i),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),i})()},R=o.template('<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" d="M16,7l0,9"></path><circle cx="16" cy="16" r="2.5"></circle></svg>',10),z=t=>{const e=`${_} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,s=`${h} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,r=`${S} 0.1s ease-in forwards`,i=`${x} 0.2s ease-out forwards`;return(()=>{const n=R.cloneNode(!0),a=n.firstChild,c=a.nextSibling,l=c.nextSibling,p=l.nextSibling;return n.style.setProperty("overflow","visible"),a.style.setProperty("animation",e),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","100ms"),a.style.setProperty("opacity","0"),c.style.setProperty("animation",s),c.style.setProperty("transform-origin","50% 50%"),c.style.setProperty("animation-delay","320ms"),l.style.setProperty("animation",r),l.style.setProperty("stroke-dasharray","9"),l.style.setProperty("stroke-dashoffset","9"),l.style.setProperty("animation-delay","200ms"),p.style.setProperty("animation",i),p.style.setProperty("animation-delay","320ms"),p.style.setProperty("opacity","0"),o.effect((e=>{const s=t.primary||"#FF3B30",r=t.primary||"#FF3B30",i=t.secondary||"#FFFFFF",n=t.secondary||"#FFFFFF";return s!==e._v$&&o.setAttribute(a,"fill",e._v$=s),r!==e._v$2&&o.setAttribute(c,"fill",e._v$2=r),i!==e._v$3&&o.setAttribute(l,"stroke",e._v$3=i),n!==e._v$4&&o.setAttribute(p,"fill",e._v$4=n),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),n})()},j=o.template('<svg viewBox="0 0 32 32"><path fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c1.5,1.8,2.5,4,2.5,6.6c0,5.5-4.5,10-10,10S6,21.6,6,16S10.5,6,16,6z"></path><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c0.6,0.7,1.1,1.4,1.5,2.2"></path></svg>',6),B=t=>{const e=`${$} 0.75s linear infinite`;return(()=>{const s=j.cloneNode(!0),r=s.firstChild,i=r.nextSibling;return s.style.setProperty("overflow","visible"),i.style.setProperty("animation",e),i.style.setProperty("transform-origin","50% 50%"),o.effect((e=>{const s=t.primary||"#E5E7EB",n=t.secondary||"#4b5563";return s!==e._v$&&o.setAttribute(r,"stroke",e._v$=s),n!==e._v$2&&o.setAttribute(i,"stroke",e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),s})()};var V=k;exports.Toaster=e=>(t.createEffect((()=>{(t=>{P((e=>({containerClassName:t.containerClassName??e.containerClassName,containerStyle:t.containerStyle??e.containerStyle,gutter:t.gutter??e.gutter,position:t.position??e.position,toastOptions:{...t.toastOptions}})))})(e)})),t.createEffect((()=>{const e=(()=>{const{pausedAt:t,toasts:e}=n;if(t)return;const o=Date.now(),s=e.map((t=>{if(t.duration===1/0)return;const e=(t.duration||0)+t.pauseDuration-(o-t.createdAt);if(!(e<=0))return setTimeout((()=>{p({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&p({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}));return s})();t.onCleanup((()=>{e&&e.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const s=w.cloneNode(!0);return o.insert(s,o.createComponent(t.For,{get each(){return n.toasts},children:t=>o.createComponent(I,{toast:t})})),o.effect((t=>{const r={...m,...e.containerStyle},i=e.containerClassName;return t._v$=o.style(s,r,t._v$),i!==t._v$2&&o.className(s,t._v$2=i),t}),{_v$:void 0,_v$2:void 0}),s})()),exports.default=V,exports.resolveValue=r,exports.toast=k;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "solid-toast",
-  "version": "0.1.7",
+  "version": "0.1.8-alpha.0",
   "description": "Customizable Toast Notifications for SolidJS",
@@ -5,0 +5,0 @@ "source": "./src/index.tsx",

README.md

@@ -5,3 +5,5 @@ <a href="https://github.com/ardeora/solid-toast"><img alt="Solid Toast header image showing a cute toaster with a toast popping out" src="https://github.com/ardeora/solid-toast/raw/main/assets/header.png"/></a>
     <img src="https://badgen.net/npm/v/solid-toast" alt="NPM Version" />
-    <img src="https://badgen.net/bundlephobia/minzip/solid-toast" alt="minzipped size"/>
+    <a href="https://bundlejs.com/?q=skypack%3Asolid-toast&treeshake=%5B%7B+Toaster%2Ctoast+%7D%5D&config=%7B%22analysis%22%3Atrue%2C%22esbuild%22%3A%7B%22format%22%3A%22cjs%22%2C%22external%22%3A%5B%22solid-js%22%5D%7D%7D">
+    <img src="https://img.shields.io/badge/Bundle%20Size-5kb-brightgreen" alt="minzipped size"/>
+    </a>
     <img src="https://github.com/ardeora/solid-toast/workflows/build/badge.svg" alt="Build Status" />
@@ -25,2 +27,3 @@ </a>
 - **Accessible**
+- **SSR Support**
 
@@ -27,0 +30,0 @@ ## Installation

No alert changes

Improved metrics

Total package byte prevSize

152115

increased by0.19%

Number of lines in readme file

235

increased by1.29%

No dependency changes