@uipath/apollo-wind 2.60.1 → 2.61.0

package/dist/components/forms/field-renderer.js

@@ -1,34 +1,28 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import { Checkbox } from "../ui/checkbox.js";
-import { DatePicker } from "../ui/date-picker.js";
-import { DateTimePicker } from "../ui/datetime-picker.js";
-import { FileUpload } from "../ui/file-upload.js";
 import { FormField, FormFieldDescription, FormFieldError, FormFieldLabel } from "../ui/form-field.js";
-import { Input } from "../ui/input.js";
-import { Label } from "../ui/label.js";
-import { MultiSelect } from "../ui/multi-select.js";
-import { RadioGroup, RadioGroupItem } from "../ui/radio-group.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
-import { Slider } from "../ui/slider.js";
-import { Switch } from "../ui/switch.js";
-import { Textarea } from "../ui/textarea.js";
 import { deepEqual } from "../../lib/index.js";
 import { DataFetcher } from "./data-fetcher.js";
+import { FieldControl, clampSliderValue, useSliderMax } from "./field-control.js";
 import { hasOptions, isCustomField } from "./form-schema.js";
+import { ModeAwareField } from "./mode-aware-field.js";
 import { RulesEngine } from "./rules-engine.js";
 import { StringListField } from "./string-list-field.js";
+import { isFieldControlRegistration, literalValues } from "./value-modes.js";
 function FormFieldRenderer({ field, context, customComponents, disabled: formDisabled = false }) {
     const { control, watch, getValues } = useFormContext();
     const contextRef = useRef(context);
     contextRef.current = context;
+    const readValues = useCallback(()=>literalValues(getValues(), contextRef.current.schema, contextRef.current.valueModes?.codecs), [
+        getValues
+    ]);
     const getInitialVisibility = ()=>{
         if (!field.rules || 0 === field.rules.length) return true;
         const hasShowRule = field.rules.some((rule)=>rule.effects?.visible === true);
         const hasHideRule = field.rules.some((rule)=>rule.effects?.visible === false);
         if (!hasShowRule && !hasHideRule) return true;
-        const allValues = getValues();
+        const allValues = readValues();
         const ruleResult = RulesEngine.applyRules(field.rules, allValues, context);
         if (void 0 !== ruleResult.visible) return ruleResult.visible;
         return !hasShowRule;
@@ -36,7 +30,7 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
     const getInitialRequired = ()=>{
         const staticRequired = field.validation?.required ?? false;
         if (!field.rules || 0 === field.rules.length) return staticRequired;
-        const allValues = getValues();
+        const allValues = readValues();
         const ruleResult = RulesEngine.applyRules(field.rules, allValues, context);
         return ruleResult.required ?? staticRequired;
     };
@@ -75,7 +69,7 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
     const watchedRuleDependentValues = watch(dependentFields);
     useEffect(()=>{
         if (!field.rules || 0 === field.rules.length) return;
-        const allValues = getValues();
+        const allValues = readValues();
         const ruleResult = RulesEngine.applyRules(field.rules, allValues, contextRef.current);
         const hasShowRule = field.rules.some((rule)=>rule.effects?.visible === true);
         const hasHideRule = field.rules.some((rule)=>rule.effects?.visible === false);
@@ -102,7 +96,7 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
     }, [
         field.rules,
         field.validation?.required,
-        getValues,
+        readValues,
         watchedRuleDependentValues
     ]);
     const isOptionsField = hasOptions(field);
@@ -127,7 +121,7 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
         if (!field.dataSource) return;
         const fetchOptions = async ()=>{
             try {
-                const allValues = getValues();
+                const allValues = readValues();
                 const data = await DataFetcher.fetch(field.dataSource, allValues);
                 setFieldState((prev)=>{
                     if (deepEqual(prev.options, data)) return prev;
@@ -144,7 +138,7 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
     }, [
         field.dataSource,
         field.name,
-        getValues,
+        readValues,
         watchedDataSourceValues
     ]);
     if (!fieldState.visible) return null;
@@ -152,8 +146,20 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
     const gridStyle = {
         gridColumn: `span ${gridSpan}`
     };
-    if (isCustomField(field) && customComponents[field.component]) {
-        const CustomComponent = customComponents[field.component];
+    if (field.valueModes || field.headerActions || field.menuActions || field.badge) return /*#__PURE__*/ jsx("div", {
+        style: gridStyle,
+        children: /*#__PURE__*/ jsx(ModeAwareField, {
+            field: field,
+            context: context,
+            customComponents: customComponents,
+            disabled: formDisabled || fieldState.disabled,
+            required: fieldState.required,
+            options: fieldState.options
+        })
+    });
+    const customEntry = isCustomField(field) ? customComponents[field.component] : void 0;
+    if (isCustomField(field) && customEntry) {
+        const CustomComponent = isFieldControlRegistration(customEntry) ? customEntry.component : customEntry;
         return /*#__PURE__*/ jsx("div", {
             style: gridStyle,
             children: /*#__PURE__*/ jsx(Controller, {
@@ -177,222 +183,35 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
             name: field.name,
             control: control,
             defaultValue: field.defaultValue,
-            render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ jsx(FieldByType, {
+            render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ jsx(BuiltInField, {
                     field: field,
                     formField: formField,
                     error: error?.message,
                     disabled: formDisabled || fieldState.disabled,
                     required: fieldState.required,
-                    options: fieldState.options
+                    options: fieldState.options,
+                    strings: context.strings?.boolean
                 })
         })
     });
 }
-function FieldByType({ field, formField, error, disabled, required, options }) {
+function BuiltInField({ field, formField, error, disabled, required, options, strings }) {
+    const control = /*#__PURE__*/ jsx(FieldControl, {
+        field: field,
+        formField: formField,
+        options: options,
+        disabled: disabled,
+        invalid: !!error,
+        strings: strings
+    });
     switch(field.type){
-        case 'text':
-        case 'email':
-            return /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        htmlFor: field.name,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ jsx(Input, {
-                        id: field.name,
-                        value: formField.value,
-                        onChange: (e)=>formField.onChange(e.target.value),
-                        onBlur: formField.onBlur,
-                        name: formField.name,
-                        ref: formField.ref,
-                        type: field.type,
-                        placeholder: field.placeholder,
-                        disabled: disabled,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0,
-                        "aria-label": field.ariaLabel
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
-        case 'number':
-            return /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        htmlFor: field.name,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ jsx(Input, {
-                        id: field.name,
-                        value: formField.value,
-                        onBlur: formField.onBlur,
-                        name: formField.name,
-                        ref: formField.ref,
-                        type: "number",
-                        min: field.min,
-                        max: field.max,
-                        step: field.step,
-                        placeholder: field.placeholder,
-                        disabled: disabled,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0,
-                        onChange: (e)=>formField.onChange(parseFloat(e.target.value))
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
-        case 'textarea':
-            return /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        htmlFor: field.name,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ jsx(Textarea, {
-                        id: field.name,
-                        value: formField.value,
-                        onChange: (e)=>formField.onChange(e.target.value),
-                        onBlur: formField.onBlur,
-                        name: formField.name,
-                        ref: formField.ref,
-                        placeholder: field.placeholder,
-                        disabled: disabled,
-                        maxLength: field.maxLength,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0,
-                        ...null != field.minRows ? {
-                            minRows: field.minRows
-                        } : {
-                            rows: field.rows || 4
-                        }
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
-        case 'select':
-            return /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        htmlFor: field.name,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ jsxs(Select, {
-                        value: formField.value,
-                        onValueChange: formField.onChange,
-                        disabled: disabled,
-                        children: [
-                            /*#__PURE__*/ jsx(SelectTrigger, {
-                                id: field.name,
-                                "aria-label": field.label,
-                                "aria-invalid": error ? true : void 0,
-                                "aria-describedby": error ? `${field.name}-error` : void 0,
-                                "aria-errormessage": error ? `${field.name}-error` : void 0,
-                                children: /*#__PURE__*/ jsx(SelectValue, {
-                                    placeholder: field.placeholder || 'Select...'
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(SelectContent, {
-                                children: options.map((option)=>/*#__PURE__*/ jsx(SelectItem, {
-                                        value: String(option.value),
-                                        disabled: 'disabled' in option ? Boolean(option.disabled) : false,
-                                        children: option.label
-                                    }, String(option.value)))
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
-        case 'multiselect':
-            return /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        htmlFor: field.name,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ jsx(MultiSelect, {
-                        id: field.name,
-                        selected: formField.value || [],
-                        onChange: formField.onChange,
-                        options: options.map((opt)=>({
-                                label: opt.label,
-                                value: String(opt.value)
-                            })),
-                        disabled: disabled,
-                        placeholder: field.placeholder || 'Select items...',
-                        emptyMessage: field.emptyMessage ?? 'No items found.',
-                        searchPlaceholder: field.searchPlaceholder ?? 'Search...',
-                        maxSelected: field.maxSelected,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
         case 'checkbox':
             return /*#__PURE__*/ jsxs(FormField, {
                 children: [
                     /*#__PURE__*/ jsxs("div", {
                         className: "flex items-start space-x-2",
                         children: [
-                            /*#__PURE__*/ jsx(Checkbox, {
-                                checked: true === formField.value,
-                                onCheckedChange: (checked)=>formField.onChange(true === checked),
-                                disabled: disabled,
-                                "aria-invalid": error ? true : void 0,
-                                "aria-describedby": error ? `${field.name}-error` : void 0,
-                                "aria-errormessage": error ? `${field.name}-error` : void 0,
-                                id: field.name
-                            }),
+                            control,
                             /*#__PURE__*/ jsxs("div", {
                                 className: "space-y-1 leading-none",
                                 children: [
@@ -437,15 +256,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ jsx(Switch, {
-                                id: field.name,
-                                checked: true === formField.value,
-                                onCheckedChange: (checked)=>formField.onChange(true === checked),
-                                disabled: disabled,
-                                "aria-invalid": error ? true : void 0,
-                                "aria-describedby": error ? `${field.name}-error` : void 0,
-                                "aria-errormessage": error ? `${field.name}-error` : void 0
-                            })
+                            control
                         ]
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
@@ -454,40 +265,26 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                     })
                 ]
             });
-        case 'radio':
+        case 'slider':
             return /*#__PURE__*/ jsxs(FormField, {
                 children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        id: `${field.name}-label`,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ jsx(RadioGroup, {
-                        "aria-labelledby": `${field.name}-label`,
-                        value: formField.value,
-                        onValueChange: formField.onChange,
-                        disabled: disabled,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0,
-                        children: options.map((option)=>/*#__PURE__*/ jsxs("div", {
-                                className: "flex items-center space-x-2",
-                                children: [
-                                    /*#__PURE__*/ jsx(RadioGroupItem, {
-                                        value: String(option.value),
-                                        id: `${field.name}-${option.value}`,
-                                        disabled: 'disabled' in option ? Boolean(option.disabled) : false
-                                    }),
-                                    /*#__PURE__*/ jsx(Label, {
-                                        variant: "muted",
-                                        htmlFor: `${field.name}-${option.value}`,
-                                        children: option.label
-                                    })
-                                ]
-                            }, String(option.value)))
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex justify-between",
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                id: `${field.name}-label`,
+                                required: required,
+                                tooltip: field.tooltip,
+                                tooltipAriaLabel: field.tooltipAriaLabel,
+                                children: field.label
+                            }),
+                            /*#__PURE__*/ jsx(SliderValue, {
+                                field: field,
+                                value: formField.value
+                            })
+                        ]
                     }),
+                    control,
                     /*#__PURE__*/ jsx(FormFieldDescription, {
                         children: field.description
                     }),
@@ -497,98 +294,34 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                     })
                 ]
             });
-        case 'slider':
-            return /*#__PURE__*/ jsx(SliderField, {
+        case 'string-list':
+            return /*#__PURE__*/ jsx(StringListField, {
                 field: field,
-                formField: formField,
+                inputRef: formField.ref,
+                value: formField.value,
+                onChange: formField.onChange,
+                onBlur: formField.onBlur,
                 error: error,
                 disabled: disabled,
                 required: required
             });
-        case 'date':
-            return /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        htmlFor: field.name,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ jsx(DatePicker, {
-                        id: field.name,
-                        value: formField.value,
-                        onValueChange: formField.onChange,
-                        disabled: disabled,
-                        placeholder: field.placeholder,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
-        case 'datetime':
-            return /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        id: `${field.name}-label`,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ jsx(DateTimePicker, {
-                        "aria-labelledby": `${field.name}-label`,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0,
-                        value: formField.value,
-                        onValueChange: formField.onChange,
-                        disabled: disabled,
-                        placeholder: field.placeholder,
-                        use12Hour: field.use12Hour
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ jsx(FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
-        case 'file':
+        case 'custom':
+            return null;
+        default:
             return /*#__PURE__*/ jsxs(FormField, {
                 children: [
                     /*#__PURE__*/ jsx(FormFieldLabel, {
-                        htmlFor: field.name,
+                        ...'radio' === field.type || 'boolean' === field.type || 'datetime' === field.type ? {
+                            id: `${field.name}-label`
+                        } : {
+                            htmlFor: field.name
+                        },
                         required: required,
                         tooltip: field.tooltip,
                         tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
-                    /*#__PURE__*/ jsx(FileUpload, {
-                        id: field.name,
-                        ariaLabel: field.ariaLabel ?? field.label,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0,
-                        accept: field.accept,
-                        multiple: field.multiple,
-                        disabled: disabled,
-                        maxSize: field.maxSize,
-                        showPreview: field.showPreview,
-                        onFilesChange: (files)=>{
-                            formField.onChange(field.multiple ? files : files[0]);
-                        }
-                    }),
+                    control,
                     /*#__PURE__*/ jsx(FormFieldDescription, {
                         children: field.description
                     }),
@@ -598,89 +331,13 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                     })
                 ]
             });
-        case 'string-list':
-            return /*#__PURE__*/ jsx(StringListField, {
-                field: field,
-                inputRef: formField.ref,
-                value: formField.value,
-                onChange: formField.onChange,
-                onBlur: formField.onBlur,
-                error: error,
-                disabled: disabled,
-                required: required
-            });
-        default:
-            return null;
     }
 }
-function SliderField({ field, formField, error, disabled, required }) {
-    const { watch } = useFormContext();
-    const watchedMax = field.maxRef ? watch(field.maxRef.fromField) : void 0;
-    const resolvedMax = resolveSliderMax(field, watchedMax);
-    const prevMaxRef = useRef(resolvedMax);
-    useEffect(()=>{
-        if (resolvedMax === prevMaxRef.current) return;
-        prevMaxRef.current = resolvedMax;
-        const v = formField.value;
-        if ('number' == typeof v && v > resolvedMax) formField.onChange(resolvedMax);
-    }, [
-        resolvedMax,
-        formField.value,
-        formField.onChange
-    ]);
-    const displayValue = (()=>{
-        const v = formField.value;
-        if ('number' == typeof v) return Math.min(v, resolvedMax);
-        return v;
-    })();
-    return /*#__PURE__*/ jsxs(FormField, {
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "flex justify-between",
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        id: `${field.name}-label`,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        className: "text-sm text-muted-foreground",
-                        children: displayValue
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(Slider, {
-                "aria-labelledby": `${field.name}-label`,
-                "aria-invalid": error ? true : void 0,
-                "aria-describedby": error ? `${field.name}-error` : void 0,
-                "aria-errormessage": error ? `${field.name}-error` : void 0,
-                value: [
-                    displayValue ?? field.min ?? 0
-                ],
-                onValueChange: (values)=>formField.onChange(values[0]),
-                min: field.min || 0,
-                max: resolvedMax,
-                step: field.step || 1,
-                disabled: disabled
-            }),
-            /*#__PURE__*/ jsx(FormFieldDescription, {
-                children: field.description
-            }),
-            /*#__PURE__*/ jsx(FormFieldError, {
-                id: `${field.name}-error`,
-                children: error
-            })
-        ]
+function SliderValue({ field, value }) {
+    const displayValue = clampSliderValue(value, useSliderMax(field));
+    return /*#__PURE__*/ jsx("span", {
+        className: "text-sm text-muted-foreground",
+        children: displayValue
     });
 }
-function resolveSliderMax(field, watchedValue) {
-    if (field.maxRef) {
-        if ('number' == typeof watchedValue && Number.isFinite(watchedValue) && watchedValue > 0) return watchedValue;
-        if ('number' == typeof field.maxRef.fallback) return field.maxRef.fallback;
-    }
-    if ('number' == typeof field.max) return field.max;
-    return 100;
-}
 export { FormFieldRenderer };

package/dist/components/forms/form-designer.cjs

@@ -116,6 +116,12 @@ const FIELD_TYPE_METADATA = [
         category: 'Boolean',
         description: 'Toggle switch'
     },
+    {
+        value: 'boolean',
+        label: 'True / False',
+        category: 'Boolean',
+        description: 'True, false or not set'
+    },
     {
         value: 'slider',
         label: 'Slider',
@@ -1794,7 +1800,7 @@ function RulesEditor({ rules = [], onChange, allFields, requiredMessage, onRequi
         };
         const targetField = allFields.find((f)=>f.name === cond.field);
         const isNumericField = targetField?.type === 'number' || targetField?.type === 'slider';
-        const isBooleanField = targetField?.type === 'checkbox' || targetField?.type === 'switch';
+        const isBooleanField = targetField?.type === 'checkbox' || targetField?.type === 'switch' || targetField?.type === 'boolean';
         const parseValue = (val)=>{
             if (isBooleanField) {
                 if ('true' === val.toLowerCase()) return true;

package/dist/components/forms/form-designer.js

@@ -88,6 +88,12 @@ const FIELD_TYPE_METADATA = [
         category: 'Boolean',
         description: 'Toggle switch'
     },
+    {
+        value: 'boolean',
+        label: 'True / False',
+        category: 'Boolean',
+        description: 'True, false or not set'
+    },
     {
         value: 'slider',
         label: 'Slider',
@@ -1766,7 +1772,7 @@ function RulesEditor({ rules = [], onChange, allFields, requiredMessage, onRequi
         };
         const targetField = allFields.find((f)=>f.name === cond.field);
         const isNumericField = targetField?.type === 'number' || targetField?.type === 'slider';
-        const isBooleanField = targetField?.type === 'checkbox' || targetField?.type === 'switch';
+        const isBooleanField = targetField?.type === 'checkbox' || targetField?.type === 'switch' || targetField?.type === 'boolean';
         const parseValue = (val)=>{
             if (isBooleanField) {
                 if ('true' === val.toLowerCase()) return true;