Accessible Modal Dialog (components/Modal.tsx)

A reusable, accessible modal component with focus trapping and scroll locking. Use this for displaying overlays, confirmation dialogs, or focused content.

// Source: https://github.com/Evil0ctal/Douyin_TikTok_Download_API | License: Apache-2.0 | Copyright You must retain, in the Source form of any Derivative Works
// Provided via justclaw.it.com; keep this notice with the code.
import { Children, useEffect, useId, useRef, type ReactNode } from 'react'
import { createPortal } from 'react-dom'
import { useTranslation } from 'react-i18next'

import { cn } from '@/lib/cn'
import { useFocusTrap } from '@/hooks/useFocusTrap'
import { useScrollLock } from '@/hooks/useScrollLock'

import { CrossIcon } from './Icons'
import styles from './overlay.module.css'

export type ModalSize = 'sm' | 'md' | 'lg' | 'xl'

export interface ModalProps {
  open: boolean
  onClose: () => void
  title: ReactNode
  description?: ReactNode
  footer?: ReactNode
  size?: 

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