<!-- source-hash: f32246d114b706570b821cefac3455d9 -->
A custom client-side Dialog component system built without external libraries, providing a controlled modal overlay with backdrop blur, centered content panel, and composable sub-components.

## Key Components

| Component | Description |
|-----------|-------------|
| `Dialog` | Root container; renders a full-screen backdrop when `open` is `true`, closes on overlay click |
| `DialogTrigger` | Button wrapper to programmatically open the dialog |
| `DialogPortal` | Passthrough wrapper for portaling children (inline, no actual portal) |
| `DialogOverlay` | Standalone backdrop overlay with blur effect |
| `DialogClose` | Generic close button element |
| `DialogContent` | Centered modal panel (`z-[10000]`) with built-in close (`X`) icon button and click-stop propagation |
| `DialogHeader` | Flex column layout for title/description grouping |
| `DialogFooter` | Responsive footer with reversed column on mobile, row on desktop |
| `DialogTitle` | Styled `<h2>` for the modal heading |
| `DialogDescription` | Styled `<p>` for supporting modal text |

## Usage Example

```typescript
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogTrigger,
} from "./dialog"

export function ConfirmModal() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <DialogTrigger onClick={() => setOpen(true)}>
        Open Modal
      </DialogTrigger>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent onCloseClick={() => setOpen(false)}>
          <DialogHeader>
            <DialogTitle>Confirm Action</DialogTitle>
            <DialogDescription>
              Are you sure you want to proceed?
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <button onClick={() => setOpen(false)}>Cancel</button>
            <button onClick={() => setOpen(false)}>Confirm</button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}
```

> **Note:** `DialogContent` uses `onCloseClick` (not the standard `onClose`) for the built-in `X` button handler. Backdrop clicks are handled by the root `Dialog` via `onOpenChange`.