@jfrader/ui 0.4.0 → 0.5.1

package/dist/avatar-CaGJHy1N.js

@@ -0,0 +1,145 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./media-8yrN85VT.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",
+	[n]: { 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({ [n]: {
+	"&::before": {
+		forcedColorAdjust: "none",
+		backgroundColor: "CanvasText",
+		outline: "2px solid Canvas"
+	},
+	"&[data-status=\"away\"]::before": {
+		borderColor: "CanvasText",
+		backgroundColor: "Canvas"
+	}
+} });
+function _({ ref: e, name: n, 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 ? n : `${n}, ${l ?? c}`;
+	return /* @__PURE__ */ a(t, {
+		className: v,
+		styles: [d, f[s]],
+		sx: y,
+		children: (t) => /* @__PURE__ */ o("span", {
+			...b,
+			ref: e,
+			"data-ui": "avatar",
+			role: "img",
+			"aria-label": w,
+			className: t,
+			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(n)
+			}), 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 };

package/dist/avatar-group-M1opAQEG.js

@@ -0,0 +1,138 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./media-8yrN85VT.js";
+import { t as r } from "./visually-hidden-BJdvqqvn.js";
+import { t as i } from "./avatar-CaGJHy1N.js";
+import { useId as a } from "react";
+import { vars as o } from "@jfrader/tokens/vars";
+import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";
+//#region src/components/avatar-group/avatar-group.tsx
+var l = new Intl.PluralRules("en");
+function u(e, t) {
+	return l.select(e) === "one" ? `${t} more member` : `${t} more members`;
+}
+function d(e, t) {
+	return l.select(e) === "one" ? `${t} member` : `${t} members`;
+}
+var f = e({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	flexWrap: "nowrap",
+	minInlineSize: 0,
+	verticalAlign: "middle"
+}), p = e({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	borderRadius: o.radius.full,
+	verticalAlign: "middle",
+	"&:not(:first-of-type)": { marginInlineStart: `calc(-1 * ${o.space[1]})` }
+}), m = e({
+	boxSizing: "border-box",
+	border: `2px solid ${o.color.surface}`,
+	[n]: { borderColor: "Canvas" }
+}), h = e({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	borderRadius: o.radius.full,
+	backgroundColor: o.color.surfaceHover,
+	color: o.color.text,
+	fontWeight: o.fontWeight.medium,
+	fontVariantNumeric: "tabular-nums",
+	lineHeight: 1,
+	whiteSpace: "nowrap",
+	userSelect: "none",
+	verticalAlign: "middle",
+	border: `2px solid ${o.color.surface}`,
+	"&:not(:first-of-type)": { marginInlineStart: `calc(-1 * ${o.space[1]})` },
+	[n]: {
+		borderColor: "Canvas",
+		color: "CanvasText",
+		backgroundColor: "Canvas"
+	}
+}), g = {
+	sm: e({
+		minInlineSize: o.space[6],
+		blockSize: o.space[6],
+		paddingInline: `calc(${o.space[1]} / 2)`,
+		fontSize: o.textSize.xs
+	}),
+	md: e({
+		minInlineSize: o.space[8],
+		blockSize: o.space[8],
+		paddingInline: o.space[1],
+		fontSize: o.textSize.sm
+	}),
+	lg: e({
+		minInlineSize: o.space[10],
+		blockSize: o.space[10],
+		paddingInline: o.space[1],
+		fontSize: o.textSize.md
+	})
+};
+function _({ ref: e, members: n, max: o = 4, size: l = "md", label: _ = "Team members", locale: v, getOverflowLabel: y = u, getSummaryLabel: b = d, slotProps: x, avatarProps: S, className: C, sx: w, ...T }) {
+	let E = a(), D = typeof o == "number" && Number.isFinite(o) ? Math.max(0, Math.floor(o)) : 4, O = n.length, k = n.slice(0, D), A = O - k.length, j = A > 0, M = new Intl.NumberFormat(v), N = M.format(A), P = M.format(O), F = y(A, N), I = b(O, P), L = !!T["aria-labelledby"]?.trim(), R = T["aria-label"] ?? (L ? void 0 : _), z = [T["aria-describedby"], E].filter(Boolean).join(" ");
+	return /* @__PURE__ */ s(t, {
+		className: C,
+		styles: f,
+		sx: w,
+		children: (t) => /* @__PURE__ */ c("div", {
+			...T,
+			ref: e,
+			"data-ui": "avatar-group",
+			role: "group",
+			"aria-label": R,
+			"aria-describedby": z,
+			className: t,
+			children: [
+				k.map((e) => /* @__PURE__ */ s("span", {
+					"data-ui": "avatar-group-member",
+					className: x?.member?.className,
+					css: [p, x?.member?.css],
+					children: /* @__PURE__ */ s(i, {
+						size: l,
+						name: e.name,
+						src: e.src,
+						status: e.status,
+						statusLabel: e.statusLabel,
+						slotProps: S?.slotProps,
+						className: S?.className,
+						sx: [m, S?.sx]
+					})
+				}, e.id)),
+				j && /* @__PURE__ */ s("span", {
+					"data-ui": "avatar-group-overflow",
+					role: "img",
+					"aria-label": F,
+					className: x?.overflow?.className,
+					css: [
+						h,
+						g[l],
+						x?.overflow?.css
+					],
+					children: /* @__PURE__ */ c("span", {
+						"aria-hidden": "true",
+						children: ["+", N]
+					})
+				}),
+				/* @__PURE__ */ s("span", {
+					id: E,
+					"data-ui": "avatar-group-summary",
+					className: x?.summary?.className,
+					css: [r, x?.summary?.css],
+					children: I
+				})
+			]
+		})
+	});
+}
+_.displayName = "AvatarGroup";
+//#endregion
+export { _ as t };

package/dist/avatar-group.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as AvatarGroup } from "./avatar-group-M1opAQEG.js";

package/dist/avatar.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Avatar } from "./avatar-BahDVO9t.js";
+export { t as Avatar } from "./avatar-CaGJHy1N.js";

package/dist/badge-CjM5Agqk.js

@@ -0,0 +1,119 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./media-8yrN85VT.js";
+import { t as r } from "./renderable-DzcIj1Lo.js";
+import { vars as i } from "@jfrader/tokens/vars";
+import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
+//#region src/components/badge/badge.tsx
+var s = 99, c = e({
+	position: "relative",
+	display: "inline-flex",
+	flexShrink: 0,
+	verticalAlign: "middle"
+}), l = e({
+	position: "absolute",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	boxSizing: "border-box",
+	boxShadow: `0 0 0 2px ${i.color.bg}`,
+	fontWeight: i.fontWeight.medium,
+	lineHeight: 1,
+	whiteSpace: "nowrap",
+	pointerEvents: "none",
+	[n]: {
+		outline: "1px solid CanvasText",
+		backgroundColor: "Canvas"
+	}
+}), u = {
+	standard: e({
+		blockSize: i.space[5],
+		minInlineSize: i.space[5],
+		paddingInline: i.space[1],
+		fontSize: i.textSize.xs
+	}),
+	dot: e({
+		blockSize: i.space[2],
+		inlineSize: i.space[2],
+		borderRadius: i.radius.full,
+		[n]: {
+			backgroundColor: "CanvasText",
+			forcedColorAdjust: "none",
+			outline: "none"
+		}
+	})
+}, d = {
+	rectangular: e({ borderRadius: i.radius.sm }),
+	circular: e({ borderRadius: i.radius.full })
+}, f = {
+	"top-start": e({
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		transform: "translate(-50%, -50%)",
+		"&:dir(rtl)": { transform: "translate(50%, -50%)" }
+	}),
+	"top-end": e({
+		insetBlockStart: 0,
+		insetInlineEnd: 0,
+		transform: "translate(50%, -50%)",
+		"&:dir(rtl)": { transform: "translate(-50%, -50%)" }
+	}),
+	"bottom-start": e({
+		insetBlockEnd: 0,
+		insetInlineStart: 0,
+		transform: "translate(-50%, 50%)",
+		"&:dir(rtl)": { transform: "translate(50%, 50%)" }
+	}),
+	"bottom-end": e({
+		insetBlockEnd: 0,
+		insetInlineEnd: 0,
+		transform: "translate(50%, 50%)",
+		"&:dir(rtl)": { transform: "translate(-50%, 50%)" }
+	})
+}, p = {
+	accent: e({
+		backgroundColor: i.color.accent,
+		color: i.color.accentContrast
+	}),
+	danger: e({
+		backgroundColor: i.color.danger,
+		color: i.color.dangerContrast
+	}),
+	neutral: e({
+		backgroundColor: i.color.textMuted,
+		color: i.color.bg
+	})
+};
+function m({ ref: e, children: n, badgeContent: i, max: m = s, showZero: h = !1, invisible: g = !1, variant: _ = "standard", tone: v = "accent", anchor: y, overlap: b = "rectangular", slotProps: x, className: S, sx: C, ...w }) {
+	let T = _ === "dot", E = g || _ !== "dot" && (!r(i) || i === 0 && !h), D = typeof i == "number" && i > m ? `${m}+` : i, O = `${y?.vertical ?? "top"}-${y?.horizontal ?? "end"}`, k = [S, x?.root?.className].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ a(t, {
+		className: k,
+		styles: [c, x?.root?.css],
+		sx: C,
+		children: (t) => /* @__PURE__ */ o("span", {
+			...w,
+			ref: e,
+			"data-ui": "badge",
+			className: t,
+			children: [n, !E && /* @__PURE__ */ a("span", {
+				"data-ui": "badge-marker",
+				"data-variant": _,
+				"data-tone": v,
+				"aria-hidden": T ? "true" : void 0,
+				className: x?.badge?.className,
+				css: [
+					l,
+					u[_],
+					!T && d[b],
+					f[O],
+					p[v],
+					x?.badge?.css
+				],
+				children: T ? null : D
+			})]
+		})
+	});
+}
+m.displayName = "Badge";
+//#endregion
+export { m as t };

package/dist/badge.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Badge } from "./badge-B_sLygxU.js";
+export { t as Badge } from "./badge-CjM5Agqk.js";