@rinzai/zen 0.11.0 → 0.13.0

package/dist/combobox/index.js

@@ -1,163 +1,174 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { anchoredStyle as t, useAnchoredPopup as n } from "../utils/useAnchoredPopup.js";
-import r from "../badge/index.js";
-import i from "../button/index.js";
-import { CheckIcon as a } from "../utils/status-icons.js";
-import { useField as o } from "../field/index.js";
-import { PLACEHOLDER as s, POPUP as c, TRIGGER as l } from "../utils/styles.js";
-import { FieldChevron as u } from "../utils/field-chevron.js";
-import d from "../collapse/index.js";
-import f from "../icons/search.js";
-import p from "../icons/x-mark.js";
-import { InputGroupAddon as m, InputGroupInput as h } from "../input-group/index.js";
-import { useVirtualList as g } from "../utils/useVirtualList.js";
-import { createContext as _, useContext as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
-import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+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 a from "../badge/index.js";
+import o from "../button/index.js";
+import { CheckIcon as s } from "../utils/status-icons.js";
+import { useField as c } from "../field/index.js";
+import { FIELD_SIZE as l, PLACEHOLDER as u, POPUP as d, TRIGGER as f } from "../utils/styles.js";
+import { FormValue as p } from "../utils/form-value.js";
+import { FieldChevron as m } from "../utils/field-chevron.js";
+import h from "../collapse/index.js";
+import g from "../icons/search.js";
+import _ from "../icons/x-mark.js";
+import { InputGroupAddon as v, InputGroupInput as y } from "../input-group/index.js";
+import { useVirtualList as b } from "../utils/useVirtualList.js";
+import { createContext as x, useContext as S, useEffect as C, useMemo as w, useRef as T, useState as E } from "react";
+import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
 //#region packages/combobox/index.tsx
-var E = _(null), D = () => {
-	let e = v(E);
+var A = x(null), j = () => {
+	let e = S(A);
 	if (!e) throw Error("Combobox parts must be inside a Combobox");
 	return e;
 };
-function O(e) {
-	let { items: t, itemKey: r = (e) => e.key, itemText: i = (e) => e.text, filter: a = (e, t) => i(e).toLowerCase().includes(t.toLowerCase()), selectedItems: o = [], children: s } = e, c = e.multiple === !0, l = c ? e.value : e.value === null ? [] : [e.value], [u, d] = S(""), [f, p] = S(null), m = x(null), h = x(null), g = x(null), _ = x(35), v = b(() => u ? t.filter((e) => a(e, u)) : t, [
-		t,
-		u,
-		a
-	]), y = n({ onOpenChange: (e) => {
-		e || (p(null), d(""), y.popupRef.current?.contains(document.activeElement) && h.current?.focus());
-	} }), C = {
-		multiple: c,
-		keyOf: r,
-		textOf: i,
-		items: t,
-		selectedItems: o,
-		matches: v,
-		chosen: l,
-		toggle: (t) => {
-			if (e.multiple === !0) {
-				let n = e.value.includes(t);
-				e.onValueChange(n ? e.value.filter((e) => e !== t) : [...e.value, t]);
-			} else e.onValueChange(t), y.setOpen(!1);
+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,
+		g,
+		o
+	]), N = r({ onOpenChange: (e) => {
+		e || (y(null), _(""), N.popupRef.current?.contains(document.activeElement) && C.current?.focus());
+	} }), P = {
+		multiple: u,
+		keyOf: i,
+		textOf: a,
+		items: n,
+		selectedItems: s,
+		matches: M,
+		chosen: h,
+		toggle: (e) => {
+			if (u) {
+				let t = h.includes(e);
+				f(t ? h.filter((t) => t !== e) : [...h, e]);
+			} else f(e), N.setOpen(!1);
 		},
-		query: u,
-		setQuery: d,
-		active: f,
-		setActive: p,
-		create: m,
-		popup: y,
-		triggerRef: h,
-		listRef: g,
-		optionId: (e) => `${y.id}-option-${e}`,
-		itemHeight: _
+		query: g,
+		setQuery: _,
+		active: v,
+		setActive: y,
+		create: S,
+		popup: N,
+		triggerRef: C,
+		listRef: D,
+		optionId: (e) => `${N.id}-option-${e}`,
+		itemHeight: j,
+		listLabelledBy: b,
+		setListLabelledBy: x
 	};
-	return /* @__PURE__ */ w(E.Provider, {
-		value: C,
-		children: s
+	return /* @__PURE__ */ k(A.Provider, {
+		value: P,
+		children: [l, /* @__PURE__ */ O(p, {
+			name: c,
+			value: u ? h : h[0] ?? "",
+			onReset: m
+		})]
 	});
 }
-function k({ placeholder: t = "Select an Item", disabled: n, className: r, style: i, children: a, ...s }) {
-	let c = D(), { popup: d } = c, f = o(), p = x(!1), m = () => !n && d.setOpen(!0);
-	return /* @__PURE__ */ T("div", {
-		id: f?.id,
-		"aria-labelledby": s["aria-label"] ? void 0 : f?.labelId,
-		"aria-invalid": f?.["aria-invalid"],
-		...s,
-		"aria-describedby": e(f?.["aria-describedby"], s["aria-describedby"]).trim() || void 0,
-		ref: c.triggerRef,
+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;
+	C(() => b(y), [y, b]);
+	let x = T(!1), S = () => !n && 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,
+		ref: h.triggerRef,
 		role: "combobox",
 		tabIndex: n ? -1 : 0,
 		"aria-haspopup": "listbox",
-		"aria-expanded": d.open,
-		"aria-controls": d.id,
+		"aria-expanded": g.open,
+		"aria-controls": g.id,
 		"aria-disabled": n || void 0,
-		"data-popup-open": d.triggerProps["data-popup-open"],
-		"data-zen-anchor": d.triggerProps["data-zen-anchor"],
+		"data-popup-open": g.triggerProps["data-popup-open"],
+		"data-zen-anchor": g.triggerProps["data-zen-anchor"],
 		style: {
-			...d.triggerProps.style,
-			...i
+			...g.triggerProps.style,
+			...o
 		},
 		onPointerDown: (e) => {
-			s.onPointerDown?.(e), p.current = d.open;
+			u.onPointerDown?.(e), x.current = g.open;
 		},
 		onClick: (e) => {
-			s.onClick?.(e), e.preventDefault(), p.current ? d.setOpen(!1) : m(), p.current = !1;
+			u.onClick?.(e), e.preventDefault(), x.current ? g.setOpen(!1) : S(), x.current = !1;
 		},
 		onKeyDown: (e) => {
-			s.onKeyDown?.(e), [
+			u.onKeyDown?.(e), [
 				"Enter",
 				" ",
 				"ArrowDown"
-			].includes(e.key) && (e.preventDefault(), m());
+			].includes(e.key) && (e.preventDefault(), S());
 		},
-		className: e(l, "w-56 shrink-0", n ? "cursor-not-allowed opacity-50" : "cursor-pointer", d.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", r),
-		children: [/* @__PURE__ */ w("div", {
+		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),
+		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"),
-			children: a ?? /* @__PURE__ */ w(A, { placeholder: t })
-		}), /* @__PURE__ */ w(u, { open: d.open })]
+			children: s ?? /* @__PURE__ */ O(P, { placeholder: p })
+		}), /* @__PURE__ */ O(m, { open: g.open })]
 	});
 }
-function A({ placeholder: e }) {
-	let t = D(), n = new Map([...t.selectedItems, ...t.items].map((e) => [t.keyOf(e), e])), a = t.chosen.flatMap((e) => {
-		let r = n.has(e) ? t.textOf(n.get(e)) : void 0;
-		return r ? [{
+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 ? [{
 			key: e,
-			text: r
+			text: n
 		}] : [];
 	});
-	return a.length ? t.multiple ? /* @__PURE__ */ w(d, {
-		items: a.map((e) => e.text),
-		data: a,
+	return s.length ? t.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, n, a) => /* @__PURE__ */ T(r, {
-			className: "flex h-6 min-w-min gap-2 pr-1",
+		children: (e, r, i) => /* @__PURE__ */ k(a, {
+			className: "flex h-6 min-w-min gap-2 pe-1",
 			variant: "secondary",
-			children: [e, /* @__PURE__ */ w(i, {
-				"aria-label": `Remove ${e}`,
+			children: [e, /* @__PURE__ */ O(o, {
+				"aria-label": n.remove(e),
 				onClick: (e) => {
-					e.stopPropagation(), a && t.toggle(a.key);
+					e.stopPropagation(), i && t.toggle(i.key);
 				},
-				variant: "icon",
+				variant: "ghost",
 				size: "icon",
 				className: "group relative -top-px size-4 rounded-sm p-0.5",
-				children: /* @__PURE__ */ w(p, { className: "zen__combobox-remove-icon size-3 transition duration-300 group-hover:rotate-90" })
+				children: /* @__PURE__ */ O(_, { className: "zen__combobox-remove-icon size-3 transition duration-300 group-hover:rotate-90" })
 			})]
-		}, a?.key ?? n)
-	}) : /* @__PURE__ */ w(C, { children: a[0].text }) : /* @__PURE__ */ w("span", {
-		className: s,
+		}, i?.key ?? r)
+	}) : /* @__PURE__ */ O(D, { children: s[0].text }) : /* @__PURE__ */ O("span", {
+		className: u,
 		children: e
 	});
 }
-function j({ className: n, children: r }) {
-	let { popup: i } = D();
-	return /* @__PURE__ */ w("div", {
+function F({ className: t, children: r }) {
+	let { popup: i } = j();
+	return /* @__PURE__ */ O("div", {
 		...i.popupProps,
-		style: t(i.id, {
+		style: n(i.id, {
 			offset: 5,
 			width: "match"
 		}),
-		className: e("zen__popover", c, "overflow-visible p-0", n),
-		children: /* @__PURE__ */ w("div", {
+		className: e("zen__popover", d, "overflow-visible p-0", t),
+		children: /* @__PURE__ */ O("div", {
 			className: "divide-tint/10 flex w-full flex-col divide-y overflow-hidden rounded-xl",
 			children: r
 		})
 	});
 }
-function M({ placeholder: e = "Search", "aria-label": t = "Search options" }) {
-	let n = D(), r = x(null);
-	y(() => {
-		n.popup.open && r.current?.focus();
+function I({ placeholder: e, "aria-label": t }) {
+	let n = j(), r = i(), a = T(null);
+	C(() => {
+		n.popup.open && a.current?.focus();
 	}, [n.popup.open]);
-	let i = n.matches.map(n.keyOf);
-	return /* @__PURE__ */ T("div", {
+	let o = n.matches.map(n.keyOf);
+	return /* @__PURE__ */ k("div", {
 		className: "flex h-10 grow items-center gap-2 px-3",
-		children: [/* @__PURE__ */ w(m, { children: /* @__PURE__ */ w(f, {}) }), /* @__PURE__ */ w(h, {
-			ref: r,
-			placeholder: e,
-			"aria-label": t,
+		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,
@@ -165,38 +176,39 @@ function M({ placeholder: e = "Search", "aria-label": t = "Search options" }) {
 				n.setQuery(e.target.value), n.setActive(null);
 			},
 			onKeyDown: (e) => {
-				let t = n.active === null ? -1 : i.indexOf(n.active), r = (t) => {
-					if (e.preventDefault(), !i.length) return;
-					let r = i[(t + i.length) % i.length];
-					n.setActive(r), N(n.listRef.current, i.indexOf(r), n.itemHeight.current);
+				let t = n.active === null ? -1 : o.indexOf(n.active), r = (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);
 				};
-				e.key === "ArrowDown" ? r(t + 1) : e.key === "ArrowUp" ? r(t === -1 ? i.length - 1 : t - 1) : e.key === "Enter" && (e.preventDefault(), n.active === null ? !i.length && n.query && n.create.current && (n.create.current(n.query), n.setQuery("")) : n.toggle(n.active));
+				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));
 			}
 		})]
 	});
 }
-var N = (e, t, n) => {
+var L = (e, t, n) => {
 	if (!e || t < 0) return;
 	let r = t * n;
 	r < e.scrollTop ? e.scrollTop = r : r + n > e.scrollTop + e.clientHeight && (e.scrollTop = r + n - e.clientHeight);
-}, P = _(null);
-function F({ renderItem: e, itemHeight: t = 35, children: n }) {
-	let r = D();
+}, R = x(null);
+function z({ renderItem: e, itemHeight: t = 35, children: n }) {
+	let r = j();
 	r.itemHeight.current = t;
-	let i = g({
+	let i = b({
 		count: r.matches.length,
 		itemHeight: t,
 		scrollRef: r.listRef
 	});
-	return y(() => {
+	return C(() => {
 		r.listRef.current && (r.listRef.current.scrollTop = 0);
-	}, [r.query, r.listRef]), /* @__PURE__ */ T("ul", {
+	}, [r.query, r.listRef]), /* @__PURE__ */ k("ul", {
 		id: `${r.popup.id}-list`,
 		role: "listbox",
+		"aria-labelledby": r.listLabelledBy,
 		"aria-multiselectable": r.multiple || void 0,
 		className: "max-h-72 grow overflow-y-auto py-1 focus:ring-0 focus:outline-hidden",
 		ref: r.listRef,
-		children: [/* @__PURE__ */ w("div", {
+		children: [/* @__PURE__ */ O("div", {
 			style: {
 				height: `${i.totalSize}px`,
 				width: "100%",
@@ -204,61 +216,61 @@ function F({ renderItem: e, itemHeight: t = 35, children: n }) {
 			},
 			children: i.items.map((t) => {
 				let n = r.matches[t.index];
-				return /* @__PURE__ */ w(P.Provider, {
+				return /* @__PURE__ */ O(R.Provider, {
 					value: {
 						start: t.start,
 						size: t.size
 					},
-					children: e ? e(n) : /* @__PURE__ */ w(I, { item: n })
+					children: e ? e(n) : /* @__PURE__ */ O(B, { item: n })
 				}, r.keyOf(n));
 			})
 		}), n]
 	});
 }
-function I({ item: t, className: n, children: r }) {
-	let i = D(), o = v(P), s = i.keyOf(t), c = i.chosen.includes(s);
-	return /* @__PURE__ */ T("li", {
-		id: i.optionId(s),
+function B({ item: t, className: n, children: r }) {
+	let i = j(), a = S(R), o = i.keyOf(t), c = i.chosen.includes(o);
+	return /* @__PURE__ */ k("li", {
+		id: i.optionId(o),
 		role: "option",
 		"aria-selected": c,
-		"data-highlighted": i.active === s || void 0,
-		style: o ? {
-			height: `${o.size}px`,
-			transform: `translateY(${o.start}px)`
+		"data-highlighted": i.active === o || void 0,
+		style: a ? {
+			height: `${a.size}px`,
+			transform: `translateY(${a.start}px)`
 		} : void 0,
-		onMouseMove: () => i.active !== s && i.setActive(s),
-		onClick: () => i.toggle(s),
-		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", o && "absolute top-0 left-0", n),
-		children: [/* @__PURE__ */ w("span", {
+		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),
+		children: [/* @__PURE__ */ O("span", {
 			className: "text-primary col-start-1",
 			"aria-hidden": !0,
-			children: c && /* @__PURE__ */ w(a, {})
-		}), /* @__PURE__ */ w("span", {
+			children: c && /* @__PURE__ */ O(s, {})
+		}), /* @__PURE__ */ O("span", {
 			className: "col-start-2 truncate",
 			children: r ?? i.textOf(t)
 		})]
 	});
 }
-function L({ children: e = "No results found" }) {
-	let t = D();
-	return !t.query || t.matches.length ? null : /* @__PURE__ */ w("li", {
+function V({ children: e }) {
+	let t = j(), n = i();
+	return !t.query || t.matches.length ? null : /* @__PURE__ */ O("li", {
 		className: "text-muted-foreground cursor-not-allowed px-3 py-2 text-sm",
-		children: e
+		children: e ?? n.noResults
 	});
 }
-function R({ onCreate: e, children: t = (e) => `Add ${e}` }) {
-	let n = D(), { create: r } = n;
-	return y(() => (r.current = e, () => {
-		r.current = null;
-	}), [r, e]), !n.query || n.matches.length ? null : /* @__PURE__ */ w("li", {
+function H({ onCreate: e, children: t }) {
+	let n = j(), r = i(), { create: a } = n;
+	return C(() => (a.current = e, () => {
+		a.current = null;
+	}), [a, e]), !n.query || n.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("");
 		},
-		children: t(n.query)
+		children: (t ?? r.add)(n.query)
 	});
 }
 //#endregion
-export { R as ComboboxCreate, L as ComboboxEmpty, I as ComboboxItem, F as ComboboxList, j as ComboboxPopup, M as ComboboxSearch, k as ComboboxTrigger, O as default };
+export { H as ComboboxCreate, V as ComboboxEmpty, B as ComboboxItem, z as ComboboxList, F as ComboboxPopup, I as ComboboxSearch, N as ComboboxTrigger, M as default };

package/dist/command-palette/index.d.ts

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 /**
  * Search everything and act on it (pages, commands, records): a field over a
  * list that narrows as you type. Arrow keys move, Enter runs the item and
  * closes. Open it from a button, or anywhere with ⌘K / Ctrl+K
  * (useCommandPaletteShortcut).
  */
-export default function CommandPalette({ open, onOpenChange, items, placeholder, empty, label, className, }: CommandPaletteProps): import('react').JSX.Element;
+export default function CommandPalette({ open, onOpenChange, items, placeholder: placeholderProp, empty: emptyProp, label: labelProp, className, ref: refProp, ...rest }: CommandPaletteProps): import('react').JSX.Element;
 /** The items matching `query`: each of its words is in the label or keywords. Labels starting with it come first. */
 export declare function search(items: CommandItem[], query: string): CommandItem[];
 /** Calls `open` on ⌘K (Mac) or Ctrl+K, anywhere on the page. */
@@ -23,7 +23,8 @@ export interface CommandItem {
     hint?: ReactNode;
     onSelect: () => void;
 }
-export interface CommandPaletteProps {
+/** Other props (data-*, an id) go on the <dialog>. */
+export interface CommandPaletteProps extends Omit<ComponentProps<'dialog'>, 'open' | 'children'> {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     items: CommandItem[];

package/dist/command-palette/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/command-palette/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAA+C,MAAM,OAAO,CAAC;AAE9F;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAuB,EACvB,KAAoB,EACpB,KAAkB,EAClB,SAAS,GACZ,EAAE,mBAAmB,+BAoIrB;AAED,qHAAqH;AACrH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,CAUzE;AAED,gEAAgE;AAChE,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE,GAAG,SAAM,GAAG,IAAI,CAc3E;AAED,MAAM,WAAW,WAAW;IACxB,oDAAoD;IACpD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/command-palette/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAA+C,MAAM,OAAO,CAAC;AAE9G;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EAAE,eAAe,EAC5B,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,SAAS,EAChB,SAAS,EACT,GAAG,EAAE,OAAO,EACZ,GAAG,IAAI,EACV,EAAE,mBAAmB,+BA0IrB;AAED,qHAAqH;AACrH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,CAUzE;AAED,gEAAgE;AAChE,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE,GAAG,SAAM,GAAG,IAAI,CAc3E;AAED,MAAM,WAAW,WAAW;IACxB,oDAAoD;IACpD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,sDAAsD;AACtD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC5F,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/command-palette/index.js

@@ -1,88 +1,91 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useModal as t } from "../dialog/index.js";
-import { useEffect as n, useId as r, useMemo as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useMergedRefs as t } from "../utils/refs.js";
+import { useMessages as n } from "../locale-provider/index.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 l({ open: l, onOpenChange: d, items: f, placeholder: p = "Search…", empty: m = "No results", label: h = "Commands", className: g }) {
-	let _ = a(null), v = a(null), y = a(null), b = r(), [x, S] = o(""), [C, w] = o(0);
-	t(_, l, v);
-	let [T, E] = o(l);
-	l !== T && (E(l), l && (S(""), w(0)));
-	let D = i(() => u(f, x), [f, x]), O = i(() => {
+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);
+	r(T, d, D);
+	let [P, F] = c(d);
+	d !== P && (F(d), d && (j(""), N(0)));
+	let I = o(() => f(m, A), [m, A]), L = o(() => {
 		let e = /* @__PURE__ */ new Map();
-		return D.forEach((t, n) => {
+		return I.forEach((t, n) => {
 			let r = t.group ?? "";
 			e.set(r, [...e.get(r) ?? [], {
 				item: t,
 				index: n
 			}]);
 		}), e;
-	}, [D]), k = Math.min(C, D.length - 1);
-	n(() => {
-		y.current?.querySelector(`[data-index="${k}"]`)?.scrollIntoView({ block: "nearest" });
-	}, [k]);
-	let A = (e) => {
-		e && (d(!1), e.onSelect());
+	}, [I]), R = Math.min(M, I.length - 1);
+	i(() => {
+		O.current?.querySelector(`[data-index="${R}"]`)?.scrollIntoView({ block: "nearest" });
+	}, [R]);
+	let z = (e) => {
+		e && (p(!1), e.onSelect());
+	}, B = (e) => {
+		let t = I.length - 1, n = e.key === "ArrowDown" ? (R + 1) % (t + 1) : e.key === "ArrowUp" ? (R - 1 + t + 1) % (t + 1) : e.key === "Home" && e.ctrlKey ? 0 : e.key === "End" && e.ctrlKey ? t : null;
+		n !== null && I.length ? (e.preventDefault(), N(n)) : e.key === "Enter" && (e.preventDefault(), z(I[R]));
 	};
-	return /* @__PURE__ */ c("dialog", {
-		ref: _,
-		"aria-label": h,
-		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", g),
+	return /* @__PURE__ */ u("dialog", {
+		...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),
 		onCancel: (e) => {
-			e.preventDefault(), d(!1);
+			e.preventDefault(), p(!1);
 		},
-		onClick: (e) => e.target === e.currentTarget && d(!1),
-		children: [/* @__PURE__ */ s("input", {
-			ref: v,
+		onClick: (e) => e.target === e.currentTarget && p(!1),
+		children: [/* @__PURE__ */ l("input", {
+			ref: D,
 			role: "combobox",
 			"aria-expanded": !0,
-			"aria-controls": `${b}-list`,
-			"aria-activedescendant": D.length ? `${b}-${k}` : void 0,
+			"aria-controls": `${k}-list`,
+			"aria-activedescendant": I.length ? `${k}-${R}` : void 0,
 			"aria-autocomplete": "list",
-			"aria-label": h,
-			placeholder: p,
-			value: x,
+			"aria-label": w,
+			placeholder: S,
+			value: A,
 			onChange: (e) => {
-				S(e.target.value), w(0);
-			},
-			onKeyDown: (e) => {
-				let t = D.length - 1, n = e.key === "ArrowDown" ? (k + 1) % (t + 1) : e.key === "ArrowUp" ? (k - 1 + t + 1) % (t + 1) : e.key === "Home" && e.ctrlKey ? 0 : e.key === "End" && e.ctrlKey ? t : null;
-				n !== null && D.length ? (e.preventDefault(), w(n)) : e.key === "Enter" && (e.preventDefault(), A(D[k]));
+				j(e.target.value), N(0);
 			},
+			onKeyDown: B,
 			className: "border-tint/[0.07] h-14 w-full border-b bg-transparent px-5 text-base outline-hidden placeholder:text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"
-		}), /* @__PURE__ */ c("div", {
-			ref: y,
-			id: `${b}-list`,
+		}), /* @__PURE__ */ u("div", {
+			ref: O,
+			id: `${k}-list`,
 			role: "listbox",
-			"aria-label": h,
+			"aria-label": w,
 			className: "max-h-[min(24rem,60dvh)] overflow-y-auto p-2",
-			children: [!D.length && /* @__PURE__ */ s("p", {
+			children: [!I.length && /* @__PURE__ */ l("p", {
 				className: "text-muted-foreground my-0! px-3 py-8 text-center text-sm",
-				children: m
-			}), [...O].map(([e, t]) => /* @__PURE__ */ c("div", {
+				children: C
+			}), [...L].map(([e, t]) => /* @__PURE__ */ u("div", {
 				role: "group",
 				"aria-label": e || void 0,
 				className: "not-first:mt-2",
-				children: [e && /* @__PURE__ */ s("div", {
+				children: [e && /* @__PURE__ */ l("div", {
 					"aria-hidden": !0,
 					className: "text-muted-foreground text-2xs px-3 pt-2 pb-1 tracking-widest uppercase",
 					children: e
-				}), t.map(({ item: e, index: t }) => /* @__PURE__ */ c("div", {
-					id: `${b}-${t}`,
+				}), t.map(({ item: e, index: t }) => /* @__PURE__ */ u("div", {
+					id: `${k}-${t}`,
 					"data-index": t,
 					role: "option",
-					"aria-selected": t === k,
-					onPointerMove: () => t !== k && w(t),
-					onClick: () => A(e),
+					"aria-selected": t === R,
+					onPointerMove: () => t !== R && N(t),
+					onClick: () => z(e),
 					className: "text-muted-foreground aria-selected:bg-primary/15 aria-selected:text-foreground flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm aria-selected:shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)] [&_svg]:size-4 [&_svg]:shrink-0",
 					children: [
 						e.icon,
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ l("span", {
 							className: "min-w-0 flex-1 truncate",
 							children: e.label
 						}),
-						e.hint && /* @__PURE__ */ s("span", {
+						e.hint && /* @__PURE__ */ l("span", {
 							className: "text-muted-foreground text-xs",
 							children: e.hint
 						})
@@ -92,7 +95,7 @@ function l({ open: l, onOpenChange: d, items: f, placeholder: p = "Search…", e
 		})]
 	});
 }
-function u(e, t) {
+function f(e, t) {
 	let n = t.toLowerCase().split(/\s+/).filter(Boolean);
 	if (!n.length) return e;
 	let r = t.trim().toLowerCase(), i = e.filter((e) => {
@@ -105,16 +108,16 @@ function u(e, t) {
 	}), a = (e) => +!e.label.toLowerCase().startsWith(r);
 	return i.sort((e, t) => a(e) - a(t));
 }
-function d(e, t = "k") {
-	let r = a(e);
-	n(() => {
-		r.current = e;
-	}), n(() => {
+function p(e, t = "k") {
+	let n = s(e);
+	i(() => {
+		n.current = e;
+	}), i(() => {
 		let e = (e) => {
-			e.key.toLowerCase() !== t || !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey || (e.preventDefault(), r.current());
+			e.key.toLowerCase() !== t || !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey || (e.preventDefault(), n.current());
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [t]);
 }
 //#endregion
-export { l as default, u as search, d as useCommandPaletteShortcut };
+export { d as default, f as search, p as useCommandPaletteShortcut };