[
{
"path": ".github/workflows/ci.yml",
"content": "name: CI\n\non:\n pull_request:\n push:\n branches:\n - master\n - main\n\njobs:\n checks:\n name: Checks\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout\n uses: actions/checkout@v5\n\n - name: Setup pnpm\n uses: pnpm/action-setup@v4\n with:\n version: 10.30.0\n\n - name: Setup Node\n uses: actions/setup-node@v5\n with:\n node-version: 24\n cache: pnpm\n\n - name: Install dependencies\n run: pnpm install --frozen-lockfile\n\n - name: Lint\n run: pnpm lint\n\n - name: Typecheck\n run: pnpm typecheck\n\n - name: Test\n run: pnpm test\n\n - name: Build package and demo\n run: pnpm build:all\n"
},
{
"path": ".gitignore",
"content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/**/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/dist\n/lib\n/demo/dist\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\n"
},
{
"path": ".prettierrc",
"content": "{\n \"trailingComma\": \"es5\",\n \"tabWidth\": 2,\n \"semi\": false,\n \"singleQuote\": true,\n \"printWidth\": 100\n}\n"
},
{
"path": ".vscode/settings.json",
"content": "{\n \"git.ignoreLimitWarning\": true\n}\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2020 Hirad Arshadi\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
},
{
"path": "README.md",
"content": "# Reoverlay\n\nA tiny, typed modal manager for React. Reoverlay gives you one top-level\n`ModalContainer` and a small imperative API for opening, stacking, and closing\nmodals from anywhere in your app.\n\n[](https://www.npmjs.com/package/reoverlay)\n[](https://www.npmjs.com/package/reoverlay)\n[](LICENSE)\n\n## Install\n\n```bash\npnpm add reoverlay\n```\n\n```bash\nnpm install reoverlay\nyarn add reoverlay\n```\n\n## Quick Start\n\nMount `ModalContainer` once near the root of your app.\n\n```tsx\nimport { ModalContainer } from 'reoverlay'\n\nexport function App() {\n return (\n <>\n \n \n \n )\n}\n```\n\nCreate a modal. `ModalWrapper` is optional, but it provides the default backdrop,\nanimations, outside-click close behavior, and Escape close behavior.\n\n```tsx\nimport { ModalWrapper, Reoverlay } from 'reoverlay'\nimport 'reoverlay/ModalWrapper.css'\n\ntype ConfirmModalProps = {\n message: string\n onConfirm: () => void\n}\n\nexport function ConfirmModal({ message, onConfirm }: ConfirmModalProps) {\n return (\n \n
{message}
\n \n \n \n )\n}\n```\n\nOpen the modal directly.\n\n```tsx\nimport { Reoverlay } from 'reoverlay'\nimport { ConfirmModal } from './ConfirmModal'\n\nReoverlay.showModal(ConfirmModal, {\n message: 'Delete this post?',\n onConfirm: () => {\n Reoverlay.hideModal()\n },\n})\n```\n\n## Named Modals\n\nYou can configure modal names once and open them later by string. This is useful\nfor app-wide modals, interceptors, and places where importing the modal component\nwould be awkward.\n\n```tsx\nimport { ModalContainer, Reoverlay } from 'reoverlay'\nimport { AuthModal, ConfirmModal } from './modals'\n\nReoverlay.config([\n { name: 'AuthModal', component: AuthModal },\n { name: 'ConfirmModal', component: ConfirmModal },\n])\n\nexport function App() {\n return (\n <>\n \n \n \n )\n}\n```\n\n```tsx\nReoverlay.showModal('ConfirmModal', {\n message: 'Archive this item?',\n})\n```\n\n## API\n\n### `Reoverlay.config(configData)`\n\nRegisters named modals.\n\n```ts\ntype ModalConfigItem = {\n name: string\n component: React.ElementType | React.ReactElement\n}\n```\n\nNames must be unique within a single config call.\n\n### `Reoverlay.showModal(modal, props?)`\n\nShows a modal. `modal` can be a configured string name, a React component, or a\nReact element. `props` are passed to the modal when it renders.\n\n```tsx\nReoverlay.showModal(MyModal, { title: 'Hello' })\nReoverlay.showModal()\nReoverlay.showModal('MyModal', { title: 'Hello' })\n```\n\n### `Reoverlay.hideModal(modalName?)`\n\nHides a modal. When no name is provided, the last visible modal is hidden. When a\nname is provided, that configured modal is hidden.\n\n```ts\nReoverlay.hideModal()\nReoverlay.hideModal('ConfirmModal')\n```\n\n### `Reoverlay.hideAll()`\n\nCloses every active modal.\n\n```ts\nReoverlay.hideAll()\n```\n\n## `ModalWrapper`\n\n`ModalWrapper` is a small default shell. You can skip it and render your own\nmodal UI if you only want Reoverlay's state orchestration.\n\n```tsx\nimport type { ModalWrapperProps } from 'reoverlay'\n```\n\n| Prop | Type | Default |\n| --------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------------------------- |\n| `animation` | `'fade' \\| 'zoom' \\| 'flip' \\| 'door' \\| 'rotate' \\| 'slideUp' \\| 'slideDown' \\| 'slideLeft' \\| 'slideRight'` | `'fade'` |\n| `wrapperClassName` | `string` | `''` |\n| `contentContainerClassName` | `string` | `''` |\n| `onClose` | `(event) => void` | `() => Reoverlay.hideModal()` |\n| `closeOnEscape` | `boolean` | `true` |\n| `aria-label` | `string` | `undefined` |\n| `aria-labelledby` | `string` | `undefined` |\n| `aria-describedby` | `string` | `undefined` |\n| `role` | `'dialog' \\| 'alertdialog'` | `'dialog'` |\n\nThe preferred CSS import is:\n\n```ts\nimport 'reoverlay/ModalWrapper.css'\n```\n\nThe legacy import path is still supported:\n\n```ts\nimport 'reoverlay/lib/ModalWrapper.css'\n```\n\n## Development\n\nThis repo uses pnpm workspaces.\n\n```bash\npnpm install\npnpm dev\n```\n\nUseful scripts:\n\n```bash\npnpm lint\npnpm typecheck\npnpm test\npnpm build:package\npnpm build:demo\npnpm build:all\n```\n\nThe demo lives in `demo/` and builds with Vite for GitHub Pages under\n`/reoverlay/`.\n\n## Release Checklist\n\n1. Update the version in `package.json`.\n2. Run `pnpm install --frozen-lockfile`.\n3. Run `pnpm lint`, `pnpm typecheck`, `pnpm test`, and `pnpm build:all`.\n4. Inspect the package contents with `npm pack --dry-run`.\n5. Publish with `pnpm publish --otp ` if your npm account requires 2FA.\n6. Deploy the demo with `pnpm --filter reoverlay-demo deploy`.\n\n## License\n\n[MIT](LICENSE)\n"
},
{
"path": "demo/index.html",
"content": "\n\n \n \n \n \n Reoverlay demo\n \n \n \n \n \n\n"
},
{
"path": "demo/package.json",
"content": "{\n \"name\": \"reoverlay-demo\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"vite build\",\n \"deploy\": \"vite build && gh-pages -d dist\",\n \"dev\": \"vite --host 0.0.0.0\",\n \"preview\": \"vite preview\",\n \"typecheck\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"reoverlay\": \"workspace:*\",\n \"react\": \"^19.2.5\",\n \"react-dom\": \"^19.2.5\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"typescript\": \"^6.0.3\",\n \"vite\": \"^8.0.10\"\n }\n}\n"
},
{
"path": "demo/src/App.tsx",
"content": "import { ModalContainer, ModalWrapper, Reoverlay, type ModalAnimation } from 'reoverlay'\nimport 'reoverlay/ModalWrapper.css'\n\nimport logo from './assets/logo.svg'\nimport myPhoto from './assets/me.jpeg'\nimport Icon from './Icon'\n\nconst animationTypes: ModalAnimation[] = [\n 'fade',\n 'zoom',\n 'flip',\n 'door',\n 'rotate',\n 'slideUp',\n 'slideDown',\n 'slideLeft',\n 'slideRight',\n]\n\nconst installationCode = `\npnpm add reoverlay\n// or if you prefer npm\nnpm install reoverlay\n`\n\ntype DemoModalProps = {\n animation: ModalAnimation\n}\n\nconst Code = ({ code }: { code: string }) => (\n
\n