d9-toast 1.1.16 → 1.1.18

package/README.md

@@ -10,11 +10,15 @@ Customizable toast notifications for React.
 * Pure CSS included — no additional setup required.  
 * Easy to import and use in any React project.  
 * Supports multiple types: success, error, info, warning, loading, submit.  
-* Fully responsive and modern UI.  
+* Fully responsive and modern UI and smooth animation.  
 * Users can optionally add Tailwind CSS classes via `className` for custom styling.
 
 ---
 
+## Demo
+
+[Click Here](https://codesandbox.io/embed/cqkyzm?view=preview&module=%2Fpublic%2Findex.html)
+
 ## Installation
 
 ```bash
@@ -40,7 +44,7 @@ import App from "./App";
 
 function Root() {
   return (
-    <ToastProvider position="top-right">
+    <ToastProvider>
       <App />
     </ToastProvider>
   );
@@ -57,16 +61,17 @@ import { useToast } from "d9-toast";
 
 function App() {
 
-  const { showToast, removeToast } = useToast();
+  const { showToast, removeToast, removeToastAll } = useToast();
 
   const Toast = () => {
     showToast({
       message: "Hello World!",
       type: "success", // success | error | info | warning | loading | submit
+      position: "top-right",
       duration: 3000,
       actions: [
-        { text: "Save", callback: () => console.log("Save clicked") },
-        { text: "Undo", callback: () => console.log("Undo clicked") },
+        { text: "Toast ID", callback: (toastId) => console.log(toastId) },
+        { text: "Submit", callback: () => console.log("Submit clicked") },
       ], 
       className: "bg-green-500 text-white shadow-lg", // optional Tailwind/custom styling
     });
@@ -78,26 +83,21 @@ function App() {
 export default App;
 ```
 
-### 3. ToastProvider Props
-
-| Prop               | Type    | Default     | Description                                                                     |
-| ------------------ | ------- | ----------- | ------------------------------------------------------------------------------- |
-| `position`         | string  | `top-right` | Position of all toasts (`top-left`, `top-right`, `bottom-left`, `bottom-right`, `center`, `center-top`, `center-bottom` ) |
-
-
-### 4. Toast Options
+### 3. Toast Options
 
 | Option     | Type    | Default | Description                                                                |
 | ---------- | ------- | ------- | -------------------------------------------------------------------------- |
-| `message`  | string  | -       | The message to display                                                     |
+| `message`  | string  | -       | Main message text of the toast                                                     |
 | `type`     | string  | `info`  | Type of toast (`success`, `error`, `info`, `warning`, `loading`, `submit`) |
 | `duration` | number  | 5000    | Auto-close duration in ms (0 for infinite)                                 |
+| `position`         | string  | `top-right` | Position of all toasts (`top-left`, `top-right`, `bottom-left`, `bottom-right`, `center`, `center-top`, `center-bottom` ) |
 | `theme`            | string  | `light`     | Default theme for all toasts (`light` or `dark`)                                |
-| `pauseOnHover`     | boolean | `true`      | Pause toast timer on hover                                                      |
-| `pauseOnFocusLoss` | boolean | `true`      | Pause toast timer when window loses focus                                       |
+| `pauseOnHover`     | boolean | `true`      | Pause timer when hovered                                                      |
+| `pauseOnFocusLoss` | boolean | `true`      | Pause timer when window/tab loses focus                                       |
 | `actions`  | array   | []      | Array of action objects `{ text: string, callback: function }`             |
-| `closable` | boolean | true    | Show close button                                                          |
-| `progress` | boolean | true    | Show progress bar                                                          |
+| `closable` | boolean | true    | Allow manual close via X button
+| `autoClose` | boolean | true    | Whether the toast auto-closes after duration button                                                           |
+| `progress` | boolean | true    | Whether to show progress bar                                                          |
 | `className` | string| " "   | Optional extra CSS/Tailwind classes to customize the toast bar                                                          |
 
 ---

package/dist/Toast.js

@@ -15,6 +15,8 @@ var Toast = function Toast(_ref) {
     type = _ref$type === void 0 ? "info" : _ref$type,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? "light" : _ref$theme,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? "top-right" : _ref$position,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     _ref$duration = _ref.duration,
@@ -22,9 +24,10 @@ var Toast = function Toast(_ref) {
     _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     remove = _ref.remove,
-    position = _ref.position,
     _ref$progress = _ref.progress,
     progress = _ref$progress === void 0 ? true : _ref$progress,
+    _ref$autoClose = _ref.autoClose,
+    autoClose = _ref$autoClose === void 0 ? true : _ref$autoClose,
     _ref$closable = _ref.closable,
     closable = _ref$closable === void 0 ? true : _ref$closable,
     _ref$pauseOnHover = _ref.pauseOnHover,
@@ -42,13 +45,23 @@ var Toast = function Toast(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isPaused = _useState4[0],
     setPaused = _useState4[1]; // For timer pause
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    exiting = _useState6[0],
+    setExiting = _useState6[1];
+
+  // Styles [Animation]
+  // entry animation [based on position]
+  var enterAnim = "".concat(position.startsWith("top") && "upToDown" || position.startsWith("bottom") && "downToUp" || position.endsWith("top") && "upToDown" || position.endsWith("bottom") && "downToUp" || "centerEnter", " 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards");
+
+  // exit animation [reverse direction]
+  var exitAnim = "".concat(position.startsWith("top") && "downToUpExit" || position.startsWith("bottom") && "upToDownExit" || position.endsWith("top") && "downToUpExit" || position.endsWith("bottom") && "upToDownExit" || "centerExit", " 0.25s cubic-bezier(0.39, 0.575, 0.565, 1) forwards");
 
   // Start auto-close timer.
   useEffect(function () {
-    if (duration !== 0) {
+    if (duration !== 0 && autoClose) {
       startTimer();
     }
-
     // pause/resume when window focus changes.
     var handleBlur = function handleBlur() {
       return pauseOnFocusLoss && pauseTimer();
@@ -67,11 +80,12 @@ var Toast = function Toast(_ref) {
         window.removeEventListener("focus", handleFocus);
       }
     };
-  }, [duration, pauseOnFocusLoss]);
+  }, [duration, autoClose, pauseOnFocusLoss]);
 
   // --- Helpers Fun ---
   // for start
   var startTimer = function startTimer() {
+    if (!autoClose) return;
     intervalRef.current = setInterval(function () {
       // time to passed...
       var elapsed = Date.now() - start.current;
@@ -83,14 +97,14 @@ var Toast = function Toast(_ref) {
         // stop timer...
         clearInterval(intervalRef.current);
         // remove toast.
-        remove();
+        triggerExit();
       }
     }, 100);
   };
 
   // for pause
   var pauseTimer = function pauseTimer() {
-    if (isPaused) return;
+    if (isPaused && !autoClose) return;
     clearInterval(intervalRef.current);
     remaining.current = remaining.current - (Date.now() - start.current);
     setPaused(true);
@@ -98,18 +112,23 @@ var Toast = function Toast(_ref) {
 
   // for resume
   var resumeTimer = function resumeTimer() {
-    if (!isPaused) return;
+    if (!isPaused && !autoClose) return;
     start.current = Date.now();
     setPaused(false);
     startTimer();
   };
 
-  // Styles
-  var animation = "".concat(position.startsWith("top") && "upToDown" || position.startsWith("bottom") && "downToUp" || position.endsWith("top") && "upToDown" || position.endsWith("bottom") && "downToUp", " 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)");
+  // for exit
+  var triggerExit = function triggerExit() {
+    setExiting(true);
+    setTimeout(function () {
+      return remove();
+    }, 250); // Set and match exit animation duration.
+  };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
       style: {
-        animation: animation
+        animation: exiting ? exitAnim : enterAnim
       },
       className: "toast ".concat(theme, " ").concat(className),
       onMouseEnter: pauseOnHover ? pauseTimer : undefined,
@@ -124,7 +143,9 @@ var Toast = function Toast(_ref) {
             children: type.toUpperCase()
           })]
         }), closable && /*#__PURE__*/_jsx("button", {
-          onClick: remove,
+          onClick: function onClick() {
+            return triggerExit();
+          },
           children: /*#__PURE__*/_jsx(Icons, {
             name: "X"
           })
@@ -150,7 +171,7 @@ var Toast = function Toast(_ref) {
             }, idx);
           }
         })
-      }), progress && duration !== 0 && /*#__PURE__*/_jsx("div", {
+      }), progress && duration !== 0 && autoClose && /*#__PURE__*/_jsx("div", {
         className: "progress-container ".concat(type),
         children: /*#__PURE__*/_jsx("div", {
           className: "toast-progress ".concat(type),

package/dist/ToastContext.js

@@ -23,9 +23,8 @@ export var useToast = function useToast() {
   return useContext(ToastContext);
 };
 export var ToastProvider = function ToastProvider(_ref) {
-  var children = _ref.children,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? "top-right" : _ref$position;
+  var _toasts$2;
+  var children = _ref.children;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     toasts = _useState2[0],
@@ -39,7 +38,7 @@ export var ToastProvider = function ToastProvider(_ref) {
   // Positions.
   var positions = ["top-left", "top-right", "bottom-left", "bottom-right", "center", "center-top", "center-bottom"];
 
-  // Show toast
+  // Show toast..
   var showToast = useCallback(function (toast) {
     var newToast = _objectSpread({
       id: generateId()
@@ -47,7 +46,7 @@ export var ToastProvider = function ToastProvider(_ref) {
     setToasts(function (prev) {
       return [].concat(_toConsumableArray(prev), [newToast]);
     });
-    if (toast.duration !== 0) {
+    if (toast.duration !== 0 && toast.autoClose) {
       setTimeout(function () {
         return removeToast(newToast.id);
       }, toast.duration || 5000);
@@ -62,18 +61,26 @@ export var ToastProvider = function ToastProvider(_ref) {
       });
     });
   }, []);
+
+  // Remove all toast.
+  var removeToastAll = function removeToastAll() {
+    if (toasts.length > 0) {
+      setToasts([]);
+    }
+  };
   return /*#__PURE__*/_jsxs(ToastContext.Provider, {
     value: {
       showToast: showToast,
-      removeToast: removeToast
+      removeToast: removeToast,
+      removeToastAll: removeToastAll
     },
     children: [children, /*#__PURE__*/_jsx("div", {
       className: "toastContainer ".concat(positions.some(function (p) {
-        return p === position;
-      }) ? position : "top-right"),
+        var _toasts$;
+        return p === ((_toasts$ = toasts[0]) === null || _toasts$ === void 0 ? void 0 : _toasts$.position);
+      }) ? (_toasts$2 = toasts[0]) === null || _toasts$2 === void 0 ? void 0 : _toasts$2.position : "top-right"),
       children: toasts.map(function (toast) {
         return /*#__PURE__*/_jsx(Toast, _objectSpread(_objectSpread({}, toast), {}, {
-          position: position,
           remove: function remove() {
             return removeToast(toast.id);
           }

package/dist/d9-toast.d.ts

@@ -1,6 +1,7 @@
 declare module "d9-toast" {
   import React from "react";
 
+  /** Toast type (icon + header color) */
   export type ToastType =
     | "success"
     | "error"
@@ -9,40 +10,74 @@ declare module "d9-toast" {
     | "loading"
     | "submit";
 
+  /** Theme variants */
+  export type ToastTheme = "light" | "dark";
+
+  /** Available toast positions */
+  export type ToastPosition =
+    | "top-right"
+    | "top-left"
+    | "bottom-right"
+    | "bottom-left"
+    | "center"
+    | "center-top"
+    | "center-bottom";
+
+  /** Single button/action displayed inside a toast */
   export interface ToastAction {
+    /** Text label for the action button */
     text: string;
+    /** Optional callback triggered on click */
     callback?: (toast: { id: number }) => void;
   }
 
+  /** Toast configuration options */
   export interface ToastOptions {
+    /** Main message text of the toast */
     message: string;
+    /** Visual type (color/icon) */
     type?: ToastType;
+    /** Duration in ms before auto-close (0 = persistent) */
     duration?: number;
+    /** Optional buttons shown inside the toast */
     actions?: ToastAction[];
-    theme?: "light" | "dark";
+    /** Visual theme */
+    theme?: ToastTheme;
+    /** Whether to show progress bar */
     progress?: boolean;
+    /** Allow manual close via X button */
     closable?: boolean;
+    /** Pause timer when hovered */
     pauseOnHover?: boolean;
+    /** Pause timer when window/tab loses focus */
     pauseOnFocusLoss?: boolean;
-    className?: string; 
+    /** Extra custom class names */
+    className?: string;
+    /** Where to place the toast on screen */
+    position?: ToastPosition;
+    /** Whether the toast auto-closes after duration */
+    autoClose?: boolean;
   }
 
+  /** Toast provider props for context setup */
   export interface ToastProviderProps {
+    /** App children to wrap with ToastProvider */
     children: React.ReactNode;
-    position?:
-      | "top-right"
-      | "top-left"
-      | "bottom-right"
-      | "bottom-left"
-      | "center"
-      | "center-top"
-      | "center-bottom";
   }
 
-  export const ToastProvider: React.FC<ToastProviderProps>;
-
-  export const useToast: () => {
+  /** Context value shape */
+  export interface ToastContextValue {
+    /** Show a toast with given options */
     showToast: (toast: ToastOptions) => void;
+    /** Remove a toast by ID */
     removeToast: (id: number) => void;
-  };
+    /** Remove all active toasts */
+    removeToastAll: () => void;
+  }
+
+  /** Context provider component */
+  export const ToastProvider: React.FC<ToastProviderProps>;
+
+  /** Hook to trigger and manage toasts */
+  export const useToast: () => ToastContextValue;
 }

package/dist/toast.css

@@ -1,5 +1,5 @@
 /* Defaults */
-button,
+.toastContainer button,
 p,
 span {
   font: inherit;
@@ -43,11 +43,13 @@ span {
   transform: translate(-50%, -50%);
 }
 .toastContainer.center-top {
+  flex-direction: column;
   top: 16px;
   left: 50%;
   transform: translateX(-50%);
 }
 .toastContainer.center-bottom {
+  flex-direction: column-reverse;
   bottom: 16px;
   left: 50%;
   transform: translateX(-50%);
@@ -244,25 +246,71 @@ span {
   background-color: oklab(54.13400000000001% 0.09644 -0.22706);
 }
 
+/* Enter animate keyframes */
+@keyframes upToDown {
+  from {
+    opacity: 0;
+    transform: translateY(-60px) scale(0.6);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 @keyframes downToUp {
   from {
-    transform: translateY(100%);
     opacity: 0;
+    transform: translateY(60px) scale(0.6);
   }
   to {
-    transform: translateY(0);
     opacity: 1;
+    transform: translateY(0) scale(1);
   }
 }
 
-@keyframes upToDown {
+/* Exit animate keyframes */
+@keyframes upToDownExit {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(60px) scale(0.6);
+  }
+}
+
+@keyframes downToUpExit {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-60px) scale(0.6);
+  }
+}
+
+@keyframes centerEnter {
   from {
-    transform: translateY(-100%);
     opacity: 0;
+    transform: scale(0.6);
   }
   to {
-    transform: translateY(0);
     opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes centerExit {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.6);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d9-toast",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "Customizable toast notifications for React",
   "main": "dist/index.js",
   "type": "module",