feat: add Avatar component

apps/www/src/App.vue

@@ -4,6 +4,7 @@ import PopoverDemo from '@/registry/default/examples/PopoverDemo.vue'
 import DialogDemo from '@/registry/default/examples/DialogDemo.vue'
 import AlertDialogDemo from '@/registry/default/examples/AlertDialogDemo.vue'
 import SelectDemo from '@/registry/default/examples/SelectDemo.vue'
+import AvatarDemo from '@/registry/default/examples/AvatarDemo.vue'
 </script>
 
 <template>
@@ -17,5 +18,7 @@ import SelectDemo from '@/registry/default/examples/SelectDemo.vue'
     <AlertDialogDemo />
 
     <SelectDemo />
+
+    <AvatarDemo />
   </div>
 </template>

apps/www/src/lib/registry/default/examples/AvatarDemo.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'
+</script>
+
+<template>
+  <Avatar>
+    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+</template>

apps/www/src/lib/registry/default/ui/avatar/Avatar.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { AvatarRoot as AvatarRootPrimitive, type AvatarRootProps } from 'radix-vue'
+import { computed, useAttrs } from 'vue'
+import { cn } from '@/utils'
+
+defineOptions({
+  name: 'Avatar',
+  inheritAttrs: false,
+})
+
+const props = defineProps<AvatarRootProps>()
+
+const allAttrs = useAttrs()
+const attrs = computed(() => {
+  const { class: className, ...rest } = allAttrs
+  return {
+    className,
+    rest,
+  }
+})
+</script>
+
+<template>
+  <AvatarRootPrimitive
+    :class="cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      attrs.className ?? '',
+    )"
+    v-bind="{ ...attrs.rest, ...props }"
+  >
+    <slot />
+  </AvatarRootPrimitive>
+</template>

apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { AvatarFallback as AvatarFallbackPrimitive, type AvatarFallbackProps } from 'radix-vue'
+import { computed, useAttrs } from 'vue'
+import { cn } from '@/utils'
+
+defineOptions({
+  name: 'AvatarFallback',
+  inheritAttrs: false,
+})
+
+const props = defineProps<AvatarFallbackProps>()
+
+const allAttrs = useAttrs()
+const attrs = computed(() => {
+  const { class: className, ...rest } = allAttrs
+  return {
+    className,
+    rest,
+  }
+})
+</script>
+
+<template>
+  <AvatarFallbackPrimitive
+    :class="cn('aspect-square h-full w-full', attrs.className ?? '')"
+    v-bind="{ ...attrs.rest, ...props }"
+  />
+</template>

apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type AvatarImageEmits, AvatarImage as AvatarImagePrimitive, type AvatarImageProps } from 'radix-vue'
+import { computed, useAttrs } from 'vue'
+import { cn, useEmitAsProps } from '@/utils'
+
+defineOptions({
+  name: 'AvatarImage',
+  inheritAttrs: false,
+})
+const props = defineProps<AvatarImageProps>()
+const emits = defineEmits<AvatarImageEmits>()
+const emitsAsProps = useEmitAsProps(emits)
+
+const allAttrs = useAttrs()
+const attrs = computed(() => {
+  const { class: className, ...rest } = allAttrs
+  return {
+    className,
+    rest,
+  }
+})
+</script>
+
+<template>
+  <AvatarImagePrimitive
+    :class="cn('flex h-full w-full items-center justify-center rounded-full bg-muted', attrs.className ?? '')"
+    v-bind="{ ...props, ...emitsAsProps, ...attrs.rest }"
+  />
+</template>

apps/www/src/lib/registry/default/ui/avatar/index.ts

@@ -0,0 +1,9 @@
+import Avatar from './Avatar.vue'
+import AvatarFallback from './AvatarFallback.vue'
+import AvatarImage from './AvatarImage.vue'
+
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+}