@nuxt/ui 4.8.2 → 4.10.0

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

@@ -1,7 +1,8 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/editor-mention-menu';
 import type { EditorMenuOptions } from '../composables/useEditorMenu';
-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 EditorMentionMenu = ComponentConfig<typeof theme, AppConfig, 'editorMentionMenu'>;
 export interface EditorMentionMenuItem {
@@ -40,7 +41,7 @@ declare const __VLS_export: <T extends EditorMentionMenuItem>(__VLS_props: NonNu
     slots: {};
     emit: (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/EditorMentionMenu.vue

@@ -27,7 +27,7 @@ const props = defineProps({
 });
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorMentionMenu || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.editorMentionMenu || {} })({
   size: props.size
 }));
 let menu = null;

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

@@ -1,7 +1,8 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/editor-mention-menu';
 import type { EditorMenuOptions } from '../composables/useEditorMenu';
-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 EditorMentionMenu = ComponentConfig<typeof theme, AppConfig, 'editorMentionMenu'>;
 export interface EditorMentionMenuItem {
@@ -40,7 +41,7 @@ declare const __VLS_export: <T extends EditorMentionMenuItem>(__VLS_props: NonNu
     slots: {};
     emit: (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/EditorSuggestionMenu.d.vue.ts

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/editor-suggestion-menu';
 import type { EditorMenuOptions } from '../composables/useEditorMenu';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { EditorItem, EditorCustomHandlers } from '../types/editor';
 import type { ComponentConfig } from '../types/tv';
 type EditorSuggestionMenu = ComponentConfig<typeof theme, AppConfig, 'editorSuggestionMenu'>;
@@ -49,7 +49,7 @@ declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__VLS_props: No
     slots: {};
     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/EditorSuggestionMenu.vue

@@ -26,7 +26,7 @@ const props = defineProps({
 });
 const appConfig = useAppConfig();
 const handlers = inject("editorHandlers", computed(() => createHandlers()));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorSuggestionMenu || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.editorSuggestionMenu || {} })({
   size: props.size
 }));
 let menu = null;

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/editor-suggestion-menu';
 import type { EditorMenuOptions } from '../composables/useEditorMenu';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { EditorItem, EditorCustomHandlers } from '../types/editor';
 import type { ComponentConfig } from '../types/tv';
 type EditorSuggestionMenu = ComponentConfig<typeof theme, AppConfig, 'editorSuggestionMenu'>;
@@ -49,7 +49,7 @@ declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__VLS_props: No
     slots: {};
     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/EditorToolbar.d.vue.ts

@@ -4,7 +4,10 @@ import type { Editor } from '@tiptap/vue-3';
 import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
 import theme from '#build/ui/editor-toolbar';
-import type { ButtonProps, DropdownMenuProps, DropdownMenuItem, TooltipProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { DropdownMenuProps, DropdownMenuItem } from './DropdownMenu.vue';
+import type { TooltipProps } from './Tooltip.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { EditorItem, EditorCustomHandlers } from '../types/editor';
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -84,7 +87,7 @@ declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_p
     slots: EditorToolbarSlots<T, NestedItem<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/EditorToolbar.vue

@@ -54,7 +54,7 @@ const options = computed(() => defu(props.options, {
   offset: 8,
   shift: { padding: 8 }
 }));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorToolbar || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.editorToolbar || {} })({
   layout: props.layout
 }));
 const groups = computed(

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

@@ -4,7 +4,10 @@ import type { Editor } from '@tiptap/vue-3';
 import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
 import theme from '#build/ui/editor-toolbar';
-import type { ButtonProps, DropdownMenuProps, DropdownMenuItem, TooltipProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { DropdownMenuProps, DropdownMenuItem } from './DropdownMenu.vue';
+import type { TooltipProps } from './Tooltip.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { EditorItem, EditorCustomHandlers } from '../types/editor';
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -84,7 +87,7 @@ declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_p
     slots: EditorToolbarSlots<T, NestedItem<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/Empty.d.vue.ts

@@ -2,7 +2,9 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/empty';
 import type { ComponentConfig } from '../types/tv';
-import type { ButtonProps, IconProps, AvatarProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { AvatarProps } from './Avatar.vue';
 type Empty = ComponentConfig<typeof theme, AppConfig, 'empty'>;
 export interface EmptyProps {
     /**
@@ -16,6 +18,14 @@ export interface EmptyProps {
      */
     icon?: IconProps['name'];
     avatar?: AvatarProps;
+    /** When `true`, the loading icon will be displayed. */
+    loading?: boolean;
+    /**
+     * The icon when the `loading` prop is `true`.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: IconProps['name'];
     title?: string;
     description?: string;
     /**

package/dist/runtime/components/Empty.vue

@@ -14,6 +14,8 @@ const _props = defineProps({
   as: { type: null, required: false },
   icon: { type: null, required: false },
   avatar: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
   actions: { type: Array, required: false },
@@ -25,18 +27,20 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("empty", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} })({
+const iconName = computed(() => props.loading ? props.loadingIcon || appConfig.ui.icons.loading : props.icon);
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.empty || {} })({
   variant: props.variant,
-  size: props.size
+  size: props.size,
+  loading: props.loading
 }));
 </script>
 
 <template>
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.header || (props.icon || props.avatar || !!slots.leading) || (props.title || !!slots.title) || (props.description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="props.as" :aria-busy="props.loading ? 'true' : void 0" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.header || (iconName || props.avatar || !!slots.leading) || (props.title || !!slots.title) || (props.description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
         <slot name="leading" :ui="ui">
-          <UAvatar v-if="props.icon || props.avatar" :icon="props.icon" v-bind="typeof props.avatar === 'object' ? props.avatar : {}" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+          <UAvatar v-if="iconName || props.avatar" :icon="iconName" v-bind="typeof props.avatar === 'object' ? props.avatar : {}" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
         </slot>
 
         <h2 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">

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

@@ -2,7 +2,9 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/empty';
 import type { ComponentConfig } from '../types/tv';
-import type { ButtonProps, IconProps, AvatarProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { AvatarProps } from './Avatar.vue';
 type Empty = ComponentConfig<typeof theme, AppConfig, 'empty'>;
 export interface EmptyProps {
     /**
@@ -16,6 +18,14 @@ export interface EmptyProps {
      */
     icon?: IconProps['name'];
     avatar?: AvatarProps;
+    /** When `true`, the loading icon will be displayed. */
+    loading?: boolean;
+    /**
+     * The icon when the `loading` prop is `true`.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: IconProps['name'];
     title?: string;
     description?: string;
     /**

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

@@ -2,7 +2,8 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { NuxtError } from '#app';
 import theme from '#build/ui/error';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type Error = ComponentConfig<typeof theme, AppConfig, 'error'>;
 export interface ErrorProps {

package/dist/runtime/components/Error.vue

@@ -24,7 +24,7 @@ const slots = defineSlots();
 const props = useComponentProps("error", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.error || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.error || {} })());
 function handleError() {
   clearError({ redirect: props.redirect });
 }

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

@@ -2,7 +2,8 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { NuxtError } from '#app';
 import theme from '#build/ui/error';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type Error = ComponentConfig<typeof theme, AppConfig, 'error'>;
 export interface ErrorProps {

package/dist/runtime/components/FieldGroup.vue

@@ -19,7 +19,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("fieldGroup", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fieldGroup || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.fieldGroup || {} }));
 provide(fieldGroupInjectionKey, computed(() => ({
   orientation: props.orientation,
   size: props.size

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

@@ -2,7 +2,9 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFileDialogReturn } from '@vueuse/core';
 import theme from '#build/ui/file-upload';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { InputHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>;
@@ -15,11 +17,11 @@ export interface FileUploadProps<M extends boolean = false> extends /** @vue-ign
     id?: string;
     name?: string;
     /**
-     * The icon to display.
+     * The icon to display. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.upload
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     label?: string;
     description?: string;
     /**
@@ -127,6 +129,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     }): VNode[];
     'files'?(props: {
         files: FileUploadFiles<M>;
+        removeFile: (index?: number) => void;
     }): VNode[];
     'files-top'?(props: {
         files: FileUploadFiles<M>;
@@ -141,6 +144,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     'file'?(props: {
         file: File;
         index: number;
+        removeFile: (index?: number) => void;
     }): VNode[];
     'file-leading'?(props: {
         file: File;
@@ -159,6 +163,7 @@ export interface FileUploadSlots<M extends boolean = false> {
         file: File;
         index: number;
         ui: FileUpload['ui'];
+        removeFile: (index?: number) => void;
     }): VNode[];
 }
 declare const _default: typeof __VLS_export;
@@ -180,7 +185,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
     slots: FileUploadSlots<M>;
     emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => 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/FileUpload.vue

@@ -20,7 +20,7 @@ const _props = defineProps({
   as: { type: null, required: false },
   id: { type: String, required: false },
   name: { type: String, required: false },
-  icon: { type: null, required: false },
+  icon: { type: [String, Boolean], required: false, skipCheck: true },
   label: { type: String, required: false },
   description: { type: String, required: false },
   color: { type: null, required: false },
@@ -71,7 +71,7 @@ const position = computed(() => {
   }
   return props.position;
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fileUpload || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.fileUpload || {} })({
   dropzone: props.dropzone,
   interactive: props.interactive,
   color: color.value ?? props.color,
@@ -146,9 +146,9 @@ defineExpose({
       <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
 
       <div data-slot="files" :class="ui.files({ class: props.ui?.files })">
-        <slot name="files" :files="modelValue">
+        <slot name="files" :files="modelValue" :remove-file="removeFile">
           <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="file.name" data-slot="file" :class="ui.file({ class: props.ui?.file })">
-            <slot name="file" :file="file" :index="index">
+            <slot name="file" :file="file" :index="index" :remove-file="removeFile">
               <slot name="file-leading" :file="file" :index="index" :ui="ui">
                 <UAvatar
                   :as="{ img: 'img' }"
@@ -174,7 +174,7 @@ defineExpose({
                 </span>
               </div>
 
-              <slot name="file-trailing" :file="file" :index="index" :ui="ui">
+              <slot name="file-trailing" :file="file" :index="index" :ui="ui" :remove-file="removeFile">
                 <UButton
                   v-if="props.fileDelete"
                   color="neutral"
@@ -204,7 +204,7 @@ defineExpose({
     </template>
   </DefineFilesTemplate>
 
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot :open="open" :remove-file="removeFile" :ui="ui">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
@@ -212,6 +212,7 @@ defineExpose({
         :type="variant === 'button' ? 'button' : void 0"
         :role="variant === 'button' ? void 0 : 'button'"
         :disabled="variant === 'button' ? disabled : void 0"
+        :aria-disabled="variant === 'button' ? void 0 : disabled || void 0"
         :data-dragging="isDragging"
         data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
@@ -224,8 +225,10 @@ defineExpose({
 
         <div v-if="position === 'inside' ? !props.preview || (multiple ? !modelValue?.length : !modelValue) : true" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
           <slot name="leading" :ui="ui">
-            <UIcon v-if="variant === 'button'" :name="props.icon || appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
-            <UAvatar v-else :icon="props.icon || appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+            <template v-if="props.icon !== false">
+              <UIcon v-if="variant === 'button'" :name="props.icon ?? appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+              <UAvatar v-else :icon="props.icon ?? appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+            </template>
           </slot>
 
           <template v-if="variant !== 'button'">
@@ -261,7 +264,7 @@ defineExpose({
       :multiple="multiple"
       :required="props.required"
       :disabled="disabled"
-      v-bind="{ ...$attrs, ...ariaAttrs }"
+      v-bind="{ ...$attrs, ...ariaAttrs, 'data-slot': void 0 }"
     />
   </Primitive>
 </template>

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

@@ -2,7 +2,9 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFileDialogReturn } from '@vueuse/core';
 import theme from '#build/ui/file-upload';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { InputHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>;
@@ -15,11 +17,11 @@ export interface FileUploadProps<M extends boolean = false> extends /** @vue-ign
     id?: string;
     name?: string;
     /**
-     * The icon to display.
+     * The icon to display. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.upload
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     label?: string;
     description?: string;
     /**
@@ -127,6 +129,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     }): VNode[];
     'files'?(props: {
         files: FileUploadFiles<M>;
+        removeFile: (index?: number) => void;
     }): VNode[];
     'files-top'?(props: {
         files: FileUploadFiles<M>;
@@ -141,6 +144,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     'file'?(props: {
         file: File;
         index: number;
+        removeFile: (index?: number) => void;
     }): VNode[];
     'file-leading'?(props: {
         file: File;
@@ -159,6 +163,7 @@ export interface FileUploadSlots<M extends boolean = false> {
         file: File;
         index: number;
         ui: FileUpload['ui'];
+        removeFile: (index?: number) => void;
     }): VNode[];
 }
 declare const _default: typeof __VLS_export;
@@ -180,7 +185,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
     slots: FileUploadSlots<M>;
     emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => 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/Footer.vue

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

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/footer-columns';
-import type { IconProps, LinkProps } from '../types';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type FooterColumns = ComponentConfig<typeof theme, AppConfig, 'footerColumns'>;
 export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
@@ -61,7 +62,7 @@ declare const __VLS_export: <T extends FooterColumnLink>(__VLS_props: NonNullabl
     slots: FooterColumnsSlots<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/FooterColumns.vue

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

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/footer-columns';
-import type { IconProps, LinkProps } from '../types';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type FooterColumns = ComponentConfig<typeof theme, AppConfig, 'footerColumns'>;
 export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
@@ -61,7 +62,7 @@ declare const __VLS_export: <T extends FooterColumnLink>(__VLS_props: NonNullabl
     slots: FooterColumnsSlots<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/Form.d.vue.ts

@@ -51,7 +51,7 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
     ui?: {
         base?: any;
     };
-    onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
+    onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void) | (() => void);
 } & /** @vue-ignore */ Omit<FormHTMLAttributes, 'name'>;
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
     submit: [event: FormSubmitEvent<FormData<S, T>>];
@@ -115,7 +115,7 @@ declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N e
     slots: FormSlots;
     emit: ((evt: "error", event: FormErrorEvent) => void) & ((evt: "submit", event: FormSubmitEvent<FormData<S, 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/Form.vue

@@ -33,7 +33,7 @@ const emits = defineEmits(["submit", "error"]);
 defineSlots();
 const props = useComponentProps("form", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.form || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.form || {} }));
 const formId = props.id ?? useId();
 const formRef = useTemplateRef("formRef");
 const bus = useEventBus(`form-${formId}`);

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

@@ -51,7 +51,7 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
     ui?: {
         base?: any;
     };
-    onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
+    onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void) | (() => void);
 } & /** @vue-ignore */ Omit<FormHTMLAttributes, 'name'>;
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
     submit: [event: FormSubmitEvent<FormData<S, T>>];
@@ -115,7 +115,7 @@ declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N e
     slots: FormSlots;
     emit: ((evt: "error", event: FormErrorEvent) => void) & ((evt: "submit", event: FormSubmitEvent<FormData<S, 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/FormField.vue

@@ -29,7 +29,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("formField", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.formField || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.formField || {} })({
   size: props.size,
   required: props.required,
   orientation: props.orientation

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

@@ -1,7 +1,11 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/header';
-import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { DrawerProps } from './Drawer.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 Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
 type HeaderMode = 'modal' | 'slideover' | 'drawer';
@@ -73,7 +77,7 @@ declare const __VLS_export: <T extends HeaderMode>(__VLS_props: NonNullable<Awai
     slots: HeaderSlots;
     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/Header.vue

@@ -48,7 +48,7 @@ watch(() => route.fullPath, () => {
   if (!props.autoClose) return;
   open.value = false;
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.header || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.header || {} })());
 const Menu = computed(() => ({
   slideover: USlideover,
   modal: UModal,
@@ -99,7 +99,7 @@ function toggleOpen() {
     </div>
   </DefineRightTemplate>
 
-  <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] })">
     <slot name="top" />
 
     <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">