@jfrader/ui 0.1.2 → 0.3.0

package/dist/card-D-aI2QHx.js

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

package/dist/checkbox-COYG6L7d.js

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

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