Aurora Avatar

1"use client"
2 
3import * as React from "react"
4import * as AvatarPrimitive from "@radix-ui/react-avatar"
5import { cn } from "@/lib/utils"
6 
7// ─── Size map ─────────────────────────────────────────────────────────────────
8 
9const sizeMap = {
10  sm: { wh: 24, text: 9, statusSize: 7, statusOffset: -1 },
11  md: { wh: 32, text: 11, statusSize: 9, statusOffset: -1 },
12  lg: { wh: 40, text: 13, statusSize: 10, statusOffset: 0 },
13  xl: { wh: 56, text: 17, statusSize: 13, statusOffset: 1 },
14} as const
15 
16type AvatarSize = keyof typeof sizeMap
17type AvatarVariant = "default" | "beacon" | "bot" | "status"
18type AvatarShape = "circle" | "square"
19type StatusColor = "online" | "away" | "busy" | "offline"
20 
21const statusColorMap: Record<StatusColor, string> = {
22  online: "var(--aurora-success)",
23  away: "var(--aurora-warn)",
24  busy: "var(--aurora-error)",
25  offline: "var(--aurora-status-offline)",
26}
27 
28// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
29 
30// ─── Avatar component ─────────────────────────────────────────────────────────
31 
32export interface AvatarProps
33  extends Omit<
34    React.ComponentProps<typeof AvatarPrimitive.Root>,
35    "color"
36  > {
37  /** Visual variant */
38  variant?: AvatarVariant
39  /** Size preset or explicit pixel size */
40  size?: AvatarSize | number
41  /** Image src */
42  src?: string
43  /** Alt text */
44  alt?: string
45  /** Fallback text (initials) — alias for `initials` */
46  fallback?: string
47  /**
48   * Initials rendered as the fallback. Drives the tone-tinted surface, ring,
49   * and text color. Takes precedence over `fallback`.
50   */
51  initials?: string
52  /**
53   * Tone — any CSS color (typically an Aurora accent token such as
54   * `var(--aurora-accent-primary)`). Colors the initials, the tinted surface
55   * and the soft tone ring.
56   */
57  tone?: string
58  /** Trusted React icon rendered instead of initials. */
59  icon?: React.ReactNode
60  /** Circle (default) or rounded square. */
61  shape?: AvatarShape
62  /** Adds an outer focus-style ring in the avatar's tone. */
63  ring?: boolean
64  /** Status dot color — shown when `status` is set or variant="status". */
65  status?: StatusColor
66}
67 
68const DEFAULT_TONE = "var(--aurora-accent-primary)"
69 
70function Avatar({
71  ref,
72  className,
73// … truncated