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

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

 # Dialog
 
 ## Overview
 
 Accessible modal dialog built on Radix. Includes overlay, content with size variants, header/footer layout, title/description, trigger and close controls.
 
 ---
 
 ## Props
 
 ### Dialog (Root)
 
 | Prop           | Type                | Default     | Description                              |
 | -------------- | ------------------- | ----------- | ---------------------------------------- |
 | `open`         | `boolean`           | `undefined` | Controlled open state.                    |
 | `defaultOpen`  | `boolean`           | `false`     | Uncontrolled initial open state.          |
 | `onOpenChange` | `(open: boolean) => void` | `undefined` | Called when open state changes.      |
 | `modal`        | `boolean`           | `true`      | Modal behavior (trap focus, background).  |
 
 ### DialogContent
 
 Additional prop:
 
 | Prop     | Type                          | Default     | Description                           |
 | -------- | ----------------------------- | ----------- | ------------------------------------- |
 | `size`   | `"sm" | "default" | "lg" | "xl"` | `"default"` | Max-width preset for the content.     |
 | `className` | `string`                    | `""`        | Additional classes for the panel.     |
 
 ### Subcomponents
 
 - `DialogTrigger`: Element that opens the dialog (supports `asChild`).
 - `DialogPortal` / `DialogOverlay`: Portal root and backdrop.
 - `DialogContent`: Centered panel with animations and close button.
 - `DialogHeader` / `DialogFooter`: Layout helpers for content.
 - `DialogTitle` / `DialogDescription`: Accessible title and description.
 - `DialogClose`: Close button (already included inside `DialogContent`).
 
 ---
 
 ## Behavior
 
 - **Focus management**: Traps focus while open; returns on close.
 - **Pointer outside exception**: Clicks inside elements marked `data-command-portal` are ignored to prevent unintended close.
 - **Sizes**: `size` controls the max-width (`sm`, `default`, `lg`, `xl`).
 
 ---
 
 ## Examples
 
 ### Basic
 
 ```tsx
 import { Button } from "laif-ds";
 import {
   Dialog,
   DialogTrigger,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogDescription,
   DialogFooter,
 } from "laif-ds";
 
 export function BasicDialog() {
   return (
     <Dialog>
       <DialogTrigger asChild>
         <Button variant="outline">Open Dialog</Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Basic Dialog</DialogTitle>
           <DialogDescription>
             This is a basic dialog with title and description.
           </DialogDescription>
         </DialogHeader>
         <div className="py-4">
           <p className="text-d-secondary-foreground text-sm">
             Dialog content goes here.
           </p>
         </div>
         <DialogFooter>
           <Button type="submit">Save changes</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   );
 }
 ```
 
 ### Size Variants
 
 ```tsx
 import { Button } from "laif-ds";
 import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "laif-ds";
 
 export function SizeVariants() {
   return (
     <div className="flex flex-wrap gap-3">
       {["sm", "default", "lg", "xl"].map((sz) => (
         <Dialog key={sz as string}>
           <DialogTrigger asChild>
             <Button variant="outline">Open {String(sz)}</Button>
           </DialogTrigger>
           <DialogContent size={sz as any}>
             <DialogHeader>
               <DialogTitle>Size: {String(sz)}</DialogTitle>
             </DialogHeader>
             <div className="text-sm">Content for {String(sz)}</div>
           </DialogContent>
         </Dialog>
       ))}
     </div>
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Accessibility**: Use `DialogTitle` and `DialogDescription` for screen readers.
 - **Styling**: Customize panel via `className` on `DialogContent`.
 - **Closing**: A close button is rendered in the top-right of `DialogContent`.