@nuxt/ui 4.9.0 → 4.11.0

package/dist/runtime/components/FileUpload.vue

@@ -59,7 +59,11 @@ const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
   dropzone: props.dropzone,
   onUpdate
 });
-const { emitFormInput, emitFormChange, id, name, color, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormInput, emitFormChange, id, name, size: formFieldSize, color: formFieldColor, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const variant = computed(() => props.multiple ? "area" : props.variant);
 const layout = computed(() => props.variant === "button" && !props.multiple ? "grid" : props.layout);
 const position = computed(() => {
@@ -71,17 +75,17 @@ const position = computed(() => {
   }
   return props.position;
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fileUpload || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.fileUpload || {} })({
   dropzone: props.dropzone,
   interactive: props.interactive,
-  color: color.value ?? props.color,
-  size: props.size,
+  color: color.value,
+  size: size.value,
   variant: variant.value,
   layout: layout.value,
   position: position.value,
   multiple: props.multiple,
-  highlight: highlight.value ?? props.highlight,
-  disabled: props.disabled
+  highlight: highlight.value,
+  disabled: disabled.value
 }));
 function createObjectUrl(file) {
   if (!props.fileImage) return void 0;
@@ -94,11 +98,14 @@ function formatFileSize(bytes) {
   const k = 1024;
   const sizes = ["B", "KB", "MB", "GB"];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  const size = bytes / Math.pow(k, i);
-  const formattedSize = i === 0 ? size.toString() : size.toFixed(0);
+  const value = bytes / Math.pow(k, i);
+  const formattedSize = i === 0 ? value.toString() : value.toFixed(0);
   return `${formattedSize}${sizes[i]}`;
 }
 function onUpdate(files, reset2 = false) {
+  if (disabled.value) {
+    return;
+  }
   if (props.multiple) {
     if (reset2) {
       modelValue.value = files;
@@ -154,7 +161,7 @@ defineExpose({
                   :as="{ img: 'img' }"
                   :src="createObjectUrl(file)"
                   :icon="props.fileIcon || appConfig.ui.icons.file"
-                  :size="props.size"
+                  :size="size"
                   data-slot="fileLeadingAvatar"
                   :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })"
                 />
@@ -184,7 +191,7 @@ defineExpose({
     size: 'xs'
   } : {
     variant: 'link',
-    size: props.size
+    size
   },
   ...typeof props.fileDelete === 'object' ? props.fileDelete : void 0
 }"
@@ -204,7 +211,7 @@ defineExpose({
     </template>
   </DefineFilesTemplate>
 
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot :open="open" :remove-file="removeFile" :ui="ui">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
@@ -212,6 +219,7 @@ defineExpose({
         :type="variant === 'button' ? 'button' : void 0"
         :role="variant === 'button' ? void 0 : 'button'"
         :disabled="variant === 'button' ? disabled : void 0"
+        :aria-disabled="variant === 'button' ? void 0 : disabled || void 0"
         :data-dragging="isDragging"
         data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
@@ -226,7 +234,7 @@ defineExpose({
           <slot name="leading" :ui="ui">
             <template v-if="props.icon !== false">
               <UIcon v-if="variant === 'button'" :name="props.icon ?? appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
-              <UAvatar v-else :icon="props.icon ?? appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+              <UAvatar v-else :icon="props.icon ?? appConfig.ui.icons.upload" :size="size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
             </template>
           </slot>
 
@@ -263,7 +271,7 @@ defineExpose({
       :multiple="multiple"
       :required="props.required"
       :disabled="disabled"
-      v-bind="{ ...$attrs, ...ariaAttrs }"
+      v-bind="{ ...$attrs, ...ariaAttrs, 'data-slot': void 0 }"
     />
   </Primitive>
 </template>

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

@@ -2,7 +2,9 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFileDialogReturn } from '@vueuse/core';
 import theme from '#build/ui/file-upload';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { InputHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>;
@@ -183,7 +185,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
     slots: FileUploadSlots<M>;
     emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Footer.vue

@@ -17,7 +17,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("footer", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footer || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.footer || {} })());
 </script>
 
 <template>

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/footer-columns';
-import type { IconProps, LinkProps } from '../types';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type FooterColumns = ComponentConfig<typeof theme, AppConfig, 'footerColumns'>;
 export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
@@ -61,7 +62,7 @@ declare const __VLS_export: <T extends FooterColumnLink>(__VLS_props: NonNullabl
     slots: FooterColumnsSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/FooterColumns.vue

@@ -21,7 +21,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("footerColumns", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footerColumns || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.footerColumns || {} })());
 </script>
 
 <template>

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/footer-columns';
-import type { IconProps, LinkProps } from '../types';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type FooterColumns = ComponentConfig<typeof theme, AppConfig, 'footerColumns'>;
 export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
@@ -61,7 +62,7 @@ declare const __VLS_export: <T extends FooterColumnLink>(__VLS_props: NonNullabl
     slots: FooterColumnsSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -51,7 +51,7 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
     ui?: {
         base?: any;
     };
-    onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
+    onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void) | (() => void);
 } & /** @vue-ignore */ Omit<FormHTMLAttributes, 'name'>;
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
     submit: [event: FormSubmitEvent<FormData<S, T>>];
@@ -115,7 +115,7 @@ declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N e
     slots: FormSlots;
     emit: ((evt: "error", event: FormErrorEvent) => void) & ((evt: "submit", event: FormSubmitEvent<FormData<S, T>>) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Form.vue

@@ -33,7 +33,7 @@ const emits = defineEmits(["submit", "error"]);
 defineSlots();
 const props = useComponentProps("form", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.form || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.form || {} }));
 const formId = props.id ?? useId();
 const formRef = useTemplateRef("formRef");
 const bus = useEventBus(`form-${formId}`);

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

@@ -51,7 +51,7 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
     ui?: {
         base?: any;
     };
-    onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
+    onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void) | (() => void);
 } & /** @vue-ignore */ Omit<FormHTMLAttributes, 'name'>;
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
     submit: [event: FormSubmitEvent<FormData<S, T>>];
@@ -115,7 +115,7 @@ declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N e
     slots: FormSlots;
     emit: ((evt: "error", event: FormErrorEvent) => void) & ((evt: "submit", event: FormSubmitEvent<FormData<S, T>>) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/FormField.vue

@@ -29,7 +29,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("formField", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.formField || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.formField || {} })({
   size: props.size,
   required: props.required,
   orientation: props.orientation

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

@@ -1,7 +1,11 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/header';
-import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { DrawerProps } from './Drawer.vue';
+import type { ModalProps } from './Modal.vue';
+import type { SlideoverProps } from './Slideover.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
 type HeaderMode = 'modal' | 'slideover' | 'drawer';
@@ -73,7 +77,7 @@ declare const __VLS_export: <T extends HeaderMode>(__VLS_props: NonNullable<Awai
     slots: HeaderSlots;
     emit: (event: "update:open", value: boolean) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Header.vue

@@ -48,7 +48,7 @@ watch(() => route.fullPath, () => {
   if (!props.autoClose) return;
   open.value = false;
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.header || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.header || {} })());
 const Menu = computed(() => ({
   slideover: USlideover,
   modal: UModal,
@@ -99,7 +99,7 @@ function toggleOpen() {
     </div>
   </DefineRightTemplate>
 
-  <Primitive :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
     <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">

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

@@ -1,7 +1,11 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/header';
-import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { DrawerProps } from './Drawer.vue';
+import type { ModalProps } from './Modal.vue';
+import type { SlideoverProps } from './Slideover.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
 type HeaderMode = 'modal' | 'slideover' | 'drawer';
@@ -73,7 +77,7 @@ declare const __VLS_export: <T extends HeaderMode>(__VLS_props: NonNullable<Awai
     slots: HeaderSlots;
     emit: (event: "update:open", value: boolean) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -119,7 +119,7 @@ declare const __VLS_export: <T extends InputValue, Mod extends ModelModifiers>(_
         nullable: true;
     } ? T | null : T) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Input.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input";
 </script>
 
 <script setup>
-import { useTemplateRef, computed, onMounted } from "vue";
+import { useTemplateRef, computed, onMounted, onScopeDispose } from "vue";
 import { Primitive } from "reka-ui";
 import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -51,17 +51,20 @@ const slots = defineSlots();
 const props = useComponentProps("input", _props);
 const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
-const { emitFormBlur, emitFormInput, emitFormChange, size: formFieldSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(_props, { deferInputValidation: true });
+const { emitFormBlur, emitFormInput, emitFormChange, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, emitFormFocus, ariaAttrs } = useFormField(_props, { deferInputValidation: true });
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.input || {} })({
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => fieldGroupSize.value ?? formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.input || {} })({
   type: props.type,
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: inputSize?.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -109,18 +112,20 @@ function autoFocus() {
     inputRef.value?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 defineExpose({
   inputRef
 });
 </script>
 
 <template>
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <input
       :id="id"
       ref="inputRef"
@@ -128,12 +133,12 @@ defineExpose({
       :value="modelValue"
       :name="name"
       :placeholder="props.placeholder"
-      data-slot="base"
       :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
       :required="props.required"
       :autocomplete="props.autocomplete"
       v-bind="{ ...$attrs, ...ariaAttrs }"
+      data-slot="base"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"

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

@@ -119,7 +119,7 @@ declare const __VLS_export: <T extends InputValue, Mod extends ModelModifiers>(_
         nullable: true;
     } ? T | null : T) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -2,7 +2,7 @@ import type { ComponentPublicInstance, VNode } from 'vue';
 import type { DateFieldRootProps, DateFieldRootEmits, DateRangeFieldRootProps, DateRangeFieldRootEmits, DateValue } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 import theme from '#build/ui/input-date';
 type InputDate = ComponentConfig<typeof theme, AppConfig, 'inputDate'>;
@@ -86,7 +86,7 @@ declare const __VLS_export: <R extends boolean>(__VLS_props: NonNullable<Awaited
     slots: InputDateSlots;
     emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:modelValue", value: InputDateModelValue<R>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/InputDate.vue

@@ -3,8 +3,7 @@ import theme from "#build/ui/input-date";
 </script>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
-import {} from "reka-ui";
+import { computed, onMounted, onScopeDispose, ref } from "vue";
 import { useForwardProps } from "../composables/useForwardProps";
 import { DateField as SingleDateField, DateRangeField as RangeDateField } from "reka-ui/namespaced";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
@@ -44,6 +43,7 @@ const _props = defineProps({
   placeholder: { type: Object, required: false },
   hourCycle: { type: null, required: false },
   step: { type: Object, required: false },
+  stepSnapping: { type: Boolean, required: false },
   granularity: { type: String, required: false },
   hideTimeZone: { type: Boolean, required: false },
   maxValue: { type: Object, required: false },
@@ -61,16 +61,19 @@ const slots = defineSlots();
 const props = useComponentProps("inputDate", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactiveOmit(props, "id", "name", "range", "modelValue", "defaultValue", "color", "variant", "size", "highlight", "fixed", "disabled", "autofocus", "autofocusDelay", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "separatorIcon", "class", "ui"), emits);
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const [DefineSegmentsTemplate, ReuseSegmentsTemplate] = createReusableTemplate();
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputDate || {} })({
-  color: color.value ?? props.color,
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => fieldGroupSize.value ?? formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputDate || {} })({
+  color: color.value,
   variant: props.variant,
-  size: inputSize.value ?? props.size,
-  highlight: highlight.value ?? props.highlight,
+  size: size.value,
+  highlight: highlight.value,
   fixed: props.fixed,
   loading: props.loading,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
@@ -100,11 +103,13 @@ function autoFocus() {
     inputsRef.value[0]?.$el?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 const DateField = computed(() => props.range ? RangeDateField : SingleDateField);
 defineExpose({
   inputsRef
@@ -128,14 +133,14 @@ defineExpose({
   </DefineSegmentsTemplate>
 
   <DateField.Root
-    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
     :id="id"
     v-slot="{ segments }"
+    data-slot="base"
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
     :model-value="props.modelValue"
     :default-value="props.defaultValue"
     :name="name"
     :disabled="disabled"
-    data-slot="base"
     :class="ui.base({ class: [props.ui?.base, props.class] })"
     @update:model-value="onUpdate"
     @blur="onBlur"

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

@@ -2,7 +2,7 @@ import type { ComponentPublicInstance, VNode } from 'vue';
 import type { DateFieldRootProps, DateFieldRootEmits, DateRangeFieldRootProps, DateRangeFieldRootEmits, DateValue } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 import theme from '#build/ui/input-date';
 type InputDate = ComponentConfig<typeof theme, AppConfig, 'inputDate'>;
@@ -86,7 +86,7 @@ declare const __VLS_export: <R extends boolean>(__VLS_props: NonNullable<Awaited
     slots: InputDateSlots;
     emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:modelValue", value: InputDateModelValue<R>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];