---

## AvatarGroup
Stacks avatars into an overlapping row with an optional "+N" overflow chip,
for a set of collaborators, assignees or participants. Pass an `items` array of Avatar
props; a shared `size` and a cut-out ring apply to every avatar so the stack reads cleanly
on any background.

**Import:** `import { AvatarGroup } from '@urbicon-ui/blocks';`

### Examples
```svelte
<AvatarGroup items={[{ name: 'Ada Lovelace' }, { name: 'Alan Turing' }]} />
```

```svelte
<AvatarGroup items={team} max={4} size="lg" />
```

### Variants
- spacing: loose, normal, tight (default: normal)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| items | `AvatarProps[]` | yes |  | The avatars to stack. Each entry is a full set of Avatar props (src, name, status, …). |
| ...AvatarGroupVariants | `VariantProps` | no |  | Styling variants from AvatarGroupVariants |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'class') |
| borderColor | `string` | no | 'var(--color-surface-base)' | Ring colour drawn around each avatar so the overlap reads as a cut-out. Any CSS colour; defaults to the base background so the stack looks punched out of the page. |
| class | `string` | no |  | Additional CSS class merged onto the root row. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| max | `number` | no |  | Maximum avatars to render. When `items` exceeds it, `max - 1` avatars are shown plus a single "+N" overflow chip (N is the count of hidden avatars), so the total rendered count is exactly `max`. Unset (or `0`/negative) shows every avatar with no chip; use `≥ 2` so the chip sits alongside at least one visible face. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ AvatarGroup: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic palette. |
| size | `AvatarProps['size']` | no |  | Shared size applied to every avatar and the overflow chip. One of xs, sm, md (default), lg, xl, 2xl. |
| slotClasses | `Partial<Record<AvatarGroupSlots, string>>` | no |  | Per-slot class overrides. Slots: base | overflow. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| spacing | `'tight' | 'normal' | 'loose'` | no |  | Overlap amount between avatars: tight, normal (default), loose. |
| unstyled | `boolean` | no |  | Strip all default styles; combine with slotClasses to rebuild from scratch. |

Inherited from:
- AvatarGroupVariants (external)
- Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> (omit-pattern)

### Types
```ts
type MintProp = | MintName
  | { name: MintName; config?: MintConfig & Record<string, unknown> }
  | Array<MintName>
  | Array<MintName | { name: MintName; config?: MintConfig & Record<string, unknown> }>
```

```ts
type SlotNames = keyof ReturnType<T> & string
```

```ts
type VariantProps = Omit<
  Exclude<Parameters<T>[0], undefined>,
  'class'
>
```

```ts
type MintName = BuiltinMintName | 'none' | (string & {})
```

```ts
interface MintConfig {
/**
   * `hover` and `focus` hold the effect while the pointer/visible focus stays
   * on the element; `click` and `load` run it once.
   */
  trigger?: 'hover' | 'click' | 'focus' | 'load';
  /**
   * Effect duration in ms. Written as an inline per-effect custom property
   * (`--blocks-mint-<effect>-duration`), so the CSS transition/animation
   * actually runs at this speed; unset, the theme duration tokens apply.
   */
  duration?: number;
  /** Delay in ms before the effect applies. */
  delay?: number;
  /**
   * CSS easing for the effect (`--blocks-mint-<effect>-easing` inline);
   * unset, the per-effect theme default applies.
   */
  easing?: string;
  disabled?: boolean;
}
```

### Slots (slotClasses keys)
`base`, `overflow`