@jfrader/ui 0.2.0 → 0.3.0

package/dist/popover-BtN_0ejj.js

@@ -0,0 +1,113 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./use-controlled-state-CVXDa-qM.js";
+import { t as r } from "./trigger-style-B1KVC8O1.js";
+import { n as i } from "./surface-DZ4d-2aL.js";
+import { t as a } from "./use-overlay-floating-efeqppiw.js";
+import { createContext as o, useContext as s, useEffect as c, useMemo as l, useRef as u } from "react";
+import { vars as d } from "@jfrader/tokens/vars";
+import { jsx as f } from "@emotion/react/jsx-runtime";
+import { FloatingFocusManager as p, FloatingPortal as m, useClick as h, useDismiss as g, useInteractions as _, useMergeRefs as v, useRole as y } from "@floating-ui/react";
+//#region src/components/popover/popover.tsx
+var b = o(null);
+function x(e) {
+	let t = s(b);
+	if (!t) throw Error(`Popover.${e} must be rendered inside <Popover>.`);
+	return t;
+}
+var S = e({
+	...i,
+	borderRadius: d.radius.lg,
+	boxShadow: d.shadow.overlay,
+	padding: d.space[4],
+	minInlineSize: "200px",
+	maxInlineSize: "min(360px, calc(100vw - 32px))",
+	fontSize: d.textSize.sm
+});
+function C({ open: e, defaultOpen: t = !1, onOpenChange: r, placement: i = "bottom", children: o }) {
+	let [s = !1, d] = n(e, t, r), p = u(!1), { refs: m, floatingStyles: v, context: x } = a({
+		open: s,
+		placement: i,
+		onOpenChange: (e, t, n) => {
+			e || (p.current = n === "escape-key"), d(e);
+		}
+	});
+	c(() => {
+		!s && p.current && (p.current = !1, m.domReference.current?.focus());
+	}, [s, m]);
+	let S = h(x), C = g(x, {
+		escapeKey: !0,
+		outsidePress: !0
+	}), w = y(x, { role: "dialog" }), { getReferenceProps: T, getFloatingProps: E } = _([
+		S,
+		C,
+		w
+	]), D = l(() => ({
+		open: s,
+		refs: m,
+		floatingContext: x,
+		floatingStyles: v,
+		getReferenceProps: T,
+		getFloatingProps: E
+	}), [
+		s,
+		m,
+		x,
+		v,
+		T,
+		E
+	]);
+	return /* @__PURE__ */ f(b.Provider, {
+		value: D,
+		children: o
+	});
+}
+C.displayName = "Popover";
+function w({ ref: e, className: n, sx: i, ...a }) {
+	let { refs: o, getReferenceProps: s } = x("Trigger"), c = v([o.setReference, e]);
+	return /* @__PURE__ */ f(t, {
+		className: n,
+		styles: r,
+		sx: i,
+		children: (e) => /* @__PURE__ */ f("button", {
+			type: "button",
+			...s(a),
+			ref: c,
+			"data-ui": "popover-trigger",
+			className: e
+		})
+	});
+}
+w.displayName = "Popover.Trigger";
+function T({ ref: e, style: n, className: r, sx: i, ...a }) {
+	let { open: o, refs: s, floatingContext: c, floatingStyles: l, getFloatingProps: u } = x("Content"), d = v([s.setFloating, e]);
+	return o ? /* @__PURE__ */ f(m, { children: /* @__PURE__ */ f(p, {
+		context: c,
+		modal: !1,
+		initialFocus: -1,
+		returnFocus: !1,
+		closeOnFocusOut: !1,
+		children: /* @__PURE__ */ f(t, {
+			className: r,
+			styles: S,
+			sx: i,
+			children: (e) => /* @__PURE__ */ f("div", {
+				...u(a),
+				ref: d,
+				"data-ui": "popover",
+				style: {
+					...n,
+					...l
+				},
+				className: e
+			})
+		})
+	}) }) : null;
+}
+T.displayName = "Popover.Content";
+var E = Object.assign(C, {
+	Trigger: w,
+	Content: T
+});
+//#endregion
+export { E as t };

package/dist/popover.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Popover } from "./popover-DRHbeIVq.js";
+export { t as Popover } from "./popover-BtN_0ejj.js";

package/dist/progress-BpJswTG4.js

@@ -0,0 +1,90 @@
+'use client';
+import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r, t as i } from "./media-D_eA_I-e.js";
+import { t as a } from "./visually-hidden-BJdvqqvn.js";
+import { t as o } from "./renderable-DzcIj1Lo.js";
+import { useId as s } from "react";
+import { vars as c } from "@jfrader/tokens/vars";
+import { jsx as l, jsxs as u } from "@emotion/react/jsx-runtime";
+//#region src/components/progress/progress.tsx
+var d = "40%", f = "1.4s ease-in-out infinite", p = 100, m = e({
+	from: { transform: "translateX(-100%)" },
+	to: { transform: "translateX(250%)" }
+}), h = e({
+	from: { transform: "translateX(100%)" },
+	to: { transform: "translateX(-250%)" }
+}), g = t({
+	position: "relative",
+	display: "block",
+	boxSizing: "border-box",
+	blockSize: "4px",
+	overflow: "hidden",
+	backgroundColor: c.color.surfaceHover,
+	border: `1px solid ${c.color.borderSubtle}`,
+	borderRadius: c.radius.full
+}), _ = t({
+	blockSize: "100%",
+	backgroundColor: c.color.accent,
+	borderRadius: c.radius.full,
+	transitionProperty: "width",
+	transitionDuration: c.motion.duration.base,
+	transitionTimingFunction: c.motion.easeStandard,
+	[r]: { transitionDuration: "0s" },
+	[i]: {
+		forcedColorAdjust: "none",
+		backgroundColor: "Highlight"
+	}
+}), v = t({
+	inlineSize: d,
+	animation: `${m} ${f}`,
+	"&:dir(rtl)": { animation: `${h} ${f}` },
+	[r]: {
+		"&, &:dir(rtl)": { animation: "none" },
+		opacity: .7
+	}
+});
+function y(e, t) {
+	let n = Number.isFinite(t) && t > 0 ? t : p;
+	return {
+		value: e === void 0 ? void 0 : Math.min(Math.max(Number.isFinite(e) ? e : 0, 0), n),
+		max: n
+	};
+}
+function b({ ref: e, value: t, max: r = p, label: i, getValueLabel: c, slotProps: d, "aria-labelledby": f, className: m, sx: h, ...b }) {
+	let x = `${s()}-label`, S = o(i), C = [f, S && x].filter(Boolean).join(" ") || void 0, { value: w, max: T } = y(t, r), E = w === void 0, D = w === void 0 ? 0 : w / T * 100;
+	return /* @__PURE__ */ l(n, {
+		className: m,
+		styles: g,
+		sx: h,
+		children: (t) => /* @__PURE__ */ u("div", {
+			...b,
+			ref: e,
+			role: "progressbar",
+			"data-ui": "progress",
+			"data-state": E ? "indeterminate" : "determinate",
+			"aria-labelledby": C,
+			"aria-valuemin": 0,
+			"aria-valuemax": T,
+			"aria-valuenow": w,
+			"aria-valuetext": w === void 0 ? void 0 : c?.(w, T),
+			className: t,
+			children: [S && /* @__PURE__ */ l("span", {
+				id: x,
+				css: a,
+				children: i
+			}), /* @__PURE__ */ l("div", {
+				"data-ui": "progress-indicator",
+				className: d?.indicator?.className,
+				style: E ? void 0 : { width: `${D}%` },
+				css: [
+					_,
+					E && v,
+					d?.indicator?.css
+				]
+			})]
+		})
+	});
+}
+b.displayName = "Progress";
+//#endregion
+export { b as t };

package/dist/progress.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Progress } from "./progress-CpsskKTD.js";
+export { t as Progress } from "./progress-BpJswTG4.js";

package/dist/radio-group-Ce0_IWQr.js

@@ -0,0 +1,145 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n, t as r } from "./media-D_eA_I-e.js";
+import { t as i } from "./use-controlled-state-CVXDa-qM.js";
+import { t as a } from "./renderable-DzcIj1Lo.js";
+import { i as o, n as s, r as c, t as l } from "./choice-control-5kJkLXgv.js";
+import { createContext as u, useContext as d, useId as f, useMemo as p } from "react";
+import { vars as m } from "@jfrader/tokens/vars";
+import { jsx as h, jsxs as g } from "@emotion/react/jsx-runtime";
+//#region src/components/radio-group/radio-group.tsx
+var _ = u(null);
+function v(e) {
+	let t = d(_);
+	if (!t) throw Error(`RadioGroup.${e} must be rendered inside <RadioGroup>.`);
+	return t;
+}
+var y = "16px", b = {
+	vertical: e({
+		display: "grid",
+		justifyItems: "start",
+		gap: m.space[3]
+	}),
+	horizontal: e({
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "flex-start",
+		gap: m.space[4]
+	})
+}, x = e({ "input:checked + span::after": { opacity: 1 } }), S = e({ minBlockSize: "32px" }), C = e({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	inlineSize: y,
+	blockSize: y,
+	border: `1px solid ${m.color.borderControl}`,
+	borderRadius: m.radius.full,
+	backgroundColor: m.color.surfaceRaised,
+	transitionProperty: "background-color, border-color",
+	transitionDuration: m.motion.duration.fast,
+	transitionTimingFunction: m.motion.easeStandard,
+	"&::after": {
+		content: "\"\"",
+		inlineSize: "40%",
+		blockSize: "40%",
+		borderRadius: m.radius.full,
+		backgroundColor: m.color.accentContrast,
+		opacity: 0
+	},
+	[n]: { transitionDuration: "0s" },
+	[r]: { "&::after": { backgroundColor: "CanvasText" } }
+}), w = e({ fontSize: m.textSize.sm }), T = e({
+	marginInlineStart: `calc(${y} + ${m.space[2]})`,
+	fontSize: m.textSize.sm,
+	color: m.color.textMuted
+});
+function E({ ref: e, value: n, defaultValue: r, onValueChange: a, name: o, disabled: s = !1, orientation: c = "vertical", className: l, sx: u, ...d }) {
+	let m = f(), g = o ?? m, [v, y] = i(n, r, a), x = p(() => ({
+		value: v,
+		setValue: y,
+		name: g,
+		disabled: s
+	}), [
+		v,
+		y,
+		g,
+		s
+	]);
+	return /* @__PURE__ */ h(_.Provider, {
+		value: x,
+		children: /* @__PURE__ */ h(t, {
+			className: l,
+			styles: b[c],
+			sx: u,
+			children: (t) => /* @__PURE__ */ h("div", {
+				...d,
+				ref: e,
+				role: "radiogroup",
+				"aria-orientation": c,
+				"data-ui": "radio-group-root",
+				"data-orientation": c,
+				className: t
+			})
+		})
+	});
+}
+E.displayName = "RadioGroup";
+function D({ ref: e, value: n, label: r, description: i, disabled: u, onChange: d, slotProps: p, className: m, sx: _, "aria-labelledby": y, "aria-describedby": b, ...E }) {
+	let { value: D, setValue: O, name: k, disabled: A } = v("Radio"), j = A || u, M = f(), N = `${M}-label`, P = `${M}-description`, F = a(r), I = a(i), L = [y, F && N].filter(Boolean).join(" ") || void 0, R = [b, I && P].filter(Boolean).join(" ") || void 0, z = [m, p?.root?.className].filter(Boolean).join(" ") || void 0, B = (e) => {
+		d?.(e), e.currentTarget.checked && O(n);
+	};
+	return /* @__PURE__ */ h(t, {
+		className: z,
+		styles: [
+			c,
+			x,
+			s,
+			p?.root?.css
+		],
+		sx: _,
+		children: (t) => /* @__PURE__ */ g("label", {
+			"data-ui": "radio-group-radio",
+			className: t,
+			children: [/* @__PURE__ */ g("span", {
+				css: [o, S],
+				children: [
+					/* @__PURE__ */ h("input", {
+						...E,
+						ref: e,
+						type: "radio",
+						name: k,
+						value: n,
+						checked: D === n,
+						disabled: j,
+						"aria-labelledby": L,
+						"aria-describedby": R,
+						onChange: B,
+						css: l
+					}),
+					/* @__PURE__ */ h("span", {
+						"aria-hidden": "true",
+						className: p?.control?.className,
+						css: [C, p?.control?.css]
+					}),
+					F && /* @__PURE__ */ h("span", {
+						id: N,
+						className: p?.label?.className,
+						css: [w, p?.label?.css],
+						children: r
+					})
+				]
+			}), I && /* @__PURE__ */ h("span", {
+				id: P,
+				className: p?.description?.className,
+				css: [T, p?.description?.css],
+				children: i
+			})]
+		})
+	});
+}
+D.displayName = "RadioGroup.Radio";
+var O = Object.assign(E, { Radio: D });
+//#endregion
+export { O as t };

package/dist/radio-group.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as RadioGroup } from "./radio-group-DPI5KUCj.js";
+export { t as RadioGroup } from "./radio-group-Ce0_IWQr.js";

package/dist/select-BCS0-LVW.js

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

package/dist/select.js

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