@nuxt/ui 4.9.0 → 4.10.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.9.0",
+  "version": "4.10.0",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 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, b as getDefaultConfig, g as getClientBundleIcons, e as publicComposables, a as addTemplates } from './shared/ui.XkBrgXFP.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -11,7 +11,7 @@ import 'pathe';
 import 'tinyglobby';
 
 const name = "@nuxt/ui";
-const version = "4.9.0";
+const version = "4.10.0";
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -98,6 +98,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,7 +1,16 @@
 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 { 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 { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
 import type { FormHTMLAttributes } from '../types/html';
 import type { NonUnion } from '../types/utils';
@@ -178,7 +187,7 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
     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>;
+    __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,7 +1,16 @@
 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 { 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 { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
 import type { FormHTMLAttributes } from '../types/html';
 import type { NonUnion } from '../types/utils';
@@ -178,7 +187,7 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
     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>;
+    __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 {

package/dist/runtime/components/Banner.vue

@@ -35,7 +35,7 @@ const props = useComponentProps("banner", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const prefix = usePrefix();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.banner || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.banner || {} })({
   color: props.color,
   to: !!props.to
 }));
@@ -90,15 +90,16 @@ function onClose() {
   <Primitive
     v-show="isVisible"
     :as="props.as"
+    v-bind="!props.to ? $attrs : {}"
     class="banner"
     :data-banner-id="id"
-    data-slot="root"
+    :data-slot="$attrs['data-slot'] ?? 'root'"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <ULink
       v-if="props.to"
       :aria-label="props.title"
-      v-bind="{ to: props.to, target: props.target, ...$attrs }"
+      v-bind="{ 'to': props.to, 'target': props.target, ...$attrs, 'data-slot': void 0 }"
       :class="prefix('focus:outline-none')"
       raw
     >

package/dist/runtime/components/Banner.vue.d.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 {

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/blog-post';
-import type { BadgeProps, LinkProps, UserProps } from '../types';
+import type { BadgeProps } from './Badge.vue';
+import type { LinkProps } from './Link.vue';
+import type { UserProps } from './User.vue';
 import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type BlogPost = ComponentConfig<typeof theme, AppConfig, 'blogPost'>;
@@ -38,7 +40,7 @@ export interface BlogPostProps {
     variant?: BlogPost['variants']['variant'];
     to?: LinkProps['to'];
     target?: LinkProps['target'];
-    onClick?: (event: MouseEvent) => void | Promise<void>;
+    onClick?: (event: MouseEvent) => void;
     class?: any;
     ui?: BlogPost['slots'];
 }
@@ -59,8 +61,8 @@ export interface BlogPostSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BlogPostProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlogPostProps> & Readonly<{}>, {
-    as: any;
     orientation: BlogPost["variants"]["orientation"];
+    as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlogPostSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/BlogPost.vue

@@ -40,7 +40,7 @@ const { locale } = useLocale();
 const appConfig = useAppConfig();
 const formatter = useDateFormatter(locale.value.code);
 const prefix = usePrefix();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.blogPost || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.blogPost || {} })({
   orientation: props.orientation,
   variant: props.variant,
   image: !!props.image,
@@ -51,7 +51,7 @@ const date = computed(() => {
     return;
   }
   try {
-    return formatter.custom(new Date(props.date), { dateStyle: "medium" });
+    return formatter.custom(new Date(props.date), { dateStyle: "medium", timeZone: "UTC" });
   } catch {
     return props.date;
   }
@@ -73,11 +73,18 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
+  <Primitive
+    :as="props.as"
+    v-bind="!props.to ? $attrs : {}"
+    :data-orientation="props.orientation"
+    :data-slot="$attrs['data-slot'] ?? 'root'"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    @click="props.onClick"
+  >
     <ULink
       v-if="props.to"
       :aria-label="ariaLabel"
-      v-bind="{ to: props.to, target: props.target, ...$attrs }"
+      v-bind="{ 'to': props.to, 'target': props.target, ...$attrs, 'data-slot': void 0 }"
       :class="prefix('focus:outline-none absolute inset-0')"
       raw
     />

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/blog-post';
-import type { BadgeProps, LinkProps, UserProps } from '../types';
+import type { BadgeProps } from './Badge.vue';
+import type { LinkProps } from './Link.vue';
+import type { UserProps } from './User.vue';
 import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type BlogPost = ComponentConfig<typeof theme, AppConfig, 'blogPost'>;
@@ -38,7 +40,7 @@ export interface BlogPostProps {
     variant?: BlogPost['variants']['variant'];
     to?: LinkProps['to'];
     target?: LinkProps['target'];
-    onClick?: (event: MouseEvent) => void | Promise<void>;
+    onClick?: (event: MouseEvent) => void;
     class?: any;
     ui?: BlogPost['slots'];
 }
@@ -59,8 +61,8 @@ export interface BlogPostSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BlogPostProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlogPostProps> & Readonly<{}>, {
-    as: any;
     orientation: BlogPost["variants"]["orientation"];
+    as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlogPostSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/blog-posts';
-import type { BlogPostProps, BlogPostSlots } from '../types';
+import type { BlogPostProps, BlogPostSlots } from './BlogPost.vue';
 import type { ComponentConfig } from '../types/tv';
 type BlogPosts = ComponentConfig<typeof theme, AppConfig, 'blogPosts'>;
 export interface BlogPostsProps<T extends BlogPostProps = BlogPostProps> {
@@ -40,7 +40,7 @@ declare const __VLS_export: <T extends BlogPostProps>(__VLS_props: NonNullable<A
     slots: BlogPostsSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/BlogPosts.vue

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

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/blog-posts';
-import type { BlogPostProps, BlogPostSlots } from '../types';
+import type { BlogPostProps, BlogPostSlots } from './BlogPost.vue';
 import type { ComponentConfig } from '../types/tv';
 type BlogPosts = ComponentConfig<typeof theme, AppConfig, 'blogPosts'>;
 export interface BlogPostsProps<T extends BlogPostProps = BlogPostProps> {
@@ -40,7 +40,7 @@ declare const __VLS_export: <T extends BlogPostProps>(__VLS_props: NonNullable<A
     slots: BlogPostsSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/breadcrumb';
-import type { AvatarProps, IconProps, LinkProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Breadcrumb = ComponentConfig<typeof theme, AppConfig, 'breadcrumb'>;
@@ -83,7 +85,7 @@ declare const __VLS_export: <T extends BreadcrumbItem>(__VLS_props: NonNullable<
     slots: BreadcrumbSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Breadcrumb.vue

@@ -29,7 +29,7 @@ const props = useComponentProps("breadcrumb", _props);
 const { dir } = useLocale();
 const appConfig = useAppConfig();
 const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.breadcrumb || {} })({
   color: props.color
 }));
 </script>

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/breadcrumb';
-import type { AvatarProps, IconProps, LinkProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Breadcrumb = ComponentConfig<typeof theme, AppConfig, 'breadcrumb'>;
@@ -83,7 +85,7 @@ declare const __VLS_export: <T extends BreadcrumbItem>(__VLS_props: NonNullable<
     slots: BreadcrumbSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];