fix tailwind

src/components/ui/avatar/Avatar.vue

@@ -1,16 +1,21 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+import { AvatarRoot } from 'reka-ui'
+import { avatarVariant, type AvatarVariants } from '.'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   class?: HTMLAttributes['class']
-}>()
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
+  size: 'sm',
+  shape: 'circle',
+})
 </script>
 
 <template>
-  <div
-    :class="cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', props.class)"
-  >
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
     <slot />
-  </div>
-</template> 
+  </AvatarRoot>
+</template>

src/components/ui/avatar/AvatarFallback.vue

@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps<AvatarFallbackProps>()
 </script>
 
 <template>
-  <div
-    :class="cn('flex h-full w-full items-center justify-center rounded-full bg-muted', props.class)"
-  >
+  <AvatarFallback v-bind="props">
     <slot />
-  </div>
-</template> 
+  </AvatarFallback>
+</template>

src/components/ui/avatar/AvatarImage.vue

@@ -1,18 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
 
-const props = defineProps<{
-  src?: string
-  alt?: string
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps<AvatarImageProps>()
 </script>
 
 <template>
-  <img
-    :src="src"
-    :alt="alt"
-    :class="cn('aspect-square h-full w-full', props.class)"
-  />
-</template> 
+  <AvatarImage v-bind="props" class="h-full w-full object-cover">
+    <slot />
+  </AvatarImage>
+</template>

src/components/ui/avatar/index.ts

@@ -1,3 +1,24 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
 export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
 export { default as AvatarImage } from './AvatarImage.vue'
-export { default as AvatarFallback } from './AvatarFallback.vue' 
+
+export const avatarVariant = cva(
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+)
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>