{
  "name": "AvatarGroup",
  "source": "src/components/Avatar.tsx",
  "propsType": "AvatarGroupProps",
  "description": "AvatarGroup overlaps its children by a quarter of the avatar size, matching\nFigma's -6 / -8 / -10 / -12 gaps at Mini / Small / Medium / Large.\n\nGroup defaults fill in `size` / `shape` only when a child Avatar has not set\nthem itself — an explicit child prop wins. Non-Avatar children are left\nalone so `size`/`shape` are never pushed onto arbitrary DOM nodes.\n\nChildren render in source order because that is Figma's stacking: each avatar\npaints over the one before it, so the `+N` overflow ends up on top. Later\nsiblings paint later, so this needs no z-index.",
  "import": "import { AvatarGroup } from 'ionbase-ui';",
  "status": "stable",
  "summary": "Overlapping Avatars with a `+N` overflow, for showing several people in one row's width.",
  "useWhen": [
    "several people share one thing — assignees, participants, collaborators",
    "the exact list matters less than the fact that there are several"
  ],
  "useInstead": [
    {
      "when": "each person needs their own name, role or action visible",
      "use": "Table",
      "why": "an overlapping stack hides everything but the picture"
    }
  ],
  "variants": {
    "size": {
      "mini": {
        "use": "24px — inline beside body text, dense table rows"
      },
      "sm": {
        "use": "32px — menu rows, compact lists"
      },
      "md": {
        "use": "the default, 40px"
      },
      "lg": {
        "use": "48px — profile headers and detail pages"
      }
    },
    "shape": {
      "circle": {
        "use": "the default — people"
      },
      "square": {
        "use": "organisations, projects, workspaces"
      }
    }
  },
  "slots": {
    "children": {
      "accepts": "Avatar",
      "note": "group `size`/`shape` fill in only where a child has not set its own; a child's explicit prop wins. Non-Avatar children are left untouched."
    }
  },
  "a11y": {
    "requires": [
      "`alt` on every child Avatar — the overflow avatar is the only one the group names for you"
    ],
    "notes": [
      "Children paint in source order, so the `+N` overflow lands on top without any z-index."
    ]
  },
  "antiPatterns": [
    {
      "dont": "omitting `max` on an unbounded list",
      "why": "twenty overlapping avatars is not a summary; it is a smear"
    }
  ],
  "stylesheet": "src/styles/avatar.css",
  "tokens": [
    "--border-strong",
    "--border-subtle",
    "--border-width-default",
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-medium",
    "--font-weight-regular",
    "--icon-size-2xs",
    "--icon-size-lg",
    "--icon-size-md",
    "--icon-size-sm",
    "--icon-tertiary",
    "--ion-avatar-border",
    "--ion-avatar-font-size",
    "--ion-avatar-font-weight",
    "--ion-avatar-group-overlap",
    "--ion-avatar-icon",
    "--ion-avatar-indicator-icon",
    "--ion-avatar-indicator-ring",
    "--ion-avatar-indicator-size",
    "--ion-avatar-line-height",
    "--ion-avatar-radius",
    "--ion-avatar-ring-width",
    "--ion-avatar-size",
    "--ion-avatar-surface",
    "--radius-full",
    "--radius-md",
    "--radius-sm",
    "--radius-xs",
    "--ring-offset",
    "--spacing-12",
    "--spacing-14",
    "--spacing-16",
    "--spacing-24",
    "--spacing-32",
    "--spacing-40",
    "--spacing-48",
    "--spacing-8",
    "--surface-error",
    "--surface-information",
    "--surface-inverse",
    "--surface-muted",
    "--surface-placeholder",
    "--surface-primary",
    "--surface-success",
    "--surface-warning",
    "--text-inverse",
    "--text-on-color",
    "--text-tertiary",
    "--type-body",
    "--type-body-lg",
    "--type-body-lg-line-height",
    "--type-body-line-height",
    "--type-body-sm",
    "--type-body-sm-line-height",
    "--type-caption",
    "--type-caption-line-height"
  ],
  "props": {
    "size": {
      "type": "AvatarSize | undefined",
      "required": false,
      "origin": "own",
      "values": [
        "sm",
        "md",
        "lg",
        "mini"
      ]
    },
    "max": {
      "type": "number | undefined",
      "required": false,
      "origin": "own",
      "description": "Cap on avatars shown; the remainder becomes a `+N` overflow avatar."
    },
    "shape": {
      "type": "AvatarShape | undefined",
      "required": false,
      "origin": "own",
      "values": [
        "circle",
        "square"
      ]
    },
    "overflowLabel": {
      "type": "((count: number) => string) | undefined",
      "required": false,
      "origin": "own",
      "description": "The overflow avatar's name — \"4 more\" in English. Receives the count as a\nnumber so a translation can choose its plural form."
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own"
    }
  },
  "propCounts": {
    "own": 5,
    "aria": 0,
    "dom": 277,
    "other": 0
  }
}