Avatar Glass

1/**
2 * AvatarGlass Component
3 *
4 * Glass-themed avatar with:
5 * - Theme-aware styling (glass/light/aurora)
6 * - Glow effect on hover
7 * - Optional glow-pulse animation
8 * - Status indicator with glow
9 * - Size variants
10 * - Built on Radix UI primitives
11 *
12 * @example Compound API (recommended)
13 * ```tsx
14 * <AvatarGlass size="default">
15 *   <AvatarGlassImage src="/avatar.jpg" alt="User" />
16 *   <AvatarGlassFallback>JD</AvatarGlassFallback>
17 * </AvatarGlass>
18 * ```
19 *
20 * @example With status indicator
21 * ```tsx
22 * <AvatarGlass size="lg" status="online">
23 *   <AvatarGlassImage src="/avatar.jpg" alt="User" />
24 *   <AvatarGlassFallback>JD</AvatarGlassFallback>
25 * </AvatarGlass>
26 * ```
27 *
28 * @example With glow animation
29 * ```tsx
30 * <AvatarGlass size="xl" glowing>
31 *   <AvatarGlassImage src="/avatar.jpg" alt="User" />
32 *   <AvatarGlassFallback>JD</AvatarGlassFallback>
33 * </AvatarGlass>
34 * ```
35 */
36 
37'use client';
38 
39import * as React from 'react';
40import * as AvatarPrimitive from '@radix-ui/react-avatar';
41import { cn } from '@/lib/utils';
42import { useHover } from '@/lib/hooks/use-hover';
43import { avatarSizes, statusSizes } from '@/lib/variants/avatar-glass-variants';
44import '@/glass-theme.css';
45 
46// ========================================
47// TYPES
48// ========================================
49 
50export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
51export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
52 
53// ========================================
54// HELPERS
55// ========================================
56 
57const getStatusVars = (statusType: AvatarStatus): { bg: string; glow: string } => {
58  const statusVars: Record<AvatarStatus, { bg: string; glow: string }> = {
59    online: { bg: 'var(--status-online)', glow: 'var(--status-online-glow)' },
60    offline: { bg: 'var(--status-offline)', glow: 'none' },
61    busy: { bg: 'var(--status-busy)', glow: 'var(--status-busy-glow)' },
62    away: { bg: 'var(--status-away)', glow: 'var(--status-away-glow)' },
63  };
64  return statusVars[statusType];
65};
66 
67// ========================================
68// CONTEXT
69// ========================================
70 
71interface AvatarGlassContextValue {
72  size: AvatarSize;
73  status?: AvatarStatus;
74  glowing?: boolean;
75}
76 
77const AvatarGlassContext = React.createContext<AvatarGlassContextValue>({
78  size: 'md',
79});
80 
81// ========================================
82// COMPOUND COMPONENT: ROOT
83// ========================================
84 
85// … truncated