@sensorario/sg-components 0.0.72 → 0.0.84

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,180 @@
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
+ columns: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("rect", {
140
+ x: "3",
141
+ y: "4",
142
+ width: "8",
143
+ height: "16",
144
+ rx: "1.5"
145
+ }), /* @__PURE__ */ a("rect", {
146
+ x: "13",
147
+ y: "4",
148
+ width: "8",
149
+ height: "16",
150
+ rx: "1.5"
151
+ })] })
152
+ }, c = ({ name: e, size: t = 18, ...n }) => /* @__PURE__ */ a("svg", {
153
+ className: "sg-icon",
154
+ width: t,
155
+ height: t,
156
+ viewBox: "0 0 24 24",
157
+ fill: "none",
158
+ stroke: "currentColor",
159
+ strokeWidth: 1.8,
160
+ strokeLinecap: "round",
161
+ strokeLinejoin: "round",
162
+ "aria-hidden": "true",
163
+ ...n,
164
+ children: s[e]
165
+ }), l = ({ label: e, icon: t, iconOnly: n, className: r, title: i, ...s }) => /* @__PURE__ */ o("button", {
166
+ className: [
167
+ "custom-button",
168
+ t ? "custom-button-with-icon" : "",
169
+ r
170
+ ].filter(Boolean).join(" "),
171
+ title: i ?? (n ? e : void 0),
172
+ ...s,
173
+ children: [t && /* @__PURE__ */ a(c, { name: t }), /* @__PURE__ */ a("span", {
174
+ className: n ? "custom-button-label-visually-hidden" : void 0,
175
+ children: e
176
+ })]
177
+ }), u = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ o("footer", {
9
178
  className: "footer",
10
179
  children: [/* @__PURE__ */ a("span", { children: /* @__PURE__ */ a("a", {
11
180
  href: t,
@@ -15,7 +184,7 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
15
184
  style: { marginLeft: "16px" },
16
185
  children: e
17
186
  }, t)) })]
18
- }), l = [
187
+ }), d = [
19
188
  {
20
189
  label: "guitar",
21
190
  href: "https://guitar.simonegentili.com"
@@ -36,11 +205,11 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
36
205
  label: "code2image",
37
206
  href: "https://code2image.simonegentili.com"
38
207
  }
39
- ], u = () => /* @__PURE__ */ a(c, {
208
+ ], f = () => /* @__PURE__ */ a(u, {
40
209
  href: "https://simonegentili.com",
41
210
  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", {
211
+ links: d
212
+ }), 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
213
  className: i ? `header ${i}` : "header",
45
214
  children: /* @__PURE__ */ o("div", {
46
215
  className: "header-container",
@@ -58,11 +227,11 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
58
227
  children: r
59
228
  })]
60
229
  })
61
- }), f = ({ onNavigate: e }) => /* @__PURE__ */ a(d, {
230
+ }), m = ({ onNavigate: e }) => /* @__PURE__ */ a(p, {
62
231
  onNavigate: e,
63
232
  title: "Simone Gentili - senior web developer, tech author and chess enthusiast",
64
233
  homePageKey: "home"
65
- }), p = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ a(i, { children: e ? /* @__PURE__ */ a("button", {
234
+ }), h = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ a(i, { children: e ? /* @__PURE__ */ a("button", {
66
235
  onClick: n,
67
236
  style: {
68
237
  fontSize: "0.9rem",
@@ -76,27 +245,66 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
76
245
  padding: "0.4rem 1rem"
77
246
  },
78
247
  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", {
248
+ }) }), g = 220, _ = ({ open: e, onClose: n, title: i, icon: s, children: c, buttons: u, footer: d, closeLabel: f = "Close", className: p }) => {
249
+ let [m, h] = r(!1), _ = (e) => {
250
+ m || (h(!0), setTimeout(() => {
251
+ h(!1), e();
252
+ }, g));
253
+ };
254
+ return t(() => {
255
+ if (!e) return;
256
+ let t = (e) => {
257
+ e.key === "Escape" && _(n);
258
+ };
259
+ return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
260
+ }, [e, n]), e ? /* @__PURE__ */ a("div", {
261
+ className: `modal-overlay${m ? " modal-overlay-closing" : ""}`,
262
+ onClick: () => _(n),
263
+ children: /* @__PURE__ */ o("div", {
264
+ className: `modal-content${p ? ` ${p}` : ""}${m ? " modal-content-closing" : ""}`,
265
+ onClick: (e) => e.stopPropagation(),
266
+ children: [
267
+ /* @__PURE__ */ o("div", {
268
+ className: "modal-header",
269
+ children: [
270
+ s && /* @__PURE__ */ a("span", {
271
+ className: "modal-icon",
272
+ children: s
273
+ }),
274
+ i && /* @__PURE__ */ a("h2", {
275
+ className: "modal-title",
276
+ children: i
277
+ }),
278
+ /* @__PURE__ */ a("button", {
279
+ type: "button",
280
+ className: "modal-close",
281
+ "aria-label": f,
282
+ onClick: () => _(n),
283
+ disabled: m,
284
+ children: "×"
285
+ })
286
+ ]
287
+ }),
288
+ /* @__PURE__ */ a("div", {
289
+ className: "modal-children",
290
+ children: c
291
+ }),
292
+ u && /* @__PURE__ */ a("div", {
293
+ className: "modal-footer",
294
+ children: u.map((e, t) => /* @__PURE__ */ a(l, {
295
+ label: e.label,
296
+ onClick: () => _(e.onClick),
297
+ disabled: m
298
+ }, t))
299
+ }),
300
+ d && /* @__PURE__ */ a("div", {
301
+ className: "modal-footer",
302
+ children: d
303
+ })
304
+ ]
305
+ })
306
+ }) : null;
307
+ }, v = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ o("div", {
100
308
  className: "input-wrapper",
101
309
  children: [e && /* @__PURE__ */ a("label", {
102
310
  className: "input-label",
@@ -105,7 +313,7 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
105
313
  className: `input-field${t ? " input-field--invalid" : ""}`,
106
314
  ...n
107
315
  })]
108
- }), g = ({ label: e, ...t }) => /* @__PURE__ */ o("div", {
316
+ }), y = ({ label: e, ...t }) => /* @__PURE__ */ o("div", {
109
317
  className: "input-wrapper",
110
318
  children: [e && /* @__PURE__ */ a("label", {
111
319
  className: "input-label",
@@ -115,29 +323,29 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
115
323
  className: "input-field",
116
324
  ...t
117
325
  })]
118
- }), _ = ({ open: e, onClose: t, onLogin: n }) => {
119
- let [i, c] = r(""), [l, u] = r("");
120
- return /* @__PURE__ */ a(m, {
326
+ }), b = ({ open: e, onClose: t, onLogin: n }) => {
327
+ let [i, s] = r(""), [c, u] = r("");
328
+ return /* @__PURE__ */ a(_, {
121
329
  open: e,
122
330
  onClose: t,
123
331
  title: "Login",
124
332
  children: /* @__PURE__ */ o("form", {
125
333
  onSubmit: (e) => {
126
- e.preventDefault(), n(i, l);
334
+ e.preventDefault(), n(i, c);
127
335
  },
128
336
  children: [
129
- /* @__PURE__ */ a(h, {
337
+ /* @__PURE__ */ a(v, {
130
338
  label: "Username",
131
339
  value: i,
132
- onChange: (e) => c(e.target.value),
340
+ onChange: (e) => s(e.target.value),
133
341
  autoFocus: !0
134
342
  }),
135
- /* @__PURE__ */ a(g, {
343
+ /* @__PURE__ */ a(y, {
136
344
  label: "Password",
137
- value: l,
345
+ value: c,
138
346
  onChange: (e) => u(e.target.value)
139
347
  }),
140
- /* @__PURE__ */ a(s, {
348
+ /* @__PURE__ */ a(l, {
141
349
  label: "Login",
142
350
  type: "submit",
143
351
  style: { width: "100%" }
@@ -145,90 +353,90 @@ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
145
353
  ]
146
354
  })
147
355
  });
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) => {
356
+ }, 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
357
  let t = document.cookie.split("; ").find((t) => t.startsWith(`${e}=`));
150
358
  return t ? t.slice(e.length + 1) : null;
151
- }, x = (e, t) => {
359
+ }, w = (e, t) => {
152
360
  try {
153
361
  return JSON.parse(atob(e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))[t] ?? null;
154
362
  } catch {
155
363
  return null;
156
364
  }
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);
365
+ }, 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 }, _) => {
366
+ let [v, y] = r(() => S(l)), [T, E] = r(!1);
367
+ n(_, () => ({ openLoginModal: () => E(!0) }));
368
+ let D = u ?? (v ? w(C(l) ?? "", d) : null);
161
369
  return t(() => {
162
- g?.(C, C ? D : null);
163
- }, []), /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(d, {
370
+ g?.(v, v ? D : null);
371
+ }, []), /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(p, {
164
372
  onNavigate: c,
165
373
  title: e,
166
374
  homePageKey: s,
167
375
  className: "quadrato-header",
168
376
  children: /* @__PURE__ */ o("div", {
169
377
  className: "quadrato-header-auth",
170
- children: [C && D && /* @__PURE__ */ a("span", {
378
+ children: [v && D && /* @__PURE__ */ a("span", {
171
379
  className: "quadrato-header-username",
172
380
  children: D
173
- }), /* @__PURE__ */ a(p, {
174
- isLoggedIn: C,
381
+ }), /* @__PURE__ */ a(h, {
382
+ isLoggedIn: v,
175
383
  handleLogin: () => E(!0),
176
384
  handleLogout: () => {
177
- h?.();
178
- let e = y(l);
179
- w(e), g?.(e, null);
385
+ m?.();
386
+ let e = S(l);
387
+ y(e), g?.(e, null);
180
388
  }
181
389
  })]
182
390
  })
183
- }), /* @__PURE__ */ a(_, {
391
+ }), /* @__PURE__ */ a(b, {
184
392
  open: T,
185
393
  onClose: () => E(!1),
186
394
  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);
395
+ await f(e, t);
396
+ let n = S(l);
397
+ y(n), E(!1), g?.(n, n ? u ?? e : null);
190
398
  }
191
399
  })] });
192
400
  });
193
- S.displayName = "QuadratoHeader";
401
+ T.displayName = "QuadratoHeader";
194
402
  //#endregion
195
403
  //#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, {
404
+ var E = ({ open: e, onClose: t, onSubmit: n }) => {
405
+ let [i, s] = r(""), [c, u] = r(""), [d, f] = r("");
406
+ return /* @__PURE__ */ a(_, {
199
407
  open: e,
200
408
  onClose: t,
201
409
  title: "Imposta una nuova password",
202
410
  children: /* @__PURE__ */ o("form", {
203
411
  className: "set-password-modal-form",
204
412
  onSubmit: (e) => {
205
- if (e.preventDefault(), i === "" || l === "") {
413
+ if (e.preventDefault(), i === "" || c === "") {
206
414
  f("Inserisci ed conferma la nuova password.");
207
415
  return;
208
416
  }
209
- if (i !== l) {
417
+ if (i !== c) {
210
418
  f("Le password non coincidono.");
211
419
  return;
212
420
  }
213
421
  f(""), n(i);
214
422
  },
215
423
  children: [
216
- /* @__PURE__ */ a(g, {
424
+ /* @__PURE__ */ a(y, {
217
425
  label: "Nuova password",
218
426
  value: i,
219
- onChange: (e) => c(e.target.value),
427
+ onChange: (e) => s(e.target.value),
220
428
  autoFocus: !0
221
429
  }),
222
- /* @__PURE__ */ a(g, {
430
+ /* @__PURE__ */ a(y, {
223
431
  label: "Conferma password",
224
- value: l,
432
+ value: c,
225
433
  onChange: (e) => u(e.target.value)
226
434
  }),
227
435
  d && /* @__PURE__ */ a("p", {
228
436
  className: "set-password-modal-error",
229
437
  children: d
230
438
  }),
231
- /* @__PURE__ */ a(s, {
439
+ /* @__PURE__ */ a(l, {
232
440
  label: "Salva password",
233
441
  type: "submit",
234
442
  style: { width: "100%" }
@@ -238,4 +446,4 @@ var C = ({ open: e, onClose: t, onSubmit: n }) => {
238
446
  });
239
447
  };
240
448
  //#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 };
449
+ 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.84",
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",