@loopstack/loopstack-studio 0.20.3 → 0.21.0-rc.0

package/dist/components/dynamic-form/MarkdownContent.js

@@ -0,0 +1,76 @@
+import { cn } from "../../lib/utils.js";
+/* empty css                                      */
+import rehypeKatex from "../../node_modules/rehype-katex/lib/index.js";
+import remarkGfm from "../../node_modules/remark-gfm/lib/index.js";
+import remarkMath from "../../node_modules/remark-math/lib/index.js";
+import MermaidDiagram_default from "./MermaidDiagram.js";
+/* empty css         */
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import Markdown from "react-markdown";
+var MarkdownContent_default = (f) => {
+	let p = c(10), { content: m, className: h } = f, g;
+	p[0] === h ? g = p[1] : (g = cn("markdown-content", h), p[0] = h, p[1] = g);
+	let _, v, y;
+	p[2] === Symbol.for("react.memo_cache_sentinel") ? (_ = [remarkGfm, remarkMath], v = [rehypeKatex], y = {
+		code: _temp,
+		table: _temp2,
+		div: _temp3,
+		span: _temp4
+	}, p[2] = _, p[3] = v, p[4] = y) : (_ = p[2], v = p[3], y = p[4]);
+	let b;
+	p[5] === m ? b = p[6] : (b = /* @__PURE__ */ jsx(Markdown, {
+		remarkPlugins: _,
+		rehypePlugins: v,
+		components: y,
+		children: m
+	}), p[5] = m, p[6] = b);
+	let x;
+	return p[7] !== g || p[8] !== b ? (x = /* @__PURE__ */ jsx("div", {
+		className: g,
+		children: b
+	}), p[7] = g, p[8] = b, p[9] = x) : x = p[9], x;
+};
+function _temp(e) {
+	let { children: l, className: u } = e, d = !u;
+	return (u?.replace("language-", "") || "") === "mermaid" && typeof l == "string" ? /* @__PURE__ */ jsx(MermaidDiagram_default, { chart: l }) : d ? /* @__PURE__ */ jsx("code", { children: l }) : /* @__PURE__ */ jsx("code", {
+		className: u,
+		children: l
+	});
+}
+function _temp2(e) {
+	let { children: l } = e;
+	return /* @__PURE__ */ jsx("div", {
+		className: "table-wrapper",
+		children: /* @__PURE__ */ jsx("table", { children: l })
+	});
+}
+function _temp3(l) {
+	let { className: u, children: d, ...f } = l;
+	return u === "math math-display" ? /* @__PURE__ */ jsx("div", {
+		className: "math-display-wrapper",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("math math-display", u),
+			...f,
+			children: d
+		})
+	}) : /* @__PURE__ */ jsx("div", {
+		className: u,
+		...f,
+		children: d
+	});
+}
+function _temp4(l) {
+	let { className: u, children: d, ...f } = l;
+	return u === "math math-inline" ? /* @__PURE__ */ jsx("span", {
+		className: cn("math math-inline", u),
+		...f,
+		children: d
+	}) : /* @__PURE__ */ jsx("span", {
+		className: u,
+		...f,
+		children: d
+	});
+}
+export { MarkdownContent_default as default };

package/dist/components/dynamic-form/MermaidDiagram.js

@@ -0,0 +1,41 @@
+import { mermaid_default } from "../../node_modules/mermaid/dist/mermaid.core.js";
+import { c } from "react/compiler-runtime";
+import React, { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+mermaid_default.initialize({
+	startOnLoad: !1,
+	theme: "default",
+	securityLevel: "loose",
+	flowchart: {
+		useMaxWidth: !0,
+		htmlLabels: !0
+	}
+});
+var MermaidDiagram_default = (i) => {
+	let o = c(5), { chart: s, className: l } = i, u = useRef(null), d, f;
+	o[0] === s ? (d = o[1], f = o[2]) : (d = () => {
+		(async () => {
+			let r = u.current;
+			if (r) try {
+				let i = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
+				r.innerHTML = "";
+				let { svg: a } = await mermaid_default.render(i, s);
+				u.current && (u.current.innerHTML = a);
+			} catch (e) {
+				let r = e;
+				console.error("Mermaid rendering error:", r), u.current && (u.current.innerHTML = `
+            <div class="bg-red-50 border border-red-200 rounded-md p-4 text-red-700">
+              <strong>Mermaid Diagram Error:</strong> Failed to render diagram
+              <pre class="mt-2 text-xs bg-red-100 p-2 rounded overflow-x-auto">${s}</pre>
+            </div>
+          `);
+			}
+		})();
+	}, f = [s], o[0] = s, o[1] = d, o[2] = f), useEffect(d, f);
+	let p = `my-4 flex justify-center ${l || ""}`, m;
+	return o[3] === p ? m = o[4] : (m = /* @__PURE__ */ jsx("div", {
+		ref: u,
+		className: p
+	}), o[3] = p, o[4] = m), m;
+};
+export { MermaidDiagram_default as default };

package/dist/components/dynamic-form/ObjectController.js

@@ -0,0 +1,32 @@
+import { useMergeParentKey } from "./hooks/useMergeParentKey.js";
+import { FormElement } from "./FormElement.js";
+import { useSortedPropertyNames } from "./hooks/useSortPropertyNames.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+const ObjectController = (o) => {
+	let s = c(23), { name: l, schema: u, ui: d, form: f, disabled: p, parentKey: m, viewOnly: h } = o, g = u, _ = d, v;
+	s[0] === g.properties ? v = s[1] : (v = g.properties ?? {}, s[0] = g.properties, s[1] = v);
+	let y = useSortedPropertyNames(v, _?.order), b = useMergeParentKey(m, l), x;
+	s[2] === g.required ? x = s[3] : (x = g.required ?? [], s[2] = g.required, s[3] = x);
+	let S = x, C;
+	if (s[4] !== p || s[5] !== f || s[6] !== b || s[7] !== g.properties || s[8] !== _?.properties || s[9] !== y || s[10] !== S || s[11] !== h) {
+		let e;
+		s[13] !== p || s[14] !== f || s[15] !== b || s[16] !== g.properties || s[17] !== _?.properties || s[18] !== S || s[19] !== h ? (e = (e) => {
+			let a = g.properties?.[e];
+			return a ? /* @__PURE__ */ jsx(FormElement, {
+				form: f,
+				disabled: p,
+				viewOnly: h,
+				parentKey: b,
+				name: e,
+				schema: a,
+				ui: _?.properties?.[e],
+				required: S.includes(e)
+			}, `el-${e}`) : null;
+		}, s[13] = p, s[14] = f, s[15] = b, s[16] = g.properties, s[17] = _?.properties, s[18] = S, s[19] = h, s[20] = e) : e = s[20], C = y.map(e), s[4] = p, s[5] = f, s[6] = b, s[7] = g.properties, s[8] = _?.properties, s[9] = y, s[10] = S, s[11] = h, s[12] = C;
+	} else C = s[12];
+	let w;
+	return s[21] === C ? w = s[22] : (w = /* @__PURE__ */ jsx(Fragment, { children: C }), s[21] = C, s[22] = w), w;
+};
+export { ObjectController };

package/dist/components/dynamic-form/fields/BaseFieldWrapper.js

@@ -0,0 +1,47 @@
+import { Label } from "../../ui/label.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const BaseFieldWrapper = (i) => {
+	let a = c(27), { name: o, label: s, required: l, error: u, helpText: d, description: f, children: p, labelClassName: m, showLabel: h, helpTextPosition: g } = i, _ = m === void 0 ? "" : m, v = h === void 0 ? !0 : h, y = g === void 0 ? "after" : g, b;
+	a[0] !== s || a[1] !== _ || a[2] !== o || a[3] !== l || a[4] !== v ? (b = v && /* @__PURE__ */ jsx(Label, {
+		htmlFor: o,
+		className: `text-sm leading-none font-medium ${l ? "after:ml-0.5 after:text-red-500 after:content-['*']" : ""} ${_}`,
+		children: s
+	}), a[0] = s, a[1] = _, a[2] = o, a[3] = l, a[4] = v, a[5] = b) : b = a[5];
+	let x;
+	a[6] !== u || a[7] !== d || a[8] !== y ? (x = y === "before" && d && !u && /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground text-sm",
+		children: d
+	}), a[6] = u, a[7] = d, a[8] = y, a[9] = x) : x = a[9];
+	let S;
+	a[10] !== f || a[11] !== u || a[12] !== o ? (S = f && !u && /* @__PURE__ */ jsx("p", {
+		id: `${o}-description`,
+		className: "text-muted-foreground text-sm",
+		children: f
+	}), a[10] = f, a[11] = u, a[12] = o, a[13] = S) : S = a[13];
+	let C;
+	a[14] !== u || a[15] !== d || a[16] !== y ? (C = y === "after" && d && !u && /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground text-sm",
+		children: d
+	}), a[14] = u, a[15] = d, a[16] = y, a[17] = C) : C = a[17];
+	let w;
+	a[18] === u ? w = a[19] : (w = u && /* @__PURE__ */ jsx("p", {
+		className: "text-destructive text-sm font-medium",
+		role: "alert",
+		children: String(u.message || "Invalid value")
+	}), a[18] = u, a[19] = w);
+	let T;
+	return a[20] !== p || a[21] !== b || a[22] !== x || a[23] !== S || a[24] !== C || a[25] !== w ? (T = /* @__PURE__ */ jsxs("div", {
+		className: "mt-4 mb-8 block space-y-2",
+		children: [
+			b,
+			x,
+			p,
+			S,
+			C,
+			w
+		]
+	}), a[20] = p, a[21] = b, a[22] = x, a[23] = S, a[24] = C, a[25] = w, a[26] = T) : T = a[26], T;
+};
+export { BaseFieldWrapper };

package/dist/components/dynamic-form/fields/CheckboxField.js

@@ -0,0 +1,53 @@
+import { Checkbox } from "../../ui/checkbox.js";
+import { Label } from "../../ui/label.js";
+import { useFieldConfig } from "../hooks/useFieldConfig.js";
+import { BaseFieldWrapper } from "./BaseFieldWrapper.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+const CheckboxField = (l) => {
+	let d = c(12), { name: f, schema: p, ui: m, required: h, form: g, disabled: _ } = l, v = useFieldConfig(f, p, m, _), y = v.defaultValue || !1, b = h ? _temp : void 0, x;
+	d[0] === b ? x = d[1] : (x = { validate: b }, d[0] = b, d[1] = x);
+	let S;
+	d[2] !== v || d[3] !== f || d[4] !== h ? (S = (o) => {
+		let { field: s } = o, { onChange: l, value: u, ref: d } = s;
+		return /* @__PURE__ */ jsx(BaseFieldWrapper, {
+			name: f,
+			label: v.fieldLabel,
+			required: h,
+			error: v.error,
+			helpText: v.helpText,
+			description: v.description,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center space-x-2",
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					id: f,
+					checked: !!u,
+					onCheckedChange: v.isReadOnly ? void 0 : (e) => l(e || !1),
+					disabled: v.isDisabled,
+					ref: d,
+					name: f,
+					required: h,
+					...v.getAriaProps()
+				}), /* @__PURE__ */ jsx(Label, {
+					htmlFor: f,
+					className: "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+					children: v.fieldLabel
+				})]
+			})
+		});
+	}, d[2] = v, d[3] = f, d[4] = h, d[5] = S) : S = d[5];
+	let C;
+	return d[6] !== g.control || d[7] !== f || d[8] !== y || d[9] !== x || d[10] !== S ? (C = /* @__PURE__ */ jsx(Controller, {
+		name: f,
+		control: g.control,
+		defaultValue: y,
+		rules: x,
+		render: S
+	}), d[6] = g.control, d[7] = f, d[8] = y, d[9] = x, d[10] = S, d[11] = C) : C = d[11], C;
+};
+function _temp(e) {
+	return e === !0 || "This field is required";
+}
+export { CheckboxField };

package/dist/components/dynamic-form/fields/CodeViewField.js

@@ -0,0 +1,63 @@
+import CodeContent_default from "../CodeContent.js";
+import { useFieldConfig } from "../hooks/useFieldConfig.js";
+import { BaseFieldWrapper } from "./BaseFieldWrapper.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { Controller } from "react-hook-form";
+var stripCodeFence = (e) => {
+	let u = e.match(/^```[\w-]*\n?([\s\S]*?)\n?```$/);
+	return u ? u[1] : e;
+};
+const CodeViewField = (f) => {
+	let p = c(11), { name: m, schema: h, ui: g, required: _, form: v, disabled: y } = f, [b, x] = React.useState(!1), S = useFieldConfig(m, h, g, y), C;
+	p[0] === Symbol.for("react.memo_cache_sentinel") ? (C = async (e) => {
+		try {
+			let u = stripCodeFence(e);
+			await navigator.clipboard.writeText(u), x(!0), setTimeout(() => x(!1), 2e3);
+		} catch (e) {
+			let u = e;
+			console.error("Failed to copy:", u);
+		}
+	}, p[0] = C) : C = p[0];
+	let w = C, T = S.defaultValue || "", E;
+	p[1] !== S || p[2] !== b || p[3] !== m || p[4] !== _ ? (E = (u) => {
+		let { field: d } = u;
+		return /* @__PURE__ */ jsx(BaseFieldWrapper, {
+			name: m,
+			label: S.fieldLabel,
+			required: _,
+			error: S.error,
+			helpText: S.helpText,
+			description: S.description,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "relative w-full overflow-hidden rounded-md border",
+				...S.getAriaProps(),
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => void w(String(d.value ?? "")),
+					disabled: S.isDisabled || !d.value,
+					className: "bg-background/80 hover:bg-background absolute top-2 right-2 z-10 rounded-md border p-2 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+					title: b ? "Copied!" : "Copy to clipboard",
+					"aria-label": b ? "Copied to clipboard" : "Copy code to clipboard",
+					children: b ? /* @__PURE__ */ jsx(Check, {
+						className: "h-4 w-4 text-green-600",
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ jsx(Copy, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					})
+				}), /* @__PURE__ */ jsx(CodeContent_default, { content: String(d.value ?? "") })]
+			})
+		});
+	}, p[1] = S, p[2] = b, p[3] = m, p[4] = _, p[5] = E) : E = p[5];
+	let D;
+	return p[6] !== v.control || p[7] !== m || p[8] !== T || p[9] !== E ? (D = /* @__PURE__ */ jsx(Controller, {
+		name: m,
+		control: v.control,
+		defaultValue: T,
+		render: E
+	}), p[6] = v.control, p[7] = m, p[8] = T, p[9] = E, p[10] = D) : D = p[10], D;
+};
+export { CodeViewField };

package/dist/components/dynamic-form/fields/InputField.js

@@ -0,0 +1,105 @@
+import { Input } from "../../ui/input.js";
+import { Label } from "../../ui/label.js";
+import { buildTextValidationRules } from "./utils/text-validation-utils.js";
+import { useFieldConfig } from "../hooks/useFieldConfig.js";
+import { BaseFieldWrapper } from "./BaseFieldWrapper.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+const getInputType = (t) => {
+	if (t.format) switch (t.format) {
+		case "email": return "email";
+		case "url": return "url";
+		case "date": return "date";
+		case "time": return "time";
+		case "datetime": return "datetime-local";
+		case "phone": return "tel";
+	}
+	switch (t.type) {
+		case "integer":
+		case "number": return "number";
+		case "string":
+		default: return "text";
+	}
+};
+var isNumericType = (t) => t.type === "number" || t.type === "integer";
+const InputField = (p) => {
+	let m = c(36), { name: h, schema: g, ui: _, required: v, form: y, disabled: b, viewOnly: x } = p, S = useFieldConfig(h, g, _, b), C;
+	m[0] === g ? C = m[1] : (C = getInputType(g), m[0] = g, m[1] = C);
+	let w = C, T;
+	m[2] !== g.examples?.[0] || m[3] !== g.placeholder ? (T = g.placeholder || g.examples?.[0]?.toString() || "", m[2] = g.examples?.[0], m[3] = g.placeholder, m[4] = T) : T = m[4];
+	let E = T, D;
+	m[5] !== v || m[6] !== g ? (D = buildTextValidationRules(g, v), m[5] = v, m[6] = g, m[7] = D) : D = m[7];
+	let O = D, k;
+	m[8] === g ? k = m[9] : (k = isNumericType(g), m[8] = g, m[9] = k);
+	let A = k;
+	if (x) {
+		let t;
+		m[10] === S.fieldLabel ? t = m[11] : (t = /* @__PURE__ */ jsx(Label, {
+			className: "text-muted-foreground mb-1 block text-sm",
+			children: S.fieldLabel
+		}), m[10] = S.fieldLabel, m[11] = t);
+		let u = S.defaultValue ?? "", d;
+		m[12] !== y.control || m[13] !== h || m[14] !== u ? (d = /* @__PURE__ */ jsx(Controller, {
+			name: h,
+			control: y.control,
+			defaultValue: u,
+			render: _temp
+		}), m[12] = y.control, m[13] = h, m[14] = u, m[15] = d) : d = m[15];
+		let f;
+		return m[16] !== t || m[17] !== d ? (f = /* @__PURE__ */ jsxs("div", {
+			className: "mt-4 mb-8 block",
+			children: [t, d]
+		}), m[16] = t, m[17] = d, m[18] = f) : f = m[18], f;
+	}
+	let j = S.defaultValue ?? (A ? void 0 : ""), M;
+	m[19] !== S || m[20] !== w || m[21] !== A || m[22] !== h || m[23] !== E || m[24] !== v || m[25] !== g.maxLength || m[26] !== g.maximum || m[27] !== g.minimum || m[28] !== g.multipleOf ? (M = (l) => {
+		let { field: u } = l;
+		return /* @__PURE__ */ jsx(BaseFieldWrapper, {
+			name: h,
+			label: S.fieldLabel,
+			required: v,
+			error: S.error,
+			helpText: S.helpText,
+			description: S.description,
+			children: /* @__PURE__ */ jsx(Input, {
+				...u,
+				id: h,
+				onChange: (t) => {
+					if (!S.isReadOnly) if (A) {
+						let l = t.target.value;
+						u.onChange(l === "" ? void 0 : Number(l));
+					} else u.onChange(t);
+				},
+				value: u.value ?? "",
+				type: w,
+				placeholder: E,
+				disabled: S.isDisabled,
+				readOnly: S.isReadOnly,
+				min: g.minimum,
+				max: g.maximum,
+				step: w === "number" && g.multipleOf ? g.multipleOf : void 0,
+				maxLength: g.maxLength,
+				className: S.error ? "border-destructive focus-visible:ring-destructive" : "",
+				...S.getAriaProps()
+			})
+		});
+	}, m[19] = S, m[20] = w, m[21] = A, m[22] = h, m[23] = E, m[24] = v, m[25] = g.maxLength, m[26] = g.maximum, m[27] = g.minimum, m[28] = g.multipleOf, m[29] = M) : M = m[29];
+	let N;
+	return m[30] !== y.control || m[31] !== h || m[32] !== j || m[33] !== M || m[34] !== O ? (N = /* @__PURE__ */ jsx(Controller, {
+		name: h,
+		control: y.control,
+		defaultValue: j,
+		rules: O,
+		render: M
+	}), m[30] = y.control, m[31] = h, m[32] = j, m[33] = M, m[34] = O, m[35] = N) : N = m[35], N;
+};
+function _temp(t) {
+	let { field: l } = t;
+	return /* @__PURE__ */ jsx("div", {
+		className: "text-sm",
+		children: l.value ?? "—"
+	});
+}
+export { InputField };

package/dist/components/dynamic-form/fields/RadioField.js

@@ -0,0 +1,67 @@
+import { cn } from "../../../lib/utils.js";
+import { Label } from "../../ui/label.js";
+import { useFieldConfig } from "../hooks/useFieldConfig.js";
+import { BaseFieldWrapper } from "./BaseFieldWrapper.js";
+import { RadioGroup, RadioGroupItem } from "../../ui/radio-group.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+const RadioField = (p) => {
+	let m = c(21), { name: h, schema: g, ui: _, required: v, form: y, disabled: b } = p, x = useFieldConfig(h, g, _, b), S = g.enumOptions, C;
+	m[0] !== S || m[1] !== g.enum ? (C = S ? S.map(_temp) : g.enum, m[0] = S, m[1] = g.enum, m[2] = C) : C = m[2];
+	let w = C, T;
+	m[3] !== S || m[4] !== g.enum ? (T = S ? S.map(_temp2) : g.enum, m[3] = S, m[4] = g.enum, m[5] = T) : T = m[5];
+	let E = T, D = x.defaultValue || "", O = v ? "This field is required" : void 0, k;
+	m[6] === O ? k = m[7] : (k = { required: O }, m[6] = O, m[7] = k);
+	let A;
+	m[8] !== x || m[9] !== w || m[10] !== E || m[11] !== h || m[12] !== v || m[13] !== g.inline ? (A = (u) => {
+		let { field: f } = u;
+		return /* @__PURE__ */ jsx(BaseFieldWrapper, {
+			name: h,
+			label: x.fieldLabel,
+			required: v,
+			error: x.error,
+			helpText: x.helpText,
+			description: x.description,
+			helpTextPosition: "before",
+			children: /* @__PURE__ */ jsx(RadioGroup, {
+				value: f.value,
+				onValueChange: x.isReadOnly ? void 0 : f.onChange,
+				disabled: x.isDisabled,
+				required: v,
+				"aria-label": x.fieldLabel,
+				className: cn(g.inline && "flex flex-row space-y-0 space-x-4"),
+				...x.getAriaProps(),
+				children: E?.map((u, d) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center space-x-2",
+					children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+						value: u,
+						id: `${h}-${u}`,
+						disabled: x.isDisabled,
+						className: cn(x.error && "border-destructive")
+					}), /* @__PURE__ */ jsx(Label, {
+						htmlFor: `${h}-${u}`,
+						className: cn("cursor-pointer text-sm font-normal", x.isDisabled && "cursor-not-allowed opacity-70"),
+						children: w?.[d] || u
+					})]
+				}, u))
+			})
+		});
+	}, m[8] = x, m[9] = w, m[10] = E, m[11] = h, m[12] = v, m[13] = g.inline, m[14] = A) : A = m[14];
+	let j;
+	return m[15] !== y.control || m[16] !== h || m[17] !== D || m[18] !== k || m[19] !== A ? (j = /* @__PURE__ */ jsx(Controller, {
+		name: h,
+		control: y.control,
+		defaultValue: D,
+		rules: k,
+		render: A
+	}), m[15] = y.control, m[16] = h, m[17] = D, m[18] = k, m[19] = A, m[20] = j) : j = m[20], j;
+};
+function _temp(n) {
+	return n.label;
+}
+function _temp2(n) {
+	return n.value;
+}
+export { RadioField };

package/dist/components/dynamic-form/fields/SelectField.js

@@ -0,0 +1,60 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select.js";
+import { useFieldConfig } from "../hooks/useFieldConfig.js";
+import { BaseFieldWrapper } from "./BaseFieldWrapper.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+const SelectField = (m) => {
+	let h = c(22), { name: g, schema: _, ui: v, required: y, form: b, disabled: x } = m, S = useFieldConfig(g, _, v, x), C;
+	h[0] !== _.enum || h[1] !== _.enumOptions ? (C = _.enumOptions && _.enumOptions.length > 0 ? _.enumOptions : _.enum || [], h[0] = _.enum, h[1] = _.enumOptions, h[2] = C) : C = h[2];
+	let w = C, T;
+	h[3] === w ? T = h[4] : (T = w.map(_temp), h[3] = w, h[4] = T);
+	let E = T, D;
+	h[5] === w ? D = h[6] : (D = w.map(_temp2), h[5] = w, h[6] = D);
+	let O = D, k = _.placeholder || `Select ${S.fieldLabel}`, A = S.defaultValue || "", j = y ? "This field is required" : void 0, M;
+	h[7] === j ? M = h[8] : (M = { required: j }, h[7] = j, h[8] = M);
+	let N;
+	h[9] !== S || h[10] !== E || h[11] !== O || h[12] !== g || h[13] !== k || h[14] !== y ? (N = (f) => {
+		let { field: p } = f;
+		return /* @__PURE__ */ jsx(BaseFieldWrapper, {
+			name: g,
+			label: S.fieldLabel,
+			required: y,
+			error: S.error,
+			helpText: S.helpText,
+			description: S.description,
+			children: /* @__PURE__ */ jsxs(Select, {
+				value: String(p.value ?? ""),
+				onValueChange: S.isReadOnly ? void 0 : (t) => p.onChange(t),
+				disabled: S.isDisabled,
+				required: y,
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					id: g,
+					className: S.error ? "border-destructive" : "",
+					...S.getAriaProps(),
+					children: /* @__PURE__ */ jsx(SelectValue, { placeholder: k })
+				}), /* @__PURE__ */ jsx(SelectContent, { children: O.map((t, d) => /* @__PURE__ */ jsx(SelectItem, {
+					value: t.toString(),
+					disabled: S.isDisabled,
+					children: E[d]?.toString() || t.toString()
+				}, `${t}-${d}`)) })]
+			})
+		});
+	}, h[9] = S, h[10] = E, h[11] = O, h[12] = g, h[13] = k, h[14] = y, h[15] = N) : N = h[15];
+	let P;
+	return h[16] !== b.control || h[17] !== g || h[18] !== A || h[19] !== M || h[20] !== N ? (P = /* @__PURE__ */ jsx(Controller, {
+		name: g,
+		control: b.control,
+		defaultValue: A,
+		rules: M,
+		render: N
+	}), h[16] = b.control, h[17] = g, h[18] = A, h[19] = M, h[20] = N, h[21] = P) : P = h[21], P;
+};
+function _temp(t) {
+	return typeof t == "string" || typeof t == "number" ? t : t.label;
+}
+function _temp2(t) {
+	return typeof t == "string" || typeof t == "number" ? t : t.value;
+}
+export { SelectField };

package/dist/components/dynamic-form/fields/SliderField.js

@@ -0,0 +1,112 @@
+import { useFieldConfig } from "../hooks/useFieldConfig.js";
+import { BaseFieldWrapper } from "./BaseFieldWrapper.js";
+import { Slider } from "../../ui/slider.js";
+import { c } from "react/compiler-runtime";
+import React, { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+var buildSliderValidationRules = (e, i) => {
+	let a = e.minimum ?? 0, o = e.maximum ?? 100;
+	return {
+		required: i ? "This field is required" : void 0,
+		min: {
+			value: a,
+			message: `Value must be at least ${a}`
+		},
+		max: {
+			value: o,
+			message: `Value must be at most ${o}`
+		},
+		validate: {
+			multipleOf: (i) => e.multipleOf && i % e.multipleOf !== 0 ? `Value must be a multiple of ${e.multipleOf}` : !0,
+			isNumber: (e) => typeof e != "number" || isNaN(e) ? "Value must be a valid number" : !0
+		}
+	};
+};
+const SliderField = (s) => {
+	let f = c(23), { name: p, schema: m, ui: h, required: g, form: _, disabled: v } = s, y = useFieldConfig(p, m, h, v), [b, x] = useState(!1), [S, C] = useState(!1), w = useRef(null), T = m.minimum ?? 0, E = m.maximum ?? 100, D = m.multipleOf ?? 1, O = m.default ?? T, k;
+	f[0] !== g || f[1] !== m ? (k = buildSliderValidationRules(m, g), f[0] = g, f[1] = m, f[2] = k) : k = f[2];
+	let A = k, j;
+	f[3] !== E || f[4] !== T ? (j = (e) => {
+		if (!w.current) return 0;
+		let i = w.current.offsetWidth;
+		return (e - T) / (E - T) * i;
+	}, f[3] = E, f[4] = T, f[5] = j) : j = f[5];
+	let M = j, N;
+	f[6] !== M || f[7] !== y || f[8] !== O || f[9] !== b || f[10] !== S || f[11] !== E || f[12] !== T || f[13] !== p || f[14] !== g || f[15] !== D ? (N = (e) => {
+		let { field: o } = e, { onChange: s, value: l } = o, u = typeof l == "number" && !isNaN(l) ? l : O, d = M(u);
+		return /* @__PURE__ */ jsx(BaseFieldWrapper, {
+			name: p,
+			label: y.fieldLabel,
+			required: g,
+			error: y.error,
+			helpText: y.helpText,
+			description: y.description,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "relative px-2",
+				ref: w,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "slider-with-hover",
+						onMouseMove: (e) => {
+							if (!w.current) return;
+							let i = w.current.getBoundingClientRect(), a = e.clientX - i.left - 8;
+							C(Math.abs(a - d) < 12);
+						},
+						onMouseLeave: () => C(!1),
+						children: /* @__PURE__ */ jsx(Slider, {
+							id: p,
+							value: [u],
+							onValueChange: (e) => {
+								y.isReadOnly || s(e[0]);
+							},
+							"aria-label": y.fieldLabel,
+							step: D,
+							min: T,
+							max: E,
+							disabled: y.isDisabled,
+							className: "w-full hover:cursor-pointer",
+							onPointerDown: () => x(!0),
+							onPointerUp: () => x(!1),
+							onPointerLeave: () => {
+								x(!1), C(!1);
+							},
+							...y.getAriaProps()
+						})
+					}),
+					(b || S) && /* @__PURE__ */ jsx("div", {
+						className: "bg-popover text-popover-foreground pointer-events-none absolute -top-10 z-10 rounded-md border px-2 py-1 text-sm shadow-md",
+						style: {
+							left: `${d}px`,
+							transform: "translateX(-50%)"
+						},
+						role: "tooltip",
+						"aria-live": "polite",
+						children: u
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "mt-2 flex justify-between",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-xs",
+							"aria-label": `Minimum value: ${T}`,
+							children: T
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-xs",
+							"aria-label": `Maximum value: ${E}`,
+							children: E
+						})]
+					})
+				]
+			})
+		});
+	}, f[6] = M, f[7] = y, f[8] = O, f[9] = b, f[10] = S, f[11] = E, f[12] = T, f[13] = p, f[14] = g, f[15] = D, f[16] = N) : N = f[16];
+	let P;
+	return f[17] !== O || f[18] !== _.control || f[19] !== p || f[20] !== N || f[21] !== A ? (P = /* @__PURE__ */ jsx(Controller, {
+		name: p,
+		control: _.control,
+		defaultValue: O,
+		rules: A,
+		render: N
+	}), f[17] = O, f[18] = _.control, f[19] = p, f[20] = N, f[21] = A, f[22] = P) : P = f[22], P;
+};
+export { SliderField };