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`.