@comfyorg/design-system 1.0.1 → 1.2.0

package/dist/popover/PopoverContent.vue.js

@@ -0,0 +1,91 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { usePopoverViewportDismiss } from "./usePopoverViewportDismiss.js";
+import { computed, createBlock, createPropsRestProxy, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { PopoverContent, PopoverPortal, injectPopoverRootContext, useForwardPropsEmits } from "reka-ui";
+//#endregion
+//#region src/components/popover/PopoverContent.vue
+var PopoverContent_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "PopoverContent",
+	props: {
+		forceMount: { type: Boolean },
+		memoDependencies: {},
+		side: {},
+		sideOffset: { default: 4 },
+		sideFlip: { type: Boolean },
+		align: { default: "center" },
+		alignOffset: {},
+		alignFlip: { type: Boolean },
+		avoidCollisions: { type: Boolean },
+		collisionBoundary: {},
+		collisionPadding: { default: 8 },
+		arrowPadding: {},
+		hideShiftedArrow: { type: Boolean },
+		sticky: {},
+		hideWhenDetached: { type: Boolean },
+		positionStrategy: {},
+		updatePositionStrategy: {},
+		disableUpdateOnLayoutShift: { type: Boolean },
+		prioritizePosition: { type: Boolean },
+		reference: {},
+		dir: {},
+		asChild: { type: Boolean },
+		as: {},
+		disableOutsidePointerEvents: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		dismissOnViewportChange: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(__props, { emit: __emit }) {
+		const restProps = createPropsRestProxy(__props, [
+			"align",
+			"sideOffset",
+			"collisionPadding",
+			"class",
+			"dismissOnViewportChange"
+		]);
+		const emits = __emit;
+		const delegatedProps = computed(() => ({
+			align: __props.align,
+			sideOffset: __props.sideOffset,
+			collisionPadding: __props.collisionPadding,
+			...restProps
+		}));
+		const forwarded = useForwardPropsEmits(delegatedProps, emits);
+		const rootContext = injectPopoverRootContext();
+		usePopoverViewportDismiss(computed({
+			get: () => __props.dismissOnViewportChange && rootContext.open.value,
+			set: (open) => rootContext.onOpenChange(open)
+		}), rootContext.triggerElement);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PopoverPortal), { key: Number(restProps.forceMount || unref(rootContext).open.value) }, {
+				default: withCtx(() => [createVNode(unref(PopoverContent), mergeProps({ "data-slot": "popover-content" }, {
+					...unref(forwarded),
+					..._ctx.$attrs
+				}, { class: unref(cn)("z-overlay w-72 origin-(--reka-popover-content-transform-origin) rounded-md border bg-background p-4 text-foreground shadow-md outline-none", "overflow-auto [:where(&)]:max-h-(--reka-popover-content-available-height) [:where(&)]:max-w-(--reka-popover-content-available-width)", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", __props.class) }), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["class"])]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { PopoverContent_default as default };

package/dist/popover/usePopoverViewportDismiss.d.ts

@@ -0,0 +1,2 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+export declare function usePopoverViewportDismiss(open: Ref<boolean>, anchor: MaybeRefOrGetter<Element | null | undefined>): void;

package/dist/popover/usePopoverViewportDismiss.js

@@ -0,0 +1,13 @@
+import { toValue } from "vue";
+import { useEventListener } from "@vueuse/core";
+//#region src/components/popover/usePopoverViewportDismiss.ts
+function usePopoverViewportDismiss(open, anchor) {
+	useEventListener(() => open.value ? window : void 0, "resize", () => {
+		open.value = false;
+	});
+	useEventListener(() => open.value ? window : void 0, "scroll", (event) => {
+		if (event.target === document || event.target instanceof Window || event.target instanceof Element && event.target.contains(toValue(anchor) ?? null)) open.value = false;
+	}, { capture: true });
+}
+//#endregion
+export { usePopoverViewportDismiss };

package/dist/radio-group/RadioGroup.vue.d.ts

@@ -0,0 +1,22 @@
+import { RadioGroupRootProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = RadioGroupRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (payload: import('reka-ui').AcceptableValue) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: import('reka-ui').AcceptableValue) => any) | undefined;
+}>, {}, {}, {}, {}, 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/radio-group/RadioGroup.vue.js

@@ -0,0 +1,45 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { RadioGroupRoot, useForwardPropsEmits } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+//#endregion
+//#region src/components/radio-group/RadioGroup.vue
+var RadioGroup_default = /* @__PURE__ */ defineComponent({
+	__name: "RadioGroup",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		disabled: { type: Boolean },
+		orientation: {},
+		dir: {},
+		loop: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps(unref(forwarded), {
+				"data-slot": "radio-group",
+				class: unref(cn)("flex gap-2", props.class)
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { RadioGroup_default as default };

package/dist/radio-group/RadioGroupItem.vue.d.ts

@@ -0,0 +1,22 @@
+import { RadioGroupItemProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = RadioGroupItemProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (event: import('reka-ui').RadioGroupItemSelectEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((event: import('reka-ui').RadioGroupItemSelectEvent) => any) | undefined;
+}>, {}, {}, {}, {}, 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/radio-group/RadioGroupItem.vue.js

@@ -0,0 +1,42 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { createBlock, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { RadioGroupIndicator, RadioGroupItem, useForwardPropsEmits } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+//#endregion
+//#region src/components/radio-group/RadioGroupItem.vue
+var RadioGroupItem_default = /* @__PURE__ */ defineComponent({
+	__name: "RadioGroupItem",
+	props: {
+		id: {},
+		value: {},
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(RadioGroupItem), mergeProps(unref(forwarded), {
+				"data-slot": "radio-group-item",
+				class: unref(cn)("inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border bg-transparent outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary", props.class)
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(RadioGroupIndicator), { class: "size-2 rounded-full bg-primary" })])]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { RadioGroupItem_default as default };

package/dist/search-input/AsyncSearchInput.vue.d.ts

@@ -0,0 +1,27 @@
+import { HTMLAttributes, MaybeRefOrGetter } from 'vue';
+type __VLS_Props = {
+    accessibleLabel: string;
+    clearLabel: string;
+    placeholder?: string;
+    searcher?: (query: string, onCleanup: (cleanupFn: () => void) => void) => Promise<void>;
+    updateKey?: MaybeRefOrGetter<unknown>;
+    autofocus?: boolean;
+    debounceMs?: number;
+    debounceMaxWaitMs?: number;
+    class?: HTMLAttributes['class'];
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    enter: (event: KeyboardEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onEnter?: ((event: KeyboardEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/search-input/AsyncSearchInput.vue.js

@@ -0,0 +1,104 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, nextTick, normalizeClass, onMounted, openBlock, ref, toRef, toValue, unref, useModel, vModelText, watch, withDirectives, withKeys } from "vue";
+import { refDebounced } from "@vueuse/core";
+//#region src/components/search-input/AsyncSearchInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"placeholder",
+	"aria-label",
+	"autofocus"
+];
+var _hoisted_2 = ["aria-label"];
+//#endregion
+//#region src/components/search-input/AsyncSearchInput.vue
+var AsyncSearchInput_default = /* @__PURE__ */ defineComponent({
+	__name: "AsyncSearchInput",
+	props: /*@__PURE__*/ mergeModels({
+		accessibleLabel: {},
+		clearLabel: {},
+		placeholder: {},
+		searcher: {
+			type: Function,
+			default: async () => {}
+		},
+		updateKey: {},
+		autofocus: {
+			type: Boolean,
+			default: false
+		},
+		debounceMs: { default: 250 },
+		debounceMaxWaitMs: { default: 1e3 },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["enter"], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const searchQuery = useModel(__props, "modelValue");
+		const inputRef = ref();
+		onMounted(() => {
+			if (!__props.autofocus) return;
+			nextTick(() => inputRef.value?.focus());
+		});
+		__expose({ focus: () => inputRef.value?.focus() });
+		const isQuerying = ref(false);
+		const debouncedSearchQuery = refDebounced(searchQuery, __props.debounceMs, { maxWait: __props.debounceMaxWaitMs });
+		watch(searchQuery, (value) => {
+			isQuerying.value = value !== debouncedSearchQuery.value;
+		});
+		const updateKeyRef = toRef(() => toValue(__props.updateKey));
+		watch([debouncedSearchQuery, updateKeyRef], (_, __, onCleanup) => {
+			let isCleanup = false;
+			let cleanupFn;
+			onCleanup(() => {
+				isCleanup = true;
+				cleanupFn?.();
+			});
+			__props.searcher(debouncedSearchQuery.value, (cb) => cleanupFn = cb).catch((error) => {
+				console.error("[AsyncSearchInput] searcher failed", error);
+			}).finally(() => {
+				if (!isCleanup) isQuerying.value = false;
+			});
+		}, { immediate: true });
+		function handleFocus(event) {
+			const target = event.target;
+			if (target instanceof HTMLInputElement) target.select();
+		}
+		function handleKeydownEnter(event) {
+			if (event.isComposing) return;
+			emit("enter", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", { class: normalizeClass(unref(cn)("group", "rounded-lg bg-secondary transition-all duration-150", "flex flex-1 items-center", "border-0 text-foreground", "focus-within:ring focus-within:ring-ring", __props.class)) }, [
+				createElementVNode("i", { class: normalizeClass(unref(cn)("ml-2 transition-colors duration-150", isQuerying.value ? "icon-[lucide--loader-circle] animate-spin" : "icon-[lucide--search]", searchQuery.value?.trim() !== "" ? "text-foreground" : "text-muted-foreground group-focus-within:text-foreground group-hover:text-foreground")) }, null, 2),
+				withDirectives(createElementVNode("input", {
+					ref_key: "inputRef",
+					ref: inputRef,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+					type: "text",
+					class: "mx-2 my-1.5 h-5 w-full min-w-0 border-0 bg-transparent text-sm ring-0 outline-0",
+					placeholder: __props.placeholder,
+					"aria-label": __props.accessibleLabel,
+					autofocus: __props.autofocus,
+					onFocus: handleFocus,
+					onKeydown: withKeys(handleKeydownEnter, ["enter"])
+				}, null, 40, _hoisted_1), [[vModelText, searchQuery.value]]),
+				searchQuery.value.trim().length > 0 ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "m-0 flex shrink-0 items-center justify-center border-0 bg-transparent p-0 pr-3 pl-1 text-muted-foreground ring-0 outline-0 transition-all duration-150 hover:scale-108 hover:text-foreground",
+					"aria-label": __props.clearLabel,
+					onClick: _cache[1] || (_cache[1] = ($event) => searchQuery.value = "")
+				}, [createElementVNode("i", { class: normalizeClass(unref(cn)("icon-[lucide--delete] cursor-pointer")) }, null, 2)], 8, _hoisted_2)) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { AsyncSearchInput_default as default };

package/dist/search-input/SearchAutocomplete.vue.d.ts

@@ -0,0 +1,53 @@
+import { HTMLAttributes, StyleValue } from 'vue';
+import { SearchInputVariants } from './searchInput.variants';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<({
+        placeholder?: string;
+        accessibleLabel: string;
+        clearLabel: string;
+        icon?: string;
+        autofocus?: boolean;
+        inputId?: string;
+        loading?: boolean;
+        disabled?: boolean;
+        openOnFocus?: boolean;
+        updateModelOnSelect?: boolean;
+        size?: SearchInputVariants["size"];
+        suggestions?: T[];
+        optionLabel?: keyof T & string;
+        optionKey?: keyof T & string;
+        class?: HTMLAttributes["class"];
+        anchorClass?: HTMLAttributes["class"];
+        contentStyle?: StyleValue;
+    } & {
+        modelValue: string;
+    }) & {
+        onSelect?: ((item: T) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onHighlight?: ((item: T | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        focus: () => void;
+        open: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        leading?: (props: {}) => any;
+    } & {
+        suggestion?: (props: {
+            suggestion: T;
+        }) => any;
+    };
+    emit: (((evt: "select", item: T) => void) & ((evt: "highlight", item: T | undefined) => void)) & ((event: "update:modelValue", value: string) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/search-input/SearchAutocomplete.vue.js

@@ -0,0 +1,234 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { t as Button_default } from "../shared/Button-CilmsOkY.js";
+import { n as searchInputVariants, t as searchInputSizeConfig } from "../shared/searchInput.variants-NOge_52E.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
+import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxPortal, ComboboxRoot } from "reka-ui";
+//#endregion
+//#region src/components/search-input/SearchAutocomplete.vue
+var SearchAutocomplete_default = /* @__PURE__ */ defineComponent({
+	__name: "SearchAutocomplete",
+	props: /*@__PURE__*/ mergeModels({
+		placeholder: {},
+		accessibleLabel: {},
+		clearLabel: {},
+		icon: { default: "icon-[lucide--search]" },
+		autofocus: {
+			type: Boolean,
+			default: false
+		},
+		inputId: {},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		openOnFocus: {
+			type: Boolean,
+			default: false
+		},
+		updateModelOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		size: { default: "md" },
+		suggestions: { default: () => [] },
+		optionLabel: {},
+		optionKey: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		anchorClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		contentStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["select", "highlight"], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const sizeConfig = computed(() => searchInputSizeConfig[__props.size]);
+		const modelValue = useModel(__props, "modelValue");
+		const comboboxRef = useTemplateRef("comboboxRef");
+		const inputRef = ref(null);
+		const isOpen = ref(false);
+		const isComposing = ref(false);
+		function focus() {
+			inputRef.value?.$el?.focus();
+		}
+		function open() {
+			isOpen.value = true;
+		}
+		__expose({
+			focus,
+			open
+		});
+		function clearSearch() {
+			modelValue.value = "";
+			focus();
+		}
+		function getItemProperty(item, key) {
+			if (typeof item === "object" && item !== null) return String(item[key]);
+			return String(item);
+		}
+		function suggestionLabel(item) {
+			if (__props.optionLabel) return getItemProperty(item, __props.optionLabel);
+			return String(item);
+		}
+		function suggestionKey(item, index) {
+			if (__props.optionKey) return getItemProperty(item, __props.optionKey);
+			return `${suggestionLabel(item)}-${index}`;
+		}
+		function suggestionValue(item) {
+			return suggestionLabel(item);
+		}
+		function onSelectSuggestion(item) {
+			if (__props.updateModelOnSelect) modelValue.value = suggestionLabel(item);
+			isOpen.value = false;
+			emit("select", item);
+		}
+		function onHighlight(payload) {
+			const index = Number(payload?.ref.dataset.suggestionIndex);
+			emit("highlight", Number.isInteger(index) ? __props.suggestions[index] : void 0);
+		}
+		function keepShiftSelectionNative(e) {
+			if (e.target !== inputRef.value?.$el) return;
+			if (e.shiftKey && (e.key === "Home" || e.key === "End")) e.stopPropagation();
+		}
+		function onEnterKey(e) {
+			if (isComposing.value) {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+		}
+		watch(() => __props.suggestions, async (items) => {
+			isOpen.value = items.length > 0 && (__props.openOnFocus || !!modelValue.value);
+			if (isOpen.value) {
+				await nextTick();
+				comboboxRef.value?.highlightFirstItem?.();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ComboboxRoot), {
+				ref_key: "comboboxRef",
+				ref: comboboxRef,
+				open: isOpen.value,
+				"onUpdate:open": _cache[3] || (_cache[3] = ($event) => isOpen.value = $event),
+				"ignore-filter": "",
+				"reset-search-term-on-blur": false,
+				"reset-search-term-on-select": false,
+				disabled: __props.disabled,
+				"open-on-focus": __props.openOnFocus,
+				"open-on-click": __props.openOnFocus,
+				class: normalizeClass(__props.class),
+				onHighlight
+			}, {
+				default: withCtx(() => [createVNode(unref(ComboboxAnchor), {
+					class: normalizeClass(unref(cn)(unref(searchInputVariants)({ size: __props.size }), __props.disabled && "pointer-events-none opacity-50", __props.anchorClass)),
+					onClick: focus,
+					onKeydownCapture: keepShiftSelectionNative
+				}, {
+					default: withCtx(() => [
+						renderSlot(_ctx.$slots, "leading"),
+						modelValue.value ? (openBlock(), createBlock(unref(Button_default), {
+							key: 0,
+							class: normalizeClass(unref(cn)("absolute", sizeConfig.value.clearPos)),
+							variant: "textonly",
+							size: "icon-sm",
+							"aria-label": __props.clearLabel,
+							onClick: withModifiers(clearSearch, ["stop"])
+						}, {
+							default: withCtx(() => [createElementVNode("i", { class: normalizeClass(unref(cn)("icon-[lucide--x]", sizeConfig.value.icon)) }, null, 2)]),
+							_: 1
+						}, 8, ["class", "aria-label"])) : __props.loading ? (openBlock(), createElementBlock("i", {
+							key: 1,
+							class: normalizeClass(unref(cn)("pointer-events-none absolute icon-[lucide--loader-circle] animate-spin", sizeConfig.value.iconPos, sizeConfig.value.icon))
+						}, null, 2)) : (openBlock(), createElementBlock("i", {
+							key: 2,
+							class: normalizeClass(unref(cn)("pointer-events-none absolute", sizeConfig.value.iconPos, sizeConfig.value.icon, __props.icon))
+						}, null, 2)),
+						createVNode(unref(ComboboxInput), {
+							id: __props.inputId,
+							ref_key: "inputRef",
+							ref: inputRef,
+							modelValue: modelValue.value,
+							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+							class: normalizeClass(unref(cn)("h-full min-w-0 flex-1 border-none bg-transparent outline-none", sizeConfig.value.inputPl, sizeConfig.value.inputText)),
+							placeholder: __props.placeholder,
+							"aria-label": __props.accessibleLabel,
+							"auto-focus": __props.autofocus,
+							onCompositionstart: _cache[1] || (_cache[1] = ($event) => isComposing.value = true),
+							onCompositionend: _cache[2] || (_cache[2] = ($event) => isComposing.value = false),
+							onKeydown: withKeys(onEnterKey, ["enter"])
+						}, null, 8, [
+							"id",
+							"modelValue",
+							"class",
+							"placeholder",
+							"aria-label",
+							"auto-focus"
+						])
+					]),
+					_: 3
+				}, 8, ["class"]), (openBlock(), createBlock(unref(ComboboxPortal), { key: Number(isOpen.value) }, {
+					default: withCtx(() => [__props.suggestions.length > 0 ? (openBlock(), createBlock(unref(ComboboxContent), {
+						key: 0,
+						position: "popper",
+						"side-offset": 4,
+						style: normalizeStyle(__props.contentStyle),
+						class: normalizeClass(unref(cn)("z-overlay max-h-60 w-(--reka-combobox-trigger-width) overflow-y-auto", "rounded-lg border bg-background p-1 shadow-lg"))
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.suggestions, (suggestion, index) => {
+							return openBlock(), createBlock(unref(ComboboxItem), {
+								key: suggestionKey(suggestion, index),
+								value: suggestionValue(suggestion),
+								"data-suggestion-index": index,
+								"aria-label": suggestionLabel(suggestion),
+								class: normalizeClass(unref(cn)("cursor-pointer rounded-sm px-3 py-2 text-sm outline-none", "data-highlighted:bg-accent")),
+								onSelect: withModifiers(($event) => onSelectSuggestion(suggestion), ["prevent"])
+							}, {
+								default: withCtx(() => [renderSlot(_ctx.$slots, "suggestion", { suggestion }, () => [createTextVNode(toDisplayString(suggestionLabel(suggestion)), 1)])]),
+								_: 2
+							}, 1032, [
+								"value",
+								"data-suggestion-index",
+								"aria-label",
+								"class",
+								"onSelect"
+							]);
+						}), 128))]),
+						_: 3
+					}, 8, ["style", "class"])) : createCommentVNode("", true)]),
+					_: 3
+				}))]),
+				_: 3
+			}, 8, [
+				"open",
+				"disabled",
+				"open-on-focus",
+				"open-on-click",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { SearchAutocomplete_default as default };