update avatar

packages/svelte/src/lib/components/DataDisplay/Avatar.stories.svelte

@@ -1,6 +1,8 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { type ComponentProps } from 'svelte';
 	import Avatar from './Avatar.svelte';
+	import AvatarGroups from './AvatarGroup.svelte';
 
 	const { Story } = defineMeta({
 		title: 'Data display/Avatar',
@@ -14,11 +16,11 @@
 				defaultValue: 'DP',
 			},
 			presence: {
-				control: 'select',
+				control: 'radio',
 				options: [undefined, 'online', 'offline'],
 			},
 			ring: {
-				control: 'select',
+				control: 'radio',
 				options: [
 					undefined,
 					'neutral',
@@ -32,20 +34,36 @@
 				],
 			},
 			shape: {
-				control: 'select',
+				control: 'radio',
 				options: ['square', 'circle'],
+				defaultValue: 'circle',
 			},
 			size: {
-				control: 'select',
+				control: 'radio',
 				options: ['xs', 'sm', 'md', 'lg'],
 			},
 		},
 	});
 </script>
 
+{#snippet template(props: Partial<ComponentProps<typeof Avatar>>)}
+	<Avatar {...props} placeholder={props.placeholder || 'PC'} />
+{/snippet}
+
 <Story
 	name="Default"
 	args={{
 		img: 'https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp',
 	}}
+	children={template}
 />
+
+<Story name="Placeholder" args={{ placeholder: 'BP' }} children={template} />
+
+<Story name="Avatar Group">
+	<AvatarGroups>
+		{@render template({ placeholder: 'BP' })}
+		{@render template({ placeholder: 'MS' })}
+		{@render template({ placeholder: 'DM' })}
+	</AvatarGroups>
+</Story>

packages/svelte/src/lib/components/DataDisplay/Avatar.svelte

@@ -1,3 +1,8 @@
+<script lang="ts" module>
+	export type AvatarShape = 'circle' | 'square';
+	export type AvatarPresence = 'offline' | 'online';
+</script>
+
 <script lang="ts">
 	import type { DaisyColor, DaisySize } from '$lib/types';
 	import clsx from 'clsx';
@@ -7,10 +12,10 @@
 	type Props = {
 		img?: string;
 		placeholder: string;
-		presence?: 'online' | 'offline';
-		ring?: Exclude<DaisyColor, 'ghost'>;
-		shape?: 'square' | 'circle';
-		size?: DaisySize | 'md';
+		presence?: AvatarPresence;
+		ring?: DaisyColor;
+		shape?: AvatarShape;
+		size?: DaisySize;
 	} & Omit<SvelteHTMLElements['div'], 'children'>;
 
 	let {
@@ -25,7 +30,13 @@
 	}: Props = $props();
 </script>
 
-<div {...props} class={twMerge('avatar', presence, clsx(className))} class:placeholder>
+<div
+	{...props}
+	class={twMerge('avatar', clsx(className))}
+	class:avatar-online={presence === 'online'}
+	class:avatar-offline={presence === 'offline'}
+	class:avatar-placeholder={placeholder}
+>
 	<div
 		class={twMerge(
 			'rounded-xl',

packages/svelte/src/lib/components/DataDisplay/AvatarGroup.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children?: Snippet;
+	};
+
+	let { children }: Props = $props();
+</script>
+
+<div class="avatar-group -space-x-6">
+	{@render children?.()}
+</div>

packages/svelte/src/lib/components/DataDisplay/index.ts

@@ -1,2 +1,3 @@
 export { default as Accordion } from './Accordion.svelte';
 export { default as Avatar } from './Avatar.svelte';
+export { default as AvatarGroup } from './AvatarGroup.svelte';