@jfrader/ui 0.2.0 → 0.4.0

package/dist/menu-CGPTNRnF.js

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

package/dist/menu.js

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

package/dist/navigation-DhnKriOp.js

@@ -0,0 +1,197 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./disclosure-caret-C5T3fcl6.js";
+import { t as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i, t as a } from "./media-D_eA_I-e.js";
+import { t as o } from "./renderable-DzcIj1Lo.js";
+import { t as s } from "./icon-wrapper-stN8sD7R.js";
+import { useId as c } from "react";
+import { vars as l } from "@jfrader/tokens/vars";
+import { Fragment as u, jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
+//#region src/components/navigation/navigation.tsx
+var p = l.space[8], m = "0.06em", h = e({
+	display: "grid",
+	gap: l.space[4],
+	fontFamily: l.font.sans
+}), g = e({
+	display: "grid",
+	gap: l.space[1],
+	"&[open] > summary::after": { transform: "rotate(90deg)" },
+	"&[open]:dir(rtl) > summary::after": { transform: "rotate(-90deg)" }
+}), _ = e({
+	margin: 0,
+	paddingBlock: l.space[1],
+	paddingInline: l.space[3],
+	fontSize: l.textSize.xs,
+	fontWeight: l.fontWeight.medium,
+	lineHeight: l.lineHeight.tight,
+	letterSpacing: m,
+	textTransform: "uppercase",
+	color: l.color.textMuted
+}), v = e({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: l.space[2],
+	inlineSize: "100%",
+	boxSizing: "border-box",
+	minBlockSize: p,
+	borderRadius: l.radius.sm,
+	cursor: "pointer",
+	listStyle: "none",
+	transitionProperty: "background-color, color",
+	transitionDuration: l.motion.duration.fast,
+	transitionTimingFunction: l.motion.easeStandard,
+	"&::-webkit-details-marker": { display: "none" },
+	"&::after": { ...n },
+	"&:hover": {
+		backgroundColor: l.color.surfaceHover,
+		color: l.color.text
+	},
+	"&:focus-visible": { ...r },
+	[i]: {
+		transitionDuration: "0s",
+		"&::after": { transitionDuration: "0s" }
+	}
+}), y = e({
+	display: "grid",
+	gap: l.space[1],
+	margin: 0,
+	padding: 0,
+	listStyle: "none"
+}), b = e({
+	display: "flex",
+	alignItems: "center",
+	gap: l.space[2],
+	minBlockSize: p,
+	paddingInline: l.space[3],
+	borderRadius: l.radius.sm,
+	fontSize: l.textSize.sm,
+	lineHeight: l.lineHeight.tight,
+	color: l.color.textMuted,
+	textDecoration: "none",
+	transitionProperty: "background-color, color",
+	transitionDuration: l.motion.duration.fast,
+	transitionTimingFunction: l.motion.easeStandard,
+	"&:hover:not([aria-current=\"page\"])": {
+		backgroundColor: l.color.surfaceHover,
+		color: l.color.text
+	},
+	"&[aria-current=\"page\"]": {
+		backgroundColor: l.color.accentSoft,
+		color: l.color.accentText,
+		fontWeight: l.fontWeight.medium
+	},
+	"&[aria-disabled=\"true\"]": {
+		opacity: .55,
+		pointerEvents: "none"
+	},
+	"&:focus-visible": { ...r },
+	[i]: { transitionDuration: "0s" },
+	[a]: { "&[aria-current=\"page\"]": {
+		forcedColorAdjust: "none",
+		backgroundColor: "SelectedItem",
+		color: "SelectedItemText"
+	} }
+});
+function x({ ref: e, label: n = "Main", className: r, sx: i, ...a }) {
+	return /* @__PURE__ */ d(t, {
+		className: r,
+		styles: h,
+		sx: i,
+		children: (t) => /* @__PURE__ */ d("nav", {
+			...a,
+			ref: e,
+			"aria-label": n,
+			"data-ui": "navigation",
+			className: t
+		})
+	});
+}
+x.displayName = "Navigation";
+function S({ ref: e, label: n, collapsible: r = !1, defaultOpen: i, children: a, className: s, sx: l, ...u }) {
+	let p = c(), m = o(n);
+	if (r && !m) throw Error("Navigation.Group requires a renderable label when collapsible is true.");
+	let h = /* @__PURE__ */ d("ul", {
+		"aria-labelledby": m ? p : void 0,
+		css: y,
+		children: a
+	});
+	return /* @__PURE__ */ d(t, {
+		className: s,
+		styles: g,
+		sx: l,
+		children: (t) => r ? /* @__PURE__ */ f("details", {
+			...u,
+			ref: e,
+			open: i,
+			"data-ui": "navigation-group",
+			className: t,
+			children: [/* @__PURE__ */ d("summary", {
+				id: p,
+				"data-ui": "navigation-group-summary",
+				css: [_, v],
+				children: n
+			}), h]
+		}) : /* @__PURE__ */ f("section", {
+			...u,
+			ref: e,
+			"data-ui": "navigation-group",
+			className: t,
+			children: [m && /* @__PURE__ */ d("h2", {
+				id: p,
+				"data-ui": "navigation-group-label",
+				css: _,
+				children: n
+			}), h]
+		})
+	});
+}
+S.displayName = "Navigation.Group";
+function C({ ref: e, href: n, active: r = !1, disabled: i = !1, icon: a, children: c, className: l, sx: p, ...m }) {
+	let h = /* @__PURE__ */ f(u, { children: [o(a) && /* @__PURE__ */ d("span", {
+		"aria-hidden": "true",
+		"data-ui": "navigation-item-icon",
+		css: s,
+		children: a
+	}), c] }), g = {
+		"aria-current": r ? "page" : void 0,
+		"aria-disabled": i || void 0,
+		tabIndex: i ? -1 : m.tabIndex,
+		onClick: i ? (e) => {
+			e.preventDefault();
+		} : m.onClick
+	};
+	return /* @__PURE__ */ d("li", {
+		"data-ui": "navigation-list-item",
+		children: /* @__PURE__ */ d(t, {
+			className: l,
+			styles: b,
+			sx: p,
+			children: (t) => n === void 0 ? /* @__PURE__ */ d("span", {
+				...m,
+				...g,
+				ref: e,
+				"data-ui": "navigation-item",
+				className: t,
+				children: h
+			}) : /* @__PURE__ */ d("a", {
+				...m,
+				...g,
+				ref: e,
+				href: i ? void 0 : n,
+				role: i ? "link" : void 0,
+				"data-ui": "navigation-item",
+				className: t,
+				children: h
+			})
+		})
+	});
+}
+C.displayName = "Navigation.Item";
+var w = Object.assign(x, {
+	Group: S,
+	Item: C
+});
+//#endregion
+export { w as t };

package/dist/navigation.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Navigation } from "./navigation-BDht6S2-.js";
+export { t as Navigation } from "./navigation-DhnKriOp.js";

package/dist/pagination-DYdwsxwe.js

@@ -0,0 +1,156 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r } from "./media-D_eA_I-e.js";
+import { t as i } from "./visually-hidden-BJdvqqvn.js";
+import { useImperativeHandle as a, useLayoutEffect as o, useMemo as s, useRef as c } from "react";
+import { vars as l } from "@jfrader/tokens/vars";
+import { jsx as u, jsxs as d } from "@emotion/react/jsx-runtime";
+//#region src/components/pagination/pagination.tsx
+var f = 50, p = 105, m = (e) => Math.max(0, Math.floor(Number.isFinite(e) ? e : 0)), h = (e, t) => Array.from({ length: Math.min(p, Math.max(0, t - e + 1)) }, (t, n) => e + n);
+function g(e, t, n) {
+	let r = n * 2 + 5;
+	if (t <= r) return h(1, t);
+	let i = Math.max(e - n, 1), a = Math.min(e + n, t), o = i > 3, s = a < t - 2, c = r - 2;
+	return o ? s ? [
+		1,
+		"start-ellipsis",
+		...h(i, a),
+		"end-ellipsis",
+		t
+	] : [
+		1,
+		"start-ellipsis",
+		...h(t - c + 1, t)
+	] : [
+		...h(1, c),
+		"end-ellipsis",
+		t
+	];
+}
+var _ = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: l.space[1],
+	margin: 0,
+	padding: 0,
+	listStyle: "none",
+	fontFamily: l.font.sans,
+	fontSize: l.textSize.sm,
+	lineHeight: l.lineHeight.tight
+}), v = e({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	minInlineSize: "32px",
+	blockSize: "32px"
+}), y = e({
+	position: "relative",
+	appearance: "none",
+	paddingInline: l.space[2],
+	border: "1px solid transparent",
+	borderRadius: l.radius.md,
+	background: "transparent",
+	color: l.color.text,
+	font: "inherit",
+	fontVariantNumeric: "tabular-nums",
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color, color",
+	transitionDuration: l.motion.duration.fast,
+	transitionTimingFunction: l.motion.easeStandard,
+	"&:hover:not(:disabled):not([aria-current=\"page\"])": { backgroundColor: l.color.surfaceHover },
+	"&[aria-current=\"page\"]": {
+		backgroundColor: l.color.accentSoft,
+		borderColor: l.color.accentBorder,
+		color: l.color.accentText,
+		fontWeight: l.fontWeight.semibold
+	},
+	"&:disabled": {
+		cursor: "not-allowed",
+		opacity: .55
+	},
+	"&:focus-visible": { ...n },
+	[r]: { transitionDuration: "0s" }
+}), b = e({ color: l.color.textMuted }), x = e({
+	display: "inline-block",
+	"&:dir(rtl)": { transform: "scaleX(-1)" }
+});
+function S({ ref: e, page: n, totalPages: r, onPageChange: l, siblingCount: p = 1, label: h = "Pagination", previousLabel: S = "Previous page", nextLabel: C = "Next page", locale: w = typeof navigator > "u" ? void 0 : navigator.language, className: T, sx: E, ...D }) {
+	let O = m(r), k = Math.min(Math.max(m(n), 1), Math.max(O, 1)), A = g(k, O, Math.min(m(p), f)), j = s(() => new Intl.NumberFormat(w), [w]), M = c(null);
+	a(e, () => M.current, []);
+	let N = c(!1);
+	o(() => {
+		let e = M.current;
+		if (!N.current || !e) return;
+		N.current = !1;
+		let t = e.ownerDocument.activeElement;
+		(t === e.ownerDocument.body || t && e.contains(t) && t.matches(":disabled")) && e.querySelector("[aria-current=\"page\"]")?.focus();
+	}, [k]);
+	let P = (e, t = !1) => {
+		N.current = t && (e <= 1 || e >= O), e !== k && l?.(e);
+	};
+	return /* @__PURE__ */ u(t, {
+		className: T,
+		sx: E,
+		children: (e) => /* @__PURE__ */ u("nav", {
+			...D,
+			ref: M,
+			"aria-label": h,
+			"data-ui": "pagination",
+			className: e,
+			children: /* @__PURE__ */ d("ul", {
+				css: _,
+				children: [
+					/* @__PURE__ */ u("li", { children: /* @__PURE__ */ d("button", {
+						type: "button",
+						disabled: k <= 1,
+						onClick: () => P(k - 1, !0),
+						"data-ui": "pagination-previous",
+						css: [v, y],
+						children: [/* @__PURE__ */ u("span", {
+							"aria-hidden": "true",
+							css: x,
+							children: "‹"
+						}), /* @__PURE__ */ u("span", {
+							css: i,
+							children: S
+						})]
+					}) }),
+					A.map((e) => typeof e == "number" ? /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u("button", {
+						type: "button",
+						"aria-current": e === k ? "page" : void 0,
+						"aria-label": j.format(e),
+						onClick: () => P(e),
+						"data-ui": "pagination-page",
+						css: [v, y],
+						children: j.format(e)
+					}) }, e) : /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u("span", {
+						"aria-hidden": "true",
+						"data-ui": "pagination-ellipsis",
+						css: [v, b],
+						children: "…"
+					}) }, e)),
+					/* @__PURE__ */ u("li", { children: /* @__PURE__ */ d("button", {
+						type: "button",
+						disabled: k >= O,
+						onClick: () => P(k + 1, !0),
+						"data-ui": "pagination-next",
+						css: [v, y],
+						children: [/* @__PURE__ */ u("span", {
+							"aria-hidden": "true",
+							css: x,
+							children: "›"
+						}), /* @__PURE__ */ u("span", {
+							css: i,
+							children: C
+						})]
+					}) })
+				]
+			})
+		})
+	});
+}
+S.displayName = "Pagination";
+//#endregion
+export { S as t };

package/dist/pagination.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Pagination } from "./pagination-B50PCaDU.js";
+export { t as Pagination } from "./pagination-DYdwsxwe.js";

package/dist/pill-DO2gHzMb.js

@@ -0,0 +1,56 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { vars as n } from "@jfrader/tokens/vars";
+import { jsx as r } from "@emotion/react/jsx-runtime";
+//#region src/components/pill/pill.tsx
+var i = e({
+	display: "inline-flex",
+	alignItems: "center",
+	boxSizing: "border-box",
+	blockSize: n.space[5],
+	paddingInline: n.space[2],
+	borderRadius: n.radius.full,
+	fontSize: n.textSize.xs,
+	fontWeight: n.fontWeight.medium,
+	lineHeight: 1,
+	whiteSpace: "nowrap",
+	verticalAlign: "middle"
+}), a = {
+	neutral: e({
+		backgroundColor: n.color.surfaceHover,
+		color: n.color.textMuted
+	}),
+	accent: e({
+		backgroundColor: n.color.accentSoft,
+		color: n.color.accentText
+	}),
+	success: e({
+		backgroundColor: n.color.successSoft,
+		color: n.color.success
+	}),
+	warning: e({
+		backgroundColor: n.color.warningSoft,
+		color: n.color.warning
+	}),
+	danger: e({
+		backgroundColor: n.color.dangerSoft,
+		color: n.color.dangerText
+	})
+};
+function o({ ref: e, tone: n = "neutral", className: o, sx: s, ...c }) {
+	return /* @__PURE__ */ r(t, {
+		className: o,
+		styles: [i, a[n]],
+		sx: s,
+		children: (t) => /* @__PURE__ */ r("span", {
+			...c,
+			ref: e,
+			"data-ui": "pill",
+			"data-tone": n,
+			className: t
+		})
+	});
+}
+o.displayName = "Pill";
+//#endregion
+export { o as t };

package/dist/pill.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Pill } from "./pill-2_XzBdkD.js";
+export { t as Pill } from "./pill-DO2gHzMb.js";