haze-ui 1.26.0 → 1.28.0

package/dist/components/ColorPicker/ColorPicker.js

@@ -3,12 +3,13 @@ import e from "./ColorPickerCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/ColorPicker/ColorPicker.tsx
-function r({ value: r, presets: i, onChange: a, className: o }) {
-	let [s, c] = n(r, "#000000");
+function r({ value: r, presets: i, onChange: a, className: o, ref: s }) {
+	let [c, l] = n(r, "#000000");
 	return /* @__PURE__ */ t(e, {
-		value: s,
+		ref: s,
+		value: c,
 		onChange: (e) => {
-			c(e), a?.(e);
+			l(e), a?.(e);
 		},
 		presets: i,
 		className: o

package/dist/components/ColorPicker/ColorPickerCore.js

@@ -6,22 +6,23 @@ import { useStrings as t } from "../LocaleProvider/useStrings.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/ColorPicker/ColorPickerCore.tsx
 var i = "haze-ColorPickerCore__container", a = "haze-ColorPickerCore__previewRow", o = "haze-ColorPickerCore__colorInput", s = "haze-ColorPickerCore__textInput", c = "haze-ColorPickerCore__presetsRow", l = "haze-ColorPickerCore__presetBtn", u = "haze-ColorPickerCore__activePreset";
-function d({ value: d, onChange: f, presets: p, className: m }) {
-	let h = t("colorPicker");
+function d({ value: d, onChange: f, presets: p, className: m, ref: h }) {
+	let g = t("colorPicker");
 	return /* @__PURE__ */ r("div", {
 		className: e([i, m]),
 		children: [/* @__PURE__ */ r("div", {
 			className: e([a]),
 			children: [/* @__PURE__ */ n("input", {
+				ref: h,
 				type: "color",
 				value: d,
-				"aria-label": h.pickColor,
+				"aria-label": g.pickColor,
 				onChange: (e) => f(e.target.value),
 				className: e([o])
 			}), /* @__PURE__ */ n("input", {
 				type: "text",
 				value: d,
-				"aria-label": h.hexColor,
+				"aria-label": g.hexColor,
 				onChange: (e) => f(e.target.value),
 				className: e([s])
 			})]

package/dist/components/Combobox/Combobox.js

@@ -1,92 +1,219 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
-import r from "../VirtualList/VirtualList.js";
-import i from "./ComboboxOption.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";
 /* empty css                   */
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useEffect as s, useId as c, useRef as l, useState as u } from "react";
-import { useControl as d } from "react-use-control";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as se, useEffect as s, useId as ce, useMemo as le, useRef as c, useState as l } from "react";
+import { useControl as u } from "react-use-control";
 //#region src/lib/components/Combobox/Combobox.tsx
-var f = "haze-Combobox__wrapper", p = "haze-Combobox__input", m = "haze-Combobox__listbox", h = "haze-Combobox__listboxVirtual", g = 200, _ = 37, v = "haze-Combobox__virtualRow";
-function y({ value: y, open: b, options: x, placeholder: S, virtualThreshold: C = 100, className: w }) {
-	let [T, E] = d(y, ""), [D, O] = u(""), [k, A] = d(b, !1), [j, M] = u(-1), [N, P] = u(D), F = c(), I = l(null), L = l(null), R = l(null), z = n({
-		open: k,
-		setOpen: A,
-		triggerRef: I,
-		panelRef: L,
+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) {
+	if (n === "") return t;
+	let r = t.toLowerCase().indexOf(n.toLowerCase());
+	return r < 0 ? t : /* @__PURE__ */ o(i, { children: [
+		t.slice(0, r),
+		/* @__PURE__ */ a("mark", {
+			className: e([d]),
+			children: t.slice(r, r + n.length)
+		}),
+		t.slice(r + n.length)
+	] });
+}
+function p({ value: i, 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(i, m ? [] : ""), [T, De] = l([]), [E, D] = l(""), [O, k] = u(d, !1), [A, j] = l(-1), [Oe, ke] = l(E), M = ce(), N = c(null), Ae = se((e) => t(N, x)(e), [N, x]), P = c(null), F = c(null), I = c(null), L = c(null), R = te({
+		open: O,
+		setOpen: k,
+		triggerRef: m ? P : N,
+		panelRef: F,
 		animated: !0
-	}), B = x.filter((e) => e.label.toLowerCase().includes(D.toLowerCase())), V = C > 0 && B.length > C, H = (e) => `${F}-option-${e}`, U = k && B[j] ? H(j) : void 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) => ({
+			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];
+		if (t === void 0) continue;
+		let n = Y[Y.length - 1];
+		if (t.group !== void 0 && n?.label === t.group) {
+			n.rows.push({
+				option: t,
+				index: e
+			});
+			continue;
+		}
+		Y.push(t.group === void 0 ? {
+			key: `row-${t.value}`,
+			label: void 0,
+			rows: [{
+				option: t,
+				index: e
+			}]
+		} : {
+			key: `group-${t.group}`,
+			label: t.group,
+			rows: [{
+				option: t,
+				index: e
+			}]
+		});
+	}
+	let Pe = Y.some((e) => e.label !== void 0);
 	s(() => {
-		!V || !z.shown || j < 0 || R.current?.scrollToIndex(j, "auto");
+		if (!R.shown || A < 0) return;
+		if (K) {
+			I.current?.scrollToIndex(A, "auto");
+			return;
+		}
+		let e = L.current;
+		e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
 	}, [
-		V,
-		z.shown,
-		j
-	]), D !== N && (P(D), M(-1));
-	let W = (e) => {
-		E(e);
-		let t = x.find((t) => t.value === e)?.label ?? e;
-		O(t), A(!1), I.current?.focus();
-	};
+		K,
+		R.shown,
+		A
+	]);
+	let X = c(g);
+	s(() => {
+		X.current = g;
+	}, [g]);
+	let Z = c(E);
+	s(() => {
+		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;
+		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();
+			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) {
+			e.preventDefault();
+			let t = z.slice(0, -1);
+			w(t), h?.(t);
+		}
+	}, Q = (e, t, n) => /* @__PURE__ */ a(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__ */ a("input", {
+		ref: Ae,
+		role: "combobox",
+		style: m ? void 0 : R.triggerStyle,
+		"aria-expanded": O,
+		"aria-controls": M,
+		"aria-autocomplete": "list",
+		"aria-activedescendant": Ne,
+		"aria-busy": _ || void 0,
+		className: m ? pe : de,
+		value: E,
+		placeholder: Te,
+		onChange: (e) => {
+			D(e.target.value), k(!0);
+		},
+		onPointerDown: m ? void 0 : R.onTriggerPointerDown,
+		onClick: m ? void 0 : R.onTriggerClick,
+		onKeyDown: Be
+	});
 	return /* @__PURE__ */ o("div", {
-		className: e([f, w]),
-		children: [/* @__PURE__ */ a("input", {
-			ref: I,
-			role: "combobox",
-			style: z.triggerStyle,
-			"aria-expanded": k,
-			"aria-controls": F,
-			"aria-autocomplete": "list",
-			"aria-activedescendant": U,
-			className: p,
-			value: D,
-			placeholder: S,
-			onChange: (e) => {
-				O(e.target.value), A(!0);
+		className: e([ue, Ee]),
+		children: [m ? /* @__PURE__ */ o("div", {
+			ref: P,
+			style: R.triggerStyle,
+			onPointerDown: R.onTriggerPointerDown,
+			onClick: () => {
+				R.onTriggerClick(), N.current?.focus();
 			},
-			onPointerDown: z.onTriggerPointerDown,
-			onClick: z.onTriggerClick,
-			onKeyDown: (e) => {
-				e.key === "ArrowDown" ? (e.preventDefault(), A(!0), M((e) => Math.min(e + 1, B.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), A(!0), M((e) => Math.max(e - 1, 0))) : e.key === "Enter" && j >= 0 && B[j] ? (e.preventDefault(), W(B[j].value)) : e.key === "Escape" && A(!1);
-			}
-		}), /* @__PURE__ */ a(t, {
-			ref: L,
-			behavior: z,
+			className: e(fe),
+			children: [z.map((e) => /* @__PURE__ */ a("span", {
+				onClick: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ a(ne, {
+					color: "primary",
+					onClose: () => {
+						let t = z.filter((t) => t !== e);
+						w(t), h?.(t);
+					},
+					children: Ie(e)
+				})
+			}, e)), $]
+		}) : $, /* @__PURE__ */ a(ee, {
+			ref: F,
+			behavior: R,
 			placement: "bottom-span",
-			id: F,
+			id: M,
 			role: "listbox",
-			visualClass: V ? h : m,
-			children: V ? /* @__PURE__ */ a(r, {
-				ref: R,
+			"aria-multiselectable": m ? "true" : void 0,
+			visualClass: K ? ge : he,
+			style: v !== void 0 && !K ? { maxHeight: `${v}px` } : void 0,
+			children: _ ? /* @__PURE__ */ a("div", {
+				role: "option",
+				"aria-selected": !1,
+				"aria-disabled": "true",
+				className: e([f]),
+				children: /* @__PURE__ */ a(re, { size: "sm" })
+			}) : W.length === 0 ? /* @__PURE__ */ a("div", {
+				role: "option",
+				"aria-selected": !1,
+				"aria-disabled": "true",
+				className: e([f]),
+				children: Ce ?? S.noResults
+			}) : K ? /* @__PURE__ */ a(ie, {
+				ref: I,
 				"data-virtualized": !0,
-				items: B,
-				height: g,
-				itemHeight: _,
-				renderItem: (e, t) => /* @__PURE__ */ a(i, {
-					value: e.value,
-					id: H(t),
-					setSize: B.length,
-					posInSet: t + 1,
-					highlighted: t === j,
-					selected: e.value === T,
-					onSelect: W,
-					className: v,
-					children: e.label
-				})
-			}) : B.map((e, t) => /* @__PURE__ */ a(i, {
-				value: e.value,
-				id: H(t),
-				setSize: B.length,
-				posInSet: t + 1,
-				highlighted: t === j,
-				selected: e.value === T,
-				onSelect: W,
-				children: e.label
-			}, e.value))
+				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) => ({
+					startIndex: t.rows[0]?.index ?? 0,
+					key: t.key,
+					render: () => /* @__PURE__ */ a("div", {
+						className: e([me]),
+						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__ */ a(ae, {
+				label: e.label,
+				children: e.rows.map(({ option: e, index: t }) => Q(e, t, !1))
+			}, e.key)])
 		})]
 	});
 }
 //#endregion
-export { y as default };
+export { p as default };

package/dist/components/Combobox/ComboboxGroup.js

@@ -0,0 +1,23 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                        */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useId as r } from "react";
+//#region src/lib/components/Combobox/ComboboxGroup.tsx
+var i = "haze-ComboboxGroup__groupHeading";
+function a({ label: a, className: o, children: s }) {
+	let c = r();
+	return /* @__PURE__ */ n("div", {
+		role: "group",
+		"aria-labelledby": c,
+		className: e([o]),
+		children: [/* @__PURE__ */ t("div", {
+			id: c,
+			className: e([i]),
+			children: a
+		}), s]
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/Combobox/ComboboxOption.js

@@ -5,21 +5,22 @@ import { classnames as e } from "../../utils/classnames.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/lib/components/Combobox/ComboboxOption.tsx
 var n = "haze-ComboboxOption__option", r = "haze-ComboboxOption__highlightedStyle", i = "haze-ComboboxOption__selectedStyle";
-function a({ value: a, highlighted: o = !1, selected: s = !1, id: c, setSize: l, posInSet: u, onSelect: d, className: f, children: p }) {
+function a({ value: a, highlighted: o = !1, selected: s = !1, id: c, ref: l, setSize: u, posInSet: d, onSelect: f, className: p, children: m }) {
 	return /* @__PURE__ */ t("div", {
+		ref: l,
 		role: "option",
 		id: c,
 		"aria-selected": s || o,
-		"aria-setsize": l,
-		"aria-posinset": u,
-		onClick: () => d?.(a),
+		"aria-setsize": u,
+		"aria-posinset": d,
+		onClick: () => f?.(a),
 		className: e([
 			n,
 			o && r,
 			s && i,
-			f
+			p
 		]),
-		children: p
+		children: m
 	});
 }
 //#endregion

package/dist/components/Combobox/index.js

@@ -1,4 +1,5 @@
 "use client";
-import e from "./ComboboxOption.js";
-import t from "./Combobox.js";
-export { t as Combobox, e as ComboboxOption };
+import e from "./ComboboxGroup.js";
+import t from "./ComboboxOption.js";
+import n from "./Combobox.js";
+export { n as Combobox, e as ComboboxGroup, t as ComboboxOption };

package/dist/components/Command/Command.js

@@ -1,95 +1,138 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { getEnabledMenuItems as t, useMenuKeyboard as n, useRovingTabindex as r } from "../../utils/menuKeyboard.js";
+import { mergeRefs as t } from "../../utils/refs.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.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";
 /* empty css                  */
-import { jsx as i } from "react/jsx-runtime";
-import { createContext as a, useContext as o, useId as s, useMemo as c, useRef as l } from "react";
-import { useControl as u } from "react-use-control";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Children as d, createContext as f, useContext as p, useId as m, useMemo as h, useRef as g } from "react";
+import { useControl as _ } from "react-use-control";
 //#region src/lib/components/Command/Command.tsx
-var d = "[role=\"option\"]", f = a(void 0);
-function p() {
-	let e = o(f);
+var v = "[role=\"option\"]", y = f(void 0);
+function b() {
+	let e = p(y);
 	if (!e) throw Error("Command sub-components must be used within <Command>");
 	return e;
 }
-var m = "haze-Command__base";
-function h({ query: t, children: n, className: r }) {
-	let [a, o] = u(t, ""), d = l(null), p = l(null), h = s(), g = c(() => ({
-		query: a,
-		setQuery: o,
-		inputRef: d,
-		listRef: p,
-		listId: h
+var x = "haze-Command__base";
+function S({ query: t, shouldFilter: n = !0, onItemSelect: r, children: i, className: a }) {
+	let [o, s] = _(t, ""), c = g(null), u = g(null), d = m(), f = h(() => ({
+		query: o,
+		setQuery: s,
+		shouldFilter: n,
+		onItemSelect: r,
+		inputRef: c,
+		listRef: u,
+		listId: d
 	}), [
-		a,
 		o,
-		h
+		s,
+		n,
+		r,
+		d
 	]);
-	return /* @__PURE__ */ i(f.Provider, {
-		value: g,
-		children: i("div", {
+	return /* @__PURE__ */ l(y.Provider, {
+		value: f,
+		children: l("div", {
 			role: "combobox",
 			"aria-expanded": !0,
-			"aria-controls": h,
-			className: e([m, r]),
-			children: n
+			"aria-controls": d,
+			className: e([x, a]),
+			children: i
 		})
 	});
 }
-var g = "haze-Command__inputStyle";
-function _({ placeholder: n, className: r }) {
-	let { query: a, setQuery: o, inputRef: s, listRef: c } = p();
-	return /* @__PURE__ */ i("input", {
-		ref: s,
+var C = "haze-Command__inputStyle";
+function w({ placeholder: n, className: i, ref: a }) {
+	let { query: o, setQuery: s, inputRef: c, listRef: u } = b();
+	return /* @__PURE__ */ l("input", {
+		ref: t(c, a),
 		type: "text",
 		placeholder: n,
-		value: a,
-		onChange: (e) => o(e.target.value),
+		value: o,
+		onChange: (e) => s(e.target.value),
 		onKeyDown: (e) => {
 			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
 			e.preventDefault();
-			let n = t(c.current, d);
-			(e.key === "ArrowDown" ? n[0] : n[n.length - 1])?.focus();
+			let t = r(u.current, v);
+			(e.key === "ArrowDown" ? t[0] : t[t.length - 1])?.focus();
 		},
-		className: e([g, r])
+		className: e([C, i])
 	});
 }
-var v = "haze-Command__listStyle";
-function y({ children: t, className: a }) {
-	let { inputRef: o, listRef: s, listId: c } = p();
-	r({
-		menuRef: s,
+var T = "haze-Command__listStyle", E = "haze-Command__emptyStyle";
+function D({ children: t, empty: r, className: o }) {
+	let { inputRef: d, listRef: f, listId: p, shouldFilter: m, query: h } = b(), g = n("command");
+	a({
+		menuRef: f,
 		active: !0,
-		selector: d
+		selector: v
 	});
-	let l = n({
-		menuRef: s,
-		selector: d,
-		onClose: () => o.current?.focus()
-	});
-	return /* @__PURE__ */ i("div", {
-		ref: s,
+	let _ = i({
+		menuRef: f,
+		selector: v,
+		onClose: () => d.current?.focus()
+	}), y = s(t, M), x = m && y.length > 0 && !y.some((e) => c(e.props, h));
+	return /* @__PURE__ */ u("div", {
+		ref: f,
 		role: "listbox",
-		id: c,
-		onKeyDown: l,
-		className: e([v, a]),
-		children: t
+		id: p,
+		onKeyDown: _,
+		className: e([T, o]),
+		children: [t, x && /* @__PURE__ */ l("div", {
+			role: "option",
+			"aria-selected": !1,
+			"aria-disabled": "true",
+			className: e([E]),
+			children: r ?? g.noResults
+		})]
 	});
 }
-var b = "haze-Command__itemStyle";
-function x({ children: t, className: n, onSelect: r }) {
-	let { query: a } = p();
-	return a && !(typeof t == "string" ? t : "").toLowerCase().includes(a.toLowerCase()) ? null : /* @__PURE__ */ i("div", {
+var O = "haze-Command__groupHeading";
+function k({ heading: t, children: n, className: r }) {
+	let { shouldFilter: i, query: a } = b(), o = m(), f = s(n, M);
+	return (f.length === 0 ? d.count(n) > 0 : !i || f.some((e) => c(e.props, a))) ? /* @__PURE__ */ u("div", {
+		role: "group",
+		"aria-labelledby": t === void 0 ? void 0 : o,
+		className: e([r]),
+		children: [t !== void 0 && /* @__PURE__ */ l("div", {
+			id: o,
+			className: e([O]),
+			children: t
+		}), n]
+	}) : null;
+}
+var A = "haze-Command__itemStyle", j = "haze-Command__itemWithShortcut";
+function M({ children: t, value: n, keywords: r, shortcut: i, className: a, onSelect: s }) {
+	let { shouldFilter: d, query: f, onItemSelect: p } = b();
+	if (d && !c({
+		value: n,
+		keywords: r,
+		children: t
+	}, f)) return null;
+	let m = () => {
+		s?.(), p?.();
+	};
+	return /* @__PURE__ */ u("div", {
 		role: "option",
 		tabIndex: -1,
-		onClick: r,
+		onClick: m,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), m());
 		},
-		className: e([b, n]),
-		children: t
+		className: e([
+			A,
+			i !== void 0 && j,
+			a
+		]),
+		children: [t, i !== void 0 && /* @__PURE__ */ l(o, {
+			size: "sm",
+			children: i
+		})]
 	});
 }
 //#endregion
-export { _ as CommandInput, x as CommandItem, y as CommandList, h as default };
+export { k as CommandGroup, w as CommandInput, M as CommandItem, D as CommandList, S as default };

package/dist/components/Command/CommandDialog.js

@@ -0,0 +1,48 @@
+
+"use client";
+import e from "../Dialog/Dialog.js";
+import t, { CommandInput as n } from "./Command.js";
+import { useHotkeys as r } from "../../hooks/useHotkeys.js";
+/* empty css                        */
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as o, useEffect as s, useRef as c } from "react";
+import { useControl as l } from "react-use-control";
+//#region src/lib/components/Command/CommandDialog.tsx
+var u = "haze-CommandDialog__panel", d = "haze-CommandDialog__panelTitle", f = "haze-CommandDialog__palette";
+function p({ open: p, onOpenChange: m, hotkey: h, title: g, placeholder: _, children: v, className: y }) {
+	let [b, x, S] = l(p, !1), C = c(null), w = o(() => {
+		let e = !b;
+		x(e), m?.(e);
+	}, [
+		b,
+		x,
+		m
+	]), T = o(() => {
+		x(!1), m?.(!1);
+	}, [x, m]);
+	return r(h === void 0 ? {} : { [h]: w }, {
+		enabled: h !== void 0,
+		allowInInput: !0
+	}), s(() => {
+		b && C.current?.focus();
+	}, [b]), /* @__PURE__ */ i(e, {
+		open: S,
+		onClose: () => m?.(!1),
+		title: g,
+		classNames: {
+			root: u,
+			header: d
+		},
+		className: y,
+		children: a(t, {
+			className: f,
+			onItemSelect: T,
+			children: [/* @__PURE__ */ i(n, {
+				ref: C,
+				placeholder: _
+			}), v]
+		})
+	});
+}
+//#endregion
+export { p as default };