@rachelallyson/hero-hook-form 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,362 @@
+import React, { ComponentProps } from 'react';
+import { Button } from '@heroui/react';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, Path, RegisterOptions, Control, UseFormProps, SubmitHandler, UseFormReturn, UseFormSetError } from 'react-hook-form';
+import * as zod from 'zod';
+import * as _internationalized_date from '@internationalized/date';
+import { CalendarDate } from '@internationalized/date';
+import { Checkbox } from '@heroui/checkbox';
+import { Input, Textarea } from '@heroui/input';
+import { RadioGroup } from '@heroui/radio';
+import { Select } from '@heroui/select';
+import { Switch } from '@heroui/switch';
+import { DateInput } from '@heroui/date-input';
+import { Slider } from '@heroui/slider';
+import { Button as Button$1 } from '@heroui/button';
+
+interface FieldBaseProps<TFieldValues extends FieldValues, TValue> {
+    name: Path<TFieldValues>;
+    label?: string;
+    description?: string;
+    className?: string;
+    /** Additional validation rules */
+    rules?: RegisterOptions<TFieldValues, Path<TFieldValues>>;
+    /** Provide a default value when the form hasn't set one yet. */
+    defaultValue?: TValue;
+    /** Disable the input */
+    isDisabled?: boolean;
+}
+interface WithControl<TFieldValues extends FieldValues> {
+    control: Control<TFieldValues>;
+}
+interface BaseFormFieldConfig<TFieldValues extends FieldValues> {
+    name: Path<TFieldValues>;
+    label?: string;
+    description?: string;
+    className?: string;
+    isDisabled?: boolean;
+    rules?: RegisterOptions<TFieldValues, Path<TFieldValues>>;
+    condition?: (values: Partial<TFieldValues>) => boolean;
+    group?: string;
+}
+interface StringFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
+    type: "input" | "textarea" | "select";
+    defaultValue?: string;
+    inputProps?: Omit<ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
+    textareaProps?: Omit<ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
+    selectProps?: Omit<ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
+    options?: {
+        label: string;
+        value: string | number;
+    }[];
+}
+interface BooleanFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
+    type: "checkbox" | "switch";
+    defaultValue?: boolean;
+    checkboxProps?: Omit<ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
+    switchProps?: Omit<ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
+}
+interface RadioFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
+    type: "radio";
+    defaultValue?: string;
+    radioProps?: Omit<ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">;
+    radioOptions?: {
+        label: string;
+        value: string | number;
+    }[];
+}
+interface SliderFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
+    type: "slider";
+    defaultValue?: number;
+    sliderProps?: Record<string, string | number | boolean>;
+}
+interface DateFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
+    type: "date";
+    defaultValue?: _internationalized_date.CalendarDate | null;
+    dateProps?: Record<string, string | number | boolean>;
+}
+interface FileFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
+    type: "file";
+    defaultValue?: FileList | null;
+    fileProps?: Record<string, string | number | boolean>;
+    multiple?: boolean;
+    accept?: string;
+}
+type FormFieldConfig<TFieldValues extends FieldValues> = StringFieldConfig<TFieldValues> | BooleanFieldConfig<TFieldValues> | RadioFieldConfig<TFieldValues> | SliderFieldConfig<TFieldValues> | DateFieldConfig<TFieldValues> | FileFieldConfig<TFieldValues>;
+interface FormConfig<TFieldValues extends FieldValues> {
+    fields: FormFieldConfig<TFieldValues>[];
+    layout?: "vertical" | "horizontal" | "grid" | "custom";
+    columns?: 1 | 2 | 3 | 4;
+    spacing?: "sm" | "md" | "lg" | "xl";
+    title?: string;
+    subtitle?: string;
+    showResetButton?: boolean;
+    resetButtonText?: string;
+    submitButtonText?: string;
+    className?: string;
+    defaultValues?: Partial<TFieldValues>;
+}
+type ZodFormFieldConfig<TFieldValues extends FieldValues> = Omit<StringFieldConfig<TFieldValues>, "rules"> | Omit<BooleanFieldConfig<TFieldValues>, "rules"> | Omit<RadioFieldConfig<TFieldValues>, "rules"> | Omit<SliderFieldConfig<TFieldValues>, "rules"> | Omit<DateFieldConfig<TFieldValues>, "rules"> | Omit<FileFieldConfig<TFieldValues>, "rules">;
+interface ZodFormConfig<TFieldValues extends FieldValues> extends UseFormProps<TFieldValues> {
+    schema?: zod.ZodSchema<TFieldValues>;
+    fields: ZodFormFieldConfig<TFieldValues>[];
+}
+interface FormValidationError {
+    message: string;
+    field?: string;
+}
+interface FormSubmissionState {
+    isSubmitting: boolean;
+    isSubmitted: boolean;
+    isSuccess: boolean;
+    error?: string;
+}
+interface FormStep<TFieldValues extends FieldValues> {
+    id: string;
+    title: string;
+    description?: string;
+    fields: FormFieldConfig<TFieldValues>[];
+    validation?: (values: Partial<TFieldValues>) => boolean;
+}
+interface WizardFormConfig<TFieldValues extends FieldValues> {
+    steps: FormStep<TFieldValues>[];
+    allowStepNavigation?: boolean;
+    showStepProgress?: boolean;
+}
+interface ConditionalValidation<TFieldValues extends FieldValues> {
+    when: Path<TFieldValues>;
+    is: string | number | boolean | null | undefined;
+    then: RegisterOptions<TFieldValues, Path<TFieldValues>>;
+    otherwise?: RegisterOptions<TFieldValues, Path<TFieldValues>>;
+}
+interface FieldGroup<TFieldValues extends FieldValues> {
+    id: string;
+    title?: string;
+    description?: string;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    fields: FormFieldConfig<TFieldValues>[];
+}
+
+interface FormProps$1<T extends FieldValues> {
+    className?: string;
+    columns?: 1 | 2 | 3;
+    fields: FormFieldConfig<T>[];
+    layout?: "vertical" | "horizontal" | "grid";
+    onError?: (error: FormValidationError) => void;
+    onSubmit: SubmitHandler<T>;
+    onSuccess?: (data: T) => void;
+    resetButtonText?: string;
+    showResetButton?: boolean;
+    spacing?: "2" | "4" | "6" | "8" | "lg";
+    submitButtonProps?: Partial<React.ComponentProps<typeof Button>>;
+    submitButtonText?: string;
+    subtitle?: string;
+    title?: string;
+    defaultValues?: Partial<T>;
+}
+declare function ConfigurableForm<T extends FieldValues>({ className, columns, defaultValues, fields, layout, onError, onSubmit, onSuccess, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: FormProps$1<T>): React.JSX.Element;
+
+interface FormFieldProps<TFieldValues extends FieldValues> {
+    config: FormFieldConfig<TFieldValues>;
+    form: UseFormReturn<TFieldValues>;
+    submissionState: FormSubmissionState;
+}
+declare function FormField<TFieldValues extends FieldValues>({ config, form, submissionState, }: FormFieldProps<TFieldValues>): React.JSX.Element | null;
+
+type CheckboxFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, boolean> & WithControl<TFieldValues> & {
+    checkboxProps?: Omit<React.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
+};
+declare function CheckboxField<TFieldValues extends FieldValues>(props: CheckboxFieldProps<TFieldValues>): React.JSX.Element;
+
+type DateFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, CalendarDate | null> & WithControl<TFieldValues> & {
+    dateProps?: Omit<React.ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
+    transform?: (value: CalendarDate | null) => CalendarDate | null;
+};
+declare function DateField<TFieldValues extends FieldValues>(props: DateFieldProps<TFieldValues>): React.JSX.Element;
+
+type FileFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, FileList | null> & WithControl<TFieldValues> & {
+    fileProps?: Omit<React.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
+    transform?: (value: FileList | null) => FileList | null;
+    multiple?: boolean;
+    accept?: string;
+};
+declare function FileField<TFieldValues extends FieldValues>(props: FileFieldProps<TFieldValues>): React.JSX.Element;
+
+type InputFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, string> & WithControl<TFieldValues> & {
+    inputProps?: Omit<React.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
+    transform?: (value: string) => string;
+};
+declare function InputField<TFieldValues extends FieldValues>(props: InputFieldProps<TFieldValues>): React.JSX.Element;
+
+interface RadioOption<TValue extends string | number> {
+    label: string;
+    value: TValue;
+    description?: string;
+    disabled?: boolean;
+}
+type RadioGroupFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
+    options: readonly RadioOption<TValue>[];
+    radioGroupProps?: Omit<React.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">;
+};
+declare function RadioGroupField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: RadioGroupFieldProps<TFieldValues, TValue>): React.JSX.Element;
+
+interface SelectOption<TValue extends string | number> {
+    label: string;
+    value: TValue;
+    description?: string;
+    disabled?: boolean;
+}
+type SelectFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
+    options: readonly SelectOption<TValue>[];
+    placeholder?: string;
+    selectProps?: Omit<React.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
+};
+declare function SelectField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: SelectFieldProps<TFieldValues, TValue>): React.JSX.Element;
+
+type SliderFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, number> & WithControl<TFieldValues> & {
+    sliderProps?: Omit<React.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
+    transform?: (value: number) => number;
+};
+declare function SliderField<TFieldValues extends FieldValues>(props: SliderFieldProps<TFieldValues>): React.JSX.Element;
+
+type SwitchFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, boolean> & WithControl<TFieldValues> & {
+    switchProps?: Omit<React.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">;
+};
+declare function SwitchField<TFieldValues extends FieldValues>(props: SwitchFieldProps<TFieldValues>): React.JSX.Element;
+
+type TextareaFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, string> & WithControl<TFieldValues> & {
+    textareaProps?: Omit<React.ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
+};
+declare function TextareaField<TFieldValues extends FieldValues>(props: TextareaFieldProps<TFieldValues>): React.JSX.Element;
+
+interface UseFormHelperOptions<T extends FieldValues> {
+    onError?: (error: FormValidationError) => void;
+    onSubmit: SubmitHandler<T>;
+    onSuccess?: (data: T) => void;
+    defaultValues?: Partial<T>;
+    methods?: UseFormReturn<T>;
+}
+declare function useFormHelper<T extends FieldValues>({ defaultValues, methods, onError, onSubmit, onSuccess, }: UseFormHelperOptions<T>): {
+    error: string | undefined;
+    form: UseFormReturn<T>;
+    handleSubmit: () => Promise<void>;
+    isSubmitted: boolean;
+    isSubmitting: boolean;
+    isSuccess: boolean;
+    resetForm: () => void;
+    submissionState: FormSubmissionState;
+};
+
+type InputProps = React.ComponentProps<typeof Input>;
+type TextareaProps = React.ComponentProps<typeof Textarea>;
+type SelectProps = React.ComponentProps<typeof Select>;
+type SharedTextLikeColor = Extract<InputProps["color"], Extract<TextareaProps["color"], SelectProps["color"]>>;
+type SharedTextLikeSize = Extract<InputProps["size"], Extract<TextareaProps["size"], SelectProps["size"]>>;
+type SharedTextLikeVariant = Extract<InputProps["variant"], Extract<TextareaProps["variant"], SelectProps["variant"]>>;
+type SharedTextLikeRadius = Extract<InputProps["radius"], Extract<TextareaProps["radius"], SelectProps["radius"]>>;
+type SharedTextLikeLabelPlacement = Extract<InputProps["labelPlacement"], Extract<TextareaProps["labelPlacement"], SelectProps["labelPlacement"]>>;
+type CommonFieldDefaults = Partial<{
+    color: SharedTextLikeColor;
+    size: SharedTextLikeSize;
+    variant: SharedTextLikeVariant;
+    radius: SharedTextLikeRadius;
+    labelPlacement: SharedTextLikeLabelPlacement;
+}>;
+type InputDefaults = Partial<Omit<InputProps, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
+type TextareaDefaults = Partial<Omit<TextareaProps, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
+type CheckboxDefaults = Partial<Omit<React.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">>;
+type RadioGroupDefaults = Partial<Omit<React.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">>;
+type SelectDefaults = Partial<Omit<SelectProps, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
+type DateInputDefaults = Partial<Omit<React.ComponentProps<typeof DateInput>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
+type SliderDefaults = Partial<Omit<React.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
+type SwitchDefaults = Partial<Omit<React.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">>;
+type ButtonDefaults = Partial<Omit<React.ComponentProps<typeof Button$1>, "type" | "isLoading">>;
+interface HeroHookFormDefaultsConfig {
+    common?: CommonFieldDefaults;
+    input?: InputDefaults;
+    textarea?: TextareaDefaults;
+    checkbox?: CheckboxDefaults;
+    radioGroup?: RadioGroupDefaults;
+    select?: SelectDefaults;
+    dateInput?: DateInputDefaults;
+    slider?: SliderDefaults;
+    switch?: SwitchDefaults;
+    submitButton?: ButtonDefaults;
+}
+interface HeroHookFormProviderProps {
+    children: React.ReactNode;
+    defaults?: HeroHookFormDefaultsConfig;
+}
+declare function HeroHookFormProvider(props: HeroHookFormProviderProps): React.JSX.Element;
+declare function useHeroHookFormDefaults(): Required<Pick<HeroHookFormDefaultsConfig, "input" | "textarea" | "checkbox" | "radioGroup" | "select" | "dateInput" | "slider" | "switch" | "submitButton">>;
+
+interface FormProps<TFieldValues extends FieldValues> {
+    methods: UseFormReturn<TFieldValues>;
+    onSubmit: SubmitHandler<TFieldValues>;
+    className?: string;
+    children: React.ReactNode;
+    id?: string;
+    noValidate?: boolean;
+}
+declare function FormProvider<TFieldValues extends FieldValues>(props: FormProps<TFieldValues>): React.JSX.Element;
+
+interface SubmitButtonProps {
+    children: React.ReactNode;
+    isLoading?: boolean;
+    buttonProps?: Omit<React.ComponentProps<typeof Button$1>, "type" | "isLoading">;
+}
+declare function SubmitButton(props: SubmitButtonProps): React.JSX.Element;
+
+interface ServerFieldError<TFieldValues extends FieldValues> {
+    path: Path<TFieldValues>;
+    message: string;
+    type?: string;
+}
+interface ServerFormError<TFieldValues extends FieldValues> {
+    message?: string;
+    fieldErrors?: readonly ServerFieldError<TFieldValues>[];
+}
+declare function applyServerErrors<TFieldValues extends FieldValues>(setError: UseFormSetError<TFieldValues>, serverError: ServerFormError<TFieldValues>): void;
+
+interface ZodFormProps<T extends FieldValues> {
+    className?: string;
+    columns?: 1 | 2 | 3;
+    config: ZodFormConfig<T>;
+    layout?: "vertical" | "horizontal" | "grid";
+    onError?: (error: FormValidationError) => void;
+    onSubmit: SubmitHandler<T>;
+    onSuccess?: (data: T) => void;
+    resetButtonText?: string;
+    showResetButton?: boolean;
+    spacing?: "2" | "4" | "6" | "8" | "lg";
+    submitButtonProps?: Partial<React.ComponentProps<typeof Button>>;
+    submitButtonText?: string;
+    subtitle?: string;
+    title?: string;
+}
+declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): React.JSX.Element;
+
+/**
+ * Hook for using Zod validation with React Hook Form
+ * This hook is only available when zod and @hookform/resolvers are installed
+ *
+ * TODO: Remove type assertion when @hookform/resolvers adds official Zod v4 support
+ *
+ * Current issue: @hookform/resolvers v5.2.1 is not compatible with Zod v4 due to
+ * internal type structure changes. The resolver expects Zod3Type<Output, Input> but
+ * Zod v4 uses a different internal structure (_zod.output vs _output).
+ *
+ * Related issues:
+ * - GitHub Issue: https://github.com/react-hook-form/resolvers/issues/813
+ * - GitHub PR: https://github.com/react-hook-form/resolvers/pull/803
+ *
+ * Workaround: Use type assertion until official support is added
+ */
+/**
+ * Hook for using Zod validation with React Hook Form
+ * Uses Zod's built-in type inference to avoid type assertion issues
+ */
+declare function useZodForm<TFieldValues extends FieldValues>(config: ZodFormConfig<TFieldValues>): react_hook_form.UseFormReturn<TFieldValues, any, TFieldValues>;
+
+export { type BaseFormFieldConfig, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, type CommonFieldDefaults, type ConditionalValidation, ConfigurableForm, DateField, type DateFieldConfig, type DateFieldProps, type DateInputDefaults, type FieldBaseProps, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, type FormConfig, FormField, type FormFieldConfig, type FormProps, FormProvider, type FormStep, type FormSubmissionState, type FormValidationError, type HeroHookFormDefaultsConfig, HeroHookFormProvider, type HeroHookFormProviderProps, type InputDefaults, InputField, type InputFieldProps, type RadioFieldConfig, type RadioGroupDefaults, RadioGroupField, type RadioGroupFieldProps, type SelectDefaults, SelectField, type SelectFieldProps, type ServerFieldError, type ServerFormError, type SliderDefaults, SliderField, type SliderFieldConfig, type SliderFieldProps, type StringFieldConfig, SubmitButton, type SubmitButtonProps, type SwitchDefaults, SwitchField, type SwitchFieldProps, type TextareaDefaults, TextareaField, type TextareaFieldProps, type WithControl, type WizardFormConfig, ZodForm, type ZodFormConfig, type ZodFormFieldConfig, applyServerErrors, useFormHelper, useHeroHookFormDefaults, useZodForm };