d9-toast 1.0.10 → 1.0.12

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,6 +5,7 @@ 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, Fragment as _Fragment } from "react/jsx-runtime";
 var Toast = function Toast(_ref) {
@@ -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,
@@ -75,21 +78,21 @@ var Toast = function Toast(_ref) {
       // time to left...
       var timeToLeft = remaining.current - elapsed;
       // set shrink bar...
-      setProgressWidth(Math.max(timeToLeft / duration * 100, 0));
+      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 -= Date.now() - start.current;
+    remaining.current = remaining.current - (Date.now() - start.current);
     setPaused(true);
   };
 
@@ -102,45 +105,34 @@ var Toast = function Toast(_ref) {
   };
 
   // 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"
-  };
-  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", {
+  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: "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"),
+      className: "toast ".concat(theme, " ").concat(className),
       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]),
+        className: "toastHeader ".concat(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",
+        style: {
+          padding: "4px"
+        },
         children: message
       }), actions.length > 0 && /*#__PURE__*/_jsx("div", {
-        className: "flex justify-end gap-2 mb-2",
+        className: "toastActions",
         children: actions.map(function (a, idx) {
           return /*#__PURE__*/_jsx("button", {
             onClick: function onClick() {
@@ -149,20 +141,20 @@ var Toast = function Toast(_ref) {
                 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"),
+            style: {
+              borderColor: "".concat(theme === "dark" ? "#f9fafb33" : "#161d2333")
+            },
             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, "%")
-          }
-        })
+        className: "toast-progress ",
+        style: {
+          width: "".concat(progressWidth, "%"),
+          backgroundColor: "".concat(theme === "dark" ? "#536175" : "#161d2333")
+        }
       })]
-    })]
+    })
   });
 };
 export default Toast;

package/dist/ToastContext.js

@@ -16,6 +16,7 @@ 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() {
@@ -35,19 +36,6 @@ export var ToastProvider = function ToastProvider(_ref) {
     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();
-  };
-
   // Show toast
   var showToast = useCallback(function (toast) {
     var newToast = _objectSpread({
@@ -77,7 +65,7 @@ export var ToastProvider = function ToastProvider(_ref) {
       removeToast: removeToast
     },
     children: [children, /*#__PURE__*/_jsx("div", {
-      className: 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,164 @@
-.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;
+}
+
+@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,18 @@
 {
   "name": "d9-toast",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Customizable toast notifications for React",
   "main": "dist/index.js",
   "type": "module",
   "files": [
     "dist"
   ],
+  "sideEffects": [
+    "./dist/toast.css"
+  ],
   "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 +22,7 @@
     "react",
     "toast",
     "notifications",
-    "ui",
-    "tailwind"
+    "ui"
   ],
   "license": "MIT",
   "author": "Athul PS",
@@ -29,12 +30,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"
   }
 }