refactor: ⬆️ Upgrade to Tailwind v4

components/ui/avatar/Avatar.vue

@@ -2,23 +2,17 @@
 import { cn } from "@/lib/utils";
 import { AvatarRoot } from "reka-ui";
 import type { HTMLAttributes } from "vue";
-import { type AvatarVariants, avatarVariant } from ".";
 
-const props = withDefaults(
-    defineProps<{
-        class?: HTMLAttributes["class"];
-        size?: AvatarVariants["size"];
-        shape?: AvatarVariants["shape"];
-    }>(),
-    {
-        size: "sm",
-        shape: "circle",
-    },
-);
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+  <AvatarRoot
+    data-slot="avatar"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
     <slot />
   </AvatarRoot>
 </template>

components/ui/avatar/AvatarFallback.vue

@@ -1,11 +1,25 @@
 <script setup lang="ts">
+import { cn } from "@/lib/utils";
 import { AvatarFallback, type AvatarFallbackProps } from "reka-ui";
+import { type HTMLAttributes, computed } from "vue";
 
-const props = defineProps<AvatarFallbackProps>();
+const props = defineProps<
+    AvatarFallbackProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
 </script>
 
 <template>
-  <AvatarFallback v-bind="props">
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
+    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
+  >
     <slot />
   </AvatarFallback>
 </template>

components/ui/avatar/AvatarImage.vue

@@ -6,7 +6,11 @@ const props = defineProps<AvatarImageProps>();
 </script>
 
 <template>
-  <AvatarImage v-bind="props" class="h-full w-full object-cover">
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="props"
+    class="aspect-square size-full"
+  >
     <slot />
   </AvatarImage>
 </template>

components/ui/avatar/index.ts

@@ -1,24 +1,3 @@
-import { type VariantProps, cva } 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 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>;