@rachelallyson/hero-hook-form 1.2.0 → 2.1.0

package/dist/index.js

@@ -1,6 +1,13 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
 // src/components/Form.tsx
-import React13 from "react";
-import { Button as Button2 } from "@heroui/react";
+import React16 from "react";
+import { Button as Button3 } from "@heroui/react";
 
 // src/hooks/useFormHelper.ts
 import { useState } from "react";
@@ -68,8 +75,8 @@ function useFormHelper({
 }
 
 // src/components/FormField.tsx
-import React12 from "react";
-import { useWatch } from "react-hook-form";
+import React15 from "react";
+import { useWatch as useWatch3 } from "react-hook-form";
 
 // src/fields/CheckboxField.tsx
 import React2 from "react";
@@ -191,16 +198,16 @@ function CheckboxField(props) {
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React2.createElement("div", { className }, /* @__PURE__ */ React2.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React2.createElement("div", { className }, /* @__PURE__ */ React2.createElement(
         Checkbox,
         {
           ...defaults.checkbox,
           ...checkboxProps,
           isDisabled,
           isInvalid: Boolean(fieldState.error),
-          isSelected: Boolean(field.value),
-          onBlur: field.onBlur,
-          onValueChange: (val) => field.onChange(val)
+          isSelected: Boolean(field2.value),
+          onBlur: field2.onBlur,
+          onValueChange: (val) => field2.onChange(val)
         },
         label
       ), description ? /* @__PURE__ */ React2.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React2.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
@@ -209,13 +216,43 @@ function CheckboxField(props) {
   );
 }
 
-// src/fields/DateField.tsx
+// src/fields/ConditionalField.tsx
 import React3 from "react";
+import { useWatch, useFormContext } from "react-hook-form";
+function ConditionalField({
+  className,
+  config,
+  control
+}) {
+  const { condition, field: field2 } = config;
+  const form = useFormContext();
+  const formValues = useWatch({ control });
+  const shouldShow = condition(formValues);
+  if (!shouldShow) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement("div", { className }, /* @__PURE__ */ React3.createElement(
+    FormField,
+    {
+      config: field2,
+      form,
+      submissionState: {
+        error: void 0,
+        isSubmitted: false,
+        isSubmitting: false,
+        isSuccess: false
+      }
+    }
+  ));
+}
+
+// src/fields/DateField.tsx
+import React4 from "react";
 import { Controller as Controller2 } from "react-hook-form";
 function CoercedDateInput(props) {
-  const { dateProps, description, disabled, errorMessage, field, label } = props;
+  const { dateProps, description, disabled, errorMessage, field: field2, label } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     DateInput,
     {
       ...defaults.dateInput,
@@ -225,9 +262,9 @@ function CoercedDateInput(props) {
       isDisabled: disabled,
       isInvalid: Boolean(errorMessage),
       label,
-      value: field.value ?? null,
-      onBlur: field.onBlur,
-      onChange: field.onChange
+      value: field2.value ?? null,
+      onBlur: field2.onBlur,
+      onChange: field2.onChange
     }
   );
 }
@@ -243,12 +280,12 @@ function DateField(props) {
     rules,
     transform
   } = props;
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     Controller2,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React3.createElement("div", { className }, /* @__PURE__ */ React3.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React4.createElement("div", { className }, /* @__PURE__ */ React4.createElement(
         CoercedDateInput,
         {
           dateProps,
@@ -256,8 +293,8 @@ function DateField(props) {
           disabled: isDisabled,
           errorMessage: fieldState.error?.message,
           field: {
-            ...field,
-            onChange: (value) => field.onChange(transform ? transform(value) : value)
+            ...field2,
+            onChange: (value) => field2.onChange(transform ? transform(value) : value)
           },
           label
         }
@@ -267,8 +304,144 @@ function DateField(props) {
   );
 }
 
+// src/fields/DynamicSectionField.tsx
+import React5 from "react";
+import { useWatch as useWatch2, useFormContext as useFormContext2 } from "react-hook-form";
+function DynamicSectionField({
+  className,
+  config,
+  control
+}) {
+  const { condition, description, fields, title } = config;
+  const form = useFormContext2();
+  const formValues = useWatch2({ control });
+  const shouldShow = condition(formValues);
+  if (!shouldShow) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement("div", { className }, (title || description) && /* @__PURE__ */ React5.createElement("div", { className: "mb-6" }, title && /* @__PURE__ */ React5.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-2" }, title), description && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-gray-600" }, description)), /* @__PURE__ */ React5.createElement("div", { className: "space-y-4" }, fields.map((fieldConfig, index) => /* @__PURE__ */ React5.createElement(
+    FormField,
+    {
+      key: `${fieldConfig.name}-${index}`,
+      config: fieldConfig,
+      form,
+      submissionState: {
+        error: void 0,
+        isSubmitted: false,
+        isSubmitting: false,
+        isSuccess: false
+      }
+    }
+  ))));
+}
+
+// src/fields/FieldArrayField.tsx
+import React6 from "react";
+import { useFieldArray, useFormContext as useFormContext3 } from "react-hook-form";
+import { Button as Button2 } from "@heroui/react";
+function FieldArrayField({
+  className,
+  config
+}) {
+  const {
+    addButtonText = "Add Item",
+    fields: fieldConfigs,
+    max = 10,
+    min = 0,
+    name,
+    removeButtonText = "Remove"
+  } = config;
+  const form = useFormContext3();
+  if (!form || !form.control) {
+    return null;
+  }
+  const { control } = form;
+  const { append, fields, remove } = useFieldArray({
+    control,
+    name
+    // FieldArray name
+  });
+  const canAdd = fields.length < max;
+  const canRemove = fields.length > min;
+  const handleAdd = () => {
+    if (canAdd) {
+      const defaultValues = fieldConfigs.reduce((acc, fieldConfig) => {
+        const fieldName = fieldConfig.name;
+        if (fieldConfig.type === "checkbox" || fieldConfig.type === "switch") {
+          acc[fieldName] = false;
+        } else if (fieldConfig.type === "slider") {
+          acc[fieldName] = 0;
+        } else {
+          acc[fieldName] = "";
+        }
+        return acc;
+      }, {});
+      append(defaultValues);
+    }
+  };
+  const handleRemove = (index) => {
+    if (canRemove) {
+      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,
+      {
+        size: "sm",
+        variant: "light",
+        color: "danger",
+        startContent: "\u{1F5D1}\uFE0F",
+        onPress: () => handleRemove(index),
+        "aria-label": `${removeButtonText} ${config.label} ${index + 1}`
+      },
+      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(
+    Button2,
+    {
+      variant: "bordered",
+      startContent: "\u2795",
+      onPress: handleAdd,
+      className: "w-full"
+    },
+    addButtonText
+  ), fields.length === 0 && /* @__PURE__ */ React6.createElement("div", { className: "text-center py-8 text-gray-500" }, /* @__PURE__ */ React6.createElement("p", null, "No ", config.label?.toLowerCase(), " added yet."), /* @__PURE__ */ React6.createElement(
+    Button2,
+    {
+      variant: "bordered",
+      startContent: "\u2795",
+      onPress: handleAdd,
+      className: "mt-2"
+    },
+    addButtonText
+  ))));
+}
+
 // src/fields/FileField.tsx
-import React4 from "react";
+import React7 from "react";
 import { Controller as Controller3 } from "react-hook-form";
 function CoercedFileInput(props) {
   const {
@@ -276,13 +449,13 @@ function CoercedFileInput(props) {
     description,
     disabled,
     errorMessage,
-    field,
+    field: field2,
     fileProps,
     label,
     multiple
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React7.createElement(
     Input,
     {
       ...defaults.input,
@@ -295,11 +468,11 @@ function CoercedFileInput(props) {
       label,
       multiple,
       type: "file",
-      value: field.value ? "" : "",
-      onBlur: field.onBlur,
+      value: field2.value ? "" : "",
+      onBlur: field2.onBlur,
       onChange: (e) => {
         const target = e.target;
-        field.onChange(target.files);
+        field2.onChange(target.files);
       }
     }
   );
@@ -318,12 +491,12 @@ function FileField(props) {
     rules,
     transform
   } = props;
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React7.createElement(
     Controller3,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React4.createElement("div", { className }, /* @__PURE__ */ React4.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React7.createElement("div", { className }, /* @__PURE__ */ React7.createElement(
         CoercedFileInput,
         {
           accept,
@@ -331,8 +504,8 @@ function FileField(props) {
           disabled: isDisabled,
           errorMessage: fieldState.error?.message,
           field: {
-            ...field,
-            onChange: (value) => field.onChange(transform ? transform(value) : value)
+            ...field2,
+            onChange: (value) => field2.onChange(transform ? transform(value) : value)
           },
           fileProps,
           label,
@@ -345,7 +518,7 @@ function FileField(props) {
 }
 
 // src/fields/FontPickerField.tsx
-import React5 from "react";
+import React8 from "react";
 import { Controller as Controller4 } from "react-hook-form";
 var FontPickerComponent = null;
 var fontPickerLoaded = false;
@@ -362,17 +535,17 @@ function FontPickerField(props) {
     name,
     rules
   } = props;
-  const [fontPickerState, setFontPickerState] = React5.useState({
+  const [fontPickerState, setFontPickerState] = React8.useState({
     component: FontPickerComponent,
-    loading: false,
-    error: null
+    error: null,
+    loading: false
   });
-  React5.useEffect(() => {
+  React8.useEffect(() => {
     if (fontPickerLoaded && FontPickerComponent) {
       setFontPickerState({
         component: FontPickerComponent,
-        loading: false,
-        error: null
+        error: null,
+        loading: false
       });
       return;
     }
@@ -382,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
           });
         }
       };
@@ -406,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;
@@ -425,23 +598,23 @@ function FontPickerField(props) {
     void loadFontPicker();
   }, []);
   if (fontPickerState.loading) {
-    return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React5.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React5.createElement("div", { className: "p-4 border border-default-200 bg-default-50 rounded-medium" }, /* @__PURE__ */ React5.createElement("p", { className: "text-default-600 text-sm" }, "Loading font picker..."))));
+    return /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React8.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React8.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React8.createElement("div", { className: "p-4 border border-default-200 bg-default-50 rounded-medium" }, /* @__PURE__ */ React8.createElement("p", { className: "text-default-600 text-sm" }, "Loading font picker..."))));
   }
   if (!fontPickerState.component) {
-    return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React5.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React5.createElement("div", { className: "p-4 border border-warning-200 bg-warning-50 rounded-medium" }, /* @__PURE__ */ React5.createElement("p", { className: "text-warning-800 text-sm" }, "Font picker requires the @rachelallyson/heroui-font-picker package. Please install it as a peer dependency for advanced font selection features."))));
+    return /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React8.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React8.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React8.createElement("div", { className: "p-4 border border-warning-200 bg-warning-50 rounded-medium" }, /* @__PURE__ */ React8.createElement("p", { className: "text-warning-800 text-sm" }, "Font picker requires the @rachelallyson/heroui-font-picker package. Please install it as a peer dependency for advanced font selection features."))));
   }
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Controller4,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React5.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React8.createElement(
         fontPickerState.component,
         {
           label,
           description,
-          value: field.value ?? "",
-          onSelectionChange: (value) => field.onChange(value),
+          value: field2.value ?? "",
+          onSelectionChange: (value) => field2.onChange(value),
           errorMessage: fieldState.error?.message,
           isDisabled,
           className,
@@ -454,12 +627,12 @@ function FontPickerField(props) {
 }
 
 // src/fields/InputField.tsx
-import React6 from "react";
+import React9 from "react";
 import { Controller as Controller5 } from "react-hook-form";
 function CoercedInput(props) {
-  const { description, disabled, errorMessage, field, inputProps, label } = props;
+  const { description, disabled, errorMessage, field: field2, inputProps, label } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React9.createElement(
     Input,
     {
       ...defaults.input,
@@ -469,59 +642,61 @@ function CoercedInput(props) {
       isDisabled: disabled,
       isInvalid: Boolean(errorMessage),
       label,
-      value: field.value ?? "",
-      onBlur: field.onBlur,
-      onValueChange: field.onChange
+      value: field2.value ?? "",
+      onBlur: field2.onBlur,
+      onValueChange: field2.onChange
     }
   );
 }
-function InputField(props) {
-  const {
-    className,
-    control,
-    description,
-    inputProps,
-    isDisabled,
-    label,
-    name,
-    rules,
-    transform
-  } = props;
-  return /* @__PURE__ */ React6.createElement(
-    Controller5,
-    {
+var InputField = React9.memo(
+  (props) => {
+    const {
+      className,
       control,
+      description,
+      inputProps,
+      isDisabled,
+      label,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React6.createElement("div", { className }, /* @__PURE__ */ React6.createElement(
-        CoercedInput,
-        {
-          description,
-          disabled: isDisabled,
-          errorMessage: fieldState.error?.message,
-          field: {
-            ...field,
-            onChange: (value) => {
-              if (inputProps?.type === "number") {
-                const numValue = value === "" ? void 0 : Number(value);
-                field.onChange(
-                  transform ? transform(String(numValue)) : numValue
-                );
-              } else {
-                field.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 React7 from "react";
+import React10 from "react";
 import { Controller as Controller6 } from "react-hook-form";
 function RadioGroupField(props) {
   const {
@@ -536,12 +711,12 @@ function RadioGroupField(props) {
     rules
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React10.createElement(
     Controller6,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React7.createElement("div", { className }, /* @__PURE__ */ React7.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React10.createElement("div", { className }, /* @__PURE__ */ React10.createElement(
         RadioGroup,
         {
           ...defaults.radioGroup,
@@ -550,11 +725,11 @@ function RadioGroupField(props) {
           isDisabled,
           isInvalid: Boolean(fieldState.error),
           label,
-          value: String(field.value ?? ""),
-          onBlur: field.onBlur,
-          onValueChange: (val) => field.onChange(val)
+          value: String(field2.value ?? ""),
+          onBlur: field2.onBlur,
+          onValueChange: (val) => field2.onChange(val)
         },
-        options.map((opt) => /* @__PURE__ */ React7.createElement(
+        options.map((opt) => /* @__PURE__ */ React10.createElement(
           Radio,
           {
             key: String(opt.value),
@@ -563,14 +738,14 @@ function RadioGroupField(props) {
           },
           opt.label
         ))
-      ), fieldState.error?.message ? /* @__PURE__ */ React7.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      ), fieldState.error?.message ? /* @__PURE__ */ React10.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
       rules
     }
   );
 }
 
 // src/fields/SelectField.tsx
-import React8 from "react";
+import React11 from "react";
 import { Controller as Controller7 } from "react-hook-form";
 function SelectField(props) {
   const {
@@ -586,14 +761,14 @@ function SelectField(props) {
     selectProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React11.createElement(
     Controller7,
     {
       control,
       name,
-      render: ({ field, fieldState }) => {
-        const selectedKey = field.value;
-        return /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement(
+      render: ({ field: field2, fieldState }) => {
+        const selectedKey = field2.value;
+        return /* @__PURE__ */ React11.createElement("div", { className }, /* @__PURE__ */ React11.createElement(
           Select,
           {
             ...defaults.select,
@@ -608,10 +783,10 @@ function SelectField(props) {
             onSelectionChange: (keys) => {
               const keyArray = Array.from(keys);
               const next = keyArray[0] ?? "";
-              field.onChange(next);
+              field2.onChange(next);
             }
           },
-          options.map((opt) => /* @__PURE__ */ React8.createElement(
+          options.map((opt) => /* @__PURE__ */ React11.createElement(
             SelectItem,
             {
               key: String(opt.value),
@@ -628,12 +803,12 @@ function SelectField(props) {
 }
 
 // src/fields/SliderField.tsx
-import React9 from "react";
+import React12 from "react";
 import { Controller as Controller8 } from "react-hook-form";
 function CoercedSlider(props) {
-  const { description, disabled, errorMessage, field, label, sliderProps } = props;
+  const { description, disabled, errorMessage, field: field2, label, sliderProps } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React12.createElement(
     Slider,
     {
       ...defaults.slider,
@@ -643,9 +818,9 @@ function CoercedSlider(props) {
       isDisabled: disabled,
       isInvalid: Boolean(errorMessage),
       label,
-      value: field.value ?? 0,
-      onBlur: field.onBlur,
-      onValueChange: field.onChange
+      value: field2.value ?? 0,
+      onBlur: field2.onBlur,
+      onValueChange: field2.onChange
     }
   );
 }
@@ -661,20 +836,20 @@ function SliderField(props) {
     sliderProps,
     transform
   } = props;
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React12.createElement(
     Controller8,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React12.createElement("div", { className }, /* @__PURE__ */ React12.createElement(
         CoercedSlider,
         {
           description,
           disabled: isDisabled,
           errorMessage: fieldState.error?.message,
           field: {
-            ...field,
-            onChange: (value) => field.onChange(transform ? transform(value) : value)
+            ...field2,
+            onChange: (value) => field2.onChange(transform ? transform(value) : value)
           },
           label,
           sliderProps
@@ -686,7 +861,7 @@ function SliderField(props) {
 }
 
 // src/fields/SwitchField.tsx
-import React10 from "react";
+import React13 from "react";
 import { Controller as Controller9 } from "react-hook-form";
 function SwitchField(props) {
   const {
@@ -700,30 +875,30 @@ function SwitchField(props) {
     switchProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Controller9,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React10.createElement("div", { className }, /* @__PURE__ */ React10.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React13.createElement("div", { className }, /* @__PURE__ */ React13.createElement(
         Switch,
         {
           ...defaults.switch,
           ...switchProps,
           isDisabled,
-          isSelected: Boolean(field.value),
-          onBlur: field.onBlur,
-          onValueChange: (val) => field.onChange(val)
+          isSelected: Boolean(field2.value),
+          onBlur: field2.onBlur,
+          onValueChange: (val) => field2.onChange(val)
         },
         label
-      ), description ? /* @__PURE__ */ React10.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React10.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      ), description ? /* @__PURE__ */ React13.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React13.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
       rules
     }
   );
 }
 
 // src/fields/TextareaField.tsx
-import React11 from "react";
+import React14 from "react";
 import { Controller as Controller10 } from "react-hook-form";
 function TextareaField(props) {
   const {
@@ -737,12 +912,12 @@ function TextareaField(props) {
     textareaProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React14.createElement(
     Controller10,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React11.createElement("div", { className }, /* @__PURE__ */ React11.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React14.createElement("div", { className }, /* @__PURE__ */ React14.createElement(
         Textarea,
         {
           ...defaults.textarea,
@@ -752,9 +927,9 @@ function TextareaField(props) {
           isDisabled,
           isInvalid: Boolean(fieldState.error),
           label,
-          value: field.value ?? "",
-          onBlur: field.onBlur,
-          onValueChange: field.onChange
+          value: field2.value ?? "",
+          onBlur: field2.onBlur,
+          onValueChange: field2.onChange
         }
       )),
       rules
@@ -763,158 +938,189 @@ function TextareaField(props) {
 }
 
 // src/components/FormField.tsx
-function FormField({
-  config,
-  form,
-  submissionState
-}) {
-  const { control } = form;
-  const watchedValues = useWatch({ 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__ */ React12.createElement(
-        InputField,
-        {
-          ...baseProps,
-          control,
-          defaultValue: config.defaultValue,
-          inputProps: config.inputProps
-        }
-      );
-    case "textarea":
-      return /* @__PURE__ */ React12.createElement(
-        TextareaField,
-        {
-          ...baseProps,
-          control,
-          defaultValue: config.defaultValue,
-          textareaProps: config.textareaProps
-        }
-      );
-    case "select":
-      return /* @__PURE__ */ React12.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__ */ React12.createElement(
-        CheckboxField,
-        {
-          ...baseProps,
-          checkboxProps: config.checkboxProps,
-          control,
-          defaultValue: config.defaultValue
-        }
-      );
-    case "radio":
-      return /* @__PURE__ */ React12.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__ */ React12.createElement(
-        SwitchField,
-        {
-          ...baseProps,
-          control,
-          defaultValue: config.defaultValue,
-          switchProps: config.switchProps
-        }
-      );
-    case "slider":
-      return /* @__PURE__ */ React12.createElement(
-        SliderField,
-        {
-          ...baseProps,
-          control,
-          defaultValue: config.defaultValue,
-          sliderProps: config.sliderProps
-        }
-      );
-    case "date":
-      return /* @__PURE__ */ React12.createElement(
-        DateField,
-        {
-          ...baseProps,
-          control,
-          dateProps: config.dateProps,
-          defaultValue: config.defaultValue
-        }
-      );
-    case "file":
-      return /* @__PURE__ */ React12.createElement(
-        FileField,
-        {
-          ...baseProps,
-          accept: config.accept,
-          control,
-          defaultValue: config.defaultValue,
-          fileProps: config.fileProps,
-          multiple: config.multiple
-        }
-      );
-    case "fontPicker":
-      return /* @__PURE__ */ React12.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
-      });
-    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({
@@ -951,16 +1157,16 @@ function ConfigurableForm({
   });
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React13.createElement(
+      return /* @__PURE__ */ React16.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((field) => /* @__PURE__ */ React13.createElement(
+        fields.map((field2) => /* @__PURE__ */ React16.createElement(
           FormField,
           {
-            key: field.name,
-            config: field,
+            key: field2.name,
+            config: field2,
             form,
             submissionState
           }
@@ -968,21 +1174,21 @@ function ConfigurableForm({
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React13.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field) => /* @__PURE__ */ React13.createElement(
+      return /* @__PURE__ */ React16.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React16.createElement(
         FormField,
         {
-          key: field.name,
-          config: field,
+          key: field2.name,
+          config: field2,
           form,
           submissionState
         }
       )));
     }
-    return /* @__PURE__ */ React13.createElement("div", { className: `space-y-${spacing}` }, fields.map((field) => /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React16.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React16.createElement(
       FormField,
       {
-        key: field.name,
-        config: field,
+        key: field2.name,
+        config: field2,
         form,
         submissionState
       }
@@ -992,24 +1198,24 @@ function ConfigurableForm({
     e.preventDefault();
     void handleSubmit();
   };
-  return /* @__PURE__ */ React13.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React13.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React13.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React13.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), isSubmitted && isSuccess && /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React16.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React16.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React16.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React16.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), isSubmitted && isSuccess && /* @__PURE__ */ React16.createElement(
     "div",
     {
       className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
       "data-testid": "success-message"
     },
-    /* @__PURE__ */ React13.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
-    /* @__PURE__ */ React13.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
-  ), error && /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React16.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
+    /* @__PURE__ */ React16.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
+  ), error && /* @__PURE__ */ React16.createElement(
     "div",
     {
       className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
       "data-testid": "error-message"
     },
-    /* @__PURE__ */ React13.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
-    /* @__PURE__ */ React13.createElement("p", { className: "text-danger-700 text-sm mt-1" }, error)
-  ), renderFields(), /* @__PURE__ */ React13.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React13.createElement(
-    Button2,
+    /* @__PURE__ */ React16.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
+    /* @__PURE__ */ React16.createElement("p", { className: "text-danger-700 text-sm mt-1" }, error)
+  ), renderFields(), /* @__PURE__ */ React16.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React16.createElement(
+    Button3,
     {
       color: "primary",
       isDisabled: isSubmitting,
@@ -1018,8 +1224,8 @@ function ConfigurableForm({
       ...submitButtonProps
     },
     submitButtonText
-  ), showResetButton && /* @__PURE__ */ React13.createElement(
-    Button2,
+  ), showResetButton && /* @__PURE__ */ React16.createElement(
+    Button3,
     {
       isDisabled: isSubmitting,
       type: "button",
@@ -1030,10 +1236,338 @@ 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 } from "react-hook-form";
+import { useFormContext as useFormContext4 } from "react-hook-form";
 function useHeroForm() {
-  const form = useFormContext();
+  const form = useFormContext4();
   const defaults = useHeroHookFormDefaults();
   return {
     // All React Hook Form methods and state
@@ -1044,10 +1578,10 @@ function useHeroForm() {
 }
 
 // src/providers/FormProvider.tsx
-import React14 from "react";
+import React18 from "react";
 import { FormProvider as RHFProvider } from "react-hook-form";
 function FormProvider(props) {
-  return /* @__PURE__ */ React14.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React18.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React18.createElement(
     "form",
     {
       className: props.className,
@@ -1060,22 +1594,42 @@ function FormProvider(props) {
 }
 
 // src/submit/SubmitButton.tsx
-import React15 from "react";
+import React19 from "react";
 function SubmitButton(props) {
-  const ctx = useFormContext2();
+  const ctx = useFormContext5();
   const loading = props.isLoading ?? ctx.formState.isSubmitting;
+  const enhancedState = props.enhancedState;
   const isDisabledFromProps = props.buttonProps?.isDisabled ?? false;
   const isDisabled = Boolean(isDisabledFromProps) || Boolean(loading);
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React15.createElement(
+  const getButtonContent = () => {
+    if (enhancedState?.isSuccess) {
+      return /* @__PURE__ */ React19.createElement("span", { className: "inline-flex items-center gap-2" }, "\u2705", props.successText || "Success!");
+    }
+    if (loading) {
+      return /* @__PURE__ */ React19.createElement("span", { className: "inline-flex items-center gap-2" }, "\u23F3", props.loadingText || "Submitting...");
+    }
+    return props.children;
+  };
+  const getButtonColor = () => {
+    if (enhancedState?.isSuccess) {
+      return "success";
+    }
+    if (enhancedState?.isError) {
+      return "danger";
+    }
+    return props.buttonProps?.color || defaults.submitButton.color;
+  };
+  return /* @__PURE__ */ React19.createElement(
     Button,
     {
       type: "submit",
       ...defaults.submitButton,
       ...props.buttonProps,
-      isDisabled
+      isDisabled,
+      color: getButtonColor()
     },
-    loading ? /* @__PURE__ */ React15.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(Spinner, { size: "sm" }), "Submitting\u2026") : props.children
+    getButtonContent()
   );
 }
 
@@ -1215,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(), {
@@ -1241,17 +1787,61 @@ 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;
+var crossFieldValidation = {
+  /**
+   * Conditional required field validation
+   */
+  conditionalRequired: (field2, conditionField, conditionValue) => {
+    return z.object({
+      [conditionField]: z.any(),
+      [field2]: z.string()
+    }).refine(
+      (data) => {
+        if (data[conditionField] === conditionValue) {
+          return data[field2] && data[field2].trim().length > 0;
+        }
+        return true;
+      },
+      {
+        message: "This field is required",
+        path: [field2]
+      }
+    );
+  },
+  /**
+   * Date range validation
+   */
+  dateRange: (startField, endField) => {
+    return z.object({
+      [endField]: z.string(),
+      [startField]: z.string()
+    }).refine(
+      (data) => {
+        const startDate = new Date(data[startField]);
+        const endDate = new Date(data[endField]);
+        return startDate < endDate;
+      },
+      {
+        message: "End date must be after start date",
+        path: [endField]
+      }
+    );
   },
-  {
-    message: errorMessage
+  /**
+   * Password confirmation validation
+   */
+  passwordConfirmation: (passwordField, confirmField) => {
+    return z.object({
+      [confirmField]: z.string(),
+      [passwordField]: z.string()
+    }).refine((data) => data[passwordField] === data[confirmField], {
+      message: "Passwords do not match",
+      path: [confirmField]
+    });
   }
-);
+};
 var commonValidations = {
-  conditional: (condition, schema, errorMessage) => createConditionalSchema(condition, schema, errorMessage),
-  confirmPassword: (passwordField) => createConfirmPasswordSchema(passwordField),
+  confirmPassword: (passwordField, confirmField) => crossFieldValidation.passwordConfirmation(passwordField, confirmField),
   date: (fieldName) => createDateSchema(fieldName),
   email: createEmailSchema(),
   file: (maxSizeInMB, allowedTypes) => createFileSchema(maxSizeInMB, allowedTypes),
@@ -1268,17 +1858,17 @@ var commonValidations = {
 };
 
 // src/index.ts
-import { useFormContext as useFormContext2 } from "react-hook-form";
+import { useFormContext as useFormContext5 } from "react-hook-form";
 
 // src/components/ZodForm.tsx
-import React16 from "react";
-import { Button as Button3 } 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 {
@@ -1309,18 +1899,192 @@ function useZodForm(config) {
 }
 function createZodFormConfig(schema, fields, defaultValues) {
   return {
-    schema,
     fields,
-    ...defaultValues && { defaultValues }
+    schema,
+    ...defaultValues && {
+      defaultValues
+    }
   };
 }
 
+// src/hooks/useEnhancedFormState.ts
+import { useCallback, useEffect, useState as useState2 } from "react";
+function useEnhancedFormState(form, options = {}) {
+  const {
+    autoReset = true,
+    // 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: _getValues } = form;
+  const { dirtyFields, errors, isSubmitting, touchedFields } = formState;
+  useEffect(() => {
+    if (isSubmitting) {
+      setStatus("submitting");
+    }
+  }, [isSubmitting]);
+  useEffect(() => {
+    if (status === "success" && autoReset) {
+      const timer = setTimeout(() => {
+        setStatus("idle");
+        setSubmittedData(void 0);
+        setError(void 0);
+      }, resetDelay);
+      return () => clearTimeout(timer);
+    }
+  }, [status, autoReset, resetDelay]);
+  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 {
+    dirtyFields: new Set(Object.keys(dirtyFields)),
+    error,
+    errorCount: Object.keys(errors).length,
+    handleError,
+    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 React20 from "react";
+import { Button as Button5 } from "@heroui/react";
+function FormStatus({
+  className = "",
+  onDismiss,
+  showDetails = false,
+  state
+}) {
+  const { error, isError, isSubmitting, isSuccess, status, submittedData } = state;
+  if (status === "idle") {
+    return null;
+  }
+  if (isSubmitting) {
+    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__ */ React20.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__ */ 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__ */ React20.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__ */ 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({
+  duration = 5e3,
+  onDismiss,
+  position = "top-right",
+  state
+}) {
+  const [isVisible, setIsVisible] = React20.useState(false);
+  React20.useEffect(() => {
+    if (state.isSuccess || state.isError) {
+      setIsVisible(true);
+      if (duration > 0) {
+        const timer = setTimeout(() => {
+          setIsVisible(false);
+          onDismiss?.();
+        }, duration);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [state.isSuccess, state.isError, duration, onDismiss]);
+  if (!isVisible) {
+    return null;
+  }
+  const positionClasses = {
+    "bottom-left": "bottom-4 left-4",
+    "bottom-right": "bottom-4 right-4",
+    "top-left": "top-4 left-4",
+    "top-right": "top-4 right-4"
+  };
+  return /* @__PURE__ */ React20.createElement("div", { className: `fixed z-50 ${positionClasses[position]}` }, /* @__PURE__ */ React20.createElement(FormStatus, { state, onDismiss }));
+}
+
 // src/components/ZodForm.tsx
 function ZodForm({
   className,
   columns = 1,
   config,
-  errorDisplay = "inline",
   layout = "vertical",
   onError,
   onSubmit,
@@ -1335,97 +2099,84 @@ function ZodForm({
   title
 }) {
   const form = useZodForm(config);
-  const [submissionState, setSubmissionState] = React16.useState({
-    error: void 0,
-    isSubmitted: false,
-    isSubmitting: false,
-    isSuccess: false
+  const enhancedState = useEnhancedFormState(form, {
+    autoReset: true,
+    onError: (error) => onError?.({ field: "form", message: error }),
+    onSuccess,
+    resetDelay: 3e3
   });
   const handleSubmit = async () => {
-    setSubmissionState((prev) => ({
-      ...prev,
-      error: void 0,
-      isSubmitting: true
-    }));
-    const isValid = await form.trigger();
-    if (!isValid) {
-      setSubmissionState({
-        error: "Please fix the validation errors above",
-        isSubmitted: true,
-        isSubmitting: false,
-        isSuccess: false
-      });
-      return;
-    }
     try {
-      await form.handleSubmit(async (formData) => {
-        await onSubmit(formData);
-      })();
-      setSubmissionState({
-        error: void 0,
-        isSubmitted: true,
-        isSubmitting: false,
-        isSuccess: true
-      });
-      onSuccess?.(form.getValues());
+      await form.handleSubmit(
+        async (formData) => {
+          await onSubmit(formData);
+          enhancedState.handleSuccess(formData);
+        },
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        (_errors) => {
+          enhancedState.handleError("Please fix the validation errors above");
+        }
+      )();
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : "An error occurred";
-      setSubmissionState({
-        error: errorMessage,
-        isSubmitted: true,
-        isSubmitting: false,
-        isSuccess: false
-      });
-      onError?.({
-        message: errorMessage
-      });
+      enhancedState.handleError(errorMessage);
     }
   };
   const resetForm = () => {
     form.reset();
-    setSubmissionState({
-      error: void 0,
-      isSubmitted: false,
-      isSubmitting: false,
-      isSuccess: false
-    });
+    enhancedState.reset();
   };
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React16.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((field) => /* @__PURE__ */ React16.createElement(
+        config.fields.map((field2) => /* @__PURE__ */ React21.createElement(
           FormField,
           {
-            key: field.name,
-            config: field,
+            key: field2.name,
+            config: field2,
             form,
-            submissionState
+            submissionState: {
+              error: enhancedState.error,
+              isSubmitted: enhancedState.status !== "idle",
+              isSubmitting: enhancedState.isSubmitting,
+              isSuccess: enhancedState.isSuccess
+            }
           }
         ))
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React16.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field) => /* @__PURE__ */ React16.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: field.name,
-          config: field,
+          key: field2.name,
+          config: field2,
           form,
-          submissionState
+          submissionState: {
+            error: enhancedState.error,
+            isSubmitted: enhancedState.status !== "idle",
+            isSubmitting: enhancedState.isSubmitting,
+            isSuccess: enhancedState.isSuccess
+          }
         }
       )));
     }
-    return /* @__PURE__ */ React16.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field) => /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React21.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field2) => /* @__PURE__ */ React21.createElement(
       FormField,
       {
-        key: field.name,
-        config: field,
+        key: field2.name,
+        config: field2,
         form,
-        submissionState
+        submissionState: {
+          error: enhancedState.error,
+          isSubmitted: enhancedState.status !== "idle",
+          isSubmitting: enhancedState.isSubmitting,
+          isSuccess: enhancedState.isSuccess
+        }
       }
     )));
   };
@@ -1433,7 +2184,7 @@ function ZodForm({
     e.preventDefault();
     void handleSubmit();
   };
-  React16.useEffect(() => {
+  React21.useEffect(() => {
     if (config.onError && Object.keys(form.formState.errors).length > 0) {
       config.onError(form.formState.errors);
     }
@@ -1442,42 +2193,33 @@ function ZodForm({
     return render({
       errors: form.formState.errors,
       form,
-      isSubmitted: submissionState.isSubmitted,
-      isSubmitting: submissionState.isSubmitting,
-      isSuccess: submissionState.isSuccess,
+      isSubmitted: enhancedState.status !== "idle",
+      isSubmitting: enhancedState.isSubmitting,
+      isSuccess: enhancedState.isSuccess,
       values: form.getValues()
     });
   }
-  return /* @__PURE__ */ React16.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React16.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React16.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React16.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), submissionState.isSubmitted && submissionState.isSuccess && /* @__PURE__ */ React16.createElement(
-    "div",
-    {
-      className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
-      "data-testid": "success-message"
-    },
-    /* @__PURE__ */ React16.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
-    /* @__PURE__ */ React16.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
-  ), submissionState.error && errorDisplay !== "none" && /* @__PURE__ */ React16.createElement(
-    "div",
+  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,
     {
-      className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
-      "data-testid": "error-message"
-    },
-    /* @__PURE__ */ React16.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
-    /* @__PURE__ */ React16.createElement("p", { className: "text-danger-700 text-sm mt-1" }, submissionState.error)
-  ), renderFields(), /* @__PURE__ */ React16.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React16.createElement(
-    Button3,
+      state: enhancedState,
+      onDismiss: () => enhancedState.reset(),
+      showDetails: true
+    }
+  ), renderFields(), /* @__PURE__ */ React21.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React21.createElement(
+    Button6,
     {
       color: "primary",
-      isDisabled: submissionState.isSubmitting,
-      isLoading: submissionState.isSubmitting,
+      isDisabled: enhancedState.isSubmitting,
+      isLoading: enhancedState.isSubmitting,
       type: "submit",
       ...submitButtonProps
     },
-    submitButtonText
-  ), showResetButton && /* @__PURE__ */ React16.createElement(
-    Button3,
+    enhancedState.isSuccess ? "Success!" : submitButtonText
+  ), showResetButton && /* @__PURE__ */ React21.createElement(
+    Button6,
     {
-      isDisabled: submissionState.isSubmitting,
+      isDisabled: enhancedState.isSubmitting,
       type: "button",
       variant: "bordered",
       onPress: resetForm
@@ -1485,29 +2227,1257 @@ function ZodForm({
     resetButtonText
   )));
 }
+
+// src/builders/BasicFormBuilder.ts
+var BasicFormBuilder = class {
+  constructor() {
+    this.fields = [];
+  }
+  /**
+   * Add an input field
+   */
+  input(name, label, type = "text") {
+    this.fields.push({
+      inputProps: { type },
+      label,
+      name,
+      type: "input"
+    });
+    return this;
+  }
+  /**
+   * Add a textarea field
+   */
+  textarea(name, label, placeholder) {
+    this.fields.push({
+      label,
+      name,
+      textareaProps: { placeholder },
+      type: "textarea"
+    });
+    return this;
+  }
+  /**
+   * Add a select field
+   */
+  select(name, label, options) {
+    this.fields.push({
+      label,
+      name,
+      options,
+      type: "select"
+    });
+    return this;
+  }
+  /**
+   * Add a checkbox field
+   */
+  checkbox(name, label) {
+    this.fields.push({
+      label,
+      name,
+      type: "checkbox"
+    });
+    return this;
+  }
+  /**
+   * Add a switch field
+   */
+  switch(name, label) {
+    this.fields.push({
+      label,
+      name,
+      type: "switch"
+    });
+    return this;
+  }
+  /**
+   * Build the final field configuration array
+   */
+  build() {
+    return this.fields;
+  }
+};
+function createBasicFormBuilder() {
+  return new BasicFormBuilder();
+}
+var FormFieldHelpers = {
+  /**
+   * Create a checkbox field
+   */
+  checkbox: (name, label) => ({
+    label,
+    name,
+    type: "checkbox"
+  }),
+  /**
+   * Create an input field
+   */
+  input: (name, label, type = "text") => ({
+    inputProps: { type },
+    label,
+    name,
+    type: "input"
+  }),
+  /**
+   * Create a select field
+   */
+  select: (name, label, options) => ({
+    label,
+    name,
+    options,
+    type: "select"
+  }),
+  /**
+   * Create a switch field
+   */
+  switch: (name, label) => ({
+    label,
+    name,
+    type: "switch"
+  }),
+  /**
+   * Create a textarea field
+   */
+  textarea: (name, label, placeholder) => ({
+    label,
+    name,
+    textareaProps: { placeholder },
+    type: "textarea"
+  })
+};
+var CommonFields = {
+  /**
+   * Address fields
+   */
+  address: () => [
+    FormFieldHelpers.input("street", "Street Address"),
+    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" }
+    ])
+  ],
+  /**
+   * 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"
+    )
+  ]
+};
+
+// src/builders/AdvancedFormBuilder.ts
+function inputField(name, label, props) {
+  return {
+    label,
+    name,
+    type: "input",
+    ...props && {
+      inputProps: {
+        className: props.className,
+        description: props.description,
+        disabled: props.isDisabled,
+        placeholder: props.placeholder,
+        type: props.type || "text"
+      }
+    }
+  };
+}
+function textareaField(name, label, props) {
+  return {
+    label,
+    name,
+    type: "textarea",
+    ...props && {
+      textareaProps: {
+        className: props.className,
+        description: props.description,
+        disabled: props.isDisabled,
+        placeholder: props.placeholder,
+        rows: props.rows
+      }
+    }
+  };
+}
+function selectField(name, label, options) {
+  return {
+    label,
+    name,
+    options,
+    type: "select"
+  };
+}
+function checkboxField(name, label, props) {
+  return {
+    label,
+    name,
+    type: "checkbox",
+    ...props && {
+      checkboxProps: {
+        className: props.className,
+        disabled: props.isDisabled
+      }
+    }
+  };
+}
+function switchField(name, label, props) {
+  return {
+    label,
+    name,
+    type: "switch",
+    ...props && {
+      switchProps: {
+        className: props.className,
+        disabled: props.isDisabled
+      }
+    }
+  };
+}
+function radioField(name, label, options, props) {
+  return {
+    label,
+    name,
+    radioOptions: options,
+    type: "radio",
+    ...props && {
+      radioProps: {
+        className: props.className,
+        isDisabled: props.isDisabled,
+        orientation: props.orientation
+      }
+    }
+  };
+}
+function sliderField(name, label, props) {
+  return {
+    label,
+    name,
+    type: "slider",
+    ...props && {
+      sliderProps: {
+        className: props.className || "",
+        disabled: props.isDisabled || false,
+        max: props.max || 100,
+        min: props.min || 0,
+        step: props.step || 1
+      }
+    }
+  };
+}
+function dateField(name, label, props) {
+  return {
+    label,
+    name,
+    type: "date",
+    ...props && {
+      dateProps: {
+        className: props.className || "",
+        disabled: props.isDisabled || false,
+        placeholder: props.placeholder || ""
+      }
+    }
+  };
+}
+function fileField(name, label, props) {
+  return {
+    label,
+    name,
+    type: "file",
+    ...props && {
+      fileProps: {
+        accept: props.accept || "",
+        className: props.className || "",
+        disabled: props.isDisabled || false,
+        multiple: props.multiple || false
+      }
+    }
+  };
+}
+function fontPickerField(name, label, props) {
+  return {
+    label,
+    name,
+    type: "fontPicker",
+    ...props && {
+      fontPickerProps: {
+        className: props.className || "",
+        disabled: props.isDisabled || false
+      }
+    }
+  };
+}
+function createField(type, name, label, optionsOrProps, props) {
+  switch (type) {
+    case "input":
+      return inputField(name, label, optionsOrProps);
+    case "textarea":
+      return textareaField(name, label, optionsOrProps);
+    case "select":
+      return selectField(name, label, optionsOrProps);
+    case "checkbox":
+      return checkboxField(name, label, optionsOrProps);
+    case "switch":
+      return switchField(name, label, optionsOrProps);
+    case "radio":
+      return radioField(name, label, optionsOrProps, props);
+    case "slider":
+      return sliderField(name, label, optionsOrProps);
+    case "date":
+      return dateField(name, label, optionsOrProps);
+    case "file":
+      return fileField(name, label, optionsOrProps);
+    case "fontPicker":
+      return fontPickerField(name, label, optionsOrProps);
+    default:
+      throw new Error(`Unknown field type: ${type}`);
+  }
+}
+var AdvancedFieldBuilder = class {
+  constructor() {
+    this.fields = [];
+  }
+  field(type, name, label, optionsOrProps, props) {
+    this.fields.push(createField(type, name, label, optionsOrProps, props));
+    return this;
+  }
+  /**
+   * Add a conditional field that shows/hides based on form data
+   */
+  conditionalField(name, condition, field2) {
+    this.fields.push({
+      condition,
+      field: field2,
+      name,
+      type: "conditional"
+    });
+    return this;
+  }
+  /**
+   * Add a field array for dynamic repeating field groups
+   */
+  fieldArray(name, label, fields, options) {
+    this.fields.push({
+      addButtonText: options?.addButtonText,
+      fields,
+      label,
+      max: options?.max,
+      min: options?.min,
+      name,
+      removeButtonText: options?.removeButtonText,
+      type: "fieldArray"
+    });
+    return this;
+  }
+  /**
+   * Add a dynamic section that shows/hides based on form data
+   */
+  dynamicSection(name, condition, fields, options) {
+    this.fields.push({
+      condition,
+      description: options?.description,
+      fields,
+      name,
+      title: options?.title,
+      type: "dynamicSection"
+    });
+    return this;
+  }
+  /**
+   * Build the final field configuration array
+   */
+  build() {
+    return this.fields;
+  }
+};
+var FieldArrayItemBuilder = class {
+  constructor() {
+    this.fields = [];
+  }
+  field(type, name, label, optionsOrProps, props) {
+    this.fields.push(createField(type, name, label, optionsOrProps, props));
+    return this;
+  }
+  /**
+   * Build the field array item configuration
+   */
+  build() {
+    return this.fields;
+  }
+};
+function createFieldArrayItemBuilder() {
+  return new FieldArrayItemBuilder();
+}
+var FieldArrayBuilder = class {
+  constructor(arrayName) {
+    this.arrayName = arrayName;
+    this.fields = [];
+  }
+  field(type, name, label, optionsOrProps, props) {
+    const fullPath = `${this.arrayName}.${name}`;
+    const fieldConfig = createField(
+      type,
+      fullPath,
+      label,
+      optionsOrProps,
+      props
+    );
+    this.fields.push(fieldConfig);
+    return this;
+  }
+  build() {
+    return this.fields;
+  }
+};
+function createFieldArrayBuilder(arrayName) {
+  return new FieldArrayBuilder(arrayName);
+}
+function createAdvancedBuilder() {
+  return new AdvancedFieldBuilder();
+}
+
+// src/builders/TypeInferredBuilder.ts
+import { z as z3 } from "zod";
+var TypeInferredBuilder = class {
+  constructor() {
+    this.schemaFields = {};
+    this.formFields = [];
+  }
+  /**
+   * Add a text field
+   */
+  text(name, label, 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`
+      );
+    this.schemaFields[name] = zodType;
+    this.formFields.push({
+      inputProps: { type: "text", ...fieldOptions },
+      label,
+      name,
+      type: "input"
+    });
+    return this;
+  }
+  /**
+   * Add an email field
+   */
+  email(name, label, options) {
+    this.schemaFields[name] = z3.string().email(`Please enter a valid email address`);
+    this.formFields.push({
+      inputProps: { type: "email", ...options },
+      label,
+      name,
+      type: "input"
+    });
+    return this;
+  }
+  /**
+   * Add a number field
+   */
+  number(name, label, 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}`);
+    this.schemaFields[name] = zodType;
+    this.formFields.push({
+      inputProps: { max, min, step, type: "number", ...fieldOptions },
+      label,
+      name,
+      type: "input"
+    });
+    return this;
+  }
+  /**
+   * Add a textarea field
+   */
+  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`
+      );
+    this.schemaFields[name] = zodType;
+    this.formFields.push({
+      label,
+      name,
+      textareaProps: fieldOptions,
+      type: "textarea"
+    });
+    return this;
+  }
+  /**
+   * Add a select field
+   */
+  select(name, label, options) {
+    this.schemaFields[name] = z3.string().min(1, `Please select a ${label.toLowerCase()}`);
+    this.formFields.push({
+      label,
+      name,
+      options,
+      type: "select"
+    });
+    return this;
+  }
+  /**
+   * Add a checkbox field
+   */
+  checkbox(name, label, options) {
+    const { required = false, ...fieldOptions } = options || {};
+    let zodType = z3.boolean();
+    if (required) {
+      zodType = zodType.refine(
+        (val) => val === true,
+        `You must agree to ${label.toLowerCase()}`
+      );
+    }
+    this.schemaFields[name] = zodType;
+    this.formFields.push({
+      checkboxProps: fieldOptions,
+      label,
+      name,
+      type: "checkbox"
+    });
+    return this;
+  }
+  /**
+   * Add a switch field
+   */
+  switch(name, label, options) {
+    this.schemaFields[name] = z3.boolean().optional();
+    this.formFields.push({
+      label,
+      name,
+      switchProps: options,
+      type: "switch"
+    });
+    return this;
+  }
+  /**
+   * Add a radio field
+   */
+  radio(name, label, options, fieldOptions) {
+    this.schemaFields[name] = z3.string().min(1, `Please select a ${label.toLowerCase()}`);
+    this.formFields.push({
+      label,
+      name,
+      radioOptions: options,
+      radioProps: fieldOptions,
+      type: "radio"
+    });
+    return this;
+  }
+  /**
+   * Add a slider field
+   */
+  slider(name, label, 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}`);
+    this.schemaFields[name] = zodType;
+    this.formFields.push({
+      label,
+      name,
+      sliderProps: { max, min, step, ...fieldOptions },
+      type: "slider"
+    });
+    return this;
+  }
+  /**
+   * Add a date field
+   */
+  date(name, label, options) {
+    this.schemaFields[name] = z3.string().min(1, `${label} is required`);
+    this.formFields.push({
+      dateProps: options,
+      label,
+      name,
+      type: "date"
+    });
+    return this;
+  }
+  /**
+   * Add a file field
+   */
+  file(name, label, options) {
+    this.schemaFields[name] = z3.any().optional();
+    this.formFields.push({
+      fileProps: options,
+      label,
+      name,
+      type: "file"
+    });
+    return this;
+  }
+  /**
+   * Build the final schema and fields
+   */
+  build() {
+    return {
+      fields: this.formFields,
+      schema: z3.object(this.schemaFields)
+    };
+  }
+};
+function createTypeInferredBuilder() {
+  return new TypeInferredBuilder();
+}
+function defineInferredForm(fieldDefinitions) {
+  const builder = createTypeInferredBuilder();
+  fieldDefinitions(builder);
+  return builder.build();
+}
+var field = {
+  checkbox: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    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);
+  },
+  radio: (name, label, options, fieldOptions) => {
+    const builder = new TypeInferredBuilder();
+    return builder.radio(name, label, options, fieldOptions);
+  },
+  select: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.select(name, label, options);
+  },
+  slider: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.slider(name, label, options);
+  },
+  switch: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.switch(name, label, options);
+  },
+  text: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.text(name, label, options);
+  },
+  textarea: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.textarea(name, label, options);
+  }
+};
+
+// src/builders/NestedPathBuilder.ts
+var NestedPathBuilder = class {
+  constructor() {
+    this.fields = [];
+  }
+  /**
+   * Create a nested object path builder
+   * Usage: builder.nest("address").field("street", "Street Address")
+   */
+  nest(path) {
+    return new NestedObjectBuilder(this, path);
+  }
+  /**
+   * Create a section-based path builder
+   * Usage: builder.section("shipping").field("street", "Street Address")
+   */
+  section(path) {
+    return new SectionBuilder(this, path);
+  }
+  /**
+   * Add a field with single path
+   * Usage: builder.field("firstName", "First Name")
+   */
+  field(name, label, type = "input", props) {
+    this.fields.push({
+      label,
+      name,
+      type,
+      ...props
+    });
+    return this;
+  }
+  /**
+   * Add a field with path segments
+   * Usage: builder.fieldPath(["user", "profile", "name"], "Full Name")
+   */
+  fieldPath(path, label, type = "input", props) {
+    const name = path.join(".");
+    this.fields.push({
+      label,
+      name,
+      type,
+      ...props
+    });
+    return this;
+  }
+  /**
+   * Add a field with template literal path
+   * Usage: builder.field`user.profile.name`("Full Name")
+   */
+  fieldTemplate(path) {
+    const pathString = path[0];
+    return new FieldTemplateBuilder(this, pathString);
+  }
+  /**
+   * Return to the parent builder (no-op for root builder)
+   */
+  end() {
+    return this;
+  }
+  build() {
+    return this.fields;
+  }
+};
+var NestedObjectBuilder = class _NestedObjectBuilder {
+  constructor(parent, path) {
+    this.parent = parent;
+    this.path = path;
+  }
+  /**
+   * Add a field to the current nested path
+   */
+  field(fieldName, label, type = "input", props) {
+    const fullPath = `${this.path}.${fieldName}`;
+    this.parent.fields.push({
+      label,
+      name: fullPath,
+      type,
+      ...props
+    });
+    return this;
+  }
+  /**
+   * Nest deeper into the object
+   */
+  nest(subPath) {
+    return new _NestedObjectBuilder(
+      this.parent,
+      `${this.path}.${subPath}`
+    );
+  }
+  /**
+   * Return to the parent builder
+   */
+  end() {
+    return this.parent;
+  }
+};
+var SectionBuilder = class {
+  constructor(parent, path) {
+    this.parent = parent;
+    this.path = path;
+  }
+  /**
+   * Add a field to the current section
+   */
+  field(fieldName, label, type = "input", props) {
+    const fullPath = `${this.path}.${fieldName}`;
+    this.parent.fields.push({
+      label,
+      name: fullPath,
+      type,
+      ...props
+    });
+    return this;
+  }
+  /**
+   * Add multiple fields to the section
+   */
+  fields(fieldDefinitions) {
+    fieldDefinitions.forEach((field2) => {
+      this.field(field2.name, field2.label, field2.type, field2.props);
+    });
+    return this;
+  }
+  /**
+   * Nest deeper into the section
+   */
+  nest(subPath) {
+    return new NestedObjectBuilder(
+      this.parent,
+      `${this.path}.${subPath}`
+    );
+  }
+  /**
+   * Return to the parent builder
+   */
+  end() {
+    return this.parent;
+  }
+};
+var FieldTemplateBuilder = class {
+  constructor(parent, path) {
+    this.parent = parent;
+    this.path = path;
+  }
+  /**
+   * Complete the field definition
+   */
+  complete(label, type = "input", props) {
+    this.parent.fields.push({
+      label,
+      name: this.path,
+      type,
+      ...props
+    });
+    return this.parent;
+  }
+};
+function createNestedPathBuilder() {
+  return new NestedPathBuilder();
+}
+
+// src/hooks/useDebouncedValidation.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef } from "react";
+function useDebouncedValidation(form, options = {}) {
+  const { delay = 300, enabled = true, fields } = options;
+  const timeoutRef = useRef(
+    void 0
+  );
+  const lastValuesRef = useRef({});
+  const debouncedTrigger = useCallback2(() => {
+    if (!enabled) return;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = void 0;
+    }
+    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]
+      );
+      if (hasChanges) {
+        lastValuesRef.current = { ...currentValues };
+        if (fields && fields.length > 0) {
+          await form.trigger(fields);
+        } else {
+          await form.trigger();
+        }
+      }
+    }, delay);
+  }, [form, delay, fields, enabled]);
+  useEffect2(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = void 0;
+      }
+    };
+  }, []);
+  useEffect2(() => {
+    if (form.formState.isSubmitSuccessful) {
+      lastValuesRef.current = {};
+    }
+  }, [form.formState.isSubmitSuccessful]);
+  return {
+    debouncedTrigger,
+    isDebouncing: !!timeoutRef.current
+  };
+}
+function useDebouncedFieldValidation(form, fieldName, options = {}) {
+  const { delay = 300, enabled = true } = options;
+  const timeoutRef = useRef(
+    void 0
+  );
+  const debouncedFieldTrigger = useCallback2(() => {
+    if (!enabled) return;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(async () => {
+      await form.trigger(fieldName);
+    }, delay);
+  }, [form, fieldName, delay, enabled]);
+  useEffect2(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = void 0;
+      }
+    };
+  }, []);
+  return {
+    debouncedFieldTrigger,
+    isDebouncing: !!timeoutRef.current
+  };
+}
+
+// src/hooks/useInferredForm.ts
+import { useForm as useForm3 } from "react-hook-form";
+var zodResolver;
+try {
+  zodResolver = __require("@hookform/resolvers/zod").zodResolver;
+} catch {
+}
+function useInferredForm(schema, fields, options = {}) {
+  const {
+    defaultValues,
+    delayError = 0,
+    mode = "onChange",
+    reValidateMode = "onChange",
+    shouldFocusError = true,
+    shouldUnregister = false
+  } = options;
+  return useForm3({
+    defaultValues,
+    delayError,
+    mode,
+    resolver: zodResolver ? zodResolver(schema) : void 0,
+    reValidateMode,
+    shouldFocusError,
+    shouldUnregister
+  });
+}
+function useTypeInferredForm(formConfig, options = {}) {
+  return useInferredForm(formConfig.schema, formConfig.fields, options);
+}
+
+// src/utils/performance.ts
+import { useCallback as useCallback3, useMemo as useMemo2, useRef as useRef2 } from "react";
+function debounce(func, delay) {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func(...args), delay);
+  };
+}
+function throttle(func, limit) {
+  let inThrottle;
+  return (...args) => {
+    if (!inThrottle) {
+      func(...args);
+      inThrottle = true;
+      setTimeout(() => inThrottle = false, limit);
+    }
+  };
+}
+function useMemoizedCallback(callback, deps) {
+  const callbackRef = useRef2(callback);
+  callbackRef.current = callback;
+  return useCallback3(
+    ((...args) => callbackRef.current(...args)),
+    deps
+  );
+}
+function shallowEqual(prevProps, nextProps) {
+  const prevKeys = Object.keys(prevProps);
+  const nextKeys = Object.keys(nextProps);
+  if (prevKeys.length !== nextKeys.length) {
+    return false;
+  }
+  for (const key of prevKeys) {
+    if (prevProps[key] !== nextProps[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+function deepEqual(prevProps, nextProps) {
+  if (prevProps === nextProps) {
+    return true;
+  }
+  if (typeof prevProps !== typeof nextProps) {
+    return false;
+  }
+  if (typeof prevProps !== "object" || prevProps === null || nextProps === null) {
+    return prevProps === nextProps;
+  }
+  const prevKeys = Object.keys(prevProps);
+  const nextKeys = Object.keys(nextProps);
+  if (prevKeys.length !== nextKeys.length) {
+    return false;
+  }
+  for (const key of prevKeys) {
+    if (!nextKeys.includes(key)) {
+      return false;
+    }
+    if (!deepEqual(prevProps[key], nextProps[key])) {
+      return false;
+    }
+  }
+  return true;
+}
+function usePerformanceMonitor(componentName, enabled = process.env.NODE_ENV === "development") {
+  const renderCountRef = useRef2(0);
+  const lastRenderTimeRef = useRef2(Date.now());
+  if (enabled) {
+    renderCountRef.current += 1;
+    const now = Date.now();
+    const timeSinceLastRender = now - lastRenderTimeRef.current;
+    console.log(`[Performance] ${componentName}:`, {
+      renderCount: renderCountRef.current,
+      timeSinceLastRender: `${timeSinceLastRender}ms`
+    });
+    lastRenderTimeRef.current = now;
+  }
+  return {
+    renderCount: renderCountRef.current,
+    resetRenderCount: () => {
+      renderCountRef.current = 0;
+    }
+  };
+}
+function createOptimizedFieldHandler(onChange, options = {}) {
+  const { debounce: debounceMs, throttle: throttleMs } = options;
+  let handler = onChange;
+  if (throttleMs) {
+    handler = throttle(handler, throttleMs);
+  }
+  if (debounceMs) {
+    handler = debounce(handler, debounceMs);
+  }
+  return handler;
+}
+function useMemoizedFieldProps(props, deps) {
+  return useMemo2(() => props, deps);
+}
+
+// src/builders/validation-helpers.ts
+import { z as z4 } from "zod";
+var validationPatterns = {
+  // 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"
+  ),
+  // 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 = {
+  /**
+   * Email availability check
+   */
+  emailAvailability: async (email) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const takenEmails = ["test@example.com", "admin@example.com"];
+        resolve(!takenEmails.includes(email));
+      }, 1e3);
+    });
+  },
+  /**
+   * Username availability check
+   */
+  usernameAvailability: async (username) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const takenUsernames = ["admin", "test", "user"];
+        resolve(!takenUsernames.includes(username.toLowerCase()));
+      }, 1e3);
+    });
+  }
+};
+var errorMessages = {
+  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}`,
+  minLength: (fieldName, min) => `${fieldName} must be at least ${min} characters`,
+  pattern: (fieldName) => `${fieldName} format is invalid`,
+  phone: () => "Please enter a valid phone number",
+  required: (fieldName) => `${fieldName} is required`,
+  time: () => "Please enter a valid time",
+  url: () => "Please enter a valid URL"
+};
+var serverValidation = {
+  /**
+   * Apply server errors to form
+   */
+  applyServerErrors: (errors, setError) => {
+    Object.entries(errors).forEach(([field2, messages]) => {
+      setError(field2, {
+        message: messages[0],
+        type: "server"
+        // Use first error message
+      });
+    });
+  },
+  /**
+   * Clear server errors
+   */
+  clearServerErrors: (fields, clearErrors) => {
+    fields.forEach((field2) => {
+      clearErrors(field2, "server");
+    });
+  }
+};
+var validationUtils = {
+  /**
+   * Debounced validation
+   */
+  debounceValidation: (fn, delay = 300) => {
+    let timeoutId;
+    return (...args) => {
+      clearTimeout(timeoutId);
+      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 { errors: {}, success: true };
+    } catch (error) {
+      if (error instanceof z4.ZodError) {
+        const errors = {};
+        error.issues.forEach((err) => {
+          const path = err.path.join(".");
+          errors[path] = err.message;
+        });
+        return { errors, success: false };
+      }
+      throw error;
+    }
+  }
+};
 export {
+  AdvancedFieldBuilder,
+  BasicFormBuilder,
   CheckboxField,
+  CommonFields,
+  ConditionalField,
   ConfigurableForm,
   DateField,
+  DynamicSectionField,
+  FieldArrayBuilder,
+  FieldArrayField,
+  FieldArrayItemBuilder,
   FileField,
   FontPickerField,
   FormField,
+  FormFieldHelpers,
   FormProvider,
+  FormStatus,
+  FormToast,
   HeroHookFormProvider,
   InputField,
   RadioGroupField,
   SelectField,
+  ServerActionForm,
   SliderField,
   SubmitButton,
   SwitchField,
   TextareaField,
+  TypeInferredBuilder,
   ZodForm,
   applyServerErrors,
+  asyncValidation,
   commonValidations,
-  createConditionalSchema,
-  createConfirmPasswordSchema,
+  createAdvancedBuilder,
+  createBasicFormBuilder,
   createDateSchema,
   createEmailSchema,
+  createField,
+  createFieldArrayBuilder,
+  createFieldArrayItemBuilder,
   createFileSchema,
   createFormTestUtils,
   createFutureDateSchema,
@@ -1515,24 +3485,46 @@ export {
   createMinLengthSchema,
   createMockFormData,
   createMockFormErrors,
+  createNestedPathBuilder,
   createNumberRangeSchema,
+  createOptimizedFieldHandler,
   createPasswordSchema,
   createPastDateSchema,
   createPhoneSchema,
   createRequiredCheckboxSchema,
   createRequiredSchema,
+  createTypeInferredBuilder,
   createUrlSchema,
   createZodFormConfig,
+  crossFieldValidation,
+  debounce,
+  deepEqual,
+  defineInferredForm,
+  errorMessages,
+  field,
   getFieldError,
   getFormErrors,
   hasFieldError,
   hasFormErrors,
+  serverValidation,
+  shallowEqual,
   simulateFieldInput,
   simulateFormSubmission,
-  useFormContext2 as useFormContext,
+  throttle,
+  useDebouncedFieldValidation,
+  useDebouncedValidation,
+  useEnhancedFormState,
+  useFormContext5 as useFormContext,
   useFormHelper,
   useHeroForm,
   useHeroHookFormDefaults,
+  useInferredForm,
+  useMemoizedCallback,
+  useMemoizedFieldProps,
+  usePerformanceMonitor,
+  useTypeInferredForm,
   useZodForm,
+  validationPatterns,
+  validationUtils,
   waitForFormState
 };