@jfrader/ui 0.2.0 → 0.3.0

package/dist/checkbox-B7xGNFzp.js

@@ -1,136 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { n as t } from "./media-D_eA_I-e.js";
-import { t as n } from "./renderable-DzcIj1Lo.js";
-import { i as r, n as i, r as a, t as o } from "./choice-control-ByFogYcT.js";
-import { useEffect as s, useId as c, useImperativeHandle as l, useRef as u } from "react";
-import { vars as d } from "@jfrader/tokens/vars";
-import { jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
-//#region src/components/checkbox/checkbox.tsx
-var m = {
-	sm: "16px",
-	md: "20px"
-}, h = e({
-	"input:checked + span svg": { opacity: 1 },
-	"&[data-indeterminate] input + span": {
-		backgroundColor: d.color.accent,
-		borderColor: d.color.accent
-	},
-	"&[data-indeterminate] input + span svg": { opacity: 1 }
-}), g = e({
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	flexShrink: 0,
-	boxSizing: "border-box",
-	border: `1px solid ${d.color.borderControl}`,
-	borderRadius: d.radius.sm,
-	backgroundColor: d.color.surfaceRaised,
-	color: d.color.accentContrast,
-	transitionProperty: "background-color, border-color",
-	transitionDuration: d.motion.duration.fast,
-	transitionTimingFunction: d.motion.easeStandard,
-	"& svg": {
-		inlineSize: "75%",
-		blockSize: "75%",
-		opacity: 0
-	},
-	[t]: { transitionDuration: "0s" }
-}), _ = {
-	sm: e({
-		inlineSize: m.sm,
-		blockSize: m.sm
-	}),
-	md: e({
-		inlineSize: m.md,
-		blockSize: m.md
-	})
-}, v = {
-	sm: e({ fontSize: d.textSize.sm }),
-	md: e({ fontSize: d.textSize.md })
-}, y = e({
-	fontSize: d.textSize.sm,
-	color: d.color.textMuted
-}), b = {
-	sm: e({ marginInlineStart: `calc(${m.sm} + ${d.space[2]})` }),
-	md: e({ marginInlineStart: `calc(${m.md} + ${d.space[2]})` })
-};
-function x({ indeterminate: e }) {
-	return /* @__PURE__ */ f("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		children: e ? /* @__PURE__ */ f("line", {
-			x1: "4",
-			y1: "8",
-			x2: "12",
-			y2: "8"
-		}) : /* @__PURE__ */ f("polyline", { points: "3.5 8.5 6.5 11.5 12.5 4.5" })
-	});
-}
-function S({ ref: e, label: t, description: d, indeterminate: m = !1, size: S = "md", onChange: C, onCheckedChange: w, slotProps: T, className: E, "aria-labelledby": D, "aria-describedby": O, ...k }) {
-	let A = u(null);
-	l(e, () => A.current, []), s(() => {
-		A.current && (A.current.indeterminate = m);
-	}, [m]);
-	let j = c(), M = `${j}-label`, N = `${j}-description`, P = n(t), F = n(d), I = [D, P && M].filter(Boolean).join(" ") || void 0, L = [O, F && N].filter(Boolean).join(" ") || void 0, R = [E, T?.root?.className].filter(Boolean).join(" ") || void 0, z = (e) => {
-		m && (e.currentTarget.indeterminate = !0), C?.(e), w?.(e.currentTarget.checked);
-	};
-	return /* @__PURE__ */ p("label", {
-		"data-ui": "checkbox",
-		"data-indeterminate": m || void 0,
-		className: R,
-		css: [
-			a,
-			h,
-			i,
-			T?.root?.css
-		],
-		children: [/* @__PURE__ */ p("span", {
-			css: r,
-			children: [
-				/* @__PURE__ */ f("input", {
-					...k,
-					ref: A,
-					type: "checkbox",
-					"aria-labelledby": I,
-					"aria-describedby": L,
-					"aria-checked": m ? "mixed" : void 0,
-					onChange: z,
-					css: o
-				}),
-				/* @__PURE__ */ f("span", {
-					"aria-hidden": "true",
-					className: T?.control?.className,
-					css: [
-						g,
-						_[S],
-						T?.control?.css
-					],
-					children: /* @__PURE__ */ f(x, { indeterminate: m })
-				}),
-				P && /* @__PURE__ */ f("span", {
-					id: M,
-					className: T?.label?.className,
-					css: [v[S], T?.label?.css],
-					children: t
-				})
-			]
-		}), F && /* @__PURE__ */ f("span", {
-			id: N,
-			className: T?.description?.className,
-			css: [
-				y,
-				b[S],
-				T?.description?.css
-			],
-			children: d
-		})]
-	});
-}
-S.displayName = "Checkbox";
-//#endregion
-export { S as t };

package/dist/combobox-Bjhxv5U3.js

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