@eslamdevui/ui 4.1.1-rc.1 → 4.3.0

package/dist/runtime/components/FormField.vue

@@ -15,12 +15,13 @@ const props = defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
   help: { type: String, required: false },
-  error: { type: [Boolean, String], required: false },
+  error: { type: [Boolean, String], required: false, default: void 0 },
   hint: { type: String, required: false },
   size: { type: null, required: false },
   required: { type: Boolean, required: false },
   eagerValidation: { type: Boolean, required: false },
   validateOnInputDelay: { type: Number, required: false },
+  orientation: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
 });
@@ -28,7 +29,8 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.formField || {} })({
   size: props.size,
-  required: props.required
+  required: props.required,
+  orientation: props.orientation
 }));
 const formErrors = inject(formErrorsInjectionKey, null);
 const error = computed(() => props.error || formErrors?.value?.find((error2) => error2.name === props.name || props.errorPattern && error2.name?.match(props.errorPattern))?.message);
@@ -56,22 +58,22 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
-        <Label :for="id" :class="ui.label({ class: props.ui?.label })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="label || !!slots.label" data-slot="labelWrapper" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
+        <Label :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
           <slot name="label" :label="label">
             {{ label }}
           </slot>
         </Label>
-        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
+        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" data-slot="hint" :class="ui.hint({ class: props.ui?.hint })">
           <slot name="hint" :hint="hint">
             {{ hint }}
           </slot>
         </span>
       </div>
 
-      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
+      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>
@@ -80,13 +82,12 @@ provide(formFieldInjectionKey, computed(() => ({
 
     <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
       <slot :error="error" />
-
-      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
+      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" data-slot="error" :class="ui.error({ class: props.ui?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="ui.help({ class: props.ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" data-slot="help" :class="ui.help({ class: props.ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

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

@@ -29,6 +29,11 @@ export interface FormFieldProps {
      * @defaultValue `300`
      */
     validateOnInputDelay?: number;
+    /**
+     * The orientation of the form field.
+     * @defaultValue 'vertical'
+     */
+    orientation?: FormField['variants']['orientation'];
     class?: any;
     ui?: FormField['slots'];
 }
@@ -52,9 +57,11 @@ export interface FormFieldSlots {
         error?: boolean | string;
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {
+    error: boolean | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/header';
-import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps } from '../types';
+import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
 type HeaderMode = 'modal' | 'slideover' | 'drawer';
@@ -26,7 +26,7 @@ export interface HeaderProps<T extends HeaderMode = HeaderMode> {
      * Customize the toggle button to open the header menu displayed when the `content` slot is used.
      * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      */
-    toggle?: boolean | Partial<ButtonProps>;
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The side to render the toggle button on.
      * @defaultValue 'right'
@@ -52,10 +52,14 @@ export interface HeaderSlots {
         close?: () => void;
     }): any;
 }
-declare const __VLS_export: <T extends HeaderMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends HeaderMode>(__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: __VLS_PrettifyLocal<(HeaderProps<T> & {
         open?: boolean;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", value: boolean) => void>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", value: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: HeaderSlots;
@@ -63,8 +67,8 @@ declare const __VLS_export: <T extends HeaderMode>(__VLS_props: NonNullable<Awai
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Header.vue

@@ -70,6 +70,7 @@ function toggleOpen() {
         :aria-label="open ? t('header.close') : t('header.open')"
         :icon="open ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
         v-bind="typeof toggle === 'object' ? toggle : {}"
+        data-slot="toggle"
         :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
         @click="toggleOpen"
       />
@@ -77,11 +78,11 @@ function toggleOpen() {
   </DefineToggleTemplate>
 
   <DefineLeftTemplate>
-    <div :class="ui.left({ class: props.ui?.left })">
+    <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <ReuseToggleTemplate v-if="toggleSide === 'left'" />
 
       <slot name="left">
-        <ULink :to="to" :aria-label="ariaLabel" :class="ui.title({ class: props.ui?.title })">
+        <ULink :to="to" :aria-label="ariaLabel" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
@@ -91,20 +92,20 @@ function toggleOpen() {
   </DefineLeftTemplate>
 
   <DefineRightTemplate>
-    <div :class="ui.right({ class: props.ui?.right })">
+    <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" />
 
       <ReuseToggleTemplate v-if="toggleSide === 'right'" />
     </div>
   </DefineRightTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer :class="ui.container({ class: props.ui?.container })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <ReuseLeftTemplate />
 
-      <div :class="ui.center({ class: props.ui?.center })">
+      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
         <slot />
       </div>
 
@@ -126,13 +127,13 @@ function toggleOpen() {
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
-        <div v-if="mode !== 'drawer'" :class="ui.header({ class: props.ui?.header })">
+        <div v-if="mode !== 'drawer'" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <ReuseLeftTemplate />
 
           <ReuseRightTemplate />
         </div>
 
-        <div :class="ui.body({ class: props.ui?.body })">
+        <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body" />
         </div>
       </slot>

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/header';
-import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps } from '../types';
+import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
 type HeaderMode = 'modal' | 'slideover' | 'drawer';
@@ -26,7 +26,7 @@ export interface HeaderProps<T extends HeaderMode = HeaderMode> {
      * Customize the toggle button to open the header menu displayed when the `content` slot is used.
      * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      */
-    toggle?: boolean | Partial<ButtonProps>;
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The side to render the toggle button on.
      * @defaultValue 'right'
@@ -52,10 +52,14 @@ export interface HeaderSlots {
         close?: () => void;
     }): any;
 }
-declare const __VLS_export: <T extends HeaderMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends HeaderMode>(__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: __VLS_PrettifyLocal<(HeaderProps<T> & {
         open?: boolean;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", value: boolean) => void>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", value: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: HeaderSlots;
@@ -63,8 +67,8 @@ declare const __VLS_export: <T extends HeaderMode>(__VLS_props: NonNullable<Awai
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -1,9 +1,9 @@
 export interface IconProps {
-    name: string | object;
+    name: string | any;
     mode?: 'svg' | 'css';
     size?: string | number;
     customize?: (content: string, name?: string, prefix?: string, provider?: string) => string;
 }
-declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/Icon.vue

@@ -6,7 +6,7 @@
 import { useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 const props = defineProps({
-  name: { type: [String, Object], required: true },
+  name: { type: null, required: true },
   mode: { type: String, required: false },
   size: { type: [String, Number], required: false },
   customize: { type: Function, required: false }

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

@@ -1,9 +1,9 @@
 export interface IconProps {
-    name: string | object;
+    name: string | any;
     mode?: 'svg' | 'css';
     size?: string | number;
     customize?: (content: string, name?: string, prefix?: string, provider?: string) => string;
 }
-declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,13 +1,13 @@
-import type { InputHTMLAttributes } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { InputHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { AcceptableValue } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
 export type InputValue = AcceptableValue;
-export interface InputProps<T extends InputValue = InputValue> extends UseComponentIconsProps {
+export interface InputProps<T extends InputValue = InputValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<InputHTMLAttributes, 'name' | 'type' | 'placeholder' | 'required' | 'autocomplete' | 'autofocus' | 'disabled'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -39,7 +39,7 @@ export interface InputProps<T extends InputValue = InputValue> extends UseCompon
     highlight?: boolean;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: ModelModifiers;
+    modelModifiers?: ModelModifiers<T>;
     class?: any;
     ui?: Input['slots'];
 }
@@ -59,10 +59,14 @@ export interface InputSlots {
         ui: Input['ui'];
     }): any;
 }
-declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<InputProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)>>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends InputValue>(__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: __VLS_PrettifyLocal<InputProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+        inputRef: __VLS_UseTemplateRef<__VLS_Elements>;
     }>) => void;
     attrs: any;
     slots: InputSlots;
@@ -70,8 +74,8 @@ declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awai
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Input.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input";
 </script>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { useTemplateRef, computed, onMounted } from "vue";
 import { Primitive } from "reka-ui";
 import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -35,14 +35,14 @@ const props = defineProps({
   modelModifiers: { type: Object, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: [String, Object], required: false },
+  leadingIcon: { type: null, required: false },
   trailing: { type: Boolean, required: false },
-  trailingIcon: { type: [String, Object], required: false },
+  trailingIcon: { type: null, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: [String, Object], required: false }
+  loadingIcon: { type: null, required: false }
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
@@ -63,7 +63,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.input || {} }
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value
 }));
-const inputRef = ref(null);
+const inputRef = useTemplateRef("inputRef");
 function updateInput(value) {
   if (props.modelModifiers?.trim) {
     value = value?.trim() ?? null;
@@ -116,7 +116,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <input
       :id="id"
       ref="inputRef"
@@ -124,6 +124,7 @@ defineExpose({
       :value="modelValue"
       :name="name"
       :placeholder="placeholder"
+      data-slot="base"
       :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
       :required="required"
@@ -137,16 +138,16 @@ defineExpose({
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+    <span v-if="isLeading || !!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" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+        <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 })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.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" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </Primitive>

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

@@ -1,13 +1,13 @@
-import type { InputHTMLAttributes } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { InputHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { AcceptableValue } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
 export type InputValue = AcceptableValue;
-export interface InputProps<T extends InputValue = InputValue> extends UseComponentIconsProps {
+export interface InputProps<T extends InputValue = InputValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<InputHTMLAttributes, 'name' | 'type' | 'placeholder' | 'required' | 'autocomplete' | 'autofocus' | 'disabled'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -39,7 +39,7 @@ export interface InputProps<T extends InputValue = InputValue> extends UseCompon
     highlight?: boolean;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: ModelModifiers;
+    modelModifiers?: ModelModifiers<T>;
     class?: any;
     ui?: Input['slots'];
 }
@@ -59,10 +59,14 @@ export interface InputSlots {
         ui: Input['ui'];
     }): any;
 }
-declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<InputProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)>>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends InputValue>(__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: __VLS_PrettifyLocal<InputProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+        inputRef: __VLS_UseTemplateRef<__VLS_Elements>;
     }>) => void;
     attrs: any;
     slots: InputSlots;
@@ -70,8 +74,8 @@ declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awai
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -0,0 +1,87 @@
+import type { ComponentPublicInstance } 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 { ComponentConfig } from '../types/tv';
+import theme from '#build/ui/input-date';
+type InputDate = ComponentConfig<typeof theme, AppConfig, 'inputDate'>;
+type _DateFieldRootProps = Omit<DateFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type _RangeDateFieldRootProps = Omit<DateRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type InputDateDefaultValue<R extends boolean = false> = R extends true ? DateRangeFieldRootProps['defaultValue'] : DateFieldRootProps['defaultValue'];
+type InputDateModelValue<R extends boolean = false> = (R extends true ? DateRangeFieldRootProps['modelValue'] : DateFieldRootProps['modelValue']) | undefined;
+export interface InputDateProps<R extends boolean = false> extends UseComponentIconsProps, _DateFieldRootProps, _RangeDateFieldRootProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: InputDate['variants']['color'];
+    /**
+     * @defaultValue 'solid'
+     */
+    variant?: InputDate['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: InputDate['variants']['size'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    /**
+     * The icon to use as a range separator.
+     * @defaultValue appConfig.ui.icons.minus
+     * @IconifyIcon
+     */
+    separatorIcon?: IconProps['name'];
+    /** Whether or not a range of dates can be selected */
+    range?: R & boolean;
+    defaultValue?: InputDateDefaultValue<R>;
+    modelValue?: InputDateModelValue<R>;
+    class?: any;
+    ui?: InputDate['slots'];
+}
+export interface InputDateEmits<R extends boolean> extends Omit<DateFieldRootEmits & DateRangeFieldRootEmits, 'update:modelValue'> {
+    'update:modelValue': [date: InputDateModelValue<R>];
+    'change': [event: Event];
+    'blur': [event: FocusEvent];
+    'focus': [event: FocusEvent];
+}
+export interface InputDateSlots {
+    leading(props: {
+        ui: InputDate['ui'];
+    }): any;
+    default(props: {
+        ui: InputDate['ui'];
+    }): any;
+    trailing(props: {
+        ui: InputDate['ui'];
+    }): any;
+    separator(props: {
+        ui: InputDate['ui'];
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <R extends boolean>(__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: __VLS_PrettifyLocal<InputDateProps<R> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:modelValue", date: InputDateModelValue<R>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
+    }>) => void;
+    attrs: any;
+    slots: InputDateSlots;
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:modelValue", date: InputDateModelValue<R>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};