Avatar

<!-- Avatar: Image with Status -->
<div class="avatar avatar--md" role="img" aria-label="Jane Smith — Online">
  <img
    src="/avatars/jane-smith.jpg"
    alt=""
    class="avatar__image"
    loading="lazy"
  />
  <span class="avatar__status avatar__status--online" aria-hidden="true"></span>
</div>

<!-- Avatar: Initials Fallback -->
<div class="avatar avatar--md avatar--initials" aria-label="John Doe" style="background-color: #6366F1;">
  <span class="avatar__initials" aria-hidden="true">JD</span>
</div>

<!-- Avatar: Icon Fallback -->
<div class="avatar avatar--md avatar--icon" aria-label="Unknown user">
  <svg class="avatar__icon-svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
  </svg>
</div>

<!-- Avatar Group: Stacked -->
<div class="avatar-group" role="group" aria-label="Team members">
  <div class="avatar avatar--sm avatar--initials" aria-label="Alice" style="background-color: #EF4444; z-index: 4;">
    <span class="avatar__initials" aria-hidden="true">A</span>
  </div>
  <div class="avatar avatar--sm avatar--initials" aria-label="Bob" style="background-color: #3B82F6; z-index: 3;">
    <span class="avatar__initials" aria-hidden="true">B</span>
  </div>
  <div class="avatar avatar--sm avatar--initials" aria-label="Carol" style="background-color: #22C55E; z-index: 2;">
    <span class="avatar__initials" aria-hidden="true">C</span>
  </div>
  <div class="avatar avatar--sm avatar--overflow" aria-label="3 more members" style="z-index: 1;">
    <span aria-hidden="true">+3</span>
  </div>
</div>

<style>
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
}

.avatar--xs { width: 24px; height: 24px; }
.avatar--sm { width: 32px; height: 32px; }
.avatar--md { width: 40px; height: 40px; }
.avatar--lg { width: 56px; height: 56px; }
.avatar--xl { width: 80px; height: 80px; }

.avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.avatar--initials {
  color: white;
  font-weight: 600;
}

.avatar--sm .avatar__initials { font-size: 12px; }
.avatar--md .avatar__initials { font-size: 14px; }
.avatar--lg .avatar__initials { font-size: 18px; }

.avatar--icon {
  background: var(--color-neutral-200);
  color: var(--color-neutral-500);
}

.avatar__icon-svg {
  width: 60%;
  height: 60%;
}

.avatar__status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
}

.avatar__status--online { background: var(--color-success-500, #22C55E); }
.avatar__status--offline { background: var(--color-neutral-400, #9CA3AF); }
.avatar__status--busy { background: var(--color-error-500, #EF4444); }
.avatar__status--away { background: var(--color-warning-500, #F59E0B); }

/* Avatar Group */
.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-group .avatar {
  border: 2px solid var(--color-white);
  margin-left: -8px;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

.avatar--overflow {
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
  font-size: 11px;
  font-weight: 600;
}

/* Interactive avatar */
.avatar[role="button"],
a .avatar {
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.avatar[role="button"]:hover,
a:hover .avatar {
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

.avatar[role="button"]:focus-visible,
a:focus-visible .avatar {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
</style>

import React, { useState, useMemo, useId } from "react";

type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
type AvatarStatus = "online" | "offline" | "busy" | "away";

interface AvatarProps {
  src?: string;
  alt?: string;
  name?: string;
  size?: AvatarSize;
  shape?: "circle" | "square";
  status?: AvatarStatus;
  bordered?: boolean;
  onClick?: () => void;
}

const SIZE_MAP: Record<AvatarSize, number> = {
  xs: 24, sm: 32, md: 40, lg: 56, xl: 80, "2xl": 120,
};

const FONT_MAP: Record<AvatarSize, number> = {
  xs: 10, sm: 12, md: 14, lg: 18, xl: 24, "2xl": 32,
};

const STATUS_COLORS: Record<AvatarStatus, string> = {
  online: "var(--color-success-500, #22C55E)",
  offline: "var(--color-neutral-400, #9CA3AF)",
  busy: "var(--color-error-500, #EF4444)",
  away: "var(--color-warning-500, #F59E0B)",
};

const STATUS_LABELS: Record<AvatarStatus, string> = {
  online: "Online",
  offline: "Offline",
  busy: "Busy",
  away: "Away",
};

function getInitials(name: string): string {
  const parts = name.split(/[\s\-.]/).filter(Boolean);
  if (parts.length === 0) return "";
  if (parts.length === 1) return parts[0][0].toUpperCase();
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}

function hashColor(name: string): string {
  let hash = 0;
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash);
  }
  const colors = [
    "#EF4444", "#F97316", "#EAB308", "#22C55E",
    "#3B82F6", "#6366F1", "#A855F7", "#EC4899",
    "#14B8A6", "#64748B",
  ];
  return colors[Math.abs(hash) % colors.length];
}

export function Avatar({
  src,
  alt,
  name,
  size = "md",
  shape = "circle",
  status,
  bordered = false,
  onClick,
}: AvatarProps) {
  const [imgError, setImgError] = useState(false);
  const px = SIZE_MAP[size];
  const fontSize = FONT_MAP[size];
  const radius = shape === "circle" ? "50%" : "var(--radius-md, 8px)";
  const initials = name ? getInitials(name) : "";
  const bgColor = name ? hashColor(name) : "var(--color-neutral-200)";
  const showImage = src && !imgError;
  const statusDotSize = Math.max(8, px * 0.25);

  const accessibleName = useMemo(() => {
    const parts: string[] = [];
    if (name) parts.push(name);
    else if (alt) parts.push(alt);
    else parts.push("Unknown user");
    if (status) parts.push(STATUS_LABELS[status]);
    return parts.join(" — ");
  }, [name, alt, status]);

  const Tag = onClick ? "button" : "div";

  return (
    <Tag
      type={onClick ? "button" : undefined}
      onClick={onClick}
      aria-label={accessibleName}
      role={onClick ? undefined : "img"}
      style={{
        position: "relative",
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        width: px,
        height: px,
        borderRadius: radius,
        overflow: "visible",
        flexShrink: 0,
        backgroundColor: showImage ? "var(--color-neutral-100)" : bgColor,
        color: showImage ? undefined : name ? "white" : "var(--color-neutral-500)",
        fontWeight: 600,
        fontSize,
        border: bordered ? "2px solid var(--color-white)" : "none",
        cursor: onClick ? "pointer" : "default",
        padding: 0,
        background: showImage ? "var(--color-neutral-100)" : bgColor,
      }}
    >
      {showImage ? (
        <img
          src={src}
          alt=""
          aria-hidden="true"
          onError={() => setImgError(true)}
          loading="lazy"
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
            borderRadius: radius,
          }}
        />
      ) : initials ? (
        <span aria-hidden="true">{size === "xs" ? initials[0] : initials}</span>
      ) : (
        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{ width: "60%", height: "60%" }}>
          <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" />
        </svg>
      )}

      {status && (
        <span
          aria-hidden="true"
          style={{
            position: "absolute",
            bottom: 0,
            right: 0,
            width: statusDotSize,
            height: statusDotSize,
            borderRadius: "50%",
            backgroundColor: STATUS_COLORS[status],
            border: "2px solid var(--color-white)",
          }}
        />
      )}
    </Tag>
  );
}

interface AvatarGroupProps {
  max?: number;
  size?: AvatarSize;
  spacing?: number;
  children: React.ReactNode;
}

export function AvatarGroup({ max, size = "md", spacing = -8, children }: AvatarGroupProps) {
  const items = React.Children.toArray(children);
  const visible = max ? items.slice(0, max) : items;
  const overflow = max ? items.length - max : 0;
  const px = SIZE_MAP[size];

  return (
    <div role="group" aria-label="User group" style={{ display: "flex", alignItems: "center" }}>
      {visible.map((child, i) => (
        <div
          key={i}
          style={{
            marginLeft: i === 0 ? 0 : spacing,
            zIndex: visible.length - i,
            position: "relative",
          }}
        >
          {React.isValidElement(child)
            ? React.cloneElement(child as React.ReactElement<AvatarProps>, { size, bordered: true })
            : child}
        </div>
      ))}
      {overflow > 0 && (
        <div
          aria-label={`${overflow} more member${overflow !== 1 ? "s" : ""}`}
          style={{
            marginLeft: spacing,
            width: px,
            height: px,
            borderRadius: "50%",
            backgroundColor: "var(--color-neutral-200)",
            color: "var(--color-neutral-700)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontSize: px * 0.3,
            fontWeight: 600,
            border: "2px solid var(--color-white)",
            position: "relative",
            zIndex: 0,
          }}
        >
          +{overflow}
        </div>
      )}
    </div>
  );
}