first commit

resources/js/components/ui/avatar/Avatar.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '@/lib/utils';
+
+    let { class: className = '', children, ...rest }: { class?: string; children?: Snippet } = $props();
+</script>
+
+<div
+    class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...rest}
+>
+    {@render children?.()}
+</div>

resources/js/components/ui/avatar/AvatarFallback.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '@/lib/utils';
+
+    let { class: className = '', children, ...rest }: { class?: string; children?: Snippet } = $props();
+</script>
+
+<div
+    class={cn(
+        'flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground',
+        className,
+    )}
+    {...rest}
+>
+    {@render children?.()}
+</div>

resources/js/components/ui/avatar/AvatarImage.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { cn } from '@/lib/utils';
+
+    let { class: className = '', ...rest } = $props();
+</script>
+
+<img class={cn('aspect-square h-full w-full', className)} {...rest} />

resources/js/components/ui/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.svelte';
+export { default as AvatarFallback } from './AvatarFallback.svelte';
+export { default as AvatarImage } from './AvatarImage.svelte';