d9-toast 1.3.24 → 1.4.24

package/README.md

@@ -4,25 +4,33 @@
 ![npm bundle size](https://img.shields.io/bundlephobia/min/d9-toast?style=flat-square)
 ![npm downloads](https://img.shields.io/npm/dm/d9-toast?style=flat-square)
 ![License](https://img.shields.io/npm/l/d9-toast?style=flat-square)
-![React](https://img.shields.io/badge/React-18+-61DAFB?style=flat-square&logo=react&logoColor=black)
+![React](https://img.shields.io/badge/React-18+-61DAFB?style=flat-square\&logo=react\&logoColor=black)
 [![Donate via Razorpay](https://img.shields.io/badge/Donate-Razorpay-blue)](https://rzp.io/rzp/eVnJ0oP)
 
-A lightweight, customizable toast notification library for React applications.
+A **lightweight, fully typed, customizable toast notification library** for React applications.
+
+---
 
 ## ✨ Features
 
-- **Lightweight & Customizable** – Minimal bundle size with extensive customization options
-- **React Native** – Built specifically for React with hooks support
-- **No External Dependencies** – Pure CSS included, works out of the box
-- **Multiple Toast Types** – Success, error, info, warning, loading, and submit states
-- **Responsive Design** – Modern UI with smooth animations across all devices
-- **Tailwind CSS Compatible** – Optional custom styling via `className` prop
-- **Flexible Positioning** – 7 different display positions
-- **Theme Support** – Light, dark, and colored themes
+* ⚡ **Lightweight & Fast** – Minimal bundle size
+* 🔒 **100% TypeScript Support** – Strongly typed API
+* 🎨 **Themes** – Light, Dark & Colored
+* 🔔 **Audio Support** – Custom toast sounds with cooldown
+* 🎯 **Multiple Positions** – 7 flexible placements
+* 🧩 **Action Buttons** – Custom actions per toast
+* ⏱ **Auto / Manual Control**
+* 🧪 **No External Dependencies**
+* 🎭 **Tailwind Compatible**
+* 📱 **Responsive & Animated UI**
+
+---
 
 ## 📺 Demo
 
-[![Live Demo](https://img.shields.io/badge/Live_Demo-CodeSandbox-000000?style=for-the-badge&logo=codesandbox&logoColor=white)](https://codesandbox.io/embed/cqkyzm?view=preview&module=%2Fpublic%2Findex.html)
+[![Live Demo](https://img.shields.io/badge/Live_Demo-CodeSandbox-000000?style=for-the-badge\&logo=codesandbox\&logoColor=white)](https://codesandbox.io/embed/cqkyzm?view=preview)
+
+---
 
 ## 📦 Installation
 
@@ -36,220 +44,229 @@ or
 yarn add d9-toast
 ```
 
+---
+
 ## 🚀 Quick Start
 
 ### 1. Wrap your app with `ToastProvider`
 
 ```jsx
-import React from "react";
 import { ToastProvider } from "d9-toast";
-import App from "./App";
 
-function Root() {
+export default function Root() {
   return (
     <ToastProvider>
       <App />
     </ToastProvider>
   );
 }
-
-export default Root;
 ```
 
-### 2. Use toast notifications anywhere
+---
+
+### 2. Trigger toasts anywhere
 
 ```jsx
-import React from "react";
 import { useToast } from "d9-toast";
 
 function MyComponent() {
   const { showToast } = useToast();
 
-  const handleClick = () => {
-    showToast({
-      message: "Operation completed successfully!",
-      type: "success",
-      position: "top-right",
-      duration: 3000,
-    });
-  };
-
-  return <button onClick={handleClick}>Show Toast</button>;
+  return (
+    <button
+      onClick={() =>
+        showToast({
+          message: "Saved successfully!",
+          type: "success",
+        })
+      }
+    >
+      Show Toast
+    </button>
+  );
 }
 ```
 
+---
+
 ## 📖 API Reference
 
 ### `useToast()`
 
-Returns an object with toast management methods:
+```ts
+const { showToast, removeToast, removeToastAll } = useToast();
+```
 
 | Method               | Description                       |
 | -------------------- | --------------------------------- |
-| `showToast(options)` | Displays a new toast notification |
-| `removeToast(id)`    | Removes a specific toast by ID    |
-| `removeToastAll()`   | Removes all active toasts         |
-
-### Toast Options
-
-| Option             | Type                      | Default       | Description                                                                                               |
-| ------------------ | ------------------------- | ------------- | --------------------------------------------------------------------------------------------------------- |
-| `message`          | string \| React.ReactNode | **Required**  | Toast content (supports JSX)                                                                              |
-| `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                   | `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, className: string, callback: function }]`                               |
-| `className`        | string                    | `""`          | Additional CSS/Tailwind classes[Use !important with Tailwind]                                             |
-
-## 💡 Advanced Usage
-
-### Custom Messages with JSX
+| `showToast(options)` | Show a toast and returns its `id` |
+| `removeToast(id)`    | Remove toast by ID                |
+| `removeToastAll()`   | Clear all toasts                  |
 
-```jsx
-showToast({
-  message: (
-    <div>
-      <strong>Custom Content</strong>
-      <p>With formatted HTML/JSX</p>
-    </div>
-  ),
-  type: "info",
-});
+---
+
+## 🔧 Toast Options
+
+### Core Options
+
+| Option             | Type                                                                                                          | Description                        |
+| ------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
+| `message`          | `string \| ReactNode`                                                                                         | **Required** content               |
+| `type`             | `"success" \| "error" \| "info" \| "warning" \| "loading" \| "submit"`                                        | Visual type                        |
+| `theme`            | `"light" \| "dark" \| "colored"`                                                                              | Theme variant                      |
+| `position`         | `"top-right" \| "top-left" \| "bottom-right" \| "bottom-left" \| "center" \| "center-top" \| "center-bottom"` | Toast placement                    |
+| `duration`         | `number`                                                                                                      | Auto-close duration (0 = infinite) |
+| `autoClose`        | `boolean`                                                                                                     | Enable auto close                  |
+| `closable`         | `boolean`                                                                                                     | Show close (X) button              |
+| `progress`         | `boolean`                                                                                                     | Show progress bar                  |
+| `title`            | `boolean`                                                                                                     | Show header/title                  |
+| `pauseOnHover`     | `boolean`                                                                                                     | Pause on hover                     |
+| `pauseOnFocusLoss` | `boolean`                                                                                                     | Pause on tab switch                |
+| `className`        | `string`                                                                                                      | Custom styles                      |
+
+---
+
+### 🔘 Actions
+
+```ts
+actions?: {
+  text: string;
+  className?: string;
+  callback?: (toast: { id: number }) => void;
+}[];
 ```
 
-### Action Buttons
+**Example**
 
 ```jsx
 showToast({
-  message: "File uploaded successfully",
-  type: "success",
+  message: "File uploaded",
   actions: [
     {
-      text: "View",
-      className: "!bg-gray-600 !text-white",
-      callback: () => console.log("View clicked"),
-    },
-    {
-      text: "Dismiss",
-      className: "!bg-gray-600/20 !text-white",
+      text: "Undo",
       callback: ({ id }) => removeToast(id),
     },
   ],
 });
 ```
 
-### Manual Control
+---
 
-```jsx
-const { showToast, removeToast, removeToastAll } = useToast();
+## 🔊 Audio Support (NEW)
 
-// Show a persistent toast
-const toastId = showToast({
-  message: "Processing...",
-  type: "loading",
-  duration: 0, // Infinite
-});
+### Audio Options
+
+```ts
+audio?: {
+  enabled?: boolean;
+  volume?: number; // 0 – 1
+  audioFile?: string;
+  cooldown?: number; // ms
+};
+```
 
-// Remove it later
-removeToast(toastId);
+### Example
 
-// Clear all toasts
-removeToastAll();
+```jsx
+showToast({
+  message: "Message sent",
+  type: "success",
+  audio: {
+    enabled: true,
+    volume: 0.8,
+    cooldown: 500,
+  },
+});
 ```
 
+✔ Prevents sound spam
+✔ Per-toast control
+✔ Custom audio file supported
+
+---
+
 ## 🎨 Styling
 
-### Default CSS
+### Default Styles
 
-```jsx
+```js
 import "d9-toast/dist/toast.css";
 ```
 
-### Custom Styling
+### Tailwind / Custom Styling
 
 ```jsx
-// optional Tailwind/custom styling [Use !important with Tailwind (className: "!bg-red-500")]
 showToast({
-  message: "Custom styled toast",
+  message: "Styled Toast",
   className:
-    "bg-gradient-to-r from-gray-800 to-gray-600 !text-white !shadow-xl !rounded-lg",
-  type: "success",
+    "!bg-gradient-to-r from-indigo-600 to-purple-600 !text-white !rounded-xl",
 });
 ```
 
-### Theme Examples
+> ⚠️ Use `!important` when overriding styles with Tailwind
 
-```jsx
-// Light theme (default)
-showToast({ message: "Light", theme: "light" });
+---
 
-// Dark theme
-showToast({ message: "Dark", theme: "dark" });
+## 🧠 Advanced Usage
 
-// Colored theme (uses type for color)
-showToast({
-  message: "Colored",
-  theme: "colored",
-  type: "success",
+### Persistent Toast
+
+```jsx
+const id = showToast({
+  message: "Loading...",
+  type: "loading",
+  duration: 0,
 });
+
+// later
+removeToast(id);
 ```
 
-## 🔧 Development
+---
 
-### Build
+### JSX Content
 
-```bash
-npm run build
+```jsx
+showToast({
+  message: (
+    <>
+      <strong>Custom JSX</strong>
+      <p>This supports React nodes</p>
+    </>
+  ),
+});
 ```
 
-Outputs to `dist/` directory:
+---
 
-- `dist/index.js` – JavaScript bundle
-- `dist/toast.css` – Default styles
+## 🧾 TypeScript Support
 
-### Local Development
+D9-Toast ships with **full TypeScript definitions**:
 
-```bash
-npm start
-# or
-npm run dev
+```ts
+import type { ToastOptions, ToastType } from "d9-toast";
 ```
 
-## 🤝 Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
-## 📄 License
-
-MIT © [Athul / D9 Coder]
+✔ IntelliSense
+✔ Strict typing
+✔ No `any`
 
 ---
 
-## 🙏 Acknowledgments
+## 📄 License
 
-- Inspired by popular notification libraries
-- Built with React and modern web standards
-- Thanks to all contributors and users
+MIT © **Athul / D9 Coder**
 
 ---
 
 ## ❤️ Support My Work
 
-Donate here → https://rzp.io/rzp/eVnJ0oP
-
-[![Donate via Razorpay](https://img.shields.io/badge/Donate-Razorpay-blue)](https://rzp.io/rzp/eVnJ0oP)
+👉 [https://rzp.io/rzp/eVnJ0oP](https://rzp.io/rzp/eVnJ0oP)
 
 ---
 
-**Quick Links:**
+## 🔗 Links
 
-- [Report an Issue](https://github.com/psathul073/d9-toast/issues)
-- [View Source](https://github.com/psathul073/d9-toast)
-- [npm Package](https://www.npmjs.com/package/d9-toast)
+* 🐞 [Report Issue](https://github.com/psathul073/d9-toast/issues)
+* 💻 [Source Code](https://github.com/psathul073/d9-toast)
+* 📦 [npm Package](https://www.npmjs.com/package/d9-toast)

package/dist/ToastContext.js

@@ -14,21 +14,45 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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, { createContext, useCallback, useContext, useState } from "react";
+import React, { createContext, useCallback, useContext, useRef, useState } from "react";
 import Toast from "./Toast";
+import mySound from "./assets/sounds/toast.m4a";
 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 audioSettings = {
+  audioFile: mySound,
+  volume: 0.8,
+  enabled: true,
+  cooldown: 500
+};
 export var ToastProvider = function ToastProvider(_ref) {
-  var _toasts$2;
   var children = _ref.children;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     toasts = _useState2[0],
     setToasts = _useState2[1];
+  var lastSoundTimeRef = useRef(0);
+
+  // Audio player..
+  var playAudio = useCallback(function (_ref2) {
+    var audioFile = _ref2.audioFile,
+      _ref2$volume = _ref2.volume,
+      volume = _ref2$volume === void 0 ? 0.6 : _ref2$volume,
+      _ref2$enabled = _ref2.enabled,
+      enabled = _ref2$enabled === void 0 ? true : _ref2$enabled;
+    if (!enabled || !audioFile) return;
+    try {
+      var audio = new Audio(audioFile);
+      audio.volume = volume;
+      audio.play()["catch"](function () {});
+    } catch (err) {
+      console.error("Audio play error:", err);
+    }
+  }, []);
 
   // Generate unique ID safely
   var generateId = function generateId() {
@@ -36,57 +60,105 @@ export var ToastProvider = function ToastProvider(_ref) {
   };
 
   // Positions.
-  var positions = ["top-left", "top-right", "bottom-left", "bottom-right", "center", "center-top", "center-bottom"];
+  // const positions = [
+  //   "top-left",
+  //   "top-right",
+  //   "bottom-left",
+  //   "bottom-right",
+  //   "center",
+  //   "center-top",
+  //   "center-bottom",
+  // ];
 
   // Show toast..
   var showToast = useCallback(function (toast) {
-    var newToast = _objectSpread({
+    var _toast$audio$enabled, _toast$audio, _toast$audio$volume, _toast$audio2, _toast$audio$audioFil, _toast$audio3, _toast$audio$cooldown, _toast$audio4;
+    var newToast = _objectSpread(_objectSpread({
       id: generateId()
-    }, toast);
+    }, toast), {}, {
+      audio: {
+        enabled: (_toast$audio$enabled = (_toast$audio = toast.audio) === null || _toast$audio === void 0 ? void 0 : _toast$audio.enabled) !== null && _toast$audio$enabled !== void 0 ? _toast$audio$enabled : audioSettings.enabled,
+        // Toast-specific audio setting.
+        volume: (_toast$audio$volume = (_toast$audio2 = toast.audio) === null || _toast$audio2 === void 0 ? void 0 : _toast$audio2.volume) !== null && _toast$audio$volume !== void 0 ? _toast$audio$volume : audioSettings.volume,
+        // Custom volume per toast.
+        audioFile: (_toast$audio$audioFil = (_toast$audio3 = toast.audio) === null || _toast$audio3 === void 0 ? void 0 : _toast$audio3.audioFile) !== null && _toast$audio$audioFil !== void 0 ? _toast$audio$audioFil : audioSettings.audioFile,
+        // Custom sound per toast.
+        cooldown: (_toast$audio$cooldown = (_toast$audio4 = toast.audio) === null || _toast$audio4 === void 0 ? void 0 : _toast$audio4.cooldown) !== null && _toast$audio$cooldown !== void 0 ? _toast$audio$cooldown : audioSettings.cooldown // Custom cooldown im ms.
+      }
+    });
     setToasts(function (prev) {
       return [].concat(_toConsumableArray(prev), [newToast]);
     });
-    if (toast.duration !== 0 && toast.autoClose) {
+    var audio = newToast.audio,
+      type = newToast.type;
+    var now = Date.now();
+    var cooldown = Number(audio.cooldown) || audioSettings.cooldown;
+    var canPlaySound = now - lastSoundTimeRef.current >= cooldown;
+    var bypassCooldown = type === "error"; // Bypass error toast
+
+    // Play audio whenever a new toast appears.
+    if (audio.enabled && audio.audioFile && (canPlaySound || bypassCooldown)) {
+      lastSoundTimeRef.current = now;
+      playAudio({
+        audioFile: audio.audioFile,
+        volume: audio.volume
+      });
+    }
+    var shouldAutoClose = toast.autoClose !== false && toast.duration !== 0;
+    if (shouldAutoClose) {
       setTimeout(function () {
         return removeToast(newToast.id);
       }, toast.duration || 5000);
     }
     return newToast === null || newToast === void 0 ? void 0 : newToast.id;
-  }, []);
+  }, [playAudio]);
 
   // Remove toast
   var removeToast = useCallback(function (id) {
     setToasts(function (prev) {
-      return prev.filter(function (t) {
+      var newToasts = prev.filter(function (t) {
         return t.id !== id;
       });
+      return newToasts;
     });
   }, []);
 
   // Remove all toast.
-  var removeToastAll = function removeToastAll() {
+  var removeToastAll = useCallback(function () {
     if (toasts.length > 0) {
       setToasts([]);
     }
-  };
+  }, [toasts.length]);
+
+  // Group toasts by there positions..
+  var groupedToasts = toasts.reduce(function (acc, toast) {
+    var position = toast.position || "top-right";
+    if (!acc[position]) {
+      acc[position] = [];
+    }
+    acc[position].push(toast);
+    return acc;
+  }, {});
   return /*#__PURE__*/_jsxs(ToastContext.Provider, {
     value: {
       showToast: showToast,
       removeToast: removeToast,
       removeToastAll: removeToastAll
     },
-    children: [children, /*#__PURE__*/_jsx("div", {
-      className: "toastContainer ".concat(positions.some(function (p) {
-        var _toasts$;
-        return p === ((_toasts$ = toasts[0]) === null || _toasts$ === void 0 ? void 0 : _toasts$.position);
-      }) ? (_toasts$2 = toasts[0]) === null || _toasts$2 === void 0 ? void 0 : _toasts$2.position : "top-right"),
-      children: toasts.map(function (toast) {
-        return /*#__PURE__*/_jsx(Toast, _objectSpread(_objectSpread({}, toast), {}, {
-          remove: function remove() {
-            return removeToast(toast.id);
-          }
-        }), toast.id);
-      })
+    children: [children, Object.entries(groupedToasts).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        position = _ref4[0],
+        positionToasts = _ref4[1];
+      return /*#__PURE__*/_jsx("div", {
+        className: "toastContainer ".concat(position),
+        children: positionToasts.map(function (toast) {
+          return /*#__PURE__*/_jsx(Toast, _objectSpread(_objectSpread({}, toast), {}, {
+            remove: function remove() {
+              return removeToast(toast.id);
+            }
+          }), toast.id);
+        })
+      }, position);
     })]
   });
 };

package/dist/d9-toast.d.ts

@@ -28,11 +28,23 @@ declare module "d9-toast" {
     /** Text label for the action button */
     text: string;
     /** Extra custom class names */
-    className: string;
+    className?: string;
     /** Optional callback triggered on click */
     callback?: (toast: { id: number }) => void;
   }
 
+  /** Audio configuration for toast sound */
+  export interface ToastAudioOptions {
+    /** Enable or disable toast sound */
+    enabled?: boolean;
+    /** Audio volume (0 to 1) */
+    volume?: number;
+    /** Custom audio file */
+    audioFile?: string;
+    /** Cooldown in milliseconds between sounds */
+    cooldown?: number;
+  }
+
   /** Toast configuration options */
   export interface ToastOptions {
     /** Main message; can be string or any React node (you render non-strings as-is) */
@@ -45,7 +57,7 @@ declare module "d9-toast" {
     actions?: ToastAction[];
     /** Visual theme */
     theme?: ToastTheme;
-    /** Weather to show toast title */
+    /** Whether to show toast title */
     title?: boolean;
     /** Whether to show progress bar */
     progress?: boolean;
@@ -61,22 +73,18 @@ declare module "d9-toast" {
     position?: ToastPosition;
     /** Whether the toast auto-closes after duration */
     autoClose?: boolean;
-    
-  }
-
-  /** Toast provider props for context setup */
-  export interface ToastProviderProps {
-    /** App children to wrap with ToastProvider */
-    children: React.ReactNode;
+    /** Audio configuration for this toast */
+    audio?: ToastAudioOptions;
   }
 
+  /** Internal toast data with generated id */
   export interface ToastData extends ToastOptions {
     id: number;
   }
 
   /** Context value shape */
   export interface ToastContextValue {
-    /** Show a toast with given options */
+    /** Show a toast with given options and return toast id */
     showToast: (toast: ToastOptions) => number;
     /** Remove a toast by ID */
     removeToast: (id: number) => void;
@@ -84,6 +92,12 @@ declare module "d9-toast" {
     removeToastAll: () => void;
   }
 
+  /** Toast provider props for context setup */
+  export interface ToastProviderProps {
+    /** App children to wrap with ToastProvider */
+    children: React.ReactNode;
+  }
+
   /** Context provider component */
   export const ToastProvider: React.FC<ToastProviderProps>;
 
@@ -94,5 +108,7 @@ declare module "d9-toast" {
   export interface ToastProps extends ToastData {
     remove: () => void;
   }
+
+  /** Toast component */
   export const Toast: React.FC<ToastProps>;
 }

package/dist/toast.css

@@ -21,6 +21,11 @@
   /* Loading/Submit colors */
   --loading-color: #8736ca;
   --loading-bg: rgba(124, 58, 237, 0.1);
+
+  --border-color: rgba(17, 24, 39, 0.1);
+
+  --line-height-base: 1.5;
+  --font-size-base: 14px;
 }
 
 /* Defaults */
@@ -45,26 +50,34 @@
   z-index: 999;
   display: flex;
   gap: 14px;
+  pointer-events: none; /* Allow clicks through empty space */
+}
+.toastContainer > * {
+  pointer-events: auto; /* Re-enable for toasts */
 }
 .toastContainer.top-right {
   flex-direction: column;
   top: 16px;
   right: 16px;
+  left: auto;
 }
 .toastContainer.top-left {
   flex-direction: column;
   top: 16px;
   left: 16px;
+  right: auto;
 }
 .toastContainer.bottom-right {
   flex-direction: column-reverse;
   bottom: 16px;
   right: 16px;
+  left: auto;
 }
 .toastContainer.bottom-left {
   flex-direction: column-reverse;
   bottom: 16px;
   left: 16px;
+  right: auto;
 }
 .toastContainer.center {
   flex-direction: column;
@@ -76,12 +89,14 @@
   flex-direction: column;
   top: 16px;
   left: 50%;
+  bottom: auto;
   transform: translateX(-50%);
 }
 .toastContainer.center-bottom {
   flex-direction: column-reverse;
   bottom: 16px;
   left: 50%;
+  top: auto;
   transform: translateX(-50%);
 }
 
@@ -96,16 +111,18 @@
   margin: 8px;
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  font-size: smaller;
-  font-family: Arial, Helvetica, sans-serif;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", 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);
+  border: 1px solid var(--border-color);
 }
 
-
 /* Theme colors */
 .light {
   --primary-bg: #ffffff;
@@ -126,12 +143,14 @@
   --loading-color: #6900ca;
   --loading-bg: rgba(106, 31, 176, 0.1);
 
+  --border-color: #e5e7eb;
+
   /* background-color: #ffffff;
   color: #1e2939; */
 }
 
 .dark {
-  --primary-bg: #1e2939;
+  --primary-bg: #06060606;
   --primary-color: #ffffff;
 
   --success-color: #00df5f;
@@ -149,6 +168,8 @@
   --loading-color: #c586ff;
   --loading-bg: rgba(106, 31, 176, 0.1);
 
+  --border-color: #111827;
+
   /* background-color: #1e2939;
   color: #ffffff; */
 }
@@ -177,10 +198,11 @@
 }
 
 .toastHeader {
+  min-height: 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 5px;
+  padding: 3px 6px;
   border-radius: 6px;
   box-shadow: inset 0 1px rgb(0 0 0 / 0.06);
 }
@@ -188,16 +210,22 @@
 .toastHeader .title {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   font-weight: 500;
+  height: 100%;
+}
+.toastHeader .title p {
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: var(--line-height-base);
+  text-transform: uppercase;
 }
-
 .close-button {
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: transparent;
-  color: var(--primary-color);
+  color: currentColor;
   cursor: pointer;
 }
 
@@ -232,8 +260,9 @@
   padding: 8px 12px;
   font-size: 14px;
   border-radius: 6px;
-  box-shadow:  0px 0px 1px #0b0b0b89;
+  box-shadow: 0px 0px 1px #0b0b0b89;
   flex-shrink: 0;
+  font-weight: 500;
   cursor: pointer;
 }
 .toastActions .action-btn:hover {
@@ -287,7 +316,7 @@
 .action-btnB__loading,
 .action-btnB__submit {
   color: var(--loading-color);
- background-color: var(--loading-bg);
+  background-color: var(--loading-bg);
 }
 
 .progress-container {
@@ -391,7 +420,7 @@
   }
 }
 
-@media screen and (max-width: 375px) {
+@media screen and (max-width: 426px) {
   .toastContainer.top-right,
   .toastContainer.bottom-right {
     right: 0px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d9-toast",
-  "version": "1.3.24",
+  "version": "1.4.24",
   "description": "Customizable toast notifications for React",
   "homepage": "https://codesandbox.io/embed/cqkyzm?view=preview",
   "repository": {