@rachelallyson/hero-hook-form 2.3.0 → 2.4.0

package/dist/react/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,104 @@ 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/react.ts
+import {
+  Autocomplete,
+  AutocompleteItem,
+  Button,
+  Checkbox,
+  DateInput,
+  DatePicker,
+  Input,
+  Radio,
+  RadioGroup,
+  Select,
+  SelectItem,
+  Slider,
+  Spinner,
+  Switch,
+  Textarea
+} from "@heroui/react";
+
+// 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,23 +253,6 @@ function useHeroHookFormDefaults() {
   };
 }
 
-// src/ui/react.ts
-import {
-  Button,
-  Checkbox,
-  DateInput,
-  DatePicker,
-  Input,
-  Radio,
-  RadioGroup,
-  Select,
-  SelectItem,
-  Slider,
-  Spinner,
-  Switch,
-  Textarea
-} from "@heroui/react";
-
 // src/fields/CheckboxField.tsx
 function CheckboxField(props) {
   const {
@@ -198,12 +266,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,
@@ -215,14 +283,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,
@@ -236,7 +304,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,
@@ -252,29 +320,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,
@@ -302,12 +370,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,
@@ -327,7 +395,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,
@@ -341,7 +409,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}`,
@@ -358,7 +426,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({
@@ -406,13 +474,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",
@@ -424,7 +492,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}`,
@@ -441,7 +509,7 @@ function FieldArrayField({
         }
       }
     )))
-  )), canAdd && /* @__PURE__ */ React7.createElement(
+  )), canAdd && /* @__PURE__ */ React8.createElement(
     Button2,
     {
       variant: "bordered",
@@ -450,7 +518,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",
@@ -463,8 +531,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,
@@ -477,7 +545,7 @@ function CoercedFileInput(props) {
     multiple
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     Input,
     {
       ...defaults.input,
@@ -513,12 +581,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,
@@ -540,8 +608,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;
@@ -557,12 +625,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,
@@ -620,17 +688,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,
@@ -649,12 +717,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,
@@ -670,7 +738,7 @@ function CoercedInput(props) {
     }
   );
 }
-var InputField = React10.memo(
+var InputField = React11.memo(
   (props) => {
     const {
       className,
@@ -683,12 +751,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,
@@ -718,8 +786,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,
@@ -733,12 +801,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,
@@ -751,7 +819,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),
@@ -760,15 +828,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,
@@ -783,14 +851,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,
@@ -808,7 +876,7 @@ function SelectField(props) {
               field2.onChange(next);
             }
           },
-          options.map((opt) => /* @__PURE__ */ React12.createElement(
+          options.map((opt) => /* @__PURE__ */ React13.createElement(
             SelectItem,
             {
               key: String(opt.value),
@@ -825,12 +893,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,
@@ -858,12 +926,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,
@@ -883,8 +951,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,
@@ -897,12 +965,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,
@@ -913,15 +981,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,
@@ -934,12 +1002,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,
@@ -960,7 +1028,7 @@ function TextareaField(props) {
 }
 
 // src/components/FormField.tsx
-var FormField = React16.memo(
+var FormField = React17.memo(
   ({
     config,
     form,
@@ -972,7 +1040,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,
@@ -1002,7 +1070,7 @@ var FormField = React16.memo(
     };
     switch (config.type) {
       case "input":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           InputField,
           {
             ...baseProps,
@@ -1012,7 +1080,7 @@ var FormField = React16.memo(
           }
         );
       case "textarea":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           TextareaField,
           {
             ...baseProps,
@@ -1022,7 +1090,7 @@ var FormField = React16.memo(
           }
         );
       case "select":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           SelectField,
           {
             ...baseProps,
@@ -1035,8 +1103,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,
@@ -1046,7 +1128,7 @@ var FormField = React16.memo(
           }
         );
       case "radio":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           RadioGroupField,
           {
             ...baseProps,
@@ -1060,7 +1142,7 @@ var FormField = React16.memo(
           }
         );
       case "switch":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           SwitchField,
           {
             ...baseProps,
@@ -1070,7 +1152,7 @@ var FormField = React16.memo(
           }
         );
       case "slider":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           SliderField,
           {
             ...baseProps,
@@ -1080,7 +1162,7 @@ var FormField = React16.memo(
           }
         );
       case "date":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           DateField,
           {
             ...baseProps,
@@ -1090,7 +1172,7 @@ var FormField = React16.memo(
           }
         );
       case "file":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           FileField,
           {
             ...baseProps,
@@ -1102,7 +1184,7 @@ var FormField = React16.memo(
           }
         );
       case "fontPicker":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           FontPickerField,
           {
             ...baseProps,
@@ -1120,7 +1202,7 @@ var FormField = React16.memo(
           name: config.name
         });
       case "conditional":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           ConditionalField,
           {
             config,
@@ -1129,7 +1211,7 @@ var FormField = React16.memo(
           }
         );
       case "fieldArray":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           FieldArrayField,
           {
             config,
@@ -1137,7 +1219,7 @@ var FormField = React16.memo(
           }
         );
       case "dynamicSection":
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React17.createElement(
           DynamicSectionField,
           {
             config,
@@ -1189,12 +1271,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,
@@ -1206,7 +1288,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,
@@ -1216,7 +1298,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,
@@ -1230,23 +1312,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",
@@ -1256,7 +1338,7 @@ function ConfigurableForm({
       ...submitButtonProps
     },
     submitButtonText
-  ), showResetButton && /* @__PURE__ */ React17.createElement(
+  ), showResetButton && /* @__PURE__ */ React18.createElement(
     Button3,
     {
       isDisabled: isSubmitting,
@@ -1269,7 +1351,7 @@ function ConfigurableForm({
 }
 
 // src/components/ServerActionForm.tsx
-import React18 from "react";
+import React19 from "react";
 import { useActionState } from "react";
 function ServerActionForm({
   action,
@@ -1294,10 +1376,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,
@@ -1305,7 +1387,7 @@ function ServerActionForm({
       });
     }
   }, [state, onError]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (state?.success && lastSubmittedFormData.current) {
       onSuccess?.(lastSubmittedFormData.current);
     }
@@ -1348,12 +1430,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,
@@ -1366,7 +1448,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,
@@ -1377,7 +1459,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,
@@ -1388,7 +1470,7 @@ function ServerActionForm({
       }
     )));
   };
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "form",
     {
       ref: formRef,
@@ -1396,27 +1478,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",
@@ -1426,7 +1508,7 @@ function ServerActionForm({
         ...submitButtonProps
       },
       submitButtonText
-    ), showResetButton && /* @__PURE__ */ React18.createElement(
+    ), showResetButton && /* @__PURE__ */ React19.createElement(
       Button,
       {
         isDisabled: pending,
@@ -1447,13 +1529,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];
@@ -1481,9 +1563,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") {
@@ -1497,7 +1579,7 @@ function ServerActionField({
       }
     }
   }, [defaultValues, fieldName, field2.type]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     const hiddenInput = document.querySelector(
       `input[type="hidden"][name="${fieldName}"]`
     );
@@ -1512,7 +1594,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,
@@ -1529,7 +1611,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,
@@ -1545,7 +1627,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,
@@ -1561,7 +1643,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,
@@ -1578,12 +1660,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,
@@ -1613,10 +1695,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,
@@ -1629,7 +1711,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;
@@ -1639,10 +1721,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;
   };
@@ -1655,7 +1737,7 @@ function SubmitButton(props) {
     }
     return props.buttonProps?.color || defaults.submitButton.color;
   };
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(
     Button,
     {
       type: "submit",
@@ -1896,7 +1978,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
@@ -2019,7 +2101,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 = "",
@@ -2032,25 +2114,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",
@@ -2064,15 +2146,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",
@@ -2093,8 +2175,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) {
@@ -2115,7 +2197,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
@@ -2165,12 +2247,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,
@@ -2187,7 +2269,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,
@@ -2202,7 +2284,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,
@@ -2221,19 +2303,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]);
-  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",
@@ -2243,7 +2325,7 @@ function ZodForm({
       ...submitButtonProps
     },
     enhancedState.isSuccess ? "Success!" : submitButtonText
-  ), showResetButton && /* @__PURE__ */ React22.createElement(
+  ), showResetButton && /* @__PURE__ */ React23.createElement(
     Button5,
     {
       isDisabled: enhancedState.isSubmitting,
@@ -2324,8 +2406,9 @@ var BasicFormBuilder = class {
   /**
    * Add a switch field
    */
-  switch(name, label) {
+  switch(name, label, description) {
     this.fields.push({
+      description,
       label,
       name,
       type: "switch"
@@ -2343,6 +2426,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
    */
@@ -2351,6 +2444,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
    *
@@ -2405,7 +2516,8 @@ var FormFieldHelpers = {
   /**
    * Create a switch field
    */
-  switch: (name, label) => ({
+  switch: (name, label, description) => ({
+    description,
     label,
     name,
     type: "switch"
@@ -2523,13 +2635,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
       }
     }
   };
@@ -3540,6 +3653,7 @@ var validationUtils = {
 };
 export {
   AdvancedFieldBuilder,
+  AutocompleteField,
   BasicFormBuilder,
   CheckboxField,
   CommonFields,