# Avatar

Visual representation of a person.

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `name` \* | `string` | — | Display name — used to derive initials when no image is provided. |
| `src` | `string` | — | Optional image URL. Falls back to initials if omitted. |
| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `md` | Size preset. |
| `shape` | `"circle" \| "square"` | `circle` | Shape — circle (default) or rounded square. |

All Avatar variants live in a single multi-export stories file, surfaced via
the `:::stories` directive.

### Initials

**`Avatar.stories.tsx`**

```tsx
import { Avatar } from '../../../src/pixie/Avatar.js';

/**
 * Single multi-export stories file demonstrating the `:::stories` directive.
 *
 * `Initials` is a plain render function — the most common form.
 *
 * `WithImage` is a render function too.
 *
 * `Sizes` is a render function returning a row of variants.
 *
 * `Square` is a CSF v3 object — render plus metadata (`name` + `parameters`)
 *   exercises the entry generator's CSF resolution path.
 */
export const Initials = () => <Avatar name="Tudor Popa" />;
```

### With Image

**`Avatar.stories.tsx`**

```tsx
import { Avatar } from '../../../src/pixie/Avatar.js';

export const WithImage = () => <Avatar name="Markbook mascot" src="https://placecats.com/64/64" />;
```

### Sizes

**`Avatar.stories.tsx`**

```tsx
import { Avatar } from '../../../src/pixie/Avatar.js';

export const Sizes = () => (
  <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
    <Avatar name="Ada Lovelace" size="sm" />
    <Avatar name="Grace Hopper" size="md" />
    <Avatar name="Margaret Hamilton" size="lg" />
    <Avatar name="Katherine Johnson" size="xl" />
  </div>
);
```

### Square

**`Avatar.stories.tsx`**

```tsx
import { Avatar } from '../../../src/pixie/Avatar.js';

export const Square = {
  name: 'Square shape',
  parameters: { layout: 'centered' as const },
  render: () => <Avatar name="Lin Manuel" shape="square" size="lg" />,
};
```