Accessible Modal Dialog Component (dialog/dialog.tsx)

A customizable, accessible modal dialog for displaying content or alerts. Use this to capture user attention or provide interactive forms within a web application.

// Source: https://github.com/leon-ai/leon | License: MIT | Copyright 2019-present, Louis Grenard <louis@getleon.ai>
// Provided via justclaw.it.com; keep this notice with the code.
import type { ReactNode } from 'react'
import { useEffect, useId, useState } from 'react'
import { createPortal } from 'react-dom'
import { clsx } from 'clsx'

import { Button, type ButtonVariant } from '@/components/button'

import './dialog.sass'

type DialogRole = 'dialog' | 'alertdialog'
type DialogSize = 'medium' | 'large'

interface DialogAction {
  label: string
  variant?: ButtonVariant
  onClick: () => void
}

interface DialogProps {
  actions?: DialogAction[]
  children?: ReactNode
  closeOnOverlayClick?: boolean
  hideFooter?: boolean
  hideHeader?: boolean
  description?: ReactNode
  open: boolean
 

... (truncated -- full source via MCP)