@nuxt/ui 4.4.0 → 4.5.1

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/blog-posts';
 import type { BlogPostProps, BlogPostSlots } from '../types';
@@ -16,14 +17,17 @@ 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 & {
+type ExtendSlotWithPost<T extends BlogPostProps, K extends keyof BlogPostSlots> = Required<BlogPostSlots>[K] extends (props: infer P) => VNode[] ? (props: P & {
     post: T;
-}) => any : BlogPostSlots[K];
+}) => VNode[] : Required<BlogPostSlots>[K];
 export type BlogPostsSlots<T extends BlogPostProps = BlogPostProps> = {
-    [K in keyof BlogPostSlots]: ExtendSlotWithPost<T, K>;
+    [K in keyof BlogPostSlots]?: ExtendSlotWithPost<T, K>;
 } & {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 };
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/breadcrumb';
 import type { AvatarProps, IconProps, LinkProps } from '../types';
@@ -40,32 +41,32 @@ export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
 type SlotProps<T extends BreadcrumbItem> = (props: {
     item: T;
     index: number;
-    active?: boolean;
+    active: boolean;
     ui: Breadcrumb['ui'];
-}) => any;
+}) => VNode[];
 export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
         index: number;
-        active?: boolean;
-    }) => any;
-    'item-trailing': (props: {
+        active: boolean;
+    }) => VNode[];
+    'item-trailing'?: (props: {
         item: T;
         index: number;
-        active?: boolean;
-    }) => any;
-    'separator': (props: {
+        active: boolean;
+    }) => VNode[];
+    'separator'?: (props: {
         ui: Breadcrumb['ui'];
-    }) => any;
+    }) => VNode[];
 } & DynamicSlots<T, 'leading', {
     index: number;
-    active?: boolean;
+    active: boolean;
     ui: Breadcrumb['ui'];
 }> & DynamicSlots<T, 'label' | 'trailing', {
     index: number;
-    active?: boolean;
+    active: boolean;
 }>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/breadcrumb';
 import type { AvatarProps, IconProps, LinkProps } from '../types';
@@ -40,32 +41,32 @@ export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
 type SlotProps<T extends BreadcrumbItem> = (props: {
     item: T;
     index: number;
-    active?: boolean;
+    active: boolean;
     ui: Breadcrumb['ui'];
-}) => any;
+}) => VNode[];
 export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
         index: number;
-        active?: boolean;
-    }) => any;
-    'item-trailing': (props: {
+        active: boolean;
+    }) => VNode[];
+    'item-trailing'?: (props: {
         item: T;
         index: number;
-        active?: boolean;
-    }) => any;
-    'separator': (props: {
+        active: boolean;
+    }) => VNode[];
+    'separator'?: (props: {
         ui: Breadcrumb['ui'];
-    }) => any;
+    }) => VNode[];
 } & DynamicSlots<T, 'leading', {
     index: number;
-    active?: boolean;
+    active: boolean;
     ui: Breadcrumb['ui'];
 }> & DynamicSlots<T, 'label' | 'trailing', {
     index: number;
-    active?: boolean;
+    active: boolean;
 }>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/button';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
@@ -31,15 +32,15 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
     ui?: Button['slots'];
 }
 export interface ButtonSlots {
-    leading(props: {
+    leading?(props: {
         ui: Button['ui'];
-    }): any;
-    default(props: {
+    }): VNode[];
+    default?(props: {
         ui: Button['ui'];
-    }): any;
-    trailing(props: {
+    }): VNode[];
+    trailing?(props: {
         ui: Button['ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/button';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
@@ -31,15 +32,15 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
     ui?: Button['slots'];
 }
 export interface ButtonSlots {
-    leading(props: {
+    leading?(props: {
         ui: Button['ui'];
-    }): any;
-    default(props: {
+    }): VNode[];
+    default?(props: {
         ui: Button['ui'];
-    }): any;
-    trailing(props: {
+    }): VNode[];
+    trailing?(props: {
         ui: Button['ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,5 @@
 import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { DateValue } from '@internationalized/date';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/calendar';
@@ -89,13 +90,13 @@ export interface CalendarEmits<R extends boolean, M extends boolean> extends Omi
     'update:modelValue': [date: CalendarModelValue<R, M>];
 }
 export interface CalendarSlots {
-    'heading': (props: {
+    'heading'?: (props: {
         value: string;
-    }) => any;
-    'day': (props: Pick<CalendarCellTriggerProps, 'day'>) => any;
-    'week-day': (props: {
+    }) => VNode[];
+    'day'?: (props: Pick<CalendarCellTriggerProps, 'day'>) => VNode[];
+    'week-day'?: (props: {
         day: string;
-    }) => any;
+    }) => VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,5 @@
 import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { DateValue } from '@internationalized/date';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/calendar';
@@ -89,13 +90,13 @@ export interface CalendarEmits<R extends boolean, M extends boolean> extends Omi
     'update:modelValue': [date: CalendarModelValue<R, M>];
 }
 export interface CalendarSlots {
-    'heading': (props: {
+    'heading'?: (props: {
         value: string;
-    }) => any;
-    'day': (props: Pick<CalendarCellTriggerProps, 'day'>) => any;
-    'week-day': (props: {
+    }) => VNode[];
+    'day'?: (props: Pick<CalendarCellTriggerProps, 'day'>) => VNode[];
+    'week-day'?: (props: {
         day: string;
-    }) => any;
+    }) => VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/card';
 import type { ComponentConfig } from '../types/tv';
@@ -16,9 +17,9 @@ export interface CardProps {
     ui?: Card['slots'];
 }
 export interface CardSlots {
-    header(props?: {}): any;
-    default(props?: {}): any;
-    footer(props?: {}): any;
+    header?(props?: {}): VNode[];
+    default?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/card';
 import type { ComponentConfig } from '../types/tv';
@@ -16,9 +17,9 @@ export interface CardProps {
     ui?: Card['slots'];
 }
 export interface CardSlots {
-    header(props?: {}): any;
-    default(props?: {}): any;
-    footer(props?: {}): any;
+    header?(props?: {}): VNode[];
+    default?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Carousel.d.vue.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 {
     /**