@sensorario/sg-components 0.0.72 → 0.0.81

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.
package/dist/index.es.js CHANGED
@@ -1,11 +1,167 @@
1
1
  import { forwardRef as e, useEffect as t, useImperativeHandle as n, useState as r } from "react";
2
2
  import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
3
- //#region src/components/Button/Button.tsx
4
- var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
5
- className: "custom-button",
6
- ...t,
7
- children: e
8
- }), c = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ o("footer", {
3
+ //#region src/components/Icon/Icon.tsx
4
+ var s = {
5
+ menu: /* @__PURE__ */ o(i, { children: [
6
+ /* @__PURE__ */ a("line", {
7
+ x1: "3",
8
+ y1: "6",
9
+ x2: "21",
10
+ y2: "6"
11
+ }),
12
+ /* @__PURE__ */ a("line", {
13
+ x1: "3",
14
+ y1: "12",
15
+ x2: "21",
16
+ y2: "12"
17
+ }),
18
+ /* @__PURE__ */ a("line", {
19
+ x1: "3",
20
+ y1: "18",
21
+ x2: "21",
22
+ y2: "18"
23
+ })
24
+ ] }),
25
+ layout: /* @__PURE__ */ o(i, { children: [
26
+ /* @__PURE__ */ a("rect", {
27
+ x: "3",
28
+ y: "3",
29
+ width: "18",
30
+ height: "18",
31
+ rx: "2"
32
+ }),
33
+ /* @__PURE__ */ a("line", {
34
+ x1: "3",
35
+ y1: "9",
36
+ x2: "21",
37
+ y2: "9"
38
+ }),
39
+ /* @__PURE__ */ a("line", {
40
+ x1: "9",
41
+ y1: "9",
42
+ x2: "9",
43
+ y2: "21"
44
+ })
45
+ ] }),
46
+ edit: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("path", { d: "M4 20l1-4L16 5l3 3L8 19l-4 1z" }), /* @__PURE__ */ a("line", {
47
+ x1: "14",
48
+ y1: "7",
49
+ x2: "17",
50
+ y2: "10"
51
+ })] }),
52
+ "help-circle": /* @__PURE__ */ o(i, { children: [
53
+ /* @__PURE__ */ a("circle", {
54
+ cx: "12",
55
+ cy: "12",
56
+ r: "9"
57
+ }),
58
+ /* @__PURE__ */ a("path", { d: "M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4" }),
59
+ /* @__PURE__ */ a("line", {
60
+ x1: "12",
61
+ y1: "17",
62
+ x2: "12",
63
+ y2: "17.01"
64
+ })
65
+ ] }),
66
+ check: /* @__PURE__ */ a("polyline", { points: "4 12 9 17 20 6" }),
67
+ "file-plus": /* @__PURE__ */ o(i, { children: [
68
+ /* @__PURE__ */ a("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
69
+ /* @__PURE__ */ a("polyline", { points: "14 3 14 8 19 8" }),
70
+ /* @__PURE__ */ a("line", {
71
+ x1: "12",
72
+ y1: "12",
73
+ x2: "12",
74
+ y2: "17"
75
+ }),
76
+ /* @__PURE__ */ a("line", {
77
+ x1: "9.5",
78
+ y1: "14.5",
79
+ x2: "14.5",
80
+ y2: "14.5"
81
+ })
82
+ ] }),
83
+ link: /* @__PURE__ */ o(i, { children: [
84
+ /* @__PURE__ */ a("path", { d: "M9 15l6-6" }),
85
+ /* @__PURE__ */ a("path", { d: "M8 13.5 5.5 16a3 3 0 0 0 4.24 4.24l2.5-2.5" }),
86
+ /* @__PURE__ */ a("path", { d: "M16 10.5 18.5 8a3 3 0 0 0-4.24-4.24l-2.5 2.5" })
87
+ ] }),
88
+ "share-2": /* @__PURE__ */ o(i, { children: [
89
+ /* @__PURE__ */ a("circle", {
90
+ cx: "6",
91
+ cy: "12",
92
+ r: "2.4"
93
+ }),
94
+ /* @__PURE__ */ a("circle", {
95
+ cx: "18",
96
+ cy: "6",
97
+ r: "2.4"
98
+ }),
99
+ /* @__PURE__ */ a("circle", {
100
+ cx: "18",
101
+ cy: "18",
102
+ r: "2.4"
103
+ }),
104
+ /* @__PURE__ */ a("line", {
105
+ x1: "8.2",
106
+ y1: "10.8",
107
+ x2: "15.8",
108
+ y2: "7.2"
109
+ }),
110
+ /* @__PURE__ */ a("line", {
111
+ x1: "8.2",
112
+ y1: "13.2",
113
+ x2: "15.8",
114
+ y2: "16.8"
115
+ })
116
+ ] }),
117
+ download: /* @__PURE__ */ o(i, { children: [
118
+ /* @__PURE__ */ a("path", { d: "M12 3v12" }),
119
+ /* @__PURE__ */ a("polyline", { points: "7 11 12 16 17 11" }),
120
+ /* @__PURE__ */ a("path", { d: "M5 19h14" })
121
+ ] }),
122
+ book: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("path", { d: "M4 5.5A2.5 2.5 0 0 1 6.5 3H12v18H6.5A2.5 2.5 0 0 1 4 18.5z" }), /* @__PURE__ */ a("path", { d: "M20 5.5A2.5 2.5 0 0 0 17.5 3H12v18h5.5a2.5 2.5 0 0 0 2.5-2.5z" })] }),
123
+ printer: /* @__PURE__ */ o(i, { children: [
124
+ /* @__PURE__ */ a("path", { d: "M6 9V3h12v6" }),
125
+ /* @__PURE__ */ a("rect", {
126
+ x: "4",
127
+ y: "9",
128
+ width: "16",
129
+ height: "8",
130
+ rx: "1.5"
131
+ }),
132
+ /* @__PURE__ */ a("path", { d: "M6 17v4h12v-4" })
133
+ ] }),
134
+ eye: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("path", { d: "M2 12c2.5-5 7-8 10-8s7.5 3 10 8c-2.5 5-7 8-10 8s-7.5-3-10-8z" }), /* @__PURE__ */ a("circle", {
135
+ cx: "12",
136
+ cy: "12",
137
+ r: "3"
138
+ })] })
139
+ }, c = ({ name: e, size: t = 18, ...n }) => /* @__PURE__ */ a("svg", {
140
+ className: "sg-icon",
141
+ width: t,
142
+ height: t,
143
+ viewBox: "0 0 24 24",
144
+ fill: "none",
145
+ stroke: "currentColor",
146
+ strokeWidth: 1.8,
147
+ strokeLinecap: "round",
148
+ strokeLinejoin: "round",
149
+ "aria-hidden": "true",
150
+ ...n,
151
+ children: s[e]
152
+ }), l = ({ label: e, icon: t, iconOnly: n, className: r, title: i, ...s }) => /* @__PURE__ */ o("button", {
153
+ className: [
154
+ "custom-button",
155
+ t ? "custom-button-with-icon" : "",
156
+ r
157
+ ].filter(Boolean).join(" "),
158
+ title: i ?? (n ? e : void 0),
159
+ ...s,
160
+ children: [t && /* @__PURE__ */ a(c, { name: t }), /* @__PURE__ */ a("span", {
161
+ className: n ? "custom-button-label-visually-hidden" : void 0,
162
+ children: e
163
+ })]
164
+ }), u = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ o("footer", {
9
165
  className: "footer",
10
166
  children: [/* @__PURE__ */ a("span", { children: /* @__PURE__ */ a("a", {
11
167
  href: t,
@@ -15,7 +171,7 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
15
171
  style: { marginLeft: "16px" },
16
172
  children: e
17
173
  }, t)) })]
18
- }), l = [
174
+ }), d = [
19
175
  {
20
176
  label: "guitar",
21
177
  href: "https://guitar.simonegentili.com"
@@ -36,11 +192,11 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
36
192
  label: "code2image",
37
193
  href: "https://code2image.simonegentili.com"
38
194
  }
39
- ], u = () => /* @__PURE__ */ a(c, {
195
+ ], f = () => /* @__PURE__ */ a(u, {
40
196
  href: "https://simonegentili.com",
41
197
  copyright: "© 2026 simonegentili.com",
42
- links: l
43
- }), d = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: r, className: i }) => /* @__PURE__ */ a("header", {
198
+ links: d
199
+ }), p = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: r, className: i }) => /* @__PURE__ */ a("header", {
44
200
  className: i ? `header ${i}` : "header",
45
201
  children: /* @__PURE__ */ o("div", {
46
202
  className: "header-container",
@@ -58,11 +214,11 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
58
214
  children: r
59
215
  })]
60
216
  })
61
- }), f = ({ onNavigate: e }) => /* @__PURE__ */ a(d, {
217
+ }), m = ({ onNavigate: e }) => /* @__PURE__ */ a(p, {
62
218
  onNavigate: e,
63
219
  title: "Simone Gentili - senior web developer, tech author and chess enthusiast",
64
220
  homePageKey: "home"
65
- }), p = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ a(i, { children: e ? /* @__PURE__ */ a("button", {
221
+ }), h = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ a(i, { children: e ? /* @__PURE__ */ a("button", {
66
222
  onClick: n,
67
223
  style: {
68
224
  fontSize: "0.9rem",
@@ -76,27 +232,66 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
76
232
  padding: "0.4rem 1rem"
77
233
  },
78
234
  children: "Login"
79
- }) }), m = ({ open: e, onClose: t, title: n, children: r }) => e ? /* @__PURE__ */ a("div", {
80
- className: "modal-overlay",
81
- children: /* @__PURE__ */ o("div", {
82
- className: "modal-content",
83
- children: [
84
- n && /* @__PURE__ */ a("h2", {
85
- className: "modal-title",
86
- children: n
87
- }),
88
- /* @__PURE__ */ a("button", {
89
- className: "modal-close",
90
- onClick: t,
91
- children: "×"
92
- }),
93
- /* @__PURE__ */ a("div", {
94
- className: "modal-children",
95
- children: r
96
- })
97
- ]
98
- })
99
- }) : null, h = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ o("div", {
235
+ }) }), g = 220, _ = ({ open: e, onClose: n, title: i, icon: s, children: c, buttons: u, footer: d, closeLabel: f = "Close" }) => {
236
+ let [p, m] = r(!1), h = (e) => {
237
+ p || (m(!0), setTimeout(() => {
238
+ m(!1), e();
239
+ }, g));
240
+ };
241
+ return t(() => {
242
+ if (!e) return;
243
+ let t = (e) => {
244
+ e.key === "Escape" && h(n);
245
+ };
246
+ return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
247
+ }, [e, n]), e ? /* @__PURE__ */ a("div", {
248
+ className: `modal-overlay${p ? " modal-overlay-closing" : ""}`,
249
+ onClick: () => h(n),
250
+ children: /* @__PURE__ */ o("div", {
251
+ className: `modal-content${p ? " modal-content-closing" : ""}`,
252
+ onClick: (e) => e.stopPropagation(),
253
+ children: [
254
+ /* @__PURE__ */ o("div", {
255
+ className: "modal-header",
256
+ children: [
257
+ s && /* @__PURE__ */ a("span", {
258
+ className: "modal-icon",
259
+ children: s
260
+ }),
261
+ i && /* @__PURE__ */ a("h2", {
262
+ className: "modal-title",
263
+ children: i
264
+ }),
265
+ /* @__PURE__ */ a("button", {
266
+ type: "button",
267
+ className: "modal-close",
268
+ "aria-label": f,
269
+ onClick: () => h(n),
270
+ disabled: p,
271
+ children: "×"
272
+ })
273
+ ]
274
+ }),
275
+ /* @__PURE__ */ a("div", {
276
+ className: "modal-children",
277
+ children: c
278
+ }),
279
+ u && /* @__PURE__ */ a("div", {
280
+ className: "modal-footer",
281
+ children: u.map((e, t) => /* @__PURE__ */ a(l, {
282
+ label: e.label,
283
+ onClick: () => h(e.onClick),
284
+ disabled: p
285
+ }, t))
286
+ }),
287
+ d && /* @__PURE__ */ a("div", {
288
+ className: "modal-footer",
289
+ children: d
290
+ })
291
+ ]
292
+ })
293
+ }) : null;
294
+ }, v = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ o("div", {
100
295
  className: "input-wrapper",
101
296
  children: [e && /* @__PURE__ */ a("label", {
102
297
  className: "input-label",
@@ -105,7 +300,7 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
105
300
  className: `input-field${t ? " input-field--invalid" : ""}`,
106
301
  ...n
107
302
  })]
108
- }), g = ({ label: e, ...t }) => /* @__PURE__ */ o("div", {
303
+ }), y = ({ label: e, ...t }) => /* @__PURE__ */ o("div", {
109
304
  className: "input-wrapper",
110
305
  children: [e && /* @__PURE__ */ a("label", {
111
306
  className: "input-label",
@@ -115,29 +310,29 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
115
310
  className: "input-field",
116
311
  ...t
117
312
  })]
118
- }), _ = ({ open: e, onClose: t, onLogin: n }) => {
119
- let [i, c] = r(""), [l, u] = r("");
120
- return /* @__PURE__ */ a(m, {
313
+ }), b = ({ open: e, onClose: t, onLogin: n }) => {
314
+ let [i, s] = r(""), [c, u] = r("");
315
+ return /* @__PURE__ */ a(_, {
121
316
  open: e,
122
317
  onClose: t,
123
318
  title: "Login",
124
319
  children: /* @__PURE__ */ o("form", {
125
320
  onSubmit: (e) => {
126
- e.preventDefault(), n(i, l);
321
+ e.preventDefault(), n(i, c);
127
322
  },
128
323
  children: [
129
- /* @__PURE__ */ a(h, {
324
+ /* @__PURE__ */ a(v, {
130
325
  label: "Username",
131
326
  value: i,
132
- onChange: (e) => c(e.target.value),
327
+ onChange: (e) => s(e.target.value),
133
328
  autoFocus: !0
134
329
  }),
135
- /* @__PURE__ */ a(g, {
330
+ /* @__PURE__ */ a(y, {
136
331
  label: "Password",
137
- value: l,
332
+ value: c,
138
333
  onChange: (e) => u(e.target.value)
139
334
  }),
140
- /* @__PURE__ */ a(s, {
335
+ /* @__PURE__ */ a(l, {
141
336
  label: "Login",
142
337
  type: "submit",
143
338
  style: { width: "100%" }
@@ -145,90 +340,90 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
145
340
  ]
146
341
  })
147
342
  });
148
- }, v = "simonegentili.com-access-token", y = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), b = (e) => {
343
+ }, x = "simonegentili.com-access-token", S = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), C = (e) => {
149
344
  let t = document.cookie.split("; ").find((t) => t.startsWith(`${e}=`));
150
345
  return t ? t.slice(e.length + 1) : null;
151
- }, x = (e, t) => {
346
+ }, w = (e, t) => {
152
347
  try {
153
348
  return JSON.parse(atob(e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))[t] ?? null;
154
349
  } catch {
155
350
  return null;
156
351
  }
157
- }, S = e(({ title: e = "Quadrato", homePageKey: s = "home", onNavigate: c, cookieName: l = v, username: u = null, usernameJwtField: f = "sub", onLogin: m, onLogout: h, onUserAuthenticated: g }, S) => {
158
- let [C, w] = r(() => y(l)), [T, E] = r(!1);
159
- n(S, () => ({ openLoginModal: () => E(!0) }));
160
- let D = u ?? (C ? x(b(l) ?? "", f) : null);
352
+ }, T = e(({ title: e = "Quadrato", homePageKey: s = "home", onNavigate: c, cookieName: l = x, username: u = null, usernameJwtField: d = "sub", onLogin: f, onLogout: m, onUserAuthenticated: g }, _) => {
353
+ let [v, y] = r(() => S(l)), [T, E] = r(!1);
354
+ n(_, () => ({ openLoginModal: () => E(!0) }));
355
+ let D = u ?? (v ? w(C(l) ?? "", d) : null);
161
356
  return t(() => {
162
- g?.(C, C ? D : null);
163
- }, []), /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(d, {
357
+ g?.(v, v ? D : null);
358
+ }, []), /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(p, {
164
359
  onNavigate: c,
165
360
  title: e,
166
361
  homePageKey: s,
167
362
  className: "quadrato-header",
168
363
  children: /* @__PURE__ */ o("div", {
169
364
  className: "quadrato-header-auth",
170
- children: [C && D && /* @__PURE__ */ a("span", {
365
+ children: [v && D && /* @__PURE__ */ a("span", {
171
366
  className: "quadrato-header-username",
172
367
  children: D
173
- }), /* @__PURE__ */ a(p, {
174
- isLoggedIn: C,
368
+ }), /* @__PURE__ */ a(h, {
369
+ isLoggedIn: v,
175
370
  handleLogin: () => E(!0),
176
371
  handleLogout: () => {
177
- h?.();
178
- let e = y(l);
179
- w(e), g?.(e, null);
372
+ m?.();
373
+ let e = S(l);
374
+ y(e), g?.(e, null);
180
375
  }
181
376
  })]
182
377
  })
183
- }), /* @__PURE__ */ a(_, {
378
+ }), /* @__PURE__ */ a(b, {
184
379
  open: T,
185
380
  onClose: () => E(!1),
186
381
  onLogin: async (e, t) => {
187
- await m(e, t);
188
- let n = y(l);
189
- w(n), E(!1), g?.(n, n ? u ?? e : null);
382
+ await f(e, t);
383
+ let n = S(l);
384
+ y(n), E(!1), g?.(n, n ? u ?? e : null);
190
385
  }
191
386
  })] });
192
387
  });
193
- S.displayName = "QuadratoHeader";
388
+ T.displayName = "QuadratoHeader";
194
389
  //#endregion
195
390
  //#region src/components/SetPasswordModal/SetPasswordModal.tsx
196
- var C = ({ open: e, onClose: t, onSubmit: n }) => {
197
- let [i, c] = r(""), [l, u] = r(""), [d, f] = r("");
198
- return /* @__PURE__ */ a(m, {
391
+ var E = ({ open: e, onClose: t, onSubmit: n }) => {
392
+ let [i, s] = r(""), [c, u] = r(""), [d, f] = r("");
393
+ return /* @__PURE__ */ a(_, {
199
394
  open: e,
200
395
  onClose: t,
201
396
  title: "Imposta una nuova password",
202
397
  children: /* @__PURE__ */ o("form", {
203
398
  className: "set-password-modal-form",
204
399
  onSubmit: (e) => {
205
- if (e.preventDefault(), i === "" || l === "") {
400
+ if (e.preventDefault(), i === "" || c === "") {
206
401
  f("Inserisci ed conferma la nuova password.");
207
402
  return;
208
403
  }
209
- if (i !== l) {
404
+ if (i !== c) {
210
405
  f("Le password non coincidono.");
211
406
  return;
212
407
  }
213
408
  f(""), n(i);
214
409
  },
215
410
  children: [
216
- /* @__PURE__ */ a(g, {
411
+ /* @__PURE__ */ a(y, {
217
412
  label: "Nuova password",
218
413
  value: i,
219
- onChange: (e) => c(e.target.value),
414
+ onChange: (e) => s(e.target.value),
220
415
  autoFocus: !0
221
416
  }),
222
- /* @__PURE__ */ a(g, {
417
+ /* @__PURE__ */ a(y, {
223
418
  label: "Conferma password",
224
- value: l,
419
+ value: c,
225
420
  onChange: (e) => u(e.target.value)
226
421
  }),
227
422
  d && /* @__PURE__ */ a("p", {
228
423
  className: "set-password-modal-error",
229
424
  children: d
230
425
  }),
231
- /* @__PURE__ */ a(s, {
426
+ /* @__PURE__ */ a(l, {
232
427
  label: "Salva password",
233
428
  type: "submit",
234
429
  style: { width: "100%" }
@@ -238,4 +433,4 @@ var C = ({ open: e, onClose: t, onSubmit: n }) => {
238
433
  });
239
434
  };
240
435
  //#endregion
241
- export { p as Authenticator, s as Button, c as Footer, d as Header, S as QuadratoHeader, u as SGFooter, f as SGHeader, C as SetPasswordModal };
436
+ export { h as Authenticator, l as Button, u as Footer, p as Header, c as Icon, _ as Modal, T as QuadratoHeader, f as SGFooter, m as SGHeader, E as SetPasswordModal };
@@ -1,2 +1,2 @@
1
- .custom-button{border-radius:var(--primary-radius);border:1px solid var(--primary-border);background:var(--primary-bg);cursor:pointer;font-size:var(--primary-font);font-family:var(--font-family);padding:8px 16px;transition:background .2s}.custom-button:hover{background:var(--primary-hover-bg)}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-children{font-family:var(--font-family);padding:16px}.modal-content{background:var(--modal-bg);font-size:var(--primary-font);border-radius:8px;min-width:320px;position:relative;box-shadow:0 2px 16px #00000026}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);background-color:var(--primary-bg);font-size:var(--primary-font);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);margin-top:0;padding:16px}.modal-close{cursor:pointer;background:0 0;border:none;font-size:20px;position:absolute;top:8px;right:8px}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:#ffe5e5;border-color:#c00}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{border-radius:var(--radius);width:calc(100% - 16px);font-size:var(--primary-font);border-style:solid;border-width:1px;padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.header.quadrato-header{z-index:999}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:#333}:root{--unit:3px;--primary-bg:#f5f5f5;--primary-border:#ccc;--radius:calc(var(--unit) * 2);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:#e0e0e0;--modal-bg:#fff;--modal-overlay:#0000004d;--modal-title-color:#222;--input-bg:#fff;--input-border:#ccc;--input-radius:var(--radius);--input-font:1rem;--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5)}.theme-dark{--primary-bg:#222;--primary-border:#444;--primary-font:1rem;--font-family:"Inter", Arial, sans-serif;--primary-hover-bg:#333;--modal-bg:#222;--modal-title-color:#fff;--input-bg:#333;--input-border:#555;--input-font:1rem}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:#d32f2f;font-size:var(--primary-font);margin:0}
1
+ .custom-button{border-radius:var(--primary-radius);border:1px solid var(--primary-border);background:var(--primary-bg);cursor:pointer;font-size:var(--primary-font);font-family:var(--font-family);padding:8px 16px;transition:background .2s}.custom-button:hover{background:var(--primary-hover-bg)}.custom-button-with-icon{align-items:center;gap:8px;display:inline-flex}.custom-button-label-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sg-icon{vertical-align:middle;flex-shrink:0;display:inline-block}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.25s ease-out sg-modal-overlay-fade-in;display:flex;position:fixed;top:0;left:0}.modal-overlay.modal-overlay-closing{animation:.22s ease-in forwards sg-modal-overlay-fade-out}.modal-content{background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);flex-direction:column;min-width:320px;max-width:calc(100vw - 40px);max-height:90vh;animation:.3s ease-out sg-modal-slide-in;display:flex;overflow:hidden;box-shadow:0 2px 16px #00000026}.modal-content.modal-content-closing{animation:.22s ease-in forwards sg-modal-slide-out}@keyframes sg-modal-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sg-modal-overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sg-modal-slide-in{0%{opacity:0;transform:translateY(-24px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes sg-modal-slide-out{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-24px)scale(.97)}}.modal-header{background:var(--primary-bg);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);flex:none;align-items:center;gap:8px;padding:16px;display:flex}.modal-icon{color:var(--modal-title-color);display:inline-flex}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);font-size:var(--primary-font);flex:1;margin:0}.modal-close{cursor:pointer;color:var(--modal-title-color);background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1}.modal-close:disabled{cursor:default;opacity:.6}.modal-children{font-family:var(--font-family);padding:16px;overflow-y:auto}.modal-footer{border-top:1px solid var(--primary-border);flex-wrap:wrap;flex:none;justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:#ffe5e5;border-color:#c00}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{border-radius:var(--radius);width:calc(100% - 16px);font-size:var(--primary-font);border-style:solid;border-width:1px;padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.header.quadrato-header{z-index:999}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:#333}:root{--unit:3px;--primary-bg:#f5f5f5;--primary-border:#ccc;--radius:calc(var(--unit) * 2);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:#e0e0e0;--modal-bg:#fff;--modal-overlay:#0000004d;--modal-title-color:#222;--input-bg:#fff;--input-border:#ccc;--input-radius:var(--radius);--input-font:1rem;--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5)}.theme-dark{--primary-bg:#222;--primary-border:#444;--primary-font:1rem;--font-family:"Inter", Arial, sans-serif;--primary-hover-bg:#333;--modal-bg:#222;--modal-title-color:#fff;--input-bg:#333;--input-border:#555;--input-font:1rem}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:#d32f2f;font-size:var(--primary-font);margin:0}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sensorario/sg-components",
3
- "version": "0.0.72",
3
+ "version": "0.0.81",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "scripts": {
@@ -33,17 +33,17 @@
33
33
  "react-dom": "^19.2.6"
34
34
  },
35
35
  "devDependencies": {
36
- "@chromatic-com/storybook": "^5.2.1",
36
+ "@chromatic-com/storybook": "^5.3.0",
37
37
  "@eslint/js": "^10.0.1",
38
38
  "@rollup/plugin-commonjs": "^29.0.2",
39
39
  "@rollup/plugin-node-resolve": "^16.0.3",
40
40
  "@rollup/plugin-typescript": "^12.3.0",
41
- "@storybook/addon-a11y": "^10.4.1",
42
- "@storybook/addon-docs": "^10.4.1",
43
- "@storybook/addon-mcp": "^0.6.0",
44
- "@storybook/addon-themes": "^10.4.1",
45
- "@storybook/addon-vitest": "^10.4.1",
46
- "@storybook/react-vite": "^10.4.1",
41
+ "@storybook/addon-a11y": "^10.5.10",
42
+ "@storybook/addon-docs": "^10.5.10",
43
+ "@storybook/addon-mcp": "^0.7.0",
44
+ "@storybook/addon-themes": "^10.5.10",
45
+ "@storybook/addon-vitest": "^10.5.10",
46
+ "@storybook/react-vite": "^10.5.10",
47
47
  "@types/node": "^24.12.3",
48
48
  "@types/react": "^19.2.14",
49
49
  "@types/react-dom": "^19.2.3",
@@ -53,14 +53,14 @@
53
53
  "eslint": "^10.3.0",
54
54
  "eslint-plugin-react-hooks": "^7.1.1",
55
55
  "eslint-plugin-react-refresh": "^0.5.2",
56
- "eslint-plugin-storybook": "^10.4.1",
56
+ "eslint-plugin-storybook": "^10.5.10",
57
57
  "globals": "^17.6.0",
58
58
  "playwright": "^1.60.0",
59
59
  "rollup": "^4.60.4",
60
60
  "rollup-plugin-dts": "^6.4.1",
61
61
  "rollup-plugin-peer-deps-external": "^2.2.4",
62
62
  "rollup-plugin-postcss": "^4.0.2",
63
- "storybook": "^10.4.1",
63
+ "storybook": "^10.5.10",
64
64
  "typescript": "~6.0.2",
65
65
  "typescript-eslint": "^8.59.2",
66
66
  "vite": "^8.0.12",