iryx-ui 0.12.0 → 0.14.0

package/dist/components/Combobox.vue_vue_type_script_setup_true_lang.js

@@ -2,11 +2,11 @@ import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
 import { useFormField as n } from "../composables/form.js";
 import { comboboxTheme as ee } from "../theme/combobox.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, vShow as te, withCtx as y, withDirectives as b } from "vue";
-import { ArrowDown01Icon as x, Tick02Icon as S } from "@hugeicons/core-free-icons";
-import { ComboboxAnchor as ne, ComboboxContent as re, ComboboxEmpty as ie, ComboboxGroup as ae, ComboboxInput as oe, ComboboxItem as C, ComboboxItemIndicator as w, ComboboxLabel as se, ComboboxPortal as T, ComboboxRoot as E, ComboboxTrigger as D, ComboboxViewport as O, ComboboxVirtualizer as k, useFilter as A, useForwardPropsEmits as j } from "reka-ui";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, vShow as b, watch as x, withCtx as S, withDirectives as te, withModifiers as ne } from "vue";
+import { ArrowDown01Icon as re, Cancel01Icon as C, Tick02Icon as w } from "@hugeicons/core-free-icons";
+import { ComboboxAnchor as T, ComboboxCancel as ie, ComboboxContent as ae, ComboboxEmpty as oe, ComboboxGroup as se, ComboboxInput as ce, ComboboxItem as E, ComboboxItemIndicator as D, ComboboxLabel as le, ComboboxPortal as ue, ComboboxRoot as de, ComboboxTrigger as fe, ComboboxViewport as pe, ComboboxVirtualizer as me, useFilter as he, useForwardPropsEmits as ge } from "reka-ui";
 //#region src/components/Combobox.vue?vue&type=script&setup=true&lang.ts
-var M = /*@__PURE__*/ u({
+var _e = ["aria-label", "onClick"], O = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "Combobox",
 	props: {
@@ -18,7 +18,20 @@ var M = /*@__PURE__*/ u({
 			default: void 0
 		},
 		id: {},
+		multiple: {
+			type: Boolean,
+			default: void 0
+		},
 		emptyText: { default: "No results found." },
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		clearLabel: { default: "Clear" },
+		removeLabel: {
+			type: Function,
+			default: (e) => `Remove ${e}`
+		},
 		create: {
 			type: Boolean,
 			default: void 0
@@ -55,7 +68,6 @@ var M = /*@__PURE__*/ u({
 		resetModelValueOnClear: { type: Boolean },
 		modelValue: {},
 		defaultValue: {},
-		multiple: { type: Boolean },
 		dir: {},
 		disabled: {
 			type: Boolean,
@@ -74,128 +86,185 @@ var M = /*@__PURE__*/ u({
 		"update:open",
 		"create"
 	],
-	setup(u, { emit: M }) {
-		let N = u, P = M, F = j(i(() => {
-			let { items: e, placeholder: t, size: n, invalid: ee, id: r, emptyText: i, create: a, createLabel: o, virtual: s, estimateSize: c, overscan: l, unstyled: u, class: d, ui: f, ...p } = N;
-			return p;
-		}), P);
-		function I(e) {
+	setup(d, { emit: O }) {
+		let k = d, A = O, j = h(k.modelValue ?? k.defaultValue);
+		x(() => k.modelValue, (e) => {
+			e !== void 0 && (j.value = e);
+		});
+		function M(e) {
+			j.value = e, A("update:modelValue", e);
+		}
+		let N = i(() => {
+			if (!k.clearable || k.disabled) return !1;
+			let e = j.value;
+			return Array.isArray(e) ? e.length > 0 : e != null && e !== "";
+		}), P = ge(i(() => {
+			let { items: e, placeholder: t, size: n, invalid: ee, id: r, emptyText: i, clearable: a, clearLabel: o, removeLabel: s, create: c, createLabel: l, virtual: u, estimateSize: d, overscan: f, unstyled: p, class: m, ui: h, defaultValue: g, modelValue: _, ...v } = k;
+			return {
+				...v,
+				modelValue: j.value
+			};
+		}), A);
+		function F(e) {
 			return typeof e == "string" ? {
 				label: e,
 				value: e
 			} : e;
 		}
-		function L(e) {
+		function I(e) {
 			return typeof e != "string" && "items" in e;
 		}
-		let R = i(() => {
-			let e = N.items ?? [];
-			return e.some(L) ? e.map((e) => L(e) ? e : {
+		let L = i(() => {
+			let e = k.items ?? [];
+			return e.some(I) ? e.map((e) => I(e) ? e : {
 				label: "",
 				items: [e]
 			}) : void 0;
-		}), z = i(() => (N.items ?? []).flatMap((e) => L(e) ? e.items.map(I) : [I(e)])), B = i(() => !!N.virtual), V = m(""), H = m("");
-		function U(e) {
-			H.value = e.target.value;
+		}), R = i(() => (k.items ?? []).flatMap((e) => I(e) ? e.items.map(F) : [F(e)])), z = i(() => !!k.virtual), B = h(""), V = h("");
+		function ve(e) {
+			V.value = e.target.value;
 		}
-		let { contains: W } = A({ sensitivity: "base" }), G = i(() => {
-			let e = H.value.trim();
-			return e ? z.value.filter((t) => W(t.label, e)) : z.value;
-		});
-		function ce(e) {
-			let t = (e) => z.value.find((t) => t.value === e)?.label ?? String(e ?? "");
-			return Array.isArray(e) ? e.map(t).join(", ") : e == null || e === "" ? "" : t(e);
+		let { contains: ye } = he({ sensitivity: "base" }), H = i(() => {
+			let e = V.value.trim();
+			return e ? R.value.filter((t) => ye(t.label, e)) : R.value;
+		}), U = i(() => {
+			let e = j.value;
+			return Array.isArray(e) ? e.map((e) => R.value.find((t) => t.value === e) ?? {
+				label: String(e),
+				value: String(e)
+			}) : [];
+		}), W = i(() => !!k.multiple && U.value.length > 0);
+		function G(e) {
+			let t = j.value;
+			Array.isArray(t) && M(t.filter((t) => t !== e));
 		}
-		function le(e) {
+		function be(e) {
+			e.key !== "Backspace" || !W.value || e.target.value === "" && (e.preventDefault(), G(U.value[U.value.length - 1].value));
+		}
+		function xe(e) {
+			let t = (e) => R.value.find((t) => t.value === e)?.label ?? String(e ?? "");
+			return Array.isArray(e) ? W.value ? "" : e.map(t).join(", ") : e == null || e === "" ? "" : t(e);
+		}
+		function Se(e) {
 			let t = e.target;
 			requestAnimationFrame(() => {
 				document.activeElement === t && t.select();
-			}), H.value = "";
+			}), V.value = "";
 		}
 		let K = i(() => {
-			let e = H.value.trim();
-			return !!N.create && e.length > 0 && !z.value.some((t) => t.label.toLowerCase() === e.toLowerCase());
+			let e = V.value.trim();
+			return !!k.create && e.length > 0 && !R.value.some((t) => t.label.toLowerCase() === e.toLowerCase());
 		});
 		function q(e) {
-			e.preventDefault(), P("create", H.value.trim()), e.target?.dispatchEvent(new KeyboardEvent("keydown", {
+			e.preventDefault(), A("create", V.value.trim()), e.target?.dispatchEvent(new KeyboardEvent("keydown", {
 				key: "Escape",
 				bubbles: !0
 			}));
 		}
-		let J = n(), ue = i(() => N.id ?? J?.id.value), Y = i(() => N.invalid ?? J?.invalid.value ?? !1), de = e(), X = i(() => N.unstyled ?? de.unstyled), Z = i(() => ee({
-			size: N.size,
+		let J = n(), Ce = i(() => k.id ?? J?.id.value), Y = i(() => k.invalid ?? J?.invalid.value ?? !1), we = e(), X = i(() => k.unstyled ?? we.unstyled), Z = i(() => ee({
+			size: k.size,
+			chips: W.value,
 			invalid: Y.value,
-			disabled: N.disabled
+			disabled: k.disabled
 		}));
 		function Q(e, t) {
-			let n = N.ui?.[e];
+			let n = k.ui?.[e];
 			return X.value ? [n, t] : Z.value[e]({ class: [n, t] });
 		}
 		let $ = i(() => X.value ? void 0 : Z.value.itemIndicator());
-		return (e, n) => (p(), a(v(E), d(v(F), {
+		return (e, n) => (m(), a(y(de), f(y(P), {
 			"open-on-click": "",
-			class: "contents"
+			"reset-model-value-on-clear": k.clearable || k.resetModelValueOnClear,
+			class: "contents",
+			"onUpdate:modelValue": n[1] ||= (e) => j.value = e
 		}), {
-			default: y(() => [l(v(ne), { class: f(Q("anchor", N.class)) }, {
-				default: y(() => [l(v(oe), d({
-					id: ue.value,
-					modelValue: V.value,
-					"onUpdate:modelValue": n[0] ||= (e) => V.value = e
-				}, e.$attrs, {
-					placeholder: N.placeholder,
-					"display-value": ce,
-					"aria-invalid": Y.value || void 0,
-					"aria-describedby": v(J)?.describedBy.value,
-					class: Q("input"),
-					onFocus: le,
-					onInput: U
-				}), null, 16, [
-					"id",
-					"modelValue",
-					"placeholder",
-					"aria-invalid",
-					"aria-describedby",
-					"class"
-				]), l(v(D), { class: f(Q("trigger")) }, {
-					default: y(() => [l(t, { icon: v(x) }, null, 8, ["icon"])]),
-					_: 1
-				}, 8, ["class"])]),
-				_: 1
-			}, 8, ["class"]), l(v(T), null, {
-				default: y(() => [l(v(re), {
-					class: f(Q("content")),
+			default: S(() => [u(y(T), { class: p(Q("anchor", k.class)) }, {
+				default: S(() => [
+					(m(!0), s(r, null, g(U.value, (n) => (m(), s("span", {
+						key: String(n.value),
+						class: p(Q("tag"))
+					}, [_(e.$slots, "tag", {
+						option: n,
+						remove: () => G(n.value)
+					}, () => [c("span", { class: p(Q("tagText")) }, v(n.label), 3), c("button", {
+						type: "button",
+						tabindex: "-1",
+						"aria-label": k.removeLabel(n.label),
+						class: p(Q("tagDelete")),
+						onClick: ne((e) => G(n.value), ["stop"])
+					}, [u(t, { icon: y(C) }, null, 8, ["icon"])], 10, _e)])], 2))), 128)),
+					u(y(ce), f({
+						id: Ce.value,
+						modelValue: B.value,
+						"onUpdate:modelValue": n[0] ||= (e) => B.value = e
+					}, e.$attrs, {
+						placeholder: k.placeholder,
+						"display-value": xe,
+						"aria-invalid": Y.value || void 0,
+						"aria-describedby": y(J)?.describedBy.value,
+						class: Q("input"),
+						onFocus: Se,
+						onInput: ve,
+						onKeydown: be
+					}), null, 16, [
+						"id",
+						"modelValue",
+						"placeholder",
+						"aria-invalid",
+						"aria-describedby",
+						"class"
+					]),
+					N.value ? (m(), a(y(ie), {
+						key: 0,
+						"aria-label": k.clearLabel,
+						class: p(Q("clear"))
+					}, {
+						default: S(() => [u(t, { icon: y(C) }, null, 8, ["icon"])]),
+						_: 1
+					}, 8, ["aria-label", "class"])) : (m(), a(y(fe), {
+						key: 1,
+						class: p(Q("trigger"))
+					}, {
+						default: S(() => [u(t, { icon: y(re) }, null, 8, ["icon"])]),
+						_: 1
+					}, 8, ["class"]))
+				]),
+				_: 3
+			}, 8, ["class"]), u(y(ue), null, {
+				default: S(() => [u(y(ae), {
+					class: p(Q("content")),
 					position: "popper",
 					"side-offset": 4
 				}, {
-					default: y(() => [l(v(O), { class: f(Q("viewport")) }, {
-						default: y(() => [
-							B.value ? b((p(), s("div", {
+					default: S(() => [u(y(pe), { class: p(Q("viewport")) }, {
+						default: S(() => [
+							z.value ? te((m(), s("div", {
 								key: 0,
-								class: f(Q("empty"))
-							}, [g(e.$slots, "empty", { query: H.value }, () => [c(_(N.emptyText), 1)])], 2)), [[te, !K.value && G.value.length === 0]]) : K.value ? o("", !0) : (p(), a(v(ie), {
+								class: p(Q("empty"))
+							}, [_(e.$slots, "empty", { query: V.value }, () => [l(v(k.emptyText), 1)])], 2)), [[b, !K.value && H.value.length === 0]]) : K.value ? o("", !0) : (m(), a(y(oe), {
 								key: 1,
-								class: f(Q("empty"))
+								class: p(Q("empty"))
 							}, {
-								default: y(() => [g(e.$slots, "empty", { query: H.value }, () => [c(_(N.emptyText), 1)])]),
+								default: S(() => [_(e.$slots, "empty", { query: V.value }, () => [l(v(k.emptyText), 1)])]),
 								_: 3
 							}, 8, ["class"])),
-							g(e.$slots, "default", {}, () => [B.value ? (p(), a(v(k), {
+							_(e.$slots, "default", {}, () => [z.value ? (m(), a(y(me), {
 								key: 0,
-								options: G.value,
-								"estimate-size": N.estimateSize,
-								overscan: N.overscan,
+								options: H.value,
+								"estimate-size": k.estimateSize,
+								overscan: k.overscan,
 								"text-content": (e) => e.label
 							}, {
-								default: y(({ option: e }) => [l(v(C), {
+								default: S(({ option: e }) => [u(y(E), {
 									value: e.value,
 									"text-value": e.label,
 									disabled: e.disabled,
-									class: f(Q("item"))
+									class: p(Q("item"))
 								}, {
-									default: y(() => [l(v(w), { class: f($.value) }, {
-										default: y(() => [l(t, { icon: v(S) }, null, 8, ["icon"])]),
+									default: S(() => [u(y(D), { class: p($.value) }, {
+										default: S(() => [u(t, { icon: y(w) }, null, 8, ["icon"])]),
 										_: 1
-									}, 8, ["class"]), c(" " + _(e.label), 1)]),
+									}, 8, ["class"]), l(" " + v(e.label), 1)]),
 									_: 2
 								}, 1032, [
 									"value",
@@ -209,27 +278,27 @@ var M = /*@__PURE__*/ u({
 								"estimate-size",
 								"overscan",
 								"text-content"
-							])) : R.value ? (p(!0), s(r, { key: 1 }, h(R.value, (e, n) => (p(), a(v(ae), {
+							])) : L.value ? (m(!0), s(r, { key: 1 }, g(L.value, (e, n) => (m(), a(y(se), {
 								key: e.label || n,
-								class: f(Q("group"))
+								class: p(Q("group"))
 							}, {
-								default: y(() => [e.label ? (p(), a(v(se), {
+								default: S(() => [e.label ? (m(), a(y(le), {
 									key: 0,
-									class: f(Q("groupLabel"))
+									class: p(Q("groupLabel"))
 								}, {
-									default: y(() => [c(_(e.label), 1)]),
+									default: S(() => [l(v(e.label), 1)]),
 									_: 2
-								}, 1032, ["class"])) : o("", !0), (p(!0), s(r, null, h(e.items, (e) => (p(), a(v(C), {
+								}, 1032, ["class"])) : o("", !0), (m(!0), s(r, null, g(e.items, (e) => (m(), a(y(E), {
 									key: typeof e == "string" ? e : e.value,
 									value: typeof e == "string" ? e : e.value,
 									"text-value": typeof e == "string" ? e : e.label,
 									disabled: typeof e == "string" ? void 0 : e.disabled,
-									class: f(Q("item"))
+									class: p(Q("item"))
 								}, {
-									default: y(() => [l(v(w), { class: f($.value) }, {
-										default: y(() => [l(t, { icon: v(S) }, null, 8, ["icon"])]),
+									default: S(() => [u(y(D), { class: p($.value) }, {
+										default: S(() => [u(t, { icon: y(w) }, null, 8, ["icon"])]),
 										_: 1
-									}, 8, ["class"]), c(" " + _(typeof e == "string" ? e : e.label), 1)]),
+									}, 8, ["class"]), l(" " + v(typeof e == "string" ? e : e.label), 1)]),
 									_: 2
 								}, 1032, [
 									"value",
@@ -238,17 +307,17 @@ var M = /*@__PURE__*/ u({
 									"class"
 								]))), 128))]),
 								_: 2
-							}, 1032, ["class"]))), 128)) : (p(!0), s(r, { key: 2 }, h(z.value, (e) => (p(), a(v(C), {
+							}, 1032, ["class"]))), 128)) : (m(!0), s(r, { key: 2 }, g(R.value, (e) => (m(), a(y(E), {
 								key: e.value,
 								value: e.value,
 								"text-value": e.label,
 								disabled: e.disabled,
-								class: f(Q("item"))
+								class: p(Q("item"))
 							}, {
-								default: y(() => [l(v(w), { class: f($.value) }, {
-									default: y(() => [l(t, { icon: v(S) }, null, 8, ["icon"])]),
+								default: S(() => [u(y(D), { class: p($.value) }, {
+									default: S(() => [u(t, { icon: y(w) }, null, 8, ["icon"])]),
 									_: 1
-								}, 8, ["class"]), c(" " + _(e.label), 1)]),
+								}, 8, ["class"]), l(" " + v(e.label), 1)]),
 								_: 2
 							}, 1032, [
 								"value",
@@ -256,15 +325,15 @@ var M = /*@__PURE__*/ u({
 								"disabled",
 								"class"
 							]))), 128))]),
-							K.value ? (p(), a(v(C), {
-								key: H.value,
-								value: H.value,
+							K.value ? (m(), a(y(E), {
+								key: V.value,
+								value: V.value,
 								"data-create": "",
-								"text-value": H.value,
-								class: f(Q("item")),
+								"text-value": V.value,
+								class: p(Q("item")),
 								onSelect: q
 							}, {
-								default: y(() => [g(e.$slots, "create", { query: H.value }, () => [c(_(N.createLabel(H.value.trim())), 1)])]),
+								default: S(() => [_(e.$slots, "create", { query: V.value }, () => [l(v(k.createLabel(V.value.trim())), 1)])]),
 								_: 3
 							}, 8, [
 								"value",
@@ -279,8 +348,8 @@ var M = /*@__PURE__*/ u({
 				_: 3
 			})]),
 			_: 3
-		}, 16));
+		}, 16, ["reset-model-value-on-clear"]));
 	}
 });
 //#endregion
-export { M as default };
+export { O as default };

package/dist/components/CommandPalette.js

@@ -0,0 +1,5 @@
+import e from "./CommandPalette.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/CommandPalette.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/CommandPalette.vue.d.ts

@@ -0,0 +1,63 @@
+import type { CommandEntry, CommandItem } from '../composables/command-palette';
+export interface CommandPaletteProps {
+    /** Commands, optionally grouped. An entry with `items` is a group. */
+    items?: CommandEntry[];
+    placeholder?: string;
+    /** Shown when the query matches nothing. Override for non-English apps. */
+    emptyText?: string;
+    /** Accessible name for the dialog, since a palette has no visible title. */
+    label?: string;
+    /**
+     * Global shortcut that opens it. `mod` is Command on Apple platforms and
+     * Control elsewhere. Pass `null` to bind nothing and drive `open` yourself.
+     */
+    hotkey?: string | null;
+    /** Close once a command is chosen. */
+    closeOnSelect?: boolean;
+    /** Hint row along the bottom. Set `false` to drop it. */
+    footer?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    ui?: Partial<Record<'overlay' | 'content' | 'header' | 'icon' | 'input' | 'viewport' | 'group' | 'groupLabel' | 'item' | 'itemIcon' | 'itemLabel' | 'shortcut' | 'key' | 'empty' | 'footer' | 'list', string>>;
+}
+type __VLS_Props = CommandPaletteProps;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_59: {
+    query: string;
+}, __VLS_81: {
+    item: CommandItem;
+}, __VLS_93: {};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_59) => any;
+} & {
+    item?: (props: typeof __VLS_81) => any;
+} & {
+    footer?: (props: typeof __VLS_93) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: CommandItem) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((item: CommandItem) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    unstyled: boolean;
+    placeholder: string;
+    footer: boolean;
+    emptyText: string;
+    hotkey: string | null;
+    closeOnSelect: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/CommandPalette.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,185 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { commandHaystack as n, matchesHotkey as r, toCommandGroups as i } from "../composables/command-palette.js";
+import { commandPaletteTheme as a } from "../theme/command-palette.js";
+import o from "./Kbd.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, unref as T, useModel as E, watch as D, withCtx as O } from "vue";
+import { Search01Icon as k } from "@hugeicons/core-free-icons";
+import { DialogContent as ee, DialogOverlay as te, DialogPortal as ne, DialogRoot as A, DialogTitle as j, ListboxContent as M, ListboxFilter as N, ListboxGroup as P, ListboxGroupLabel as F, ListboxItem as I, ListboxRoot as L, VisuallyHidden as R, useFilter as z } from "reka-ui";
+//#region src/components/CommandPalette.vue?vue&type=script&setup=true&lang.ts
+var B = /*@__PURE__*/ h({
+	__name: "CommandPalette",
+	props: /*@__PURE__*/ g({
+		items: {},
+		placeholder: { default: "Search commands…" },
+		emptyText: { default: "No matching commands." },
+		label: { default: "Command palette" },
+		hotkey: { default: "mod+k" },
+		closeOnSelect: {
+			type: Boolean,
+			default: !0
+		},
+		footer: {
+			type: Boolean,
+			default: !0
+		},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ g(["select"], ["update:open"]),
+	setup(h, { emit: g }) {
+		let B = h, V = g, H = E(h, "open"), U = x("");
+		D(H, (e) => {
+			e || (U.value = "");
+		});
+		let { contains: W } = z({ sensitivity: "base" }), G = c(() => i(B.items)), K = c(() => {
+			let e = U.value.trim();
+			return G.value.map((t) => ({
+				...t,
+				items: e ? t.items.filter((r) => W(n(r, t.label), e)) : t.items
+			})).filter((e) => e.items.length > 0);
+		}), q = c(() => K.value.length === 0);
+		function J(e, t) {
+			return `${e}:${t}`;
+		}
+		function Y(e) {
+			e.disabled || (V("select", e), e.onSelect?.(), B.closeOnSelect && (H.value = !1));
+		}
+		function X(e) {
+			B.hotkey && r(e, B.hotkey) && (e.preventDefault(), H.value = !H.value);
+		}
+		y(() => window.addEventListener("keydown", X)), v(() => window.removeEventListener("keydown", X));
+		let re = e(), Z = c(() => B.unstyled ?? re.unstyled), Q = c(() => a());
+		function $(e, t) {
+			let n = B.ui?.[e];
+			return Z.value ? [n, t].filter(Boolean).join(" ") : Q.value[e]({ class: [n, t] });
+		}
+		function ie(e) {
+			return e.split(" ").filter(Boolean);
+		}
+		return (e, n) => (b(), l(T(A), {
+			open: H.value,
+			"onUpdate:open": n[1] ||= (e) => H.value = e
+		}, {
+			default: O(() => [m(T(ne), null, {
+				default: O(() => [m(T(te), { class: _($("overlay")) }, null, 8, ["class"]), m(T(ee), {
+					class: _(Z.value ? [B.ui?.content, B.class] : Q.value.content({ class: [B.ui?.content, B.class] })),
+					"aria-label": B.label
+				}, {
+					default: O(() => [
+						m(T(R), null, {
+							default: O(() => [m(T(j), null, {
+								default: O(() => [p(w(B.label), 1)]),
+								_: 1
+							})]),
+							_: 1
+						}),
+						m(T(L), {
+							"highlight-on-hover": "",
+							class: _($("list"))
+						}, {
+							default: O(() => [f("div", { class: _($("header")) }, [f("span", { class: _($("icon")) }, [m(t, { icon: T(k) }, null, 8, ["icon"])], 2), m(T(N), {
+								modelValue: U.value,
+								"onUpdate:modelValue": n[0] ||= (e) => U.value = e,
+								"auto-focus": "",
+								placeholder: B.placeholder,
+								class: _($("input"))
+							}, null, 8, [
+								"modelValue",
+								"placeholder",
+								"class"
+							])], 2), m(T(M), { class: _($("viewport")) }, {
+								default: O(() => [q.value ? (b(), d("p", {
+									key: 0,
+									class: _($("empty"))
+								}, [C(e.$slots, "empty", { query: U.value }, () => [p(w(B.emptyText), 1)])], 2)) : u("", !0), (b(!0), d(s, null, S(K.value, (n, r) => (b(), l(T(P), {
+									key: n.label || r,
+									class: _($("group"))
+								}, {
+									default: O(() => [n.label ? (b(), l(T(F), {
+										key: 0,
+										class: _($("groupLabel"))
+									}, {
+										default: O(() => [p(w(n.label), 1)]),
+										_: 2
+									}, 1032, ["class"])) : u("", !0), (b(!0), d(s, null, S(n.items, (n, i) => (b(), l(T(I), {
+										key: J(r, i),
+										value: J(r, i),
+										disabled: n.disabled,
+										"aria-disabled": n.disabled || void 0,
+										as: n.href ? "a" : "div",
+										href: n.href,
+										class: _($("item")),
+										onSelect: (e) => Y(n)
+									}, {
+										default: O(() => [C(e.$slots, "item", { item: n }, () => [
+											n.icon ? (b(), d("span", {
+												key: 0,
+												class: _($("itemIcon"))
+											}, [m(t, { icon: n.icon }, null, 8, ["icon"])], 2)) : u("", !0),
+											f("span", { class: _($("itemLabel")) }, w(n.label), 3),
+											n.shortcut ? (b(), l(o, {
+												key: 1,
+												keys: ie(n.shortcut),
+												class: _($("shortcut")),
+												ui: { key: B.ui?.key }
+											}, null, 8, [
+												"keys",
+												"class",
+												"ui"
+											])) : u("", !0)
+										])]),
+										_: 2
+									}, 1032, [
+										"value",
+										"disabled",
+										"aria-disabled",
+										"as",
+										"href",
+										"class",
+										"onSelect"
+									]))), 128))]),
+									_: 2
+								}, 1032, ["class"]))), 128))]),
+								_: 3
+							}, 8, ["class"])]),
+							_: 3
+						}, 8, ["class"]),
+						B.footer ? (b(), d("div", {
+							key: 0,
+							class: _($("footer"))
+						}, [C(e.$slots, "footer", {}, () => [
+							f("span", null, [m(o, {
+								keys: ["up", "down"],
+								ui: { key: B.ui?.key }
+							}, null, 8, ["ui"]), n[2] ||= p(" to navigate", -1)]),
+							f("span", null, [m(o, {
+								keys: "enter",
+								ui: { key: B.ui?.key }
+							}, null, 8, ["ui"]), n[3] ||= p(" to select", -1)]),
+							f("span", null, [m(o, {
+								keys: "escape",
+								ui: { key: B.ui?.key }
+							}, null, 8, ["ui"]), n[4] ||= p(" to close", -1)])
+						])], 2)) : u("", !0)
+					]),
+					_: 3
+				}, 8, ["class", "aria-label"])]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, ["open"]));
+	}
+});
+//#endregion
+export { B as default };

package/dist/components/Container.js

@@ -0,0 +1,5 @@
+import e from "./Container.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/Container.vue
+var t = e;
+//#endregion
+export { t as default };