bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
32 lines (31 loc) • 1.31 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utils.js";
import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "../ui/dialog.js";
/**
* Modal component built on shadcn/ui Dialog
*
* Features:
* ✅ Built-in focus trapping and restoration
* ✅ Improved escape key handling
* ✅ Better screen reader support
* ✅ Portal rendering for z-index control
* ✅ shadcn/ui styling with Tailwind
* ✅ Proper ARIA attributes
*
* @param isOpen - Whether the modal is open
* @param onClose - Called when the modal should be closed
* @param title - Modal title for accessibility
* @param children - Modal content
* @param size - Modal size preset
* @param className - Additional CSS classes
*/
export function Modal({ isOpen, onClose, title, children, size = "md", className = "", }) {
const sizeClasses = {
sm: "max-w-sm",
md: "max-w-md",
lg: "max-w-lg",
xl: "max-w-xl",
};
return (_jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: _jsxs(DialogContent, { className: cn(sizeClasses[size], "max-h-[90vh] overflow-y-auto", className), children: [title && (_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: title }) })), children] }) }));
}