@rachelallyson/hero-hook-form 2.5.1 → 2.6.0

package/CHANGELOG.md

@@ -2,6 +2,47 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.6.0] - 2026-01-13
+
+### Added
+
+- **Complete Prop Support for All FormFieldHelpers**: All field helpers now accept full component props for complete customization
+  - `input()` - Added `inputProps` parameter for full Input component customization
+  - `textarea()` - Added `textareaProps` parameter (placeholder still works as shorthand)
+  - `select()` - Added `selectProps` parameter
+  - `checkbox()` - Added `checkboxProps` parameter
+  - `switch()` - Added `switchProps` parameter (description still works as shorthand)
+  - `autocomplete()` - Added `autocompleteProps` parameter (placeholder still works as shorthand)
+  - `date()` - Improved with proper `DateInput` component typing
+  - `slider()` - Improved with proper `Slider` component typing
+  - `file()` - Improved with proper `Input` component typing for file inputs
+  - `fontPicker()` - Added helper with proper `FontPickerProps` interface typing
+
+- **New Field Helpers**: Added missing helpers for complete coverage
+  - `radio()` - Radio group field helper with `radioProps` support
+  - `slider()` - Slider field helper with `sliderProps` support
+  - `file()` - File upload field helper with `fileProps` support
+  - `fontPicker()` - Font picker field helper with `fontPickerProps` support
+
+### Enhanced
+
+- **Improved Type Safety**: Replaced all `Record<string, string | number | boolean>` types with proper component types
+  - All helpers now use `Omit<ComponentProps<typeof Component>, ...>` for full type safety
+  - Removed all type assertions (`as Record`) - now using proper component types
+  - Full IntelliSense support for all component props
+  - Type-safe exclusions for form-managed props (value, onChange, label, etc.)
+
+- **Consistent API Pattern**: All helpers now follow the same pattern
+  - Simple API for basic cases: `FormFieldHelpers.input("email", "Email", "email")`
+  - Full customization when needed: `FormFieldHelpers.input("email", "Email", "email", { classNames: {...}, startContent: <Icon /> })`
+  - Backward compatible - all existing code continues to work
+
+### Fixed
+
+- **AdvancedFormBuilder**: Updated to use correct prop names (`maxValue`/`minValue` instead of `max`/`min` for Slider)
+- **TypeInferredBuilder**: Updated slider props to use correct prop names
+- **FontPicker Types**: Improved type safety with proper `FontPickerProps` interface instead of `Record`
+
 ## [2.5.1] - 2026-01-13
 
 ### Fixed

package/dist/index.d.ts

@@ -9,13 +9,13 @@ import * as _internationalized_date from '@internationalized/date';
 import { CalendarDate } from '@internationalized/date';
 import { Autocomplete } from '@heroui/autocomplete';
 import { Checkbox } from '@heroui/checkbox';
+import { DateInput } from '@heroui/date-input';
 import { Input, Textarea } from '@heroui/input';
 import { RadioGroup } from '@heroui/radio';
 import { Select } from '@heroui/select';
+import { Slider } from '@heroui/slider';
 import { Switch } from '@heroui/switch';
 import { Button as Button$1 } from '@heroui/button';
-import { DateInput } from '@heroui/date-input';
-import { Slider } from '@heroui/slider';
 
 interface FieldBaseProps<TFieldValues extends FieldValues, TValue> {
     name: Path<TFieldValues>;
@@ -76,24 +76,29 @@ interface RadioFieldConfig<TFieldValues extends FieldValues> extends BaseFormFie
 interface SliderFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
     type: "slider";
     defaultValue?: number;
-    sliderProps?: Record<string, string | number | boolean>;
+    sliderProps?: Omit<ComponentProps<typeof Slider>, "value" | "onChange" | "label" | "isDisabled">;
 }
 interface DateFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
     type: "date";
     defaultValue?: _internationalized_date.CalendarDate | null;
-    dateProps?: Record<string, string | number | boolean>;
+    dateProps?: Omit<ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
 }
 interface FileFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
     type: "file";
     defaultValue?: FileList | null;
-    fileProps?: Record<string, string | number | boolean>;
+    fileProps?: Omit<ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
     multiple?: boolean;
     accept?: string;
 }
 interface FontPickerFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
     type: "fontPicker";
     defaultValue?: string;
-    fontPickerProps?: Record<string, string | number | boolean>;
+    fontPickerProps?: {
+        showFontPreview?: boolean;
+        loadAllVariants?: boolean;
+        onFontsLoaded?: (loaded: boolean) => void;
+        fontsLoadedTimeout?: number;
+    };
 }
 interface CustomFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
     type: "custom";
@@ -2187,15 +2192,42 @@ declare function createBasicFormBuilder<T extends FieldValues>(): BasicFormBuild
 declare const FormFieldHelpers: {
     /**
      * Create an autocomplete field
+     *
+     * @example
+     * ```tsx
+     * // Simple autocomplete
+     * FormFieldHelpers.autocomplete("country", "Country", options)
+     *
+     * // With placeholder
+     * FormFieldHelpers.autocomplete("country", "Country", options, "Search countries")
+     *
+     * // With full customization
+     * FormFieldHelpers.autocomplete("country", "Country", options, "Search countries", {
+     *   classNames: { base: "custom-autocomplete" },
+     *   allowsCustomValue: true
+     * })
+     * ```
      */
     autocomplete: <T extends FieldValues>(name: Path<T>, label: string, items: {
         label: string;
         value: string | number;
-    }[], placeholder?: string) => ZodFormFieldConfig<T>;
+    }[], placeholder?: string, autocompleteProps?: Omit<React$1.ComponentProps<typeof Autocomplete>, "selectedKey" | "onSelectionChange" | "inputValue" | "onInputChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "children" | "items">) => ZodFormFieldConfig<T>;
     /**
      * Create a checkbox field
+     *
+     * @example
+     * ```tsx
+     * // Simple checkbox
+     * FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter")
+     *
+     * // With full customization
+     * FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter", {
+     *   classNames: { base: "custom-checkbox" },
+     *   size: "lg"
+     * })
+     * ```
      */
-    checkbox: <T extends FieldValues>(name: Path<T>, label: string) => ZodFormFieldConfig<T>;
+    checkbox: <T extends FieldValues>(name: Path<T>, label: string, checkboxProps?: Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
     /**
      * Create a conditional field that shows/hides based on form data
      *
@@ -2245,27 +2277,192 @@ declare const FormFieldHelpers: {
     }) => ZodFormFieldConfig<T>;
     /**
      * Create a date field
+     *
+     * @example
+     * ```tsx
+     * // Simple date field
+     * FormFieldHelpers.date("birthDate", "Birth Date")
+     *
+     * // With full customization
+     * FormFieldHelpers.date("birthDate", "Birth Date", {
+     *   label: "Select your birth date",
+     *   granularity: "day",
+     *   minValue: new CalendarDate(1900, 1, 1)
+     * })
+     * ```
+     */
+    date: <T extends FieldValues>(name: Path<T>, label: string, dateProps?: Omit<React$1.ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
+    /**
+     * Create a file upload field
+     *
+     * @example
+     * ```tsx
+     * // Simple file field
+     * FormFieldHelpers.file("avatar", "Profile Picture")
+     *
+     * // With accept and multiple
+     * FormFieldHelpers.file("avatar", "Profile Picture", {
+     *   accept: "image/*",
+     *   multiple: true
+     * })
+     *
+     * // With full customization
+     * FormFieldHelpers.file("avatar", "Profile Picture", {
+     *   accept: "image/*",
+     *   multiple: false,
+     *   fileProps: { className: "custom-file-input" }
+     * })
+     * ```
      */
-    date: <T extends FieldValues>(name: Path<T>, label: string, dateProps?: Record<string, string | number | boolean>) => ZodFormFieldConfig<T>;
+    file: <T extends FieldValues>(name: Path<T>, label: string, options?: {
+        accept?: string;
+        fileProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
+        multiple?: boolean;
+    }) => ZodFormFieldConfig<T>;
+    /**
+     * Create a font picker field
+     *
+     * @example
+     * ```tsx
+     * // Simple font picker
+     * FormFieldHelpers.fontPicker("font", "Choose Font")
+     *
+     * // With full customization
+     * FormFieldHelpers.fontPicker("font", "Choose Font", {
+     *   showFontPreview: true,
+     *   loadAllVariants: false,
+     *   fontsLoadedTimeout: 5000
+     * })
+     * ```
+     */
+    fontPicker: <T extends FieldValues>(name: Path<T>, label: string, fontPickerProps?: {
+        showFontPreview?: boolean;
+        loadAllVariants?: boolean;
+        onFontsLoaded?: (loaded: boolean) => void;
+        fontsLoadedTimeout?: number;
+    }) => ZodFormFieldConfig<T>;
     /**
      * Create an input field
+     *
+     * @example
+     * ```tsx
+     * // Simple input
+     * FormFieldHelpers.input("name", "Name")
+     *
+     * // With type
+     * FormFieldHelpers.input("email", "Email", "email")
+     *
+     * // With full customization
+     * FormFieldHelpers.input("email", "Email", "email", {
+     *   placeholder: "Enter your email",
+     *   classNames: { input: "custom-input" },
+     *   startContent: <MailIcon />,
+     *   description: "We'll never share your email"
+     * })
+     * ```
      */
-    input: <T extends FieldValues>(name: Path<T>, label: string, type?: "text" | "email" | "tel" | "password") => ZodFormFieldConfig<T>;
+    input: <T extends FieldValues>(name: Path<T>, label: string, type?: "text" | "email" | "tel" | "password", inputProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
+    /**
+     * Create a radio group field
+     *
+     * @example
+     * ```tsx
+     * // Simple radio group
+     * FormFieldHelpers.radio("gender", "Gender", [
+     *   { label: "Male", value: "male" },
+     *   { label: "Female", value: "female" }
+     * ])
+     *
+     * // With full customization
+     * FormFieldHelpers.radio("gender", "Gender", options, {
+     *   orientation: "horizontal",
+     *   classNames: { base: "custom-radio" }
+     * })
+     * ```
+     */
+    radio: <T extends FieldValues>(name: Path<T>, label: string, options: {
+        label: string;
+        value: string | number;
+    }[], radioProps?: Omit<React$1.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">) => ZodFormFieldConfig<T>;
     /**
      * Create a select field
+     *
+     * @example
+     * ```tsx
+     * // Simple select
+     * FormFieldHelpers.select("country", "Country", options)
+     *
+     * // With full customization
+     * FormFieldHelpers.select("country", "Country", options, {
+     *   placeholder: "Select a country",
+     *   classNames: { trigger: "custom-select" },
+     *   selectionMode: "multiple"
+     * })
+     * ```
      */
     select: <T extends FieldValues>(name: Path<T>, label: string, options: {
         label: string;
         value: string | number;
-    }[]) => ZodFormFieldConfig<T>;
+    }[], selectProps?: Omit<React$1.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
+    /**
+     * Create a slider field
+     *
+     * @example
+     * ```tsx
+     * // Simple slider
+     * FormFieldHelpers.slider("rating", "Rating")
+     *
+     * // With full customization
+     * FormFieldHelpers.slider("rating", "Rating", {
+     *   minValue: 1,
+     *   maxValue: 5,
+     *   step: 1,
+     *   showSteps: true,
+     *   classNames: { base: "custom-slider" }
+     * })
+     * ```
+     */
+    slider: <T extends FieldValues>(name: Path<T>, label: string, sliderProps?: Omit<React$1.ComponentProps<typeof Slider>, "value" | "onChange" | "label" | "isDisabled">) => ZodFormFieldConfig<T>;
     /**
      * Create a switch field
+     *
+     * @example
+     * ```tsx
+     * // Simple switch
+     * FormFieldHelpers.switch("notifications", "Enable notifications")
+     *
+     * // With description
+     * FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications")
+     *
+     * // With full customization
+     * FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications", {
+     *   classNames: { base: "custom-switch" },
+     *   size: "lg",
+     *   color: "primary"
+     * })
+     * ```
      */
-    switch: <T extends FieldValues>(name: Path<T>, label: string, description?: string) => ZodFormFieldConfig<T>;
+    switch: <T extends FieldValues>(name: Path<T>, label: string, description?: string, switchProps?: Omit<React$1.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
     /**
      * Create a textarea field
+     *
+     * @example
+     * ```tsx
+     * // Simple textarea
+     * FormFieldHelpers.textarea("message", "Message")
+     *
+     * // With placeholder
+     * FormFieldHelpers.textarea("message", "Message", "Enter your message")
+     *
+     * // With full customization
+     * FormFieldHelpers.textarea("message", "Message", "Enter your message", {
+     *   classNames: { input: "custom-textarea" },
+     *   minRows: 3,
+     *   maxRows: 10
+     * })
+     * ```
      */
-    textarea: <T extends FieldValues>(name: Path<T>, label: string, placeholder?: string) => ZodFormFieldConfig<T>;
+    textarea: <T extends FieldValues>(name: Path<T>, label: string, placeholder?: string, textareaProps?: Omit<React$1.ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
 };
 /**
  * Common field collections

package/dist/index.js

@@ -2438,9 +2438,27 @@ function createBasicFormBuilder() {
 var FormFieldHelpers = {
   /**
    * Create an autocomplete field
+   *
+   * @example
+   * ```tsx
+   * // Simple autocomplete
+   * FormFieldHelpers.autocomplete("country", "Country", options)
+   *
+   * // With placeholder
+   * FormFieldHelpers.autocomplete("country", "Country", options, "Search countries")
+   *
+   * // With full customization
+   * FormFieldHelpers.autocomplete("country", "Country", options, "Search countries", {
+   *   classNames: { base: "custom-autocomplete" },
+   *   allowsCustomValue: true
+   * })
+   * ```
    */
-  autocomplete: (name, label, items, placeholder) => ({
-    autocompleteProps: placeholder ? { placeholder } : void 0,
+  autocomplete: (name, label, items, placeholder, autocompleteProps) => ({
+    autocompleteProps: {
+      ...placeholder && { placeholder },
+      ...autocompleteProps
+    },
     label,
     name,
     options: items,
@@ -2448,8 +2466,21 @@ var FormFieldHelpers = {
   }),
   /**
    * Create a checkbox field
+   *
+   * @example
+   * ```tsx
+   * // Simple checkbox
+   * FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter")
+   *
+   * // With full customization
+   * FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter", {
+   *   classNames: { base: "custom-checkbox" },
+   *   size: "lg"
+   * })
+   * ```
    */
-  checkbox: (name, label) => ({
+  checkbox: (name, label, checkboxProps) => ({
+    checkboxProps,
     label,
     name,
     type: "checkbox"
@@ -2511,6 +2542,19 @@ var FormFieldHelpers = {
   },
   /**
    * Create a date field
+   *
+   * @example
+   * ```tsx
+   * // Simple date field
+   * FormFieldHelpers.date("birthDate", "Birth Date")
+   *
+   * // With full customization
+   * FormFieldHelpers.date("birthDate", "Birth Date", {
+   *   label: "Select your birth date",
+   *   granularity: "day",
+   *   minValue: new CalendarDate(1900, 1, 1)
+   * })
+   * ```
    */
   date: (name, label, dateProps) => ({
     dateProps,
@@ -2518,40 +2562,211 @@ var FormFieldHelpers = {
     name,
     type: "date"
   }),
+  /**
+   * Create a file upload field
+   *
+   * @example
+   * ```tsx
+   * // Simple file field
+   * FormFieldHelpers.file("avatar", "Profile Picture")
+   *
+   * // With accept and multiple
+   * FormFieldHelpers.file("avatar", "Profile Picture", {
+   *   accept: "image/*",
+   *   multiple: true
+   * })
+   *
+   * // With full customization
+   * FormFieldHelpers.file("avatar", "Profile Picture", {
+   *   accept: "image/*",
+   *   multiple: false,
+   *   fileProps: { className: "custom-file-input" }
+   * })
+   * ```
+   */
+  file: (name, label, options) => ({
+    accept: options?.accept,
+    fileProps: options?.fileProps,
+    label,
+    multiple: options?.multiple,
+    name,
+    type: "file"
+  }),
+  /**
+   * Create a font picker field
+   *
+   * @example
+   * ```tsx
+   * // Simple font picker
+   * FormFieldHelpers.fontPicker("font", "Choose Font")
+   *
+   * // With full customization
+   * FormFieldHelpers.fontPicker("font", "Choose Font", {
+   *   showFontPreview: true,
+   *   loadAllVariants: false,
+   *   fontsLoadedTimeout: 5000
+   * })
+   * ```
+   */
+  fontPicker: (name, label, fontPickerProps) => ({
+    fontPickerProps,
+    label,
+    name,
+    type: "fontPicker"
+  }),
   /**
    * Create an input field
+   *
+   * @example
+   * ```tsx
+   * // Simple input
+   * FormFieldHelpers.input("name", "Name")
+   *
+   * // With type
+   * FormFieldHelpers.input("email", "Email", "email")
+   *
+   * // With full customization
+   * FormFieldHelpers.input("email", "Email", "email", {
+   *   placeholder: "Enter your email",
+   *   classNames: { input: "custom-input" },
+   *   startContent: <MailIcon />,
+   *   description: "We'll never share your email"
+   * })
+   * ```
    */
-  input: (name, label, type = "text") => ({
-    inputProps: { type },
+  input: (name, label, type, inputProps) => ({
+    inputProps: {
+      type: type || "text",
+      ...inputProps
+    },
     label,
     name,
     type: "input"
   }),
+  /**
+   * Create a radio group field
+   *
+   * @example
+   * ```tsx
+   * // Simple radio group
+   * FormFieldHelpers.radio("gender", "Gender", [
+   *   { label: "Male", value: "male" },
+   *   { label: "Female", value: "female" }
+   * ])
+   *
+   * // With full customization
+   * FormFieldHelpers.radio("gender", "Gender", options, {
+   *   orientation: "horizontal",
+   *   classNames: { base: "custom-radio" }
+   * })
+   * ```
+   */
+  radio: (name, label, options, radioProps) => ({
+    label,
+    name,
+    radioOptions: options,
+    radioProps,
+    type: "radio"
+  }),
   /**
    * Create a select field
+   *
+   * @example
+   * ```tsx
+   * // Simple select
+   * FormFieldHelpers.select("country", "Country", options)
+   *
+   * // With full customization
+   * FormFieldHelpers.select("country", "Country", options, {
+   *   placeholder: "Select a country",
+   *   classNames: { trigger: "custom-select" },
+   *   selectionMode: "multiple"
+   * })
+   * ```
    */
-  select: (name, label, options) => ({
+  select: (name, label, options, selectProps) => ({
     label,
     name,
     options,
+    selectProps,
     type: "select"
   }),
+  /**
+   * Create a slider field
+   *
+   * @example
+   * ```tsx
+   * // Simple slider
+   * FormFieldHelpers.slider("rating", "Rating")
+   *
+   * // With full customization
+   * FormFieldHelpers.slider("rating", "Rating", {
+   *   minValue: 1,
+   *   maxValue: 5,
+   *   step: 1,
+   *   showSteps: true,
+   *   classNames: { base: "custom-slider" }
+   * })
+   * ```
+   */
+  slider: (name, label, sliderProps) => ({
+    label,
+    name,
+    sliderProps,
+    type: "slider"
+  }),
   /**
    * Create a switch field
+   *
+   * @example
+   * ```tsx
+   * // Simple switch
+   * FormFieldHelpers.switch("notifications", "Enable notifications")
+   *
+   * // With description
+   * FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications")
+   *
+   * // With full customization
+   * FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications", {
+   *   classNames: { base: "custom-switch" },
+   *   size: "lg",
+   *   color: "primary"
+   * })
+   * ```
    */
-  switch: (name, label, description) => ({
+  switch: (name, label, description, switchProps) => ({
     description,
     label,
     name,
+    switchProps,
     type: "switch"
   }),
   /**
    * Create a textarea field
+   *
+   * @example
+   * ```tsx
+   * // Simple textarea
+   * FormFieldHelpers.textarea("message", "Message")
+   *
+   * // With placeholder
+   * FormFieldHelpers.textarea("message", "Message", "Enter your message")
+   *
+   * // With full customization
+   * FormFieldHelpers.textarea("message", "Message", "Enter your message", {
+   *   classNames: { input: "custom-textarea" },
+   *   minRows: 3,
+   *   maxRows: 10
+   * })
+   * ```
    */
-  textarea: (name, label, placeholder) => ({
+  textarea: (name, label, placeholder, textareaProps) => ({
     label,
     name,
-    textareaProps: { placeholder },
+    textareaProps: {
+      ...placeholder && { placeholder },
+      ...textareaProps
+    },
     type: "textarea"
   })
 };
@@ -2692,11 +2907,10 @@ function sliderField(name, label, props) {
     type: "slider",
     ...props && {
       sliderProps: {
-        className: props.className || "",
-        disabled: props.isDisabled || false,
-        max: props.max || 100,
-        min: props.min || 0,
-        step: props.step || 1
+        className: props.className,
+        maxValue: props.max ?? 100,
+        minValue: props.min ?? 0,
+        step: props.step ?? 1
       }
     }
   };
@@ -2708,9 +2922,8 @@ function dateField(name, label, props) {
     type: "date",
     ...props && {
       dateProps: {
-        className: props.className || "",
-        disabled: props.isDisabled || false,
-        placeholder: props.placeholder || ""
+        className: props.className,
+        placeholder: props.placeholder
       }
     }
   };
@@ -2732,15 +2945,12 @@ function fileField(name, label, props) {
 }
 function fontPickerField(name, label, props) {
   return {
+    className: props?.className,
+    description: props?.description,
+    fontPickerProps: props?.fontPickerProps,
     label,
     name,
-    type: "fontPicker",
-    ...props && {
-      fontPickerProps: {
-        className: props.className || "",
-        disabled: props.isDisabled || false
-      }
-    }
+    type: "fontPicker"
   };
 }
 function contentField(title, description, options) {
@@ -3062,7 +3272,12 @@ var TypeInferredBuilder = class {
     this.formFields.push({
       label,
       name,
-      sliderProps: { max, min, step, ...fieldOptions },
+      sliderProps: {
+        maxValue: max,
+        minValue: min,
+        step,
+        ...fieldOptions
+      },
       type: "slider"
     });
     return this;

package/dist/react/index.d.ts

@@ -1,5 +1,5 @@
 import React$1, { ComponentProps } from 'react';
-import { Input, Textarea, Select, Autocomplete, Checkbox, Switch, RadioGroup, Button, DateInput, Slider } from '@heroui/react';
+import { Input, Textarea, Select, Autocomplete, Checkbox, Switch, RadioGroup, Slider, DateInput, Button } from '@heroui/react';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, Path, RegisterOptions, Control, UseFormReturn, FieldErrors, UseFormProps, SubmitHandler, UseFormSetError } from 'react-hook-form';
 export { UseFormReturn, useFormContext } from 'react-hook-form';
@@ -67,24 +67,29 @@ interface RadioFieldConfig<TFieldValues extends FieldValues> extends BaseFormFie
 interface SliderFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
     type: "slider";
     defaultValue?: number;
-    sliderProps?: Record<string, string | number | boolean>;
+    sliderProps?: Omit<ComponentProps<typeof Slider>, "value" | "onChange" | "label" | "isDisabled">;
 }
 interface DateFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
     type: "date";
     defaultValue?: _internationalized_date.CalendarDate | null;
-    dateProps?: Record<string, string | number | boolean>;
+    dateProps?: Omit<ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
 }
 interface FileFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
     type: "file";
     defaultValue?: FileList | null;
-    fileProps?: Record<string, string | number | boolean>;
+    fileProps?: Omit<ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
     multiple?: boolean;
     accept?: string;
 }
 interface FontPickerFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
     type: "fontPicker";
     defaultValue?: string;
-    fontPickerProps?: Record<string, string | number | boolean>;
+    fontPickerProps?: {
+        showFontPreview?: boolean;
+        loadAllVariants?: boolean;
+        onFontsLoaded?: (loaded: boolean) => void;
+        fontsLoadedTimeout?: number;
+    };
 }
 interface CustomFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
     type: "custom";
@@ -2178,15 +2183,42 @@ declare function createBasicFormBuilder<T extends FieldValues>(): BasicFormBuild
 declare const FormFieldHelpers: {
     /**
      * Create an autocomplete field
+     *
+     * @example
+     * ```tsx
+     * // Simple autocomplete
+     * FormFieldHelpers.autocomplete("country", "Country", options)
+     *
+     * // With placeholder
+     * FormFieldHelpers.autocomplete("country", "Country", options, "Search countries")
+     *
+     * // With full customization
+     * FormFieldHelpers.autocomplete("country", "Country", options, "Search countries", {
+     *   classNames: { base: "custom-autocomplete" },
+     *   allowsCustomValue: true
+     * })
+     * ```
      */
     autocomplete: <T extends FieldValues>(name: Path<T>, label: string, items: {
         label: string;
         value: string | number;
-    }[], placeholder?: string) => ZodFormFieldConfig<T>;
+    }[], placeholder?: string, autocompleteProps?: Omit<React$1.ComponentProps<typeof Autocomplete>, "selectedKey" | "onSelectionChange" | "inputValue" | "onInputChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "children" | "items">) => ZodFormFieldConfig<T>;
     /**
      * Create a checkbox field
+     *
+     * @example
+     * ```tsx
+     * // Simple checkbox
+     * FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter")
+     *
+     * // With full customization
+     * FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter", {
+     *   classNames: { base: "custom-checkbox" },
+     *   size: "lg"
+     * })
+     * ```
      */
-    checkbox: <T extends FieldValues>(name: Path<T>, label: string) => ZodFormFieldConfig<T>;
+    checkbox: <T extends FieldValues>(name: Path<T>, label: string, checkboxProps?: Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
     /**
      * Create a conditional field that shows/hides based on form data
      *
@@ -2236,27 +2268,192 @@ declare const FormFieldHelpers: {
     }) => ZodFormFieldConfig<T>;
     /**
      * Create a date field
+     *
+     * @example
+     * ```tsx
+     * // Simple date field
+     * FormFieldHelpers.date("birthDate", "Birth Date")
+     *
+     * // With full customization
+     * FormFieldHelpers.date("birthDate", "Birth Date", {
+     *   label: "Select your birth date",
+     *   granularity: "day",
+     *   minValue: new CalendarDate(1900, 1, 1)
+     * })
+     * ```
+     */
+    date: <T extends FieldValues>(name: Path<T>, label: string, dateProps?: Omit<React$1.ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
+    /**
+     * Create a file upload field
+     *
+     * @example
+     * ```tsx
+     * // Simple file field
+     * FormFieldHelpers.file("avatar", "Profile Picture")
+     *
+     * // With accept and multiple
+     * FormFieldHelpers.file("avatar", "Profile Picture", {
+     *   accept: "image/*",
+     *   multiple: true
+     * })
+     *
+     * // With full customization
+     * FormFieldHelpers.file("avatar", "Profile Picture", {
+     *   accept: "image/*",
+     *   multiple: false,
+     *   fileProps: { className: "custom-file-input" }
+     * })
+     * ```
+     */
+    file: <T extends FieldValues>(name: Path<T>, label: string, options?: {
+        accept?: string;
+        fileProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
+        multiple?: boolean;
+    }) => ZodFormFieldConfig<T>;
+    /**
+     * Create a font picker field
+     *
+     * @example
+     * ```tsx
+     * // Simple font picker
+     * FormFieldHelpers.fontPicker("font", "Choose Font")
+     *
+     * // With full customization
+     * FormFieldHelpers.fontPicker("font", "Choose Font", {
+     *   showFontPreview: true,
+     *   loadAllVariants: false,
+     *   fontsLoadedTimeout: 5000
+     * })
+     * ```
      */
-    date: <T extends FieldValues>(name: Path<T>, label: string, dateProps?: Record<string, string | number | boolean>) => ZodFormFieldConfig<T>;
+    fontPicker: <T extends FieldValues>(name: Path<T>, label: string, fontPickerProps?: {
+        showFontPreview?: boolean;
+        loadAllVariants?: boolean;
+        onFontsLoaded?: (loaded: boolean) => void;
+        fontsLoadedTimeout?: number;
+    }) => ZodFormFieldConfig<T>;
     /**
      * Create an input field
+     *
+     * @example
+     * ```tsx
+     * // Simple input
+     * FormFieldHelpers.input("name", "Name")
+     *
+     * // With type
+     * FormFieldHelpers.input("email", "Email", "email")
+     *
+     * // With full customization
+     * FormFieldHelpers.input("email", "Email", "email", {
+     *   placeholder: "Enter your email",
+     *   classNames: { input: "custom-input" },
+     *   startContent: <MailIcon />,
+     *   description: "We'll never share your email"
+     * })
+     * ```
+     */
+    input: <T extends FieldValues>(name: Path<T>, label: string, type?: "text" | "email" | "tel" | "password", inputProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
+    /**
+     * Create a radio group field
+     *
+     * @example
+     * ```tsx
+     * // Simple radio group
+     * FormFieldHelpers.radio("gender", "Gender", [
+     *   { label: "Male", value: "male" },
+     *   { label: "Female", value: "female" }
+     * ])
+     *
+     * // With full customization
+     * FormFieldHelpers.radio("gender", "Gender", options, {
+     *   orientation: "horizontal",
+     *   classNames: { base: "custom-radio" }
+     * })
+     * ```
      */
-    input: <T extends FieldValues>(name: Path<T>, label: string, type?: "text" | "email" | "tel" | "password") => ZodFormFieldConfig<T>;
+    radio: <T extends FieldValues>(name: Path<T>, label: string, options: {
+        label: string;
+        value: string | number;
+    }[], radioProps?: Omit<React$1.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">) => ZodFormFieldConfig<T>;
     /**
      * Create a select field
+     *
+     * @example
+     * ```tsx
+     * // Simple select
+     * FormFieldHelpers.select("country", "Country", options)
+     *
+     * // With full customization
+     * FormFieldHelpers.select("country", "Country", options, {
+     *   placeholder: "Select a country",
+     *   classNames: { trigger: "custom-select" },
+     *   selectionMode: "multiple"
+     * })
+     * ```
      */
     select: <T extends FieldValues>(name: Path<T>, label: string, options: {
         label: string;
         value: string | number;
-    }[]) => ZodFormFieldConfig<T>;
+    }[], selectProps?: Omit<React$1.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
+    /**
+     * Create a slider field
+     *
+     * @example
+     * ```tsx
+     * // Simple slider
+     * FormFieldHelpers.slider("rating", "Rating")
+     *
+     * // With full customization
+     * FormFieldHelpers.slider("rating", "Rating", {
+     *   minValue: 1,
+     *   maxValue: 5,
+     *   step: 1,
+     *   showSteps: true,
+     *   classNames: { base: "custom-slider" }
+     * })
+     * ```
+     */
+    slider: <T extends FieldValues>(name: Path<T>, label: string, sliderProps?: Omit<React$1.ComponentProps<typeof Slider>, "value" | "onChange" | "label" | "isDisabled">) => ZodFormFieldConfig<T>;
     /**
      * Create a switch field
+     *
+     * @example
+     * ```tsx
+     * // Simple switch
+     * FormFieldHelpers.switch("notifications", "Enable notifications")
+     *
+     * // With description
+     * FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications")
+     *
+     * // With full customization
+     * FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications", {
+     *   classNames: { base: "custom-switch" },
+     *   size: "lg",
+     *   color: "primary"
+     * })
+     * ```
      */
-    switch: <T extends FieldValues>(name: Path<T>, label: string, description?: string) => ZodFormFieldConfig<T>;
+    switch: <T extends FieldValues>(name: Path<T>, label: string, description?: string, switchProps?: Omit<React$1.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
     /**
      * Create a textarea field
+     *
+     * @example
+     * ```tsx
+     * // Simple textarea
+     * FormFieldHelpers.textarea("message", "Message")
+     *
+     * // With placeholder
+     * FormFieldHelpers.textarea("message", "Message", "Enter your message")
+     *
+     * // With full customization
+     * FormFieldHelpers.textarea("message", "Message", "Enter your message", {
+     *   classNames: { input: "custom-textarea" },
+     *   minRows: 3,
+     *   maxRows: 10
+     * })
+     * ```
      */
-    textarea: <T extends FieldValues>(name: Path<T>, label: string, placeholder?: string) => ZodFormFieldConfig<T>;
+    textarea: <T extends FieldValues>(name: Path<T>, label: string, placeholder?: string, textareaProps?: Omit<React$1.ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
 };
 /**
  * Common field collections

package/dist/react/index.js

@@ -2444,9 +2444,27 @@ function createBasicFormBuilder() {
 var FormFieldHelpers = {
   /**
    * Create an autocomplete field
+   *
+   * @example
+   * ```tsx
+   * // Simple autocomplete
+   * FormFieldHelpers.autocomplete("country", "Country", options)
+   *
+   * // With placeholder
+   * FormFieldHelpers.autocomplete("country", "Country", options, "Search countries")
+   *
+   * // With full customization
+   * FormFieldHelpers.autocomplete("country", "Country", options, "Search countries", {
+   *   classNames: { base: "custom-autocomplete" },
+   *   allowsCustomValue: true
+   * })
+   * ```
    */
-  autocomplete: (name, label, items, placeholder) => ({
-    autocompleteProps: placeholder ? { placeholder } : void 0,
+  autocomplete: (name, label, items, placeholder, autocompleteProps) => ({
+    autocompleteProps: {
+      ...placeholder && { placeholder },
+      ...autocompleteProps
+    },
     label,
     name,
     options: items,
@@ -2454,8 +2472,21 @@ var FormFieldHelpers = {
   }),
   /**
    * Create a checkbox field
+   *
+   * @example
+   * ```tsx
+   * // Simple checkbox
+   * FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter")
+   *
+   * // With full customization
+   * FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter", {
+   *   classNames: { base: "custom-checkbox" },
+   *   size: "lg"
+   * })
+   * ```
    */
-  checkbox: (name, label) => ({
+  checkbox: (name, label, checkboxProps) => ({
+    checkboxProps,
     label,
     name,
     type: "checkbox"
@@ -2517,6 +2548,19 @@ var FormFieldHelpers = {
   },
   /**
    * Create a date field
+   *
+   * @example
+   * ```tsx
+   * // Simple date field
+   * FormFieldHelpers.date("birthDate", "Birth Date")
+   *
+   * // With full customization
+   * FormFieldHelpers.date("birthDate", "Birth Date", {
+   *   label: "Select your birth date",
+   *   granularity: "day",
+   *   minValue: new CalendarDate(1900, 1, 1)
+   * })
+   * ```
    */
   date: (name, label, dateProps) => ({
     dateProps,
@@ -2524,40 +2568,211 @@ var FormFieldHelpers = {
     name,
     type: "date"
   }),
+  /**
+   * Create a file upload field
+   *
+   * @example
+   * ```tsx
+   * // Simple file field
+   * FormFieldHelpers.file("avatar", "Profile Picture")
+   *
+   * // With accept and multiple
+   * FormFieldHelpers.file("avatar", "Profile Picture", {
+   *   accept: "image/*",
+   *   multiple: true
+   * })
+   *
+   * // With full customization
+   * FormFieldHelpers.file("avatar", "Profile Picture", {
+   *   accept: "image/*",
+   *   multiple: false,
+   *   fileProps: { className: "custom-file-input" }
+   * })
+   * ```
+   */
+  file: (name, label, options) => ({
+    accept: options?.accept,
+    fileProps: options?.fileProps,
+    label,
+    multiple: options?.multiple,
+    name,
+    type: "file"
+  }),
+  /**
+   * Create a font picker field
+   *
+   * @example
+   * ```tsx
+   * // Simple font picker
+   * FormFieldHelpers.fontPicker("font", "Choose Font")
+   *
+   * // With full customization
+   * FormFieldHelpers.fontPicker("font", "Choose Font", {
+   *   showFontPreview: true,
+   *   loadAllVariants: false,
+   *   fontsLoadedTimeout: 5000
+   * })
+   * ```
+   */
+  fontPicker: (name, label, fontPickerProps) => ({
+    fontPickerProps,
+    label,
+    name,
+    type: "fontPicker"
+  }),
   /**
    * Create an input field
+   *
+   * @example
+   * ```tsx
+   * // Simple input
+   * FormFieldHelpers.input("name", "Name")
+   *
+   * // With type
+   * FormFieldHelpers.input("email", "Email", "email")
+   *
+   * // With full customization
+   * FormFieldHelpers.input("email", "Email", "email", {
+   *   placeholder: "Enter your email",
+   *   classNames: { input: "custom-input" },
+   *   startContent: <MailIcon />,
+   *   description: "We'll never share your email"
+   * })
+   * ```
    */
-  input: (name, label, type = "text") => ({
-    inputProps: { type },
+  input: (name, label, type, inputProps) => ({
+    inputProps: {
+      type: type || "text",
+      ...inputProps
+    },
     label,
     name,
     type: "input"
   }),
+  /**
+   * Create a radio group field
+   *
+   * @example
+   * ```tsx
+   * // Simple radio group
+   * FormFieldHelpers.radio("gender", "Gender", [
+   *   { label: "Male", value: "male" },
+   *   { label: "Female", value: "female" }
+   * ])
+   *
+   * // With full customization
+   * FormFieldHelpers.radio("gender", "Gender", options, {
+   *   orientation: "horizontal",
+   *   classNames: { base: "custom-radio" }
+   * })
+   * ```
+   */
+  radio: (name, label, options, radioProps) => ({
+    label,
+    name,
+    radioOptions: options,
+    radioProps,
+    type: "radio"
+  }),
   /**
    * Create a select field
+   *
+   * @example
+   * ```tsx
+   * // Simple select
+   * FormFieldHelpers.select("country", "Country", options)
+   *
+   * // With full customization
+   * FormFieldHelpers.select("country", "Country", options, {
+   *   placeholder: "Select a country",
+   *   classNames: { trigger: "custom-select" },
+   *   selectionMode: "multiple"
+   * })
+   * ```
    */
-  select: (name, label, options) => ({
+  select: (name, label, options, selectProps) => ({
     label,
     name,
     options,
+    selectProps,
     type: "select"
   }),
+  /**
+   * Create a slider field
+   *
+   * @example
+   * ```tsx
+   * // Simple slider
+   * FormFieldHelpers.slider("rating", "Rating")
+   *
+   * // With full customization
+   * FormFieldHelpers.slider("rating", "Rating", {
+   *   minValue: 1,
+   *   maxValue: 5,
+   *   step: 1,
+   *   showSteps: true,
+   *   classNames: { base: "custom-slider" }
+   * })
+   * ```
+   */
+  slider: (name, label, sliderProps) => ({
+    label,
+    name,
+    sliderProps,
+    type: "slider"
+  }),
   /**
    * Create a switch field
+   *
+   * @example
+   * ```tsx
+   * // Simple switch
+   * FormFieldHelpers.switch("notifications", "Enable notifications")
+   *
+   * // With description
+   * FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications")
+   *
+   * // With full customization
+   * FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications", {
+   *   classNames: { base: "custom-switch" },
+   *   size: "lg",
+   *   color: "primary"
+   * })
+   * ```
    */
-  switch: (name, label, description) => ({
+  switch: (name, label, description, switchProps) => ({
     description,
     label,
     name,
+    switchProps,
     type: "switch"
   }),
   /**
    * Create a textarea field
+   *
+   * @example
+   * ```tsx
+   * // Simple textarea
+   * FormFieldHelpers.textarea("message", "Message")
+   *
+   * // With placeholder
+   * FormFieldHelpers.textarea("message", "Message", "Enter your message")
+   *
+   * // With full customization
+   * FormFieldHelpers.textarea("message", "Message", "Enter your message", {
+   *   classNames: { input: "custom-textarea" },
+   *   minRows: 3,
+   *   maxRows: 10
+   * })
+   * ```
    */
-  textarea: (name, label, placeholder) => ({
+  textarea: (name, label, placeholder, textareaProps) => ({
     label,
     name,
-    textareaProps: { placeholder },
+    textareaProps: {
+      ...placeholder && { placeholder },
+      ...textareaProps
+    },
     type: "textarea"
   })
 };
@@ -2698,11 +2913,10 @@ function sliderField(name, label, props) {
     type: "slider",
     ...props && {
       sliderProps: {
-        className: props.className || "",
-        disabled: props.isDisabled || false,
-        max: props.max || 100,
-        min: props.min || 0,
-        step: props.step || 1
+        className: props.className,
+        maxValue: props.max ?? 100,
+        minValue: props.min ?? 0,
+        step: props.step ?? 1
       }
     }
   };
@@ -2714,9 +2928,8 @@ function dateField(name, label, props) {
     type: "date",
     ...props && {
       dateProps: {
-        className: props.className || "",
-        disabled: props.isDisabled || false,
-        placeholder: props.placeholder || ""
+        className: props.className,
+        placeholder: props.placeholder
       }
     }
   };
@@ -2738,15 +2951,12 @@ function fileField(name, label, props) {
 }
 function fontPickerField(name, label, props) {
   return {
+    className: props?.className,
+    description: props?.description,
+    fontPickerProps: props?.fontPickerProps,
     label,
     name,
-    type: "fontPicker",
-    ...props && {
-      fontPickerProps: {
-        className: props.className || "",
-        disabled: props.isDisabled || false
-      }
-    }
+    type: "fontPicker"
   };
 }
 function contentField(title, description, options) {
@@ -3068,7 +3278,12 @@ var TypeInferredBuilder = class {
     this.formFields.push({
       label,
       name,
-      sliderProps: { max, min, step, ...fieldOptions },
+      sliderProps: {
+        maxValue: max,
+        minValue: min,
+        step,
+        ...fieldOptions
+      },
       type: "slider"
     });
     return this;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rachelallyson/hero-hook-form",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Typed form helpers that combine React Hook Form and HeroUI components.",
   "author": "Rachel Higley",
   "homepage": "https://rachelallyson.github.io/hero-hook-form/",