@btst/plugin-form-builder 1.0.0 → 1.2.0-beta.1

package/dist/ui/src/components/auto-form/stepped-auto-form.mjs

@@ -1,15 +1,18 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import React__default, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { z } from 'zod';
 import AutoForm from './index.mjs';
+import { getDefaultValues, getObjectFormSchema } from './helpers.mjs';
+import { resolveVisibleSchema, formSchemaToZod } from '../../lib/schema-converter.mjs';
+import { matchesShowIf } from '../../lib/form-visibility.mjs';
 import { Button } from '../button.mjs';
 import { Separator } from '../separator.mjs';
 import { cn } from '../../lib/utils.mjs';
 
 function extractStepsFromSchema(schema) {
   try {
-    const jsonSchema = schema.toJSONSchema();
+    const jsonSchema = schema.meta()?.steps ? schema.meta() : schema.toJSONSchema();
     if (jsonSchema.steps && Array.isArray(jsonSchema.steps)) {
       return jsonSchema.steps;
     }
@@ -20,7 +23,7 @@ function extractStepsFromSchema(schema) {
 function getFieldStepAssignments(schema) {
   const assignments = /* @__PURE__ */ new Map();
   try {
-    const jsonSchema = schema.toJSONSchema();
+    const jsonSchema = schema.meta()?.steps ? schema.meta() : schema.toJSONSchema();
     const stepGroupMap = jsonSchema.stepGroupMap;
     if (stepGroupMap) {
       for (const [fieldName, stepGroup] of Object.entries(stepGroupMap)) {
@@ -54,21 +57,6 @@ function createStepSchema(fullSchema, stepIndex, fieldAssignments) {
   }
   return fullSchema.pick(pickObject);
 }
-function getObjectSchema(schema) {
-  if (schema instanceof z.ZodObject) {
-    return schema;
-  }
-  const schemaDef = schema._zod?.def ?? schema._def;
-  if (schemaDef) {
-    if (schemaDef.schema) {
-      return getObjectSchema(schemaDef.schema);
-    }
-    if (schemaDef.innerType) {
-      return getObjectSchema(schemaDef.innerType);
-    }
-  }
-  return null;
-}
 function DefaultStepper({
   steps,
   currentStepIndex,
@@ -116,16 +104,25 @@ function SteppedAutoForm({
   StepperComponent = DefaultStepper,
   isSubmitting = false
 }) {
-  const steps = useMemo(() => extractStepsFromSchema(formSchema), [formSchema]);
-  const hasMultipleSteps = steps.length > 1;
-  const fieldAssignments = useMemo(
+  const allSteps = useMemo(() => extractStepsFromSchema(formSchema), [formSchema]);
+  const hasMultipleSteps = allSteps.length > 1;
+  const originalFieldAssignments = useMemo(
     () => getFieldStepAssignments(formSchema),
     [formSchema]
   );
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
   const [accumulatedValues, setAccumulatedValues] = useState(
-    initialValues ?? {}
+    () => ({ ...getDefaultValues(getObjectFormSchema(formSchema), fieldConfig) ?? {}, ...initialValues ?? {} })
   );
+  const steps = useMemo(() => {
+    const metadata = formSchema.meta();
+    const visibleValues = metadata?.properties ? resolveVisibleSchema(metadata, accumulatedValues).data : accumulatedValues;
+    return allSteps.map((step, originalIndex) => ({ ...step, originalIndex })).filter((step) => matchesShowIf(step.showIf, visibleValues));
+  }, [allSteps, accumulatedValues, formSchema]);
+  const fieldAssignments = useMemo(() => new Map(Array.from(originalFieldAssignments).map(([key, originalIndex]) => [key, steps.findIndex((step) => step.originalIndex === originalIndex)])), [originalFieldAssignments, steps]);
+  useEffect(() => {
+    setCurrentStepIndex((index) => Math.min(index, Math.max(0, steps.length - 1)));
+  }, [steps.length]);
   const [completedSteps, setCompletedSteps] = useState(/* @__PURE__ */ new Set());
   const [schemaErrors, setSchemaErrors] = useState(null);
   const accumulatedValuesRef = useRef(accumulatedValues);
@@ -146,13 +143,19 @@ function SteppedAutoForm({
       setAccumulatedValues(newValues);
     }
   }, [initialValues]);
-  const objectSchema = useMemo(() => getObjectSchema(formSchema), [formSchema]);
+  const objectSchema = useMemo(() => getObjectFormSchema(formSchema), [formSchema]);
   const stepSchemas = useMemo(() => {
     if (!hasMultipleSteps || !objectSchema) return [];
-    return steps.map(
-      (_, index) => createStepSchema(objectSchema, index, fieldAssignments)
-    );
-  }, [hasMultipleSteps, objectSchema, steps, fieldAssignments]);
+    const metadata = formSchema.meta();
+    if (metadata?.properties) {
+      const visible = resolveVisibleSchema(metadata, accumulatedValues).schema;
+      return steps.map((_, index) => {
+        const properties = Object.fromEntries(Object.entries(visible.properties ?? {}).filter(([key]) => fieldAssignments.get(key) === index));
+        return formSchemaToZod({ ...visible, properties, required: visible.required?.filter((key) => key in properties), steps: void 0 });
+      });
+    }
+    return steps.map((_, index) => createStepSchema(objectSchema, index, fieldAssignments));
+  }, [hasMultipleSteps, objectSchema, steps, fieldAssignments, accumulatedValues, formSchema]);
   const currentStep = steps[currentStepIndex];
   const currentStepSchema = stepSchemas[currentStepIndex];
   const isFirst = currentStepIndex === 0;
@@ -160,14 +163,16 @@ function SteppedAutoForm({
   const currentStepFieldConfig = useMemo(() => {
     if (!fieldConfig) return void 0;
     const stepFields = Array.from(fieldAssignments.entries()).filter(([, step]) => step === currentStepIndex).map(([field]) => field);
+    const properties = formSchema.meta()?.properties;
     const filtered = {};
     for (const field of stepFields) {
       if (field in fieldConfig) {
-        filtered[field] = fieldConfig[field];
+        const config = fieldConfig[field];
+        filtered[field] = properties?.[field]?.showIf ? { ...config, showIf: void 0 } : config;
       }
     }
     return filtered;
-  }, [fieldConfig, fieldAssignments, currentStepIndex]);
+  }, [fieldConfig, fieldAssignments, currentStepIndex, formSchema]);
   const currentStepValues = useMemo(() => {
     const stepFields = Array.from(fieldAssignments.entries()).filter(([, step]) => step === currentStepIndex).map(([field]) => field);
     const values = {};
@@ -245,7 +250,7 @@ function SteppedAutoForm({
       setSchemaErrors(null);
     }
   }, [isFirst]);
-  if (!hasMultipleSteps) {
+  if (!hasMultipleSteps || steps.length === 0) {
     return /* @__PURE__ */ jsxs(
       AutoForm,
       {

package/dist/ui/src/components/form-builder/canvas.cjs

@@ -7,6 +7,7 @@ const core = require('@dnd-kit/core');
 const sortable = require('@dnd-kit/sortable');
 const utils = require('../../lib/utils.cjs');
 const sortableField = require('./sortable-field.cjs');
+const conditionEditor = require('./condition-editor.cjs');
 const stepTabs = require('./step-tabs.cjs');
 
 function DropZone({ id, isDraggingFromPalette }) {
@@ -41,6 +42,7 @@ function Canvas({
   onAddStep,
   onDeleteStep,
   onRenameStep,
+  onStepConditionChange,
   hideStepControls
 }) {
   const { setNodeRef, isOver } = core.useDroppable({
@@ -67,6 +69,13 @@ function Canvas({
         hideStepControls
       }
     ),
+    !hideStepControls && steps.length > 1 && onStepConditionChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-2 text-sm font-medium", children: [
+        steps[activeStepIndex]?.title,
+        " visibility"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(conditionEditor.ConditionEditor, { value: steps[activeStepIndex]?.showIf, onChange: (condition) => onStepConditionChange(activeStepIndex, condition), fieldIds: fields.filter((field) => (field.stepGroup ?? 0) < activeStepIndex).map((field) => field.id) })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {

package/dist/ui/src/components/form-builder/canvas.mjs

@@ -5,6 +5,7 @@ import { useDroppable } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { cn } from '../../lib/utils.mjs';
 import { SortableField } from './sortable-field.mjs';
+import { ConditionEditor } from './condition-editor.mjs';
 import { StepTabs } from './step-tabs.mjs';
 
 function DropZone({ id, isDraggingFromPalette }) {
@@ -39,6 +40,7 @@ function Canvas({
   onAddStep,
   onDeleteStep,
   onRenameStep,
+  onStepConditionChange,
   hideStepControls
 }) {
   const { setNodeRef, isOver } = useDroppable({
@@ -65,6 +67,13 @@ function Canvas({
         hideStepControls
       }
     ),
+    !hideStepControls && steps.length > 1 && onStepConditionChange && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsxs("p", { className: "mb-2 text-sm font-medium", children: [
+        steps[activeStepIndex]?.title,
+        " visibility"
+      ] }),
+      /* @__PURE__ */ jsx(ConditionEditor, { value: steps[activeStepIndex]?.showIf, onChange: (condition) => onStepConditionChange(activeStepIndex, condition), fieldIds: fields.filter((field) => (field.stepGroup ?? 0) < activeStepIndex).map((field) => field.id) })
+    ] }),
     /* @__PURE__ */ jsx(
       "div",
       {

package/dist/ui/src/components/form-builder/components/index.cjs

@@ -23,6 +23,16 @@ function getPlaceholder(prop) {
 function getLabel(prop, key) {
   return prop.label || prop.title || helpers.beautifyObjectName(key);
 }
+const fileFieldDefinition = types.defineComponent({
+  type: "file",
+  backingType: "string",
+  label: "File Upload",
+  icon: lucideReact.FolderOpen,
+  defaultProps: { label: "File", required: false },
+  propertiesSchema: validationSchemas.baseMetaSchema,
+  toJSONSchema: (props) => ({ type: "string", minLength: 1, fieldType: "file", label: props.label, description: props.description }),
+  fromJSONSchema: (prop, key, isRequired) => prop.fieldType === "file" ? { id: key, type: "file", props: { label: getLabel(prop, key), description: prop.description, required: isRequired } } : null
+});
 const textFieldDefinition = types.defineComponent({
   type: "text",
   backingType: "string",
@@ -531,6 +541,7 @@ const arrayFieldDefinition = {
   }
 };
 const defaultComponents = [
+  fileFieldDefinition,
   // Container types (must be before primitives to match object/array JSON Schema)
   objectFieldDefinition,
   arrayFieldDefinition,
@@ -558,6 +569,7 @@ exports.checkboxFieldDefinition = checkboxFieldDefinition;
 exports.dateFieldDefinition = dateFieldDefinition;
 exports.defaultComponents = defaultComponents;
 exports.emailFieldDefinition = emailFieldDefinition;
+exports.fileFieldDefinition = fileFieldDefinition;
 exports.getComponentByType = getComponentByType;
 exports.numberFieldDefinition = numberFieldDefinition;
 exports.objectFieldDefinition = objectFieldDefinition;

package/dist/ui/src/components/form-builder/components/index.mjs

@@ -21,6 +21,16 @@ function getPlaceholder(prop) {
 function getLabel(prop, key) {
   return prop.label || prop.title || beautifyObjectName(key);
 }
+const fileFieldDefinition = defineComponent({
+  type: "file",
+  backingType: "string",
+  label: "File Upload",
+  icon: FolderOpen,
+  defaultProps: { label: "File", required: false },
+  propertiesSchema: baseMetaSchema,
+  toJSONSchema: (props) => ({ type: "string", minLength: 1, fieldType: "file", label: props.label, description: props.description }),
+  fromJSONSchema: (prop, key, isRequired) => prop.fieldType === "file" ? { id: key, type: "file", props: { label: getLabel(prop, key), description: prop.description, required: isRequired } } : null
+});
 const textFieldDefinition = defineComponent({
   type: "text",
   backingType: "string",
@@ -529,6 +539,7 @@ const arrayFieldDefinition = {
   }
 };
 const defaultComponents = [
+  fileFieldDefinition,
   // Container types (must be before primitives to match object/array JSON Schema)
   objectFieldDefinition,
   arrayFieldDefinition,
@@ -551,4 +562,4 @@ function getComponentByType(type, components = defaultComponents) {
   return components.find((c) => c.type === type);
 }
 
-export { arrayFieldDefinition, checkboxFieldDefinition, dateFieldDefinition, defaultComponents, emailFieldDefinition, getComponentByType, numberFieldDefinition, objectFieldDefinition, passwordFieldDefinition, phoneFieldDefinition, radioFieldDefinition, selectFieldDefinition, switchFieldDefinition, textFieldDefinition, textareaFieldDefinition, urlFieldDefinition };
+export { arrayFieldDefinition, checkboxFieldDefinition, dateFieldDefinition, defaultComponents, emailFieldDefinition, fileFieldDefinition, getComponentByType, numberFieldDefinition, objectFieldDefinition, passwordFieldDefinition, phoneFieldDefinition, radioFieldDefinition, selectFieldDefinition, switchFieldDefinition, textFieldDefinition, textareaFieldDefinition, urlFieldDefinition };

package/dist/ui/src/components/form-builder/condition-editor.cjs

@@ -0,0 +1,73 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const textarea = require('../textarea.cjs');
+const input = require('../input.cjs');
+const label = require('../label.cjs');
+const select = require('../select.cjs');
+
+function ConditionEditor({ value, onChange, fieldIds }) {
+  const id = React.useId();
+  const [draft, setDraft] = React.useState();
+  const editingValue = draft?.condition === value;
+  const ValueInput = value?.operator === "in" ? textarea.Textarea : input.Input;
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "flex flex-col gap-3 rounded-md border p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "px-1 text-sm font-medium", children: "Visibility" }),
+    /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: `${id}-field`, children: "Show if field" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value: value?.field ?? "__always", onValueChange: (field) => {
+      setDraft(void 0);
+      onChange(field === "__always" ? void 0 : { field, operator: "isTruthy" });
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { id: `${id}-field`, children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "__always", children: "Always show" }),
+        fieldIds.map((field) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: field, children: field }, field))
+      ] })
+    ] }),
+    value && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: `${id}-operator`, children: "Condition" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value: value.operator, onValueChange: (operator) => {
+        setDraft(void 0);
+        onChange({ ...value, operator, value: operator === "in" ? [] : "" });
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { id: `${id}-operator`, children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "equals", children: "Equals" }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "notEquals", children: "Does not equal" }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "in", children: "Is one of" }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "isTruthy", children: "Has a truthy value" })
+        ] })
+      ] }),
+      value.operator !== "isTruthy" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: `${id}-value`, children: value.operator === "in" ? "Values (one per line)" : "Value" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ValueInput,
+          {
+            id: `${id}-value`,
+            value: editingValue ? draft.text : value.operator === "in" ? Array.isArray(value.value) ? value.value.map((item) => typeof item === "string" ? JSON.stringify(item) : String(item)).join("\n") : "" : typeof value.value === "string" ? value.value : JSON.stringify(value.value) ?? "",
+            onChange: (event) => {
+              const parse = (text) => {
+                try {
+                  return JSON.parse(text);
+                } catch {
+                  return text;
+                }
+              };
+              const next = { ...value, value: value.operator === "in" ? event.target.value.split("\n").map((text) => parse(text.trim())) : parse(event.target.value) };
+              setDraft({ condition: next, text: event.target.value });
+              onChange(next);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          value.operator === "in" ? "Enter one value per line. " : "",
+          "Numbers, true and false are compared as typed values. Quote them to compare text."
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+exports.ConditionEditor = ConditionEditor;

package/dist/ui/src/components/form-builder/condition-editor.mjs

@@ -0,0 +1,71 @@
+'use client';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId, useState } from 'react';
+import { Textarea } from '../textarea.mjs';
+import { Input } from '../input.mjs';
+import { Label } from '../label.mjs';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../select.mjs';
+
+function ConditionEditor({ value, onChange, fieldIds }) {
+  const id = useId();
+  const [draft, setDraft] = useState();
+  const editingValue = draft?.condition === value;
+  const ValueInput = value?.operator === "in" ? Textarea : Input;
+  return /* @__PURE__ */ jsxs("fieldset", { className: "flex flex-col gap-3 rounded-md border p-3", children: [
+    /* @__PURE__ */ jsx("legend", { className: "px-1 text-sm font-medium", children: "Visibility" }),
+    /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-field`, children: "Show if field" }),
+    /* @__PURE__ */ jsxs(Select, { value: value?.field ?? "__always", onValueChange: (field) => {
+      setDraft(void 0);
+      onChange(field === "__always" ? void 0 : { field, operator: "isTruthy" });
+    }, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { id: `${id}-field`, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+      /* @__PURE__ */ jsxs(SelectContent, { children: [
+        /* @__PURE__ */ jsx(SelectItem, { value: "__always", children: "Always show" }),
+        fieldIds.map((field) => /* @__PURE__ */ jsx(SelectItem, { value: field, children: field }, field))
+      ] })
+    ] }),
+    value && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-operator`, children: "Condition" }),
+      /* @__PURE__ */ jsxs(Select, { value: value.operator, onValueChange: (operator) => {
+        setDraft(void 0);
+        onChange({ ...value, operator, value: operator === "in" ? [] : "" });
+      }, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { id: `${id}-operator`, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsxs(SelectContent, { children: [
+          /* @__PURE__ */ jsx(SelectItem, { value: "equals", children: "Equals" }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "notEquals", children: "Does not equal" }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "in", children: "Is one of" }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "isTruthy", children: "Has a truthy value" })
+        ] })
+      ] }),
+      value.operator !== "isTruthy" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-value`, children: value.operator === "in" ? "Values (one per line)" : "Value" }),
+        /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            id: `${id}-value`,
+            value: editingValue ? draft.text : value.operator === "in" ? Array.isArray(value.value) ? value.value.map((item) => typeof item === "string" ? JSON.stringify(item) : String(item)).join("\n") : "" : typeof value.value === "string" ? value.value : JSON.stringify(value.value) ?? "",
+            onChange: (event) => {
+              const parse = (text) => {
+                try {
+                  return JSON.parse(text);
+                } catch {
+                  return text;
+                }
+              };
+              const next = { ...value, value: value.operator === "in" ? event.target.value.split("\n").map((text) => parse(text.trim())) : parse(event.target.value) };
+              setDraft({ condition: next, text: event.target.value });
+              onChange(next);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          value.operator === "in" ? "Enter one value per line. " : "",
+          "Numbers, true and false are compared as typed values. Quote them to compare text."
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+export { ConditionEditor };

package/dist/ui/src/components/form-builder/edit-field-dialog.cjs

@@ -5,6 +5,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const index = require('../auto-form/index.cjs');
 const helpers = require('../auto-form/helpers.cjs');
+const conditionEditor = require('./condition-editor.cjs');
 const input = require('../input.cjs');
 const label = require('../label.cjs');
 const button = require('../button.cjs');
@@ -30,6 +31,7 @@ function EditFieldDialog({
   }, [field, open]);
   const [fieldNameOverride, setFieldNameOverride] = React.useState(null);
   const [localPropsOverride, setLocalPropsOverride] = React.useState(null);
+  const [conditionOverride, setConditionOverride] = React.useState(null);
   const [stepGroupOverride, setStepGroupOverride] = React.useState(null);
   const fieldName = fieldNameOverride ?? initialValues.fieldName;
   const localProps = localPropsOverride ?? initialValues.props;
@@ -44,6 +46,7 @@ function EditFieldDialog({
     setFieldNameOverride(null);
     setLocalPropsOverride(null);
     setStepGroupOverride(null);
+    setConditionOverride(null);
   }
   const formKey = initialValues.key;
   const handleValuesChange = React.useCallback(
@@ -54,7 +57,7 @@ function EditFieldDialog({
   );
   const handleSave = React.useCallback(() => {
     if (!field) return;
-    const props = { ...localProps };
+    const props = { ...localProps, showIf: conditionOverride ? conditionOverride.value : field.props.showIf };
     if (typeof props.options === "string") {
       props.options = props.options.split("\n").map((s) => s.trim()).filter(Boolean);
     }
@@ -62,7 +65,7 @@ function EditFieldDialog({
     const stepGroup = stepGroupOverride !== null && stepGroupOverride !== field.stepGroup ? stepGroupOverride : void 0;
     onUpdate(field.id, props, newId, stepGroup);
     onOpenChange(false);
-  }, [field, localProps, fieldName, onUpdate, onOpenChange, stepGroupOverride]);
+  }, [field, localProps, fieldName, onUpdate, onOpenChange, stepGroupOverride, conditionOverride]);
   if (!field || !component) {
     return null;
   }
@@ -109,6 +112,7 @@ function EditFieldDialog({
         ),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Which step this field belongs to" })
       ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(conditionEditor.ConditionEditor, { value: conditionOverride ? conditionOverride.value : field.props.showIf, onChange: (value) => setConditionOverride({ value }), fieldIds: allFieldIds.filter((id) => id !== field.id) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
         index,
         {

package/dist/ui/src/components/form-builder/edit-field-dialog.mjs

@@ -3,6 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useState, useCallback } from 'react';
 import AutoForm from '../auto-form/index.mjs';
 import { buildFieldConfigFromJsonSchema } from '../auto-form/helpers.mjs';
+import { ConditionEditor } from './condition-editor.mjs';
 import { Input } from '../input.mjs';
 import { Label } from '../label.mjs';
 import { Button } from '../button.mjs';
@@ -28,6 +29,7 @@ function EditFieldDialog({
   }, [field, open]);
   const [fieldNameOverride, setFieldNameOverride] = useState(null);
   const [localPropsOverride, setLocalPropsOverride] = useState(null);
+  const [conditionOverride, setConditionOverride] = useState(null);
   const [stepGroupOverride, setStepGroupOverride] = useState(null);
   const fieldName = fieldNameOverride ?? initialValues.fieldName;
   const localProps = localPropsOverride ?? initialValues.props;
@@ -42,6 +44,7 @@ function EditFieldDialog({
     setFieldNameOverride(null);
     setLocalPropsOverride(null);
     setStepGroupOverride(null);
+    setConditionOverride(null);
   }
   const formKey = initialValues.key;
   const handleValuesChange = useCallback(
@@ -52,7 +55,7 @@ function EditFieldDialog({
   );
   const handleSave = useCallback(() => {
     if (!field) return;
-    const props = { ...localProps };
+    const props = { ...localProps, showIf: conditionOverride ? conditionOverride.value : field.props.showIf };
     if (typeof props.options === "string") {
       props.options = props.options.split("\n").map((s) => s.trim()).filter(Boolean);
     }
@@ -60,7 +63,7 @@ function EditFieldDialog({
     const stepGroup = stepGroupOverride !== null && stepGroupOverride !== field.stepGroup ? stepGroupOverride : void 0;
     onUpdate(field.id, props, newId, stepGroup);
     onOpenChange(false);
-  }, [field, localProps, fieldName, onUpdate, onOpenChange, stepGroupOverride]);
+  }, [field, localProps, fieldName, onUpdate, onOpenChange, stepGroupOverride, conditionOverride]);
   if (!field || !component) {
     return null;
   }
@@ -107,6 +110,7 @@ function EditFieldDialog({
         ),
         /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Which step this field belongs to" })
       ] }),
+      /* @__PURE__ */ jsx(ConditionEditor, { value: conditionOverride ? conditionOverride.value : field.props.showIf, onChange: (value) => setConditionOverride({ value }), fieldIds: allFieldIds.filter((id) => id !== field.id) }),
       /* @__PURE__ */ jsx("div", { className: "border-t pt-4", children: /* @__PURE__ */ jsx(
         AutoForm,
         {

package/dist/ui/src/components/form-builder/index.cjs

@@ -292,7 +292,12 @@ function FormBuilder({
                 onActiveStepChange: setActiveStepIndex,
                 onAddStep: handleAddStep,
                 onDeleteStep: handleDeleteStep,
-                onRenameStep: handleRenameStep
+                onRenameStep: handleRenameStep,
+                onStepConditionChange: (index, showIf) => {
+                  const nextSteps = steps.map((step, i) => i === index ? { ...step, showIf } : step);
+                  setSteps(nextSteps);
+                  notifyChange(fields, nextSteps);
+                }
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1 lg:w-96 border-t lg:border-t-0 lg:border-l lg:overflow-auto min-h-[300px]", children: /* @__PURE__ */ jsxRuntime.jsxs(tabs.Tabs, { defaultValue: "preview", className: "h-full flex flex-col", children: [

package/dist/ui/src/components/form-builder/index.mjs

@@ -291,7 +291,12 @@ function FormBuilder({
                 onActiveStepChange: setActiveStepIndex,
                 onAddStep: handleAddStep,
                 onDeleteStep: handleDeleteStep,
-                onRenameStep: handleRenameStep
+                onRenameStep: handleRenameStep,
+                onStepConditionChange: (index, showIf) => {
+                  const nextSteps = steps.map((step, i) => i === index ? { ...step, showIf } : step);
+                  setSteps(nextSteps);
+                  notifyChange(fields, nextSteps);
+                }
               }
             ) }),
             /* @__PURE__ */ jsx("div", { className: "w-full flex-1 lg:w-96 border-t lg:border-t-0 lg:border-l lg:overflow-auto min-h-[300px]", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "preview", className: "h-full flex flex-col", children: [

package/dist/ui/src/components/form-builder/schema-utils.cjs

@@ -12,6 +12,7 @@ function fieldsToProperties(fields, components, includeStepGroup = false) {
     }
     const isRequired = field.props.required ?? false;
     const schemaProp = component.toJSONSchema(field.props, isRequired);
+    if (field.props.showIf) schemaProp.showIf = field.props.showIf;
     if (includeStepGroup && field.stepGroup !== void 0) {
       schemaProp.stepGroup = field.stepGroup;
     }
@@ -64,6 +65,7 @@ function propertiesToFields(properties, requiredSet, components, stepGroupMap) {
     }
     const resolvedStepGroup = prop.stepGroup !== void 0 ? prop.stepGroup : stepGroupMap?.[key];
     if (field) {
+      if (prop.showIf) field.props.showIf = prop.showIf;
       if (resolvedStepGroup !== void 0) {
         field.stepGroup = resolvedStepGroup;
       }

package/dist/ui/src/components/form-builder/schema-utils.mjs

@@ -10,6 +10,7 @@ function fieldsToProperties(fields, components, includeStepGroup = false) {
     }
     const isRequired = field.props.required ?? false;
     const schemaProp = component.toJSONSchema(field.props, isRequired);
+    if (field.props.showIf) schemaProp.showIf = field.props.showIf;
     if (includeStepGroup && field.stepGroup !== void 0) {
       schemaProp.stepGroup = field.stepGroup;
     }
@@ -62,6 +63,7 @@ function propertiesToFields(properties, requiredSet, components, stepGroupMap) {
     }
     const resolvedStepGroup = prop.stepGroup !== void 0 ? prop.stepGroup : stepGroupMap?.[key];
     if (field) {
+      if (prop.showIf) field.props.showIf = prop.showIf;
       if (resolvedStepGroup !== void 0) {
         field.stepGroup = resolvedStepGroup;
       }

package/dist/ui/src/components/form.mjs

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
+import { FormProvider, useFormContext, useFormState, Controller } from 'react-hook-form';
 import { cn } from '../lib/utils.mjs';
 import { Label } from './label.mjs';
 

package/dist/ui/src/lib/form-visibility.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+function matchesShowIf(condition, values) {
+  if (!condition) return true;
+  const value = Object.hasOwn(values, condition.field) ? values[condition.field] : void 0;
+  switch (condition.operator) {
+    case "equals":
+      return value === condition.value;
+    case "notEquals":
+      return value !== condition.value;
+    case "in":
+      return Array.isArray(condition.value) && condition.value.includes(value);
+    case "isTruthy":
+      return Boolean(value);
+    default:
+      return false;
+  }
+}
+
+exports.matchesShowIf = matchesShowIf;

package/dist/ui/src/lib/form-visibility.mjs

@@ -0,0 +1,18 @@
+function matchesShowIf(condition, values) {
+  if (!condition) return true;
+  const value = Object.hasOwn(values, condition.field) ? values[condition.field] : void 0;
+  switch (condition.operator) {
+    case "equals":
+      return value === condition.value;
+    case "notEquals":
+      return value !== condition.value;
+    case "in":
+      return Array.isArray(condition.value) && condition.value.includes(value);
+    case "isTruthy":
+      return Boolean(value);
+    default:
+      return false;
+  }
+}
+
+export { matchesShowIf };