d9-toast 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,121 @@
+# D9-Toast
+
+Customizable toast notifications for React with TailwindCSS support.
+
+**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.
+
+---
+
+## Installation
+
+```bash
+npm install d9-toast
+```
+
+or
+
+```bash
+yarn add d9-toast
+```
+
+---
+
+## Usage
+
+### 1. Wrap your app with `ToastProvider`
+
+```jsx
+import React from "react";
+import { ToastProvider } from "d9-toast";
+import App from "./App";
+
+function Root() {
+  return (
+    <ToastProvider position="top-right">
+      <App />
+    </ToastProvider>
+  );
+}
+
+export default Root;
+```
+
+### 2. Trigger a toast using `useToast`
+
+```jsx
+import React from "react";
+import { useToast } from "d9-toast";
+
+function App() {
+  const toast = useToast();
+
+  const showToast = () => {
+    toast({
+      message: "Hello World!",
+      type: "success", // success | error | info | warning | loading | submit
+      duration: 3000,
+      actions: [
+        { text: "Undo", callback: () => console.log("Undo clicked") },
+      ],
+    });
+  };
+
+  return <button onClick={showToast}>Show Toast</button>;
+}
+
+export default App;
+```
+
+### 3. ToastProvider Props
+
+| Prop               | Type    | Default     | Description                                                                     |
+| ------------------ | ------- | ----------- | ------------------------------------------------------------------------------- |
+| `position`         | string  | `top-right` | Position of all toasts (`top-left`, `top-right`, `bottom-left`, `bottom-right`) |
+| `theme`            | string  | `light`     | Default theme for all toasts (`light` or `dark`)                                |
+| `pauseOnHover`     | boolean | `true`      | Pause toast timer on hover                                                      |
+| `pauseOnFocusLoss` | boolean | `true`      | Pause toast timer when window loses focus                                       |
+
+### 4. Toast Options
+
+| Option     | Type    | Default | Description                                                                |
+| ---------- | ------- | ------- | -------------------------------------------------------------------------- |
+| `message`  | string  | -       | The message to display                                                     |
+| `type`     | string  | `info`  | Type of toast (`success`, `error`, `info`, `warning`, `loading`, `submit`) |
+| `duration` | number  | 5000    | Auto-close duration in ms (0 for infinite)                                 |
+| `actions`  | array   | []      | Array of action objects `{ text: string, callback: function }`             |
+| `closable` | boolean | true    | Show close button                                                          |
+| `progress` | boolean | true    | Show progress bar                                                          |
+
+---
+
+## Development
+
+### Build
+
+```bash
+npm run build
+```
+
+* Generates CSS in `dist/toast.css` using TailwindCSS
+* Generates JS in `dist/` using Babel
+
+### Tailwind Support
+
+Make sure your project has Tailwind installed. If not, include the `toast.css` from `dist/` in your project:
+
+```jsx
+import 'd9-toast/dist/toast.css';
+```
+
+---
+
+## License
+
+MIT

package/dist/ToastContext.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useToast = exports.ToastProvider = void 0;
 var _react = require("react");
 var _Toast = _interopRequireDefault(require("./Toast.js"));
-var _Icons = _interopRequireDefault(require("./Icons.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "d9-toast",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Customizable toast notifications for React",
-  "main": "src/index.js",
+  "main": "dist/index.js",
   "type": "module",
   "files": [
     "dist"

package/src/index.js

@@ -1,2 +0,0 @@
-import "../dist/toast.css";
-export { ToastProvider, useToast } from "./ToastContext.js";