@adamosuiteservices/ui 2.13.4 → 2.14.0

package/docs/components/ui/dialog.md

@@ -1,628 +1,628 @@
-# Dialog
-
-Ventana modal centrada sobre overlay semi-transparente, basada en Radix UI. Soporta formularios, confirmaciones, información, y acciones. Útil para capturar atención del usuario en tareas críticas.
-
-## Importación
-
-```tsx
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogBody,
-  DialogFooter,
-  DialogClose,
-  DialogOverlay,
-  DialogPortal,
-} from "@adamosuiteservices/ui/dialog";
-```
-
-## Anatomía
-
-```tsx
-<Dialog>
-  <DialogTrigger>Open Dialog</DialogTrigger>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>Title</DialogTitle>
-      <DialogDescription>Description text</DialogDescription>
-    </DialogHeader>
-    <DialogBody>{/* Main content */}</DialogBody>
-    <DialogFooter>
-      <DialogClose asChild>
-        <Button variant="outline">Cancel</Button>
-      </DialogClose>
-      <Button>Confirm</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
-
-**Componentes**: 10 (Dialog, Trigger, Content, Header, Title, Description, Body, Footer, Close, Overlay, Portal)
-
-## Props Principales
-
-### Dialog (Root)
-
-| Prop           | Tipo                      | Default | Descripción                               |
-| -------------- | ------------------------- | ------- | ----------------------------------------- |
-| `open`         | `boolean`                 | -       | Estado controlado del dialog              |
-| `onOpenChange` | `(open: boolean) => void` | -       | Callback cuando cambia estado             |
-| `defaultOpen`  | `boolean`                 | `false` | Estado inicial no controlado              |
-| `modal`        | `boolean`                 | `true`  | Bloquea interacción con contenido externo |
-
-### DialogTrigger
-
-| Prop        | Tipo      | Descripción                                        |
-| ----------- | --------- | -------------------------------------------------- |
-| `asChild`   | `boolean` | Pasa props al child en lugar de renderizar wrapper |
-| `className` | `string`  | Clases CSS adicionales                             |
-
-### DialogContent
-
-| Prop                   | Tipo              | Default | Descripción                                             |
-| ---------------------- | ----------------- | ------- | ------------------------------------------------------- |
-| `showCloseButton`      | `boolean`         | `true`  | Muestra botón X en esquina superior derecha             |
-| `theme`                | `Theme`           | -       | Tema personalizado (default, dark, pay, sign, risk, id) |
-| `className`            | `string`          | -       | Clases CSS adicionales                                  |
-| `onEscapeKeyDown`      | `(event) => void` | -       | Callback al presionar Escape                            |
-| `onPointerDownOutside` | `(event) => void` | -       | Callback al hacer clic fuera                            |
-| `onInteractOutside`    | `(event) => void` | -       | Callback al interactuar fuera                           |
-
-**Estilos default**: `max-w-lg`, `max-w-[calc(100%-2rem)]` en mobile, centrado, `rounded-lg`, `p-6`, `shadow-lg`
-
-### DialogTitle
-
-| Prop        | Tipo     | Descripción            |
-| ----------- | -------- | ---------------------- |
-| `className` | `string` | Clases CSS adicionales |
-
-**Estilos**: `text-lg`, `font-semibold`, `leading-none`
-
-### DialogDescription
-
-| Prop        | Tipo     | Descripción            |
-| ----------- | -------- | ---------------------- |
-| `className` | `string` | Clases CSS adicionales |
-
-**Estilos**: `text-sm`, `text-muted-foreground`
-
-### DialogBody
-
-| Prop        | Tipo     | Descripción            |
-| ----------- | -------- | ---------------------- |
-| `className` | `string` | Clases CSS adicionales |
-
-**Estilos**: `mt-2 mb-6`  
-**Propósito**: Contenedor para el contenido principal del dialog entre el header y footer. Proporciona espaciado vertical consistente.
-
-### DialogHeader
-
-| Prop        | Tipo     | Descripción            |
-| ----------- | -------- | ---------------------- |
-| `className` | `string` | Clases CSS adicionales |
-
-**Estilos**: `flex flex-col gap-2`, `text-center` en mobile, `sm:text-left`
-
-### DialogFooter
-
-| Prop        | Tipo     | Descripción            |
-| ----------- | -------- | ---------------------- |
-| `className` | `string` | Clases CSS adicionales |
-
-**Estilos**: `flex-col-reverse` en mobile, `sm:flex-row sm:justify-end`, `gap-2`
-
-### DialogClose
-
-| Prop        | Tipo      | Descripción                                       |
-| ----------- | --------- | ------------------------------------------------- |
-| `asChild`   | `boolean` | Pasa props al child en lugar de renderizar button |
-| `className` | `string`  | Clases CSS adicionales                            |
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-<Dialog>
-  <DialogTrigger>Open</DialogTrigger>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>Are you absolutely sure?</DialogTitle>
-      <DialogDescription>
-        This action cannot be undone. This will permanently delete your account.
-      </DialogDescription>
-    </DialogHeader>
-  </DialogContent>
-</Dialog>
-```
-
-### Con Trigger Custom (asChild)
-
-```tsx
-<Dialog>
-  <DialogTrigger asChild>
-    <Button variant="outline">Edit Profile</Button>
-  </DialogTrigger>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>Edit Profile</DialogTitle>
-      <DialogDescription>Make changes to your profile here.</DialogDescription>
-    </DialogHeader>
-  </DialogContent>
-</Dialog>
-```
-
-### Formulario de Edición
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-import { Input } from "@adamosuiteservices/ui/input";
-import { Label } from "@adamosuiteservices/ui/label";
-
-<Dialog>
-  <DialogTrigger asChild>
-    <Button variant="outline">Edit Profile</Button>
-  </DialogTrigger>
-  <DialogContent className="sm:max-w-[425px]">
-    <DialogHeader>
-      <DialogTitle>Edit profile</DialogTitle>
-      <DialogDescription>
-        Make changes to your profile here. Click save when you're done.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody className="grid gap-4">
-      <div className="grid grid-cols-4 items-center gap-4">
-        <Label htmlFor="name" className="text-right">
-          Name
-        </Label>
-        <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
-      </div>
-      <div className="grid grid-cols-4 items-center gap-4">
-        <Label htmlFor="username" className="text-right">
-          Username
-        </Label>
-        <Input id="username" defaultValue="@peduarte" className="col-span-3" />
-      </div>
-    </DialogBody>
-    <DialogFooter>
-      <Button type="submit">
-        <Icon symbol="save" />
-        Save changes
-      </Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>;
-```
-
-### Compartir Link
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<Dialog>
-  <DialogTrigger asChild>
-    <Button variant="outline">
-      <Icon symbol="share" />
-      Share
-    </Button>
-  </DialogTrigger>
-  <DialogContent className="sm:max-w-md">
-    <DialogHeader>
-      <DialogTitle>Share link</DialogTitle>
-      <DialogDescription>
-        Anyone who has this link will be able to view this.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody className="flex items-center space-x-2">
-      <div className="grid flex-1 gap-2">
-        <Label htmlFor="link" className="sr-only">
-          Link
-        </Label>
-        <Input
-          id="link"
-          defaultValue="https://ui.shadcn.com/docs/installation"
-          readOnly
-        />
-      </div>
-      <Button type="submit" size="sm" className="px-3">
-        <Icon symbol="content_copy" />
-      </Button>
-    </DialogBody>
-    <DialogFooter className="sm:justify-start">
-      <DialogClose asChild>
-        <Button type="button" variant="secondary">
-          Close
-        </Button>
-      </DialogClose>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>;
-```
-
-### Confirmación de Eliminación
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-import { Checkbox } from "@adamosuiteservices/ui/checkbox";
-
-<Dialog>
-  <DialogTrigger asChild>
-    <Button variant="destructive">
-      <Icon symbol="delete" />
-      Delete Account
-    </Button>
-  </DialogTrigger>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>Delete Account</DialogTitle>
-      <DialogDescription>
-        This action cannot be undone. This will permanently delete your account
-        and remove all of your data from our servers.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody>
-      <Label className="flex items-center gap-2 text-sm">
-        <Checkbox />I understand that this action is irreversible
-      </Label>
-    </DialogBody>
-    <DialogFooter>
-      <DialogClose asChild>
-        <Button variant="outline">Cancel</Button>
-      </DialogClose>
-      <Button variant="destructive">
-        <Icon symbol="delete" />
-        Delete Account
-      </Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>;
-```
-
-### Crear Proyecto
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<Dialog>
-  <DialogTrigger asChild>
-    <Button>
-      <Icon symbol="add" />
-      New Project
-    </Button>
-  </DialogTrigger>
-  <DialogContent className="sm:max-w-[425px]">
-    <DialogHeader>
-      <DialogTitle>Create Project</DialogTitle>
-      <DialogDescription>
-        Create a new project to get started. You can always change these
-        settings later.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody className="grid gap-4">
-      <div className="grid gap-2">
-        <Label htmlFor="project-name">Project Name</Label>
-        <Input id="project-name" placeholder="My Awesome Project" />
-      </div>
-      <div className="grid gap-2">
-        <Label htmlFor="description">Description</Label>
-        <Input id="description" placeholder="Brief description" />
-      </div>
-      <div className="grid gap-2">
-        <Label htmlFor="repository">Repository URL (optional)</Label>
-        <Input id="repository" placeholder="https://github.com/username/repo" />
-      </div>
-      <div className="flex items-center space-x-2">
-        <Checkbox id="public" />
-        <Label htmlFor="public" className="text-sm">
-          Make this project public
-        </Label>
-      </div>
-    </DialogBody>
-    <DialogFooter>
-      <DialogClose asChild>
-        <Button variant="outline">Cancel</Button>
-      </DialogClose>
-      <Button type="submit">
-        <Icon symbol="add" />
-        Create Project
-      </Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>;
-```
-
-### Ver Detalles (Read-only)
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<Dialog>
-  <DialogTrigger asChild>
-    <Button variant="outline">
-      <Icon symbol="person" />
-      View Details
-    </Button>
-  </DialogTrigger>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>User Details</DialogTitle>
-      <DialogDescription>
-        View detailed information about this user account.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody className="space-y-4">
-      <div className="grid grid-cols-3 gap-4">
-        <div className="font-medium">Name:</div>
-        <div className="col-span-2">John Doe</div>
-      </div>
-      <div className="grid grid-cols-3 gap-4">
-        <div className="font-medium">Email:</div>
-        <div className="col-span-2">john.doe@example.com</div>
-      </div>
-      <div className="grid grid-cols-3 gap-4">
-        <div className="font-medium">Role:</div>
-        <div className="col-span-2">Administrator</div>
-      </div>
-      <div className="grid grid-cols-3 gap-4">
-        <div className="font-medium">Joined:</div>
-        <div className="col-span-2">January 15, 2024</div>
-      </div>
-      <div className="grid grid-cols-3 gap-4">
-        <div className="font-medium">Last Active:</div>
-        <div className="col-span-2">2 hours ago</div>
-      </div>
-    </DialogBody>
-    <DialogFooter>
-      <DialogClose asChild>
-        <Button variant="outline">Close</Button>
-      </DialogClose>
-      <Button>
-        <Icon symbol="person" />
-        Edit User
-      </Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>;
-```
-
-### Información Estructurada
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<Dialog>
-  <DialogTrigger asChild>
-    <Button variant="outline">
-      <Icon symbol="info" />
-      More Info
-    </Button>
-  </DialogTrigger>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>Important Information</DialogTitle>
-      <DialogDescription>
-        Please read the following information carefully before proceeding.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody className="space-y-4 text-sm">
-      <div>
-        <h4 className="font-medium mb-2">Data Processing</h4>
-        <p className="text-muted-foreground">
-          Your data will be processed according to our privacy policy. We ensure
-          full compliance with GDPR and other data protection regulations.
-        </p>
-      </div>
-      <div>
-        <h4 className="font-medium mb-2">Security</h4>
-        <p className="text-muted-foreground">
-          All data is encrypted both in transit and at rest using
-          industry-standard encryption protocols.
-        </p>
-      </div>
-      <div>
-        <h4 className="font-medium mb-2">Support</h4>
-        <p className="text-muted-foreground">
-          If you have any questions or concerns, please contact our support team
-          at support@example.com.
-        </p>
-      </div>
-    </DialogBody>
-    <DialogFooter>
-      <DialogClose asChild>
-        <Button>Got it</Button>
-      </DialogClose>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>;
-```
-
-### Sin Botón de Cerrar
-
-```tsx
-<Dialog>
-  <DialogTrigger asChild>
-    <Button variant="outline">Open (No X)</Button>
-  </DialogTrigger>
-  <DialogContent showCloseButton={false}>
-    <DialogHeader>
-      <DialogTitle>Custom Close Behavior</DialogTitle>
-      <DialogDescription>
-        This dialog doesn't have the X button. You must use the action buttons.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody>
-      <p className="text-sm text-muted-foreground">
-        This pattern is useful when you want to force users to make a deliberate
-        choice rather than accidentally closing the dialog.
-      </p>
-    </DialogBody>
-    <DialogFooter>
-      <DialogClose asChild>
-        <Button variant="outline">Cancel</Button>
-      </DialogClose>
-      <DialogClose asChild>
-        <Button>Confirm</Button>
-      </DialogClose>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
-
-**Uso**: Forzar decisión deliberada, prevenir cierre accidental
-
-### Controlado
-
-```tsx
-import { useState } from "react";
-
-function App() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger>Open Dialog</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Controlled Dialog</DialogTitle>
-        </DialogHeader>
-        <Button onClick={() => setOpen(false)}>Close Programmatically</Button>
-      </DialogContent>
-    </Dialog>
-  );
-}
-```
-
-### Con Tema Custom
-
-```tsx
-<DialogContent theme="dark">
-  <DialogHeader>
-    <DialogTitle>Dark Theme Dialog</DialogTitle>
-    <DialogDescription>This dialog uses a custom theme.</DialogDescription>
-  </DialogHeader>
-</DialogContent>
-```
-
-**Temas disponibles**: `default`, `dark`, `pay`, `sign`, `risk`, `id`
-
-## Casos de Uso Comunes
-
-**Formularios de edición**: Edit profile, settings, preferences  
-**Confirmaciones destructivas**: Delete account, remove items, clear data  
-**Crear nuevos items**: New project, add user, create record  
-**Compartir contenido**: Share links, export data, send invitations  
-**Ver detalles**: User info, product details, transaction summary  
-**Información**: Disclaimers, terms, help content
-
-## Estados y Data Attributes
-
-### Dialog States
-
-- **Open**: `data-[state=open]` → animaciones de entrada
-- **Closed**: `data-[state=closed]` → animaciones de salida
-
-### Overlay Animations
-
-- **Opening**: `fade-in-0`
-- **Closing**: `fade-out-0`
-
-### Content Animations
-
-- **Opening**: `fade-in-0`, `zoom-in-95`
-- **Closing**: `fade-out-0`, `zoom-out-95`
-- **Duration**: `200ms`
-
-## Navegación por Teclado
-
-- ✅ **Escape**: Cierra el dialog (previene con `onEscapeKeyDown`)
-- ✅ **Tab**: Navega entre elementos focusables dentro del dialog
-- ✅ **Shift+Tab**: Navegación inversa
-- ✅ **Enter**: Activa botón/elemento enfocado
-
-## Accesibilidad
-
-- ✅ **ARIA**: `role="dialog"`, `aria-labelledby` (title), `aria-describedby` (description)
-- ✅ **Focus trap**: Focus queda dentro del dialog mientras está abierto
-- ✅ **Focus restoration**: Focus vuelve al trigger al cerrar
-- ✅ **Screen readers**: Anuncia título, descripción, y contenido
-- ✅ **Keyboard navigation**: Completamente navegable por teclado
-- ✅ **Close button**: `aria-label="Close"` en botón X
-- ✅ **Modal behavior**: Bloquea interacción con contenido externo
-
-## Notas de Implementación
-
-- **Basado en Radix UI**: `@radix-ui/react-dialog`
-- **Portal rendering**: Content se renderiza en `document.body`
-- **Overlay**: `bg-black/50`, `fixed inset-0`, `z-50`
-- **Centrado**: `top-[50%] left-[50%]`, `translate-x-[-50%] translate-y-[-50%]`
-- **Responsive**: `max-w-[calc(100%-2rem)]` en mobile, `sm:max-w-lg` en desktop
-- **Close button**: XIcon automático en esquina superior derecha si `showCloseButton={true}`
-- **Auto-close**: Cierra con Escape, clic fuera, o DialogClose
-- **Focus management**: Primer elemento focusable recibe focus al abrir
-- **Theme support**: Prop `theme` aplica `data-theme` al content
-- **Z-index**: 50 para overlay y content
-
-## Responsive Behavior
-
-### Mobile
-
-- `max-w-[calc(100%-2rem)]`: Margen de 1rem a cada lado
-- `text-center`: Header centrado
-- `flex-col-reverse`: Footer con botones apilados (Confirm arriba, Cancel abajo)
-
-### Desktop (sm+)
-
-- `sm:max-w-lg`: Ancho máximo 32rem
-- `sm:text-left`: Header alineado a izquierda
-- `sm:flex-row sm:justify-end`: Footer horizontal con botones a la derecha
-
-## Customización de Ancho
-
-```tsx
-{
-  /* Small dialog */
-}
-<DialogContent className="sm:max-w-md">...</DialogContent>;
-
-{
-  /* Medium (default) */
-}
-<DialogContent className="sm:max-w-lg">...</DialogContent>;
-
-{
-  /* Large */
-}
-<DialogContent className="sm:max-w-2xl">...</DialogContent>;
-
-{
-  /* Extra large */
-}
-<DialogContent className="sm:max-w-4xl">...</DialogContent>;
-
-{
-  /* Full width with margin */
-}
-<DialogContent className="sm:max-w-[90vw]">...</DialogContent>;
-```
-
-## Troubleshooting
-
-**Dialog no cierra con Escape**: Verifica que no estés previniendo evento con `onEscapeKeyDown`  
-**Dialog no cierra al hacer clic fuera**: Verifica `onPointerDownOutside` o `modal={false}`  
-**Focus no vuelve al trigger**: Asegúrate de que el trigger sigue en el DOM  
-**Scroll bloqueado después de cerrar**: Radix maneja esto automáticamente, verifica conflictos con CSS  
-**Content no centrado**: Evita `transform` CSS en elementos padre que afecten positioning  
-**Animaciones no funcionan**: Verifica que `@tailwindcss/animate` esté instalado  
-**Botón X no aparece**: Verifica `showCloseButton={true}` (default)  
-**Overlay no oscurece**: Z-index conflict, aumenta z-index del overlay  
-**Title/Description no anunciados**: Asegúrate de usar componentes DialogTitle y DialogDescription (no divs)
-
-## Referencias
-
-- **Radix UI Dialog**: https://www.radix-ui.com/primitives/docs/components/dialog
-- **shadcn/ui Dialog**: https://ui.shadcn.com/docs/components/dialog
-- **ARIA Dialog Pattern**: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+# Dialog
+
+Ventana modal centrada sobre overlay semi-transparente, basada en Radix UI. Soporta formularios, confirmaciones, información, y acciones. Útil para capturar atención del usuario en tareas críticas.
+
+## Importación
+
+```tsx
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+  DialogClose,
+  DialogOverlay,
+  DialogPortal,
+} from "@adamosuiteservices/ui/dialog";
+```
+
+## Anatomía
+
+```tsx
+<Dialog>
+  <DialogTrigger>Open Dialog</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Title</DialogTitle>
+      <DialogDescription>Description text</DialogDescription>
+    </DialogHeader>
+    <DialogBody>{/* Main content */}</DialogBody>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="outline">Cancel</Button>
+      </DialogClose>
+      <Button>Confirm</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+**Componentes**: 10 (Dialog, Trigger, Content, Header, Title, Description, Body, Footer, Close, Overlay, Portal)
+
+## Props Principales
+
+### Dialog (Root)
+
+| Prop           | Tipo                      | Default | Descripción                               |
+| -------------- | ------------------------- | ------- | ----------------------------------------- |
+| `open`         | `boolean`                 | -       | Estado controlado del dialog              |
+| `onOpenChange` | `(open: boolean) => void` | -       | Callback cuando cambia estado             |
+| `defaultOpen`  | `boolean`                 | `false` | Estado inicial no controlado              |
+| `modal`        | `boolean`                 | `true`  | Bloquea interacción con contenido externo |
+
+### DialogTrigger
+
+| Prop        | Tipo      | Descripción                                        |
+| ----------- | --------- | -------------------------------------------------- |
+| `asChild`   | `boolean` | Pasa props al child en lugar de renderizar wrapper |
+| `className` | `string`  | Clases CSS adicionales                             |
+
+### DialogContent
+
+| Prop                   | Tipo              | Default | Descripción                                             |
+| ---------------------- | ----------------- | ------- | ------------------------------------------------------- |
+| `showCloseButton`      | `boolean`         | `true`  | Muestra botón X en esquina superior derecha             |
+| `theme`                | `Theme`           | -       | Tema personalizado (default, dark, pay, sign, risk, id) |
+| `className`            | `string`          | -       | Clases CSS adicionales                                  |
+| `onEscapeKeyDown`      | `(event) => void` | -       | Callback al presionar Escape                            |
+| `onPointerDownOutside` | `(event) => void` | -       | Callback al hacer clic fuera                            |
+| `onInteractOutside`    | `(event) => void` | -       | Callback al interactuar fuera                           |
+
+**Estilos default**: `max-w-lg`, `max-w-[calc(100%-2rem)]` en mobile, centrado, `rounded-lg`, `p-6`, `shadow-lg`
+
+### DialogTitle
+
+| Prop        | Tipo     | Descripción            |
+| ----------- | -------- | ---------------------- |
+| `className` | `string` | Clases CSS adicionales |
+
+**Estilos**: `text-lg`, `font-semibold`, `leading-none`
+
+### DialogDescription
+
+| Prop        | Tipo     | Descripción            |
+| ----------- | -------- | ---------------------- |
+| `className` | `string` | Clases CSS adicionales |
+
+**Estilos**: `text-sm`, `text-muted-foreground`
+
+### DialogBody
+
+| Prop        | Tipo     | Descripción            |
+| ----------- | -------- | ---------------------- |
+| `className` | `string` | Clases CSS adicionales |
+
+**Estilos**: `mt-2 mb-6`  
+**Propósito**: Contenedor para el contenido principal del dialog entre el header y footer. Proporciona espaciado vertical consistente.
+
+### DialogHeader
+
+| Prop        | Tipo     | Descripción            |
+| ----------- | -------- | ---------------------- |
+| `className` | `string` | Clases CSS adicionales |
+
+**Estilos**: `flex flex-col gap-2`, `text-center` en mobile, `sm:text-left`
+
+### DialogFooter
+
+| Prop        | Tipo     | Descripción            |
+| ----------- | -------- | ---------------------- |
+| `className` | `string` | Clases CSS adicionales |
+
+**Estilos**: `flex-col-reverse` en mobile, `sm:flex-row sm:justify-end`, `gap-2`
+
+### DialogClose
+
+| Prop        | Tipo      | Descripción                                       |
+| ----------- | --------- | ------------------------------------------------- |
+| `asChild`   | `boolean` | Pasa props al child en lugar de renderizar button |
+| `className` | `string`  | Clases CSS adicionales                            |
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+<Dialog>
+  <DialogTrigger>Open</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account.
+      </DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+```
+
+### Con Trigger Custom (asChild)
+
+```tsx
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">Edit Profile</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Edit Profile</DialogTitle>
+      <DialogDescription>Make changes to your profile here.</DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+```
+
+### Formulario de Edición
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+import { Input } from "@adamosuiteservices/ui/input";
+import { Label } from "@adamosuiteservices/ui/label";
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">Edit Profile</Button>
+  </DialogTrigger>
+  <DialogContent className="sm:max-w-[425px]">
+    <DialogHeader>
+      <DialogTitle>Edit profile</DialogTitle>
+      <DialogDescription>
+        Make changes to your profile here. Click save when you're done.
+      </DialogDescription>
+    </DialogHeader>
+    <DialogBody className="grid gap-4">
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="name" className="text-right">
+          Name
+        </Label>
+        <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
+      </div>
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="username" className="text-right">
+          Username
+        </Label>
+        <Input id="username" defaultValue="@peduarte" className="col-span-3" />
+      </div>
+    </DialogBody>
+    <DialogFooter>
+      <Button type="submit">
+        <Icon symbol="save" />
+        Save changes
+      </Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>;
+```
+
+### Compartir Link
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">
+      <Icon symbol="share" />
+      Share
+    </Button>
+  </DialogTrigger>
+  <DialogContent className="sm:max-w-md">
+    <DialogHeader>
+      <DialogTitle>Share link</DialogTitle>
+      <DialogDescription>
+        Anyone who has this link will be able to view this.
+      </DialogDescription>
+    </DialogHeader>
+    <DialogBody className="flex items-center space-x-2">
+      <div className="grid flex-1 gap-2">
+        <Label htmlFor="link" className="sr-only">
+          Link
+        </Label>
+        <Input
+          id="link"
+          defaultValue="https://ui.shadcn.com/docs/installation"
+          readOnly
+        />
+      </div>
+      <Button type="submit" size="sm" className="px-3">
+        <Icon symbol="content_copy" />
+      </Button>
+    </DialogBody>
+    <DialogFooter className="sm:justify-start">
+      <DialogClose asChild>
+        <Button type="button" variant="secondary">
+          Close
+        </Button>
+      </DialogClose>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>;
+```
+
+### Confirmación de Eliminación
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+import { Checkbox } from "@adamosuiteservices/ui/checkbox";
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="destructive">
+      <Icon symbol="delete" />
+      Delete Account
+    </Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Delete Account</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove all of your data from our servers.
+      </DialogDescription>
+    </DialogHeader>
+    <DialogBody>
+      <Label className="flex items-center gap-2 text-sm">
+        <Checkbox />I understand that this action is irreversible
+      </Label>
+    </DialogBody>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="outline">Cancel</Button>
+      </DialogClose>
+      <Button variant="destructive">
+        <Icon symbol="delete" />
+        Delete Account
+      </Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>;
+```
+
+### Crear Proyecto
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button>
+      <Icon symbol="add" />
+      New Project
+    </Button>
+  </DialogTrigger>
+  <DialogContent className="sm:max-w-[425px]">
+    <DialogHeader>
+      <DialogTitle>Create Project</DialogTitle>
+      <DialogDescription>
+        Create a new project to get started. You can always change these
+        settings later.
+      </DialogDescription>
+    </DialogHeader>
+    <DialogBody className="grid gap-4">
+      <div className="grid gap-2">
+        <Label htmlFor="project-name">Project Name</Label>
+        <Input id="project-name" placeholder="My Awesome Project" />
+      </div>
+      <div className="grid gap-2">
+        <Label htmlFor="description">Description</Label>
+        <Input id="description" placeholder="Brief description" />
+      </div>
+      <div className="grid gap-2">
+        <Label htmlFor="repository">Repository URL (optional)</Label>
+        <Input id="repository" placeholder="https://github.com/username/repo" />
+      </div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="public" />
+        <Label htmlFor="public" className="text-sm">
+          Make this project public
+        </Label>
+      </div>
+    </DialogBody>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="outline">Cancel</Button>
+      </DialogClose>
+      <Button type="submit">
+        <Icon symbol="add" />
+        Create Project
+      </Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>;
+```
+
+### Ver Detalles (Read-only)
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">
+      <Icon symbol="person" />
+      View Details
+    </Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>User Details</DialogTitle>
+      <DialogDescription>
+        View detailed information about this user account.
+      </DialogDescription>
+    </DialogHeader>
+    <DialogBody className="space-y-4">
+      <div className="grid grid-cols-3 gap-4">
+        <div className="font-medium">Name:</div>
+        <div className="col-span-2">John Doe</div>
+      </div>
+      <div className="grid grid-cols-3 gap-4">
+        <div className="font-medium">Email:</div>
+        <div className="col-span-2">john.doe@example.com</div>
+      </div>
+      <div className="grid grid-cols-3 gap-4">
+        <div className="font-medium">Role:</div>
+        <div className="col-span-2">Administrator</div>
+      </div>
+      <div className="grid grid-cols-3 gap-4">
+        <div className="font-medium">Joined:</div>
+        <div className="col-span-2">January 15, 2024</div>
+      </div>
+      <div className="grid grid-cols-3 gap-4">
+        <div className="font-medium">Last Active:</div>
+        <div className="col-span-2">2 hours ago</div>
+      </div>
+    </DialogBody>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="outline">Close</Button>
+      </DialogClose>
+      <Button>
+        <Icon symbol="person" />
+        Edit User
+      </Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>;
+```
+
+### Información Estructurada
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">
+      <Icon symbol="info" />
+      More Info
+    </Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Important Information</DialogTitle>
+      <DialogDescription>
+        Please read the following information carefully before proceeding.
+      </DialogDescription>
+    </DialogHeader>
+    <DialogBody className="space-y-4 text-sm">
+      <div>
+        <h4 className="font-medium mb-2">Data Processing</h4>
+        <p className="text-muted-foreground">
+          Your data will be processed according to our privacy policy. We ensure
+          full compliance with GDPR and other data protection regulations.
+        </p>
+      </div>
+      <div>
+        <h4 className="font-medium mb-2">Security</h4>
+        <p className="text-muted-foreground">
+          All data is encrypted both in transit and at rest using
+          industry-standard encryption protocols.
+        </p>
+      </div>
+      <div>
+        <h4 className="font-medium mb-2">Support</h4>
+        <p className="text-muted-foreground">
+          If you have any questions or concerns, please contact our support team
+          at support@example.com.
+        </p>
+      </div>
+    </DialogBody>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button>Got it</Button>
+      </DialogClose>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>;
+```
+
+### Sin Botón de Cerrar
+
+```tsx
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">Open (No X)</Button>
+  </DialogTrigger>
+  <DialogContent showCloseButton={false}>
+    <DialogHeader>
+      <DialogTitle>Custom Close Behavior</DialogTitle>
+      <DialogDescription>
+        This dialog doesn't have the X button. You must use the action buttons.
+      </DialogDescription>
+    </DialogHeader>
+    <DialogBody>
+      <p className="text-sm text-muted-foreground">
+        This pattern is useful when you want to force users to make a deliberate
+        choice rather than accidentally closing the dialog.
+      </p>
+    </DialogBody>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="outline">Cancel</Button>
+      </DialogClose>
+      <DialogClose asChild>
+        <Button>Confirm</Button>
+      </DialogClose>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+**Uso**: Forzar decisión deliberada, prevenir cierre accidental
+
+### Controlado
+
+```tsx
+import { useState } from "react";
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger>Open Dialog</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Controlled Dialog</DialogTitle>
+        </DialogHeader>
+        <Button onClick={() => setOpen(false)}>Close Programmatically</Button>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+### Con Tema Custom
+
+```tsx
+<DialogContent theme="dark">
+  <DialogHeader>
+    <DialogTitle>Dark Theme Dialog</DialogTitle>
+    <DialogDescription>This dialog uses a custom theme.</DialogDescription>
+  </DialogHeader>
+</DialogContent>
+```
+
+**Temas disponibles**: `default`, `dark`, `pay`, `sign`, `risk`, `id`
+
+## Casos de Uso Comunes
+
+**Formularios de edición**: Edit profile, settings, preferences  
+**Confirmaciones destructivas**: Delete account, remove items, clear data  
+**Crear nuevos items**: New project, add user, create record  
+**Compartir contenido**: Share links, export data, send invitations  
+**Ver detalles**: User info, product details, transaction summary  
+**Información**: Disclaimers, terms, help content
+
+## Estados y Data Attributes
+
+### Dialog States
+
+- **Open**: `data-[state=open]` → animaciones de entrada
+- **Closed**: `data-[state=closed]` → animaciones de salida
+
+### Overlay Animations
+
+- **Opening**: `fade-in-0`
+- **Closing**: `fade-out-0`
+
+### Content Animations
+
+- **Opening**: `fade-in-0`, `zoom-in-95`
+- **Closing**: `fade-out-0`, `zoom-out-95`
+- **Duration**: `200ms`
+
+## Navegación por Teclado
+
+- ✅ **Escape**: Cierra el dialog (previene con `onEscapeKeyDown`)
+- ✅ **Tab**: Navega entre elementos focusables dentro del dialog
+- ✅ **Shift+Tab**: Navegación inversa
+- ✅ **Enter**: Activa botón/elemento enfocado
+
+## Accesibilidad
+
+- ✅ **ARIA**: `role="dialog"`, `aria-labelledby` (title), `aria-describedby` (description)
+- ✅ **Focus trap**: Focus queda dentro del dialog mientras está abierto
+- ✅ **Focus restoration**: Focus vuelve al trigger al cerrar
+- ✅ **Screen readers**: Anuncia título, descripción, y contenido
+- ✅ **Keyboard navigation**: Completamente navegable por teclado
+- ✅ **Close button**: `aria-label="Close"` en botón X
+- ✅ **Modal behavior**: Bloquea interacción con contenido externo
+
+## Notas de Implementación
+
+- **Basado en Radix UI**: `@radix-ui/react-dialog`
+- **Portal rendering**: Content se renderiza en `document.body`
+- **Overlay**: `bg-black/50`, `fixed inset-0`, `z-50`
+- **Centrado**: `top-[50%] left-[50%]`, `translate-x-[-50%] translate-y-[-50%]`
+- **Responsive**: `max-w-[calc(100%-2rem)]` en mobile, `sm:max-w-lg` en desktop
+- **Close button**: XIcon automático en esquina superior derecha si `showCloseButton={true}`
+- **Auto-close**: Cierra con Escape, clic fuera, o DialogClose
+- **Focus management**: Primer elemento focusable recibe focus al abrir
+- **Theme support**: Prop `theme` aplica `data-theme` al content
+- **Z-index**: 50 para overlay y content
+
+## Responsive Behavior
+
+### Mobile
+
+- `max-w-[calc(100%-2rem)]`: Margen de 1rem a cada lado
+- `text-center`: Header centrado
+- `flex-col-reverse`: Footer con botones apilados (Confirm arriba, Cancel abajo)
+
+### Desktop (sm+)
+
+- `sm:max-w-lg`: Ancho máximo 32rem
+- `sm:text-left`: Header alineado a izquierda
+- `sm:flex-row sm:justify-end`: Footer horizontal con botones a la derecha
+
+## Customización de Ancho
+
+```tsx
+{
+  /* Small dialog */
+}
+<DialogContent className="sm:max-w-md">...</DialogContent>;
+
+{
+  /* Medium (default) */
+}
+<DialogContent className="sm:max-w-lg">...</DialogContent>;
+
+{
+  /* Large */
+}
+<DialogContent className="sm:max-w-2xl">...</DialogContent>;
+
+{
+  /* Extra large */
+}
+<DialogContent className="sm:max-w-4xl">...</DialogContent>;
+
+{
+  /* Full width with margin */
+}
+<DialogContent className="sm:max-w-[90vw]">...</DialogContent>;
+```
+
+## Troubleshooting
+
+**Dialog no cierra con Escape**: Verifica que no estés previniendo evento con `onEscapeKeyDown`  
+**Dialog no cierra al hacer clic fuera**: Verifica `onPointerDownOutside` o `modal={false}`  
+**Focus no vuelve al trigger**: Asegúrate de que el trigger sigue en el DOM  
+**Scroll bloqueado después de cerrar**: Radix maneja esto automáticamente, verifica conflictos con CSS  
+**Content no centrado**: Evita `transform` CSS en elementos padre que afecten positioning  
+**Animaciones no funcionan**: Verifica que `@tailwindcss/animate` esté instalado  
+**Botón X no aparece**: Verifica `showCloseButton={true}` (default)  
+**Overlay no oscurece**: Z-index conflict, aumenta z-index del overlay  
+**Title/Description no anunciados**: Asegúrate de usar componentes DialogTitle y DialogDescription (no divs)
+
+## Referencias
+
+- **Radix UI Dialog**: https://www.radix-ui.com/primitives/docs/components/dialog
+- **shadcn/ui Dialog**: https://ui.shadcn.com/docs/components/dialog
+- **ARIA Dialog Pattern**: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/