@rachelallyson/hero-hook-form 2.7.0 → 2.8.0

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.
@@ -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 };