@rinzai/zen 0.6.0 → 0.7.0

package/dist/theme.css

@@ -205,14 +205,25 @@
 
 /*
  * Built from Tailwind's backdrop utilities, which emit the standard and -webkit-
- * properties correctly. Phones: a live blur over scrolling content is the main
- * cause of jank, so touch screens get a solid tint instead.
+ * properties correctly. Where there's no live blur, the surface is solid: a
+ * translucent one lets sharp text behind show through (the blur is what hides
+ * it). No blur on touch screens (a live blur over scrolling content is the main
+ * cause of jank), without a GPU (lite graphics) and with the OS's "reduce
+ * transparency". The fallbacks live here, in the utilities layer, where a
+ * surface's own `!` background (a Dialog's) is: an unlayered !important rule
+ * loses to a layered one.
  */
 @utility glass-blur {
     @apply backdrop-blur-[18px] backdrop-saturate-140;
-    /* !: glass's `background` shorthand would otherwise reset the colour. */
-    @apply pointer-coarse:bg-card/96! pointer-coarse:backdrop-filter-none;
-    @apply [@media(hover:none)]:bg-card/96! [@media(hover:none)]:backdrop-filter-none;
+    /*
+     * !: glass's `background` shorthand would otherwise reset the colour. [:root_&]
+     * adds specificity, so each fallback beats a surface's own `!` background (a
+     * Dialog's bg-card/90!) whatever order the rules come in.
+     */
+    @apply pointer-coarse:[:root_&]:bg-card! pointer-coarse:backdrop-filter-none;
+    @apply [@media(hover:none)]:[:root_&]:bg-card! [@media(hover:none)]:backdrop-filter-none;
+    @apply [@media(prefers-reduced-transparency:reduce)]:[:root_&]:bg-card! [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none;
+    @apply [html[data-zen-graphics='lite']_&]:bg-card! [html[data-zen-graphics='lite']_&]:backdrop-filter-none;
 }
 
 @utility text-glow {
@@ -225,6 +236,13 @@
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
+    /*
+     * The gradient only paints within the box, and at a tight line height
+     * descenders (g, y) and accents hang outside it and would be cut off. The
+     * box reaches past them; the margins take that back, so layout is unchanged.
+     */
+    padding-block: 0.2em;
+    margin-block: -0.2em;
     /* Light theme: start from the ink colour, since near-white would vanish. */
     &:where(.light *, [data-theme='light'] *) {
         background-image: linear-gradient(100deg, oklch(var(--foreground)), oklch(var(--primary)) 85%);
@@ -250,15 +268,10 @@
 /*
  * Without hardware acceleration (html[data-zen-graphics='lite'], set by
  * utils/graphics.ts) every blur, full-screen mask and animation is drawn on the
- * CPU each frame. Keep the look, drop the cost: solid tints instead of live
- * blur (as on phones), a still backdrop, no pointer light. The OS "reduce
- * transparency" setting gets the same tints.
+ * CPU each frame. Keep the look, drop the cost: solid surfaces instead of live
+ * blur (as on phones; see glass-blur), a still backdrop, no pointer light. The
+ * OS "reduce transparency" setting gets the same.
  */
-html[data-zen-graphics='lite'] .glass-blur {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-    background: oklch(var(--card) / 0.96) !important;
-}
 html[data-zen-graphics='lite'] .zen__header {
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
@@ -276,11 +289,6 @@ html[data-zen-graphics='lite'] :is(.zen-topo--lit, .zen-dots--lit) {
     display: none;
 }
 @media (prefers-reduced-transparency: reduce) {
-    .glass-blur {
-        -webkit-backdrop-filter: none !important;
-        backdrop-filter: none !important;
-        background: oklch(var(--card) / 0.96) !important;
-    }
     .zen__header {
         -webkit-backdrop-filter: none;
         backdrop-filter: none;
@@ -438,6 +446,47 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
         zen-aurora-c 52s steps(26) infinite alternate;
 }
 
+/*
+ * A track's sliding indicator is placed by measuring, which can't happen until
+ * the page's script runs. Until then (server HTML, before hydration) the active
+ * item wears the indicator's look itself, in the same place, so it shows at
+ * once: the pill of Pills (and TabList variant="pills"), the bar of underline tabs.
+ */
+:has(> .zen__pill-indicator[data-pending]) :is([aria-current='page'], [aria-selected='true']) {
+    background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+    box-shadow:
+        inset 0 0 0 1px oklch(var(--glow) / 0.35),
+        0 0 24px -4px oklch(var(--glow) / 0.6);
+}
+:has(> .zen__tab-bar[data-pending]) > [role='tab'][aria-selected='true'] {
+    /* The bar straddles the track's bottom border: 1px above its edge, 1px below. */
+    box-shadow:
+        inset 0 -1px 0 var(--color-primary),
+        0 1px 0 var(--color-primary);
+}
+
+/* The page's <main>, focused by Header's skip link: no ring round the whole page. */
+main[data-zen-skip-target]:focus {
+    outline: none;
+}
+
+/*
+ * themeWave() (utils/theme-wave.ts): the new theme spreads over the old one,
+ * which holds still, through a clip on the new page (or, into a dark theme,
+ * the old one closes in over the new). The water is a canvas
+ * drawn over both, in a layer of its own that shows as it is (no fade).
+ */
+html.zen-theme-waving::view-transition-old(root),
+html.zen-theme-waving::view-transition-new(root),
+html.zen-theme-waving::view-transition-new(zen-theme-water) {
+    animation: none;
+    mix-blend-mode: normal;
+}
+/* Into a dark theme, the old one closes in over the new. */
+html.zen-theme-closing::view-transition-old(root) {
+    z-index: 1;
+}
+
 /*
  * Contour lines (image from <Backdrop topoSrc>), faint everywhere… The image
  * is used as a mask over the tint, so its strokes are white on dark and ink
@@ -774,7 +823,17 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
     }
 }
 
-/* Popovers scale and fade in from their top-layer entry, and back out. */
+/*
+ * Popovers scale and fade in from their top-layer entry, and back out. They
+ * stay on a GPU layer of their own after too: while animating they're drawn as
+ * one, and a popup at a fractional position (under a trigger that is) would
+ * otherwise be repainted when the animation ends, its icons snapping a pixel
+ * away from the text.
+ */
+.zen__popover,
+.zen__dialog {
+    will-change: scale;
+}
 .zen__popover {
     transition:
         opacity 150ms,
@@ -818,6 +877,9 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
         overlay 320ms allow-discrete,
         display 320ms allow-discrete;
 }
+.zen__dialog[data-side] {
+    will-change: translate;
+}
 .zen__dialog[data-side]:not([open]) {
     scale: none;
 }

package/dist/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,+BA4IhG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,QAO/E;AAYD,+EAA+E;AAC/E,wBAAgB,QAAQ,YA7LoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAiMpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,+BA8JhG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,QAO/E;AAYD,+EAA+E;AAC/E,wBAAgB,QAAQ,YA/MoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAmNpF"}

package/dist/toast/index.js

@@ -2,86 +2,97 @@
 import { cx as e } from "../utils/cx.js";
 import { useGraphicsMode as t } from "../utils/graphics.js";
 import { AlertIcon as n, CheckIcon as r, InfoIcon as i } from "../utils/status-icons.js";
-import { createContext as a, useCallback as o, useContext as s, useEffect as c, useRef as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { createPortal as p } from "react-dom";
+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";
 //#region packages/toast/index.tsx
-var m = 5e3, h = 3, g = 300, _ = 14, v = .05, y = 10, b = 60, x = .45, S = a(null), C = a(null);
-function w({ children: n, offset: r, viewportClassName: i }) {
+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, s] = u([]), b = l(0), x = l(/* @__PURE__ */ new Map()), w = l(/* @__PURE__ */ new Set()), [T, D] = u([]), [O, A] = u(!1);
-	c(() => A(!0), []);
-	let j = o((e) => (D((t) => [...t, e]), () => D((t) => t.filter((t) => t !== e))), []), M = T.at(-1) ?? (O ? document.body : null), [N, P] = u({}), F = o((e, t) => P((n) => n[e] === t ? n : {
+	let [a, o] = d([]), c = u(0), f = 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,
 		[e]: t
-	}), []), [I, L] = u(!1), [R, z] = u(!1), B = o((e, t = "fade") => {
-		s((n) => n.map((n) => n.id === e ? {
+	}), []), [I, L] = d(!1), [R, z] = d(!1), B = u(null), V = s((e) => {
+		B.current = e, O(e);
+	}, []);
+	l(() => {
+		let e = (e) => {
+			e.key === "F8" && B.current?.querySelector(".zen__toast:not([inert])") && (e.preventDefault(), B.current.focus());
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, []);
+	let H = s((e, t = "fade") => {
+		o((n) => n.map((n) => n.id === e ? {
 			...n,
 			leaving: t
 		} : n)), setTimeout(() => {
-			s((t) => {
+			o((t) => {
 				let n = t.filter((t) => t.id !== e);
 				return n.length || L(!1), n;
-			}), P(({ [e]: t, ...n }) => n), x.current.delete(e), w.current.delete(e);
-		}, g);
-	}, []), V = o((e, { description: t, tone: n = "info", action: r, timeout: i } = {}) => {
-		let a = b.current++, o = {
+			}), P(({ [e]: t, ...n }) => n), f.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 = {
 			id: a,
 			title: e,
 			description: t,
 			tone: n,
 			action: r,
-			timeout: i ?? (r ? 1e4 : m)
+			timeout: i ?? (r ? 1e4 : g)
 		};
-		return s((e) => [...e, o]), a;
-	}, []), H = a.filter((e) => !e.leaving), U = (I || R) && H.length > 0, W = H.at(-1), G = W ? N[W.id] : void 0, K = H.slice(-3), q = U ? K.reduce((e, t) => e + (N[t.id] ?? 0), 0) + y * (K.length - 1) : (G ?? 0) + _ * (K.length - 1), J = (e) => {
-		let t = H.filter((t) => t.id > e.id), n = t.length;
+		return o((e) => [...e, s]), a;
+	}, []), W = a.filter((e) => !e.leaving), G = (I || R) && W.length > 0, K = W.at(-1), q = K ? N[K.id] : void 0, J = W.slice(-3), Y = G ? J.reduce((e, t) => e + (N[t.id] ?? 0), 0) + x * (J.length - 1) : (q ?? 0) + y * (J.length - 1), X = (e) => {
+		let t = W.filter((t) => t.id > e.id), n = t.length;
 		return {
 			index: n,
 			front: n === 0,
-			hidden: n >= h,
-			y: U ? -(t.reduce((e, t) => e + (N[t.id] ?? 0), 0) + y * n) : -14 * Math.min(n, 2),
-			scale: U ? 1 : 1 - v * Math.min(n, 2),
-			height: !U && n > 0 ? G : void 0
+			hidden: n >= _,
+			y: G ? -(t.reduce((e, t) => e + (N[t.id] ?? 0), 0) + x * n) : -14 * Math.min(n, 2),
+			scale: G ? 1 : 1 - b * Math.min(n, 2),
+			height: !G && n > 0 ? q : void 0
 		};
 	};
-	return /* @__PURE__ */ f(S.Provider, {
-		value: V,
-		children: [/* @__PURE__ */ d(C.Provider, {
-			value: j,
+	return /* @__PURE__ */ m(w.Provider, {
+		value: U,
+		children: [/* @__PURE__ */ p(T.Provider, {
+			value: A,
 			children: n
-		}), M && p(/* @__PURE__ */ d("section", {
-			ref: E,
+		}), M && h(/* @__PURE__ */ p("section", {
+			ref: V,
 			popover: "manual",
-			"aria-label": "Notifications",
-			"data-expanded": U || void 0,
+			tabIndex: -1,
+			"aria-label": "Notifications (F8)",
+			"data-expanded": G || void 0,
 			onMouseEnter: () => L(!0),
 			onMouseLeave: () => L(!1),
 			onFocus: () => z(!0),
 			onBlur: (e) => {
 				e.currentTarget.contains(e.relatedTarget) || z(!1);
 			},
-			className: e("zen__toast-viewport fixed top-auto right-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] left-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit md:bottom-5 md:w-[24rem]", "transition-[height] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]", i),
+			className: e("zen__toast-viewport fixed top-auto right-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] left-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit outline-hidden md:bottom-5 md:w-[24rem]", "transition-[height] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]", i),
 			style: {
-				height: q,
+				height: Y,
 				...r && { "--zen-toast-offset": r }
 			},
-			children: a.map((e, t) => /* @__PURE__ */ d(k, {
+			children: a.map((e, t) => /* @__PURE__ */ p(j, {
 				toast: e,
-				layout: J(e),
+				layout: X(e),
 				z: t + 1,
-				paused: U,
-				onDismiss: B,
+				paused: G,
+				onDismiss: H,
 				onHeight: F,
-				clocks: x.current,
-				entered: w.current
+				clocks: f.current,
+				entered: S.current
 			}, e.id))
 		}), M)]
 	});
 }
-function T(e, t) {
-	let n = s(C);
-	c(() => {
+function D(e, t) {
+	let n = c(T);
+	l(() => {
 		let r = e.current;
 		if (n && t && r) return n(r);
 	}, [
@@ -90,17 +101,17 @@ function T(e, t) {
 		e
 	]);
 }
-function E(e) {
+function O(e) {
 	if (e?.showPopover) try {
 		e.showPopover();
 	} catch {}
 }
-function D() {
-	let e = s(S);
+function k() {
+	let e = c(w);
 	if (!e) throw Error("useToast() needs a <ToastProvider> above it");
 	return e;
 }
-var O = {
+var A = {
 	success: {
 		icon: r,
 		ring: "border-primary/30",
@@ -123,126 +134,128 @@ var O = {
 		glow: "shadow-[var(--toast-shadow)]"
 	}
 };
-function k({ toast: t, layout: n, z: r, paused: i, onDismiss: a, onHeight: o, clocks: s, entered: p }) {
-	let m = O[t.tone] ?? O.info, h = m.icon, g = l(null), _ = l(null), [v] = u(() => !p.has(t.id));
-	c(() => {
-		g.current?.isConnected && p.add(t.id);
-	}, [p, t.id]), s.has(t.id) || s.set(t.id, {
+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));
+	l(() => {
+		v.current?.isConnected && h.add(t.id);
+	}, [h, t.id]);
+	let [x, w] = d(!1);
+	l(() => {
+		if (!b) return;
+		let e = requestAnimationFrame(() => e = requestAnimationFrame(() => w(!0)));
+		return () => cancelAnimationFrame(e);
+	}, [b]), c.has(t.id) || c.set(t.id, {
 		spent: 0,
 		since: null
 	});
-	let y = s.get(t.id), [S] = u(() => y.spent + (y.since === null ? 0 : Date.now() - y.since));
-	c(() => {
-		let e = _.current;
+	let T = c.get(t.id), [E] = d(() => T.spent + (T.since === null ? 0 : Date.now() - T.since));
+	l(() => {
+		let e = y.current;
 		if (!e) return;
-		let n = () => o(t.id, e.offsetHeight);
+		let n = () => s(t.id, e.offsetHeight);
 		n();
 		let r = new ResizeObserver(n);
 		return r.observe(e), () => r.disconnect();
-	}, [o, t.id]), c(() => {
+	}, [s, t.id]), l(() => {
 		if (!t.timeout || i || t.leaving) return;
-		y.since = Date.now();
-		let e = setTimeout(() => a(t.id), Math.max(0, t.timeout - y.spent));
+		T.since = Date.now();
+		let e = setTimeout(() => o(t.id), Math.max(0, t.timeout - T.spent));
 		return () => {
-			clearTimeout(e), y.since !== null && (y.spent += Date.now() - y.since), y.since = null;
+			clearTimeout(e), T.since !== null && (T.spent += Date.now() - T.since), T.since = null;
 		};
 	}, [
 		i,
 		t.id,
 		t.timeout,
 		t.leaving,
-		a,
-		y
+		o,
+		T
 	]);
-	let C = l(null), w = (e) => {
-		t.leaving || e.button !== 0 || e.target.closest("button") || (C.current = {
+	let D = u(null), O = (e) => {
+		t.leaving || e.button !== 0 || e.target.closest("button") || (D.current = {
 			x: e.clientX,
 			dx: 0,
 			t: e.timeStamp,
 			speed: 0
 		}, e.currentTarget.setPointerCapture(e.pointerId), e.currentTarget.dataset.swiping = "");
-	}, T = (e) => {
-		if (!C.current) return;
-		let t = C.current, n = e.clientX - t.x;
+	}, k = (e) => {
+		if (!D.current) return;
+		let t = D.current, n = e.clientX - t.x;
 		t.speed = (n - t.dx) / Math.max(1, e.timeStamp - t.t), t.dx = n, t.t = e.timeStamp, e.currentTarget.style.setProperty("--zen-swipe", `${n > 0 ? n : n / 6}px`);
-	}, E = (e) => {
-		let n = C.current;
-		n && (C.current = null, delete e.currentTarget.dataset.swiping, n.dx > b || n.dx > 0 && n.speed > x ? a(t.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
+	}, j = (e) => {
+		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__ */ f("div", {
-		ref: g,
+	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("div", {
+		ref: v,
 		role: t.tone === "error" ? "alert" : "status",
-		"aria-atomic": "true",
+		"aria-live": "off",
 		"data-front": n.front || void 0,
 		"data-behind": !n.front && n.height !== void 0 || void 0,
 		inert: n.hidden || !!t.leaving,
-		onPointerDown: w,
-		onPointerMove: T,
-		onPointerUp: E,
-		onPointerCancel: E,
-		className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "transition-[transform,translate,opacity,height] duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)] data-swiping:transition-none", v && "starting:translate-y-full starting:opacity-0", n.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", m.ring, m.glow),
+		onPointerDown: O,
+		onPointerMove: k,
+		onPointerUp: j,
+		onPointerCancel: j,
+		className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "transition-[transform,translate,opacity,height] duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)] data-swiping:transition-none", b && "starting:translate-y-full starting:opacity-0", n.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", g.ring, g.glow),
 		style: {
 			zIndex: r,
 			height: n.height,
 			transform: `translateX(var(--zen-swipe, 0px)) translateY(${n.y}px) scale(${n.scale})`
 		},
-		children: [/* @__PURE__ */ f("div", {
-			ref: _,
+		children: [/* @__PURE__ */ m("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__ */ d("span", {
-					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", m.badge),
+				/* @__PURE__ */ p("span", {
+					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", g.badge),
 					"aria-hidden": !0,
-					children: /* @__PURE__ */ d(h, { className: "size-4" })
+					children: /* @__PURE__ */ p(_, { className: "size-4" })
 				}),
-				/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ m("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5",
 					children: [
-						/* @__PURE__ */ d("div", {
+						/* @__PURE__ */ p("div", {
 							className: "text-sm font-semibold",
 							children: t.title
 						}),
-						t.description && /* @__PURE__ */ d("div", {
+						t.description && /* @__PURE__ */ p("div", {
 							className: "text-muted-foreground text-sm leading-5",
 							children: t.description
 						}),
-						t.action && /* @__PURE__ */ d("button", {
+						t.action && /* @__PURE__ */ p("button", {
 							type: "button",
 							onClick: () => {
-								t.action?.onClick(), a(t.id);
+								t.action?.onClick(), o(t.id);
 							},
-							className: "border-tint/10 bg-tint/[0.06] hover:bg-tint/[0.12] focus-visible:ring-ring/50 mt-2 self-start rounded-lg border px-3 py-1 text-xs font-medium outline-hidden transition-colors focus-visible:ring-2",
+							className: "border-tint/10 bg-tint/[0.06] hover:bg-tint/[0.12] focus-visible:ring-ring/50 mt-2 cursor-pointer self-start rounded-lg border px-3 py-1 text-xs font-medium outline-hidden transition-colors focus-visible:ring-2",
 							children: t.action.label
 						})
 					]
 				}),
-				/* @__PURE__ */ d("button", {
+				/* @__PURE__ */ p("button", {
 					type: "button",
 					"aria-label": "Dismiss",
-					onClick: () => a(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 place-items-center rounded-lg outline-hidden transition-colors focus-visible:ring-2",
-					children: /* @__PURE__ */ d("svg", {
-						viewBox: "0 0 16 16",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "1.8",
-						strokeLinecap: "round",
-						className: "size-3.5",
-						"aria-hidden": !0,
-						children: /* @__PURE__ */ d("path", { d: "m4 4 8 8M12 4l-8 8" })
-					})
+					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" })
 				})
 			]
-		}), t.timeout > 0 && /* @__PURE__ */ d("span", {
+		}), t.timeout > 0 && /* @__PURE__ */ p("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", m.bar),
+			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: {
 				animationDuration: `${t.timeout}ms`,
-				animationDelay: `${-S}ms`,
+				animationDelay: `${-E}ms`,
 				animationPlayState: i ? "paused" : void 0
 			}
 		})]
-	});
+	}), /* @__PURE__ */ p("span", {
+		className: "sr-only",
+		"aria-live": t.tone === "error" ? "assertive" : "polite",
+		"aria-atomic": "true",
+		children: x && [t.title, t.description].filter(Boolean).join(". ")
+	})] });
 }
 //#endregion
-export { w as default, D as useToast, T as useToastHost };
+export { E as default, k as useToast, D as useToastHost };

package/dist/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tooltip/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACH,cAAc,EAGd,SAAS,EAQZ,MAAM,OAAO,CAAC;AAmBf;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BA8BrE;AAED,2GAA2G;AAC3G,wBAAgB,cAAc,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,cAAc,EACd,cAAc,EACd,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAkCrB;AAED,kGAAkG;AAClG,wBAAgB,cAAc,CAAC,EAC3B,KAAgB,EAChB,MAAU,EACV,SAAS,EACT,KAAK,EACL,cAAc,EACd,cAAc,EACd,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BA4BrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACjE,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC9D,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tooltip/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACH,cAAc,EAEd,SAAS,EAQZ,MAAM,OAAO,CAAC;AAmBf;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BA+BrE;AAED,2GAA2G;AAC3G,wBAAgB,cAAc,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,cAAc,EACd,cAAc,EACd,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAmCrB;AAED,kGAAkG;AAClG,wBAAgB,cAAc,CAAC,EAC3B,KAAgB,EAChB,MAAU,EACV,SAAS,EACT,KAAK,EACL,cAAc,EACd,cAAc,EACd,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAwBrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACjE,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC9D,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}