@nuxt/ui 4.7.1 → 4.8.1

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

@@ -30,6 +30,10 @@ export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
      * @IconifyIcon
      */
     separatorIcon?: IconProps['name'];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Breadcrumb['variants']['color'];
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'

package/dist/runtime/components/Button.vue

@@ -5,9 +5,9 @@ import theme from "#build/ui/button";
 <script setup>
 import { computed, ref, inject } from "vue";
 import { defu } from "defu";
-import { useForwardProps } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { formLoadingInjectionKey } from "../composables/useFormField";
@@ -18,7 +18,7 @@ import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
 import ULink from "./Link.vue";
 import ULinkBase from "./LinkBase.vue";
-const props = defineProps({
+const _props = defineProps({
   label: { type: String, required: false },
   color: { type: null, required: false },
   activeColor: { type: null, required: false },
@@ -66,9 +66,9 @@ const props = defineProps({
   replace: { type: Boolean, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("button", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("button", props);
-const { orientation, size: buttonSize } = useFieldGroup(props);
+const { orientation, size: buttonSize } = useFieldGroup(_props);
 const linkProps = useForwardProps(pickLinkProps(props));
 const loadingAutoState = ref(false);
 const formLoading = inject(formLoadingInjectionKey, void 0);
@@ -104,7 +104,7 @@ const ui = computed(() => tv({
 })({
   color: props.color,
   variant: props.variant,
-  size: buttonSize.value,
+  size: buttonSize.value ?? props.size,
   loading: isLoading.value,
   block: props.block,
   square: props.square || !slots.default && !props.label,
@@ -117,8 +117,8 @@ const ui = computed(() => tv({
 <template>
   <ULink
     v-slot="{ active, ...slotProps }"
-    :type="type"
-    :disabled="disabled || isLoading"
+    :type="props.type"
+    :disabled="props.disabled || isLoading"
     v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
     custom
   >
@@ -126,26 +126,26 @@ const ui = computed(() => tv({
       v-bind="slotProps"
       data-slot="base"
       :class="ui.base({
-  class: [uiProp?.base, props.class],
+  class: [props.ui?.base, props.class],
   active,
-  ...active && activeVariant ? { variant: activeVariant } : {},
-  ...active && activeColor ? { color: activeColor } : {}
+  ...active && props.activeVariant ? { variant: props.activeVariant } : {},
+  ...active && props.activeColor ? { color: props.activeColor } : {}
 })"
       @click="onClickWrapper"
     >
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon, active })" />
-        <UAvatar v-else-if="!!avatar" :size="uiProp?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar, active })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })" />
+        <UAvatar v-else-if="!!props.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
       </slot>
 
       <slot :ui="ui">
-        <span v-if="label !== void 0 && label !== null" data-slot="label" :class="ui.label({ class: uiProp?.label, active })">
-          {{ label }}
+        <span v-if="props.label !== void 0 && props.label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label, active })">
+          {{ props.label }}
         </span>
       </slot>
 
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon, active })" />
+        <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })" />
       </slot>
     </ULinkBase>
   </ULink>

package/dist/runtime/components/Calendar.vue

@@ -5,15 +5,16 @@ import theme from "#build/ui/calendar";
 
 <script setup>
 import { computed } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
+import {} from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { Calendar as SingleCalendar, RangeCalendar } from "reka-ui/namespaced";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   nextYearIcon: { type: null, required: false },
   nextYear: { type: Object, required: false },
@@ -60,10 +61,10 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "update:placeholder", "update:validModelValue", "update:startValue"]);
 defineSlots();
+const props = useComponentProps("calendar", _props);
 const { dir, t, locale } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("calendar", props);
-const rootProps = useForwardPropsEmits(reactiveOmit(props, "range", "modelValue", "defaultValue", "color", "variant", "size", "monthControls", "yearControls", "class", "ui"), emits);
+const rootProps = useForwardProps(reactiveOmit(props, "range", "modelValue", "defaultValue", "color", "variant", "size", "monthControls", "yearControls", "class", "ui"), emits);
 const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight));
 const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
 const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft));
@@ -87,19 +88,19 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
   <Calendar.Root
     v-slot="{ weekDays, grid }"
     v-bind="rootProps"
-    :model-value="modelValue"
-    :default-value="defaultValue"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
-    <Calendar.Header data-slot="header" :class="ui.header({ class: uiProp?.header })">
+    <Calendar.Header data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
         <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
       </Calendar.Prev>
       <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
         <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
       </Calendar.Prev>
-      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="ui.heading({ class: uiProp?.heading })">
+      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="ui.heading({ class: props.ui?.heading })">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
@@ -111,20 +112,20 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
         <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
       </Calendar.Next>
     </Calendar.Header>
-    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <Calendar.Grid
         v-for="month in grid"
         :key="month.value.toString()"
         data-slot="grid"
-        :class="ui.grid({ class: uiProp?.grid })"
+        :class="ui.grid({ class: props.ui?.grid })"
       >
         <Calendar.GridHead>
-          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="ui.gridWeekDaysRow({ class: uiProp?.gridWeekDaysRow })">
+          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
             <Calendar.HeadCell
               v-for="day in weekDays"
               :key="day"
               data-slot="headCell"
-              :class="ui.headCell({ class: uiProp?.headCell })"
+              :class="ui.headCell({ class: props.ui?.headCell })"
             >
               <slot name="week-day" :day="day">
                 {{ day }}
@@ -132,18 +133,18 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
             </Calendar.HeadCell>
           </Calendar.GridRow>
         </Calendar.GridHead>
-        <Calendar.GridBody data-slot="gridBody" :class="ui.gridBody({ class: uiProp?.gridBody })">
+        <Calendar.GridBody data-slot="gridBody" :class="ui.gridBody({ class: props.ui?.gridBody })">
           <Calendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDate-${index}`"
             data-slot="gridRow"
-            :class="ui.gridRow({ class: uiProp?.gridRow })"
+            :class="ui.gridRow({ class: props.ui?.gridRow })"
           >
             <td
-              v-if="weekNumbers && weekDates[0]"
+              v-if="props.weekNumbers && weekDates[0]"
               role="gridcell"
               data-slot="cellWeek"
-              :class="ui.cellWeek({ class: uiProp?.cellWeek })"
+              :class="ui.cellWeek({ class: props.ui?.cellWeek })"
             >
               {{ getWeekNumber(weekDates[0], locale.code) }}
             </td>
@@ -152,13 +153,13 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
               :key="weekDate.toString()"
               :date="weekDate"
               data-slot="cell"
-              :class="ui.cell({ class: uiProp?.cell })"
+              :class="ui.cell({ class: props.ui?.cell })"
             >
               <Calendar.CellTrigger
                 :day="weekDate"
                 :month="month.value"
                 data-slot="cellTrigger"
-                :class="ui.cellTrigger({ class: uiProp?.cellTrigger })"
+                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
               >
                 <slot name="day" :day="weekDate">
                   {{ weekDate.day }}

package/dist/runtime/components/Card.vue

@@ -6,9 +6,9 @@ import theme from "#build/ui/card";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -17,36 +17,36 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("card", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("card", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.card || {} })({
   variant: props.variant
 }));
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
-        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <div v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </div>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+        <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
-            {{ description }}
+            {{ props.description }}
           </slot>
         </div>
       </slot>
     </div>
 
-    <div v-if="!!slots.default" data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div v-if="!!slots.default" data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot />
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

package/dist/runtime/components/Carousel.vue

@@ -5,14 +5,15 @@ import theme from "#build/ui/carousel";
 <script setup>
 import { computed, ref, watch, onMounted, onBeforeUnmount } from "vue";
 import useEmblaCarousel from "embla-carousel-vue";
-import { Primitive, useForwardProps } from "reka-ui";
+import { Primitive } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   prev: { type: Object, required: false },
   prevIcon: { type: null, required: false },
@@ -49,9 +50,9 @@ const props = defineProps({
 });
 defineSlots();
 const emits = defineEmits(["select"]);
+const props = useComponentProps("carousel", _props);
 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));
@@ -59,13 +60,13 @@ const stopAutoplayOnInteraction = computed(() => {
   if (typeof props.autoplay === "boolean") {
     return true;
   }
-  return props.autoplay.stopOnInteraction ?? true;
+  return props.autoplay?.stopOnInteraction ?? true;
 });
 const stopAutoScrollOnInteraction = computed(() => {
   if (typeof props.autoScroll === "boolean") {
     return true;
   }
-  return props.autoScroll.stopOnInteraction ?? true;
+  return props.autoScroll?.stopOnInteraction ?? true;
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.carousel || {} })({
   orientation: props.orientation
@@ -196,40 +197,40 @@ defineExpose({
 
 <template>
   <Primitive
-    :as="as"
+    :as="props.as"
     role="region"
     aria-roledescription="carousel"
-    :data-orientation="orientation"
+    :data-orientation="props.orientation"
     tabindex="0"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @keydown="onKeyDown"
   >
-    <div ref="emblaRef" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
-      <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+    <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
-          v-for="(item, index) in items"
+          v-for="(item, index) in props.items"
           :key="index"
-          v-bind="dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
+          v-bind="props.dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
           data-slot="item"
-          :class="ui.item({ class: [uiProp?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
+          :class="ui.item({ class: [props.ui?.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: uiProp?.controls })">
-      <div v-if="arrows" data-slot="arrows" :class="ui.arrows({ class: uiProp?.arrows })">
+    <div v-if="props.arrows || props.dots" data-slot="controls" :class="ui.controls({ class: props.ui?.controls })">
+      <div v-if="props.arrows" data-slot="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
         <UButton
           :disabled="!canScrollPrev"
           :icon="prevIcon"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.prev')"
-          v-bind="typeof prev === 'object' ? prev : void 0"
+          v-bind="typeof props.prev === 'object' ? props.prev : void 0"
           data-slot="prev"
-          :class="ui.prev({ class: uiProp?.prev })"
+          :class="ui.prev({ class: props.ui?.prev })"
           @click="scrollPrev"
         />
         <UButton
@@ -238,14 +239,14 @@ defineExpose({
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.next')"
-          v-bind="typeof next === 'object' ? next : void 0"
+          v-bind="typeof props.next === 'object' ? props.next : void 0"
           data-slot="next"
-          :class="ui.next({ class: uiProp?.next })"
+          :class="ui.next({ class: props.ui?.next })"
           @click="scrollNext"
         />
       </div>
 
-      <div v-if="dots" role="tablist" :aria-label="t('carousel.dots')" data-slot="dots" :class="ui.dots({ class: uiProp?.dots })">
+      <div v-if="props.dots" role="tablist" :aria-label="t('carousel.dots')" data-slot="dots" :class="ui.dots({ class: props.ui?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
             type="button"
@@ -253,7 +254,7 @@ defineExpose({
             :aria-label="t('carousel.goto', { slide: index + 1 })"
             :aria-selected="selectedIndex === index"
             data-slot="dot"
-            :class="ui.dot({ class: uiProp?.dot, active: selectedIndex === index })"
+            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
             :data-state="selectedIndex === index ? 'active' : void 0"
             @click="scrollTo(index)"
           />

package/dist/runtime/components/ChangelogVersion.vue

@@ -8,7 +8,8 @@ import { Primitive, useDateFormatter } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { usePrefix } from "../composables/usePrefix";
 import ImageComponent from "#build/ui-image-component";
 import { getSlotChildrenText } from "../utils";
 import { tv } from "../utils/tv";
@@ -16,7 +17,7 @@ import ULink from "./Link.vue";
 import UBadge from "./Badge.vue";
 import UUser from "./User.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "article" },
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -32,10 +33,11 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("changelogVersion", _props);
 const { locale } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("changelogVersion", props);
 const formatter = useDateFormatter(locale.value.code);
+const prefix = usePrefix();
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
 const [DefineDateTemplate, ReuseDateTemplate] = createReusableTemplate({
   props: {
@@ -77,75 +79,75 @@ const ariaLabel = computed(() => {
 <template>
   <DefineLinkTemplate>
     <ULink
-      v-if="to"
+      v-if="props.to"
       :aria-label="ariaLabel"
-      v-bind="{ to, target, ...$attrs }"
-      class="focus:outline-none peer"
+      v-bind="{ to: props.to, target: props.target, ...$attrs }"
+      :class="prefix('focus:outline-none peer')"
       raw
     >
-      <span class="absolute inset-0" aria-hidden="true" />
+      <span :class="prefix('absolute inset-0')" aria-hidden="true" />
     </ULink>
   </DefineLinkTemplate>
 
   <DefineDateTemplate v-slot="{ hidden }">
-    <time v-if="date" :datetime="datetime" data-slot="date" :class="ui.date({ class: uiProp?.date, hidden })">
+    <time v-if="date" :datetime="datetime" data-slot="date" :class="ui.date({ class: props.ui?.date, hidden })">
       <slot name="date">
         {{ date }}
       </slot>
     </time>
   </DefineDateTemplate>
 
-  <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 })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
+    <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
       <slot name="indicator" :ui="ui">
         <ReuseDateTemplate />
 
-        <div data-slot="dot" :class="ui.dot({ class: uiProp?.dot })">
-          <div data-slot="dotInner" :class="ui.dotInner({ class: uiProp?.dotInner })" />
+        <div data-slot="dot" :class="ui.dot({ class: props.ui?.dot })">
+          <div data-slot="dotInner" :class="ui.dotInner({ class: props.ui?.dotInner })" />
         </div>
       </slot>
     </div>
 
-    <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 })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (date || !!slots.date) || (props.badge || !!slots.badge) || (props.title || !!slots.title) || (props.description || !!slots.description) || (props.image || !!slots.image)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
         <slot name="header">
-          <div v-if="date || !!slots.date || (badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: uiProp?.meta, badge: !!badge || !!slots.badge || !props.indicator })">
+          <div v-if="date || !!slots.date || (props.badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: props.ui?.meta, badge: !!props.badge || !!slots.badge || !props.indicator })">
             <slot name="badge" :ui="ui">
               <UBadge
-                v-if="badge"
+                v-if="props.badge"
                 color="neutral"
                 variant="solid"
-                v-bind="typeof badge === 'string' ? { label: badge } : badge"
+                v-bind="typeof props.badge === 'string' ? { label: props.badge } : props.badge"
                 data-slot="badge"
-                :class="ui.badge({ class: uiProp?.badge })"
+                :class="ui.badge({ class: props.ui?.badge })"
               />
             </slot>
 
             <ReuseDateTemplate :hidden="!!props.indicator" />
           </div>
 
-          <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+          <h2 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
             <ReuseLinkTemplate />
 
             <slot name="title">
-              {{ title }}
+              {{ props.title }}
             </slot>
           </h2>
 
-          <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+          <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
             <slot name="description">
-              {{ description }}
+              {{ props.description }}
             </slot>
           </div>
 
-          <div v-if="image || !!slots.image" data-slot="imageWrapper" :class="ui.imageWrapper({ class: uiProp?.imageWrapper })">
+          <div v-if="props.image || !!slots.image" data-slot="imageWrapper" :class="ui.imageWrapper({ class: props.ui?.imageWrapper })">
             <slot name="image" :ui="ui">
               <component
                 :is="ImageComponent"
-                v-if="image"
-                v-bind="typeof image === 'string' ? { src: image, alt: title } : { alt: title, ...image }"
+                v-if="props.image"
+                v-bind="typeof props.image === 'string' ? { src: props.image, alt: props.title } : { alt: props.title, ...props.image }"
                 data-slot="image"
-                :class="ui.image({ class: uiProp?.image, to: !!to })"
+                :class="ui.image({ class: props.ui?.image, to: !!props.to })"
               />
             </slot>
 
@@ -156,12 +158,12 @@ const ariaLabel = computed(() => {
 
       <slot name="body" />
 
-      <div v-if="!!slots.footer || (authors?.length || !!slots.authors) || !!slots.actions" data-slot="footer" :class="ui.footer({ class: uiProp?.footer, body: !!slots.body })">
+      <div v-if="!!slots.footer || (props.authors?.length || !!slots.authors) || !!slots.actions" data-slot="footer" :class="ui.footer({ class: props.ui?.footer, body: !!slots.body })">
         <slot name="footer">
-          <div v-if="authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: uiProp?.authors })">
+          <div v-if="props.authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: props.ui?.authors })">
             <slot name="authors">
               <UUser
-                v-for="(author, index) in authors"
+                v-for="(author, index) in props.authors"
                 :key="index"
                 v-bind="author"
               />

package/dist/runtime/components/ChangelogVersions.vue

@@ -8,11 +8,11 @@ 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 { useComponentProps } from "../composables/useComponentProps";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UChangelogVersion from "./ChangelogVersion.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   versions: { type: Array, required: false },
   indicator: { type: [Boolean, Object], required: false, default: true },
@@ -21,9 +21,9 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("changelogVersions", _props);
 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);
@@ -33,17 +33,17 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.changelogVers
 </script>
 
 <template>
-  <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 })">
+  <Primitive :as="props.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 })">
       <slot name="indicator">
-        <Motion v-if="!!props.indicatorMotion" data-slot="beam" :class="ui.beam({ class: uiProp?.beam })" :style="{ height }" />
+        <Motion v-if="!!props.indicatorMotion" data-slot="beam" :class="ui.beam({ class: props.ui?.beam })" :style="{ height }" />
       </slot>
     </div>
 
-    <div v-if="versions?.length || !!slots.default" data-slot="container" :class="ui.container({ class: uiProp?.container })">
+    <div v-if="props.versions?.length || !!slots.default" data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <slot>
         <UChangelogVersion
-          v-for="(version, index) in versions"
+          v-for="(version, index) in props.versions"
           :key="index"
           :indicator="!!props.indicator"
           v-bind="version"

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

@@ -22,6 +22,10 @@ export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIData
      * @defaultValue 'naked'
      */
     variant?: ChatMessage['variants']['variant'];
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ChatMessage['variants']['color'];
     /**
      * @defaultValue 'left'
      */
@@ -49,6 +53,7 @@ export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIData
     ui?: ChatMessage['slots'];
 }
 export interface ChatMessageSlots<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> {
+    header?(props: UIMessage<TMetadata, TDataParts, TTools>): VNode[];
     leading?(props: UIMessage<TMetadata, TDataParts, TTools> & {
         avatar: ChatMessageProps<TMetadata, TDataParts, TTools>['avatar'];
         ui: ChatMessage['ui'];
@@ -56,6 +61,7 @@ export interface ChatMessageSlots<TMetadata = unknown, TDataParts extends UIData
     files?(props: Omit<UIMessage<TMetadata, TDataParts, TTools>, 'parts'> & {
         parts: FileUIPart[];
     }): VNode[];
+    body?(props: UIMessage<TMetadata, TDataParts, TTools>): VNode[];
     content?(props: UIMessage<TMetadata, TDataParts, TTools> & {
         content?: string;
     }): VNode[];