@jfrader/ui 0.4.0 → 0.5.0

package/dist/radio-cards-D2QZENI_.js

@@ -0,0 +1,455 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./use-controlled-state-DpeVQZNR.js";
+import { t as a } from "./renderable-DzcIj1Lo.js";
+import { n as o, t as s } from "./choice-control-5kJkLXgv.js";
+import { createContext as c, useCallback as l, useContext as u, useEffect as d, useId as f, useImperativeHandle as p, useMemo as m, useRef as h, useState as g } from "react";
+import { vars as _ } from "@jfrader/tokens/vars";
+import { jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
+import { MotionConfig as b, animate as x, motion as S, useMotionValue as C, useReducedMotion as w } from "motion/react";
+//#region src/components/radio-cards/radio-cards.tsx
+var T = c(null), E = "12rem", D = {
+	type: "spring",
+	stiffness: 500,
+	damping: 45
+}, O = "input[data-ui=\"radio-cards-input\"]";
+function k(e) {
+	let t = u(T);
+	if (!t) throw Error(`RadioCards.${e} must be rendered inside <RadioCards>.`);
+	return t;
+}
+function A(e) {
+	return Array.from(e.querySelectorAll(O)).filter((t) => t.closest("[data-ui=\"radio-cards\"]") === e);
+}
+function j(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+var M = e({
+	position: "relative",
+	display: "grid",
+	gap: _.space[3],
+	minInlineSize: 0,
+	fontFamily: _.font.sans,
+	lineHeight: _.lineHeight.base,
+	color: _.color.text
+}), N = {
+	grid: e({ gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, var(--radio-cards-column)), 1fr))" }),
+	list: e({ gridTemplateColumns: "minmax(0, 1fr)" })
+}, P = e({
+	position: "relative",
+	display: "flex",
+	minInlineSize: 0,
+	cursor: "pointer",
+	"input:checked + span": {
+		borderColor: _.color.accent,
+		backgroundColor: _.color.accentSoft
+	},
+	"input:checked + span [data-ui=\"radio-cards-indicator\"]": { borderColor: _.color.accent },
+	"input:checked + span [data-ui=\"radio-cards-indicator\"]::after": { transform: "scale(1)" },
+	"&:hover:not(:has(input:disabled)) input:not(:checked) + span": { backgroundColor: _.color.surfaceHover },
+	"&:has(input:disabled)": {
+		opacity: 1,
+		cursor: "not-allowed"
+	},
+	"&:has(input:disabled) > span": { borderStyle: "dashed" },
+	[n]: {
+		"input:checked + span": {
+			borderColor: "Highlight",
+			backgroundColor: "Canvas"
+		},
+		"input:checked + span [data-ui=\"radio-cards-indicator\"]": { borderColor: "Highlight" },
+		"input:focus-visible + span": { outlineColor: "Highlight" },
+		"&:has(input:disabled) > span": { borderColor: "GrayText" }
+	}
+}), F = e({
+	inset: 0,
+	inlineSize: "100%",
+	blockSize: "100%",
+	cursor: "inherit"
+}), I = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "flex-start",
+	gap: _.space[2],
+	inlineSize: "100%",
+	minInlineSize: 0,
+	minBlockSize: _.space[8],
+	boxSizing: "border-box",
+	border: `2px solid ${_.color.borderControl}`,
+	borderRadius: _.radius.lg,
+	backgroundColor: _.color.surfaceRaised,
+	color: _.color.text,
+	transitionProperty: "background-color, border-color",
+	transitionDuration: _.motion.duration.fast,
+	transitionTimingFunction: _.motion.easeStandard,
+	[r]: { transitionDuration: "0s" },
+	[n]: { borderColor: "CanvasText" }
+}), L = {
+	sm: e({
+		padding: _.space[3],
+		fontSize: _.textSize.sm
+	}),
+	md: e({
+		padding: _.space[4],
+		fontSize: _.textSize.md
+	})
+}, R = e({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	inlineSize: _.space[4],
+	blockSize: _.space[4],
+	marginBlockStart: _.space[1],
+	border: `1px solid ${_.color.borderControl}`,
+	borderRadius: _.radius.full,
+	"&::after": {
+		content: "\"\"",
+		inlineSize: "50%",
+		blockSize: "50%",
+		borderRadius: _.radius.full,
+		backgroundColor: _.color.accent,
+		transform: "scale(0)",
+		transitionProperty: "transform",
+		transitionDuration: _.motion.duration.fast,
+		transitionTimingFunction: _.motion.easeStandard
+	},
+	[r]: { "&::after": { transitionDuration: "0s" } },
+	[n]: {
+		borderColor: "CanvasText",
+		"&::after": { backgroundColor: "Highlight" }
+	}
+}), z = e({
+	display: "grid",
+	gap: _.space[1],
+	flex: "1 1 8rem",
+	minInlineSize: 0,
+	overflowWrap: "anywhere"
+}), B = e({ fontWeight: _.fontWeight.medium }), V = e({
+	fontSize: _.textSize.sm,
+	color: _.color.textMuted
+}), H = e({
+	marginInlineStart: "auto",
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	overflowWrap: "anywhere",
+	fontSize: _.textSize.sm
+}), U = e({
+	display: "inline-flex",
+	flexShrink: 0,
+	fontSize: _.textSize.lg,
+	"& > svg": {
+		inlineSize: "1em",
+		blockSize: "1em"
+	}
+}), W = e({
+	gridColumn: "1 / -1",
+	minInlineSize: 0,
+	overflowWrap: "anywhere"
+}), G = e({
+	gridColumn: "1 / -1",
+	color: _.color.dangerText,
+	fontSize: _.textSize.sm
+}), K = e({
+	position: "absolute",
+	top: 0,
+	left: 0,
+	boxSizing: "border-box",
+	pointerEvents: "none",
+	border: `2px solid ${_.color.accent}`,
+	borderRadius: _.radius.lg,
+	[n]: { borderColor: "Highlight" }
+});
+function q({ root: e, value: t, content: n }) {
+	let r = w(), i = C(0), a = C(0), o = C(0), s = C(0), [c, l] = g(!1), u = h(void 0), f = h(!1);
+	return d(() => {
+		let n = e.current;
+		if (!n) return;
+		let c = A(n).find((e) => e.value === t)?.nextElementSibling, d = [], p = () => {
+			d.splice(0).forEach((e) => e.stop());
+		};
+		if (!c) {
+			l(!1), f.current = !1, u.current = t;
+			return;
+		}
+		let m = [], h = (e) => {
+			let t = c.getBoundingClientRect(), u = n.getBoundingClientRect(), f = [
+				t.left - u.left - n.clientLeft + n.scrollLeft,
+				t.top - u.top - n.clientTop + n.scrollTop,
+				t.width,
+				t.height
+			];
+			f.every((e, t) => e === m[t]) || (m = f, p(), [
+				i,
+				a,
+				o,
+				s
+			].forEach((t, n) => {
+				e && !r ? d.push(x(t, f[n], D)) : t.set(f[n]);
+			}), l(!0));
+		};
+		h(f.current && u.current !== t), f.current = !0, u.current = t;
+		let g = new ResizeObserver(() => h(!1));
+		return g.observe(n), A(n).forEach((e) => {
+			e.nextElementSibling && g.observe(e.nextElementSibling);
+		}), () => {
+			g.disconnect(), p();
+		};
+	}, [
+		e,
+		t,
+		n,
+		r,
+		i,
+		a,
+		o,
+		s
+	]), /* @__PURE__ */ v(S.span, {
+		"aria-hidden": "true",
+		"data-ui": "radio-cards-ring",
+		hidden: !c,
+		style: {
+			x: i,
+			y: a,
+			width: o,
+			height: s
+		},
+		css: K
+	});
+}
+function J({ ref: e, value: n, defaultValue: r, onValueChange: o, name: s, required: c = !1, disabled: u = !1, invalid: _ = !1, error: x, layout: S = "grid", minColumnWidth: C = E, size: w = "md", className: D, sx: O, style: k, children: P, onKeyDown: F, "aria-labelledby": I, "aria-describedby": L, "aria-invalid": R, ...z }) {
+	let B = f(), V = h(null);
+	p(e, () => V.current, []);
+	let [H, U, W] = i(n, r, o), [K, J] = g({
+		label: [],
+		description: []
+	}), Y = a(x), X = l((e, t) => (J((n) => ({
+		...n,
+		[e]: [...n[e], t]
+	})), () => J((n) => ({
+		...n,
+		[e]: n[e].filter((e) => e !== t)
+	}))), []), Z = m(() => ({
+		value: H,
+		requestChange: U,
+		name: s ?? B,
+		disabled: u,
+		required: c,
+		invalid: _ || Y,
+		size: w,
+		register: X
+	}), [
+		H,
+		U,
+		s,
+		B,
+		u,
+		c,
+		_,
+		Y,
+		w,
+		X
+	]);
+	d(() => {
+		let e = V.current;
+		if (!e) return;
+		let t = new Set(A(e).map((e) => e.form).filter((e) => e !== null)), i = (t) => {
+			queueMicrotask(() => {
+				if (t.defaultPrevented) return;
+				W();
+				let i = n === void 0 ? r : n;
+				A(e).forEach((e) => {
+					e.checked = e.value === i;
+				});
+			});
+		};
+		return t.forEach((e) => e.addEventListener("reset", i)), () => t.forEach((e) => e.removeEventListener("reset", i));
+	}, [
+		W,
+		n,
+		r
+	]);
+	let Q = (e) => {
+		if (F?.(e), e.defaultPrevented || u) return;
+		let t = A(e.currentTarget).filter((e) => !e.disabled), n = t.indexOf(e.target);
+		if (n < 0) return;
+		let r = getComputedStyle(e.currentTarget).direction === "rtl", i = {
+			ArrowRight: n + (r ? -1 : 1),
+			ArrowLeft: n + (r ? 1 : -1),
+			ArrowDown: n + 1,
+			ArrowUp: n - 1,
+			Home: 0,
+			End: t.length - 1,
+			Enter: n
+		}[e.key];
+		if (i === void 0) return;
+		e.preventDefault();
+		let a = t[(i + t.length) % t.length];
+		a.focus(), a.click();
+	};
+	return /* @__PURE__ */ v(T.Provider, {
+		value: Z,
+		children: /* @__PURE__ */ v(t, {
+			className: D,
+			styles: [M, N[S]],
+			sx: O,
+			children: (e) => /* @__PURE__ */ y("div", {
+				...z,
+				ref: V,
+				role: "radiogroup",
+				"data-ui": "radio-cards",
+				"data-layout": S,
+				"aria-labelledby": j(I, ...K.label),
+				"aria-describedby": j(L, ...K.description, Y && `${B}-error`),
+				"aria-required": c || void 0,
+				"aria-disabled": u || void 0,
+				"aria-invalid": _ || Y ? !0 : R,
+				onKeyDown: Q,
+				className: e,
+				style: {
+					...k,
+					"--radio-cards-column": typeof C == "number" ? `${C}px` : C
+				},
+				children: [
+					P,
+					Y && /* @__PURE__ */ v("span", {
+						id: `${B}-error`,
+						role: "alert",
+						"data-ui": "radio-cards-error",
+						css: G,
+						children: x
+					}),
+					/* @__PURE__ */ v(b, {
+						reducedMotion: "user",
+						children: /* @__PURE__ */ v(q, {
+							root: V,
+							value: H,
+							content: P
+						})
+					})
+				]
+			})
+		})
+	});
+}
+J.displayName = "RadioCards";
+function Y({ ref: e, value: n, label: r, description: i, meta: c, icon: l, disabledReason: u, disabled: d, required: p, onChange: m, slotProps: h, className: g, sx: _, "aria-label": b, "aria-labelledby": x, "aria-describedby": S, "aria-invalid": C, ...w }) {
+	let T = k("Item"), E = f(), D = T.disabled || d, O = D && a(u) ? u : i, A = a(r), M = a(O);
+	return /* @__PURE__ */ v(t, {
+		className: g,
+		styles: [o, P],
+		sx: _,
+		children: (t) => /* @__PURE__ */ y("label", {
+			"data-ui": "radio-cards-item",
+			"data-state": T.value === n ? "checked" : "unchecked",
+			className: t,
+			children: [/* @__PURE__ */ v("input", {
+				...w,
+				ref: e,
+				type: "radio",
+				"data-ui": "radio-cards-input",
+				name: T.name,
+				value: n,
+				checked: T.value === n,
+				disabled: D,
+				required: T.required || p,
+				"aria-label": b,
+				"aria-labelledby": j(x, !b && A && `${E}-label`),
+				"aria-describedby": j(S, M && `${E}-description`),
+				"aria-invalid": T.invalid ? !0 : C,
+				onChange: (e) => {
+					m?.(e), e.currentTarget.checked && T.requestChange(n);
+				},
+				css: [s, F]
+			}), /* @__PURE__ */ y("span", {
+				...h?.control,
+				"data-ui": "radio-cards-control",
+				css: [
+					I,
+					L[T.size],
+					h?.control?.css
+				],
+				children: [
+					/* @__PURE__ */ v("span", {
+						...h?.indicator,
+						"aria-hidden": "true",
+						"data-ui": "radio-cards-indicator",
+						css: [R, h?.indicator?.css]
+					}),
+					a(l) && /* @__PURE__ */ v("span", {
+						...h?.icon,
+						"aria-hidden": "true",
+						"data-ui": "radio-cards-icon",
+						css: [U, h?.icon?.css],
+						children: l
+					}),
+					(A || M) && /* @__PURE__ */ y("span", {
+						css: z,
+						children: [A && /* @__PURE__ */ v("span", {
+							...h?.label,
+							id: `${E}-label`,
+							"data-ui": "radio-cards-item-label",
+							css: [B, h?.label?.css],
+							children: r
+						}), M && /* @__PURE__ */ v("span", {
+							...h?.description,
+							id: `${E}-description`,
+							"data-ui": "radio-cards-item-description",
+							css: [V, h?.description?.css],
+							children: O
+						})]
+					}),
+					a(c) && /* @__PURE__ */ v("span", {
+						...h?.meta,
+						"data-ui": "radio-cards-meta",
+						css: [H, h?.meta?.css],
+						children: c
+					})
+				]
+			})]
+		})
+	});
+}
+Y.displayName = "RadioCards.Item";
+function X({ kind: e, ref: n, id: r, children: i, className: o, sx: s, ...c }) {
+	let { register: l } = k(e === "label" ? "Label" : "Description"), u = f(), p = r ?? u, m = a(i);
+	return d(() => m ? l(e, p) : void 0, [
+		l,
+		e,
+		p,
+		m
+	]), m ? /* @__PURE__ */ v(t, {
+		className: o,
+		styles: [W, e === "label" ? B : V],
+		sx: s,
+		children: (t) => /* @__PURE__ */ v("span", {
+			...c,
+			ref: n,
+			id: p,
+			"data-ui": `radio-cards-${e}`,
+			className: t,
+			children: i
+		})
+	}) : null;
+}
+function Z(e) {
+	return /* @__PURE__ */ v(X, {
+		...e,
+		kind: "label"
+	});
+}
+function Q(e) {
+	return /* @__PURE__ */ v(X, {
+		...e,
+		kind: "description"
+	});
+}
+Z.displayName = "RadioCards.Label", Q.displayName = "RadioCards.Description";
+var $ = Object.assign(J, {
+	Item: Y,
+	Label: Z,
+	Description: Q
+});
+//#endregion
+export { $ as t };

package/dist/radio-cards.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as RadioCards } from "./radio-cards-D2QZENI_.js";

package/dist/{radio-group-Ce0_IWQr.js → radio-group-E6mMRgo7.js}

@@ -1,7 +1,7 @@
 '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 { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./use-controlled-state-DpeVQZNR.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";
@@ -48,8 +48,8 @@ var y = "16px", b = {
 		backgroundColor: m.color.accentContrast,
 		opacity: 0
 	},
-	[n]: { transitionDuration: "0s" },
-	[r]: { "&::after": { backgroundColor: "CanvasText" } }
+	[r]: { transitionDuration: "0s" },
+	[n]: { "&::after": { backgroundColor: "CanvasText" } }
 }), w = e({ fontSize: m.textSize.sm }), T = e({
 	marginInlineStart: `calc(${y} + ${m.space[2]})`,
 	fontSize: m.textSize.sm,

package/dist/radio-group.js

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