kitzo 2.5.0 → 2.5.2

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export declare type ToasterProps = {
     pauseOnHover?: boolean;
     swipeToClose?: boolean;
     animateTransformOrigin?: boolean;
+    animateScale?: boolean;
 };
 
 declare type ToastFn = {
@@ -89,8 +90,8 @@ declare type TooltipCoreProps = {
     smartHover?: boolean;
     hideOnTouch?: boolean;
     animation?: TooltipAnimation;
-    isHidden?: boolean;
-    isDark?: boolean;
+    hidden?: boolean;
+    dark?: boolean;
 };
 
 export declare type TooltipPosition = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Toaster as r } from "./react/components/toast/Toaster.js";
 import { Tooltip as p } from "./react/components/tooltip/Tooltip.js";
-import { toast as m } from "./react/components/toast/helpers/triggerToasts.js";
+import { toast as m } from "./react/components/toast/service/triggerToasts.js";
 import { useCopy as s } from "./react/hooks/useCopy.js";
 import { useDebounce as i } from "./react/hooks/useDebounce.js";
 import { useThrottle as a } from "./react/hooks/useThrottle.js";

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

@@ -1,38 +1,40 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import t from "react";
-import { subscribe as w } from "./helpers/listenars.js";
-import M from "./helpers/manageToasts/manageToasts.js";
+import { subscribe as w } from "./service/listenars.js";
+import z from "./service/manageToasts/manageToasts.js";
 import O from "./partials/ToastContainer.js";
-import { ToasterContext as S } from "./context/ToasterContext.js";
-import { initSwipeToClose as z } from "./helpers/manageToasts/swipeClose.js";
-function q(s) {
+import { ToasterContext as I } from "./context/ToasterContext.js";
+import { initSwipeToClose as $ } from "./service/manageToasts/swipeClose.js";
+import { clampedValue as h } from "./service/utils.js";
+function F(e) {
   const {
-    position: h = "top-center",
-    richColors: u = !1,
-    animateTransformOrigin: g = !0,
-    gap: r = s?.compact ? 8 : 12,
-    edgeOffset: i = 16,
+    position: b = "top-center",
+    gap: r = e?.compact ? 8 : 12,
+    edgeOffset: n = 16,
     dark: c,
-    pauseOnHover: b = !0,
+    compact: g = !1,
+    richColors: u = !1,
+    pauseOnHover: k = !0,
     swipeToClose: y = !0,
-    compact: k = !1
-  } = s, [T, v] = t.useState(!1);
+    animateScale: T = !1,
+    animateTransformOrigin: v = !0
+  } = e, [x, C] = t.useState(!1);
   t.useEffect(() => {
-    v(!0);
+    C(!0);
   }, []);
-  const [p, m] = t.useState([]);
+  const [m, p] = t.useState([]);
   t.useEffect(() => {
-    const e = w(
-      (o) => M({ toast: o, setToasts: m }),
-      s.toasterId
-    ), a = z();
+    const o = w(
+      (s) => z({ toast: s, setToasts: p }),
+      e.toasterId
+    ), a = $();
     return () => {
-      e(), a();
+      o(), a();
     };
-  }, [s.toasterId]);
+  }, [e.toasterId]);
   const f = t.useRef(null), l = t.useCallback(() => {
     if (!f.current) return;
-    const e = f.current.querySelectorAll("[data-toast-container]"), a = {
+    const o = f.current.querySelectorAll("[data-kitzo-toast-container]"), a = {
       "top-left": 0,
       "top-center": 0,
       "top-right": 0,
@@ -40,18 +42,18 @@ function q(s) {
       "bottom-center": 0,
       "bottom-right": 0
     };
-    e.forEach((o) => {
-      const d = o.getAttribute("data-toast-position") || "top-center", C = parseFloat(o.style.getPropertyValue("--toast-height")) || 0;
-      o.style.setProperty("--toast-offset-y", `${a[d]}px`);
-      const E = isNaN(+r) ? 8 : +r;
-      a[d] += C + E;
+    o.forEach((s) => {
+      const d = s.getAttribute("data-toast-position") || "top-center", N = parseFloat(s.style.getPropertyValue("--toast-height")) || 0;
+      s.style.setProperty("--toast-offset-y", `${a[d]}px`);
+      const S = isNaN(Number(r)) ? e?.compact ? 8 : 12 : Number(r);
+      a[d] += N + h(S, 0, 32);
     });
-  }, [r]);
+  }, [r, e?.compact]);
   if (t.useLayoutEffect(() => {
     l();
-  }, [p, l]), !T) return null;
-  const x = typeof c == "boolean" ? c : window.matchMedia("(prefers-color-scheme: dark)").matches;
-  return /* @__PURE__ */ n(
+  }, [m, l]), !x) return null;
+  const E = typeof c == "boolean" ? c : window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return /* @__PURE__ */ i(
     "div",
     {
       ref: f,
@@ -61,32 +63,33 @@ function q(s) {
         zIndex: 2147483647,
         pointerEvents: "none",
         display: "grid",
-        padding: i != null ? `${Math.max(Math.min(+i, 200), 0)}px` : 16
+        padding: n != null ? `${h(Number(n), 0, 32)}px` : 16
       },
-      className: `kitzo-toaster ${u ? "kitzo-toaster-rich-colors" : ""} ${x ? "kitzo-toaster-dark" : ""}`,
-      children: /* @__PURE__ */ n(
+      className: `kitzo-toaster ${u ? "kitzo-toaster-rich-colors" : ""} ${E ? "dark kitzo-toaster-dark" : ""}`,
+      children: /* @__PURE__ */ i(
         "div",
         {
           style: {
             position: "relative"
           },
-          children: /* @__PURE__ */ n(
-            S.Provider,
+          children: /* @__PURE__ */ i(
+            I.Provider,
             {
               value: {
-                position: h,
+                position: b,
                 gap: r,
-                edgeOffset: i,
-                setToasts: m,
+                edgeOffset: n,
+                setToasts: p,
                 updateOffsets: l,
                 dark: c,
-                compact: k,
+                compact: g,
                 richColors: u,
                 swipeToClose: y,
-                pauseOnHover: b,
-                animateTransformOrigin: g
+                pauseOnHover: k,
+                animateScale: T,
+                animateTransformOrigin: v
               },
-              children: p.map((e) => /* @__PURE__ */ n(O, { t: e }, e.id))
+              children: m.map((o) => /* @__PURE__ */ i(O, { t: o }, o.id))
             }
           )
         }
@@ -95,5 +98,5 @@ function q(s) {
   );
 }
 export {
-  q as Toaster
+  F as Toaster
 };

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

@@ -1,34 +1,34 @@
-import { jsxs as S, jsx as t, Fragment as o } from "react/jsx-runtime";
-import { resumeToast as l, pauseToast as m } from "../helpers/manageToasts/timers.js";
-import { toast as I } from "../helpers/triggerToasts.js";
-import { InfoSvg as E, ErrorSvg as T, WarningSvg as k, SuccessSvg as w, LoadingSvg as L } from "./Svgs.js";
-import { useToasterContext as M } from "../context/ToasterContext.js";
-function z({
-  t: c,
-  position: s,
-  shouldAnimateTransformOrigin: p,
-  swipeToClose: u
+import { jsxs as x, jsx as t, Fragment as n } from "react/jsx-runtime";
+import { resumeToast as S, pauseToast as I } from "../service/manageToasts/timers.js";
+import { toast as T } from "../service/triggerToasts.js";
+import { InfoSvg as k, ErrorSvg as w, WarningSvg as E, SuccessSvg as N, LoadingSvg as b } from "./Svgs.js";
+import { useToasterContext as j } from "../context/ToasterContext.js";
+function H({
+  t: i,
+  position: o,
+  shouldAnimateTransformOrigin: l,
+  swipeToClose: p
 }) {
-  const { pauseOnHover: n, compact: f } = M(), {
+  const { pauseOnHover: d, compact: m } = j(), {
     id: e,
-    type: r,
-    action: g,
-    content: i,
-    status: v,
-    showIcon: h,
+    type: s,
+    action: u,
+    content: r,
+    status: f,
+    showIcon: g,
     icon: a,
-    toasterId: y,
-    updateState: x
-  } = c, d = {
-    loading: /* @__PURE__ */ t(L, {}),
-    success: /* @__PURE__ */ t(w, {}),
-    warning: /* @__PURE__ */ t(k, {}),
-    error: /* @__PURE__ */ t(T, {}),
-    info: /* @__PURE__ */ t(E, {}),
+    toasterId: v,
+    updateState: h
+  } = i, c = {
+    loading: /* @__PURE__ */ t(b, {}),
+    success: /* @__PURE__ */ t(N, {}),
+    warning: /* @__PURE__ */ t(E, {}),
+    error: /* @__PURE__ */ t(w, {}),
+    info: /* @__PURE__ */ t(k, {}),
     default: null,
     custom: null
   };
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ x(
     "div",
     {
       id: e,
@@ -38,25 +38,26 @@ function z({
         alignItems: "center",
         gap: 8
       },
-      "data-toaster-id": y,
-      "data-action": g,
-      "data-status": v,
-      "data-type": r,
-      "data-position": s,
-      "data-screen-x": s.split("-")[1],
-      "data-screen-y": s.split("-")[0],
+      "data-toaster-id": v,
+      "data-action": u,
+      "data-status": f,
+      "data-type": s,
+      "data-position": o,
+      "data-screen-x": o.split("-")[1],
+      "data-screen-y": o.split("-")[0],
       "data-exit": "auto",
-      "data-swipeable": u,
-      "data-animate-transform-origin": p,
-      "data-compact": f,
-      "data-update-state": x,
-      onPointerEnter: () => n && m(e),
-      onPointerLeave: () => n && l(e),
-      onMouseEnter: () => n && m(e),
-      onMouseLeave: () => n && l(e),
+      "data-swipeable": p,
+      "data-animate-transform-origin": l,
+      "data-compact": m,
+      "data-update-state": h,
+      "data-pause-on-hover": d,
+      onPointerEnter: (y) => {
+        d && y.pointerType === "mouse" && I(e);
+      },
+      onPointerLeave: () => S(e),
       className: "kitzo-toast",
       children: [
-        h && /* @__PURE__ */ t(o, { children: a ? /* @__PURE__ */ t(o, { children: typeof a == "string" || typeof a == "number" ? /* @__PURE__ */ t(
+        g && /* @__PURE__ */ t(n, { children: a ? /* @__PURE__ */ t(n, { children: typeof a == "string" || typeof a == "number" ? /* @__PURE__ */ t(
           "div",
           {
             style: {
@@ -65,14 +66,14 @@ function z({
             className: "svg-container",
             children: a
           }
-        ) : /* @__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(n, { children: a }) }) : /* @__PURE__ */ t(n, { children: c[s] && /* @__PURE__ */ t("div", { style: { flexShrink: 0 }, className: "svg-container", children: c[s] }) }) }),
         /* @__PURE__ */ t(
           "div",
           {
             style: {
               flex: 1
             },
-            children: typeof i == "function" ? i(() => I.dismiss(e, c.toasterId)) : i
+            children: typeof r == "function" ? r(() => T.dismiss(e, i.toasterId)) : r
           }
         )
       ]
@@ -80,5 +81,5 @@ function z({
   );
 }
 export {
-  z as default
+  H as default
 };

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

@@ -1,61 +1,64 @@
-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 }) {
+import { jsx as c } from "react/jsx-runtime";
+import { useRef as g, useLayoutEffect as h } from "react";
+import x from "./Toast.js";
+import { useToasterContext as y } from "../context/ToasterContext.js";
+function z({ t }) {
   const {
-    updateOffsets: s,
+    updateOffsets: n,
     position: f,
-    animateTransformOrigin: c,
+    animateScale: i,
+    animateTransformOrigin: m,
     swipeToClose: p
-  } = x(), i = b(null);
-  g(() => {
-    const e = i.current;
+  } = y(), r = g(null);
+  h(() => {
+    const e = r.current;
     if (!e) return;
-    const a = new ResizeObserver(() => {
-      const T = e.offsetHeight;
-      e.style.setProperty("--toast-height", `${T}px`), s();
+    const l = new ResizeObserver(() => {
+      const b = e.offsetHeight;
+      e.style.setProperty("--toast-height", `${b}px`), n();
     });
-    return a.observe(e), () => a.disconnect();
-  }, [s]);
-  const m = [
+    return l.observe(e), () => l.disconnect();
+  }, [n]);
+  const u = [
     "top-left",
     "top-center",
     "top-right",
     "bottom-left",
     "bottom-center",
     "bottom-right"
-  ], 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(
+  ], a = t.position || f, o = u.includes(a) ? a : "top-center", s = o?.includes("bottom"), d = typeof t.animateTransformOrigin == "boolean" ? t.animateTransformOrigin : !!m, T = typeof t.swipeToClose == "boolean" ? t.swipeToClose : !!p;
+  return /* @__PURE__ */ c(
     "div",
     {
-      ref: i,
-      "data-toast-container": !0,
+      ref: r,
+      "data-kitzo-toast-container": !0,
       "data-toast-position": o,
+      "data-animate-scale": i,
+      className: "kitzo-toast-container",
       style: {
         position: "absolute",
         zIndex: t.zIndex,
         left: 0,
         right: 0,
-        transition: "transform 180ms",
+        transition: `transform ${i ? "220ms" : "280ms"}`,
         display: "flex",
         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}))`
+        top: s ? "auto" : 0,
+        bottom: s ? 0 : "auto",
+        transform: `translateY(calc(var(--toast-offset-y, 0px) * ${s ? -1 : 1}))`
       },
-      children: /* @__PURE__ */ l(
-        h,
+      children: /* @__PURE__ */ c(
+        x,
         {
           t,
           position: o,
-          shouldAnimateTransformOrigin: u,
-          swipeToClose: d
+          shouldAnimateTransformOrigin: d,
+          swipeToClose: T
         }
       )
     }
   );
 }
 export {
-  v as default
+  z as default
 };

package/dist/react/components/toast/{helpers → service}/addToastStyles.js

@@ -94,7 +94,6 @@ const a = `.kitzo-toaster {
   font-family: inherit;
   font-size: 0.875rem;
   white-space: pre-wrap;
-  text-wrap: balance;
 }
 
 .kitzo-toast.is-swiping {
@@ -143,7 +142,7 @@ const a = `.kitzo-toaster {
 .kitzo-toast[data-type='warning'],
 .kitzo-toast[data-type='error'],
 .kitzo-toast[data-type='info'] {
-  border-radius: 0.425rem;
+  border-radius: 0.5525rem;
   padding: 0.375rem 0.625rem;
   box-shadow: 0 3px 8px -3px hsl(0, 0%, 0%, 0.15);
 }
@@ -162,16 +161,22 @@ const a = `.kitzo-toaster {
 .kitzo-toast {
   --swipe-x: 0px;
   --motion-y: 0%;
-  --scale: 0.6;
+  --scale: 1;
   --exit-x: 0px;
 }
 
+.kitzo-toast-container[data-animate-scale='true'] {
+  .kitzo-toast {
+    --scale: 0.6;
+  }
+}
+
 .kitzo-toast[data-screen-y='top'] {
-  --motion-y: -120%;
+  --motion-y: -100%;
 }
 
 .kitzo-toast[data-screen-y='bottom'] {
-  --motion-y: 120%;
+  --motion-y: 100%;
 }
 
 .kitzo-toast[data-status='leaving'][data-exit='swipe'] {
@@ -196,10 +201,10 @@ const a = `.kitzo-toaster {
 }
 
 .kitzo-toast[data-update-state='updated'] {
-  animation: update 250ms ease;
+  animation: update 280ms ease;
 }
 .kitzo-toast[data-update-state='updated-again'] {
-  animation: update-again 250ms ease;
+  animation: update-again 280ms ease;
 }
 
 @keyframes update {
@@ -223,31 +228,32 @@ const a = `.kitzo-toaster {
   }
 }
 
-/*! toast transfor origin */
+/*! toast transform 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;
+@media (width > 380px) {
+  .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'] {

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

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

package/dist/react/components/toast/service/utils.js

@@ -0,0 +1,6 @@
+function n(a, t, e) {
+  return Math.max(t, Math.min(a, e));
+}
+export {
+  n as clampedValue
+};

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

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

package/dist/react/components/tooltip/helpers/addTooltipStyles.js

@@ -1,4 +1,5 @@
-const o = `.kitzo-tooltip-root {
+const o = `/*! Default styling */
+.kitzo-tooltip-root {
   --bg-clr: hsl(0, 0%, 15%);
   --text-clr: hsl(0, 0%, 95%);
 
@@ -6,6 +7,8 @@ const o = `.kitzo-tooltip-root {
   --transition-endDuration: calc(var(--endDuration) * 1ms);
   --transition-startDelay: calc(var(--startDelay) * 1ms);
   --transition-endDelay: calc(var(--endDelay) * 1ms);
+
+  --tooltip-offset: calc(var(--offset) * 1px + 1px);
 }
 
 .kitzo-tooltip-root.tooltip-theme-dark {
@@ -32,12 +35,11 @@ const o = `.kitzo-tooltip-root {
   color: var(--text-clr);
   padding-block: 0.25rem;
   padding-inline: 0.5rem;
-  border-radius: 0.325rem;
+  border-radius: 0.425rem;
 }
 
-/* Tooltip positioning */
+/*! Tooltip transitions */
 .kitzo-tooltip-wrapper {
-  --tooltip-offset: calc(var(--offset) * 1px + 1px);
   opacity: 0;
   transition-property: opacity;
   transition-delay: calc(
@@ -50,80 +52,6 @@ const o = `.kitzo-tooltip-root {
   transition-delay: 0ms;
 }
 
-/* Top */
-.kitzo-tooltip-wrapper.top {
-  bottom: 100%;
-  padding-block-end: var(--tooltip-offset);
-}
-.kitzo-tooltip-wrapper.top {
-  left: 50%;
-  translate: -50% 0;
-}
-.kitzo-tooltip-wrapper.top.start {
-  left: 0;
-  translate: 0 0;
-}
-.kitzo-tooltip-wrapper.top.end {
-  left: auto;
-  right: 0;
-  translate: 0 0;
-}
-
-/* Right */
-.kitzo-tooltip-wrapper.right {
-  left: 100%;
-  padding-inline-start: var(--tooltip-offset);
-}
-.kitzo-tooltip-wrapper.right {
-  top: 50%;
-  translate: 0 -50%;
-}
-.kitzo-tooltip-wrapper.right.start {
-  top: 0;
-  translate: 0 0;
-}
-.kitzo-tooltip-wrapper.right.end {
-  top: 100%;
-  translate: 0 -100%;
-}
-
-/* Bottom */
-.kitzo-tooltip-wrapper.bottom {
-  top: 100%;
-  padding-block-start: var(--tooltip-offset);
-}
-.kitzo-tooltip-wrapper.bottom {
-  left: 50%;
-  translate: -50% 0;
-}
-.kitzo-tooltip-wrapper.bottom.start {
-  left: 0;
-  translate: 0 0;
-}
-.kitzo-tooltip-wrapper.bottom.end {
-  left: 100%;
-  translate: -100% 0;
-}
-
-/* Left */
-.kitzo-tooltip-wrapper.left {
-  right: 100%;
-  padding-inline-end: var(--tooltip-offset);
-}
-.kitzo-tooltip-wrapper.left {
-  top: 50%;
-  translate: 0 -50%;
-}
-.kitzo-tooltip-wrapper.left.start {
-  top: 0;
-  translate: 0 0;
-}
-.kitzo-tooltip-wrapper.left.end {
-  top: 100%;
-  translate: 0 -100%;
-}
-
-/* Tooltip transitions */
 .kitzo-tooltip-root.animate-tooltip {
   .kitzo-tooltip-content {
     text-rendering: optimizeLegibility;
@@ -170,7 +98,7 @@ const o = `.kitzo-tooltip-root {
   }
 }
 
-/* smart hover persistence feature */
+/*! smart hover persistence feature */
 .kitzo-tooltip-root {
   .kitzo-tooltip-wrapper {
     pointer-events: none;
@@ -180,7 +108,73 @@ const o = `.kitzo-tooltip-root {
   .kitzo-tooltip-wrapper {
     pointer-events: all;
   }
-}`;
+}
+
+/*! Tooltip positioning */
+/*? Top */
+.kitzo-tooltip-wrapper[data-position^='top'] {
+  bottom: 100%;
+  padding-block-end: var(--tooltip-offset);
+}
+.kitzo-tooltip-wrapper[data-position='top'] {
+  left: 50%;
+  translate: -50% 0;
+}
+.kitzo-tooltip-wrapper[data-position='top-start'] {
+  left: 0;
+}
+.kitzo-tooltip-wrapper[data-position='top-end'] {
+  right: 0;
+}
+
+/*? Right */
+.kitzo-tooltip-wrapper[data-position^='right'] {
+  inset-inline-start: 100%;
+  padding-inline-start: var(--tooltip-offset);
+}
+.kitzo-tooltip-wrapper[data-position='right'] {
+  top: 50%;
+  translate: 0 -50%;
+}
+.kitzo-tooltip-wrapper[data-position='right-start'] {
+  top: 0;
+}
+.kitzo-tooltip-wrapper[data-position='right-end'] {
+  bottom: 0;
+}
+
+/*? Bottom */
+.kitzo-tooltip-wrapper[data-position^='bottom'] {
+  top: 100%;
+  padding-block-start: var(--tooltip-offset);
+}
+.kitzo-tooltip-wrapper[data-position='bottom'] {
+  left: 50%;
+  translate: -50% 0;
+}
+.kitzo-tooltip-wrapper[data-position='bottom-start'] {
+  left: 0;
+}
+.kitzo-tooltip-wrapper[data-position='bottom-end'] {
+  right: 0;
+}
+
+/*? Left */
+.kitzo-tooltip-wrapper[data-position^='left'] {
+  inset-inline-end: 100%;
+  padding-inline-end: var(--tooltip-offset);
+}
+.kitzo-tooltip-wrapper[data-position='left'] {
+  top: 50%;
+  translate: 0 -50%;
+}
+.kitzo-tooltip-wrapper[data-position='left-start'] {
+  top: 0;
+}
+.kitzo-tooltip-wrapper[data-position='left-end'] {
+  bottom: 0;
+}
+`;
 function i() {
   if (!document.getElementById("kitzo-tooltip-styles")) {
     const t = document.createElement("style");

package/dist/react/components/tooltip/helpers/getPositionClass.js

@@ -1,27 +1,22 @@
-const s = [
-  "top-start",
+const r = [
   "top",
+  "top-start",
   "top-end",
-  "right-start",
   "right",
+  "right-start",
   "right-end",
-  "bottom-start",
   "bottom",
+  "bottom-start",
   "bottom-end",
-  "left-start",
   "left",
+  "left-start",
   "left-end"
 ];
-function n(t = "") {
+function s(t = "") {
   t = typeof t == "string" ? t.trim().toLowerCase() : "top";
-  const e = s.find((o) => o === t);
-  if (!e) return "top";
-  if (e.includes("-")) {
-    const [o, r] = e.split("-");
-    return `${o} ${r}`;
-  } else
-    return e;
+  const o = r.find((e) => e === t);
+  return o || "top";
 }
 export {
-  n as default
+  s as default
 };

package/dist/react/components/tooltip/partials/TooltipWrapper.js

@@ -1,8 +1,8 @@
-import { jsx as e, Fragment as i } from "react/jsx-runtime";
+import { jsx as e, Fragment as r } from "react/jsx-runtime";
 function l({
   content: t,
-  positionClass: o,
-  finalOptions: r
+  positionClass: i,
+  finalOptions: o
 }) {
   return /* @__PURE__ */ e(
     "div",
@@ -10,15 +10,15 @@ function l({
       style: {
         position: "absolute",
         whiteSpace: "pre-wrap",
-        width: "max-content"
+        inlineSize: "max-content"
       },
-      tabIndex: -1,
-      className: `kitzo-tooltip-wrapper ${o}`,
+      className: `kitzo-tooltip-wrapper ${i}`,
+      "data-position": i,
       children: /* @__PURE__ */ e(
         "div",
         {
-          className: `kitzo-tooltip-content ${o} ${r.arrow ? "tooltip-arrow" : ""}`,
-          children: typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ e("div", { className: "kitzo-tooltip-content-default-style", children: t }) : /* @__PURE__ */ e(i, { children: t })
+          className: `kitzo-tooltip-content ${i} ${o.arrow ? "tooltip-arrow" : ""}`,
+          children: typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ e("div", { className: "kitzo-tooltip-content-default-style", children: t }) : /* @__PURE__ */ e(r, { children: t })
         }
       )
     }

package/package.json

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

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

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