@nuxt/ui 4.7.1 → 4.8.1

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

@@ -7,13 +7,14 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { useLocale } from "../../composables/useLocale";
+import { usePrefix } from "../../composables/usePrefix";
 import { tv } from "../../utils/tv";
 import ULink from "../Link.vue";
 import UIcon from "../Icon.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   prevIcon: { type: null, required: false },
   nextIcon: { type: null, required: false },
@@ -22,9 +23,10 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("contentSurround", _props);
 const { dir } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("contentSurround", props);
+const prefix = usePrefix();
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate({
   props: {
     link: Object,
@@ -39,32 +41,32 @@ const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConf
 
 <template>
   <DefineLinkTemplate v-slot="{ link, icon, direction }">
-    <ULink v-if="link" :to="link.path" raw data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], 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 })">
       <slot name="link" :link="link" :ui="ui">
-        <div data-slot="linkLeading" :class="ui.linkLeading({ class: [uiProp?.linkLeading, link.ui?.linkLeading] })">
+        <div data-slot="linkLeading" :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading] })">
           <slot name="link-leading" :link="link" :ui="ui">
-            <UIcon :name="link.icon || icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
+            <UIcon :name="link.icon || icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
           </slot>
         </div>
 
-        <p data-slot="linkTitle" :class="ui.linkTitle({ class: [uiProp?.linkTitle, link.ui?.linkTitle] })">
+        <p data-slot="linkTitle" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle] })">
           <slot name="link-title" :link="link" :ui="ui">
             {{ link.title }}
           </slot>
         </p>
 
-        <p data-slot="linkDescription" :class="ui.linkDescription({ class: [uiProp?.linkDescription, link.ui?.linkDescription] })">
+        <p data-slot="linkDescription" :class="ui.linkDescription({ class: [props.ui?.linkDescription, link.ui?.linkDescription] })">
           <slot name="link-description" :link="link" :ui="ui">
             {{ link.description }}
           </slot>
         </p>
       </slot>
     </ULink>
-    <span v-else class="hidden sm:block">&nbsp;</span>
+    <span v-else :class="prefix('hidden sm:block')">&nbsp;</span>
   </DefineLinkTemplate>
 
-  <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" direction="left" />
-    <ReuseLinkTemplate :link="surround[1]" :icon="nextIcon" direction="right" />
+  <Primitive v-if="props.surround" :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ReuseLinkTemplate :link="props.surround[0]" :icon="prevIcon" direction="left" />
+    <ReuseLinkTemplate :link="props.surround[1]" :icon="nextIcon" direction="right" />
   </Primitive>
 </template>

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

@@ -4,17 +4,18 @@ import theme from "#build/ui/content/content-toc";
 
 <script setup>
 import { computed, onUnmounted } from "vue";
-import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from "reka-ui";
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useRouter, useAppConfig, useNuxtApp } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
-import { useResolvedVariants } from "../../composables/useResolvedVariants";
+import { useComponentProps } from "../../composables/useComponentProps";
+import { useForwardProps } from "../../composables/useForwardProps";
 import { useScrollspy } from "../../composables/useScrollspy";
 import { useLocale } from "../../composables/useLocale";
+import { usePrefix } from "../../composables/usePrefix";
 import { tv } from "../../utils/tv";
 import UIcon from "../Icon.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "nav" },
   trailingIcon: { type: null, required: false },
   title: { type: String, required: false },
@@ -30,13 +31,13 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:open", "move"]);
 const slots = defineSlots();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "open", "defaultOpen"), emits);
+const props = useComponentProps("contentToc", _props);
+const rootProps = useForwardProps(reactivePick(props, "as", "open", "defaultOpen"), emits);
 const { t } = useLocale();
 const router = useRouter();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("contentToc", props);
-const { highlightVariant } = useResolvedVariants("contentToc", props, theme, ["highlightVariant"]);
 const { activeHeadings, updateHeadings } = useScrollspy();
+const prefix = usePrefix();
 const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate({
   props: {
     links: Array,
@@ -48,7 +49,7 @@ const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentToc || {} })({
   color: props.color,
   highlight: props.highlight,
-  highlightVariant: highlightVariant.value,
+  highlightVariant: props.highlightVariant,
   highlightColor: props.highlightColor || props.color
 }));
 function scrollToHeading(id) {
@@ -78,7 +79,7 @@ const indicatorStyle = computed(() => {
   };
 });
 const circuitMaskStyle = computed(() => {
-  if (!props.highlight || highlightVariant.value !== "circuit" || !props.links?.length) {
+  if (!props.highlight || props.highlightVariant !== "circuit" || !props.links?.length) {
     return;
   }
   const flatLinks = flattenLinksWithLevel(props.links);
@@ -133,11 +134,11 @@ onUnmounted(() => {
 <template>
   <!-- eslint-disable-next-line vue/no-template-shadow -->
   <DefineListTemplate v-slot="{ links, level }">
-    <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)">
+    <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)">
           <slot name="link" :link="link">
-            <span data-slot="linkText" :class="ui.linkText({ class: [uiProp?.linkText, link.ui?.linkText] })">
+            <span data-slot="linkText" :class="ui.linkText({ class: [props.ui?.linkText, link.ui?.linkText] })">
               {{ link.text }}
             </span>
           </slot>
@@ -151,54 +152,54 @@ onUnmounted(() => {
   <DefineTriggerTemplate v-slot="{ open }">
     <slot name="leading" :open="open" :ui="ui" />
 
-    <span data-slot="title" :class="ui.title({ class: uiProp?.title })">
-      <slot :open="open">{{ title || t("contentToc.title") }}</slot>
+    <span data-slot="title" :class="ui.title({ class: props.ui?.title })">
+      <slot :open="open">{{ props.title || t("contentToc.title") }}</slot>
     </span>
 
-    <span data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+    <span data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :open="open" :ui="ui">
-        <UIcon :name="trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+        <UIcon :name="props.trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </DefineTriggerTemplate>
 
   <DefineContentTemplate>
-    <div v-if="highlight" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" :style="{ ...indicatorStyle, ...circuitMaskStyle || {} }">
-      <div data-slot="indicatorLine" :class="ui.indicatorLine({ class: uiProp?.indicatorLine })" />
-      <div v-if="indicatorStyle" data-slot="indicatorActive" :class="ui.indicatorActive({ class: uiProp?.indicatorActive })" />
+    <div v-if="props.highlight" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="{ ...indicatorStyle, ...circuitMaskStyle || {} }">
+      <div data-slot="indicatorLine" :class="ui.indicatorLine({ class: props.ui?.indicatorLine })" />
+      <div v-if="indicatorStyle" data-slot="indicatorActive" :class="ui.indicatorActive({ class: props.ui?.indicatorActive })" />
     </div>
 
-    <slot name="content" :links="links">
-      <ReuseListTemplate :links="links" :level="0" />
+    <slot name="content" :links="props.links">
+      <ReuseListTemplate :links="props.links" :level="0" />
     </slot>
   </DefineContentTemplate>
 
-  <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" />
+  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...rootProps, ...$attrs }" :default-open="props.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 })">
+        <slot name="top" :links="props.links" />
       </div>
 
-      <template v-if="links?.length">
-        <CollapsibleTrigger data-slot="trigger" :class="ui.trigger({ class: 'lg:hidden' })">
+      <template v-if="props.links?.length">
+        <CollapsibleTrigger data-slot="trigger" :class="ui.trigger({ class: [props.ui?.trigger, prefix('lg:hidden')] })">
           <ReuseTriggerTemplate :open="open" />
         </CollapsibleTrigger>
 
-        <CollapsibleContent data-slot="content" :class="ui.content({ class: [uiProp?.content, 'lg:hidden'] })">
+        <CollapsibleContent data-slot="content" :class="ui.content({ class: [props.ui?.content, prefix('lg:hidden')] })">
           <ReuseContentTemplate />
         </CollapsibleContent>
 
-        <p data-slot="trigger" :class="ui.trigger({ class: 'hidden lg:flex' })">
+        <p data-slot="trigger" :class="ui.trigger({ class: [props.ui?.trigger, prefix('hidden lg:flex')] })">
           <ReuseTriggerTemplate :open="open" />
         </p>
 
-        <div data-slot="content" :class="ui.content({ class: [uiProp?.content, 'hidden lg:flex'] })">
+        <div data-slot="content" :class="ui.content({ class: [props.ui?.content, prefix('hidden lg:flex')] })">
           <ReuseContentTemplate />
         </div>
       </template>
 
-      <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 v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: props.ui?.bottom, body: !!slots.top || !!props.links?.length })">
+        <slot name="bottom" :links="props.links" />
       </div>
     </div>
   </CollapsibleRoot>

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

@@ -5,23 +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 { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
 import ULink from "../Link.vue";
-const props = defineProps({
+const _props = defineProps({
   href: { type: String, required: false },
   target: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.a", _props);
 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: [uiProp?.base, props.class] })" raw>
+  <ULink :href="props.href" :target="props.target" :class="ui({ class: [props.ui?.base, props.class] })" raw>
     <slot />
   </ULink>
 </template>

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

@@ -5,18 +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 { useComponentProps } from "../../composables/useComponentProps";
 import { transformUI } from "../../utils";
 import { tv } from "../../utils/tv";
 import UAccordion from "../Accordion.vue";
-const props = defineProps({
+const _props = defineProps({
   type: { type: String, required: false, default: "multiple" },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("prose.accordion", _props);
 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(() => {
@@ -39,7 +39,7 @@ onBeforeUpdate(() => rerenderCount.value++);
 </script>
 
 <template>
-  <UAccordion :type="type" :items="items" :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui(), uiProp)">
+  <UAccordion :type="props.type" :items="items" :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui(), props.ui)">
     <template #content="{ item }">
       <component :is="item.component" />
     </template>

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

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

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

@@ -5,21 +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 { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
 import UBadge from "../Badge.vue";
-const props = defineProps({
+const _props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.badge", _props);
 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: [uiProp?.base, props.class] })">
+  <UBadge color="primary" variant="subtle" :class="ui({ class: [props.ui?.base, props.class] })">
     <slot mdc-unwrap="p" />
   </UBadge>
 </template>

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

@@ -5,20 +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 { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.blockquote", _props);
 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: [uiProp?.base, props.class] })">
+  <blockquote :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </blockquote>
 </template>

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

@@ -5,12 +5,12 @@ import theme from "#build/ui/prose/callout";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
 import ULink from "../Link.vue";
 import UIcon from "../Icon.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   to: { type: null, required: false },
   target: { type: [String, Object, null], required: false },
   icon: { type: null, required: false },
@@ -19,8 +19,8 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.callout", _props);
 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
@@ -29,18 +29,18 @@ const target = computed(() => props.target || (!!props.to && typeof props.to ===
 </script>
 
 <template>
-  <div :class="ui.base({ class: [uiProp?.base, props.class] })">
+  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
     <ULink
-      v-if="to"
-      v-bind="{ to, target, ...$attrs }"
+      v-if="props.to"
+      v-bind="{ to: props.to, target, ...$attrs }"
       class="focus:outline-none"
       raw
     >
       <span class="absolute inset-0" aria-hidden="true" />
     </ULink>
 
-    <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 })" />
+    <UIcon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" />
+    <UIcon v-if="!!props.to && target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.externalIcon({ class: props.ui?.externalIcon })" />
 
     <slot mdc-unwrap="p" />
   </div>

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

@@ -5,12 +5,12 @@ import theme from "#build/ui/prose/card";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
 import ULink from "../Link.vue";
 import UIcon from "../Icon.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   to: { type: null, required: false },
   target: { type: [String, Object, null], required: false },
   icon: { type: null, required: false },
@@ -21,8 +21,8 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("prose.card", _props);
 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,
@@ -33,29 +33,29 @@ const ariaLabel = computed(() => (props.title || "Card link").trim());
 </script>
 
 <template>
-  <div :class="ui.base({ class: [uiProp?.base, props.class] })">
+  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
     <ULink
-      v-if="to"
+      v-if="props.to"
       :aria-label="ariaLabel"
-      v-bind="{ to, target, ...$attrs }"
+      v-bind="{ to: props.to, target, ...$attrs }"
       class="focus:outline-none"
       raw
     >
       <span class="absolute inset-0" aria-hidden="true" />
     </ULink>
 
-    <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 })" />
+    <UIcon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" />
+    <UIcon v-if="!!props.to && target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.externalIcon({ class: props.ui?.externalIcon })" />
 
-    <p v-if="title || !!slots.title" :class="ui.title({ class: uiProp?.title })">
+    <p v-if="props.title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
       <slot name="title" mdc-unwrap="p">
-        {{ title }}
+        {{ props.title }}
       </slot>
     </p>
 
-    <div v-if="!!slots.default" :class="ui.description({ class: uiProp?.description })">
+    <div v-if="!!slots.default" :class="ui.description({ class: props.ui?.description })">
       <slot>
-        {{ description }}
+        {{ props.description }}
       </slot>
     </div>
   </div>

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

@@ -5,20 +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 { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.cardGroup", _props);
 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: [uiProp?.base, props.class] })">
+  <div :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </div>
 </template>

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

@@ -5,22 +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 { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   lang: { type: String, required: false },
   color: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.code", _props);
 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: [uiProp?.base, (props.class || '').split(',').join(' ')], color: props.color })">
+  <code :class="ui({ class: [props.ui?.base, (props.class || '').split(',').join(' ')], color: props.color })">
     <slot />
   </code>
 </template>

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

@@ -5,11 +5,11 @@ import theme from "#build/ui/prose/code-collapse";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { useLocale } from "../../composables/useLocale";
 import { tv } from "../../utils/tv";
 import UButton from "../Button.vue";
-const props = defineProps({
+const _props = defineProps({
   icon: { type: null, required: false },
   name: { type: String, required: false },
   openText: { type: String, required: false },
@@ -18,28 +18,28 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("prose.codeCollapse", _props);
 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: [uiProp?.root, props.class] })">
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot />
 
-    <div :class="ui.footer({ class: uiProp?.footer })">
+    <div :class="ui.footer({ class: props.ui?.footer })">
       <UButton
-        :icon="icon || appConfig.ui.icons.chevronDown"
+        :icon="props.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: uiProp?.trigger })"
-        :ui="{ leadingIcon: ui.triggerIcon({ class: uiProp?.triggerIcon }) }"
+        :class="ui.trigger({ class: props.ui?.trigger })"
+        :ui="{ leadingIcon: ui.triggerIcon({ class: props.ui?.triggerIcon }) }"
         @click="open = !open"
       />
     </div>

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

@@ -6,19 +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 { useComponentProps } from "../../composables/useComponentProps";
 import { tv } from "../../utils/tv";
 import UCodeIcon from "./CodeIcon.vue";
-const props = defineProps({
+const _props = defineProps({
   defaultValue: { type: String, required: false, default: "0" },
   sync: { type: String, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("prose.codeGroup", _props);
 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(() => {
@@ -54,14 +54,14 @@ onBeforeUpdate(() => rerenderCount.value++);
 </script>
 
 <template>
-  <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 })" />
+  <TabsRoot v-model="model" :default-value="props.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 })" />
 
-      <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 })" />
+      <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 })" />
 
-        <span :class="ui.triggerLabel({ class: uiProp?.triggerLabel })">{{ item.label }}</span>
+        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">{{ item.label }}</span>
       </TabsTrigger>
     </TabsList>