kitzo 2.3.35 → 2.3.37

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

@@ -1,24 +1,30 @@
-import { jsx as s } from "react/jsx-runtime";
-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 $ from "./partials/ToastContainer.js";
-import { ToasterContext as w } from "./context/ToasterContext.js";
-function j(m) {
+import { jsx as r } from "react/jsx-runtime";
+import { useState as k, useEffect as v, useRef as x, useCallback as C, useLayoutEffect as w } from "react";
+import { subscribe as E } from "./helpers/listenar.js";
+import O from "./helpers/manageToasts/manageToasts.js";
+import z from "./partials/ToastContainer.js";
+import { ToasterContext as S } from "./context/ToasterContext.js";
+import { initSwipeToClose as $ } from "./helpers/manageToasts/swipeClose.js";
+function D(m) {
   const {
     position: d = "top-center",
     richColors: c = !1,
     animateTransformOrigin: h = !0,
-    gap: e = 8,
-    edgeOffset: r = 16,
-    isDark: f = window.matchMedia("(prefers-color-scheme: dark)").matches,
+    gap: o = 8,
+    edgeOffset: a = 16,
+    isDark: p = window.matchMedia("(prefers-color-scheme: dark)").matches,
     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 = {
+    swipeToClose: b = !0
+  } = m, [f, l] = k([]);
+  v(() => {
+    const t = E((e) => O({ toast: e, setToasts: l })), s = $();
+    return () => {
+      t(), s();
+    };
+  }, []);
+  const i = x(null), n = C(() => {
+    if (!i.current) return;
+    const t = i.current.querySelectorAll("[data-toast-container]"), s = {
       "top-left": 0,
       "top-center": 0,
       "top-right": 0,
@@ -26,50 +32,50 @@ function j(m) {
       "bottom-center": 0,
       "bottom-right": 0
     };
-    t.forEach((n) => {
-      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 k = isNaN(+e) ? 8 : +e;
-      o[u] += b + k;
+    t.forEach((e) => {
+      const u = e.getAttribute("data-toast-position") || "top-center", y = parseFloat(e.style.getPropertyValue("--toast-height")) || 0;
+      e.style.setProperty("--toast-offset-y", `${s[u]}px`);
+      const T = isNaN(+o) ? 8 : +o;
+      s[u] += y + T;
     });
-  }, [e]);
-  return E(() => {
-    i();
-  }, [p, i]), /* @__PURE__ */ s(
+  }, [o]);
+  return w(() => {
+    n();
+  }, [f, n]), /* @__PURE__ */ r(
     "div",
     {
-      ref: a,
+      ref: i,
       style: {
         position: "fixed",
         inset: 0,
         zIndex: 2147483647,
         pointerEvents: "none",
         display: "grid",
-        padding: r != null ? `${Math.max(Math.min(+r, 200), 0)}px` : 16
+        padding: a != null ? `${Math.max(Math.min(+a, 200), 0)}px` : 16
       },
-      className: `kitzo-toaster ${c ? "kitzo-toaster-rich-colors" : ""} ${f ? "kitzo-toaster-dark" : ""}`,
-      children: /* @__PURE__ */ s(
+      className: `kitzo-toaster ${c ? "kitzo-toaster-rich-colors" : ""} ${p ? "kitzo-toaster-dark" : ""}`,
+      children: /* @__PURE__ */ r(
         "div",
         {
           style: {
             position: "relative"
           },
-          children: /* @__PURE__ */ s(
-            w.Provider,
+          children: /* @__PURE__ */ r(
+            S.Provider,
             {
               value: {
                 position: d,
                 richColors: c,
-                isDark: f,
-                gap: e,
-                edgeOffset: r,
+                isDark: p,
+                gap: o,
+                edgeOffset: a,
                 animateTransformOrigin: h,
                 pauseOnHover: g,
-                swipeToClose: y,
+                swipeToClose: b,
                 setToasts: l,
-                updateOffsets: i
+                updateOffsets: n
               },
-              children: p.map((t) => /* @__PURE__ */ s($, { t }, t.id))
+              children: f.map((t) => /* @__PURE__ */ r(z, { t }, t.id))
             }
           )
         }
@@ -78,5 +84,5 @@ function j(m) {
   );
 }
 export {
-  j as default
+  D as default
 };

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

@@ -1,4 +1,4 @@
-const r = `.kitzo-toaster {
+const o = `.kitzo-toaster {
   --default-bg: hsl(0, 0%, 100%);
   --default-text: hsl(0, 0%, 10%);
   --default-border: hsl(0, 0%, 94%);
@@ -98,26 +98,6 @@ const r = `.kitzo-toaster {
   transition: none !important;
 }
 
-/*! toast transfor origin */
-.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;
-}
-
 /*! Toast theme styles  */
 .kitzo-toast[data-type='default'] {
   background-color: var(--default-bg);
@@ -175,12 +155,10 @@ const r = `.kitzo-toaster {
 
 .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'] {
@@ -219,6 +197,40 @@ const r = `.kitzo-toaster {
   }
 }
 
+/*! toast transfor origin */
+.kitzo-toast[data-position^='top'] {
+  transform-origin: top;
+}
+.kitzo-toast[data-position^='bottom'] {
+  transform-origin: bottom;
+}
+
+.kitzo-toast[data-animate-transform-origin='true'][data-position='top-left'] {
+  transform-origin: top left;
+}
+.kitzo-toast[data-animate-transform-origin='true'][data-position='top-center'] {
+  transform-origin: top;
+}
+.kitzo-toast[data-animate-transform-origin='true'][data-position='top-right'] {
+  transform-origin: top right;
+}
+.kitzo-toast[data-animate-transform-origin='true'][data-position='bottom-left'] {
+  transform-origin: bottom left;
+}
+.kitzo-toast[data-animate-transform-origin='true'][data-position='bottom-center'] {
+  transform-origin: bottom;
+}
+.kitzo-toast[data-animate-transform-origin='true'][data-position='bottom-right'] {
+  transform-origin: bottom right;
+}
+
+.kitzo-toast[data-status='leaving'][data-position^='top'] {
+  transform-origin: top;
+}
+.kitzo-toast[data-status='leaving'][data-position^='bottom'] {
+  transform-origin: bottom;
+}
+
 /*! svg stylings */
 .svg-container {
   display: grid;
@@ -259,12 +271,12 @@ const r = `.kitzo-toaster {
     rotate: 360deg;
   }
 }`;
-function o() {
+function a() {
   if (!document.getElementById("kitzo-toast-styles")) {
     const t = document.createElement("style");
-    t.id = "kitzo-toast-styles", t.textContent = r, document.head.appendChild(t);
+    t.id = "kitzo-toast-styles", t.textContent = o, document.head.appendChild(t);
   }
 }
 export {
-  o as default
+  a as default
 };

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

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

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

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

package/package.json

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