{"_id":"@droomwolk/react-a11y-modal","_rev":"5-16b39a64a78bd91e07ecf8c44676db72","name":"@droomwolk/react-a11y-modal","dist-tags":{"latest":"1.0.8"},"versions":{"1.0.2":{"name":"@droomwolk/react-a11y-modal","version":"1.0.2","keywords":["react","modal","a11y","accessibility","dialog","portal"],"author":{"name":"Mickael Beljio","email":"mbeljio@gmail.com"},"license":"MIT","_id":"@droomwolk/react-a11y-modal@1.0.2","maintainers":[{"name":"droomwolk","email":"beljio@hotmail.com"}],"homepage":"https://github.com/Droomwolk/react-a11y-modal#readme","bugs":{"url":"https://github.com/Droomwolk/react-a11y-modal/issues"},"dist":{"shasum":"302a9d733a961e5fcb2e41fbb999791abe53b5e0","tarball":"https://registry.npmjs.org/@droomwolk/react-a11y-modal/-/react-a11y-modal-1.0.2.tgz","fileCount":7,"integrity":"sha512-Nm0A7P7cnXxnXnA5L0VhHGPuaYoPzcqRRDigCoFB5oWWTvCAx0/i8D64PqPpJ6SsMM3w9ohMkGTYcqetfUZZPQ==","signatures":[{"sig":"MEQCIH55MAGkKBCAA2LUGj2PZLGqHC97d1G+L+yaeHywVVsSAiAqnBBG1MUpoI5igbFgevQXMX9K8hf8xOmqdzkWRswSKg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31205},"main":"dist/index.cjs","type":"module","module":"dist/index.mjs","engines":{"node":">=18"},"exports":{".":{"import":"./dist/index.mjs","default":"./dist/index.mjs","require":"./dist/index.cjs"},"./modal.css":"./dist/modal.css","./dist/modal.css":"./dist/modal.css"},"scripts":{"build":"yarn build:js && yarn build:css","build:js":"tsup --config tsup.config.ts","build:css":"mkdir -p dist && cp src/modal.css dist/modal.css","prepublishOnly":"yarn build"},"_npmUser":{"name":"droomwolk","email":"beljio@hotmail.com"},"repository":{"url":"git+https://github.com/Droomwolk/react-a11y-modal.git","type":"git"},"_npmVersion":"10.9.2","description":"Modal React accessible (portail, focus trap, ARIA, clavier) sans dépendances","directories":{},"sideEffects":["*.css","**/*.css"],"_nodeVersion":"23.7.0","dependencies":{"prop-types":"^15.8.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"yarn@4.10.3","devDependencies":{"tsup":"^8.5.0","typescript":"^5.6.3","@types/react":"^19.2.2","@types/react-dom":"^19.2.2"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-a11y-modal_1.0.2_1760919989947_0.93649900516771","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@droomwolk/react-a11y-modal","version":"1.0.3","keywords":["react","modal","a11y","accessibility","dialog","portal"],"author":{"name":"Mickael Beljio","email":"mbeljio@gmail.com"},"license":"MIT","_id":"@droomwolk/react-a11y-modal@1.0.3","maintainers":[{"name":"droomwolk","email":"beljio@hotmail.com"}],"homepage":"https://github.com/Droomwolk/react-a11y-modal#readme","bugs":{"url":"https://github.com/Droomwolk/react-a11y-modal/issues"},"dist":{"shasum":"b42ca6a92b1778d24d43ef0af8163daca15d9d96","tarball":"https://registry.npmjs.org/@droomwolk/react-a11y-modal/-/react-a11y-modal-1.0.3.tgz","fileCount":7,"integrity":"sha512-PKDNDyYICRtZnyMZ0aJ3R7LsfuD5wBI6gMejF+tOvQqMRil24IiTT/DiHXiHDtgWEaXnt4WvlAzLqldG2rDEGg==","signatures":[{"sig":"MEUCIQD/11hWPHUr2azt48BVkVUnU18FjUz5HzxE0ZWmq/W5vwIgfCv0i4ak1gNwIWbTPunISzKbjp3DeJSxD07rIScHx2I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35576},"main":"dist/index.cjs","type":"module","module":"dist/index.mjs","engines":{"node":">=18"},"exports":{".":{"import":"./dist/index.mjs","default":"./dist/index.mjs","require":"./dist/index.cjs"},"./modal.css":"./dist/modal.css","./dist/modal.css":"./dist/modal.css"},"scripts":{"build":"yarn build:js && yarn build:css","build:js":"tsup --config tsup.config.ts","build:css":"mkdir -p dist && cp src/modal.css dist/modal.css","prepublishOnly":"yarn build"},"_npmUser":{"name":"droomwolk","email":"beljio@hotmail.com"},"repository":{"url":"git+https://github.com/Droomwolk/react-a11y-modal.git","type":"git"},"_npmVersion":"10.9.2","description":"Modal React accessible (portail, focus trap, ARIA, clavier) sans dépendances","directories":{},"sideEffects":["*.css","**/*.css"],"_nodeVersion":"23.7.0","dependencies":{"prop-types":"^15.8.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"yarn@4.10.3","devDependencies":{"tsup":"^8.5.0","typescript":"^5.6.3","@types/react":"^19.2.2","@types/react-dom":"^19.2.2"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-a11y-modal_1.0.3_1760922512329_0.18774493184855978","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@droomwolk/react-a11y-modal","version":"1.0.5","keywords":["react","modal","a11y","accessibility","dialog","portal"],"author":{"name":"Mickael Beljio","email":"mbeljio@gmail.com"},"license":"MIT","_id":"@droomwolk/react-a11y-modal@1.0.5","maintainers":[{"name":"droomwolk","email":"beljio@hotmail.com"}],"homepage":"https://github.com/Droomwolk/react-a11y-modal#readme","bugs":{"url":"https://github.com/Droomwolk/react-a11y-modal/issues"},"dist":{"shasum":"d387a5b225a9cd63a9102535a3b9dfb521deb46c","tarball":"https://registry.npmjs.org/@droomwolk/react-a11y-modal/-/react-a11y-modal-1.0.5.tgz","fileCount":7,"integrity":"sha512-o+2aBSOVyylW7PejNvcnF0XcDTgxDjcf8wE/zQBCKOuBml5d6AiKlk2bhc0aW6hs9hxkCEQoaLiVsVm9vo1WmA==","signatures":[{"sig":"MEUCIEOMTST5XqoLV0YNkXH3NOHdtb0PbXUJBj1JTh1LEwEXAiEA2xI8WTRQv3OA8IEFoW4GJTw2D0OkbEvOShUGq14BHRA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":198579},"main":"./dist/index.cjs","type":"module","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","default":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json","./dist/index.js":"./dist/index.js","./dist/index.cjs":"./dist/index.cjs","./dist/modal.css":"./dist/modal.css"},"scripts":{"build":"npm run build:js && npm run build:css","build:js":"tsup src/index.js --format=esm,cjs --sourcemap --minify --clean --out-dir dist","build:css":"cp src/modal.css dist/modal.css","prepublishOnly":"npm run build"},"_npmUser":{"name":"droomwolk","email":"beljio@hotmail.com"},"repository":{"url":"git+https://github.com/Droomwolk/react-a11y-modal.git","type":"git"},"_npmVersion":"10.9.2","description":"Modal React accessible (portal, focus trap, ARIA, clavier) sans dépendances","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"23.7.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.93.2","tsup":"^8.5.0","prop-types":"^15.8.1","typescript":"^5.9.3","@types/react":"^19.2.2","@types/react-dom":"^19.2.2"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-a11y-modal_1.0.5_1760924317141_0.7633010519850307","host":"s3://npm-registry-packages-npm-production"}},"1.0.7":{"name":"@droomwolk/react-a11y-modal","version":"1.0.7","keywords":["react","modal","a11y","accessibility","dialog","portal"],"author":{"name":"Mickael Beljio","email":"mbeljio@gmail.com"},"license":"MIT","_id":"@droomwolk/react-a11y-modal@1.0.7","maintainers":[{"name":"droomwolk","email":"beljio@hotmail.com"}],"homepage":"https://github.com/Droomwolk/react-a11y-modal#readme","bugs":{"url":"https://github.com/Droomwolk/react-a11y-modal/issues"},"dist":{"shasum":"89d93f3737bb8b2ecab3a1756d40d5a96d9bada2","tarball":"https://registry.npmjs.org/@droomwolk/react-a11y-modal/-/react-a11y-modal-1.0.7.tgz","fileCount":7,"integrity":"sha512-GY0KKe/MZvKjf4eIHh9gjrYeVzGyezuHcgqtuf21/xrwG2Q9D/3RPlQnnYNwikm/UNHupOY6rKTvsY7W3zhrZA==","signatures":[{"sig":"MEQCIEktis98pgjKbX4SI5mh22St5o+kgTiT0Y+uKdrCantlAiBpvaY4gbcmYlbnCN2PX6zg1dBNPnyQwf/hCHxN64XVEQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":199127},"main":"./dist/index.cjs","type":"module","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","default":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json","./dist/index.js":"./dist/index.js","./dist/index.cjs":"./dist/index.cjs","./dist/modal.css":"./dist/modal.css"},"scripts":{"build":"npm run build:js && npm run build:css","build:js":"tsup src/index.js --format=esm,cjs --sourcemap --minify --clean --out-dir dist","build:css":"cp src/modal.css dist/modal.css","prepublishOnly":"npm run build"},"_npmUser":{"name":"droomwolk","email":"beljio@hotmail.com"},"repository":{"url":"git+https://github.com/Droomwolk/react-a11y-modal.git","type":"git"},"_npmVersion":"10.9.2","description":"Modal React accessible (portal, focus trap, ARIA, clavier) sans dépendances","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"23.7.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.93.2","tsup":"^8.5.0","prop-types":"^15.8.1","typescript":"^5.9.3","@types/react":"^19.2.2","@types/react-dom":"^19.2.2"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-a11y-modal_1.0.7_1760927073088_0.2661760345478099","host":"s3://npm-registry-packages-npm-production"}},"1.0.8":{"name":"@droomwolk/react-a11y-modal","version":"1.0.8","description":"Modal React accessible (portal, focus trap, ARIA, clavier) sans dépendances","keywords":["react","modal","a11y","accessibility","dialog","portal"],"license":"MIT","author":{"name":"Mickael Beljio","email":"mbeljio@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/Droomwolk/react-a11y-modal.git"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","default":"./dist/index.js"},"./dist/index.js":"./dist/index.js","./dist/index.cjs":"./dist/index.cjs","./dist/modal.css":"./dist/modal.css","./package.json":"./package.json"},"sideEffects":["**/*.css"],"peerDependencies":{"react":">=17","react-dom":">=17"},"devDependencies":{"@types/react":"^19.2.2","@types/react-dom":"^19.2.2","prop-types":"^15.8.1","sass":"^1.93.2","tsup":"^8.5.0","typescript":"^5.9.3"},"scripts":{"build:js":"tsup src/index.js --format=esm,cjs --sourcemap --minify --clean --out-dir dist","build:css":"cp src/modal.css dist/modal.css","build":"npm run build:js && npm run build:css","prepublishOnly":"npm run build"},"_id":"@droomwolk/react-a11y-modal@1.0.8","bugs":{"url":"https://github.com/Droomwolk/react-a11y-modal/issues"},"homepage":"https://github.com/Droomwolk/react-a11y-modal#readme","_nodeVersion":"23.7.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-vCQdCb7fDXtfGTt/2Q7j5qG+xoPXvvbBWy6EOtOeyx+YQfv/1tziuOwBN7ROUQ/ohpQ+NVAxl4/7JhWFNoV0Cw==","shasum":"24bfd87e0273a8207112a7a561f77c05255689fe","tarball":"https://registry.npmjs.org/@droomwolk/react-a11y-modal/-/react-a11y-modal-1.0.8.tgz","fileCount":7,"unpackedSize":201636,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIALax9PYLKGIMhx+SDLNa3a9KjfwG5Kn3AfY8LE8ZcbDAiAzPzGNZMypqiDXWv1svRpbABfXPoPQzsm/Hk9q6vjg7Q=="}]},"_npmUser":{"name":"droomwolk","email":"beljio@hotmail.com"},"directories":{},"maintainers":[{"name":"droomwolk","email":"beljio@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-a11y-modal_1.0.8_1760928026741_0.14828665834680765"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-20T00:26:29.767Z","modified":"2025-10-20T02:40:27.166Z","1.0.2":"2025-10-20T00:26:30.128Z","1.0.3":"2025-10-20T01:08:32.531Z","1.0.5":"2025-10-20T01:38:37.332Z","1.0.7":"2025-10-20T02:24:33.297Z","1.0.8":"2025-10-20T02:40:26.961Z"},"bugs":{"url":"https://github.com/Droomwolk/react-a11y-modal/issues"},"author":{"name":"Mickael Beljio","email":"mbeljio@gmail.com"},"license":"MIT","homepage":"https://github.com/Droomwolk/react-a11y-modal#readme","keywords":["react","modal","a11y","accessibility","dialog","portal"],"repository":{"type":"git","url":"git+https://github.com/Droomwolk/react-a11y-modal.git"},"description":"Modal React accessible (portal, focus trap, ARIA, clavier) sans dépendances","maintainers":[{"name":"droomwolk","email":"beljio@hotmail.com"}],"readme":"# @droomwolk/react-a11y-modal \nA reusable, accessible, and modern React modal component built by **Droomwolk**. \n\n\n\n\n---\n\n## 📑 Table of Contents \n- [📦 Installation](#-installation) \n- [🧩 Usage Example](#-usage-example) \n- [🖌️ Import Styles](#-import-styles) \n- [⚙️ Component Interface](#-component-interface) \n- [⌨️ Keyboard Support](#-keyboard-support) \n- [🎨 Default CSS Classes](#-default-css-classes) \n- [💭 Minimal Style Example](#-minimal-style-example) \n- [🌐 Local Development](#-local-development) \n- [🔒 License](#-license) \n- [👤 Author](#-author) \n\n---\n\n## 🚀 Installation \n\nInstall the package using **npm**: \n```bash\nnpm install @droomwolk/react-a11y-modal\n```\n\nor with **Yarn**: \n```bash\nyarn add @droomwolk/react-a11y-modal\n```\n\n---\n\n## 🧩 Usage Example \n\n```tsx\nimport { useState } from \"react\";\nimport { Modal } from \"@droomwolk/react-a11y-modal\";\n\nexport default function App() {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n \n\n setIsOpen(false)}\n title=\"Accessible Modal\"\n message=\"🎉 Hello from @droomwolk/react-a11y-modal!\"\n okLabel=\"Close\"\n onOk={() => setIsOpen(false)}\n />\n \n );\n}\n```\n\n---\n\n## 🖌️ Import Styles \n\nTo use the default theme, import the provided stylesheet: \n```tsx\nimport \"@droomwolk/react-a11y-modal/dist/modal.css\";\n```\n\nIf you prefer a custom design, override the CSS classes to match your own style system.\n\n---\n\n## ⚙️ Component Interface \n\n| Prop | Type | Description | Default |\n|------|------|--------------|----------|\n| `isOpen` | `boolean` | Controls modal visibility | `false` |\n| `onClose` | `() => void` | Triggered when modal closes | — |\n| `onOk` | `() => void` | Triggered when clicking the OK button | — |\n| `title` | `string` | Title displayed at the top | `\"Modal\"` |\n| `message` | `string` | Simple text message below the title | `\"\"` |\n| `children` | `ReactNode` | Custom JSX inside the modal | `undefined` |\n| `showCloseButton` | `boolean` | Shows or hides the ✕ button | `true` |\n| `okLabel` | `string` | Label for the main action button | `\"OK\"` |\n| `closeOnBackdropClick` | `boolean` | Allows closing by clicking the backdrop | `true` |\n| `className` | `string` | Additional CSS class for `.modal` | `\"\"` |\n| `style` | `React.CSSProperties` | Inline style for `.modal` | `{}` |\n| `closeButtonStyle` | `React.CSSProperties` | Inline style for the ✕ button | `{}` |\n| `actionsClassName` | `string` | Custom class for `.modal-actions` | `\"\"` |\n| `actionsStyle` | `React.CSSProperties` | Inline styles for `.modal-actions` | `{}` |\n\n---\n\n## ⌨️ Keyboard Support \n\n| Key | Action |\n|-----|--------|\n| **Escape** | Closes the modal (`onClose`) |\n| **Enter** | Confirms the modal (`onOk`) |\n\n---\n\n## 🎨 Default CSS Classes \n\n| Element | Class |\n|----------|--------|\n| Backdrop overlay | `.modal-backdrop` |\n| Main container | `.modal` |\n| Header section | `.modal-header` |\n| Title text | `.modal-title` |\n| Close button | `.modal-close` |\n| Body / Content | `.modal-body` |\n| Action area | `.modal-actions` |\n\n---\n\n## 💭 Minimal Style Example \n\n```css\n.modal-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, .6);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px;\n z-index: 1000;\n animation: fadeIn 0.2s ease-out;\n}\n\n.modal {\n width: 550px;\n max-width: 100%;\n background: #fff;\n border-radius: 16px;\n box-shadow: 0 18px 40px rgba(0, 0, 0, .2);\n overflow: hidden;\n animation: modalIn .18s ease-out;\n}\n\n.modal-header {\n padding: 14px 18px;\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid #e0e0e0;\n background-color: #f8f8f8;\n}\n\n.modal-title {\n font-size: 18px;\n font-weight: 600;\n color: #0a2540; /* Navy */\n}\n\n.modal-close {\n background: transparent;\n border: none;\n font-size: 20px;\n cursor: pointer;\n color: #dc143c;\n border-radius: 8px;\n transition: background 0.2s ease;\n}\n.modal-close:hover { background: #f2f2f2; }\n\n.modal-body {\n padding: 18px;\n color: #333;\n font-size: 14px;\n}\n\n.modal-actions {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 0 18px 18px;\n}\n\n.btn-primary {\n background-color: #0a2540;\n color: #fff;\n border: none;\n border-radius: 6px;\n padding: 8px 16px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.btn-primary:hover {\n background-color: #003366;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n@keyframes modalIn {\n from { transform: translateY(-10px); opacity: 0.8; }\n to { transform: translateY(0); opacity: 1; }\n}\n```\n\n---\n\n## 🌐 Local Development \n\n```bash\ngit clone https://github.com/droomwolk/react-a11y-modal.git\ncd react-a11y-modal\nnpm install\n```\n\nThen modify the code inside `src/` and publish a new version: \n```bash\nnpm version patch\nnpm publish --access public\n```\n\n---\n\n## 🔒 License \n\nThis project is licensed under the **MIT License** — see the LICENSE file for details.\n\n---\n\n## 👤 Author \n\nDeveloped by **Mickaël Beljio** \n💻 GitHub: [@droomwolk](https://github.com/droomwolk) \n🌐 Website: [https://droomwolk.dev](https://droomwolk.dev)\n","readmeFilename":"README.md"}