```tsx
import * as Avatar from '@gentleduck/primitives/avatar'
```

## Anatomy

```tsx
<Avatar.Root>
  <Avatar.Image />
  <Avatar.Fallback />
</Avatar.Root>
```

***

## Example

```tsx
import * as Avatar from '@gentleduck/primitives/avatar'

function UserAvatar() {
  return (
    <Avatar.Root className="relative flex size-10 shrink-0 overflow-hidden rounded-full">
      <Avatar.Image
        src="https://github.com/wildduck.png"
        alt="@wildduck"
        className="aspect-square size-full"
      />
      <Avatar.Fallback className="flex size-full items-center justify-center rounded-full bg-muted" delayMs={600}>
        WD
      </Avatar.Fallback>
    </Avatar.Root>
  )
}
```

***

## API

### `Avatar.Root`

The root container that manages image loading state. Renders a `<span>`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `dir` | `'ltr' \| 'rtl'` | - | Text direction for RTL support |
| `asChild` | `boolean` | - | Render as child element |

### `Avatar.Image`

The `<img>` element. Only renders when the image has successfully loaded.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | - | Image source URL |
| `onLoadingStatusChange` | `(status: ImageLoadingStatus) => void` | - | Called when loading status changes |
| `asChild` | `boolean` | - | Render as child element |

**`ImageLoadingStatus`**: `'idle' | 'loading' | 'loaded' | 'error'`

### `Avatar.Fallback`

Renders when the image is not available. Renders a `<span>`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `delayMs` | `number` | - | Delay in milliseconds before showing the fallback |
| `asChild` | `boolean` | - | Render as child element |