---

## Avatar
User profile image component with fallback initials, multiple sizes, and interactive states.

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

### Examples
```svelte
<Avatar src="/user-photo.jpg" name="John Doe" size="lg" />
```

```svelte
<Avatar name="Jane Smith" randomColor clickable onclick={() => showProfile()} />
```

```svelte
<Avatar name="Ada Lovelace" status="online" pulse />
```

### Variants
- intent: danger, neutral, primary, secondary, success, warning (default: neutral)
- variant: circle, rounded, square (default: circle)
- size: 2xl, lg, md, sm, xl, xs (default: md)
- interactive: true (default: false)
- pulse: true (default: false)
- ring: true (default: false)
- ringIntent: danger, neutral, primary, secondary, success, warning (default: primary)
- status: away, busy, offline, online
- statusPosition: bottom-left, bottom-right, top-left, top-right (default: bottom-right)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...AvatarVariants | `VariantProps` | no |  | Styling variants from AvatarVariants |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| alt | `string` | no |  | Alt text for the image. Defaults to `name`. |
| children | `Snippet` | no |  | Custom fallback content rendered instead of auto-generated initials. Useful for overflow counters, icons, or fully custom avatars with `unstyled`. |
| class | `string` | no |  | Extra classes merged onto the root element. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| clickable | `boolean` | no |  | Mark the avatar as clickable (adds hover/focus styles and keyboard support). Alias for the `interactive` variant. |
| mint | `MintProp` | no | 'none' | Micro-interaction preset applied to the avatar. Only applies while interactive (`clickable`, `interactive`, or `onclick`). |
| name | `string` | no |  | Full user name — used for initials generation, `randomColor` hashing, and `aria-label`. |
| onclick | `(event: MouseEvent) => void` | no |  | Click handler. Automatically enables interactive styles. |
| onHover | `(hovered: boolean) => void` | no |  | Called when the hover state changes. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Avatar: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| randomColor | `boolean` | no |  | Derive a deterministic background color from `name`. The same name always produces the same color, making it easy to visually distinguish users without images. Overrides `intent`. Picks from the 12-slot identity palette (`--color-avatar-1` … `--color-avatar-12`), which resolves light/dark automatically — override those tokens to rebrand it. Without a `name` there is no identity to encode, so the avatar keeps its neutral background. |
| ringColor | `string` | no |  | Custom ring color (CSS value). Overrides `ringIntent` when set. |
| slotClasses | `Partial<Record<AvatarSlots, string>>` | no |  | Per-slot class overrides merged with tv styles. Slots: base | frame | image | fallback | status. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| src | `string` | no |  | Image URL. Falls back to initials or `children` when empty or on load error. |
| unstyled | `boolean` | no |  | Remove all default tv classes. |
| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | neutral | Controls the color theme and semantic meaning of the Avatar. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
| variant | `'circle' | 'rounded' | 'square'` | no | circle | Controls the visual style and presentation of the Avatar. Determines the component's visual treatment. Available options: circle, rounded, square. |
| size | `'2xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Avatar. Affects the component's physical footprint. Available options: 2xl, lg, md, and 3 more. |
| interactive | `'true'` | no | false | Controls the interactive behavior and appearance of the Avatar component. Available options: true. |
| pulse | `'true'` | no | false | Controls the pulse behavior and appearance of the Avatar component. Available options: true. |
| ring | `'true'` | no | false | Controls the ring behavior and appearance of the Avatar component. Available options: true. |
| ringIntent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | primary | Controls the ringIntent behavior and appearance of the Avatar component. Available options: danger, neutral, primary, and 3 more. |
| status | `'away' | 'busy' | 'offline' | 'online'` | no |  | Controls the status behavior and appearance of the Avatar component. Available options: away, busy, offline, online. |
| statusPosition | `'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'` | no | bottom-right | Controls the statusPosition behavior and appearance of the Avatar component. Available options: bottom-left, bottom-right, top-left, top-right. |

Inherited from:
- AvatarVariants (external)
- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (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 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;
}
```

```ts
type BuiltinMintName = (typeof BUILTIN_MINT_NAMES)[number]
```

### Slots (slotClasses keys)
`base`, `frame`, `image`, `fallback`, `status`