laif-ds/dist/agent-docs/components/Avatar.md

Design System di Laif con componenti React basati su principi di Atomic Design

# Avatar

## Overview

Circular user/avatar component with image and fallback. Accessible and easily styled.

---

## Props

### Avatar (Root)

| Prop        | Type              | Default      | Description                                   |
| ----------- | ----------------- | ------------ | --------------------------------------------- |
| `className` | `string`          | `""`         | Additional classes for size/border/layout.    |
| `children`  | `React.ReactNode` | **required** | Typically `AvatarImage` and `AvatarFallback`. |

### Subcomponents

- `AvatarImage`: The image element.
  - Props: `src`, `alt`, `className`.
- `AvatarFallback`: Fallback content shown when the image fails or loads slowly.
  - Props: `children` (e.g., initials), `className`.

---

## Behavior

- **Shape**: Circular by default (`rounded-full`).
- **Sizing**: Control via `className` (e.g., `h-16 w-16`).
- **Fallback**: Displays initials or an icon when the image is unavailable.

---

## Examples

### With Image

```tsx
import { Avatar, AvatarImage, AvatarFallback } from "laif-ds";

export function WithImage() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  );
}
```

### With Fallback

```tsx
import { Avatar, AvatarImage, AvatarFallback } from "laif-ds";

export function WithFallback() {
  return (
    <Avatar>
      <AvatarImage src="" alt="User" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  );
}
```

### Custom Size

```tsx
import { Avatar, AvatarImage, AvatarFallback } from "laif-ds";

export function CustomSize() {
  return (
    <Avatar className="h-16 w-16">
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  );
}
```

### Avatar Group

```tsx
import { Avatar, AvatarImage, AvatarFallback } from "laif-ds";

export function AvatarGroup() {
  return (
    <div className="flex -space-x-2">
      <Avatar className="border-background border-2">
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar className="border-background border-2">
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      <Avatar className="border-background border-2">
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>MK</AvatarFallback>
      </Avatar>
    </div>
  );
}
```

---

## Notes

- **Accessibility**: Provide `alt` text for `AvatarImage`.
- **Styling**: Combine with borders/shadows via `className`.