@nuxt/ui 4.4.0 → 4.5.1

package/dist/runtime/components/Carousel.vue

@@ -8,6 +8,7 @@ import useEmblaCarousel from "embla-carousel-vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
@@ -28,7 +29,7 @@ const props = defineProps({
   fade: { type: [Boolean, Object], required: false, default: false },
   wheelGestures: { type: [Boolean, Object], required: false, default: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   align: { type: [String, Function], required: false, default: "center" },
   containScroll: { type: [Boolean, String], required: false, default: "trimSnaps" },
   slidesToScroll: { type: [String, Number], required: false, default: 1 },
@@ -50,6 +51,7 @@ defineSlots();
 const emits = defineEmits(["select"]);
 const { dir, t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("carousel", props);
 const rootProps = useForwardProps(reactivePick(props, "active", "align", "breakpoints", "containScroll", "dragFree", "dragThreshold", "duration", "inViewThreshold", "loop", "skipSnaps", "slidesToScroll", "startIndex", "watchDrag", "watchResize", "watchSlides", "watchFocus"));
 const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? appConfig.ui.icons.arrowRight : appConfig.ui.icons.arrowLeft));
 const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConfig.ui.icons.arrowLeft : appConfig.ui.icons.arrowRight));
@@ -200,25 +202,25 @@ defineExpose({
     :data-orientation="orientation"
     tabindex="0"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
     @keydown="onKeyDown"
   >
-    <div ref="emblaRef" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
-      <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+    <div ref="emblaRef" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
+      <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
         <div
           v-for="(item, index) in items"
           :key="index"
           v-bind="dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
           data-slot="item"
-          :class="ui.item({ class: [props.ui?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
+          :class="ui.item({ class: [uiProp?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
         >
           <slot :item="item" :index="index" />
         </div>
       </div>
     </div>
 
-    <div v-if="arrows || dots" data-slot="controls" :class="ui.controls({ class: props.ui?.controls })">
-      <div v-if="arrows" data-slot="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
+    <div v-if="arrows || dots" data-slot="controls" :class="ui.controls({ class: uiProp?.controls })">
+      <div v-if="arrows" data-slot="arrows" :class="ui.arrows({ class: uiProp?.arrows })">
         <UButton
           :disabled="!canScrollPrev"
           :icon="prevIcon"
@@ -227,7 +229,7 @@ defineExpose({
           :aria-label="t('carousel.prev')"
           v-bind="typeof prev === 'object' ? prev : void 0"
           data-slot="prev"
-          :class="ui.prev({ class: props.ui?.prev })"
+          :class="ui.prev({ class: uiProp?.prev })"
           @click="scrollPrev"
         />
         <UButton
@@ -238,12 +240,12 @@ defineExpose({
           :aria-label="t('carousel.next')"
           v-bind="typeof next === 'object' ? next : void 0"
           data-slot="next"
-          :class="ui.next({ class: props.ui?.next })"
+          :class="ui.next({ class: uiProp?.next })"
           @click="scrollNext"
         />
       </div>
 
-      <div v-if="dots" role="tablist" :aria-label="t('carousel.dots')" data-slot="dots" :class="ui.dots({ class: props.ui?.dots })">
+      <div v-if="dots" role="tablist" :aria-label="t('carousel.dots')" data-slot="dots" :class="ui.dots({ class: uiProp?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
             type="button"
@@ -251,7 +253,7 @@ defineExpose({
             :aria-label="t('carousel.goto', { slide: index + 1 })"
             :aria-selected="selectedIndex === index"
             data-slot="dot"
-            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            :class="ui.dot({ class: uiProp?.dot, active: selectedIndex === index })"
             :data-state="selectedIndex === index ? 'active' : void 0"
             @click="scrollTo(index)"
           />

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
 import type { AutoplayOptionsType } from 'embla-carousel-autoplay';
@@ -95,10 +96,10 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Om
     ui?: Carousel['slots'];
 }
 export type CarouselSlots<T extends CarouselItem = CarouselItem> = {
-    default(props: {
+    default?(props: {
         item: T;
         index: number;
-    }): any;
+    }): VNode[];
 };
 export interface CarouselEmits {
     /**

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

@@ -1,6 +1,8 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/changelog-version';
 import type { BadgeProps, LinkProps, UserProps } from '../types';
+import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type ChangelogVersion = ComponentConfig<typeof theme, AppConfig, 'changelogVersion'>;
 export interface ChangelogVersionProps {
@@ -22,7 +24,7 @@ export interface ChangelogVersionProps {
     /** The authors of the changelog version. */
     authors?: UserProps[];
     /** The image of the changelog version. Can be a string or an object. */
-    image?: string | (Partial<HTMLImageElement> & {
+    image?: string | (Partial<ImgHTMLAttributes> & {
         [key: string]: any;
     });
     /**
@@ -37,23 +39,23 @@ export interface ChangelogVersionProps {
     ui?: ChangelogVersion['slots'];
 }
 export interface ChangelogVersionSlots {
-    header(props?: {}): any;
-    badge(props: {
+    header?(props?: {}): VNode[];
+    badge?(props: {
         ui: ChangelogVersion['ui'];
-    }): any;
-    date(props?: {}): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    image(props: {
+    }): VNode[];
+    date?(props?: {}): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    image?(props: {
         ui: ChangelogVersion['ui'];
-    }): any;
-    body(props?: {}): any;
-    footer(props?: {}): any;
-    authors(props?: {}): any;
-    actions(props?: {}): any;
-    indicator(props: {
+    }): VNode[];
+    body?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
+    authors?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    indicator?(props: {
         ui: ChangelogVersion['ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChangelogVersion.vue

@@ -6,8 +6,9 @@ import theme from "#build/ui/changelog-version";
 import { computed } from "vue";
 import { Primitive, useDateFormatter } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
-import ImageComponent from "#build/ui-image-component";
 import { useLocale, useAppConfig } from "#imports";
+import ImageComponent from "#build/ui-image-component";
+import { useComponentUI } from "../composables/useComponentUI";
 import { getSlotChildrenText } from "../utils";
 import { tv } from "../utils/tv";
 import ULink from "./Link.vue";
@@ -27,11 +28,12 @@ const props = defineProps({
   target: { type: [String, Object, null], required: false },
   onClick: { type: Function, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const { locale } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("changelogVersion", props);
 const formatter = useDateFormatter(locale.value.code);
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
 const [DefineDateTemplate, ReuseDateTemplate] = createReusableTemplate({
@@ -85,28 +87,28 @@ const ariaLabel = computed(() => {
   </DefineLinkTemplate>
 
   <DefineDateTemplate v-slot="{ hidden }">
-    <time v-if="date" :datetime="datetime" data-slot="date" :class="ui.date({ class: props.ui?.date, hidden })">
+    <time v-if="date" :datetime="datetime" data-slot="date" :class="ui.date({ class: uiProp?.date, hidden })">
       <slot name="date">
         {{ date }}
       </slot>
     </time>
   </DefineDateTemplate>
 
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
-    <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" @click="onClick">
+    <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })">
       <slot name="indicator" :ui="ui">
         <ReuseDateTemplate />
 
-        <div data-slot="dot" :class="ui.dot({ class: props.ui?.dot })">
-          <div data-slot="dotInner" :class="ui.dotInner({ class: props.ui?.dotInner })" />
+        <div data-slot="dot" :class="ui.dot({ class: uiProp?.dot })">
+          <div data-slot="dotInner" :class="ui.dotInner({ class: uiProp?.dotInner })" />
         </div>
       </slot>
     </div>
 
-    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.header || (date || !!slots.date) || (badge || !!slots.badge) || (title || !!slots.title) || (description || !!slots.description) || (image || !!slots.image)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+      <div v-if="!!slots.header || (date || !!slots.date) || (badge || !!slots.badge) || (title || !!slots.title) || (description || !!slots.description) || (image || !!slots.image)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
         <slot name="header">
-          <div v-if="date || !!slots.date || (badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: props.ui?.meta, badge: !!badge || !!slots.badge || !props.indicator })">
+          <div v-if="date || !!slots.date || (badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: uiProp?.meta, badge: !!badge || !!slots.badge || !props.indicator })">
             <slot name="badge" :ui="ui">
               <UBadge
                 v-if="badge"
@@ -114,14 +116,14 @@ const ariaLabel = computed(() => {
                 variant="solid"
                 v-bind="typeof badge === 'string' ? { label: badge } : badge"
                 data-slot="badge"
-                :class="ui.badge({ class: props.ui?.badge })"
+                :class="ui.badge({ class: uiProp?.badge })"
               />
             </slot>
 
             <ReuseDateTemplate :hidden="!!props.indicator" />
           </div>
 
-          <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
+          <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
             <ReuseLinkTemplate />
 
             <slot name="title">
@@ -129,20 +131,20 @@ const ariaLabel = computed(() => {
             </slot>
           </h2>
 
-          <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+          <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
             <slot name="description">
               {{ description }}
             </slot>
           </div>
 
-          <div v-if="image || !!slots.image" data-slot="imageWrapper" :class="ui.imageWrapper({ class: props.ui?.imageWrapper })">
+          <div v-if="image || !!slots.image" data-slot="imageWrapper" :class="ui.imageWrapper({ class: uiProp?.imageWrapper })">
             <slot name="image" :ui="ui">
               <component
                 :is="ImageComponent"
                 v-if="image"
                 v-bind="typeof image === 'string' ? { src: image, alt: title } : { alt: title, ...image }"
                 data-slot="image"
-                :class="ui.image({ class: props.ui?.image, to: !!to })"
+                :class="ui.image({ class: uiProp?.image, to: !!to })"
               />
             </slot>
 
@@ -153,9 +155,9 @@ const ariaLabel = computed(() => {
 
       <slot name="body" />
 
-      <div v-if="!!slots.footer || (authors?.length || !!slots.authors) || !!slots.actions" data-slot="footer" :class="ui.footer({ class: props.ui?.footer, body: !!slots.body })">
+      <div v-if="!!slots.footer || (authors?.length || !!slots.authors) || !!slots.actions" data-slot="footer" :class="ui.footer({ class: uiProp?.footer, body: !!slots.body })">
         <slot name="footer">
-          <div v-if="authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: props.ui?.authors })">
+          <div v-if="authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: uiProp?.authors })">
             <slot name="authors">
               <UUser
                 v-for="(author, index) in authors"

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

@@ -1,6 +1,8 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/changelog-version';
 import type { BadgeProps, LinkProps, UserProps } from '../types';
+import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type ChangelogVersion = ComponentConfig<typeof theme, AppConfig, 'changelogVersion'>;
 export interface ChangelogVersionProps {
@@ -22,7 +24,7 @@ export interface ChangelogVersionProps {
     /** The authors of the changelog version. */
     authors?: UserProps[];
     /** The image of the changelog version. Can be a string or an object. */
-    image?: string | (Partial<HTMLImageElement> & {
+    image?: string | (Partial<ImgHTMLAttributes> & {
         [key: string]: any;
     });
     /**
@@ -37,23 +39,23 @@ export interface ChangelogVersionProps {
     ui?: ChangelogVersion['slots'];
 }
 export interface ChangelogVersionSlots {
-    header(props?: {}): any;
-    badge(props: {
+    header?(props?: {}): VNode[];
+    badge?(props: {
         ui: ChangelogVersion['ui'];
-    }): any;
-    date(props?: {}): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    image(props: {
+    }): VNode[];
+    date?(props?: {}): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    image?(props: {
         ui: ChangelogVersion['ui'];
-    }): any;
-    body(props?: {}): any;
-    footer(props?: {}): any;
-    authors(props?: {}): any;
-    actions(props?: {}): any;
-    indicator(props: {
+    }): VNode[];
+    body?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
+    authors?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    indicator?(props: {
         ui: ChangelogVersion['ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { SpringOptions, UseScrollOptions } from 'motion-v';
 import theme from '#build/ui/changelog-versions';
@@ -28,14 +29,14 @@ export interface ChangelogVersionsProps<T extends ChangelogVersionProps = Change
     class?: any;
     ui?: ChangelogVersions['slots'];
 }
-type ExtendSlotWithVersion<T extends ChangelogVersionProps, K extends keyof ChangelogVersionSlots> = ChangelogVersionSlots[K] extends (props: infer P) => any ? (props: P & {
+type ExtendSlotWithVersion<T extends ChangelogVersionProps, K extends keyof ChangelogVersionSlots> = Required<ChangelogVersionSlots>[K] extends (props: infer P) => VNode[] ? (props: P & {
     version: T;
-}) => any : ChangelogVersionSlots[K];
+}) => VNode[] : Required<ChangelogVersionSlots>[K];
 export type ChangelogVersionsSlots<T extends ChangelogVersionProps = ChangelogVersionProps> = {
-    [K in keyof ChangelogVersionSlots]: ExtendSlotWithVersion<T, K>;
+    [K in keyof ChangelogVersionSlots]?: ExtendSlotWithVersion<T, K>;
 } & {
-    default(props?: {}): any;
-    indicator(props?: {}): any;
+    default?(props?: {}): VNode[];
+    indicator?(props?: {}): VNode[];
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChangelogVersions.vue

@@ -8,6 +8,7 @@ import { Primitive } from "reka-ui";
 import { Motion, useScroll, useSpring, useTransform } from "motion-v";
 import { defu } from "defu";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UChangelogVersion from "./ChangelogVersion.vue";
@@ -17,11 +18,12 @@ const props = defineProps({
   indicator: { type: [Boolean, Object], required: false, default: true },
   indicatorMotion: { type: [Boolean, Object], required: false, default: true },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const getProxySlots = () => omit(slots, ["default", "indicator"]);
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("changelogVersions", props);
 const springOptions = computed(() => defu(typeof props.indicatorMotion === "object" ? props.indicatorMotion : {}, { damping: 30, restDelta: 1e-3 }));
 const scrollOptions = computed(() => typeof props.indicator === "object" ? props.indicator : {});
 const { scrollYProgress } = useScroll(scrollOptions.value);
@@ -31,14 +33,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.changelogVers
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })">
       <slot name="indicator">
-        <Motion v-if="!!props.indicatorMotion" data-slot="beam" :class="ui.beam({ class: props.ui?.beam })" :style="{ height }" />
+        <Motion v-if="!!props.indicatorMotion" data-slot="beam" :class="ui.beam({ class: uiProp?.beam })" :style="{ height }" />
       </slot>
     </div>
 
-    <div v-if="versions?.length || !!slots.default" data-slot="container" :class="ui.container({ class: props.ui?.container })">
+    <div v-if="versions?.length || !!slots.default" data-slot="container" :class="ui.container({ class: uiProp?.container })">
       <slot>
         <UChangelogVersion
           v-for="(version, index) in versions"

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { SpringOptions, UseScrollOptions } from 'motion-v';
 import theme from '#build/ui/changelog-versions';
@@ -28,14 +29,14 @@ export interface ChangelogVersionsProps<T extends ChangelogVersionProps = Change
     class?: any;
     ui?: ChangelogVersions['slots'];
 }
-type ExtendSlotWithVersion<T extends ChangelogVersionProps, K extends keyof ChangelogVersionSlots> = ChangelogVersionSlots[K] extends (props: infer P) => any ? (props: P & {
+type ExtendSlotWithVersion<T extends ChangelogVersionProps, K extends keyof ChangelogVersionSlots> = Required<ChangelogVersionSlots>[K] extends (props: infer P) => VNode[] ? (props: P & {
     version: T;
-}) => any : ChangelogVersionSlots[K];
+}) => VNode[] : Required<ChangelogVersionSlots>[K];
 export type ChangelogVersionsSlots<T extends ChangelogVersionProps = ChangelogVersionProps> = {
-    [K in keyof ChangelogVersionSlots]: ExtendSlotWithVersion<T, K>;
+    [K in keyof ChangelogVersionSlots]?: ExtendSlotWithVersion<T, K>;
 } & {
-    default(props?: {}): any;
-    indicator(props?: {}): any;
+    default?(props?: {}): VNode[];
+    indicator?(props?: {}): VNode[];
 };
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIMessage } from 'ai';
 import theme from '#build/ui/chat-message';
@@ -48,14 +49,14 @@ export interface ChatMessageProps extends UIMessage {
     ui?: ChatMessage['slots'];
 }
 export interface ChatMessageSlots {
-    leading(props: {
+    leading?(props: {
         avatar: ChatMessageProps['avatar'];
         ui: ChatMessage['ui'];
-    }): any;
-    content(props: ChatMessageProps): any;
-    actions(props: {
+    }): VNode[];
+    content?(props: ChatMessageProps): VNode[];
+    actions?(props: {
         actions: ChatMessageProps['actions'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChatMessage.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/chat-message";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
@@ -22,7 +23,7 @@ const props = defineProps({
   compact: { type: Boolean, required: false },
   content: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   id: { type: String, required: true },
   role: { type: String, required: true },
   metadata: { type: null, required: false },
@@ -30,6 +31,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatMessage", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage || {} })({
   variant: props.variant,
   side: props.side,
@@ -40,16 +42,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage |
 </script>
 
 <template>
-  <Primitive :as="as" :data-role="role" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
-      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
+  <Primitive :as="as" :data-role="role" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
         <slot name="leading" :avatar="avatar" :ui="ui">
-          <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          <UAvatar v-else-if="avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+          <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
+          <UAvatar v-else-if="avatar" :size="uiProp?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
         </slot>
       </div>
 
-      <div v-if="content || parts.length || !!slots.content" data-slot="content" :class="ui.content({ class: props.ui?.content })">
+      <div v-if="content || parts.length || !!slots.content" data-slot="content" :class="ui.content({ class: uiProp?.content })">
         <slot
           :id="id"
           name="content"
@@ -70,7 +72,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage |
         </slot>
       </div>
 
-      <div v-if="actions || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
+      <div v-if="actions || !!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
         <slot name="actions" :actions="actions">
           <UTooltip v-for="(action, index) in actions" :key="index" :text="action.label">
             <UButton

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIMessage } from 'ai';
 import theme from '#build/ui/chat-message';
@@ -48,14 +49,14 @@ export interface ChatMessageProps extends UIMessage {
     ui?: ChatMessage['slots'];
 }
 export interface ChatMessageSlots {
-    leading(props: {
+    leading?(props: {
         avatar: ChatMessageProps['avatar'];
         ui: ChatMessage['ui'];
-    }): any;
-    content(props: ChatMessageProps): any;
-    actions(props: {
+    }): VNode[];
+    content?(props: ChatMessageProps): VNode[];
+    actions?(props: {
         actions: ChatMessageProps['actions'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIMessage, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
@@ -53,20 +54,20 @@ export interface ChatMessagesProps {
     class?: any;
     ui?: ChatMessages['slots'];
 }
-type ExtendSlotWithVersion<K extends keyof ChatMessageSlots> = ChatMessageSlots[K] extends (props: infer P) => any ? (props: P & {
+type ExtendSlotWithVersion<K extends keyof ChatMessageSlots> = Required<ChatMessageSlots>[K] extends (props: infer P) => VNode[] ? (props: P & {
     message: UIMessage;
-}) => any : ChatMessageSlots[K];
+}) => VNode[] : Required<ChatMessageSlots>[K];
 export type ChatMessagesSlots = {
-    [K in keyof ChatMessageSlots]: ExtendSlotWithVersion<K>;
+    [K in keyof ChatMessageSlots]?: ExtendSlotWithVersion<K>;
 } & {
-    default(props?: {}): any;
-    indicator(props: {
+    default?(props?: {}): VNode[];
+    indicator?(props: {
         ui: ChatMessages['ui'];
-    }): any;
-    viewport(props: {
+    }): VNode[];
+    viewport?(props: {
         ui: ChatMessages['ui'];
         onClick: () => void;
-    }): any;
+    }): VNode[];
 };
 declare const _default: typeof __VLS_export;
 export default _default;