toast-anchor 1.0.0
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/dist/index.js +44 -0
- package/dist/index.mjs +44 -0
- package/package.json +37 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
var T=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var Y=Object.prototype.hasOwnProperty;var B=(i,t)=>{for(var e in t)T(i,e,{get:t[e],enumerable:!0})},O=(i,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of S(t))!Y.call(i,n)&&n!==e&&T(i,n,{get:()=>t[n],enumerable:!(o=j(t,n))||o.enumerable});return i};var P=i=>O(T({},"__esModule",{value:!0}),i);var R={};B(R,{ICONS:()=>w,anchoredConfirm:()=>M,anchoredToast:()=>z,configure:()=>q,createToast:()=>h,default:()=>V,dismissToast:()=>b,modalConfirm:()=>A,promiseToast:()=>_,toast:()=>c,useToast:()=>F});module.exports=P(R);var y=null;function L(i="success"){if(!(typeof window>"u"))try{y||(y=new(window.AudioContext||window.webkitAudioContext)),y.state==="suspended"&&y.resume();let t=y.createOscillator(),e=y.createGain(),o={success:{wave:"sine",sf:600,ef:900,gs:.15,ge:.01,dur:.15},error:{wave:"sawtooth",sf:400,ef:200,gs:.15,ge:.01,dur:.15},warning:{wave:"triangle",sf:600,ef:380,gs:.12,ge:.01,dur:.13},info:{wave:"sine",sf:800,ef:300,gs:.15,ge:.01,dur:.1},pop:{wave:"sine",sf:700,ef:350,gs:.12,ge:.01,dur:.1}},n=o[i]||o.pop,a=y.currentTime;t.type=n.wave,t.frequency.setValueAtTime(n.sf,a),t.frequency.exponentialRampToValueAtTime(n.ef,a+n.dur),e.gain.setValueAtTime(n.gs,a),e.gain.exponentialRampToValueAtTime(n.ge,a+n.dur),t.connect(e),e.connect(y.destination),t.start(),t.stop(a+n.dur)}catch{}}var p={position:"bottom-right",duration:4e3,sound:!0,dismissOnClick:!1,showProgress:!1,maxToasts:5,theme:{success:{bg:"#10b981",light:"#d1fae5"},error:{bg:"#ef4444",light:"#fee2e2"},warning:{bg:"#f59e0b",light:"#fef3c7"},info:{bg:"#3b82f6",light:"#dbeafe"}}},w={success:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>',error:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>',warning:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>',info:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',loading:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation:__toast_spin 1s linear infinite"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>'};if(typeof document<"u"&&!document.getElementById("__toast_styles")){let i=document.createElement("style");i.id="__toast_styles",i.textContent="@keyframes __toast_spin{to{transform:rotate(360deg)}}",document.head.appendChild(i)}var C={"top-left":"top:1.5rem;left:1.5rem;flex-direction:column","top-center":"top:1.5rem;left:50%;transform:translateX(-50%);flex-direction:column","top-right":"top:1.5rem;right:1.5rem;flex-direction:column","bottom-left":"bottom:1.5rem;left:1.5rem;flex-direction:column-reverse","bottom-center":"bottom:1.5rem;left:50%;transform:translateX(-50%);flex-direction:column-reverse","bottom-right":"bottom:1.5rem;right:1.5rem;flex-direction:column-reverse"};function H(i){if(typeof document>"u")return null;let t=`__toast_c_${i.replace(/-/g,"_")}`,e=document.getElementById(t);return e||(e=document.createElement("div"),e.id=t,e.setAttribute("style",`position:fixed;z-index:9999;display:flex;gap:10px;pointer-events:none;${C[i]||C["bottom-right"]}`),document.body.appendChild(e)),e}var E=0,$=new Map;function b(i){let t=$.get(i);if(!t)return;clearTimeout(t.timer);let e=t.el;e.style.opacity="0",e.style.transform="scale(0.9) translateY(6px)";let o=e.offsetHeight;e.style.maxHeight=o+"px",setTimeout(()=>{e.style.transition="all 0.32s ease-out",e.style.maxHeight="0",e.style.padding="0 14px",e.style.overflow="hidden"},60),setTimeout(()=>{e.remove(),$.delete(i)},420)}function h(i,t={}){var x,l;if(typeof document>"u")return()=>{};let e={type:"success",position:p.position,duration:p.duration,sound:p.sound,dismissOnClick:p.dismissOnClick,showProgress:p.showProgress,description:null,icon:null,action:null,id:null,...t},o=e.type,n={...p.theme[o]||p.theme.success},a=e.icon||w[o]||w.success,s=e.id||`__toast_${++E}`;e.sound&&L(o);let u=H(e.position);if(!u)return()=>{};$.size>=p.maxToasts&&b($.keys().next().value);let r=document.createElement("div");r.id=s,r.setAttribute("style",["pointer-events:auto","position:relative","overflow:hidden","display:flex","align-items:flex-start","gap:12px","width:316px","background:white","border:1px solid #f1f5f9","padding:13px 14px","border-radius:14px","box-shadow:0 4px 24px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.04)","transition:all 0.38s cubic-bezier(0.34,1.56,0.64,1)","opacity:0","transform:scale(0.9) translateY(10px)",`cursor:${e.dismissOnClick?"pointer":"default"}`].join(";")),r.innerHTML=`
|
|
2
|
+
<div style="display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex-shrink:0;background:${n.light};color:${n.bg}">
|
|
3
|
+
<div style="width:16px;height:16px;display:flex">${a}</div>
|
|
4
|
+
</div>
|
|
5
|
+
<div style="flex:1;min-width:0;padding-top:2px">
|
|
6
|
+
<p style="font-size:13.5px;font-weight:600;color:#1e293b;line-height:1.4;margin:0">${i}</p>
|
|
7
|
+
${e.description?`<p style="font-size:12px;color:#64748b;margin:3px 0 0;line-height:1.5">${e.description}</p>`:""}
|
|
8
|
+
${e.action?`<button data-toast-action style="margin-top:7px;font-size:12px;font-weight:700;color:${n.bg};background:none;border:none;cursor:pointer;padding:0;display:block">${e.action.label}</button>`:""}
|
|
9
|
+
</div>
|
|
10
|
+
<button data-toast-close style="flex-shrink:0;background:none;border:none;cursor:pointer;color:#cbd5e1;padding:1px;margin-top:1px;line-height:0;transition:color 0.15s" title="Dismiss">
|
|
11
|
+
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
12
|
+
</button>
|
|
13
|
+
${e.showProgress&&e.duration>0?`<div data-toast-bar style="position:absolute;bottom:0;left:0;height:3px;border-radius:0 0 14px 14px;background:${n.bg};width:100%;transition:width ${e.duration}ms linear"></div>`:""}
|
|
14
|
+
`,u.appendChild(r);let f=()=>b(s),d=null;return requestAnimationFrame(()=>requestAnimationFrame(()=>{if(r.style.opacity="1",r.style.transform="scale(1) translateY(0)",e.showProgress&&e.duration>0){let m=r.querySelector("[data-toast-bar]");m&&(m.style.width="0%")}})),e.duration>0&&(d=setTimeout(f,e.duration)),r.addEventListener("mouseenter",()=>{d&&clearTimeout(d)}),r.addEventListener("mouseleave",()=>{e.duration>0&&(d=setTimeout(f,Math.min(e.duration,1500)))}),(x=r.querySelector("[data-toast-close]"))==null||x.addEventListener("click",m=>{m.stopPropagation(),f()}),e.dismissOnClick&&r.addEventListener("click",f),(l=r.querySelector("[data-toast-action]"))==null||l.addEventListener("click",m=>{var g,v;m.stopPropagation(),(v=(g=e.action)==null?void 0:g.onClick)==null||v.call(g),f()}),$.set(s,{el:r,timer:d}),f}function _(i,t={},e={}){let{loading:o="Loading\u2026",success:n="Done!",error:a="Something went wrong"}=t,s=`__toast_p${++E}`;return h(o,{type:"info",duration:0,icon:w.loading,id:s,...e}),Promise.resolve(i).then(u=>{b(s);let r=typeof n=="function"?n(u):n;h(r,{type:"success",...e})}).catch(u=>{b(s);let r=typeof a=="function"?a(u):a;h(r,{type:"error",...e})}),()=>b(s)}function z(i,t,e={}){if(typeof document>"u"||!t)return()=>{};let o={type:"success",duration:2500,sound:!0,icon:null,...e};o.sound&&L(o.type);let n=p.theme[o.type]||p.theme.success,a=o.icon||w[o.type],s=document.createElement("div");s.setAttribute("style",["position:absolute","z-index:9998","padding:8px 14px","background:#0f172a","color:white","font-size:13px","font-weight:600","border-radius:10px","box-shadow:0 8px 24px rgba(0,0,0,0.2)","pointer-events:none","white-space:nowrap","transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)","opacity:0","transform:scale(0.85) translateY(8px)"].join(";")),s.innerHTML=`
|
|
15
|
+
<div style="display:flex;align-items:center;gap:7px">
|
|
16
|
+
<div style="width:15px;height:15px;display:flex;color:${n.bg}">${a}</div>
|
|
17
|
+
<span>${i}</span>
|
|
18
|
+
</div>
|
|
19
|
+
<div style="position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:#0f172a"></div>
|
|
20
|
+
`,document.body.appendChild(s);let{top:u,left:r,width:f}=t.getBoundingClientRect(),{height:d,width:x}=s.getBoundingClientRect();s.style.top=`${u+window.scrollY-d-13}px`,s.style.left=`${r+window.scrollX+f/2-x/2}px`,requestAnimationFrame(()=>requestAnimationFrame(()=>{s.style.opacity="1",s.style.transform="scale(1) translateY(0)"}));let l=()=>{s.style.opacity="0",s.style.transform="scale(0.9) translateY(4px)",setTimeout(()=>s.remove(),300)};return o.duration>0&&setTimeout(l,o.duration),l}function M(i,t,e,o,n={}){if(typeof document>"u"||!t)return;let a={confirmLabel:"Yes",cancelLabel:"No",sound:!0,...n};a.sound&&L("warning");let s=document.createElement("div");s.setAttribute("style",["position:absolute","z-index:9998","padding:12px 14px","background:#0f172a","color:white","font-size:13px","font-weight:600","border-radius:12px","box-shadow:0 8px 28px rgba(0,0,0,0.22)","pointer-events:auto","min-width:160px","transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)","opacity:0","transform:scale(0.85) translateY(8px)"].join(";")),s.innerHTML=`
|
|
21
|
+
<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#fca5a5">
|
|
22
|
+
<div style="width:15px;height:15px;flex-shrink:0">${w.warning}</div>
|
|
23
|
+
<span style="font-size:13px;color:#f8fafc">${i}</span>
|
|
24
|
+
</div>
|
|
25
|
+
<div style="display:flex;gap:7px">
|
|
26
|
+
<button data-cancel style="flex:1;padding:6px 0;background:#1e293b;border:1px solid #334155;color:#94a3b8;border-radius:8px;cursor:pointer;font-weight:700;font-size:12px;transition:all 0.15s">${a.cancelLabel}</button>
|
|
27
|
+
<button data-confirm style="flex:1;padding:6px 0;background:#ef4444;border:none;color:white;border-radius:8px;cursor:pointer;font-weight:700;font-size:12px;transition:all 0.15s">${a.confirmLabel}</button>
|
|
28
|
+
</div>
|
|
29
|
+
<div style="position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:#0f172a"></div>
|
|
30
|
+
`,document.body.appendChild(s);let{top:u,left:r,width:f}=t.getBoundingClientRect(),{height:d,width:x}=s.getBoundingClientRect();s.style.top=`${u+window.scrollY-d-13}px`,s.style.left=`${r+window.scrollX+f/2-x/2}px`,requestAnimationFrame(()=>requestAnimationFrame(()=>{s.style.opacity="1",s.style.transform="scale(1) translateY(0)"}));let l=()=>{s.style.opacity="0",s.style.transform="scale(0.9) translateY(4px)",setTimeout(()=>s.remove(),280)};s.querySelector("[data-confirm]").onclick=()=>{l(),e==null||e()},s.querySelector("[data-cancel]").onclick=()=>{l(),o==null||o()}}function A(i,t,e={}){return new Promise(o=>{if(typeof document>"u")return o(!1);let n={confirmLabel:"Confirm",cancelLabel:"Cancel",confirmVariant:"danger",icon:null,sound:!0,...e};n.sound&&L("warning");let a=n.confirmVariant==="danger"?"#ef4444":"#3b82f6",s=n.confirmVariant==="danger"?"#dc2626":"#2563eb",u=n.icon||w.warning,r=n.confirmVariant==="danger"?"#fee2e2":"#dbeafe",f=n.confirmVariant==="danger"?"#ef4444":"#3b82f6",d=document.createElement("div");d.setAttribute("style",["position:fixed","inset:0","z-index:99999","display:flex","align-items:center","justify-content:center","padding:16px","background:rgba(15,23,42,0.55)","backdrop-filter:blur(5px)","transition:opacity 0.25s ease","opacity:0"].join(";")),d.innerHTML=`
|
|
31
|
+
<div data-modal-box style="width:100%;max-width:420px;background:white;border-radius:20px;box-shadow:0 25px 60px rgba(0,0,0,0.22);overflow:hidden;transition:all 0.32s cubic-bezier(0.34,1.56,0.64,1);transform:scale(0.9) translateY(18px)">
|
|
32
|
+
<div style="padding:24px 24px 20px">
|
|
33
|
+
<div style="width:48px;height:48px;border-radius:50%;background:${r};display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:${f}">
|
|
34
|
+
<div style="width:24px;height:24px">${u}</div>
|
|
35
|
+
</div>
|
|
36
|
+
<h3 style="font-size:17px;font-weight:700;color:#0f172a;margin:0 0 8px;line-height:1.3">${i}</h3>
|
|
37
|
+
<p style="font-size:14px;color:#64748b;margin:0;line-height:1.65">${t}</p>
|
|
38
|
+
</div>
|
|
39
|
+
<div style="background:#f8fafc;padding:14px 24px 18px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid #f1f5f9">
|
|
40
|
+
<button data-modal-cancel style="padding:9px 18px;font-size:13.5px;font-weight:500;color:#475569;background:transparent;border:none;border-radius:10px;cursor:pointer;transition:all 0.15s">${n.cancelLabel}</button>
|
|
41
|
+
<button data-modal-confirm style="padding:9px 22px;font-size:13.5px;font-weight:600;color:white;background:${a};border:none;border-radius:10px;cursor:pointer;box-shadow:0 2px 8px ${a}55;transition:all 0.15s">${n.confirmLabel}</button>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
`,document.body.appendChild(d);let x=d.querySelector("[data-modal-box]"),l=d.querySelector("[data-modal-confirm]"),m=d.querySelector("[data-modal-cancel]");l.addEventListener("mouseenter",()=>{l.style.background=s,l.style.transform="translateY(-1px)"}),l.addEventListener("mouseleave",()=>{l.style.background=a,l.style.transform=""}),m.addEventListener("mouseenter",()=>{m.style.background="#f1f5f9"}),m.addEventListener("mouseleave",()=>{m.style.background="transparent"}),requestAnimationFrame(()=>{d.style.opacity="1",x.style.transform="scale(1) translateY(0)"});let g=k=>{d.style.opacity="0",x.style.transform="scale(0.9) translateY(16px)",setTimeout(()=>{d.remove(),o(k)},280)};m.onclick=()=>g(!1),l.onclick=()=>g(!0),d.addEventListener("click",k=>{k.target===d&&g(!1)});let v=k=>{k.key==="Escape"&&(g(!1),document.removeEventListener("keydown",v)),k.key==="Enter"&&(g(!0),document.removeEventListener("keydown",v))};document.addEventListener("keydown",v)})}function q(i={}){let{theme:t,...e}=i;if(Object.assign(p,e),t)for(let[o,n]of Object.entries(t))p.theme[o]={...p.theme[o],...n}}var c={success:(i,t)=>h(i,{type:"success",...t}),error:(i,t)=>h(i,{type:"error",...t}),warning:(i,t)=>h(i,{type:"warning",...t}),info:(i,t)=>h(i,{type:"info",...t}),notify:h,promise:_,anchored:z,anchoredConfirm:M,modal:A,dismiss:b,dismissAll:()=>[...$.keys()].forEach(b),configure:q,ICONS:w},V=c;function F(i={}){let t=e=>({...i,...e});return{success:(e,o)=>c.success(e,t(o)),error:(e,o)=>c.error(e,t(o)),warning:(e,o)=>c.warning(e,t(o)),info:(e,o)=>c.info(e,t(o)),notify:(e,o)=>c.notify(e,t(o)),promise:(e,o,n)=>c.promise(e,o,t(n)),anchored:(e,o,n)=>c.anchored(e,o,t(n)),anchoredConfirm:(...e)=>c.anchoredConfirm(...e),modal:c.modal,dismiss:c.dismiss,dismissAll:c.dismissAll}}0&&(module.exports={ICONS,anchoredConfirm,anchoredToast,configure,createToast,dismissToast,modalConfirm,promiseToast,toast,useToast});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
var h=null;function L(s="success"){if(!(typeof window>"u"))try{h||(h=new(window.AudioContext||window.webkitAudioContext)),h.state==="suspended"&&h.resume();let t=h.createOscillator(),e=h.createGain(),o={success:{wave:"sine",sf:600,ef:900,gs:.15,ge:.01,dur:.15},error:{wave:"sawtooth",sf:400,ef:200,gs:.15,ge:.01,dur:.15},warning:{wave:"triangle",sf:600,ef:380,gs:.12,ge:.01,dur:.13},info:{wave:"sine",sf:800,ef:300,gs:.15,ge:.01,dur:.1},pop:{wave:"sine",sf:700,ef:350,gs:.12,ge:.01,dur:.1}},n=o[s]||o.pop,a=h.currentTime;t.type=n.wave,t.frequency.setValueAtTime(n.sf,a),t.frequency.exponentialRampToValueAtTime(n.ef,a+n.dur),e.gain.setValueAtTime(n.gs,a),e.gain.exponentialRampToValueAtTime(n.ge,a+n.dur),t.connect(e),e.connect(h.destination),t.start(),t.stop(a+n.dur)}catch{}}var c={position:"bottom-right",duration:4e3,sound:!0,dismissOnClick:!1,showProgress:!1,maxToasts:5,theme:{success:{bg:"#10b981",light:"#d1fae5"},error:{bg:"#ef4444",light:"#fee2e2"},warning:{bg:"#f59e0b",light:"#fef3c7"},info:{bg:"#3b82f6",light:"#dbeafe"}}},w={success:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>',error:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>',warning:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>',info:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',loading:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation:__toast_spin 1s linear infinite"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>'};if(typeof document<"u"&&!document.getElementById("__toast_styles")){let s=document.createElement("style");s.id="__toast_styles",s.textContent="@keyframes __toast_spin{to{transform:rotate(360deg)}}",document.head.appendChild(s)}var T={"top-left":"top:1.5rem;left:1.5rem;flex-direction:column","top-center":"top:1.5rem;left:50%;transform:translateX(-50%);flex-direction:column","top-right":"top:1.5rem;right:1.5rem;flex-direction:column","bottom-left":"bottom:1.5rem;left:1.5rem;flex-direction:column-reverse","bottom-center":"bottom:1.5rem;left:50%;transform:translateX(-50%);flex-direction:column-reverse","bottom-right":"bottom:1.5rem;right:1.5rem;flex-direction:column-reverse"};function E(s){if(typeof document>"u")return null;let t=`__toast_c_${s.replace(/-/g,"_")}`,e=document.getElementById(t);return e||(e=document.createElement("div"),e.id=t,e.setAttribute("style",`position:fixed;z-index:9999;display:flex;gap:10px;pointer-events:none;${T[s]||T["bottom-right"]}`),document.body.appendChild(e)),e}var C=0,$=new Map;function b(s){let t=$.get(s);if(!t)return;clearTimeout(t.timer);let e=t.el;e.style.opacity="0",e.style.transform="scale(0.9) translateY(6px)";let o=e.offsetHeight;e.style.maxHeight=o+"px",setTimeout(()=>{e.style.transition="all 0.32s ease-out",e.style.maxHeight="0",e.style.padding="0 14px",e.style.overflow="hidden"},60),setTimeout(()=>{e.remove(),$.delete(s)},420)}function y(s,t={}){var x,l;if(typeof document>"u")return()=>{};let e={type:"success",position:c.position,duration:c.duration,sound:c.sound,dismissOnClick:c.dismissOnClick,showProgress:c.showProgress,description:null,icon:null,action:null,id:null,...t},o=e.type,n={...c.theme[o]||c.theme.success},a=e.icon||w[o]||w.success,i=e.id||`__toast_${++C}`;e.sound&&L(o);let p=E(e.position);if(!p)return()=>{};$.size>=c.maxToasts&&b($.keys().next().value);let r=document.createElement("div");r.id=i,r.setAttribute("style",["pointer-events:auto","position:relative","overflow:hidden","display:flex","align-items:flex-start","gap:12px","width:316px","background:white","border:1px solid #f1f5f9","padding:13px 14px","border-radius:14px","box-shadow:0 4px 24px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.04)","transition:all 0.38s cubic-bezier(0.34,1.56,0.64,1)","opacity:0","transform:scale(0.9) translateY(10px)",`cursor:${e.dismissOnClick?"pointer":"default"}`].join(";")),r.innerHTML=`
|
|
2
|
+
<div style="display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex-shrink:0;background:${n.light};color:${n.bg}">
|
|
3
|
+
<div style="width:16px;height:16px;display:flex">${a}</div>
|
|
4
|
+
</div>
|
|
5
|
+
<div style="flex:1;min-width:0;padding-top:2px">
|
|
6
|
+
<p style="font-size:13.5px;font-weight:600;color:#1e293b;line-height:1.4;margin:0">${s}</p>
|
|
7
|
+
${e.description?`<p style="font-size:12px;color:#64748b;margin:3px 0 0;line-height:1.5">${e.description}</p>`:""}
|
|
8
|
+
${e.action?`<button data-toast-action style="margin-top:7px;font-size:12px;font-weight:700;color:${n.bg};background:none;border:none;cursor:pointer;padding:0;display:block">${e.action.label}</button>`:""}
|
|
9
|
+
</div>
|
|
10
|
+
<button data-toast-close style="flex-shrink:0;background:none;border:none;cursor:pointer;color:#cbd5e1;padding:1px;margin-top:1px;line-height:0;transition:color 0.15s" title="Dismiss">
|
|
11
|
+
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
12
|
+
</button>
|
|
13
|
+
${e.showProgress&&e.duration>0?`<div data-toast-bar style="position:absolute;bottom:0;left:0;height:3px;border-radius:0 0 14px 14px;background:${n.bg};width:100%;transition:width ${e.duration}ms linear"></div>`:""}
|
|
14
|
+
`,p.appendChild(r);let u=()=>b(i),d=null;return requestAnimationFrame(()=>requestAnimationFrame(()=>{if(r.style.opacity="1",r.style.transform="scale(1) translateY(0)",e.showProgress&&e.duration>0){let f=r.querySelector("[data-toast-bar]");f&&(f.style.width="0%")}})),e.duration>0&&(d=setTimeout(u,e.duration)),r.addEventListener("mouseenter",()=>{d&&clearTimeout(d)}),r.addEventListener("mouseleave",()=>{e.duration>0&&(d=setTimeout(u,Math.min(e.duration,1500)))}),(x=r.querySelector("[data-toast-close]"))==null||x.addEventListener("click",f=>{f.stopPropagation(),u()}),e.dismissOnClick&&r.addEventListener("click",u),(l=r.querySelector("[data-toast-action]"))==null||l.addEventListener("click",f=>{var g,v;f.stopPropagation(),(v=(g=e.action)==null?void 0:g.onClick)==null||v.call(g),u()}),$.set(i,{el:r,timer:d}),u}function _(s,t={},e={}){let{loading:o="Loading\u2026",success:n="Done!",error:a="Something went wrong"}=t,i=`__toast_p${++C}`;return y(o,{type:"info",duration:0,icon:w.loading,id:i,...e}),Promise.resolve(s).then(p=>{b(i);let r=typeof n=="function"?n(p):n;y(r,{type:"success",...e})}).catch(p=>{b(i);let r=typeof a=="function"?a(p):a;y(r,{type:"error",...e})}),()=>b(i)}function z(s,t,e={}){if(typeof document>"u"||!t)return()=>{};let o={type:"success",duration:2500,sound:!0,icon:null,...e};o.sound&&L(o.type);let n=c.theme[o.type]||c.theme.success,a=o.icon||w[o.type],i=document.createElement("div");i.setAttribute("style",["position:absolute","z-index:9998","padding:8px 14px","background:#0f172a","color:white","font-size:13px","font-weight:600","border-radius:10px","box-shadow:0 8px 24px rgba(0,0,0,0.2)","pointer-events:none","white-space:nowrap","transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)","opacity:0","transform:scale(0.85) translateY(8px)"].join(";")),i.innerHTML=`
|
|
15
|
+
<div style="display:flex;align-items:center;gap:7px">
|
|
16
|
+
<div style="width:15px;height:15px;display:flex;color:${n.bg}">${a}</div>
|
|
17
|
+
<span>${s}</span>
|
|
18
|
+
</div>
|
|
19
|
+
<div style="position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:#0f172a"></div>
|
|
20
|
+
`,document.body.appendChild(i);let{top:p,left:r,width:u}=t.getBoundingClientRect(),{height:d,width:x}=i.getBoundingClientRect();i.style.top=`${p+window.scrollY-d-13}px`,i.style.left=`${r+window.scrollX+u/2-x/2}px`,requestAnimationFrame(()=>requestAnimationFrame(()=>{i.style.opacity="1",i.style.transform="scale(1) translateY(0)"}));let l=()=>{i.style.opacity="0",i.style.transform="scale(0.9) translateY(4px)",setTimeout(()=>i.remove(),300)};return o.duration>0&&setTimeout(l,o.duration),l}function M(s,t,e,o,n={}){if(typeof document>"u"||!t)return;let a={confirmLabel:"Yes",cancelLabel:"No",sound:!0,...n};a.sound&&L("warning");let i=document.createElement("div");i.setAttribute("style",["position:absolute","z-index:9998","padding:12px 14px","background:#0f172a","color:white","font-size:13px","font-weight:600","border-radius:12px","box-shadow:0 8px 28px rgba(0,0,0,0.22)","pointer-events:auto","min-width:160px","transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)","opacity:0","transform:scale(0.85) translateY(8px)"].join(";")),i.innerHTML=`
|
|
21
|
+
<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#fca5a5">
|
|
22
|
+
<div style="width:15px;height:15px;flex-shrink:0">${w.warning}</div>
|
|
23
|
+
<span style="font-size:13px;color:#f8fafc">${s}</span>
|
|
24
|
+
</div>
|
|
25
|
+
<div style="display:flex;gap:7px">
|
|
26
|
+
<button data-cancel style="flex:1;padding:6px 0;background:#1e293b;border:1px solid #334155;color:#94a3b8;border-radius:8px;cursor:pointer;font-weight:700;font-size:12px;transition:all 0.15s">${a.cancelLabel}</button>
|
|
27
|
+
<button data-confirm style="flex:1;padding:6px 0;background:#ef4444;border:none;color:white;border-radius:8px;cursor:pointer;font-weight:700;font-size:12px;transition:all 0.15s">${a.confirmLabel}</button>
|
|
28
|
+
</div>
|
|
29
|
+
<div style="position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:#0f172a"></div>
|
|
30
|
+
`,document.body.appendChild(i);let{top:p,left:r,width:u}=t.getBoundingClientRect(),{height:d,width:x}=i.getBoundingClientRect();i.style.top=`${p+window.scrollY-d-13}px`,i.style.left=`${r+window.scrollX+u/2-x/2}px`,requestAnimationFrame(()=>requestAnimationFrame(()=>{i.style.opacity="1",i.style.transform="scale(1) translateY(0)"}));let l=()=>{i.style.opacity="0",i.style.transform="scale(0.9) translateY(4px)",setTimeout(()=>i.remove(),280)};i.querySelector("[data-confirm]").onclick=()=>{l(),e==null||e()},i.querySelector("[data-cancel]").onclick=()=>{l(),o==null||o()}}function A(s,t,e={}){return new Promise(o=>{if(typeof document>"u")return o(!1);let n={confirmLabel:"Confirm",cancelLabel:"Cancel",confirmVariant:"danger",icon:null,sound:!0,...e};n.sound&&L("warning");let a=n.confirmVariant==="danger"?"#ef4444":"#3b82f6",i=n.confirmVariant==="danger"?"#dc2626":"#2563eb",p=n.icon||w.warning,r=n.confirmVariant==="danger"?"#fee2e2":"#dbeafe",u=n.confirmVariant==="danger"?"#ef4444":"#3b82f6",d=document.createElement("div");d.setAttribute("style",["position:fixed","inset:0","z-index:99999","display:flex","align-items:center","justify-content:center","padding:16px","background:rgba(15,23,42,0.55)","backdrop-filter:blur(5px)","transition:opacity 0.25s ease","opacity:0"].join(";")),d.innerHTML=`
|
|
31
|
+
<div data-modal-box style="width:100%;max-width:420px;background:white;border-radius:20px;box-shadow:0 25px 60px rgba(0,0,0,0.22);overflow:hidden;transition:all 0.32s cubic-bezier(0.34,1.56,0.64,1);transform:scale(0.9) translateY(18px)">
|
|
32
|
+
<div style="padding:24px 24px 20px">
|
|
33
|
+
<div style="width:48px;height:48px;border-radius:50%;background:${r};display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:${u}">
|
|
34
|
+
<div style="width:24px;height:24px">${p}</div>
|
|
35
|
+
</div>
|
|
36
|
+
<h3 style="font-size:17px;font-weight:700;color:#0f172a;margin:0 0 8px;line-height:1.3">${s}</h3>
|
|
37
|
+
<p style="font-size:14px;color:#64748b;margin:0;line-height:1.65">${t}</p>
|
|
38
|
+
</div>
|
|
39
|
+
<div style="background:#f8fafc;padding:14px 24px 18px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid #f1f5f9">
|
|
40
|
+
<button data-modal-cancel style="padding:9px 18px;font-size:13.5px;font-weight:500;color:#475569;background:transparent;border:none;border-radius:10px;cursor:pointer;transition:all 0.15s">${n.cancelLabel}</button>
|
|
41
|
+
<button data-modal-confirm style="padding:9px 22px;font-size:13.5px;font-weight:600;color:white;background:${a};border:none;border-radius:10px;cursor:pointer;box-shadow:0 2px 8px ${a}55;transition:all 0.15s">${n.confirmLabel}</button>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
`,document.body.appendChild(d);let x=d.querySelector("[data-modal-box]"),l=d.querySelector("[data-modal-confirm]"),f=d.querySelector("[data-modal-cancel]");l.addEventListener("mouseenter",()=>{l.style.background=i,l.style.transform="translateY(-1px)"}),l.addEventListener("mouseleave",()=>{l.style.background=a,l.style.transform=""}),f.addEventListener("mouseenter",()=>{f.style.background="#f1f5f9"}),f.addEventListener("mouseleave",()=>{f.style.background="transparent"}),requestAnimationFrame(()=>{d.style.opacity="1",x.style.transform="scale(1) translateY(0)"});let g=k=>{d.style.opacity="0",x.style.transform="scale(0.9) translateY(16px)",setTimeout(()=>{d.remove(),o(k)},280)};f.onclick=()=>g(!1),l.onclick=()=>g(!0),d.addEventListener("click",k=>{k.target===d&&g(!1)});let v=k=>{k.key==="Escape"&&(g(!1),document.removeEventListener("keydown",v)),k.key==="Enter"&&(g(!0),document.removeEventListener("keydown",v))};document.addEventListener("keydown",v)})}function q(s={}){let{theme:t,...e}=s;if(Object.assign(c,e),t)for(let[o,n]of Object.entries(t))c.theme[o]={...c.theme[o],...n}}var m={success:(s,t)=>y(s,{type:"success",...t}),error:(s,t)=>y(s,{type:"error",...t}),warning:(s,t)=>y(s,{type:"warning",...t}),info:(s,t)=>y(s,{type:"info",...t}),notify:y,promise:_,anchored:z,anchoredConfirm:M,modal:A,dismiss:b,dismissAll:()=>[...$.keys()].forEach(b),configure:q,ICONS:w},j=m;function S(s={}){let t=e=>({...s,...e});return{success:(e,o)=>m.success(e,t(o)),error:(e,o)=>m.error(e,t(o)),warning:(e,o)=>m.warning(e,t(o)),info:(e,o)=>m.info(e,t(o)),notify:(e,o)=>m.notify(e,t(o)),promise:(e,o,n)=>m.promise(e,o,t(n)),anchored:(e,o,n)=>m.anchored(e,o,t(n)),anchoredConfirm:(...e)=>m.anchoredConfirm(...e),modal:m.modal,dismiss:m.dismiss,dismissAll:m.dismissAll}}export{w as ICONS,M as anchoredConfirm,z as anchoredToast,q as configure,y as createToast,j as default,b as dismissToast,A as modalConfirm,_ as promiseToast,m as toast,S as useToast};
|
package/package.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "toast-anchor",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A lightweight, Tailwind-powered toast and modal library.",
|
|
5
|
+
"type": "commonjs",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.mjs",
|
|
8
|
+
"exports": {
|
|
9
|
+
"import": "./dist/index.mjs",
|
|
10
|
+
"require": "./dist/index.js"
|
|
11
|
+
},
|
|
12
|
+
"scripts": {
|
|
13
|
+
"build": "tsup src/index.js --format cjs,esm --clean --minify",
|
|
14
|
+
"dev": "tsup src/index.js --format cjs,esm --watch"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"toast",
|
|
18
|
+
"notification",
|
|
19
|
+
"react",
|
|
20
|
+
"javascript",
|
|
21
|
+
"ui"
|
|
22
|
+
],
|
|
23
|
+
"homepage": "https://github.com/AakashAp01/toast-anchor#readme",
|
|
24
|
+
"bugs": {
|
|
25
|
+
"url": "https://github.com/AakashAp01/toast-anchor/issues"
|
|
26
|
+
},
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "git+https://github.com/AakashAp01/toast-anchor.git"
|
|
30
|
+
},
|
|
31
|
+
"author": "AkashAp",
|
|
32
|
+
"license": "MIT",
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"tsup": "^8.5.1",
|
|
35
|
+
"typescript": "^5.9.3"
|
|
36
|
+
}
|
|
37
|
+
}
|