@jfrader/ui 0.5.0 → 0.6.0

package/dist/user-menu-DzELTg1x.js

@@ -0,0 +1,757 @@
+'use client';
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { n, t as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i, r as a } from "./media-8yrN85VT.js";
+import { t as o } from "./sx-BJXJ2xJK.js";
+import { n as s } from "./roving-focus-CYlo_Kf8.js";
+import { t as c } from "./use-controlled-state-DpeVQZNR.js";
+import { t as l } from "./visually-hidden-DgVO3NaB.js";
+import { t as u } from "./renderable-DzcIj1Lo.js";
+import { t as d } from "./icon-wrapper-C-zMD0uL.js";
+import { t as f } from "./avatar-B6idYC59.js";
+import { t as p } from "./use-scroll-lock-40gXwwAy.js";
+import { s as m } from "./listbox-style-DNOxAulu.js";
+import { t as h } from "./overlay-portal-C9igMHnC.js";
+import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, n as C, o as w, p as T, u as E } from "./menu-CVzpsyXn.js";
+import { t as D } from "./kbd-BI_9qzYr.js";
+import { t as O } from "./pill-Dd7pog19.js";
+import { t as ee } from "./spinner-CvzajSg9.js";
+import { createContext as k, useCallback as A, useContext as j, useEffect as M, useId as N, useLayoutEffect as P, useMemo as te, useRef as F, useState as I, useSyncExternalStore as ne } from "react";
+import { vars as L } from "@jfrader/tokens/vars";
+import { Fragment as re, jsx as R, jsxs as z } from "@emotion/react/jsx-runtime";
+import { FloatingFocusManager as ie, useMergeRefs as ae } from "@floating-ui/react";
+import { createPortal as oe } from "react-dom";
+//#region src/components/user-menu/user-menu.tsx
+var B = "UserMenu", V = 640, H = "17.5rem", U = "88dvh", se = 80, W = "32px", G = "48px", K = "--user-menu-target-size", q = "--user-menu-drag", ce = "(prefers-reduced-motion: reduce)", J = [
+	"light",
+	"dark",
+	"system"
+], le = [
+	"available",
+	"busy",
+	"away"
+], Y = {
+	itemSelector: "[role=\"menuitemradio\"]",
+	ownerSelector: "[role=\"group\"]"
+}, X = k(null), ue = k(void 0);
+function Z(e) {
+	let t = j(X);
+	if (!t) throw Error(`${B}.${e} must be rendered inside <${B}>.`);
+	return t;
+}
+var de = (e) => typeof e == "object" && !!e && typeof e.then == "function", fe = (e, t) => e === "adaptive" ? t ? "sheet" : "menu" : e, pe = () => {};
+function me(e, t) {
+	let n = `(width < ${t}px)`, r = A((t) => {
+		if (!e) return pe;
+		let r = e.matchMedia(n);
+		return r.addEventListener("change", t), () => r.removeEventListener("change", t);
+	}, [e, n]);
+	return ne(r, () => e?.matchMedia(n).matches ?? !1, () => !1);
+}
+var Q = e({
+	from: {
+		opacity: 0,
+		scale: "0.98"
+	},
+	to: {
+		opacity: 1,
+		scale: "1"
+	}
+}), $ = e({
+	from: { transform: "translateY(100%)" },
+	to: { transform: "translateY(0)" }
+}), he = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), ge = t({
+	label: "user-menu-trigger",
+	appearance: "none",
+	boxSizing: "border-box",
+	display: "inline-flex",
+	alignItems: "center",
+	gap: L.space[2],
+	maxInlineSize: "100%",
+	minBlockSize: L.space[10],
+	padding: L.space[1],
+	border: `1px solid ${L.color.borderControl}`,
+	borderRadius: L.radius.full,
+	backgroundColor: "transparent",
+	font: "inherit",
+	fontSize: L.textSize.sm,
+	fontWeight: L.fontWeight.medium,
+	color: L.color.text,
+	cursor: "pointer",
+	transitionProperty: "background-color",
+	transitionDuration: L.motion.duration.fast,
+	transitionTimingFunction: L.motion.easeStandard,
+	"&:hover:not(:disabled)": { backgroundColor: L.color.surfaceHover },
+	"&:focus-visible": n,
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	[a]: { transitionDuration: "0s" },
+	[i]: { borderColor: "ButtonText" }
+}), _e = t({
+	minInlineSize: 0,
+	paddingInlineEnd: L.space[2],
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+}), ve = t({
+	label: "user-menu-scrim",
+	position: "fixed",
+	inset: 0,
+	backgroundColor: L.color.scrim,
+	animation: `${he} ${L.motion.duration.slow} ${L.motion.easeStandard}`,
+	[a]: { animation: "none" }
+}), ye = t({
+	label: "user-menu",
+	[K]: W,
+	borderColor: L.color.borderControl,
+	inlineSize: H,
+	minInlineSize: 0,
+	maxBlockSize: `calc(100dvh - 2 * ${L.space[4]})`,
+	overflowY: "auto",
+	overscrollBehavior: "contain",
+	fontSize: L.textSize.sm,
+	animation: `${Q} ${L.motion.duration.base} ${L.motion.easeStandard}`,
+	"&:focus-visible": n,
+	"&[data-presentation=\"sheet\"]": {
+		[K]: G,
+		position: "fixed",
+		insetInline: 0,
+		insetBlockEnd: 0,
+		inlineSize: "auto",
+		maxInlineSize: "none",
+		maxBlockSize: U,
+		paddingInline: L.space[3],
+		paddingBlockEnd: `calc(${L.space[3]} + env(safe-area-inset-bottom, 0px))`,
+		borderEndStartRadius: 0,
+		borderEndEndRadius: 0,
+		borderStartStartRadius: L.radius.lg,
+		borderStartEndRadius: L.radius.lg,
+		borderBlockEndWidth: 0,
+		translate: `0 var(${q}, 0px)`,
+		animation: `${$} ${L.motion.duration.slow} ${L.motion.easeStandard}`
+	},
+	[a]: {
+		animation: "none",
+		"&[data-presentation=\"sheet\"]": { animation: "none" }
+	},
+	[i]: { borderColor: "ButtonText" }
+}), be = t({
+	display: "flex",
+	justifyContent: "center",
+	paddingBlock: L.space[2],
+	touchAction: "none",
+	cursor: "grab",
+	"&::before": {
+		content: "\"\"",
+		inlineSize: L.space[10],
+		blockSize: L.space[1],
+		borderRadius: L.radius.full,
+		backgroundColor: L.color.borderControl
+	},
+	[a]: { cursor: "auto" },
+	[i]: { "&::before": { backgroundColor: "CanvasText" } }
+}), xe = t({
+	display: "flex",
+	alignItems: "flex-start",
+	gap: L.space[2]
+}), Se = t({
+	flex: 1,
+	minInlineSize: 0
+}), Ce = t({
+	appearance: "none",
+	boxSizing: "border-box",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	inlineSize: G,
+	blockSize: G,
+	border: `1px solid ${L.color.borderControl}`,
+	borderRadius: L.radius.full,
+	backgroundColor: "transparent",
+	color: L.color.text,
+	cursor: "pointer",
+	transitionProperty: "background-color",
+	transitionDuration: L.motion.duration.fast,
+	transitionTimingFunction: L.motion.easeStandard,
+	"& svg": {
+		inlineSize: L.space[4],
+		blockSize: L.space[4]
+	},
+	"&:hover": { backgroundColor: L.color.surfaceHover },
+	"&:focus-visible": n,
+	[a]: { transitionDuration: "0s" },
+	[i]: { borderColor: "ButtonText" }
+}), we = t({
+	display: "flex",
+	flexDirection: "column",
+	touchAction: "pan-y",
+	"&:focus-visible": r
+}), Te = t({
+	color: L.color.dangerText,
+	fontSize: L.textSize.sm,
+	"&:not(:empty)": {
+		marginBlockStart: L.space[1],
+		paddingBlock: L.space[2],
+		paddingInline: L.space[2],
+		borderBlockStart: `1px solid ${L.color.border}`
+	}
+}), Ee = t({
+	label: "user-menu-identity",
+	display: "flex",
+	alignItems: "center",
+	gap: L.space[3],
+	paddingBlock: L.space[2],
+	paddingInline: L.space[2]
+}), De = t({
+	display: "flex",
+	flexDirection: "column",
+	gap: L.space[1],
+	minInlineSize: 0
+}), Oe = t({
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+}), ke = t({
+	fontWeight: L.fontWeight.medium,
+	color: L.color.text
+}), Ae = t({
+	fontSize: L.textSize.xs,
+	color: L.color.textMuted
+}), je = t({ alignSelf: "flex-start" }), Me = t({
+	minBlockSize: `var(${K}, ${W})`,
+	gap: L.space[2],
+	lineHeight: L.lineHeight.base,
+	[i]: { "&[data-active]": {
+		outline: "2px solid Highlight",
+		outlineOffset: "-2px"
+	} }
+}), Ne = t({
+	flex: 1,
+	minInlineSize: 0,
+	overflowWrap: "anywhere"
+}), Pe = t({ marginInlineStart: "auto" }), Fe = t({ "&[aria-busy=\"true\"]": {
+	opacity: 1,
+	cursor: "progress"
+} }), Ie = t({
+	display: "flex",
+	flexDirection: "column",
+	gap: L.space[1],
+	paddingBlock: L.space[1]
+}), Le = t({
+	paddingInline: L.space[2],
+	fontSize: L.textSize.xs,
+	fontWeight: L.fontWeight.medium,
+	color: L.color.textMuted
+}), Re = t({
+	display: "flex",
+	gap: L.space[1]
+}), ze = t({
+	flex: "1 1 0",
+	minInlineSize: 0,
+	minBlockSize: `var(${K}, ${W})`,
+	justifyContent: "center",
+	textAlign: "center",
+	overflowWrap: "anywhere",
+	border: "1px solid transparent",
+	"&[aria-checked=\"true\"]": {
+		borderColor: L.color.borderControl,
+		backgroundColor: L.color.surfaceHover,
+		fontWeight: L.fontWeight.medium
+	},
+	[i]: {
+		"&[aria-checked=\"true\"]": {
+			borderColor: "Highlight",
+			borderWidth: "2px"
+		},
+		"&[data-active]": {
+			outline: "2px solid Highlight",
+			outlineOffset: "2px"
+		}
+	}
+}), Be = /* @__PURE__ */ R("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	strokeLinecap: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ R("path", { d: "M4 4l8 8M12 4l-8 8" })
+});
+function Ve({ user: e, compactBreakpoint: t, children: n }) {
+	let { open: r, refs: i, floatingContext: a, requestClose: o } = S(B, "Root"), s = a.elements.domReference?.ownerDocument.defaultView, c = me(s, t), l = N(), u = N(), [d, f] = I({
+		variant: "adaptive",
+		id: void 0
+	}), [p, m] = I(), [h, g] = I(!1), [_, v] = I(null), y = F(null), b = F(!1), x = F(!1), C = F(!1), w = fe(d.variant, c);
+	M(() => (x.current = !0, () => {
+		x.current = !1;
+	}), []), P(() => {
+		r && (C.current = w === "sheet");
+	}, [r, w]), M(() => {
+		!r && C.current && (C.current = !1, T(i.domReference.current));
+	}, [r, i]);
+	let E = A((e, t) => {
+		f((n) => n.variant === e && n.id === t ? n : {
+			variant: e,
+			id: t
+		});
+	}, []), D = A((e, t, n) => {
+		if (b.current) return;
+		let r = y.current, i = () => x.current && r !== null && y.current === r, a = () => {
+			i() && o(!0);
+		}, s = (e) => {
+			n?.(e), i() && r && v({
+				session: r,
+				message: t
+			});
+		};
+		v(null);
+		let c;
+		try {
+			c = e();
+		} catch (e) {
+			s(e);
+			return;
+		}
+		if (!de(c)) {
+			a();
+			return;
+		}
+		b.current = !0, g(!0);
+		let l = () => {
+			b.current = !1, x.current && g(!1);
+		};
+		Promise.resolve(c).then(() => {
+			l(), a();
+		}, (e) => {
+			l(), s(e);
+		});
+	}, [o]), O = te(() => ({
+		user: e,
+		compact: c,
+		presentation: w,
+		registerContent: E,
+		contentId: d.id ?? l,
+		menuId: u,
+		identityNameId: p,
+		setIdentityNameId: m,
+		sessionRef: y,
+		signOutPending: h,
+		signOutFailure: _,
+		runSignOut: D
+	}), [
+		e,
+		c,
+		w,
+		E,
+		d.id,
+		l,
+		u,
+		p,
+		h,
+		_,
+		D
+	]);
+	return /* @__PURE__ */ R(X.Provider, {
+		value: O,
+		children: n
+	});
+}
+function He({ user: e, open: t, defaultOpen: n = !1, onOpenChange: r, placement: i = "bottom-end", compactBreakpoint: a = V, children: o }) {
+	return /* @__PURE__ */ R(b, {
+		open: t,
+		defaultOpen: n,
+		onOpenChange: r,
+		placement: i,
+		children: /* @__PURE__ */ R(Ve, {
+			user: e,
+			compactBreakpoint: Number.isFinite(a) && a > 0 ? a : V,
+			children: o
+		})
+	});
+}
+He.displayName = "UserMenu";
+function Ue({ ref: e, showName: t = !1, status: n, statusLabel: r, "aria-describedby": i, className: a, sx: s, ...c }) {
+	let { user: u, compact: d, presentation: p, contentId: m, menuId: h } = Z("Trigger"), { open: g, refs: v, getReferenceProps: y } = S(B, "Trigger"), b = N(), C = ae([v.setReference, e]), w = n !== void 0, T = (e) => {
+		let t = y(e), n = p === "sheet";
+		return {
+			...t,
+			"aria-haspopup": n ? "dialog" : "menu",
+			"aria-controls": g ? n ? m : h : void 0
+		};
+	};
+	return /* @__PURE__ */ R(o, {
+		className: a,
+		styles: ge,
+		sx: s,
+		children: (e) => /* @__PURE__ */ z("button", {
+			type: "button",
+			..._(c, T),
+			ref: C,
+			"aria-describedby": x(i, w ? b : void 0),
+			"data-ui": "user-menu-trigger",
+			className: e,
+			children: [
+				/* @__PURE__ */ R(f, {
+					"aria-hidden": !0,
+					name: u.name,
+					src: u.avatarSrc,
+					status: n,
+					statusLabel: r
+				}),
+				t && !d && /* @__PURE__ */ R("span", {
+					css: _e,
+					children: u.name
+				}),
+				w && /* @__PURE__ */ R("span", {
+					id: b,
+					css: l,
+					children: r ?? n
+				})
+			]
+		})
+	});
+}
+Ue.displayName = "UserMenu.Trigger";
+function We({ variant: e = "adaptive", id: t, ...n }) {
+	let { registerContent: r } = Z("Content"), { open: i } = S(B, "Content");
+	return P(() => {
+		r(e, t);
+	}, [
+		r,
+		e,
+		t
+	]), i ? /* @__PURE__ */ R(Ge, {
+		...n,
+		variant: e
+	}) : null;
+}
+We.displayName = "UserMenu.Content";
+function Ge({ ref: e, variant: t, closeLabel: n, slotProps: r, style: i, dir: a, className: s, sx: c, children: l, "aria-label": u, "aria-labelledby": d, "aria-describedby": f, ...g }) {
+	let { compact: _, contentId: v, menuId: y, identityNameId: b, sessionRef: w, signOutFailure: T } = Z("Content"), { refs: E, floatingContext: D, floatingStyles: O, getFloatingProps: ee, requestClose: k } = S(B, "Content"), A = fe(t, _) === "sheet", [j] = I(() => ({})), [N, te] = I(null), [ne, L] = I(null), [re, oe] = I(), V = F(null), H = F(null), U = F(null), W = ae([te, e]);
+	P(() => (w.current = j, () => {
+		w.current === j && (w.current = null);
+	}), [w, j]), P(() => {
+		let e = E.domReference.current;
+		e && oe(getComputedStyle(e).direction === "rtl" ? "rtl" : "ltr");
+	}, [E]), p(A, () => E.floating.current?.ownerDocument), M(() => {
+		N && !N.querySelector("[role^=\"menuitem\"]:not([aria-disabled=\"true\"]), [aria-busy=\"true\"]") && (A ? H.current : V.current)?.focus({ preventScroll: !0 });
+	}, [N]);
+	let { role: G, id: K, "aria-labelledby": J, "aria-orientation": le, ...Y } = ee(g), X = (e) => d === void 0 ? u === void 0 ? e : void 0 : x(d, e), de = A ? {
+		role: "dialog",
+		"aria-modal": !0,
+		"aria-label": u,
+		"aria-labelledby": X(b ?? J),
+		"aria-describedby": f
+	} : {}, pe = A ? { "aria-labelledby": J } : {
+		"aria-label": u,
+		"aria-labelledby": X(J),
+		"aria-describedby": f
+	}, me = () => N?.ownerDocument.defaultView, Q = (e) => {
+		e === null ? N?.style.removeProperty(q) : N?.style.setProperty(q, `${e}px`);
+	}, $ = () => {
+		U.current = null, Q(null);
+	}, he = {
+		onPointerDown: (e) => {
+			e.isPrimary && e.button === 0 && !me()?.matchMedia(ce).matches && (e.currentTarget.setPointerCapture?.(e.pointerId), U.current = {
+				pointerId: e.pointerId,
+				startY: e.clientY,
+				distance: 0
+			});
+		},
+		onPointerMove: (e) => {
+			let t = U.current;
+			t?.pointerId === e.pointerId && (t.distance = Math.max(0, e.clientY - t.startY), Q(t.distance));
+		},
+		onPointerUp: (e) => {
+			let t = U.current;
+			t?.pointerId === e.pointerId && ($(), t.distance >= se && k(!0));
+		},
+		onPointerCancel: $,
+		onLostPointerCapture: (e) => {
+			U.current?.pointerId === e.pointerId && $();
+		}
+	}, ge = T?.session === j ? T.message : null;
+	return /* @__PURE__ */ R(h, { children: /* @__PURE__ */ R(ie, {
+		context: D,
+		modal: A,
+		outsideElementsInert: A,
+		initialFocus: -1,
+		returnFocus: !1,
+		restoreFocus: !0,
+		children: /* @__PURE__ */ z("div", {
+			ref: E.setFloating,
+			"data-ui": "user-menu-layer",
+			style: A ? void 0 : O,
+			children: [A && /* @__PURE__ */ R("div", {
+				"aria-hidden": "true",
+				"data-ui": "user-menu-scrim",
+				css: ve,
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: () => k(!0)
+			}), /* @__PURE__ */ R(o, {
+				className: s,
+				styles: [m, ye],
+				sx: c,
+				children: (e) => /* @__PURE__ */ z("div", {
+					...Y,
+					...de,
+					ref: W,
+					id: v,
+					dir: a ?? re,
+					"data-ui": "user-menu",
+					"data-presentation": A ? "sheet" : "menu",
+					style: i,
+					className: e,
+					children: [
+						A && /* @__PURE__ */ R("div", {
+							...he,
+							"aria-hidden": "true",
+							"data-ui": "user-menu-handle",
+							className: r?.handle?.className,
+							css: [be, r?.handle?.css]
+						}),
+						/* @__PURE__ */ z("div", {
+							css: xe,
+							children: [/* @__PURE__ */ R("div", {
+								ref: L,
+								css: Se
+							}), A && /* @__PURE__ */ R("button", {
+								type: "button",
+								ref: H,
+								"aria-label": n,
+								"data-ui": "user-menu-close",
+								onClick: () => k(!0),
+								className: r?.close?.className,
+								css: [Ce, r?.close?.css],
+								children: Be
+							})]
+						}),
+						/* @__PURE__ */ R("div", {
+							...pe,
+							ref: V,
+							id: y,
+							role: G,
+							"aria-orientation": le,
+							tabIndex: -1,
+							"data-ui": "user-menu-list",
+							className: r?.menu?.className,
+							css: [we, r?.menu?.css],
+							children: /* @__PURE__ */ R(ue.Provider, {
+								value: ne,
+								children: /* @__PURE__ */ R(C, {
+									family: B,
+									children: l
+								})
+							})
+						}),
+						/* @__PURE__ */ R("div", {
+							role: "alert",
+							"data-ui": "user-menu-error",
+							css: Te,
+							children: ge
+						})
+					]
+				})
+			})]
+		})
+	}) });
+}
+function Ke({ ref: e, className: t, sx: n, ...r }) {
+	let { user: i, setIdentityNameId: a } = Z("Identity"), s = j(ue), c = N();
+	if (P(() => (a(c), () => a(void 0)), [c, a]), s === void 0) throw Error(`${B}.Identity must be rendered inside <${B}.Content>.`);
+	return s === null ? null : oe(/* @__PURE__ */ R(o, {
+		className: t,
+		styles: Ee,
+		sx: n,
+		children: (t) => /* @__PURE__ */ z("div", {
+			...r,
+			ref: e,
+			"data-ui": "user-menu-identity",
+			className: t,
+			children: [/* @__PURE__ */ R(f, {
+				"aria-hidden": !0,
+				name: i.name,
+				src: i.avatarSrc,
+				size: "lg"
+			}), /* @__PURE__ */ z("div", {
+				css: De,
+				children: [
+					/* @__PURE__ */ R("span", {
+						id: c,
+						css: [Oe, ke],
+						children: i.name
+					}),
+					/* @__PURE__ */ R("span", {
+						css: [Oe, Ae],
+						children: i.email
+					}),
+					u(i.plan) && i.plan !== "" && /* @__PURE__ */ R(O, {
+						tone: "accent",
+						css: je,
+						children: i.plan
+					})
+				]
+			})]
+		})
+	}), s);
+}
+Ke.displayName = "UserMenu.Identity";
+var qe = (e) => u(e) && e !== "";
+function Je({ leading: e, keys: t, children: n }) {
+	return /* @__PURE__ */ z(re, { children: [
+		qe(e) && /* @__PURE__ */ R("span", {
+			css: d,
+			"aria-hidden": "true",
+			"data-ui": "user-menu-item-icon",
+			children: e
+		}),
+		qe(n) && /* @__PURE__ */ R("span", {
+			css: Ne,
+			children: n
+		}),
+		t !== void 0 && t.length > 0 && /* @__PURE__ */ R(D.Group, {
+			"aria-hidden": "true",
+			css: Pe,
+			children: t.map((e) => /* @__PURE__ */ R(D, { children: e }, e))
+		})
+	] });
+}
+function Ye({ tone: e = "neutral", icon: t, keys: n, children: r, ...i }) {
+	return Z("Item"), /* @__PURE__ */ R(g, {
+		...i,
+		part: "Item",
+		family: B,
+		marker: "user-menu-item",
+		styles: [
+			E,
+			Me,
+			v[e]
+		],
+		children: /* @__PURE__ */ R(Je, {
+			leading: t,
+			keys: n,
+			children: r
+		})
+	});
+}
+Ye.displayName = "UserMenu.Item";
+function Xe({ part: e, marker: t, options: n, fallback: r, value: i, defaultValue: a = r, onValueChange: l, labels: u, slotProps: d, ref: f, onKeyDown: p, "aria-label": m, "aria-labelledby": h, className: _, sx: v, ...y }) {
+	Z(e);
+	let [b, S] = c(i, a, l), C = N(), w = h === void 0 ? m === void 0 ? C : void 0 : x(h, C), T = (e) => {
+		p?.(e), !(e.defaultPrevented || e.key !== "ArrowLeft" && e.key !== "ArrowRight") && s(e, e.currentTarget, "horizontal", Y);
+	};
+	return /* @__PURE__ */ R(o, {
+		className: _,
+		styles: Ie,
+		sx: v,
+		children: (r) => /* @__PURE__ */ z("div", {
+			...y,
+			ref: f,
+			role: "group",
+			"aria-label": m,
+			"aria-labelledby": w,
+			onKeyDown: T,
+			"data-ui": t,
+			className: r,
+			children: [/* @__PURE__ */ R("span", {
+				id: C,
+				"data-ui": "user-menu-group-label",
+				className: d?.label?.className,
+				css: [Le, d?.label?.css],
+				children: u.group
+			}), /* @__PURE__ */ R("div", {
+				css: Re,
+				children: n.map((t) => /* @__PURE__ */ R(g, {
+					"aria-checked": b === t,
+					"data-value": t,
+					onSelect: () => S(t),
+					itemRole: "menuitemradio",
+					closeOnSelect: !1,
+					part: e,
+					family: B,
+					marker: "user-menu-option",
+					className: d?.option?.className,
+					styles: [
+						E,
+						ze,
+						d?.option?.css
+					],
+					children: u[t]
+				}, t))
+			})]
+		})
+	});
+}
+function Ze(e) {
+	return /* @__PURE__ */ R(Xe, {
+		...e,
+		part: "ThemeGroup",
+		marker: "user-menu-theme-group",
+		options: J,
+		fallback: "system"
+	});
+}
+Ze.displayName = "UserMenu.ThemeGroup";
+function Qe(e) {
+	return /* @__PURE__ */ R(Xe, {
+		...e,
+		part: "StatusGroup",
+		marker: "user-menu-status-group",
+		options: le,
+		fallback: "available"
+	});
+}
+Qe.displayName = "UserMenu.StatusGroup";
+function $e({ onSignOut: e, pendingLabel: t, errorMessage: n, onSignOutError: r, tone: i = "neutral", icon: a, keys: o, children: s, ...c }) {
+	let { signOutPending: l, runSignOut: u } = Z("SignOut");
+	return /* @__PURE__ */ R(g, {
+		...c,
+		onSelect: () => u(e, n, r),
+		busy: l,
+		closeOnSelect: !1,
+		part: "SignOut",
+		family: B,
+		marker: "user-menu-sign-out",
+		styles: [
+			E,
+			Me,
+			v[i],
+			Fe
+		],
+		children: /* @__PURE__ */ R(Je, {
+			leading: l ? /* @__PURE__ */ R(ee, {
+				"aria-hidden": !0,
+				size: "sm"
+			}) : a,
+			keys: o,
+			children: l ? t : s
+		})
+	});
+}
+$e.displayName = "UserMenu.SignOut";
+function et(e) {
+	return Z("Separator"), /* @__PURE__ */ R(w, {
+		...e,
+		marker: "user-menu-separator",
+		styles: y
+	});
+}
+et.displayName = "UserMenu.Separator";
+var tt = Object.assign(He, {
+	Trigger: Ue,
+	Content: We,
+	Identity: Ke,
+	Item: Ye,
+	ThemeGroup: Ze,
+	StatusGroup: Qe,
+	SignOut: $e,
+	Separator: et
+});
+//#endregion
+export { tt as t };