@nuxt/ui 4.4.0 → 4.5.0

package/dist/runtime/components/BlogPost.vue

@@ -5,8 +5,9 @@ import theme from "#build/ui/blog-post";
 <script setup>
 import { computed } from "vue";
 import { Primitive, useDateFormatter } from "reka-ui";
-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";
@@ -29,11 +30,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("blogPost", props);
 const formatter = useDateFormatter(locale.value.code);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.blogPost || {} })({
   orientation: props.orientation,
@@ -68,19 +70,19 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
-    <div v-if="image || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" @click="onClick">
+    <div v-if="image || !!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
       <slot name="header" :ui="ui">
         <component
           :is="ImageComponent"
           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>
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
+    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
       <ULink
         v-if="to"
         :aria-label="ariaLabel"
@@ -92,7 +94,7 @@ const ariaLabel = computed(() => {
       </ULink>
 
       <slot name="body">
-        <div v-if="date || !!slots.date || (badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: props.ui?.meta })">
+        <div v-if="date || !!slots.date || (badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: uiProp?.meta })">
           <slot name="badge">
             <UBadge
               v-if="badge"
@@ -100,30 +102,30 @@ const ariaLabel = computed(() => {
               variant="subtle"
               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>
 
-          <time v-if="date || !!slots.date" :datetime="datetime" data-slot="date" :class="ui.date({ class: props.ui?.date })">
+          <time v-if="date || !!slots.date" :datetime="datetime" data-slot="date" :class="ui.date({ class: uiProp?.date })">
             <slot name="date">
               {{ date }}
             </slot>
           </time>
         </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 })">
           <slot name="title">
             {{ title }}
           </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="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" :ui="ui">
             <template v-if="authors?.length">
               <UAvatarGroup v-if="authors.length > 1">
@@ -133,7 +135,7 @@ const ariaLabel = computed(() => {
                   :to="author.to"
                   :target="author.target"
                   data-slot="avatar"
-                  :class="ui.avatar({ class: props.ui?.avatar, to: !!author.to })"
+                  :class="ui.avatar({ class: uiProp?.avatar, to: !!author.to })"
                   raw
                 >
                   <UAvatar v-bind="author.avatar" />
@@ -146,7 +148,7 @@ const ariaLabel = computed(() => {
       </slot>
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -1,6 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/blog-post';
 import type { BadgeProps, LinkProps, UserProps } from '../types';
+import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type BlogPost = ComponentConfig<typeof theme, AppConfig, 'blogPost'>;
 export interface BlogPostProps {
@@ -22,7 +23,7 @@ export interface BlogPostProps {
     /** The authors of the blog post. */
     authors?: UserProps[];
     /** The image of the blog post. Can be a string or an object. */
-    image?: string | (Partial<HTMLImageElement> & {
+    image?: string | (Partial<ImgHTMLAttributes> & {
         [key: string]: any;
     });
     /**
@@ -57,8 +58,8 @@ export interface BlogPostSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BlogPostProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlogPostProps> & Readonly<{}>, {
-    as: any;
     orientation: BlogPost["variants"]["orientation"];
+    as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlogPostSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -16,6 +16,9 @@ export interface BlogPostsProps<T extends BlogPostProps = BlogPostProps> {
      */
     orientation?: BlogPosts['variants']['orientation'];
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 type ExtendSlotWithPost<T extends BlogPostProps, K extends keyof BlogPostSlots> = BlogPostSlots[K] extends (props: infer P) => any ? (props: P & {
     post: T;

package/dist/runtime/components/BlogPosts.vue

@@ -8,21 +8,24 @@ import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
+import { useComponentUI } from "../composables/useComponentUI";
 import UBlogPost from "./BlogPost.vue";
 const props = defineProps({
   as: { type: null, required: false },
   posts: { type: Array, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const getProxySlots = () => omit(slots, ["default"]);
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("blogPosts", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.blogPosts || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: props.class })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: [uiProp?.base, props.class] })">
     <slot>
       <UBlogPost
         v-for="(post, index) in posts"

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

@@ -16,6 +16,9 @@ export interface BlogPostsProps<T extends BlogPostProps = BlogPostProps> {
      */
     orientation?: BlogPosts['variants']['orientation'];
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 type ExtendSlotWithPost<T extends BlogPostProps, K extends keyof BlogPostSlots> = BlogPostSlots[K] extends (props: infer P) => any ? (props: P & {
     post: T;

package/dist/runtime/components/Breadcrumb.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/breadcrumb";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
@@ -20,29 +21,30 @@ const props = defineProps({
   separatorIcon: { type: null, required: false },
   labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const { dir } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("breadcrumb", props);
 const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <ol data-slot="list" :class="ui.list({ class: props.ui?.list })">
+  <Primitive :as="as" aria-label="breadcrumb" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <ol data-slot="list" :class="ui.list({ class: uiProp?.list })">
       <template v-for="(item, index) in items" :key="index">
-        <li data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
+        <li data-slot="item" :class="ui.item({ class: [uiProp?.item, item.ui?.item] })">
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-            <ULinkBase v-bind="slotProps" as="span" :aria-current="(item.active ?? active) && index === items.length - 1 ? 'page' : void 0" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: !!item.disabled, to: !!item.to })">
+            <ULinkBase v-bind="slotProps" as="span" :aria-current="(item.active ?? active) && index === items.length - 1 ? 'page' : void 0" data-slot="link" :class="ui.link({ class: [uiProp?.link, item.ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: !!item.disabled, to: !!item.to })">
               <slot :name="item.slot || 'item'" :item="item" :active="item.active ?? index === items.length - 1" :index="index" :ui="ui">
                 <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="item.active ?? index === items.length - 1" :index="index" :ui="ui">
-                  <UIcon v-if="item.icon" :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })" />
-                  <UAvatar v-else-if="item.avatar" :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })" />
+                  <UIcon v-if="item.icon" :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })" />
+                  <UAvatar v-else-if="item.avatar" :size="uiProp?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [uiProp?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })" />
                 </slot>
 
-                <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
+                <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [uiProp?.linkLabel, item.ui?.linkLabel] })">
                   <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="item.active ?? index === items.length - 1" :index="index">
                     {{ get(item, props.labelKey) }}
                   </slot>
@@ -54,9 +56,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb ||
           </ULink>
         </li>
 
-        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })">
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator] })">
           <slot name="separator" :ui="ui">
-            <UIcon :name="separatorIcon" data-slot="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" />
+            <UIcon :name="separatorIcon" data-slot="separatorIcon" :class="ui.separatorIcon({ class: [uiProp?.separatorIcon, item.ui?.separatorIcon] })" />
           </slot>
         </li>
       </template>

package/dist/runtime/components/Button.vue

@@ -7,6 +7,7 @@ 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 { useComponentIcons } from "../composables/useComponentIcons";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { formLoadingInjectionKey } from "../composables/useFormField";
@@ -29,7 +30,7 @@ const props = defineProps({
   loadingAuto: { type: Boolean, required: false },
   onClick: { type: [Function, Array], required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   icon: { type: null, required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
@@ -65,6 +66,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("button", props);
 const { orientation, size: buttonSize } = useFieldGroup(props);
 const linkProps = useForwardProps(pickLinkProps(props));
 const loadingAutoState = ref(false);
@@ -123,7 +125,7 @@ const ui = computed(() => tv({
       v-bind="slotProps"
       data-slot="base"
       :class="ui.base({
-  class: [props.ui?.base, props.class],
+  class: [uiProp?.base, props.class],
   active,
   ...active && activeVariant ? { variant: activeVariant } : {},
   ...active && activeColor ? { color: activeColor } : {}
@@ -131,18 +133,18 @@ const ui = computed(() => tv({
       @click="onClickWrapper"
     >
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })" />
-        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
+        <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 })" />
       </slot>
 
       <slot :ui="ui">
-        <span v-if="label !== void 0 && label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label, active })">
+        <span v-if="label !== void 0 && label !== null" data-slot="label" :class="ui.label({ class: uiProp?.label, active })">
           {{ label }}
         </span>
       </slot>
 
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })" />
+        <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon, active })" />
       </slot>
     </ULinkBase>
   </ULink>

package/dist/runtime/components/Calendar.vue

@@ -9,6 +9,7 @@ import { useForwardPropsEmits } from "reka-ui";
 import { Calendar as SingleCalendar, RangeCalendar } from "reka-ui/namespaced";
 import { reactiveOmit } 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";
@@ -33,7 +34,7 @@ const props = defineProps({
   modelValue: { type: null, required: false },
   weekNumbers: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   defaultPlaceholder: { type: null, required: false },
   placeholder: { type: null, required: false },
   allowNonContiguousRanges: { type: Boolean, required: false },
@@ -61,6 +62,7 @@ const emits = defineEmits(["update:modelValue", "update:placeholder", "update:va
 defineSlots();
 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 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));
@@ -88,16 +90,16 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
     :model-value="modelValue"
     :default-value="defaultValue"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
   >
-    <Calendar.Header data-slot="header" :class="ui.header({ class: props.ui?.header })">
+    <Calendar.Header data-slot="header" :class="ui.header({ class: uiProp?.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: props.ui?.heading })">
+      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="ui.heading({ class: uiProp?.heading })">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
@@ -109,20 +111,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: props.ui?.body })">
+    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
       <Calendar.Grid
         v-for="month in grid"
         :key="month.value.toString()"
         data-slot="grid"
-        :class="ui.grid({ class: props.ui?.grid })"
+        :class="ui.grid({ class: uiProp?.grid })"
       >
         <Calendar.GridHead>
-          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="ui.gridWeekDaysRow({ class: uiProp?.gridWeekDaysRow })">
             <Calendar.HeadCell
               v-for="day in weekDays"
               :key="day"
               data-slot="headCell"
-              :class="ui.headCell({ class: props.ui?.headCell })"
+              :class="ui.headCell({ class: uiProp?.headCell })"
             >
               <slot name="week-day" :day="day">
                 {{ day }}
@@ -130,18 +132,18 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
             </Calendar.HeadCell>
           </Calendar.GridRow>
         </Calendar.GridHead>
-        <Calendar.GridBody data-slot="gridBody" :class="ui.gridBody({ class: props.ui?.gridBody })">
+        <Calendar.GridBody data-slot="gridBody" :class="ui.gridBody({ class: uiProp?.gridBody })">
           <Calendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDate-${index}`"
             data-slot="gridRow"
-            :class="ui.gridRow({ class: props.ui?.gridRow })"
+            :class="ui.gridRow({ class: uiProp?.gridRow })"
           >
             <td
               v-if="weekNumbers && weekDates[0]"
               role="gridcell"
               data-slot="cellWeek"
-              :class="ui.cellWeek({ class: props.ui?.cellWeek })"
+              :class="ui.cellWeek({ class: uiProp?.cellWeek })"
             >
               {{ getWeekNumber(weekDates[0], locale.code) }}
             </td>
@@ -150,13 +152,13 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
               :key="weekDate.toString()"
               :date="weekDate"
               data-slot="cell"
-              :class="ui.cell({ class: props.ui?.cell })"
+              :class="ui.cell({ class: uiProp?.cell })"
             >
               <Calendar.CellTrigger
                 :day="weekDate"
                 :month="month.value"
                 data-slot="cellTrigger"
-                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
+                :class="ui.cellTrigger({ class: uiProp?.cellTrigger })"
               >
                 <slot name="day" :day="weekDate">
                   {{ weekDate.day }}

package/dist/runtime/components/Card.vue

@@ -6,31 +6,33 @@ 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 { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
   variant: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 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: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
       <slot name="header" />
     </div>
 
-    <div v-if="!!slots.default" data-slot="body" :class="ui.body({ class: props.ui?.body })">
+    <div v-if="!!slots.default" data-slot="body" :class="ui.body({ class: uiProp?.body })">
       <slot />
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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/ChangelogVersion.d.vue.ts

@@ -1,6 +1,7 @@
 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 +23,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;
     });
     /**