@jfrader/ui 0.2.0 → 0.4.0

package/dist/{choice-control-ByFogYcT.js → choice-control-5kJkLXgv.js}

@@ -1,5 +1,5 @@
 'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
+import { r as e } from "./sx-Dx9JUKp5.js";
 import { vars as t } from "@jfrader/tokens/vars";
 //#region src/styling/choice-control.ts
 var n = e({

package/dist/{collection-registry-1l9f3XJZ.js → collection-registry-BTYi6zGh.js}

@@ -1,5 +1,5 @@
 'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
+import { r as e } from "./sx-Dx9JUKp5.js";
 import { t } from "./part-id-D0zksy32.js";
 import { useCallback as n, useLayoutEffect as r, useMemo as i, useState as a } from "react";
 import { vars as o } from "@jfrader/tokens/vars";

package/dist/combobox-DiMC2g_u.js

@@ -0,0 +1,327 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n, t as r } from "./use-controlled-state-CVXDa-qM.js";
+import { t as i } from "./renderable-DzcIj1Lo.js";
+import { a, c as o, d as s, f as c, l, o as u, r as d, s as f, t as p, u as m } from "./collection-registry-BTYi6zGh.js";
+import { n as h, t as g } from "./use-overlay-floating-Bit-f0FU.js";
+import { t as _ } from "./text-field-D60ok14S.js";
+import { createContext as v, useCallback as y, useContext as b, useId as x, useLayoutEffect as S, useMemo as C, useRef as w, useState as T } from "react";
+import { vars as E } from "@jfrader/tokens/vars";
+import { jsx as D, jsxs as O } from "@emotion/react/jsx-runtime";
+import { FloatingList as k, useDismiss as ee, useInteractions as A, useListNavigation as j, useMergeRefs as M } from "@floating-ui/react";
+//#region src/components/combobox/combobox.tsx
+var N = "bottom-start", P = "✓", F = "No results", te = (e, t) => e.toLocaleLowerCase().includes(t.toLocaleLowerCase()), I = v(null), L = v(!1);
+function R(e) {
+	let t = b(I);
+	if (!t) throw Error(`Combobox.${e} must be rendered inside <Combobox>.`);
+	return t;
+}
+function z(e) {
+	let t = R(e);
+	if (!b(L)) throw Error(`Combobox.${e} must be rendered inside <Combobox.List>.`);
+	return t;
+}
+var B = e({ "&[hidden]": { display: "none" } }), ne = e({
+	paddingBlock: E.space[1],
+	paddingInline: E.space[2],
+	fontSize: E.textSize.sm,
+	color: E.color.textMuted
+});
+function V({ value: e, defaultValue: t, onValueChange: i, open: o, defaultOpen: s = !1, onOpenChange: c, name: l, filter: u = te, onInputChange: d, children: f }) {
+	let p = x(), [m, h] = T(`${p}-listbox`), [_, v] = T(!1), [b = null, S] = r(e, t ?? null, i), [E = !1, k] = r(o, s, c), [M, P] = T(null), [F, L] = T(""), [R, z] = a(), [B, ne] = T(null), V = w([]), H = w(null), U = n(d), W = y((e, t) => t === "" || u(e, t), [u]), { valuesByIndex: G, skippedIndices: K, matchCount: re } = C(() => {
+		let e = [], t = /* @__PURE__ */ new Set(), n = 0;
+		return R.forEach((r, i) => {
+			if (r.index === -1) return;
+			e[r.index] = i;
+			let a = W(r.label, F);
+			a && (n += 1), (r.disabled || !a) && t.add(r.index);
+		}), {
+			valuesByIndex: e,
+			skippedIndices: t,
+			matchCount: n
+		};
+	}, [
+		R,
+		F,
+		W
+	]), { refs: q, floatingStyles: J, context: Y } = g({
+		open: E,
+		placement: N,
+		onOpenChange: (e) => k(e)
+	}), X = ee(Y, {
+		escapeKey: !0,
+		outsidePress: !0
+	}), ie = j(Y, {
+		listRef: V,
+		activeIndex: M,
+		onNavigate: P,
+		virtual: !0,
+		loop: !0,
+		disabledIndices: (e) => K.has(e)
+	}), { getReferenceProps: Z, getFloatingProps: Q, getItemProps: $ } = A([X, ie]), ae = C(() => {
+		let e = (e) => {
+			S(e), k(!1), H.current?.commitLabel(R.get(e)?.label ?? "");
+		};
+		return {
+			baseId: p,
+			listId: m,
+			setListId: h,
+			setInputDisabled: v,
+			open: E,
+			selectedValue: b,
+			activeIndex: M,
+			options: R,
+			matchCount: re,
+			inputLabelling: B,
+			inputHandleRef: H,
+			refs: q,
+			floatingStyles: J,
+			elementsRef: V,
+			getReferenceProps: Z,
+			getFloatingProps: Q,
+			getItemProps: $,
+			onInputChange: U,
+			isVisible: (e) => W(e, F),
+			findMatches: (e) => {
+				let t = 0, n = null, r = null;
+				return R.forEach((i) => {
+					i.index !== -1 && W(i.label, e) && (t += 1, !i.disabled && ((n === null || i.index < n) && (n = i.index), (r === null || i.index > r) && (r = i.index)));
+				}), {
+					count: t,
+					first: n,
+					last: r
+				};
+			},
+			setQuery: L,
+			setActiveIndex: P,
+			selectValue: e,
+			selectIndex: (t) => {
+				let n = G[t];
+				n === void 0 || K.has(t) || e(n);
+			},
+			clearValue: () => S(null),
+			requestOpenChange: k,
+			registration: z,
+			setInputLabelling: ne
+		};
+	}, [
+		p,
+		m,
+		E,
+		b,
+		M,
+		R,
+		F,
+		re,
+		B,
+		q,
+		J,
+		Z,
+		Q,
+		$,
+		U,
+		W,
+		G,
+		K,
+		S,
+		k,
+		z
+	]);
+	return /* @__PURE__ */ O(I.Provider, {
+		value: ae,
+		children: [f, l !== void 0 && /* @__PURE__ */ D("input", {
+			type: "hidden",
+			name: l,
+			value: b ?? "",
+			disabled: _
+		})]
+	});
+}
+V.displayName = "Combobox";
+function H({ ref: e, inputValue: t, defaultInputValue: n, label: a, description: o, error: s, size: c, slotProps: l, className: u, sx: d, id: f, onChange: p, onKeyDown: m, onBlur: h, disabled: g = !1, ...v }) {
+	let { listId: y, open: b, selectedValue: C, activeIndex: w, options: E, inputHandleRef: O, refs: k, getReferenceProps: ee, onInputChange: A, findMatches: j, setQuery: N, setActiveIndex: P, selectIndex: F, clearValue: te, requestOpenChange: I, setInputLabelling: L, setInputDisabled: z } = R("Input"), B = M([k.setReference, e]), ne = x(), V = f ?? ne, H = `${V}-label`, U = i(a), W = v["aria-labelledby"], G = v["aria-label"], [K, re] = T(n), [q, J] = T(() => (t ?? n) !== void 0), Y = C === null ? void 0 : E.get(C)?.label, X = t ?? (q ? K ?? "" : Y ?? K ?? ""), [, ie] = r(X, void 0, A), Z = (e) => {
+		ie(e), t === void 0 && re(e);
+	}, Q = t !== void 0 || q ? X : "", $ = (e) => {
+		J(!1), Z(e);
+	};
+	S(() => {
+		N(Q);
+	}, [Q, N]), S(() => (z(g), () => z(!1)), [g, z]), S(() => (O.current = { commitLabel: $ }, () => {
+		O.current = null;
+	})), S(() => (L(W !== void 0 || !U ? {
+		labelledBy: W,
+		label: G
+	} : { labelledBy: H }), () => L(null)), [
+		W,
+		G,
+		U,
+		H,
+		L
+	]);
+	let ae = (e) => {
+		p?.(e);
+		let n = e.currentTarget.value;
+		J(!0), Z(n), n === "" && te();
+		let r = t ?? n;
+		if (r === "") {
+			P(null), I(!1);
+			return;
+		}
+		let i = j(r);
+		P(i.first), i.count > 0 && I(!0);
+	}, oe = (e) => {
+		if (m?.(e), !e.defaultPrevented) {
+			if (e.key === "Escape") q && Y !== void 0 && $(Y);
+			else if (b) {
+				if (e.key === "Enter" && w !== null) e.preventDefault(), F(w);
+				else if (e.key === "Home" || e.key === "End") {
+					let t = j(Q), n = e.key === "Home" ? t.first : t.last;
+					if (n === null) return;
+					e.preventDefault(), P(n);
+				}
+			}
+		}
+	}, se = (e) => {
+		h?.(e), b && I(!1);
+	};
+	return /* @__PURE__ */ D(_, {
+		...ee({
+			...v,
+			onKeyDown: oe,
+			onBlur: se
+		}),
+		ref: B,
+		id: V,
+		label: U ? /* @__PURE__ */ D("span", {
+			id: H,
+			children: a
+		}) : a,
+		description: o,
+		error: s,
+		size: c,
+		slotProps: l,
+		className: u,
+		sx: d,
+		value: X,
+		disabled: g,
+		onChange: ae,
+		role: "combobox",
+		autoComplete: "off",
+		"aria-autocomplete": "list",
+		"aria-expanded": b,
+		"aria-controls": b ? y : void 0,
+		"data-state": b ? "open" : "closed",
+		"data-ui": "combobox-input"
+	});
+}
+H.displayName = "Combobox.Input";
+function U({ ref: e, id: n, style: r, onMouseDown: i, children: a, className: o, sx: l, ...u }) {
+	let { baseId: d, setListId: f, open: p, inputLabelling: m, refs: g, floatingStyles: _, elementsRef: v, getFloatingProps: y } = R("List"), b = n ?? `${d}-listbox`;
+	S(() => (f(b), () => f(`${d}-listbox`)), [
+		d,
+		b,
+		f
+	]);
+	let x = M([p ? g.setFloating : null, e]), C = u["aria-labelledby"] !== void 0 || u["aria-label"] !== void 0 ? {} : m?.labelledBy === void 0 ? { "aria-label": m?.label } : { "aria-labelledby": m.labelledBy }, w = (e) => {
+		i?.(e), e.preventDefault();
+	};
+	return /* @__PURE__ */ D(h, { children: /* @__PURE__ */ D(t, {
+		className: o,
+		styles: [c, s],
+		sx: l,
+		children: (e) => /* @__PURE__ */ D("div", {
+			...y({
+				id: b,
+				...C,
+				...u,
+				onMouseDown: w
+			}),
+			ref: x,
+			role: "listbox",
+			hidden: !p,
+			"data-state": p ? "open" : "closed",
+			"data-ui": "combobox-list",
+			style: {
+				...r,
+				..._
+			},
+			className: e,
+			children: /* @__PURE__ */ D(k, {
+				elementsRef: v,
+				children: /* @__PURE__ */ D(L.Provider, {
+					value: !0,
+					children: a
+				})
+			})
+		})
+	}) });
+}
+U.displayName = "Combobox.List";
+function W({ ref: e, value: n, disabled: r = !1, onClick: i, children: a, className: s, sx: c, ...h }) {
+	let { baseId: g, selectedValue: _, activeIndex: v, options: y, isVisible: b, getItemProps: x, selectValue: S, registration: C } = z("Item"), T = w(null), { ref: E, index: k } = d(n, C, T, (e, t) => ({
+		index: e,
+		label: t,
+		disabled: r
+	})), ee = M([E, e]), A = y.get(n)?.label, j = A !== void 0 && !b(A), N = k !== -1 && v === k, F = _ === n, te = (e) => {
+		i?.(e), !(r || e.defaultPrevented) && S(n);
+	};
+	return /* @__PURE__ */ D(t, {
+		className: s,
+		styles: [
+			f,
+			u,
+			l,
+			B
+		],
+		sx: c,
+		children: (e) => /* @__PURE__ */ O("div", {
+			...x({
+				id: p(g, n),
+				...h,
+				onClick: te
+			}),
+			ref: ee,
+			role: "option",
+			hidden: j,
+			"aria-selected": F,
+			"aria-disabled": r || void 0,
+			"data-active": N || void 0,
+			"data-ui": "combobox-item",
+			className: e,
+			children: [/* @__PURE__ */ D("span", {
+				ref: T,
+				css: m,
+				children: a
+			}), F && /* @__PURE__ */ D("span", {
+				"aria-hidden": "true",
+				css: o,
+				children: P
+			})]
+		})
+	});
+}
+W.displayName = "Combobox.Item";
+function G({ ref: e, children: n, className: r, sx: a, ...o }) {
+	let { matchCount: s } = z("Empty");
+	return s > 0 ? null : /* @__PURE__ */ D(t, {
+		className: r,
+		styles: ne,
+		sx: a,
+		children: (t) => /* @__PURE__ */ D("div", {
+			...o,
+			ref: e,
+			"data-ui": "combobox-empty",
+			className: t,
+			children: i(n) ? n : F
+		})
+	});
+}
+G.displayName = "Combobox.Empty";
+var K = Object.assign(V, {
+	Input: H,
+	List: U,
+	Item: W,
+	Empty: G
+});
+//#endregion
+export { K as t };

package/dist/combobox.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Combobox } from "./combobox-Bjhxv5U3.js";
+export { t as Combobox } from "./combobox-DiMC2g_u.js";