@jfrader/ui 0.1.1 → 0.2.0

package/dist/menu-B6KCbLCr.js

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

package/dist/menu.js

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

package/dist/navigation-BDht6S2-.js

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

package/dist/navigation.js

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

package/dist/pagination-B50PCaDU.js

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

package/dist/pagination.js

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

package/dist/{part-id-Bg1LSlk7.js → part-id-D0zksy32.js}

@@ -1,3 +1,4 @@
+'use client';
 //#region src/utils/part-id.ts
 var e = (e, t, n) => `${e}-${t}-${encodeURIComponent(n)}`;
 //#endregion

package/dist/pill-2_XzBdkD.js

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

package/dist/pill.js

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