@nuxt/ui 4.9.0 → 4.11.0

package/dist/runtime/components/Select.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/select";
 </script>
 
 <script setup>
-import { useTemplateRef, computed, onMounted, toRef } from "vue";
+import { useTemplateRef, computed, onMounted, onScopeDispose, toRef } from "vue";
 import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectValue as RSelectValue, SelectLabel, SelectGroup, SelectItem as RSelectItem, SelectItemIndicator, SelectItemText, SelectSeparator } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
@@ -46,6 +46,7 @@ const _props = defineProps({
   ui: { type: Object, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
+  nullableValue: { type: String, required: false },
   autocomplete: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   name: { type: String, required: false },
@@ -62,22 +63,33 @@ const emits = defineEmits(["change", "blur", "focus", "update:modelValue", "upda
 const slots = defineSlots();
 const props = useComponentProps("select", _props);
 const appConfig = useAppConfig();
-const rootProps = useForwardProps(reactivePick(props, "open", "defaultOpen", "disabled", "autocomplete", "required", "multiple"), emits);
+const rootProps = useForwardProps(reactivePick(props, "open", "defaultOpen", "disabled", "autocomplete", "required", "multiple", "nullableValue"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const position = computed(() => props.content?.position ?? appConfig.ui?.select?.defaultVariants?.position ?? theme.defaultVariants?.position);
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: position.value }));
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }));
-const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const selectSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(computed(() => ({
+  icon: props.icon,
+  leading: props.leading,
+  leadingIcon: props.leadingIcon,
+  trailing: props.trailing,
+  trailingIcon: props.trailingIcon ?? appConfig.ui.icons.chevronDown,
+  loading: props.loading,
+  loadingIcon: props.loadingIcon
+})));
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => fieldGroupSize.value ?? formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const isItemAligned = computed(() => position.value === "item-aligned");
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.select || {} })({
-  color: color.value ?? props.color,
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.select || {} })({
+  color: color.value,
   variant: props.variant,
-  size: selectSize.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
@@ -109,11 +121,13 @@ function autoFocus() {
     });
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 function onUpdate(value) {
   if (props.modelModifiers?.trim && (typeof value === "string" || value === null || value === void 0)) {
     value = value?.trim() ?? null;

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

@@ -3,7 +3,9 @@ import type { VNode } from 'vue';
 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 { AvatarProps } from './Avatar.vue';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
 import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, NestedItem, EmitsToProps } from '../types/utils';
@@ -209,7 +211,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends Get
         nullable: true;
     } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -3,7 +3,12 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/select-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ButtonProps, ChipProps, IconProps, InputProps, LinkPropsKeys } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ButtonProps } from './Button.vue';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
+import type { InputProps } from './Input.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, NestedItem, EmitsToProps } from '../types/utils';
@@ -231,27 +236,6 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
         onClear?: (() => any) | undefined;
         onCreate?: ((item: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: (Mod extends {
-            number: true;
-        } ? (Mod extends {
-            optional: true;
-        } ? (Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
-            optional: true;
-        } ? (Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
-            optional: true;
-        } ? (Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
             value: (Mod extends {
@@ -276,6 +260,27 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
                 nullable: true;
             } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
         } | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: (Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -286,27 +291,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
     }>) => void;
     attrs: any;
     slots: SelectMenuSlots<T, VK, M, Mod, C, NestedItem<T>>;
-    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "clear") => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: (Mod extends {
-        number: true;
-    } ? (Mod extends {
-        optional: true;
-    } ? (Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
-        optional: true;
-    } ? (Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
-        optional: true;
-    } ? (Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "clear") => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: (Mod extends {
             number: true;
@@ -329,9 +314,29 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
         } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
             nullable: true;
         } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
-    } | undefined) => void)) & ((event: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "update:modelValue", value: (Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/SelectMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/select-menu";
 </script>
 
 <script setup>
-import { useTemplateRef, computed, ref, onMounted, toRef, toRaw, watch, nextTick } from "vue";
+import { useTemplateRef, computed, ref, onMounted, onScopeDispose, toRef, toRaw, watch, nextTick } from "vue";
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { defu } from "defu";
@@ -89,14 +89,25 @@ const clearProps = computed(() => typeof props.clear === "object" ? props.clear
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false;
   return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-    estimateSize: getEstimateSize(filteredItems.value, selectSize.value || "md", props.descriptionKey, !!slots["item-description"])
+    estimateSize: getEstimateSize(filteredItems.value, size.value ?? "md", props.descriptionKey, !!slots["item-description"])
   });
 });
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), variant: "none" }));
-const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const selectSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(computed(() => ({
+  icon: props.icon,
+  leading: props.leading,
+  leadingIcon: props.leadingIcon,
+  trailing: props.trailing,
+  trailingIcon: props.trailingIcon ?? appConfig.ui.icons.chevronDown,
+  loading: props.loading,
+  loadingIcon: props.loadingIcon
+})));
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => fieldGroupSize.value ?? formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
@@ -110,12 +121,12 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
     }
   }
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.selectMenu || {} })({
-  color: color.value ?? props.color,
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.selectMenu || {} })({
+  color: color.value,
   variant: props.variant,
-  size: selectSize?.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
@@ -171,11 +182,13 @@ function autoFocus() {
     });
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 function onUpdate(value) {
   if (toRaw(props.modelValue) === value) {
     return;
@@ -201,9 +214,10 @@ function onUpdate(value) {
   }
 }
 const isOpen = ref(false);
+let timeoutId;
+onScopeDispose(() => clearTimeout(timeoutId));
 function onUpdateOpen(value) {
   isOpen.value = value;
-  let timeoutId;
   if (!value) {
     const event = new FocusEvent("blur");
     emits("blur", event);
@@ -251,7 +265,7 @@ function onClear() {
 const viewportRef = useTemplateRef("viewportRef");
 const comboboxRootRef = useTemplateRef("comboboxRootRef");
 watch(() => props.items, async () => {
-  if (!isOpen.value) {
+  if (!isOpen.value || !props.createItem) {
     return;
   }
   await nextTick();
@@ -378,7 +392,7 @@ defineExpose({
               <UButton
                 as="span"
                 :icon="props.clearIcon || appConfig.ui.icons.close"
-                :size="selectSize"
+                :size="size"
                 variant="link"
                 color="neutral"
                 tabindex="-1"
@@ -405,7 +419,7 @@ defineExpose({
               <UInput
                 autofocus
                 autocomplete="off"
-                :size="selectSize"
+                :size="size"
                 v-bind="searchInputProps"
                 :model-modifiers="{
   trim: props.modelModifiers?.trim

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

@@ -3,7 +3,12 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/select-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ButtonProps, ChipProps, IconProps, InputProps, LinkPropsKeys } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ButtonProps } from './Button.vue';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
+import type { InputProps } from './Input.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, NestedItem, EmitsToProps } from '../types/utils';
@@ -231,27 +236,6 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
         onClear?: (() => any) | undefined;
         onCreate?: ((item: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: (Mod extends {
-            number: true;
-        } ? (Mod extends {
-            optional: true;
-        } ? (Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
-            optional: true;
-        } ? (Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
-            optional: true;
-        } ? (Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
             value: (Mod extends {
@@ -276,6 +260,27 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
                 nullable: true;
             } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
         } | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: (Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -286,27 +291,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
     }>) => void;
     attrs: any;
     slots: SelectMenuSlots<T, VK, M, Mod, C, NestedItem<T>>;
-    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "clear") => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: (Mod extends {
-        number: true;
-    } ? (Mod extends {
-        optional: true;
-    } ? (Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
-        optional: true;
-    } ? (Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
-        optional: true;
-    } ? (Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "clear") => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: (Mod extends {
             number: true;
@@ -329,9 +314,29 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
         } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
             nullable: true;
         } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
-    } | undefined) => void)) & ((event: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "update:modelValue", value: (Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -3,7 +3,8 @@ import type { SeparatorProps as _SeparatorProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/separator';
-import type { AvatarProps, IconProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type Separator = ComponentConfig<typeof theme, AppConfig, 'separator'>;
 export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
@@ -54,8 +55,8 @@ export interface SeparatorSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
-    position: Separator["variants"]["position"];
     orientation: Separator["variants"]["orientation"];
+    position: Separator["variants"]["position"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Separator.vue

@@ -12,6 +12,7 @@ import { useForwardProps } from "../composables/useForwardProps";
 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 },
   label: { type: String, required: false },
@@ -32,7 +33,7 @@ const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orientation"));
 const [DefineContainer, ReuseContainer] = createReusableTemplate();
 const hasContent = computed(() => !!(props.label || props.icon || props.avatar || slots.default));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.separator || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.separator || {} })({
   color: props.color,
   orientation: props.orientation,
   size: props.size,
@@ -52,7 +53,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.separator ||
     </div>
   </DefineContainer>
 
-  <Separator v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Separator data-slot="root" v-bind="{ ...rootProps, ...$attrs }" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ReuseContainer v-if="hasContent && props.position === 'start'" />
 
     <div data-slot="border" :class="ui.border({ class: props.ui?.border })" />

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

@@ -3,7 +3,8 @@ import type { SeparatorProps as _SeparatorProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/separator';
-import type { AvatarProps, IconProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type Separator = ComponentConfig<typeof theme, AppConfig, 'separator'>;
 export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
@@ -54,8 +55,8 @@ export interface SeparatorSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
-    position: Separator["variants"]["position"];
     orientation: Separator["variants"]["orientation"];
+    position: Separator["variants"]["position"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,7 +1,12 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/sidebar';
-import type { ButtonProps, DrawerProps, IconProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { DrawerProps } from './Drawer.vue';
+import type { IconProps } from './Icon.vue';
+import type { ModalProps } from './Modal.vue';
+import type { SlideoverProps } from './Slideover.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Sidebar = ComponentConfig<typeof theme, AppConfig, 'sidebar'>;
 type SidebarState = 'expanded' | 'collapsed';
@@ -127,7 +132,7 @@ declare const __VLS_export: <T extends SidebarMode>(__VLS_props: NonNullable<Awa
     slots: SidebarSlots;
     emit: (event: "update:open", value: boolean) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Sidebar.vue

@@ -81,7 +81,7 @@ function closeSidebar() {
   open.value = false;
 }
 const hasHeader = computed(() => !!slots.header || props.title || !!slots.title || props.description || !!slots.description || !!slots.actions || canClose.value || !!slots.close);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.sidebar || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.sidebar || {} })({
   side: props.side,
   variant: props.variant,
   collapsible: props.collapsible,
@@ -157,8 +157,8 @@ const menuProps = toRef(() => defu(props.menu, {
   <Primitive
     v-if="props.collapsible === 'none'"
     :as="props.as"
-    v-bind="$attrs"
     data-slot="root"
+    v-bind="$attrs"
     :data-variant="props.variant"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
@@ -169,8 +169,8 @@ const menuProps = toRef(() => defu(props.menu, {
   <template v-else>
     <Primitive
       :as="props.as"
-      v-bind="$attrs"
       data-slot="root"
+      v-bind="$attrs"
       :data-state="state"
       :data-collapsible="state === 'collapsed' ? props.collapsible : void 0"
       :data-variant="props.variant"

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

@@ -1,7 +1,12 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/sidebar';
-import type { ButtonProps, DrawerProps, IconProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { DrawerProps } from './Drawer.vue';
+import type { IconProps } from './Icon.vue';
+import type { ModalProps } from './Modal.vue';
+import type { SlideoverProps } from './Slideover.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Sidebar = ComponentConfig<typeof theme, AppConfig, 'sidebar'>;
 type SidebarState = 'expanded' | 'collapsed';
@@ -127,7 +132,7 @@ declare const __VLS_export: <T extends SidebarMode>(__VLS_props: NonNullable<Awa
     slots: SidebarSlots;
     emit: (event: "update:open", value: boolean) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Skeleton.vue

@@ -15,7 +15,7 @@ const _props = defineProps({
 });
 const props = useComponentProps("skeleton", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.skeleton || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.skeleton || {} }));
 </script>
 
 <template>