@jfrader/ui 0.4.0 → 0.5.1

package/dist/menu-DDKgmK2F.js

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

package/dist/menu.js

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

package/dist/metric-card--lVTz5Wn.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-Ca4KQKYQ.js";
+import { t as a } from "./pill-BaS-uIbn.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--lVTz5Wn.js";