@starasia/toast 1.0.3 → 3.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 (3) hide show
  1. package/dist/toast.es.js +192 -192
  2. package/dist/toast.umd.js +121 -125
  3. package/package.json +6 -6
package/dist/toast.es.js CHANGED
@@ -1,5 +1,5 @@
1
- import { jsx as t, jsxs as k } from "react/jsx-runtime";
2
- import f, { useState as p, useRef as x, useEffect as h } from "react";
1
+ import { jsx as s, jsxs as x } from "react/jsx-runtime";
2
+ import b, { useState as p, useRef as k, useEffect as v } from "react";
3
3
  import C from "react-dom";
4
4
  const L = `@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
5
5
 
@@ -11,185 +11,181 @@ const L = `@import url("https://fonts.googleapis.com/css2?family=Poppins&display
11
11
  }
12
12
 
13
13
  :root {
14
- /* white */
15
- --starasia-ui-toast-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
14
+ /* solid default (dark bg) */
15
+ --sa-toast-solid-bg-default: var(--sa-text-bolder, #1e1f21);
16
+ --sa-toast-solid-text-default: var(--sa-text-primary-inverse, #ffffff);
17
+ --sa-toast-solid-border-default: var(--sa-border-subtle, #0b120e24);
16
18
 
17
- /* color solid default */
18
- --starasia-ui-solid-background-default: rgba(17, 24, 39, 1);
19
- --starasia-ui-solid-color-default: rgba(255, 255, 255, 1);
20
- --starasia-ui-solid-border-default: rgba(229, 231, 235, 1);
19
+ /* outline default */
20
+ --sa-toast-outline-bg-default: var(--sa-background-primary, #ffffff);
21
+ --sa-toast-outline-text-default: var(--sa-text-primary, #292a2e);
22
+ --sa-toast-outline-border-default: var(--sa-border-subtle, #0b120e24);
23
+ --sa-toast-outline-progress-default: var(--sa-text-bolder, #1e1f21);
21
24
 
22
- /* color outline default */
23
- --starasia-ui-outline-background-default: rgba(249, 250, 251, 1);
24
- --starasia-ui-outline-color-default: rgba(17, 24, 39, 1);
25
- --starasia-ui-outline-border-default: rgba(229, 231, 235, 1);
26
- --starasia-ui-outline-progress-default: rgba(24, 26, 25, 1);
25
+ /* outline danger */
26
+ --sa-toast-outline-bg-danger: var(--sa-background-error-subtlest, #fff0f3);
27
+ --sa-toast-outline-text-danger: var(--sa-background-error, #c9184a);
28
+ --sa-toast-outline-border-danger: var(--sa-color-error-100, #ffccd5);
29
+ --sa-toast-outline-progress-danger: var(--sa-background-error, #c9184a);
27
30
 
28
- /* color outline red */
29
- --starasia-ui-outline-background-danger: rgba(254, 242, 242, 1);
30
- --starasia-ui-outline-color-danger: rgba(220, 38, 38, 1);
31
- --starasia-ui-outline-border-danger: rgba(254, 202, 202, 1);
32
- --starasia-ui-outline-progress-danger: rgba(201, 24, 74, 1);
31
+ /* solid danger */
32
+ --sa-toast-solid-bg-danger: var(--sa-background-error, #c9184a);
33
+ --sa-toast-solid-text-danger: var(--sa-color-error-50, #fff0f3);
34
+ --sa-toast-solid-border-danger: var(--sa-background-error, #c9184a);
33
35
 
34
- /* color solid red */
35
- --starasia-ui-solid-background-danger: rgba(201, 24, 74, 1);
36
- --starasia-ui-solid-color-danger: rgba(255, 240, 243, 1);
37
- --starasia-ui-solid-border-danger: rgba(201, 24, 74, 1);
36
+ /* outline success */
37
+ --sa-toast-outline-bg-success: var(--sa-background-success-subtlest, #ecfff6);
38
+ --sa-toast-outline-text-success: var(--sa-background-success, #28ac6e);
39
+ --sa-toast-outline-border-success: var(--sa-color-success-200, #97e6c1);
40
+ --sa-toast-outline-progress-success: var(--sa-background-success, #28ac6e);
38
41
 
39
- /* color outline success */
40
- --starasia-ui-outline-background-success: rgba(220, 246, 234, 1);
41
- --starasia-ui-outline-color-success: rgba(40, 172, 110, 1);
42
- --starasia-ui-outline-border-success: rgba(151, 230, 193, 1);
43
- --starasia-ui-outline-progress-success: rgba(40, 172, 110, 1);
42
+ /* solid success */
43
+ --sa-toast-solid-bg-success: var(--sa-background-success, #28ac6e);
44
+ --sa-toast-solid-text-success: var(--sa-color-success-50, #ecfff6);
45
+ --sa-toast-solid-border-success: var(--sa-background-success, #28ac6e);
44
46
 
45
- /* color solid success */
46
- --starasia-ui-solid-background-success: rgba(40, 172, 110, 1);
47
- --starasia-ui-solid-color-success: rgba(220, 246, 234, 1);
48
- --starasia-ui-solid-border-success: rgba(40, 172, 110, 1);
47
+ /* outline info */
48
+ --sa-toast-outline-bg-info: var(--sa-background-info-subtlest, #effaff);
49
+ --sa-toast-outline-text-info: var(--sa-background-info, #0090d4);
50
+ --sa-toast-outline-border-info: var(--sa-color-info-200, #b6eaff);
51
+ --sa-toast-outline-progress-info: var(--sa-background-info, #0090d4);
49
52
 
50
- /* color outline info (semantic blue) */
51
- --starasia-ui-outline-background-info: rgba(227, 242, 253, 1);
52
- --starasia-ui-outline-color-info: rgba(25, 118, 210, 1);
53
- --starasia-ui-outline-border-info: rgba(100, 181, 246, 1);
54
- --starasia-ui-outline-progress-info: rgba(25, 118, 210, 1);
53
+ /* solid info */
54
+ --sa-toast-solid-bg-info: var(--sa-background-info, #0090d4);
55
+ --sa-toast-solid-text-info: var(--sa-color-info-50, #effaff);
56
+ --sa-toast-solid-border-info: var(--sa-background-info, #0090d4);
55
57
 
56
- /* color solid info (semantic blue) */
57
- --starasia-ui-solid-background-info: rgba(25, 118, 210, 1);
58
- --starasia-ui-solid-color-info: rgba(227, 242, 253, 1);
59
- --starasia-ui-solid-border-info: rgba(25, 118, 210, 1);
58
+ /* outline warning */
59
+ --sa-toast-outline-bg-warning: var(--sa-background-warning-subtlest, #fef2e6);
60
+ --sa-toast-outline-text-warning: var(--sa-text-primary, #292a2e);
61
+ --sa-toast-outline-border-warning: var(--sa-color-warning-200, #f4c583);
62
+ --sa-toast-outline-progress-warning: var(--sa-color-warning-400, #ed9f30);
60
63
 
61
- /* color outline warning */
62
- --starasia-ui-outline-background-warning: rgba(253, 243, 228, 1);
63
- --starasia-ui-outline-color-warning: rgba(24, 26, 25, 1);
64
- --starasia-ui-outline-border-warning: rgba(244, 197, 131, 1);
65
- --starasia-ui-outline-progress-warning: rgba(237, 159, 48, 1);
64
+ /* solid warning */
65
+ --sa-toast-solid-bg-warning: var(--sa-color-warning-400, #ed9f30);
66
+ --sa-toast-solid-text-warning: var(--sa-background-primary, #ffffff);
67
+ --sa-toast-solid-border-warning: var(--sa-color-warning-400, #ed9f30);
66
68
 
67
- /* color solid warning */
68
- --starasia-ui-solid-background-warning: rgba(237, 159, 48, 1);
69
- --starasia-ui-solid-color-warning: var(--starasia-ui-toast-color-white);
70
- --starasia-ui-solid-border-warning: rgba(237, 159, 48, 1);
71
-
72
- /* height */
73
- --starasia-ui-h-0-5: 0.125rem; /* 2px */
69
+ --sa-toast-h-progress: 0.125rem;
74
70
  }
75
71
  /* styling for container */
76
- .starasia-toast-container {
72
+ .sa-toast-container {
77
73
  display: flex;
78
74
  flex-direction: column;
79
- gap: var(--starasia-ui-spacing-xs, 4px);
80
- padding: var(--starasia-ui-spacing-sm, 8px);
75
+ gap: var(--sa-spacing-xs, 4px);
76
+ padding: var(--sa-spacing-sm, 8px);
81
77
  position: fixed;
82
78
  max-height: 100vh;
83
79
  overflow: auto;
84
80
  z-index: 99999;
85
81
  }
86
- .starasia-toast-container-bottom-right {
82
+ .sa-toast-container-bottom-right {
87
83
  bottom: 0;
88
84
  right: 0;
89
85
  }
90
- .starasia-toast-container-bottom-left {
86
+ .sa-toast-container-bottom-left {
91
87
  bottom: 0;
92
88
  left: 0;
93
89
  }
94
- .starasia-toast-container-bottom-center {
90
+ .sa-toast-container-bottom-center {
95
91
  bottom: 0;
96
92
  left: 50%;
97
93
  transform: translateX(-50%);
98
94
  }
99
- .starasia-toast-container-top-right {
95
+ .sa-toast-container-top-right {
100
96
  top: 0;
101
97
  right: 0;
102
98
  }
103
- .starasia-toast-container-top-left {
99
+ .sa-toast-container-top-left {
104
100
  top: 0;
105
101
  left: 0;
106
102
  }
107
- .starasia-toast-container-top-center {
103
+ .sa-toast-container-top-center {
108
104
  top: 0;
109
105
  left: 50%;
110
106
  transform: translateX(-50%);
111
107
  }
112
108
  /* styling for */
113
- .starasia-toast-item-container {
114
- padding: var(--starasia-ui-spacing-lg, 16px);
109
+ .sa-toast-item-container {
110
+ padding: var(--sa-spacing-lg, 16px);
115
111
  width: max-content;
116
- border-radius: var(--starasia-ui-radii-md, 6px);
112
+ border-radius: var(--sa-radii-md, 6px);
117
113
  display: flex;
118
114
  align-items: center;
119
- gap: var(--starasia-ui-spacing-sm, 8px);
120
- border: var(--starasia-ui-border, 1px) solid transparent;
121
- font-size: var(--starasia-ui-fontSizes-md, 14px);
115
+ gap: var(--sa-spacing-sm, 8px);
116
+ border: var(--sa-border, 1px) solid transparent;
117
+ font-size: var(--sa-font-size-md, 14px);
122
118
  position: relative;
123
119
  overflow: hidden;
124
120
  width: 100%;
125
121
  }
126
122
  /* DEFAULT TOAST */
127
- .starasia-toast-item-container-solid-default {
128
- background-color: var(--starasia-ui-solid-background-default);
129
- color: var(--starasia-ui-solid-color-default);
130
- border-color: var(--starasia-ui-solid-border-default);
123
+ .sa-toast-item-container-solid-default {
124
+ background-color: var(--sa-toast-solid-bg-default);
125
+ color: var(--sa-toast-solid-text-default);
126
+ border-color: var(--sa-toast-solid-border-default);
131
127
  }
132
128
 
133
- .starasia-toast-item-container-outline-default {
134
- background-color: var(--starasia-ui-outline-background-default);
135
- color: var(--starasia-ui-outline-color-default);
136
- border-color: var(--starasia-ui-outline-border-default);
129
+ .sa-toast-item-container-outline-default {
130
+ background-color: var(--sa-toast-outline-bg-default);
131
+ color: var(--sa-toast-outline-text-default);
132
+ border-color: var(--sa-toast-outline-border-default);
137
133
  }
138
134
 
139
135
  /* DEFAULT DANGER */
140
- .starasia-toast-item-container-outline-danger {
141
- background-color: var(--starasia-ui-outline-background-danger);
142
- color: var(--starasia-ui-outline-color-danger);
143
- border-color: var(--starasia-ui-outline-border-danger);
136
+ .sa-toast-item-container-outline-danger {
137
+ background-color: var(--sa-toast-outline-bg-danger);
138
+ color: var(--sa-toast-outline-text-danger);
139
+ border-color: var(--sa-toast-outline-border-danger);
144
140
  }
145
141
 
146
- .starasia-toast-item-container-solid-danger {
147
- background-color: var(--starasia-ui-solid-background-danger);
148
- color: var(--starasia-ui-solid-color-danger);
149
- border-color: var(--starasia-ui-solid-border-danger);
142
+ .sa-toast-item-container-solid-danger {
143
+ background-color: var(--sa-toast-solid-bg-danger);
144
+ color: var(--sa-toast-solid-text-danger);
145
+ border-color: var(--sa-toast-solid-border-danger);
150
146
  }
151
147
 
152
148
  /* DEFAULT SUCCESS */
153
- .starasia-toast-item-container-outline-success {
154
- background-color: var(--starasia-ui-outline-background-success);
155
- color: var(--starasia-ui-outline-color-success);
156
- border-color: var(--starasia-ui-outline-border-success);
149
+ .sa-toast-item-container-outline-success {
150
+ background-color: var(--sa-toast-outline-bg-success);
151
+ color: var(--sa-toast-outline-text-success);
152
+ border-color: var(--sa-toast-outline-border-success);
157
153
  }
158
154
 
159
- .starasia-toast-item-container-solid-success {
160
- background-color: var(--starasia-ui-solid-background-success);
161
- color: var(--starasia-ui-solid-color-success);
162
- border-color: var(--starasia-ui-solid-border-success);
155
+ .sa-toast-item-container-solid-success {
156
+ background-color: var(--sa-toast-solid-bg-success);
157
+ color: var(--sa-toast-solid-text-success);
158
+ border-color: var(--sa-toast-solid-border-success);
163
159
  }
164
160
 
165
161
  /* DEFAULT INFO */
166
- .starasia-toast-item-container-outline-info {
167
- background-color: var(--starasia-ui-outline-background-info);
168
- color: var(--starasia-ui-outline-color-info);
169
- border-color: var(--starasia-ui-outline-border-info);
162
+ .sa-toast-item-container-outline-info {
163
+ background-color: var(--sa-toast-outline-bg-info);
164
+ color: var(--sa-toast-outline-text-info);
165
+ border-color: var(--sa-toast-outline-border-info);
170
166
  }
171
167
 
172
- .starasia-toast-item-container-solid-info {
173
- background-color: var(--starasia-ui-solid-background-info);
174
- color: var(--starasia-ui-solid-color-info);
175
- border-color: var(--starasia-ui-solid-border-info);
168
+ .sa-toast-item-container-solid-info {
169
+ background-color: var(--sa-toast-solid-bg-info);
170
+ color: var(--sa-toast-solid-text-info);
171
+ border-color: var(--sa-toast-solid-border-info);
176
172
  }
177
173
  /* DEFAULT WARNING */
178
- .starasia-toast-item-container-outline-warning {
179
- background-color: var(--starasia-ui-outline-background-warning);
180
- color: var(--starasia-ui-outline-color-warning);
181
- border-color: var(--starasia-ui-outline-border-warning);
174
+ .sa-toast-item-container-outline-warning {
175
+ background-color: var(--sa-toast-outline-bg-warning);
176
+ color: var(--sa-toast-outline-text-warning);
177
+ border-color: var(--sa-toast-outline-border-warning);
182
178
  }
183
179
 
184
- .starasia-toast-item-container-solid-warning {
185
- background-color: var(--starasia-ui-solid-background-warning);
186
- color: var(--starasia-ui-solid-color-warning);
187
- border-color: var(--starasia-ui-solid-border-warning);
180
+ .sa-toast-item-container-solid-warning {
181
+ background-color: var(--sa-toast-solid-bg-warning);
182
+ color: var(--sa-toast-solid-text-warning);
183
+ border-color: var(--sa-toast-solid-border-warning);
188
184
  }
189
185
 
190
186
  /* PROGRESS BAR */
191
- .starasia-toast-item-progress {
192
- height: var(--starasia-ui-h-0-5);
187
+ .sa-toast-item-progress {
188
+ height: var(--sa-toast-h-progress);
193
189
  width: 100%;
194
190
  position: absolute;
195
191
  bottom: 0;
@@ -198,39 +194,39 @@ const L = `@import url("https://fonts.googleapis.com/css2?family=Poppins&display
198
194
  animation: progressBarr 5s linear forwards;
199
195
  }
200
196
 
201
- .starasia-toast-item-progress-outline-default {
202
- background-color: var(--starasia-ui-outline-progress-default);
197
+ .sa-toast-item-progress-outline-default {
198
+ background-color: var(--sa-toast-outline-progress-default);
203
199
  }
204
- .starasia-toast-item-progress-outline-info {
205
- background-color: var(--starasia-ui-outline-progress-info);
200
+ .sa-toast-item-progress-outline-info {
201
+ background-color: var(--sa-toast-outline-progress-info);
206
202
  }
207
- .starasia-toast-item-progress-outline-success {
208
- background-color: var(--starasia-ui-outline-progress-success);
203
+ .sa-toast-item-progress-outline-success {
204
+ background-color: var(--sa-toast-outline-progress-success);
209
205
  }
210
- .starasia-toast-item-progress-outline-danger {
211
- background-color: var(--starasia-ui-outline-progress-danger);
206
+ .sa-toast-item-progress-outline-danger {
207
+ background-color: var(--sa-toast-outline-progress-danger);
212
208
  }
213
- .starasia-toast-item-progress-outline-warning {
214
- background-color: var(--starasia-ui-outline-progress-warning);
209
+ .sa-toast-item-progress-outline-warning {
210
+ background-color: var(--sa-toast-outline-progress-warning);
215
211
  }
216
212
 
217
213
  /* animation */
218
- .starasia-toast-item-container-animation-bottom-right {
214
+ .sa-toast-item-container-animation-bottom-right {
219
215
  animation: bottomRight 0.375s;
220
216
  }
221
- .starasia-toast-item-container-animation-bottom-left {
217
+ .sa-toast-item-container-animation-bottom-left {
222
218
  animation: bottomLeft 0.375s;
223
219
  }
224
- .starasia-toast-item-container-animation-bottom-center {
220
+ .sa-toast-item-container-animation-bottom-center {
225
221
  animation: bottomCenter 0.375s;
226
222
  }
227
- .starasia-toast-item-container-animation-top-left {
223
+ .sa-toast-item-container-animation-top-left {
228
224
  animation: topLeft 0.375s;
229
225
  }
230
- .starasia-toast-item-container-animation-top-right {
226
+ .sa-toast-item-container-animation-top-right {
231
227
  animation: topRight 0.375s;
232
228
  }
233
- .starasia-toast-item-container-animation-top-center {
229
+ .sa-toast-item-container-animation-top-center {
234
230
  animation: topCenter 0.375s;
235
231
  }
236
232
 
@@ -306,120 +302,124 @@ const L = `@import url("https://fonts.googleapis.com/css2?family=Poppins&display
306
302
  let E = 1;
307
303
  class T {
308
304
  constructor() {
309
- this.subscribe = (a) => (this.subscribers.push(a), () => {
310
- const s = this.subscribers.indexOf(a);
311
- this.subscribers.splice(s, 1);
312
- }), this.publish = (a) => {
313
- this.subscribers.forEach((s) => s(a));
314
- }, this.addToast = (a) => {
315
- this.publish(a), this.toasts = [...this.toasts, a];
316
- }, this.create = (a) => {
317
- const { message: s, type: i } = a, r = E++;
318
- return this.addToast({ title: s, type: i, id: r }), r;
319
- }, this.dismiss = (a) => (this.subscribers.forEach((s) => s({ id: a, dismiss: !0 })), a), this.danger = (a) => this.create({ message: a, type: "danger" }), this.warning = (a) => this.create({ message: a, type: "warning" }), this.success = (a) => this.create({ type: "success", message: a }), this.info = (a) => this.create({ type: "info", message: a }), this.default = (a) => this.create({ type: "default", message: a }), this.subscribers = [], this.toasts = [];
305
+ this.subscribe = (t) => (this.subscribers.push(t), () => {
306
+ const a = this.subscribers.indexOf(t);
307
+ this.subscribers.splice(a, 1);
308
+ }), this.publish = (t) => {
309
+ this.subscribers.forEach((a) => a(t));
310
+ }, this.addToast = (t) => {
311
+ this.publish(t), this.toasts = [...this.toasts, t];
312
+ }, this.create = (t) => {
313
+ const { message: a, type: e } = t, o = E++;
314
+ return this.addToast({ title: a, type: e, id: o }), o;
315
+ }, this.dismiss = (t) => (this.subscribers.forEach((a) => a({ id: t, dismiss: !0 })), t), this.danger = (t) => this.create({ message: t, type: "danger" }), this.warning = (t) => this.create({ message: t, type: "warning" }), this.success = (t) => this.create({ type: "success", message: t }), this.info = (t) => this.create({ type: "info", message: t }), this.default = (t) => this.create({ type: "default", message: t }), this.subscribers = [], this.toasts = [];
320
316
  }
321
317
  }
322
- const o = new T(), D = Object.assign({
323
- success: o.success,
324
- info: o.info,
325
- default: o.default,
326
- danger: o.danger,
327
- warning: o.warning
328
- }), v = "starasia-toast-styles", S = (n) => {
329
- if (!document.getElementById(v)) {
330
- const a = document.createElement("style");
331
- a.id = v, a.textContent = n, document.head.appendChild(a);
318
+ const r = new T(), D = Object.assign({
319
+ success: r.success,
320
+ info: r.info,
321
+ default: r.default,
322
+ danger: r.danger,
323
+ warning: r.warning
324
+ }), h = "sa-toast-styles", S = (n) => {
325
+ if (!document.getElementById(h)) {
326
+ const t = document.createElement("style");
327
+ t.id = h, t.textContent = n, document.head.appendChild(t);
332
328
  }
333
329
  };
334
330
  S(L);
335
331
  const N = ({
336
332
  type: n = "outline",
337
- direction: a = "bottom-right"
333
+ direction: t = "bottom-right"
338
334
  }) => {
339
- const [s, i] = f.useState([]);
340
- return f.useEffect(() => o.subscribe((r) => {
341
- if (r.dismiss) {
342
- i((e) => e.filter((c) => c.id !== r.id));
335
+ const [a, e] = b.useState([]);
336
+ return b.useEffect(() => r.subscribe((o) => {
337
+ if (o.dismiss) {
338
+ e((i) => i.filter((d) => d.id !== o.id));
343
339
  return;
344
340
  }
345
341
  setTimeout(() => {
346
342
  C.flushSync(() => {
347
- i((e) => [r, ...e]);
343
+ e((i) => [o, ...i]);
348
344
  });
349
345
  });
350
- }), []), /* @__PURE__ */ t(
346
+ }), []), /* @__PURE__ */ s(
351
347
  "div",
352
348
  {
353
- className: `starasia-toast-container starasia-toast-container-${a}`,
354
- children: s.map((r) => /* @__PURE__ */ t(
349
+ className: `sa-toast-container sa-toast-container-${t}`,
350
+ children: a.map((o) => /* @__PURE__ */ s(
355
351
  R,
356
352
  {
357
- data: r,
353
+ data: o,
358
354
  type: n,
359
- direction: a
355
+ direction: t
360
356
  },
361
- r.id
357
+ o.id
362
358
  ))
363
359
  }
364
360
  );
365
- }, R = ({ data: n, type: a = "solid", direction: s }) => {
366
- const [i, r] = p(null), [e, c] = p(!1), l = x(null), g = () => {
367
- const u = setTimeout(() => {
368
- m();
361
+ }, R = ({ data: n, type: t = "solid", direction: a = "bottom-right" }) => {
362
+ const [e, o] = p(null), [i, d] = p(!1), l = k(null), f = () => {
363
+ const c = setTimeout(() => {
364
+ g();
369
365
  }, 5e3);
370
- r(u);
371
- }, d = () => {
372
- i && (clearTimeout(i), r(null));
373
- }, m = () => {
374
- o.dismiss(n.id);
366
+ o(c);
367
+ }, u = () => {
368
+ e && (clearTimeout(e), o(null));
369
+ }, g = () => {
370
+ r.dismiss(n.id);
375
371
  };
376
- h(() => (e ? d() : g(), () => {
377
- d();
378
- }), [e]), h(() => {
379
- const u = l.current, b = () => {
380
- m();
372
+ v(() => (i ? u() : f(), () => {
373
+ u();
374
+ }), [i]), v(() => {
375
+ const c = l.current, m = () => {
376
+ g();
381
377
  };
382
- return u && u.addEventListener("animationend", b), () => {
383
- u && u.removeEventListener("animationend", b);
378
+ return c && c.addEventListener("animationend", m), () => {
379
+ c && c.removeEventListener("animationend", m);
384
380
  };
385
381
  }, []);
386
382
  const y = () => {
387
- c(!0), d(), l.current && (l.current.style.animationPlayState = "paused");
383
+ d(!0), u(), l.current && (l.current.style.animationPlayState = "paused");
388
384
  }, w = () => {
389
- c(!1), g(), l.current && (l.current.style.animationPlayState = "running");
385
+ d(!1), f(), l.current && (l.current.style.animationPlayState = "running");
390
386
  };
391
- return /* @__PURE__ */ k(
387
+ return /* @__PURE__ */ x(
392
388
  "div",
393
389
  {
394
- className: `starasia-toast-item-container starasia-toast-item-container-${a}-${n.type} starasia-toast-item-container-animation-${s}`,
390
+ className: [
391
+ "sa-toast-item-container",
392
+ (n == null ? void 0 : n.type) && `sa-toast-item-container-${t}-${n.type}`,
393
+ `sa-toast-item-container-animation-${a}`
394
+ ].filter(Boolean).join(" "),
395
395
  onMouseEnter: y,
396
396
  onMouseLeave: w,
397
397
  children: [
398
- /* @__PURE__ */ t("div", { style: { display: "flex" }, children: n.type === "success" ? /* @__PURE__ */ t(M, { style: { color: "inherit" } }) : /* @__PURE__ */ t(I, { style: { color: "inherit" } }) }),
399
- /* @__PURE__ */ t("div", { style: { flex: 1 }, children: n.title }),
400
- /* @__PURE__ */ t(
398
+ /* @__PURE__ */ s("div", { style: { display: "flex" }, children: n.type === "success" ? /* @__PURE__ */ s(M, { style: { color: "inherit" } }) : /* @__PURE__ */ s(I, { style: { color: "inherit" } }) }),
399
+ /* @__PURE__ */ s("div", { style: { flex: 1 }, children: n.title }),
400
+ /* @__PURE__ */ s(
401
401
  "div",
402
402
  {
403
403
  style: { display: "flex", cursor: "pointer" },
404
- onClick: () => o.dismiss(n.id),
405
- children: /* @__PURE__ */ t(A, { style: { color: "inherit" } })
404
+ onClick: () => r.dismiss(n.id),
405
+ children: /* @__PURE__ */ s(B, { style: { color: "inherit" } })
406
406
  }
407
407
  ),
408
- a === "outline" ? /* @__PURE__ */ t(
408
+ t === "outline" ? /* @__PURE__ */ s(
409
409
  "div",
410
410
  {
411
411
  ref: l,
412
- className: `starasia-toast-item-progress starasia-toast-item-progress-outline-${n.type}`,
412
+ className: `sa-toast-item-progress sa-toast-item-progress-outline-${n.type}`,
413
413
  style: {
414
414
  animation: "progressBarr 5s linear forwards",
415
- animationPlayState: e ? "paused" : "running"
415
+ animationPlayState: i ? "paused" : "running"
416
416
  }
417
417
  }
418
418
  ) : null
419
419
  ]
420
420
  }
421
421
  );
422
- }, I = (n) => /* @__PURE__ */ t(
422
+ }, I = (n) => /* @__PURE__ */ s(
423
423
  "svg",
424
424
  {
425
425
  xmlns: "http://www.w3.org/2000/svg",
@@ -428,7 +428,7 @@ const N = ({
428
428
  viewBox: "0 0 24 24",
429
429
  fill: "none",
430
430
  ...n,
431
- children: /* @__PURE__ */ t(
431
+ children: /* @__PURE__ */ s(
432
432
  "path",
433
433
  {
434
434
  d: "M12 7.01001V7.00002M12 17L12 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",
@@ -440,7 +440,7 @@ const N = ({
440
440
  }
441
441
  )
442
442
  }
443
- ), M = (n) => /* @__PURE__ */ t(
443
+ ), M = (n) => /* @__PURE__ */ s(
444
444
  "svg",
445
445
  {
446
446
  width: "20",
@@ -449,7 +449,7 @@ const N = ({
449
449
  fill: "none",
450
450
  xmlns: "http://www.w3.org/2000/svg",
451
451
  ...n,
452
- children: /* @__PURE__ */ t("g", { id: "Curved/Basic-actions-and-state", children: /* @__PURE__ */ t(
452
+ children: /* @__PURE__ */ s("g", { id: "Curved/Basic-actions-and-state", children: /* @__PURE__ */ s(
453
453
  "path",
454
454
  {
455
455
  id: "shape",
@@ -461,7 +461,7 @@ const N = ({
461
461
  }
462
462
  ) })
463
463
  }
464
- ), A = (n) => /* @__PURE__ */ t(
464
+ ), B = (n) => /* @__PURE__ */ s(
465
465
  "svg",
466
466
  {
467
467
  xmlns: "http://www.w3.org/2000/svg",
@@ -470,7 +470,7 @@ const N = ({
470
470
  viewBox: "0 0 24 24",
471
471
  fill: "none",
472
472
  ...n,
473
- children: /* @__PURE__ */ t(
473
+ children: /* @__PURE__ */ s(
474
474
  "path",
475
475
  {
476
476
  d: "M19 5L5 19M5.00003 5L19 19",
package/dist/toast.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","react-dom"],n):(o=typeof globalThis<"u"?globalThis:o||self,n(o.Toast={},o.jsxRuntime,o.React,o.ReactDOM))})(this,function(o,n,e,v){"use strict";const y=`@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
1
+ (function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","react-dom"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r.Toast={},r.jsxRuntime,r.React,r.ReactDOM))})(this,function(r,n,i,h){"use strict";const y=`@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
2
2
 
3
3
  * {
4
4
  margin: 0;
@@ -8,185 +8,181 @@
8
8
  }
9
9
 
10
10
  :root {
11
- /* white */
12
- --starasia-ui-toast-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
11
+ /* solid default (dark bg) */
12
+ --sa-toast-solid-bg-default: var(--sa-text-bolder, #1e1f21);
13
+ --sa-toast-solid-text-default: var(--sa-text-primary-inverse, #ffffff);
14
+ --sa-toast-solid-border-default: var(--sa-border-subtle, #0b120e24);
13
15
 
14
- /* color solid default */
15
- --starasia-ui-solid-background-default: rgba(17, 24, 39, 1);
16
- --starasia-ui-solid-color-default: rgba(255, 255, 255, 1);
17
- --starasia-ui-solid-border-default: rgba(229, 231, 235, 1);
16
+ /* outline default */
17
+ --sa-toast-outline-bg-default: var(--sa-background-primary, #ffffff);
18
+ --sa-toast-outline-text-default: var(--sa-text-primary, #292a2e);
19
+ --sa-toast-outline-border-default: var(--sa-border-subtle, #0b120e24);
20
+ --sa-toast-outline-progress-default: var(--sa-text-bolder, #1e1f21);
18
21
 
19
- /* color outline default */
20
- --starasia-ui-outline-background-default: rgba(249, 250, 251, 1);
21
- --starasia-ui-outline-color-default: rgba(17, 24, 39, 1);
22
- --starasia-ui-outline-border-default: rgba(229, 231, 235, 1);
23
- --starasia-ui-outline-progress-default: rgba(24, 26, 25, 1);
22
+ /* outline danger */
23
+ --sa-toast-outline-bg-danger: var(--sa-background-error-subtlest, #fff0f3);
24
+ --sa-toast-outline-text-danger: var(--sa-background-error, #c9184a);
25
+ --sa-toast-outline-border-danger: var(--sa-color-error-100, #ffccd5);
26
+ --sa-toast-outline-progress-danger: var(--sa-background-error, #c9184a);
24
27
 
25
- /* color outline red */
26
- --starasia-ui-outline-background-danger: rgba(254, 242, 242, 1);
27
- --starasia-ui-outline-color-danger: rgba(220, 38, 38, 1);
28
- --starasia-ui-outline-border-danger: rgba(254, 202, 202, 1);
29
- --starasia-ui-outline-progress-danger: rgba(201, 24, 74, 1);
28
+ /* solid danger */
29
+ --sa-toast-solid-bg-danger: var(--sa-background-error, #c9184a);
30
+ --sa-toast-solid-text-danger: var(--sa-color-error-50, #fff0f3);
31
+ --sa-toast-solid-border-danger: var(--sa-background-error, #c9184a);
30
32
 
31
- /* color solid red */
32
- --starasia-ui-solid-background-danger: rgba(201, 24, 74, 1);
33
- --starasia-ui-solid-color-danger: rgba(255, 240, 243, 1);
34
- --starasia-ui-solid-border-danger: rgba(201, 24, 74, 1);
33
+ /* outline success */
34
+ --sa-toast-outline-bg-success: var(--sa-background-success-subtlest, #ecfff6);
35
+ --sa-toast-outline-text-success: var(--sa-background-success, #28ac6e);
36
+ --sa-toast-outline-border-success: var(--sa-color-success-200, #97e6c1);
37
+ --sa-toast-outline-progress-success: var(--sa-background-success, #28ac6e);
35
38
 
36
- /* color outline success */
37
- --starasia-ui-outline-background-success: rgba(220, 246, 234, 1);
38
- --starasia-ui-outline-color-success: rgba(40, 172, 110, 1);
39
- --starasia-ui-outline-border-success: rgba(151, 230, 193, 1);
40
- --starasia-ui-outline-progress-success: rgba(40, 172, 110, 1);
39
+ /* solid success */
40
+ --sa-toast-solid-bg-success: var(--sa-background-success, #28ac6e);
41
+ --sa-toast-solid-text-success: var(--sa-color-success-50, #ecfff6);
42
+ --sa-toast-solid-border-success: var(--sa-background-success, #28ac6e);
41
43
 
42
- /* color solid success */
43
- --starasia-ui-solid-background-success: rgba(40, 172, 110, 1);
44
- --starasia-ui-solid-color-success: rgba(220, 246, 234, 1);
45
- --starasia-ui-solid-border-success: rgba(40, 172, 110, 1);
44
+ /* outline info */
45
+ --sa-toast-outline-bg-info: var(--sa-background-info-subtlest, #effaff);
46
+ --sa-toast-outline-text-info: var(--sa-background-info, #0090d4);
47
+ --sa-toast-outline-border-info: var(--sa-color-info-200, #b6eaff);
48
+ --sa-toast-outline-progress-info: var(--sa-background-info, #0090d4);
46
49
 
47
- /* color outline info (semantic blue) */
48
- --starasia-ui-outline-background-info: rgba(227, 242, 253, 1);
49
- --starasia-ui-outline-color-info: rgba(25, 118, 210, 1);
50
- --starasia-ui-outline-border-info: rgba(100, 181, 246, 1);
51
- --starasia-ui-outline-progress-info: rgba(25, 118, 210, 1);
50
+ /* solid info */
51
+ --sa-toast-solid-bg-info: var(--sa-background-info, #0090d4);
52
+ --sa-toast-solid-text-info: var(--sa-color-info-50, #effaff);
53
+ --sa-toast-solid-border-info: var(--sa-background-info, #0090d4);
52
54
 
53
- /* color solid info (semantic blue) */
54
- --starasia-ui-solid-background-info: rgba(25, 118, 210, 1);
55
- --starasia-ui-solid-color-info: rgba(227, 242, 253, 1);
56
- --starasia-ui-solid-border-info: rgba(25, 118, 210, 1);
55
+ /* outline warning */
56
+ --sa-toast-outline-bg-warning: var(--sa-background-warning-subtlest, #fef2e6);
57
+ --sa-toast-outline-text-warning: var(--sa-text-primary, #292a2e);
58
+ --sa-toast-outline-border-warning: var(--sa-color-warning-200, #f4c583);
59
+ --sa-toast-outline-progress-warning: var(--sa-color-warning-400, #ed9f30);
57
60
 
58
- /* color outline warning */
59
- --starasia-ui-outline-background-warning: rgba(253, 243, 228, 1);
60
- --starasia-ui-outline-color-warning: rgba(24, 26, 25, 1);
61
- --starasia-ui-outline-border-warning: rgba(244, 197, 131, 1);
62
- --starasia-ui-outline-progress-warning: rgba(237, 159, 48, 1);
61
+ /* solid warning */
62
+ --sa-toast-solid-bg-warning: var(--sa-color-warning-400, #ed9f30);
63
+ --sa-toast-solid-text-warning: var(--sa-background-primary, #ffffff);
64
+ --sa-toast-solid-border-warning: var(--sa-color-warning-400, #ed9f30);
63
65
 
64
- /* color solid warning */
65
- --starasia-ui-solid-background-warning: rgba(237, 159, 48, 1);
66
- --starasia-ui-solid-color-warning: var(--starasia-ui-toast-color-white);
67
- --starasia-ui-solid-border-warning: rgba(237, 159, 48, 1);
68
-
69
- /* height */
70
- --starasia-ui-h-0-5: 0.125rem; /* 2px */
66
+ --sa-toast-h-progress: 0.125rem;
71
67
  }
72
68
  /* styling for container */
73
- .starasia-toast-container {
69
+ .sa-toast-container {
74
70
  display: flex;
75
71
  flex-direction: column;
76
- gap: var(--starasia-ui-spacing-xs, 4px);
77
- padding: var(--starasia-ui-spacing-sm, 8px);
72
+ gap: var(--sa-spacing-xs, 4px);
73
+ padding: var(--sa-spacing-sm, 8px);
78
74
  position: fixed;
79
75
  max-height: 100vh;
80
76
  overflow: auto;
81
77
  z-index: 99999;
82
78
  }
83
- .starasia-toast-container-bottom-right {
79
+ .sa-toast-container-bottom-right {
84
80
  bottom: 0;
85
81
  right: 0;
86
82
  }
87
- .starasia-toast-container-bottom-left {
83
+ .sa-toast-container-bottom-left {
88
84
  bottom: 0;
89
85
  left: 0;
90
86
  }
91
- .starasia-toast-container-bottom-center {
87
+ .sa-toast-container-bottom-center {
92
88
  bottom: 0;
93
89
  left: 50%;
94
90
  transform: translateX(-50%);
95
91
  }
96
- .starasia-toast-container-top-right {
92
+ .sa-toast-container-top-right {
97
93
  top: 0;
98
94
  right: 0;
99
95
  }
100
- .starasia-toast-container-top-left {
96
+ .sa-toast-container-top-left {
101
97
  top: 0;
102
98
  left: 0;
103
99
  }
104
- .starasia-toast-container-top-center {
100
+ .sa-toast-container-top-center {
105
101
  top: 0;
106
102
  left: 50%;
107
103
  transform: translateX(-50%);
108
104
  }
109
105
  /* styling for */
110
- .starasia-toast-item-container {
111
- padding: var(--starasia-ui-spacing-lg, 16px);
106
+ .sa-toast-item-container {
107
+ padding: var(--sa-spacing-lg, 16px);
112
108
  width: max-content;
113
- border-radius: var(--starasia-ui-radii-md, 6px);
109
+ border-radius: var(--sa-radii-md, 6px);
114
110
  display: flex;
115
111
  align-items: center;
116
- gap: var(--starasia-ui-spacing-sm, 8px);
117
- border: var(--starasia-ui-border, 1px) solid transparent;
118
- font-size: var(--starasia-ui-fontSizes-md, 14px);
112
+ gap: var(--sa-spacing-sm, 8px);
113
+ border: var(--sa-border, 1px) solid transparent;
114
+ font-size: var(--sa-font-size-md, 14px);
119
115
  position: relative;
120
116
  overflow: hidden;
121
117
  width: 100%;
122
118
  }
123
119
  /* DEFAULT TOAST */
124
- .starasia-toast-item-container-solid-default {
125
- background-color: var(--starasia-ui-solid-background-default);
126
- color: var(--starasia-ui-solid-color-default);
127
- border-color: var(--starasia-ui-solid-border-default);
120
+ .sa-toast-item-container-solid-default {
121
+ background-color: var(--sa-toast-solid-bg-default);
122
+ color: var(--sa-toast-solid-text-default);
123
+ border-color: var(--sa-toast-solid-border-default);
128
124
  }
129
125
 
130
- .starasia-toast-item-container-outline-default {
131
- background-color: var(--starasia-ui-outline-background-default);
132
- color: var(--starasia-ui-outline-color-default);
133
- border-color: var(--starasia-ui-outline-border-default);
126
+ .sa-toast-item-container-outline-default {
127
+ background-color: var(--sa-toast-outline-bg-default);
128
+ color: var(--sa-toast-outline-text-default);
129
+ border-color: var(--sa-toast-outline-border-default);
134
130
  }
135
131
 
136
132
  /* DEFAULT DANGER */
137
- .starasia-toast-item-container-outline-danger {
138
- background-color: var(--starasia-ui-outline-background-danger);
139
- color: var(--starasia-ui-outline-color-danger);
140
- border-color: var(--starasia-ui-outline-border-danger);
133
+ .sa-toast-item-container-outline-danger {
134
+ background-color: var(--sa-toast-outline-bg-danger);
135
+ color: var(--sa-toast-outline-text-danger);
136
+ border-color: var(--sa-toast-outline-border-danger);
141
137
  }
142
138
 
143
- .starasia-toast-item-container-solid-danger {
144
- background-color: var(--starasia-ui-solid-background-danger);
145
- color: var(--starasia-ui-solid-color-danger);
146
- border-color: var(--starasia-ui-solid-border-danger);
139
+ .sa-toast-item-container-solid-danger {
140
+ background-color: var(--sa-toast-solid-bg-danger);
141
+ color: var(--sa-toast-solid-text-danger);
142
+ border-color: var(--sa-toast-solid-border-danger);
147
143
  }
148
144
 
149
145
  /* DEFAULT SUCCESS */
150
- .starasia-toast-item-container-outline-success {
151
- background-color: var(--starasia-ui-outline-background-success);
152
- color: var(--starasia-ui-outline-color-success);
153
- border-color: var(--starasia-ui-outline-border-success);
146
+ .sa-toast-item-container-outline-success {
147
+ background-color: var(--sa-toast-outline-bg-success);
148
+ color: var(--sa-toast-outline-text-success);
149
+ border-color: var(--sa-toast-outline-border-success);
154
150
  }
155
151
 
156
- .starasia-toast-item-container-solid-success {
157
- background-color: var(--starasia-ui-solid-background-success);
158
- color: var(--starasia-ui-solid-color-success);
159
- border-color: var(--starasia-ui-solid-border-success);
152
+ .sa-toast-item-container-solid-success {
153
+ background-color: var(--sa-toast-solid-bg-success);
154
+ color: var(--sa-toast-solid-text-success);
155
+ border-color: var(--sa-toast-solid-border-success);
160
156
  }
161
157
 
162
158
  /* DEFAULT INFO */
163
- .starasia-toast-item-container-outline-info {
164
- background-color: var(--starasia-ui-outline-background-info);
165
- color: var(--starasia-ui-outline-color-info);
166
- border-color: var(--starasia-ui-outline-border-info);
159
+ .sa-toast-item-container-outline-info {
160
+ background-color: var(--sa-toast-outline-bg-info);
161
+ color: var(--sa-toast-outline-text-info);
162
+ border-color: var(--sa-toast-outline-border-info);
167
163
  }
168
164
 
169
- .starasia-toast-item-container-solid-info {
170
- background-color: var(--starasia-ui-solid-background-info);
171
- color: var(--starasia-ui-solid-color-info);
172
- border-color: var(--starasia-ui-solid-border-info);
165
+ .sa-toast-item-container-solid-info {
166
+ background-color: var(--sa-toast-solid-bg-info);
167
+ color: var(--sa-toast-solid-text-info);
168
+ border-color: var(--sa-toast-solid-border-info);
173
169
  }
174
170
  /* DEFAULT WARNING */
175
- .starasia-toast-item-container-outline-warning {
176
- background-color: var(--starasia-ui-outline-background-warning);
177
- color: var(--starasia-ui-outline-color-warning);
178
- border-color: var(--starasia-ui-outline-border-warning);
171
+ .sa-toast-item-container-outline-warning {
172
+ background-color: var(--sa-toast-outline-bg-warning);
173
+ color: var(--sa-toast-outline-text-warning);
174
+ border-color: var(--sa-toast-outline-border-warning);
179
175
  }
180
176
 
181
- .starasia-toast-item-container-solid-warning {
182
- background-color: var(--starasia-ui-solid-background-warning);
183
- color: var(--starasia-ui-solid-color-warning);
184
- border-color: var(--starasia-ui-solid-border-warning);
177
+ .sa-toast-item-container-solid-warning {
178
+ background-color: var(--sa-toast-solid-bg-warning);
179
+ color: var(--sa-toast-solid-text-warning);
180
+ border-color: var(--sa-toast-solid-border-warning);
185
181
  }
186
182
 
187
183
  /* PROGRESS BAR */
188
- .starasia-toast-item-progress {
189
- height: var(--starasia-ui-h-0-5);
184
+ .sa-toast-item-progress {
185
+ height: var(--sa-toast-h-progress);
190
186
  width: 100%;
191
187
  position: absolute;
192
188
  bottom: 0;
@@ -195,39 +191,39 @@
195
191
  animation: progressBarr 5s linear forwards;
196
192
  }
197
193
 
198
- .starasia-toast-item-progress-outline-default {
199
- background-color: var(--starasia-ui-outline-progress-default);
194
+ .sa-toast-item-progress-outline-default {
195
+ background-color: var(--sa-toast-outline-progress-default);
200
196
  }
201
- .starasia-toast-item-progress-outline-info {
202
- background-color: var(--starasia-ui-outline-progress-info);
197
+ .sa-toast-item-progress-outline-info {
198
+ background-color: var(--sa-toast-outline-progress-info);
203
199
  }
204
- .starasia-toast-item-progress-outline-success {
205
- background-color: var(--starasia-ui-outline-progress-success);
200
+ .sa-toast-item-progress-outline-success {
201
+ background-color: var(--sa-toast-outline-progress-success);
206
202
  }
207
- .starasia-toast-item-progress-outline-danger {
208
- background-color: var(--starasia-ui-outline-progress-danger);
203
+ .sa-toast-item-progress-outline-danger {
204
+ background-color: var(--sa-toast-outline-progress-danger);
209
205
  }
210
- .starasia-toast-item-progress-outline-warning {
211
- background-color: var(--starasia-ui-outline-progress-warning);
206
+ .sa-toast-item-progress-outline-warning {
207
+ background-color: var(--sa-toast-outline-progress-warning);
212
208
  }
213
209
 
214
210
  /* animation */
215
- .starasia-toast-item-container-animation-bottom-right {
211
+ .sa-toast-item-container-animation-bottom-right {
216
212
  animation: bottomRight 0.375s;
217
213
  }
218
- .starasia-toast-item-container-animation-bottom-left {
214
+ .sa-toast-item-container-animation-bottom-left {
219
215
  animation: bottomLeft 0.375s;
220
216
  }
221
- .starasia-toast-item-container-animation-bottom-center {
217
+ .sa-toast-item-container-animation-bottom-center {
222
218
  animation: bottomCenter 0.375s;
223
219
  }
224
- .starasia-toast-item-container-animation-top-left {
220
+ .sa-toast-item-container-animation-top-left {
225
221
  animation: topLeft 0.375s;
226
222
  }
227
- .starasia-toast-item-container-animation-top-right {
223
+ .sa-toast-item-container-animation-top-right {
228
224
  animation: topRight 0.375s;
229
225
  }
230
- .starasia-toast-item-container-animation-top-center {
226
+ .sa-toast-item-container-animation-top-center {
231
227
  animation: topCenter 0.375s;
232
228
  }
233
229
 
@@ -299,4 +295,4 @@
299
295
  width: 0px;
300
296
  }
301
297
  }
302
- `;let w=1;class k{constructor(){this.subscribe=a=>(this.subscribers.push(a),()=>{const s=this.subscribers.indexOf(a);this.subscribers.splice(s,1)}),this.publish=a=>{this.subscribers.forEach(s=>s(a))},this.addToast=a=>{this.publish(a),this.toasts=[...this.toasts,a]},this.create=a=>{const{message:s,type:l}=a,r=w++;return this.addToast({title:s,type:l,id:r}),r},this.dismiss=a=>(this.subscribers.forEach(s=>s({id:a,dismiss:!0})),a),this.danger=a=>this.create({message:a,type:"danger"}),this.warning=a=>this.create({message:a,type:"warning"}),this.success=a=>this.create({type:"success",message:a}),this.info=a=>this.create({type:"info",message:a}),this.default=a=>this.create({type:"default",message:a}),this.subscribers=[],this.toasts=[]}}const i=new k,x=Object.assign({success:i.success,info:i.info,default:i.default,danger:i.danger,warning:i.warning}),b="starasia-toast-styles";(t=>{if(!document.getElementById(b)){const a=document.createElement("style");a.id=b,a.textContent=t,document.head.appendChild(a)}})(y);const C=({type:t="outline",direction:a="bottom-right"})=>{const[s,l]=e.useState([]);return e.useEffect(()=>i.subscribe(r=>{if(r.dismiss){l(u=>u.filter(g=>g.id!==r.id));return}setTimeout(()=>{v.flushSync(()=>{l(u=>[r,...u])})})}),[]),n.jsx("div",{className:`starasia-toast-container starasia-toast-container-${a}`,children:s.map(r=>n.jsx(T,{data:r,type:t,direction:a},r.id))})},T=({data:t,type:a="solid",direction:s})=>{const[l,r]=e.useState(null),[u,g]=e.useState(!1),c=e.useRef(null),m=()=>{const d=setTimeout(()=>{p()},5e3);r(d)},f=()=>{l&&(clearTimeout(l),r(null))},p=()=>{i.dismiss(t.id)};e.useEffect(()=>(u?f():m(),()=>{f()}),[u]),e.useEffect(()=>{const d=c.current,h=()=>{p()};return d&&d.addEventListener("animationend",h),()=>{d&&d.removeEventListener("animationend",h)}},[]);const M=()=>{g(!0),f(),c.current&&(c.current.style.animationPlayState="paused")},j=()=>{g(!1),m(),c.current&&(c.current.style.animationPlayState="running")};return n.jsxs("div",{className:`starasia-toast-item-container starasia-toast-item-container-${a}-${t.type} starasia-toast-item-container-animation-${s}`,onMouseEnter:M,onMouseLeave:j,children:[n.jsx("div",{style:{display:"flex"},children:t.type==="success"?n.jsx(E,{style:{color:"inherit"}}):n.jsx(L,{style:{color:"inherit"}})}),n.jsx("div",{style:{flex:1},children:t.title}),n.jsx("div",{style:{display:"flex",cursor:"pointer"},onClick:()=>i.dismiss(t.id),children:n.jsx(S,{style:{color:"inherit"}})}),a==="outline"?n.jsx("div",{ref:c,className:`starasia-toast-item-progress starasia-toast-item-progress-outline-${t.type}`,style:{animation:"progressBarr 5s linear forwards",animationPlayState:u?"paused":"running"}}):null]})},L=t=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",...t,children:n.jsx("path",{d:"M12 7.01001V7.00002M12 17L12 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",cursor:"pointer"})}),E=t=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:n.jsx("g",{id:"Curved/Basic-actions-and-state",children:n.jsx("path",{id:"shape",d:"M14.1667 7.5L8.33332 13.3333L5.83328 10.8333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),S=t=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",...t,children:n.jsx("path",{d:"M19 5L5 19M5.00003 5L19 19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});o.ToastContainer=C,o.toast=x,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
298
+ `;let x=1;class w{constructor(){this.subscribe=t=>(this.subscribers.push(t),()=>{const a=this.subscribers.indexOf(t);this.subscribers.splice(a,1)}),this.publish=t=>{this.subscribers.forEach(a=>a(t))},this.addToast=t=>{this.publish(t),this.toasts=[...this.toasts,t]},this.create=t=>{const{message:a,type:c}=t,o=x++;return this.addToast({title:a,type:c,id:o}),o},this.dismiss=t=>(this.subscribers.forEach(a=>a({id:t,dismiss:!0})),t),this.danger=t=>this.create({message:t,type:"danger"}),this.warning=t=>this.create({message:t,type:"warning"}),this.success=t=>this.create({type:"success",message:t}),this.info=t=>this.create({type:"info",message:t}),this.default=t=>this.create({type:"default",message:t}),this.subscribers=[],this.toasts=[]}}const e=new w,k=Object.assign({success:e.success,info:e.info,default:e.default,danger:e.danger,warning:e.warning}),b="sa-toast-styles";(s=>{if(!document.getElementById(b)){const t=document.createElement("style");t.id=b,t.textContent=s,document.head.appendChild(t)}})(y);const C=({type:s="outline",direction:t="bottom-right"})=>{const[a,c]=i.useState([]);return i.useEffect(()=>e.subscribe(o=>{if(o.dismiss){c(l=>l.filter(f=>f.id!==o.id));return}setTimeout(()=>{h.flushSync(()=>{c(l=>[o,...l])})})}),[]),n.jsx("div",{className:`sa-toast-container sa-toast-container-${t}`,children:a.map(o=>n.jsx(T,{data:o,type:s,direction:t},o.id))})},T=({data:s,type:t="solid",direction:a="bottom-right"})=>{const[c,o]=i.useState(null),[l,f]=i.useState(!1),d=i.useRef(null),m=()=>{const u=setTimeout(()=>{p()},5e3);o(u)},g=()=>{c&&(clearTimeout(c),o(null))},p=()=>{e.dismiss(s.id)};i.useEffect(()=>(l?g():m(),()=>{g()}),[l]),i.useEffect(()=>{const u=d.current,v=()=>{p()};return u&&u.addEventListener("animationend",v),()=>{u&&u.removeEventListener("animationend",v)}},[]);const j=()=>{f(!0),g(),d.current&&(d.current.style.animationPlayState="paused")},M=()=>{f(!1),m(),d.current&&(d.current.style.animationPlayState="running")};return n.jsxs("div",{className:["sa-toast-item-container",(s==null?void 0:s.type)&&`sa-toast-item-container-${t}-${s.type}`,`sa-toast-item-container-animation-${a}`].filter(Boolean).join(" "),onMouseEnter:j,onMouseLeave:M,children:[n.jsx("div",{style:{display:"flex"},children:s.type==="success"?n.jsx(E,{style:{color:"inherit"}}):n.jsx(L,{style:{color:"inherit"}})}),n.jsx("div",{style:{flex:1},children:s.title}),n.jsx("div",{style:{display:"flex",cursor:"pointer"},onClick:()=>e.dismiss(s.id),children:n.jsx(S,{style:{color:"inherit"}})}),t==="outline"?n.jsx("div",{ref:d,className:`sa-toast-item-progress sa-toast-item-progress-outline-${s.type}`,style:{animation:"progressBarr 5s linear forwards",animationPlayState:l?"paused":"running"}}):null]})},L=s=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",...s,children:n.jsx("path",{d:"M12 7.01001V7.00002M12 17L12 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",cursor:"pointer"})}),E=s=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...s,children:n.jsx("g",{id:"Curved/Basic-actions-and-state",children:n.jsx("path",{id:"shape",d:"M14.1667 7.5L8.33332 13.3333L5.83328 10.8333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),S=s=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",...s,children:n.jsx("path",{d:"M19 5L5 19M5.00003 5L19 19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});r.ToastContainer=C,r.toast=k,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/toast",
3
- "version": "1.0.3",
3
+ "version": "3.0.0",
4
4
  "description": "toast component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/toast.umd.js",
@@ -12,10 +12,6 @@
12
12
  "dist/*.map",
13
13
  "dist/*.css"
14
14
  ],
15
- "scripts": {
16
- "dev": "vite --config vite.config.ts --port 3000",
17
- "build": "vite build --config vite.config.ts"
18
- },
19
15
  "keywords": [],
20
16
  "license": "ISC",
21
17
  "type": "module",
@@ -37,5 +33,9 @@
37
33
  "react-dom": "^18.2.0",
38
34
  "@types/react": "^18.2.55",
39
35
  "@types/react-dom": "^18.2.19"
36
+ },
37
+ "scripts": {
38
+ "dev": "vite --config vite.config.ts --port 3000",
39
+ "build": "vite build --config vite.config.ts"
40
40
  }
41
- }
41
+ }