d9-toast 1.2.20 → 1.3.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +17 -3
  2. package/dist/Toast.js +9 -3
  3. package/dist/d9-toast.d.ts +2 -0
  4. package/dist/toast.css +152 -88
  5. package/package.json +18 -1
package/README.md CHANGED
@@ -5,6 +5,8 @@
5
5
  ![npm downloads](https://img.shields.io/npm/dm/d9-toast?style=flat-square)
6
6
  ![License](https://img.shields.io/npm/l/d9-toast?style=flat-square)
7
7
  ![React](https://img.shields.io/badge/React-18+-61DAFB?style=flat-square&logo=react&logoColor=black)
8
+ [![Donate via Razorpay](https://img.shields.io/badge/Donate-Razorpay-blue)](https://rzp.io/rzp/eVnJ0oP)
9
+
8
10
 
9
11
  A lightweight, customizable toast notification library for React applications.
10
12
 
@@ -95,17 +97,17 @@ Returns an object with toast management methods:
95
97
  | Option | Type | Default | Description |
96
98
  |--------|------|---------|-------------|
97
99
  | `message` | string \| React.ReactNode | **Required** | Toast content (supports JSX) |
98
- | `type` | string | `"info"` | Toast type: `success`, `error`, `info`, `warning`, `loading`, `submit` |
100
+ | `type` | string | `"success"` | Toast type: `success`, `error`, `info`, `warning`, `loading`, `submit` |
99
101
  | `position` | string | `"top-right"` | Position: `top-left`, `top-right`, `bottom-left`, `bottom-right`, `center`, `center-top`, `center-bottom` |
100
102
  | `theme` | string | `"light"` | Theme: `light`, `dark`, `colored` |
101
103
  | `duration` | number | `5000` | Auto-close duration in ms (0 = infinite) |
102
104
  | `autoClose` | boolean | `true` | Whether toast auto-closes after duration |
103
- | `closable` | boolean | `true` | Show close (X) button |
105
+ | `closable` | boolean | `false` | Show close (X) button |
104
106
  | `pauseOnHover` | boolean | `true` | Pause timer on hover |
105
107
  | `pauseOnFocusLoss` | boolean | `true` | Pause timer when window loses focus |
106
108
  | `progress` | boolean | `true` | Show progress bar |
107
109
  | `title` | boolean | `true` | Show toast header with type |
108
- | `actions` | Array | `[]` | Action buttons: `[{ text: string, callback: function }]` |
110
+ | `actions` | Array | `[]` | Action buttons: `[{ text: string, className: string, callback: function }]` |
109
111
  | `className` | string | `""` | Additional CSS/Tailwind classes |
110
112
 
111
113
  ## 💡 Advanced Usage
@@ -133,9 +135,11 @@ showToast({
133
135
  actions: [
134
136
  {
135
137
  text: "View",
138
+ className: "",
136
139
  callback: () => console.log("View clicked")
137
140
  },
138
141
  {
142
+ className: "",
139
143
  text: "Dismiss",
140
144
  callback: ({ id }) => removeToast(id)
141
145
  }
@@ -235,6 +239,16 @@ MIT © [Athul / D9 Coder]
235
239
 
236
240
  ---
237
241
 
242
+ ## ❤️ Support My Work
243
+
244
+
245
+
246
+ Donate here → https://rzp.io/rzp/eVnJ0oP
247
+
248
+ [![Donate via Razorpay](https://img.shields.io/badge/Donate-Razorpay-blue)](https://rzp.io/rzp/eVnJ0oP)
249
+
250
+ ---
251
+
238
252
  **Quick Links:**
239
253
  - [Report an Issue](https://github.com/psathul073/d9-toast/issues)
240
254
  - [View Source](https://github.com/psathul073/d9-toast)
package/dist/Toast.js CHANGED
@@ -12,7 +12,7 @@ var Toast = function Toast(_ref) {
12
12
  var id = _ref.id,
13
13
  message = _ref.message,
14
14
  _ref$type = _ref.type,
15
- type = _ref$type === void 0 ? "info" : _ref$type,
15
+ type = _ref$type === void 0 ? "success" : _ref$type,
16
16
  _ref$theme = _ref.theme,
17
17
  theme = _ref$theme === void 0 ? "light" : _ref$theme,
18
18
  _ref$position = _ref.position,
@@ -29,7 +29,7 @@ var Toast = function Toast(_ref) {
29
29
  _ref$autoClose = _ref.autoClose,
30
30
  autoClose = _ref$autoClose === void 0 ? true : _ref$autoClose,
31
31
  _ref$closable = _ref.closable,
32
- closable = _ref$closable === void 0 ? true : _ref$closable,
32
+ closable = _ref$closable === void 0 ? false : _ref$closable,
33
33
  _ref$title = _ref.title,
34
34
  title = _ref$title === void 0 ? true : _ref$title,
35
35
  _ref$pauseOnHover = _ref.pauseOnHover,
@@ -116,14 +116,18 @@ var Toast = function Toast(_ref) {
116
116
  var actionButtons = useMemo(function () {
117
117
  if (actions.length === 0) return null;
118
118
  return actions.slice(0, 2).map(function (a, idx) {
119
+ // Dynamic class names..
120
+ var btnType = actions.length === 1 ? "action-btnA__".concat(type) : idx === 0 ? "action-btnB__".concat(type) : "action-btnA__".concat(type);
121
+ var classNameStr = "action-btn ".concat(btnType, " ").concat(a.className || "").trim();
119
122
  return /*#__PURE__*/_jsx("button", {
123
+ "aria-label": "Action ".concat(a.text),
120
124
  onClick: function onClick() {
121
125
  var _a$callback;
122
126
  return (_a$callback = a.callback) === null || _a$callback === void 0 ? void 0 : _a$callback.call(a, {
123
127
  id: id
124
128
  });
125
129
  },
126
- className: "action-btn ".concat(actions.length === 1 ? "action-btnA ".concat(type) : idx === 0 ? "action-btnB ".concat(type) : "action-btnA ".concat(type)),
130
+ className: classNameStr,
127
131
  children: a.text
128
132
  }, idx);
129
133
  });
@@ -174,6 +178,7 @@ var Toast = function Toast(_ref) {
174
178
  })]
175
179
  }), closable && /*#__PURE__*/_jsx("button", {
176
180
  className: "close-button",
181
+ "aria-label": "Close button",
177
182
  onClick: function onClick() {
178
183
  return triggerExit();
179
184
  },
@@ -194,6 +199,7 @@ var Toast = function Toast(_ref) {
194
199
  })]
195
200
  }), closable && !title && /*#__PURE__*/_jsx("button", {
196
201
  className: "close-button",
202
+ "aria-label": "Close button",
197
203
  onClick: function onClick() {
198
204
  return triggerExit();
199
205
  },
package/dist/d9-toast.d.ts CHANGED
@@ -27,6 +27,8 @@ declare module "d9-toast" {
27
27
  export interface ToastAction {
28
28
  /** Text label for the action button */
29
29
  text: string;
30
+ /** Extra custom class names */
31
+ className: string;
30
32
  /** Optional callback triggered on click */
31
33
  callback?: (toast: { id: number }) => void;
32
34
  }
package/dist/toast.css CHANGED
@@ -1,5 +1,29 @@
1
+ :root {
2
+ --primary-bg: #ffffff;
3
+ --primary-color: #1e2939;
4
+
5
+ /* Success colors */
6
+ --success-color: #006e2f;
7
+ --success-bg: rgba(0, 166, 61, 0.1);
8
+
9
+ /* Error colors */
10
+ --error-color: #b62027;
11
+ --error-bg: rgba(231, 0, 12, 0.1);
12
+
13
+ /* Info colors */
14
+ --info-color: #0062b8;
15
+ --info-bg: rgba(21, 93, 251, 0.1);
16
+
17
+ /* Warning colors */
18
+ --warning-color: #866300;
19
+ --warning-bg: rgba(208, 135, 0, 0.1);
20
+
21
+ /* Loading/Submit colors */
22
+ --loading-color: #8736ca;
23
+ --loading-bg: rgba(124, 58, 237, 0.1);
24
+ }
25
+
1
26
  /* Defaults */
2
- .toastContainer button,
3
27
  .toastContainer p,
4
28
  .toastContainer span {
5
29
  font: inherit;
@@ -10,6 +34,12 @@
10
34
  margin: 0;
11
35
  }
12
36
 
37
+ .toastContainer button {
38
+ border: none;
39
+ padding: 0;
40
+ margin: 0;
41
+ }
42
+
13
43
  .toastContainer {
14
44
  position: fixed;
15
45
  z-index: 999;
@@ -66,26 +96,89 @@
66
96
  margin: 8px;
67
97
  border-radius: 8px;
68
98
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
99
+ font-size: smaller;
69
100
  font-family: cursive;
70
101
  transition: all 0.3s ease-in;
71
102
  will-change: transform, opacity;
103
+ background-color: var(--primary-bg);
104
+ color: var(--primary-color);
72
105
  }
73
106
 
107
+ /* Theme colors */
74
108
  .light {
75
- background-color: #ffffff;
76
- color: #1e2939;
109
+ --primary-bg: #ffffff;
110
+ --primary-color: #1e2939;
111
+
112
+ --success-color: #006e2f;
113
+ --success-bg: rgba(0, 138, 58, 0.1);
114
+
115
+ --error-color: #bf0009;
116
+ --error-bg: rgba(163, 0, 8, 0.1);
117
+
118
+ --info-color: #005fbd;
119
+ --info-bg: rgba(0, 76, 153, 0.1);
120
+
121
+ --warning-color: #8d6200;
122
+ --warning-bg: rgba(153, 107, 0, 0.1);
123
+
124
+ --loading-color: #6900ca;
125
+ --loading-bg: rgba(106, 31, 176, 0.1);
126
+
127
+ /* background-color: #ffffff;
128
+ color: #1e2939; */
77
129
  }
78
130
 
79
131
  .dark {
80
- background-color: #1e2939;
81
- color: #ffffff;
132
+ --primary-bg: #1e2939;
133
+ --primary-color: #ffffff;
134
+
135
+ --success-color: #00df5f;
136
+ --success-bg: rgba(0, 138, 58, 0.1);
137
+
138
+ --error-color: #ff666d;
139
+ --error-bg: rgba(163, 0, 8, 0.1);
140
+
141
+ --info-color: #5badff;
142
+ --info-bg: rgba(0, 76, 153, 0.1);
143
+
144
+ --warning-color: #e29e00;
145
+ --warning-bg: rgba(153, 107, 0, 0.1);
146
+
147
+ --loading-color: #c586ff;
148
+ --loading-bg: rgba(106, 31, 176, 0.1);
149
+
150
+ /* background-color: #1e2939;
151
+ color: #ffffff; */
152
+ }
153
+
154
+ /* Type colors */
155
+ .success {
156
+ color: var(--success-color);
157
+ background-color: var(--success-bg);
158
+ }
159
+ .error {
160
+ color: var(--error-color);
161
+ background-color: var(--error-bg);
162
+ }
163
+ .info {
164
+ color: var(--info-color);
165
+ background-color: var(--info-bg);
166
+ }
167
+ .warning {
168
+ color: var(--warning-color);
169
+ background-color: var(--warning-bg);
170
+ }
171
+ .loading,
172
+ .submit {
173
+ color: var(--loading-color);
174
+ background-color: var(--loading-bg);
82
175
  }
83
176
 
84
177
  .toastHeader {
85
178
  display: flex;
86
179
  justify-content: space-between;
87
180
  align-items: center;
88
- padding: 2px 4px;
181
+ padding: 5px;
89
182
  border-radius: 6px;
90
183
  box-shadow: inset 0 1px rgb(0 0 0 / 0.06);
91
184
  }
@@ -94,7 +187,6 @@
94
187
  display: inline-flex;
95
188
  align-items: center;
96
189
  gap: 8px;
97
- font-size: 0.9rem;
98
190
  font-weight: 500;
99
191
  }
100
192
 
@@ -102,6 +194,8 @@
102
194
  display: flex;
103
195
  align-items: center;
104
196
  justify-content: center;
197
+ background-color: transparent;
198
+ color: var(--primary-color);
105
199
  cursor: pointer;
106
200
  }
107
201
 
@@ -117,7 +211,7 @@
117
211
  gap: 8px;
118
212
  }
119
213
 
120
- .toast-message__container .toast-message{
214
+ .toast-message__container .toast-message {
121
215
  display: inline-flex;
122
216
  align-items: center;
123
217
  text-wrap: wrap;
@@ -133,66 +227,69 @@
133
227
  margin-bottom: 8px;
134
228
  }
135
229
  .toastActions .action-btn {
136
- padding: 4px 12px;
230
+ padding: 8px 12px;
137
231
  font-size: 14px;
138
232
  border-radius: 6px;
139
- border: 1px solid;
140
- box-shadow: inset 0 0 1px #0b0b0b;
233
+ box-shadow: inset 0px 0px 1px #0b0b0b89;
234
+ flex-shrink: 0;
141
235
  cursor: pointer;
142
236
  }
143
237
  .toastActions .action-btn:hover {
144
- opacity: 0.8;
238
+ filter: grayscale(1);
145
239
  }
146
240
 
147
241
  /* Action button 1 */
148
- .action-btnA.success,.colored.success {
149
- color: #ffffff;
150
- border-color: #00c950;
151
- background-color: #00c950;
152
- }
153
- .action-btnA.error {
154
- color: #ffffff;
155
- border-color: #fb2c36;
156
- background-color: #fb2c36;
157
- }
158
- .action-btnA.info {
159
- color: #ffffff;
160
- border-color: #0088ff;
161
- background-color: #0088ff;
162
- }
163
- .action-btnA.warning {
164
- color: #ffffff;
165
- border-color: #f0b100;
166
- background-color: #f0b100;
167
- }
168
- .action-btnA.loading,
169
- .action-btnA.submit {
170
- color: #ffffff;
171
- border-color: #aa44ff;
172
- background-color: #aa44ff;
242
+ .action-btnA__success {
243
+ color: var(--primary-bg);
244
+ border-color: var(--success-color);
245
+ background-color: var(--success-color);
246
+ }
247
+ .action-btnA__error {
248
+ color: var(--primary-bg);
249
+ background-color: var(--error-color);
250
+ }
251
+ .action-btnA__info {
252
+ color: var(--primary-bg);
253
+ border-color: var(--info-color);
254
+ background-color: var(--info-color);
255
+ }
256
+ .action-btnA__warning {
257
+ color: var(--primary-bg);
258
+ border-color: var(--warning-color);
259
+ background-color: var(--warning-color);
260
+ }
261
+ .action-btnA__loading,
262
+ .action-btnA__submit {
263
+ color: var(--primary-bg);
264
+ border-color: var(--loading-color);
265
+ background-color: var(--loading-color);
173
266
  }
267
+
174
268
  /* Action button 2 */
175
- .action-btnB.success {
176
- color: #00c950;
269
+ .action-btnB__success {
270
+ color: var(--success-color);
177
271
  border-color: currentColor;
272
+ background-color: transparent;
178
273
  }
179
-
180
- .action-btnB.error {
181
- color: #fb2c36;
182
- border-color: currentColor;
274
+ .action-btnB__error {
275
+ color: var(--error-color);
276
+ background-color: var(--error-bg);
183
277
  }
184
- .action-btnB.info {
185
- color: #0088ff;
278
+ .action-btnB__info {
279
+ color: var(--info-color);
186
280
  border-color: currentColor;
281
+ background-color: transparent;
187
282
  }
188
- .action-btnB.warning {
189
- color: #f0b100;
283
+ .action-btnB__warning {
284
+ color: var(--warning-color);
190
285
  border-color: currentColor;
286
+ background-color: transparent;
191
287
  }
192
- .action-btnB.loading,
193
- .action-btnB.submit {
194
- color: #aa44ff;
288
+ .action-btnB__loading,
289
+ .action-btnB__submit {
290
+ color: var(--loading-color);
195
291
  border-color: currentColor;
292
+ background-color: transparent;
196
293
  }
197
294
 
198
295
  .progress-container {
@@ -211,44 +308,22 @@
211
308
  }
212
309
 
213
310
  .toast-progress.success {
214
- background-color: #00c950;
311
+ background-color: var(--success-color);
215
312
  }
216
313
  .toast-progress.error {
217
- background-color: #fb2c36;
314
+ background-color: var(--error-color);
218
315
  }
219
316
  .toast-progress.info {
220
- background-color: #0088ff;
317
+ background-color: var(--info-color);
221
318
  }
222
319
  .toast-progress.warning {
223
- background-color: #f0b100;
320
+ background-color: var(--warning-color);
224
321
  }
225
322
  .toast-progress.loading,
226
323
  .toast-progress.submit {
227
- background-color: #aa44ff;
228
- }
229
-
230
- .success {
231
- color: #00c950;
232
- background-color: rgba(0, 166, 61, 0.1);
233
- }
234
- .error {
235
- color: #fb2c36;
236
- background-color: rgba(231, 0, 12, 0.1);
237
- }
238
- .info {
239
- color: #0088ff;
240
- background-color: rgba(21, 93, 251, 0.1);
241
- }
242
- .warning {
243
- color: #f0b100;
244
- background-color: rgba(208, 135, 0, 0.1);
245
- }
246
- .loading,.submit {
247
- color: #aa44ff;
248
- background-color: rgba(124, 58, 237, 0.1);
324
+ background-color: var(--loading-color);
249
325
  }
250
326
 
251
-
252
327
  /* Zoom animation */
253
328
  /* Enter animate keyframes */
254
329
  @keyframes upToDown {
@@ -317,14 +392,3 @@
317
392
  transform: scale(0.6);
318
393
  }
319
394
  }
320
-
321
- @media screen and (max-width: 375px) {
322
- .toastContainer.top-right,
323
- .toastContainer.bottom-right {
324
- right: 0px;
325
- }
326
- .toastContainer.top-left,
327
- .toastContainer.bottom-left {
328
- left: 0px;
329
- }
330
- }
package/package.json CHANGED
@@ -1,7 +1,19 @@
1
1
  {
2
2
  "name": "d9-toast",
3
- "version": "1.2.20",
3
+ "version": "1.3.21",
4
4
  "description": "Customizable toast notifications for React",
5
+ "homepage": "https://codesandbox.io/embed/cqkyzm?view=preview",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/psathul073/d9-toast.git"
9
+ },
10
+ "bugs": {
11
+ "url": "https://github.com/psathul073/d9-toast/issues"
12
+ },
13
+ "funding": {
14
+ "type": "donation",
15
+ "url": "https://rzp.io/rzp/eVnJ0oP"
16
+ },
5
17
  "main": "dist/index.js",
6
18
  "type": "module",
7
19
  "files": [
@@ -22,7 +34,12 @@
22
34
  "keywords": [
23
35
  "react",
24
36
  "toast",
37
+ "react-component",
38
+ "push",
39
+ "alert",
40
+ "message",
25
41
  "notifications",
42
+ "d9-toast",
26
43
  "ui"
27
44
  ],
28
45
  "license": "MIT",