kitzo 2.3.24 → 2.3.25

package/dist/index.d.ts

@@ -42,6 +42,7 @@ declare type ToasterProps = {
     gap?: number | `${number}`;
     edgeOffset?: number | `${number}`;
     isDark?: boolean;
+    pauseOnHover?: boolean;
 };
 
 declare type ToastFn = {

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

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

package/dist/react/components/toast/context/ToasterContext.js

@@ -0,0 +1,12 @@
+import { createContext as e, useContext as o } from "react";
+const n = e(null);
+function s() {
+  const t = o(n);
+  if (!t)
+    throw new Error("Toast components must be used inside <Toaster />");
+  return t;
+}
+export {
+  n as ToasterContext,
+  s as useToasterContext
+};

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

@@ -1,39 +1,76 @@
-const t = /* @__PURE__ */ new Map(), o = 600, a = 700;
-function m(e) {
+const o = /* @__PURE__ */ new Map(), u = 280, s = 500, f = 0;
+function c(e) {
   const i = Number(e);
   if (!isFinite(i)) return null;
-  const n = Math.max(a, i);
+  const t = Math.max(f, i);
   return {
-    leaving: n,
-    left: n + o
+    totalTime: t,
+    leavingDuration: t,
+    leftDuration: t + s
   };
 }
-function d(e) {
-  const i = t.get(e);
-  i && (clearTimeout(i.leaving), clearTimeout(i.left), t.delete(e));
+function T(e) {
+  const i = o.get(e);
+  i && (clearTimeout(i.leavingTimeoutId), clearTimeout(i.leftTimeoutId), o.delete(e));
 }
-function f() {
-  t.forEach(({ leaving: e, left: i }) => {
+function g() {
+  o.forEach(({ leavingTimeoutId: e, leftTimeoutId: i }) => {
     clearTimeout(e), clearTimeout(i);
-  }), t.clear();
+  }), o.clear();
 }
-function s(e, i) {
-  const n = m(e.duration);
-  if (!n) return;
-  d(e.id);
-  const c = setTimeout(() => {
+function d(e, i) {
+  const t = c(e.duration);
+  if (!t) return;
+  T(e.id);
+  const r = setTimeout(() => {
     i(
-      (l) => l.map((r) => r.id === e.id ? { ...r, status: "leaving" } : r)
+      (a) => a.map((n) => n.id === e.id ? { ...n, status: "leaving" } : n)
     );
-  }, n.leaving), u = setTimeout(() => {
-    i((l) => l.filter((r) => r.id !== e.id)), t.delete(e.id);
-  }, n.left);
-  t.set(e.id, { leaving: c, left: u });
+  }, 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,
+    startingTime: l,
+    totalTime: t.totalTime,
+    remainningTime: 0
+  });
+}
+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, i) {
+  const t = o.get(e);
+  if (!t) return;
+  const r = c(t.remainningTime);
+  if (!r) return;
+  const m = setTimeout(() => {
+    i(
+      (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,
+    startingTime: Date.now(),
+    totalTime: t.remainningTime,
+    remainningTime: 0,
+    leavingTimeoutId: m,
+    leftTimeoutId: l
+  });
 }
 export {
-  o as LEAVE_DELAY,
-  a as MIN_VISIBLE,
-  s as addTimers,
-  f as clearAllTimers,
-  d as clearTimer
+  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
 };

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

@@ -1,48 +1,53 @@
-import { jsxs as m, jsx as n, Fragment as e } from "react/jsx-runtime";
-import p from "../helpers/triggerToasts.js";
-import { InfoSvg as u, ErrorSvg as v, WarningSvg as h, SuccessSvg as y, LoadingSvg as x } from "./Svgs.js";
-function I({
-  t: l,
-  position: s,
-  shouldAnimateTransformOrigin: a
+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";
+function C({
+  t: n,
+  position: o,
+  shouldAnimateTransformOrigin: d
 }) {
-  const { id: c, type: i, action: d, content: r, status: f, showIcon: g, icon: t } = l, o = {
-    loading: /* @__PURE__ */ n(x, {}),
-    success: /* @__PURE__ */ n(y, {}),
-    warning: /* @__PURE__ */ n(h, {}),
-    error: /* @__PURE__ */ n(v, {}),
-    info: /* @__PURE__ */ n(u, {}),
+  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, {}),
     default: null,
     custom: null
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ g(
     "div",
     {
+      id: `toast-id-${l}`,
       style: {
         pointerEvents: "all",
         display: "flex",
         alignItems: "center",
         gap: 8
       },
-      className: `kitzo-toast type-${i} action-${d} status-${f} pos-y-${s.split("-")[0]} pos-x-${s.split("-")[1]} ${a ? `transform-origin-${s}` : ""}`,
+      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}` : ""}`,
       children: [
-        g && /* @__PURE__ */ n(e, { children: t ? /* @__PURE__ */ n(e, { children: typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ n(
+        u && /* @__PURE__ */ t(s, { children: e ? /* @__PURE__ */ t(s, { children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ t(
           "div",
           {
             style: {
               flexShrink: 0
             },
             className: "svg-container",
-            children: t
+            children: e
           }
-        ) : /* @__PURE__ */ n(e, { children: t }) }) : /* @__PURE__ */ n(e, { children: o[i] && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, className: "svg-container", children: o[i] }) }) }),
-        /* @__PURE__ */ 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(
           "div",
           {
             style: {
               flex: 1
             },
-            children: typeof r == "function" ? r(() => p.dismiss(c)) : r
+            children: typeof i == "function" ? i(() => y.dismiss(l)) : i
           }
         )
       ]
@@ -50,5 +55,5 @@ function I({
   );
 }
 export {
-  I as default
+  C as default
 };

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

@@ -1,22 +1,22 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import { useRef as d, useLayoutEffect as b } from "react";
-import h from "./Toast.js";
-function v({
-  t,
-  animateTransformOrigin: f,
-  containerPosition: l,
-  updateOffsets: r
-}) {
-  const s = d(null);
+import g from "./Toast.js";
+import { useToasterContext as h } from "../context/ToasterContext.js";
+function v({ t }) {
+  const {
+    updateOffsets: s,
+    position: c,
+    animateTransformOrigin: l
+  } = h(), r = d(null);
   b(() => {
-    const e = s.current;
+    const e = r.current;
     if (!e) return;
     const a = new ResizeObserver(() => {
       const p = e.offsetHeight;
-      e.style.setProperty("--toast-height", `${p}px`), r();
+      e.style.setProperty("--toast-height", `${p}px`), s();
     });
     return a.observe(e), () => a.disconnect();
-  }, [r]);
+  }, [s]);
   const m = [
     "top-left",
     "top-center",
@@ -24,11 +24,11 @@ function v({
     "bottom-left",
     "bottom-center",
     "bottom-right"
-  ], i = t.position || l, o = m.includes(i) ? i : "top-center", n = o.includes("bottom"), u = typeof t.animateTransformOrigin == "boolean" ? t.animateTransformOrigin : f;
-  return /* @__PURE__ */ c(
+  ], 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(
     "div",
     {
-      ref: s,
+      ref: r,
       "data-toast-container": !0,
       "data-toast-position": o,
       style: {
@@ -38,13 +38,13 @@ function v({
         right: 0,
         transition: "transform 180ms",
         display: "flex",
-        justifyContent: o.includes("left") ? "flex-start" : o.includes("center") ? "center" : "flex-end",
+        justifyContent: o?.includes("left") ? "flex-start" : o?.includes("center") ? "center" : "flex-end",
         top: n ? "auto" : 0,
         bottom: n ? 0 : "auto",
         transform: `translateY(calc(var(--toast-offset-y, 0px) * ${n ? -1 : 1}))`
       },
-      children: /* @__PURE__ */ c(
-        h,
+      children: /* @__PURE__ */ f(
+        g,
         {
           t,
           position: o,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitzo",
-  "version": "2.3.24",
+  "version": "2.3.25",
   "description": "A lightweight React micro-utility.",
   "type": "module",
   "files": [
@@ -21,6 +21,7 @@
   },
   "scripts": {
     "dev": "vite",
+    "dev:host": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"