@rachelallyson/hero-hook-form 2.0.0 → 2.1.0

package/dist/index.js

@@ -220,11 +220,11 @@ function CheckboxField(props) {
 import React3 from "react";
 import { useWatch, useFormContext } from "react-hook-form";
 function ConditionalField({
+  className,
   config,
-  control,
-  className
+  control
 }) {
-  const { condition, field: field2, name } = config;
+  const { condition, field: field2 } = config;
   const form = useFormContext();
   const formValues = useWatch({ control });
   const shouldShow = condition(formValues);
@@ -237,10 +237,10 @@ function ConditionalField({
       config: field2,
       form,
       submissionState: {
-        isSubmitting: false,
+        error: void 0,
         isSubmitted: false,
-        isSuccess: false,
-        error: void 0
+        isSubmitting: false,
+        isSuccess: false
       }
     }
   ));
@@ -308,11 +308,11 @@ function DateField(props) {
 import React5 from "react";
 import { useWatch as useWatch2, useFormContext as useFormContext2 } from "react-hook-form";
 function DynamicSectionField({
+  className,
   config,
-  control,
-  className
+  control
 }) {
-  const { condition, fields, title, description } = config;
+  const { condition, description, fields, title } = config;
   const form = useFormContext2();
   const formValues = useWatch2({ control });
   const shouldShow = condition(formValues);
@@ -326,10 +326,10 @@ function DynamicSectionField({
       config: fieldConfig,
       form,
       submissionState: {
-        isSubmitting: false,
+        error: void 0,
         isSubmitted: false,
-        isSuccess: false,
-        error: void 0
+        isSubmitting: false,
+        isSuccess: false
       }
     }
   ))));
@@ -340,15 +340,15 @@ import React6 from "react";
 import { useFieldArray, useFormContext as useFormContext3 } from "react-hook-form";
 import { Button as Button2 } from "@heroui/react";
 function FieldArrayField({
-  config,
-  className
+  className,
+  config
 }) {
   const {
-    name,
+    addButtonText = "Add Item",
     fields: fieldConfigs,
-    min = 0,
     max = 10,
-    addButtonText = "Add Item",
+    min = 0,
+    name,
     removeButtonText = "Remove"
   } = config;
   const form = useFormContext3();
@@ -356,7 +356,7 @@ function FieldArrayField({
     return null;
   }
   const { control } = form;
-  const { fields, append, remove } = useFieldArray({
+  const { append, fields, remove } = useFieldArray({
     control,
     name
     // FieldArray name
@@ -384,34 +384,42 @@ function FieldArrayField({
       remove(index);
     }
   };
-  return /* @__PURE__ */ React6.createElement("div", { className }, /* @__PURE__ */ React6.createElement("div", { className: "space-y-4" }, fields.map((field2, index) => /* @__PURE__ */ React6.createElement("div", { key: field2.id, className: "border border-gray-200 rounded-lg p-4 space-y-4" }, /* @__PURE__ */ React6.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-sm font-medium text-gray-700" }, config.label, " #", index + 1), canRemove && /* @__PURE__ */ React6.createElement(
-    Button2,
+  return /* @__PURE__ */ React6.createElement("div", { className }, /* @__PURE__ */ React6.createElement("div", { className: "space-y-4" }, fields.map((field2, index) => /* @__PURE__ */ React6.createElement(
+    "div",
     {
-      size: "sm",
-      variant: "light",
-      color: "danger",
-      startContent: "\u{1F5D1}\uFE0F",
-      onPress: () => handleRemove(index),
-      "aria-label": `${removeButtonText} ${config.label} ${index + 1}`
+      key: field2.id,
+      className: "border border-gray-200 rounded-lg p-4 space-y-4"
     },
-    removeButtonText
-  )), /* @__PURE__ */ React6.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, fieldConfigs.map((fieldConfig) => /* @__PURE__ */ React6.createElement(
-    FormField,
-    {
-      key: `${fieldConfig.name}-${index}`,
-      config: {
-        ...fieldConfig,
-        name: `${name}.${index}.${fieldConfig.name}`
+    /* @__PURE__ */ React6.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-sm font-medium text-gray-700" }, config.label, " #", index + 1), canRemove && /* @__PURE__ */ React6.createElement(
+      Button2,
+      {
+        size: "sm",
+        variant: "light",
+        color: "danger",
+        startContent: "\u{1F5D1}\uFE0F",
+        onPress: () => handleRemove(index),
+        "aria-label": `${removeButtonText} ${config.label} ${index + 1}`
       },
-      form,
-      submissionState: {
-        isSubmitting: false,
-        isSubmitted: false,
-        isSuccess: false,
-        error: void 0
+      removeButtonText
+    )),
+    /* @__PURE__ */ React6.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, fieldConfigs.map((fieldConfig) => /* @__PURE__ */ React6.createElement(
+      FormField,
+      {
+        key: `${fieldConfig.name}-${index}`,
+        config: {
+          ...fieldConfig,
+          name: `${name}.${index}.${fieldConfig.name}`
+        },
+        form,
+        submissionState: {
+          error: void 0,
+          isSubmitted: false,
+          isSubmitting: false,
+          isSuccess: false
+        }
       }
-    }
-  ))))), canAdd && /* @__PURE__ */ React6.createElement(
+    )))
+  )), canAdd && /* @__PURE__ */ React6.createElement(
     Button2,
     {
       variant: "bordered",
@@ -529,15 +537,15 @@ function FontPickerField(props) {
   } = props;
   const [fontPickerState, setFontPickerState] = React8.useState({
     component: FontPickerComponent,
-    loading: false,
-    error: null
+    error: null,
+    loading: false
   });
   React8.useEffect(() => {
     if (fontPickerLoaded && FontPickerComponent) {
       setFontPickerState({
         component: FontPickerComponent,
-        loading: false,
-        error: null
+        error: null,
+        loading: false
       });
       return;
     }
@@ -547,14 +555,14 @@ function FontPickerField(props) {
         if (fontPickerLoaded && FontPickerComponent) {
           setFontPickerState({
             component: FontPickerComponent,
-            loading: false,
-            error: null
+            error: null,
+            loading: false
           });
         } else {
           setFontPickerState({
             component: null,
-            loading: false,
-            error: "Font picker package not found"
+            error: "Font picker package not found",
+            loading: false
           });
         }
       };
@@ -571,17 +579,17 @@ function FontPickerField(props) {
         fontPickerLoading = false;
         setFontPickerState({
           component: FontPickerComponent,
-          loading: false,
-          error: null
+          error: null,
+          loading: false
         });
         loadingCallbacks.forEach((callback) => callback());
         loadingCallbacks.length = 0;
-      } catch (error) {
+      } catch {
         fontPickerLoading = false;
         setFontPickerState({
           component: null,
-          loading: false,
-          error: "Font picker package not found"
+          error: "Font picker package not found",
+          loading: false
         });
         loadingCallbacks.forEach((callback) => callback());
         loadingCallbacks.length = 0;
@@ -640,50 +648,52 @@ function CoercedInput(props) {
     }
   );
 }
-var InputField = React9.memo((props) => {
-  const {
-    className,
-    control,
-    description,
-    inputProps,
-    isDisabled,
-    label,
-    name,
-    rules,
-    transform
-  } = props;
-  return /* @__PURE__ */ React9.createElement(
-    Controller5,
-    {
+var InputField = React9.memo(
+  (props) => {
+    const {
+      className,
       control,
+      description,
+      inputProps,
+      isDisabled,
+      label,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement(
-        CoercedInput,
-        {
-          description,
-          disabled: isDisabled,
-          errorMessage: fieldState.error?.message,
-          field: {
-            ...field2,
-            onChange: (value) => {
-              if (inputProps?.type === "number") {
-                const numValue = value === "" ? void 0 : Number(value);
-                field2.onChange(
-                  transform ? transform(String(numValue)) : numValue
-                );
-              } else {
-                field2.onChange(transform ? transform(value) : value);
+      rules,
+      transform
+    } = props;
+    return /* @__PURE__ */ React9.createElement(
+      Controller5,
+      {
+        control,
+        name,
+        render: ({ field: field2, fieldState }) => /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement(
+          CoercedInput,
+          {
+            description,
+            disabled: isDisabled,
+            errorMessage: fieldState.error?.message,
+            field: {
+              ...field2,
+              onChange: (value) => {
+                if (inputProps?.type === "number") {
+                  const numValue = value === "" ? void 0 : Number(value);
+                  field2.onChange(
+                    transform ? transform(String(numValue)) : numValue
+                  );
+                } else {
+                  field2.onChange(transform ? transform(value) : value);
+                }
               }
-            }
-          },
-          inputProps,
-          label
-        }
-      )),
-      rules
-    }
-  );
-});
+            },
+            inputProps,
+            label
+          }
+        )),
+        rules
+      }
+    );
+  }
+);
 
 // src/fields/RadioGroupField.tsx
 import React10 from "react";
@@ -928,187 +938,189 @@ function TextareaField(props) {
 }
 
 // src/components/FormField.tsx
-var FormField = React15.memo(({
-  config,
-  form,
-  submissionState
-}) => {
-  if (!form || !form.control) {
-    return null;
-  }
-  const { control } = form;
-  const watchedValues = useWatch3({ control });
-  if (config.condition && !config.condition(watchedValues)) {
-    return null;
-  }
-  if (config.dependsOn) {
-    const dependentValue = watchedValues[config.dependsOn];
-    if (config.dependsOnValue !== void 0 && dependentValue !== config.dependsOnValue) {
+var FormField = React15.memo(
+  ({
+    config,
+    form,
+    submissionState
+  }) => {
+    if (!form || !form.control) {
       return null;
     }
-  }
-  const baseProps = {
-    ariaDescribedBy: config.ariaDescribedBy,
-    ariaLabel: config.ariaLabel,
-    className: config.className,
-    description: config.description,
-    isDisabled: config.isDisabled ?? submissionState.isSubmitting,
-    label: config.label,
-    name: config.name,
-    rules: config.rules
-  };
-  switch (config.type) {
-    case "input":
-      return /* @__PURE__ */ React15.createElement(
-        InputField,
-        {
-          ...baseProps,
-          control,
-          defaultValue: config.defaultValue,
-          inputProps: config.inputProps
-        }
-      );
-    case "textarea":
-      return /* @__PURE__ */ React15.createElement(
-        TextareaField,
-        {
-          ...baseProps,
-          control,
-          defaultValue: config.defaultValue,
-          textareaProps: config.textareaProps
-        }
-      );
-    case "select":
-      return /* @__PURE__ */ React15.createElement(
-        SelectField,
-        {
-          ...baseProps,
-          control,
-          defaultValue: config.defaultValue,
-          options: (config.options ?? []).map((opt) => ({
-            label: opt.label,
-            value: String(opt.value)
-          })),
-          selectProps: config.selectProps
-        }
-      );
-    case "checkbox":
-      return /* @__PURE__ */ React15.createElement(
-        CheckboxField,
-        {
-          ...baseProps,
-          checkboxProps: config.checkboxProps,
-          control,
-          defaultValue: config.defaultValue
-        }
-      );
-    case "radio":
-      return /* @__PURE__ */ React15.createElement(
-        RadioGroupField,
-        {
-          ...baseProps,
-          control,
-          defaultValue: config.defaultValue,
-          options: (config.radioOptions ?? []).map((opt) => ({
-            label: opt.label,
-            value: String(opt.value)
-          })),
-          radioGroupProps: config.radioProps
-        }
-      );
-    case "switch":
-      return /* @__PURE__ */ React15.createElement(
-        SwitchField,
-        {
-          ...baseProps,
-          control,
-          defaultValue: config.defaultValue,
-          switchProps: config.switchProps
-        }
-      );
-    case "slider":
-      return /* @__PURE__ */ React15.createElement(
-        SliderField,
-        {
-          ...baseProps,
-          control,
-          defaultValue: config.defaultValue,
-          sliderProps: config.sliderProps
-        }
-      );
-    case "date":
-      return /* @__PURE__ */ React15.createElement(
-        DateField,
-        {
-          ...baseProps,
-          control,
-          dateProps: config.dateProps,
-          defaultValue: config.defaultValue
-        }
-      );
-    case "file":
-      return /* @__PURE__ */ React15.createElement(
-        FileField,
-        {
-          ...baseProps,
-          accept: config.accept,
-          control,
-          defaultValue: config.defaultValue,
-          fileProps: config.fileProps,
-          multiple: config.multiple
-        }
-      );
-    case "fontPicker":
-      return /* @__PURE__ */ React15.createElement(
-        FontPickerField,
-        {
-          ...baseProps,
-          control,
-          defaultValue: config.defaultValue,
-          fontPickerProps: config.fontPickerProps
-        }
-      );
-    case "custom":
-      return config.render({
-        control,
-        errors: form.formState.errors,
-        form,
-        isSubmitting: submissionState.isSubmitting,
-        name: config.name
-      });
-    case "conditional":
-      return /* @__PURE__ */ React15.createElement(
-        ConditionalField,
-        {
-          config,
-          control,
-          className: config.className
-        }
-      );
-    case "fieldArray":
-      return /* @__PURE__ */ React15.createElement(
-        FieldArrayField,
-        {
-          config,
-          className: config.className
-        }
-      );
-    case "dynamicSection":
-      return /* @__PURE__ */ React15.createElement(
-        DynamicSectionField,
-        {
-          config,
-          control,
-          className: config.className
-        }
-      );
-    default: {
-      const fieldType = config.type;
-      console.warn(`Unknown field type: ${fieldType}`);
+    const { control } = form;
+    const watchedValues = useWatch3({ control });
+    if (config.condition && !config.condition(watchedValues)) {
       return null;
     }
+    if (config.dependsOn) {
+      const dependentValue = watchedValues[config.dependsOn];
+      if (config.dependsOnValue !== void 0 && dependentValue !== config.dependsOnValue) {
+        return null;
+      }
+    }
+    const baseProps = {
+      ariaDescribedBy: config.ariaDescribedBy,
+      ariaLabel: config.ariaLabel,
+      className: config.className,
+      description: config.description,
+      isDisabled: config.isDisabled ?? submissionState.isSubmitting,
+      label: config.label,
+      name: config.name,
+      rules: config.rules
+    };
+    switch (config.type) {
+      case "input":
+        return /* @__PURE__ */ React15.createElement(
+          InputField,
+          {
+            ...baseProps,
+            control,
+            defaultValue: config.defaultValue,
+            inputProps: config.inputProps
+          }
+        );
+      case "textarea":
+        return /* @__PURE__ */ React15.createElement(
+          TextareaField,
+          {
+            ...baseProps,
+            control,
+            defaultValue: config.defaultValue,
+            textareaProps: config.textareaProps
+          }
+        );
+      case "select":
+        return /* @__PURE__ */ React15.createElement(
+          SelectField,
+          {
+            ...baseProps,
+            control,
+            defaultValue: config.defaultValue,
+            options: (config.options ?? []).map((opt) => ({
+              label: opt.label,
+              value: String(opt.value)
+            })),
+            selectProps: config.selectProps
+          }
+        );
+      case "checkbox":
+        return /* @__PURE__ */ React15.createElement(
+          CheckboxField,
+          {
+            ...baseProps,
+            checkboxProps: config.checkboxProps,
+            control,
+            defaultValue: config.defaultValue
+          }
+        );
+      case "radio":
+        return /* @__PURE__ */ React15.createElement(
+          RadioGroupField,
+          {
+            ...baseProps,
+            control,
+            defaultValue: config.defaultValue,
+            options: (config.radioOptions ?? []).map((opt) => ({
+              label: opt.label,
+              value: String(opt.value)
+            })),
+            radioGroupProps: config.radioProps
+          }
+        );
+      case "switch":
+        return /* @__PURE__ */ React15.createElement(
+          SwitchField,
+          {
+            ...baseProps,
+            control,
+            defaultValue: config.defaultValue,
+            switchProps: config.switchProps
+          }
+        );
+      case "slider":
+        return /* @__PURE__ */ React15.createElement(
+          SliderField,
+          {
+            ...baseProps,
+            control,
+            defaultValue: config.defaultValue,
+            sliderProps: config.sliderProps
+          }
+        );
+      case "date":
+        return /* @__PURE__ */ React15.createElement(
+          DateField,
+          {
+            ...baseProps,
+            control,
+            dateProps: config.dateProps,
+            defaultValue: config.defaultValue
+          }
+        );
+      case "file":
+        return /* @__PURE__ */ React15.createElement(
+          FileField,
+          {
+            ...baseProps,
+            accept: config.accept,
+            control,
+            defaultValue: config.defaultValue,
+            fileProps: config.fileProps,
+            multiple: config.multiple
+          }
+        );
+      case "fontPicker":
+        return /* @__PURE__ */ React15.createElement(
+          FontPickerField,
+          {
+            ...baseProps,
+            control,
+            defaultValue: config.defaultValue,
+            fontPickerProps: config.fontPickerProps
+          }
+        );
+      case "custom":
+        return config.render({
+          control,
+          errors: form.formState.errors,
+          form,
+          isSubmitting: submissionState.isSubmitting,
+          name: config.name
+        });
+      case "conditional":
+        return /* @__PURE__ */ React15.createElement(
+          ConditionalField,
+          {
+            config,
+            control,
+            className: config.className
+          }
+        );
+      case "fieldArray":
+        return /* @__PURE__ */ React15.createElement(
+          FieldArrayField,
+          {
+            config,
+            className: config.className
+          }
+        );
+      case "dynamicSection":
+        return /* @__PURE__ */ React15.createElement(
+          DynamicSectionField,
+          {
+            config,
+            control,
+            className: config.className
+          }
+        );
+      default: {
+        const fieldType = config.type;
+        console.warn(`Unknown field type: ${fieldType}`);
+        return null;
+      }
+    }
   }
-});
+);
 
 // src/components/Form.tsx
 function ConfigurableForm({
@@ -1224,6 +1236,334 @@ function ConfigurableForm({
   )));
 }
 
+// src/components/ServerActionForm.tsx
+import React17 from "react";
+import {
+  Button as Button4,
+  Checkbox as Checkbox2,
+  Input as Input2,
+  Select as Select2,
+  SelectItem as SelectItem2,
+  Textarea as Textarea2
+} from "@heroui/react";
+import { useActionState } from "react";
+function ServerActionForm({
+  action,
+  className,
+  clientValidationSchema,
+  columns = 1,
+  defaultValues,
+  fields,
+  initialState,
+  layout = "vertical",
+  onError,
+  onSuccess,
+  resetButtonText = "Reset",
+  showResetButton = false,
+  spacing = "4",
+  submitButtonProps = {},
+  submitButtonText = "Submit",
+  subtitle,
+  title
+}) {
+  const [state, formAction, pending] = useActionState(
+    action,
+    initialState ?? { errors: void 0, message: void 0, success: false }
+  );
+  const formRef = React17.useRef(null);
+  const [clientErrors, setClientErrors] = React17.useState({});
+  const lastSubmittedFormData = React17.useRef(null);
+  React17.useEffect(() => {
+    if (state && (state.errors || state.message && !state.success)) {
+      onError?.({
+        errors: state.errors,
+        message: state.message
+      });
+    }
+  }, [state, onError]);
+  React17.useEffect(() => {
+    if (state?.success && lastSubmittedFormData.current) {
+      onSuccess?.(lastSubmittedFormData.current);
+    }
+  }, [state?.success, onSuccess]);
+  const handleReset = () => {
+    formRef.current?.reset();
+    setClientErrors({});
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (clientValidationSchema) {
+      const formData2 = new FormData(e.currentTarget);
+      const values = {};
+      formData2.forEach((val, key) => {
+        if (val === "on") {
+          values[key] = true;
+        } else if (val === "") {
+          if (!values[key]) {
+            values[key] = false;
+          }
+        } else {
+          values[key] = val;
+        }
+      });
+      const result = clientValidationSchema.safeParse(values);
+      if (!result.success) {
+        const errors = {};
+        result.error.issues.forEach((issue) => {
+          const path = issue.path.join(".");
+          errors[path] = issue.message;
+        });
+        setClientErrors((prev) => ({ ...prev, ...errors }));
+        return;
+      }
+      setClientErrors({});
+    }
+    const formData = new FormData(e.currentTarget);
+    lastSubmittedFormData.current = formData;
+    formAction(formData);
+  };
+  const renderFields = () => {
+    if (layout === "grid") {
+      return /* @__PURE__ */ React17.createElement(
+        "div",
+        {
+          className: `grid gap-${spacing} ${columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}`
+        },
+        fields.map((field2) => /* @__PURE__ */ React17.createElement(
+          ServerActionField,
+          {
+            key: field2.name,
+            clientErrors,
+            defaultValues,
+            errors: state?.errors,
+            field: field2
+          }
+        ))
+      );
+    }
+    if (layout === "horizontal") {
+      return /* @__PURE__ */ React17.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React17.createElement(
+        ServerActionField,
+        {
+          key: field2.name,
+          clientErrors,
+          defaultValues,
+          errors: state?.errors,
+          field: field2
+        }
+      )));
+    }
+    return /* @__PURE__ */ React17.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React17.createElement(
+      ServerActionField,
+      {
+        key: field2.name,
+        clientErrors,
+        defaultValues,
+        errors: state?.errors,
+        field: field2
+      }
+    )));
+  };
+  return /* @__PURE__ */ React17.createElement(
+    "form",
+    {
+      ref: formRef,
+      className,
+      role: "form",
+      onSubmit: handleSubmit
+    },
+    title && /* @__PURE__ */ React17.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React17.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React17.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)),
+    state?.success && !pending && /* @__PURE__ */ React17.createElement(
+      "div",
+      {
+        className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
+        "data-testid": "success-message"
+      },
+      /* @__PURE__ */ React17.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
+      state.message && /* @__PURE__ */ React17.createElement("p", { className: "text-success-700 text-sm mt-1" }, state.message)
+    ),
+    state?.message && !state.success && /* @__PURE__ */ React17.createElement(
+      "div",
+      {
+        className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
+        "data-testid": "error-message"
+      },
+      /* @__PURE__ */ React17.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
+      /* @__PURE__ */ React17.createElement("p", { className: "text-danger-700 text-sm mt-1" }, state.message)
+    ),
+    renderFields(),
+    /* @__PURE__ */ React17.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React17.createElement(
+      Button4,
+      {
+        color: "primary",
+        isDisabled: pending,
+        isLoading: pending,
+        type: "submit",
+        ...submitButtonProps
+      },
+      submitButtonText
+    ), showResetButton && /* @__PURE__ */ React17.createElement(
+      Button4,
+      {
+        isDisabled: pending,
+        type: "button",
+        variant: "bordered",
+        onPress: handleReset
+      },
+      resetButtonText
+    ))
+  );
+}
+function ServerActionField({
+  clientErrors,
+  defaultValues,
+  errors,
+  field: field2
+}) {
+  const fieldName = field2.name;
+  const fieldErrors = errors?.[fieldName];
+  const clientError = clientErrors?.[fieldName];
+  const errorMessage = clientError || (fieldErrors && fieldErrors.length > 0 ? fieldErrors[0] : void 0);
+  const getDefaultValue = () => {
+    const fromProps = defaultValues?.[fieldName];
+    const fromField = field2.defaultValue;
+    if (fromProps !== void 0 && fromProps !== null) {
+      return typeof fromProps === "string" ? fromProps : String(fromProps);
+    }
+    if (fromField !== void 0 && fromField !== null) {
+      return typeof fromField === "string" ? fromField : String(fromField);
+    }
+    return "";
+  };
+  const getDefaultChecked = () => {
+    const fromProps = defaultValues?.[fieldName];
+    const fromField = field2.defaultValue;
+    if (fromProps !== void 0 && fromProps !== null) {
+      return typeof fromProps === "boolean" ? fromProps : false;
+    }
+    if (fromField !== void 0 && fromField !== null) {
+      return typeof fromField === "boolean" ? fromField : false;
+    }
+    return false;
+  };
+  const [value, setValue] = React17.useState(getDefaultValue);
+  const [checked, setChecked] = React17.useState(getDefaultChecked);
+  React17.useEffect(() => {
+    const newDefaultValue = defaultValues?.[fieldName];
+    if (newDefaultValue !== void 0 && newDefaultValue !== null) {
+      if (field2.type === "checkbox") {
+        setChecked(
+          typeof newDefaultValue === "boolean" ? newDefaultValue : false
+        );
+      } else {
+        setValue(
+          typeof newDefaultValue === "string" ? newDefaultValue : String(newDefaultValue)
+        );
+      }
+    }
+  }, [defaultValues, fieldName, field2.type]);
+  React17.useEffect(() => {
+    const hiddenInput = document.querySelector(
+      `input[type="hidden"][name="${fieldName}"]`
+    );
+    if (hiddenInput) {
+      if (field2.type === "checkbox") {
+        hiddenInput.value = checked ? "on" : "";
+      } else {
+        hiddenInput.value = value;
+      }
+    }
+  }, [value, checked, fieldName, field2.type]);
+  switch (field2.type) {
+    case "input": {
+      const inputType = field2.inputProps?.type || "text";
+      return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React17.createElement(
+        Input2,
+        {
+          ...field2.inputProps,
+          "data-field-name": fieldName,
+          type: inputType,
+          label: field2.label,
+          description: field2.description,
+          isDisabled: field2.isDisabled,
+          isInvalid: Boolean(errorMessage),
+          errorMessage,
+          value,
+          onValueChange: setValue
+        }
+      ));
+    }
+    case "textarea": {
+      return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React17.createElement(
+        Textarea2,
+        {
+          ...field2.textareaProps,
+          "data-field-name": fieldName,
+          label: field2.label,
+          description: field2.description,
+          isDisabled: field2.isDisabled,
+          isInvalid: Boolean(errorMessage),
+          errorMessage,
+          value,
+          onValueChange: setValue
+        }
+      ));
+    }
+    case "checkbox": {
+      return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name: fieldName, value: checked ? "on" : "" }), /* @__PURE__ */ React17.createElement(
+        Checkbox2,
+        {
+          ...field2.checkboxProps,
+          "data-field-name": fieldName,
+          isDisabled: field2.isDisabled,
+          isSelected: checked,
+          onValueChange: setChecked,
+          isInvalid: Boolean(errorMessage),
+          errorMessage
+        },
+        field2.label
+      ));
+    }
+    case "select": {
+      const options = field2.options || [];
+      return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React17.createElement(
+        Select2,
+        {
+          ...field2.selectProps,
+          "data-field-name": fieldName,
+          label: field2.label,
+          description: field2.description,
+          isDisabled: field2.isDisabled,
+          isInvalid: Boolean(errorMessage),
+          errorMessage,
+          selectedKeys: value ? [value] : [],
+          onSelectionChange: (keys) => {
+            const selectedValue = Array.from(keys)[0];
+            setValue(selectedValue || "");
+          }
+        },
+        options.map(
+          (option) => /* @__PURE__ */ React17.createElement(SelectItem2, { key: String(option.value) }, option.label)
+        )
+      ));
+    }
+    default:
+      return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React17.createElement(
+        Input2,
+        {
+          "data-field-name": fieldName,
+          label: field2.label,
+          description: field2.description,
+          isDisabled: field2.isDisabled,
+          isInvalid: Boolean(errorMessage),
+          errorMessage,
+          value,
+          onValueChange: setValue
+        }
+      ));
+  }
+}
+
 // src/hooks/useHeroForm.ts
 import { useFormContext as useFormContext4 } from "react-hook-form";
 function useHeroForm() {
@@ -1238,10 +1578,10 @@ function useHeroForm() {
 }
 
 // src/providers/FormProvider.tsx
-import React17 from "react";
+import React18 from "react";
 import { FormProvider as RHFProvider } from "react-hook-form";
 function FormProvider(props) {
-  return /* @__PURE__ */ React17.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React18.createElement(
     "form",
     {
       className: props.className,
@@ -1254,7 +1594,7 @@ function FormProvider(props) {
 }
 
 // src/submit/SubmitButton.tsx
-import React18 from "react";
+import React19 from "react";
 function SubmitButton(props) {
   const ctx = useFormContext5();
   const loading = props.isLoading ?? ctx.formState.isSubmitting;
@@ -1264,10 +1604,10 @@ function SubmitButton(props) {
   const defaults = useHeroHookFormDefaults();
   const getButtonContent = () => {
     if (enhancedState?.isSuccess) {
-      return /* @__PURE__ */ React18.createElement("span", { className: "inline-flex items-center gap-2" }, "\u2705", props.successText || "Success!");
+      return /* @__PURE__ */ React19.createElement("span", { className: "inline-flex items-center gap-2" }, "\u2705", props.successText || "Success!");
     }
     if (loading) {
-      return /* @__PURE__ */ React18.createElement("span", { className: "inline-flex items-center gap-2" }, "\u23F3", props.loadingText || "Submitting...");
+      return /* @__PURE__ */ React19.createElement("span", { className: "inline-flex items-center gap-2" }, "\u23F3", props.loadingText || "Submitting...");
     }
     return props.children;
   };
@@ -1280,7 +1620,7 @@ function SubmitButton(props) {
     }
     return props.buttonProps?.color || defaults.submitButton.color;
   };
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     Button,
     {
       type: "submit",
@@ -1429,14 +1769,6 @@ var createPasswordSchema = (minLength = 8) => z.string().min(minLength, `Passwor
   /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
   "Password must contain at least one uppercase letter, one lowercase letter, and one number"
 );
-var createConfirmPasswordSchema = (passwordField) => z.string().refine(
-  (val) => {
-    return true;
-  },
-  {
-    message: "Passwords do not match"
-  }
-);
 var createNumberRangeSchema = (min, max, fieldName) => z.number().min(min, `${fieldName} must be at least ${min}`).max(max, `${fieldName} must be no more than ${max}`);
 var createDateSchema = (fieldName) => z.date({ message: `${fieldName} is required` });
 var createFutureDateSchema = (fieldName) => z.date({ message: `${fieldName} is required` }).refine((date) => date > /* @__PURE__ */ new Date(), {
@@ -1455,44 +1787,24 @@ var createFileSchema = (maxSizeInMB = 5, allowedTypes = ["image/jpeg", "image/pn
 var createRequiredCheckboxSchema = (fieldName) => z.boolean().refine((val) => val === true, {
   message: `You must agree to ${fieldName}`
 });
-var createConditionalSchema = (condition, schema, errorMessage = "This field is required") => z.any().refine(
-  (val) => {
-    return true;
-  },
-  {
-    message: errorMessage
-  }
-);
-var commonValidations = {
-  conditional: (condition, schema, errorMessage) => createConditionalSchema(condition, schema, errorMessage),
-  confirmPassword: (passwordField) => createConfirmPasswordSchema(passwordField),
-  date: (fieldName) => createDateSchema(fieldName),
-  email: createEmailSchema(),
-  file: (maxSizeInMB, allowedTypes) => createFileSchema(maxSizeInMB, allowedTypes),
-  futureDate: (fieldName) => createFutureDateSchema(fieldName),
-  maxLength: (max, fieldName) => createMaxLengthSchema(max, fieldName),
-  minLength: (min, fieldName) => createMinLengthSchema(min, fieldName),
-  numberRange: (min, max, fieldName) => createNumberRangeSchema(min, max, fieldName),
-  password: (minLength) => createPasswordSchema(minLength),
-  pastDate: (fieldName) => createPastDateSchema(fieldName),
-  phone: createPhoneSchema(),
-  required: (fieldName) => createRequiredSchema(fieldName),
-  requiredCheckbox: (fieldName) => createRequiredCheckboxSchema(fieldName),
-  url: createUrlSchema()
-};
 var crossFieldValidation = {
   /**
-   * Password confirmation validation
+   * Conditional required field validation
    */
-  passwordConfirmation: (passwordField, confirmField) => {
+  conditionalRequired: (field2, conditionField, conditionValue) => {
     return z.object({
-      [passwordField]: z.string(),
-      [confirmField]: z.string()
+      [conditionField]: z.any(),
+      [field2]: z.string()
     }).refine(
-      (data) => data[passwordField] === data[confirmField],
+      (data) => {
+        if (data[conditionField] === conditionValue) {
+          return data[field2] && data[field2].trim().length > 0;
+        }
+        return true;
+      },
       {
-        message: "Passwords do not match",
-        path: [confirmField]
+        message: "This field is required",
+        path: [field2]
       }
     );
   },
@@ -1501,8 +1813,8 @@ var crossFieldValidation = {
    */
   dateRange: (startField, endField) => {
     return z.object({
-      [startField]: z.string(),
-      [endField]: z.string()
+      [endField]: z.string(),
+      [startField]: z.string()
     }).refine(
       (data) => {
         const startDate = new Date(data[startField]);
@@ -1516,39 +1828,47 @@ var crossFieldValidation = {
     );
   },
   /**
-   * Conditional required field validation
+   * Password confirmation validation
    */
-  conditionalRequired: (field2, conditionField, conditionValue) => {
+  passwordConfirmation: (passwordField, confirmField) => {
     return z.object({
-      [field2]: z.string(),
-      [conditionField]: z.any()
-    }).refine(
-      (data) => {
-        if (data[conditionField] === conditionValue) {
-          return data[field2] && data[field2].trim().length > 0;
-        }
-        return true;
-      },
-      {
-        message: "This field is required",
-        path: [field2]
-      }
-    );
+      [confirmField]: z.string(),
+      [passwordField]: z.string()
+    }).refine((data) => data[passwordField] === data[confirmField], {
+      message: "Passwords do not match",
+      path: [confirmField]
+    });
   }
 };
+var commonValidations = {
+  confirmPassword: (passwordField, confirmField) => crossFieldValidation.passwordConfirmation(passwordField, confirmField),
+  date: (fieldName) => createDateSchema(fieldName),
+  email: createEmailSchema(),
+  file: (maxSizeInMB, allowedTypes) => createFileSchema(maxSizeInMB, allowedTypes),
+  futureDate: (fieldName) => createFutureDateSchema(fieldName),
+  maxLength: (max, fieldName) => createMaxLengthSchema(max, fieldName),
+  minLength: (min, fieldName) => createMinLengthSchema(min, fieldName),
+  numberRange: (min, max, fieldName) => createNumberRangeSchema(min, max, fieldName),
+  password: (minLength) => createPasswordSchema(minLength),
+  pastDate: (fieldName) => createPastDateSchema(fieldName),
+  phone: createPhoneSchema(),
+  required: (fieldName) => createRequiredSchema(fieldName),
+  requiredCheckbox: (fieldName) => createRequiredCheckboxSchema(fieldName),
+  url: createUrlSchema()
+};
 
 // src/index.ts
 import { useFormContext as useFormContext5 } from "react-hook-form";
 
 // src/components/ZodForm.tsx
-import React20 from "react";
-import { Button as Button5 } from "@heroui/react";
+import React21 from "react";
+import { Button as Button6 } from "@heroui/react";
 
 // src/zod-integration.ts
 import { useForm as useForm2 } from "react-hook-form";
 import { z as z2 } from "zod";
 function createZodResolver(schema) {
-  return async (values, context) => {
+  return async (values) => {
     try {
       const result = await schema.parseAsync(values);
       return {
@@ -1579,9 +1899,11 @@ function useZodForm(config) {
 }
 function createZodFormConfig(schema, fields, defaultValues) {
   return {
-    schema,
     fields,
-    ...defaultValues && { defaultValues }
+    schema,
+    ...defaultValues && {
+      defaultValues
+    }
   };
 }
 
@@ -1589,18 +1911,20 @@ function createZodFormConfig(schema, fields, defaultValues) {
 import { useCallback, useEffect, useState as useState2 } from "react";
 function useEnhancedFormState(form, options = {}) {
   const {
-    onSuccess,
-    onError,
-    successMessage = "Form submitted successfully!",
-    errorMessage = "An error occurred. Please try again.",
     autoReset = true,
-    resetDelay = 3e3
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    errorMessage: _errorMessage = "An error occurred. Please try again.",
+    onError,
+    onSuccess,
+    resetDelay = 3e3,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    successMessage: _successMessage = "Form submitted successfully!"
   } = options;
   const [status, setStatus] = useState2("idle");
   const [error, setError] = useState2(void 0);
   const [submittedData, setSubmittedData] = useState2(void 0);
-  const { formState, getValues } = form;
-  const { errors, touchedFields, dirtyFields, isSubmitting } = formState;
+  const { formState, getValues: _getValues } = form;
+  const { dirtyFields, errors, isSubmitting, touchedFields } = formState;
   useEffect(() => {
     if (isSubmitting) {
       setStatus("submitting");
@@ -1616,92 +1940,123 @@ function useEnhancedFormState(form, options = {}) {
       return () => clearTimeout(timer);
     }
   }, [status, autoReset, resetDelay]);
-  const handleSuccess = useCallback((data) => {
-    setStatus("success");
-    setSubmittedData(data);
-    setError(void 0);
-    onSuccess?.(data);
-  }, [onSuccess]);
-  const handleError = useCallback((errorMessage2) => {
-    setStatus("error");
-    setError(errorMessage2);
-    setSubmittedData(void 0);
-    onError?.(errorMessage2);
-  }, [onError]);
+  const handleSuccess = useCallback(
+    (data) => {
+      setStatus("success");
+      setSubmittedData(data);
+      setError(void 0);
+      onSuccess?.(data);
+    },
+    [onSuccess]
+  );
+  const handleError = useCallback(
+    (errorMessage) => {
+      setStatus("error");
+      setError(errorMessage);
+      setSubmittedData(void 0);
+      onError?.(errorMessage);
+    },
+    [onError]
+  );
   const reset = useCallback(() => {
     setStatus("idle");
     setError(void 0);
     setSubmittedData(void 0);
   }, []);
   return {
-    status,
-    isSubmitting,
-    isSuccess: status === "success",
-    isError: status === "error",
-    error,
-    submittedData,
-    touchedFields: new Set(Object.keys(touchedFields)),
     dirtyFields: new Set(Object.keys(dirtyFields)),
-    hasErrors: Object.keys(errors).length > 0,
+    error,
     errorCount: Object.keys(errors).length,
-    handleSuccess,
     handleError,
-    reset
+    handleSuccess,
+    hasErrors: Object.keys(errors).length > 0,
+    isError: status === "error",
+    isSubmitting,
+    isSuccess: status === "success",
+    reset,
+    status,
+    submittedData,
+    touchedFields: new Set(Object.keys(touchedFields))
   };
 }
 
 // src/components/FormStatus.tsx
-import React19 from "react";
-import { Button as Button4 } from "@heroui/react";
+import React20 from "react";
+import { Button as Button5 } from "@heroui/react";
 function FormStatus({
-  state,
-  onDismiss,
   className = "",
-  showDetails = false
+  onDismiss,
+  showDetails = false,
+  state
 }) {
-  const { status, isSubmitting, isSuccess, isError, error, submittedData } = state;
+  const { error, isError, isSubmitting, isSuccess, status, submittedData } = state;
   if (status === "idle") {
     return null;
   }
   if (isSubmitting) {
-    return /* @__PURE__ */ React19.createElement("div", { className: `flex items-center gap-3 p-4 bg-blue-50 border border-blue-200 rounded-lg ${className}` }, /* @__PURE__ */ React19.createElement("span", { className: "text-blue-600" }, "\u23F3"), /* @__PURE__ */ React19.createElement("div", null, /* @__PURE__ */ React19.createElement("p", { className: "text-sm font-medium text-blue-900" }, "Submitting form..."), showDetails && /* @__PURE__ */ React19.createElement("p", { className: "text-xs text-blue-700" }, "Please wait while we process your request.")));
+    return /* @__PURE__ */ React20.createElement(
+      "div",
+      {
+        className: `flex items-center gap-3 p-4 bg-blue-50 border border-blue-200 rounded-lg ${className}`
+      },
+      /* @__PURE__ */ React20.createElement("span", { className: "text-blue-600" }, "\u23F3"),
+      /* @__PURE__ */ React20.createElement("div", null, /* @__PURE__ */ React20.createElement("p", { className: "text-sm font-medium text-blue-900" }, "Submitting form..."), showDetails && /* @__PURE__ */ React20.createElement("p", { className: "text-xs text-blue-700" }, "Please wait while we process your request."))
+    );
   }
   if (isSuccess) {
-    return /* @__PURE__ */ React19.createElement("div", { className: `flex items-center gap-3 p-4 bg-green-50 border border-green-200 rounded-lg ${className}`, "data-testid": "success-message" }, /* @__PURE__ */ React19.createElement("span", { className: "text-green-600" }, "\u2705"), /* @__PURE__ */ React19.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React19.createElement("p", { className: "text-sm font-medium text-green-900" }, "Form submitted successfully!"), showDetails && submittedData && /* @__PURE__ */ React19.createElement("p", { className: "text-xs text-green-700" }, "Your data has been saved. Thank you for your submission.")), onDismiss && /* @__PURE__ */ React19.createElement(
-      Button4,
+    return /* @__PURE__ */ React20.createElement(
+      "div",
       {
-        size: "sm",
-        variant: "light",
-        isIconOnly: true,
-        onPress: onDismiss,
-        "aria-label": "Dismiss success message"
+        className: `flex items-center gap-3 p-4 bg-green-50 border border-green-200 rounded-lg ${className}`,
+        "data-testid": "success-message"
       },
-      "\u2715"
-    ));
+      /* @__PURE__ */ React20.createElement("span", { className: "text-green-600" }, "\u2705"),
+      /* @__PURE__ */ React20.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React20.createElement("p", { className: "text-sm font-medium text-green-900" }, "Form submitted successfully!"), showDetails && submittedData && /* @__PURE__ */ React20.createElement("p", { className: "text-xs text-green-700" }, "Your data has been saved. Thank you for your submission.")),
+      onDismiss && /* @__PURE__ */ React20.createElement(
+        Button5,
+        {
+          size: "sm",
+          variant: "light",
+          isIconOnly: true,
+          onPress: onDismiss,
+          "aria-label": "Dismiss success message"
+        },
+        "\u2715"
+      )
+    );
   }
   if (isError && error) {
-    return /* @__PURE__ */ React19.createElement("div", { className: `flex items-center gap-3 p-4 bg-red-50 border border-red-200 rounded-lg ${className}`, "data-testid": "error-message" }, /* @__PURE__ */ React19.createElement("span", { className: "text-red-600" }, "\u26A0\uFE0F"), /* @__PURE__ */ React19.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React19.createElement("p", { className: "text-sm font-medium text-red-900" }, "Error submitting form"), /* @__PURE__ */ React19.createElement("p", { className: "text-xs text-red-700" }, error)), onDismiss && /* @__PURE__ */ React19.createElement(
-      Button4,
+    return /* @__PURE__ */ React20.createElement(
+      "div",
       {
-        size: "sm",
-        variant: "light",
-        isIconOnly: true,
-        onPress: onDismiss,
-        "aria-label": "Dismiss error message"
+        className: `flex items-center gap-3 p-4 bg-red-50 border border-red-200 rounded-lg ${className}`,
+        "data-testid": "error-message"
       },
-      "\u2715"
-    ));
+      /* @__PURE__ */ React20.createElement("span", { className: "text-red-600" }, "\u26A0\uFE0F"),
+      /* @__PURE__ */ React20.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React20.createElement("p", { className: "text-sm font-medium text-red-900" }, "Error submitting form"), /* @__PURE__ */ React20.createElement("p", { className: "text-xs text-red-700" }, error)),
+      onDismiss && /* @__PURE__ */ React20.createElement(
+        Button5,
+        {
+          size: "sm",
+          variant: "light",
+          isIconOnly: true,
+          onPress: onDismiss,
+          "aria-label": "Dismiss error message"
+        },
+        "\u2715"
+      )
+    );
   }
   return null;
 }
 function FormToast({
-  state,
+  duration = 5e3,
   onDismiss,
   position = "top-right",
-  duration = 5e3
+  state
 }) {
-  const [isVisible, setIsVisible] = React19.useState(false);
-  React19.useEffect(() => {
+  const [isVisible, setIsVisible] = React20.useState(false);
+  React20.useEffect(() => {
     if (state.isSuccess || state.isError) {
       setIsVisible(true);
       if (duration > 0) {
@@ -1717,12 +2072,12 @@ function FormToast({
     return null;
   }
   const positionClasses = {
-    "top-right": "top-4 right-4",
-    "top-left": "top-4 left-4",
+    "bottom-left": "bottom-4 left-4",
     "bottom-right": "bottom-4 right-4",
-    "bottom-left": "bottom-4 left-4"
+    "top-left": "top-4 left-4",
+    "top-right": "top-4 right-4"
   };
-  return /* @__PURE__ */ React19.createElement("div", { className: `fixed z-50 ${positionClasses[position]}` }, /* @__PURE__ */ React19.createElement(FormStatus, { state, onDismiss }));
+  return /* @__PURE__ */ React20.createElement("div", { className: `fixed z-50 ${positionClasses[position]}` }, /* @__PURE__ */ React20.createElement(FormStatus, { state, onDismiss }));
 }
 
 // src/components/ZodForm.tsx
@@ -1730,7 +2085,6 @@ function ZodForm({
   className,
   columns = 1,
   config,
-  errorDisplay = "inline",
   layout = "vertical",
   onError,
   onSubmit,
@@ -1746,9 +2100,9 @@ function ZodForm({
 }) {
   const form = useZodForm(config);
   const enhancedState = useEnhancedFormState(form, {
-    onSuccess,
-    onError: (error) => onError?.({ message: error, field: "form" }),
     autoReset: true,
+    onError: (error) => onError?.({ field: "form", message: error }),
+    onSuccess,
     resetDelay: 3e3
   });
   const handleSubmit = async () => {
@@ -1758,7 +2112,8 @@ function ZodForm({
           await onSubmit(formData);
           enhancedState.handleSuccess(formData);
         },
-        (errors) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        (_errors) => {
           enhancedState.handleError("Please fix the validation errors above");
         }
       )();
@@ -1773,54 +2128,54 @@ function ZodForm({
   };
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React20.createElement(
+      return /* @__PURE__ */ React21.createElement(
         "div",
         {
           className: `grid gap-${spacing} ${columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}`
         },
-        config.fields.map((field2) => /* @__PURE__ */ React20.createElement(
+        config.fields.map((field2) => /* @__PURE__ */ React21.createElement(
           FormField,
           {
             key: field2.name,
             config: field2,
             form,
             submissionState: {
-              isSubmitting: enhancedState.isSubmitting,
+              error: enhancedState.error,
               isSubmitted: enhancedState.status !== "idle",
-              isSuccess: enhancedState.isSuccess,
-              error: enhancedState.error
+              isSubmitting: enhancedState.isSubmitting,
+              isSuccess: enhancedState.isSuccess
             }
           }
         ))
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React20.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field2) => /* @__PURE__ */ React20.createElement(
+      return /* @__PURE__ */ React21.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field2) => /* @__PURE__ */ React21.createElement(
         FormField,
         {
           key: field2.name,
           config: field2,
           form,
           submissionState: {
-            isSubmitting: enhancedState.isSubmitting,
+            error: enhancedState.error,
             isSubmitted: enhancedState.status !== "idle",
-            isSuccess: enhancedState.isSuccess,
-            error: enhancedState.error
+            isSubmitting: enhancedState.isSubmitting,
+            isSuccess: enhancedState.isSuccess
           }
         }
       )));
     }
-    return /* @__PURE__ */ React20.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field2) => /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React21.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field2) => /* @__PURE__ */ React21.createElement(
       FormField,
       {
         key: field2.name,
         config: field2,
         form,
         submissionState: {
-          isSubmitting: enhancedState.isSubmitting,
+          error: enhancedState.error,
           isSubmitted: enhancedState.status !== "idle",
-          isSuccess: enhancedState.isSuccess,
-          error: enhancedState.error
+          isSubmitting: enhancedState.isSubmitting,
+          isSuccess: enhancedState.isSuccess
         }
       }
     )));
@@ -1829,7 +2184,7 @@ function ZodForm({
     e.preventDefault();
     void handleSubmit();
   };
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (config.onError && Object.keys(form.formState.errors).length > 0) {
       config.onError(form.formState.errors);
     }
@@ -1844,15 +2199,15 @@ function ZodForm({
       values: form.getValues()
     });
   }
-  return /* @__PURE__ */ React20.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React20.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React20.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React20.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), /* @__PURE__ */ React21.createElement(
     FormStatus,
     {
       state: enhancedState,
       onDismiss: () => enhancedState.reset(),
       showDetails: true
     }
-  ), renderFields(), /* @__PURE__ */ React20.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React20.createElement(
-    Button5,
+  ), renderFields(), /* @__PURE__ */ React21.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React21.createElement(
+    Button6,
     {
       color: "primary",
       isDisabled: enhancedState.isSubmitting,
@@ -1861,8 +2216,8 @@ function ZodForm({
       ...submitButtonProps
     },
     enhancedState.isSuccess ? "Success!" : submitButtonText
-  ), showResetButton && /* @__PURE__ */ React20.createElement(
-    Button5,
+  ), showResetButton && /* @__PURE__ */ React21.createElement(
+    Button6,
     {
       isDisabled: enhancedState.isSubmitting,
       type: "button",
@@ -1883,10 +2238,10 @@ var BasicFormBuilder = class {
    */
   input(name, label, type = "text") {
     this.fields.push({
-      name,
+      inputProps: { type },
       label,
-      type: "input",
-      inputProps: { type }
+      name,
+      type: "input"
     });
     return this;
   }
@@ -1895,10 +2250,10 @@ var BasicFormBuilder = class {
    */
   textarea(name, label, placeholder) {
     this.fields.push({
-      name,
       label,
-      type: "textarea",
-      textareaProps: { placeholder }
+      name,
+      textareaProps: { placeholder },
+      type: "textarea"
     });
     return this;
   }
@@ -1907,10 +2262,10 @@ var BasicFormBuilder = class {
    */
   select(name, label, options) {
     this.fields.push({
-      name,
       label,
-      type: "select",
-      options
+      name,
+      options,
+      type: "select"
     });
     return this;
   }
@@ -1919,8 +2274,8 @@ var BasicFormBuilder = class {
    */
   checkbox(name, label) {
     this.fields.push({
-      name,
       label,
+      name,
       type: "checkbox"
     });
     return this;
@@ -1930,8 +2285,8 @@ var BasicFormBuilder = class {
    */
   switch(name, label) {
     this.fields.push({
-      name,
       label,
+      name,
       type: "switch"
     });
     return this;
@@ -1948,59 +2303,50 @@ function createBasicFormBuilder() {
 }
 var FormFieldHelpers = {
   /**
-   * Create an input field
+   * Create a checkbox field
    */
-  input: (name, label, type = "text") => ({
-    name,
+  checkbox: (name, label) => ({
     label,
-    type: "input",
-    inputProps: { type }
+    name,
+    type: "checkbox"
   }),
   /**
-   * Create a textarea field
+   * Create an input field
    */
-  textarea: (name, label, placeholder) => ({
-    name,
+  input: (name, label, type = "text") => ({
+    inputProps: { type },
     label,
-    type: "textarea",
-    textareaProps: { placeholder }
+    name,
+    type: "input"
   }),
   /**
    * Create a select field
    */
   select: (name, label, options) => ({
-    name,
     label,
-    type: "select",
-    options
-  }),
-  /**
-   * Create a checkbox field
-   */
-  checkbox: (name, label) => ({
     name,
-    label,
-    type: "checkbox"
+    options,
+    type: "select"
   }),
   /**
    * Create a switch field
    */
   switch: (name, label) => ({
-    name,
     label,
+    name,
     type: "switch"
+  }),
+  /**
+   * Create a textarea field
+   */
+  textarea: (name, label, placeholder) => ({
+    label,
+    name,
+    textareaProps: { placeholder },
+    type: "textarea"
   })
 };
 var CommonFields = {
-  /**
-   * Personal information fields
-   */
-  personal: () => [
-    FormFieldHelpers.input("firstName", "First Name"),
-    FormFieldHelpers.input("lastName", "Last Name"),
-    FormFieldHelpers.input("email", "Email", "email"),
-    FormFieldHelpers.input("phone", "Phone", "tel")
-  ],
   /**
    * Address fields
    */
@@ -2009,107 +2355,121 @@ var CommonFields = {
     FormFieldHelpers.input("city", "City"),
     FormFieldHelpers.input("state", "State/Province"),
     FormFieldHelpers.input("zipCode", "ZIP/Postal Code"),
-    FormFieldHelpers.select(
-      "country",
-      "Country",
-      [
-        { label: "Select a country", value: "" },
-        { label: "United States", value: "us" },
-        { label: "Canada", value: "ca" },
-        { label: "United Kingdom", value: "uk" },
-        { label: "Australia", value: "au" },
-        { label: "Germany", value: "de" },
-        { label: "France", value: "fr" }
-      ]
-    )
+    FormFieldHelpers.select("country", "Country", [
+      { label: "Select a country", value: "" },
+      { label: "United States", value: "us" },
+      { label: "Canada", value: "ca" },
+      { label: "United Kingdom", value: "uk" },
+      { label: "Australia", value: "au" },
+      { label: "Germany", value: "de" },
+      { label: "France", value: "fr" }
+    ])
+  ],
+  /**
+   * Personal information fields
+   */
+  personal: () => [
+    FormFieldHelpers.input("firstName", "First Name"),
+    FormFieldHelpers.input("lastName", "Last Name"),
+    FormFieldHelpers.input("email", "Email", "email"),
+    FormFieldHelpers.input("phone", "Phone", "tel")
   ],
   /**
    * Terms and conditions fields
    */
   terms: () => [
-    FormFieldHelpers.checkbox("terms", "I agree to the terms and conditions"),
-    FormFieldHelpers.checkbox("privacy", "I agree to the privacy policy"),
-    FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter")
+    FormFieldHelpers.checkbox(
+      "terms",
+      "I agree to the terms and conditions"
+    ),
+    FormFieldHelpers.checkbox(
+      "privacy",
+      "I agree to the privacy policy"
+    ),
+    FormFieldHelpers.checkbox(
+      "newsletter",
+      "Subscribe to newsletter"
+    )
   ]
 };
 
 // src/builders/AdvancedFormBuilder.ts
 function inputField(name, label, props) {
   return {
-    name,
     label,
+    name,
     type: "input",
     ...props && {
       inputProps: {
-        type: props.type || "text",
-        placeholder: props.placeholder,
+        className: props.className,
         description: props.description,
         disabled: props.isDisabled,
-        className: props.className
+        placeholder: props.placeholder,
+        type: props.type || "text"
       }
     }
   };
 }
 function textareaField(name, label, props) {
   return {
-    name,
     label,
+    name,
     type: "textarea",
     ...props && {
       textareaProps: {
-        placeholder: props.placeholder,
+        className: props.className,
         description: props.description,
         disabled: props.isDisabled,
-        className: props.className,
+        placeholder: props.placeholder,
         rows: props.rows
       }
     }
   };
 }
-function selectField(name, label, options, props) {
+function selectField(name, label, options) {
   return {
-    name,
     label,
-    type: "select",
-    options
+    name,
+    options,
+    type: "select"
   };
 }
 function checkboxField(name, label, props) {
   return {
-    name,
     label,
+    name,
     type: "checkbox",
     ...props && {
       checkboxProps: {
-        disabled: props.isDisabled,
-        className: props.className
+        className: props.className,
+        disabled: props.isDisabled
       }
     }
   };
 }
 function switchField(name, label, props) {
   return {
-    name,
     label,
+    name,
     type: "switch",
     ...props && {
       switchProps: {
-        disabled: props.isDisabled,
-        className: props.className
+        className: props.className,
+        disabled: props.isDisabled
       }
     }
   };
 }
 function radioField(name, label, options, props) {
   return {
-    name,
     label,
-    type: "radio",
+    name,
     radioOptions: options,
+    type: "radio",
     ...props && {
       radioProps: {
-        isDisabled: props.isDisabled,
         className: props.className,
+        isDisabled: props.isDisabled,
         orientation: props.orientation
       }
     }
@@ -2117,58 +2477,58 @@ function radioField(name, label, options, props) {
 }
 function sliderField(name, label, props) {
   return {
-    name,
     label,
+    name,
     type: "slider",
     ...props && {
       sliderProps: {
-        min: props.min || 0,
-        max: props.max || 100,
-        step: props.step || 1,
+        className: props.className || "",
         disabled: props.isDisabled || false,
-        className: props.className || ""
+        max: props.max || 100,
+        min: props.min || 0,
+        step: props.step || 1
       }
     }
   };
 }
 function dateField(name, label, props) {
   return {
-    name,
     label,
+    name,
     type: "date",
     ...props && {
       dateProps: {
-        placeholder: props.placeholder || "",
+        className: props.className || "",
         disabled: props.isDisabled || false,
-        className: props.className || ""
+        placeholder: props.placeholder || ""
       }
     }
   };
 }
 function fileField(name, label, props) {
   return {
-    name,
     label,
+    name,
     type: "file",
     ...props && {
       fileProps: {
         accept: props.accept || "",
-        multiple: props.multiple || false,
+        className: props.className || "",
         disabled: props.isDisabled || false,
-        className: props.className || ""
+        multiple: props.multiple || false
       }
     }
   };
 }
 function fontPickerField(name, label, props) {
   return {
-    name,
     label,
+    name,
     type: "fontPicker",
     ...props && {
       fontPickerProps: {
-        disabled: props.isDisabled || false,
-        className: props.className || ""
+        className: props.className || "",
+        disabled: props.isDisabled || false
       }
     }
   };
@@ -2180,7 +2540,7 @@ function createField(type, name, label, optionsOrProps, props) {
     case "textarea":
       return textareaField(name, label, optionsOrProps);
     case "select":
-      return selectField(name, label, optionsOrProps, props);
+      return selectField(name, label, optionsOrProps);
     case "checkbox":
       return checkboxField(name, label, optionsOrProps);
     case "switch":
@@ -2212,10 +2572,10 @@ var AdvancedFieldBuilder = class {
    */
   conditionalField(name, condition, field2) {
     this.fields.push({
-      name,
-      type: "conditional",
       condition,
-      field: field2
+      field: field2,
+      name,
+      type: "conditional"
     });
     return this;
   }
@@ -2224,14 +2584,14 @@ var AdvancedFieldBuilder = class {
    */
   fieldArray(name, label, fields, options) {
     this.fields.push({
-      name,
-      label,
-      type: "fieldArray",
+      addButtonText: options?.addButtonText,
       fields,
-      min: options?.min,
+      label,
       max: options?.max,
-      addButtonText: options?.addButtonText,
-      removeButtonText: options?.removeButtonText
+      min: options?.min,
+      name,
+      removeButtonText: options?.removeButtonText,
+      type: "fieldArray"
     });
     return this;
   }
@@ -2240,12 +2600,12 @@ var AdvancedFieldBuilder = class {
    */
   dynamicSection(name, condition, fields, options) {
     this.fields.push({
-      name,
-      type: "dynamicSection",
       condition,
+      description: options?.description,
       fields,
+      name,
       title: options?.title,
-      description: options?.description
+      type: "dynamicSection"
     });
     return this;
   }
@@ -2281,7 +2641,13 @@ var FieldArrayBuilder = class {
   }
   field(type, name, label, optionsOrProps, props) {
     const fullPath = `${this.arrayName}.${name}`;
-    const fieldConfig = createField(type, fullPath, label, optionsOrProps, props);
+    const fieldConfig = createField(
+      type,
+      fullPath,
+      label,
+      optionsOrProps,
+      props
+    );
     this.fields.push(fieldConfig);
     return this;
   }
@@ -2307,17 +2673,29 @@ var TypeInferredBuilder = class {
    * Add a text field
    */
   text(name, label, options) {
-    const { minLength, maxLength, pattern, ...fieldOptions } = options || {};
+    const { maxLength, minLength, pattern, ...fieldOptions } = options || {};
     let zodType = z3.string();
-    if (minLength) zodType = zodType.min(minLength, `${label} must be at least ${minLength} characters`);
-    if (maxLength) zodType = zodType.max(maxLength, `${label} must be no more than ${maxLength} characters`);
-    if (pattern) zodType = zodType.regex(new RegExp(pattern), `${label} format is invalid`);
+    if (minLength)
+      zodType = zodType.min(
+        minLength,
+        `${label} must be at least ${minLength} characters`
+      );
+    if (maxLength)
+      zodType = zodType.max(
+        maxLength,
+        `${label} must be no more than ${maxLength} characters`
+      );
+    if (pattern)
+      zodType = zodType.regex(
+        new RegExp(pattern),
+        `${label} format is invalid`
+      );
     this.schemaFields[name] = zodType;
     this.formFields.push({
-      name,
+      inputProps: { type: "text", ...fieldOptions },
       label,
-      type: "input",
-      inputProps: { type: "text", ...fieldOptions }
+      name,
+      type: "input"
     });
     return this;
   }
@@ -2327,10 +2705,10 @@ var TypeInferredBuilder = class {
   email(name, label, options) {
     this.schemaFields[name] = z3.string().email(`Please enter a valid email address`);
     this.formFields.push({
-      name,
+      inputProps: { type: "email", ...options },
       label,
-      type: "input",
-      inputProps: { type: "email", ...options }
+      name,
+      type: "input"
     });
     return this;
   }
@@ -2338,16 +2716,18 @@ var TypeInferredBuilder = class {
    * Add a number field
    */
   number(name, label, options) {
-    const { min, max, step, ...fieldOptions } = options || {};
+    const { max, min, step, ...fieldOptions } = options || {};
     let zodType = z3.number();
-    if (min !== void 0) zodType = zodType.min(min, `${label} must be at least ${min}`);
-    if (max !== void 0) zodType = zodType.max(max, `${label} must be no more than ${max}`);
+    if (min !== void 0)
+      zodType = zodType.min(min, `${label} must be at least ${min}`);
+    if (max !== void 0)
+      zodType = zodType.max(max, `${label} must be no more than ${max}`);
     this.schemaFields[name] = zodType;
     this.formFields.push({
-      name,
+      inputProps: { max, min, step, type: "number", ...fieldOptions },
       label,
-      type: "input",
-      inputProps: { type: "number", min, max, step, ...fieldOptions }
+      name,
+      type: "input"
     });
     return this;
   }
@@ -2357,26 +2737,30 @@ var TypeInferredBuilder = class {
   textarea(name, label, options) {
     const { minLength, ...fieldOptions } = options || {};
     let zodType = z3.string();
-    if (minLength) zodType = zodType.min(minLength, `${label} must be at least ${minLength} characters`);
+    if (minLength)
+      zodType = zodType.min(
+        minLength,
+        `${label} must be at least ${minLength} characters`
+      );
     this.schemaFields[name] = zodType;
     this.formFields.push({
-      name,
       label,
-      type: "textarea",
-      textareaProps: fieldOptions
+      name,
+      textareaProps: fieldOptions,
+      type: "textarea"
     });
     return this;
   }
   /**
    * Add a select field
    */
-  select(name, label, options, fieldOptions) {
+  select(name, label, options) {
     this.schemaFields[name] = z3.string().min(1, `Please select a ${label.toLowerCase()}`);
     this.formFields.push({
-      name,
       label,
-      type: "select",
-      options
+      name,
+      options,
+      type: "select"
     });
     return this;
   }
@@ -2387,14 +2771,17 @@ var TypeInferredBuilder = class {
     const { required = false, ...fieldOptions } = options || {};
     let zodType = z3.boolean();
     if (required) {
-      zodType = zodType.refine((val) => val === true, `You must agree to ${label.toLowerCase()}`);
+      zodType = zodType.refine(
+        (val) => val === true,
+        `You must agree to ${label.toLowerCase()}`
+      );
     }
     this.schemaFields[name] = zodType;
     this.formFields.push({
-      name,
+      checkboxProps: fieldOptions,
       label,
-      type: "checkbox",
-      checkboxProps: fieldOptions
+      name,
+      type: "checkbox"
     });
     return this;
   }
@@ -2404,10 +2791,10 @@ var TypeInferredBuilder = class {
   switch(name, label, options) {
     this.schemaFields[name] = z3.boolean().optional();
     this.formFields.push({
-      name,
       label,
-      type: "switch",
-      switchProps: options
+      name,
+      switchProps: options,
+      type: "switch"
     });
     return this;
   }
@@ -2417,11 +2804,11 @@ var TypeInferredBuilder = class {
   radio(name, label, options, fieldOptions) {
     this.schemaFields[name] = z3.string().min(1, `Please select a ${label.toLowerCase()}`);
     this.formFields.push({
-      name,
       label,
-      type: "radio",
+      name,
       radioOptions: options,
-      radioProps: fieldOptions
+      radioProps: fieldOptions,
+      type: "radio"
     });
     return this;
   }
@@ -2429,16 +2816,18 @@ var TypeInferredBuilder = class {
    * Add a slider field
    */
   slider(name, label, options) {
-    const { min = 0, max = 100, step = 1, ...fieldOptions } = options || {};
+    const { max = 100, min = 0, step = 1, ...fieldOptions } = options || {};
     let zodType = z3.number();
-    if (min !== void 0) zodType = zodType.min(min, `${label} must be at least ${min}`);
-    if (max !== void 0) zodType = zodType.max(max, `${label} must be no more than ${max}`);
+    if (min !== void 0)
+      zodType = zodType.min(min, `${label} must be at least ${min}`);
+    if (max !== void 0)
+      zodType = zodType.max(max, `${label} must be no more than ${max}`);
     this.schemaFields[name] = zodType;
     this.formFields.push({
-      name,
       label,
-      type: "slider",
-      sliderProps: { min, max, step, ...fieldOptions }
+      name,
+      sliderProps: { max, min, step, ...fieldOptions },
+      type: "slider"
     });
     return this;
   }
@@ -2448,10 +2837,10 @@ var TypeInferredBuilder = class {
   date(name, label, options) {
     this.schemaFields[name] = z3.string().min(1, `${label} is required`);
     this.formFields.push({
-      name,
+      dateProps: options,
       label,
-      type: "date",
-      dateProps: options
+      name,
+      type: "date"
     });
     return this;
   }
@@ -2461,10 +2850,10 @@ var TypeInferredBuilder = class {
   file(name, label, options) {
     this.schemaFields[name] = z3.any().optional();
     this.formFields.push({
-      name,
+      fileProps: options,
       label,
-      type: "file",
-      fileProps: options
+      name,
+      type: "file"
     });
     return this;
   }
@@ -2473,8 +2862,8 @@ var TypeInferredBuilder = class {
    */
   build() {
     return {
-      schema: z3.object(this.schemaFields),
-      fields: this.formFields
+      fields: this.formFields,
+      schema: z3.object(this.schemaFields)
     };
   }
 };
@@ -2487,49 +2876,49 @@ function defineInferredForm(fieldDefinitions) {
   return builder.build();
 }
 var field = {
-  text: (name, label, options) => {
+  checkbox: (name, label, options) => {
     const builder = new TypeInferredBuilder();
-    return builder.text(name, label, options);
+    return builder.checkbox(name, label, options);
+  },
+  date: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.date(name, label, options);
   },
   email: (name, label, options) => {
     const builder = new TypeInferredBuilder();
     return builder.email(name, label, options);
   },
+  file: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.file(name, label, options);
+  },
   number: (name, label, options) => {
     const builder = new TypeInferredBuilder();
     return builder.number(name, label, options);
   },
-  textarea: (name, label, options) => {
+  radio: (name, label, options, fieldOptions) => {
     const builder = new TypeInferredBuilder();
-    return builder.textarea(name, label, options);
+    return builder.radio(name, label, options, fieldOptions);
   },
-  select: (name, label, options, fieldOptions) => {
+  select: (name, label, options) => {
     const builder = new TypeInferredBuilder();
-    return builder.select(name, label, options, fieldOptions);
+    return builder.select(name, label, options);
   },
-  checkbox: (name, label, options) => {
+  slider: (name, label, options) => {
     const builder = new TypeInferredBuilder();
-    return builder.checkbox(name, label, options);
+    return builder.slider(name, label, options);
   },
   switch: (name, label, options) => {
     const builder = new TypeInferredBuilder();
     return builder.switch(name, label, options);
   },
-  radio: (name, label, options, fieldOptions) => {
-    const builder = new TypeInferredBuilder();
-    return builder.radio(name, label, options, fieldOptions);
-  },
-  slider: (name, label, options) => {
-    const builder = new TypeInferredBuilder();
-    return builder.slider(name, label, options);
-  },
-  date: (name, label, options) => {
+  text: (name, label, options) => {
     const builder = new TypeInferredBuilder();
-    return builder.date(name, label, options);
+    return builder.text(name, label, options);
   },
-  file: (name, label, options) => {
+  textarea: (name, label, options) => {
     const builder = new TypeInferredBuilder();
-    return builder.file(name, label, options);
+    return builder.textarea(name, label, options);
   }
 };
 
@@ -2558,8 +2947,8 @@ var NestedPathBuilder = class {
    */
   field(name, label, type = "input", props) {
     this.fields.push({
-      name,
       label,
+      name,
       type,
       ...props
     });
@@ -2572,8 +2961,8 @@ var NestedPathBuilder = class {
   fieldPath(path, label, type = "input", props) {
     const name = path.join(".");
     this.fields.push({
-      name,
       label,
+      name,
       type,
       ...props
     });
@@ -2583,7 +2972,7 @@ var NestedPathBuilder = class {
    * Add a field with template literal path
    * Usage: builder.field`user.profile.name`("Full Name")
    */
-  fieldTemplate(path, ...args) {
+  fieldTemplate(path) {
     const pathString = path[0];
     return new FieldTemplateBuilder(this, pathString);
   }
@@ -2608,8 +2997,8 @@ var NestedObjectBuilder = class _NestedObjectBuilder {
   field(fieldName, label, type = "input", props) {
     const fullPath = `${this.path}.${fieldName}`;
     this.parent.fields.push({
-      name: fullPath,
       label,
+      name: fullPath,
       type,
       ...props
     });
@@ -2619,7 +3008,10 @@ var NestedObjectBuilder = class _NestedObjectBuilder {
    * Nest deeper into the object
    */
   nest(subPath) {
-    return new _NestedObjectBuilder(this.parent, `${this.path}.${subPath}`);
+    return new _NestedObjectBuilder(
+      this.parent,
+      `${this.path}.${subPath}`
+    );
   }
   /**
    * Return to the parent builder
@@ -2639,8 +3031,8 @@ var SectionBuilder = class {
   field(fieldName, label, type = "input", props) {
     const fullPath = `${this.path}.${fieldName}`;
     this.parent.fields.push({
-      name: fullPath,
       label,
+      name: fullPath,
       type,
       ...props
     });
@@ -2659,7 +3051,10 @@ var SectionBuilder = class {
    * Nest deeper into the section
    */
   nest(subPath) {
-    return new NestedObjectBuilder(this.parent, `${this.path}.${subPath}`);
+    return new NestedObjectBuilder(
+      this.parent,
+      `${this.path}.${subPath}`
+    );
   }
   /**
    * Return to the parent builder
@@ -2678,8 +3073,8 @@ var FieldTemplateBuilder = class {
    */
   complete(label, type = "input", props) {
     this.parent.fields.push({
-      name: this.path,
       label,
+      name: this.path,
       type,
       ...props
     });
@@ -2693,8 +3088,10 @@ function createNestedPathBuilder() {
 // src/hooks/useDebouncedValidation.ts
 import { useCallback as useCallback2, useEffect as useEffect2, useRef } from "react";
 function useDebouncedValidation(form, options = {}) {
-  const { delay = 300, fields, enabled = true } = options;
-  const timeoutRef = useRef(void 0);
+  const { delay = 300, enabled = true, fields } = options;
+  const timeoutRef = useRef(
+    void 0
+  );
   const lastValuesRef = useRef({});
   const debouncedTrigger = useCallback2(() => {
     if (!enabled) return;
@@ -2705,7 +3102,9 @@ function useDebouncedValidation(form, options = {}) {
     timeoutRef.current = setTimeout(async () => {
       const currentValues = form.getValues();
       const lastValues = lastValuesRef.current;
-      const hasChanges = fields ? fields.some((field2) => currentValues[field2] !== lastValues[field2]) : Object.keys(currentValues).some((key) => currentValues[key] !== lastValues[key]);
+      const hasChanges = fields ? fields.some((field2) => currentValues[field2] !== lastValues[field2]) : Object.keys(currentValues).some(
+        (key) => currentValues[key] !== lastValues[key]
+      );
       if (hasChanges) {
         lastValuesRef.current = { ...currentValues };
         if (fields && fields.length > 0) {
@@ -2736,7 +3135,9 @@ function useDebouncedValidation(form, options = {}) {
 }
 function useDebouncedFieldValidation(form, fieldName, options = {}) {
   const { delay = 300, enabled = true } = options;
-  const timeoutRef = useRef(void 0);
+  const timeoutRef = useRef(
+    void 0
+  );
   const debouncedFieldTrigger = useCallback2(() => {
     if (!enabled) return;
     if (timeoutRef.current) {
@@ -2770,20 +3171,20 @@ try {
 function useInferredForm(schema, fields, options = {}) {
   const {
     defaultValues,
+    delayError = 0,
     mode = "onChange",
     reValidateMode = "onChange",
     shouldFocusError = true,
-    shouldUnregister = false,
-    delayError = 0
+    shouldUnregister = false
   } = options;
   return useForm3({
-    resolver: zodResolver ? zodResolver(schema) : void 0,
     defaultValues,
+    delayError,
     mode,
+    resolver: zodResolver ? zodResolver(schema) : void 0,
     reValidateMode,
     shouldFocusError,
-    shouldUnregister,
-    delayError
+    shouldUnregister
   });
 }
 function useTypeInferredForm(formConfig, options = {}) {
@@ -2876,7 +3277,7 @@ function usePerformanceMonitor(componentName, enabled = process.env.NODE_ENV ===
   };
 }
 function createOptimizedFieldHandler(onChange, options = {}) {
-  const { debounce: debounceMs, throttle: throttleMs, validate = false } = options;
+  const { debounce: debounceMs, throttle: throttleMs } = options;
   let handler = onChange;
   if (throttleMs) {
     handler = throttle(handler, throttleMs);
@@ -2889,70 +3290,51 @@ function createOptimizedFieldHandler(onChange, options = {}) {
 function useMemoizedFieldProps(props, deps) {
   return useMemo2(() => props, deps);
 }
-function useBatchedFieldUpdates(form, fields) {
-  const batchRef = useRef2({});
-  const timeoutRef = useRef2(void 0);
-  const batchUpdate = useCallback3((fieldName, value) => {
-    batchRef.current[fieldName] = value;
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(() => {
-      Object.entries(batchRef.current).forEach(([key, val]) => {
-        form.setValue(key, val);
-      });
-      batchRef.current = {};
-    }, 16);
-  }, [form]);
-  return { batchUpdate };
-}
 
 // src/builders/validation-helpers.ts
 import { z as z4 } from "zod";
 var validationPatterns = {
-  // Email validation
-  email: z4.string().email("Please enter a valid email address"),
-  // Phone number validation (US format)
-  phoneUS: z4.string().regex(
-    /^\(\d{3}\) \d{3}-\d{4}$/,
-    "Please enter a valid phone number (XXX) XXX-XXXX"
-  ),
-  // Phone number validation (international)
-  phoneInternational: z4.string().regex(
-    /^\+?[\d\s\-\(\)]+$/,
-    "Please enter a valid phone number"
-  ),
-  // URL validation
-  url: z4.string().url("Please enter a valid URL"),
-  // Password validation
-  password: z4.string().min(8, "Password must be at least 8 characters").regex(/[A-Z]/, "Password must contain at least one uppercase letter").regex(/[a-z]/, "Password must contain at least one lowercase letter").regex(/[0-9]/, "Password must contain at least one number").regex(/[^A-Za-z0-9]/, "Password must contain at least one special character"),
-  // Strong password validation
-  strongPassword: z4.string().min(12, "Password must be at least 12 characters").regex(/[A-Z]/, "Password must contain at least one uppercase letter").regex(/[a-z]/, "Password must contain at least one lowercase letter").regex(/[0-9]/, "Password must contain at least one number").regex(/[^A-Za-z0-9]/, "Password must contain at least one special character"),
   // Credit card validation
   creditCard: z4.string().regex(
+    // eslint-disable-next-line no-useless-escape
     /^[0-9]{4}[\s\-]?[0-9]{4}[\s\-]?[0-9]{4}[\s\-]?[0-9]{4}$/,
     "Please enter a valid credit card number"
   ),
-  // SSN validation
-  ssn: z4.string().regex(
-    /^\d{3}-\d{2}-\d{4}$/,
-    "Please enter a valid SSN (XXX-XX-XXXX)"
-  ),
-  // ZIP code validation
-  zipCode: z4.string().regex(
-    /^\d{5}(-\d{4})?$/,
-    "Please enter a valid ZIP code"
-  ),
   // Date validation (MM/DD/YYYY)
   date: z4.string().regex(
     /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/,
     "Please enter a valid date (MM/DD/YYYY)"
   ),
+  // Email validation
+  email: z4.string().email("Please enter a valid email address"),
+  // Password validation
+  password: z4.string().min(8, "Password must be at least 8 characters").regex(/[A-Z]/, "Password must contain at least one uppercase letter").regex(/[a-z]/, "Password must contain at least one lowercase letter").regex(/[0-9]/, "Password must contain at least one number").regex(
+    /[^A-Za-z0-9]/,
+    "Password must contain at least one special character"
+  ),
+  // Phone number validation (international)
+  phoneInternational: z4.string().regex(/^\+?[\d\s\-\(\)]+$/, "Please enter a valid phone number"),
+  // Phone number validation (US format)
+  phoneUS: z4.string().regex(
+    /^\(\d{3}\) \d{3}-\d{4}$/,
+    "Please enter a valid phone number (XXX) XXX-XXXX"
+  ),
+  // SSN validation
+  ssn: z4.string().regex(/^\d{3}-\d{2}-\d{4}$/, "Please enter a valid SSN (XXX-XX-XXXX)"),
+  // Strong password validation
+  strongPassword: z4.string().min(12, "Password must be at least 12 characters").regex(/[A-Z]/, "Password must contain at least one uppercase letter").regex(/[a-z]/, "Password must contain at least one lowercase letter").regex(/[0-9]/, "Password must contain at least one number").regex(
+    /[^A-Za-z0-9]/,
+    "Password must contain at least one special character"
+  ),
   // Time validation (HH:MM AM/PM)
   time: z4.string().regex(
     /^(0[1-9]|1[0-2]):[0-5][0-9] (AM|PM)$/i,
     "Please enter a valid time (HH:MM AM/PM)"
-  )
+  ),
+  // URL validation
+  url: z4.string().url("Please enter a valid URL"),
+  // ZIP code validation
+  zipCode: z4.string().regex(/^\d{5}(-\d{4})?$/, "Please enter a valid ZIP code")
 };
 var asyncValidation = {
   /**
@@ -2979,17 +3361,17 @@ var asyncValidation = {
   }
 };
 var errorMessages = {
-  required: (fieldName) => `${fieldName} is required`,
-  minLength: (fieldName, min) => `${fieldName} must be at least ${min} characters`,
+  date: () => "Please enter a valid date",
+  email: () => "Please enter a valid email address",
+  max: (fieldName, max) => `${fieldName} must be no more than ${max}`,
   maxLength: (fieldName, max) => `${fieldName} must be no more than ${max} characters`,
   min: (fieldName, min) => `${fieldName} must be at least ${min}`,
-  max: (fieldName, max) => `${fieldName} must be no more than ${max}`,
+  minLength: (fieldName, min) => `${fieldName} must be at least ${min} characters`,
   pattern: (fieldName) => `${fieldName} format is invalid`,
-  email: () => "Please enter a valid email address",
-  url: () => "Please enter a valid URL",
   phone: () => "Please enter a valid phone number",
-  date: () => "Please enter a valid date",
-  time: () => "Please enter a valid time"
+  required: (fieldName) => `${fieldName} is required`,
+  time: () => "Please enter a valid time",
+  url: () => "Please enter a valid URL"
 };
 var serverValidation = {
   /**
@@ -2998,8 +3380,8 @@ var serverValidation = {
   applyServerErrors: (errors, setError) => {
     Object.entries(errors).forEach(([field2, messages]) => {
       setError(field2, {
-        type: "server",
-        message: messages[0]
+        message: messages[0],
+        type: "server"
         // Use first error message
       });
     });
@@ -3024,13 +3406,25 @@ var validationUtils = {
       timeoutId = setTimeout(() => fn(...args), delay);
     };
   },
+  /**
+   * Get field error message
+   */
+  getFieldError: (errors, field2) => {
+    return errors[field2];
+  },
+  /**
+   * Check if field has error
+   */
+  hasFieldError: (errors, field2) => {
+    return !!errors[field2];
+  },
   /**
    * Validate form data against schema
    */
   validateForm: async (data, schema) => {
     try {
       await schema.parseAsync(data);
-      return { success: true, errors: {} };
+      return { errors: {}, success: true };
     } catch (error) {
       if (error instanceof z4.ZodError) {
         const errors = {};
@@ -3038,22 +3432,10 @@ var validationUtils = {
           const path = err.path.join(".");
           errors[path] = err.message;
         });
-        return { success: false, errors };
+        return { errors, success: false };
       }
       throw error;
     }
-  },
-  /**
-   * Get field error message
-   */
-  getFieldError: (errors, field2) => {
-    return errors[field2];
-  },
-  /**
-   * Check if field has error
-   */
-  hasFieldError: (errors, field2) => {
-    return !!errors[field2];
   }
 };
 export {
@@ -3079,6 +3461,7 @@ export {
   InputField,
   RadioGroupField,
   SelectField,
+  ServerActionForm,
   SliderField,
   SubmitButton,
   SwitchField,
@@ -3090,8 +3473,6 @@ export {
   commonValidations,
   createAdvancedBuilder,
   createBasicFormBuilder,
-  createConditionalSchema,
-  createConfirmPasswordSchema,
   createDateSchema,
   createEmailSchema,
   createField,
@@ -3130,7 +3511,6 @@ export {
   simulateFieldInput,
   simulateFormSubmission,
   throttle,
-  useBatchedFieldUpdates,
   useDebouncedFieldValidation,
   useDebouncedValidation,
   useEnhancedFormState,