@jfrader/ui 0.4.0 → 0.5.1

package/dist/segmented-control-8ZUGnsZm.js

@@ -0,0 +1,327 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { n as a, r as o, t as s } from "./roving-focus-CYlo_Kf8.js";
+import { t as c } from "./use-controlled-state-DpeVQZNR.js";
+import { t as l } from "./renderable-DzcIj1Lo.js";
+import { createContext as u, useContext as d, useEffect as f, useId as p, useImperativeHandle as m, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
+import { vars as y } from "@jfrader/tokens/vars";
+import { jsx as b, jsxs as x } from "@emotion/react/jsx-runtime";
+import { LayoutGroup as S, MotionConfig as C, motion as w, useReducedMotion as T } from "motion/react";
+//#region src/components/segmented-control/segmented-control.tsx
+var E = u(null), D = {
+	itemSelector: "[data-ui=\"segmented-control-item\"]:not([disabled])",
+	ownerSelector: "[data-ui=\"segmented-control\"]"
+}, O = {
+	...D,
+	itemSelector: "[data-ui=\"segmented-control-item\"]"
+}, k = {
+	type: "spring",
+	stiffness: 500,
+	damping: 40
+}, A = e({
+	display: "inline-flex",
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	border: `1px solid ${y.color.borderControl}`,
+	borderRadius: y.radius.md,
+	backgroundColor: y.color.surfaceInset,
+	fontFamily: y.font.sans,
+	[r]: { borderColor: "CanvasText" }
+}), j = e({
+	display: "flex",
+	position: "relative",
+	minInlineSize: 0,
+	overflowX: "auto",
+	padding: y.space[1],
+	gap: y.space[1],
+	borderRadius: "inherit",
+	borderInlineStart: "1px solid transparent",
+	borderInlineEnd: "1px solid transparent",
+	"&[data-overflow-start=\"true\"]": { borderInlineStartColor: y.color.borderControl },
+	"&[data-overflow-end=\"true\"]": { borderInlineEndColor: y.color.borderControl },
+	[r]: {
+		"&[data-overflow-start=\"true\"]": { borderInlineStartColor: "CanvasText" },
+		"&[data-overflow-end=\"true\"]": { borderInlineEndColor: "CanvasText" }
+	}
+}), M = e({
+	appearance: "none",
+	position: "relative",
+	isolation: "isolate",
+	flexShrink: 0,
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: y.space[2],
+	boxSizing: "border-box",
+	border: "1px solid transparent",
+	borderRadius: y.radius.sm,
+	paddingBlock: y.space[1],
+	paddingInline: y.space[3],
+	background: "transparent",
+	color: y.color.textMuted,
+	fontFamily: "inherit",
+	fontWeight: y.fontWeight.medium,
+	lineHeight: y.lineHeight.base,
+	whiteSpace: "nowrap",
+	cursor: "pointer",
+	transitionProperty: "color, background-color, border-color",
+	transitionDuration: y.motion.duration.fast,
+	transitionTimingFunction: y.motion.easeStandard,
+	"&:hover:not(:disabled):not([aria-checked=\"true\"])": {
+		backgroundColor: y.color.surfaceHover,
+		color: y.color.text
+	},
+	"&[aria-checked=\"true\"]": {
+		borderColor: y.color.borderControl,
+		color: y.color.text
+	},
+	"&:focus-visible": { ...n },
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	[i]: { transitionDuration: "0s" },
+	[r]: { "&[aria-checked=\"true\"]": {
+		borderColor: "Highlight",
+		color: "CanvasText",
+		textDecoration: "underline"
+	} }
+}), N = {
+	sm: e({
+		minBlockSize: y.space[8],
+		fontSize: y.textSize.sm
+	}),
+	md: e({
+		minBlockSize: y.space[10],
+		fontSize: y.textSize.sm
+	}),
+	lg: e({
+		minBlockSize: y.space[12],
+		fontSize: y.textSize.md
+	})
+}, P = e({
+	"&[aria-checked=\"true\"]": {
+		color: y.color.accentContrast,
+		borderColor: y.color.accentContrast
+	},
+	[r]: { "&[aria-checked=\"true\"]": {
+		color: "CanvasText",
+		borderColor: "Highlight"
+	} }
+}), F = e({
+	position: "absolute",
+	inset: 0,
+	zIndex: -1,
+	borderRadius: "inherit",
+	pointerEvents: "none",
+	[r]: {
+		backgroundColor: "Canvas",
+		boxShadow: "none"
+	}
+}), I = {
+	soft: e({
+		backgroundColor: y.color.surfaceRaised,
+		boxShadow: y.shadow.raised
+	}),
+	solid: e({ backgroundColor: y.color.accent })
+};
+function L({ ref: e, variant: t, slotProps: n, style: r, ...i }) {
+	return /* @__PURE__ */ b("span", {
+		...n,
+		...i,
+		ref: e,
+		"aria-hidden": "true",
+		hidden: !1,
+		role: void 0,
+		tabIndex: void 0,
+		"data-ui": "segmented-control-selection",
+		children: void 0,
+		style: {
+			...n?.style,
+			...r,
+			position: "absolute",
+			inset: 0,
+			inlineSize: "auto",
+			blockSize: "auto",
+			pointerEvents: "none"
+		},
+		css: [
+			I[t],
+			F,
+			n?.css
+		]
+	});
+}
+var R = w.create(L);
+function z({ ref: e, value: n, defaultValue: r, onValueChange: i, disabled: l = !1, size: u = "md", variant: d = "soft", label: y, onOptionIntent: x, slotProps: w, className: k, sx: M, children: N, onKeyDown: P, ...F }) {
+	let [I, L] = c(n, r, i), [R, z] = v(null), [B, V] = v(), H = _(null), U = _(null);
+	m(e, () => H.current, []);
+	let W = p(), G = T(), K = _(!1);
+	h(() => {
+		let e = H.current;
+		if (!e) return;
+		let t = () => {
+			let t = o(e, D);
+			V((s(t, R) ?? s(t, I) ?? t[0])?.dataset.value);
+		};
+		t();
+		let n = new MutationObserver(t);
+		return n.observe(e, {
+			subtree: !0,
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["disabled", "data-value"]
+		}), () => n.disconnect();
+	}), f(() => {
+		let e = H.current, t = U.current;
+		if (!e || !t) return;
+		let n = () => {
+			let n = o(e, O), r = t.getBoundingClientRect(), i = n[0]?.getBoundingClientRect(), a = n.at(-1)?.getBoundingClientRect(), s = getComputedStyle(e).direction === "rtl";
+			t.dataset.overflowStart = String(!!(i && (s ? i.right > r.right : i.left < r.left))), t.dataset.overflowEnd = String(!!(a && (s ? a.left < r.left : a.right > r.right)));
+		}, r = new ResizeObserver(n);
+		return r.observe(t), o(e, O).forEach((e) => r.observe(e)), t.addEventListener("scroll", n, { passive: !0 }), n(), () => {
+			r.disconnect(), t.removeEventListener("scroll", n);
+		};
+	}), f(() => {
+		let e = H.current, t = U.current;
+		if (!e || !t) return;
+		let n = o(e, O), r = e.ownerDocument.activeElement, i = n.includes(r) ? r : s(n, I);
+		if (i) {
+			let e = t.getBoundingClientRect(), n = i.getBoundingClientRect(), r = parseFloat(getComputedStyle(t).paddingInlineStart), a = e.left + r, o = e.right - r, s = n.left < a ? n.left - a : n.right > o ? n.right - o : 0;
+			s && t.scrollBy({
+				left: s,
+				behavior: G || !K.current ? "instant" : "smooth"
+			});
+		}
+		K.current = !0;
+	}, [
+		R,
+		I,
+		G
+	]);
+	let q = g(() => ({
+		value: I,
+		requestChange: L,
+		setFocused: z,
+		tabStop: B,
+		disabled: l,
+		size: u,
+		variant: d,
+		onOptionIntent: x,
+		selection: w?.selection,
+		reducedMotion: G
+	}), [
+		I,
+		L,
+		B,
+		l,
+		u,
+		d,
+		x,
+		w?.selection,
+		G
+	]), J = (e) => {
+		P?.(e);
+		let t = H.current;
+		if (!(e.defaultPrevented || !t || l) && (a(e, t, e.key === "ArrowUp" || e.key === "ArrowDown" ? "vertical" : "horizontal", D), e.defaultPrevented)) {
+			let e = t.ownerDocument.activeElement;
+			o(t, D).includes(e) && e.dataset.value !== void 0 && L(e.dataset.value);
+		}
+	};
+	return /* @__PURE__ */ b(E.Provider, {
+		value: q,
+		children: /* @__PURE__ */ b(C, {
+			reducedMotion: "user",
+			children: /* @__PURE__ */ b(S, {
+				id: W,
+				children: /* @__PURE__ */ b(t, {
+					className: k,
+					styles: A,
+					sx: M,
+					children: (e) => /* @__PURE__ */ b("div", {
+						...F,
+						ref: H,
+						role: "radiogroup",
+						"aria-label": y ?? F["aria-label"],
+						"aria-disabled": l || F["aria-disabled"],
+						"data-ui": "segmented-control",
+						onKeyDown: J,
+						className: e,
+						children: /* @__PURE__ */ b("div", {
+							...w?.track,
+							ref: U,
+							"aria-hidden": void 0,
+							hidden: !1,
+							role: void 0,
+							tabIndex: void 0,
+							"data-ui": "segmented-control-track",
+							css: [j, w?.track?.css],
+							children: N
+						})
+					})
+				})
+			})
+		})
+	});
+}
+z.displayName = "SegmentedControl";
+function B({ ref: e, value: n, accessory: r, children: i, disabled: a, className: o, sx: s, onClick: c, onFocus: u, onPointerEnter: f, "aria-labelledby": m, "aria-describedby": h, ...g }) {
+	let _ = d(E);
+	if (!_) throw Error("SegmentedControl.Item must be rendered inside <SegmentedControl>.");
+	let v = p(), y = _.disabled || a, S = _.value === n, C = l(i), w = l(r);
+	return /* @__PURE__ */ b(t, {
+		className: o,
+		styles: [
+			M,
+			N[_.size],
+			_.variant === "solid" && P
+		],
+		sx: s,
+		children: (t) => /* @__PURE__ */ x("button", {
+			...g,
+			ref: e,
+			type: "button",
+			role: "radio",
+			"data-ui": "segmented-control-item",
+			"data-value": n,
+			"aria-checked": S,
+			disabled: y,
+			tabIndex: !y && _.tabStop === n ? 0 : -1,
+			"aria-labelledby": [m, C && `${v}-label`].filter(Boolean).join(" ") || void 0,
+			"aria-describedby": [h, w && `${v}-accessory`].filter(Boolean).join(" ") || void 0,
+			onClick: (e) => {
+				c?.(e), !e.defaultPrevented && !y && _.requestChange(n);
+			},
+			onFocus: (e) => {
+				u?.(e), y || (_.setFocused(n), _.onOptionIntent?.(n));
+			},
+			onPointerEnter: (e) => {
+				f?.(e), y || _.onOptionIntent?.(n);
+			},
+			className: t,
+			children: [
+				S && /* @__PURE__ */ b(R, {
+					variant: _.variant,
+					slotProps: _.selection,
+					layoutId: "selection",
+					initial: !1,
+					transition: _.reducedMotion ? { duration: 0 } : k
+				}),
+				C && /* @__PURE__ */ b("span", {
+					id: `${v}-label`,
+					children: i
+				}),
+				w && /* @__PURE__ */ b("span", {
+					id: `${v}-accessory`,
+					children: r
+				})
+			]
+		})
+	});
+}
+B.displayName = "SegmentedControl.Item";
+var V = Object.assign(z, { Item: B });
+//#endregion
+export { V as t };

package/dist/segmented-control.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as SegmentedControl } from "./segmented-control-8ZUGnsZm.js";

package/dist/select-D5rhJ8gi.js

@@ -0,0 +1,293 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./use-controlled-state-DpeVQZNR.js";
+import { t as r } from "./trigger-style-B1KVC8O1.js";
+import { t as i } from "./overlay-layer-qEbpEtb8.js";
+import { a, i as o, n as s, o as c, r as l, s as u, t as d } from "./listbox-style-WX-RASp1.js";
+import { a as f, r as p, t as m } from "./collection-registry-k6JcD3Jr.js";
+import { t as h } from "./overlay-portal-C4JZFq2M.js";
+import { t as g } from "./use-overlay-floating-Bx2jBKAA.js";
+import { createContext as _, useContext as v, useId as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as C } from "react";
+import { vars as w } from "@jfrader/tokens/vars";
+import { jsx as T, jsxs as E } from "@emotion/react/jsx-runtime";
+import { FloatingList as D, useClick as O, useDismiss as k, useInteractions as A, useListNavigation as j, useMergeRefs as M, useRole as N } from "@floating-ui/react";
+//#region src/components/select/select.tsx
+var P = 500, F = new Intl.Collator(void 0, {
+	usage: "search",
+	sensitivity: "base"
+}), I = "✓", L = _(null), R = _(!1);
+function z(e) {
+	let t = v(L);
+	if (!t) throw Error(`Select.${e} must be rendered inside <Select>.`);
+	return t;
+}
+function B() {
+	let e = z("Item");
+	if (!v(R)) throw Error("Select.Item must be rendered inside <Select.Content>.");
+	return e;
+}
+var V = e({
+	justifyContent: "flex-start",
+	minInlineSize: "180px",
+	maxInlineSize: "100%",
+	"&[aria-expanded=\"true\"]": { backgroundColor: w.color.surfaceHover }
+}), H = e({
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap",
+	"&[data-placeholder]": { color: w.color.textMuted }
+});
+function U({ value: e, defaultValue: t, onValueChange: r, open: i, defaultOpen: a = !1, onOpenChange: o, placement: s = "bottom-start", disabled: c = !1, name: l, children: u }) {
+	let d = y(), [p, m] = n(e, t, r), [h = !1, _] = n(i, a, o), [v, b] = C(null), [w, D] = C(!1), [M, P] = f(), [I, R] = C(null), z = S([]), B = S([]), V = S(null);
+	!h && w && (D(!1), b(null));
+	let { valuesByIndex: H, disabledIndices: U } = x(() => {
+		let e = [], t = /* @__PURE__ */ new Set();
+		return M.forEach((n, r) => {
+			n.index !== -1 && (e[n.index] = r, n.disabled && t.add(n.index));
+		}), {
+			valuesByIndex: e,
+			disabledIndices: t
+		};
+	}, [M]), W = p === void 0 ? void 0 : M.get(p), G = W && W.index !== -1 ? W.index : null, { refs: K, floatingStyles: q, context: J } = g({
+		open: h,
+		placement: s,
+		onOpenChange: (e) => _(e)
+	}), Y = O(J), X = N(J, { role: "listbox" }), ee = k(J, {
+		escapeKey: !0,
+		outsidePress: !0
+	}), te = j(J, {
+		listRef: z,
+		activeIndex: v,
+		onNavigate: b,
+		virtual: !0,
+		virtualItemRef: V,
+		loop: !0,
+		focusItemOnOpen: !0,
+		selectedIndex: w ? null : G,
+		disabledIndices: (e) => U.has(e)
+	}), { getReferenceProps: Z, getFloatingProps: Q, getItemProps: $ } = A([
+		Y,
+		X,
+		ee,
+		te
+	]), ne = x(() => {
+		let e = (e) => {
+			m(e), _(!1);
+		};
+		return {
+			baseId: d,
+			open: h,
+			disabled: c,
+			selectedValue: p,
+			activeIndex: v,
+			options: M,
+			triggerLabelling: I,
+			refs: K,
+			floatingStyles: q,
+			elementsRef: z,
+			labelsRef: B,
+			getReferenceProps: Z,
+			getFloatingProps: Q,
+			getItemProps: $,
+			selectValue: e,
+			matchTypeahead: (e) => {
+				let t = B.current, n = v ?? -1;
+				for (let r = 1; r <= t.length; r += 1) {
+					let i = (n + r) % t.length, a = t[i];
+					if (!(a == null || U.has(i)) && F.compare(a.slice(0, e.length), e) === 0) {
+						b(i), h || (D(!0), _(!0));
+						return;
+					}
+				}
+			},
+			selectIndex: (t) => {
+				let n = H[t];
+				n === void 0 || U.has(t) || e(n);
+			},
+			requestOpenChange: _,
+			registration: P,
+			setTriggerLabelling: R
+		};
+	}, [
+		d,
+		h,
+		c,
+		p,
+		v,
+		M,
+		I,
+		K,
+		q,
+		Z,
+		Q,
+		$,
+		H,
+		U,
+		m,
+		_,
+		P
+	]);
+	return /* @__PURE__ */ E(L.Provider, {
+		value: ne,
+		children: [u, l !== void 0 && /* @__PURE__ */ T("input", {
+			type: "hidden",
+			name: l,
+			value: p ?? "",
+			disabled: c
+		})]
+	});
+}
+function W(e) {
+	return /* @__PURE__ */ T(i, { children: /* @__PURE__ */ T(U, { ...e }) });
+}
+W.displayName = "Select";
+function G({ ref: e, id: n, disabled: i, onKeyDown: a, className: o, sx: s, ...c }) {
+	let { baseId: l, open: u, disabled: d, activeIndex: f, refs: p, getReferenceProps: m, selectIndex: h, matchTypeahead: g, requestOpenChange: _, setTriggerLabelling: v } = z("Trigger"), y = M([p.setReference, e]), x = S({
+		search: "",
+		lastKeyAt: 0
+	}), C = n ?? `${l}-trigger`, w = c["aria-labelledby"], E = c["aria-label"];
+	b(() => (v({
+		id: C,
+		labelledBy: w,
+		label: E
+	}), () => v(null)), [
+		C,
+		w,
+		E,
+		v
+	]);
+	let D = (e) => {
+		if (a?.(e), !(e.defaultPrevented || d || i)) {
+			if (e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.altKey && !e.metaKey) {
+				let t = performance.now(), n = x.current, r = (t - n.lastKeyAt > P ? "" : n.search) + e.key;
+				x.current = {
+					search: r,
+					lastKeyAt: t
+				}, g(r);
+			} else u && (e.key === "Tab" ? _(!1) : (e.key === "Enter" || e.key === " ") && f !== null && (e.preventDefault(), h(f)));
+		}
+	};
+	return /* @__PURE__ */ T(t, {
+		className: o,
+		styles: [r, V],
+		sx: s,
+		children: (e) => /* @__PURE__ */ T("button", {
+			type: "button",
+			...m({
+				...c,
+				id: C,
+				disabled: d || i,
+				onKeyDown: D
+			}),
+			ref: y,
+			"data-state": u ? "open" : "closed",
+			"data-ui": "select-trigger",
+			className: e
+		})
+	});
+}
+G.displayName = "Select.Trigger";
+function K({ ref: e, placeholder: n, className: r, sx: i, ...a }) {
+	let { selectedValue: o, options: s } = z("Value"), c = o === void 0 ? void 0 : s.get(o)?.label, l = c === void 0;
+	return /* @__PURE__ */ T(t, {
+		className: r,
+		styles: H,
+		sx: i,
+		children: (t) => /* @__PURE__ */ T("span", {
+			...a,
+			ref: e,
+			"data-placeholder": l || void 0,
+			"data-ui": "select-value",
+			className: t,
+			children: l ? n : c
+		})
+	});
+}
+K.displayName = "Select.Value";
+function q({ ref: e, style: n, onMouseDown: r, children: i, className: a, sx: o, ...s }) {
+	let { open: l, triggerLabelling: d, refs: f, floatingStyles: p, elementsRef: m, getFloatingProps: g } = z("Content"), _ = M([l ? f.setFloating : null, e]), v = s["aria-labelledby"] !== void 0 || s["aria-label"] !== void 0 ? {} : d?.labelledBy === void 0 ? d?.label === void 0 ? { "aria-labelledby": d?.id } : { "aria-label": d.label } : { "aria-labelledby": d.labelledBy }, y = (e) => {
+		r?.(e), e.preventDefault();
+	};
+	return /* @__PURE__ */ T(h, { children: /* @__PURE__ */ T(t, {
+		className: a,
+		styles: [u, c],
+		sx: o,
+		children: (e) => /* @__PURE__ */ T("div", {
+			...g({
+				...v,
+				...s,
+				onMouseDown: y
+			}),
+			ref: _,
+			hidden: !l,
+			"data-state": l ? "open" : "closed",
+			"data-ui": "select-listbox",
+			style: {
+				...n,
+				...p
+			},
+			className: e,
+			children: /* @__PURE__ */ T(D, {
+				elementsRef: m,
+				children: /* @__PURE__ */ T(R.Provider, {
+					value: !0,
+					children: i
+				})
+			})
+		})
+	}) });
+}
+q.displayName = "Select.Content";
+function J({ ref: e, value: n, disabled: r = !1, onClick: i, children: c, className: u, sx: f, ...h }) {
+	let { baseId: g, selectedValue: _, activeIndex: v, labelsRef: y, getItemProps: b, selectValue: x, registration: C } = B(), w = S(null), { ref: D, index: O } = p(n, C, w, (e, t) => ({
+		index: e,
+		label: t,
+		disabled: r
+	}), {
+		labelsRef: y,
+		include: !r
+	}), k = M([D, e]), A = O !== -1 && v === O, j = _ === n, N = (e) => {
+		i?.(e), !(r || e.defaultPrevented) && x(n);
+	};
+	return /* @__PURE__ */ T(t, {
+		className: u,
+		styles: [
+			s,
+			d,
+			o
+		],
+		sx: f,
+		children: (e) => /* @__PURE__ */ E("div", {
+			...b({
+				id: m(g, n),
+				...h,
+				onClick: N
+			}),
+			ref: k,
+			role: "option",
+			"aria-selected": j,
+			"aria-disabled": r || void 0,
+			"data-active": A || void 0,
+			"data-ui": "select-item",
+			className: e,
+			children: [/* @__PURE__ */ T("span", {
+				ref: w,
+				css: a,
+				children: c
+			}), j && /* @__PURE__ */ T("span", {
+				"aria-hidden": "true",
+				css: l,
+				children: I
+			})]
+		})
+	});
+}
+J.displayName = "Select.Item";
+var Y = Object.assign(W, {
+	Trigger: G,
+	Value: K,
+	Content: q,
+	Item: J
+});
+//#endregion
+export { Y as t };

package/dist/select.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Select } from "./select-BgG7WgSh.js";
+export { t as Select } from "./select-D5rhJ8gi.js";