@rachelallyson/hero-hook-form 2.6.0 → 2.7.2

package/dist/index.js

@@ -6,7 +6,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/Form.tsx
-import React18 from "react";
+import React20 from "react";
 import { Button as Button3 } from "@heroui/react";
 
 // src/hooks/useFormHelper.ts
@@ -24,7 +24,9 @@ function useFormHelper({
     isSubmitting: false,
     isSuccess: false
   });
-  const form = methods ?? useForm({ defaultValues });
+  const form = methods ?? useForm({
+    ...defaultValues && { defaultValues }
+  });
   const handleSubmit = async () => {
     setSubmissionState((prev) => ({
       ...prev,
@@ -64,6 +66,7 @@ function useFormHelper({
   };
   return {
     error: submissionState.error,
+    // useForm returns UseFormReturn<T, any, T> which is structurally compatible with UseFormReturn<T>
     form,
     handleSubmit,
     isSubmitted: submissionState.isSubmitted,
@@ -74,9 +77,15 @@ function useFormHelper({
   };
 }
 
+// src/types.ts
+function pathToString(path) {
+  if (path === void 0) return "";
+  return path;
+}
+
 // src/components/FormField.tsx
-import React17 from "react";
-import { useWatch as useWatch3 } from "react-hook-form";
+import React19 from "react";
+import { get, useWatch as useWatch3 } from "react-hook-form";
 
 // src/fields/AutocompleteField.tsx
 import React from "react";
@@ -129,6 +138,7 @@ function AutocompleteField(props) {
             isDisabled,
             isInvalid: Boolean(fieldState.error),
             label,
+            name,
             placeholder,
             selectedKey: allowsCustomValue ? void 0 : hasSelectedValue ? String(selectedKey) : void 0,
             inputValue: shouldShowInputValue ? field2.value ?? "" : void 0,
@@ -171,81 +181,93 @@ function HeroHookFormProvider(props) {
   const value = useMemo(() => props.defaults ?? {}, [props.defaults]);
   return /* @__PURE__ */ React2.createElement(DefaultsContext.Provider, { value }, props.children);
 }
+function extractInputCommon(common) {
+  const result = {};
+  if (common.color !== void 0) {
+    const color = common.color;
+    result.color = color;
+  }
+  if (common.size !== void 0) {
+    const size = common.size;
+    result.size = size;
+  }
+  if (common.variant !== void 0) {
+    const variant = common.variant;
+    result.variant = variant;
+  }
+  if (common.radius !== void 0) {
+    const radius = common.radius;
+    result.radius = radius;
+  }
+  if (common.labelPlacement !== void 0) {
+    const labelPlacement = common.labelPlacement;
+    result.labelPlacement = labelPlacement;
+  }
+  return result;
+}
+function extractTextareaCommon(common) {
+  const result = {};
+  if (common.color !== void 0) {
+    const color = common.color;
+    result.color = color;
+  }
+  if (common.size !== void 0) {
+    const size = common.size;
+    result.size = size;
+  }
+  if (common.variant !== void 0) {
+    const variant = common.variant;
+    result.variant = variant;
+  }
+  if (common.radius !== void 0) {
+    const radius = common.radius;
+    result.radius = radius;
+  }
+  if (common.labelPlacement !== void 0) {
+    const labelPlacement = common.labelPlacement;
+    result.labelPlacement = labelPlacement;
+  }
+  return result;
+}
+function extractSelectCommon(common) {
+  const result = {};
+  if (common.color !== void 0) {
+    const color = common.color;
+    result.color = color;
+  }
+  if (common.size !== void 0) {
+    const size = common.size;
+    result.size = size;
+  }
+  if (common.variant !== void 0) {
+    const variant = common.variant;
+    result.variant = variant;
+  }
+  if (common.radius !== void 0) {
+    const radius = common.radius;
+    result.radius = radius;
+  }
+  if (common.labelPlacement !== void 0) {
+    const labelPlacement = common.labelPlacement;
+    result.labelPlacement = labelPlacement;
+  }
+  return result;
+}
 function useHeroHookFormDefaults() {
   const cfg = useContext(DefaultsContext) ?? {};
   const common = cfg.common ?? {};
-  const commonInput = {
-    ...common.color !== void 0 ? { color: common.color } : {},
-    ...common.size !== void 0 ? { size: common.size } : {},
-    ...common.variant !== void 0 ? { variant: common.variant } : {},
-    ...common.radius !== void 0 ? { radius: common.radius } : {},
-    ...common.labelPlacement !== void 0 ? {
-      labelPlacement: common.labelPlacement
-    } : {}
-  };
-  const commonTextarea = {
-    ...common.color !== void 0 ? { color: common.color } : {},
-    ...common.size !== void 0 ? { size: common.size } : {},
-    ...common.variant !== void 0 ? { variant: common.variant } : {},
-    ...common.radius !== void 0 ? { radius: common.radius } : {},
-    ...common.labelPlacement !== void 0 ? {
-      labelPlacement: common.labelPlacement
-    } : {}
-  };
-  const commonSelect = {
-    ...common.color !== void 0 ? { color: common.color } : {},
-    ...common.size !== void 0 ? { size: common.size } : {},
-    ...common.variant !== void 0 ? { variant: common.variant } : {},
-    ...common.radius !== void 0 ? { radius: common.radius } : {},
-    ...common.labelPlacement !== void 0 ? {
-      labelPlacement: common.labelPlacement
-    } : {}
-  };
-  const commonCheckbox = {
-    ...common.color !== void 0 ? {
-      color: common.color
-    } : {},
-    ...common.size !== void 0 ? { size: common.size } : {}
-  };
-  const commonRadioGroup = {
-    ...common.color !== void 0 ? {
-      color: common.color
-    } : {},
-    ...common.size !== void 0 ? { size: common.size } : {}
-  };
-  const commonDateInput = {
-    ...common.color !== void 0 ? {
-      color: common.color
-    } : {},
-    ...common.size !== void 0 ? { size: common.size } : {},
-    ...common.variant !== void 0 ? {
-      variant: common.variant
-    } : {},
-    ...common.radius !== void 0 ? {
-      radius: common.radius
-    } : {}
-  };
-  const commonSlider = {
-    ...common.color !== void 0 ? { color: common.color } : {},
-    ...common.size !== void 0 ? { size: common.size } : {}
-  };
-  const commonSwitch = {
-    ...common.color !== void 0 ? { color: common.color } : {},
-    ...common.size !== void 0 ? { size: common.size } : {}
-  };
-  const commonButton = {
-    ...common.color !== void 0 ? { color: common.color } : {},
-    ...common.size !== void 0 ? { size: common.size } : {}
-  };
+  const commonInput = extractInputCommon(common);
+  const commonTextarea = extractTextareaCommon(common);
+  const commonSelect = extractSelectCommon(common);
   return {
-    checkbox: { ...commonCheckbox, ...cfg.checkbox ?? {} },
-    dateInput: { ...commonDateInput, ...cfg.dateInput ?? {} },
+    checkbox: cfg.checkbox ?? {},
+    dateInput: cfg.dateInput ?? {},
     input: { ...commonInput, ...cfg.input ?? {} },
-    radioGroup: { ...commonRadioGroup, ...cfg.radioGroup ?? {} },
+    radioGroup: cfg.radioGroup ?? {},
     select: { ...commonSelect, ...cfg.select ?? {} },
-    slider: { ...commonSlider, ...cfg.slider ?? {} },
-    submitButton: { ...commonButton, ...cfg.submitButton ?? {} },
-    switch: { ...commonSwitch, ...cfg.switch ?? {} },
+    slider: cfg.slider ?? {},
+    submitButton: cfg.submitButton ?? {},
+    switch: cfg.switch ?? {},
     textarea: { ...commonTextarea, ...cfg.textarea ?? {} }
   };
 }
@@ -263,31 +285,111 @@ function CheckboxField(props) {
     rules
   } = props;
   const defaults = useHeroHookFormDefaults();
+  const checkboxValue = checkboxProps?.value ?? "on";
   return /* @__PURE__ */ React3.createElement(
     Controller2,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React3.createElement("div", { className }, /* @__PURE__ */ React3.createElement(
-        Checkbox,
-        {
-          ...defaults.checkbox,
-          ...checkboxProps,
-          isDisabled,
-          isInvalid: Boolean(fieldState.error),
-          isSelected: Boolean(field2.value),
-          onBlur: field2.onBlur,
-          onValueChange: (val) => field2.onChange(val)
-        },
-        label
-      ), description ? /* @__PURE__ */ React3.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React3.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      render: ({ field: field2, fieldState }) => {
+        const containerRef = React3.useRef(null);
+        React3.useLayoutEffect(() => {
+          const setValue = () => {
+            if (containerRef.current) {
+              const input = containerRef.current.querySelector(
+                `input[type="checkbox"][name="${name}"]`
+              );
+              if (input instanceof HTMLInputElement) {
+                input.setAttribute("value", checkboxValue);
+                input.value = checkboxValue;
+              }
+            }
+          };
+          setValue();
+          const timeoutId = setTimeout(setValue, 0);
+          return () => clearTimeout(timeoutId);
+        }, [name, checkboxValue, field2.value]);
+        return /* @__PURE__ */ React3.createElement("div", { ref: containerRef, className }, /* @__PURE__ */ React3.createElement(
+          Checkbox,
+          {
+            ...defaults.checkbox,
+            ...checkboxProps,
+            isDisabled,
+            isInvalid: Boolean(fieldState.error),
+            isSelected: Boolean(field2.value),
+            name,
+            value: checkboxValue,
+            onBlur: field2.onBlur,
+            onValueChange: (val) => field2.onChange(val)
+          },
+          label
+        ), description ? /* @__PURE__ */ React3.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React3.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null);
+      },
       rules
     }
   );
 }
 
-// src/fields/ConditionalField.tsx
+// src/fields/CheckboxGroupField.tsx
 import React4 from "react";
+import { Controller as Controller3 } from "react-hook-form";
+function CheckboxGroupField(props) {
+  const {
+    checkboxProps,
+    className,
+    control,
+    description,
+    isDisabled,
+    label,
+    name,
+    options,
+    orientation = "vertical",
+    rules
+  } = props;
+  const defaults = useHeroHookFormDefaults();
+  return /* @__PURE__ */ React4.createElement(
+    Controller3,
+    {
+      control,
+      name,
+      render: ({ field: field2, fieldState }) => {
+        const currentValues = field2.value || [];
+        const handleCheckboxChange = (optionValue, checked) => {
+          if (checked) {
+            if (!currentValues.includes(optionValue)) {
+              field2.onChange([...currentValues, optionValue]);
+            }
+          } else {
+            field2.onChange(currentValues.filter((val) => val !== optionValue));
+          }
+        };
+        const containerClass = orientation === "horizontal" ? "flex flex-row gap-4 flex-wrap" : "flex flex-col gap-2";
+        return /* @__PURE__ */ React4.createElement("div", { className }, label && /* @__PURE__ */ React4.createElement("label", { className: "text-sm font-medium text-foreground block mb-2" }, label), description && /* @__PURE__ */ React4.createElement("p", { className: "text-sm text-default-500 mb-2" }, description), /* @__PURE__ */ React4.createElement("div", { className: containerClass }, options.map((option) => {
+          const isSelected = currentValues.includes(option.value);
+          return /* @__PURE__ */ React4.createElement(
+            Checkbox,
+            {
+              key: String(option.value),
+              ...defaults.checkbox,
+              ...checkboxProps,
+              isDisabled: isDisabled || option.disabled,
+              isInvalid: Boolean(fieldState.error),
+              isSelected,
+              name,
+              onBlur: field2.onBlur,
+              onValueChange: (checked) => handleCheckboxChange(option.value, checked)
+            },
+            option.label
+          );
+        })), fieldState.error?.message ? /* @__PURE__ */ React4.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null);
+      },
+      rules
+    }
+  );
+}
+
+// src/fields/ConditionalField.tsx
+import React5 from "react";
 import { useWatch, useFormContext } from "react-hook-form";
 function ConditionalField({
   className,
@@ -301,7 +403,7 @@ function ConditionalField({
   if (!shouldShow) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement("div", { className }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement(
     FormField,
     {
       config: field2,
@@ -317,29 +419,29 @@ function ConditionalField({
 }
 
 // src/fields/ContentField.tsx
-import React5 from "react";
+import React6 from "react";
 function ContentField({
   config,
   form,
   submissionState
 }) {
   if (config.render) {
-    return /* @__PURE__ */ React5.createElement("div", { className: config.className }, config.render({
+    return /* @__PURE__ */ React6.createElement("div", { className: config.className }, config.render({
       errors: form.formState.errors,
       form,
       isSubmitting: submissionState.isSubmitting
     }));
   }
-  return /* @__PURE__ */ React5.createElement("div", { className: config.className }, config.title && /* @__PURE__ */ React5.createElement("h3", { className: "text-lg font-semibold text-foreground mb-2" }, config.title), config.description && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-muted-foreground" }, config.description));
+  return /* @__PURE__ */ React6.createElement("div", { className: config.className }, config.title && /* @__PURE__ */ React6.createElement("h3", { className: "text-lg font-semibold text-foreground mb-2" }, config.title), config.description && /* @__PURE__ */ React6.createElement("p", { className: "text-sm text-muted-foreground" }, config.description));
 }
 
 // src/fields/DateField.tsx
-import React6 from "react";
-import { Controller as Controller3 } from "react-hook-form";
+import React7 from "react";
+import { Controller as Controller4 } from "react-hook-form";
 function CoercedDateInput(props) {
   const { dateProps, description, disabled, errorMessage, field: field2, label } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     DateInput,
     {
       ...defaults.dateInput,
@@ -349,6 +451,7 @@ function CoercedDateInput(props) {
       isDisabled: disabled,
       isInvalid: Boolean(errorMessage),
       label,
+      name: field2.name,
       value: field2.value ?? null,
       onBlur: field2.onBlur,
       onChange: field2.onChange
@@ -367,12 +470,12 @@ function DateField(props) {
     rules,
     transform
   } = props;
-  return /* @__PURE__ */ React6.createElement(
-    Controller3,
+  return /* @__PURE__ */ React7.createElement(
+    Controller4,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React6.createElement("div", { className }, /* @__PURE__ */ React6.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React7.createElement("div", { className }, /* @__PURE__ */ React7.createElement(
         CoercedDateInput,
         {
           dateProps,
@@ -392,7 +495,7 @@ function DateField(props) {
 }
 
 // src/fields/DynamicSectionField.tsx
-import React7 from "react";
+import React8 from "react";
 import { useWatch as useWatch2, useFormContext as useFormContext2 } from "react-hook-form";
 function DynamicSectionField({
   className,
@@ -406,7 +509,7 @@ function DynamicSectionField({
   if (!shouldShow) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement("div", { className }, (title || description) && /* @__PURE__ */ React7.createElement("div", { className: "mb-6" }, title && /* @__PURE__ */ React7.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-2" }, title), description && /* @__PURE__ */ React7.createElement("p", { className: "text-sm text-gray-600" }, description)), /* @__PURE__ */ React7.createElement("div", { className: "space-y-4" }, fields.map((fieldConfig, index) => /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement("div", { className }, (title || description) && /* @__PURE__ */ React8.createElement("div", { className: "mb-6" }, title && /* @__PURE__ */ React8.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-2" }, title), description && /* @__PURE__ */ React8.createElement("p", { className: "text-sm text-gray-600" }, description)), /* @__PURE__ */ React8.createElement("div", { className: "space-y-4" }, fields.map((fieldConfig, index) => /* @__PURE__ */ React8.createElement(
     FormField,
     {
       key: `${fieldConfig.name}-${index}`,
@@ -423,7 +526,7 @@ function DynamicSectionField({
 }
 
 // src/fields/FieldArrayField.tsx
-import React8 from "react";
+import React9 from "react";
 import { useFieldArray, useFormContext as useFormContext3 } from "react-hook-form";
 import { Button as Button2 } from "@heroui/react";
 function FieldArrayField({
@@ -432,71 +535,61 @@ function FieldArrayField({
 }) {
   const {
     addButtonText = "Add Item",
+    defaultItem,
+    enableReordering = false,
     fields: fieldConfigs,
     max = 10,
     min = 0,
     name,
-    removeButtonText = "Remove"
+    removeButtonText = "Remove",
+    renderAddButton,
+    renderItem,
+    reorderButtonText = { down: "\u2193", up: "\u2191" }
   } = config;
   const form = useFormContext3();
   if (!form || !form.control) {
     return null;
   }
   const { control } = form;
-  const { append, fields, remove } = useFieldArray({
+  const { append, fields, move, 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 getFieldPath = (fieldName, itemIndex) => {
+    return `${String(name)}.${itemIndex}.${fieldName}`;
   };
-  const handleRemove = (index) => {
-    if (canRemove) {
-      remove(index);
+  const processFieldConfig = (fieldConfig, itemIndex) => {
+    const fieldName = String(fieldConfig.name);
+    const fullPath = getFieldPath(fieldName, itemIndex);
+    if ("dependsOn" in fieldConfig && fieldConfig.dependsOn && typeof fieldConfig.dependsOn === "string") {
+      const dependsOnPath = fieldConfig.dependsOn;
+      const arrayNamePrefix = `${String(name)}.`;
+      if (!dependsOnPath.startsWith(arrayNamePrefix)) {
+        const nestedDependsOn = getFieldPath(dependsOnPath, itemIndex);
+        return {
+          ...fieldConfig,
+          dependsOn: nestedDependsOn,
+          name: fullPath,
+          ..."dependsOnValue" in fieldConfig && {
+            dependsOnValue: fieldConfig.dependsOnValue
+          }
+        };
+      }
     }
+    return {
+      ...fieldConfig,
+      name: fullPath
+    };
   };
-  return /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement("div", { className: "space-y-4" }, fields.map((field2, index) => /* @__PURE__ */ React8.createElement(
-    "div",
-    {
-      key: field2.id,
-      className: "border border-gray-200 rounded-lg p-4 space-y-4"
-    },
-    /* @__PURE__ */ React8.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React8.createElement("h4", { className: "text-sm font-medium text-gray-700" }, config.label, " #", index + 1), canRemove && /* @__PURE__ */ React8.createElement(
-      Button2,
-      {
-        size: "sm",
-        variant: "light",
-        color: "danger",
-        startContent: "\u{1F5D1}\uFE0F",
-        onPress: () => handleRemove(index),
-        "aria-label": `${removeButtonText} ${config.label} ${index + 1}`
-      },
-      removeButtonText
-    )),
-    /* @__PURE__ */ React8.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, fieldConfigs.map((fieldConfig) => /* @__PURE__ */ React8.createElement(
+  const renderField = (fieldConfig, itemIndex) => {
+    const processedConfig = processFieldConfig(fieldConfig, itemIndex);
+    return /* @__PURE__ */ React9.createElement(
       FormField,
       {
-        key: `${fieldConfig.name}-${index}`,
-        config: {
-          ...fieldConfig,
-          name: `${name}.${index}.${fieldConfig.name}`
-        },
+        key: `${fieldConfig.name}-${itemIndex}`,
+        config: processedConfig,
         form,
         submissionState: {
           error: void 0,
@@ -505,31 +598,125 @@ function FieldArrayField({
           isSuccess: false
         }
       }
-    )))
-  )), canAdd && /* @__PURE__ */ React8.createElement(
-    Button2,
-    {
-      variant: "bordered",
-      startContent: "\u2795",
-      onPress: handleAdd,
-      className: "w-full"
-    },
-    addButtonText
-  ), fields.length === 0 && /* @__PURE__ */ React8.createElement("div", { className: "text-center py-8 text-gray-500" }, /* @__PURE__ */ React8.createElement("p", null, "No ", config.label?.toLowerCase(), " added yet."), /* @__PURE__ */ React8.createElement(
-    Button2,
-    {
-      variant: "bordered",
-      startContent: "\u2795",
-      onPress: handleAdd,
-      className: "mt-2"
-    },
-    addButtonText
-  ))));
+    );
+  };
+  const handleAdd = () => {
+    if (canAdd) {
+      if (defaultItem) {
+        append(defaultItem());
+      } else {
+        console.warn(
+          `FieldArrayField: defaultItem is required for field array "${String(name)}". Please provide a defaultItem function that returns the default item structure.`
+        );
+      }
+    }
+  };
+  const handleRemove = (index) => {
+    if (canRemove) {
+      remove(index);
+    }
+  };
+  const handleMoveUp = (index) => {
+    if (index > 0) {
+      move(index, index - 1);
+    }
+  };
+  const handleMoveDown = (index) => {
+    if (index < fields.length - 1) {
+      move(index, index + 1);
+    }
+  };
+  const renderFieldArrayItems = () => {
+    return fields.map((field2, index) => {
+      const canMoveUp = enableReordering && index > 0;
+      const canMoveDown = enableReordering && index < fields.length - 1;
+      const itemCanRemove = canRemove;
+      const fieldElements = fieldConfigs.map(
+        (fieldConfig) => renderField(fieldConfig, index)
+      );
+      if (renderItem) {
+        return /* @__PURE__ */ React9.createElement(React9.Fragment, { key: field2.id }, renderItem({
+          canMoveDown,
+          canMoveUp,
+          canRemove: itemCanRemove,
+          children: /* @__PURE__ */ React9.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, fieldElements),
+          field: field2,
+          fields,
+          index,
+          onMoveDown: () => handleMoveDown(index),
+          onMoveUp: () => handleMoveUp(index),
+          onRemove: () => handleRemove(index)
+        }));
+      }
+      return /* @__PURE__ */ React9.createElement(
+        "div",
+        {
+          key: field2.id,
+          className: "border border-gray-200 rounded-lg p-4 space-y-4"
+        },
+        /* @__PURE__ */ React9.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React9.createElement("h4", { className: "text-sm font-medium text-gray-700" }, config.label, " #", index + 1), /* @__PURE__ */ React9.createElement("div", { className: "flex gap-2" }, enableReordering && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+          Button2,
+          {
+            size: "sm",
+            variant: "light",
+            isDisabled: !canMoveUp,
+            onPress: () => handleMoveUp(index),
+            "aria-label": `Move ${config.label} ${index + 1} up`
+          },
+          reorderButtonText.up
+        ), /* @__PURE__ */ React9.createElement(
+          Button2,
+          {
+            size: "sm",
+            variant: "light",
+            isDisabled: !canMoveDown,
+            onPress: () => handleMoveDown(index),
+            "aria-label": `Move ${config.label} ${index + 1} down`
+          },
+          reorderButtonText.down
+        )), itemCanRemove && /* @__PURE__ */ React9.createElement(
+          Button2,
+          {
+            size: "sm",
+            variant: "light",
+            color: "danger",
+            startContent: "\u{1F5D1}\uFE0F",
+            onPress: () => handleRemove(index),
+            "aria-label": `${removeButtonText} ${config.label} ${index + 1}`
+          },
+          removeButtonText
+        ))),
+        /* @__PURE__ */ React9.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, fieldElements)
+      );
+    });
+  };
+  const renderAddButtonElement = () => {
+    if (renderAddButton) {
+      return renderAddButton({
+        canAdd,
+        onAdd: handleAdd
+      });
+    }
+    if (!canAdd) {
+      return null;
+    }
+    return /* @__PURE__ */ React9.createElement(
+      Button2,
+      {
+        variant: "bordered",
+        startContent: "\u2795",
+        onPress: handleAdd,
+        className: "w-full"
+      },
+      addButtonText
+    );
+  };
+  return /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement("div", { className: "space-y-4" }, fields.length > 0 ? renderFieldArrayItems() : /* @__PURE__ */ React9.createElement("div", { className: "text-center py-8 text-gray-500" }, /* @__PURE__ */ React9.createElement("p", null, "No ", config.label?.toLowerCase(), " added yet."), renderAddButtonElement()), fields.length > 0 && renderAddButtonElement()));
 }
 
 // src/fields/FileField.tsx
-import React9 from "react";
-import { Controller as Controller4 } from "react-hook-form";
+import React10 from "react";
+import { Controller as Controller5 } from "react-hook-form";
 function CoercedFileInput(props) {
   const {
     accept,
@@ -542,7 +729,7 @@ function CoercedFileInput(props) {
     multiple
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     Input,
     {
       ...defaults.input,
@@ -554,10 +741,14 @@ function CoercedFileInput(props) {
       isInvalid: Boolean(errorMessage),
       label,
       multiple,
+      name: field2.name,
       type: "file",
       value: field2.value ? "" : "",
       onBlur: field2.onBlur,
       onChange: (e) => {
+        if (!(e.target instanceof HTMLInputElement)) {
+          return;
+        }
         const target = e.target;
         field2.onChange(target.files);
       }
@@ -578,12 +769,12 @@ function FileField(props) {
     rules,
     transform
   } = props;
-  return /* @__PURE__ */ React9.createElement(
-    Controller4,
+  return /* @__PURE__ */ React10.createElement(
+    Controller5,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React10.createElement("div", { className }, /* @__PURE__ */ React10.createElement(
         CoercedFileInput,
         {
           accept,
@@ -605,8 +796,8 @@ function FileField(props) {
 }
 
 // src/fields/FontPickerField.tsx
-import React10 from "react";
-import { Controller as Controller5 } from "react-hook-form";
+import React11 from "react";
+import { Controller as Controller6 } from "react-hook-form";
 var FontPickerComponent = null;
 var fontPickerLoaded = false;
 var fontPickerLoading = false;
@@ -622,12 +813,12 @@ function FontPickerField(props) {
     name,
     rules
   } = props;
-  const [fontPickerState, setFontPickerState] = React10.useState({
+  const [fontPickerState, setFontPickerState] = React11.useState({
     component: FontPickerComponent,
     error: null,
     loading: false
   });
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (fontPickerLoaded && FontPickerComponent) {
       setFontPickerState({
         component: FontPickerComponent,
@@ -685,17 +876,17 @@ function FontPickerField(props) {
     void loadFontPicker();
   }, []);
   if (fontPickerState.loading) {
-    return /* @__PURE__ */ React10.createElement("div", { className }, /* @__PURE__ */ React10.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React10.createElement("div", { className: "p-4 border border-default-200 bg-default-50 rounded-medium" }, /* @__PURE__ */ React10.createElement("p", { className: "text-default-600 text-sm" }, "Loading font picker..."))));
+    return /* @__PURE__ */ React11.createElement("div", { className }, /* @__PURE__ */ React11.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React11.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React11.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React11.createElement("div", { className: "p-4 border border-default-200 bg-default-50 rounded-medium" }, /* @__PURE__ */ React11.createElement("p", { className: "text-default-600 text-sm" }, "Loading font picker..."))));
   }
   if (!fontPickerState.component) {
-    return /* @__PURE__ */ React10.createElement("div", { className }, /* @__PURE__ */ React10.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React10.createElement("div", { className: "p-4 border border-warning-200 bg-warning-50 rounded-medium" }, /* @__PURE__ */ React10.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__ */ React11.createElement("div", { className }, /* @__PURE__ */ React11.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React11.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React11.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React11.createElement("div", { className: "p-4 border border-warning-200 bg-warning-50 rounded-medium" }, /* @__PURE__ */ React11.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__ */ React10.createElement(
-    Controller5,
+  return /* @__PURE__ */ React11.createElement(
+    Controller6,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React10.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React11.createElement(
         fontPickerState.component,
         {
           label,
@@ -714,12 +905,12 @@ function FontPickerField(props) {
 }
 
 // src/fields/InputField.tsx
-import React11 from "react";
-import { Controller as Controller6 } from "react-hook-form";
+import React12 from "react";
+import { Controller as Controller7 } from "react-hook-form";
 function CoercedInput(props) {
   const { description, disabled, errorMessage, field: field2, inputProps, label } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     Input,
     {
       ...defaults.input,
@@ -729,13 +920,14 @@ function CoercedInput(props) {
       isDisabled: disabled,
       isInvalid: Boolean(errorMessage),
       label,
+      name: field2.name,
       value: field2.value ?? "",
       onBlur: field2.onBlur,
       onValueChange: field2.onChange
     }
   );
 }
-var InputField = React11.memo(
+var InputField = React12.memo(
   (props) => {
     const {
       className,
@@ -748,12 +940,12 @@ var InputField = React11.memo(
       rules,
       transform
     } = props;
-    return /* @__PURE__ */ React11.createElement(
-      Controller6,
+    return /* @__PURE__ */ React12.createElement(
+      Controller7,
       {
         control,
         name,
-        render: ({ field: field2, fieldState }) => /* @__PURE__ */ React11.createElement("div", { className }, /* @__PURE__ */ React11.createElement(
+        render: ({ field: field2, fieldState }) => /* @__PURE__ */ React12.createElement("div", { className }, /* @__PURE__ */ React12.createElement(
           CoercedInput,
           {
             description,
@@ -783,8 +975,8 @@ var InputField = React11.memo(
 );
 
 // src/fields/RadioGroupField.tsx
-import React12 from "react";
-import { Controller as Controller7 } from "react-hook-form";
+import React13 from "react";
+import { Controller as Controller8 } from "react-hook-form";
 function RadioGroupField(props) {
   const {
     className,
@@ -798,12 +990,12 @@ function RadioGroupField(props) {
     rules
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React12.createElement(
-    Controller7,
+  return /* @__PURE__ */ React13.createElement(
+    Controller8,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React12.createElement("div", { className }, /* @__PURE__ */ React12.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React13.createElement("div", { className }, /* @__PURE__ */ React13.createElement(
         RadioGroup,
         {
           ...defaults.radioGroup,
@@ -812,11 +1004,12 @@ function RadioGroupField(props) {
           isDisabled,
           isInvalid: Boolean(fieldState.error),
           label,
+          name,
           value: String(field2.value ?? ""),
           onBlur: field2.onBlur,
           onValueChange: (val) => field2.onChange(val)
         },
-        options.map((opt) => /* @__PURE__ */ React12.createElement(
+        options.map((opt) => /* @__PURE__ */ React13.createElement(
           Radio,
           {
             key: String(opt.value),
@@ -825,15 +1018,15 @@ function RadioGroupField(props) {
           },
           opt.label
         ))
-      ), fieldState.error?.message ? /* @__PURE__ */ React12.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      ), fieldState.error?.message ? /* @__PURE__ */ React13.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
       rules
     }
   );
 }
 
 // src/fields/SelectField.tsx
-import React13 from "react";
-import { Controller as Controller8 } from "react-hook-form";
+import React14 from "react";
+import { Controller as Controller9 } from "react-hook-form";
 function SelectField(props) {
   const {
     className,
@@ -848,14 +1041,14 @@ function SelectField(props) {
     selectProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React13.createElement(
-    Controller8,
+  return /* @__PURE__ */ React14.createElement(
+    Controller9,
     {
       control,
       name,
       render: ({ field: field2, fieldState }) => {
         const selectedKey = field2.value;
-        return /* @__PURE__ */ React13.createElement("div", { className }, /* @__PURE__ */ React13.createElement(
+        return /* @__PURE__ */ React14.createElement("div", { className }, /* @__PURE__ */ React14.createElement(
           Select,
           {
             ...defaults.select,
@@ -865,6 +1058,7 @@ function SelectField(props) {
             isDisabled,
             isInvalid: Boolean(fieldState.error),
             label,
+            name,
             placeholder,
             selectedKeys: selectedKey != null ? /* @__PURE__ */ new Set([String(selectedKey)]) : /* @__PURE__ */ new Set(),
             onSelectionChange: (keys) => {
@@ -873,7 +1067,7 @@ function SelectField(props) {
               field2.onChange(next);
             }
           },
-          options.map((opt) => /* @__PURE__ */ React13.createElement(
+          options.map((opt) => /* @__PURE__ */ React14.createElement(
             SelectItem,
             {
               key: String(opt.value),
@@ -890,12 +1084,12 @@ function SelectField(props) {
 }
 
 // src/fields/SliderField.tsx
-import React14 from "react";
-import { Controller as Controller9 } from "react-hook-form";
+import React15 from "react";
+import { Controller as Controller10 } from "react-hook-form";
 function CoercedSlider(props) {
   const { description, disabled, errorMessage, field: field2, label, sliderProps } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     Slider,
     {
       ...defaults.slider,
@@ -905,6 +1099,7 @@ function CoercedSlider(props) {
       isDisabled: disabled,
       isInvalid: Boolean(errorMessage),
       label,
+      name: field2.name,
       value: field2.value ?? 0,
       onBlur: field2.onBlur,
       onValueChange: field2.onChange
@@ -923,12 +1118,12 @@ function SliderField(props) {
     sliderProps,
     transform
   } = props;
-  return /* @__PURE__ */ React14.createElement(
-    Controller9,
+  return /* @__PURE__ */ React15.createElement(
+    Controller10,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React14.createElement("div", { className }, /* @__PURE__ */ React14.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React15.createElement("div", { className }, /* @__PURE__ */ React15.createElement(
         CoercedSlider,
         {
           description,
@@ -947,46 +1142,161 @@ function SliderField(props) {
   );
 }
 
-// src/fields/SwitchField.tsx
-import React15 from "react";
-import { Controller as Controller10 } from "react-hook-form";
-function SwitchField(props) {
+// src/fields/StringArrayField.tsx
+import React16, { useState as useState2 } from "react";
+import { Controller as Controller11 } from "react-hook-form";
+function StringArrayInput(props) {
   const {
-    className,
-    control,
     description,
-    isDisabled,
+    disabled,
+    errorMessage,
+    field: field2,
     label,
-    name,
-    rules,
-    switchProps
+    stringArrayProps
   } = props;
-  const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React15.createElement(
-    Controller10,
-    {
-      control,
-      name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React15.createElement("div", { className }, /* @__PURE__ */ React15.createElement(
-        Switch,
-        {
-          ...defaults.switch,
-          ...switchProps,
-          isDisabled,
-          isSelected: Boolean(field2.value),
-          onBlur: field2.onBlur,
-          onValueChange: (val) => field2.onChange(val)
-        },
-        label
-      ), description ? /* @__PURE__ */ React15.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React15.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
-      rules
+  const [inputValue, setInputValue] = useState2("");
+  const items = field2.value || [];
+  const {
+    addButtonText = "Add",
+    allowDuplicates = false,
+    maxItems,
+    minItems,
+    placeholder = "Add item...",
+    showAddButton = true,
+    transformItem = (item) => item.trim(),
+    validateItem = () => true
+  } = stringArrayProps || {};
+  const canAddMore = !maxItems || items.length < maxItems;
+  const handleAddItem = () => {
+    const trimmedValue = inputValue.trim();
+    if (!trimmedValue) return;
+    const transformedValue = transformItem(trimmedValue);
+    const validation = validateItem(transformedValue);
+    if (validation !== true) return;
+    if (!allowDuplicates && items.includes(transformedValue)) return;
+    const newItems = [...items, transformedValue];
+    field2.onChange(newItems);
+    setInputValue("");
+  };
+  const handleRemoveItem = (indexToRemove) => {
+    const newItems = items.filter((_, index) => index !== indexToRemove);
+    field2.onChange(newItems);
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (!showAddButton) {
+        handleAddItem();
+      }
+    }
+  };
+  return /* @__PURE__ */ React16.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React16.createElement("label", { className: "block text-sm font-medium text-foreground" }, label, minItems !== void 0 && /* @__PURE__ */ React16.createElement("span", { className: "text-xs text-muted-foreground ml-1" }, "(min ", minItems, ")"), maxItems !== void 0 && /* @__PURE__ */ React16.createElement("span", { className: "text-xs text-muted-foreground ml-1" }, "(max ", maxItems, ")")), description && /* @__PURE__ */ React16.createElement("p", { className: "text-sm text-muted-foreground" }, description), canAddMore && /* @__PURE__ */ React16.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React16.createElement(
+    Input,
+    {
+      className: "flex-1",
+      disabled,
+      placeholder,
+      value: inputValue,
+      onChange: (e) => setInputValue(e.target.value),
+      onKeyPress: handleKeyPress,
+      isInvalid: !!errorMessage,
+      errorMessage
+    }
+  ), showAddButton && /* @__PURE__ */ React16.createElement(
+    Button,
+    {
+      type: "button",
+      variant: "flat",
+      onClick: handleAddItem,
+      disabled: disabled || !inputValue.trim(),
+      size: "sm"
+    },
+    addButtonText
+  )), items.length > 0 && /* @__PURE__ */ React16.createElement("div", { className: "space-y-1" }, items.map((item, index) => /* @__PURE__ */ React16.createElement(
+    "div",
+    {
+      key: index,
+      className: "flex items-center gap-2 p-2 bg-content2 rounded-md"
+    },
+    /* @__PURE__ */ React16.createElement("span", { className: "flex-1 text-sm" }, item),
+    /* @__PURE__ */ React16.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "light",
+        size: "sm",
+        onClick: () => handleRemoveItem(index),
+        disabled,
+        className: "min-w-[60px]"
+      },
+      "Remove"
+    )
+  ))), minItems !== void 0 && items.length < minItems && /* @__PURE__ */ React16.createElement("p", { className: "text-xs text-danger" }, "At least ", minItems, " item", minItems === 1 ? "" : "s", " required"), maxItems !== void 0 && items.length >= maxItems && /* @__PURE__ */ React16.createElement("p", { className: "text-xs text-muted-foreground" }, "Maximum ", maxItems, " item", maxItems === 1 ? "" : "s", " allowed"));
+}
+function StringArrayField(props) {
+  const { control, label, name, rules, ...fieldProps } = props;
+  return /* @__PURE__ */ React16.createElement(
+    Controller11,
+    {
+      control,
+      name,
+      rules,
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React16.createElement(
+        StringArrayInput,
+        {
+          field: field2,
+          label,
+          description: fieldProps.description,
+          disabled: fieldProps.isDisabled,
+          errorMessage: fieldState.error?.message,
+          stringArrayProps: fieldProps.stringArrayProps
+        }
+      )
+    }
+  );
+}
+
+// src/fields/SwitchField.tsx
+import React17 from "react";
+import { Controller as Controller12 } from "react-hook-form";
+function SwitchField(props) {
+  const {
+    className,
+    control,
+    description,
+    isDisabled,
+    label,
+    name,
+    rules,
+    switchProps
+  } = props;
+  const defaults = useHeroHookFormDefaults();
+  return /* @__PURE__ */ React17.createElement(
+    Controller12,
+    {
+      control,
+      name,
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React17.createElement("div", { className }, /* @__PURE__ */ React17.createElement(
+        Switch,
+        {
+          ...defaults.switch,
+          ...switchProps,
+          isDisabled,
+          isSelected: Boolean(field2.value),
+          name,
+          onBlur: field2.onBlur,
+          onValueChange: (val) => field2.onChange(val)
+        },
+        label
+      ), description ? /* @__PURE__ */ React17.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React17.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      rules
     }
   );
 }
 
 // src/fields/TextareaField.tsx
-import React16 from "react";
-import { Controller as Controller11 } from "react-hook-form";
+import React18 from "react";
+import { Controller as Controller13 } from "react-hook-form";
 function TextareaField(props) {
   const {
     className,
@@ -999,12 +1309,12 @@ function TextareaField(props) {
     textareaProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React16.createElement(
-    Controller11,
+  return /* @__PURE__ */ React18.createElement(
+    Controller13,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React16.createElement("div", { className }, /* @__PURE__ */ React16.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React18.createElement("div", { className }, /* @__PURE__ */ React18.createElement(
         Textarea,
         {
           ...defaults.textarea,
@@ -1014,6 +1324,7 @@ function TextareaField(props) {
           isDisabled,
           isInvalid: Boolean(fieldState.error),
           label,
+          name: field2.name,
           value: field2.value ?? "",
           onBlur: field2.onBlur,
           onValueChange: field2.onChange
@@ -1025,213 +1336,319 @@ function TextareaField(props) {
 }
 
 // src/components/FormField.tsx
-var FormField = React17.memo(
-  ({
-    config,
-    form,
-    submissionState
-  }) => {
-    if (!form || !form.control) {
-      return null;
-    }
-    const { control } = form;
-    const watchedValues = useWatch3({ control });
-    if (config.type === "content") {
-      return /* @__PURE__ */ React17.createElement(
+function FormFieldComponent({
+  config,
+  form,
+  submissionState
+}) {
+  if (!form || !form.control) {
+    return null;
+  }
+  const { control } = form;
+  const watchedValues = useWatch3({ control });
+  const fieldConfig = config;
+  if ("type" in fieldConfig && fieldConfig.type === "content") {
+    if ("render" in fieldConfig || "content" in fieldConfig) {
+      return /* @__PURE__ */ React19.createElement(
         ContentField,
         {
-          config,
+          config: fieldConfig,
           form,
           submissionState
         }
       );
     }
-    if (config.condition && !config.condition(watchedValues)) {
+  }
+  if ("condition" in fieldConfig && fieldConfig.condition && !fieldConfig.condition(watchedValues)) {
+    return null;
+  }
+  if ("dependsOn" in fieldConfig && fieldConfig.dependsOn) {
+    const dependentValue = get(watchedValues, fieldConfig.dependsOn);
+    if ("dependsOnValue" in fieldConfig && fieldConfig.dependsOnValue !== void 0 && dependentValue !== fieldConfig.dependsOnValue) {
       return null;
     }
-    if (config.dependsOn) {
-      const dependentValue = watchedValues[config.dependsOn];
-      if (config.dependsOnValue !== void 0 && dependentValue !== config.dependsOnValue) {
+  }
+  const baseProps = {
+    ariaDescribedBy: "ariaDescribedBy" in fieldConfig ? fieldConfig.ariaDescribedBy : void 0,
+    ariaLabel: "ariaLabel" in fieldConfig ? fieldConfig.ariaLabel : void 0,
+    className: "className" in fieldConfig ? fieldConfig.className : void 0,
+    description: "description" in fieldConfig ? fieldConfig.description : void 0,
+    isDisabled: ("isDisabled" in fieldConfig ? fieldConfig.isDisabled : void 0) ?? submissionState.isSubmitting,
+    label: "label" in fieldConfig ? fieldConfig.label : void 0,
+    // name is Path<TFieldValues> | string, but FieldBaseProps expects Path<TFieldValues>
+    // We pass it directly to each component instead of through baseProps
+    rules: "rules" in fieldConfig ? fieldConfig.rules : void 0
+  };
+  switch (fieldConfig.type) {
+    case "input": {
+      return /* @__PURE__ */ React19.createElement(
+        InputField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          control,
+          defaultValue: "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0,
+          inputProps: "inputProps" in fieldConfig ? fieldConfig.inputProps : void 0
+        }
+      );
+    }
+    case "textarea": {
+      return /* @__PURE__ */ React19.createElement(
+        TextareaField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          control,
+          defaultValue: "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0,
+          textareaProps: "textareaProps" in fieldConfig ? fieldConfig.textareaProps : void 0
+        }
+      );
+    }
+    case "select": {
+      return /* @__PURE__ */ React19.createElement(
+        SelectField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          control,
+          defaultValue: "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0,
+          options: "options" in fieldConfig && fieldConfig.options ? fieldConfig.options.map((opt) => ({
+            label: opt.label,
+            value: String(opt.value)
+          })) : [],
+          selectProps: "selectProps" in fieldConfig ? fieldConfig.selectProps : void 0
+        }
+      );
+    }
+    case "autocomplete": {
+      return /* @__PURE__ */ React19.createElement(
+        AutocompleteField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          control,
+          defaultValue: "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0,
+          items: ("options" in fieldConfig && fieldConfig.options ? fieldConfig.options : []).map((opt) => ({
+            label: opt.label,
+            value: String(opt.value)
+          })),
+          autocompleteProps: "autocompleteProps" in fieldConfig ? fieldConfig.autocompleteProps : void 0
+        }
+      );
+    }
+    case "checkbox": {
+      return /* @__PURE__ */ React19.createElement(
+        CheckboxField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          checkboxProps: "checkboxProps" in fieldConfig ? fieldConfig.checkboxProps : void 0,
+          control,
+          defaultValue: "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0
+        }
+      );
+    }
+    case "checkboxGroup": {
+      return /* @__PURE__ */ React19.createElement(
+        CheckboxGroupField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          checkboxProps: "checkboxProps" in fieldConfig ? fieldConfig.checkboxProps : void 0,
+          control,
+          defaultValue: "defaultValue" in fieldConfig && fieldConfig.defaultValue && Array.isArray(fieldConfig.defaultValue) ? fieldConfig.defaultValue.map((v) => String(v)) : void 0,
+          options: ("checkboxGroupOptions" in fieldConfig && fieldConfig.checkboxGroupOptions ? fieldConfig.checkboxGroupOptions : []).map((opt) => ({
+            label: opt.label,
+            value: String(opt.value)
+          })),
+          orientation: "orientation" in fieldConfig ? fieldConfig.orientation : void 0
+        }
+      );
+    }
+    case "radio": {
+      return /* @__PURE__ */ React19.createElement(
+        RadioGroupField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          control,
+          defaultValue: "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0,
+          options: ("radioOptions" in fieldConfig && fieldConfig.radioOptions ? fieldConfig.radioOptions : []).map((opt) => ({
+            label: opt.label,
+            value: String(opt.value)
+          })),
+          radioGroupProps: "radioProps" in fieldConfig ? fieldConfig.radioProps : void 0
+        }
+      );
+    }
+    case "switch": {
+      return /* @__PURE__ */ React19.createElement(
+        SwitchField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          control,
+          defaultValue: "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0,
+          switchProps: "switchProps" in fieldConfig ? fieldConfig.switchProps : void 0
+        }
+      );
+    }
+    case "slider": {
+      return /* @__PURE__ */ React19.createElement(
+        SliderField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          control,
+          defaultValue: "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0,
+          sliderProps: "sliderProps" in fieldConfig ? fieldConfig.sliderProps : void 0
+        }
+      );
+    }
+    case "stringArray": {
+      return /* @__PURE__ */ React19.createElement(
+        StringArrayField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          control,
+          stringArrayProps: "stringArrayProps" in fieldConfig ? fieldConfig.stringArrayProps : void 0,
+          defaultValue: "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0
+        }
+      );
+    }
+    case "date": {
+      return /* @__PURE__ */ React19.createElement(
+        DateField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          control,
+          dateProps: "dateProps" in fieldConfig ? fieldConfig.dateProps : void 0,
+          defaultValue: "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0
+        }
+      );
+    }
+    case "file": {
+      return /* @__PURE__ */ React19.createElement(
+        FileField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          accept: "accept" in fieldConfig ? fieldConfig.accept : void 0,
+          control,
+          defaultValue: "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0,
+          fileProps: "fileProps" in fieldConfig ? fieldConfig.fileProps : void 0,
+          multiple: "multiple" in fieldConfig ? fieldConfig.multiple : void 0
+        }
+      );
+    }
+    case "fontPicker": {
+      return /* @__PURE__ */ React19.createElement(
+        FontPickerField,
+        {
+          ...baseProps,
+          name: fieldConfig.name,
+          control,
+          defaultValue: "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0,
+          fontPickerProps: "fontPickerProps" in fieldConfig ? fieldConfig.fontPickerProps : void 0
+        }
+      );
+    }
+    case "custom": {
+      if (!("render" in fieldConfig)) {
         return null;
       }
+      return fieldConfig.render({
+        control,
+        errors: form.formState.errors,
+        form,
+        isSubmitting: submissionState.isSubmitting,
+        name: fieldConfig.name
+      });
     }
-    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__ */ React17.createElement(
-          InputField,
-          {
-            ...baseProps,
-            control,
-            defaultValue: config.defaultValue,
-            inputProps: config.inputProps
-          }
-        );
-      case "textarea":
-        return /* @__PURE__ */ React17.createElement(
-          TextareaField,
-          {
-            ...baseProps,
-            control,
-            defaultValue: config.defaultValue,
-            textareaProps: config.textareaProps
-          }
-        );
-      case "select":
-        return /* @__PURE__ */ React17.createElement(
-          SelectField,
-          {
-            ...baseProps,
-            control,
-            defaultValue: config.defaultValue,
-            options: (config.options ?? []).map((opt) => ({
-              label: opt.label,
-              value: String(opt.value)
-            })),
-            selectProps: config.selectProps
-          }
-        );
-      case "autocomplete":
-        return /* @__PURE__ */ React17.createElement(
-          AutocompleteField,
-          {
-            ...baseProps,
-            control,
-            defaultValue: config.defaultValue,
-            items: (config.options ?? []).map((opt) => ({
-              label: opt.label,
-              value: String(opt.value)
-            })),
-            autocompleteProps: config.autocompleteProps
-          }
-        );
-      case "checkbox":
-        return /* @__PURE__ */ React17.createElement(
-          CheckboxField,
-          {
-            ...baseProps,
-            checkboxProps: config.checkboxProps,
-            control,
-            defaultValue: config.defaultValue
-          }
-        );
-      case "radio":
-        return /* @__PURE__ */ React17.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__ */ React17.createElement(
-          SwitchField,
-          {
-            ...baseProps,
-            control,
-            defaultValue: config.defaultValue,
-            switchProps: config.switchProps
-          }
-        );
-      case "slider":
-        return /* @__PURE__ */ React17.createElement(
-          SliderField,
-          {
-            ...baseProps,
-            control,
-            defaultValue: config.defaultValue,
-            sliderProps: config.sliderProps
-          }
-        );
-      case "date":
-        return /* @__PURE__ */ React17.createElement(
-          DateField,
-          {
-            ...baseProps,
-            control,
-            dateProps: config.dateProps,
-            defaultValue: config.defaultValue
-          }
-        );
-      case "file":
-        return /* @__PURE__ */ React17.createElement(
-          FileField,
-          {
-            ...baseProps,
-            accept: config.accept,
-            control,
-            defaultValue: config.defaultValue,
-            fileProps: config.fileProps,
-            multiple: config.multiple
-          }
-        );
-      case "fontPicker":
-        return /* @__PURE__ */ React17.createElement(
-          FontPickerField,
-          {
-            ...baseProps,
-            control,
-            defaultValue: config.defaultValue,
-            fontPickerProps: config.fontPickerProps
-          }
-        );
-      case "custom":
-        return config.render({
+    case "conditional": {
+      if (!("condition" in fieldConfig) || !("field" in fieldConfig)) {
+        return null;
+      }
+      const conditionalConfig = {
+        className: "className" in fieldConfig ? fieldConfig.className : void 0,
+        condition: fieldConfig.condition,
+        description: "description" in fieldConfig ? fieldConfig.description : void 0,
+        field: fieldConfig.field,
+        label: "label" in fieldConfig ? fieldConfig.label : void 0,
+        name: fieldConfig.name,
+        type: "conditional"
+      };
+      return /* @__PURE__ */ React19.createElement(
+        ConditionalField,
+        {
+          config: conditionalConfig,
           control,
-          errors: form.formState.errors,
-          form,
-          isSubmitting: submissionState.isSubmitting,
-          name: config.name
-        });
-      case "conditional":
-        return /* @__PURE__ */ React17.createElement(
-          ConditionalField,
-          {
-            config,
-            control,
-            className: config.className
-          }
-        );
-      case "fieldArray":
-        return /* @__PURE__ */ React17.createElement(
-          FieldArrayField,
-          {
-            config,
-            className: config.className
-          }
-        );
-      case "dynamicSection":
-        return /* @__PURE__ */ React17.createElement(
-          DynamicSectionField,
-          {
-            config,
-            control,
-            className: config.className
-          }
-        );
-      default: {
-        const fieldType = config.type;
-        console.warn(`Unknown field type: ${fieldType}`);
+          className: conditionalConfig.className
+        }
+      );
+    }
+    case "fieldArray": {
+      if (!("fields" in fieldConfig) || !fieldConfig.fields) {
+        return null;
+      }
+      const fieldArrayConfig = {
+        addButtonText: "addButtonText" in fieldConfig ? fieldConfig.addButtonText : void 0,
+        className: "className" in fieldConfig ? fieldConfig.className : void 0,
+        defaultItem: "defaultItem" in fieldConfig ? fieldConfig.defaultItem : void 0,
+        description: "description" in fieldConfig ? fieldConfig.description : void 0,
+        enableReordering: "enableReordering" in fieldConfig ? fieldConfig.enableReordering : void 0,
+        fields: fieldConfig.fields,
+        label: "label" in fieldConfig ? fieldConfig.label : void 0,
+        max: "max" in fieldConfig ? fieldConfig.max : void 0,
+        min: "min" in fieldConfig ? fieldConfig.min : void 0,
+        name: fieldConfig.name,
+        removeButtonText: "removeButtonText" in fieldConfig ? fieldConfig.removeButtonText : void 0,
+        renderAddButton: "renderAddButton" in fieldConfig ? fieldConfig.renderAddButton : void 0,
+        renderItem: "renderItem" in fieldConfig ? fieldConfig.renderItem : void 0,
+        reorderButtonText: "reorderButtonText" in fieldConfig ? fieldConfig.reorderButtonText : void 0,
+        type: "fieldArray"
+      };
+      return /* @__PURE__ */ React19.createElement(
+        FieldArrayField,
+        {
+          config: fieldArrayConfig,
+          className: fieldArrayConfig.className
+        }
+      );
+    }
+    case "dynamicSection": {
+      if (!("sections" in fieldConfig) || !("condition" in fieldConfig) || !("fields" in fieldConfig)) {
         return null;
       }
+      const dynamicSectionConfig = {
+        className: "className" in fieldConfig ? fieldConfig.className : void 0,
+        condition: fieldConfig.condition,
+        description: "description" in fieldConfig ? fieldConfig.description : void 0,
+        fields: fieldConfig.fields,
+        label: "label" in fieldConfig ? fieldConfig.label : void 0,
+        name: fieldConfig.name,
+        title: "title" in fieldConfig ? fieldConfig.title : void 0,
+        type: "dynamicSection"
+      };
+      return /* @__PURE__ */ React19.createElement(
+        DynamicSectionField,
+        {
+          config: dynamicSectionConfig,
+          control,
+          className: dynamicSectionConfig.className
+        }
+      );
+    }
+    default: {
+      const fieldType = "type" in config ? config.type : "unknown";
+      console.warn(`Unknown field type: ${fieldType}`);
+      return null;
     }
   }
-);
+}
+var FormField = FormFieldComponent;
 
 // src/components/Form.tsx
 function ConfigurableForm({
@@ -1268,12 +1685,12 @@ function ConfigurableForm({
   });
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React18.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"}`
         },
-        fields.map((field2) => /* @__PURE__ */ React18.createElement(
+        fields.map((field2) => /* @__PURE__ */ React20.createElement(
           FormField,
           {
             key: field2.name,
@@ -1285,7 +1702,7 @@ function ConfigurableForm({
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React18.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React18.createElement(
+      return /* @__PURE__ */ React20.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React20.createElement(
         FormField,
         {
           key: field2.name,
@@ -1295,10 +1712,10 @@ function ConfigurableForm({
         }
       )));
     }
-    return /* @__PURE__ */ React18.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React18.createElement(
+    return /* @__PURE__ */ React20.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React20.createElement(
       FormField,
       {
-        key: field2.name,
+        key: field2.name ? pathToString(field2.name) : `field-${Math.random()}`,
         config: field2,
         form,
         submissionState
@@ -1309,23 +1726,23 @@ function ConfigurableForm({
     e.preventDefault();
     void handleSubmit();
   };
-  return /* @__PURE__ */ React18.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React18.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React18.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React18.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), isSubmitted && isSuccess && /* @__PURE__ */ React18.createElement(
+  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)), isSubmitted && isSuccess && /* @__PURE__ */ React20.createElement(
     "div",
     {
       className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
       "data-testid": "success-message"
     },
-    /* @__PURE__ */ React18.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
-    /* @__PURE__ */ React18.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
-  ), error && /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React20.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
+    /* @__PURE__ */ React20.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
+  ), error && /* @__PURE__ */ React20.createElement(
     "div",
     {
       className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
       "data-testid": "error-message"
     },
-    /* @__PURE__ */ React18.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
-    /* @__PURE__ */ React18.createElement("p", { className: "text-danger-700 text-sm mt-1" }, error)
-  ), renderFields(), /* @__PURE__ */ React18.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React20.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
+    /* @__PURE__ */ React20.createElement("p", { className: "text-danger-700 text-sm mt-1" }, error)
+  ), renderFields(), /* @__PURE__ */ React20.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React20.createElement(
     Button3,
     {
       color: "primary",
@@ -1335,7 +1752,7 @@ function ConfigurableForm({
       ...submitButtonProps
     },
     submitButtonText
-  ), showResetButton && /* @__PURE__ */ React18.createElement(
+  ), showResetButton && /* @__PURE__ */ React20.createElement(
     Button3,
     {
       isDisabled: isSubmitting,
@@ -1348,7 +1765,7 @@ function ConfigurableForm({
 }
 
 // src/components/ServerActionForm.tsx
-import React19 from "react";
+import React21 from "react";
 import { useActionState } from "react";
 function ServerActionForm({
   action,
@@ -1373,10 +1790,10 @@ function ServerActionForm({
     action,
     initialState ?? { errors: void 0, message: void 0, success: false }
   );
-  const formRef = React19.useRef(null);
-  const [clientErrors, setClientErrors] = React19.useState({});
-  const lastSubmittedFormData = React19.useRef(null);
-  React19.useEffect(() => {
+  const formRef = React21.useRef(null);
+  const [clientErrors, setClientErrors] = React21.useState({});
+  const lastSubmittedFormData = React21.useRef(null);
+  React21.useEffect(() => {
     if (state && (state.errors || state.message && !state.success)) {
       onError?.({
         errors: state.errors,
@@ -1384,7 +1801,7 @@ function ServerActionForm({
       });
     }
   }, [state, onError]);
-  React19.useEffect(() => {
+  React21.useEffect(() => {
     if (state?.success && lastSubmittedFormData.current) {
       onSuccess?.(lastSubmittedFormData.current);
     }
@@ -1397,14 +1814,14 @@ function ServerActionForm({
     e.preventDefault();
     if (clientValidationSchema) {
       const formData2 = new FormData(e.currentTarget);
+      const form = e.currentTarget;
       const values = {};
       formData2.forEach((val, key) => {
-        if (val === "on") {
+        const formElement = form.querySelector(
+          `input[type="checkbox"][name="${key}"], input[role="switch"][name="${key}"]`
+        );
+        if (formElement instanceof HTMLInputElement && (formElement.type === "checkbox" || formElement.getAttribute("role") === "switch")) {
           values[key] = true;
-        } else if (val === "") {
-          if (!values[key]) {
-            values[key] = false;
-          }
         } else {
           values[key] = val;
         }
@@ -1427,12 +1844,12 @@ function ServerActionForm({
   };
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React19.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"}`
         },
-        fields.map((field2) => /* @__PURE__ */ React19.createElement(
+        fields.map((field2) => /* @__PURE__ */ React21.createElement(
           ServerActionField,
           {
             key: field2.name,
@@ -1445,7 +1862,7 @@ function ServerActionForm({
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React19.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React19.createElement(
+      return /* @__PURE__ */ React21.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React21.createElement(
         ServerActionField,
         {
           key: field2.name,
@@ -1456,10 +1873,10 @@ function ServerActionForm({
         }
       )));
     }
-    return /* @__PURE__ */ React19.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React21.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React21.createElement(
       ServerActionField,
       {
-        key: field2.name,
+        key: pathToString(field2.name),
         clientErrors,
         defaultValues,
         errors: state?.errors,
@@ -1467,7 +1884,7 @@ function ServerActionForm({
       }
     )));
   };
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React21.createElement(
     "form",
     {
       ref: formRef,
@@ -1475,27 +1892,27 @@ function ServerActionForm({
       role: "form",
       onSubmit: handleSubmit
     },
-    title && /* @__PURE__ */ React19.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React19.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React19.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)),
-    state?.success && !pending && /* @__PURE__ */ React19.createElement(
+    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)),
+    state?.success && !pending && /* @__PURE__ */ React21.createElement(
       "div",
       {
         className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
         "data-testid": "success-message"
       },
-      /* @__PURE__ */ React19.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
-      state.message && /* @__PURE__ */ React19.createElement("p", { className: "text-success-700 text-sm mt-1" }, state.message)
+      /* @__PURE__ */ React21.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
+      state.message && /* @__PURE__ */ React21.createElement("p", { className: "text-success-700 text-sm mt-1" }, state.message)
     ),
-    state?.message && !state.success && /* @__PURE__ */ React19.createElement(
+    state?.message && !state.success && /* @__PURE__ */ React21.createElement(
       "div",
       {
         className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
         "data-testid": "error-message"
       },
-      /* @__PURE__ */ React19.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
-      /* @__PURE__ */ React19.createElement("p", { className: "text-danger-700 text-sm mt-1" }, state.message)
+      /* @__PURE__ */ React21.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
+      /* @__PURE__ */ React21.createElement("p", { className: "text-danger-700 text-sm mt-1" }, state.message)
     ),
     renderFields(),
-    /* @__PURE__ */ React19.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React21.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React21.createElement(
       Button,
       {
         color: "primary",
@@ -1505,7 +1922,7 @@ function ServerActionForm({
         ...submitButtonProps
       },
       submitButtonText
-    ), showResetButton && /* @__PURE__ */ React19.createElement(
+    ), showResetButton && /* @__PURE__ */ React21.createElement(
       Button,
       {
         isDisabled: pending,
@@ -1523,24 +1940,44 @@ function ServerActionField({
   errors,
   field: field2
 }) {
-  if (field2.type === "content") {
-    const contentField2 = field2;
-    if (contentField2.render) {
-      return /* @__PURE__ */ React19.createElement("div", { className: contentField2.className }, contentField2.render({
+  const fieldConfig = field2;
+  const getBaseProps = () => {
+    const baseProps2 = {};
+    if ("label" in fieldConfig) {
+      baseProps2.label = fieldConfig.label;
+    }
+    if ("description" in fieldConfig) {
+      baseProps2.description = fieldConfig.description;
+    }
+    if ("isDisabled" in fieldConfig) {
+      baseProps2.isDisabled = fieldConfig.isDisabled;
+    }
+    return baseProps2;
+  };
+  const baseProps = getBaseProps();
+  if (fieldConfig.type === "content") {
+    const contentField = fieldConfig;
+    if (contentField.render) {
+      const mockForm = {
+        formState: { errors: {} },
+        watch: () => ({})
+      };
+      const renderFn = contentField.render;
+      return /* @__PURE__ */ React21.createElement("div", { className: contentField.className }, renderFn({
         errors: {},
-        form: null,
+        form: mockForm,
         isSubmitting: false
       }));
     }
-    return /* @__PURE__ */ React19.createElement("div", { className: contentField2.className }, contentField2.title && /* @__PURE__ */ React19.createElement("h3", { className: "text-lg font-semibold text-foreground mb-2" }, contentField2.title), contentField2.description && /* @__PURE__ */ React19.createElement("p", { className: "text-sm text-muted-foreground" }, contentField2.description));
+    return /* @__PURE__ */ React21.createElement("div", { className: contentField.className }, contentField.title && /* @__PURE__ */ React21.createElement("h3", { className: "text-lg font-semibold text-foreground mb-2" }, contentField.title), contentField.description && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-muted-foreground" }, contentField.description));
   }
-  const fieldName = field2.name;
+  const fieldName = pathToString(fieldConfig.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;
+    const fromField = "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0;
     if (fromProps !== void 0 && fromProps !== null) {
       return typeof fromProps === "string" ? fromProps : String(fromProps);
     }
@@ -1551,7 +1988,7 @@ function ServerActionField({
   };
   const getDefaultChecked = () => {
     const fromProps = defaultValues?.[fieldName];
-    const fromField = field2.defaultValue;
+    const fromField = "defaultValue" in fieldConfig ? fieldConfig.defaultValue : void 0;
     if (fromProps !== void 0 && fromProps !== null) {
       return typeof fromProps === "boolean" ? fromProps : false;
     }
@@ -1560,121 +1997,326 @@ function ServerActionField({
     }
     return false;
   };
-  const [value, setValue] = React19.useState(getDefaultValue);
-  const [checked, setChecked] = React19.useState(getDefaultChecked);
-  React19.useEffect(() => {
+  const [value, setValue] = React21.useState(getDefaultValue);
+  const [checked, setChecked] = React21.useState(getDefaultChecked);
+  React21.useEffect(() => {
     const newDefaultValue = defaultValues?.[fieldName];
     if (newDefaultValue !== void 0 && newDefaultValue !== null) {
-      if (field2.type === "checkbox") {
+      if (fieldConfig.type === "checkbox") {
         setChecked(
           typeof newDefaultValue === "boolean" ? newDefaultValue : false
         );
+      } else if (fieldConfig.type === "checkboxGroup") {
+        const arrayValue = Array.isArray(newDefaultValue) ? newDefaultValue.map(String).join(",") : "";
+        setValue(arrayValue);
       } else {
         setValue(
           typeof newDefaultValue === "string" ? newDefaultValue : String(newDefaultValue)
         );
       }
     }
-  }, [defaultValues, fieldName, field2.type]);
-  React19.useEffect(() => {
+  }, [defaultValues, fieldName, fieldConfig.type]);
+  React21.useEffect(() => {
+    if (fieldConfig.type !== "date") {
+      return;
+    }
     const hiddenInput = document.querySelector(
       `input[type="hidden"][name="${fieldName}"]`
     );
+    if (!(hiddenInput instanceof HTMLInputElement)) {
+      throw new Error(`Expected HTMLInputElement for field ${fieldName}`);
+    }
     if (hiddenInput) {
-      if (field2.type === "checkbox") {
-        hiddenInput.value = checked ? "on" : "";
-      } else {
-        hiddenInput.value = value;
-      }
+      hiddenInput.value = value || "";
     }
-  }, [value, checked, fieldName, field2.type]);
-  switch (field2.type) {
+  }, [value, fieldName, fieldConfig.type]);
+  switch (fieldConfig.type) {
     case "input": {
-      const inputType = field2.inputProps?.type || "text";
-      return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React19.createElement(
+      const stringConfig = fieldConfig;
+      const inputType = stringConfig.inputProps?.type || "text";
+      return /* @__PURE__ */ React21.createElement(
         Input,
         {
-          ...field2.inputProps,
+          ...stringConfig.inputProps,
+          name: fieldName,
+          "data-field-name": fieldName,
+          type: inputType,
+          label: baseProps.label,
+          description: baseProps.description,
+          isDisabled: baseProps.isDisabled,
+          isInvalid: Boolean(errorMessage),
+          errorMessage,
+          value,
+          onValueChange: setValue
+        }
+      );
+    }
+    case "textarea": {
+      const stringConfig = fieldConfig;
+      return /* @__PURE__ */ React21.createElement(
+        Textarea,
+        {
+          ...stringConfig.textareaProps,
+          name: fieldName,
+          "data-field-name": fieldName,
+          label: baseProps.label,
+          description: baseProps.description,
+          isDisabled: baseProps.isDisabled,
+          isInvalid: Boolean(errorMessage),
+          errorMessage,
+          value,
+          onValueChange: setValue
+        }
+      );
+    }
+    case "checkbox": {
+      const booleanConfig = fieldConfig;
+      const checkboxValue = booleanConfig.checkboxProps?.value ?? "on";
+      const containerRef = React21.useRef(null);
+      React21.useLayoutEffect(() => {
+        const setValue2 = () => {
+          if (containerRef.current) {
+            const input = containerRef.current.querySelector(
+              `input[type="checkbox"][name="${fieldName}"]`
+            );
+            if (input instanceof HTMLInputElement) {
+              input.setAttribute("value", checkboxValue);
+              input.value = checkboxValue;
+            }
+          }
+        };
+        setValue2();
+        const timeoutId = setTimeout(setValue2, 0);
+        return () => clearTimeout(timeoutId);
+      }, [fieldName, checkboxValue, checked]);
+      return /* @__PURE__ */ React21.createElement("div", { ref: containerRef }, /* @__PURE__ */ React21.createElement(
+        Checkbox,
+        {
+          ...booleanConfig.checkboxProps,
+          name: fieldName,
+          "data-field-name": fieldName,
+          value: checkboxValue,
+          isDisabled: baseProps.isDisabled,
+          isSelected: checked,
+          onValueChange: setChecked,
+          isInvalid: Boolean(errorMessage),
+          errorMessage
+        },
+        baseProps.label
+      ));
+    }
+    case "checkboxGroup": {
+      const checkboxGroupConfig = fieldConfig;
+      const options = checkboxGroupConfig.checkboxGroupOptions || [];
+      const currentValues = value ? String(value).split(",").filter(Boolean) : [];
+      return /* @__PURE__ */ React21.createElement("div", null, baseProps.label && /* @__PURE__ */ React21.createElement("label", { className: "text-sm font-medium text-foreground block mb-2" }, baseProps.label), baseProps.description && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-default-500 mb-2" }, baseProps.description), /* @__PURE__ */ React21.createElement(
+        "div",
+        {
+          className: checkboxGroupConfig.orientation === "horizontal" ? "flex flex-row gap-4 flex-wrap" : "flex flex-col gap-2"
+        },
+        options.map(
+          (option) => {
+            const optionValue = String(option.value);
+            const isSelected = currentValues.includes(optionValue);
+            return /* @__PURE__ */ React21.createElement(
+              Checkbox,
+              {
+                key: optionValue,
+                ...checkboxGroupConfig.checkboxProps,
+                name: fieldName,
+                "data-field-name": fieldName,
+                "data-checkbox-value": optionValue,
+                isDisabled: baseProps.isDisabled,
+                isSelected,
+                onValueChange: (checked2) => {
+                  const newValues = checked2 ? [
+                    ...currentValues.filter((v) => v !== optionValue),
+                    optionValue
+                  ] : currentValues.filter((v) => v !== optionValue);
+                  setValue(newValues.join(","));
+                },
+                isInvalid: Boolean(errorMessage),
+                errorMessage
+              },
+              option.label
+            );
+          }
+        )
+      ), errorMessage && /* @__PURE__ */ React21.createElement("p", { className: "text-tiny text-danger mt-1" }, errorMessage));
+    }
+    case "switch": {
+      const booleanConfig = fieldConfig;
+      return /* @__PURE__ */ React21.createElement(
+        Switch,
+        {
+          ...booleanConfig.switchProps,
+          name: fieldName,
+          "data-field-name": fieldName,
+          isDisabled: baseProps.isDisabled,
+          isSelected: checked,
+          onValueChange: setChecked,
+          isInvalid: Boolean(errorMessage),
+          errorMessage
+        },
+        baseProps.label
+      );
+    }
+    case "select": {
+      const stringConfig = fieldConfig;
+      const options = stringConfig.options || [];
+      return /* @__PURE__ */ React21.createElement(
+        Select,
+        {
+          ...stringConfig.selectProps,
+          name: fieldName,
+          "data-field-name": fieldName,
+          label: baseProps.label,
+          description: baseProps.description,
+          isDisabled: baseProps.isDisabled,
+          isInvalid: Boolean(errorMessage),
+          errorMessage,
+          selectedKeys: value ? [value] : [],
+          onSelectionChange: (keys) => {
+            const selectedValue = Array.from(keys)[0];
+            setValue(selectedValue || "");
+          }
+        },
+        options.map((option) => /* @__PURE__ */ React21.createElement(SelectItem, { key: String(option.value) }, option.label))
+      );
+    }
+    case "radio": {
+      const radioConfig = fieldConfig;
+      const options = radioConfig.radioOptions || [];
+      return /* @__PURE__ */ React21.createElement(
+        RadioGroup,
+        {
+          ...radioConfig.radioProps,
+          name: fieldName,
           "data-field-name": fieldName,
-          type: inputType,
-          label: field2.label,
-          description: field2.description,
-          isDisabled: field2.isDisabled,
+          label: baseProps.label,
+          description: baseProps.description,
+          isDisabled: baseProps.isDisabled,
           isInvalid: Boolean(errorMessage),
           errorMessage,
-          value,
+          value: value || "",
           onValueChange: setValue
-        }
-      ));
+        },
+        options.map((option) => /* @__PURE__ */ React21.createElement(Radio, { key: String(option.value), value: String(option.value) }, option.label))
+      );
     }
-    case "textarea": {
-      return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React19.createElement(
-        Textarea,
+    case "autocomplete": {
+      const stringConfig = fieldConfig;
+      const items = stringConfig.options?.map((opt) => ({
+        label: opt.label,
+        value: String(opt.value)
+      })) || [];
+      return /* @__PURE__ */ React21.createElement(
+        Autocomplete,
         {
-          ...field2.textareaProps,
+          ...stringConfig.autocompleteProps,
+          name: fieldName,
           "data-field-name": fieldName,
-          label: field2.label,
-          description: field2.description,
-          isDisabled: field2.isDisabled,
+          label: baseProps.label,
+          description: baseProps.description,
+          isDisabled: baseProps.isDisabled,
           isInvalid: Boolean(errorMessage),
           errorMessage,
-          value,
-          onValueChange: setValue
+          selectedKey: value || null,
+          inputValue: value || "",
+          onSelectionChange: (key) => {
+            setValue(key ? String(key) : "");
+          },
+          onInputChange: setValue,
+          items
+        },
+        items.map((item) => /* @__PURE__ */ React21.createElement(AutocompleteItem, { key: String(item.value) }, item.label))
+      );
+    }
+    case "slider": {
+      const sliderConfig = fieldConfig;
+      const numValue = value ? Number(value) : 0;
+      return /* @__PURE__ */ React21.createElement(
+        Slider,
+        {
+          ...sliderConfig.sliderProps,
+          name: fieldName,
+          "data-field-name": fieldName,
+          label: baseProps.label,
+          description: baseProps.description,
+          isDisabled: baseProps.isDisabled,
+          value: numValue,
+          onChange: (val) => {
+            const newValue = Array.isArray(val) ? val[0] : val;
+            setValue(String(newValue));
+          }
         }
-      ));
+      );
     }
-    case "checkbox": {
-      return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("input", { type: "hidden", name: fieldName, value: checked ? "on" : "" }), /* @__PURE__ */ React19.createElement(
-        Checkbox,
+    case "date": {
+      const dateConfig = fieldConfig;
+      return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("input", { type: "hidden", name: fieldName, value: value || "" }), /* @__PURE__ */ React21.createElement(
+        DateInput,
         {
-          ...field2.checkboxProps,
+          ...dateConfig.dateProps,
           "data-field-name": fieldName,
-          isDisabled: field2.isDisabled,
-          isSelected: checked,
-          onValueChange: setChecked,
+          label: baseProps.label,
+          description: baseProps.description,
+          isDisabled: baseProps.isDisabled,
           isInvalid: Boolean(errorMessage),
-          errorMessage
-        },
-        field2.label
+          errorMessage,
+          value: value ? value : null,
+          onChange: (date) => {
+            const dateString = date ? `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}` : "";
+            setValue(dateString);
+          }
+        }
       ));
     }
-    case "select": {
-      const options = field2.options || [];
-      return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React19.createElement(
-        Select,
+    case "file": {
+      const fileConfig = fieldConfig;
+      const multiple = fileConfig.multiple || false;
+      const accept = fileConfig.accept;
+      return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+        Input,
         {
-          ...field2.selectProps,
+          ...fileConfig.fileProps,
+          name: fieldName,
           "data-field-name": fieldName,
-          label: field2.label,
-          description: field2.description,
-          isDisabled: field2.isDisabled,
+          type: "file",
+          label: baseProps.label,
+          description: baseProps.description,
+          isDisabled: baseProps.isDisabled,
           isInvalid: Boolean(errorMessage),
           errorMessage,
-          selectedKeys: value ? [value] : [],
-          onSelectionChange: (keys) => {
-            const selectedValue = Array.from(keys)[0];
-            setValue(selectedValue || "");
+          multiple,
+          accept,
+          onChange: (e) => {
+            if (!(e.target instanceof HTMLInputElement)) {
+              return;
+            }
+            const target = e.target;
+            if (target.files) {
+              setValue(String(target.files.length));
+            }
           }
-        },
-        options.map(
-          (option) => /* @__PURE__ */ React19.createElement(SelectItem, { key: String(option.value) }, option.label)
-        )
+        }
       ));
     }
     default:
-      return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React19.createElement(
+      return /* @__PURE__ */ React21.createElement(
         Input,
         {
+          name: fieldName,
           "data-field-name": fieldName,
-          label: field2.label,
-          description: field2.description,
-          isDisabled: field2.isDisabled,
+          label: baseProps.label,
+          description: baseProps.description,
+          isDisabled: baseProps.isDisabled,
           isInvalid: Boolean(errorMessage),
           errorMessage,
           value,
           onValueChange: setValue
         }
-      ));
+      );
   }
 }
 
@@ -1692,10 +2334,10 @@ function useHeroForm() {
 }
 
 // src/providers/FormProvider.tsx
-import React20 from "react";
+import React22 from "react";
 import { FormProvider as RHFProvider } from "react-hook-form";
 function FormProvider(props) {
-  return /* @__PURE__ */ React20.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React22.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React22.createElement(
     "form",
     {
       className: props.className,
@@ -1708,7 +2350,7 @@ function FormProvider(props) {
 }
 
 // src/submit/SubmitButton.tsx
-import React21 from "react";
+import React23 from "react";
 function SubmitButton(props) {
   const ctx = useFormContext5();
   const loading = props.isLoading ?? ctx.formState.isSubmitting;
@@ -1718,10 +2360,10 @@ function SubmitButton(props) {
   const defaults = useHeroHookFormDefaults();
   const getButtonContent = () => {
     if (enhancedState?.isSuccess) {
-      return /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-2" }, "\u2705", props.successText || "Success!");
+      return /* @__PURE__ */ React23.createElement("span", { className: "inline-flex items-center gap-2" }, "\u2705", props.successText || "Success!");
     }
     if (loading) {
-      return /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-2" }, "\u23F3", props.loadingText || "Submitting...");
+      return /* @__PURE__ */ React23.createElement("span", { className: "inline-flex items-center gap-2" }, "\u23F3", props.loadingText || "Submitting...");
     }
     return props.children;
   };
@@ -1734,7 +2376,7 @@ function SubmitButton(props) {
     }
     return props.buttonProps?.color || defaults.submitButton.color;
   };
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React23.createElement(
     Button,
     {
       type: "submit",
@@ -1975,7 +2617,7 @@ var commonValidations = {
 import { useFormContext as useFormContext5 } from "react-hook-form";
 
 // src/components/ZodForm.tsx
-import React23 from "react";
+import React25 from "react";
 import { Button as Button5 } from "@heroui/react";
 import {
   FormProvider as FormProvider2
@@ -1999,8 +2641,15 @@ function createZodResolver(schema) {
           const path = err.path.join(".");
           errors[path] = { message: err.message };
         });
+        const fieldErrors = {};
+        Object.entries(errors).forEach(([path, error2]) => {
+          fieldErrors[path] = error2;
+        });
         return {
-          errors,
+          // TypeScript can't prove all paths are valid field paths, but at runtime they will be
+          // because Zod validates against the schema which matches T
+          // This is a necessary type assertion due to TypeScript's limitations with dynamic paths
+          errors: fieldErrors,
           values: {}
         };
       }
@@ -2018,14 +2667,12 @@ function createZodFormConfig(schema, fields, defaultValues) {
   return {
     fields,
     schema,
-    ...defaultValues && {
-      defaultValues
-    }
+    ...defaultValues && { defaultValues }
   };
 }
 
 // src/hooks/useEnhancedFormState.ts
-import { useCallback, useEffect, useState as useState2 } from "react";
+import { useCallback, useEffect, useState as useState3 } from "react";
 function useEnhancedFormState(form, options = {}) {
   const {
     autoReset = true,
@@ -2037,9 +2684,9 @@ function useEnhancedFormState(form, options = {}) {
     // 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 [status, setStatus] = useState3("idle");
+  const [error, setError] = useState3(void 0);
+  const [submittedData, setSubmittedData] = useState3(void 0);
   const { formState, getValues: _getValues } = form;
   const { dirtyFields, errors, isSubmitting, touchedFields } = formState;
   useEffect(() => {
@@ -2098,7 +2745,7 @@ function useEnhancedFormState(form, options = {}) {
 }
 
 // src/components/FormStatus.tsx
-import React22 from "react";
+import React24 from "react";
 import { Button as Button4 } from "@heroui/react";
 function FormStatus({
   className = "",
@@ -2111,25 +2758,25 @@ function FormStatus({
     return null;
   }
   if (isSubmitting) {
-    return /* @__PURE__ */ React22.createElement(
+    return /* @__PURE__ */ React24.createElement(
       "div",
       {
         className: `flex items-center gap-3 p-4 bg-blue-50 border border-blue-200 rounded-lg ${className}`
       },
-      /* @__PURE__ */ React22.createElement("span", { className: "text-blue-600" }, "\u23F3"),
-      /* @__PURE__ */ React22.createElement("div", null, /* @__PURE__ */ React22.createElement("p", { className: "text-sm font-medium text-blue-900" }, "Submitting form..."), showDetails && /* @__PURE__ */ React22.createElement("p", { className: "text-xs text-blue-700" }, "Please wait while we process your request."))
+      /* @__PURE__ */ React24.createElement("span", { className: "text-blue-600" }, "\u23F3"),
+      /* @__PURE__ */ React24.createElement("div", null, /* @__PURE__ */ React24.createElement("p", { className: "text-sm font-medium text-blue-900" }, "Submitting form..."), showDetails && /* @__PURE__ */ React24.createElement("p", { className: "text-xs text-blue-700" }, "Please wait while we process your request."))
     );
   }
   if (isSuccess) {
-    return /* @__PURE__ */ React22.createElement(
+    return /* @__PURE__ */ React24.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__ */ React22.createElement("span", { className: "text-green-600" }, "\u2705"),
-      /* @__PURE__ */ React22.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React22.createElement("p", { className: "text-sm font-medium text-green-900" }, "Form submitted successfully!"), showDetails && submittedData && /* @__PURE__ */ React22.createElement("p", { className: "text-xs text-green-700" }, "Your data has been saved. Thank you for your submission.")),
-      onDismiss && /* @__PURE__ */ React22.createElement(
+      /* @__PURE__ */ React24.createElement("span", { className: "text-green-600" }, "\u2705"),
+      /* @__PURE__ */ React24.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React24.createElement("p", { className: "text-sm font-medium text-green-900" }, "Form submitted successfully!"), showDetails && submittedData && /* @__PURE__ */ React24.createElement("p", { className: "text-xs text-green-700" }, "Your data has been saved. Thank you for your submission.")),
+      onDismiss && /* @__PURE__ */ React24.createElement(
         Button4,
         {
           size: "sm",
@@ -2143,15 +2790,15 @@ function FormStatus({
     );
   }
   if (isError && error) {
-    return /* @__PURE__ */ React22.createElement(
+    return /* @__PURE__ */ React24.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__ */ React22.createElement("span", { className: "text-red-600" }, "\u26A0\uFE0F"),
-      /* @__PURE__ */ React22.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React22.createElement("p", { className: "text-sm font-medium text-red-900" }, "Error submitting form"), /* @__PURE__ */ React22.createElement("p", { className: "text-xs text-red-700" }, error)),
-      onDismiss && /* @__PURE__ */ React22.createElement(
+      /* @__PURE__ */ React24.createElement("span", { className: "text-red-600" }, "\u26A0\uFE0F"),
+      /* @__PURE__ */ React24.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React24.createElement("p", { className: "text-sm font-medium text-red-900" }, "Error submitting form"), /* @__PURE__ */ React24.createElement("p", { className: "text-xs text-red-700" }, error)),
+      onDismiss && /* @__PURE__ */ React24.createElement(
         Button4,
         {
           size: "sm",
@@ -2172,8 +2819,8 @@ function FormToast({
   position = "top-right",
   state
 }) {
-  const [isVisible, setIsVisible] = React22.useState(false);
-  React22.useEffect(() => {
+  const [isVisible, setIsVisible] = React24.useState(false);
+  React24.useEffect(() => {
     if (state.isSuccess || state.isError) {
       setIsVisible(true);
       if (duration > 0) {
@@ -2194,7 +2841,7 @@ function FormToast({
     "top-left": "top-4 left-4",
     "top-right": "top-4 right-4"
   };
-  return /* @__PURE__ */ React22.createElement("div", { className: `fixed z-50 ${positionClasses[position]}` }, /* @__PURE__ */ React22.createElement(FormStatus, { state, onDismiss }));
+  return /* @__PURE__ */ React24.createElement("div", { className: `fixed z-50 ${positionClasses[position]}` }, /* @__PURE__ */ React24.createElement(FormStatus, { state, onDismiss }));
 }
 
 // src/components/ZodForm.tsx
@@ -2214,7 +2861,10 @@ function ZodForm({
   subtitle,
   title
 }) {
-  const form = useZodForm(config);
+  const formConfig = {
+    ...config
+  };
+  const form = useZodForm(formConfig);
   const enhancedState = useEnhancedFormState(form, {
     autoReset: true,
     onError: (error) => onError?.({ field: "form", message: error }),
@@ -2244,12 +2894,12 @@ function ZodForm({
   };
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React23.createElement(
+      return /* @__PURE__ */ React25.createElement(
         "div",
         {
           className: `grid gap-${spacing} ${columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}`
         },
-        config.fields.map((field2) => /* @__PURE__ */ React23.createElement(
+        config.fields.map((field2) => /* @__PURE__ */ React25.createElement(
           FormField,
           {
             key: field2.name,
@@ -2266,7 +2916,7 @@ function ZodForm({
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React23.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field2) => /* @__PURE__ */ React23.createElement(
+      return /* @__PURE__ */ React25.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field2) => /* @__PURE__ */ React25.createElement(
         FormField,
         {
           key: field2.name,
@@ -2281,10 +2931,10 @@ function ZodForm({
         }
       )));
     }
-    return /* @__PURE__ */ React23.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field2) => /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React25.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field2) => /* @__PURE__ */ React25.createElement(
       FormField,
       {
-        key: field2.name,
+        key: pathToString(field2.name),
         config: field2,
         form,
         submissionState: {
@@ -2300,19 +2950,19 @@ function ZodForm({
     e.preventDefault();
     void handleSubmit();
   };
-  React23.useEffect(() => {
+  React25.useEffect(() => {
     if (config.onError && Object.keys(form.formState.errors).length > 0) {
       config.onError(form.formState.errors);
     }
   }, [form.formState.errors, config.onError]);
-  return /* @__PURE__ */ React23.createElement(FormProvider2, { ...form }, /* @__PURE__ */ React23.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React23.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React23.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React23.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(FormProvider2, { ...form }, /* @__PURE__ */ React25.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React25.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React25.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React25.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), /* @__PURE__ */ React25.createElement(
     FormStatus,
     {
       state: enhancedState,
       onDismiss: () => enhancedState.reset(),
       showDetails: true
     }
-  ), renderFields(), /* @__PURE__ */ React23.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React23.createElement(
+  ), renderFields(), /* @__PURE__ */ React25.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React25.createElement(
     Button5,
     {
       color: "primary",
@@ -2322,7 +2972,7 @@ function ZodForm({
       ...submitButtonProps
     },
     enhancedState.isSuccess ? "Success!" : submitButtonText
-  ), showResetButton && /* @__PURE__ */ React23.createElement(
+  ), showResetButton && /* @__PURE__ */ React25.createElement(
     Button5,
     {
       isDisabled: enhancedState.isSubmitting,
@@ -2334,6 +2984,44 @@ function ZodForm({
   ))));
 }
 
+// src/components/SimpleForm.tsx
+import React26 from "react";
+function SimpleForm({
+  className,
+  defaultValues,
+  field: field2,
+  hideSubmitButton = false,
+  onError,
+  onSubmit,
+  onSuccess,
+  schema,
+  submitButton,
+  subtitle,
+  title
+}) {
+  return /* @__PURE__ */ React26.createElement(
+    ZodForm,
+    {
+      className,
+      config: {
+        defaultValues,
+        fields: [field2],
+        schema
+      },
+      onError,
+      onSubmit,
+      onSuccess,
+      showResetButton: false,
+      submitButtonText: hideSubmitButton ? "" : "Submit",
+      subtitle,
+      title,
+      submitButtonProps: hideSubmitButton && submitButton ? {
+        style: { display: "none" }
+      } : {}
+    }
+  );
+}
+
 // src/builders/BasicFormBuilder.ts
 var BasicFormBuilder = class {
   constructor() {
@@ -2435,6 +3123,29 @@ var BasicFormBuilder = class {
 function createBasicFormBuilder() {
   return new BasicFormBuilder();
 }
+function inputHelper(name, label, typeOrProps, inputProps) {
+  if (typeOrProps && typeof typeOrProps === "object" && !("type" in typeOrProps && typeof typeOrProps.type === "string" && ["text", "email", "tel", "password"].includes(typeOrProps.type))) {
+    return {
+      inputProps: {
+        type: "text",
+        ...typeOrProps
+      },
+      label,
+      name,
+      type: "input"
+    };
+  }
+  const type = typeof typeOrProps === "string" ? typeOrProps : void 0;
+  return {
+    inputProps: {
+      type: type || "text",
+      ...inputProps
+    },
+    label,
+    name,
+    type: "input"
+  };
+}
 var FormFieldHelpers = {
   /**
    * Create an autocomplete field
@@ -2485,6 +3196,34 @@ var FormFieldHelpers = {
     name,
     type: "checkbox"
   }),
+  /**
+   * Create a checkbox group field (multiple checkboxes saving to an array)
+   *
+   * @example
+   * ```tsx
+   * // Simple checkbox group
+   * FormFieldHelpers.checkboxGroup("interests", "Interests", [
+   *   { label: "Reading", value: "reading" },
+   *   { label: "Sports", value: "sports" },
+   *   { label: "Music", value: "music" },
+   * ])
+   *
+   * // With horizontal layout and custom styling
+   * FormFieldHelpers.checkboxGroup("interests", "Interests", options, {
+   *   orientation: "horizontal",
+   *   checkboxProps: { color: "primary", size: "lg" }
+   * })
+   * ```
+   */
+  checkboxGroup: (name, label, options, config) => ({
+    checkboxGroupOptions: options,
+    checkboxProps: config?.checkboxProps,
+    description: config?.description,
+    label,
+    name,
+    orientation: config?.orientation || "vertical",
+    type: "checkboxGroup"
+  }),
   /**
    * Create a conditional field that shows/hides based on form data
    *
@@ -2509,12 +3248,13 @@ var FormFieldHelpers = {
    * ```
    */
   conditional: (name, condition, field2) => {
-    return {
+    const config = {
       condition,
       field: field2,
       name,
       type: "conditional"
     };
+    return config;
   },
   /**
    * Create a content field for headers, questions, or custom content between fields
@@ -2531,7 +3271,7 @@ var FormFieldHelpers = {
    * ```
    */
   content: (title, description, options) => {
-    return {
+    const config = {
       className: options?.className,
       description: description || void 0,
       name: options?.name,
@@ -2539,7 +3279,31 @@ var FormFieldHelpers = {
       title: title || void 0,
       type: "content"
     };
+    return config;
   },
+  /**
+   * Create a custom field with full control over rendering
+   *
+   * @example
+   * ```tsx
+   * // Custom field with render function
+   * FormFieldHelpers.custom<FormData>(
+   *   "skills",
+   *   "Skills",
+   *   ({ form, control }) => {
+   *     // Custom rendering logic
+   *     return <div>...</div>;
+   *   }
+   * )
+   * ```
+   */
+  custom: (name, label, render, options) => ({
+    label,
+    name,
+    render,
+    type: "custom",
+    ...options
+  }),
   /**
    * Create a date field
    *
@@ -2625,7 +3389,10 @@ var FormFieldHelpers = {
    * // With type
    * FormFieldHelpers.input("email", "Email", "email")
    *
-   * // With full customization
+   * // With props only (no type)
+   * FormFieldHelpers.input("name", "Name", { placeholder: "Enter name" })
+   *
+   * // With type and props
    * FormFieldHelpers.input("email", "Email", "email", {
    *   placeholder: "Enter your email",
    *   classNames: { input: "custom-input" },
@@ -2634,15 +3401,25 @@ var FormFieldHelpers = {
    * })
    * ```
    */
-  input: (name, label, type, inputProps) => ({
-    inputProps: {
-      type: type || "text",
-      ...inputProps
-    },
-    label,
-    name,
-    type: "input"
-  }),
+  input: inputHelper,
+  /**
+   * Create a radio group field
+   *
+   * @example
+   * ```tsx
+   * // Simple radio group
+   * FormFieldHelpers.radio("gender", "Gender", [
+   *   { label: "Male", value: "male" },
+   *   { label: "Female", value: "female" }
+   * ])
+   *
+   * // With full customization
+   * FormFieldHelpers.radio("gender", "Gender", options, {
+   *   orientation: "horizontal",
+   *   classNames: { base: "custom-radio" }
+   * })
+   * ```
+   */
   /**
    * Create a radio group field
    *
@@ -2775,6 +3552,8 @@ var CommonFields = {
    * Address fields
    */
   address: () => [
+    // Type assertions are necessary: TypeScript can't prove these strings are valid Path<T>
+    // for an arbitrary T, but they will be valid when used with a matching schema
     FormFieldHelpers.input("street", "Street Address"),
     FormFieldHelpers.input("city", "City"),
     FormFieldHelpers.input("state", "State/Province"),
@@ -2793,6 +3572,7 @@ var CommonFields = {
    * Personal information fields
    */
   personal: () => [
+    // Type assertions are necessary - see CommonFields documentation above
     FormFieldHelpers.input("firstName", "First Name"),
     FormFieldHelpers.input("lastName", "Last Name"),
     FormFieldHelpers.input("email", "Email", "email"),
@@ -2802,6 +3582,7 @@ var CommonFields = {
    * Terms and conditions fields
    */
   terms: () => [
+    // Type assertions are necessary - see CommonFields documentation above
     FormFieldHelpers.checkbox(
       "terms",
       "I agree to the terms and conditions"
@@ -2818,7 +3599,7 @@ var CommonFields = {
 };
 
 // src/builders/AdvancedFormBuilder.ts
-function inputField(name, label, props) {
+function createInputField(name, label, props) {
   return {
     label,
     name,
@@ -2834,7 +3615,7 @@ function inputField(name, label, props) {
     }
   };
 }
-function textareaField(name, label, props) {
+function createTextareaField(name, label, props) {
   return {
     label,
     name,
@@ -2850,7 +3631,7 @@ function textareaField(name, label, props) {
     }
   };
 }
-function selectField(name, label, options) {
+function createSelectField(name, label, options) {
   return {
     label,
     name,
@@ -2858,7 +3639,7 @@ function selectField(name, label, options) {
     type: "select"
   };
 }
-function checkboxField(name, label, props) {
+function createCheckboxField(name, label, props) {
   return {
     label,
     name,
@@ -2871,7 +3652,7 @@ function checkboxField(name, label, props) {
     }
   };
 }
-function switchField(name, label, props) {
+function createSwitchField(name, label, props) {
   return {
     description: props?.description,
     isDisabled: props?.isDisabled,
@@ -2885,7 +3666,7 @@ function switchField(name, label, props) {
     }
   };
 }
-function radioField(name, label, options, props) {
+function createRadioField(name, label, options, props) {
   return {
     label,
     name,
@@ -2900,7 +3681,7 @@ function radioField(name, label, options, props) {
     }
   };
 }
-function sliderField(name, label, props) {
+function createSliderField(name, label, props) {
   return {
     label,
     name,
@@ -2915,20 +3696,19 @@ function sliderField(name, label, props) {
     }
   };
 }
-function dateField(name, label, props) {
+function createDateField(name, label, props) {
+  const dateProps = {};
+  if (props?.className !== void 0) {
+    dateProps.className = props.className;
+  }
   return {
     label,
     name,
     type: "date",
-    ...props && {
-      dateProps: {
-        className: props.className,
-        placeholder: props.placeholder
-      }
-    }
+    ...Object.keys(dateProps).length > 0 && { dateProps }
   };
 }
-function fileField(name, label, props) {
+function createFileField(name, label, props) {
   return {
     label,
     name,
@@ -2943,7 +3723,7 @@ function fileField(name, label, props) {
     }
   };
 }
-function fontPickerField(name, label, props) {
+function createFontPickerField(name, label, props) {
   return {
     className: props?.className,
     description: props?.description,
@@ -2953,83 +3733,119 @@ function fontPickerField(name, label, props) {
     type: "fontPicker"
   };
 }
-function contentField(title, description, options) {
+function createStringArrayField(name, label, props) {
+  return {
+    className: props?.className,
+    description: props?.description,
+    isDisabled: props?.isDisabled,
+    label,
+    name,
+    stringArrayProps: {
+      addButtonText: props?.addButtonText,
+      allowDuplicates: props?.allowDuplicates,
+      maxItems: props?.maxItems,
+      minItems: props?.minItems,
+      placeholder: props?.placeholder,
+      showAddButton: props?.showAddButton,
+      transformItem: props?.transformItem,
+      validateItem: props?.validateItem
+    },
+    type: "stringArray"
+  };
+}
+function createContentField(config) {
   return {
-    className: options?.className,
-    description: description || void 0,
-    name: options?.name,
-    render: options?.render,
-    title: title || void 0,
+    className: config.className,
+    description: config.description || void 0,
+    name: config.name,
+    render: config.render,
+    title: config.title || void 0,
     type: "content"
   };
 }
-function createField(type, name, label, optionsOrProps, props) {
-  switch (type) {
+function createFieldFromParams(params) {
+  switch (params.type) {
     case "input":
-      return inputField(name, label, optionsOrProps);
+      return createInputField(params.name, params.label, params.props);
     case "textarea":
-      return textareaField(name, label, optionsOrProps);
+      return createTextareaField(params.name, params.label, params.props);
     case "select":
-      return selectField(name, label, optionsOrProps);
+      return createSelectField(params.name, params.label, params.options);
     case "checkbox":
-      return checkboxField(name, label, optionsOrProps);
+      return createCheckboxField(params.name, params.label, params.props);
     case "switch":
-      return switchField(name, label, optionsOrProps);
+      return createSwitchField(params.name, params.label, params.props);
     case "radio":
-      return radioField(name, label, optionsOrProps, props);
+      return createRadioField(
+        params.name,
+        params.label,
+        params.options,
+        params.props
+      );
     case "slider":
-      return sliderField(name, label, optionsOrProps);
+      return createSliderField(params.name, params.label, params.props);
     case "date":
-      return dateField(name, label, optionsOrProps);
+      return createDateField(params.name, params.label, params.props);
     case "file":
-      return fileField(name, label, optionsOrProps);
+      return createFileField(params.name, params.label, params.props);
     case "fontPicker":
-      return fontPickerField(name, label, optionsOrProps);
+      return createFontPickerField(params.name, params.label, params.props);
+    case "stringArray":
+      return createStringArrayField(params.name, params.label, params.props);
+    case "autocomplete":
+      return {
+        autocompleteProps: params.props,
+        label: params.label,
+        name: params.name,
+        options: params.options,
+        type: "autocomplete"
+      };
     case "content":
-      if (typeof optionsOrProps === "string" || optionsOrProps === null) {
-        return contentField(optionsOrProps, props);
-      }
-      if (typeof optionsOrProps === "object" && optionsOrProps !== null) {
-        return contentField(
-          optionsOrProps.title,
-          optionsOrProps.description,
-          optionsOrProps
-        );
-      }
-      return contentField(
-        name,
-        label,
-        optionsOrProps
-      );
-    default:
-      throw new Error(`Unknown field type: ${type}`);
+      return createContentField({
+        className: params.className,
+        description: params.description,
+        name: params.name,
+        render: params.render,
+        title: params.title
+      });
+    default: {
+      const _exhaustive = params;
+      throw new Error(`Unknown field type: ${_exhaustive.type}`);
+    }
   }
 }
+function createField(params) {
+  return createFieldFromParams(params);
+}
 var AdvancedFieldBuilder = class {
   constructor() {
     this.fields = [];
   }
-  field(type, name, label, optionsOrProps, props) {
-    this.fields.push(createField(type, name, label, optionsOrProps, props));
+  /**
+   * Add any field type using the unified API
+   */
+  field(params) {
+    this.fields.push(createField(params));
     return this;
   }
   /**
    * Add a conditional field that shows/hides based on form data
    */
   conditionalField(name, condition, field2) {
-    this.fields.push({
+    const config = {
       condition,
       field: field2,
       name,
       type: "conditional"
-    });
+    };
+    this.fields.push(config);
     return this;
   }
   /**
    * Add a field array for dynamic repeating field groups
    */
   fieldArray(name, label, fields, options) {
-    this.fields.push({
+    const config = {
       addButtonText: options?.addButtonText,
       fields,
       label,
@@ -3038,21 +3854,23 @@ var AdvancedFieldBuilder = class {
       name,
       removeButtonText: options?.removeButtonText,
       type: "fieldArray"
-    });
+    };
+    this.fields.push(config);
     return this;
   }
   /**
    * Add a dynamic section that shows/hides based on form data
    */
   dynamicSection(name, condition, fields, options) {
-    this.fields.push({
+    const config = {
       condition,
       description: options?.description,
       fields,
       name,
       title: options?.title,
       type: "dynamicSection"
-    });
+    };
+    this.fields.push(config);
     return this;
   }
   /**
@@ -3066,8 +3884,11 @@ var FieldArrayItemBuilder = class {
   constructor() {
     this.fields = [];
   }
-  field(type, name, label, optionsOrProps, props) {
-    this.fields.push(createField(type, name, label, optionsOrProps, props));
+  /**
+   * Add any field type using the unified API for array items
+   */
+  field(params) {
+    this.fields.push(createField(params));
     return this;
   }
   /**
@@ -3085,15 +3906,12 @@ var FieldArrayBuilder = class {
     this.arrayName = arrayName;
     this.fields = [];
   }
-  field(type, name, label, optionsOrProps, props) {
-    const fullPath = `${this.arrayName}.${name}`;
-    const fieldConfig = createField(
-      type,
-      fullPath,
-      label,
-      optionsOrProps,
-      props
-    );
+  field(params) {
+    const fullPath = `${this.arrayName}.${params.name}`;
+    const fieldConfig = createField({
+      ...params,
+      name: fullPath
+    });
     this.fields.push(fieldConfig);
     return this;
   }
@@ -3136,7 +3954,7 @@ var TypeInferredBuilder = class {
         new RegExp(pattern),
         `${label} format is invalid`
       );
-    this.schemaFields[name] = zodType;
+    this.schemaFields[pathToString(name)] = zodType;
     this.formFields.push({
       inputProps: { type: "text", ...fieldOptions },
       label,
@@ -3149,7 +3967,7 @@ var TypeInferredBuilder = class {
    * Add an email field
    */
   email(name, label, options) {
-    this.schemaFields[name] = z3.string().email(`Please enter a valid email address`);
+    this.schemaFields[pathToString(name)] = z3.string().email(`Please enter a valid email address`);
     this.formFields.push({
       inputProps: { type: "email", ...options },
       label,
@@ -3168,7 +3986,7 @@ var TypeInferredBuilder = class {
       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.schemaFields[pathToString(name)] = zodType;
     this.formFields.push({
       inputProps: { max, min, step, type: "number", ...fieldOptions },
       label,
@@ -3188,7 +4006,7 @@ var TypeInferredBuilder = class {
         minLength,
         `${label} must be at least ${minLength} characters`
       );
-    this.schemaFields[name] = zodType;
+    this.schemaFields[pathToString(name)] = zodType;
     this.formFields.push({
       label,
       name,
@@ -3201,7 +4019,7 @@ var TypeInferredBuilder = class {
    * Add a select field
    */
   select(name, label, options) {
-    this.schemaFields[name] = z3.string().min(1, `Please select a ${label.toLowerCase()}`);
+    this.schemaFields[pathToString(name)] = z3.string().min(1, `Please select a ${label.toLowerCase()}`);
     this.formFields.push({
       label,
       name,
@@ -3222,7 +4040,7 @@ var TypeInferredBuilder = class {
         `You must agree to ${label.toLowerCase()}`
       );
     }
-    this.schemaFields[name] = zodType;
+    this.schemaFields[pathToString(name)] = zodType;
     this.formFields.push({
       checkboxProps: fieldOptions,
       label,
@@ -3235,7 +4053,7 @@ var TypeInferredBuilder = class {
    * Add a switch field
    */
   switch(name, label, options) {
-    this.schemaFields[name] = z3.boolean().optional();
+    this.schemaFields[pathToString(name)] = z3.boolean().optional();
     this.formFields.push({
       label,
       name,
@@ -3248,7 +4066,7 @@ var TypeInferredBuilder = class {
    * Add a radio field
    */
   radio(name, label, options, fieldOptions) {
-    this.schemaFields[name] = z3.string().min(1, `Please select a ${label.toLowerCase()}`);
+    this.schemaFields[pathToString(name)] = z3.string().min(1, `Please select a ${label.toLowerCase()}`);
     this.formFields.push({
       label,
       name,
@@ -3268,15 +4086,19 @@ var TypeInferredBuilder = class {
       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.schemaFields[pathToString(name)] = zodType;
+    const { className, description, isDisabled, ...validSliderProps } = fieldOptions || {};
     this.formFields.push({
+      className,
+      description,
+      isDisabled,
       label,
       name,
       sliderProps: {
         maxValue: max,
         minValue: min,
         step,
-        ...fieldOptions
+        ...validSliderProps
       },
       type: "slider"
     });
@@ -3286,7 +4108,7 @@ var TypeInferredBuilder = class {
    * Add a date field
    */
   date(name, label, options) {
-    this.schemaFields[name] = z3.string().min(1, `${label} is required`);
+    this.schemaFields[pathToString(name)] = z3.string().min(1, `${label} is required`);
     this.formFields.push({
       dateProps: options,
       label,
@@ -3299,7 +4121,7 @@ var TypeInferredBuilder = class {
    * Add a file field
    */
   file(name, label, options) {
-    this.schemaFields[name] = z3.any().optional();
+    this.schemaFields[pathToString(name)] = z3.any().optional();
     this.formFields.push({
       fileProps: options,
       label,
@@ -3376,11 +4198,18 @@ var field = {
 // src/builders/NestedPathBuilder.ts
 var NestedPathBuilder = class {
   constructor() {
+    // fields is accessed by nested builder classes, so it needs to be accessible
+    // Making it public allows nested builders to add fields while maintaining encapsulation
     this.fields = [];
   }
   /**
    * Create a nested object path builder
    * Usage: builder.nest("address").field("street", "Street Address")
+   *
+   * @param path - A path in the form data structure. When called from root level,
+   *               accepts Path<T>. When called after .end() from a nested context,
+   *               accepts any string for nested paths under sections.
+   * @returns A builder for nested paths under the specified path
    */
   nest(path) {
     return new NestedObjectBuilder(this, path);
@@ -3394,29 +4223,18 @@ var NestedPathBuilder = class {
   }
   /**
    * Add a field with single path
-   * Usage: builder.field("firstName", "First Name")
+   * Usage: builder.field({ type: "input", name: "firstName", label: "First Name" })
    */
-  field(name, label, type = "input", props) {
-    this.fields.push({
-      label,
-      name,
-      type,
-      ...props
-    });
+  field(params) {
+    this.fields.push(createField(params));
     return this;
   }
   /**
    * Add a field with path segments
-   * Usage: builder.fieldPath(["user", "profile", "name"], "Full Name")
+   * Usage: builder.fieldPath({ type: "input", name: path.join("."), label: "Full Name" })
    */
-  fieldPath(path, label, type = "input", props) {
-    const name = path.join(".");
-    this.fields.push({
-      label,
-      name,
-      type,
-      ...props
-    });
+  fieldPath(params) {
+    this.fields.push(createField(params));
     return this;
   }
   /**
@@ -3445,23 +4263,28 @@ var NestedObjectBuilder = class _NestedObjectBuilder {
   /**
    * 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
-    });
+  field(params) {
+    const fullPath = typeof params.name === "string" ? `${this.path}.${params.name}` : params.name;
+    const fieldParams = {
+      ...params,
+      name: fullPath
+    };
+    this.parent.fields.push(createField(fieldParams));
     return this;
   }
   /**
    * Nest deeper into the object
+   *
+   * @param subPath - A string representing a nested path under the current path.
+   *                  The parameter accepts any string; TypeScript validates the constructed
+   *                  path (basePath.subPath) in the return type.
+   * @returns A builder for the nested path
    */
   nest(subPath) {
+    const fullPath = `${this.path}.${subPath}`;
     return new _NestedObjectBuilder(
       this.parent,
-      `${this.path}.${subPath}`
+      fullPath
     );
   }
   /**
@@ -3479,14 +4302,13 @@ var SectionBuilder = class {
   /**
    * 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
-    });
+  field(params) {
+    const fullPath = typeof params.name === "string" ? `${this.path}.${params.name}` : params.name;
+    const fieldParams = {
+      ...params,
+      name: fullPath
+    };
+    this.parent.fields.push(createField(fieldParams));
     return this;
   }
   /**
@@ -3494,17 +4316,29 @@ var SectionBuilder = class {
    */
   fields(fieldDefinitions) {
     fieldDefinitions.forEach((field2) => {
-      this.field(field2.name, field2.label, field2.type, field2.props);
+      const fullPath = `${this.path}.${field2.name}`;
+      this.parent.fields.push({
+        label: field2.label,
+        name: fullPath,
+        type: field2.type || "input",
+        ...field2.props
+      });
     });
     return this;
   }
   /**
    * Nest deeper into the section
+   *
+   * @param subPath - A string representing a nested path under the current section path.
+   *                  The parameter accepts any string; TypeScript validates the constructed
+   *                  path (basePath.subPath) in the return type.
+   * @returns A builder for the nested path
    */
   nest(subPath) {
+    const fullPath = `${this.path}.${subPath}`;
     return new NestedObjectBuilder(
       this.parent,
-      `${this.path}.${subPath}`
+      fullPath
     );
   }
   /**
@@ -3522,13 +4356,12 @@ var FieldTemplateBuilder = class {
   /**
    * Complete the field definition
    */
-  complete(label, type = "input", props) {
-    this.parent.fields.push({
-      label,
-      name: this.path,
-      type,
-      ...props
-    });
+  complete(params) {
+    const fieldParams = {
+      ...params,
+      name: params.name ? `${this.path}.${params.name}` : this.path
+    };
+    this.parent.fields.push(createField(fieldParams));
     return this.parent;
   }
 };
@@ -3742,6 +4575,133 @@ function useMemoizedFieldProps(props, deps) {
   return useMemo2(() => props, deps);
 }
 
+// src/utils/arraySync.ts
+function syncArrays(options) {
+  const { current, existing, getId } = options;
+  const existingMap = /* @__PURE__ */ new Map();
+  const currentMap = /* @__PURE__ */ new Map();
+  existing.forEach((item) => {
+    const id = getId(item);
+    if (id !== void 0) {
+      existingMap.set(id, item);
+    }
+  });
+  current.forEach((item) => {
+    const id = getId(item);
+    if (id !== void 0) {
+      currentMap.set(id, item);
+    }
+  });
+  const toDelete = [];
+  existingMap.forEach((item, id) => {
+    if (!currentMap.has(id)) {
+      toDelete.push(item);
+    }
+  });
+  const toUpdate = [];
+  existingMap.forEach((existingItem, id) => {
+    const currentItem = currentMap.get(id);
+    if (currentItem) {
+      toUpdate.push({ current: currentItem, existing: existingItem });
+    }
+  });
+  const toCreate = [];
+  currentMap.forEach((item, id) => {
+    if (!existingMap.has(id)) {
+      toCreate.push(item);
+    }
+  });
+  return {
+    toCreate,
+    toDelete,
+    toUpdate
+  };
+}
+
+// src/utils/createFieldArrayCustomConfig.tsx
+import React27 from "react";
+import { useFieldArray as useFieldArray2 } from "react-hook-form";
+import { Button as Button6 } from "@heroui/react";
+function createFieldArrayCustomConfig(options) {
+  const {
+    className,
+    defaultItem,
+    enableReordering = false,
+    label,
+    max = 10,
+    min = 0,
+    name,
+    renderAddButton,
+    renderItem
+  } = options;
+  return {
+    className,
+    label,
+    name,
+    // ArrayPath is now accepted by CustomFieldConfig
+    render: ({ control, errors, form }) => {
+      const { append, fields, move, remove } = useFieldArray2({
+        control,
+        name
+        // ArrayPath is the correct type for useFieldArray
+      });
+      const canAdd = fields.length < max;
+      const canRemove = fields.length > min;
+      const handleAdd = () => {
+        if (canAdd) {
+          if (defaultItem) {
+            append(defaultItem());
+          } else {
+            append({});
+          }
+        }
+      };
+      const handleRemove = (index) => {
+        if (canRemove) {
+          remove(index);
+        }
+      };
+      const handleMoveUp = (index) => {
+        if (enableReordering && index > 0) {
+          move(index, index - 1);
+        }
+      };
+      const handleMoveDown = (index) => {
+        if (enableReordering && index < fields.length - 1) {
+          move(index, index + 1);
+        }
+      };
+      return /* @__PURE__ */ React27.createElement("div", { className }, /* @__PURE__ */ React27.createElement("div", { className: "space-y-4" }, fields.map((field2, index) => {
+        const canMoveUp = enableReordering && index > 0;
+        const canMoveDown = enableReordering && index < fields.length - 1;
+        return /* @__PURE__ */ React27.createElement(React27.Fragment, { key: field2.id }, renderItem({
+          canMoveDown,
+          canMoveUp,
+          control,
+          errors,
+          // fields from useFieldArray are already typed correctly
+          field: field2,
+          fields,
+          form,
+          index,
+          onMoveDown: () => handleMoveDown(index),
+          onMoveUp: () => handleMoveUp(index),
+          onRemove: () => handleRemove(index)
+        }));
+      }), fields.length === 0 && renderAddButton ? /* @__PURE__ */ React27.createElement("div", { className: "text-center py-8 text-gray-500" }, /* @__PURE__ */ React27.createElement("p", null, "No ", label?.toLowerCase() || "items", " added yet."), renderAddButton({ canAdd, onAdd: handleAdd })) : null, fields.length > 0 && renderAddButton ? renderAddButton({ canAdd, onAdd: handleAdd }) : canAdd && /* @__PURE__ */ React27.createElement(
+        Button6,
+        {
+          variant: "bordered",
+          onPress: handleAdd,
+          className: "w-full"
+        },
+        "Add Item"
+      )));
+    },
+    type: "custom"
+  };
+}
+
 // src/builders/validation-helpers.ts
 import { z as z4 } from "zod";
 var validationPatterns = {
@@ -3894,6 +4854,7 @@ export {
   AutocompleteField,
   BasicFormBuilder,
   CheckboxField,
+  CheckboxGroupField,
   CommonFields,
   ConditionalField,
   ConfigurableForm,
@@ -3915,6 +4876,7 @@ export {
   RadioGroupField,
   SelectField,
   ServerActionForm,
+  SimpleForm,
   SliderField,
   SubmitButton,
   SwitchField,
@@ -3930,6 +4892,7 @@ export {
   createEmailSchema,
   createField,
   createFieldArrayBuilder,
+  createFieldArrayCustomConfig,
   createFieldArrayItemBuilder,
   createFileSchema,
   createFormTestUtils,
@@ -3959,10 +4922,12 @@ export {
   getFormErrors,
   hasFieldError,
   hasFormErrors,
+  pathToString,
   serverValidation,
   shallowEqual,
   simulateFieldInput,
   simulateFormSubmission,
+  syncArrays,
   throttle,
   useDebouncedFieldValidation,
   useDebouncedValidation,