@samline/notify 1.0.2 → 2.0.0

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 (84) hide show
  1. package/{LICENSE → LICENSE.md} +2 -2
  2. package/README.md +27 -163
  3. package/dist/_runtime.d.mts +87 -0
  4. package/dist/_runtime.d.ts +87 -0
  5. package/dist/_runtime.js +97 -0
  6. package/dist/_runtime.mjs +83 -0
  7. package/dist/browser/assets-client-B-VVPPYQ.js +114 -0
  8. package/dist/browser/assets-client-CUzxHubR.mjs +108 -0
  9. package/dist/browser/index-client-BBOQyMFk.mjs +173 -0
  10. package/dist/browser/index-client-Czb7hTpD.js +181 -0
  11. package/dist/browser/index.d.mts +134 -0
  12. package/dist/browser/index.d.ts +134 -0
  13. package/dist/browser/index.js +34 -0
  14. package/dist/browser/index.mjs +26 -0
  15. package/dist/browser/render-client-CjcQoukB.js +981 -0
  16. package/dist/browser/render-client-bGRSTd-L.mjs +974 -0
  17. package/dist/core/index.d.mts +68 -0
  18. package/dist/core/index.d.ts +68 -0
  19. package/dist/core/index.js +1 -0
  20. package/dist/core/index.mjs +1 -0
  21. package/dist/index.d.mts +131 -0
  22. package/dist/index.d.ts +131 -0
  23. package/dist/index.js +1240 -0
  24. package/dist/index.mjs +1228 -0
  25. package/dist/react/index.d.mts +158 -0
  26. package/dist/react/index.d.ts +158 -0
  27. package/dist/react/index.js +1116 -0
  28. package/dist/react/index.mjs +1107 -0
  29. package/dist/styles.css +589 -422
  30. package/dist/svelte/assets-client-B-VVPPYQ.js +114 -0
  31. package/dist/svelte/assets-client-CUzxHubR.mjs +108 -0
  32. package/dist/svelte/index-client-DbXbWMIe.js +177 -0
  33. package/dist/svelte/index-client-Dj_WfPK9.mjs +170 -0
  34. package/dist/svelte/index.d.mts +14 -0
  35. package/dist/svelte/index.d.ts +14 -0
  36. package/dist/svelte/index.js +43 -0
  37. package/dist/svelte/index.mjs +36 -0
  38. package/dist/svelte/render-client-CjcQoukB.js +981 -0
  39. package/dist/svelte/render-client-bGRSTd-L.mjs +974 -0
  40. package/dist/vue/assets-client-B-VVPPYQ.js +114 -0
  41. package/dist/vue/assets-client-CUzxHubR.mjs +108 -0
  42. package/dist/vue/index-client-DbXbWMIe.js +177 -0
  43. package/dist/vue/index-client-Dj_WfPK9.mjs +170 -0
  44. package/dist/vue/index.d.mts +50 -0
  45. package/dist/vue/index.d.ts +50 -0
  46. package/dist/vue/index.js +110 -0
  47. package/dist/vue/index.mjs +104 -0
  48. package/dist/vue/render-client-CjcQoukB.js +981 -0
  49. package/dist/vue/render-client-bGRSTd-L.mjs +974 -0
  50. package/package.json +140 -95
  51. package/dist/browser-notify.js +0 -68
  52. package/dist/cc-2Yt7NqMX.mjs +0 -21
  53. package/dist/cc-B6peeNak.mjs +0 -33
  54. package/dist/cc-BWuAzFJ6.js +0 -12
  55. package/dist/cc-CaBHsjUt.js +0 -34
  56. package/dist/cc-DGff5sSY.js +0 -21
  57. package/dist/cc-he3fHS3P.mjs +0 -12
  58. package/dist/notify.d.mts +0 -48
  59. package/dist/notify.d.mts.map +0 -1
  60. package/dist/notify.d.ts +0 -48
  61. package/dist/notify.d.ts.map +0 -1
  62. package/dist/notify.js +0 -206
  63. package/dist/notify.mjs +0 -202
  64. package/dist/react-notify-12s--2JK5UjB.mjs +0 -1244
  65. package/dist/react-notify-12s-Kv2M6zlv.js +0 -1247
  66. package/dist/react.d.mts +0 -70
  67. package/dist/react.d.mts.map +0 -1
  68. package/dist/react.d.ts +0 -70
  69. package/dist/react.d.ts.map +0 -1
  70. package/dist/react.js +0 -19
  71. package/dist/react.mjs +0 -10
  72. package/dist/render-notify-toasts.js +0 -213
  73. package/dist/svelte.d.mts +0 -49
  74. package/dist/svelte.d.mts.map +0 -1
  75. package/dist/svelte.d.ts +0 -49
  76. package/dist/svelte.d.ts.map +0 -1
  77. package/dist/svelte.js +0 -284
  78. package/dist/svelte.mjs +0 -280
  79. package/dist/vue.d.mts +0 -107
  80. package/dist/vue.d.mts.map +0 -1
  81. package/dist/vue.d.ts +0 -107
  82. package/dist/vue.d.ts.map +0 -1
  83. package/dist/vue.js +0 -2215
  84. package/dist/vue.mjs +0 -2211
@@ -0,0 +1,974 @@
1
+ 'use client';
2
+ function __insertCSS(code) {
3
+ if (!code || typeof document == 'undefined') return
4
+ let head = document.head || document.getElementsByTagName('head')[0]
5
+ let style = document.createElement('style')
6
+ style.type = 'text/css'
7
+ head.appendChild(style)
8
+ ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
9
+ }
10
+
11
+ import React from 'react';
12
+ import ReactDOM from 'react-dom';
13
+ import { g as getAsset, C as CloseIcon, L as Loader } from './assets-client-CUzxHubR.mjs';
14
+
15
+ // Visible toasts amount
16
+ const VISIBLE_TOASTS_AMOUNT = 3;
17
+ // Viewport padding
18
+ const VIEWPORT_OFFSET = '24px';
19
+ // Mobile viewport padding
20
+ const MOBILE_VIEWPORT_OFFSET = '16px';
21
+ // Default lifetime of a toasts (in ms)
22
+ const TOAST_LIFETIME = 4000;
23
+ // Default toast width
24
+ const TOAST_WIDTH = 356;
25
+ // Default gap between toasts
26
+ const GAP = 14;
27
+ // Threshold to dismiss a toast
28
+ const SWIPE_THRESHOLD = 45;
29
+ // Equal to exit animation duration
30
+ const TIME_BEFORE_UNMOUNT = 200;
31
+ function cn(...classes) {
32
+ return classes.filter(Boolean).join(' ');
33
+ }
34
+ function canUseDOM() {
35
+ return typeof window !== 'undefined' && typeof document !== 'undefined';
36
+ }
37
+ function getDefaultSwipeDirections(position) {
38
+ const [y, x] = position.split('-');
39
+ const directions = [];
40
+ if (y) {
41
+ directions.push(y);
42
+ }
43
+ if (x) {
44
+ directions.push(x);
45
+ }
46
+ return directions;
47
+ }
48
+ function getDocumentDirection() {
49
+ if (!canUseDOM()) return 'ltr';
50
+ const dirAttribute = document.documentElement.getAttribute('dir');
51
+ if (dirAttribute === 'auto' || !dirAttribute) {
52
+ return window.getComputedStyle(document.documentElement).direction;
53
+ }
54
+ return dirAttribute;
55
+ }
56
+ function assignOffset(defaultOffset, mobileOffset) {
57
+ const styles = {};
58
+ [
59
+ defaultOffset,
60
+ mobileOffset
61
+ ].forEach((offset, index)=>{
62
+ const isMobile = index === 1;
63
+ const prefix = isMobile ? '--mobile-offset' : '--offset';
64
+ const defaultValue = isMobile ? MOBILE_VIEWPORT_OFFSET : VIEWPORT_OFFSET;
65
+ function assignAll(value) {
66
+ [
67
+ 'top',
68
+ 'right',
69
+ 'bottom',
70
+ 'left'
71
+ ].forEach((key)=>{
72
+ styles[`${prefix}-${key}`] = typeof value === 'number' ? `${value}px` : value;
73
+ });
74
+ }
75
+ if (typeof offset === 'number' || typeof offset === 'string') {
76
+ assignAll(offset);
77
+ } else if (typeof offset === 'object') {
78
+ [
79
+ 'top',
80
+ 'right',
81
+ 'bottom',
82
+ 'left'
83
+ ].forEach((key)=>{
84
+ if (offset[key] === undefined) {
85
+ styles[`${prefix}-${key}`] = defaultValue;
86
+ } else {
87
+ styles[`${prefix}-${key}`] = typeof offset[key] === 'number' ? `${offset[key]}px` : offset[key];
88
+ }
89
+ });
90
+ } else {
91
+ assignAll(defaultValue);
92
+ }
93
+ });
94
+ return styles;
95
+ }
96
+
97
+ let toastsCounter = 1;
98
+ class Observer {
99
+ constructor(){
100
+ // We use arrow functions to maintain the correct `this` reference
101
+ this.subscribe = (subscriber)=>{
102
+ this.subscribers.push(subscriber);
103
+ return ()=>{
104
+ const index = this.subscribers.indexOf(subscriber);
105
+ this.subscribers.splice(index, 1);
106
+ };
107
+ };
108
+ this.publish = (data)=>{
109
+ this.subscribers.forEach((subscriber)=>subscriber(data));
110
+ };
111
+ this.addToast = (data)=>{
112
+ this.publish(data);
113
+ this.toasts = [
114
+ ...this.toasts,
115
+ data
116
+ ];
117
+ };
118
+ this.create = (data)=>{
119
+ const { message, ...rest } = data;
120
+ const id = typeof data?.id === 'number' || data.id?.length > 0 ? data.id : toastsCounter++;
121
+ const alreadyExists = this.toasts.find((toast)=>{
122
+ return toast.id === id;
123
+ });
124
+ const dismissible = data.dismissible === undefined ? true : data.dismissible;
125
+ if (this.dismissedToasts.has(id)) {
126
+ this.dismissedToasts.delete(id);
127
+ }
128
+ if (alreadyExists) {
129
+ this.toasts = this.toasts.map((toast)=>{
130
+ if (toast.id === id) {
131
+ this.publish({
132
+ ...toast,
133
+ ...data,
134
+ id,
135
+ title: message
136
+ });
137
+ return {
138
+ ...toast,
139
+ ...data,
140
+ id,
141
+ dismissible,
142
+ title: message
143
+ };
144
+ }
145
+ return toast;
146
+ });
147
+ } else {
148
+ this.addToast({
149
+ title: message,
150
+ ...rest,
151
+ dismissible,
152
+ id
153
+ });
154
+ }
155
+ return id;
156
+ };
157
+ this.dismiss = (id)=>{
158
+ if (id) {
159
+ this.dismissedToasts.add(id);
160
+ requestAnimationFrame(()=>this.subscribers.forEach((subscriber)=>subscriber({
161
+ id,
162
+ dismiss: true
163
+ })));
164
+ } else {
165
+ this.toasts.forEach((toast)=>{
166
+ this.subscribers.forEach((subscriber)=>subscriber({
167
+ id: toast.id,
168
+ dismiss: true
169
+ }));
170
+ });
171
+ }
172
+ return id;
173
+ };
174
+ this.message = (message, data)=>{
175
+ return this.create({
176
+ ...data,
177
+ message
178
+ });
179
+ };
180
+ this.error = (message, data)=>{
181
+ return this.create({
182
+ ...data,
183
+ message,
184
+ type: 'error'
185
+ });
186
+ };
187
+ this.success = (message, data)=>{
188
+ return this.create({
189
+ ...data,
190
+ type: 'success',
191
+ message
192
+ });
193
+ };
194
+ this.info = (message, data)=>{
195
+ return this.create({
196
+ ...data,
197
+ type: 'info',
198
+ message
199
+ });
200
+ };
201
+ this.warning = (message, data)=>{
202
+ return this.create({
203
+ ...data,
204
+ type: 'warning',
205
+ message
206
+ });
207
+ };
208
+ this.loading = (message, data)=>{
209
+ return this.create({
210
+ ...data,
211
+ type: 'loading',
212
+ message
213
+ });
214
+ };
215
+ this.promise = (promise, data)=>{
216
+ if (!data) {
217
+ // Nothing to show
218
+ return;
219
+ }
220
+ let id = undefined;
221
+ if (data.loading !== undefined) {
222
+ id = this.create({
223
+ ...data,
224
+ promise,
225
+ type: 'loading',
226
+ message: data.loading,
227
+ description: typeof data.description !== 'function' ? data.description : undefined
228
+ });
229
+ }
230
+ const p = Promise.resolve(promise instanceof Function ? promise() : promise);
231
+ let shouldDismiss = id !== undefined;
232
+ let result;
233
+ const originalPromise = p.then(async (response)=>{
234
+ result = [
235
+ 'resolve',
236
+ response
237
+ ];
238
+ const isReactElementResponse = React.isValidElement(response);
239
+ if (isReactElementResponse) {
240
+ shouldDismiss = false;
241
+ this.create({
242
+ id,
243
+ type: 'default',
244
+ message: response
245
+ });
246
+ } else if (isHttpResponse(response) && !response.ok) {
247
+ shouldDismiss = false;
248
+ const promiseData = typeof data.error === 'function' ? await data.error(`HTTP error! status: ${response.status}`) : data.error;
249
+ const description = typeof data.description === 'function' ? await data.description(`HTTP error! status: ${response.status}`) : data.description;
250
+ const isExtendedResult = typeof promiseData === 'object' && !React.isValidElement(promiseData);
251
+ const toastSettings = isExtendedResult ? promiseData : {
252
+ message: promiseData
253
+ };
254
+ this.create({
255
+ id,
256
+ type: 'error',
257
+ description,
258
+ ...toastSettings
259
+ });
260
+ } else if (response instanceof Error) {
261
+ shouldDismiss = false;
262
+ const promiseData = typeof data.error === 'function' ? await data.error(response) : data.error;
263
+ const description = typeof data.description === 'function' ? await data.description(response) : data.description;
264
+ const isExtendedResult = typeof promiseData === 'object' && !React.isValidElement(promiseData);
265
+ const toastSettings = isExtendedResult ? promiseData : {
266
+ message: promiseData
267
+ };
268
+ this.create({
269
+ id,
270
+ type: 'error',
271
+ description,
272
+ ...toastSettings
273
+ });
274
+ } else if (data.success !== undefined) {
275
+ shouldDismiss = false;
276
+ const promiseData = typeof data.success === 'function' ? await data.success(response) : data.success;
277
+ const description = typeof data.description === 'function' ? await data.description(response) : data.description;
278
+ const isExtendedResult = typeof promiseData === 'object' && !React.isValidElement(promiseData);
279
+ const toastSettings = isExtendedResult ? promiseData : {
280
+ message: promiseData
281
+ };
282
+ this.create({
283
+ id,
284
+ type: 'success',
285
+ description,
286
+ ...toastSettings
287
+ });
288
+ }
289
+ }).catch(async (error)=>{
290
+ result = [
291
+ 'reject',
292
+ error
293
+ ];
294
+ if (data.error !== undefined) {
295
+ shouldDismiss = false;
296
+ const promiseData = typeof data.error === 'function' ? await data.error(error) : data.error;
297
+ const description = typeof data.description === 'function' ? await data.description(error) : data.description;
298
+ const isExtendedResult = typeof promiseData === 'object' && !React.isValidElement(promiseData);
299
+ const toastSettings = isExtendedResult ? promiseData : {
300
+ message: promiseData
301
+ };
302
+ this.create({
303
+ id,
304
+ type: 'error',
305
+ description,
306
+ ...toastSettings
307
+ });
308
+ }
309
+ }).finally(()=>{
310
+ if (shouldDismiss) {
311
+ // Toast is still in load state (and will be indefinitely — dismiss it)
312
+ this.dismiss(id);
313
+ id = undefined;
314
+ }
315
+ data.finally?.();
316
+ });
317
+ const unwrap = ()=>new Promise((resolve, reject)=>originalPromise.then(()=>result[0] === 'reject' ? reject(result[1]) : resolve(result[1])).catch(reject));
318
+ if (typeof id !== 'string' && typeof id !== 'number') {
319
+ // cannot Object.assign on undefined
320
+ return {
321
+ unwrap
322
+ };
323
+ } else {
324
+ return Object.assign(id, {
325
+ unwrap
326
+ });
327
+ }
328
+ };
329
+ this.custom = (jsx, data)=>{
330
+ const id = data?.id || toastsCounter++;
331
+ this.create({
332
+ jsx: jsx(id),
333
+ ...data,
334
+ id
335
+ });
336
+ return id;
337
+ };
338
+ this.getActiveToasts = ()=>{
339
+ return this.toasts.filter((toast)=>!this.dismissedToasts.has(toast.id));
340
+ };
341
+ this.subscribers = [];
342
+ this.toasts = [];
343
+ this.dismissedToasts = new Set();
344
+ }
345
+ }
346
+ const ToastState = new Observer();
347
+ // bind this to the toast function
348
+ const toastFunction = (message, data)=>{
349
+ return ToastState.create({
350
+ ...data,
351
+ message
352
+ });
353
+ };
354
+ const isHttpResponse = (data)=>{
355
+ return data && typeof data === 'object' && 'ok' in data && typeof data.ok === 'boolean' && 'status' in data && typeof data.status === 'number';
356
+ };
357
+ const basicToast = toastFunction;
358
+ const getHistory = ()=>ToastState.toasts;
359
+ const getToasts = ()=>ToastState.getActiveToasts();
360
+ // We use `Object.assign` to maintain the correct types as we would lose them otherwise
361
+ const toast = Object.assign(basicToast, {
362
+ success: ToastState.success,
363
+ info: ToastState.info,
364
+ warning: ToastState.warning,
365
+ error: ToastState.error,
366
+ custom: ToastState.custom,
367
+ message: ToastState.message,
368
+ promise: ToastState.promise,
369
+ dismiss: ToastState.dismiss,
370
+ loading: ToastState.loading
371
+ }, {
372
+ getHistory,
373
+ getToasts
374
+ });
375
+
376
+ const useIsDocumentHidden = ()=>{
377
+ const [isDocumentHidden, setIsDocumentHidden] = React.useState(document.hidden);
378
+ React.useEffect(()=>{
379
+ const callback = ()=>{
380
+ setIsDocumentHidden(document.hidden);
381
+ };
382
+ document.addEventListener('visibilitychange', callback);
383
+ return ()=>document.removeEventListener('visibilitychange', callback);
384
+ }, []);
385
+ return isDocumentHidden;
386
+ };
387
+
388
+ __insertCSS("[data-notify-toaster][dir=ltr],html[dir=ltr]{--toast-icon-margin-start:-3px;--toast-icon-margin-end:4px;--toast-svg-margin-start:-1px;--toast-svg-margin-end:0px;--toast-button-margin-start:auto;--toast-button-margin-end:0;--toast-close-button-start:0;--toast-close-button-end:unset;--toast-close-button-transform:translate(-35%, -35%)}[data-notify-toaster][dir=rtl],html[dir=rtl]{--toast-icon-margin-start:4px;--toast-icon-margin-end:-3px;--toast-svg-margin-start:0px;--toast-svg-margin-end:-1px;--toast-button-margin-start:0;--toast-button-margin-end:auto;--toast-close-button-start:unset;--toast-close-button-end:0;--toast-close-button-transform:translate(35%, -35%)}[data-notify-toaster]{position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1:hsl(0, 0%, 99%);--gray2:hsl(0, 0%, 97.3%);--gray3:hsl(0, 0%, 95.1%);--gray4:hsl(0, 0%, 93%);--gray5:hsl(0, 0%, 90.9%);--gray6:hsl(0, 0%, 88.7%);--gray7:hsl(0, 0%, 85.8%);--gray8:hsl(0, 0%, 78%);--gray9:hsl(0, 0%, 56.1%);--gray10:hsl(0, 0%, 52.3%);--gray11:hsl(0, 0%, 43.5%);--gray12:hsl(0, 0%, 9%);--border-radius:8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:0;z-index:999999999;transition:transform .4s ease}@media (hover:none) and (pointer:coarse){[data-notify-toaster][data-lifted=true]{transform:none}}[data-notify-toaster][data-x-position=right]{right:var(--offset-right)}[data-notify-toaster][data-x-position=left]{left:var(--offset-left)}[data-notify-toaster][data-x-position=center]{left:50%;transform:translateX(-50%)}[data-notify-toaster][data-y-position=top]{top:var(--offset-top)}[data-notify-toaster][data-y-position=bottom]{bottom:var(--offset-bottom)}[data-notify-toast]{--y:translateY(100%);--lift-amount:calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);touch-action:none;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}[data-notify-toast][data-styled=true]{padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px rgba(0,0,0,.1);width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}[data-notify-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-notify-toast][data-y-position=top]{top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}[data-notify-toast][data-y-position=bottom]{bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}[data-notify-toast][data-styled=true] [data-description]{font-weight:400;line-height:1.4;color:#3f3f3f}[data-rich-colors=true][data-notify-toast][data-styled=true] [data-description]{color:inherit}[data-notify-toaster][data-notify-theme=dark] [data-description]{color:#e8e8e8}[data-notify-toast][data-styled=true] [data-title]{font-weight:500;line-height:1.5;color:inherit}[data-notify-toast][data-styled=true] [data-icon]{display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}[data-notify-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:notify-fade-in .3s ease forwards}[data-notify-toast][data-styled=true] [data-icon]>*{flex-shrink:0}[data-notify-toast][data-styled=true] [data-icon] svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}[data-notify-toast][data-styled=true] [data-content]{display:flex;flex-direction:column;gap:2px}[data-notify-toast][data-styled=true] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;font-weight:500;cursor:pointer;outline:0;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}[data-notify-toast][data-styled=true] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-notify-toast][data-styled=true] [data-button]:first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}[data-notify-toast][data-styled=true] [data-cancel]{color:var(--normal-text);background:rgba(0,0,0,.08)}[data-notify-toaster][data-notify-theme=dark] [data-notify-toast][data-styled=true] [data-cancel]{background:rgba(255,255,255,.3)}[data-notify-toast][data-styled=true] [data-close-button]{position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;color:var(--normal-text);background:var(--normal-bg);border:1px solid var(--normal-border);transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-notify-toast][data-styled=true] [data-close-button]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-notify-toast][data-styled=true] [data-disabled=true]{cursor:not-allowed}[data-notify-toast][data-styled=true]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-notify-toast][data-swiping=true]::before{content:'';position:absolute;left:-100%;right:-100%;height:100%;z-index:-1}[data-notify-toast][data-y-position=top][data-swiping=true]::before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-notify-toast][data-y-position=bottom][data-swiping=true]::before{top:50%;transform:scaleY(3) translateY(-50%)}[data-notify-toast][data-swiping=false][data-removed=true]::before{content:'';position:absolute;inset:0;transform:scaleY(2)}[data-notify-toast][data-expanded=true]::after{content:'';position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-notify-toast][data-mounted=true]{--y:translateY(0);opacity:1}[data-notify-toast][data-expanded=false][data-front=false]{--scale:var(--toasts-before) * 0.05 + 1;--y:translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-notify-toast]>*{transition:opacity .4s}[data-notify-toast][data-x-position=right]{right:0}[data-notify-toast][data-x-position=left]{left:0}[data-notify-toast][data-expanded=false][data-front=false][data-styled=true]>*{opacity:0}[data-notify-toast][data-visible=false]{opacity:0;pointer-events:none}[data-notify-toast][data-mounted=true][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-notify-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y:translateY(calc(var(--lift) * -100%));opacity:0}[data-notify-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}[data-notify-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{--y:translateY(40%);opacity:0;transition:transform .5s,opacity .2s}[data-notify-toast][data-removed=true][data-front=false]::before{height:calc(var(--initial-height) + 20%)}[data-notify-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount-y,0)) translateX(var(--swipe-amount-x,0));transition:none}[data-notify-toast][data-swiped=true]{-webkit-user-select:none;user-select:none}[data-notify-toast][data-swipe-out=true][data-y-position=bottom],[data-notify-toast][data-swipe-out=true][data-y-position=top]{animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:forwards}[data-notify-toast][data-swipe-out=true][data-swipe-direction=left]{animation-name:swipe-out-left}[data-notify-toast][data-swipe-out=true][data-swipe-direction=right]{animation-name:swipe-out-right}[data-notify-toast][data-swipe-out=true][data-swipe-direction=up]{animation-name:swipe-out-up}[data-notify-toast][data-swipe-out=true][data-swipe-direction=down]{animation-name:swipe-out-down}@keyframes swipe-out-left{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) - 100%));opacity:0}}@keyframes swipe-out-right{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) + 100%));opacity:0}}@keyframes swipe-out-up{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) - 100%));opacity:0}}@keyframes swipe-out-down{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) + 100%));opacity:0}}@media (max-width:600px){[data-notify-toaster]{position:fixed;right:var(--mobile-offset-right);left:var(--mobile-offset-left);width:100%}[data-notify-toaster][dir=rtl]{left:calc(var(--mobile-offset-left) * -1)}[data-notify-toaster] [data-notify-toast]{left:0;right:0;width:calc(100% - var(--mobile-offset-left) * 2)}[data-notify-toaster][data-x-position=left]{left:var(--mobile-offset-left)}[data-notify-toaster][data-y-position=bottom]{bottom:var(--mobile-offset-bottom)}[data-notify-toaster][data-y-position=top]{top:var(--mobile-offset-top)}[data-notify-toaster][data-x-position=center]{left:var(--mobile-offset-left);right:var(--mobile-offset-right);transform:none}}[data-notify-toaster][data-notify-theme=light]{--normal-bg:#fff;--normal-border:var(--gray4);--normal-text:var(--gray12);--success-bg:hsl(143, 85%, 96%);--success-border:hsl(145, 92%, 87%);--success-text:hsl(140, 100%, 27%);--info-bg:hsl(208, 100%, 97%);--info-border:hsl(221, 91%, 93%);--info-text:hsl(210, 92%, 45%);--warning-bg:hsl(49, 100%, 97%);--warning-border:hsl(49, 91%, 84%);--warning-text:hsl(31, 92%, 45%);--error-bg:hsl(359, 100%, 97%);--error-border:hsl(359, 100%, 94%);--error-text:hsl(360, 100%, 45%)}[data-notify-toaster][data-notify-theme=light] [data-notify-toast][data-invert=true]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1)}[data-notify-toaster][data-notify-theme=dark] [data-notify-toast][data-invert=true]{--normal-bg:#fff;--normal-border:var(--gray3);--normal-text:var(--gray12)}[data-notify-toaster][data-notify-theme=dark]{--normal-bg:#000;--normal-bg-hover:hsl(0, 0%, 12%);--normal-border:hsl(0, 0%, 20%);--normal-border-hover:hsl(0, 0%, 25%);--normal-text:var(--gray1);--success-bg:hsl(150, 100%, 6%);--success-border:hsl(147, 100%, 12%);--success-text:hsl(150, 86%, 65%);--info-bg:hsl(215, 100%, 6%);--info-border:hsl(223, 43%, 17%);--info-text:hsl(216, 87%, 65%);--warning-bg:hsl(64, 100%, 6%);--warning-border:hsl(60, 100%, 9%);--warning-text:hsl(46, 87%, 65%);--error-bg:hsl(358, 76%, 10%);--error-border:hsl(357, 89%, 16%);--error-text:hsl(358, 100%, 81%)}[data-notify-toaster][data-notify-theme=dark] [data-notify-toast] [data-close-button]{background:var(--normal-bg);border-color:var(--normal-border);color:var(--normal-text)}[data-notify-toaster][data-notify-theme=dark] [data-notify-toast] [data-close-button]:hover{background:var(--normal-bg-hover);border-color:var(--normal-border-hover)}[data-rich-colors=true][data-notify-toast][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-notify-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-notify-toast][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-notify-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-notify-toast][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-notify-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-notify-toast][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}[data-rich-colors=true][data-notify-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.notify-loading-wrapper{--size:16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.notify-loading-wrapper[data-visible=false]{transform-origin:center;animation:notify-fade-out .2s ease forwards}.notify-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.notify-loading-bar{animation:notify-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.notify-loading-bar:first-child{animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.notify-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.notify-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.notify-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.notify-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.notify-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.notify-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.notify-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.notify-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.notify-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.notify-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.notify-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes notify-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes notify-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes notify-spin{0%{opacity:1}100%{opacity:.15}}@media (prefers-reduced-motion){.notify-loading-bar,[data-notify-toast],[data-notify-toast]>*{transition:none!important;animation:none!important}}.notify-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;transition:opacity .2s,transform .2s}.notify-loader[data-visible=false]{opacity:0;transform:scale(.8) translate(-50%,-50%)}");
389
+
390
+ function isAction(action) {
391
+ return action.label !== undefined;
392
+ }
393
+
394
+ const Toast = (props)=>{
395
+ const { invert: ToasterInvert, toast, unstyled, interacting, setHeights, visibleToasts, heights, index, toasts, expanded, removeToast, defaultRichColors, closeButton: closeButtonFromToaster, style, cancelButtonStyle, actionButtonStyle, className = '', descriptionClassName = '', duration: durationFromToaster, position, gap, expandByDefault, classNames, icons, closeButtonAriaLabel = 'Close toast' } = props;
396
+ const [swipeDirection, setSwipeDirection] = React.useState(null);
397
+ const [swipeOutDirection, setSwipeOutDirection] = React.useState(null);
398
+ const [mounted, setMounted] = React.useState(false);
399
+ const [removed, setRemoved] = React.useState(false);
400
+ const [swiping, setSwiping] = React.useState(false);
401
+ const [swipeOut, setSwipeOut] = React.useState(false);
402
+ const [isSwiped, setIsSwiped] = React.useState(false);
403
+ const [offsetBeforeRemove, setOffsetBeforeRemove] = React.useState(0);
404
+ const [initialHeight, setInitialHeight] = React.useState(0);
405
+ const remainingTime = React.useRef(toast.duration || durationFromToaster || TOAST_LIFETIME);
406
+ const dragStartTime = React.useRef(null);
407
+ const toastRef = React.useRef(null);
408
+ const isFront = index === 0;
409
+ const isVisible = index + 1 <= visibleToasts;
410
+ const toastType = toast.type;
411
+ const dismissible = toast.dismissible !== false;
412
+ const toastClassname = toast.className || '';
413
+ const toastDescriptionClassname = toast.descriptionClassName || '';
414
+ const heightIndex = React.useMemo(()=>heights.findIndex((height)=>height.toastId === toast.id) || 0, [
415
+ heights,
416
+ toast.id
417
+ ]);
418
+ const closeButton = React.useMemo(()=>toast.closeButton ?? closeButtonFromToaster, [
419
+ toast.closeButton,
420
+ closeButtonFromToaster
421
+ ]);
422
+ const duration = React.useMemo(()=>toast.duration || durationFromToaster || TOAST_LIFETIME, [
423
+ toast.duration,
424
+ durationFromToaster
425
+ ]);
426
+ const closeTimerStartTimeRef = React.useRef(0);
427
+ const offset = React.useRef(0);
428
+ const lastCloseTimerStartTimeRef = React.useRef(0);
429
+ const pointerStartRef = React.useRef(null);
430
+ const [y, x] = position.split('-');
431
+ const toastsHeightBefore = React.useMemo(()=>{
432
+ return heights.reduce((prev, curr, reducerIndex)=>{
433
+ if (reducerIndex >= heightIndex) {
434
+ return prev;
435
+ }
436
+ return prev + curr.height;
437
+ }, 0);
438
+ }, [
439
+ heights,
440
+ heightIndex
441
+ ]);
442
+ const isDocumentHidden = useIsDocumentHidden();
443
+ const invert = toast.invert || ToasterInvert;
444
+ const disabled = toastType === 'loading';
445
+ offset.current = React.useMemo(()=>heightIndex * gap + toastsHeightBefore, [
446
+ heightIndex,
447
+ toastsHeightBefore
448
+ ]);
449
+ React.useEffect(()=>{
450
+ remainingTime.current = duration;
451
+ }, [
452
+ duration
453
+ ]);
454
+ React.useEffect(()=>{
455
+ setMounted(true);
456
+ }, []);
457
+ React.useEffect(()=>{
458
+ const toastNode = toastRef.current;
459
+ if (toastNode) {
460
+ const height = toastNode.getBoundingClientRect().height;
461
+ setInitialHeight(height);
462
+ setHeights((h)=>[
463
+ {
464
+ toastId: toast.id,
465
+ height,
466
+ position: toast.position
467
+ },
468
+ ...h
469
+ ]);
470
+ return ()=>setHeights((h)=>h.filter((height)=>height.toastId !== toast.id));
471
+ }
472
+ }, [
473
+ setHeights,
474
+ toast.id
475
+ ]);
476
+ React.useLayoutEffect(()=>{
477
+ if (!mounted) return;
478
+ const toastNode = toastRef.current;
479
+ const originalHeight = toastNode.style.height;
480
+ toastNode.style.height = 'auto';
481
+ const newHeight = toastNode.getBoundingClientRect().height;
482
+ toastNode.style.height = originalHeight;
483
+ setInitialHeight(newHeight);
484
+ setHeights((currentHeights)=>{
485
+ const alreadyExists = currentHeights.find((height)=>height.toastId === toast.id);
486
+ if (!alreadyExists) {
487
+ return [
488
+ {
489
+ toastId: toast.id,
490
+ height: newHeight,
491
+ position: toast.position
492
+ },
493
+ ...currentHeights
494
+ ];
495
+ }
496
+ return currentHeights.map((height)=>height.toastId === toast.id ? {
497
+ ...height,
498
+ height: newHeight
499
+ } : height);
500
+ });
501
+ }, [
502
+ mounted,
503
+ toast.title,
504
+ toast.description,
505
+ setHeights,
506
+ toast.id,
507
+ toast.jsx,
508
+ toast.action,
509
+ toast.cancel
510
+ ]);
511
+ const deleteToast = React.useCallback(()=>{
512
+ setRemoved(true);
513
+ setOffsetBeforeRemove(offset.current);
514
+ setHeights((h)=>h.filter((height)=>height.toastId !== toast.id));
515
+ setTimeout(()=>{
516
+ removeToast(toast);
517
+ }, TIME_BEFORE_UNMOUNT);
518
+ }, [
519
+ toast,
520
+ removeToast,
521
+ setHeights,
522
+ offset
523
+ ]);
524
+ React.useEffect(()=>{
525
+ if (toast.promise && toastType === 'loading' || toast.duration === Infinity || toast.type === 'loading') return;
526
+ let timeoutId;
527
+ const pauseTimer = ()=>{
528
+ if (lastCloseTimerStartTimeRef.current < closeTimerStartTimeRef.current) {
529
+ const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;
530
+ remainingTime.current = remainingTime.current - elapsedTime;
531
+ }
532
+ lastCloseTimerStartTimeRef.current = new Date().getTime();
533
+ };
534
+ const startTimer = ()=>{
535
+ if (remainingTime.current === Infinity) return;
536
+ closeTimerStartTimeRef.current = new Date().getTime();
537
+ timeoutId = setTimeout(()=>{
538
+ toast.onAutoClose?.(toast);
539
+ deleteToast();
540
+ }, remainingTime.current);
541
+ };
542
+ if (expanded || interacting || isDocumentHidden) {
543
+ pauseTimer();
544
+ } else {
545
+ startTimer();
546
+ }
547
+ return ()=>clearTimeout(timeoutId);
548
+ }, [
549
+ expanded,
550
+ interacting,
551
+ toast,
552
+ toastType,
553
+ isDocumentHidden,
554
+ deleteToast
555
+ ]);
556
+ React.useEffect(()=>{
557
+ if (toast.delete) {
558
+ deleteToast();
559
+ toast.onDismiss?.(toast);
560
+ }
561
+ }, [
562
+ deleteToast,
563
+ toast.delete
564
+ ]);
565
+ function getLoadingIcon() {
566
+ if (icons?.loading) {
567
+ return /*#__PURE__*/ React.createElement("div", {
568
+ className: cn(classNames?.loader, toast?.classNames?.loader, 'notify-loader'),
569
+ "data-visible": toastType === 'loading'
570
+ }, icons.loading);
571
+ }
572
+ return /*#__PURE__*/ React.createElement(Loader, {
573
+ className: cn(classNames?.loader, toast?.classNames?.loader),
574
+ visible: toastType === 'loading'
575
+ });
576
+ }
577
+ const icon = toast.icon || icons?.[toastType] || getAsset(toastType);
578
+ return /*#__PURE__*/ React.createElement("li", {
579
+ tabIndex: 0,
580
+ ref: toastRef,
581
+ className: cn(className, toastClassname, classNames?.toast, toast?.classNames?.toast, classNames?.default, classNames?.[toastType], toast?.classNames?.[toastType]),
582
+ "data-notify-toast": "",
583
+ "data-rich-colors": toast.richColors ?? defaultRichColors,
584
+ "data-styled": !Boolean(toast.jsx || toast.unstyled || unstyled),
585
+ "data-mounted": mounted,
586
+ "data-promise": Boolean(toast.promise),
587
+ "data-swiped": isSwiped,
588
+ "data-removed": removed,
589
+ "data-visible": isVisible,
590
+ "data-y-position": y,
591
+ "data-x-position": x,
592
+ "data-index": index,
593
+ "data-front": isFront,
594
+ "data-swiping": swiping,
595
+ "data-dismissible": dismissible,
596
+ "data-type": toastType,
597
+ "data-invert": invert,
598
+ "data-swipe-out": swipeOut,
599
+ "data-swipe-direction": swipeOutDirection,
600
+ "data-expanded": Boolean(expanded || expandByDefault && mounted),
601
+ "data-testid": toast.testId,
602
+ style: {
603
+ '--index': index,
604
+ '--toasts-before': index,
605
+ '--z-index': toasts.length - index,
606
+ '--offset': `${removed ? offsetBeforeRemove : offset.current}px`,
607
+ '--initial-height': expandByDefault ? 'auto' : `${initialHeight}px`,
608
+ ...style,
609
+ ...toast.style
610
+ },
611
+ onDragEnd: ()=>{
612
+ setSwiping(false);
613
+ setSwipeDirection(null);
614
+ pointerStartRef.current = null;
615
+ },
616
+ onPointerDown: (event)=>{
617
+ if (event.button === 2) return;
618
+ if (disabled || !dismissible) return;
619
+ dragStartTime.current = new Date();
620
+ setOffsetBeforeRemove(offset.current);
621
+ event.target.setPointerCapture(event.pointerId);
622
+ if (event.target.tagName === 'BUTTON') return;
623
+ setSwiping(true);
624
+ pointerStartRef.current = {
625
+ x: event.clientX,
626
+ y: event.clientY
627
+ };
628
+ },
629
+ onPointerUp: ()=>{
630
+ if (swipeOut || !dismissible) return;
631
+ pointerStartRef.current = null;
632
+ const swipeAmountX = Number(toastRef.current?.style.getPropertyValue('--swipe-amount-x').replace('px', '') || 0);
633
+ const swipeAmountY = Number(toastRef.current?.style.getPropertyValue('--swipe-amount-y').replace('px', '') || 0);
634
+ const timeTaken = new Date().getTime() - dragStartTime.current?.getTime();
635
+ const swipeAmount = swipeDirection === 'x' ? swipeAmountX : swipeAmountY;
636
+ const velocity = Math.abs(swipeAmount) / timeTaken;
637
+ if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
638
+ setOffsetBeforeRemove(offset.current);
639
+ toast.onDismiss?.(toast);
640
+ if (swipeDirection === 'x') {
641
+ setSwipeOutDirection(swipeAmountX > 0 ? 'right' : 'left');
642
+ } else {
643
+ setSwipeOutDirection(swipeAmountY > 0 ? 'down' : 'up');
644
+ }
645
+ deleteToast();
646
+ setSwipeOut(true);
647
+ return;
648
+ }
649
+ toastRef.current?.style.setProperty('--swipe-amount-x', '0px');
650
+ toastRef.current?.style.setProperty('--swipe-amount-y', '0px');
651
+ setIsSwiped(false);
652
+ setSwiping(false);
653
+ setSwipeDirection(null);
654
+ },
655
+ onPointerMove: (event)=>{
656
+ if (!pointerStartRef.current || !dismissible) return;
657
+ const isHighlighted = window.getSelection()?.toString().length > 0;
658
+ if (isHighlighted) return;
659
+ const yDelta = event.clientY - pointerStartRef.current.y;
660
+ const xDelta = event.clientX - pointerStartRef.current.x;
661
+ const swipeDirections = props.swipeDirections ?? getDefaultSwipeDirections(position);
662
+ if (!swipeDirection && (Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1)) {
663
+ setSwipeDirection(Math.abs(xDelta) > Math.abs(yDelta) ? 'x' : 'y');
664
+ }
665
+ let swipeAmount = {
666
+ x: 0,
667
+ y: 0
668
+ };
669
+ const getDampening = (delta)=>{
670
+ const factor = Math.abs(delta) / 20;
671
+ return 1 / (1.5 + factor);
672
+ };
673
+ if (swipeDirection === 'y') {
674
+ if (swipeDirections.includes('top') || swipeDirections.includes('bottom')) {
675
+ if (swipeDirections.includes('top') && yDelta < 0 || swipeDirections.includes('bottom') && yDelta > 0) {
676
+ swipeAmount.y = yDelta;
677
+ } else {
678
+ const dampenedDelta = yDelta * getDampening(yDelta);
679
+ swipeAmount.y = Math.abs(dampenedDelta) < Math.abs(yDelta) ? dampenedDelta : yDelta;
680
+ }
681
+ }
682
+ } else if (swipeDirection === 'x') {
683
+ if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
684
+ if (swipeDirections.includes('left') && xDelta < 0 || swipeDirections.includes('right') && xDelta > 0) {
685
+ swipeAmount.x = xDelta;
686
+ } else {
687
+ const dampenedDelta = xDelta * getDampening(xDelta);
688
+ swipeAmount.x = Math.abs(dampenedDelta) < Math.abs(xDelta) ? dampenedDelta : xDelta;
689
+ }
690
+ }
691
+ }
692
+ if (Math.abs(swipeAmount.x) > 0 || Math.abs(swipeAmount.y) > 0) {
693
+ setIsSwiped(true);
694
+ }
695
+ toastRef.current?.style.setProperty('--swipe-amount-x', `${swipeAmount.x}px`);
696
+ toastRef.current?.style.setProperty('--swipe-amount-y', `${swipeAmount.y}px`);
697
+ }
698
+ }, closeButton && !toast.jsx && toastType !== 'loading' ? /*#__PURE__*/ React.createElement("button", {
699
+ "aria-label": closeButtonAriaLabel,
700
+ "data-disabled": disabled,
701
+ "data-close-button": true,
702
+ onClick: disabled || !dismissible ? ()=>{} : ()=>{
703
+ deleteToast();
704
+ toast.onDismiss?.(toast);
705
+ },
706
+ className: cn(classNames?.closeButton, toast?.classNames?.closeButton)
707
+ }, icons?.close ?? CloseIcon) : null, (toastType || toast.icon || toast.promise) && toast.icon !== null && (icons?.[toastType] !== null || toast.icon) ? /*#__PURE__*/ React.createElement("div", {
708
+ "data-icon": "",
709
+ className: cn(classNames?.icon, toast?.classNames?.icon)
710
+ }, toast.promise || toast.type === 'loading' && !toast.icon ? toast.icon || getLoadingIcon() : null, toast.type !== 'loading' ? icon : null) : null, /*#__PURE__*/ React.createElement("div", {
711
+ "data-content": "",
712
+ className: cn(classNames?.content, toast?.classNames?.content)
713
+ }, /*#__PURE__*/ React.createElement("div", {
714
+ "data-title": "",
715
+ className: cn(classNames?.title, toast?.classNames?.title)
716
+ }, toast.jsx ? toast.jsx : typeof toast.title === 'function' ? toast.title() : toast.title), toast.description ? /*#__PURE__*/ React.createElement("div", {
717
+ "data-description": "",
718
+ className: cn(descriptionClassName, toastDescriptionClassname, classNames?.description, toast?.classNames?.description)
719
+ }, typeof toast.description === 'function' ? toast.description() : toast.description) : null), /*#__PURE__*/ React.isValidElement(toast.cancel) ? toast.cancel : toast.cancel && isAction(toast.cancel) ? /*#__PURE__*/ React.createElement("button", {
720
+ "data-button": true,
721
+ "data-cancel": true,
722
+ style: toast.cancelButtonStyle || cancelButtonStyle,
723
+ onClick: (event)=>{
724
+ if (!isAction(toast.cancel)) return;
725
+ if (!dismissible) return;
726
+ toast.cancel.onClick?.(event);
727
+ deleteToast();
728
+ },
729
+ className: cn(classNames?.cancelButton, toast?.classNames?.cancelButton)
730
+ }, toast.cancel.label) : null, /*#__PURE__*/ React.isValidElement(toast.action) ? toast.action : toast.action && isAction(toast.action) ? /*#__PURE__*/ React.createElement("button", {
731
+ "data-button": true,
732
+ "data-action": true,
733
+ style: toast.actionButtonStyle || actionButtonStyle,
734
+ onClick: (event)=>{
735
+ if (!isAction(toast.action)) return;
736
+ toast.action.onClick?.(event);
737
+ if (event.defaultPrevented) return;
738
+ deleteToast();
739
+ },
740
+ className: cn(classNames?.actionButton, toast?.classNames?.actionButton)
741
+ }, toast.action.label) : null);
742
+ };
743
+ const Toaster = /*#__PURE__*/ React.forwardRef(function Toaster(props, ref) {
744
+ const { id, invert, position = 'bottom-right', hotkey = [
745
+ 'altKey',
746
+ 'KeyT'
747
+ ], expand, closeButton, className, offset, mobileOffset, theme = 'light', richColors, duration, style, visibleToasts = VISIBLE_TOASTS_AMOUNT, toastOptions, dir = getDocumentDirection(), gap = GAP, icons, customAriaLabel, containerAriaLabel = 'Notifications' } = props;
748
+ const [toasts, setToasts] = React.useState([]);
749
+ const filteredToasts = React.useMemo(()=>{
750
+ if (id) {
751
+ return toasts.filter((toast)=>toast.toasterId === id);
752
+ }
753
+ return toasts.filter((toast)=>!toast.toasterId);
754
+ }, [
755
+ toasts,
756
+ id
757
+ ]);
758
+ const possiblePositions = React.useMemo(()=>{
759
+ return Array.from(new Set([
760
+ position
761
+ ].concat(filteredToasts.filter((toast)=>toast.position).map((toast)=>toast.position))));
762
+ }, [
763
+ filteredToasts,
764
+ position
765
+ ]);
766
+ const [heights, setHeights] = React.useState([]);
767
+ const [expanded, setExpanded] = React.useState(false);
768
+ const [interacting, setInteracting] = React.useState(false);
769
+ const [actualTheme, setActualTheme] = React.useState(theme !== 'system' ? theme : typeof window !== 'undefined' ? window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' : 'light');
770
+ const listRef = React.useRef(null);
771
+ const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
772
+ const lastFocusedElementRef = React.useRef(null);
773
+ const isFocusWithinRef = React.useRef(false);
774
+ const removeToast = React.useCallback((toastToRemove)=>{
775
+ setToasts((currentToasts)=>{
776
+ if (!currentToasts.find((toast)=>toast.id === toastToRemove.id)?.delete) {
777
+ ToastState.dismiss(toastToRemove.id);
778
+ }
779
+ return currentToasts.filter(({ id: toastId })=>toastId !== toastToRemove.id);
780
+ });
781
+ }, []);
782
+ React.useEffect(()=>{
783
+ return ToastState.subscribe((toast)=>{
784
+ if (toast.dismiss) {
785
+ requestAnimationFrame(()=>{
786
+ setToasts((currentToasts)=>currentToasts.map((t)=>t.id === toast.id ? {
787
+ ...t,
788
+ delete: true
789
+ } : t));
790
+ });
791
+ return;
792
+ }
793
+ setTimeout(()=>{
794
+ ReactDOM.flushSync(()=>{
795
+ setToasts((currentToasts)=>{
796
+ const indexOfExistingToast = currentToasts.findIndex((t)=>t.id === toast.id);
797
+ if (indexOfExistingToast !== -1) {
798
+ return [
799
+ ...currentToasts.slice(0, indexOfExistingToast),
800
+ {
801
+ ...currentToasts[indexOfExistingToast],
802
+ ...toast
803
+ },
804
+ ...currentToasts.slice(indexOfExistingToast + 1)
805
+ ];
806
+ }
807
+ return [
808
+ toast,
809
+ ...currentToasts
810
+ ];
811
+ });
812
+ });
813
+ });
814
+ });
815
+ }, []);
816
+ React.useEffect(()=>{
817
+ if (theme !== 'system') {
818
+ setActualTheme(theme);
819
+ return;
820
+ }
821
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
822
+ setActualTheme('dark');
823
+ } else {
824
+ setActualTheme('light');
825
+ }
826
+ if (typeof window === 'undefined') return;
827
+ const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
828
+ try {
829
+ darkMediaQuery.addEventListener('change', ({ matches })=>{
830
+ setActualTheme(matches ? 'dark' : 'light');
831
+ });
832
+ } catch (error) {
833
+ darkMediaQuery.addListener(({ matches })=>{
834
+ try {
835
+ setActualTheme(matches ? 'dark' : 'light');
836
+ } catch (listenerError) {
837
+ console.error(listenerError);
838
+ }
839
+ });
840
+ }
841
+ }, [
842
+ theme
843
+ ]);
844
+ React.useEffect(()=>{
845
+ if (toasts.length <= 1) {
846
+ setExpanded(false);
847
+ }
848
+ }, [
849
+ toasts
850
+ ]);
851
+ React.useEffect(()=>{
852
+ const handleKeyDown = (event)=>{
853
+ const isHotkeyPressed = hotkey.length > 0 && hotkey.every((key)=>event[key] || event.code === key);
854
+ if (isHotkeyPressed) {
855
+ setExpanded(true);
856
+ listRef.current?.focus();
857
+ }
858
+ if (event.code === 'Escape' && (document.activeElement === listRef.current || listRef.current?.contains(document.activeElement))) {
859
+ setExpanded(false);
860
+ }
861
+ };
862
+ document.addEventListener('keydown', handleKeyDown);
863
+ return ()=>document.removeEventListener('keydown', handleKeyDown);
864
+ }, [
865
+ hotkey
866
+ ]);
867
+ React.useEffect(()=>{
868
+ if (listRef.current) {
869
+ return ()=>{
870
+ if (lastFocusedElementRef.current) {
871
+ lastFocusedElementRef.current.focus({
872
+ preventScroll: true
873
+ });
874
+ lastFocusedElementRef.current = null;
875
+ isFocusWithinRef.current = false;
876
+ }
877
+ };
878
+ }
879
+ }, []);
880
+ return /*#__PURE__*/ React.createElement("section", {
881
+ ref: ref,
882
+ "aria-label": customAriaLabel ?? `${containerAriaLabel} ${hotkeyLabel}`,
883
+ tabIndex: -1,
884
+ "aria-live": "polite",
885
+ "aria-relevant": "additions text",
886
+ "aria-atomic": "false",
887
+ suppressHydrationWarning: true,
888
+ "data-react-aria-top-layer": true
889
+ }, possiblePositions.map((currentPosition, index)=>{
890
+ const [y, x] = currentPosition.split('-');
891
+ if (!filteredToasts.length) return null;
892
+ return /*#__PURE__*/ React.createElement("ol", {
893
+ key: currentPosition,
894
+ dir: dir === 'auto' ? getDocumentDirection() : dir,
895
+ tabIndex: -1,
896
+ ref: listRef,
897
+ className: className,
898
+ "data-notify-toaster": true,
899
+ "data-notify-theme": actualTheme,
900
+ "data-y-position": y,
901
+ "data-x-position": x,
902
+ style: {
903
+ '--front-toast-height': `${heights[0]?.height || 0}px`,
904
+ '--width': `${TOAST_WIDTH}px`,
905
+ '--gap': `${gap}px`,
906
+ ...style,
907
+ ...assignOffset(offset, mobileOffset)
908
+ },
909
+ onBlur: (event)=>{
910
+ if (isFocusWithinRef.current && !event.currentTarget.contains(event.relatedTarget)) {
911
+ isFocusWithinRef.current = false;
912
+ if (lastFocusedElementRef.current) {
913
+ lastFocusedElementRef.current.focus({
914
+ preventScroll: true
915
+ });
916
+ lastFocusedElementRef.current = null;
917
+ }
918
+ }
919
+ },
920
+ onFocus: (event)=>{
921
+ const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === 'false';
922
+ if (isNotDismissible) return;
923
+ if (!isFocusWithinRef.current) {
924
+ isFocusWithinRef.current = true;
925
+ lastFocusedElementRef.current = event.relatedTarget;
926
+ }
927
+ },
928
+ onMouseEnter: ()=>setExpanded(true),
929
+ onMouseMove: ()=>setExpanded(true),
930
+ onMouseLeave: ()=>{
931
+ if (!interacting) {
932
+ setExpanded(false);
933
+ }
934
+ },
935
+ onDragEnd: ()=>setExpanded(false),
936
+ onPointerDown: (event)=>{
937
+ const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === 'false';
938
+ if (isNotDismissible) return;
939
+ setInteracting(true);
940
+ },
941
+ onPointerUp: ()=>setInteracting(false)
942
+ }, filteredToasts.filter((toast)=>!toast.position && index === 0 || toast.position === currentPosition).map((toast, toastIndex)=>/*#__PURE__*/ React.createElement(Toast, {
943
+ key: toast.id,
944
+ icons: icons,
945
+ index: toastIndex,
946
+ toast: toast,
947
+ defaultRichColors: richColors,
948
+ duration: toastOptions?.duration ?? duration,
949
+ className: toastOptions?.className,
950
+ descriptionClassName: toastOptions?.descriptionClassName,
951
+ invert: invert,
952
+ visibleToasts: visibleToasts,
953
+ closeButton: toastOptions?.closeButton ?? closeButton,
954
+ interacting: interacting,
955
+ position: currentPosition,
956
+ style: toastOptions?.style,
957
+ unstyled: toastOptions?.unstyled,
958
+ classNames: toastOptions?.classNames,
959
+ cancelButtonStyle: toastOptions?.cancelButtonStyle,
960
+ actionButtonStyle: toastOptions?.actionButtonStyle,
961
+ closeButtonAriaLabel: toastOptions?.closeButtonAriaLabel,
962
+ removeToast: removeToast,
963
+ toasts: filteredToasts.filter((t)=>t.position == toast.position),
964
+ heights: heights.filter((h)=>h.position == toast.position),
965
+ setHeights: setHeights,
966
+ expandByDefault: expand,
967
+ gap: gap,
968
+ expanded: expanded,
969
+ swipeDirections: props.swipeDirections
970
+ })));
971
+ }));
972
+ });
973
+
974
+ export { Toaster as T, canUseDOM as c, toast as t };