@sensorario/sg-components 0.0.90 → 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 +308 -152
  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,41 +233,41 @@ 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 = "simonegentili.com-cookie-consent", p = 3600 * 24 * 365;
202
- function m() {
203
- return document.cookie.split("; ").some((e) => e.startsWith(`${f}=`));
204
- }
250
+ }), p = "simonegentili.com-cookie-consent", m = 3600 * 24 * 365;
205
251
  function h() {
206
- document.cookie = `${f}=accepted; path=/; domain=.simonegentili.com; max-age=${p}; secure; samesite=strict`;
252
+ return document.cookie.split("; ").some((e) => e.startsWith(`${p}=`));
207
253
  }
208
- var g = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
209
- let [t, r] = i(!1);
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);
210
259
  return n(() => {
211
- r(!m());
212
- }, []), t ? /* @__PURE__ */ s("div", {
260
+ r(!h());
261
+ }, []), t ? /* @__PURE__ */ c("div", {
213
262
  className: "cookie-consent",
214
263
  role: "region",
215
264
  "aria-label": "Informativa sui cookie",
216
- children: [/* @__PURE__ */ s("p", {
265
+ children: [/* @__PURE__ */ c("p", {
217
266
  className: "cookie-consent-text",
218
267
  children: [
219
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",
220
269
  " ",
221
- /* @__PURE__ */ o("a", {
270
+ /* @__PURE__ */ s("a", {
222
271
  href: e,
223
272
  target: "_blank",
224
273
  rel: "noopener noreferrer",
@@ -226,15 +275,15 @@ var g = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
226
275
  }),
227
276
  "."
228
277
  ]
229
- }), /* @__PURE__ */ o(u, {
278
+ }), /* @__PURE__ */ s(d, {
230
279
  label: "Accetta",
231
280
  onClick: () => {
232
- h(), r(!1);
281
+ g(), r(!1);
233
282
  },
234
283
  className: "cookie-consent-accept"
235
284
  })]
236
285
  }) : null;
237
- }, _ = [
286
+ }, v = [
238
287
  {
239
288
  label: "guitar",
240
289
  href: "https://guitar.simonegentili.com"
@@ -255,63 +304,63 @@ var g = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
255
304
  label: "code2image",
256
305
  href: "https://code2image.simonegentili.com"
257
306
  }
258
- ], v = () => /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(d, {
307
+ ], y = () => /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(f, {
259
308
  href: "https://simonegentili.com",
260
309
  copyright: "© 2026 simonegentili.com",
261
- links: _
262
- }), /* @__PURE__ */ o(g, {})] }), y = ({ 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", {
263
312
  className: i ? `header ${i}` : "header",
264
- children: /* @__PURE__ */ s("div", {
313
+ children: /* @__PURE__ */ c("div", {
265
314
  className: "header-container",
266
- children: [/* @__PURE__ */ o("div", {
315
+ children: [/* @__PURE__ */ s("div", {
267
316
  className: "logo",
268
317
  onClick: () => {
269
318
  e?.(n);
270
319
  },
271
- children: /* @__PURE__ */ o("h1", {
320
+ children: /* @__PURE__ */ s("h1", {
272
321
  className: "logo-text",
273
322
  children: t
274
323
  })
275
- }), r && /* @__PURE__ */ o("div", {
324
+ }), r && /* @__PURE__ */ s("div", {
276
325
  className: "header-actions",
277
326
  children: r
278
327
  })]
279
328
  })
280
- }), b = ({ onNavigate: e }) => /* @__PURE__ */ o(y, {
329
+ }), x = ({ onNavigate: e }) => /* @__PURE__ */ s(b, {
281
330
  onNavigate: e,
282
331
  title: "Simone Gentili - senior web developer, tech author and chess enthusiast",
283
332
  homePageKey: "home"
284
- }), x = ({ 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", {
285
334
  onClick: n,
286
335
  style: {
287
336
  fontSize: "0.9rem",
288
337
  padding: "0.4rem 1rem"
289
338
  },
290
339
  children: "logout"
291
- }) : /* @__PURE__ */ o("button", {
340
+ }) : /* @__PURE__ */ s("button", {
292
341
  onClick: t,
293
342
  style: {
294
343
  fontSize: "0.9rem",
295
344
  padding: "0.4rem 1rem"
296
345
  },
297
346
  children: "Login"
298
- }) }), S = 220, C = ({ open: t, onClose: r, title: a, icon: c, children: l, buttons: d, footer: f, closeLabel: p = "Close", className: m }) => {
299
- let [h, g] = i(!1), [_, v] = 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({
300
349
  x: 0,
301
350
  y: 0
302
- }), y = e.useRef(null), [b, x] = i(!1), C = (e) => {
351
+ }), y = e.useRef(null), [b, x] = a(!1), S = (e) => {
303
352
  h || (g(!0), setTimeout(() => {
304
353
  g(!1), e();
305
- }, S));
354
+ }, C));
306
355
  };
307
356
  n(() => {
308
357
  if (!t) return;
309
358
  let e = (e) => {
310
- e.key === "Escape" && C(r);
359
+ e.key === "Escape" && S(r);
311
360
  };
312
361
  return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
313
362
  }, [t, r]);
314
- let [w, T] = i(t);
363
+ let [w, T] = a(t);
315
364
  if (t !== w && (T(t), t && v({
316
365
  x: 0,
317
366
  y: 0
@@ -335,10 +384,10 @@ var g = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
335
384
  function O() {
336
385
  y.current = null, x(!1);
337
386
  }
338
- return /* @__PURE__ */ o("div", {
387
+ return /* @__PURE__ */ s("div", {
339
388
  className: `modal-overlay${h ? " modal-overlay-closing" : ""}`,
340
- onClick: () => C(r),
341
- children: /* @__PURE__ */ s("div", {
389
+ onClick: () => S(r),
390
+ children: /* @__PURE__ */ c("div", {
342
391
  className: `modal-content${m ? ` ${m}` : ""}${h ? " modal-content-closing" : ""}`,
343
392
  style: {
344
393
  "--drag-x": `${_.x}px`,
@@ -346,92 +395,92 @@ var g = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
346
395
  },
347
396
  onClick: (e) => e.stopPropagation(),
348
397
  children: [
349
- /* @__PURE__ */ s("div", {
398
+ /* @__PURE__ */ c("div", {
350
399
  className: `modal-header${b ? " modal-header-dragging" : ""}`,
351
400
  onPointerDown: E,
352
401
  onPointerMove: D,
353
402
  onPointerUp: O,
354
403
  onPointerCancel: O,
355
404
  children: [
356
- c && /* @__PURE__ */ o("span", {
405
+ o && /* @__PURE__ */ s("span", {
357
406
  className: "modal-icon",
358
- children: c
407
+ children: o
359
408
  }),
360
- a && /* @__PURE__ */ o("h2", {
409
+ i && /* @__PURE__ */ s("h2", {
361
410
  className: "modal-title",
362
- children: a
411
+ children: i
363
412
  }),
364
- /* @__PURE__ */ o("button", {
413
+ /* @__PURE__ */ s("button", {
365
414
  type: "button",
366
415
  className: "modal-close",
367
416
  "aria-label": p,
368
- onClick: () => C(r),
417
+ onClick: () => S(r),
369
418
  disabled: h,
370
419
  children: "×"
371
420
  })
372
421
  ]
373
422
  }),
374
- /* @__PURE__ */ o("div", {
423
+ /* @__PURE__ */ s("div", {
375
424
  className: "modal-children",
376
425
  children: l
377
426
  }),
378
- d && /* @__PURE__ */ o("div", {
427
+ u && /* @__PURE__ */ s("div", {
379
428
  className: "modal-footer",
380
- children: d.map((e, t) => /* @__PURE__ */ o(u, {
429
+ children: u.map((e, t) => /* @__PURE__ */ s(d, {
381
430
  label: e.label,
382
- onClick: () => C(e.onClick),
431
+ onClick: () => S(e.onClick),
383
432
  disabled: h
384
433
  }, t))
385
434
  }),
386
- f && /* @__PURE__ */ o("div", {
435
+ f && /* @__PURE__ */ s("div", {
387
436
  className: "modal-footer",
388
437
  children: f
389
438
  })
390
439
  ]
391
440
  })
392
441
  });
393
- }, w = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ s("div", {
442
+ }, T = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ c("div", {
394
443
  className: "input-wrapper",
395
- children: [e && /* @__PURE__ */ o("label", {
444
+ children: [e && /* @__PURE__ */ s("label", {
396
445
  className: "input-label",
397
446
  children: e
398
- }), /* @__PURE__ */ o("input", {
447
+ }), /* @__PURE__ */ s("input", {
399
448
  className: `input-field${t ? " input-field--invalid" : ""}`,
400
449
  ...n
401
450
  })]
402
- }), T = ({ label: e, ...t }) => /* @__PURE__ */ s("div", {
451
+ }), E = ({ label: e, ...t }) => /* @__PURE__ */ c("div", {
403
452
  className: "input-wrapper",
404
- children: [e && /* @__PURE__ */ o("label", {
453
+ children: [e && /* @__PURE__ */ s("label", {
405
454
  className: "input-label",
406
455
  children: e
407
- }), /* @__PURE__ */ o("input", {
456
+ }), /* @__PURE__ */ s("input", {
408
457
  type: "password",
409
458
  className: "input-field",
410
459
  ...t
411
460
  })]
412
- }), E = ({ open: e, onClose: t, onLogin: n }) => {
413
- let [r, a] = i(""), [c, l] = i("");
414
- return /* @__PURE__ */ o(C, {
461
+ }), D = ({ open: e, onClose: t, onLogin: n }) => {
462
+ let [r, i] = a(""), [o, l] = a("");
463
+ return /* @__PURE__ */ s(w, {
415
464
  open: e,
416
465
  onClose: t,
417
466
  title: "Login",
418
- children: /* @__PURE__ */ s("form", {
467
+ children: /* @__PURE__ */ c("form", {
419
468
  onSubmit: (e) => {
420
- e.preventDefault(), n(r, c);
469
+ e.preventDefault(), n(r, o);
421
470
  },
422
471
  children: [
423
- /* @__PURE__ */ o(w, {
472
+ /* @__PURE__ */ s(T, {
424
473
  label: "Username",
425
474
  value: r,
426
- onChange: (e) => a(e.target.value),
475
+ onChange: (e) => i(e.target.value),
427
476
  autoFocus: !0
428
477
  }),
429
- /* @__PURE__ */ o(T, {
478
+ /* @__PURE__ */ s(E, {
430
479
  label: "Password",
431
- value: c,
480
+ value: o,
432
481
  onChange: (e) => l(e.target.value)
433
482
  }),
434
- /* @__PURE__ */ o(u, {
483
+ /* @__PURE__ */ s(d, {
435
484
  label: "Login",
436
485
  type: "submit",
437
486
  style: { width: "100%" }
@@ -439,90 +488,90 @@ var g = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
439
488
  ]
440
489
  })
441
490
  });
442
- }, D = "simonegentili.com-access-token", O = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), k = (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) => {
443
492
  let t = document.cookie.split("; ").find((t) => t.startsWith(`${e}=`));
444
493
  return t ? t.slice(e.length + 1) : null;
445
- }, A = (e, t) => {
494
+ }, j = (e, t) => {
446
495
  try {
447
496
  return JSON.parse(atob(e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))[t] ?? null;
448
497
  } catch {
449
498
  return null;
450
499
  }
451
- }, j = t(({ title: e = "Quadrato", homePageKey: t = "home", onNavigate: c, cookieName: l = D, username: u = null, usernameJwtField: d = "sub", onLogin: f, onLogout: p, onUserAuthenticated: m }, h) => {
452
- let [g, _] = i(() => O(l)), [v, b] = i(!1);
453
- r(h, () => ({ openLoginModal: () => b(!0) }));
454
- let S = u ?? (g ? A(k(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);
455
504
  return n(() => {
456
- m?.(g, g ? S : null);
457
- }, []), /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(y, {
458
- onNavigate: c,
505
+ m?.(g, g ? x : null);
506
+ }, []), /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(b, {
507
+ onNavigate: i,
459
508
  title: e,
460
509
  homePageKey: t,
461
510
  className: "quadrato-header",
462
- children: /* @__PURE__ */ s("div", {
511
+ children: /* @__PURE__ */ c("div", {
463
512
  className: "quadrato-header-auth",
464
- children: [g && S && /* @__PURE__ */ o("span", {
513
+ children: [g && x && /* @__PURE__ */ s("span", {
465
514
  className: "quadrato-header-username",
466
- children: S
467
- }), /* @__PURE__ */ o(x, {
515
+ children: x
516
+ }), /* @__PURE__ */ s(S, {
468
517
  isLoggedIn: g,
469
- handleLogin: () => b(!0),
518
+ handleLogin: () => y(!0),
470
519
  handleLogout: () => {
471
520
  p?.();
472
- let e = O(l);
521
+ let e = k(l);
473
522
  _(e), m?.(e, null);
474
523
  }
475
524
  })]
476
525
  })
477
- }), /* @__PURE__ */ o(E, {
526
+ }), /* @__PURE__ */ s(D, {
478
527
  open: v,
479
- onClose: () => b(!1),
528
+ onClose: () => y(!1),
480
529
  onLogin: async (e, t) => {
481
530
  await f(e, t);
482
- let n = O(l);
483
- _(n), b(!1), m?.(n, n ? u ?? e : null);
531
+ let n = k(l);
532
+ _(n), y(!1), m?.(n, n ? u ?? e : null);
484
533
  }
485
534
  })] });
486
535
  });
487
- j.displayName = "QuadratoHeader";
536
+ M.displayName = "QuadratoHeader";
488
537
  //#endregion
489
538
  //#region src/components/SetPasswordModal/SetPasswordModal.tsx
490
- var M = ({ open: e, onClose: t, onSubmit: n }) => {
491
- let [r, a] = i(""), [c, l] = i(""), [d, f] = i("");
492
- return /* @__PURE__ */ o(C, {
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, {
493
542
  open: e,
494
543
  onClose: t,
495
544
  title: "Imposta una nuova password",
496
- children: /* @__PURE__ */ s("form", {
545
+ children: /* @__PURE__ */ c("form", {
497
546
  className: "set-password-modal-form",
498
547
  onSubmit: (e) => {
499
- if (e.preventDefault(), r === "" || c === "") {
548
+ if (e.preventDefault(), r === "" || o === "") {
500
549
  f("Inserisci ed conferma la nuova password.");
501
550
  return;
502
551
  }
503
- if (r !== c) {
552
+ if (r !== o) {
504
553
  f("Le password non coincidono.");
505
554
  return;
506
555
  }
507
556
  f(""), n(r);
508
557
  },
509
558
  children: [
510
- /* @__PURE__ */ o(T, {
559
+ /* @__PURE__ */ s(E, {
511
560
  label: "Nuova password",
512
561
  value: r,
513
- onChange: (e) => a(e.target.value),
562
+ onChange: (e) => i(e.target.value),
514
563
  autoFocus: !0
515
564
  }),
516
- /* @__PURE__ */ o(T, {
565
+ /* @__PURE__ */ s(E, {
517
566
  label: "Conferma password",
518
- value: c,
567
+ value: o,
519
568
  onChange: (e) => l(e.target.value)
520
569
  }),
521
- d && /* @__PURE__ */ o("p", {
570
+ u && /* @__PURE__ */ s("p", {
522
571
  className: "set-password-modal-error",
523
- children: d
572
+ children: u
524
573
  }),
525
- /* @__PURE__ */ o(u, {
574
+ /* @__PURE__ */ s(d, {
526
575
  label: "Salva password",
527
576
  type: "submit",
528
577
  style: { width: "100%" }
@@ -530,6 +579,113 @@ var M = ({ open: e, onClose: t, onSubmit: n }) => {
530
579
  ]
531
580
  })
532
581
  });
533
- };
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
+ });
534
690
  //#endregion
535
- export { x as Authenticator, u as Button, g as CookieConsent, d as Footer, y as Header, l as Icon, C as Modal, j as QuadratoHeader, v as SGFooter, b as SGHeader, M 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}.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}: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.90",
3
+ "version": "0.0.93",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "scripts": {