@nuxt/ui 4.4.0 → 4.5.1

package/dist/runtime/components/content/ContentSurround.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 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({
   nextIcon: { type: null, required: false },
   surround: { type: Array, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("contentSurround", props);
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate({
   props: {
     link: Object,
@@ -33,21 +35,21 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSurrou
 
 <template>
   <DefineLinkTemplate v-slot="{ link, icon, direction }">
-    <ULink v-if="link" :to="link.path" raw data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], direction })">
+    <ULink v-if="link" :to="link.path" raw data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], direction })">
       <slot name="link" :link="link" :ui="ui">
-        <div data-slot="linkLeading" :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading] })">
+        <div data-slot="linkLeading" :class="ui.linkLeading({ class: [uiProp?.linkLeading, link.ui?.linkLeading] })">
           <slot name="link-leading" :link="link" :ui="ui">
-            <UIcon :name="link.icon || icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
+            <UIcon :name="link.icon || icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
           </slot>
         </div>
 
-        <p data-slot="linkTitle" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle] })">
+        <p data-slot="linkTitle" :class="ui.linkTitle({ class: [uiProp?.linkTitle, link.ui?.linkTitle] })">
           <slot name="link-title" :link="link" :ui="ui">
             {{ link.title }}
           </slot>
         </p>
 
-        <p data-slot="linkDescription" :class="ui.linkDescription({ class: [props.ui?.linkDescription, link.ui?.linkDescription] })">
+        <p data-slot="linkDescription" :class="ui.linkDescription({ class: [uiProp?.linkDescription, link.ui?.linkDescription] })">
           <slot name="link-description" :link="link" :ui="ui">
             {{ link.description }}
           </slot>
@@ -57,7 +59,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSurrou
     <span v-else class="hidden sm:block">&nbsp;</span>
   </DefineLinkTemplate>
 
-  <Primitive v-if="surround" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive v-if="surround" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <ReuseLinkTemplate :link="surround[0]" :icon="prevIcon || appConfig.ui.icons.arrowLeft" direction="left" />
     <ReuseLinkTemplate :link="surround[1]" :icon="nextIcon || appConfig.ui.icons.arrowRight" direction="right" />
   </Primitive>

package/dist/runtime/components/content/ContentSurround.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-surround';
@@ -38,12 +39,12 @@ export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSur
 type SlotProps<T> = (props: {
     link: T;
     ui: ContentSurround['ui'];
-}) => any;
+}) => VNode[];
 export interface ContentSurroundSlots<T extends ContentSurroundLink = ContentSurroundLink> {
-    'link': SlotProps<T>;
-    'link-leading': SlotProps<T>;
-    'link-title': SlotProps<T>;
-    'link-description': SlotProps<T>;
+    'link'?: SlotProps<T>;
+    'link-leading'?: SlotProps<T>;
+    'link-title'?: SlotProps<T>;
+    'link-description'?: SlotProps<T>;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/ContentToc.d.vue.ts

@@ -1,4 +1,5 @@
 import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { TocLink } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-toc';
@@ -48,29 +49,29 @@ export type ContentTocEmits = CollapsibleRootEmits & {
 };
 type SlotProps<T> = (props: {
     link: T;
-}) => any;
+}) => VNode[];
 export interface ContentTocSlots<T extends ContentTocLink = ContentTocLink> {
-    leading(props: {
+    leading?(props: {
         open: boolean;
         ui: ContentToc['ui'];
-    }): any;
-    default(props: {
+    }): VNode[];
+    default?(props: {
         open: boolean;
-    }): any;
-    trailing(props: {
+    }): VNode[];
+    trailing?(props: {
         open: boolean;
         ui: ContentToc['ui'];
-    }): any;
-    content(props: {
+    }): VNode[];
+    content?(props: {
         links: T[];
-    }): any;
-    link: SlotProps<T>;
-    top(props: {
+    }): VNode[];
+    link?: SlotProps<T>;
+    top?(props: {
         links?: T[];
-    }): any;
-    bottom(props: {
+    }): VNode[];
+    bottom?(props: {
         links?: T[];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/ContentToc.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useRouter, useAppConfig, useNuxtApp } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { useScrollspy } from "../../composables/useScrollspy";
 import { useLocale } from "../../composables/useLocale";
 import { tv } from "../../utils/tv";
@@ -21,7 +22,7 @@ const props = defineProps({
   highlightColor: { type: null, required: false },
   links: { type: Array, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false }
 });
@@ -31,6 +32,7 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "as", "open", "defaul
 const { t } = useLocale();
 const router = useRouter();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("contentToc", props);
 const { activeHeadings, updateHeadings } = useScrollspy();
 const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate({
   props: {
@@ -58,11 +60,10 @@ const indicatorStyle = computed(() => {
   }
   const flatLinks = flattenLinks(props.links || []);
   const activeIndex = flatLinks.findIndex((link) => activeHeadings.value.includes(link.id));
-  const linkHeight = 28;
-  const gapSize = 0;
+  const linkHeight = 1.75;
   return {
-    "--indicator-size": `${linkHeight * activeHeadings.value.length + gapSize * (activeHeadings.value.length - 1)}px`,
-    "--indicator-position": activeIndex >= 0 ? `${activeIndex * (linkHeight + gapSize)}px` : "0px"
+    "--indicator-size": `${linkHeight * activeHeadings.value.length}rem`,
+    "--indicator-position": activeIndex >= 0 ? `${activeIndex * linkHeight}rem` : "0rem"
   };
 });
 const nuxtApp = useNuxtApp();
@@ -79,11 +80,11 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
 <template>
   <!-- eslint-disable-next-line vue/no-template-shadow -->
   <DefineListTemplate v-slot="{ links, level }">
-    <ul :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
-      <li v-for="(link, index) in links" :key="index" :class="link.children && link.children.length > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, link.ui?.item] })">
-        <a :href="`#${link.id}`" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: activeHeadings.includes(link.id) })" @click.prevent="scrollToHeading(link.id)">
+    <ul :class="level > 0 ? ui.listWithChildren({ class: uiProp?.listWithChildren }) : ui.list({ class: uiProp?.list })">
+      <li v-for="(link, index) in links" :key="index" :class="link.children && link.children.length > 0 ? ui.itemWithChildren({ class: [uiProp?.itemWithChildren, link.ui?.itemWithChildren] }) : ui.item({ class: [uiProp?.item, link.ui?.item] })">
+        <a :href="`#${link.id}`" data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active: activeHeadings.includes(link.id) })" @click.prevent="scrollToHeading(link.id)">
           <slot name="link" :link="link">
-            <span data-slot="linkText" :class="ui.linkText({ class: [props.ui?.linkText, link.ui?.linkText] })">
+            <span data-slot="linkText" :class="ui.linkText({ class: [uiProp?.linkText, link.ui?.linkText] })">
               {{ link.text }}
             </span>
           </slot>
@@ -97,20 +98,20 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
   <DefineTriggerTemplate v-slot="{ open }">
     <slot name="leading" :open="open" :ui="ui" />
 
-    <span data-slot="title" :class="ui.title({ class: props.ui?.title })">
+    <span data-slot="title" :class="ui.title({ class: uiProp?.title })">
       <slot :open="open">{{ title || t("contentToc.title") }}</slot>
     </span>
 
-    <span data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+    <span data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
       <slot name="trailing" :open="open" :ui="ui">
-        <UIcon :name="trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        <UIcon :name="trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
       </slot>
     </span>
   </DefineTriggerTemplate>
 
-  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...rootProps, ...$attrs }" :default-open="defaultOpen" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: props.ui?.top })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...rootProps, ...$attrs }" :default-open="defaultOpen" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+      <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: uiProp?.top })">
         <slot name="top" :links="links" />
       </div>
 
@@ -119,8 +120,8 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
           <ReuseTriggerTemplate :open="open" />
         </CollapsibleTrigger>
 
-        <CollapsibleContent data-slot="content" :class="ui.content({ class: [props.ui?.content, 'lg:hidden'] })">
-          <div v-if="highlight" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+        <CollapsibleContent data-slot="content" :class="ui.content({ class: [uiProp?.content, 'lg:hidden'] })">
+          <div v-if="highlight" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" :style="indicatorStyle" />
 
           <slot name="content" :links="links">
             <ReuseListTemplate :links="links" :level="0" />
@@ -131,8 +132,8 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
           <ReuseTriggerTemplate :open="open" />
         </p>
 
-        <div data-slot="content" :class="ui.content({ class: [props.ui?.content, 'hidden lg:flex'] })">
-          <div v-if="highlight" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+        <div data-slot="content" :class="ui.content({ class: [uiProp?.content, 'hidden lg:flex'] })">
+          <div v-if="highlight" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" :style="indicatorStyle" />
 
           <slot name="content" :links="links">
             <ReuseListTemplate :links="links" :level="0" />
@@ -140,7 +141,7 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
         </div>
       </template>
 
-      <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: props.ui?.bottom, body: !!slots.top || !!links?.length })">
+      <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: uiProp?.bottom, body: !!slots.top || !!links?.length })">
         <slot name="bottom" :links="links" />
       </div>
     </div>

package/dist/runtime/components/content/ContentToc.vue.d.ts

@@ -1,4 +1,5 @@
 import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { TocLink } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-toc';
@@ -48,29 +49,29 @@ export type ContentTocEmits = CollapsibleRootEmits & {
 };
 type SlotProps<T> = (props: {
     link: T;
-}) => any;
+}) => VNode[];
 export interface ContentTocSlots<T extends ContentTocLink = ContentTocLink> {
-    leading(props: {
+    leading?(props: {
         open: boolean;
         ui: ContentToc['ui'];
-    }): any;
-    default(props: {
+    }): VNode[];
+    default?(props: {
         open: boolean;
-    }): any;
-    trailing(props: {
+    }): VNode[];
+    trailing?(props: {
         open: boolean;
         ui: ContentToc['ui'];
-    }): any;
-    content(props: {
+    }): VNode[];
+    content?(props: {
         links: T[];
-    }): any;
-    link: SlotProps<T>;
-    top(props: {
+    }): VNode[];
+    link?: SlotProps<T>;
+    top?(props: {
         links?: T[];
-    }): any;
-    bottom(props: {
+    }): VNode[];
+    bottom?(props: {
         links?: T[];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/locale/LocaleSelect.d.vue.ts

@@ -15,6 +15,6 @@ declare const __VLS_export: import("vue").DefineComponent<LocaleSelectProps & {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     valueKey: "code";
-    labelKey: string;
+    labelKey: import("../../types").GetItemKeys<Locale<any>[]>;
     searchInput: boolean | import("../Input.vue").InputProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/locale/LocaleSelect.vue

@@ -28,7 +28,7 @@ const props = defineProps({
   labelKey: { type: null, required: false, default: "name" },
   descriptionKey: { type: null, required: false },
   defaultValue: { type: null, required: false },
-  modelModifiers: { type: Object, required: false },
+  modelModifiers: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
@@ -37,7 +37,7 @@ const props = defineProps({
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },

package/dist/runtime/components/locale/LocaleSelect.vue.d.ts

@@ -15,6 +15,6 @@ declare const __VLS_export: import("vue").DefineComponent<LocaleSelectProps & {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     valueKey: "code";
-    labelKey: string;
+    labelKey: import("../../types").GetItemKeys<Locale<any>[]>;
     searchInput: boolean | import("../Input.vue").InputProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,10 +1,14 @@
+import type { VNode } from 'vue';
 export interface ProseAProps {
     href?: string;
     target?: '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseASlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -5,20 +5,23 @@ import theme from "#build/ui/prose/a";
 <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";
-const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.a || {} }));
 const props = defineProps({
   href: { type: String, required: false },
   target: { 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.a", props);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.a || {} }));
 </script>
 
 <template>
-  <ULink :href="href" :target="target" :class="ui({ class: props.class })" raw>
+  <ULink :href="href" :target="target" :class="ui({ class: [uiProp?.base, props.class] })" raw>
     <slot />
   </ULink>
 </template>

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

@@ -1,10 +1,14 @@
+import type { VNode } from 'vue';
 export interface ProseAProps {
     href?: string;
     target?: '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseASlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/accordion';
 import type { AccordionProps } from '../../types';
@@ -9,7 +10,7 @@ export interface ProseAccordionProps {
     ui?: ProseAccordion['slots'] & AccordionProps['ui'];
 }
 export interface ProseAccordionSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -5,16 +5,18 @@ import theme from "#build/ui/prose/accordion";
 <script setup>
 import { computed, ref, onBeforeUpdate } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { transformUI } from "../../utils";
 import { tv } from "../../utils/tv";
 import UAccordion from "../Accordion.vue";
 const props = defineProps({
   type: { type: String, required: false, default: "multiple" },
   class: { type: null, required: false },
-  ui: { type: void 0, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.accordion", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.accordion || {} }));
 const rerenderCount = ref(1);
 const items = computed(() => {
@@ -37,7 +39,7 @@ onBeforeUpdate(() => rerenderCount.value++);
 </script>
 
 <template>
-  <UAccordion :type="type" :items="items" :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui(), props.ui)">
+  <UAccordion :type="type" :items="items" :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui(), uiProp)">
     <template #content="{ item }">
       <component :is="item.component" />
     </template>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/accordion';
 import type { AccordionProps } from '../../types';
@@ -9,7 +10,7 @@ export interface ProseAccordionProps {
     ui?: ProseAccordion['slots'] & AccordionProps['ui'];
 }
 export interface ProseAccordionSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,10 +1,14 @@
+import type { VNode } from 'vue';
 export interface ProseAccordionItemProps {
     label: string;
     description?: string;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseAccordionItemSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -5,19 +5,22 @@ import theme from "#build/ui/prose/accordion-item";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   label: { type: String, required: true },
   description: { type: String, 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.accordionItem", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.accordionItem || {} }));
 </script>
 
 <template>
-  <div :class="ui({ class: props.class })">
+  <div :class="ui({ class: [uiProp?.base, props.class] })">
     <slot>
       {{ description }}
     </slot>

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

@@ -1,10 +1,14 @@
+import type { VNode } from 'vue';
 export interface ProseAccordionItemProps {
     label: string;
     description?: string;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseAccordionItemSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

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

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

@@ -5,18 +5,21 @@ import theme from "#build/ui/prose/badge";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import UBadge from "../Badge.vue";
 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.badge", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.badge || {} }));
 </script>
 
 <template>
-  <UBadge color="primary" variant="subtle" :class="ui({ class: props.class })">
+  <UBadge color="primary" variant="subtle" :class="ui({ class: [uiProp?.base, props.class] })">
     <slot mdc-unwrap="p" />
   </UBadge>
 </template>

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

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

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

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

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

@@ -5,17 +5,20 @@ import theme from "#build/ui/prose/blockquote";
 <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.blockquote", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.blockquote || {} }));
 </script>
 
 <template>
-  <blockquote :class="ui({ class: props.class })">
+  <blockquote :class="ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </blockquote>
 </template>

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

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

package/dist/runtime/components/prose/Callout.d.vue.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;