@clerk/ui 0.1.9 → 0.1.10

package/dist/components/sign-in.mjs

@@ -1,18 +1,18 @@
-import { useLocalizations, Root2, Label, Input, Animated, Message, useDevModeWarning, useCard, Root as Root$1, LOCALIZATION_NEEDED, Content, Header, Title, Description, Body, Footer, FooterAction, Logo, GlobalError, Button as Button$1, LinkButton, FooterActionText, FooterActionButton, Connections, Actions, CaretRightLegacySm, PasswordField, useEnabledConnections, useEnvironment, useAttributes, useDisplayConfig, EmailField, UsernameField, PhoneNumberField, EmailOrPhoneNumberField, FooterActionLink, PenSm, OTPField, useOptions, Checkbox, useFocusInput, link, stringToFormattedPhoneString } from '../chunk-GJNJVJGS.mjs';
-import { AppearanceProvider, Separator, useAppearance, Icon } from '../chunk-RVVUA25B.mjs';
+import { Root, Label, Input, Animated, Message, useDevModeWarning, useCard, LOCALIZATION_NEEDED, GlobalError, LinkButton, CaretRightLegacySm, PasswordField, useEnvironment, useAttributes, useDisplayConfig, EmailField, UsernameField, PhoneNumberField, EmailOrPhoneNumberField, RouterLink, PenSm, OTPField, Checkbox, useFocusInput, link, stringToFormattedPhoneString } from '../chunk-TVTJKSVH.mjs';
+import { useLocalizations, AppearanceProvider, Root as Root$2, Content, Header, Title, Description, Body, Footer, FooterAction, Logo, Button as Button$1, FooterActionText, FooterActionButton, Separator, Connections, Actions, useEnabledConnections, useAppearance, useOptions, FooterActionLink, Icon } from '../chunk-LLOUIL3Z.mjs';
 import * as SignIn6 from '@clerk/elements/sign-in';
-import { Root } from '@clerk/elements/sign-in';
-import * as React from 'react';
-import React__default from 'react';
+import { Root as Root$1 } from '@clerk/elements/sign-in';
+import * as React6 from 'react';
+import React6__default from 'react';
 import { useClerk } from '@clerk/shared/react';
-import { cva } from 'cva';
+import { cva, cx } from 'cva';
 import { Button, ToggleButton } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as Common8 from '@clerk/elements/common';
 
-var GetHelpContext = React.createContext(null);
+var GetHelpContext = React6.createContext(null);
 var useGetHelp = () => {
-  const context = React.useContext(GetHelpContext);
+  const context = React6.useContext(GetHelpContext);
   if (!context) {
     throw new Error("useGetHelp must be used within GetHelpContext.Provider");
   }
@@ -72,7 +72,7 @@ function SignInChooseSession() {
     {
       asChild: true,
       name: "choose-session",
-      children: /* @__PURE__ */ jsxs(Root$1, { banner: isDev ? LOCALIZATION_NEEDED.developmentMode : null, children: [
+      children: /* @__PURE__ */ jsxs(Root$2, { banner: isDev ? LOCALIZATION_NEEDED.developmentMode : null, children: [
         /* @__PURE__ */ jsxs(Content, { children: [
           /* @__PURE__ */ jsxs(Header, { children: [
             /* @__PURE__ */ jsx(Title, { children: t("signIn.accountSwitcher.title") }),
@@ -280,7 +280,7 @@ function SignInChooseStrategy() {
       {
         asChild: true,
         name: "choose-strategy",
-        children: /* @__PURE__ */ jsxs(Root$1, { banner: isDev ? LOCALIZATION_NEEDED.developmentMode : null, children: [
+        children: /* @__PURE__ */ jsxs(Root$2, { banner: isDev ? LOCALIZATION_NEEDED.developmentMode : null, children: [
           /* @__PURE__ */ jsxs(Content, { children: [
             /* @__PURE__ */ jsxs(Header, { children: [
               /* @__PURE__ */ jsx(Logo, { ...logoProps }),
@@ -439,7 +439,7 @@ function SignInForgotPassword() {
         asChild: true,
         name: "forgot-password",
         children: /* @__PURE__ */ jsxs(
-          Root$1,
+          Root$2,
           {
             as: "form",
             banner: isDev ? LOCALIZATION_NEEDED.developmentMode : null,
@@ -596,7 +596,7 @@ function useSupportEmail() {
   const { supportEmail: supportEmailFromOptions } = useOptions();
   const { displayConfig } = useEnvironment();
   const { supportEmail: supportEmailFromEnvironment } = displayConfig;
-  const supportEmail = React__default.useMemo(
+  const supportEmail = React6__default.useMemo(
     () => supportEmailFromOptions || supportEmailFromEnvironment || ["support", "@", Clerk.frontendApi ? Clerk.frontendApi.replace("clerk.", "") : "clerk.com"].join(""),
     [Clerk.frontendApi, supportEmailFromOptions, supportEmailFromEnvironment]
   );
@@ -608,7 +608,7 @@ function SignInGetHelp() {
   const supportEmail = useSupportEmail();
   const { setShowHelp } = useGetHelp();
   const { logoProps, footerProps } = useCard();
-  return /* @__PURE__ */ jsxs(Root$1, { banner: isDev ? LOCALIZATION_NEEDED.developmentMode : null, children: [
+  return /* @__PURE__ */ jsxs(Root$2, { banner: isDev ? LOCALIZATION_NEEDED.developmentMode : null, children: [
     /* @__PURE__ */ jsxs(Content, { children: [
       /* @__PURE__ */ jsxs(Header, { children: [
         /* @__PURE__ */ jsx(Logo, { ...logoProps }),
@@ -642,7 +642,7 @@ function CheckboxField({
     {
       name,
       asChild: true,
-      children: /* @__PURE__ */ jsxs(Root2, { children: [
+      children: /* @__PURE__ */ jsxs(Root, { children: [
         /* @__PURE__ */ jsxs("div", { className: "cl-c354e22d", children: [
           /* @__PURE__ */ jsx(
             Common8.Input,
@@ -673,7 +673,7 @@ function SignInResetPassword() {
         asChild: true,
         name: "reset-password",
         children: /* @__PURE__ */ jsxs(
-          Root$1,
+          Root$2,
           {
             as: "form",
             banner: isDev ? LOCALIZATION_NEEDED.developmentMode : null,
@@ -745,7 +745,7 @@ function SignInResetPassword() {
     );
   } });
 }
-var EmailOrUsernameField = React__default.forwardRef(function EmailOrUsernameField2({
+var EmailOrUsernameField = React6__default.forwardRef(function EmailOrUsernameField2({
   alternativeFieldTrigger,
   ...props
 }, forwardedRef) {
@@ -755,7 +755,7 @@ var EmailOrUsernameField = React__default.forwardRef(function EmailOrUsernameFie
     {
       name: "identifier",
       asChild: true,
-      children: /* @__PURE__ */ jsxs(Root2, { children: [
+      children: /* @__PURE__ */ jsxs(Root, { children: [
         /* @__PURE__ */ jsx(Common8.Label, { asChild: true, children: /* @__PURE__ */ jsxs(Label, { children: [
           t("formFieldLabel__emailAddress_username"),
           " ",
@@ -787,7 +787,7 @@ function EmailOrUsernameOrPhoneNumberField({
   toggleLabelPhoneNumber,
   ...props
 }) {
-  const [showPhoneNumberField, setShowPhoneNumberField] = React.useState(false);
+  const [showPhoneNumberField, setShowPhoneNumberField] = React6.useState(false);
   const [inputRef, setInputFocus] = useFocusInput();
   const toggle = /* @__PURE__ */ jsxs(
     ToggleButton,
@@ -829,7 +829,7 @@ function PhoneNumberOrUsernameField({
   toggleLabelUsername,
   ...props
 }) {
-  const [showUsernameField, setShowUsernameField] = React.useState(false);
+  const [showUsernameField, setShowUsernameField] = React6.useState(false);
   const toggle = /* @__PURE__ */ jsxs(
     ToggleButton,
     {
@@ -878,6 +878,8 @@ function SignInStart() {
   const isDev = useDevModeWarning();
   const { options } = useAppearance().parsedAppearance;
   const { logoProps, footerProps } = useCard();
+  const clerk = useClerk();
+  const { signUpUrl } = useOptions();
   return /* @__PURE__ */ jsx(Common8.Loading, { scope: "global", children: (isGlobalLoading) => {
     const connectionsWithSeperator = [
       /* @__PURE__ */ jsx(
@@ -895,7 +897,7 @@ function SignInStart() {
         asChild: true,
         name: "start",
         children: /* @__PURE__ */ jsxs(
-          Root$1,
+          Root$2,
           {
             as: "form",
             banner: isDev ? LOCALIZATION_NEEDED.developmentMode : null,
@@ -971,7 +973,8 @@ function SignInStart() {
                         disabled: isGlobalLoading,
                         required: true
                       }
-                    ) : null
+                    ) : null,
+                    /* @__PURE__ */ jsx(AutoFillPasswordField, {})
                   ] }) : null,
                   options.socialButtonsPlacement === "bottom" ? connectionsWithSeperator.reverse() : null
                 ] }),
@@ -1014,10 +1017,14 @@ function SignInStart() {
               /* @__PURE__ */ jsx(Footer, { ...footerProps, children: userSettings.signUp.mode === SIGN_UP_MODES.PUBLIC ? /* @__PURE__ */ jsx(FooterAction, { children: /* @__PURE__ */ jsxs(FooterActionText, { children: [
                 t("signIn.start.actionText"),
                 " ",
-                /* @__PURE__ */ jsxs(FooterActionLink, { href: "/sign-up", children: [
-                  " ",
-                  t("signIn.start.actionLink")
-                ] })
+                /* @__PURE__ */ jsx(
+                  RouterLink,
+                  {
+                    asChild: true,
+                    href: clerk.buildUrlWithAuth(signUpUrl || "/sign-up"),
+                    children: /* @__PURE__ */ jsx(FooterActionLink, { children: t("signIn.start.actionLink") })
+                  }
+                )
               ] }) }) : null })
             ]
           }
@@ -1026,6 +1033,35 @@ function SignInStart() {
     );
   } });
 }
+function AutoFillPasswordField() {
+  const { t } = useLocalizations();
+  const [isAutoFilled, setIsAutoFilled] = React6.useState(false);
+  const fieldRef = React6.useRef(null);
+  const handleAutofill = (event) => {
+    if (event.target.value && !isAutoFilled) {
+      setIsAutoFilled(true);
+    }
+  };
+  React6.useEffect(() => {
+    if (fieldRef.current) {
+      fieldRef.current.setAttribute("inert", "");
+    }
+  }, []);
+  React6.useEffect(() => {
+    if (fieldRef.current && isAutoFilled) {
+      fieldRef.current.removeAttribute("inert");
+    }
+  }, [isAutoFilled]);
+  return /* @__PURE__ */ jsx(
+    PasswordField,
+    {
+      label: t("formFieldLabel__password"),
+      fieldRef,
+      fieldClassName: cx(!isAutoFilled && "cl-73c00d56"),
+      onChange: handleAutofill
+    }
+  );
+}
 function BackupCodeField(props) {
   const { t } = useLocalizations();
   return /* @__PURE__ */ jsx(
@@ -1033,7 +1069,7 @@ function BackupCodeField(props) {
     {
       name: "backup_code",
       asChild: true,
-      children: /* @__PURE__ */ jsxs(Root2, { children: [
+      children: /* @__PURE__ */ jsxs(Root, { children: [
         /* @__PURE__ */ jsx(Common8.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: t("formFieldLabel__backupCode") }) }),
         /* @__PURE__ */ jsx(Common8.FieldState, { children: ({ state }) => {
           return /* @__PURE__ */ jsx(
@@ -1082,7 +1118,7 @@ function SignInVerifications() {
         asChild: true,
         name: "verifications",
         children: /* @__PURE__ */ jsxs(
-          Root$1,
+          Root$2,
           {
             as: "form",
             banner: isDev ? LOCALIZATION_NEEDED.developmentMode : null,
@@ -1593,9 +1629,11 @@ function SignInVerifications() {
     );
   } });
 }
-function SignIn7({ appearance, ...rest }) {
-  const [showHelp, setShowHelp] = React.useState(false);
-  return /* @__PURE__ */ jsx(AppearanceProvider, { appearance, children: /* @__PURE__ */ jsx(GetHelpContext.Provider, { value: { showHelp, setShowHelp }, children: /* @__PURE__ */ jsx(Root, { ...rest, children: showHelp ? /* @__PURE__ */ jsx(SignInGetHelp, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+function SignIn7({ appearance, ...props }) {
+  var _a;
+  const [showHelp, setShowHelp] = React6.useState(false);
+  const componentAppearance = ((_a = props.__experimental) == null ? void 0 : _a.newComponents) ? props.__experimental.appearance : appearance;
+  return /* @__PURE__ */ jsx(AppearanceProvider, { appearance: componentAppearance, children: /* @__PURE__ */ jsx(GetHelpContext.Provider, { value: { showHelp, setShowHelp }, children: /* @__PURE__ */ jsx(Root$1, { ...props, children: showHelp ? /* @__PURE__ */ jsx(SignInGetHelp, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(SignInStart, {}),
     /* @__PURE__ */ jsx(SignInVerifications, {}),
     /* @__PURE__ */ jsx(SignInChooseStrategy, {}),