d9-toast 1.0.9 → 1.0.11

package/dist/Toast.js

@@ -6,7 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useEffect, useRef, useState } from "react";
 import Icons from "./Icons";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var Toast = function Toast(_ref) {
   var id = _ref.id,
     message = _ref.message,
@@ -28,25 +28,19 @@ var Toast = function Toast(_ref) {
     pauseOnHover = _ref$pauseOnHover === void 0 ? true : _ref$pauseOnHover,
     _ref$pauseOnFocusLoss = _ref.pauseOnFocusLoss,
     pauseOnFocusLoss = _ref$pauseOnFocusLoss === void 0 ? true : _ref$pauseOnFocusLoss;
-  var intervalRef = useRef(null); // stores the interval ID
-  var start = useRef(Date.now()); // stores the moment timer started
-  var remaining = useRef(duration); // how much time is left
+  var intervalRef = useRef(null);
+  var start = useRef(Date.now());
+  var remaining = useRef(duration);
   var _useState = useState(100),
     _useState2 = _slicedToArray(_useState, 2),
     progressWidth = _useState2[0],
-    setProgressWidth = _useState2[1]; // progress bar %
+    setProgressWidth = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isPaused = _useState4[0],
-    setPaused = _useState4[1]; // For timer pause
-
-  // Start auto-close timer.
+    setPaused = _useState4[1];
   useEffect(function () {
-    if (duration !== 0) {
-      startTimer();
-    }
-
-    // pause/resume when window focus changes.
+    if (duration !== 0) startTimer();
     var handleBlur = function handleBlur() {
       return pauseOnFocusLoss && pauseTimer();
     };
@@ -65,103 +59,85 @@ var Toast = function Toast(_ref) {
       }
     };
   }, [duration, pauseOnFocusLoss]);
-
-  // --- Helpers Fun ---
-  // for start
   var startTimer = function startTimer() {
     intervalRef.current = setInterval(function () {
-      // time to passed...
       var elapsed = Date.now() - start.current;
-      // time to left...
-      var timeToLeft = remaining.current - elapsed;
-      // set shrink bar...
-      setProgressWidth(timeToLeft / duration * 100);
-      if (timeToLeft <= 0) {
-        // stop timer...
+      var timeLeft = remaining.current - elapsed;
+      setProgressWidth(timeLeft / duration * 100);
+      if (timeLeft <= 0) {
         clearInterval(intervalRef.current);
-        // remove toast.
         remove();
       }
-    }, 100);
+    }, 50);
   };
-
-  // for pause
   var pauseTimer = function pauseTimer() {
     if (isPaused) return;
     clearInterval(intervalRef.current);
     remaining.current = remaining.current - (Date.now() - start.current);
     setPaused(true);
   };
-
-  // for resume
   var resumeTimer = function resumeTimer() {
     if (!isPaused) return;
     start.current = Date.now();
     setPaused(false);
     startTimer();
   };
-
-  // Styles
   var colors = {
-    success: "bg-green-600/20 text-green-600",
-    error: "bg-red-600/20 text-red-600",
-    info: "bg-blue-600/20 text-blue-600",
-    warning: "bg-yellow-600/20 text-yellow-600",
-    loading: theme === "light" ? "bg-gray-950/20 text-gray-950" : "bg-gray-50/20 text-gray-50",
-    submit: theme === "light" ? "bg-gray-600/20 text-gray-600" : "bg-gray-600/50 text-gray-200"
+    success: "bg-green-100 text-green-700",
+    error: "bg-red-100 text-red-700",
+    info: "bg-blue-100 text-blue-700",
+    warning: "bg-yellow-100 text-yellow-700",
+    loading: theme === "light" ? "bg-gray-100 text-gray-900" : "bg-gray-900 text-gray-100"
   };
-  var keyframes = "\n    @keyframes downToUp{\n      from {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n      to {\n        transform: translateY(0);\n        opacity: 1;\n      }\n    }\n    @keyframes upToDown{\n      from {\n        transform: translateY(-100%);\n        opacity: 0;\n      }\n      to {\n        transform: translateY(0);\n        opacity: 1;\n      }\n    }\n  ";
-  var animation = "".concat(position.startsWith("top") && "upToDown" || position.startsWith("bottom") && "downToUp" || position.endsWith("top") && "upToDown" || position.endsWith("bottom") && "downToUp", " 0.3s ease-in");
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("style", {
-      children: keyframes
-    }), /*#__PURE__*/_jsxs("div", {
-      style: {
-        animation: animation
-      },
-      className: "w-80 ".concat(theme === "light" ? "bg-gray-50 text-gray-950" : "bg-gray-950 text-gray-50", " shadow-lg rounded-lg p-1.5 flex flex-col gap-2 relative"),
-      onMouseEnter: pauseOnHover ? pauseTimer : undefined,
-      onMouseLeave: pauseOnHover ? resumeTimer : undefined,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "flex justify-between items-center px-1 py-0.5 rounded-md inset-shadow-2xs ".concat(colors[type]),
-        children: [/*#__PURE__*/_jsxs("span", {
-          className: "flex items-center gap-2 font-medium text-base",
-          children: [/*#__PURE__*/_jsx(Icons, {
-            name: type
-          }), " ", type.toUpperCase()]
-        }), closable && /*#__PURE__*/_jsx("button", {
-          className: " hover:text-red-600 cursor-pointer",
-          onClick: remove,
-          children: /*#__PURE__*/_jsx(Icons, {
-            name: "X"
-          })
-        })]
-      }), /*#__PURE__*/_jsx("p", {
-        className: "p-1",
-        children: message
-      }), actions.length > 0 && /*#__PURE__*/_jsx("div", {
-        className: "flex justify-end gap-2 mb-2",
-        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
-              });
-            },
-            className: "px-3 py-1 text-sm rounded ".concat(idx === 1 ? "".concat(colors[type], " bg-transparent") : colors[type], " ").concat(theme === "dark" ? "text-gray-50" : "text-gray-900", " ring  cursor-pointer"),
-            children: a.text
-          }, idx);
-        })
-      }), progress && duration !== 0 && /*#__PURE__*/_jsx("div", {
-        className: "h-1 w-full bg-gray-200 rounded overflow-hidden absolute bottom-0 left-0",
-        children: /*#__PURE__*/_jsx("div", {
-          className: "h-1 ".concat(colors[type], " transition-all"),
-          style: {
-            width: "".concat(progressWidth, "%")
-          }
+  var animation = position.startsWith("top") ? "slideDown 0.3s ease" : position.startsWith("bottom") ? "slideUp 0.3s ease" : "fadeIn 0.3s ease";
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      animation: animation
+    },
+    className: "toast ".concat(colors[type], " shadow-lg rounded-lg p-2 flex flex-col relative"),
+    onMouseEnter: pauseOnHover ? pauseTimer : undefined,
+    onMouseLeave: pauseOnHover ? resumeTimer : undefined,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "toast-header flex justify-between items-center",
+      children: [/*#__PURE__*/_jsxs("span", {
+        className: "flex items-center gap-2 font-medium",
+        children: [/*#__PURE__*/_jsx(Icons, {
+          name: type
+        }), " ", type.toUpperCase()]
+      }), closable && /*#__PURE__*/_jsx("button", {
+        className: "hover:text-red-600",
+        onClick: remove,
+        children: /*#__PURE__*/_jsx(Icons, {
+          name: "X"
         })
       })]
+    }), /*#__PURE__*/_jsx("p", {
+      className: "toast-message",
+      children: message
+    }), actions.length > 0 && /*#__PURE__*/_jsx("div", {
+      className: "flex justify-end gap-2 mt-1",
+      children: actions.map(function (a, i) {
+        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: "px-3 py-1 rounded ".concat(colors[type], " cursor-pointer"),
+          children: a.text
+        }, i);
+      })
+    }), progress && duration !== 0 && /*#__PURE__*/_jsx("div", {
+      className: "h-1 w-full bg-gray-300 rounded absolute bottom-0 left-0 overflow-hidden",
+      children: /*#__PURE__*/_jsx("div", {
+        className: "h-1 ".concat(colors[type], " transition-all"),
+        style: {
+          width: "".concat(progressWidth, "%")
+        }
+      })
+    }), /*#__PURE__*/_jsx("style", {
+      children: "\n        @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity:1; } }\n        @keyframes slideUp { from { transform: translateY(100%); opacity:0; } to { transform: translateY(0); opacity:1; } }\n        @keyframes fadeIn { from { opacity: 0; } to { opacity:1; } }\n      "
     })]
   });
 };

package/dist/ToastContext.js

@@ -21,7 +21,7 @@ var ToastContext = /*#__PURE__*/createContext();
 export var useToast = function useToast() {
   return useContext(ToastContext);
 };
-var id = 0; // For unique toast id.
+var id = 0; // unique toast id
 
 export var ToastProvider = function ToastProvider(_ref) {
   var children = _ref.children,
@@ -31,18 +31,16 @@ export var ToastProvider = function ToastProvider(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     toasts = _useState2[0],
     setToasts = _useState2[1];
-
-  // Set position by class.
   var getPositionClasses = function getPositionClasses(position) {
     switch (position) {
       case "top-right":
-        return "top-4 max-sm:right-0 right-4 flex-col";
+        return "top-4 right-4 flex-col";
       case "top-left":
-        return "top-4 max-sm:left-0 left-4 flex-col";
+        return "top-4 left-4 flex-col";
       case "bottom-right":
-        return "bottom-4 max-sm:right-0 right-4 flex-col-reverse";
+        return "bottom-4 right-4 flex-col-reverse";
       case "bottom-left":
-        return "bottom-4 max-sm:left-0 left-4 flex-col-reverse";
+        return "bottom-4 left-4 flex-col-reverse";
       case "center":
         return "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex-col";
       case "center-top":
@@ -50,30 +48,23 @@ export var ToastProvider = function ToastProvider(_ref) {
       case "center-bottom":
         return "bottom-4 left-1/2 -translate-x-1/2 flex-col-reverse";
       default:
-        return "top-4 max-sm:right-0  right-4 flex-col";
+        return "top-4 right-4 flex-col";
     }
   };
-
-  // Show toast.
   var showToast = useCallback(function (toast) {
     id++;
-    // Set new toast.
     var newToast = _objectSpread({
       id: id
     }, toast);
-    // Add new toast to Toast list.
     setToasts(function (prev) {
       return [].concat(_toConsumableArray(prev), [newToast]);
     });
-    // Automatically remove toast.
     if (toast.duration !== 0) {
       setTimeout(function () {
         return removeToast(newToast.id);
       }, toast.duration || 5000);
     }
   }, []);
-
-  // Remove toast.
   var removeToast = useCallback(function (id) {
     setToasts(function (prev) {
       return prev.filter(function (t) {

package/dist/d9-toast.d.ts

@@ -1,22 +1,20 @@
 declare module "d9-toast" {
-  import { ReactNode } from "react";
+  import React from "react";
 
-  export interface Toast {
+  export type ToastType = "success" | "error" | "info" | "warning" | "loading" | "submit";
+
+  export interface ToastOptions {
     message: string;
-    type?: "success" | "error" | "info" | "warning" | "loading" | "submit";
+    type?: ToastType;
     duration?: number;
     actions?: { text: string; callback?: (toast: { id: number }) => void }[];
-    closable?: boolean;
-    progress?: boolean;
     theme?: "light" | "dark";
+    progress?: boolean;
+    closable?: boolean;
     pauseOnHover?: boolean;
     pauseOnFocusLoss?: boolean;
   }
 
-  export const ToastProvider: (props: { children: ReactNode; position?: string }) => JSX.Element;
-
-  export const useToast: () => {
-    showToast: (toast: Toast) => void;
-    removeToast: (id: number) => void;
-  };
+  export const ToastProvider: React.FC<{ children: React.ReactNode; position?: string }>;
+  export const useToast: () => { showToast: (toast: ToastOptions) => void; removeToast: (id: number) => void };
 }

package/dist/index.js

@@ -1,3 +1,4 @@
 import React from "react";
+import { ToastProvider, useToast } from "./ToastContext";
 import "./toast.css";
-export { ToastProvider, useToast } from "./ToastContext";
+export { ToastProvider, useToast };

package/package.json

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