{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collaborator-avatars",
  "title": "CollaboratorAvatars",
  "description": "Display avatars of users collaborating on a notebook with overflow handling.",
  "registryDependencies": [
    "avatar",
    "hover-card"
  ],
  "files": [
    {
      "path": "registry/cell/CollaboratorAvatars.tsx",
      "content": "import * as React from \"react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\";\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/components/ui/hover-card\";\n\nexport interface CollaboratorUser {\n  id: string;\n  name: string;\n  picture?: string;\n  color?: string;\n}\n\nexport interface CollaboratorAvatarsProps {\n  users: CollaboratorUser[];\n  currentUserId?: string;\n  limit?: number;\n  className?: string;\n  size?: \"default\" | \"sm\" | \"lg\";\n}\n\nfunction getInitials(name: string): string {\n  return name\n    .split(\" \")\n    .map((part) => part[0])\n    .join(\"\")\n    .toUpperCase()\n    .slice(0, 2);\n}\n\nexport function CollaboratorAvatars({\n  users,\n  currentUserId,\n  limit = 3,\n  className,\n  size = \"sm\",\n}: CollaboratorAvatarsProps) {\n  // Filter out current user from display\n  const displayUsers = React.useMemo(() => {\n    return currentUserId\n      ? users.filter((user) => user.id !== currentUserId)\n      : users;\n  }, [users, currentUserId]);\n\n  if (displayUsers.length === 0) {\n    return null;\n  }\n\n  const visibleUsers = displayUsers.slice(0, limit);\n  const overflowCount = displayUsers.length - limit;\n  const overflowUsers = displayUsers.slice(limit);\n\n  return (\n    <AvatarGroup data-slot=\"collaborator-avatars\" className={className}>\n      {visibleUsers.map((user) => (\n        <HoverCard key={user.id} openDelay={200} closeDelay={100}>\n          <HoverCardTrigger asChild>\n            <Avatar\n              size={size}\n              className=\"cursor-pointer transition-transform hover:scale-110 hover:z-10\"\n              style={\n                user.color\n                  ? { boxShadow: `0 0 0 2px ${user.color}` }\n                  : undefined\n              }\n            >\n              {user.picture ? (\n                <AvatarImage src={user.picture} alt={user.name} />\n              ) : null}\n              <AvatarFallback\n                style={\n                  user.color\n                    ? { backgroundColor: user.color, color: \"white\" }\n                    : undefined\n                }\n              >\n                {getInitials(user.name)}\n              </AvatarFallback>\n            </Avatar>\n          </HoverCardTrigger>\n          <HoverCardContent className=\"w-auto min-w-[120px] p-3\">\n            <div className=\"flex items-center gap-2\">\n              <Avatar size=\"default\">\n                {user.picture ? (\n                  <AvatarImage src={user.picture} alt={user.name} />\n                ) : null}\n                <AvatarFallback\n                  style={\n                    user.color\n                      ? { backgroundColor: user.color, color: \"white\" }\n                      : undefined\n                  }\n                >\n                  {getInitials(user.name)}\n                </AvatarFallback>\n              </Avatar>\n              <span className=\"text-sm font-medium\">{user.name}</span>\n            </div>\n          </HoverCardContent>\n        </HoverCard>\n      ))}\n      {overflowCount > 0 && (\n        <HoverCard openDelay={200} closeDelay={100}>\n          <HoverCardTrigger asChild>\n            <AvatarGroupCount className=\"cursor-pointer transition-transform hover:scale-110 hover:z-10\">\n              +{overflowCount}\n            </AvatarGroupCount>\n          </HoverCardTrigger>\n          <HoverCardContent className=\"w-auto min-w-[150px] p-3\">\n            <div className=\"space-y-2\">\n              {overflowUsers.map((user) => (\n                <div key={user.id} className=\"flex items-center gap-2\">\n                  <Avatar size=\"sm\">\n                    {user.picture ? (\n                      <AvatarImage src={user.picture} alt={user.name} />\n                    ) : null}\n                    <AvatarFallback\n                      style={\n                        user.color\n                          ? { backgroundColor: user.color, color: \"white\" }\n                          : undefined\n                      }\n                    >\n                      {getInitials(user.name)}\n                    </AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-sm\">{user.name}</span>\n                </div>\n              ))}\n            </div>\n          </HoverCardContent>\n        </HoverCard>\n      )}\n    </AvatarGroup>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/cell/CollaboratorAvatars.tsx"
    }
  ],
  "type": "registry:component"
}