@scalar/use-toasts - npm Package Compare versions

Comparing version 0.5.15 to 0.6.1

CHANGELOG.md

 # @scalar/use-toasts
 
+## 0.6.1
+
+### Patch Changes
+
+- a8c3045: build: re-introduce @scalar/use-toasts package
+
 ## 0.5.15
@@ -4,0 +10,0 @@

dist/index.d.ts

@@ -1,3 +0,3 @@
-export * from './FlowToast';
-export { default as FlowToastContainer } from './FlowToastContainer.vue';
+export { default as ScalarToasts } from './components/ScalarToasts.vue';
+export * from './hooks';
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -6,3 +6,3 @@ (function() {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode(".progress-ring[data-v-6d218ca0] {\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  animation: linear turn-6d218ca0 reverse forwards;\n}\n@keyframes turn-6d218ca0 {\nfrom {\n    stroke-dashoffset: var(--2d61a1b2);\n}\nto {\n    stroke-dashoffset: 0;\n}\n}\n\n.toast-layout[data-v-c76046db] {\n  pointer-events: initial;\n\n  box-sizing: border-box;\n\n  padding: 18px;\n  background: var(--theme-background-1, var(--default-theme-background-1));\n  border-radius: var(--theme-radius-lg, var(--default-theme-radius-lg));\n  font-size: var(--theme-font-size-3, var(--default-theme-font-size-3));\n  color: var(--theme-color-1, var(--default-theme-color-1));\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  grid-template-areas:\n    'icon title timeout'\n    '. description description';\n  align-items: center;\n  position: relative;\n\n  width: 100%;\n}\n.toast-title[data-v-c76046db] {\n  grid-area: title;\n  font-weight: var(--theme-font-semibold, var(--default-theme-font-semibold));\n  display: flex;\n  align-items: center;\n}\n.toast-description[data-v-c76046db] {\n  grid-area: description;\n  margin-top: 5px;\n  line-height: 1.45;\n  color: var(--theme-color-2, var(--default-theme-color-2));\n}\n.toast-icon[data-v-c76046db] {\n  grid-area: icon;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 10px;\n  color: var(--theme-color-2, var(--default-theme-color-2));\n}\n.toast-icon[data-v-c76046db] >  * {\n  width: 14px;\n  height: 14px;\n}\n.toast-timeout[data-v-c76046db] {\n  grid-area: timeout;\n  margin-left: 10px;\n  width: 16px;\n  height: 16px;\n  display: flex;\n  color: var(--theme-color-ghost, var(--default-theme-color-ghost));\n}\n.toast-error .toast-icon[data-v-c76046db],\n.toast-error .toast-title[data-v-c76046db] {\n  color: var(--theme-error-color, var(--default-theme-color-red));\n}\n\n.toast[data-v-5e2e8f38] {\n  pointer-events: initial;\n  filter: brightness(\n    var(--theme-lifted-brightness, var(--default-theme-lifted-brightness))\n  );\n\n  background: var(--theme-background-1, var(--default-theme-background-1));\n  border-radius: var(--theme-radius-lg, var(--default-theme-radius-lg));\n  box-shadow: var(--theme-shadow-2, var(--default-theme-shadow-2));\n  font-family: var(--theme-font, var(--default-theme-font));\n\n  width: 380px;\n  max-width: 100%;\n  min-width: 0;\n}\n\n.toast-container[data-v-e7c9664e] {\n  width: 100dvw;\n  height: 100svh;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: 1000000;\n\n  box-sizing: border-box;\n\n  pointer-events: none;\n\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: flex-end;\n  gap: 12px;\n\n  padding: 48px;\n}\n@media screen and (max-width: 600px) {\n  /* Less padding for toasts on mobile */\n.toast-container[data-v-e7c9664e] {\n    padding: 24px;\n}\n}\n.toasts-move[data-v-e7c9664e],\n.toasts-enter-active[data-v-e7c9664e],\n.toasts-leave-active[data-v-e7c9664e] {\n  transition: all 0.5s ease;\n}\n.toasts-enter-from[data-v-e7c9664e],\n.toasts-leave-to[data-v-e7c9664e] {\n  opacity: 0;\n  transform: translateX(30px);\n}\n.toast-leave-active[data-v-e7c9664e] {\n  position: absolute;\n}"));
+      elementStyle.appendChild(document.createTextNode("/**\n* We need to be explicit to avoid !important. :)\n*\n* Original: https://github.com/xiaoluoboding/vue-sonner/blob/311ecc8d9a51b619f968e20f4b44992ad8412850/packages/styles.css#L91-L103\n*/\n.toaster[data-sonner-toast][data-styled='true'] {\n  background: var(--scalar-background-1);\n  color: var(--scalar-color-1);\n  padding: 18px;\n  border-color: var(--scalar-background-3);\n  border-radius: var(--scalar-radius-lg);\n  font-size: var(--scalar-font-size-3);\n}\n.toaster[data-sonner-toast][data-type='error'] {\n  background: var(--scalar-color-red);\n  border-color: transparent;\n  color: white;\n}\n.toaster[data-sonner-toast][data-type='warning'] {\n  background: var(--scalar-color-orange);\n  border-color: transparent;\n  color: rgba(0, 0, 0, 0.8);\n}"));
       document.head.appendChild(elementStyle);
@@ -14,226 +14,602 @@ }
 })();
-import { nanoid } from "nanoid";
-import { reactive, readonly, defineComponent, useCssVars, computed, openBlock, createElementBlock, createElementVNode, normalizeStyle, normalizeClass, renderSlot, createCommentVNode, createBlock, resolveDynamicComponent, createSlots, withCtx, createVNode, createTextVNode, toDisplayString, Fragment, TransitionGroup, renderList, unref } from "vue";
-const toasts = reactive([]);
-function createToast(content, options) {
-  const id = nanoid();
-  toasts.push({ id, ...content, options });
-  let timer;
-  if (options == null ? void 0 : options.timeout) {
-    timer = setTimeout(() => {
-      removeToast(id);
-    }, options.timeout);
+import { defineComponent, useAttrs, ref, computed, onMounted, nextTick, onUnmounted, watch, watchEffect, openBlock, createElementBlock, unref, createElementVNode, normalizeStyle, Fragment, renderList, createBlock, normalizeClass, createVNode, createCommentVNode, createTextVNode, toDisplayString, resolveDynamicComponent } from "vue";
+var yt = Object.defineProperty;
+var xt = (r, t, e) => t in r ? yt(r, t, { enumerable: true, configurable: true, writable: true, value: e }) : r[t] = e;
+var g = (r, t, e) => (xt(r, typeof t != "symbol" ? t + "" : t, e), e);
+function wt(r) {
+  if (!r || typeof document > "u")
+    return;
+  let t = document.head || document.getElementsByTagName("head")[0], e = document.createElement("style");
+  e.type = "text/css", t.appendChild(e), e.styleSheet ? e.styleSheet.cssText = r : e.appendChild(document.createTextNode(r));
+}
+wt("[data-sonner-toaster][dir=ltr],html[dir=ltr]{--toast-icon-margin-start:-3px;--toast-icon-margin-end:4px;--toast-svg-margin-start:-1px;--toast-svg-margin-end:0px;--toast-button-margin-start:auto;--toast-button-margin-end:0;--toast-close-button-start:0;--toast-close-button-end:unset;--toast-close-button-transform:translate(-35%, -35%)}[data-sonner-toaster][dir=rtl],html[dir=rtl]{--toast-icon-margin-start:4px;--toast-icon-margin-end:-3px;--toast-svg-margin-start:0px;--toast-svg-margin-end:-1px;--toast-button-margin-start:0;--toast-button-margin-end:auto;--toast-close-button-start:unset;--toast-close-button-end:0;--toast-close-button-transform:translate(35%, -35%)}[data-sonner-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:8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:0;z-index:999999999}[data-sonner-toaster][data-x-position=right]{right:max(var(--offset),env(safe-area-inset-right))}[data-sonner-toaster][data-x-position=left]{left:max(var(--offset),env(safe-area-inset-left))}[data-sonner-toaster][data-x-position=center]{left:50%;transform:translateX(-50%)}[data-sonner-toaster][data-y-position=top]{top:max(var(--offset),env(safe-area-inset-top))}[data-sonner-toaster][data-y-position=bottom]{bottom:max(var(--offset),env(safe-area-inset-bottom))}[data-sonner-toast]{--y:translateY(100%);--lift-amount:calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);touch-action:none;will-change:transform,opacity,height;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}[data-sonner-toast][data-styled=true]{padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px rgba(0,0,0,.1);width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}[data-sonner-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-y-position=top]{top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}[data-sonner-toast][data-y-position=bottom]{bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}[data-sonner-toast] [data-description]{font-weight:400;line-height:1.4;color:inherit}[data-sonner-toast] [data-title]{font-weight:500;line-height:1.5;color:inherit}[data-sonner-toast] [data-icon]{display:flex;height:20px;width:20px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}[data-sonner-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}[data-sonner-toast] [data-icon]>*{flex-shrink:0}[data-sonner-toast] [data-icon] svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}[data-sonner-toast] [data-content]{display:flex;flex-direction:column;gap:2px}[data-sonner-toast] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;cursor:pointer;outline:0;transition:opacity .4s,box-shadow .2s;z-index:100}[data-sonner-toast] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-sonner-toast] [data-button]:first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}[data-sonner-toast] [data-cancel]{color:var(--normal-text);background:rgba(0,0,0,.08)}[data-sonner-toast][data-theme=dark] [data-cancel]{background:rgba(255,255,255,.3)}[data-sonner-toast] [data-close-button]{position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;background:var(--gray1);color:var(--gray12);border:1px solid var(--gray4);transform:var(--toast-close-button-transform);border-radius:50%;opacity:0;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-sonner-toast] [data-close-button]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast] [data-disabled=true]{cursor:not-allowed}[data-sonner-toast]:hover [data-close-button]{opacity:1}[data-sonner-toast]:focus [data-close-button]{opacity:1}[data-sonner-toast]:focus-within [data-close-button]{opacity:1}[data-sonner-toast]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toast][data-swiping=true]:before{content:'';position:absolute;left:0;right:0;height:100%}[data-sonner-toast][data-y-position=top][data-swiping=true]:before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-sonner-toast][data-y-position=bottom][data-swiping=true]:before{top:50%;transform:scaleY(3) translateY(-50%)}[data-sonner-toast][data-swiping=false][data-removed=true]:before{content:'';position:absolute;inset:0;transform:scaleY(2)}[data-sonner-toast]:after{content:'';position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-sonner-toast][data-mounted=true]{--y:translateY(0);opacity:1}[data-sonner-toast][data-expanded=false][data-front=false]{--scale:var(--toasts-before) * 0.05 + 1;--y:translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-sonner-toast]>*{transition:opacity .4s}[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]>*{opacity:0}[data-sonner-toast][data-visible=false]{opacity:0;pointer-events:none}[data-sonner-toast][data-mounted=true][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y:translateY(calc(var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{--y:translateY(40%);opacity:0;transition:transform .5s,opacity .2s}[data-sonner-toast][data-removed=true][data-front=false]:before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount,0));transition:none}[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],[data-sonner-toast][data-swipe-out=true][data-y-position=top]{animation:swipe-out .2s ease-out forwards}@keyframes swipe-out{from{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));opacity:1}to{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));opacity:0}}@media (max-width:600px){[data-sonner-toaster]{position:fixed;--mobile-offset:16px;right:var(--mobile-offset);left:var(--mobile-offset);width:100%}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - 32px)}[data-sonner-toaster][data-x-position=left]{left:var(--mobile-offset)}[data-sonner-toaster][data-y-position=bottom]{bottom:20px}[data-sonner-toaster][data-y-position=top]{top:20px}[data-sonner-toaster][data-x-position=center]{left:var(--mobile-offset);right:var(--mobile-offset);transform:none}}[data-sonner-toaster][data-theme=light]{--normal-bg:#fff;--normal-border:var(--gray4);--normal-text:var(--gray12);--success-bg:hsl(143, 85%, 96%);--success-border:hsl(145, 92%, 91%);--success-text:hsl(140, 100%, 27%);--info-bg:hsl(208, 100%, 97%);--info-border:hsl(221, 91%, 91%);--info-text:hsl(210, 92%, 45%);--warning-bg:hsl(49, 100%, 97%);--warning-border:hsl(49, 91%, 91%);--warning-text:hsl(31, 92%, 45%);--error-bg:hsl(359, 100%, 97%);--error-border:hsl(359, 100%, 94%);--error-text:hsl(360, 100%, 45%)}[data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1)}[data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true]{--normal-bg:#fff;--normal-border:var(--gray3);--normal-text:var(--gray12)}[data-sonner-toaster][data-theme=dark]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1);--success-bg:hsl(150, 100%, 6%);--success-border:hsl(147, 100%, 12%);--success-text:hsl(150, 86%, 65%);--info-bg:hsl(215, 100%, 6%);--info-border:hsl(223, 100%, 12%);--info-text:hsl(216, 87%, 65%);--warning-bg:hsl(64, 100%, 6%);--warning-border:hsl(60, 100%, 12%);--warning-text:hsl(46, 87%, 65%);--error-bg:hsl(358, 76%, 10%);--error-border:hsl(357, 89%, 16%);--error-text:hsl(358, 100%, 81%)}[data-rich-colors=true] [data-sonner-toast][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true] [data-sonner-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true] [data-sonner-toast][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true] [data-sonner-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true] [data-sonner-toast][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true] [data-sonner-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true] [data-sonner-toast][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}[data-rich-colors=true] [data-sonner-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size:16px;height:var(--size);width:var(--size);inset:0;z-index:10}.sonner-loading-wrapper[data-visible=false]{display:none;transform-origin:center;animation:sonner-fade-out .2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:first-child{animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}100%{opacity:.15}}@media (prefers-reduced-motion){.sonner-loading-bar,[data-sonner-toast],[data-sonner-toast]>*{transition:none!important;animation:none!important}}");
+let tt = 1;
+class Bt {
+  constructor() {
+    g(this, "subscribers");
+    g(this, "toasts");
+    g(this, "subscribe", (t) => (this.subscribers.push(t), () => {
+      const e = this.subscribers.indexOf(t);
+      this.subscribers.splice(e, 1);
+    }));
+    g(this, "publish", (t) => {
+      this.subscribers.forEach((e) => e(t));
+    });
+    g(this, "addToast", (t) => {
+      this.publish(t), this.toasts = [...this.toasts, t];
+    });
+    g(this, "create", (t) => {
+      var h;
+      const { message: e, ...n } = t, a = typeof (t == null ? void 0 : t.id) == "number" || ((h = t.id) == null ? void 0 : h.length) > 0 ? t.id : tt++, p = this.toasts.findIndex((x) => x.id === a), u = t.dismissible === void 0 ? true : t.dismissible;
+      return p !== -1 ? this.toasts = this.toasts.map((x) => x.id === a ? (this.publish({ ...x, ...t, id: a, title: e }), {
+        ...x,
+        ...t,
+        id: a,
+        dismissible: u,
+        title: e
+      }) : x) : this.addToast({ title: e, ...n, dismissible: u, id: a }), a;
+    });
+    g(this, "dismiss", (t) => (t || this.toasts.forEach((e) => {
+      this.subscribers.forEach(
+        (n) => n({ id: e.id, dismiss: true })
+      );
+    }), this.subscribers.forEach((e) => e({ id: t, dismiss: true })), t));
+    g(this, "message", (t, e) => this.create({ ...e, message: t }));
+    g(this, "error", (t, e) => this.create({ ...e, type: "error", message: t }));
+    g(this, "success", (t, e) => this.create({ ...e, type: "success", message: t }));
+    g(this, "info", (t, e) => this.create({ ...e, type: "info", message: t }));
+    g(this, "warning", (t, e) => this.create({ ...e, type: "warning", message: t }));
+    g(this, "loading", (t, e) => this.create({ ...e, type: "loading", message: t }));
+    g(this, "promise", (t, e) => {
+      if (!e)
+        return;
+      let n;
+      e.loading !== void 0 && (n = this.create({
+        ...e,
+        promise: t,
+        type: "loading",
+        message: e.loading
+      }));
+      const a = t instanceof Promise ? t : t();
+      let p = n !== void 0;
+      return a.then((u) => {
+        if (e.success !== void 0) {
+          p = false;
+          const h = typeof e.success == "function" ? e.success(u) : e.success;
+          this.create({ id: n, type: "success", message: h });
+        }
+      }).catch((u) => {
+        if (e.error !== void 0) {
+          p = false;
+          const h = typeof e.error == "function" ? e.error(u) : e.error;
+          this.create({ id: n, type: "error", message: h });
+        }
+      }).finally(() => {
+        var u;
+        p && (this.dismiss(n), n = void 0), (u = e.finally) == null || u.call(e);
+      }), n;
+    });
+    g(this, "custom", (t, e) => {
+      const n = (e == null ? void 0 : e.id) || tt++;
+      return this.publish({ ...e, id: n, title: t }), n;
+    });
+    this.subscribers = [], this.toasts = [];
   }
-  const dismiss = () => {
-    if (timer)
-      clearTimeout(timer);
-    removeToast(id);
-  };
-  const active = () => {
-    return toasts.some((t) => t.id === id);
-  };
-  return { id, dismiss, active };
 }
-function addToast(contents, options) {
-  return createToast(contents, options);
+const k = new Bt(), Et = (r, t) => {
+  const e = (t == null ? void 0 : t.id) || tt++;
+  return k.publish({
+    title: r,
+    ...t,
+    id: e
+  }), e;
+}, St = Et, Ie = Object.assign(St, {
+  success: k.success,
+  info: k.info,
+  warning: k.warning,
+  error: k.error,
+  custom: k.custom,
+  message: k.message,
+  promise: k.promise,
+  dismiss: k.dismiss,
+  loading: k.loading
+}), It = ["data-visible"], zt = { className: "sonner-spinner" }, Nt = /* @__PURE__ */ defineComponent({
+  __name: "Loader",
+  props: {
+    visible: Boolean
+  },
+  setup(r) {
+    const t = Array(12).fill(0);
+    return (e, n) => (openBlock(), createElementBlock("div", {
+      className: "sonner-loading-wrapper",
+      "data-visible": r.visible
+    }, [
+      createElementVNode("div", zt, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(t), (a) => (openBlock(), createElementBlock("div", {
+          key: `spinner-bar-${a}`,
+          className: "sonner-loading-bar"
+        }))), 128))
+      ])
+    ], 8, It));
+  }
+}), H = (r, t) => {
+  const e = r.__vccOpts || r;
+  for (const [n, a] of t)
+    e[n] = a;
+  return e;
+}, Mt = {}, Ot = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  height: "20",
+  width: "20"
+}, Pt = /* @__PURE__ */ createElementVNode("path", {
+  "fill-rule": "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",
+  "clip-rule": "evenodd"
+}, null, -1), At = [
+  Pt
+];
+function Dt(r, t) {
+  return openBlock(), createElementBlock("svg", Ot, At);
 }
-function addErrorToast(message) {
-  return createToast(
-    {
-      title: "Something went wrong...",
-      description: message,
-      status: "Error"
-    },
-    {
-      timeout: 5e3
-    }
-  );
+const Yt = /* @__PURE__ */ H(Mt, [["render", Dt]]), Rt = {}, Ht = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  height: "20",
+  width: "20"
+}, Lt = /* @__PURE__ */ createElementVNode("path", {
+  "fill-rule": "evenodd",
+  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",
+  "clip-rule": "evenodd"
+}, null, -1), Ut = [
+  Lt
+];
+function Vt(r, t) {
+  return openBlock(), createElementBlock("svg", Ht, Ut);
 }
-function addCustomToast(component, options) {
-  return createToast({ component }, options);
+const jt = /* @__PURE__ */ H(Rt, [["render", Vt]]), Ft = {}, Kt = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  height: "20",
+  width: "20"
+}, Wt = /* @__PURE__ */ createElementVNode("path", {
+  "fill-rule": "evenodd",
+  d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
+  "clip-rule": "evenodd"
+}, null, -1), Xt = [
+  Wt
+];
+function Gt(r, t) {
+  return openBlock(), createElementBlock("svg", Kt, Xt);
 }
-function useToasts() {
-  return {
-    toasts: readonly(toasts),
-    addToast,
-    removeToast,
-    clearToasts
-  };
+const qt = /* @__PURE__ */ H(Ft, [["render", Gt]]), Jt = {}, Qt = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  height: "20",
+  width: "20"
+}, Zt = /* @__PURE__ */ createElementVNode("path", {
+  "fill-rule": "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",
+  "clip-rule": "evenodd"
+}, null, -1), te = [
+  Zt
+];
+function ee(r, t) {
+  return openBlock(), createElementBlock("svg", Qt, te);
 }
-function removeToast(id) {
-  const idx = toasts.findIndex((t) => t.id === id);
-  if (idx < 0)
-    return;
-  toasts.splice(idx, 1);
+const ae = /* @__PURE__ */ H(Jt, [["render", ee]]), oe = {}, se = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "12",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stoke-width": "1.5",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, ne = /* @__PURE__ */ createElementVNode("line", {
+  x1: "18",
+  y1: "6",
+  x2: "6",
+  y2: "18"
+}, null, -1), re = /* @__PURE__ */ createElementVNode("line", {
+  x1: "6",
+  y1: "6",
+  x2: "18",
+  y2: "18"
+}, null, -1), ie = [
+  ne,
+  re
+];
+function le(r, t) {
+  return openBlock(), createElementBlock("svg", se, ie);
 }
-function clearToasts() {
-  toasts.splice(0, toasts.length);
-}
-const _hoisted_1$3 = { viewBox: "0 0 24 24" };
-const _hoisted_2$1 = ["stroke-dasharray"];
-const stroke = 2;
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "FlowProgressRing",
+const de = /* @__PURE__ */ H(oe, [["render", le]]), ce = ["aria-live", "data-styled", "data-mounted", "data-promise", "data-removed", "data-visible", "data-y-position", "data-x-position", "data-index", "data-front", "data-swiping", "data-type", "data-invert", "data-swipe-out", "data-expanded"], ue = ["data-disabled"], fe = {
+  key: 1,
+  "data-icon": ""
+}, pe = { "data-content": "" }, me = { "data-title": "" }, he = 4e3, ge = 14, ve = 20, be = 200, ye = /* @__PURE__ */ defineComponent({
+  __name: "Toast",
   props: {
-    duration: {}
+    toast: {},
+    toasts: {},
+    index: {},
+    expanded: { type: Boolean },
+    invert: { type: Boolean },
+    heights: {},
+    position: {},
+    visibleToasts: {},
+    expandByDefault: { type: Boolean },
+    closeButton: { type: Boolean },
+    interacting: { type: Boolean },
+    duration: {},
+    descriptionClass: {}
   },
-  setup(__props) {
-    const props = __props;
-    useCssVars((_ctx) => ({
-      "2d61a1b2": circumference
-    }));
-    const normalizedRadius = 12 - stroke * 2;
-    const circumference = normalizedRadius * 2 * Math.PI;
-    const animationDuration = computed(() => `${props.duration}ms`);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$3, [
-        createElementVNode("circle", {
-          class: "progress-ring",
-          cx: 12,
-          cy: 12,
-          fill: "transparent",
-          r: normalizedRadius,
-          stroke: "currentColor",
-          "stroke-dasharray": circumference + " " + circumference,
-          "stroke-width": stroke,
-          style: normalizeStyle({ animationDuration: animationDuration.value })
-        }, null, 12, _hoisted_2$1)
-      ]);
+  emits: ["update:heights", "removeToast"],
+  setup(r, { emit: t }) {
+    const e = (o) => !!o.promise, n = t, a = r, p = ref(false), u = ref(false), h = ref(false), x = ref(false), w = ref(null), z = ref(0), L = ref(0), U = ref(null), s = ref(null), i = computed(() => a.index === 0), b = computed(() => a.index + 1 <= a.visibleToasts), y = computed(() => a.toast.type), N = computed(() => a.toast.dismissible), B = a.toast.className || "", E = a.toast.descriptionClassName || "", V = a.toast.style || {}, P = computed(
+      () => a.heights.findIndex((o) => o.toastId === a.toast.id) || 0
+    ), K = computed(
+      () => a.toast.duration || a.duration || he
+    ), W = ref(0), A = ref(0), X = ref(K.value), at = ref(0), M = ref(null), G = computed(() => a.position.split("-")), ct = computed(() => G.value[0]), ut = computed(() => G.value[1]), ft = computed(() => a.heights.reduce((o, l, m) => m >= P.value ? o : o + l.height, 0)), pt = computed(() => a.toast.invert || a.invert), q = computed(() => w.value === "loading"), j = computed(
+      () => w.value ?? (a.toast.type || null)
+    ), J = computed(() => !e(a.toast) && typeof a.toast.title == "object"), mt = computed(() => {
+      if (!e(a.toast))
+        return null;
+      switch (w.value) {
+        case "loading":
+          return a.toast.loading;
+        case "success":
+          return typeof a.toast.success == "function" ? U.value : a.toast.success;
+        case "error":
+          return typeof a.toast.error == "function" ? U.value : a.toast.error;
+        default:
+          return null;
+      }
+    });
+    onMounted(() => p.value = true), watchEffect(() => {
+      A.value = P.value * ge + ft.value;
+    });
+    function ht() {
+      var o, l;
+      (!q.value || N.value) && (S(), (l = (o = a.toast).onDismiss) == null || l.call(o, a.toast));
+    }
+    function S() {
+      u.value = true, z.value = A.value;
+      const o = a.heights.filter(
+        (l) => l.toastId !== a.toast.id
+      );
+      n("update:heights", o), setTimeout(() => {
+        n("removeToast", a.toast);
+      }, be);
+    }
+    const gt = (o) => {
+      q || (z.value = A.value, o.target.setPointerCapture(o.pointerId), o.target.tagName !== "BUTTON" && (h.value = true, M.value = { x: o.clientX, y: o.clientY }));
+    }, vt = (o) => {
+      var m, D, _, $;
+      if (x.value)
+        return;
+      M.value = null;
+      const l = Number(
+        ((m = s.value) == null ? void 0 : m.style.getPropertyValue("--swipe-amount").replace("px", "")) || 0
+      );
+      if (Math.abs(l) >= ve) {
+        z.value = A.value, (_ = (D = a.toast).onDismiss) == null || _.call(D, a.toast), S(), x.value = true;
+        return;
+      }
+      ($ = s.value) == null || $.style.setProperty("--swipe-amount", "0px"), h.value = true;
+    }, bt = (o) => {
+      var ot;
+      if (!M.value)
+        return;
+      const l = o.clientY - M.value.y, m = o.clientX - M.value.x, _ = (G.value[0] === "top" ? Math.min : Math.max)(0, l), $ = o.pointerType === "touch" ? 10 : 2;
+      Math.abs(_) > $ ? (ot = s.value) == null || ot.style.setProperty("--swipe-amount", `${l}px`) : Math.abs(m) > $ && (M.value = null);
     };
-  }
-});
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const FlowProgressRing = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-6d218ca0"]]);
-const _hoisted_1$2 = {
-  key: 0,
-  class: "toast-icon"
-};
-const _hoisted_2 = { class: "toast-title" };
-const _hoisted_3 = {
-  key: 1,
-  class: "toast-description text-copy-light"
-};
-const _hoisted_4 = {
-  key: 2,
-  class: "toast-timeout"
-};
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "FlowToastLayout",
-  props: {
-    status: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["toast-layout", { "toast-error": _ctx.status === "Error" }])
+    return watchEffect((o) => {
+      if (a.toast.promise && w.value === "loading" || a.toast.duration === 1 / 0)
+        return;
+      let l;
+      const m = () => {
+        if (at.value < W.value) {
+          const _ = (/* @__PURE__ */ new Date()).getTime() - W.value;
+          X.value = X.value - _;
+        }
+        at.value = (/* @__PURE__ */ new Date()).getTime();
+      }, D = () => {
+        W.value = (/* @__PURE__ */ new Date()).getTime(), l = setTimeout(() => {
+          var _, $;
+          ($ = (_ = a.toast).onAutoClose) == null || $.call(_, a.toast), S();
+        }, X.value);
+      };
+      a.expanded || a.interacting ? m() : D(), o(() => {
+        clearTimeout(l);
+      });
+    }), onMounted(() => {
+      if (s.value) {
+        const o = s.value.getBoundingClientRect().height;
+        L.value = o;
+        const l = [{ toastId: a.toast.id, height: o }, ...a.heights];
+        n("update:heights", l);
+      }
+    }), onUnmounted(() => {
+      if (s.value) {
+        const o = a.heights.filter(
+          (l) => l.toastId !== a.toast.id
+        );
+        n("update:heights", o);
+      }
+    }), watchEffect(() => {
+      a.toast.delete && S();
+    }), (o, l) => (openBlock(), createElementBlock("li", {
+      "aria-live": o.toast.important ? "assertive" : "polite",
+      "aria-atomic": "",
+      role: "status",
+      tabindex: "0",
+      ref_key: "toastRef",
+      ref: s,
+      "data-sonner-toast": "",
+      class: normalizeClass(unref(B)),
+      "data-styled": !J.value,
+      "data-mounted": p.value,
+      "data-promise": !!o.toast.promise,
+      "data-removed": u.value,
+      "data-visible": b.value,
+      "data-y-position": ct.value,
+      "data-x-position": ut.value,
+      "data-index": a.index,
+      "data-front": i.value,
+      "data-swiping": h.value,
+      "data-type": w.value !== "loading" && w.value ? w.value : y.value,
+      "data-invert": pt.value,
+      "data-swipe-out": x.value,
+      "data-expanded": !!(a.expanded || a.expandByDefault && p.value),
+      style: normalizeStyle({
+        "--index": a.index,
+        "--toasts-before": a.index,
+        "--z-index": o.toasts.length - a.index,
+        "--offset": `${u.value ? z.value : A.value}px`,
+        "--initial-height": a.expandByDefault ? "auto" : `${L.value}px`,
+        ...unref(V)
+      }),
+      onPointerdown: gt,
+      onPointerup: vt,
+      onPointermove: bt
+    }, [
+      a.closeButton && !J.value ? (openBlock(), createElementBlock("button", {
+        key: 0,
+        "aria-label": "Close toast",
+        "data-close-button": "",
+        "data-disabled": q.value,
+        onClick: ht
       }, [
-        _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
-          renderSlot(_ctx.$slots, "icon", {}, void 0, true)
-        ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2, [
-          renderSlot(_ctx.$slots, "title", {}, void 0, true)
+        createVNode(de)
+      ], 8, ue)) : createCommentVNode("", true),
+      y.value || o.toast.icon || o.toast.promise ? (openBlock(), createElementBlock("div", fe, [
+        typeof o.toast.promise == "function" || y.value === "loading" ? (openBlock(), createBlock(Nt, {
+          key: 0,
+          visible: w.value === "loading" || y.value === "loading"
+        }, null, 8, ["visible"])) : createCommentVNode("", true),
+        j.value === "success" ? (openBlock(), createBlock(Yt, { key: 1 })) : j.value === "info" ? (openBlock(), createBlock(jt, { key: 2 })) : j.value === "warning" ? (openBlock(), createBlock(qt, { key: 3 })) : j.value === "error" ? (openBlock(), createBlock(ae, { key: 4 })) : createCommentVNode("", true)
+      ])) : createCommentVNode("", true),
+      createElementVNode("div", pe, [
+        createElementVNode("div", me, [
+          typeof o.toast.title == "string" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(toDisplayString(o.toast.title), 1)
+          ], 64)) : o.toast.title === void 0 || o.toast.title === null ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createTextVNode(toDisplayString(mt.value), 1)
+          ], 64)) : J.value ? (openBlock(), createBlock(resolveDynamicComponent(o.toast.title), {
+            key: 2,
+            onCloseToast: l[0] || (l[0] = () => {
+              var m;
+              S(), (m = o.toast.cancel) != null && m.onClick && o.toast.cancel.onClick();
+            })
+          }, null, 32)) : createCommentVNode("", true)
         ]),
-        _ctx.$slots.description ? (openBlock(), createElementBlock("div", _hoisted_3, [
-          renderSlot(_ctx.$slots, "description", {}, void 0, true)
-        ])) : createCommentVNode("", true),
-        _ctx.$slots.timeout ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          renderSlot(_ctx.$slots, "timeout", {}, void 0, true)
-        ])) : createCommentVNode("", true)
-      ], 2);
-    };
+        o.toast.description ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          "data-description": "",
+          class: normalizeClass(o.descriptionClass + unref(E))
+        }, toDisplayString(o.toast.description), 3)) : createCommentVNode("", true)
+      ]),
+      o.toast.cancel ? (openBlock(), createElementBlock("button", {
+        key: 2,
+        "data-button": "",
+        "data-cancel": "",
+        onClick: l[1] || (l[1] = () => {
+          var m;
+          S(), (m = o.toast.cancel) != null && m.onClick && o.toast.cancel.onClick();
+        })
+      }, toDisplayString(o.toast.cancel.label), 1)) : createCommentVNode("", true),
+      o.toast.action ? (openBlock(), createElementBlock("button", {
+        key: 3,
+        "data-button": "",
+        onClick: l[2] || (l[2] = () => {
+          var m;
+          S(), (m = o.toast.action) == null || m.onClick();
+        })
+      }, toDisplayString(o.toast.action.label), 1)) : createCommentVNode("", true)
+    ], 46, ce));
   }
-});
-const FlowToastLayout = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c76046db"]]);
-const _hoisted_1$1 = { class: "toast" };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "FlowToast",
+}), xe = ["aria-label"], we = ["dir", "data-theme", "data-rich-colors", "data-y-position", "data-x-position"], ke = 3, rt = "32px", Te = 4e3, _e = 356, it = 14, $e = typeof window < "u" && typeof document < "u", Ce = /* @__PURE__ */ defineComponent({
+  name: "Toaster",
+  inheritAttrs: false,
+  __name: "Toaster",
   props: {
-    toast: {}
+    invert: { type: Boolean, default: false },
+    theme: { default: "light" },
+    position: { default: "bottom-right" },
+    hotkey: { default: () => ["altKey", "KeyT"] },
+    richColors: { type: Boolean, default: false },
+    expand: { type: Boolean, default: false },
+    duration: { default: Te },
+    gap: { default: it },
+    visibleToasts: { default: ke },
+    closeButton: { type: Boolean, default: false },
+    toastOptions: { default: () => ({}) },
+    className: { default: "" },
+    style: { default: () => ({}) },
+    offset: { default: rt },
+    dir: { default: "auto" }
   },
-  setup(__props) {
-    const isCustom = (t) => {
-      return t.component !== void 0;
-    };
-    return (_ctx, _cache) => {
-      var _a, _b;
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
-        isCustom(_ctx.toast) ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.toast.component), { key: 0 }, createSlots({ _: 2 }, [
-          ((_a = _ctx.toast.options) == null ? void 0 : _a.timeout) ? {
-            name: "timeout",
-            fn: withCtx(() => [
-              createVNode(FlowProgressRing, {
-                duration: _ctx.toast.options.timeout
-              }, null, 8, ["duration"])
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1024)) : createCommentVNode("", true),
-        !isCustom(_ctx.toast) ? (openBlock(), createBlock(FlowToastLayout, {
-          key: 1,
-          status: _ctx.toast.status
-        }, createSlots({
-          title: withCtx(() => [
-            createTextVNode(toDisplayString(_ctx.toast.title), 1)
-          ]),
-          _: 2
+  setup(r) {
+    const t = r, e = useAttrs(), n = ref([]), a = ref([]), p = ref(false), u = ref(false), h = ref(
+      t.theme !== "system" ? t.theme : typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+    ), x = computed(() => t.position.split("-")), w = ref(null), z = t.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+    function L(s) {
+      n.value = n.value.filter(({ id: i }) => i !== s.id);
+    }
+    function U() {
+      if (typeof window > "u")
+        return "ltr";
+      const s = document.documentElement.getAttribute("dir");
+      return s === "auto" || !s ? window.getComputedStyle(document.documentElement).direction : s;
+    }
+    return onMounted(() => {
+      const s = k.subscribe((i) => {
+        if (i.dismiss) {
+          n.value = n.value.map(
+            (b) => b.id === i.id ? { ...b, delete: true } : b
+          );
+          return;
+        }
+        nextTick(() => {
+          const b = n.value.findIndex((y) => y.id === i.id);
+          b !== -1 ? n.value.splice(b, 1, i) : n.value = [i, ...n.value];
+        });
+      });
+      onUnmounted(() => {
+        s();
+      });
+    }), watch(
+      () => t.theme,
+      (s) => {
+        if (s !== "system") {
+          h.value = s;
+          return;
+        }
+        s === "system" && (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? h.value = "dark" : h.value = "light"), !(typeof window > "u") && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches: i }) => {
+          i ? h.value = "dark" : h.value = "light";
+        });
+      }
+    ), watchEffect(() => {
+      n.value.length <= 1 && (p.value = false);
+    }), watchEffect((s) => {
+      function i(b) {
+        var N, B;
+        t.hotkey.every(
+          (E) => b[E] || b.code === E
+        ) && (p.value = true, (N = w.value) == null || N.focus()), b.code === "Escape" && (document.activeElement === w.value || (B = w.value) != null && B.contains(document.activeElement)) && (p.value = false);
+      }
+      $e && (document.addEventListener("keydown", i), s(() => {
+        document.removeEventListener("keydown", i);
+      }));
+    }), (s, i) => {
+      var b;
+      return openBlock(), createElementBlock("section", {
+        "aria-label": `Notifications ${unref(z)}`,
+        tabIndex: -1
+      }, [
+        createElementVNode("ol", {
+          ref_key: "listRef",
+          ref: w,
+          "data-sonner-toaster": "",
+          dir: s.dir === "auto" ? U() : s.dir,
+          tabIndex: -1,
+          "data-theme": s.theme,
+          "data-rich-colors": s.richColors,
+          "data-y-position": x.value[0],
+          "data-x-position": x.value[1],
+          style: normalizeStyle(
+            {
+              "--front-toast-height": `${(b = a.value[0]) == null ? void 0 : b.height}px`,
+              "--offset": typeof s.offset == "number" ? `${s.offset}px` : s.offset || rt,
+              "--width": `${_e}px`,
+              "--gap": `${it}px`,
+              ...unref(e).style
+            }
+          ),
+          onMouseenter: i[1] || (i[1] = (y) => p.value = true),
+          onMousemove: i[2] || (i[2] = (y) => p.value = true),
+          onMouseleave: i[3] || (i[3] = () => {
+            u.value || (p.value = false);
+          }),
+          onPointerdown: i[4] || (i[4] = (y) => u.value = false),
+          onPointerup: i[5] || (i[5] = (y) => u.value = false)
         }, [
-          _ctx.toast.description ? {
-            name: "description",
-            fn: withCtx(() => [
-              typeof _ctx.toast.description === "string" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                createTextVNode(toDisplayString(_ctx.toast.description), 1)
-              ], 64)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.toast.description), { key: 1 }))
-            ]),
-            key: "0"
-          } : void 0,
-          ((_b = _ctx.toast.options) == null ? void 0 : _b.timeout) ? {
-            name: "timeout",
-            fn: withCtx(() => [
-              createVNode(FlowProgressRing, {
-                duration: _ctx.toast.options.timeout
-              }, null, 8, ["duration"])
-            ]),
-            key: "1"
-          } : void 0
-        ]), 1032, ["status"])) : createCommentVNode("", true)
-      ]);
+          (openBlock(true), createElementBlock(Fragment, null, renderList(n.value, (y, N) => {
+            var B, E, V, P;
+            return openBlock(), createBlock(ye, {
+              key: y.id,
+              index: N,
+              toast: y,
+              duration: ((B = s.toastOptions) == null ? void 0 : B.duration) ?? s.duration,
+              className: (E = s.toastOptions) == null ? void 0 : E.className,
+              descriptionClassName: (V = s.toastOptions) == null ? void 0 : V.descriptionClassName,
+              invert: s.invert,
+              visibleToasts: s.visibleToasts,
+              closeButton: s.closeButton,
+              interacting: u.value,
+              position: s.position,
+              style: normalizeStyle((P = s.toastOptions) == null ? void 0 : P.style),
+              toasts: n.value,
+              expandByDefault: s.expand,
+              gap: s.gap,
+              expanded: p.value,
+              heights: a.value,
+              "onUpdate:heights": i[0] || (i[0] = (K) => a.value = K),
+              onRemoveToast: L
+            }, null, 8, ["index", "toast", "duration", "className", "descriptionClassName", "invert", "visibleToasts", "closeButton", "interacting", "position", "style", "toasts", "expandByDefault", "gap", "expanded", "heights"]);
+          }), 128))
+        ], 44, we)
+      ], 8, xe);
     };
   }
 });
-const FlowToast = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-5e2e8f38"]]);
-const _hoisted_1 = { class: "toast-container" };
+const state = {
+  toast: () => null
+};
+function initializeToasts(toastFunction) {
+  state.toast = toastFunction;
+}
+function useToasts() {
+  return {
+    initializeToasts,
+    toast: (message, level = "info", options = { timeout: 3e3 }) => {
+      state.toast(message, level, options);
+    }
+  };
+}
 const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "FlowToastContainer",
+  __name: "ScalarToasts",
   setup(__props) {
-    const { toasts: toasts2 } = useToasts();
+    const isClientMounted = ref(false);
+    onMounted(() => isClientMounted.value = true);
+    const toastMethods = {
+      success: Ie.success,
+      error: Ie.error,
+      warn: Ie.warning,
+      info: Ie
+    };
+    const { initializeToasts: initializeToasts2 } = useToasts();
+    initializeToasts2((message, level = "info", options = {}) => {
+      const toastAction = toastMethods[level] || toastMethods.info;
+      toastAction(message, {
+        duration: options.timeout || 3e3
+      });
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(TransitionGroup, { name: "toasts" }, {
-          default: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(toasts2), (toast) => {
-              return openBlock(), createBlock(FlowToast, {
-                key: toast.id,
-                toast
-              }, null, 8, ["toast"]);
-            }), 128))
-          ]),
-          _: 1
-        })
-      ]);
+      return isClientMounted.value ? (openBlock(), createBlock(unref(Ce), {
+        key: 0,
+        toastOptions: { className: "toaster" }
+      })) : createCommentVNode("", true);
     };
   }
 });
-const FlowToastContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e7c9664e"]]);
 export {
-  FlowToastContainer,
-  addCustomToast,
-  addErrorToast,
-  addToast,
+  _sfc_main as ScalarToasts,
+  initializeToasts,
   useToasts
 };

package.json

@@ -15,3 +15,3 @@ {
   ],
-  "version": "0.5.15",
+  "version": "0.6.1",
   "engines": {
@@ -44,3 +44,4 @@ "node": ">=18"
     "nanoid": "4 - 5",
-    "vue": "^3.3.0"
+    "vue": "^3.3.0",
+    "vue-sonner": "^1.0.3"
   },
@@ -47,0 +48,0 @@ "scripts": {

README.md

@@ -19,7 +19,6 @@ # Scalar useToasts()
 <script setup>
-import { FlowToastContainer } from '@scalar/use-toasts'
+import { ScalarToasts } from '@scalar/use-toasts'
 </script>
-
 <template>
-  <FlowToastContainer />
+  <ScalarToasts />
 </template>
@@ -33,4 +32,8 @@ ```
 
-addToast({ title: 'Hello :-)' }, { timeout: 2000 })
+const { toast } = useToasts()
+
+const sendMessage = () => {
+  toast('This is a message from the toaster!', 'success', { timeout: 2000 })
+}
 </script>
 ```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44950

increased by85.96%

Lines of code

682

increased by91.57%

Number of lines in readme file

38

increased by8.57%

Worsened metrics

Dependency count

3

increased by50%

Number of package files

13

decreased by-23.53%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes