@pittorica/toast-react 0.24.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 +342 -310
  7. package/package.json +12 -12
  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,5 +1,5 @@
1
- import { jsx as y, jsxs as j } from "react/jsx-runtime";
2
- import { forwardRef as O, createElement as F, useState as V, useRef as D, useCallback as G, useEffect as H } from "react";
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
3
  import { createPortal as J } from "react-dom";
4
4
  /**
5
5
  * @license @tabler/icons-react v3.36.1 - MIT
@@ -34,27 +34,28 @@ var K = {
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 Q = (e, i, r, t) => {
38
- const o = O(
39
- ({ color: n = "currentColor", size: c = 24, stroke: l = 2, title: s, className: p, children: d, ...m }, f) => F(
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
- ...K[e],
44
- width: c,
45
- height: c,
46
- className: ["tabler-icon", `tabler-icon-${i}`, p].join(" "),
47
- fill: n,
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,
48
49
  ...m
49
50
  },
50
51
  [
51
- s && F("title", { key: "svg-title" }, s),
52
- ...t.map(([g, u]) => F(g, 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
  );
57
- return o.displayName = `${r}`, o;
58
+ return o.displayName = `${t}`, o;
58
59
  };
59
60
  /**
60
61
  * @license @tabler/icons-react v3.36.1 - MIT
@@ -62,284 +63,255 @@ const Q = (e, i, r, t) => {
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 U = [["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" }]], Y = Q("filled", "square-rounded-x-filled", "SquareRoundedXFilled", U);
66
- function W(e) {
67
- var i, r, t = "";
68
- if (typeof e == "string" || typeof e == "number") t += e;
69
- else if (typeof e == "object") if (Array.isArray(e)) {
70
- var o = e.length;
71
- for (i = 0; i < o; i++) e[i] && (r = W(e[i])) && (t && (t += " "), t += r);
72
- } else for (r in e) e[r] && (t && (t += " "), t += r);
73
- return t;
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
76
  function Z() {
76
- for (var e, i, r = 0, t = "", o = arguments.length; r < o; r++) (e = arguments[r]) && (i = W(e)) && (t && (t += " "), t += i);
77
- return t;
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 E = ({
80
- ref: e,
81
- as: i = "div",
82
- children: r,
80
+ const L = ({
81
+ as: i,
82
+ children: e,
83
83
  display: t,
84
- m: o,
85
- mt: n,
86
- mr: c,
87
- mb: l,
88
- ml: s,
89
- p,
90
- pt: d,
91
- pr: m,
84
+ m: r,
85
+ mt: o,
86
+ mr: p,
87
+ mb: s,
88
+ ml: n,
89
+ mx: c,
90
+ my: d,
91
+ p: l,
92
+ pt: m,
93
+ pr: v,
92
94
  pb: f,
93
- pl: g,
94
- width: u,
95
- height: h,
96
- position: v,
97
- style: b,
98
- className: $,
99
- href: w,
100
- target: N,
101
- rel: x,
102
- htmlFor: T,
103
- type: A,
104
- name: k,
105
- disabled: R,
106
- ...B
95
+ pl: h,
96
+ px: u,
97
+ py: $,
98
+ width: y,
99
+ height: b,
100
+ position: x,
101
+ style: w,
102
+ className: T,
103
+ disabled: N,
104
+ required: B,
105
+ ...k
107
106
  }) => {
108
- const a = {};
109
- t && (a.display = t), u && (a.width = u), h && (a.height = h), v && (a.position = v), o && (a.margin = `var(--pittorica-space-${o})`), n && (a.marginTop = `var(--pittorica-space-${n})`), c && (a.marginRight = `var(--pittorica-space-${c})`), l && (a.marginBottom = `var(--pittorica-space-${l})`), s && (a.marginLeft = `var(--pittorica-space-${s})`), p && (a.padding = `var(--pittorica-space-${p})`), d && (a.paddingTop = `var(--pittorica-space-${d})`), m && (a.paddingRight = `var(--pittorica-space-${m})`), f && (a.paddingBottom = `var(--pittorica-space-${f})`), g && (a.paddingLeft = `var(--pittorica-space-${g})`);
110
- const C = {
111
- ...b,
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-${$})`);
109
+ const R = {
110
+ ...w,
112
111
  ...a
113
112
  };
114
- return /* @__PURE__ */ y(
115
- i,
113
+ return /* @__PURE__ */ g(
114
+ A,
116
115
  {
117
- ref: e,
118
- className: Z("pittorica-box", $),
119
- style: C,
120
- href: w,
121
- target: N,
122
- rel: x,
123
- htmlFor: T,
124
- type: A,
125
- name: k,
126
- disabled: R,
127
- ...B,
128
- children: r
116
+ className: Z("pittorica-box", T),
117
+ style: R,
118
+ disabled: N,
119
+ required: B,
120
+ ...k,
121
+ children: e
129
122
  }
130
123
  );
131
124
  };
132
- E.displayName = "Box";
133
- function q(e) {
134
- var i, r, t = "";
135
- if (typeof e == "string" || typeof e == "number") t += e;
136
- else if (typeof e == "object") if (Array.isArray(e)) {
137
- var o = e.length;
138
- for (i = 0; i < o; i++) e[i] && (r = q(e[i])) && (t && (t += " "), t += r);
139
- } else for (r in e) e[r] && (t && (t += " "), t += r);
140
- return t;
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;
141
134
  }
142
135
  function tt() {
143
- for (var e, i, r = 0, t = "", o = arguments.length; r < o; r++) (e = arguments[r]) && (i = q(e)) && (t && (t += " "), t += i);
144
- return t;
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;
145
138
  }
146
- function z(e) {
147
- var i, r, t = "";
148
- if (typeof e == "string" || typeof e == "number") t += e;
149
- else if (typeof e == "object") if (Array.isArray(e)) {
150
- var o = e.length;
151
- for (i = 0; i < o; i++) e[i] && (r = z(e[i])) && (t && (t += " "), t += r);
152
- } else for (r in e) e[r] && (t && (t += " "), t += r);
153
- return t;
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;
154
147
  }
155
- function et() {
156
- for (var e, i, r = 0, t = "", o = arguments.length; r < o; r++) (e = arguments[r]) && (i = z(e)) && (t && (t += " "), t += i);
157
- return t;
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;
158
151
  }
159
- const _ = ({
160
- ref: e,
161
- as: i = "div",
162
- children: r,
152
+ const P = ({
153
+ as: i,
154
+ children: e,
163
155
  display: t,
164
- m: o,
165
- mt: n,
166
- mr: c,
167
- mb: l,
168
- ml: s,
169
- p,
170
- pt: d,
171
- pr: m,
156
+ m: r,
157
+ mt: o,
158
+ mr: p,
159
+ mb: s,
160
+ ml: n,
161
+ mx: c,
162
+ my: d,
163
+ p: l,
164
+ pt: m,
165
+ pr: v,
172
166
  pb: f,
173
- pl: g,
174
- width: u,
175
- height: h,
176
- position: v,
177
- style: b,
178
- className: $,
179
- href: w,
180
- target: N,
181
- rel: x,
182
- htmlFor: T,
183
- type: A,
184
- name: k,
185
- disabled: R,
186
- ...B
167
+ pl: h,
168
+ px: u,
169
+ py: $,
170
+ width: y,
171
+ height: b,
172
+ position: x,
173
+ style: w,
174
+ className: T,
175
+ disabled: N,
176
+ required: B,
177
+ ...k
187
178
  }) => {
188
- const a = {};
189
- t && (a.display = t), u && (a.width = u), h && (a.height = h), v && (a.position = v), o && (a.margin = `var(--pittorica-space-${o})`), n && (a.marginTop = `var(--pittorica-space-${n})`), c && (a.marginRight = `var(--pittorica-space-${c})`), l && (a.marginBottom = `var(--pittorica-space-${l})`), s && (a.marginLeft = `var(--pittorica-space-${s})`), p && (a.padding = `var(--pittorica-space-${p})`), d && (a.paddingTop = `var(--pittorica-space-${d})`), m && (a.paddingRight = `var(--pittorica-space-${m})`), f && (a.paddingBottom = `var(--pittorica-space-${f})`), g && (a.paddingLeft = `var(--pittorica-space-${g})`);
190
- const C = {
191
- ...b,
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-${$})`);
181
+ const R = {
182
+ ...w,
192
183
  ...a
193
184
  };
194
- return /* @__PURE__ */ y(
195
- i,
185
+ return /* @__PURE__ */ g(
186
+ A,
196
187
  {
197
- ref: e,
198
- className: et("pittorica-box", $),
199
- style: C,
200
- href: w,
201
- target: N,
202
- rel: x,
203
- htmlFor: T,
204
- type: A,
205
- name: k,
206
- disabled: R,
207
- ...B,
208
- children: r
188
+ className: it("pittorica-box", T),
189
+ style: R,
190
+ disabled: N,
191
+ required: B,
192
+ ...k,
193
+ children: e
209
194
  }
210
195
  );
211
196
  };
212
- _.displayName = "Box";
213
- const I = ({
214
- children: e,
215
- variant: i = "filled",
216
- color: r = "indigo",
217
- size: t = "3",
197
+ P.displayName = "Box";
198
+ const X = ({
199
+ children: i,
200
+ variant: e = "filled",
201
+ color: t = "source",
202
+ size: r = "3",
218
203
  className: o,
219
- style: n,
220
- ref: c,
221
- ...l
204
+ style: p,
205
+ as: s,
206
+ ...n
222
207
  }) => {
223
- const s = r !== "inherit" && !(r != null && r.startsWith("#")) && !(r != null && r.startsWith("rgb")), p = {
224
- ...n,
225
- "--pittorica-source-color": s ? `var(--pittorica-${r}-9)` : r,
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,
226
211
  "--pittorica-on-source-color": "#ffffff"
227
- };
228
- return /* @__PURE__ */ y(
229
- _,
212
+ }, l = s || (n.href ? "a" : "button");
213
+ return /* @__PURE__ */ g(
214
+ P,
230
215
  {
231
- ...l,
232
- as: l.href ? "a" : "button",
233
- ref: c,
216
+ as: l,
234
217
  className: tt(
235
218
  "pittorica-icon-button",
236
- `pittorica-icon-button--${i}`,
237
- `pittorica-icon-button--${t}`,
219
+ `pittorica-icon-button--${e}`,
220
+ `pittorica-icon-button--${r}`,
238
221
  o
239
222
  ),
240
- style: p,
241
- children: e
223
+ style: d,
224
+ ...n,
225
+ children: i
242
226
  }
243
227
  );
244
228
  };
245
- I.displayName = "IconButton";
246
- function M(e) {
247
- var i, r, t = "";
248
- if (typeof e == "string" || typeof e == "number") t += e;
249
- else if (typeof e == "object") if (Array.isArray(e)) {
250
- var o = e.length;
251
- for (i = 0; i < o; i++) e[i] && (r = M(e[i])) && (t && (t += " "), t += r);
252
- } else for (r in e) e[r] && (t && (t += " "), t += r);
253
- return t;
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;
254
238
  }
255
- function rt() {
256
- for (var e, i, r = 0, t = "", o = arguments.length; r < o; r++) (e = arguments[r]) && (i = M(e)) && (t && (t += " "), t += i);
257
- return t;
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;
258
242
  }
259
- function P(e) {
260
- var i, r, t = "";
261
- if (typeof e == "string" || typeof e == "number") t += e;
262
- else if (typeof e == "object") if (Array.isArray(e)) {
263
- var o = e.length;
264
- for (i = 0; i < o; i++) e[i] && (r = P(e[i])) && (t && (t += " "), t += r);
265
- } else for (r in e) e[r] && (t && (t += " "), t += r);
266
- return t;
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;
267
251
  }
268
- function it() {
269
- for (var e, i, r = 0, t = "", o = arguments.length; r < o; r++) (e = arguments[r]) && (i = P(e)) && (t && (t += " "), t += i);
270
- return t;
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;
271
255
  }
272
- const X = ({
273
- ref: e,
274
- as: i = "div",
275
- children: r,
256
+ const D = ({
257
+ as: i,
258
+ children: e,
276
259
  display: t,
277
- m: o,
278
- mt: n,
279
- mr: c,
280
- mb: l,
281
- ml: s,
282
- p,
283
- pt: d,
284
- pr: m,
260
+ m: r,
261
+ mt: o,
262
+ mr: p,
263
+ mb: s,
264
+ ml: n,
265
+ mx: c,
266
+ my: d,
267
+ p: l,
268
+ pt: m,
269
+ pr: v,
285
270
  pb: f,
286
- pl: g,
287
- width: u,
288
- height: h,
289
- position: v,
290
- style: b,
291
- className: $,
292
- href: w,
293
- target: N,
294
- rel: x,
295
- htmlFor: T,
296
- type: A,
297
- name: k,
298
- disabled: R,
299
- ...B
271
+ pl: h,
272
+ px: u,
273
+ py: $,
274
+ width: y,
275
+ height: b,
276
+ position: x,
277
+ style: w,
278
+ className: T,
279
+ disabled: N,
280
+ required: B,
281
+ ...k
300
282
  }) => {
301
- const a = {};
302
- t && (a.display = t), u && (a.width = u), h && (a.height = h), v && (a.position = v), o && (a.margin = `var(--pittorica-space-${o})`), n && (a.marginTop = `var(--pittorica-space-${n})`), c && (a.marginRight = `var(--pittorica-space-${c})`), l && (a.marginBottom = `var(--pittorica-space-${l})`), s && (a.marginLeft = `var(--pittorica-space-${s})`), p && (a.padding = `var(--pittorica-space-${p})`), d && (a.paddingTop = `var(--pittorica-space-${d})`), m && (a.paddingRight = `var(--pittorica-space-${m})`), f && (a.paddingBottom = `var(--pittorica-space-${f})`), g && (a.paddingLeft = `var(--pittorica-space-${g})`);
303
- const C = {
304
- ...b,
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-${$})`);
285
+ const R = {
286
+ ...w,
305
287
  ...a
306
288
  };
307
- return /* @__PURE__ */ y(
308
- i,
289
+ return /* @__PURE__ */ g(
290
+ A,
309
291
  {
310
- ref: e,
311
- className: it("pittorica-box", $),
312
- style: C,
313
- href: w,
314
- target: N,
315
- rel: x,
316
- htmlFor: T,
317
- type: A,
318
- name: k,
319
- disabled: R,
320
- ...B,
321
- children: r
292
+ className: rt("pittorica-box", T),
293
+ style: R,
294
+ disabled: N,
295
+ required: B,
296
+ ...k,
297
+ children: e
322
298
  }
323
299
  );
324
300
  };
325
- X.displayName = "Box";
326
- const S = ({
327
- children: e,
328
- as: i = "span",
301
+ D.displayName = "Box";
302
+ const z = ({
303
+ children: i,
304
+ as: e,
305
+ size: t,
329
306
  weight: r = "regular",
330
- align: t,
331
- truncate: o = !1,
332
- color: n,
333
- className: c,
334
- style: l,
335
- href: s,
336
- target: p,
337
- rel: d,
338
- htmlFor: m,
339
- name: f,
340
- ...g
307
+ align: o,
308
+ truncate: p = !1,
309
+ color: s,
310
+ className: n,
311
+ style: c,
312
+ ...d
341
313
  }) => {
342
- const u = (n == null ? void 0 : n.startsWith("#")) || (n == null ? void 0 : n.startsWith("rgb")) || (n == null ? void 0 : n.startsWith("hsl")), h = /* @__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([
343
315
  "danger",
344
316
  "success",
345
317
  "error",
@@ -351,95 +323,155 @@ const S = ({
351
323
  "slate",
352
324
  "blue",
353
325
  "red"
354
- ]), v = (() => {
355
- if (n)
356
- return n === "inherit" ? "inherit" : u ? n : h.has(n) ? `var(--pittorica-${n}-9)` : n;
357
- })(), b = {
358
- ...l,
359
- textAlign: t,
360
- color: v
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({
330
+ [`pittorica-text--size-${t.initial}`]: t.initial,
331
+ [`pittorica-text--xs-size-${t.xs}`]: t.xs,
332
+ [`pittorica-text--sm-size-${t.sm}`]: t.sm,
333
+ [`pittorica-text--md-size-${t.md}`]: t.md,
334
+ [`pittorica-text--lg-size-${t.lg}`]: t.lg,
335
+ [`pittorica-text--xl-size-${t.xl}`]: t.xl
336
+ }) : null, u = {
337
+ ...c,
338
+ textAlign: o,
339
+ color: f
361
340
  };
362
- return /* @__PURE__ */ y(
363
- X,
341
+ return /* @__PURE__ */ g(
342
+ D,
364
343
  {
365
- as: i,
366
- className: rt(
344
+ as: l,
345
+ className: q(
367
346
  "pittorica-text",
368
- { "pittorica-text--truncate": o },
369
- c
347
+ h,
348
+ { "pittorica-text--truncate": p },
349
+ n
370
350
  ),
371
351
  "data-weight": r,
372
- style: b,
373
- href: s,
374
- target: p,
375
- rel: d,
376
- htmlFor: m,
377
- name: f,
378
- ...g,
379
- children: e
352
+ style: u,
353
+ ...d,
354
+ children: i
355
+ }
356
+ );
357
+ };
358
+ z.displayName = "Text";
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 } });
382
+ globalThis.dispatchEvent(t);
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
+ ]
380
433
  }
381
434
  );
382
- }, L = "pittorica-toast", st = (e) => {
383
- const i = Math.random().toString(36).slice(2, 9), r = new CustomEvent(L, { detail: { ...e, id: i } });
384
- globalThis.dispatchEvent(r);
385
- }, lt = () => {
386
- const [e, i] = V([]), r = D(/* @__PURE__ */ new Set()), t = G((o) => {
387
- i((n) => n.filter((c) => c.id !== o));
435
+ }, pt = () => {
436
+ const [i, e] = C([]), [t, r] = C(!1), o = G(/* @__PURE__ */ new Set());
437
+ S(() => {
438
+ r(!0);
388
439
  }, []);
389
- return H(() => {
390
- const o = (n) => {
391
- const l = n.detail;
392
- if (i((s) => [...s, l]), l.duration !== 0) {
393
- const s = setTimeout(() => {
394
- t(l.id), r.current.delete(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);
395
450
  }, l.duration || 3e3);
396
- r.current.add(s);
451
+ o.current.add(m);
397
452
  }
398
453
  };
399
- return globalThis.addEventListener(L, o), () => {
400
- globalThis.removeEventListener(L, o);
401
- for (const n of r.current) clearTimeout(n);
402
- r.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();
403
458
  };
404
- }, [t]), typeof document > "u" ? null : J(
405
- /* @__PURE__ */ y(
406
- E,
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,
407
464
  {
408
465
  className: "pittorica-toast-viewport",
409
466
  role: "region",
410
467
  "aria-label": "Notifications",
411
- children: e.map((o) => /* @__PURE__ */ j(
412
- E,
413
- {
414
- className: "pittorica-toast-root",
415
- role: "status",
416
- "aria-live": "polite",
417
- children: [
418
- /* @__PURE__ */ j(E, { className: "pittorica-toast-content", children: [
419
- /* @__PURE__ */ y(S, { weight: "bold", style: { display: "block" }, children: o.title }),
420
- o.description && /* @__PURE__ */ y(S, { color: "slate", style: { display: "block" }, children: o.description })
421
- ] }),
422
- /* @__PURE__ */ y(
423
- I,
424
- {
425
- variant: "text",
426
- color: "slate",
427
- size: "1",
428
- onClick: () => t(o.id),
429
- "aria-label": "Close",
430
- children: /* @__PURE__ */ y(Y, { size: 18 })
431
- }
432
- )
433
- ]
434
- },
435
- o.id
436
- ))
468
+ children: /* @__PURE__ */ g(at, { appearance: s, children: i.map((n) => /* @__PURE__ */ g(et, { t: n, onRemove: p }, n.id)) })
437
469
  }
438
470
  ),
439
471
  document.body
440
472
  );
441
473
  };
442
474
  export {
443
- lt as ToastProvider,
444
- st as toast
475
+ pt as ToastProvider,
476
+ ct as toast
445
477
  };
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@pittorica/toast-react",
3
- "version": "0.24.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.24.0",
15
- "@pittorica/icon-button-react": "0.24.0",
16
- "@pittorica/text-react": "0.24.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/button-react": "0.24.0",
29
- "@pittorica/flex-react": "0.24.0",
30
- "@pittorica/theme-react": "0.24.0",
31
- "pittorica": "0.24.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,8 +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
- "dev": "vite",
42
+ "clean": "rm -rf dist *.tsbuildinfo",
43
43
  "test": "vitest run",
44
44
  "test:watch": "vitest"
45
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"}