fix(elements): Improve determineInputTypeFromName (#2866)

* fix(elements): Improve JSDoc

* fix(elements): Use correct names for determineInputTypeFromName

* chore(elements): Add empty changeset

.changeset/late-jobs-sort.md

@@ -0,0 +1,2 @@
+---
+---

packages/elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clerk/elements",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Clerk Elements",
   "keywords": [
     "clerk",

packages/elements/src/react/common/form/index.tsx

@@ -110,10 +110,11 @@ const useFieldErrors = ({ name }: Partial<Pick<FieldDetails, 'name'>>) => {
   };
 };
 
-const determineInputTypeFromName = (name: string) => {
-  if (name === 'password') return 'password' as const;
-  if (name === 'email') return 'email' as const;
-  if (name === 'phone') return 'tel' as const;
+const determineInputTypeFromName = (name: FormFieldProps['name']) => {
+  if (name === 'password' || name === 'confirmPassword' || name === 'currentPassword' || name === 'newPassword')
+    return 'password' as const;
+  if (name === 'emailAddress') return 'email' as const;
+  if (name === 'phoneNumber') return 'tel' as const;
   if (name === 'code') return 'otp' as const;
 
   return 'text' as const;
@@ -238,7 +239,7 @@ type FormFieldProps = RadixFormFieldProps & {
 /**
  * A wrapper component used to associate its child elements with a specific form field. Automatically handles unique ID generation and associating labels with inputs.
  *
- * @param name - Give your `<Field>` a unique name inside the current form. If you choose one of the following names Clerk Elements will automatically set the correct type on the `<input />` element: `email`, `password`, `phone`, `code`, and `identifier`.
+ * @param name - Give your `<Field>` a unique name inside the current form. If you choose one of the following names Clerk Elements will automatically set the correct type on the `<input />` element: `emailAddress`, `password`, `phoneNumber`, and `code`.
  *
  * @example
  * <Field name="emailAddress">

packages/elements/src/react/sign-in/choose-strategy.tsx

@@ -54,8 +54,9 @@ export type SignInStrategyOptionProps = WithChildrenProp<{
 /**
  * By default, renders a button which will trigger a change in the chosen sign-in strategy. It **must** be used within a `<Step name='choose-strategy'>` component.
  *
- * @description This component will only render enabled options which are not the current strategy.
+ * @description This component will only render its contents if the chosen strategy is enabled (in the Clerk dashboard) and if it's not the current strategy.
  *
+ * @param name - Define a strategy to be used.
  * @param {boolean} [asChild] - When `true`, the component will render its child and passes all props to it.
  *
  * @example

packages/elements/src/react/sign-up/navigation.tsx

@@ -20,7 +20,7 @@ export type SignInNavigateProps = WithChildrenProp<{
 }>;
 
 /**
- * Renders a button which will navigate to a different step in the sign-in flow.
+ * Renders a button which will navigate to a different step in the sign-up flow.
  *
  * @param {SignUpNavigateElementKey} to - The step to navigate to.
  * @param {boolean} [asChild] - When `true`, the component will render its child and passes all props to it.