customizable-toast-notification 1.0.0 → 2.0.0

package/README.md

@@ -1,81 +1,139 @@
-#Customizable Toast Notification Library
-A highly customizable toast notification library for modern web applications, providing a simple way to create notifications with dynamic options.
-
-#Features
-Supports info, success, error, and warning notification types.
-Customizable message, background color, text color, and duration.
-Allows setting the position of the toast (e.g., top-right, bottom-left, etc.).
-Includes an optional close button.
-Built-in queuing mechanism to ensure notifications do not overlap.
-Supports dynamic options like custom colors and messages.
-Installation
-To install this package, run:
-
-#bash
-Copy code
+# Customizable Toast Notification Library
+
+A simple and highly customizable toast notification library for modern JavaScript applications. This library allows you to easily display toast notifications with various configurations to enhance user experience.
+
+## Table of Contents
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [API Reference](#api-reference)
+- [Examples](#examples)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+- Display notifications of different types: info, success, error, and warning.
+- Customizable background and text colors.
+- Support for custom messages and default messages.
+- Adjustable display duration and positioning on the screen.
+- Close button functionality for user control.
+- Animation effects for a smooth appearance and disappearance.
+
+## Installation
+You can install the library via npm:
+```bash
 npm install customizable-toast-notification
-Usage
-Importing the Library
-javascript
-Copy code
+```
+Or, if you prefer using yarn:
+```bash
+yarn add customizable-toast-notification
+```
+
+## Usage
+To use the toast notification library, you need to import it in your JavaScript or TypeScript file:
+```javascript
 import { createToast, setDefaultColors, setDefaultMessages } from 'customizable-toast-notification';
-Creating a Toast Notification
-You can create a toast notification by calling the createToast function with various options:
 
-javascript
-Copy code
+// Create a toast notification
 createToast({
-  message: 'This is a custom message',
-  duration: 5000, // Display for 5 seconds
-  position: 'top-right', // Position on the screen
-  type: 'success', // Type of toast (info, success, warning, error)
+  message: 'This is a custom message!',
+  duration: 5000, // Duration in milliseconds
+  position: 'top-right', // Position of the toast
+  type: 'success', // Type of notification
   backgroundColor: 'green', // Custom background color
   textColor: 'white', // Custom text color
-  showCloseButton: true // Display the close button
+  showCloseButton: true, // Show close button
+  animationDuration: '0.5s', // Duration of the animations
+  animationEasing: 'ease', // Easing function for the animations
+});
+```
+
+## API Reference
+### createToast
+Creates a toast notification with the provided options.
+
+#### Parameters
+- `options` (Object): Options for the toast notification.
+  - `message` (string, optional): The message to display in the toast. Defaults based on type if not provided.
+  - `duration` (number, optional): The duration the toast should be displayed, in milliseconds (default is 3000).
+  - `position` (string, optional): The position of the toast on the screen (default is 'bottom-right').
+  - `type` (string, optional): The type of the toast (info, success, error, warning, default is 'info').
+  - `backgroundColor` (string, optional): Custom background color for the toast notification.
+  - `textColor` (string, optional): Custom text color for the toast notification (default is 'white').
+  - `showCloseButton` (boolean, optional): Whether to show a close button (default is false).
+  - `animationDuration` (string, optional): Duration of the fade-in and fade-out animations (default is '0.5s').
+  - `animationEasing` (string, optional): Easing function for the animations (default is 'ease').
+
+#### Example
+```javascript
+createToast({
+  message: 'Operation completed successfully!',
+  type: 'success',
 });
+```
+
+### setDefaultColors
+Sets default colors for different toast types.
 
-#Available Options
-Option	Type	Default	Description
-message	String	Depends on type	The message to display in the toast.
-duration	Number	3000	The duration (in ms) to display the toast.
-position	String	bottom-right	Where to position the toast (top-right, bottom-left, etc.).
-type	String	info	Type of the toast (info, success, error, warning).
-backgroundColor	String	Depends on type	Custom background color for the toast.
-textColor	String	white	Custom text color.
-showCloseButton	Boolean	false	Whether to show a close button in the toast.
-Customizing Default Colors and Messages
-You can customize default colors and messages for different toast types:
-
-javascript
-Copy code
+#### Parameters
+- `newColors` (Object): New colors to set for toast types, where keys are the toast types (info, success, error, warning).
+
+#### Example
+```javascript
 setDefaultColors({
+  info: 'blue',
   success: 'green',
-  error: 'darkred'
+  error: 'red',
+  warning: 'orange',
 });
+```
+
+### setDefaultMessages
+Sets default messages for different toast types.
+
+#### Parameters
+- `newMessages` (Object): New messages to set for toast types, where keys are the toast types (info, success, error, warning).
 
+#### Example
+```javascript
 setDefaultMessages({
-  success: 'Operation completed!',
-  error: 'Something went wrong!'
+  info: 'This is an informational message!',
+  success: 'Your action was successful!',
+  error: 'An error has occurred!',
+  warning: 'This is a warning message!',
 });
-Example Usage in HTML
-html
-Copy code
-<button id="showToast">Show Toast</button>
-
-<script>
-  document.getElementById('showToast').addEventListener('click', () => {
-    createToast({
-      message: 'This is a custom toast message.',
-      duration: 4000,
-      position: 'top-right',
-      type: 'warning',
-      backgroundColor: 'red',
-      textColor: 'yellow',
-      showCloseButton: true
-    });
-  });
-</script>
-
-#License
-This project is licensed under the MIT License.
+```
+
+## Examples
+### Basic Usage
+```javascript
+createToast({
+  message: 'Welcome to our website!',
+  duration: 4000,
+  type: 'info',
+});
+```
+
+### Custom Colors and Messages
+```javascript
+setDefaultColors({
+  success: '#28a745',
+  error: '#dc3545',
+});
+
+setDefaultMessages({
+  success: 'Data saved successfully!',
+  error: 'Failed to save data.',
+});
+
+createToast({
+  type: 'success',
+  message: 'Data saved successfully!',
+});
+```
+
+## Contributing
+Contributions are welcome! Please read the [CONTRIBUTING.md]() for details on our code of conduct, and the process for submitting pull requests.
 
+## License
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details.

package/dist/index.cjs.js

@@ -15,5 +15,5 @@
  * License: MIT
  * Dependencies: None
  */
-let e={info:"blue",success:"green",error:"red",warning:"darkorange"},t={info:"This is an info message.",success:"Action completed successfully!",error:"An error occurred!",warning:"This is a warning message!"};const o=[];let s=!1;function n(){if(0===o.length||s)return;s=!0;const{message:r,duration:i,position:a,type:l,backgroundColor:c,textColor:d,showCloseButton:u}=o.shift(),p=r||t[l]||"This is a default message.",y=c||e[l]||"gray",g=d||("white"===y?"black":"white");let m=document.getElementById(`toast-container-${a}`);m||(m=document.createElement("div"),m.id=`toast-container-${a}`,m.style.position="fixed",m.style.zIndex="9999",a.includes("bottom")?m.style.bottom="10px":a.includes("top")&&(m.style.top="10px"),a.includes("right")?m.style.right="10px":a.includes("left")?m.style.left="10px":a.includes("center")&&(m.style.left="50%",m.style.transform="translateX(-50%)"),document.body.appendChild(m));const f=document.createElement("div");if(f.textContent=p,f.style.background=y,f.style.color=g,f.style.padding="10px 20px",f.style.marginTop="10px",f.style.borderRadius="5px",f.style.boxShadow="0 0 10px rgba(0, 0, 0, 0.1)",f.style.opacity="0",f.style.transition="opacity 0.5s",u){const e=document.createElement("button");e.textContent="×",e.style.marginLeft="10px",e.style.background="transparent",e.style.border="none",e.style.color=g,e.style.cursor="pointer",e.onclick=()=>{f.style.opacity="0",f.addEventListener("transitionend",(()=>{f.remove(),s=!1,n(),m.hasChildNodes()||m.remove()}))},f.appendChild(e)}m.appendChild(f),requestAnimationFrame((()=>{f.style.opacity="1"})),setTimeout((()=>{f.parentNode&&(f.style.opacity="0",f.addEventListener("transitionend",(()=>{f.remove(),s=!1,n(),m.hasChildNodes()||m.remove()})))}),i)}exports.createToast=function(e){const{message:t,duration:s=3e3,position:r="bottom-right",type:i="info",backgroundColor:a,textColor:l,showCloseButton:c=!1}=e;o.push({message:t,duration:s,position:r,type:i,backgroundColor:a,textColor:l,showCloseButton:c}),n()},exports.setDefaultColors=function(t){Object.assign(e,t)},exports.setDefaultMessages=function(e){Object.assign(t,e)};
+let t={info:"blue",success:"green",error:"red",warning:"darkorange"},e={info:"This is an info message.",success:"Action completed successfully!",error:"An error occurred!",warning:"This is a warning message!"},o=!1;exports.createToast=function(n){if("object"!=typeof n)return;const{message:s,duration:i,position:a="bottom-right",type:r="info",backgroundColor:l,textColor:c,showCloseButton:d=!1,animationDuration:u,animationEasing:p}=n;!function({message:n,duration:s,position:i,type:a,backgroundColor:r,textColor:l,showCloseButton:c,animationDuration:d,animationEasing:u}){if(o)return;o=!0;const p=n||e[a]||"This is a default message.",y=r||t[a]||"gray",m=l||("white"===y?"black":"white");let g=document.getElementById(`toast-container-${i}`);g||(g=document.createElement("div"),g.id=`toast-container-${i}`,g.style.position="fixed",g.style.zIndex="9999",i.includes("bottom")?g.style.bottom="10px":i.includes("top")&&(g.style.top="10px"),i.includes("right")?g.style.right="10px":i.includes("left")?g.style.left="10px":i.includes("center")&&(g.style.top="50%",g.style.left="50%",g.style.transform="translate(-50%, -50%)"),document.body.appendChild(g));const f=document.createElement("div");if(f.textContent=p,f.style.background=y,f.style.color=m,f.style.padding="10px 20px",f.style.marginTop="10px",f.style.borderRadius="5px",f.style.boxShadow="0 0 10px rgba(0, 0, 0, 0.1)",f.style.opacity="0",f.style.transition=`opacity ${d||"0.5s"} ${u||"ease"}`,c){const t=document.createElement("button");t.textContent="×",t.style.marginLeft="10px",t.style.background="transparent",t.style.border="none",t.style.color=m,t.style.cursor="pointer",t.onclick=()=>{f.style.opacity="0",f.addEventListener("transitionend",(()=>{f.remove(),o=!1}))},f.appendChild(t)}g.appendChild(f),requestAnimationFrame((()=>{f.style.opacity="1"})),setTimeout((()=>{f.parentNode&&(f.style.opacity="0",f.addEventListener("transitionend",(()=>{f.remove(),o=!1})))}),s||3e3)}({message:s,duration:i||3e3,position:a,type:r,backgroundColor:l,textColor:c,showCloseButton:d,animationDuration:u,animationEasing:p})},exports.setDefaultColors=function(e){"object"==typeof e&&Object.assign(t,e)},exports.setDefaultMessages=function(t){"object"==typeof t&&Object.assign(e,t)};
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../src/index.js"],"sourcesContent":["\"use strict\";\r\n\r\n/**\r\n * @fileoverview A simple toast notification library for any JavaScript framework.\r\n * @name Toast Notifications\r\n * @author Priyanshu Patel\r\n * @version 1.0.0\r\n * @license MIT\r\n * @depends None\r\n * @description This library provides a simple way to create toast notifications.\r\n * Author: Priyanshu Patel\r\n * Email: priyanshu.alt191@gmail.com\r\n * Created: July 31, 2024\r\n * Description: A simple toast notification library for any JavaScript framework.\r\n * Version: 1.0.0\r\n * License: MIT\r\n * Dependencies: None\r\n */\r\n\r\n/**\r\n * Creates a toast notification.\r\n *\r\n * @param {Object} options - Options for the toast notification.\r\n * @param {string} [options.message] - The message to display in the toast. Defaults based on type if not provided.\r\n * @param {number} [options.duration=3000] - The duration the toast should be displayed, in milliseconds.\r\n * @param {string} [options.position='bottom-right'] - The position of the toast on the screen.\r\n * @param {string} [options.type='info'] - The type of the toast ('info', 'success', 'error', 'warning').\r\n * @param {string} [options.backgroundColor] - Custom background color for the toast notification.\r\n * @param {string} [options.textColor='white'] - Custom text color for the toast notification.\r\n * @param {string} [options.animationDuration='0.5s'] - Duration of the fade-in and fade-out animations.\r\n * @param {string} [options.animationEasing='ease'] - Easing function for the animations.\r\n * @param {boolean} [options.showCloseButton=false] - Whether to show a close button.\r\n * @return {void}\r\n */\r\n\r\n/** ########################################### Defaults ############################################ */\r\n\r\nlet defaultColors = {\r\n  info: \"blue\",\r\n  success: \"green\",\r\n  error: \"red\",\r\n  warning: \"darkorange\",\r\n};\r\n\r\nlet defaultMessages = {\r\n  info: \"This is an info message.\",\r\n  success: \"Action completed successfully!\",\r\n  error: \"An error occurred!\",\r\n  warning: \"This is a warning message!\",\r\n};\r\n\r\n// Queue to manage active toasts\r\nconst toastQueue = [];\r\nlet isToastShowing = false;\r\n\r\nfunction showNextToast() {\r\n  if (toastQueue.length === 0 || isToastShowing) return;\r\n\r\n  isToastShowing = true;\r\n  const { message, duration, position, type, backgroundColor, textColor, showCloseButton } = toastQueue.shift();\r\n\r\n  const finalMessage = message || defaultMessages[type] || \"This is a default message.\";\r\n  const toastBackgroundColor = backgroundColor || defaultColors[type] || \"gray\"; // Use backgroundColor first\r\n  const toastTextColor = textColor || (toastBackgroundColor === \"white\" ? \"black\" : \"white\");\r\n\r\n  let toastContainer = document.getElementById(`toast-container-${position}`);\r\n  if (!toastContainer) {\r\n    toastContainer = document.createElement(\"div\");\r\n    toastContainer.id = `toast-container-${position}`;\r\n    toastContainer.style.position = \"fixed\";\r\n    toastContainer.style.zIndex = \"9999\";\r\n\r\n    if (position.includes(\"bottom\")) {\r\n      toastContainer.style.bottom = \"10px\";\r\n    } else if (position.includes(\"top\")) {\r\n      toastContainer.style.top = \"10px\";\r\n    }\r\n\r\n    if (position.includes(\"right\")) {\r\n      toastContainer.style.right = \"10px\";\r\n    } else if (position.includes(\"left\")) {\r\n      toastContainer.style.left = \"10px\";\r\n    } else if (position.includes(\"center\")) {\r\n      toastContainer.style.left = \"50%\";\r\n      toastContainer.style.transform = \"translateX(-50%)\";\r\n    }\r\n\r\n    document.body.appendChild(toastContainer);\r\n  }\r\n\r\n  const toast = document.createElement(\"div\");\r\n  toast.textContent = finalMessage;\r\n  toast.style.background = toastBackgroundColor; // Use the determined background color\r\n  toast.style.color = toastTextColor;\r\n  toast.style.padding = \"10px 20px\";\r\n  toast.style.marginTop = \"10px\";\r\n  toast.style.borderRadius = \"5px\";\r\n  toast.style.boxShadow = \"0 0 10px rgba(0, 0, 0, 0.1)\";\r\n  toast.style.opacity = \"0\";\r\n  toast.style.transition = \"opacity 0.5s\";\r\n\r\n  // Close button\r\n  if (showCloseButton) {\r\n    const closeButton = document.createElement(\"button\");\r\n    closeButton.textContent = \"×\";\r\n    closeButton.style.marginLeft = \"10px\";\r\n    closeButton.style.background = \"transparent\";\r\n    closeButton.style.border = \"none\";\r\n    closeButton.style.color = toastTextColor;\r\n    closeButton.style.cursor = \"pointer\";\r\n\r\n    closeButton.onclick = () => {\r\n      toast.style.opacity = \"0\"; // Start fade out\r\n      toast.addEventListener(\"transitionend\", () => {\r\n        toast.remove();\r\n        isToastShowing = false;\r\n        showNextToast(); // Show the next toast in the queue\r\n        if (!toastContainer.hasChildNodes()) {\r\n          toastContainer.remove();\r\n        }\r\n      });\r\n    };\r\n\r\n    toast.appendChild(closeButton);\r\n  }\r\n\r\n  toastContainer.appendChild(toast);\r\n\r\n  requestAnimationFrame(() => {\r\n    toast.style.opacity = \"1\";\r\n  });\r\n\r\n  setTimeout(() => {\r\n    if (toast.parentNode) {\r\n      toast.style.opacity = \"0\";\r\n      toast.addEventListener(\"transitionend\", () => {\r\n        toast.remove();\r\n        isToastShowing = false;\r\n        showNextToast(); // Show the next toast in the queue\r\n        if (!toastContainer.hasChildNodes()) {\r\n          toastContainer.remove();\r\n        }\r\n      });\r\n    }\r\n  }, duration);\r\n}\r\n\r\nfunction createToast(options) {\r\n  const {\r\n    message,\r\n    duration = 3000,\r\n    position = \"bottom-right\",\r\n    type = \"info\",\r\n    backgroundColor,\r\n    textColor,\r\n    showCloseButton = false,\r\n  } = options;\r\n\r\n  toastQueue.push({\r\n    message,\r\n    duration,\r\n    position,\r\n    type,\r\n    backgroundColor,\r\n    textColor,\r\n    showCloseButton,\r\n  });\r\n  \r\n  showNextToast(); // Attempt to show the next toast\r\n}\r\n\r\nfunction setDefaultColors(newColors) {\r\n  Object.assign(defaultColors, newColors);\r\n}\r\n\r\nfunction setDefaultMessages(newMessages) {\r\n  Object.assign(defaultMessages, newMessages);\r\n}\r\n\r\nexport { createToast, setDefaultColors, setDefaultMessages };\r\n"],"names":["defaultColors","info","success","error","warning","defaultMessages","toastQueue","isToastShowing","showNextToast","length","message","duration","position","type","backgroundColor","textColor","showCloseButton","shift","finalMessage","toastBackgroundColor","toastTextColor","toastContainer","document","getElementById","createElement","id","style","zIndex","includes","bottom","top","right","left","transform","body","appendChild","toast","textContent","background","color","padding","marginTop","borderRadius","boxShadow","opacity","transition","closeButton","marginLeft","border","cursor","onclick","addEventListener","remove","hasChildNodes","requestAnimationFrame","setTimeout","parentNode","options","push","newColors","Object","assign","newMessages"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../src/index.js"],"sourcesContent":["\"use strict\";\r\n\r\n/**\r\n * @fileoverview A simple toast notification library for any JavaScript framework.\r\n * @name Toast Notifications\r\n * @author Priyanshu Patel\r\n * @version 1.0.0\r\n * @license MIT\r\n * @depends None\r\n * @description This library provides a simple way to create toast notifications.\r\n * Author: Priyanshu Patel\r\n * Email: priyanshu.alt191@gmail.com\r\n * Created: July 31, 2024\r\n * Description: A simple toast notification library for any JavaScript framework.\r\n * Version: 1.0.0\r\n * License: MIT\r\n * Dependencies: None\r\n */\r\n\r\n/**\r\n * Creates a toast notification.\r\n *\r\n * @param {Object} options - Options for the toast notification.\r\n * @param {string} [options.message] - The message to display in the toast. Defaults based on type if not provided.\r\n * @param {number} [options.duration=3000] - The duration the toast should be displayed, in milliseconds.\r\n * @param {string} [options.position='bottom-right'] - The position of the toast on the screen.\r\n * @param {string} [options.type='info'] - The type of the toast ('info', 'success', 'error', 'warning').\r\n * @param {string} [options.backgroundColor] - Custom background color for the toast notification.\r\n * @param {string} [options.textColor='white'] - Custom text color for the toast notification.\r\n * @param {string} [options.animationDuration='0.5s'] - Duration of the fade-in and fade-out animations.\r\n * @param {string} [options.animationEasing='ease'] - Easing function for the animations.\r\n * @param {boolean} [options.showCloseButton=false] - Whether to show a close button.\r\n * @return {void}\r\n */\r\n\r\n/** ########################################### Defaults ############################################ */\r\n\r\nlet defaultColors = {\r\n  info: \"blue\",\r\n  success: \"green\",\r\n  error: \"red\",\r\n  warning: \"darkorange\",\r\n};\r\n\r\nlet defaultMessages = {\r\n  info: \"This is an info message.\",\r\n  success: \"Action completed successfully!\",\r\n  error: \"An error occurred!\",\r\n  warning: \"This is a warning message!\",\r\n};\r\n\r\n// Flag to manage if a toast is currently being shown\r\nlet isToastShowing = false;\r\n\r\nfunction showToast({ message, duration, position, type, backgroundColor, textColor, showCloseButton, animationDuration, animationEasing }) {\r\n  if (isToastShowing) return;\r\n\r\n  isToastShowing = true;\r\n\r\n  const finalMessage = message || defaultMessages[type] || \"This is a default message.\";\r\n  const toastBackgroundColor = backgroundColor || defaultColors[type] || \"gray\";\r\n  const toastTextColor = textColor || (toastBackgroundColor === \"white\" ? \"black\" : \"white\");\r\n\r\n  let toastContainer = document.getElementById(`toast-container-${position}`);\r\n  if (!toastContainer) {\r\n    toastContainer = document.createElement(\"div\");\r\n    toastContainer.id = `toast-container-${position}`;\r\n    toastContainer.style.position = \"fixed\";\r\n    toastContainer.style.zIndex = \"9999\";\r\n\r\n    // Positioning logic\r\n    if (position.includes(\"bottom\")) {\r\n      toastContainer.style.bottom = \"10px\";\r\n    } else if (position.includes(\"top\")) {\r\n      toastContainer.style.top = \"10px\";\r\n    }\r\n\r\n    if (position.includes(\"right\")) {\r\n      toastContainer.style.right = \"10px\";\r\n    } else if (position.includes(\"left\")) {\r\n      toastContainer.style.left = \"10px\";\r\n    } else if (position.includes(\"center\")) {\r\n      toastContainer.style.top = \"50%\";\r\n      toastContainer.style.left = \"50%\";\r\n      toastContainer.style.transform = \"translate(-50%, -50%)\";\r\n    }\r\n\r\n    document.body.appendChild(toastContainer);\r\n  }\r\n\r\n  const toast = document.createElement(\"div\");\r\n  toast.textContent = finalMessage;\r\n  toast.style.background = toastBackgroundColor;\r\n  toast.style.color = toastTextColor;\r\n  toast.style.padding = \"10px 20px\";\r\n  toast.style.marginTop = \"10px\";\r\n  toast.style.borderRadius = \"5px\";\r\n  toast.style.boxShadow = \"0 0 10px rgba(0, 0, 0, 0.1)\";\r\n  toast.style.opacity = \"0\";\r\n  toast.style.transition = `opacity ${animationDuration || '0.5s'} ${animationEasing || 'ease'}`;\r\n\r\n  // Close button\r\n  if (showCloseButton) {\r\n    const closeButton = document.createElement(\"button\");\r\n    closeButton.textContent = \"×\";\r\n    closeButton.style.marginLeft = \"10px\";\r\n    closeButton.style.background = \"transparent\";\r\n    closeButton.style.border = \"none\";\r\n    closeButton.style.color = toastTextColor;\r\n    closeButton.style.cursor = \"pointer\";\r\n\r\n    closeButton.onclick = () => {\r\n      toast.style.opacity = \"0\"; // Start fade out\r\n      toast.addEventListener(\"transitionend\", () => {\r\n        toast.remove();\r\n        isToastShowing = false; // Reset the flag when the toast is removed\r\n      });\r\n    };\r\n\r\n    toast.appendChild(closeButton);\r\n  }\r\n\r\n  toastContainer.appendChild(toast);\r\n\r\n  requestAnimationFrame(() => {\r\n    toast.style.opacity = \"1\"; // Fade in effect\r\n  });\r\n\r\n  setTimeout(() => {\r\n    if (toast.parentNode) {\r\n      toast.style.opacity = \"0\"; // Fade out effect\r\n      toast.addEventListener(\"transitionend\", () => {\r\n        toast.remove();\r\n        isToastShowing = false; // Reset the flag when the toast is removed\r\n      });\r\n    }\r\n  }, duration || 3000);\r\n}\r\n\r\n/**\r\n * Create a toast notification with the provided options.\r\n * \r\n * @param {Object} options - Options for the toast notification.\r\n * @param {string} [options.message] - The message to display in the toast.\r\n * @param {number} [options.duration=3000] - The duration of the toast in milliseconds.\r\n * @param {string} [options.position='bottom-right'] - The position of the toast.\r\n * @param {string} [options.type='info'] - The type of the toast.\r\n * @param {string} [options.backgroundColor] - The custom background color.\r\n * @param {string} [options.textColor='white'] - The custom text color.\r\n * @param {boolean} [options.showCloseButton=false] - Whether to show a close button.\r\n * @param {string} [options.animationDuration='0.5s'] - Duration of animations.\r\n * @param {string} [options.animationEasing='ease'] - Easing function for animations.\r\n * @return {void}\r\n */\r\nfunction createToast(options) {\r\n  // Validate options\r\n  if (typeof options !== 'object') {\r\n    console.error(\"Options should be an object.\");\r\n    return;\r\n  }\r\n\r\n  const {\r\n    message,\r\n    duration,\r\n    position = \"bottom-right\",\r\n    type = \"info\",\r\n    backgroundColor,\r\n    textColor,\r\n    showCloseButton = false,\r\n    animationDuration,\r\n    animationEasing,\r\n  } = options;\r\n\r\n  // Validate duration\r\n  if (duration && typeof duration !== 'number') {\r\n    console.warn(\"Duration should be a number. Falling back to default value.\");\r\n  }\r\n\r\n  showToast({ message, duration: duration || 3000, position, type, backgroundColor, textColor, showCloseButton, animationDuration, animationEasing });\r\n}\r\n\r\n/**\r\n * Set default colors for toast types.\r\n * \r\n * @param {Object} newColors - New colors to set for toast types.\r\n * @return {void}\r\n */\r\nfunction setDefaultColors(newColors) {\r\n  // Validate newColors\r\n  if (typeof newColors !== 'object') {\r\n    console.error(\"New colors should be an object.\");\r\n    return;\r\n  }\r\n  \r\n  Object.assign(defaultColors, newColors);\r\n}\r\n\r\n/**\r\n * Set default messages for toast types.\r\n * \r\n * @param {Object} newMessages - New messages to set for toast types.\r\n * @return {void}\r\n */\r\nfunction setDefaultMessages(newMessages) {\r\n  // Validate newMessages\r\n  if (typeof newMessages !== 'object') {\r\n    console.error(\"New messages should be an object.\");\r\n    return;\r\n  }\r\n\r\n  Object.assign(defaultMessages, newMessages);\r\n}\r\n\r\nexport { createToast, setDefaultColors, setDefaultMessages };\r\n"],"names":["defaultColors","info","success","error","warning","defaultMessages","isToastShowing","options","message","duration","position","type","backgroundColor","textColor","showCloseButton","animationDuration","animationEasing","finalMessage","toastBackgroundColor","toastTextColor","toastContainer","document","getElementById","createElement","id","style","zIndex","includes","bottom","top","right","left","transform","body","appendChild","toast","textContent","background","color","padding","marginTop","borderRadius","boxShadow","opacity","transition","closeButton","marginLeft","border","cursor","onclick","addEventListener","remove","requestAnimationFrame","setTimeout","parentNode","showToast","newColors","Object","assign","newMessages"],"mappings":"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"}

package/dist/index.esm.mjs

@@ -14,5 +14,5 @@
  * License: MIT
  * Dependencies: None
  */
-let e={info:"blue",success:"green",error:"red",warning:"darkorange"},t={info:"This is an info message.",success:"Action completed successfully!",error:"An error occurred!",warning:"This is a warning message!"};const o=[];let n=!1;function s(){if(0===o.length||n)return;n=!0;const{message:i,duration:r,position:l,type:a,backgroundColor:c,textColor:d,showCloseButton:u}=o.shift(),p=i||t[a]||"This is a default message.",y=c||e[a]||"gray",m=d||("white"===y?"black":"white");let g=document.getElementById(`toast-container-${l}`);g||(g=document.createElement("div"),g.id=`toast-container-${l}`,g.style.position="fixed",g.style.zIndex="9999",l.includes("bottom")?g.style.bottom="10px":l.includes("top")&&(g.style.top="10px"),l.includes("right")?g.style.right="10px":l.includes("left")?g.style.left="10px":l.includes("center")&&(g.style.left="50%",g.style.transform="translateX(-50%)"),document.body.appendChild(g));const h=document.createElement("div");if(h.textContent=p,h.style.background=y,h.style.color=m,h.style.padding="10px 20px",h.style.marginTop="10px",h.style.borderRadius="5px",h.style.boxShadow="0 0 10px rgba(0, 0, 0, 0.1)",h.style.opacity="0",h.style.transition="opacity 0.5s",u){const e=document.createElement("button");e.textContent="×",e.style.marginLeft="10px",e.style.background="transparent",e.style.border="none",e.style.color=m,e.style.cursor="pointer",e.onclick=()=>{h.style.opacity="0",h.addEventListener("transitionend",(()=>{h.remove(),n=!1,s(),g.hasChildNodes()||g.remove()}))},h.appendChild(e)}g.appendChild(h),requestAnimationFrame((()=>{h.style.opacity="1"})),setTimeout((()=>{h.parentNode&&(h.style.opacity="0",h.addEventListener("transitionend",(()=>{h.remove(),n=!1,s(),g.hasChildNodes()||g.remove()})))}),r)}function i(e){const{message:t,duration:n=3e3,position:i="bottom-right",type:r="info",backgroundColor:l,textColor:a,showCloseButton:c=!1}=e;o.push({message:t,duration:n,position:i,type:r,backgroundColor:l,textColor:a,showCloseButton:c}),s()}function r(t){Object.assign(e,t)}function l(e){Object.assign(t,e)}export{i as createToast,r as setDefaultColors,l as setDefaultMessages};
+let t={info:"blue",success:"green",error:"red",warning:"darkorange"},e={info:"This is an info message.",success:"Action completed successfully!",error:"An error occurred!",warning:"This is a warning message!"},o=!1;function n(n){if("object"!=typeof n)return;const{message:s,duration:i,position:a="bottom-right",type:r="info",backgroundColor:l,textColor:c,showCloseButton:d=!1,animationDuration:u,animationEasing:p}=n;!function({message:n,duration:s,position:i,type:a,backgroundColor:r,textColor:l,showCloseButton:c,animationDuration:d,animationEasing:u}){if(o)return;o=!0;const p=n||e[a]||"This is a default message.",y=r||t[a]||"gray",m=l||("white"===y?"black":"white");let g=document.getElementById(`toast-container-${i}`);g||(g=document.createElement("div"),g.id=`toast-container-${i}`,g.style.position="fixed",g.style.zIndex="9999",i.includes("bottom")?g.style.bottom="10px":i.includes("top")&&(g.style.top="10px"),i.includes("right")?g.style.right="10px":i.includes("left")?g.style.left="10px":i.includes("center")&&(g.style.top="50%",g.style.left="50%",g.style.transform="translate(-50%, -50%)"),document.body.appendChild(g));const f=document.createElement("div");if(f.textContent=p,f.style.background=y,f.style.color=m,f.style.padding="10px 20px",f.style.marginTop="10px",f.style.borderRadius="5px",f.style.boxShadow="0 0 10px rgba(0, 0, 0, 0.1)",f.style.opacity="0",f.style.transition=`opacity ${d||"0.5s"} ${u||"ease"}`,c){const t=document.createElement("button");t.textContent="×",t.style.marginLeft="10px",t.style.background="transparent",t.style.border="none",t.style.color=m,t.style.cursor="pointer",t.onclick=()=>{f.style.opacity="0",f.addEventListener("transitionend",(()=>{f.remove(),o=!1}))},f.appendChild(t)}g.appendChild(f),requestAnimationFrame((()=>{f.style.opacity="1"})),setTimeout((()=>{f.parentNode&&(f.style.opacity="0",f.addEventListener("transitionend",(()=>{f.remove(),o=!1})))}),s||3e3)}({message:s,duration:i||3e3,position:a,type:r,backgroundColor:l,textColor:c,showCloseButton:d,animationDuration:u,animationEasing:p})}function s(e){"object"==typeof e&&Object.assign(t,e)}function i(t){"object"==typeof t&&Object.assign(e,t)}export{n as createToast,s as setDefaultColors,i as setDefaultMessages};
 //# sourceMappingURL=index.esm.mjs.map

package/dist/index.esm.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.mjs","sources":["../src/index.js"],"sourcesContent":["\"use strict\";\r\n\r\n/**\r\n * @fileoverview A simple toast notification library for any JavaScript framework.\r\n * @name Toast Notifications\r\n * @author Priyanshu Patel\r\n * @version 1.0.0\r\n * @license MIT\r\n * @depends None\r\n * @description This library provides a simple way to create toast notifications.\r\n * Author: Priyanshu Patel\r\n * Email: priyanshu.alt191@gmail.com\r\n * Created: July 31, 2024\r\n * Description: A simple toast notification library for any JavaScript framework.\r\n * Version: 1.0.0\r\n * License: MIT\r\n * Dependencies: None\r\n */\r\n\r\n/**\r\n * Creates a toast notification.\r\n *\r\n * @param {Object} options - Options for the toast notification.\r\n * @param {string} [options.message] - The message to display in the toast. Defaults based on type if not provided.\r\n * @param {number} [options.duration=3000] - The duration the toast should be displayed, in milliseconds.\r\n * @param {string} [options.position='bottom-right'] - The position of the toast on the screen.\r\n * @param {string} [options.type='info'] - The type of the toast ('info', 'success', 'error', 'warning').\r\n * @param {string} [options.backgroundColor] - Custom background color for the toast notification.\r\n * @param {string} [options.textColor='white'] - Custom text color for the toast notification.\r\n * @param {string} [options.animationDuration='0.5s'] - Duration of the fade-in and fade-out animations.\r\n * @param {string} [options.animationEasing='ease'] - Easing function for the animations.\r\n * @param {boolean} [options.showCloseButton=false] - Whether to show a close button.\r\n * @return {void}\r\n */\r\n\r\n/** ########################################### Defaults ############################################ */\r\n\r\nlet defaultColors = {\r\n  info: \"blue\",\r\n  success: \"green\",\r\n  error: \"red\",\r\n  warning: \"darkorange\",\r\n};\r\n\r\nlet defaultMessages = {\r\n  info: \"This is an info message.\",\r\n  success: \"Action completed successfully!\",\r\n  error: \"An error occurred!\",\r\n  warning: \"This is a warning message!\",\r\n};\r\n\r\n// Queue to manage active toasts\r\nconst toastQueue = [];\r\nlet isToastShowing = false;\r\n\r\nfunction showNextToast() {\r\n  if (toastQueue.length === 0 || isToastShowing) return;\r\n\r\n  isToastShowing = true;\r\n  const { message, duration, position, type, backgroundColor, textColor, showCloseButton } = toastQueue.shift();\r\n\r\n  const finalMessage = message || defaultMessages[type] || \"This is a default message.\";\r\n  const toastBackgroundColor = backgroundColor || defaultColors[type] || \"gray\"; // Use backgroundColor first\r\n  const toastTextColor = textColor || (toastBackgroundColor === \"white\" ? \"black\" : \"white\");\r\n\r\n  let toastContainer = document.getElementById(`toast-container-${position}`);\r\n  if (!toastContainer) {\r\n    toastContainer = document.createElement(\"div\");\r\n    toastContainer.id = `toast-container-${position}`;\r\n    toastContainer.style.position = \"fixed\";\r\n    toastContainer.style.zIndex = \"9999\";\r\n\r\n    if (position.includes(\"bottom\")) {\r\n      toastContainer.style.bottom = \"10px\";\r\n    } else if (position.includes(\"top\")) {\r\n      toastContainer.style.top = \"10px\";\r\n    }\r\n\r\n    if (position.includes(\"right\")) {\r\n      toastContainer.style.right = \"10px\";\r\n    } else if (position.includes(\"left\")) {\r\n      toastContainer.style.left = \"10px\";\r\n    } else if (position.includes(\"center\")) {\r\n      toastContainer.style.left = \"50%\";\r\n      toastContainer.style.transform = \"translateX(-50%)\";\r\n    }\r\n\r\n    document.body.appendChild(toastContainer);\r\n  }\r\n\r\n  const toast = document.createElement(\"div\");\r\n  toast.textContent = finalMessage;\r\n  toast.style.background = toastBackgroundColor; // Use the determined background color\r\n  toast.style.color = toastTextColor;\r\n  toast.style.padding = \"10px 20px\";\r\n  toast.style.marginTop = \"10px\";\r\n  toast.style.borderRadius = \"5px\";\r\n  toast.style.boxShadow = \"0 0 10px rgba(0, 0, 0, 0.1)\";\r\n  toast.style.opacity = \"0\";\r\n  toast.style.transition = \"opacity 0.5s\";\r\n\r\n  // Close button\r\n  if (showCloseButton) {\r\n    const closeButton = document.createElement(\"button\");\r\n    closeButton.textContent = \"×\";\r\n    closeButton.style.marginLeft = \"10px\";\r\n    closeButton.style.background = \"transparent\";\r\n    closeButton.style.border = \"none\";\r\n    closeButton.style.color = toastTextColor;\r\n    closeButton.style.cursor = \"pointer\";\r\n\r\n    closeButton.onclick = () => {\r\n      toast.style.opacity = \"0\"; // Start fade out\r\n      toast.addEventListener(\"transitionend\", () => {\r\n        toast.remove();\r\n        isToastShowing = false;\r\n        showNextToast(); // Show the next toast in the queue\r\n        if (!toastContainer.hasChildNodes()) {\r\n          toastContainer.remove();\r\n        }\r\n      });\r\n    };\r\n\r\n    toast.appendChild(closeButton);\r\n  }\r\n\r\n  toastContainer.appendChild(toast);\r\n\r\n  requestAnimationFrame(() => {\r\n    toast.style.opacity = \"1\";\r\n  });\r\n\r\n  setTimeout(() => {\r\n    if (toast.parentNode) {\r\n      toast.style.opacity = \"0\";\r\n      toast.addEventListener(\"transitionend\", () => {\r\n        toast.remove();\r\n        isToastShowing = false;\r\n        showNextToast(); // Show the next toast in the queue\r\n        if (!toastContainer.hasChildNodes()) {\r\n          toastContainer.remove();\r\n        }\r\n      });\r\n    }\r\n  }, duration);\r\n}\r\n\r\nfunction createToast(options) {\r\n  const {\r\n    message,\r\n    duration = 3000,\r\n    position = \"bottom-right\",\r\n    type = \"info\",\r\n    backgroundColor,\r\n    textColor,\r\n    showCloseButton = false,\r\n  } = options;\r\n\r\n  toastQueue.push({\r\n    message,\r\n    duration,\r\n    position,\r\n    type,\r\n    backgroundColor,\r\n    textColor,\r\n    showCloseButton,\r\n  });\r\n  \r\n  showNextToast(); // Attempt to show the next toast\r\n}\r\n\r\nfunction setDefaultColors(newColors) {\r\n  Object.assign(defaultColors, newColors);\r\n}\r\n\r\nfunction setDefaultMessages(newMessages) {\r\n  Object.assign(defaultMessages, newMessages);\r\n}\r\n\r\nexport { createToast, setDefaultColors, setDefaultMessages };\r\n"],"names":["defaultColors","info","success","error","warning","defaultMessages","toastQueue","isToastShowing","showNextToast","length","message","duration","position","type","backgroundColor","textColor","showCloseButton","shift","finalMessage","toastBackgroundColor","toastTextColor","toastContainer","document","getElementById","createElement","id","style","zIndex","includes","bottom","top","right","left","transform","body","appendChild","toast","textContent","background","color","padding","marginTop","borderRadius","boxShadow","opacity","transition","closeButton","marginLeft","border","cursor","onclick","addEventListener","remove","hasChildNodes","requestAnimationFrame","setTimeout","parentNode","createToast","options","push","setDefaultColors","newColors","Object","assign","setDefaultMessages","newMessages"],"mappings":"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"}
+{"version":3,"file":"index.esm.mjs","sources":["../src/index.js"],"sourcesContent":["\"use strict\";\r\n\r\n/**\r\n * @fileoverview A simple toast notification library for any JavaScript framework.\r\n * @name Toast Notifications\r\n * @author Priyanshu Patel\r\n * @version 1.0.0\r\n * @license MIT\r\n * @depends None\r\n * @description This library provides a simple way to create toast notifications.\r\n * Author: Priyanshu Patel\r\n * Email: priyanshu.alt191@gmail.com\r\n * Created: July 31, 2024\r\n * Description: A simple toast notification library for any JavaScript framework.\r\n * Version: 1.0.0\r\n * License: MIT\r\n * Dependencies: None\r\n */\r\n\r\n/**\r\n * Creates a toast notification.\r\n *\r\n * @param {Object} options - Options for the toast notification.\r\n * @param {string} [options.message] - The message to display in the toast. Defaults based on type if not provided.\r\n * @param {number} [options.duration=3000] - The duration the toast should be displayed, in milliseconds.\r\n * @param {string} [options.position='bottom-right'] - The position of the toast on the screen.\r\n * @param {string} [options.type='info'] - The type of the toast ('info', 'success', 'error', 'warning').\r\n * @param {string} [options.backgroundColor] - Custom background color for the toast notification.\r\n * @param {string} [options.textColor='white'] - Custom text color for the toast notification.\r\n * @param {string} [options.animationDuration='0.5s'] - Duration of the fade-in and fade-out animations.\r\n * @param {string} [options.animationEasing='ease'] - Easing function for the animations.\r\n * @param {boolean} [options.showCloseButton=false] - Whether to show a close button.\r\n * @return {void}\r\n */\r\n\r\n/** ########################################### Defaults ############################################ */\r\n\r\nlet defaultColors = {\r\n  info: \"blue\",\r\n  success: \"green\",\r\n  error: \"red\",\r\n  warning: \"darkorange\",\r\n};\r\n\r\nlet defaultMessages = {\r\n  info: \"This is an info message.\",\r\n  success: \"Action completed successfully!\",\r\n  error: \"An error occurred!\",\r\n  warning: \"This is a warning message!\",\r\n};\r\n\r\n// Flag to manage if a toast is currently being shown\r\nlet isToastShowing = false;\r\n\r\nfunction showToast({ message, duration, position, type, backgroundColor, textColor, showCloseButton, animationDuration, animationEasing }) {\r\n  if (isToastShowing) return;\r\n\r\n  isToastShowing = true;\r\n\r\n  const finalMessage = message || defaultMessages[type] || \"This is a default message.\";\r\n  const toastBackgroundColor = backgroundColor || defaultColors[type] || \"gray\";\r\n  const toastTextColor = textColor || (toastBackgroundColor === \"white\" ? \"black\" : \"white\");\r\n\r\n  let toastContainer = document.getElementById(`toast-container-${position}`);\r\n  if (!toastContainer) {\r\n    toastContainer = document.createElement(\"div\");\r\n    toastContainer.id = `toast-container-${position}`;\r\n    toastContainer.style.position = \"fixed\";\r\n    toastContainer.style.zIndex = \"9999\";\r\n\r\n    // Positioning logic\r\n    if (position.includes(\"bottom\")) {\r\n      toastContainer.style.bottom = \"10px\";\r\n    } else if (position.includes(\"top\")) {\r\n      toastContainer.style.top = \"10px\";\r\n    }\r\n\r\n    if (position.includes(\"right\")) {\r\n      toastContainer.style.right = \"10px\";\r\n    } else if (position.includes(\"left\")) {\r\n      toastContainer.style.left = \"10px\";\r\n    } else if (position.includes(\"center\")) {\r\n      toastContainer.style.top = \"50%\";\r\n      toastContainer.style.left = \"50%\";\r\n      toastContainer.style.transform = \"translate(-50%, -50%)\";\r\n    }\r\n\r\n    document.body.appendChild(toastContainer);\r\n  }\r\n\r\n  const toast = document.createElement(\"div\");\r\n  toast.textContent = finalMessage;\r\n  toast.style.background = toastBackgroundColor;\r\n  toast.style.color = toastTextColor;\r\n  toast.style.padding = \"10px 20px\";\r\n  toast.style.marginTop = \"10px\";\r\n  toast.style.borderRadius = \"5px\";\r\n  toast.style.boxShadow = \"0 0 10px rgba(0, 0, 0, 0.1)\";\r\n  toast.style.opacity = \"0\";\r\n  toast.style.transition = `opacity ${animationDuration || '0.5s'} ${animationEasing || 'ease'}`;\r\n\r\n  // Close button\r\n  if (showCloseButton) {\r\n    const closeButton = document.createElement(\"button\");\r\n    closeButton.textContent = \"×\";\r\n    closeButton.style.marginLeft = \"10px\";\r\n    closeButton.style.background = \"transparent\";\r\n    closeButton.style.border = \"none\";\r\n    closeButton.style.color = toastTextColor;\r\n    closeButton.style.cursor = \"pointer\";\r\n\r\n    closeButton.onclick = () => {\r\n      toast.style.opacity = \"0\"; // Start fade out\r\n      toast.addEventListener(\"transitionend\", () => {\r\n        toast.remove();\r\n        isToastShowing = false; // Reset the flag when the toast is removed\r\n      });\r\n    };\r\n\r\n    toast.appendChild(closeButton);\r\n  }\r\n\r\n  toastContainer.appendChild(toast);\r\n\r\n  requestAnimationFrame(() => {\r\n    toast.style.opacity = \"1\"; // Fade in effect\r\n  });\r\n\r\n  setTimeout(() => {\r\n    if (toast.parentNode) {\r\n      toast.style.opacity = \"0\"; // Fade out effect\r\n      toast.addEventListener(\"transitionend\", () => {\r\n        toast.remove();\r\n        isToastShowing = false; // Reset the flag when the toast is removed\r\n      });\r\n    }\r\n  }, duration || 3000);\r\n}\r\n\r\n/**\r\n * Create a toast notification with the provided options.\r\n * \r\n * @param {Object} options - Options for the toast notification.\r\n * @param {string} [options.message] - The message to display in the toast.\r\n * @param {number} [options.duration=3000] - The duration of the toast in milliseconds.\r\n * @param {string} [options.position='bottom-right'] - The position of the toast.\r\n * @param {string} [options.type='info'] - The type of the toast.\r\n * @param {string} [options.backgroundColor] - The custom background color.\r\n * @param {string} [options.textColor='white'] - The custom text color.\r\n * @param {boolean} [options.showCloseButton=false] - Whether to show a close button.\r\n * @param {string} [options.animationDuration='0.5s'] - Duration of animations.\r\n * @param {string} [options.animationEasing='ease'] - Easing function for animations.\r\n * @return {void}\r\n */\r\nfunction createToast(options) {\r\n  // Validate options\r\n  if (typeof options !== 'object') {\r\n    console.error(\"Options should be an object.\");\r\n    return;\r\n  }\r\n\r\n  const {\r\n    message,\r\n    duration,\r\n    position = \"bottom-right\",\r\n    type = \"info\",\r\n    backgroundColor,\r\n    textColor,\r\n    showCloseButton = false,\r\n    animationDuration,\r\n    animationEasing,\r\n  } = options;\r\n\r\n  // Validate duration\r\n  if (duration && typeof duration !== 'number') {\r\n    console.warn(\"Duration should be a number. Falling back to default value.\");\r\n  }\r\n\r\n  showToast({ message, duration: duration || 3000, position, type, backgroundColor, textColor, showCloseButton, animationDuration, animationEasing });\r\n}\r\n\r\n/**\r\n * Set default colors for toast types.\r\n * \r\n * @param {Object} newColors - New colors to set for toast types.\r\n * @return {void}\r\n */\r\nfunction setDefaultColors(newColors) {\r\n  // Validate newColors\r\n  if (typeof newColors !== 'object') {\r\n    console.error(\"New colors should be an object.\");\r\n    return;\r\n  }\r\n  \r\n  Object.assign(defaultColors, newColors);\r\n}\r\n\r\n/**\r\n * Set default messages for toast types.\r\n * \r\n * @param {Object} newMessages - New messages to set for toast types.\r\n * @return {void}\r\n */\r\nfunction setDefaultMessages(newMessages) {\r\n  // Validate newMessages\r\n  if (typeof newMessages !== 'object') {\r\n    console.error(\"New messages should be an object.\");\r\n    return;\r\n  }\r\n\r\n  Object.assign(defaultMessages, newMessages);\r\n}\r\n\r\nexport { createToast, setDefaultColors, setDefaultMessages };\r\n"],"names":["defaultColors","info","success","error","warning","defaultMessages","isToastShowing","createToast","options","message","duration","position","type","backgroundColor","textColor","showCloseButton","animationDuration","animationEasing","finalMessage","toastBackgroundColor","toastTextColor","toastContainer","document","getElementById","createElement","id","style","zIndex","includes","bottom","top","right","left","transform","body","appendChild","toast","textContent","background","color","padding","marginTop","borderRadius","boxShadow","opacity","transition","closeButton","marginLeft","border","cursor","onclick","addEventListener","remove","requestAnimationFrame","setTimeout","parentNode","showToast","setDefaultColors","newColors","Object","assign","setDefaultMessages","newMessages"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "customizable-toast-notification",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A highly customizable toast notification library for modern web applications.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
@@ -9,19 +9,15 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
+    "javascript-library",
+    "toast-notification-library",
+    "toast-notification",
     "toast",
     "notification",
     "customizable",
     "UI",
     "library",
     "JavaScript",
-    "ESM",
-    "CJS",
-    "best-toast-notification",
-    "best-library",
-    "priyanshu",
-    "priyanshu-patel",
-    "toast-notification",
     "npm-library",
     "toast-library",
     "toast",
@@ -29,7 +25,10 @@
     "npm",
     "npm-package",
     "javascript",
-    "javascript-library"
+    "best-toast-notification",
+    "best-library",
+    "ESM",
+    "CJS"
   ],
   "author": "Priyanshu Patel",
   "license": "MIT",
@@ -46,6 +45,6 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/sammy-cool/customizable-toast-notification"
+    "url": "git+https://github.com/sammy-cool/customizable-toast-notification.git"
   }
 }