@nuxt/ui 3.0.0-alpha.8 → 3.0.0-beta.1

package/dist/module.mjs

@@ -1,128 +1,10 @@
-import defu, { defu as defu$1 } from 'defu';
-import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, extendPages, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates, c as buildTemplates } from './shared/ui.BufKhDiD.mjs';
-import { addCustomTab } from '@nuxt/devtools-kit';
-import sirv from 'sirv';
-import 'get-port-please';
-import { kebabCase, camelCase } from 'scule';
-import fs from 'node:fs';
+import { defu } from 'defu';
+import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.DSPu6Y8j.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
-
-const devtoolsComponentMeta = {};
-function extractDevtoolsMeta(code) {
-  const match = code.match(/extendDevtoolsMeta(?:<.*?>)?\(/);
-  if (!match)
-    return null;
-  const startIndex = code.indexOf(match[0]) + match[0].length;
-  let openBraceCount = 0;
-  let closeBraceCount = 0;
-  let endIndex = startIndex;
-  for (let i = startIndex; i < code.length; i++) {
-    if (code[i] === "{")
-      openBraceCount++;
-    if (code[i] === "}")
-      closeBraceCount++;
-    if (openBraceCount > 0 && openBraceCount === closeBraceCount) {
-      endIndex = i + 1;
-      break;
-    }
-  }
-  return code.slice(startIndex, endIndex).trim();
-}
-function devtoolsMetaPlugin({ resolve, options, templates }) {
-  return {
-    name: "ui-devtools-component-meta",
-    enforce: "pre",
-    async transform(code, id) {
-      if (!id.match(/\/runtime\/components\/\w+.vue/))
-        return;
-      const fileName = id.split("/")[id.split("/").length - 1];
-      if (code && fileName) {
-        const slug = kebabCase(fileName.replace(/\..*/, ""));
-        const match = extractDevtoolsMeta(code);
-        if (match) {
-          const metaObject = new Function(`return ${match}`)();
-          devtoolsComponentMeta[slug] = { meta: { devtools: { ...metaObject } } };
-        }
-      }
-      return {
-        code
-      };
-    },
-    configureServer(server) {
-      server.middlewares.use("/__nuxt_ui__/devtools/api/component-meta", async (_req, res) => {
-        res.setHeader("Content-Type", "application/json");
-        try {
-          const componentMeta = await import('./chunks/component-meta.mjs');
-          const meta = defu(
-            Object.entries(componentMeta.default).reduce((acc, [key, value]) => {
-              if (!key.startsWith("U"))
-                return acc;
-              const name = key.substring(1);
-              const slug = kebabCase(name);
-              const template = templates?.[camelCase(name)];
-              if (devtoolsComponentMeta[slug] === void 0) {
-                const path = resolve(`./runtime/components/${name}.vue`);
-                const code = fs.readFileSync(path, "utf-8");
-                const match = extractDevtoolsMeta(code);
-                if (match) {
-                  const metaObject = new Function(`return ${match}`)();
-                  devtoolsComponentMeta[slug] = { meta: { devtools: { ...metaObject } } };
-                } else {
-                  devtoolsComponentMeta[slug] = null;
-                }
-              }
-              value.meta.props = value.meta.props.map((prop) => {
-                let defaultValue = prop.default ? prop.default : prop?.tags?.find((tag) => tag.name === "defaultValue" && !tag.text?.includes("appConfig"))?.text ?? template?.defaultVariants?.[prop.name];
-                if (typeof defaultValue === "string")
-                  defaultValue = defaultValue?.replaceAll(/["'`]/g, "");
-                if (defaultValue === "true")
-                  defaultValue = true;
-                if (defaultValue === "false")
-                  defaultValue = false;
-                if (!Number.isNaN(Number.parseInt(defaultValue)))
-                  defaultValue = Number.parseInt(defaultValue);
-                return {
-                  ...prop,
-                  default: defaultValue
-                };
-              });
-              const label = key.replace(/^U/, options.prefix ?? "U");
-              acc[kebabCase(key.replace(/^U/, ""))] = { ...value, label, slug };
-              return acc;
-            }, {}),
-            devtoolsComponentMeta
-          );
-          res.end(JSON.stringify(meta));
-        } catch (error) {
-          console.error(`Failed to fetch component meta`, error);
-          res.statusCode = 500;
-          res.end(JSON.stringify({ error: "Failed to fetch component meta" }));
-        }
-      });
-      server.middlewares.use("/__nuxt_ui__/devtools/api/component-example", async (req, res) => {
-        const query = new URL(req.url, "http://localhost").searchParams;
-        const name = query.get("component");
-        if (!name) {
-          res.statusCode = 400;
-          res.end(JSON.stringify({ error: "Component name is required" }));
-          return;
-        }
-        try {
-          const path = resolve(`./devtools/runtime/examples/${name}.vue`);
-          const source = fs.readFileSync(path, "utf-8");
-          res.setHeader("Content-Type", "application/json");
-          res.end(JSON.stringify({ component: name, source }));
-        } catch (error) {
-          console.error(`Failed to read component source for ${name}:`, error);
-          res.statusCode = 500;
-          res.end(JSON.stringify({ error: "Failed to read component source" }));
-        }
-      });
-    }
-  };
-}
+import 'scule';
+import 'tailwindcss/colors';
 
 const module = defineNuxtModule({
   meta: {
@@ -131,7 +13,7 @@ const module = defineNuxtModule({
     compatibility: {
       nuxt: ">=3.13.1"
     },
-    docs: "https://ui3.nuxt.dev/getting-started/installation"
+    docs: "https://ui3.nuxt.dev/getting-started/installation/nuxt"
   },
   defaults: defaultOptions,
   async setup(options, nuxt) {
@@ -140,7 +22,7 @@ const module = defineNuxtModule({
     options.theme.colors = resolveColors(options.theme.colors);
     nuxt.options.ui = options;
     nuxt.options.alias["#ui"] = resolve("./runtime");
-    nuxt.options.appConfig.ui = defu$1(nuxt.options.appConfig.ui || {}, getDefaultUiConfig(options.theme.colors));
+    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultUiConfig(options.theme.colors));
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
     nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, "isolate"].filter(Boolean).join(" ");
     if (nuxt.options.builder === "@nuxt/vite-builder") {
@@ -149,23 +31,21 @@ const module = defineNuxtModule({
     } else {
       nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
-    async function registerModule(name, options2) {
+    async function registerModule(name, key, options2) {
       if (!hasNuxtModule(name)) {
         await installModule(name, options2);
       } else {
-        nuxt.options[name] = defu$1(nuxt.options[name], options2);
+        nuxt.options[key] = defu(nuxt.options[key], options2);
       }
     }
-    await registerModule("@nuxt/icon", { cssLayer: "components" });
+    await registerModule("@nuxt/icon", "icon", { cssLayer: "components" });
     if (options.fonts) {
-      await registerModule("@nuxt/fonts", { experimental: { processCSSVariables: true } });
+      await registerModule("@nuxt/fonts", "fonts", { experimental: { processCSSVariables: true } });
     }
     if (options.colorMode) {
-      await registerModule("@nuxtjs/color-mode", { classSuffix: "", disableTransition: true });
+      await registerModule("@nuxtjs/color-mode", "colorMode", { classSuffix: "", disableTransition: true });
     }
     addPlugin({ src: resolve("./runtime/plugins/colors") });
-    addPlugin({ src: resolve("./runtime/plugins/modal") });
-    addPlugin({ src: resolve("./runtime/plugins/slideover") });
     addComponentsDir({
       path: resolve("./runtime/components"),
       prefix: options.prefix,
@@ -173,41 +53,6 @@ const module = defineNuxtModule({
     });
     addImportsDir(resolve("./runtime/composables"));
     addTemplates(options, nuxt, resolve);
-    nuxt.options.vite = defu$1(nuxt.options?.vite, { optimizeDeps: { include: ["fast-deep-equal"] } });
-    if (nuxt.options.dev && nuxt.options.devtools.enabled && options.devtools?.enabled) {
-      const templates = buildTemplates(options);
-      nuxt.options.vite = defu$1(nuxt.options?.vite, { plugins: [devtoolsMetaPlugin({ resolve, templates, options })] });
-      {
-        nuxt.hook("vite:serverCreated", async (server) => {
-          server.middlewares.use("/__nuxt_ui__/devtools", sirv(resolve("../dist/client/devtools"), {
-            single: true,
-            dev: true
-          }));
-        });
-      }
-      nuxt.options.routeRules = defu$1(nuxt.options.routeRules, { "/__nuxt_ui__/**": { ssr: false } });
-      extendPages((pages) => {
-        pages.unshift({
-          name: "ui-devtools",
-          path: "/__nuxt_ui__/components/:slug",
-          file: resolve("./devtools/runtime/DevtoolsRenderer.vue"),
-          meta: {
-            // https://github.com/nuxt/nuxt/pull/29366
-            //   isolate: true
-            layout: false
-          }
-        });
-      });
-      addCustomTab({
-        name: "nuxt-ui",
-        title: "Nuxt UI",
-        icon: "/__nuxt_ui__/devtools/favicon.svg",
-        view: {
-          type: "iframe",
-          src: "/__nuxt_ui__/devtools"
-        }
-      });
-    }
   }
 });
 

package/dist/runtime/components/Accordion.vue

@@ -1,15 +1,14 @@
 <script lang="ts">
-import { tv } from 'tailwind-variants'
-import type { AccordionRootProps, AccordionRootEmits } from 'radix-vue'
+import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/accordion'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { DynamicSlots } from '../types/utils'
 
-const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
+const appConfigAccordion = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
 
-const accordion = tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })
+const accordion = tv({ extend: tv(theme), ...(appConfigAccordion.ui?.accordion || {}) })
 
 export interface AccordionItem {
   label?: string
@@ -22,7 +21,7 @@ export interface AccordionItem {
   disabled?: boolean
 }
 
-export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled'> {
+export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -54,42 +53,11 @@ export type AccordionSlots<T extends { slot?: string }> = {
   content: SlotProps<T>
   body: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  defaultProps: {
-    items: [{
-      label: 'Getting Started',
-      icon: 'i-lucide-info',
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-    }, {
-      label: 'Installation',
-      icon: 'i-lucide-download',
-      disabled: true,
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-    }, {
-      label: 'Theming',
-      icon: 'i-lucide-pipette',
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-    }, {
-      label: 'Layouts',
-      icon: 'i-lucide-layout-dashboard',
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-    }, {
-      label: 'Components',
-      icon: 'i-lucide-layers-3',
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-    }, {
-      label: 'Utilities',
-      icon: 'i-lucide-wrench',
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-    }]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends AccordionItem">
 import { computed } from 'vue'
-import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'radix-vue'
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { get } from '../utils'
@@ -98,13 +66,14 @@ import UIcon from './Icon.vue'
 const props = withDefaults(defineProps<AccordionProps<T>>(), {
   type: 'single',
   collapsible: true,
+  unmountOnHide: true,
   labelKey: 'label'
 })
 const emits = defineEmits<AccordionEmits>()
 const slots = defineSlots<AccordionSlots<T>>()
 
 const appConfig = useAppConfig()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type', 'unmountOnHide'), emits)
 
 const ui = computed(() => accordion({
   disabled: props.disabled

package/dist/runtime/components/Alert.vue

@@ -1,14 +1,14 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/alert'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps } from '../types'
 
-const appConfig = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
+const appConfigAlert = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
 
-const alert = tv({ extend: tv(theme), ...(appConfig.ui?.alert || {}) })
+const alert = tv({ extend: tv(theme), ...(appConfigAlert.ui?.alert || {}) })
 
 type AlertVariants = VariantProps<typeof alert>
 
@@ -24,19 +24,21 @@ export interface AlertProps {
   avatar?: AvatarProps
   color?: AlertVariants['color']
   variant?: AlertVariants['variant']
+  orientation?: AlertVariants['orientation']
   /**
    * Display a list of actions:
-   * - under the title and description if multiline
-   * - next to the close button if not multiline
+   * - under the title and description when orientation is `vertical`
+   * - next to the close button when orientation is `horizontal`
+   * `{ size: 'xs' }`{lang="ts-type"}
    */
   actions?: ButtonProps[]
   /**
    * Display a close button to dismiss the alert.
    * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
-   * @emits `close`
+   * @emits 'update:open'
    * @defaultValue false
    */
-  close?: ButtonProps | boolean
+  close?: boolean | Partial<ButtonProps>
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
@@ -57,34 +59,36 @@ export interface AlertSlots {
   actions(props?: {}): any
   close(props: { ui: any }): any
 }
-
-extendDevtoolsMeta<AlertProps>({ defaultProps: { title: 'Heads up!' } })
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UButton from './Button.vue'
 
-const props = defineProps<AlertProps>()
+const props = withDefaults(defineProps<AlertProps>(), {
+  orientation: 'vertical'
+})
 const emits = defineEmits<AlertEmits>()
 const slots = defineSlots<AlertSlots>()
 
+const { t } = useLocale()
 const appConfig = useAppConfig()
 
-const multiline = computed(() => !!props.title && !!props.description)
-
 const ui = computed(() => alert({
   color: props.color,
-  variant: props.variant
+  variant: props.variant,
+  orientation: props.orientation,
+  title: !!props.title || !!slots.title
 }))
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root], multiline })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <slot name="leading">
       <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
@@ -102,15 +106,15 @@ const ui = computed(() => alert({
         </slot>
       </div>
 
-      <div v-if="multiline && actions?.length" :class="ui.actions({ class: props.ui?.actions, multiline: true })">
+      <div v-if="orientation === 'vertical' && actions?.length" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions">
           <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </div>
     </div>
 
-    <div v-if="(!multiline && actions?.length) || close" :class="ui.actions({ class: props.ui?.actions, multiline: false })">
-      <template v-if="!multiline">
+    <div v-if="(orientation === 'horizontal' && actions?.length) || close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+      <template v-if="orientation === 'horizontal' && actions?.length">
         <slot name="actions">
           <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
         </slot>
@@ -123,8 +127,8 @@ const ui = computed(() => alert({
           size="md"
           color="neutral"
           variant="link"
-          aria-label="Close"
-          v-bind="typeof close === 'object' ? close : undefined"
+          :aria-label="t('alert.close')"
+          v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
           :class="ui.close({ class: props.ui?.close })"
           @click="emits('update:open', false)"
         />

package/dist/runtime/components/App.vue

@@ -1,11 +1,12 @@
 <script lang="ts">
-import type { ConfigProviderProps, TooltipProviderProps } from 'radix-vue'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
-import type { ToasterProps } from '../types'
+import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
+import { localeContextInjectionKey } from '../composables/useLocale'
+import type { ToasterProps, Locale } from '../types'
 
-export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
+export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
   tooltip?: TooltipProviderProps
   toaster?: ToasterProps | null
+  locale?: Locale
 }
 
 export interface AppSlots {
@@ -15,36 +16,35 @@ export interface AppSlots {
 export default {
   name: 'App'
 }
-
-extendDevtoolsMeta({ ignore: true })
 </script>
 
 <script setup lang="ts">
-import { toRef, useId } from 'vue'
-import { ConfigProvider, TooltipProvider, useForwardProps } from 'radix-vue'
+import { toRef, useId, provide } from 'vue'
+import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import UToaster from './Toaster.vue'
-import UModalProvider from './ModalProvider.vue'
-import USlideoverProvider from './SlideoverProvider.vue'
+import UOverlayProvider from './OverlayProvider.vue'
 
 const props = defineProps<AppProps>()
 defineSlots<AppSlots>()
 
-const configProviderProps = useForwardProps(reactivePick(props, 'dir', 'scrollBody'))
+const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
 const tooltipProps = toRef(() => props.tooltip)
 const toasterProps = toRef(() => props.toaster)
+
+const locale = toRef(() => props.locale)
+provide(localeContextInjectionKey, locale)
 </script>
 
 <template>
-  <ConfigProvider :use-id="() => (useId() as string)" v-bind="configProviderProps">
+  <ConfigProvider :use-id="() => (useId() as string)" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
     <TooltipProvider v-bind="tooltipProps">
       <UToaster v-if="toaster !== null" v-bind="toasterProps">
         <slot />
       </UToaster>
       <slot v-else />
-    </TooltipProvider>
 
-    <UModalProvider />
-    <USlideoverProvider />
+      <UOverlayProvider />
+    </TooltipProvider>
   </ConfigProvider>
 </template>

package/dist/runtime/components/Avatar.vue

@@ -1,18 +1,17 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { AvatarFallbackProps } from 'radix-vue'
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar'
+import { tv } from '../utils/tv'
 
-const appConfig = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
+const appConfigAvatar = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
 
-const avatar = tv({ extend: tv(theme), ...(appConfig.ui?.avatar || {}) })
+const avatar = tv({ extend: tv(theme), ...(appConfigAvatar.ui?.avatar || {}) })
 
 type AvatarVariants = VariantProps<typeof avatar>
 
-export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
+export interface AvatarProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'span'
@@ -27,23 +26,22 @@ export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
   ui?: Partial<typeof avatar.slots>
 }
 
-extendDevtoolsMeta<AvatarProps>({ defaultProps: { src: 'https://avatars.githubusercontent.com/u/739984?v=4', alt: 'Benjamin Canac' } })
+export interface AvatarSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-vue'
-import { reactivePick } from '@vueuse/core'
+import { ref, computed, watch } from 'vue'
+import { Primitive } from 'reka-ui'
+import ImageComponent from '#build/ui-image-component'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 import UIcon from './Icon.vue'
-import ImageComponent from '#build/ui-image-component'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
 
-const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
-
 const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
 
 const { size } = useAvatarGroup(props)
@@ -64,24 +62,38 @@ const sizePx = computed(() => ({
   '2xl': 44,
   '3xl': 48
 })[props.size || 'md'])
+
+const error = ref(false)
+
+watch(() => props.src, () => {
+  if (error.value) {
+    error.value = false
+  }
+})
+
+function onError() {
+  error.value = true
+}
 </script>
 
 <template>
-  <AvatarRoot :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
-    <AvatarImage
-      v-if="src"
-      :as="ImageComponent"
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <component
+      :is="ImageComponent"
+      v-if="src && !error"
+      role="img"
       :src="src"
       :alt="alt"
       :width="sizePx"
       :height="sizePx"
       v-bind="$attrs"
       :class="ui.image({ class: props.ui?.image })"
+      @error="onError"
     />
 
-    <AvatarFallback as-child v-bind="fallbackProps">
+    <slot v-else>
       <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-      <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback }}</span>
-    </AvatarFallback>
-  </AvatarRoot>
+      <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
+    </slot>
+  </Primitive>
 </template>

package/dist/runtime/components/AvatarGroup.vue

@@ -1,13 +1,13 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar-group'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 
-const appConfig = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
+const appConfigAvatarGroup = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
 
-const avatarGroup = tv({ extend: tv(theme), ...(appConfig.ui?.avatarGroup || {}) })
+const avatarGroup = tv({ extend: tv(theme), ...(appConfigAvatarGroup.ui?.avatarGroup || {}) })
 
 type AvatarGroupVariants = VariantProps<typeof avatarGroup>
 
@@ -29,13 +29,11 @@ export interface AvatarGroupProps {
 export interface AvatarGroupSlots {
   default(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'AvatarGroupExample' })
 </script>
 
 <script setup lang="ts">
 import { computed, provide } from 'vue'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
 import UAvatar from './Avatar.vue'