bigblocks/dist-registry/components/ui-components-modal.json

Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React

{
  "name": "ui-components-modal",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui-components/Modal.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\nimport {\n\tDialog,\n\tDialogContent,\n\tDialogHeader,\n\tDialogTitle,\n} from \"../ui/dialog.js\";\n\nexport interface ModalProps {\n\tisOpen: boolean;\n\tonClose: () => void;\n\ttitle?: string;\n\tchildren: React.ReactNode;\n\tsize?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n\tclassName?: string;\n}\n\n/**\n * Modal component built on shadcn/ui Dialog\n *\n * Features:\n * ✅ Built-in focus trapping and restoration\n * ✅ Improved escape key handling\n * ✅ Better screen reader support\n * ✅ Portal rendering for z-index control\n * ✅ shadcn/ui styling with Tailwind\n * ✅ Proper ARIA attributes\n *\n * @param isOpen - Whether the modal is open\n * @param onClose - Called when the modal should be closed\n * @param title - Modal title for accessibility\n * @param children - Modal content\n * @param size - Modal size preset\n * @param className - Additional CSS classes\n */\nexport function Modal({\n\tisOpen,\n\tonClose,\n\ttitle,\n\tchildren,\n\tsize = \"md\",\n\tclassName = \"\",\n}: ModalProps) {\n\tconst sizeClasses = {\n\t\tsm: \"max-w-sm\",\n\t\tmd: \"max-w-md\",\n\t\tlg: \"max-w-lg\",\n\t\txl: \"max-w-xl\",\n\t};\n\n\treturn (\n\t\t<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>\n\t\t\t<DialogContent\n\t\t\t\tclassName={cn(\n\t\t\t\t\tsizeClasses[size],\n\t\t\t\t\t\"max-h-[90vh] overflow-y-auto\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{title && (\n\t\t\t\t\t<DialogHeader>\n\t\t\t\t\t\t<DialogTitle>{title}</DialogTitle>\n\t\t\t\t\t</DialogHeader>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/modal.tsx"
    }
  ]
}