@nuxt/ui 4.4.0 → 4.5.0

package/dist/runtime/components/Tabs.vue

@@ -7,6 +7,7 @@ import { ref, computed } from "vue";
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -23,7 +24,7 @@ const props = defineProps({
   valueKey: { type: null, required: false, default: "value" },
   labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   defaultValue: { type: [String, Number], required: false, default: "0" },
   modelValue: { type: [String, Number], required: false },
   activationMode: { type: String, required: false },
@@ -32,6 +33,7 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("tabs", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "unmountOnHide"), emits);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tabs || {} })({
   color: props.color,
@@ -40,6 +42,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tabs || {} })
   orientation: props.orientation
 }));
 const triggersRef = ref([]);
+function setTriggerRef(index, el) {
+  triggersRef.value[index] = el;
+}
 defineExpose({
   triggersRef
 });
@@ -53,28 +58,28 @@ defineExpose({
     :orientation="orientation"
     :activation-mode="activationMode"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
   >
-    <TabsList data-slot="list" :class="ui.list({ class: props.ui?.list })">
-      <TabsIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" />
+    <TabsList data-slot="list" :class="ui.list({ class: uiProp?.list })">
+      <TabsIndicator data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" />
 
       <slot name="list-leading" />
 
       <TabsTrigger
         v-for="(item, index) of items"
         :key="index"
-        :ref="(el) => triggersRef[index] = el"
+        :ref="(el) => setTriggerRef(index, el)"
         :value="get(item, props.valueKey) ?? String(index)"
         :disabled="item.disabled"
         data-slot="trigger"
-        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
+        :class="ui.trigger({ class: [uiProp?.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: [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] })" />
+          <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] })" />
         </slot>
 
-        <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+        <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label] })">
           <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
         </span>
 
@@ -83,10 +88,10 @@ defineExpose({
             v-if="item.badge || item.badge === 0"
             color="neutral"
             variant="outline"
-            :size="item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()"
+            :size="item.ui?.trailingBadgeSize || uiProp?.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: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
+            :class="ui.trailingBadge({ class: [uiProp?.trailingBadge, item.ui?.trailingBadge] })"
           />
         </slot>
       </TabsTrigger>
@@ -95,7 +100,7 @@ defineExpose({
     </TabsList>
 
     <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="index" :value="get(item, props.valueKey) ?? String(index)" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
+      <TabsContent v-for="(item, index) of items" :key="index" :value="get(item, props.valueKey) ?? String(index)" data-slot="content" :class="ui.content({ class: [uiProp?.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.d.vue.ts

@@ -2,11 +2,11 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { TextareaHTMLAttributes } from '../types/html';
-import type { ModelModifiers } from '../types/input';
+import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
-export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
+export interface TextareaProps<T extends TextareaValue = TextareaValue, Mod extends ModelModifiers = ModelModifiers> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -38,14 +38,16 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     maxrows?: number;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
-    modelValue?: T;
-    defaultValue?: T;
-    modelModifiers?: ModelModifiers<T>;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
+    defaultValue?: ApplyModifiers<T, Mod>;
+    modelValue?: ApplyModifiers<T, Mod>;
+    modelModifiers?: Mod;
     class?: any;
     ui?: Textarea['slots'];
 }
-export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
-    'update:modelValue': [value: T];
+export interface TextareaEmits<T extends TextareaValue = TextareaValue, Mod extends ModelModifiers = ModelModifiers> {
+    'update:modelValue': [value: ApplyModifiers<T, Mod>];
     'blur': [event: FocusEvent];
     'change': [event: Event];
 }
@@ -62,11 +64,31 @@ export interface TextareaSlots {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T> & {
+declare const __VLS_export: <T extends TextareaValue, Mod extends ModelModifiers = ModelModifiers>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T, Mod> & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -75,7 +97,27 @@ declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<A
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Textarea.vue

@@ -7,6 +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 { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
@@ -31,11 +32,12 @@ const props = defineProps({
   rows: { type: Number, required: false, default: 3 },
   maxrows: { type: Number, required: false, default: 0 },
   highlight: { type: Boolean, required: false },
-  modelValue: { type: null, required: false },
+  fixed: { type: Boolean, required: false },
   defaultValue: { type: null, required: false },
-  modelModifiers: { type: Object, required: false },
+  modelValue: { type: null, required: false },
+  modelModifiers: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   icon: { type: null, required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
@@ -49,6 +51,7 @@ const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
 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 { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.textarea || {} })({
@@ -57,13 +60,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.textarea || {
   size: size?.value,
   loading: props.loading,
   highlight: highlight.value,
+  fixed: props.fixed,
   autoresize: props.autoresize,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing
 }));
 const textareaRef = useTemplateRef("textareaRef");
 function updateInput(value) {
-  if (props.modelModifiers?.trim) {
+  if (props.modelModifiers?.trim && (typeof value === "string" || value === null || value === void 0)) {
     value = value?.trim() ?? null;
   }
   if (props.modelModifiers?.number) {
@@ -72,7 +76,7 @@ function updateInput(value) {
   if (props.modelModifiers?.nullable) {
     value ||= null;
   }
-  if (props.modelModifiers?.optional) {
+  if (props.modelModifiers?.optional && !props.modelModifiers?.nullable && value !== null) {
     value ||= void 0;
   }
   modelValue.value = value;
@@ -139,7 +143,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <textarea
       :id="id"
       ref="textareaRef"
@@ -148,7 +152,7 @@ defineExpose({
       :rows="rows"
       :placeholder="placeholder"
       data-slot="base"
-      :class="ui.base({ class: props.ui?.base })"
+      :class="ui.base({ class: uiProp?.base })"
       :disabled="disabled"
       :required="required"
       v-bind="{ ...$attrs, ...ariaAttrs }"
@@ -160,16 +164,16 @@ defineExpose({
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
+    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+        <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 })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
       </slot>
     </span>
   </Primitive>

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

@@ -2,11 +2,11 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { TextareaHTMLAttributes } from '../types/html';
-import type { ModelModifiers } from '../types/input';
+import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
-export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
+export interface TextareaProps<T extends TextareaValue = TextareaValue, Mod extends ModelModifiers = ModelModifiers> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -38,14 +38,16 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     maxrows?: number;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
-    modelValue?: T;
-    defaultValue?: T;
-    modelModifiers?: ModelModifiers<T>;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
+    defaultValue?: ApplyModifiers<T, Mod>;
+    modelValue?: ApplyModifiers<T, Mod>;
+    modelModifiers?: Mod;
     class?: any;
     ui?: Textarea['slots'];
 }
-export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
-    'update:modelValue': [value: T];
+export interface TextareaEmits<T extends TextareaValue = TextareaValue, Mod extends ModelModifiers = ModelModifiers> {
+    'update:modelValue': [value: ApplyModifiers<T, Mod>];
     'blur': [event: FocusEvent];
     'change': [event: Event];
 }
@@ -62,11 +64,31 @@ export interface TextareaSlots {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T> & {
+declare const __VLS_export: <T extends TextareaValue, Mod extends ModelModifiers = ModelModifiers>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T, Mod> & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -75,7 +97,27 @@ declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<A
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -0,0 +1,17 @@
+import type { ThemeUI } from '../composables/useComponentUI';
+export interface ThemeProps {
+    ui: ThemeUI;
+}
+export interface ThemeSlots {
+    default(props?: {}): any;
+}
+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;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Theme.vue

@@ -0,0 +1,17 @@
+<script>
+import { computed } from "vue";
+import { provideThemeContext } from "../composables/useComponentUI";
+</script>
+
+<script setup>
+const props = defineProps({
+  ui: { type: null, required: true }
+});
+provideThemeContext({
+  ui: computed(() => props.ui)
+});
+</script>
+
+<template>
+  <slot />
+</template>

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

@@ -0,0 +1,17 @@
+import type { ThemeUI } from '../composables/useComponentUI';
+export interface ThemeProps {
+    ui: ThemeUI;
+}
+export interface ThemeSlots {
+    default(props?: {}): any;
+}
+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;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -75,7 +75,7 @@ declare const __VLS_export: <T extends TimelineItem>(__VLS_props: NonNullable<Aw
     expose: (exposed: {}) => void;
     attrs: any;
     slots: TimelineSlots<T>;
-    emit: ((evt: "select", event: Event, item: T) => void) & ((evt: "update:modelValue", value: string | number | undefined) => void);
+    emit: ((evt: "select", event: Event, item: T) => void) & ((event: "update:modelValue", value: string | number | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Timeline.vue

@@ -6,6 +6,7 @@ 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 { tv } from "../utils/tv";
 import { get } from "../utils";
 import UAvatar from "./Avatar.vue";
@@ -19,12 +20,13 @@ const props = defineProps({
   defaultValue: { type: [String, Number], required: false },
   reverse: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const emits = defineEmits(["select"]);
 const slots = defineSlots();
 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,
@@ -57,22 +59,22 @@ function onSelect(event, item) {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <div
       v-for="(item, index) in items"
       :key="index"
       data-slot="item"
-      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
       :data-state="getItemState(index)"
       @click="onSelect($event, item)"
     >
-      <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+      <div data-slot="container" :class="ui.container({ class: [uiProp?.container, item.ui?.container] })">
         <UAvatar
           :size="size"
           :icon="item.icon"
           v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
           data-slot="indicator"
-          :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })"
+          :class="ui.indicator({ class: [uiProp?.indicator, item.ui?.indicator] })"
           :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }"
         >
           <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item" />
@@ -81,24 +83,24 @@ function onSelect(event, item) {
         <Separator
           v-if="index < items.length - 1"
           data-slot="separator"
-          :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
+          :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator] })"
           :orientation="props.orientation"
         />
       </div>
 
-      <div data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+      <div data-slot="wrapper" :class="ui.wrapper({ class: [uiProp?.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: [props.ui?.date, item.ui?.date] })">
+          <div v-if="item.date || !!slots[item.slot ? `${item.slot}-date` : 'date']" data-slot="date" :class="ui.date({ class: [uiProp?.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: [props.ui?.title, item.ui?.title] })">
+          <div v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" data-slot="title" :class="ui.title({ class: [uiProp?.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: [props.ui?.description, item.ui?.description] })">
+          <div v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" data-slot="description" :class="ui.description({ class: [uiProp?.description, item.ui?.description] })">
             <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
               {{ item.description }}
             </slot>

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

@@ -75,7 +75,7 @@ declare const __VLS_export: <T extends TimelineItem>(__VLS_props: NonNullable<Aw
     expose: (exposed: {}) => void;
     attrs: any;
     slots: TimelineSlots<T>;
-    emit: ((evt: "select", event: Event, item: T) => void) & ((evt: "update:modelValue", value: string | number | undefined) => void);
+    emit: ((evt: "select", event: Event, item: T) => void) & ((event: "update:modelValue", value: string | number | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };