kitzo 2.3.25 → 2.3.27

package/dist/index.d.ts

@@ -27,7 +27,7 @@ declare type PromiseToastMsgs<T, E = unknown> = {
     error: ReactNode | ((err: E) => ReactNode | Promise<ReactNode>);
 };
 
-declare type PromiseToastOptions = Omit<ToastOptions, 'id' | 'type'>;
+declare type PromiseToastOptions = Omit<ToastOptions, 'id' | 'type' | 'swipeToClose'>;
 
 export declare const toast: ToastFn;
 
@@ -43,6 +43,7 @@ declare type ToasterProps = {
     edgeOffset?: number | `${number}`;
     isDark?: boolean;
     pauseOnHover?: boolean;
+    swipeToClose?: boolean;
 };
 
 declare type ToastFn = {
@@ -66,6 +67,7 @@ declare type ToastOptions = {
     animateTransformOrigin?: boolean;
     id?: string | number;
     type?: ToastType;
+    swipeToClose?: boolean;
 };
 
 declare type ToastOptionsWithoutType = Omit<ToastOptions, 'type'>;

package/dist/kitzo.css

@@ -0,0 +1 @@
+.kitzo-toaster{--default-bg: hsl(0, 0%, 100%);--default-text: hsl(0, 0%, 10%);--default-border: hsl(0, 0%, 94%);--success-bg: var(--default-bg);--success-text: var(--default-text);--success-border: var(--default-border);--warning-bg: var(--default-bg);--warning-text: var(--default-text);--warning-border: var(--default-border);--error-bg: var(--default-bg);--error-text: var(--default-text);--error-border: var(--default-border);--info-bg: var(--default-bg);--info-text: var(--default-text);--info-border: var(--default-border);--loader-stroke: hsl(0, 0%, 20%);--loader-bg: hsl(0, 0%, 80%)}.kitzo-toaster.kitzo-toaster-dark{--default-bg: hsl(0, 0%, 15%);--default-text: hsl(0, 0%, 95%);--default-border: hsl(0, 0%, 17%);--success-bg: var(--default-bg);--success-text: var(--default-text);--success-border: var(--default-border);--warning-bg: var(--default-bg);--warning-text: var(--default-text);--warning-border: var(--default-border);--error-bg: var(--default-bg);--error-text: var(--default-text);--error-border: var(--default-border);--info-bg: var(--default-bg);--info-text: var(--default-text);--info-border: var(--default-border);--loader-stroke: hsl(0, 0%, 90%);--loader-bg: hsl(0, 0%, 40%)}.kitzo-toaster.kitzo-toaster-rich-colors{--success-bg: hsl(142, 65%, 95%);--success-text: hsl(142, 98%, 30%);--success-border: hsl(142, 100%, 93%);--warning-bg: hsl(35, 68%, 95%);--warning-text: hsl(35, 98%, 40%);--warning-border: hsl(35, 100%, 94%);--error-bg: hsl(0, 65%, 95%);--error-text: hsl(0, 98%, 40%);--error-border: hsl(0, 100%, 94%);--info-bg: hsl(210, 65%, 95%);--info-text: hsl(210, 100%, 20%);--info-border: hsl(210, 100%, 94%)}.kitzo-toaster.kitzo-toaster-rich-colors.kitzo-toaster-dark{--success-bg: hsl(142, 65%, 15%);--success-text: hsl(142, 98%, 70%);--success-border: hsl(142, 100%, 15%);--warning-bg: hsl(35, 65%, 15%);--warning-text: hsl(35, 98%, 70%);--warning-border: hsl(35, 100%, 15%);--error-bg: hsl(0, 65%, 15%);--error-text: hsl(0, 98%, 70%);--error-border: hsl(0, 100%, 15%);--info-bg: hsl(210, 65%, 15%);--info-text: hsl(210, 100%, 70%);--info-border: hsl(210, 100%, 16%)}.kitzo-toast{font-family:inherit;font-size:.875rem;transition:transform .28s,opacity .28s;will-change:transform,opacity;touch-action:pan-y}.kitzo-toast.is-swiping{transition:none!important;-webkit-user-select:none;user-select:none}.kitzo-toast.transform-origin-top-left{transform-origin:top left}.kitzo-toast.transform-origin-top-center{transform-origin:top center}.kitzo-toast.transform-origin-top-right{transform-origin:top right}.kitzo-toast.transform-origin-bottom-left{transform-origin:bottom left}.kitzo-toast.transform-origin-bottom-center{transform-origin:bottom center}.kitzo-toast.transform-origin-bottom-right{transform-origin:bottom right}.kitzo-toast[data-type=default],.kitzo-toast[data-type=loading]{background-color:var(--default-bg);color:var(--default-text);border:1px solid var(--default-border)}.kitzo-toast[data-type=success]{background-color:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border)}.kitzo-toast[data-type=warning]{background-color:var(--warning-bg);color:var(--warning-text);border:1px solid var(--warning-border)}.kitzo-toast[data-type=error]{background-color:var(--error-bg);color:var(--error-text);border:1px solid var(--error-border)}.kitzo-toast[data-type=info]{background-color:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border)}.kitzo-toast[data-type=default],.kitzo-toast[data-type=loading],.kitzo-toast[data-type=success],.kitzo-toast[data-type=warning],.kitzo-toast[data-type=error],.kitzo-toast[data-type=info]{border-radius:.425rem;padding:.375rem .625rem;box-shadow:0 3px 8px -3px #00000026}.kitzo-toast{--swipe-x: 0px;--motion-y: 0%;--scale: .6;--exit-x: 0px}.kitzo-toast[data-screen-y=top]{--motion-y: -120%;transform-origin:top}.kitzo-toast[data-screen-y=bottom]{--motion-y: 120%;transform-origin:bottom}.kitzo-toast[data-status=leaving][data-exit=swipe]{--motion-y: 0%;--scale: 1}.kitzo-toast[data-status=entering]{opacity:0;transform:translate(0) translateY(var(--motion-y)) scale(var(--scale))}.kitzo-toast[data-status=visible]{opacity:1;transform:translate(var(--swipe-x)) translateY(0) scale(1)}.kitzo-toast[data-status=leaving]{opacity:0;transform:translate(calc(var(--swipe-x) + var(--exit-x))) translateY(var(--motion-y)) scale(var(--scale))}.kitzo-toast[data-action=update]{animation:update .15s ease}@keyframes update{0%{transform:scale(.95);opacity:.5}to{opacity:1;transform:scale(1)}}.svg-container{display:grid;place-items:center;height:20px;width:20px;overflow:hidden}.loading-svg-container{width:20px;height:20px;display:grid;place-items:center}.loading-svg-container .loader{width:14px;height:14px;background-image:conic-gradient(var(--loader-stroke) 0 25%,var(--loader-bg) 0 100%);border-radius:10rem;position:relative;animation:rotate-infinity 1s linear infinite}.loading-svg-container .loader:before{content:"";position:absolute;inset:2px;border-radius:inherit;background-color:var(--default-bg)}@keyframes rotate-infinity{to{rotate:360deg}}

package/dist/react/components/toast/Toaster.js

@@ -1,10 +1,11 @@
 import { jsx as s } from "react/jsx-runtime";
-import { useState as k, useEffect as v, useRef as x, useCallback as T, useLayoutEffect as E } from "react";
+/* empty css          */
+import { useState as v, useEffect as x, useRef as T, useCallback as C, useLayoutEffect as E } from "react";
 import { subscribe as O } from "./helpers/listenar.js";
 import z from "./helpers/manageToasts/manageToasts.js";
-import C from "./partials/ToastContainer.js";
-import { ToasterContext as $ } from "./context/ToasterContext.js";
-function S(m) {
+import $ from "./partials/ToastContainer.js";
+import { ToasterContext as w } from "./context/ToasterContext.js";
+function q(m) {
   const {
     position: d = "top-center",
     richColors: c = !1,
@@ -12,10 +13,11 @@ function S(m) {
     gap: e = 8,
     edgeOffset: r = 16,
     isDark: f = window.matchMedia("(prefers-color-scheme: dark)").matches,
-    pauseOnHover: g = !0
-  } = m, [p, l] = k([]);
-  v(() => O((o) => z({ toast: o, setToasts: l })), []);
-  const a = x(null), i = T(() => {
+    pauseOnHover: g = !0,
+    swipeToClose: y = !0
+  } = m, [p, l] = v([]);
+  x(() => O((o) => z({ toast: o, setToasts: l })), []);
+  const a = T(null), i = C(() => {
     if (!a.current) return;
     const t = a.current.querySelectorAll("[data-toast-container]"), o = {
       "top-left": 0,
@@ -26,10 +28,10 @@ function S(m) {
       "bottom-right": 0
     };
     t.forEach((n) => {
-      const u = n.getAttribute("data-toast-position") || "top-center", y = parseFloat(n.style.getPropertyValue("--toast-height")) || 0;
+      const u = n.getAttribute("data-toast-position") || "top-center", b = parseFloat(n.style.getPropertyValue("--toast-height")) || 0;
       n.style.setProperty("--toast-offset-y", `${o[u]}px`);
-      const b = isNaN(+e) ? 8 : +e;
-      o[u] += y + b;
+      const k = isNaN(+e) ? 8 : +e;
+      o[u] += b + k;
     });
   }, [e]);
   return E(() => {
@@ -54,7 +56,7 @@ function S(m) {
             position: "relative"
           },
           children: /* @__PURE__ */ s(
-            $.Provider,
+            w.Provider,
             {
               value: {
                 position: d,
@@ -64,10 +66,11 @@ function S(m) {
                 edgeOffset: r,
                 animateTransformOrigin: h,
                 pauseOnHover: g,
+                swipeToClose: y,
                 setToasts: l,
                 updateOffsets: i
               },
-              children: p.map((t) => /* @__PURE__ */ s(C, { t }, t.id))
+              children: p.map((t) => /* @__PURE__ */ s($, { t }, t.id))
             }
           )
         }
@@ -76,5 +79,5 @@ function S(m) {
   );
 }
 export {
-  S as default
+  q as default
 };

package/dist/react/components/toast/helpers/addToastStyles.js

@@ -91,6 +91,12 @@ const r = `.kitzo-toaster {
     transform 280ms,
     opacity 280ms;
   will-change: transform, opacity;
+  touch-action: pan-y;
+}
+
+.kitzo-toast.is-swiping {
+  transition: none !important;
+  user-select: none;
 }
 
 /*! toast transfor origin */
@@ -114,86 +120,92 @@ const r = `.kitzo-toaster {
 }
 
 /*! Toast theme styles  */
-.kitzo-toast.type-default {
+.kitzo-toast[data-type='default'] {
   background-color: var(--default-bg);
   color: var(--default-text);
   border: 1px solid var(--default-border);
 }
-.kitzo-toast.type-loading {
+.kitzo-toast[data-type='loading'] {
   background-color: var(--default-bg);
   color: var(--default-text);
   border: 1px solid var(--default-border);
 }
 
-.kitzo-toast.type-success {
+.kitzo-toast[data-type='success'] {
   background-color: var(--success-bg);
   color: var(--success-text);
   border: 1px solid var(--success-border);
 }
 
-.kitzo-toast.type-warning {
+.kitzo-toast[data-type='warning'] {
   background-color: var(--warning-bg);
   color: var(--warning-text);
   border: 1px solid var(--warning-border);
 }
 
-.kitzo-toast.type-error {
+.kitzo-toast[data-type='error'] {
   background-color: var(--error-bg);
   color: var(--error-text);
   border: 1px solid var(--error-border);
 }
 
-.kitzo-toast.type-info {
+.kitzo-toast[data-type='info'] {
   background-color: var(--info-bg);
   color: var(--info-text);
   border: 1px solid var(--info-border);
 }
 
-.kitzo-toast.type-default,
-.kitzo-toast.type-loading,
-.kitzo-toast.type-success,
-.kitzo-toast.type-warning,
-.kitzo-toast.type-error,
-.kitzo-toast.type-info {
+.kitzo-toast[data-type='default'],
+.kitzo-toast[data-type='loading'],
+.kitzo-toast[data-type='success'],
+.kitzo-toast[data-type='warning'],
+.kitzo-toast[data-type='error'],
+.kitzo-toast[data-type='info'] {
   border-radius: 0.425rem;
   padding: 0.375rem 0.625rem;
   box-shadow: 0 3px 8px -3px hsl(0, 0%, 0%, 0.15);
 }
 
 /*! toast transition styles */
-.kitzo-toast.status-entering.pos-y-top {
-  opacity: 0;
-  transform: translateY(-120%) scale(0.6);
+.kitzo-toast {
+  --swipe-x: 0px;
+  --motion-y: 0%;
+  --scale: 0.6;
+  --exit-x: 0px;
 }
 
-.kitzo-toast.status-visible.pos-y-top {
-  opacity: 1;
-  transform: translateY(0) scale(1);
+.kitzo-toast[data-screen-y='top'] {
+  --motion-y: -120%;
+  transform-origin: top;
 }
 
-.kitzo-toast.status-leaving.pos-y-top {
-  transform-origin: top;
-  opacity: 0;
-  transform: translateY(-120%) scale(0.6);
+.kitzo-toast[data-screen-y='bottom'] {
+  --motion-y: 120%;
+  transform-origin: bottom;
 }
 
-.kitzo-toast.status-entering.pos-y-bottom {
+.kitzo-toast[data-status='leaving'][data-exit='swipe'] {
+  --motion-y: 0%;
+  --scale: 1;
+}
+
+.kitzo-toast[data-status='entering'] {
   opacity: 0;
-  transform: translateY(120%) scale(0.6);
+  transform: translateX(0) translateY(var(--motion-y)) scale(var(--scale));
 }
 
-.kitzo-toast.status-visible.pos-y-bottom {
+.kitzo-toast[data-status='visible'] {
   opacity: 1;
-  transform: translateY(0) scale(1);
+  transform: translateX(var(--swipe-x)) translateY(0) scale(1);
 }
 
-.kitzo-toast.status-leaving.pos-y-bottom {
-  transform-origin: bottom;
+.kitzo-toast[data-status='leaving'] {
   opacity: 0;
-  transform: translateY(120%) scale(0.6);
+  transform: translateX(calc(var(--swipe-x) + var(--exit-x)))
+    translateY(var(--motion-y)) scale(var(--scale));
 }
 
-.action-update {
+.kitzo-toast[data-action='update'] {
   animation: update 150ms ease;
 }
 

package/dist/react/components/toast/helpers/createToast.js

@@ -1,44 +1,49 @@
-const i = {
+const n = {
   duration: 2800,
   showIcon: !0,
-  animateTransformOrigin: void 0
+  animateTransformOrigin: void 0,
+  swipeToClose: !0
 };
 let r = 0;
-const d = () => crypto.randomUUID?.() ?? `kitzo_toast_id_${++r}`;
-let s = 1;
-function c({
-  type: a,
-  action: e,
-  content: o,
-  options: n
+const d = () => crypto.randomUUID?.() ?? ++r;
+let u = 1;
+function T({
+  type: e,
+  action: s,
+  content: t,
+  isPromise: i,
+  options: a
 }) {
-  const t = typeof n == "object" && n !== null ? n : {};
+  const o = typeof a == "object" && a !== null ? a : {};
   return {
-    id: t.id ?? d(),
-    duration: t.duration ?? i.duration,
-    showIcon: t.showIcon ?? i.showIcon,
-    animateTransformOrigin: t.animateTransformOrigin ?? i.animateTransformOrigin,
-    position: t.position,
-    icon: t.icon,
-    type: a === "default" ? t.type ?? "default" : a,
+    id: `toast-id:${o.id ?? d()}`,
+    duration: o.duration ?? n.duration,
+    showIcon: o.showIcon ?? n.showIcon,
+    animateTransformOrigin: o.animateTransformOrigin ?? n.animateTransformOrigin,
+    position: o.position,
+    icon: o.icon,
+    type: e === "default" ? o.type ?? "default" : e,
     status: "entering",
-    zIndex: ++s,
-    content: o,
-    action: e
+    zIndex: ++u,
+    content: t,
+    action: s,
+    isPromise: !!i,
+    swipeToClose: o.swipeToClose ?? n.swipeToClose
   };
 }
-function T({ id: a, content: e, options: o }) {
-  const n = typeof o == "object" && o !== null ? o : {};
+function l({ id: e, content: s, options: t }) {
+  const i = typeof t == "object" && t !== null ? t : {};
   return {
-    ...n,
-    id: a,
-    content: e,
+    ...i,
+    id: `toast-id:${e}`,
+    content: s,
     action: "update",
-    duration: n.duration ?? i.duration
+    isPromise: !1,
+    duration: i.duration ?? n.duration
   };
 }
 export {
-  c as createToast,
+  T as createToast,
   d as genId,
-  T as updateToast
+  l as updateToast
 };

package/dist/react/components/toast/helpers/manageToasts/addToasts.js

@@ -1,12 +1,11 @@
-import { addTimers as f } from "./timers.js";
-function m({ toast: r, setToasts: e }) {
-  let n = !1;
-  e((i) => (n = !!i.find((d) => d.id === r.id), n ? i : [r, ...i])), !n && (requestAnimationFrame(() => {
-    e(
-      (i) => i.map((d) => d.id === r.id ? { ...d, status: "visible" } : d)
+import { addTimers as s } from "./timers.js";
+function e({ toast: d, setToasts: r }) {
+  r((i) => i.find((m) => m.id === d.id) ? i : [d, ...i]), requestAnimationFrame(() => {
+    r(
+      (i) => i.map((n) => n.id === d.id ? { ...n, status: "visible" } : n)
     );
-  }), f(r, e));
+  }), s(d, r);
 }
 export {
-  m as default
+  e as default
 };

package/dist/react/components/toast/helpers/manageToasts/swipeClose.js

@@ -0,0 +1,68 @@
+import f from "../triggerToasts.js";
+let e = null, l = null, d = 0, r = 0, o = !1, i = !1, a = null;
+const w = 0, m = 90, v = 90, E = 120;
+function b(t) {
+  const s = Math.sign(t) || 1, n = Math.abs(t), p = v * (1 - Math.exp(-n / E));
+  return s * p;
+}
+function u(t) {
+  if (!t) return !1;
+  const s = t.dataset.swipeable === "true", n = t.dataset.isPromise === "true";
+  return s && !n;
+}
+function c(t = !0) {
+  if (!e) return;
+  if (document.body.style.userSelect = "auto", t && a != null)
+    try {
+      e.releasePointerCapture(a);
+    } catch {
+      console.error("");
+    }
+  e.style.setProperty("--swipe-x", "0px"), e.classList.remove("is-swiping");
+  const s = e;
+  if (e = null, l = null, a = null, o = !1, i = !1, r = 0, !s.matches(":hover")) {
+    const n = new MouseEvent("mouseleave", {
+      bubbles: !0,
+      cancelable: !0,
+      view: window
+    });
+    s.dispatchEvent(n);
+  }
+}
+document.addEventListener("pointerdown", (t) => {
+  const n = t.target.closest(".kitzo-toast");
+  if (n) {
+    document.body.style.userSelect = "none", e = n, l = n.id, d = t.clientX, r = 0, o = !0, i = !1, a = t.pointerId;
+    try {
+      n.setPointerCapture(t.pointerId);
+    } catch {
+      console.error("");
+    }
+  }
+});
+document.addEventListener("pointermove", (t) => {
+  if (!o || !e || (r = t.clientX - d, !i && Math.abs(r) > w && (i = !0, e.classList.add("is-swiping")), !i)) return;
+  const n = u(e) ? r : b(r);
+  e.style.setProperty("--swipe-x", `${n}px`);
+});
+document.addEventListener("pointerup", () => {
+  if (!o || !e || l == null) {
+    c();
+    return;
+  }
+  const t = u(e);
+  if (i && t && Math.abs(r) > m) {
+    const s = r > 0 ? 1 : -1, n = window.innerWidth / 2 + 50;
+    e.style.setProperty("--exit-x", `${s * n}px`), e.dataset.exit = "swipe", f.dismiss(l);
+  }
+  c();
+});
+document.addEventListener("pointercancel", () => {
+  c();
+});
+window.addEventListener("blur", () => {
+  o && c();
+});
+export {
+  i as dragStarted
+};

package/dist/react/components/toast/helpers/manageToasts/timers.js

@@ -1,76 +1,79 @@
-const o = /* @__PURE__ */ new Map(), u = 280, s = 500, f = 0;
-function c(e) {
-  const i = Number(e);
-  if (!isFinite(i)) return null;
-  const t = Math.max(f, i);
+import { dragStarted as c } from "./swipeClose.js";
+const r = /* @__PURE__ */ new Map(), m = 280, f = 500, d = 0;
+function T(e) {
+  const t = Number(e);
+  if (!isFinite(t)) return null;
+  const i = Math.max(d, t);
   return {
-    totalTime: t,
-    leavingDuration: t,
-    leftDuration: t + s
+    totalTime: i,
+    leavingDuration: i,
+    leftDuration: i + f
   };
 }
-function T(e) {
-  const i = o.get(e);
-  i && (clearTimeout(i.leavingTimeoutId), clearTimeout(i.leftTimeoutId), o.delete(e));
+function s(e) {
+  const t = r.get(e);
+  t && (clearTimeout(t.leavingTimeoutId), clearTimeout(t.leftTimeoutId), r.delete(e));
 }
-function g() {
-  o.forEach(({ leavingTimeoutId: e, leftTimeoutId: i }) => {
-    clearTimeout(e), clearTimeout(i);
-  }), o.clear();
+function I() {
+  r.forEach(({ leavingTimeoutId: e, leftTimeoutId: t }) => {
+    clearTimeout(e), clearTimeout(t);
+  }), r.clear();
 }
-function d(e, i) {
-  const t = c(e.duration);
-  if (!t) return;
-  T(e.id);
-  const r = setTimeout(() => {
-    i(
+function p(e, t) {
+  const i = T(e.duration);
+  if (!i) return;
+  s(e.id);
+  const o = setTimeout(() => {
+    t(
       (a) => a.map((n) => n.id === e.id ? { ...n, status: "leaving" } : n)
     );
-  }, t.leavingDuration + u), m = setTimeout(() => {
-    i((a) => a.filter((n) => n.id !== e.id)), T(e.id), o.delete(e.id);
-  }, t.leftDuration + u), l = Date.now();
-  o.set(e.id, {
-    leavingTimeoutId: r,
-    leftTimeoutId: m,
+  }, i.leavingDuration + m), u = setTimeout(() => {
+    t((a) => a.filter((n) => n.id !== e.id)), s(e.id), r.delete(e.id);
+  }, i.leftDuration + m), l = Date.now();
+  r.set(e.id, {
+    leavingTimeoutId: o,
+    leftTimeoutId: u,
     startingTime: l,
-    totalTime: t.totalTime,
-    remainningTime: 0
+    totalTime: i.totalTime,
+    remainningTime: 0,
+    paused: !1
   });
 }
-function I(e) {
-  const i = o.get(e);
-  if (!i || i.remainningTime > 0) return;
-  const r = Date.now() - i.startingTime, m = Math.max(i.totalTime - r, 0);
-  m !== 0 && (o.set(e, { ...i, remainningTime: m }), clearTimeout(i.leavingTimeoutId), clearTimeout(i.leftTimeoutId));
+function D(e) {
+  const t = r.get(e);
+  if (!t || t.paused) return;
+  const o = Date.now() - t.startingTime, u = Math.max(t.totalTime - o, 0);
+  u !== 0 && (r.set(e, { ...t, remainningTime: u, paused: !0 }), clearTimeout(t.leavingTimeoutId), clearTimeout(t.leftTimeoutId));
 }
-function D(e, i) {
-  const t = o.get(e);
-  if (!t) return;
-  const r = c(t.remainningTime);
-  if (!r) return;
-  const m = setTimeout(() => {
-    i(
+function v(e, t) {
+  if (c) return;
+  const i = r.get(e);
+  if (!i || !i.paused) return;
+  const o = T(i.remainningTime);
+  if (!o) return;
+  const u = setTimeout(() => {
+    t(
       (a) => a.map((n) => n.id === e ? { ...n, status: "leaving" } : n)
     );
-  }, r.leavingDuration + u), l = setTimeout(() => {
-    i((a) => a.filter((n) => n.id !== e)), T(e), o.delete(e);
-  }, r.leftDuration + u);
-  o.set(e, {
-    ...t,
+  }, o.leavingDuration + m), l = setTimeout(() => {
+    t((a) => a.filter((n) => n.id !== e)), s(e), r.delete(e);
+  }, o.leftDuration + m);
+  r.set(e, {
     startingTime: Date.now(),
-    totalTime: t.remainningTime,
+    totalTime: i.remainningTime,
     remainningTime: 0,
-    leavingTimeoutId: m,
-    leftTimeoutId: l
+    leavingTimeoutId: u,
+    leftTimeoutId: l,
+    paused: !1
   });
 }
 export {
-  s as LEAVE_DELAY,
-  f as MIN_VISIBLE,
-  u as TRANSITION_DURATION,
-  d as addTimers,
-  g as clearAllTimers,
-  T as clearTimer,
-  I as pauseToast,
-  D as resumeToast
+  f as LEAVE_DELAY,
+  d as MIN_VISIBLE,
+  m as TRANSITION_DURATION,
+  p as addTimers,
+  I as clearAllTimers,
+  s as clearTimer,
+  D as pauseToast,
+  v as resumeToast
 };

package/dist/react/components/toast/helpers/manageToasts/updateToasts.js

@@ -1,10 +1,9 @@
-import { addTimers as u } from "./timers.js";
-function t({ toast: e, setToasts: d }) {
-  let r = !0;
-  d((s) => s.find((i) => i.id === e.id) ? s.map(
-    (i) => i.id === e.id ? { ...i, ...e, status: "visible" } : i
-  ) : (r = !1, s)), r && u(e, d);
+import { clearTimer as n, addTimers as u } from "./timers.js";
+function s({ toast: i, setToasts: r }) {
+  r((e) => e.find((d) => d.id === i.id) ? (n(i.id), u(i, r), e.map(
+    (d) => d.id === i.id ? { ...d, ...i, status: "visible" } : d
+  )) : e);
 }
 export {
-  t as default
+  s as default
 };

package/dist/react/components/toast/helpers/triggerToasts.js

@@ -1,8 +1,8 @@
-import { createToast as n, updateToast as c, genId as s } from "./createToast.js";
-import { notify as a } from "./listenar.js";
+import { createToast as a, updateToast as s, genId as c } from "./createToast.js";
+import { notify as e } from "./listenar.js";
 const i = (r, t) => {
-  r != null && a(
-    n({
+  r != null && e(
+    a({
       type: "default",
       action: "add",
       content: r,
@@ -11,11 +11,11 @@ const i = (r, t) => {
   );
 };
 i.dismiss = (r) => {
-  a({ action: "dismiss", id: r });
+  e({ action: "dismiss", id: `${r}` });
 };
 i.info = (r, t) => {
-  r != null && a(
-    n({
+  r != null && e(
+    a({
       action: "add",
       type: "info",
       content: r,
@@ -24,8 +24,8 @@ i.info = (r, t) => {
   );
 };
 i.success = (r, t) => {
-  r != null && a(
-    n({
+  r != null && e(
+    a({
       action: "add",
       type: "success",
       content: r,
@@ -34,8 +34,8 @@ i.success = (r, t) => {
   );
 };
 i.warning = (r, t) => {
-  r != null && a(
-    n({
+  r != null && e(
+    a({
       action: "add",
       type: "warning",
       content: r,
@@ -44,8 +44,8 @@ i.warning = (r, t) => {
   );
 };
 i.error = (r, t) => {
-  r != null && a(
-    n({
+  r != null && e(
+    a({
       action: "add",
       type: "error",
       content: r,
@@ -54,8 +54,8 @@ i.error = (r, t) => {
   );
 };
 i.loading = (r, t) => {
-  r != null && a(
-    n({
+  r != null && e(
+    a({
       action: "add",
       type: "loading",
       content: r,
@@ -64,8 +64,8 @@ i.loading = (r, t) => {
   );
 };
 i.custom = (r, t) => {
-  r != null && a(
-    n({
+  r != null && e(
+    a({
       action: "add",
       type: "custom",
       content: r,
@@ -73,25 +73,26 @@ i.custom = (r, t) => {
     })
   );
 };
-i.update = (r, t, e) => {
-  t != null && a(c({ id: r, content: t, options: e }));
+i.update = (r, t, n) => {
+  t != null && e(s({ id: `${r}`, content: t, options: n }));
 };
-i.promise = (async (r, t, e) => {
-  const u = s();
-  a(
-    n({
+i.promise = (async (r, t, n) => {
+  const u = c();
+  e(
+    a({
       action: "add",
       type: "loading",
       content: t.loading,
-      options: { ...e, id: u, duration: 1 / 0 }
+      isPromise: !0,
+      options: { ...n, id: u, duration: 1 / 0 }
     })
   );
   try {
     const o = await r, d = typeof t.success == "function" ? await t.success(o) : t.success;
-    return i.update(u, d, { ...e, type: "success" }), o;
+    return i.update(u, d, { ...n, type: "success" }), o;
   } catch (o) {
     const d = typeof t.error == "function" ? await t.error(o) : t.error;
-    throw i.update(u, d, { ...e, type: "error" }), o;
+    throw i.update(u, d, { ...n, type: "error" }), o;
   }
 });
 export {

package/dist/react/components/toast/partials/Toast.js

@@ -1,53 +1,65 @@
-import { jsxs as g, jsx as t, Fragment as s } from "react/jsx-runtime";
-import { resumeToast as v, pauseToast as h } from "../helpers/manageToasts/timers.js";
-import y from "../helpers/triggerToasts.js";
-import { InfoSvg as x, ErrorSvg as S, WarningSvg as $, SuccessSvg as T, LoadingSvg as k } from "./Svgs.js";
-import { useToasterContext as E } from "../context/ToasterContext.js";
+import { jsxs as x, jsx as e, Fragment as a } from "react/jsx-runtime";
+import { resumeToast as d, pauseToast as m } from "../helpers/manageToasts/timers.js";
+import S from "../helpers/triggerToasts.js";
+import { InfoSvg as w, ErrorSvg as T, WarningSvg as E, SuccessSvg as k, LoadingSvg as I } from "./Svgs.js";
+import { useToasterContext as L } from "../context/ToasterContext.js";
 function C({
-  t: n,
+  t: p,
   position: o,
-  shouldAnimateTransformOrigin: d
+  shouldAnimateTransformOrigin: u,
+  swipeToClose: f
 }) {
-  const { setToasts: m, pauseOnHover: a } = E(), { id: l, type: r, action: f, content: i, status: p, showIcon: u, icon: e } = n, c = {
-    loading: /* @__PURE__ */ t(k, {}),
-    success: /* @__PURE__ */ t(T, {}),
-    warning: /* @__PURE__ */ t($, {}),
-    error: /* @__PURE__ */ t(S, {}),
-    info: /* @__PURE__ */ t(x, {}),
+  const { setToasts: c, pauseOnHover: s } = L(), { id: t, type: r, action: g, content: i, status: v, showIcon: h, icon: n, isPromise: y } = p, l = {
+    loading: /* @__PURE__ */ e(I, {}),
+    success: /* @__PURE__ */ e(k, {}),
+    warning: /* @__PURE__ */ e(E, {}),
+    error: /* @__PURE__ */ e(T, {}),
+    info: /* @__PURE__ */ e(w, {}),
     default: null,
     custom: null
   };
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ x(
     "div",
     {
-      id: `toast-id-${l}`,
+      id: t,
       style: {
         pointerEvents: "all",
         display: "flex",
         alignItems: "center",
-        gap: 8
+        gap: 8,
+        whiteSpace: "pre-wrap"
       },
-      onMouseEnter: () => a && h(n.id),
-      onMouseLeave: () => a && v(n.id, m),
-      className: `kitzo-toast type-${r} action-${f} status-${p} pos-y-${o.split("-")[0]} pos-x-${o.split("-")[1]} ${d ? `transform-origin-${o}` : ""}`,
+      "data-action": g,
+      "data-status": v,
+      "data-type": r,
+      "data-screen-x": o.split("-")[1],
+      "data-screen-y": o.split("-")[0],
+      "data-exit": "auto",
+      "data-is-promise": y,
+      "data-swipeable": f,
+      className: `kitzo-toast ${u ? `transform-origin-${o}` : ""}`,
+      onPointerEnter: () => s && m(t),
+      onPointerLeave: () => s && d(t, c),
+      onMouseEnter: () => s && m(t),
+      onMouseLeave: () => s && d(t, c),
       children: [
-        u && /* @__PURE__ */ t(s, { children: e ? /* @__PURE__ */ t(s, { children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ t(
+        h && /* @__PURE__ */ e(a, { children: n ? /* @__PURE__ */ e(a, { children: typeof n == "string" || typeof n == "number" ? /* @__PURE__ */ e(
           "div",
           {
             style: {
               flexShrink: 0
             },
             className: "svg-container",
-            children: e
+            children: n
           }
-        ) : /* @__PURE__ */ t(s, { children: e }) }) : /* @__PURE__ */ t(s, { children: c[r] && /* @__PURE__ */ t("div", { style: { flexShrink: 0 }, className: "svg-container", children: c[r] }) }) }),
-        /* @__PURE__ */ t(
+        ) : /* @__PURE__ */ e(a, { children: n }) }) : /* @__PURE__ */ e(a, { children: l[r] && /* @__PURE__ */ e("div", { style: { flexShrink: 0 }, className: "svg-container", children: l[r] }) }) }),
+        /* @__PURE__ */ e(
           "div",
           {
             style: {
               flex: 1
             },
-            children: typeof i == "function" ? i(() => y.dismiss(l)) : i
+            children: typeof i == "function" ? i(() => S.dismiss(t)) : i
           }
         )
       ]

package/dist/react/components/toast/partials/ToastContainer.js

@@ -1,19 +1,20 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useRef as d, useLayoutEffect as b } from "react";
-import g from "./Toast.js";
-import { useToasterContext as h } from "../context/ToasterContext.js";
+import { jsx as l } from "react/jsx-runtime";
+import { useRef as b, useLayoutEffect as g } from "react";
+import h from "./Toast.js";
+import { useToasterContext as x } from "../context/ToasterContext.js";
 function v({ t }) {
   const {
     updateOffsets: s,
-    position: c,
-    animateTransformOrigin: l
-  } = h(), r = d(null);
-  b(() => {
-    const e = r.current;
+    position: f,
+    animateTransformOrigin: c,
+    swipeToClose: p
+  } = x(), i = b(null);
+  g(() => {
+    const e = i.current;
     if (!e) return;
     const a = new ResizeObserver(() => {
-      const p = e.offsetHeight;
-      e.style.setProperty("--toast-height", `${p}px`), s();
+      const T = e.offsetHeight;
+      e.style.setProperty("--toast-height", `${T}px`), s();
     });
     return a.observe(e), () => a.disconnect();
   }, [s]);
@@ -24,11 +25,11 @@ function v({ t }) {
     "bottom-left",
     "bottom-center",
     "bottom-right"
-  ], i = t.position || c, o = m.includes(i) ? i : "top-center", n = o?.includes("bottom"), u = typeof t.animateTransformOrigin == "boolean" ? t.animateTransformOrigin : l;
-  return /* @__PURE__ */ f(
+  ], r = t.position || f, o = m.includes(r) ? r : "top-center", n = o?.includes("bottom"), u = typeof t.animateTransformOrigin == "boolean" ? t.animateTransformOrigin : !!c, d = typeof t.swipeToClose == "boolean" ? t.swipeToClose : !!p;
+  return /* @__PURE__ */ l(
     "div",
     {
-      ref: r,
+      ref: i,
       "data-toast-container": !0,
       "data-toast-position": o,
       style: {
@@ -43,12 +44,13 @@ function v({ t }) {
         bottom: n ? 0 : "auto",
         transform: `translateY(calc(var(--toast-offset-y, 0px) * ${n ? -1 : 1}))`
       },
-      children: /* @__PURE__ */ f(
-        g,
+      children: /* @__PURE__ */ l(
+        h,
         {
           t,
           position: o,
-          shouldAnimateTransformOrigin: u
+          shouldAnimateTransformOrigin: u,
+          swipeToClose: d
         }
       )
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitzo",
-  "version": "2.3.25",
+  "version": "2.3.27",
   "description": "A lightweight React micro-utility.",
   "type": "module",
   "files": [