@jfrader/ui 0.4.0 → 0.5.0

package/dist/menu-xwOOUtWP.js

@@ -0,0 +1,275 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { r } from "./media-8yrN85VT.js";
+import { t as i } from "./use-controlled-state-DpeVQZNR.js";
+import { t as a } from "./trigger-style-B1KVC8O1.js";
+import { t as o } from "./overlay-layer-SeUyyEPD.js";
+import { s, t as c } from "./listbox-style-WX-RASp1.js";
+import { i as l, n as u } from "./collection-registry-k6JcD3Jr.js";
+import { t as d } from "./overlay-portal-C4JZFq2M.js";
+import { t as f } from "./use-overlay-floating-DvJifLpF.js";
+import { createContext as p, useContext as m, useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
+import { vars as y } from "@jfrader/tokens/vars";
+import { jsx as b } from "@emotion/react/jsx-runtime";
+import { FloatingFocusManager as x, FloatingList as S, useClick as C, useDismiss as w, useInteractions as T, useListNavigation as E, useMergeRefs as D, useRole as O, useTypeahead as k } from "@floating-ui/react";
+//#region src/components/menu/menu.tsx
+var A = 500, j = p(null), M = p(!1);
+function N(e, t) {
+	let n = m(j);
+	if (!n) throw Error(`${e}.${t} must be rendered inside <${e}>.`);
+	return n;
+}
+function P(e) {
+	let t = N(e, "Item");
+	if (!m(M)) throw Error(`${e}.Item must be rendered inside <${e}.Content>.`);
+	return t;
+}
+var F = (e) => /^on[A-Z]/.test(e);
+function I(e, t) {
+	let n = {}, r = {};
+	for (let [t, i] of Object.entries(e)) F(t) && typeof i == "function" ? n[t] = i : r[t] = i;
+	let i = t(r);
+	for (let [e, t] of Object.entries(n)) {
+		let n = i[e];
+		i[e] = (e) => {
+			t(e), e.defaultPrevented || n?.(e);
+		};
+	}
+	return i;
+}
+var L = (...e) => e.filter(Boolean).join(" ") || void 0, R = e({
+	appearance: "none",
+	boxSizing: "border-box",
+	display: "flex",
+	alignItems: "center",
+	inlineSize: "100%",
+	minBlockSize: "32px",
+	border: 0,
+	borderRadius: y.radius.sm,
+	backgroundColor: "transparent",
+	paddingBlock: y.space[1],
+	paddingInline: y.space[2],
+	font: "inherit",
+	fontSize: y.textSize.sm,
+	color: y.color.text,
+	textAlign: "start",
+	cursor: "pointer",
+	transitionProperty: "background-color",
+	transitionDuration: y.motion.duration.fast,
+	transitionTimingFunction: y.motion.easeStandard,
+	"&:focus-visible": { ...n },
+	[r]: { transitionDuration: "0s" }
+}), z = e({
+	blockSize: "1px",
+	marginBlock: y.space[1],
+	backgroundColor: y.color.border
+}), B = [R, c], V = z;
+function H({ open: e, defaultOpen: t = !1, onOpenChange: n, placement: r = "bottom-start", children: a }) {
+	let [o = !1, s] = i(e, t, n), [c, l] = v(null), u = _([]), d = _([]), p = _(/* @__PURE__ */ new Set()), m = _(!1), { refs: y, floatingStyles: x, context: S } = f({
+		open: o,
+		placement: r,
+		onOpenChange: (e, t, n) => {
+			e || (m.current = n === "escape-key"), s(e);
+		}
+	});
+	h(() => {
+		if (o || !m.current) return;
+		m.current = !1;
+		let e = y.domReference.current;
+		if (!e?.isConnected || e.closest("[inert]")) return;
+		let t = e.ownerDocument.activeElement;
+		t && t !== e.ownerDocument.body || e.focus();
+	}, [o, y]);
+	let D = C(S), M = O(S, { role: "menu" }), N = w(S, {
+		escapeKey: !0,
+		outsidePress: !0
+	}), P = E(S, {
+		listRef: u,
+		activeIndex: c,
+		onNavigate: l,
+		loop: !0,
+		orientation: "vertical",
+		disabledIndices: (e) => p.current.has(e),
+		focusItemOnOpen: !0
+	}), F = k(S, {
+		listRef: d,
+		activeIndex: c,
+		onMatch: o ? l : void 0,
+		resetMs: A
+	}), { getReferenceProps: I, getFloatingProps: L, getItemProps: R } = T([
+		D,
+		M,
+		N,
+		P,
+		F
+	]), z = g(() => ({
+		open: o,
+		requestClose: (e = !1) => {
+			e && (m.current = !0), s(!1);
+		},
+		activeIndex: c,
+		refs: y,
+		floatingContext: S,
+		floatingStyles: x,
+		elementsRef: u,
+		labelsRef: d,
+		disabledIndices: p.current,
+		getReferenceProps: I,
+		getFloatingProps: L,
+		getItemProps: R
+	}), [
+		o,
+		s,
+		c,
+		y,
+		S,
+		x,
+		I,
+		L,
+		R
+	]);
+	return /* @__PURE__ */ b(j.Provider, {
+		value: z,
+		children: a
+	});
+}
+function U(e) {
+	return /* @__PURE__ */ b(o, { children: /* @__PURE__ */ b(H, { ...e }) });
+}
+U.displayName = "Menu";
+function W({ family: e, marker: n, styles: r, ref: i, className: a, sx: o, ...s }) {
+	let { refs: c, getReferenceProps: l } = N(e, "Trigger"), u = D([c.setReference, i]);
+	return /* @__PURE__ */ b(t, {
+		className: a,
+		styles: r,
+		sx: o,
+		children: (e) => /* @__PURE__ */ b("button", {
+			type: "button",
+			...I(s, l),
+			ref: u,
+			"data-ui": n,
+			className: e
+		})
+	});
+}
+function G(e) {
+	return /* @__PURE__ */ b(W, {
+		...e,
+		family: "Menu",
+		marker: "menu-trigger",
+		styles: a
+	});
+}
+G.displayName = "Menu.Trigger";
+function K({ family: e, marker: n, styles: r, ref: i, style: a, children: o, className: s, sx: c, "aria-label": l, "aria-labelledby": u, ...f }) {
+	let { open: p, refs: m, floatingContext: h, floatingStyles: g, elementsRef: _, labelsRef: v, getFloatingProps: y } = N(e, "Content"), C = D([m.setFloating, i]);
+	if (!p) return null;
+	let w = y(f), T = w["aria-labelledby"], E = u === void 0 ? l === void 0 ? T : void 0 : L(u, T);
+	return /* @__PURE__ */ b(d, { children: /* @__PURE__ */ b(x, {
+		context: h,
+		modal: !1,
+		initialFocus: -1,
+		returnFocus: !1,
+		restoreFocus: !0,
+		children: /* @__PURE__ */ b(t, {
+			className: s,
+			styles: r,
+			sx: c,
+			children: (e) => /* @__PURE__ */ b("div", {
+				...w,
+				"aria-label": l,
+				"aria-labelledby": E,
+				ref: C,
+				"data-ui": n,
+				style: {
+					...a,
+					...g
+				},
+				className: e,
+				children: /* @__PURE__ */ b(S, {
+					elementsRef: _,
+					labelsRef: v,
+					children: /* @__PURE__ */ b(M.Provider, {
+						value: !0,
+						children: o
+					})
+				})
+			})
+		})
+	}) });
+}
+function q(e) {
+	return /* @__PURE__ */ b(K, {
+		...e,
+		family: "Menu",
+		marker: "menu",
+		styles: s
+	});
+}
+q.displayName = "Menu.Content";
+function J({ family: e, marker: n, styles: r, ref: i, onSelect: a, disabled: o = !1, onClick: s, className: c, sx: d, ...f }) {
+	let { activeIndex: p, requestClose: m, disabledIndices: h, getItemProps: g } = P(e), { ref: _, index: v } = l({ label: o ? null : void 0 }), y = D([_, i]), x = v !== -1 && p === v;
+	u(v, o, h);
+	let S = (e) => {
+		o || (s?.(e), a?.(), e.defaultPrevented || m(!0));
+	};
+	return /* @__PURE__ */ b(t, {
+		className: c,
+		styles: r,
+		sx: d,
+		children: (e) => /* @__PURE__ */ b("button", {
+			type: "button",
+			...g({
+				...f,
+				onClick: S
+			}),
+			ref: y,
+			role: "menuitem",
+			tabIndex: x ? 0 : -1,
+			"aria-disabled": o || void 0,
+			"data-active": x || void 0,
+			"data-ui": n,
+			className: e
+		})
+	});
+}
+function Y(e) {
+	return /* @__PURE__ */ b(J, {
+		...e,
+		family: "Menu",
+		marker: "menu-item",
+		styles: B
+	});
+}
+Y.displayName = "Menu.Item";
+function X({ marker: e, styles: n, ref: r, className: i, sx: a, ...o }) {
+	return /* @__PURE__ */ b(t, {
+		className: i,
+		styles: n,
+		sx: a,
+		children: (t) => /* @__PURE__ */ b("div", {
+			...o,
+			ref: r,
+			role: "separator",
+			"data-ui": e,
+			className: t
+		})
+	});
+}
+function Z(e) {
+	return /* @__PURE__ */ b(X, {
+		...e,
+		marker: "menu-separator",
+		styles: z
+	});
+}
+Z.displayName = "Menu.Separator";
+var Q = Object.assign(U, {
+	Trigger: G,
+	Content: q,
+	Item: Y,
+	Separator: Z
+});
+//#endregion
+export { W as a, X as i, K as n, B as o, J as r, V as s, Q as t };

package/dist/menu.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Menu } from "./menu-CGPTNRnF.js";
+export { t as Menu } from "./menu-xwOOUtWP.js";

package/dist/metric-card-Bh9K4fZs.js

@@ -0,0 +1,118 @@
+'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 { t as i } from "./card-D-aI2QHx.js";
+import { t as a } from "./pill-DO2gHzMb.js";
+import { useId as o } from "react";
+import { vars as s } from "@jfrader/tokens/vars";
+import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
+//#region src/components/metric-card/metric-card.tsx
+var u = e({ minInlineSize: 0 }), d = e({
+	display: "grid",
+	gap: s.space[2],
+	overflowWrap: "anywhere"
+}), f = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: s.space[2],
+	minInlineSize: 0
+}), p = e({
+	margin: 0,
+	minInlineSize: 0,
+	fontSize: s.textSize.sm,
+	fontWeight: s.fontWeight.semibold,
+	lineHeight: s.lineHeight.base,
+	color: s.color.text
+}), m = e({
+	minInlineSize: 0,
+	fontFamily: s.font.sans,
+	fontSize: s.textSize["3xl"],
+	fontWeight: s.fontWeight.semibold,
+	lineHeight: s.lineHeight.tight,
+	fontVariantNumeric: "tabular-nums"
+}), h = e({
+	gap: s.space[1],
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	blockSize: "auto",
+	minBlockSize: s.space[5],
+	paddingBlock: s.space[1],
+	whiteSpace: "normal",
+	lineHeight: s.lineHeight.base,
+	border: "1px solid transparent",
+	[n]: { borderColor: "CanvasText" }
+}), g = e({
+	margin: 0,
+	minInlineSize: 0,
+	fontSize: s.textSize.sm,
+	lineHeight: s.lineHeight.base,
+	color: s.color.textMuted
+});
+function _({ ref: e, label: n, value: s, description: _, headingLevel: v = 3, variant: y = "raised", locale: b, formatOptions: x, unitLabel: S, delta: C, deltaFormatOptions: w, deltaTone: T = "neutral", deltaDescription: E, loading: D = !1, missingValueLabel: O = "Unavailable", slotProps: k, className: A, sx: j, role: M, "aria-labelledby": N, "aria-describedby": P, "aria-busy": F, ...I }) {
+	let L = `${o()}-label`, R = `${o()}-description`, z = r(n) && n !== "", B = r(_) && _ !== "", V = C !== void 0 && Number.isFinite(C) ? C === 0 ? 0 : C : void 0, H = V === 0 ? "unchanged" : V !== void 0 && V > 0 ? "up" : "down", U = `h${v}`, W = s !== null && Number.isFinite(s), G = W ? new Intl.NumberFormat(b, x).format(s) : O, K = V === void 0 ? void 0 : new Intl.NumberFormat(b, {
+		...w,
+		signDisplay: V === 0 ? "exceptZero" : "always"
+	}).format(V);
+	return /* @__PURE__ */ c(t, {
+		className: A,
+		styles: u,
+		sx: j,
+		children: (t) => /* @__PURE__ */ c("div", {
+			...I,
+			ref: e,
+			role: M,
+			className: t,
+			"data-ui": "metric-card",
+			"aria-busy": D || F,
+			"aria-labelledby": [N, M === "region" && z && L].filter(Boolean).join(" ") || void 0,
+			"aria-describedby": [P, B && R].filter(Boolean).join(" ") || void 0,
+			children: /* @__PURE__ */ l(i, {
+				variant: y,
+				className: k?.surface?.className,
+				css: [d, k?.surface?.css],
+				children: [
+					/* @__PURE__ */ l("div", {
+						"data-ui": "metric-card-header",
+						className: k?.header?.className,
+						css: [f, k?.header?.css],
+						children: [z && /* @__PURE__ */ c(U, {
+							id: L,
+							"data-ui": "metric-card-label",
+							className: k?.label?.className,
+							css: [p, k?.label?.css],
+							children: n
+						}), V !== void 0 && /* @__PURE__ */ l(a, {
+							tone: T,
+							"data-direction": H,
+							className: k?.delta?.className,
+							css: [h, k?.delta?.css],
+							children: [/* @__PURE__ */ c("span", {
+								"aria-hidden": "true",
+								children: V === 0 ? "↔" : V > 0 ? "↑" : "↓"
+							}), /* @__PURE__ */ l("span", { children: [K, E ? ` ${E}` : ""] })]
+						})]
+					}),
+					/* @__PURE__ */ l("div", {
+						"data-ui": "metric-card-value",
+						className: k?.value?.className,
+						css: [m, k?.value?.css],
+						children: [G, W && S ? ` ${S}` : ""]
+					}),
+					B && /* @__PURE__ */ c("p", {
+						id: R,
+						"data-ui": "metric-card-description",
+						className: k?.description?.className,
+						css: [g, k?.description?.css],
+						children: _
+					})
+				]
+			})
+		})
+	});
+}
+_.displayName = "MetricCard";
+//#endregion
+export { _ as t };

package/dist/metric-card.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as MetricCard } from "./metric-card-Bh9K4fZs.js";