From def5f7c10bd28fbfea5fb8a3c7314ff8592c5335 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 26 Apr 2024 17:04:49 +0200
Subject: [PATCH] feat(AvatarGroup): new component (#71)

Co-authored-by: Romain Hamel <romain@boilr.io>
---
 playground/pages/avatar.vue                   | 19 ++++-
 playground/pages/chip.vue                     |  2 +-
 src/runtime/components/Avatar.vue             |  5 +-
 src/runtime/components/AvatarGroup.vue        | 70 +++++++++++++++++
 src/runtime/components/Chip.vue               |  9 ++-
 src/runtime/composables/useAvatarGroup.ts     | 12 +++
 src/runtime/types/index.d.ts                  |  1 +
 src/theme/avatar-group.ts                     | 37 +++++++++
 src/theme/index.ts                            |  1 +
 test/components/AvatarGroup.spec.ts           | 38 +++++++++
 test/components/Chip.spec.ts                  |  9 ++-
 test/components/FormField.spec.ts             |  2 +-
 .../__snapshots__/AvatarGroup.spec.ts.snap    | 77 +++++++++++++++++++
 .../__snapshots__/Chip.spec.ts.snap           |  8 ++
 14 files changed, 280 insertions(+), 10 deletions(-)
 create mode 100644 src/runtime/components/AvatarGroup.vue
 create mode 100644 src/runtime/composables/useAvatarGroup.ts
 create mode 100644 src/theme/avatar-group.ts
 create mode 100644 test/components/AvatarGroup.spec.ts
 create mode 100644 test/components/__snapshots__/AvatarGroup.spec.ts.snap

diff --git a/playground/pages/avatar.vue b/playground/pages/avatar.vue
index a35415d9..bfddab0d 100644
--- a/playground/pages/avatar.vue
+++ b/playground/pages/avatar.vue
@@ -5,7 +5,7 @@ const sizes = Object.keys(theme.variants.size)
 </script>
 
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col gap-2 items-center">
     <div class="flex items-center gap-1.5">
       <UAvatar v-for="size in sizes" :key="size" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" :size="(size as any)" />
     </div>
@@ -18,5 +18,22 @@ const sizes = Object.keys(theme.variants.size)
     <div class="flex items-center gap-1.5">
       <UAvatar v-for="size in sizes" :key="size" :text="size" :size="(size as any)" />
     </div>
+
+    <div class="flex items-center gap-1.5">
+      <UAvatarGroup v-for="size in sizes" :key="size" :text="size" :size="(size as any)" :max="2">
+        <UChip inset text="1">
+          <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
+        </UChip>
+        <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
+      </UAvatarGroup>
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UAvatarGroup v-for="size in sizes" :key="size" :text="size" :size="(size as any)" :max="4">
+        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
+      </UAvatarGroup>
+    </div>
   </div>
 </template>
diff --git a/playground/pages/chip.vue b/playground/pages/chip.vue
index 3066da1c..582bb4c6 100644
--- a/playground/pages/chip.vue
+++ b/playground/pages/chip.vue
@@ -31,7 +31,7 @@ const items = [{
 
     <div class="flex items-center gap-2">
       <UChip v-for="size in sizes" :key="size" :size="(size as any)" inset text="1">
-        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" :size="(size as any)" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
       </UChip>
     </div>
   </div>
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index 10060b32..52c8cb2f 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -28,6 +28,7 @@ import { computed } from 'vue'
 import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { UIcon } from '#components'
+import { useAvatarGroup } from '#imports'
 
 const props = defineProps<AvatarProps>()
 
@@ -35,7 +36,9 @@ const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
 
 const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
 
-const ui = computed(() => tv({ extend: avatar, slots: props.ui })({ size: props.size }))
+const { size } = useAvatarGroup(props)
+
+const ui = computed(() => tv({ extend: avatar, slots: props.ui })({ size: size.value }))
 </script>
 
 <template>
diff --git a/src/runtime/components/AvatarGroup.vue b/src/runtime/components/AvatarGroup.vue
new file mode 100644
index 00000000..4cdc5f54
--- /dev/null
+++ b/src/runtime/components/AvatarGroup.vue
@@ -0,0 +1,70 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { PrimitiveProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/avatar-group'
+
+const appConfig = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
+
+const avatarGroup = tv({ extend: tv(theme), ...(appConfig.ui?.avatarGroup || {}) })
+
+type AvatarGroupVariants = VariantProps<typeof avatarGroup>
+
+export interface AvatarGroupProps extends Omit<PrimitiveProps, 'asChild'> {
+  size?: AvatarGroupVariants['size']
+  max?: number | string
+  class?: any
+  ui?: Partial<typeof avatarGroup.slots>
+}
+
+export interface AvatarGroupSlots {
+  default(): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { Primitive } from 'radix-vue'
+import { UAvatar } from '#components'
+
+const props = defineProps<AvatarGroupProps>()
+const slots = defineSlots<AvatarGroupSlots>()
+
+const ui = computed(() => tv({ extend: avatarGroup, slots: props.ui })({
+  size: props.size
+}))
+
+const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
+
+const visibleAvatars = computed(() => {
+  const children = slots.default?.()
+  if (!children?.length) {
+    return []
+  }
+
+  if (!max.value || max.value <= 0) {
+    return children.reverse()
+  }
+
+  return children.slice(0, max.value).reverse()
+})
+
+const hiddenCount = computed(() => {
+  const children = slots.default?.()
+  if (!children?.length) {
+    return 0
+  }
+
+  return children?.length - visibleAvatars.value.length
+})
+
+provide('avatar-size', computed(() => props.size))
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: props.class })">
+    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base()" />
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base()" />
+  </Primitive>
+</template>
diff --git a/src/runtime/components/Chip.vue b/src/runtime/components/Chip.vue
index 15ace825..3e13998e 100644
--- a/src/runtime/components/Chip.vue
+++ b/src/runtime/components/Chip.vue
@@ -28,19 +28,24 @@ export interface ChipSlots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, provide } from 'vue'
 import { Primitive } from 'radix-vue'
+import { useAvatarGroup } from '#imports'
 
 const show = defineModel<boolean>('show', { default: true })
 const props = withDefaults(defineProps<ChipProps>(), { as: 'div' })
 defineSlots<ChipSlots>()
 
+const { size } = useAvatarGroup(props)
+
 const ui = computed(() => tv({ extend: chip, slots: props.ui })({
   color: props.color,
-  size: props.size,
+  size: size.value,
   position: props.position,
   inset: props.inset
 }))
+
+provide('avatar-size', size)
 </script>
 
 <template>
diff --git a/src/runtime/composables/useAvatarGroup.ts b/src/runtime/composables/useAvatarGroup.ts
new file mode 100644
index 00000000..98c8b2fe
--- /dev/null
+++ b/src/runtime/composables/useAvatarGroup.ts
@@ -0,0 +1,12 @@
+import { inject, provide, computed, type ComputedRef } from 'vue'
+import type { AvatarGroupProps } from '#ui/types'
+
+export function useAvatarGroup(props: { size: AvatarGroupProps['size'] }) {
+  const injectedSize = inject<ComputedRef<AvatarGroupProps['size']> | undefined>('avatar-size', undefined)
+  const size = computed(() => props.size ?? injectedSize?.value)
+  provide('avatar-size', size)
+
+  return {
+    size
+  }
+}
diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts
index 3d9e9906..dc82b5b7 100644
--- a/src/runtime/types/index.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -2,6 +2,7 @@ export * from '../components/Accordion.vue'
 export * from '../components/Alert.vue'
 export * from '../components/App.vue'
 export * from '../components/Avatar.vue'
+export * from '../components/AvatarGroup.vue'
 export * from '../components/Badge.vue'
 export * from '../components/Breadcrumb.vue'
 export * from '../components/Button.vue'
diff --git a/src/theme/avatar-group.ts b/src/theme/avatar-group.ts
new file mode 100644
index 00000000..0d12c823
--- /dev/null
+++ b/src/theme/avatar-group.ts
@@ -0,0 +1,37 @@
+export default {
+  slots: {
+    root: 'inline-flex flex-row-reverse justify-end',
+    base: 'relative rounded-full ring-white dark:ring-gray-900 first:me-0'
+  },
+  variants: {
+    size: {
+      '3xs': {
+        base: 'ring-1 -me-0.5'
+      },
+      '2xs': {
+        base: 'ring-1 -me-0.5'
+      },
+      'xs': {
+        base: 'ring-1 -me-0.5'
+      },
+      'sm': {
+        base: 'ring-2 -me-1.5'
+      },
+      'md': {
+        base: 'ring-2 -me-1.5'
+      },
+      'lg': {
+        base: 'ring-2 -me-1.5'
+      },
+      'xl': {
+        base: 'ring-2.5 -me-2'
+      },
+      '2xl': {
+        base: 'ring-2.5 -me-2'
+      },
+      '3xl': {
+        base: 'ring-2.5 -me-2'
+      }
+    }
+  }
+}
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 066a256e..faed311f 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,6 +1,7 @@
 export { default as accordion } from './accordion'
 export { default as alert } from './alert'
 export { default as avatar } from './avatar'
+export { default as avatarGroup } from './avatar-group'
 export { default as badge } from './badge'
 export { default as breadcrumb } from './breadcrumb'
 export { default as button } from './button'
diff --git a/test/components/AvatarGroup.spec.ts b/test/components/AvatarGroup.spec.ts
new file mode 100644
index 00000000..67ae660b
--- /dev/null
+++ b/test/components/AvatarGroup.spec.ts
@@ -0,0 +1,38 @@
+import { defineComponent } from 'vue'
+import { describe, it, expect } from 'vitest'
+import Avatar from '../../src/runtime/components/Avatar.vue'
+import AvatarGroup, { type AvatarGroupProps, type AvatarGroupSlots } from '../../src/runtime/components/AvatarGroup.vue'
+import ComponentRender from '../component-render'
+import theme from '#build/ui/avatar-group'
+
+const AvatarGroupWrapper = defineComponent({
+  components: {
+    UAvatar: Avatar,
+    UAvatarGroup: AvatarGroup
+  },
+  template: `
+    <UAvatarGroup>
+      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
+      <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
+      <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
+    </UAvatarGroup>
+  `
+})
+
+describe('AvatarGroup', () => {
+  const sizes = Object.keys(theme.variants.size) as any
+
+  it.each([
+    // Props
+    ['with as', { props: { as: 'span' } }],
+    ['with max', { props: { max: 2 } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
+    ['with class', { props: { class: 'justify-start' } }],
+    ['with ui', { props: { ui: { base: 'rounded-lg' } } }],
+    // Slots
+    ['with default slot', {}]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: AvatarGroupProps, slots?: Partial<AvatarGroupSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, AvatarGroupWrapper)
+    expect(html).toMatchSnapshot()
+  })
+})
diff --git a/test/components/Chip.spec.ts b/test/components/Chip.spec.ts
index 4cfa6712..3b6a7baf 100644
--- a/test/components/Chip.spec.ts
+++ b/test/components/Chip.spec.ts
@@ -11,11 +11,12 @@ describe('Chip', () => {
   it.each([
     // Props
     ['with as', { props: { as: 'span' } }],
-    ['with show', { props: { show: true } }],
+    ['with text', { props: { text: 'Text' } }],
     ['with inset', { props: { inset: true } }],
-    ...sizes.map((size: string) => [`with size ${size}`, { props: { show: true, size } }]),
-    ...colors.map((color: string) => [`with color ${color}`, { props: { show: true, color } }]),
-    ...positions.map((position: string) => [`with position ${position}`, { props: { show: true, position } }]),
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
+    ...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
+    ...positions.map((position: string) => [`with position ${position}`, { props: { position } }]),
+    ['without show', { props: { show: false } }],
     ['with class', { props: { class: 'mx-auto' } }],
     ['with ui', { props: { ui: { base: 'text-gray-500 dark:text-gray-400' } } }],
     // Slots
diff --git a/test/components/FormField.spec.ts b/test/components/FormField.spec.ts
index bd580aaa..0cc9cfdd 100644
--- a/test/components/FormField.spec.ts
+++ b/test/components/FormField.spec.ts
@@ -10,7 +10,7 @@ const FormFieldWrapper = defineComponent({
   components: {
     UFormField: FormField
   },
-  template: '<UFormField v-bind="$attrs"> <slot /> </UFormField>'
+  template: '<UFormField > <slot /> </UFormField>'
 })
 
 describe('FormField', () => {
diff --git a/test/components/__snapshots__/AvatarGroup.spec.ts.snap b/test/components/__snapshots__/AvatarGroup.spec.ts.snap
new file mode 100644
index 00000000..650c50ce
--- /dev/null
+++ b/test/components/__snapshots__/AvatarGroup.spec.ts.snap
@@ -0,0 +1,77 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AvatarGroup > renders with as correctly 1`] = `"<span class="inline-flex flex-row-reverse justify-end"><!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span></span>"`;
+
+exports[`AvatarGroup > renders with class correctly 1`] = `
+"<div class="inline-flex flex-row-reverse justify-start">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+</div>"
+`;
+
+exports[`AvatarGroup > renders with default slot correctly 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+</div>"
+`;
+
+exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-flex flex-row-reverse justify-end"><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span></div>"`;
+
+exports[`AvatarGroup > renders with size 2xl correctly 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+</div>"
+`;
+
+exports[`AvatarGroup > renders with size 2xs correctly 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+</div>"
+`;
+
+exports[`AvatarGroup > renders with size 3xl correctly 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+</div>"
+`;
+
+exports[`AvatarGroup > renders with size 3xs correctly 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+</div>"
+`;
+
+exports[`AvatarGroup > renders with size lg correctly 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+</div>"
+`;
+
+exports[`AvatarGroup > renders with size md correctly 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+</div>"
+`;
+
+exports[`AvatarGroup > renders with size sm correctly 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+</div>"
+`;
+
+exports[`AvatarGroup > renders with size xl correctly 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+</div>"
+`;
+
+exports[`AvatarGroup > renders with size xs correctly 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+</div>"
+`;
+
+exports[`AvatarGroup > renders with ui correctly 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+</div>"
+`;
diff --git a/test/components/__snapshots__/Chip.spec.ts.snap b/test/components/__snapshots__/Chip.spec.ts.snap
index 138d5786..1d4c277d 100644
--- a/test/components/__snapshots__/Chip.spec.ts.snap
+++ b/test/components/__snapshots__/Chip.spec.ts.snap
@@ -50,4 +50,12 @@ exports[`Chip > renders with size xl correctly 1`] = `"<div class="relative inli
 
 exports[`Chip > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[6px] min-w-[6px] text-[6px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
+exports[`Chip > renders with text correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform">Text</span></div>"`;
+
 exports[`Chip > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center font-medium whitespace-nowrap text-gray-500 dark:text-gray-400 bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders without show correctly 1`] = `
+"<div class="relative inline-flex items-center justify-center shrink-0">
+  <!--v-if-->
+</div>"
+`;