@rinzai/zen 0.14.0 → 0.16.0

package/dist/table/selection.js

@@ -1,6 +1,6 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMessages as t } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import n from "../icons/micro/x-mark.js";
 import r from "../checkbox/index.js";
 import { useRef as i, useState as a } from "react";
@@ -29,13 +29,13 @@ function c(e) {
 		})
 	};
 }
-function l({ checked: t, onSelect: n, label: i, className: a, ...s }) {
+function l({ checked: e, onSelect: n, label: i, className: a, ...s }) {
 	return /* @__PURE__ */ o("td", {
-		className: e("border-tint/[0.045] w-10 border-b py-2.5 ps-3 pe-0", a),
+		className: t("border-tint/[0.045] w-10 border-b py-2.5 ps-3 pe-0", a),
 		...s,
 		children: /* @__PURE__ */ o(r, {
 			"aria-label": i,
-			checked: t,
+			checked: e,
 			onClick: (e) => n(e.currentTarget.checked, e.shiftKey),
 			onCheckedChange: () => {},
 			className: "touch-target grid"
@@ -43,9 +43,9 @@ function l({ checked: t, onSelect: n, label: i, className: a, ...s }) {
 	});
 }
 function u({ checked: n, indeterminate: i, onSelect: a, label: s, className: c, ...l }) {
-	let u = t(), d = s ?? u.selectAll;
+	let u = e(), d = s ?? u.selectAll;
 	return /* @__PURE__ */ o("th", {
-		className: e("w-10 py-2.5 ps-3 pe-0", c),
+		className: t("w-10 py-2.5 ps-3 pe-0", c),
 		...l,
 		children: /* @__PURE__ */ o(r, {
 			"aria-label": d,
@@ -57,11 +57,11 @@ function u({ checked: n, indeterminate: i, onSelect: a, label: s, className: c,
 	});
 }
 function d({ count: r, onClear: i, label: a, clearLabel: c, className: l, children: u }) {
-	let d = t(), f = a ?? d.selectedCount, p = c ?? d.clearSelection;
+	let d = e(), f = a ?? d.selectedCount, p = c ?? d.clearSelection;
 	return r === 0 ? null : /* @__PURE__ */ s("div", {
 		role: "toolbar",
 		"aria-label": d.selection,
-		className: e("zen__selection-bar glass glass-blur glow-edge fixed inset-x-0 bottom-6 z-40 mx-auto flex w-fit max-w-[calc(100vw-2rem)] items-center gap-2 rounded-2xl py-2 ps-4 pe-2 shadow-[0_12px_40px_-12px_oklch(0_0_0/0.6)]", l),
+		className: t("zen__selection-bar glass glass-blur glow-edge fixed inset-x-0 bottom-6 z-40 mx-auto flex w-fit max-w-[calc(100vw-2rem)] items-center gap-2 rounded-2xl py-2 ps-4 pe-2 shadow-[0_12px_40px_-12px_oklch(0_0_0/0.6)]", l),
 		children: [
 			/* @__PURE__ */ o("span", {
 				className: "text-sm font-medium whitespace-nowrap tabular-nums",

package/dist/table-of-contents/index.js

@@ -1,12 +1,12 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMessages as t } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import { followSectionLink as n } from "../utils/section-link.js";
 import { useEffect as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region packages/table-of-contents/index.tsx
 function s({ items: s, title: c, className: l, ...u }) {
-	let d = t(), f = c ?? d.onThisPage, [p, m] = i();
+	let d = e(), f = c ?? d.onThisPage, [p, m] = i();
 	return r(() => {
 		if (typeof IntersectionObserver > "u") return;
 		let e = s.map((e) => document.getElementById(e.id)).filter((e) => !!e), t = /* @__PURE__ */ new Set(), n = new IntersectionObserver((e) => {
@@ -18,22 +18,22 @@ function s({ items: s, title: c, className: l, ...u }) {
 	}, [s]), s.length ? /* @__PURE__ */ o("nav", {
 		"aria-label": f || d.onThisPage,
 		...u,
-		className: e("zen__toc flex flex-col gap-3", l),
+		className: t("zen__toc flex flex-col gap-3", l),
 		children: [f && /* @__PURE__ */ a("p", {
 			className: "text-muted-foreground text-2xs mt-0! tracking-widest uppercase",
 			children: f
 		}), /* @__PURE__ */ a("ul", {
 			className: "border-tint/[0.07] flex flex-col gap-2 border-l text-sm",
-			children: s.map((t) => /* @__PURE__ */ a("li", {
-				className: e("-ms-px", t.depth === 2 && "ps-3"),
+			children: s.map((e) => /* @__PURE__ */ a("li", {
+				className: t("-ms-px", e.depth === 2 && "ps-3"),
 				children: /* @__PURE__ */ a("a", {
-					href: `#${t.id}`,
+					href: `#${e.id}`,
 					onClick: n,
-					"aria-current": t.id === p ? "location" : void 0,
-					className: e("text-muted-foreground hover:text-foreground block border-s border-transparent ps-3 transition-colors pointer-coarse:py-1.5", "aria-[current=location]:border-primary aria-[current=location]:text-foreground"),
-					children: t.label
+					"aria-current": e.id === p ? "location" : void 0,
+					className: t("text-muted-foreground hover:text-foreground block border-s border-transparent ps-3 transition-colors pointer-coarse:py-1.5", "aria-[current=location]:border-primary aria-[current=location]:text-foreground"),
+					children: e.label
 				})
-			}, t.id))
+			}, e.id))
 		})]
 	}) : null;
 }

package/dist/tag-input/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useControllable as t } from "../utils/useControllable.js";
-import { useMessages as n } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { useControllable as n } from "../utils/useControllable.js";
 import { useFieldProps as r } from "../field/index.js";
 import { FIELD as i } from "../utils/styles.js";
 import { FormValue as a } from "../utils/form-value.js";
@@ -10,7 +10,7 @@ import { useLayoutEffect as s, useRef as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region packages/tag-input/index.tsx
 function f({ value: f, defaultValue: p = [], onValueChange: m, validate: h, removeLabel: g, className: _, disabled: v, name: y, ...b }) {
-	let x = n(), S = g ?? x.remove, [C, w, T] = t(f, p, m), [E, D] = l(""), O = r(b), k = c(null), A = C.length;
+	let x = e(), S = g ?? x.remove, [C, w, T] = n(f, p, m), [E, D] = l(""), O = r(b), k = c(null), A = C.length;
 	s(() => {
 		let e = k.current;
 		e?.parentElement?.contains(document.activeElement) && (e.scrollTop = e.scrollHeight);
@@ -21,7 +21,7 @@ function f({ value: f, defaultValue: p = [], onValueChange: m, validate: h, remo
 		t.length !== C.length && w(t);
 	};
 	return /* @__PURE__ */ d("div", {
-		className: e("zen__tag-input", i, "flex h-auto max-h-36 min-h-10 w-full cursor-text flex-col gap-1.5 py-1.5", "has-[input:focus-visible]:border-glow/60 has-[input:focus-visible]:bg-tint/[0.05] has-[input:focus-visible]:shadow-glow-focus has-[input:focus-visible]:[--glow-border-color:transparent]", v && "cursor-not-allowed opacity-50", _),
+		className: t("zen__tag-input", i, "flex h-auto max-h-36 min-h-10 w-full cursor-text flex-col gap-1.5 py-1.5", "has-[input:focus-visible]:border-glow/60 has-[input:focus-visible]:bg-tint/[0.05] has-[input:focus-visible]:shadow-glow-focus has-[input:focus-visible]:[--glow-border-color:transparent]", v && "cursor-not-allowed opacity-50", _),
 		onClick: (e) => e.currentTarget.querySelector("input")?.focus(),
 		children: [
 			A > 0 && /* @__PURE__ */ u("div", {

package/dist/textarea/index.d.ts

@@ -1,4 +1,8 @@
 import { ComponentProps } from 'react';
-export default function Textarea(props: TextAreaProps): import('react').JSX.Element;
-export type TextAreaProps = ComponentProps<'textarea'>;
+export default function Textarea(props: TextareaProps): import('react').JSX.Element;
+export type TextareaProps = ComponentProps<'textarea'>;
+/** @deprecated Renamed Textarea, like the element. */
+export declare const TextArea: typeof Textarea;
+/** @deprecated Renamed TextareaProps. */
+export type TextAreaProps = TextareaProps;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/textarea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAiBpD;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/textarea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAiBpD;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAEvD,sDAAsD;AACtD,eAAO,MAAM,QAAQ,iBAAW,CAAC;AACjC,yCAAyC;AACzC,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC"}

package/dist/textarea/index.js

@@ -12,5 +12,6 @@ function i(i) {
 		...s
 	});
 }
+var a = i;
 //#endregion
-export { i as default };
+export { a as TextArea, i as default };

package/dist/theme-toggle/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMessages as t } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import n from "../icons/micro/moon.js";
 import r from "../icons/micro/sun.js";
 import { prepareThemeWave as i, themeWave as a } from "../utils/theme-wave.js";
@@ -25,7 +25,7 @@ function f(e) {
 }
 var p = () => document.documentElement.classList.contains("light") ? "light" : "dark";
 function m({ value: l, onValueChange: u, target: m, storageKey: h = "theme", className: g, ..._ }) {
-	let v = o(f, p, () => "dark"), y = l ?? v, b = y === "dark" ? "light" : "dark", x = t();
+	let v = o(f, p, () => "dark"), y = l ?? v, b = y === "dark" ? "light" : "dark", x = e();
 	return /* @__PURE__ */ s("button", {
 		type: "button",
 		"aria-label": b === "dark" ? x.switchToDark : x.switchToLight,
@@ -44,7 +44,7 @@ function m({ value: l, onValueChange: u, target: m, storageKey: h = "theme", cla
 				u?.(b), d.forEach((e) => e());
 			});
 		}, e.currentTarget, m?.current),
-		className: e("zen__theme-toggle text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground grid size-10 cursor-pointer place-items-center rounded-lg outline-hidden focus-ring", g),
+		className: t("zen__theme-toggle text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground grid size-10 cursor-pointer place-items-center rounded-lg outline-hidden focus-ring", g),
 		children: s(y === "dark" ? n : r, { className: "size-4" })
 	});
 }

package/dist/theme.css

@@ -1156,6 +1156,109 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
         translate: -100% 0;
     }
 }
+/*
+ * A menu as a bottom sheet on phones (MenuContent's `sheet`): across the
+ * bottom of the screen over a scrim, sliding up and following a finger
+ * swiping it back down. A submenu slides in over it from the side, and the
+ * menu moves aside; it slides back out the same way, or goes down with the
+ * menu. Anchoring is set inline, hence !important. --zen-sheet tells the
+ * scripts it's a sheet now (no opening submenus on hover).
+ */
+@media (width < theme(--breakpoint-md)) {
+    .zen__popover[data-zen-sheet] {
+        --zen-sheet: 1;
+        position: fixed;
+        position-area: none !important;
+        position-try-fallbacks: none !important;
+        position-visibility: always;
+        /* Edge to edge, over a scrollbar's gutter too. */
+        inset: auto auto 0 0 !important;
+        justify-self: auto !important;
+        width: 100vw !important;
+        min-width: 0 !important;
+        max-height: 85dvh;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        margin: 0 !important;
+        padding: 0.5rem 0.5rem calc(0.75rem + env(safe-area-inset-bottom));
+        border-width: 1px 0 0;
+        border-radius: 1rem 1rem 0 0;
+        background-color: oklch(var(--card) / 0.9);
+        pointer-events: auto;
+        translate: var(--zen-swipe, 0 0);
+        will-change: translate;
+        transition:
+            translate 320ms var(--ease-out-soft),
+            opacity 200ms,
+            overlay 320ms allow-discrete,
+            display 320ms allow-discrete;
+    }
+    .zen__popover[data-zen-sheet]:not(:popover-open) {
+        translate: 0 100%;
+    }
+    .zen__popover:popover-open .zen__popover[data-zen-sheet][data-zen-beside]:not(:popover-open) {
+        translate: 100% 0;
+    }
+    .zen__popover:popover-open .zen__popover[data-zen-sheet][data-zen-beside]:not(:popover-open):dir(rtl) {
+        translate: -100% 0;
+    }
+    /* Under an open submenu (in the top layer, so it's not moved with it). */
+    .zen__popover[data-zen-sheet]:popover-open:has(.zen__popover[data-zen-sheet]:popover-open) {
+        translate: -30% 0;
+        opacity: 0;
+        pointer-events: none;
+    }
+    .zen__popover[data-zen-sheet]:popover-open:has(.zen__popover[data-zen-sheet]:popover-open):dir(rtl) {
+        translate: 30% 0;
+    }
+    .zen__popover[data-zen-sheet] [role^='menuitem'] {
+        min-height: 3rem;
+    }
+    .zen__popover[data-zen-sheet] .zen__sheet-only {
+        display: revert-layer;
+    }
+    .zen__popover[data-zen-sheet]::backdrop {
+        background: var(--backdrop-scrim, oklch(0 0 0 / 0.5));
+        opacity: calc(1 - var(--zen-swipe-progress, 0));
+        transition:
+            opacity 200ms,
+            overlay 320ms allow-discrete,
+            display 320ms allow-discrete;
+    }
+    .zen__popover[data-zen-sheet]:not(:popover-open)::backdrop {
+        opacity: 0;
+    }
+    /* The menu's scrim is behind a submenu already. */
+    .zen__popover[data-zen-sheet][data-zen-beside]::backdrop {
+        background: none;
+    }
+    .zen__popover[data-zen-sheet][data-swiping],
+    .zen__popover[data-zen-sheet][data-swiping]::backdrop {
+        transition: none;
+        user-select: none;
+    }
+    :root:has(.zen__popover[data-zen-sheet]:popover-open) {
+        overflow: hidden;
+    }
+    @starting-style {
+        .zen__popover[data-zen-sheet]:popover-open {
+            translate: 0 100%;
+        }
+        .zen__popover[data-zen-sheet][data-zen-beside]:popover-open {
+            translate: 100% 0;
+        }
+        .zen__popover[data-zen-sheet][data-zen-beside]:popover-open:dir(rtl) {
+            translate: -100% 0;
+        }
+        .zen__popover[data-zen-sheet]:popover-open::backdrop {
+            opacity: 0;
+        }
+    }
+}
+/* What only a sheet shows: its grip, a submenu's way back. */
+.zen__sheet-only {
+    display: none;
+}
 /*
  * The page behind a modal dialog doesn't scroll. Hiding the overflow removes
  * the scrollbar, so where the page had one (Dialog sets data-zen-scrollbar),
@@ -1592,3 +1695,43 @@ html.reduce-motion .rise-list > * {
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
 }
+
+/*
+ * Marquee: an ellipsis at rest. While it scrolls (data-moving, set with its
+ * animation) the text is one box to slide, cut off by fades at both edges; the
+ * start's fade grows in as the text leaves it.
+ */
+@property --zen-marquee-fade-start {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+.zen__marquee {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.zen__marquee[data-moving] {
+    text-overflow: clip;
+    mask-image: linear-gradient(
+        to right,
+        transparent,
+        #000 var(--zen-marquee-fade-start),
+        #000 calc(100% - 1rem),
+        transparent
+    );
+}
+.zen__marquee[data-moving]:dir(rtl) {
+    mask-image: linear-gradient(
+        to left,
+        transparent,
+        #000 var(--zen-marquee-fade-start),
+        #000 calc(100% - 1rem),
+        transparent
+    );
+}
+.zen__marquee[data-moving] > .zen__marquee-content {
+    display: inline-block;
+}

package/dist/time-field/index.js

@@ -1,8 +1,8 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { readingKey as t } from "../utils/direction.js";
-import { useControllable as n } from "../utils/useControllable.js";
-import { useLocale as r, useMessages as i } from "../locale-provider/index.js";
+import { useLocale as e, useMessages as t } from "../locale-provider/index.js";
+import { cx as n } from "../utils/cx.js";
+import { readingKey as r } from "../utils/direction.js";
+import { useControllable as i } from "../utils/useControllable.js";
 import { useField as a } from "../field/index.js";
 import { FIELD_SIZE as o, FIELD_WITHIN as s } from "../utils/styles.js";
 import { FormValue as c } from "../utils/form-value.js";
@@ -11,21 +11,21 @@ import { useMemo as u, useRef as d, useState as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region packages/time-field/index.tsx
 function h({ value: l, defaultValue: h = null, onValueChange: _, step: v = 1, locale: y, name: b, size: x = "default", invalid: S, disabled: C, className: w, onMouseDown: T, ...E }) {
-	let D = i(), O = a(), k = r(y), A = u(() => new g(k), [k]), [j, M, N] = n(l, h, _), [P, F] = f(null), I = P ?? A.split(j), L = d(""), R = (e) => {
+	let D = t(), O = a(), k = e(y), A = u(() => new g(k), [k]), [j, M, N] = i(l, h, _), [P, F] = f(null), I = P ?? A.split(j), L = d(""), R = (e) => {
 		let t = A.join(e);
 		F(t === null ? e : null), t !== j && M(t);
-	}, z = (e, n) => {
-		let r = t(e.key, e.currentTarget), i = (t) => {
+	}, z = (e, t) => {
+		let n = r(e.key, e.currentTarget), i = (t) => {
 			let n = [...e.currentTarget.parentElement.querySelectorAll("[role=spinbutton]")];
 			n[n.indexOf(e.currentTarget) + t]?.focus();
 		};
-		if (r === "ArrowLeft" || r === "ArrowRight") return e.preventDefault(), i(r === "ArrowLeft" ? -1 : 1);
-		if (r === "ArrowUp" || r === "ArrowDown") return e.preventDefault(), L.current = "", R(A.step(I, n, r === "ArrowUp" ? 1 : -1, v));
-		if (r === "Backspace" || r === "Delete") return e.preventDefault(), L.current = "", R({
+		if (n === "ArrowLeft" || n === "ArrowRight") return e.preventDefault(), i(n === "ArrowLeft" ? -1 : 1);
+		if (n === "ArrowUp" || n === "ArrowDown") return e.preventDefault(), L.current = "", R(A.step(I, t, n === "ArrowUp" ? 1 : -1, v));
+		if (n === "Backspace" || n === "Delete") return e.preventDefault(), L.current = "", R({
 			...I,
-			[n === "dayPeriod" ? "period" : n]: null
+			[t === "dayPeriod" ? "period" : t]: null
 		});
-		if (n === "dayPeriod") {
+		if (t === "dayPeriod") {
 			let t = A.periodFor(e.key);
 			return t === null ? void 0 : (e.preventDefault(), R({
 				...I,
@@ -35,18 +35,18 @@ function h({ value: l, defaultValue: h = null, onValueChange: _, step: v = 1, lo
 		let a = A.digit(e.key);
 		if (a === null) return;
 		e.preventDefault();
-		let { n: o, done: s } = A.type(n, L.current + a);
+		let { n: o, done: s } = A.type(t, L.current + a);
 		L.current = s ? "" : L.current + a, R({
 			...I,
-			[n]: o
+			[t]: o
 		}), s && i(1);
-	}, B = A.order.map((t, n) => {
-		if (t.type === "literal") return /* @__PURE__ */ p("span", {
+	}, B = A.order.map((e, t) => {
+		if (e.type === "literal") return /* @__PURE__ */ p("span", {
 			"aria-hidden": !0,
 			className: "text-muted-foreground whitespace-pre",
-			children: t.value
-		}, n);
-		let r = t.type, i = r === "dayPeriod" ? I.period : I[r], a = {
+			children: e.value
+		}, t);
+		let r = e.type, i = r === "dayPeriod" ? I.period : I[r], a = {
 			hour: D.hour,
 			minute: D.minute,
 			dayPeriod: D.dayPeriod
@@ -62,7 +62,7 @@ function h({ value: l, defaultValue: h = null, onValueChange: _, step: v = 1, lo
 			"aria-disabled": C || void 0,
 			onKeyDown: C ? void 0 : (e) => z(e, r),
 			onFocus: () => L.current = "",
-			className: e("zen__time-segment rounded-sm px-0.5 tabular-nums outline-hidden caret-transparent select-none", "focus:bg-primary/20 focus:text-foreground", o === null && "text-muted-foreground"),
+			className: n("zen__time-segment rounded-sm px-0.5 tabular-nums outline-hidden caret-transparent select-none", "focus:bg-primary/20 focus:text-foreground", o === null && "text-muted-foreground"),
 			children: o ?? "––"
 		}, r);
 	});
@@ -75,7 +75,7 @@ function h({ value: l, defaultValue: h = null, onValueChange: _, step: v = 1, lo
 		onMouseDown: (e) => {
 			T?.(e), !(e.defaultPrevented || e.target.closest("[role=spinbutton]")) && (e.preventDefault(), e.currentTarget.querySelector("[role=spinbutton]")?.focus());
 		},
-		className: e("zen__time-field", s, o[x], "w-fit cursor-text gap-0", C && "bg-muted text-muted-foreground cursor-not-allowed opacity-50", "data-invalid:border-destructive", w),
+		className: n("zen__time-field", s, o[x], "w-fit cursor-text gap-0", C && "bg-muted text-muted-foreground cursor-not-allowed opacity-50", "data-invalid:border-destructive", w),
 		children: [B, /* @__PURE__ */ p(c, {
 			name: b,
 			value: j ?? "",

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE5D,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,+BA+JhG;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,YAhNoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAoNpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE5D,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,+BAiKhG;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,YAlNoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAsNpF"}

package/dist/toast/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useGraphicsMode as t } from "../utils/graphics.js";
-import { useMessages as n } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { useGraphicsMode as n } from "../utils/graphics.js";
 import { AlertIcon as r, CheckIcon as i, InfoIcon as a } from "../utils/status-icons.js";
 import o from "../icons/micro/x-mark.js";
 import { createContext as s, useCallback as c, useContext as l, useEffect as u, useRef as d, useState as f } from "react";
@@ -10,8 +10,8 @@ import { createPortal as g } from "react-dom";
 //#region packages/toast/index.tsx
 var _ = 5e3, v = 3, y = 300, b = 14, x = .05, S = 10, C = 60, w = .45, T = s(null), E = s(null);
 function D({ children: r, offset: i, viewportClassName: a }) {
-	let o = n();
-	t();
+	let o = e();
+	n();
 	let [s, l] = f([]), p = d(0), C = d(/* @__PURE__ */ new Map()), w = d(/* @__PURE__ */ new Set()), [D, O] = f([]), [A, j] = f(!1);
 	u(() => j(!0), []);
 	let N = c((e) => (O((t) => [...t, e]), () => O((t) => t.filter((t) => t !== e))), []), P = D.at(-1) ?? (A ? document.body : null), [F, I] = f({}), L = c((e, t) => I((n) => n[e] === t ? n : {
@@ -46,7 +46,7 @@ function D({ children: r, offset: i, viewportClassName: a }) {
 			timeout: i ?? (r ? 1e4 : _)
 		};
 		return l((e) => [...e, o]), a;
-	}, []), K = s.filter((e) => !e.leaving), q = (R || B) && K.length > 0, J = K.at(-1), Y = J ? F[J.id] : void 0, X = K.slice(-3), Z = q ? X.reduce((e, t) => e + (F[t.id] ?? 0), 0) + S * (X.length - 1) : (Y ?? 0) + b * (X.length - 1), Q = (e) => {
+	}, []), K = s.filter((e) => !e.leaving), q = (R || B) && K.length > 0, J = K.at(-1), Y = J ? F[J.id] : void 0, X = K.slice(-3), Z = X.length ? q ? X.reduce((e, t) => e + (F[t.id] ?? 0), 0) + S * (X.length - 1) : (Y ?? 0) + b * (X.length - 1) : 0, Q = (e) => {
 		let t = K.filter((t) => t.id > e.id), n = t.length;
 		return {
 			index: n,
@@ -74,7 +74,7 @@ function D({ children: r, offset: i, viewportClassName: a }) {
 			onBlur: (e) => {
 				e.currentTarget.contains(e.relatedTarget) || V(!1);
 			},
-			className: e("zen__toast-viewport fixed top-auto end-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] start-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]", "ease-out-soft transition-[height] duration-300", a),
+			className: t("zen__toast-viewport fixed top-auto end-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] start-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]", "ease-out-soft transition-[height] duration-300", a),
 			style: {
 				height: Z,
 				...i && { "--zen-toast-offset": i }
@@ -136,45 +136,45 @@ var j = {
 		glow: "shadow-[var(--toast-shadow)]"
 	}
 };
-function M({ toast: t, layout: r, z: i, paused: a, onDismiss: s, onHeight: c, clocks: l, entered: g }) {
-	let _ = n(), v = j[t.tone] ?? j.default, y = v.icon, b = d(null), x = d(null), [S] = f(() => !g.has(t.id));
+function M({ toast: n, layout: r, z: i, paused: a, onDismiss: s, onHeight: c, clocks: l, entered: g }) {
+	let _ = e(), v = j[n.tone] ?? j.default, y = v.icon, b = d(null), x = d(null), [S] = f(() => !g.has(n.id));
 	u(() => {
-		b.current?.isConnected && g.add(t.id);
-	}, [g, t.id]);
+		b.current?.isConnected && g.add(n.id);
+	}, [g, n.id]);
 	let [T, E] = f(!1);
 	u(() => {
 		if (!S) return;
 		let e = requestAnimationFrame(() => e = requestAnimationFrame(() => E(!0)));
 		return () => cancelAnimationFrame(e);
-	}, [S]), l.has(t.id) || l.set(t.id, {
+	}, [S]), l.has(n.id) || l.set(n.id, {
 		spent: 0,
 		since: null
 	});
-	let D = l.get(t.id), [O] = f(() => D.spent + (D.since === null ? 0 : Date.now() - D.since));
+	let D = l.get(n.id), [O] = f(() => D.spent + (D.since === null ? 0 : Date.now() - D.since));
 	u(() => {
 		let e = x.current;
 		if (!e) return;
-		let n = () => c(t.id, e.offsetHeight);
-		n();
-		let r = new ResizeObserver(n);
+		let t = () => c(n.id, e.offsetHeight);
+		t();
+		let r = new ResizeObserver(t);
 		return r.observe(e), () => r.disconnect();
-	}, [c, t.id]), u(() => {
-		if (!t.timeout || a || t.leaving) return;
+	}, [c, n.id]), u(() => {
+		if (!n.timeout || a || n.leaving) return;
 		D.since = Date.now();
-		let e = setTimeout(() => s(t.id), Math.max(0, t.timeout - D.spent));
+		let e = setTimeout(() => s(n.id), Math.max(0, n.timeout - D.spent));
 		return () => {
 			clearTimeout(e), D.since !== null && (D.spent += Date.now() - D.since), D.since = null;
 		};
 	}, [
 		a,
-		t.id,
-		t.timeout,
-		t.leaving,
+		n.id,
+		n.timeout,
+		n.leaving,
 		s,
 		D
 	]);
 	let k = d(null), A = (e) => {
-		t.leaving || e.button !== 0 || e.target.closest("button") || (k.current = {
+		n.leaving || e.button !== 0 || e.target.closest("button") || (k.current = {
 			x: e.clientX,
 			dx: 0,
 			t: e.timeStamp,
@@ -185,21 +185,21 @@ function M({ toast: t, layout: r, z: i, paused: a, onDismiss: s, onHeight: c, cl
 		let t = k.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`);
 	}, N = (e) => {
-		let n = k.current;
-		n && (k.current = null, delete e.currentTarget.dataset.swiping, n.dx > C || n.dx > 0 && n.speed > w ? s(t.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
+		let t = k.current;
+		t && (k.current = null, delete e.currentTarget.dataset.swiping, t.dx > C || t.dx > 0 && t.speed > w ? s(n.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
 	};
 	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
 		ref: b,
-		role: t.tone === "negative" ? "alert" : "status",
+		role: n.tone === "negative" ? "alert" : "status",
 		"aria-live": "off",
 		"data-front": r.front || void 0,
 		"data-behind": !r.front && r.height !== void 0 || void 0,
-		inert: r.hidden || !!t.leaving,
+		inert: r.hidden || !!n.leaving,
 		onPointerDown: A,
 		onPointerMove: M,
 		onPointerUp: N,
 		onPointerCancel: N,
-		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", "ease-out-soft transition-[transform,translate,opacity,height] duration-400 data-swiping:transition-none", S && "starting:translate-y-full starting:opacity-0", r.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", v.ring, v.glow),
+		className: t("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", "ease-out-soft transition-[transform,translate,opacity,height] duration-400 data-swiping:transition-none", S && "starting:translate-y-full starting:opacity-0", r.hidden && "opacity-0", n.leaving === "fade" && "translate-y-[35%] opacity-0", n.leaving === "swipe" && "translate-x-full opacity-0", v.ring, v.glow),
 		style: {
 			zIndex: i,
 			height: r.height,
@@ -210,7 +210,7 @@ function M({ toast: t, layout: r, z: i, paused: a, onDismiss: s, onHeight: c, cl
 			className: "flex items-start gap-3 p-3.5 pe-10 transition-opacity duration-300 group-data-behind:opacity-0",
 			children: [
 				/* @__PURE__ */ m("span", {
-					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", v.badge),
+					className: t("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", v.badge),
 					"aria-hidden": !0,
 					children: /* @__PURE__ */ m(y, { className: "size-4" })
 				}),
@@ -219,44 +219,44 @@ function M({ toast: t, layout: r, z: i, paused: a, onDismiss: s, onHeight: c, cl
 					children: [
 						/* @__PURE__ */ m("div", {
 							className: "text-sm font-semibold",
-							children: t.title
+							children: n.title
 						}),
-						t.description && /* @__PURE__ */ m("div", {
+						n.description && /* @__PURE__ */ m("div", {
 							className: "text-muted-foreground text-sm leading-5",
-							children: t.description
+							children: n.description
 						}),
-						t.action && /* @__PURE__ */ m("button", {
+						n.action && /* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: () => {
-								t.action?.onClick(), s(t.id);
+								n.action?.onClick(), s(n.id);
 							},
 							className: "border-tint/10 bg-tint/[0.06] hover:bg-tint/[0.12] focus-ring mt-2 cursor-pointer self-start rounded-lg border px-3 py-1 text-xs font-medium outline-hidden transition-colors",
-							children: t.action.label
+							children: n.action.label
 						})
 					]
 				}),
 				/* @__PURE__ */ m("button", {
 					type: "button",
 					"aria-label": _.dismiss,
-					onClick: () => s(t.id),
+					onClick: () => s(n.id),
 					className: "text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-ring absolute end-2.5 top-2.5 grid size-7 cursor-pointer place-items-center rounded-lg outline-hidden transition-colors",
 					children: /* @__PURE__ */ m(o, { className: "size-3.5" })
 				})
 			]
-		}), t.timeout > 0 && /* @__PURE__ */ m("span", {
+		}), n.timeout > 0 && /* @__PURE__ */ m("span", {
 			"aria-hidden": !0,
-			className: e("zen__toast-timer absolute start-0 bottom-0 h-0.5 w-full origin-left opacity-60 rtl:origin-right transition-opacity group-data-behind:opacity-0", v.bar),
+			className: t("zen__toast-timer absolute start-0 bottom-0 h-0.5 w-full origin-left opacity-60 rtl:origin-right transition-opacity group-data-behind:opacity-0", v.bar),
 			style: {
-				animationDuration: `${t.timeout}ms`,
+				animationDuration: `${n.timeout}ms`,
 				animationDelay: `${-O}ms`,
 				animationPlayState: a ? "paused" : void 0
 			}
 		})]
 	}), /* @__PURE__ */ m("span", {
 		className: "sr-only",
-		"aria-live": t.tone === "negative" ? "assertive" : "polite",
+		"aria-live": n.tone === "negative" ? "assertive" : "polite",
 		"aria-atomic": "true",
-		children: T && [t.title, t.description].filter(Boolean).join(". ")
+		children: T && [n.title, n.description].filter(Boolean).join(". ")
 	})] });
 }
 //#endregion