@rachelallyson/hero-hook-form 2.7.0 → 2.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/cypress/index.d.ts +62 -71
- package/dist/cypress/index.js +583 -70
- package/dist/index.d.ts +504 -78
- package/dist/index.js +1390 -671
- package/package.json +15 -12
- package/dist/react/index.d.ts +0 -3777
- package/dist/react/index.js +0 -4235
package/dist/react/index.d.ts
DELETED
|
@@ -1,3777 +0,0 @@
|
|
|
1
|
-
import React$1, { ComponentProps } from 'react';
|
|
2
|
-
import { Input, Textarea, Select, Autocomplete, Checkbox, Switch, RadioGroup, Slider, DateInput, Button } from '@heroui/react';
|
|
3
|
-
import * as react_hook_form from 'react-hook-form';
|
|
4
|
-
import { FieldValues, Path, RegisterOptions, Control, UseFormReturn, FieldErrors, UseFormProps, SubmitHandler, UseFormSetError, DefaultValues, ArrayPath, FieldArrayWithId } from 'react-hook-form';
|
|
5
|
-
export { UseFormReturn, useFormContext } from 'react-hook-form';
|
|
6
|
-
import * as zod from 'zod';
|
|
7
|
-
import { z, ZodSchema } from 'zod';
|
|
8
|
-
import * as _internationalized_date from '@internationalized/date';
|
|
9
|
-
import { CalendarDate } from '@internationalized/date';
|
|
10
|
-
|
|
11
|
-
interface FieldBaseProps<TFieldValues extends FieldValues, TValue> {
|
|
12
|
-
name: Path<TFieldValues>;
|
|
13
|
-
label?: string;
|
|
14
|
-
description?: string;
|
|
15
|
-
className?: string;
|
|
16
|
-
/** Additional validation rules */
|
|
17
|
-
rules?: RegisterOptions<TFieldValues, Path<TFieldValues>>;
|
|
18
|
-
/** Provide a default value when the form hasn't set one yet. */
|
|
19
|
-
defaultValue?: TValue;
|
|
20
|
-
/** Disable the input */
|
|
21
|
-
isDisabled?: boolean;
|
|
22
|
-
}
|
|
23
|
-
interface WithControl<TFieldValues extends FieldValues> {
|
|
24
|
-
control: Control<TFieldValues>;
|
|
25
|
-
}
|
|
26
|
-
interface BaseFormFieldConfig<TFieldValues extends FieldValues> {
|
|
27
|
-
name: Path<TFieldValues>;
|
|
28
|
-
label?: string;
|
|
29
|
-
description?: string;
|
|
30
|
-
className?: string;
|
|
31
|
-
isDisabled?: boolean;
|
|
32
|
-
rules?: RegisterOptions<TFieldValues, Path<TFieldValues>>;
|
|
33
|
-
condition?: (values: Partial<TFieldValues>) => boolean;
|
|
34
|
-
dependsOn?: Path<TFieldValues>;
|
|
35
|
-
dependsOnValue?: unknown;
|
|
36
|
-
group?: string;
|
|
37
|
-
ariaLabel?: string;
|
|
38
|
-
ariaDescribedBy?: string;
|
|
39
|
-
}
|
|
40
|
-
interface StringFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
41
|
-
type: "input" | "textarea" | "select" | "autocomplete";
|
|
42
|
-
defaultValue?: string;
|
|
43
|
-
inputProps?: Omit<ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
44
|
-
textareaProps?: Omit<ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
45
|
-
selectProps?: Omit<ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
46
|
-
autocompleteProps?: Omit<ComponentProps<typeof Autocomplete>, "selectedKey" | "onSelectionChange" | "inputValue" | "onInputChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "children" | "items">;
|
|
47
|
-
options?: {
|
|
48
|
-
label: string;
|
|
49
|
-
value: string | number;
|
|
50
|
-
}[];
|
|
51
|
-
}
|
|
52
|
-
interface BooleanFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
53
|
-
type: "checkbox" | "switch";
|
|
54
|
-
defaultValue?: boolean;
|
|
55
|
-
checkboxProps?: Omit<ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
56
|
-
switchProps?: Omit<ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
57
|
-
}
|
|
58
|
-
interface RadioFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
59
|
-
type: "radio";
|
|
60
|
-
defaultValue?: string;
|
|
61
|
-
radioProps?: Omit<ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">;
|
|
62
|
-
radioOptions?: {
|
|
63
|
-
label: string;
|
|
64
|
-
value: string | number;
|
|
65
|
-
}[];
|
|
66
|
-
}
|
|
67
|
-
interface SliderFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
68
|
-
type: "slider";
|
|
69
|
-
defaultValue?: number;
|
|
70
|
-
sliderProps?: Omit<ComponentProps<typeof Slider>, "value" | "onChange" | "label" | "isDisabled">;
|
|
71
|
-
}
|
|
72
|
-
interface DateFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
73
|
-
type: "date";
|
|
74
|
-
defaultValue?: _internationalized_date.CalendarDate | null;
|
|
75
|
-
dateProps?: Omit<ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
76
|
-
}
|
|
77
|
-
interface FileFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
78
|
-
type: "file";
|
|
79
|
-
defaultValue?: FileList | null;
|
|
80
|
-
fileProps?: Omit<ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
|
|
81
|
-
multiple?: boolean;
|
|
82
|
-
accept?: string;
|
|
83
|
-
}
|
|
84
|
-
interface FontPickerFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
85
|
-
type: "fontPicker";
|
|
86
|
-
defaultValue?: string;
|
|
87
|
-
fontPickerProps?: {
|
|
88
|
-
showFontPreview?: boolean;
|
|
89
|
-
loadAllVariants?: boolean;
|
|
90
|
-
onFontsLoaded?: (loaded: boolean) => void;
|
|
91
|
-
fontsLoadedTimeout?: number;
|
|
92
|
-
};
|
|
93
|
-
}
|
|
94
|
-
interface CustomFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
95
|
-
type: "custom";
|
|
96
|
-
render: (field: {
|
|
97
|
-
name: Path<TFieldValues>;
|
|
98
|
-
control: Control<TFieldValues>;
|
|
99
|
-
form: UseFormReturn<TFieldValues>;
|
|
100
|
-
errors: FieldErrors<TFieldValues>;
|
|
101
|
-
isSubmitting: boolean;
|
|
102
|
-
}) => React.ReactNode;
|
|
103
|
-
}
|
|
104
|
-
interface ConditionalFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
105
|
-
type: "conditional";
|
|
106
|
-
condition: (formData: Partial<TFieldValues>) => boolean;
|
|
107
|
-
field: ZodFormFieldConfig<TFieldValues>;
|
|
108
|
-
}
|
|
109
|
-
/**
|
|
110
|
-
* Field array config for dynamic repeating field groups.
|
|
111
|
-
*
|
|
112
|
-
* @description
|
|
113
|
-
* Configuration for field arrays that support reordering, custom rendering,
|
|
114
|
-
* default values, and conditional fields within array items.
|
|
115
|
-
*
|
|
116
|
-
* @template TFieldValues - The form data type
|
|
117
|
-
*/
|
|
118
|
-
interface FieldArrayConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
119
|
-
type: "fieldArray";
|
|
120
|
-
/** Field configurations for each array item */
|
|
121
|
-
fields: ZodFormFieldConfig<TFieldValues>[];
|
|
122
|
-
/** Minimum number of items (default: 0) */
|
|
123
|
-
min?: number;
|
|
124
|
-
/** Maximum number of items (default: 10) */
|
|
125
|
-
max?: number;
|
|
126
|
-
/** Add button text (default: "Add Item") */
|
|
127
|
-
addButtonText?: string;
|
|
128
|
-
/** Remove button text (default: "Remove") */
|
|
129
|
-
removeButtonText?: string;
|
|
130
|
-
/** Enable reordering of array items with up/down buttons (default: false) */
|
|
131
|
-
enableReordering?: boolean;
|
|
132
|
-
/** Custom text for reorder buttons */
|
|
133
|
-
reorderButtonText?: {
|
|
134
|
-
/** Text for move up button (default: "↑") */
|
|
135
|
-
up?: string;
|
|
136
|
-
/** Text for move down button (default: "↓") */
|
|
137
|
-
down?: string;
|
|
138
|
-
};
|
|
139
|
-
/** Function to create default item when adding new array item */
|
|
140
|
-
defaultItem?: () => any;
|
|
141
|
-
/** Custom render function for array items */
|
|
142
|
-
renderItem?: (props: {
|
|
143
|
-
/** Item index (0-based) */
|
|
144
|
-
index: number;
|
|
145
|
-
/** Field array item with id */
|
|
146
|
-
field: {
|
|
147
|
-
id: string;
|
|
148
|
-
[key: string]: any;
|
|
149
|
-
};
|
|
150
|
-
/** All fields in the array */
|
|
151
|
-
fields: {
|
|
152
|
-
id: string;
|
|
153
|
-
[key: string]: any;
|
|
154
|
-
}[];
|
|
155
|
-
/** Rendered field elements */
|
|
156
|
-
children: React.ReactNode;
|
|
157
|
-
/** Remove this item */
|
|
158
|
-
onRemove: () => void;
|
|
159
|
-
/** Move item up */
|
|
160
|
-
onMoveUp: () => void;
|
|
161
|
-
/** Move item down */
|
|
162
|
-
onMoveDown: () => void;
|
|
163
|
-
/** Whether item can be removed */
|
|
164
|
-
canRemove: boolean;
|
|
165
|
-
/** Whether item can move up */
|
|
166
|
-
canMoveUp: boolean;
|
|
167
|
-
/** Whether item can move down */
|
|
168
|
-
canMoveDown: boolean;
|
|
169
|
-
}) => React.ReactNode;
|
|
170
|
-
/** Custom render function for add button */
|
|
171
|
-
renderAddButton?: (props: {
|
|
172
|
-
/** Add new item */
|
|
173
|
-
onAdd: () => void;
|
|
174
|
-
/** Whether new item can be added */
|
|
175
|
-
canAdd: boolean;
|
|
176
|
-
}) => React.ReactNode;
|
|
177
|
-
}
|
|
178
|
-
interface DynamicSectionConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
179
|
-
type: "dynamicSection";
|
|
180
|
-
title?: string;
|
|
181
|
-
description?: string;
|
|
182
|
-
condition: (formData: Partial<TFieldValues>) => boolean;
|
|
183
|
-
fields: ZodFormFieldConfig<TFieldValues>[];
|
|
184
|
-
}
|
|
185
|
-
interface ContentFieldConfig<TFieldValues extends FieldValues = FieldValues> {
|
|
186
|
-
type: "content";
|
|
187
|
-
name?: string;
|
|
188
|
-
title?: string;
|
|
189
|
-
description?: string;
|
|
190
|
-
render?: (field: {
|
|
191
|
-
form: UseFormReturn<TFieldValues>;
|
|
192
|
-
errors: FieldErrors<TFieldValues>;
|
|
193
|
-
isSubmitting: boolean;
|
|
194
|
-
}) => React.ReactNode;
|
|
195
|
-
className?: string;
|
|
196
|
-
}
|
|
197
|
-
type FormFieldConfig<TFieldValues extends FieldValues> = StringFieldConfig<TFieldValues> | BooleanFieldConfig<TFieldValues> | RadioFieldConfig<TFieldValues> | SliderFieldConfig<TFieldValues> | DateFieldConfig<TFieldValues> | FileFieldConfig<TFieldValues> | FontPickerFieldConfig<TFieldValues> | CustomFieldConfig<TFieldValues> | ConditionalFieldConfig<TFieldValues> | FieldArrayConfig<TFieldValues> | DynamicSectionConfig<TFieldValues> | ContentFieldConfig<TFieldValues>;
|
|
198
|
-
interface FormConfig<TFieldValues extends FieldValues> {
|
|
199
|
-
fields: FormFieldConfig<TFieldValues>[];
|
|
200
|
-
layout?: "vertical" | "horizontal" | "grid" | "custom";
|
|
201
|
-
columns?: 1 | 2 | 3 | 4;
|
|
202
|
-
spacing?: "sm" | "md" | "lg" | "xl";
|
|
203
|
-
title?: string;
|
|
204
|
-
subtitle?: string;
|
|
205
|
-
showResetButton?: boolean;
|
|
206
|
-
resetButtonText?: string;
|
|
207
|
-
submitButtonText?: string;
|
|
208
|
-
className?: string;
|
|
209
|
-
defaultValues?: Partial<TFieldValues>;
|
|
210
|
-
}
|
|
211
|
-
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"> | Omit<FontPickerFieldConfig<TFieldValues>, "rules"> | Omit<CustomFieldConfig<TFieldValues>, "rules"> | Omit<ConditionalFieldConfig<TFieldValues>, "rules"> | Omit<FieldArrayConfig<TFieldValues>, "rules"> | Omit<DynamicSectionConfig<TFieldValues>, "rules"> | ContentFieldConfig<TFieldValues>;
|
|
212
|
-
interface ZodFormConfig<TFieldValues extends FieldValues> extends UseFormProps<TFieldValues> {
|
|
213
|
-
schema: zod.ZodSchema<TFieldValues>;
|
|
214
|
-
fields: ZodFormFieldConfig<TFieldValues>[];
|
|
215
|
-
onError?: (errors: FieldErrors<TFieldValues>) => void;
|
|
216
|
-
errorDisplay?: "inline" | "toast" | "modal" | "none";
|
|
217
|
-
}
|
|
218
|
-
interface FormValidationError {
|
|
219
|
-
message: string;
|
|
220
|
-
field?: string;
|
|
221
|
-
}
|
|
222
|
-
interface FormSubmissionState {
|
|
223
|
-
isSubmitting: boolean;
|
|
224
|
-
isSubmitted: boolean;
|
|
225
|
-
isSuccess: boolean;
|
|
226
|
-
error?: string;
|
|
227
|
-
}
|
|
228
|
-
interface FormStep<TFieldValues extends FieldValues> {
|
|
229
|
-
id: string;
|
|
230
|
-
title: string;
|
|
231
|
-
description?: string;
|
|
232
|
-
fields: FormFieldConfig<TFieldValues>[];
|
|
233
|
-
validation?: (values: Partial<TFieldValues>) => boolean;
|
|
234
|
-
}
|
|
235
|
-
interface WizardFormConfig<TFieldValues extends FieldValues> {
|
|
236
|
-
steps: FormStep<TFieldValues>[];
|
|
237
|
-
allowStepNavigation?: boolean;
|
|
238
|
-
showStepProgress?: boolean;
|
|
239
|
-
}
|
|
240
|
-
interface ConditionalValidation<TFieldValues extends FieldValues> {
|
|
241
|
-
when: Path<TFieldValues>;
|
|
242
|
-
is: string | number | boolean | null | undefined;
|
|
243
|
-
then: RegisterOptions<TFieldValues, Path<TFieldValues>>;
|
|
244
|
-
otherwise?: RegisterOptions<TFieldValues, Path<TFieldValues>>;
|
|
245
|
-
}
|
|
246
|
-
interface FieldGroup<TFieldValues extends FieldValues> {
|
|
247
|
-
id: string;
|
|
248
|
-
title?: string;
|
|
249
|
-
description?: string;
|
|
250
|
-
collapsible?: boolean;
|
|
251
|
-
defaultCollapsed?: boolean;
|
|
252
|
-
fields: FormFieldConfig<TFieldValues>[];
|
|
253
|
-
}
|
|
254
|
-
interface ValidationUtils {
|
|
255
|
-
createMinLengthSchema: (min: number, fieldName: string) => zod.ZodString;
|
|
256
|
-
createMaxLengthSchema: (max: number, fieldName: string) => zod.ZodString;
|
|
257
|
-
createEmailSchema: () => zod.ZodString;
|
|
258
|
-
createRequiredSchema: (fieldName: string) => zod.ZodString;
|
|
259
|
-
createUrlSchema: () => zod.ZodString;
|
|
260
|
-
createPhoneSchema: () => zod.ZodString;
|
|
261
|
-
}
|
|
262
|
-
interface FormTestUtils<TFieldValues extends FieldValues> {
|
|
263
|
-
getField: (name: Path<TFieldValues>) => {
|
|
264
|
-
value: unknown;
|
|
265
|
-
error: unknown;
|
|
266
|
-
isDirty: boolean;
|
|
267
|
-
isTouched: boolean;
|
|
268
|
-
};
|
|
269
|
-
submitForm: () => Promise<void>;
|
|
270
|
-
resetForm: () => void;
|
|
271
|
-
getFormState: () => {
|
|
272
|
-
values: TFieldValues;
|
|
273
|
-
errors: FieldErrors<TFieldValues>;
|
|
274
|
-
isSubmitting: boolean;
|
|
275
|
-
isSubmitted: boolean;
|
|
276
|
-
isSuccess: boolean;
|
|
277
|
-
};
|
|
278
|
-
setFieldValue: (name: Path<TFieldValues>, value: unknown) => void;
|
|
279
|
-
triggerValidation: (name?: Path<TFieldValues>) => Promise<boolean>;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
/**
|
|
283
|
-
* Props for the Form component.
|
|
284
|
-
*
|
|
285
|
-
* @template T - The form data type
|
|
286
|
-
*/
|
|
287
|
-
interface FormProps$1<T extends FieldValues> {
|
|
288
|
-
className?: string;
|
|
289
|
-
columns?: 1 | 2 | 3;
|
|
290
|
-
fields: FormFieldConfig<T>[];
|
|
291
|
-
layout?: "vertical" | "horizontal" | "grid";
|
|
292
|
-
onError?: (error: FormValidationError) => void;
|
|
293
|
-
onSubmit: SubmitHandler<T>;
|
|
294
|
-
onSuccess?: (data: T) => void;
|
|
295
|
-
resetButtonText?: string;
|
|
296
|
-
showResetButton?: boolean;
|
|
297
|
-
spacing?: "2" | "4" | "6" | "8" | "lg";
|
|
298
|
-
submitButtonProps?: Partial<React$1.ComponentProps<typeof Button>>;
|
|
299
|
-
submitButtonText?: string;
|
|
300
|
-
subtitle?: string;
|
|
301
|
-
title?: string;
|
|
302
|
-
defaultValues?: Partial<T>;
|
|
303
|
-
}
|
|
304
|
-
/**
|
|
305
|
-
* Base form component for building forms without Zod validation.
|
|
306
|
-
*
|
|
307
|
-
* @description
|
|
308
|
-
* This component provides a flexible form solution using React Hook Form
|
|
309
|
-
* without requiring Zod schemas. It's useful when you need more control over
|
|
310
|
-
* validation or want to use React Hook Form's built-in validation rules.
|
|
311
|
-
*
|
|
312
|
-
* @template T - The form data type
|
|
313
|
-
*
|
|
314
|
-
* @param {FormProps<T>} props - Component props
|
|
315
|
-
* @param {FormFieldConfig<T>[]} props.fields - Array of field configurations
|
|
316
|
-
* @param {SubmitHandler<T>} props.onSubmit - Submit handler function
|
|
317
|
-
* @param {Partial<T>} [props.defaultValues] - Default form values
|
|
318
|
-
* @param {string} [props.title] - Optional form title
|
|
319
|
-
* @param {string} [props.subtitle] - Optional form subtitle
|
|
320
|
-
* @param {"vertical"|"horizontal"|"grid"} [props.layout="vertical"] - Form layout
|
|
321
|
-
* @param {1|2|3} [props.columns=1] - Number of columns for grid layout
|
|
322
|
-
* @param {"2"|"4"|"6"|"8"|"lg"} [props.spacing="4"] - Spacing between fields
|
|
323
|
-
* @param {string} [props.submitButtonText="Submit"] - Submit button text
|
|
324
|
-
* @param {boolean} [props.showResetButton=false] - Whether to show reset button
|
|
325
|
-
* @param {(error: FormValidationError) => void} [props.onError] - Error callback
|
|
326
|
-
* @param {(data: T) => void} [props.onSuccess] - Success callback
|
|
327
|
-
*
|
|
328
|
-
* @returns {JSX.Element} The rendered form component
|
|
329
|
-
*
|
|
330
|
-
* @example
|
|
331
|
-
* ```tsx
|
|
332
|
-
* import { ConfigurableForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
333
|
-
*
|
|
334
|
-
* function MyForm() {
|
|
335
|
-
* return (
|
|
336
|
-
* <ConfigurableForm
|
|
337
|
-
* fields={[
|
|
338
|
-
* FormFieldHelpers.input("name", "Name"),
|
|
339
|
-
* FormFieldHelpers.input("email", "Email", "email"),
|
|
340
|
-
* ]}
|
|
341
|
-
* defaultValues={{ name: "", email: "" }}
|
|
342
|
-
* onSubmit={async (data) => {
|
|
343
|
-
* console.log("Submitted:", data);
|
|
344
|
-
* }}
|
|
345
|
-
* title="Contact Form"
|
|
346
|
-
* />
|
|
347
|
-
* );
|
|
348
|
-
* }
|
|
349
|
-
* ```
|
|
350
|
-
*
|
|
351
|
-
* @see {@link ZodForm} for Zod-integrated form with automatic validation
|
|
352
|
-
* @see {@link FormFieldHelpers} for field creation helpers
|
|
353
|
-
* @category Components
|
|
354
|
-
*/
|
|
355
|
-
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$1.JSX.Element;
|
|
356
|
-
|
|
357
|
-
interface FormFieldProps<TFieldValues extends FieldValues> {
|
|
358
|
-
config: FormFieldConfig<TFieldValues>;
|
|
359
|
-
form: UseFormReturn<TFieldValues>;
|
|
360
|
-
submissionState: FormSubmissionState;
|
|
361
|
-
}
|
|
362
|
-
declare const FormField: <TFieldValues extends FieldValues>(props: FormFieldProps<TFieldValues>) => React$1.JSX.Element;
|
|
363
|
-
|
|
364
|
-
type ServerAction<TState = unknown, TFormData = FormData> = (state: TState | undefined, formData: TFormData) => Promise<TState>;
|
|
365
|
-
interface ActionState {
|
|
366
|
-
errors?: Record<string, string[]>;
|
|
367
|
-
message?: string;
|
|
368
|
-
success?: boolean;
|
|
369
|
-
}
|
|
370
|
-
interface ServerActionFormProps<T extends FieldValues> {
|
|
371
|
-
/** Server Action function (Next.js pattern) */
|
|
372
|
-
action: ServerAction<ActionState, FormData>;
|
|
373
|
-
/** Optional: Zod schema for client-side validation before submission */
|
|
374
|
-
clientValidationSchema?: z.ZodSchema<T>;
|
|
375
|
-
className?: string;
|
|
376
|
-
columns?: 1 | 2 | 3;
|
|
377
|
-
/** Default values for form fields */
|
|
378
|
-
defaultValues?: Partial<T>;
|
|
379
|
-
fields: FormFieldConfig<T>[];
|
|
380
|
-
/** Initial state for useActionState */
|
|
381
|
-
initialState?: ActionState;
|
|
382
|
-
layout?: "vertical" | "horizontal" | "grid";
|
|
383
|
-
/** Callback when form submission encounters an error */
|
|
384
|
-
onError?: (error: {
|
|
385
|
-
errors?: Record<string, string[]>;
|
|
386
|
-
message?: string;
|
|
387
|
-
}) => void;
|
|
388
|
-
/** Callback when form submission succeeds */
|
|
389
|
-
onSuccess?: (data: FormData) => void;
|
|
390
|
-
resetButtonText?: string;
|
|
391
|
-
showResetButton?: boolean;
|
|
392
|
-
spacing?: "2" | "4" | "6" | "8" | "lg";
|
|
393
|
-
submitButtonProps?: Partial<React$1.ComponentProps<typeof Button>>;
|
|
394
|
-
submitButtonText?: string;
|
|
395
|
-
subtitle?: string;
|
|
396
|
-
title?: string;
|
|
397
|
-
}
|
|
398
|
-
/**
|
|
399
|
-
* ServerActionForm - A form component compatible with Next.js Server Actions.
|
|
400
|
-
*
|
|
401
|
-
* @description
|
|
402
|
-
* This component works with Next.js authentication patterns by using native
|
|
403
|
-
* HTML form submission with Server Actions, while still providing the
|
|
404
|
-
* beautiful HeroUI field components. It uses React's useActionState hook
|
|
405
|
-
* to manage form state and handle server responses.
|
|
406
|
-
*
|
|
407
|
-
* **Validation Options:**
|
|
408
|
-
* - **Server-side only (default)**: Form submits directly to Server Action
|
|
409
|
-
* - **Client + Server (optional)**: Pass `clientValidationSchema` for client-side
|
|
410
|
-
* validation before submission. Server Action still validates (defense in depth).
|
|
411
|
-
*
|
|
412
|
-
* **Important Notes:**
|
|
413
|
-
* - If your Server Action calls `redirect()`, success messages won't display
|
|
414
|
-
* (the page navigates away). Use URL params or cookies for success messages
|
|
415
|
-
* when redirecting.
|
|
416
|
-
* - Server Actions receive FormData, not JSON, so field values are strings
|
|
417
|
-
*
|
|
418
|
-
* @template T - The form data type
|
|
419
|
-
*
|
|
420
|
-
* @param {ServerActionFormProps<T>} props - Component props
|
|
421
|
-
* @param {ServerAction<ActionState, FormData>} props.action - Next.js Server Action function
|
|
422
|
-
* @param {FormFieldConfig<T>[]} props.fields - Array of field configurations
|
|
423
|
-
* @param {z.ZodSchema<T>} [props.clientValidationSchema] - Optional Zod schema for client-side validation
|
|
424
|
-
* @param {Partial<T>} [props.defaultValues] - Default form values
|
|
425
|
-
* @param {ActionState} [props.initialState] - Initial state for useActionState
|
|
426
|
-
* @param {string} [props.title] - Optional form title
|
|
427
|
-
* @param {string} [props.subtitle] - Optional form subtitle
|
|
428
|
-
* @param {"vertical"|"horizontal"|"grid"} [props.layout="vertical"] - Form layout style
|
|
429
|
-
* @param {1|2|3} [props.columns=1] - Number of columns for grid layout
|
|
430
|
-
* @param {"2"|"4"|"6"|"8"|"lg"} [props.spacing="4"] - Spacing between form fields
|
|
431
|
-
* @param {string} [props.submitButtonText="Submit"] - Text for the submit button
|
|
432
|
-
* @param {boolean} [props.showResetButton=false] - Whether to show a reset button
|
|
433
|
-
* @param {(error: {...}) => void} [props.onError] - Error callback
|
|
434
|
-
* @param {(data: FormData) => void} [props.onSuccess] - Success callback
|
|
435
|
-
*
|
|
436
|
-
* @returns {JSX.Element} The rendered form component
|
|
437
|
-
*
|
|
438
|
-
* @example
|
|
439
|
-
* Server-side only validation:
|
|
440
|
-
* ```tsx
|
|
441
|
-
* import { ServerActionForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
442
|
-
* import { signup } from "@/app/actions/auth";
|
|
443
|
-
*
|
|
444
|
-
* <ServerActionForm
|
|
445
|
-
* action={signup}
|
|
446
|
-
* fields={[
|
|
447
|
-
* FormFieldHelpers.input("name", "Name"),
|
|
448
|
-
* FormFieldHelpers.input("email", "Email", "email"),
|
|
449
|
-
* FormFieldHelpers.input("password", "Password", "password"),
|
|
450
|
-
* ]}
|
|
451
|
-
* />
|
|
452
|
-
* ```
|
|
453
|
-
*
|
|
454
|
-
* @example
|
|
455
|
-
* Client + Server validation:
|
|
456
|
-
* ```tsx
|
|
457
|
-
* import { ServerActionForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
458
|
-
* import { signup } from "@/app/actions/auth";
|
|
459
|
-
* import { z } from "zod";
|
|
460
|
-
*
|
|
461
|
-
* const signupSchema = z.object({
|
|
462
|
-
* name: z.string().min(2),
|
|
463
|
-
* email: z.string().email(),
|
|
464
|
-
* password: z.string().min(8),
|
|
465
|
-
* });
|
|
466
|
-
*
|
|
467
|
-
* <ServerActionForm
|
|
468
|
-
* action={signup}
|
|
469
|
-
* clientValidationSchema={signupSchema}
|
|
470
|
-
* fields={[
|
|
471
|
-
* FormFieldHelpers.input("name", "Name"),
|
|
472
|
-
* FormFieldHelpers.input("email", "Email", "email"),
|
|
473
|
-
* FormFieldHelpers.input("password", "Password", "password"),
|
|
474
|
-
* ]}
|
|
475
|
-
* onError={(error) => {
|
|
476
|
-
* console.error("Form errors:", error.errors);
|
|
477
|
-
* }}
|
|
478
|
-
* onSuccess={(data) => {
|
|
479
|
-
* console.log("Form submitted:", data);
|
|
480
|
-
* }}
|
|
481
|
-
* />
|
|
482
|
-
* ```
|
|
483
|
-
*
|
|
484
|
-
* @see {@link ZodForm} for client-side only forms with Zod validation
|
|
485
|
-
* @see {@link ConfigurableForm} for forms without Server Actions
|
|
486
|
-
* @category Components
|
|
487
|
-
*/
|
|
488
|
-
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;
|
|
489
|
-
|
|
490
|
-
/**
|
|
491
|
-
* Configuration for an autocomplete option.
|
|
492
|
-
*
|
|
493
|
-
* @template TValue - The value type for the option
|
|
494
|
-
*/
|
|
495
|
-
interface AutocompleteOption<TValue extends string | number> {
|
|
496
|
-
/** Display label for the option */
|
|
497
|
-
label: string;
|
|
498
|
-
/** Value of the option */
|
|
499
|
-
value: TValue;
|
|
500
|
-
/** Optional description text */
|
|
501
|
-
description?: string;
|
|
502
|
-
/** Whether the option is disabled */
|
|
503
|
-
disabled?: boolean;
|
|
504
|
-
}
|
|
505
|
-
/**
|
|
506
|
-
* Props for the AutocompleteField component.
|
|
507
|
-
*
|
|
508
|
-
* @template TFieldValues - The form data type
|
|
509
|
-
* @template TValue - The value type for the autocomplete field (string or number)
|
|
510
|
-
*
|
|
511
|
-
* @example
|
|
512
|
-
* ```tsx
|
|
513
|
-
* import { AutocompleteField } from "@rachelallyson/hero-hook-form";
|
|
514
|
-
* import { useForm } from "react-hook-form";
|
|
515
|
-
*
|
|
516
|
-
* const form = useForm({
|
|
517
|
-
* defaultValues: { country: "" },
|
|
518
|
-
* });
|
|
519
|
-
*
|
|
520
|
-
* const options = [
|
|
521
|
-
* { label: "United States", value: "us" },
|
|
522
|
-
* { label: "Canada", value: "ca" },
|
|
523
|
-
* { label: "Mexico", value: "mx" },
|
|
524
|
-
* ];
|
|
525
|
-
*
|
|
526
|
-
* <AutocompleteField
|
|
527
|
-
* control={form.control}
|
|
528
|
-
* name="country"
|
|
529
|
-
* label="Country"
|
|
530
|
-
* items={options}
|
|
531
|
-
* placeholder="Search for a country"
|
|
532
|
-
* />
|
|
533
|
-
* ```
|
|
534
|
-
*/
|
|
535
|
-
type AutocompleteFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
|
|
536
|
-
/** Array of autocomplete options (for static lists) */
|
|
537
|
-
items?: readonly AutocompleteOption<TValue>[];
|
|
538
|
-
/** Placeholder text when no option is selected */
|
|
539
|
-
placeholder?: string;
|
|
540
|
-
/** Additional props to pass to the underlying Autocomplete component */
|
|
541
|
-
autocompleteProps?: Omit<React$1.ComponentProps<typeof Autocomplete>, "selectedKey" | "onSelectionChange" | "inputValue" | "onInputChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "children" | "items" | "defaultItems">;
|
|
542
|
-
/** Custom render function for items (for async loading) */
|
|
543
|
-
children?: (item: AutocompleteOption<TValue>) => React$1.JSX.Element;
|
|
544
|
-
};
|
|
545
|
-
/**
|
|
546
|
-
* An autocomplete field component that integrates React Hook Form with HeroUI Autocomplete.
|
|
547
|
-
*
|
|
548
|
-
* This component provides a type-safe autocomplete field with validation support,
|
|
549
|
-
* error handling, and accessibility features. It supports both static option lists
|
|
550
|
-
* and async loading via the items prop or children render function.
|
|
551
|
-
*
|
|
552
|
-
* @template TFieldValues - The form data type
|
|
553
|
-
* @template TValue - The value type for the autocomplete field (string or number)
|
|
554
|
-
*
|
|
555
|
-
* @param props - The autocomplete field props
|
|
556
|
-
* @returns The rendered autocomplete field component
|
|
557
|
-
*
|
|
558
|
-
* @example
|
|
559
|
-
* ```tsx
|
|
560
|
-
* import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
561
|
-
* import { z } from "zod";
|
|
562
|
-
*
|
|
563
|
-
* const schema = z.object({
|
|
564
|
-
* country: z.string().min(1, "Please select a country"),
|
|
565
|
-
* });
|
|
566
|
-
*
|
|
567
|
-
* const options = [
|
|
568
|
-
* { label: "United States", value: "us" },
|
|
569
|
-
* { label: "Canada", value: "ca" },
|
|
570
|
-
* ];
|
|
571
|
-
*
|
|
572
|
-
* function MyForm() {
|
|
573
|
-
* return (
|
|
574
|
-
* <ZodForm
|
|
575
|
-
* config={{
|
|
576
|
-
* schema,
|
|
577
|
-
* fields: [
|
|
578
|
-
* FormFieldHelpers.autocomplete("country", "Country", options, "Search for a country"),
|
|
579
|
-
* ],
|
|
580
|
-
* }}
|
|
581
|
-
* onSubmit={(data) => console.log(data)}
|
|
582
|
-
* />
|
|
583
|
-
* );
|
|
584
|
-
* }
|
|
585
|
-
* ```
|
|
586
|
-
*
|
|
587
|
-
* @example
|
|
588
|
-
* ```tsx
|
|
589
|
-
* // With async loading
|
|
590
|
-
* <AutocompleteField
|
|
591
|
-
* control={form.control}
|
|
592
|
-
* name="country"
|
|
593
|
-
* label="Country"
|
|
594
|
-
* placeholder="Search for a country"
|
|
595
|
-
* autocompleteProps={{
|
|
596
|
-
* allowsCustomValue: true,
|
|
597
|
-
* onInputChange={(value) => {
|
|
598
|
-
* // Load options asynchronously based on input
|
|
599
|
-
* loadOptions(value);
|
|
600
|
-
* }},
|
|
601
|
-
* }}
|
|
602
|
-
* >
|
|
603
|
-
* {(item) => (
|
|
604
|
-
* <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>
|
|
605
|
-
* )}
|
|
606
|
-
* </AutocompleteField>
|
|
607
|
-
* ```
|
|
608
|
-
*/
|
|
609
|
-
declare function AutocompleteField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: AutocompleteFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
|
|
610
|
-
|
|
611
|
-
/**
|
|
612
|
-
* Props for the CheckboxField component.
|
|
613
|
-
*
|
|
614
|
-
* @template TFieldValues - The form data type
|
|
615
|
-
*
|
|
616
|
-
* @example
|
|
617
|
-
* ```tsx
|
|
618
|
-
* import { CheckboxField } from "@rachelallyson/hero-hook-form";
|
|
619
|
-
* import { useForm } from "react-hook-form";
|
|
620
|
-
*
|
|
621
|
-
* const form = useForm({
|
|
622
|
-
* defaultValues: { newsletter: false },
|
|
623
|
-
* });
|
|
624
|
-
*
|
|
625
|
-
* <CheckboxField
|
|
626
|
-
* control={form.control}
|
|
627
|
-
* name="newsletter"
|
|
628
|
-
* label="Subscribe to newsletter"
|
|
629
|
-
* description="Receive weekly updates"
|
|
630
|
-
* />
|
|
631
|
-
* ```
|
|
632
|
-
*/
|
|
633
|
-
type CheckboxFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, boolean> & WithControl<TFieldValues> & {
|
|
634
|
-
/** Additional props to pass to the underlying Checkbox component */
|
|
635
|
-
checkboxProps?: Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
636
|
-
};
|
|
637
|
-
/**
|
|
638
|
-
* A checkbox field component that integrates React Hook Form with HeroUI Checkbox.
|
|
639
|
-
*
|
|
640
|
-
* This component provides a type-safe checkbox field with validation support,
|
|
641
|
-
* error handling, and accessibility features. The field value is a boolean.
|
|
642
|
-
*
|
|
643
|
-
* @template TFieldValues - The form data type
|
|
644
|
-
*
|
|
645
|
-
* @param props - The checkbox field props
|
|
646
|
-
* @returns The rendered checkbox field component
|
|
647
|
-
*
|
|
648
|
-
* @example
|
|
649
|
-
* ```tsx
|
|
650
|
-
* import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
651
|
-
* import { z } from "zod";
|
|
652
|
-
*
|
|
653
|
-
* const schema = z.object({
|
|
654
|
-
* terms: z.boolean().refine((val) => val === true, {
|
|
655
|
-
* message: "You must accept the terms",
|
|
656
|
-
* }),
|
|
657
|
-
* newsletter: z.boolean().optional(),
|
|
658
|
-
* });
|
|
659
|
-
*
|
|
660
|
-
* function MyForm() {
|
|
661
|
-
* return (
|
|
662
|
-
* <ZodForm
|
|
663
|
-
* config={{
|
|
664
|
-
* schema,
|
|
665
|
-
* fields: [
|
|
666
|
-
* FormFieldHelpers.checkbox("terms", "I accept the terms and conditions"),
|
|
667
|
-
* FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter"),
|
|
668
|
-
* ],
|
|
669
|
-
* }}
|
|
670
|
-
* onSubmit={(data) => console.log(data)}
|
|
671
|
-
* />
|
|
672
|
-
* );
|
|
673
|
-
* }
|
|
674
|
-
* ```
|
|
675
|
-
*
|
|
676
|
-
* @example
|
|
677
|
-
* ```tsx
|
|
678
|
-
* // With custom styling
|
|
679
|
-
* <CheckboxField
|
|
680
|
-
* control={form.control}
|
|
681
|
-
* name="newsletter"
|
|
682
|
-
* label="Subscribe"
|
|
683
|
-
* checkboxProps={{
|
|
684
|
-
* color: "primary",
|
|
685
|
-
* size: "lg",
|
|
686
|
-
* }}
|
|
687
|
-
* />
|
|
688
|
-
* ```
|
|
689
|
-
*/
|
|
690
|
-
declare function CheckboxField<TFieldValues extends FieldValues>(props: CheckboxFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
691
|
-
|
|
692
|
-
/**
|
|
693
|
-
* Props for the DateField component.
|
|
694
|
-
*
|
|
695
|
-
* @template TFieldValues - The form data type
|
|
696
|
-
*
|
|
697
|
-
* @example
|
|
698
|
-
* ```tsx
|
|
699
|
-
* import { DateField } from "@rachelallyson/hero-hook-form";
|
|
700
|
-
* import { useForm } from "react-hook-form";
|
|
701
|
-
* import { CalendarDate } from "@internationalized/date";
|
|
702
|
-
*
|
|
703
|
-
* const form = useForm({
|
|
704
|
-
* defaultValues: { birthDate: null as CalendarDate | null },
|
|
705
|
-
* });
|
|
706
|
-
*
|
|
707
|
-
* <DateField
|
|
708
|
-
* control={form.control}
|
|
709
|
-
* name="birthDate"
|
|
710
|
-
* label="Birth Date"
|
|
711
|
-
* description="Select your date of birth"
|
|
712
|
-
* />
|
|
713
|
-
* ```
|
|
714
|
-
*/
|
|
715
|
-
type DateFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, CalendarDate | null> & WithControl<TFieldValues> & {
|
|
716
|
-
/** Additional props to pass to the underlying DateInput component */
|
|
717
|
-
dateProps?: Omit<React$1.ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
718
|
-
/** Transform function to modify the date value before it's set */
|
|
719
|
-
transform?: (value: CalendarDate | null) => CalendarDate | null;
|
|
720
|
-
};
|
|
721
|
-
/**
|
|
722
|
-
* A date input field component that integrates React Hook Form with HeroUI DateInput.
|
|
723
|
-
*
|
|
724
|
-
* This component provides a type-safe date field with validation support,
|
|
725
|
-
* error handling, and accessibility features. Uses `@internationalized/date`
|
|
726
|
-
* for date handling.
|
|
727
|
-
*
|
|
728
|
-
* @template TFieldValues - The form data type
|
|
729
|
-
*
|
|
730
|
-
* @param props - The date field props
|
|
731
|
-
* @returns The rendered date field component
|
|
732
|
-
*
|
|
733
|
-
* @example
|
|
734
|
-
* ```tsx
|
|
735
|
-
* import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
736
|
-
* import { z } from "zod";
|
|
737
|
-
* import { CalendarDate } from "@internationalized/date";
|
|
738
|
-
*
|
|
739
|
-
* const schema = z.object({
|
|
740
|
-
* birthDate: z.instanceof(CalendarDate).nullable(),
|
|
741
|
-
* eventDate: z.instanceof(CalendarDate),
|
|
742
|
-
* });
|
|
743
|
-
*
|
|
744
|
-
* function MyForm() {
|
|
745
|
-
* return (
|
|
746
|
-
* <ZodForm
|
|
747
|
-
* config={{
|
|
748
|
-
* schema,
|
|
749
|
-
* fields: [
|
|
750
|
-
* FormFieldHelpers.date("birthDate", "Birth Date"),
|
|
751
|
-
* FormFieldHelpers.date("eventDate", "Event Date"),
|
|
752
|
-
* ],
|
|
753
|
-
* }}
|
|
754
|
-
* onSubmit={(data) => console.log(data)}
|
|
755
|
-
* />
|
|
756
|
-
* );
|
|
757
|
-
* }
|
|
758
|
-
* ```
|
|
759
|
-
*
|
|
760
|
-
* @example
|
|
761
|
-
* ```tsx
|
|
762
|
-
* // With custom date format and min/max dates
|
|
763
|
-
* <DateField
|
|
764
|
-
* control={form.control}
|
|
765
|
-
* name="eventDate"
|
|
766
|
-
* label="Event Date"
|
|
767
|
-
* dateProps={{
|
|
768
|
-
* minValue: new CalendarDate(2024, 1, 1),
|
|
769
|
-
* maxValue: new CalendarDate(2024, 12, 31),
|
|
770
|
-
* }}
|
|
771
|
-
* />
|
|
772
|
-
* ```
|
|
773
|
-
*/
|
|
774
|
-
declare function DateField<TFieldValues extends FieldValues>(props: DateFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
775
|
-
|
|
776
|
-
/**
|
|
777
|
-
* Props for the FileField component.
|
|
778
|
-
*
|
|
779
|
-
* @template TFieldValues - The form data type
|
|
780
|
-
*
|
|
781
|
-
* @example
|
|
782
|
-
* ```tsx
|
|
783
|
-
* import { FileField } from "@rachelallyson/hero-hook-form";
|
|
784
|
-
* import { useForm } from "react-hook-form";
|
|
785
|
-
*
|
|
786
|
-
* const form = useForm({
|
|
787
|
-
* defaultValues: { avatar: null as FileList | null },
|
|
788
|
-
* });
|
|
789
|
-
*
|
|
790
|
-
* <FileField
|
|
791
|
-
* control={form.control}
|
|
792
|
-
* name="avatar"
|
|
793
|
-
* label="Upload Avatar"
|
|
794
|
-
* accept="image/*"
|
|
795
|
-
* description="Select an image file"
|
|
796
|
-
* />
|
|
797
|
-
* ```
|
|
798
|
-
*/
|
|
799
|
-
type FileFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, FileList | null> & WithControl<TFieldValues> & {
|
|
800
|
-
/** Additional props to pass to the underlying Input component */
|
|
801
|
-
fileProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
|
|
802
|
-
/** Transform function to modify the file list before it's set */
|
|
803
|
-
transform?: (value: FileList | null) => FileList | null;
|
|
804
|
-
/** Whether multiple files can be selected */
|
|
805
|
-
multiple?: boolean;
|
|
806
|
-
/** Accepted file types (e.g., "image/*", ".pdf,.doc") */
|
|
807
|
-
accept?: string;
|
|
808
|
-
};
|
|
809
|
-
/**
|
|
810
|
-
* A file input field component that integrates React Hook Form with HeroUI Input.
|
|
811
|
-
*
|
|
812
|
-
* This component provides a type-safe file upload field with validation support,
|
|
813
|
-
* error handling, and accessibility features. The field value is a `FileList` or `null`.
|
|
814
|
-
*
|
|
815
|
-
* @template TFieldValues - The form data type
|
|
816
|
-
*
|
|
817
|
-
* @param props - The file field props
|
|
818
|
-
* @returns The rendered file field component
|
|
819
|
-
*
|
|
820
|
-
* @example
|
|
821
|
-
* ```tsx
|
|
822
|
-
* import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
823
|
-
* import { z } from "zod";
|
|
824
|
-
*
|
|
825
|
-
* const schema = z.object({
|
|
826
|
-
* avatar: z.instanceof(FileList).nullable(),
|
|
827
|
-
* documents: z.instanceof(FileList).optional(),
|
|
828
|
-
* });
|
|
829
|
-
*
|
|
830
|
-
* function MyForm() {
|
|
831
|
-
* return (
|
|
832
|
-
* <ZodForm
|
|
833
|
-
* config={{
|
|
834
|
-
* schema,
|
|
835
|
-
* fields: [
|
|
836
|
-
* FormFieldHelpers.file("avatar", "Upload Avatar", { accept: "image/*" }),
|
|
837
|
-
* FormFieldHelpers.file("documents", "Upload Documents", {
|
|
838
|
-
* multiple: true,
|
|
839
|
-
* accept: ".pdf,.doc,.docx",
|
|
840
|
-
* }),
|
|
841
|
-
* ],
|
|
842
|
-
* }}
|
|
843
|
-
* onSubmit={(data) => console.log(data)}
|
|
844
|
-
* />
|
|
845
|
-
* );
|
|
846
|
-
* }
|
|
847
|
-
* ```
|
|
848
|
-
*
|
|
849
|
-
* @example
|
|
850
|
-
* ```tsx
|
|
851
|
-
* // With file size validation
|
|
852
|
-
* <FileField
|
|
853
|
-
* control={form.control}
|
|
854
|
-
* name="avatar"
|
|
855
|
-
* label="Upload Avatar"
|
|
856
|
-
* accept="image/*"
|
|
857
|
-
* transform={(files) => {
|
|
858
|
-
* if (files && files[0] && files[0].size > 5 * 1024 * 1024) {
|
|
859
|
-
* // File too large
|
|
860
|
-
* return null;
|
|
861
|
-
* }
|
|
862
|
-
* return files;
|
|
863
|
-
* }}
|
|
864
|
-
* />
|
|
865
|
-
* ```
|
|
866
|
-
*/
|
|
867
|
-
declare function FileField<TFieldValues extends FieldValues>(props: FileFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
868
|
-
|
|
869
|
-
interface FontPickerProps {
|
|
870
|
-
showFontPreview?: boolean;
|
|
871
|
-
loadAllVariants?: boolean;
|
|
872
|
-
onFontsLoaded?: (loaded: boolean) => void;
|
|
873
|
-
fontsLoadedTimeout?: number;
|
|
874
|
-
}
|
|
875
|
-
type FontPickerFieldProps<TFieldValues extends FieldValues, TValue extends string = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
|
|
876
|
-
fontPickerProps?: FontPickerProps;
|
|
877
|
-
};
|
|
878
|
-
declare function FontPickerField<TFieldValues extends FieldValues, TValue extends string = string>(props: FontPickerFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
|
|
879
|
-
|
|
880
|
-
/**
|
|
881
|
-
* Props for the InputField component.
|
|
882
|
-
*
|
|
883
|
-
* @template TFieldValues - The form data type
|
|
884
|
-
*/
|
|
885
|
-
type InputFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, string> & WithControl<TFieldValues> & {
|
|
886
|
-
inputProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
887
|
-
transform?: (value: string) => string;
|
|
888
|
-
};
|
|
889
|
-
/**
|
|
890
|
-
* Input field component for text, email, password, tel, and number inputs.
|
|
891
|
-
*
|
|
892
|
-
* @description
|
|
893
|
-
* A memoized input field component that integrates with React Hook Form
|
|
894
|
-
* and HeroUI Input component. Supports all standard input types and
|
|
895
|
-
* includes automatic validation error display.
|
|
896
|
-
*
|
|
897
|
-
* @template TFieldValues - The form data type
|
|
898
|
-
*
|
|
899
|
-
* @param {InputFieldProps<TFieldValues>} props - Component props
|
|
900
|
-
* @param {Path<TFieldValues>} props.name - Field name path
|
|
901
|
-
* @param {string} [props.label] - Field label
|
|
902
|
-
* @param {string} [props.description] - Field description/help text
|
|
903
|
-
* @param {Control<TFieldValues>} props.control - React Hook Form control
|
|
904
|
-
* @param {boolean} [props.isDisabled] - Whether field is disabled
|
|
905
|
-
* @param {RegisterOptions<TFieldValues>} [props.rules] - Validation rules
|
|
906
|
-
* @param {Partial<InputProps>} [props.inputProps] - Additional Input component props
|
|
907
|
-
* @param {(value: string) => string} [props.transform] - Value transformation function
|
|
908
|
-
*
|
|
909
|
-
* @returns {JSX.Element} The rendered input field
|
|
910
|
-
*
|
|
911
|
-
* @example
|
|
912
|
-
* ```tsx
|
|
913
|
-
* import { InputField } from "@rachelallyson/hero-hook-form";
|
|
914
|
-
* import { useForm, Controller } from "react-hook-form";
|
|
915
|
-
*
|
|
916
|
-
* function MyForm() {
|
|
917
|
-
* const { control } = useForm();
|
|
918
|
-
*
|
|
919
|
-
* return (
|
|
920
|
-
* <InputField
|
|
921
|
-
* name="email"
|
|
922
|
-
* label="Email Address"
|
|
923
|
-
* description="Enter your email address"
|
|
924
|
-
* control={control}
|
|
925
|
-
* inputProps={{
|
|
926
|
-
* type: "email",
|
|
927
|
-
* placeholder: "you@example.com",
|
|
928
|
-
* }}
|
|
929
|
-
* />
|
|
930
|
-
* );
|
|
931
|
-
* }
|
|
932
|
-
* ```
|
|
933
|
-
*
|
|
934
|
-
* @see {@link FormFieldHelpers.input} for helper function to create input field config
|
|
935
|
-
* @category Fields
|
|
936
|
-
*/
|
|
937
|
-
declare const InputField: <TFieldValues extends FieldValues>(props: InputFieldProps<TFieldValues>) => React$1.JSX.Element;
|
|
938
|
-
|
|
939
|
-
/**
|
|
940
|
-
* Configuration for a radio option.
|
|
941
|
-
*
|
|
942
|
-
* @template TValue - The value type for the option
|
|
943
|
-
*/
|
|
944
|
-
interface RadioOption<TValue extends string | number> {
|
|
945
|
-
/** Display label for the option */
|
|
946
|
-
label: string;
|
|
947
|
-
/** Value of the option */
|
|
948
|
-
value: TValue;
|
|
949
|
-
/** Optional description text */
|
|
950
|
-
description?: string;
|
|
951
|
-
/** Whether the option is disabled */
|
|
952
|
-
disabled?: boolean;
|
|
953
|
-
}
|
|
954
|
-
/**
|
|
955
|
-
* Props for the RadioGroupField component.
|
|
956
|
-
*
|
|
957
|
-
* @template TFieldValues - The form data type
|
|
958
|
-
* @template TValue - The value type for the radio group (string or number)
|
|
959
|
-
*
|
|
960
|
-
* @example
|
|
961
|
-
* ```tsx
|
|
962
|
-
* import { RadioGroupField } from "@rachelallyson/hero-hook-form";
|
|
963
|
-
* import { useForm } from "react-hook-form";
|
|
964
|
-
*
|
|
965
|
-
* const form = useForm({
|
|
966
|
-
* defaultValues: { plan: "" },
|
|
967
|
-
* });
|
|
968
|
-
*
|
|
969
|
-
* const options = [
|
|
970
|
-
* { label: "Basic", value: "basic" },
|
|
971
|
-
* { label: "Pro", value: "pro" },
|
|
972
|
-
* { label: "Enterprise", value: "enterprise" },
|
|
973
|
-
* ];
|
|
974
|
-
*
|
|
975
|
-
* <RadioGroupField
|
|
976
|
-
* control={form.control}
|
|
977
|
-
* name="plan"
|
|
978
|
-
* label="Select Plan"
|
|
979
|
-
* options={options}
|
|
980
|
-
* />
|
|
981
|
-
* ```
|
|
982
|
-
*/
|
|
983
|
-
type RadioGroupFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
|
|
984
|
-
/** Array of radio options */
|
|
985
|
-
options: readonly RadioOption<TValue>[];
|
|
986
|
-
/** Additional props to pass to the underlying RadioGroup component */
|
|
987
|
-
radioGroupProps?: Omit<React$1.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">;
|
|
988
|
-
};
|
|
989
|
-
/**
|
|
990
|
-
* A radio group field component that integrates React Hook Form with HeroUI RadioGroup.
|
|
991
|
-
*
|
|
992
|
-
* This component provides a type-safe radio group field with validation support,
|
|
993
|
-
* error handling, and accessibility features. Only one option can be selected at a time.
|
|
994
|
-
*
|
|
995
|
-
* @template TFieldValues - The form data type
|
|
996
|
-
* @template TValue - The value type for the radio group (string or number)
|
|
997
|
-
*
|
|
998
|
-
* @param props - The radio group field props
|
|
999
|
-
* @returns The rendered radio group field component
|
|
1000
|
-
*
|
|
1001
|
-
* @example
|
|
1002
|
-
* ```tsx
|
|
1003
|
-
* import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
1004
|
-
* import { z } from "zod";
|
|
1005
|
-
*
|
|
1006
|
-
* const schema = z.object({
|
|
1007
|
-
* plan: z.enum(["basic", "pro", "enterprise"], {
|
|
1008
|
-
* required_error: "Please select a plan",
|
|
1009
|
-
* }),
|
|
1010
|
-
* });
|
|
1011
|
-
*
|
|
1012
|
-
* const options = [
|
|
1013
|
-
* { label: "Basic - $9/month", value: "basic" },
|
|
1014
|
-
* { label: "Pro - $29/month", value: "pro" },
|
|
1015
|
-
* { label: "Enterprise - $99/month", value: "enterprise" },
|
|
1016
|
-
* ];
|
|
1017
|
-
*
|
|
1018
|
-
* function MyForm() {
|
|
1019
|
-
* return (
|
|
1020
|
-
* <ZodForm
|
|
1021
|
-
* config={{
|
|
1022
|
-
* schema,
|
|
1023
|
-
* fields: [
|
|
1024
|
-
* FormFieldHelpers.radioGroup("plan", "Select Plan", options),
|
|
1025
|
-
* ],
|
|
1026
|
-
* }}
|
|
1027
|
-
* onSubmit={(data) => console.log(data)}
|
|
1028
|
-
* />
|
|
1029
|
-
* );
|
|
1030
|
-
* }
|
|
1031
|
-
* ```
|
|
1032
|
-
*
|
|
1033
|
-
* @example
|
|
1034
|
-
* ```tsx
|
|
1035
|
-
* // With custom styling
|
|
1036
|
-
* <RadioGroupField
|
|
1037
|
-
* control={form.control}
|
|
1038
|
-
* name="plan"
|
|
1039
|
-
* label="Select Plan"
|
|
1040
|
-
* options={options}
|
|
1041
|
-
* radioGroupProps={{
|
|
1042
|
-
* orientation: "horizontal",
|
|
1043
|
-
* color: "primary",
|
|
1044
|
-
* }}
|
|
1045
|
-
* />
|
|
1046
|
-
* ```
|
|
1047
|
-
*/
|
|
1048
|
-
declare function RadioGroupField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: RadioGroupFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
|
|
1049
|
-
|
|
1050
|
-
/**
|
|
1051
|
-
* Configuration for a select option.
|
|
1052
|
-
*
|
|
1053
|
-
* @template TValue - The value type for the option
|
|
1054
|
-
*/
|
|
1055
|
-
interface SelectOption<TValue extends string | number> {
|
|
1056
|
-
/** Display label for the option */
|
|
1057
|
-
label: string;
|
|
1058
|
-
/** Value of the option */
|
|
1059
|
-
value: TValue;
|
|
1060
|
-
/** Optional description text */
|
|
1061
|
-
description?: string;
|
|
1062
|
-
/** Whether the option is disabled */
|
|
1063
|
-
disabled?: boolean;
|
|
1064
|
-
}
|
|
1065
|
-
/**
|
|
1066
|
-
* Props for the SelectField component.
|
|
1067
|
-
*
|
|
1068
|
-
* @template TFieldValues - The form data type
|
|
1069
|
-
* @template TValue - The value type for the select field (string or number)
|
|
1070
|
-
*
|
|
1071
|
-
* @example
|
|
1072
|
-
* ```tsx
|
|
1073
|
-
* import { SelectField } from "@rachelallyson/hero-hook-form";
|
|
1074
|
-
* import { useForm } from "react-hook-form";
|
|
1075
|
-
*
|
|
1076
|
-
* const form = useForm({
|
|
1077
|
-
* defaultValues: { country: "" },
|
|
1078
|
-
* });
|
|
1079
|
-
*
|
|
1080
|
-
* const options = [
|
|
1081
|
-
* { label: "United States", value: "us" },
|
|
1082
|
-
* { label: "Canada", value: "ca" },
|
|
1083
|
-
* { label: "Mexico", value: "mx" },
|
|
1084
|
-
* ];
|
|
1085
|
-
*
|
|
1086
|
-
* <SelectField
|
|
1087
|
-
* control={form.control}
|
|
1088
|
-
* name="country"
|
|
1089
|
-
* label="Country"
|
|
1090
|
-
* options={options}
|
|
1091
|
-
* placeholder="Select a country"
|
|
1092
|
-
* />
|
|
1093
|
-
* ```
|
|
1094
|
-
*/
|
|
1095
|
-
type SelectFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
|
|
1096
|
-
/** Array of select options */
|
|
1097
|
-
options: readonly SelectOption<TValue>[];
|
|
1098
|
-
/** Placeholder text when no option is selected */
|
|
1099
|
-
placeholder?: string;
|
|
1100
|
-
/** Additional props to pass to the underlying Select component */
|
|
1101
|
-
selectProps?: Omit<React$1.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
1102
|
-
};
|
|
1103
|
-
/**
|
|
1104
|
-
* A select dropdown field component that integrates React Hook Form with HeroUI Select.
|
|
1105
|
-
*
|
|
1106
|
-
* This component provides a type-safe select field with validation support,
|
|
1107
|
-
* error handling, and accessibility features.
|
|
1108
|
-
*
|
|
1109
|
-
* @template TFieldValues - The form data type
|
|
1110
|
-
* @template TValue - The value type for the select field (string or number)
|
|
1111
|
-
*
|
|
1112
|
-
* @param props - The select field props
|
|
1113
|
-
* @returns The rendered select field component
|
|
1114
|
-
*
|
|
1115
|
-
* @example
|
|
1116
|
-
* ```tsx
|
|
1117
|
-
* import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
1118
|
-
* import { z } from "zod";
|
|
1119
|
-
*
|
|
1120
|
-
* const schema = z.object({
|
|
1121
|
-
* country: z.string().min(1, "Please select a country"),
|
|
1122
|
-
* });
|
|
1123
|
-
*
|
|
1124
|
-
* const options = [
|
|
1125
|
-
* { label: "United States", value: "us" },
|
|
1126
|
-
* { label: "Canada", value: "ca" },
|
|
1127
|
-
* ];
|
|
1128
|
-
*
|
|
1129
|
-
* function MyForm() {
|
|
1130
|
-
* return (
|
|
1131
|
-
* <ZodForm
|
|
1132
|
-
* config={{
|
|
1133
|
-
* schema,
|
|
1134
|
-
* fields: [
|
|
1135
|
-
* FormFieldHelpers.select("country", "Country", options, "Select a country"),
|
|
1136
|
-
* ],
|
|
1137
|
-
* }}
|
|
1138
|
-
* onSubmit={(data) => console.log(data)}
|
|
1139
|
-
* />
|
|
1140
|
-
* );
|
|
1141
|
-
* }
|
|
1142
|
-
* ```
|
|
1143
|
-
*
|
|
1144
|
-
* @example
|
|
1145
|
-
* ```tsx
|
|
1146
|
-
* // With custom styling
|
|
1147
|
-
* <SelectField
|
|
1148
|
-
* control={form.control}
|
|
1149
|
-
* name="country"
|
|
1150
|
-
* label="Country"
|
|
1151
|
-
* options={options}
|
|
1152
|
-
* selectProps={{
|
|
1153
|
-
* variant: "bordered",
|
|
1154
|
-
* size: "lg",
|
|
1155
|
-
* }}
|
|
1156
|
-
* />
|
|
1157
|
-
* ```
|
|
1158
|
-
*/
|
|
1159
|
-
declare function SelectField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: SelectFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
|
|
1160
|
-
|
|
1161
|
-
/**
|
|
1162
|
-
* Props for the SliderField component.
|
|
1163
|
-
*
|
|
1164
|
-
* @template TFieldValues - The form data type
|
|
1165
|
-
*
|
|
1166
|
-
* @example
|
|
1167
|
-
* ```tsx
|
|
1168
|
-
* import { SliderField } from "@rachelallyson/hero-hook-form";
|
|
1169
|
-
* import { useForm } from "react-hook-form";
|
|
1170
|
-
*
|
|
1171
|
-
* const form = useForm({
|
|
1172
|
-
* defaultValues: { volume: 50 },
|
|
1173
|
-
* });
|
|
1174
|
-
*
|
|
1175
|
-
* <SliderField
|
|
1176
|
-
* control={form.control}
|
|
1177
|
-
* name="volume"
|
|
1178
|
-
* label="Volume"
|
|
1179
|
-
* description="Adjust the volume level"
|
|
1180
|
-
* />
|
|
1181
|
-
* ```
|
|
1182
|
-
*/
|
|
1183
|
-
type SliderFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, number> & WithControl<TFieldValues> & {
|
|
1184
|
-
/** Additional props to pass to the underlying Slider component */
|
|
1185
|
-
sliderProps?: Omit<React$1.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
1186
|
-
/** Transform function to modify the slider value before it's set */
|
|
1187
|
-
transform?: (value: number) => number;
|
|
1188
|
-
};
|
|
1189
|
-
/**
|
|
1190
|
-
* A slider field component that integrates React Hook Form with HeroUI Slider.
|
|
1191
|
-
*
|
|
1192
|
-
* This component provides a type-safe slider field with validation support,
|
|
1193
|
-
* error handling, and accessibility features. The field value is a number.
|
|
1194
|
-
*
|
|
1195
|
-
* @template TFieldValues - The form data type
|
|
1196
|
-
*
|
|
1197
|
-
* @param props - The slider field props
|
|
1198
|
-
* @returns The rendered slider field component
|
|
1199
|
-
*
|
|
1200
|
-
* @example
|
|
1201
|
-
* ```tsx
|
|
1202
|
-
* import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
1203
|
-
* import { z } from "zod";
|
|
1204
|
-
*
|
|
1205
|
-
* const schema = z.object({
|
|
1206
|
-
* volume: z.number().min(0).max(100),
|
|
1207
|
-
* brightness: z.number().min(0).max(100),
|
|
1208
|
-
* });
|
|
1209
|
-
*
|
|
1210
|
-
* function MyForm() {
|
|
1211
|
-
* return (
|
|
1212
|
-
* <ZodForm
|
|
1213
|
-
* config={{
|
|
1214
|
-
* schema,
|
|
1215
|
-
* fields: [
|
|
1216
|
-
* FormFieldHelpers.slider("volume", "Volume", { min: 0, max: 100 }),
|
|
1217
|
-
* FormFieldHelpers.slider("brightness", "Brightness", { min: 0, max: 100 }),
|
|
1218
|
-
* ],
|
|
1219
|
-
* }}
|
|
1220
|
-
* onSubmit={(data) => console.log(data)}
|
|
1221
|
-
* />
|
|
1222
|
-
* );
|
|
1223
|
-
* }
|
|
1224
|
-
* ```
|
|
1225
|
-
*
|
|
1226
|
-
* @example
|
|
1227
|
-
* ```tsx
|
|
1228
|
-
* // With custom step and marks
|
|
1229
|
-
* <SliderField
|
|
1230
|
-
* control={form.control}
|
|
1231
|
-
* name="volume"
|
|
1232
|
-
* label="Volume"
|
|
1233
|
-
* sliderProps={{
|
|
1234
|
-
* minValue: 0,
|
|
1235
|
-
* maxValue: 100,
|
|
1236
|
-
* step: 10,
|
|
1237
|
-
* marks: [
|
|
1238
|
-
* { value: 0, label: "0" },
|
|
1239
|
-
* { value: 50, label: "50" },
|
|
1240
|
-
* { value: 100, label: "100" },
|
|
1241
|
-
* ],
|
|
1242
|
-
* }}
|
|
1243
|
-
* />
|
|
1244
|
-
* ```
|
|
1245
|
-
*/
|
|
1246
|
-
declare function SliderField<TFieldValues extends FieldValues>(props: SliderFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
1247
|
-
|
|
1248
|
-
/**
|
|
1249
|
-
* Props for the SwitchField component.
|
|
1250
|
-
*
|
|
1251
|
-
* @template TFieldValues - The form data type
|
|
1252
|
-
*
|
|
1253
|
-
* @example
|
|
1254
|
-
* ```tsx
|
|
1255
|
-
* import { SwitchField } from "@rachelallyson/hero-hook-form";
|
|
1256
|
-
* import { useForm } from "react-hook-form";
|
|
1257
|
-
*
|
|
1258
|
-
* const form = useForm({
|
|
1259
|
-
* defaultValues: { notifications: false },
|
|
1260
|
-
* });
|
|
1261
|
-
*
|
|
1262
|
-
* <SwitchField
|
|
1263
|
-
* control={form.control}
|
|
1264
|
-
* name="notifications"
|
|
1265
|
-
* label="Enable notifications"
|
|
1266
|
-
* description="Receive email notifications"
|
|
1267
|
-
* />
|
|
1268
|
-
* ```
|
|
1269
|
-
*/
|
|
1270
|
-
type SwitchFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, boolean> & WithControl<TFieldValues> & {
|
|
1271
|
-
/** Additional props to pass to the underlying Switch component */
|
|
1272
|
-
switchProps?: Omit<React$1.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">;
|
|
1273
|
-
};
|
|
1274
|
-
/**
|
|
1275
|
-
* A switch/toggle field component that integrates React Hook Form with HeroUI Switch.
|
|
1276
|
-
*
|
|
1277
|
-
* This component provides a type-safe switch field with validation support,
|
|
1278
|
-
* error handling, and accessibility features. The field value is a boolean.
|
|
1279
|
-
*
|
|
1280
|
-
* @template TFieldValues - The form data type
|
|
1281
|
-
*
|
|
1282
|
-
* @param props - The switch field props
|
|
1283
|
-
* @returns The rendered switch field component
|
|
1284
|
-
*
|
|
1285
|
-
* @example
|
|
1286
|
-
* ```tsx
|
|
1287
|
-
* import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
1288
|
-
* import { z } from "zod";
|
|
1289
|
-
*
|
|
1290
|
-
* const schema = z.object({
|
|
1291
|
-
* notifications: z.boolean(),
|
|
1292
|
-
* darkMode: z.boolean().default(false),
|
|
1293
|
-
* });
|
|
1294
|
-
*
|
|
1295
|
-
* function MyForm() {
|
|
1296
|
-
* return (
|
|
1297
|
-
* <ZodForm
|
|
1298
|
-
* config={{
|
|
1299
|
-
* schema,
|
|
1300
|
-
* fields: [
|
|
1301
|
-
* FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications"),
|
|
1302
|
-
* FormFieldHelpers.switch("darkMode", "Dark mode"),
|
|
1303
|
-
* ],
|
|
1304
|
-
* }}
|
|
1305
|
-
* onSubmit={(data) => console.log(data)}
|
|
1306
|
-
* />
|
|
1307
|
-
* );
|
|
1308
|
-
* }
|
|
1309
|
-
* ```
|
|
1310
|
-
*
|
|
1311
|
-
* @example
|
|
1312
|
-
* ```tsx
|
|
1313
|
-
* // With custom styling
|
|
1314
|
-
* <SwitchField
|
|
1315
|
-
* control={form.control}
|
|
1316
|
-
* name="notifications"
|
|
1317
|
-
* label="Enable notifications"
|
|
1318
|
-
* switchProps={{
|
|
1319
|
-
* color: "success",
|
|
1320
|
-
* size: "lg",
|
|
1321
|
-
* }}
|
|
1322
|
-
* />
|
|
1323
|
-
* ```
|
|
1324
|
-
*/
|
|
1325
|
-
declare function SwitchField<TFieldValues extends FieldValues>(props: SwitchFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
1326
|
-
|
|
1327
|
-
/**
|
|
1328
|
-
* Props for the TextareaField component.
|
|
1329
|
-
*
|
|
1330
|
-
* @template TFieldValues - The form data type
|
|
1331
|
-
*
|
|
1332
|
-
* @example
|
|
1333
|
-
* ```tsx
|
|
1334
|
-
* import { TextareaField } from "@rachelallyson/hero-hook-form";
|
|
1335
|
-
* import { useForm } from "react-hook-form";
|
|
1336
|
-
*
|
|
1337
|
-
* const form = useForm({
|
|
1338
|
-
* defaultValues: { message: "" },
|
|
1339
|
-
* });
|
|
1340
|
-
*
|
|
1341
|
-
* <TextareaField
|
|
1342
|
-
* control={form.control}
|
|
1343
|
-
* name="message"
|
|
1344
|
-
* label="Message"
|
|
1345
|
-
* description="Enter your message here"
|
|
1346
|
-
* placeholder="Type your message..."
|
|
1347
|
-
* />
|
|
1348
|
-
* ```
|
|
1349
|
-
*/
|
|
1350
|
-
type TextareaFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, string> & WithControl<TFieldValues> & {
|
|
1351
|
-
/** Additional props to pass to the underlying Textarea component */
|
|
1352
|
-
textareaProps?: Omit<React$1.ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
1353
|
-
};
|
|
1354
|
-
/**
|
|
1355
|
-
* A textarea field component that integrates React Hook Form with HeroUI Textarea.
|
|
1356
|
-
*
|
|
1357
|
-
* This component provides a type-safe textarea field with validation support,
|
|
1358
|
-
* error handling, and accessibility features. Use this for multi-line text input.
|
|
1359
|
-
*
|
|
1360
|
-
* @template TFieldValues - The form data type
|
|
1361
|
-
*
|
|
1362
|
-
* @param props - The textarea field props
|
|
1363
|
-
* @returns The rendered textarea field component
|
|
1364
|
-
*
|
|
1365
|
-
* @example
|
|
1366
|
-
* ```tsx
|
|
1367
|
-
* import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
1368
|
-
* import { z } from "zod";
|
|
1369
|
-
*
|
|
1370
|
-
* const schema = z.object({
|
|
1371
|
-
* message: z.string().min(10, "Message must be at least 10 characters"),
|
|
1372
|
-
* feedback: z.string().max(500, "Feedback must be less than 500 characters"),
|
|
1373
|
-
* });
|
|
1374
|
-
*
|
|
1375
|
-
* function MyForm() {
|
|
1376
|
-
* return (
|
|
1377
|
-
* <ZodForm
|
|
1378
|
-
* config={{
|
|
1379
|
-
* schema,
|
|
1380
|
-
* fields: [
|
|
1381
|
-
* FormFieldHelpers.textarea("message", "Message", "Enter your message"),
|
|
1382
|
-
* FormFieldHelpers.textarea("feedback", "Feedback"),
|
|
1383
|
-
* ],
|
|
1384
|
-
* }}
|
|
1385
|
-
* onSubmit={(data) => console.log(data)}
|
|
1386
|
-
* />
|
|
1387
|
-
* );
|
|
1388
|
-
* }
|
|
1389
|
-
* ```
|
|
1390
|
-
*
|
|
1391
|
-
* @example
|
|
1392
|
-
* ```tsx
|
|
1393
|
-
* // With custom styling and min/max rows
|
|
1394
|
-
* <TextareaField
|
|
1395
|
-
* control={form.control}
|
|
1396
|
-
* name="message"
|
|
1397
|
-
* label="Message"
|
|
1398
|
-
* textareaProps={{
|
|
1399
|
-
* minRows: 3,
|
|
1400
|
-
* maxRows: 10,
|
|
1401
|
-
* variant: "bordered",
|
|
1402
|
-
* }}
|
|
1403
|
-
* />
|
|
1404
|
-
* ```
|
|
1405
|
-
*/
|
|
1406
|
-
declare function TextareaField<TFieldValues extends FieldValues>(props: TextareaFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
1407
|
-
|
|
1408
|
-
/**
|
|
1409
|
-
* Options for the useFormHelper hook.
|
|
1410
|
-
*
|
|
1411
|
-
* @template T - The form data type
|
|
1412
|
-
*/
|
|
1413
|
-
interface UseFormHelperOptions<T extends FieldValues> {
|
|
1414
|
-
onError?: (error: FormValidationError) => void;
|
|
1415
|
-
onSubmit: SubmitHandler<T>;
|
|
1416
|
-
onSuccess?: (data: T) => void;
|
|
1417
|
-
defaultValues?: Partial<T>;
|
|
1418
|
-
methods?: UseFormReturn<T>;
|
|
1419
|
-
}
|
|
1420
|
-
/**
|
|
1421
|
-
* Hook for managing form state with enhanced features.
|
|
1422
|
-
*
|
|
1423
|
-
* @description
|
|
1424
|
-
* Provides form state management with loading states, error handling,
|
|
1425
|
-
* and submission tracking. Automatically handles form validation and
|
|
1426
|
-
* provides callbacks for success and error cases. This hook wraps
|
|
1427
|
-
* React Hook Form's useForm with additional state management.
|
|
1428
|
-
*
|
|
1429
|
-
* @template T - The form data type
|
|
1430
|
-
*
|
|
1431
|
-
* @param {UseFormHelperOptions<T>} options - Hook options
|
|
1432
|
-
* @param {Partial<T>} [options.defaultValues] - Default form values
|
|
1433
|
-
* @param {UseFormReturn<T>} [options.methods] - Optional existing form instance
|
|
1434
|
-
* @param {SubmitHandler<T>} options.onSubmit - Submit handler function
|
|
1435
|
-
* @param {(error: FormValidationError) => void} [options.onError] - Error handler callback
|
|
1436
|
-
* @param {(data: T) => void} [options.onSuccess] - Success handler callback
|
|
1437
|
-
*
|
|
1438
|
-
* @returns {Object} Form helper with state and methods
|
|
1439
|
-
* @returns {UseFormReturn<T>} form - React Hook Form instance
|
|
1440
|
-
* @returns {() => Promise<void>} handleSubmit - Submit handler function
|
|
1441
|
-
* @returns {() => void} resetForm - Reset form function
|
|
1442
|
-
* @returns {boolean} isSubmitting - Whether form is currently submitting
|
|
1443
|
-
* @returns {boolean} isSubmitted - Whether form has been submitted
|
|
1444
|
-
* @returns {boolean} isSuccess - Whether last submission was successful
|
|
1445
|
-
* @returns {string|undefined} error - Error message if submission failed
|
|
1446
|
-
* @returns {FormSubmissionState} submissionState - Complete submission state object
|
|
1447
|
-
*
|
|
1448
|
-
* @example
|
|
1449
|
-
* ```tsx
|
|
1450
|
-
* import { useFormHelper } from "@rachelallyson/hero-hook-form";
|
|
1451
|
-
*
|
|
1452
|
-
* function MyForm() {
|
|
1453
|
-
* const { form, handleSubmit, isSubmitting, error } = useFormHelper({
|
|
1454
|
-
* defaultValues: { email: "", name: "" },
|
|
1455
|
-
* onSubmit: async (data) => {
|
|
1456
|
-
* await submitToServer(data);
|
|
1457
|
-
* },
|
|
1458
|
-
* onError: (error) => {
|
|
1459
|
-
* console.error("Validation errors:", error);
|
|
1460
|
-
* },
|
|
1461
|
-
* onSuccess: (data) => {
|
|
1462
|
-
* console.log("Success:", data);
|
|
1463
|
-
* },
|
|
1464
|
-
* });
|
|
1465
|
-
*
|
|
1466
|
-
* return (
|
|
1467
|
-
* <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
|
|
1468
|
-
* <button disabled={isSubmitting}>
|
|
1469
|
-
* {isSubmitting ? "Submitting..." : "Submit"}
|
|
1470
|
-
* </button>
|
|
1471
|
-
* {error && <div className="error">{error}</div>}
|
|
1472
|
-
* </form>
|
|
1473
|
-
* );
|
|
1474
|
-
* }
|
|
1475
|
-
* ```
|
|
1476
|
-
*
|
|
1477
|
-
* @example
|
|
1478
|
-
* Using with existing form instance:
|
|
1479
|
-
* ```tsx
|
|
1480
|
-
* import { useForm } from "react-hook-form";
|
|
1481
|
-
* import { useFormHelper } from "@rachelallyson/hero-hook-form";
|
|
1482
|
-
*
|
|
1483
|
-
* function MyForm() {
|
|
1484
|
-
* const existingForm = useForm({ defaultValues: { email: "" } });
|
|
1485
|
-
* const { handleSubmit, isSubmitting } = useFormHelper({
|
|
1486
|
-
* methods: existingForm,
|
|
1487
|
-
* onSubmit: async (data) => {
|
|
1488
|
-
* await submitToServer(data);
|
|
1489
|
-
* },
|
|
1490
|
-
* });
|
|
1491
|
-
*
|
|
1492
|
-
* // Use existingForm and handleSubmit together
|
|
1493
|
-
* }
|
|
1494
|
-
* ```
|
|
1495
|
-
*
|
|
1496
|
-
* @see {@link useHeroForm} for alternative hook with different API
|
|
1497
|
-
* @see {@link ConfigurableForm} for component that uses this hook
|
|
1498
|
-
* @category Hooks
|
|
1499
|
-
*/
|
|
1500
|
-
declare function useFormHelper<T extends FieldValues>({ defaultValues, methods, onError, onSubmit, onSuccess, }: UseFormHelperOptions<T>): {
|
|
1501
|
-
error: string | undefined;
|
|
1502
|
-
form: UseFormReturn<T>;
|
|
1503
|
-
handleSubmit: () => Promise<void>;
|
|
1504
|
-
isSubmitted: boolean;
|
|
1505
|
-
isSubmitting: boolean;
|
|
1506
|
-
isSuccess: boolean;
|
|
1507
|
-
resetForm: () => void;
|
|
1508
|
-
submissionState: FormSubmissionState;
|
|
1509
|
-
};
|
|
1510
|
-
|
|
1511
|
-
/**
|
|
1512
|
-
* Enhanced hook that provides both form methods and styling defaults.
|
|
1513
|
-
*
|
|
1514
|
-
* @description
|
|
1515
|
-
* This hook combines React Hook Form's useFormContext with Hero Hook Form's
|
|
1516
|
-
* styling defaults, giving you access to both form functionality and
|
|
1517
|
-
* component styling in one convenient hook. Must be used within a FormProvider
|
|
1518
|
-
* context (provided by ZodForm, ConfigurableForm, or manual FormProvider).
|
|
1519
|
-
*
|
|
1520
|
-
* @template TFieldValues - The form data type
|
|
1521
|
-
*
|
|
1522
|
-
* @returns {Object} Enhanced form object with all React Hook Form methods and Hero Hook Form defaults
|
|
1523
|
-
* @returns {UseFormReturn<TFieldValues>} All React Hook Form methods (formState, getValues, setValue, etc.)
|
|
1524
|
-
* @returns {HeroHookFormDefaultsConfig} defaults - Hero Hook Form styling defaults
|
|
1525
|
-
*
|
|
1526
|
-
* @example
|
|
1527
|
-
* ```tsx
|
|
1528
|
-
* import { useHeroForm } from "@rachelallyson/hero-hook-form";
|
|
1529
|
-
*
|
|
1530
|
-
* function MyComponent() {
|
|
1531
|
-
* const { formState, getValues, setValue, defaults } = useHeroForm();
|
|
1532
|
-
*
|
|
1533
|
-
* // Access form state
|
|
1534
|
-
* const isSubmitting = formState.isSubmitting;
|
|
1535
|
-
* const errors = formState.errors;
|
|
1536
|
-
*
|
|
1537
|
-
* // Access form methods
|
|
1538
|
-
* const values = getValues();
|
|
1539
|
-
* const handleReset = () => setValue('fieldName', '');
|
|
1540
|
-
*
|
|
1541
|
-
* // Access styling defaults
|
|
1542
|
-
* const inputDefaults = defaults.input;
|
|
1543
|
-
* const buttonDefaults = defaults.submitButton;
|
|
1544
|
-
* }
|
|
1545
|
-
* ```
|
|
1546
|
-
*
|
|
1547
|
-
* @see {@link useFormHelper} for form state management with callbacks
|
|
1548
|
-
* @see {@link useFormContext} from React Hook Form for base functionality
|
|
1549
|
-
* @category Hooks
|
|
1550
|
-
*/
|
|
1551
|
-
declare function useHeroForm<TFieldValues extends FieldValues>(): {
|
|
1552
|
-
defaults: Required<Pick<HeroHookFormDefaultsConfig, "input" | "textarea" | "select" | "switch" | "radioGroup" | "checkbox" | "slider" | "dateInput" | "submitButton">>;
|
|
1553
|
-
watch: react_hook_form.UseFormWatch<TFieldValues>;
|
|
1554
|
-
getValues: react_hook_form.UseFormGetValues<TFieldValues>;
|
|
1555
|
-
getFieldState: react_hook_form.UseFormGetFieldState<TFieldValues>;
|
|
1556
|
-
setError: react_hook_form.UseFormSetError<TFieldValues>;
|
|
1557
|
-
clearErrors: react_hook_form.UseFormClearErrors<TFieldValues>;
|
|
1558
|
-
setValue: react_hook_form.UseFormSetValue<TFieldValues>;
|
|
1559
|
-
trigger: react_hook_form.UseFormTrigger<TFieldValues>;
|
|
1560
|
-
formState: react_hook_form.FormState<TFieldValues>;
|
|
1561
|
-
resetField: react_hook_form.UseFormResetField<TFieldValues>;
|
|
1562
|
-
reset: react_hook_form.UseFormReset<TFieldValues>;
|
|
1563
|
-
handleSubmit: react_hook_form.UseFormHandleSubmit<TFieldValues, TFieldValues>;
|
|
1564
|
-
unregister: react_hook_form.UseFormUnregister<TFieldValues>;
|
|
1565
|
-
control: react_hook_form.Control<TFieldValues, any, TFieldValues>;
|
|
1566
|
-
register: react_hook_form.UseFormRegister<TFieldValues>;
|
|
1567
|
-
setFocus: react_hook_form.UseFormSetFocus<TFieldValues>;
|
|
1568
|
-
subscribe: react_hook_form.UseFormSubscribe<TFieldValues>;
|
|
1569
|
-
};
|
|
1570
|
-
|
|
1571
|
-
type InputProps = React$1.ComponentProps<typeof Input>;
|
|
1572
|
-
type TextareaProps = React$1.ComponentProps<typeof Textarea>;
|
|
1573
|
-
type SelectProps = React$1.ComponentProps<typeof Select>;
|
|
1574
|
-
type SharedTextLikeColor = Extract<InputProps["color"], Extract<TextareaProps["color"], SelectProps["color"]>>;
|
|
1575
|
-
type SharedTextLikeSize = Extract<InputProps["size"], Extract<TextareaProps["size"], SelectProps["size"]>>;
|
|
1576
|
-
type SharedTextLikeVariant = Extract<InputProps["variant"], Extract<TextareaProps["variant"], SelectProps["variant"]>>;
|
|
1577
|
-
type SharedTextLikeRadius = Extract<InputProps["radius"], Extract<TextareaProps["radius"], SelectProps["radius"]>>;
|
|
1578
|
-
type SharedTextLikeLabelPlacement = Extract<InputProps["labelPlacement"], Extract<TextareaProps["labelPlacement"], SelectProps["labelPlacement"]>>;
|
|
1579
|
-
type CommonFieldDefaults = Partial<{
|
|
1580
|
-
color: SharedTextLikeColor;
|
|
1581
|
-
size: SharedTextLikeSize;
|
|
1582
|
-
variant: SharedTextLikeVariant;
|
|
1583
|
-
radius: SharedTextLikeRadius;
|
|
1584
|
-
labelPlacement: SharedTextLikeLabelPlacement;
|
|
1585
|
-
}>;
|
|
1586
|
-
type InputDefaults = Partial<Omit<InputProps, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
1587
|
-
type TextareaDefaults = Partial<Omit<TextareaProps, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
1588
|
-
type CheckboxDefaults = Partial<Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
1589
|
-
type RadioGroupDefaults = Partial<Omit<React$1.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">>;
|
|
1590
|
-
type SelectDefaults = Partial<Omit<SelectProps, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
1591
|
-
type DateInputDefaults = Partial<Omit<React$1.ComponentProps<typeof DateInput>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
1592
|
-
type SliderDefaults = Partial<Omit<React$1.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
1593
|
-
type SwitchDefaults = Partial<Omit<React$1.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">>;
|
|
1594
|
-
type ButtonDefaults = Partial<Omit<React$1.ComponentProps<typeof Button>, "type" | "isLoading">>;
|
|
1595
|
-
interface HeroHookFormDefaultsConfig {
|
|
1596
|
-
common?: CommonFieldDefaults;
|
|
1597
|
-
input?: InputDefaults;
|
|
1598
|
-
textarea?: TextareaDefaults;
|
|
1599
|
-
checkbox?: CheckboxDefaults;
|
|
1600
|
-
radioGroup?: RadioGroupDefaults;
|
|
1601
|
-
select?: SelectDefaults;
|
|
1602
|
-
dateInput?: DateInputDefaults;
|
|
1603
|
-
slider?: SliderDefaults;
|
|
1604
|
-
switch?: SwitchDefaults;
|
|
1605
|
-
submitButton?: ButtonDefaults;
|
|
1606
|
-
}
|
|
1607
|
-
interface HeroHookFormProviderProps {
|
|
1608
|
-
children: React$1.ReactNode;
|
|
1609
|
-
defaults?: HeroHookFormDefaultsConfig;
|
|
1610
|
-
}
|
|
1611
|
-
declare function HeroHookFormProvider(props: HeroHookFormProviderProps): React$1.JSX.Element;
|
|
1612
|
-
declare function useHeroHookFormDefaults(): Required<Pick<HeroHookFormDefaultsConfig, "input" | "textarea" | "checkbox" | "radioGroup" | "select" | "dateInput" | "slider" | "switch" | "submitButton">>;
|
|
1613
|
-
|
|
1614
|
-
interface FormProps<TFieldValues extends FieldValues> {
|
|
1615
|
-
methods: UseFormReturn<TFieldValues>;
|
|
1616
|
-
onSubmit: SubmitHandler<TFieldValues>;
|
|
1617
|
-
className?: string;
|
|
1618
|
-
children: React$1.ReactNode;
|
|
1619
|
-
id?: string;
|
|
1620
|
-
noValidate?: boolean;
|
|
1621
|
-
}
|
|
1622
|
-
declare function FormProvider<TFieldValues extends FieldValues>(props: FormProps<TFieldValues>): React$1.JSX.Element;
|
|
1623
|
-
|
|
1624
|
-
/**
|
|
1625
|
-
* Enhanced form state with submission tracking and error management.
|
|
1626
|
-
*
|
|
1627
|
-
* @template T - The form data type
|
|
1628
|
-
*/
|
|
1629
|
-
interface EnhancedFormState<T extends FieldValues> {
|
|
1630
|
-
status: "idle" | "submitting" | "success" | "error";
|
|
1631
|
-
isSubmitting: boolean;
|
|
1632
|
-
isSuccess: boolean;
|
|
1633
|
-
isError: boolean;
|
|
1634
|
-
error?: string;
|
|
1635
|
-
submittedData?: T;
|
|
1636
|
-
touchedFields: Set<Path<T>>;
|
|
1637
|
-
dirtyFields: Set<Path<T>>;
|
|
1638
|
-
hasErrors: boolean;
|
|
1639
|
-
errorCount: number;
|
|
1640
|
-
handleSuccess: (data: T) => void;
|
|
1641
|
-
handleError: (error: string) => void;
|
|
1642
|
-
reset: () => void;
|
|
1643
|
-
}
|
|
1644
|
-
/**
|
|
1645
|
-
* Options for the useEnhancedFormState hook.
|
|
1646
|
-
*
|
|
1647
|
-
* @template T - The form data type
|
|
1648
|
-
*/
|
|
1649
|
-
interface UseEnhancedFormStateOptions<T extends FieldValues> {
|
|
1650
|
-
onSuccess?: (data: T) => void;
|
|
1651
|
-
onError?: (error: string) => void;
|
|
1652
|
-
successMessage?: string;
|
|
1653
|
-
errorMessage?: string;
|
|
1654
|
-
autoReset?: boolean;
|
|
1655
|
-
resetDelay?: number;
|
|
1656
|
-
}
|
|
1657
|
-
/**
|
|
1658
|
-
* Hook for managing enhanced form state with submission tracking.
|
|
1659
|
-
*
|
|
1660
|
-
* @description
|
|
1661
|
-
* Provides advanced form state management including submission status,
|
|
1662
|
-
* error tracking, touched/dirty field tracking, and automatic reset
|
|
1663
|
-
* functionality. Useful for building forms with rich UI feedback.
|
|
1664
|
-
*
|
|
1665
|
-
* @template T - The form data type
|
|
1666
|
-
*
|
|
1667
|
-
* @param {UseFormReturn<T>} form - React Hook Form instance
|
|
1668
|
-
* @param {UseEnhancedFormStateOptions<T>} [options] - Configuration options
|
|
1669
|
-
* @param {(data: T) => void} [options.onSuccess] - Success callback
|
|
1670
|
-
* @param {(error: string) => void} [options.onError] - Error callback
|
|
1671
|
-
* @param {string} [options.successMessage] - Custom success message
|
|
1672
|
-
* @param {string} [options.errorMessage] - Custom error message
|
|
1673
|
-
* @param {boolean} [options.autoReset=true] - Automatically reset after success
|
|
1674
|
-
* @param {number} [options.resetDelay=3000] - Delay before auto-reset (ms)
|
|
1675
|
-
*
|
|
1676
|
-
* @returns {EnhancedFormState<T>} Enhanced form state object
|
|
1677
|
-
* @returns {"idle"|"submitting"|"success"|"error"} status - Current submission status
|
|
1678
|
-
* @returns {boolean} isSubmitting - Whether form is currently submitting
|
|
1679
|
-
* @returns {boolean} isSuccess - Whether last submission was successful
|
|
1680
|
-
* @returns {boolean} isError - Whether last submission had an error
|
|
1681
|
-
* @returns {string|undefined} error - Error message if submission failed
|
|
1682
|
-
* @returns {T|undefined} submittedData - Data from last successful submission
|
|
1683
|
-
* @returns {Set<Path<T>>} touchedFields - Set of touched field paths
|
|
1684
|
-
* @returns {Set<Path<T>>} dirtyFields - Set of dirty field paths
|
|
1685
|
-
* @returns {boolean} hasErrors - Whether form has validation errors
|
|
1686
|
-
* @returns {number} errorCount - Number of validation errors
|
|
1687
|
-
* @returns {(data: T) => void} handleSuccess - Function to mark submission as successful
|
|
1688
|
-
* @returns {(error: string) => void} handleError - Function to mark submission as failed
|
|
1689
|
-
* @returns {() => void} reset - Function to reset state to idle
|
|
1690
|
-
*
|
|
1691
|
-
* @example
|
|
1692
|
-
* ```tsx
|
|
1693
|
-
* import { useEnhancedFormState } from "@rachelallyson/hero-hook-form";
|
|
1694
|
-
* import { useForm } from "react-hook-form";
|
|
1695
|
-
*
|
|
1696
|
-
* function MyForm() {
|
|
1697
|
-
* const form = useForm();
|
|
1698
|
-
* const state = useEnhancedFormState(form, {
|
|
1699
|
-
* onSuccess: (data) => {
|
|
1700
|
-
* console.log("Success:", data);
|
|
1701
|
-
* },
|
|
1702
|
-
* onError: (error) => {
|
|
1703
|
-
* console.error("Error:", error);
|
|
1704
|
-
* },
|
|
1705
|
-
* autoReset: true,
|
|
1706
|
-
* resetDelay: 3000,
|
|
1707
|
-
* });
|
|
1708
|
-
*
|
|
1709
|
-
* const handleSubmit = async (data) => {
|
|
1710
|
-
* try {
|
|
1711
|
-
* await submitToServer(data);
|
|
1712
|
-
* state.handleSuccess(data);
|
|
1713
|
-
* } catch (error) {
|
|
1714
|
-
* state.handleError(error.message);
|
|
1715
|
-
* }
|
|
1716
|
-
* };
|
|
1717
|
-
*
|
|
1718
|
-
* return (
|
|
1719
|
-
* <form onSubmit={form.handleSubmit(handleSubmit)}>
|
|
1720
|
-
* {/* form fields *\/}
|
|
1721
|
-
* {state.isSubmitting && <div>Submitting...</div>}
|
|
1722
|
-
* {state.isSuccess && <div>Success!</div>}
|
|
1723
|
-
* {state.error && <div>Error: {state.error}</div>}
|
|
1724
|
-
* </form>
|
|
1725
|
-
* );
|
|
1726
|
-
* }
|
|
1727
|
-
* ```
|
|
1728
|
-
*
|
|
1729
|
-
* @see {@link ZodForm} which uses this hook internally
|
|
1730
|
-
* @category Hooks
|
|
1731
|
-
*/
|
|
1732
|
-
declare function useEnhancedFormState<T extends FieldValues>(form: UseFormReturn<T>, options?: UseEnhancedFormStateOptions<T>): EnhancedFormState<T>;
|
|
1733
|
-
|
|
1734
|
-
interface SubmitButtonProps {
|
|
1735
|
-
children: React$1.ReactNode;
|
|
1736
|
-
isLoading?: boolean;
|
|
1737
|
-
isSuccess?: boolean;
|
|
1738
|
-
successText?: string;
|
|
1739
|
-
loadingText?: string;
|
|
1740
|
-
enhancedState?: EnhancedFormState<any>;
|
|
1741
|
-
buttonProps?: Omit<React$1.ComponentProps<typeof Button>, "type" | "isLoading">;
|
|
1742
|
-
}
|
|
1743
|
-
declare function SubmitButton(props: SubmitButtonProps): React$1.JSX.Element;
|
|
1744
|
-
|
|
1745
|
-
/**
|
|
1746
|
-
* Server field error structure.
|
|
1747
|
-
*
|
|
1748
|
-
* @template TFieldValues - The form data type
|
|
1749
|
-
*/
|
|
1750
|
-
interface ServerFieldError<TFieldValues extends FieldValues> {
|
|
1751
|
-
path: Path<TFieldValues>;
|
|
1752
|
-
message: string;
|
|
1753
|
-
type?: string;
|
|
1754
|
-
}
|
|
1755
|
-
/**
|
|
1756
|
-
* Server form error structure containing field errors.
|
|
1757
|
-
*
|
|
1758
|
-
* @template TFieldValues - The form data type
|
|
1759
|
-
*/
|
|
1760
|
-
interface ServerFormError<TFieldValues extends FieldValues> {
|
|
1761
|
-
message?: string;
|
|
1762
|
-
fieldErrors?: readonly ServerFieldError<TFieldValues>[];
|
|
1763
|
-
}
|
|
1764
|
-
/**
|
|
1765
|
-
* Applies server-side validation errors to a React Hook Form instance.
|
|
1766
|
-
*
|
|
1767
|
-
* @description
|
|
1768
|
-
* Maps server-returned field errors to React Hook Form's error state.
|
|
1769
|
-
* Useful for displaying validation errors from API responses. This function
|
|
1770
|
-
* iterates through the field errors and sets them on the form using
|
|
1771
|
-
* React Hook Form's setError function.
|
|
1772
|
-
*
|
|
1773
|
-
* @template TFieldValues - The form data type
|
|
1774
|
-
*
|
|
1775
|
-
* @param {UseFormSetError<TFieldValues>} setError - React Hook Form's setError function
|
|
1776
|
-
* @param {ServerFormError<TFieldValues>} serverError - Server error containing field errors
|
|
1777
|
-
*
|
|
1778
|
-
* @example
|
|
1779
|
-
* ```tsx
|
|
1780
|
-
* import { applyServerErrors } from "@rachelallyson/hero-hook-form";
|
|
1781
|
-
* import { useForm } from "react-hook-form";
|
|
1782
|
-
*
|
|
1783
|
-
* function MyForm() {
|
|
1784
|
-
* const form = useForm();
|
|
1785
|
-
*
|
|
1786
|
-
* const handleSubmit = async (data) => {
|
|
1787
|
-
* try {
|
|
1788
|
-
* const response = await fetch("/api/submit", {
|
|
1789
|
-
* method: "POST",
|
|
1790
|
-
* body: JSON.stringify(data),
|
|
1791
|
-
* });
|
|
1792
|
-
*
|
|
1793
|
-
* if (!response.ok) {
|
|
1794
|
-
* const errorData = await response.json();
|
|
1795
|
-
* applyServerErrors(form.setError, errorData);
|
|
1796
|
-
* }
|
|
1797
|
-
* } catch (error) {
|
|
1798
|
-
* console.error("Error:", error);
|
|
1799
|
-
* }
|
|
1800
|
-
* };
|
|
1801
|
-
*
|
|
1802
|
-
* return (
|
|
1803
|
-
* <form onSubmit={form.handleSubmit(handleSubmit)}>
|
|
1804
|
-
* {/* form fields go here *\/}
|
|
1805
|
-
* </form>
|
|
1806
|
-
* );
|
|
1807
|
-
* }
|
|
1808
|
-
* ```
|
|
1809
|
-
*
|
|
1810
|
-
* @example
|
|
1811
|
-
* With ZodForm error handling:
|
|
1812
|
-
* ```tsx
|
|
1813
|
-
* import { ZodForm, applyServerErrors } from "@rachelallyson/hero-hook-form";
|
|
1814
|
-
*
|
|
1815
|
-
* function MyForm() {
|
|
1816
|
-
* const form = useForm();
|
|
1817
|
-
*
|
|
1818
|
-
* const handleSubmit = async (data) => {
|
|
1819
|
-
* try {
|
|
1820
|
-
* await submitToServer(data);
|
|
1821
|
-
* } catch (error) {
|
|
1822
|
-
* if (error.fieldErrors) {
|
|
1823
|
-
* applyServerErrors(form.setError, {
|
|
1824
|
-
* fieldErrors: error.fieldErrors,
|
|
1825
|
-
* });
|
|
1826
|
-
* }
|
|
1827
|
-
* }
|
|
1828
|
-
* };
|
|
1829
|
-
*
|
|
1830
|
-
* return <ZodForm config={{ schema, fields }} onSubmit={handleSubmit} />;
|
|
1831
|
-
* }
|
|
1832
|
-
* ```
|
|
1833
|
-
*
|
|
1834
|
-
* @see {@link ServerFormError} for error structure
|
|
1835
|
-
* @see {@link ServerFieldError} for field error structure
|
|
1836
|
-
* @category Utilities
|
|
1837
|
-
*/
|
|
1838
|
-
declare function applyServerErrors<TFieldValues extends FieldValues>(setError: UseFormSetError<TFieldValues>, serverError: ServerFormError<TFieldValues>): void;
|
|
1839
|
-
|
|
1840
|
-
/**
|
|
1841
|
-
* Testing utilities for forms
|
|
1842
|
-
* These utilities help with testing form behavior and state
|
|
1843
|
-
*/
|
|
1844
|
-
/**
|
|
1845
|
-
* Creates form test utilities for a given form instance
|
|
1846
|
-
*/
|
|
1847
|
-
declare function createFormTestUtils<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>): FormTestUtils<TFieldValues>;
|
|
1848
|
-
/**
|
|
1849
|
-
* Mock form data for testing
|
|
1850
|
-
*/
|
|
1851
|
-
declare function createMockFormData<TFieldValues extends FieldValues>(overrides?: Partial<TFieldValues>): TFieldValues;
|
|
1852
|
-
/**
|
|
1853
|
-
* Mock form errors for testing
|
|
1854
|
-
*/
|
|
1855
|
-
declare function createMockFormErrors<TFieldValues extends FieldValues>(overrides?: Partial<FieldErrors<TFieldValues>>): FieldErrors<TFieldValues>;
|
|
1856
|
-
/**
|
|
1857
|
-
* Wait for form state to change (useful for async operations)
|
|
1858
|
-
*/
|
|
1859
|
-
declare function waitForFormState<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, condition: (state: unknown) => boolean, timeout?: number): Promise<void>;
|
|
1860
|
-
/**
|
|
1861
|
-
* Simulate user input on a field
|
|
1862
|
-
*/
|
|
1863
|
-
declare function simulateFieldInput<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, name: Path<TFieldValues>, value: unknown): void;
|
|
1864
|
-
/**
|
|
1865
|
-
* Simulate form submission
|
|
1866
|
-
*/
|
|
1867
|
-
declare function simulateFormSubmission<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, onSubmit: (data: TFieldValues) => void | Promise<void>): Promise<void>;
|
|
1868
|
-
/**
|
|
1869
|
-
* Check if form has validation errors
|
|
1870
|
-
*/
|
|
1871
|
-
declare function hasFormErrors<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>): boolean;
|
|
1872
|
-
/**
|
|
1873
|
-
* Get all form errors as a flat array
|
|
1874
|
-
*/
|
|
1875
|
-
declare function getFormErrors<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>): string[];
|
|
1876
|
-
/**
|
|
1877
|
-
* Check if a specific field has an error
|
|
1878
|
-
*/
|
|
1879
|
-
declare function hasFieldError<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, name: Path<TFieldValues>): boolean;
|
|
1880
|
-
/**
|
|
1881
|
-
* Get error message for a specific field
|
|
1882
|
-
*/
|
|
1883
|
-
declare function getFieldError<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, name: Path<TFieldValues>): string | undefined;
|
|
1884
|
-
|
|
1885
|
-
/**
|
|
1886
|
-
* Validation utility functions for common form validation patterns
|
|
1887
|
-
* These utilities help create consistent validation schemas across forms
|
|
1888
|
-
*/
|
|
1889
|
-
/**
|
|
1890
|
-
* Creates a minimum length validation schema
|
|
1891
|
-
*/
|
|
1892
|
-
declare const createMinLengthSchema: (min: number, fieldName: string) => z.ZodString;
|
|
1893
|
-
/**
|
|
1894
|
-
* Creates a maximum length validation schema
|
|
1895
|
-
*/
|
|
1896
|
-
declare const createMaxLengthSchema: (max: number, fieldName: string) => z.ZodString;
|
|
1897
|
-
/**
|
|
1898
|
-
* Creates an email validation schema
|
|
1899
|
-
*/
|
|
1900
|
-
declare const createEmailSchema: () => z.ZodEmail;
|
|
1901
|
-
/**
|
|
1902
|
-
* Creates a required field validation schema
|
|
1903
|
-
*/
|
|
1904
|
-
declare const createRequiredSchema: (fieldName: string) => z.ZodString;
|
|
1905
|
-
/**
|
|
1906
|
-
* Creates a URL validation schema
|
|
1907
|
-
*/
|
|
1908
|
-
declare const createUrlSchema: () => z.ZodString;
|
|
1909
|
-
/**
|
|
1910
|
-
* Creates a phone number validation schema
|
|
1911
|
-
*/
|
|
1912
|
-
declare const createPhoneSchema: () => z.ZodString;
|
|
1913
|
-
/**
|
|
1914
|
-
* Creates a password validation schema with common requirements
|
|
1915
|
-
*/
|
|
1916
|
-
declare const createPasswordSchema: (minLength?: number) => z.ZodString;
|
|
1917
|
-
/**
|
|
1918
|
-
* Creates a number validation schema with range
|
|
1919
|
-
*/
|
|
1920
|
-
declare const createNumberRangeSchema: (min: number, max: number, fieldName: string) => z.ZodNumber;
|
|
1921
|
-
/**
|
|
1922
|
-
* Creates a date validation schema
|
|
1923
|
-
*/
|
|
1924
|
-
declare const createDateSchema: (fieldName: string) => z.ZodDate;
|
|
1925
|
-
/**
|
|
1926
|
-
* Creates a future date validation schema
|
|
1927
|
-
*/
|
|
1928
|
-
declare const createFutureDateSchema: (fieldName: string) => z.ZodDate;
|
|
1929
|
-
/**
|
|
1930
|
-
* Creates a past date validation schema
|
|
1931
|
-
*/
|
|
1932
|
-
declare const createPastDateSchema: (fieldName: string) => z.ZodDate;
|
|
1933
|
-
/**
|
|
1934
|
-
* Creates a file validation schema
|
|
1935
|
-
*/
|
|
1936
|
-
declare const createFileSchema: (maxSizeInMB?: number, allowedTypes?: string[]) => z.ZodCustom<File, File>;
|
|
1937
|
-
/**
|
|
1938
|
-
* Creates a checkbox validation schema (must be checked)
|
|
1939
|
-
*/
|
|
1940
|
-
declare const createRequiredCheckboxSchema: (fieldName: string) => z.ZodBoolean;
|
|
1941
|
-
/**
|
|
1942
|
-
* Cross-field validation helpers
|
|
1943
|
-
*/
|
|
1944
|
-
declare const crossFieldValidation: {
|
|
1945
|
-
/**
|
|
1946
|
-
* Conditional required field validation
|
|
1947
|
-
*/
|
|
1948
|
-
conditionalRequired: (field: string, conditionField: string, conditionValue: any) => z.ZodObject<{
|
|
1949
|
-
[x: string]: z.ZodString | z.ZodAny;
|
|
1950
|
-
}, z.core.$strip>;
|
|
1951
|
-
/**
|
|
1952
|
-
* Date range validation
|
|
1953
|
-
*/
|
|
1954
|
-
dateRange: (startField: string, endField: string) => z.ZodObject<{
|
|
1955
|
-
[x: string]: z.ZodString;
|
|
1956
|
-
}, z.core.$strip>;
|
|
1957
|
-
/**
|
|
1958
|
-
* Password confirmation validation
|
|
1959
|
-
*/
|
|
1960
|
-
passwordConfirmation: (passwordField: string, confirmField: string) => z.ZodObject<{
|
|
1961
|
-
[x: string]: z.ZodString;
|
|
1962
|
-
}, z.core.$strip>;
|
|
1963
|
-
};
|
|
1964
|
-
/**
|
|
1965
|
-
* Common validation patterns for forms
|
|
1966
|
-
*/
|
|
1967
|
-
declare const commonValidations: {
|
|
1968
|
-
confirmPassword: (passwordField: string, confirmField: string) => z.ZodObject<{
|
|
1969
|
-
[x: string]: z.ZodString;
|
|
1970
|
-
}, z.core.$strip>;
|
|
1971
|
-
date: (fieldName: string) => z.ZodDate;
|
|
1972
|
-
email: z.ZodEmail;
|
|
1973
|
-
file: (maxSizeInMB?: number, allowedTypes?: string[]) => z.ZodCustom<File, File>;
|
|
1974
|
-
futureDate: (fieldName: string) => z.ZodDate;
|
|
1975
|
-
maxLength: (max: number, fieldName: string) => z.ZodString;
|
|
1976
|
-
minLength: (min: number, fieldName: string) => z.ZodString;
|
|
1977
|
-
numberRange: (min: number, max: number, fieldName: string) => z.ZodNumber;
|
|
1978
|
-
password: (minLength?: number) => z.ZodString;
|
|
1979
|
-
pastDate: (fieldName: string) => z.ZodDate;
|
|
1980
|
-
phone: z.ZodString;
|
|
1981
|
-
required: (fieldName: string) => z.ZodString;
|
|
1982
|
-
requiredCheckbox: (fieldName: string) => z.ZodBoolean;
|
|
1983
|
-
url: z.ZodString;
|
|
1984
|
-
};
|
|
1985
|
-
|
|
1986
|
-
/**
|
|
1987
|
-
* Props for the ZodForm component.
|
|
1988
|
-
*
|
|
1989
|
-
* @template T - The form data type inferred from the Zod schema
|
|
1990
|
-
*/
|
|
1991
|
-
interface ZodFormProps<T extends FieldValues> {
|
|
1992
|
-
className?: string;
|
|
1993
|
-
columns?: 1 | 2 | 3;
|
|
1994
|
-
config: ZodFormConfig<T>;
|
|
1995
|
-
layout?: "vertical" | "horizontal" | "grid";
|
|
1996
|
-
onError?: (error: FormValidationError) => void;
|
|
1997
|
-
onSubmit: SubmitHandler<T>;
|
|
1998
|
-
onSuccess?: (data: T) => void;
|
|
1999
|
-
resetButtonText?: string;
|
|
2000
|
-
showResetButton?: boolean;
|
|
2001
|
-
spacing?: "2" | "4" | "6" | "8" | "lg";
|
|
2002
|
-
submitButtonProps?: Partial<React$1.ComponentProps<typeof Button>>;
|
|
2003
|
-
submitButtonText?: string;
|
|
2004
|
-
subtitle?: string;
|
|
2005
|
-
title?: string;
|
|
2006
|
-
}
|
|
2007
|
-
/**
|
|
2008
|
-
* ZodForm component for building type-safe forms with Zod validation.
|
|
2009
|
-
*
|
|
2010
|
-
* @description
|
|
2011
|
-
* This component provides a complete form solution with automatic validation,
|
|
2012
|
-
* error handling, and type safety. It integrates React Hook Form with Zod
|
|
2013
|
-
* schemas and HeroUI components. The form automatically validates inputs based
|
|
2014
|
-
* on the provided Zod schema and displays error messages inline.
|
|
2015
|
-
*
|
|
2016
|
-
* @template T - The form data type inferred from the Zod schema
|
|
2017
|
-
*
|
|
2018
|
-
* @param {ZodFormProps<T>} props - Component props
|
|
2019
|
-
* @param {ZodFormConfig<T>} props.config - Form configuration with schema and fields
|
|
2020
|
-
* @param {SubmitHandler<T>} props.onSubmit - Submit handler function called with validated data
|
|
2021
|
-
* @param {string} [props.title] - Optional form title displayed above the form
|
|
2022
|
-
* @param {string} [props.subtitle] - Optional form subtitle displayed below the title
|
|
2023
|
-
* @param {"vertical"|"horizontal"|"grid"} [props.layout="vertical"] - Form layout style
|
|
2024
|
-
* @param {1|2|3} [props.columns=1] - Number of columns for grid layout (only applies when layout="grid")
|
|
2025
|
-
* @param {"2"|"4"|"6"|"8"|"lg"} [props.spacing="4"] - Spacing between form fields
|
|
2026
|
-
* @param {string} [props.submitButtonText="Submit"] - Text for the submit button
|
|
2027
|
-
* @param {boolean} [props.showResetButton=false] - Whether to show a reset button
|
|
2028
|
-
* @param {string} [props.resetButtonText="Reset"] - Text for the reset button
|
|
2029
|
-
* @param {(error: FormValidationError) => void} [props.onError] - Error callback for validation errors
|
|
2030
|
-
* @param {(data: T) => void} [props.onSuccess] - Success callback called after successful submission
|
|
2031
|
-
*
|
|
2032
|
-
* @returns {JSX.Element} The rendered form component with validation and error handling
|
|
2033
|
-
*
|
|
2034
|
-
* @example
|
|
2035
|
-
* ```tsx
|
|
2036
|
-
* import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
2037
|
-
* import { z } from "zod";
|
|
2038
|
-
*
|
|
2039
|
-
* const schema = z.object({
|
|
2040
|
-
* email: z.string().email("Please enter a valid email"),
|
|
2041
|
-
* name: z.string().min(2, "Name must be at least 2 characters"),
|
|
2042
|
-
* message: z.string().min(10, "Message must be at least 10 characters"),
|
|
2043
|
-
* });
|
|
2044
|
-
*
|
|
2045
|
-
* function ContactForm() {
|
|
2046
|
-
* const handleSubmit = async (data) => {
|
|
2047
|
-
* console.log("Form submitted:", data);
|
|
2048
|
-
* // Handle form submission (e.g., API call)
|
|
2049
|
-
* };
|
|
2050
|
-
*
|
|
2051
|
-
* return (
|
|
2052
|
-
* <ZodForm
|
|
2053
|
-
* config={{
|
|
2054
|
-
* schema,
|
|
2055
|
-
* fields: [
|
|
2056
|
-
* FormFieldHelpers.input("name", "Name"),
|
|
2057
|
-
* FormFieldHelpers.input("email", "Email", "email"),
|
|
2058
|
-
* FormFieldHelpers.textarea("message", "Message"),
|
|
2059
|
-
* ],
|
|
2060
|
-
* }}
|
|
2061
|
-
* onSubmit={handleSubmit}
|
|
2062
|
-
* title="Contact Us"
|
|
2063
|
-
* subtitle="Send us a message and we'll get back to you"
|
|
2064
|
-
* />
|
|
2065
|
-
* );
|
|
2066
|
-
* }
|
|
2067
|
-
* ```
|
|
2068
|
-
*
|
|
2069
|
-
* @example
|
|
2070
|
-
* Grid layout with multiple columns:
|
|
2071
|
-
* ```tsx
|
|
2072
|
-
* <ZodForm
|
|
2073
|
-
* config={{ schema, fields }}
|
|
2074
|
-
* layout="grid"
|
|
2075
|
-
* columns={2}
|
|
2076
|
-
* spacing="6"
|
|
2077
|
-
* />
|
|
2078
|
-
* ```
|
|
2079
|
-
*
|
|
2080
|
-
* @see {@link Form} for the base form component without Zod
|
|
2081
|
-
* @see {@link FormFieldHelpers} for field creation helpers
|
|
2082
|
-
* @see {@link createBasicFormBuilder} for builder pattern alternative
|
|
2083
|
-
* @category Components
|
|
2084
|
-
*/
|
|
2085
|
-
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;
|
|
2086
|
-
|
|
2087
|
-
/**
|
|
2088
|
-
* Props for the SimpleForm component.
|
|
2089
|
-
*
|
|
2090
|
-
* @template TFieldValues - The form data type
|
|
2091
|
-
*/
|
|
2092
|
-
interface SimpleFormProps<TFieldValues extends FieldValues> {
|
|
2093
|
-
/** Zod schema for validation */
|
|
2094
|
-
schema: ZodSchema<TFieldValues>;
|
|
2095
|
-
/** Single field configuration */
|
|
2096
|
-
field: ZodFormFieldConfig<TFieldValues>;
|
|
2097
|
-
/** Submit handler */
|
|
2098
|
-
onSubmit: (data: TFieldValues) => Promise<void> | void;
|
|
2099
|
-
/** Optional custom submit button */
|
|
2100
|
-
submitButton?: React$1.ReactNode;
|
|
2101
|
-
/** Optional form title */
|
|
2102
|
-
title?: string;
|
|
2103
|
-
/** Optional form subtitle */
|
|
2104
|
-
subtitle?: string;
|
|
2105
|
-
/** Optional className */
|
|
2106
|
-
className?: string;
|
|
2107
|
-
/** Optional default values */
|
|
2108
|
-
defaultValues?: DefaultValues<TFieldValues>;
|
|
2109
|
-
/** Optional error callback */
|
|
2110
|
-
onError?: (error: FormValidationError) => void;
|
|
2111
|
-
/** Optional success callback */
|
|
2112
|
-
onSuccess?: (data: TFieldValues) => void;
|
|
2113
|
-
/** Hide default submit button (use custom submitButton instead) */
|
|
2114
|
-
hideSubmitButton?: boolean;
|
|
2115
|
-
}
|
|
2116
|
-
/**
|
|
2117
|
-
* Simple form component for single-field forms.
|
|
2118
|
-
*
|
|
2119
|
-
* @description
|
|
2120
|
-
* A simplified API for forms with a single field. Provides the same validation
|
|
2121
|
-
* and error handling as ZodForm but with a simpler configuration.
|
|
2122
|
-
* Useful for simple inputs like search bars, message inputs, or single-field forms.
|
|
2123
|
-
*
|
|
2124
|
-
* @template TFieldValues - The form data type
|
|
2125
|
-
*
|
|
2126
|
-
* @param {SimpleFormProps<TFieldValues>} props - Component props
|
|
2127
|
-
* @returns {JSX.Element} The rendered form
|
|
2128
|
-
*
|
|
2129
|
-
* @example
|
|
2130
|
-
* ```tsx
|
|
2131
|
-
* import { SimpleForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
2132
|
-
* import { z } from "zod";
|
|
2133
|
-
*
|
|
2134
|
-
* const messageSchema = z.object({
|
|
2135
|
-
* message: z.string().min(1, "Message cannot be empty"),
|
|
2136
|
-
* });
|
|
2137
|
-
*
|
|
2138
|
-
* function MessageInput() {
|
|
2139
|
-
* return (
|
|
2140
|
-
* <SimpleForm
|
|
2141
|
-
* schema={messageSchema}
|
|
2142
|
-
* field={FormFieldHelpers.input("message", "", {
|
|
2143
|
-
* placeholder: "Add a note...",
|
|
2144
|
-
* endContent: (
|
|
2145
|
-
* <Button type="submit" isIconOnly>
|
|
2146
|
-
* <SendIcon />
|
|
2147
|
-
* </Button>
|
|
2148
|
-
* ),
|
|
2149
|
-
* })}
|
|
2150
|
-
* onSubmit={async (data) => {
|
|
2151
|
-
* await sendMessage(data.message);
|
|
2152
|
-
* }}
|
|
2153
|
-
* hideSubmitButton
|
|
2154
|
-
* />
|
|
2155
|
-
* );
|
|
2156
|
-
* }
|
|
2157
|
-
* ```
|
|
2158
|
-
*
|
|
2159
|
-
* @see {@link ZodForm} for multi-field forms
|
|
2160
|
-
* @category Components
|
|
2161
|
-
*/
|
|
2162
|
-
declare function SimpleForm<TFieldValues extends FieldValues>({ className, defaultValues, field, hideSubmitButton, onError, onSubmit, onSuccess, schema, submitButton, subtitle, title, }: SimpleFormProps<TFieldValues>): React$1.JSX.Element;
|
|
2163
|
-
|
|
2164
|
-
/**
|
|
2165
|
-
* Hook for using Zod validation with React Hook Form
|
|
2166
|
-
*/
|
|
2167
|
-
declare function useZodForm<TFieldValues extends FieldValues>(config: ZodFormConfig<TFieldValues>): react_hook_form.UseFormReturn<TFieldValues, any, TFieldValues>;
|
|
2168
|
-
/**
|
|
2169
|
-
* Helper function to create Zod form configurations
|
|
2170
|
-
*/
|
|
2171
|
-
declare function createZodFormConfig<TFieldValues extends FieldValues>(schema: z.ZodSchema<TFieldValues>, fields: ZodFormFieldConfig<TFieldValues>[], defaultValues?: Partial<TFieldValues>): ZodFormConfig<TFieldValues>;
|
|
2172
|
-
|
|
2173
|
-
/**
|
|
2174
|
-
* Basic form field builder for creating form field configurations.
|
|
2175
|
-
*
|
|
2176
|
-
* @description
|
|
2177
|
-
* Provides a fluent API for building form field configurations. This builder
|
|
2178
|
-
* focuses on the most common use cases and eliminates the need for "as const"
|
|
2179
|
-
* assertions. Use this for simple forms with standard field types.
|
|
2180
|
-
*
|
|
2181
|
-
* @template T - The form data type
|
|
2182
|
-
*
|
|
2183
|
-
* @example
|
|
2184
|
-
* ```tsx
|
|
2185
|
-
* import { createBasicFormBuilder } from "@rachelallyson/hero-hook-form";
|
|
2186
|
-
*
|
|
2187
|
-
* const fields = createBasicFormBuilder()
|
|
2188
|
-
* .input("name", "Name")
|
|
2189
|
-
* .input("email", "Email", "email")
|
|
2190
|
-
* .textarea("message", "Message")
|
|
2191
|
-
* .select("country", "Country", [
|
|
2192
|
-
* { label: "US", value: "us" },
|
|
2193
|
-
* { label: "CA", value: "ca" },
|
|
2194
|
-
* ])
|
|
2195
|
-
* .checkbox("newsletter", "Subscribe to newsletter")
|
|
2196
|
-
* .build();
|
|
2197
|
-
* ```
|
|
2198
|
-
*
|
|
2199
|
-
* @see {@link createAdvancedBuilder} for more advanced features
|
|
2200
|
-
* @see {@link FormFieldHelpers} for helper function alternative
|
|
2201
|
-
* @category Builders
|
|
2202
|
-
*/
|
|
2203
|
-
declare class BasicFormBuilder<T extends FieldValues> {
|
|
2204
|
-
private fields;
|
|
2205
|
-
/**
|
|
2206
|
-
* Add an input field
|
|
2207
|
-
*/
|
|
2208
|
-
input(name: Path<T>, label: string, type?: "text" | "email" | "tel" | "password"): this;
|
|
2209
|
-
/**
|
|
2210
|
-
* Add a textarea field
|
|
2211
|
-
*/
|
|
2212
|
-
textarea(name: Path<T>, label: string, placeholder?: string): this;
|
|
2213
|
-
/**
|
|
2214
|
-
* Add a select field
|
|
2215
|
-
*/
|
|
2216
|
-
select(name: Path<T>, label: string, options: {
|
|
2217
|
-
label: string;
|
|
2218
|
-
value: string | number;
|
|
2219
|
-
}[]): this;
|
|
2220
|
-
/**
|
|
2221
|
-
* Add an autocomplete field
|
|
2222
|
-
*/
|
|
2223
|
-
autocomplete(name: Path<T>, label: string, items: {
|
|
2224
|
-
label: string;
|
|
2225
|
-
value: string | number;
|
|
2226
|
-
}[], placeholder?: string): this;
|
|
2227
|
-
/**
|
|
2228
|
-
* Add a checkbox field
|
|
2229
|
-
*/
|
|
2230
|
-
checkbox(name: Path<T>, label: string): this;
|
|
2231
|
-
/**
|
|
2232
|
-
* Add a content field for headers, questions, or custom content between fields
|
|
2233
|
-
*/
|
|
2234
|
-
content(title?: string | null, description?: string | null, options?: {
|
|
2235
|
-
render?: (field: {
|
|
2236
|
-
form: any;
|
|
2237
|
-
errors: any;
|
|
2238
|
-
isSubmitting: boolean;
|
|
2239
|
-
}) => React$1.ReactNode;
|
|
2240
|
-
className?: string;
|
|
2241
|
-
name?: Path<T>;
|
|
2242
|
-
}): this;
|
|
2243
|
-
/**
|
|
2244
|
-
* Add a switch field
|
|
2245
|
-
*/
|
|
2246
|
-
switch(name: Path<T>, label: string, description?: string): this;
|
|
2247
|
-
/**
|
|
2248
|
-
* Build the final field configuration array
|
|
2249
|
-
*/
|
|
2250
|
-
build(): ZodFormFieldConfig<T>[];
|
|
2251
|
-
}
|
|
2252
|
-
/**
|
|
2253
|
-
* Creates a basic form builder for simple form construction.
|
|
2254
|
-
*
|
|
2255
|
-
* @description
|
|
2256
|
-
* Provides a fluent API for building form field configurations. Best for
|
|
2257
|
-
* simple forms with standard field types. Returns a builder instance with
|
|
2258
|
-
* chainable methods for adding fields.
|
|
2259
|
-
*
|
|
2260
|
-
* @template T - The form data type
|
|
2261
|
-
*
|
|
2262
|
-
* @returns {BasicFormBuilder<T>} Builder instance with chainable methods
|
|
2263
|
-
*
|
|
2264
|
-
* @example
|
|
2265
|
-
* ```tsx
|
|
2266
|
-
* import { createBasicFormBuilder } from "@rachelallyson/hero-hook-form";
|
|
2267
|
-
*
|
|
2268
|
-
* const fields = createBasicFormBuilder()
|
|
2269
|
-
* .input("name", "Name")
|
|
2270
|
-
* .input("email", "Email", "email")
|
|
2271
|
-
* .textarea("message", "Message")
|
|
2272
|
-
* .select("country", "Country", [
|
|
2273
|
-
* { label: "US", value: "us" },
|
|
2274
|
-
* { label: "CA", value: "ca" },
|
|
2275
|
-
* ])
|
|
2276
|
-
* .checkbox("newsletter", "Subscribe to newsletter")
|
|
2277
|
-
* .build();
|
|
2278
|
-
*
|
|
2279
|
-
* // Use with ZodForm
|
|
2280
|
-
* <ZodForm config={{ schema, fields }} onSubmit={handleSubmit} />
|
|
2281
|
-
* ```
|
|
2282
|
-
*
|
|
2283
|
-
* @see {@link createAdvancedBuilder} for more advanced features
|
|
2284
|
-
* @see {@link FormFieldHelpers} for helper function alternative
|
|
2285
|
-
* @see {@link defineInferredForm} for type-inferred forms
|
|
2286
|
-
* @category Builders
|
|
2287
|
-
*/
|
|
2288
|
-
declare function createBasicFormBuilder<T extends FieldValues>(): BasicFormBuilder<T>;
|
|
2289
|
-
/**
|
|
2290
|
-
* Helper functions for creating form field configurations.
|
|
2291
|
-
*
|
|
2292
|
-
* @description
|
|
2293
|
-
* Simple helper functions for common field types. This is the recommended
|
|
2294
|
-
* approach for most use cases as it's straightforward and doesn't require
|
|
2295
|
-
* method chaining. Each helper returns a field configuration object.
|
|
2296
|
-
*
|
|
2297
|
-
* @example
|
|
2298
|
-
* ```tsx
|
|
2299
|
-
* import { FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
2300
|
-
*
|
|
2301
|
-
* const fields = [
|
|
2302
|
-
* FormFieldHelpers.input("name", "Name"),
|
|
2303
|
-
* FormFieldHelpers.input("email", "Email", "email"),
|
|
2304
|
-
* FormFieldHelpers.textarea("message", "Message"),
|
|
2305
|
-
* FormFieldHelpers.select("country", "Country", [
|
|
2306
|
-
* { label: "US", value: "us" },
|
|
2307
|
-
* { label: "CA", value: "ca" },
|
|
2308
|
-
* ]),
|
|
2309
|
-
* FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter"),
|
|
2310
|
-
* FormFieldHelpers.conditional(
|
|
2311
|
-
* "phone",
|
|
2312
|
-
* (values) => values.hasPhone === true,
|
|
2313
|
-
* FormFieldHelpers.input("phone", "Phone Number", "tel")
|
|
2314
|
-
* ),
|
|
2315
|
-
* ];
|
|
2316
|
-
* ```
|
|
2317
|
-
*
|
|
2318
|
-
* @see {@link createBasicFormBuilder} for builder pattern alternative
|
|
2319
|
-
* @category Builders
|
|
2320
|
-
*/
|
|
2321
|
-
declare const FormFieldHelpers: {
|
|
2322
|
-
/**
|
|
2323
|
-
* Create an autocomplete field
|
|
2324
|
-
*
|
|
2325
|
-
* @example
|
|
2326
|
-
* ```tsx
|
|
2327
|
-
* // Simple autocomplete
|
|
2328
|
-
* FormFieldHelpers.autocomplete("country", "Country", options)
|
|
2329
|
-
*
|
|
2330
|
-
* // With placeholder
|
|
2331
|
-
* FormFieldHelpers.autocomplete("country", "Country", options, "Search countries")
|
|
2332
|
-
*
|
|
2333
|
-
* // With full customization
|
|
2334
|
-
* FormFieldHelpers.autocomplete("country", "Country", options, "Search countries", {
|
|
2335
|
-
* classNames: { base: "custom-autocomplete" },
|
|
2336
|
-
* allowsCustomValue: true
|
|
2337
|
-
* })
|
|
2338
|
-
* ```
|
|
2339
|
-
*/
|
|
2340
|
-
autocomplete: <T extends FieldValues>(name: Path<T>, label: string, items: {
|
|
2341
|
-
label: string;
|
|
2342
|
-
value: string | number;
|
|
2343
|
-
}[], placeholder?: string, autocompleteProps?: Omit<React$1.ComponentProps<typeof Autocomplete>, "selectedKey" | "onSelectionChange" | "inputValue" | "onInputChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "children" | "items">) => ZodFormFieldConfig<T>;
|
|
2344
|
-
/**
|
|
2345
|
-
* Create a checkbox field
|
|
2346
|
-
*
|
|
2347
|
-
* @example
|
|
2348
|
-
* ```tsx
|
|
2349
|
-
* // Simple checkbox
|
|
2350
|
-
* FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter")
|
|
2351
|
-
*
|
|
2352
|
-
* // With full customization
|
|
2353
|
-
* FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter", {
|
|
2354
|
-
* classNames: { base: "custom-checkbox" },
|
|
2355
|
-
* size: "lg"
|
|
2356
|
-
* })
|
|
2357
|
-
* ```
|
|
2358
|
-
*/
|
|
2359
|
-
checkbox: <T extends FieldValues>(name: Path<T>, label: string, checkboxProps?: Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
|
|
2360
|
-
/**
|
|
2361
|
-
* Create a conditional field that shows/hides based on form data
|
|
2362
|
-
*
|
|
2363
|
-
* @example
|
|
2364
|
-
* ```tsx
|
|
2365
|
-
* FormFieldHelpers.conditional(
|
|
2366
|
-
* "phone",
|
|
2367
|
-
* (values) => values.hasPhone === true,
|
|
2368
|
-
* FormFieldHelpers.input("phone", "Phone Number", "tel")
|
|
2369
|
-
* )
|
|
2370
|
-
* ```
|
|
2371
|
-
*
|
|
2372
|
-
* @example
|
|
2373
|
-
* With explicit type in condition function (similar to content helper pattern):
|
|
2374
|
-
* ```tsx
|
|
2375
|
-
* FormFieldHelpers.conditional(
|
|
2376
|
-
* "options",
|
|
2377
|
-
* (formData: Partial<z.infer<typeof fieldSchema>>) =>
|
|
2378
|
-
* formData.fieldType === 'DROPDOWN',
|
|
2379
|
-
* FormFieldHelpers.textarea("options", "Dropdown Options", "One per line")
|
|
2380
|
-
* )
|
|
2381
|
-
* ```
|
|
2382
|
-
*/
|
|
2383
|
-
conditional: <T extends FieldValues = FieldValues>(name: Path<T>, condition: (formData: Partial<T>) => boolean, field: ZodFormFieldConfig<T>) => ZodFormFieldConfig<T>;
|
|
2384
|
-
/**
|
|
2385
|
-
* Create a content field for headers, questions, or custom content between fields
|
|
2386
|
-
*
|
|
2387
|
-
* @example
|
|
2388
|
-
* ```tsx
|
|
2389
|
-
* // Simple header
|
|
2390
|
-
* FormFieldHelpers.content("Personal Information", "Please provide your details")
|
|
2391
|
-
*
|
|
2392
|
-
* // Custom render
|
|
2393
|
-
* FormFieldHelpers.content(null, null, {
|
|
2394
|
-
* render: () => <div>Custom content</div>
|
|
2395
|
-
* })
|
|
2396
|
-
* ```
|
|
2397
|
-
*/
|
|
2398
|
-
content: <T extends FieldValues = FieldValues>(title?: string | null, description?: string | null, options?: {
|
|
2399
|
-
render?: (field: {
|
|
2400
|
-
form: UseFormReturn<T>;
|
|
2401
|
-
errors: FieldErrors<T>;
|
|
2402
|
-
isSubmitting: boolean;
|
|
2403
|
-
}) => React$1.ReactNode;
|
|
2404
|
-
className?: string;
|
|
2405
|
-
name?: string;
|
|
2406
|
-
}) => ZodFormFieldConfig<T>;
|
|
2407
|
-
/**
|
|
2408
|
-
* Create a date field
|
|
2409
|
-
*
|
|
2410
|
-
* @example
|
|
2411
|
-
* ```tsx
|
|
2412
|
-
* // Simple date field
|
|
2413
|
-
* FormFieldHelpers.date("birthDate", "Birth Date")
|
|
2414
|
-
*
|
|
2415
|
-
* // With full customization
|
|
2416
|
-
* FormFieldHelpers.date("birthDate", "Birth Date", {
|
|
2417
|
-
* label: "Select your birth date",
|
|
2418
|
-
* granularity: "day",
|
|
2419
|
-
* minValue: new CalendarDate(1900, 1, 1)
|
|
2420
|
-
* })
|
|
2421
|
-
* ```
|
|
2422
|
-
*/
|
|
2423
|
-
date: <T extends FieldValues>(name: Path<T>, label: string, dateProps?: Omit<React$1.ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
|
|
2424
|
-
/**
|
|
2425
|
-
* Create a file upload field
|
|
2426
|
-
*
|
|
2427
|
-
* @example
|
|
2428
|
-
* ```tsx
|
|
2429
|
-
* // Simple file field
|
|
2430
|
-
* FormFieldHelpers.file("avatar", "Profile Picture")
|
|
2431
|
-
*
|
|
2432
|
-
* // With accept and multiple
|
|
2433
|
-
* FormFieldHelpers.file("avatar", "Profile Picture", {
|
|
2434
|
-
* accept: "image/*",
|
|
2435
|
-
* multiple: true
|
|
2436
|
-
* })
|
|
2437
|
-
*
|
|
2438
|
-
* // With full customization
|
|
2439
|
-
* FormFieldHelpers.file("avatar", "Profile Picture", {
|
|
2440
|
-
* accept: "image/*",
|
|
2441
|
-
* multiple: false,
|
|
2442
|
-
* fileProps: { className: "custom-file-input" }
|
|
2443
|
-
* })
|
|
2444
|
-
* ```
|
|
2445
|
-
*/
|
|
2446
|
-
file: <T extends FieldValues>(name: Path<T>, label: string, options?: {
|
|
2447
|
-
accept?: string;
|
|
2448
|
-
fileProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
|
|
2449
|
-
multiple?: boolean;
|
|
2450
|
-
}) => ZodFormFieldConfig<T>;
|
|
2451
|
-
/**
|
|
2452
|
-
* Create a font picker field
|
|
2453
|
-
*
|
|
2454
|
-
* @example
|
|
2455
|
-
* ```tsx
|
|
2456
|
-
* // Simple font picker
|
|
2457
|
-
* FormFieldHelpers.fontPicker("font", "Choose Font")
|
|
2458
|
-
*
|
|
2459
|
-
* // With full customization
|
|
2460
|
-
* FormFieldHelpers.fontPicker("font", "Choose Font", {
|
|
2461
|
-
* showFontPreview: true,
|
|
2462
|
-
* loadAllVariants: false,
|
|
2463
|
-
* fontsLoadedTimeout: 5000
|
|
2464
|
-
* })
|
|
2465
|
-
* ```
|
|
2466
|
-
*/
|
|
2467
|
-
fontPicker: <T extends FieldValues>(name: Path<T>, label: string, fontPickerProps?: {
|
|
2468
|
-
showFontPreview?: boolean;
|
|
2469
|
-
loadAllVariants?: boolean;
|
|
2470
|
-
onFontsLoaded?: (loaded: boolean) => void;
|
|
2471
|
-
fontsLoadedTimeout?: number;
|
|
2472
|
-
}) => ZodFormFieldConfig<T>;
|
|
2473
|
-
/**
|
|
2474
|
-
* Create an input field
|
|
2475
|
-
*
|
|
2476
|
-
* @example
|
|
2477
|
-
* ```tsx
|
|
2478
|
-
* // Simple input
|
|
2479
|
-
* FormFieldHelpers.input("name", "Name")
|
|
2480
|
-
*
|
|
2481
|
-
* // With type
|
|
2482
|
-
* FormFieldHelpers.input("email", "Email", "email")
|
|
2483
|
-
*
|
|
2484
|
-
* // With full customization
|
|
2485
|
-
* FormFieldHelpers.input("email", "Email", "email", {
|
|
2486
|
-
* placeholder: "Enter your email",
|
|
2487
|
-
* classNames: { input: "custom-input" },
|
|
2488
|
-
* startContent: <MailIcon />,
|
|
2489
|
-
* description: "We'll never share your email"
|
|
2490
|
-
* })
|
|
2491
|
-
* ```
|
|
2492
|
-
*/
|
|
2493
|
-
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>;
|
|
2494
|
-
/**
|
|
2495
|
-
* Create a radio group field
|
|
2496
|
-
*
|
|
2497
|
-
* @example
|
|
2498
|
-
* ```tsx
|
|
2499
|
-
* // Simple radio group
|
|
2500
|
-
* FormFieldHelpers.radio("gender", "Gender", [
|
|
2501
|
-
* { label: "Male", value: "male" },
|
|
2502
|
-
* { label: "Female", value: "female" }
|
|
2503
|
-
* ])
|
|
2504
|
-
*
|
|
2505
|
-
* // With full customization
|
|
2506
|
-
* FormFieldHelpers.radio("gender", "Gender", options, {
|
|
2507
|
-
* orientation: "horizontal",
|
|
2508
|
-
* classNames: { base: "custom-radio" }
|
|
2509
|
-
* })
|
|
2510
|
-
* ```
|
|
2511
|
-
*/
|
|
2512
|
-
radio: <T extends FieldValues>(name: Path<T>, label: string, options: {
|
|
2513
|
-
label: string;
|
|
2514
|
-
value: string | number;
|
|
2515
|
-
}[], radioProps?: Omit<React$1.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">) => ZodFormFieldConfig<T>;
|
|
2516
|
-
/**
|
|
2517
|
-
* Create a select field
|
|
2518
|
-
*
|
|
2519
|
-
* @example
|
|
2520
|
-
* ```tsx
|
|
2521
|
-
* // Simple select
|
|
2522
|
-
* FormFieldHelpers.select("country", "Country", options)
|
|
2523
|
-
*
|
|
2524
|
-
* // With full customization
|
|
2525
|
-
* FormFieldHelpers.select("country", "Country", options, {
|
|
2526
|
-
* placeholder: "Select a country",
|
|
2527
|
-
* classNames: { trigger: "custom-select" },
|
|
2528
|
-
* selectionMode: "multiple"
|
|
2529
|
-
* })
|
|
2530
|
-
* ```
|
|
2531
|
-
*/
|
|
2532
|
-
select: <T extends FieldValues>(name: Path<T>, label: string, options: {
|
|
2533
|
-
label: string;
|
|
2534
|
-
value: string | number;
|
|
2535
|
-
}[], selectProps?: Omit<React$1.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
|
|
2536
|
-
/**
|
|
2537
|
-
* Create a slider field
|
|
2538
|
-
*
|
|
2539
|
-
* @example
|
|
2540
|
-
* ```tsx
|
|
2541
|
-
* // Simple slider
|
|
2542
|
-
* FormFieldHelpers.slider("rating", "Rating")
|
|
2543
|
-
*
|
|
2544
|
-
* // With full customization
|
|
2545
|
-
* FormFieldHelpers.slider("rating", "Rating", {
|
|
2546
|
-
* minValue: 1,
|
|
2547
|
-
* maxValue: 5,
|
|
2548
|
-
* step: 1,
|
|
2549
|
-
* showSteps: true,
|
|
2550
|
-
* classNames: { base: "custom-slider" }
|
|
2551
|
-
* })
|
|
2552
|
-
* ```
|
|
2553
|
-
*/
|
|
2554
|
-
slider: <T extends FieldValues>(name: Path<T>, label: string, sliderProps?: Omit<React$1.ComponentProps<typeof Slider>, "value" | "onChange" | "label" | "isDisabled">) => ZodFormFieldConfig<T>;
|
|
2555
|
-
/**
|
|
2556
|
-
* Create a switch field
|
|
2557
|
-
*
|
|
2558
|
-
* @example
|
|
2559
|
-
* ```tsx
|
|
2560
|
-
* // Simple switch
|
|
2561
|
-
* FormFieldHelpers.switch("notifications", "Enable notifications")
|
|
2562
|
-
*
|
|
2563
|
-
* // With description
|
|
2564
|
-
* FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications")
|
|
2565
|
-
*
|
|
2566
|
-
* // With full customization
|
|
2567
|
-
* FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications", {
|
|
2568
|
-
* classNames: { base: "custom-switch" },
|
|
2569
|
-
* size: "lg",
|
|
2570
|
-
* color: "primary"
|
|
2571
|
-
* })
|
|
2572
|
-
* ```
|
|
2573
|
-
*/
|
|
2574
|
-
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>;
|
|
2575
|
-
/**
|
|
2576
|
-
* Create a textarea field
|
|
2577
|
-
*
|
|
2578
|
-
* @example
|
|
2579
|
-
* ```tsx
|
|
2580
|
-
* // Simple textarea
|
|
2581
|
-
* FormFieldHelpers.textarea("message", "Message")
|
|
2582
|
-
*
|
|
2583
|
-
* // With placeholder
|
|
2584
|
-
* FormFieldHelpers.textarea("message", "Message", "Enter your message")
|
|
2585
|
-
*
|
|
2586
|
-
* // With full customization
|
|
2587
|
-
* FormFieldHelpers.textarea("message", "Message", "Enter your message", {
|
|
2588
|
-
* classNames: { input: "custom-textarea" },
|
|
2589
|
-
* minRows: 3,
|
|
2590
|
-
* maxRows: 10
|
|
2591
|
-
* })
|
|
2592
|
-
* ```
|
|
2593
|
-
*/
|
|
2594
|
-
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>;
|
|
2595
|
-
};
|
|
2596
|
-
/**
|
|
2597
|
-
* Common field collections
|
|
2598
|
-
*/
|
|
2599
|
-
declare const CommonFields: {
|
|
2600
|
-
/**
|
|
2601
|
-
* Address fields
|
|
2602
|
-
*/
|
|
2603
|
-
address: <T extends FieldValues>() => ZodFormFieldConfig<T>[];
|
|
2604
|
-
/**
|
|
2605
|
-
* Personal information fields
|
|
2606
|
-
*/
|
|
2607
|
-
personal: <T extends FieldValues>() => ZodFormFieldConfig<T>[];
|
|
2608
|
-
/**
|
|
2609
|
-
* Terms and conditions fields
|
|
2610
|
-
*/
|
|
2611
|
-
terms: <T extends FieldValues>() => ZodFormFieldConfig<T>[];
|
|
2612
|
-
};
|
|
2613
|
-
|
|
2614
|
-
/**
|
|
2615
|
-
* Unified field creation function
|
|
2616
|
-
* Takes field type as first argument and delegates to appropriate helper
|
|
2617
|
-
*/
|
|
2618
|
-
declare function createField<T extends FieldValues>(type: string, name: Path<T>, label: string, optionsOrProps?: any, props?: any): ZodFormFieldConfig<T>;
|
|
2619
|
-
/**
|
|
2620
|
-
* Builder pattern for advanced field creation
|
|
2621
|
-
*/
|
|
2622
|
-
declare class AdvancedFieldBuilder<T extends FieldValues> {
|
|
2623
|
-
private fields;
|
|
2624
|
-
/**
|
|
2625
|
-
* Add any field type using the unified API
|
|
2626
|
-
*/
|
|
2627
|
-
field(type: "input", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
2628
|
-
field(type: "textarea", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
2629
|
-
field(type: "select", name: Path<T>, label: string, options: {
|
|
2630
|
-
label: string;
|
|
2631
|
-
value: string | number;
|
|
2632
|
-
}[], props?: Parameters<typeof createField<T>>[4]): this;
|
|
2633
|
-
field(type: "checkbox", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
2634
|
-
field(type: "switch", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
2635
|
-
field(type: "radio", name: Path<T>, label: string, options: {
|
|
2636
|
-
label: string;
|
|
2637
|
-
value: string | number;
|
|
2638
|
-
}[], props?: Parameters<typeof createField<T>>[4]): this;
|
|
2639
|
-
field(type: "slider", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
2640
|
-
field(type: "date", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
2641
|
-
field(type: "file", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
2642
|
-
/**
|
|
2643
|
-
* Add a conditional field that shows/hides based on form data
|
|
2644
|
-
*/
|
|
2645
|
-
conditionalField(name: Path<T>, condition: (formData: Partial<T>) => boolean, field: ZodFormFieldConfig<T>): this;
|
|
2646
|
-
/**
|
|
2647
|
-
* Add a field array for dynamic repeating field groups
|
|
2648
|
-
*/
|
|
2649
|
-
fieldArray(name: Path<T>, label: string, fields: ZodFormFieldConfig<any>[], options?: {
|
|
2650
|
-
min?: number;
|
|
2651
|
-
max?: number;
|
|
2652
|
-
addButtonText?: string;
|
|
2653
|
-
removeButtonText?: string;
|
|
2654
|
-
}): this;
|
|
2655
|
-
/**
|
|
2656
|
-
* Add a dynamic section that shows/hides based on form data
|
|
2657
|
-
*/
|
|
2658
|
-
dynamicSection(name: Path<T>, condition: (formData: Partial<T>) => boolean, fields: ZodFormFieldConfig<T>[], options?: {
|
|
2659
|
-
title?: string;
|
|
2660
|
-
description?: string;
|
|
2661
|
-
}): this;
|
|
2662
|
-
/**
|
|
2663
|
-
* Build the final field configuration array
|
|
2664
|
-
*/
|
|
2665
|
-
build(): ZodFormFieldConfig<T>[];
|
|
2666
|
-
}
|
|
2667
|
-
/**
|
|
2668
|
-
* Field Array Builder for strongly-typed array item fields
|
|
2669
|
-
*/
|
|
2670
|
-
declare class FieldArrayItemBuilder<TItem extends FieldValues> {
|
|
2671
|
-
private fields;
|
|
2672
|
-
/**
|
|
2673
|
-
* Add any field type using the unified API for array items
|
|
2674
|
-
*/
|
|
2675
|
-
field(type: "input", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2676
|
-
field(type: "textarea", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2677
|
-
field(type: "select", name: Path<TItem>, label: string, options: {
|
|
2678
|
-
label: string;
|
|
2679
|
-
value: string | number;
|
|
2680
|
-
}[], props?: Parameters<typeof createField<TItem>>[4]): this;
|
|
2681
|
-
field(type: "checkbox", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2682
|
-
field(type: "switch", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2683
|
-
field(type: "radio", name: Path<TItem>, label: string, options: {
|
|
2684
|
-
label: string;
|
|
2685
|
-
value: string | number;
|
|
2686
|
-
}[], props?: Parameters<typeof createField<TItem>>[4]): this;
|
|
2687
|
-
field(type: "slider", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2688
|
-
field(type: "date", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2689
|
-
field(type: "file", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2690
|
-
field(type: "fontPicker", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2691
|
-
/**
|
|
2692
|
-
* Build the field array item configuration
|
|
2693
|
-
*/
|
|
2694
|
-
build(): ZodFormFieldConfig<TItem>[];
|
|
2695
|
-
}
|
|
2696
|
-
/**
|
|
2697
|
-
* Create a field array item builder for strongly-typed array fields
|
|
2698
|
-
*/
|
|
2699
|
-
declare function createFieldArrayItemBuilder<TItem extends FieldValues>(): FieldArrayItemBuilder<TItem>;
|
|
2700
|
-
/**
|
|
2701
|
-
* Field Array Builder for constructing field arrays with proper paths
|
|
2702
|
-
*/
|
|
2703
|
-
declare class FieldArrayBuilder<T extends FieldValues, TArrayName extends Path<T>> {
|
|
2704
|
-
private arrayName;
|
|
2705
|
-
private fields;
|
|
2706
|
-
constructor(arrayName: TArrayName);
|
|
2707
|
-
field(type: string, name: string, label: string, optionsOrProps?: any, props?: any): this;
|
|
2708
|
-
build(): ZodFormFieldConfig<any>[];
|
|
2709
|
-
}
|
|
2710
|
-
/**
|
|
2711
|
-
* Create a field array builder that constructs proper paths for array items
|
|
2712
|
-
*/
|
|
2713
|
-
declare function createFieldArrayBuilder<T extends FieldValues, TArrayName extends Path<T>>(arrayName: TArrayName): FieldArrayBuilder<T, TArrayName>;
|
|
2714
|
-
/**
|
|
2715
|
-
* Create a new advanced field builder
|
|
2716
|
-
*/
|
|
2717
|
-
declare function createAdvancedBuilder<T extends FieldValues>(): AdvancedFieldBuilder<T>;
|
|
2718
|
-
|
|
2719
|
-
/**
|
|
2720
|
-
* Type-inferred form builder that auto-generates both schema and field configs
|
|
2721
|
-
*/
|
|
2722
|
-
declare class TypeInferredBuilder<T extends FieldValues> {
|
|
2723
|
-
private schemaFields;
|
|
2724
|
-
private formFields;
|
|
2725
|
-
/**
|
|
2726
|
-
* Add a text field
|
|
2727
|
-
*/
|
|
2728
|
-
text(name: Path<T>, label: string, options?: {
|
|
2729
|
-
placeholder?: string;
|
|
2730
|
-
description?: string;
|
|
2731
|
-
isDisabled?: boolean;
|
|
2732
|
-
className?: string;
|
|
2733
|
-
minLength?: number;
|
|
2734
|
-
maxLength?: number;
|
|
2735
|
-
pattern?: string;
|
|
2736
|
-
}): this;
|
|
2737
|
-
/**
|
|
2738
|
-
* Add an email field
|
|
2739
|
-
*/
|
|
2740
|
-
email(name: Path<T>, label: string, options?: {
|
|
2741
|
-
placeholder?: string;
|
|
2742
|
-
description?: string;
|
|
2743
|
-
isDisabled?: boolean;
|
|
2744
|
-
className?: string;
|
|
2745
|
-
}): this;
|
|
2746
|
-
/**
|
|
2747
|
-
* Add a number field
|
|
2748
|
-
*/
|
|
2749
|
-
number(name: Path<T>, label: string, options?: {
|
|
2750
|
-
placeholder?: string;
|
|
2751
|
-
description?: string;
|
|
2752
|
-
isDisabled?: boolean;
|
|
2753
|
-
className?: string;
|
|
2754
|
-
min?: number;
|
|
2755
|
-
max?: number;
|
|
2756
|
-
step?: number;
|
|
2757
|
-
}): this;
|
|
2758
|
-
/**
|
|
2759
|
-
* Add a textarea field
|
|
2760
|
-
*/
|
|
2761
|
-
textarea(name: Path<T>, label: string, options?: {
|
|
2762
|
-
placeholder?: string;
|
|
2763
|
-
description?: string;
|
|
2764
|
-
isDisabled?: boolean;
|
|
2765
|
-
className?: string;
|
|
2766
|
-
rows?: number;
|
|
2767
|
-
minLength?: number;
|
|
2768
|
-
}): this;
|
|
2769
|
-
/**
|
|
2770
|
-
* Add a select field
|
|
2771
|
-
*/
|
|
2772
|
-
select(name: Path<T>, label: string, options: {
|
|
2773
|
-
label: string;
|
|
2774
|
-
value: string | number;
|
|
2775
|
-
}[]): this;
|
|
2776
|
-
/**
|
|
2777
|
-
* Add a checkbox field
|
|
2778
|
-
*/
|
|
2779
|
-
checkbox(name: Path<T>, label: string, options?: {
|
|
2780
|
-
description?: string;
|
|
2781
|
-
isDisabled?: boolean;
|
|
2782
|
-
className?: string;
|
|
2783
|
-
required?: boolean;
|
|
2784
|
-
}): this;
|
|
2785
|
-
/**
|
|
2786
|
-
* Add a switch field
|
|
2787
|
-
*/
|
|
2788
|
-
switch(name: Path<T>, label: string, options?: {
|
|
2789
|
-
description?: string;
|
|
2790
|
-
isDisabled?: boolean;
|
|
2791
|
-
className?: string;
|
|
2792
|
-
}): this;
|
|
2793
|
-
/**
|
|
2794
|
-
* Add a radio field
|
|
2795
|
-
*/
|
|
2796
|
-
radio(name: Path<T>, label: string, options: {
|
|
2797
|
-
label: string;
|
|
2798
|
-
value: string | number;
|
|
2799
|
-
}[], fieldOptions?: {
|
|
2800
|
-
description?: string;
|
|
2801
|
-
isDisabled?: boolean;
|
|
2802
|
-
className?: string;
|
|
2803
|
-
orientation?: "horizontal" | "vertical";
|
|
2804
|
-
}): this;
|
|
2805
|
-
/**
|
|
2806
|
-
* Add a slider field
|
|
2807
|
-
*/
|
|
2808
|
-
slider(name: Path<T>, label: string, options?: {
|
|
2809
|
-
min?: number;
|
|
2810
|
-
max?: number;
|
|
2811
|
-
step?: number;
|
|
2812
|
-
description?: string;
|
|
2813
|
-
isDisabled?: boolean;
|
|
2814
|
-
className?: string;
|
|
2815
|
-
}): this;
|
|
2816
|
-
/**
|
|
2817
|
-
* Add a date field
|
|
2818
|
-
*/
|
|
2819
|
-
date(name: Path<T>, label: string, options?: {
|
|
2820
|
-
placeholder?: string;
|
|
2821
|
-
description?: string;
|
|
2822
|
-
isDisabled?: boolean;
|
|
2823
|
-
className?: string;
|
|
2824
|
-
}): this;
|
|
2825
|
-
/**
|
|
2826
|
-
* Add a file field
|
|
2827
|
-
*/
|
|
2828
|
-
file(name: Path<T>, label: string, options?: {
|
|
2829
|
-
accept?: string;
|
|
2830
|
-
multiple?: boolean;
|
|
2831
|
-
description?: string;
|
|
2832
|
-
isDisabled?: boolean;
|
|
2833
|
-
className?: string;
|
|
2834
|
-
}): this;
|
|
2835
|
-
/**
|
|
2836
|
-
* Build the final schema and fields
|
|
2837
|
-
*/
|
|
2838
|
-
build(): {
|
|
2839
|
-
schema: z.ZodSchema<T>;
|
|
2840
|
-
fields: ZodFormFieldConfig<T>[];
|
|
2841
|
-
};
|
|
2842
|
-
}
|
|
2843
|
-
/**
|
|
2844
|
-
* Create a new type-inferred form builder
|
|
2845
|
-
*/
|
|
2846
|
-
declare function createTypeInferredBuilder<T extends FieldValues>(): TypeInferredBuilder<T>;
|
|
2847
|
-
/**
|
|
2848
|
-
* Define a form with type inference
|
|
2849
|
-
*/
|
|
2850
|
-
declare function defineInferredForm<T extends FieldValues>(fieldDefinitions: (builder: TypeInferredBuilder<T>) => TypeInferredBuilder<T>): {
|
|
2851
|
-
schema: z.ZodSchema<T>;
|
|
2852
|
-
fields: ZodFormFieldConfig<T>[];
|
|
2853
|
-
};
|
|
2854
|
-
/**
|
|
2855
|
-
* Field type builders for individual field creation
|
|
2856
|
-
*/
|
|
2857
|
-
declare const field: {
|
|
2858
|
-
checkbox: <T extends FieldValues>(name: Path<T>, label: string, options?: Parameters<TypeInferredBuilder<T>["checkbox"]>[2]) => TypeInferredBuilder<T>;
|
|
2859
|
-
date: <T extends FieldValues>(name: Path<T>, label: string, options?: Parameters<TypeInferredBuilder<T>["date"]>[2]) => TypeInferredBuilder<T>;
|
|
2860
|
-
email: <T extends FieldValues>(name: Path<T>, label: string, options?: Parameters<TypeInferredBuilder<T>["email"]>[2]) => TypeInferredBuilder<T>;
|
|
2861
|
-
file: <T extends FieldValues>(name: Path<T>, label: string, options?: Parameters<TypeInferredBuilder<T>["file"]>[2]) => TypeInferredBuilder<T>;
|
|
2862
|
-
number: <T extends FieldValues>(name: Path<T>, label: string, options?: Parameters<TypeInferredBuilder<T>["number"]>[2]) => TypeInferredBuilder<T>;
|
|
2863
|
-
radio: <T extends FieldValues>(name: Path<T>, label: string, options: {
|
|
2864
|
-
label: string;
|
|
2865
|
-
value: string | number;
|
|
2866
|
-
}[], fieldOptions?: Parameters<TypeInferredBuilder<T>["radio"]>[3]) => TypeInferredBuilder<T>;
|
|
2867
|
-
select: <T extends FieldValues>(name: Path<T>, label: string, options: {
|
|
2868
|
-
label: string;
|
|
2869
|
-
value: string | number;
|
|
2870
|
-
}[]) => TypeInferredBuilder<T>;
|
|
2871
|
-
slider: <T extends FieldValues>(name: Path<T>, label: string, options?: Parameters<TypeInferredBuilder<T>["slider"]>[2]) => TypeInferredBuilder<T>;
|
|
2872
|
-
switch: <T extends FieldValues>(name: Path<T>, label: string, options?: Parameters<TypeInferredBuilder<T>["switch"]>[2]) => TypeInferredBuilder<T>;
|
|
2873
|
-
text: <T extends FieldValues>(name: Path<T>, label: string, options?: Parameters<TypeInferredBuilder<T>["text"]>[2]) => TypeInferredBuilder<T>;
|
|
2874
|
-
textarea: <T extends FieldValues>(name: Path<T>, label: string, options?: Parameters<TypeInferredBuilder<T>["textarea"]>[2]) => TypeInferredBuilder<T>;
|
|
2875
|
-
};
|
|
2876
|
-
|
|
2877
|
-
/**
|
|
2878
|
-
* Enhanced nested path builder with better syntax for complex nested structures
|
|
2879
|
-
* Provides multiple approaches for handling nested field paths
|
|
2880
|
-
*/
|
|
2881
|
-
declare class NestedPathBuilder<T extends FieldValues> {
|
|
2882
|
-
private fields;
|
|
2883
|
-
/**
|
|
2884
|
-
* Create a nested object path builder
|
|
2885
|
-
* Usage: builder.nest("address").field("street", "Street Address")
|
|
2886
|
-
*/
|
|
2887
|
-
nest<TPath extends Path<T>>(path: TPath): NestedObjectBuilder<T, TPath>;
|
|
2888
|
-
/**
|
|
2889
|
-
* Create a section-based path builder
|
|
2890
|
-
* Usage: builder.section("shipping").field("street", "Street Address")
|
|
2891
|
-
*/
|
|
2892
|
-
section<TPath extends Path<T>>(path: TPath): SectionBuilder<T, TPath>;
|
|
2893
|
-
/**
|
|
2894
|
-
* Add a field with single path
|
|
2895
|
-
* Usage: builder.field("firstName", "First Name")
|
|
2896
|
-
*/
|
|
2897
|
-
field(name: Path<T>, label: string, type?: string, props?: any): this;
|
|
2898
|
-
/**
|
|
2899
|
-
* Add a field with path segments
|
|
2900
|
-
* Usage: builder.fieldPath(["user", "profile", "name"], "Full Name")
|
|
2901
|
-
*/
|
|
2902
|
-
fieldPath(path: string[], label: string, type?: string, props?: any): this;
|
|
2903
|
-
/**
|
|
2904
|
-
* Add a field with template literal path
|
|
2905
|
-
* Usage: builder.field`user.profile.name`("Full Name")
|
|
2906
|
-
*/
|
|
2907
|
-
fieldTemplate(path: TemplateStringsArray): FieldTemplateBuilder<T>;
|
|
2908
|
-
/**
|
|
2909
|
-
* Return to the parent builder (no-op for root builder)
|
|
2910
|
-
*/
|
|
2911
|
-
end(): this;
|
|
2912
|
-
build(): ZodFormFieldConfig<T>[];
|
|
2913
|
-
}
|
|
2914
|
-
/**
|
|
2915
|
-
* Nested object builder for chaining nested paths
|
|
2916
|
-
*/
|
|
2917
|
-
declare class NestedObjectBuilder<T extends FieldValues, TPath extends Path<T>> {
|
|
2918
|
-
private parent;
|
|
2919
|
-
private path;
|
|
2920
|
-
constructor(parent: NestedPathBuilder<T>, path: TPath);
|
|
2921
|
-
/**
|
|
2922
|
-
* Add a field to the current nested path
|
|
2923
|
-
*/
|
|
2924
|
-
field<FName extends string>(fieldName: FName, label: string, type?: string, props?: any): NestedObjectBuilder<T, TPath>;
|
|
2925
|
-
/**
|
|
2926
|
-
* Nest deeper into the object
|
|
2927
|
-
*/
|
|
2928
|
-
nest<SubPath extends string>(subPath: SubPath): NestedObjectBuilder<T, TPath>;
|
|
2929
|
-
/**
|
|
2930
|
-
* Return to the parent builder
|
|
2931
|
-
*/
|
|
2932
|
-
end(): NestedPathBuilder<T>;
|
|
2933
|
-
}
|
|
2934
|
-
/**
|
|
2935
|
-
* Section builder for grouping related fields
|
|
2936
|
-
*/
|
|
2937
|
-
declare class SectionBuilder<T extends FieldValues, TPath extends Path<T>> {
|
|
2938
|
-
private parent;
|
|
2939
|
-
private path;
|
|
2940
|
-
constructor(parent: NestedPathBuilder<T>, path: TPath);
|
|
2941
|
-
/**
|
|
2942
|
-
* Add a field to the current section
|
|
2943
|
-
*/
|
|
2944
|
-
field<FName extends string>(fieldName: FName, label: string, type?: string, props?: any): SectionBuilder<T, TPath>;
|
|
2945
|
-
/**
|
|
2946
|
-
* Add multiple fields to the section
|
|
2947
|
-
*/
|
|
2948
|
-
fields(fieldDefinitions: {
|
|
2949
|
-
name: string;
|
|
2950
|
-
label: string;
|
|
2951
|
-
type?: string;
|
|
2952
|
-
props?: any;
|
|
2953
|
-
}[]): SectionBuilder<T, TPath>;
|
|
2954
|
-
/**
|
|
2955
|
-
* Nest deeper into the section
|
|
2956
|
-
*/
|
|
2957
|
-
nest<SubPath extends string>(subPath: SubPath): NestedObjectBuilder<T, TPath>;
|
|
2958
|
-
/**
|
|
2959
|
-
* Return to the parent builder
|
|
2960
|
-
*/
|
|
2961
|
-
end(): NestedPathBuilder<T>;
|
|
2962
|
-
}
|
|
2963
|
-
/**
|
|
2964
|
-
* Template literal field builder
|
|
2965
|
-
*/
|
|
2966
|
-
declare class FieldTemplateBuilder<T extends FieldValues> {
|
|
2967
|
-
private parent;
|
|
2968
|
-
private path;
|
|
2969
|
-
constructor(parent: NestedPathBuilder<T>, path: string);
|
|
2970
|
-
/**
|
|
2971
|
-
* Complete the field definition
|
|
2972
|
-
*/
|
|
2973
|
-
complete(label: string, type?: string, props?: any): NestedPathBuilder<T>;
|
|
2974
|
-
}
|
|
2975
|
-
/**
|
|
2976
|
-
* Factory function for creating the nested path builder
|
|
2977
|
-
*/
|
|
2978
|
-
declare function createNestedPathBuilder<T extends FieldValues>(): NestedPathBuilder<T>;
|
|
2979
|
-
|
|
2980
|
-
/**
|
|
2981
|
-
* Options for the useDebouncedValidation hook.
|
|
2982
|
-
*/
|
|
2983
|
-
interface UseDebouncedValidationOptions {
|
|
2984
|
-
delay?: number;
|
|
2985
|
-
fields?: string[];
|
|
2986
|
-
enabled?: boolean;
|
|
2987
|
-
}
|
|
2988
|
-
/**
|
|
2989
|
-
* Hook for debouncing form validation to improve performance.
|
|
2990
|
-
*
|
|
2991
|
-
* @description
|
|
2992
|
-
* Delays validation until the user stops typing, reducing unnecessary
|
|
2993
|
-
* validation calls and improving form performance. Useful for forms with
|
|
2994
|
-
* expensive validation logic or many fields.
|
|
2995
|
-
*
|
|
2996
|
-
* @template T - The form data type
|
|
2997
|
-
*
|
|
2998
|
-
* @param {UseFormReturn<T>} form - React Hook Form instance
|
|
2999
|
-
* @param {UseDebouncedValidationOptions} [options] - Configuration options
|
|
3000
|
-
* @param {number} [options.delay=300] - Delay in milliseconds before validation
|
|
3001
|
-
* @param {string[]} [options.fields] - Specific fields to watch (if not provided, watches all)
|
|
3002
|
-
* @param {boolean} [options.enabled=true] - Whether debouncing is enabled
|
|
3003
|
-
*
|
|
3004
|
-
* @returns {Object} Debounced validation utilities
|
|
3005
|
-
* @returns {() => void} debouncedTrigger - Function to trigger debounced validation
|
|
3006
|
-
* @returns {boolean} isDebouncing - Whether validation is currently debouncing
|
|
3007
|
-
*
|
|
3008
|
-
* @example
|
|
3009
|
-
* ```tsx
|
|
3010
|
-
* import { useDebouncedValidation } from "@rachelallyson/hero-hook-form";
|
|
3011
|
-
* import { useForm } from "react-hook-form";
|
|
3012
|
-
*
|
|
3013
|
-
* function MyForm() {
|
|
3014
|
-
* const form = useForm();
|
|
3015
|
-
* const { debouncedTrigger, isDebouncing } = useDebouncedValidation(form, {
|
|
3016
|
-
* delay: 500,
|
|
3017
|
-
* fields: ["email", "username"], // Only watch these fields
|
|
3018
|
-
* });
|
|
3019
|
-
*
|
|
3020
|
-
* return (
|
|
3021
|
-
* <form>
|
|
3022
|
-
* <input
|
|
3023
|
-
* {...form.register("email")}
|
|
3024
|
-
* onChange={(e) => {
|
|
3025
|
-
* form.setValue("email", e.target.value);
|
|
3026
|
-
* debouncedTrigger();
|
|
3027
|
-
* }}
|
|
3028
|
-
* />
|
|
3029
|
-
* {isDebouncing && <span>Validating...</span>}
|
|
3030
|
-
* </form>
|
|
3031
|
-
* );
|
|
3032
|
-
* }
|
|
3033
|
-
* ```
|
|
3034
|
-
*
|
|
3035
|
-
* @see {@link useDebouncedFieldValidation} for single field debouncing
|
|
3036
|
-
* @category Hooks
|
|
3037
|
-
*/
|
|
3038
|
-
declare function useDebouncedValidation<T extends Record<string, any>>(form: UseFormReturn<T>, options?: UseDebouncedValidationOptions): {
|
|
3039
|
-
debouncedTrigger: () => void;
|
|
3040
|
-
isDebouncing: boolean;
|
|
3041
|
-
};
|
|
3042
|
-
/**
|
|
3043
|
-
* Hook for debouncing validation of a single field.
|
|
3044
|
-
*
|
|
3045
|
-
* @description
|
|
3046
|
-
* Similar to useDebouncedValidation but optimized for a single field.
|
|
3047
|
-
* Automatically triggers validation when the specified field changes.
|
|
3048
|
-
*
|
|
3049
|
-
* @template T - The form data type
|
|
3050
|
-
*
|
|
3051
|
-
* @param {UseFormReturn<T>} form - React Hook Form instance
|
|
3052
|
-
* @param {keyof T} fieldName - Name of the field to debounce
|
|
3053
|
-
* @param {Object} [options] - Configuration options
|
|
3054
|
-
* @param {number} [options.delay=300] - Delay in milliseconds before validation
|
|
3055
|
-
* @param {boolean} [options.enabled=true] - Whether debouncing is enabled
|
|
3056
|
-
*
|
|
3057
|
-
* @returns {Object} Debounced field validation utilities
|
|
3058
|
-
* @returns {() => void} debouncedFieldTrigger - Function to trigger debounced validation for this field
|
|
3059
|
-
* @returns {boolean} isDebouncing - Whether validation is currently debouncing
|
|
3060
|
-
*
|
|
3061
|
-
* @example
|
|
3062
|
-
* ```tsx
|
|
3063
|
-
* import { useDebouncedFieldValidation } from "@rachelallyson/hero-hook-form";
|
|
3064
|
-
* import { useForm } from "react-hook-form";
|
|
3065
|
-
*
|
|
3066
|
-
* function MyForm() {
|
|
3067
|
-
* const form = useForm();
|
|
3068
|
-
* const { debouncedFieldTrigger, isDebouncing } = useDebouncedFieldValidation(
|
|
3069
|
-
* form,
|
|
3070
|
-
* "email",
|
|
3071
|
-
* { delay: 500 }
|
|
3072
|
-
* );
|
|
3073
|
-
*
|
|
3074
|
-
* return (
|
|
3075
|
-
* <input
|
|
3076
|
-
* {...form.register("email")}
|
|
3077
|
-
* onChange={(e) => {
|
|
3078
|
-
* form.setValue("email", e.target.value);
|
|
3079
|
-
* debouncedFieldTrigger();
|
|
3080
|
-
* }}
|
|
3081
|
-
* />
|
|
3082
|
-
* );
|
|
3083
|
-
* }
|
|
3084
|
-
* ```
|
|
3085
|
-
*
|
|
3086
|
-
* @see {@link useDebouncedValidation} for multiple fields
|
|
3087
|
-
* @category Hooks
|
|
3088
|
-
*/
|
|
3089
|
-
declare function useDebouncedFieldValidation<T extends Record<string, any>>(form: UseFormReturn<T>, fieldName: keyof T, options?: {
|
|
3090
|
-
delay?: number;
|
|
3091
|
-
enabled?: boolean;
|
|
3092
|
-
}): {
|
|
3093
|
-
debouncedFieldTrigger: () => void;
|
|
3094
|
-
isDebouncing: boolean;
|
|
3095
|
-
};
|
|
3096
|
-
|
|
3097
|
-
/**
|
|
3098
|
-
* Options for the useInferredForm hook.
|
|
3099
|
-
*
|
|
3100
|
-
* @template T - The form data type
|
|
3101
|
-
*/
|
|
3102
|
-
interface UseInferredFormOptions<T extends FieldValues> {
|
|
3103
|
-
defaultValues?: Partial<T>;
|
|
3104
|
-
mode?: "onChange" | "onBlur" | "onSubmit" | "onTouched" | "all";
|
|
3105
|
-
reValidateMode?: "onChange" | "onBlur" | "onSubmit";
|
|
3106
|
-
shouldFocusError?: boolean;
|
|
3107
|
-
shouldUnregister?: boolean;
|
|
3108
|
-
delayError?: number;
|
|
3109
|
-
}
|
|
3110
|
-
/**
|
|
3111
|
-
* Hook for creating a form instance from an inferred form configuration.
|
|
3112
|
-
*
|
|
3113
|
-
* @description
|
|
3114
|
-
* Creates a React Hook Form instance with Zod validation resolver
|
|
3115
|
-
* from a type-inferred form configuration. Automatically sets up
|
|
3116
|
-
* validation based on the provided schema and fields.
|
|
3117
|
-
*
|
|
3118
|
-
* @template T - The form data type
|
|
3119
|
-
*
|
|
3120
|
-
* @param {any} schema - Zod schema for validation
|
|
3121
|
-
* @param {ZodFormFieldConfig<T>[]} fields - Field configurations
|
|
3122
|
-
* @param {UseInferredFormOptions<T>} [options] - Form options
|
|
3123
|
-
* @param {Partial<T>} [options.defaultValues] - Default form values
|
|
3124
|
-
* @param {"onChange"|"onBlur"|"onSubmit"|"onTouched"|"all"} [options.mode="onChange"] - Validation mode
|
|
3125
|
-
* @param {"onChange"|"onBlur"|"onSubmit"} [options.reValidateMode="onChange"] - Re-validation mode
|
|
3126
|
-
* @param {boolean} [options.shouldFocusError=true] - Focus first error field
|
|
3127
|
-
* @param {boolean} [options.shouldUnregister=false] - Unregister fields on unmount
|
|
3128
|
-
* @param {number} [options.delayError=0] - Delay before showing errors
|
|
3129
|
-
*
|
|
3130
|
-
* @returns {UseFormReturn<T>} React Hook Form instance
|
|
3131
|
-
*
|
|
3132
|
-
* @example
|
|
3133
|
-
* ```tsx
|
|
3134
|
-
* import { useInferredForm, defineInferredForm, field } from "@rachelallyson/hero-hook-form";
|
|
3135
|
-
*
|
|
3136
|
-
* const formConfig = defineInferredForm({
|
|
3137
|
-
* name: field.string("Name").min(2),
|
|
3138
|
-
* email: field.email("Email"),
|
|
3139
|
-
* });
|
|
3140
|
-
*
|
|
3141
|
-
* function MyForm() {
|
|
3142
|
-
* const form = useInferredForm(
|
|
3143
|
-
* formConfig.schema,
|
|
3144
|
-
* formConfig.fields,
|
|
3145
|
-
* { mode: "onBlur" }
|
|
3146
|
-
* );
|
|
3147
|
-
*
|
|
3148
|
-
* return (
|
|
3149
|
-
* <form onSubmit={form.handleSubmit(handleSubmit)}>
|
|
3150
|
-
* {/* form fields *\/}
|
|
3151
|
-
* </form>
|
|
3152
|
-
* );
|
|
3153
|
-
* }
|
|
3154
|
-
* ```
|
|
3155
|
-
*
|
|
3156
|
-
* @see {@link defineInferredForm} for creating type-inferred form configurations
|
|
3157
|
-
* @see {@link useTypeInferredForm} for alternative API
|
|
3158
|
-
* @category Hooks
|
|
3159
|
-
*/
|
|
3160
|
-
declare function useInferredForm<T extends FieldValues>(schema: any, fields: ZodFormFieldConfig<T>[], options?: UseInferredFormOptions<T>): UseFormReturn<T>;
|
|
3161
|
-
/**
|
|
3162
|
-
* Hook that works with type-inferred form configurations.
|
|
3163
|
-
*
|
|
3164
|
-
* @description
|
|
3165
|
-
* Alternative API for useInferredForm that accepts a form configuration
|
|
3166
|
-
* object instead of separate schema and fields parameters. Useful when
|
|
3167
|
-
* working with defineInferredForm results.
|
|
3168
|
-
*
|
|
3169
|
-
* @template T - The form data type
|
|
3170
|
-
*
|
|
3171
|
-
* @param {Object} formConfig - Form configuration object
|
|
3172
|
-
* @param {any} formConfig.schema - Zod schema for validation
|
|
3173
|
-
* @param {ZodFormFieldConfig<T>[]} formConfig.fields - Field configurations
|
|
3174
|
-
* @param {UseInferredFormOptions<T>} [options] - Form options
|
|
3175
|
-
*
|
|
3176
|
-
* @returns {UseFormReturn<T>} React Hook Form instance
|
|
3177
|
-
*
|
|
3178
|
-
* @example
|
|
3179
|
-
* ```tsx
|
|
3180
|
-
* import { useTypeInferredForm, defineInferredForm, field } from "@rachelallyson/hero-hook-form";
|
|
3181
|
-
*
|
|
3182
|
-
* const formConfig = defineInferredForm({
|
|
3183
|
-
* name: field.string("Name").min(2),
|
|
3184
|
-
* email: field.email("Email"),
|
|
3185
|
-
* });
|
|
3186
|
-
*
|
|
3187
|
-
* function MyForm() {
|
|
3188
|
-
* const form = useTypeInferredForm(formConfig);
|
|
3189
|
-
*
|
|
3190
|
-
* return (
|
|
3191
|
-
* <form onSubmit={form.handleSubmit(handleSubmit)}>
|
|
3192
|
-
* {/* form fields *\/}
|
|
3193
|
-
* </form>
|
|
3194
|
-
* );
|
|
3195
|
-
* }
|
|
3196
|
-
* ```
|
|
3197
|
-
*
|
|
3198
|
-
* @see {@link useInferredForm} for direct schema/fields API
|
|
3199
|
-
* @see {@link defineInferredForm} for creating type-inferred form configurations
|
|
3200
|
-
* @category Hooks
|
|
3201
|
-
*/
|
|
3202
|
-
declare function useTypeInferredForm<T extends FieldValues>(formConfig: {
|
|
3203
|
-
schema: any;
|
|
3204
|
-
fields: ZodFormFieldConfig<T>[];
|
|
3205
|
-
}, options?: UseInferredFormOptions<T>): UseFormReturn<T>;
|
|
3206
|
-
|
|
3207
|
-
/**
|
|
3208
|
-
* Props for the ConditionalField component.
|
|
3209
|
-
*
|
|
3210
|
-
* @template TFieldValues - The form data type
|
|
3211
|
-
*/
|
|
3212
|
-
interface ConditionalFieldProps<TFieldValues extends FieldValues> {
|
|
3213
|
-
config: ConditionalFieldConfig<TFieldValues>;
|
|
3214
|
-
control: Control<TFieldValues>;
|
|
3215
|
-
className?: string;
|
|
3216
|
-
}
|
|
3217
|
-
/**
|
|
3218
|
-
* Conditional field component that shows/hides fields based on form values.
|
|
3219
|
-
*
|
|
3220
|
-
* @description
|
|
3221
|
-
* Renders a field only when a condition function returns true based on
|
|
3222
|
-
* current form values. Useful for creating dynamic forms that adapt to
|
|
3223
|
-
* user input. The field is completely removed from the DOM when hidden.
|
|
3224
|
-
*
|
|
3225
|
-
* @template TFieldValues - The form data type
|
|
3226
|
-
*
|
|
3227
|
-
* @param {ConditionalFieldProps<TFieldValues>} props - Component props
|
|
3228
|
-
* @param {ConditionalFieldConfig<TFieldValues>} props.config - Conditional field configuration
|
|
3229
|
-
* @param {Control<TFieldValues>} props.control - React Hook Form control
|
|
3230
|
-
* @param {string} [props.className] - Additional CSS class name
|
|
3231
|
-
*
|
|
3232
|
-
* @returns {JSX.Element|null} The rendered field or null if condition is not met
|
|
3233
|
-
*
|
|
3234
|
-
* @example
|
|
3235
|
-
* ```tsx
|
|
3236
|
-
* import { ConditionalField, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
3237
|
-
*
|
|
3238
|
-
* const fields = [
|
|
3239
|
-
* FormFieldHelpers.checkbox("hasPhone", "I have a phone number"),
|
|
3240
|
-
* ConditionalField({
|
|
3241
|
-
* config: {
|
|
3242
|
-
* name: "phone",
|
|
3243
|
-
* condition: (values) => values.hasPhone === true,
|
|
3244
|
-
* field: FormFieldHelpers.input("phone", "Phone Number", "tel"),
|
|
3245
|
-
* },
|
|
3246
|
-
* control: form.control,
|
|
3247
|
-
* }),
|
|
3248
|
-
* ];
|
|
3249
|
-
* ```
|
|
3250
|
-
*
|
|
3251
|
-
* @example
|
|
3252
|
-
* Multiple conditions:
|
|
3253
|
-
* ```tsx
|
|
3254
|
-
* ConditionalField({
|
|
3255
|
-
* config: {
|
|
3256
|
-
* name: "businessDetails",
|
|
3257
|
-
* condition: (values) =>
|
|
3258
|
-
* values.userType === "business" && values.isRegistered === true,
|
|
3259
|
-
* field: FormFieldHelpers.input("taxId", "Tax ID"),
|
|
3260
|
-
* },
|
|
3261
|
-
* control: form.control,
|
|
3262
|
-
* }),
|
|
3263
|
-
* ```
|
|
3264
|
-
*
|
|
3265
|
-
* @see {@link DynamicSectionField} for grouping multiple conditional fields
|
|
3266
|
-
* @see {@link FieldArrayField} for repeating fields
|
|
3267
|
-
* @category Fields
|
|
3268
|
-
*/
|
|
3269
|
-
declare function ConditionalField<TFieldValues extends FieldValues>({ className, config, control, }: ConditionalFieldProps<TFieldValues>): React$1.JSX.Element | null;
|
|
3270
|
-
|
|
3271
|
-
interface ContentFieldProps<TFieldValues extends FieldValues> {
|
|
3272
|
-
config: ContentFieldConfig<TFieldValues>;
|
|
3273
|
-
form: UseFormReturn<TFieldValues>;
|
|
3274
|
-
submissionState: FormSubmissionState;
|
|
3275
|
-
}
|
|
3276
|
-
declare function ContentField<TFieldValues extends FieldValues>({ config, form, submissionState, }: ContentFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
3277
|
-
|
|
3278
|
-
/**
|
|
3279
|
-
* Props for the FieldArrayField component.
|
|
3280
|
-
*
|
|
3281
|
-
* @template TFieldValues - The form data type
|
|
3282
|
-
*/
|
|
3283
|
-
interface FieldArrayFieldProps<TFieldValues extends FieldValues> {
|
|
3284
|
-
config: FieldArrayConfig<TFieldValues>;
|
|
3285
|
-
className?: string;
|
|
3286
|
-
}
|
|
3287
|
-
/**
|
|
3288
|
-
* Field array component for dynamic repeating field groups.
|
|
3289
|
-
*
|
|
3290
|
-
* @description
|
|
3291
|
-
* Allows users to add and remove multiple instances of a field group.
|
|
3292
|
-
* Useful for forms with repeating data like addresses, items, or contacts.
|
|
3293
|
-
* Automatically manages field array state and provides add/remove buttons.
|
|
3294
|
-
* Supports reordering, custom item rendering, default values, and conditional fields within items.
|
|
3295
|
-
*
|
|
3296
|
-
* @template TFieldValues - The form data type
|
|
3297
|
-
*
|
|
3298
|
-
* @param {FieldArrayFieldProps<TFieldValues>} props - Component props
|
|
3299
|
-
* @param {FieldArrayConfig<TFieldValues>} props.config - Field array configuration
|
|
3300
|
-
* @param {string} [props.className] - Additional CSS class name
|
|
3301
|
-
*
|
|
3302
|
-
* @returns {JSX.Element} The rendered field array with add/remove controls
|
|
3303
|
-
*
|
|
3304
|
-
* @example
|
|
3305
|
-
* Basic usage:
|
|
3306
|
-
* ```tsx
|
|
3307
|
-
* import { FieldArrayField, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
3308
|
-
*
|
|
3309
|
-
* const fields = [
|
|
3310
|
-
* FormFieldHelpers.input("name", "Name"),
|
|
3311
|
-
* {
|
|
3312
|
-
* type: "fieldArray",
|
|
3313
|
-
* name: "addresses",
|
|
3314
|
-
* label: "Address",
|
|
3315
|
-
* fields: [
|
|
3316
|
-
* FormFieldHelpers.input("street", "Street Address"),
|
|
3317
|
-
* FormFieldHelpers.input("city", "City"),
|
|
3318
|
-
* FormFieldHelpers.input("zipCode", "ZIP Code"),
|
|
3319
|
-
* ],
|
|
3320
|
-
* min: 1,
|
|
3321
|
-
* max: 5,
|
|
3322
|
-
* addButtonText: "Add Address",
|
|
3323
|
-
* removeButtonText: "Remove Address",
|
|
3324
|
-
* },
|
|
3325
|
-
* ];
|
|
3326
|
-
* ```
|
|
3327
|
-
*
|
|
3328
|
-
* @example
|
|
3329
|
-
* With reordering:
|
|
3330
|
-
* ```tsx
|
|
3331
|
-
* {
|
|
3332
|
-
* type: "fieldArray",
|
|
3333
|
-
* name: "slots",
|
|
3334
|
-
* label: "Question Slots",
|
|
3335
|
-
* enableReordering: true,
|
|
3336
|
-
* reorderButtonText: { up: "↑", down: "↓" },
|
|
3337
|
-
* fields: [
|
|
3338
|
-
* FormFieldHelpers.select("slotType", "Slot Type", options),
|
|
3339
|
-
* ],
|
|
3340
|
-
* }
|
|
3341
|
-
* ```
|
|
3342
|
-
*
|
|
3343
|
-
* @example
|
|
3344
|
-
* With custom item rendering:
|
|
3345
|
-
* ```tsx
|
|
3346
|
-
* {
|
|
3347
|
-
* type: "fieldArray",
|
|
3348
|
-
* name: "items",
|
|
3349
|
-
* renderItem: ({ index, children, onMoveUp, onMoveDown, onRemove }) => (
|
|
3350
|
-
* <Card className="p-4">
|
|
3351
|
-
* <div className="flex justify-between">
|
|
3352
|
-
* <span>Item {index + 1}</span>
|
|
3353
|
-
* <Button onPress={onRemove}>Remove</Button>
|
|
3354
|
-
* </div>
|
|
3355
|
-
* {children}
|
|
3356
|
-
* </Card>
|
|
3357
|
-
* ),
|
|
3358
|
-
* fields: [...],
|
|
3359
|
-
* }
|
|
3360
|
-
* ```
|
|
3361
|
-
*
|
|
3362
|
-
* @example
|
|
3363
|
-
* With default item:
|
|
3364
|
-
* ```tsx
|
|
3365
|
-
* {
|
|
3366
|
-
* type: "fieldArray",
|
|
3367
|
-
* name: "slots",
|
|
3368
|
-
* defaultItem: () => ({
|
|
3369
|
-
* order: 0,
|
|
3370
|
-
* slotType: "STATIC",
|
|
3371
|
-
* staticQuestionId: "",
|
|
3372
|
-
* }),
|
|
3373
|
-
* fields: [...],
|
|
3374
|
-
* }
|
|
3375
|
-
* ```
|
|
3376
|
-
*
|
|
3377
|
-
* @example
|
|
3378
|
-
* With conditional fields within items:
|
|
3379
|
-
* ```tsx
|
|
3380
|
-
* {
|
|
3381
|
-
* type: "fieldArray",
|
|
3382
|
-
* name: "slots",
|
|
3383
|
-
* fields: [
|
|
3384
|
-
* FormFieldHelpers.select("slotType", "Slot Type", [
|
|
3385
|
-
* { label: "Static", value: "STATIC" },
|
|
3386
|
-
* { label: "Dynamic", value: "DYNAMIC" },
|
|
3387
|
-
* ]),
|
|
3388
|
-
* {
|
|
3389
|
-
* ...FormFieldHelpers.select("staticQuestionId", "Question", questions),
|
|
3390
|
-
* dependsOn: "slotType",
|
|
3391
|
-
* dependsOnValue: "STATIC",
|
|
3392
|
-
* },
|
|
3393
|
-
* ],
|
|
3394
|
-
* }
|
|
3395
|
-
* ```
|
|
3396
|
-
*
|
|
3397
|
-
* @see {@link ConditionalField} for conditional single fields
|
|
3398
|
-
* @see {@link DynamicSectionField} for conditional field groups
|
|
3399
|
-
* @see {@link createFieldArrayCustomConfig} for advanced custom rendering
|
|
3400
|
-
* @category Fields
|
|
3401
|
-
*/
|
|
3402
|
-
declare function FieldArrayField<TFieldValues extends FieldValues>({ className, config, }: FieldArrayFieldProps<TFieldValues>): React$1.JSX.Element | null;
|
|
3403
|
-
|
|
3404
|
-
/**
|
|
3405
|
-
* Props for the DynamicSectionField component.
|
|
3406
|
-
*
|
|
3407
|
-
* @template TFieldValues - The form data type
|
|
3408
|
-
*/
|
|
3409
|
-
interface DynamicSectionFieldProps<TFieldValues extends FieldValues> {
|
|
3410
|
-
config: DynamicSectionConfig<TFieldValues>;
|
|
3411
|
-
control: Control<TFieldValues>;
|
|
3412
|
-
className?: string;
|
|
3413
|
-
}
|
|
3414
|
-
/**
|
|
3415
|
-
* Dynamic section component that shows/hides groups of fields based on form values.
|
|
3416
|
-
*
|
|
3417
|
-
* @description
|
|
3418
|
-
* Similar to ConditionalField but for groups of fields. Renders a section
|
|
3419
|
-
* with title, description, and multiple fields when a condition is met.
|
|
3420
|
-
* Useful for creating multi-step-like experiences or conditional form sections.
|
|
3421
|
-
*
|
|
3422
|
-
* @template TFieldValues - The form data type
|
|
3423
|
-
*
|
|
3424
|
-
* @param {DynamicSectionFieldProps<TFieldValues>} props - Component props
|
|
3425
|
-
* @param {DynamicSectionConfig<TFieldValues>} props.config - Dynamic section configuration
|
|
3426
|
-
* @param {Control<TFieldValues>} props.control - React Hook Form control
|
|
3427
|
-
* @param {string} [props.className] - Additional CSS class name
|
|
3428
|
-
*
|
|
3429
|
-
* @returns {JSX.Element|null} The rendered section or null if condition is not met
|
|
3430
|
-
*
|
|
3431
|
-
* @example
|
|
3432
|
-
* ```tsx
|
|
3433
|
-
* import { DynamicSectionField, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
3434
|
-
*
|
|
3435
|
-
* const fields = [
|
|
3436
|
-
* FormFieldHelpers.checkbox("hasEmergencyContact", "Has Emergency Contact"),
|
|
3437
|
-
* DynamicSectionField({
|
|
3438
|
-
* config: {
|
|
3439
|
-
* name: "emergencyContact",
|
|
3440
|
-
* title: "Emergency Contact Information",
|
|
3441
|
-
* description: "Please provide emergency contact details",
|
|
3442
|
-
* condition: (values) => values.hasEmergencyContact === true,
|
|
3443
|
-
* fields: [
|
|
3444
|
-
* FormFieldHelpers.input("name", "Contact Name"),
|
|
3445
|
-
* FormFieldHelpers.input("relationship", "Relationship"),
|
|
3446
|
-
* FormFieldHelpers.input("phone", "Phone Number", "tel"),
|
|
3447
|
-
* FormFieldHelpers.input("email", "Email", "email"),
|
|
3448
|
-
* ],
|
|
3449
|
-
* },
|
|
3450
|
-
* control: form.control,
|
|
3451
|
-
* }),
|
|
3452
|
-
* ];
|
|
3453
|
-
* ```
|
|
3454
|
-
*
|
|
3455
|
-
* @example
|
|
3456
|
-
* Nested dynamic sections:
|
|
3457
|
-
* ```tsx
|
|
3458
|
-
* DynamicSectionField({
|
|
3459
|
-
* config: {
|
|
3460
|
-
* name: "businessInfo",
|
|
3461
|
-
* title: "Business Information",
|
|
3462
|
-
* condition: (values) => values.accountType === "business",
|
|
3463
|
-
* fields: [
|
|
3464
|
-
* FormFieldHelpers.input("businessName", "Business Name"),
|
|
3465
|
-
* DynamicSectionField({
|
|
3466
|
-
* config: {
|
|
3467
|
-
* name: "billingAddress",
|
|
3468
|
-
* title: "Billing Address",
|
|
3469
|
-
* condition: (values) => values.businessName && values.taxId,
|
|
3470
|
-
* fields: [
|
|
3471
|
-
* FormFieldHelpers.input("street", "Street Address"),
|
|
3472
|
-
* FormFieldHelpers.input("city", "City"),
|
|
3473
|
-
* ],
|
|
3474
|
-
* },
|
|
3475
|
-
* control: form.control,
|
|
3476
|
-
* }),
|
|
3477
|
-
* ],
|
|
3478
|
-
* },
|
|
3479
|
-
* control: form.control,
|
|
3480
|
-
* }),
|
|
3481
|
-
* ```
|
|
3482
|
-
*
|
|
3483
|
-
* @see {@link ConditionalField} for single conditional fields
|
|
3484
|
-
* @see {@link FieldArrayField} for repeating fields
|
|
3485
|
-
* @category Fields
|
|
3486
|
-
*/
|
|
3487
|
-
declare function DynamicSectionField<TFieldValues extends FieldValues>({ className, config, control, }: DynamicSectionFieldProps<TFieldValues>): React$1.JSX.Element | null;
|
|
3488
|
-
|
|
3489
|
-
interface FormStatusProps<T extends Record<string, any>> {
|
|
3490
|
-
state: EnhancedFormState<T>;
|
|
3491
|
-
onDismiss?: () => void;
|
|
3492
|
-
className?: string;
|
|
3493
|
-
showDetails?: boolean;
|
|
3494
|
-
}
|
|
3495
|
-
declare function FormStatus<T extends Record<string, any>>({ className, onDismiss, showDetails, state, }: FormStatusProps<T>): React$1.JSX.Element | null;
|
|
3496
|
-
interface FormToastProps<T extends Record<string, any>> {
|
|
3497
|
-
state: EnhancedFormState<T>;
|
|
3498
|
-
onDismiss?: () => void;
|
|
3499
|
-
position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
3500
|
-
duration?: number;
|
|
3501
|
-
}
|
|
3502
|
-
declare function FormToast<T extends Record<string, any>>({ duration, onDismiss, position, state, }: FormToastProps<T>): React$1.JSX.Element | null;
|
|
3503
|
-
|
|
3504
|
-
/**
|
|
3505
|
-
* Debounce function for field changes
|
|
3506
|
-
*/
|
|
3507
|
-
declare function debounce<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void;
|
|
3508
|
-
/**
|
|
3509
|
-
* Throttle function for high-frequency events
|
|
3510
|
-
*/
|
|
3511
|
-
declare function throttle<T extends (...args: any[]) => any>(func: T, limit: number): (...args: Parameters<T>) => void;
|
|
3512
|
-
/**
|
|
3513
|
-
* Memoization helper for expensive computations
|
|
3514
|
-
*/
|
|
3515
|
-
declare function useMemoizedCallback<T extends (...args: any[]) => any>(callback: T, deps: React.DependencyList): T;
|
|
3516
|
-
/**
|
|
3517
|
-
* Shallow comparison for React.memo
|
|
3518
|
-
*/
|
|
3519
|
-
declare function shallowEqual<T extends Record<string, any>>(prevProps: T, nextProps: T): boolean;
|
|
3520
|
-
/**
|
|
3521
|
-
* Deep comparison for complex objects
|
|
3522
|
-
*/
|
|
3523
|
-
declare function deepEqual<T extends Record<string, any>>(prevProps: T, nextProps: T): boolean;
|
|
3524
|
-
/**
|
|
3525
|
-
* Performance monitoring utilities (dev mode only)
|
|
3526
|
-
*/
|
|
3527
|
-
declare function usePerformanceMonitor(componentName: string, enabled?: boolean): {
|
|
3528
|
-
renderCount: number;
|
|
3529
|
-
resetRenderCount: () => void;
|
|
3530
|
-
};
|
|
3531
|
-
/**
|
|
3532
|
-
* Optimized field change handler
|
|
3533
|
-
*/
|
|
3534
|
-
declare function createOptimizedFieldHandler<T>(onChange: (value: T) => void, options?: {
|
|
3535
|
-
debounce?: number;
|
|
3536
|
-
throttle?: number;
|
|
3537
|
-
}): (value: T) => void;
|
|
3538
|
-
/**
|
|
3539
|
-
* Memoized field props to prevent unnecessary re-renders
|
|
3540
|
-
*/
|
|
3541
|
-
declare function useMemoizedFieldProps<T extends Record<string, any>>(props: T, deps: React.DependencyList): T;
|
|
3542
|
-
|
|
3543
|
-
/**
|
|
3544
|
-
* Options for syncing arrays
|
|
3545
|
-
*
|
|
3546
|
-
* @template TItem - The item type in the arrays
|
|
3547
|
-
*/
|
|
3548
|
-
interface ArraySyncOptions<TItem> {
|
|
3549
|
-
/** Existing items (from database/API) */
|
|
3550
|
-
existing: TItem[];
|
|
3551
|
-
/** Current items (from form) */
|
|
3552
|
-
current: TItem[];
|
|
3553
|
-
/** Function to extract ID from an item */
|
|
3554
|
-
getId: (item: TItem) => string | number | undefined;
|
|
3555
|
-
}
|
|
3556
|
-
/**
|
|
3557
|
-
* Result of array sync operation
|
|
3558
|
-
*
|
|
3559
|
-
* @template TItem - The item type in the arrays
|
|
3560
|
-
*/
|
|
3561
|
-
interface ArraySyncResult<TItem> {
|
|
3562
|
-
/** Items that should be deleted (exist in existing but not in current) */
|
|
3563
|
-
toDelete: TItem[];
|
|
3564
|
-
/** Items that should be updated (exist in both, may have changed) */
|
|
3565
|
-
toUpdate: {
|
|
3566
|
-
existing: TItem;
|
|
3567
|
-
current: TItem;
|
|
3568
|
-
}[];
|
|
3569
|
-
/** Items that should be created (exist in current but not in existing) */
|
|
3570
|
-
toCreate: TItem[];
|
|
3571
|
-
}
|
|
3572
|
-
/**
|
|
3573
|
-
* Sync arrays to determine what items to delete, update, and create.
|
|
3574
|
-
*
|
|
3575
|
-
* @description
|
|
3576
|
-
* Compares existing items (from database) with current items (from form)
|
|
3577
|
-
* to determine which items need to be deleted, updated, or created.
|
|
3578
|
-
* Useful for edit forms where you need to sync array changes.
|
|
3579
|
-
*
|
|
3580
|
-
* @template TItem - The item type in the arrays
|
|
3581
|
-
*
|
|
3582
|
-
* @param {ArraySyncOptions<TItem>} options - Sync options
|
|
3583
|
-
* @returns {ArraySyncResult<TItem>} Result with items to delete, update, and create
|
|
3584
|
-
*
|
|
3585
|
-
* @example
|
|
3586
|
-
* ```tsx
|
|
3587
|
-
* const { toDelete, toUpdate, toCreate } = syncArrays({
|
|
3588
|
-
* existing: slots,
|
|
3589
|
-
* current: data.slots,
|
|
3590
|
-
* getId: (slot) => slot.id,
|
|
3591
|
-
* });
|
|
3592
|
-
*
|
|
3593
|
-
* // Delete removed slots
|
|
3594
|
-
* await Promise.all(toDelete.map(slot => deleteSlot(slot.id)));
|
|
3595
|
-
*
|
|
3596
|
-
* // Update existing slots
|
|
3597
|
-
* await Promise.all(
|
|
3598
|
-
* toUpdate.map(({ existing, current }) =>
|
|
3599
|
-
* updateSlot(existing.id, current)
|
|
3600
|
-
* )
|
|
3601
|
-
* );
|
|
3602
|
-
*
|
|
3603
|
-
* // Create new slots
|
|
3604
|
-
* await Promise.all(toCreate.map(slot => createSlot(slot)));
|
|
3605
|
-
* ```
|
|
3606
|
-
*
|
|
3607
|
-
* @category Utilities
|
|
3608
|
-
*/
|
|
3609
|
-
declare function syncArrays<TItem>(options: ArraySyncOptions<TItem>): ArraySyncResult<TItem>;
|
|
3610
|
-
|
|
3611
|
-
/**
|
|
3612
|
-
* Options for creating a custom field array config
|
|
3613
|
-
*
|
|
3614
|
-
* @template TFieldValues - The form data type
|
|
3615
|
-
*/
|
|
3616
|
-
interface CreateFieldArrayCustomConfigOptions<TFieldValues extends FieldValues> {
|
|
3617
|
-
/** Field array name */
|
|
3618
|
-
name: ArrayPath<TFieldValues>;
|
|
3619
|
-
/** Optional label for the field array */
|
|
3620
|
-
label?: string;
|
|
3621
|
-
/** Render function for each array item */
|
|
3622
|
-
renderItem: (props: {
|
|
3623
|
-
index: number;
|
|
3624
|
-
field: FieldArrayWithId<TFieldValues, ArrayPath<TFieldValues>>;
|
|
3625
|
-
fields: FieldArrayWithId<TFieldValues, ArrayPath<TFieldValues>>[];
|
|
3626
|
-
form: UseFormReturn<TFieldValues>;
|
|
3627
|
-
control: Control<TFieldValues>;
|
|
3628
|
-
errors: FieldErrors<TFieldValues>;
|
|
3629
|
-
canMoveUp: boolean;
|
|
3630
|
-
canMoveDown: boolean;
|
|
3631
|
-
onMoveUp: () => void;
|
|
3632
|
-
onMoveDown: () => void;
|
|
3633
|
-
onRemove: () => void;
|
|
3634
|
-
}) => React$1.ReactNode;
|
|
3635
|
-
/** Optional render function for add button */
|
|
3636
|
-
renderAddButton?: (props: {
|
|
3637
|
-
onAdd: () => void;
|
|
3638
|
-
canAdd: boolean;
|
|
3639
|
-
}) => React$1.ReactNode;
|
|
3640
|
-
/** Function to create default item when adding new array item */
|
|
3641
|
-
defaultItem?: () => any;
|
|
3642
|
-
/** Minimum number of items */
|
|
3643
|
-
min?: number;
|
|
3644
|
-
/** Maximum number of items */
|
|
3645
|
-
max?: number;
|
|
3646
|
-
/** Enable reordering of array items */
|
|
3647
|
-
enableReordering?: boolean;
|
|
3648
|
-
/** Optional className */
|
|
3649
|
-
className?: string;
|
|
3650
|
-
}
|
|
3651
|
-
/**
|
|
3652
|
-
* Create a CustomFieldConfig for field arrays with full control over rendering.
|
|
3653
|
-
*
|
|
3654
|
-
* @description
|
|
3655
|
-
* This helper creates a CustomFieldConfig that uses useFieldArray internally,
|
|
3656
|
-
* giving you full control over the UI while still being integrated with the form.
|
|
3657
|
-
* Useful when you need custom layouts, reordering, or complex item rendering
|
|
3658
|
-
* that FieldArrayConfig doesn't support.
|
|
3659
|
-
*
|
|
3660
|
-
* @template TFieldValues - The form data type
|
|
3661
|
-
*
|
|
3662
|
-
* @param {CreateFieldArrayCustomConfigOptions<TFieldValues>} options - Configuration options
|
|
3663
|
-
* @returns {CustomFieldConfig<TFieldValues>} Custom field config for field arrays
|
|
3664
|
-
*
|
|
3665
|
-
* @example
|
|
3666
|
-
* ```tsx
|
|
3667
|
-
* const slotsConfig = createFieldArrayCustomConfig("slots", {
|
|
3668
|
-
* label: "Question Slots",
|
|
3669
|
-
* enableReordering: true,
|
|
3670
|
-
* renderItem: ({ index, field, form, control, onMoveUp, onMoveDown, onRemove }) => (
|
|
3671
|
-
* <div className="border rounded-lg p-4">
|
|
3672
|
-
* <div className="flex justify-between">
|
|
3673
|
-
* <span>Slot {index + 1}</span>
|
|
3674
|
-
* <div className="flex gap-2">
|
|
3675
|
-
* <Button onPress={onMoveUp}>↑</Button>
|
|
3676
|
-
* <Button onPress={onMoveDown}>↓</Button>
|
|
3677
|
-
* <Button onPress={onRemove}>Remove</Button>
|
|
3678
|
-
* </div>
|
|
3679
|
-
* </div>
|
|
3680
|
-
* <SelectField
|
|
3681
|
-
* name={`slots.${index}.slotType`}
|
|
3682
|
-
* control={control}
|
|
3683
|
-
* // ...
|
|
3684
|
-
* />
|
|
3685
|
-
* </div>
|
|
3686
|
-
* ),
|
|
3687
|
-
* });
|
|
3688
|
-
* ```
|
|
3689
|
-
*
|
|
3690
|
-
* @category Utilities
|
|
3691
|
-
*/
|
|
3692
|
-
declare function createFieldArrayCustomConfig<TFieldValues extends FieldValues>(options: CreateFieldArrayCustomConfigOptions<TFieldValues>): CustomFieldConfig<TFieldValues>;
|
|
3693
|
-
|
|
3694
|
-
/**
|
|
3695
|
-
* Common validation patterns for forms
|
|
3696
|
-
*/
|
|
3697
|
-
declare const validationPatterns: {
|
|
3698
|
-
creditCard: z.ZodString;
|
|
3699
|
-
date: z.ZodString;
|
|
3700
|
-
email: z.ZodString;
|
|
3701
|
-
password: z.ZodString;
|
|
3702
|
-
phoneInternational: z.ZodString;
|
|
3703
|
-
phoneUS: z.ZodString;
|
|
3704
|
-
ssn: z.ZodString;
|
|
3705
|
-
strongPassword: z.ZodString;
|
|
3706
|
-
time: z.ZodString;
|
|
3707
|
-
url: z.ZodString;
|
|
3708
|
-
zipCode: z.ZodString;
|
|
3709
|
-
};
|
|
3710
|
-
/**
|
|
3711
|
-
* Async validation helpers
|
|
3712
|
-
*/
|
|
3713
|
-
declare const asyncValidation: {
|
|
3714
|
-
/**
|
|
3715
|
-
* Email availability check
|
|
3716
|
-
*/
|
|
3717
|
-
emailAvailability: (email: string) => Promise<boolean>;
|
|
3718
|
-
/**
|
|
3719
|
-
* Username availability check
|
|
3720
|
-
*/
|
|
3721
|
-
usernameAvailability: (username: string) => Promise<boolean>;
|
|
3722
|
-
};
|
|
3723
|
-
/**
|
|
3724
|
-
* Custom error messages
|
|
3725
|
-
*/
|
|
3726
|
-
declare const errorMessages: {
|
|
3727
|
-
date: () => string;
|
|
3728
|
-
email: () => string;
|
|
3729
|
-
max: (fieldName: string, max: number) => string;
|
|
3730
|
-
maxLength: (fieldName: string, max: number) => string;
|
|
3731
|
-
min: (fieldName: string, min: number) => string;
|
|
3732
|
-
minLength: (fieldName: string, min: number) => string;
|
|
3733
|
-
pattern: (fieldName: string) => string;
|
|
3734
|
-
phone: () => string;
|
|
3735
|
-
required: (fieldName: string) => string;
|
|
3736
|
-
time: () => string;
|
|
3737
|
-
url: () => string;
|
|
3738
|
-
};
|
|
3739
|
-
/**
|
|
3740
|
-
* Server-side validation integration
|
|
3741
|
-
*/
|
|
3742
|
-
declare const serverValidation: {
|
|
3743
|
-
/**
|
|
3744
|
-
* Apply server errors to form
|
|
3745
|
-
*/
|
|
3746
|
-
applyServerErrors: (errors: Record<string, string[]>, setError: any) => void;
|
|
3747
|
-
/**
|
|
3748
|
-
* Clear server errors
|
|
3749
|
-
*/
|
|
3750
|
-
clearServerErrors: (fields: string[], clearErrors: any) => void;
|
|
3751
|
-
};
|
|
3752
|
-
/**
|
|
3753
|
-
* Form validation utilities
|
|
3754
|
-
*/
|
|
3755
|
-
declare const validationUtils: {
|
|
3756
|
-
/**
|
|
3757
|
-
* Debounced validation
|
|
3758
|
-
*/
|
|
3759
|
-
debounceValidation: (fn: (...args: any[]) => void, delay?: number) => (...args: any[]) => void;
|
|
3760
|
-
/**
|
|
3761
|
-
* Get field error message
|
|
3762
|
-
*/
|
|
3763
|
-
getFieldError: (errors: Record<string, string>, field: string) => string | undefined;
|
|
3764
|
-
/**
|
|
3765
|
-
* Check if field has error
|
|
3766
|
-
*/
|
|
3767
|
-
hasFieldError: (errors: Record<string, string>, field: string) => boolean;
|
|
3768
|
-
/**
|
|
3769
|
-
* Validate form data against schema
|
|
3770
|
-
*/
|
|
3771
|
-
validateForm: (data: any, schema: z.ZodSchema) => Promise<{
|
|
3772
|
-
errors: Record<string, string>;
|
|
3773
|
-
success: boolean;
|
|
3774
|
-
}>;
|
|
3775
|
-
};
|
|
3776
|
-
|
|
3777
|
-
export { AdvancedFieldBuilder, type ArraySyncOptions, type ArraySyncResult, AutocompleteField, type AutocompleteFieldProps, type AutocompleteOption, type BaseFormFieldConfig, BasicFormBuilder, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, type CommonFieldDefaults, CommonFields, ConditionalField, type ConditionalFieldConfig, type ConditionalFieldProps, type ConditionalValidation, ConfigurableForm, ContentField, type ContentFieldConfig, type CreateFieldArrayCustomConfigOptions, type CustomFieldConfig, DateField, type DateFieldConfig, type DateFieldProps, type DateInputDefaults, type DynamicSectionConfig, DynamicSectionField, type DynamicSectionFieldProps, type EnhancedFormState, FieldArrayBuilder, type FieldArrayConfig, FieldArrayField, type FieldArrayFieldProps, FieldArrayItemBuilder, type FieldBaseProps, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, FontPickerField, type FontPickerFieldConfig, type FontPickerFieldProps, type FormConfig, FormField, type FormFieldConfig, FormFieldHelpers, type FormProps, FormProvider, FormStatus, type FormStatusProps, type FormStep, type FormSubmissionState, type FormTestUtils, FormToast, type FormToastProps, type FormValidationError, type HeroHookFormDefaultsConfig, HeroHookFormProvider, type HeroHookFormProviderProps, type InputDefaults, InputField, type InputFieldProps, type RadioFieldConfig, type RadioGroupDefaults, RadioGroupField, type RadioGroupFieldProps, type SelectDefaults, SelectField, type SelectFieldProps, ServerActionForm, type ServerFieldError, type ServerFormError, SimpleForm, type SimpleFormProps, type SliderDefaults, SliderField, type SliderFieldConfig, type SliderFieldProps, type StringFieldConfig, SubmitButton, type SubmitButtonProps, type SwitchDefaults, SwitchField, type SwitchFieldProps, type TextareaDefaults, TextareaField, type TextareaFieldProps, TypeInferredBuilder, type UseDebouncedValidationOptions, type UseEnhancedFormStateOptions, type UseInferredFormOptions, type ValidationUtils, type WithControl, type WizardFormConfig, ZodForm, type ZodFormConfig, type ZodFormFieldConfig, applyServerErrors, asyncValidation, commonValidations, createAdvancedBuilder, createBasicFormBuilder, createDateSchema, createEmailSchema, createField, createFieldArrayBuilder, createFieldArrayCustomConfig, createFieldArrayItemBuilder, createFileSchema, createFormTestUtils, createFutureDateSchema, createMaxLengthSchema, createMinLengthSchema, createMockFormData, createMockFormErrors, createNestedPathBuilder, createNumberRangeSchema, createOptimizedFieldHandler, createPasswordSchema, createPastDateSchema, createPhoneSchema, createRequiredCheckboxSchema, createRequiredSchema, createTypeInferredBuilder, createUrlSchema, createZodFormConfig, crossFieldValidation, debounce, deepEqual, defineInferredForm, errorMessages, field, getFieldError, getFormErrors, hasFieldError, hasFormErrors, serverValidation, shallowEqual, simulateFieldInput, simulateFormSubmission, syncArrays, throttle, useDebouncedFieldValidation, useDebouncedValidation, useEnhancedFormState, useFormHelper, useHeroForm, useHeroHookFormDefaults, useInferredForm, useMemoizedCallback, useMemoizedFieldProps, usePerformanceMonitor, useTypeInferredForm, useZodForm, validationPatterns, validationUtils, waitForFormState };
|