d9-toast 1.0.10 → 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(Math.max(timeToLeft / duration * 100, 0));
-      if (timeToLeft <= 0) {
-        // stop timer...
+      var timeLeft = remaining.current - elapsed;
+      setProgressWidth(timeLeft / duration * 100);
+      if (timeLeft <= 0) {
         clearInterval(intervalRef.current);
-        // remove toast.
         remove();
       }
     }, 50);
   };
-
-  // for pause
   var pauseTimer = function pauseTimer() {
     if (isPaused) return;
     clearInterval(intervalRef.current);
-    remaining.current -= Date.now() - start.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{ from {transform: translateY(100%); opacity:0} to {transform:translateY(0); opacity:1} }\n    @keyframes upToDown{ from {transform: translateY(-100%); opacity:0} to {transform:translateY(0); opacity:1} }\n  ";
-  var animation = "".concat(position.includes("top") ? "upToDown" : "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,6 +21,8 @@ var ToastContext = /*#__PURE__*/createContext();
 export var useToast = function useToast() {
   return useContext(ToastContext);
 };
+var id = 0; // unique toast id
+
 export var ToastProvider = function ToastProvider(_ref) {
   var children = _ref.children,
     _ref$position = _ref.position,
@@ -29,29 +31,30 @@ export var ToastProvider = function ToastProvider(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     toasts = _useState2[0],
     setToasts = _useState2[1];
-
-  // Generate unique ID safely
-  var generateId = function generateId() {
-    return Date.now() + Math.random();
-  };
-
-  // Position classes
   var getPositionClasses = function getPositionClasses(position) {
-    var classes = "fixed z-50 flex gap-3 ";
-    if (position.includes("top")) classes += "top-4 flex-col ";
-    if (position.includes("bottom")) classes += "bottom-4 flex-col-reverse ";
-    if (position.includes("right")) classes += "right-4 ";
-    if (position.includes("left")) classes += "left-4 ";
-    if (position === "center") classes += "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex-col ";
-    if (position === "center-top") classes += "top-4 left-1/2 -translate-x-1/2 flex-col ";
-    if (position === "center-bottom") classes += "bottom-4 left-1/2 -translate-x-1/2 flex-col-reverse ";
-    return classes.trim();
+    switch (position) {
+      case "top-right":
+        return "top-4 right-4 flex-col";
+      case "top-left":
+        return "top-4 left-4 flex-col";
+      case "bottom-right":
+        return "bottom-4 right-4 flex-col-reverse";
+      case "bottom-left":
+        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":
+        return "top-4 left-1/2 -translate-x-1/2 flex-col";
+      case "center-bottom":
+        return "bottom-4 left-1/2 -translate-x-1/2 flex-col-reverse";
+      default:
+        return "top-4 right-4 flex-col";
+    }
   };
-
-  // Show toast
   var showToast = useCallback(function (toast) {
+    id++;
     var newToast = _objectSpread({
-      id: generateId()
+      id: id
     }, toast);
     setToasts(function (prev) {
       return [].concat(_toConsumableArray(prev), [newToast]);
@@ -62,8 +65,6 @@ export var ToastProvider = function ToastProvider(_ref) {
       }, toast.duration || 5000);
     }
   }, []);
-
-  // Remove toast
   var removeToast = useCallback(function (id) {
     setToasts(function (prev) {
       return prev.filter(function (t) {
@@ -77,7 +78,7 @@ export var ToastProvider = function ToastProvider(_ref) {
       removeToast: removeToast
     },
     children: [children, /*#__PURE__*/_jsx("div", {
-      className: getPositionClasses(position),
+      className: "fixed z-50 flex gap-3 ".concat(getPositionClasses(position)),
       children: toasts.map(function (toast) {
         return /*#__PURE__*/_jsx(Toast, _objectSpread(_objectSpread({}, toast), {}, {
           position: position,

package/package.json

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