@hemerson/design-system 0.3.1 → 0.5.0

package/dist/index.js

@@ -19,10 +19,18 @@ var w = l(function({ as: e = "div", tone: t = "regular", className: n, ...r }, i
 	cx: 12,
 	cy: 12,
 	r: 10
-}, E = {
+}, ee = {
 	check: ["M20 6 9 17l-5-5"],
 	x: ["M18 6 6 18", "m6 6 12 12"],
 	"chevron-down": ["m6 9 6 6 6-6"],
+	"chevron-left": ["m15 18-6-6 6-6"],
+	"chevron-right": ["m9 18 6-6-6-6"],
+	calendar: [
+		"M8 2v4",
+		"M16 2v4",
+		"M3 10h18",
+		"M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z"
+	],
 	"circle-check": [T, "m9 12 2 2 4-4"],
 	"circle-x": [
 		T,
@@ -66,8 +74,8 @@ var w = l(function({ as: e = "div", tone: t = "regular", className: n, ...r }, i
 		r: 7
 	}]
 };
-function D({ name: e, className: t }) {
-	let n = E[e];
+function E({ name: e, className: t }) {
+	let n = ee[e];
 	return /* @__PURE__ */ b("svg", {
 		className: C("hds-icon", t),
 		viewBox: "0 0 24 24",
@@ -87,7 +95,7 @@ function D({ name: e, className: t }) {
 }
 //#endregion
 //#region src/components/Button/Button.tsx
-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) {
+var D = 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) {
 	return r && !l["aria-label"] && !l["aria-labelledby"] && console.warn("Button: an icon-only button needs an aria-label."), /* @__PURE__ */ x("button", {
 		...l,
 		ref: u,
@@ -95,7 +103,7 @@ var O = l(function({ variant: e = "primary", size: t = "md", icon: n, iconOnly:
 		disabled: a || i,
 		"aria-busy": i || void 0,
 		className: C("hds-btn", `hds-btn--${e}`, t !== "md" && `hds-btn--${t}`, r && "hds-btn--icon", e === "glass" && "hds-glass", s),
-		children: [i ? /* @__PURE__ */ b(D, {
+		children: [i ? /* @__PURE__ */ b(E, {
 			name: "loader",
 			className: "hds-spin"
 		}) : n, r ? null : c]
@@ -103,14 +111,14 @@ var O = l(function({ variant: e = "primary", size: t = "md", icon: n, iconOnly:
 });
 //#endregion
 //#region src/components/NavBar/NavBar.tsx
-function ee({ active: e = !1, className: t, ...n }) {
+function te({ active: e = !1, className: t, ...n }) {
 	return /* @__PURE__ */ b("a", {
 		...n,
 		"aria-current": e ? "page" : void 0,
 		className: C("hds-navbar-link", t)
 	});
 }
-function k({ title: e, actions: t, navLabel: n = "Principal", className: r, children: i, ...a }) {
+function O({ title: e, actions: t, navLabel: n = "Principal", className: r, children: i, ...a }) {
 	return /* @__PURE__ */ x(w, {
 		...a,
 		as: "header",
@@ -132,7 +140,7 @@ function k({ title: e, actions: t, navLabel: n = "Principal", className: r, chil
 		]
 	});
 }
-var te = Object.assign(k, { Link: ee });
+var k = Object.assign(O, { Link: te });
 //#endregion
 //#region src/components/Sidebar/Sidebar.tsx
 function ne({ items: e, footer: t, floating: n = !1, label: r = "Navegação", className: i }) {
@@ -169,13 +177,13 @@ function ne({ items: e, footer: t, floating: n = !1, label: r = "Navegação", c
 }
 //#endregion
 //#region src/components/SegmentedControl/SegmentedControl.tsx
-var A = {
+var re = {
 	ArrowRight: 1,
 	ArrowDown: 1,
 	ArrowLeft: -1,
 	ArrowUp: -1
 };
-function j({ options: e, value: t, defaultValue: n, onChange: r, label: i, className: a }) {
+function A({ options: e, value: t, defaultValue: n, onChange: r, label: i, className: a }) {
 	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));
 	m(() => {
 		function e() {
@@ -188,7 +196,7 @@ function j({ options: e, value: t, defaultValue: n, onChange: r, label: i, class
 		t === void 0 && s(e), r?.(e);
 	}
 	function p(t) {
-		let n = A[t.key];
+		let n = re[t.key];
 		if (!n) return;
 		t.preventDefault();
 		let r = (d + n + e.length) % e.length;
@@ -222,14 +230,13 @@ function j({ options: e, value: t, defaultValue: n, onChange: r, label: i, class
 		})]
 	});
 }
-//#endregion
-//#region src/components/Menu/Menu.tsx
-var M = 8;
-function N(e, t, n) {
-	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 + M + a <= s - M, l = r.top - M - a >= M, u = c || !l ? r.bottom + M : r.top - M - a, d = n === "end" ? r.right - i : r.left, f = Math.min(Math.max(M, d), Math.max(M, o - i - M));
+function ie(e, t, n) {
+	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));
 	t.style.top = `${Math.round(u)}px`, t.style.left = `${Math.round(f)}px`, t.dataset.side = c || !l ? "bottom" : "top";
 }
-function P({ label: e, icon: t, iconOnly: n = !1, items: r, align: i = "end", triggerVariant: a = "glass", className: o }) {
+//#endregion
+//#region src/components/Menu/Menu.tsx
+function j({ label: e, icon: t, iconOnly: n = !1, items: r, align: i = "end", triggerVariant: a = "glass", className: o }) {
 	let [s, c] = _(!1), l = g(null), u = g(null), d = p(), h = () => Array.from(u.current?.querySelectorAll("[role=\"menuitem\"]") ?? []);
 	function v(e) {
 		c(!1), e && l.current?.focus();
@@ -237,7 +244,7 @@ function P({ label: e, icon: t, iconOnly: n = !1, items: r, align: i = "end", tr
 	m(() => {
 		if (!s || !l.current || !u.current) return;
 		let e = () => {
-			l.current && u.current && N(l.current, u.current, i);
+			l.current && u.current && ie(l.current, u.current, i);
 		};
 		return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
 			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
@@ -257,7 +264,7 @@ function P({ label: e, icon: t, iconOnly: n = !1, items: r, align: i = "end", tr
 	}
 	return /* @__PURE__ */ x("div", {
 		className: C("hds-menu", o),
-		children: [/* @__PURE__ */ b(O, {
+		children: [/* @__PURE__ */ b(D, {
 			ref: l,
 			variant: a,
 			icon: t,
@@ -293,7 +300,7 @@ function P({ label: e, icon: t, iconOnly: n = !1, items: r, align: i = "end", tr
 }
 //#endregion
 //#region src/components/FloatingButton/FloatingButton.tsx
-var F = l(function({ label: e, position: t = "bottom-right", type: n = "button", className: r, ...i }, a) {
+var M = l(function({ label: e, position: t = "bottom-right", type: n = "button", className: r, ...i }, a) {
 	return /* @__PURE__ */ b("button", {
 		...i,
 		ref: a,
@@ -302,8 +309,8 @@ var F = l(function({ label: e, position: t = "bottom-right", type: n = "button",
 		title: e,
 		className: C("hds-glass", "hds-fab", `hds-fab--${t}`, r)
 	});
-}), I = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
-function re({ open: e, onClose: t, title: n, description: r, children: i, footer: a, closeLabel: o = "Fechar", initialFocus: s = "first", size: c = "md", className: l }) {
+}), N = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+function P({ open: e, onClose: t, title: n, description: r, children: i, footer: a, closeLabel: o = "Fechar", initialFocus: s = "first", size: c = "md", className: l }) {
 	let u = g(null), d = p(), m = p(), h = g(t);
 	return f(() => {
 		h.current = t;
@@ -311,15 +318,16 @@ function re({ open: e, onClose: t, title: n, description: r, children: i, footer
 		if (!e) return;
 		let t = document.activeElement, n = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
-		let r = u.current?.querySelectorAll(I) ?? [];
+		let r = u.current?.querySelectorAll(N) ?? [];
 		(s === "panel" || r.length === 0 ? u.current : r[0])?.focus();
 		function i(e) {
 			if (e.key === "Escape") {
+				if (e.defaultPrevented) return;
 				e.preventDefault(), h.current();
 				return;
 			}
 			if (e.key !== "Tab" || !u.current) return;
-			let t = Array.from(u.current.querySelectorAll(I));
+			let t = Array.from(u.current.querySelectorAll(N));
 			if (t.length === 0) return;
 			let n = t[0], r = t[t.length - 1];
 			e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
@@ -352,11 +360,11 @@ function re({ open: e, onClose: t, title: n, description: r, children: i, footer
 						id: m,
 						className: "hds-dialog-description",
 						children: r
-					}) : null] }), /* @__PURE__ */ b(O, {
+					}) : null] }), /* @__PURE__ */ b(D, {
 						variant: "ghost",
 						size: "sm",
 						iconOnly: !0,
-						icon: /* @__PURE__ */ b(D, { name: "x" }),
+						icon: /* @__PURE__ */ b(E, { name: "x" }),
 						"aria-label": o,
 						onClick: t
 					})]
@@ -372,13 +380,13 @@ function re({ open: e, onClose: t, title: n, description: r, children: i, footer
 }
 //#endregion
 //#region src/components/Toast/ToastView.tsx
-var ie = {
+var F = {
 	neutral: "info",
 	success: "circle-check",
 	warning: "triangle-alert",
 	danger: "circle-x"
 };
-function L({ tone: e, title: t, description: n, duration: r, onClose: i, closeLabel: a, className: o }) {
+function I({ tone: e, title: t, description: n, duration: r, onClose: i, closeLabel: a, className: o }) {
 	let [s, c] = _(!1), l = g(i);
 	return f(() => {
 		l.current = i;
@@ -394,7 +402,7 @@ function L({ tone: e, title: t, description: n, duration: r, onClose: i, closeLa
 		onFocus: () => c(!0),
 		onBlur: () => c(!1),
 		children: [
-			/* @__PURE__ */ b(D, { name: ie[e] }),
+			/* @__PURE__ */ b(E, { name: F[e] }),
 			/* @__PURE__ */ x("div", {
 				className: "hds-toast-body",
 				children: [/* @__PURE__ */ b("p", {
@@ -405,11 +413,11 @@ function L({ tone: e, title: t, description: n, duration: r, onClose: i, closeLa
 					children: n
 				}) : null]
 			}),
-			i ? /* @__PURE__ */ b(O, {
+			i ? /* @__PURE__ */ b(D, {
 				variant: "ghost",
 				size: "sm",
 				iconOnly: !0,
-				icon: /* @__PURE__ */ b(D, { name: "x" }),
+				icon: /* @__PURE__ */ b(E, { name: "x" }),
 				"aria-label": a,
 				onClick: i
 			}) : null
@@ -418,10 +426,10 @@ function L({ tone: e, title: t, description: n, duration: r, onClose: i, closeLa
 }
 //#endregion
 //#region src/components/Toast/Toast.tsx
-function R({ open: e, onClose: t, tone: n = "neutral", title: r, description: i, duration: a = 5e3, closeLabel: o = "Fechar aviso", className: s }) {
+function L({ open: e, onClose: t, tone: n = "neutral", title: r, description: i, duration: a = 5e3, closeLabel: o = "Fechar aviso", className: s }) {
 	return e ? S(/* @__PURE__ */ b("div", {
 		className: "hds-toast-region",
-		children: /* @__PURE__ */ b(L, {
+		children: /* @__PURE__ */ b(I, {
 			tone: n,
 			title: r,
 			description: i,
@@ -434,8 +442,8 @@ function R({ open: e, onClose: t, tone: n = "neutral", title: r, description: i,
 }
 //#endregion
 //#region src/components/Toast/ToastProvider.tsx
-var z = c(null);
-function B({ children: e, max: t = 3, closeLabel: n = "Fechar aviso" }) {
+var R = c(null);
+function z({ children: e, max: t = 3, closeLabel: n = "Fechar aviso" }) {
 	let [r, i] = _([]), a = g(0), o = u((e) => {
 		i((t) => t.filter((t) => t.id !== e));
 	}, []), s = u(({ title: e, description: n, tone: r = "neutral", duration: o = 5e3 }) => {
@@ -471,11 +479,11 @@ function B({ children: e, max: t = 3, closeLabel: n = "Fechar aviso" }) {
 			tone: "neutral"
 		})
 	}), [s, o]);
-	return /* @__PURE__ */ x(z.Provider, {
+	return /* @__PURE__ */ x(R.Provider, {
 		value: c,
 		children: [e, r.length ? S(/* @__PURE__ */ b("div", {
 			className: "hds-toast-region",
-			children: r.map((e) => /* @__PURE__ */ b(L, {
+			children: r.map((e) => /* @__PURE__ */ b(I, {
 				tone: e.tone,
 				title: e.title,
 				description: e.description,
@@ -486,14 +494,14 @@ function B({ children: e, max: t = 3, closeLabel: n = "Fechar aviso" }) {
 		}), document.body) : null]
 	});
 }
-function V() {
-	let e = d(z);
+function B() {
+	let e = d(R);
 	if (!e) throw Error("useToast must be used inside a ToastProvider.");
 	return e;
 }
 //#endregion
 //#region src/internal/field.tsx
-function H(e) {
+function V(e) {
 	let t = p(), n = e ?? t;
 	return {
 		id: n,
@@ -501,7 +509,7 @@ function H(e) {
 		error: `${n}-error`
 	};
 }
-function U(e, t) {
+function H(e, t) {
 	let n = [
 		e.hint && t.hint,
 		e.error && t.error,
@@ -509,7 +517,7 @@ function U(e, t) {
 	].filter(Boolean);
 	return n.length ? n.join(" ") : void 0;
 }
-function W({ hint: e, error: t, ids: n }) {
+function ae({ hint: e, error: t, ids: n }) {
 	return /* @__PURE__ */ x(y, { children: [e ? /* @__PURE__ */ b("p", {
 		id: n.hint,
 		className: "hds-hint",
@@ -517,13 +525,13 @@ function W({ hint: e, error: t, ids: n }) {
 	}) : null, t ? /* @__PURE__ */ x("p", {
 		id: n.error,
 		className: "hds-error",
-		children: [/* @__PURE__ */ b(D, { name: "circle-x" }), t]
+		children: [/* @__PURE__ */ b(E, { name: "circle-x" }), t]
 	}) : null] });
 }
 //#endregion
 //#region src/components/Input/Input.tsx
-var G = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, className: a, ...o }, s) {
-	let c = H(i);
+var oe = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, className: a, ...o }, s) {
+	let c = V(i);
 	return /* @__PURE__ */ x("div", {
 		className: C("hds-field", a),
 		children: [
@@ -538,22 +546,22 @@ var G = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, classN
 				ref: s,
 				id: c.id,
 				"aria-invalid": n ? !0 : void 0,
-				"aria-describedby": U({
+				"aria-describedby": H({
 					hint: t,
 					error: n,
 					"aria-describedby": o["aria-describedby"]
 				}, c),
 				className: C("hds-input", r && "hds-input--numeric")
 			}),
-			/* @__PURE__ */ b(W, {
+			/* @__PURE__ */ b(ae, {
 				hint: t,
 				error: n,
 				ids: c
 			})
 		]
 	});
-}), K = l(function({ label: e, options: t, placeholder: n, hint: r, error: i, id: a, className: o, ...s }, c) {
-	let l = H(a);
+}), se = l(function({ label: e, options: t, placeholder: n, hint: r, error: i, id: a, className: o, ...s }, c) {
+	let l = V(a);
 	return /* @__PURE__ */ x("div", {
 		className: C("hds-field", o),
 		children: [
@@ -569,7 +577,7 @@ var G = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, classN
 					ref: c,
 					id: l.id,
 					"aria-invalid": i ? !0 : void 0,
-					"aria-describedby": U({
+					"aria-describedby": H({
 						hint: r,
 						error: i,
 						"aria-describedby": s["aria-describedby"]
@@ -584,17 +592,256 @@ var G = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, classN
 						disabled: e.disabled,
 						children: e.label
 					}, e.value))]
-				}), /* @__PURE__ */ b(D, { name: "chevron-down" })]
+				}), /* @__PURE__ */ b(E, { name: "chevron-down" })]
 			}),
-			/* @__PURE__ */ b(W, {
+			/* @__PURE__ */ b(ae, {
 				hint: r,
 				error: i,
 				ids: l
 			})
 		]
 	});
-}), q = l(function({ label: e, hint: t, id: n, className: r, ...i }, a) {
-	let o = H(n);
+});
+//#endregion
+//#region src/components/DateInput/dates.ts
+function U(e) {
+	let t = (e) => String(e).padStart(2, "0");
+	return `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())}`;
+}
+function W(e) {
+	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e ?? "");
+	if (!t) return null;
+	let n = new Date(Number(t[1]), Number(t[2]) - 1, Number(t[3]));
+	return U(n) === e ? n : null;
+}
+function G(e) {
+	let t = W(e);
+	if (!t) return "";
+	let n = (e) => String(e).padStart(2, "0");
+	return `${n(t.getDate())}/${n(t.getMonth() + 1)}/${t.getFullYear()}`;
+}
+function ce(e) {
+	let t = e.trim(), n = /^\d{8}$/.test(t) ? [
+		t.slice(0, 2),
+		t.slice(2, 4),
+		t.slice(4)
+	] : /^(\d{1,2})[/.-](\d{1,2})[/.-](\d{4})$/.exec(t)?.slice(1);
+	if (!n) return null;
+	let [r, i, a] = n.map(Number), o = new Date(a, i - 1, r);
+	return o.getFullYear() === a && o.getMonth() === i - 1 && o.getDate() === r ? U(o) : null;
+}
+function K(e, t) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t);
+}
+function q(e, t) {
+	let n = new Date(e.getFullYear(), e.getMonth() + t, 1), r = new Date(n.getFullYear(), n.getMonth() + 1, 0).getDate();
+	return new Date(n.getFullYear(), n.getMonth(), Math.min(e.getDate(), r));
+}
+function le(e, t) {
+	let n = new Date(e.getFullYear(), e.getMonth(), 1), r = K(n, -((n.getDay() - t + 7) % 7));
+	return Array.from({ length: 6 }, (e, t) => Array.from({ length: 7 }, (e, n) => K(r, t * 7 + n)));
+}
+function ue(e, t, n) {
+	return (!t || e >= t) && (!n || e <= n);
+}
+//#endregion
+//#region src/components/DateInput/DateInput.tsx
+var de = () => U(/* @__PURE__ */ new Date());
+function J({ 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: ee = "dd/mm/aaaa", className: te, ...O }) {
+	let k = V(v), [ne, re] = _(n), A = t === void 0 ? ne : t, [j, M] = _(() => G(A)), [N, P] = _(!1), [F, I] = _(() => W(A) ?? /* @__PURE__ */ new Date()), L = g(null), R = g(null), z = g(null), B = g(!1), [oe, se] = _(A);
+	oe !== A && (se(A), M(G(A)));
+	function J(e) {
+		t === void 0 && re(e), e !== A && r?.(e);
+	}
+	function fe(e) {
+		if (M(e), e.trim() === "") {
+			J("");
+			return;
+		}
+		let t = ce(e);
+		t && ue(t, i, a) && J(t);
+	}
+	function pe() {
+		I(W(A) ?? W(de()) ?? /* @__PURE__ */ new Date()), B.current = !0, P(!0);
+	}
+	function Y(e) {
+		P(!1), e && R.current?.focus();
+	}
+	function me(e) {
+		let t = U(e);
+		ue(t, i, a) && (J(t), M(G(t)), Y(!0));
+	}
+	m(() => {
+		if (!N || !L.current || !z.current) return;
+		let e = () => {
+			L.current && z.current && ie(L.current, z.current, "start");
+		};
+		return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+		};
+	}, [N]), f(() => {
+		N && B.current && (B.current = !1, z.current?.querySelector("[tabindex=\"0\"]")?.focus());
+	}), f(() => {
+		if (!N) return;
+		function e(e) {
+			let t = e.target;
+			L.current?.contains(t) || z.current?.contains(t) || P(!1);
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [N]);
+	function he(e) {
+		B.current = !0, I(e);
+	}
+	function ge(e) {
+		let t = {
+			ArrowLeft: () => K(F, -1),
+			ArrowRight: () => K(F, 1),
+			ArrowUp: () => K(F, -7),
+			ArrowDown: () => K(F, 7),
+			Home: () => K(F, -((F.getDay() - l + 7) % 7)),
+			End: () => K(F, 6 - (F.getDay() - l + 7) % 7),
+			PageUp: () => q(F, e.shiftKey ? -12 : -1),
+			PageDown: () => q(F, e.shiftKey ? 12 : 1)
+		}[e.key];
+		t && (e.preventDefault(), he(t()));
+	}
+	function _e(e) {
+		(e.key === "Escape" || e.key === "Tab") && (e.preventDefault(), Y(!0));
+	}
+	let X = new Intl.DateTimeFormat(c, {
+		month: "long",
+		year: "numeric"
+	}).format(F), Z = X.charAt(0).toLocaleUpperCase(c) + X.slice(1), ve = new Intl.DateTimeFormat(c, { dateStyle: "full" }), Q = le(F, l)[0].map((e) => ({
+		short: new Intl.DateTimeFormat(c, { weekday: "narrow" }).format(e),
+		long: new Intl.DateTimeFormat(c, { weekday: "long" }).format(e)
+	})), ye = U(F), be = de(), $ = `${k.id}-calendar-title`;
+	return /* @__PURE__ */ x("div", {
+		className: C("hds-field", te),
+		children: [
+			/* @__PURE__ */ b("label", {
+				className: "hds-label",
+				htmlFor: k.id,
+				children: e
+			}),
+			/* @__PURE__ */ x("div", {
+				ref: L,
+				className: "hds-date-wrap",
+				children: [
+					/* @__PURE__ */ b("input", {
+						...O,
+						id: k.id,
+						type: "text",
+						inputMode: "numeric",
+						autoComplete: "off",
+						placeholder: ee,
+						value: j,
+						disabled: y,
+						required: T,
+						"aria-invalid": s ? !0 : void 0,
+						"aria-describedby": H({
+							hint: o,
+							error: s,
+							"aria-describedby": O["aria-describedby"]
+						}, k),
+						className: "hds-input hds-input--numeric hds-date-input",
+						onChange: (e) => fe(e.target.value),
+						onBlur: (e) => {
+							O.onBlur?.(e), j.trim() !== "" && ce(j) !== A && M(G(A));
+						}
+					}),
+					/* @__PURE__ */ b(D, {
+						ref: R,
+						variant: "ghost",
+						size: "sm",
+						iconOnly: !0,
+						icon: /* @__PURE__ */ b(E, { name: "calendar" }),
+						"aria-label": u,
+						"aria-haspopup": "dialog",
+						"aria-expanded": N,
+						disabled: y,
+						className: "hds-date-button",
+						onClick: () => N ? Y(!1) : pe()
+					}),
+					h ? /* @__PURE__ */ b("input", {
+						type: "hidden",
+						name: h,
+						value: A
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ b(ae, {
+				hint: o,
+				error: s,
+				ids: k
+			}),
+			N ? S(/* @__PURE__ */ x(w, {
+				ref: z,
+				role: "dialog",
+				tone: "thick",
+				"aria-labelledby": $,
+				className: "hds-date-panel",
+				onKeyDown: _e,
+				children: [/* @__PURE__ */ x("div", {
+					className: "hds-date-header",
+					children: [
+						/* @__PURE__ */ b(D, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: !0,
+							icon: /* @__PURE__ */ b(E, { name: "chevron-left" }),
+							"aria-label": d,
+							onClick: () => I(q(F, -1))
+						}),
+						/* @__PURE__ */ b("h2", {
+							id: $,
+							className: "hds-date-title",
+							"aria-live": "polite",
+							children: Z
+						}),
+						/* @__PURE__ */ b(D, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: !0,
+							icon: /* @__PURE__ */ b(E, { name: "chevron-right" }),
+							"aria-label": p,
+							onClick: () => I(q(F, 1))
+						})
+					]
+				}), /* @__PURE__ */ x("table", {
+					role: "grid",
+					"aria-labelledby": $,
+					className: "hds-date-grid",
+					onKeyDown: ge,
+					children: [/* @__PURE__ */ b("thead", { children: /* @__PURE__ */ b("tr", { children: Q.map((e) => /* @__PURE__ */ b("th", {
+						scope: "col",
+						abbr: e.long,
+						children: e.short
+					}, e.long)) }) }), /* @__PURE__ */ b("tbody", { children: le(F, l).map((e) => /* @__PURE__ */ b("tr", { children: e.map((e) => {
+						let t = U(e), n = ue(t, i, a);
+						return /* @__PURE__ */ b("td", {
+							role: "gridcell",
+							"aria-selected": t === A,
+							children: /* @__PURE__ */ b("button", {
+								type: "button",
+								tabIndex: t === ye ? 0 : -1,
+								"aria-label": ve.format(e),
+								"aria-current": t === be ? "date" : void 0,
+								"aria-disabled": !n || void 0,
+								className: C("hds-date-day", e.getMonth() !== F.getMonth() && "hds-date-day--outside", t === A && "hds-date-day--selected"),
+								onClick: () => me(e),
+								children: e.getDate()
+							})
+						}, t);
+					}) }, U(e[0]))) })]
+				})]
+			}), document.body) : null
+		]
+	});
+}
+//#endregion
+//#region src/components/Checkbox/Checkbox.tsx
+var fe = l(function({ label: e, hint: t, id: n, className: r, ...i }, a) {
+	let o = V(n);
 	return /* @__PURE__ */ x("label", {
 		className: C("hds-checkbox", r),
 		htmlFor: o.id,
@@ -609,7 +856,7 @@ var G = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, classN
 				"aria-describedby": t ? o.hint : i["aria-describedby"]
 			}), /* @__PURE__ */ b("span", {
 				className: "hds-checkbox-box",
-				children: /* @__PURE__ */ b(D, { name: "check" })
+				children: /* @__PURE__ */ b(E, { name: "check" })
 			})]
 		}), /* @__PURE__ */ x("span", {
 			className: "hds-checkbox-text",
@@ -623,7 +870,7 @@ var G = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, classN
 });
 //#endregion
 //#region src/components/Card/Card.tsx
-function J({ as: e = "article", eyebrow: t, title: n, media: r, footer: i, interactive: a = !1, className: o, children: s, ...c }) {
+function pe({ as: e = "article", eyebrow: t, title: n, media: r, footer: i, interactive: a = !1, className: o, children: s, ...c }) {
 	return /* @__PURE__ */ x(e, {
 		...c,
 		className: C("hds-card", a && "hds-card--interactive", o),
@@ -659,14 +906,14 @@ function J({ as: e = "article", eyebrow: t, title: n, media: r, footer: i, inter
 }
 //#endregion
 //#region src/components/Badge/Badge.tsx
-var ae = {
+var Y = {
 	accent: "info",
 	success: "circle-check",
 	warning: "triangle-alert",
 	danger: "circle-x"
 };
-function oe({ tone: e = "neutral", icon: t, children: n, className: r }) {
-	let i = ae[e], a = t === !1 ? null : t ?? (i ? /* @__PURE__ */ b(D, { name: i }) : null);
+function me({ tone: e = "neutral", icon: t, children: n, className: r }) {
+	let i = Y[e], a = t === !1 ? null : t ?? (i ? /* @__PURE__ */ b(E, { name: i }) : null);
 	return /* @__PURE__ */ x("span", {
 		className: C("hds-badge", `hds-badge--${e}`, r),
 		children: [a, n]
@@ -674,12 +921,12 @@ function oe({ tone: e = "neutral", icon: t, children: n, className: r }) {
 }
 //#endregion
 //#region src/components/Table/Table.tsx
-function Y(e) {
+function he(e) {
 	return e.numeric ? "hds-cell--numeric" : e.align === "center" ? "hds-cell--center" : void 0;
 }
-function se({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i = !1, empty: a = "Nada para mostrar.", maxHeight: o, className: s }) {
+function ge({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i = !1, empty: a = "Nada para mostrar.", maxHeight: o, glass: s = !1, className: c }) {
 	return /* @__PURE__ */ b("div", {
-		className: C("hds-table-wrap", "hds-scroll", s),
+		className: C("hds-table-wrap", "hds-scroll", s && "hds-glass hds-table-wrap--glass", c),
 		role: "region",
 		"aria-label": r,
 		tabIndex: 0,
@@ -693,11 +940,11 @@ function se({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i
 				}) : null,
 				/* @__PURE__ */ b("thead", { children: /* @__PURE__ */ b("tr", { children: e.map((e) => /* @__PURE__ */ b("th", {
 					scope: "col",
-					className: Y(e),
+					className: he(e),
 					children: e.header
 				}, e.key)) }) }),
 				/* @__PURE__ */ b("tbody", { children: t.length ? t.map((t, r) => /* @__PURE__ */ b("tr", { children: e.map((e) => /* @__PURE__ */ b("td", {
-					className: Y(e),
+					className: he(e),
 					children: e.render ? e.render(t) : t[e.key]
 				}, e.key)) }, String(t[n] ?? r))) : /* @__PURE__ */ b("tr", { children: /* @__PURE__ */ b("td", {
 					colSpan: e.length || 1,
@@ -710,19 +957,19 @@ function se({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i
 }
 //#endregion
 //#region src/appearance/useAppearance.ts
-var X = !1, Z = {
+var _e = !1, X = {
 	theme: "dark",
 	transparency: "full"
-}, Q = Z;
-function ce() {
+}, Z = X;
+function ve() {
 	let e = a();
-	return (e.theme !== Q.theme || e.transparency !== Q.transparency) && (Q = e), Q;
+	return (e.theme !== Z.theme || e.transparency !== Z.transparency) && (Z = e), Z;
 }
-function $() {
+function Q() {
 	f(() => {
-		X || (X = !0, document.documentElement.hasAttribute("data-theme") || r());
+		_e || (_e = !0, document.documentElement.hasAttribute("data-theme") || r());
 	}, []);
-	let e = v(o, ce, () => Z);
+	let e = v(o, ve, () => X);
 	return {
 		...e,
 		setTheme: t,
@@ -733,25 +980,25 @@ function $() {
 }
 //#endregion
 //#region src/components/AppearanceToggles/AppearanceToggles.tsx
-function le({ lightLabel: e = "Mudar para o tema claro", darkLabel: t = "Mudar para o tema escuro", variant: n = "ghost", ...r }) {
-	let { theme: i, toggleTheme: a } = $(), o = i === "dark" ? e : t;
-	return /* @__PURE__ */ b(O, {
+function ye({ lightLabel: e = "Mudar para o tema claro", darkLabel: t = "Mudar para o tema escuro", variant: n = "ghost", ...r }) {
+	let { theme: i, toggleTheme: a } = Q(), o = i === "dark" ? e : t;
+	return /* @__PURE__ */ b(D, {
 		...r,
 		variant: n,
 		iconOnly: !0,
-		icon: /* @__PURE__ */ b(D, { name: i === "dark" ? "sun" : "moon" }),
+		icon: /* @__PURE__ */ b(E, { name: i === "dark" ? "sun" : "moon" }),
 		"aria-label": o,
 		title: o,
 		onClick: a
 	});
 }
-function ue({ label: e = "Reduzir transparência", variant: t = "ghost", ...n }) {
-	let { transparency: r, toggleTransparency: i } = $();
-	return /* @__PURE__ */ b(O, {
+function be({ label: e = "Reduzir transparência", variant: t = "ghost", ...n }) {
+	let { transparency: r, toggleTransparency: i } = Q();
+	return /* @__PURE__ */ b(D, {
 		...n,
 		variant: t,
 		iconOnly: !0,
-		icon: /* @__PURE__ */ b(D, { name: "blend" }),
+		icon: /* @__PURE__ */ b(E, { name: "blend" }),
 		"aria-label": e,
 		"aria-pressed": r === "reduced",
 		title: e,
@@ -760,7 +1007,7 @@ function ue({ label: e = "Reduzir transparência", variant: t = "ghost", ...n })
 }
 //#endregion
 //#region src/components/Container/Container.tsx
-function de({ as: e = "section", withSidebar: t = !1, className: n, ...r }) {
+function $({ as: e = "section", withSidebar: t = !1, className: n, ...r }) {
 	return /* @__PURE__ */ b(e, {
 		...r,
 		className: C("hds-container", t && "hds-container--with-sidebar", n)
@@ -768,7 +1015,7 @@ function de({ as: e = "section", withSidebar: t = !1, className: n, ...r }) {
 }
 //#endregion
 //#region src/components/SectionTitle/SectionTitle.tsx
-function fe({ children: e, index: t, as: n = "h2", id: r, className: i }) {
+function xe({ children: e, index: t, as: n = "h2", id: r, className: i }) {
 	return /* @__PURE__ */ x(n, {
 		id: r,
 		className: C("hds-section-title", i),
@@ -781,7 +1028,7 @@ function fe({ children: e, index: t, as: n = "h2", id: r, className: i }) {
 }
 //#endregion
 //#region src/components/Separator/Separator.tsx
-function pe({ orientation: e = "horizontal", decorative: t = !1, className: n }) {
+function Se({ orientation: e = "horizontal", decorative: t = !1, className: n }) {
 	return /* @__PURE__ */ b("div", {
 		role: t ? "none" : "separator",
 		"aria-orientation": t ? void 0 : e,
@@ -790,7 +1037,7 @@ function pe({ orientation: e = "horizontal", decorative: t = !1, className: n })
 }
 //#endregion
 //#region src/components/ScrollArea/ScrollArea.tsx
-function me({ label: e, maxHeight: t, className: n, style: r, ...i }) {
+function Ce({ label: e, maxHeight: t, className: n, style: r, ...i }) {
 	return /* @__PURE__ */ b("div", {
 		...i,
 		role: "region",
@@ -805,11 +1052,11 @@ function me({ label: e, maxHeight: t, className: n, style: r, ...i }) {
 }
 //#endregion
 //#region src/components/Loading/Loading.tsx
-function he({ size: e = "md", label: t = "Carregando…", showLabel: n = !1, className: r }) {
+function we({ size: e = "md", label: t = "Carregando…", showLabel: n = !1, className: r }) {
 	return /* @__PURE__ */ x("span", {
 		role: "status",
 		className: C("hds-loading", `hds-loading--${e}`, r),
-		children: [/* @__PURE__ */ b(D, { name: "loader" }), /* @__PURE__ */ b("span", {
+		children: [/* @__PURE__ */ b(E, { name: "loader" }), /* @__PURE__ */ b("span", {
 			className: n ? void 0 : "hds-visually-hidden",
 			children: t
 		})]
@@ -817,7 +1064,7 @@ function he({ size: e = "md", label: t = "Carregando…", showLabel: n = !1, cla
 }
 //#endregion
 //#region src/components/GlowAvatar/GlowAvatar.tsx
-function ge({ src: e, alt: t, size: n = 96, className: r }) {
+function Te({ src: e, alt: t, size: n = 96, className: r }) {
 	return /* @__PURE__ */ x("span", {
 		className: C("hds-avatar", r),
 		style: {
@@ -837,6 +1084,6 @@ function ge({ src: e, alt: t, size: n = 96, className: r }) {
 	});
 }
 //#endregion
-export { s as APPEARANCE_STORAGE_KEYS, oe as Badge, O as Button, J as Card, q as Checkbox, de as Container, re as Dialog, F as FloatingButton, w as GlassPanel, ge as GlowAvatar, G as Input, he as Loading, P as Menu, te as NavBar, me as ScrollArea, fe as SectionTitle, j as SegmentedControl, K as Select, pe as Separator, ne as Sidebar, se as Table, le as ThemeToggle, R as Toast, B as ToastProvider, ue as TransparencyToggle, r as applyStoredAppearance, e as enableGlassRefraction, a as getAppearance, n as readStoredAppearance, t as setTheme, i as setTransparency, o as subscribeToAppearance, $ as useAppearance, V as useToast };
+export { s as APPEARANCE_STORAGE_KEYS, me as Badge, D as Button, pe as Card, fe as Checkbox, $ as Container, J as DateInput, P as Dialog, M as FloatingButton, w as GlassPanel, Te as GlowAvatar, oe as Input, we as Loading, j as Menu, k as NavBar, Ce as ScrollArea, xe as SectionTitle, A as SegmentedControl, se as Select, Se as Separator, ne as Sidebar, ge as Table, ye as ThemeToggle, L as Toast, z as ToastProvider, be as TransparencyToggle, r as applyStoredAppearance, e as enableGlassRefraction, a as getAppearance, n as readStoredAppearance, t as setTheme, i as setTransparency, o as subscribeToAppearance, Q as useAppearance, B as useToast };
 
 //# sourceMappingURL=index.js.map