feat: Added stacked avatars

src/components/Avatar/StackedAvatars.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex -space-x-4">
+    <slot name="default" />
+  </div>
+</template>

src/components/Avatar/StackedAvatarsCounter.vue

@@ -0,0 +1,15 @@
+<template>
+  <a class="relative flex justify-center items-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full border-2 border-white hover:bg-gray-600 dark:border-gray-800" :href="href">+{{ total }}</a>
+</template>
+<script setup>
+defineProps({
+  total: {
+    type: Number,
+    default: 1,
+  },
+  href: {
+    type: String,
+    default: '#',
+  },
+})
+</script>

src/components/Avatar/composables/useAvatarClasses.ts

@@ -56,6 +56,7 @@ export function useAvatarClasses(props: UseAvatarClassesProps): {
             avatarSizeClasses[props.size.value],
             avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
             props.bordered.value ? avatarBorderedClasses : '',
+            props.stacked.value ? 'border-2 border-white dark:border-gray-800' : '',
         )
     })
     const avatarDotClasses = computed<string>(() => {
@@ -67,7 +68,6 @@ export function useAvatarClasses(props: UseAvatarClassesProps): {
         )
     })
     // TODO: Placeholder
-    // TODO: Stacked avatars
     // TODO: Avatar Initials
 
     return {