@nuxt/ui 4.4.0 → 4.5.1

package/dist/runtime/components/prose/Callout.vue

@@ -5,6 +5,7 @@ import theme from "#build/ui/prose/callout";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import ULink from "../Link.vue";
 import UIcon from "../Icon.vue";
@@ -15,10 +16,11 @@ const props = defineProps({
   icon: { type: null, required: false },
   color: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.callout", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.callout || {} })({
   color: props.color,
   to: !!props.to
@@ -27,7 +29,7 @@ const target = computed(() => props.target || (!!props.to && typeof props.to ===
 </script>
 
 <template>
-  <div :class="ui.base({ class: props.class })">
+  <div :class="ui.base({ class: [uiProp?.base, props.class] })">
     <ULink
       v-if="to"
       v-bind="{ to, target, ...$attrs }"
@@ -37,8 +39,8 @@ const target = computed(() => props.target || (!!props.to && typeof props.to ===
       <span class="absolute inset-0" aria-hidden="true" />
     </ULink>
 
-    <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-    <UIcon v-if="!!to && target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.externalIcon({ class: props.ui?.externalIcon })" />
+    <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: uiProp?.icon })" />
+    <UIcon v-if="!!to && target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.externalIcon({ class: uiProp?.externalIcon })" />
 
     <slot mdc-unwrap="p" />
   </div>

package/dist/runtime/components/prose/Callout.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/callout';
 import type { IconProps, LinkProps } from '../../types';
@@ -15,7 +16,7 @@ export interface ProseCalloutProps {
     ui?: ProseCallout['slots'];
 }
 export interface ProseCalloutSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/card';
 import type { IconProps, LinkProps } from '../../types';
@@ -17,8 +18,8 @@ export interface ProseCardProps {
     ui?: ProseCard['slots'];
 }
 export interface ProseCardSlots {
-    default(props?: {}): any;
-    title(props?: {}): any;
+    default(props?: {}): VNode[];
+    title(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Card.vue

@@ -5,6 +5,7 @@ import theme from "#build/ui/prose/card";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import ULink from "../Link.vue";
 import UIcon from "../Icon.vue";
@@ -17,10 +18,11 @@ const props = defineProps({
   description: { type: String, required: false },
   color: { 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("prose.card", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.card || {} })({
   color: props.color,
   to: !!props.to,
@@ -31,7 +33,7 @@ const ariaLabel = computed(() => (props.title || "Card link").trim());
 </script>
 
 <template>
-  <div :class="ui.base({ class: props.class })">
+  <div :class="ui.base({ class: [uiProp?.base, props.class] })">
     <ULink
       v-if="to"
       :aria-label="ariaLabel"
@@ -42,16 +44,16 @@ const ariaLabel = computed(() => (props.title || "Card link").trim());
       <span class="absolute inset-0" aria-hidden="true" />
     </ULink>
 
-    <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-    <UIcon v-if="!!to && target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.externalIcon({ class: props.ui?.externalIcon })" />
+    <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: uiProp?.icon })" />
+    <UIcon v-if="!!to && target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.externalIcon({ class: uiProp?.externalIcon })" />
 
-    <p v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+    <p v-if="title || !!slots.title" :class="ui.title({ class: uiProp?.title })">
       <slot name="title" mdc-unwrap="p">
         {{ title }}
       </slot>
     </p>
 
-    <div v-if="!!slots.default" :class="ui.description({ class: props.ui?.description })">
+    <div v-if="!!slots.default" :class="ui.description({ class: uiProp?.description })">
       <slot>
         {{ description }}
       </slot>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/card';
 import type { IconProps, LinkProps } from '../../types';
@@ -17,8 +18,8 @@ export interface ProseCardProps {
     ui?: ProseCard['slots'];
 }
 export interface ProseCardSlots {
-    default(props?: {}): any;
-    title(props?: {}): any;
+    default(props?: {}): VNode[];
+    title(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/CardGroup.d.vue.ts

@@ -1,8 +1,12 @@
+import type { VNode } from 'vue';
 export interface ProseCardGroupProps {
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseCardGroupSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/CardGroup.vue

@@ -5,17 +5,20 @@ import theme from "#build/ui/prose/card-group";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.cardGroup", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.cardGroup || {} }));
 </script>
 
 <template>
-  <div :class="ui({ class: props.class })">
+  <div :class="ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </div>
 </template>

package/dist/runtime/components/prose/CardGroup.vue.d.ts

@@ -1,8 +1,12 @@
+import type { VNode } from 'vue';
 export interface ProseCardGroupProps {
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseCardGroupSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Code.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../../types/tv';
 import theme from '#build/ui/prose/code';
@@ -9,9 +10,12 @@ export interface ProseCodeProps {
      */
     color?: ProseCode['variants']['color'];
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseCodeSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Code.vue

@@ -5,19 +5,22 @@ import theme from "#build/ui/prose/code";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   lang: { type: String, required: false },
   color: { type: null, required: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.code", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.code || {} }));
 </script>
 
 <template>
-  <code :class="ui({ class: (props.class || '').split(',').join(' '), color: props.color })">
+  <code :class="ui({ class: [uiProp?.base, (props.class || '').split(',').join(' ')], color: props.color })">
     <slot />
   </code>
 </template>

package/dist/runtime/components/prose/Code.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../../types/tv';
 import theme from '#build/ui/prose/code';
@@ -9,9 +10,12 @@ export interface ProseCodeProps {
      */
     color?: ProseCode['variants']['color'];
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseCodeSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/CodeCollapse.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/code-collapse';
 import type { IconProps } from '../../types';
@@ -28,7 +29,7 @@ export interface ProseCodeCollapseProps {
     ui?: ProseCodeCollapse['slots'];
 }
 export interface ProseCodeCollapseSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/CodeCollapse.vue

@@ -5,6 +5,7 @@ import theme from "#build/ui/prose/code-collapse";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { useLocale } from "../../composables/useLocale";
 import { tv } from "../../utils/tv";
 import UButton from "../Button.vue";
@@ -14,30 +15,31 @@ const props = defineProps({
   openText: { type: String, required: false },
   closeText: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.codeCollapse", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codeCollapse || {} })({
   open: open.value
 }));
 </script>
 
 <template>
-  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <div :class="ui.root({ class: [uiProp?.root, props.class] })">
     <slot />
 
-    <div :class="ui.footer({ class: props.ui?.footer })">
+    <div :class="ui.footer({ class: uiProp?.footer })">
       <UButton
         :icon="icon || appConfig.ui.icons.chevronDown"
         color="neutral"
         variant="outline"
         :data-state="open ? 'open' : 'closed'"
         :label="`${open ? props.closeText || t('prose.codeCollapse.closeText') : props.openText || t('prose.codeCollapse.openText')} ${props.name || t('prose.codeCollapse.name')}`"
-        :class="ui.trigger({ class: props.ui?.trigger })"
-        :ui="{ leadingIcon: ui.triggerIcon({ class: props.ui?.triggerIcon }) }"
+        :class="ui.trigger({ class: uiProp?.trigger })"
+        :ui="{ leadingIcon: ui.triggerIcon({ class: uiProp?.triggerIcon }) }"
         @click="open = !open"
       />
     </div>

package/dist/runtime/components/prose/CodeCollapse.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/code-collapse';
 import type { IconProps } from '../../types';
@@ -28,7 +29,7 @@ export interface ProseCodeCollapseProps {
     ui?: ProseCodeCollapse['slots'];
 }
 export interface ProseCodeCollapseSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/CodeGroup.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../../types/tv';
 import theme from '#build/ui/prose/code-group';
@@ -16,7 +17,7 @@ export interface ProseCodeGroupProps {
     ui?: ProseCodeGroup['slots'];
 }
 export interface ProseCodeGroupSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/CodeGroup.vue

@@ -6,17 +6,19 @@ import theme from "#build/ui/prose/code-group";
 import { computed, watch, onMounted, ref, onBeforeUpdate } from "vue";
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from "reka-ui";
 import { useState, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import UCodeIcon from "./CodeIcon.vue";
 const props = defineProps({
   defaultValue: { type: String, required: false, default: "0" },
   sync: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const model = defineModel({ type: String });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.codeGroup", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codeGroup || {} })());
 const rerenderCount = ref(1);
 const items = computed(() => {
@@ -52,14 +54,14 @@ onBeforeUpdate(() => rerenderCount.value++);
 </script>
 
 <template>
-  <TabsRoot v-model="model" :default-value="defaultValue" :unmount-on-hide="false" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <TabsList :class="ui.list({ class: props.ui?.list })">
-      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+  <TabsRoot v-model="model" :default-value="defaultValue" :unmount-on-hide="false" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <TabsList :class="ui.list({ class: uiProp?.list })">
+      <TabsIndicator :class="ui.indicator({ class: uiProp?.indicator })" />
 
-      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" :class="ui.trigger({ class: props.ui?.trigger })">
-        <UCodeIcon :icon="item.icon" :filename="item.label" :class="ui.triggerIcon({ class: props.ui?.triggerIcon })" />
+      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" :class="ui.trigger({ class: uiProp?.trigger })">
+        <UCodeIcon :icon="item.icon" :filename="item.label" :class="ui.triggerIcon({ class: uiProp?.triggerIcon })" />
 
-        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">{{ item.label }}</span>
+        <span :class="ui.triggerLabel({ class: uiProp?.triggerLabel })">{{ item.label }}</span>
       </TabsTrigger>
     </TabsList>
 

package/dist/runtime/components/prose/CodeGroup.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../../types/tv';
 import theme from '#build/ui/prose/code-group';
@@ -16,7 +17,7 @@ export interface ProseCodeGroupProps {
     ui?: ProseCodeGroup['slots'];
 }
 export interface ProseCodeGroupSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/CodePreview.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../../types/tv';
 import theme from '#build/ui/prose/code-preview';
@@ -7,8 +8,8 @@ export interface ProseCodePreviewProps {
     ui?: ProseCodePreview['slots'];
 }
 export interface ProseCodePreviewSlots {
-    default(props?: {}): any;
-    code(props?: {}): any;
+    default(props?: {}): VNode[];
+    code(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/CodePreview.vue

@@ -5,23 +5,25 @@ import theme from "#build/ui/prose/code-preview";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.codePreview", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codePreview || {} })({ code: !!slots.code }));
 </script>
 
 <template>
-  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.preview({ class: [props.ui?.preview] })">
+  <div :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div :class="ui.preview({ class: [uiProp?.preview] })">
       <slot />
     </div>
 
-    <div v-if="!!slots.code" :class="ui.code({ class: [props.ui?.code] })">
+    <div v-if="!!slots.code" :class="ui.code({ class: [uiProp?.code] })">
       <slot name="code" />
     </div>
   </div>

package/dist/runtime/components/prose/CodePreview.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../../types/tv';
 import theme from '#build/ui/prose/code-preview';
@@ -7,8 +8,8 @@ export interface ProseCodePreviewProps {
     ui?: ProseCodePreview['slots'];
 }
 export interface ProseCodePreviewSlots {
-    default(props?: {}): any;
-    code(props?: {}): any;
+    default(props?: {}): VNode[];
+    code(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/CodeTree.d.vue.ts

@@ -1,4 +1,5 @@
 import { TreeItem } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/code-tree';
 import type { ComponentConfig } from '../../types/tv';
@@ -32,7 +33,7 @@ export interface ProseCodeTreeEmits {
     'update:modelValue': [value: string | undefined];
 }
 export interface ProseCodeTreeSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/CodeTree.vue

@@ -7,6 +7,7 @@ import { computed, watch, onBeforeUpdate, ref } from "vue";
 import { TreeRoot, TreeItem } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import UCodeIcon from "./CodeIcon.vue";
 import UIcon from "../Icon.vue";
@@ -17,11 +18,12 @@ const props = defineProps({
   defaultValue: { type: String, required: false },
   expandAll: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.codeTree", props);
 const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codeTree || {} })());
 const initialPath = props.modelValue ?? props.defaultValue;
@@ -123,7 +125,7 @@ onBeforeUpdate(() => rerenderCount.value++);
       v-for="(item, index) in items"
       :key="`${level}-${index}`"
       role="presentation"
-      :class="level > 1 ? ui.itemWithChildren({ class: props.ui?.itemWithChildren }) : ui.item({ class: props.ui?.item })"
+      :class="level > 1 ? ui.itemWithChildren({ class: uiProp?.itemWithChildren }) : ui.item({ class: uiProp?.item })"
     >
       <TreeItem
         v-slot="{ isExpanded, isSelected }"
@@ -133,27 +135,27 @@ onBeforeUpdate(() => rerenderCount.value++);
       >
         <button
           type="button"
-          :class="ui.link({ class: props.ui?.link, active: isSelected })"
+          :class="ui.link({ class: uiProp?.link, active: isSelected })"
         >
           <UIcon
             v-if="item.children?.length"
             :name="isExpanded ? appConfig.ui.icons.folderOpen : appConfig.ui.icons.folder"
-            :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+            :class="ui.linkLeadingIcon({ class: uiProp?.linkLeadingIcon })"
           />
           <UCodeIcon
             v-else
             :filename="item.label"
-            :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+            :class="ui.linkLeadingIcon({ class: uiProp?.linkLeadingIcon })"
           />
 
-          <span :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+          <span :class="ui.linkLabel({ class: uiProp?.linkLabel })">
             {{ item.label }}
           </span>
 
-          <span v-if="item.children?.length" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+          <span v-if="item.children?.length" :class="ui.linkTrailing({ class: uiProp?.linkTrailing })">
             <UIcon
               :name="appConfig.ui.icons.chevronDown"
-              :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })"
+              :class="ui.linkTrailingIcon({ class: uiProp?.linkTrailingIcon })"
             />
           </span>
         </button>
@@ -161,7 +163,7 @@ onBeforeUpdate(() => rerenderCount.value++);
         <ul
           v-if="item.children?.length && isExpanded"
           role="group"
-          :class="ui.listWithChildren({ class: props.ui?.listWithChildren })"
+          :class="ui.listWithChildren({ class: uiProp?.listWithChildren })"
         >
           <ReuseTreeTemplate :items="item.children" :level="level + 1" />
         </ul>
@@ -169,18 +171,18 @@ onBeforeUpdate(() => rerenderCount.value++);
     </li>
   </DefineTreeTemplate>
 
-  <div v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <div v-bind="$attrs" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <TreeRoot
       v-model="model"
       v-model:expanded="expanded"
-      :class="ui.list({ class: props.ui?.list })"
+      :class="ui.list({ class: uiProp?.list })"
       :items="items"
       :get-key="(item2) => item2.path"
     >
       <ReuseTreeTemplate :items="items" :level="1" />
     </TreeRoot>
 
-    <div :class="ui.content({ class: props.ui?.content })">
+    <div :class="ui.content({ class: uiProp?.content })">
       <component :is="lastSelectedItem?.component" />
     </div>
   </div>

package/dist/runtime/components/prose/CodeTree.vue.d.ts

@@ -1,4 +1,5 @@
 import { TreeItem } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/code-tree';
 import type { ComponentConfig } from '../../types/tv';
@@ -32,7 +33,7 @@ export interface ProseCodeTreeEmits {
     'update:modelValue': [value: string | undefined];
 }
 export interface ProseCodeTreeSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Collapsible.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/collapsible';
 import type { IconProps, CollapsibleProps } from '../../types';
@@ -28,7 +29,7 @@ export interface ProseCollapsibleProps {
     ui?: ProseCollapsible['slots'] & CollapsibleProps['ui'];
 }
 export interface ProseCollapsibleSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Collapsible.vue

@@ -5,6 +5,7 @@ import theme from "#build/ui/prose/collapsible";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { useLocale } from "../../composables/useLocale";
 import { transformUI } from "../../utils";
 import { tv } from "../../utils/tv";
@@ -16,21 +17,22 @@ const props = defineProps({
   openText: { type: String, required: false },
   closeText: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: void 0, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.collapsible", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.collapsible || {} })());
 </script>
 
 <template>
-  <UCollapsible :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui, props.ui)">
+  <UCollapsible :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui, uiProp)">
     <template #default="{ open }">
-      <button :class="ui.trigger({ class: props.ui?.trigger })">
-        <UIcon :name="icon || appConfig.ui.icons.chevronDown" :class="ui.triggerIcon({ class: props.ui?.triggerIcon })" />
+      <button :class="ui.trigger({ class: uiProp?.trigger })">
+        <UIcon :name="icon || appConfig.ui.icons.chevronDown" :class="ui.triggerIcon({ class: uiProp?.triggerIcon })" />
 
-        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">
+        <span :class="ui.triggerLabel({ class: uiProp?.triggerLabel })">
           {{ open ? props.closeText || t("prose.collapsible.closeText") : props.openText || t("prose.collapsible.openText") }} {{ props.name || t("prose.collapsible.name") }}
         </span>
       </button>