@hemerson/design-system 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,26 +1,31 @@
 import { t as e } from "./enableGlassRefraction-CgDeg-2E.js";
-import { forwardRef as t, useEffect as n, useId as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { createPortal as u } from "react-dom";
+import { a as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./appearance-J15aUjQp.js";
+import { createContext as c, forwardRef as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useRef as g, useState as _, useSyncExternalStore as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { createPortal as S } from "react-dom";
 //#region src/internal/cx.ts
-function d(...e) {
+function C(...e) {
 	return e.filter(Boolean).join(" ");
 }
 //#endregion
 //#region src/components/GlassPanel/GlassPanel.tsx
-var f = t(function({ as: e = "div", tone: t = "regular", className: n, ...r }, i) {
-	return /* @__PURE__ */ c(e, {
+var w = l(function({ as: e = "div", tone: t = "regular", className: n, ...r }, i) {
+	return /* @__PURE__ */ b(e, {
 		...r,
 		ref: i,
-		className: d("hds-glass", t !== "regular" && `hds-glass--${t}`, n)
+		className: C("hds-glass", t !== "regular" && `hds-glass--${t}`, n)
 	});
-}), p = {
+}), T = {
+	cx: 12,
+	cy: 12,
+	r: 10
+}, E = {
 	check: ["M20 6 9 17l-5-5"],
 	x: ["M18 6 6 18", "m6 6 12 12"],
 	"chevron-down": ["m6 9 6 6 6-6"],
-	"circle-check": ["circle", "m9 12 2 2 4-4"],
+	"circle-check": [T, "m9 12 2 2 4-4"],
 	"circle-x": [
-		"circle",
+		T,
 		"m15 9-6 6",
 		"m9 9 6 6"
 	],
@@ -30,15 +35,41 @@ var f = t(function({ as: e = "div", tone: t = "regular", className: n, ...r }, i
 		"M12 17h.01"
 	],
 	info: [
-		"circle",
+		T,
 		"M12 16v-4",
 		"M12 8h.01"
 	],
-	loader: ["M21 12a9 9 0 1 1-6.219-8.56"]
+	loader: ["M21 12a9 9 0 1 1-6.219-8.56"],
+	sun: [
+		{
+			cx: 12,
+			cy: 12,
+			r: 4
+		},
+		"M12 2v2",
+		"M12 20v2",
+		"m4.93 4.93 1.41 1.41",
+		"m17.66 17.66 1.41 1.41",
+		"M2 12h2",
+		"M20 12h2",
+		"m6.34 17.66-1.41 1.41",
+		"m19.07 4.93-1.41 1.41"
+	],
+	moon: ["M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"],
+	blend: [{
+		cx: 9,
+		cy: 9,
+		r: 7
+	}, {
+		cx: 15,
+		cy: 15,
+		r: 7
+	}]
 };
-function m({ name: e, className: t }) {
-	return /* @__PURE__ */ c("svg", {
-		className: d("hds-icon", t),
+function D({ name: e, className: t }) {
+	let n = E[e];
+	return /* @__PURE__ */ b("svg", {
+		className: C("hds-icon", t),
 		viewBox: "0 0 24 24",
 		fill: "none",
 		stroke: "currentColor",
@@ -47,69 +78,69 @@ function m({ name: e, className: t }) {
 		strokeLinejoin: "round",
 		"aria-hidden": "true",
 		focusable: "false",
-		children: p[e].map((e) => e === "circle" ? /* @__PURE__ */ c("circle", {
-			cx: 12,
-			cy: 12,
-			r: 10
-		}, e) : /* @__PURE__ */ c("path", { d: e }, e))
+		children: n.map((e, t) => typeof e == "string" ? /* @__PURE__ */ b("path", { d: e }, t) : /* @__PURE__ */ b("circle", {
+			cx: e.cx,
+			cy: e.cy,
+			r: e.r
+		}, t))
 	});
 }
 //#endregion
 //#region src/components/Button/Button.tsx
-var h = t(function({ variant: e = "primary", size: t = "md", icon: n, iconOnly: r = !1, loading: i = !1, disabled: a, type: o = "button", className: s, children: u, ...f }, p) {
-	return r && !f["aria-label"] && !f["aria-labelledby"] && console.warn("Button: an icon-only button needs an aria-label."), /* @__PURE__ */ l("button", {
-		...f,
-		ref: p,
+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) {
+	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,
 		type: o,
 		disabled: a || i,
 		"aria-busy": i || void 0,
-		className: d("hds-btn", `hds-btn--${e}`, t !== "md" && `hds-btn--${t}`, r && "hds-btn--icon", e === "glass" && "hds-glass", s),
-		children: [i ? /* @__PURE__ */ c(m, {
+		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, {
 			name: "loader",
 			className: "hds-spin"
-		}) : n, r ? null : u]
+		}) : n, r ? null : c]
 	});
 });
 //#endregion
 //#region src/components/NavBar/NavBar.tsx
-function g({ active: e = !1, className: t, ...n }) {
-	return /* @__PURE__ */ c("a", {
+function ee({ active: e = !1, className: t, ...n }) {
+	return /* @__PURE__ */ b("a", {
 		...n,
 		"aria-current": e ? "page" : void 0,
-		className: d("hds-navbar-link", t)
+		className: C("hds-navbar-link", t)
 	});
 }
-function _({ title: e, actions: t, navLabel: n = "Principal", className: r, children: i, ...a }) {
-	return /* @__PURE__ */ l(f, {
+function k({ title: e, actions: t, navLabel: n = "Principal", className: r, children: i, ...a }) {
+	return /* @__PURE__ */ x(w, {
 		...a,
 		as: "header",
-		className: d("hds-navbar", r),
+		className: C("hds-navbar", r),
 		children: [
-			e ? /* @__PURE__ */ c("p", {
+			e ? /* @__PURE__ */ b("p", {
 				className: "hds-navbar-title",
 				children: e
 			}) : null,
-			i ? /* @__PURE__ */ c("nav", {
+			i ? /* @__PURE__ */ b("nav", {
 				className: "hds-navbar-nav",
 				"aria-label": n,
 				children: i
 			}) : null,
-			t ? /* @__PURE__ */ c("div", {
+			t ? /* @__PURE__ */ b("div", {
 				className: "hds-navbar-actions",
 				children: t
 			}) : null
 		]
 	});
 }
-var v = Object.assign(_, { Link: g });
+var te = Object.assign(k, { Link: ee });
 //#endregion
 //#region src/components/Sidebar/Sidebar.tsx
-function y({ items: e, footer: t, floating: n = !1, label: r = "Navegação", className: i }) {
-	return /* @__PURE__ */ l(f, {
+function ne({ items: e, footer: t, floating: n = !1, label: r = "Navegação", className: i }) {
+	return /* @__PURE__ */ x(w, {
 		as: "nav",
 		"aria-label": r,
-		className: d("hds-sidebar", n && "hds-sidebar--floating", i),
-		children: [/* @__PURE__ */ c("ul", {
+		className: C("hds-sidebar", n && "hds-sidebar--floating", i),
+		children: [/* @__PURE__ */ b("ul", {
 			className: "hds-sidebar-items",
 			children: e.map((e) => {
 				let t = {
@@ -118,19 +149,19 @@ function y({ items: e, footer: t, floating: n = !1, label: r = "Navegação", cl
 					"aria-current": e.active ? "page" : void 0,
 					className: "hds-sidebar-item"
 				};
-				return /* @__PURE__ */ c("li", { children: e.href ? /* @__PURE__ */ c("a", {
+				return /* @__PURE__ */ b("li", { children: e.href ? /* @__PURE__ */ b("a", {
 					...t,
 					href: e.href,
 					onClick: e.onClick,
 					children: e.icon
-				}) : /* @__PURE__ */ c("button", {
+				}) : /* @__PURE__ */ b("button", {
 					...t,
 					type: "button",
 					onClick: e.onClick,
 					children: e.icon
 				}) }, e.label);
 			})
-		}), t ? /* @__PURE__ */ c("div", {
+		}), t ? /* @__PURE__ */ b("div", {
 			className: "hds-sidebar-footer",
 			children: t
 		}) : null]
@@ -138,46 +169,46 @@ function y({ items: e, footer: t, floating: n = !1, label: r = "Navegação", cl
 }
 //#endregion
 //#region src/components/SegmentedControl/SegmentedControl.tsx
-var b = {
+var A = {
 	ArrowRight: 1,
 	ArrowDown: 1,
 	ArrowLeft: -1,
 	ArrowUp: -1
 };
-function x({ options: e, value: t, defaultValue: n, onChange: r, label: s, className: u }) {
-	let [p, m] = o(n ?? e[0]?.value), h = t === void 0 ? p : t, g = a([]), _ = a(null), v = Math.max(0, e.findIndex((e) => e.value === h));
-	i(() => {
+function j({ 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() {
-			let e = g.current[v];
-			e && _.current && (_.current.style.width = `${e.offsetWidth}px`, _.current.style.transform = `translateX(${e.offsetLeft - 4}px)`, _.current.style.opacity = "1");
+			let e = l.current[d];
+			e && u.current && (u.current.style.width = `${e.offsetWidth}px`, u.current.style.transform = `translateX(${e.offsetLeft - 4}px)`, u.current.style.opacity = "1");
 		}
 		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-	}, [v, e.length]);
-	function y(e) {
-		t === void 0 && m(e), r?.(e);
+	}, [d, e.length]);
+	function f(e) {
+		t === void 0 && s(e), r?.(e);
 	}
-	function x(t) {
-		let n = b[t.key];
+	function p(t) {
+		let n = A[t.key];
 		if (!n) return;
 		t.preventDefault();
-		let r = (v + n + e.length) % e.length;
-		y(e[r].value), g.current[r]?.focus();
+		let r = (d + n + e.length) % e.length;
+		f(e[r].value), l.current[r]?.focus();
 	}
-	return /* @__PURE__ */ l(f, {
+	return /* @__PURE__ */ x(w, {
 		role: "radiogroup",
-		"aria-label": s,
-		className: d("hds-segmented", u),
-		onKeyDown: x,
-		children: [/* @__PURE__ */ c("span", {
-			ref: _,
+		"aria-label": i,
+		className: C("hds-segmented", a),
+		onKeyDown: p,
+		children: [/* @__PURE__ */ b("span", {
+			ref: u,
 			className: "hds-segmented-thumb",
 			"aria-hidden": "true",
 			style: { opacity: 0 }
 		}), e.map((e, t) => {
-			let n = t === v;
-			return /* @__PURE__ */ l("button", {
+			let n = t === d;
+			return /* @__PURE__ */ x("button", {
 				ref: (e) => {
-					g.current[t] = e;
+					l.current[t] = e;
 				},
 				type: "button",
 				role: "radio",
@@ -185,7 +216,7 @@ function x({ options: e, value: t, defaultValue: n, onChange: r, label: s, class
 				"aria-label": e.ariaLabel,
 				tabIndex: n ? 0 : -1,
 				className: "hds-segmented-option",
-				onClick: () => y(e.value),
+				onClick: () => f(e.value),
 				children: [e.icon, e.label]
 			}, String(e.value));
 		})]
@@ -193,89 +224,102 @@ function x({ options: e, value: t, defaultValue: n, onChange: r, label: s, class
 }
 //#endregion
 //#region src/components/Menu/Menu.tsx
-function S({ label: e, icon: t, iconOnly: i = !1, items: s, align: u = "end", triggerVariant: p = "glass", className: m }) {
-	let [g, _] = o(!1), v = a(null), y = a(null), b = a(null), x = r(), S = () => Array.from(b.current?.querySelectorAll("[role=\"menuitem\"]") ?? []);
-	function C(e) {
-		_(!1), e && y.current?.focus();
+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));
+	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 }) {
+	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();
 	}
-	n(() => {
-		if (!g) return;
-		S()[0]?.focus();
+	m(() => {
+		if (!s || !l.current || !u.current) return;
+		let e = () => {
+			l.current && u.current && N(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);
+		};
+	}, [s, i]), f(() => {
+		if (!s) return;
+		h()[0]?.focus();
 		function e(e) {
-			v.current && !v.current.contains(e.target) && _(!1);
+			let t = e.target;
+			l.current?.contains(t) || u.current?.contains(t) || c(!1);
 		}
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [g]);
-	function w(e) {
-		let t = S(), n = t.indexOf(document.activeElement);
-		e.key === "Escape" ? (e.preventDefault(), C(!0)) : e.key === "Tab" ? C(!1) : 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());
+	}, [s]);
+	function y(e) {
+		let t = h(), n = t.indexOf(document.activeElement);
+		e.key === "Escape" || e.key === "Tab" ? (e.preventDefault(), v(!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());
 	}
-	return /* @__PURE__ */ l("div", {
-		ref: v,
-		className: d("hds-menu", m),
-		children: [/* @__PURE__ */ c(h, {
-			ref: y,
-			variant: p,
+	return /* @__PURE__ */ x("div", {
+		className: C("hds-menu", o),
+		children: [/* @__PURE__ */ b(O, {
+			ref: l,
+			variant: a,
 			icon: t,
-			iconOnly: i,
-			"aria-label": i ? e : void 0,
+			iconOnly: n,
+			"aria-label": n ? e : void 0,
 			"aria-haspopup": "menu",
-			"aria-expanded": g,
-			"aria-controls": g ? x : void 0,
-			onClick: () => _(!g),
+			"aria-expanded": s,
+			"aria-controls": s ? d : void 0,
+			onClick: () => c(!s),
 			children: e
-		}), g ? /* @__PURE__ */ c(f, {
-			ref: b,
-			id: x,
+		}), s ? S(/* @__PURE__ */ b(w, {
+			ref: u,
+			id: d,
 			role: "menu",
 			"aria-label": e,
-			className: d("hds-menu-panel", `hds-menu-panel--${u}`),
-			onKeyDown: w,
-			children: s.map((e, t) => e.separator ? /* @__PURE__ */ c("div", {
+			className: "hds-menu-panel",
+			onKeyDown: y,
+			children: r.map((e, t) => e.separator ? /* @__PURE__ */ b("div", {
 				role: "separator",
 				className: "hds-menu-separator"
-			}, `separator-${t}`) : /* @__PURE__ */ l("button", {
+			}, `separator-${t}`) : /* @__PURE__ */ x("button", {
 				type: "button",
 				role: "menuitem",
 				tabIndex: -1,
-				className: d("hds-menu-item", e.danger && "hds-menu-item--danger"),
+				className: C("hds-menu-item", e.danger && "hds-menu-item--danger"),
 				onClick: () => {
-					C(!0), e.onSelect?.();
+					v(!0), e.onSelect?.();
 				},
 				children: [e.icon, e.label]
 			}, e.label))
-		}) : null]
+		}), document.body) : null]
 	});
 }
 //#endregion
 //#region src/components/FloatingButton/FloatingButton.tsx
-var C = t(function({ label: e, position: t = "bottom-right", type: n = "button", className: r, ...i }, a) {
-	return /* @__PURE__ */ c("button", {
+var F = l(function({ label: e, position: t = "bottom-right", type: n = "button", className: r, ...i }, a) {
+	return /* @__PURE__ */ b("button", {
 		...i,
 		ref: a,
 		type: n,
 		"aria-label": e,
 		title: e,
-		className: d("hds-glass", "hds-fab", `hds-fab--${t}`, r)
+		className: C("hds-glass", "hds-fab", `hds-fab--${t}`, r)
 	});
-}), w = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
-function T({ open: e, onClose: t, title: i, description: o, children: s, footer: p, closeLabel: g = "Fechar", initialFocus: _ = "first", className: v }) {
-	let y = a(null), b = r(), x = r(), S = a(t);
-	return n(() => {
-		S.current = t;
-	}, [t]), n(() => {
+}), 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 }) {
+	let u = g(null), d = p(), m = p(), h = g(t);
+	return f(() => {
+		h.current = t;
+	}, [t]), f(() => {
 		if (!e) return;
 		let t = document.activeElement, n = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
-		let r = y.current?.querySelectorAll(w) ?? [];
-		(_ === "panel" || r.length === 0 ? y.current : r[0])?.focus();
+		let r = u.current?.querySelectorAll(I) ?? [];
+		(s === "panel" || r.length === 0 ? u.current : r[0])?.focus();
 		function i(e) {
 			if (e.key === "Escape") {
-				e.preventDefault(), S.current();
+				e.preventDefault(), h.current();
 				return;
 			}
-			if (e.key !== "Tab" || !y.current) return;
-			let t = Array.from(y.current.querySelectorAll(w));
+			if (e.key !== "Tab" || !u.current) return;
+			let t = Array.from(u.current.querySelectorAll(I));
 			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());
@@ -283,113 +327,181 @@ function T({ open: e, onClose: t, title: i, description: o, children: s, footer:
 		return document.addEventListener("keydown", i), () => {
 			document.removeEventListener("keydown", i), document.body.style.overflow = n, t?.focus();
 		};
-	}, [e, _]), e ? u(/* @__PURE__ */ c("div", {
+	}, [e, s]), e ? S(/* @__PURE__ */ b("div", {
 		className: "hds-scrim",
 		onMouseDown: (e) => {
 			e.target === e.currentTarget && t();
 		},
-		children: /* @__PURE__ */ l(f, {
-			ref: y,
+		children: /* @__PURE__ */ x(w, {
+			ref: u,
 			tone: "thick",
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-labelledby": b,
-			"aria-describedby": o ? x : void 0,
+			"aria-labelledby": d,
+			"aria-describedby": r ? m : void 0,
 			tabIndex: -1,
-			className: d("hds-dialog", v),
+			className: C("hds-dialog", c !== "md" && `hds-dialog--${c}`, l),
 			children: [
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ x("div", {
 					className: "hds-dialog-header",
-					children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("h2", {
-						id: b,
+					children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h2", {
+						id: d,
 						className: "hds-dialog-title",
-						children: i
-					}), o ? /* @__PURE__ */ c("p", {
-						id: x,
+						children: n
+					}), r ? /* @__PURE__ */ b("p", {
+						id: m,
 						className: "hds-dialog-description",
-						children: o
-					}) : null] }), /* @__PURE__ */ c(h, {
+						children: r
+					}) : null] }), /* @__PURE__ */ b(O, {
 						variant: "ghost",
 						size: "sm",
 						iconOnly: !0,
-						icon: /* @__PURE__ */ c(m, { name: "x" }),
-						"aria-label": g,
+						icon: /* @__PURE__ */ b(D, { name: "x" }),
+						"aria-label": o,
 						onClick: t
 					})]
 				}),
-				s,
-				p ? /* @__PURE__ */ c("div", {
+				i,
+				a ? /* @__PURE__ */ b("div", {
 					className: "hds-dialog-footer",
-					children: p
+					children: a
 				}) : null
 			]
 		})
 	}), document.body) : null;
 }
 //#endregion
-//#region src/components/Toast/Toast.tsx
-var E = {
+//#region src/components/Toast/ToastView.tsx
+var ie = {
 	neutral: "info",
 	success: "circle-check",
 	warning: "triangle-alert",
 	danger: "circle-x"
 };
-function D({ open: e, onClose: t, tone: r = "neutral", title: i, description: s, duration: p = 5e3, closeLabel: g = "Fechar aviso", className: _ }) {
-	let [v, y] = o(!1), b = a(t);
-	return n(() => {
-		b.current = t;
-	}, [t]), n(() => {
-		if (!e || !p || v) return;
-		let t = window.setTimeout(() => b.current?.(), p);
-		return () => window.clearTimeout(t);
-	}, [
-		e,
-		p,
-		v
-	]), e ? u(/* @__PURE__ */ c("div", {
+function L({ 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;
+	}, [i]), f(() => {
+		if (!r || s) return;
+		let e = window.setTimeout(() => l.current?.(), r);
+		return () => window.clearTimeout(e);
+	}, [r, s]), /* @__PURE__ */ x(w, {
+		role: e === "danger" ? "alert" : "status",
+		className: C("hds-toast", `hds-toast--${e}`, o),
+		onMouseEnter: () => c(!0),
+		onMouseLeave: () => c(!1),
+		onFocus: () => c(!0),
+		onBlur: () => c(!1),
+		children: [
+			/* @__PURE__ */ b(D, { name: ie[e] }),
+			/* @__PURE__ */ x("div", {
+				className: "hds-toast-body",
+				children: [/* @__PURE__ */ b("p", {
+					className: "hds-toast-title",
+					children: t
+				}), n ? /* @__PURE__ */ b("p", {
+					className: "hds-toast-description",
+					children: n
+				}) : null]
+			}),
+			i ? /* @__PURE__ */ b(O, {
+				variant: "ghost",
+				size: "sm",
+				iconOnly: !0,
+				icon: /* @__PURE__ */ b(D, { name: "x" }),
+				"aria-label": a,
+				onClick: i
+			}) : null
+		]
+	});
+}
+//#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 }) {
+	return e ? S(/* @__PURE__ */ b("div", {
 		className: "hds-toast-region",
-		children: /* @__PURE__ */ l(f, {
-			role: r === "danger" ? "alert" : "status",
-			className: d("hds-toast", `hds-toast--${r}`, _),
-			onMouseEnter: () => y(!0),
-			onMouseLeave: () => y(!1),
-			onFocus: () => y(!0),
-			onBlur: () => y(!1),
-			children: [
-				/* @__PURE__ */ c(m, { name: E[r] }),
-				/* @__PURE__ */ l("div", {
-					className: "hds-toast-body",
-					children: [/* @__PURE__ */ c("p", {
-						className: "hds-toast-title",
-						children: i
-					}), s ? /* @__PURE__ */ c("p", {
-						className: "hds-toast-description",
-						children: s
-					}) : null]
-				}),
-				t ? /* @__PURE__ */ c(h, {
-					variant: "ghost",
-					size: "sm",
-					iconOnly: !0,
-					icon: /* @__PURE__ */ c(m, { name: "x" }),
-					"aria-label": g,
-					onClick: t
-				}) : null
-			]
+		children: /* @__PURE__ */ b(L, {
+			tone: n,
+			title: r,
+			description: i,
+			duration: a,
+			onClose: t,
+			closeLabel: o,
+			className: s
 		})
 	}), document.body) : null;
 }
 //#endregion
+//#region src/components/Toast/ToastProvider.tsx
+var z = c(null);
+function B({ 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 }) => {
+		let s = `hds-toast-${++a.current}`;
+		return i((i) => [...i, {
+			id: s,
+			title: e,
+			description: n,
+			tone: r,
+			duration: o
+		}].slice(-t)), s;
+	}, [t]), c = h(() => ({
+		show: s,
+		dismiss: o,
+		success: (e, t) => s({
+			title: e,
+			description: t,
+			tone: "success"
+		}),
+		error: (e, t) => s({
+			title: e,
+			description: t,
+			tone: "danger"
+		}),
+		warning: (e, t) => s({
+			title: e,
+			description: t,
+			tone: "warning"
+		}),
+		info: (e, t) => s({
+			title: e,
+			description: t,
+			tone: "neutral"
+		})
+	}), [s, o]);
+	return /* @__PURE__ */ x(z.Provider, {
+		value: c,
+		children: [e, r.length ? S(/* @__PURE__ */ b("div", {
+			className: "hds-toast-region",
+			children: r.map((e) => /* @__PURE__ */ b(L, {
+				tone: e.tone,
+				title: e.title,
+				description: e.description,
+				duration: e.duration,
+				closeLabel: n,
+				onClose: () => o(e.id)
+			}, e.id))
+		}), document.body) : null]
+	});
+}
+function V() {
+	let e = d(z);
+	if (!e) throw Error("useToast must be used inside a ToastProvider.");
+	return e;
+}
+//#endregion
 //#region src/internal/field.tsx
-function O(e) {
-	let t = r(), n = e ?? t;
+function H(e) {
+	let t = p(), n = e ?? t;
 	return {
 		id: n,
 		hint: `${n}-hint`,
 		error: `${n}-error`
 	};
 }
-function k(e, t) {
+function U(e, t) {
 	let n = [
 		e.hint && t.hint,
 		e.error && t.error,
@@ -397,111 +509,111 @@ function k(e, t) {
 	].filter(Boolean);
 	return n.length ? n.join(" ") : void 0;
 }
-function A({ hint: e, error: t, ids: n }) {
-	return /* @__PURE__ */ l(s, { children: [e ? /* @__PURE__ */ c("p", {
+function W({ hint: e, error: t, ids: n }) {
+	return /* @__PURE__ */ x(y, { children: [e ? /* @__PURE__ */ b("p", {
 		id: n.hint,
 		className: "hds-hint",
 		children: e
-	}) : null, t ? /* @__PURE__ */ l("p", {
+	}) : null, t ? /* @__PURE__ */ x("p", {
 		id: n.error,
 		className: "hds-error",
-		children: [/* @__PURE__ */ c(m, { name: "circle-x" }), t]
+		children: [/* @__PURE__ */ b(D, { name: "circle-x" }), t]
 	}) : null] });
 }
 //#endregion
 //#region src/components/Input/Input.tsx
-var j = t(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, className: a, ...o }, s) {
-	let u = O(i);
-	return /* @__PURE__ */ l("div", {
-		className: d("hds-field", a),
+var G = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, className: a, ...o }, s) {
+	let c = H(i);
+	return /* @__PURE__ */ x("div", {
+		className: C("hds-field", a),
 		children: [
-			/* @__PURE__ */ c("label", {
+			/* @__PURE__ */ b("label", {
 				className: "hds-label",
-				htmlFor: u.id,
+				htmlFor: c.id,
 				children: e
 			}),
-			/* @__PURE__ */ c("input", {
+			/* @__PURE__ */ b("input", {
 				inputMode: r ? "decimal" : void 0,
 				...o,
 				ref: s,
-				id: u.id,
+				id: c.id,
 				"aria-invalid": n ? !0 : void 0,
-				"aria-describedby": k({
+				"aria-describedby": U({
 					hint: t,
 					error: n,
 					"aria-describedby": o["aria-describedby"]
-				}, u),
-				className: d("hds-input", r && "hds-input--numeric")
+				}, c),
+				className: C("hds-input", r && "hds-input--numeric")
 			}),
-			/* @__PURE__ */ c(A, {
+			/* @__PURE__ */ b(W, {
 				hint: t,
 				error: n,
-				ids: u
+				ids: c
 			})
 		]
 	});
-}), M = t(function({ label: e, options: t, placeholder: n, hint: r, error: i, id: a, className: o, ...s }, u) {
-	let f = O(a);
-	return /* @__PURE__ */ l("div", {
-		className: d("hds-field", o),
+}), K = l(function({ label: e, options: t, placeholder: n, hint: r, error: i, id: a, className: o, ...s }, c) {
+	let l = H(a);
+	return /* @__PURE__ */ x("div", {
+		className: C("hds-field", o),
 		children: [
-			/* @__PURE__ */ c("label", {
+			/* @__PURE__ */ b("label", {
 				className: "hds-label",
-				htmlFor: f.id,
+				htmlFor: l.id,
 				children: e
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ x("div", {
 				className: "hds-select-wrap",
-				children: [/* @__PURE__ */ l("select", {
+				children: [/* @__PURE__ */ x("select", {
 					...s,
-					ref: u,
-					id: f.id,
+					ref: c,
+					id: l.id,
 					"aria-invalid": i ? !0 : void 0,
-					"aria-describedby": k({
+					"aria-describedby": U({
 						hint: r,
 						error: i,
 						"aria-describedby": s["aria-describedby"]
-					}, f),
+					}, l),
 					className: "hds-select",
-					children: [n ? /* @__PURE__ */ c("option", {
+					children: [n ? /* @__PURE__ */ b("option", {
 						value: "",
 						disabled: !0,
 						children: n
-					}) : null, t.map((e) => /* @__PURE__ */ c("option", {
+					}) : null, t.map((e) => /* @__PURE__ */ b("option", {
 						value: e.value,
 						disabled: e.disabled,
 						children: e.label
 					}, e.value))]
-				}), /* @__PURE__ */ c(m, { name: "chevron-down" })]
+				}), /* @__PURE__ */ b(D, { name: "chevron-down" })]
 			}),
-			/* @__PURE__ */ c(A, {
+			/* @__PURE__ */ b(W, {
 				hint: r,
 				error: i,
-				ids: f
+				ids: l
 			})
 		]
 	});
-}), N = t(function({ label: e, hint: t, id: n, className: r, ...i }, a) {
-	let o = O(n);
-	return /* @__PURE__ */ l("label", {
-		className: d("hds-checkbox", r),
+}), q = l(function({ label: e, hint: t, id: n, className: r, ...i }, a) {
+	let o = H(n);
+	return /* @__PURE__ */ x("label", {
+		className: C("hds-checkbox", r),
 		htmlFor: o.id,
-		children: [/* @__PURE__ */ l("span", {
+		children: [/* @__PURE__ */ x("span", {
 			className: "hds-checkbox-control",
-			children: [/* @__PURE__ */ c("input", {
+			children: [/* @__PURE__ */ b("input", {
 				...i,
 				ref: a,
 				id: o.id,
 				type: "checkbox",
 				className: "hds-checkbox-input",
 				"aria-describedby": t ? o.hint : i["aria-describedby"]
-			}), /* @__PURE__ */ c("span", {
+			}), /* @__PURE__ */ b("span", {
 				className: "hds-checkbox-box",
-				children: /* @__PURE__ */ c(m, { name: "check" })
+				children: /* @__PURE__ */ b(D, { name: "check" })
 			})]
-		}), /* @__PURE__ */ l("span", {
+		}), /* @__PURE__ */ x("span", {
 			className: "hds-checkbox-text",
-			children: [e, t ? /* @__PURE__ */ c("span", {
+			children: [e, t ? /* @__PURE__ */ b("span", {
 				id: o.hint,
 				className: "hds-hint",
 				children: t
@@ -511,34 +623,34 @@ var j = t(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, classN
 });
 //#endregion
 //#region src/components/Card/Card.tsx
-function P({ as: e = "article", eyebrow: t, title: n, media: r, footer: i, interactive: a = !1, className: o, children: s, ...u }) {
-	return /* @__PURE__ */ l(e, {
-		...u,
-		className: d("hds-card", a && "hds-card--interactive", o),
+function J({ 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),
 		children: [
-			r ? /* @__PURE__ */ c("img", {
+			r ? /* @__PURE__ */ b("img", {
 				className: "hds-card-media",
 				src: r.src,
 				alt: r.alt ?? ""
 			}) : null,
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ x("div", {
 				className: "hds-card-body",
 				children: [
-					t ? /* @__PURE__ */ c("p", {
+					t ? /* @__PURE__ */ b("p", {
 						className: "hds-card-eyebrow",
 						children: t
 					}) : null,
-					n ? /* @__PURE__ */ c("h3", {
+					n ? /* @__PURE__ */ b("h3", {
 						className: "hds-card-title",
 						children: n
 					}) : null,
-					s ? /* @__PURE__ */ c("div", {
+					s ? /* @__PURE__ */ b("div", {
 						className: "hds-card-text",
 						children: s
 					}) : null
 				]
 			}),
-			i ? /* @__PURE__ */ c("div", {
+			i ? /* @__PURE__ */ b("div", {
 				className: "hds-card-footer",
 				children: i
 			}) : null
@@ -547,47 +659,47 @@ function P({ as: e = "article", eyebrow: t, title: n, media: r, footer: i, inter
 }
 //#endregion
 //#region src/components/Badge/Badge.tsx
-var F = {
+var ae = {
 	accent: "info",
 	success: "circle-check",
 	warning: "triangle-alert",
 	danger: "circle-x"
 };
-function I({ tone: e = "neutral", icon: t, children: n, className: r }) {
-	let i = F[e], a = t === !1 ? null : t ?? (i ? /* @__PURE__ */ c(m, { name: i }) : null);
-	return /* @__PURE__ */ l("span", {
-		className: d("hds-badge", `hds-badge--${e}`, r),
+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);
+	return /* @__PURE__ */ x("span", {
+		className: C("hds-badge", `hds-badge--${e}`, r),
 		children: [a, n]
 	});
 }
 //#endregion
 //#region src/components/Table/Table.tsx
-function L(e) {
+function Y(e) {
 	return e.numeric ? "hds-cell--numeric" : e.align === "center" ? "hds-cell--center" : void 0;
 }
-function R({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i = !1, empty: a = "Nada para mostrar.", maxHeight: o, className: s }) {
-	return /* @__PURE__ */ c("div", {
-		className: d("hds-table-wrap", "hds-scroll", s),
+function se({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i = !1, empty: a = "Nada para mostrar.", maxHeight: o, className: s }) {
+	return /* @__PURE__ */ b("div", {
+		className: C("hds-table-wrap", "hds-scroll", s),
 		role: "region",
 		"aria-label": r,
 		tabIndex: 0,
 		style: o === void 0 ? void 0 : { maxHeight: o },
-		children: /* @__PURE__ */ l("table", {
+		children: /* @__PURE__ */ x("table", {
 			className: "hds-table",
 			children: [
-				r ? /* @__PURE__ */ c("caption", {
+				r ? /* @__PURE__ */ b("caption", {
 					className: i ? "hds-visually-hidden" : void 0,
 					children: r
 				}) : null,
-				/* @__PURE__ */ c("thead", { children: /* @__PURE__ */ c("tr", { children: e.map((e) => /* @__PURE__ */ c("th", {
+				/* @__PURE__ */ b("thead", { children: /* @__PURE__ */ b("tr", { children: e.map((e) => /* @__PURE__ */ b("th", {
 					scope: "col",
-					className: L(e),
+					className: Y(e),
 					children: e.header
 				}, e.key)) }) }),
-				/* @__PURE__ */ c("tbody", { children: t.length ? t.map((t, r) => /* @__PURE__ */ c("tr", { children: e.map((e) => /* @__PURE__ */ c("td", {
-					className: L(e),
+				/* @__PURE__ */ b("tbody", { children: t.length ? t.map((t, r) => /* @__PURE__ */ b("tr", { children: e.map((e) => /* @__PURE__ */ b("td", {
+					className: Y(e),
 					children: e.render ? e.render(t) : t[e.key]
-				}, e.key)) }, String(t[n] ?? r))) : /* @__PURE__ */ c("tr", { children: /* @__PURE__ */ c("td", {
+				}, e.key)) }, String(t[n] ?? r))) : /* @__PURE__ */ b("tr", { children: /* @__PURE__ */ b("td", {
 					colSpan: e.length || 1,
 					className: "hds-table-empty",
 					children: a
@@ -597,20 +709,70 @@ function R({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i =
 	});
 }
 //#endregion
+//#region src/appearance/useAppearance.ts
+var X = !1, Z = {
+	theme: "dark",
+	transparency: "full"
+}, Q = Z;
+function ce() {
+	let e = a();
+	return (e.theme !== Q.theme || e.transparency !== Q.transparency) && (Q = e), Q;
+}
+function $() {
+	f(() => {
+		X || (X = !0, document.documentElement.hasAttribute("data-theme") || r());
+	}, []);
+	let e = v(o, ce, () => Z);
+	return {
+		...e,
+		setTheme: t,
+		setTransparency: i,
+		toggleTheme: () => t(e.theme === "dark" ? "light" : "dark"),
+		toggleTransparency: () => i(e.transparency === "full" ? "reduced" : "full")
+	};
+}
+//#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, {
+		...r,
+		variant: n,
+		iconOnly: !0,
+		icon: /* @__PURE__ */ b(D, { 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, {
+		...n,
+		variant: t,
+		iconOnly: !0,
+		icon: /* @__PURE__ */ b(D, { name: "blend" }),
+		"aria-label": e,
+		"aria-pressed": r === "reduced",
+		title: e,
+		onClick: i
+	});
+}
+//#endregion
 //#region src/components/Container/Container.tsx
-function z({ as: e = "section", withSidebar: t = !1, className: n, ...r }) {
-	return /* @__PURE__ */ c(e, {
+function de({ as: e = "section", withSidebar: t = !1, className: n, ...r }) {
+	return /* @__PURE__ */ b(e, {
 		...r,
-		className: d("hds-container", t && "hds-container--with-sidebar", n)
+		className: C("hds-container", t && "hds-container--with-sidebar", n)
 	});
 }
 //#endregion
 //#region src/components/SectionTitle/SectionTitle.tsx
-function B({ children: e, index: t, as: n = "h2", id: r, className: i }) {
-	return /* @__PURE__ */ l(n, {
+function fe({ children: e, index: t, as: n = "h2", id: r, className: i }) {
+	return /* @__PURE__ */ x(n, {
 		id: r,
-		className: d("hds-section-title", i),
-		children: [t === void 0 ? null : /* @__PURE__ */ c("span", {
+		className: C("hds-section-title", i),
+		children: [t === void 0 ? null : /* @__PURE__ */ b("span", {
 			className: "hds-section-index",
 			"aria-hidden": "true",
 			children: String(t).padStart(2, "0")
@@ -619,22 +781,22 @@ function B({ children: e, index: t, as: n = "h2", id: r, className: i }) {
 }
 //#endregion
 //#region src/components/Separator/Separator.tsx
-function V({ orientation: e = "horizontal", decorative: t = !1, className: n }) {
-	return /* @__PURE__ */ c("div", {
+function pe({ orientation: e = "horizontal", decorative: t = !1, className: n }) {
+	return /* @__PURE__ */ b("div", {
 		role: t ? "none" : "separator",
 		"aria-orientation": t ? void 0 : e,
-		className: d("hds-separator", `hds-separator--${e}`, n)
+		className: C("hds-separator", `hds-separator--${e}`, n)
 	});
 }
 //#endregion
 //#region src/components/ScrollArea/ScrollArea.tsx
-function H({ label: e, maxHeight: t, className: n, style: r, ...i }) {
-	return /* @__PURE__ */ c("div", {
+function me({ label: e, maxHeight: t, className: n, style: r, ...i }) {
+	return /* @__PURE__ */ b("div", {
 		...i,
 		role: "region",
 		"aria-label": e,
 		tabIndex: 0,
-		className: d("hds-scroll", n),
+		className: C("hds-scroll", n),
 		style: {
 			maxHeight: t,
 			...r
@@ -643,11 +805,11 @@ function H({ label: e, maxHeight: t, className: n, style: r, ...i }) {
 }
 //#endregion
 //#region src/components/Loading/Loading.tsx
-function U({ size: e = "md", label: t = "Carregando…", showLabel: n = !1, className: r }) {
-	return /* @__PURE__ */ l("span", {
+function he({ size: e = "md", label: t = "Carregando…", showLabel: n = !1, className: r }) {
+	return /* @__PURE__ */ x("span", {
 		role: "status",
-		className: d("hds-loading", `hds-loading--${e}`, r),
-		children: [/* @__PURE__ */ c(m, { name: "loader" }), /* @__PURE__ */ c("span", {
+		className: C("hds-loading", `hds-loading--${e}`, r),
+		children: [/* @__PURE__ */ b(D, { name: "loader" }), /* @__PURE__ */ b("span", {
 			className: n ? void 0 : "hds-visually-hidden",
 			children: t
 		})]
@@ -655,17 +817,17 @@ function U({ size: e = "md", label: t = "Carregando…", showLabel: n = !1, clas
 }
 //#endregion
 //#region src/components/GlowAvatar/GlowAvatar.tsx
-function W({ src: e, alt: t, size: n = 96, className: r }) {
-	return /* @__PURE__ */ l("span", {
-		className: d("hds-avatar", r),
+function ge({ src: e, alt: t, size: n = 96, className: r }) {
+	return /* @__PURE__ */ x("span", {
+		className: C("hds-avatar", r),
 		style: {
 			width: n,
 			height: n
 		},
-		children: [/* @__PURE__ */ c("span", {
+		children: [/* @__PURE__ */ b("span", {
 			className: "hds-avatar-glow",
 			"aria-hidden": "true"
-		}), /* @__PURE__ */ c("img", {
+		}), /* @__PURE__ */ b("img", {
 			className: "hds-avatar-image",
 			src: e,
 			alt: t,
@@ -675,6 +837,6 @@ function W({ src: e, alt: t, size: n = 96, className: r }) {
 	});
 }
 //#endregion
-export { I as Badge, h as Button, P as Card, N as Checkbox, z as Container, T as Dialog, C as FloatingButton, f as GlassPanel, W as GlowAvatar, j as Input, U as Loading, S as Menu, v as NavBar, H as ScrollArea, B as SectionTitle, x as SegmentedControl, M as Select, V as Separator, y as Sidebar, R as Table, D as Toast, e as enableGlassRefraction };
+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 };
 
 //# sourceMappingURL=index.js.map