{
  "name": "AvatarGroup",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/AvatarGroup.tsx",
  "chapterTag": "07 Data Display",
  "chapter": "08-data-display.html",
  "sectionId": "avatar-group",
  "elName": "AvatarGroup",
  "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#avatar-group",
  "hasLiveDemo": false,
  "description": "Stacked avatar group with overflow. Renders the first `max` avatars\ninline (overlapping by negative margin), then a \"+N\" pill listing the\nremaining avatars in a tooltip.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "AvatarGroup",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "AvatarGroupProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { AvatarGroup } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "max",
      "optional": true,
      "type": "number",
      "doc": "Maximum avatars rendered before the \"+N\" overflow pill takes over. Default 3."
    },
    {
      "name": "size",
      "optional": true,
      "type": "AvatarProps[\"size\"]",
      "doc": "Size scale applied to the overflow pill (mirrors `<Avatar>` sizes). Default `md`."
    },
    {
      "name": "showTooltips",
      "optional": true,
      "type": "boolean",
      "doc": "Render tooltips on each avatar (using its `name`) and the overflow pill. Default `true`."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "`<Avatar>` children. Order of rendering matches order in children."
    }
  ],
  "classesUsed": [
    "avatar-group",
    "avatar-group-more"
  ],
  "examples": {
    "react": "<AvatarGroup max={3}>\n    {team.map((u) => (\n      <Avatar key={u.id} name={u.full_name} image={u.avatar_url} />\n    ))}\n  </AvatarGroup>",
    "html": "<div role=\"group\" data-size=\"md\" class=\"avatar-group\">\n  <span class=\"av\" style=\"background:var(--info-soft); color:var(--info-text);\">AC</span>\n  <span class=\"av\" style=\"background:#FFE2EC; color:var(--accent-text);\">MR</span>\n  <span class=\"av\" style=\"background:#E3F2E3; color:#1E6B44;\">JS</span>\n  <span class=\"avatar-group-more\" role=\"img\" aria-label=\"2 more\">+2</span>\n</div>",
    "css": ".avatar-group { display: inline-flex; align-items: center; }\n\n.avatar-group-more {\n  margin-left: -8px;\n  width: 32px; height: 32px;\n  border-radius: 50%;\n  background: var(--bg-sunken);\n  color: var(--fg-soft);\n  font: 600 11px/1 var(--f-mono); letter-spacing: 0.02em;\n  display: inline-flex; align-items: center; justify-content: center;\n  box-shadow: 0 0 0 2px var(--bg-paper);\n  flex-shrink: 0;\n}"
  }
}