TypeScript types when creating your own UI components

type FormContextValue<TFormData = any> = FormApi<TFormData, ZodValidator>;

const FormContext = React.createContext<FormContextValue>(
  {} as FormContextValue,
);

interface FormProps<TFormData> extends React.HTMLAttributes<HTMLFormElement> {
  form: FormContextValue<TFormData>;
}

const Form = <TFormData,>({ form, ...props }: FormProps<TFormData>) => {
  return (
    <FormContext.Provider value={form}>
      <form
        onSubmit={async (e) => {
          e.preventDefault();
          e.stopPropagation();
          await form.handleSubmit();
        }}
        {...props}
      />
    </FormContext.Provider>
  );
};

type FormFieldContextValue = {
  name: string;
};

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue,
);

const FormField = <TFormData,>({
  name,
  children,
  ...props
}: FieldComponent<TFormData, ZodValidator> & {
  children: (
    fieldApi: FieldApi<unknown, string, undefined, undefined, unknown>,
  ) => React.ReactNode;
}) => {
  const { Field } = React.useContext(FormContext);
  return (
    <FormFieldContext.Provider value={{ name }}>
      <Field name={name} {...props}>
        {children}
      </Field>
    </FormFieldContext.Provider>
  );
};