themelia-react-ui 2.0.0 → 2.0.2

package/dist/features/questionnaire.js

@@ -1,92 +1,98 @@
 "use client";
-import { useStrings as e } from "../lib/strings.js";
-import { t } from "../utils-Cospvlj1.js";
-import { i as n, o as r, s as i } from "../typography-CAr3dQhX.js";
-import { t as a } from "../button-BS3KDg00.js";
-import { t as o } from "../structure-hzCW-XsV.js";
-import { t as s } from "../progress-Br9WTFya.js";
-import { t as c } from "../input-DhQdBnV3.js";
-import { t as l } from "../form-field-VZRULhUK.js";
-import { d as u } from "../text-inputs-BFpku0Qd.js";
-import { c as d, r as f } from "../choice-inputs-DrJ17tpL.js";
-import { t as p } from "../checkbox-B7ygNTYp.js";
-import { forwardRef as m, useEffect as h, useId as g, useRef as _, useState as v } from "react";
-import { Fragment as ee, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { s as e, v as t } from "../ui-provider-C_U0Xma4.js";
+import { useStrings as n } from "../lib/strings.js";
+import { t as r } from "../utils-BRhFDwuU.js";
+import { n as i } from "../buttons-DPZekJFu.js";
+import { a, c as o, s } from "../typography-UTnveOEy.js";
+import { t as c } from "../structure-BmisBK-3.js";
+import { t as l } from "../progress-B1VnCT0K.js";
+import { h as u } from "../form-sizing-BdP_Mf5p.js";
+import { t as d } from "../input-DQdEd0YD.js";
+import { t as f } from "../form-field-CwH9y77i.js";
+import { d as p } from "../text-inputs-f9Ia-aCi.js";
+import { l as m, r as h, s as g } from "../choice-inputs-CNHvARCJ.js";
+import { t as _ } from "../checkbox-AWIhNhmo.js";
+import { forwardRef as v, useEffect as y, useId as b, useRef as x, useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/components/features/questionnaire/questionnaire-control.tsx
-function te({ question: e, answer: t, disabled: r, error: a, labelId: s, descriptionId: l, onAnswerChange: m, ...h }) {
-	let g = {
-		disabled: r,
-		invalid: !!a,
-		"aria-labelledby": s,
-		"aria-describedby": l,
-		required: e.required
+function ee({ question: n, answer: i, disabled: s, error: l, labelId: f, descriptionId: v, onAnswerChange: y, ...b }) {
+	let { defaultScale: x } = e(), S = r("questionnaire--check", g, u[t(void 0, x)]), C = {
+		disabled: s,
+		invalid: !!l,
+		"aria-labelledby": f,
+		"aria-describedby": v,
+		required: n.required
 	};
-	return e.type === "custom" ? e.render({
-		...h,
-		question: e,
-		answer: t,
-		disabled: r,
-		error: a,
-		labelId: s,
-		descriptionId: l,
-		onAnswerChange: m
-	}) : e.type === "text" ? /* @__PURE__ */ y(c, {
-		...g,
-		type: e.inputType ?? "text",
-		maxLength: e.maxLength,
-		placeholder: e.placeholder,
-		value: typeof t == "string" ? t : "",
-		onChange: (e) => m(e.target.value)
-	}) : e.type === "textarea" ? /* @__PURE__ */ y(u, {
-		...g,
-		rows: e.rows ?? 4,
-		maxLength: e.maxLength,
-		placeholder: e.placeholder,
-		value: typeof t == "string" ? t : "",
-		onChange: (e) => m(e.target.value)
-	}) : e.type === "select" ? /* @__PURE__ */ y(d, {
-		...g,
-		options: e.options,
-		value: typeof t == "string" ? t : null,
-		onValueChange: m
-	}) : e.type === "single" ? /* @__PURE__ */ y("fieldset", {
-		"aria-labelledby": s,
-		"aria-describedby": l,
+	return n.type === "custom" ? n.render({
+		...b,
+		question: n,
+		answer: i,
+		disabled: s,
+		error: l,
+		labelId: f,
+		descriptionId: v,
+		onAnswerChange: y
+	}) : n.type === "text" ? /* @__PURE__ */ w(d, {
+		...C,
+		type: n.inputType ?? "text",
+		maxLength: n.maxLength,
+		placeholder: n.placeholder,
+		value: typeof i == "string" ? i : "",
+		onChange: (e) => y(e.target.value)
+	}) : n.type === "textarea" ? /* @__PURE__ */ w(p, {
+		...C,
+		rows: n.rows ?? 4,
+		maxLength: n.maxLength,
+		placeholder: n.placeholder,
+		value: typeof i == "string" ? i : "",
+		onChange: (e) => y(e.target.value)
+	}) : n.type === "select" ? /* @__PURE__ */ w(m, {
+		...C,
+		options: n.options,
+		value: typeof i == "string" ? i : null,
+		onValueChange: y
+	}) : n.type === "single" ? /* @__PURE__ */ w("fieldset", {
+		"aria-labelledby": f,
+		"aria-describedby": v,
 		className: "questionnaire--choices m-0 min-w-0 border-0 p-0",
-		children: /* @__PURE__ */ y(f, {
-			options: e.options,
-			value: typeof t == "string" ? t : "",
-			disabled: r,
-			invalid: !!a,
-			onValueChange: m,
+		children: /* @__PURE__ */ w(h, {
+			options: n.options,
+			value: typeof i == "string" ? i : "",
+			disabled: s,
+			invalid: !!l,
+			onValueChange: y,
 			columns: 1
 		})
-	}) : e.type === "multiple" ? /* @__PURE__ */ y("fieldset", {
-		"aria-labelledby": s,
-		"aria-describedby": l,
+	}) : n.type === "multiple" ? /* @__PURE__ */ w("fieldset", {
+		"aria-labelledby": f,
+		"aria-describedby": v,
 		className: "questionnaire--choices m-0 min-w-0 border-0 p-0",
-		children: /* @__PURE__ */ y(o, {
+		children: /* @__PURE__ */ w(c, {
 			gap: "sm",
-			children: e.options.map((e, c) => {
-				let u = Array.isArray(t) ? t : [], d = `${s}-option-${c}`;
-				return /* @__PURE__ */ b(o, {
+			children: n.options.map((e, t) => {
+				let n = Array.isArray(i) ? i : [], r = `${f}-option-${t}`;
+				return /* @__PURE__ */ T(c, {
 					direction: "horizontal",
 					align: "start",
 					gap: "sm",
-					children: [/* @__PURE__ */ y(p, {
-						id: d,
-						disabled: r || e.disabled,
-						"aria-invalid": !!a || void 0,
-						"aria-describedby": [l, e.description ? `${d}-description` : void 0].filter(Boolean).join(" ") || void 0,
-						checked: u.includes(e.value),
-						onCheckedChange: (t) => m(t ? [...u, e.value] : u.filter((t) => t !== e.value))
-					}), /* @__PURE__ */ b(o, {
+					children: [/* @__PURE__ */ w("span", {
+						className: S,
+						children: /* @__PURE__ */ w(_, {
+							id: r,
+							disabled: s || e.disabled,
+							"aria-invalid": !!l || void 0,
+							"aria-describedby": [v, e.description ? `${r}-description` : void 0].filter(Boolean).join(" ") || void 0,
+							checked: n.includes(e.value),
+							onCheckedChange: (t) => y(t ? [...n, e.value] : n.filter((t) => t !== e.value))
+						})
+					}), /* @__PURE__ */ T(c, {
 						gap: "dense",
-						children: [/* @__PURE__ */ y(n, {
-							htmlFor: d,
+						children: [/* @__PURE__ */ w(a, {
+							htmlFor: r,
+							className: "text-inherit",
 							children: e.label
-						}), e.description && /* @__PURE__ */ y(i, {
-							id: `${d}-description`,
+						}), e.description && /* @__PURE__ */ w(o, {
+							id: `${r}-description`,
 							size: "xs",
 							type: "secondary",
 							children: e.description
@@ -95,25 +101,29 @@ function te({ question: e, answer: t, disabled: r, error: a, labelId: s, descrip
 				}, e.value);
 			})
 		})
-	}) : e.type === "boolean" ? /* @__PURE__ */ b(o, {
+	}) : n.type === "boolean" ? /* @__PURE__ */ T(c, {
 		direction: "horizontal",
-		align: "center",
+		align: "start",
 		gap: "sm",
-		children: [/* @__PURE__ */ y(p, {
-			...g,
-			"aria-labelledby": void 0,
-			id: `${s}-checkbox`,
-			checked: t === !0,
-			onCheckedChange: (e) => m(e)
-		}), /* @__PURE__ */ y(n, {
-			htmlFor: `${s}-checkbox`,
-			children: e.label ?? e.title
+		children: [/* @__PURE__ */ w("span", {
+			className: S,
+			children: /* @__PURE__ */ w(_, {
+				...C,
+				"aria-labelledby": void 0,
+				id: `${f}-checkbox`,
+				checked: i === !0,
+				onCheckedChange: (e) => y(e)
+			})
+		}), /* @__PURE__ */ w(a, {
+			htmlFor: `${f}-checkbox`,
+			className: "text-inherit",
+			children: n.label ?? n.title
 		})]
 	}) : null;
 }
 //#endregion
 //#region src/components/features/questionnaire/questionnaire.types.ts
-var ne = {
+var te = {
 	previous: "Previous",
 	next: "Next",
 	submit: "Submit answers",
@@ -132,15 +142,15 @@ var ne = {
 };
 //#endregion
 //#region src/components/features/questionnaire/questionnaire.utils.ts
-function x(e, t) {
+function E(e, t) {
 	return e.filter((e) => !e.when || e.when(t));
 }
-function S(e, t) {
+function D(e, t) {
 	return Object.hasOwn(e, t) ? e[t] : void 0;
 }
-function C(e, t, n) {
+function ne(e, t, n) {
 	if (e.disabled) return;
-	let r = S(t, e.id), i = r === void 0 || typeof r == "string" && !r.trim() || Array.isArray(r) && r.length === 0;
+	let r = D(t, e.id), i = r === void 0 || typeof r == "string" && !r.trim() || Array.isArray(r) && r.length === 0;
 	if (e.required && (i || e.type === "boolean" && r !== !0)) return n.required;
 	if (r !== void 0) {
 		if ((e.type === "text" || e.type === "textarea") && typeof r != "string" || e.type === "boolean" && typeof r != "boolean") return n.invalidFormat;
@@ -164,205 +174,207 @@ function C(e, t, n) {
 	return typeof a == "string" && a.length > 0 ? a : void 0;
 }
 function re(e, t) {
-	return Object.fromEntries(x(e, t).filter((e) => !e.disabled).map((e) => {
-		let n = S(t, e.id);
+	return Object.fromEntries(E(e, t).filter((e) => !e.disabled).map((e) => {
+		let n = D(t, e.id);
 		return [e.id, Array.isArray(n) ? [...n] : n];
 	}));
 }
 //#endregion
 //#region src/components/features/questionnaire/questionnaire.tsx
-var ie = {}, w = m(function(n, c) {
-	let { questions: u, value: d, defaultValue: f = {}, onValueChange: p, questionId: m, defaultQuestionId: w, onQuestionChange: ae, disabled: T = !1, onSubmit: oe, onComplete: se, onError: ce, formatSubmitError: le, headerSlot: ue, emptySlot: de, completionSlot: fe, strings: pe, className: me, onReset: he, ...ge } = n, E = Object.prototype.hasOwnProperty.call(n, "value"), D = Object.prototype.hasOwnProperty.call(n, "questionId"), [_e, ve] = v(f), O = E ? d ?? ie : _e, k = _(O);
-	k.current = O;
-	let A = x(u, O), [ye, j] = v(w ?? A[0]?.id), be = D ? m : ye, M = A.find((e) => e.id === be) ?? A[0], N = M ? A.indexOf(M) : 0, [P, F] = v({}), [I, L] = v(), [R, z] = v(!1), [B, V] = v(!1), H = _(null), U = _(void 0), W = _(!0), G = _(null), K = e(ne, pe), q = g(), J = `${q}-title`, xe = `${q}-description`, Y = R || T, X = () => {
-		clearTimeout(U.current), U.current = void 0;
+var ie = {}, ae = v(function(e, t) {
+	let { questions: a, value: u, defaultValue: d = {}, onValueChange: p, questionId: m, defaultQuestionId: h, onQuestionChange: g, disabled: _ = !1, onSubmit: v, onComplete: ae, onError: oe, formatSubmitError: se, headerSlot: ce, emptySlot: le, completionSlot: ue, strings: de, className: fe, onReset: pe, ...me } = e, O = Object.prototype.hasOwnProperty.call(e, "value"), k = Object.prototype.hasOwnProperty.call(e, "questionId"), [he, A] = S(d), j = O ? u ?? ie : he, M = x(j);
+	M.current = j;
+	let N = E(a, j), [ge, P] = S(h ?? N[0]?.id), _e = k ? m : ge, F = N.find((e) => e.id === _e) ?? N[0], I = F ? N.indexOf(F) : 0, [ve, L] = S({}), [R, z] = S(), [B, V] = S(!1), [ye, H] = S(!1), U = x(null), W = x(void 0), G = x(!0), K = x(null), q = n(te, de), be = b(), J = `${be}-title`, xe = `${be}-description`, Y = B || _, X = () => {
+		clearTimeout(W.current), W.current = void 0;
 	}, Z = () => {
-		H.current?.abort(), H.current = null, z(!1);
+		U.current?.abort(), U.current = null, V(!1);
 	}, Q = (e) => {
-		D || j(e), ae?.(e);
+		k || P(e), g?.(e);
 	}, Se = (e) => {
-		if (!M || M.disabled || Y) return;
+		if (!F || F.disabled || Y) return;
 		let t = {
-			...k.current,
-			[M.id]: e
+			...M.current,
+			[F.id]: e
 		};
-		E || (k.current = t, ve(t)), p?.(t), F((e) => ({
+		O || (M.current = t, A(t)), p?.(t), L((e) => ({
 			...e,
-			[M.id]: void 0
-		})), L(void 0), V(!1);
+			[F.id]: void 0
+		})), z(void 0), H(!1);
 	};
-	h(() => {
-		G.current?.focus();
-	}, [M?.id, B]), h(() => {
-		X(), Z(), F({}), L(void 0), V(!1);
+	y(() => {
+		K.current?.focus();
+	}, [F?.id, ye]), y(() => {
+		X(), Z(), L({}), z(void 0), H(!1);
 	}, [
-		O,
-		u,
-		T
-	]), h(() => (W.current = !0, () => {
-		W.current = !1, X(), H.current?.abort(), H.current = null;
+		j,
+		a,
+		_
+	]), y(() => (G.current = !0, () => {
+		G.current = !1, X(), U.current?.abort(), U.current = null;
 	}), []);
 	let Ce = () => {
-		if (!M || Y) return;
-		let e = C(M, k.current, K);
-		if (F((t) => ({
+		if (!F || Y) return;
+		let e = ne(F, M.current, q);
+		if (L((t) => ({
 			...t,
-			[M.id]: e
+			[F.id]: e
 		})), e) {
-			G.current?.focus();
+			K.current?.focus();
 			return;
 		}
-		A[N + 1] && Q(A[N + 1].id);
+		N[I + 1] && Q(N[I + 1].id);
 	}, we = async () => {
-		if (H.current || T || !A.length) return;
-		let e = Object.fromEntries(A.map((e) => [e.id, C(e, k.current, K)]));
-		F(e);
-		let t = A.find((t) => e[t.id]);
+		if (U.current || _ || !N.length) return;
+		let e = Object.fromEntries(N.map((e) => [e.id, ne(e, M.current, q)]));
+		L(e);
+		let t = N.find((t) => e[t.id]);
 		if (t) {
-			Q(t.id), G.current?.focus();
+			Q(t.id), K.current?.focus();
 			return;
 		}
 		let n = new AbortController();
-		H.current = n, L(void 0), z(!0);
-		let r = re(u, k.current);
+		U.current = n, z(void 0), V(!0);
+		let r = re(a, M.current);
 		try {
-			if (await oe?.(r, { signal: n.signal }), H.current !== n || n.signal.aborted) return;
-			V(!0), se?.(r);
+			if (await v?.(r, { signal: n.signal }), U.current !== n || n.signal.aborted) return;
+			H(!0), ae?.(r);
 		} catch (e) {
-			if (H.current !== n || n.signal.aborted) return;
-			L(le?.(e) ?? K.submitError), ce?.(e);
+			if (U.current !== n || n.signal.aborted) return;
+			z(se?.(e) ?? q.submitError), oe?.(e);
 		} finally {
-			H.current === n && (H.current = null, z(!1));
+			U.current === n && (U.current = null, V(!1));
 		}
-	}, $ = M && Object.hasOwn(P, M.id) ? P[M.id] : void 0, Te = M && ($ || M.description);
-	return /* @__PURE__ */ y("form", {
-		...ge,
-		ref: c,
+	}, $ = F && Object.hasOwn(ve, F.id) ? ve[F.id] : void 0, Te = F && ($ || F.description);
+	return /* @__PURE__ */ w("form", {
+		...me,
+		ref: t,
 		noValidate: !0,
-		"aria-busy": R || void 0,
-		className: t("questionnaire--component min-w-0", me),
+		"aria-busy": B || void 0,
+		className: r("questionnaire--component min-w-0", fe),
 		onSubmit: (e) => {
-			e.preventDefault(), N < A.length - 1 ? Ce() : we();
+			e.preventDefault(), I < N.length - 1 ? Ce() : we();
 		},
 		onReset: (e) => {
-			he?.(e);
+			pe?.(e);
 			let t = e.nativeEvent;
-			X(), U.current = setTimeout(() => {
-				if (U.current = void 0, !W.current || t.defaultPrevented || T) return;
-				Z(), E || (k.current = f, ve(f)), p?.(f), F({}), L(void 0), V(!1);
-				let e = x(u, f), n = e.find((e) => e.id === w) ?? e[0];
-				n ? Q(n.id) : D || j(void 0);
+			X(), W.current = setTimeout(() => {
+				if (W.current = void 0, !G.current || t.defaultPrevented || _) return;
+				Z(), O || (M.current = d, A(d)), p?.(d), L({}), z(void 0), H(!1);
+				let e = E(a, d), n = e.find((e) => e.id === h) ?? e[0];
+				n ? Q(n.id) : k || P(void 0);
 			}, 0);
 		},
-		children: /* @__PURE__ */ b(o, {
+		children: /* @__PURE__ */ T(c, {
 			gap: "lg",
-			children: [ue, M ? B ? fe ?? /* @__PURE__ */ b(o, {
+			children: [ce, F ? ye ? ue ?? /* @__PURE__ */ T(c, {
 				gap: "sm",
-				children: [/* @__PURE__ */ y(i, {
+				children: [/* @__PURE__ */ w(o, {
+					type: "inherit",
 					role: "status",
-					children: K.submitted
-				}), /* @__PURE__ */ y(a, {
-					disabled: T,
+					children: q.submitted
+				}), /* @__PURE__ */ w(i, {
+					disabled: _,
 					type: "button",
 					buttonStyle: "outline",
 					onClick: () => {
-						V(!1), A[0] && Q(A[0].id);
+						H(!1), N[0] && Q(N[0].id);
 					},
-					children: K.editAnswers
+					children: q.editAnswers
 				})]
-			}) : /* @__PURE__ */ b(ee, { children: [
-				/* @__PURE__ */ y(s, {
-					value: N + 1,
-					max: A.length,
-					label: K.progress,
-					valueSlot: /* @__PURE__ */ y(i, {
+			}) : /* @__PURE__ */ T(C, { children: [
+				/* @__PURE__ */ w(l, {
+					value: I + 1,
+					max: N.length,
+					label: q.progress,
+					valueSlot: /* @__PURE__ */ w(o, {
 						size: "xs",
 						type: "secondary",
 						"aria-live": "polite",
-						children: K.step(N + 1, A.length)
+						children: q.step(I + 1, N.length)
 					})
 				}),
-				/* @__PURE__ */ b(o, {
-					ref: G,
+				/* @__PURE__ */ T(c, {
+					ref: K,
 					gap: "normal",
 					tabIndex: -1,
 					role: "group",
 					"aria-labelledby": J,
 					className: "questionnaire--question outline-none",
-					children: [/* @__PURE__ */ y(r, {
+					children: [/* @__PURE__ */ w(s, {
+						className: "text-inherit",
 						id: J,
 						tag: "h3",
-						children: M.title
-					}), /* @__PURE__ */ y(l, {
-						required: M.required,
+						children: F.title
+					}), /* @__PURE__ */ w(f, {
+						required: F.required,
 						error: $,
-						hint: M.description,
+						hint: F.description,
 						supportingTextId: xe,
-						children: /* @__PURE__ */ y(te, {
-							question: M,
-							answer: S(O, M.id),
-							answers: O,
-							disabled: Y || !!M.disabled,
+						children: /* @__PURE__ */ w(ee, {
+							question: F,
+							answer: D(j, F.id),
+							answers: j,
+							disabled: Y || !!F.disabled,
 							error: $,
 							labelId: J,
 							descriptionId: Te ? xe : void 0,
 							onAnswerChange: Se
-						}, M.id)
+						}, F.id)
 					})]
 				}),
-				I && /* @__PURE__ */ y(i, {
+				R && /* @__PURE__ */ w(o, {
 					role: "alert",
 					type: "error",
-					children: I
+					children: R
 				}),
-				R && /* @__PURE__ */ y(i, {
+				B && /* @__PURE__ */ w(o, {
 					role: "status",
 					type: "secondary",
-					children: K.submitting
+					children: q.submitting
 				}),
-				/* @__PURE__ */ b(o, {
+				/* @__PURE__ */ T(c, {
 					direction: "horizontal",
 					gap: "sm",
 					wrap: !0,
 					children: [
-						/* @__PURE__ */ y(a, {
+						/* @__PURE__ */ w(i, {
 							type: "button",
 							buttonStyle: "outline",
-							disabled: Y || N === 0,
+							disabled: Y || I === 0,
 							onClick: () => {
-								L(void 0), Q(A[N - 1].id);
+								z(void 0), Q(N[I - 1].id);
 							},
-							children: K.previous
+							children: q.previous
 						}),
-						N < A.length - 1 ? /* @__PURE__ */ y(a, {
+						I < N.length - 1 ? /* @__PURE__ */ w(i, {
 							tone: "primary",
 							type: "button",
 							disabled: Y,
 							onClick: Ce,
-							children: K.next
-						}) : /* @__PURE__ */ y(a, {
+							children: q.next
+						}) : /* @__PURE__ */ w(i, {
 							tone: "primary",
 							type: "submit",
 							disabled: Y,
-							children: I ? K.retry : K.submit
+							children: R ? q.retry : q.submit
 						}),
-						R && /* @__PURE__ */ y(a, {
+						B && /* @__PURE__ */ w(i, {
 							type: "button",
 							buttonStyle: "outline",
-							disabled: T,
+							disabled: _,
 							onClick: Z,
-							children: K.cancel
+							children: q.cancel
 						})
 					]
 				})
-			] }) : de ?? /* @__PURE__ */ y(i, {
+			] }) : le ?? /* @__PURE__ */ w(o, {
 				type: "secondary",
-				children: K.empty
+				children: q.empty
 			})]
 		})
 	});
 });
 //#endregion
-export { w as Questionnaire, ne as defaultQuestionnaireStrings };
+export { ae as Questionnaire, te as defaultQuestionnaireStrings };
 
 //# sourceMappingURL=questionnaire.js.map