@rinzai/zen 0.8.6 → 0.10.0

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

@@ -1,37 +1,39 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useEffect as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { followSectionLink as t } from "../utils/section-link.js";
+import { useEffect as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region packages/table-of-contents/index.tsx
-function a({ items: a, title: o = "On this page", className: s }) {
-	let [c, l] = n();
-	return t(() => {
+function o({ items: o, title: s = "On this page", className: c }) {
+	let [l, u] = r();
+	return n(() => {
 		if (typeof IntersectionObserver > "u") return;
-		let e = a.map((e) => document.getElementById(e.id)).filter((e) => !!e), t = /* @__PURE__ */ new Set(), n = new IntersectionObserver((e) => {
+		let e = o.map((e) => document.getElementById(e.id)).filter((e) => !!e), t = /* @__PURE__ */ new Set(), n = new IntersectionObserver((e) => {
 			for (let n of e) n.isIntersecting ? t.add(n.target.id) : t.delete(n.target.id);
-			let n = a.find((e) => t.has(e.id));
-			n && l(n.id);
+			let n = o.find((e) => t.has(e.id));
+			n && u(n.id);
 		}, { rootMargin: "0px 0px -65% 0px" });
 		return e.forEach((e) => n.observe(e)), () => n.disconnect();
-	}, [a]), a.length ? /* @__PURE__ */ i("nav", {
-		"aria-label": o,
-		className: e("zen__toc flex flex-col gap-3", s),
-		children: [/* @__PURE__ */ r("p", {
+	}, [o]), o.length ? /* @__PURE__ */ a("nav", {
+		"aria-label": s || "On this page",
+		className: e("zen__toc flex flex-col gap-3", c),
+		children: [s && /* @__PURE__ */ i("p", {
 			className: "text-muted-foreground text-2xs mt-0! tracking-widest uppercase",
-			children: o
-		}), /* @__PURE__ */ r("ul", {
+			children: s
+		}), /* @__PURE__ */ i("ul", {
 			className: "border-tint/[0.07] flex flex-col gap-2 border-l text-sm",
-			children: a.map((t) => /* @__PURE__ */ r("li", {
-				className: e("-ml-px", t.depth === 2 && "pl-3"),
-				children: /* @__PURE__ */ r("a", {
-					href: `#${t.id}`,
-					"aria-current": t.id === c ? "location" : void 0,
-					className: e("text-muted-foreground hover:text-foreground block border-l border-transparent pl-3 transition-colors", "aria-[current=location]:border-primary aria-[current=location]:text-foreground"),
-					children: t.label
+			children: o.map((n) => /* @__PURE__ */ i("li", {
+				className: e("-ml-px", n.depth === 2 && "pl-3"),
+				children: /* @__PURE__ */ i("a", {
+					href: `#${n.id}`,
+					onClick: t,
+					"aria-current": n.id === l ? "location" : void 0,
+					className: e("text-muted-foreground hover:text-foreground block border-l border-transparent pl-3 transition-colors pointer-coarse:py-1.5", "aria-[current=location]:border-primary aria-[current=location]:text-foreground"),
+					children: n.label
 				})
-			}, t.id))
+			}, n.id))
 		})]
 	}) : null;
 }
 //#endregion
-export { a as default };
+export { o as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tabs/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAqE,MAAM,OAAO,CAAC;AAgB1G,6GAA6G;AAC7G,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,YAAiB,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAetG;AAID;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,+BAiC5F;AAiCD,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,+BA0BnE;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,sCAgBpE;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,OAAO,CAAC;AAEnD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,OAAO,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tabs/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACH,cAAc,EASjB,MAAM,OAAO,CAAC;AAsBf,6GAA6G;AAC7G,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,YAAiB,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAuBtG;AAID;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,+BAiC5F;AAiCD,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,+BA0BnE;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,sCA6BpE;AA4DD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,OAAO,CAAC;AAEnD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,OAAO,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;CACjB"}

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/tag-input/index.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+/**
+ * A field of short values (tags, emails, labels): typing one and pressing
+ * Enter or a comma adds it, pasting a list adds each, Backspace in the empty
+ * field takes the last one back. Each is removed with its ×. Values are
+ * trimmed and kept once. Past about three rows the tags scroll, under a
+ * typing line that stays in view (a max-h-* class sets the field's height).
+ */
+export default function TagInput({ value: controlled, defaultValue, onValueChange, validate, removeLabel, className, disabled, ...rest }: TagInputProps): import('react').JSX.Element;
+export interface TagInputProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue'> {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Whether an entry may be added (e.g. looks like an email). */
+    validate?: (entry: string) => boolean;
+    /** The × button's label, for screen readers. */
+    removeLabel?: (tag: string) => string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/tag-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tag-input/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,cAAc,EAAoD,MAAM,OAAO,CAAC;AAEzG;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC7B,KAAK,EAAE,UAAU,EACjB,YAAiB,EACjB,aAAa,EACb,QAAQ,EACR,WAAsC,EACtC,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,aAAa,+BAgGf;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAC1F,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC"}

package/dist/tag-input/index.js

@@ -0,0 +1,61 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { FIELD as t } from "../utils/styles.js";
+import { useFieldProps as n } from "../field/index.js";
+import r from "../icons/micro/x-mark.js";
+import { useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region packages/tag-input/index.tsx
+function l({ value: l, defaultValue: u = [], onValueChange: d, validate: f, removeLabel: p = (e) => `Remove ${e}`, className: m, disabled: h, ...g }) {
+	let [_, v] = o(u), y = l ?? _, [b, x] = o(""), S = n(g), C = a(null), w = y.length;
+	i(() => {
+		let e = C.current;
+		e?.parentElement?.contains(document.activeElement) && (e.scrollTop = e.scrollHeight);
+	}, [w]);
+	let T = (e) => {
+		l === void 0 && v(e), d?.(e);
+	}, E = (e) => {
+		let t = [...y];
+		for (let n of e.map((e) => e.trim())) n && !t.includes(n) && (f?.(n) ?? !0) && t.push(n);
+		t.length !== y.length && T(t);
+	};
+	return /* @__PURE__ */ c("div", {
+		className: e("zen__tag-input", t, "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]", h && "cursor-not-allowed opacity-50", m),
+		onClick: (e) => e.currentTarget.querySelector("input")?.focus(),
+		children: [w > 0 && /* @__PURE__ */ s("div", {
+			ref: C,
+			className: "flex min-h-0 flex-wrap gap-1.5 overflow-y-auto",
+			children: y.map((e) => /* @__PURE__ */ c("span", {
+				className: "zen__tag bg-primary/12 text-foreground inline-flex items-center gap-1 rounded-md py-0.5 pr-1 pl-2 text-xs shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)]",
+				children: [e, /* @__PURE__ */ s("button", {
+					type: "button",
+					disabled: h,
+					"aria-label": p(e),
+					onClick: () => T(y.filter((t) => t !== e)),
+					className: "text-muted-foreground hover:text-foreground hover:bg-tint/10 focus-visible:ring-ring/50 touch-target grid size-4 cursor-pointer place-items-center rounded-sm outline-hidden focus-visible:ring-2",
+					children: /* @__PURE__ */ s(r, { className: "size-3" })
+				})]
+			}, e))
+		}), /* @__PURE__ */ s("input", {
+			...g,
+			...S,
+			disabled: h,
+			value: b,
+			onChange: (e) => x(e.target.value),
+			onKeyDown: (e) => {
+				g.onKeyDown?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && ((e.key === "Enter" || e.key === ",") && b.trim() ? (e.preventDefault(), E([b]), x("")) : e.key === "Backspace" && !b && y.length && (e.preventDefault(), x(y[y.length - 1]), T(y.slice(0, -1))));
+			},
+			onBlur: (e) => {
+				g.onBlur?.(e), b.trim() && (E([b]), x(""));
+			},
+			onPaste: (e) => {
+				g.onPaste?.(e);
+				let t = e.clipboardData.getData("text");
+				!e.defaultPrevented && /[,\n]/.test(t) && (e.preventDefault(), E(t.split(/[,\n]/)));
+			},
+			className: "h-7 w-full shrink-0 bg-transparent outline-hidden placeholder:text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"
+		})]
+	});
+}
+//#endregion
+export { l 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