Avatar

1'use client';
2 
3import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
4import { type VariantProps, cva } from 'class-variance-authority';
5import * as React from 'react';
6 
7import { Button } from '@/components/ui/button';
8import { cn } from '@/lib/utils';
9 
10type AvatarContextValue = {
11  size?: 'xxs' | 'xs' | 'sm' | 'default' | 'lg' | 'xl';
12  disabled?: boolean;
13};
14 
15const AvatarContext = React.createContext<AvatarContextValue>({});
16 
17const useAvatarContext = () => React.useContext(AvatarContext);
18 
19const avatarVariants = cva(
20  [
21    'relative flex shrink-0 rounded-full shadow-elevation-0 outline-none',
22    'transition-all duration-200',
23  ].join(' '),
24  {
25    variants: {
26      size: {
27        xxs: 'size-5',
28        xs: 'size-6',
29        sm: 'size-7',
30        default: 'size-9',
31        lg: 'size-12',
32        xl: 'size-16',
33      },
34      state: {
35        default: [
36          'bg-fill-onsurface-ui-2',
37          'border border-stroke-active-inverse',
38        ],
39        disabled: [
40          'bg-fill-onsurface-ui-2',
41          'border border-stroke-active-inverse',
42          "before:absolute before:inset-0 before:rounded-full before:content-['']",
43          'before:pointer-events-none before:z-10',
44          'before:overlay-disabled',
45        ],
46      },
47    },
48    compoundVariants: [
49      {
50        size: ['default', 'lg', 'xl'],
51        state: ['default', 'disabled'],
52        class: 'border-2',
53      },
54      {
55        state: 'default',
56        class: [
57          'hover:shadow-elevation-1',
58          "before:absolute before:inset-0 before:rounded-full before:content-['']",
59          'before:pointer-events-none before:z-10',
60          'before:transition-opacity before:duration-200',
61          'before:overlay-hover before:opacity-0',
62          'hover:before:opacity-100',
63          'active:before:overlay-pressed active:before:opacity-100',
64        ].join(' '),
65      },
66      {
67        size: ['xxs', 'xs', 'sm'],
68        state: ['default', 'disabled'],
69        class: 'before:-inset-px',
70      },
71      {
72        size: ['default', 'lg', 'xl'],
73        state: ['default', 'disabled'],
74        class: 'before:-inset-[2px]',
75      },
76    ],
77    defaultVariants: {
78      size: 'default',
79      state: 'default',
80    },
81  },
82);
83 
84const avatarFallbackVariants = cva(
85  'flex size-full items-center justify-center rounded-full text-fg-primary',
86  {
87    variants: {
88      size: {
89        xxs: 'paragraph-small-emphasised',
90        xs: 'paragraph-small-emphasised',
91// … truncated