@jfrader/ui 0.5.0 → 0.6.0

package/dist/activity-rings-Uszvwqdl.js

@@ -0,0 +1,528 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./visually-hidden-DgVO3NaB.js";
+import { o as ee, t as s, u as c } from "./calendar.utils-azmB4Ej7.js";
+import { n as l, r as u } from "./usage-model-C0fS47w4.js";
+import { useEffect as d, useId as te, useRef as ne } from "react";
+import { vars as f } from "@jfrader/tokens/vars";
+import { createElement as re } from "@emotion/react";
+import { Fragment as p, jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
+import { MotionConfig as ie, animate as g, motion as _, useMotionValue as v, useReducedMotion as y } from "motion/react";
+import { base as ae } from "@jfrader/tokens";
+//#region src/components/activity-rings/activity-rings.tsx
+var oe = {
+	root: "Activity",
+	days: "Day",
+	legend: "Goals",
+	unknown: "No data",
+	unavailable: "Goal unavailable",
+	goalMet: "Goal met",
+	noSelection: "No day selected",
+	empty: "No goals",
+	amount: (e, t) => `${e} of ${t}`,
+	summary: (e, t) => `${e} of ${t} goals met`
+}, b = [
+	"accent",
+	"success",
+	"info",
+	"warning"
+], se = {}, ce = [], x = 120, S = x / 2, le = 58, ue = .8, de = .4, fe = 2, pe = 1, me = {
+	sm: 16,
+	md: 14,
+	lg: 12
+}, C = {
+	sm: "7rem",
+	md: "10rem",
+	lg: "14rem"
+}, w = "32rem", T = {
+	duration: Number.parseFloat(ae.motion.duration.slow) / 1e3,
+	ease: [
+		.2,
+		.6,
+		.2,
+		1
+	]
+}, he = e({
+	label: "activity-rings",
+	minInlineSize: 0,
+	fontFamily: f.font.sans,
+	fontSize: f.textSize.sm,
+	lineHeight: f.lineHeight.base,
+	color: f.color.text,
+	overflowWrap: "anywhere"
+}), ge = e({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: f.space[4],
+	alignItems: "center",
+	justifyContent: "center"
+}), _e = e({
+	display: "grid",
+	gap: f.space[3],
+	flex: `1 1 calc((${w} - 100%) * 999)`,
+	minInlineSize: 0
+}), ve = {
+	sm: e({ "--rings-size": C.sm }),
+	md: e({ "--rings-size": C.md }),
+	lg: e({
+		"--rings-size": C.lg,
+		fontSize: f.textSize.md
+	})
+}, ye = e({
+	display: "block",
+	flex: "none",
+	inlineSize: "var(--rings-size)",
+	maxInlineSize: "100%",
+	blockSize: "auto",
+	aspectRatio: "1",
+	overflow: "visible"
+}), be = e({
+	transitionProperty: "opacity",
+	transitionDuration: f.motion.duration.base,
+	transitionTimingFunction: f.motion.easeStandard,
+	"&[data-dimmed=\"true\"]": { opacity: .3 },
+	[r]: { transitionDuration: "0s" },
+	[n]: { "&[data-dimmed=\"true\"]": { opacity: 1 } }
+}), xe = e({
+	fill: "none",
+	stroke: f.color.surfaceHover,
+	[n]: {
+		stroke: "GrayText",
+		"&[data-pattern=\"dashed\"]": { strokeDasharray: "2 2" }
+	}
+}), Se = e({
+	fill: "none",
+	stroke: "var(--ring-tone)",
+	[n]: { stroke: "CanvasText" },
+	"[data-dimmed=\"true\"] > &": { [n]: { stroke: "GrayText" } }
+}), Ce = e({
+	fill: "none",
+	stroke: f.color.bg,
+	[n]: { stroke: "Canvas" }
+}), we = e({
+	stroke: f.color.text,
+	strokeWidth: 1,
+	[n]: { stroke: "CanvasText" }
+}), Te = e({
+	margin: 0,
+	fontWeight: f.fontWeight.medium
+}), Ee = e({
+	display: "grid",
+	gap: f.space[2],
+	padding: 0,
+	margin: 0,
+	listStyle: "none"
+}), E = e({
+	display: "grid",
+	gridTemplateColumns: "auto auto minmax(0, 1fr)",
+	columnGap: f.space[2],
+	alignItems: "baseline",
+	inlineSize: "100%",
+	minInlineSize: 0,
+	minBlockSize: f.space[8],
+	boxSizing: "border-box",
+	paddingBlock: f.space[1],
+	paddingInline: f.space[2],
+	textAlign: "start",
+	font: "inherit",
+	color: "inherit",
+	backgroundColor: "transparent",
+	border: "1px solid transparent",
+	borderRadius: f.radius.md,
+	"button&": {
+		cursor: "pointer",
+		backgroundColor: f.color.surfaceRaised,
+		borderColor: f.color.borderControl,
+		boxShadow: f.shadow.raised
+	},
+	"&[aria-pressed=\"true\"]": {
+		outline: `2px solid ${f.color.text}`,
+		outlineOffset: "-2px",
+		fontWeight: f.fontWeight.semibold
+	},
+	"&:focus-visible": t,
+	[n]: {
+		"button&": { borderColor: "CanvasText" },
+		"&[aria-pressed=\"true\"]": { outlineColor: "Highlight" },
+		"&:focus-visible": { outlineColor: "Highlight" }
+	}
+}), De = e({
+	fontSize: f.textSize.xs,
+	fontWeight: f.fontWeight.medium,
+	color: f.color.textMuted
+}), Oe = e({
+	display: "inline-block",
+	inlineSize: "0.75em",
+	blockSize: "0.75em",
+	borderRadius: f.radius.full,
+	backgroundColor: "var(--ring-tone)",
+	border: `1px solid ${f.color.borderControl}`,
+	[n]: {
+		backgroundColor: "CanvasText",
+		borderColor: "CanvasText"
+	}
+}), ke = e({ fontWeight: f.fontWeight.medium }), Ae = e({
+	gridColumn: "3",
+	display: "flex",
+	flexWrap: "wrap",
+	columnGap: f.space[2],
+	color: f.color.textMuted
+}), D = e({ color: f.color.text }), je = e({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: f.space[1],
+	minInlineSize: 0,
+	margin: 0,
+	padding: 0,
+	border: 0
+}), Me = e({
+	position: "relative",
+	display: "inline-grid",
+	placeItems: "center",
+	minInlineSize: f.space[10],
+	minBlockSize: f.space[10],
+	boxSizing: "border-box",
+	paddingInline: f.space[2],
+	paddingBlock: f.space[1],
+	borderRadius: f.radius.md,
+	border: `1px solid ${f.color.borderControl}`,
+	backgroundColor: f.color.surfaceRaised,
+	fontSize: f.textSize.xs,
+	lineHeight: f.lineHeight.tight,
+	textAlign: "center",
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color",
+	transitionDuration: f.motion.duration.base,
+	transitionTimingFunction: f.motion.easeStandard,
+	"&:has(input:checked)": {
+		borderColor: f.color.text,
+		outline: `1px solid ${f.color.text}`,
+		outlineOffset: "-2px",
+		fontWeight: f.fontWeight.semibold
+	},
+	"&:has(input:focus-visible)": t,
+	[r]: { transitionDuration: "0s" },
+	[n]: {
+		borderColor: "CanvasText",
+		"&:has(input:checked)": {
+			borderColor: "Highlight",
+			outlineColor: "Highlight"
+		},
+		"&:has(input:focus-visible)": { outlineColor: "Highlight" }
+	}
+}), Ne = e({
+	position: "absolute",
+	inset: 0,
+	margin: 0,
+	opacity: 0,
+	cursor: "pointer"
+}), Pe = e({
+	fontSize: f.textSize.sm,
+	fontWeight: f.fontWeight.medium
+});
+function Fe(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+var O = (e) => Math.min(1, Math.max(0, e)), k = (e, t) => ({ "--ring-tone": f.color[e.tone ?? b[t % b.length]] });
+function A(e, t) {
+	let n = Object.hasOwn(e, t) ? e[t] : null;
+	return typeof n == "number" && Number.isFinite(n) ? Math.max(0, n) : null;
+}
+function j(e, t) {
+	if (!t) return l(e);
+	try {
+		return l(e, {
+			style: "unit",
+			unit: t,
+			unitDisplay: "short"
+		});
+	} catch (t) {
+		if (!(t instanceof RangeError)) throw t;
+		return l(e);
+	}
+}
+function Ie(e, t, n, r) {
+	let i = t ? A(t, e.id) : null;
+	if (i === null) return {
+		metric: e,
+		status: "unknown",
+		value: i,
+		usage: null
+	};
+	let a = u(i, e.goal, {
+		formats: j(n, e.unit),
+		unavailable: r.unavailable,
+		formatAmount: e.formatValue && ((t) => e.formatValue(t, n))
+	});
+	return {
+		metric: e,
+		status: a.state === "unavailable" ? "unavailable" : a.ratio >= 1 ? "closed" : "open",
+		value: i,
+		usage: a
+	};
+}
+function M({ laps: e, radius: t, strokeWidth: n, className: r, ...i }) {
+	let a = y(), o = v(a ? e : 0);
+	return d(() => {
+		if (a) {
+			o.set(e);
+			return;
+		}
+		let t = g(o, e, T);
+		return () => t.stop();
+	}, [
+		e,
+		a,
+		o
+	]), /* @__PURE__ */ m(_.circle, {
+		...i,
+		cx: S,
+		cy: S,
+		r: t,
+		strokeWidth: n,
+		strokeLinecap: "butt",
+		"data-laps": e,
+		className: r,
+		style: { pathLength: o }
+	});
+}
+function N({ ref: e, metrics: t, values: n, days: r, value: u, defaultValue: f, onValueChange: g, focusedMetric: _, defaultFocusedMetric: v = null, onFocusedMetricChange: y, interactiveLegend: ae = !1, onRingClose: b, size: C = "md", locale: w, labels: T, hideLegend: A = !1, slotProps: j, className: N, sx: Le, "aria-label": P, "aria-labelledby": Re, ...ze }) {
+	let F = te(), I = `${F}-title`, L = {
+		...oe,
+		...T
+	}, R = r ?? ce, z = r !== void 0 && R.length > 0, [B, V] = a(u, f === void 0 ? R.at(-1)?.id ?? null : f, (e) => {
+		e !== null && g?.(e);
+	}), [Be, Ve] = a(_, v, y), H = z ? R.find((e) => e.id === B) : void 0, He = z ? H?.values ?? null : n ?? se, U = z ? H?.id ?? null : null, W = t.map((e) => Ie(e, He, w, L)), G = W.some((e) => e.metric.id === Be) ? Be : null, K = l(w).index, Ue = W.filter((e) => e.status === "closed").length, q = {
+		full: new Intl.DateTimeFormat(w, {
+			...s,
+			dateStyle: "full"
+		}),
+		weekday: new Intl.DateTimeFormat(w, {
+			...s,
+			weekday: "short"
+		}),
+		day: new Intl.DateTimeFormat(w, {
+			...s,
+			day: "numeric"
+		})
+	}, We = (e) => c(e.date) ? q.full.format(ee(e.date)) : e.id, Ge = t.length === 0 ? L.empty : z && !H ? L.noSelection : L.summary(K.format(Ue), K.format(t.length)), Ke = ne(null), qe = W.map((e) => `${e.metric.id}:${e.usage?.ratio ?? ""}`).join("|");
+	d(() => {
+		let e = new Map(W.map((e) => [e.metric.id, e.status === "open" || e.status === "closed" ? e.usage.ratio : null])), t = Ke.current;
+		if (Ke.current = {
+			dayKey: U,
+			ratios: e
+		}, t && t.dayKey === U) for (let [n, r] of e) {
+			let e = t.ratios.get(n);
+			e != null && r != null && e < 1 && r >= 1 && b?.(n, U);
+		}
+	}, [U, qe]), d(() => {
+		process.env.NODE_ENV !== "production" && (t.some((e) => !e.id) || new Set(t.map((e) => e.id)).size !== t.length) && console.warn("ActivityRings: metric ids must be nonempty and unique.");
+	}, [t]);
+	let J = ne(/* @__PURE__ */ new Map()), Je = (e) => {
+		if (j?.dayPicker?.onKeyDown?.(e), e.defaultPrevented || e.key !== "Home" && e.key !== "End") return;
+		let t = e.key === "Home" ? R[0] : R.at(-1);
+		t && (e.preventDefault(), J.current.get(t.id)?.focus(), V(t.id));
+	}, Y = 44 / Math.max(1, W.length), X = Math.min(me[C], Y * ue), Ye = j?.rings, Z = j?.legend, Q = {
+		interactiveLegend: ae,
+		slotProps: j
+	}, $ = Q.interactiveLegend ? Q.slotProps?.metric ?? {} : null, Xe = Q.interactiveLegend ? void 0 : Q.slotProps?.metric, Ze = j?.dayPicker, Qe = j?.dayLabel, $e = j?.summary;
+	return /* @__PURE__ */ m(i, {
+		className: N,
+		styles: [he, ve[C]],
+		sx: Le,
+		children: (t) => /* @__PURE__ */ h("section", {
+			...ze,
+			ref: e,
+			"data-ui": "activity-rings",
+			"data-size": C,
+			className: t,
+			"aria-label": P,
+			"aria-labelledby": Fe(Re, P === void 0 && I),
+			children: [P === void 0 && /* @__PURE__ */ m("span", {
+				id: I,
+				hidden: !0,
+				children: L.root
+			}), /* @__PURE__ */ h("div", {
+				css: ge,
+				children: [/* @__PURE__ */ m(ie, {
+					reducedMotion: "user",
+					children: /* @__PURE__ */ m("svg", {
+						...Ye,
+						"data-ui": "activity-rings-rings",
+						viewBox: `0 0 ${x} ${x}`,
+						"aria-hidden": "true",
+						focusable: "false",
+						css: [ye, Ye?.css],
+						children: /* @__PURE__ */ m("g", {
+							transform: `rotate(-90 ${S} ${S})`,
+							children: W.map((e, t) => {
+								let n = le - X / 2 - t * Y, r = e.usage && e.status !== "unavailable" ? e.usage.ratio : 0;
+								return /* @__PURE__ */ h("g", {
+									"data-ui": "activity-rings-ring",
+									"data-status": e.status,
+									"data-dimmed": G !== null && G !== e.metric.id,
+									style: k(e.metric, t),
+									css: be,
+									children: [
+										/* @__PURE__ */ m("circle", {
+											"data-ui": "activity-rings-track",
+											"data-pattern": t % 2 ? "dashed" : "solid",
+											cx: S,
+											cy: S,
+											r: n,
+											strokeWidth: X,
+											css: xe
+										}),
+										/* @__PURE__ */ m(M, {
+											"data-ui": "activity-rings-fill",
+											radius: n,
+											strokeWidth: X,
+											laps: O(r),
+											css: Se
+										}),
+										r > 1 && /* @__PURE__ */ m(M, {
+											"data-ui": "activity-rings-lap",
+											radius: n,
+											strokeWidth: X * de,
+											laps: O(Math.min(r, fe) - 1),
+											css: Ce
+										}),
+										(e.status === "open" || e.status === "closed") && /* @__PURE__ */ m("line", {
+											"data-ui": "activity-rings-tick",
+											x1: S + n + X / 2 + pe,
+											x2: S + n - X / 2 - pe,
+											y1: S,
+											y2: S,
+											css: we
+										})
+									]
+								}, e.metric.id);
+							})
+						})
+					})
+				}), /* @__PURE__ */ h("div", {
+					css: _e,
+					children: [
+						/* @__PURE__ */ h("p", {
+							...$e,
+							"data-ui": "activity-rings-summary",
+							css: [Te, $e?.css],
+							children: [H && /* @__PURE__ */ h(p, { children: [We(H), " · "] }), Ge]
+						}),
+						z && /* @__PURE__ */ h("fieldset", {
+							...Ze,
+							"data-ui": "activity-rings-days",
+							css: [je, Ze?.css],
+							onKeyDown: Je,
+							children: [/* @__PURE__ */ m("legend", {
+								css: o,
+								children: L.days
+							}), R.map((e) => {
+								let t = c(e.date) ? ee(e.date) : null;
+								return /* @__PURE__ */ re("label", {
+									...Qe,
+									key: e.id,
+									"data-ui": "activity-rings-day",
+									css: [Me, Qe?.css]
+								}, /* @__PURE__ */ m("input", {
+									ref: (t) => {
+										if (t) return J.current.set(e.id, t), () => {
+											J.current.delete(e.id);
+										};
+									},
+									type: "radio",
+									name: `${F}-day`,
+									value: e.id,
+									checked: e.id === B,
+									onChange: () => V(e.id),
+									css: Ne
+								}), /* @__PURE__ */ m("span", {
+									css: o,
+									children: We(e)
+								}), /* @__PURE__ */ m("span", {
+									"aria-hidden": "true",
+									children: t ? q.weekday.format(t) : e.id
+								}), t && /* @__PURE__ */ m("span", {
+									"aria-hidden": "true",
+									css: Pe,
+									children: q.day.format(t)
+								}));
+							})]
+						}),
+						W.length > 0 && /* @__PURE__ */ m("ul", {
+							...Z,
+							"data-ui": "activity-rings-legend",
+							"aria-label": Z?.["aria-label"] ?? L.legend,
+							css: [
+								Ee,
+								A && o,
+								Z?.css
+							],
+							children: W.map((e, t) => {
+								let { metric: n, usage: r, status: i } = e, a = G === n.id, o = /* @__PURE__ */ h(p, { children: [
+									/* @__PURE__ */ m("span", {
+										"aria-hidden": "true",
+										css: De,
+										children: K.format(t + 1)
+									}),
+									/* @__PURE__ */ m("span", {
+										"aria-hidden": "true",
+										css: Oe,
+										style: k(n, t)
+									}),
+									/* @__PURE__ */ m("span", {
+										css: ke,
+										children: n.label
+									}),
+									/* @__PURE__ */ m("span", {
+										css: Ae,
+										"data-ui": "activity-rings-detail",
+										children: i === "unknown" || !r ? /* @__PURE__ */ m("span", { children: L.unknown }) : i === "unavailable" ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("span", { children: r.formattedTotal }), /* @__PURE__ */ m("span", {
+											css: D,
+											children: L.unavailable
+										})] }) : /* @__PURE__ */ h(p, { children: [
+											/* @__PURE__ */ m("span", { children: L.amount(r.formattedTotal, r.formattedLimit) }),
+											/* @__PURE__ */ m("span", { children: r.formattedPercent }),
+											i === "closed" && /* @__PURE__ */ h("span", {
+												css: D,
+												children: [/* @__PURE__ */ m("span", {
+													"aria-hidden": "true",
+													children: "✓ "
+												}), L.goalMet]
+											})
+										] })
+									})
+								] });
+								return /* @__PURE__ */ m("li", { children: $ ? /* @__PURE__ */ m("button", {
+									...$,
+									type: "button",
+									"data-ui": "activity-rings-metric",
+									"data-status": i,
+									"aria-pressed": a,
+									css: [E, $.css],
+									onClick: (e) => {
+										$.onClick?.(e), e.defaultPrevented || Ve(a ? null : n.id);
+									},
+									children: o
+								}) : /* @__PURE__ */ m("div", {
+									...Xe,
+									"data-ui": "activity-rings-metric",
+									"data-status": i,
+									css: [E, Xe?.css],
+									children: o
+								}) }, n.id);
+							})
+						})
+					]
+				})]
+			})]
+		})
+	});
+}
+N.displayName = "ActivityRings";
+//#endregion
+export { N as t };

package/dist/activity-rings.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ActivityRings } from "./activity-rings-Uszvwqdl.js";

package/dist/{alert-DS_einpy.js → alert-Bhj-qSMs.js}

@@ -1,8 +1,9 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./focus-ring-BK5W5_NY.js";
-import { r } from "./media-8yrN85VT.js";
-import { t as i } from "./visually-hidden-BJdvqqvn.js";
+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 { vars as o } from "@jfrader/tokens/vars";
 import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";
@@ -75,34 +76,34 @@ var l = {
 		backgroundColor: o.color.surfaceHover,
 		color: o.color.text
 	},
-	"&:focus-visible": { ...n },
-	[r]: { transitionDuration: "0s" }
+	"&:focus-visible": { ...t },
+	[n]: { transitionDuration: "0s" }
 });
-function _({ ref: e, tone: n = "info", toneLabel: r = l[n], title: o, children: _, onDismiss: v, dismissLabel: y = "Dismiss", slotProps: b, className: x, sx: S, ...C }) {
+function _({ ref: e, tone: t = "info", toneLabel: n = l[t], title: o, children: _, onDismiss: v, dismissLabel: y = "Dismiss", slotProps: b, className: x, sx: S, ...C }) {
 	let w = v !== void 0;
-	return /* @__PURE__ */ s(t, {
+	return /* @__PURE__ */ s(r, {
 		className: [x, b?.root?.className].filter(Boolean).join(" ") || void 0,
 		styles: [
 			u,
-			p[n],
+			p[t],
 			w && d,
 			b?.root?.css
 		],
 		sx: S,
-		children: (t) => /* @__PURE__ */ c("div", {
+		children: (r) => /* @__PURE__ */ c("div", {
 			...C,
 			ref: e,
 			"data-ui": "alert",
-			"data-tone": n,
-			className: t,
+			"data-tone": t,
+			className: r,
 			children: [/* @__PURE__ */ c("div", {
-				role: n === "danger" ? "alert" : "status",
+				role: t === "danger" ? "alert" : "status",
 				"aria-atomic": "true",
 				css: f,
 				children: [
 					/* @__PURE__ */ s("span", {
 						css: i,
-						children: r
+						children: n
 					}),
 					a(o) && /* @__PURE__ */ s("div", {
 						className: b?.title?.className,

package/dist/alert.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Alert } from "./alert-DS_einpy.js";
+export { t as Alert } from "./alert-Bhj-qSMs.js";