@jfrader/ui 0.3.0 → 0.5.0

package/dist/usage-meter-qyQ3rYVv.js

@@ -0,0 +1,463 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.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 ee } from "./visually-hidden-BJdvqqvn.js";
+import { t as o } from "./renderable-DzcIj1Lo.js";
+import { useEffect as s, useId as te, useLayoutEffect as ne, useRef as c, useState as l } from "react";
+import { vars as u } from "@jfrader/tokens/vars";
+import { createElement as re } from "@emotion/react";
+import { Fragment as d, jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
+//#region src/components/usage-meter/usage-meter.tsx
+var ie = .9, ae = {
+	free: "Remaining",
+	near: "Near limit",
+	over: "Over limit",
+	normal: "Within limit",
+	unavailable: "Unavailable",
+	legend: "Usage categories"
+}, oe = {
+	normal: "✓",
+	"near-limit": "!",
+	"over-limit": "!",
+	unavailable: "—"
+}, m = [
+	"accent",
+	"info",
+	"success",
+	"warning"
+], se = e({
+	display: "grid",
+	gap: u.space[3],
+	minInlineSize: 0,
+	fontFamily: u.font.sans,
+	fontSize: u.textSize.sm,
+	lineHeight: u.lineHeight.base,
+	color: u.color.text,
+	overflowWrap: "anywhere"
+}), ce = e({ fontWeight: u.fontWeight.medium }), le = e({ color: u.color.textMuted }), ue = e({
+	margin: 0,
+	fontSize: "var(--usage-total-size)",
+	fontWeight: u.fontWeight.medium
+}), de = {
+	sm: e({
+		"--usage-total-size": u.textSize.md,
+		gap: u.space[2]
+	}),
+	md: e({ "--usage-total-size": u.textSize.xl }),
+	lg: e({
+		"--usage-total-size": u.textSize["3xl"],
+		gap: u.space[4]
+	})
+}, fe = e({
+	position: "relative",
+	blockSize: u.space[3],
+	border: `1px solid ${u.color.borderControl}`,
+	backgroundColor: u.color.surfaceInset,
+	borderRadius: u.radius.full,
+	overflow: "hidden",
+	[r]: {
+		backgroundColor: "Canvas",
+		borderColor: "CanvasText"
+	}
+}), h = e({
+	position: "absolute",
+	insetBlock: 0,
+	insetInlineStart: "var(--usage-start)",
+	inlineSize: "var(--usage-width)",
+	boxSizing: "border-box",
+	transitionProperty: "inline-size, inset-inline-start",
+	transitionDuration: u.motion.duration.base,
+	transitionTimingFunction: u.motion.easeStandard,
+	[i]: { transitionDuration: "0s" }
+}), pe = e({
+	backgroundColor: "var(--usage-tone)",
+	borderInlineEnd: `1px solid ${u.color.surfaceInset}`,
+	"&[data-highlighted=\"true\"]": {
+		outline: `2px solid ${u.color.surfaceInset}`,
+		outlineOffset: "-2px"
+	},
+	[r]: {
+		forcedColorAdjust: "none",
+		backgroundColor: "Highlight",
+		borderColor: "CanvasText",
+		outlineColor: "CanvasText"
+	}
+}), me = e({
+	backgroundColor: u.color.surfaceInset,
+	backgroundImage: `repeating-linear-gradient(135deg, transparent, transparent ${u.space[1]}, ${u.color.text} ${u.space[1]}, ${u.color.text} calc(${u.space[1]} + 1px))`,
+	borderInlineStart: `1px solid ${u.color.text}`,
+	"&[data-highlighted=\"true\"]": {
+		outline: `2px solid ${u.color.text}`,
+		outlineOffset: "-2px"
+	},
+	[r]: {
+		forcedColorAdjust: "none",
+		backgroundImage: `repeating-linear-gradient(135deg, Canvas, Canvas ${u.space[1]}, CanvasText ${u.space[1]}, CanvasText calc(${u.space[1]} + 1px))`,
+		borderColor: "CanvasText"
+	}
+}), he = e({
+	"&[data-highlighted=\"true\"]": {
+		outline: `2px solid ${u.color.text}`,
+		outlineOffset: "-2px"
+	},
+	[r]: { "&[data-highlighted=\"true\"]": { outlineColor: "CanvasText" } }
+}), ge = e({
+	position: "absolute",
+	insetBlock: 0,
+	insetInlineStart: "var(--usage-start)",
+	borderInlineStart: `2px solid ${u.color.text}`,
+	[r]: { borderColor: "CanvasText" }
+}), _e = e({
+	display: "grid",
+	gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 12rem), 1fr))",
+	gap: u.space[2],
+	padding: 0,
+	margin: 0,
+	listStyle: "none"
+}), g = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: u.space[2],
+	inlineSize: "100%",
+	minInlineSize: 0,
+	minBlockSize: u.space[8],
+	boxSizing: "border-box",
+	paddingBlock: u.space[1],
+	paddingInline: u.space[2],
+	textAlign: "start",
+	font: "inherit",
+	color: "inherit",
+	backgroundColor: u.color.surfaceRaised,
+	border: `1px solid ${u.color.borderControl}`,
+	borderRadius: u.radius.sm,
+	"&[aria-pressed=\"true\"]": {
+		outline: `2px solid ${u.color.text}`,
+		outlineOffset: "-2px"
+	},
+	"&:focus-visible": n,
+	[r]: {
+		borderColor: "CanvasText",
+		"&:focus-visible": { outlineColor: "Highlight" },
+		"&[aria-pressed=\"true\"]": { outlineColor: "CanvasText" }
+	}
+}), ve = e({
+	fontSize: u.textSize.xs,
+	fontWeight: u.fontWeight.medium
+}), ye = e({
+	display: "block",
+	inlineSize: "fit-content",
+	paddingInline: u.space[1],
+	fontSize: u.textSize.xs,
+	lineHeight: 1,
+	color: u.color.text,
+	backgroundColor: u.color.surfaceInset,
+	[r]: {
+		color: "CanvasText",
+		backgroundColor: "Canvas"
+	}
+}), be = e({
+	marginInlineStart: "auto",
+	color: u.color.textMuted
+});
+function _(e, t) {
+	return !e || !t ? e == null && t == null : e.kind === t.kind && (e.kind === "remainder" || t.kind === "segment" && e.id === t.id);
+}
+function v(e) {
+	return e.kind === "segment" ? `segment:${e.id}` : "remainder";
+}
+function y(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function b(e, t) {
+	return {
+		"--usage-start": `${e * 100}%`,
+		"--usage-width": `${t * 100}%`
+	};
+}
+function x({ ref: e, label: n, segments: r, limit: i, warnAt: x = ie, size: xe = "md", locale: S, numberFormatOptions: Se, unitLabel: C, labels: Ce, getValueLabel: we, getItemLabel: Te, interactive: w = !0, value: Ee, defaultValue: De = null, onValueChange: Oe, announceChanges: T = !1, statusIcon: ke, slotProps: E, className: Ae, sx: je, "aria-labelledby": D, "aria-describedby": Me, "aria-label": O, ...Ne }) {
+	let k = te(), A = E?.title?.id ?? `${k}-title`, j = E?.status?.id ?? `${k}-status`, M = o(n) && n !== "", N = {
+		...ae,
+		...Ce
+	}, P = new Intl.NumberFormat(S, {
+		maximumFractionDigits: 1,
+		...Se
+	}), F = new Intl.NumberFormat(S, {
+		style: "percent",
+		maximumFractionDigits: 0
+	}), I = new Intl.NumberFormat(S, { maximumFractionDigits: 0 }), L = r.map((e) => ({
+		...e,
+		value: Number.isFinite(e.value) && e.value >= 0 ? e.value : 0
+	})), R = L.reduce((e, t) => e + t.value, 0), z = Number.isFinite(i) && i > 0 && Number.isFinite(R) && Number.isFinite(R / i), B = z ? R > i ? "over-limit" : R >= (Number.isFinite(x) ? Math.min(1, Math.max(0, x)) : ie) * i ? "near-limit" : "normal" : "unavailable", V = {
+		total: R,
+		limit: i,
+		free: z ? Math.max(0, i - R) : 0,
+		over: z ? Math.max(0, R - i) : 0,
+		ratio: z ? R / i : 0,
+		state: B,
+		formattedTotal: Number.isFinite(R) ? P.format(R) : N.unavailable,
+		formattedLimit: z ? P.format(i) : N.unavailable,
+		formattedPercent: z ? F.format(R / i) : N.unavailable
+	}, H = {
+		normal: N.normal,
+		"near-limit": N.near,
+		"over-limit": N.over,
+		unavailable: N.unavailable
+	}[B], U = B === "over-limit" ? `${H}: ${P.format(V.over)}` : H, W = [...L.map((e) => ({
+		kind: "segment",
+		id: e.id,
+		label: e.label,
+		value: e.value
+	})), ...z ? [{
+		kind: "remainder",
+		label: V.over > 0 ? N.over : N.free,
+		value: V.over > 0 ? V.over : V.free
+	}] : []], [G, Pe] = a(Ee, De, Oe), [Fe, Ie] = l(null), [Le, Re] = l(null), [ze, Be] = l(null), K = c(/* @__PURE__ */ new Map()), q = c(null), Ve = W.find((e) => _(e, G)) ?? null, J = Fe ?? Le ?? Ve, He = W.some((e) => v(e) === ze) ? ze : W[0] && v(W[0]), Ue = c(B), [We, Ge] = l("");
+	s(() => {
+		T && Ue.current !== B && Ge(H), T || Ge(""), Ue.current = B;
+	}, [
+		B,
+		H,
+		T
+	]), s(() => {
+		process.env.NODE_ENV !== "production" && (r.some((e) => !e.id) || new Set(r.map((e) => e.id)).size !== r.length) && console.warn("UsageMeter: segment ids must be nonempty and unique.");
+	}, [r]), s(() => {
+		process.env.NODE_ENV !== "production" && z && !M && !O && !D && console.warn("UsageMeter: the meter needs an accessible name (label, ariaLabel, or labelledBy).");
+	}, [
+		z,
+		M,
+		O,
+		D
+	]), ne(() => {
+		let e = q.current;
+		q.current = null, w && e && !W.some((t) => v(t) === e.key) && W.length && K.current.get(v(W[Math.min(e.index, W.length - 1)]))?.focus();
+	});
+	let Ke = (e) => {
+		_(G, e) || Pe(e);
+	}, Y = z ? Math.max(i, R) : 1, X = 0, qe = we?.(V) ?? `${V.formattedTotal} of ${V.formattedLimit}, ${V.formattedPercent}. ${U}`, Z = ke?.(B), Q = E?.root, { css: Je, className: Ye, ...Xe } = Q ?? {}, $ = E?.track;
+	return /* @__PURE__ */ f(t, {
+		className: [Ye, Ae].filter(Boolean).join(" ") || void 0,
+		styles: [
+			se,
+			de[xe],
+			Je
+		],
+		sx: je,
+		children: (t) => /* @__PURE__ */ p("div", {
+			...Xe,
+			...Ne,
+			ref: e,
+			role: "group",
+			"data-ui": "usage-meter",
+			"data-state": B,
+			"data-size": xe,
+			className: t,
+			"aria-label": O ?? Q?.["aria-label"],
+			"aria-labelledby": y(D, Q?.["aria-labelledby"], M && A),
+			"aria-describedby": y(Me, Q?.["aria-describedby"], j),
+			children: [
+				M && /* @__PURE__ */ f("span", {
+					...E?.title,
+					id: A,
+					"data-ui": "usage-meter-title",
+					css: [ce, E?.title?.css],
+					children: n
+				}),
+				/* @__PURE__ */ p("span", {
+					...E?.status,
+					id: j,
+					"data-ui": "usage-meter-status",
+					css: [le, E?.status?.css],
+					children: [
+						/* @__PURE__ */ f("span", {
+							"aria-hidden": "true",
+							children: o(Z) && Z !== "" ? Z : oe[B]
+						}),
+						" ",
+						U
+					]
+				}),
+				/* @__PURE__ */ p("p", {
+					...E?.total,
+					"data-ui": "usage-meter-total",
+					css: [ue, E?.total?.css],
+					children: [z ? /* @__PURE__ */ p(d, { children: [
+						V.formattedTotal,
+						" / ",
+						V.formattedLimit,
+						" · ",
+						V.formattedPercent
+					] }) : V.formattedTotal, o(C) && C !== "" && /* @__PURE__ */ p("span", {
+						"data-ui": "usage-meter-unit",
+						children: [" ", C]
+					})]
+				}),
+				/* @__PURE__ */ p("div", {
+					...$,
+					"data-ui": "usage-meter-track",
+					role: z ? "meter" : void 0,
+					"aria-label": $?.["aria-label"] ?? (M ? void 0 : O ?? Q?.["aria-label"]),
+					"aria-labelledby": y($?.["aria-labelledby"], M && A, !M && D, !M && Q?.["aria-labelledby"]),
+					"aria-describedby": y($?.["aria-describedby"], j),
+					"aria-valuemin": z ? 0 : void 0,
+					"aria-valuemax": z ? i : void 0,
+					"aria-valuenow": z ? Math.min(R, i) : void 0,
+					"aria-valuetext": z ? $?.["aria-valuetext"] ?? qe : void 0,
+					css: [fe, $?.css],
+					children: [
+						z && L.map((e, t) => {
+							let n = X;
+							return X += e.value / Y, /* @__PURE__ */ re("span", {
+								...E?.segment,
+								key: e.id,
+								"aria-hidden": "true",
+								"data-ui": "usage-meter-segment",
+								"data-highlighted": _(J, {
+									kind: "segment",
+									id: e.id
+								}),
+								style: {
+									...E?.segment?.style,
+									...b(n, e.value / Y),
+									"--usage-tone": u.color[e.tone ?? m[t % m.length]]
+								},
+								css: [
+									h,
+									pe,
+									E?.segment?.css
+								]
+							}, e.value / Y >= .08 && /* @__PURE__ */ f("span", {
+								css: ye,
+								children: I.format(t + 1)
+							}));
+						}),
+						z && V.free > 0 && /* @__PURE__ */ f("span", {
+							"aria-hidden": "true",
+							"data-ui": "usage-meter-remainder",
+							"data-highlighted": J?.kind === "remainder",
+							style: b(R / Y, V.free / Y),
+							css: [h, he]
+						}),
+						z && V.over > 0 && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("span", {
+							...E?.overage,
+							"aria-hidden": "true",
+							"data-ui": "usage-meter-overage",
+							"data-highlighted": J?.kind === "remainder",
+							style: {
+								...E?.overage?.style,
+								...b(i / Y, V.over / Y)
+							},
+							css: [
+								h,
+								me,
+								E?.overage?.css
+							]
+						}), /* @__PURE__ */ f("span", {
+							...E?.limit,
+							"aria-hidden": "true",
+							"data-ui": "usage-meter-limit",
+							style: {
+								...E?.limit?.style,
+								...b(i / Y, 0)
+							},
+							css: [ge, E?.limit?.css]
+						})] })
+					]
+				}),
+				/* @__PURE__ */ f("ul", {
+					...E?.legend,
+					"data-ui": "usage-meter-legend",
+					"aria-label": E?.legend?.["aria-label"] ?? N.legend,
+					css: [_e, E?.legend?.css],
+					children: W.map((e, t) => {
+						let n = v(e), r = _(Ve, e), a = /* @__PURE__ */ p(d, { children: [
+							/* @__PURE__ */ p("span", {
+								css: ve,
+								children: [e.kind === "segment" ? I.format(t + 1) : "—", r && /* @__PURE__ */ f("span", {
+									"aria-hidden": "true",
+									children: " ◆"
+								})]
+							}),
+							/* @__PURE__ */ f("span", { children: e.label }),
+							/* @__PURE__ */ f("span", {
+								css: be,
+								children: P.format(e.value)
+							}),
+							z && /* @__PURE__ */ f("span", {
+								css: ee,
+								children: F.format(e.value / i)
+							})
+						] });
+						return /* @__PURE__ */ f("li", { children: w ? /* @__PURE__ */ f("button", {
+							...E?.item,
+							type: "button",
+							"data-ui": "usage-meter-item",
+							"aria-pressed": r,
+							"aria-label": E?.item?.["aria-label"] ?? Te?.(e, V),
+							tabIndex: n === He ? 0 : -1,
+							css: [g, E?.item?.css],
+							ref: (e) => {
+								if (e) return K.current.set(n, e), () => {
+									e.ownerDocument.activeElement === e && (q.current = {
+										key: n,
+										index: t
+									}), K.current.delete(n);
+								};
+							},
+							onClick: (t) => {
+								E?.item?.onClick?.(t), t.defaultPrevented || Ke(r ? null : e.kind === "segment" ? {
+									kind: "segment",
+									id: e.id
+								} : { kind: "remainder" });
+							},
+							onMouseEnter: (t) => {
+								E?.item?.onMouseEnter?.(t), t.defaultPrevented || Ie(e);
+							},
+							onMouseLeave: (e) => {
+								E?.item?.onMouseLeave?.(e), Ie(null);
+							},
+							onFocus: (t) => {
+								E?.item?.onFocus?.(t), Re(e), Be(n);
+							},
+							onBlur: (e) => {
+								E?.item?.onBlur?.(e), Re(null);
+							},
+							onKeyDown: (e) => {
+								if (E?.item?.onKeyDown?.(e), e.defaultPrevented) return;
+								if (e.key === "Escape") {
+									G != null && (e.preventDefault(), Ke(null));
+									return;
+								}
+								let n = e.currentTarget.ownerDocument.defaultView?.getComputedStyle(e.currentTarget).direction === "rtl", r = {
+									ArrowRight: n ? -1 : 1,
+									ArrowLeft: n ? 1 : -1,
+									ArrowDown: 1,
+									ArrowUp: -1
+								}[e.key], i = e.key === "Home" ? 0 : e.key === "End" ? W.length - 1 : r === void 0 ? void 0 : (t + r + W.length) % W.length;
+								i !== void 0 && (e.preventDefault(), K.current.get(v(W[i]))?.focus());
+							},
+							children: a
+						}) : /* @__PURE__ */ f("span", {
+							"data-ui": "usage-meter-item",
+							css: [g, E?.item?.css],
+							className: E?.item?.className,
+							children: a
+						}) }, n);
+					})
+				}),
+				T && /* @__PURE__ */ f("span", {
+					"data-ui": "usage-meter-announcement",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					css: ee,
+					children: We
+				})
+			]
+		})
+	});
+}
+x.displayName = "UsageMeter";
+//#endregion
+export { x as t };

package/dist/usage-meter.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as UsageMeter } from "./usage-meter-qyQ3rYVv.js";

package/dist/use-controlled-state-DpeVQZNR.js

@@ -0,0 +1,20 @@
+'use client';
+import { t as e } from "./use-latest-callback-cj1OOQL6.js";
+import { useCallback as t, useRef as n, useState as r } from "react";
+//#region src/utils/use-controlled-state.ts
+function i(i, a, o) {
+	let s = i !== void 0, [c, l] = r(a), u = s ? i : c, d = n(u);
+	d.current = u;
+	let f = e(o);
+	return [
+		u,
+		t((e) => {
+			e !== d.current && (s || l(e), f(e));
+		}, [s, f]),
+		t(() => {
+			s || l(a);
+		}, [s, a])
+	];
+}
+//#endregion
+export { i as t };

package/dist/use-latest-callback-cj1OOQL6.js

@@ -0,0 +1,11 @@
+'use client';
+import { useCallback as e, useEffect as t, useRef as n } from "react";
+//#region src/utils/use-latest-callback.ts
+function r(r) {
+	let i = n(r);
+	return t(() => {
+		i.current = r;
+	}), e((...e) => i.current?.(...e), []);
+}
+//#endregion
+export { r as t };

package/dist/use-overlay-floating-DvJifLpF.js

@@ -0,0 +1,31 @@
+'use client';
+import { autoUpdate as e, flip as t, offset as n, shift as r, size as i, useFloating as a } from "@floating-ui/react";
+//#region src/overlay/use-overlay-floating.ts
+var o = 8, s = 8;
+function c({ open: c, onOpenChange: l, placement: u, nodeId: d, boundary: f, onAvailableSize: p }) {
+	let m = {
+		padding: s,
+		...f ? { boundary: f } : {}
+	};
+	return a({
+		open: c,
+		onOpenChange: l,
+		placement: u,
+		nodeId: d,
+		middleware: [
+			n(o),
+			t(m),
+			r(m),
+			p && i({
+				...m,
+				apply: ({ availableWidth: e, availableHeight: t }) => p({
+					width: e,
+					height: t
+				})
+			})
+		],
+		whileElementsMounted: e
+	});
+}
+//#endregion
+export { c as t };