@nuxt/ui 4.1.0 → 4.2.0

package/dist/runtime/components/Input.vue.d.ts

@@ -1,13 +1,13 @@
-import type { InputHTMLAttributes } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { InputHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { AcceptableValue } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
 export type InputValue = AcceptableValue;
-export interface InputProps<T extends InputValue = InputValue> extends UseComponentIconsProps {
+export interface InputProps<T extends InputValue = InputValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<InputHTMLAttributes, 'name' | 'type' | 'placeholder' | 'required' | 'autocomplete' | 'autofocus' | 'disabled'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -39,7 +39,7 @@ export interface InputProps<T extends InputValue = InputValue> extends UseCompon
     highlight?: boolean;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: ModelModifiers;
+    modelModifiers?: ModelModifiers<T>;
     class?: any;
     ui?: Input['slots'];
 }
@@ -61,16 +61,16 @@ export interface InputSlots {
 }
 declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<InputProps<T> & {
-        onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+        inputRef: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
     }>) => void;
     attrs: any;
     slots: InputSlots;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "update:modelValue", value: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/InputDate.d.vue.ts

@@ -0,0 +1,89 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { DateFieldRootProps, DateFieldRootEmits, DateRangeFieldRootProps, DateRangeFieldRootEmits, DateValue } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+import theme from '#build/ui/input-date';
+type InputDate = ComponentConfig<typeof theme, AppConfig, 'inputDate'>;
+type _DateFieldRootProps = Omit<DateFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type _RangeDateFieldRootProps = Omit<DateRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type InputDateDefaultValue<R extends boolean = false> = R extends true ? DateRangeFieldRootProps['defaultValue'] : DateFieldRootProps['defaultValue'];
+type InputDateModelValue<R extends boolean = false> = (R extends true ? DateRangeFieldRootProps['modelValue'] : DateFieldRootProps['modelValue']) | undefined;
+export interface InputDateProps<R extends boolean = false> extends UseComponentIconsProps, _DateFieldRootProps, _RangeDateFieldRootProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: InputDate['variants']['color'];
+    /**
+     * @defaultValue 'solid'
+     */
+    variant?: InputDate['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: InputDate['variants']['size'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    /**
+     * The icon to use as a range separator.
+     * @defaultValue appConfig.ui.icons.minus
+     * @IconifyIcon
+     */
+    separatorIcon?: IconProps['name'];
+    /** Whether or not a range of dates can be selected */
+    range?: R & boolean;
+    defaultValue?: InputDateDefaultValue<R>;
+    modelValue?: InputDateModelValue<R>;
+    class?: any;
+    ui?: InputDate['slots'];
+}
+export interface InputDateEmits<R extends boolean> extends Omit<DateFieldRootEmits & DateRangeFieldRootEmits, 'update:modelValue'> {
+    'update:modelValue': [date: InputDateModelValue<R>];
+    'change': [event: Event];
+    'blur': [event: FocusEvent];
+    'focus': [event: FocusEvent];
+}
+export interface InputDateSlots {
+    leading(props: {
+        ui: InputDate['ui'];
+    }): any;
+    default(props: {
+        ui: InputDate['ui'];
+    }): any;
+    trailing(props: {
+        ui: InputDate['ui'];
+    }): any;
+    separator(props: {
+        ui: InputDate['ui'];
+    }): any;
+}
+declare const __VLS_export: <R extends boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<InputDateProps<R> & {
+        onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        "onUpdate:modelValue"?: ((date: InputDateModelValue<R>) => any) | undefined;
+        "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
+    }>) => void;
+    attrs: any;
+    slots: InputDateSlots;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:modelValue", date: InputDateModelValue<R>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/InputDate.vue

@@ -0,0 +1,161 @@
+<script>
+import theme from "#build/ui/input-date";
+</script>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useForwardPropsEmits } from "reka-ui";
+import { DateField as SingleDateField, DateRangeField as RangeDateField } from "reka-ui/namespaced";
+import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useFieldGroup } from "../composables/useFieldGroup";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFormField } from "../composables/useFormField";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  highlight: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  separatorIcon: { type: [String, Object], required: false },
+  range: { type: Boolean, required: false },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  defaultPlaceholder: { type: null, required: false },
+  placeholder: { type: null, required: false },
+  hourCycle: { type: null, required: false },
+  step: { type: Object, required: false },
+  granularity: { type: String, required: false },
+  hideTimeZone: { type: Boolean, required: false },
+  maxValue: { type: null, required: false },
+  minValue: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  isDateUnavailable: { type: Function, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false }
+});
+const emits = defineEmits(["update:modelValue", "change", "blur", "focus", "update:placeholder"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactiveOmit(props, "id", "name", "range", "modelValue", "defaultValue", "color", "variant", "size", "highlight", "disabled", "autofocus", "autofocusDelay", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "separatorIcon", "class", "ui"), emits);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(props);
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
+const [DefineSegmentsTemplate, ReuseSegmentsTemplate] = createReusableTemplate();
+const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputDate || {} })({
+  color: color.value,
+  variant: props.variant,
+  size: inputSize.value,
+  highlight: highlight.value,
+  loading: props.loading,
+  leading: isLeading.value || !!props.avatar || !!slots.leading,
+  trailing: isTrailing.value || !!slots.trailing,
+  fieldGroup: orientation.value
+}));
+const inputsRef = ref([]);
+function onUpdate(value) {
+  const event = new Event("change", { target: { value } });
+  emits("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+function onBlur(event) {
+  emitFormBlur();
+  emits("blur", event);
+}
+function onFocus(event) {
+  emitFormFocus();
+  emits("focus", event);
+}
+function autoFocus() {
+  if (props.autofocus) {
+    inputsRef.value[0]?.$el?.focus();
+  }
+}
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus();
+  }, props.autofocusDelay);
+});
+const DateField = computed(() => props.range ? RangeDateField : SingleDateField);
+defineExpose({
+  inputsRef
+});
+</script>
+
+<template>
+  <DefineSegmentsTemplate v-slot="{ segments, type }">
+    <DateField.Input
+      v-for="(segment, index) in segments"
+      :key="`${segment.part}-${index}`"
+      :ref="(el) => inputsRef[index] = el"
+      :type="type"
+      :part="segment.part"
+      data-slot="segment"
+      :class="ui.segment({ class: props.ui?.segment })"
+      :data-segment="segment.part"
+    >
+      {{ segment.value.trim() }}
+    </DateField.Input>
+  </DefineSegmentsTemplate>
+
+  <DateField.Root
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    :id="id"
+    v-slot="{ segments }"
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :name="name"
+    :disabled="disabled"
+    data-slot="base"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
+    @update:model-value="onUpdate"
+    @blur="onBlur"
+    @focus="onFocus"
+  >
+    <template v-if="Array.isArray(segments)">
+      <ReuseSegmentsTemplate :segments="segments" />
+    </template>
+    <template v-else>
+      <ReuseSegmentsTemplate :segments="segments.start" type="start" />
+      <slot name="separator" :ui="ui">
+        <UIcon :name="separatorIcon || appConfig.ui.icons.minus" data-slot="separatorIcon" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
+      </slot>
+      <ReuseSegmentsTemplate :segments="segments.end" type="end" />
+    </template>
+
+    <slot :ui="ui" />
+
+    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading" :ui="ui">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      </slot>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing" :ui="ui">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </DateField.Root>
+</template>

package/dist/runtime/components/InputDate.vue.d.ts

@@ -0,0 +1,89 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { DateFieldRootProps, DateFieldRootEmits, DateRangeFieldRootProps, DateRangeFieldRootEmits, DateValue } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+import theme from '#build/ui/input-date';
+type InputDate = ComponentConfig<typeof theme, AppConfig, 'inputDate'>;
+type _DateFieldRootProps = Omit<DateFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type _RangeDateFieldRootProps = Omit<DateRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type InputDateDefaultValue<R extends boolean = false> = R extends true ? DateRangeFieldRootProps['defaultValue'] : DateFieldRootProps['defaultValue'];
+type InputDateModelValue<R extends boolean = false> = (R extends true ? DateRangeFieldRootProps['modelValue'] : DateFieldRootProps['modelValue']) | undefined;
+export interface InputDateProps<R extends boolean = false> extends UseComponentIconsProps, _DateFieldRootProps, _RangeDateFieldRootProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: InputDate['variants']['color'];
+    /**
+     * @defaultValue 'solid'
+     */
+    variant?: InputDate['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: InputDate['variants']['size'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    /**
+     * The icon to use as a range separator.
+     * @defaultValue appConfig.ui.icons.minus
+     * @IconifyIcon
+     */
+    separatorIcon?: IconProps['name'];
+    /** Whether or not a range of dates can be selected */
+    range?: R & boolean;
+    defaultValue?: InputDateDefaultValue<R>;
+    modelValue?: InputDateModelValue<R>;
+    class?: any;
+    ui?: InputDate['slots'];
+}
+export interface InputDateEmits<R extends boolean> extends Omit<DateFieldRootEmits & DateRangeFieldRootEmits, 'update:modelValue'> {
+    'update:modelValue': [date: InputDateModelValue<R>];
+    'change': [event: Event];
+    'blur': [event: FocusEvent];
+    'focus': [event: FocusEvent];
+}
+export interface InputDateSlots {
+    leading(props: {
+        ui: InputDate['ui'];
+    }): any;
+    default(props: {
+        ui: InputDate['ui'];
+    }): any;
+    trailing(props: {
+        ui: InputDate['ui'];
+    }): any;
+    separator(props: {
+        ui: InputDate['ui'];
+    }): any;
+}
+declare const __VLS_export: <R extends boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<InputDateProps<R> & {
+        onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        "onUpdate:modelValue"?: ((date: InputDateModelValue<R>) => any) | undefined;
+        "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
+    }>) => void;
+    attrs: any;
+    slots: InputDateSlots;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:modelValue", date: InputDateModelValue<R>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/InputMenu.d.vue.ts

@@ -1,10 +1,9 @@
-import { nextTick } from 'vue';
-import type { InputHTMLAttributes } from 'vue';
 import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, IconProps } from '../types';
+import type { InputHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type InputMenu = ComponentConfig<typeof theme, AppConfig, 'inputMenu'>;
@@ -29,7 +28,7 @@ export type InputMenuItem = InputMenuValue | {
     ui?: Pick<InputMenu['slots'], 'tagsItem' | 'tagsItemText' | 'tagsItemDelete' | 'tagsItemDeleteIcon' | 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
-export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover' | 'openOnClick' | 'openOnFocus'>, UseComponentIconsProps {
+export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover' | 'openOnClick' | 'openOnFocus'>, UseComponentIconsProps, /** @vue-ignore */ Omit<InputHTMLAttributes, 'disabled' | 'name' | 'type' | 'placeholder' | 'autofocus' | 'maxlength' | 'minlength' | 'pattern' | 'size' | 'min' | 'max' | 'step'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -209,11 +208,11 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
     props: __VLS_PrettifyLocal<(InputMenuProps<T, VK, M> & {
         searchTerm?: string;
     }) & {
-        onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
-        onCreate?: ((item: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        onCreate?: ((item: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
@@ -223,131 +222,11 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
         "onRemove-tag"?: ((item: GetModelValue<T, VK, M>) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        inputRef: import("vue").Ref<({
-            $: import("vue").ComponentInternalInstance;
-            $data: {};
-            $props: {
-                readonly displayValue?: ((val: any) => string) | undefined;
-                readonly modelValue?: string | undefined;
-                readonly autoFocus?: boolean | undefined;
-                readonly disabled?: boolean | undefined;
-                readonly asChild?: boolean | undefined;
-                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
-                readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined | undefined;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-            $attrs: {
-                [x: string]: unknown;
-            };
-            $refs: {
-                [x: string]: unknown;
-            };
-            $slots: Readonly<{
-                [name: string]: import("vue").Slot<any> | undefined;
-            }>;
-            $root: import("vue").ComponentPublicInstance | null;
-            $parent: import("vue").ComponentPublicInstance | null;
-            $host: Element | null;
-            $emit: (event: "update:modelValue", args_0: string) => void;
-            $el: any;
-            $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").ComboboxInputProps> & Readonly<{
-                "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-                "update:modelValue": (args_0: string) => any;
-            }, string, {
-                as: import("reka-ui").AsTag | import("vue").Component;
-            }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
-                beforeCreate?: (() => void) | (() => void)[];
-                created?: (() => void) | (() => void)[];
-                beforeMount?: (() => void) | (() => void)[];
-                mounted?: (() => void) | (() => void)[];
-                beforeUpdate?: (() => void) | (() => void)[];
-                updated?: (() => void) | (() => void)[];
-                activated?: (() => void) | (() => void)[];
-                deactivated?: (() => void) | (() => void)[];
-                beforeDestroy?: (() => void) | (() => void)[];
-                beforeUnmount?: (() => void) | (() => void)[];
-                destroyed?: (() => void) | (() => void)[];
-                unmounted?: (() => void) | (() => void)[];
-                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
-            };
-            $forceUpdate: () => void;
-            $nextTick: typeof nextTick;
-            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
-        } & Readonly<{
-            as: import("reka-ui").AsTag | import("vue").Component;
-        }> & Omit<Readonly<import("reka-ui").ComboboxInputProps> & Readonly<{
-            "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-        }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
-            $slots: {
-                default?: (props: {}) => any;
-            };
-        }) | null, ({
-            $: import("vue").ComponentInternalInstance;
-            $data: {};
-            $props: {
-                readonly displayValue?: ((val: any) => string) | undefined;
-                readonly modelValue?: string | undefined;
-                readonly autoFocus?: boolean | undefined;
-                readonly disabled?: boolean | undefined;
-                readonly asChild?: boolean | undefined;
-                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
-                readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined | undefined;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-            $attrs: {
-                [x: string]: unknown;
-            };
-            $refs: {
-                [x: string]: unknown;
-            };
-            $slots: Readonly<{
-                [name: string]: import("vue").Slot<any> | undefined;
-            }>;
-            $root: import("vue").ComponentPublicInstance | null;
-            $parent: import("vue").ComponentPublicInstance | null;
-            $host: Element | null;
-            $emit: (event: "update:modelValue", args_0: string) => void;
-            $el: any;
-            $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").ComboboxInputProps> & Readonly<{
-                "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-                "update:modelValue": (args_0: string) => any;
-            }, string, {
-                as: import("reka-ui").AsTag | import("vue").Component;
-            }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
-                beforeCreate?: (() => void) | (() => void)[];
-                created?: (() => void) | (() => void)[];
-                beforeMount?: (() => void) | (() => void)[];
-                mounted?: (() => void) | (() => void)[];
-                beforeUpdate?: (() => void) | (() => void)[];
-                updated?: (() => void) | (() => void)[];
-                activated?: (() => void) | (() => void)[];
-                deactivated?: (() => void) | (() => void)[];
-                beforeDestroy?: (() => void) | (() => void)[];
-                beforeUnmount?: (() => void) | (() => void)[];
-                destroyed?: (() => void) | (() => void)[];
-                unmounted?: (() => void) | (() => void)[];
-                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
-            };
-            $forceUpdate: () => void;
-            $nextTick: typeof nextTick;
-            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
-        } & Readonly<{
-            as: import("reka-ui").AsTag | import("vue").Component;
-        }> & Omit<Readonly<import("reka-ui").ComboboxInputProps> & Readonly<{
-            "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-        }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
-            $slots: {
-                default?: (props: {}) => any;
-            };
-        }) | null>;
+        inputRef: Readonly<import("vue").Ref<HTMLInputElement, HTMLInputElement>>;
     }>) => void;
     attrs: any;
     slots: InputMenuSlots<T, VK, M, NestedItem<T>>;
-    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: GetModelValue<T, VK, M>;
     } | undefined) => void) & ((evt: "remove-tag", item: GetModelValue<T, VK, M>) => void)) & ((evt: "update:searchTerm", value: string) => void);