@starasia/toast 2.0.0 → 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 +65 -61
  2. package/dist/toast.umd.js +31 -31
  3. package/package.json +6 -6
package/dist/toast.es.js CHANGED
@@ -69,7 +69,7 @@ const L = `@import url("https://fonts.googleapis.com/css2?family=Poppins&display
69
69
  --sa-toast-h-progress: 0.125rem;
70
70
  }
71
71
  /* styling for container */
72
- .starasia-toast-container {
72
+ .sa-toast-container {
73
73
  display: flex;
74
74
  flex-direction: column;
75
75
  gap: var(--sa-spacing-xs, 4px);
@@ -79,34 +79,34 @@ const L = `@import url("https://fonts.googleapis.com/css2?family=Poppins&display
79
79
  overflow: auto;
80
80
  z-index: 99999;
81
81
  }
82
- .starasia-toast-container-bottom-right {
82
+ .sa-toast-container-bottom-right {
83
83
  bottom: 0;
84
84
  right: 0;
85
85
  }
86
- .starasia-toast-container-bottom-left {
86
+ .sa-toast-container-bottom-left {
87
87
  bottom: 0;
88
88
  left: 0;
89
89
  }
90
- .starasia-toast-container-bottom-center {
90
+ .sa-toast-container-bottom-center {
91
91
  bottom: 0;
92
92
  left: 50%;
93
93
  transform: translateX(-50%);
94
94
  }
95
- .starasia-toast-container-top-right {
95
+ .sa-toast-container-top-right {
96
96
  top: 0;
97
97
  right: 0;
98
98
  }
99
- .starasia-toast-container-top-left {
99
+ .sa-toast-container-top-left {
100
100
  top: 0;
101
101
  left: 0;
102
102
  }
103
- .starasia-toast-container-top-center {
103
+ .sa-toast-container-top-center {
104
104
  top: 0;
105
105
  left: 50%;
106
106
  transform: translateX(-50%);
107
107
  }
108
108
  /* styling for */
109
- .starasia-toast-item-container {
109
+ .sa-toast-item-container {
110
110
  padding: var(--sa-spacing-lg, 16px);
111
111
  width: max-content;
112
112
  border-radius: var(--sa-radii-md, 6px);
@@ -120,71 +120,71 @@ const L = `@import url("https://fonts.googleapis.com/css2?family=Poppins&display
120
120
  width: 100%;
121
121
  }
122
122
  /* DEFAULT TOAST */
123
- .starasia-toast-item-container-solid-default {
123
+ .sa-toast-item-container-solid-default {
124
124
  background-color: var(--sa-toast-solid-bg-default);
125
125
  color: var(--sa-toast-solid-text-default);
126
126
  border-color: var(--sa-toast-solid-border-default);
127
127
  }
128
128
 
129
- .starasia-toast-item-container-outline-default {
129
+ .sa-toast-item-container-outline-default {
130
130
  background-color: var(--sa-toast-outline-bg-default);
131
131
  color: var(--sa-toast-outline-text-default);
132
132
  border-color: var(--sa-toast-outline-border-default);
133
133
  }
134
134
 
135
135
  /* DEFAULT DANGER */
136
- .starasia-toast-item-container-outline-danger {
136
+ .sa-toast-item-container-outline-danger {
137
137
  background-color: var(--sa-toast-outline-bg-danger);
138
138
  color: var(--sa-toast-outline-text-danger);
139
139
  border-color: var(--sa-toast-outline-border-danger);
140
140
  }
141
141
 
142
- .starasia-toast-item-container-solid-danger {
142
+ .sa-toast-item-container-solid-danger {
143
143
  background-color: var(--sa-toast-solid-bg-danger);
144
144
  color: var(--sa-toast-solid-text-danger);
145
145
  border-color: var(--sa-toast-solid-border-danger);
146
146
  }
147
147
 
148
148
  /* DEFAULT SUCCESS */
149
- .starasia-toast-item-container-outline-success {
149
+ .sa-toast-item-container-outline-success {
150
150
  background-color: var(--sa-toast-outline-bg-success);
151
151
  color: var(--sa-toast-outline-text-success);
152
152
  border-color: var(--sa-toast-outline-border-success);
153
153
  }
154
154
 
155
- .starasia-toast-item-container-solid-success {
155
+ .sa-toast-item-container-solid-success {
156
156
  background-color: var(--sa-toast-solid-bg-success);
157
157
  color: var(--sa-toast-solid-text-success);
158
158
  border-color: var(--sa-toast-solid-border-success);
159
159
  }
160
160
 
161
161
  /* DEFAULT INFO */
162
- .starasia-toast-item-container-outline-info {
162
+ .sa-toast-item-container-outline-info {
163
163
  background-color: var(--sa-toast-outline-bg-info);
164
164
  color: var(--sa-toast-outline-text-info);
165
165
  border-color: var(--sa-toast-outline-border-info);
166
166
  }
167
167
 
168
- .starasia-toast-item-container-solid-info {
168
+ .sa-toast-item-container-solid-info {
169
169
  background-color: var(--sa-toast-solid-bg-info);
170
170
  color: var(--sa-toast-solid-text-info);
171
171
  border-color: var(--sa-toast-solid-border-info);
172
172
  }
173
173
  /* DEFAULT WARNING */
174
- .starasia-toast-item-container-outline-warning {
174
+ .sa-toast-item-container-outline-warning {
175
175
  background-color: var(--sa-toast-outline-bg-warning);
176
176
  color: var(--sa-toast-outline-text-warning);
177
177
  border-color: var(--sa-toast-outline-border-warning);
178
178
  }
179
179
 
180
- .starasia-toast-item-container-solid-warning {
180
+ .sa-toast-item-container-solid-warning {
181
181
  background-color: var(--sa-toast-solid-bg-warning);
182
182
  color: var(--sa-toast-solid-text-warning);
183
183
  border-color: var(--sa-toast-solid-border-warning);
184
184
  }
185
185
 
186
186
  /* PROGRESS BAR */
187
- .starasia-toast-item-progress {
187
+ .sa-toast-item-progress {
188
188
  height: var(--sa-toast-h-progress);
189
189
  width: 100%;
190
190
  position: absolute;
@@ -194,39 +194,39 @@ const L = `@import url("https://fonts.googleapis.com/css2?family=Poppins&display
194
194
  animation: progressBarr 5s linear forwards;
195
195
  }
196
196
 
197
- .starasia-toast-item-progress-outline-default {
197
+ .sa-toast-item-progress-outline-default {
198
198
  background-color: var(--sa-toast-outline-progress-default);
199
199
  }
200
- .starasia-toast-item-progress-outline-info {
200
+ .sa-toast-item-progress-outline-info {
201
201
  background-color: var(--sa-toast-outline-progress-info);
202
202
  }
203
- .starasia-toast-item-progress-outline-success {
203
+ .sa-toast-item-progress-outline-success {
204
204
  background-color: var(--sa-toast-outline-progress-success);
205
205
  }
206
- .starasia-toast-item-progress-outline-danger {
206
+ .sa-toast-item-progress-outline-danger {
207
207
  background-color: var(--sa-toast-outline-progress-danger);
208
208
  }
209
- .starasia-toast-item-progress-outline-warning {
209
+ .sa-toast-item-progress-outline-warning {
210
210
  background-color: var(--sa-toast-outline-progress-warning);
211
211
  }
212
212
 
213
213
  /* animation */
214
- .starasia-toast-item-container-animation-bottom-right {
214
+ .sa-toast-item-container-animation-bottom-right {
215
215
  animation: bottomRight 0.375s;
216
216
  }
217
- .starasia-toast-item-container-animation-bottom-left {
217
+ .sa-toast-item-container-animation-bottom-left {
218
218
  animation: bottomLeft 0.375s;
219
219
  }
220
- .starasia-toast-item-container-animation-bottom-center {
220
+ .sa-toast-item-container-animation-bottom-center {
221
221
  animation: bottomCenter 0.375s;
222
222
  }
223
- .starasia-toast-item-container-animation-top-left {
223
+ .sa-toast-item-container-animation-top-left {
224
224
  animation: topLeft 0.375s;
225
225
  }
226
- .starasia-toast-item-container-animation-top-right {
226
+ .sa-toast-item-container-animation-top-right {
227
227
  animation: topRight 0.375s;
228
228
  }
229
- .starasia-toast-item-container-animation-top-center {
229
+ .sa-toast-item-container-animation-top-center {
230
230
  animation: topCenter 0.375s;
231
231
  }
232
232
 
@@ -303,16 +303,16 @@ let E = 1;
303
303
  class T {
304
304
  constructor() {
305
305
  this.subscribe = (t) => (this.subscribers.push(t), () => {
306
- const o = this.subscribers.indexOf(t);
307
- this.subscribers.splice(o, 1);
306
+ const a = this.subscribers.indexOf(t);
307
+ this.subscribers.splice(a, 1);
308
308
  }), this.publish = (t) => {
309
- this.subscribers.forEach((o) => o(t));
309
+ this.subscribers.forEach((a) => a(t));
310
310
  }, this.addToast = (t) => {
311
311
  this.publish(t), this.toasts = [...this.toasts, t];
312
312
  }, this.create = (t) => {
313
- const { message: o, type: e } = t, a = E++;
314
- return this.addToast({ title: o, type: e, id: a }), a;
315
- }, this.dismiss = (t) => (this.subscribers.forEach((o) => o({ 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 = [];
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 = [];
316
316
  }
317
317
  }
318
318
  const r = new T(), D = Object.assign({
@@ -321,7 +321,7 @@ const r = new T(), D = Object.assign({
321
321
  default: r.default,
322
322
  danger: r.danger,
323
323
  warning: r.warning
324
- }), h = "starasia-toast-styles", S = (n) => {
324
+ }), h = "sa-toast-styles", S = (n) => {
325
325
  if (!document.getElementById(h)) {
326
326
  const t = document.createElement("style");
327
327
  t.id = h, t.textContent = n, document.head.appendChild(t);
@@ -332,62 +332,66 @@ const N = ({
332
332
  type: n = "outline",
333
333
  direction: t = "bottom-right"
334
334
  }) => {
335
- const [o, e] = b.useState([]);
336
- return b.useEffect(() => r.subscribe((a) => {
337
- if (a.dismiss) {
338
- e((i) => i.filter((d) => d.id !== a.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));
339
339
  return;
340
340
  }
341
341
  setTimeout(() => {
342
342
  C.flushSync(() => {
343
- e((i) => [a, ...i]);
343
+ e((i) => [o, ...i]);
344
344
  });
345
345
  });
346
346
  }), []), /* @__PURE__ */ s(
347
347
  "div",
348
348
  {
349
- className: `starasia-toast-container starasia-toast-container-${t}`,
350
- children: o.map((a) => /* @__PURE__ */ s(
349
+ className: `sa-toast-container sa-toast-container-${t}`,
350
+ children: a.map((o) => /* @__PURE__ */ s(
351
351
  R,
352
352
  {
353
- data: a,
353
+ data: o,
354
354
  type: n,
355
355
  direction: t
356
356
  },
357
- a.id
357
+ o.id
358
358
  ))
359
359
  }
360
360
  );
361
- }, R = ({ data: n, type: t = "solid", direction: o }) => {
362
- const [e, a] = p(null), [i, d] = p(!1), c = k(null), f = () => {
363
- const l = setTimeout(() => {
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
364
  g();
365
365
  }, 5e3);
366
- a(l);
366
+ o(c);
367
367
  }, u = () => {
368
- e && (clearTimeout(e), a(null));
368
+ e && (clearTimeout(e), o(null));
369
369
  }, g = () => {
370
370
  r.dismiss(n.id);
371
371
  };
372
372
  v(() => (i ? u() : f(), () => {
373
373
  u();
374
374
  }), [i]), v(() => {
375
- const l = c.current, m = () => {
375
+ const c = l.current, m = () => {
376
376
  g();
377
377
  };
378
- return l && l.addEventListener("animationend", m), () => {
379
- l && l.removeEventListener("animationend", m);
378
+ return c && c.addEventListener("animationend", m), () => {
379
+ c && c.removeEventListener("animationend", m);
380
380
  };
381
381
  }, []);
382
382
  const y = () => {
383
- d(!0), u(), c.current && (c.current.style.animationPlayState = "paused");
383
+ d(!0), u(), l.current && (l.current.style.animationPlayState = "paused");
384
384
  }, w = () => {
385
- d(!1), f(), c.current && (c.current.style.animationPlayState = "running");
385
+ d(!1), f(), l.current && (l.current.style.animationPlayState = "running");
386
386
  };
387
387
  return /* @__PURE__ */ x(
388
388
  "div",
389
389
  {
390
- className: `starasia-toast-item-container starasia-toast-item-container-${t}-${n.type} starasia-toast-item-container-animation-${o}`,
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(" "),
391
395
  onMouseEnter: y,
392
396
  onMouseLeave: w,
393
397
  children: [
@@ -398,14 +402,14 @@ const N = ({
398
402
  {
399
403
  style: { display: "flex", cursor: "pointer" },
400
404
  onClick: () => r.dismiss(n.id),
401
- children: /* @__PURE__ */ s(A, { style: { color: "inherit" } })
405
+ children: /* @__PURE__ */ s(B, { style: { color: "inherit" } })
402
406
  }
403
407
  ),
404
408
  t === "outline" ? /* @__PURE__ */ s(
405
409
  "div",
406
410
  {
407
- ref: c,
408
- className: `starasia-toast-item-progress starasia-toast-item-progress-outline-${n.type}`,
411
+ ref: l,
412
+ className: `sa-toast-item-progress sa-toast-item-progress-outline-${n.type}`,
409
413
  style: {
410
414
  animation: "progressBarr 5s linear forwards",
411
415
  animationPlayState: i ? "paused" : "running"
@@ -457,7 +461,7 @@ const N = ({
457
461
  }
458
462
  ) })
459
463
  }
460
- ), A = (n) => /* @__PURE__ */ s(
464
+ ), B = (n) => /* @__PURE__ */ s(
461
465
  "svg",
462
466
  {
463
467
  xmlns: "http://www.w3.org/2000/svg",
package/dist/toast.umd.js CHANGED
@@ -66,7 +66,7 @@
66
66
  --sa-toast-h-progress: 0.125rem;
67
67
  }
68
68
  /* styling for container */
69
- .starasia-toast-container {
69
+ .sa-toast-container {
70
70
  display: flex;
71
71
  flex-direction: column;
72
72
  gap: var(--sa-spacing-xs, 4px);
@@ -76,34 +76,34 @@
76
76
  overflow: auto;
77
77
  z-index: 99999;
78
78
  }
79
- .starasia-toast-container-bottom-right {
79
+ .sa-toast-container-bottom-right {
80
80
  bottom: 0;
81
81
  right: 0;
82
82
  }
83
- .starasia-toast-container-bottom-left {
83
+ .sa-toast-container-bottom-left {
84
84
  bottom: 0;
85
85
  left: 0;
86
86
  }
87
- .starasia-toast-container-bottom-center {
87
+ .sa-toast-container-bottom-center {
88
88
  bottom: 0;
89
89
  left: 50%;
90
90
  transform: translateX(-50%);
91
91
  }
92
- .starasia-toast-container-top-right {
92
+ .sa-toast-container-top-right {
93
93
  top: 0;
94
94
  right: 0;
95
95
  }
96
- .starasia-toast-container-top-left {
96
+ .sa-toast-container-top-left {
97
97
  top: 0;
98
98
  left: 0;
99
99
  }
100
- .starasia-toast-container-top-center {
100
+ .sa-toast-container-top-center {
101
101
  top: 0;
102
102
  left: 50%;
103
103
  transform: translateX(-50%);
104
104
  }
105
105
  /* styling for */
106
- .starasia-toast-item-container {
106
+ .sa-toast-item-container {
107
107
  padding: var(--sa-spacing-lg, 16px);
108
108
  width: max-content;
109
109
  border-radius: var(--sa-radii-md, 6px);
@@ -117,71 +117,71 @@
117
117
  width: 100%;
118
118
  }
119
119
  /* DEFAULT TOAST */
120
- .starasia-toast-item-container-solid-default {
120
+ .sa-toast-item-container-solid-default {
121
121
  background-color: var(--sa-toast-solid-bg-default);
122
122
  color: var(--sa-toast-solid-text-default);
123
123
  border-color: var(--sa-toast-solid-border-default);
124
124
  }
125
125
 
126
- .starasia-toast-item-container-outline-default {
126
+ .sa-toast-item-container-outline-default {
127
127
  background-color: var(--sa-toast-outline-bg-default);
128
128
  color: var(--sa-toast-outline-text-default);
129
129
  border-color: var(--sa-toast-outline-border-default);
130
130
  }
131
131
 
132
132
  /* DEFAULT DANGER */
133
- .starasia-toast-item-container-outline-danger {
133
+ .sa-toast-item-container-outline-danger {
134
134
  background-color: var(--sa-toast-outline-bg-danger);
135
135
  color: var(--sa-toast-outline-text-danger);
136
136
  border-color: var(--sa-toast-outline-border-danger);
137
137
  }
138
138
 
139
- .starasia-toast-item-container-solid-danger {
139
+ .sa-toast-item-container-solid-danger {
140
140
  background-color: var(--sa-toast-solid-bg-danger);
141
141
  color: var(--sa-toast-solid-text-danger);
142
142
  border-color: var(--sa-toast-solid-border-danger);
143
143
  }
144
144
 
145
145
  /* DEFAULT SUCCESS */
146
- .starasia-toast-item-container-outline-success {
146
+ .sa-toast-item-container-outline-success {
147
147
  background-color: var(--sa-toast-outline-bg-success);
148
148
  color: var(--sa-toast-outline-text-success);
149
149
  border-color: var(--sa-toast-outline-border-success);
150
150
  }
151
151
 
152
- .starasia-toast-item-container-solid-success {
152
+ .sa-toast-item-container-solid-success {
153
153
  background-color: var(--sa-toast-solid-bg-success);
154
154
  color: var(--sa-toast-solid-text-success);
155
155
  border-color: var(--sa-toast-solid-border-success);
156
156
  }
157
157
 
158
158
  /* DEFAULT INFO */
159
- .starasia-toast-item-container-outline-info {
159
+ .sa-toast-item-container-outline-info {
160
160
  background-color: var(--sa-toast-outline-bg-info);
161
161
  color: var(--sa-toast-outline-text-info);
162
162
  border-color: var(--sa-toast-outline-border-info);
163
163
  }
164
164
 
165
- .starasia-toast-item-container-solid-info {
165
+ .sa-toast-item-container-solid-info {
166
166
  background-color: var(--sa-toast-solid-bg-info);
167
167
  color: var(--sa-toast-solid-text-info);
168
168
  border-color: var(--sa-toast-solid-border-info);
169
169
  }
170
170
  /* DEFAULT WARNING */
171
- .starasia-toast-item-container-outline-warning {
171
+ .sa-toast-item-container-outline-warning {
172
172
  background-color: var(--sa-toast-outline-bg-warning);
173
173
  color: var(--sa-toast-outline-text-warning);
174
174
  border-color: var(--sa-toast-outline-border-warning);
175
175
  }
176
176
 
177
- .starasia-toast-item-container-solid-warning {
177
+ .sa-toast-item-container-solid-warning {
178
178
  background-color: var(--sa-toast-solid-bg-warning);
179
179
  color: var(--sa-toast-solid-text-warning);
180
180
  border-color: var(--sa-toast-solid-border-warning);
181
181
  }
182
182
 
183
183
  /* PROGRESS BAR */
184
- .starasia-toast-item-progress {
184
+ .sa-toast-item-progress {
185
185
  height: var(--sa-toast-h-progress);
186
186
  width: 100%;
187
187
  position: absolute;
@@ -191,39 +191,39 @@
191
191
  animation: progressBarr 5s linear forwards;
192
192
  }
193
193
 
194
- .starasia-toast-item-progress-outline-default {
194
+ .sa-toast-item-progress-outline-default {
195
195
  background-color: var(--sa-toast-outline-progress-default);
196
196
  }
197
- .starasia-toast-item-progress-outline-info {
197
+ .sa-toast-item-progress-outline-info {
198
198
  background-color: var(--sa-toast-outline-progress-info);
199
199
  }
200
- .starasia-toast-item-progress-outline-success {
200
+ .sa-toast-item-progress-outline-success {
201
201
  background-color: var(--sa-toast-outline-progress-success);
202
202
  }
203
- .starasia-toast-item-progress-outline-danger {
203
+ .sa-toast-item-progress-outline-danger {
204
204
  background-color: var(--sa-toast-outline-progress-danger);
205
205
  }
206
- .starasia-toast-item-progress-outline-warning {
206
+ .sa-toast-item-progress-outline-warning {
207
207
  background-color: var(--sa-toast-outline-progress-warning);
208
208
  }
209
209
 
210
210
  /* animation */
211
- .starasia-toast-item-container-animation-bottom-right {
211
+ .sa-toast-item-container-animation-bottom-right {
212
212
  animation: bottomRight 0.375s;
213
213
  }
214
- .starasia-toast-item-container-animation-bottom-left {
214
+ .sa-toast-item-container-animation-bottom-left {
215
215
  animation: bottomLeft 0.375s;
216
216
  }
217
- .starasia-toast-item-container-animation-bottom-center {
217
+ .sa-toast-item-container-animation-bottom-center {
218
218
  animation: bottomCenter 0.375s;
219
219
  }
220
- .starasia-toast-item-container-animation-top-left {
220
+ .sa-toast-item-container-animation-top-left {
221
221
  animation: topLeft 0.375s;
222
222
  }
223
- .starasia-toast-item-container-animation-top-right {
223
+ .sa-toast-item-container-animation-top-right {
224
224
  animation: topRight 0.375s;
225
225
  }
226
- .starasia-toast-item-container-animation-top-center {
226
+ .sa-toast-item-container-animation-top-center {
227
227
  animation: topCenter 0.375s;
228
228
  }
229
229
 
@@ -295,4 +295,4 @@
295
295
  width: 0px;
296
296
  }
297
297
  }
298
- `;let x=1;class w{constructor(){this.subscribe=t=>(this.subscribers.push(t),()=>{const o=this.subscribers.indexOf(t);this.subscribers.splice(o,1)}),this.publish=t=>{this.subscribers.forEach(o=>o(t))},this.addToast=t=>{this.publish(t),this.toasts=[...this.toasts,t]},this.create=t=>{const{message:o,type:c}=t,a=x++;return this.addToast({title:o,type:c,id:a}),a},this.dismiss=t=>(this.subscribers.forEach(o=>o({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="starasia-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[o,c]=i.useState([]);return i.useEffect(()=>e.subscribe(a=>{if(a.dismiss){c(l=>l.filter(f=>f.id!==a.id));return}setTimeout(()=>{h.flushSync(()=>{c(l=>[a,...l])})})}),[]),n.jsx("div",{className:`starasia-toast-container starasia-toast-container-${t}`,children:o.map(a=>n.jsx(T,{data:a,type:s,direction:t},a.id))})},T=({data:s,type:t="solid",direction:o})=>{const[c,a]=i.useState(null),[l,f]=i.useState(!1),d=i.useRef(null),m=()=>{const u=setTimeout(()=>{p()},5e3);a(u)},g=()=>{c&&(clearTimeout(c),a(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 M=()=>{f(!0),g(),d.current&&(d.current.style.animationPlayState="paused")},j=()=>{f(!1),m(),d.current&&(d.current.style.animationPlayState="running")};return n.jsxs("div",{className:`starasia-toast-item-container starasia-toast-item-container-${t}-${s.type} starasia-toast-item-container-animation-${o}`,onMouseEnter:M,onMouseLeave:j,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:`starasia-toast-item-progress starasia-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"})});
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": "2.0.0",
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
+ }