d9-toast 1.0.11 → 1.0.13

package/README.md

@@ -1,15 +1,17 @@
 # D9-Toast
 
-Customizable toast notifications for React with TailwindCSS support.
+Customizable toast notifications for React.
+
 
 **Features:**
 
-* Lightweight and fully customizable toast notifications.
-* Built with React.
-* Tailwind CSS included—no setup required.
-* Easy to import and use in any React project.
-* Supports multiple types: success, error, info, warning.
-* Fully responsive and modern UI.
+* Lightweight and fully customizable toast notifications.  
+* Built with 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.  
+* Users can optionally add Tailwind CSS classes via `className` for custom styling.
 
 ---
 
@@ -64,6 +66,7 @@ function App() {
       actions: [
         { text: "Undo", callback: () => console.log("Undo clicked") },
       ],
+      className: "bg-green-500 text-white shadow-lg", // optional Tailwind/custom styling
     });
   };
 
@@ -92,6 +95,7 @@ export default App;
 | `actions`  | array   | []      | Array of action objects `{ text: string, callback: function }`             |
 | `closable` | boolean | true    | Show close button                                                          |
 | `progress` | boolean | true    | Show progress bar                                                          |
+| `className` | string| " "   | Optional extra CSS/Tailwind classes to customize the toast bar                                                          |
 
 ---
 
@@ -103,17 +107,18 @@ export default App;
 npm run build
 ```
 
-* Generates CSS in `dist/toast.css` using TailwindCSS
-* Generates JS in `dist/` using Babel
+* Copies JS to `dist/`
+* Copies CSS `(toast.css)` to `dist/`
 
-### Tailwind Support
+### Styling
 
-Make sure your project has Tailwind installed. If not, include the `toast.css` from `dist/` in your project:
+* Default styling is included in dist/toast.css
+* Users can optionally override or extend styles using className
 
 ```jsx
-import 'd9-toast/dist/toast.css';
+import "d9-toast/dist/toast.css";
 ```
-
+* Tailwind CSS is optional — you can pass Tailwind classes via className.
 ---
 
 ## License

package/dist/Toast.js

@@ -5,8 +5,9 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useEffect, useRef, useState } from "react";
+import "./toast.css";
 import Icons from "./Icons";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var Toast = function Toast(_ref) {
   var id = _ref.id,
     message = _ref.message,
@@ -14,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$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
     _ref$duration = _ref.duration,
     duration = _ref$duration === void 0 ? 5000 : _ref$duration,
     _ref$actions = _ref.actions,
@@ -28,19 +31,25 @@ 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);
-  var start = useRef(Date.now());
-  var remaining = useRef(duration);
+  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 _useState = useState(100),
     _useState2 = _slicedToArray(_useState, 2),
     progressWidth = _useState2[0],
-    setProgressWidth = _useState2[1];
+    setProgressWidth = _useState2[1]; // progress bar %
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isPaused = _useState4[0],
-    setPaused = _useState4[1];
+    setPaused = _useState4[1]; // For timer pause
+
+  // Start auto-close timer.
   useEffect(function () {
-    if (duration !== 0) startTimer();
+    if (duration !== 0) {
+      startTimer();
+    }
+
+    // pause/resume when window focus changes.
     var handleBlur = function handleBlur() {
       return pauseOnFocusLoss && pauseTimer();
     };
@@ -59,86 +68,93 @@ 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;
-      var timeLeft = remaining.current - elapsed;
-      setProgressWidth(timeLeft / duration * 100);
-      if (timeLeft <= 0) {
+      // time to left...
+      var timeToLeft = remaining.current - elapsed;
+      // set shrink bar...
+      setProgressWidth(timeToLeft / duration * 100);
+      if (timeToLeft <= 0) {
+        // stop timer...
         clearInterval(intervalRef.current);
+        // remove toast.
         remove();
       }
-    }, 50);
+    }, 100);
   };
+
+  // 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();
   };
-  var colors = {
-    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 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"
+
+  // Styles
+  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__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      style: {
+        animation: animation
+      },
+      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__*/_jsx(Icons, {
+            name: type
+          }), " ", type.toUpperCase()]
+        }), closable && /*#__PURE__*/_jsx("button", {
+          onClick: remove,
+          children: /*#__PURE__*/_jsx(Icons, {
+            name: "X"
+          })
+        })]
+      }), /*#__PURE__*/_jsx("p", {
+        style: {
+          padding: "4px"
+        },
+        children: message
+      }), 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);
         })
-      })]
-    }), /*#__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"),
+      }), progress && duration !== 0 && /*#__PURE__*/_jsx("div", {
+        className: "toast-progress ",
         style: {
-          width: "".concat(progressWidth, "%")
+          width: "".concat(progressWidth, "%"),
+          backgroundColor: "".concat(theme === "dark" ? "#536175" : "#161d2333")
         }
-      })
-    }), /*#__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      "
-    })]
+      })]
+    })
   });
 };
 export default Toast;

package/dist/ToastContext.js

@@ -16,13 +16,12 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { createContext, useCallback, useContext, useState } from "react";
 import Toast from "./Toast";
+import "./toast.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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,
@@ -31,30 +30,16 @@ export var ToastProvider = function ToastProvider(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     toasts = _useState2[0],
     setToasts = _useState2[1];
-  var getPositionClasses = function getPositionClasses(position) {
-    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";
-    }
+
+  // Generate unique ID safely
+  var generateId = function generateId() {
+    return Date.now() + Math.random();
   };
+
+  // Show toast
   var showToast = useCallback(function (toast) {
-    id++;
     var newToast = _objectSpread({
-      id: id
+      id: generateId()
     }, toast);
     setToasts(function (prev) {
       return [].concat(_toConsumableArray(prev), [newToast]);
@@ -65,6 +50,8 @@ export var ToastProvider = function ToastProvider(_ref) {
       }, toast.duration || 5000);
     }
   }, []);
+
+  // Remove toast
   var removeToast = useCallback(function (id) {
     setToasts(function (prev) {
       return prev.filter(function (t) {
@@ -78,7 +65,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: "toastContainer ".concat(position),
       children: toasts.map(function (toast) {
         return /*#__PURE__*/_jsx(Toast, _objectSpread(_objectSpread({}, toast), {}, {
           position: position,

package/dist/d9-toast.d.ts

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

package/dist/index.js

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

package/dist/toast.css

@@ -1,9 +1,187 @@
-.d9-toast {
-  @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
+.toastContainer {
+  position: fixed;
+  z-index: 999;
+  display: flex;
+  gap: 12px;
+}
+.toastContainer.top-right {
+  flex-direction: column;
+  top: 16px;
+  right: 16px;
+}
+.toastContainer.top-left {
+  flex-direction: column;
+  top: 16px;
+  left: 16px;
+}
+.toastContainer.bottom-right {
+  flex-direction: column-reverse;
+  bottom: 16px;
+  right: 16px;
+}
+.toastContainer.bottom-left {
+  flex-direction: column-reverse;
+  bottom: 16px;
+  left: 16px;
+}
+.toastContainer.center {
+  flex-direction: column;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.toastContainer.center-top {
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.toastContainer.center-bottom {
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.toast {
+  position: relative;
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 6px;
+  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;
+}
+.toast.light {
+  background-color: #f9fafb;
+  color: #030712;
+}
+
+.toast.dark {
+  background-color: #030712;
+  color: #f9fafb;
+}
+
+.toastHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2px 4px;
+  border-radius: 6px;
+  box-shadow: inset 0 1px rgb(0 0 0 / 0.05);
+}
+.toastHeader span {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1rem;
+  font-weight: 500;
+}
+.toastHeader button:hover {
+  cursor: pointer;
+  color: oklch(57.7% 0.245 27.325);
+}
+
+.toastHeader.success {
+  color: oklch(62.7% 0.194 149.214);
+  background-color: oklch(63.187% 0.18673 147.227 / 0.2);
+}
+.toastHeader.error {
+  color: oklch(57.7% 0.245 27.325);
+  background-color: oklch(58.305% 0.23863 28.392 / 0.2);
+}
+.toastHeader.info {
+  color: oklch(54.6% 0.245 262.881);
+  background-color: oklch(54.6% 0.245 262.881 / 0.1);
+}
+.toastHeader.warning {
+  color: oklch(68.1% 0.162 75.834);
+  background-color: oklch(68.1% 0.162 75.834 / 0.1);
+}
+.toastHeader.loading,
+.toastHeader.submit {
+  color: oklch(48.847% 0.03665 257.306);
+  background-color: oklch(44.6% 0.03 256.802 / 0.2);
+}
+.toastActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 15px;
+  margin-right: 5px;
+  margin-bottom: 8px;
+}
+.toastActions button {
+  padding: 4px 12px;
+  font-size: 14px;
+  border-radius: 6px;
+  border: 1px solid;
+  cursor: pointer;
+}
+
+.toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 0.25rem;
+  transition: width 0.1s linear;
+  border-radius: 0 0 0.25rem 0.25rem;
+  overflow: hidden;
+}
+.toast-progress::before {
+  content: "";
+  width: 100%;
+  height: 0.25rem;
+  background-color: currentColor;
+  opacity: 0.5;
+}
+
+.toast-progress.success {
+  background-color: oklch(62.7% 0.194 149.214);
+}
+.toast-progress.error {
+  background-color: oklch(57.7% 0.245 27.325);
+}
+.toast-progress.info {
+  background-color: oklch(54.6% 0.245 262.881);
+}
+.toast-progress.warning {
+  background-color: oklch(68.1% 0.162 75.834);
+}
+.toast-progress.loading,
+.toast-progress.submit {
+  background-color: oklch(48.847% 0.03665 257.306);
+}
+
+@keyframes downToUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes upToDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
-.d9-toast .toast {
-  /* toast-specific styles */
+@media screen and (max-width: 325px) {
+  .toastContainer.top-right,
+  .toastContainer.bottom-right {
+    right: 0px;
+  }
+  .toastContainer.top-left,
+  .toastContainer.bottom-left {
+    left: 0px;
+  }
 }

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "d9-toast",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Customizable toast notifications for React",
   "main": "dist/index.js",
   "type": "module",
   "files": [
     "dist"
   ],
+  "sideEffects": [
+    "./dist/toast.css"
+  ],
+  "types": "dist/d9-toast.d.ts",
   "scripts": {
-    "build:css": "tailwindcss -i ./src/toast.css -o ./dist/toast.css --minify",
     "build:js": "npx babel src --out-dir dist --copy-files",
-    "build": "npm run build:css && npm run build:js"
+    "build": "npm run build:js"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -20,8 +23,7 @@
     "react",
     "toast",
     "notifications",
-    "ui",
-    "tailwind"
+    "ui"
   ],
   "license": "MIT",
   "author": "Athul PS",
@@ -29,12 +31,6 @@
     "@babel/cli": "^7.28.3",
     "@babel/core": "^7.28.4",
     "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.14"
-  },
-  "dependencies": {
-    "@tailwindcss/cli": "^4.1.14"
+    "@babel/preset-react": "^7.27.1"
   }
 }