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

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

 # AlertDialog
 
 ## Overview
 
 Accessible modal dialog for critical confirmations. Built on Radix Alert Dialog primitives with composable subcomponents and focus management.
 
 ---
 
 ## Props
 
 ### AlertDialog (Root)
 
 | Prop            | Type              | Default     | Description                                  |
 | --------------- | ----------------- | ----------- | -------------------------------------------- |
 | `open`          | `boolean`         | `undefined` | Controlled open state.                        |
 | `defaultOpen`   | `boolean`         | `false`     | Uncontrolled initial open state.              |
 | `onOpenChange`  | `(open: boolean) => void` | `undefined` | Callback when open state changes.        |
 
 ### Subcomponents
 
 - `AlertDialogTrigger`: Element that opens the dialog (can be `asChild`).
 - `AlertDialogContent`: The dialog content container.
 - `AlertDialogHeader` / `AlertDialogFooter`: Layout sections for content and actions.
 - `AlertDialogTitle` / `AlertDialogDescription`: Title and supporting description.
 - `AlertDialogAction`: Primary action button.
 - `AlertDialogCancel`: Secondary cancel button.
 - `AlertDialogPortal`, `AlertDialogOverlay`: Portal and overlay elements.
 
 ---
 
 ## Behavior
 
 - **Focus management**: Traps focus within the dialog, returns focus on close.
 - **Accessibility**: Proper ARIA roles and keyboard interactions (Esc to close).
 - **Composability**: Use any button (e.g., `Button`) with `AlertDialogTrigger asChild`.
 
 ---
 
 ## Examples
 
 ### Basic
 
 ```tsx
 import {
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "laif-ds";
 import { Button } from "laif-ds";
 
 export function BasicAlertDialog() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
         <Button variant="outline">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
           <AlertDialogDescription>
             This action cannot be undone. This will permanently delete your account and remove your data from our servers.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
           <AlertDialogAction>Continue</AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
   );
 }
 ```
 
 ### Controlled
 
 ```tsx
 import { useState } from "react";
 import {
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
 } from "laif-ds";
 import { Button } from "laif-ds";
 
 export function ControlledAlertDialog() {
   const [open, setOpen] = useState(false);
 
   return (
     <>
       <Button onClick={() => setOpen(true)}>Open dialog</Button>
       <AlertDialog open={open} onOpenChange={setOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>Confirm action</AlertDialogTitle>
             <AlertDialogDescription>Are you sure you want to proceed?</AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel onClick={() => setOpen(false)}>Cancel</AlertDialogCancel>
             <AlertDialogAction onClick={() => setOpen(false)}>Confirm</AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </>
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Styling**: `AlertDialogContent` is centered and responsive; customize with `className`.
 - **Overlay**: `AlertDialogOverlay` provides a backdrop with fade animations.
 - **Buttons**: `AlertDialogAction` uses default button styles; pass `className` to adjust.