"use client" import * as React from "react" import { Avatar as AvatarPrimitive } from "radix-ui" import { cn } from "./lib/utils" import { Tooltip } from "./tooltip" type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" type AvatarStatus = "online" | "away" | "busy" | "offline" const sizes: Record = { xs: "size-6 text-[10px]", sm: "size-7 text-xs", md: "size-8 text-xs", lg: "size-10 text-sm", xl: "size-16 text-lg", } const statusColors: Record = { online: "bg-success", away: "bg-warning", busy: "bg-destructive", offline: "bg-muted-foreground", } /** "Olivia Martin" → "OM"; one name gives one letter. */ const initials = (name: string) => name .trim() .split(/\s+/) .slice(0, 2) .map((part) => part[0]?.toUpperCase() ?? "") .join("") type AvatarProps = Omit, "children"> & { src?: string /** Who it is: the image's alt text, and the initials shown until (or instead of) the image. */ name?: string /** The image's alt text, name by default. "" when the name is written beside the avatar, so it isn't read twice. */ alt?: string /** Replaces the initials, e.g. an icon. */ fallback?: React.ReactNode size?: AvatarSize shape?: "circle" | "square" /** A dot in the corner; its meaning is read out too. */ status?: AvatarStatus classNames?: { image?: string; fallback?: string; status?: string } } /** A person's picture in one tag, with their initials while it loads or when there's none. */ function Avatar({ src, name, alt = name, fallback, size = "md", shape = "circle", status, className, classNames, ...props }: AvatarProps) { const radius = shape === "circle" ? "rounded-full" : "rounded-md" return ( // With alt="", the name is written beside it: the avatar is decoration, so its initials aren't read out either. {src && ( )} {fallback ?? (name ? initials(name) : null)} {/* With no image, the initials alone don't say who it is. */} {!src && alt && {alt}} {status && ( {status} )} ) } type AvatarGroupProps = Omit, "children"> & { items: (Pick & { id?: string | number })[] /** Avatars shown before the rest collapse into "+N". */ max?: number size?: AvatarSize /** Each avatar shows its name in a tooltip on hover or keyboard focus, and "+N" lists the rest. */ showNames?: boolean } /** * Avatars overlapping in a row, in one tag. Shows the first `max` and a "+N" for the rest; give it a label for screen * readers, e.g. aria-label="5 people on this board". */ function AvatarGroup({ items, max, size = "md", showNames = false, className, ...props }: AvatarGroupProps) { const shown = max === undefined ? items : items.slice(0, max) const rest = items.slice(shown.length) // The one under the pointer (or focused) rises a little and comes to the front of the stack. const lift = "relative rounded-full transition-transform duration-(--duration-fast) ease-standard outline-none hover:z-10 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring motion-safe:hover:-translate-y-0.5" const more = rest.length > 0 && ( +{rest.length} ) const restNames = rest.map((item) => item.name).filter(Boolean) return (

{shown.map(({ id, ...item }, i) => showNames && item.name ? ( ) : ( ) )} {more && showNames && restNames.length > 0 ? ( {restNames.join(", ")}}>{more} ) : ( more )}

) } export { Avatar, AvatarGroup, type AvatarProps, type AvatarGroupProps, type AvatarSize, type AvatarStatus }