@eslamdevui/ui 4.1.1-rc.1 → 4.3.0

package/dist/runtime/components/RadioGroup.vue

@@ -31,7 +31,7 @@ const props = defineProps({
   name: { type: String, required: false },
   required: { type: Boolean, required: false }
 });
-const emits = defineEmits(["update:modelValue", "change"]);
+const emits = defineEmits(["change", "update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "loop", "required"), emits);
@@ -95,35 +95,37 @@ function onUpdate(value) {
     :orientation="orientation"
     :name="name"
     :disabled="disabled"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
+    <fieldset data-slot="fieldset" :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="ui.legend({ class: props.ui?.legend })">
         <slot name="legend">
           {{ legend }}
         </slot>
       </legend>
 
-      <component :is="!variant || variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
-        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+      <component :is="!variant || variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })">
+        <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
           <RRadioGroupItem
             :id="item.id"
             :value="item.value"
-            :disabled="item.disabled"
-            :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled })"
+            :disabled="item.disabled || disabled"
+            data-slot="base"
+            :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled || disabled })"
           >
-            <RadioGroupIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" />
+            <RadioGroupIndicator data-slot="indicator" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" />
           </RRadioGroupItem>
         </div>
 
-        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-          <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled || disabled })">
             <slot name="label" :item="item" :model-value="modelValue">
               {{ item.label }}
             </slot>
           </component>
-          <p v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
+          <p v-if="item.description || !!slots.description" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description], disabled: item.disabled || disabled })">
             <slot name="description" :item="item" :model-value="modelValue">
               {{ item.description }}
             </slot>

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

@@ -1,7 +1,7 @@
 import type { RadioGroupRootProps, RadioGroupRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/radio-group';
-import type { AcceptableValue, GetItemKeys, GetModelValue } from '../types/utils';
+import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type RadioGroup = ComponentConfig<typeof theme, AppConfig, 'radioGroup'>;
 export type RadioGroupValue = AcceptableValue;
@@ -66,9 +66,9 @@ export interface RadioGroupProps<T extends RadioGroupItem[] = RadioGroupItem[],
     class?: any;
     ui?: RadioGroup['slots'];
 }
-export type RadioGroupEmits = RadioGroupRootEmits & {
+export type RadioGroupEmits<T extends RadioGroupItem[] = RadioGroupItem[], VK extends GetItemKeys<T> = 'value'> = Omit<RadioGroupRootEmits, 'update:modelValue'> & {
     change: [event: Event];
-};
+} & GetModelValueEmits<T, VK, false>;
 type NormalizeItem<T extends RadioGroupItem> = Exclude<T & {
     id: string;
 }, RadioGroupValue>;
@@ -81,17 +81,21 @@ export interface RadioGroupSlots<T extends RadioGroupItem[] = RadioGroupItem[]>
     label: SlotProps<T[number]>;
     description: SlotProps<T[number]>;
 }
-declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<T> = "value">(__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<RadioGroupProps<T, VK> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: string) => void)>>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<T> = "value">(__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: __VLS_PrettifyLocal<RadioGroupProps<T, VK> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: RadioGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: string) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -0,0 +1,83 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { VirtualItem, VirtualizerOptions } from '@tanstack/vue-virtual';
+import theme from '#build/ui/scroll-area';
+import type { ComponentConfig } from '../types/tv';
+type ScrollArea = ComponentConfig<typeof theme, AppConfig, 'scrollArea'>;
+export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'getScrollElement' | 'horizontal' | 'isRtl' | 'estimateSize' | 'lanes' | 'enabled'>> {
+    /**
+     * Estimated size (in px) of each item along the scroll axis. Can be a number or a function.
+     * @defaultValue 100
+     */
+    estimateSize?: number | ((index: number) => number);
+    /**
+     * Number of lanes for multi-column/row layouts.
+     * For responsive lane counts, use a computed property with viewport/container size:
+     * @example
+     * ```ts
+     * const { width } = useWindowSize()
+     * const lanes = computed(() => Math.floor(width.value / 300))
+     * ```
+     * @defaultValue undefined
+     */
+    lanes?: number;
+}
+export type ScrollAreaItem = any;
+export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The scroll direction.
+     * @defaultValue 'vertical'
+     */
+    orientation?: ScrollArea['variants']['orientation'];
+    /**
+     * Array of items to render.
+     */
+    items?: T[];
+    /**
+     * Enable virtualization for large lists.
+     * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
+     * @defaultValue false
+     */
+    virtualize?: boolean | ScrollAreaVirtualizeOptions;
+    class?: any;
+    ui?: ScrollArea['slots'];
+}
+export interface ScrollAreaSlots<T extends ScrollAreaItem = ScrollAreaItem> {
+    default(props: {
+        item: T;
+        index: number;
+        virtualItem?: VirtualItem;
+    } | Record<string, never>): any;
+}
+export interface ScrollAreaEmits {
+    /**
+     * Emitted when scroll state changes
+     * @param isScrolling - Whether the list is currently being scrolled
+     */
+    scroll: [isScrolling: boolean];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ScrollAreaItem>(__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: __VLS_PrettifyLocal<ScrollAreaProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "scroll", isScrolling: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: HTMLElement;
+        virtualizer: import("vue").Ref<import("@tanstack/vue-virtual").Virtualizer<Element, Element>, import("@tanstack/vue-virtual").Virtualizer<Element, Element>> | undefined;
+    }>) => void;
+    attrs: any;
+    slots: ScrollAreaSlots<T>;
+    emit: (evt: "scroll", isScrolling: boolean) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/ScrollArea.vue

@@ -0,0 +1,187 @@
+<script>
+import theme from "#build/ui/scroll-area";
+</script>
+
+<script setup>
+import { computed, toRef, useTemplateRef, watch } from "vue";
+import { Primitive } from "reka-ui";
+import { defu } from "defu";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import { useLocale } from "../composables/useLocale";
+const props = defineProps({
+  as: { type: null, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  items: { type: Array, required: false },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const emits = defineEmits(["scroll"]);
+const { dir } = useLocale();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.scrollArea || {} })({
+  orientation: props.orientation
+}));
+const rootRef = useTemplateRef("rootRef");
+const isRtl = computed(() => dir.value === "rtl");
+const isHorizontal = computed(() => props.orientation === "horizontal");
+const isVertical = computed(() => !isHorizontal.value);
+const virtualizerProps = toRef(() => {
+  const options = typeof props.virtualize === "boolean" ? {} : props.virtualize;
+  return defu(options, {
+    estimateSize: 100,
+    overscan: 12,
+    gap: 0,
+    paddingStart: 0,
+    paddingEnd: 0,
+    scrollMargin: 0
+  });
+});
+const lanes = computed(() => {
+  const value = virtualizerProps.value.lanes;
+  return typeof value === "number" ? value : void 0;
+});
+const virtualizer = !!props.virtualize && useVirtualizer({
+  ...virtualizerProps.value,
+  get overscan() {
+    return virtualizerProps.value.overscan;
+  },
+  get gap() {
+    return virtualizerProps.value.gap;
+  },
+  get paddingStart() {
+    return virtualizerProps.value.paddingStart;
+  },
+  get paddingEnd() {
+    return virtualizerProps.value.paddingEnd;
+  },
+  get scrollMargin() {
+    return virtualizerProps.value.scrollMargin;
+  },
+  get lanes() {
+    return lanes.value;
+  },
+  get isRtl() {
+    return isRtl.value;
+  },
+  get count() {
+    return props.items?.length || 0;
+  },
+  getScrollElement: () => rootRef.value?.$el,
+  get horizontal() {
+    return isHorizontal.value;
+  },
+  estimateSize: (index) => {
+    const estimate = virtualizerProps.value.estimateSize;
+    return typeof estimate === "function" ? estimate(index) : estimate;
+  }
+});
+const virtualItems = computed(() => virtualizer ? virtualizer.value.getVirtualItems() : []);
+const totalSize = computed(() => virtualizer ? virtualizer.value.getTotalSize() : 0);
+const virtualViewportStyle = computed(() => ({
+  position: "relative",
+  inlineSize: isHorizontal.value ? `${totalSize.value}px` : "100%",
+  blockSize: isVertical.value ? `${totalSize.value}px` : "100%"
+}));
+function getVirtualItemStyle(virtualItem) {
+  const hasLanes = lanes.value !== void 0 && lanes.value > 1;
+  const lane = virtualItem.lane;
+  const gap = virtualizerProps.value.gap ?? 0;
+  const laneSize = hasLanes ? `calc((100% - ${(lanes.value - 1) * gap}px) / ${lanes.value})` : "100%";
+  const lanePosition = hasLanes && lane !== void 0 ? `calc(${lane} * ((100% - ${(lanes.value - 1) * gap}px) / ${lanes.value} + ${gap}px))` : 0;
+  return {
+    position: "absolute",
+    insetBlockStart: isHorizontal.value && hasLanes ? lanePosition : 0,
+    insetInlineStart: isVertical.value && hasLanes ? lanePosition : 0,
+    blockSize: isHorizontal.value ? hasLanes ? laneSize : "100%" : void 0,
+    inlineSize: isVertical.value ? hasLanes ? laneSize : "100%" : void 0,
+    transform: isHorizontal.value ? `translateX(${isRtl.value ? -virtualItem.start : virtualItem.start}px)` : `translateY(${virtualItem.start}px)`
+  };
+}
+watch(lanes, () => {
+  if (virtualizer) {
+    virtualizer.value.measure();
+  }
+}, { flush: "sync" });
+function measureElement(el) {
+  if (el && virtualizer) {
+    const element = el instanceof Element ? el : el.$el;
+    virtualizer.value.measureElement(element);
+  }
+}
+watch(
+  () => virtualizer ? virtualizer.value.isScrolling : false,
+  (isScrolling) => emits("scroll", isScrolling)
+);
+function getItemKey(item, index) {
+  if (virtualizerProps.value.getItemKey) {
+    return virtualizerProps.value.getItemKey(index);
+  }
+  if (item && typeof item === "object" && "id" in item) {
+    return item.id;
+  }
+  return index;
+}
+defineExpose({
+  get $el() {
+    return rootRef.value?.$el;
+  },
+  virtualizer: virtualizer || void 0
+});
+</script>
+
+<template>
+  <Primitive
+    ref="rootRef"
+    :as="as"
+    data-slot="root"
+    :data-orientation="orientation"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+  >
+    <template v-if="virtualizer">
+      <div
+        data-slot="viewport"
+        :class="ui.viewport({ class: props.ui?.viewport })"
+        :style="virtualViewportStyle"
+      >
+        <div
+          v-for="virtualItem in virtualItems"
+          :key="String(virtualItem.key)"
+          :ref="measureElement"
+          :data-index="virtualItem.index"
+          data-slot="item"
+          :class="ui.item({ class: props.ui?.item })"
+          :style="getVirtualItemStyle(virtualItem)"
+        >
+          <slot
+            :item="items?.[virtualItem.index]"
+            :index="virtualItem.index"
+            :virtual-item="virtualItem"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template v-else>
+      <div data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+        <template v-if="items?.length">
+          <div
+            v-for="(item, index) in items"
+            :key="getItemKey(item, index)"
+            data-slot="item"
+            :class="ui.item({ class: props.ui?.item })"
+          >
+            <slot :item="item" :index="index" />
+          </div>
+        </template>
+
+        <template v-else>
+          <slot />
+        </template>
+      </div>
+    </template>
+  </Primitive>
+</template>

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

@@ -0,0 +1,83 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { VirtualItem, VirtualizerOptions } from '@tanstack/vue-virtual';
+import theme from '#build/ui/scroll-area';
+import type { ComponentConfig } from '../types/tv';
+type ScrollArea = ComponentConfig<typeof theme, AppConfig, 'scrollArea'>;
+export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'getScrollElement' | 'horizontal' | 'isRtl' | 'estimateSize' | 'lanes' | 'enabled'>> {
+    /**
+     * Estimated size (in px) of each item along the scroll axis. Can be a number or a function.
+     * @defaultValue 100
+     */
+    estimateSize?: number | ((index: number) => number);
+    /**
+     * Number of lanes for multi-column/row layouts.
+     * For responsive lane counts, use a computed property with viewport/container size:
+     * @example
+     * ```ts
+     * const { width } = useWindowSize()
+     * const lanes = computed(() => Math.floor(width.value / 300))
+     * ```
+     * @defaultValue undefined
+     */
+    lanes?: number;
+}
+export type ScrollAreaItem = any;
+export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The scroll direction.
+     * @defaultValue 'vertical'
+     */
+    orientation?: ScrollArea['variants']['orientation'];
+    /**
+     * Array of items to render.
+     */
+    items?: T[];
+    /**
+     * Enable virtualization for large lists.
+     * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
+     * @defaultValue false
+     */
+    virtualize?: boolean | ScrollAreaVirtualizeOptions;
+    class?: any;
+    ui?: ScrollArea['slots'];
+}
+export interface ScrollAreaSlots<T extends ScrollAreaItem = ScrollAreaItem> {
+    default(props: {
+        item: T;
+        index: number;
+        virtualItem?: VirtualItem;
+    } | Record<string, never>): any;
+}
+export interface ScrollAreaEmits {
+    /**
+     * Emitted when scroll state changes
+     * @param isScrolling - Whether the list is currently being scrolled
+     */
+    scroll: [isScrolling: boolean];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ScrollAreaItem>(__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: __VLS_PrettifyLocal<ScrollAreaProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "scroll", isScrolling: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: HTMLElement;
+        virtualizer: import("vue").Ref<import("@tanstack/vue-virtual").Virtualizer<Element, Element>, import("@tanstack/vue-virtual").Virtualizer<Element, Element>> | undefined;
+    }>) => void;
+    attrs: any;
+    slots: ScrollAreaSlots<T>;
+    emit: (evt: "scroll", isScrolling: boolean) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -3,6 +3,8 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/select';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, IconProps } from '../types';
+import type { ModelModifiers } from '../types/input';
+import type { ButtonHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Select = ComponentConfig<typeof theme, AppConfig, 'select'>;
@@ -28,7 +30,7 @@ export type SelectItem = SelectValue | {
     ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
-export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps {
+export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     id?: string;
     /** The placeholder text when the select is empty. */
     placeholder?: string;
@@ -91,6 +93,7 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     defaultValue?: GetModelValue<T, VK, M>;
     /** The controlled value of the Select. Can be bind as `v-model`. */
     modelValue?: GetModelValue<T, VK, M>;
+    modelModifiers?: Omit<ModelModifiers<GetModelValue<T, VK, M>>, 'lazy'>;
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
@@ -140,112 +143,14 @@ export interface SelectSlots<A extends ArrayOrNested<SelectItem> = ArrayOrNested
     'content-top': (props?: {}) => any;
     'content-bottom': (props?: {}) => any;
 }
-declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = "value", M extends boolean = false>(__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<SelectProps<T, VK, M> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void)>>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = "value", M extends boolean = false>(__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: __VLS_PrettifyLocal<SelectProps<T, VK, M> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        triggerRef: import("vue").Ref<({
-            $: import("vue").ComponentInternalInstance;
-            $data: {};
-            $props: {
-                readonly disabled?: boolean | undefined;
-                readonly reference?: import("reka-ui").ReferenceElement | undefined;
-                readonly asChild?: boolean | undefined;
-                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | 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: string, ...args: any[]) => void;
-            $el: any;
-            $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").SelectTriggerProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, 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 import("vue").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").SelectTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
-            $slots: {
-                default?: (props: {}) => any;
-            };
-        }) | null, ({
-            $: import("vue").ComponentInternalInstance;
-            $data: {};
-            $props: {
-                readonly disabled?: boolean | undefined;
-                readonly reference?: import("reka-ui").ReferenceElement | undefined;
-                readonly asChild?: boolean | undefined;
-                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | 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: string, ...args: any[]) => void;
-            $el: any;
-            $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").SelectTriggerProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, 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 import("vue").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").SelectTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
-            $slots: {
-                default?: (props: {}) => any;
-            };
-        }) | null>;
+        triggerRef: Readonly<import("vue").Ref<HTMLButtonElement, HTMLButtonElement>>;
     }>) => void;
     attrs: any;
     slots: SelectSlots<T, VK, M, NestedItem<T>>;
@@ -253,8 +158,8 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends Get
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};