@sensorario/sg-components 0.0.69 → 0.0.72

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 +90 -83
  2. package/dist/sg-components.css +1 -1
  3. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,21 +1,21 @@
1
- import { useEffect as e, useState as t } from "react";
2
- import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
1
+ import { forwardRef as e, useEffect as t, useImperativeHandle as n, useState as r } from "react";
2
+ import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
3
3
  //#region src/components/Button/Button.tsx
4
- var a = ({ label: e, ...t }) => /* @__PURE__ */ r("button", {
4
+ var s = ({ label: e, ...t }) => /* @__PURE__ */ a("button", {
5
5
  className: "custom-button",
6
6
  ...t,
7
7
  children: e
8
- }), o = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ i("footer", {
8
+ }), c = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ o("footer", {
9
9
  className: "footer",
10
- children: [/* @__PURE__ */ r("span", { children: /* @__PURE__ */ r("a", {
10
+ children: [/* @__PURE__ */ a("span", { children: /* @__PURE__ */ a("a", {
11
11
  href: t,
12
12
  children: e
13
- }) }), n.length > 0 && /* @__PURE__ */ r("nav", { children: n.map(({ label: e, href: t }) => /* @__PURE__ */ r("a", {
13
+ }) }), n.length > 0 && /* @__PURE__ */ a("nav", { children: n.map(({ label: e, href: t }) => /* @__PURE__ */ a("a", {
14
14
  href: t,
15
15
  style: { marginLeft: "16px" },
16
16
  children: e
17
17
  }, t)) })]
18
- }), s = [
18
+ }), l = [
19
19
  {
20
20
  label: "guitar",
21
21
  href: "https://guitar.simonegentili.com"
@@ -36,108 +36,108 @@ var a = ({ label: e, ...t }) => /* @__PURE__ */ r("button", {
36
36
  label: "code2image",
37
37
  href: "https://code2image.simonegentili.com"
38
38
  }
39
- ], c = () => /* @__PURE__ */ r(o, {
39
+ ], u = () => /* @__PURE__ */ a(c, {
40
40
  href: "https://simonegentili.com",
41
41
  copyright: "© 2026 simonegentili.com",
42
- links: s
43
- }), l = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: a }) => /* @__PURE__ */ r("header", {
44
- className: "header",
45
- children: /* @__PURE__ */ i("div", {
42
+ links: l
43
+ }), d = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: r, className: i }) => /* @__PURE__ */ a("header", {
44
+ className: i ? `header ${i}` : "header",
45
+ children: /* @__PURE__ */ o("div", {
46
46
  className: "header-container",
47
- children: [/* @__PURE__ */ r("div", {
47
+ children: [/* @__PURE__ */ a("div", {
48
48
  className: "logo",
49
49
  onClick: () => {
50
50
  e?.(n);
51
51
  },
52
- children: /* @__PURE__ */ r("h1", {
52
+ children: /* @__PURE__ */ a("h1", {
53
53
  className: "logo-text",
54
54
  children: t
55
55
  })
56
- }), a && /* @__PURE__ */ r("div", {
56
+ }), r && /* @__PURE__ */ a("div", {
57
57
  className: "header-actions",
58
- children: a
58
+ children: r
59
59
  })]
60
60
  })
61
- }), u = ({ onNavigate: e }) => /* @__PURE__ */ r(l, {
61
+ }), f = ({ onNavigate: e }) => /* @__PURE__ */ a(d, {
62
62
  onNavigate: e,
63
63
  title: "Simone Gentili - senior web developer, tech author and chess enthusiast",
64
64
  homePageKey: "home"
65
- }), d = ({ isLoggedIn: e, handleLogin: t, handleLogout: i }) => /* @__PURE__ */ r(n, { children: e ? /* @__PURE__ */ r("button", {
66
- onClick: i,
65
+ }), p = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ a(i, { children: e ? /* @__PURE__ */ a("button", {
66
+ onClick: n,
67
67
  style: {
68
68
  fontSize: "0.9rem",
69
69
  padding: "0.4rem 1rem"
70
70
  },
71
71
  children: "logout"
72
- }) : /* @__PURE__ */ r("button", {
72
+ }) : /* @__PURE__ */ a("button", {
73
73
  onClick: t,
74
74
  style: {
75
75
  fontSize: "0.9rem",
76
76
  padding: "0.4rem 1rem"
77
77
  },
78
78
  children: "Login"
79
- }) }), f = ({ open: e, onClose: t, title: n, children: a }) => e ? /* @__PURE__ */ r("div", {
79
+ }) }), m = ({ open: e, onClose: t, title: n, children: r }) => e ? /* @__PURE__ */ a("div", {
80
80
  className: "modal-overlay",
81
- children: /* @__PURE__ */ i("div", {
81
+ children: /* @__PURE__ */ o("div", {
82
82
  className: "modal-content",
83
83
  children: [
84
- n && /* @__PURE__ */ r("h2", {
84
+ n && /* @__PURE__ */ a("h2", {
85
85
  className: "modal-title",
86
86
  children: n
87
87
  }),
88
- /* @__PURE__ */ r("button", {
88
+ /* @__PURE__ */ a("button", {
89
89
  className: "modal-close",
90
90
  onClick: t,
91
91
  children: "×"
92
92
  }),
93
- /* @__PURE__ */ r("div", {
93
+ /* @__PURE__ */ a("div", {
94
94
  className: "modal-children",
95
- children: a
95
+ children: r
96
96
  })
97
97
  ]
98
98
  })
99
- }) : null, p = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ i("div", {
99
+ }) : null, h = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ o("div", {
100
100
  className: "input-wrapper",
101
- children: [e && /* @__PURE__ */ r("label", {
101
+ children: [e && /* @__PURE__ */ a("label", {
102
102
  className: "input-label",
103
103
  children: e
104
- }), /* @__PURE__ */ r("input", {
104
+ }), /* @__PURE__ */ a("input", {
105
105
  className: `input-field${t ? " input-field--invalid" : ""}`,
106
106
  ...n
107
107
  })]
108
- }), m = ({ label: e, ...t }) => /* @__PURE__ */ i("div", {
108
+ }), g = ({ label: e, ...t }) => /* @__PURE__ */ o("div", {
109
109
  className: "input-wrapper",
110
- children: [e && /* @__PURE__ */ r("label", {
110
+ children: [e && /* @__PURE__ */ a("label", {
111
111
  className: "input-label",
112
112
  children: e
113
- }), /* @__PURE__ */ r("input", {
113
+ }), /* @__PURE__ */ a("input", {
114
114
  type: "password",
115
115
  className: "input-field",
116
116
  ...t
117
117
  })]
118
- }), h = ({ open: e, onClose: n, onLogin: o }) => {
119
- let [s, c] = t(""), [l, u] = t("");
120
- return /* @__PURE__ */ r(f, {
118
+ }), _ = ({ open: e, onClose: t, onLogin: n }) => {
119
+ let [i, c] = r(""), [l, u] = r("");
120
+ return /* @__PURE__ */ a(m, {
121
121
  open: e,
122
- onClose: n,
122
+ onClose: t,
123
123
  title: "Login",
124
- children: /* @__PURE__ */ i("form", {
124
+ children: /* @__PURE__ */ o("form", {
125
125
  onSubmit: (e) => {
126
- e.preventDefault(), o(s, l);
126
+ e.preventDefault(), n(i, l);
127
127
  },
128
128
  children: [
129
- /* @__PURE__ */ r(p, {
129
+ /* @__PURE__ */ a(h, {
130
130
  label: "Username",
131
- value: s,
131
+ value: i,
132
132
  onChange: (e) => c(e.target.value),
133
133
  autoFocus: !0
134
134
  }),
135
- /* @__PURE__ */ r(m, {
135
+ /* @__PURE__ */ a(g, {
136
136
  label: "Password",
137
137
  value: l,
138
138
  onChange: (e) => u(e.target.value)
139
139
  }),
140
- /* @__PURE__ */ r(a, {
140
+ /* @__PURE__ */ a(s, {
141
141
  label: "Login",
142
142
  type: "submit",
143
143
  style: { width: "100%" }
@@ -145,83 +145,90 @@ var a = ({ label: e, ...t }) => /* @__PURE__ */ r("button", {
145
145
  ]
146
146
  })
147
147
  });
148
- }, g = "simonegentili.com-access-token", _ = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), v = (e) => {
148
+ }, v = "simonegentili.com-access-token", y = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), b = (e) => {
149
149
  let t = document.cookie.split("; ").find((t) => t.startsWith(`${e}=`));
150
150
  return t ? t.slice(e.length + 1) : null;
151
- }, y = (e, t) => {
151
+ }, x = (e, t) => {
152
152
  try {
153
153
  return JSON.parse(atob(e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))[t] ?? null;
154
154
  } catch {
155
155
  return null;
156
156
  }
157
- }, b = ({ title: a = "Quadrato", homePageKey: o = "home", onNavigate: s, cookieName: c = g, username: u = null, usernameJwtField: f = "sub", onLogin: p, onLogout: m, onUserAuthenticated: b }) => {
158
- let [x, S] = t(() => _(c)), [C, w] = t(!1), T = u ?? (x ? y(v(c) ?? "", f) : null);
159
- return e(() => {
160
- b?.(x, x ? T : null);
161
- }, []), /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(l, {
162
- onNavigate: s,
163
- title: a,
164
- homePageKey: o,
165
- children: /* @__PURE__ */ i("div", {
157
+ }, S = e(({ title: e = "Quadrato", homePageKey: s = "home", onNavigate: c, cookieName: l = v, username: u = null, usernameJwtField: f = "sub", onLogin: m, onLogout: h, onUserAuthenticated: g }, S) => {
158
+ let [C, w] = r(() => y(l)), [T, E] = r(!1);
159
+ n(S, () => ({ openLoginModal: () => E(!0) }));
160
+ let D = u ?? (C ? x(b(l) ?? "", f) : null);
161
+ return t(() => {
162
+ g?.(C, C ? D : null);
163
+ }, []), /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(d, {
164
+ onNavigate: c,
165
+ title: e,
166
+ homePageKey: s,
167
+ className: "quadrato-header",
168
+ children: /* @__PURE__ */ o("div", {
166
169
  className: "quadrato-header-auth",
167
- children: [x && T && /* @__PURE__ */ r("span", {
170
+ children: [C && D && /* @__PURE__ */ a("span", {
168
171
  className: "quadrato-header-username",
169
- children: T
170
- }), /* @__PURE__ */ r(d, {
171
- isLoggedIn: x,
172
- handleLogin: () => w(!0),
172
+ children: D
173
+ }), /* @__PURE__ */ a(p, {
174
+ isLoggedIn: C,
175
+ handleLogin: () => E(!0),
173
176
  handleLogout: () => {
174
- m?.();
175
- let e = _(c);
176
- S(e), b?.(e, null);
177
+ h?.();
178
+ let e = y(l);
179
+ w(e), g?.(e, null);
177
180
  }
178
181
  })]
179
182
  })
180
- }), /* @__PURE__ */ r(h, {
181
- open: C,
182
- onClose: () => w(!1),
183
+ }), /* @__PURE__ */ a(_, {
184
+ open: T,
185
+ onClose: () => E(!1),
183
186
  onLogin: async (e, t) => {
184
- await p(e, t);
185
- let n = _(c);
186
- S(n), w(!1), b?.(n, n ? u ?? e : null);
187
+ await m(e, t);
188
+ let n = y(l);
189
+ w(n), E(!1), g?.(n, n ? u ?? e : null);
187
190
  }
188
191
  })] });
189
- }, x = ({ open: e, onClose: n, onSubmit: o }) => {
190
- let [s, c] = t(""), [l, u] = t(""), [d, p] = t("");
191
- return /* @__PURE__ */ r(f, {
192
+ });
193
+ S.displayName = "QuadratoHeader";
194
+ //#endregion
195
+ //#region src/components/SetPasswordModal/SetPasswordModal.tsx
196
+ var C = ({ open: e, onClose: t, onSubmit: n }) => {
197
+ let [i, c] = r(""), [l, u] = r(""), [d, f] = r("");
198
+ return /* @__PURE__ */ a(m, {
192
199
  open: e,
193
- onClose: n,
200
+ onClose: t,
194
201
  title: "Imposta una nuova password",
195
- children: /* @__PURE__ */ i("form", {
202
+ children: /* @__PURE__ */ o("form", {
196
203
  className: "set-password-modal-form",
197
204
  onSubmit: (e) => {
198
- if (e.preventDefault(), s === "" || l === "") {
199
- p("Inserisci ed conferma la nuova password.");
205
+ if (e.preventDefault(), i === "" || l === "") {
206
+ f("Inserisci ed conferma la nuova password.");
200
207
  return;
201
208
  }
202
- if (s !== l) {
203
- p("Le password non coincidono.");
209
+ if (i !== l) {
210
+ f("Le password non coincidono.");
204
211
  return;
205
212
  }
206
- p(""), o(s);
213
+ f(""), n(i);
207
214
  },
208
215
  children: [
209
- /* @__PURE__ */ r(m, {
216
+ /* @__PURE__ */ a(g, {
210
217
  label: "Nuova password",
211
- value: s,
218
+ value: i,
212
219
  onChange: (e) => c(e.target.value),
213
220
  autoFocus: !0
214
221
  }),
215
- /* @__PURE__ */ r(m, {
222
+ /* @__PURE__ */ a(g, {
216
223
  label: "Conferma password",
217
224
  value: l,
218
225
  onChange: (e) => u(e.target.value)
219
226
  }),
220
- d && /* @__PURE__ */ r("p", {
227
+ d && /* @__PURE__ */ a("p", {
221
228
  className: "set-password-modal-error",
222
229
  children: d
223
230
  }),
224
- /* @__PURE__ */ r(a, {
231
+ /* @__PURE__ */ a(s, {
225
232
  label: "Salva password",
226
233
  type: "submit",
227
234
  style: { width: "100%" }
@@ -231,4 +238,4 @@ var a = ({ label: e, ...t }) => /* @__PURE__ */ r("button", {
231
238
  });
232
239
  };
233
240
  //#endregion
234
- export { d as Authenticator, a as Button, o as Footer, l as Header, b as QuadratoHeader, c as SGFooter, u as SGHeader, x as SetPasswordModal };
241
+ export { p as Authenticator, s as Button, c as Footer, d as Header, S as QuadratoHeader, u as SGFooter, f as SGHeader, C as SetPasswordModal };
package/dist/sg-components.css CHANGED
@@ -1,2 +1,2 @@
1
- .custom-button{border-radius:var(--primary-radius);border:1px solid var(--primary-border);background:var(--primary-bg);cursor:pointer;font-size:var(--primary-font);font-family:var(--font-family);padding:8px 16px;transition:background .2s}.custom-button:hover{background:var(--primary-hover-bg)}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-children{font-family:var(--font-family);padding:16px}.modal-content{background:var(--modal-bg);font-size:var(--primary-font);border-radius:8px;min-width:320px;position:relative;box-shadow:0 2px 16px #00000026}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);background-color:var(--primary-bg);font-size:var(--primary-font);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);margin-top:0;padding:16px}.modal-close{cursor:pointer;background:0 0;border:none;font-size:20px;position:absolute;top:8px;right:8px}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:#ffe5e5;border-color:#c00}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{border-radius:var(--radius);width:calc(100% - 16px);font-size:var(--primary-font);border-style:solid;border-width:1px;padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:#333}:root{--unit:3px;--primary-bg:#f5f5f5;--primary-border:#ccc;--radius:calc(var(--unit) * 2);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:#e0e0e0;--modal-bg:#fff;--modal-overlay:#0000004d;--modal-title-color:#222;--input-bg:#fff;--input-border:#ccc;--input-radius:var(--radius);--input-font:1rem;--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5)}.theme-dark{--primary-bg:#222;--primary-border:#444;--primary-font:1rem;--font-family:"Inter", Arial, sans-serif;--primary-hover-bg:#333;--modal-bg:#222;--modal-title-color:#fff;--input-bg:#333;--input-border:#555;--input-font:1rem}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:#d32f2f;font-size:var(--primary-font);margin:0}
1
+ .custom-button{border-radius:var(--primary-radius);border:1px solid var(--primary-border);background:var(--primary-bg);cursor:pointer;font-size:var(--primary-font);font-family:var(--font-family);padding:8px 16px;transition:background .2s}.custom-button:hover{background:var(--primary-hover-bg)}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-children{font-family:var(--font-family);padding:16px}.modal-content{background:var(--modal-bg);font-size:var(--primary-font);border-radius:8px;min-width:320px;position:relative;box-shadow:0 2px 16px #00000026}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);background-color:var(--primary-bg);font-size:var(--primary-font);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);margin-top:0;padding:16px}.modal-close{cursor:pointer;background:0 0;border:none;font-size:20px;position:absolute;top:8px;right:8px}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:#ffe5e5;border-color:#c00}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{border-radius:var(--radius);width:calc(100% - 16px);font-size:var(--primary-font);border-style:solid;border-width:1px;padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.header.quadrato-header{z-index:999}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:#333}:root{--unit:3px;--primary-bg:#f5f5f5;--primary-border:#ccc;--radius:calc(var(--unit) * 2);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:#e0e0e0;--modal-bg:#fff;--modal-overlay:#0000004d;--modal-title-color:#222;--input-bg:#fff;--input-border:#ccc;--input-radius:var(--radius);--input-font:1rem;--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5)}.theme-dark{--primary-bg:#222;--primary-border:#444;--primary-font:1rem;--font-family:"Inter", Arial, sans-serif;--primary-hover-bg:#333;--modal-bg:#222;--modal-title-color:#fff;--input-bg:#333;--input-border:#555;--input-font:1rem}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:#d32f2f;font-size:var(--primary-font);margin:0}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sensorario/sg-components",
3
- "version": "0.0.69",
3
+ "version": "0.0.72",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "scripts": {