d9-toast 1.2.21 → 1.3.22

package/README.md

@@ -97,17 +97,17 @@ Returns an object with toast management methods:
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `message` | string \| React.ReactNode | **Required** | Toast content (supports JSX) |
-| `type` | string | `"info"` | Toast type: `success`, `error`, `info`, `warning`, `loading`, `submit` |
+| `type` | string | `"success"` | Toast type: `success`, `error`, `info`, `warning`, `loading`, `submit` |
 | `position` | string | `"top-right"` | Position: `top-left`, `top-right`, `bottom-left`, `bottom-right`, `center`, `center-top`, `center-bottom` |
 | `theme` | string | `"light"` | Theme: `light`, `dark`, `colored` |
 | `duration` | number | `5000` | Auto-close duration in ms (0 = infinite) |
 | `autoClose` | boolean | `true` | Whether toast auto-closes after duration |
-| `closable` | boolean | `true` | Show close (X) button |
+| `closable` | boolean | `false` | Show close (X) button |
 | `pauseOnHover` | boolean | `true` | Pause timer on hover |
 | `pauseOnFocusLoss` | boolean | `true` | Pause timer when window loses focus |
 | `progress` | boolean | `true` | Show progress bar |
 | `title` | boolean | `true` | Show toast header with type |
-| `actions` | Array | `[]` | Action buttons: `[{ text: string, callback: function }]` |
+| `actions` | Array | `[]` | Action buttons: `[{ text: string, className: string, callback: function }]` |
 | `className` | string | `""` | Additional CSS/Tailwind classes |
 
 ## 💡 Advanced Usage
@@ -135,9 +135,11 @@ showToast({
   actions: [
     { 
       text: "View", 
+      className: "",
       callback: () => console.log("View clicked") 
     },
     { 
+      className: "",
       text: "Dismiss", 
       callback: ({ id }) => removeToast(id) 
     }

package/dist/Toast.js

@@ -12,7 +12,7 @@ var Toast = function Toast(_ref) {
   var id = _ref.id,
     message = _ref.message,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? "info" : _ref$type,
+    type = _ref$type === void 0 ? "success" : _ref$type,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? "light" : _ref$theme,
     _ref$position = _ref.position,
@@ -29,7 +29,7 @@ var Toast = function Toast(_ref) {
     _ref$autoClose = _ref.autoClose,
     autoClose = _ref$autoClose === void 0 ? true : _ref$autoClose,
     _ref$closable = _ref.closable,
-    closable = _ref$closable === void 0 ? true : _ref$closable,
+    closable = _ref$closable === void 0 ? false : _ref$closable,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? true : _ref$title,
     _ref$pauseOnHover = _ref.pauseOnHover,
@@ -116,14 +116,18 @@ var Toast = function Toast(_ref) {
   var actionButtons = useMemo(function () {
     if (actions.length === 0) return null;
     return actions.slice(0, 2).map(function (a, idx) {
+      // Dynamic class names..
+      var btnType = actions.length === 1 ? "action-btnA__".concat(type) : idx === 0 ? "action-btnB__".concat(type) : "action-btnA__".concat(type);
+      var classNameStr = "action-btn ".concat(btnType, " ").concat(a.className || "").trim();
       return /*#__PURE__*/_jsx("button", {
+        "aria-label": "Action ".concat(a.text),
         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: "action-btn ".concat(actions.length === 1 ? "action-btnA ".concat(type) : idx === 0 ? "action-btnB ".concat(type) : "action-btnA ".concat(type)),
+        className: classNameStr,
         children: a.text
       }, idx);
     });
@@ -174,6 +178,7 @@ var Toast = function Toast(_ref) {
           })]
         }), closable && /*#__PURE__*/_jsx("button", {
           className: "close-button",
+          "aria-label": "Close button",
           onClick: function onClick() {
             return triggerExit();
           },
@@ -194,6 +199,7 @@ var Toast = function Toast(_ref) {
             })]
           }), closable && !title && /*#__PURE__*/_jsx("button", {
             className: "close-button",
+            "aria-label": "Close button",
             onClick: function onClick() {
               return triggerExit();
             },

package/dist/ToastContext.js

@@ -51,6 +51,7 @@ export var ToastProvider = function ToastProvider(_ref) {
         return removeToast(newToast.id);
       }, toast.duration || 5000);
     }
+    return newToast === null || newToast === void 0 ? void 0 : newToast.id;
   }, []);
 
   // Remove toast

package/dist/d9-toast.d.ts

@@ -27,6 +27,8 @@ declare module "d9-toast" {
   export interface ToastAction {
     /** Text label for the action button */
     text: string;
+    /** Extra custom class names */
+    className: string;
     /** Optional callback triggered on click */
     callback?: (toast: { id: number }) => void;
   }
@@ -75,7 +77,7 @@ declare module "d9-toast" {
   /** Context value shape */
   export interface ToastContextValue {
     /** Show a toast with given options */
-    showToast: (toast: ToastOptions) => void;
+    showToast: (toast: ToastOptions) => number;
     /** Remove a toast by ID */
     removeToast: (id: number) => void;
     /** Remove all active toasts */

package/dist/toast.css

@@ -1,5 +1,29 @@
+:root {
+  --primary-bg: #ffffff;
+  --primary-color: #1e2939;
+
+  /* Success colors */
+  --success-color: #006e2f;
+  --success-bg: rgba(0, 166, 61, 0.1);
+
+  /* Error colors */
+  --error-color: #b62027;
+  --error-bg: rgba(231, 0, 12, 0.1);
+
+  /* Info colors */
+  --info-color: #0062b8;
+  --info-bg: rgba(21, 93, 251, 0.1);
+
+  /* Warning colors */
+  --warning-color: #866300;
+  --warning-bg: rgba(208, 135, 0, 0.1);
+
+  /* Loading/Submit colors */
+  --loading-color: #8736ca;
+  --loading-bg: rgba(124, 58, 237, 0.1);
+}
+
 /* Defaults */
-.toastContainer button,
 .toastContainer p,
 .toastContainer span {
   font: inherit;
@@ -10,6 +34,12 @@
   margin: 0;
 }
 
+.toastContainer button {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
 .toastContainer {
   position: fixed;
   z-index: 999;
@@ -66,27 +96,90 @@
   margin: 8px;
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  font-family: cursive;
   font-size: smaller;
+  font-family: Arial, Helvetica, sans-serif;
   transition: all 0.3s ease-in;
   will-change: transform, opacity;
+  background-color: var(--primary-bg);
+  color: var(--primary-color);
+  backdrop-filter: blur(10px);
 }
 
+/* Theme colors */
 .light {
-  background-color: #ffffff;
-  color: #1e2939;
+  --primary-bg: #ffffff;
+  --primary-color: #1e2939;
+
+  --success-color: #006e2f;
+  --success-bg: rgba(0, 138, 58, 0.1);
+
+  --error-color: #bf0009;
+  --error-bg: rgba(163, 0, 8, 0.1);
+
+  --info-color: #005fbd;
+  --info-bg: rgba(0, 76, 153, 0.1);
+
+  --warning-color: #8d6200;
+  --warning-bg: rgba(153, 107, 0, 0.1);
+
+  --loading-color: #6900ca;
+  --loading-bg: rgba(106, 31, 176, 0.1);
+
+  /* background-color: #ffffff;
+  color: #1e2939; */
 }
 
 .dark {
-  background-color: #1e2939;
-  color: #ffffff;
+  --primary-bg: #1e2939;
+  --primary-color: #ffffff;
+
+  --success-color: #00df5f;
+  --success-bg: rgba(0, 138, 58, 0.1);
+
+  --error-color: #ff666d;
+  --error-bg: rgba(163, 0, 8, 0.1);
+
+  --info-color: #5badff;
+  --info-bg: rgba(0, 76, 153, 0.1);
+
+  --warning-color: #e29e00;
+  --warning-bg: rgba(153, 107, 0, 0.1);
+
+  --loading-color: #c586ff;
+  --loading-bg: rgba(106, 31, 176, 0.1);
+
+  /* background-color: #1e2939;
+  color: #ffffff; */
+}
+
+/* Type colors */
+.success {
+  color: var(--success-color);
+  background-color: var(--success-bg);
+}
+.error {
+  color: var(--error-color);
+  background-color: var(--error-bg);
+}
+.info {
+  color: var(--info-color);
+  background-color: var(--info-bg);
+}
+.warning {
+  color: var(--warning-color);
+  background-color: var(--warning-bg);
+}
+.loading,
+.submit {
+  color: var(--loading-color);
+  background-color: var(--loading-bg);
 }
 
 .toastHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 2px 4px;
+  padding: 5px;
   border-radius: 6px;
   box-shadow: inset 0 1px rgb(0 0 0 / 0.06);
 }
@@ -102,6 +195,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: transparent;
+  color: var(--primary-color);
   cursor: pointer;
 }
 
@@ -117,7 +212,7 @@
   gap: 8px;
 }
 
-.toast-message__container .toast-message{
+.toast-message__container .toast-message {
   display: inline-flex;
   align-items: center;
   text-wrap: wrap;
@@ -133,66 +228,69 @@
   margin-bottom: 8px;
 }
 .toastActions .action-btn {
-  padding: 4px 12px;
+  padding: 8px 12px;
   font-size: 14px;
   border-radius: 6px;
-  border: 1px solid;
-  box-shadow: inset 0 0 1px #0b0b0b;
+  box-shadow: inset 0px 0px 1px #0b0b0b89;
+  flex-shrink: 0;
   cursor: pointer;
 }
 .toastActions .action-btn:hover {
-  opacity: 0.8;
+  filter: grayscale(1);
 }
 
 /* Action button 1 */
-.action-btnA.success,.colored.success {
-  color: #ffffff;
-  border-color: #00c950;
-  background-color: #00c950;
-}
-.action-btnA.error {
-  color: #ffffff;
-  border-color: #fb2c36;
-  background-color: #fb2c36;
-}
-.action-btnA.info {
-  color: #ffffff;
-  border-color: #0088ff;
-  background-color: #0088ff;
-}
-.action-btnA.warning {
-  color: #ffffff;
-  border-color: #f0b100;
-  background-color: #f0b100;
-}
-.action-btnA.loading,
-.action-btnA.submit {
-  color: #ffffff;
-  border-color: #aa44ff;
-  background-color: #aa44ff;
+.action-btnA__success {
+  color: var(--primary-bg);
+  border-color: var(--success-color);
+  background-color: var(--success-color);
+}
+.action-btnA__error {
+  color: var(--primary-bg);
+  background-color: var(--error-color);
+}
+.action-btnA__info {
+  color: var(--primary-bg);
+  border-color: var(--info-color);
+  background-color: var(--info-color);
+}
+.action-btnA__warning {
+  color: var(--primary-bg);
+  border-color: var(--warning-color);
+  background-color: var(--warning-color);
+}
+.action-btnA__loading,
+.action-btnA__submit {
+  color: var(--primary-bg);
+  border-color: var(--loading-color);
+  background-color: var(--loading-color);
 }
+
 /* Action button 2 */
-.action-btnB.success {
-  color: #00c950;
+.action-btnB__success {
+  color: var(--success-color);
   border-color: currentColor;
+  background-color: transparent;
 }
-
-.action-btnB.error {
-  color: #fb2c36;
-  border-color: currentColor;
+.action-btnB__error {
+  color: var(--error-color);
+  background-color: var(--error-bg);
 }
-.action-btnB.info {
-  color: #0088ff;
+.action-btnB__info {
+  color: var(--info-color);
   border-color: currentColor;
+  background-color: transparent;
 }
-.action-btnB.warning {
-  color: #f0b100;
+.action-btnB__warning {
+  color: var(--warning-color);
   border-color: currentColor;
+  background-color: transparent;
 }
-.action-btnB.loading,
-.action-btnB.submit {
-  color: #aa44ff;
+.action-btnB__loading,
+.action-btnB__submit {
+  color: var(--loading-color);
   border-color: currentColor;
+  background-color: transparent;
 }
 
 .progress-container {
@@ -211,44 +309,22 @@
 }
 
 .toast-progress.success {
-  background-color: #00c950;
+  background-color: var(--success-color);
 }
 .toast-progress.error {
-  background-color: #fb2c36;
+  background-color: var(--error-color);
 }
 .toast-progress.info {
-  background-color: #0088ff;
+  background-color: var(--info-color);
 }
 .toast-progress.warning {
-  background-color: #f0b100;
+  background-color: var(--warning-color);
 }
 .toast-progress.loading,
 .toast-progress.submit {
-  background-color: #aa44ff;
-}
-
-.success {
-  color: #00c950;
-  background-color: rgba(0, 166, 61, 0.1);
-}
-.error {
-  color: #fb2c36;
-  background-color: rgba(231, 0, 12, 0.1);
-}
-.info {
-  color: #0088ff;
-  background-color: rgba(21, 93, 251, 0.1);
-}
-.warning {
-  color: #f0b100;
-  background-color: rgba(208, 135, 0, 0.1);
-}
-.loading,.submit {
-  color: #aa44ff;
-  background-color: rgba(124, 58, 237, 0.1);
+  background-color: var(--loading-color);
 }
 
-
 /* Zoom animation */
 /* Enter animate keyframes */
 @keyframes upToDown {
@@ -317,14 +393,3 @@
     transform: scale(0.6);
   }
 }
-
-@media screen and (max-width: 375px) {
-  .toastContainer.top-right,
-  .toastContainer.bottom-right {
-    right: 0px;
-  }
-  .toastContainer.top-left,
-  .toastContainer.bottom-left {
-    left: 0px;
-  }
-}

package/package.json

@@ -1,7 +1,19 @@
 {
   "name": "d9-toast",
-  "version": "1.2.21",
+  "version": "1.3.22",
   "description": "Customizable toast notifications for React",
+  "homepage": "https://codesandbox.io/embed/cqkyzm?view=preview",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/psathul073/d9-toast.git"
+  },
+  "bugs": {
+    "url": "https://github.com/psathul073/d9-toast/issues"
+  },
+  "funding": {
+    "type": "donation",
+    "url": "https://rzp.io/rzp/eVnJ0oP"
+  },
   "main": "dist/index.js",
   "type": "module",
   "files": [
@@ -19,10 +31,6 @@
     "react": ">=17",
     "react-dom": ">=17"
   },
-  "funding": {
-    "type": "donation",
-    "url": "https://rzp.io/rzp/eVnJ0oP"
-  },
   "keywords": [
     "react",
     "toast",