@starasia/toast 1.0.2 → 1.0.3

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 +99 -97
  2. package/dist/toast.umd.js +42 -40
  3. package/package.json +6 -6
package/dist/toast.es.js CHANGED
@@ -1,5 +1,5 @@
1
- import { jsx as t, jsxs as w } from "react/jsx-runtime";
2
- import p, { useState as b, useRef as x, useEffect as h } from "react";
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";
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,61 +11,63 @@ 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));
16
+
14
17
  /* color solid default */
15
- --starasia-ui-solid-background-default: #111827;
16
- --starasia-ui-solid-color-default: #fff;
17
- --starasia-ui-solid-border-default: #e5e7eb;
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);
18
21
 
19
22
  /* color outline default */
20
- --starasia-ui-outline-background-default: #f9fafb;
21
- --starasia-ui-outline-color-default: #111827;
22
- --starasia-ui-outline-border-default: #e5e7eb;
23
- --starasia-ui-outline-progress-default: #181a19;
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);
24
27
 
25
28
  /* color outline red */
26
- --starasia-ui-outline-background-danger: #fef2f2;
27
- --starasia-ui-outline-color-danger: #dc2626;
28
- --starasia-ui-outline-border-danger: #fecaca;
29
- --starasia-ui-outline-progress-danger: #181a19;
30
- --starasia-ui-outline-progress-danger: #c9184a;
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
33
 
32
34
  /* color solid red */
33
- --starasia-ui-solid-background-danger: #c9184a;
34
- --starasia-ui-solid-color-danger: #fff0f3;
35
- --starasia-ui-solid-border-danger: #c9184a;
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
38
 
37
39
  /* color outline success */
38
- --starasia-ui-outline-background-success: #dcf6ea;
39
- --starasia-ui-outline-color-success: #28ac6e;
40
- --starasia-ui-outline-border-success: #97e6c1;
41
- --starasia-ui-outline-progress-success: #28ac6e;
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
44
 
43
45
  /* color solid success */
44
- --starasia-ui-solid-background-success: #28ac6e;
45
- --starasia-ui-solid-color-success: #dcf6ea;
46
- --starasia-ui-solid-border-success: #28ac6e;
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
49
 
48
- /* color outline info */
49
- --starasia-ui-outline-background-info: #e3f2fd;
50
- --starasia-ui-outline-color-info: #1976d2;
51
- --starasia-ui-outline-border-info: #64b5f6;
52
- --starasia-ui-outline-progress-info: #1976d2;
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
55
 
54
- /* color solid info */
55
- --starasia-ui-solid-background-info: #1976d2;
56
- --starasia-ui-solid-color-info: #e3f2fd;
57
- --starasia-ui-solid-border-info: #1976d2;
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
60
 
59
61
  /* color outline warning */
60
- --starasia-ui-outline-background-warning: #fdf3e4;
61
- --starasia-ui-outline-color-warning: #181a19;
62
- --starasia-ui-outline-border-warning: #f4c583;
63
- --starasia-ui-outline-progress-warning: #ed9f30;
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
66
 
65
67
  /* color solid warning */
66
- --starasia-ui-solid-background-warning: #ed9f30;
67
- --starasia-ui-solid-color-warning: #fffeff;
68
- --starasia-ui-solid-border-warning: #ed9f30;
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);
69
71
 
70
72
  /* height */
71
73
  --starasia-ui-h-0-5: 0.125rem; /* 2px */
@@ -304,17 +306,17 @@ const L = `@import url("https://fonts.googleapis.com/css2?family=Poppins&display
304
306
  let E = 1;
305
307
  class T {
306
308
  constructor() {
307
- this.subscribe = (n) => (this.subscribers.push(n), () => {
308
- const r = this.subscribers.indexOf(n);
309
- this.subscribers.splice(r, 1);
310
- }), this.publish = (n) => {
311
- this.subscribers.forEach((r) => r(n));
312
- }, this.addToast = (n) => {
313
- this.publish(n), this.toasts = [...this.toasts, n];
314
- }, this.create = (n) => {
315
- const { message: r, type: i } = n, s = E++;
316
- return this.addToast({ title: r, type: i, id: s }), s;
317
- }, this.dismiss = (n) => (this.subscribers.forEach((r) => r({ id: n, dismiss: !0 })), n), this.danger = (n) => this.create({ message: n, type: "danger" }), this.warning = (n) => this.create({ message: n, type: "warning" }), this.success = (n) => this.create({ type: "success", message: n }), this.info = (n) => this.create({ type: "info", message: n }), this.default = (n) => this.create({ type: "default", message: n }), this.subscribers = [], this.toasts = [];
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 = [];
318
320
  }
319
321
  }
320
322
  const o = new T(), D = Object.assign({
@@ -323,91 +325,91 @@ const o = new T(), D = Object.assign({
323
325
  default: o.default,
324
326
  danger: o.danger,
325
327
  warning: o.warning
326
- }), v = "starasia-toast-styles", S = (a) => {
328
+ }), v = "starasia-toast-styles", S = (n) => {
327
329
  if (!document.getElementById(v)) {
328
- const n = document.createElement("style");
329
- n.id = v, n.textContent = a, document.head.appendChild(n);
330
+ const a = document.createElement("style");
331
+ a.id = v, a.textContent = n, document.head.appendChild(a);
330
332
  }
331
333
  };
332
334
  S(L);
333
335
  const N = ({
334
- type: a = "outline",
335
- direction: n = "bottom-right"
336
+ type: n = "outline",
337
+ direction: a = "bottom-right"
336
338
  }) => {
337
- const [r, i] = p.useState([]);
338
- return p.useEffect(() => o.subscribe((s) => {
339
- if (s.dismiss) {
340
- i((e) => e.filter((u) => u.id !== s.id));
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));
341
343
  return;
342
344
  }
343
345
  setTimeout(() => {
344
346
  C.flushSync(() => {
345
- i((e) => [s, ...e]);
347
+ i((e) => [r, ...e]);
346
348
  });
347
349
  });
348
350
  }), []), /* @__PURE__ */ t(
349
351
  "div",
350
352
  {
351
- className: `starasia-toast-container starasia-toast-container-${n}`,
352
- children: r.map((s) => /* @__PURE__ */ t(
353
+ className: `starasia-toast-container starasia-toast-container-${a}`,
354
+ children: s.map((r) => /* @__PURE__ */ t(
353
355
  R,
354
356
  {
355
- data: s,
356
- type: a,
357
- direction: n
357
+ data: r,
358
+ type: n,
359
+ direction: a
358
360
  },
359
- s.id
361
+ r.id
360
362
  ))
361
363
  }
362
364
  );
363
- }, R = ({ data: a, type: n = "solid", direction: r }) => {
364
- const [i, s] = b(null), [e, u] = b(!1), l = x(null), f = () => {
365
- const c = setTimeout(() => {
366
- g();
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();
367
369
  }, 5e3);
368
- s(c);
370
+ r(u);
369
371
  }, d = () => {
370
- i && (clearTimeout(i), s(null));
371
- }, g = () => {
372
- o.dismiss(a.id);
372
+ i && (clearTimeout(i), r(null));
373
+ }, m = () => {
374
+ o.dismiss(n.id);
373
375
  };
374
- h(() => (e ? d() : f(), () => {
376
+ h(() => (e ? d() : g(), () => {
375
377
  d();
376
378
  }), [e]), h(() => {
377
- const c = l.current, m = () => {
378
- g();
379
+ const u = l.current, b = () => {
380
+ m();
379
381
  };
380
- return c && c.addEventListener("animationend", m), () => {
381
- c && c.removeEventListener("animationend", m);
382
+ return u && u.addEventListener("animationend", b), () => {
383
+ u && u.removeEventListener("animationend", b);
382
384
  };
383
385
  }, []);
384
386
  const y = () => {
385
- u(!0), d(), l.current && (l.current.style.animationPlayState = "paused");
386
- }, k = () => {
387
- u(!1), f(), l.current && (l.current.style.animationPlayState = "running");
387
+ c(!0), d(), l.current && (l.current.style.animationPlayState = "paused");
388
+ }, w = () => {
389
+ c(!1), g(), l.current && (l.current.style.animationPlayState = "running");
388
390
  };
389
- return /* @__PURE__ */ w(
391
+ return /* @__PURE__ */ k(
390
392
  "div",
391
393
  {
392
- className: `starasia-toast-item-container starasia-toast-item-container-${n}-${a.type} starasia-toast-item-container-animation-${r}`,
394
+ className: `starasia-toast-item-container starasia-toast-item-container-${a}-${n.type} starasia-toast-item-container-animation-${s}`,
393
395
  onMouseEnter: y,
394
- onMouseLeave: k,
396
+ onMouseLeave: w,
395
397
  children: [
396
- /* @__PURE__ */ t("div", { style: { display: "flex" }, children: a.type === "success" ? /* @__PURE__ */ t(M, { style: { color: "inherit" } }) : /* @__PURE__ */ t(I, { style: { color: "inherit" } }) }),
397
- /* @__PURE__ */ t("div", { style: { flex: 1 }, children: a.title }),
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 }),
398
400
  /* @__PURE__ */ t(
399
401
  "div",
400
402
  {
401
403
  style: { display: "flex", cursor: "pointer" },
402
- onClick: () => o.dismiss(a.id),
404
+ onClick: () => o.dismiss(n.id),
403
405
  children: /* @__PURE__ */ t(A, { style: { color: "inherit" } })
404
406
  }
405
407
  ),
406
- n === "outline" ? /* @__PURE__ */ t(
408
+ a === "outline" ? /* @__PURE__ */ t(
407
409
  "div",
408
410
  {
409
411
  ref: l,
410
- className: `starasia-toast-item-progress starasia-toast-item-progress-outline-${a.type}`,
412
+ className: `starasia-toast-item-progress starasia-toast-item-progress-outline-${n.type}`,
411
413
  style: {
412
414
  animation: "progressBarr 5s linear forwards",
413
415
  animationPlayState: e ? "paused" : "running"
@@ -417,7 +419,7 @@ const N = ({
417
419
  ]
418
420
  }
419
421
  );
420
- }, I = (a) => /* @__PURE__ */ t(
422
+ }, I = (n) => /* @__PURE__ */ t(
421
423
  "svg",
422
424
  {
423
425
  xmlns: "http://www.w3.org/2000/svg",
@@ -425,7 +427,7 @@ const N = ({
425
427
  height: "20",
426
428
  viewBox: "0 0 24 24",
427
429
  fill: "none",
428
- ...a,
430
+ ...n,
429
431
  children: /* @__PURE__ */ t(
430
432
  "path",
431
433
  {
@@ -438,7 +440,7 @@ const N = ({
438
440
  }
439
441
  )
440
442
  }
441
- ), M = (a) => /* @__PURE__ */ t(
443
+ ), M = (n) => /* @__PURE__ */ t(
442
444
  "svg",
443
445
  {
444
446
  width: "20",
@@ -446,7 +448,7 @@ const N = ({
446
448
  viewBox: "0 0 20 20",
447
449
  fill: "none",
448
450
  xmlns: "http://www.w3.org/2000/svg",
449
- ...a,
451
+ ...n,
450
452
  children: /* @__PURE__ */ t("g", { id: "Curved/Basic-actions-and-state", children: /* @__PURE__ */ t(
451
453
  "path",
452
454
  {
@@ -459,7 +461,7 @@ const N = ({
459
461
  }
460
462
  ) })
461
463
  }
462
- ), A = (a) => /* @__PURE__ */ t(
464
+ ), A = (n) => /* @__PURE__ */ t(
463
465
  "svg",
464
466
  {
465
467
  xmlns: "http://www.w3.org/2000/svg",
@@ -467,7 +469,7 @@ const N = ({
467
469
  height: "20",
468
470
  viewBox: "0 0 24 24",
469
471
  fill: "none",
470
- ...a,
472
+ ...n,
471
473
  children: /* @__PURE__ */ t(
472
474
  "path",
473
475
  {
package/dist/toast.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(o,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime"),require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","react-dom"],a):(o=typeof globalThis<"u"?globalThis:o||self,a(o.Toast={},o.jsxRuntime,o.React,o.ReactDOM))})(this,function(o,a,e,v){"use strict";const y=`@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
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");
2
2
 
3
3
  * {
4
4
  margin: 0;
@@ -8,61 +8,63 @@
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));
13
+
11
14
  /* color solid default */
12
- --starasia-ui-solid-background-default: #111827;
13
- --starasia-ui-solid-color-default: #fff;
14
- --starasia-ui-solid-border-default: #e5e7eb;
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);
15
18
 
16
19
  /* color outline default */
17
- --starasia-ui-outline-background-default: #f9fafb;
18
- --starasia-ui-outline-color-default: #111827;
19
- --starasia-ui-outline-border-default: #e5e7eb;
20
- --starasia-ui-outline-progress-default: #181a19;
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);
21
24
 
22
25
  /* color outline red */
23
- --starasia-ui-outline-background-danger: #fef2f2;
24
- --starasia-ui-outline-color-danger: #dc2626;
25
- --starasia-ui-outline-border-danger: #fecaca;
26
- --starasia-ui-outline-progress-danger: #181a19;
27
- --starasia-ui-outline-progress-danger: #c9184a;
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
30
 
29
31
  /* color solid red */
30
- --starasia-ui-solid-background-danger: #c9184a;
31
- --starasia-ui-solid-color-danger: #fff0f3;
32
- --starasia-ui-solid-border-danger: #c9184a;
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
35
 
34
36
  /* color outline success */
35
- --starasia-ui-outline-background-success: #dcf6ea;
36
- --starasia-ui-outline-color-success: #28ac6e;
37
- --starasia-ui-outline-border-success: #97e6c1;
38
- --starasia-ui-outline-progress-success: #28ac6e;
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
41
 
40
42
  /* color solid success */
41
- --starasia-ui-solid-background-success: #28ac6e;
42
- --starasia-ui-solid-color-success: #dcf6ea;
43
- --starasia-ui-solid-border-success: #28ac6e;
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
46
 
45
- /* color outline info */
46
- --starasia-ui-outline-background-info: #e3f2fd;
47
- --starasia-ui-outline-color-info: #1976d2;
48
- --starasia-ui-outline-border-info: #64b5f6;
49
- --starasia-ui-outline-progress-info: #1976d2;
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
52
 
51
- /* color solid info */
52
- --starasia-ui-solid-background-info: #1976d2;
53
- --starasia-ui-solid-color-info: #e3f2fd;
54
- --starasia-ui-solid-border-info: #1976d2;
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
57
 
56
58
  /* color outline warning */
57
- --starasia-ui-outline-background-warning: #fdf3e4;
58
- --starasia-ui-outline-color-warning: #181a19;
59
- --starasia-ui-outline-border-warning: #f4c583;
60
- --starasia-ui-outline-progress-warning: #ed9f30;
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
63
 
62
64
  /* color solid warning */
63
- --starasia-ui-solid-background-warning: #ed9f30;
64
- --starasia-ui-solid-color-warning: #fffeff;
65
- --starasia-ui-solid-border-warning: #ed9f30;
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);
66
68
 
67
69
  /* height */
68
70
  --starasia-ui-h-0-5: 0.125rem; /* 2px */
@@ -297,4 +299,4 @@
297
299
  width: 0px;
298
300
  }
299
301
  }
300
- `;let k=1;class w{constructor(){this.subscribe=n=>(this.subscribers.push(n),()=>{const r=this.subscribers.indexOf(n);this.subscribers.splice(r,1)}),this.publish=n=>{this.subscribers.forEach(r=>r(n))},this.addToast=n=>{this.publish(n),this.toasts=[...this.toasts,n]},this.create=n=>{const{message:r,type:c}=n,s=k++;return this.addToast({title:r,type:c,id:s}),s},this.dismiss=n=>(this.subscribers.forEach(r=>r({id:n,dismiss:!0})),n),this.danger=n=>this.create({message:n,type:"danger"}),this.warning=n=>this.create({message:n,type:"warning"}),this.success=n=>this.create({type:"success",message:n}),this.info=n=>this.create({type:"info",message:n}),this.default=n=>this.create({type:"default",message:n}),this.subscribers=[],this.toasts=[]}}const i=new w,x=Object.assign({success:i.success,info:i.info,default:i.default,danger:i.danger,warning:i.warning}),m="starasia-toast-styles";(t=>{if(!document.getElementById(m)){const n=document.createElement("style");n.id=m,n.textContent=t,document.head.appendChild(n)}})(y);const C=({type:t="outline",direction:n="bottom-right"})=>{const[r,c]=e.useState([]);return e.useEffect(()=>i.subscribe(s=>{if(s.dismiss){c(l=>l.filter(f=>f.id!==s.id));return}setTimeout(()=>{v.flushSync(()=>{c(l=>[s,...l])})})}),[]),a.jsx("div",{className:`starasia-toast-container starasia-toast-container-${n}`,children:r.map(s=>a.jsx(T,{data:s,type:t,direction:n},s.id))})},T=({data:t,type:n="solid",direction:r})=>{const[c,s]=e.useState(null),[l,f]=e.useState(!1),u=e.useRef(null),p=()=>{const d=setTimeout(()=>{b()},5e3);s(d)},g=()=>{c&&(clearTimeout(c),s(null))},b=()=>{i.dismiss(t.id)};e.useEffect(()=>(l?g():p(),()=>{g()}),[l]),e.useEffect(()=>{const d=u.current,h=()=>{b()};return d&&d.addEventListener("animationend",h),()=>{d&&d.removeEventListener("animationend",h)}},[]);const M=()=>{f(!0),g(),u.current&&(u.current.style.animationPlayState="paused")},j=()=>{f(!1),p(),u.current&&(u.current.style.animationPlayState="running")};return a.jsxs("div",{className:`starasia-toast-item-container starasia-toast-item-container-${n}-${t.type} starasia-toast-item-container-animation-${r}`,onMouseEnter:M,onMouseLeave:j,children:[a.jsx("div",{style:{display:"flex"},children:t.type==="success"?a.jsx(E,{style:{color:"inherit"}}):a.jsx(L,{style:{color:"inherit"}})}),a.jsx("div",{style:{flex:1},children:t.title}),a.jsx("div",{style:{display:"flex",cursor:"pointer"},onClick:()=>i.dismiss(t.id),children:a.jsx(S,{style:{color:"inherit"}})}),n==="outline"?a.jsx("div",{ref:u,className:`starasia-toast-item-progress starasia-toast-item-progress-outline-${t.type}`,style:{animation:"progressBarr 5s linear forwards",animationPlayState:l?"paused":"running"}}):null]})},L=t=>a.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",...t,children:a.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=>a.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:a.jsx("g",{id:"Curved/Basic-actions-and-state",children:a.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=>a.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",...t,children:a.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"})});
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"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/toast",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "toast component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/toast.umd.js",
@@ -12,6 +12,10 @@
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
+ },
15
19
  "keywords": [],
16
20
  "license": "ISC",
17
21
  "type": "module",
@@ -33,9 +37,5 @@
33
37
  "react-dom": "^18.2.0",
34
38
  "@types/react": "^18.2.55",
35
39
  "@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
+ }