@nuxt/ui 4.7.1 → 4.8.1

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

@@ -20,6 +20,8 @@ export interface SwitchProps<T = boolean> extends Pick<SwitchRootProps<T>, 'disa
      * @defaultValue 'md'
      */
     size?: Switch['variants']['size'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
     /** When `true`, the loading icon will be displayed. */
     loading?: boolean;
     /**

package/dist/runtime/components/Table.vue

@@ -4,18 +4,19 @@ import theme from "#build/ui/table";
 
 <script setup>
 import { computed, useTemplateRef, watch, toRef } from "vue";
-import { Primitive, useForwardProps } from "reka-ui";
+import { Primitive } from "reka-ui";
 import { upperFirst } from "scule";
 import { defu } from "defu";
 import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from "@tanstack/vue-table";
 import { useVirtualizer } from "@tanstack/vue-virtual";
 import { reactivePick, createReusableTemplate, createRef } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   data: { type: Array, required: false },
   columns: { type: Array, required: false },
@@ -65,9 +66,9 @@ const props = defineProps({
   mergeOptions: { type: Function, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("table", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("table", props);
 const data = createRef(props.data ?? [], props.watchOptions?.deep !== false);
 const meta = computed(() => props.meta ?? {});
 const columns = computed(() => processColumns(props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey) => ({ accessorKey, header: upperFirst(accessorKey) }))));
@@ -315,7 +316,7 @@ defineExpose({
       data-slot="tr"
       :class="ui.tr({
   class: [
-    uiProp?.tr,
+    props.ui?.tr,
     resolveValue(tableApi.options.meta?.class?.tr, row)
   ]
 })"
@@ -334,7 +335,7 @@ defineExpose({
         data-slot="td"
         :class="ui.td({
   class: [
-    uiProp?.td,
+    props.ui?.td,
     resolveValue(cell.column.columnDef.meta?.class?.td, cell)
   ],
   pinned: !!cell.column.getIsPinned()
@@ -350,23 +351,23 @@ defineExpose({
       </td>
     </tr>
 
-    <tr v-if="row.getIsExpanded()" data-slot="tr" :class="ui.tr({ class: [uiProp?.tr] })">
-      <td :colspan="row.getAllCells().length" data-slot="td" :class="ui.td({ class: [uiProp?.td] })">
+    <tr v-if="row.getIsExpanded()" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
+      <td :colspan="row.getAllCells().length" data-slot="td" :class="ui.td({ class: [props.ui?.td] })">
         <slot name="expanded" :row="row" />
       </td>
     </tr>
   </DefineRowTemplate>
 
   <DefineTableTemplate>
-    <table ref="tableRef" data-slot="base" :class="ui.base({ class: [uiProp?.base] })">
-      <caption v-if="caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [uiProp?.caption] })">
+    <table ref="tableRef" data-slot="base" :class="ui.base({ class: [props.ui?.base] })">
+      <caption v-if="props.caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">
-          {{ caption }}
+          {{ props.caption }}
         </slot>
       </caption>
 
-      <thead data-slot="thead" :class="ui.thead({ class: [uiProp?.thead] })">
-        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="ui.tr({ class: [uiProp?.tr] })">
+      <thead data-slot="thead" :class="ui.thead({ class: [props.ui?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
@@ -377,7 +378,7 @@ defineExpose({
             data-slot="th"
             :class="ui.th({
   class: [
-    uiProp?.th,
+    props.ui?.th,
     resolveValue(header.column.columnDef.meta?.class?.th, header)
   ],
   pinned: !!header.column.getIsPinned()
@@ -393,10 +394,10 @@ defineExpose({
           </th>
         </tr>
 
-        <tr data-slot="separator" :class="ui.separator({ class: [uiProp?.separator] })" />
+        <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" />
       </thead>
 
-      <tbody data-slot="tbody" :class="ui.tbody({ class: [uiProp?.tbody] })">
+      <tbody data-slot="tbody" :class="ui.tbody({ class: [props.ui?.tbody] })">
         <slot name="body-top" />
 
         <template v-if="rows.length">
@@ -425,16 +426,16 @@ defineExpose({
           <ReuseRowTemplate v-for="row in bottomRows" :key="row.id" :row="row" />
         </template>
 
-        <tr v-else-if="loading && !!slots['loading']">
-          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="ui.loading({ class: uiProp?.loading })">
+        <tr v-else-if="props.loading && !!slots['loading']">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="ui.loading({ class: props.ui?.loading })">
             <slot name="loading" />
           </td>
         </tr>
 
         <tr v-else>
-          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
-              {{ empty || t("table.noData") }}
+              {{ props.empty || t("table.noData") }}
             </slot>
           </td>
         </tr>
@@ -445,11 +446,11 @@ defineExpose({
       <tfoot
         v-if="hasFooter"
         data-slot="tfoot"
-        :class="ui.tfoot({ class: [uiProp?.tfoot] })"
+        :class="ui.tfoot({ class: [props.ui?.tfoot] })"
       >
-        <tr data-slot="separator" :class="ui.separator({ class: [uiProp?.separator] })" />
+        <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" />
 
-        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="ui.tr({ class: [uiProp?.tr] })">
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
           <th
             v-for="header in footerGroup.headers"
             :key="header.id"
@@ -459,7 +460,7 @@ defineExpose({
             data-slot="th"
             :class="ui.th({
   class: [
-    uiProp?.th,
+    props.ui?.th,
     resolveValue(header.column.columnDef.meta?.class?.th, header)
   ],
   pinned: !!header.column.getIsPinned()
@@ -478,7 +479,7 @@ defineExpose({
     </table>
   </DefineTableTemplate>
 
-  <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive ref="rootRef" :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ReuseTableTemplate />
   </Primitive>
 </template>

package/dist/runtime/components/Tabs.vue

@@ -4,16 +4,17 @@ import theme from "#build/ui/tabs";
 
 <script setup>
 import { ref, computed } from "vue";
-import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from "reka-ui";
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } 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 { get } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
 import UBadge from "./Badge.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   items: { type: Array, required: false },
   color: { type: null, required: false },
@@ -32,9 +33,9 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
+const props = useComponentProps("tabs", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("tabs", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "unmountOnHide"), emits);
+const rootProps = useForwardProps(reactivePick(props, "as", "unmountOnHide"), emits);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tabs || {} })({
   color: props.color,
   variant: props.variant,
@@ -53,33 +54,33 @@ defineExpose({
 <template>
   <TabsRoot
     v-bind="rootProps"
-    :model-value="modelValue"
-    :default-value="defaultValue"
-    :orientation="orientation"
-    :activation-mode="activationMode"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :orientation="props.orientation"
+    :activation-mode="props.activationMode"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
-    <TabsList data-slot="list" :class="ui.list({ class: uiProp?.list })">
-      <TabsIndicator data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" />
+    <TabsList data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" />
 
       <slot name="list-leading" />
 
       <TabsTrigger
-        v-for="(item, index) of items"
+        v-for="(item, index) of props.items"
         :key="get(item, props.valueKey) ?? index"
         :ref="(el) => setTriggerRef(index, el)"
         :value="get(item, props.valueKey) ?? String(index)"
         :disabled="item.disabled"
         data-slot="trigger"
-        :class="ui.trigger({ class: [uiProp?.trigger, item.ui?.trigger] })"
+        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
       >
         <slot name="leading" :item="item" :index="index" :ui="ui">
-          <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, item.ui?.leadingIcon] })" />
-          <UAvatar v-else-if="item.avatar" :size="item.ui?.leadingAvatarSize || uiProp?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="item.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: [uiProp?.leadingAvatar, item.ui?.leadingAvatar] })" />
+          <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
+          <UAvatar v-else-if="item.avatar" :size="item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="item.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
         </slot>
 
-        <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label] })">
+        <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
           <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
         </span>
 
@@ -88,10 +89,10 @@ defineExpose({
             v-if="item.badge || item.badge === 0"
             color="neutral"
             variant="outline"
-            :size="item.ui?.trailingBadgeSize || uiProp?.trailingBadgeSize || ui.trailingBadgeSize()"
+            :size="item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()"
             v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
             data-slot="trailingBadge"
-            :class="ui.trailingBadge({ class: [uiProp?.trailingBadge, item.ui?.trailingBadge] })"
+            :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
           />
         </slot>
       </TabsTrigger>
@@ -99,8 +100,8 @@ defineExpose({
       <slot name="list-trailing" />
     </TabsList>
 
-    <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="get(item, props.valueKey) ?? index" :value="get(item, props.valueKey) ?? String(index)" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content, item.class] })">
+    <template v-if="!!props.content">
+      <TabsContent v-for="(item, index) of props.items" :key="get(item, props.valueKey) ?? index" :value="get(item, props.valueKey) ?? String(index)" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
         <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
           {{ item.content }}
         </slot>

package/dist/runtime/components/Textarea.vue

@@ -7,7 +7,7 @@ import { useTemplateRef, computed, onMounted, nextTick, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
@@ -15,7 +15,7 @@ import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   id: { type: String, required: false },
   name: { type: String, required: false },
@@ -49,17 +49,17 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
+const props = useComponentProps("textarea", _props);
 const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("textarea", props);
-const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props, { deferInputValidation: true });
+const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props, { deferInputValidation: true });
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.textarea || {} })({
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: size?.value,
+  size: size?.value ?? props.size,
   loading: props.loading,
-  highlight: highlight.value,
+  highlight: highlight.value ?? props.highlight,
   fixed: props.fixed,
   autoresize: props.autoresize,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
@@ -133,7 +133,8 @@ onMounted(() => {
   setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
-  setTimeout(() => {
+  setTimeout(async () => {
+    await nextTick();
     autoResize();
   }, props.autoresizeDelay);
 });
@@ -144,18 +145,18 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <textarea
       :id="id"
       ref="textareaRef"
       :value="modelValue"
       :name="name"
-      :rows="rows"
-      :placeholder="placeholder"
+      :rows="props.rows"
+      :placeholder="props.placeholder"
       data-slot="base"
-      :class="ui.base({ class: uiProp?.base })"
+      :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
-      :required="required"
+      :required="props.required"
       v-bind="{ ...$attrs, ...ariaAttrs }"
       @input="onInput"
       @blur="onBlur"
@@ -165,16 +166,16 @@ defineExpose({
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+    <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="uiProp?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!props.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </Primitive>

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

@@ -1,16 +1,24 @@
 import { type VNode } from 'vue';
-import type { ThemeUI } from '../composables/useComponentUI';
+import type { ThemeDefaults, ThemeUI } from '../composables/useComponentProps';
 export interface ThemeProps {
-    ui: ThemeUI;
+    /**
+     * Per-component prop defaults that flow through `useComponentProps` to
+     * every descendant. Each key maps to a partial of that component's props.
+     * @example `{ button: { color: 'warning' }, tooltip: { delayDuration: 0 } }`
+     */
+    props?: ThemeDefaults;
+    /**
+     * Per-component slot class overrides (flat shorthand for `:props.<name>.ui`).
+     * @example `{ button: { base: 'rounded-full' } }`
+     */
+    ui?: ThemeUI;
 }
 export interface ThemeSlots {
     default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ThemeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ThemeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ThemeSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Theme.vue

@@ -1,14 +1,42 @@
 <script>
 import { computed } from "vue";
-import { provideThemeContext } from "../composables/useComponentUI";
+import defu from "defu";
+import { injectThemeContext, provideThemeContext } from "../composables/useComponentProps";
 </script>
 
 <script setup>
-const props = defineProps({
-  ui: { type: null, required: true }
+const _props = defineProps({
+  props: { type: Object, required: false },
+  ui: { type: null, required: false }
 });
+defineSlots();
+const parent = injectThemeContext();
+const NAMESPACES = /* @__PURE__ */ new Set(["prose"]);
+function normalizeUi(ui) {
+  if (!ui) return {};
+  const result = {};
+  for (const [key, value] of Object.entries(ui)) {
+    if (!value || typeof value !== "object") continue;
+    if (NAMESPACES.has(key)) {
+      const nested = {};
+      for (const [childKey, childValue] of Object.entries(value)) {
+        if (childValue && typeof childValue === "object") {
+          nested[childKey] = { ui: childValue };
+        }
+      }
+      result[key] = nested;
+    } else {
+      result[key] = { ui: value };
+    }
+  }
+  return result;
+}
 provideThemeContext({
-  ui: computed(() => props.ui)
+  defaults: computed(() => defu(
+    _props.props ?? {},
+    normalizeUi(_props.ui),
+    parent.defaults.value
+  ))
 });
 </script>
 

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

@@ -1,16 +1,24 @@
 import { type VNode } from 'vue';
-import type { ThemeUI } from '../composables/useComponentUI';
+import type { ThemeDefaults, ThemeUI } from '../composables/useComponentProps';
 export interface ThemeProps {
-    ui: ThemeUI;
+    /**
+     * Per-component prop defaults that flow through `useComponentProps` to
+     * every descendant. Each key maps to a partial of that component's props.
+     * @example `{ button: { color: 'warning' }, tooltip: { delayDuration: 0 } }`
+     */
+    props?: ThemeDefaults;
+    /**
+     * Per-component slot class overrides (flat shorthand for `:props.<name>.ui`).
+     * @example `{ button: { base: 'rounded-full' } }`
+     */
+    ui?: ThemeUI;
 }
 export interface ThemeSlots {
     default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ThemeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ThemeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ThemeSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Timeline.vue

@@ -6,11 +6,11 @@ import theme from "#build/ui/timeline";
 import { computed } from "vue";
 import { Primitive, Separator } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
 import { get } from "../utils";
 import UAvatar from "./Avatar.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   items: { type: Array, required: true },
   size: { type: null, required: false },
@@ -24,9 +24,9 @@ const props = defineProps({
 });
 const emits = defineEmits(["select"]);
 const slots = defineSlots();
+const props = useComponentProps("timeline", _props);
 const modelValue = defineModel({ type: [String, Number] });
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("timeline", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.timeline || {} })({
   orientation: props.orientation,
   size: props.size,
@@ -59,48 +59,48 @@ function onSelect(event, item) {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div
-      v-for="(item, index) in items"
+      v-for="(item, index) in props.items"
       :key="index"
       data-slot="item"
-      :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       :data-state="getItemState(index)"
       @click="onSelect($event, item)"
     >
-      <div data-slot="container" :class="ui.container({ class: [uiProp?.container, item.ui?.container] })">
+      <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
         <UAvatar
-          :size="size"
+          :size="props.size"
           :icon="item.icon"
           v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
           data-slot="indicator"
-          :class="ui.indicator({ class: [uiProp?.indicator, item.ui?.indicator] })"
+          :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })"
           :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }"
         >
           <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item" />
         </UAvatar>
 
         <Separator
-          v-if="index < items.length - 1"
+          v-if="index < props.items.length - 1"
           data-slot="separator"
-          :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator] })"
+          :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
           :orientation="props.orientation"
         />
       </div>
 
-      <div data-slot="wrapper" :class="ui.wrapper({ class: [uiProp?.wrapper, item.ui?.wrapper] })">
+      <div data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
         <slot :name="item.slot ? `${item.slot}-wrapper` : 'wrapper'" :item="item">
-          <div v-if="item.date || !!slots[item.slot ? `${item.slot}-date` : 'date']" data-slot="date" :class="ui.date({ class: [uiProp?.date, item.ui?.date] })">
+          <div v-if="item.date || !!slots[item.slot ? `${item.slot}-date` : 'date']" data-slot="date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
             <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
               {{ item.date }}
             </slot>
           </div>
-          <div v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" data-slot="title" :class="ui.title({ class: [uiProp?.title, item.ui?.title] })">
+          <div v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" data-slot="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
             <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
               {{ item.title }}
             </slot>
           </div>
-          <div v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" data-slot="description" :class="ui.description({ class: [uiProp?.description, item.ui?.description] })">
+          <div v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
             <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
               {{ item.description }}
             </slot>