@t007/toast 0.0.2 → 0.0.4

package/dist/index.global.js

@@ -1,6 +1,5 @@
-(function (exports) {
-  'use strict';
-
+"use strict";
+(() => {
   // ../utils/dist/index.js
   function clamp(min = 0, val, max = Infinity) {
     return Math.min(Math.max(val, min), max);
@@ -17,14 +16,20 @@
       return src1.replace(/\\/g, "/").split("?")[0].trim() === src2.replace(/\\/g, "/").split("?")[0].trim();
     }
   }
-  function createEl(tag, props = {}, dataset = {}, styles = {}) {
-    return assignEl(tag ? document?.createElement(tag) : void 0, props, dataset, styles) ?? null;
+  function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
+    return assignEl(el, props, dataset, styles), el;
   }
-  function assignEl(el, props = {}, dataset = {}, styles = {}) {
+  function assignEl(el, props, dataset, styles) {
     if (!el) return;
-    for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
-    for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
-    for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+    if (props) {
+      for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
+    }
+    if (dataset) {
+      for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
+    }
+    if (styles) {
+      for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+    }
   }
   function loadResource(src, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
     w.t007._resourceCache ??= {};
@@ -72,9 +77,9 @@
     window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
     window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
     window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
-    window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/style.css`;
-    window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/style.css`;
-    window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/style.css`;
+    window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/style.css`;
+    window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/style.css`;
+    window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/style.css`;
   }
 
   // src/index.js
@@ -515,13 +520,4 @@
     window.Toast ??= t007.toast;
     console.log("%cT007 Toasts attached to window!", "color: darkturquoise");
   }
-
-  exports.default = index_default;
-  exports.toaster = toaster;
-  exports.toasting = toasting;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-  return exports;
-
-})({});
+})();

package/dist/index.js

@@ -1,80 +1,5 @@
-// ../utils/dist/index.js
-function clamp(min = 0, val, max = Infinity) {
-  return Math.min(Math.max(val, min), max);
-}
-function uid(prefix = "") {
-  return prefix + Date.now().toString(36) + "_" + performance.now().toString(36).replace(".", "") + "_" + Math.random().toString(36).slice(2);
-}
-function isSameURL(src1, src2) {
-  if (typeof src1 !== "string" || typeof src2 !== "string" || !src1 || !src2) return false;
-  try {
-    const u1 = new URL(src1, window.location.href), u2 = new URL(src2, window.location.href);
-    return decodeURIComponent(u1.origin + u1.pathname) === decodeURIComponent(u2.origin + u2.pathname);
-  } catch {
-    return src1.replace(/\\/g, "/").split("?")[0].trim() === src2.replace(/\\/g, "/").split("?")[0].trim();
-  }
-}
-function createEl(tag, props = {}, dataset = {}, styles = {}) {
-  return assignEl(tag ? document?.createElement(tag) : void 0, props, dataset, styles) ?? null;
-}
-function assignEl(el, props = {}, dataset = {}, styles = {}) {
-  if (!el) return;
-  for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
-  for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
-  for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
-}
-function loadResource(src, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
-  w.t007._resourceCache ??= {};
-  if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
-  const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
-  if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
-  w.t007._resourceCache[src] = new Promise((resolve, reject) => {
-    (function tryLoad(remaining, el) {
-      const onerror = () => {
-        el?.remove?.();
-        if (remaining > 1) {
-          setTimeout(tryLoad, 1e3, remaining - 1);
-          console.warn(`Retrying ${type} load (${attempts - remaining + 1}): ${src}...`);
-        } else {
-          delete w.t007._resourceCache[src];
-          reject(new Error(`${type} load failed after ${attempts} attempts: ${src}`));
-        }
-      };
-      const url = retryKey && remaining < attempts ? `${src}${src.includes("?") ? "&" : "?"}_${retryKey}=${Date.now()}` : src;
-      if (type === "script") w.document.body.append(el = createEl("script", { src: url, type: module ? "module" : "text/javascript", crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
-      else if (type === "style") w.document.head.append(el = createEl("link", { rel: "stylesheet", href: url, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
-      else reject(new Error(`Unsupported resource type: ${type}`));
-    })(attempts);
-  });
-  return w.t007._resourceCache[src];
-}
-function onAllMethods(owner, callback) {
-  let proto = owner;
-  while (proto && proto !== Object.prototype) {
-    for (const method of Object.getOwnPropertyNames(proto)) {
-      if (method === "constructor") continue;
-      if ("function" !== typeof Object.getOwnPropertyDescriptor(proto, method)?.value) continue;
-      callback(method, owner);
-    }
-    proto = Object.getPrototypeOf(proto);
-  }
-}
-function bindAllMethods(owner) {
-  onAllMethods(owner, (method, owner2) => {
-    owner2[method] = owner2[method].bind(owner2);
-  });
-}
-if (typeof window !== "undefined") {
-  window.t007 ??= {};
-  window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
-  window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
-  window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
-  window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/style.css`;
-  window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/style.css`;
-  window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/style.css`;
-}
-
 // src/index.js
+import { clamp, uid, bindAllMethods, createEl, loadResource } from "@t007/utils";
 var T007_Toast = class {
   #autoCloseInterval;
   #progressInterval;
@@ -512,5 +437,8 @@ if (typeof window !== "undefined") {
   window.Toast ??= t007.toast;
   console.log("%cT007 Toasts attached to window!", "color: darkturquoise");
 }
-
-export { index_default as default, toaster, toasting };
+export {
+  index_default as default,
+  toaster,
+  toasting
+};

package/dist/standalone.js

@@ -0,0 +1,525 @@
+// ../utils/dist/index.js
+function clamp(min = 0, val, max = Infinity) {
+  return Math.min(Math.max(val, min), max);
+}
+function uid(prefix = "") {
+  return prefix + Date.now().toString(36) + "_" + performance.now().toString(36).replace(".", "") + "_" + Math.random().toString(36).slice(2);
+}
+function isSameURL(src1, src2) {
+  if (typeof src1 !== "string" || typeof src2 !== "string" || !src1 || !src2) return false;
+  try {
+    const u1 = new URL(src1, window.location.href), u2 = new URL(src2, window.location.href);
+    return decodeURIComponent(u1.origin + u1.pathname) === decodeURIComponent(u2.origin + u2.pathname);
+  } catch {
+    return src1.replace(/\\/g, "/").split("?")[0].trim() === src2.replace(/\\/g, "/").split("?")[0].trim();
+  }
+}
+function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
+  return assignEl(el, props, dataset, styles), el;
+}
+function assignEl(el, props, dataset, styles) {
+  if (!el) return;
+  if (props) {
+    for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
+  }
+  if (dataset) {
+    for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
+  }
+  if (styles) {
+    for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+  }
+}
+function loadResource(src, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
+  w.t007._resourceCache ??= {};
+  if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
+  const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
+  if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
+  w.t007._resourceCache[src] = new Promise((resolve, reject) => {
+    (function tryLoad(remaining, el) {
+      const onerror = () => {
+        el?.remove?.();
+        if (remaining > 1) {
+          setTimeout(tryLoad, 1e3, remaining - 1);
+          console.warn(`Retrying ${type} load (${attempts - remaining + 1}): ${src}...`);
+        } else {
+          delete w.t007._resourceCache[src];
+          reject(new Error(`${type} load failed after ${attempts} attempts: ${src}`));
+        }
+      };
+      const url = retryKey && remaining < attempts ? `${src}${src.includes("?") ? "&" : "?"}_${retryKey}=${Date.now()}` : src;
+      if (type === "script") w.document.body.append(el = createEl("script", { src: url, type: module ? "module" : "text/javascript", crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
+      else if (type === "style") w.document.head.append(el = createEl("link", { rel: "stylesheet", href: url, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
+      else reject(new Error(`Unsupported resource type: ${type}`));
+    })(attempts);
+  });
+  return w.t007._resourceCache[src];
+}
+function onAllMethods(owner, callback) {
+  let proto = owner;
+  while (proto && proto !== Object.prototype) {
+    for (const method of Object.getOwnPropertyNames(proto)) {
+      if (method === "constructor") continue;
+      if ("function" !== typeof Object.getOwnPropertyDescriptor(proto, method)?.value) continue;
+      callback(method, owner);
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+}
+function bindAllMethods(owner) {
+  onAllMethods(owner, (method, owner2) => {
+    owner2[method] = owner2[method].bind(owner2);
+  });
+}
+if (typeof window !== "undefined") {
+  window.t007 ??= {};
+  window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
+  window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
+  window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
+  window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/style.css`;
+  window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/style.css`;
+  window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/style.css`;
+}
+
+// src/index.js
+var T007_Toast = class {
+  #autoCloseInterval;
+  #progressInterval;
+  #timeVisible = 0;
+  #isPaused = false;
+  #shouldUnPause;
+  queue = [];
+  destroyed = true;
+  #visiblityChange = () => this.#shouldUnPause = document.visibilityState === "visible";
+  constructor(options) {
+    bindAllMethods(this);
+    this.opts = { ...options };
+    this.id = this.opts.id ??= uid(this.opts.idPrefix ?? "t007_toast_");
+    t007.toasts.set(this.id, this);
+    "number" !== typeof this.opts.delay ? this.init() : this.queue.push(setTimeout(this.init, this.opts.delay));
+    this.update(this.opts);
+  }
+  init() {
+    this.toastElement = createEl("div", { className: "t007-toast", id: this.id, ariaAtomic: "true" }, { idPrefix: this.opts.idPrefix });
+    requestAnimationFrame(() => this.toastElement.classList.add("t007-toast-show"));
+    this.destroyed = false;
+  }
+  update(options) {
+    if (!options || typeof options !== "object") return this.opts.id;
+    try {
+      this.opts = { ...this.opts, ...options };
+      const run = () => Object.keys(options).forEach((key) => this[key] = options[key]);
+      "number" !== typeof this.opts.delay ? run() : this.queue.push(setTimeout(run, this.opts.delay));
+      this.opts.delay = null;
+    } catch (err) {
+      console.error("toast update failed:", err);
+    }
+    return this.opts.id;
+  }
+  play = () => setTimeout(() => this.#isPaused = false);
+  pause = () => this.#isPaused = true;
+  set rootElement(value) {
+    const container = value?.querySelector(`.t007-toast-container[data-position="${this.opts.position}"]`);
+    container?.style.setProperty("--t007-toast-container-position", value === document.body ? "fixed" : "absolute");
+    container && !value.contains(container) && value.append(container);
+  }
+  set type(value) {
+    this.toastElement.classList.remove("info", "success", "error", "warning");
+    value && this.toastElement.classList.add(value);
+    this.toastElement.role = value === "error" || value === "warning" ? "alert" : "status";
+    this.toastElement.ariaLive = value === "error" || value === "warning" ? "assertive" : "polite";
+    if (value) this.icon = this.opts.icon;
+  }
+  set bodyHTML(value) {
+    this.toastElement.querySelectorAll(".t007-toast > *:not(.t007-toast-cancel-button)").forEach((el) => el.remove());
+    this.toastElement.insertAdjacentHTML("afterbegin", `${value ? typeof value === "function" ? value() : value : ""}`);
+  }
+  set render(value) {
+    const bodyText = () => this.toastElement.querySelector(".t007-toast-body-text");
+    if (value) {
+      this._setUpBodyHTML();
+      this.toastElement.querySelector(".t007-toast-body").prepend(bodyText() || createEl("p", { className: "t007-toast-body-text" }));
+      const text = bodyText();
+      text.innerHTML = text.dataset.render = typeof value === "function" ? value() : value;
+    } else bodyText()?.remove();
+  }
+  set actions(value) {
+    const actionsWrapper = () => this.toastElement.querySelector(".t007-toast-actions-wrapper"), values = value ? Object.entries(value) : [];
+    if (values.length) {
+      this._setUpBodyHTML();
+      this.toastElement.querySelector(".t007-toast-body").insertAdjacentElement("afterend", actionsWrapper() || createEl("div", { className: "t007-toast-actions-wrapper" }));
+      const wrapper = actionsWrapper();
+      wrapper.innerHTML = values.map(([label]) => label ? `<button class="t007-toast-action-button" data-action="${label}">${label}</button>` : "").join("");
+      wrapper.querySelectorAll(".t007-toast-action-button").forEach((btn, i) => btn.onclick = (e) => values[i][1]?.(e, this));
+    } else actionsWrapper()?.remove();
+  }
+  set image(value) {
+    const image = () => this.toastElement.querySelector(".t007-toast-image");
+    if (value) {
+      this._setUpBodyHTML();
+      this.toastElement.querySelector(".t007-toast-image-wrapper").prepend(
+        image() || createEl("img", {
+          className: "t007-toast-image",
+          alt: "toast-image"
+        })
+      );
+      const img = image();
+      img.src = value;
+      img.onload = img.onerror = () => img.dataset.loaded = img.complete && img.naturalWidth > 0;
+    } else image()?.remove();
+  }
+  get icon() {
+    return this.opts.icon === true ? t007.TOAST_ICONS[this.opts.type] || "" : this.opts.icon || "";
+  }
+  set icon(value) {
+    if (this.opts.isLoading) return;
+    const icon = () => this.toastElement.querySelector(".t007-toast-icon:not(.t007-toast-loader)");
+    if (value) {
+      this._setUpBodyHTML();
+      this.toastElement.querySelector(".t007-toast-image-wrapper").appendChild(icon() || createEl("span", { className: "t007-toast-icon" }));
+      const icn = icon();
+      icn.innerHTML = icn.dataset.icon = this.icon;
+    } else icon()?.remove();
+  }
+  set isLoading(value) {
+    const loader = () => this.toastElement.querySelector(".t007-toast-loader");
+    if (value) {
+      this._setUpBodyHTML();
+      this.toastElement.querySelectorAll(".t007-toast-icon:not(.t007-toast-loader)").forEach((i) => i.remove());
+      this.toastElement.querySelector(".t007-toast-image-wrapper").appendChild(
+        loader() || createEl("span", {
+          className: "t007-toast-icon t007-toast-loader"
+        })
+      );
+      loader().innerHTML = typeof value === "string" ? value : t007.TOAST_ICONS.loading;
+    } else {
+      loader()?.remove();
+      this.icon = this.opts.icon;
+    }
+  }
+  set closeButton(value) {
+    const btn = this.toastElement.querySelector(".t007-toast-cancel-button");
+    if (value)
+      this.toastElement.appendChild(
+        btn || createEl("button", {
+          title: "Close",
+          ariaLabel: "Close notification",
+          className: "t007-toast-cancel-button",
+          innerHTML: "&times;",
+          onclick: this._remove
+        })
+      );
+    else btn?.remove();
+  }
+  get animation() {
+    if (this.opts.animation === true || this.opts.animation === "slide")
+      switch (this.opts.position) {
+        case "top-right":
+        case "center-right":
+        case "bottom-right":
+          return "slide-left";
+        case "top-center":
+        case "center-center":
+        case "bottom-center":
+          return this.opts.position === "top-center" ? "slide-down" : "slide-up";
+        case "top-left":
+        case "center-left":
+        case "bottom-left":
+        default:
+          return "slide-right";
+      }
+    return this.opts.animation;
+  }
+  set animation(value) {
+    this.toastElement.dataset.animation = this.animation;
+  }
+  get autoClose() {
+    return this.opts.autoClose === true ? t007.TOAST_DURATIONS[this.opts.type] || t007.TOAST_DURATIONS.info : this.opts.autoClose;
+  }
+  set autoClose(value) {
+    cancelAnimationFrame(this.#autoCloseInterval);
+    this.#timeVisible = 0;
+    let lastTime;
+    const loop = (time) => {
+      if (this.#shouldUnPause) {
+        lastTime = null;
+        this.#shouldUnPause = false;
+      }
+      if (lastTime == null) {
+        lastTime = time;
+        return this.#autoCloseInterval = requestAnimationFrame(loop);
+      }
+      if (!this.#isPaused) {
+        this.#timeVisible += time - lastTime;
+        this.onTimeUpdate?.(this.#timeVisible);
+        if ("number" == typeof this.autoClose && this.#timeVisible >= this.autoClose) return this._remove("smooth", true);
+      }
+      lastTime = time;
+      this.#autoCloseInterval = requestAnimationFrame(loop);
+    };
+    if (value) this.#autoCloseInterval = requestAnimationFrame(loop);
+  }
+  set position(value) {
+    const currentContainer = this.toastElement.parentElement;
+    const container = this.opts.rootElement?.querySelector(`.t007-toast-container[data-position="${value}"]`) || this._createContainer(value);
+    container[this.opts.newestOnTop ? "prepend" : "append"](this.toastElement);
+    if (!(currentContainer == null || currentContainer.hasChildNodes())) currentContainer.remove();
+  }
+  set closeOnClick(value) {
+    this.toastElement.onclick = value ? () => this._remove() : null;
+  }
+  set hideProgressBar(value) {
+    this.toastElement.classList.toggle("progress", !value);
+    this.nprogress = 0;
+    cancelAnimationFrame(this.#progressInterval);
+    const loop = () => {
+      if ("number" == typeof this.autoClose && !this.#isPaused) this.nprogress = 1 - this.#timeVisible / this.autoClose;
+      this.#progressInterval = requestAnimationFrame(loop);
+    };
+    if (!value) this.#progressInterval = requestAnimationFrame(loop);
+  }
+  get nprogress() {
+    return Number(this.toastElement.style.getProperty("--progress"));
+  }
+  set nprogress(value) {
+    this.toastElement.style.setProperty("--progress", value);
+  }
+  set pauseOnHover(value) {
+    this.toastElement.onmouseover = value ? this.pause : null;
+    this.toastElement.onmouseleave = value ? this.play : null;
+    this.toastElement[value ? "addEventListener" : "removeEventListener"]("touchend", this.play);
+  }
+  set pauseOnFocusLoss(value) {
+    value ? document.addEventListener("visibilitychange", this.#visiblityChange) : document.removeEventListener("visibilitychange", this.#visiblityChange);
+  }
+  set tag(value) {
+    this.toastElement.dataset.tag = value;
+  }
+  set renotify(value) {
+    value && this.opts.tag && t007.toasts.entries().forEach(([id, toast2]) => id !== this.id && (toast2.opts.tag ?? 1) === (this.opts.tag ?? 0) && toast2._remove("instant"));
+  }
+  get vibrate() {
+    return this.opts.vibrate === true ? t007.TOAST_VIBRATIONS[this.opts.type] || t007.TOAST_VIBRATIONS.info : this.opts.vibrate;
+  }
+  set vibrate(value) {
+    value && navigator?.vibrate?.(this.vibrate);
+  }
+  set maxToasts(value) {
+    const toastsInContainer = [...this.toastElement?.parentElement?.children || []];
+    if (!toastsInContainer.length) return;
+    for (let i = 0; i < toastsInContainer.length - value; i++) {
+      [...t007.toasts.values()].find((t) => t.toastElement === (this.opts.newestOnTop ? toastsInContainer[toastsInContainer.length - 1 - i] : toastsInContainer[i]))?._remove("instant");
+    }
+  }
+  set newestOnTop(value) {
+    this.toastElement?.parentElement?.[value ? "prepend" : "append"](this.toastElement);
+  }
+  set dragToClose(value) {
+    this.toastElement.dataset.dragToClose = this._ptrType = value;
+    this.toastElement.onpointerdown = value ? this._handleToastPointerStart : null;
+    this.toastElement.onpointerup = value ? this._handleToastPointerUp : null;
+  }
+  _handleToastPointerStart(e) {
+    if (typeof this._ptrType === "string" && e.pointerType !== this._ptrType) return;
+    if (e.touches?.length > 1) return;
+    !e.target?.matches('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])') && this.toastElement.setPointerCapture(e.pointerId);
+    this.#isPaused = true;
+    this._ptrTicker = this._ptrDirSet = this._ptrDir = false;
+    this._ptrStartX = e.clientX ?? e.targetTouches[0]?.clientX;
+    this._ptrStartY = e.clientY ?? e.targetTouches[0]?.clientY;
+    this.toastElement.addEventListener("pointermove", this._handleToastPointerMove, { passive: false });
+    this.toastElement.style.setProperty("transition", "none", "important");
+  }
+  _handleToastPointerMove(e) {
+    e.preventDefault();
+    if (this._ptrTicker) return;
+    this._ptrRAF = requestAnimationFrame(() => {
+      const has = (str) => this.opts.dragToCloseDir.includes(str), x = e.clientX ?? e.targetTouches[0]?.clientX, y = e.clientY ?? e.targetTouches[0]?.clientY;
+      this._ptrDir ||= Math.abs(x - this._ptrStartX) >= Math.abs(y - this._ptrStartY) ? "x" : "y";
+      this._ptrDeltaX = (has("|") ? this._ptrDir == "x" : has("x")) && !has(x - this._ptrStartX > 0 ? "-" : "+") ? x - this._ptrStartX : 0;
+      this._ptrDeltaY = (has("|") ? this._ptrDir == "y" : has("y")) && !has(y - this._ptrStartY > 0 ? "+" : "-") ? y - this._ptrStartY : 0;
+      this.toastElement.style.setProperty("transform", `translate(${this._ptrDeltaX}px, ${this._ptrDeltaY}px)`, "important");
+      const xR = Math.abs(this._ptrDeltaX) / this.toastElement.offsetWidth, yR = Math.abs(this._ptrDeltaY) / this.toastElement.offsetHeight;
+      this.toastElement.style.setProperty("opacity", clamp(0, 1 - (yR > 0.5 ? yR : xR), 1), "important");
+      if (!this._ptrDirSet && !xR && !yR) this._ptrDir = false;
+      if (this._ptrDir) this._ptrDirSet = has("||");
+      this._ptrTicker = false;
+    });
+    this._ptrTicker = true;
+  }
+  _handleToastPointerUp(e) {
+    if (typeof this._ptrType === "string" && e.pointerType !== this._ptrType) return;
+    cancelAnimationFrame(this._ptrRAF);
+    if (Math.abs(this._ptrDeltaX) > this.toastElement.offsetWidth * (this.opts.dragToClosePercent.x ?? this.opts.dragToClosePercent / 100) || Math.abs(this._ptrDeltaY) > this.toastElement.offsetHeight * (this.opts.dragToClosePercent.y ?? this.opts.dragToClosePercent / 100)) return this._remove("instant");
+    this.#isPaused = this._ptrTicker = this._ptrDirSet = this._ptrDir = false;
+    this.toastElement.removeEventListener("pointermove", this._handleToastPointerMove, { passive: false });
+    this.toastElement.style.removeProperty("transition");
+    this.toastElement.style.removeProperty("transform");
+    this.toastElement.style.removeProperty("opacity");
+  }
+  _remove(manner = "smooth", timeElapsed = false) {
+    if (!this.opts.isLoading) t007.toasts.delete(this.id);
+    this.queue.forEach(clearTimeout);
+    document.removeEventListener("visibilitychange", this.#visiblityChange);
+    cancelAnimationFrame(this.#autoCloseInterval);
+    cancelAnimationFrame(this.#progressInterval);
+    if (this.destroyed || manner === "instant" || !this.animation) this._cleanUpToast();
+    else this.toastElement.onanimationend = this._cleanUpToast;
+    this.toastElement.classList.remove("t007-toast-show");
+    this.onClose?.(timeElapsed);
+  }
+  _createContainer(position) {
+    const container = document.createElement("div");
+    container.classList.add("t007-toast-container");
+    container.style.setProperty("--t007-toast-container-position", this.opts.rootElement === document.body ? "fixed" : "absolute");
+    container.dataset.position = position;
+    this.opts.rootElement?.append(container);
+    return container;
+  }
+  _setUpBodyHTML() {
+    this.toastElement.querySelectorAll(".t007-toast > *:not(.t007-toast-image-wrapper, .t007-toast-body, .t007-toast-actions-wrapper, .t007-toast-cancel-button)").forEach((el) => el.remove());
+    const imageWrapper = () => this.toastElement.querySelector(".t007-toast-image-wrapper");
+    if (!imageWrapper()) this.toastElement.prepend(createEl("div", { className: "t007-toast-image-wrapper" }));
+    if (!this.toastElement.querySelector(".t007-toast-body")) imageWrapper().insertAdjacentElement("afterend", createEl("div", { className: "t007-toast-body" }));
+  }
+  _cleanUpToast() {
+    const container = this.toastElement.parentElement;
+    this.toastElement.remove();
+    if (!container?.hasChildNodes()) container?.remove();
+    this.destroyed = true;
+  }
+};
+var toasting = {
+  update(base, id, options) {
+    const toast2 = t007.toasts.get(id);
+    toast2?.queue.forEach(clearTimeout);
+    return !!toast2 && (toast2.destroyed ? base(options.render, { ...toast2.opts, id, ...options }) : toast2.update(options));
+  },
+  message: (base, defaults, action) => base[action] = (renderOrId, options = {}) => {
+    options = { ...options, type: action === "warn" ? "warning" : action };
+    if (!t007.toasts.get(renderOrId)) return base(renderOrId, options);
+    const { autoClose, closeButton, closeOnClick, dragToClose } = defaults();
+    return base.update(renderOrId, {
+      ...t007.toasts.get(renderOrId)?.opts.isLoading ? { autoClose, closeButton, closeOnClick, dragToClose } : {},
+      ...options,
+      isLoading: false
+    });
+  },
+  loading: (base, renderOrId, options = {}) => (t007.toasts.get(renderOrId) ? base.update : base)(renderOrId, {
+    autoClose: false,
+    closeButton: false,
+    closeOnClick: false,
+    dragToClose: false,
+    ...options,
+    isLoading: options.isLoading || true,
+    type: ""
+  }),
+  promise(base, promise = new Promise((res, rej) => setTimeout(Math.round(Math.random()) ? res : rej, 3e3)), { pending, success, error } = {}) {
+    if (!promise || typeof promise.then !== "function") return console.error("toast.promise() requires a valid promise");
+    const NFC = (input, type) => typeof input === "string" ? { render: input, type } : typeof input === "object" ? { ...input, type } : { type };
+    const pendingConfig = NFC(pending);
+    const pendingToastId = base.loading(pendingConfig.render || "Promise pending...", { ...pendingConfig });
+    promise.then(
+      (response) => {
+        const successConfig = NFC(success || "Promise resolved", "success");
+        const { render, bodyHTML } = successConfig;
+        if (typeof render === "function") successConfig.render = (response2) => render(response2);
+        if (typeof bodyHTML === "function") successConfig.bodyHTML = (response2) => bodyHTML(response2);
+        base.success(pendingToastId, successConfig);
+        return response;
+      },
+      (err) => {
+        const errorConfig = NFC(error || "Promise rejected", "error");
+        const { render, bodyHTML } = errorConfig;
+        if (typeof render === "function") errorConfig.render = (err2) => render(err2);
+        if (typeof bodyHTML === "function") errorConfig.bodyHTML = (err2) => bodyHTML(err2);
+        base.error(pendingToastId, errorConfig);
+        return Promise.reject(err);
+      }
+    );
+    return promise;
+  },
+  dismiss(base, id, manner, timeElapsed) {
+    return !arguments.length ? base.dismissAll() : t007.toasts.get(id)?._remove(manner, timeElapsed);
+  },
+  dismissAll(base, idPrefix) {
+    t007.toasts.values().forEach((toast2) => (!arguments.length ? true : toast2.id.startsWith(idPrefix)) && toast2._remove());
+  },
+  doForAll(base, action, options, idPrefix) {
+    t007.toasts.keys().forEach((id) => (!arguments.length ? true : id.startsWith(idPrefix)) && base[action]?.(id, options));
+  },
+  getAll(base, idPrefix) {
+    return t007.toasts.values().filter((toast2) => !arguments.length ? true : toast2.id.startsWith(idPrefix));
+  }
+};
+var toaster = (defOptions = {}, idPrefix = "t007_toast_") => {
+  const defaults = () => ({ ...t007.TOAST_DEFAULT_OPTIONS, ...defOptions }), base = (render, options = {}) => new T007_Toast({
+    ...defaults(),
+    ...options,
+    id: render?.startsWith?.(idPrefix) ? render : options.id,
+    render: render?.startsWith?.(idPrefix) ? options.render : render,
+    idPrefix
+  }).id;
+  base.update = (id, options) => toasting.update(base, id, options);
+  ["info", "success", "warn", "error"].forEach((action) => toasting.message(base, defaults, action));
+  base.loading = (render, options) => toasting.loading(base, render, options);
+  base.promise = (promise, options) => toasting.promise(base, promise, options);
+  base.dismiss = (id, manner, timeElapsed) => toasting.dismiss(base, id, manner, timeElapsed);
+  base.dismissAll = (idPrefix2) => toasting.dismissAll(base, idPrefix2);
+  base.doForAll = (action, options, idPrefix2) => toasting.doForAll(base, action, options, idPrefix2);
+  base.getAll = (idPrefix2) => toasting.getAll(base, idPrefix2);
+  return base;
+};
+var toast = toaster();
+var src_default = toast;
+if (typeof window !== "undefined") {
+  t007.toast = toast;
+  t007.toasting = toasting;
+  t007.toaster = toaster;
+  t007.toasts = /* @__PURE__ */ new Map();
+  t007.TOAST_DEFAULT_OPTIONS ??= {};
+  t007.TOAST_DURATIONS ??= {};
+  t007.TOAST_VIBRATIONS ??= {};
+  t007.TOAST_ICONS ??= {};
+  t007.TOAST_DEFAULT_OPTIONS.rootElement ??= document.body;
+  t007.TOAST_DEFAULT_OPTIONS.render ??= "";
+  t007.TOAST_DEFAULT_OPTIONS.type ??= "";
+  t007.TOAST_DEFAULT_OPTIONS.icon ??= true;
+  t007.TOAST_DEFAULT_OPTIONS.image ??= false;
+  t007.TOAST_DEFAULT_OPTIONS.autoClose ??= true;
+  t007.TOAST_DEFAULT_OPTIONS.position ??= "top-right";
+  t007.TOAST_DEFAULT_OPTIONS.isLoading ??= false;
+  t007.TOAST_DEFAULT_OPTIONS.closeButton ??= !/Mobi|Android|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
+  t007.TOAST_DEFAULT_OPTIONS.closeOnClick ??= false;
+  t007.TOAST_DEFAULT_OPTIONS.hideProgressBar ??= false;
+  t007.TOAST_DEFAULT_OPTIONS.pauseOnHover ??= true;
+  t007.TOAST_DEFAULT_OPTIONS.pauseOnFocusLoss ??= true;
+  t007.TOAST_DEFAULT_OPTIONS.dragToClose ??= true;
+  t007.TOAST_DEFAULT_OPTIONS.dragToClosePercent ??= 40;
+  t007.TOAST_DEFAULT_OPTIONS.dragToCloseDir ??= "x";
+  t007.TOAST_DEFAULT_OPTIONS.renotify ??= true;
+  t007.TOAST_DEFAULT_OPTIONS.vibrate ??= false;
+  t007.TOAST_DEFAULT_OPTIONS.animation ??= true;
+  t007.TOAST_DEFAULT_OPTIONS.newestOnTop ??= false;
+  t007.TOAST_DEFAULT_OPTIONS.maxToasts ??= 1e3;
+  t007.TOAST_DURATIONS.success ??= 2500;
+  t007.TOAST_DURATIONS.error ??= 4500;
+  t007.TOAST_DURATIONS.warning ??= 3500;
+  t007.TOAST_DURATIONS.info ??= 4e3;
+  t007.TOAST_VIBRATIONS.success ??= [100, 50, 100];
+  t007.TOAST_VIBRATIONS.warning ??= [300, 100, 300];
+  t007.TOAST_VIBRATIONS.error ??= [500, 200, 500];
+  t007.TOAST_VIBRATIONS.info ??= [200];
+  t007.TOAST_ICONS.success ??= `<svg class="no-css-fill" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#27ae60"/><path fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 12l3 3l6-6"/></svg>`;
+  t007.TOAST_ICONS.error ??= `<svg class="no-css-fill" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#e74c3c"/><path fill="#fff" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M8 8l8 8M16 8l-8 8"/></svg>`;
+  t007.TOAST_ICONS.warning ??= `<svg class="no-css-fill" width="24" height="24" viewBox="0 0 24 24"><path fill="#f1c40f" stroke="#f39c12" stroke-width="2" stroke-linejoin="round" d="M12 3L2.5 20.5A2 2 0 0 0 4.5 23h15a2 2 0 0 0 2-2.5L12 3z"/><circle cx="12" cy="17" r="1.5" fill="#fff"/><path fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 8v6"/></svg>`;
+  t007.TOAST_ICONS.info ??= `<svg class="no-css-fill" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#3498db"/><path fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 10v6"/><circle cx="12" cy="7" r="1.5" fill="#fff"/></svg>`;
+  t007.TOAST_ICONS.loading ??= `<svg class="no-css-fill" width="24" height="24" viewBox="0 0 16 16" fill="none" style="scale:0.75;"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="whitesmoke" d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8"/><path fill="gray" d="M7.25.75A.75.75 0 0 1 8 0a8 8 0 0 1 8 8 .75.75 0 0 1-1.5 0A6.5 6.5 0 0 0 8 1.5a.75.75 0 0 1-.75-.75"/></g><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="600ms" repeatCount="indefinite"/></svg>`;
+  loadResource(T007_TOAST_CSS_SRC);
+  window.Toast ??= t007.toast;
+  console.log("%cT007 Toasts attached to window!", "color: darkturquoise");
+}
+export {
+  src_default as default,
+  toaster,
+  toasting
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t007/toast",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A lightweight, pure JS toast system.",
   "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
   "license": "MIT",
@@ -16,7 +16,8 @@
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "browser": "./dist/index.global.js",
+  "unpkg": "./dist/index.global.js",
+  "jsdelivr": "./dist/index.global.js",
   "types": "./src/ts/types/index.d.ts",
   "style": "./src/css/index.css",
   "sideEffects": [
@@ -26,17 +27,14 @@
     ".": {
       "types": "./src/ts/types/index.d.ts",
       "import": "./dist/index.js",
-      "default": "./dist/index.global.js"
+      "default": "./dist/index.js"
     },
+    "./standalone": "./dist/standalone.js",
+    "./global": "./dist/index.global.js",
     "./style.css": "./src/css/index.css"
   },
   "scripts": {
-    "build": "tsup src/index.js --format esm,iife --clean --treeshake"
-  },
-  "tsup": {
-    "noExternal": [
-      "@t007/utils"
-    ]
+    "build": "tsup --config ../../tsup.config.ts"
   },
   "files": [
     "dist",