{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-13",
  "title": "Avatar Group with Max",
  "description": "Group of avatars with maximum limit component",
  "registryDependencies": [
    "avatar"
  ],
  "files": [
    {
      "path": "src/components/customized/avatar/avatar-13.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/registry/ui/avatar\";\n\ntype AvatarProps = React.ComponentProps<typeof Avatar>;\n\ninterface AvatarGroupProps extends React.ComponentProps<\"div\"> {\n  children: React.ReactElement<AvatarProps>[];\n  max?: number;\n}\n\nconst AvatarGroup = ({\n  children,\n  max,\n  className,\n  ...props\n}: AvatarGroupProps) => {\n  const totalAvatars = React.Children.count(children);\n  const displayedAvatars = React.Children.toArray(children)\n    .slice(0, max)\n    .reverse();\n  const remainingAvatars = max ? Math.max(totalAvatars - max, 1) : 0;\n\n  return (\n    <div\n      className={cn(\"flex flex-row-reverse items-center\", className)}\n      {...props}\n    >\n      {remainingAvatars > 0 && (\n        <Avatar className=\"relative -ml-2 ring-2 ring-background hover:z-10\">\n          <AvatarFallback className=\"bg-muted-foreground text-white\">\n            +{remainingAvatars}\n          </AvatarFallback>\n        </Avatar>\n      )}\n      {displayedAvatars.map((avatar, index) => {\n        if (!React.isValidElement(avatar)) {\n          return null;\n        }\n\n        return (\n          <div className=\"relative -ml-2 hover:z-10\" key={index}>\n            {React.cloneElement(avatar as React.ReactElement<AvatarProps>, {\n              className: \"ring-2 ring-background\",\n            })}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default function AvatarGroupMaxAvatarDemo() {\n  return (\n    <AvatarGroup className=\"flex items-center\" max={3}>\n      <Avatar className=\"-ml-2 cursor-pointer first:ml-0\">\n        <AvatarImage alt=\"@shadcn\" src=\"https://github.com/shadcn.png\" />\n        <AvatarFallback className=\"bg-indigo-500 text-white\">CN</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"-ml-2 cursor-pointer first:ml-0\">\n        <AvatarFallback className=\"bg-green-600 text-white\">CN</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"-ml-2 cursor-pointer first:ml-0\">\n        <AvatarFallback className=\"bg-red-500 text-white\">AB</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"-ml-2 cursor-pointer first:ml-0\">\n        <AvatarFallback className=\"bg-indigo-500 text-white\">VK</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"-ml-2 cursor-pointer first:ml-0\">\n        <AvatarFallback className=\"bg-orange-500 text-white\">RS</AvatarFallback>\n      </Avatar>\n    </AvatarGroup>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}