@rinzai/zen 0.9.0 → 0.10.0

package/dist/tabs/index.js

@@ -1,37 +1,48 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { PILL as t } from "../utils/styles.js";
-import { useIndicator as n } from "../utils/indicator.js";
-import r, { PillIndicator as i } from "../pills/index.js";
-import { createContext as a, useContext as o, useId as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { reducedMotion as t } from "../utils/motion.js";
+import { PILL as n } from "../utils/styles.js";
+import { useIndicator as r } from "../utils/indicator.js";
+import i, { PillIndicator as a } from "../pills/index.js";
+import { createContext as o, useContext as s, useEffect as c, useId as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region packages/tabs/index.tsx
-var f = a(null);
-function p(e) {
-	let t = o(f);
+var h = typeof window > "u" ? c : u, g = o(null);
+function _(e) {
+	let t = s(g);
 	if (!t) throw Error(`<${e}> must be inside <Tabs>`);
 	return t;
 }
-function m({ value: t, defaultValue: n = "", onValueChange: r, className: i, ...a }) {
-	let [o, c] = l(n), d = t ?? o, p = s();
-	return /* @__PURE__ */ u(f.Provider, {
+function v({ value: t, defaultValue: n = "", onValueChange: r, className: i, ...a }) {
+	let [o, s] = f(n), c = t ?? o, [u, m] = f({ value: c });
+	u.value !== c && m({
+		value: c,
+		before: u.value
+	});
+	let h = d(null), _ = (e) => {
+		let t = h.current;
+		return h.current = e, t;
+	}, v = l();
+	return /* @__PURE__ */ p(g.Provider, {
 		value: {
-			value: d,
+			value: c,
+			before: u.before,
+			show: _,
 			select: (e) => {
-				t === void 0 && c(e), r?.(e);
+				t === void 0 && s(e), r?.(e);
 			},
-			idFor: (e, t) => `${p}-${e}-${t.replace(/\s+/g, "-")}`
+			idFor: (e, t) => `${v}-${e}-${t.replace(/\s+/g, "-")}`
 		},
-		children: /* @__PURE__ */ u("div", {
-			className: e("zen__tabs flex flex-col gap-4", i),
+		children: /* @__PURE__ */ p("div", {
+			className: e("zen__tabs relative flex flex-col gap-4", i),
 			...a
 		})
 	});
 }
-var h = a("underline");
-function g({ variant: e = "underline", className: t, children: n, ...a }) {
-	p("TabList");
-	let o = c(null), s = (e) => {
+var y = o("underline");
+function b({ variant: e = "underline", className: t, children: n, ...r }) {
+	_("TabList");
+	let o = d(null), s = (e) => {
 		let t = Array.from(o.current?.querySelectorAll("[role=\"tab\"]:not(:disabled)") ?? []), n = t.indexOf(document.activeElement);
 		if (n === -1) return;
 		let r = {
@@ -44,75 +55,114 @@ function g({ variant: e = "underline", className: t, children: n, ...a }) {
 		e.preventDefault();
 		let i = t[(r + t.length) % t.length];
 		i.focus(), i.click();
-	}, l = /* @__PURE__ */ u(h.Provider, {
+	}, c = /* @__PURE__ */ p(y.Provider, {
 		value: e,
 		children: n
 	});
-	return e === "pills" ? /* @__PURE__ */ d(r, {
+	return e === "pills" ? /* @__PURE__ */ m(i, {
 		ref: o,
 		role: "tablist",
 		onKeyDown: s,
 		className: t,
-		...a,
-		children: [l, /* @__PURE__ */ u(i, {})]
-	}) : /* @__PURE__ */ u(_, {
+		...r,
+		children: [c, /* @__PURE__ */ p(a, {})]
+	}) : /* @__PURE__ */ p(x, {
 		ref: o,
 		role: "tablist",
 		onKeyDown: s,
 		className: t,
-		...a,
-		children: l
+		...r,
+		children: c
 	});
 }
-function _({ ref: t, className: r, children: i, ...a }) {
-	let o = c(null), s = n(o, "[role=\"tab\"][aria-selected=\"true\"]");
-	return /* @__PURE__ */ d("div", {
+function x({ ref: t, className: n, children: i, ...a }) {
+	let o = d(null), s = r(o, "[role=\"tab\"][aria-selected=\"true\"]");
+	return /* @__PURE__ */ m("div", {
 		ref: (e) => {
 			o.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
 		},
-		className: e("border-border relative flex gap-1 border-b", r),
+		className: e("border-border relative flex gap-1 border-b", n),
 		...a,
-		children: [i, s ? /* @__PURE__ */ u("span", {
+		children: [i, s ? /* @__PURE__ */ p("span", {
 			"aria-hidden": !0,
 			className: "zen__tab-bar bg-primary absolute bottom-[-1px] left-0 h-0.5 transition-[translate,width] duration-150 ease-in-out",
 			style: {
 				width: s.w,
 				translate: `${s.x}px 0`
 			}
-		}, "measured") : /* @__PURE__ */ u("span", {
+		}, "measured") : /* @__PURE__ */ p("span", {
 			"aria-hidden": !0,
 			"data-pending": !0,
 			className: "zen__tab-bar hidden"
 		}, "pending")]
 	});
 }
-function v({ value: n, className: r, onClick: i, ...a }) {
-	let { value: s, select: c, idFor: l } = p("Tab"), d = o(h), f = s === n;
-	return /* @__PURE__ */ u("button", {
+function S({ value: t, className: r, onClick: i, ...a }) {
+	let { value: o, select: c, idFor: l } = _("Tab"), u = s(y), d = o === t;
+	return /* @__PURE__ */ p("button", {
 		type: "button",
 		role: "tab",
-		id: l("tab", n),
-		"aria-selected": f,
-		"aria-controls": l("panel", n),
-		tabIndex: f ? 0 : -1,
-		"data-active": f || void 0,
+		id: l("tab", t),
+		"aria-selected": d,
+		"aria-controls": l("panel", t),
+		tabIndex: d ? 0 : -1,
+		"data-active": d || void 0,
 		onClick: (e) => {
-			c(n), i?.(e);
+			c(t), i?.(e);
 		},
-		className: e(d === "pills" ? t : "focus-visible:ring-ring text-muted-foreground hover:text-foreground data-active:text-foreground cursor-pointer px-3 py-2 text-sm whitespace-nowrap outline-hidden select-none focus-visible:ring-1 disabled:cursor-not-allowed", r),
+		className: e(u === "pills" ? n : "focus-visible:ring-ring text-muted-foreground hover:text-foreground data-active:text-foreground cursor-pointer px-3 py-2 text-sm whitespace-nowrap outline-hidden select-none focus-visible:ring-1 disabled:cursor-not-allowed", r),
 		...a
 	});
 }
-function y({ value: t, className: n, ...r }) {
-	let { value: i, idFor: a } = p("TabPanel");
-	return i === t ? /* @__PURE__ */ u("div", {
+function C({ value: n, className: r, ...i }) {
+	let { value: a, before: o, show: s, idFor: c } = _("TabPanel"), l = a === n;
+	return h(() => {
+		if (!l) return;
+		let e = document.getElementById(c("panel", n)), r = s(e);
+		if (!e || o === void 0 || o === n) return;
+		let i = document.getElementById(c("tab", n)), a = document.getElementById(c("tab", o));
+		if (!i || !a) return;
+		let u = !!(i.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING);
+		e.dataset.enter = u ? "end" : "start", t() || T(e, r, u);
+	}, [l, o]), l ? /* @__PURE__ */ p("div", {
 		role: "tabpanel",
-		id: a("panel", t),
-		"aria-labelledby": a("tab", t),
+		id: c("panel", n),
+		"aria-labelledby": c("tab", n),
 		tabIndex: 0,
-		className: e("focus-visible:outline-ring/50 outline-hidden focus-visible:outline-2 focus-visible:outline-offset-4", n),
-		...r
+		className: e("zen__tab-panel focus-visible:outline-ring/50 outline-hidden focus-visible:outline-2 focus-visible:outline-offset-4", r),
+		...i
 	}) : null;
 }
+var w = {
+	duration: 300,
+	easing: "cubic-bezier(0.33, 1, 0.68, 1)"
+};
+function T(e, t, n) {
+	let r = e.closest(".zen__tabs");
+	if (!e.animate) return;
+	let i = n === (getComputedStyle(e).direction !== "rtl") ? 1 : -1, a = e.offsetWidth, o = Math.min(a * .25, 208), s = e.offsetHeight, c = s;
+	if (t && !t.isConnected && r) {
+		let n = e.getBoundingClientRect(), l = r.getBoundingClientRect();
+		t.removeAttribute("id"), t.setAttribute("aria-hidden", "true"), t.inert = !0, t.getAnimations().forEach((e) => e.cancel()), Object.assign(t.style, {
+			position: "absolute",
+			top: `${n.top - l.top}px`,
+			left: `${n.left - l.left}px`,
+			width: `${a}px`,
+			pointerEvents: "none"
+		}), r.append(t), c = t.offsetHeight;
+		let u = Math.max(0, c - s), d = t.animate({
+			translate: ["0 0", `${-i * o}px 0`],
+			opacity: [1, 0],
+			clipPath: ["inset(0 0 0 0)", i > 0 ? `inset(0 0 ${u}px ${o}px)` : `inset(0 ${o}px ${u}px 0)`]
+		}, w);
+		d.onfinish = d.oncancel = () => t.remove();
+	}
+	let l = Math.max(0, s - c);
+	e.animate({
+		translate: [`${i * o}px 0`, "0 0"],
+		opacity: [0, 1],
+		clipPath: [i > 0 ? `inset(0 ${o}px ${l}px 0)` : `inset(0 0 ${l}px ${o}px)`, "inset(0 0 0 0)"]
+	}, w);
+}
 //#endregion
-export { v as Tab, g as TabList, y as TabPanel, m as default };
+export { S as Tab, b as TabList, C as TabPanel, v as default };

package/dist/theme-toggle/index.js

@@ -4,12 +4,12 @@ import t from "../icons/micro/moon.js";
 import n from "../icons/micro/sun.js";
 import { prepareThemeWave as r, themeWave as i } from "../utils/theme-wave.js";
 import { useSyncExternalStore as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
-import { flushSync as s } from "react-dom";
+import { flushSync as o } from "react-dom";
+import { jsx as s } from "react/jsx-runtime";
 //#region packages/theme-toggle/index.tsx
 var c = (e = "theme") => `try{var t=localStorage.getItem(${JSON.stringify(e)}),r=document.documentElement;if(t==='light'||t==='dark'){r.classList.remove('light','dark');r.classList.add(t)}}catch(e){}`;
 function l({ storageKey: e = "theme" }) {
-	return /* @__PURE__ */ o("script", { dangerouslySetInnerHTML: { __html: c(e) } });
+	return /* @__PURE__ */ s("script", { dangerouslySetInnerHTML: { __html: c(e) } });
 }
 var u = /* @__PURE__ */ new Set();
 function d(e) {
@@ -25,7 +25,7 @@ function d(e) {
 var f = () => document.documentElement.classList.contains("light") ? "light" : "dark";
 function p({ value: c, onChange: l, target: p, storageKey: m = "theme", className: h }) {
 	let g = a(d, f, () => "dark"), _ = c ?? g, v = _ === "dark" ? "light" : "dark";
-	return /* @__PURE__ */ o("button", {
+	return /* @__PURE__ */ s("button", {
 		type: "button",
 		"aria-label": `Switch to ${v} theme`,
 		onPointerEnter: r,
@@ -38,12 +38,12 @@ function p({ value: c, onChange: l, target: p, storageKey: m = "theme", classNam
 					localStorage.setItem(m, v);
 				} catch {}
 			}
-			s(() => {
+			o(() => {
 				l?.(v), u.forEach((e) => e());
 			});
 		}, e.currentTarget, p?.current),
 		className: e("zen__theme-toggle text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground focus-visible:ring-ring/50 grid size-9 cursor-pointer place-items-center rounded-lg outline-hidden focus-visible:ring-2", h),
-		children: o(_ === "dark" ? t : n, { className: "size-4" })
+		children: s(_ === "dark" ? t : n, { className: "size-4" })
 	});
 }
 //#endregion

package/dist/theme.css

@@ -957,16 +957,23 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
  * otherwise be repainted when the animation ends, its icons snapping a pixel
  * away from the text.
  */
-.zen__popover,
+.zen__popover {
+    will-change: opacity;
+}
 .zen__dialog {
     will-change: scale;
 }
+/* The gap animates, not scale (which reads as resizing), so a popup flipped above slides the right way. */
 .zen__popover {
+    margin-block: calc(var(--zen-anchor-offset, 4) * 1px);
     transition:
         opacity 150ms,
-        scale 150ms,
-        overlay 150ms allow-discrete,
-        display 150ms allow-discrete;
+        margin-block 180ms var(--ease-out-soft),
+        overlay 180ms allow-discrete,
+        display 180ms allow-discrete;
+}
+.zen__popover:not(:popover-open) {
+    margin-block: calc((var(--zen-anchor-offset, 4) - 6) * 1px);
 }
 .zen__dialog {
     /*
@@ -988,7 +995,9 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
         overlay 150ms allow-discrete,
         display 150ms allow-discrete;
 }
-.zen__popover:not(:popover-open),
+.zen__popover:not(:popover-open) {
+    opacity: 0;
+}
 .zen__dialog:not([open]) {
     opacity: 0;
     scale: 0.95;
@@ -1039,7 +1048,10 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     user-select: none;
 }
 @starting-style {
-    .zen__popover:popover-open,
+    .zen__popover:popover-open {
+        opacity: 0;
+        margin-block: calc((var(--zen-anchor-offset, 4) - 6) * 1px);
+    }
     .zen__dialog[open] {
         opacity: 0;
         scale: 0.95;
@@ -1153,6 +1165,47 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
 .rise > *:nth-child(n + 5) {
     animation-delay: 200ms;
 }
+/* A list's rows (a .rise-list's children, e.g. a TableBody's) enter the same way, in quicker steps, as they first show. */
+.rise-list > * {
+    animation: zen-rise 0.45s var(--ease-out-soft) backwards;
+}
+.rise-list > *:nth-child(2) {
+    animation-delay: 35ms;
+}
+.rise-list > *:nth-child(3) {
+    animation-delay: 70ms;
+}
+.rise-list > *:nth-child(4) {
+    animation-delay: 105ms;
+}
+.rise-list > *:nth-child(5) {
+    animation-delay: 140ms;
+}
+.rise-list > *:nth-child(6) {
+    animation-delay: 175ms;
+}
+.rise-list > *:nth-child(7) {
+    animation-delay: 210ms;
+}
+.rise-list > *:nth-child(8) {
+    animation-delay: 245ms;
+}
+.rise-list > *:nth-child(9) {
+    animation-delay: 280ms;
+}
+.rise-list > *:nth-child(10) {
+    animation-delay: 315ms;
+}
+.rise-list > *:nth-child(11) {
+    animation-delay: 350ms;
+}
+.rise-list > *:nth-child(12) {
+    animation-delay: 385ms;
+}
+/* Past the first screenful, rows (often added later, e.g. by LoadMore) just appear. */
+.rise-list > *:nth-child(n + 13) {
+    animation: none;
+}
 
 /*
  * Loading placeholders: a soft light sweeping across. The light is a layer
@@ -1207,6 +1260,53 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     object-position: top left;
 }
 
+/* Pages: the old one fades out as the new one rises in (PageTransition). */
+::view-transition-group(zen-page) {
+    animation-duration: 0.34s;
+    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+::view-transition-old(zen-page) {
+    animation: zen-page-out 0.16s ease-in both;
+}
+::view-transition-new(zen-page) {
+    animation: zen-page-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s both;
+}
+@keyframes zen-page-out {
+    to {
+        opacity: 0;
+        translate: 0 -6px;
+    }
+}
+@keyframes zen-page-in {
+    from {
+        opacity: 0;
+        translate: 0 12px;
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    ::view-transition-group(zen-page),
+    ::view-transition-old(zen-page),
+    ::view-transition-new(zen-page) {
+        animation: none;
+    }
+}
+html.reduce-motion::view-transition-group(zen-page),
+html.reduce-motion::view-transition-old(zen-page),
+html.reduce-motion::view-transition-new(zen-page) {
+    animation: none;
+}
+
+/* The selection bar rises into view when the first row is selected. */
+.zen__selection-bar {
+    animation: zen-bar-in 0.3s var(--ease-out-soft) both;
+}
+@keyframes zen-bar-in {
+    from {
+        opacity: 0;
+        translate: 0 16px;
+    }
+}
+
 /* Content arriving where its placeholder was. */
 .zen__reveal {
     animation: zen-reveal 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
@@ -1218,6 +1318,57 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     }
 }
 
+/* A progress ring reaching its goal: a ring of glow goes out from the arc as it closes. */
+.zen__ring-burst {
+    animation: zen-ring-burst 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
+    box-shadow: 0 0 18px oklch(var(--glow) / calc(0.6 * var(--glow-k)));
+}
+@keyframes zen-ring-burst {
+    from {
+        opacity: 0.9;
+        scale: 1;
+    }
+    to {
+        opacity: 0;
+        scale: 1.45;
+    }
+}
+
+/* A value just changed by an edit. */
+.zen__editable-cell[data-changed] {
+    animation: zen-cell-changed 1s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+@keyframes zen-cell-changed {
+    from {
+        background-color: oklch(var(--primary) / 0.22);
+        box-shadow: 0 0 14px oklch(var(--glow) / calc(0.45 * var(--glow-k)));
+    }
+}
+
+/* A swiped row moves aside for the actions behind it, and settles when let go. */
+.zen__swipe-row {
+    translate: calc(-1 * var(--zen-row-swipe, 0px)) 0;
+    transition: translate 0.3s var(--ease-out-soft);
+}
+.zen__swipe-row:dir(rtl) {
+    translate: var(--zen-row-swipe, 0px) 0;
+}
+.zen__swipe-actions {
+    transition: width 0.3s var(--ease-out-soft);
+}
+.zen__swipe-row[data-swiping],
+.zen__swipe-row[data-swiping] > .zen__swipe-actions {
+    transition: none;
+}
+
+/* While an item is dragged, the others glide out of its way (not when the list is reordered after). */
+.zen__sortable[data-sorting] > .zen__sortable-item:not([data-dragging]) {
+    transition:
+        translate 0.2s var(--ease-out-soft),
+        box-shadow 0.2s,
+        scale 0.2s;
+}
+
 /* Time left before a toast goes away. */
 .zen__toast-timer {
     animation: zen-toast-timer linear forwards;
@@ -1243,6 +1394,25 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     animation: zen-pop 0.3s var(--ease-out-soft) backwards;
 }
 
+@keyframes zen-fade-in {
+    from {
+        opacity: 0;
+    }
+}
+@keyframes zen-chip-in {
+    from {
+        opacity: 0;
+        scale: 0.92;
+        translate: 0 3px;
+    }
+}
+.zen__filter-chip {
+    animation: zen-chip-in 0.28s var(--ease-out-soft) backwards;
+}
+.zen__filter-clear {
+    animation: zen-fade-in 0.2s ease-out backwards;
+}
+
 /* CodeInput's caret, in the box typing goes into. */
 .zen__code-caret {
     animation: zen-caret 1s steps(1) infinite;
@@ -1294,7 +1464,8 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
  * pixels, not along the path, breaking the line up. Its points only go rightwards,
  * so the reveal draws it just the same.
  */
-.zen__sparkline-draw {
+.zen__sparkline-draw,
+.zen__chart-sweep {
     animation: zen-sparkline-draw 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) both;
 }
 @keyframes zen-sparkline-draw {
@@ -1305,8 +1476,8 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
         clip-path: inset(0);
     }
 }
-[data-zen-unseen] :is(.zen__chart-draw, .zen__sparkline-draw, .zen__chart-grow, .zen__chart-fade),
-[data-zen-unseen]:is(.zen__chart-draw, .zen__sparkline-draw, .zen__chart-grow, .zen__chart-fade) {
+[data-zen-unseen] :is(.zen__chart-draw, .zen__sparkline-draw, .zen__chart-sweep, .zen__chart-grow, .zen__chart-fade),
+[data-zen-unseen]:is(.zen__chart-draw, .zen__sparkline-draw, .zen__chart-sweep, .zen__chart-grow, .zen__chart-fade) {
     animation-play-state: paused;
 }
 
@@ -1321,7 +1492,8 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     [class*='zen__'],
     [class*='zen__']::before,
     [class*='zen__']::backdrop,
-    .rise > * {
+    .rise > *,
+    .rise-list > * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
@@ -1332,7 +1504,8 @@ html.reduce-motion .zen-backdrop *::before,
 html.reduce-motion [class*='zen__'],
 html.reduce-motion [class*='zen__']::before,
 html.reduce-motion [class*='zen__']::backdrop,
-html.reduce-motion .rise > * {
+html.reduce-motion .rise > *,
+html.reduce-motion .rise-list > * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/toast/index.js

@@ -4,13 +4,13 @@ import { useGraphicsMode as t } from "../utils/graphics.js";
 import { AlertIcon as n, CheckIcon as r, InfoIcon as i } from "../utils/status-icons.js";
 import a from "../icons/micro/x-mark.js";
 import { createContext as o, useCallback as s, useContext as c, useEffect as l, useRef as u, useState as d } from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { createPortal as h } from "react-dom";
+import { createPortal as f } from "react-dom";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region packages/toast/index.tsx
 var g = 5e3, _ = 3, v = 300, y = 14, b = .05, x = 10, S = 60, C = .45, w = o(null), T = o(null);
 function E({ children: n, offset: r, viewportClassName: i }) {
 	t();
-	let [a, o] = d([]), c = u(0), f = u(/* @__PURE__ */ new Map()), S = u(/* @__PURE__ */ new Set()), [C, E] = d([]), [D, k] = d(!1);
+	let [a, o] = d([]), c = u(0), p = u(/* @__PURE__ */ new Map()), S = u(/* @__PURE__ */ new Set()), [C, E] = d([]), [D, k] = d(!1);
 	l(() => k(!0), []);
 	let A = s((e) => (E((t) => [...t, e]), () => E((t) => t.filter((t) => t !== e))), []), M = C.at(-1) ?? (D ? document.body : null), [N, P] = d({}), F = s((e, t) => P((n) => n[e] === t ? n : {
 		...n,
@@ -32,7 +32,7 @@ function E({ children: n, offset: r, viewportClassName: i }) {
 			o((t) => {
 				let n = t.filter((t) => t.id !== e);
 				return n.length || L(!1), n;
-			}), P(({ [e]: t, ...n }) => n), f.current.delete(e), S.current.delete(e);
+			}), P(({ [e]: t, ...n }) => n), p.current.delete(e), S.current.delete(e);
 		}, v);
 	}, []), U = s((e, { description: t, tone: n = "info", action: r, timeout: i } = {}) => {
 		let a = c.current++, s = {
@@ -55,12 +55,12 @@ function E({ children: n, offset: r, viewportClassName: i }) {
 			height: !G && n > 0 ? q : void 0
 		};
 	};
-	return /* @__PURE__ */ m(w.Provider, {
+	return /* @__PURE__ */ h(w.Provider, {
 		value: U,
-		children: [/* @__PURE__ */ p(T.Provider, {
+		children: [/* @__PURE__ */ m(T.Provider, {
 			value: A,
 			children: n
-		}), M && h(/* @__PURE__ */ p("section", {
+		}), M && f(/* @__PURE__ */ m("section", {
 			ref: V,
 			popover: "manual",
 			tabIndex: -1,
@@ -77,14 +77,14 @@ function E({ children: n, offset: r, viewportClassName: i }) {
 				height: Y,
 				...r && { "--zen-toast-offset": r }
 			},
-			children: a.map((e, t) => /* @__PURE__ */ p(j, {
+			children: a.map((e, t) => /* @__PURE__ */ m(j, {
 				toast: e,
 				layout: X(e),
 				z: t + 1,
 				paused: G,
 				onDismiss: H,
 				onHeight: F,
-				clocks: f.current,
+				clocks: p.current,
 				entered: S.current
 			}, e.id))
 		}), M)]
@@ -134,11 +134,11 @@ var A = {
 		glow: "shadow-[var(--toast-shadow)]"
 	}
 };
-function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, clocks: c, entered: h }) {
-	let g = A[t.tone] ?? A.info, _ = g.icon, v = u(null), y = u(null), [b] = d(() => !h.has(t.id));
+function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, clocks: c, entered: f }) {
+	let g = A[t.tone] ?? A.info, _ = g.icon, v = u(null), y = u(null), [b] = d(() => !f.has(t.id));
 	l(() => {
-		v.current?.isConnected && h.add(t.id);
-	}, [h, t.id]);
+		v.current?.isConnected && f.add(t.id);
+	}, [f, t.id]);
 	let [x, w] = d(!1);
 	l(() => {
 		if (!b) return;
@@ -186,7 +186,7 @@ function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, cl
 		let n = D.current;
 		n && (D.current = null, delete e.currentTarget.dataset.swiping, n.dx > S || n.dx > 0 && n.speed > C ? o(t.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
 	};
-	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
 		ref: v,
 		role: t.tone === "error" ? "alert" : "status",
 		"aria-live": "off",
@@ -203,27 +203,27 @@ function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, cl
 			height: n.height,
 			transform: `translateX(var(--zen-swipe, 0px)) translateY(${n.y}px) scale(${n.scale})`
 		},
-		children: [/* @__PURE__ */ m("div", {
+		children: [/* @__PURE__ */ h("div", {
 			ref: y,
 			className: "flex items-start gap-3 p-3.5 pr-10 transition-opacity duration-300 group-data-behind:opacity-0",
 			children: [
-				/* @__PURE__ */ p("span", {
+				/* @__PURE__ */ m("span", {
 					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", g.badge),
 					"aria-hidden": !0,
-					children: /* @__PURE__ */ p(_, { className: "size-4" })
+					children: /* @__PURE__ */ m(_, { className: "size-4" })
 				}),
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5",
 					children: [
-						/* @__PURE__ */ p("div", {
+						/* @__PURE__ */ m("div", {
 							className: "text-sm font-semibold",
 							children: t.title
 						}),
-						t.description && /* @__PURE__ */ p("div", {
+						t.description && /* @__PURE__ */ m("div", {
 							className: "text-muted-foreground text-sm leading-5",
 							children: t.description
 						}),
-						t.action && /* @__PURE__ */ p("button", {
+						t.action && /* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: () => {
 								t.action?.onClick(), o(t.id);
@@ -233,15 +233,15 @@ function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, cl
 						})
 					]
 				}),
-				/* @__PURE__ */ p("button", {
+				/* @__PURE__ */ m("button", {
 					type: "button",
 					"aria-label": "Dismiss",
 					onClick: () => o(t.id),
 					className: "text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 absolute top-2.5 right-2.5 grid size-7 cursor-pointer place-items-center rounded-lg outline-hidden transition-colors focus-visible:ring-2",
-					children: /* @__PURE__ */ p(a, { className: "size-3.5" })
+					children: /* @__PURE__ */ m(a, { className: "size-3.5" })
 				})
 			]
-		}), t.timeout > 0 && /* @__PURE__ */ p("span", {
+		}), t.timeout > 0 && /* @__PURE__ */ m("span", {
 			"aria-hidden": !0,
 			className: e("zen__toast-timer absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-60 transition-opacity group-data-behind:opacity-0", g.bar),
 			style: {
@@ -250,7 +250,7 @@ function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, cl
 				animationPlayState: i ? "paused" : void 0
 			}
 		})]
-	}), /* @__PURE__ */ p("span", {
+	}), /* @__PURE__ */ m("span", {
 		className: "sr-only",
 		"aria-live": t.tone === "error" ? "assertive" : "polite",
 		"aria-atomic": "true",