Avatar

1"use client";
2 
3import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
4import { cva, type VariantProps } from "class-variance-authority";
5import { Children, cloneElement, isValidElement } from "react";
6import type * as React from "react";
7import { cn } from "@/lib/utils";
8 
9import { User } from "@phosphor-icons/react/dist/ssr";
10export const avatarVariants = cva(
11  "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-ink text-[color:var(--base)]",
12  {
13    defaultVariants: { size: "md", shape: "circle" },
14    variants: {
15      size: {
16        xs: "size-6 text-mini font-medium",
17        sm: "size-7 text-mini font-medium",
18        md: "size-9 text-small font-medium",
19        lg: "size-11 text-small font-medium",
20        xl: "size-14 text-regular font-medium",
21      },
22      shape: {
23        circle: "rounded-full",
24        square: "rounded-[var(--radius-6)]",
25      },
26    },
27  },
28);
29 
30export type AvatarSize = NonNullable<
31  VariantProps<typeof avatarVariants>["size"]
32>;
33type AvatarShape = NonNullable<VariantProps<typeof avatarVariants>["shape"]>;
34export type AvatarBadgePosition = "bottom-start" | "bottom-end";
35export type AvatarBadgeVariant = "solid" | "soft";
36export type AvatarGroupSeparatorSurface = "base" | "layer-1" | "layer-2";
37 
38/** Source of truth for badge and AvatarGroup geometry. */
39const sizePx: Record<AvatarSize, number> = {
40  xs: 24,
41  sm: 28,
42  md: 36,
43  lg: 44,
44  xl: 56,
45};
46 
47const separatorSurfaceClass: Record<AvatarGroupSeparatorSurface, string> = {
48  base: "ring-base",
49  "layer-1": "ring-layer-1",
50  "layer-2": "ring-layer-2",
51};
52 
53export interface AvatarProps
54  extends Omit<React.ComponentProps<typeof AvatarPrimitive.Root>, "size"> {
55  size?: AvatarSize;
56  shape?: AvatarShape;
57  /** Shorthand for monogram fallback. Equivalent to `<AvatarFallback>letter</AvatarFallback>`. */
58  letter?: string;
59  /**
60   * When true and no image or letter is provided, renders a generic person icon
61   * on a subtle neutral fill. When combined with `letter`, uses the placeholder
62   * fill instead of the default dark fill.
63   */
64  placeholder?: boolean;
65  /** Decorative content overlaid at the lower edge of the avatar. */
66  badge?: React.ReactNode;
67  /** Logical corner for the badge. */
68  badgePosition?: AvatarBadgePosition;
69  /** Badge fill treatment. */
70  badgeVariant?: AvatarBadgeVariant;
71}
72 
73export function Avatar({
74  className,
75  size = "md",
76  shape,
77  letter,
78  placeholder,
79  badge,
80  badgePosition = "bottom-end",
81// … truncated