@nuxt/ui 4.0.0-alpha.0 → 4.0.0-alpha.1

package/dist/runtime/components/Separator.vue

@@ -13,7 +13,7 @@ import UAvatar from "./Avatar.vue";
 const props = defineProps({
   as: { type: null, required: false },
   label: { type: String, required: false },
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   avatar: { type: Object, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false },

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

@@ -2,7 +2,7 @@ import { Separator } from 'reka-ui';
 import type { SeparatorProps as _SeparatorProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/separator';
-import type { AvatarProps } from '../types';
+import type { AvatarProps, IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type Separator = ComponentConfig<typeof theme, AppConfig, 'separator'>;
 export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
@@ -17,7 +17,7 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
      * Display an icon in the middle.
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     /** Display an avatar in the middle. */
     avatar?: AvatarProps;
     /**
@@ -43,7 +43,7 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
 export interface SeparatorSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
     orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
 export default _default;

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

@@ -6,7 +6,7 @@ export interface SkeletonProps {
     as?: any;
     class?: any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 export default _default;

package/dist/runtime/components/Slideover.vue

@@ -20,7 +20,7 @@ const props = defineProps({
   side: { type: null, required: false, default: "right" },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   close: { type: [Boolean, Object], required: false, default: true },
-  closeIcon: { type: String, required: false },
+  closeIcon: { type: [String, Object], required: false },
   dismissible: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   ui: { type: null, required: false },

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

@@ -1,7 +1,7 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slideover';
-import type { ButtonProps } from '../types';
+import type { ButtonProps, IconProps } from '../types';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Slideover = ComponentConfig<typeof theme, AppConfig, 'slideover'>;
@@ -41,7 +41,7 @@ export interface SlideoverProps extends DialogRootProps {
      * @defaultValue appConfig.ui.icons.close
      * @IconifyIcon
      */
-    closeIcon?: string;
+    closeIcon?: IconProps['name'];
     /**
      * When `false`, the slideover will not close when clicking outside or pressing escape.
      * @defaultValue true
@@ -81,7 +81,7 @@ export interface SlideoverSlots {
         close: () => void;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
     "after:enter": () => any;

package/dist/runtime/components/Slider.vue

@@ -27,7 +27,7 @@ const props = defineProps({
   step: { type: Number, required: false, default: 1 },
   minStepsBetweenThumbs: { type: Number, required: false }
 });
-const emits = defineEmits(["update:modelValue", "change"]);
+const emits = defineEmits(["change"]);
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);

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

@@ -34,21 +34,20 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
     class?: any;
     ui?: Slider['slots'];
 }
-export interface SliderEmits<T extends number | number[] = number | number[]> {
-    'update:modelValue': [payload: T];
-    'change': [payload: Event];
+export interface SliderEmits {
+    change: [event: Event];
 }
 declare const _default: <T extends number | number[]>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onChange?: ((payload: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+        readonly onChange?: ((event: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & (SliderProps & {
         modelValue?: T;
-    }) & Partial<{}>> & import("vue").PublicProps;
+    }) & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};
-    emit: (((evt: "change", payload: Event) => void) & ((evt: "update:modelValue", payload: T) => void)) & ((evt: "update:modelValue", value: T | undefined) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,6 +1,7 @@
 import type { StepperRootProps, StepperRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/stepper';
+import type { IconProps } from '../types';
 import type { DynamicSlots } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Stepper = ComponentConfig<typeof theme, AppConfig, 'stepper'>;
@@ -12,7 +13,7 @@ export interface StepperItem {
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     content?: string;
     disabled?: boolean;
     class?: any;
@@ -48,8 +49,8 @@ export interface StepperProps<T extends StepperItem = StepperItem> extends Pick<
     ui?: Stepper['slots'];
 }
 export type StepperEmits<T extends StepperItem = StepperItem> = Omit<StepperRootEmits, 'update:modelValue'> & {
-    next: [payload: T];
-    prev: [payload: T];
+    next: [value: T];
+    prev: [value: T];
 };
 type SlotProps<T extends StepperItem> = (props: {
     item: T;
@@ -62,12 +63,12 @@ export type StepperSlots<T extends StepperItem = StepperItem> = {
 } & DynamicSlots<T>;
 declare const _default: <T extends StepperItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onNext?: ((payload: T) => any) | undefined;
-        readonly onPrev?: ((payload: T) => any) | undefined;
+        readonly onNext?: ((value: T) => any) | undefined;
+        readonly onPrev?: ((value: T) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onNext" | "onPrev"> & (StepperProps<T> & {
         modelValue?: string | number;
-    }) & Partial<{}>> & import("vue").PublicProps;
+    }) & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         next(): void;
         prev(): void;
@@ -76,7 +77,7 @@ declare const _default: <T extends StepperItem>(__VLS_props: NonNullable<Awaited
     }>): void;
     attrs: any;
     slots: StepperSlots<T>;
-    emit: (((evt: "next", payload: T) => void) & ((evt: "prev", payload: T) => void)) & ((evt: "update:modelValue", value: string | number | undefined) => void);
+    emit: (((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void)) & ((evt: "update:modelValue", value: string | number | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Switch.vue

@@ -16,9 +16,9 @@ const props = defineProps({
   color: { type: null, required: false },
   size: { type: null, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: String, required: false },
-  checkedIcon: { type: String, required: false },
-  uncheckedIcon: { type: String, required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  checkedIcon: { type: [String, Object], required: false },
+  uncheckedIcon: { type: [String, Object], required: false },
   label: { type: String, required: false },
   description: { type: String, required: false },
   class: { type: null, required: false },

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

@@ -1,6 +1,7 @@
 import type { SwitchRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/switch';
+import type { IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
 export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
@@ -24,24 +25,24 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
      * @defaultValue appConfig.ui.icons.loading
      * @IconifyIcon
      */
-    loadingIcon?: string;
+    loadingIcon?: IconProps['name'];
     /**
      * Display an icon when the switch is checked.
      * @IconifyIcon
      */
-    checkedIcon?: string;
+    checkedIcon?: IconProps['name'];
     /**
      * Display an icon when the switch is unchecked.
      * @IconifyIcon
      */
-    uncheckedIcon?: string;
+    uncheckedIcon?: IconProps['name'];
     label?: string;
     description?: string;
     class?: any;
     ui?: Switch['slots'];
 }
 export type SwitchEmits = {
-    change: [payload: Event];
+    change: [event: Event];
 };
 export interface SwitchSlots {
     label(props: {
@@ -53,13 +54,13 @@ export interface SwitchSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SwitchProps & {
     modelValue?: boolean;
-}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (payload: Event) => any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (event: Event) => any;
     "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<SwitchProps & {
     modelValue?: boolean;
 }> & Readonly<{
-    onChange?: ((payload: Event) => any) | undefined;
+    onChange?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SwitchSlots>;
 export default _default;

package/dist/runtime/components/Table.vue

@@ -315,13 +315,13 @@ defineExpose({
         </template>
 
         <tr v-else-if="loading && !!slots['loading']">
-          <td :colspan="columns?.length" :class="ui.loading({ class: props.ui?.loading })">
+          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.loading({ class: props.ui?.loading })">
             <slot name="loading" />
           </td>
         </tr>
 
         <tr v-else>
-          <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
+          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
               {{ empty || t("table.noData") }}
             </slot>

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

@@ -184,7 +184,7 @@ declare const _default: <T extends TableData>(__VLS_props: NonNullable<Awaited<t
         grouping?: GroupingState;
         expanded?: ExpandedState;
         pagination?: PaginationState;
-    }) & Partial<{}>> & import("vue").PublicProps;
+    }) & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
         tableApi: import("@tanstack/table-core").Table<T>;

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

@@ -2,7 +2,7 @@ import type { ComponentPublicInstance } from 'vue';
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tabs';
-import type { AvatarProps, BadgeProps } from '../types';
+import type { AvatarProps, BadgeProps, IconProps } from '../types';
 import type { DynamicSlots } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>;
@@ -11,7 +11,7 @@ export interface TabsItem {
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     avatar?: AvatarProps;
     /**
      * Display a badge on the item.
@@ -83,7 +83,7 @@ export type TabsSlots<T extends TabsItem = TabsItem> = {
 declare const _default: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & TabsProps<T> & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & TabsProps<T> & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         triggersRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>): void;

package/dist/runtime/components/Textarea.vue

@@ -36,14 +36,14 @@ const props = defineProps({
   modelModifiers: { type: Object, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: String, required: false },
+  leadingIcon: { type: [String, Object], required: false },
   trailing: { type: Boolean, required: false },
-  trailingIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: String, required: false }
+  loadingIcon: { type: [String, Object], required: false }
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
@@ -69,9 +69,12 @@ function updateInput(value) {
   if (props.modelModifiers?.number) {
     value = looseToNumber(value);
   }
-  if (props.modelModifiers?.nullify) {
+  if (props.modelModifiers?.nullable) {
     value ||= null;
   }
+  if (props.modelModifiers?.optional) {
+    value ||= void 0;
+  }
   modelValue.value = value;
   emitFormInput();
 }

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

@@ -1,6 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { ModelModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
@@ -38,18 +39,12 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     highlight?: boolean;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: {
-        string?: boolean;
-        number?: boolean;
-        trim?: boolean;
-        lazy?: boolean;
-        nullify?: boolean;
-    };
+    modelModifiers?: ModelModifiers;
     class?: any;
     ui?: Textarea['slots'];
 }
 export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
-    'update:modelValue': [payload: T];
+    'update:modelValue': [value: T];
     'blur': [event: FocusEvent];
     'change': [event: Event];
 }
@@ -62,14 +57,14 @@ declare const _default: <T extends TextareaValue>(__VLS_props: NonNullable<Await
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onBlur?: ((event: FocusEvent) => any) | undefined;
         readonly onChange?: ((event: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((payload: T) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & TextareaProps<T> & Partial<{}>> & import("vue").PublicProps;
+        readonly "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & TextareaProps<T> & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         textareaRef: import("vue").Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
     }>): void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/timeline';
-import type { AvatarProps } from '../types';
+import type { AvatarProps, IconProps } from '../types';
 import type { DynamicSlots } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Timeline = ComponentConfig<typeof theme, AppConfig, 'timeline'>;
@@ -8,7 +8,7 @@ export interface TimelineItem {
     date?: string;
     title?: string;
     description?: string;
-    icon?: string;
+    icon?: IconProps['name'];
     avatar?: AvatarProps;
     value?: string | number;
     slot?: string;
@@ -57,7 +57,7 @@ declare const _default: <T extends TimelineItem>(__VLS_props: NonNullable<Awaite
         readonly "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & (TimelineProps<T> & {
         modelValue?: string | number;
-    }) & Partial<{}>> & import("vue").PublicProps;
+    }) & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: TimelineSlots<T>;

package/dist/runtime/components/Toast.vue

@@ -17,12 +17,12 @@ const props = defineProps({
   as: { type: null, required: false },
   title: { type: [String, Object, Function], required: false },
   description: { type: [String, Object, Function], required: false },
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   avatar: { type: Object, required: false },
   color: { type: null, required: false },
   orientation: { type: null, required: false, default: "vertical" },
   close: { type: [Boolean, Object], required: false, default: true },
-  closeIcon: { type: String, required: false },
+  closeIcon: { type: [String, Object], required: false },
   actions: { type: Array, required: false },
   progress: { type: [Boolean, Object], required: false, default: true },
   class: { type: null, required: false },

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

@@ -1,7 +1,7 @@
 import type { ToastRootProps, ToastRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/toast';
-import type { AvatarProps, ButtonProps, ProgressProps } from '../types';
+import type { AvatarProps, ButtonProps, IconProps, ProgressProps } from '../types';
 import type { StringOrVNode } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Toast = ComponentConfig<typeof theme, AppConfig, 'toast'>;
@@ -16,7 +16,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     avatar?: AvatarProps;
     /**
      * @defaultValue 'primary'
@@ -38,7 +38,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
      * @defaultValue appConfig.ui.icons.close
      * @IconifyIcon
      */
-    closeIcon?: string;
+    closeIcon?: IconProps['name'];
     /**
      * Display a list of actions:
      * - under the title and description when orientation is `vertical`

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

@@ -30,7 +30,7 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
 export interface ToasterSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     progress: boolean;
     expand: boolean;
     duration: number;

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

@@ -42,7 +42,7 @@ export interface TooltipSlots {
     }): any;
     content(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TooltipProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;

package/dist/runtime/components/Tree.vue

@@ -17,9 +17,9 @@ const props = defineProps({
   size: { type: null, required: false },
   valueKey: { type: null, required: false, default: "value" },
   labelKey: { type: null, required: false, default: "label" },
-  trailingIcon: { type: String, required: false },
-  expandedIcon: { type: String, required: false },
-  collapsedIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  expandedIcon: { type: [String, Object], required: false },
+  collapsedIcon: { type: [String, Object], required: false },
   items: { type: null, required: false },
   modelValue: { type: null, required: false },
   defaultValue: { type: null, required: false },

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

@@ -1,6 +1,7 @@
 import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
+import type { IconProps } from '../types';
 import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>;
@@ -8,12 +9,12 @@ export type TreeItem = {
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     label?: string;
     /**
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     defaultExpanded?: boolean;
     disabled?: boolean;
     value?: string;
@@ -54,19 +55,19 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItem
      * @defaultValue appConfig.ui.icons.chevronDown
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     /**
      * The icon displayed when a parent node is expanded.
      * @defaultValue appConfig.ui.icons.folderOpen
      * @IconifyIcon
      */
-    expandedIcon?: string;
+    expandedIcon?: IconProps['name'];
     /**
      * The icon displayed when a parent node is collapsed.
      * @defaultValue appConfig.ui.icons.folder
      * @IconifyIcon
      */
-    collapsedIcon?: string;
+    collapsedIcon?: IconProps['name'];
     items?: T;
     /** The controlled value of the Tree. Can be bind as `v-model`. */
     modelValue?: GetModelValue<T, VK, M>;
@@ -99,13 +100,13 @@ export type TreeSlots<A extends TreeItem[] = TreeItem[], T extends NestedItem<A>
 }>;
 declare const _default: <T extends TreeItem[], VK extends GetItemKeys<T> = "value", M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
         readonly "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, VK, M> & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, VK, M> & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: TreeSlots<T, NestedItem<T>>;
-    emit: ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void) & ((evt: "update:expanded", val: string[]) => void);
+    emit: ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "update:expanded", val: string[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -36,7 +36,7 @@ export interface UserSlots {
     description(props?: {}): any;
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
     orientation: User["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeAvatar.vue.d.ts

@@ -3,5 +3,5 @@ export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProp
     light: string;
     dark: string;
 }
-declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeButton.vue.d.ts

@@ -9,7 +9,7 @@ export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProp
      */
     variant?: ButtonProps['variant'];
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
     color: ButtonProps["color"];
     variant: ButtonProps["variant"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

package/dist/runtime/components/color-mode/ColorModeImage.vue.d.ts

@@ -2,5 +2,5 @@ type __VLS_Props = {
     dark: string;
     light: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeSelect.vue.d.ts

@@ -1,5 +1,5 @@
 import type { SelectMenuProps } from '@nuxt/ui';
 export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
 }
-declare const _default: import("vue").DefineComponent<ColorModeSelectProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeSwitch.vue.d.ts

@@ -1,5 +1,5 @@
 import type { SwitchProps } from '@nuxt/ui';
 export interface ColorModeSwitchProps extends /** @vue-ignore */ Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
 }
-declare const _default: import("vue").DefineComponent<ColorModeSwitchProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/content/ContentNavigation.vue

@@ -19,7 +19,7 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "nav" },
   defaultOpen: { type: Boolean, required: false, default: void 0 },
-  trailingIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
   color: { type: null, required: false },
   variant: { type: null, required: false },
   highlight: { type: Boolean, required: false, default: false },