@sensorario/sg-components 0.0.89 → 0.0.93

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.es.js +346 -154
  2. package/dist/sg-components.css +1 -1
  3. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,169 +1,218 @@
1
- import e, { forwardRef as t, useEffect as n, useImperativeHandle as r, useState as i } from "react";
2
- import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
1
+ import e, { forwardRef as t, useEffect as n, useImperativeHandle as r, useRef as i, useState as a } from "react";
2
+ import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
3
3
  //#region src/components/Icon/Icon.tsx
4
- var c = {
5
- menu: /* @__PURE__ */ s(a, { children: [
6
- /* @__PURE__ */ o("line", {
4
+ var l = {
5
+ menu: /* @__PURE__ */ c(o, { children: [
6
+ /* @__PURE__ */ s("line", {
7
7
  x1: "3",
8
8
  y1: "6",
9
9
  x2: "21",
10
10
  y2: "6"
11
11
  }),
12
- /* @__PURE__ */ o("line", {
12
+ /* @__PURE__ */ s("line", {
13
13
  x1: "3",
14
14
  y1: "12",
15
15
  x2: "21",
16
16
  y2: "12"
17
17
  }),
18
- /* @__PURE__ */ o("line", {
18
+ /* @__PURE__ */ s("line", {
19
19
  x1: "3",
20
20
  y1: "18",
21
21
  x2: "21",
22
22
  y2: "18"
23
23
  })
24
24
  ] }),
25
- layout: /* @__PURE__ */ s(a, { children: [
26
- /* @__PURE__ */ o("rect", {
25
+ layout: /* @__PURE__ */ c(o, { children: [
26
+ /* @__PURE__ */ s("rect", {
27
27
  x: "3",
28
28
  y: "3",
29
29
  width: "18",
30
30
  height: "18",
31
31
  rx: "2"
32
32
  }),
33
- /* @__PURE__ */ o("line", {
33
+ /* @__PURE__ */ s("line", {
34
34
  x1: "3",
35
35
  y1: "9",
36
36
  x2: "21",
37
37
  y2: "9"
38
38
  }),
39
- /* @__PURE__ */ o("line", {
39
+ /* @__PURE__ */ s("line", {
40
40
  x1: "9",
41
41
  y1: "9",
42
42
  x2: "9",
43
43
  y2: "21"
44
44
  })
45
45
  ] }),
46
- edit: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("path", { d: "M4 20l1-4L16 5l3 3L8 19l-4 1z" }), /* @__PURE__ */ o("line", {
46
+ edit: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("path", { d: "M4 20l1-4L16 5l3 3L8 19l-4 1z" }), /* @__PURE__ */ s("line", {
47
47
  x1: "14",
48
48
  y1: "7",
49
49
  x2: "17",
50
50
  y2: "10"
51
51
  })] }),
52
- "help-circle": /* @__PURE__ */ s(a, { children: [
53
- /* @__PURE__ */ o("circle", {
52
+ "help-circle": /* @__PURE__ */ c(o, { children: [
53
+ /* @__PURE__ */ s("circle", {
54
54
  cx: "12",
55
55
  cy: "12",
56
56
  r: "9"
57
57
  }),
58
- /* @__PURE__ */ o("path", { d: "M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4" }),
59
- /* @__PURE__ */ o("line", {
58
+ /* @__PURE__ */ s("path", { d: "M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4" }),
59
+ /* @__PURE__ */ s("line", {
60
60
  x1: "12",
61
61
  y1: "17",
62
62
  x2: "12",
63
63
  y2: "17.01"
64
64
  })
65
65
  ] }),
66
- check: /* @__PURE__ */ o("polyline", { points: "4 12 9 17 20 6" }),
67
- x: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("line", {
66
+ check: /* @__PURE__ */ s("polyline", { points: "4 12 9 17 20 6" }),
67
+ x: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("line", {
68
68
  x1: "6",
69
69
  y1: "6",
70
70
  x2: "18",
71
71
  y2: "18"
72
- }), /* @__PURE__ */ o("line", {
72
+ }), /* @__PURE__ */ s("line", {
73
73
  x1: "18",
74
74
  y1: "6",
75
75
  x2: "6",
76
76
  y2: "18"
77
77
  })] }),
78
- "file-plus": /* @__PURE__ */ s(a, { children: [
79
- /* @__PURE__ */ o("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
80
- /* @__PURE__ */ o("polyline", { points: "14 3 14 8 19 8" }),
81
- /* @__PURE__ */ o("line", {
78
+ "file-plus": /* @__PURE__ */ c(o, { children: [
79
+ /* @__PURE__ */ s("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
80
+ /* @__PURE__ */ s("polyline", { points: "14 3 14 8 19 8" }),
81
+ /* @__PURE__ */ s("line", {
82
82
  x1: "12",
83
83
  y1: "12",
84
84
  x2: "12",
85
85
  y2: "17"
86
86
  }),
87
- /* @__PURE__ */ o("line", {
87
+ /* @__PURE__ */ s("line", {
88
88
  x1: "9.5",
89
89
  y1: "14.5",
90
90
  x2: "14.5",
91
91
  y2: "14.5"
92
92
  })
93
93
  ] }),
94
- link: /* @__PURE__ */ s(a, { children: [
95
- /* @__PURE__ */ o("path", { d: "M9 15l6-6" }),
96
- /* @__PURE__ */ o("path", { d: "M8 13.5 5.5 16a3 3 0 0 0 4.24 4.24l2.5-2.5" }),
97
- /* @__PURE__ */ o("path", { d: "M16 10.5 18.5 8a3 3 0 0 0-4.24-4.24l-2.5 2.5" })
94
+ link: /* @__PURE__ */ c(o, { children: [
95
+ /* @__PURE__ */ s("path", { d: "M9 15l6-6" }),
96
+ /* @__PURE__ */ s("path", { d: "M8 13.5 5.5 16a3 3 0 0 0 4.24 4.24l2.5-2.5" }),
97
+ /* @__PURE__ */ s("path", { d: "M16 10.5 18.5 8a3 3 0 0 0-4.24-4.24l-2.5 2.5" })
98
98
  ] }),
99
- "share-2": /* @__PURE__ */ s(a, { children: [
100
- /* @__PURE__ */ o("circle", {
99
+ "share-2": /* @__PURE__ */ c(o, { children: [
100
+ /* @__PURE__ */ s("circle", {
101
101
  cx: "6",
102
102
  cy: "12",
103
103
  r: "2.4"
104
104
  }),
105
- /* @__PURE__ */ o("circle", {
105
+ /* @__PURE__ */ s("circle", {
106
106
  cx: "18",
107
107
  cy: "6",
108
108
  r: "2.4"
109
109
  }),
110
- /* @__PURE__ */ o("circle", {
110
+ /* @__PURE__ */ s("circle", {
111
111
  cx: "18",
112
112
  cy: "18",
113
113
  r: "2.4"
114
114
  }),
115
- /* @__PURE__ */ o("line", {
115
+ /* @__PURE__ */ s("line", {
116
116
  x1: "8.2",
117
117
  y1: "10.8",
118
118
  x2: "15.8",
119
119
  y2: "7.2"
120
120
  }),
121
- /* @__PURE__ */ o("line", {
121
+ /* @__PURE__ */ s("line", {
122
122
  x1: "8.2",
123
123
  y1: "13.2",
124
124
  x2: "15.8",
125
125
  y2: "16.8"
126
126
  })
127
127
  ] }),
128
- download: /* @__PURE__ */ s(a, { children: [
129
- /* @__PURE__ */ o("path", { d: "M12 3v12" }),
130
- /* @__PURE__ */ o("polyline", { points: "7 11 12 16 17 11" }),
131
- /* @__PURE__ */ o("path", { d: "M5 19h14" })
128
+ download: /* @__PURE__ */ c(o, { children: [
129
+ /* @__PURE__ */ s("path", { d: "M12 3v12" }),
130
+ /* @__PURE__ */ s("polyline", { points: "7 11 12 16 17 11" }),
131
+ /* @__PURE__ */ s("path", { d: "M5 19h14" })
132
132
  ] }),
133
- book: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("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__ */ o("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" })] }),
134
- printer: /* @__PURE__ */ s(a, { children: [
135
- /* @__PURE__ */ o("path", { d: "M6 9V3h12v6" }),
136
- /* @__PURE__ */ o("rect", {
133
+ book: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("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__ */ s("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" })] }),
134
+ printer: /* @__PURE__ */ c(o, { children: [
135
+ /* @__PURE__ */ s("path", { d: "M6 9V3h12v6" }),
136
+ /* @__PURE__ */ s("rect", {
137
137
  x: "4",
138
138
  y: "9",
139
139
  width: "16",
140
140
  height: "8",
141
141
  rx: "1.5"
142
142
  }),
143
- /* @__PURE__ */ o("path", { d: "M6 17v4h12v-4" })
143
+ /* @__PURE__ */ s("path", { d: "M6 17v4h12v-4" })
144
144
  ] }),
145
- eye: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("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__ */ o("circle", {
145
+ eye: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("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__ */ s("circle", {
146
146
  cx: "12",
147
147
  cy: "12",
148
148
  r: "3"
149
149
  })] }),
150
- columns: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("rect", {
150
+ columns: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("rect", {
151
151
  x: "3",
152
152
  y: "4",
153
153
  width: "8",
154
154
  height: "16",
155
155
  rx: "1.5"
156
- }), /* @__PURE__ */ o("rect", {
156
+ }), /* @__PURE__ */ s("rect", {
157
157
  x: "13",
158
158
  y: "4",
159
159
  width: "8",
160
160
  height: "16",
161
161
  rx: "1.5"
162
162
  })] }),
163
- "tech-node": /* @__PURE__ */ o("polygon", { points: "12,3 19.8,7.5 19.8,16.5 12,21 4.2,16.5 4.2,7.5" }),
164
- "tech-go": /* @__PURE__ */ o("polygon", { points: "12,3 21,12 12,21 3,12" }),
165
- "tech-php": /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("path", { d: "M9 4c-1.5 0-2.5 1-2.5 2.5v3c0 1-.5 1.5-1.5 2.5 1 1 1.5 1.5 1.5 2.5v3c0 1.5 1 2.5 2.5 2.5" }), /* @__PURE__ */ o("path", { d: "M15 4c1.5 0 2.5 1 2.5 2.5v3c0 1 .5 1.5 1.5 2.5-1 1-1.5 1.5-1.5 2.5v3c0 1.5-1 2.5-2.5 2.5" })] })
166
- }, l = ({ name: e, size: t = 18, ...n }) => /* @__PURE__ */ o("svg", {
163
+ "sidebar-left": /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("rect", {
164
+ x: "3",
165
+ y: "4",
166
+ width: "18",
167
+ height: "16",
168
+ rx: "2"
169
+ }), /* @__PURE__ */ s("rect", {
170
+ x: "4",
171
+ y: "5",
172
+ width: "6",
173
+ height: "14",
174
+ rx: "1",
175
+ fill: "currentColor",
176
+ stroke: "none"
177
+ })] }),
178
+ "sidebar-right": /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("rect", {
179
+ x: "3",
180
+ y: "4",
181
+ width: "18",
182
+ height: "16",
183
+ rx: "2"
184
+ }), /* @__PURE__ */ s("rect", {
185
+ x: "14",
186
+ y: "5",
187
+ width: "6",
188
+ height: "14",
189
+ rx: "1",
190
+ fill: "currentColor",
191
+ stroke: "none"
192
+ })] }),
193
+ play: /* @__PURE__ */ s("polygon", { points: "5 3 19 12 5 21 5 3" }),
194
+ pause: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("rect", {
195
+ x: "6",
196
+ y: "4",
197
+ width: "4",
198
+ height: "16",
199
+ rx: "1"
200
+ }), /* @__PURE__ */ s("rect", {
201
+ x: "14",
202
+ y: "4",
203
+ width: "4",
204
+ height: "16",
205
+ rx: "1"
206
+ })] }),
207
+ "volume-2": /* @__PURE__ */ c(o, { children: [
208
+ /* @__PURE__ */ s("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
209
+ /* @__PURE__ */ s("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
210
+ /* @__PURE__ */ s("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
211
+ ] }),
212
+ "tech-node": /* @__PURE__ */ s("polygon", { points: "12,3 19.8,7.5 19.8,16.5 12,21 4.2,16.5 4.2,7.5" }),
213
+ "tech-go": /* @__PURE__ */ s("polygon", { points: "12,3 21,12 12,21 3,12" }),
214
+ "tech-php": /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("path", { d: "M9 4c-1.5 0-2.5 1-2.5 2.5v3c0 1-.5 1.5-1.5 2.5 1 1 1.5 1.5 1.5 2.5v3c0 1.5 1 2.5 2.5 2.5" }), /* @__PURE__ */ s("path", { d: "M15 4c1.5 0 2.5 1 2.5 2.5v3c0 1 .5 1.5 1.5 2.5-1 1-1.5 1.5-1.5 2.5v3c0 1.5-1 2.5-2.5 2.5" })] })
215
+ }, u = ({ name: e, size: t = 18, ...n }) => /* @__PURE__ */ s("svg", {
167
216
  className: "sg-icon",
168
217
  width: t,
169
218
  height: t,
@@ -175,8 +224,8 @@ var c = {
175
224
  strokeLinejoin: "round",
176
225
  "aria-hidden": "true",
177
226
  ...n,
178
- children: c[e]
179
- }), u = ({ label: e, icon: t, iconOnly: n, className: r, title: i, ...a }) => /* @__PURE__ */ s("button", {
227
+ children: l[e]
228
+ }), d = ({ label: e, icon: t, iconOnly: n, className: r, title: i, ...a }) => /* @__PURE__ */ c("button", {
180
229
  className: [
181
230
  "custom-button",
182
231
  t ? "custom-button-with-icon" : "",
@@ -184,21 +233,57 @@ var c = {
184
233
  ].filter(Boolean).join(" "),
185
234
  title: i ?? (n ? e : void 0),
186
235
  ...a,
187
- children: [t && /* @__PURE__ */ o(l, { name: t }), /* @__PURE__ */ o("span", {
236
+ children: [t && /* @__PURE__ */ s(u, { name: t }), /* @__PURE__ */ s("span", {
188
237
  className: n ? "custom-button-label-visually-hidden" : void 0,
189
238
  children: e
190
239
  })]
191
- }), d = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ s("footer", {
240
+ }), f = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ c("footer", {
192
241
  className: "footer",
193
- children: [/* @__PURE__ */ o("span", { children: /* @__PURE__ */ o("a", {
242
+ children: [/* @__PURE__ */ s("span", { children: /* @__PURE__ */ s("a", {
194
243
  href: t,
195
244
  children: e
196
- }) }), n.length > 0 && /* @__PURE__ */ o("nav", { children: n.map(({ label: e, href: t }) => /* @__PURE__ */ o("a", {
245
+ }) }), n.length > 0 && /* @__PURE__ */ s("nav", { children: n.map(({ label: e, href: t }) => /* @__PURE__ */ s("a", {
197
246
  href: t,
198
247
  style: { marginLeft: "16px" },
199
248
  children: e
200
249
  }, t)) })]
201
- }), f = [
250
+ }), p = "simonegentili.com-cookie-consent", m = 3600 * 24 * 365;
251
+ function h() {
252
+ return document.cookie.split("; ").some((e) => e.startsWith(`${p}=`));
253
+ }
254
+ function g() {
255
+ document.cookie = `${p}=accepted; path=/; domain=.simonegentili.com; max-age=${m}; secure; samesite=strict`;
256
+ }
257
+ var _ = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
258
+ let [t, r] = a(!1);
259
+ return n(() => {
260
+ r(!h());
261
+ }, []), t ? /* @__PURE__ */ c("div", {
262
+ className: "cookie-consent",
263
+ role: "region",
264
+ "aria-label": "Informativa sui cookie",
265
+ children: [/* @__PURE__ */ c("p", {
266
+ className: "cookie-consent-text",
267
+ children: [
268
+ "Questo sito utilizza esclusivamente cookie tecnici necessari al funzionamento (es. autenticazione). Non sono presenti cookie di profilazione o di terze parti. Per saperne di più consulta la",
269
+ " ",
270
+ /* @__PURE__ */ s("a", {
271
+ href: e,
272
+ target: "_blank",
273
+ rel: "noopener noreferrer",
274
+ children: "Privacy Policy"
275
+ }),
276
+ "."
277
+ ]
278
+ }), /* @__PURE__ */ s(d, {
279
+ label: "Accetta",
280
+ onClick: () => {
281
+ g(), r(!1);
282
+ },
283
+ className: "cookie-consent-accept"
284
+ })]
285
+ }) : null;
286
+ }, v = [
202
287
  {
203
288
  label: "guitar",
204
289
  href: "https://guitar.simonegentili.com"
@@ -219,183 +304,183 @@ var c = {
219
304
  label: "code2image",
220
305
  href: "https://code2image.simonegentili.com"
221
306
  }
222
- ], p = () => /* @__PURE__ */ o(d, {
307
+ ], y = () => /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(f, {
223
308
  href: "https://simonegentili.com",
224
309
  copyright: "© 2026 simonegentili.com",
225
- links: f
226
- }), m = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: r, className: i }) => /* @__PURE__ */ o("header", {
310
+ links: v
311
+ }), /* @__PURE__ */ s(_, {})] }), b = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: r, className: i }) => /* @__PURE__ */ s("header", {
227
312
  className: i ? `header ${i}` : "header",
228
- children: /* @__PURE__ */ s("div", {
313
+ children: /* @__PURE__ */ c("div", {
229
314
  className: "header-container",
230
- children: [/* @__PURE__ */ o("div", {
315
+ children: [/* @__PURE__ */ s("div", {
231
316
  className: "logo",
232
317
  onClick: () => {
233
318
  e?.(n);
234
319
  },
235
- children: /* @__PURE__ */ o("h1", {
320
+ children: /* @__PURE__ */ s("h1", {
236
321
  className: "logo-text",
237
322
  children: t
238
323
  })
239
- }), r && /* @__PURE__ */ o("div", {
324
+ }), r && /* @__PURE__ */ s("div", {
240
325
  className: "header-actions",
241
326
  children: r
242
327
  })]
243
328
  })
244
- }), h = ({ onNavigate: e }) => /* @__PURE__ */ o(m, {
329
+ }), x = ({ onNavigate: e }) => /* @__PURE__ */ s(b, {
245
330
  onNavigate: e,
246
331
  title: "Simone Gentili - senior web developer, tech author and chess enthusiast",
247
332
  homePageKey: "home"
248
- }), g = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ o(a, { children: e ? /* @__PURE__ */ o("button", {
333
+ }), S = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ s(o, { children: e ? /* @__PURE__ */ s("button", {
249
334
  onClick: n,
250
335
  style: {
251
336
  fontSize: "0.9rem",
252
337
  padding: "0.4rem 1rem"
253
338
  },
254
339
  children: "logout"
255
- }) : /* @__PURE__ */ o("button", {
340
+ }) : /* @__PURE__ */ s("button", {
256
341
  onClick: t,
257
342
  style: {
258
343
  fontSize: "0.9rem",
259
344
  padding: "0.4rem 1rem"
260
345
  },
261
346
  children: "Login"
262
- }) }), _ = 220, v = ({ open: t, onClose: r, title: a, icon: c, children: l, buttons: d, footer: f, closeLabel: p = "Close", className: m }) => {
263
- let [h, g] = i(!1), [v, y] = i({
347
+ }) }), C = 220, w = ({ open: t, onClose: r, title: i, icon: o, children: l, buttons: u, footer: f, closeLabel: p = "Close", className: m }) => {
348
+ let [h, g] = a(!1), [_, v] = a({
264
349
  x: 0,
265
350
  y: 0
266
- }), b = e.useRef(null), [x, S] = i(!1), C = (e) => {
351
+ }), y = e.useRef(null), [b, x] = a(!1), S = (e) => {
267
352
  h || (g(!0), setTimeout(() => {
268
353
  g(!1), e();
269
- }, _));
354
+ }, C));
270
355
  };
271
356
  n(() => {
272
357
  if (!t) return;
273
358
  let e = (e) => {
274
- e.key === "Escape" && C(r);
359
+ e.key === "Escape" && S(r);
275
360
  };
276
361
  return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
277
362
  }, [t, r]);
278
- let [w, T] = i(t);
279
- if (t !== w && (T(t), t && y({
363
+ let [w, T] = a(t);
364
+ if (t !== w && (T(t), t && v({
280
365
  x: 0,
281
366
  y: 0
282
367
  })), !t) return null;
283
368
  function E(e) {
284
- e.target.closest(".modal-close") || (b.current = {
369
+ e.target.closest(".modal-close") || (y.current = {
285
370
  pointerX: e.clientX,
286
371
  pointerY: e.clientY,
287
- offsetX: v.x,
288
- offsetY: v.y
289
- }, S(!0), e.currentTarget.setPointerCapture(e.pointerId));
372
+ offsetX: _.x,
373
+ offsetY: _.y
374
+ }, x(!0), e.currentTarget.setPointerCapture(e.pointerId));
290
375
  }
291
376
  function D(e) {
292
- if (!b.current) return;
293
- let { pointerX: t, pointerY: n, offsetX: r, offsetY: i } = b.current;
294
- y({
377
+ if (!y.current) return;
378
+ let { pointerX: t, pointerY: n, offsetX: r, offsetY: i } = y.current;
379
+ v({
295
380
  x: r + (e.clientX - t),
296
381
  y: i + (e.clientY - n)
297
382
  });
298
383
  }
299
384
  function O() {
300
- b.current = null, S(!1);
385
+ y.current = null, x(!1);
301
386
  }
302
- return /* @__PURE__ */ o("div", {
387
+ return /* @__PURE__ */ s("div", {
303
388
  className: `modal-overlay${h ? " modal-overlay-closing" : ""}`,
304
- onClick: () => C(r),
305
- children: /* @__PURE__ */ s("div", {
389
+ onClick: () => S(r),
390
+ children: /* @__PURE__ */ c("div", {
306
391
  className: `modal-content${m ? ` ${m}` : ""}${h ? " modal-content-closing" : ""}`,
307
392
  style: {
308
- "--drag-x": `${v.x}px`,
309
- "--drag-y": `${v.y}px`
393
+ "--drag-x": `${_.x}px`,
394
+ "--drag-y": `${_.y}px`
310
395
  },
311
396
  onClick: (e) => e.stopPropagation(),
312
397
  children: [
313
- /* @__PURE__ */ s("div", {
314
- className: `modal-header${x ? " modal-header-dragging" : ""}`,
398
+ /* @__PURE__ */ c("div", {
399
+ className: `modal-header${b ? " modal-header-dragging" : ""}`,
315
400
  onPointerDown: E,
316
401
  onPointerMove: D,
317
402
  onPointerUp: O,
318
403
  onPointerCancel: O,
319
404
  children: [
320
- c && /* @__PURE__ */ o("span", {
405
+ o && /* @__PURE__ */ s("span", {
321
406
  className: "modal-icon",
322
- children: c
407
+ children: o
323
408
  }),
324
- a && /* @__PURE__ */ o("h2", {
409
+ i && /* @__PURE__ */ s("h2", {
325
410
  className: "modal-title",
326
- children: a
411
+ children: i
327
412
  }),
328
- /* @__PURE__ */ o("button", {
413
+ /* @__PURE__ */ s("button", {
329
414
  type: "button",
330
415
  className: "modal-close",
331
416
  "aria-label": p,
332
- onClick: () => C(r),
417
+ onClick: () => S(r),
333
418
  disabled: h,
334
419
  children: "×"
335
420
  })
336
421
  ]
337
422
  }),
338
- /* @__PURE__ */ o("div", {
423
+ /* @__PURE__ */ s("div", {
339
424
  className: "modal-children",
340
425
  children: l
341
426
  }),
342
- d && /* @__PURE__ */ o("div", {
427
+ u && /* @__PURE__ */ s("div", {
343
428
  className: "modal-footer",
344
- children: d.map((e, t) => /* @__PURE__ */ o(u, {
429
+ children: u.map((e, t) => /* @__PURE__ */ s(d, {
345
430
  label: e.label,
346
- onClick: () => C(e.onClick),
431
+ onClick: () => S(e.onClick),
347
432
  disabled: h
348
433
  }, t))
349
434
  }),
350
- f && /* @__PURE__ */ o("div", {
435
+ f && /* @__PURE__ */ s("div", {
351
436
  className: "modal-footer",
352
437
  children: f
353
438
  })
354
439
  ]
355
440
  })
356
441
  });
357
- }, y = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ s("div", {
442
+ }, T = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ c("div", {
358
443
  className: "input-wrapper",
359
- children: [e && /* @__PURE__ */ o("label", {
444
+ children: [e && /* @__PURE__ */ s("label", {
360
445
  className: "input-label",
361
446
  children: e
362
- }), /* @__PURE__ */ o("input", {
447
+ }), /* @__PURE__ */ s("input", {
363
448
  className: `input-field${t ? " input-field--invalid" : ""}`,
364
449
  ...n
365
450
  })]
366
- }), b = ({ label: e, ...t }) => /* @__PURE__ */ s("div", {
451
+ }), E = ({ label: e, ...t }) => /* @__PURE__ */ c("div", {
367
452
  className: "input-wrapper",
368
- children: [e && /* @__PURE__ */ o("label", {
453
+ children: [e && /* @__PURE__ */ s("label", {
369
454
  className: "input-label",
370
455
  children: e
371
- }), /* @__PURE__ */ o("input", {
456
+ }), /* @__PURE__ */ s("input", {
372
457
  type: "password",
373
458
  className: "input-field",
374
459
  ...t
375
460
  })]
376
- }), x = ({ open: e, onClose: t, onLogin: n }) => {
377
- let [r, a] = i(""), [c, l] = i("");
378
- return /* @__PURE__ */ o(v, {
461
+ }), D = ({ open: e, onClose: t, onLogin: n }) => {
462
+ let [r, i] = a(""), [o, l] = a("");
463
+ return /* @__PURE__ */ s(w, {
379
464
  open: e,
380
465
  onClose: t,
381
466
  title: "Login",
382
- children: /* @__PURE__ */ s("form", {
467
+ children: /* @__PURE__ */ c("form", {
383
468
  onSubmit: (e) => {
384
- e.preventDefault(), n(r, c);
469
+ e.preventDefault(), n(r, o);
385
470
  },
386
471
  children: [
387
- /* @__PURE__ */ o(y, {
472
+ /* @__PURE__ */ s(T, {
388
473
  label: "Username",
389
474
  value: r,
390
- onChange: (e) => a(e.target.value),
475
+ onChange: (e) => i(e.target.value),
391
476
  autoFocus: !0
392
477
  }),
393
- /* @__PURE__ */ o(b, {
478
+ /* @__PURE__ */ s(E, {
394
479
  label: "Password",
395
- value: c,
480
+ value: o,
396
481
  onChange: (e) => l(e.target.value)
397
482
  }),
398
- /* @__PURE__ */ o(u, {
483
+ /* @__PURE__ */ s(d, {
399
484
  label: "Login",
400
485
  type: "submit",
401
486
  style: { width: "100%" }
@@ -403,90 +488,90 @@ var c = {
403
488
  ]
404
489
  })
405
490
  });
406
- }, S = "simonegentili.com-access-token", C = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), w = (e) => {
491
+ }, O = "simonegentili.com-access-token", k = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), A = (e) => {
407
492
  let t = document.cookie.split("; ").find((t) => t.startsWith(`${e}=`));
408
493
  return t ? t.slice(e.length + 1) : null;
409
- }, T = (e, t) => {
494
+ }, j = (e, t) => {
410
495
  try {
411
496
  return JSON.parse(atob(e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))[t] ?? null;
412
497
  } catch {
413
498
  return null;
414
499
  }
415
- }, E = t(({ title: e = "Quadrato", homePageKey: t = "home", onNavigate: c, cookieName: l = S, username: u = null, usernameJwtField: d = "sub", onLogin: f, onLogout: p, onUserAuthenticated: h }, _) => {
416
- let [v, y] = i(() => C(l)), [b, E] = i(!1);
417
- r(_, () => ({ openLoginModal: () => E(!0) }));
418
- let D = u ?? (v ? T(w(l) ?? "", d) : null);
500
+ }, M = t(({ title: e = "Quadrato", homePageKey: t = "home", onNavigate: i, cookieName: l = O, username: u = null, usernameJwtField: d = "sub", onLogin: f, onLogout: p, onUserAuthenticated: m }, h) => {
501
+ let [g, _] = a(() => k(l)), [v, y] = a(!1);
502
+ r(h, () => ({ openLoginModal: () => y(!0) }));
503
+ let x = u ?? (g ? j(A(l) ?? "", d) : null);
419
504
  return n(() => {
420
- h?.(v, v ? D : null);
421
- }, []), /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(m, {
422
- onNavigate: c,
505
+ m?.(g, g ? x : null);
506
+ }, []), /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(b, {
507
+ onNavigate: i,
423
508
  title: e,
424
509
  homePageKey: t,
425
510
  className: "quadrato-header",
426
- children: /* @__PURE__ */ s("div", {
511
+ children: /* @__PURE__ */ c("div", {
427
512
  className: "quadrato-header-auth",
428
- children: [v && D && /* @__PURE__ */ o("span", {
513
+ children: [g && x && /* @__PURE__ */ s("span", {
429
514
  className: "quadrato-header-username",
430
- children: D
431
- }), /* @__PURE__ */ o(g, {
432
- isLoggedIn: v,
433
- handleLogin: () => E(!0),
515
+ children: x
516
+ }), /* @__PURE__ */ s(S, {
517
+ isLoggedIn: g,
518
+ handleLogin: () => y(!0),
434
519
  handleLogout: () => {
435
520
  p?.();
436
- let e = C(l);
437
- y(e), h?.(e, null);
521
+ let e = k(l);
522
+ _(e), m?.(e, null);
438
523
  }
439
524
  })]
440
525
  })
441
- }), /* @__PURE__ */ o(x, {
442
- open: b,
443
- onClose: () => E(!1),
526
+ }), /* @__PURE__ */ s(D, {
527
+ open: v,
528
+ onClose: () => y(!1),
444
529
  onLogin: async (e, t) => {
445
530
  await f(e, t);
446
- let n = C(l);
447
- y(n), E(!1), h?.(n, n ? u ?? e : null);
531
+ let n = k(l);
532
+ _(n), y(!1), m?.(n, n ? u ?? e : null);
448
533
  }
449
534
  })] });
450
535
  });
451
- E.displayName = "QuadratoHeader";
536
+ M.displayName = "QuadratoHeader";
452
537
  //#endregion
453
538
  //#region src/components/SetPasswordModal/SetPasswordModal.tsx
454
- var D = ({ open: e, onClose: t, onSubmit: n }) => {
455
- let [r, a] = i(""), [c, l] = i(""), [d, f] = i("");
456
- return /* @__PURE__ */ o(v, {
539
+ var N = ({ open: e, onClose: t, onSubmit: n }) => {
540
+ let [r, i] = a(""), [o, l] = a(""), [u, f] = a("");
541
+ return /* @__PURE__ */ s(w, {
457
542
  open: e,
458
543
  onClose: t,
459
544
  title: "Imposta una nuova password",
460
- children: /* @__PURE__ */ s("form", {
545
+ children: /* @__PURE__ */ c("form", {
461
546
  className: "set-password-modal-form",
462
547
  onSubmit: (e) => {
463
- if (e.preventDefault(), r === "" || c === "") {
548
+ if (e.preventDefault(), r === "" || o === "") {
464
549
  f("Inserisci ed conferma la nuova password.");
465
550
  return;
466
551
  }
467
- if (r !== c) {
552
+ if (r !== o) {
468
553
  f("Le password non coincidono.");
469
554
  return;
470
555
  }
471
556
  f(""), n(r);
472
557
  },
473
558
  children: [
474
- /* @__PURE__ */ o(b, {
559
+ /* @__PURE__ */ s(E, {
475
560
  label: "Nuova password",
476
561
  value: r,
477
- onChange: (e) => a(e.target.value),
562
+ onChange: (e) => i(e.target.value),
478
563
  autoFocus: !0
479
564
  }),
480
- /* @__PURE__ */ o(b, {
565
+ /* @__PURE__ */ s(E, {
481
566
  label: "Conferma password",
482
- value: c,
567
+ value: o,
483
568
  onChange: (e) => l(e.target.value)
484
569
  }),
485
- d && /* @__PURE__ */ o("p", {
570
+ u && /* @__PURE__ */ s("p", {
486
571
  className: "set-password-modal-error",
487
- children: d
572
+ children: u
488
573
  }),
489
- /* @__PURE__ */ o(u, {
574
+ /* @__PURE__ */ s(d, {
490
575
  label: "Salva password",
491
576
  type: "submit",
492
577
  style: { width: "100%" }
@@ -494,6 +579,113 @@ var D = ({ open: e, onClose: t, onSubmit: n }) => {
494
579
  ]
495
580
  })
496
581
  });
497
- };
582
+ }, P = ({ value: e, onChange: t, swatches: r }) => {
583
+ let [o, l] = a(!1), u = i(null);
584
+ return n(() => {
585
+ if (!o) return;
586
+ let e = (e) => {
587
+ u.current && !u.current.contains(e.target) && l(!1);
588
+ }, t = (e) => {
589
+ e.key === "Escape" && l(!1);
590
+ };
591
+ return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
592
+ document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
593
+ };
594
+ }, [o]), /* @__PURE__ */ c("div", {
595
+ ref: u,
596
+ className: "sg-color-picker",
597
+ children: [/* @__PURE__ */ c("button", {
598
+ type: "button",
599
+ className: "sg-color-picker-toggle",
600
+ onClick: () => l((e) => !e),
601
+ children: [/* @__PURE__ */ s("span", {
602
+ className: "sg-color-picker-swatch",
603
+ style: { background: e }
604
+ }), /* @__PURE__ */ s("span", {
605
+ className: "sg-color-picker-toggle-label",
606
+ children: e
607
+ })]
608
+ }), o && /* @__PURE__ */ c("div", {
609
+ className: "sg-color-picker-popover",
610
+ children: [/* @__PURE__ */ s("div", {
611
+ className: "sg-color-picker-grid",
612
+ children: r.map((n) => /* @__PURE__ */ s("button", {
613
+ type: "button",
614
+ title: n,
615
+ className: `sg-color-picker-swatch-button${n.toLowerCase() === e?.toLowerCase() ? " active" : ""}`,
616
+ style: { background: n },
617
+ onClick: () => {
618
+ t(n), l(!1);
619
+ }
620
+ }, n))
621
+ }), /* @__PURE__ */ c("label", {
622
+ className: "sg-color-picker-custom",
623
+ children: ["Colore personalizzato", /* @__PURE__ */ s("input", {
624
+ type: "color",
625
+ value: e,
626
+ onChange: (e) => t(e.target.value)
627
+ })]
628
+ })]
629
+ })]
630
+ });
631
+ }, F = (e) => e.split(",")[0].replace(/'/g, ""), I = ({ value: e, onChange: t, options: r }) => {
632
+ let [o, l] = a(!1), u = i(null);
633
+ return n(() => {
634
+ if (!o) return;
635
+ let e = (e) => {
636
+ u.current && !u.current.contains(e.target) && l(!1);
637
+ }, t = (e) => {
638
+ e.key === "Escape" && l(!1);
639
+ };
640
+ return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
641
+ document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
642
+ };
643
+ }, [o]), /* @__PURE__ */ c("div", {
644
+ ref: u,
645
+ className: "sg-font-picker",
646
+ children: [/* @__PURE__ */ c("button", {
647
+ type: "button",
648
+ className: "sg-font-picker-toggle",
649
+ onClick: () => l((e) => !e),
650
+ style: { fontFamily: e },
651
+ children: [/* @__PURE__ */ s("span", {
652
+ className: "sg-font-picker-toggle-label",
653
+ children: F(e)
654
+ }), /* @__PURE__ */ s("span", {
655
+ className: "sg-font-picker-toggle-caret",
656
+ children: o ? "▲" : "▼"
657
+ })]
658
+ }), o && /* @__PURE__ */ s("ul", {
659
+ className: "sg-font-picker-list",
660
+ children: r.map((n) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("button", {
661
+ type: "button",
662
+ className: `sg-font-picker-option${n === e ? " active" : ""}`,
663
+ onClick: () => {
664
+ t(n), l(!1);
665
+ },
666
+ style: { fontFamily: n },
667
+ children: F(n)
668
+ }) }, n))
669
+ })]
670
+ });
671
+ }, L = ({ checked: e, onChange: t, label: n }) => /* @__PURE__ */ c("label", {
672
+ className: "sg-toggle",
673
+ children: [
674
+ /* @__PURE__ */ s("input", {
675
+ type: "checkbox",
676
+ checked: e,
677
+ onChange: (e) => t(e.target.checked),
678
+ className: "sg-toggle-input"
679
+ }),
680
+ /* @__PURE__ */ s("span", {
681
+ className: "sg-toggle-track",
682
+ children: /* @__PURE__ */ s("span", { className: "sg-toggle-thumb" })
683
+ }),
684
+ /* @__PURE__ */ s("span", {
685
+ className: "sg-toggle-label",
686
+ children: n
687
+ })
688
+ ]
689
+ });
498
690
  //#endregion
499
- export { g as Authenticator, u as Button, d as Footer, m as Header, l as Icon, v as Modal, E as QuadratoHeader, p as SGFooter, h as SGHeader, D as SetPasswordModal };
691
+ export { S as Authenticator, d as Button, P as ColorPicker, _ as CookieConsent, I as FontPicker, f as Footer, b as Header, u as Icon, w as Modal, M as QuadratoHeader, y as SGFooter, x as SGHeader, N as SetPasswordModal, L as Toggle };
package/dist/sg-components.css CHANGED
@@ -1,2 +1,2 @@
1
- .custom-button{border-radius:var(--button-radius);background:var(--button-bg);color:var(--button-color);cursor:pointer;font-size:var(--primary-font);font-weight:600;font-family:var(--font-family);box-shadow:var(--button-shadow);transition:background .15s var(--button-ease-standard), transform var(--button-ease-bounce) .2s;border:none;padding:8px 20px}.custom-button:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-1px)}.custom-button:active:not(:disabled){transform:scale(.97)}.custom-button:disabled{opacity:.6;cursor:default}.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{--drag-x:0px;--drag-y:0px;background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);min-width:320px;max-width:calc(100vw - 40px);max-height:90vh;transform:translate(var(--drag-x), var(--drag-y));flex-direction:column;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%{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}to{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}}@keyframes sg-modal-slide-out{0%{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}to{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}}.modal-header{background:var(--primary-bg);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);cursor:grab;touch-action:none;flex:none;align-items:center;gap:8px;padding:16px;display:flex}.modal-header-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.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);--button-bg:#6f9cf7;--button-bg-hover:#5480e6;--button-color:#fff;--button-radius:999px;--button-shadow:0 1px 2px #5480e61f, 0 1px 3px #5480e61a;--button-ease-standard:cubic-bezier(.4, 0, .2, 1);--button-ease-bounce:cubic-bezier(.34, 1.56, .64, 1)}.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;--button-bg:#6f9cf7;--button-bg-hover:#86aefc;--button-color:#fff}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(--button-radius);background:var(--button-bg);color:var(--button-color);cursor:pointer;font-size:var(--primary-font);font-weight:600;font-family:var(--font-family);box-shadow:var(--button-shadow);transition:background .15s var(--button-ease-standard), transform var(--button-ease-bounce) .2s;border:none;padding:8px 20px}.custom-button:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-1px)}.custom-button:active:not(:disabled){transform:scale(.97)}.custom-button:disabled{opacity:.6;cursor:default}.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}.cookie-consent{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;z-index:1000;box-sizing:border-box;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.cookie-consent-text{flex:320px;margin:0}.cookie-consent a{color:#1ea7fd;text-decoration:none}.cookie-consent a:hover{text-decoration:underline}.cookie-consent-accept{flex:none}.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{--drag-x:0px;--drag-y:0px;background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);min-width:320px;max-width:calc(100vw - 40px);max-height:90vh;transform:translate(var(--drag-x), var(--drag-y));flex-direction:column;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%{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}to{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}}@keyframes sg-modal-slide-out{0%{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}to{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}}.modal-header{background:var(--primary-bg);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);cursor:grab;touch-action:none;flex:none;align-items:center;gap:8px;padding:16px;display:flex}.modal-header-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.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}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}.sg-color-picker{font-family:var(--font-family);position:relative}.sg-color-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-family:inherit;font-size:13px;display:flex}.sg-color-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-color-picker-swatch{border:1px solid #00000026;border-radius:4px;flex:none;width:18px;height:18px}.sg-color-picker-popover{z-index:30;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--shadow-1);width:170px;padding:10px;position:absolute;top:calc(100% + 4px);left:0}.sg-color-picker-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.sg-color-picker-swatch-button{cursor:pointer;border:1px solid #00000026;border-radius:4px;width:20px;height:20px;padding:0}.sg-color-picker-swatch-button.active{border:2px solid var(--accent)}.sg-color-picker-custom{border-top:1px solid var(--input-border);color:var(--ink-muted);cursor:pointer;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:8px;font-size:11px;display:flex}.sg-color-picker-custom input[type=color]{cursor:pointer;border:none;width:26px;height:20px;padding:0}.sg-font-picker{font-family:var(--font-family);position:relative}.sg-font-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-size:13px;display:flex}.sg-font-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-font-picker-toggle-caret{opacity:.5;flex:none;font-size:10px}.sg-font-picker-list{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);max-height:260px;box-shadow:var(--shadow-1);z-index:30;margin:0;padding:4px 0;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.sg-font-picker-option{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:none;padding:8px 10px;font-size:15px;display:block}.sg-font-picker-option.active{background:var(--accent-soft)}: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);--button-bg:#6f9cf7;--button-bg-hover:#5480e6;--button-color:#fff;--button-radius:999px;--button-shadow:0 1px 2px #5480e61f, 0 1px 3px #5480e61a;--button-ease-standard:cubic-bezier(.4, 0, .2, 1);--button-ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--accent:#3d5fc4;--accent-strong:#2e4aa0;--accent-soft:#e2e7f8;--ink-muted:#647089;--shadow-1:0 1px 2px #0f172a14, 0 1px 3px #0f172a0f;--shadow-2:0 4px 12px #0f172a1f}.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;--button-bg:#6f9cf7;--button-bg-hover:#86aefc;--button-color:#fff;--accent:#6f9cf7;--accent-strong:#86aefc;--accent-soft:#6f9cf72e;--ink-muted:#9aa3b5;--shadow-1:0 1px 2px #0000004d, 0 1px 3px #0000003d;--shadow-2:0 4px 12px #0006}.sg-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family);align-items:center;gap:6px;display:flex}.sg-toggle-input{opacity:0;width:1px;height:1px;position:absolute}.sg-toggle-track{background:var(--input-border);border-radius:999px;flex:none;width:34px;height:20px;transition:background .15s cubic-bezier(.4,0,.2,1);position:relative}.sg-toggle-input:checked+.sg-toggle-track{background:var(--accent)}.sg-toggle-thumb{background:var(--input-bg);width:16px;height:16px;box-shadow:var(--shadow-1);border-radius:50%;transition:left .15s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px}.sg-toggle-input:checked+.sg-toggle-track .sg-toggle-thumb{left:16px}.sg-toggle-input:focus-visible+.sg-toggle-track{outline:2px solid var(--accent-strong);outline-offset:2px}.sg-toggle-label{color:var(--ink-muted);white-space:nowrap;font-size:13px}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sensorario/sg-components",
3
- "version": "0.0.89",
3
+ "version": "0.0.93",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "scripts": {