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