@jfrader/ui 0.5.0 → 0.6.0

package/dist/menu-CVzpsyXn.js

@@ -0,0 +1,312 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { 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 "./use-controlled-state-DpeVQZNR.js";
+import { t as a } from "./trigger-style-CtOrdPk4.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-DNOxAulu.js";
+import { t as f } from "./overlay-portal-C9igMHnC.js";
+import { t as p } from "./use-overlay-floating-Bx2jBKAA.js";
+import { i as m, n as h } from "./collection-registry-k6JcD3Jr.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": { ...t },
+	[n]: { transitionDuration: "0s" }
+}), V = e({
+	blockSize: "1px",
+	marginBlock: S.space[1],
+	backgroundColor: S.color.border
+}), H = [B, d], ee = V, te = {
+	neutral: e({}),
+	danger: e({
+		color: S.color.dangerText,
+		"&:hover:not([aria-disabled=\"true\"]), &[data-active]:not([aria-disabled=\"true\"])": { backgroundColor: S.color.dangerSoft }
+	})
+};
+function U(e) {
+	if (!e?.isConnected || e.closest("[inert]")) return;
+	let t = e.ownerDocument.activeElement;
+	t && t !== e.ownerDocument.body || e.focus();
+}
+function ne({ 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), m = b([]), h = b([]), g = b(/* @__PURE__ */ new Set()), _ = b(!1), { refs: S, floatingStyles: w, context: T } = p({
+		...a,
+		open: l,
+		placement: r,
+		nodeId: s,
+		onOpenChange: (e, t, n) => {
+			_.current = !e && n === "escape-key", u(e);
+		}
+	});
+	v(() => {
+		!l && _.current && (_.current = !1, U(S.domReference.current));
+	}, [l, S]);
+	let k = E(T), P = A(T, { role: "menu" }), F = o(T, "container"), I = O(T, {
+		listRef: m,
+		activeIndex: d,
+		onNavigate: f,
+		loop: !0,
+		orientation: "vertical",
+		disabledIndices: (e) => g.current.has(e),
+		focusItemOnOpen: !0
+	}), L = j(T, {
+		listRef: h,
+		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: m,
+		labelsRef: h,
+		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(ne, {
+		...e,
+		nodeId: t
+	}) });
+}
+function G(e) {
+	return /* @__PURE__ */ C(W, { ...e });
+}
+G.displayName = "Menu";
+function K({ family: e, marker: t, styles: n, ref: i, className: a, sx: o, ...s }) {
+	let { refs: c, getReferenceProps: l } = F(e, "Trigger"), u = k([c.setReference, i]);
+	return /* @__PURE__ */ C(r, {
+		className: a,
+		styles: n,
+		sx: o,
+		children: (e) => /* @__PURE__ */ C("button", {
+			type: "button",
+			...R(s, l),
+			ref: u,
+			"data-ui": t,
+			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: t, styles: n, ref: i, style: a, children: o, className: s, sx: c, "aria-label": l, "aria-labelledby": u, defaultLabelledBy: d, ...p }) {
+	let { open: m, refs: h, floatingContext: g, floatingStyles: _, getFloatingProps: v } = F(e, "Content"), y = k([h.setFloating, i]);
+	if (!m) return null;
+	let b = v(p), x = d ?? b["aria-labelledby"], S = u === void 0 ? l === void 0 ? x : void 0 : z(u, x);
+	return /* @__PURE__ */ C(f, { children: /* @__PURE__ */ C(w, {
+		context: g,
+		modal: !1,
+		initialFocus: -1,
+		returnFocus: !1,
+		restoreFocus: !0,
+		children: /* @__PURE__ */ C(r, {
+			className: s,
+			styles: n,
+			sx: c,
+			children: (n) => /* @__PURE__ */ C("div", {
+				...b,
+				"aria-label": l,
+				"aria-labelledby": S,
+				ref: y,
+				"data-ui": t,
+				style: {
+					...a,
+					..._
+				},
+				className: n,
+				children: /* @__PURE__ */ C(Y, {
+					family: e,
+					children: o
+				})
+			})
+		})
+	}) });
+}
+function Y({ family: e, children: t }) {
+	let { nodeId: n, elementsRef: r, labelsRef: i } = F(e, "Content");
+	return /* @__PURE__ */ C(T, {
+		elementsRef: r,
+		labelsRef: i,
+		children: /* @__PURE__ */ C(P.Provider, {
+			value: !0,
+			children: /* @__PURE__ */ C(s, {
+				nodeId: n,
+				children: t
+			})
+		})
+	});
+}
+function X(e) {
+	return /* @__PURE__ */ C(J, {
+		...e,
+		family: "Menu",
+		marker: "menu",
+		styles: [u, l]
+	});
+}
+X.displayName = "Menu.Content";
+function Z({ family: e, marker: t, styles: n, ref: i, onSelect: a, disabled: o = !1, part: s = "Item", itemRole: c = "menuitem", closeOnSelect: l = !0, busy: u = !1, render: d, onClick: f, onKeyDown: p, className: g, sx: _, ...v }) {
+	let { activeIndex: y, requestClose: b, disabledIndices: x, getItemProps: S } = I(e, s), { ref: w, index: T } = m({ label: o ? null : void 0 }), E = k([w, i]), D = T !== -1 && y === T;
+	h(T, o, x);
+	let O = f, A = (e) => {
+		o || u ? e.preventDefault() : (O?.(e), a?.(), l && !e.defaultPrevented && b(!0));
+	}, j = p, M = (e) => {
+		j?.(e), !(d === void 0 || e.defaultPrevented || e.key !== " ") && (e.preventDefault(), e.currentTarget.click());
+	};
+	return /* @__PURE__ */ C(r, {
+		className: g,
+		styles: n,
+		sx: _,
+		children: (e) => {
+			let n = {
+				...S({
+					...v,
+					onClick: A,
+					onKeyDown: M
+				}),
+				ref: E,
+				role: c,
+				tabIndex: D ? 0 : -1,
+				"aria-disabled": o || u || void 0,
+				"aria-busy": u || void 0,
+				"data-active": D || void 0,
+				"data-ui": t,
+				className: e
+			};
+			return d ? d(n) : /* @__PURE__ */ C("button", {
+				type: "button",
+				...n
+			});
+		}
+	});
+}
+function Q(e) {
+	return /* @__PURE__ */ C(Z, {
+		...e,
+		family: "Menu",
+		marker: "menu-item",
+		styles: H
+	});
+}
+Q.displayName = "Menu.Item";
+function $({ marker: e, styles: t, ref: n, className: i, sx: a, ...o }) {
+	return /* @__PURE__ */ C(r, {
+		className: i,
+		styles: t,
+		sx: a,
+		children: (t) => /* @__PURE__ */ C("div", {
+			...o,
+			ref: n,
+			role: "separator",
+			"data-ui": e,
+			className: t
+		})
+	});
+}
+function re(e) {
+	return /* @__PURE__ */ C($, {
+		...e,
+		marker: "menu-separator",
+		styles: V
+	});
+}
+re.displayName = "Menu.Separator";
+var ie = Object.assign(G, {
+	Trigger: q,
+	Content: X,
+	Item: Q,
+	Separator: re
+});
+//#endregion
+export { Z as a, R as c, te as d, ee as f, W as i, z as l, F as m, Y as n, $ as o, U as p, J as r, K as s, ie as t, H as u };

package/dist/menu.js

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

package/dist/{metric-card-Bh9K4fZs.js → metric-card-BnFssTXj.js}

@@ -1,9 +1,10 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./media-8yrN85VT.js";
+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 { 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 { t as i } from "./card-C008OQCp.js";
+import { t as a } from "./pill-Dd7pog19.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";
@@ -43,7 +44,7 @@ var u = e({ minInlineSize: 0 }), d = e({
 	whiteSpace: "normal",
 	lineHeight: s.lineHeight.base,
 	border: "1px solid transparent",
-	[n]: { borderColor: "CanvasText" }
+	[t]: { borderColor: "CanvasText" }
 }), g = e({
 	margin: 0,
 	minInlineSize: 0,
@@ -51,20 +52,20 @@ var u = e({ minInlineSize: 0 }), d = e({
 	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, {
+function _({ ref: e, label: t, 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(t) && t !== "", 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, {
+	return /* @__PURE__ */ c(n, {
 		className: A,
 		styles: u,
 		sx: j,
-		children: (t) => /* @__PURE__ */ c("div", {
+		children: (n) => /* @__PURE__ */ c("div", {
 			...I,
 			ref: e,
 			role: M,
-			className: t,
+			className: n,
 			"data-ui": "metric-card",
 			"aria-busy": D || F,
 			"aria-labelledby": [N, M === "region" && z && L].filter(Boolean).join(" ") || void 0,
@@ -83,7 +84,7 @@ function _({ ref: e, label: n, value: s, description: _, headingLevel: v = 3, va
 							"data-ui": "metric-card-label",
 							className: k?.label?.className,
 							css: [p, k?.label?.css],
-							children: n
+							children: t
 						}), V !== void 0 && /* @__PURE__ */ l(a, {
 							tone: T,
 							"data-direction": H,

package/dist/metric-card.js

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