haze-ui 1.31.0 → 1.32.0

package/README.md

@@ -257,6 +257,38 @@ re-deriving file names — the mapping changes in lockstep with the build.
 The official [`haze-ui-vite`](https://www.npmjs.com/package/haze-ui-vite)
 plugin (above) is the reference consumer of this data.
 
+#### Styling & overriding (the `@layer haze` contract)
+
+All shipped CSS lives inside **`@layer haze`**, so your own *unlayered*
+styles beat every library rule regardless of source order or
+specificity — no `!important`, no selector wrestling:
+
+```css
+/* your stylesheet, plain CSS — always wins over the library */
+[data-slot='button'] {
+  letter-spacing: 0.02em;
+}
+```
+
+Every element a component renders carries a stable **`data-slot`**
+attribute (`data-slot='button'`, `'label'`, `'panel'`, `'menu-item'`,
+…). It is the official override surface: the attribute set is enforced
+by a coverage test, so it cannot silently drift between releases. The
+cascade is intentional — prefer, in order:
+
+1. **tokens** — `var(--haze-color-primary)` and friends re-derive whole
+   interaction-state families at runtime; per-component
+   `--haze-button-*` variables retheme one family;
+2. **`ConfigProvider` defaults** — app-wide per-component prop defaults
+   (and `classNames` where the component exposes slots);
+3. **`data-slot` CSS targeting** — structural overrides (the escape
+   hatch above);
+4. **`className` / `classNames`** — per-instance overrides, reserved
+   for one-offs.
+
+If your own framework ships layered styles too, declare order explicitly
+(e.g. `@layer haze, app;`) to keep the last word.
+
 ### Server Components (Next.js App Router)
 
 Interactive modules in `dist/` carry the `'use client'` directive,

package/dist/components/Button/Button.js

@@ -1,22 +1,40 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { useConfigDefaults as t } from "../ConfigProvider/useConfigDefaults.js";
-import { base as n, sizes as r, squareSizes as i, variants as a } from "./styles.js";
-import { jsx as o } from "react/jsx-runtime";
+import { useBusyPressable as t } from "../../hooks/useBusyPressable.js";
+import n from "../Spinner/Spinner.js";
+import { useConfigDefaults as r } from "../ConfigProvider/useConfigDefaults.js";
+import { base as i, label as a, sizes as o, squareSizes as s, variants as c } from "./styles.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/lib/components/Button/Button.tsx
-function s({ variant: s = "solid", size: c, square: l = !1, className: u, ...d }) {
-	let f = t("Button"), p = c ?? f.size ?? "md", m = l ? i[p] : r[p];
-	return /* @__PURE__ */ o("button", {
-		type: "button",
-		"data-slot": "button",
-		...d,
+function f({ variant: f = "solid", size: p, square: m = !1, loading: h = !1, as: g, className: _, children: v, disabled: y, ...b }) {
+	let x = r("Button"), S = p ?? x.size ?? "md", C = m ? s[S] : o[S], w = !!h, T = t(w, y), E = typeof h == "object" ? h.icon : void 0, D = typeof h == "object" ? h.text : void 0, O = g ?? "button", k = g === void 0 || g === "button";
+	return /* @__PURE__ */ u(O, {
+		...k ? {
+			type: "button",
+			disabled: T.disabled
+		} : { "aria-disabled": T.disabled || void 0 },
+		"data-slot": k ? "button" : "button-link",
+		"data-loading": w || void 0,
+		"aria-busy": T["aria-busy"],
+		...b,
 		className: e([
-			n,
-			a[s],
-			m,
-			u
-		])
+			i,
+			c[f],
+			C,
+			!k && "haze-styles__link",
+			w && "haze-styles__loading",
+			_
+		]),
+		children: w ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("span", {
+			"data-slot": "label",
+			className: e([a]),
+			children: D === void 0 ? v : D
+		}), /* @__PURE__ */ u("span", {
+			"data-slot": "indicator",
+			"aria-hidden": !0,
+			children: E ?? /* @__PURE__ */ u(n, { size: "sm" })
+		})] }) : v
 	});
 }
 //#endregion
-export { s as default };
+export { f as default };

package/dist/components/Button/ButtonLink.js

@@ -1,26 +1,17 @@
-
 "use client";
-import { classnames as e } from "../../utils/classnames.js";
-import { useConfigDefaults as t } from "../ConfigProvider/useConfigDefaults.js";
-import { base as n, sizes as r, squareSizes as i, variants as a } from "./styles.js";
-/* empty css                     */
-import { forwardRef as o } from "react";
-import { jsx as s } from "react/jsx-runtime";
+import { useConfigDefaults as e } from "../ConfigProvider/useConfigDefaults.js";
+import t from "./Button.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/lib/components/Button/ButtonLink.tsx
-var c = "haze-ButtonLink__link", l = o(function({ variant: o = "solid", size: l, square: u = !1, className: d, ...f }, p) {
-	let m = t("ButtonLink"), h = l ?? m.size ?? "md", g = u ? i[h] : r[h];
-	return /* @__PURE__ */ s("a", {
-		ref: p,
-		"data-slot": "button-link",
-		...f,
-		className: e([
-			n,
-			a[o],
-			g,
-			c,
-			d
-		])
+var i = n(function({ size: n, ...i }, a) {
+	let o = e("ButtonLink"), s = n ?? o.size;
+	return /* @__PURE__ */ r(t, {
+		as: "a",
+		ref: a,
+		size: s,
+		...i
 	});
 });
 //#endregion
-export { l as default };
+export { i as default };

package/dist/components/Button/styles.js

@@ -14,6 +14,6 @@ var e = "haze-styles__base", t = {
 	sm: a,
 	md: o,
 	lg: s
-};
+}, u = "haze-styles__label", d = "haze-styles__link", f = "haze-styles__loading";
 //#endregion
-export { e as base, i as sizeLg, r as sizeMd, n as sizeSm, c as sizes, s as squareLg, o as squareMd, l as squareSizes, a as squareSm, t as variants };
+export { e as base, u as label, d as link, f as loading, i as sizeLg, r as sizeMd, n as sizeSm, c as sizes, s as squareLg, o as squareMd, l as squareSizes, a as squareSm, t as variants };

package/dist/components/Cascader/Cascader.js

@@ -1,11 +1,11 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { mergeRefs as t } from "../../utils/refs.js";
-import { getDirection as n } from "../../utils/direction.js";
-import { useStrings as r } from "../LocaleProvider/useStrings.js";
-import { FloatingPanel as i, useFloating as a } from "../../utils/floating.js";
-import o from "../Spinner/Spinner.js";
+import { getDirection as t } from "../../utils/direction.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import r from "../Spinner/Spinner.js";
+import { mergeRefs as i } from "../../utils/refs.js";
+import { FloatingPanel as a, useFloating as o } from "../../utils/floating.js";
 import ee from "../VirtualList/VirtualList.js";
 import { useFocusScope as te } from "../../utils/focus-scope.js";
 /* empty css                   */
@@ -41,7 +41,7 @@ function g(e) {
 	return e ? Array.from(e.querySelectorAll(m)) : [];
 }
 function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect: Ne = !1, expandTrigger: Pe = "click", onSearch: y, loading: b = !1, virtualized: x, className: Fe, ref: S, ...Ie }) {
-	let Le = r("cascader"), C = r("select"), [w, T] = p(!1, !1), E = ae(v), [D, O] = p(oe(E ? v : void 0, se((e) => je?.(e))), E ? [] : v ?? []), [k, A] = u([]), [j, M] = u(null), N = y !== void 0, [P, Re] = u(""), F = x !== void 0 && x !== !1, I = typeof x == "object" ? x : void 0, L = I?.itemHeight ?? Ce, ze = I?.overscan, R = re(), z = l(null), Be = s((e) => t(z, S)(e), [z, S]), B = l(null), V = l(null), H = l(/* @__PURE__ */ new Map()), U = l(!1), W = a({
+	let Le = n("cascader"), C = n("select"), [w, T] = p(!1, !1), E = ae(v), [D, O] = p(oe(E ? v : void 0, se((e) => je?.(e))), E ? [] : v ?? []), [k, A] = u([]), [j, M] = u(null), N = y !== void 0, [P, Re] = u(""), F = x !== void 0 && x !== !1, I = typeof x == "object" ? x : void 0, L = I?.itemHeight ?? Ce, ze = I?.overscan, R = re(), z = l(null), Be = s((e) => i(z, S)(e), [z, S]), B = l(null), V = l(null), H = l(/* @__PURE__ */ new Map()), U = l(!1), W = o({
 		open: w,
 		setOpen: T,
 		triggerRef: z,
@@ -148,9 +148,9 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 	}, Ge = (e) => {
 		!w && (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), T(!0));
 	}, Ke = (e) => {
-		let t = B.current;
-		if (!t) return;
-		let r = (document.activeElement instanceof HTMLElement ? document.activeElement : null)?.closest(m) ?? void 0, i = r ? Number(r.dataset.level) : 0, a = n(t) === "rtl" ? "ArrowLeft" : "ArrowRight", o = a === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+		let n = B.current;
+		if (!n) return;
+		let r = (document.activeElement instanceof HTMLElement ? document.activeElement : null)?.closest(m) ?? void 0, i = r ? Number(r.dataset.level) : 0, a = t(n) === "rtl" ? "ArrowLeft" : "ArrowRight", o = a === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
 		switch (e.key) {
 			case "ArrowDown":
 			case "ArrowUp": {
@@ -252,7 +252,7 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 	}, n)), $ = b ? /* @__PURE__ */ f("div", {
 		"data-slot": "loading",
 		className: e(ve),
-		children: [/* @__PURE__ */ d(o, { size: "sm" }), /* @__PURE__ */ d("span", { children: C.loading })]
+		children: [/* @__PURE__ */ d(r, { size: "sm" }), /* @__PURE__ */ d("span", { children: C.loading })]
 	}) : N && _.length === 0 ? /* @__PURE__ */ d("div", {
 		"data-slot": "empty",
 		className: e(ye),
@@ -291,7 +291,7 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 				className: e(fe),
 				children: /* @__PURE__ */ d(Ae, {})
 			})]
-		}), /* @__PURE__ */ d(i, {
+		}), /* @__PURE__ */ d(a, {
 			ref: Ve,
 			behavior: W,
 			placement: "bottom",

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,8 +1,8 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { mergeRefs as t } from "../../utils/refs.js";
-import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { mergeRefs as n } from "../../utils/refs.js";
 import { FloatingPanel as r, useFloating as i } from "../../utils/floating.js";
 import { cssColor as a, parseColor as o, rgbHexKey as s } from "./color-math.js";
 import { checkerboard as c, panelVisuals as l, swatchFill as u, trigger as d } from "./color-picker-styles.js";
@@ -14,7 +14,7 @@ import { useControl as b } from "react-use-control";
 //#region src/lib/components/ColorPicker/ColorPicker.tsx
 var x = 10, S = "haze-ColorPicker__container";
 function C({ value: C, onChange: w, open: T, inline: E = !1, format: D = "hex", allowAlpha: O = !1, presets: k, recent: A = !1, className: j, "aria-label": M, ref: N }) {
-	let P = n("colorPicker"), [F, I] = b(C, "#000000"), [L, R] = b(T, !1), z = M ?? P.pickColor, B = o(F)?.rgb ?? {
+	let P = t("colorPicker"), [F, I] = b(C, "#000000"), [L, R] = b(T, !1), z = M ?? P.pickColor, B = o(F)?.rgb ?? {
 		r: 0,
 		g: 0,
 		b: 0
@@ -39,7 +39,7 @@ function C({ value: C, onChange: w, open: T, inline: E = !1, format: D = "hex",
 		allowAlpha: O,
 		presets: k,
 		recentColors: A ? H : void 0
-	}), K = g(null), q = g(null), J = p((e) => t(K, N)(e), [N]), Y = h(), X = i({
+	}), K = g(null), q = g(null), J = p((e) => n(K, N)(e), [N]), Y = h(), X = i({
 		open: L,
 		setOpen: R,
 		triggerRef: K,

package/dist/components/Combobox/Combobox.js

@@ -1,22 +1,23 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { mergeRefs as t } from "../../utils/refs.js";
-import { formatString as n } from "../LocaleProvider/locale.js";
-import { useStrings as r } from "../LocaleProvider/useStrings.js";
-import { FloatingPanel as ee, useFloating as te } from "../../utils/floating.js";
-import ne from "../Chip/Chip.js";
-import re from "../Spinner/Spinner.js";
-import ie from "../VirtualList/VirtualList.js";
-import ae from "./ComboboxGroup.js";
-import oe from "./ComboboxOption.js";
+import { formatString as t } from "../LocaleProvider/locale.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import r from "../Spinner/Spinner.js";
+import { useConfigDefaults as ee } from "../ConfigProvider/useConfigDefaults.js";
+import { mergeRefs as te } from "../../utils/refs.js";
+import { FloatingPanel as ne, useFloating as re } from "../../utils/floating.js";
+import ie from "../Chip/Chip.js";
+import ae from "../VirtualList/VirtualList.js";
+import oe from "./ComboboxGroup.js";
+import se from "./ComboboxOption.js";
 /* empty css                   */
-import { useCallback as se, useEffect as i, useId as ce, useMemo as le, useRef as a, useState as o } from "react";
+import { useCallback as ce, useEffect as i, useId as le, useMemo as ue, useRef as a, useState as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 import { useControl as u } from "react-use-control";
 //#region src/lib/components/Combobox/Combobox.tsx
-var ue = "haze-Combobox__wrapper", de = "haze-Combobox__input", fe = "haze-Combobox__multiBox", pe = "haze-Combobox__multiInput", d = "haze-Combobox__matchMark", f = "haze-Combobox__stateRow", me = "haze-Combobox__groupHeadingText", he = "haze-Combobox__listbox", ge = "haze-Combobox__listboxVirtual", _e = 200, ve = 37, ye = "haze-Combobox__virtualRow";
-function be(t, n) {
+var de = "haze-Combobox__wrapper", fe = "haze-Combobox__input", pe = "haze-Combobox__multiBox", me = "haze-Combobox__multiInput", d = "haze-Combobox__matchMark", f = "haze-Combobox__stateRow", he = "haze-Combobox__groupHeadingText", ge = "haze-Combobox__listbox", _e = "haze-Combobox__listboxVirtual", ve = 200, ye = 37, be = "haze-Combobox__virtualRow";
+function xe(t, n) {
 	if (n === "") return t;
 	let r = t.toLowerCase().indexOf(n.toLowerCase());
 	return r < 0 ? t : /* @__PURE__ */ l(s, { children: [
@@ -29,28 +30,31 @@ function be(t, n) {
 		t.slice(r + n.length)
 	] });
 }
-function p({ value: s, open: d, options: p, multiple: m = !1, onValuesChange: h, creatable: xe = !1, onCreate: Se, onSearch: g, loading: _ = !1, empty: Ce, highlightMatches: we = !1, maxHeight: v, placeholder: Te, virtualThreshold: y = 100, virtualized: b, className: Ee, ref: x }) {
-	let S = r("combobox"), [C, w] = u(s, m ? [] : ""), [T, De] = o([]), [E, D] = o(""), [O, k] = u(d, !1), [A, j] = o(-1), [Oe, ke] = o(E), M = ce(), N = a(null), Ae = se((e) => t(N, x)(e), [N, x]), P = a(null), F = a(null), I = a(null), L = a(null), R = te({
-		open: O,
-		setOpen: k,
-		triggerRef: m ? P : N,
-		panelRef: F,
+function p({ value: s, open: d, options: p, multiple: m = !1, onValuesChange: h, creatable: Se = !1, onCreate: Ce, onSearch: g, loading: _ = !1, empty: we, highlightMatches: Te = !1, maxHeight: v, placeholder: Ee, virtualThreshold: y = 100, virtualized: b, className: De, classNames: x, ref: S }) {
+	let C = ee("Combobox"), w = C.classNames ? {
+		...C.classNames,
+		...x
+	} : x, T = n("combobox"), [E, D] = u(s, m ? [] : ""), [O, Oe] = o([]), [k, A] = o(""), [j, M] = u(d, !1), [N, P] = o(-1), [ke, Ae] = o(k), F = le(), I = a(null), je = ce((e) => te(I, S)(e), [I, S]), L = a(null), R = a(null), Me = a(null), z = a(null), B = re({
+		open: j,
+		setOpen: M,
+		triggerRef: m ? L : I,
+		panelRef: R,
 		animated: !0
-	}), z = Array.isArray(C) ? C : [], B = le(() => {
-		if (T.length === 0) return p;
-		let e = new Set(p.map((e) => e.value)), t = T.filter((t) => !e.has(t)).map((e) => ({
+	}), V = Array.isArray(E) ? E : [], H = ue(() => {
+		if (O.length === 0) return p;
+		let e = new Set(p.map((e) => e.value)), t = O.filter((t) => !e.has(t)).map((e) => ({
 			value: e,
 			label: e
 		}));
 		return t.length > 0 ? [...p, ...t] : p;
-	}, [p, T]), V = g ? B : B.filter((e) => e.label.toLowerCase().includes(E.toLowerCase())), H = xe && !_ && E.trim() !== "" && V.length === 0, U = E.trim(), je = n(S.create, { query: U }), W = H ? [{
-		value: U,
-		label: U
-	}, ...V] : V, G = typeof b == "object" ? b : void 0, K = (b === void 0 ? void 0 : !!b) ?? (y > 0 && W.length > y), q = G?.itemHeight ?? ve, Me = G?.overscan, J = (e) => `${M}-option-${e}`, Ne = O && W[A] ? J(A) : void 0, Y = [];
-	for (let e = 0; e < W.length; e++) {
-		let t = W[e];
+	}, [p, O]), U = g ? H : H.filter((e) => e.label.toLowerCase().includes(k.toLowerCase())), W = Se && !_ && k.trim() !== "" && U.length === 0, G = k.trim(), Ne = t(T.create, { query: G }), K = W ? [{
+		value: G,
+		label: G
+	}, ...U] : U, q = typeof b == "object" ? b : void 0, J = (b === void 0 ? void 0 : !!b) ?? (y > 0 && K.length > y), Y = q?.itemHeight ?? ye, Pe = q?.overscan, X = (e) => `${F}-option-${e}`, Fe = j && K[N] ? X(N) : void 0, Z = [];
+	for (let e = 0; e < K.length; e++) {
+		let t = K[e];
 		if (t === void 0) continue;
-		let n = Y[Y.length - 1];
+		let n = Z[Z.length - 1];
 		if (t.group !== void 0 && n?.label === t.group) {
 			n.rows.push({
 				option: t,
@@ -58,7 +62,7 @@ function p({ value: s, open: d, options: p, multiple: m = !1, onValuesChange: h,
 			});
 			continue;
 		}
-		Y.push(t.group === void 0 ? {
+		Z.push(t.group === void 0 ? {
 			key: `row-${t.value}`,
 			label: void 0,
 			rows: [{
@@ -74,150 +78,155 @@ function p({ value: s, open: d, options: p, multiple: m = !1, onValuesChange: h,
 			}]
 		});
 	}
-	let Pe = Y.some((e) => e.label !== void 0);
+	let Ie = Z.some((e) => e.label !== void 0);
 	i(() => {
-		if (!R.shown || A < 0) return;
-		if (K) {
-			I.current?.scrollToIndex(A, "auto");
+		if (!B.shown || N < 0) return;
+		if (J) {
+			Me.current?.scrollToIndex(N, "auto");
 			return;
 		}
-		let e = L.current;
+		let e = z.current;
 		e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
 	}, [
-		K,
-		R.shown,
-		A
+		J,
+		B.shown,
+		N
 	]);
-	let X = a(g);
+	let Q = a(g);
 	i(() => {
-		X.current = g;
+		Q.current = g;
 	}, [g]);
-	let Z = a(E);
+	let Le = a(k);
 	i(() => {
-		Z.current !== E && (Z.current = E, X.current?.(E));
-	}, [E]), E !== Oe && (ke(E), j(-1));
-	let Fe = (e) => m ? z.includes(e) : C === e, Ie = (e) => B.find((t) => t.value === e)?.label ?? e, Le = (e, t) => {
-		let n = t ?? B.find((t) => t.value === e)?.label ?? e;
+		Le.current !== k && (Le.current = k, Q.current?.(k));
+	}, [k]), k !== ke && (Ae(k), P(-1));
+	let Re = (e) => m ? V.includes(e) : E === e, ze = (e) => H.find((t) => t.value === e)?.label ?? e, Be = (e, t) => {
+		let n = t ?? H.find((t) => t.value === e)?.label ?? e;
 		if (m) {
-			let t = z.includes(e) ? z.filter((t) => t !== e) : [...z, e];
-			w(t), h?.(t), D("");
-		} else w(e), h?.(e), D(n), k(!1);
-		N.current?.focus();
-	}, Re = () => {
-		Se?.(U), De((e) => e.includes(U) ? e : [...e, U]), Le(U, U);
-	}, ze = (e) => {
-		if (H && e === U) {
-			Re();
+			let t = V.includes(e) ? V.filter((t) => t !== e) : [...V, e];
+			D(t), h?.(t), A("");
+		} else D(e), h?.(e), A(n), M(!1);
+		I.current?.focus();
+	}, Ve = () => {
+		Ce?.(G), Oe((e) => e.includes(G) ? e : [...e, G]), Be(G, G);
+	}, He = (e) => {
+		if (W && e === G) {
+			Ve();
 			return;
 		}
-		Le(e);
-	}, Be = (e) => {
-		if (e.key === "ArrowDown") e.preventDefault(), k(!0), j((e) => Math.min(e + 1, W.length - 1));
-		else if (e.key === "ArrowUp") e.preventDefault(), k(!0), j((e) => Math.max(e - 1, 0));
-		else if (e.key === "Enter" && A >= 0 && W[A]) e.preventDefault(), ze(W[A].value);
-		else if (e.key === "Escape") k(!1);
-		else if (e.key === "Backspace" && m && E === "" && z.length > 0) {
+		Be(e);
+	}, Ue = (e) => {
+		if (e.key === "ArrowDown") e.preventDefault(), M(!0), P((e) => Math.min(e + 1, K.length - 1));
+		else if (e.key === "ArrowUp") e.preventDefault(), M(!0), P((e) => Math.max(e - 1, 0));
+		else if (e.key === "Enter" && N >= 0 && K[N]) e.preventDefault(), He(K[N].value);
+		else if (e.key === "Escape") M(!1);
+		else if (e.key === "Backspace" && m && k === "" && V.length > 0) {
 			e.preventDefault();
-			let t = z.slice(0, -1);
-			w(t), h?.(t);
+			let t = V.slice(0, -1);
+			D(t), h?.(t);
 		}
-	}, Q = (e, t, n) => /* @__PURE__ */ c(oe, {
-		ref: !n && t === A ? L : void 0,
-		value: e.value,
-		id: J(t),
-		setSize: W.length,
-		posInSet: t + 1,
-		highlighted: t === A,
-		selected: Fe(e.value),
-		onSelect: ze,
-		className: n ? ye : void 0,
-		children: H && t === 0 ? je : we ? be(e.label, E) : e.label
-	}, e.value), $ = /* @__PURE__ */ c("input", {
-		ref: Ae,
+	}, $ = (t, n, r) => /* @__PURE__ */ c(se, {
+		ref: !r && n === N ? z : void 0,
+		value: t.value,
+		id: X(n),
+		setSize: K.length,
+		posInSet: n + 1,
+		highlighted: n === N,
+		selected: Re(t.value),
+		onSelect: He,
+		className: e([r && be, w?.item]),
+		children: W && n === 0 ? Ne : Te ? xe(t.label, k) : t.label
+	}, t.value), We = /* @__PURE__ */ c("input", {
+		ref: je,
 		"data-slot": "input",
 		role: "combobox",
-		style: m ? void 0 : R.triggerStyle,
-		"aria-expanded": O,
-		"aria-controls": M,
+		style: m ? void 0 : B.triggerStyle,
+		"aria-expanded": j,
+		"aria-controls": F,
 		"aria-autocomplete": "list",
-		"aria-activedescendant": Ne,
+		"aria-activedescendant": Fe,
 		"aria-busy": _ || void 0,
-		className: m ? pe : de,
-		value: E,
-		placeholder: Te,
+		value: k,
+		placeholder: Ee,
 		onChange: (e) => {
-			D(e.target.value), k(!0);
+			A(e.target.value), M(!0);
 		},
-		onPointerDown: m ? void 0 : R.onTriggerPointerDown,
-		onClick: m ? void 0 : R.onTriggerClick,
-		onKeyDown: Be
+		onPointerDown: m ? void 0 : B.onTriggerPointerDown,
+		onClick: m ? void 0 : B.onTriggerClick,
+		onKeyDown: Ue,
+		className: e([m ? me : fe, w?.input])
 	});
 	return /* @__PURE__ */ l("div", {
-		className: e([ue, Ee]),
+		"data-slot": "combobox",
+		className: e([
+			de,
+			De,
+			w?.root
+		]),
 		children: [m ? /* @__PURE__ */ l("div", {
-			ref: P,
+			ref: L,
 			"data-slot": "trigger",
-			style: R.triggerStyle,
-			onPointerDown: R.onTriggerPointerDown,
+			style: B.triggerStyle,
+			onPointerDown: B.onTriggerPointerDown,
 			onClick: () => {
-				R.onTriggerClick(), N.current?.focus();
+				B.onTriggerClick(), I.current?.focus();
 			},
-			className: e(fe),
-			children: [z.map((e) => /* @__PURE__ */ c("span", {
+			className: e(pe),
+			children: [V.map((e) => /* @__PURE__ */ c("span", {
 				"data-slot": "item",
 				onClick: (e) => e.stopPropagation(),
-				children: /* @__PURE__ */ c(ne, {
+				children: /* @__PURE__ */ c(ie, {
 					color: "primary",
 					onClose: () => {
-						let t = z.filter((t) => t !== e);
-						w(t), h?.(t);
+						let t = V.filter((t) => t !== e);
+						D(t), h?.(t);
 					},
-					children: Ie(e)
+					children: ze(e)
 				})
-			}, e)), $]
-		}) : $, /* @__PURE__ */ c(ee, {
-			ref: F,
-			behavior: R,
+			}, e)), We]
+		}) : We, /* @__PURE__ */ c(ne, {
+			ref: R,
+			behavior: B,
 			placement: "bottom-span",
-			id: M,
+			id: F,
 			role: "listbox",
 			"aria-multiselectable": m ? "true" : void 0,
-			visualClass: K ? ge : he,
-			style: v !== void 0 && !K ? { maxHeight: `${v}px` } : void 0,
+			visualClass: J ? _e : ge,
+			style: v !== void 0 && !J ? { maxHeight: `${v}px` } : void 0,
 			children: _ ? /* @__PURE__ */ c("div", {
 				role: "option",
 				"data-slot": "loading",
 				"aria-selected": !1,
 				"aria-disabled": "true",
 				className: e([f]),
-				children: /* @__PURE__ */ c(re, { size: "sm" })
-			}) : W.length === 0 ? /* @__PURE__ */ c("div", {
+				children: /* @__PURE__ */ c(r, { size: "sm" })
+			}) : K.length === 0 ? /* @__PURE__ */ c("div", {
 				role: "option",
 				"data-slot": "empty",
 				"aria-selected": !1,
 				"aria-disabled": "true",
-				className: e([f]),
-				children: Ce ?? S.noResults
-			}) : K ? /* @__PURE__ */ c(ie, {
-				ref: I,
+				className: e([f, w?.empty]),
+				children: we ?? T.noResults
+			}) : J ? /* @__PURE__ */ c(ae, {
+				ref: Me,
 				"data-virtualized": !0,
-				items: W,
-				height: Math.min(v ?? _e, W.length * q),
-				itemHeight: q,
-				overscan: Me,
-				groups: Pe ? Y.filter((e) => e.label !== void 0).map((t) => ({
+				items: K,
+				height: Math.min(v ?? ve, K.length * Y),
+				itemHeight: Y,
+				overscan: Pe,
+				groups: Ie ? Z.filter((e) => e.label !== void 0).map((t) => ({
 					startIndex: t.rows[0]?.index ?? 0,
 					key: t.key,
 					render: () => /* @__PURE__ */ c("div", {
 						"data-slot": "group-label",
-						className: e([me]),
+						className: e([he]),
 						children: t.label
 					})
 				})) : void 0,
-				renderItem: (e, t) => Q(e, t, !0)
-			}) : Y.flatMap((e) => e.label === void 0 ? e.rows.map(({ option: e, index: t }) => Q(e, t, !1)) : [/* @__PURE__ */ c(ae, {
+				renderItem: (e, t) => $(e, t, !0)
+			}) : Z.flatMap((e) => e.label === void 0 ? e.rows.map(({ option: e, index: t }) => $(e, t, !1)) : [/* @__PURE__ */ c(oe, {
 				label: e.label,
-				children: e.rows.map(({ option: e, index: t }) => Q(e, t, !1))
+				children: e.rows.map(({ option: e, index: t }) => $(e, t, !1))
 			}, e.key)])
 		})]
 	});

package/dist/components/Command/Command.js

@@ -1,8 +1,8 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { mergeRefs as t } from "../../utils/refs.js";
-import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { mergeRefs as n } from "../../utils/refs.js";
 import { getEnabledMenuItems as r, useMenuKeyboard as i, useRovingTabindex as a } from "../../utils/menuKeyboard.js";
 import o from "../Kbd/Kbd.js";
 import { collectCommandItems as s, commandItemMatches as c } from "./command-filter.js";
@@ -47,13 +47,13 @@ function S({ query: t, shouldFilter: n = !0, onItemSelect: r, children: i, class
 	});
 }
 var C = "haze-Command__inputStyle";
-function w({ placeholder: n, className: i, ref: a }) {
+function w({ placeholder: t, className: i, ref: a }) {
 	let { query: o, setQuery: s, inputRef: c, listRef: l } = b();
 	return /* @__PURE__ */ h("input", {
-		ref: t(c, a),
+		ref: n(c, a),
 		"data-slot": "input",
 		type: "text",
-		placeholder: n,
+		placeholder: t,
 		value: o,
 		onChange: (e) => s(e.target.value),
 		onKeyDown: (e) => {
@@ -66,8 +66,8 @@ function w({ placeholder: n, className: i, ref: a }) {
 	});
 }
 var T = "haze-Command__listStyle", E = "haze-Command__emptyStyle";
-function D({ children: t, empty: r, className: o }) {
-	let { inputRef: l, listRef: u, listId: d, shouldFilter: f, query: p } = b(), m = n("command");
+function D({ children: n, empty: r, className: o }) {
+	let { inputRef: l, listRef: u, listId: d, shouldFilter: f, query: p } = b(), m = t("command");
 	a({
 		menuRef: u,
 		active: !0,
@@ -77,7 +77,7 @@ function D({ children: t, empty: r, className: o }) {
 		menuRef: u,
 		selector: v,
 		onClose: () => l.current?.focus()
-	}), y = s(t, M), x = f && y.length > 0 && !y.some((e) => c(e.props, p));
+	}), y = s(n, M), x = f && y.length > 0 && !y.some((e) => c(e.props, p));
 	return /* @__PURE__ */ g("div", {
 		ref: u,
 		"data-slot": "list",
@@ -85,7 +85,7 @@ function D({ children: t, empty: r, className: o }) {
 		id: d,
 		onKeyDown: _,
 		className: e([T, o]),
-		children: [t, x && /* @__PURE__ */ h("div", {
+		children: [n, x && /* @__PURE__ */ h("div", {
 			"data-slot": "empty",
 			role: "option",
 			"aria-selected": !1,