@verbb/plugin-kit-react 1.0.0

package/dist/forms/fields/LightswitchField.js

@@ -0,0 +1,29 @@
+import { Lightswitch } from "../../components/Lightswitch.js";
+import "../../components/index.js";
+import { FieldLayout } from "../Field.js";
+import { useEngineField } from "../useEngineField.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/forms/fields/LightswitchField.tsx
+var LightswitchField = ({ form, field }) => {
+	const { value, setValue, errors } = useEngineField(form, field.name);
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		children: /* @__PURE__ */ jsx(Lightswitch, {
+			checked: Boolean(value),
+			onCheckedChange: (checked) => {
+				return setValue(Boolean(checked));
+			},
+			"aria-label": field.label,
+			"aria-invalid": errors.length > 0
+		})
+	});
+};
+//#endregion
+export { LightswitchField };
+
+//# sourceMappingURL=LightswitchField.js.map

package/dist/forms/fields/LightswitchField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightswitchField.js","names":[],"sources":["../../../src/forms/fields/LightswitchField.tsx"],"sourcesContent":["import { Lightswitch } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype LightswitchFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        required?: boolean;\n    };\n};\n\nexport const LightswitchField = ({ form, field }: LightswitchFieldProps) => {\n    const { value, setValue, errors } = useEngineField(form, field.name);\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n        >\n            <Lightswitch\n                checked={Boolean(value)}\n                onCheckedChange={(checked) => { return setValue(Boolean(checked)); }}\n                aria-label={field.label}\n                aria-invalid={errors.length > 0}\n            />\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;AAgBA,IAAa,oBAAoB,EAAE,MAAM,YAAmC;CACxE,MAAM,EAAE,OAAO,UAAU,WAAW,eAAe,MAAM,MAAM,KAAK;AAEpE,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;YAER,oBAAC,aAAD;GACI,SAAS,QAAQ,MAAM;GACvB,kBAAkB,YAAY;AAAE,WAAO,SAAS,QAAQ,QAAQ,CAAC;;GACjE,cAAY,MAAM;GAClB,gBAAc,OAAO,SAAS;GAChC,CAAA;EACQ,CAAA"}

package/dist/forms/fields/ListField.d.ts

@@ -0,0 +1,17 @@
+import { SchemaFormEngineApi } from '../engine/context';
+import { SchemaRenderable } from '../engine/SchemaIndex';
+type ListFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        required?: boolean;
+        schema?: SchemaRenderable;
+        showGroupedErrors?: boolean;
+    };
+};
+export declare const ListField: ({ form, field }: ListFieldProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ListField.d.ts.map

package/dist/forms/fields/ListField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/ListField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAc,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE1E,KAAK,cAAc,GAAG;IAClB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,gBAAgB,CAAC;QAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,iBAAiB,cAAc,mDA4ExD,CAAC"}

package/dist/forms/fields/ListField.js

@@ -0,0 +1,51 @@
+import { FieldLayout } from "../Field.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/forms/fields/ListField.tsx
+var ListField = ({ form, field }) => {
+	const Renderer = form?.SchemaRenderer;
+	const errors = field.showGroupedErrors !== false ? form?.getGroupedErrorsForPath?.(field.name) ?? form?.getErrorMapFields?.()[field.name] ?? [] : [];
+	if (!Renderer) return null;
+	const items = Array.isArray(form.getFieldValue(field.name)) ? form.getFieldValue(field.name) : [];
+	const itemSchema = field.schema;
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		withControl: false,
+		children: items.map((item, index) => {
+			const modifyChildren = (children) => {
+				let normalizedChildren = [];
+				if (Array.isArray(children)) normalizedChildren = children;
+				else if (children) normalizedChildren = [children];
+				return normalizedChildren.map((child) => {
+					if (!child || typeof child !== "object" || Array.isArray(child)) return child;
+					const childNode = child;
+					const resolvedChildren = Boolean(childNode.children) && typeof childNode.children === "object" ? modifyChildren(childNode.children) : childNode.children;
+					const childWithContext = {
+						...childNode,
+						_data: {
+							$item: item,
+							$key: index
+						},
+						children: resolvedChildren
+					};
+					if (childNode.$field && typeof childNode.name === "string") return {
+						...childWithContext,
+						name: `${field.name}.${index}.${childNode.name}`
+					};
+					return childWithContext;
+				});
+			};
+			const modifiedChildren = modifyChildren(itemSchema);
+			const key = item?._uid || item?.id || `${field.name}-${index}`;
+			return /* @__PURE__ */ jsx(Renderer, { schema: modifiedChildren }, key);
+		})
+	});
+};
+//#endregion
+export { ListField };
+
+//# sourceMappingURL=ListField.js.map

package/dist/forms/fields/ListField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListField.js","names":[],"sources":["../../../src/forms/fields/ListField.tsx"],"sourcesContent":["import { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport type { SchemaNode, SchemaRenderable } from '../engine/SchemaIndex';\n\ntype ListFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        required?: boolean;\n        schema?: SchemaRenderable;\n        showGroupedErrors?: boolean;\n    };\n};\n\nexport const ListField = ({ form, field }: ListFieldProps) => {\n    const Renderer = form?.SchemaRenderer;\n    const shouldShowGroupedErrors = field.showGroupedErrors !== false;\n    const errors = shouldShowGroupedErrors\n        ? (form?.getGroupedErrorsForPath?.(field.name)\n            ?? form?.getErrorMapFields?.()[field.name]\n            ?? [])\n        : [];\n\n    if (!Renderer) {\n        return null;\n    }\n\n    const items = Array.isArray(form.getFieldValue(field.name)) ? form.getFieldValue(field.name) : [];\n    const itemSchema = field.schema;\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n            withControl={false}\n        >\n            {items.map((item, index) => {\n                const modifyChildren = (children: SchemaRenderable | undefined): SchemaRenderable[] => {\n                    let normalizedChildren: SchemaRenderable[] = [];\n                    if (Array.isArray(children)) {\n                        normalizedChildren = children;\n                    } else if (children) {\n                        normalizedChildren = [children];\n                    }\n\n                    return normalizedChildren.map((child) => {\n                        if (!child || typeof child !== 'object' || Array.isArray(child)) {\n                            return child;\n                        }\n\n                        const childNode = child as SchemaNode;\n                        const shouldMapChildren = Boolean(childNode.children) && typeof childNode.children === 'object';\n                        const resolvedChildren = shouldMapChildren ? modifyChildren(childNode.children) : childNode.children;\n\n                        const childWithContext = {\n                            ...childNode,\n                            _data: {\n                                $item: item,\n                                $key: index,\n                            },\n                            children: resolvedChildren,\n                        };\n\n                        if (childNode.$field && typeof childNode.name === 'string') {\n                            return {\n                                ...childWithContext,\n                                name: `${field.name}.${index}.${childNode.name}`,\n                            };\n                        }\n\n                        return childWithContext;\n                    });\n                };\n\n                const modifiedChildren = modifyChildren(itemSchema);\n                const key = item?._uid || item?.id || `${field.name}-${index}`;\n\n                return (\n                    <Renderer\n                        key={key}\n                        schema={modifiedChildren}\n                    />\n                );\n            })}\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;AAiBA,IAAa,aAAa,EAAE,MAAM,YAA4B;CAC1D,MAAM,WAAW,MAAM;CAEvB,MAAM,SAD0B,MAAM,sBAAsB,QAErD,MAAM,0BAA0B,MAAM,KAAK,IACvC,MAAM,qBAAqB,CAAC,MAAM,SAClC,EAAE,GACP,EAAE;AAER,KAAI,CAAC,SACD,QAAO;CAGX,MAAM,QAAQ,MAAM,QAAQ,KAAK,cAAc,MAAM,KAAK,CAAC,GAAG,KAAK,cAAc,MAAM,KAAK,GAAG,EAAE;CACjG,MAAM,aAAa,MAAM;AAEzB,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;EACR,aAAa;YAEZ,MAAM,KAAK,MAAM,UAAU;GACxB,MAAM,kBAAkB,aAA+D;IACnF,IAAI,qBAAyC,EAAE;AAC/C,QAAI,MAAM,QAAQ,SAAS,CACvB,sBAAqB;aACd,SACP,sBAAqB,CAAC,SAAS;AAGnC,WAAO,mBAAmB,KAAK,UAAU;AACrC,SAAI,CAAC,SAAS,OAAO,UAAU,YAAY,MAAM,QAAQ,MAAM,CAC3D,QAAO;KAGX,MAAM,YAAY;KAElB,MAAM,mBADoB,QAAQ,UAAU,SAAS,IAAI,OAAO,UAAU,aAAa,WAC1C,eAAe,UAAU,SAAS,GAAG,UAAU;KAE5F,MAAM,mBAAmB;MACrB,GAAG;MACH,OAAO;OACH,OAAO;OACP,MAAM;OACT;MACD,UAAU;MACb;AAED,SAAI,UAAU,UAAU,OAAO,UAAU,SAAS,SAC9C,QAAO;MACH,GAAG;MACH,MAAM,GAAG,MAAM,KAAK,GAAG,MAAM,GAAG,UAAU;MAC7C;AAGL,YAAO;MACT;;GAGN,MAAM,mBAAmB,eAAe,WAAW;GACnD,MAAM,MAAM,MAAM,QAAQ,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG;AAEvD,UACI,oBAAC,UAAD,EAEI,QAAQ,kBACV,EAFO,IAEP;IAER;EACQ,CAAA"}

package/dist/forms/fields/NumberField.d.ts

@@ -0,0 +1,17 @@
+import { SchemaFormEngineApi } from '../engine/context';
+type NumberFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        placeholder?: string;
+        size?: number;
+        required?: boolean;
+        disabled?: boolean;
+    };
+};
+export declare const NumberField: ({ form, field }: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NumberField.d.ts.map

package/dist/forms/fields/NumberField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/NumberField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,gBAAgB,GAAG;IACpB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,iBAAiB,gBAAgB,4CA0B5D,CAAC"}

package/dist/forms/fields/NumberField.js

@@ -0,0 +1,33 @@
+import { Input } from "../../components/Input.js";
+import "../../components/index.js";
+import { FieldLayout } from "../Field.js";
+import { useEngineField } from "../useEngineField.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/forms/fields/NumberField.tsx
+var NumberField = ({ form, field }) => {
+	const { value, setValue, setTouched, errors, isInvalid } = useEngineField(form, field.name);
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		children: /* @__PURE__ */ jsx(Input, {
+			type: "number",
+			value: String(value ?? ""),
+			onChange: (event) => {
+				return setValue(event.target.value);
+			},
+			onBlur: setTouched,
+			placeholder: field.placeholder,
+			disabled: field.disabled,
+			style: field.size ? { width: `${field.size}rem` } : void 0,
+			"aria-invalid": isInvalid
+		})
+	});
+};
+//#endregion
+export { NumberField };
+
+//# sourceMappingURL=NumberField.js.map

package/dist/forms/fields/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","names":[],"sources":["../../../src/forms/fields/NumberField.tsx"],"sourcesContent":["import { Input } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype NumberFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        placeholder?: string;\n        size?: number;\n        required?: boolean;\n        disabled?: boolean;\n    };\n};\n\nexport const NumberField = ({ form, field }: NumberFieldProps) => {\n    const {\n        value, setValue, setTouched, errors, isInvalid,\n    } = useEngineField(form, field.name);\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n        >\n            <Input\n                type=\"number\"\n                value={String(value ?? '')}\n                onChange={(event) => { return setValue(event.target.value); }}\n                onBlur={setTouched}\n                placeholder={field.placeholder}\n                disabled={field.disabled}\n                style={field.size ? { width: `${field.size}rem` } : undefined}\n                aria-invalid={isInvalid}\n            />\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;AAmBA,IAAa,eAAe,EAAE,MAAM,YAA8B;CAC9D,MAAM,EACF,OAAO,UAAU,YAAY,QAAQ,cACrC,eAAe,MAAM,MAAM,KAAK;AAEpC,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;YAER,oBAAC,OAAD;GACI,MAAK;GACL,OAAO,OAAO,SAAS,GAAG;GAC1B,WAAW,UAAU;AAAE,WAAO,SAAS,MAAM,OAAO,MAAM;;GAC1D,QAAQ;GACR,aAAa,MAAM;GACnB,UAAU,MAAM;GAChB,OAAO,MAAM,OAAO,EAAE,OAAO,GAAG,MAAM,KAAK,MAAM,GAAG,KAAA;GACpD,gBAAc;GAChB,CAAA;EACQ,CAAA"}

package/dist/forms/fields/RadioGroupField.d.ts

@@ -0,0 +1,25 @@
+import { SchemaFormEngineApi } from '../engine/context';
+import { SchemaNode } from '../engine/SchemaIndex';
+type RadioGroupFieldOption = {
+    value: unknown;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    if?: string;
+    [key: string]: unknown;
+};
+type RadioGroupFieldProps = {
+    form: SchemaFormEngineApi;
+    field: SchemaNode & {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        options?: RadioGroupFieldOption[];
+        required?: boolean;
+        disabled?: boolean;
+    };
+};
+export declare const RadioGroupField: ({ form, field }: RadioGroupFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RadioGroupField.d.ts.map

package/dist/forms/fields/RadioGroupField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/RadioGroupField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,KAAK,qBAAqB,GAAG;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,KAAK,oBAAoB,GAAG;IACxB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,UAAU,GAAG;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,qBAAqB,EAAE,CAAC;QAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,iBAAiB,oBAAoB,4CAsHpE,CAAC"}

package/dist/forms/fields/RadioGroupField.js

@@ -0,0 +1,102 @@
+import { cn } from "../../utils/classes.js";
+import { evaluateCondition } from "../../utils/schema.js";
+import "../../utils/index.js";
+import { RadioGroup, RadioGroupItem } from "../../components/RadioGroup.js";
+import { FieldLayout } from "../Field.js";
+import { useEngineField } from "../useEngineField.js";
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/forms/fields/RadioGroupField.tsx
+var RadioGroupField = ({ form, field }) => {
+	const { value, setValue, setTouched, errors, isInvalid } = useEngineField(form, field.name);
+	const values = useSyncExternalStore(form.store.subscribe.bind(form.store), () => {
+		return form.store.state.values;
+	}, () => {
+		return form.store.state.values;
+	});
+	const conditionData = useMemo(() => {
+		const scopePath = typeof field._scopePath === "string" ? field._scopePath : "";
+		const scopedValues = scopePath ? form?.getFieldValue?.(scopePath) : null;
+		const scopedObject = scopedValues && typeof scopedValues === "object" ? scopedValues : {};
+		const fieldData = field._data && typeof field._data === "object" ? field._data : {};
+		return {
+			...values || {},
+			...scopedObject,
+			...fieldData
+		};
+	}, [
+		field,
+		form,
+		values
+	]);
+	const filteredOptions = useMemo(() => {
+		return (Array.isArray(field.options) ? field.options : []).filter((option) => {
+			if (!option?.if) return true;
+			return evaluateCondition(option.if, conditionData);
+		});
+	}, [conditionData, field.options]);
+	const currentValueKey = value === void 0 || value === null ? void 0 : String(value);
+	useEffect(() => {
+		if (value === void 0 || value === null || value === "") return;
+		if (filteredOptions.some((option) => {
+			return String(option?.value) === String(value);
+		})) return;
+		const fallback = filteredOptions.find((option) => {
+			return option?.value !== void 0 && option?.disabled !== true;
+		});
+		setValue(fallback ? fallback.value : "");
+	}, [
+		filteredOptions,
+		setValue,
+		value
+	]);
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			name: field.name,
+			value: currentValueKey,
+			onValueChange: (nextValue) => {
+				const matchedOption = filteredOptions.find((option) => {
+					return String(option?.value) === nextValue;
+				});
+				setValue(matchedOption ? matchedOption.value : nextValue);
+				setTouched();
+			},
+			"aria-invalid": isInvalid,
+			disabled: field.disabled,
+			className: "gap-3",
+			children: filteredOptions.map((option, index) => {
+				const optionId = `${field.name}-${index}`;
+				const optionValue = String(option.value);
+				const hasDescription = Boolean(option.description);
+				const optionDisabled = field.disabled || option.disabled;
+				return /* @__PURE__ */ jsxs("label", {
+					htmlFor: optionId,
+					className: cn("flex gap-2 text-sm", hasDescription ? "items-start" : "items-center", optionDisabled && "cursor-not-allowed opacity-60"),
+					children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+						id: optionId,
+						value: optionValue,
+						disabled: optionDisabled,
+						"aria-invalid": isInvalid,
+						className: hasDescription ? "mt-0.5" : void 0
+					}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+						className: "font-medium text-slate-950",
+						children: option.label
+					}), hasDescription && /* @__PURE__ */ jsx("span", {
+						className: "block text-gray-500",
+						children: option.description
+					})] })]
+				}, optionId);
+			})
+		})
+	});
+};
+//#endregion
+export { RadioGroupField };
+
+//# sourceMappingURL=RadioGroupField.js.map

package/dist/forms/fields/RadioGroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupField.js","names":[],"sources":["../../../src/forms/fields/RadioGroupField.tsx"],"sourcesContent":["import { useEffect, useMemo, useSyncExternalStore } from 'react';\nimport { RadioGroup, RadioGroupItem } from '@verbb/plugin-kit-react/components/RadioGroup';\nimport { evaluateCondition } from '@verbb/plugin-kit-react/utils/schema';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport type { SchemaNode } from '../engine/SchemaIndex';\nimport { useEngineField } from '../useEngineField';\n\ntype RadioGroupFieldOption = {\n    value: unknown;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    if?: string;\n    [key: string]: unknown;\n};\n\ntype RadioGroupFieldProps = {\n    form: SchemaFormEngineApi;\n    field: SchemaNode & {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        options?: RadioGroupFieldOption[];\n        required?: boolean;\n        disabled?: boolean;\n    };\n};\n\nexport const RadioGroupField = ({ form, field }: RadioGroupFieldProps) => {\n    const {\n        value, setValue, setTouched, errors, isInvalid,\n    } = useEngineField(form, field.name);\n    const values = useSyncExternalStore(\n        form.store.subscribe.bind(form.store),\n        () => { return form.store.state.values; },\n        () => { return form.store.state.values; },\n    );\n\n    const conditionData = useMemo(() => {\n        const scopePath = typeof field._scopePath === 'string' ? field._scopePath : '';\n        const scopedValues = scopePath ? form?.getFieldValue?.(scopePath) : null;\n        const scopedObject = scopedValues && typeof scopedValues === 'object' ? scopedValues : {};\n        const fieldData = (field._data && typeof field._data === 'object') ? field._data : {};\n\n        return {\n            ...(values || {}),\n            ...scopedObject,\n            ...fieldData,\n        };\n    }, [field, form, values]);\n\n    const filteredOptions = useMemo(() => {\n        const options = Array.isArray(field.options) ? field.options : [];\n\n        return options.filter((option) => {\n            if (!option?.if) {\n                return true;\n            }\n\n            return evaluateCondition(option.if, conditionData);\n        });\n    }, [conditionData, field.options]);\n\n    const currentValueKey = value === undefined || value === null ? undefined : String(value);\n\n    useEffect(() => {\n        if (value === undefined || value === null || value === '') {\n            return;\n        }\n\n        const hasCurrentValue = filteredOptions.some((option) => {\n            return String(option?.value) === String(value);\n        });\n\n        if (hasCurrentValue) {\n            return;\n        }\n\n        const fallback = filteredOptions.find((option) => {\n            return option?.value !== undefined && option?.disabled !== true;\n        });\n\n        setValue(fallback ? fallback.value : '');\n    }, [filteredOptions, setValue, value]);\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n        >\n            <RadioGroup\n                name={field.name}\n                value={currentValueKey}\n                onValueChange={(nextValue) => {\n                    const matchedOption = filteredOptions.find((option) => {\n                        return String(option?.value) === nextValue;\n                    });\n\n                    setValue(matchedOption ? matchedOption.value : nextValue);\n                    setTouched();\n                }}\n                aria-invalid={isInvalid}\n                disabled={field.disabled}\n                className=\"gap-3\"\n            >\n                {filteredOptions.map((option, index) => {\n                    const optionId = `${field.name}-${index}`;\n                    const optionValue = String(option.value);\n                    const hasDescription = Boolean(option.description);\n                    const optionDisabled = field.disabled || option.disabled;\n\n                    return (\n                        <label\n                            key={optionId}\n                            htmlFor={optionId}\n                            className={cn(\n                                'flex gap-2 text-sm',\n                                hasDescription ? 'items-start' : 'items-center',\n                                optionDisabled && 'cursor-not-allowed opacity-60',\n                            )}\n                        >\n                            <RadioGroupItem\n                                id={optionId}\n                                value={optionValue}\n                                disabled={optionDisabled}\n                                aria-invalid={isInvalid}\n                                className={hasDescription ? 'mt-0.5' : undefined}\n                            />\n\n                            <span>\n                                <span className=\"font-medium text-slate-950\">{option.label}</span>\n\n                                {hasDescription && (\n                                    <span className=\"block text-gray-500\">{option.description}</span>\n                                )}\n                            </span>\n                        </label>\n                    );\n                })}\n            </RadioGroup>\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;;;;AA+BA,IAAa,mBAAmB,EAAE,MAAM,YAAkC;CACtE,MAAM,EACF,OAAO,UAAU,YAAY,QAAQ,cACrC,eAAe,MAAM,MAAM,KAAK;CACpC,MAAM,SAAS,qBACX,KAAK,MAAM,UAAU,KAAK,KAAK,MAAM,QAC/B;AAAE,SAAO,KAAK,MAAM,MAAM;UAC1B;AAAE,SAAO,KAAK,MAAM,MAAM;GACnC;CAED,MAAM,gBAAgB,cAAc;EAChC,MAAM,YAAY,OAAO,MAAM,eAAe,WAAW,MAAM,aAAa;EAC5E,MAAM,eAAe,YAAY,MAAM,gBAAgB,UAAU,GAAG;EACpE,MAAM,eAAe,gBAAgB,OAAO,iBAAiB,WAAW,eAAe,EAAE;EACzF,MAAM,YAAa,MAAM,SAAS,OAAO,MAAM,UAAU,WAAY,MAAM,QAAQ,EAAE;AAErF,SAAO;GACH,GAAI,UAAU,EAAE;GAChB,GAAG;GACH,GAAG;GACN;IACF;EAAC;EAAO;EAAM;EAAO,CAAC;CAEzB,MAAM,kBAAkB,cAAc;AAGlC,UAFgB,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,UAAU,EAAE,EAElD,QAAQ,WAAW;AAC9B,OAAI,CAAC,QAAQ,GACT,QAAO;AAGX,UAAO,kBAAkB,OAAO,IAAI,cAAc;IACpD;IACH,CAAC,eAAe,MAAM,QAAQ,CAAC;CAElC,MAAM,kBAAkB,UAAU,KAAA,KAAa,UAAU,OAAO,KAAA,IAAY,OAAO,MAAM;AAEzF,iBAAgB;AACZ,MAAI,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU,GACnD;AAOJ,MAJwB,gBAAgB,MAAM,WAAW;AACrD,UAAO,OAAO,QAAQ,MAAM,KAAK,OAAO,MAAM;IAG9C,CACA;EAGJ,MAAM,WAAW,gBAAgB,MAAM,WAAW;AAC9C,UAAO,QAAQ,UAAU,KAAA,KAAa,QAAQ,aAAa;IAC7D;AAEF,WAAS,WAAW,SAAS,QAAQ,GAAG;IACzC;EAAC;EAAiB;EAAU;EAAM,CAAC;AAEtC,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;YAER,oBAAC,YAAD;GACI,MAAM,MAAM;GACZ,OAAO;GACP,gBAAgB,cAAc;IAC1B,MAAM,gBAAgB,gBAAgB,MAAM,WAAW;AACnD,YAAO,OAAO,QAAQ,MAAM,KAAK;MACnC;AAEF,aAAS,gBAAgB,cAAc,QAAQ,UAAU;AACzD,gBAAY;;GAEhB,gBAAc;GACd,UAAU,MAAM;GAChB,WAAU;aAET,gBAAgB,KAAK,QAAQ,UAAU;IACpC,MAAM,WAAW,GAAG,MAAM,KAAK,GAAG;IAClC,MAAM,cAAc,OAAO,OAAO,MAAM;IACxC,MAAM,iBAAiB,QAAQ,OAAO,YAAY;IAClD,MAAM,iBAAiB,MAAM,YAAY,OAAO;AAEhD,WACI,qBAAC,SAAD;KAEI,SAAS;KACT,WAAW,GACP,sBACA,iBAAiB,gBAAgB,gBACjC,kBAAkB,gCACrB;eAPL,CASI,oBAAC,gBAAD;MACI,IAAI;MACJ,OAAO;MACP,UAAU;MACV,gBAAc;MACd,WAAW,iBAAiB,WAAW,KAAA;MACzC,CAAA,EAEF,qBAAC,QAAD,EAAA,UAAA,CACI,oBAAC,QAAD;MAAM,WAAU;gBAA8B,OAAO;MAAa,CAAA,EAEjE,kBACG,oBAAC,QAAD;MAAM,WAAU;gBAAuB,OAAO;MAAmB,CAAA,CAElE,EAAA,CAAA,CACH;OAvBC,SAuBD;KAEd;GACO,CAAA;EACH,CAAA"}

package/dist/forms/fields/RichTextField.d.ts

@@ -0,0 +1,23 @@
+import { LinkOptionsInput } from '../../components';
+import { SchemaFormEngineApi } from '../engine/context';
+import { VariableConfig } from '../contexts/VariableCategoriesContext';
+type RichTextFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        placeholder?: string;
+        buttons?: string[];
+        variableConfig?: VariableConfig;
+        required?: boolean;
+        disabled?: boolean;
+        rows?: number;
+        linkOptions?: LinkOptionsInput;
+        linkSelectorStorageKeyPrefix?: string;
+    };
+};
+export declare const RichTextField: ({ form, field }: RichTextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RichTextField.d.ts.map

package/dist/forms/fields/RichTextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/RichTextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAgB,MAAM,oCAAoC,CAAC;AAEpF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAI5E,KAAK,kBAAkB,GAAG;IACtB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;QACnB,cAAc,CAAC,EAAE,cAAc,CAAC;QAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,gBAAgB,CAAC;QAC/B,4BAA4B,CAAC,EAAE,MAAM,CAAC;KACzC,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,iBAAiB,kBAAkB,4CA6ChE,CAAC"}

package/dist/forms/fields/RichTextField.js

@@ -0,0 +1,50 @@
+import { TiptapEditor } from "../../components/TiptapEditor.js";
+import "../../components/index.js";
+import { FieldLayout } from "../Field.js";
+import { useEngineField } from "../useEngineField.js";
+import { useVariableCategoriesContext } from "../contexts/VariableCategoriesContext.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/forms/fields/RichTextField.tsx
+var RichTextField = ({ form, field }) => {
+	const { value, setValue, errors } = useEngineField(form, field.name);
+	const buttons = field.buttons ?? ["bold", "italic"];
+	const { getVariableCategories, variableCategoryLabels, variableCategoryOrder, variableTransformerRegistry } = useVariableCategoriesContext();
+	const { variableConfig } = field;
+	const variableCategories = useMemo(() => {
+		if (!variableConfig || !getVariableCategories) return;
+		return getVariableCategories(variableConfig, { form });
+	}, [
+		variableConfig,
+		form,
+		getVariableCategories
+	]);
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		withControl: false,
+		children: /* @__PURE__ */ jsx(TiptapEditor, {
+			value: value ?? "",
+			onChange: setValue,
+			placeholder: field.placeholder,
+			rows: field.rows,
+			buttons,
+			...variableCategories && { variableCategories },
+			...variableCategoryLabels && { variableCategoryLabels },
+			...variableCategoryOrder && { variableCategoryOrder },
+			...variableTransformerRegistry && { variableTransformerRegistry },
+			...field.linkOptions && { linkOptions: field.linkOptions },
+			...field.linkSelectorStorageKeyPrefix && { linkSelectorStorageKeyPrefix: field.linkSelectorStorageKeyPrefix },
+			disabled: field.disabled,
+			isInvalid: errors.length > 0
+		})
+	});
+};
+//#endregion
+export { RichTextField };
+
+//# sourceMappingURL=RichTextField.js.map

package/dist/forms/fields/RichTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextField.js","names":[],"sources":["../../../src/forms/fields/RichTextField.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { LinkOptionsInput, TiptapEditor } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport type { VariableConfig } from '../contexts/VariableCategoriesContext';\nimport { useEngineField } from '../useEngineField';\nimport { useVariableCategoriesContext } from '../contexts/VariableCategoriesContext';\n\ntype RichTextFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        placeholder?: string;\n        buttons?: string[];\n        variableConfig?: VariableConfig;\n        required?: boolean;\n        disabled?: boolean;\n        rows?: number;\n        linkOptions?: LinkOptionsInput;\n        linkSelectorStorageKeyPrefix?: string;\n    };\n};\n\nexport const RichTextField = ({ form, field }: RichTextFieldProps) => {\n    const { value, setValue, errors } = useEngineField(form, field.name);\n    const buttons = field.buttons ?? ['bold', 'italic'];\n    const {\n        getVariableCategories,\n        variableCategoryLabels,\n        variableCategoryOrder,\n        variableTransformerRegistry,\n    } = useVariableCategoriesContext();\n    const { variableConfig } = field;\n\n    const variableCategories = useMemo(() => {\n        if (!variableConfig || !getVariableCategories) {\n            return undefined;\n        }\n        return getVariableCategories(variableConfig, { form });\n    }, [variableConfig, form, getVariableCategories]);\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n            withControl={false}\n        >\n            <TiptapEditor\n                value={value ?? ''}\n                onChange={setValue}\n                placeholder={field.placeholder}\n                rows={field.rows}\n                buttons={buttons}\n                {...(variableCategories && { variableCategories })}\n                {...(variableCategoryLabels && { variableCategoryLabels })}\n                {...(variableCategoryOrder && { variableCategoryOrder })}\n                {...(variableTransformerRegistry && { variableTransformerRegistry })}\n                {...(field.linkOptions && { linkOptions: field.linkOptions })}\n                {...(field.linkSelectorStorageKeyPrefix && { linkSelectorStorageKeyPrefix: field.linkSelectorStorageKeyPrefix })}\n                disabled={field.disabled}\n                isInvalid={errors.length > 0}\n            />\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;;;AA0BA,IAAa,iBAAiB,EAAE,MAAM,YAAgC;CAClE,MAAM,EAAE,OAAO,UAAU,WAAW,eAAe,MAAM,MAAM,KAAK;CACpE,MAAM,UAAU,MAAM,WAAW,CAAC,QAAQ,SAAS;CACnD,MAAM,EACF,uBACA,wBACA,uBACA,gCACA,8BAA8B;CAClC,MAAM,EAAE,mBAAmB;CAE3B,MAAM,qBAAqB,cAAc;AACrC,MAAI,CAAC,kBAAkB,CAAC,sBACpB;AAEJ,SAAO,sBAAsB,gBAAgB,EAAE,MAAM,CAAC;IACvD;EAAC;EAAgB;EAAM;EAAsB,CAAC;AAEjD,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;EACR,aAAa;YAEb,oBAAC,cAAD;GACI,OAAO,SAAS;GAChB,UAAU;GACV,aAAa,MAAM;GACnB,MAAM,MAAM;GACH;GACT,GAAK,sBAAsB,EAAE,oBAAoB;GACjD,GAAK,0BAA0B,EAAE,wBAAwB;GACzD,GAAK,yBAAyB,EAAE,uBAAuB;GACvD,GAAK,+BAA+B,EAAE,6BAA6B;GACnE,GAAK,MAAM,eAAe,EAAE,aAAa,MAAM,aAAa;GAC5D,GAAK,MAAM,gCAAgC,EAAE,8BAA8B,MAAM,8BAA8B;GAC/G,UAAU,MAAM;GAChB,WAAW,OAAO,SAAS;GAC7B,CAAA;EACQ,CAAA"}

package/dist/forms/fields/SelectField.d.ts

@@ -0,0 +1,25 @@
+import { SchemaFormEngineApi } from '../engine/context';
+import { SchemaNode } from '../engine/SchemaIndex';
+type SelectFieldOption = {
+    value: unknown;
+    label: string;
+    disabled?: boolean;
+    if?: string;
+    [key: string]: unknown;
+};
+type SelectFieldProps = {
+    form: SchemaFormEngineApi;
+    field: SchemaNode & {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        placeholder?: string;
+        options?: SelectFieldOption[];
+        required?: boolean;
+        disabled?: boolean;
+    };
+};
+export declare const SelectField: ({ form, field }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectField.d.ts.map

package/dist/forms/fields/SelectField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/SelectField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACpB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,UAAU,GAAG;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAIF,eAAO,MAAM,WAAW,GAAI,iBAAiB,gBAAgB,4CA0E5D,CAAC"}

package/dist/forms/fields/SelectField.js

@@ -0,0 +1,73 @@
+import { evaluateCondition } from "../../utils/schema.js";
+import { SelectInput } from "../../components/SelectInput.js";
+import "../../components/index.js";
+import { FieldLayout } from "../Field.js";
+import { useEngineField } from "../useEngineField.js";
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/forms/fields/SelectField.tsx
+var SelectField = ({ form, field }) => {
+	const { value, setValue, setTouched, errors, isInvalid } = useEngineField(form, field.name);
+	const values = useSyncExternalStore(form.store.subscribe.bind(form.store), () => {
+		return form.store.state.values;
+	}, () => {
+		return form.store.state.values;
+	});
+	const conditionData = useMemo(() => {
+		const scopePath = typeof field._scopePath === "string" ? field._scopePath : "";
+		const scopedValues = scopePath ? form?.getFieldValue?.(scopePath) : null;
+		const scopedObject = scopedValues && typeof scopedValues === "object" ? scopedValues : {};
+		const fieldData = field._data && typeof field._data === "object" ? field._data : {};
+		return {
+			...values || {},
+			...scopedObject,
+			...fieldData
+		};
+	}, [
+		field,
+		form,
+		values
+	]);
+	const filteredOptions = useMemo(() => {
+		return (Array.isArray(field.options) ? field.options : []).filter((option) => {
+			if (!option?.if) return true;
+			return evaluateCondition(option.if, conditionData);
+		});
+	}, [conditionData, field.options]);
+	useEffect(() => {
+		if (value === void 0 || value === null || value === "") return;
+		if (filteredOptions.some((option) => {
+			return option?.value === value;
+		})) return;
+		const fallback = filteredOptions.find((option) => {
+			return option?.value !== void 0 && option?.disabled !== true;
+		});
+		setValue(fallback ? fallback.value : "");
+	}, [
+		filteredOptions,
+		setValue,
+		value
+	]);
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		children: /* @__PURE__ */ jsx(SelectInput, {
+			options: filteredOptions,
+			placeholder: field.placeholder,
+			value: value ?? "",
+			onChange: (nextValue) => {
+				return setValue(nextValue);
+			},
+			isInvalid,
+			onBlur: setTouched
+		})
+	});
+};
+//#endregion
+export { SelectField };
+
+//# sourceMappingURL=SelectField.js.map

package/dist/forms/fields/SelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/forms/fields/SelectField.tsx"],"sourcesContent":["import type React from 'react';\nimport { SelectInput } from '@verbb/plugin-kit-react/components';\nimport { evaluateCondition } from '@verbb/plugin-kit-react/utils/schema';\nimport { useEffect, useMemo, useSyncExternalStore } from 'react';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport type { SchemaNode } from '../engine/SchemaIndex';\nimport { useEngineField } from '../useEngineField';\n\ntype SelectFieldOption = {\n    value: unknown;\n    label: string;\n    disabled?: boolean;\n    if?: string;\n    [key: string]: unknown;\n};\n\ntype SelectFieldProps = {\n    form: SchemaFormEngineApi;\n    field: SchemaNode & {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        placeholder?: string;\n        options?: SelectFieldOption[];\n        required?: boolean;\n        disabled?: boolean;\n    };\n};\n\ntype SelectInputProps = React.ComponentProps<typeof SelectInput>;\n\nexport const SelectField = ({ form, field }: SelectFieldProps) => {\n    const {\n        value, setValue, setTouched, errors, isInvalid,\n    } = useEngineField(form, field.name);\n    const values = useSyncExternalStore(\n        form.store.subscribe.bind(form.store),\n        () => { return form.store.state.values; },\n        () => { return form.store.state.values; },\n    );\n\n    const conditionData = useMemo(() => {\n        const scopePath = typeof field._scopePath === 'string' ? field._scopePath : '';\n        const scopedValues = scopePath ? form?.getFieldValue?.(scopePath) : null;\n        const scopedObject = scopedValues && typeof scopedValues === 'object' ? scopedValues : {};\n        const fieldData = (field._data && typeof field._data === 'object') ? field._data : {};\n\n        return {\n            ...(values || {}),\n            ...scopedObject,\n            ...fieldData,\n        };\n    }, [field, form, values]);\n\n    const filteredOptions = useMemo(() => {\n        const options = Array.isArray(field.options) ? field.options : [];\n\n        return options.filter((option) => {\n            if (!option?.if) {\n                return true;\n            }\n\n            return evaluateCondition(option.if, conditionData);\n        });\n    }, [conditionData, field.options]);\n\n    useEffect(() => {\n        if (value === undefined || value === null || value === '') {\n            return;\n        }\n\n        const hasCurrentValue = filteredOptions.some((option) => {\n            return option?.value === value;\n        });\n\n        if (hasCurrentValue) {\n            return;\n        }\n\n        const fallback = filteredOptions.find((option) => {\n            return option?.value !== undefined && option?.disabled !== true;\n        });\n\n        setValue(fallback ? fallback.value : '');\n    }, [filteredOptions, setValue, value]);\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n        >\n            <SelectInput\n                options={filteredOptions}\n                placeholder={field.placeholder}\n                value={value ?? ''}\n                onChange={(nextValue) => { return setValue(nextValue); }}\n                isInvalid={isInvalid}\n                onBlur={setTouched as SelectInputProps['onBlur']}\n            />\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;;;AAiCA,IAAa,eAAe,EAAE,MAAM,YAA8B;CAC9D,MAAM,EACF,OAAO,UAAU,YAAY,QAAQ,cACrC,eAAe,MAAM,MAAM,KAAK;CACpC,MAAM,SAAS,qBACX,KAAK,MAAM,UAAU,KAAK,KAAK,MAAM,QAC/B;AAAE,SAAO,KAAK,MAAM,MAAM;UAC1B;AAAE,SAAO,KAAK,MAAM,MAAM;GACnC;CAED,MAAM,gBAAgB,cAAc;EAChC,MAAM,YAAY,OAAO,MAAM,eAAe,WAAW,MAAM,aAAa;EAC5E,MAAM,eAAe,YAAY,MAAM,gBAAgB,UAAU,GAAG;EACpE,MAAM,eAAe,gBAAgB,OAAO,iBAAiB,WAAW,eAAe,EAAE;EACzF,MAAM,YAAa,MAAM,SAAS,OAAO,MAAM,UAAU,WAAY,MAAM,QAAQ,EAAE;AAErF,SAAO;GACH,GAAI,UAAU,EAAE;GAChB,GAAG;GACH,GAAG;GACN;IACF;EAAC;EAAO;EAAM;EAAO,CAAC;CAEzB,MAAM,kBAAkB,cAAc;AAGlC,UAFgB,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,UAAU,EAAE,EAElD,QAAQ,WAAW;AAC9B,OAAI,CAAC,QAAQ,GACT,QAAO;AAGX,UAAO,kBAAkB,OAAO,IAAI,cAAc;IACpD;IACH,CAAC,eAAe,MAAM,QAAQ,CAAC;AAElC,iBAAgB;AACZ,MAAI,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU,GACnD;AAOJ,MAJwB,gBAAgB,MAAM,WAAW;AACrD,UAAO,QAAQ,UAAU;IAGzB,CACA;EAGJ,MAAM,WAAW,gBAAgB,MAAM,WAAW;AAC9C,UAAO,QAAQ,UAAU,KAAA,KAAa,QAAQ,aAAa;IAC7D;AAEF,WAAS,WAAW,SAAS,QAAQ,GAAG;IACzC;EAAC;EAAiB;EAAU;EAAM,CAAC;AAEtC,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;YAER,oBAAC,aAAD;GACI,SAAS;GACT,aAAa,MAAM;GACnB,OAAO,SAAS;GAChB,WAAW,cAAc;AAAE,WAAO,SAAS,UAAU;;GAC1C;GACX,QAAQ;GACV,CAAA;EACQ,CAAA"}

package/dist/forms/fields/StaticTableField.d.ts

@@ -0,0 +1,34 @@
+import { SchemaFormEngineApi } from '../engine/context';
+type StaticTableOption = {
+    label?: string;
+    value?: unknown;
+    [key: string]: unknown;
+};
+type StaticTableColumn = {
+    name?: string;
+    type?: string;
+    label?: string;
+    heading?: string;
+    class?: string;
+    required?: boolean;
+    options?: StaticTableOption[];
+    placeholder?: string;
+    thin?: boolean;
+    [key: string]: unknown;
+};
+type StaticTableRowValue = Record<string, unknown>;
+type StaticTableFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        required?: boolean;
+        columns?: StaticTableColumn[] | Record<string, StaticTableColumn>;
+        rows?: StaticTableRowValue[] | Record<string, StaticTableRowValue>;
+    };
+};
+export declare const StaticTableField: ({ form, field }: StaticTableFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StaticTableField.d.ts.map

package/dist/forms/fields/StaticTableField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticTableField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/StaticTableField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,iBAAiB,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,KAAK,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AA0CnD,KAAK,qBAAqB,GAAG;IACzB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,CAAC,EAAE,iBAAiB,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;QAClE,IAAI,CAAC,EAAE,mBAAmB,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;KACtE,CAAC;CACL,CAAC;AA0DF,eAAO,MAAM,gBAAgB,GAAI,iBAAiB,qBAAqB,4CAkEtE,CAAC"}