@payfit/unity-components/dist/esm/components/form/Form.d.ts

import { default as React, PropsWithChildren, Ref } from 'react';
import { StandardSchemaV1 } from '@standard-schema/spec';
import { FormProps as AriaFormProps } from 'react-aria-components/Form';
import { FieldErrors, UseFormReturn } from 'react-hook-form';
import { Schema, TFormValues } from '../../hooks/use-form.types.js';
type AllowedAriaFormProps = Omit<AriaFormProps, 'action' | 'onSubmit' | 'method' | 'target' | 'validationErrors' | 'onInvalid'>;
export interface FormProps<TSchema extends Schema, TFormInputValues extends TFormValues = StandardSchemaV1.InferInput<TSchema>, TFormOutputs extends TFormValues = StandardSchemaV1.InferOutput<TSchema>, TActionResult = unknown> extends PropsWithChildren<AllowedAriaFormProps> {
    /** The form instance from react-hook-form */
    form: UseFormReturn<TFormInputValues, any, TFormOutputs>;
    /** The schema to validate the form data */
    schema: TSchema;
    /** The operations to execute when the form is submitted and the input data is valid */
    action: (values: TFormOutputs) => Promise<TActionResult> | TActionResult;
    /** Handle successful form submission (when the `action` callback resolves its promise or does not throw an error) */
    onSuccess?: (result: TActionResult, data: TFormOutputs) => void;
    /** Handle form submission errors (when the `action` callback rejects its promise or throws an error) */
    onError?: (error: unknown, data: TFormOutputs) => void;
    /** Handle form validation errors (when form data is invalid) */
    onInvalid?: (errors: FieldErrors<TFormInputValues>) => void;
    /** Enable or disable `react-hook-form`'s devtools (only in development mode) */
    debug?: boolean;
}
type FormComponent = {
    <TSchema extends Schema, TFormInputValues extends TFormValues = StandardSchemaV1.InferInput<TSchema>, TFormOutputs extends TFormValues = StandardSchemaV1.InferOutput<TSchema>, TActionResult = unknown>(props: FormProps<TSchema, TFormInputValues, TFormOutputs, TActionResult> & {
        ref?: Ref<HTMLFormElement>;
    }): React.JSX.Element;
    displayName?: string;
};
/**
 * The `Form` component provides full state management for complex forms with validation by following a schema-based approach.
 *
 * Use this component to create complex forms with validation and error handling, alongside the [`FormField` component](/?path=/docs/forms-formfield--docs).
 *
 * Under the hood, the `Form` component is a wrapper around the `react-hook-form` library, which takes care of form state management. Additionally, it uses the `zod` library to define a schema used for form data validation. To use the `Form` component correctly, **you must install Zod and react-hook-form** as dependencies in your project:
 *
 * ```bash
 * $ yarn add zod react-hook-form
 * ```
 * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
 * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
 */
declare const Form: FormComponent;
export { Form };