{"_id":"@alsocoder/apna-modal","_rev":"3-bcaf826d439ca144a2874f7706a995c3","name":"@alsocoder/apna-modal","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@alsocoder/apna-modal","version":"0.1.0","keywords":["react","react-component","modal","dialog","drawer","sheet","confirmation","overlay","z-index","stacked-modal","ui-component","css-variables","radix-ui","accessible","a11y","typescript","apna-modal","alsocoder"],"author":{"url":"https://alsocoder.com","name":"Also Coder"},"license":"MIT","_id":"@alsocoder/apna-modal@0.1.0","maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"homepage":"https://github.com/alsocoders/apna-modal#readme","bugs":{"url":"https://github.com/alsocoders/apna-modal/issues"},"dist":{"shasum":"fe0b3503483ca3bc3bce1c923b4f10052d9e3659","tarball":"https://registry.npmjs.org/@alsocoder/apna-modal/-/apna-modal-0.1.0.tgz","fileCount":9,"integrity":"sha512-gEac1tqndM0q0SZeOaZB79/xvXgOIxukJxVqjOEdcXhcWt7xNlEuMnot11H67vLfjc8VXEoEWccrorO0iejM5A==","signatures":[{"sig":"MEUCIQCab8ojiEykSyc19oIEMhaW9g8EU55y9Zrv6lwUq62uCgIgb/TGx96eKzUu+g4G4XzpnkmiLXz1/SApGXlJhCQFCPQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":173430},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"alsocoder-org","email":"alsocoder@gmail.com"},"repository":{"url":"git+https://github.com/alsocoders/apna-modal.git","type":"git"},"_npmVersion":"12.0.1","description":"A flexible React modal and drawer component with stacked z-index, confirmation presets, and drag-to-dismiss drawers.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.16.0","browserslist":["Chrome >= 90","Firefox >= 90","Safari >= 14","Edge >= 90","iOS >= 14","Samsung >= 15","not dead"],"dependencies":{"clsx":"^2.1.1","vaul":"^1.1.2","@radix-ui/react-dialog":"^1.1.14"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.9.2","@types/react":"^19.1.8","@types/react-dom":"^19.1.6"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/apna-modal_0.1.0_1785592396851_0.9537158192964146","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@alsocoder/apna-modal","version":"0.1.1","keywords":["react","react-component","modal","dialog","drawer","sheet","confirmation","overlay","z-index","stacked-modal","ui-component","css-variables","radix-ui","accessible","a11y","typescript","apna-modal","alsocoder"],"author":{"url":"https://alsocoder.com","name":"Also Coder"},"license":"MIT","_id":"@alsocoder/apna-modal@0.1.1","maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"homepage":"https://github.com/alsocoders/apna-modal#readme","bugs":{"url":"https://github.com/alsocoders/apna-modal/issues"},"dist":{"shasum":"3113652fc3163e78a668f0080b10c6d117b8d9c1","tarball":"https://registry.npmjs.org/@alsocoder/apna-modal/-/apna-modal-0.1.1.tgz","fileCount":9,"integrity":"sha512-eb5iZWujL14jhyf/m4uie0d1ASIx/j1z6XFPVVre8wJqyq3amsDsk16kk5B4b4KPvyUU4OaX/3+b4QWXKsa4BA==","signatures":[{"sig":"MEUCIQDPhKgbchE+rgwLeAydZA0dcqDxVyLJz6MxX5YCncTJuAIgOpnv4IxLRnG0g9QiSzbhmjd495ga1C7cz9i5MptDYog=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":175876},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"alsocoder-org","email":"alsocoder@gmail.com"},"repository":{"url":"git+https://github.com/alsocoders/apna-modal.git","type":"git"},"_npmVersion":"12.0.1","description":"A flexible React modal and drawer component with stacked z-index, confirmation presets, and drag-to-dismiss drawers.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.16.0","browserslist":["Chrome >= 90","Firefox >= 90","Safari >= 14","Edge >= 90","iOS >= 14","Samsung >= 15","not dead"],"dependencies":{"clsx":"^2.1.1","vaul":"^1.1.2","@radix-ui/react-dialog":"^1.1.14"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.9.2","@types/react":"^19.1.8","@types/react-dom":"^19.1.6"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/apna-modal_0.1.1_1785763118229_0.8782246441298602","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@alsocoder/apna-modal","version":"0.1.2","description":"A flexible React modal and drawer component with stacked z-index, confirmation presets, and drag-to-dismiss drawers.","license":"MIT","author":{"name":"Also Coder","url":"https://alsocoder.com"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"sideEffects":["*.css"],"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"keywords":["react","react-component","modal","dialog","drawer","sheet","confirmation","overlay","z-index","stacked-modal","ui-component","css-variables","radix-ui","accessible","a11y","typescript","apna-modal","alsocoder"],"browserslist":["Chrome >= 90","Firefox >= 90","Safari >= 14","Edge >= 90","iOS >= 14","Samsung >= 15","not dead"],"repository":{"type":"git","url":"git+https://github.com/alsocoders/apna-modal.git"},"bugs":{"url":"https://github.com/alsocoders/apna-modal/issues"},"homepage":"https://github.com/alsocoders/apna-modal#readme","peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"@radix-ui/react-dialog":"^1.1.14","clsx":"^2.1.1","vaul":"^1.1.2"},"devDependencies":{"@types/react":"^19.1.8","@types/react-dom":"^19.1.6","react":"^19.1.0","react-dom":"^19.1.0","tsup":"^8.5.0","typescript":"^5.9.2"},"gitHead":"537a840804d34e78f6d00d90115e1cc5c151ce5e","_id":"@alsocoder/apna-modal@0.1.2","_nodeVersion":"24.16.0","_npmVersion":"12.0.1","dist":{"integrity":"sha512-ykj4eSYK1w/YsHIeI0AFcoh5ICQu1Wu2iE34BLXSKuCKNIAFIwIE23em56Ufp5bsmuvWcgsAzgo6NS3KQXU4CA==","shasum":"07c15cdcec01c506e5e41b10c0fe4c455b24e431","tarball":"https://registry.npmjs.org/@alsocoder/apna-modal/-/apna-modal-0.1.2.tgz","fileCount":10,"unpackedSize":199894,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIA5MGRCAZhoYfAwZtFCvCusOPfJygVTj6GEG9h5SNwesAiABOuMSCRc2xujWPH21I8gkLvhbFP0G/ICLIDTVEWTF+w=="}]},"_npmUser":{"name":"alsocoder-org","email":"alsocoder@gmail.com"},"directories":{},"maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/apna-modal_0.1.2_1786261656817_0.5200132119300969"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-01T13:53:16.677Z","modified":"2026-08-09T07:47:37.108Z","0.1.0":"2026-08-01T13:53:17.003Z","0.1.1":"2026-08-03T13:18:38.437Z","0.1.2":"2026-08-09T07:47:36.946Z"},"bugs":{"url":"https://github.com/alsocoders/apna-modal/issues"},"author":{"name":"Also Coder","url":"https://alsocoder.com"},"license":"MIT","homepage":"https://github.com/alsocoders/apna-modal#readme","keywords":["react","react-component","modal","dialog","drawer","sheet","confirmation","overlay","z-index","stacked-modal","ui-component","css-variables","radix-ui","accessible","a11y","typescript","apna-modal","alsocoder"],"repository":{"type":"git","url":"git+https://github.com/alsocoders/apna-modal.git"},"description":"A flexible React modal and drawer component with stacked z-index, confirmation presets, and drag-to-dismiss drawers.","maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"readme":"# @alsocoder/apna-modal\r\n\r\nReact modal and drawer components with stacked z-index, confirmation presets, imperative API, and nested overlay support for `@alsocoder/apna-select` and `@alsocoder/apna-date-picker`.\r\n\r\n## Features\r\n\r\n- Modal (Radix Dialog) and drawer (vaul) variants\r\n- Four drawer sides: top, bottom, left, right\r\n- Drag-to-dismiss on top/bottom drawers\r\n- Stacked modals with automatic z-index via `ApnaModalProvider`\r\n- `ApnaConfirmModal` preset for confirmations\r\n- `useApnaModal()` imperative `open()` / `confirm()` API\r\n- Compound parts: `ApnaModalHeader`, `ApnaModalBody`, `ApnaModalFooter`\r\n- Nested overlay contract — DatePicker and Select work inside modals\r\n- Vanilla CSS theming via CSS variables\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @alsocoder/apna-modal\r\n```\r\n\r\nPeer dependencies:\r\n\r\n```bash\r\nnpm install react react-dom\r\n```\r\n\r\nFor DatePicker / Select inside modals, use matching versions of the sibling packages:\r\n\r\n```bash\r\nnpm install @alsocoder/apna-date-picker @alsocoder/apna-select\r\n```\r\n\r\n## Setup\r\n\r\n```tsx\r\nimport {\r\n ApnaModalProvider,\r\n ApnaModal,\r\n ApnaModalHeader,\r\n ApnaModalBody,\r\n ApnaModalFooter,\r\n} from \"@alsocoder/apna-modal\"\r\nimport \"@alsocoder/apna-modal/styles.css\"\r\n```\r\n\r\nWrap your app (or layout) with the provider — required for stacked z-index and nested popover CSS vars:\r\n\r\n```tsx\r\n\r\n {children}\r\n\r\n```\r\n\r\n## Basic modal\r\n\r\n```tsx\r\nimport { useState } from \"react\"\r\nimport {\r\n ApnaModal,\r\n ApnaModalHeader,\r\n ApnaModalBody,\r\n ApnaModalFooter,\r\n} from \"@alsocoder/apna-modal\"\r\n\r\nexport function EditProfileModal() {\r\n const [open, setOpen] = useState(false)\r\n\r\n return (\r\n <>\r\n \r\n \r\n setOpen(false)}\r\n />\r\n \r\n

Modal content here.

\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n```\r\n\r\n## Drawer\r\n\r\n```tsx\r\n\r\n setOpen(false)} />\r\n Drawer content\r\n\r\n```\r\n\r\n## Confirmation modal\r\n\r\n```tsx\r\nimport { ApnaConfirmModal } from \"@alsocoder/apna-modal\"\r\n\r\n deleteItem()}\r\n/>\r\n```\r\n\r\n## Imperative API\r\n\r\n```tsx\r\nimport { useApnaModal } from \"@alsocoder/apna-modal\"\r\n\r\nfunction Demo() {\r\n const modal = useApnaModal()\r\n\r\n return (\r\n \r\n modal.open({\r\n title: \"Imperative modal\",\r\n content:

Rendered by the provider host.

,\r\n })\r\n }\r\n >\r\n Open\r\n \r\n )\r\n}\r\n```\r\n\r\n## DatePicker / Select inside modal\r\n\r\nUse `@alsocoder/apna-date-picker` ≥ 0.1.2 and `@alsocoder/apna-select` ≥ 0.2.2 with `ApnaModalProvider`. Import their styles as usual:\r\n\r\n```tsx\r\nimport { ApnaDatePicker } from \"@alsocoder/apna-date-picker\"\r\nimport { ApnaSelect } from \"@alsocoder/apna-select\"\r\nimport \"@alsocoder/apna-date-picker/styles.css\"\r\nimport \"@alsocoder/apna-select/styles.css\"\r\n\r\n\r\n \r\n \r\n \r\n \r\n\r\n```\r\n\r\nThe provider sets body CSS variables consumed by sibling packages:\r\n\r\n- `--apna-overlay-nested-z-popover`\r\n- `--apna-overlay-nested-z-select`\r\n\r\n## Exports\r\n\r\n- `ApnaModal`, `ApnaConfirmModal`, `ApnaModalProvider`\r\n- `ApnaModalHeader`, `ApnaModalBody`, `ApnaModalFooter`, `ApnaModalDragHandle`\r\n- `useApnaModal`\r\n- `defaultClassNames`, `mergeClassNames`\r\n- `preventDismissOnNestedOverlay`, `isInsideNestedOverlay`, `APNA_NESTED_OVERLAY_SELECTOR`\r\n- Nested z-index constants: `NESTED_Z_POPOVER_VAR`, `NESTED_Z_SELECT_VAR`, offsets\r\n\r\n## Changelog\r\n\r\n### v0.1.0\r\n\r\n- Initial release\r\n- Modal (Radix Dialog) and drawer (vaul) variants\r\n- `ApnaModalProvider` stacked z-index with nested overlay CSS vars\r\n- `ApnaConfirmModal` and `useApnaModal()` imperative API\r\n- Compound header/body/footer parts\r\n- Nested overlay dismiss prevention for portaled Select / DatePicker\r\n\r\n## Development\r\n\r\n```bash\r\nnpm install\r\nnpm run build\r\ncd playground && npm install && npm run dev\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}