@rachelallyson/hero-hook-form 2.2.1 → 2.4.0

package/dist/index.js

@@ -6,7 +6,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/Form.tsx
-import React17 from "react";
+import React18 from "react";
 import { Button as Button3 } from "@heroui/react";
 
 // src/hooks/useFormHelper.ts
@@ -75,19 +75,98 @@ function useFormHelper({
 }
 
 // src/components/FormField.tsx
-import React16 from "react";
+import React17 from "react";
 import { useWatch as useWatch3 } from "react-hook-form";
 
-// src/fields/CheckboxField.tsx
-import React2 from "react";
+// src/fields/AutocompleteField.tsx
+import React from "react";
 import { Controller } from "react-hook-form";
 
+// src/ui/ind.ts
+import { Autocomplete, AutocompleteItem } from "@heroui/autocomplete";
+import { Button } from "@heroui/button";
+import { Checkbox } from "@heroui/checkbox";
+import { DateInput } from "@heroui/date-input";
+import { DatePicker } from "@heroui/date-picker";
+import { Input, Textarea } from "@heroui/input";
+import { Radio, RadioGroup } from "@heroui/radio";
+import { Select, SelectItem } from "@heroui/select";
+import { Slider } from "@heroui/slider";
+import { Spinner } from "@heroui/spinner";
+import { Switch } from "@heroui/switch";
+
+// src/fields/AutocompleteField.tsx
+function AutocompleteField(props) {
+  const {
+    autocompleteProps,
+    children,
+    className,
+    control,
+    description,
+    isDisabled,
+    items,
+    label,
+    name,
+    placeholder,
+    rules
+  } = props;
+  return /* @__PURE__ */ React.createElement(
+    Controller,
+    {
+      control,
+      name,
+      render: ({ field: field2, fieldState }) => {
+        const selectedKey = field2.value;
+        return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(
+          Autocomplete,
+          {
+            ...autocompleteProps,
+            description,
+            errorMessage: fieldState.error?.message,
+            isDisabled,
+            isInvalid: Boolean(fieldState.error),
+            label,
+            placeholder,
+            selectedKey: selectedKey != null ? String(selectedKey) : void 0,
+            inputValue: selectedKey != null ? void 0 : field2.value ?? "",
+            onSelectionChange: (key) => {
+              const next = key ?? "";
+              field2.onChange(next);
+            },
+            onInputChange: (value) => {
+              if (autocompleteProps?.allowsCustomValue) {
+                field2.onChange(value);
+              }
+            },
+            defaultItems: items
+          },
+          children ? children : (item) => /* @__PURE__ */ React.createElement(
+            AutocompleteItem,
+            {
+              key: String(item.value),
+              textValue: String(item.value),
+              description: item.description,
+              isDisabled: item.disabled
+            },
+            item.label
+          )
+        ));
+      },
+      rules
+    }
+  );
+}
+
+// src/fields/CheckboxField.tsx
+import React3 from "react";
+import { Controller as Controller2 } from "react-hook-form";
+
 // src/providers/ConfigProvider.tsx
-import React, { createContext, useContext, useMemo } from "react";
+import React2, { createContext, useContext, useMemo } from "react";
 var DefaultsContext = createContext(null);
 function HeroHookFormProvider(props) {
   const value = useMemo(() => props.defaults ?? {}, [props.defaults]);
-  return /* @__PURE__ */ React.createElement(DefaultsContext.Provider, { value }, props.children);
+  return /* @__PURE__ */ React2.createElement(DefaultsContext.Provider, { value }, props.children);
 }
 function useHeroHookFormDefaults() {
   const cfg = useContext(DefaultsContext) ?? {};
@@ -168,18 +247,6 @@ function useHeroHookFormDefaults() {
   };
 }
 
-// src/ui/ind.ts
-import { Button } from "@heroui/button";
-import { Checkbox } from "@heroui/checkbox";
-import { DateInput } from "@heroui/date-input";
-import { DatePicker } from "@heroui/date-picker";
-import { Input, Textarea } from "@heroui/input";
-import { Radio, RadioGroup } from "@heroui/radio";
-import { Select, SelectItem } from "@heroui/select";
-import { Slider } from "@heroui/slider";
-import { Spinner } from "@heroui/spinner";
-import { Switch } from "@heroui/switch";
-
 // src/fields/CheckboxField.tsx
 function CheckboxField(props) {
   const {
@@ -193,12 +260,12 @@ function CheckboxField(props) {
     rules
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React2.createElement(
-    Controller,
+  return /* @__PURE__ */ React3.createElement(
+    Controller2,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React2.createElement("div", { className }, /* @__PURE__ */ React2.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React3.createElement("div", { className }, /* @__PURE__ */ React3.createElement(
         Checkbox,
         {
           ...defaults.checkbox,
@@ -210,14 +277,14 @@ function CheckboxField(props) {
           onValueChange: (val) => field2.onChange(val)
         },
         label
-      ), description ? /* @__PURE__ */ React2.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React2.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      ), 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
-import React3 from "react";
+import React4 from "react";
 import { useWatch, useFormContext } from "react-hook-form";
 function ConditionalField({
   className,
@@ -231,7 +298,7 @@ function ConditionalField({
   if (!shouldShow) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement("div", { className }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement("div", { className }, /* @__PURE__ */ React4.createElement(
     FormField,
     {
       config: field2,
@@ -247,29 +314,29 @@ function ConditionalField({
 }
 
 // src/fields/ContentField.tsx
-import React4 from "react";
+import React5 from "react";
 function ContentField({
   config,
   form,
   submissionState
 }) {
   if (config.render) {
-    return /* @__PURE__ */ React4.createElement("div", { className: config.className }, config.render({
+    return /* @__PURE__ */ React5.createElement("div", { className: config.className }, config.render({
       errors: form.formState.errors,
       form,
       isSubmitting: submissionState.isSubmitting
     }));
   }
-  return /* @__PURE__ */ React4.createElement("div", { className: config.className }, config.title && /* @__PURE__ */ React4.createElement("h3", { className: "text-lg font-semibold text-foreground mb-2" }, config.title), config.description && /* @__PURE__ */ React4.createElement("p", { className: "text-sm text-muted-foreground" }, config.description));
+  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));
 }
 
 // src/fields/DateField.tsx
-import React5 from "react";
-import { Controller as Controller2 } from "react-hook-form";
+import React6 from "react";
+import { Controller as Controller3 } from "react-hook-form";
 function CoercedDateInput(props) {
   const { dateProps, description, disabled, errorMessage, field: field2, label } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     DateInput,
     {
       ...defaults.dateInput,
@@ -297,12 +364,12 @@ function DateField(props) {
     rules,
     transform
   } = props;
-  return /* @__PURE__ */ React5.createElement(
-    Controller2,
+  return /* @__PURE__ */ React6.createElement(
+    Controller3,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React6.createElement("div", { className }, /* @__PURE__ */ React6.createElement(
         CoercedDateInput,
         {
           dateProps,
@@ -322,7 +389,7 @@ function DateField(props) {
 }
 
 // src/fields/DynamicSectionField.tsx
-import React6 from "react";
+import React7 from "react";
 import { useWatch as useWatch2, useFormContext as useFormContext2 } from "react-hook-form";
 function DynamicSectionField({
   className,
@@ -336,7 +403,7 @@ function DynamicSectionField({
   if (!shouldShow) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement("div", { className }, (title || description) && /* @__PURE__ */ React6.createElement("div", { className: "mb-6" }, title && /* @__PURE__ */ React6.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-2" }, title), description && /* @__PURE__ */ React6.createElement("p", { className: "text-sm text-gray-600" }, description)), /* @__PURE__ */ React6.createElement("div", { className: "space-y-4" }, fields.map((fieldConfig, index) => /* @__PURE__ */ React6.createElement(
+  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(
     FormField,
     {
       key: `${fieldConfig.name}-${index}`,
@@ -353,7 +420,7 @@ function DynamicSectionField({
 }
 
 // src/fields/FieldArrayField.tsx
-import React7 from "react";
+import React8 from "react";
 import { useFieldArray, useFormContext as useFormContext3 } from "react-hook-form";
 import { Button as Button2 } from "@heroui/react";
 function FieldArrayField({
@@ -401,13 +468,13 @@ function FieldArrayField({
       remove(index);
     }
   };
-  return /* @__PURE__ */ React7.createElement("div", { className }, /* @__PURE__ */ React7.createElement("div", { className: "space-y-4" }, fields.map((field2, index) => /* @__PURE__ */ React7.createElement(
+  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__ */ React7.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React7.createElement("h4", { className: "text-sm font-medium text-gray-700" }, config.label, " #", index + 1), canRemove && /* @__PURE__ */ React7.createElement(
+    /* @__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",
@@ -419,7 +486,7 @@ function FieldArrayField({
       },
       removeButtonText
     )),
-    /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, fieldConfigs.map((fieldConfig) => /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, fieldConfigs.map((fieldConfig) => /* @__PURE__ */ React8.createElement(
       FormField,
       {
         key: `${fieldConfig.name}-${index}`,
@@ -436,7 +503,7 @@ function FieldArrayField({
         }
       }
     )))
-  )), canAdd && /* @__PURE__ */ React7.createElement(
+  )), canAdd && /* @__PURE__ */ React8.createElement(
     Button2,
     {
       variant: "bordered",
@@ -445,7 +512,7 @@ function FieldArrayField({
       className: "w-full"
     },
     addButtonText
-  ), fields.length === 0 && /* @__PURE__ */ React7.createElement("div", { className: "text-center py-8 text-gray-500" }, /* @__PURE__ */ React7.createElement("p", null, "No ", config.label?.toLowerCase(), " added yet."), /* @__PURE__ */ React7.createElement(
+  ), 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",
@@ -458,8 +525,8 @@ function FieldArrayField({
 }
 
 // src/fields/FileField.tsx
-import React8 from "react";
-import { Controller as Controller3 } from "react-hook-form";
+import React9 from "react";
+import { Controller as Controller4 } from "react-hook-form";
 function CoercedFileInput(props) {
   const {
     accept,
@@ -472,7 +539,7 @@ function CoercedFileInput(props) {
     multiple
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     Input,
     {
       ...defaults.input,
@@ -508,12 +575,12 @@ function FileField(props) {
     rules,
     transform
   } = props;
-  return /* @__PURE__ */ React8.createElement(
-    Controller3,
+  return /* @__PURE__ */ React9.createElement(
+    Controller4,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement(
         CoercedFileInput,
         {
           accept,
@@ -535,8 +602,8 @@ function FileField(props) {
 }
 
 // src/fields/FontPickerField.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";
 var FontPickerComponent = null;
 var fontPickerLoaded = false;
 var fontPickerLoading = false;
@@ -552,12 +619,12 @@ function FontPickerField(props) {
     name,
     rules
   } = props;
-  const [fontPickerState, setFontPickerState] = React9.useState({
+  const [fontPickerState, setFontPickerState] = React10.useState({
     component: FontPickerComponent,
     error: null,
     loading: false
   });
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (fontPickerLoaded && FontPickerComponent) {
       setFontPickerState({
         component: FontPickerComponent,
@@ -615,17 +682,17 @@ function FontPickerField(props) {
     void loadFontPicker();
   }, []);
   if (fontPickerState.loading) {
-    return /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React9.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React9.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React9.createElement("div", { className: "p-4 border border-default-200 bg-default-50 rounded-medium" }, /* @__PURE__ */ React9.createElement("p", { className: "text-default-600 text-sm" }, "Loading font picker..."))));
+    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..."))));
   }
   if (!fontPickerState.component) {
-    return /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React9.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React9.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React9.createElement("div", { className: "p-4 border border-warning-200 bg-warning-50 rounded-medium" }, /* @__PURE__ */ React9.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("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__ */ React9.createElement(
-    Controller4,
+  return /* @__PURE__ */ React10.createElement(
+    Controller5,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React9.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React10.createElement(
         fontPickerState.component,
         {
           label,
@@ -644,12 +711,12 @@ function FontPickerField(props) {
 }
 
 // src/fields/InputField.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";
 function CoercedInput(props) {
   const { description, disabled, errorMessage, field: field2, inputProps, label } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     Input,
     {
       ...defaults.input,
@@ -665,7 +732,7 @@ function CoercedInput(props) {
     }
   );
 }
-var InputField = React10.memo(
+var InputField = React11.memo(
   (props) => {
     const {
       className,
@@ -678,12 +745,12 @@ var InputField = React10.memo(
       rules,
       transform
     } = props;
-    return /* @__PURE__ */ React10.createElement(
-      Controller5,
+    return /* @__PURE__ */ React11.createElement(
+      Controller6,
       {
         control,
         name,
-        render: ({ field: field2, fieldState }) => /* @__PURE__ */ React10.createElement("div", { className }, /* @__PURE__ */ React10.createElement(
+        render: ({ field: field2, fieldState }) => /* @__PURE__ */ React11.createElement("div", { className }, /* @__PURE__ */ React11.createElement(
           CoercedInput,
           {
             description,
@@ -713,8 +780,8 @@ var InputField = React10.memo(
 );
 
 // src/fields/RadioGroupField.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 RadioGroupField(props) {
   const {
     className,
@@ -728,12 +795,12 @@ function RadioGroupField(props) {
     rules
   } = props;
   const defaults = useHeroHookFormDefaults();
-  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(
         RadioGroup,
         {
           ...defaults.radioGroup,
@@ -746,7 +813,7 @@ function RadioGroupField(props) {
           onBlur: field2.onBlur,
           onValueChange: (val) => field2.onChange(val)
         },
-        options.map((opt) => /* @__PURE__ */ React11.createElement(
+        options.map((opt) => /* @__PURE__ */ React12.createElement(
           Radio,
           {
             key: String(opt.value),
@@ -755,15 +822,15 @@ function RadioGroupField(props) {
           },
           opt.label
         ))
-      ), fieldState.error?.message ? /* @__PURE__ */ React11.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      ), fieldState.error?.message ? /* @__PURE__ */ React12.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
       rules
     }
   );
 }
 
 // src/fields/SelectField.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 SelectField(props) {
   const {
     className,
@@ -778,14 +845,14 @@ function SelectField(props) {
     selectProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React12.createElement(
-    Controller7,
+  return /* @__PURE__ */ React13.createElement(
+    Controller8,
     {
       control,
       name,
       render: ({ field: field2, fieldState }) => {
         const selectedKey = field2.value;
-        return /* @__PURE__ */ React12.createElement("div", { className }, /* @__PURE__ */ React12.createElement(
+        return /* @__PURE__ */ React13.createElement("div", { className }, /* @__PURE__ */ React13.createElement(
           Select,
           {
             ...defaults.select,
@@ -803,7 +870,7 @@ function SelectField(props) {
               field2.onChange(next);
             }
           },
-          options.map((opt) => /* @__PURE__ */ React12.createElement(
+          options.map((opt) => /* @__PURE__ */ React13.createElement(
             SelectItem,
             {
               key: String(opt.value),
@@ -820,12 +887,12 @@ function SelectField(props) {
 }
 
 // src/fields/SliderField.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 CoercedSlider(props) {
   const { description, disabled, errorMessage, field: field2, label, sliderProps } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     Slider,
     {
       ...defaults.slider,
@@ -853,12 +920,12 @@ function SliderField(props) {
     sliderProps,
     transform
   } = props;
-  return /* @__PURE__ */ React13.createElement(
-    Controller8,
+  return /* @__PURE__ */ React14.createElement(
+    Controller9,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React13.createElement("div", { className }, /* @__PURE__ */ React13.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React14.createElement("div", { className }, /* @__PURE__ */ React14.createElement(
         CoercedSlider,
         {
           description,
@@ -878,8 +945,8 @@ function SliderField(props) {
 }
 
 // src/fields/SwitchField.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 SwitchField(props) {
   const {
     className,
@@ -892,12 +959,12 @@ function SwitchField(props) {
     switchProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  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(
         Switch,
         {
           ...defaults.switch,
@@ -908,15 +975,15 @@ function SwitchField(props) {
           onValueChange: (val) => field2.onChange(val)
         },
         label
-      ), description ? /* @__PURE__ */ React14.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React14.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      ), 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
     }
   );
 }
 
 // src/fields/TextareaField.tsx
-import React15 from "react";
-import { Controller as Controller10 } from "react-hook-form";
+import React16 from "react";
+import { Controller as Controller11 } from "react-hook-form";
 function TextareaField(props) {
   const {
     className,
@@ -929,12 +996,12 @@ function TextareaField(props) {
     textareaProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React15.createElement(
-    Controller10,
+  return /* @__PURE__ */ React16.createElement(
+    Controller11,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React15.createElement("div", { className }, /* @__PURE__ */ React15.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React16.createElement("div", { className }, /* @__PURE__ */ React16.createElement(
         Textarea,
         {
           ...defaults.textarea,
@@ -955,7 +1022,7 @@ function TextareaField(props) {
 }
 
 // src/components/FormField.tsx
-var FormField = React16.memo(
+var FormField = React17.memo(
   ({
     config,
     form,
@@ -967,7 +1034,7 @@ var FormField = React16.memo(
     const { control } = form;
     const watchedValues = useWatch3({ control });
     if (config.type === "content") {
-      return /* @__PURE__ */ React16.createElement(
+      return /* @__PURE__ */ React17.createElement(
         ContentField,
         {
           config,
@@ -997,7 +1064,7 @@ var FormField = React16.memo(
     };
     switch (config.type) {
       case "input":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           InputField,
           {
             ...baseProps,
@@ -1007,7 +1074,7 @@ var FormField = React16.memo(
           }
         );
       case "textarea":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           TextareaField,
           {
             ...baseProps,
@@ -1017,7 +1084,7 @@ var FormField = React16.memo(
           }
         );
       case "select":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           SelectField,
           {
             ...baseProps,
@@ -1030,8 +1097,22 @@ var FormField = React16.memo(
             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__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           CheckboxField,
           {
             ...baseProps,
@@ -1041,7 +1122,7 @@ var FormField = React16.memo(
           }
         );
       case "radio":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           RadioGroupField,
           {
             ...baseProps,
@@ -1055,7 +1136,7 @@ var FormField = React16.memo(
           }
         );
       case "switch":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           SwitchField,
           {
             ...baseProps,
@@ -1065,7 +1146,7 @@ var FormField = React16.memo(
           }
         );
       case "slider":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           SliderField,
           {
             ...baseProps,
@@ -1075,7 +1156,7 @@ var FormField = React16.memo(
           }
         );
       case "date":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           DateField,
           {
             ...baseProps,
@@ -1085,7 +1166,7 @@ var FormField = React16.memo(
           }
         );
       case "file":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           FileField,
           {
             ...baseProps,
@@ -1097,7 +1178,7 @@ var FormField = React16.memo(
           }
         );
       case "fontPicker":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           FontPickerField,
           {
             ...baseProps,
@@ -1115,7 +1196,7 @@ var FormField = React16.memo(
           name: config.name
         });
       case "conditional":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           ConditionalField,
           {
             config,
@@ -1124,7 +1205,7 @@ var FormField = React16.memo(
           }
         );
       case "fieldArray":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           FieldArrayField,
           {
             config,
@@ -1132,7 +1213,7 @@ var FormField = React16.memo(
           }
         );
       case "dynamicSection":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           DynamicSectionField,
           {
             config,
@@ -1184,12 +1265,12 @@ function ConfigurableForm({
   });
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React17.createElement(
+      return /* @__PURE__ */ React18.createElement(
         "div",
         {
           className: `grid gap-${spacing} ${columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}`
         },
-        fields.map((field2) => /* @__PURE__ */ React17.createElement(
+        fields.map((field2) => /* @__PURE__ */ React18.createElement(
           FormField,
           {
             key: field2.name,
@@ -1201,7 +1282,7 @@ function ConfigurableForm({
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React17.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React17.createElement(
+      return /* @__PURE__ */ React18.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React18.createElement(
         FormField,
         {
           key: field2.name,
@@ -1211,7 +1292,7 @@ function ConfigurableForm({
         }
       )));
     }
-    return /* @__PURE__ */ React17.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React18.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React18.createElement(
       FormField,
       {
         key: field2.name,
@@ -1225,23 +1306,23 @@ function ConfigurableForm({
     e.preventDefault();
     void handleSubmit();
   };
-  return /* @__PURE__ */ React17.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React17.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React17.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React17.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), isSubmitted && isSuccess && /* @__PURE__ */ React17.createElement(
+  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(
     "div",
     {
       className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
       "data-testid": "success-message"
     },
-    /* @__PURE__ */ React17.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
-    /* @__PURE__ */ React17.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
-  ), error && /* @__PURE__ */ React17.createElement(
+    /* @__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(
     "div",
     {
       className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
       "data-testid": "error-message"
     },
-    /* @__PURE__ */ React17.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
-    /* @__PURE__ */ React17.createElement("p", { className: "text-danger-700 text-sm mt-1" }, error)
-  ), renderFields(), /* @__PURE__ */ React17.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React17.createElement(
+    /* @__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(
     Button3,
     {
       color: "primary",
@@ -1251,7 +1332,7 @@ function ConfigurableForm({
       ...submitButtonProps
     },
     submitButtonText
-  ), showResetButton && /* @__PURE__ */ React17.createElement(
+  ), showResetButton && /* @__PURE__ */ React18.createElement(
     Button3,
     {
       isDisabled: isSubmitting,
@@ -1264,7 +1345,7 @@ function ConfigurableForm({
 }
 
 // src/components/ServerActionForm.tsx
-import React18 from "react";
+import React19 from "react";
 import { useActionState } from "react";
 function ServerActionForm({
   action,
@@ -1289,10 +1370,10 @@ function ServerActionForm({
     action,
     initialState ?? { errors: void 0, message: void 0, success: false }
   );
-  const formRef = React18.useRef(null);
-  const [clientErrors, setClientErrors] = React18.useState({});
-  const lastSubmittedFormData = React18.useRef(null);
-  React18.useEffect(() => {
+  const formRef = React19.useRef(null);
+  const [clientErrors, setClientErrors] = React19.useState({});
+  const lastSubmittedFormData = React19.useRef(null);
+  React19.useEffect(() => {
     if (state && (state.errors || state.message && !state.success)) {
       onError?.({
         errors: state.errors,
@@ -1300,7 +1381,7 @@ function ServerActionForm({
       });
     }
   }, [state, onError]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (state?.success && lastSubmittedFormData.current) {
       onSuccess?.(lastSubmittedFormData.current);
     }
@@ -1343,12 +1424,12 @@ function ServerActionForm({
   };
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React18.createElement(
+      return /* @__PURE__ */ React19.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__ */ React19.createElement(
           ServerActionField,
           {
             key: field2.name,
@@ -1361,7 +1442,7 @@ function ServerActionForm({
       );
     }
     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__ */ React19.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React19.createElement(
         ServerActionField,
         {
           key: field2.name,
@@ -1372,7 +1453,7 @@ function ServerActionForm({
         }
       )));
     }
-    return /* @__PURE__ */ React18.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React18.createElement(
+    return /* @__PURE__ */ React19.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React19.createElement(
       ServerActionField,
       {
         key: field2.name,
@@ -1383,7 +1464,7 @@ function ServerActionForm({
       }
     )));
   };
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "form",
     {
       ref: formRef,
@@ -1391,27 +1472,27 @@ function ServerActionForm({
       role: "form",
       onSubmit: handleSubmit
     },
-    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)),
-    state?.success && !pending && /* @__PURE__ */ React18.createElement(
+    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(
       "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!"),
-      state.message && /* @__PURE__ */ React18.createElement("p", { className: "text-success-700 text-sm mt-1" }, state.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)
     ),
-    state?.message && !state.success && /* @__PURE__ */ React18.createElement(
+    state?.message && !state.success && /* @__PURE__ */ React19.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" }, state.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)
     ),
     renderFields(),
-    /* @__PURE__ */ React18.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React19.createElement(
       Button,
       {
         color: "primary",
@@ -1421,7 +1502,7 @@ function ServerActionForm({
         ...submitButtonProps
       },
       submitButtonText
-    ), showResetButton && /* @__PURE__ */ React18.createElement(
+    ), showResetButton && /* @__PURE__ */ React19.createElement(
       Button,
       {
         isDisabled: pending,
@@ -1442,13 +1523,13 @@ function ServerActionField({
   if (field2.type === "content") {
     const contentField2 = field2;
     if (contentField2.render) {
-      return /* @__PURE__ */ React18.createElement("div", { className: contentField2.className }, contentField2.render({
+      return /* @__PURE__ */ React19.createElement("div", { className: contentField2.className }, contentField2.render({
         errors: {},
         form: null,
         isSubmitting: false
       }));
     }
-    return /* @__PURE__ */ React18.createElement("div", { className: contentField2.className }, contentField2.title && /* @__PURE__ */ React18.createElement("h3", { className: "text-lg font-semibold text-foreground mb-2" }, contentField2.title), contentField2.description && /* @__PURE__ */ React18.createElement("p", { className: "text-sm text-muted-foreground" }, contentField2.description));
+    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));
   }
   const fieldName = field2.name;
   const fieldErrors = errors?.[fieldName];
@@ -1476,9 +1557,9 @@ function ServerActionField({
     }
     return false;
   };
-  const [value, setValue] = React18.useState(getDefaultValue);
-  const [checked, setChecked] = React18.useState(getDefaultChecked);
-  React18.useEffect(() => {
+  const [value, setValue] = React19.useState(getDefaultValue);
+  const [checked, setChecked] = React19.useState(getDefaultChecked);
+  React19.useEffect(() => {
     const newDefaultValue = defaultValues?.[fieldName];
     if (newDefaultValue !== void 0 && newDefaultValue !== null) {
       if (field2.type === "checkbox") {
@@ -1492,7 +1573,7 @@ function ServerActionField({
       }
     }
   }, [defaultValues, fieldName, field2.type]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     const hiddenInput = document.querySelector(
       `input[type="hidden"][name="${fieldName}"]`
     );
@@ -1507,7 +1588,7 @@ function ServerActionField({
   switch (field2.type) {
     case "input": {
       const inputType = field2.inputProps?.type || "text";
-      return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React18.createElement(
+      return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React19.createElement(
         Input,
         {
           ...field2.inputProps,
@@ -1524,7 +1605,7 @@ function ServerActionField({
       ));
     }
     case "textarea": {
-      return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React18.createElement(
+      return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React19.createElement(
         Textarea,
         {
           ...field2.textareaProps,
@@ -1540,7 +1621,7 @@ function ServerActionField({
       ));
     }
     case "checkbox": {
-      return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("input", { type: "hidden", name: fieldName, value: checked ? "on" : "" }), /* @__PURE__ */ React18.createElement(
+      return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("input", { type: "hidden", name: fieldName, value: checked ? "on" : "" }), /* @__PURE__ */ React19.createElement(
         Checkbox,
         {
           ...field2.checkboxProps,
@@ -1556,7 +1637,7 @@ function ServerActionField({
     }
     case "select": {
       const options = field2.options || [];
-      return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React18.createElement(
+      return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React19.createElement(
         Select,
         {
           ...field2.selectProps,
@@ -1573,12 +1654,12 @@ function ServerActionField({
           }
         },
         options.map(
-          (option) => /* @__PURE__ */ React18.createElement(SelectItem, { key: String(option.value) }, option.label)
+          (option) => /* @__PURE__ */ React19.createElement(SelectItem, { key: String(option.value) }, option.label)
         )
       ));
     }
     default:
-      return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React18.createElement(
+      return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React19.createElement(
         Input,
         {
           "data-field-name": fieldName,
@@ -1608,10 +1689,10 @@ function useHeroForm() {
 }
 
 // src/providers/FormProvider.tsx
-import React19 from "react";
+import React20 from "react";
 import { FormProvider as RHFProvider } from "react-hook-form";
 function FormProvider(props) {
-  return /* @__PURE__ */ React19.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React20.createElement(
     "form",
     {
       className: props.className,
@@ -1624,7 +1705,7 @@ function FormProvider(props) {
 }
 
 // src/submit/SubmitButton.tsx
-import React20 from "react";
+import React21 from "react";
 function SubmitButton(props) {
   const ctx = useFormContext5();
   const loading = props.isLoading ?? ctx.formState.isSubmitting;
@@ -1634,10 +1715,10 @@ function SubmitButton(props) {
   const defaults = useHeroHookFormDefaults();
   const getButtonContent = () => {
     if (enhancedState?.isSuccess) {
-      return /* @__PURE__ */ React20.createElement("span", { className: "inline-flex items-center gap-2" }, "\u2705", props.successText || "Success!");
+      return /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-2" }, "\u2705", props.successText || "Success!");
     }
     if (loading) {
-      return /* @__PURE__ */ React20.createElement("span", { className: "inline-flex items-center gap-2" }, "\u23F3", props.loadingText || "Submitting...");
+      return /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-2" }, "\u23F3", props.loadingText || "Submitting...");
     }
     return props.children;
   };
@@ -1650,7 +1731,7 @@ function SubmitButton(props) {
     }
     return props.buttonProps?.color || defaults.submitButton.color;
   };
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(
     Button,
     {
       type: "submit",
@@ -1891,7 +1972,7 @@ var commonValidations = {
 import { useFormContext as useFormContext5 } from "react-hook-form";
 
 // src/components/ZodForm.tsx
-import React22 from "react";
+import React23 from "react";
 import { Button as Button5 } from "@heroui/react";
 import {
   FormProvider as FormProvider2
@@ -2014,7 +2095,7 @@ function useEnhancedFormState(form, options = {}) {
 }
 
 // src/components/FormStatus.tsx
-import React21 from "react";
+import React22 from "react";
 import { Button as Button4 } from "@heroui/react";
 function FormStatus({
   className = "",
@@ -2027,25 +2108,25 @@ function FormStatus({
     return null;
   }
   if (isSubmitting) {
-    return /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React22.createElement(
       "div",
       {
         className: `flex items-center gap-3 p-4 bg-blue-50 border border-blue-200 rounded-lg ${className}`
       },
-      /* @__PURE__ */ React21.createElement("span", { className: "text-blue-600" }, "\u23F3"),
-      /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "text-sm font-medium text-blue-900" }, "Submitting form..."), showDetails && /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-blue-700" }, "Please wait while we process your request."))
+      /* @__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."))
     );
   }
   if (isSuccess) {
-    return /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React22.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__ */ React21.createElement("span", { className: "text-green-600" }, "\u2705"),
-      /* @__PURE__ */ React21.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21.createElement("p", { className: "text-sm font-medium text-green-900" }, "Form submitted successfully!"), showDetails && submittedData && /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-green-700" }, "Your data has been saved. Thank you for your submission.")),
-      onDismiss && /* @__PURE__ */ React21.createElement(
+      /* @__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(
         Button4,
         {
           size: "sm",
@@ -2059,15 +2140,15 @@ function FormStatus({
     );
   }
   if (isError && error) {
-    return /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React22.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__ */ React21.createElement("span", { className: "text-red-600" }, "\u26A0\uFE0F"),
-      /* @__PURE__ */ React21.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21.createElement("p", { className: "text-sm font-medium text-red-900" }, "Error submitting form"), /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-red-700" }, error)),
-      onDismiss && /* @__PURE__ */ React21.createElement(
+      /* @__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(
         Button4,
         {
           size: "sm",
@@ -2088,8 +2169,8 @@ function FormToast({
   position = "top-right",
   state
 }) {
-  const [isVisible, setIsVisible] = React21.useState(false);
-  React21.useEffect(() => {
+  const [isVisible, setIsVisible] = React22.useState(false);
+  React22.useEffect(() => {
     if (state.isSuccess || state.isError) {
       setIsVisible(true);
       if (duration > 0) {
@@ -2110,7 +2191,7 @@ function FormToast({
     "top-left": "top-4 left-4",
     "top-right": "top-4 right-4"
   };
-  return /* @__PURE__ */ React21.createElement("div", { className: `fixed z-50 ${positionClasses[position]}` }, /* @__PURE__ */ React21.createElement(FormStatus, { state, onDismiss }));
+  return /* @__PURE__ */ React22.createElement("div", { className: `fixed z-50 ${positionClasses[position]}` }, /* @__PURE__ */ React22.createElement(FormStatus, { state, onDismiss }));
 }
 
 // src/components/ZodForm.tsx
@@ -2122,7 +2203,6 @@ function ZodForm({
   onError,
   onSubmit,
   onSuccess,
-  render,
   resetButtonText = "Reset",
   showResetButton = false,
   spacing = "4",
@@ -2161,12 +2241,12 @@ function ZodForm({
   };
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React22.createElement(
+      return /* @__PURE__ */ React23.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__ */ React22.createElement(
+        config.fields.map((field2) => /* @__PURE__ */ React23.createElement(
           FormField,
           {
             key: field2.name,
@@ -2183,7 +2263,7 @@ function ZodForm({
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React22.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field2) => /* @__PURE__ */ React22.createElement(
+      return /* @__PURE__ */ React23.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field2) => /* @__PURE__ */ React23.createElement(
         FormField,
         {
           key: field2.name,
@@ -2198,7 +2278,7 @@ function ZodForm({
         }
       )));
     }
-    return /* @__PURE__ */ React22.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field2) => /* @__PURE__ */ React22.createElement(
+    return /* @__PURE__ */ React23.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field2) => /* @__PURE__ */ React23.createElement(
       FormField,
       {
         key: field2.name,
@@ -2217,29 +2297,19 @@ function ZodForm({
     e.preventDefault();
     void handleSubmit();
   };
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (config.onError && Object.keys(form.formState.errors).length > 0) {
       config.onError(form.formState.errors);
     }
   }, [form.formState.errors, config.onError]);
-  if (render) {
-    return /* @__PURE__ */ React22.createElement(FormProvider2, { ...form }, render({
-      errors: form.formState.errors,
-      form,
-      isSubmitted: enhancedState.status !== "idle",
-      isSubmitting: enhancedState.isSubmitting,
-      isSuccess: enhancedState.isSuccess,
-      values: form.getValues()
-    }));
-  }
-  return /* @__PURE__ */ React22.createElement(FormProvider2, { ...form }, /* @__PURE__ */ React22.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React22.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React22.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React22.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), /* @__PURE__ */ React22.createElement(
+  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(
     FormStatus,
     {
       state: enhancedState,
       onDismiss: () => enhancedState.reset(),
       showDetails: true
     }
-  ), renderFields(), /* @__PURE__ */ React22.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React22.createElement(
+  ), renderFields(), /* @__PURE__ */ React23.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React23.createElement(
     Button5,
     {
       color: "primary",
@@ -2249,7 +2319,7 @@ function ZodForm({
       ...submitButtonProps
     },
     enhancedState.isSuccess ? "Success!" : submitButtonText
-  ), showResetButton && /* @__PURE__ */ React22.createElement(
+  ), showResetButton && /* @__PURE__ */ React23.createElement(
     Button5,
     {
       isDisabled: enhancedState.isSubmitting,
@@ -2330,8 +2400,9 @@ var BasicFormBuilder = class {
   /**
    * Add a switch field
    */
-  switch(name, label) {
+  switch(name, label, description) {
     this.fields.push({
+      description,
       label,
       name,
       type: "switch"
@@ -2349,6 +2420,16 @@ function createBasicFormBuilder() {
   return new BasicFormBuilder();
 }
 var FormFieldHelpers = {
+  /**
+   * Create an autocomplete field
+   */
+  autocomplete: (name, label, items, placeholder) => ({
+    autocompleteProps: placeholder ? { placeholder } : void 0,
+    label,
+    name,
+    options: items,
+    type: "autocomplete"
+  }),
   /**
    * Create a checkbox field
    */
@@ -2357,6 +2438,24 @@ var FormFieldHelpers = {
     name,
     type: "checkbox"
   }),
+  /**
+   * Create a conditional field that shows/hides based on form data
+   *
+   * @example
+   * ```tsx
+   * FormFieldHelpers.conditional(
+   *   "phone",
+   *   (values) => values.hasPhone === true,
+   *   FormFieldHelpers.input("phone", "Phone Number", "tel")
+   * )
+   * ```
+   */
+  conditional: (name, condition, field2) => ({
+    condition,
+    field: field2,
+    name,
+    type: "conditional"
+  }),
   /**
    * Create a content field for headers, questions, or custom content between fields
    *
@@ -2371,14 +2470,16 @@ var FormFieldHelpers = {
    * })
    * ```
    */
-  content: (title, description, options) => ({
-    className: options?.className,
-    description: description || void 0,
-    name: options?.name,
-    render: options?.render,
-    title: title || void 0,
-    type: "content"
-  }),
+  content: (title, description, options) => {
+    return {
+      className: options?.className,
+      description: description || void 0,
+      name: options?.name,
+      render: options?.render,
+      title: title || void 0,
+      type: "content"
+    };
+  },
   /**
    * Create a date field
    */
@@ -2409,7 +2510,8 @@ var FormFieldHelpers = {
   /**
    * Create a switch field
    */
-  switch: (name, label) => ({
+  switch: (name, label, description) => ({
+    description,
     label,
     name,
     type: "switch"
@@ -2527,13 +2629,14 @@ function checkboxField(name, label, props) {
 }
 function switchField(name, label, props) {
   return {
+    description: props?.description,
+    isDisabled: props?.isDisabled,
     label,
     name,
     type: "switch",
-    ...props && {
+    ...props?.className && {
       switchProps: {
-        className: props.className,
-        disabled: props.isDisabled
+        className: props.className
       }
     }
   };
@@ -3544,6 +3647,7 @@ var validationUtils = {
 };
 export {
   AdvancedFieldBuilder,
+  AutocompleteField,
   BasicFormBuilder,
   CheckboxField,
   CommonFields,