Avatar group

1"use client";2 3import { useState, type HTMLAttributes } from "react";4import { ChevronUp } from "lucide-react";5 6export type AvatarPresence = "online" | "away" | "busy" | "offline";7 8export type AvatarPerson = {9  id: string;10  name: string;11  /** An image URL or a consumer-owned image element is not required; initials are the fallback. */12  src?: string;13  presence?: AvatarPresence;14};15 16export type AvatarGroupProps = Omit<17  HTMLAttributes<HTMLDivElement>,18  "children"19> & {20  people: AvatarPerson[];21  /** Number of avatars visible before the overflow control. */22  max?: number;23  size?: "sm" | "md" | "lg";24  label?: string;25  /** Allows the overflow control to reveal the full roster. */26  expandable?: boolean;27  expanded?: boolean;28  defaultExpanded?: boolean;