@vjdesigns/vjdesigns-ui 2.4.0 → 3.0.0

package/dist/components/navigation/Sidebar/SidebarParts.mjs

@@ -1,26 +1,27 @@
+"use client";
 import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
-import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
-import { cx as n } from "../../../utils/cx.mjs";
-import { IconButton as r } from "../../primitives/Button/Button.mjs";
-import { ChevronDownIcon as i, ChevronLeftIcon as a } from "../../primitives/Icon/icons.mjs";
-import { Badge as o, formatBadgeCount as s } from "../../data-display/Badge/Badge.mjs";
-import { Tooltip as c } from "../../overlays/Tooltip/Tooltip.mjs";
-import { SidebarDepthContext as l, useSidebarContext as u } from "./SidebarContext.mjs";
-import d from "./Sidebar.module.css.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { Badge as n, formatBadgeCount as r } from "../../data-display/Badge/Badge.mjs";
+import { Tooltip as i } from "../../overlays/Tooltip/Tooltip.mjs";
+import { IconButton as a } from "../../primitives/Button/Button.mjs";
+import { ChevronDownIcon as o, ChevronLeftIcon as s } from "../../primitives/Icon/icons.mjs";
+import { SidebarDepthContext as c, useSidebarContext as l } from "./SidebarContext.mjs";
+import u from "./Sidebar.module.css.mjs";
+import { useMessages as d } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
 import { useContext as f, useId as p } from "react";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
-//#region src/components/navigation/Sidebar/SidebarParts.tsx
+// src/components/navigation/Sidebar/SidebarParts.tsx
 var _ = (e) => e !== void 0 && e !== "" && e !== 0;
-function v({ badge: e, badgeLabel: t, badgeTone: n }) {
-	return _(e) ? typeof e == "number" ? /* @__PURE__ */ h(o, {
+function v({ badge: e, badgeLabel: t, badgeTone: r }) {
+	return _(e) ? typeof e == "number" ? /* @__PURE__ */ h(n, {
 		variant: "solid",
-		tone: n,
+		tone: r,
 		size: "sm",
 		count: e,
 		label: t
-	}) : /* @__PURE__ */ h(o, {
+	}) : /* @__PURE__ */ h(n, {
 		variant: "solid",
-		tone: n,
+		tone: r,
 		size: "sm",
 		label: t,
 		children: e
@@ -29,22 +30,22 @@ function v({ badge: e, badgeLabel: t, badgeTone: n }) {
 function y({ icon: e, label: t, badge: n, trailing: r }) {
 	return /* @__PURE__ */ g(m, { children: [
 		e != null && /* @__PURE__ */ h("span", {
-			className: d.icon,
+			className: u.icon,
 			"aria-hidden": "true",
 			children: e
 		}),
 		/* @__PURE__ */ h("span", {
-			className: d.label,
+			className: u.label,
 			children: t
 		}),
 		n != null && /* @__PURE__ */ g(m, { children: [
 			" ",
 			/* @__PURE__ */ h("span", {
-				className: d.badge,
+				className: u.badge,
 				children: n
 			}),
 			/* @__PURE__ */ h("span", {
-				className: d.railDot,
+				className: u.railDot,
 				"aria-hidden": "true"
 			})
 		] }),
@@ -52,69 +53,65 @@ function y({ icon: e, label: t, badge: n, trailing: r }) {
 	] });
 }
 function b(e, { badge: t, badgeLabel: n }) {
-	let r = _(t) ? n || (typeof t == "number" ? s(t) : t) : null;
-	return typeof e == "string" || typeof e == "number" ? r == null ? String(e) : `${e} ${r}` : r == null ? e : /* @__PURE__ */ g(m, { children: [
+	let i = _(t) ? n || (typeof t == "number" ? r(t) : t) : null;
+	return typeof e == "string" || typeof e == "number" ? i == null ? String(e) : `${e} ${i}` : i == null ? e : /* @__PURE__ */ g(m, { children: [
 		e,
 		" ",
-		r
+		i
 	] });
 }
-var x = ({ className: e, children: t, ...r }) => /* @__PURE__ */ h("div", {
+var x = ({ className: e, children: n, ...r }) => /* @__PURE__ */ h("div", {
 	...r,
-	className: n(d.header, e),
-	children: t
+	className: t(u.header, e),
+	children: n
 });
 x.displayName = "Sidebar.Header";
-var S = ({ className: e, children: t, ...r }) => /* @__PURE__ */ h("div", {
+var S = ({ className: e, children: n, ...r }) => /* @__PURE__ */ h("div", {
 	...r,
-	className: n(d.body, e),
-	children: t
+	className: t(u.body, e),
+	children: n
 });
 S.displayName = "Sidebar.Body";
-var C = ({ className: e, children: t, ...r }) => /* @__PURE__ */ h("div", {
+var C = ({ className: e, children: n, ...r }) => /* @__PURE__ */ h("div", {
 	...r,
-	className: n(d.footer, e),
-	children: t
+	className: t(u.footer, e),
+	children: n
 });
 C.displayName = "Sidebar.Footer";
-var w = ({ heading: e, headingLevel: t, className: r, children: i, ...a }) => {
-	let o = p(), s = e != null && e !== !1 && e !== "", c = t ? `h${t}` : "div";
+var w = ({ heading: e, headingLevel: n, className: r, children: i, ...a }) => {
+	let o = p(), s = e != null && e !== !1 && e !== "", c = n ? `h${n}` : "div";
 	return /* @__PURE__ */ g("div", {
 		role: s ? "group" : void 0,
 		"aria-labelledby": s ? o : void 0,
 		...a,
-		className: n(d.section, r),
+		className: t(u.section, r),
 		children: [s && /* @__PURE__ */ h(c, {
 			id: o,
-			className: d.sectionHeading,
+			className: u.sectionHeading,
 			children: e
 		}), /* @__PURE__ */ h("ul", {
-			className: d.list,
+			className: u.list,
 			children: i
 		})]
 	});
 };
 w.displayName = "Sidebar.Section";
 var T = (e) => {
-	let { children: t, icon: r, active: i = !1, badge: a, badgeLabel: o, badgeTone: s = "accent", disabled: p = !1, className: m, href: g, role: _, onClick: x, "aria-current": S, ...C } = e, { collapsed: w, tooltipPlacement: T, onNavigate: E } = u("Sidebar.Item"), D = f(l), O = w && D === 0, k = v({
-		badge: a,
-		badgeLabel: o,
-		badgeTone: s
+	let { children: n, icon: r, active: a = !1, badge: o, badgeLabel: s, badgeTone: d = "accent", disabled: p = !1, className: m, href: g, role: _, onClick: x, "aria-current": S, ...C } = e, { collapsed: w, tooltipPlacement: T, onNavigate: E } = l("Sidebar.Item"), D = f(c), O = w && D === 0, k = v({
+		badge: o,
+		badgeLabel: s,
+		badgeTone: d
 	}), A = (e) => {
-		if (p) {
-			e.preventDefault();
-			return;
-		}
-		x?.(e), E();
+		p ? e.preventDefault() : (x?.(e), E());
 	}, j = {
 		...C,
-		className: n(d.item, D > 0 && d.nested, i && d.active, p && d.disabled, m),
-		"aria-current": i ? S ?? "page" : S,
-		"data-active": i || void 0,
+		className: t(u.item, D > 0 && u.nested, a && u.active, p && u.disabled, m),
+		"aria-current": a ? S ?? "page" : S,
+		"data-active": a || void 0,
 		onClick: A
 	}, M = /* @__PURE__ */ h(y, {
 		icon: r,
-		label: t,
+		label: n,
 		badge: k
 	}), N = g === void 0 ? /* @__PURE__ */ h("button", {
 		type: "button",
@@ -132,12 +129,12 @@ var T = (e) => {
 		children: M
 	});
 	return /* @__PURE__ */ h("li", {
-		className: d.listItem,
-		children: /* @__PURE__ */ h(c, {
-			content: b(t, {
-				badge: a,
-				badgeLabel: o,
-				badgeTone: s
+		className: u.listItem,
+		children: /* @__PURE__ */ h(i, {
+			content: b(n, {
+				badge: o,
+				badgeLabel: s,
+				badgeTone: d
 			}),
 			placement: T,
 			relationship: "label",
@@ -147,10 +144,10 @@ var T = (e) => {
 	});
 };
 T.displayName = "Sidebar.Item";
-var E = ({ label: t, icon: r, children: a, open: o, defaultOpen: s = !1, onOpenChange: m, active: _ = !1, badge: x, badgeLabel: S, badgeTone: C = "accent", disabled: w = !1, value: T, className: E, ...D }) => {
-	let { collapsed: O, setCollapsed: k, tooltipPlacement: A, groupOpen: j } = u("Sidebar.Group"), M = f(l), N = O && M === 0, P = T ?? (typeof t == "string" ? t : void 0), [F, I] = e({
-		value: o,
-		defaultValue: (P === void 0 ? void 0 : j.get(P)) ?? s,
+var E = ({ label: n, icon: r, children: a, open: s, defaultOpen: d = !1, onOpenChange: m, active: _ = !1, badge: x, badgeLabel: S, badgeTone: C = "accent", disabled: w = !1, value: T, className: E, ...D }) => {
+	let { collapsed: O, setCollapsed: k, tooltipPlacement: A, groupOpen: j } = l("Sidebar.Group"), M = f(c), N = O && M === 0, P = T ?? (typeof n == "string" ? n : void 0), [F, I] = e({
+		value: s,
+		defaultValue: (P === void 0 ? void 0 : j.get(P)) ?? d,
 		onChange: (e) => {
 			P !== void 0 && j.set(P, e), m?.(e);
 		}
@@ -163,10 +160,10 @@ var E = ({ label: t, icon: r, children: a, open: o, defaultOpen: s = !1, onOpenC
 	};
 	return /* @__PURE__ */ g("li", {
 		...D,
-		className: n(d.listItem, E),
+		className: t(u.listItem, E),
 		"data-state": z,
-		children: [/* @__PURE__ */ h(c, {
-			content: b(t, {
+		children: [/* @__PURE__ */ h(i, {
+			content: b(n, {
 				badge: x,
 				badgeLabel: S,
 				badgeTone: C
@@ -176,7 +173,7 @@ var E = ({ label: t, icon: r, children: a, open: o, defaultOpen: s = !1, onOpenC
 			disabled: !N,
 			children: /* @__PURE__ */ h("button", {
 				type: "button",
-				className: n(d.item, d.groupTrigger, M > 0 && d.nested, _ && !R && d.active, w && d.disabled),
+				className: t(u.item, u.groupTrigger, M > 0 && u.nested, _ && !R && u.active, w && u.disabled),
 				"aria-expanded": R,
 				"aria-controls": L,
 				"data-state": z,
@@ -184,24 +181,24 @@ var E = ({ label: t, icon: r, children: a, open: o, defaultOpen: s = !1, onOpenC
 				onClick: V,
 				children: /* @__PURE__ */ h(y, {
 					icon: r,
-					label: t,
+					label: n,
 					badge: B,
 					trailing: /* @__PURE__ */ h("span", {
-						className: d.chevron,
+						className: u.chevron,
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ h(i, { size: "sm" })
+						children: /* @__PURE__ */ h(o, { size: "sm" })
 					})
 				})
 			})
 		}), /* @__PURE__ */ h("div", {
-			className: d.groupContent,
+			className: u.groupContent,
 			"data-state": z,
 			children: /* @__PURE__ */ h("div", {
-				className: d.groupClip,
+				className: u.groupClip,
 				children: /* @__PURE__ */ h("ul", {
 					id: L,
-					className: d.subList,
-					children: /* @__PURE__ */ h(l.Provider, {
+					className: u.subList,
+					children: /* @__PURE__ */ h(c.Provider, {
 						value: M + 1,
 						children: a
 					})
@@ -211,32 +208,31 @@ var E = ({ label: t, icon: r, children: a, open: o, defaultOpen: s = !1, onOpenC
 	});
 };
 E.displayName = "Sidebar.Group";
-var D = ({ collapseLabel: e, expandLabel: i, variant: o = "ghost", tone: s = "neutral", size: l = "sm", className: f, children: p, onClick: m, ...g }) => {
-	let _ = t(), v = e ?? _.sidebar.collapse, y = i ?? _.sidebar.expand, { mode: b, collapsed: x, setCollapsed: S, navId: C, tooltipPlacement: w } = u("Sidebar.Toggle");
+var D = ({ collapseLabel: e, expandLabel: n, variant: r = "ghost", tone: o = "neutral", size: c = "sm", className: f, children: p, onClick: m, ...g }) => {
+	let _ = d(), v = e ?? _.sidebar.collapse, y = n ?? _.sidebar.expand, { mode: b, collapsed: x, setCollapsed: S, navId: C, tooltipPlacement: w } = l("Sidebar.Toggle");
 	if (b === "overlay") return null;
 	let T = x ? y : v;
-	return /* @__PURE__ */ h(c, {
+	return /* @__PURE__ */ h(i, {
 		content: T,
 		placement: w,
 		relationship: "label",
-		children: /* @__PURE__ */ h(r, {
-			variant: o,
-			tone: s,
-			size: l,
+		children: /* @__PURE__ */ h(a, {
+			variant: r,
+			tone: o,
+			size: c,
 			"aria-controls": C,
 			...g,
 			"aria-label": T,
-			className: n(d.toggle, f),
+			className: t(u.toggle, f),
 			onClick: (e) => {
 				m?.(e), e.defaultPrevented || S(!x);
 			},
 			children: p ?? /* @__PURE__ */ h("span", {
-				className: d.toggleIcon,
-				children: /* @__PURE__ */ h(a, {})
+				className: u.toggleIcon,
+				children: /* @__PURE__ */ h(s, {})
 			})
 		})
 	});
 };
 D.displayName = "Sidebar.Toggle";
-//#endregion
 export { S as SidebarBody, C as SidebarFooter, E as SidebarGroup, x as SidebarHeader, T as SidebarItem, w as SidebarSection, D as SidebarToggle };

package/dist/components/navigation/SkipLink/SkipLink.cjs.js

@@ -1 +1 @@
-const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("./SkipLink.module.css.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a=`a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable=''], [contenteditable='true'], [tabindex]`,o=e=>{if(!e||!e.startsWith(`#`)||e.length<2)return null;let t=e.slice(1);try{t=decodeURIComponent(t)}catch{}return document.getElementById(t)},s=null,c=e=>{s?.(),s=null;let t=!e.matches(a)&&!e.hasAttribute(`tabindex`),n=()=>{e.removeEventListener(`blur`,n),t&&e.getAttribute(`tabindex`)===`-1`&&e.removeAttribute(`tabindex`),s===n&&(s=null)};return t&&(e.setAttribute(`tabindex`,`-1`),e.addEventListener(`blur`,n),s=n),e.focus({preventScroll:!0}),document.activeElement===e?(e.scrollIntoView?.({block:`start`}),!0):(n(),!1)};function l({href:r=`#main`,children:a,className:s,onClick:l,...u}){let d=e.useMessages(),f=a??d.skipLink.label,p=e=>{if(l?.(e),e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return;let t=o(r);if(t&&c(t)){e.preventDefault();try{window.location.hash!==r&&window.history.pushState(null,``,r)}catch{}}};return(0,i.jsx)(`a`,{...u,href:r,onClick:p,className:t.cx(n.default.root,s),children:f})}function u({className:e,children:a,...o}){return(0,i.jsx)(`ul`,{role:`list`,...o,className:t.cx(n.default.group,e),children:r.Children.map(a,(e,t)=>(0,r.isValidElement)(e)?(0,i.jsx)(`li`,{className:n.default.item,children:e},e.key??t):e)})}exports.SkipLink=l,exports.SkipLinks=u;
+"use client";const e=require("../../../utils/cx.cjs.js"),t=require("./SkipLink.module.css.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a=`a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable=''], [contenteditable='true'], [tabindex]`,o=e=>{if(!e||!e.startsWith(`#`)||e.length<2)return null;let t=e.slice(1);try{t=decodeURIComponent(t)}catch{}return document.getElementById(t)},s=null,c=e=>{s?.(),s=null;let t=!e.matches(a)&&!e.hasAttribute(`tabindex`),n=()=>{e.removeEventListener(`blur`,n),t&&e.getAttribute(`tabindex`)===`-1`&&e.removeAttribute(`tabindex`),s===n&&(s=null)};return t&&(e.setAttribute(`tabindex`,`-1`),e.addEventListener(`blur`,n),s=n),e.focus({preventScroll:!0}),document.activeElement===e?(e.scrollIntoView?.({block:`start`}),!0):(n(),!1)};function l({href:r=`#main`,children:a,className:s,onClick:l,...u}){let d=n.useMessages(),f=a??d.skipLink.label,p=e=>{if(l?.(e),e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return;let t=o(r);if(t&&c(t)){e.preventDefault();try{window.location.hash!==r&&window.history.pushState(null,``,r)}catch{}}};return(0,i.jsx)(`a`,{...u,href:r,onClick:p,className:e.cx(t.default.root,s),children:f})}function u({className:n,children:a,...o}){return(0,i.jsx)(`ul`,{role:`list`,...o,className:e.cx(t.default.group,n),children:r.Children.map(a,(e,n)=>(0,r.isValidElement)(e)?(0,i.jsx)(`li`,{className:t.default.item,children:e},e.key??n):e)})}exports.SkipLink=l,exports.SkipLinks=u;

package/dist/components/navigation/SkipLink/SkipLink.mjs

@@ -1,9 +1,10 @@
-import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
-import { cx as t } from "../../../utils/cx.mjs";
-import n from "./SkipLink.module.css.mjs";
+"use client";
+import { cx as e } from "../../../utils/cx.mjs";
+import t from "./SkipLink.module.css.mjs";
+import { useMessages as n } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
 import { Children as r, isValidElement as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
-//#region src/components/navigation/SkipLink/SkipLink.tsx
+// src/components/navigation/SkipLink/SkipLink.tsx
 var o = "a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable=''], [contenteditable='true'], [tabindex]", s = (e) => {
 	if (!e || !e.startsWith("#") || e.length < 2) return null;
 	let t = e.slice(1);
@@ -19,7 +20,7 @@ var o = "a[href], area[href], button, input, select, textarea, iframe, summary,
 	return t && (e.setAttribute("tabindex", "-1"), e.addEventListener("blur", n), c = n), e.focus({ preventScroll: !0 }), document.activeElement === e ? (e.scrollIntoView?.({ block: "start" }), !0) : (n(), !1);
 };
 function u({ href: r = "#main", children: i, className: o, onClick: c, ...u }) {
-	let d = e(), f = i ?? d.skipLink.label, p = (e) => {
+	let d = n(), f = i ?? d.skipLink.label, p = (e) => {
 		if (c?.(e), e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
 		let t = s(r);
 		if (t && l(t)) {
@@ -33,20 +34,19 @@ function u({ href: r = "#main", children: i, className: o, onClick: c, ...u }) {
 		...u,
 		href: r,
 		onClick: p,
-		className: t(n.root, o),
+		className: e(t.root, o),
 		children: f
 	});
 }
-function d({ className: e, children: o, ...s }) {
+function d({ className: n, children: o, ...s }) {
 	return /* @__PURE__ */ a("ul", {
 		role: "list",
 		...s,
-		className: t(n.group, e),
-		children: r.map(o, (e, t) => i(e) ? /* @__PURE__ */ a("li", {
-			className: n.item,
+		className: e(t.group, n),
+		children: r.map(o, (e, n) => i(e) ? /* @__PURE__ */ a("li", {
+			className: t.item,
 			children: e
-		}, e.key ?? t) : e)
+		}, e.key ?? n) : e)
 	});
 }
-//#endregion
 export { u as SkipLink, d as SkipLinks };

package/dist/components/navigation/SkipLink/SkipLink.module.css.mjs

@@ -1,8 +1,7 @@
-//#region src/components/navigation/SkipLink/SkipLink.module.css
+// src/components/navigation/SkipLink/SkipLink.module.css
 var e = "_root_1f8gq_17", t = "_group_1f8gq_165", n = "_item_1f8gq_177", r = {
 	root: e,
 	group: t,
 	item: n
 };
-//#endregion
 export { r as default, t as group, n as item, e as root };

package/dist/components/navigation/Stepper/Stepper.cjs.js

@@ -1 +1 @@
-const e=require("../../../i18n/en.cjs.js"),t=require("../../../hooks/useControllableState.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../utils/refs.cjs.js"),i=require("../../../hooks/useResponsiveValue.cjs.js"),a=require("../../../utils/cx.cjs.js"),o=require("../../../utils/flattenChildren.cjs.js"),s=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),c=require("../../primitives/Icon/icons.cjs.js"),l=require("../../primitives/Icon/Icon.cjs.js"),u=require("./Stepper.module.css.cjs.js");let d=require("react"),f=require("react/jsx-runtime");var p=e.en.stepper.status,m=e=>({step:t,total:n,title:r})=>t>n?e.allComplete(n):r?e.stepTitled(t,n,r):e.step(t,n),h={sm:u.default.sm,md:u.default.md,lg:u.default.lg},g={horizontal:u.default.horizontal,vertical:u.default.vertical},_={complete:u.default.statusComplete,current:u.default.statusCurrent,upcoming:u.default.statusUpcoming,error:u.default.statusError},v=6,y=(0,d.createContext)(null),b=(0,d.createContext)(0);function x(){let e=(0,d.useContext)(y);if(!e)throw Error(`Stepper.Step must be used inside a Stepper.`);return e}function S(e,t){return e<t?`complete`:e===t?`current`:`upcoming`}function C({activeStep:e,defaultActiveStep:c=0,onActiveStepChange:l,orientation:p=`horizontal`,size:_=`md`,clickable:x=!1,linear:C=!0,compact:w=`auto`,announce:T=!1,announcement:E,statusLabels:D,"aria-label":O,className:k,children:A,ref:j,...M}){let N=n.useMessages(),P=E??m(N.stepper),F=O??N.stepper.nav,[I,L]=t.useControllableState({value:e,defaultValue:c,onChange:l}),R=i.useResponsiveValue(p,`horizontal`),z=R===`horizontal`,B=x||!C,V=o.flattenChildren(A),H=V.length,U=(0,d.useRef)(null),W=(0,d.useCallback)(e=>{U.current=e,r.assignRef(j,e)},[j]),[G,K]=(0,d.useState)(!1);(0,d.useLayoutEffect)(()=>{if(!z||w!==`auto`)return;let e=U.current;if(!e)return;let t=()=>{let t=parseFloat(getComputedStyle(e).fontSize)||16,n=e.clientWidth/Math.max(H,1);K(n<v*t)};if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[z,w,H]);let q=z&&(w===`auto`?G:w),[J,Y]=(0,d.useState)(``),X=(0,d.useRef)(!0);(0,d.useEffect)(()=>{if(X.current){X.current=!1;return}if(!T)return;let e=U.current?.querySelector(`[data-step-index="${I}"] [data-step-title]`),t=V[I];Y(P({step:I+1,total:H,title:e?.textContent?.trim()??``,status:t?t.props.status??S(I,I):void 0}))},[I]);let Z={activeStep:I,setActiveStep:L,interactive:B,linear:C,statusLabels:{...N.stepper.status,...D}},Q=V[I],$=B?`nav`:`div`;return(0,f.jsx)(y.Provider,{value:Z,children:(0,f.jsxs)($,{role:B?void 0:`group`,"aria-label":F,...M,ref:W,className:a.cx(u.default.root,g[R],h[_],q&&u.default.compact,B&&u.default.interactive,k),"data-orientation":R,children:[(0,f.jsx)(`ol`,{role:`list`,className:u.default.list,children:V.map((e,t)=>(0,f.jsx)(b.Provider,{value:t,children:e},e.key??t))}),q&&(0,f.jsxs)(`div`,{className:u.default.caption,"aria-hidden":`true`,children:[(0,f.jsx)(`span`,{className:u.default.captionCount,children:I>=H?N.stepper.count(H,H):N.stepper.step(I+1,H)}),Q&&(0,f.jsx)(`span`,{className:u.default.captionTitle,children:Q.props.title})]}),T&&(0,f.jsx)(s.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,children:J})]})})}var w=()=>(0,f.jsxs)(l.Icon,{strokeWidth:3,children:[(0,f.jsx)(`path`,{d:`M12 6v7.5`}),(0,f.jsx)(`circle`,{cx:`12`,cy:`18`,r:`1.6`,fill:`currentColor`,stroke:`none`})]});function T({title:e,description:t,icon:r,status:i,disabled:o=!1,statusLabel:l,className:p,...m}){let h=n.useMessages(),{activeStep:g,setActiveStep:v,interactive:y,linear:C,statusLabels:T}=x(),E=(0,d.useContext)(b),D=i??S(E,g),O=E===g,k=l??T[D],A=y&&(!C||E<=g||D===`complete`),j;j=D===`complete`?(0,f.jsx)(c.CheckIcon,{strokeWidth:3}):D===`error`?(0,f.jsx)(w,{}):r??(0,f.jsx)(`span`,{className:u.default.number,children:E+1});let M=(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(`span`,{className:u.default.marker,"aria-hidden":`true`,children:j}),(0,f.jsxs)(`span`,{className:u.default.text,children:[(0,f.jsx)(s.VisuallyHidden,{children:h.stepper.prefix(E+1)}),(0,f.jsx)(`span`,{className:u.default.title,"data-step-title":``,children:e}),(0,f.jsx)(s.VisuallyHidden,{children:`, ${k}`}),t!=null&&(0,f.jsx)(`span`,{className:u.default.description,children:t})]})]});return(0,f.jsxs)(`li`,{"aria-current":O&&!A?`step`:void 0,...m,className:a.cx(u.default.item,_[D],o&&A&&u.default.disabled,p),"data-status":D,"data-step-index":E,children:[A?(0,f.jsx)(`button`,{type:`button`,className:a.cx(u.default.trigger,u.default.button),"aria-current":O?`step`:void 0,disabled:o,onClick:()=>v(E),children:M}):(0,f.jsx)(`div`,{className:u.default.trigger,children:M}),(0,f.jsx)(`span`,{className:u.default.connector,"aria-hidden":`true`,children:(0,f.jsx)(`span`,{className:u.default.fill})})]})}var E=Object.assign(C,{Step:T});exports.Step=T,exports.Stepper=E,exports.defaultStepperStatusLabels=p;
+"use client";const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useResponsiveValue.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../../utils/refs.cjs.js"),i=require("../../../utils/flattenChildren.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),o=require("../../primitives/Icon/Icon.cjs.js"),s=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),c=require("./Stepper.module.css.cjs.js"),l=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),u=require("../../../i18n/en.cjs.js");let d=require("react"),f=require("react/jsx-runtime");var p=u.en.stepper.status,m=e=>({step:t,total:n,title:r})=>t>n?e.allComplete(n):r?e.stepTitled(t,n,r):e.step(t,n),h={sm:c.default.sm,md:c.default.md,lg:c.default.lg},g={horizontal:c.default.horizontal,vertical:c.default.vertical},_={complete:c.default.statusComplete,current:c.default.statusCurrent,upcoming:c.default.statusUpcoming,error:c.default.statusError},v=6,y=(0,d.createContext)(null),b=(0,d.createContext)(0);function x(){let e=(0,d.useContext)(y);if(!e)throw Error(`Stepper.Step must be used inside a Stepper.`);return e}function S(e,t){return e<t?`complete`:e===t?`current`:`upcoming`}function C({activeStep:a,defaultActiveStep:o=0,onActiveStepChange:u,orientation:p=`horizontal`,size:_=`md`,clickable:x=!1,linear:C=!0,compact:w=`auto`,announce:T=!1,announcement:E,statusLabels:D,"aria-label":O,className:k,children:A,ref:j,...M}){let N=l.useMessages(),P=E??m(N.stepper),F=O??N.stepper.nav,[I,L]=e.useControllableState({value:a,defaultValue:o,onChange:u}),R=t.useResponsiveValue(p,`horizontal`),z=R===`horizontal`,B=x||!C,V=i.flattenChildren(A),H=V.length,U=(0,d.useRef)(null),W=(0,d.useCallback)(e=>{U.current=e,r.assignRef(j,e)},[j]),[G,K]=(0,d.useState)(!1);(0,d.useLayoutEffect)(()=>{if(!z||w!==`auto`)return;let e=U.current;if(!e)return;let t=()=>{let t=parseFloat(getComputedStyle(e).fontSize)||16,n=e.clientWidth/Math.max(H,1);K(n<v*t)};if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[z,w,H]);let q=z&&(w===`auto`?G:w),[J,Y]=(0,d.useState)(``),X=(0,d.useRef)(!0);(0,d.useEffect)(()=>{if(X.current){X.current=!1;return}if(!T)return;let e=U.current?.querySelector(`[data-step-index="${I}"] [data-step-title]`),t=V[I];Y(P({step:I+1,total:H,title:e?.textContent?.trim()??``,status:t?t.props.status??S(I,I):void 0}))},[I]);let Z={activeStep:I,setActiveStep:L,interactive:B,linear:C,statusLabels:{...N.stepper.status,...D}},Q=V[I],$=B?`nav`:`div`;return(0,f.jsx)(y.Provider,{value:Z,children:(0,f.jsxs)($,{role:B?void 0:`group`,"aria-label":F,...M,ref:W,className:n.cx(c.default.root,g[R],h[_],q&&c.default.compact,B&&c.default.interactive,k),"data-orientation":R,children:[(0,f.jsx)(`ol`,{role:`list`,className:c.default.list,children:V.map((e,t)=>(0,f.jsx)(b.Provider,{value:t,children:e},e.key??t))}),q&&(0,f.jsxs)(`div`,{className:c.default.caption,"aria-hidden":`true`,children:[(0,f.jsx)(`span`,{className:c.default.captionCount,children:I>=H?N.stepper.count(H,H):N.stepper.step(I+1,H)}),Q&&(0,f.jsx)(`span`,{className:c.default.captionTitle,children:Q.props.title})]}),T&&(0,f.jsx)(s.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,children:J})]})})}var w=()=>(0,f.jsxs)(o.Icon,{strokeWidth:3,children:[(0,f.jsx)(`path`,{d:`M12 6v7.5`}),(0,f.jsx)(`circle`,{cx:`12`,cy:`18`,r:`1.6`,fill:`currentColor`,stroke:`none`})]});function T({title:e,description:t,icon:r,status:i,disabled:o=!1,statusLabel:u,className:p,...m}){let h=l.useMessages(),{activeStep:g,setActiveStep:v,interactive:y,linear:C,statusLabels:T}=x(),E=(0,d.useContext)(b),D=i??S(E,g),O=E===g,k=u??T[D],A=y&&(!C||E<=g||D===`complete`),j;j=D===`complete`?(0,f.jsx)(a.CheckIcon,{strokeWidth:3}):D===`error`?(0,f.jsx)(w,{}):r??(0,f.jsx)(`span`,{className:c.default.number,children:E+1});let M=(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(`span`,{className:c.default.marker,"aria-hidden":`true`,children:j}),(0,f.jsxs)(`span`,{className:c.default.text,children:[(0,f.jsx)(s.VisuallyHidden,{children:h.stepper.prefix(E+1)}),(0,f.jsx)(`span`,{className:c.default.title,"data-step-title":``,children:e}),(0,f.jsx)(s.VisuallyHidden,{children:`, ${k}`}),t!=null&&(0,f.jsx)(`span`,{className:c.default.description,children:t})]})]});return(0,f.jsxs)(`li`,{"aria-current":O&&!A?`step`:void 0,...m,className:n.cx(c.default.item,_[D],o&&A&&c.default.disabled,p),"data-status":D,"data-step-index":E,children:[A?(0,f.jsx)(`button`,{type:`button`,className:n.cx(c.default.trigger,c.default.button),"aria-current":O?`step`:void 0,disabled:o,onClick:()=>v(E),children:M}):(0,f.jsx)(`div`,{className:c.default.trigger,children:M}),(0,f.jsx)(`span`,{className:c.default.connector,"aria-hidden":`true`,children:(0,f.jsx)(`span`,{className:c.default.fill})})]})}var E=Object.assign(C,{Step:T});exports.Step=T,exports.Stepper=E,exports.defaultStepperStatusLabels=p;

package/dist/components/navigation/Stepper/Stepper.mjs

@@ -1,29 +1,30 @@
-import { en as e } from "../../../i18n/en.mjs";
-import { useControllableState as t } from "../../../hooks/useControllableState.mjs";
-import { useMessages as n } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+"use client";
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useResponsiveValue as t } from "../../../hooks/useResponsiveValue.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
 import { assignRef as r } from "../../../utils/refs.mjs";
-import { useResponsiveValue as i } from "../../../hooks/useResponsiveValue.mjs";
-import { cx as a } from "../../../utils/cx.mjs";
-import { flattenChildren as o } from "../../../utils/flattenChildren.mjs";
+import { flattenChildren as i } from "../../../utils/flattenChildren.mjs";
+import { CheckIcon as a } from "../../primitives/Icon/icons.mjs";
+import { Icon as o } from "../../primitives/Icon/Icon.mjs";
 import { VisuallyHidden as s } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
-import { CheckIcon as c } from "../../primitives/Icon/icons.mjs";
-import { Icon as l } from "../../primitives/Icon/Icon.mjs";
-import u from "./Stepper.module.css.mjs";
+import c from "./Stepper.module.css.mjs";
+import { useMessages as l } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { en as u } from "../../../i18n/en.mjs";
 import { createContext as d, useCallback as f, useContext as p, useEffect as m, useLayoutEffect as h, useRef as g, useState as _ } from "react";
 import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
-//#region src/components/navigation/Stepper/Stepper.tsx
-var x = e.stepper.status, S = (e) => ({ step: t, total: n, title: r }) => t > n ? e.allComplete(n) : r ? e.stepTitled(t, n, r) : e.step(t, n), C = {
-	sm: u.sm,
-	md: u.md,
-	lg: u.lg
+// src/components/navigation/Stepper/Stepper.tsx
+var x = u.stepper.status, S = (e) => ({ step: t, total: n, title: r }) => t > n ? e.allComplete(n) : r ? e.stepTitled(t, n, r) : e.step(t, n), C = {
+	sm: c.sm,
+	md: c.md,
+	lg: c.lg
 }, w = {
-	horizontal: u.horizontal,
-	vertical: u.vertical
+	horizontal: c.horizontal,
+	vertical: c.vertical
 }, T = {
-	complete: u.statusComplete,
-	current: u.statusCurrent,
-	upcoming: u.statusUpcoming,
-	error: u.statusError
+	complete: c.statusComplete,
+	current: c.statusCurrent,
+	upcoming: c.statusUpcoming,
+	error: c.statusError
 }, E = 6, D = d(null), O = d(0);
 function k() {
 	let e = p(D);
@@ -33,12 +34,12 @@ function k() {
 function A(e, t) {
 	return e < t ? "complete" : e === t ? "current" : "upcoming";
 }
-function j({ activeStep: e, defaultActiveStep: c = 0, onActiveStepChange: l, orientation: d = "horizontal", size: p = "md", clickable: v = !1, linear: x = !0, compact: T = "auto", announce: k = !1, announcement: j, statusLabels: M, "aria-label": N, className: P, children: F, ref: I, ...L }) {
-	let R = n(), z = j ?? S(R.stepper), B = N ?? R.stepper.nav, [V, H] = t({
-		value: e,
-		defaultValue: c,
-		onChange: l
-	}), U = i(d, "horizontal"), W = U === "horizontal", G = v || !x, K = o(F), q = K.length, J = g(null), Y = f((e) => {
+function j({ activeStep: a, defaultActiveStep: o = 0, onActiveStepChange: u, orientation: d = "horizontal", size: p = "md", clickable: v = !1, linear: x = !0, compact: T = "auto", announce: k = !1, announcement: j, statusLabels: M, "aria-label": N, className: P, children: F, ref: I, ...L }) {
+	let R = l(), z = j ?? S(R.stepper), B = N ?? R.stepper.nav, [V, H] = e({
+		value: a,
+		defaultValue: o,
+		onChange: u
+	}), U = t(d, "horizontal"), W = U === "horizontal", G = v || !x, K = i(F), q = K.length, J = g(null), Y = f((e) => {
 		J.current = e, r(I, e);
 	}, [I]), [X, ee] = _(!1);
 	h(() => {
@@ -89,25 +90,25 @@ function j({ activeStep: e, defaultActiveStep: c = 0, onActiveStepChange: l, ori
 			"aria-label": B,
 			...L,
 			ref: Y,
-			className: a(u.root, w[U], C[p], Z && u.compact, G && u.interactive, P),
+			className: n(c.root, w[U], C[p], Z && c.compact, G && c.interactive, P),
 			"data-orientation": U,
 			children: [
 				/* @__PURE__ */ y("ol", {
 					role: "list",
-					className: u.list,
+					className: c.list,
 					children: K.map((e, t) => /* @__PURE__ */ y(O.Provider, {
 						value: t,
 						children: e
 					}, e.key ?? t))
 				}),
 				Z && /* @__PURE__ */ b("div", {
-					className: u.caption,
+					className: c.caption,
 					"aria-hidden": "true",
 					children: [/* @__PURE__ */ y("span", {
-						className: u.captionCount,
+						className: c.captionCount,
 						children: V >= q ? R.stepper.count(q, q) : R.stepper.step(V + 1, q)
 					}), $ && /* @__PURE__ */ y("span", {
-						className: u.captionTitle,
+						className: c.captionTitle,
 						children: $.props.title
 					})]
 				}),
@@ -121,7 +122,7 @@ function j({ activeStep: e, defaultActiveStep: c = 0, onActiveStepChange: l, ori
 		})
 	});
 }
-var M = () => /* @__PURE__ */ b(l, {
+var M = () => /* @__PURE__ */ b(o, {
 	strokeWidth: 3,
 	children: [/* @__PURE__ */ y("path", { d: "M12 6v7.5" }), /* @__PURE__ */ y("circle", {
 		cx: "12",
@@ -131,28 +132,28 @@ var M = () => /* @__PURE__ */ b(l, {
 		stroke: "none"
 	})]
 });
-function N({ title: e, description: t, icon: r, status: i, disabled: o = !1, statusLabel: l, className: d, ...f }) {
-	let m = n(), { activeStep: h, setActiveStep: g, interactive: _, linear: x, statusLabels: S } = k(), C = p(O), w = i ?? A(C, h), E = C === h, D = l ?? S[w], j = _ && (!x || C <= h || w === "complete"), N;
-	N = w === "complete" ? /* @__PURE__ */ y(c, { strokeWidth: 3 }) : w === "error" ? /* @__PURE__ */ y(M, {}) : r ?? /* @__PURE__ */ y("span", {
-		className: u.number,
+function N({ title: e, description: t, icon: r, status: i, disabled: o = !1, statusLabel: u, className: d, ...f }) {
+	let m = l(), { activeStep: h, setActiveStep: g, interactive: _, linear: x, statusLabels: S } = k(), C = p(O), w = i ?? A(C, h), E = C === h, D = u ?? S[w], j = _ && (!x || C <= h || w === "complete"), N;
+	N = w === "complete" ? /* @__PURE__ */ y(a, { strokeWidth: 3 }) : w === "error" ? /* @__PURE__ */ y(M, {}) : r ?? /* @__PURE__ */ y("span", {
+		className: c.number,
 		children: C + 1
 	});
 	let P = /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("span", {
-		className: u.marker,
+		className: c.marker,
 		"aria-hidden": "true",
 		children: N
 	}), /* @__PURE__ */ b("span", {
-		className: u.text,
+		className: c.text,
 		children: [
 			/* @__PURE__ */ y(s, { children: m.stepper.prefix(C + 1) }),
 			/* @__PURE__ */ y("span", {
-				className: u.title,
+				className: c.title,
 				"data-step-title": "",
 				children: e
 			}),
 			/* @__PURE__ */ y(s, { children: `, ${D}` }),
 			t != null && /* @__PURE__ */ y("span", {
-				className: u.description,
+				className: c.description,
 				children: t
 			})
 		]
@@ -160,26 +161,25 @@ function N({ title: e, description: t, icon: r, status: i, disabled: o = !1, sta
 	return /* @__PURE__ */ b("li", {
 		"aria-current": E && !j ? "step" : void 0,
 		...f,
-		className: a(u.item, T[w], o && j && u.disabled, d),
+		className: n(c.item, T[w], o && j && c.disabled, d),
 		"data-status": w,
 		"data-step-index": C,
 		children: [j ? /* @__PURE__ */ y("button", {
 			type: "button",
-			className: a(u.trigger, u.button),
+			className: n(c.trigger, c.button),
 			"aria-current": E ? "step" : void 0,
 			disabled: o,
 			onClick: () => g(C),
 			children: P
 		}) : /* @__PURE__ */ y("div", {
-			className: u.trigger,
+			className: c.trigger,
 			children: P
 		}), /* @__PURE__ */ y("span", {
-			className: u.connector,
+			className: c.connector,
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ y("span", { className: u.fill })
+			children: /* @__PURE__ */ y("span", { className: c.fill })
 		})]
 	});
 }
 var P = Object.assign(j, { Step: N });
-//#endregion
 export { N as Step, P as Stepper, x as defaultStepperStatusLabels };

package/dist/components/navigation/Stepper/Stepper.module.css.mjs

@@ -1,4 +1,4 @@
-//#region src/components/navigation/Stepper/Stepper.module.css
+// src/components/navigation/Stepper/Stepper.module.css
 var e = "_root_uas10_33", t = "_list_uas10_67", n = "_sm_uas10_85", r = "_md_uas10_107", i = "_lg_uas10_115", a = "_item_uas10_145", o = "_trigger_uas10_155", s = "_button_uas10_179", c = "_title_uas10_205", l = "_marker_uas10_217", u = "_text_uas10_233", d = "_statusCurrent_uas10_267", f = "_statusError_uas10_269", p = "_statusUpcoming_uas10_277", m = "_description_uas10_285", h = "_number_uas10_353", g = "_statusComplete_uas10_371", _ = "_disabled_uas10_453", v = "_connector_uas10_493", y = "_fill_uas10_509", b = "_horizontal_uas10_529", x = "_compact_uas10_629", S = "_caption_uas10_671", C = "_captionCount_uas10_689", w = "_captionTitle_uas10_707", T = "_vertical_uas10_731", E = {
 	root: e,
 	list: t,
@@ -28,5 +28,4 @@ var e = "_root_uas10_33", t = "_list_uas10_67", n = "_sm_uas10_85", r = "_md_uas
 	captionTitle: w,
 	vertical: T
 };
-//#endregion
 export { s as button, S as caption, C as captionCount, w as captionTitle, x as compact, v as connector, E as default, m as description, _ as disabled, y as fill, b as horizontal, a as item, i as lg, t as list, l as marker, r as md, h as number, e as root, n as sm, g as statusComplete, d as statusCurrent, f as statusError, p as statusUpcoming, u as text, c as title, o as trigger, T as vertical };

package/dist/components/navigation/Tabs/Tabs.cjs.js

@@ -1 +1 @@
-const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../data-display/Badge/Badge.cjs.js"),r=require("./Tabs.module.css.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o={line:r.default.line,pill:r.default.pill,enclosed:r.default.enclosed},s={sm:r.default.sm,md:r.default.md,lg:r.default.lg},c={horizontal:r.default.horizontal,vertical:r.default.vertical},l=e=>e.replace(/[^A-Za-z0-9_-]/g,e=>`_${e.charCodeAt(0).toString(16)}`);function u(){let[e,t]=(0,i.useState)({});return[e,(0,i.useCallback)((e,n)=>(t(t=>t[e]===n?t:{...t,[e]:n}),()=>t(t=>{if(t[e]!==n)return t;let r={...t};return delete r[e],r})),[])]}var d=(0,i.createContext)(null);function f(e){let t=(0,i.useContext)(d);if(!t)throw Error(`<${e}> must be used inside <Tabs>.`);return t}var p=(e,t)=>`${e}-tab-${l(t)}`,m=(e,t)=>`${e}-panel-${l(t)}`;function h({value:n,defaultValue:l,onValueChange:f,variant:p=`line`,size:m=`md`,orientation:h=`horizontal`,activationMode:g=`automatic`,fullWidth:_=!1,keepMounted:v=!1,className:y,children:b,...x}){let S=(0,i.useId)(),[C,w]=e.useControllableState({value:n,defaultValue:l,onChange:f}),[T,E]=(0,i.useState)(void 0),[D,O]=(0,i.useState)(void 0),k=(0,i.useCallback)(e=>w(e),[w]),[A,j]=u(),[M,N]=u(),P=C??D,F=(0,i.useMemo)(()=>({baseId:S,selected:P,select:k,tabStop:T,setTabStop:E,setFirstEnabled:O,orientation:h,activationMode:g,variant:p,size:m,keepMounted:v,tabIds:A,panelIds:M,registerTab:j,registerPanel:N}),[S,P,k,T,h,g,p,m,v,A,M,j,N]);return(0,a.jsx)(d.Provider,{value:F,children:(0,a.jsx)(`div`,{...x,"data-orientation":h,className:t.cx(r.default.root,o[p],s[m],c[h],_&&r.default.fullWidth,y),children:b})})}var g=`[role="tab"]`;function _({className:e,children:n,onKeyDown:o,ref:s,...c}){let{selected:l,setTabStop:u,setFirstEnabled:d,orientation:p,activationMode:m,variant:h,select:_}=f(`Tabs.List`),v=(0,i.useRef)(null),y=(0,i.useRef)(null),b=(0,i.useRef)(null),x=(0,i.useRef)(!1),S=h!==`enclosed`,C=(0,i.useCallback)(e=>{if(v.current=e,typeof s==`function`)return s(e);s&&(s.current=e)},[s]),w=(0,i.useCallback)(e=>{let t=y.current;if(!t)return[];let n=Array.from(t.querySelectorAll(g));return e?n.filter(e=>!e.disabled):n},[]),[T,E]=(0,i.useState)(0);(0,i.useLayoutEffect)(()=>{let e=y.current;if(!e||typeof MutationObserver>`u`)return;let t=new MutationObserver(()=>E(e=>e+1));return t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`disabled`,`data-value`]}),()=>t.disconnect()},[]),(0,i.useLayoutEffect)(()=>{let e=w(!0),t=e.find(e=>e.dataset.value===l)??e[0];u(t?.dataset.value),d(e[0]?.dataset.value)},[w,l,T,u,d]);let D=(0,i.useCallback)(e=>{let t=y.current,n=b.current;if(!t||!n)return;let r=t.querySelector(`${g}[aria-selected="true"]`);if(!r){n.dataset.hidden=``,x.current=!1;return}let i=e||!x.current||n.dataset.hidden!==void 0;i&&(n.dataset.instant=``),n.style.setProperty(`--_tabs-ind-x`,`${r.offsetLeft}px`),n.style.setProperty(`--_tabs-ind-y`,`${r.offsetTop}px`),n.style.setProperty(`--_tabs-ind-w`,`${r.offsetWidth}px`),n.style.setProperty(`--_tabs-ind-h`,`${r.offsetHeight}px`),delete n.dataset.hidden,i&&(n.offsetWidth,delete n.dataset.instant),x.current=!0},[]);(0,i.useLayoutEffect)(()=>{S&&D(!1)},[S,D,l,T,p,h]);let O=(0,i.useRef)(null),k=(0,i.useRef)(new WeakSet);(0,i.useEffect)(()=>{if(!S||typeof ResizeObserver>`u`)return;let e=new ResizeObserver(()=>D(!0));return O.current=e,()=>{e.disconnect(),O.current=null,k.current=new WeakSet}},[S,D]),(0,i.useEffect)(()=>{let e=O.current,t=y.current;if(e&&t)for(let n of[t,...t.querySelectorAll(g)])k.current.has(n)||(k.current.add(n),e.observe(n))},[S,D,T]);let A=(0,i.useRef)(!1);(0,i.useEffect)(()=>{let e=v.current,t=y.current;if(!e||!t||p!==`horizontal`||e.scrollWidth<=e.clientWidth)return;let n=t.querySelector(`${g}[aria-selected="true"]`);if(!n)return;let r=parseFloat(getComputedStyle(e).paddingInlineStart)||0,i=e.getBoundingClientRect(),a=n.getBoundingClientRect(),o=0;if(a.left<i.left+r?o=a.left-i.left-r:a.right>i.right-r&&(o=a.right-i.right+r),o!==0){let t=typeof window.matchMedia==`function`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;e.scrollBy({left:o,behavior:!A.current||t?`auto`:`smooth`})}A.current=!0},[l,p]);let j=e=>{if(o?.(e),e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey)return;let t=e.target.closest(g);if(!t||!y.current?.contains(t))return;let n=w(!0);if(n.length===0)return;let r=n.indexOf(t),i=getComputedStyle(e.currentTarget).direction===`rtl`,a,s=e=>n[(((r===-1?0:r)+e)%n.length+n.length)%n.length];switch(e.key){case`ArrowRight`:p===`horizontal`&&(a=s(i?-1:1));break;case`ArrowLeft`:p===`horizontal`&&(a=s(i?1:-1));break;case`ArrowDown`:p===`vertical`&&(a=s(1));break;case`ArrowUp`:p===`vertical`&&(a=s(-1));break;case`Home`:a=n[0];break;case`End`:a=n[n.length-1];break;default:return}if(!a)return;e.preventDefault(),a.focus();let c=a.dataset.value;m===`automatic`&&c!==void 0&&_(c)};return(0,a.jsx)(`div`,{...c,ref:C,role:`tablist`,"aria-orientation":p,onKeyDown:j,className:t.cx(r.default.list,e),children:(0,a.jsxs)(`div`,{ref:y,className:r.default.track,children:[n,S&&(0,a.jsx)(`span`,{ref:b,className:r.default.indicator,"data-hidden":``,"data-instant":``,"aria-hidden":`true`})]})})}function v({value:e,icon:o,badge:s,badgeLabel:c,disabled:l=!1,className:u,children:d,onClick:m,id:h,...g}){let _=f(`Tabs.Tab`),v=_.selected===e,y=d!=null,b=o!=null,x=h??p(_.baseId,e),{registerTab:S}=_;(0,i.useLayoutEffect)(()=>S(e,x),[S,e,x]);let C=typeof s==`number`?(0,a.jsx)(n.Badge,{count:s,size:`sm`,variant:v?`solid`:`soft`,tone:v?`accent`:`neutral`,label:c}):s,w=C!=null&&C!==!1;return(0,a.jsx)(`button`,{...g,type:`button`,role:`tab`,id:x,"data-value":e,"aria-selected":v,"aria-controls":_.panelIds[e],tabIndex:_.tabStop===e?0:-1,disabled:l,className:t.cx(r.default.tab,!y&&r.default.iconOnly,u),onClick:t=>{m?.(t),!t.defaultPrevented&&!l&&_.select(e)},children:(0,a.jsxs)(`span`,{className:r.default.content,children:[b&&(0,a.jsx)(`span`,{className:r.default.icon,"aria-hidden":`true`,children:o}),y&&(0,a.jsxs)(`span`,{className:r.default.labelStack,children:[(0,a.jsx)(`span`,{className:r.default.labelText,children:d}),(0,a.jsx)(`span`,{className:r.default.labelSizer,"aria-hidden":`true`,children:d})]}),w&&(0,a.jsx)(`span`,{className:r.default.badge,children:C})]})})}function y({value:e,keepMounted:n,className:o,children:s,id:c,tabIndex:l=0,"aria-labelledby":u,...d}){let h=f(`Tabs.Panel`),g=h.selected===e,_=n??h.keepMounted,v=g||_,y=c??m(h.baseId,e),{registerPanel:b}=h;return(0,i.useLayoutEffect)(()=>v?b(e,y):void 0,[v,b,e,y]),v?(0,a.jsx)(`div`,{...d,role:`tabpanel`,id:y,"aria-labelledby":u??h.tabIds[e]??p(h.baseId,e),tabIndex:l,hidden:!g,"data-selected":g||void 0,className:t.cx(r.default.panel,o),children:s}):null}var b=Object.assign(h,{List:_,Tab:v,Panel:y});exports.Tab=v,exports.TabPanel=y,exports.Tabs=b,exports.TabsList=_;
+"use client";const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../data-display/Badge/Badge.cjs.js"),r=require("./Tabs.module.css.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o={line:r.default.line,pill:r.default.pill,enclosed:r.default.enclosed},s={sm:r.default.sm,md:r.default.md,lg:r.default.lg},c={horizontal:r.default.horizontal,vertical:r.default.vertical},l=e=>e.replace(/[^A-Za-z0-9_-]/g,e=>`_${e.charCodeAt(0).toString(16)}`);function u(){let[e,t]=(0,i.useState)({});return[e,(0,i.useCallback)((e,n)=>(t(t=>t[e]===n?t:{...t,[e]:n}),()=>t(t=>{if(t[e]!==n)return t;let r={...t};return delete r[e],r})),[])]}var d=(0,i.createContext)(null);function f(e){let t=(0,i.useContext)(d);if(!t)throw Error(`<${e}> must be used inside <Tabs>.`);return t}var p=(e,t)=>`${e}-tab-${l(t)}`,m=(e,t)=>`${e}-panel-${l(t)}`;function h({value:n,defaultValue:l,onValueChange:f,variant:p=`line`,size:m=`md`,orientation:h=`horizontal`,activationMode:g=`automatic`,fullWidth:_=!1,keepMounted:v=!1,className:y,children:b,...x}){let S=(0,i.useId)(),[C,w]=e.useControllableState({value:n,defaultValue:l,onChange:f}),[T,E]=(0,i.useState)(void 0),[D,O]=(0,i.useState)(void 0),k=(0,i.useCallback)(e=>w(e),[w]),[A,j]=u(),[M,N]=u(),P=C??D,F=(0,i.useMemo)(()=>({baseId:S,selected:P,select:k,tabStop:T,setTabStop:E,setFirstEnabled:O,orientation:h,activationMode:g,variant:p,size:m,keepMounted:v,tabIds:A,panelIds:M,registerTab:j,registerPanel:N}),[S,P,k,T,h,g,p,m,v,A,M,j,N]);return(0,a.jsx)(d.Provider,{value:F,children:(0,a.jsx)(`div`,{...x,"data-orientation":h,className:t.cx(r.default.root,o[p],s[m],c[h],_&&r.default.fullWidth,y),children:b})})}var g=`[role="tab"]`;function _({className:e,children:n,onKeyDown:o,ref:s,...c}){let{selected:l,setTabStop:u,setFirstEnabled:d,orientation:p,activationMode:m,variant:h,select:_}=f(`Tabs.List`),v=(0,i.useRef)(null),y=(0,i.useRef)(null),b=(0,i.useRef)(null),x=(0,i.useRef)(!1),S=h!==`enclosed`,C=(0,i.useCallback)(e=>{if(v.current=e,typeof s==`function`)return s(e);s&&(s.current=e)},[s]),w=(0,i.useCallback)(e=>{let t=y.current;if(!t)return[];let n=Array.from(t.querySelectorAll(g));return e?n.filter(e=>!e.disabled):n},[]),[T,E]=(0,i.useState)(0);(0,i.useLayoutEffect)(()=>{let e=y.current;if(!e||typeof MutationObserver>`u`)return;let t=new MutationObserver(()=>E(e=>e+1));return t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`disabled`,`data-value`]}),()=>t.disconnect()},[]),(0,i.useLayoutEffect)(()=>{let e=w(!0),t=e.find(e=>e.dataset.value===l)??e[0];u(t?.dataset.value),d(e[0]?.dataset.value)},[w,l,T,u,d]);let D=(0,i.useCallback)(e=>{let t=y.current,n=b.current;if(!t||!n)return;let r=t.querySelector(`${g}[aria-selected="true"]`);if(!r){n.dataset.hidden=``,x.current=!1;return}let i=e||!x.current||n.dataset.hidden!==void 0;i&&(n.dataset.instant=``),n.style.setProperty(`--_tabs-ind-x`,`${r.offsetLeft}px`),n.style.setProperty(`--_tabs-ind-y`,`${r.offsetTop}px`),n.style.setProperty(`--_tabs-ind-w`,`${r.offsetWidth}px`),n.style.setProperty(`--_tabs-ind-h`,`${r.offsetHeight}px`),delete n.dataset.hidden,i&&(n.offsetWidth,delete n.dataset.instant),x.current=!0},[]);(0,i.useLayoutEffect)(()=>{S&&D(!1)},[S,D,l,T,p,h]);let O=(0,i.useRef)(null),k=(0,i.useRef)(new WeakSet);(0,i.useEffect)(()=>{if(!S||typeof ResizeObserver>`u`)return;let e=new ResizeObserver(()=>D(!0));return O.current=e,()=>{e.disconnect(),O.current=null,k.current=new WeakSet}},[S,D]),(0,i.useEffect)(()=>{let e=O.current,t=y.current;if(e&&t)for(let n of[t,...t.querySelectorAll(g)])k.current.has(n)||(k.current.add(n),e.observe(n))},[S,D,T]);let A=(0,i.useRef)(!1);(0,i.useEffect)(()=>{let e=v.current,t=y.current;if(!e||!t||p!==`horizontal`||e.scrollWidth<=e.clientWidth)return;let n=t.querySelector(`${g}[aria-selected="true"]`);if(!n)return;let r=parseFloat(getComputedStyle(e).paddingInlineStart)||0,i=e.getBoundingClientRect(),a=n.getBoundingClientRect(),o=0;if(a.left<i.left+r?o=a.left-i.left-r:a.right>i.right-r&&(o=a.right-i.right+r),o!==0){let t=typeof window.matchMedia==`function`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;e.scrollBy({left:o,behavior:!A.current||t?`auto`:`smooth`})}A.current=!0},[l,p]);let j=e=>{if(o?.(e),e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey)return;let t=e.target.closest(g);if(!t||!y.current?.contains(t))return;let n=w(!0);if(n.length===0)return;let r=n.indexOf(t),i=getComputedStyle(e.currentTarget).direction===`rtl`,a,s=e=>n[(((r===-1?0:r)+e)%n.length+n.length)%n.length];switch(e.key){case`ArrowRight`:p===`horizontal`&&(a=s(i?-1:1));break;case`ArrowLeft`:p===`horizontal`&&(a=s(i?1:-1));break;case`ArrowDown`:p===`vertical`&&(a=s(1));break;case`ArrowUp`:p===`vertical`&&(a=s(-1));break;case`Home`:a=n[0];break;case`End`:a=n[n.length-1];break;default:return}if(!a)return;e.preventDefault(),a.focus();let c=a.dataset.value;m===`automatic`&&c!==void 0&&_(c)};return(0,a.jsx)(`div`,{...c,ref:C,role:`tablist`,"aria-orientation":p,onKeyDown:j,className:t.cx(r.default.list,e),children:(0,a.jsxs)(`div`,{ref:y,className:r.default.track,children:[n,S&&(0,a.jsx)(`span`,{ref:b,className:r.default.indicator,"data-hidden":``,"data-instant":``,"aria-hidden":`true`})]})})}function v({value:e,icon:o,badge:s,badgeLabel:c,disabled:l=!1,className:u,children:d,onClick:m,id:h,...g}){let _=f(`Tabs.Tab`),v=_.selected===e,y=d!=null,b=o!=null,x=h??p(_.baseId,e),{registerTab:S}=_;(0,i.useLayoutEffect)(()=>S(e,x),[S,e,x]);let C=typeof s==`number`?(0,a.jsx)(n.Badge,{count:s,size:`sm`,variant:v?`solid`:`soft`,tone:v?`accent`:`neutral`,label:c}):s,w=C!=null&&C!==!1;return(0,a.jsx)(`button`,{...g,type:`button`,role:`tab`,id:x,"data-value":e,"aria-selected":v,"aria-controls":_.panelIds[e],tabIndex:_.tabStop===e?0:-1,disabled:l,className:t.cx(r.default.tab,!y&&r.default.iconOnly,u),onClick:t=>{m?.(t),!t.defaultPrevented&&!l&&_.select(e)},children:(0,a.jsxs)(`span`,{className:r.default.content,children:[b&&(0,a.jsx)(`span`,{className:r.default.icon,"aria-hidden":`true`,children:o}),y&&(0,a.jsxs)(`span`,{className:r.default.labelStack,children:[(0,a.jsx)(`span`,{className:r.default.labelText,children:d}),(0,a.jsx)(`span`,{className:r.default.labelSizer,"aria-hidden":`true`,children:d})]}),w&&(0,a.jsx)(`span`,{className:r.default.badge,children:C})]})})}function y({value:e,keepMounted:n,className:o,children:s,id:c,tabIndex:l=0,"aria-labelledby":u,...d}){let h=f(`Tabs.Panel`),g=h.selected===e,_=n??h.keepMounted,v=g||_,y=c??m(h.baseId,e),{registerPanel:b}=h;return(0,i.useLayoutEffect)(()=>v?b(e,y):void 0,[v,b,e,y]),v?(0,a.jsx)(`div`,{...d,role:`tabpanel`,id:y,"aria-labelledby":u??h.tabIds[e]??p(h.baseId,e),tabIndex:l,hidden:!g,"data-selected":g||void 0,className:t.cx(r.default.panel,o),children:s}):null}var b=Object.assign(h,{List:_,Tab:v,Panel:y});exports.Tab=v,exports.TabPanel=y,exports.Tabs=b,exports.TabsList=_;