kitzo 2.3.38 → 2.3.40

package/dist/index.d.ts

@@ -33,7 +33,7 @@ export declare const toast: ToastFn;
 
 declare type ToastContent = ((dismiss: () => void) => ReactNode) | ReactNode;
 
-export declare function Toaster(props: ToasterProps): JSX.Element;
+export declare function Toaster(props: ToasterProps): JSX.Element | null;
 
 declare type ToasterProps = {
     position?: Positions;

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

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

package/dist/react/components/tooltip/Tooltip.js

@@ -1,34 +1,38 @@
-import { jsx as i, Fragment as u, jsxs as b } from "react/jsx-runtime";
-import x from "./helpers/addTooltipStyles.js";
-import T from "./helpers/getPositionClass.js";
-import v from "./partials/TooltipWrapper.js";
-import w from "./helpers/getAnimationProperties.js";
-function H(c) {
+import { jsx as i, Fragment as d, jsxs as T } from "react/jsx-runtime";
+import c from "react";
+import v from "./helpers/addTooltipStyles.js";
+import w from "./helpers/getPositionClass.js";
+import O from "./partials/TooltipWrapper.js";
+import k from "./helpers/getAnimationProperties.js";
+function C(h) {
   const {
     content: r,
     children: t,
-    position: h = "top",
+    position: y = "top",
     animation: a = !0,
     isHidden: n = !1,
     offset: s = 8,
-    smartHover: m = !0,
-    hideOnTouch: l = !0,
-    isDark: f
-  } = c;
-  if (typeof n == "boolean" && n) return /* @__PURE__ */ i(u, { children: t });
+    smartHover: f = !0,
+    hideOnTouch: m = !0,
+    isDark: l
+  } = h, [D, b] = c.useState(!1);
+  if (c.useEffect(() => {
+    b(!0), v();
+  }, []), !D) return null;
+  if (typeof n == "boolean" && n) return /* @__PURE__ */ i(d, { children: t });
   if (r == null)
-    return /* @__PURE__ */ i(u, { children: t });
+    return /* @__PURE__ */ i(d, { children: t });
   const o = {
     offset: isNaN(Number(s)) ? 8 : Number(s),
-    smartHover: typeof m == "boolean" ? m : !0,
-    hideOnTouch: typeof l == "boolean" ? l : !0
+    smartHover: typeof f == "boolean" ? f : !0,
+    hideOnTouch: typeof m == "boolean" ? m : !0
   };
-  let p = !1, d = !1;
-  if (typeof window < "u" && (d = window.matchMedia("(pointer: coarse)").matches || navigator.maxTouchPoints > 0, p = typeof f == "boolean" ? f : window.matchMedia("(prefers-color-scheme: dark)").matches), d && o.hideOnTouch) return t;
-  const y = T(h), D = !!a, e = w(
+  let u = !1, p = !1;
+  if (typeof window < "u" && (p = window.matchMedia("(pointer: coarse)").matches || navigator.maxTouchPoints > 0, u = typeof l == "boolean" ? l : window.matchMedia("(prefers-color-scheme: dark)").matches), p && o.hideOnTouch) return t;
+  const x = w(y), M = !!a, e = k(
     a === !0 ? {} : a
   );
-  return x(), /* @__PURE__ */ b(
+  return /* @__PURE__ */ T(
     "div",
     {
       style: {
@@ -43,14 +47,14 @@ function H(c) {
         "--startDelay": Math.max(0, e.startDelay),
         "--endDelay": Math.max(0, e.endDelay)
       },
-      className: `kitzo-tooltip-root ${p ? "tooltip-theme-dark" : ""} ${o.smartHover ? "smart-hover" : ""} ${D ? "animate-tooltip" : ""}`,
+      className: `kitzo-tooltip-root ${u ? "tooltip-theme-dark" : ""} ${o.smartHover ? "smart-hover" : ""} ${M ? "animate-tooltip" : ""}`,
       children: [
         t,
         /* @__PURE__ */ i(
-          v,
+          O,
           {
             content: r,
-            positionClass: y,
+            positionClass: x,
             finalOptions: o
           }
         )
@@ -59,5 +63,5 @@ function H(c) {
   );
 }
 export {
-  H as default
+  C as default
 };

package/dist/react/hooks/useWindowSize.js

@@ -1,26 +1,26 @@
-import { useState as o, useRef as u, useEffect as c } from "react";
-function d(n = 30) {
-  const [t, r] = o({
-    screenWidth: window.innerWidth,
-    screenHeight: window.innerHeight
-  }), e = u(null);
-  return c(() => {
-    function i() {
+import t from "react";
+function o(i = 30) {
+  const [r, c] = t.useState({
+    screenWidth: 0,
+    screenHeight: 0
+  }), e = t.useRef(null);
+  return t.useEffect(() => {
+    function n() {
       e.current && clearTimeout(e.current), e.current = setTimeout(
         () => {
-          r({
+          c({
             screenWidth: window.innerWidth,
             screenHeight: window.innerHeight
           });
         },
-        Math.max(0, +n)
+        Math.max(0, +i)
       );
     }
-    return typeof window < "u" && window.addEventListener("resize", i), () => {
-      e.current && clearTimeout(e.current), window.removeEventListener("resize", i);
+    return typeof window < "u" && (n(), window.addEventListener("resize", n)), () => {
+      e.current && clearTimeout(e.current), window.removeEventListener("resize", n);
     };
-  }, [n]), t;
+  }, [i]), r;
 }
 export {
-  d as default
+  o as default
 };

package/package.json

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