@rachelallyson/hero-hook-form 2.2.0 → 2.3.0

package/dist/index.d.ts

@@ -123,9 +123,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 +155,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 +428,262 @@ 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;
 
+/**
+ * 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 {
@@ -466,51 +697,532 @@ type FontPickerFieldProps<TFieldValues extends FieldValues, TValue extends strin
 };
 declare function FontPickerField<TFieldValues extends FieldValues, TValue extends string = string>(props: FontPickerFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
 
+/**
+ * Props for the InputField component.
+ *
+ * @template TFieldValues - The form data type
+ */
 type InputFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, string> & WithControl<TFieldValues> & {
     inputProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
     transform?: (value: string) => string;
 };
+/**
+ * Input field component for text, email, password, tel, and number inputs.
+ *
+ * @description
+ * A memoized input field component that integrates with React Hook Form
+ * and HeroUI Input component. Supports all standard input types and
+ * includes automatic validation error display.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @param {InputFieldProps<TFieldValues>} props - Component props
+ * @param {Path<TFieldValues>} props.name - Field name path
+ * @param {string} [props.label] - Field label
+ * @param {string} [props.description] - Field description/help text
+ * @param {Control<TFieldValues>} props.control - React Hook Form control
+ * @param {boolean} [props.isDisabled] - Whether field is disabled
+ * @param {RegisterOptions<TFieldValues>} [props.rules] - Validation rules
+ * @param {Partial<InputProps>} [props.inputProps] - Additional Input component props
+ * @param {(value: string) => string} [props.transform] - Value transformation function
+ *
+ * @returns {JSX.Element} The rendered input field
+ *
+ * @example
+ * ```tsx
+ * import { InputField } from "@rachelallyson/hero-hook-form";
+ * import { useForm, Controller } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <InputField
+ *       name="email"
+ *       label="Email Address"
+ *       description="Enter your email address"
+ *       control={control}
+ *       inputProps={{
+ *         type: "email",
+ *         placeholder: "you@example.com",
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link FormFieldHelpers.input} for helper function to create input field config
+ * @category Fields
+ */
 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"),
+ *           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;
 
 /**
@@ -1111,14 +1823,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.
@@ -1144,7 +1848,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
  *
@@ -1194,28 +1897,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
@@ -1381,14 +2068,14 @@ 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>;
+        name?: string;
     }) => ZodFormFieldConfig<T>;
     /**
      * Create a date field
@@ -2025,11 +2712,68 @@ declare function useTypeInferredForm<T extends FieldValues>(formConfig: {
     fields: ZodFormFieldConfig<T>[];
 }, options?: UseInferredFormOptions<T>): UseFormReturn<T>;
 
+/**
+ * Props for the ConditionalField component.
+ *
+ * @template TFieldValues - The form data type
+ */
 interface ConditionalFieldProps<TFieldValues extends FieldValues> {
     config: ConditionalFieldConfig<TFieldValues>;
     control: Control<TFieldValues>;
     className?: string;
 }
+/**
+ * Conditional field component that shows/hides fields based on form values.
+ *
+ * @description
+ * Renders a field only when a condition function returns true based on
+ * current form values. Useful for creating dynamic forms that adapt to
+ * user input. The field is completely removed from the DOM when hidden.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @param {ConditionalFieldProps<TFieldValues>} props - Component props
+ * @param {ConditionalFieldConfig<TFieldValues>} props.config - Conditional field configuration
+ * @param {Control<TFieldValues>} props.control - React Hook Form control
+ * @param {string} [props.className] - Additional CSS class name
+ *
+ * @returns {JSX.Element|null} The rendered field or null if condition is not met
+ *
+ * @example
+ * ```tsx
+ * import { ConditionalField, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+ *
+ * const fields = [
+ *   FormFieldHelpers.checkbox("hasPhone", "I have a phone number"),
+ *   ConditionalField({
+ *     config: {
+ *       name: "phone",
+ *       condition: (values) => values.hasPhone === true,
+ *       field: FormFieldHelpers.input("phone", "Phone Number", "tel"),
+ *     },
+ *     control: form.control,
+ *   }),
+ * ];
+ * ```
+ *
+ * @example
+ * Multiple conditions:
+ * ```tsx
+ * ConditionalField({
+ *   config: {
+ *     name: "businessDetails",
+ *     condition: (values) =>
+ *       values.userType === "business" && values.isRegistered === true,
+ *     field: FormFieldHelpers.input("taxId", "Tax ID"),
+ *   },
+ *   control: form.control,
+ * }),
+ * ```
+ *
+ * @see {@link DynamicSectionField} for grouping multiple conditional fields
+ * @see {@link FieldArrayField} for repeating fields
+ * @category Fields
+ */
 declare function ConditionalField<TFieldValues extends FieldValues>({ className, config, control, }: ConditionalFieldProps<TFieldValues>): React$1.JSX.Element | null;
 
 interface ContentFieldProps<TFieldValues extends FieldValues> {
@@ -2039,17 +2783,155 @@ interface ContentFieldProps<TFieldValues extends FieldValues> {
 }
 declare function ContentField<TFieldValues extends FieldValues>({ config, form, submissionState, }: ContentFieldProps<TFieldValues>): React$1.JSX.Element;
 
+/**
+ * Props for the FieldArrayField component.
+ *
+ * @template TFieldValues - The form data type
+ */
 interface FieldArrayFieldProps<TFieldValues extends FieldValues> {
     config: FieldArrayConfig<TFieldValues>;
     className?: string;
 }
+/**
+ * Field array component for dynamic repeating field groups.
+ *
+ * @description
+ * Allows users to add and remove multiple instances of a field group.
+ * Useful for forms with repeating data like addresses, items, or contacts.
+ * Automatically manages field array state and provides add/remove buttons.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @param {FieldArrayFieldProps<TFieldValues>} props - Component props
+ * @param {FieldArrayConfig<TFieldValues>} props.config - Field array configuration
+ * @param {string} [props.className] - Additional CSS class name
+ *
+ * @returns {JSX.Element} The rendered field array with add/remove controls
+ *
+ * @example
+ * ```tsx
+ * import { FieldArrayField, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+ *
+ * const fields = [
+ *   FormFieldHelpers.input("name", "Name"),
+ *   FieldArrayField({
+ *     config: {
+ *       name: "addresses",
+ *       label: "Address",
+ *       fields: [
+ *         FormFieldHelpers.input("street", "Street Address"),
+ *         FormFieldHelpers.input("city", "City"),
+ *         FormFieldHelpers.input("zipCode", "ZIP Code"),
+ *       ],
+ *       min: 1,
+ *       max: 5,
+ *       addButtonText: "Add Address",
+ *       removeButtonText: "Remove Address",
+ *     },
+ *   }),
+ * ];
+ * ```
+ *
+ * @example
+ * With validation:
+ * ```tsx
+ * const schema = z.object({
+ *   addresses: z.array(z.object({
+ *     street: z.string().min(1, "Street is required"),
+ *     city: z.string().min(1, "City is required"),
+ *   })).min(1, "At least one address is required"),
+ * });
+ * ```
+ *
+ * @see {@link ConditionalField} for conditional single fields
+ * @see {@link DynamicSectionField} for conditional field groups
+ * @category Fields
+ */
 declare function FieldArrayField<TFieldValues extends FieldValues>({ className, config, }: FieldArrayFieldProps<TFieldValues>): React$1.JSX.Element | null;
 
+/**
+ * Props for the DynamicSectionField component.
+ *
+ * @template TFieldValues - The form data type
+ */
 interface DynamicSectionFieldProps<TFieldValues extends FieldValues> {
     config: DynamicSectionConfig<TFieldValues>;
     control: Control<TFieldValues>;
     className?: string;
 }
+/**
+ * Dynamic section component that shows/hides groups of fields based on form values.
+ *
+ * @description
+ * Similar to ConditionalField but for groups of fields. Renders a section
+ * with title, description, and multiple fields when a condition is met.
+ * Useful for creating multi-step-like experiences or conditional form sections.
+ *
+ * @template TFieldValues - The form data type
+ *
+ * @param {DynamicSectionFieldProps<TFieldValues>} props - Component props
+ * @param {DynamicSectionConfig<TFieldValues>} props.config - Dynamic section configuration
+ * @param {Control<TFieldValues>} props.control - React Hook Form control
+ * @param {string} [props.className] - Additional CSS class name
+ *
+ * @returns {JSX.Element|null} The rendered section or null if condition is not met
+ *
+ * @example
+ * ```tsx
+ * import { DynamicSectionField, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+ *
+ * const fields = [
+ *   FormFieldHelpers.checkbox("hasEmergencyContact", "Has Emergency Contact"),
+ *   DynamicSectionField({
+ *     config: {
+ *       name: "emergencyContact",
+ *       title: "Emergency Contact Information",
+ *       description: "Please provide emergency contact details",
+ *       condition: (values) => values.hasEmergencyContact === true,
+ *       fields: [
+ *         FormFieldHelpers.input("name", "Contact Name"),
+ *         FormFieldHelpers.input("relationship", "Relationship"),
+ *         FormFieldHelpers.input("phone", "Phone Number", "tel"),
+ *         FormFieldHelpers.input("email", "Email", "email"),
+ *       ],
+ *     },
+ *     control: form.control,
+ *   }),
+ * ];
+ * ```
+ *
+ * @example
+ * Nested dynamic sections:
+ * ```tsx
+ * DynamicSectionField({
+ *   config: {
+ *     name: "businessInfo",
+ *     title: "Business Information",
+ *     condition: (values) => values.accountType === "business",
+ *     fields: [
+ *       FormFieldHelpers.input("businessName", "Business Name"),
+ *       DynamicSectionField({
+ *         config: {
+ *           name: "billingAddress",
+ *           title: "Billing Address",
+ *           condition: (values) => values.businessName && values.taxId,
+ *           fields: [
+ *             FormFieldHelpers.input("street", "Street Address"),
+ *             FormFieldHelpers.input("city", "City"),
+ *           ],
+ *         },
+ *         control: form.control,
+ *       }),
+ *     ],
+ *   },
+ *   control: form.control,
+ * }),
+ * ```
+ *
+ * @see {@link ConditionalField} for single conditional fields
+ * @see {@link FieldArrayField} for repeating fields
+ * @category Fields
+ */
 declare function DynamicSectionField<TFieldValues extends FieldValues>({ className, config, control, }: DynamicSectionFieldProps<TFieldValues>): React$1.JSX.Element | null;
 
 interface FormStatusProps<T extends Record<string, any>> {