51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:Tfff,"use client"; /* eslint-disable @next/next/no-img-element */ import { useState, type CSSProperties, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface AvatarGroupPerson { name: string; src?: string; } export interface AvatarGroupProps { people: AvatarGroupPerson[]; /** Avatars shown before collapsing the rest into a "+N" chip. */ max?: number; /** Avatar diameter in px. */ size?: number; /** Px each avatar tucks under its neighbour at rest. */ overlap?: number; /** Fan the avatars apart while the group is hovered or focused. */ spread?: boolean; className?: string; } const initials = (name: string) => name .split(/\s+/) .filter(Boolean) .map((w, i, a) => (i === 0 || i === a.length - 1 ? w[0] : "")) .join("") .toUpperCase(); function hue(name: string) { let h = 0; for (const c of name) h = (h * 31 + c.charCodeAt(0)) % 360; return h; } function Face({ person }: { person: AvatarGroupPerson }) { const [failed, setFailed] = useState(null); const h = hue(person.name); return ( {person.src && failed !== person.src ? (

setFailed(person.src!)} className="size-full object-cover" /> ) : ( initials(person.name) )} ); } function Tip({ children }: { children: ReactNode }) { return ( {children} ); } export function AvatarGroup({ people, max = 4, size = 44, overlap = 14, spread = true, className }: AvatarGroupProps) { const shown = people.slice(0, max); const rest = people.slice(max); const item = cn( "group/item relative -ml-[var(--ag-overlap)] rounded-full outline-none ring-[3px] ring-background first:ml-0", "size-[var(--ag-size)] transition-[margin,translate] duration-300 ease-[cubic-bezier(.3,1.3,.5,1)] motion-reduce:transition-none", "hover:z-10 hover:-translate-y-1 focus-visible:z-10 focus-visible:-translate-y-1 focus-visible:ring-ring", spread && "group-hover/ag:ml-1 group-hover/ag:first:ml-0 group-focus-within/ag:ml-1 group-focus-within/ag:first:ml-0", ); return (

{p.name}
p.name).join(", ")}`} tabIndex={0} className={cn(item, "grid place-items-center bg-muted font-semibold text-muted-foreground")} style={{ fontSize: `calc(var(--ag-size) * 0.32)` }} > +{rest.length} {rest.slice(0, 4).map((p) => p.name).join(", ")} {rest.length > 4 && ` and ${rest.length - 4} more`}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@glint-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/avatar-group.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]