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

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

@@ -1,3 +1,4 @@
+import AutoFormFile from './fields/file.mjs';
 import AutoFormCheckbox from './fields/checkbox.mjs';
 import AutoFormDate from './fields/date.mjs';
 import AutoFormEnum from './fields/enum.mjs';
@@ -8,6 +9,7 @@ import AutoFormSwitch from './fields/switch.mjs';
 import AutoFormTextarea from './fields/textarea.mjs';
 
 const INPUT_COMPONENTS = {
+  file: AutoFormFile,
   checkbox: AutoFormCheckbox,
   date: AutoFormDate,
   select: AutoFormEnum,

package/dist/ui/src/components/auto-form/fields/file.cjs

@@ -0,0 +1,68 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const reactHookForm = require('react-hook-form');
+const form = require('../../form.cjs');
+const input = require('../../input.cjs');
+const label = require('../common/label.cjs');
+const tooltip = require('../common/tooltip.cjs');
+
+const FileUploadStatusContext = React.createContext(() => {
+});
+function AutoFormFile({ field, fieldProps, fieldConfigItem, label: label$1, isRequired }) {
+  const [uploading, setUploading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const form$1 = reactHookForm.useFormContext();
+  const reportStatus = React.useContext(FileUploadStatusContext);
+  React.useEffect(() => () => reportStatus(field.name, null), [field.name, reportStatus]);
+  const onUpload = fieldConfigItem.onUpload;
+  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(label, { label: fieldConfigItem.label || label$1, isRequired }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      input.Input,
+      {
+        type: "file",
+        name: field.name,
+        onBlur: field.onBlur,
+        accept: fieldProps.accept,
+        disabled: fieldProps.disabled || uploading || !onUpload,
+        required: isRequired && !field.value,
+        onChange: async (event) => {
+          const input = event.currentTarget;
+          const file = input.files?.[0];
+          if (!file || !onUpload) return;
+          setUploading(true);
+          reportStatus(field.name, "uploading");
+          setError(null);
+          form$1.setError(field.name, { type: "upload", message: "Upload in progress" });
+          try {
+            const url = await onUpload(file);
+            if (typeof url !== "string" || !url.trim()) throw new Error("Upload must return a URL string");
+            field.onChange(url);
+            form$1.clearErrors(field.name);
+            reportStatus(field.name, null);
+          } catch (error2) {
+            const message = error2 instanceof Error ? error2.message : "Upload failed";
+            setError(message);
+            reportStatus(field.name, "failed");
+            form$1.setError(field.name, { type: "upload", message });
+          } finally {
+            setUploading(false);
+            input.value = "";
+          }
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", role: "status", children: uploading ? "Uploading\u2026" : !onUpload ? "File uploads are not configured." : field.value ? "File uploaded" : "" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+  ] });
+}
+
+exports.FileUploadStatusContext = FileUploadStatusContext;
+exports.default = AutoFormFile;

package/dist/ui/src/components/auto-form/fields/file.mjs

@@ -0,0 +1,63 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useContext, useEffect, createContext } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { FormItem, FormControl, FormMessage } from '../../form.mjs';
+import { Input } from '../../input.mjs';
+import AutoFormLabel from '../common/label.mjs';
+import AutoFormTooltip from '../common/tooltip.mjs';
+
+const FileUploadStatusContext = createContext(() => {
+});
+function AutoFormFile({ field, fieldProps, fieldConfigItem, label, isRequired }) {
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState(null);
+  const form = useFormContext();
+  const reportStatus = useContext(FileUploadStatusContext);
+  useEffect(() => () => reportStatus(field.name, null), [field.name, reportStatus]);
+  const onUpload = fieldConfigItem.onUpload;
+  return /* @__PURE__ */ jsxs(FormItem, { children: [
+    /* @__PURE__ */ jsx(AutoFormLabel, { label: fieldConfigItem.label || label, isRequired }),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "file",
+        name: field.name,
+        onBlur: field.onBlur,
+        accept: fieldProps.accept,
+        disabled: fieldProps.disabled || uploading || !onUpload,
+        required: isRequired && !field.value,
+        onChange: async (event) => {
+          const input = event.currentTarget;
+          const file = input.files?.[0];
+          if (!file || !onUpload) return;
+          setUploading(true);
+          reportStatus(field.name, "uploading");
+          setError(null);
+          form.setError(field.name, { type: "upload", message: "Upload in progress" });
+          try {
+            const url = await onUpload(file);
+            if (typeof url !== "string" || !url.trim()) throw new Error("Upload must return a URL string");
+            field.onChange(url);
+            form.clearErrors(field.name);
+            reportStatus(field.name, null);
+          } catch (error2) {
+            const message = error2 instanceof Error ? error2.message : "Upload failed";
+            setError(message);
+            reportStatus(field.name, "failed");
+            form.setError(field.name, { type: "upload", message });
+          } finally {
+            setUploading(false);
+            input.value = "";
+          }
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", role: "status", children: uploading ? "Uploading\u2026" : !onUpload ? "File uploads are not configured." : field.value ? "File uploaded" : "" }),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] });
+}
+
+export { FileUploadStatusContext, AutoFormFile as default };

package/dist/ui/src/components/auto-form/fields/object.cjs

@@ -1,6 +1,8 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
+const schemaConverter = require('../../../lib/schema-converter.cjs');
+const formVisibility = require('../../../lib/form-visibility.cjs');
 const accordion = require('../../accordion.cjs');
 const form = require('../../form.cjs');
 const reactHookForm = require('react-hook-form');
@@ -32,7 +34,8 @@ function AutoFormObject({
   form: form$1,
   fieldConfig,
   path = [],
-  dependencies: dependencies$1 = []
+  dependencies: dependencies$1 = [],
+  visibilityValues
 }) {
   const { watch } = reactHookForm.useFormContext();
   if (!schema) {
@@ -56,6 +59,9 @@ function AutoFormObject({
     return item;
   };
   const sortedFieldKeys = helpers.sortFieldsByOrder(fieldConfig, Object.keys(shape));
+  const siblingValues = visibilityValues ?? schemaConverter.resolveVisibleSchema({
+    properties: Object.fromEntries(Object.keys(shape).map((name) => [name, { showIf: fieldConfig?.[name]?.showIf }]))
+  }, path.length ? watch(path.join(".")) ?? {} : watch()).data;
   return /* @__PURE__ */ jsxRuntime.jsx(accordion.Accordion, { type: "multiple", className: "space-y-5 border-none", children: sortedFieldKeys.map((name) => {
     let item = shape[name];
     item = handleIfZodNumber(item);
@@ -68,7 +74,7 @@ function AutoFormObject({
       isRequired: isRequiredByDependency,
       overrideOptions
     } = dependencies(dependencies$1, name, watch);
-    if (isHidden) {
+    if (isHidden || !formVisibility.matchesShowIf(fieldConfig?.[name]?.showIf, siblingValues)) {
       return null;
     }
     if (zodBaseType === "ZodObject") {
@@ -202,6 +208,7 @@ function AutoFormObject({
           const fieldProps = {
             ...helpers.zodToHtmlInputProps(item),
             ...field,
+            onChange: zodBaseType === "ZodNumber" && inputType === "number" ? (event) => field.onChange(event.target.value === "" ? void 0 : Number(event.target.value)) : field.onChange,
             ...safeInputProps,
             disabled: safeInputProps.disabled || isDisabled,
             ref: void 0,

package/dist/ui/src/components/auto-form/fields/object.mjs

@@ -1,4 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { resolveVisibleSchema } from '../../../lib/schema-converter.mjs';
+import { matchesShowIf } from '../../../lib/form-visibility.mjs';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../accordion.mjs';
 import { FormField } from '../../form.mjs';
 import { useFormContext } from 'react-hook-form';
@@ -16,7 +18,8 @@ function AutoFormObject({
   form,
   fieldConfig,
   path = [],
-  dependencies = []
+  dependencies = [],
+  visibilityValues
 }) {
   const { watch } = useFormContext();
   if (!schema) {
@@ -40,6 +43,9 @@ function AutoFormObject({
     return item;
   };
   const sortedFieldKeys = sortFieldsByOrder(fieldConfig, Object.keys(shape));
+  const siblingValues = visibilityValues ?? resolveVisibleSchema({
+    properties: Object.fromEntries(Object.keys(shape).map((name) => [name, { showIf: fieldConfig?.[name]?.showIf }]))
+  }, path.length ? watch(path.join(".")) ?? {} : watch()).data;
   return /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "space-y-5 border-none", children: sortedFieldKeys.map((name) => {
     let item = shape[name];
     item = handleIfZodNumber(item);
@@ -52,7 +58,7 @@ function AutoFormObject({
       isRequired: isRequiredByDependency,
       overrideOptions
     } = resolveDependencies(dependencies, name, watch);
-    if (isHidden) {
+    if (isHidden || !matchesShowIf(fieldConfig?.[name]?.showIf, siblingValues)) {
       return null;
     }
     if (zodBaseType === "ZodObject") {
@@ -186,6 +192,7 @@ function AutoFormObject({
           const fieldProps = {
             ...zodToHtmlInputProps(item),
             ...field,
+            onChange: zodBaseType === "ZodNumber" && inputType === "number" ? (event) => field.onChange(event.target.value === "" ? void 0 : Number(event.target.value)) : field.onChange,
             ...safeInputProps,
             disabled: safeInputProps.disabled || isDisabled,
             ref: void 0,

package/dist/ui/src/components/auto-form/helpers.cjs

@@ -1,9 +1,11 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
+const schemaConverter = require('../../lib/schema-converter.cjs');
 require('zod');
 
 const BUILTIN_FIELD_TYPES = [
+  "file",
   "checkbox",
   "date",
   "select",
@@ -24,6 +26,8 @@ function beautifyObjectName(string) {
 }
 function getBaseSchema(schema) {
   if (!schema) return null;
+  const display = schemaConverter.getFormDisplaySchema(schema);
+  if (display) return display;
   const def = schema._zod?.def;
   if (!def) return schema;
   if (def.innerType) {
@@ -107,6 +111,8 @@ function getDefaultValues(schema, fieldConfig) {
 }
 function getObjectFormSchema(schema) {
   if (!schema) return schema;
+  const displaySchema = schemaConverter.getFormDisplaySchema(schema);
+  if (displaySchema) return displaySchema;
   const def = schema._zod?.def;
   if (!def) return schema;
   if (def.type === "pipe") {
@@ -176,6 +182,7 @@ function buildFieldConfigFromJsonSchema(jsonSchema, fieldComponents) {
   if (!properties) return fieldConfig;
   for (const [key, value] of Object.entries(properties)) {
     const config = {};
+    if (value.showIf) config.showIf = value.showIf;
     if (value.label) {
       config.label = value.label;
     } else if (value.title) {
@@ -218,6 +225,8 @@ function buildFieldConfigFromJsonSchema(jsonSchema, fieldComponents) {
       "inputProps",
       "fieldType",
       "renderParent",
+      "showIf",
+      "onUpload",
       "order"
     ]);
     if (value.properties) {

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

@@ -1,7 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
+import { getFormDisplaySchema } from '../../lib/schema-converter.mjs';
 import 'zod';
 
 const BUILTIN_FIELD_TYPES = [
+  "file",
   "checkbox",
   "date",
   "select",
@@ -22,6 +24,8 @@ function beautifyObjectName(string) {
 }
 function getBaseSchema(schema) {
   if (!schema) return null;
+  const display = getFormDisplaySchema(schema);
+  if (display) return display;
   const def = schema._zod?.def;
   if (!def) return schema;
   if (def.innerType) {
@@ -105,6 +109,8 @@ function getDefaultValues(schema, fieldConfig) {
 }
 function getObjectFormSchema(schema) {
   if (!schema) return schema;
+  const displaySchema = getFormDisplaySchema(schema);
+  if (displaySchema) return displaySchema;
   const def = schema._zod?.def;
   if (!def) return schema;
   if (def.type === "pipe") {
@@ -174,6 +180,7 @@ function buildFieldConfigFromJsonSchema(jsonSchema, fieldComponents) {
   if (!properties) return fieldConfig;
   for (const [key, value] of Object.entries(properties)) {
     const config = {};
+    if (value.showIf) config.showIf = value.showIf;
     if (value.label) {
       config.label = value.label;
     } else if (value.title) {
@@ -216,6 +223,8 @@ function buildFieldConfigFromJsonSchema(jsonSchema, fieldComponents) {
       "inputProps",
       "fieldType",
       "renderParent",
+      "showIf",
+      "onUpload",
       "order"
     ]);
     if (value.properties) {

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

@@ -5,9 +5,11 @@ const jsxRuntime = require('react/jsx-runtime');
 const form = require('../form.cjs');
 const React = require('react');
 const reactHookForm = require('react-hook-form');
+const schemaConverter = require('../../lib/schema-converter.cjs');
 require('../button.cjs');
 const utils = require('../../lib/utils.cjs');
 const zod = require('@hookform/resolvers/zod');
+const file = require('./fields/file.cjs');
 const object = require('./fields/object.cjs');
 const helpers = require('./helpers.cjs');
 
@@ -34,6 +36,23 @@ function AutoForm({
     defaultValues: defaultValues ?? void 0,
     values: valuesProp
   });
+  const [uploadStatuses, setUploadStatuses] = React.useState({});
+  const reportUploadStatus = React.useCallback((name, status) => {
+    setUploadStatuses((previous) => {
+      if (previous[name] === status || !status && !(name in previous)) return previous;
+      const next = { ...previous };
+      if (status) next[name] = status;
+      else Reflect.deleteProperty(next, name);
+      return next;
+    });
+  }, []);
+  const uploading = Object.values(uploadStatuses).includes("uploading");
+  const uploadBlocked = Object.keys(uploadStatuses).length > 0;
+  const watchedValues = reactHookForm.useWatch({ control: form$1.control });
+  const metadata = formSchema.meta();
+  const visibility = metadata?.properties ? schemaConverter.resolveVisibleSchema(metadata, watchedValues) : void 0;
+  const visibleKeys = visibility ? Object.keys(visibility.schema.properties ?? {}) : null;
+  const visibleObjectSchema = visibleKeys ? objectFormSchema.pick(Object.fromEntries(visibleKeys.map((key) => [key, true]))) : objectFormSchema;
   const [schemaSubmitError, setSchemaSubmitError] = React.useState(null);
   function onSubmit(values) {
     setSchemaSubmitError(null);
@@ -58,18 +77,24 @@ function AutoForm({
     return () => subscription.unsubscribe();
   }, [form$1, formSchema, onValuesChangeProp, onParsedValuesChange]);
   const renderChildren = typeof children === "function" ? children(form$1.formState) : children;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(form.Form, { ...form$1, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(form.Form, { ...form$1, children: /* @__PURE__ */ jsxRuntime.jsx(
     "form",
     {
       onSubmit: (e) => {
+        if (uploadBlocked) {
+          e.preventDefault();
+          setSchemaSubmitError(uploading ? "Wait for the upload to finish." : "Retry the failed file upload before submitting.");
+          return;
+        }
         form$1.handleSubmit(onSubmit, () => setSchemaSubmitError(null))(e);
       },
       className: utils.cn("space-y-5", className),
-      children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx(file.FileUploadStatusContext.Provider, { value: reportUploadStatus, children: /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { disabled: uploading, className: "contents", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           object,
           {
-            schema: objectFormSchema,
+            schema: visibleObjectSchema,
+            visibilityValues: visibility?.data,
             form: form$1,
             dependencies,
             fieldConfig
@@ -84,7 +109,7 @@ function AutoForm({
           }
         ) : null,
         renderChildren
-      ]
+      ] }) })
     }
   ) }) });
 }

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

@@ -1,11 +1,13 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Form } from '../form.mjs';
-import React__default, { useState } from 'react';
-import { useForm } from 'react-hook-form';
+import React__default, { useState, useCallback } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { resolveVisibleSchema } from '../../lib/schema-converter.mjs';
 import '../button.mjs';
 import { cn } from '../../lib/utils.mjs';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { FileUploadStatusContext } from './fields/file.mjs';
 import AutoFormObject from './fields/object.mjs';
 import { getObjectFormSchema, getDefaultValues } from './helpers.mjs';
 
@@ -28,6 +30,23 @@ function AutoForm({
     defaultValues: defaultValues ?? void 0,
     values: valuesProp
   });
+  const [uploadStatuses, setUploadStatuses] = useState({});
+  const reportUploadStatus = useCallback((name, status) => {
+    setUploadStatuses((previous) => {
+      if (previous[name] === status || !status && !(name in previous)) return previous;
+      const next = { ...previous };
+      if (status) next[name] = status;
+      else Reflect.deleteProperty(next, name);
+      return next;
+    });
+  }, []);
+  const uploading = Object.values(uploadStatuses).includes("uploading");
+  const uploadBlocked = Object.keys(uploadStatuses).length > 0;
+  const watchedValues = useWatch({ control: form.control });
+  const metadata = formSchema.meta();
+  const visibility = metadata?.properties ? resolveVisibleSchema(metadata, watchedValues) : void 0;
+  const visibleKeys = visibility ? Object.keys(visibility.schema.properties ?? {}) : null;
+  const visibleObjectSchema = visibleKeys ? objectFormSchema.pick(Object.fromEntries(visibleKeys.map((key) => [key, true]))) : objectFormSchema;
   const [schemaSubmitError, setSchemaSubmitError] = useState(null);
   function onSubmit(values) {
     setSchemaSubmitError(null);
@@ -52,18 +71,24 @@ function AutoForm({
     return () => subscription.unsubscribe();
   }, [form, formSchema, onValuesChangeProp, onParsedValuesChange]);
   const renderChildren = typeof children === "function" ? children(form.formState) : children;
-  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(
     "form",
     {
       onSubmit: (e) => {
+        if (uploadBlocked) {
+          e.preventDefault();
+          setSchemaSubmitError(uploading ? "Wait for the upload to finish." : "Retry the failed file upload before submitting.");
+          return;
+        }
         form.handleSubmit(onSubmit, () => setSchemaSubmitError(null))(e);
       },
       className: cn("space-y-5", className),
-      children: [
+      children: /* @__PURE__ */ jsx(FileUploadStatusContext.Provider, { value: reportUploadStatus, children: /* @__PURE__ */ jsxs("fieldset", { disabled: uploading, className: "contents", children: [
         /* @__PURE__ */ jsx(
           AutoFormObject,
           {
-            schema: objectFormSchema,
+            schema: visibleObjectSchema,
+            visibilityValues: visibility?.data,
             form,
             dependencies,
             fieldConfig
@@ -78,7 +103,7 @@ function AutoForm({
           }
         ) : null,
         renderChildren
-      ]
+      ] }) })
     }
   ) }) });
 }

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

@@ -5,6 +5,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const z = require('zod');
 const index = require('./index.cjs');
+const helpers = require('./helpers.cjs');
+const schemaConverter = require('../../lib/schema-converter.cjs');
+const formVisibility = require('../../lib/form-visibility.cjs');
 const button = require('../button.cjs');
 const separator = require('../separator.cjs');
 const utils = require('../../lib/utils.cjs');
@@ -15,7 +18,7 @@ const React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 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;
     }
@@ -26,7 +29,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)) {
@@ -60,21 +63,6 @@ function createStepSchema(fullSchema, stepIndex, fieldAssignments) {
   }
   return fullSchema.pick(pickObject);
 }
-function getObjectSchema(schema) {
-  if (schema instanceof z.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,
@@ -122,16 +110,25 @@ function SteppedAutoForm({
   StepperComponent = DefaultStepper,
   isSubmitting = false
 }) {
-  const steps = React.useMemo(() => extractStepsFromSchema(formSchema), [formSchema]);
-  const hasMultipleSteps = steps.length > 1;
-  const fieldAssignments = React.useMemo(
+  const allSteps = React.useMemo(() => extractStepsFromSchema(formSchema), [formSchema]);
+  const hasMultipleSteps = allSteps.length > 1;
+  const originalFieldAssignments = React.useMemo(
     () => getFieldStepAssignments(formSchema),
     [formSchema]
   );
   const [currentStepIndex, setCurrentStepIndex] = React.useState(0);
   const [accumulatedValues, setAccumulatedValues] = React.useState(
-    initialValues ?? {}
+    () => ({ ...helpers.getDefaultValues(helpers.getObjectFormSchema(formSchema), fieldConfig) ?? {}, ...initialValues ?? {} })
   );
+  const steps = React.useMemo(() => {
+    const metadata = formSchema.meta();
+    const visibleValues = metadata?.properties ? schemaConverter.resolveVisibleSchema(metadata, accumulatedValues).data : accumulatedValues;
+    return allSteps.map((step, originalIndex) => ({ ...step, originalIndex })).filter((step) => formVisibility.matchesShowIf(step.showIf, visibleValues));
+  }, [allSteps, accumulatedValues, formSchema]);
+  const fieldAssignments = React.useMemo(() => new Map(Array.from(originalFieldAssignments).map(([key, originalIndex]) => [key, steps.findIndex((step) => step.originalIndex === originalIndex)])), [originalFieldAssignments, steps]);
+  React.useEffect(() => {
+    setCurrentStepIndex((index) => Math.min(index, Math.max(0, steps.length - 1)));
+  }, [steps.length]);
   const [completedSteps, setCompletedSteps] = React.useState(/* @__PURE__ */ new Set());
   const [schemaErrors, setSchemaErrors] = React.useState(null);
   const accumulatedValuesRef = React.useRef(accumulatedValues);
@@ -152,13 +149,19 @@ function SteppedAutoForm({
       setAccumulatedValues(newValues);
     }
   }, [initialValues]);
-  const objectSchema = React.useMemo(() => getObjectSchema(formSchema), [formSchema]);
+  const objectSchema = React.useMemo(() => helpers.getObjectFormSchema(formSchema), [formSchema]);
   const stepSchemas = React.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 = schemaConverter.resolveVisibleSchema(metadata, accumulatedValues).schema;
+      return steps.map((_, index) => {
+        const properties = Object.fromEntries(Object.entries(visible.properties ?? {}).filter(([key]) => fieldAssignments.get(key) === index));
+        return schemaConverter.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;
@@ -166,14 +169,16 @@ function SteppedAutoForm({
   const currentStepFieldConfig = React.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 = React.useMemo(() => {
     const stepFields = Array.from(fieldAssignments.entries()).filter(([, step]) => step === currentStepIndex).map(([field]) => field);
     const values = {};
@@ -251,7 +256,7 @@ function SteppedAutoForm({
       setSchemaErrors(null);
     }
   }, [isFirst]);
-  if (!hasMultipleSteps) {
+  if (!hasMultipleSteps || steps.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       index,
       {