@rachelallyson/hero-hook-form 1.1.0 → 2.0.0

package/dist/index.js

@@ -6,8 +6,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // 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";
@@ -75,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";
@@ -198,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),
@@ -216,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({
+  config,
+  control,
+  className
+}) {
+  const { condition, field: field2, name } = 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: {
+        isSubmitting: false,
+        isSubmitted: false,
+        isSuccess: false,
+        error: void 0
+      }
+    }
+  ));
+}
+
+// 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,
@@ -232,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
     }
   );
 }
@@ -250,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,
@@ -263,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
         }
@@ -274,8 +304,136 @@ function DateField(props) {
   );
 }
 
+// src/fields/DynamicSectionField.tsx
+import React5 from "react";
+import { useWatch as useWatch2, useFormContext as useFormContext2 } from "react-hook-form";
+function DynamicSectionField({
+  config,
+  control,
+  className
+}) {
+  const { condition, fields, title, description } = 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: {
+        isSubmitting: false,
+        isSubmitted: false,
+        isSuccess: false,
+        error: void 0
+      }
+    }
+  ))));
+}
+
+// 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({
+  config,
+  className
+}) {
+  const {
+    name,
+    fields: fieldConfigs,
+    min = 0,
+    max = 10,
+    addButtonText = "Add Item",
+    removeButtonText = "Remove"
+  } = config;
+  const form = useFormContext3();
+  if (!form || !form.control) {
+    return null;
+  }
+  const { control } = form;
+  const { fields, append, 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: {
+        isSubmitting: false,
+        isSubmitted: false,
+        isSuccess: false,
+        error: void 0
+      }
+    }
+  ))))), 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 {
@@ -283,13 +441,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,
@@ -302,11 +460,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);
       }
     }
   );
@@ -325,12 +483,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,
@@ -338,8 +496,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,
@@ -352,15 +510,12 @@ 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;
-try {
-  const fontPickerModule = __require("@rachelallyson/heroui-font-picker");
-  FontPickerComponent = fontPickerModule.FontPicker;
-} catch (e) {
-  console.debug("Font picker package not available - FontPickerField will show fallback UI");
-}
+var fontPickerLoaded = false;
+var fontPickerLoading = false;
+var loadingCallbacks = [];
 function FontPickerField(props) {
   const {
     className,
@@ -372,21 +527,86 @@ function FontPickerField(props) {
     name,
     rules
   } = props;
-  if (!FontPickerComponent) {
-    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."))));
+  const [fontPickerState, setFontPickerState] = React8.useState({
+    component: FontPickerComponent,
+    loading: false,
+    error: null
+  });
+  React8.useEffect(() => {
+    if (fontPickerLoaded && FontPickerComponent) {
+      setFontPickerState({
+        component: FontPickerComponent,
+        loading: false,
+        error: null
+      });
+      return;
+    }
+    if (fontPickerLoading) {
+      setFontPickerState((prev) => ({ ...prev, loading: true }));
+      const callback = () => {
+        if (fontPickerLoaded && FontPickerComponent) {
+          setFontPickerState({
+            component: FontPickerComponent,
+            loading: false,
+            error: null
+          });
+        } else {
+          setFontPickerState({
+            component: null,
+            loading: false,
+            error: "Font picker package not found"
+          });
+        }
+      };
+      loadingCallbacks.push(callback);
+      return;
+    }
+    const loadFontPicker = async () => {
+      fontPickerLoading = true;
+      setFontPickerState((prev) => ({ ...prev, loading: true }));
+      try {
+        const fontPickerModule = await import("@rachelallyson/heroui-font-picker");
+        FontPickerComponent = fontPickerModule.FontPicker || fontPickerModule.default;
+        fontPickerLoaded = true;
+        fontPickerLoading = false;
+        setFontPickerState({
+          component: FontPickerComponent,
+          loading: false,
+          error: null
+        });
+        loadingCallbacks.forEach((callback) => callback());
+        loadingCallbacks.length = 0;
+      } catch (error) {
+        fontPickerLoading = false;
+        setFontPickerState({
+          component: null,
+          loading: false,
+          error: "Font picker package not found"
+        });
+        loadingCallbacks.forEach((callback) => callback());
+        loadingCallbacks.length = 0;
+      }
+    };
+    void loadFontPicker();
+  }, []);
+  if (fontPickerState.loading) {
+    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__ */ 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(
-        FontPickerComponent,
+      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,
@@ -399,12 +619,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,
@@ -414,13 +634,13 @@ 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) {
+var InputField = React9.memo((props) => {
   const {
     className,
     control,
@@ -432,27 +652,27 @@ function InputField(props) {
     rules,
     transform
   } = props;
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React9.createElement(
     Controller5,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React6.createElement("div", { className }, /* @__PURE__ */ React6.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement(
         CoercedInput,
         {
           description,
           disabled: isDisabled,
           errorMessage: fieldState.error?.message,
           field: {
-            ...field,
+            ...field2,
             onChange: (value) => {
               if (inputProps?.type === "number") {
                 const numValue = value === "" ? void 0 : Number(value);
-                field.onChange(
+                field2.onChange(
                   transform ? transform(String(numValue)) : numValue
                 );
               } else {
-                field.onChange(transform ? transform(value) : value);
+                field2.onChange(transform ? transform(value) : value);
               }
             }
           },
@@ -463,10 +683,10 @@ function InputField(props) {
       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 {
@@ -481,12 +701,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,
@@ -495,11 +715,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),
@@ -508,14 +728,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 {
@@ -531,14 +751,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,
@@ -553,10 +773,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),
@@ -573,12 +793,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,
@@ -588,9 +808,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
     }
   );
 }
@@ -606,20 +826,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
@@ -631,7 +851,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 {
@@ -645,30 +865,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 {
@@ -682,12 +902,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,
@@ -697,9 +917,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
@@ -708,13 +928,16 @@ function TextareaField(props) {
 }
 
 // src/components/FormField.tsx
-function FormField({
+var FormField = React15.memo(({
   config,
   form,
   submissionState
-}) {
+}) => {
+  if (!form || !form.control) {
+    return null;
+  }
   const { control } = form;
-  const watchedValues = useWatch({ control });
+  const watchedValues = useWatch3({ control });
   if (config.condition && !config.condition(watchedValues)) {
     return null;
   }
@@ -736,7 +959,7 @@ function FormField({
   };
   switch (config.type) {
     case "input":
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React15.createElement(
         InputField,
         {
           ...baseProps,
@@ -746,7 +969,7 @@ function FormField({
         }
       );
     case "textarea":
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React15.createElement(
         TextareaField,
         {
           ...baseProps,
@@ -756,7 +979,7 @@ function FormField({
         }
       );
     case "select":
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React15.createElement(
         SelectField,
         {
           ...baseProps,
@@ -770,7 +993,7 @@ function FormField({
         }
       );
     case "checkbox":
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React15.createElement(
         CheckboxField,
         {
           ...baseProps,
@@ -780,7 +1003,7 @@ function FormField({
         }
       );
     case "radio":
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React15.createElement(
         RadioGroupField,
         {
           ...baseProps,
@@ -794,7 +1017,7 @@ function FormField({
         }
       );
     case "switch":
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React15.createElement(
         SwitchField,
         {
           ...baseProps,
@@ -804,7 +1027,7 @@ function FormField({
         }
       );
     case "slider":
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React15.createElement(
         SliderField,
         {
           ...baseProps,
@@ -814,7 +1037,7 @@ function FormField({
         }
       );
     case "date":
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React15.createElement(
         DateField,
         {
           ...baseProps,
@@ -824,7 +1047,7 @@ function FormField({
         }
       );
     case "file":
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React15.createElement(
         FileField,
         {
           ...baseProps,
@@ -836,7 +1059,7 @@ function FormField({
         }
       );
     case "fontPicker":
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React15.createElement(
         FontPickerField,
         {
           ...baseProps,
@@ -853,13 +1076,39 @@ function FormField({
         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({
@@ -896,16 +1145,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
           }
@@ -913,21 +1162,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
       }
@@ -937,24 +1186,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,
@@ -963,8 +1212,8 @@ function ConfigurableForm({
       ...submitButtonProps
     },
     submitButtonText
-  ), showResetButton && /* @__PURE__ */ React13.createElement(
-    Button2,
+  ), showResetButton && /* @__PURE__ */ React16.createElement(
+    Button3,
     {
       isDisabled: isSubmitting,
       type: "button",
@@ -976,9 +1225,9 @@ function ConfigurableForm({
 }
 
 // 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
@@ -989,10 +1238,10 @@ function useHeroForm() {
 }
 
 // src/providers/FormProvider.tsx
-import React14 from "react";
+import React17 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__ */ React17.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React17.createElement(
     "form",
     {
       className: props.className,
@@ -1005,22 +1254,42 @@ function FormProvider(props) {
 }
 
 // src/submit/SubmitButton.tsx
-import React15 from "react";
+import React18 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__ */ React18.createElement("span", { className: "inline-flex items-center gap-2" }, "\u2705", props.successText || "Success!");
+    }
+    if (loading) {
+      return /* @__PURE__ */ React18.createElement("span", { className: "inline-flex items-center gap-2" }, "\u23F3", props.loadingText || "Submitting...");
+    }
+    return props.children;
+  };
+  const getButtonColor = () => {
+    if (enhancedState?.isSuccess) {
+      return "success";
+    }
+    if (enhancedState?.isError) {
+      return "danger";
+    }
+    return props.buttonProps?.color || defaults.submitButton.color;
+  };
+  return /* @__PURE__ */ React18.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()
   );
 }
 
@@ -1211,13 +1480,69 @@ var commonValidations = {
   requiredCheckbox: (fieldName) => createRequiredCheckboxSchema(fieldName),
   url: createUrlSchema()
 };
+var crossFieldValidation = {
+  /**
+   * Password confirmation validation
+   */
+  passwordConfirmation: (passwordField, confirmField) => {
+    return z.object({
+      [passwordField]: z.string(),
+      [confirmField]: z.string()
+    }).refine(
+      (data) => data[passwordField] === data[confirmField],
+      {
+        message: "Passwords do not match",
+        path: [confirmField]
+      }
+    );
+  },
+  /**
+   * Date range validation
+   */
+  dateRange: (startField, endField) => {
+    return z.object({
+      [startField]: z.string(),
+      [endField]: 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]
+      }
+    );
+  },
+  /**
+   * Conditional required field validation
+   */
+  conditionalRequired: (field2, conditionField, conditionValue) => {
+    return z.object({
+      [field2]: z.string(),
+      [conditionField]: z.any()
+    }).refine(
+      (data) => {
+        if (data[conditionField] === conditionValue) {
+          return data[field2] && data[field2].trim().length > 0;
+        }
+        return true;
+      },
+      {
+        message: "This field is required",
+        path: [field2]
+      }
+    );
+  }
+};
 
 // 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 React20 from "react";
+import { Button as Button5 } from "@heroui/react";
 
 // src/zod-integration.ts
 import { useForm as useForm2 } from "react-hook-form";
@@ -1260,6 +1585,146 @@ function createZodFormConfig(schema, fields, defaultValues) {
   };
 }
 
+// src/hooks/useEnhancedFormState.ts
+import { useCallback, useEffect, useState as useState2 } from "react";
+function useEnhancedFormState(form, options = {}) {
+  const {
+    onSuccess,
+    onError,
+    successMessage = "Form submitted successfully!",
+    errorMessage = "An error occurred. Please try again.",
+    autoReset = true,
+    resetDelay = 3e3
+  } = options;
+  const [status, setStatus] = useState2("idle");
+  const [error, setError] = useState2(void 0);
+  const [submittedData, setSubmittedData] = useState2(void 0);
+  const { formState, getValues } = form;
+  const { errors, touchedFields, dirtyFields, isSubmitting } = formState;
+  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((errorMessage2) => {
+    setStatus("error");
+    setError(errorMessage2);
+    setSubmittedData(void 0);
+    onError?.(errorMessage2);
+  }, [onError]);
+  const reset = useCallback(() => {
+    setStatus("idle");
+    setError(void 0);
+    setSubmittedData(void 0);
+  }, []);
+  return {
+    status,
+    isSubmitting,
+    isSuccess: status === "success",
+    isError: status === "error",
+    error,
+    submittedData,
+    touchedFields: new Set(Object.keys(touchedFields)),
+    dirtyFields: new Set(Object.keys(dirtyFields)),
+    hasErrors: Object.keys(errors).length > 0,
+    errorCount: Object.keys(errors).length,
+    handleSuccess,
+    handleError,
+    reset
+  };
+}
+
+// src/components/FormStatus.tsx
+import React19 from "react";
+import { Button as Button4 } from "@heroui/react";
+function FormStatus({
+  state,
+  onDismiss,
+  className = "",
+  showDetails = false
+}) {
+  const { status, isSubmitting, isSuccess, isError, error, submittedData } = state;
+  if (status === "idle") {
+    return null;
+  }
+  if (isSubmitting) {
+    return /* @__PURE__ */ React19.createElement("div", { className: `flex items-center gap-3 p-4 bg-blue-50 border border-blue-200 rounded-lg ${className}` }, /* @__PURE__ */ React19.createElement("span", { className: "text-blue-600" }, "\u23F3"), /* @__PURE__ */ React19.createElement("div", null, /* @__PURE__ */ React19.createElement("p", { className: "text-sm font-medium text-blue-900" }, "Submitting form..."), showDetails && /* @__PURE__ */ React19.createElement("p", { className: "text-xs text-blue-700" }, "Please wait while we process your request.")));
+  }
+  if (isSuccess) {
+    return /* @__PURE__ */ React19.createElement("div", { className: `flex items-center gap-3 p-4 bg-green-50 border border-green-200 rounded-lg ${className}`, "data-testid": "success-message" }, /* @__PURE__ */ React19.createElement("span", { className: "text-green-600" }, "\u2705"), /* @__PURE__ */ React19.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React19.createElement("p", { className: "text-sm font-medium text-green-900" }, "Form submitted successfully!"), showDetails && submittedData && /* @__PURE__ */ React19.createElement("p", { className: "text-xs text-green-700" }, "Your data has been saved. Thank you for your submission.")), onDismiss && /* @__PURE__ */ React19.createElement(
+      Button4,
+      {
+        size: "sm",
+        variant: "light",
+        isIconOnly: true,
+        onPress: onDismiss,
+        "aria-label": "Dismiss success message"
+      },
+      "\u2715"
+    ));
+  }
+  if (isError && error) {
+    return /* @__PURE__ */ React19.createElement("div", { className: `flex items-center gap-3 p-4 bg-red-50 border border-red-200 rounded-lg ${className}`, "data-testid": "error-message" }, /* @__PURE__ */ React19.createElement("span", { className: "text-red-600" }, "\u26A0\uFE0F"), /* @__PURE__ */ React19.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React19.createElement("p", { className: "text-sm font-medium text-red-900" }, "Error submitting form"), /* @__PURE__ */ React19.createElement("p", { className: "text-xs text-red-700" }, error)), onDismiss && /* @__PURE__ */ React19.createElement(
+      Button4,
+      {
+        size: "sm",
+        variant: "light",
+        isIconOnly: true,
+        onPress: onDismiss,
+        "aria-label": "Dismiss error message"
+      },
+      "\u2715"
+    ));
+  }
+  return null;
+}
+function FormToast({
+  state,
+  onDismiss,
+  position = "top-right",
+  duration = 5e3
+}) {
+  const [isVisible, setIsVisible] = React19.useState(false);
+  React19.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 = {
+    "top-right": "top-4 right-4",
+    "top-left": "top-4 left-4",
+    "bottom-right": "bottom-4 right-4",
+    "bottom-left": "bottom-4 left-4"
+  };
+  return /* @__PURE__ */ React19.createElement("div", { className: `fixed z-50 ${positionClasses[position]}` }, /* @__PURE__ */ React19.createElement(FormStatus, { state, onDismiss }));
+}
+
 // src/components/ZodForm.tsx
 function ZodForm({
   className,
@@ -1280,97 +1745,83 @@ 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, {
+    onSuccess,
+    onError: (error) => onError?.({ message: error, field: "form" }),
+    autoReset: true,
+    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);
+        },
+        (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__ */ React20.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__ */ React20.createElement(
           FormField,
           {
-            key: field.name,
-            config: field,
+            key: field2.name,
+            config: field2,
             form,
-            submissionState
+            submissionState: {
+              isSubmitting: enhancedState.isSubmitting,
+              isSubmitted: enhancedState.status !== "idle",
+              isSuccess: enhancedState.isSuccess,
+              error: enhancedState.error
+            }
           }
         ))
       );
     }
     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__ */ React20.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field2) => /* @__PURE__ */ React20.createElement(
         FormField,
         {
-          key: field.name,
-          config: field,
+          key: field2.name,
+          config: field2,
           form,
-          submissionState
+          submissionState: {
+            isSubmitting: enhancedState.isSubmitting,
+            isSubmitted: enhancedState.status !== "idle",
+            isSuccess: enhancedState.isSuccess,
+            error: enhancedState.error
+          }
         }
       )));
     }
-    return /* @__PURE__ */ React16.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field) => /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React20.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field2) => /* @__PURE__ */ React20.createElement(
       FormField,
       {
-        key: field.name,
-        config: field,
+        key: field2.name,
+        config: field2,
         form,
-        submissionState
+        submissionState: {
+          isSubmitting: enhancedState.isSubmitting,
+          isSubmitted: enhancedState.status !== "idle",
+          isSuccess: enhancedState.isSuccess,
+          error: enhancedState.error
+        }
       }
     )));
   };
@@ -1378,7 +1829,7 @@ function ZodForm({
     e.preventDefault();
     void handleSubmit();
   };
-  React16.useEffect(() => {
+  React20.useEffect(() => {
     if (config.onError && Object.keys(form.formState.errors).length > 0) {
       config.onError(form.formState.errors);
     }
@@ -1387,42 +1838,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",
+  return /* @__PURE__ */ React20.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React20.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React20.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React20.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), /* @__PURE__ */ React20.createElement(
+    FormStatus,
     {
-      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",
-    {
-      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__ */ React20.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React20.createElement(
+    Button5,
     {
       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__ */ React20.createElement(
+    Button5,
     {
-      isDisabled: submissionState.isSubmitting,
+      isDisabled: enhancedState.isSubmitting,
       type: "button",
       variant: "bordered",
       onPress: resetForm
@@ -1430,14 +1872,1209 @@ 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({
+      name,
+      label,
+      type: "input",
+      inputProps: { type }
+    });
+    return this;
+  }
+  /**
+   * Add a textarea field
+   */
+  textarea(name, label, placeholder) {
+    this.fields.push({
+      name,
+      label,
+      type: "textarea",
+      textareaProps: { placeholder }
+    });
+    return this;
+  }
+  /**
+   * Add a select field
+   */
+  select(name, label, options) {
+    this.fields.push({
+      name,
+      label,
+      type: "select",
+      options
+    });
+    return this;
+  }
+  /**
+   * Add a checkbox field
+   */
+  checkbox(name, label) {
+    this.fields.push({
+      name,
+      label,
+      type: "checkbox"
+    });
+    return this;
+  }
+  /**
+   * Add a switch field
+   */
+  switch(name, label) {
+    this.fields.push({
+      name,
+      label,
+      type: "switch"
+    });
+    return this;
+  }
+  /**
+   * Build the final field configuration array
+   */
+  build() {
+    return this.fields;
+  }
+};
+function createBasicFormBuilder() {
+  return new BasicFormBuilder();
+}
+var FormFieldHelpers = {
+  /**
+   * Create an input field
+   */
+  input: (name, label, type = "text") => ({
+    name,
+    label,
+    type: "input",
+    inputProps: { type }
+  }),
+  /**
+   * Create a textarea field
+   */
+  textarea: (name, label, placeholder) => ({
+    name,
+    label,
+    type: "textarea",
+    textareaProps: { placeholder }
+  }),
+  /**
+   * Create a select field
+   */
+  select: (name, label, options) => ({
+    name,
+    label,
+    type: "select",
+    options
+  }),
+  /**
+   * Create a checkbox field
+   */
+  checkbox: (name, label) => ({
+    name,
+    label,
+    type: "checkbox"
+  }),
+  /**
+   * Create a switch field
+   */
+  switch: (name, label) => ({
+    name,
+    label,
+    type: "switch"
+  })
+};
+var CommonFields = {
+  /**
+   * Personal information fields
+   */
+  personal: () => [
+    FormFieldHelpers.input("firstName", "First Name"),
+    FormFieldHelpers.input("lastName", "Last Name"),
+    FormFieldHelpers.input("email", "Email", "email"),
+    FormFieldHelpers.input("phone", "Phone", "tel")
+  ],
+  /**
+   * Address fields
+   */
+  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" }
+      ]
+    )
+  ],
+  /**
+   * 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 {
+    name,
+    label,
+    type: "input",
+    ...props && {
+      inputProps: {
+        type: props.type || "text",
+        placeholder: props.placeholder,
+        description: props.description,
+        disabled: props.isDisabled,
+        className: props.className
+      }
+    }
+  };
+}
+function textareaField(name, label, props) {
+  return {
+    name,
+    label,
+    type: "textarea",
+    ...props && {
+      textareaProps: {
+        placeholder: props.placeholder,
+        description: props.description,
+        disabled: props.isDisabled,
+        className: props.className,
+        rows: props.rows
+      }
+    }
+  };
+}
+function selectField(name, label, options, props) {
+  return {
+    name,
+    label,
+    type: "select",
+    options
+  };
+}
+function checkboxField(name, label, props) {
+  return {
+    name,
+    label,
+    type: "checkbox",
+    ...props && {
+      checkboxProps: {
+        disabled: props.isDisabled,
+        className: props.className
+      }
+    }
+  };
+}
+function switchField(name, label, props) {
+  return {
+    name,
+    label,
+    type: "switch",
+    ...props && {
+      switchProps: {
+        disabled: props.isDisabled,
+        className: props.className
+      }
+    }
+  };
+}
+function radioField(name, label, options, props) {
+  return {
+    name,
+    label,
+    type: "radio",
+    radioOptions: options,
+    ...props && {
+      radioProps: {
+        isDisabled: props.isDisabled,
+        className: props.className,
+        orientation: props.orientation
+      }
+    }
+  };
+}
+function sliderField(name, label, props) {
+  return {
+    name,
+    label,
+    type: "slider",
+    ...props && {
+      sliderProps: {
+        min: props.min || 0,
+        max: props.max || 100,
+        step: props.step || 1,
+        disabled: props.isDisabled || false,
+        className: props.className || ""
+      }
+    }
+  };
+}
+function dateField(name, label, props) {
+  return {
+    name,
+    label,
+    type: "date",
+    ...props && {
+      dateProps: {
+        placeholder: props.placeholder || "",
+        disabled: props.isDisabled || false,
+        className: props.className || ""
+      }
+    }
+  };
+}
+function fileField(name, label, props) {
+  return {
+    name,
+    label,
+    type: "file",
+    ...props && {
+      fileProps: {
+        accept: props.accept || "",
+        multiple: props.multiple || false,
+        disabled: props.isDisabled || false,
+        className: props.className || ""
+      }
+    }
+  };
+}
+function fontPickerField(name, label, props) {
+  return {
+    name,
+    label,
+    type: "fontPicker",
+    ...props && {
+      fontPickerProps: {
+        disabled: props.isDisabled || false,
+        className: props.className || ""
+      }
+    }
+  };
+}
+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, props);
+    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({
+      name,
+      type: "conditional",
+      condition,
+      field: field2
+    });
+    return this;
+  }
+  /**
+   * Add a field array for dynamic repeating field groups
+   */
+  fieldArray(name, label, fields, options) {
+    this.fields.push({
+      name,
+      label,
+      type: "fieldArray",
+      fields,
+      min: options?.min,
+      max: options?.max,
+      addButtonText: options?.addButtonText,
+      removeButtonText: options?.removeButtonText
+    });
+    return this;
+  }
+  /**
+   * Add a dynamic section that shows/hides based on form data
+   */
+  dynamicSection(name, condition, fields, options) {
+    this.fields.push({
+      name,
+      type: "dynamicSection",
+      condition,
+      fields,
+      title: options?.title,
+      description: options?.description
+    });
+    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 { minLength, maxLength, 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({
+      name,
+      label,
+      type: "input",
+      inputProps: { type: "text", ...fieldOptions }
+    });
+    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({
+      name,
+      label,
+      type: "input",
+      inputProps: { type: "email", ...options }
+    });
+    return this;
+  }
+  /**
+   * Add a number field
+   */
+  number(name, label, options) {
+    const { min, max, 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({
+      name,
+      label,
+      type: "input",
+      inputProps: { type: "number", min, max, step, ...fieldOptions }
+    });
+    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({
+      name,
+      label,
+      type: "textarea",
+      textareaProps: fieldOptions
+    });
+    return this;
+  }
+  /**
+   * Add a select field
+   */
+  select(name, label, options, fieldOptions) {
+    this.schemaFields[name] = z3.string().min(1, `Please select a ${label.toLowerCase()}`);
+    this.formFields.push({
+      name,
+      label,
+      type: "select",
+      options
+    });
+    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({
+      name,
+      label,
+      type: "checkbox",
+      checkboxProps: fieldOptions
+    });
+    return this;
+  }
+  /**
+   * Add a switch field
+   */
+  switch(name, label, options) {
+    this.schemaFields[name] = z3.boolean().optional();
+    this.formFields.push({
+      name,
+      label,
+      type: "switch",
+      switchProps: options
+    });
+    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({
+      name,
+      label,
+      type: "radio",
+      radioOptions: options,
+      radioProps: fieldOptions
+    });
+    return this;
+  }
+  /**
+   * Add a slider field
+   */
+  slider(name, label, options) {
+    const { min = 0, max = 100, 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({
+      name,
+      label,
+      type: "slider",
+      sliderProps: { min, max, step, ...fieldOptions }
+    });
+    return this;
+  }
+  /**
+   * Add a date field
+   */
+  date(name, label, options) {
+    this.schemaFields[name] = z3.string().min(1, `${label} is required`);
+    this.formFields.push({
+      name,
+      label,
+      type: "date",
+      dateProps: options
+    });
+    return this;
+  }
+  /**
+   * Add a file field
+   */
+  file(name, label, options) {
+    this.schemaFields[name] = z3.any().optional();
+    this.formFields.push({
+      name,
+      label,
+      type: "file",
+      fileProps: options
+    });
+    return this;
+  }
+  /**
+   * Build the final schema and fields
+   */
+  build() {
+    return {
+      schema: z3.object(this.schemaFields),
+      fields: this.formFields
+    };
+  }
+};
+function createTypeInferredBuilder() {
+  return new TypeInferredBuilder();
+}
+function defineInferredForm(fieldDefinitions) {
+  const builder = createTypeInferredBuilder();
+  fieldDefinitions(builder);
+  return builder.build();
+}
+var field = {
+  text: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.text(name, label, options);
+  },
+  email: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.email(name, label, options);
+  },
+  number: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.number(name, label, options);
+  },
+  textarea: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.textarea(name, label, options);
+  },
+  select: (name, label, options, fieldOptions) => {
+    const builder = new TypeInferredBuilder();
+    return builder.select(name, label, options, fieldOptions);
+  },
+  checkbox: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.checkbox(name, label, options);
+  },
+  switch: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.switch(name, label, options);
+  },
+  radio: (name, label, options, fieldOptions) => {
+    const builder = new TypeInferredBuilder();
+    return builder.radio(name, label, options, fieldOptions);
+  },
+  slider: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.slider(name, label, options);
+  },
+  date: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.date(name, label, options);
+  },
+  file: (name, label, options) => {
+    const builder = new TypeInferredBuilder();
+    return builder.file(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({
+      name,
+      label,
+      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({
+      name,
+      label,
+      type,
+      ...props
+    });
+    return this;
+  }
+  /**
+   * Add a field with template literal path
+   * Usage: builder.field`user.profile.name`("Full Name")
+   */
+  fieldTemplate(path, ...args) {
+    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({
+      name: fullPath,
+      label,
+      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({
+      name: fullPath,
+      label,
+      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({
+      name: this.path,
+      label,
+      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, fields, enabled = true } = 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,
+    mode = "onChange",
+    reValidateMode = "onChange",
+    shouldFocusError = true,
+    shouldUnregister = false,
+    delayError = 0
+  } = options;
+  return useForm3({
+    resolver: zodResolver ? zodResolver(schema) : void 0,
+    defaultValues,
+    mode,
+    reValidateMode,
+    shouldFocusError,
+    shouldUnregister,
+    delayError
+  });
+}
+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, validate = false } = 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);
+}
+function useBatchedFieldUpdates(form, fields) {
+  const batchRef = useRef2({});
+  const timeoutRef = useRef2(void 0);
+  const batchUpdate = useCallback3((fieldName, value) => {
+    batchRef.current[fieldName] = value;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      Object.entries(batchRef.current).forEach(([key, val]) => {
+        form.setValue(key, val);
+      });
+      batchRef.current = {};
+    }, 16);
+  }, [form]);
+  return { batchUpdate };
+}
+
+// src/builders/validation-helpers.ts
+import { z as z4 } from "zod";
+var validationPatterns = {
+  // Email validation
+  email: z4.string().email("Please enter a valid email address"),
+  // Phone number validation (US format)
+  phoneUS: z4.string().regex(
+    /^\(\d{3}\) \d{3}-\d{4}$/,
+    "Please enter a valid phone number (XXX) XXX-XXXX"
+  ),
+  // Phone number validation (international)
+  phoneInternational: z4.string().regex(
+    /^\+?[\d\s\-\(\)]+$/,
+    "Please enter a valid phone number"
+  ),
+  // URL validation
+  url: z4.string().url("Please enter a valid URL"),
+  // Password validation
+  password: z4.string().min(8, "Password must be at least 8 characters").regex(/[A-Z]/, "Password must contain at least one uppercase letter").regex(/[a-z]/, "Password must contain at least one lowercase letter").regex(/[0-9]/, "Password must contain at least one number").regex(/[^A-Za-z0-9]/, "Password must contain at least one special character"),
+  // Strong password validation
+  strongPassword: z4.string().min(12, "Password must be at least 12 characters").regex(/[A-Z]/, "Password must contain at least one uppercase letter").regex(/[a-z]/, "Password must contain at least one lowercase letter").regex(/[0-9]/, "Password must contain at least one number").regex(/[^A-Za-z0-9]/, "Password must contain at least one special character"),
+  // Credit card validation
+  creditCard: z4.string().regex(
+    /^[0-9]{4}[\s\-]?[0-9]{4}[\s\-]?[0-9]{4}[\s\-]?[0-9]{4}$/,
+    "Please enter a valid credit card number"
+  ),
+  // SSN validation
+  ssn: z4.string().regex(
+    /^\d{3}-\d{2}-\d{4}$/,
+    "Please enter a valid SSN (XXX-XX-XXXX)"
+  ),
+  // ZIP code validation
+  zipCode: z4.string().regex(
+    /^\d{5}(-\d{4})?$/,
+    "Please enter a valid ZIP code"
+  ),
+  // Date validation (MM/DD/YYYY)
+  date: z4.string().regex(
+    /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/,
+    "Please enter a valid date (MM/DD/YYYY)"
+  ),
+  // 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)"
+  )
+};
+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 = {
+  required: (fieldName) => `${fieldName} is required`,
+  minLength: (fieldName, min) => `${fieldName} must be at least ${min} characters`,
+  maxLength: (fieldName, max) => `${fieldName} must be no more than ${max} characters`,
+  min: (fieldName, min) => `${fieldName} must be at least ${min}`,
+  max: (fieldName, max) => `${fieldName} must be no more than ${max}`,
+  pattern: (fieldName) => `${fieldName} format is invalid`,
+  email: () => "Please enter a valid email address",
+  url: () => "Please enter a valid URL",
+  phone: () => "Please enter a valid phone number",
+  date: () => "Please enter a valid date",
+  time: () => "Please enter a valid time"
+};
+var serverValidation = {
+  /**
+   * Apply server errors to form
+   */
+  applyServerErrors: (errors, setError) => {
+    Object.entries(errors).forEach(([field2, messages]) => {
+      setError(field2, {
+        type: "server",
+        message: messages[0]
+        // 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);
+    };
+  },
+  /**
+   * Validate form data against schema
+   */
+  validateForm: async (data, schema) => {
+    try {
+      await schema.parseAsync(data);
+      return { success: true, errors: {} };
+    } catch (error) {
+      if (error instanceof z4.ZodError) {
+        const errors = {};
+        error.issues.forEach((err) => {
+          const path = err.path.join(".");
+          errors[path] = err.message;
+        });
+        return { success: false, errors };
+      }
+      throw error;
+    }
+  },
+  /**
+   * Get field error message
+   */
+  getFieldError: (errors, field2) => {
+    return errors[field2];
+  },
+  /**
+   * Check if field has error
+   */
+  hasFieldError: (errors, field2) => {
+    return !!errors[field2];
+  }
+};
 export {
+  AdvancedFieldBuilder,
+  BasicFormBuilder,
   CheckboxField,
+  CommonFields,
+  ConditionalField,
   ConfigurableForm,
   DateField,
+  DynamicSectionField,
+  FieldArrayBuilder,
+  FieldArrayField,
+  FieldArrayItemBuilder,
   FileField,
   FontPickerField,
   FormField,
+  FormFieldHelpers,
   FormProvider,
+  FormStatus,
+  FormToast,
   HeroHookFormProvider,
   InputField,
   RadioGroupField,
@@ -1446,13 +3083,20 @@ export {
   SubmitButton,
   SwitchField,
   TextareaField,
+  TypeInferredBuilder,
   ZodForm,
   applyServerErrors,
+  asyncValidation,
   commonValidations,
+  createAdvancedBuilder,
+  createBasicFormBuilder,
   createConditionalSchema,
   createConfirmPasswordSchema,
   createDateSchema,
   createEmailSchema,
+  createField,
+  createFieldArrayBuilder,
+  createFieldArrayItemBuilder,
   createFileSchema,
   createFormTestUtils,
   createFutureDateSchema,
@@ -1460,24 +3104,47 @@ 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,
+  useBatchedFieldUpdates,
+  useDebouncedFieldValidation,
+  useDebouncedValidation,
+  useEnhancedFormState,
+  useFormContext5 as useFormContext,
   useFormHelper,
   useHeroForm,
   useHeroHookFormDefaults,
+  useInferredForm,
+  useMemoizedCallback,
+  useMemoizedFieldProps,
+  usePerformanceMonitor,
+  useTypeInferredForm,
   useZodForm,
+  validationPatterns,
+  validationUtils,
   waitForFormState
 };