@hemerson/design-system 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Typeahead/Typeahead.d.ts +20 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +304 -180
- package/dist/index.js.map +1 -1
- package/dist/styles.css +35 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -19,7 +19,7 @@ var w = l(function({ as: e = "div", tone: t = "regular", className: n, ...r }, i
|
|
|
19
19
|
cx: 12,
|
|
20
20
|
cy: 12,
|
|
21
21
|
r: 10
|
|
22
|
-
},
|
|
22
|
+
}, E = {
|
|
23
23
|
check: ["M20 6 9 17l-5-5"],
|
|
24
24
|
x: ["M18 6 6 18", "m6 6 12 12"],
|
|
25
25
|
"chevron-down": ["m6 9 6 6 6-6"],
|
|
@@ -74,8 +74,8 @@ var w = l(function({ as: e = "div", tone: t = "regular", className: n, ...r }, i
|
|
|
74
74
|
r: 7
|
|
75
75
|
}]
|
|
76
76
|
};
|
|
77
|
-
function
|
|
78
|
-
let n =
|
|
77
|
+
function D({ name: e, className: t }) {
|
|
78
|
+
let n = E[e];
|
|
79
79
|
return /* @__PURE__ */ b("svg", {
|
|
80
80
|
className: C("hds-icon", t),
|
|
81
81
|
viewBox: "0 0 24 24",
|
|
@@ -95,7 +95,7 @@ function E({ name: e, className: t }) {
|
|
|
95
95
|
}
|
|
96
96
|
//#endregion
|
|
97
97
|
//#region src/components/Button/Button.tsx
|
|
98
|
-
var
|
|
98
|
+
var O = l(function({ variant: e = "primary", size: t = "md", icon: n, iconOnly: r = !1, loading: i = !1, disabled: a, type: o = "button", className: s, children: c, ...l }, u) {
|
|
99
99
|
return r && !l["aria-label"] && !l["aria-labelledby"] && console.warn("Button: an icon-only button needs an aria-label."), /* @__PURE__ */ x("button", {
|
|
100
100
|
...l,
|
|
101
101
|
ref: u,
|
|
@@ -103,7 +103,7 @@ var D = l(function({ variant: e = "primary", size: t = "md", icon: n, iconOnly:
|
|
|
103
103
|
disabled: a || i,
|
|
104
104
|
"aria-busy": i || void 0,
|
|
105
105
|
className: C("hds-btn", `hds-btn--${e}`, t !== "md" && `hds-btn--${t}`, r && "hds-btn--icon", e === "glass" && "hds-glass", s),
|
|
106
|
-
children: [i ? /* @__PURE__ */ b(
|
|
106
|
+
children: [i ? /* @__PURE__ */ b(D, {
|
|
107
107
|
name: "loader",
|
|
108
108
|
className: "hds-spin"
|
|
109
109
|
}) : n, r ? null : c]
|
|
@@ -111,14 +111,14 @@ var D = l(function({ variant: e = "primary", size: t = "md", icon: n, iconOnly:
|
|
|
111
111
|
});
|
|
112
112
|
//#endregion
|
|
113
113
|
//#region src/components/NavBar/NavBar.tsx
|
|
114
|
-
function
|
|
114
|
+
function k({ active: e = !1, className: t, ...n }) {
|
|
115
115
|
return /* @__PURE__ */ b("a", {
|
|
116
116
|
...n,
|
|
117
117
|
"aria-current": e ? "page" : void 0,
|
|
118
118
|
className: C("hds-navbar-link", t)
|
|
119
119
|
});
|
|
120
120
|
}
|
|
121
|
-
function
|
|
121
|
+
function A({ title: e, actions: t, navLabel: n = "Principal", className: r, children: i, ...a }) {
|
|
122
122
|
return /* @__PURE__ */ x(w, {
|
|
123
123
|
...a,
|
|
124
124
|
as: "header",
|
|
@@ -140,10 +140,10 @@ function O({ title: e, actions: t, navLabel: n = "Principal", className: r, chil
|
|
|
140
140
|
]
|
|
141
141
|
});
|
|
142
142
|
}
|
|
143
|
-
var
|
|
143
|
+
var j = Object.assign(A, { Link: k });
|
|
144
144
|
//#endregion
|
|
145
145
|
//#region src/components/Sidebar/Sidebar.tsx
|
|
146
|
-
function
|
|
146
|
+
function M({ items: e, footer: t, floating: n = !1, label: r = "Navegação", className: i }) {
|
|
147
147
|
return /* @__PURE__ */ x(w, {
|
|
148
148
|
as: "nav",
|
|
149
149
|
"aria-label": r,
|
|
@@ -177,13 +177,13 @@ function ne({ items: e, footer: t, floating: n = !1, label: r = "Navegação", c
|
|
|
177
177
|
}
|
|
178
178
|
//#endregion
|
|
179
179
|
//#region src/components/SegmentedControl/SegmentedControl.tsx
|
|
180
|
-
var
|
|
180
|
+
var N = {
|
|
181
181
|
ArrowRight: 1,
|
|
182
182
|
ArrowDown: 1,
|
|
183
183
|
ArrowLeft: -1,
|
|
184
184
|
ArrowUp: -1
|
|
185
185
|
};
|
|
186
|
-
function
|
|
186
|
+
function P({ options: e, value: t, defaultValue: n, onChange: r, label: i, className: a }) {
|
|
187
187
|
let [o, s] = _(n ?? e[0]?.value), c = t === void 0 ? o : t, l = g([]), u = g(null), d = Math.max(0, e.findIndex((e) => e.value === c));
|
|
188
188
|
m(() => {
|
|
189
189
|
function e() {
|
|
@@ -196,7 +196,7 @@ function A({ options: e, value: t, defaultValue: n, onChange: r, label: i, class
|
|
|
196
196
|
t === void 0 && s(e), r?.(e);
|
|
197
197
|
}
|
|
198
198
|
function p(t) {
|
|
199
|
-
let n =
|
|
199
|
+
let n = N[t.key];
|
|
200
200
|
if (!n) return;
|
|
201
201
|
t.preventDefault();
|
|
202
202
|
let r = (d + n + e.length) % e.length;
|
|
@@ -230,13 +230,13 @@ function A({ options: e, value: t, defaultValue: n, onChange: r, label: i, class
|
|
|
230
230
|
})]
|
|
231
231
|
});
|
|
232
232
|
}
|
|
233
|
-
function
|
|
233
|
+
function ee(e, t, n) {
|
|
234
234
|
let r = e.getBoundingClientRect(), i = t.offsetWidth, a = t.offsetHeight, o = document.documentElement.clientWidth || window.innerWidth, s = document.documentElement.clientHeight || window.innerHeight, c = r.bottom + 8 + a <= s - 8, l = r.top - 8 - a >= 8, u = c || !l ? r.bottom + 8 : r.top - 8 - a, d = n === "end" ? r.right - i : r.left, f = Math.min(Math.max(8, d), Math.max(8, o - i - 8));
|
|
235
235
|
t.style.top = `${Math.round(u)}px`, t.style.left = `${Math.round(f)}px`, t.dataset.side = c || !l ? "bottom" : "top";
|
|
236
236
|
}
|
|
237
237
|
//#endregion
|
|
238
238
|
//#region src/components/Menu/Menu.tsx
|
|
239
|
-
function
|
|
239
|
+
function F({ label: e, icon: t, iconOnly: n = !1, items: r, align: i = "end", triggerVariant: a = "glass", header: o, className: s }) {
|
|
240
240
|
let [c, l] = _(!1), u = g(null), d = g(null), h = p(), v = () => Array.from(d.current?.querySelectorAll("[role=\"menuitem\"]") ?? []);
|
|
241
241
|
function T(e) {
|
|
242
242
|
l(!1), e && u.current?.focus();
|
|
@@ -244,7 +244,7 @@ function j({ label: e, icon: t, iconOnly: n = !1, items: r, align: i = "end", tr
|
|
|
244
244
|
m(() => {
|
|
245
245
|
if (!c || !u.current || !d.current) return;
|
|
246
246
|
let e = () => {
|
|
247
|
-
u.current && d.current &&
|
|
247
|
+
u.current && d.current && ee(u.current, d.current, i);
|
|
248
248
|
};
|
|
249
249
|
return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
|
|
250
250
|
window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
|
|
@@ -258,13 +258,13 @@ function j({ label: e, icon: t, iconOnly: n = !1, items: r, align: i = "end", tr
|
|
|
258
258
|
}
|
|
259
259
|
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
260
260
|
}, [c]);
|
|
261
|
-
function
|
|
261
|
+
function E(e) {
|
|
262
262
|
let t = v(), n = t.indexOf(document.activeElement);
|
|
263
263
|
e.key === "Escape" || e.key === "Tab" ? (e.preventDefault(), T(!0)) : e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(n + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Home" || e.key === "End") && (e.preventDefault(), (e.key === "Home" ? t[0] : t[t.length - 1])?.focus());
|
|
264
264
|
}
|
|
265
265
|
return /* @__PURE__ */ x("div", {
|
|
266
266
|
className: C("hds-menu", s),
|
|
267
|
-
children: [/* @__PURE__ */ b(
|
|
267
|
+
children: [/* @__PURE__ */ b(O, {
|
|
268
268
|
ref: u,
|
|
269
269
|
variant: a,
|
|
270
270
|
icon: t,
|
|
@@ -282,7 +282,7 @@ function j({ label: e, icon: t, iconOnly: n = !1, items: r, align: i = "end", tr
|
|
|
282
282
|
"aria-label": e,
|
|
283
283
|
"aria-describedby": o ? `${h}-header` : void 0,
|
|
284
284
|
className: "hds-menu-panel",
|
|
285
|
-
onKeyDown:
|
|
285
|
+
onKeyDown: E,
|
|
286
286
|
children: [o ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
|
|
287
287
|
id: `${h}-header`,
|
|
288
288
|
role: "none",
|
|
@@ -309,7 +309,7 @@ function j({ label: e, icon: t, iconOnly: n = !1, items: r, align: i = "end", tr
|
|
|
309
309
|
}
|
|
310
310
|
//#endregion
|
|
311
311
|
//#region src/components/FloatingButton/FloatingButton.tsx
|
|
312
|
-
var
|
|
312
|
+
var I = l(function({ label: e, position: t = "bottom-right", type: n = "button", className: r, ...i }, a) {
|
|
313
313
|
return /* @__PURE__ */ b("button", {
|
|
314
314
|
...i,
|
|
315
315
|
ref: a,
|
|
@@ -318,8 +318,8 @@ var M = l(function({ label: e, position: t = "bottom-right", type: n = "button",
|
|
|
318
318
|
title: e,
|
|
319
319
|
className: C("hds-glass", "hds-fab", `hds-fab--${t}`, r)
|
|
320
320
|
});
|
|
321
|
-
}),
|
|
322
|
-
function
|
|
321
|
+
}), L = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
|
|
322
|
+
function R({ open: e, onClose: t, title: n, description: r, children: i, footer: a, closeLabel: o = "Fechar", initialFocus: s = "first", size: c = "md", className: l }) {
|
|
323
323
|
let u = g(null), d = p(), m = p(), h = g(t);
|
|
324
324
|
return f(() => {
|
|
325
325
|
h.current = t;
|
|
@@ -327,7 +327,7 @@ function P({ open: e, onClose: t, title: n, description: r, children: i, footer:
|
|
|
327
327
|
if (!e) return;
|
|
328
328
|
let t = document.activeElement, n = document.body.style.overflow;
|
|
329
329
|
document.body.style.overflow = "hidden";
|
|
330
|
-
let r = u.current?.querySelectorAll(
|
|
330
|
+
let r = u.current?.querySelectorAll(L) ?? [];
|
|
331
331
|
(s === "panel" || r.length === 0 ? u.current : r[0])?.focus();
|
|
332
332
|
function i(e) {
|
|
333
333
|
if (e.key === "Escape") {
|
|
@@ -336,7 +336,7 @@ function P({ open: e, onClose: t, title: n, description: r, children: i, footer:
|
|
|
336
336
|
return;
|
|
337
337
|
}
|
|
338
338
|
if (e.key !== "Tab" || !u.current) return;
|
|
339
|
-
let t = Array.from(u.current.querySelectorAll(
|
|
339
|
+
let t = Array.from(u.current.querySelectorAll(L));
|
|
340
340
|
if (t.length === 0) return;
|
|
341
341
|
let n = t[0], r = t[t.length - 1];
|
|
342
342
|
e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
|
|
@@ -369,11 +369,11 @@ function P({ open: e, onClose: t, title: n, description: r, children: i, footer:
|
|
|
369
369
|
id: m,
|
|
370
370
|
className: "hds-dialog-description",
|
|
371
371
|
children: r
|
|
372
|
-
}) : null] }), /* @__PURE__ */ b(
|
|
372
|
+
}) : null] }), /* @__PURE__ */ b(O, {
|
|
373
373
|
variant: "ghost",
|
|
374
374
|
size: "sm",
|
|
375
375
|
iconOnly: !0,
|
|
376
|
-
icon: /* @__PURE__ */ b(
|
|
376
|
+
icon: /* @__PURE__ */ b(D, { name: "x" }),
|
|
377
377
|
"aria-label": o,
|
|
378
378
|
onClick: t
|
|
379
379
|
})]
|
|
@@ -389,13 +389,13 @@ function P({ open: e, onClose: t, title: n, description: r, children: i, footer:
|
|
|
389
389
|
}
|
|
390
390
|
//#endregion
|
|
391
391
|
//#region src/components/Toast/ToastView.tsx
|
|
392
|
-
var
|
|
392
|
+
var z = {
|
|
393
393
|
neutral: "info",
|
|
394
394
|
success: "circle-check",
|
|
395
395
|
warning: "triangle-alert",
|
|
396
396
|
danger: "circle-x"
|
|
397
397
|
};
|
|
398
|
-
function
|
|
398
|
+
function B({ tone: e, title: t, description: n, duration: r, onClose: i, closeLabel: a, className: o }) {
|
|
399
399
|
let [s, c] = _(!1), l = g(i);
|
|
400
400
|
return f(() => {
|
|
401
401
|
l.current = i;
|
|
@@ -411,7 +411,7 @@ function I({ tone: e, title: t, description: n, duration: r, onClose: i, closeLa
|
|
|
411
411
|
onFocus: () => c(!0),
|
|
412
412
|
onBlur: () => c(!1),
|
|
413
413
|
children: [
|
|
414
|
-
/* @__PURE__ */ b(
|
|
414
|
+
/* @__PURE__ */ b(D, { name: z[e] }),
|
|
415
415
|
/* @__PURE__ */ x("div", {
|
|
416
416
|
className: "hds-toast-body",
|
|
417
417
|
children: [/* @__PURE__ */ b("p", {
|
|
@@ -422,11 +422,11 @@ function I({ tone: e, title: t, description: n, duration: r, onClose: i, closeLa
|
|
|
422
422
|
children: n
|
|
423
423
|
}) : null]
|
|
424
424
|
}),
|
|
425
|
-
i ? /* @__PURE__ */ b(
|
|
425
|
+
i ? /* @__PURE__ */ b(O, {
|
|
426
426
|
variant: "ghost",
|
|
427
427
|
size: "sm",
|
|
428
428
|
iconOnly: !0,
|
|
429
|
-
icon: /* @__PURE__ */ b(
|
|
429
|
+
icon: /* @__PURE__ */ b(D, { name: "x" }),
|
|
430
430
|
"aria-label": a,
|
|
431
431
|
onClick: i
|
|
432
432
|
}) : null
|
|
@@ -435,10 +435,10 @@ function I({ tone: e, title: t, description: n, duration: r, onClose: i, closeLa
|
|
|
435
435
|
}
|
|
436
436
|
//#endregion
|
|
437
437
|
//#region src/components/Toast/Toast.tsx
|
|
438
|
-
function
|
|
438
|
+
function V({ open: e, onClose: t, tone: n = "neutral", title: r, description: i, duration: a = 5e3, closeLabel: o = "Fechar aviso", className: s }) {
|
|
439
439
|
return e ? S(/* @__PURE__ */ b("div", {
|
|
440
440
|
className: "hds-toast-region",
|
|
441
|
-
children: /* @__PURE__ */ b(
|
|
441
|
+
children: /* @__PURE__ */ b(B, {
|
|
442
442
|
tone: n,
|
|
443
443
|
title: r,
|
|
444
444
|
description: i,
|
|
@@ -451,8 +451,8 @@ function L({ open: e, onClose: t, tone: n = "neutral", title: r, description: i,
|
|
|
451
451
|
}
|
|
452
452
|
//#endregion
|
|
453
453
|
//#region src/components/Toast/ToastProvider.tsx
|
|
454
|
-
var
|
|
455
|
-
function
|
|
454
|
+
var H = c(null);
|
|
455
|
+
function U({ children: e, max: t = 3, closeLabel: n = "Fechar aviso" }) {
|
|
456
456
|
let [r, i] = _([]), a = g(0), o = u((e) => {
|
|
457
457
|
i((t) => t.filter((t) => t.id !== e));
|
|
458
458
|
}, []), s = u(({ title: e, description: n, tone: r = "neutral", duration: o = 5e3 }) => {
|
|
@@ -488,11 +488,11 @@ function z({ children: e, max: t = 3, closeLabel: n = "Fechar aviso" }) {
|
|
|
488
488
|
tone: "neutral"
|
|
489
489
|
})
|
|
490
490
|
}), [s, o]);
|
|
491
|
-
return /* @__PURE__ */ x(
|
|
491
|
+
return /* @__PURE__ */ x(H.Provider, {
|
|
492
492
|
value: c,
|
|
493
493
|
children: [e, r.length ? S(/* @__PURE__ */ b("div", {
|
|
494
494
|
className: "hds-toast-region",
|
|
495
|
-
children: r.map((e) => /* @__PURE__ */ b(
|
|
495
|
+
children: r.map((e) => /* @__PURE__ */ b(B, {
|
|
496
496
|
tone: e.tone,
|
|
497
497
|
title: e.title,
|
|
498
498
|
description: e.description,
|
|
@@ -503,14 +503,14 @@ function z({ children: e, max: t = 3, closeLabel: n = "Fechar aviso" }) {
|
|
|
503
503
|
}), document.body) : null]
|
|
504
504
|
});
|
|
505
505
|
}
|
|
506
|
-
function
|
|
507
|
-
let e = d(
|
|
506
|
+
function W() {
|
|
507
|
+
let e = d(H);
|
|
508
508
|
if (!e) throw Error("useToast must be used inside a ToastProvider.");
|
|
509
509
|
return e;
|
|
510
510
|
}
|
|
511
511
|
//#endregion
|
|
512
512
|
//#region src/internal/field.tsx
|
|
513
|
-
function
|
|
513
|
+
function G(e) {
|
|
514
514
|
let t = p(), n = e ?? t;
|
|
515
515
|
return {
|
|
516
516
|
id: n,
|
|
@@ -518,7 +518,7 @@ function V(e) {
|
|
|
518
518
|
error: `${n}-error`
|
|
519
519
|
};
|
|
520
520
|
}
|
|
521
|
-
function
|
|
521
|
+
function K(e, t) {
|
|
522
522
|
let n = [
|
|
523
523
|
e.hint && t.hint,
|
|
524
524
|
e.error && t.error,
|
|
@@ -526,7 +526,7 @@ function H(e, t) {
|
|
|
526
526
|
].filter(Boolean);
|
|
527
527
|
return n.length ? n.join(" ") : void 0;
|
|
528
528
|
}
|
|
529
|
-
function
|
|
529
|
+
function q({ hint: e, error: t, ids: n }) {
|
|
530
530
|
return /* @__PURE__ */ x(y, { children: [e ? /* @__PURE__ */ b("p", {
|
|
531
531
|
id: n.hint,
|
|
532
532
|
className: "hds-hint",
|
|
@@ -534,13 +534,13 @@ function ae({ hint: e, error: t, ids: n }) {
|
|
|
534
534
|
}) : null, t ? /* @__PURE__ */ x("p", {
|
|
535
535
|
id: n.error,
|
|
536
536
|
className: "hds-error",
|
|
537
|
-
children: [/* @__PURE__ */ b(
|
|
537
|
+
children: [/* @__PURE__ */ b(D, { name: "circle-x" }), t]
|
|
538
538
|
}) : null] });
|
|
539
539
|
}
|
|
540
540
|
//#endregion
|
|
541
541
|
//#region src/components/Input/Input.tsx
|
|
542
|
-
var
|
|
543
|
-
let c =
|
|
542
|
+
var te = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, className: a, ...o }, s) {
|
|
543
|
+
let c = G(i);
|
|
544
544
|
return /* @__PURE__ */ x("div", {
|
|
545
545
|
className: C("hds-field", a),
|
|
546
546
|
children: [
|
|
@@ -555,22 +555,22 @@ var oe = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, class
|
|
|
555
555
|
ref: s,
|
|
556
556
|
id: c.id,
|
|
557
557
|
"aria-invalid": n ? !0 : void 0,
|
|
558
|
-
"aria-describedby":
|
|
558
|
+
"aria-describedby": K({
|
|
559
559
|
hint: t,
|
|
560
560
|
error: n,
|
|
561
561
|
"aria-describedby": o["aria-describedby"]
|
|
562
562
|
}, c),
|
|
563
563
|
className: C("hds-input", r && "hds-input--numeric")
|
|
564
564
|
}),
|
|
565
|
-
/* @__PURE__ */ b(
|
|
565
|
+
/* @__PURE__ */ b(q, {
|
|
566
566
|
hint: t,
|
|
567
567
|
error: n,
|
|
568
568
|
ids: c
|
|
569
569
|
})
|
|
570
570
|
]
|
|
571
571
|
});
|
|
572
|
-
}),
|
|
573
|
-
let l =
|
|
572
|
+
}), ne = l(function({ label: e, options: t, placeholder: n, hint: r, error: i, id: a, className: o, ...s }, c) {
|
|
573
|
+
let l = G(a);
|
|
574
574
|
return /* @__PURE__ */ x("div", {
|
|
575
575
|
className: C("hds-field", o),
|
|
576
576
|
children: [
|
|
@@ -586,7 +586,7 @@ var oe = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, class
|
|
|
586
586
|
ref: c,
|
|
587
587
|
id: l.id,
|
|
588
588
|
"aria-invalid": i ? !0 : void 0,
|
|
589
|
-
"aria-describedby":
|
|
589
|
+
"aria-describedby": K({
|
|
590
590
|
hint: r,
|
|
591
591
|
error: i,
|
|
592
592
|
"aria-describedby": s["aria-describedby"]
|
|
@@ -601,9 +601,9 @@ var oe = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, class
|
|
|
601
601
|
disabled: e.disabled,
|
|
602
602
|
children: e.label
|
|
603
603
|
}, e.value))]
|
|
604
|
-
}), /* @__PURE__ */ b(
|
|
604
|
+
}), /* @__PURE__ */ b(D, { name: "chevron-down" })]
|
|
605
605
|
}),
|
|
606
|
-
/* @__PURE__ */ b(
|
|
606
|
+
/* @__PURE__ */ b(q, {
|
|
607
607
|
hint: r,
|
|
608
608
|
error: i,
|
|
609
609
|
ids: l
|
|
@@ -613,23 +613,23 @@ var oe = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, class
|
|
|
613
613
|
});
|
|
614
614
|
//#endregion
|
|
615
615
|
//#region src/components/DateInput/dates.ts
|
|
616
|
-
function
|
|
616
|
+
function J(e) {
|
|
617
617
|
let t = (e) => String(e).padStart(2, "0");
|
|
618
618
|
return `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())}`;
|
|
619
619
|
}
|
|
620
|
-
function
|
|
620
|
+
function Y(e) {
|
|
621
621
|
let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e ?? "");
|
|
622
622
|
if (!t) return null;
|
|
623
623
|
let n = new Date(Number(t[1]), Number(t[2]) - 1, Number(t[3]));
|
|
624
|
-
return
|
|
624
|
+
return J(n) === e ? n : null;
|
|
625
625
|
}
|
|
626
|
-
function
|
|
627
|
-
let t =
|
|
626
|
+
function re(e) {
|
|
627
|
+
let t = Y(e);
|
|
628
628
|
if (!t) return "";
|
|
629
629
|
let n = (e) => String(e).padStart(2, "0");
|
|
630
630
|
return `${n(t.getDate())}/${n(t.getMonth() + 1)}/${t.getFullYear()}`;
|
|
631
631
|
}
|
|
632
|
-
function
|
|
632
|
+
function ie(e) {
|
|
633
633
|
let t = e.trim(), n = /^\d{8}$/.test(t) ? [
|
|
634
634
|
t.slice(0, 2),
|
|
635
635
|
t.slice(2, 4),
|
|
@@ -637,220 +637,344 @@ function ce(e) {
|
|
|
637
637
|
] : /^(\d{1,2})[/.-](\d{1,2})[/.-](\d{4})$/.exec(t)?.slice(1);
|
|
638
638
|
if (!n) return null;
|
|
639
639
|
let [r, i, a] = n.map(Number), o = new Date(a, i - 1, r);
|
|
640
|
-
return o.getFullYear() === a && o.getMonth() === i - 1 && o.getDate() === r ?
|
|
640
|
+
return o.getFullYear() === a && o.getMonth() === i - 1 && o.getDate() === r ? J(o) : null;
|
|
641
641
|
}
|
|
642
|
-
function
|
|
642
|
+
function X(e, t) {
|
|
643
643
|
return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t);
|
|
644
644
|
}
|
|
645
|
-
function
|
|
645
|
+
function ae(e, t) {
|
|
646
646
|
let n = new Date(e.getFullYear(), e.getMonth() + t, 1), r = new Date(n.getFullYear(), n.getMonth() + 1, 0).getDate();
|
|
647
647
|
return new Date(n.getFullYear(), n.getMonth(), Math.min(e.getDate(), r));
|
|
648
648
|
}
|
|
649
|
-
function
|
|
650
|
-
let n = new Date(e.getFullYear(), e.getMonth(), 1), r =
|
|
651
|
-
return Array.from({ length: 6 }, (e, t) => Array.from({ length: 7 }, (e, n) =>
|
|
649
|
+
function oe(e, t) {
|
|
650
|
+
let n = new Date(e.getFullYear(), e.getMonth(), 1), r = X(n, -((n.getDay() - t + 7) % 7));
|
|
651
|
+
return Array.from({ length: 6 }, (e, t) => Array.from({ length: 7 }, (e, n) => X(r, t * 7 + n)));
|
|
652
652
|
}
|
|
653
|
-
function
|
|
653
|
+
function se(e, t, n) {
|
|
654
654
|
return (!t || e >= t) && (!n || e <= n);
|
|
655
655
|
}
|
|
656
656
|
//#endregion
|
|
657
657
|
//#region src/components/DateInput/DateInput.tsx
|
|
658
|
-
var
|
|
659
|
-
function
|
|
660
|
-
let
|
|
661
|
-
|
|
662
|
-
function
|
|
663
|
-
t === void 0 &&
|
|
658
|
+
var ce = () => J(/* @__PURE__ */ new Date());
|
|
659
|
+
function le({ label: e, value: t, defaultValue: n = "", onChange: r, min: i, max: a, hint: o, error: s, locale: c = "pt-BR", weekStartsOn: l = 0, calendarLabel: u = "Abrir calendário", previousMonthLabel: d = "Mês anterior", nextMonthLabel: p = "Próximo mês", name: h, id: v, disabled: y, required: T, placeholder: E = "dd/mm/aaaa", className: k, ...A }) {
|
|
660
|
+
let j = G(v), [M, N] = _(n), P = t === void 0 ? M : t, [F, I] = _(() => re(P)), [L, R] = _(!1), [z, B] = _(() => Y(P) ?? /* @__PURE__ */ new Date()), V = g(null), H = g(null), U = g(null), W = g(!1), [te, ne] = _(P);
|
|
661
|
+
te !== P && (ne(P), I(re(P)));
|
|
662
|
+
function le(e) {
|
|
663
|
+
t === void 0 && N(e), e !== P && r?.(e);
|
|
664
664
|
}
|
|
665
|
-
function
|
|
666
|
-
if (
|
|
667
|
-
|
|
665
|
+
function Z(e) {
|
|
666
|
+
if (I(e), e.trim() === "") {
|
|
667
|
+
le("");
|
|
668
668
|
return;
|
|
669
669
|
}
|
|
670
|
-
let t =
|
|
671
|
-
t &&
|
|
670
|
+
let t = ie(e);
|
|
671
|
+
t && se(t, i, a) && le(t);
|
|
672
672
|
}
|
|
673
|
-
function
|
|
674
|
-
|
|
673
|
+
function ue() {
|
|
674
|
+
B(Y(P) ?? Y(ce()) ?? /* @__PURE__ */ new Date()), W.current = !0, R(!0);
|
|
675
675
|
}
|
|
676
|
-
function
|
|
677
|
-
|
|
676
|
+
function de(e) {
|
|
677
|
+
R(!1), e && H.current?.focus();
|
|
678
678
|
}
|
|
679
|
-
function
|
|
680
|
-
let t =
|
|
681
|
-
|
|
679
|
+
function fe(e) {
|
|
680
|
+
let t = J(e);
|
|
681
|
+
se(t, i, a) && (le(t), I(re(t)), de(!0));
|
|
682
682
|
}
|
|
683
683
|
m(() => {
|
|
684
|
-
if (!
|
|
684
|
+
if (!L || !V.current || !U.current) return;
|
|
685
685
|
let e = () => {
|
|
686
|
-
|
|
686
|
+
V.current && U.current && ee(V.current, U.current, "start");
|
|
687
687
|
};
|
|
688
688
|
return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
|
|
689
689
|
window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
|
|
690
690
|
};
|
|
691
|
-
}, [
|
|
692
|
-
|
|
691
|
+
}, [L]), f(() => {
|
|
692
|
+
L && W.current && (W.current = !1, U.current?.querySelector("[tabindex=\"0\"]")?.focus());
|
|
693
693
|
}), f(() => {
|
|
694
|
-
if (!
|
|
694
|
+
if (!L) return;
|
|
695
695
|
function e(e) {
|
|
696
696
|
let t = e.target;
|
|
697
|
-
|
|
697
|
+
V.current?.contains(t) || U.current?.contains(t) || R(!1);
|
|
698
698
|
}
|
|
699
699
|
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
700
|
-
}, [
|
|
701
|
-
function
|
|
702
|
-
|
|
700
|
+
}, [L]);
|
|
701
|
+
function pe(e) {
|
|
702
|
+
W.current = !0, B(e);
|
|
703
703
|
}
|
|
704
|
-
function
|
|
704
|
+
function me(e) {
|
|
705
705
|
let t = {
|
|
706
|
-
ArrowLeft: () =>
|
|
707
|
-
ArrowRight: () =>
|
|
708
|
-
ArrowUp: () =>
|
|
709
|
-
ArrowDown: () =>
|
|
710
|
-
Home: () =>
|
|
711
|
-
End: () =>
|
|
712
|
-
PageUp: () =>
|
|
713
|
-
PageDown: () =>
|
|
706
|
+
ArrowLeft: () => X(z, -1),
|
|
707
|
+
ArrowRight: () => X(z, 1),
|
|
708
|
+
ArrowUp: () => X(z, -7),
|
|
709
|
+
ArrowDown: () => X(z, 7),
|
|
710
|
+
Home: () => X(z, -((z.getDay() - l + 7) % 7)),
|
|
711
|
+
End: () => X(z, 6 - (z.getDay() - l + 7) % 7),
|
|
712
|
+
PageUp: () => ae(z, e.shiftKey ? -12 : -1),
|
|
713
|
+
PageDown: () => ae(z, e.shiftKey ? 12 : 1)
|
|
714
714
|
}[e.key];
|
|
715
|
-
t && (e.preventDefault(),
|
|
715
|
+
t && (e.preventDefault(), pe(t()));
|
|
716
716
|
}
|
|
717
|
-
function
|
|
718
|
-
(e.key === "Escape" || e.key === "Tab") && (e.preventDefault(),
|
|
717
|
+
function he(e) {
|
|
718
|
+
(e.key === "Escape" || e.key === "Tab") && (e.preventDefault(), de(!0));
|
|
719
719
|
}
|
|
720
|
-
let
|
|
720
|
+
let ge = new Intl.DateTimeFormat(c, {
|
|
721
721
|
month: "long",
|
|
722
722
|
year: "numeric"
|
|
723
|
-
}).format(
|
|
723
|
+
}).format(z), _e = ge.charAt(0).toLocaleUpperCase(c) + ge.slice(1), ve = new Intl.DateTimeFormat(c, { dateStyle: "full" }), ye = oe(z, l)[0].map((e) => ({
|
|
724
724
|
short: new Intl.DateTimeFormat(c, { weekday: "narrow" }).format(e),
|
|
725
725
|
long: new Intl.DateTimeFormat(c, { weekday: "long" }).format(e)
|
|
726
|
-
})),
|
|
726
|
+
})), be = J(z), Q = ce(), $ = `${j.id}-calendar-title`;
|
|
727
727
|
return /* @__PURE__ */ x("div", {
|
|
728
|
-
className: C("hds-field",
|
|
728
|
+
className: C("hds-field", k),
|
|
729
729
|
children: [
|
|
730
730
|
/* @__PURE__ */ b("label", {
|
|
731
731
|
className: "hds-label",
|
|
732
|
-
htmlFor:
|
|
732
|
+
htmlFor: j.id,
|
|
733
733
|
children: e
|
|
734
734
|
}),
|
|
735
735
|
/* @__PURE__ */ x("div", {
|
|
736
|
-
ref:
|
|
736
|
+
ref: V,
|
|
737
737
|
className: "hds-date-wrap",
|
|
738
738
|
children: [
|
|
739
739
|
/* @__PURE__ */ b("input", {
|
|
740
|
-
...
|
|
741
|
-
id:
|
|
740
|
+
...A,
|
|
741
|
+
id: j.id,
|
|
742
742
|
type: "text",
|
|
743
743
|
inputMode: "numeric",
|
|
744
744
|
autoComplete: "off",
|
|
745
|
-
placeholder:
|
|
746
|
-
value:
|
|
745
|
+
placeholder: E,
|
|
746
|
+
value: F,
|
|
747
747
|
disabled: y,
|
|
748
748
|
required: T,
|
|
749
749
|
"aria-invalid": s ? !0 : void 0,
|
|
750
|
-
"aria-describedby":
|
|
750
|
+
"aria-describedby": K({
|
|
751
751
|
hint: o,
|
|
752
752
|
error: s,
|
|
753
|
-
"aria-describedby":
|
|
754
|
-
},
|
|
753
|
+
"aria-describedby": A["aria-describedby"]
|
|
754
|
+
}, j),
|
|
755
755
|
className: "hds-input hds-input--numeric hds-date-input",
|
|
756
|
-
onChange: (e) =>
|
|
756
|
+
onChange: (e) => Z(e.target.value),
|
|
757
757
|
onBlur: (e) => {
|
|
758
|
-
|
|
758
|
+
A.onBlur?.(e), F.trim() !== "" && ie(F) !== P && I(re(P));
|
|
759
759
|
}
|
|
760
760
|
}),
|
|
761
|
-
/* @__PURE__ */ b(
|
|
762
|
-
ref:
|
|
761
|
+
/* @__PURE__ */ b(O, {
|
|
762
|
+
ref: H,
|
|
763
763
|
variant: "ghost",
|
|
764
764
|
size: "sm",
|
|
765
765
|
iconOnly: !0,
|
|
766
|
-
icon: /* @__PURE__ */ b(
|
|
766
|
+
icon: /* @__PURE__ */ b(D, { name: "calendar" }),
|
|
767
767
|
"aria-label": u,
|
|
768
768
|
"aria-haspopup": "dialog",
|
|
769
|
-
"aria-expanded":
|
|
769
|
+
"aria-expanded": L,
|
|
770
770
|
disabled: y,
|
|
771
771
|
className: "hds-date-button",
|
|
772
|
-
onClick: () =>
|
|
772
|
+
onClick: () => L ? de(!1) : ue()
|
|
773
773
|
}),
|
|
774
774
|
h ? /* @__PURE__ */ b("input", {
|
|
775
775
|
type: "hidden",
|
|
776
776
|
name: h,
|
|
777
|
-
value:
|
|
777
|
+
value: P
|
|
778
778
|
}) : null
|
|
779
779
|
]
|
|
780
780
|
}),
|
|
781
|
-
/* @__PURE__ */ b(
|
|
781
|
+
/* @__PURE__ */ b(q, {
|
|
782
782
|
hint: o,
|
|
783
783
|
error: s,
|
|
784
|
-
ids:
|
|
784
|
+
ids: j
|
|
785
785
|
}),
|
|
786
|
-
|
|
787
|
-
ref:
|
|
786
|
+
L ? S(/* @__PURE__ */ x(w, {
|
|
787
|
+
ref: U,
|
|
788
788
|
role: "dialog",
|
|
789
789
|
tone: "thick",
|
|
790
790
|
"aria-labelledby": $,
|
|
791
791
|
className: "hds-date-panel",
|
|
792
|
-
onKeyDown:
|
|
792
|
+
onKeyDown: he,
|
|
793
793
|
children: [/* @__PURE__ */ x("div", {
|
|
794
794
|
className: "hds-date-header",
|
|
795
795
|
children: [
|
|
796
|
-
/* @__PURE__ */ b(
|
|
796
|
+
/* @__PURE__ */ b(O, {
|
|
797
797
|
variant: "ghost",
|
|
798
798
|
size: "sm",
|
|
799
799
|
iconOnly: !0,
|
|
800
|
-
icon: /* @__PURE__ */ b(
|
|
800
|
+
icon: /* @__PURE__ */ b(D, { name: "chevron-left" }),
|
|
801
801
|
"aria-label": d,
|
|
802
|
-
onClick: () =>
|
|
802
|
+
onClick: () => B(ae(z, -1))
|
|
803
803
|
}),
|
|
804
804
|
/* @__PURE__ */ b("h2", {
|
|
805
805
|
id: $,
|
|
806
806
|
className: "hds-date-title",
|
|
807
807
|
"aria-live": "polite",
|
|
808
|
-
children:
|
|
808
|
+
children: _e
|
|
809
809
|
}),
|
|
810
|
-
/* @__PURE__ */ b(
|
|
810
|
+
/* @__PURE__ */ b(O, {
|
|
811
811
|
variant: "ghost",
|
|
812
812
|
size: "sm",
|
|
813
813
|
iconOnly: !0,
|
|
814
|
-
icon: /* @__PURE__ */ b(
|
|
814
|
+
icon: /* @__PURE__ */ b(D, { name: "chevron-right" }),
|
|
815
815
|
"aria-label": p,
|
|
816
|
-
onClick: () =>
|
|
816
|
+
onClick: () => B(ae(z, 1))
|
|
817
817
|
})
|
|
818
818
|
]
|
|
819
819
|
}), /* @__PURE__ */ x("table", {
|
|
820
820
|
role: "grid",
|
|
821
821
|
"aria-labelledby": $,
|
|
822
822
|
className: "hds-date-grid",
|
|
823
|
-
onKeyDown:
|
|
824
|
-
children: [/* @__PURE__ */ b("thead", { children: /* @__PURE__ */ b("tr", { children:
|
|
823
|
+
onKeyDown: me,
|
|
824
|
+
children: [/* @__PURE__ */ b("thead", { children: /* @__PURE__ */ b("tr", { children: ye.map((e) => /* @__PURE__ */ b("th", {
|
|
825
825
|
scope: "col",
|
|
826
826
|
abbr: e.long,
|
|
827
827
|
children: e.short
|
|
828
|
-
}, e.long)) }) }), /* @__PURE__ */ b("tbody", { children:
|
|
829
|
-
let t =
|
|
828
|
+
}, e.long)) }) }), /* @__PURE__ */ b("tbody", { children: oe(z, l).map((e) => /* @__PURE__ */ b("tr", { children: e.map((e) => {
|
|
829
|
+
let t = J(e), n = se(t, i, a);
|
|
830
830
|
return /* @__PURE__ */ b("td", {
|
|
831
831
|
role: "gridcell",
|
|
832
|
-
"aria-selected": t ===
|
|
832
|
+
"aria-selected": t === P,
|
|
833
833
|
children: /* @__PURE__ */ b("button", {
|
|
834
834
|
type: "button",
|
|
835
|
-
tabIndex: t ===
|
|
835
|
+
tabIndex: t === be ? 0 : -1,
|
|
836
836
|
"aria-label": ve.format(e),
|
|
837
|
-
"aria-current": t ===
|
|
837
|
+
"aria-current": t === Q ? "date" : void 0,
|
|
838
838
|
"aria-disabled": !n || void 0,
|
|
839
|
-
className: C("hds-date-day", e.getMonth() !==
|
|
840
|
-
onClick: () =>
|
|
839
|
+
className: C("hds-date-day", e.getMonth() !== z.getMonth() && "hds-date-day--outside", t === P && "hds-date-day--selected"),
|
|
840
|
+
onClick: () => fe(e),
|
|
841
841
|
children: e.getDate()
|
|
842
842
|
})
|
|
843
843
|
}, t);
|
|
844
|
-
}) },
|
|
844
|
+
}) }, J(e[0]))) })]
|
|
845
845
|
})]
|
|
846
846
|
}), document.body) : null
|
|
847
847
|
]
|
|
848
848
|
});
|
|
849
849
|
}
|
|
850
850
|
//#endregion
|
|
851
|
+
//#region src/components/Typeahead/Typeahead.tsx
|
|
852
|
+
function Z(e, t) {
|
|
853
|
+
return e.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLocaleLowerCase(t);
|
|
854
|
+
}
|
|
855
|
+
function ue(e, t, n = "pt-BR", r = 8) {
|
|
856
|
+
let i = Z(t.trim(), n), a = [...new Map(e.filter(Boolean).map((e) => [Z(e, n), e])).values()];
|
|
857
|
+
return i ? a.map((e) => ({
|
|
858
|
+
suggestion: e,
|
|
859
|
+
at: Z(e, n).indexOf(i)
|
|
860
|
+
})).filter(({ suggestion: e, at: t }) => t >= 0 && Z(e, n) !== i).sort((e, t) => (e.at === 0 ? 0 : 1) - (t.at === 0 ? 0 : 1) || e.suggestion.localeCompare(t.suggestion, n)).slice(0, r).map(({ suggestion: e }) => e) : a.slice(0, r);
|
|
861
|
+
}
|
|
862
|
+
function de({ text: e, query: t, locale: n }) {
|
|
863
|
+
let r = t.trim() ? Z(e, n).indexOf(Z(t.trim(), n)) : -1;
|
|
864
|
+
if (r < 0) return /* @__PURE__ */ b(y, { children: e });
|
|
865
|
+
let i = r + t.trim().length;
|
|
866
|
+
return /* @__PURE__ */ x(y, { children: [
|
|
867
|
+
e.slice(0, r),
|
|
868
|
+
/* @__PURE__ */ b("mark", {
|
|
869
|
+
className: "hds-typeahead-match",
|
|
870
|
+
children: e.slice(r, i)
|
|
871
|
+
}),
|
|
872
|
+
e.slice(i)
|
|
873
|
+
] });
|
|
874
|
+
}
|
|
875
|
+
function fe({ label: e, value: t, defaultValue: n = "", onChange: r, suggestions: i, maxSuggestions: a = 8, hint: o, error: s, locale: c = "pt-BR", id: l, className: u, disabled: d, ...p }) {
|
|
876
|
+
let h = G(l), v = `${h.id}-list`, y = `${h.id}-label`, [T, E] = _(n), D = t === void 0 ? T : t, [O, k] = _(!1), [A, j] = _(-1), M = g(null), N = g(null), P = ue(i, D, c, a), F = O && P.length > 0;
|
|
877
|
+
function I(e) {
|
|
878
|
+
t === void 0 && E(e), r?.(e);
|
|
879
|
+
}
|
|
880
|
+
function L(e) {
|
|
881
|
+
I(e), k(!1), j(-1);
|
|
882
|
+
}
|
|
883
|
+
m(() => {
|
|
884
|
+
if (!F || !M.current || !N.current) return;
|
|
885
|
+
let e = () => {
|
|
886
|
+
M.current && N.current && (N.current.style.width = `${M.current.offsetWidth}px`, ee(M.current, N.current, "start"));
|
|
887
|
+
};
|
|
888
|
+
return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
|
|
889
|
+
window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
|
|
890
|
+
};
|
|
891
|
+
}, [F, P.length]), f(() => {
|
|
892
|
+
!F || A < 0 || document.getElementById(`${v}-${A}`)?.scrollIntoView?.({ block: "nearest" });
|
|
893
|
+
}, [
|
|
894
|
+
F,
|
|
895
|
+
A,
|
|
896
|
+
v
|
|
897
|
+
]);
|
|
898
|
+
function R(e) {
|
|
899
|
+
if (p.onKeyDown?.(e), e.key === "ArrowDown" || e.key === "ArrowUp") {
|
|
900
|
+
if (e.preventDefault(), !F) {
|
|
901
|
+
k(!0), j(e.key === "ArrowDown" ? 0 : P.length - 1);
|
|
902
|
+
return;
|
|
903
|
+
}
|
|
904
|
+
j((t) => e.key === "ArrowDown" ? (t + 1) % P.length : t <= 0 ? P.length - 1 : t - 1);
|
|
905
|
+
} else e.key === "Enter" && F && A >= 0 ? (e.preventDefault(), L(P[A])) : e.key === "Escape" && F ? (e.preventDefault(), k(!1), j(-1)) : e.key === "Tab" && k(!1);
|
|
906
|
+
}
|
|
907
|
+
return /* @__PURE__ */ x("div", {
|
|
908
|
+
className: C("hds-field", u),
|
|
909
|
+
children: [
|
|
910
|
+
/* @__PURE__ */ b("label", {
|
|
911
|
+
id: y,
|
|
912
|
+
className: "hds-label",
|
|
913
|
+
htmlFor: h.id,
|
|
914
|
+
children: e
|
|
915
|
+
}),
|
|
916
|
+
/* @__PURE__ */ b("input", {
|
|
917
|
+
spellCheck: !1,
|
|
918
|
+
...p,
|
|
919
|
+
ref: M,
|
|
920
|
+
id: h.id,
|
|
921
|
+
type: "text",
|
|
922
|
+
role: "combobox",
|
|
923
|
+
autoComplete: "off",
|
|
924
|
+
"aria-autocomplete": "list",
|
|
925
|
+
"aria-expanded": F,
|
|
926
|
+
"aria-controls": F ? v : void 0,
|
|
927
|
+
"aria-activedescendant": F && A >= 0 ? `${v}-${A}` : void 0,
|
|
928
|
+
"aria-invalid": s ? !0 : void 0,
|
|
929
|
+
"aria-describedby": K({
|
|
930
|
+
hint: o,
|
|
931
|
+
error: s,
|
|
932
|
+
"aria-describedby": p["aria-describedby"]
|
|
933
|
+
}, h),
|
|
934
|
+
className: "hds-input",
|
|
935
|
+
disabled: d,
|
|
936
|
+
value: D,
|
|
937
|
+
onChange: (e) => {
|
|
938
|
+
I(e.target.value), k(!0), j(-1);
|
|
939
|
+
},
|
|
940
|
+
onKeyDown: R,
|
|
941
|
+
onBlur: (e) => {
|
|
942
|
+
p.onBlur?.(e), k(!1), j(-1);
|
|
943
|
+
}
|
|
944
|
+
}),
|
|
945
|
+
/* @__PURE__ */ b(q, {
|
|
946
|
+
hint: o,
|
|
947
|
+
error: s,
|
|
948
|
+
ids: h
|
|
949
|
+
}),
|
|
950
|
+
F ? S(/* @__PURE__ */ b(w, {
|
|
951
|
+
ref: N,
|
|
952
|
+
id: v,
|
|
953
|
+
role: "listbox",
|
|
954
|
+
"aria-labelledby": y,
|
|
955
|
+
className: "hds-typeahead-panel",
|
|
956
|
+
children: P.map((e, t) => /* @__PURE__ */ b("div", {
|
|
957
|
+
id: `${v}-${t}`,
|
|
958
|
+
role: "option",
|
|
959
|
+
"aria-selected": t === A,
|
|
960
|
+
className: "hds-typeahead-option",
|
|
961
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
962
|
+
onClick: () => L(e),
|
|
963
|
+
onMouseMove: () => j(t),
|
|
964
|
+
children: /* @__PURE__ */ b(de, {
|
|
965
|
+
text: e,
|
|
966
|
+
query: D,
|
|
967
|
+
locale: c
|
|
968
|
+
})
|
|
969
|
+
}, e))
|
|
970
|
+
}), document.body) : null
|
|
971
|
+
]
|
|
972
|
+
});
|
|
973
|
+
}
|
|
974
|
+
//#endregion
|
|
851
975
|
//#region src/components/Checkbox/Checkbox.tsx
|
|
852
|
-
var
|
|
853
|
-
let o =
|
|
976
|
+
var pe = l(function({ label: e, hint: t, id: n, className: r, ...i }, a) {
|
|
977
|
+
let o = G(n);
|
|
854
978
|
return /* @__PURE__ */ x("label", {
|
|
855
979
|
className: C("hds-checkbox", r),
|
|
856
980
|
htmlFor: o.id,
|
|
@@ -865,7 +989,7 @@ var fe = l(function({ label: e, hint: t, id: n, className: r, ...i }, a) {
|
|
|
865
989
|
"aria-describedby": t ? o.hint : i["aria-describedby"]
|
|
866
990
|
}), /* @__PURE__ */ b("span", {
|
|
867
991
|
className: "hds-checkbox-box",
|
|
868
|
-
children: /* @__PURE__ */ b(
|
|
992
|
+
children: /* @__PURE__ */ b(D, { name: "check" })
|
|
869
993
|
})]
|
|
870
994
|
}), /* @__PURE__ */ x("span", {
|
|
871
995
|
className: "hds-checkbox-text",
|
|
@@ -879,7 +1003,7 @@ var fe = l(function({ label: e, hint: t, id: n, className: r, ...i }, a) {
|
|
|
879
1003
|
});
|
|
880
1004
|
//#endregion
|
|
881
1005
|
//#region src/components/Card/Card.tsx
|
|
882
|
-
function
|
|
1006
|
+
function me({ as: e = "article", eyebrow: t, title: n, media: r, footer: i, interactive: a = !1, className: o, children: s, ...c }) {
|
|
883
1007
|
return /* @__PURE__ */ x(e, {
|
|
884
1008
|
...c,
|
|
885
1009
|
className: C("hds-card", a && "hds-card--interactive", o),
|
|
@@ -915,14 +1039,14 @@ function pe({ as: e = "article", eyebrow: t, title: n, media: r, footer: i, inte
|
|
|
915
1039
|
}
|
|
916
1040
|
//#endregion
|
|
917
1041
|
//#region src/components/Badge/Badge.tsx
|
|
918
|
-
var
|
|
1042
|
+
var he = {
|
|
919
1043
|
accent: "info",
|
|
920
1044
|
success: "circle-check",
|
|
921
1045
|
warning: "triangle-alert",
|
|
922
1046
|
danger: "circle-x"
|
|
923
1047
|
};
|
|
924
|
-
function
|
|
925
|
-
let i =
|
|
1048
|
+
function ge({ tone: e = "neutral", icon: t, children: n, className: r }) {
|
|
1049
|
+
let i = he[e], a = t === !1 ? null : t ?? (i ? /* @__PURE__ */ b(D, { name: i }) : null);
|
|
926
1050
|
return /* @__PURE__ */ x("span", {
|
|
927
1051
|
className: C("hds-badge", `hds-badge--${e}`, r),
|
|
928
1052
|
children: [a, n]
|
|
@@ -930,10 +1054,10 @@ function me({ tone: e = "neutral", icon: t, children: n, className: r }) {
|
|
|
930
1054
|
}
|
|
931
1055
|
//#endregion
|
|
932
1056
|
//#region src/components/Table/Table.tsx
|
|
933
|
-
function
|
|
1057
|
+
function _e(e) {
|
|
934
1058
|
return e.numeric ? "hds-cell--numeric" : e.align === "center" ? "hds-cell--center" : void 0;
|
|
935
1059
|
}
|
|
936
|
-
function
|
|
1060
|
+
function ve({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i = !1, empty: a = "Nada para mostrar.", maxHeight: o, glass: s = !1, className: c }) {
|
|
937
1061
|
return /* @__PURE__ */ b("div", {
|
|
938
1062
|
className: C("hds-table-wrap", "hds-scroll", s && "hds-glass hds-table-wrap--glass", c),
|
|
939
1063
|
role: "region",
|
|
@@ -949,11 +1073,11 @@ function ge({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i
|
|
|
949
1073
|
}) : null,
|
|
950
1074
|
/* @__PURE__ */ b("thead", { children: /* @__PURE__ */ b("tr", { children: e.map((e) => /* @__PURE__ */ b("th", {
|
|
951
1075
|
scope: "col",
|
|
952
|
-
className:
|
|
1076
|
+
className: _e(e),
|
|
953
1077
|
children: e.header
|
|
954
1078
|
}, e.key)) }) }),
|
|
955
1079
|
/* @__PURE__ */ b("tbody", { children: t.length ? t.map((t, r) => /* @__PURE__ */ b("tr", { children: e.map((e) => /* @__PURE__ */ b("td", {
|
|
956
|
-
className:
|
|
1080
|
+
className: _e(e),
|
|
957
1081
|
children: e.render ? e.render(t) : t[e.key]
|
|
958
1082
|
}, e.key)) }, String(t[n] ?? r))) : /* @__PURE__ */ b("tr", { children: /* @__PURE__ */ b("td", {
|
|
959
1083
|
colSpan: e.length || 1,
|
|
@@ -966,19 +1090,19 @@ function ge({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i
|
|
|
966
1090
|
}
|
|
967
1091
|
//#endregion
|
|
968
1092
|
//#region src/appearance/useAppearance.ts
|
|
969
|
-
var
|
|
1093
|
+
var ye = !1, be = {
|
|
970
1094
|
theme: "dark",
|
|
971
1095
|
transparency: "full"
|
|
972
|
-
},
|
|
973
|
-
function
|
|
1096
|
+
}, Q = be;
|
|
1097
|
+
function $() {
|
|
974
1098
|
let e = a();
|
|
975
|
-
return (e.theme !==
|
|
1099
|
+
return (e.theme !== Q.theme || e.transparency !== Q.transparency) && (Q = e), Q;
|
|
976
1100
|
}
|
|
977
|
-
function
|
|
1101
|
+
function xe() {
|
|
978
1102
|
f(() => {
|
|
979
|
-
|
|
1103
|
+
ye || (ye = !0, document.documentElement.hasAttribute("data-theme") || r());
|
|
980
1104
|
}, []);
|
|
981
|
-
let e = v(o,
|
|
1105
|
+
let e = v(o, $, () => be);
|
|
982
1106
|
return {
|
|
983
1107
|
...e,
|
|
984
1108
|
setTheme: t,
|
|
@@ -989,25 +1113,25 @@ function Q() {
|
|
|
989
1113
|
}
|
|
990
1114
|
//#endregion
|
|
991
1115
|
//#region src/components/AppearanceToggles/AppearanceToggles.tsx
|
|
992
|
-
function
|
|
993
|
-
let { theme: i, toggleTheme: a } =
|
|
994
|
-
return /* @__PURE__ */ b(
|
|
1116
|
+
function Se({ lightLabel: e = "Mudar para o tema claro", darkLabel: t = "Mudar para o tema escuro", variant: n = "ghost", ...r }) {
|
|
1117
|
+
let { theme: i, toggleTheme: a } = xe(), o = i === "dark" ? e : t;
|
|
1118
|
+
return /* @__PURE__ */ b(O, {
|
|
995
1119
|
...r,
|
|
996
1120
|
variant: n,
|
|
997
1121
|
iconOnly: !0,
|
|
998
|
-
icon: /* @__PURE__ */ b(
|
|
1122
|
+
icon: /* @__PURE__ */ b(D, { name: i === "dark" ? "sun" : "moon" }),
|
|
999
1123
|
"aria-label": o,
|
|
1000
1124
|
title: o,
|
|
1001
1125
|
onClick: a
|
|
1002
1126
|
});
|
|
1003
1127
|
}
|
|
1004
|
-
function
|
|
1005
|
-
let { transparency: r, toggleTransparency: i } =
|
|
1006
|
-
return /* @__PURE__ */ b(
|
|
1128
|
+
function Ce({ label: e = "Reduzir transparência", variant: t = "ghost", ...n }) {
|
|
1129
|
+
let { transparency: r, toggleTransparency: i } = xe();
|
|
1130
|
+
return /* @__PURE__ */ b(O, {
|
|
1007
1131
|
...n,
|
|
1008
1132
|
variant: t,
|
|
1009
1133
|
iconOnly: !0,
|
|
1010
|
-
icon: /* @__PURE__ */ b(
|
|
1134
|
+
icon: /* @__PURE__ */ b(D, { name: "blend" }),
|
|
1011
1135
|
"aria-label": e,
|
|
1012
1136
|
"aria-pressed": r === "reduced",
|
|
1013
1137
|
title: e,
|
|
@@ -1016,7 +1140,7 @@ function be({ label: e = "Reduzir transparência", variant: t = "ghost", ...n })
|
|
|
1016
1140
|
}
|
|
1017
1141
|
//#endregion
|
|
1018
1142
|
//#region src/components/Container/Container.tsx
|
|
1019
|
-
function
|
|
1143
|
+
function we({ as: e = "section", withSidebar: t = !1, className: n, ...r }) {
|
|
1020
1144
|
return /* @__PURE__ */ b(e, {
|
|
1021
1145
|
...r,
|
|
1022
1146
|
className: C("hds-container", t && "hds-container--with-sidebar", n)
|
|
@@ -1024,7 +1148,7 @@ function $({ as: e = "section", withSidebar: t = !1, className: n, ...r }) {
|
|
|
1024
1148
|
}
|
|
1025
1149
|
//#endregion
|
|
1026
1150
|
//#region src/components/SectionTitle/SectionTitle.tsx
|
|
1027
|
-
function
|
|
1151
|
+
function Te({ children: e, index: t, as: n = "h2", id: r, className: i }) {
|
|
1028
1152
|
return /* @__PURE__ */ x(n, {
|
|
1029
1153
|
id: r,
|
|
1030
1154
|
className: C("hds-section-title", i),
|
|
@@ -1037,7 +1161,7 @@ function xe({ children: e, index: t, as: n = "h2", id: r, className: i }) {
|
|
|
1037
1161
|
}
|
|
1038
1162
|
//#endregion
|
|
1039
1163
|
//#region src/components/Separator/Separator.tsx
|
|
1040
|
-
function
|
|
1164
|
+
function Ee({ orientation: e = "horizontal", decorative: t = !1, className: n }) {
|
|
1041
1165
|
return /* @__PURE__ */ b("div", {
|
|
1042
1166
|
role: t ? "none" : "separator",
|
|
1043
1167
|
"aria-orientation": t ? void 0 : e,
|
|
@@ -1046,7 +1170,7 @@ function Se({ orientation: e = "horizontal", decorative: t = !1, className: n })
|
|
|
1046
1170
|
}
|
|
1047
1171
|
//#endregion
|
|
1048
1172
|
//#region src/components/ScrollArea/ScrollArea.tsx
|
|
1049
|
-
function
|
|
1173
|
+
function De({ label: e, maxHeight: t, className: n, style: r, ...i }) {
|
|
1050
1174
|
return /* @__PURE__ */ b("div", {
|
|
1051
1175
|
...i,
|
|
1052
1176
|
role: "region",
|
|
@@ -1061,11 +1185,11 @@ function Ce({ label: e, maxHeight: t, className: n, style: r, ...i }) {
|
|
|
1061
1185
|
}
|
|
1062
1186
|
//#endregion
|
|
1063
1187
|
//#region src/components/Loading/Loading.tsx
|
|
1064
|
-
function
|
|
1188
|
+
function Oe({ size: e = "md", label: t = "Carregando…", showLabel: n = !1, className: r }) {
|
|
1065
1189
|
return /* @__PURE__ */ x("span", {
|
|
1066
1190
|
role: "status",
|
|
1067
1191
|
className: C("hds-loading", `hds-loading--${e}`, r),
|
|
1068
|
-
children: [/* @__PURE__ */ b(
|
|
1192
|
+
children: [/* @__PURE__ */ b(D, { name: "loader" }), /* @__PURE__ */ b("span", {
|
|
1069
1193
|
className: n ? void 0 : "hds-visually-hidden",
|
|
1070
1194
|
children: t
|
|
1071
1195
|
})]
|
|
@@ -1073,7 +1197,7 @@ function we({ size: e = "md", label: t = "Carregando…", showLabel: n = !1, cla
|
|
|
1073
1197
|
}
|
|
1074
1198
|
//#endregion
|
|
1075
1199
|
//#region src/components/GlowAvatar/GlowAvatar.tsx
|
|
1076
|
-
function
|
|
1200
|
+
function ke({ src: e, alt: t, size: n = 96, className: r }) {
|
|
1077
1201
|
return /* @__PURE__ */ x("span", {
|
|
1078
1202
|
className: C("hds-avatar", r),
|
|
1079
1203
|
style: {
|
|
@@ -1093,6 +1217,6 @@ function Te({ src: e, alt: t, size: n = 96, className: r }) {
|
|
|
1093
1217
|
});
|
|
1094
1218
|
}
|
|
1095
1219
|
//#endregion
|
|
1096
|
-
export { s as APPEARANCE_STORAGE_KEYS,
|
|
1220
|
+
export { s as APPEARANCE_STORAGE_KEYS, ge as Badge, O as Button, me as Card, pe as Checkbox, we as Container, le as DateInput, R as Dialog, I as FloatingButton, w as GlassPanel, ke as GlowAvatar, te as Input, Oe as Loading, F as Menu, j as NavBar, De as ScrollArea, Te as SectionTitle, P as SegmentedControl, ne as Select, Ee as Separator, M as Sidebar, ve as Table, Se as ThemeToggle, V as Toast, U as ToastProvider, Ce as TransparencyToggle, fe as Typeahead, r as applyStoredAppearance, e as enableGlassRefraction, a as getAppearance, n as readStoredAppearance, t as setTheme, i as setTransparency, o as subscribeToAppearance, xe as useAppearance, W as useToast };
|
|
1097
1221
|
|
|
1098
1222
|
//# sourceMappingURL=index.js.map
|