@nuxt/ui 4.4.0 → 4.5.1

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

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance } from 'vue';
+import type { ComponentPublicInstance, VNode } from 'vue';
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tabs';
@@ -75,17 +75,17 @@ type SlotProps<T extends TabsItem> = (props: {
     item: T;
     index: number;
     ui: Tabs['ui'];
-}) => any;
+}) => VNode[];
 export type TabsSlots<T extends TabsItem = TabsItem> = {
-    'leading': SlotProps<T>;
-    'default'(props: {
+    'leading'?: SlotProps<T>;
+    'default'?(props: {
         item: T;
         index: number;
-    }): any;
-    'trailing': SlotProps<T>;
-    'content': SlotProps<T>;
-    'list-leading'(props?: {}): any;
-    'list-trailing'(props?: {}): any;
+    }): VNode[];
+    'trailing'?: SlotProps<T>;
+    'content'?: SlotProps<T>;
+    'list-leading'?(props?: {}): VNode[];
+    'list-trailing'?(props?: {}): VNode[];
 } & DynamicSlots<T, undefined, {
     index: number;
     ui: Tabs['ui'];

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/Tabs.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance } from 'vue';
+import type { ComponentPublicInstance, VNode } from 'vue';
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tabs';
@@ -75,17 +75,17 @@ type SlotProps<T extends TabsItem> = (props: {
     item: T;
     index: number;
     ui: Tabs['ui'];
-}) => any;
+}) => VNode[];
 export type TabsSlots<T extends TabsItem = TabsItem> = {
-    'leading': SlotProps<T>;
-    'default'(props: {
+    'leading'?: SlotProps<T>;
+    'default'?(props: {
         item: T;
         index: number;
-    }): any;
-    'trailing': SlotProps<T>;
-    'content': SlotProps<T>;
-    'list-leading'(props?: {}): any;
-    'list-trailing'(props?: {}): any;
+    }): VNode[];
+    'trailing'?: SlotProps<T>;
+    'content'?: SlotProps<T>;
+    'list-leading'?(props?: {}): VNode[];
+    'list-trailing'?(props?: {}): VNode[];
 } & DynamicSlots<T, undefined, {
     index: number;
     ui: Tabs['ui'];

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

@@ -1,12 +1,13 @@
+import type { VNode } from 'vue';
 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,35 +39,57 @@ 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];
 }
 export interface TextareaSlots {
-    leading(props: {
+    leading?(props: {
         ui: Textarea['ui'];
-    }): any;
-    default(props: {
+    }): VNode[];
+    default?(props: {
         ui: Textarea['ui'];
-    }): any;
-    trailing(props: {
+    }): VNode[];
+    trailing?(props: {
         ui: Textarea['ui'];
-    }): any;
+    }): VNode[];
 }
 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 +98,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

@@ -1,12 +1,13 @@
+import type { VNode } from 'vue';
 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,35 +39,57 @@ 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];
 }
 export interface TextareaSlots {
-    leading(props: {
+    leading?(props: {
         ui: Textarea['ui'];
-    }): any;
-    default(props: {
+    }): VNode[];
+    default?(props: {
         ui: Textarea['ui'];
-    }): any;
-    trailing(props: {
+    }): VNode[];
+    trailing?(props: {
         ui: Textarea['ui'];
-    }): any;
+    }): VNode[];
 }
 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 +98,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,18 @@
+import { type VNode } from 'vue';
+import type { ThemeUI } from '../composables/useComponentUI';
+export interface ThemeProps {
+    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;
+}>;
+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,18 @@
+import { type VNode } from 'vue';
+import type { ThemeUI } from '../composables/useComponentUI';
+export interface ThemeProps {
+    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;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/timeline';
 import type { AvatarProps, IconProps } from '../types';
@@ -48,16 +49,16 @@ export interface TimelineProps<T extends TimelineItem = TimelineItem> {
 }
 type SlotProps<T extends TimelineItem> = (props: {
     item: T;
-}) => any;
+}) => VNode[];
 export interface TimelineEmits<T extends TimelineItem = TimelineItem> {
     select: [event: Event, item: T];
 }
 export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
-    indicator: SlotProps<T>;
-    wrapper: SlotProps<T>;
-    date: SlotProps<T>;
-    title: SlotProps<T>;
-    description: SlotProps<T>;
+    indicator?: SlotProps<T>;
+    wrapper?: SlotProps<T>;
+    date?: SlotProps<T>;
+    title?: SlotProps<T>;
+    description?: SlotProps<T>;
 } & DynamicSlots<T, 'indicator' | 'wrapper' | 'date' | 'title' | 'description', {
     item: T;
 }>;
@@ -75,7 +76,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>;
 };