@rachelallyson/hero-hook-form 2.2.1 → 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 {
@@ -525,45 +756,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"),
+ *           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 +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.
@@ -1197,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
  *
@@ -1247,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
@@ -1434,15 +2068,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
      */