@verbb/plugin-kit-react 1.0.0

package/dist/forms/fields/CalculationsField.js

@@ -0,0 +1,215 @@
+import { cn } from "../../utils/classes.js";
+import { hostRequest } from "../../utils/hostBridge.js";
+import "../../utils/index.js";
+import { useTranslation } from "../../hooks/useTranslation.js";
+import "../../hooks/index.js";
+import { contentToValue } from "../../components/tiptap/variableSerialization.js";
+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 { CalculationsToolbar } from "./CalculationsToolbar.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck } from "@fortawesome/pro-solid-svg-icons";
+//#region src/forms/fields/CalculationsField.tsx
+var flattenVariableOptions = (options = []) => {
+	const flat = [];
+	const visit = (nodes) => {
+		nodes.forEach((node) => {
+			flat.push(node);
+			if (Array.isArray(node?.children) && node.children.length) visit(node.children);
+		});
+	};
+	visit(options);
+	return flat;
+};
+var getAvailableVariableTokens = (variableCategories) => {
+	const flat = flattenVariableOptions(Object.values(variableCategories ?? {}).flatMap((items) => {
+		return Array.isArray(items) ? items : [];
+	}));
+	return Array.from(new Set(flat.map((item) => {
+		return typeof item?.value === "string" ? item.value.trim() : "";
+	}).filter(Boolean)));
+};
+var getVariableTokenLabelMap = (variableCategories) => {
+	return flattenVariableOptions(Object.values(variableCategories ?? {}).flatMap((items) => {
+		return Array.isArray(items) ? items : [];
+	})).reduce((map, item) => {
+		const token = typeof item?.value === "string" ? item.value.trim() : "";
+		if (!token) return map;
+		map[token] = (typeof item?.label === "string" ? item.label.trim() : "") || token;
+		return map;
+	}, {});
+};
+var getFormulaFromValue = (value) => {
+	if (typeof value === "string") return value;
+	if (Array.isArray(value)) return contentToValue(value);
+	if (value && typeof value === "object" && Array.isArray(value.content)) return contentToValue(value.content);
+	return "";
+};
+var getPageIndexFromScopePath = (scopePathValue) => {
+	const scopePath = typeof scopePathValue === "string" ? scopePathValue : "";
+	if (!scopePath) return null;
+	const match = scopePath.match(/(?:^|\\.)pages\\.(\\d+)(?:\\.|$)/);
+	if (!match) return null;
+	const pageIndex = Number.parseInt(match[1] || "", 10);
+	return Number.isInteger(pageIndex) ? pageIndex : null;
+};
+var getActivePageIndex = (pages, activePage) => {
+	if (!Array.isArray(pages) || !pages.length || typeof activePage !== "string" || !activePage) return null;
+	const pageIndex = pages.findIndex((page) => {
+		const resolvedPage = page && typeof page === "object" ? page : {};
+		return resolvedPage._handle === activePage || resolvedPage.handle === activePage;
+	});
+	return pageIndex >= 0 ? pageIndex : null;
+};
+var getValidationErrorDetails = (error, fallbackMessage) => {
+	const resolvedError = error && typeof error === "object" ? error : {};
+	const responseData = resolvedError.response?.data;
+	const message = responseData?.message || resolvedError.message || fallbackMessage;
+	return {
+		message: String(message),
+		technicalMessage: String(responseData?.technicalMessage ?? "")
+	};
+};
+var CalculationsField = ({ form, field }) => {
+	const t = useTranslation();
+	const { value, setValue, errors } = useEngineField(form, field.name);
+	const [guideOpen, setGuideOpen] = useState(false);
+	const [validating, setValidating] = useState(false);
+	const [validation, setValidation] = useState({
+		type: "idle",
+		message: ""
+	});
+	const { getVariableCategories, variableCategoryLabels, variableCategoryOrder, variableTransformerRegistry } = useVariableCategoriesContext();
+	const resolvedVariableCategories = useMemo(() => {
+		if (field.variableCategories) return field.variableCategories;
+		const { variableConfig } = field;
+		if (!variableConfig || !getVariableCategories) return;
+		const pages = form?.getFieldValue?.("pages");
+		const activePage = form?.getFieldValue?.("activePage");
+		const scopePageIndex = getPageIndexFromScopePath(field._scopePath);
+		const activePageIndex = getActivePageIndex(pages, activePage);
+		const currentPageIndex = Number.isInteger(scopePageIndex) ? scopePageIndex : activePageIndex;
+		return getVariableCategories({
+			...variableConfig,
+			...Number.isInteger(currentPageIndex) ? { currentPageIndex } : {}
+		}, { form });
+	}, [
+		field,
+		form,
+		getVariableCategories
+	]);
+	const availableVariableTokens = useMemo(() => {
+		return getAvailableVariableTokens(resolvedVariableCategories);
+	}, [resolvedVariableCategories]);
+	const tokenLabels = useMemo(() => {
+		return getVariableTokenLabelMap(resolvedVariableCategories);
+	}, [resolvedVariableCategories]);
+	const runValidation = async () => {
+		const formula = getFormulaFromValue(value).trim();
+		if (!formula) {
+			setValidation({
+				type: "error",
+				message: t("Enter a formula to test.")
+			});
+			return;
+		}
+		setValidating(true);
+		setValidation({
+			type: "idle",
+			message: "",
+			technicalMessage: ""
+		});
+		try {
+			const response = await hostRequest("POST", field.validationAction || "plugin-kit/fields/validate-calculations-formula", { data: {
+				formula,
+				availableTokens: availableVariableTokens,
+				tokenLabels
+			} });
+			const payload = response?.data ?? response;
+			const isValid = Boolean(payload?.valid);
+			const message = String(payload?.message ?? "");
+			const technicalMessage = String(payload?.technicalMessage ?? "");
+			setValidation({
+				type: isValid ? "success" : "error",
+				message: message || (isValid ? t("Formula is valid.") : t("Formula is invalid.")),
+				technicalMessage
+			});
+		} catch (error) {
+			const { message, technicalMessage } = getValidationErrorDetails(error, t("Unable to validate formula."));
+			setValidation({
+				type: "error",
+				message: String(message),
+				technicalMessage
+			});
+		} finally {
+			setValidating(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		withControl: false,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ jsx(TiptapEditor, {
+				value: value ?? "",
+				onChange: setValue,
+				placeholder: field.placeholder,
+				rows: field.rows,
+				buttons: ["variableTag"],
+				toolbarContent: ({ editor, variableCategories, variableCategoryLabels, variableCategoryOrder, variablePickerOpen, onVariablePickerOpenChange }) => {
+					return /* @__PURE__ */ jsx(CalculationsToolbar, {
+						editor,
+						variableCategories,
+						variableCategoryLabels,
+						variableCategoryOrder,
+						variablePickerOpen,
+						onVariablePickerOpenChange,
+						guideOpen,
+						onGuideOpenChange: setGuideOpen,
+						validating,
+						onValidate: runValidation
+					});
+				},
+				disabled: field.disabled,
+				isInvalid: errors.length > 0,
+				variableCategories: resolvedVariableCategories,
+				variableCategoryLabels,
+				variableCategoryOrder,
+				variableTransformerRegistry,
+				variablePickerTriggerCharacters: field.variablePickerTriggerCharacters
+			}), validation.type !== "idle" && /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsxs("p", {
+					className: cn("flex items-center gap-1", validation.type === "success" ? "text-emerald-700" : "text-rose-700"),
+					children: [validation.type === "success" ? /* @__PURE__ */ jsx(FontAwesomeIcon, {
+						icon: faCheck,
+						className: "size-3 mt-0.5"
+					}) : null, validation.message]
+				}), validation.type === "error" && validation.technicalMessage && validation.technicalMessage !== validation.message && /* @__PURE__ */ jsxs("details", {
+					className: "text-xs text-gray-500",
+					children: [/* @__PURE__ */ jsx("summary", {
+						className: "cursor-pointer select-none",
+						children: t("Show technical details")
+					}), /* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-rose-700",
+						children: validation.technicalMessage
+					})]
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { CalculationsField };
+
+//# sourceMappingURL=CalculationsField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalculationsField.js","names":[],"sources":["../../../src/forms/fields/CalculationsField.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { TiptapEditor } from '@verbb/plugin-kit-react/components';\nimport type { VariableCategories, VariableOption } from '@verbb/plugin-kit-react/components/tiptap/VariableDropdown';\nimport { contentToValue } from '@verbb/plugin-kit-react/components/tiptap/variableSerialization';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\nimport { hostRequest } from '@verbb/plugin-kit-react/utils';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport type { SchemaNode } from '../engine/SchemaIndex';\nimport type { VariableConfig } from '../contexts/VariableCategoriesContext';\nimport { useEngineField } from '../useEngineField';\nimport { useVariableCategoriesContext } from '../contexts/VariableCategoriesContext';\nimport { CalculationsToolbar } from './CalculationsToolbar';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\ntype CalculationsFieldProps = {\n    form: SchemaFormEngineApi;\n    field: SchemaNode & {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        placeholder?: string;\n        required?: boolean;\n        disabled?: boolean;\n        variableConfig?: VariableConfig;\n        variableCategories?: VariableCategories;\n        variablePickerTriggerCharacters?: string[];\n        validationAction?: string;\n        rows?: number;\n    };\n};\n\ntype ValidationState = {\n    type: 'idle' | 'success' | 'error';\n    message: string;\n    technicalMessage?: string;\n};\n\ntype CalculationPage = {\n    _handle?: string;\n    handle?: string;\n};\n\ntype ValidationResponsePayload = {\n    valid?: unknown;\n    message?: unknown;\n    technicalMessage?: unknown;\n};\n\ntype HostRequestError = {\n    message?: string;\n    response?: {\n        data?: {\n            message?: unknown;\n            technicalMessage?: unknown;\n        };\n    };\n};\n\nconst flattenVariableOptions = (options: VariableOption[] = []): VariableOption[] => {\n    const flat: VariableOption[] = [];\n\n    const visit = (nodes: VariableOption[]) => {\n        nodes.forEach((node) => {\n            flat.push(node);\n\n            if (Array.isArray(node?.children) && node.children.length) {\n                visit(node.children);\n            }\n        });\n    };\n\n    visit(options);\n    return flat;\n};\n\nconst getAvailableVariableTokens = (variableCategories?: VariableCategories): string[] => {\n    const categoryOptions = Object.values(variableCategories ?? {}).flatMap((items) => {\n        return Array.isArray(items) ? items : [];\n    });\n\n    const flat = flattenVariableOptions(categoryOptions);\n\n    return Array.from(new Set(flat\n        .map((item) => {\n            return typeof item?.value === 'string' ? item.value.trim() : '';\n        })\n        .filter(Boolean)));\n};\n\nconst getVariableTokenLabelMap = (variableCategories?: VariableCategories): Record<string, string> => {\n    const categoryOptions = Object.values(variableCategories ?? {}).flatMap((items) => {\n        return Array.isArray(items) ? items : [];\n    });\n\n    const flat = flattenVariableOptions(categoryOptions);\n\n    return flat.reduce((map, item) => {\n        const token = typeof item?.value === 'string' ? item.value.trim() : '';\n        if (!token) {\n            return map;\n        }\n\n        const label = typeof item?.label === 'string' ? item.label.trim() : '';\n        map[token] = label || token;\n\n        return map;\n    }, {} as Record<string, string>);\n};\n\nconst getFormulaFromValue = (value: unknown): string => {\n    if (typeof value === 'string') {\n        return value;\n    }\n\n    if (Array.isArray(value)) {\n        return contentToValue(value);\n    }\n\n    if (value && typeof value === 'object' && Array.isArray((value as { content?: unknown[] }).content)) {\n        return contentToValue((value as { content: unknown[] }).content);\n    }\n\n    return '';\n};\n\nconst getPageIndexFromScopePath = (scopePathValue: unknown): number | null => {\n    const scopePath = typeof scopePathValue === 'string' ? scopePathValue : '';\n\n    if (!scopePath) {\n        return null;\n    }\n\n    const match = scopePath.match(/(?:^|\\\\.)pages\\\\.(\\\\d+)(?:\\\\.|$)/);\n    if (!match) {\n        return null;\n    }\n\n    const pageIndex = Number.parseInt(match[1] || '', 10);\n\n    return Number.isInteger(pageIndex) ? pageIndex : null;\n};\n\nconst getActivePageIndex = (pages: unknown, activePage: unknown): number | null => {\n    if (!Array.isArray(pages) || !pages.length || typeof activePage !== 'string' || !activePage) {\n        return null;\n    }\n\n    const pageIndex = pages.findIndex((page) => {\n        const resolvedPage = (page && typeof page === 'object') ? page as CalculationPage : {};\n        return resolvedPage._handle === activePage || resolvedPage.handle === activePage;\n    });\n\n    return pageIndex >= 0 ? pageIndex : null;\n};\n\nconst getValidationErrorDetails = (error: unknown, fallbackMessage: string) => {\n    const resolvedError = (error && typeof error === 'object') ? error as HostRequestError : {};\n    const responseData = resolvedError.response?.data;\n    const message = responseData?.message || resolvedError.message || fallbackMessage;\n\n    return {\n        message: String(message),\n        technicalMessage: String(responseData?.technicalMessage ?? ''),\n    };\n};\n\nexport const CalculationsField = ({ form, field }: CalculationsFieldProps) => {\n    const t = useTranslation();\n    const { value, setValue, errors } = useEngineField(form, field.name);\n    const [guideOpen, setGuideOpen] = useState(false);\n    const [validating, setValidating] = useState(false);\n    const [validation, setValidation] = useState<ValidationState>({ type: 'idle', message: '' });\n    const {\n        getVariableCategories,\n        variableCategoryLabels,\n        variableCategoryOrder,\n        variableTransformerRegistry,\n    } = useVariableCategoriesContext();\n\n    const resolvedVariableCategories = useMemo(() => {\n        if (field.variableCategories) {\n            return field.variableCategories;\n        }\n\n        const { variableConfig } = field;\n        if (!variableConfig || !getVariableCategories) {\n            return undefined;\n        }\n\n        const pages = form?.getFieldValue?.('pages');\n        const activePage = form?.getFieldValue?.('activePage');\n        const scopePageIndex = getPageIndexFromScopePath(field._scopePath);\n        const activePageIndex = getActivePageIndex(pages, activePage);\n        const currentPageIndex = Number.isInteger(scopePageIndex) ? scopePageIndex : activePageIndex;\n        const scopedVariableConfig = {\n            ...variableConfig,\n            ...(Number.isInteger(currentPageIndex) ? { currentPageIndex } : {}),\n        };\n\n        return getVariableCategories(scopedVariableConfig, { form });\n    }, [field, form, getVariableCategories]);\n\n    const availableVariableTokens = useMemo(() => {\n        return getAvailableVariableTokens(resolvedVariableCategories);\n    }, [resolvedVariableCategories]);\n    const tokenLabels = useMemo(() => {\n        return getVariableTokenLabelMap(resolvedVariableCategories);\n    }, [resolvedVariableCategories]);\n\n    const runValidation = async () => {\n        const formula = getFormulaFromValue(value).trim();\n        if (!formula) {\n            setValidation({ type: 'error', message: t('Enter a formula to test.') });\n            return;\n        }\n\n        setValidating(true);\n        setValidation({ type: 'idle', message: '', technicalMessage: '' });\n\n        try {\n            const action = field.validationAction || 'plugin-kit/fields/validate-calculations-formula';\n            const response = await hostRequest('POST', action, {\n                data: {\n                    formula,\n                    availableTokens: availableVariableTokens,\n                    tokenLabels,\n                },\n            });\n\n            const payload = (response?.data ?? response) as ValidationResponsePayload;\n            const isValid = Boolean(payload?.valid);\n            const message = String(payload?.message ?? '');\n            const technicalMessage = String(payload?.technicalMessage ?? '');\n\n            setValidation({\n                type: isValid ? 'success' : 'error',\n                message: message || (isValid ? t('Formula is valid.') : t('Formula is invalid.')),\n                technicalMessage,\n            });\n        } catch (error) {\n            const { message, technicalMessage } = getValidationErrorDetails(error, t('Unable to validate formula.'));\n            setValidation({\n                type: 'error',\n                message: String(message),\n                technicalMessage,\n            });\n        } finally {\n            setValidating(false);\n        }\n    };\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            <div className=\"space-y-2\">\n                <TiptapEditor\n                    value={value ?? ''}\n                    onChange={setValue}\n                    placeholder={field.placeholder}\n                    rows={field.rows}\n                    buttons={['variableTag']}\n                    toolbarContent={({ editor, variableCategories, variableCategoryLabels, variableCategoryOrder, variablePickerOpen, onVariablePickerOpenChange }) => {\n                        return (\n                            <CalculationsToolbar\n                                editor={editor}\n                                variableCategories={variableCategories}\n                                variableCategoryLabels={variableCategoryLabels}\n                                variableCategoryOrder={variableCategoryOrder}\n                                variablePickerOpen={variablePickerOpen}\n                                onVariablePickerOpenChange={onVariablePickerOpenChange}\n                                guideOpen={guideOpen}\n                                onGuideOpenChange={setGuideOpen}\n                                validating={validating}\n                                onValidate={runValidation}\n                            />\n                        );\n                    }}\n                    disabled={field.disabled}\n                    isInvalid={errors.length > 0}\n                    variableCategories={resolvedVariableCategories}\n                    variableCategoryLabels={variableCategoryLabels}\n                    variableCategoryOrder={variableCategoryOrder}\n                    variableTransformerRegistry={variableTransformerRegistry}\n                    variablePickerTriggerCharacters={field.variablePickerTriggerCharacters}\n                />\n\n                {validation.type !== 'idle' && (\n                    <div className=\"space-y-1\">\n                        <p className={cn(\n                            'flex items-center gap-1',\n                            validation.type === 'success' ? 'text-emerald-700' : 'text-rose-700',\n                        )}>\n                            {validation.type === 'success' ? (\n                                <FontAwesomeIcon icon={faCheck} className=\"size-3 mt-0.5\" />\n                            ) : null}\n                            {validation.message}\n                        </p>\n\n                        {validation.type === 'error' && validation.technicalMessage && validation.technicalMessage !== validation.message && (\n                            <details className=\"text-xs text-gray-500\">\n                                <summary className=\"cursor-pointer select-none\">{t('Show technical details')}</summary>\n                                <p className=\"mt-1 text-rose-700\">{validation.technicalMessage}</p>\n                            </details>\n                        )}\n                    </div>\n                )}\n            </div>\n        </FieldLayout>\n    );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+import { Editor } from '@tiptap/core';
+import { VariableCategories } from '../../components/tiptap/VariableDropdown';
+type CalculationsToolbarProps = {
+    editor: Editor | null | undefined;
+    variableCategories: VariableCategories;
+    variableCategoryLabels?: Record<string, string>;
+    variableCategoryOrder?: string[];
+    variablePickerOpen: boolean;
+    onVariablePickerOpenChange: (open: boolean) => void;
+    guideOpen: boolean;
+    onGuideOpenChange: (open: boolean) => void;
+    validating: boolean;
+    onValidate: () => void;
+};
+export declare const CalculationsToolbar: ({ editor, variableCategories, variableCategoryLabels, variableCategoryOrder, variablePickerOpen, onVariablePickerOpenChange, guideOpen, onGuideOpenChange, validating, onValidate, }: CalculationsToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CalculationsToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalculationsToolbar.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/CalculationsToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4DAA4D,CAAC;AA+DrG,KAAK,wBAAwB,GAAG;IAC5B,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClC,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,0BAA0B,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,sLAWjC,wBAAwB,4CA0D1B,CAAC"}

package/dist/forms/fields/CalculationsToolbar.js

@@ -0,0 +1,130 @@
+import { useTranslation } from "../../hooks/useTranslation.js";
+import "../../hooks/index.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../../components/Dialog.js";
+import { VariableDropdown } from "../../components/tiptap/VariableDropdown.js";
+import "../../components/index.js";
+import { Button } from "../../components/Button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/forms/fields/CalculationsToolbar.tsx
+var OPERATOR_GROUPS = [
+	{
+		title: "Arithmetic",
+		items: [
+			["+", "Addition"],
+			["-", "Subtraction"],
+			["*", "Multiplication"],
+			["/", "Division"],
+			["%", "Modulus"],
+			["**", "Power"]
+		]
+	},
+	{
+		title: "Bitwise",
+		items: [
+			["&", "AND"],
+			["|", "OR"],
+			["^", "XOR"]
+		]
+	},
+	{
+		title: "Logical",
+		items: [
+			["!, not", "Not"],
+			["&&, and", "And"],
+			["||, or", "Or"]
+		]
+	},
+	{
+		title: "Comparison",
+		items: [
+			["==", "Equal"],
+			["===", "Identical"],
+			["!=", "Not equal"],
+			["!==", "Not identical"],
+			["<, >, <=, >=", "Relational"],
+			["matches", "Regex match"]
+		]
+	},
+	{
+		title: "Ternary",
+		items: [["a ? b : c", "Conditional"]]
+	},
+	{
+		title: "Array",
+		items: [["in", "Contains"], ["not in", "Does not contain"]]
+	},
+	{
+		title: "Numeric",
+		items: [["..", "Range"]]
+	},
+	{
+		title: "String",
+		items: [["~", "Concatenation"]]
+	}
+];
+var CalculationsToolbar = ({ editor, variableCategories, variableCategoryLabels, variableCategoryOrder, variablePickerOpen, onVariablePickerOpenChange, guideOpen, onGuideOpenChange, validating, onValidate }) => {
+	const t = useTranslation();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between relative z-10 px-[8px] py-[8px] border-b border-[rgba(96,125,159,0.4)] bg-white shadow-[0_2px_3px_rgba(49,49,93,.07)]",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-1",
+			children: /* @__PURE__ */ jsx(VariableDropdown, {
+				editor,
+				variableCategories,
+				variableCategoryLabels,
+				variableCategoryOrder,
+				title: t("Insert Variable"),
+				buttonLabel: t("Insert Field"),
+				buttonVariant: "outline",
+				buttonSize: "sm",
+				buttonClassName: "h-auto [&_svg]:size-3",
+				open: variablePickerOpen,
+				onOpenChange: onVariablePickerOpenChange
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsxs(Dialog, {
+				open: guideOpen,
+				onOpenChange: onGuideOpenChange,
+				children: [/* @__PURE__ */ jsx(DialogTrigger, { render: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					children: t("Syntax Guide")
+				}) }), /* @__PURE__ */ jsxs(DialogContent, {
+					className: "max-w-4xl",
+					showCloseButton: true,
+					children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t("Syntax Guide") }), /* @__PURE__ */ jsx(DialogDescription, { children: t("Use field variables and expression syntax in formulas.") })] }), /* @__PURE__ */ jsx("div", {
+						className: "grid gap-4 p-4 text-sm md:grid-cols-2 xl:grid-cols-4",
+						children: OPERATOR_GROUPS.map((group) => {
+							return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+								className: "mb-2 font-semibold text-gray-700",
+								children: t(group.title)
+							}), /* @__PURE__ */ jsx("ul", {
+								className: "space-y-1 text-xs text-gray-600",
+								children: group.items.map(([token, label]) => {
+									return /* @__PURE__ */ jsxs("li", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx("code", {
+											className: "rounded bg-gray-200 px-1.5 py-0.5 font-mono text-[11px]",
+											children: token
+										}), /* @__PURE__ */ jsx("span", { children: t(label) })]
+									}, `${group.title}-${token}`);
+								})
+							})] }, group.title);
+						})
+					})]
+				})]
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "sm",
+				loading: validating,
+				onClick: onValidate,
+				children: t("Test Formula")
+			})]
+		})]
+	});
+};
+//#endregion
+export { CalculationsToolbar };
+
+//# sourceMappingURL=CalculationsToolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalculationsToolbar.js","names":[],"sources":["../../../src/forms/fields/CalculationsToolbar.tsx"],"sourcesContent":["import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@verbb/plugin-kit-react/components';\nimport type { Editor } from '@tiptap/core';\nimport { VariableDropdown } from '@verbb/plugin-kit-react/components/tiptap/VariableDropdown';\nimport type { VariableCategories } from '@verbb/plugin-kit-react/components/tiptap/VariableDropdown';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\n\nconst OPERATOR_GROUPS = [\n    {\n        title: 'Arithmetic',\n        items: [\n            ['+', 'Addition'],\n            ['-', 'Subtraction'],\n            ['*', 'Multiplication'],\n            ['/', 'Division'],\n            ['%', 'Modulus'],\n            ['**', 'Power'],\n        ],\n    },\n    {\n        title: 'Bitwise',\n        items: [\n            ['&', 'AND'],\n            ['|', 'OR'],\n            ['^', 'XOR'],\n        ],\n    },\n    {\n        title: 'Logical',\n        items: [\n            ['!, not', 'Not'],\n            ['&&, and', 'And'],\n            ['||, or', 'Or'],\n        ],\n    },\n    {\n        title: 'Comparison',\n        items: [\n            ['==', 'Equal'],\n            ['===', 'Identical'],\n            ['!=', 'Not equal'],\n            ['!==', 'Not identical'],\n            ['<, >, <=, >=', 'Relational'],\n            ['matches', 'Regex match'],\n        ],\n    },\n    {\n        title: 'Ternary',\n        items: [['a ? b : c', 'Conditional']],\n    },\n    {\n        title: 'Array',\n        items: [\n            ['in', 'Contains'],\n            ['not in', 'Does not contain'],\n        ],\n    },\n    {\n        title: 'Numeric',\n        items: [['..', 'Range']],\n    },\n    {\n        title: 'String',\n        items: [['~', 'Concatenation']],\n    },\n];\n\ntype CalculationsToolbarProps = {\n    editor: Editor | null | undefined;\n    variableCategories: VariableCategories;\n    variableCategoryLabels?: Record<string, string>;\n    variableCategoryOrder?: string[];\n    variablePickerOpen: boolean;\n    onVariablePickerOpenChange: (open: boolean) => void;\n    guideOpen: boolean;\n    onGuideOpenChange: (open: boolean) => void;\n    validating: boolean;\n    onValidate: () => void;\n};\n\nexport const CalculationsToolbar = ({\n    editor,\n    variableCategories,\n    variableCategoryLabels,\n    variableCategoryOrder,\n    variablePickerOpen,\n    onVariablePickerOpenChange,\n    guideOpen,\n    onGuideOpenChange,\n    validating,\n    onValidate,\n}: CalculationsToolbarProps) => {\n    const t = useTranslation();\n\n    return (\n        <div className=\"flex items-center justify-between relative z-10 px-[8px] py-[8px] border-b border-[rgba(96,125,159,0.4)] bg-white shadow-[0_2px_3px_rgba(49,49,93,.07)]\">\n            <div className=\"flex flex-wrap gap-1\">\n                <VariableDropdown\n                    editor={editor}\n                    variableCategories={variableCategories}\n                    variableCategoryLabels={variableCategoryLabels}\n                    variableCategoryOrder={variableCategoryOrder}\n                    title={t('Insert Variable')}\n                    buttonLabel={t('Insert Field')}\n                    buttonVariant=\"outline\"\n                    buttonSize=\"sm\"\n                    buttonClassName=\"h-auto [&_svg]:size-3\"\n                    open={variablePickerOpen}\n                    onOpenChange={onVariablePickerOpenChange}\n                />\n            </div>\n\n            <div className=\"flex items-center gap-2\">\n                <Dialog open={guideOpen} onOpenChange={onGuideOpenChange}>\n                    <DialogTrigger render={<Button variant=\"outline\" size=\"sm\">{t('Syntax Guide')}</Button>} />\n                    <DialogContent className=\"max-w-4xl\" showCloseButton>\n                        <DialogHeader>\n                            <DialogTitle>{t('Syntax Guide')}</DialogTitle>\n                            <DialogDescription>{t('Use field variables and expression syntax in formulas.')}</DialogDescription>\n                        </DialogHeader>\n\n                        <div className=\"grid gap-4 p-4 text-sm md:grid-cols-2 xl:grid-cols-4\">\n                            {OPERATOR_GROUPS.map((group) => {\n                                return (\n                                    <div key={group.title}>\n                                        <p className=\"mb-2 font-semibold text-gray-700\">{t(group.title)}</p>\n                                        <ul className=\"space-y-1 text-xs text-gray-600\">\n                                            {group.items.map(([token, label]) => {\n                                                return (\n                                                    <li key={`${group.title}-${token}`} className=\"flex items-center gap-2\">\n                                                        <code className=\"rounded bg-gray-200 px-1.5 py-0.5 font-mono text-[11px]\">{token}</code>\n                                                        <span>{t(label)}</span>\n                                                    </li>\n                                                );\n                                            })}\n                                        </ul>\n                                    </div>\n                                );\n                            })}\n                        </div>\n                    </DialogContent>\n                </Dialog>\n\n                <Button variant=\"secondary\" size=\"sm\" loading={validating} onClick={onValidate}>\n                    {t('Test Formula')}\n                </Button>\n            </div>\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;AAMA,IAAM,kBAAkB;CACpB;EACI,OAAO;EACP,OAAO;GACH,CAAC,KAAK,WAAW;GACjB,CAAC,KAAK,cAAc;GACpB,CAAC,KAAK,iBAAiB;GACvB,CAAC,KAAK,WAAW;GACjB,CAAC,KAAK,UAAU;GAChB,CAAC,MAAM,QAAQ;GAClB;EACJ;CACD;EACI,OAAO;EACP,OAAO;GACH,CAAC,KAAK,MAAM;GACZ,CAAC,KAAK,KAAK;GACX,CAAC,KAAK,MAAM;GACf;EACJ;CACD;EACI,OAAO;EACP,OAAO;GACH,CAAC,UAAU,MAAM;GACjB,CAAC,WAAW,MAAM;GAClB,CAAC,UAAU,KAAK;GACnB;EACJ;CACD;EACI,OAAO;EACP,OAAO;GACH,CAAC,MAAM,QAAQ;GACf,CAAC,OAAO,YAAY;GACpB,CAAC,MAAM,YAAY;GACnB,CAAC,OAAO,gBAAgB;GACxB,CAAC,gBAAgB,aAAa;GAC9B,CAAC,WAAW,cAAc;GAC7B;EACJ;CACD;EACI,OAAO;EACP,OAAO,CAAC,CAAC,aAAa,cAAc,CAAC;EACxC;CACD;EACI,OAAO;EACP,OAAO,CACH,CAAC,MAAM,WAAW,EAClB,CAAC,UAAU,mBAAmB,CACjC;EACJ;CACD;EACI,OAAO;EACP,OAAO,CAAC,CAAC,MAAM,QAAQ,CAAC;EAC3B;CACD;EACI,OAAO;EACP,OAAO,CAAC,CAAC,KAAK,gBAAgB,CAAC;EAClC;CACJ;AAeD,IAAa,uBAAuB,EAChC,QACA,oBACA,wBACA,uBACA,oBACA,4BACA,WACA,mBACA,YACA,iBAC4B;CAC5B,MAAM,IAAI,gBAAgB;AAE1B,QACI,qBAAC,OAAD;EAAK,WAAU;YAAf,CACI,oBAAC,OAAD;GAAK,WAAU;aACX,oBAAC,kBAAD;IACY;IACY;IACI;IACD;IACvB,OAAO,EAAE,kBAAkB;IAC3B,aAAa,EAAE,eAAe;IAC9B,eAAc;IACd,YAAW;IACX,iBAAgB;IAChB,MAAM;IACN,cAAc;IAChB,CAAA;GACA,CAAA,EAEN,qBAAC,OAAD;GAAK,WAAU;aAAf,CACI,qBAAC,QAAD;IAAQ,MAAM;IAAW,cAAc;cAAvC,CACI,oBAAC,eAAD,EAAe,QAAQ,oBAAC,QAAD;KAAQ,SAAQ;KAAU,MAAK;eAAM,EAAE,eAAe;KAAU,CAAA,EAAI,CAAA,EAC3F,qBAAC,eAAD;KAAe,WAAU;KAAY,iBAAA;eAArC,CACI,qBAAC,cAAD,EAAA,UAAA,CACI,oBAAC,aAAD,EAAA,UAAc,EAAE,eAAe,EAAe,CAAA,EAC9C,oBAAC,mBAAD,EAAA,UAAoB,EAAE,yDAAyD,EAAqB,CAAA,CACzF,EAAA,CAAA,EAEf,oBAAC,OAAD;MAAK,WAAU;gBACV,gBAAgB,KAAK,UAAU;AAC5B,cACI,qBAAC,OAAD,EAAA,UAAA,CACI,oBAAC,KAAD;QAAG,WAAU;kBAAoC,EAAE,MAAM,MAAM;QAAK,CAAA,EACpE,oBAAC,MAAD;QAAI,WAAU;kBACT,MAAM,MAAM,KAAK,CAAC,OAAO,WAAW;AACjC,gBACI,qBAAC,MAAD;UAAoC,WAAU;oBAA9C,CACI,oBAAC,QAAD;WAAM,WAAU;qBAA2D;WAAa,CAAA,EACxF,oBAAC,QAAD,EAAA,UAAO,EAAE,MAAM,EAAQ,CAAA,CACtB;YAHI,GAAG,MAAM,MAAM,GAAG,QAGtB;UAEX;QACD,CAAA,CACH,EAAA,EAZI,MAAM,MAYV;QAEZ;MACA,CAAA,CACM;OACX;OAET,oBAAC,QAAD;IAAQ,SAAQ;IAAY,MAAK;IAAK,SAAS;IAAY,SAAS;cAC/D,EAAE,eAAe;IACb,CAAA,CACP;KACJ"}

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

@@ -0,0 +1,19 @@
+import { CheckboxSelectOption } from '../../components/CheckboxSelect';
+import { SchemaFormEngineApi } from '../engine/context';
+type CheckboxSelectFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        options?: CheckboxSelectOption[];
+        showAllOption?: boolean;
+        allLabel?: string;
+        required?: boolean;
+        disabled?: boolean;
+    };
+};
+export declare const CheckboxSelectField: ({ form, field }: CheckboxSelectFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CheckboxSelectField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSelectField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/CheckboxSelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,oBAAoB,EAA4B,MAAM,mDAAmD,CAAC;AAExI,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,wBAAwB,GAAG;IAC5B,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,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;QACjC,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,iBAAiB,wBAAwB,4CAsB5E,CAAC"}

package/dist/forms/fields/CheckboxSelectField.js

@@ -0,0 +1,30 @@
+import { CheckboxSelect } from "../../components/CheckboxSelect.js";
+import { FieldLayout } from "../Field.js";
+import { useEngineField } from "../useEngineField.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/forms/fields/CheckboxSelectField.tsx
+var CheckboxSelectField = ({ 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(CheckboxSelect, {
+			options: field.options || [],
+			value: value === void 0 || value === null ? [] : value,
+			onChange: (v) => {
+				return setValue(v);
+			},
+			showAllOption: field.showAllOption ?? false,
+			allLabel: field.allLabel,
+			disabled: field.disabled
+		})
+	});
+};
+//#endregion
+export { CheckboxSelectField };
+
+//# sourceMappingURL=CheckboxSelectField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSelectField.js","names":[],"sources":["../../../src/forms/fields/CheckboxSelectField.tsx"],"sourcesContent":["import { CheckboxSelect, type CheckboxSelectOption, type CheckboxSelectValue } from '@verbb/plugin-kit-react/components/CheckboxSelect';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype CheckboxSelectFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        options?: CheckboxSelectOption[];\n        showAllOption?: boolean;\n        allLabel?: string;\n        required?: boolean;\n        disabled?: boolean;\n    };\n};\n\nexport const CheckboxSelectField = ({ form, field }: CheckboxSelectFieldProps) => {\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            <CheckboxSelect\n                options={field.options || []}\n                value={(value === undefined || value === null ? [] : value) as CheckboxSelectValue}\n                onChange={(v) => { return setValue(v); }}\n                showAllOption={field.showAllOption ?? false}\n                allLabel={field.allLabel}\n                disabled={field.disabled}\n            />\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;AAoBA,IAAa,uBAAuB,EAAE,MAAM,YAAsC;CAC9E,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,gBAAD;GACI,SAAS,MAAM,WAAW,EAAE;GAC5B,OAAQ,UAAU,KAAA,KAAa,UAAU,OAAO,EAAE,GAAG;GACrD,WAAW,MAAM;AAAE,WAAO,SAAS,EAAE;;GACrC,eAAe,MAAM,iBAAiB;GACtC,UAAU,MAAM;GAChB,UAAU,MAAM;GAClB,CAAA;EACQ,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/ColorField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,eAAe,GAAG;IACnB,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,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,iBAAiB,eAAe,4CAyB1D,CAAC"}

package/dist/forms/fields/ColorField.js

@@ -0,0 +1,30 @@
+import { ColorInput } from "../../components/ColorInput.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/ColorField.tsx
+var ColorField = ({ 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(ColorInput, {
+			value: String(value || ""),
+			onValueChange: (nextValue) => {
+				setValue(nextValue || "");
+			},
+			onBlur: setTouched,
+			disabled: field.disabled,
+			isInvalid
+		})
+	});
+};
+//#endregion
+export { ColorField };
+
+//# sourceMappingURL=ColorField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.js","names":[],"sources":["../../../src/forms/fields/ColorField.tsx"],"sourcesContent":["import { ColorInput } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype ColorFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        required?: boolean;\n        disabled?: boolean;\n    };\n};\n\nexport const ColorField = ({ form, field }: ColorFieldProps) => {\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            <ColorInput\n                value={String(value || '')}\n                onValueChange={(nextValue) => {\n                    setValue(nextValue || '');\n                }}\n                onBlur={setTouched}\n                disabled={field.disabled}\n                isInvalid={isInvalid}\n            />\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;AAiBA,IAAa,cAAc,EAAE,MAAM,YAA6B;CAC5D,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,YAAD;GACI,OAAO,OAAO,SAAS,GAAG;GAC1B,gBAAgB,cAAc;AAC1B,aAAS,aAAa,GAAG;;GAE7B,QAAQ;GACR,UAAU,MAAM;GACL;GACb,CAAA;EACQ,CAAA"}

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

@@ -0,0 +1,23 @@
+import { ComboboxInputOption } from '../../components/ComboboxInput';
+import { SchemaFormEngineApi } from '../engine/context';
+type ComboboxFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        placeholder?: string;
+        emptyMessage?: string;
+        options?: ComboboxInputOption[];
+        fetchOptions?: () => Promise<ComboboxInputOption[]>;
+        multiple?: boolean;
+        cacheKey?: string;
+        cacheTtlMs?: number;
+        required?: boolean;
+        disabled?: boolean;
+    };
+};
+export declare const ComboboxField: ({ form, field }: ComboboxFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ComboboxField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/ComboboxField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,mBAAmB,EAE3B,MAAM,kDAAkD,CAAC;AAE1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,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,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;QAChC,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;QACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,iBAAiB,kBAAkB,4CAkChE,CAAC"}

package/dist/forms/fields/ComboboxField.js

@@ -0,0 +1,38 @@
+import { ComboboxInput } from "../../components/ComboboxInput.js";
+import { FieldLayout } from "../Field.js";
+import { useEngineField } from "../useEngineField.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/forms/fields/ComboboxField.tsx
+var ComboboxField = ({ form, field }) => {
+	const { value, setValue, setTouched, errors } = useEngineField(form, field.name);
+	const isInvalid = errors.length > 0;
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		children: /* @__PURE__ */ jsx(ComboboxInput, {
+			options: field.options,
+			fetchOptions: field.fetchOptions,
+			multiple: field.multiple,
+			value,
+			onValueChange: (nextValue) => {
+				setValue(nextValue);
+				setTouched();
+			},
+			disabled: field.disabled,
+			placeholder: field.placeholder,
+			emptyMessage: field.emptyMessage,
+			cacheKey: field.cacheKey,
+			cacheTtlMs: field.cacheTtlMs,
+			className: "w-full",
+			contentClassName: isInvalid ? "aria-invalid:border-destructive" : void 0
+		})
+	});
+};
+//#endregion
+export { ComboboxField };
+
+//# sourceMappingURL=ComboboxField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxField.js","names":[],"sources":["../../../src/forms/fields/ComboboxField.tsx"],"sourcesContent":["import {\n    ComboboxInput,\n    type ComboboxInputOption,\n    type ComboboxInputProps,\n} from '@verbb/plugin-kit-react/components/ComboboxInput';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype ComboboxFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        placeholder?: string;\n        emptyMessage?: string;\n        options?: ComboboxInputOption[];\n        fetchOptions?: () => Promise<ComboboxInputOption[]>;\n        multiple?: boolean;\n        cacheKey?: string;\n        cacheTtlMs?: number;\n        required?: boolean;\n        disabled?: boolean;\n    };\n};\n\nexport const ComboboxField = ({ form, field }: ComboboxFieldProps) => {\n    const {\n        value, setValue, setTouched, errors,\n    } = useEngineField(form, field.name);\n    const isInvalid = errors.length > 0;\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            <ComboboxInput\n                options={field.options}\n                fetchOptions={field.fetchOptions}\n                multiple={field.multiple}\n                value={value as ComboboxInputProps['value']}\n                onValueChange={(nextValue) => {\n                    setValue(nextValue);\n                    setTouched();\n                }}\n                disabled={field.disabled}\n                placeholder={field.placeholder}\n                emptyMessage={field.emptyMessage}\n                cacheKey={field.cacheKey}\n                cacheTtlMs={field.cacheTtlMs}\n                className=\"w-full\"\n                contentClassName={isInvalid ? 'aria-invalid:border-destructive' : undefined}\n            />\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;AA4BA,IAAa,iBAAiB,EAAE,MAAM,YAAgC;CAClE,MAAM,EACF,OAAO,UAAU,YAAY,WAC7B,eAAe,MAAM,MAAM,KAAK;CACpC,MAAM,YAAY,OAAO,SAAS;AAElC,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;YAER,oBAAC,eAAD;GACI,SAAS,MAAM;GACf,cAAc,MAAM;GACpB,UAAU,MAAM;GACT;GACP,gBAAgB,cAAc;AAC1B,aAAS,UAAU;AACnB,gBAAY;;GAEhB,UAAU,MAAM;GAChB,aAAa,MAAM;GACnB,cAAc,MAAM;GACpB,UAAU,MAAM;GAChB,YAAY,MAAM;GAClB,WAAU;GACV,kBAAkB,YAAY,oCAAoC,KAAA;GACpE,CAAA;EACQ,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/DateTimeField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,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,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,iBAAiB,kBAAkB,4CAgDhE,CAAC"}