{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-group",
  "type": "registry:component",
  "title": "Avatar Group",
  "description": "A component to display a group of avatars.",
  "registryDependencies": [
    "avatar"
  ],
  "files": [
    {
      "path": "src/components/ui/avatar-group.tsx",
      "content": "import * as React from \"react\";\n\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\";\nimport { cn } from \"@/lib/utils\";\n\ntype AvatarProps = React.ComponentProps<typeof Avatar>;\n\ninterface AvatarGroupProps extends React.ComponentProps<\"div\"> {\n\tchildren: React.ReactElement<AvatarProps>[];\n\tmax?: number;\n}\n\nconst AvatarGroup = ({\n\tchildren,\n\tmax,\n\tclassName,\n\t...props\n}: AvatarGroupProps) => {\n\tconst totalAvatars = React.Children.count(children);\n\tconst displayedAvatars = React.Children.toArray(children)\n\t\t.slice(0, max)\n\t\t.reverse();\n\tconst remainingAvatars = max ? Math.max(totalAvatars - max, 1) : 0;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex items-center flex-row-reverse\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{remainingAvatars > 0 && (\n\t\t\t\t<Avatar className=\"-ml-2 hover:z-10 relative ring-2 ring-background\">\n\t\t\t\t\t<AvatarFallback className=\"bg-muted-foreground text-white\">\n\t\t\t\t\t\t+{remainingAvatars}\n\t\t\t\t\t</AvatarFallback>\n\t\t\t\t</Avatar>\n\t\t\t)}\n\t\t\t{displayedAvatars.map((avatar, index) => {\n\t\t\t\tif (!React.isValidElement(avatar)) return null;\n\n\t\t\t\treturn (\n\t\t\t\t\t<div key={index} className=\"-ml-2 hover:z-10 relative\">\n\t\t\t\t\t\t{React.cloneElement(avatar as React.ReactElement<AvatarProps>, {\n\t\t\t\t\t\t\tclassName: \"ring-2 ring-background\",\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n};\n\nexport { AvatarGroup };\n",
      "type": "registry:component"
    }
  ]
}