@jfrader/ui 0.1.2 → 0.2.0

package/dist/card-2IM71XZj.js

@@ -0,0 +1,134 @@
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
+import { createContext as t, useContext as n } from "react";
+import { vars as r } from "@jfrader/tokens/vars";
+import { jsx as i } from "@emotion/react/jsx-runtime";
+//#region src/components/card/card.tsx
+var a = t(void 0);
+function o(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+var s = e({
+	boxSizing: "border-box",
+	minInlineSize: 0,
+	backgroundColor: r.color.surfaceRaised,
+	border: `1px solid ${r.color.border}`,
+	borderRadius: r.radius.lg,
+	paddingBlock: r.space[4],
+	paddingInline: r.space[5],
+	fontFamily: r.font.sans,
+	lineHeight: r.lineHeight.base,
+	color: r.color.text
+}), c = {
+	flat: e({ boxShadow: "none" }),
+	raised: e({ boxShadow: r.shadow.raised })
+}, l = e({
+	display: "grid",
+	gap: r.space[1],
+	marginBlockEnd: r.space[4]
+}), u = e({
+	margin: 0,
+	fontSize: r.textSize.md,
+	fontWeight: r.fontWeight.semibold,
+	lineHeight: r.lineHeight.tight,
+	color: r.color.text
+}), d = e({
+	margin: 0,
+	fontSize: r.textSize.sm,
+	color: r.color.textMuted
+}), f = e({
+	fontSize: r.textSize.sm,
+	color: r.color.text
+}), p = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: r.space[2],
+	marginBlockStart: r.space[4],
+	paddingBlockStart: r.space[4],
+	borderBlockStart: `1px solid ${r.color.borderSubtle}`,
+	"& > :only-child": { marginInlineStart: "auto" }
+});
+function m({ ref: e, variant: t = "raised", slotProps: n, className: r, ...l }) {
+	return /* @__PURE__ */ i(a.Provider, {
+		value: n,
+		children: /* @__PURE__ */ i("div", {
+			...l,
+			ref: e,
+			"data-ui": "card",
+			"data-variant": t,
+			className: o(n?.root?.className, r),
+			css: [
+				s,
+				c[t],
+				n?.root?.css
+			]
+		})
+	});
+}
+m.displayName = "Card";
+function h({ ref: e, className: t, ...r }) {
+	let s = n(a)?.header;
+	return /* @__PURE__ */ i("div", {
+		...r,
+		ref: e,
+		"data-ui": "card-header",
+		className: o(s?.className, t),
+		css: [l, s?.css]
+	});
+}
+h.displayName = "Card.Header";
+function g({ ref: e, level: t = 3, className: r, ...s }) {
+	let c = n(a)?.title, l = `h${t}`;
+	return /* @__PURE__ */ i(l, {
+		...s,
+		ref: e,
+		"data-ui": "card-title",
+		className: o(c?.className, r),
+		css: [u, c?.css]
+	});
+}
+g.displayName = "Card.Title";
+function _({ ref: e, className: t, ...r }) {
+	let s = n(a)?.description;
+	return /* @__PURE__ */ i("p", {
+		...r,
+		ref: e,
+		"data-ui": "card-description",
+		className: o(s?.className, t),
+		css: [d, s?.css]
+	});
+}
+_.displayName = "Card.Description";
+function v({ ref: e, className: t, ...r }) {
+	let s = n(a)?.content;
+	return /* @__PURE__ */ i("div", {
+		...r,
+		ref: e,
+		"data-ui": "card-content",
+		className: o(s?.className, t),
+		css: [f, s?.css]
+	});
+}
+v.displayName = "Card.Content";
+function y({ ref: e, className: t, ...r }) {
+	let s = n(a)?.footer;
+	return /* @__PURE__ */ i("div", {
+		...r,
+		ref: e,
+		"data-ui": "card-footer",
+		className: o(s?.className, t),
+		css: [p, s?.css]
+	});
+}
+y.displayName = "Card.Footer";
+var b = Object.assign(m, {
+	Header: h,
+	Title: g,
+	Description: _,
+	Content: v,
+	Footer: y
+});
+//#endregion
+export { b as t };

package/dist/card.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Card } from "./card-D9CHtouU.js";
+export { t as Card } from "./card-2IM71XZj.js";

package/dist/checkbox-B7xGNFzp.js

@@ -0,0 +1,136 @@
+'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/checkbox.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Checkbox } from "./checkbox-DKa5BCdy.js";
+export { t as Checkbox } from "./checkbox-B7xGNFzp.js";

package/dist/combobox-Bjhxv5U3.js

@@ -0,0 +1,311 @@
+'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 };

package/dist/combobox.js

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