chore(authenticator): add additional types for form fields (#4376)

* chore(authenticator): add additional types for form fields

* Create warm-cups-camp.md

* chore: remove unused variable

* fix types

* chore: remove example app test change

* chore: remove typings

* chore: move types to react package only

* chore: omit formFields type before adding it

.changeset/warm-cups-camp.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui": patch
+---
+
+chore(authenticator): add additional types for form fields

docs/src/pages/[platform]/connected-components/authenticator/customization/formfields/form-fields.web.mdx

@@ -77,7 +77,7 @@ For a full list of component names and field names can be found in the [input fo
 
 You can customize any label, placeholder, set a field as required or not required, and hide or show labels by configuring the `formFields` props, and passing it into the Authenticator component.
 To use this feature create a `formFields` prop and include the component name as a key.
-Inside that object you can list all the inputs you'd like to change by their name.
+Inside that object you can list all the inputs you'd like to change by their name. Inputs can have additional client side validation by following [HTML form validation standards](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation).
 
 The following example customizes the Sign In page by:
 

packages/react/src/components/Authenticator/Authenticator.tsx

@@ -4,6 +4,8 @@ import {
   AmplifyUser,
   configureComponent,
   isFunction,
+  FormFieldComponents,
+  FormFieldOptions,
 } from '@aws-amplify/ui';
 
 import {
@@ -30,15 +32,33 @@ import { defaultComponents } from './hooks/useCustomComponents/defaultComponents
 
 export type SignOut = UseAuthenticator['signOut'];
 export type AuthenticatorProps = Partial<
-  AuthenticatorMachineOptions &
+  Omit<AuthenticatorMachineOptions, 'formFields'> &
     ComponentsProviderProps &
     RouterProps & {
       children:
         | React.ReactNode
         | ((props: { signOut?: SignOut; user?: AmplifyUser }) => JSX.Element);
+      formFields: {
+        [key in FormFieldComponents]?: {
+          [field_name: string]: ReactFormFieldOptions;
+        };
+      };
     }
 >;
 
+interface ReactFormFieldOptions extends FormFieldOptions {
+  /** Desired HTML defaultValue type */
+  defaultValue?: string;
+  /** isReadOnly maps to readonly HTML type */
+  isReadOnly?: boolean;
+  /** Desired HTML pattern type */
+  pattern?: string | undefined;
+  /** Desired HTML minLength type */
+  minLength?: number;
+  /** Desired HTML maxLength type */
+  maxLength?: number;
+}
+
 // `AuthenticatorInternal` exists to give access to the context returned via `useAuthenticator`,
 // which allows the `Authenticator` to just return `children` if a user is authenticated.
 // Once the `Provider` is removed from the `Authenticator` component and exported as