Avatar

1// Base UI base avatar — runs on @octanejs/base-ui's Avatar (Root/Image/Fallback), a direct
2// one-to-one mapping with the radix base.
3//
4// `AvatarBadge`, `AvatarGroup` and `AvatarGroupCount` are plain host elements in every base —
5// upstream defines no primitive for them — so they are unchanged from the radix source.
6//
7// Nothing here keys off a primitive-emitted attribute: the `data-[size=…]` variants read the
8// `data-size` this component writes itself, and the primitive emits no state attributes at all
9// (verified by rendering it — Root and Fallback are bare spans). So unlike the overlays and the
10// form controls, there is no dialect to get wrong.
11//
12// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
13// transcribed from upstream's Base UI source.
14import { Avatar as AvatarPrimitive } from '@octanejs/base-ui/avatar';
15 
16import { cn } from '@/lib/utils';
17 
18type Props = { className?: string } & Record<string, unknown>;
19 
20export interface AvatarProps extends Props {
21	size?: 'default' | 'sm' | 'lg';
22}
23 
24export function Avatar({ className, size = 'default', ...props }: AvatarProps) @{
25	<AvatarPrimitive.Root
26		data-slot="avatar"
27		data-size={size}
28		className={cn(
29			'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
30			className,
31		)}
32		{...props}
33	/>
34}
35 
36export function AvatarImage({ className, ...props }: Props) @{
37	<AvatarPrimitive.Image
38		data-slot="avatar-image"
39		className={cn('aspect-square size-full rounded-full object-cover', className)}
40		{...props}
41	/>
42}
43 
44export function AvatarFallback({ className, ...props }: Props) @{
45	<AvatarPrimitive.Fallback
46		data-slot="avatar-fallback"
47		className={cn(
48			'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
49			className,
50		)}
51		{...props}
52	/>
53}
54 
55export function AvatarBadge({ className, ...props }: Props) @{
56	<span
57		data-slot="avatar-badge"
58		className={cn(
59			'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
60			'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
61// … truncated