d9-toast 1.0.16 → 1.1.17

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>
   );
@@ -56,46 +60,44 @@ import React from "react";
 import { useToast } from "d9-toast";
 
 function App() {
-  const toast = useToast();
 
-  const showToast = () => {
-    toast({
+  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: "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
     });
   };
 
-  return <button onClick={showToast}>Show Toast</button>;
+  return <button onClick={Toast}>Show Toast</button>;
 }
 
 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,30 +112,40 @@ 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 ease-in");
+  // 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,
       onMouseLeave: pauseOnHover ? resumeTimer : undefined,
       children: [/*#__PURE__*/_jsxs("div", {
         className: "toastHeader ".concat(type),
-        children: [/*#__PURE__*/_jsxs("span", {
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "title",
           children: [/*#__PURE__*/_jsx(Icons, {
             name: type
-          }), " ", type.toUpperCase()]
+          }), " ", /*#__PURE__*/_jsx("p", {
+            children: type.toUpperCase()
+          })]
         }), closable && /*#__PURE__*/_jsx("button", {
-          onClick: remove,
+          onClick: function onClick() {
+            return triggerExit();
+          },
           children: /*#__PURE__*/_jsx(Icons, {
             name: "X"
           })
@@ -134,20 +158,20 @@ var Toast = function Toast(_ref) {
       }), actions.length > 0 && /*#__PURE__*/_jsx("div", {
         className: "toastActions",
         children: actions.map(function (a, idx) {
-          return /*#__PURE__*/_jsx("button", {
-            onClick: function onClick() {
-              var _a$callback;
-              return (_a$callback = a.callback) === null || _a$callback === void 0 ? void 0 : _a$callback.call(a, {
-                id: id
-              });
-            },
-            style: {
-              borderColor: "".concat(theme === "dark" ? "#f9fafb33" : "#161d2333")
-            },
-            children: a.text
-          }, idx);
+          if (idx < 2) {
+            return /*#__PURE__*/_jsx("button", {
+              onClick: function onClick() {
+                var _a$callback;
+                return (_a$callback = a.callback) === null || _a$callback === void 0 ? void 0 : _a$callback.call(a, {
+                  id: id
+                });
+              },
+              className: "action-btn ".concat(actions.length === 1 ? "action-btnA ".concat(type) : idx === 0 ? "action-btnB ".concat(type) : "action-btnA ".concat(type)),
+              children: a.text
+            }, 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],
@@ -36,7 +35,10 @@ export var ToastProvider = function ToastProvider(_ref) {
     return Date.now() + Math.random();
   };
 
-  // Show toast
+  // Positions.
+  var positions = ["top-left", "top-right", "bottom-left", "bottom-right", "center", "center-top", "center-bottom"];
+
+  // Show toast..
   var showToast = useCallback(function (toast) {
     var newToast = _objectSpread({
       id: generateId()
@@ -44,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);
@@ -59,16 +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(position),
+      className: "toastContainer ".concat(positions.some(function (p) {
+        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,8 +1,20 @@
+/* Defaults */
+button,
+p,
+span {
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
 .toastContainer {
   position: fixed;
   z-index: 999;
   display: flex;
-  gap: 12px;
+  gap: 14px;
 }
 .toastContainer.top-right {
   flex-direction: column;
@@ -31,11 +43,13 @@
   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%);
@@ -48,19 +62,20 @@
   flex-direction: column;
   gap: 8px;
   padding: 6px;
+  margin: 6px 0;
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  font-family: system-ui, sans-serif;
-  transition: all 0.3s ease-in-out;
+  font-family: cursive;
+  transition: all 0.3s ease-in;
 }
-.toast.light {
+.light {
   background-color: #f9fafb;
-  color: #030712;
+  color: #111827;
 }
 
-.toast.dark {
+.dark {
   background-color: #030712;
-  color: #f9fafb;
+  color: #f3f4f6;
 }
 
 .toastHeader {
@@ -71,15 +86,23 @@
   border-radius: 6px;
   box-shadow: inset 0 1px rgb(0 0 0 / 0.05);
 }
-.toastHeader span {
-  display: flex;
+.toastHeader .title {
+  display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 1rem;
   font-weight: 500;
 }
-.toastHeader button:hover {
+
+.toastHeader button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.3em;
   cursor: pointer;
+}
+
+.toastHeader button:hover {
   color: oklch(57.7% 0.245 27.325);
 }
 
@@ -93,16 +116,16 @@
 }
 .toastHeader.info {
   color: oklch(54.6% 0.245 262.881);
-  background-color: oklch(54.6% 0.245 262.881 / 0.1);
+  background-color: oklch(54.6% 0.245 262.881 / 0.2);
 }
 .toastHeader.warning {
   color: oklch(68.1% 0.162 75.834);
-  background-color: oklch(68.1% 0.162 75.834 / 0.1);
+  background-color: oklch(68.1% 0.162 75.834 / 0.2);
 }
 .toastHeader.loading,
 .toastHeader.submit {
-  color: oklch(48.847% 0.03665 257.306);
-  background-color: oklch(44.6% 0.03 256.802 / 0.2);
+  color: oklab(54.13400000000001% 0.09644 -0.22706);
+  background-color: oklab(54.13400000000001% 0.09644 -0.22706 / 0.2);
 }
 .toastActions {
   display: flex;
@@ -111,13 +134,68 @@
   margin-right: 5px;
   margin-bottom: 8px;
 }
-.toastActions button {
+.toastActions .action-btn {
   padding: 4px 12px;
   font-size: 14px;
   border-radius: 6px;
   border: 1px solid;
   cursor: pointer;
 }
+.toastActions .action-btn:hover {
+  opacity: 0.8;
+}
+
+/* Action button 1 */
+.action-btnA.success {
+  color: oklab(98.193% -0.01648 0.00729);
+  border-color: oklch(63.187% 0.18673 147.227);
+  background-color: oklch(63.187% 0.18673 147.227);
+}
+.action-btnA.error {
+  color: oklab(93.56400000000001% 0.02943 0.0093);
+  border-color: oklch(58.305% 0.23863 28.392);
+  background-color: oklch(58.305% 0.23863 28.392);
+}
+.action-btnA.info {
+  color: oklab(93.192% -0.00786 -0.03071);
+  border-color: oklch(54.742% 0.24331 262.725);
+  background-color: oklch(54.742% 0.24331 262.725);
+}
+.action-btnA.warning {
+  color: oklab(97.962% 0.00443 0.01503);
+  border-color: oklch(68.215% 0.14645 71.468);
+  background-color: oklch(68.215% 0.14645 71.468);
+}
+.action-btnA.loading,
+.action-btnA.submit {
+  color: oklab(94.33500000000001% 0.01183 -0.02594);
+  border-color: oklab(54.13400000000001% 0.09644 -0.22706);
+  background-color: oklab(54.13400000000001% 0.09644 -0.22706);
+}
+/* Action button 2 */
+.action-btnB.success {
+  color: oklch(63.187% 0.18673 147.227);
+  border-color: oklch(63.187% 0.18673 147.227);
+}
+
+.action-btnB.error {
+  color: oklch(58.305% 0.23863 28.392);
+  border-color: oklch(58.305% 0.23863 28.392);
+}
+.action-btnB.info {
+  color: oklch(54.742% 0.24331 262.725);
+  border-color: oklch(54.742% 0.24331 262.725);
+}
+.action-btnB.warning {
+  color: oklch(68.215% 0.14645 71.468);
+  border-color: oklch(68.215% 0.14645 71.468);
+}
+.action-btnB.loading,
+.action-btnB.submit {
+  color: oklab(54.13400000000001% 0.09644 -0.22706);
+  border-color: oklab(54.13400000000001% 0.09644 -0.22706);
+}
+
 .progress-container {
   position: absolute;
   bottom: 0;
@@ -143,7 +221,7 @@
 }
 .progress-container.loading,
 .progress-container.submit {
-  background-color: oklch(48.847% 0.03665 257.306 / 0.25);
+  background-color: oklab(54.13400000000001% 0.09644 -0.22706 / 0.25);
 }
 
 .toast-progress {
@@ -165,32 +243,78 @@
 }
 .toast-progress.loading,
 .toast-progress.submit {
-  background-color: oklch(48.847% 0.03665 257.306);
+  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 {
-    transform: translateY(-100%);
+    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 {
+    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);
   }
 }
 
-@media screen and (max-width: 325px) {
+@media screen and (max-width: 375px) {
   .toastContainer.top-right,
   .toastContainer.bottom-right {
     right: 0px;

package/package.json

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