d9-toast 1.0.8 → 1.0.10

package/dist/Toast.js

@@ -75,21 +75,21 @@ var Toast = function Toast(_ref) {
       // time to left...
       var timeToLeft = remaining.current - elapsed;
       // set shrink bar...
-      setProgressWidth(timeToLeft / duration * 100);
+      setProgressWidth(Math.max(timeToLeft / duration * 100, 0));
       if (timeToLeft <= 0) {
         // stop timer...
         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);
+    remaining.current -= Date.now() - start.current;
     setPaused(true);
   };
 
@@ -110,8 +110,8 @@ var Toast = function Toast(_ref) {
     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"
   };
-  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");
+  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

package/dist/ToastContext.js

@@ -21,8 +21,6 @@ var ToastContext = /*#__PURE__*/createContext();
 export var useToast = function useToast() {
   return useContext(ToastContext);
 };
-var id = 0; // For unique toast id.
-
 export var ToastProvider = function ToastProvider(_ref) {
   var children = _ref.children,
     _ref$position = _ref.position,
@@ -32,40 +30,32 @@ export var ToastProvider = function ToastProvider(_ref) {
     toasts = _useState2[0],
     setToasts = _useState2[1];
 
-  // Set position by class.
+  // Generate unique ID safely
+  var generateId = function generateId() {
+    return Date.now() + Math.random();
+  };
+
+  // Position classes
   var getPositionClasses = function getPositionClasses(position) {
-    switch (position) {
-      case "top-right":
-        return "top-4 max-sm:right-0 right-4 flex-col";
-      case "top-left":
-        return "top-4 max-sm:left-0 left-4 flex-col";
-      case "bottom-right":
-        return "bottom-4 max-sm:right-0 right-4 flex-col-reverse";
-      case "bottom-left":
-        return "bottom-4 max-sm:left-0 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 max-sm:right-0  right-4 flex-col";
-    }
+    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();
   };
 
-  // Show toast.
+  // Show toast
   var showToast = useCallback(function (toast) {
-    id++;
-    // Set new toast.
     var newToast = _objectSpread({
-      id: id
+      id: generateId()
     }, 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);
@@ -73,7 +63,7 @@ export var ToastProvider = function ToastProvider(_ref) {
     }
   }, []);
 
-  // Remove toast.
+  // Remove toast
   var removeToast = useCallback(function (id) {
     setToasts(function (prev) {
       return prev.filter(function (t) {
@@ -87,7 +77,7 @@ export var ToastProvider = function ToastProvider(_ref) {
       removeToast: removeToast
     },
     children: [children, /*#__PURE__*/_jsx("div", {
-      className: "fixed z-50 flex gap-3 ".concat(getPositionClasses(position)),
+      className: getPositionClasses(position),
       children: toasts.map(function (toast) {
         return /*#__PURE__*/_jsx(Toast, _objectSpread(_objectSpread({}, toast), {}, {
           position: position,

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,2 +1,4 @@
 import React from "react";
-export { ToastProvider, useToast } from "./ToastContext";
+import { ToastProvider, useToast } from "./ToastContext";
+import "./toast.css";
+export { ToastProvider, useToast };

package/package.json

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