@pittorica/toast-react 0.25.0 → 0.26.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 (11) hide show
  1. package/README.md +20 -2
  2. package/dist/Toast.d.ts +2 -0
  3. package/dist/Toast.d.ts.map +1 -1
  4. package/dist/index.d.ts +1 -2
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +298 -236
  7. package/package.json +12 -11
  8. package/dist/Toast.stories.d.ts +0 -5
  9. package/dist/Toast.stories.d.ts.map +0 -1
  10. package/dist/Toast.test.d.ts +0 -5
  11. package/dist/Toast.test.d.ts.map +0 -1
package/README.md CHANGED
@@ -11,8 +11,26 @@ npm install @pittorica/toast-react
11
11
  ## Usage
12
12
 
13
13
  ```jsx
14
- import { Toast } from '@pittorica/toast-react';
15
- // TODO: Add usage example
14
+ import { toast, ToastProvider } from '@pittorica/toast-react';
15
+
16
+ function MyApp() {
17
+ return (
18
+ <>
19
+ <ToastProvider />
20
+ <button
21
+ onClick={() =>
22
+ toast({
23
+ title: 'Success!',
24
+ description: 'Action completed.',
25
+ color: 'teal',
26
+ })
27
+ }
28
+ >
29
+ Show Toast
30
+ </button>
31
+ </>
32
+ );
33
+ }
16
34
  ```
17
35
 
18
36
  ## License
package/dist/Toast.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  import { type ReactNode } from 'react';
2
+ import { type PittoricaColor } from '@pittorica/text-react';
2
3
  export interface ToastData {
3
4
  id: string;
4
5
  title: ReactNode;
5
6
  description?: ReactNode;
6
7
  duration?: number;
8
+ color?: PittoricaColor;
7
9
  }
8
10
  /**
9
11
  * Dispatches a global toast notification.
package/dist/Toast.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAIhD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,0CAuEzB,CAAC"}
1
+ {"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,uBAAuB,CAAC;AAGlE,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAID;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAIhD,CAAC;AAgFF;;GAEG;AACH,eAAO,MAAM,aAAa,0CA4DzB,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
- export type { ToastData } from './Toast.js';
2
- export { toast, ToastProvider } from './Toast.js';
1
+ export * from './Toast.js';
3
2
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
package/dist/index.js CHANGED
@@ -1,13 +1,13 @@
1
- import { jsx as $, jsxs as C } from "react/jsx-runtime";
2
- import { forwardRef as X, createElement as L, useState as O, useRef as V, useCallback as D, useEffect as G } from "react";
3
- import { createPortal as H } from "react-dom";
1
+ import { jsx as g, jsxs as j } from "react/jsx-runtime";
2
+ import { forwardRef as F, createElement as W, useState as C, useRef as G, useEffect as S, useCallback as H } from "react";
3
+ import { createPortal as J } from "react-dom";
4
4
  /**
5
5
  * @license @tabler/icons-react v3.36.1 - MIT
6
6
  *
7
7
  * This source code is licensed under the MIT license.
8
8
  * See the LICENSE file in the root directory of this source tree.
9
9
  */
10
- var J = {
10
+ var K = {
11
11
  outline: {
12
12
  xmlns: "http://www.w3.org/2000/svg",
13
13
  width: 24,
@@ -34,23 +34,24 @@ var J = {
34
34
  * This source code is licensed under the MIT license.
35
35
  * See the LICENSE file in the root directory of this source tree.
36
36
  */
37
- const K = (r, e, t, i) => {
38
- const o = X(
39
- ({ color: c = "currentColor", size: n = 24, stroke: p = 2, title: s, className: l, children: d, ...g }, f) => L(
37
+ const Q = (i, e, t, r) => {
38
+ const o = F(
39
+ ({ color: p = "currentColor", size: s = 24, stroke: n = 2, title: c, className: d, children: l, ...m }, v) => W(
40
40
  "svg",
41
41
  {
42
- ref: f,
43
- ...J[r],
44
- width: n,
45
- height: n,
46
- className: ["tabler-icon", `tabler-icon-${e}`, l].join(" "),
47
- fill: c,
48
- ...g
42
+ ref: v,
43
+ ...K[i],
44
+ width: s,
45
+ height: s,
46
+ className: ["tabler-icon", `tabler-icon-${e}`, d].join(" "),
47
+ strokeWidth: n,
48
+ stroke: p,
49
+ ...m
49
50
  },
50
51
  [
51
- s && L("title", { key: "svg-title" }, s),
52
- ...i.map(([v, u]) => L(v, u)),
53
- ...Array.isArray(d) ? d : [d]
52
+ c && W("title", { key: "svg-title" }, c),
53
+ ...r.map(([f, h]) => W(f, h)),
54
+ ...Array.isArray(l) ? l : [l]
54
55
  ]
55
56
  )
56
57
  );
@@ -62,249 +63,255 @@ const K = (r, e, t, i) => {
62
63
  * This source code is licensed under the MIT license.
63
64
  * See the LICENSE file in the root directory of this source tree.
64
65
  */
65
- const Q = [["path", { d: "M12 2l.324 .001l.318 .004l.616 .017l.299 .013l.579 .034l.553 .046c4.785 .464 6.732 2.411 7.196 7.196l.046 .553l.034 .579c.005 .098 .01 .198 .013 .299l.017 .616l.005 .642l-.005 .642l-.017 .616l-.013 .299l-.034 .579l-.046 .553c-.464 4.785 -2.411 6.732 -7.196 7.196l-.553 .046l-.579 .034c-.098 .005 -.198 .01 -.299 .013l-.616 .017l-.642 .005l-.642 -.005l-.616 -.017l-.299 -.013l-.579 -.034l-.553 -.046c-4.785 -.464 -6.732 -2.411 -7.196 -7.196l-.046 -.553l-.034 -.579a28.058 28.058 0 0 1 -.013 -.299l-.017 -.616c-.003 -.21 -.005 -.424 -.005 -.642l.001 -.324l.004 -.318l.017 -.616l.013 -.299l.034 -.579l.046 -.553c.464 -4.785 2.411 -6.732 7.196 -7.196l.553 -.046l.579 -.034c.098 -.005 .198 -.01 .299 -.013l.616 -.017c.21 -.003 .424 -.005 .642 -.005zm-1.489 7.14a1 1 0 0 0 -1.218 1.567l1.292 1.293l-1.292 1.293l-.083 .094a1 1 0 0 0 1.497 1.32l1.293 -1.292l1.293 1.292l.094 .083a1 1 0 0 0 1.32 -1.497l-1.292 -1.293l1.292 -1.293l.083 -.094a1 1 0 0 0 -1.497 -1.32l-1.293 1.292l-1.293 -1.292l-.094 -.083z", fill: "currentColor", key: "svg-0", strokeWidth: "0" }]], U = K("filled", "square-rounded-x-filled", "SquareRoundedXFilled", Q);
66
- function S(r) {
67
- var e, t, i = "";
68
- if (typeof r == "string" || typeof r == "number") i += r;
69
- else if (typeof r == "object") if (Array.isArray(r)) {
70
- var o = r.length;
71
- for (e = 0; e < o; e++) r[e] && (t = S(r[e])) && (i && (i += " "), i += t);
72
- } else for (t in r) r[t] && (i && (i += " "), i += t);
73
- return i;
66
+ const U = [["path", { d: "M18 6l-12 12", key: "svg-0" }], ["path", { d: "M6 6l12 12", key: "svg-1" }]], Y = Q("outline", "x", "X", U);
67
+ function _(i) {
68
+ var e, t, r = "";
69
+ if (typeof i == "string" || typeof i == "number") r += i;
70
+ else if (typeof i == "object") if (Array.isArray(i)) {
71
+ var o = i.length;
72
+ for (e = 0; e < o; e++) i[e] && (t = _(i[e])) && (r && (r += " "), r += t);
73
+ } else for (t in i) i[t] && (r && (r += " "), r += t);
74
+ return r;
74
75
  }
75
- function Y() {
76
- for (var r, e, t = 0, i = "", o = arguments.length; t < o; t++) (r = arguments[t]) && (e = S(r)) && (i && (i += " "), i += e);
77
- return i;
76
+ function Z() {
77
+ for (var i, e, t = 0, r = "", o = arguments.length; t < o; t++) (i = arguments[t]) && (e = _(i)) && (r && (r += " "), r += e);
78
+ return r;
78
79
  }
79
- const k = ({
80
- as: r,
80
+ const L = ({
81
+ as: i,
81
82
  children: e,
82
83
  display: t,
83
- m: i,
84
+ m: r,
84
85
  mt: o,
85
- mr: c,
86
- mb: n,
87
- ml: p,
88
- mx: s,
89
- my: l,
90
- p: d,
91
- pt: g,
92
- pr: f,
93
- pb: v,
94
- pl: u,
95
- px: m,
96
- py: h,
86
+ mr: p,
87
+ mb: s,
88
+ ml: n,
89
+ mx: c,
90
+ my: d,
91
+ p: l,
92
+ pt: m,
93
+ pr: v,
94
+ pb: f,
95
+ pl: h,
96
+ px: u,
97
+ py: $,
97
98
  width: y,
98
99
  height: b,
99
100
  position: x,
100
101
  style: w,
101
102
  className: T,
102
103
  disabled: N,
103
- ...A
104
+ required: B,
105
+ ...k
104
106
  }) => {
105
- const B = r || "div", a = {};
106
- t && (a.display = t), y && (a.width = y), b && (a.height = b), x && (a.position = x), i && (a.margin = `var(--pittorica-space-${i})`), o && (a.marginTop = `var(--pittorica-space-${o})`), c && (a.marginRight = `var(--pittorica-space-${c})`), n && (a.marginBottom = `var(--pittorica-space-${n})`), p && (a.marginLeft = `var(--pittorica-space-${p})`), s && (a.marginLeft = `var(--pittorica-space-${s})`, a.marginRight = `var(--pittorica-space-${s})`), l && (a.marginTop = `var(--pittorica-space-${l})`, a.marginBottom = `var(--pittorica-space-${l})`), d && (a.padding = `var(--pittorica-space-${d})`), g && (a.paddingTop = `var(--pittorica-space-${g})`), f && (a.paddingRight = `var(--pittorica-space-${f})`), v && (a.paddingBottom = `var(--pittorica-space-${v})`), u && (a.paddingLeft = `var(--pittorica-space-${u})`), m && (a.paddingLeft = `var(--pittorica-space-${m})`, a.paddingRight = `var(--pittorica-space-${m})`), h && (a.paddingTop = `var(--pittorica-space-${h})`, a.paddingBottom = `var(--pittorica-space-${h})`);
107
+ const A = i || "div", a = {};
108
+ t && (a.display = t), y && (a.width = y), b && (a.height = b), x && (a.position = x), r && (a.margin = `var(--pittorica-space-${r})`), o && (a.marginTop = `var(--pittorica-space-${o})`), p && (a.marginRight = `var(--pittorica-space-${p})`), s && (a.marginBottom = `var(--pittorica-space-${s})`), n && (a.marginLeft = `var(--pittorica-space-${n})`), c && (a.marginLeft = `var(--pittorica-space-${c})`, a.marginRight = `var(--pittorica-space-${c})`), d && (a.marginTop = `var(--pittorica-space-${d})`, a.marginBottom = `var(--pittorica-space-${d})`), l && (a.padding = `var(--pittorica-space-${l})`), m && (a.paddingTop = `var(--pittorica-space-${m})`), v && (a.paddingRight = `var(--pittorica-space-${v})`), f && (a.paddingBottom = `var(--pittorica-space-${f})`), h && (a.paddingLeft = `var(--pittorica-space-${h})`), u && (a.paddingLeft = `var(--pittorica-space-${u})`, a.paddingRight = `var(--pittorica-space-${u})`), $ && (a.paddingTop = `var(--pittorica-space-${$})`, a.paddingBottom = `var(--pittorica-space-${$})`);
107
109
  const R = {
108
110
  ...w,
109
111
  ...a
110
112
  };
111
- return /* @__PURE__ */ $(
112
- B,
113
+ return /* @__PURE__ */ g(
114
+ A,
113
115
  {
114
- className: Y("pittorica-box", T),
116
+ className: Z("pittorica-box", T),
115
117
  style: R,
116
118
  disabled: N,
117
- ...A,
119
+ required: B,
120
+ ...k,
118
121
  children: e
119
122
  }
120
123
  );
121
124
  };
122
- k.displayName = "Box";
123
- function W(r) {
124
- var e, t, i = "";
125
- if (typeof r == "string" || typeof r == "number") i += r;
126
- else if (typeof r == "object") if (Array.isArray(r)) {
127
- var o = r.length;
128
- for (e = 0; e < o; e++) r[e] && (t = W(r[e])) && (i && (i += " "), i += t);
129
- } else for (t in r) r[t] && (i && (i += " "), i += t);
130
- return i;
125
+ L.displayName = "Box";
126
+ function I(i) {
127
+ var e, t, r = "";
128
+ if (typeof i == "string" || typeof i == "number") r += i;
129
+ else if (typeof i == "object") if (Array.isArray(i)) {
130
+ var o = i.length;
131
+ for (e = 0; e < o; e++) i[e] && (t = I(i[e])) && (r && (r += " "), r += t);
132
+ } else for (t in i) i[t] && (r && (r += " "), r += t);
133
+ return r;
131
134
  }
132
- function Z() {
133
- for (var r, e, t = 0, i = "", o = arguments.length; t < o; t++) (r = arguments[t]) && (e = W(r)) && (i && (i += " "), i += e);
134
- return i;
135
+ function tt() {
136
+ for (var i, e, t = 0, r = "", o = arguments.length; t < o; t++) (i = arguments[t]) && (e = I(i)) && (r && (r += " "), r += e);
137
+ return r;
135
138
  }
136
- function q(r) {
137
- var e, t, i = "";
138
- if (typeof r == "string" || typeof r == "number") i += r;
139
- else if (typeof r == "object") if (Array.isArray(r)) {
140
- var o = r.length;
141
- for (e = 0; e < o; e++) r[e] && (t = q(r[e])) && (i && (i += " "), i += t);
142
- } else for (t in r) r[t] && (i && (i += " "), i += t);
143
- return i;
139
+ function M(i) {
140
+ var e, t, r = "";
141
+ if (typeof i == "string" || typeof i == "number") r += i;
142
+ else if (typeof i == "object") if (Array.isArray(i)) {
143
+ var o = i.length;
144
+ for (e = 0; e < o; e++) i[e] && (t = M(i[e])) && (r && (r += " "), r += t);
145
+ } else for (t in i) i[t] && (r && (r += " "), r += t);
146
+ return r;
144
147
  }
145
- function tt() {
146
- for (var r, e, t = 0, i = "", o = arguments.length; t < o; t++) (r = arguments[t]) && (e = q(r)) && (i && (i += " "), i += e);
147
- return i;
148
+ function it() {
149
+ for (var i, e, t = 0, r = "", o = arguments.length; t < o; t++) (i = arguments[t]) && (e = M(i)) && (r && (r += " "), r += e);
150
+ return r;
148
151
  }
149
- const I = ({
150
- as: r,
152
+ const P = ({
153
+ as: i,
151
154
  children: e,
152
155
  display: t,
153
- m: i,
156
+ m: r,
154
157
  mt: o,
155
- mr: c,
156
- mb: n,
157
- ml: p,
158
- mx: s,
159
- my: l,
160
- p: d,
161
- pt: g,
162
- pr: f,
163
- pb: v,
164
- pl: u,
165
- px: m,
166
- py: h,
158
+ mr: p,
159
+ mb: s,
160
+ ml: n,
161
+ mx: c,
162
+ my: d,
163
+ p: l,
164
+ pt: m,
165
+ pr: v,
166
+ pb: f,
167
+ pl: h,
168
+ px: u,
169
+ py: $,
167
170
  width: y,
168
171
  height: b,
169
172
  position: x,
170
173
  style: w,
171
174
  className: T,
172
175
  disabled: N,
173
- ...A
176
+ required: B,
177
+ ...k
174
178
  }) => {
175
- const B = r || "div", a = {};
176
- t && (a.display = t), y && (a.width = y), b && (a.height = b), x && (a.position = x), i && (a.margin = `var(--pittorica-space-${i})`), o && (a.marginTop = `var(--pittorica-space-${o})`), c && (a.marginRight = `var(--pittorica-space-${c})`), n && (a.marginBottom = `var(--pittorica-space-${n})`), p && (a.marginLeft = `var(--pittorica-space-${p})`), s && (a.marginLeft = `var(--pittorica-space-${s})`, a.marginRight = `var(--pittorica-space-${s})`), l && (a.marginTop = `var(--pittorica-space-${l})`, a.marginBottom = `var(--pittorica-space-${l})`), d && (a.padding = `var(--pittorica-space-${d})`), g && (a.paddingTop = `var(--pittorica-space-${g})`), f && (a.paddingRight = `var(--pittorica-space-${f})`), v && (a.paddingBottom = `var(--pittorica-space-${v})`), u && (a.paddingLeft = `var(--pittorica-space-${u})`), m && (a.paddingLeft = `var(--pittorica-space-${m})`, a.paddingRight = `var(--pittorica-space-${m})`), h && (a.paddingTop = `var(--pittorica-space-${h})`, a.paddingBottom = `var(--pittorica-space-${h})`);
179
+ const A = i || "div", a = {};
180
+ t && (a.display = t), y && (a.width = y), b && (a.height = b), x && (a.position = x), r && (a.margin = `var(--pittorica-space-${r})`), o && (a.marginTop = `var(--pittorica-space-${o})`), p && (a.marginRight = `var(--pittorica-space-${p})`), s && (a.marginBottom = `var(--pittorica-space-${s})`), n && (a.marginLeft = `var(--pittorica-space-${n})`), c && (a.marginLeft = `var(--pittorica-space-${c})`, a.marginRight = `var(--pittorica-space-${c})`), d && (a.marginTop = `var(--pittorica-space-${d})`, a.marginBottom = `var(--pittorica-space-${d})`), l && (a.padding = `var(--pittorica-space-${l})`), m && (a.paddingTop = `var(--pittorica-space-${m})`), v && (a.paddingRight = `var(--pittorica-space-${v})`), f && (a.paddingBottom = `var(--pittorica-space-${f})`), h && (a.paddingLeft = `var(--pittorica-space-${h})`), u && (a.paddingLeft = `var(--pittorica-space-${u})`, a.paddingRight = `var(--pittorica-space-${u})`), $ && (a.paddingTop = `var(--pittorica-space-${$})`, a.paddingBottom = `var(--pittorica-space-${$})`);
177
181
  const R = {
178
182
  ...w,
179
183
  ...a
180
184
  };
181
- return /* @__PURE__ */ $(
182
- B,
185
+ return /* @__PURE__ */ g(
186
+ A,
183
187
  {
184
- className: tt("pittorica-box", T),
188
+ className: it("pittorica-box", T),
185
189
  style: R,
186
190
  disabled: N,
187
- ...A,
191
+ required: B,
192
+ ...k,
188
193
  children: e
189
194
  }
190
195
  );
191
196
  };
192
- I.displayName = "Box";
193
- const _ = ({
194
- children: r,
197
+ P.displayName = "Box";
198
+ const X = ({
199
+ children: i,
195
200
  variant: e = "filled",
196
- color: t = "indigo",
197
- size: i = "3",
201
+ color: t = "source",
202
+ size: r = "3",
198
203
  className: o,
199
- style: c,
200
- as: n,
201
- ...p
204
+ style: p,
205
+ as: s,
206
+ ...n
202
207
  }) => {
203
- const s = t !== "inherit" && !(t != null && t.startsWith("#")) && !(t != null && t.startsWith("rgb")), l = {
204
- ...c,
205
- "--pittorica-source-color": s ? `var(--pittorica-${t}-9)` : t,
208
+ const c = t !== "inherit" && !(t != null && t.startsWith("#")) && !(t != null && t.startsWith("rgb")), d = {
209
+ ...p,
210
+ "--pittorica-source-color": c ? `var(--pittorica-${t}-9)` : t,
206
211
  "--pittorica-on-source-color": "#ffffff"
207
- }, d = n || (p.href ? "a" : "button");
208
- return /* @__PURE__ */ $(
209
- I,
212
+ }, l = s || (n.href ? "a" : "button");
213
+ return /* @__PURE__ */ g(
214
+ P,
210
215
  {
211
- as: d,
212
- className: Z(
216
+ as: l,
217
+ className: tt(
213
218
  "pittorica-icon-button",
214
219
  `pittorica-icon-button--${e}`,
215
- `pittorica-icon-button--${i}`,
220
+ `pittorica-icon-button--${r}`,
216
221
  o
217
222
  ),
218
- style: l,
219
- ...p,
220
- children: r
223
+ style: d,
224
+ ...n,
225
+ children: i
221
226
  }
222
227
  );
223
228
  };
224
- _.displayName = "IconButton";
225
- function F(r) {
226
- var e, t, i = "";
227
- if (typeof r == "string" || typeof r == "number") i += r;
228
- else if (typeof r == "object") if (Array.isArray(r)) {
229
- var o = r.length;
230
- for (e = 0; e < o; e++) r[e] && (t = F(r[e])) && (i && (i += " "), i += t);
231
- } else for (t in r) r[t] && (i && (i += " "), i += t);
232
- return i;
229
+ X.displayName = "IconButton";
230
+ function O(i) {
231
+ var e, t, r = "";
232
+ if (typeof i == "string" || typeof i == "number") r += i;
233
+ else if (typeof i == "object") if (Array.isArray(i)) {
234
+ var o = i.length;
235
+ for (e = 0; e < o; e++) i[e] && (t = O(i[e])) && (r && (r += " "), r += t);
236
+ } else for (t in i) i[t] && (r && (r += " "), r += t);
237
+ return r;
233
238
  }
234
- function E() {
235
- for (var r, e, t = 0, i = "", o = arguments.length; t < o; t++) (r = arguments[t]) && (e = F(r)) && (i && (i += " "), i += e);
236
- return i;
239
+ function q() {
240
+ for (var i, e, t = 0, r = "", o = arguments.length; t < o; t++) (i = arguments[t]) && (e = O(i)) && (r && (r += " "), r += e);
241
+ return r;
237
242
  }
238
- function M(r) {
239
- var e, t, i = "";
240
- if (typeof r == "string" || typeof r == "number") i += r;
241
- else if (typeof r == "object") if (Array.isArray(r)) {
242
- var o = r.length;
243
- for (e = 0; e < o; e++) r[e] && (t = M(r[e])) && (i && (i += " "), i += t);
244
- } else for (t in r) r[t] && (i && (i += " "), i += t);
245
- return i;
243
+ function V(i) {
244
+ var e, t, r = "";
245
+ if (typeof i == "string" || typeof i == "number") r += i;
246
+ else if (typeof i == "object") if (Array.isArray(i)) {
247
+ var o = i.length;
248
+ for (e = 0; e < o; e++) i[e] && (t = V(i[e])) && (r && (r += " "), r += t);
249
+ } else for (t in i) i[t] && (r && (r += " "), r += t);
250
+ return r;
246
251
  }
247
- function it() {
248
- for (var r, e, t = 0, i = "", o = arguments.length; t < o; t++) (r = arguments[t]) && (e = M(r)) && (i && (i += " "), i += e);
249
- return i;
252
+ function rt() {
253
+ for (var i, e, t = 0, r = "", o = arguments.length; t < o; t++) (i = arguments[t]) && (e = V(i)) && (r && (r += " "), r += e);
254
+ return r;
250
255
  }
251
- const P = ({
252
- as: r,
256
+ const D = ({
257
+ as: i,
253
258
  children: e,
254
259
  display: t,
255
- m: i,
260
+ m: r,
256
261
  mt: o,
257
- mr: c,
258
- mb: n,
259
- ml: p,
260
- mx: s,
261
- my: l,
262
- p: d,
263
- pt: g,
264
- pr: f,
265
- pb: v,
266
- pl: u,
267
- px: m,
268
- py: h,
262
+ mr: p,
263
+ mb: s,
264
+ ml: n,
265
+ mx: c,
266
+ my: d,
267
+ p: l,
268
+ pt: m,
269
+ pr: v,
270
+ pb: f,
271
+ pl: h,
272
+ px: u,
273
+ py: $,
269
274
  width: y,
270
275
  height: b,
271
276
  position: x,
272
277
  style: w,
273
278
  className: T,
274
279
  disabled: N,
275
- ...A
280
+ required: B,
281
+ ...k
276
282
  }) => {
277
- const B = r || "div", a = {};
278
- t && (a.display = t), y && (a.width = y), b && (a.height = b), x && (a.position = x), i && (a.margin = `var(--pittorica-space-${i})`), o && (a.marginTop = `var(--pittorica-space-${o})`), c && (a.marginRight = `var(--pittorica-space-${c})`), n && (a.marginBottom = `var(--pittorica-space-${n})`), p && (a.marginLeft = `var(--pittorica-space-${p})`), s && (a.marginLeft = `var(--pittorica-space-${s})`, a.marginRight = `var(--pittorica-space-${s})`), l && (a.marginTop = `var(--pittorica-space-${l})`, a.marginBottom = `var(--pittorica-space-${l})`), d && (a.padding = `var(--pittorica-space-${d})`), g && (a.paddingTop = `var(--pittorica-space-${g})`), f && (a.paddingRight = `var(--pittorica-space-${f})`), v && (a.paddingBottom = `var(--pittorica-space-${v})`), u && (a.paddingLeft = `var(--pittorica-space-${u})`), m && (a.paddingLeft = `var(--pittorica-space-${m})`, a.paddingRight = `var(--pittorica-space-${m})`), h && (a.paddingTop = `var(--pittorica-space-${h})`, a.paddingBottom = `var(--pittorica-space-${h})`);
283
+ const A = i || "div", a = {};
284
+ t && (a.display = t), y && (a.width = y), b && (a.height = b), x && (a.position = x), r && (a.margin = `var(--pittorica-space-${r})`), o && (a.marginTop = `var(--pittorica-space-${o})`), p && (a.marginRight = `var(--pittorica-space-${p})`), s && (a.marginBottom = `var(--pittorica-space-${s})`), n && (a.marginLeft = `var(--pittorica-space-${n})`), c && (a.marginLeft = `var(--pittorica-space-${c})`, a.marginRight = `var(--pittorica-space-${c})`), d && (a.marginTop = `var(--pittorica-space-${d})`, a.marginBottom = `var(--pittorica-space-${d})`), l && (a.padding = `var(--pittorica-space-${l})`), m && (a.paddingTop = `var(--pittorica-space-${m})`), v && (a.paddingRight = `var(--pittorica-space-${v})`), f && (a.paddingBottom = `var(--pittorica-space-${f})`), h && (a.paddingLeft = `var(--pittorica-space-${h})`), u && (a.paddingLeft = `var(--pittorica-space-${u})`, a.paddingRight = `var(--pittorica-space-${u})`), $ && (a.paddingTop = `var(--pittorica-space-${$})`, a.paddingBottom = `var(--pittorica-space-${$})`);
279
285
  const R = {
280
286
  ...w,
281
287
  ...a
282
288
  };
283
- return /* @__PURE__ */ $(
284
- B,
289
+ return /* @__PURE__ */ g(
290
+ A,
285
291
  {
286
- className: it("pittorica-box", T),
292
+ className: rt("pittorica-box", T),
287
293
  style: R,
288
294
  disabled: N,
289
- ...A,
295
+ required: B,
296
+ ...k,
290
297
  children: e
291
298
  }
292
299
  );
293
300
  };
294
- P.displayName = "Box";
301
+ D.displayName = "Box";
295
302
  const z = ({
296
- children: r,
303
+ children: i,
297
304
  as: e,
298
305
  size: t,
299
- weight: i = "regular",
306
+ weight: r = "regular",
300
307
  align: o,
301
- truncate: c = !1,
302
- color: n,
303
- className: p,
304
- style: s,
305
- ...l
308
+ truncate: p = !1,
309
+ color: s,
310
+ className: n,
311
+ style: c,
312
+ ...d
306
313
  }) => {
307
- const d = e || "span", g = (n == null ? void 0 : n.startsWith("#")) || (n == null ? void 0 : n.startsWith("rgb")) || (n == null ? void 0 : n.startsWith("hsl")), f = /* @__PURE__ */ new Set([
314
+ const l = e || "span", m = (s == null ? void 0 : s.startsWith("#")) || (s == null ? void 0 : s.startsWith("rgb")) || (s == null ? void 0 : s.startsWith("hsl")), v = /* @__PURE__ */ new Set([
308
315
  "danger",
309
316
  "success",
310
317
  "error",
@@ -316,100 +323,155 @@ const z = ({
316
323
  "slate",
317
324
  "blue",
318
325
  "red"
319
- ]), v = (() => {
320
- if (n)
321
- return n === "inherit" ? "inherit" : g ? n : f.has(n) ? `var(--pittorica-${n}-9)` : n;
322
- })(), u = t ? typeof t == "string" ? `pittorica-text--size-${t}` : E({
326
+ ]), f = (() => {
327
+ if (s)
328
+ return s === "inherit" ? "inherit" : m ? s : v.has(s) ? `var(--pittorica-${s}-9)` : s;
329
+ })(), h = t ? typeof t == "string" ? `pittorica-text--size-${t}` : q({
323
330
  [`pittorica-text--size-${t.initial}`]: t.initial,
324
331
  [`pittorica-text--xs-size-${t.xs}`]: t.xs,
325
332
  [`pittorica-text--sm-size-${t.sm}`]: t.sm,
326
333
  [`pittorica-text--md-size-${t.md}`]: t.md,
327
334
  [`pittorica-text--lg-size-${t.lg}`]: t.lg,
328
335
  [`pittorica-text--xl-size-${t.xl}`]: t.xl
329
- }) : null, m = {
330
- ...s,
336
+ }) : null, u = {
337
+ ...c,
331
338
  textAlign: o,
332
- color: v
339
+ color: f
333
340
  };
334
- return /* @__PURE__ */ $(
335
- P,
341
+ return /* @__PURE__ */ g(
342
+ D,
336
343
  {
337
- as: d,
338
- className: E(
344
+ as: l,
345
+ className: q(
339
346
  "pittorica-text",
340
- u,
341
- { "pittorica-text--truncate": c },
342
- p
347
+ h,
348
+ { "pittorica-text--truncate": p },
349
+ n
343
350
  ),
344
- "data-weight": i,
345
- style: m,
346
- ...l,
347
- children: r
351
+ "data-weight": r,
352
+ style: u,
353
+ ...d,
354
+ children: i
348
355
  }
349
356
  );
350
357
  };
351
358
  z.displayName = "Text";
352
- const j = "pittorica-toast", ot = (r) => {
353
- const e = Math.random().toString(36).slice(2, 9), t = new CustomEvent(j, { detail: { ...r, id: e } });
359
+ const at = ({
360
+ children: i,
361
+ sourceColor: e = "indigo",
362
+ appearance: t = "light",
363
+ radius: r = "medium",
364
+ className: o,
365
+ style: p,
366
+ id: s
367
+ }) => {
368
+ const n = e.startsWith("#") || e.startsWith("rgb"), c = {
369
+ id: s,
370
+ className: ["pittorica-theme", o].filter(Boolean).join(" "),
371
+ "data-source-color": n ? "custom" : e,
372
+ "data-appearance": t,
373
+ "data-radius": r,
374
+ style: {
375
+ ...p,
376
+ ...n ? { "--pittorica-source-color": e } : {}
377
+ }
378
+ };
379
+ return /* @__PURE__ */ g("div", { ...c, children: i });
380
+ }, E = "pittorica-toast", ct = (i) => {
381
+ const e = Math.random().toString(36).slice(2, 9), t = new CustomEvent(E, { detail: { ...i, id: e } });
354
382
  globalThis.dispatchEvent(t);
355
- }, nt = () => {
356
- const [r, e] = O([]), t = V(/* @__PURE__ */ new Set()), i = D((o) => {
357
- e((c) => c.filter((n) => n.id !== o));
383
+ }, et = ({
384
+ t: i,
385
+ onRemove: e
386
+ }) => {
387
+ const t = i.color || "slate", r = t !== "inherit" && !(t != null && t.startsWith("#")) && !(t != null && t.startsWith("rgb")), o = r ? `var(--pittorica-${t}-3)` : `color-mix(in srgb, ${t} 12%, var(--pittorica-white))`, p = r ? `var(--pittorica-${t}-11)` : `color-mix(in srgb, ${t} 80%, var(--pittorica-black))`, s = r ? `var(--pittorica-${t}-6)` : `color-mix(in srgb, ${t} 20%, transparent)`, n = i.duration || 3e3;
388
+ return /* @__PURE__ */ j(
389
+ L,
390
+ {
391
+ className: "pittorica-toast-root",
392
+ role: "status",
393
+ "aria-live": "polite",
394
+ style: {
395
+ "--_toast-bg": o,
396
+ "--_toast-text": p,
397
+ "--_toast-border": s
398
+ },
399
+ children: [
400
+ n > 0 && /* @__PURE__ */ g(
401
+ "div",
402
+ {
403
+ className: "pittorica-toast-progress",
404
+ style: {
405
+ animation: `pittorica-toast-progress-shrink ${n}ms linear forwards`
406
+ }
407
+ }
408
+ ),
409
+ /* @__PURE__ */ j(L, { className: "pittorica-toast-content", children: [
410
+ /* @__PURE__ */ g(z, { weight: "bold", style: { display: "block" }, children: i.title }),
411
+ i.description && /* @__PURE__ */ g(
412
+ z,
413
+ {
414
+ color: "inherit",
415
+ size: "2",
416
+ style: { display: "block", opacity: 0.8 },
417
+ children: i.description
418
+ }
419
+ )
420
+ ] }),
421
+ /* @__PURE__ */ g(
422
+ X,
423
+ {
424
+ variant: "text",
425
+ color: "inherit",
426
+ size: "1",
427
+ onClick: () => e(i.id),
428
+ "aria-label": "Close",
429
+ children: /* @__PURE__ */ g(Y, { size: 18 })
430
+ }
431
+ )
432
+ ]
433
+ }
434
+ );
435
+ }, pt = () => {
436
+ const [i, e] = C([]), [t, r] = C(!1), o = G(/* @__PURE__ */ new Set());
437
+ S(() => {
438
+ r(!0);
358
439
  }, []);
359
- return G(() => {
360
- const o = (c) => {
361
- const p = c.detail;
362
- if (e((s) => [...s, p]), p.duration !== 0) {
363
- const s = setTimeout(() => {
364
- i(p.id), t.current.delete(s);
365
- }, p.duration || 3e3);
366
- t.current.add(s);
440
+ const p = H((n) => {
441
+ e((c) => c.filter((d) => d.id !== n));
442
+ }, []);
443
+ if (S(() => {
444
+ if (!t) return;
445
+ const n = (c) => {
446
+ const l = c.detail;
447
+ if (e((m) => [...m, l]), l.duration !== 0) {
448
+ const m = setTimeout(() => {
449
+ p(l.id), o.current.delete(m);
450
+ }, l.duration || 3e3);
451
+ o.current.add(m);
367
452
  }
368
453
  };
369
- return globalThis.addEventListener(j, o), () => {
370
- globalThis.removeEventListener(j, o);
371
- for (const c of t.current) clearTimeout(c);
372
- t.current.clear();
454
+ return globalThis.addEventListener(E, n), () => {
455
+ globalThis.removeEventListener(E, n);
456
+ for (const c of o.current) clearTimeout(c);
457
+ o.current.clear();
373
458
  };
374
- }, [i]), typeof document > "u" ? null : H(
375
- /* @__PURE__ */ $(
376
- k,
459
+ }, [p, t]), !t || typeof document > "u") return null;
460
+ const s = document.documentElement.dataset.appearance || document.body.dataset.appearance || "light";
461
+ return J(
462
+ /* @__PURE__ */ g(
463
+ L,
377
464
  {
378
465
  className: "pittorica-toast-viewport",
379
466
  role: "region",
380
467
  "aria-label": "Notifications",
381
- children: r.map((o) => /* @__PURE__ */ C(
382
- k,
383
- {
384
- className: "pittorica-toast-root",
385
- role: "status",
386
- "aria-live": "polite",
387
- children: [
388
- /* @__PURE__ */ C(k, { className: "pittorica-toast-content", children: [
389
- /* @__PURE__ */ $(z, { weight: "bold", style: { display: "block" }, children: o.title }),
390
- o.description && /* @__PURE__ */ $(z, { color: "slate", style: { display: "block" }, children: o.description })
391
- ] }),
392
- /* @__PURE__ */ $(
393
- _,
394
- {
395
- variant: "text",
396
- color: "slate",
397
- size: "1",
398
- onClick: () => i(o.id),
399
- "aria-label": "Close",
400
- children: /* @__PURE__ */ $(U, { size: 18 })
401
- }
402
- )
403
- ]
404
- },
405
- o.id
406
- ))
468
+ children: /* @__PURE__ */ g(at, { appearance: s, children: i.map((n) => /* @__PURE__ */ g(et, { t: n, onRemove: p }, n.id)) })
407
469
  }
408
470
  ),
409
471
  document.body
410
472
  );
411
473
  };
412
474
  export {
413
- nt as ToastProvider,
414
- ot as toast
475
+ pt as ToastProvider,
476
+ ct as toast
415
477
  };
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@pittorica/toast-react",
3
- "version": "0.25.0",
3
+ "version": "0.26.0",
4
+ "homepage": "https://pittorica.dcdavidev.me",
4
5
  "type": "module",
5
6
  "main": "./dist/index.js",
6
7
  "module": "./dist/index.js",
@@ -11,9 +12,9 @@
11
12
  "dependencies": {
12
13
  "@tabler/icons-react": "^3.36.1",
13
14
  "clsx": "^2.1.1",
14
- "@pittorica/box-react": "0.25.0",
15
- "@pittorica/icon-button-react": "0.25.0",
16
- "@pittorica/text-react": "0.25.0"
15
+ "@pittorica/box-react": "0.26.0",
16
+ "@pittorica/text-react": "0.26.0",
17
+ "@pittorica/icon-button-react": "0.26.0"
17
18
  },
18
19
  "devDependencies": {
19
20
  "@testing-library/jest-dom": "^6.9.1",
@@ -23,12 +24,12 @@
23
24
  "@vitejs/plugin-react": "^4.0.0",
24
25
  "jsdom": "^22.0.0",
25
26
  "typescript": "^5.0.0",
26
- "vite": "^5.0.0",
27
- "vitest": "^2.1.9",
28
- "@pittorica/flex-react": "0.25.0",
29
- "@pittorica/button-react": "0.25.0",
30
- "@pittorica/theme-react": "0.25.0",
31
- "pittorica": "0.25.0"
27
+ "vite": "^6.4.1",
28
+ "vitest": "^3.2.4",
29
+ "@pittorica/flex-react": "0.26.0",
30
+ "@pittorica/button-react": "0.26.0",
31
+ "@pittorica/theme-react": "0.26.0",
32
+ "pittorica": "0.26.0"
32
33
  },
33
34
  "peerDependencies": {
34
35
  "react": ">=19",
@@ -38,7 +39,7 @@
38
39
  "build": "npm run clean && npm run build:js && npm run build:types",
39
40
  "build:js": "vite build",
40
41
  "build:types": "tsc -p tsconfig.json",
41
- "clean": "rm -rf dist",
42
+ "clean": "rm -rf dist *.tsbuildinfo",
42
43
  "test": "vitest run",
43
44
  "test:watch": "vitest"
44
45
  }
package/dist/Toast.stories.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- declare const meta: Meta;
3
- export default meta;
4
- export declare const Interactive: StoryObj;
5
- //# sourceMappingURL=Toast.stories.d.ts.map
package/dist/Toast.stories.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../src/Toast.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI,EAAE,IAUX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,WAAW,EAAE,QA6BzB,CAAC"}
package/dist/Toast.test.d.ts DELETED
@@ -1,5 +0,0 @@
1
- /**
2
- * @vitest-environment jsdom
3
- */
4
- import '@testing-library/jest-dom';
5
- //# sourceMappingURL=Toast.test.d.ts.map
package/dist/Toast.test.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Toast.test.d.ts","sourceRoot":"","sources":["../src/Toast.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}