@jfrader/ui 0.6.0 → 0.7.1

package/dist/avatar-B6idYC59.js

@@ -1,146 +0,0 @@
-'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 };

package/dist/locale-switcher-CZF7XNYG.js

@@ -1,295 +0,0 @@
-'use client';
-import { i as e } from "./css-BYJhdGh-.js";
-import { n as t } from "./focus-ring-BK5W5_NY.js";
-import { r as n } from "./media-8yrN85VT.js";
-import { t as r } from "./sx-BJXJ2xJK.js";
-import { t as i } from "./visually-hidden-DgVO3NaB.js";
-import { t as a } from "./renderable-DzcIj1Lo.js";
-import { t as o } from "./icon-wrapper-C-zMD0uL.js";
-import { t as s } from "./trigger-style-CtOrdPk4.js";
-import { o as c, r as l, s as u } from "./listbox-style-DNOxAulu.js";
-import { a as d, i as f, l as p, r as m, s as h, u as g } from "./menu-CVzpsyXn.js";
-import { useEffect as _, useId as v } from "react";
-import { vars as y } from "@jfrader/tokens/vars";
-import { Fragment as b, jsx as x, jsxs as S } from "@emotion/react/jsx-runtime";
-import { useMergeRefs as C } from "@floating-ui/react";
-//#region src/components/locale-switcher/locale-switcher.tsx
-var w = "LocaleSwitcher", T = "✓", E = e({
-	display: "inline-flex",
-	alignItems: "center",
-	minInlineSize: 0,
-	maxInlineSize: "100%",
-	fontFamily: y.font.sans,
-	lineHeight: y.lineHeight.tight,
-	color: y.color.text
-}), D = {
-	sm: e({ fontSize: y.textSize.sm }),
-	md: e({ fontSize: y.textSize.sm }),
-	lg: e({ fontSize: y.textSize.md })
-}, O = e({
-	gap: y.space[2],
-	maxInlineSize: "100%",
-	fontSize: "inherit",
-	whiteSpace: "nowrap"
-}), k = {
-	sm: e({
-		minBlockSize: y.space[8],
-		paddingInline: y.space[3]
-	}),
-	md: e({
-		minBlockSize: y.space[10],
-		paddingInline: y.space[4]
-	}),
-	lg: e({
-		minBlockSize: y.space[12],
-		paddingInline: y.space[5]
-	})
-}, A = e({
-	display: "inline-flex",
-	transitionProperty: "transform",
-	transitionDuration: y.motion.duration.fast,
-	transitionTimingFunction: y.motion.easeStandard,
-	"& svg": {
-		inlineSize: "1em",
-		blockSize: "1em"
-	},
-	"[aria-expanded=\"true\"] > &": { transform: "rotate(180deg)" },
-	[n]: { transitionDuration: "0s" }
-}), j = e({
-	gap: y.space[2],
-	textDecoration: "none",
-	"&[aria-current=\"true\"]": { fontWeight: y.fontWeight.medium }
-}), M = e({ marginInlineStart: "auto" }), N = e({
-	display: "flex",
-	flexWrap: "wrap",
-	alignItems: "center",
-	gap: y.space[3],
-	margin: 0,
-	padding: 0,
-	listStyle: "none"
-}), P = e({
-	display: "inline-flex",
-	alignItems: "center",
-	minBlockSize: y.space[8],
-	borderRadius: y.radius.sm
-}), F = e({
-	color: y.color.accentText,
-	textDecoration: "underline",
-	textUnderlineOffset: "0.2em",
-	transitionProperty: "color",
-	transitionDuration: y.motion.duration.fast,
-	transitionTimingFunction: y.motion.easeStandard,
-	"&:hover": { color: y.color.text },
-	"&:focus-visible": { ...t },
-	[n]: { transitionDuration: "0s" }
-}), I = e({
-	color: y.color.text,
-	fontWeight: y.fontWeight.medium
-}), L = /* @__PURE__ */ S("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	strokeLinecap: "round",
-	focusable: "false",
-	children: [/* @__PURE__ */ x("circle", {
-		cx: "12",
-		cy: "12",
-		r: "9"
-	}), /* @__PURE__ */ x("path", { d: "M3 12h18M12 3c2.5 2.5 3.75 5.5 3.75 9S14.5 18.5 12 21c-2.5-2.5-3.75-5.5-3.75-9S9.5 5.5 12 3Z" })]
-}), R = /* @__PURE__ */ x("svg", {
-	viewBox: "0 0 16 16",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "1.5",
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	children: /* @__PURE__ */ x("path", { d: "M4 6l4 4 4-4" })
-});
-function z({ option: e, current: t, link: n, adornment: r, ...i }) {
-	let a = {
-		...i,
-		lang: e.lang,
-		dir: "auto",
-		"aria-current": t ? "true" : void 0,
-		children: /* @__PURE__ */ S(b, { children: [e.label, r] })
-	};
-	if (!n) return /* @__PURE__ */ x("span", { ...a });
-	let o = {
-		...a,
-		href: e.href,
-		hrefLang: e.lang
-	};
-	return e.render ? e.render(o) : /* @__PURE__ */ x("a", { ...o });
-}
-function B({ styles: e, slot: t, ...n }) {
-	return /* @__PURE__ */ x(r, {
-		className: t?.className,
-		styles: [
-			P,
-			e,
-			t?.css
-		],
-		children: (e) => /* @__PURE__ */ x(z, {
-			...n,
-			"data-ui": "locale-switcher-option",
-			className: e
-		})
-	});
-}
-function V({ options: e, value: t, current: n, size: r, triggerLabel: _, icon: y, open: b, defaultOpen: C, onOpenChange: E, placement: D, slotProps: N }) {
-	let P = v(), F = `${P}-action`, I = `${P}-current`, { className: L, css: B, ...V } = N?.trigger ?? {}, { className: H, css: U, ...W } = N?.content ?? {}, G = N?.option;
-	return /* @__PURE__ */ S(f, {
-		open: b,
-		defaultOpen: C,
-		onOpenChange: E,
-		placement: D,
-		children: [/* @__PURE__ */ S(h, {
-			...V,
-			"aria-labelledby": p(_ ? F : void 0, n ? I : void 0),
-			family: w,
-			marker: "locale-switcher-trigger",
-			styles: [
-				s,
-				O,
-				k[r],
-				B
-			],
-			className: L,
-			children: [
-				_ && /* @__PURE__ */ x("span", {
-					id: F,
-					css: i,
-					children: _
-				}),
-				a(y) && /* @__PURE__ */ x("span", {
-					"aria-hidden": "true",
-					css: o,
-					children: y
-				}),
-				n && /* @__PURE__ */ x("span", {
-					id: I,
-					lang: n.lang,
-					dir: "auto",
-					children: n.label
-				}),
-				/* @__PURE__ */ x("span", {
-					"aria-hidden": "true",
-					css: A,
-					children: R
-				})
-			]
-		}), /* @__PURE__ */ x(m, {
-			...W,
-			family: w,
-			marker: "locale-switcher-menu",
-			styles: [
-				u,
-				c,
-				U
-			],
-			className: H,
-			defaultLabelledBy: _ ? F : void 0,
-			children: e.map((e) => {
-				let n = e.value === t;
-				return /* @__PURE__ */ x(d, {
-					family: w,
-					marker: "locale-switcher-option",
-					styles: [
-						g,
-						j,
-						G?.css
-					],
-					className: G?.className,
-					render: (t) => /* @__PURE__ */ x(z, {
-						...t,
-						option: e,
-						current: n,
-						link: !0,
-						adornment: n && /* @__PURE__ */ x("span", {
-							"aria-hidden": "true",
-							css: [l, M],
-							children: T
-						})
-					})
-				}, e.value);
-			})
-		})]
-	});
-}
-function H({ options: e, value: t, slotProps: n }) {
-	let r = e.find((e) => e.value !== t);
-	return r ? /* @__PURE__ */ x(B, {
-		option: r,
-		current: !1,
-		link: !0,
-		styles: F,
-		slot: n?.option
-	}) : null;
-}
-function U({ options: e, value: t, slotProps: n }) {
-	return /* @__PURE__ */ x("ul", {
-		css: N,
-		children: e.map((e) => {
-			let r = e.value === t;
-			return /* @__PURE__ */ x("li", { children: /* @__PURE__ */ x(B, {
-				option: e,
-				current: r,
-				link: !r,
-				styles: r ? I : F,
-				slot: n?.option
-			}) }, e.value);
-		})
-	});
-}
-var W = {
-	menu: V,
-	swap: H,
-	inline: U
-}, G = {
-	menu: "div",
-	swap: "div",
-	inline: "nav"
-};
-function K({ ref: e, options: t, value: n, variant: i = "menu", size: a = "md", triggerLabel: o, label: s, icon: c = L, open: l, defaultOpen: u, onOpenChange: d, placement: f, slotProps: p, className: m, sx: h, ...g }) {
-	let v = C([e]), y = t.find((e) => e.value === n), b = t.length, S = y !== void 0, w = !!o;
-	_(() => {
-		process.env.NODE_ENV !== "production" && (S || console.warn(`LocaleSwitcher: value "${n}" matches no option.`), i === "swap" && b !== 2 && console.warn(`LocaleSwitcher: the swap variant expects exactly two options and got ${b}; it links to the first option that is not current.`), i === "menu" && !w && console.warn("LocaleSwitcher: the menu variant needs a triggerLabel that names its action."));
-	}, [
-		i,
-		n,
-		S,
-		b,
-		w
-	]);
-	let T = G[i], O = W[i];
-	return /* @__PURE__ */ x(r, {
-		className: m,
-		styles: [E, D[a]],
-		sx: h,
-		children: (e) => /* @__PURE__ */ x(T, {
-			...g,
-			ref: v,
-			"aria-label": g["aria-label"] ?? (i === "inline" ? s : void 0),
-			"data-ui": "locale-switcher",
-			"data-variant": i,
-			className: e,
-			children: /* @__PURE__ */ x(O, {
-				options: t,
-				value: n,
-				current: y,
-				size: a,
-				triggerLabel: o,
-				icon: c,
-				open: l,
-				defaultOpen: u,
-				onOpenChange: d,
-				placement: f,
-				slotProps: p
-			})
-		})
-	});
-}
-K.displayName = "LocaleSwitcher";
-//#endregion
-export { K as t };