@rinzai/zen 0.14.0 → 0.16.0

package/dist/carousel/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMergedRefs as t } from "../utils/refs.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 { useMergedRefs as n } from "../utils/refs.js";
 import { reducedMotion as r } from "../utils/motion.js";
 import i from "../icons/chevron-left.js";
 import a from "../icons/chevron-right.js";
@@ -18,19 +18,19 @@ function _(e, t) {
 	let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
 	return (getComputedStyle(t).direction === "rtl" ? r.right - n.right : n.left - r.left) + Math.abs(t.scrollLeft);
 }
-function v({ className: t, children: i, ...a }) {
-	let o = n(), c = d(null), [l, u] = f({
+function v({ className: n, children: i, ...a }) {
+	let o = e(), c = d(null), [l, u] = f({
 		index: 0,
 		stops: 1,
 		count: 0
 	}), g = s(() => {
 		let e = c.current;
 		if (!e) return;
-		let t = Array.from(e.children), n = Math.abs(e.scrollLeft), r = e.scrollWidth - e.clientWidth, i = t[0] ? _(t[0], e) : 0, a = t.map((t) => _(t, e) - i), o = Math.max(1, a.filter((e) => e <= r + 1).length), s = 0;
+		let t = Array.from(e.children), n = Math.abs(e.scrollLeft), r = e.scrollWidth - e.clientWidth, i = t[0] ? _(t[0], e) : 0, a = t.map((t) => _(t, e) - i), o = a.filter((e) => e < r - 1).length + 1, s = (e) => Math.min(a[e], r), l = 0;
 		a.forEach((e, t) => {
-			t < o && Math.abs(e - n) < Math.abs(a[s] - n) && (s = t);
-		}), r > 0 && n >= r - 1 && (s = o - 1), u((e) => e.index === s && e.stops === o && e.count === t.length ? e : {
-			index: s,
+			t < o && Math.abs(s(t) - n) < Math.abs(s(l) - n) && (l = t);
+		}), r > 0 && n >= r - 1 && (l = o - 1), u((e) => e.index === l && e.stops === o && e.count === t.length ? e : {
+			index: l,
 			stops: o,
 			count: t.length
 		});
@@ -55,7 +55,7 @@ function v({ className: t, children: i, ...a }) {
 	let v = s((e) => {
 		let t = c.current, n = t?.children[e];
 		if (!t || !n) return;
-		let i = t.children[0], a = _(n, t) - _(i, t), o = getComputedStyle(t).direction === "rtl";
+		let i = t.children[0], a = Math.min(_(n, t) - _(i, t), t.scrollWidth - t.clientWidth), o = getComputedStyle(t).direction === "rtl";
 		t.scrollTo({
 			left: o ? -a : a,
 			behavior: r() ? "instant" : "smooth"
@@ -70,23 +70,23 @@ function v({ className: t, children: i, ...a }) {
 		children: /* @__PURE__ */ p("section", {
 			"aria-roledescription": o.carousel,
 			...a,
-			className: e("zen__carousel relative", t),
+			className: t("zen__carousel relative", n),
 			children: i
 		})
 	});
 }
-function y({ ref: n, className: r, ...i }) {
-	let { contentRef: a } = g("CarouselContent"), o = t(a, n);
+function y({ ref: e, className: r, ...i }) {
+	let { contentRef: a } = g("CarouselContent"), o = n(a, e);
 	return /* @__PURE__ */ p("div", {
 		tabIndex: 0,
 		"aria-live": "polite",
 		...i,
 		ref: o,
-		className: e("flex snap-x snap-mandatory gap-4 overflow-x-auto overscroll-x-contain rounded-xl", "focus-ring [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", r)
+		className: t("flex snap-x snap-mandatory gap-4 overflow-x-auto overscroll-x-contain rounded-xl", "focus-ring [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", r)
 	});
 }
 function b({ ref: r, className: i, ...a }) {
-	let o = n(), { count: s } = g("CarouselItem"), c = d(null), l = t(c, r), [u, h] = f(0);
+	let o = e(), { count: s } = g("CarouselItem"), c = d(null), l = n(c, r), [u, h] = f(0);
 	return m(() => {
 		let e = c.current;
 		e?.parentElement && h(Array.prototype.indexOf.call(e.parentElement.children, e) + 1);
@@ -96,18 +96,18 @@ function b({ ref: r, className: i, ...a }) {
 		"aria-label": u && s ? o.slideOf(u, s) : void 0,
 		...a,
 		ref: l,
-		className: e("min-w-0 shrink-0 grow-0 basis-full snap-start", i)
+		className: t("min-w-0 shrink-0 grow-0 basis-full snap-start", i)
 	});
 }
 var x = "glass glass-blur text-foreground grid size-9 shrink-0 cursor-pointer place-items-center rounded-full transition-opacity focus-ring hover:bg-tint/[0.08] aria-disabled:cursor-not-allowed aria-disabled:opacity-0 aria-disabled:focus-visible:opacity-40";
-function S({ className: t, onClick: r, ...a }) {
-	let o = n(), { index: s, scrollTo: c } = g("CarouselPrevious"), l = s === 0;
+function S({ className: n, onClick: r, ...a }) {
+	let o = e(), { index: s, scrollTo: c } = g("CarouselPrevious"), l = s === 0;
 	return /* @__PURE__ */ p("button", {
 		type: "button",
 		"aria-label": o.previousSlide,
 		...a,
 		"aria-disabled": l || void 0,
-		className: e(x, t),
+		className: t(x, n),
 		onClick: (e) => {
 			r?.(e), !l && !e.defaultPrevented && c(s - 1);
 		},
@@ -117,14 +117,14 @@ function S({ className: t, onClick: r, ...a }) {
 		})
 	});
 }
-function C({ className: t, onClick: r, ...i }) {
-	let o = n(), { index: s, stops: c, scrollTo: l } = g("CarouselNext"), u = s >= c - 1;
+function C({ className: n, onClick: r, ...i }) {
+	let o = e(), { index: s, stops: c, scrollTo: l } = g("CarouselNext"), u = s >= c - 1;
 	return /* @__PURE__ */ p("button", {
 		type: "button",
 		"aria-label": o.nextSlide,
 		...i,
 		"aria-disabled": u || void 0,
-		className: e(x, t),
+		className: t(x, n),
 		onClick: (e) => {
 			r?.(e), !u && !e.defaultPrevented && l(s + 1);
 		},
@@ -134,12 +134,12 @@ function C({ className: t, onClick: r, ...i }) {
 		})
 	});
 }
-function w({ className: t, ...r }) {
-	let i = n(), { index: a, stops: o, scrollTo: s } = g("CarouselDots");
+function w({ className: n, ...r }) {
+	let i = e(), { index: a, stops: o, scrollTo: s } = g("CarouselDots");
 	return o < 2 ? null : /* @__PURE__ */ p("div", {
 		...r,
-		className: e("flex justify-center gap-0.5", t),
-		children: Array.from({ length: o }, (t, n) => /* @__PURE__ */ p("button", {
+		className: t("flex justify-center gap-0.5", n),
+		children: Array.from({ length: o }, (e, n) => /* @__PURE__ */ p("button", {
 			type: "button",
 			"aria-label": i.goToSlide(n + 1),
 			"aria-current": n === a || void 0,
@@ -147,15 +147,15 @@ function w({ className: t, ...r }) {
 			className: "group cursor-pointer rounded-full p-1 outline-hidden",
 			children: /* @__PURE__ */ p("span", {
 				"aria-hidden": !0,
-				className: e("block h-1.5 rounded-full transition-[width,background-color,box-shadow] duration-300", "group-focus-visible:ring-2 group-focus-visible:ring-ring/50", n === a ? "bg-primary w-5 shadow-[0_0_10px_oklch(var(--glow)/calc(0.7*var(--glow-k)))]" : "bg-tint/25 group-hover:bg-tint/40 w-1.5")
+				className: t("block h-1.5 rounded-full transition-[width,background-color,box-shadow] duration-300", "group-focus-visible:ring-2 group-focus-visible:ring-ring/50", n === a ? "bg-primary w-5 shadow-[0_0_10px_oklch(var(--glow)/calc(0.7*var(--glow-k)))]" : "bg-tint/25 group-hover:bg-tint/40 w-1.5")
 			})
 		}, n))
 	});
 }
-function T({ className: t, ...n }) {
+function T({ className: e, ...n }) {
 	return /* @__PURE__ */ p("div", {
 		...n,
-		className: e("mt-3 flex items-center justify-between gap-3", t)
+		className: t("mt-3 flex items-center justify-between gap-3", e)
 	});
 }
 //#endregion

package/dist/chart/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 { useSeen as n } from "../utils/useSeen.js";
 import { paletteColor as r } from "./palette.js";
 import { ChartTooltipCard as i, Key as a } from "./tooltip.js";
@@ -19,7 +19,7 @@ var g = () => null, _ = () => null, v = () => null, ne = () => null, y = /* @__P
 	bottom: 26
 }, x = 11;
 function S({ data: a, x: o, label: s, summary: c, height: g = 240, formatX: _ = String, formatY: v = O, formatTooltipX: S, renderTooltip: D, legend: j, palette: M = "chart", className: N, children: P, ...F }) {
-	let I = t(), L = l().replace(/[^\w-]/g, ""), R = d(null), z = E(R), B = n(R), [V, H] = f(null), [oe, U] = f(null), W = u(() => {
+	let I = e(), L = l().replace(/[^\w-]/g, ""), R = d(null), z = E(R), B = n(R), [V, H] = f(null), [oe, U] = f(null), W = u(() => {
 		let e = ee.toArray(P).filter(te), t = e.filter((e) => y.has(e.type)).length, n = [], i = [];
 		for (let a of e) {
 			a.type === ne && i.push(a.props);
@@ -223,7 +223,7 @@ function S({ data: a, x: o, label: s, summary: c, height: g = 240, formatX: _ =
 	return /* @__PURE__ */ h("figure", {
 		"aria-label": s,
 		...F,
-		className: e("zen__chart m-0 flex flex-col gap-3", N),
+		className: t("zen__chart m-0 flex flex-col gap-3", N),
 		children: [
 			ve && /* @__PURE__ */ m(w, { series: G }),
 			/* @__PURE__ */ h("div", {
@@ -304,12 +304,12 @@ function C(e, t) {
 	let n = e[t];
 	return typeof n == "number" && Number.isFinite(n) ? n : null;
 }
-function w({ series: e }) {
-	let n = t(), r = e.filter((t, n) => t.dimLabel && e.findIndex((e) => e.dimLabel === t.dimLabel) === n);
+function w({ series: t }) {
+	let n = e(), r = t.filter((e, n) => e.dimLabel && t.findIndex((t) => t.dimLabel === e.dimLabel) === n);
 	return /* @__PURE__ */ h("ul", {
 		className: "text-muted-foreground flex flex-wrap gap-x-4 gap-y-1 text-xs",
 		"aria-label": n.legend,
-		children: [e.map((e) => /* @__PURE__ */ h("li", {
+		children: [t.map((e) => /* @__PURE__ */ h("li", {
 			className: "flex items-center gap-1.5",
 			children: [/* @__PURE__ */ m(a, {
 				color: e.color,

package/dist/code-block/index.js

@@ -1,19 +1,19 @@
 "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 { useCopyToClipboard as n } from "../utils/useCopyToClipboard.js";
 import { useEffect as r, useRef as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region packages/code-block/index.tsx
 function c({ code: c, language: l, highlight: u, copyable: d = !0, variant: f = "glass", className: p, ...m }) {
-	let h = t(), g = c.trim(), { copy: _, copied: v } = n(), y = i(null), [b, x] = a(!1);
+	let h = e(), g = c.trim(), { copy: _, copied: v } = n(), y = i(null), [b, x] = a(!1);
 	return r(() => {
 		let e = y.current;
 		if (!e || typeof ResizeObserver > "u") return;
 		let t = new ResizeObserver(() => x(e.scrollWidth > e.clientWidth || e.scrollHeight > e.clientHeight));
 		return t.observe(e), () => t.disconnect();
 	}, []), /* @__PURE__ */ s("div", {
-		className: e("zen__code-block group relative flex flex-col", f === "glass" && "glass glow-edge overflow-hidden rounded-xl", p),
+		className: t("zen__code-block group relative flex flex-col", f === "glass" && "glass glow-edge overflow-hidden rounded-xl", p),
 		"data-language": l,
 		...m,
 		children: [/* @__PURE__ */ o("pre", {
@@ -31,7 +31,7 @@ function c({ code: c, language: l, highlight: u, copyable: d = !0, variant: f =
 		}), d && /* @__PURE__ */ o("button", {
 			type: "button",
 			onClick: () => _(g),
-			className: e("zen__code-copy inline-flex items-center justify-center text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground absolute top-2.5 end-2.5 cursor-pointer rounded-lg px-2.5 py-1 text-xs font-medium outline-hidden transition-[opacity,background-color,color] focus-ring", "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 pointer-coarse:min-h-11 pointer-coarse:min-w-11 [@media(hover:none)]:bg-card/90 [@media(hover:none)]:opacity-100", v && "text-primary opacity-100"),
+			className: t("zen__code-copy inline-flex items-center justify-center text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground absolute top-2.5 end-2.5 cursor-pointer rounded-lg px-2.5 py-1 text-xs font-medium outline-hidden transition-[opacity,background-color,color] focus-ring", "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 pointer-coarse:min-h-11 pointer-coarse:min-w-11 [@media(hover:none)]:bg-card/90 [@media(hover:none)]:opacity-100", v && "text-primary opacity-100"),
 			children: v ? h.copied : h.copy
 		})]
 	});

package/dist/collapse/index.js

@@ -1,14 +1,14 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMergedRefs as t } from "../utils/refs.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 { useMergedRefs as n } from "../utils/refs.js";
 import r from "../badge/index.js";
 import i, { PopoverContent as a, PopoverTrigger as o } from "../popover/index.js";
 import { useEffect as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region packages/collapse/index.tsx
 function p({ items: p, data: m, children: h, moreLabel: g = "", badgeVariant: _ = "secondary", badgeClassName: v, className: y, ref: b, ...x }) {
-	let S = n(), C = l(null), w = t(C, b), [T, E] = u(null), D = l({
+	let S = e(), C = l(null), w = n(C, b), [T, E] = u(null), D = l({
 		items: [],
 		more: 0,
 		gap: 0
@@ -45,7 +45,7 @@ function p({ items: p, data: m, children: h, moreLabel: g = "", badgeVariant: _
 	return /* @__PURE__ */ f("div", {
 		...x,
 		ref: w,
-		className: e("zen__collapse flex min-w-0 items-center overflow-hidden [contain:inline-size]", y),
+		className: t("zen__collapse flex min-w-0 items-center overflow-hidden [contain:inline-size]", y),
 		children: [p.slice(0, k).map((e, t) => /* @__PURE__ */ d("span", {
 			"data-collapse-item": !0,
 			className: "flex shrink-0",
@@ -66,7 +66,7 @@ function p({ items: p, data: m, children: h, moreLabel: g = "", badgeVariant: _
 			"aria-label": S.showMore(j(A.length).slice(1)),
 			children: /* @__PURE__ */ d(r, {
 				variant: _,
-				className: e("cursor-pointer", v),
+				className: t("cursor-pointer", v),
 				children: j(A.length)
 			})
 		}), /* @__PURE__ */ d(a, {

package/dist/color-picker/index.js

@@ -1,8 +1,8 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useControllable as t } from "../utils/useControllable.js";
-import { useAnchoredPopup as n } from "../utils/useAnchoredPopup.js";
-import { useMessages as r } 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 { useAnchoredPopup as r } from "../utils/useAnchoredPopup.js";
 import { useFieldProps as i } from "../field/index.js";
 import { FIELD_SIZE as a, POPUP as o, TRIGGER as s } from "../utils/styles.js";
 import c from "../input/index.js";
@@ -39,8 +39,8 @@ function w(e, t) {
 		a: 1
 	}) : null;
 }
-function T({ value: n, defaultValue: i = "#000000", onValueChange: a, onValueCommit: o, alpha: s = !1, swatches: l, className: p, ...g }) {
-	let T = r(), [E, D] = t(n, i, a), O = m(), [k, A] = h(() => d(E) ?? y), [j, M] = h(E);
+function T({ value: r, defaultValue: i = "#000000", onValueChange: a, onValueCommit: o, alpha: s = !1, swatches: l, className: p, ...g }) {
+	let T = e(), [E, D] = n(r, i, a), O = m(), [k, A] = h(() => d(E) ?? y), [j, M] = h(E);
 	if (E !== j) {
 		M(E);
 		let e = w(E, s);
@@ -76,7 +76,7 @@ function T({ value: n, defaultValue: i = "#000000", onValueChange: a, onValueCom
 		I(null), e && e !== N && (A(d(e)), D(e), R(e));
 	};
 	return /* @__PURE__ */ v("div", {
-		className: e("zen__color-panel flex w-64 flex-col gap-3", p),
+		className: t("zen__color-panel flex w-64 flex-col gap-3", p),
 		...g,
 		children: [
 			/* @__PURE__ */ _("div", {
@@ -168,7 +168,7 @@ function T({ value: n, defaultValue: i = "#000000", onValueChange: a, onValueCom
 	});
 }
 function E({ value: c, defaultValue: u = "#000000", onValueChange: d, onValueCommit: f, alpha: m, swatches: h, name: y, size: x = "default", id: S, disabled: C, className: w, style: E, ...D }) {
-	let O = r(), [k, A, j] = t(c, u, d), M = n(), N = i({
+	let O = e(), [k, A, j] = n(c, u, d), M = r(), N = i({
 		...D,
 		id: S
 	});
@@ -184,7 +184,7 @@ function E({ value: c, defaultValue: u = "#000000", onValueChange: d, onValueCom
 				...M.triggerProps.style,
 				...E
 			},
-			className: e("zen__color-picker group", s, a[x], "w-full", M.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", w),
+			className: t("zen__color-picker group", s, a[x], "w-full", M.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", w),
 			children: [/* @__PURE__ */ v("span", {
 				className: "flex min-w-0 items-center gap-2.5",
 				children: [/* @__PURE__ */ _("span", {
@@ -206,7 +206,7 @@ function E({ value: c, defaultValue: u = "#000000", onValueChange: d, onValueCom
 			...M.popupProps,
 			role: "dialog",
 			"aria-label": O.chooseColour,
-			className: e("zen__popover", o, "p-3"),
+			className: t("zen__popover", o, "p-3"),
 			children: /* @__PURE__ */ _(T, {
 				value: k,
 				onValueChange: A,

package/dist/combobox/index.js

@@ -1,8 +1,8 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useControllable as t } from "../utils/useControllable.js";
-import { anchoredStyle as n, useAnchoredPopup as r } from "../utils/useAnchoredPopup.js";
-import { useMessages as i } 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 { anchoredStyle as r, useAnchoredPopup as i } from "../utils/useAnchoredPopup.js";
 import a from "../badge/index.js";
 import o from "../button/index.js";
 import { CheckIcon as s } from "../utils/status-icons.js";
@@ -24,17 +24,17 @@ var A = x(null), j = () => {
 	return e;
 };
 function M(e) {
-	let { items: n, itemKey: i = (e) => e.key, itemText: a = (e) => e.text, filter: o = (e, t) => a(e).toLowerCase().includes(t.toLowerCase()), selectedItems: s = [], name: c, children: l } = e, u = e.multiple === !0, [d, f, m] = t(e.value, e.defaultValue ?? (u ? [] : null), e.onValueChange), h = typeof d == "string" ? [d] : d ?? [], [g, _] = E(""), [v, y] = E(null), [b, x] = E(), S = T(null), C = T(null), D = T(null), j = T(35), M = w(() => g ? n.filter((e) => o(e, g)) : n, [
-		n,
+	let { items: t, itemKey: r = (e) => e.key, itemText: a = (e) => e.text, filter: o = (e, t) => a(e).toLowerCase().includes(t.toLowerCase()), selectedItems: s = [], name: c, children: l } = e, u = e.multiple === !0, [d, f, m] = n(e.value, e.defaultValue ?? (u ? [] : null), e.onValueChange), h = typeof d == "string" ? [d] : d ?? [], [g, _] = E(""), [v, y] = E(null), [b, x] = E(), S = T(null), C = T(null), D = T(null), j = T(35), M = w(() => g ? t.filter((e) => o(e, g)) : t, [
+		t,
 		g,
 		o
-	]), N = r({ onOpenChange: (e) => {
+	]), N = i({ onOpenChange: (e) => {
 		e || (y(null), _(""), N.popupRef.current?.contains(document.activeElement) && C.current?.focus());
 	} }), P = {
 		multiple: u,
-		keyOf: i,
+		keyOf: r,
 		textOf: a,
-		items: n,
+		items: t,
 		selectedItems: s,
 		matches: M,
 		chosen: h,
@@ -66,23 +66,23 @@ function M(e) {
 		})]
 	});
 }
-function N({ placeholder: t, disabled: n, size: r = "default", className: a, style: o, children: s, ...u }) {
-	let d = i(), p = t ?? d.selectPlaceholder, h = j(), { popup: g } = h, _ = c(), v = u.id ?? _?.id ?? `${g.id}-field`, y = u["aria-labelledby"] ?? (u["aria-label"] ? v : _?.labelId), { setListLabelledBy: b } = h;
+function N({ placeholder: n, disabled: r, size: i = "default", className: a, style: o, children: s, ...u }) {
+	let d = e(), p = n ?? d.selectPlaceholder, h = j(), { popup: g } = h, _ = c(), v = u.id ?? _?.id ?? `${g.id}-field`, y = u["aria-labelledby"] ?? (u["aria-label"] ? v : _?.labelId), { setListLabelledBy: b } = h;
 	C(() => b(y), [y, b]);
-	let x = T(!1), S = () => !n && g.setOpen(!0);
+	let x = T(!1), S = () => !r && g.setOpen(!0);
 	return /* @__PURE__ */ k("div", {
 		id: v,
 		"aria-labelledby": u["aria-label"] ? void 0 : _?.labelId,
 		"aria-invalid": _?.["aria-invalid"],
 		...u,
-		"aria-describedby": e(_?.["aria-describedby"], u["aria-describedby"]).trim() || void 0,
+		"aria-describedby": t(_?.["aria-describedby"], u["aria-describedby"]).trim() || void 0,
 		ref: h.triggerRef,
 		role: "combobox",
-		tabIndex: n ? -1 : 0,
+		tabIndex: r ? -1 : 0,
 		"aria-haspopup": "listbox",
 		"aria-expanded": g.open,
 		"aria-controls": g.id,
-		"aria-disabled": n || void 0,
+		"aria-disabled": r || void 0,
 		"data-popup-open": g.triggerProps["data-popup-open"],
 		"data-zen-anchor": g.triggerProps["data-zen-anchor"],
 		style: {
@@ -102,86 +102,86 @@ function N({ placeholder: t, disabled: n, size: r = "default", className: a, sty
 				"ArrowDown"
 			].includes(e.key) && (e.preventDefault(), S());
 		},
-		className: e(f, l[r], "w-56 shrink-0", n ? "cursor-not-allowed opacity-50" : "cursor-pointer", g.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", a),
+		className: t(f, l[i], "w-56 shrink-0", r ? "cursor-not-allowed opacity-50" : "cursor-pointer", g.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", a),
 		children: [/* @__PURE__ */ O("div", {
-			className: e("flex min-w-0 flex-1 items-center gap-1 overflow-hidden text-sm", n ? "text-muted-foreground" : "text-foreground"),
+			className: t("flex min-w-0 flex-1 items-center gap-1 overflow-hidden text-sm", r ? "text-muted-foreground" : "text-foreground"),
 			children: s ?? /* @__PURE__ */ O(P, { placeholder: p })
 		}), /* @__PURE__ */ O(m, { open: g.open })]
 	});
 }
-function P({ placeholder: e }) {
-	let t = j(), n = i(), r = new Map([...t.selectedItems, ...t.items].map((e) => [t.keyOf(e), e])), s = t.chosen.flatMap((e) => {
-		let n = r.has(e) ? t.textOf(r.get(e)) : void 0;
-		return n ? [{
+function P({ placeholder: t }) {
+	let n = j(), r = e(), i = new Map([...n.selectedItems, ...n.items].map((e) => [n.keyOf(e), e])), s = n.chosen.flatMap((e) => {
+		let t = i.has(e) ? n.textOf(i.get(e)) : void 0;
+		return t ? [{
 			key: e,
-			text: n
+			text: t
 		}] : [];
 	});
-	return s.length ? t.multiple ? /* @__PURE__ */ O(h, {
+	return s.length ? n.multiple ? /* @__PURE__ */ O(h, {
 		items: s.map((e) => e.text),
 		data: s,
 		badgeVariant: "secondary",
 		badgeClassName: "h-6 min-w-min gap-2",
 		className: "w-full gap-1",
-		children: (e, r, i) => /* @__PURE__ */ k(a, {
+		children: (e, t, i) => /* @__PURE__ */ k(a, {
 			className: "flex h-6 min-w-min gap-2 pe-1",
 			variant: "secondary",
 			children: [e, /* @__PURE__ */ O(o, {
-				"aria-label": n.remove(e),
+				"aria-label": r.remove(e),
 				onClick: (e) => {
-					e.stopPropagation(), i && t.toggle(i.key);
+					e.stopPropagation(), i && n.toggle(i.key);
 				},
 				variant: "ghost",
 				size: "icon",
 				className: "group relative -top-px size-4 rounded-sm p-0.5",
 				children: /* @__PURE__ */ O(_, { className: "zen__combobox-remove-icon size-3 transition duration-300 group-hover:rotate-90" })
 			})]
-		}, i?.key ?? r)
+		}, i?.key ?? t)
 	}) : /* @__PURE__ */ O(D, { children: s[0].text }) : /* @__PURE__ */ O("span", {
 		className: u,
-		children: e
+		children: t
 	});
 }
-function F({ className: t, children: r }) {
+function F({ className: e, children: n }) {
 	let { popup: i } = j();
 	return /* @__PURE__ */ O("div", {
 		...i.popupProps,
-		style: n(i.id, {
+		style: r(i.id, {
 			offset: 5,
 			width: "match"
 		}),
-		className: e("zen__popover", d, "overflow-visible p-0", t),
+		className: t("zen__popover", d, "overflow-visible p-0", e),
 		children: /* @__PURE__ */ O("div", {
 			className: "divide-tint/10 flex w-full flex-col divide-y overflow-hidden rounded-xl",
-			children: r
+			children: n
 		})
 	});
 }
-function I({ placeholder: e, "aria-label": t }) {
-	let n = j(), r = i(), a = T(null);
+function I({ placeholder: t, "aria-label": n }) {
+	let r = j(), i = e(), a = T(null);
 	C(() => {
-		n.popup.open && a.current?.focus();
-	}, [n.popup.open]);
-	let o = n.matches.map(n.keyOf);
+		r.popup.open && a.current?.focus();
+	}, [r.popup.open]);
+	let o = r.matches.map(r.keyOf);
 	return /* @__PURE__ */ k("div", {
 		className: "flex h-10 grow items-center gap-2 px-3",
 		children: [/* @__PURE__ */ O(v, { children: /* @__PURE__ */ O(g, {}) }), /* @__PURE__ */ O(y, {
 			ref: a,
-			placeholder: e ?? r.search,
-			"aria-label": t ?? r.searchOptions,
-			"aria-controls": `${n.popup.id}-list`,
-			"aria-activedescendant": n.active === null ? void 0 : n.optionId(n.active),
-			value: n.query,
+			placeholder: t ?? i.search,
+			"aria-label": n ?? i.searchOptions,
+			"aria-controls": `${r.popup.id}-list`,
+			"aria-activedescendant": r.active === null ? void 0 : r.optionId(r.active),
+			value: r.query,
 			onChange: (e) => {
-				n.setQuery(e.target.value), n.setActive(null);
+				r.setQuery(e.target.value), r.setActive(null);
 			},
 			onKeyDown: (e) => {
-				let t = n.active === null ? -1 : o.indexOf(n.active), r = (t) => {
+				let t = r.active === null ? -1 : o.indexOf(r.active), n = (t) => {
 					if (e.preventDefault(), !o.length) return;
-					let r = o[(t + o.length) % o.length];
-					n.setActive(r), L(n.listRef.current, o.indexOf(r), n.itemHeight.current);
+					let n = o[(t + o.length) % o.length];
+					r.setActive(n), L(r.listRef.current, o.indexOf(n), r.itemHeight.current);
 				};
-				e.key === "ArrowDown" ? r(t + 1) : e.key === "ArrowUp" ? r(t === -1 ? o.length - 1 : t - 1) : e.key === "Enter" && (e.preventDefault(), n.active === null ? !o.length && n.query && n.create.current && (n.create.current(n.query), n.setQuery("")) : n.toggle(n.active));
+				e.key === "ArrowDown" ? n(t + 1) : e.key === "ArrowUp" ? n(t === -1 ? o.length - 1 : t - 1) : e.key === "Enter" && (e.preventDefault(), r.active === null ? !o.length && r.query && r.create.current && (r.create.current(r.query), r.setQuery("")) : r.toggle(r.active));
 			}
 		})]
 	});
@@ -227,8 +227,8 @@ function z({ renderItem: e, itemHeight: t = 35, children: n }) {
 		}), n]
 	});
 }
-function B({ item: t, className: n, children: r }) {
-	let i = j(), a = S(R), o = i.keyOf(t), c = i.chosen.includes(o);
+function B({ item: e, className: n, children: r }) {
+	let i = j(), a = S(R), o = i.keyOf(e), c = i.chosen.includes(o);
 	return /* @__PURE__ */ k("li", {
 		id: i.optionId(o),
 		role: "option",
@@ -240,36 +240,36 @@ function B({ item: t, className: n, children: r }) {
 		} : void 0,
 		onMouseMove: () => i.active !== o && i.setActive(o),
 		onClick: () => i.toggle(o),
-		className: e("hover:bg-muted data-highlighted:bg-muted grid w-full cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 px-3 py-2 text-sm outline-hidden select-none", a && "absolute top-0 left-0", n),
+		className: t("hover:bg-muted data-highlighted:bg-muted grid w-full cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 px-3 py-2 text-sm outline-hidden select-none", a && "absolute top-0 left-0", n),
 		children: [/* @__PURE__ */ O("span", {
 			className: "text-primary col-start-1",
 			"aria-hidden": !0,
 			children: c && /* @__PURE__ */ O(s, {})
 		}), /* @__PURE__ */ O("span", {
 			className: "col-start-2 truncate",
-			children: r ?? i.textOf(t)
+			children: r ?? i.textOf(e)
 		})]
 	});
 }
-function V({ children: e }) {
-	let t = j(), n = i();
-	return !t.query || t.matches.length ? null : /* @__PURE__ */ O("li", {
+function V({ children: t }) {
+	let n = j(), r = e();
+	return !n.query || n.matches.length ? null : /* @__PURE__ */ O("li", {
 		className: "text-muted-foreground cursor-not-allowed px-3 py-2 text-sm",
-		children: e ?? n.noResults
+		children: t ?? r.noResults
 	});
 }
-function H({ onCreate: e, children: t }) {
-	let n = j(), r = i(), { create: a } = n;
-	return C(() => (a.current = e, () => {
+function H({ onCreate: t, children: n }) {
+	let r = j(), i = e(), { create: a } = r;
+	return C(() => (a.current = t, () => {
 		a.current = null;
-	}), [a, e]), !n.query || n.matches.length ? null : /* @__PURE__ */ O("li", {
+	}), [a, t]), !r.query || r.matches.length ? null : /* @__PURE__ */ O("li", {
 		role: "option",
 		"aria-selected": !1,
 		className: "hover:bg-muted cursor-pointer px-3 py-2 text-sm select-none",
 		onClick: () => {
-			e(n.query), n.setQuery("");
+			t(r.query), r.setQuery("");
 		},
-		children: (t ?? r.add)(n.query)
+		children: (n ?? i.add)(r.query)
 	});
 }
 //#endregion

package/dist/command-palette/index.js

@@ -1,13 +1,13 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMergedRefs as t } from "../utils/refs.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 { useMergedRefs as n } from "../utils/refs.js";
 import { useModal as r } from "../dialog/index.js";
 import { useEffect as i, useId as a, useMemo as o, useRef as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region packages/command-palette/index.tsx
 function d({ open: d, onOpenChange: p, items: m, placeholder: h, empty: g, label: _, className: v, ref: y, ...b }) {
-	let x = n(), S = h ?? x.search, C = g ?? x.noResults, w = _ ?? x.commands, T = s(null), E = t(T, y), D = s(null), O = s(null), k = a(), [A, j] = c(""), [M, N] = c(0);
+	let x = e(), S = h ?? x.search, C = g ?? x.noResults, w = _ ?? x.commands, T = s(null), E = n(T, y), D = s(null), O = s(null), k = a(), [A, j] = c(""), [M, N] = c(0);
 	r(T, d, D);
 	let [P, F] = c(d);
 	d !== P && (F(d), d && (j(""), N(0)));
@@ -34,7 +34,7 @@ function d({ open: d, onOpenChange: p, items: m, placeholder: h, empty: g, label
 		...b,
 		ref: E,
 		"aria-label": w,
-		className: e("zen__dialog zen__command-palette glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-hidden p-0", "mx-auto mt-[12dvh] mb-auto w-[36rem] max-w-[calc(100vw-2rem)] rounded-xl", "backdrop:bg-[color:var(--backdrop-scrim,oklch(0_0_0/0.5))] backdrop:backdrop-blur-sm pointer-coarse:backdrop:backdrop-blur-none", v),
+		className: t("zen__dialog zen__command-palette glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-hidden p-0", "mx-auto mt-[12dvh] mb-auto w-[36rem] max-w-[calc(100vw-2rem)] rounded-xl", "backdrop:bg-[color:var(--backdrop-scrim,oklch(0_0_0/0.5))] backdrop:backdrop-blur-sm pointer-coarse:backdrop:backdrop-blur-none", v),
 		onCancel: (e) => {
 			e.preventDefault(), p(!1);
 		},

package/dist/confirm-dialog/index.js

@@ -1,11 +1,11 @@
 "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, { DialogClose as r, DialogFooter as i } from "../dialog/index.js";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region packages/confirm-dialog/index.tsx
 function s({ open: s, onOpenChange: c, title: l, description: u, confirmLabel: d, cancelLabel: f, tone: p = "default", onConfirm: m, className: h, ...g }) {
-	let _ = t(), v = f ?? _.cancel;
+	let _ = e(), v = f ?? _.cancel;
 	return /* @__PURE__ */ a(n, {
 		...g,
 		role: "alertdialog",
@@ -13,7 +13,7 @@ function s({ open: s, onOpenChange: c, title: l, description: u, confirmLabel: d
 		onOpenChange: c,
 		title: l,
 		description: u,
-		className: e("w-[26rem]", h),
+		className: t("w-[26rem]", h),
 		children: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(r, {
 			variant: "outline",
 			autoFocus: !0,