@nuxt/ui 4.9.0 → 4.11.0

package/.nuxt/ui.static.css

@@ -1,15 +1,15 @@
 @theme static {
-  --color-old-neutral-50: oklch(98.5% 0 0);
-  --color-old-neutral-100: oklch(97% 0 0);
-  --color-old-neutral-200: oklch(92.2% 0 0);
-  --color-old-neutral-300: oklch(87% 0 0);
-  --color-old-neutral-400: oklch(70.8% 0 0);
-  --color-old-neutral-500: oklch(55.6% 0 0);
-  --color-old-neutral-600: oklch(43.9% 0 0);
-  --color-old-neutral-700: oklch(37.1% 0 0);
-  --color-old-neutral-800: oklch(26.9% 0 0);
-  --color-old-neutral-900: oklch(20.5% 0 0);
-  --color-old-neutral-950: oklch(14.5% 0 0);
+  --color-old-neutral-50: oklch(98.5% 0 none);
+  --color-old-neutral-100: oklch(97% 0 none);
+  --color-old-neutral-200: oklch(92.2% 0 none);
+  --color-old-neutral-300: oklch(87% 0 none);
+  --color-old-neutral-400: oklch(70.8% 0 none);
+  --color-old-neutral-500: oklch(55.6% 0 none);
+  --color-old-neutral-600: oklch(43.9% 0 none);
+  --color-old-neutral-700: oklch(37.1% 0 none);
+  --color-old-neutral-800: oklch(26.9% 0 none);
+  --color-old-neutral-900: oklch(20.5% 0 none);
+  --color-old-neutral-950: oklch(14.5% 0 none);
 }
 
 @theme default inline {

package/README.md

@@ -33,6 +33,7 @@ Kickstart your project with one of our ready-to-use Nuxt UI templates or follow
 - [Portfolio](https://github.com/nuxt-ui-templates/portfolio) — A sleek portfolio template to showcase your work, skills and blog powered by Nuxt Content.
 - [Changelog](https://github.com/nuxt-ui-templates/changelog) — A changelog template to display your repository releases notes from GitHub powered by Nuxt MDC.
 - [Editor](https://github.com/nuxt-ui-templates/editor) — A rich text editor template powered by TipTap with support for markdown, HTML, and JSON content types.
+- [Calendar](https://github.com/nuxt-ui-templates/calendar) — An Apple Calendar-inspired template with day, week and month views, drag and drop and optimistic updates.
 
 ## Installation
 

package/cli/commands/make/locale.mjs

@@ -11,16 +11,14 @@ export default defineCommand({
   },
   args: {
     code: {
-      description: 'Locale code to create. For example: en.',
+      description: 'Locale code to create. For example: en or en_gb.',
       required: true
     },
     name: {
-      description: 'Locale name to create. For example: English.',
-      required: true
+      description: 'Locale name in its own language. Defaults to the CLDR name for the code.'
     },
     dir: {
-      description: 'Locale direction. For example: rtl.',
-      default: 'ltr'
+      description: 'Locale direction. Defaults to the CLDR direction for the code.'
     }
   },
   async setup({ args }) {
@@ -36,13 +34,44 @@ export default defineCommand({
       process.exit(1)
     }
 
-    if (!['ltr', 'rtl'].includes(args.dir)) {
-      consola.error(`🚨 Direction ${args.dir} not supported!`)
+    if (!args.code.match(/^[a-z]{2,3}(?:_(?:[a-z]{2}|\d{3}))?$/)) {
+      consola.error(`🚨 ${args.code} is not a valid locale code!\nExample: en, en_gb or es_419`)
+      process.exit(1)
+    }
+
+    const code = normalizeLocale(args.code)
+    const language = code.split('-')[0]
+
+    // `Intl.DisplayNames` echoes the input back when the code is unknown to CLDR
+    if (new Intl.DisplayNames(['en'], { type: 'language' }).of(language) === language) {
+      consola.error(`🚨 ${language} is not a known ISO 639 language code!\nFor example, the code for Tajik is tg, not tj.`)
+      process.exit(1)
+    }
+
+    const region = code.split('-')[1]
+    if (region && new Intl.DisplayNames(['en'], { type: 'region' }).of(region) === region) {
+      consola.error(`🚨 ${region} is not a known region code!\nExample: en_gb or pt_br`)
       process.exit(1)
     }
 
-    if (!args.code.match(/^[a-z]{2}(?:_[a-z]{2,4})?$/)) {
-      consola.error(`🚨 ${args.code} is not a valid locale code!\nExample: en or en_us`)
+    let name = args.name
+    if (!name) {
+      const cldrName = new Intl.DisplayNames([code], { type: 'language', languageDisplay: 'standard' }).of(code)
+      name = cldrName.charAt(0).toLocaleUpperCase(code) + cldrName.slice(1)
+      consola.info(`🌍 Using CLDR name for ${code}: ${name}`)
+    }
+
+    let dir = args.dir
+    if (!dir) {
+      const intlLocale = new Intl.Locale(code)
+      dir = (intlLocale.getTextInfo?.() ?? intlLocale.textInfo)?.direction ?? 'ltr'
+      if (dir === 'rtl') {
+        consola.info(`🌍 Using CLDR direction for ${code}: ${dir}`)
+      }
+    }
+
+    if (!['ltr', 'rtl'].includes(dir)) {
+      consola.error(`🚨 Direction ${dir} not supported!`)
       process.exit(1)
     }
 
@@ -55,8 +84,8 @@ export default defineCommand({
     await fsp.copyFile(originLocaleFilePath, newLocaleFilePath)
     const localeFile = await fsp.readFile(newLocaleFilePath, 'utf-8')
     const rewrittenLocaleFile = localeFile
-      .replace(/name: '(.*)',/, `name: '${args.name}',`)
-      .replace(/code: '(.*)',/, `code: '${normalizeLocale(args.code)}',${(args.dir && args.dir !== 'ltr') ? `\n  dir: '${args.dir}',` : ''}`)
+      .replace(/name: '(.*)',/, `name: '${name}',`)
+      .replace(/code: '(.*)',/, `code: '${code}',${dir !== 'ltr' ? `\n  dir: '${dir}',` : ''}`)
     await fsp.writeFile(newLocaleFilePath, rewrittenLocaleFile)
 
     consola.success(`🪄 Generated ${newLocaleFilePath}`)

package/cli/templates.mjs

@@ -73,7 +73,7 @@ const props = useComponentProps('${componentKey}', _props)
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
 // eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => tv({ extend: tv(theme), ...(${appConfigLookup} || {}) })())
+const ui = computed(() => tv({ extend: theme, ...(${appConfigLookup} || {}) })())
 </script>
 
 <template>
@@ -126,7 +126,7 @@ const appConfig = useAppConfig() as ${upperName}['AppConfig']
 const rootProps = useForwardProps(reactivePick(props, 'as'), emits)
 
 // eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => tv({ extend: tv(theme), ...(${appConfigLookup} || {}) })())
+const ui = computed(() => tv({ extend: theme, ...(${appConfigLookup} || {}) })())
 </script>
 
 <template>

package/dist/module.d.mts

@@ -98,7 +98,7 @@ interface ModuleOptions {
          * - `string[]`: Enable detection and include additional components (useful for dynamic components)
          * @defaultValue false
          * @example true
-         * @example ['Modal', 'Dropdown']
+         * @example ['Modal', 'DropdownMenu']
          */
         componentDetection?: boolean | string[];
     };

package/dist/module.json

@@ -1,13 +1,13 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.9.0",
+  "version": "4.11.0",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=4.1.0"
   },
   "builder": {
-    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"
   }
 }

package/dist/module.mjs

@@ -1,17 +1,20 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, addImports } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, g as getDefaultConfig, p as publicComposables, a as addTemplates } from './shared/ui.BfHSFiIO.mjs';
+import { d as defaultOptions, r as resolveColors, c as getDefaultConfig, g as getClientBundleIcons, f as publicComposables, a as addTemplates } from './shared/ui.DNq7CNkE.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
 import 'knitwork';
 import 'tailwindcss/colors';
+import 'node:fs';
 import 'node:fs/promises';
+import 'consola';
 import 'pathe';
 import 'tinyglobby';
+import 'mlly';
 
 const name = "@nuxt/ui";
-const version = "4.9.0";
+const version = "4.11.0";
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -98,6 +101,11 @@ const module$1 = defineNuxtModule({
     nuxt.options.ui = options;
     nuxt.options.alias["#ui"] = resolve("./runtime");
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultConfig(options.theme));
+    nuxt.hook("icon:clientBundleIcons", (icons) => {
+      for (const name2 of getClientBundleIcons(nuxt.options.appConfig.ui?.icons)) {
+        icons.add(name2);
+      }
+    });
     nuxt.options.build.transpile.push("reka-ui");
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
     nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, `${options.theme?.prefix ? options.theme.prefix + ":" : ""}isolate`].filter(Boolean).join(" ");

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

@@ -2,7 +2,7 @@ import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/accordion';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>;
@@ -92,7 +92,7 @@ declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<A
     slots: AccordionSlots<T>;
     emit: (evt: "update:modelValue", value: string | string[] | 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/Accordion.vue

@@ -32,7 +32,7 @@ const slots = defineSlots();
 const props = useComponentProps("accordion", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "unmountOnHide"), emits);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.accordion || {} })({
   disabled: props.disabled
 }));
 </script>

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

@@ -2,7 +2,7 @@ import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/accordion';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>;
@@ -92,7 +92,7 @@ declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<A
     slots: AccordionSlots<T>;
     emit: (evt: "update:modelValue", value: string | string[] | 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/Alert.d.vue.ts

@@ -1,7 +1,10 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/alert';
-import type { AvatarProps, ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Alert = ComponentConfig<typeof theme, AppConfig, 'alert'>;
 export interface AlertProps {

package/dist/runtime/components/Alert.vue

@@ -32,7 +32,7 @@ const slots = defineSlots();
 const props = useComponentProps("alert", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.alert || {} })({
   color: props.color,
   variant: props.variant,
   orientation: props.orientation,

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

@@ -1,7 +1,10 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/alert';
-import type { AvatarProps, ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Alert = ComponentConfig<typeof theme, AppConfig, 'alert'>;
 export interface AlertProps {

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

@@ -1,8 +1,8 @@
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui';
 import type { VNode } from 'vue';
-import type { ToasterProps } from '../types';
+import type { ToasterProps } from './Toaster.vue';
 import type { Locale, Messages } from '../types/locale';
-export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'locale'> {
+export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'locale' | 'teleportTo'> {
     tooltip?: TooltipProviderProps;
     toaster?: ToasterProps | null;
     locale?: Locale<T>;
@@ -22,7 +22,7 @@ declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaite
     slots: AppSlots;
     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/App.vue.d.ts

@@ -1,8 +1,8 @@
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui';
 import type { VNode } from 'vue';
-import type { ToasterProps } from '../types';
+import type { ToasterProps } from './Toaster.vue';
 import type { Locale, Messages } from '../types/locale';
-export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'locale'> {
+export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'locale' | 'teleportTo'> {
     tooltip?: TooltipProviderProps;
     toaster?: ToasterProps | null;
     locale?: Locale<T>;
@@ -22,7 +22,7 @@ declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaite
     slots: AppSlots;
     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/AuthForm.d.vue.ts

@@ -1,8 +1,17 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/auth-form';
-import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, InputProps, CheckboxProps, SelectMenuProps, PinInputProps, IconProps, LinkPropsKeys } from '../types';
-import type { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
+import type { ButtonProps } from './Button.vue';
+import type { FormProps } from './Form.vue';
+import type { FormFieldProps } from './FormField.vue';
+import type { SeparatorProps } from './Separator.vue';
+import type { InputProps } from './Input.vue';
+import type { CheckboxProps } from './Checkbox.vue';
+import type { SelectMenuProps } from './SelectMenu.vue';
+import type { PinInputProps } from './PinInput.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
+import type { FormData, FormSchema, FormSubmitEvent, InferInput } from '../types/form';
 import type { FormHTMLAttributes } from '../types/html';
 import type { NonUnion } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -98,7 +107,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<AuthFormProps<T, F> & {
-        onSubmit?: ((payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => any) | undefined;
+        onSubmit?: ((payload: FormSubmitEvent<import("../types").InferOutput<T>>) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -110,13 +119,13 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     silent?: false | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
-                }): Promise<import("../types").FormData<T, T_1>>;
+                }): Promise<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>>;
+                }): Promise<false | FormData<T, T_1>>;
             };
             errors: {
                 id?: string | undefined;
@@ -144,13 +153,13 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     silent?: false | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
-                }): Promise<import("../types").FormData<T, T_1>>;
+                }): Promise<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>>;
+                }): Promise<false | FormData<T, T_1>>;
             };
             errors: {
                 id?: string | undefined;
@@ -176,9 +185,9 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
     }>) => void;
     attrs: any;
     slots: AuthFormSlots<import("vue").Reactive<InferInput<T>>, F>;
-    emit: (evt: "submit", payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => void;
+    emit: (evt: "submit", payload: FormSubmitEvent<import("../types").InferOutput<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/AuthForm.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/auth-form";
 </script>
 
 <script setup>
-import { reactive, ref, computed, useTemplateRef } from "vue";
+import { reactive, shallowReactive, computed, useTemplateRef } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
@@ -51,10 +51,17 @@ const slots = defineSlots();
 const props = useComponentProps("authForm", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.authForm || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.authForm || {} })());
 const formRef = useTemplateRef("formRef");
-const passwordVisibility = ref(false);
-const passwordRef = useTemplateRef("passwordRef");
+const passwordVisibility = reactive(
+  (_props.fields || []).reduce((acc, field) => {
+    if (field.type === "password" && field.name) {
+      acc[field.name] = false;
+    }
+    return acc;
+  }, {})
+);
+const passwordRefs = shallowReactive({});
 function pickFieldProps(field) {
   const fields = ["name", "errorPattern", "help", "error", "hint", "size", "required", "eagerValidation", "validateOnInputDelay"];
   if (field.type === "checkbox") {
@@ -79,7 +86,7 @@ defineExpose({
 </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] })">
     <div v-if="props.icon || !!slots.leading || (props.title || !!slots.title) || (props.description || !!slots.description) || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
         <div v-if="props.icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
@@ -134,9 +141,9 @@ defineExpose({
         :validate-on="props.validateOn"
         :disabled="props.disabled"
         :loading-auto="props.loadingAuto"
-        data-slot="form"
         :class="ui.form({ class: props.ui?.form })"
         v-bind="$attrs"
+        data-slot="form"
         @submit="props.onSubmit"
       >
         <UFormField
@@ -170,23 +177,25 @@ defineExpose({
             />
             <UInput
               v-else-if="field.type === 'password'"
-              ref="passwordRef"
+              :ref="(el) => {
+  passwordRefs[field.name] = el;
+}"
               v-model="state[field.name]"
               data-slot="password"
               :class="ui.password({ class: props.ui?.password })"
               v-bind="omitFieldProps(field)"
-              :type="passwordVisibility ? 'text' : 'password'"
+              :type="passwordVisibility[field.name] ? 'text' : 'password'"
             >
               <template #trailing>
                 <UButton
                   color="neutral"
                   variant="link"
                   size="sm"
-                  :icon="passwordVisibility ? appConfig.ui.icons.eyeOff : appConfig.ui.icons.eye"
-                  :aria-label="passwordVisibility ? t('authForm.hidePassword') : t('authForm.showPassword')"
-                  :aria-pressed="passwordVisibility"
-                  :aria-controls="passwordRef?.[0]?.inputRef?.id"
-                  @click="passwordVisibility = !passwordVisibility"
+                  :icon="passwordVisibility[field.name] ? appConfig.ui.icons.eyeOff : appConfig.ui.icons.eye"
+                  :aria-label="passwordVisibility[field.name] ? t('authForm.hidePassword') : t('authForm.showPassword')"
+                  :aria-pressed="!!passwordVisibility[field.name]"
+                  :aria-controls="passwordRefs[field.name]?.inputRef?.id"
+                  @click="passwordVisibility[field.name] = !passwordVisibility[field.name]"
                 />
               </template>
             </UInput>

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

@@ -1,8 +1,17 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/auth-form';
-import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, InputProps, CheckboxProps, SelectMenuProps, PinInputProps, IconProps, LinkPropsKeys } from '../types';
-import type { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
+import type { ButtonProps } from './Button.vue';
+import type { FormProps } from './Form.vue';
+import type { FormFieldProps } from './FormField.vue';
+import type { SeparatorProps } from './Separator.vue';
+import type { InputProps } from './Input.vue';
+import type { CheckboxProps } from './Checkbox.vue';
+import type { SelectMenuProps } from './SelectMenu.vue';
+import type { PinInputProps } from './PinInput.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
+import type { FormData, FormSchema, FormSubmitEvent, InferInput } from '../types/form';
 import type { FormHTMLAttributes } from '../types/html';
 import type { NonUnion } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -98,7 +107,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<AuthFormProps<T, F> & {
-        onSubmit?: ((payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => any) | undefined;
+        onSubmit?: ((payload: FormSubmitEvent<import("../types").InferOutput<T>>) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -110,13 +119,13 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     silent?: false | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
-                }): Promise<import("../types").FormData<T, T_1>>;
+                }): Promise<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>>;
+                }): Promise<false | FormData<T, T_1>>;
             };
             errors: {
                 id?: string | undefined;
@@ -144,13 +153,13 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     silent?: false | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
-                }): Promise<import("../types").FormData<T, T_1>>;
+                }): Promise<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>>;
+                }): Promise<false | FormData<T, T_1>>;
             };
             errors: {
                 id?: string | undefined;
@@ -176,9 +185,9 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
     }>) => void;
     attrs: any;
     slots: AuthFormSlots<import("vue").Reactive<InferInput<T>>, F>;
-    emit: (evt: "submit", payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => void;
+    emit: (evt: "submit", payload: FormSubmitEvent<import("../types").InferOutput<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/Avatar.d.vue.ts

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/avatar';
-import type { ChipProps, IconProps } from '../types';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
 import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>;

package/dist/runtime/components/Avatar.vue

@@ -37,7 +37,7 @@ const as = computed(() => {
 const fallback = computed(() => props.text || (props.alt || "").split(" ").map((word) => word.charAt(0)).join("").substring(0, 2));
 const appConfig = useAppConfig();
 const { size, color } = useAvatarGroup(_props);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.avatar || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.avatar || {} })({
   size: size.value ?? props.size,
   color: color.value ?? props.color
 }));
@@ -66,7 +66,7 @@ function onError() {
     :is="props.chip ? UChip : Primitive"
     :as="as.root"
     v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
-    data-slot="root"
+    :data-slot="$attrs['data-slot'] ?? 'root'"
     :class="rootClass"
     :style="props.style"
   >
@@ -83,7 +83,7 @@ function onError() {
       @error="onError"
     />
 
-    <Slot v-else v-bind="$attrs">
+    <Slot v-else v-bind="{ ...$attrs, 'data-slot': void 0 }">
       <slot>
         <UIcon v-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
         <span v-else data-slot="fallback" :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || "\xA0" }}</span>

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/avatar';
-import type { ChipProps, IconProps } from '../types';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
 import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>;

package/dist/runtime/components/AvatarGroup.vue

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

package/dist/runtime/components/Badge.vue

@@ -33,7 +33,7 @@ const props = useComponentProps("badge", _props);
 const appConfig = useAppConfig();
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.badge || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.badge || {} })({
   color: props.color,
   variant: props.variant,
   size: fieldGroupSize.value ?? props.size,

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/banner';
-import type { ButtonProps, IconProps, LinkProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps, LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Banner = ComponentConfig<typeof theme, AppConfig, 'banner'>;
 export interface BannerProps {