{"_id":"@ashutoshmishr0/sweet-modal","_rev":"4-26abe10a25ffb700a9748859f47730f4","name":"@ashutoshmishr0/sweet-modal","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.1":{"name":"@ashutoshmishr0/sweet-modal","version":"1.0.1","keywords":["alert","modal","popup","sweetalert","dialog","notification","confirm","toast","ui","react","nextjs"],"author":"","license":"MIT","_id":"@ashutoshmishr0/sweet-modal@1.0.1","maintainers":[{"name":"ashutoshmishr0","email":"ashutoshmishra8796@gmail.com"}],"homepage":"https://github.com/ashutoshmishr0/sweet-modal#readme","bugs":{"url":"https://github.com/ashutoshmishr0/sweet-modal/issues"},"dist":{"shasum":"3323395545d57680fb84665fd22f9423574e8f22","tarball":"https://registry.npmjs.org/@ashutoshmishr0/sweet-modal/-/sweet-modal-1.0.1.tgz","fileCount":7,"integrity":"sha512-aR98hj45W0dPVVr1Ji55BVkgZWSAHO3br2O3BVDEYIDEo0W90IxEMpOl6/iL64x+xrqYijd1oKEisTF3IdFzrQ==","signatures":[{"sig":"MEUCIGZGuhF17cx4xLjZOTlPZk6+wpebz1fKFvIumdJB/Y8GAiEAknWeEqqoDoNlBzZaqFgIQvz8qRAnBvIOzg+2xaaPJDo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":80890},"main":"dist/sweet-modal.cjs.js","style":"dist/sweet-modal.css","unpkg":"dist/sweet-modal.min.js","module":"dist/sweet-modal.esm.js","exports":{".":{"import":"./dist/sweet-modal.esm.js","require":"./dist/sweet-modal.cjs.js"},"./react":{"import":"./dist/sweet-modal-react.esm.js","require":"./dist/sweet-modal-react.cjs.js"}},"scripts":{"build":"node build.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"ashutoshmishr0","email":"ashutoshmishra8796@gmail.com"},"repository":{"url":"git+https://github.com/ashutoshmishr0/sweet-modal.git","type":"git"},"_npmVersion":"11.10.0","description":"A smooth, attractive, and customizable alert/modal library inspired by SweetAlert with full color customization support. Works in vanilla JS, React, and Next.js.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.21.5"},"peerDependencies":{"react":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/sweet-modal_1.0.1_1781367601233_0.13996464845327772","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@ashutoshmishr0/sweet-modal","version":"1.0.5","keywords":["alert","modal","popup","sweetalert","dialog","notification","confirm","toast","ui","react","nextjs"],"author":"","license":"MIT","_id":"@ashutoshmishr0/sweet-modal@1.0.5","maintainers":[{"name":"ashutoshmishr0","email":"ashutoshmishra8796@gmail.com"}],"homepage":"https://github.com/ashutoshmishr0/sweet-modal#readme","bugs":{"url":"https://github.com/ashutoshmishr0/sweet-modal/issues"},"dist":{"shasum":"5647f943c307fd9c4a61554f41806ddf40bc21bc","tarball":"https://registry.npmjs.org/@ashutoshmishr0/sweet-modal/-/sweet-modal-1.0.5.tgz","fileCount":7,"integrity":"sha512-V6W6tA2jrjfBNm6I0IYAJGmvLRF/cFgNM2h1MQ1O4v9PrTgMZSeP+d7Rl2MVZXgJN0g4voYN3kKYLUNbYwgpDg==","signatures":[{"sig":"MEYCIQCf/yAdwcglBHZv6/Q8Naqf9KAME4QVuqK14ffgkZgXPwIhAISU+WehpugMXAL2SmyNIqu9l95eNjjoEOYDa7pGXg3Q","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84175},"main":"dist/sweet-modal.cjs.js","style":"dist/sweet-modal.css","unpkg":"dist/sweet-modal.min.js","module":"dist/sweet-modal.esm.js","exports":{".":{"import":"./dist/sweet-modal.esm.js","require":"./dist/sweet-modal.cjs.js"},"./react":{"import":"./dist/sweet-modal-react.esm.js","require":"./dist/sweet-modal-react.cjs.js"}},"scripts":{"build":"node build.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"ashutoshmishr0","email":"ashutoshmishra8796@gmail.com"},"repository":{"url":"git+https://github.com/ashutoshmishr0/sweet-modal.git","type":"git"},"_npmVersion":"11.10.0","description":"A smooth, attractive, and customizable alert/modal library inspired by SweetAlert with full color customization support. Works in vanilla JS, React, and Next.js.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.21.5"},"peerDependencies":{"react":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/sweet-modal_1.0.5_1781403462407_0.7658198901198348","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@ashutoshmishr0/sweet-modal","version":"1.0.6","keywords":["alert","modal","popup","sweetalert","dialog","notification","confirm","toast","ui","react","nextjs"],"author":"","license":"MIT","_id":"@ashutoshmishr0/sweet-modal@1.0.6","maintainers":[{"name":"ashutoshmishr0","email":"ashutoshmishra8796@gmail.com"}],"homepage":"https://github.com/ashutoshmishr0/sweet-modal#readme","bugs":{"url":"https://github.com/ashutoshmishr0/sweet-modal/issues"},"dist":{"shasum":"a8cb1ca5be8f796b166791e5ecf58147d030d961","tarball":"https://registry.npmjs.org/@ashutoshmishr0/sweet-modal/-/sweet-modal-1.0.6.tgz","fileCount":7,"integrity":"sha512-6Bq0rZfgJTBXK0VlqkUjrSjMS581uScmOjdmC7PaEtZx13rUUHufIiVTNUwqfBKnbQ5OoKibu889EtxlK2tXbg==","signatures":[{"sig":"MEYCIQDj9cniPHsmcRyPF5zcacdn5QbmUt8kUaRN0l7MmBXQeQIhANawAbp+LT6wv8nqNxxS6HcdcvYlzeQn+1QDxHV2MEVM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84343},"main":"dist/sweet-modal.cjs.js","style":"dist/sweet-modal.css","unpkg":"dist/sweet-modal.min.js","module":"dist/sweet-modal.esm.js","exports":{".":{"import":"./dist/sweet-modal.esm.js","require":"./dist/sweet-modal.cjs.js"},"./react":{"import":"./dist/sweet-modal-react.esm.js","require":"./dist/sweet-modal-react.cjs.js"}},"scripts":{"build":"node build.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"ashutoshmishr0","email":"ashutoshmishra8796@gmail.com"},"repository":{"url":"git+https://github.com/ashutoshmishr0/sweet-modal.git","type":"git"},"_npmVersion":"11.10.0","description":"A smooth, attractive, and customizable alert/modal library inspired by SweetAlert with full color customization support. Works in vanilla JS, React, and Next.js.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.21.5"},"peerDependencies":{"react":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/sweet-modal_1.0.6_1781404003313_0.16108508102578445","host":"s3://npm-registry-packages-npm-production"}},"1.0.7":{"name":"@ashutoshmishr0/sweet-modal","version":"1.0.7","description":"A smooth, attractive, and customizable alert/modal library inspired by SweetAlert with full color customization support. Works in vanilla JS, React, and Next.js.","main":"dist/sweet-modal.cjs.js","module":"dist/sweet-modal.esm.js","types":"dist/sweet-modal.d.ts","unpkg":"dist/sweet-modal.min.js","exports":{".":{"import":"./dist/sweet-modal.esm.js","require":"./dist/sweet-modal.cjs.js","types":"./dist/sweet-modal.d.ts"},"./react":{"import":"./dist/sweet-modal-react.esm.js","require":"./dist/sweet-modal-react.cjs.js","types":"./dist/sweet-modal-react.d.ts"}},"scripts":{"build":"node build.js","prepublishOnly":"npm run build"},"keywords":["alert","modal","popup","sweetalert","dialog","notification","confirm","toast","ui","react","nextjs"],"author":{"name":"ashutoshmishr0"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ashutoshmishr0/sweet-modal.git"},"peerDependencies":{"react":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true}},"devDependencies":{"esbuild":"^0.21.5"},"_id":"@ashutoshmishr0/sweet-modal@1.0.7","bugs":{"url":"https://github.com/ashutoshmishr0/sweet-modal/issues"},"homepage":"https://github.com/ashutoshmishr0/sweet-modal#readme","_nodeVersion":"22.14.0","_npmVersion":"11.10.0","dist":{"integrity":"sha512-8MtK00o4g9lC1eeXfidqFR7QZe2L1mCFyruzIAGa2lIQOBo4nGck2B5P+U2pIWyzCuZMd800dVLK8i3Sdev70w==","shasum":"3e4176ac732339ec9c6a90453178602bc5074004","tarball":"https://registry.npmjs.org/@ashutoshmishr0/sweet-modal/-/sweet-modal-1.0.7.tgz","fileCount":9,"unpackedSize":87100,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD+aeTVZzX0n4LUZ++h/GsLgyDva6uRzj5tV3NCrgMD6gIgFLfnqCAllc5ixHToJBOSlmyF1+X5OMwUloAFoVU+mBg="}]},"_npmUser":{"name":"ashutoshmishr0","email":"ashutoshmishra8796@gmail.com"},"directories":{},"maintainers":[{"name":"ashutoshmishr0","email":"ashutoshmishra8796@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sweet-modal_1.0.7_1781501895543_0.41096950272802957"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-13T16:20:00.979Z","modified":"2026-06-15T05:38:15.777Z","1.0.1":"2026-06-13T16:20:01.392Z","1.0.5":"2026-06-14T02:17:42.541Z","1.0.6":"2026-06-14T02:26:43.459Z","1.0.7":"2026-06-15T05:38:15.674Z"},"bugs":{"url":"https://github.com/ashutoshmishr0/sweet-modal/issues"},"license":"MIT","homepage":"https://github.com/ashutoshmishr0/sweet-modal#readme","keywords":["alert","modal","popup","sweetalert","dialog","notification","confirm","toast","ui","react","nextjs"],"repository":{"type":"git","url":"git+https://github.com/ashutoshmishr0/sweet-modal.git"},"description":"A smooth, attractive, and customizable alert/modal library inspired by SweetAlert with full color customization support. Works in vanilla JS, React, and Next.js.","maintainers":[{"name":"ashutoshmishr0","email":"ashutoshmishra8796@gmail.com"}],"readme":"# @ashutoshmishr0/sweet-modal\n\nA smooth, customizable alert and modal library for React and Next.js. Supports success, error, warning, info dialogs, toast notifications, confirm dialogs, and full color customization — with zero dependencies.\n\n---\n\n## Installation\n\n```bash\nnpm install @ashutoshmishr0/sweet-modal\n```\n\n---\n\n## Quick Start\n\n```tsx\n\"use client\";\n\nimport { SweetModal } from \"@ashutoshmishr0/sweet-modal\";\n\nexport default function Example() {\n  return (\n    <button onClick={() => SweetModal.success({ title: \"Done!\", text: \"It works.\" })}>\n      Click Me\n    </button>\n  );\n}\n```\n\n---\n\n## Import Options\n\nAll three import styles work:\n\n```ts\n// Named import\nimport { SweetModal } from \"@ashutoshmishr0/sweet-modal\";\n\n// Default import\nimport SweetModal from \"@ashutoshmishr0/sweet-modal\";\n\n// From /react subpath (hook + component included)\nimport { SweetModal, useSweetModal } from \"@ashutoshmishr0/sweet-modal/react\";\n```\n\n---\n\n## Shorthand Methods\n\nThe quickest way to show alerts:\n\n```ts\nSweetModal.success({ title: \"Success\", text: \"Data saved successfully!\" });\n\nSweetModal.error({ title: \"Error\", text: \"Something went wrong!\" });\n\nSweetModal.warning({ title: \"Warning\", text: \"This action cannot be undone.\" });\n\nSweetModal.info({ title: \"Info\", text: \"Your session will expire in 5 minutes.\" });\n\nSweetModal.question({ title: \"Question\", text: \"Do you want to continue?\" });\n```\n\n---\n\n## Confirm Dialog\n\nReturns a Promise so you can wait for the user's response:\n\n```tsx\n\"use client\";\n\nimport { SweetModal } from \"@ashutoshmishr0/sweet-modal\";\n\nexport default function DeleteButton() {\n  const handleDelete = async () => {\n    const result = await SweetModal({\n      icon: \"warning\",\n      title: \"Delete this item?\",\n      text: \"This action cannot be undone.\",\n      showCancelButton: true,\n      confirmButtonText: \"Yes, delete it\",\n      cancelButtonText: \"Cancel\",\n      confirmButtonColor: \"#f87171\",\n    });\n\n    if (result.isConfirmed) {\n      SweetModal.success({ title: \"Deleted!\", timer: 1500, showConfirmButton: false });\n    }\n  };\n\n  return <button onClick={handleDelete}>Delete</button>;\n}\n```\n\n---\n\n## Toast Notification\n\n```ts\nSweetModal.toast({\n  icon: \"success\",\n  title: \"Saved successfully\",\n});\n\n// Custom toast with timer\nSweetModal({\n  toast: true,\n  position: \"top-end\",\n  icon: \"success\",\n  title: \"Changes saved\",\n  timer: 3000,\n  timerProgressBar: true,\n  showConfirmButton: false,\n});\n```\n\n---\n\n## Custom Colors and Styling\n\nEvery color and style property is customizable:\n\n```ts\nSweetModal({\n  title: \"Custom Theme\",\n  text: \"You can change all colors.\",\n  icon: \"info\",\n  iconColor: \"#a78bfa\",\n  background: \"#1e1e2e\",\n  color: \"#ffffff\",\n  confirmButtonColor: \"#a78bfa\",\n  cancelButtonColor: \"#555555\",\n  borderRadius: \"1.5rem\",\n  width: \"30rem\",\n});\n```\n\n---\n\n## useSweetModal Hook\n\nUse this hook when you need to track modal visibility in React state:\n\n```tsx\n\"use client\";\n\nimport { useSweetModal } from \"@ashutoshmishr0/sweet-modal/react\";\n\nexport default function Example() {\n  const { fire, isVisible } = useSweetModal();\n\n  const handleClick = async () => {\n    const result = await fire({\n      icon: \"warning\",\n      title: \"Are you sure?\",\n      showCancelButton: true,\n    });\n\n    if (result.isConfirmed) {\n      console.log(\"Confirmed\");\n    }\n  };\n\n  return (\n    <div>\n      <p>Modal is {isVisible ? \"open\" : \"closed\"}</p>\n      <button onClick={handleClick}>Open</button>\n    </div>\n  );\n}\n```\n\n---\n\n## Declarative Component\n\nControl the modal with React state using the `SweetModalComponent`:\n\n```tsx\n\"use client\";\n\nimport { useState } from \"react\";\nimport { SweetModalComponent } from \"@ashutoshmishr0/sweet-modal/react\";\n\nexport default function Example() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <button onClick={() => setOpen(true)}>Open Modal</button>\n      <SweetModalComponent\n        open={open}\n        onClose={() => setOpen(false)}\n        icon=\"success\"\n        title=\"Hello!\"\n        text=\"This is controlled by React state.\"\n        confirmButtonColor=\"#6c5ce7\"\n      />\n    </>\n  );\n}\n```\n\n---\n\n## Auto-Close with Timer\n\n```ts\nSweetModal({\n  icon: \"info\",\n  title: \"Redirecting...\",\n  text: \"You will be redirected in 3 seconds.\",\n  timer: 3000,\n  timerProgressBar: true,\n  showConfirmButton: false,\n});\n```\n\n---\n\n## Reusable Presets with mixin\n\nDefine a preset once and reuse it everywhere:\n\n```ts\nimport { SweetModal } from \"@ashutoshmishr0/sweet-modal\";\n\nconst NetworkError = SweetModal.mixin({\n  icon: \"error\",\n  title: \"Network Error\",\n  confirmButtonColor: \"#f87171\",\n});\n\n// Use it anywhere\nNetworkError({ text: \"Could not connect to the server.\" });\nNetworkError({ text: \"Request timed out. Please try again.\" });\n```\n\n---\n\n## Programmatic Control\n\n```ts\n// Close the currently open modal\nSweetModal.close();\n\n// Check if a modal is currently visible\nSweetModal.isVisible(); // returns true or false\n```\n\n---\n\n## All Options\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| title | string | \"\" | Title text of the modal |\n| text | string | \"\" | Body text of the modal |\n| html | string | null | Custom HTML content (overrides text) |\n| icon | string | null | success, error, warning, info, question |\n| iconColor | string | auto | Custom color for the icon |\n| background | string | #ffffff | Background color of the popup |\n| color | string | #2d3436 | Text color of the popup |\n| width | string | 32rem | Width of the popup |\n| borderRadius | string | 1rem | Border radius of the popup |\n| showConfirmButton | boolean | true | Show or hide the confirm button |\n| showCancelButton | boolean | false | Show or hide the cancel button |\n| confirmButtonText | string | OK | Label for the confirm button |\n| cancelButtonText | string | Cancel | Label for the cancel button |\n| confirmButtonColor | string | #6c5ce7 | Background color of the confirm button |\n| cancelButtonColor | string | #aaaaaa | Background color of the cancel button |\n| showCloseButton | boolean | false | Show an X button to close the modal |\n| timer | number | null | Auto-close after N milliseconds |\n| timerProgressBar | boolean | false | Show a progress bar for the timer |\n| allowOutsideClick | boolean | true | Close when clicking outside the modal |\n| allowEscapeKey | boolean | true | Close when pressing the Escape key |\n| toast | boolean | false | Show as a small toast notification |\n| position | string | center | top, bottom, top-end, bottom-end, top-start, bottom-start |\n| backdrop | boolean | true | Show the dark backdrop overlay |\n| animation | boolean | true | Enable or disable animations |\n| customClass | object | {} | Custom CSS classes: popup, title, content, confirmButton, cancelButton |\n\n---\n\n## Promise Result\n\nEvery `SweetModal()` call returns a Promise that resolves with:\n\n```ts\n{\n  isConfirmed: boolean,  // true if confirm button was clicked\n  isDismissed: boolean,  // true if cancelled or closed\n  value: true | false | null\n}\n```\n\n---\n\n## Notes for Next.js\n\n- Always add `\"use client\"` at the top of any file that uses this library.\n- The library injects its styles automatically. No CSS import is needed.\n- Works with both App Router and Pages Router.\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md","author":{"name":"ashutoshmishr0"}}