@rachelallyson/hero-hook-form 2.1.3 → 2.2.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.
@@ -115,7 +115,19 @@ interface DynamicSectionConfig<TFieldValues extends FieldValues> extends BaseFor
115
115
  condition: (formData: Partial<TFieldValues>) => boolean;
116
116
  fields: ZodFormFieldConfig<TFieldValues>[];
117
117
  }
118
- 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>;
118
+ interface ContentFieldConfig<TFieldValues extends FieldValues> {
119
+ type: "content";
120
+ name?: Path<TFieldValues>;
121
+ title?: string;
122
+ description?: string;
123
+ render?: (field: {
124
+ form: UseFormReturn<TFieldValues>;
125
+ errors: FieldErrors<TFieldValues>;
126
+ isSubmitting: boolean;
127
+ }) => React.ReactNode;
128
+ className?: string;
129
+ }
130
+ 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>;
119
131
  interface FormConfig<TFieldValues extends FieldValues> {
120
132
  fields: FormFieldConfig<TFieldValues>[];
121
133
  layout?: "vertical" | "horizontal" | "grid" | "custom";
@@ -129,7 +141,7 @@ interface FormConfig<TFieldValues extends FieldValues> {
129
141
  className?: string;
130
142
  defaultValues?: Partial<TFieldValues>;
131
143
  }
132
- 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">;
144
+ 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>;
133
145
  interface ZodFormConfig<TFieldValues extends FieldValues> extends UseFormProps<TFieldValues> {
134
146
  schema: zod.ZodSchema<TFieldValues>;
135
147
  fields: ZodFormFieldConfig<TFieldValues>[];
@@ -208,6 +220,11 @@ interface FormTestUtils<TFieldValues extends FieldValues> {
208
220
  triggerValidation: (name?: Path<TFieldValues>) => Promise<boolean>;
209
221
  }
210
222
 
223
+ /**
224
+ * Props for the Form component.
225
+ *
226
+ * @template T - The form data type
227
+ */
211
228
  interface FormProps$1<T extends FieldValues> {
212
229
  className?: string;
213
230
  columns?: 1 | 2 | 3;
@@ -225,6 +242,57 @@ interface FormProps$1<T extends FieldValues> {
225
242
  title?: string;
226
243
  defaultValues?: Partial<T>;
227
244
  }
245
+ /**
246
+ * Base form component for building forms without Zod validation.
247
+ *
248
+ * @description
249
+ * This component provides a flexible form solution using React Hook Form
250
+ * without requiring Zod schemas. It's useful when you need more control over
251
+ * validation or want to use React Hook Form's built-in validation rules.
252
+ *
253
+ * @template T - The form data type
254
+ *
255
+ * @param {FormProps<T>} props - Component props
256
+ * @param {FormFieldConfig<T>[]} props.fields - Array of field configurations
257
+ * @param {SubmitHandler<T>} props.onSubmit - Submit handler function
258
+ * @param {Partial<T>} [props.defaultValues] - Default form values
259
+ * @param {string} [props.title] - Optional form title
260
+ * @param {string} [props.subtitle] - Optional form subtitle
261
+ * @param {"vertical"|"horizontal"|"grid"} [props.layout="vertical"] - Form layout
262
+ * @param {1|2|3} [props.columns=1] - Number of columns for grid layout
263
+ * @param {"2"|"4"|"6"|"8"|"lg"} [props.spacing="4"] - Spacing between fields
264
+ * @param {string} [props.submitButtonText="Submit"] - Submit button text
265
+ * @param {boolean} [props.showResetButton=false] - Whether to show reset button
266
+ * @param {(error: FormValidationError) => void} [props.onError] - Error callback
267
+ * @param {(data: T) => void} [props.onSuccess] - Success callback
268
+ *
269
+ * @returns {JSX.Element} The rendered form component
270
+ *
271
+ * @example
272
+ * ```tsx
273
+ * import { ConfigurableForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
274
+ *
275
+ * function MyForm() {
276
+ * return (
277
+ * <ConfigurableForm
278
+ * fields={[
279
+ * FormFieldHelpers.input("name", "Name"),
280
+ * FormFieldHelpers.input("email", "Email", "email"),
281
+ * ]}
282
+ * defaultValues={{ name: "", email: "" }}
283
+ * onSubmit={async (data) => {
284
+ * console.log("Submitted:", data);
285
+ * }}
286
+ * title="Contact Form"
287
+ * />
288
+ * );
289
+ * }
290
+ * ```
291
+ *
292
+ * @see {@link ZodForm} for Zod-integrated form with automatic validation
293
+ * @see {@link FormFieldHelpers} for field creation helpers
294
+ * @category Components
295
+ */
228
296
  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;
229
297
 
230
298
  interface FormFieldProps<TFieldValues extends FieldValues> {
@@ -269,11 +337,13 @@ interface ServerActionFormProps<T extends FieldValues> {
269
337
  title?: string;
270
338
  }
271
339
  /**
272
- * ServerActionForm - A form component compatible with Next.js Server Actions
340
+ * ServerActionForm - A form component compatible with Next.js Server Actions.
273
341
  *
342
+ * @description
274
343
  * This component works with Next.js authentication patterns by using native
275
344
  * HTML form submission with Server Actions, while still providing the
276
- * beautiful HeroUI field components.
345
+ * beautiful HeroUI field components. It uses React's useActionState hook
346
+ * to manage form state and handle server responses.
277
347
  *
278
348
  * **Validation Options:**
279
349
  * - **Server-side only (default)**: Form submits directly to Server Action
@@ -284,22 +354,77 @@ interface ServerActionFormProps<T extends FieldValues> {
284
354
  * - If your Server Action calls `redirect()`, success messages won't display
285
355
  * (the page navigates away). Use URL params or cookies for success messages
286
356
  * when redirecting.
357
+ * - Server Actions receive FormData, not JSON, so field values are strings
358
+ *
359
+ * @template T - The form data type
360
+ *
361
+ * @param {ServerActionFormProps<T>} props - Component props
362
+ * @param {ServerAction<ActionState, FormData>} props.action - Next.js Server Action function
363
+ * @param {FormFieldConfig<T>[]} props.fields - Array of field configurations
364
+ * @param {z.ZodSchema<T>} [props.clientValidationSchema] - Optional Zod schema for client-side validation
365
+ * @param {Partial<T>} [props.defaultValues] - Default form values
366
+ * @param {ActionState} [props.initialState] - Initial state for useActionState
367
+ * @param {string} [props.title] - Optional form title
368
+ * @param {string} [props.subtitle] - Optional form subtitle
369
+ * @param {"vertical"|"horizontal"|"grid"} [props.layout="vertical"] - Form layout style
370
+ * @param {1|2|3} [props.columns=1] - Number of columns for grid layout
371
+ * @param {"2"|"4"|"6"|"8"|"lg"} [props.spacing="4"] - Spacing between form fields
372
+ * @param {string} [props.submitButtonText="Submit"] - Text for the submit button
373
+ * @param {boolean} [props.showResetButton=false] - Whether to show a reset button
374
+ * @param {(error: {...}) => void} [props.onError] - Error callback
375
+ * @param {(data: FormData) => void} [props.onSuccess] - Success callback
376
+ *
377
+ * @returns {JSX.Element} The rendered form component
287
378
  *
288
379
  * @example
380
+ * Server-side only validation:
289
381
  * ```tsx
290
- * // Server-side only validation
382
+ * import { ServerActionForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
383
+ * import { signup } from "@/app/actions/auth";
384
+ *
291
385
  * <ServerActionForm
292
386
  * action={signup}
293
- * fields={[...]}
387
+ * fields={[
388
+ * FormFieldHelpers.input("name", "Name"),
389
+ * FormFieldHelpers.input("email", "Email", "email"),
390
+ * FormFieldHelpers.input("password", "Password", "password"),
391
+ * ]}
294
392
  * />
393
+ * ```
394
+ *
395
+ * @example
396
+ * Client + Server validation:
397
+ * ```tsx
398
+ * import { ServerActionForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
399
+ * import { signup } from "@/app/actions/auth";
400
+ * import { z } from "zod";
401
+ *
402
+ * const signupSchema = z.object({
403
+ * name: z.string().min(2),
404
+ * email: z.string().email(),
405
+ * password: z.string().min(8),
406
+ * });
295
407
  *
296
- * // Client + Server validation
297
408
  * <ServerActionForm
298
409
  * action={signup}
299
410
  * clientValidationSchema={signupSchema}
300
- * fields={[...]}
411
+ * fields={[
412
+ * FormFieldHelpers.input("name", "Name"),
413
+ * FormFieldHelpers.input("email", "Email", "email"),
414
+ * FormFieldHelpers.input("password", "Password", "password"),
415
+ * ]}
416
+ * onError={(error) => {
417
+ * console.error("Form errors:", error.errors);
418
+ * }}
419
+ * onSuccess={(data) => {
420
+ * console.log("Form submitted:", data);
421
+ * }}
301
422
  * />
302
423
  * ```
424
+ *
425
+ * @see {@link ZodForm} for client-side only forms with Zod validation
426
+ * @see {@link ConfigurableForm} for forms without Server Actions
427
+ * @category Components
303
428
  */
304
429
  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;
305
430
 
@@ -380,6 +505,11 @@ type TextareaFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFiel
380
505
  };
381
506
  declare function TextareaField<TFieldValues extends FieldValues>(props: TextareaFieldProps<TFieldValues>): React$1.JSX.Element;
382
507
 
508
+ /**
509
+ * Options for the useFormHelper hook.
510
+ *
511
+ * @template T - The form data type
512
+ */
383
513
  interface UseFormHelperOptions<T extends FieldValues> {
384
514
  onError?: (error: FormValidationError) => void;
385
515
  onSubmit: SubmitHandler<T>;
@@ -387,6 +517,86 @@ interface UseFormHelperOptions<T extends FieldValues> {
387
517
  defaultValues?: Partial<T>;
388
518
  methods?: UseFormReturn<T>;
389
519
  }
520
+ /**
521
+ * Hook for managing form state with enhanced features.
522
+ *
523
+ * @description
524
+ * Provides form state management with loading states, error handling,
525
+ * and submission tracking. Automatically handles form validation and
526
+ * provides callbacks for success and error cases. This hook wraps
527
+ * React Hook Form's useForm with additional state management.
528
+ *
529
+ * @template T - The form data type
530
+ *
531
+ * @param {UseFormHelperOptions<T>} options - Hook options
532
+ * @param {Partial<T>} [options.defaultValues] - Default form values
533
+ * @param {UseFormReturn<T>} [options.methods] - Optional existing form instance
534
+ * @param {SubmitHandler<T>} options.onSubmit - Submit handler function
535
+ * @param {(error: FormValidationError) => void} [options.onError] - Error handler callback
536
+ * @param {(data: T) => void} [options.onSuccess] - Success handler callback
537
+ *
538
+ * @returns {Object} Form helper with state and methods
539
+ * @returns {UseFormReturn<T>} form - React Hook Form instance
540
+ * @returns {() => Promise<void>} handleSubmit - Submit handler function
541
+ * @returns {() => void} resetForm - Reset form function
542
+ * @returns {boolean} isSubmitting - Whether form is currently submitting
543
+ * @returns {boolean} isSubmitted - Whether form has been submitted
544
+ * @returns {boolean} isSuccess - Whether last submission was successful
545
+ * @returns {string|undefined} error - Error message if submission failed
546
+ * @returns {FormSubmissionState} submissionState - Complete submission state object
547
+ *
548
+ * @example
549
+ * ```tsx
550
+ * import { useFormHelper } from "@rachelallyson/hero-hook-form";
551
+ *
552
+ * function MyForm() {
553
+ * const { form, handleSubmit, isSubmitting, error } = useFormHelper({
554
+ * defaultValues: { email: "", name: "" },
555
+ * onSubmit: async (data) => {
556
+ * await submitToServer(data);
557
+ * },
558
+ * onError: (error) => {
559
+ * console.error("Validation errors:", error);
560
+ * },
561
+ * onSuccess: (data) => {
562
+ * console.log("Success:", data);
563
+ * },
564
+ * });
565
+ *
566
+ * return (
567
+ * <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
568
+ * <button disabled={isSubmitting}>
569
+ * {isSubmitting ? "Submitting..." : "Submit"}
570
+ * </button>
571
+ * {error && <div className="error">{error}</div>}
572
+ * </form>
573
+ * );
574
+ * }
575
+ * ```
576
+ *
577
+ * @example
578
+ * Using with existing form instance:
579
+ * ```tsx
580
+ * import { useForm } from "react-hook-form";
581
+ * import { useFormHelper } from "@rachelallyson/hero-hook-form";
582
+ *
583
+ * function MyForm() {
584
+ * const existingForm = useForm({ defaultValues: { email: "" } });
585
+ * const { handleSubmit, isSubmitting } = useFormHelper({
586
+ * methods: existingForm,
587
+ * onSubmit: async (data) => {
588
+ * await submitToServer(data);
589
+ * },
590
+ * });
591
+ *
592
+ * // Use existingForm and handleSubmit together
593
+ * }
594
+ * ```
595
+ *
596
+ * @see {@link useHeroForm} for alternative hook with different API
597
+ * @see {@link ConfigurableForm} for component that uses this hook
598
+ * @category Hooks
599
+ */
390
600
  declare function useFormHelper<T extends FieldValues>({ defaultValues, methods, onError, onSubmit, onSuccess, }: UseFormHelperOptions<T>): {
391
601
  error: string | undefined;
392
602
  form: UseFormReturn<T>;
@@ -399,11 +609,19 @@ declare function useFormHelper<T extends FieldValues>({ defaultValues, methods,
399
609
  };
400
610
 
401
611
  /**
402
- * Enhanced hook that provides both form methods and styling defaults
612
+ * Enhanced hook that provides both form methods and styling defaults.
403
613
  *
614
+ * @description
404
615
  * This hook combines React Hook Form's useFormContext with Hero Hook Form's
405
616
  * styling defaults, giving you access to both form functionality and
406
- * component styling in one convenient hook.
617
+ * component styling in one convenient hook. Must be used within a FormProvider
618
+ * context (provided by ZodForm, ConfigurableForm, or manual FormProvider).
619
+ *
620
+ * @template TFieldValues - The form data type
621
+ *
622
+ * @returns {Object} Enhanced form object with all React Hook Form methods and Hero Hook Form defaults
623
+ * @returns {UseFormReturn<TFieldValues>} All React Hook Form methods (formState, getValues, setValue, etc.)
624
+ * @returns {HeroHookFormDefaultsConfig} defaults - Hero Hook Form styling defaults
407
625
  *
408
626
  * @example
409
627
  * ```tsx
@@ -425,6 +643,10 @@ declare function useFormHelper<T extends FieldValues>({ defaultValues, methods,
425
643
  * const buttonDefaults = defaults.submitButton;
426
644
  * }
427
645
  * ```
646
+ *
647
+ * @see {@link useFormHelper} for form state management with callbacks
648
+ * @see {@link useFormContext} from React Hook Form for base functionality
649
+ * @category Hooks
428
650
  */
429
651
  declare function useHeroForm<TFieldValues extends FieldValues>(): {
430
652
  defaults: Required<Pick<HeroHookFormDefaultsConfig, "input" | "textarea" | "select" | "switch" | "radioGroup" | "checkbox" | "slider" | "dateInput" | "submitButton">>;
@@ -499,6 +721,11 @@ interface FormProps<TFieldValues extends FieldValues> {
499
721
  }
500
722
  declare function FormProvider<TFieldValues extends FieldValues>(props: FormProps<TFieldValues>): React$1.JSX.Element;
501
723
 
724
+ /**
725
+ * Enhanced form state with submission tracking and error management.
726
+ *
727
+ * @template T - The form data type
728
+ */
502
729
  interface EnhancedFormState<T extends FieldValues> {
503
730
  status: "idle" | "submitting" | "success" | "error";
504
731
  isSubmitting: boolean;
@@ -514,6 +741,11 @@ interface EnhancedFormState<T extends FieldValues> {
514
741
  handleError: (error: string) => void;
515
742
  reset: () => void;
516
743
  }
744
+ /**
745
+ * Options for the useEnhancedFormState hook.
746
+ *
747
+ * @template T - The form data type
748
+ */
517
749
  interface UseEnhancedFormStateOptions<T extends FieldValues> {
518
750
  onSuccess?: (data: T) => void;
519
751
  onError?: (error: string) => void;
@@ -522,6 +754,81 @@ interface UseEnhancedFormStateOptions<T extends FieldValues> {
522
754
  autoReset?: boolean;
523
755
  resetDelay?: number;
524
756
  }
757
+ /**
758
+ * Hook for managing enhanced form state with submission tracking.
759
+ *
760
+ * @description
761
+ * Provides advanced form state management including submission status,
762
+ * error tracking, touched/dirty field tracking, and automatic reset
763
+ * functionality. Useful for building forms with rich UI feedback.
764
+ *
765
+ * @template T - The form data type
766
+ *
767
+ * @param {UseFormReturn<T>} form - React Hook Form instance
768
+ * @param {UseEnhancedFormStateOptions<T>} [options] - Configuration options
769
+ * @param {(data: T) => void} [options.onSuccess] - Success callback
770
+ * @param {(error: string) => void} [options.onError] - Error callback
771
+ * @param {string} [options.successMessage] - Custom success message
772
+ * @param {string} [options.errorMessage] - Custom error message
773
+ * @param {boolean} [options.autoReset=true] - Automatically reset after success
774
+ * @param {number} [options.resetDelay=3000] - Delay before auto-reset (ms)
775
+ *
776
+ * @returns {EnhancedFormState<T>} Enhanced form state object
777
+ * @returns {"idle"|"submitting"|"success"|"error"} status - Current submission status
778
+ * @returns {boolean} isSubmitting - Whether form is currently submitting
779
+ * @returns {boolean} isSuccess - Whether last submission was successful
780
+ * @returns {boolean} isError - Whether last submission had an error
781
+ * @returns {string|undefined} error - Error message if submission failed
782
+ * @returns {T|undefined} submittedData - Data from last successful submission
783
+ * @returns {Set<Path<T>>} touchedFields - Set of touched field paths
784
+ * @returns {Set<Path<T>>} dirtyFields - Set of dirty field paths
785
+ * @returns {boolean} hasErrors - Whether form has validation errors
786
+ * @returns {number} errorCount - Number of validation errors
787
+ * @returns {(data: T) => void} handleSuccess - Function to mark submission as successful
788
+ * @returns {(error: string) => void} handleError - Function to mark submission as failed
789
+ * @returns {() => void} reset - Function to reset state to idle
790
+ *
791
+ * @example
792
+ * ```tsx
793
+ * import { useEnhancedFormState } from "@rachelallyson/hero-hook-form";
794
+ * import { useForm } from "react-hook-form";
795
+ *
796
+ * function MyForm() {
797
+ * const form = useForm();
798
+ * const state = useEnhancedFormState(form, {
799
+ * onSuccess: (data) => {
800
+ * console.log("Success:", data);
801
+ * },
802
+ * onError: (error) => {
803
+ * console.error("Error:", error);
804
+ * },
805
+ * autoReset: true,
806
+ * resetDelay: 3000,
807
+ * });
808
+ *
809
+ * const handleSubmit = async (data) => {
810
+ * try {
811
+ * await submitToServer(data);
812
+ * state.handleSuccess(data);
813
+ * } catch (error) {
814
+ * state.handleError(error.message);
815
+ * }
816
+ * };
817
+ *
818
+ * return (
819
+ * <form onSubmit={form.handleSubmit(handleSubmit)}>
820
+ * {/* form fields *\/}
821
+ * {state.isSubmitting && <div>Submitting...</div>}
822
+ * {state.isSuccess && <div>Success!</div>}
823
+ * {state.error && <div>Error: {state.error}</div>}
824
+ * </form>
825
+ * );
826
+ * }
827
+ * ```
828
+ *
829
+ * @see {@link ZodForm} which uses this hook internally
830
+ * @category Hooks
831
+ */
525
832
  declare function useEnhancedFormState<T extends FieldValues>(form: UseFormReturn<T>, options?: UseEnhancedFormStateOptions<T>): EnhancedFormState<T>;
526
833
 
527
834
  interface SubmitButtonProps {
@@ -535,15 +842,99 @@ interface SubmitButtonProps {
535
842
  }
536
843
  declare function SubmitButton(props: SubmitButtonProps): React$1.JSX.Element;
537
844
 
845
+ /**
846
+ * Server field error structure.
847
+ *
848
+ * @template TFieldValues - The form data type
849
+ */
538
850
  interface ServerFieldError<TFieldValues extends FieldValues> {
539
851
  path: Path<TFieldValues>;
540
852
  message: string;
541
853
  type?: string;
542
854
  }
855
+ /**
856
+ * Server form error structure containing field errors.
857
+ *
858
+ * @template TFieldValues - The form data type
859
+ */
543
860
  interface ServerFormError<TFieldValues extends FieldValues> {
544
861
  message?: string;
545
862
  fieldErrors?: readonly ServerFieldError<TFieldValues>[];
546
863
  }
864
+ /**
865
+ * Applies server-side validation errors to a React Hook Form instance.
866
+ *
867
+ * @description
868
+ * Maps server-returned field errors to React Hook Form's error state.
869
+ * Useful for displaying validation errors from API responses. This function
870
+ * iterates through the field errors and sets them on the form using
871
+ * React Hook Form's setError function.
872
+ *
873
+ * @template TFieldValues - The form data type
874
+ *
875
+ * @param {UseFormSetError<TFieldValues>} setError - React Hook Form's setError function
876
+ * @param {ServerFormError<TFieldValues>} serverError - Server error containing field errors
877
+ *
878
+ * @example
879
+ * ```tsx
880
+ * import { applyServerErrors } from "@rachelallyson/hero-hook-form";
881
+ * import { useForm } from "react-hook-form";
882
+ *
883
+ * function MyForm() {
884
+ * const form = useForm();
885
+ *
886
+ * const handleSubmit = async (data) => {
887
+ * try {
888
+ * const response = await fetch("/api/submit", {
889
+ * method: "POST",
890
+ * body: JSON.stringify(data),
891
+ * });
892
+ *
893
+ * if (!response.ok) {
894
+ * const errorData = await response.json();
895
+ * applyServerErrors(form.setError, errorData);
896
+ * }
897
+ * } catch (error) {
898
+ * console.error("Error:", error);
899
+ * }
900
+ * };
901
+ *
902
+ * return (
903
+ * <form onSubmit={form.handleSubmit(handleSubmit)}>
904
+ * {/* form fields go here *\/}
905
+ * </form>
906
+ * );
907
+ * }
908
+ * ```
909
+ *
910
+ * @example
911
+ * With ZodForm error handling:
912
+ * ```tsx
913
+ * import { ZodForm, applyServerErrors } from "@rachelallyson/hero-hook-form";
914
+ *
915
+ * function MyForm() {
916
+ * const form = useForm();
917
+ *
918
+ * const handleSubmit = async (data) => {
919
+ * try {
920
+ * await submitToServer(data);
921
+ * } catch (error) {
922
+ * if (error.fieldErrors) {
923
+ * applyServerErrors(form.setError, {
924
+ * fieldErrors: error.fieldErrors,
925
+ * });
926
+ * }
927
+ * }
928
+ * };
929
+ *
930
+ * return <ZodForm config={{ schema, fields }} onSubmit={handleSubmit} />;
931
+ * }
932
+ * ```
933
+ *
934
+ * @see {@link ServerFormError} for error structure
935
+ * @see {@link ServerFieldError} for field error structure
936
+ * @category Utilities
937
+ */
547
938
  declare function applyServerErrors<TFieldValues extends FieldValues>(setError: UseFormSetError<TFieldValues>, serverError: ServerFormError<TFieldValues>): void;
548
939
 
549
940
  /**
@@ -692,6 +1083,11 @@ declare const commonValidations: {
692
1083
  url: z.ZodString;
693
1084
  };
694
1085
 
1086
+ /**
1087
+ * Props for the ZodForm component.
1088
+ *
1089
+ * @template T - The form data type inferred from the Zod schema
1090
+ */
695
1091
  interface ZodFormProps<T extends FieldValues> {
696
1092
  className?: string;
697
1093
  columns?: 1 | 2 | 3;
@@ -716,6 +1112,101 @@ interface ZodFormProps<T extends FieldValues> {
716
1112
  values: T;
717
1113
  }) => React$1.ReactNode;
718
1114
  }
1115
+ /**
1116
+ * ZodForm component for building type-safe forms with Zod validation.
1117
+ *
1118
+ * @description
1119
+ * This component provides a complete form solution with automatic validation,
1120
+ * error handling, and type safety. It integrates React Hook Form with Zod
1121
+ * schemas and HeroUI components. The form automatically validates inputs based
1122
+ * on the provided Zod schema and displays error messages inline.
1123
+ *
1124
+ * @template T - The form data type inferred from the Zod schema
1125
+ *
1126
+ * @param {ZodFormProps<T>} props - Component props
1127
+ * @param {ZodFormConfig<T>} props.config - Form configuration with schema and fields
1128
+ * @param {SubmitHandler<T>} props.onSubmit - Submit handler function called with validated data
1129
+ * @param {string} [props.title] - Optional form title displayed above the form
1130
+ * @param {string} [props.subtitle] - Optional form subtitle displayed below the title
1131
+ * @param {"vertical"|"horizontal"|"grid"} [props.layout="vertical"] - Form layout style
1132
+ * @param {1|2|3} [props.columns=1] - Number of columns for grid layout (only applies when layout="grid")
1133
+ * @param {"2"|"4"|"6"|"8"|"lg"} [props.spacing="4"] - Spacing between form fields
1134
+ * @param {string} [props.submitButtonText="Submit"] - Text for the submit button
1135
+ * @param {boolean} [props.showResetButton=false] - Whether to show a reset button
1136
+ * @param {string} [props.resetButtonText="Reset"] - Text for the reset button
1137
+ * @param {(error: FormValidationError) => void} [props.onError] - Error callback for validation errors
1138
+ * @param {(data: T) => void} [props.onSuccess] - Success callback called after successful submission
1139
+ * @param {(formState: {...}) => React.ReactNode} [props.render] - Custom render function for advanced use cases
1140
+ *
1141
+ * @returns {JSX.Element} The rendered form component with validation and error handling
1142
+ *
1143
+ * @example
1144
+ * ```tsx
1145
+ * import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
1146
+ * import { z } from "zod";
1147
+ *
1148
+ * const schema = z.object({
1149
+ * email: z.string().email("Please enter a valid email"),
1150
+ * name: z.string().min(2, "Name must be at least 2 characters"),
1151
+ * message: z.string().min(10, "Message must be at least 10 characters"),
1152
+ * });
1153
+ *
1154
+ * function ContactForm() {
1155
+ * const handleSubmit = async (data) => {
1156
+ * console.log("Form submitted:", data);
1157
+ * // Handle form submission (e.g., API call)
1158
+ * };
1159
+ *
1160
+ * return (
1161
+ * <ZodForm
1162
+ * config={{
1163
+ * schema,
1164
+ * fields: [
1165
+ * FormFieldHelpers.input("name", "Name"),
1166
+ * FormFieldHelpers.input("email", "Email", "email"),
1167
+ * FormFieldHelpers.textarea("message", "Message"),
1168
+ * ],
1169
+ * }}
1170
+ * onSubmit={handleSubmit}
1171
+ * title="Contact Us"
1172
+ * subtitle="Send us a message and we'll get back to you"
1173
+ * />
1174
+ * );
1175
+ * }
1176
+ * ```
1177
+ *
1178
+ * @example
1179
+ * Grid layout with multiple columns:
1180
+ * ```tsx
1181
+ * <ZodForm
1182
+ * config={{ schema, fields }}
1183
+ * layout="grid"
1184
+ * columns={2}
1185
+ * spacing="6"
1186
+ * />
1187
+ * ```
1188
+ *
1189
+ * @example
1190
+ * Custom render function for advanced control:
1191
+ * ```tsx
1192
+ * <ZodForm
1193
+ * config={{ schema, fields }}
1194
+ * onSubmit={handleSubmit}
1195
+ * render={({ form, isSubmitting, errors, values }) => (
1196
+ * <div>
1197
+ * <button disabled={isSubmitting}>
1198
+ * {isSubmitting ? "Submitting..." : "Submit"}
1199
+ * </button>
1200
+ * </div>
1201
+ * )}
1202
+ * />
1203
+ * ```
1204
+ *
1205
+ * @see {@link Form} for the base form component without Zod
1206
+ * @see {@link FormFieldHelpers} for field creation helpers
1207
+ * @see {@link createBasicFormBuilder} for builder pattern alternative
1208
+ * @category Components
1209
+ */
719
1210
  declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, render, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): React$1.JSX.Element;
720
1211
 
721
1212
  /**
@@ -728,8 +1219,34 @@ declare function useZodForm<TFieldValues extends FieldValues>(config: ZodFormCon
728
1219
  declare function createZodFormConfig<TFieldValues extends FieldValues>(schema: z.ZodSchema<TFieldValues>, fields: ZodFormFieldConfig<TFieldValues>[], defaultValues?: Partial<TFieldValues>): ZodFormConfig<TFieldValues>;
729
1220
 
730
1221
  /**
731
- * Basic form field builder that eliminates "as const" assertions
732
- * Focuses on the most common use cases
1222
+ * Basic form field builder for creating form field configurations.
1223
+ *
1224
+ * @description
1225
+ * Provides a fluent API for building form field configurations. This builder
1226
+ * focuses on the most common use cases and eliminates the need for "as const"
1227
+ * assertions. Use this for simple forms with standard field types.
1228
+ *
1229
+ * @template T - The form data type
1230
+ *
1231
+ * @example
1232
+ * ```tsx
1233
+ * import { createBasicFormBuilder } from "@rachelallyson/hero-hook-form";
1234
+ *
1235
+ * const fields = createBasicFormBuilder()
1236
+ * .input("name", "Name")
1237
+ * .input("email", "Email", "email")
1238
+ * .textarea("message", "Message")
1239
+ * .select("country", "Country", [
1240
+ * { label: "US", value: "us" },
1241
+ * { label: "CA", value: "ca" },
1242
+ * ])
1243
+ * .checkbox("newsletter", "Subscribe to newsletter")
1244
+ * .build();
1245
+ * ```
1246
+ *
1247
+ * @see {@link createAdvancedBuilder} for more advanced features
1248
+ * @see {@link FormFieldHelpers} for helper function alternative
1249
+ * @category Builders
733
1250
  */
734
1251
  declare class BasicFormBuilder<T extends FieldValues> {
735
1252
  private fields;
@@ -752,6 +1269,18 @@ declare class BasicFormBuilder<T extends FieldValues> {
752
1269
  * Add a checkbox field
753
1270
  */
754
1271
  checkbox(name: Path<T>, label: string): this;
1272
+ /**
1273
+ * Add a content field for headers, questions, or custom content between fields
1274
+ */
1275
+ content(title?: string | null, description?: string | null, options?: {
1276
+ render?: (field: {
1277
+ form: any;
1278
+ errors: any;
1279
+ isSubmitting: boolean;
1280
+ }) => React$1.ReactNode;
1281
+ className?: string;
1282
+ name?: Path<T>;
1283
+ }): this;
755
1284
  /**
756
1285
  * Add a switch field
757
1286
  */
@@ -762,17 +1291,97 @@ declare class BasicFormBuilder<T extends FieldValues> {
762
1291
  build(): ZodFormFieldConfig<T>[];
763
1292
  }
764
1293
  /**
765
- * Create a new simple form field builder
1294
+ * Creates a basic form builder for simple form construction.
1295
+ *
1296
+ * @description
1297
+ * Provides a fluent API for building form field configurations. Best for
1298
+ * simple forms with standard field types. Returns a builder instance with
1299
+ * chainable methods for adding fields.
1300
+ *
1301
+ * @template T - The form data type
1302
+ *
1303
+ * @returns {BasicFormBuilder<T>} Builder instance with chainable methods
1304
+ *
1305
+ * @example
1306
+ * ```tsx
1307
+ * import { createBasicFormBuilder } from "@rachelallyson/hero-hook-form";
1308
+ *
1309
+ * const fields = createBasicFormBuilder()
1310
+ * .input("name", "Name")
1311
+ * .input("email", "Email", "email")
1312
+ * .textarea("message", "Message")
1313
+ * .select("country", "Country", [
1314
+ * { label: "US", value: "us" },
1315
+ * { label: "CA", value: "ca" },
1316
+ * ])
1317
+ * .checkbox("newsletter", "Subscribe to newsletter")
1318
+ * .build();
1319
+ *
1320
+ * // Use with ZodForm
1321
+ * <ZodForm config={{ schema, fields }} onSubmit={handleSubmit} />
1322
+ * ```
1323
+ *
1324
+ * @see {@link createAdvancedBuilder} for more advanced features
1325
+ * @see {@link FormFieldHelpers} for helper function alternative
1326
+ * @see {@link defineInferredForm} for type-inferred forms
1327
+ * @category Builders
766
1328
  */
767
1329
  declare function createBasicFormBuilder<T extends FieldValues>(): BasicFormBuilder<T>;
768
1330
  /**
769
- * Simple helper functions for common field types
1331
+ * Helper functions for creating form field configurations.
1332
+ *
1333
+ * @description
1334
+ * Simple helper functions for common field types. This is the recommended
1335
+ * approach for most use cases as it's straightforward and doesn't require
1336
+ * method chaining. Each helper returns a field configuration object.
1337
+ *
1338
+ * @example
1339
+ * ```tsx
1340
+ * import { FormFieldHelpers } from "@rachelallyson/hero-hook-form";
1341
+ *
1342
+ * const fields = [
1343
+ * FormFieldHelpers.input("name", "Name"),
1344
+ * FormFieldHelpers.input("email", "Email", "email"),
1345
+ * FormFieldHelpers.textarea("message", "Message"),
1346
+ * FormFieldHelpers.select("country", "Country", [
1347
+ * { label: "US", value: "us" },
1348
+ * { label: "CA", value: "ca" },
1349
+ * ]),
1350
+ * FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter"),
1351
+ * ];
1352
+ * ```
1353
+ *
1354
+ * @see {@link createBasicFormBuilder} for builder pattern alternative
1355
+ * @category Builders
770
1356
  */
771
1357
  declare const FormFieldHelpers: {
772
1358
  /**
773
1359
  * Create a checkbox field
774
1360
  */
775
1361
  checkbox: <T extends FieldValues>(name: Path<T>, label: string) => ZodFormFieldConfig<T>;
1362
+ /**
1363
+ * Create a content field for headers, questions, or custom content between fields
1364
+ *
1365
+ * @example
1366
+ * ```tsx
1367
+ * // Simple header
1368
+ * FormFieldHelpers.content("Personal Information", "Please provide your details")
1369
+ *
1370
+ * // Custom render
1371
+ * FormFieldHelpers.content(null, null, {
1372
+ * render: () => <div>Custom content</div>
1373
+ * })
1374
+ * ```
1375
+ */
1376
+ content: <T extends FieldValues>(title?: string | null, description?: string | null, options?: {
1377
+ render?: (field: {
1378
+ form: any;
1379
+ errors: any;
1380
+ isSubmitting: boolean;
1381
+ }) => React$1.ReactNode;
1382
+ className?: string;
1383
+ name?: Path<T>;
1384
+ }) => ZodFormFieldConfig<T>;
776
1385
  /**
777
1386
  * Create a date field
778
1387
  */
@@ -1181,15 +1790,115 @@ declare class FieldTemplateBuilder<T extends FieldValues> {
1181
1790
  */
1182
1791
  declare function createNestedPathBuilder<T extends FieldValues>(): NestedPathBuilder<T>;
1183
1792
 
1793
+ /**
1794
+ * Options for the useDebouncedValidation hook.
1795
+ */
1184
1796
  interface UseDebouncedValidationOptions {
1185
1797
  delay?: number;
1186
1798
  fields?: string[];
1187
1799
  enabled?: boolean;
1188
1800
  }
1801
+ /**
1802
+ * Hook for debouncing form validation to improve performance.
1803
+ *
1804
+ * @description
1805
+ * Delays validation until the user stops typing, reducing unnecessary
1806
+ * validation calls and improving form performance. Useful for forms with
1807
+ * expensive validation logic or many fields.
1808
+ *
1809
+ * @template T - The form data type
1810
+ *
1811
+ * @param {UseFormReturn<T>} form - React Hook Form instance
1812
+ * @param {UseDebouncedValidationOptions} [options] - Configuration options
1813
+ * @param {number} [options.delay=300] - Delay in milliseconds before validation
1814
+ * @param {string[]} [options.fields] - Specific fields to watch (if not provided, watches all)
1815
+ * @param {boolean} [options.enabled=true] - Whether debouncing is enabled
1816
+ *
1817
+ * @returns {Object} Debounced validation utilities
1818
+ * @returns {() => void} debouncedTrigger - Function to trigger debounced validation
1819
+ * @returns {boolean} isDebouncing - Whether validation is currently debouncing
1820
+ *
1821
+ * @example
1822
+ * ```tsx
1823
+ * import { useDebouncedValidation } from "@rachelallyson/hero-hook-form";
1824
+ * import { useForm } from "react-hook-form";
1825
+ *
1826
+ * function MyForm() {
1827
+ * const form = useForm();
1828
+ * const { debouncedTrigger, isDebouncing } = useDebouncedValidation(form, {
1829
+ * delay: 500,
1830
+ * fields: ["email", "username"], // Only watch these fields
1831
+ * });
1832
+ *
1833
+ * return (
1834
+ * <form>
1835
+ * <input
1836
+ * {...form.register("email")}
1837
+ * onChange={(e) => {
1838
+ * form.setValue("email", e.target.value);
1839
+ * debouncedTrigger();
1840
+ * }}
1841
+ * />
1842
+ * {isDebouncing && <span>Validating...</span>}
1843
+ * </form>
1844
+ * );
1845
+ * }
1846
+ * ```
1847
+ *
1848
+ * @see {@link useDebouncedFieldValidation} for single field debouncing
1849
+ * @category Hooks
1850
+ */
1189
1851
  declare function useDebouncedValidation<T extends Record<string, any>>(form: UseFormReturn<T>, options?: UseDebouncedValidationOptions): {
1190
1852
  debouncedTrigger: () => void;
1191
1853
  isDebouncing: boolean;
1192
1854
  };
1855
+ /**
1856
+ * Hook for debouncing validation of a single field.
1857
+ *
1858
+ * @description
1859
+ * Similar to useDebouncedValidation but optimized for a single field.
1860
+ * Automatically triggers validation when the specified field changes.
1861
+ *
1862
+ * @template T - The form data type
1863
+ *
1864
+ * @param {UseFormReturn<T>} form - React Hook Form instance
1865
+ * @param {keyof T} fieldName - Name of the field to debounce
1866
+ * @param {Object} [options] - Configuration options
1867
+ * @param {number} [options.delay=300] - Delay in milliseconds before validation
1868
+ * @param {boolean} [options.enabled=true] - Whether debouncing is enabled
1869
+ *
1870
+ * @returns {Object} Debounced field validation utilities
1871
+ * @returns {() => void} debouncedFieldTrigger - Function to trigger debounced validation for this field
1872
+ * @returns {boolean} isDebouncing - Whether validation is currently debouncing
1873
+ *
1874
+ * @example
1875
+ * ```tsx
1876
+ * import { useDebouncedFieldValidation } from "@rachelallyson/hero-hook-form";
1877
+ * import { useForm } from "react-hook-form";
1878
+ *
1879
+ * function MyForm() {
1880
+ * const form = useForm();
1881
+ * const { debouncedFieldTrigger, isDebouncing } = useDebouncedFieldValidation(
1882
+ * form,
1883
+ * "email",
1884
+ * { delay: 500 }
1885
+ * );
1886
+ *
1887
+ * return (
1888
+ * <input
1889
+ * {...form.register("email")}
1890
+ * onChange={(e) => {
1891
+ * form.setValue("email", e.target.value);
1892
+ * debouncedFieldTrigger();
1893
+ * }}
1894
+ * />
1895
+ * );
1896
+ * }
1897
+ * ```
1898
+ *
1899
+ * @see {@link useDebouncedValidation} for multiple fields
1900
+ * @category Hooks
1901
+ */
1193
1902
  declare function useDebouncedFieldValidation<T extends Record<string, any>>(form: UseFormReturn<T>, fieldName: keyof T, options?: {
1194
1903
  delay?: number;
1195
1904
  enabled?: boolean;
@@ -1198,6 +1907,11 @@ declare function useDebouncedFieldValidation<T extends Record<string, any>>(form
1198
1907
  isDebouncing: boolean;
1199
1908
  };
1200
1909
 
1910
+ /**
1911
+ * Options for the useInferredForm hook.
1912
+ *
1913
+ * @template T - The form data type
1914
+ */
1201
1915
  interface UseInferredFormOptions<T extends FieldValues> {
1202
1916
  defaultValues?: Partial<T>;
1203
1917
  mode?: "onChange" | "onBlur" | "onSubmit" | "onTouched" | "all";
@@ -1206,9 +1920,97 @@ interface UseInferredFormOptions<T extends FieldValues> {
1206
1920
  shouldUnregister?: boolean;
1207
1921
  delayError?: number;
1208
1922
  }
1923
+ /**
1924
+ * Hook for creating a form instance from an inferred form configuration.
1925
+ *
1926
+ * @description
1927
+ * Creates a React Hook Form instance with Zod validation resolver
1928
+ * from a type-inferred form configuration. Automatically sets up
1929
+ * validation based on the provided schema and fields.
1930
+ *
1931
+ * @template T - The form data type
1932
+ *
1933
+ * @param {any} schema - Zod schema for validation
1934
+ * @param {ZodFormFieldConfig<T>[]} fields - Field configurations
1935
+ * @param {UseInferredFormOptions<T>} [options] - Form options
1936
+ * @param {Partial<T>} [options.defaultValues] - Default form values
1937
+ * @param {"onChange"|"onBlur"|"onSubmit"|"onTouched"|"all"} [options.mode="onChange"] - Validation mode
1938
+ * @param {"onChange"|"onBlur"|"onSubmit"} [options.reValidateMode="onChange"] - Re-validation mode
1939
+ * @param {boolean} [options.shouldFocusError=true] - Focus first error field
1940
+ * @param {boolean} [options.shouldUnregister=false] - Unregister fields on unmount
1941
+ * @param {number} [options.delayError=0] - Delay before showing errors
1942
+ *
1943
+ * @returns {UseFormReturn<T>} React Hook Form instance
1944
+ *
1945
+ * @example
1946
+ * ```tsx
1947
+ * import { useInferredForm, defineInferredForm, field } from "@rachelallyson/hero-hook-form";
1948
+ *
1949
+ * const formConfig = defineInferredForm({
1950
+ * name: field.string("Name").min(2),
1951
+ * email: field.email("Email"),
1952
+ * });
1953
+ *
1954
+ * function MyForm() {
1955
+ * const form = useInferredForm(
1956
+ * formConfig.schema,
1957
+ * formConfig.fields,
1958
+ * { mode: "onBlur" }
1959
+ * );
1960
+ *
1961
+ * return (
1962
+ * <form onSubmit={form.handleSubmit(handleSubmit)}>
1963
+ * {/* form fields *\/}
1964
+ * </form>
1965
+ * );
1966
+ * }
1967
+ * ```
1968
+ *
1969
+ * @see {@link defineInferredForm} for creating type-inferred form configurations
1970
+ * @see {@link useTypeInferredForm} for alternative API
1971
+ * @category Hooks
1972
+ */
1209
1973
  declare function useInferredForm<T extends FieldValues>(schema: any, fields: ZodFormFieldConfig<T>[], options?: UseInferredFormOptions<T>): UseFormReturn<T>;
1210
1974
  /**
1211
- * Hook that works with type-inferred forms
1975
+ * Hook that works with type-inferred form configurations.
1976
+ *
1977
+ * @description
1978
+ * Alternative API for useInferredForm that accepts a form configuration
1979
+ * object instead of separate schema and fields parameters. Useful when
1980
+ * working with defineInferredForm results.
1981
+ *
1982
+ * @template T - The form data type
1983
+ *
1984
+ * @param {Object} formConfig - Form configuration object
1985
+ * @param {any} formConfig.schema - Zod schema for validation
1986
+ * @param {ZodFormFieldConfig<T>[]} formConfig.fields - Field configurations
1987
+ * @param {UseInferredFormOptions<T>} [options] - Form options
1988
+ *
1989
+ * @returns {UseFormReturn<T>} React Hook Form instance
1990
+ *
1991
+ * @example
1992
+ * ```tsx
1993
+ * import { useTypeInferredForm, defineInferredForm, field } from "@rachelallyson/hero-hook-form";
1994
+ *
1995
+ * const formConfig = defineInferredForm({
1996
+ * name: field.string("Name").min(2),
1997
+ * email: field.email("Email"),
1998
+ * });
1999
+ *
2000
+ * function MyForm() {
2001
+ * const form = useTypeInferredForm(formConfig);
2002
+ *
2003
+ * return (
2004
+ * <form onSubmit={form.handleSubmit(handleSubmit)}>
2005
+ * {/* form fields *\/}
2006
+ * </form>
2007
+ * );
2008
+ * }
2009
+ * ```
2010
+ *
2011
+ * @see {@link useInferredForm} for direct schema/fields API
2012
+ * @see {@link defineInferredForm} for creating type-inferred form configurations
2013
+ * @category Hooks
1212
2014
  */
1213
2015
  declare function useTypeInferredForm<T extends FieldValues>(formConfig: {
1214
2016
  schema: any;
@@ -1222,6 +2024,13 @@ interface ConditionalFieldProps<TFieldValues extends FieldValues> {
1222
2024
  }
1223
2025
  declare function ConditionalField<TFieldValues extends FieldValues>({ className, config, control, }: ConditionalFieldProps<TFieldValues>): React$1.JSX.Element | null;
1224
2026
 
2027
+ interface ContentFieldProps<TFieldValues extends FieldValues> {
2028
+ config: ContentFieldConfig<TFieldValues>;
2029
+ form: UseFormReturn<TFieldValues>;
2030
+ submissionState: FormSubmissionState;
2031
+ }
2032
+ declare function ContentField<TFieldValues extends FieldValues>({ config, form, submissionState, }: ContentFieldProps<TFieldValues>): React$1.JSX.Element;
2033
+
1225
2034
  interface FieldArrayFieldProps<TFieldValues extends FieldValues> {
1226
2035
  config: FieldArrayConfig<TFieldValues>;
1227
2036
  className?: string;
@@ -1372,4 +2181,4 @@ declare const validationUtils: {
1372
2181
  }>;
1373
2182
  };
1374
2183
 
1375
- export { AdvancedFieldBuilder, type BaseFormFieldConfig, BasicFormBuilder, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, type CommonFieldDefaults, CommonFields, ConditionalField, type ConditionalFieldConfig, type ConditionalFieldProps, type ConditionalValidation, ConfigurableForm, 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, 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, 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, throttle, useDebouncedFieldValidation, useDebouncedValidation, useEnhancedFormState, useFormHelper, useHeroForm, useHeroHookFormDefaults, useInferredForm, useMemoizedCallback, useMemoizedFieldProps, usePerformanceMonitor, useTypeInferredForm, useZodForm, validationPatterns, validationUtils, waitForFormState };
2184
+ export { AdvancedFieldBuilder, 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 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, 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, 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, throttle, useDebouncedFieldValidation, useDebouncedValidation, useEnhancedFormState, useFormHelper, useHeroForm, useHeroHookFormDefaults, useInferredForm, useMemoizedCallback, useMemoizedFieldProps, usePerformanceMonitor, useTypeInferredForm, useZodForm, validationPatterns, validationUtils, waitForFormState };