@nuxt/ui 4.9.0 → 4.10.0

package/dist/runtime/components/PricingPlans.vue

@@ -23,7 +23,7 @@ const slots = defineSlots();
 const props = useComponentProps("pricingPlans", _props);
 const getProxySlots = () => omit(slots, ["default"]);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pricingPlans || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pricingPlans || {} }));
 const count = computed(() => props.plans?.length || slots.default?.()?.flatMap(mapSlot).filter(Boolean)?.length || 3);
 function mapSlot(slot) {
   if (typeof slot.type === "symbol") {

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-plans';
-import type { PricingPlanProps, PricingPlanSlots } from '../types';
+import type { PricingPlanProps, PricingPlanSlots } from './PricingPlan.vue';
 import type { ComponentConfig } from '../types/tv';
 type PricingPlans = ComponentConfig<typeof theme, AppConfig, 'pricingPlans'>;
 export interface PricingPlansProps {
@@ -51,7 +51,7 @@ declare const __VLS_export: <T extends PricingPlanProps>(__VLS_props: NonNullabl
     slots: PricingPlansSlots<T>;
     emit: {};
 }>) => 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/PricingTable.d.vue.ts

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-table';
-import type { PricingPlanProps } from '../types';
+import type { PricingPlanProps } from './PricingPlan.vue';
 import type { ComponentConfig } from '../types/tv';
 type PricingTable = ComponentConfig<typeof theme, AppConfig, 'pricingTable'>;
 type DynamicSlots<T extends {
@@ -102,7 +102,7 @@ declare const __VLS_export: <T extends PricingTableTier>(__VLS_props: NonNullabl
     slots: PricingTableSlots<T>;
     emit: {};
 }>) => 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/PricingTable.vue

@@ -30,7 +30,7 @@ const formatSlotName = (item) => {
   if (item.id) return item.id;
   return item.title.toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
 };
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pricingTable || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.pricingTable || {} })());
 const [DefineTierTemplate, ReuseTierTemplate] = createReusableTemplate({
   props: {
     tier: Object
@@ -135,7 +135,7 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
     <UIcon v-else :name="appConfig.ui.icons.minus" data-slot="tierFeatureIcon" :class="ui.tierFeatureIcon({ class: props.ui?.tierFeatureIcon })" />
   </DefineFeatureTemplate>
 
-  <Primitive :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <table data-slot="table" :class="ui.table({ class: props.ui?.table })">
       <caption v-if="props.caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pricing-table';
-import type { PricingPlanProps } from '../types';
+import type { PricingPlanProps } from './PricingPlan.vue';
 import type { ComponentConfig } from '../types/tv';
 type PricingTable = ComponentConfig<typeof theme, AppConfig, 'pricingTable'>;
 type DynamicSlots<T extends {
@@ -102,7 +102,7 @@ declare const __VLS_export: <T extends PricingTableTier>(__VLS_props: NonNullabl
     slots: PricingTableSlots<T>;
     emit: {};
 }>) => 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/Progress.vue

@@ -102,7 +102,7 @@ function stepVariant(index) {
   }
   return "other";
 }
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.progress || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.progress || {} })({
   animation: props.animation,
   size: props.size,
   color: props.color,

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

@@ -98,7 +98,7 @@ declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<
     slots: RadioGroupSlots<T>;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => 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/RadioGroup.vue

@@ -41,7 +41,7 @@ const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "loop", "required"), emits);
 const { emitFormChange, emitFormInput, color, name, size, highlight, id: _id, disabled, ariaAttrs } = useFormField(_props, { bind: false });
 const id = _id.value ?? useId();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.radioGroup || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.radioGroup || {} })({
   size: size.value ?? props.size,
   color: color.value ?? props.color,
   highlight: highlight.value ?? props.highlight,

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

@@ -98,7 +98,7 @@ declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<
     slots: RadioGroupSlots<T>;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => 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/ScrollArea.d.vue.ts

@@ -4,7 +4,13 @@ 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'>> {
+export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'horizontal' | 'isRtl' | 'estimateSize' | 'lanes' | 'enabled'>> {
+    /**
+     * Virtualize against an external scroll element instead of the component's own root.
+     * Pair with `scrollMargin` set to the content's offset from the scroll element's start.
+     * @defaultValue undefined
+     */
+    getScrollElement?: () => Element | null;
     /**
      * Estimated size (in px) of each item along the scroll axis. Can be a number or a function.
      * @defaultValue 100
@@ -95,7 +101,7 @@ declare const __VLS_export: <T extends ScrollAreaItem>(__VLS_props: NonNullable<
     slots: ScrollAreaSlots<T>;
     emit: (evt: "scroll", isScrolling: 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/ScrollArea.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/scroll-area";
 </script>
 
 <script setup>
-import { computed, onMounted, onUnmounted, toRef, useTemplateRef, watch } from "vue";
+import { computed, onUnmounted, toRef, useTemplateRef, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { defu } from "defu";
 import { useVirtualizer } from "@tanstack/vue-virtual";
@@ -26,8 +26,10 @@ const emits = defineEmits(["scroll"]);
 const props = useComponentProps("scrollArea", _props);
 const { dir } = useLocale();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.scrollArea || {} })({
-  orientation: props.orientation
+const isExternalScroll = computed(() => typeof props.virtualize === "object" && !!props.virtualize.getScrollElement);
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.scrollArea || {} })({
+  orientation: props.orientation,
+  externalScroll: isExternalScroll.value
 }));
 const rootRef = useTemplateRef("rootRef");
 const scrollShadowStyle = props.shadow ? useScrollShadow(
@@ -40,6 +42,7 @@ const scrollShadowStyle = props.shadow ? useScrollShadow(
 const isRtl = computed(() => dir.value === "rtl");
 const isHorizontal = computed(() => props.orientation === "horizontal");
 const isVertical = computed(() => !isHorizontal.value);
+const getScrollElement = () => (isExternalScroll.value ? virtualizerProps.value.getScrollElement?.() : rootRef.value?.$el) ?? null;
 const virtualizerProps = toRef(() => {
   const options = typeof props.virtualize === "boolean" ? {} : props.virtualize;
   return defu(options, {
@@ -84,7 +87,7 @@ const virtualizer = !!props.virtualize && useVirtualizer({
   get count() {
     return props.items?.length || 0;
   },
-  getScrollElement: () => rootRef.value?.$el,
+  getScrollElement,
   get horizontal() {
     return isHorizontal.value;
   },
@@ -104,6 +107,7 @@ function getVirtualItemStyle(virtualItem) {
   const hasLanes = lanes.value !== void 0 && lanes.value > 1;
   const lane = virtualItem.lane;
   const gap = virtualizerProps.value.gap ?? 0;
+  const offset = virtualItem.start - virtualizerProps.value.scrollMargin;
   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 {
@@ -112,26 +116,28 @@ function getVirtualItemStyle(virtualItem) {
     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)`
+    transform: isHorizontal.value ? `translateX(${isRtl.value ? -offset : offset}px)` : `translateY(${offset}px)`
   };
 }
 let resizeObserver = null;
 let rafId = null;
-onMounted(() => {
-  if (virtualizer) {
-    const el = rootRef.value?.$el;
-    if (el) {
-      resizeObserver = new ResizeObserver(() => {
-        if (rafId !== null) return;
-        rafId = requestAnimationFrame(() => {
-          rafId = null;
-          virtualizer.value.measure();
-        });
+watch(
+  getScrollElement,
+  (el) => {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+    if (!virtualizer || !el) return;
+    resizeObserver = new ResizeObserver(() => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        virtualizer.value.measure();
       });
-      resizeObserver.observe(el);
-    }
-  }
-});
+    });
+    resizeObserver.observe(el);
+  },
+  { immediate: true }
+);
 onUnmounted(() => {
   if (rafId !== null) {
     cancelAnimationFrame(rafId);

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

@@ -4,7 +4,13 @@ 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'>> {
+export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'horizontal' | 'isRtl' | 'estimateSize' | 'lanes' | 'enabled'>> {
+    /**
+     * Virtualize against an external scroll element instead of the component's own root.
+     * Pair with `scrollMargin` set to the content's offset from the scroll element's start.
+     * @defaultValue undefined
+     */
+    getScrollElement?: () => Element | null;
     /**
      * Estimated size (in px) of each item along the scroll axis. Can be a number or a function.
      * @defaultValue 100
@@ -95,7 +101,7 @@ declare const __VLS_export: <T extends ScrollAreaItem>(__VLS_props: NonNullable<
     slots: ScrollAreaSlots<T>;
     emit: (evt: "scroll", isScrolling: 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/Select.d.vue.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/Select.vue

@@ -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,7 +63,7 @@ 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 }));
@@ -72,7 +73,7 @@ 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 isItemAligned = computed(() => position.value === "item-aligned");
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.select || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.select || {} })({
   color: color.value ?? props.color,
   variant: props.variant,
   size: selectSize.value ?? props.size,

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

@@ -110,7 +110,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
     }
   }
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.selectMenu || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.selectMenu || {} })({
   color: color.value ?? props.color,
   variant: props.variant,
   size: selectSize?.value ?? props.size,
@@ -251,7 +251,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();

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 (): {