@jfrader/ui 0.4.0 → 0.5.1

package/dist/multi-select-DG1BCFX7.js

@@ -0,0 +1,598 @@
+'use client';
+import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./visually-hidden-BJdvqqvn.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { t as c } from "./trigger-style-B1KVC8O1.js";
+import { t as l } from "./overlay-layer-qEbpEtb8.js";
+import { a as u, i as d, n as f, o as p, r as m, s as h, t as g } from "./listbox-style-WX-RASp1.js";
+import { a as _, r as v, t as y } from "./collection-registry-k6JcD3Jr.js";
+import { t as b } from "./overlay-portal-C4JZFq2M.js";
+import { t as x } from "./use-overlay-floating-Bx2jBKAA.js";
+import { createContext as S, useContext as C, useId as w, useLayoutEffect as T, useMemo as E, useRef as D, useState as O } from "react";
+import { vars as k } from "@jfrader/tokens/vars";
+import { Fragment as A, jsx as j, jsxs as M } from "@emotion/react/jsx-runtime";
+import { FloatingList as ee, useDismiss as te, useInteractions as ne, useListNavigation as re, useMergeRefs as N, useRole as ie } from "@floating-ui/react";
+//#region src/components/multi-select/multi-select.tsx
+var ae = [], oe = 500, se = t({
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	justifyContent: "flex-start",
+	"&[aria-invalid=\"true\"]": { borderColor: k.color.dangerText }
+}), ce = {
+	sm: t({ minBlockSize: k.space[8] }),
+	md: t({ minBlockSize: k.space[10] }),
+	lg: t({ minBlockSize: k.space[12] })
+}, le = t({
+	display: "flex",
+	alignItems: "center",
+	gap: k.space[1],
+	minInlineSize: 0,
+	overflow: "hidden",
+	"&[data-placeholder]": { color: k.color.textMuted }
+}), P = t({
+	borderRadius: k.radius.full,
+	paddingInline: k.space[2],
+	backgroundColor: k.color.accentSoft,
+	color: k.color.accentText,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap",
+	minInlineSize: 0,
+	[r]: { border: "1px solid CanvasText" }
+}), F = t({
+	fontFamily: k.font.sans,
+	fontSize: k.textSize.sm,
+	color: k.color.text
+}), ue = t({ color: k.color.dangerText }), I = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), de = t({
+	minInlineSize: 0,
+	maxInlineSize: "100vw",
+	borderColor: k.color.borderControl,
+	animation: `${I} ${k.motion.duration.base} ${k.motion.easeStandard}`,
+	[i]: { animation: "none" },
+	[r]: {
+		borderColor: "CanvasText",
+		backgroundColor: "Canvas",
+		color: "CanvasText"
+	}
+}), fe = t({
+	overflowWrap: "anywhere",
+	[r]: { "&[data-active]": { outlineColor: "Highlight" } }
+}), L = t({
+	minBlockSize: k.space[6],
+	minInlineSize: k.space[6]
+});
+function pe({ value: e, defaultValue: t = ae, onValueChange: n, open: r, defaultOpen: i = !1, onOpenChange: o, disabled: s = !1, required: c = !1, locale: l, messages: u, placement: d = "bottom-start" }) {
+	let f = w(), [p, m] = O(`${f}-listbox`), [h, g] = O("ltr"), [v = ae, y] = a(e, t, (e) => n?.([...e])), b = E(() => [...new Set(v)], [v]), [S = !1, C] = a(r, i, o), [k, A] = _(), [j, M] = O(null), [ee, N] = O(null), [oe, se] = O(), [ce, le] = O(), [P, F] = O(), [ue, I] = O(!1), [de, fe] = O({
+		width: 0,
+		height: 0
+	}), L = D([]), pe = D([]), R = D(null), z = D(null), B = D({
+		value: [...new Set(t)],
+		open: i
+	}), V = E(() => ({
+		list: new Intl.ListFormat(l),
+		number: new Intl.NumberFormat(l),
+		plural: new Intl.PluralRules(l),
+		collator: new Intl.Collator(l, {
+			usage: "search",
+			sensitivity: "base"
+		})
+	}), [l]), H = E(() => ({
+		clearLabel: "Clear selection",
+		empty: "No options",
+		required: "Select at least one option",
+		selected: (e) => `${V.number.format(e.length)} ${V.plural.select(e.length) === "one" ? "option" : "options"} selected${e.length ? `: ${V.list.format([...e])}` : ""}`,
+		toggled: (e, t) => `${e} ${t ? "selected" : "deselected"}`,
+		...u
+	}), [V, u]), U = E(() => {
+		let e = [];
+		return k.forEach((t, n) => {
+			t.index >= 0 && (e[t.index] = n);
+		}), e;
+	}, [k]), W = j === null ? void 0 : U[j], G = S && !s && W !== void 0 && !k.get(W)?.disabled ? k.get(W)?.id : void 0, K = b.map((e) => k.get(e)).find((e) => e && !e.disabled && e.index >= 0)?.index ?? null, q = x({
+		open: S,
+		placement: d,
+		onOpenChange: (e) => {
+			s || C(e);
+		},
+		onAvailableSize: fe
+	}), J = ie(q.context, { role: "listbox" }), Y = te(q.context, {
+		enabled: !s,
+		outsidePress: (e) => !z.current?.contains(e.target)
+	}), X = re(q.context, {
+		enabled: !s,
+		listRef: L,
+		activeIndex: j,
+		onNavigate: M,
+		virtual: !0,
+		loop: !0,
+		selectedIndex: K,
+		focusItemOnOpen: !0,
+		disabledIndices: (e) => {
+			let t = U[e];
+			return t === void 0 || k.get(t)?.disabled === !0;
+		}
+	}), Z = ne([
+		J,
+		Y,
+		X
+	]), Q = ({ onKeyDown: e, ...t } = {}) => {
+		let n = Z.getReferenceProps(t), r = n.onKeyDown;
+		return {
+			...n,
+			onKeyDown: (t) => {
+				e?.(t), !t.defaultPrevented && !t.nativeEvent.isComposing && r?.(t);
+			}
+		};
+	}, $ = (e) => {
+		let t = [...new Set(e)];
+		t.length === b.length && t.every((e, t) => e === b[t]) || y(t);
+	};
+	return T(() => {
+		let e = R.current;
+		e && e.setCustomValidity(c && !s && b.length === 0 ? H.required : "");
+	}, [
+		c,
+		s,
+		b.length,
+		H.required
+	]), T(() => {
+		let t = R.current?.form;
+		if (!t) return;
+		let n = (t) => {
+			queueMicrotask(() => {
+				t.defaultPrevented || (I(!1), e === void 0 && $(B.current.value), r === void 0 && C(B.current.open));
+			});
+		};
+		return t.addEventListener("reset", n), () => t.removeEventListener("reset", n);
+	}), T(() => {
+		G && L.current[j]?.scrollIntoView({ block: "nearest" });
+	}, [G, j]), {
+		baseId: f,
+		listId: p,
+		setListId: m,
+		direction: h,
+		setDirection: g,
+		selected: b,
+		open: S,
+		disabled: s,
+		required: c,
+		options: k,
+		registration: A,
+		activeIndex: j,
+		activeId: G,
+		setActiveIndex: M,
+		triggerName: ee,
+		setTriggerName: N,
+		labelId: oe,
+		setLabelId: se,
+		descriptionId: ce,
+		setDescriptionId: le,
+		errorId: P,
+		setErrorId: F,
+		invalid: c && !s && ue && b.length === 0,
+		setInvalidAttempt: I,
+		available: de,
+		elementsRef: L,
+		labelsRef: pe,
+		proxyRef: R,
+		clearRef: z,
+		formatters: V,
+		messages: H,
+		byIndex: U,
+		change: $,
+		toggle: (e) => {
+			s || k.get(e)?.disabled || $(b.includes(e) ? b.filter((t) => t !== e) : [...b, e]);
+		},
+		requestOpen: C,
+		...q,
+		...Z,
+		getReferenceProps: Q
+	};
+}
+var R = S(null), z = S(!1);
+function B(e) {
+	let t = C(R);
+	if (!t) throw Error(`MultiSelect.${e} must be rendered inside <MultiSelect>.`);
+	return t;
+}
+var V = (...e) => e.filter(Boolean).join(" ") || void 0;
+function H(e) {
+	let t = pe(e), n = t.selected.map((e) => t.options.get(e)?.label ?? e), r = D(t.selected), [i, a] = O("");
+	return T(() => {
+		let e = r.current;
+		if (e.length === t.selected.length && e.every((e, n) => e === t.selected[n])) return;
+		let i = [...e.filter((e) => !t.selected.includes(e)), ...t.selected.filter((t) => !e.includes(t))], o = i[0];
+		a(i.length === 1 && o !== void 0 ? t.messages.toggled(t.options.get(o)?.label ?? o, t.selected.includes(o)) : t.messages.selected(n)), r.current = t.selected;
+	}, [
+		t.selected,
+		t.messages,
+		t.options,
+		n
+	]), /* @__PURE__ */ M(R.Provider, {
+		value: t,
+		children: [
+			e.children,
+			/* @__PURE__ */ j("span", {
+				id: `${t.baseId}-summary`,
+				css: o,
+				children: t.messages.selected(n)
+			}),
+			/* @__PURE__ */ j("span", {
+				css: o,
+				role: "status",
+				"aria-atomic": "true",
+				children: i
+			}),
+			e.name !== void 0 && t.selected.map((n) => /* @__PURE__ */ j("input", {
+				type: "hidden",
+				name: e.name,
+				value: n,
+				disabled: t.disabled,
+				form: t.triggerName?.form
+			}, n)),
+			/* @__PURE__ */ j("input", {
+				ref: t.proxyRef,
+				form: t.triggerName?.form,
+				type: "text",
+				css: o,
+				tabIndex: -1,
+				"aria-label": t.messages.required,
+				required: t.required,
+				disabled: t.disabled,
+				value: t.selected.length ? "selected" : "",
+				onChange: (e) => {
+					e.currentTarget.value = t.selected.length ? "selected" : "";
+				},
+				onInvalid: (e) => {
+					e.preventDefault(), t.setInvalidAttempt(!0), a(t.messages.required), t.refs.domReference.current?.focus();
+				}
+			})
+		]
+	});
+}
+function U(e) {
+	return /* @__PURE__ */ j(l, { children: /* @__PURE__ */ j(H, { ...e }) });
+}
+U.displayName = "MultiSelect";
+function W({ ref: e, id: t, size: r = "md", disabled: i, onKeyDown: a, onKeyUp: o, onClick: s, onBlur: l, className: u, sx: d, ...f }) {
+	let p = B("Trigger"), m = N([p.refs.setReference, e]), h = t ?? `${p.baseId}-trigger`, g = V(f["aria-labelledby"], p.labelId), _ = f["aria-label"], v = D({
+		text: "",
+		time: 0
+	}), y = D(!1);
+	T(() => {
+		p.setTriggerName({
+			id: h,
+			labelledBy: g,
+			label: _,
+			form: f.form
+		});
+		let e = p.refs.domReference.current;
+		return e && p.setDirection(e.ownerDocument.defaultView?.getComputedStyle(e).direction ?? "ltr"), () => p.setTriggerName(null);
+	}, [
+		h,
+		g,
+		_,
+		f.form,
+		p.setTriggerName
+	]);
+	let b = (e) => {
+		if (a?.(e), !(e.defaultPrevented || p.disabled || i || e.nativeEvent.isComposing)) {
+			if (e.key === "Enter" || e.key === " ") {
+				if (e.preventDefault(), e.repeat || y.current) return;
+				if (y.current = !0, !p.open) p.requestOpen(!0);
+				else if (p.activeIndex !== null) {
+					let e = p.byIndex[p.activeIndex];
+					e !== void 0 && p.toggle(e);
+				}
+			} else if (e.key === "Tab") p.requestOpen(!1);
+			else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+				let t = performance.now(), n = (t - v.current.time > oe ? "" : v.current.text) + e.key;
+				v.current = {
+					text: n,
+					time: t
+				};
+				for (let e = 1; e <= p.byIndex.length; e++) {
+					let t = ((p.activeIndex ?? -1) + e) % p.byIndex.length, r = p.byIndex[t], i = r === void 0 ? void 0 : p.options.get(r);
+					if (i && !i.disabled && p.formatters.collator.compare(i.label.slice(0, n.length), n) === 0) {
+						p.requestOpen(!0), p.setActiveIndex(t);
+						break;
+					}
+				}
+			}
+		}
+	};
+	return /* @__PURE__ */ j(n, {
+		className: u,
+		styles: [
+			c,
+			se,
+			ce[r]
+		],
+		sx: d,
+		children: (e) => /* @__PURE__ */ j("button", {
+			...p.getReferenceProps({
+				...f,
+				id: h,
+				disabled: p.disabled || i,
+				onKeyDown: b,
+				onKeyUp: (e) => {
+					o?.(e), (e.key === "Enter" || e.key === " ") && (y.current = !1), e.key === " " && e.preventDefault();
+				},
+				onClick: (e) => {
+					s?.(e), !e.defaultPrevented && !p.disabled && !i && p.requestOpen(!p.open);
+				},
+				onBlur: (e) => {
+					y.current = !1, l?.(e);
+				}
+			}),
+			type: "button",
+			ref: m,
+			role: "combobox",
+			"aria-haspopup": "listbox",
+			"aria-expanded": p.open,
+			"aria-controls": p.listId,
+			"aria-activedescendant": p.activeId,
+			"aria-labelledby": g,
+			"aria-describedby": V(f["aria-describedby"], `${p.baseId}-summary`, p.descriptionId, p.errorId),
+			"aria-required": p.required || void 0,
+			"aria-invalid": p.errorId || p.invalid ? !0 : f["aria-invalid"],
+			"data-ui": "multi-select",
+			"data-state": p.open ? "open" : "closed",
+			className: e
+		})
+	});
+}
+W.displayName = "MultiSelect.Trigger";
+function G({ ref: e, maxVisible: t = 2, placeholder: r, className: i, sx: a, ...o }) {
+	let s = B("Value");
+	if (!Number.isFinite(t) || !Number.isInteger(t) || t < 0) throw RangeError("MultiSelect.Value maxVisible must be a finite nonnegative integer.");
+	let c = s.selected.map((e) => s.options.get(e)?.label ?? e), l = Math.max(0, c.length - t);
+	return /* @__PURE__ */ j(n, {
+		className: i,
+		styles: le,
+		sx: a,
+		children: (n) => /* @__PURE__ */ j("span", {
+			...o,
+			ref: e,
+			"aria-hidden": "true",
+			"data-ui": "multi-select-value",
+			"data-placeholder": !c.length || void 0,
+			className: n,
+			children: c.length ? /* @__PURE__ */ M(A, { children: [c.slice(0, t).map((e, t) => /* @__PURE__ */ j("span", {
+				css: P,
+				children: e
+			}, s.selected[t])), l > 0 && /* @__PURE__ */ M("span", {
+				css: P,
+				children: ["+", s.formatters.number.format(l)]
+			})] }) : r
+		})
+	});
+}
+G.displayName = "MultiSelect.Value";
+function K({ ref: e, id: t, children: r, style: i, onMouseDown: a, className: o, sx: s, ...c }) {
+	let l = B("Content"), u = t ?? `${l.baseId}-listbox`;
+	T(() => (l.setListId(u), () => l.setListId(`${l.baseId}-listbox`)), [
+		u,
+		l.baseId,
+		l.setListId
+	]);
+	let d = N([l.open ? l.refs.setFloating : null, e]), f = c["aria-label"] !== void 0 || c["aria-labelledby"] !== void 0 ? {} : {
+		"aria-label": l.triggerName?.label,
+		"aria-labelledby": l.triggerName?.labelledBy ?? (l.triggerName?.label ? void 0 : l.triggerName?.id)
+	};
+	return /* @__PURE__ */ j(b, { children: /* @__PURE__ */ j(n, {
+		className: o,
+		styles: [
+			h,
+			p,
+			de
+		],
+		sx: s,
+		children: (e) => /* @__PURE__ */ j("div", {
+			...l.getFloatingProps({
+				...f,
+				...c,
+				onMouseDown: (e) => {
+					a?.(e), e.preventDefault();
+				}
+			}),
+			id: u,
+			dir: c.dir ?? l.direction,
+			ref: d,
+			role: "listbox",
+			"aria-multiselectable": "true",
+			hidden: !l.open,
+			"data-ui": "multi-select-content",
+			className: e,
+			style: {
+				...i,
+				...l.floatingStyles,
+				inlineSize: l.refs.domReference.current?.getBoundingClientRect().width,
+				maxBlockSize: l.available.height || void 0,
+				maxInlineSize: l.available.width || void 0
+			},
+			children: /* @__PURE__ */ j(ee, {
+				elementsRef: l.elementsRef,
+				children: /* @__PURE__ */ j(z.Provider, {
+					value: !0,
+					children: r
+				})
+			})
+		})
+	}) });
+}
+K.displayName = "MultiSelect.Content";
+function q({ ref: e, id: t, value: r, disabled: i = !1, textValue: a, onClick: o, children: s, className: c, sx: l, ...p }) {
+	let h = B("Item");
+	if (!C(z)) throw Error("MultiSelect.Item must be rendered inside MultiSelect.Content.");
+	let _ = D(null), b = t ?? y(h.baseId, r), x = v(r, h.registration, _, (e, t) => ({
+		index: e,
+		label: a ?? t,
+		disabled: i,
+		id: b
+	})), S = N([x.ref, e]), w = h.selected.includes(r);
+	return /* @__PURE__ */ j(n, {
+		className: c,
+		styles: [
+			f,
+			g,
+			d,
+			fe
+		],
+		sx: l,
+		children: (e) => /* @__PURE__ */ M("div", {
+			...h.getItemProps({
+				...p,
+				onClick: (e) => {
+					o?.(e), e.defaultPrevented || h.toggle(r);
+				}
+			}),
+			id: b,
+			ref: S,
+			role: "option",
+			"aria-selected": w,
+			"aria-disabled": h.disabled || i || void 0,
+			"data-active": x.index >= 0 && h.activeIndex === x.index && !h.disabled || void 0,
+			"data-ui": "multi-select-item",
+			className: e,
+			children: [/* @__PURE__ */ j("span", {
+				ref: _,
+				css: u,
+				children: s
+			}), w && /* @__PURE__ */ j("span", {
+				"aria-hidden": "true",
+				css: m,
+				children: "✓"
+			})]
+		})
+	});
+}
+q.displayName = "MultiSelect.Item";
+function J({ ref: e, disabled: t, onClick: r, children: i, className: a, sx: o, ...s }) {
+	let l = B("Clear"), u = l.selected.filter((e) => l.options.get(e)?.disabled), d = D(null), [, f] = O(0), p = N([l.clearRef, e]);
+	return T(() => {
+		d.current && !l.open && d.current.length === l.selected.length && d.current.every((e, t) => e === l.selected[t]) && l.refs.domReference.current?.focus(), d.current = null;
+	}), /* @__PURE__ */ j(n, {
+		className: a,
+		styles: [c, L],
+		sx: o,
+		children: (e) => /* @__PURE__ */ j("button", {
+			...s,
+			ref: p,
+			type: "button",
+			disabled: l.disabled || t || u.length === l.selected.length,
+			"aria-label": s["aria-label"] ?? l.messages.clearLabel,
+			"data-ui": "multi-select-clear",
+			className: e,
+			onClick: (e) => {
+				r?.(e), !e.defaultPrevented && (d.current = u, l.change(u), l.requestOpen(!1), f((e) => e + 1));
+			},
+			children: i === void 0 ? "×" : i
+		})
+	});
+}
+J.displayName = "MultiSelect.Clear";
+function Y({ ref: e, id: t, children: r, className: i, sx: a, ...o }) {
+	let c = B("Label"), l = t ?? `${c.baseId}-label`, u = s(r);
+	return T(() => {
+		if (u) return c.setLabelId(l), () => c.setLabelId(void 0);
+	}, [
+		l,
+		u,
+		c.setLabelId
+	]), u ? /* @__PURE__ */ j(n, {
+		className: i,
+		styles: F,
+		sx: a,
+		children: (t) => /* @__PURE__ */ j("label", {
+			htmlFor: c.triggerName?.id ?? `${c.baseId}-trigger`,
+			...o,
+			id: l,
+			ref: e,
+			"data-ui": "multi-select-label",
+			className: t,
+			children: r
+		})
+	}) : null;
+}
+Y.displayName = "MultiSelect.Label";
+function X({ part: e, error: t = !1, ref: r, id: i, children: a, className: o, sx: c, ...l }) {
+	let u = B(e), d = i ?? `${u.baseId}-${e}`, f = s(a), p = t ? u.setErrorId : u.setDescriptionId;
+	return T(() => {
+		if (f) return p(d), () => p(void 0);
+	}, [
+		d,
+		f,
+		p
+	]), f ? /* @__PURE__ */ j(n, {
+		className: o,
+		styles: [F, t && ue],
+		sx: c,
+		children: (n) => /* @__PURE__ */ j("span", {
+			...l,
+			ref: r,
+			id: d,
+			role: t ? "alert" : l.role,
+			"data-ui": `multi-select-${e}`,
+			className: n,
+			children: a
+		})
+	}) : null;
+}
+function Z(e) {
+	return /* @__PURE__ */ j(X, {
+		...e,
+		part: "description"
+	});
+}
+Z.displayName = "MultiSelect.Description";
+function Q(e) {
+	return /* @__PURE__ */ j(X, {
+		...e,
+		part: "error",
+		error: !0
+	});
+}
+Q.displayName = "MultiSelect.Error";
+function $({ ref: e, children: t, className: r, sx: i, ...a }) {
+	let c = B("Empty");
+	if (c.options.size) return null;
+	let l = t === void 0 ? c.messages.empty : t;
+	return s(l) ? /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(n, {
+		className: r,
+		styles: F,
+		sx: i,
+		children: (t) => /* @__PURE__ */ j("div", {
+			...a,
+			ref: e,
+			"aria-hidden": "true",
+			"data-ui": "multi-select-empty",
+			className: t,
+			children: l
+		})
+	}), /* @__PURE__ */ j(b, { children: /* @__PURE__ */ j("div", {
+		role: "status",
+		css: o,
+		hidden: !c.open,
+		children: l
+	}) })] }) : null;
+}
+$.displayName = "MultiSelect.Empty";
+var me = Object.assign(U, {
+	Trigger: W,
+	Value: G,
+	Content: K,
+	Item: q,
+	Clear: J,
+	Label: Y,
+	Description: Z,
+	Error: Q,
+	Empty: $
+});
+//#endregion
+export { me as t };

package/dist/multi-select.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as MultiSelect } from "./multi-select-DG1BCFX7.js";

package/dist/{navigation-DhnKriOp.js → navigation-CC26JDr-.js}

@@ -2,7 +2,7 @@
 import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { t as n } from "./disclosure-caret-C5T3fcl6.js";
 import { t as r } from "./focus-ring-BK5W5_NY.js";
-import { n as i, t as a } from "./media-D_eA_I-e.js";
+import { n as i, r as a } from "./media-8yrN85VT.js";
 import { t as o } from "./renderable-DzcIj1Lo.js";
 import { t as s } from "./icon-wrapper-stN8sD7R.js";
 import { useId as c } from "react";
@@ -11,6 +11,8 @@ import { Fragment as u, jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
 //#region src/components/navigation/navigation.tsx
 var p = l.space[8], m = "0.06em", h = e({
 	display: "grid",
+	minInlineSize: 0,
+	overflowWrap: "anywhere",
 	gap: l.space[4],
 	fontFamily: l.font.sans
 }), g = e({
@@ -49,10 +51,14 @@ var p = l.space[8], m = "0.06em", h = e({
 		color: l.color.text
 	},
 	"&:focus-visible": { ...r },
-	[i]: {
+	[a]: {
 		transitionDuration: "0s",
 		"&::after": { transitionDuration: "0s" }
-	}
+	},
+	[i]: { "&::after": {
+		forcedColorAdjust: "none",
+		color: "ButtonText"
+	} }
 }), y = e({
 	display: "grid",
 	gap: l.space[1],
@@ -87,8 +93,8 @@ var p = l.space[8], m = "0.06em", h = e({
 		pointerEvents: "none"
 	},
 	"&:focus-visible": { ...r },
-	[i]: { transitionDuration: "0s" },
-	[a]: { "&[aria-current=\"page\"]": {
+	[a]: { transitionDuration: "0s" },
+	[i]: { "&[aria-current=\"page\"]": {
 		forcedColorAdjust: "none",
 		backgroundColor: "SelectedItem",
 		color: "SelectedItemText"
@@ -102,7 +108,7 @@ function x({ ref: e, label: n = "Main", className: r, sx: i, ...a }) {
 		children: (t) => /* @__PURE__ */ d("nav", {
 			...a,
 			ref: e,
-			"aria-label": n,
+			"aria-label": a["aria-label"] ?? n,
 			"data-ui": "navigation",
 			className: t
 		})
@@ -149,16 +155,16 @@ function S({ ref: e, label: n, collapsible: r = !1, defaultOpen: i, children: a,
 }
 S.displayName = "Navigation.Group";
 function C({ ref: e, href: n, active: r = !1, disabled: i = !1, icon: a, children: c, className: l, sx: p, ...m }) {
-	let h = /* @__PURE__ */ f(u, { children: [o(a) && /* @__PURE__ */ d("span", {
+	let h = i || m["aria-disabled"] === !0 || m["aria-disabled"] === "true", g = /* @__PURE__ */ f(u, { children: [o(a) && /* @__PURE__ */ d("span", {
 		"aria-hidden": "true",
 		"data-ui": "navigation-item-icon",
 		css: s,
 		children: a
-	}), c] }), g = {
-		"aria-current": r ? "page" : void 0,
-		"aria-disabled": i || void 0,
-		tabIndex: i ? -1 : m.tabIndex,
-		onClick: i ? (e) => {
+	}), c] }), _ = {
+		"aria-current": r ? "page" : m["aria-current"],
+		"aria-disabled": h || m["aria-disabled"],
+		tabIndex: h ? -1 : m.tabIndex,
+		onClick: h ? (e) => {
 			e.preventDefault();
 		} : m.onClick
 	};
@@ -170,20 +176,20 @@ function C({ ref: e, href: n, active: r = !1, disabled: i = !1, icon: a, childre
 			sx: p,
 			children: (t) => n === void 0 ? /* @__PURE__ */ d("span", {
 				...m,
-				...g,
+				..._,
 				ref: e,
 				"data-ui": "navigation-item",
 				className: t,
-				children: h
+				children: g
 			}) : /* @__PURE__ */ d("a", {
 				...m,
-				...g,
+				..._,
 				ref: e,
-				href: i ? void 0 : n,
-				role: i ? "link" : void 0,
+				href: h ? void 0 : n,
+				role: h ? "link" : void 0,
 				"data-ui": "navigation-item",
 				className: t,
-				children: h
+				children: g
 			})
 		})
 	});

package/dist/navigation.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Navigation } from "./navigation-DhnKriOp.js";
+export { t as Navigation } from "./navigation-CC26JDr-.js";