@eslamdevui/ui 4.0.0 → 4.1.1-rc.1

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

@@ -5,20 +5,21 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
     tooltip?: TooltipProviderProps;
     toaster?: ToasterProps | null;
     locale?: Locale<T>;
-    portal?: string | HTMLElement;
+    portal?: boolean | string | HTMLElement;
 }
 export interface AppSlots {
     default(props?: {}): any;
 }
-declare const _default: <T extends Messages>(__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<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & AppProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T extends Messages>(__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<AppProps<T>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: AppSlots;
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

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

@@ -1,15 +1,34 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/auth-form';
-import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, PinInputProps, IconProps } from '../types';
+import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, InputProps, CheckboxProps, SelectMenuProps, PinInputProps, IconProps } from '../types';
 import type { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
 import type { ComponentConfig } from '../types/tv';
 type AuthForm = ComponentConfig<typeof theme, AppConfig, 'authForm'>;
-type AuthFormField = FormFieldProps & {
+type AuthFormCheckboxField = Omit<FormFieldProps, 'name'> & CheckboxProps & {
     name: string;
-    type?: 'checkbox' | 'select' | 'password' | 'text' | 'otp' | 'email';
-    defaultValue?: any;
-    otp?: PinInputProps;
+    type: 'checkbox';
 };
+type AuthFormSelectField = Omit<FormFieldProps, 'name'> & SelectMenuProps & {
+    name: string;
+    type: 'select';
+};
+type AuthFormOtpField = Omit<FormFieldProps, 'name'> & Omit<PinInputProps, 'type' | 'otp'> & {
+    name: string;
+    type: 'otp';
+    /**
+     * @deprecated Bind props directly in the field object.
+     * The optional props for the `otp` type.
+     * `{ otp: true }`{lang="ts-type"}
+     */
+    otp?: boolean | PinInputProps;
+};
+type AuthFormInputFieldType = 'password' | 'text' | 'email' | 'number';
+type AuthFormInputField<T extends AuthFormInputFieldType = AuthFormInputFieldType> = Omit<FormFieldProps, 'name'> & InputProps & {
+    name: string;
+    type: T;
+};
+type AuthFormFieldType = 'checkbox' | 'select' | 'otp' | 'password' | 'text' | 'email' | 'number';
+export type AuthFormField<T extends AuthFormFieldType = AuthFormFieldType> = T extends 'checkbox' ? AuthFormCheckboxField : T extends 'select' ? AuthFormSelectField : T extends 'otp' ? AuthFormOtpField : T extends AuthFormInputFieldType ? AuthFormInputField<T> : never;
 export interface AuthFormProps<T extends FormSchema = FormSchema<object>, F extends AuthFormField = AuthFormField> {
     /**
      * The element or component this component should render as.
@@ -60,7 +79,9 @@ type DynamicFieldSlots<T, F, SlotProps = {
 type DynamicFormFieldSlots<T> = Record<string, (props?: {}) => any> & Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}`, (props?: {}) => any>;
 export type AuthFormSlots<T extends object = object, F extends AuthFormField = AuthFormField> = {
     header(props?: {}): any;
-    leading(props?: {}): any;
+    leading(props: {
+        ui: AuthForm['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     providers(props?: {}): any;
@@ -70,58 +91,19 @@ export type AuthFormSlots<T extends object = object, F extends AuthFormField = A
     }): any;
     footer(props?: {}): any;
 } & DynamicFieldSlots<T, F> & DynamicFormFieldSlots<T>;
-declare const _default: <T extends FormSchema, F extends AuthFormField>(__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<Pick<Partial<{}> & Omit<{
-        readonly onSubmit?: ((payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit"> & AuthFormProps<T, F> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
-        formRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<{
-            validate: {
-                <T_1 extends boolean>(opts: {
-                    name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
-                    silent?: false | undefined;
-                    nested?: boolean;
-                    transform?: T_1 | undefined;
-                }): Promise<import("../types").FormData<T, T_1>>;
-                <T_1 extends boolean>(opts: {
-                    name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
-                    silent?: true | undefined;
-                    nested?: boolean;
-                    transform?: T_1 | undefined;
-                }): Promise<false | import("../types").FormData<T, T_1>>;
-            };
-            errors: import("vue").Ref<{
-                id?: string | undefined;
-                name?: string | undefined;
-                message: string;
-            }[], import("../types").FormErrorWithId[] | {
-                id?: string | undefined;
-                name?: string | undefined;
-                message: string;
-            }[]>;
-            setErrors(errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined): void;
-            submit(): Promise<void>;
-            getErrors(name?: string | RegExp | keyof InferInput<T> | undefined): {
-                id?: string | undefined;
-                name?: string | undefined;
-                message: string;
-            }[];
-            clear(name?: string | RegExp | keyof InferInput<T> | undefined): void;
-            disabled: import("vue").ComputedRef<boolean>;
-            loading: import("vue").Ref<boolean, boolean>;
-            dirty: import("vue").ComputedRef<boolean>;
-            dirtyFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
-            blurredFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
-            touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
-        }> | null>>;
+declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__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<AuthFormProps<T, F> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "submit", payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => void>>> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        formRef: Readonly<import("vue").ShallowRef<any>>;
         state: import("vue").Reactive<InferInput<T>>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: AuthFormSlots<import("vue").Reactive<InferInput<T>>, F>;
     emit: (evt: "submit", payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/AuthForm.vue

@@ -7,7 +7,7 @@ import { reactive, ref, computed, useTemplateRef } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { omit } from "../utils";
+import { omit, pick } from "../utils";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 import UIcon from "./Icon.vue";
@@ -55,6 +55,23 @@ defineExpose({
   formRef,
   state
 });
+function pickFieldProps(field) {
+  const fields = ["name", "errorPattern", "help", "error", "hint", "size", "required", "eagerValidation", "validateOnInputDelay"];
+  if (field.type === "checkbox") {
+    return pick(field, fields);
+  }
+  return pick(field, [...fields, "label", "description"]);
+}
+function omitFieldProps(field) {
+  const fields = ["errorPattern", "help", "error", "hint", "size", "required", "eagerValidation", "validateOnInputDelay"];
+  if (field.type === "checkbox" || field.type === "select" || field.type === "otp") {
+    if (field.type === "checkbox") {
+      return omit(field, [...fields, "type"]);
+    }
+    return omit(field, [...fields, "type", "label", "description"]);
+  }
+  return omit(field, [...fields, "label", "description"]);
+}
 </script>
 
 <template>
@@ -62,7 +79,7 @@ defineExpose({
     <div v-if="icon || !!slots.icon || (title || !!slots.title) || (description || !!slots.description) || !!slots.header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
         <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-          <slot name="leading">
+          <slot name="leading" :ui="ui">
             <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           </slot>
         </div>
@@ -116,35 +133,38 @@ defineExpose({
         <UFormField
           v-for="field in fields"
           :key="field.name"
-          :label="field.type === 'checkbox' ? '' : field.label ?? ''"
-          :description="field.description"
-          :help="field.help"
-          :hint="field.hint"
-          :name="field.name"
-          :size="field.size"
-          :required="field.required"
-          :error="field.error"
+          v-bind="pickFieldProps(field)"
         >
           <slot :name="`${field.name}-field`" v-bind="{ state, field }">
             <UCheckbox
               v-if="field.type === 'checkbox'"
               v-model="state[field.name]"
               :class="ui.checkbox({ class: props.ui?.checkbox })"
-              v-bind="omit(field, ['description', 'help', 'hint', 'size'])"
+              v-bind="omitFieldProps(field)"
             />
             <USelectMenu
               v-else-if="field.type === 'select'"
               v-model="state[field.name]"
               :class="ui.select({ class: props.ui?.select })"
-              v-bind="omit(field, ['description', 'help', 'hint', 'size'])"
+              v-bind="omitFieldProps(field)"
+            />
+            <UPinInput
+              v-else-if="field.type === 'otp'"
+              :id="field.name"
+              v-model="state[field.name]"
+              :class="ui.otp({ class: props.ui?.otp })"
+              v-bind="{
+  ...omitFieldProps(field),
+  ...typeof field.otp === 'object' ? field.otp : {}
+}"
+              otp
             />
             <UInput
               v-else-if="field.type === 'password'"
               v-model="state[field.name]"
               :class="ui.password({ class: props.ui?.password })"
+              v-bind="omitFieldProps(field)"
               :type="passwordVisibility ? 'text' : 'password'"
-              v-bind="omit(field, ['label', 'description', 'help', 'hint', 'size', 'type', 'required', 'defaultValue'])"
-              :ui="{ root: 'w-full' }"
             >
               <template #trailing>
                 <UButton
@@ -159,19 +179,11 @@ defineExpose({
                 />
               </template>
             </UInput>
-            <UPinInput
-              v-else-if="field.type === 'otp'"
-              :id="field.name"
-              v-model="state[field.name]"
-              :class="ui.otp({ class: props.ui?.otp })"
-              otp
-              v-bind="field.otp"
-            />
             <UInput
               v-else
               v-model="state[field.name]"
               :class="ui.input({ class: props.ui?.input })"
-              v-bind="omit(field, ['label', 'description', 'help', 'hint', 'size', 'required', 'defaultValue'])"
+              v-bind="omitFieldProps(field)"
             />
           </slot>
 

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

@@ -1,15 +1,34 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/auth-form';
-import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, PinInputProps, IconProps } from '../types';
+import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, InputProps, CheckboxProps, SelectMenuProps, PinInputProps, IconProps } from '../types';
 import type { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
 import type { ComponentConfig } from '../types/tv';
 type AuthForm = ComponentConfig<typeof theme, AppConfig, 'authForm'>;
-type AuthFormField = FormFieldProps & {
+type AuthFormCheckboxField = Omit<FormFieldProps, 'name'> & CheckboxProps & {
     name: string;
-    type?: 'checkbox' | 'select' | 'password' | 'text' | 'otp' | 'email';
-    defaultValue?: any;
-    otp?: PinInputProps;
+    type: 'checkbox';
 };
+type AuthFormSelectField = Omit<FormFieldProps, 'name'> & SelectMenuProps & {
+    name: string;
+    type: 'select';
+};
+type AuthFormOtpField = Omit<FormFieldProps, 'name'> & Omit<PinInputProps, 'type' | 'otp'> & {
+    name: string;
+    type: 'otp';
+    /**
+     * @deprecated Bind props directly in the field object.
+     * The optional props for the `otp` type.
+     * `{ otp: true }`{lang="ts-type"}
+     */
+    otp?: boolean | PinInputProps;
+};
+type AuthFormInputFieldType = 'password' | 'text' | 'email' | 'number';
+type AuthFormInputField<T extends AuthFormInputFieldType = AuthFormInputFieldType> = Omit<FormFieldProps, 'name'> & InputProps & {
+    name: string;
+    type: T;
+};
+type AuthFormFieldType = 'checkbox' | 'select' | 'otp' | 'password' | 'text' | 'email' | 'number';
+export type AuthFormField<T extends AuthFormFieldType = AuthFormFieldType> = T extends 'checkbox' ? AuthFormCheckboxField : T extends 'select' ? AuthFormSelectField : T extends 'otp' ? AuthFormOtpField : T extends AuthFormInputFieldType ? AuthFormInputField<T> : never;
 export interface AuthFormProps<T extends FormSchema = FormSchema<object>, F extends AuthFormField = AuthFormField> {
     /**
      * The element or component this component should render as.
@@ -60,7 +79,9 @@ type DynamicFieldSlots<T, F, SlotProps = {
 type DynamicFormFieldSlots<T> = Record<string, (props?: {}) => any> & Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}`, (props?: {}) => any>;
 export type AuthFormSlots<T extends object = object, F extends AuthFormField = AuthFormField> = {
     header(props?: {}): any;
-    leading(props?: {}): any;
+    leading(props: {
+        ui: AuthForm['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     providers(props?: {}): any;
@@ -70,58 +91,19 @@ export type AuthFormSlots<T extends object = object, F extends AuthFormField = A
     }): any;
     footer(props?: {}): any;
 } & DynamicFieldSlots<T, F> & DynamicFormFieldSlots<T>;
-declare const _default: <T extends FormSchema, F extends AuthFormField>(__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<Pick<Partial<{}> & Omit<{
-        readonly onSubmit?: ((payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit"> & AuthFormProps<T, F> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
-        formRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<{
-            validate: {
-                <T_1 extends boolean>(opts: {
-                    name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
-                    silent?: false | undefined;
-                    nested?: boolean;
-                    transform?: T_1 | undefined;
-                }): Promise<import("../types").FormData<T, T_1>>;
-                <T_1 extends boolean>(opts: {
-                    name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
-                    silent?: true | undefined;
-                    nested?: boolean;
-                    transform?: T_1 | undefined;
-                }): Promise<false | import("../types").FormData<T, T_1>>;
-            };
-            errors: import("vue").Ref<{
-                id?: string | undefined;
-                name?: string | undefined;
-                message: string;
-            }[], import("../types").FormErrorWithId[] | {
-                id?: string | undefined;
-                name?: string | undefined;
-                message: string;
-            }[]>;
-            setErrors(errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined): void;
-            submit(): Promise<void>;
-            getErrors(name?: string | RegExp | keyof InferInput<T> | undefined): {
-                id?: string | undefined;
-                name?: string | undefined;
-                message: string;
-            }[];
-            clear(name?: string | RegExp | keyof InferInput<T> | undefined): void;
-            disabled: import("vue").ComputedRef<boolean>;
-            loading: import("vue").Ref<boolean, boolean>;
-            dirty: import("vue").ComputedRef<boolean>;
-            dirtyFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
-            blurredFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
-            touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
-        }> | null>>;
+declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__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<AuthFormProps<T, F> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "submit", payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => void>>> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        formRef: Readonly<import("vue").ShallowRef<any>>;
         state: import("vue").Reactive<InferInput<T>>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: AuthFormSlots<import("vue").Reactive<InferInput<T>>, F>;
     emit: (evt: "submit", payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

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

@@ -8,7 +8,10 @@ export interface AvatarProps {
      * The element or component this component should render as.
      * @defaultValue 'span'
      */
-    as?: any;
+    as?: any | {
+        root?: any;
+        img?: any;
+    };
     src?: string;
     alt?: string;
     /**
@@ -28,11 +31,10 @@ export interface AvatarProps {
 export interface AvatarSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
-    as: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Avatar.vue

@@ -5,6 +5,7 @@ import theme from "#build/ui/avatar";
 <script setup>
 import { ref, computed, watch } from "vue";
 import { Primitive, Slot } from "reka-ui";
+import { defu } from "defu";
 import { useAppConfig } from "#imports";
 import ImageComponent from "#build/ui-image-component";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
@@ -13,7 +14,7 @@ import UIcon from "./Icon.vue";
 import UChip from "./Chip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  as: { type: null, required: false, default: "span" },
+  as: { type: null, required: false },
   src: { type: String, required: false },
   alt: { type: String, required: false },
   icon: { type: [String, Object], required: false },
@@ -24,6 +25,12 @@ const props = defineProps({
   style: { type: null, required: false },
   ui: { type: null, required: false }
 });
+const as = computed(() => {
+  if (typeof props.as === "string" || typeof props.as?.render === "function") {
+    return { root: props.as };
+  }
+  return defu(props.as, { root: "span" });
+});
 const fallback = computed(() => props.text || (props.alt || "").split(" ").map((word) => word.charAt(0)).join("").substring(0, 2));
 const appConfig = useAppConfig();
 const { size } = useAvatarGroup(props);
@@ -55,15 +62,14 @@ function onError() {
 <template>
   <component
     :is="props.chip ? UChip : Primitive"
-    :as="as"
+    :as="as.root"
     v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="props.style"
   >
     <component
-      :is="ImageComponent"
+      :is="as.img || ImageComponent"
       v-if="src && !error"
-      role="img"
       :src="src"
       :alt="alt"
       :width="sizePx"

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

@@ -8,7 +8,10 @@ export interface AvatarProps {
      * The element or component this component should render as.
      * @defaultValue 'span'
      */
-    as?: any;
+    as?: any | {
+        root?: any;
+        img?: any;
+    };
     src?: string;
     alt?: string;
     /**
@@ -28,11 +31,10 @@ export interface AvatarProps {
 export interface AvatarSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
-    as: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -22,7 +22,8 @@ export interface AvatarGroupProps {
 export interface AvatarGroupSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -22,7 +22,8 @@ export interface AvatarGroupProps {
 export interface AvatarGroupSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -28,13 +28,20 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
     ui?: Badge['slots'];
 }
 export interface BadgeSlots {
-    leading(props?: {}): any;
-    default(props?: {}): any;
-    trailing(props?: {}): any;
+    leading(props: {
+        ui: Badge['ui'];
+    }): any;
+    default(props: {
+        ui: Badge['ui'];
+    }): any;
+    trailing(props: {
+        ui: Badge['ui'];
+    }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Badge.vue

@@ -42,18 +42,18 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.badge || {} }
 
 <template>
   <Primitive :as="as" :class="ui.base({ class: [props.ui?.base, props.class] })">
-    <slot name="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 })" />
     </slot>
 
-    <slot>
+    <slot :ui="ui">
       <span v-if="label !== void 0 && label !== null" :class="ui.label({ class: props.ui?.label })">
         {{ label }}
       </span>
     </slot>
 
-    <slot name="trailing">
+    <slot name="trailing" :ui="ui">
       <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
     </slot>
   </Primitive>

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

@@ -28,13 +28,20 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
     ui?: Badge['slots'];
 }
 export interface BadgeSlots {
-    leading(props?: {}): any;
-    default(props?: {}): any;
-    trailing(props?: {}): any;
+    leading(props: {
+        ui: Badge['ui'];
+    }): any;
+    default(props: {
+        ui: Badge['ui'];
+    }): any;
+    trailing(props: {
+        ui: Badge['ui'];
+    }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -49,21 +49,24 @@ export interface BannerProps {
     ui?: Banner['slots'];
 }
 export interface BannerSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: Banner['ui'];
+    }): any;
     title(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        ui: any;
+        ui: Banner['ui'];
     }): any;
 }
 export interface BannerEmits {
     close: [];
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
 }, string, import("vue").PublicProps, Readonly<BannerProps> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BannerSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Banner.vue

@@ -76,7 +76,7 @@ function onClose() {
       <div :class="ui.left({ class: props.ui?.left })" />
 
       <div :class="ui.center({ class: props.ui?.center })">
-        <slot name="leading">
+        <slot name="leading" :ui="ui">
           <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 

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

@@ -49,21 +49,24 @@ export interface BannerProps {
     ui?: Banner['slots'];
 }
 export interface BannerSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: Banner['ui'];
+    }): any;
     title(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        ui: any;
+        ui: Banner['ui'];
     }): any;
 }
 export interface BannerEmits {
     close: [];
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
 }, string, import("vue").PublicProps, Readonly<BannerProps> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BannerSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {