@jfrader/ui 0.5.0 → 0.6.0

package/dist/{announcement-bar-B58xempt.js → announcement-bar-B5J33QUh.js}

@@ -1,18 +1,19 @@
 'use client';
-import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
-import { n as r } from "./focus-ring-BK5W5_NY.js";
-import { n as i, r as a } from "./media-8yrN85VT.js";
-import { t as ee } from "./use-latest-callback-cj1OOQL6.js";
-import { t as o } from "./use-controlled-state-DpeVQZNR.js";
-import { t as s } from "./renderable-DzcIj1Lo.js";
-import { t as c } from "./button-C92uYFJW.js";
-import { t as te } from "./countdown-Dp_TD1VP.js";
-import { useEffect as l, useId as ne, useRef as u, useState as d } from "react";
-import { vars as f } from "@jfrader/tokens/vars";
-import { Fragment as p, jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
-import { useMergeRefs as re } from "@floating-ui/react";
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as ee } from "./sx-BJXJ2xJK.js";
+import { t as te } from "./use-latest-callback-cj1OOQL6.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./renderable-DzcIj1Lo.js";
+import { t as ne } from "./button-C6OV0C7J.js";
+import { t as re } from "./countdown-EcpV6rXy.js";
+import { useEffect as s, useId as ie, useRef as c, useState as l } from "react";
+import { vars as u } from "@jfrader/tokens/vars";
+import { Fragment as d, jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as ae } from "@floating-ui/react";
 //#region src/components/announcement-bar/announcement-bar.tsx
-var g = 6e3, _ = "35rem", v = "3px", y = 2147483647, ie = {
+var m = 6e3, h = "35rem", g = "3px", _ = 2147483647, oe = {
 	previous: "Previous announcement",
 	next: "Next announcement",
 	pause: "Pause announcements",
@@ -20,144 +21,144 @@ var g = 6e3, _ = "35rem", v = "3px", y = 2147483647, ie = {
 	dismiss: "Dismiss announcement",
 	slide: "slide",
 	carousel: "carousel"
-}, b = (e, t) => t && Number.isFinite(e) ? (Math.trunc(e) % t + t) % t : 0, x = (e) => s(e) && e !== "", S = e({
+}, v = (e, t) => t && Number.isFinite(e) ? (Math.trunc(e) % t + t) % t : 0, se = (e) => o(e) && e !== "", ce = e({
 	from: {
 		opacity: 0,
-		transform: `translateY(${f.space[2]})`
+		transform: `translateY(${u.space[2]})`
 	},
 	to: {
 		opacity: 1,
 		transform: "translateY(0)"
 	}
-}), C = e({
+}), y = e({
 	from: { strokeDashoffset: 0 },
 	to: { strokeDashoffset: 100 }
-}), ae = t({
+}), le = t({
 	display: "grid",
 	gridTemplateRows: "1fr",
 	opacity: 1,
-	backgroundColor: f.color.surfaceRaised,
-	color: f.color.text,
-	fontFamily: f.font.sans,
-	fontSize: f.textSize.sm,
-	lineHeight: f.lineHeight.base,
-	borderBlock: `1px solid ${f.color.borderControl}`,
-	borderInlineStart: `${v} solid var(--announcement-tone)`,
+	backgroundColor: u.color.surfaceRaised,
+	color: u.color.text,
+	fontFamily: u.font.sans,
+	fontSize: u.textSize.sm,
+	lineHeight: u.lineHeight.base,
+	borderBlock: `1px solid ${u.color.borderControl}`,
+	borderInlineStart: `${g} solid var(--announcement-tone)`,
 	transitionProperty: "grid-template-rows, opacity",
-	transitionDuration: f.motion.duration.slow,
-	transitionTimingFunction: f.motion.easeStandard,
+	transitionDuration: u.motion.duration.slow,
+	transitionTimingFunction: u.motion.easeStandard,
 	"&[data-state=\"closed\"]": {
 		gridTemplateRows: "0fr",
 		opacity: 0
 	},
-	[a]: { transitionDuration: "0s" },
-	[i]: {
+	[i]: { transitionDuration: "0s" },
+	[r]: {
 		backgroundColor: "Canvas",
 		color: "CanvasText",
 		borderColor: "ButtonText"
 	}
-}), oe = t({
-	backgroundColor: f.color.text,
-	color: f.color.bg,
+}), ue = t({
+	backgroundColor: u.color.text,
+	color: u.color.bg,
 	"--announcement-tone": "currentColor",
 	borderColor: "currentColor",
-	[i]: {
+	[r]: {
 		backgroundColor: "Canvas",
 		color: "CanvasText"
 	}
-}), se = {
-	neutral: t({ "--announcement-tone": f.color.borderControl }),
-	info: t({ "--announcement-tone": f.color.info }),
-	warning: t({ "--announcement-tone": f.color.warning }),
-	danger: t({ "--announcement-tone": f.color.dangerText })
-}, ce = t({
+}), de = {
+	neutral: t({ "--announcement-tone": u.color.borderControl }),
+	info: t({ "--announcement-tone": u.color.info }),
+	warning: t({ "--announcement-tone": u.color.warning }),
+	danger: t({ "--announcement-tone": u.color.dangerText })
+}, fe = t({
 	minBlockSize: 0,
 	"&[data-closing=\"true\"]": { overflow: "hidden" }
-}), w = f.space[3], T = `(${_} - ${v} - 2 * ${f.space[4]})`, le = t({
+}), b = u.space[3], x = `(${h} - ${g} - 2 * ${u.space[4]})`, pe = t({
 	display: "flex",
 	flexWrap: "wrap",
-	gap: w,
+	gap: b,
 	alignItems: "center",
-	padding: f.space[4]
-}), ue = t({
+	padding: u.space[4]
+}), me = t({
 	flex: "0 1 auto",
-	minInlineSize: `min(100%, calc((${T} - 100%) * 999))`
-}), de = t({
+	minInlineSize: `min(100%, calc((${x} - 100%) * 999))`
+}), he = t({
 	display: "flex",
 	flexWrap: "wrap",
 	alignItems: "center",
-	gap: f.space[3],
+	gap: u.space[3],
 	minInlineSize: 0,
-	animation: `${S} ${f.motion.duration.base} ${f.motion.easeStandard}`,
-	[a]: { animation: "none" }
-}), fe = t({
+	animation: `${ce} ${u.motion.duration.base} ${u.motion.easeStandard}`,
+	[i]: { animation: "none" }
+}), ge = t({
 	overflowWrap: "anywhere",
 	minInlineSize: 0
-}), pe = t({
+}), S = t({
 	display: "inline-block",
 	"&:dir(rtl)": { transform: "scaleX(-1)" }
-}), me = t({
+}), C = t({
 	flex: "1 1 0",
 	display: "flex",
 	flexWrap: "wrap",
-	gap: f.space[2],
+	gap: u.space[2],
 	justifyContent: "end",
 	minInlineSize: "fit-content",
-	maxInlineSize: `calc((100% - ${T}) * 999)`,
+	maxInlineSize: `calc((100% - ${x}) * 999)`,
 	"&:empty": {
-		flexBasis: w,
-		marginInline: `calc(-0.5 * ${w})`
+		flexBasis: b,
+		marginInline: `calc(-0.5 * ${b})`
 	}
-}), he = t({
-	minBlockSize: f.space[8],
+}), w = t({
+	minBlockSize: u.space[8],
 	blockSize: "auto",
-	minInlineSize: f.space[8],
-	paddingBlock: f.space[1],
-	paddingInline: f.space[2],
+	minInlineSize: u.space[8],
+	paddingBlock: u.space[1],
+	paddingInline: u.space[2],
 	whiteSpace: "normal",
 	color: "inherit",
 	backgroundColor: "transparent",
 	borderColor: "currentColor",
-	borderRadius: f.radius.sm,
+	borderRadius: u.radius.sm,
 	"&:hover:not(:disabled):not([aria-disabled=\"true\"])": {
 		backgroundColor: "transparent",
 		color: "inherit"
 	},
-	[i]: {
+	[r]: {
 		borderColor: "ButtonText",
 		color: "ButtonText"
 	}
-}), ge = t({
-	...r,
+}), _e = t({
+	...n,
 	outline: "none",
 	display: "inline-flex",
 	alignItems: "center",
 	boxSizing: "border-box",
-	minBlockSize: f.space[8],
-	padding: f.space[2],
+	minBlockSize: u.space[8],
+	padding: u.space[2],
 	color: "inherit",
-	fontWeight: f.fontWeight.medium,
+	fontWeight: u.fontWeight.medium,
 	overflowWrap: "anywhere",
-	"&:focus-visible": r
-}), _e = t({
+	"&:focus-visible": n
+}), ve = t({
 	inlineSize: "1em",
 	blockSize: "1em",
 	fill: "none",
 	stroke: "currentColor",
 	strokeWidth: 2,
-	animationName: `${C}`,
+	animationName: `${y}`,
 	animationDuration: "var(--announcement-interval)",
 	animationTimingFunction: "linear",
 	animationIterationCount: "infinite",
-	[a]: { display: "none" },
-	[i]: { display: "none" }
+	[i]: { display: "none" },
+	[r]: { display: "none" }
 });
-function E({ ref: e, messages: t, open: r, defaultOpen: i = !0, onOpenChange: a, value: s, defaultValue: f = 0, onValueChange: _, autoPlay: v = !1, paused: S, defaultPaused: C = !1, onPausedChange: w, interval: T = g, controls: E = !0, dismissible: ve = !0, variant: D = "subtle", tone: O = "neutral", label: ye = "Announcements", live: be = "off", locale: k, labels: xe, getMessageLabel: Se, onAction: Ce, onCountdownEnd: we, dismissFocusRef: Te, slotProps: A, className: Ee, sx: De, ...j }) {
-	let [M, Oe] = o(r, i, a), [ke, N] = o(s === void 0 ? void 0 : b(s, t.length), b(f, t.length), _), [Ae, P] = o(S, C, w), F = b(ke ?? 0, t.length), I = Number.isFinite(T) && T > 0 ? T : g, L = u(null), je = re([L, e]), [Me, R] = d(!1), [z, B] = d(!1), [Ne, Pe] = d(!1), [V, Fe] = d(!0), [H, U] = d(!!M), W = u(!1), G = u(/* @__PURE__ */ new Map()), K = ne(), q = {
-		...ie,
-		...xe
-	}, J = t.length > 1, Y = v && J && !!M && !Ae && !Me && !z && !Ne && !V, X = !!Ae || z || V, Z = u({ remaining: I }), [Ie, Le] = d(0), [Re, ze] = d(0), Be = ee(() => N(b(F + 1, t.length))), Ve = ee(we);
-	if (l(() => {
+function T({ ref: e, messages: t, open: n, defaultOpen: r = !0, onOpenChange: i, value: o, defaultValue: u = 0, onValueChange: h, autoPlay: g = !1, paused: ce, defaultPaused: y = !1, onPausedChange: b, interval: x = m, controls: T = !0, dismissible: ye = !0, variant: E = "subtle", tone: D = "neutral", label: be = "Announcements", live: xe = "off", locale: O, labels: Se, getMessageLabel: Ce, onAction: we, onCountdownEnd: Te, dismissFocusRef: k, slotProps: A, className: Ee, sx: De, ...j }) {
+	let [M, Oe] = a(n, r, i), [ke, N] = a(o === void 0 ? void 0 : v(o, t.length), v(u, t.length), h), [Ae, P] = a(ce, y, b), F = v(ke ?? 0, t.length), I = Number.isFinite(x) && x > 0 ? x : m, L = c(null), je = ae([L, e]), [Me, R] = l(!1), [z, B] = l(!1), [Ne, Pe] = l(!1), [V, Fe] = l(!0), [H, U] = l(!!M), W = c(!1), G = c(/* @__PURE__ */ new Map()), K = ie(), q = {
+		...oe,
+		...Se
+	}, J = t.length > 1, Y = g && J && !!M && !Ae && !Me && !z && !Ne && !V, X = !!Ae || z || V, Z = c({ remaining: I }), [Ie, Le] = l(0), [Re, ze] = l(0), Be = te(() => N(v(F + 1, t.length))), Ve = te(Te);
+	if (s(() => {
 		if (!M) return;
 		let e = L.current?.ownerDocument, t = e?.defaultView;
 		if (!e || !t) return;
@@ -169,20 +170,20 @@ function E({ ref: e, messages: t, open: r, defaultOpen: i = !0, onOpenChange: a,
 		M,
 		H,
 		t.length === 0
-	]), l(() => {
+	]), s(() => {
 		Z.current.remaining = I, Le((e) => e + 1);
 	}, [
 		F,
 		I,
 		t[F]?.id,
 		Re
-	]), l(() => {
+	]), s(() => {
 		if (!Y) return;
 		let e = Date.now() + Z.current.remaining, t, n = () => {
 			let r = Math.max(0, e - Date.now());
-			r > 0 ? t = setTimeout(n, Math.min(r, y)) : (Z.current.remaining = I, e = Date.now() + I, Be(), Le((e) => e + 1), t = setTimeout(n, Math.min(I, y)));
+			r > 0 ? t = setTimeout(n, Math.min(r, _)) : (Z.current.remaining = I, e = Date.now() + I, Be(), Le((e) => e + 1), t = setTimeout(n, Math.min(I, _)));
 		};
-		return t = setTimeout(n, Math.min(Z.current.remaining, y)), () => {
+		return t = setTimeout(n, Math.min(Z.current.remaining, _)), () => {
 			clearTimeout(t), Z.current.remaining = Math.max(0, e - Date.now());
 		};
 	}, [
@@ -192,14 +193,14 @@ function E({ ref: e, messages: t, open: r, defaultOpen: i = !0, onOpenChange: a,
 		Be,
 		t[F]?.id,
 		Re
-	]), l(() => {
+	]), s(() => {
 		if (M) {
 			U(!0);
 			return;
 		}
 		let e = L.current;
 		if (W.current && e) {
-			let t = Te?.current;
+			let t = k?.current;
 			t?.isConnected && t.ownerDocument === e.ownerDocument && t.focus();
 		}
 		if (W.current = !1, !e || V) {
@@ -211,23 +212,23 @@ function E({ ref: e, messages: t, open: r, defaultOpen: i = !0, onOpenChange: a,
 	}, [
 		M,
 		V,
-		Te
+		k
 	]), !t.length || !M && !H) return null;
-	let Q = t[F], { css: He, ...Ue } = A?.root ?? {}, We = new Intl.NumberFormat(k), Ge = Se?.(F, t.length) ?? `${We.format(F + 1)} of ${We.format(t.length)}`, Ke = (e) => {
-		A?.action?.onClick?.(e), e.defaultPrevented || Q.action?.onClick?.(e), e.defaultPrevented || Ce?.(Q);
+	let Q = t[F], { css: He, ...Ue } = A?.root ?? {}, We = new Intl.NumberFormat(O), Ge = Ce?.(F, t.length) ?? `${We.format(F + 1)} of ${We.format(t.length)}`, Ke = (e) => {
+		A?.action?.onClick?.(e), e.defaultPrevented || Q.action?.onClick?.(e), e.defaultPrevented || we?.(Q);
 	}, qe = (e) => {
-		ze((e) => e + 1), N(b(F + e, t.length));
+		ze((e) => e + 1), N(v(F + e, t.length));
 	}, $ = (e, t, n, r) => {
 		let i = A?.[e];
-		return /* @__PURE__ */ m(c, {
+		return /* @__PURE__ */ f(ne, {
 			...i,
 			type: "button",
-			render: (t) => /* @__PURE__ */ m("button", {
+			render: (t) => /* @__PURE__ */ f("button", {
 				...t,
 				"data-ui": `announcement-bar-${e}`
 			}),
 			size: "sm",
-			css: [he, i?.css],
+			css: [w, i?.css],
 			"aria-label": i?.["aria-label"] ?? t,
 			"aria-controls": e === "previous" || e === "next" ? K : void 0,
 			"aria-pressed": void 0,
@@ -237,16 +238,16 @@ function E({ ref: e, messages: t, open: r, defaultOpen: i = !0, onOpenChange: a,
 			children: n
 		});
 	};
-	return /* @__PURE__ */ m(n, {
+	return /* @__PURE__ */ f(ee, {
 		className: [Ee, A?.root?.className].filter(Boolean).join(" ") || void 0,
 		styles: [
-			ae,
-			se[O],
-			D === "inverted" && oe,
+			le,
+			de[D],
+			E === "inverted" && ue,
 			A?.root?.css
 		],
 		sx: De,
-		children: (e) => /* @__PURE__ */ m("section", {
+		children: (e) => /* @__PURE__ */ f("section", {
 			...Ue,
 			...j,
 			ref: je,
@@ -254,11 +255,11 @@ function E({ ref: e, messages: t, open: r, defaultOpen: i = !0, onOpenChange: a,
 			"data-ui": "announcement-bar",
 			"data-state": M ? "open" : "closed",
 			"data-running": Y,
-			"data-variant": D,
-			"data-tone": O,
+			"data-variant": E,
+			"data-tone": D,
 			role: "region",
 			inert: !M || void 0,
-			"aria-label": j["aria-label"] ?? A?.root?.["aria-label"] ?? (j["aria-labelledby"] ?? A?.root?.["aria-labelledby"] ? void 0 : ye),
+			"aria-label": j["aria-label"] ?? A?.root?.["aria-label"] ?? (j["aria-labelledby"] ?? A?.root?.["aria-labelledby"] ? void 0 : be),
 			"aria-labelledby": [A?.root?.["aria-labelledby"], j["aria-labelledby"]].filter(Boolean).join(" ") || void 0,
 			"aria-describedby": [A?.root?.["aria-describedby"], j["aria-describedby"]].filter(Boolean).join(" ") || void 0,
 			"aria-roledescription": J ? q.carousel : void 0,
@@ -269,28 +270,28 @@ function E({ ref: e, messages: t, open: r, defaultOpen: i = !0, onOpenChange: a,
 				A?.root?.onMouseLeave?.(e), j.onMouseLeave?.(e), R(!1);
 			},
 			onFocusCapture: (e) => {
-				if (A?.root?.onFocusCapture?.(e), j.onFocusCapture?.(e), v && J && !z) {
+				if (A?.root?.onFocusCapture?.(e), j.onFocusCapture?.(e), g && J && !z) {
 					let t = !e.currentTarget.contains(e.relatedTarget), n = Y && e.target?.closest?.("[data-ui=\"announcement-bar-content\"]") != null;
 					(t || n) && (B(!0), P(!0));
 				}
 			},
-			children: /* @__PURE__ */ m("div", {
-				css: ce,
+			children: /* @__PURE__ */ f("div", {
+				css: fe,
 				"data-closing": !M,
-				children: /* @__PURE__ */ h("div", {
-					css: le,
+				children: /* @__PURE__ */ p("div", {
+					css: pe,
 					children: [
-						/* @__PURE__ */ m("div", {
-							css: me,
-							children: v && J && $("rotation", X ? q.resume : q.pause, /* @__PURE__ */ h(p, { children: [X ? q.resume : q.pause, /* @__PURE__ */ m("svg", {
+						/* @__PURE__ */ f("div", {
+							css: C,
+							children: g && J && $("rotation", X ? q.resume : q.pause, /* @__PURE__ */ p(d, { children: [X ? q.resume : q.pause, /* @__PURE__ */ f("svg", {
 								"aria-hidden": "true",
 								viewBox: "0 0 36 36",
-								css: _e,
+								css: ve,
 								style: {
 									"--announcement-interval": `${I}ms`,
 									animationPlayState: Y ? "running" : "paused"
 								},
-								children: /* @__PURE__ */ m("circle", {
+								children: /* @__PURE__ */ f("circle", {
 									cx: "18",
 									cy: "18",
 									r: "15",
@@ -301,70 +302,70 @@ function E({ ref: e, messages: t, open: r, defaultOpen: i = !0, onOpenChange: a,
 								X ? (B(!1), P(!1)) : P(!0);
 							})
 						}),
-						/* @__PURE__ */ m("div", {
+						/* @__PURE__ */ f("div", {
 							...A?.content,
 							id: K,
 							"data-ui": "announcement-bar-content",
-							css: [ue, A?.content?.css],
+							css: [me, A?.content?.css],
 							"aria-live": "off",
-							children: /* @__PURE__ */ h("div", {
+							children: /* @__PURE__ */ p("div", {
 								role: "group",
 								"aria-roledescription": J ? q.slide : void 0,
 								"aria-label": J ? Ge : void 0,
-								css: de,
+								css: he,
 								children: [
-									x(Q.message) && /* @__PURE__ */ m("span", {
+									se(Q.message) && /* @__PURE__ */ f("span", {
 										...A?.message,
 										"data-ui": "announcement-bar-message",
-										css: [fe, A?.message?.css],
-										"aria-live": Y ? "off" : be,
+										css: [ge, A?.message?.css],
+										"aria-live": Y ? "off" : xe,
 										"aria-atomic": "true",
 										children: Q.message
 									}),
-									M && Q.countdown && /* @__PURE__ */ m(te, {
+									M && Q.countdown && /* @__PURE__ */ f(re, {
 										...A?.countdown,
 										css: A?.countdown?.css,
 										...Q.countdown,
 										variant: "compact",
-										locale: k,
+										locale: O,
 										announceCompletion: !1,
 										onComplete: (e) => {
 											let t = G.current.get(Q.id) ?? /* @__PURE__ */ new Set();
 											t.has(e) || (t.add(e), G.current.set(Q.id, t), Ve(Q));
 										}
 									}),
-									Q.action && x(Q.action.label) && (Q.action.href === void 0 ? /* @__PURE__ */ m(c, {
+									Q.action && se(Q.action.label) && (Q.action.href === void 0 ? /* @__PURE__ */ f(ne, {
 										...A?.action,
 										type: "button",
-										render: (e) => /* @__PURE__ */ m("button", {
+										render: (e) => /* @__PURE__ */ f("button", {
 											...e,
 											"data-ui": "announcement-bar-action"
 										}),
-										css: [he, A?.action?.css],
+										css: [w, A?.action?.css],
 										onClick: Ke,
 										children: Q.action.label
-									}) : /* @__PURE__ */ m("a", {
+									}) : /* @__PURE__ */ f("a", {
 										...A?.action,
 										href: Q.action.href,
 										"data-ui": "announcement-bar-action",
-										css: [ge, A?.action?.css],
+										css: [_e, A?.action?.css],
 										onClick: Ke,
 										children: Q.action.label
 									}))
 								]
 							}, Q.id)
 						}),
-						/* @__PURE__ */ h("div", {
-							css: me,
-							children: [J && (E || v) && /* @__PURE__ */ h(p, { children: [$("previous", q.previous, /* @__PURE__ */ m("span", {
+						/* @__PURE__ */ p("div", {
+							css: C,
+							children: [J && (T || g) && /* @__PURE__ */ p(d, { children: [$("previous", q.previous, /* @__PURE__ */ f("span", {
 								"aria-hidden": "true",
-								css: pe,
+								css: S,
 								children: "‹"
-							}), () => qe(-1)), $("next", q.next, /* @__PURE__ */ m("span", {
+							}), () => qe(-1)), $("next", q.next, /* @__PURE__ */ f("span", {
 								"aria-hidden": "true",
-								css: pe,
+								css: S,
 								children: "›"
-							}), () => qe(1))] }), ve && $("dismiss", q.dismiss, /* @__PURE__ */ m("span", {
+							}), () => qe(1))] }), ye && $("dismiss", q.dismiss, /* @__PURE__ */ f("span", {
 								"aria-hidden": "true",
 								children: "×"
 							}), () => {
@@ -377,6 +378,6 @@ function E({ ref: e, messages: t, open: r, defaultOpen: i = !0, onOpenChange: a,
 		})
 	});
 }
-E.displayName = "AnnouncementBar";
+T.displayName = "AnnouncementBar";
 //#endregion
-export { E as t };
+export { T as t };

package/dist/announcement-bar.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as AnnouncementBar } from "./announcement-bar-B58xempt.js";
+export { t as AnnouncementBar } from "./announcement-bar-B5J33QUh.js";

package/dist/avatar-B6idYC59.js

@@ -0,0 +1,146 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./media-8yrN85VT.js";
+import { t as n } from "./sx-BJXJ2xJK.js";
+import { useState as r } from "react";
+import { vars as i } from "@jfrader/tokens/vars";
+import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
+//#region src/components/avatar/avatar.tsx
+var s = 2, c = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+function l(e) {
+	let t = Array.from(c.segment(e), ({ segment: e }) => e), n = t[0] ?? "";
+	if (!/\p{Extended_Pictographic}/u.test(n)) return n;
+	let r = "";
+	for (let e of t) {
+		if (!/\p{Extended_Pictographic}/u.test(e)) break;
+		r += e;
+	}
+	return r;
+}
+function u(e) {
+	return e.trim().split(/\s+/).filter(Boolean).slice(0, s).map(l).join("").toLocaleUpperCase();
+}
+var d = e({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	borderRadius: i.radius.full,
+	backgroundColor: i.color.surfaceHover,
+	color: i.color.text,
+	fontWeight: i.fontWeight.medium,
+	lineHeight: 1,
+	userSelect: "none",
+	verticalAlign: "middle",
+	[t]: { outline: "1px solid CanvasText" }
+}), f = {
+	sm: e({
+		inlineSize: i.space[6],
+		blockSize: i.space[6],
+		fontSize: i.textSize.xs
+	}),
+	md: e({
+		inlineSize: i.space[8],
+		blockSize: i.space[8],
+		fontSize: i.textSize.sm
+	}),
+	lg: e({
+		inlineSize: i.space[10],
+		blockSize: i.space[10],
+		fontSize: i.textSize.md
+	})
+}, p = e({
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "100%",
+	borderRadius: i.radius.full,
+	objectFit: "cover"
+}), m = e({
+	position: "absolute",
+	insetBlockEnd: 0,
+	insetInlineEnd: 0,
+	inlineSize: "25%",
+	blockSize: "25%",
+	"&::before": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		inlineSize: "100%",
+		blockSize: "100%",
+		boxSizing: "border-box",
+		borderRadius: i.radius.full,
+		boxShadow: `0 0 0 2px ${i.color.bg}`
+	}
+}), h = {
+	online: e({ "&::before": { backgroundColor: i.color.success } }),
+	away: e({ "&::before": {
+		border: `2px solid ${i.color.warning}`,
+		backgroundColor: "transparent"
+	} }),
+	busy: e({ "&::before": {
+		backgroundColor: i.color.danger,
+		blockSize: "30%",
+		insetBlockStart: "35%"
+	} }),
+	offline: e({ "&::before": {
+		backgroundColor: i.color.textSubtle,
+		inlineSize: "60%",
+		blockSize: "60%",
+		insetBlockStart: "20%",
+		insetInlineStart: "20%"
+	} })
+}, g = e({ [t]: {
+	"&::before": {
+		forcedColorAdjust: "none",
+		backgroundColor: "CanvasText",
+		outline: "2px solid Canvas"
+	},
+	"&[data-status=\"away\"]::before": {
+		borderColor: "CanvasText",
+		backgroundColor: "Canvas"
+	}
+} });
+function _({ ref: e, name: t, src: i, size: s = "md", status: c, statusLabel: l, slotProps: _, className: v, sx: y, ...b }) {
+	let [x, S] = r(), C = i !== void 0 && i !== "" && i !== x, w = c === void 0 ? t : `${t}, ${l ?? c}`;
+	return /* @__PURE__ */ a(n, {
+		className: v,
+		styles: [d, f[s]],
+		sx: y,
+		children: (n) => /* @__PURE__ */ o("span", {
+			...b,
+			ref: e,
+			"data-ui": "avatar",
+			role: "img",
+			"aria-label": w,
+			className: n,
+			children: [C ? /* @__PURE__ */ a("img", {
+				src: i,
+				alt: "",
+				onError: () => S(i),
+				className: _?.image?.className,
+				css: [p, _?.image?.css]
+			}) : /* @__PURE__ */ a("span", {
+				"aria-hidden": "true",
+				className: _?.fallback?.className,
+				css: _?.fallback?.css,
+				children: u(t)
+			}), c !== void 0 && /* @__PURE__ */ a("span", {
+				"aria-hidden": "true",
+				"data-status": c,
+				className: _?.status?.className,
+				css: [
+					m,
+					h[c],
+					g,
+					_?.status?.css
+				]
+			})]
+		})
+	});
+}
+_.displayName = "Avatar";
+//#endregion
+export { _ as t };