avatar

1'use client';
2 
3import * as React from 'react';
4import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
5 
6import { cn } from '@/registry/lib/utils';
7 
8type Theme = 'gray' | 'accent' | (string & {});
9 
10function Avatar({
11  className,
12  size = 'default',
13  theme = 'gray',
14  ...props
15}: AvatarPrimitive.Root.Props & {
16  size?: 'default' | 'sm' | 'lg';
17  theme?: Theme;
18}) {
19  return (
20    <AvatarPrimitive.Root
21      data-slot="avatar"
22      data-size={size}
23      data-theme={theme !== 'gray' ? theme : undefined}
24      className={cn(
25        'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-line-ui after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
26        className
27      )}
28      {...props}
29    />
30  );
31}
32 
33function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
34  return (
35    <AvatarPrimitive.Image
36      data-slot="avatar-image"
37      className={cn('aspect-square size-full rounded-[inherit] object-cover', className)}
38      {...props}
39    />
40  );
41}
42 
43function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
44  return (
45    <AvatarPrimitive.Fallback
46      data-slot="avatar-fallback"
47      className={cn(
48        'flex size-full items-center justify-center rounded-[inherit] bg-line-subtle text-sm text-ui-label group-data-[size=sm]/avatar:text-xs',
49        className
50      )}
51      {...props}
52    />
53  );
54}
55 
56function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
57  return (
58    <span
59      data-slot="avatar-badge"
60      className={cn(
61        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-fill text-on-fill bg-blend-color select-none',
62        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
63        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
64        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
65        className
66      )}
67      {...props}
68    />
69  );
70}
71 
72export { Avatar, AvatarImage, AvatarFallback, AvatarBadge };
73export { AvatarGroup, AvatarGroupCount } from './avatar-group';