@rachelallyson/hero-hook-form 2.2.1 → 2.4.0

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import * as zod from 'zod';
 import { z } from 'zod';
 import * as _internationalized_date from '@internationalized/date';
 import { CalendarDate } from '@internationalized/date';
+import { Autocomplete } from '@heroui/autocomplete';
 import { Checkbox } from '@heroui/checkbox';
 import { Input, Textarea } from '@heroui/input';
 import { RadioGroup } from '@heroui/radio';
@@ -46,11 +47,12 @@ interface BaseFormFieldConfig<TFieldValues extends FieldValues> {
     ariaDescribedBy?: string;
 }
 interface StringFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
-    type: "input" | "textarea" | "select";
+    type: "input" | "textarea" | "select" | "autocomplete";
     defaultValue?: string;
     inputProps?: Omit<ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
     textareaProps?: Omit<ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
     selectProps?: Omit<ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
+    autocompleteProps?: Omit<ComponentProps<typeof Autocomplete>, "selectedKey" | "onSelectionChange" | "inputValue" | "onInputChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "children" | "items">;
     options?: {
         label: string;
         value: string | number;
@@ -123,9 +125,9 @@ interface DynamicSectionConfig<TFieldValues extends FieldValues> extends BaseFor
     condition: (formData: Partial<TFieldValues>) => boolean;
     fields: ZodFormFieldConfig<TFieldValues>[];
 }
-interface ContentFieldConfig<TFieldValues extends FieldValues> {
+interface ContentFieldConfig<TFieldValues extends FieldValues = FieldValues> {
     type: "content";
-    name?: Path<TFieldValues>;
+    name?: string;
     title?: string;
     description?: string;
     render?: (field: {
@@ -155,14 +157,6 @@ interface ZodFormConfig<TFieldValues extends FieldValues> extends UseFormProps<T
     fields: ZodFormFieldConfig<TFieldValues>[];
     onError?: (errors: FieldErrors<TFieldValues>) => void;
     errorDisplay?: "inline" | "toast" | "modal" | "none";
-    render?: (formState: {
-        form: UseFormReturn<TFieldValues>;
-        isSubmitting: boolean;
-        isSubmitted: boolean;
-        isSuccess: boolean;
-        errors: FieldErrors<TFieldValues>;
-        values: TFieldValues;
-    }) => React.ReactNode;
 }
 interface FormValidationError {
     message: string;
@@ -436,23 +430,383 @@ interface ServerActionFormProps<T extends FieldValues> {
  */
 declare function ServerActionForm<T extends FieldValues>({ action, className, clientValidationSchema, columns, defaultValues, fields, initialState, layout, onError, onSuccess, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ServerActionFormProps<T>): React$1.JSX.Element;
 
+/**
+ * Configuration for an autocomplete option.
+ *
+ * @template TValue - The value type for the option
+ */
+interface AutocompleteOption<TValue extends string | number> {
+    /** Display label for the option */
+    label: string;
+    /** Value of the option */
+    value: TValue;
+    /** Optional description text */
+    description?: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+/**
+ * Props for the AutocompleteField component.
+ *
+ * @template TFieldValues - The form data type
+ * @template TValue - The value type for the autocomplete field (string or number)
+ *
+ * @example
+ * ```tsx
+ * import { AutocompleteField } from "@rachelallyson/hero-hook-form";
+ * import { useForm } from "react-hook-form";
+ *
+ * const form = useForm({
+ *   defaultValues: { country: "" },
+ * });
+ *
+ * const options = [
+ *   { label: "United States", value: "us" },
+ *   { label: "Canada", value: "ca" },
+ *   { label: "Mexico", value: "mx" },
+ * ];
+ *
+ * <AutocompleteField
+ *   control={form.control}
+ *   name="country"
+ *   label="Country"
+ *   items={options}
+ *   placeholder="Search for a country"
+ * />
+ * ```
+ */
+type AutocompleteFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
+    /** Array of autocomplete options (for static lists) */
+    items?: readonly AutocompleteOption<TValue>[];
+    /** Placeholder text when no option is selected */
+    placeholder?: string;
+    /** Additional props to pass to the underlying Autocomplete component */
+    autocompleteProps?: Omit<React$1.ComponentProps<typeof Autocomplete>, "selectedKey" | "onSelectionChange" | "inputValue" | "onInputChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "children" | "items" | "defaultItems">;
+    /** Custom render function for items (for async loading) */
+    children?: (item: AutocompleteOption<TValue>) => React$1.JSX.Element;
+};
+/**
+ * An autocomplete field component that integrates React Hook Form with HeroUI Autocomplete.
+ *
+ * This component provides a type-safe autocomplete field with validation support,
+ * error handling, and accessibility features. It supports both static option lists
+ * and async loading via the items prop or children render function.
+ *
+ * @template TFieldValues - The form data type
+ * @template TValue - The value type for the autocomplete field (string or number)
+ *
+ * @param props - The autocomplete field props
+ * @returns The rendered autocomplete field component
+ *
+ * @example
+ * ```tsx
+ * import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+ * import { z } from "zod";
+ *
+ * const schema = z.object({
+ *   country: z.string().min(1, "Please select a country"),
+ * });
+ *
+ * const options = [
+ *   { label: "United States", value: "us" },
+ *   { label: "Canada", value: "ca" },
+ * ];
+ *
+ * function MyForm() {
+ *   return (
+ *     <ZodForm
+ *       config={{
+ *         schema,
+ *         fields: [
+ *           FormFieldHelpers.autocomplete("country", "Country", options, "Search for a country"),
+ *         ],
+ *       }}
+ *       onSubmit={(data) => console.log(data)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With async loading
+ * <AutocompleteField
+ *   control={form.control}
+ *   name="country"
+ *   label="Country"
+ *   placeholder="Search for a country"
+ *   autocompleteProps={{
+ *     allowsCustomValue: true,
+ *     onInputChange={(value) => {
+ *       // Load options asynchronously based on input
+ *       loadOptions(value);
+ *     }},
+ *   }}
+ * >
+ *   {(item) => (
+ *     <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>
+ *   )}
+ * </AutocompleteField>
+ * ```
+ */
+declare function AutocompleteField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: AutocompleteFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
+
+/**
+ * Props for the CheckboxField component.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @example
+ * ```tsx
+ * import { CheckboxField } from "@rachelallyson/hero-hook-form";
+ * import { useForm } from "react-hook-form";
+ *
+ * const form = useForm({
+ *   defaultValues: { newsletter: false },
+ * });
+ *
+ * <CheckboxField
+ *   control={form.control}
+ *   name="newsletter"
+ *   label="Subscribe to newsletter"
+ *   description="Receive weekly updates"
+ * />
+ * ```
+ */
 type CheckboxFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, boolean> & WithControl<TFieldValues> & {
+    /** Additional props to pass to the underlying Checkbox component */
     checkboxProps?: Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
 };
+/**
+ * A checkbox field component that integrates React Hook Form with HeroUI Checkbox.
+ *
+ * This component provides a type-safe checkbox field with validation support,
+ * error handling, and accessibility features. The field value is a boolean.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @param props - The checkbox field props
+ * @returns The rendered checkbox field component
+ *
+ * @example
+ * ```tsx
+ * import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+ * import { z } from "zod";
+ *
+ * const schema = z.object({
+ *   terms: z.boolean().refine((val) => val === true, {
+ *     message: "You must accept the terms",
+ *   }),
+ *   newsletter: z.boolean().optional(),
+ * });
+ *
+ * function MyForm() {
+ *   return (
+ *     <ZodForm
+ *       config={{
+ *         schema,
+ *         fields: [
+ *           FormFieldHelpers.checkbox("terms", "I accept the terms and conditions"),
+ *           FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter"),
+ *         ],
+ *       }}
+ *       onSubmit={(data) => console.log(data)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom styling
+ * <CheckboxField
+ *   control={form.control}
+ *   name="newsletter"
+ *   label="Subscribe"
+ *   checkboxProps={{
+ *     color: "primary",
+ *     size: "lg",
+ *   }}
+ * />
+ * ```
+ */
 declare function CheckboxField<TFieldValues extends FieldValues>(props: CheckboxFieldProps<TFieldValues>): React$1.JSX.Element;
 
+/**
+ * Props for the DateField component.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @example
+ * ```tsx
+ * import { DateField } from "@rachelallyson/hero-hook-form";
+ * import { useForm } from "react-hook-form";
+ * import { CalendarDate } from "@internationalized/date";
+ *
+ * const form = useForm({
+ *   defaultValues: { birthDate: null as CalendarDate | null },
+ * });
+ *
+ * <DateField
+ *   control={form.control}
+ *   name="birthDate"
+ *   label="Birth Date"
+ *   description="Select your date of birth"
+ * />
+ * ```
+ */
 type DateFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, CalendarDate | null> & WithControl<TFieldValues> & {
+    /** Additional props to pass to the underlying DateInput component */
     dateProps?: Omit<React$1.ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
+    /** Transform function to modify the date value before it's set */
     transform?: (value: CalendarDate | null) => CalendarDate | null;
 };
+/**
+ * A date input field component that integrates React Hook Form with HeroUI DateInput.
+ *
+ * This component provides a type-safe date field with validation support,
+ * error handling, and accessibility features. Uses `@internationalized/date`
+ * for date handling.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @param props - The date field props
+ * @returns The rendered date field component
+ *
+ * @example
+ * ```tsx
+ * import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+ * import { z } from "zod";
+ * import { CalendarDate } from "@internationalized/date";
+ *
+ * const schema = z.object({
+ *   birthDate: z.instanceof(CalendarDate).nullable(),
+ *   eventDate: z.instanceof(CalendarDate),
+ * });
+ *
+ * function MyForm() {
+ *   return (
+ *     <ZodForm
+ *       config={{
+ *         schema,
+ *         fields: [
+ *           FormFieldHelpers.date("birthDate", "Birth Date"),
+ *           FormFieldHelpers.date("eventDate", "Event Date"),
+ *         ],
+ *       }}
+ *       onSubmit={(data) => console.log(data)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom date format and min/max dates
+ * <DateField
+ *   control={form.control}
+ *   name="eventDate"
+ *   label="Event Date"
+ *   dateProps={{
+ *     minValue: new CalendarDate(2024, 1, 1),
+ *     maxValue: new CalendarDate(2024, 12, 31),
+ *   }}
+ * />
+ * ```
+ */
 declare function DateField<TFieldValues extends FieldValues>(props: DateFieldProps<TFieldValues>): React$1.JSX.Element;
 
+/**
+ * Props for the FileField component.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @example
+ * ```tsx
+ * import { FileField } from "@rachelallyson/hero-hook-form";
+ * import { useForm } from "react-hook-form";
+ *
+ * const form = useForm({
+ *   defaultValues: { avatar: null as FileList | null },
+ * });
+ *
+ * <FileField
+ *   control={form.control}
+ *   name="avatar"
+ *   label="Upload Avatar"
+ *   accept="image/*"
+ *   description="Select an image file"
+ * />
+ * ```
+ */
 type FileFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, FileList | null> & WithControl<TFieldValues> & {
+    /** Additional props to pass to the underlying Input component */
     fileProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
+    /** Transform function to modify the file list before it's set */
     transform?: (value: FileList | null) => FileList | null;
+    /** Whether multiple files can be selected */
     multiple?: boolean;
+    /** Accepted file types (e.g., "image/*", ".pdf,.doc") */
     accept?: string;
 };
+/**
+ * A file input field component that integrates React Hook Form with HeroUI Input.
+ *
+ * This component provides a type-safe file upload field with validation support,
+ * error handling, and accessibility features. The field value is a `FileList` or `null`.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @param props - The file field props
+ * @returns The rendered file field component
+ *
+ * @example
+ * ```tsx
+ * import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+ * import { z } from "zod";
+ *
+ * const schema = z.object({
+ *   avatar: z.instanceof(FileList).nullable(),
+ *   documents: z.instanceof(FileList).optional(),
+ * });
+ *
+ * function MyForm() {
+ *   return (
+ *     <ZodForm
+ *       config={{
+ *         schema,
+ *         fields: [
+ *           FormFieldHelpers.file("avatar", "Upload Avatar", { accept: "image/*" }),
+ *           FormFieldHelpers.file("documents", "Upload Documents", {
+ *             multiple: true,
+ *             accept: ".pdf,.doc,.docx",
+ *           }),
+ *         ],
+ *       }}
+ *       onSubmit={(data) => console.log(data)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With file size validation
+ * <FileField
+ *   control={form.control}
+ *   name="avatar"
+ *   label="Upload Avatar"
+ *   accept="image/*"
+ *   transform={(files) => {
+ *     if (files && files[0] && files[0].size > 5 * 1024 * 1024) {
+ *       // File too large
+ *       return null;
+ *     }
+ *     return files;
+ *   }}
+ * />
+ * ```
+ */
 declare function FileField<TFieldValues extends FieldValues>(props: FileFieldProps<TFieldValues>): React$1.JSX.Element;
 
 interface FontPickerProps {
@@ -525,45 +879,473 @@ type InputFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldVa
  */
 declare const InputField: <TFieldValues extends FieldValues>(props: InputFieldProps<TFieldValues>) => React$1.JSX.Element;
 
+/**
+ * Configuration for a radio option.
+ *
+ * @template TValue - The value type for the option
+ */
 interface RadioOption<TValue extends string | number> {
+    /** Display label for the option */
     label: string;
+    /** Value of the option */
     value: TValue;
+    /** Optional description text */
     description?: string;
+    /** Whether the option is disabled */
     disabled?: boolean;
 }
+/**
+ * Props for the RadioGroupField component.
+ *
+ * @template TFieldValues - The form data type
+ * @template TValue - The value type for the radio group (string or number)
+ *
+ * @example
+ * ```tsx
+ * import { RadioGroupField } from "@rachelallyson/hero-hook-form";
+ * import { useForm } from "react-hook-form";
+ *
+ * const form = useForm({
+ *   defaultValues: { plan: "" },
+ * });
+ *
+ * const options = [
+ *   { label: "Basic", value: "basic" },
+ *   { label: "Pro", value: "pro" },
+ *   { label: "Enterprise", value: "enterprise" },
+ * ];
+ *
+ * <RadioGroupField
+ *   control={form.control}
+ *   name="plan"
+ *   label="Select Plan"
+ *   options={options}
+ * />
+ * ```
+ */
 type RadioGroupFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
+    /** Array of radio options */
     options: readonly RadioOption<TValue>[];
+    /** Additional props to pass to the underlying RadioGroup component */
     radioGroupProps?: Omit<React$1.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">;
 };
+/**
+ * A radio group field component that integrates React Hook Form with HeroUI RadioGroup.
+ *
+ * This component provides a type-safe radio group field with validation support,
+ * error handling, and accessibility features. Only one option can be selected at a time.
+ *
+ * @template TFieldValues - The form data type
+ * @template TValue - The value type for the radio group (string or number)
+ *
+ * @param props - The radio group field props
+ * @returns The rendered radio group field component
+ *
+ * @example
+ * ```tsx
+ * import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+ * import { z } from "zod";
+ *
+ * const schema = z.object({
+ *   plan: z.enum(["basic", "pro", "enterprise"], {
+ *     required_error: "Please select a plan",
+ *   }),
+ * });
+ *
+ * const options = [
+ *   { label: "Basic - $9/month", value: "basic" },
+ *   { label: "Pro - $29/month", value: "pro" },
+ *   { label: "Enterprise - $99/month", value: "enterprise" },
+ * ];
+ *
+ * function MyForm() {
+ *   return (
+ *     <ZodForm
+ *       config={{
+ *         schema,
+ *         fields: [
+ *           FormFieldHelpers.radioGroup("plan", "Select Plan", options),
+ *         ],
+ *       }}
+ *       onSubmit={(data) => console.log(data)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom styling
+ * <RadioGroupField
+ *   control={form.control}
+ *   name="plan"
+ *   label="Select Plan"
+ *   options={options}
+ *   radioGroupProps={{
+ *     orientation: "horizontal",
+ *     color: "primary",
+ *   }}
+ * />
+ * ```
+ */
 declare function RadioGroupField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: RadioGroupFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
 
+/**
+ * Configuration for a select option.
+ *
+ * @template TValue - The value type for the option
+ */
 interface SelectOption<TValue extends string | number> {
+    /** Display label for the option */
     label: string;
+    /** Value of the option */
     value: TValue;
+    /** Optional description text */
     description?: string;
+    /** Whether the option is disabled */
     disabled?: boolean;
 }
+/**
+ * Props for the SelectField component.
+ *
+ * @template TFieldValues - The form data type
+ * @template TValue - The value type for the select field (string or number)
+ *
+ * @example
+ * ```tsx
+ * import { SelectField } from "@rachelallyson/hero-hook-form";
+ * import { useForm } from "react-hook-form";
+ *
+ * const form = useForm({
+ *   defaultValues: { country: "" },
+ * });
+ *
+ * const options = [
+ *   { label: "United States", value: "us" },
+ *   { label: "Canada", value: "ca" },
+ *   { label: "Mexico", value: "mx" },
+ * ];
+ *
+ * <SelectField
+ *   control={form.control}
+ *   name="country"
+ *   label="Country"
+ *   options={options}
+ *   placeholder="Select a country"
+ * />
+ * ```
+ */
 type SelectFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
+    /** Array of select options */
     options: readonly SelectOption<TValue>[];
+    /** Placeholder text when no option is selected */
     placeholder?: string;
+    /** Additional props to pass to the underlying Select component */
     selectProps?: Omit<React$1.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
 };
+/**
+ * A select dropdown field component that integrates React Hook Form with HeroUI Select.
+ *
+ * This component provides a type-safe select field with validation support,
+ * error handling, and accessibility features.
+ *
+ * @template TFieldValues - The form data type
+ * @template TValue - The value type for the select field (string or number)
+ *
+ * @param props - The select field props
+ * @returns The rendered select field component
+ *
+ * @example
+ * ```tsx
+ * import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+ * import { z } from "zod";
+ *
+ * const schema = z.object({
+ *   country: z.string().min(1, "Please select a country"),
+ * });
+ *
+ * const options = [
+ *   { label: "United States", value: "us" },
+ *   { label: "Canada", value: "ca" },
+ * ];
+ *
+ * function MyForm() {
+ *   return (
+ *     <ZodForm
+ *       config={{
+ *         schema,
+ *         fields: [
+ *           FormFieldHelpers.select("country", "Country", options, "Select a country"),
+ *         ],
+ *       }}
+ *       onSubmit={(data) => console.log(data)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom styling
+ * <SelectField
+ *   control={form.control}
+ *   name="country"
+ *   label="Country"
+ *   options={options}
+ *   selectProps={{
+ *     variant: "bordered",
+ *     size: "lg",
+ *   }}
+ * />
+ * ```
+ */
 declare function SelectField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: SelectFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
 
+/**
+ * Props for the SliderField component.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @example
+ * ```tsx
+ * import { SliderField } from "@rachelallyson/hero-hook-form";
+ * import { useForm } from "react-hook-form";
+ *
+ * const form = useForm({
+ *   defaultValues: { volume: 50 },
+ * });
+ *
+ * <SliderField
+ *   control={form.control}
+ *   name="volume"
+ *   label="Volume"
+ *   description="Adjust the volume level"
+ * />
+ * ```
+ */
 type SliderFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, number> & WithControl<TFieldValues> & {
+    /** Additional props to pass to the underlying Slider component */
     sliderProps?: Omit<React$1.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
+    /** Transform function to modify the slider value before it's set */
     transform?: (value: number) => number;
 };
+/**
+ * A slider field component that integrates React Hook Form with HeroUI Slider.
+ *
+ * This component provides a type-safe slider field with validation support,
+ * error handling, and accessibility features. The field value is a number.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @param props - The slider field props
+ * @returns The rendered slider field component
+ *
+ * @example
+ * ```tsx
+ * import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+ * import { z } from "zod";
+ *
+ * const schema = z.object({
+ *   volume: z.number().min(0).max(100),
+ *   brightness: z.number().min(0).max(100),
+ * });
+ *
+ * function MyForm() {
+ *   return (
+ *     <ZodForm
+ *       config={{
+ *         schema,
+ *         fields: [
+ *           FormFieldHelpers.slider("volume", "Volume", { min: 0, max: 100 }),
+ *           FormFieldHelpers.slider("brightness", "Brightness", { min: 0, max: 100 }),
+ *         ],
+ *       }}
+ *       onSubmit={(data) => console.log(data)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom step and marks
+ * <SliderField
+ *   control={form.control}
+ *   name="volume"
+ *   label="Volume"
+ *   sliderProps={{
+ *     minValue: 0,
+ *     maxValue: 100,
+ *     step: 10,
+ *     marks: [
+ *       { value: 0, label: "0" },
+ *       { value: 50, label: "50" },
+ *       { value: 100, label: "100" },
+ *     ],
+ *   }}
+ * />
+ * ```
+ */
 declare function SliderField<TFieldValues extends FieldValues>(props: SliderFieldProps<TFieldValues>): React$1.JSX.Element;
 
+/**
+ * Props for the SwitchField component.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @example
+ * ```tsx
+ * import { SwitchField } from "@rachelallyson/hero-hook-form";
+ * import { useForm } from "react-hook-form";
+ *
+ * const form = useForm({
+ *   defaultValues: { notifications: false },
+ * });
+ *
+ * <SwitchField
+ *   control={form.control}
+ *   name="notifications"
+ *   label="Enable notifications"
+ *   description="Receive email notifications"
+ * />
+ * ```
+ */
 type SwitchFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, boolean> & WithControl<TFieldValues> & {
+    /** Additional props to pass to the underlying Switch component */
     switchProps?: Omit<React$1.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">;
 };
+/**
+ * A switch/toggle field component that integrates React Hook Form with HeroUI Switch.
+ *
+ * This component provides a type-safe switch field with validation support,
+ * error handling, and accessibility features. The field value is a boolean.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @param props - The switch field props
+ * @returns The rendered switch field component
+ *
+ * @example
+ * ```tsx
+ * import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+ * import { z } from "zod";
+ *
+ * const schema = z.object({
+ *   notifications: z.boolean(),
+ *   darkMode: z.boolean().default(false),
+ * });
+ *
+ * function MyForm() {
+ *   return (
+ *     <ZodForm
+ *       config={{
+ *         schema,
+ *         fields: [
+ *           FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications"),
+ *           FormFieldHelpers.switch("darkMode", "Dark mode"),
+ *         ],
+ *       }}
+ *       onSubmit={(data) => console.log(data)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom styling
+ * <SwitchField
+ *   control={form.control}
+ *   name="notifications"
+ *   label="Enable notifications"
+ *   switchProps={{
+ *     color: "success",
+ *     size: "lg",
+ *   }}
+ * />
+ * ```
+ */
 declare function SwitchField<TFieldValues extends FieldValues>(props: SwitchFieldProps<TFieldValues>): React$1.JSX.Element;
 
+/**
+ * Props for the TextareaField component.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @example
+ * ```tsx
+ * import { TextareaField } from "@rachelallyson/hero-hook-form";
+ * import { useForm } from "react-hook-form";
+ *
+ * const form = useForm({
+ *   defaultValues: { message: "" },
+ * });
+ *
+ * <TextareaField
+ *   control={form.control}
+ *   name="message"
+ *   label="Message"
+ *   description="Enter your message here"
+ *   placeholder="Type your message..."
+ * />
+ * ```
+ */
 type TextareaFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, string> & WithControl<TFieldValues> & {
+    /** Additional props to pass to the underlying Textarea component */
     textareaProps?: Omit<React$1.ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
 };
+/**
+ * A textarea field component that integrates React Hook Form with HeroUI Textarea.
+ *
+ * This component provides a type-safe textarea field with validation support,
+ * error handling, and accessibility features. Use this for multi-line text input.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @param props - The textarea field props
+ * @returns The rendered textarea field component
+ *
+ * @example
+ * ```tsx
+ * import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+ * import { z } from "zod";
+ *
+ * const schema = z.object({
+ *   message: z.string().min(10, "Message must be at least 10 characters"),
+ *   feedback: z.string().max(500, "Feedback must be less than 500 characters"),
+ * });
+ *
+ * function MyForm() {
+ *   return (
+ *     <ZodForm
+ *       config={{
+ *         schema,
+ *         fields: [
+ *           FormFieldHelpers.textarea("message", "Message", "Enter your message"),
+ *           FormFieldHelpers.textarea("feedback", "Feedback"),
+ *         ],
+ *       }}
+ *       onSubmit={(data) => console.log(data)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom styling and min/max rows
+ * <TextareaField
+ *   control={form.control}
+ *   name="message"
+ *   label="Message"
+ *   textareaProps={{
+ *     minRows: 3,
+ *     maxRows: 10,
+ *     variant: "bordered",
+ *   }}
+ * />
+ * ```
+ */
 declare function TextareaField<TFieldValues extends FieldValues>(props: TextareaFieldProps<TFieldValues>): React$1.JSX.Element;
 
 /**
@@ -1164,14 +1946,6 @@ interface ZodFormProps<T extends FieldValues> {
     submitButtonText?: string;
     subtitle?: string;
     title?: string;
-    render?: (formState: {
-        form: UseFormReturn<T>;
-        isSubmitting: boolean;
-        isSubmitted: boolean;
-        isSuccess: boolean;
-        errors: FieldErrors<T>;
-        values: T;
-    }) => React$1.ReactNode;
 }
 /**
  * ZodForm component for building type-safe forms with Zod validation.
@@ -1197,7 +1971,6 @@ interface ZodFormProps<T extends FieldValues> {
  * @param {string} [props.resetButtonText="Reset"] - Text for the reset button
  * @param {(error: FormValidationError) => void} [props.onError] - Error callback for validation errors
  * @param {(data: T) => void} [props.onSuccess] - Success callback called after successful submission
- * @param {(formState: {...}) => React.ReactNode} [props.render] - Custom render function for advanced use cases
  *
  * @returns {JSX.Element} The rendered form component with validation and error handling
  *
@@ -1247,28 +2020,12 @@ interface ZodFormProps<T extends FieldValues> {
  * />
  * ```
  *
- * @example
- * Custom render function for advanced control:
- * ```tsx
- * <ZodForm
- *   config={{ schema, fields }}
- *   onSubmit={handleSubmit}
- *   render={({ form, isSubmitting, errors, values }) => (
- *     <div>
- *       <button disabled={isSubmitting}>
- *         {isSubmitting ? "Submitting..." : "Submit"}
- *       </button>
- *     </div>
- *   )}
- * />
- * ```
- *
  * @see {@link Form} for the base form component without Zod
  * @see {@link FormFieldHelpers} for field creation helpers
  * @see {@link createBasicFormBuilder} for builder pattern alternative
  * @category Components
  */
-declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, render, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): React$1.JSX.Element;
+declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): React$1.JSX.Element;
 
 /**
  * Hook for using Zod validation with React Hook Form
@@ -1345,7 +2102,7 @@ declare class BasicFormBuilder<T extends FieldValues> {
     /**
      * Add a switch field
      */
-    switch(name: Path<T>, label: string): this;
+    switch(name: Path<T>, label: string, description?: string): this;
     /**
      * Build the final field configuration array
      */
@@ -1409,6 +2166,11 @@ declare function createBasicFormBuilder<T extends FieldValues>(): BasicFormBuild
  *     { label: "CA", value: "ca" },
  *   ]),
  *   FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter"),
+ *   FormFieldHelpers.conditional(
+ *     "phone",
+ *     (values) => values.hasPhone === true,
+ *     FormFieldHelpers.input("phone", "Phone Number", "tel")
+ *   ),
  * ];
  * ```
  *
@@ -1416,10 +2178,30 @@ declare function createBasicFormBuilder<T extends FieldValues>(): BasicFormBuild
  * @category Builders
  */
 declare const FormFieldHelpers: {
+    /**
+     * Create an autocomplete field
+     */
+    autocomplete: <T extends FieldValues>(name: Path<T>, label: string, items: {
+        label: string;
+        value: string | number;
+    }[], placeholder?: string) => ZodFormFieldConfig<T>;
     /**
      * Create a checkbox field
      */
     checkbox: <T extends FieldValues>(name: Path<T>, label: string) => ZodFormFieldConfig<T>;
+    /**
+     * 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: <T extends FieldValues>(name: Path<T>, condition: (formData: Partial<T>) => boolean, field: ZodFormFieldConfig<T>) => ZodFormFieldConfig<T>;
     /**
      * Create a content field for headers, questions, or custom content between fields
      *
@@ -1434,15 +2216,15 @@ declare const FormFieldHelpers: {
      * })
      * ```
      */
-    content: <T extends FieldValues>(title?: string | null, description?: string | null, options?: {
+    content: <T extends FieldValues = FieldValues>(title?: string | null, description?: string | null, options?: {
         render?: (field: {
-            form: any;
-            errors: any;
+            form: UseFormReturn<T>;
+            errors: FieldErrors<T>;
             isSubmitting: boolean;
         }) => React$1.ReactNode;
         className?: string;
-        name?: Path<T>;
-    }) => ContentFieldConfig<T>;
+        name?: string;
+    }) => ZodFormFieldConfig<T>;
     /**
      * Create a date field
      */
@@ -1461,7 +2243,7 @@ declare const FormFieldHelpers: {
     /**
      * Create a switch field
      */
-    switch: <T extends FieldValues>(name: Path<T>, label: string) => ZodFormFieldConfig<T>;
+    switch: <T extends FieldValues>(name: Path<T>, label: string, description?: string) => ZodFormFieldConfig<T>;
     /**
      * Create a textarea field
      */
@@ -2437,4 +3219,4 @@ declare const validationUtils: {
     }>;
 };
 
-export { AdvancedFieldBuilder, type BaseFormFieldConfig, BasicFormBuilder, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, type CommonFieldDefaults, CommonFields, ConditionalField, type ConditionalFieldConfig, type ConditionalFieldProps, type ConditionalValidation, ConfigurableForm, ContentField, type ContentFieldConfig, type CustomFieldConfig, DateField, type DateFieldConfig, type DateFieldProps, type DateInputDefaults, type DynamicSectionConfig, DynamicSectionField, type DynamicSectionFieldProps, type EnhancedFormState, FieldArrayBuilder, type FieldArrayConfig, FieldArrayField, type FieldArrayFieldProps, FieldArrayItemBuilder, type FieldBaseProps, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, FontPickerField, type FontPickerFieldConfig, type FontPickerFieldProps, type FormConfig, FormField, type FormFieldConfig, FormFieldHelpers, type FormProps, FormProvider, FormStatus, type FormStatusProps, type FormStep, type FormSubmissionState, type FormTestUtils, FormToast, type FormToastProps, type FormValidationError, type HeroHookFormDefaultsConfig, HeroHookFormProvider, type HeroHookFormProviderProps, type InputDefaults, InputField, type InputFieldProps, type RadioFieldConfig, type RadioGroupDefaults, RadioGroupField, type RadioGroupFieldProps, type SelectDefaults, SelectField, type SelectFieldProps, ServerActionForm, type ServerFieldError, type ServerFormError, type SliderDefaults, SliderField, type SliderFieldConfig, type SliderFieldProps, type StringFieldConfig, SubmitButton, type SubmitButtonProps, type SwitchDefaults, SwitchField, type SwitchFieldProps, type TextareaDefaults, TextareaField, type TextareaFieldProps, TypeInferredBuilder, type UseDebouncedValidationOptions, type UseEnhancedFormStateOptions, type UseInferredFormOptions, type ValidationUtils, type WithControl, type WizardFormConfig, ZodForm, type ZodFormConfig, type ZodFormFieldConfig, applyServerErrors, asyncValidation, commonValidations, createAdvancedBuilder, createBasicFormBuilder, createDateSchema, createEmailSchema, createField, createFieldArrayBuilder, createFieldArrayItemBuilder, createFileSchema, createFormTestUtils, createFutureDateSchema, createMaxLengthSchema, createMinLengthSchema, createMockFormData, createMockFormErrors, createNestedPathBuilder, createNumberRangeSchema, createOptimizedFieldHandler, createPasswordSchema, createPastDateSchema, createPhoneSchema, createRequiredCheckboxSchema, createRequiredSchema, createTypeInferredBuilder, createUrlSchema, createZodFormConfig, crossFieldValidation, debounce, deepEqual, defineInferredForm, errorMessages, field, getFieldError, getFormErrors, hasFieldError, hasFormErrors, serverValidation, shallowEqual, simulateFieldInput, simulateFormSubmission, throttle, useDebouncedFieldValidation, useDebouncedValidation, useEnhancedFormState, useFormHelper, useHeroForm, useHeroHookFormDefaults, useInferredForm, useMemoizedCallback, useMemoizedFieldProps, usePerformanceMonitor, useTypeInferredForm, useZodForm, validationPatterns, validationUtils, waitForFormState };
+export { AdvancedFieldBuilder, AutocompleteField, type AutocompleteFieldProps, type AutocompleteOption, type BaseFormFieldConfig, BasicFormBuilder, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, type CommonFieldDefaults, CommonFields, ConditionalField, type ConditionalFieldConfig, type ConditionalFieldProps, type ConditionalValidation, ConfigurableForm, ContentField, type ContentFieldConfig, type CustomFieldConfig, DateField, type DateFieldConfig, type DateFieldProps, type DateInputDefaults, type DynamicSectionConfig, DynamicSectionField, type DynamicSectionFieldProps, type EnhancedFormState, FieldArrayBuilder, type FieldArrayConfig, FieldArrayField, type FieldArrayFieldProps, FieldArrayItemBuilder, type FieldBaseProps, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, FontPickerField, type FontPickerFieldConfig, type FontPickerFieldProps, type FormConfig, FormField, type FormFieldConfig, FormFieldHelpers, type FormProps, FormProvider, FormStatus, type FormStatusProps, type FormStep, type FormSubmissionState, type FormTestUtils, FormToast, type FormToastProps, type FormValidationError, type HeroHookFormDefaultsConfig, HeroHookFormProvider, type HeroHookFormProviderProps, type InputDefaults, InputField, type InputFieldProps, type RadioFieldConfig, type RadioGroupDefaults, RadioGroupField, type RadioGroupFieldProps, type SelectDefaults, SelectField, type SelectFieldProps, ServerActionForm, type ServerFieldError, type ServerFormError, type SliderDefaults, SliderField, type SliderFieldConfig, type SliderFieldProps, type StringFieldConfig, SubmitButton, type SubmitButtonProps, type SwitchDefaults, SwitchField, type SwitchFieldProps, type TextareaDefaults, TextareaField, type TextareaFieldProps, TypeInferredBuilder, type UseDebouncedValidationOptions, type UseEnhancedFormStateOptions, type UseInferredFormOptions, type ValidationUtils, type WithControl, type WizardFormConfig, ZodForm, type ZodFormConfig, type ZodFormFieldConfig, applyServerErrors, asyncValidation, commonValidations, createAdvancedBuilder, createBasicFormBuilder, createDateSchema, createEmailSchema, createField, createFieldArrayBuilder, createFieldArrayItemBuilder, createFileSchema, createFormTestUtils, createFutureDateSchema, createMaxLengthSchema, createMinLengthSchema, createMockFormData, createMockFormErrors, createNestedPathBuilder, createNumberRangeSchema, createOptimizedFieldHandler, createPasswordSchema, createPastDateSchema, createPhoneSchema, createRequiredCheckboxSchema, createRequiredSchema, createTypeInferredBuilder, createUrlSchema, createZodFormConfig, crossFieldValidation, debounce, deepEqual, defineInferredForm, errorMessages, field, getFieldError, getFormErrors, hasFieldError, hasFormErrors, serverValidation, shallowEqual, simulateFieldInput, simulateFormSubmission, throttle, useDebouncedFieldValidation, useDebouncedValidation, useEnhancedFormState, useFormHelper, useHeroForm, useHeroHookFormDefaults, useInferredForm, useMemoizedCallback, useMemoizedFieldProps, usePerformanceMonitor, useTypeInferredForm, useZodForm, validationPatterns, validationUtils, waitForFormState };