@nuxt/ui 4.7.1 → 4.8.1

package/dist/runtime/components/Toast.vue

@@ -4,17 +4,18 @@ import theme from "#build/ui/toast";
 
 <script setup>
 import { ref, computed, onMounted, useTemplateRef } from "vue";
-import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from "reka-ui";
+import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
 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 UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
 import UButton from "./Button.vue";
 import UProgress from "./Progress.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   title: { type: [String, Object, Function], required: false },
   description: { type: [String, Object, Function], required: false },
@@ -35,10 +36,10 @@ const props = defineProps({
 });
 const emits = defineEmits(["escapeKeyDown", "pause", "resume", "swipeStart", "swipeMove", "swipeCancel", "swipeEnd", "update:open"]);
 const slots = defineSlots();
+const props = useComponentProps("toast", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("toast", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "duration", "type"), emits);
+const rootProps = useForwardProps(reactivePick(props, "as", "defaultOpen", "open", "duration", "type"), emits);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.toast || {} })({
   color: props.color,
   orientation: props.orientation,
@@ -62,65 +63,65 @@ defineExpose({
     ref="rootRef"
     v-slot="{ remaining, duration, open }"
     v-bind="rootProps"
-    :data-orientation="orientation"
+    :data-orientation="props.orientation"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--height': height }"
   >
     <slot name="leading" :ui="ui">
-      <UAvatar v-if="avatar" :size="uiProp?.avatarSize || ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
-      <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+      <UAvatar v-if="props.avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="props.avatar" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UIcon v-else-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
 
-    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-      <ToastTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <ToastTitle v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
         <slot name="title">
-          <component :is="title()" v-if="typeof title === 'function'" />
-          <component :is="title" v-else-if="typeof title === 'object'" />
+          <component :is="props.title()" v-if="typeof props.title === 'function'" />
+          <component :is="props.title" v-else-if="typeof props.title === 'object'" />
           <template v-else>
-            {{ title }}
+            {{ props.title }}
           </template>
         </slot>
       </ToastTitle>
-      <ToastDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+      <ToastDescription v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
-          <component :is="description()" v-if="typeof description === 'function'" />
-          <component :is="description" v-else-if="typeof description === 'object'" />
+          <component :is="props.description()" v-if="typeof props.description === 'function'" />
+          <component :is="props.description" v-else-if="typeof props.description === 'object'" />
           <template v-else>
-            {{ description }}
+            {{ props.description }}
           </template>
         </slot>
       </ToastDescription>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+      <div v-if="props.orientation === 'vertical' && (props.actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions">
-          <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
-            <UButton size="xs" :color="color" v-bind="action" />
+          <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
+            <UButton size="xs" :color="props.color" v-bind="action" />
           </ToastAction>
         </slot>
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" data-slot="actions" :class="ui.actions({ class: uiProp?.actions, orientation: 'horizontal' })">
-      <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
+    <div v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions) || props.close" data-slot="actions" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+      <template v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions)">
         <slot name="actions">
-          <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
-            <UButton size="xs" :color="color" v-bind="action" />
+          <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
+            <UButton size="xs" :color="props.color" v-bind="action" />
           </ToastAction>
         </slot>
       </template>
 
-      <ToastClose v-if="close || !!slots.close" as-child>
+      <ToastClose v-if="props.close || !!slots.close" as-child>
         <slot name="close" :ui="ui">
           <UButton
-            v-if="close"
-            :icon="closeIcon || appConfig.ui.icons.close"
+            v-if="props.close"
+            :icon="props.closeIcon || appConfig.ui.icons.close"
             color="neutral"
             variant="link"
             :aria-label="t('toast.close')"
-            v-bind="typeof close === 'object' ? close : {}"
+            v-bind="typeof props.close === 'object' ? props.close : {}"
             data-slot="close"
-            :class="ui.close({ class: uiProp?.close })"
+            :class="ui.close({ class: props.ui?.close })"
             @click.stop
           />
         </slot>
@@ -128,13 +129,13 @@ defineExpose({
     </div>
 
     <UProgress
-      v-if="progress && open && remaining > 0 && duration"
+      v-if="props.progress && open && remaining > 0 && duration"
       :model-value="remaining / duration * 100"
-      :color="color"
-      v-bind="typeof progress === 'object' ? progress : {}"
+      :color="props.color"
+      v-bind="typeof props.progress === 'object' ? props.progress : {}"
       size="sm"
       data-slot="progress"
-      :class="ui.progress({ class: uiProp?.progress })"
+      :class="ui.progress({ class: props.ui?.progress })"
     />
   </ToastRoot>
 </template>

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

@@ -40,8 +40,8 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     progress: boolean;
-    max: number;
     expand: boolean;
+    max: number;
     duration: number;
     portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;

package/dist/runtime/components/Toaster.vue

@@ -7,16 +7,17 @@ export default {
 
 <script setup>
 import { ref, computed, toRef, provide } from "vue";
-import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from "reka-ui";
+import { ToastProvider, ToastViewport, ToastPortal } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { useToast, toastMaxInjectionKey } from "../composables/useToast";
 import { usePortal } from "../composables/usePortal";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UToast from "./Toast.vue";
-const props = defineProps({
+const _props = defineProps({
   position: { type: null, required: false },
   expand: { type: Boolean, required: false, default: true },
   progress: { type: Boolean, required: false, default: true },
@@ -30,9 +31,9 @@ const props = defineProps({
   swipeThreshold: { type: Number, required: false }
 });
 defineSlots();
+const props = useComponentProps("toaster", _props);
 const { toasts, remove } = useToast();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("toaster", props);
 provide(toastMaxInjectionKey, toRef(() => props.max));
 const providerProps = useForwardProps(reactivePick(props, "duration", "label", "swipeThreshold", "disableSwipe"));
 const portalProps = usePortal(toRef(() => props.portal));
@@ -79,7 +80,7 @@ function getOffset(index) {
       v-for="(toast, index) of toasts"
       :key="toast.id"
       ref="refs"
-      :progress="progress"
+      :progress="props.progress"
       v-bind="omit(toast, ['id', 'close', '_duplicate', '_updated'])"
       :close="toast.close"
       :data-expanded="expanded"
@@ -94,7 +95,7 @@ function getOffset(index) {
   '--transform': 'translateY(var(--translate)) scale(var(--scale))'
 }"
       data-slot="base"
-      :class="ui.base({ class: [uiProp?.base, toast.onClick ? 'cursor-pointer' : void 0] })"
+      :class="ui.base({ class: [props.ui?.base, toast.onClick ? 'cursor-pointer' : void 0] })"
       @update:open="onUpdateOpen($event, toast.id)"
       @click="toast.onClick && toast.onClick(toast)"
     />
@@ -103,11 +104,11 @@ function getOffset(index) {
       <ToastViewport
         :data-expanded="expanded"
         data-slot="viewport"
-        :class="ui.viewport({ class: [uiProp?.viewport, props.class] })"
+        :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
         :style="{
   '--scale-factor': '0.05',
-  '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',
-  '--gap': position?.startsWith('top') ? '16px' : '-16px',
+  '--translate-factor': props.position?.startsWith('top') ? '1px' : '-1px',
+  '--gap': props.position?.startsWith('top') ? '16px' : '-16px',
   '--front-height': `${frontHeight}px`,
   '--height': `${height}px`
 }"

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

@@ -40,8 +40,8 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     progress: boolean;
-    max: number;
     expand: boolean;
+    max: number;
     duration: number;
     portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;

package/dist/runtime/components/Tooltip.vue

@@ -5,15 +5,16 @@ import theme from "#build/ui/tooltip";
 <script setup>
 import { computed, toRef } from "vue";
 import { defu } from "defu";
-import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits, injectTooltipProviderContext } from "reka-ui";
+import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, injectTooltipProviderContext } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { FieldGroupReset } from "../composables/useFieldGroup";
 import { usePortal } from "../composables/usePortal";
 import { tv } from "../utils/tv";
 import UKbd from "./Kbd.vue";
-const props = defineProps({
+const _props = defineProps({
   text: { type: String, required: false },
   kbds: { type: Array, required: false },
   content: { type: Object, required: false },
@@ -32,10 +33,10 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
+const props = useComponentProps("tooltip", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("tooltip", props);
 const providerContext = injectTooltipProviderContext();
-const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "delayDuration", "disableHoverableContent", "disableClosingTrigger", "ignoreNonKeyboardFocus"), emits);
+const rootProps = useForwardProps(reactivePick(props, "defaultOpen", "open", "delayDuration", "disableHoverableContent", "disableClosingTrigger", "ignoreNonKeyboardFocus"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, providerContext.content.value, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }));
@@ -45,23 +46,23 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tooltip || {}
 </script>
 
 <template>
-  <TooltipRoot v-slot="{ open }" v-bind="rootProps" :disabled="!(text || kbds?.length || !!slots.content) || props.disabled">
-    <TooltipTrigger v-if="!!slots.default || !!reference" v-bind="$attrs" as-child :reference="reference" :class="props.class">
+  <TooltipRoot v-slot="{ open }" v-bind="rootProps" :disabled="!(props.text || props.kbds?.length || !!slots.content) || props.disabled">
+    <TooltipTrigger v-if="!!slots.default || !!props.reference" v-bind="$attrs" as-child :reference="props.reference" :class="props.class">
       <slot :open="open" />
     </TooltipTrigger>
 
     <TooltipPortal v-bind="portalProps">
       <FieldGroupReset>
-        <TooltipContent v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })">
+        <TooltipContent v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
           <slot name="content" :ui="ui">
-            <span v-if="text" data-slot="text" :class="ui.text({ class: uiProp?.text })">{{ text }}</span>
+            <span v-if="props.text" data-slot="text" :class="ui.text({ class: props.ui?.text })">{{ props.text }}</span>
 
-            <span v-if="kbds?.length" data-slot="kbds" :class="ui.kbds({ class: uiProp?.kbds })">
-              <UKbd v-for="(kbd, index) in kbds" :key="index" :size="uiProp?.kbdsSize || ui.kbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <span v-if="props.kbds?.length" data-slot="kbds" :class="ui.kbds({ class: props.ui?.kbds })">
+              <UKbd v-for="(kbd, index) in props.kbds" :key="index" :size="props.ui?.kbdsSize || ui.kbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
             </span>
           </slot>
 
-          <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+          <TooltipArrow v-if="!!props.arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
         </TooltipContent>
       </FieldGroupReset>
     </TooltipPortal>

package/dist/runtime/components/Tree.vue

@@ -4,17 +4,18 @@ import theme from "#build/ui/tree";
 
 <script setup>
 import { computed, toRef, useTemplateRef } from "vue";
-import { TreeRoot, TreeItem, TreeVirtualizer, useForwardPropsEmits } from "reka-ui";
+import { TreeRoot, TreeItem, TreeVirtualizer } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { defu } from "defu";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { get } from "../utils";
 import { getEstimateSize } from "../utils/virtualizer";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false },
@@ -42,9 +43,9 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "update:expanded"]);
 const slots = defineSlots();
+const props = useComponentProps("tree", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("tree", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
+const rootProps = useForwardProps(reactivePick(props, "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
 const as = computed(() => {
   if (typeof props.as === "string" || typeof props.as?.render === "function") {
     return { root: props.as, link: "button" };
@@ -120,7 +121,7 @@ defineExpose({
   <DefineItemTemplate v-slot="{ item, index, level }">
     <li
       role="presentation"
-      :class="!!nested && level > 1 ? ui.itemWithChildren({ class: [uiProp?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [uiProp?.item, item.ui?.item] })"
+      :class="!!nested && level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
     >
       <TreeItem
         v-slot="{ isExpanded, isSelected, isIndeterminate, handleSelect, handleToggle }"
@@ -138,9 +139,9 @@ defineExpose({
           <component
             :is="as.link"
             :type="as.link === 'button' ? 'button' : void 0"
-            :disabled="item.disabled || disabled"
+            :disabled="item.disabled || props.disabled"
             data-slot="link"
-            :class="ui.link({ class: [uiProp?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })"
+            :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || props.disabled })"
             :style="!nested && level > 1 ? { paddingLeft: flattenedPaddingFormula(level) } : void 0"
           >
             <slot
@@ -157,20 +158,20 @@ defineExpose({
                   v-if="item.icon"
                   :name="item.icon"
                   data-slot="linkLeadingIcon"
-                  :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
                 <UIcon
                   v-else-if="item.children?.length"
-                  :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
+                  :name="isExpanded ? props.expandedIcon ?? appConfig.ui.icons.folderOpen : props.collapsedIcon ?? appConfig.ui.icons.folder"
                   data-slot="linkLeadingIcon"
-                  :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
               </slot>
 
               <span
                 v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
                 data-slot="linkLabel"
-                :class="ui.linkLabel({ class: [uiProp?.linkLabel, item.ui?.linkLabel] })"
+                :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
               >
                 <slot
                   :name="item.slot ? `${item.slot}-label` : 'item-label'"
@@ -184,7 +185,7 @@ defineExpose({
               <span
                 v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']"
                 data-slot="linkTrailing"
-                :class="ui.linkTrailing({ class: [uiProp?.linkTrailing, item.ui?.linkTrailing] })"
+                :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
               >
                 <slot
                   :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
@@ -195,13 +196,13 @@ defineExpose({
                     v-if="item.trailingIcon"
                     :name="item.trailingIcon"
                     data-slot="linkTrailingIcon"
-                    :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
                   />
                   <UIcon
                     v-else-if="item.children?.length"
-                    :name="trailingIcon ?? appConfig.ui.icons.chevronDown"
+                    :name="props.trailingIcon ?? appConfig.ui.icons.chevronDown"
                     data-slot="linkTrailingIcon"
-                    :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
                   />
                 </slot>
               </span>
@@ -213,7 +214,7 @@ defineExpose({
           v-if="nested && item.children?.length && isExpanded"
           role="group"
           data-slot="listWithChildren"
-          :class="ui.listWithChildren({ class: [uiProp?.listWithChildren, item.ui?.listWithChildren] })"
+          :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
         >
           <ReuseTreeTemplate :items="item.children" :level="level + 1" />
         </ul>
@@ -230,16 +231,16 @@ defineExpose({
     v-slot="{ flattenItems }"
     v-bind="{ ...rootProps, ...$attrs }"
     :as="as.root"
-    :model-value="modelValue"
-    :default-value="defaultValue"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :get-key="getItemKey"
     :default-expanded="defaultExpanded"
-    :selection-behavior="selectionBehavior"
+    :selection-behavior="props.selectionBehavior"
   >
     <TreeVirtualizer
-      v-if="!!virtualize"
+      v-if="!!props.virtualize"
       v-slot="{ item, virtualItem }"
       :text-content="(item2) => getItemLabel(item2.value)"
       v-bind="virtualizerProps"
@@ -257,6 +258,6 @@ defineExpose({
       />
     </template>
 
-    <ReuseTreeTemplate v-else :items="items" :level="1" />
+    <ReuseTreeTemplate v-else :items="props.items" :level="1" />
   </TreeRoot>
 </template>

package/dist/runtime/components/User.vue

@@ -6,13 +6,14 @@ import theme from "#build/ui/user";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { usePrefix } from "../composables/usePrefix";
 import { tv } from "../utils/tv";
 import UChip from "./Chip.vue";
 import UAvatar from "./Avatar.vue";
 import ULink from "./Link.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   name: { type: String, required: false },
   description: { type: String, required: false },
@@ -27,8 +28,9 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("user", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("user", props);
+const prefix = usePrefix();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })({
   size: props.size,
   orientation: props.orientation,
@@ -37,41 +39,41 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" @click="onClick">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
     <slot name="avatar" :ui="ui">
-      <UChip v-if="chip && avatar" inset v-bind="typeof chip === 'object' ? chip : {}" :size="size">
-        <UAvatar :alt="name" v-bind="avatar" :size="size" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
+      <UChip v-if="props.chip && props.avatar" inset v-bind="typeof props.chip === 'object' ? props.chip : {}" :size="props.size">
+        <UAvatar :alt="props.name" v-bind="props.avatar" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       </UChip>
       <UAvatar
-        v-else-if="avatar"
-        :alt="name"
-        v-bind="avatar"
-        :size="size"
+        v-else-if="props.avatar"
+        :alt="props.name"
+        v-bind="props.avatar"
+        :size="props.size"
         data-slot="avatar"
-        :class="ui.avatar({ class: uiProp?.avatar })"
+        :class="ui.avatar({ class: props.ui?.avatar })"
       />
     </slot>
 
-    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
       <ULink
-        v-if="to"
-        :aria-label="name"
-        v-bind="{ to, target, ...$attrs }"
-        class="focus:outline-none peer"
+        v-if="props.to"
+        :aria-label="props.name"
+        v-bind="{ to: props.to, target: props.target, ...$attrs }"
+        :class="prefix('focus:outline-none peer')"
         raw
       >
-        <span class="absolute inset-0" aria-hidden="true" />
+        <span :class="prefix('absolute inset-0')" aria-hidden="true" />
       </ULink>
 
       <slot>
-        <p v-if="name || !!slots.name" data-slot="name" :class="ui.name({ class: uiProp?.name })">
+        <p v-if="props.name || !!slots.name" data-slot="name" :class="ui.name({ class: props.ui?.name })">
           <slot name="name">
-            {{ name }}
+            {{ props.name }}
           </slot>
         </p>
-        <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+        <p v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
-            {{ description }}
+            {{ props.description }}
           </slot>
         </p>
       </slot>

package/dist/runtime/components/color-mode/ColorModeAvatar.vue

@@ -5,6 +5,7 @@
 <script setup>
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
+import { usePrefix } from "../../composables/usePrefix";
 import UAvatar from "../Avatar.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -15,15 +16,17 @@ const props = defineProps({
   icon: { type: null, required: false },
   text: { type: String, required: false },
   size: { type: null, required: false },
+  color: { type: null, required: false },
   chip: { type: [Boolean, Object], required: false },
   class: { type: null, required: false },
   style: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const avatarProps = useForwardProps(reactiveOmit(props, "light", "dark"));
+const prefix = usePrefix();
 </script>
 
 <template>
-  <UAvatar v-bind="{ ...avatarProps, ...$attrs }" :src="light" class="dark:hidden" />
-  <UAvatar v-bind="{ ...avatarProps, ...$attrs }" :src="dark" class="hidden dark:block" />
+  <UAvatar v-bind="{ ...avatarProps, ...$attrs }" :src="light" :class="prefix('dark:hidden')" />
+  <UAvatar v-bind="{ ...avatarProps, ...$attrs }" :src="dark" :class="prefix('hidden dark:block')" />
 </template>

package/dist/runtime/components/color-mode/ColorModeButton.d.vue.ts

@@ -12,6 +12,6 @@ export interface ColorModeButtonProps extends Omit<ButtonProps, LinkPropsKeys |
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/color-mode/ColorModeButton.vue

@@ -4,15 +4,16 @@
 
 <script setup>
 import { computed } from "vue";
-import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useColorMode, useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
+import { useForwardProps } from "../../composables/useForwardProps";
 import { useLocale } from "../../composables/useLocale";
+import { usePrefix } from "../../composables/usePrefix";
 import UButton from "../Button.vue";
 import UIcon from "../Icon.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false, default: "ghost" },
   label: { type: String, required: false },
@@ -39,10 +40,11 @@ const props = defineProps({
   exactActiveClass: { type: String, required: false },
   viewTransition: { type: Boolean, required: false }
 });
+const props = useComponentProps("button", _props);
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("button", props);
+const prefix = usePrefix();
 const buttonProps = useForwardProps(reactiveOmit(props, "icon"));
 const isDark = computed({
   get() {
@@ -64,8 +66,8 @@ const isDark = computed({
     @click="isDark = !isDark"
   >
     <template #leading="{ ui }">
-      <UIcon :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, 'hidden dark:inline-block'] })" :name="appConfig.ui.icons.dark" />
-      <UIcon :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, 'dark:hidden'] })" :name="appConfig.ui.icons.light" />
+      <UIcon :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, prefix('hidden dark:inline-block')] })" :name="appConfig.ui.icons.dark" />
+      <UIcon :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, prefix('dark:hidden')] })" :name="appConfig.ui.icons.light" />
     </template>
   </UButton>
 </template>

package/dist/runtime/components/color-mode/ColorModeButton.vue.d.ts

@@ -12,6 +12,6 @@ export interface ColorModeButtonProps extends Omit<ButtonProps, LinkPropsKeys |
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;