arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(avatar-group): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-17 17:27:34 +02:00
parent 8ae8993db4
commit 9c56917714
5 changed files with 75 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
test/components/AvatarGroup.spec.ts
View File

@@ -12,8 +12,8 @@ const AvatarGroupWrapper = defineComponent({
},
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" />
<UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
<UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
</UAvatarGroup>`
})

28
test/components/__snapshots__/AvatarGroup.spec.ts.snap
View File

@@ -1,77 +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 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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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>
<!--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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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>
<!--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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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 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/25613751?v=4" alt="romhml" 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">r</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>
<!--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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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>
<!--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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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>
<!--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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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>
<!--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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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>
<!--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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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>
<!--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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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>
<!--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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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>
<!--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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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>
<!--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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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>
<!--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/19751938?v=4" alt="noook" 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">n</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/25613751?v=4" alt="romhml" 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">r</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>"
`;