@sensorario/sg-components 0.0.67 → 0.0.68

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 +117 -43
  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 { useState as e } from "react";
2
- import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
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";
3
3
  //#region src/components/Button/Button.tsx
4
- var i = ({ label: e, ...t }) => /* @__PURE__ */ n("button", {
4
+ var a = ({ label: e, ...t }) => /* @__PURE__ */ r("button", {
5
5
  className: "custom-button",
6
6
  ...t,
7
7
  children: e
8
- }), a = ({ copyright: e = "© 2026 My Company", href: t = "#", links: i = [] }) => /* @__PURE__ */ r("footer", {
8
+ }), o = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ i("footer", {
9
9
  className: "footer",
10
- children: [/* @__PURE__ */ n("span", { children: /* @__PURE__ */ n("a", {
10
+ children: [/* @__PURE__ */ r("span", { children: /* @__PURE__ */ r("a", {
11
11
  href: t,
12
12
  children: e
13
- }) }), i.length > 0 && /* @__PURE__ */ n("nav", { children: i.map(({ label: e, href: t }) => /* @__PURE__ */ n("a", {
13
+ }) }), n.length > 0 && /* @__PURE__ */ r("nav", { children: n.map(({ label: e, href: t }) => /* @__PURE__ */ r("a", {
14
14
  href: t,
15
15
  style: { marginLeft: "16px" },
16
16
  children: e
17
17
  }, t)) })]
18
- }), o = [
18
+ }), s = [
19
19
  {
20
20
  label: "guitar",
21
21
  href: "https://guitar.simonegentili.com"
@@ -36,109 +36,183 @@ var i = ({ label: e, ...t }) => /* @__PURE__ */ n("button", {
36
36
  label: "code2image",
37
37
  href: "https://code2image.simonegentili.com"
38
38
  }
39
- ], s = () => /* @__PURE__ */ n(a, {
39
+ ], c = () => /* @__PURE__ */ r(o, {
40
40
  href: "https://simonegentili.com",
41
41
  copyright: "© 2026 simonegentili.com",
42
- links: o
43
- }), c = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: r = "home" }) => /* @__PURE__ */ n("header", {
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
44
  className: "header",
45
- children: /* @__PURE__ */ n("div", {
45
+ children: /* @__PURE__ */ i("div", {
46
46
  className: "header-container",
47
- children: /* @__PURE__ */ n("div", {
47
+ children: [/* @__PURE__ */ r("div", {
48
48
  className: "logo",
49
49
  onClick: () => {
50
- e?.(r);
50
+ e?.(n);
51
51
  },
52
- children: /* @__PURE__ */ n("h1", {
52
+ children: /* @__PURE__ */ r("h1", {
53
53
  className: "logo-text",
54
54
  children: t
55
55
  })
56
- })
56
+ }), a && /* @__PURE__ */ r("div", {
57
+ className: "header-actions",
58
+ children: a
59
+ })]
57
60
  })
58
- }), l = ({ onNavigate: e }) => /* @__PURE__ */ n(c, {
61
+ }), u = ({ onNavigate: e }) => /* @__PURE__ */ r(l, {
59
62
  onNavigate: e,
60
63
  title: "Simone Gentili - senior web developer, tech author and chess enthusiast",
61
64
  homePageKey: "home"
62
- }), u = ({ isLoggedIn: e, handleLogin: r, handleLogout: i }) => /* @__PURE__ */ n(t, { children: e ? /* @__PURE__ */ n("button", {
65
+ }), d = ({ isLoggedIn: e, handleLogin: t, handleLogout: i }) => /* @__PURE__ */ r(n, { children: e ? /* @__PURE__ */ r("button", {
63
66
  onClick: i,
64
67
  style: {
65
68
  fontSize: "0.9rem",
66
69
  padding: "0.4rem 1rem"
67
70
  },
68
71
  children: "logout"
69
- }) : /* @__PURE__ */ n("button", {
70
- onClick: r,
72
+ }) : /* @__PURE__ */ r("button", {
73
+ onClick: t,
71
74
  style: {
72
75
  fontSize: "0.9rem",
73
76
  padding: "0.4rem 1rem"
74
77
  },
75
78
  children: "Login"
76
- }) }), d = ({ open: e, onClose: t, title: i, children: a }) => e ? /* @__PURE__ */ n("div", {
79
+ }) }), f = ({ open: e, onClose: t, title: n, children: a }) => e ? /* @__PURE__ */ r("div", {
77
80
  className: "modal-overlay",
78
- children: /* @__PURE__ */ r("div", {
81
+ children: /* @__PURE__ */ i("div", {
79
82
  className: "modal-content",
80
83
  children: [
81
- i && /* @__PURE__ */ n("h2", {
84
+ n && /* @__PURE__ */ r("h2", {
82
85
  className: "modal-title",
83
- children: i
86
+ children: n
84
87
  }),
85
- /* @__PURE__ */ n("button", {
88
+ /* @__PURE__ */ r("button", {
86
89
  className: "modal-close",
87
90
  onClick: t,
88
91
  children: "×"
89
92
  }),
90
- /* @__PURE__ */ n("div", {
93
+ /* @__PURE__ */ r("div", {
91
94
  className: "modal-children",
92
95
  children: a
93
96
  })
94
97
  ]
95
98
  })
96
- }) : null, f = ({ label: e, ...t }) => /* @__PURE__ */ r("div", {
99
+ }) : null, p = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ i("div", {
100
+ className: "input-wrapper",
101
+ children: [e && /* @__PURE__ */ r("label", {
102
+ className: "input-label",
103
+ children: e
104
+ }), /* @__PURE__ */ r("input", {
105
+ className: `input-field${t ? " input-field--invalid" : ""}`,
106
+ ...n
107
+ })]
108
+ }), m = ({ label: e, ...t }) => /* @__PURE__ */ i("div", {
97
109
  className: "input-wrapper",
98
- children: [e && /* @__PURE__ */ n("label", {
110
+ children: [e && /* @__PURE__ */ r("label", {
99
111
  className: "input-label",
100
112
  children: e
101
- }), /* @__PURE__ */ n("input", {
113
+ }), /* @__PURE__ */ r("input", {
102
114
  type: "password",
103
115
  className: "input-field",
104
116
  ...t
105
117
  })]
106
- }), p = ({ open: t, onClose: a, onSubmit: o }) => {
107
- let [s, c] = e(""), [l, u] = e(""), [p, m] = e("");
108
- return /* @__PURE__ */ n(d, {
109
- open: t,
110
- onClose: a,
118
+ }), h = ({ open: e, onClose: n, onLogin: o }) => {
119
+ let [s, c] = t(""), [l, u] = t("");
120
+ return /* @__PURE__ */ r(f, {
121
+ open: e,
122
+ onClose: n,
123
+ title: "Login",
124
+ children: /* @__PURE__ */ i("form", {
125
+ onSubmit: (e) => {
126
+ e.preventDefault(), o(s, l);
127
+ },
128
+ children: [
129
+ /* @__PURE__ */ r(p, {
130
+ label: "Username",
131
+ value: s,
132
+ onChange: (e) => c(e.target.value),
133
+ autoFocus: !0
134
+ }),
135
+ /* @__PURE__ */ r(m, {
136
+ label: "Password",
137
+ value: l,
138
+ onChange: (e) => u(e.target.value)
139
+ }),
140
+ /* @__PURE__ */ r(a, {
141
+ label: "Login",
142
+ type: "submit",
143
+ style: { width: "100%" }
144
+ })
145
+ ]
146
+ })
147
+ });
148
+ }, g = "simonegentili.com-access-token", _ = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), v = ({ title: a = "Quadrato", homePageKey: o = "home", onNavigate: s, cookieName: c = g, username: u = null, onLogin: f, onLogout: p, onUserAuthenticated: m }) => {
149
+ let [v, y] = t(() => _(c)), [b, x] = t(!1);
150
+ return e(() => {
151
+ m?.(v, v ? u : null);
152
+ }, []), /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(l, {
153
+ onNavigate: s,
154
+ title: a,
155
+ homePageKey: o,
156
+ children: /* @__PURE__ */ i("div", {
157
+ className: "quadrato-header-auth",
158
+ children: [v && u && /* @__PURE__ */ r("span", {
159
+ className: "quadrato-header-username",
160
+ children: u
161
+ }), /* @__PURE__ */ r(d, {
162
+ isLoggedIn: v,
163
+ handleLogin: () => x(!0),
164
+ handleLogout: () => {
165
+ p?.();
166
+ let e = _(c);
167
+ y(e), m?.(e, null);
168
+ }
169
+ })]
170
+ })
171
+ }), /* @__PURE__ */ r(h, {
172
+ open: b,
173
+ onClose: () => x(!1),
174
+ onLogin: async (e, t) => {
175
+ await f(e, t);
176
+ let n = _(c);
177
+ y(n), x(!1), m?.(n, n ? e : null);
178
+ }
179
+ })] });
180
+ }, y = ({ open: e, onClose: n, onSubmit: o }) => {
181
+ let [s, c] = t(""), [l, u] = t(""), [d, p] = t("");
182
+ return /* @__PURE__ */ r(f, {
183
+ open: e,
184
+ onClose: n,
111
185
  title: "Imposta una nuova password",
112
- children: /* @__PURE__ */ r("form", {
186
+ children: /* @__PURE__ */ i("form", {
113
187
  className: "set-password-modal-form",
114
188
  onSubmit: (e) => {
115
189
  if (e.preventDefault(), s === "" || l === "") {
116
- m("Inserisci ed conferma la nuova password.");
190
+ p("Inserisci ed conferma la nuova password.");
117
191
  return;
118
192
  }
119
193
  if (s !== l) {
120
- m("Le password non coincidono.");
194
+ p("Le password non coincidono.");
121
195
  return;
122
196
  }
123
- m(""), o(s);
197
+ p(""), o(s);
124
198
  },
125
199
  children: [
126
- /* @__PURE__ */ n(f, {
200
+ /* @__PURE__ */ r(m, {
127
201
  label: "Nuova password",
128
202
  value: s,
129
203
  onChange: (e) => c(e.target.value),
130
204
  autoFocus: !0
131
205
  }),
132
- /* @__PURE__ */ n(f, {
206
+ /* @__PURE__ */ r(m, {
133
207
  label: "Conferma password",
134
208
  value: l,
135
209
  onChange: (e) => u(e.target.value)
136
210
  }),
137
- p && /* @__PURE__ */ n("p", {
211
+ d && /* @__PURE__ */ r("p", {
138
212
  className: "set-password-modal-error",
139
- children: p
213
+ children: d
140
214
  }),
141
- /* @__PURE__ */ n(i, {
215
+ /* @__PURE__ */ r(a, {
142
216
  label: "Salva password",
143
217
  type: "submit",
144
218
  style: { width: "100%" }
@@ -148,4 +222,4 @@ var i = ({ label: e, ...t }) => /* @__PURE__ */ n("button", {
148
222
  });
149
223
  };
150
224
  //#endregion
151
- export { u as Authenticator, i as Button, a as Footer, c as Header, s as SGFooter, l as SGHeader, p as SetPasswordModal };
225
+ export { d as Authenticator, a as Button, o as Footer, l as Header, v as QuadratoHeader, c as SGFooter, u as SGHeader, y 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}.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}: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}.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.67",
3
+ "version": "0.0.68",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "scripts": {