@insforge/react 0.3.0 → 0.3.1

package/dist/components.mjs

@@ -766,7 +766,6 @@ function AuthVerificationCodeInput({
 }
 function AuthEmailVerificationStep({
   email,
-  title = "Verify Your Email",
   description,
   method = "code",
   onVerifyCode
@@ -843,29 +842,29 @@ function AuthEmailVerificationStep({
     }
   };
   const displayDescription = description || defaultDescription;
-  return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-6 items-center", children: [
-    /* @__PURE__ */ jsxs("div", { className: "w-full bg-neutral-100 dark:bg-neutral-800 rounded-lg px-4 pt-4 pb-6 flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-black dark:text-white", children: title }),
-      /* @__PURE__ */ jsx("p", { className: "text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
-        part,
-        index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "font-medium text-black dark:text-white", children: email })
-      ] }, index)) }),
-      method === "code" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 mt-2", children: [
-        /* @__PURE__ */ jsx(
-          AuthVerificationCodeInput,
-          {
-            value: verificationCode,
-            onChange: setVerificationCode,
-            email,
-            disabled: isVerifying,
-            onComplete: (code) => {
-              void handleVerifyCode(code);
-            }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 items-stretch", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
+      part,
+      index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "font-medium text-black dark:text-white", children: email })
+    ] }, index)) }),
+    verificationError && /* @__PURE__ */ jsx("div", { className: "pl-3 py-2 pr-2 bg-red-50 border-2 border-red-600 rounded", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-red-500 shrink-0", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 flex-1", children: verificationError })
+    ] }) }),
+    method === "code" && /* @__PURE__ */ jsxs("div", { className: "w-full bg-neutral-100 dark:bg-neutral-800 rounded-lg px-4 pt-4 pb-6 flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx(
+        AuthVerificationCodeInput,
+        {
+          value: verificationCode,
+          onChange: setVerificationCode,
+          email,
+          disabled: isVerifying,
+          onComplete: (code) => {
+            void handleVerifyCode(code);
           }
-        ),
-        verificationError && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400 text-center", children: verificationError }),
-        isVerifying && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
-      ] })
+        }
+      ),
+      isVerifying && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
       "Didn't receive the email?",
@@ -910,7 +909,11 @@ function SignInForm({
   signUpText = "Don't have an account?",
   signUpLinkText = "Sign Up Now",
   signUpUrl = "/sign-up",
-  dividerText = "or"
+  dividerText = "or",
+  // Email verification step props
+  showVerificationStep = false,
+  onVerifyCode,
+  verificationDescription
 }) {
   return /* @__PURE__ */ jsxs(
     AuthContainer,
@@ -923,8 +926,8 @@ function SignInForm({
         /* @__PURE__ */ jsx(
           AuthHeader,
           {
-            title,
-            subtitle,
+            title: showVerificationStep ? "Verify Your Email" : title,
+            subtitle: showVerificationStep ? "" : subtitle,
             appearance: {
               containerClassName: appearance.header?.container,
               titleClassName: appearance.header?.title,
@@ -939,7 +942,14 @@ function SignInForm({
             className: appearance.errorBanner
           }
         ),
-        /* @__PURE__ */ jsxs(
+        showVerificationStep ? /* @__PURE__ */ jsx(
+          AuthEmailVerificationStep,
+          {
+            email,
+            description: verificationDescription,
+            onVerifyCode
+          }
+        ) : /* @__PURE__ */ jsxs(
           "form",
           {
             onSubmit,
@@ -998,39 +1008,41 @@ function SignInForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          AuthLink,
-          {
-            text: signUpText,
-            linkText: signUpLinkText,
-            href: signUpUrl,
-            appearance: {
-              containerClassName: appearance.link?.container,
-              linkClassName: appearance.link?.link
-            }
-          }
-        ),
-        availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
+        !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            AuthDivider,
+            AuthLink,
             {
-              text: dividerText,
-              className: appearance.divider
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            AuthOAuthProviders,
-            {
-              providers: availableProviders,
-              onClick: onOAuthClick,
-              disabled: loading || oauthLoading !== null,
-              loading: oauthLoading,
+              text: signUpText,
+              linkText: signUpLinkText,
+              href: signUpUrl,
               appearance: {
-                containerClassName: appearance.oauth?.container,
-                buttonClassName: appearance.oauth?.button
+                containerClassName: appearance.link?.container,
+                linkClassName: appearance.link?.link
               }
             }
-          )
+          ),
+          availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              AuthDivider,
+              {
+                text: dividerText,
+                className: appearance.divider
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AuthOAuthProviders,
+              {
+                providers: availableProviders,
+                onClick: onOAuthClick,
+                disabled: loading || oauthLoading !== null,
+                loading: oauthLoading,
+                appearance: {
+                  containerClassName: appearance.oauth?.container,
+                  buttonClassName: appearance.oauth?.button
+                }
+              }
+            )
+          ] })
         ] })
       ]
     }
@@ -1112,7 +1124,7 @@ function SignIn({
   if (!emailConfig) {
     return null;
   }
-  return step === "form" ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     SignInForm,
     {
       email,
@@ -1126,14 +1138,10 @@ function SignIn({
       availableProviders: emailConfig?.oAuthProviders || [],
       onOAuthClick: handleOAuth,
       emailAuthConfig: emailConfig,
+      showVerificationStep: step === "awaiting-verification",
+      onVerifyCode: handleVerifyCode,
       ...uiProps
     }
-  ) : /* @__PURE__ */ jsx(
-    AuthEmailVerificationStep,
-    {
-      email,
-      onVerifyCode: handleVerifyCode
-    }
   );
 }
 function SignUpForm({
@@ -1160,7 +1168,11 @@ function SignUpForm({
   signInText = "Already have an account?",
   signInLinkText = "Login Now",
   signInUrl = "/sign-in",
-  dividerText = "or"
+  dividerText = "or",
+  // Email verification step props
+  showVerificationStep = false,
+  onVerifyCode,
+  verificationDescription
 }) {
   return /* @__PURE__ */ jsxs(
     AuthContainer,
@@ -1173,8 +1185,8 @@ function SignUpForm({
         /* @__PURE__ */ jsx(
           AuthHeader,
           {
-            title,
-            subtitle,
+            title: showVerificationStep ? "Verify Your Email" : title,
+            subtitle: showVerificationStep ? "" : subtitle,
             appearance: {
               containerClassName: appearance.header?.container,
               titleClassName: appearance.header?.title,
@@ -1189,7 +1201,14 @@ function SignUpForm({
             className: appearance.errorBanner
           }
         ),
-        /* @__PURE__ */ jsxs(
+        showVerificationStep ? /* @__PURE__ */ jsx(
+          AuthEmailVerificationStep,
+          {
+            email,
+            description: verificationDescription,
+            onVerifyCode
+          }
+        ) : /* @__PURE__ */ jsxs(
           "form",
           {
             onSubmit,
@@ -1246,39 +1265,41 @@ function SignUpForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          AuthLink,
-          {
-            text: signInText,
-            linkText: signInLinkText,
-            href: signInUrl,
-            appearance: {
-              containerClassName: appearance.link?.container,
-              linkClassName: appearance.link?.link
-            }
-          }
-        ),
-        availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            AuthDivider,
-            {
-              text: dividerText,
-              className: appearance.divider
-            }
-          ),
+        !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            AuthOAuthProviders,
+            AuthLink,
             {
-              providers: availableProviders,
-              onClick: onOAuthClick,
-              disabled: loading || oauthLoading !== null,
-              loading: oauthLoading,
+              text: signInText,
+              linkText: signInLinkText,
+              href: signInUrl,
               appearance: {
-                containerClassName: appearance.oauth?.container,
-                buttonClassName: appearance.oauth?.button
+                containerClassName: appearance.link?.container,
+                linkClassName: appearance.link?.link
               }
             }
-          )
+          ),
+          availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              AuthDivider,
+              {
+                text: dividerText,
+                className: appearance.divider
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AuthOAuthProviders,
+              {
+                providers: availableProviders,
+                onClick: onOAuthClick,
+                disabled: loading || oauthLoading !== null,
+                loading: oauthLoading,
+                appearance: {
+                  containerClassName: appearance.oauth?.container,
+                  buttonClassName: appearance.oauth?.button
+                }
+              }
+            )
+          ] })
         ] })
       ]
     }
@@ -1415,7 +1436,7 @@ function SignUp({
   if (!emailConfig) {
     return null;
   }
-  return step === "form" ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     SignUpForm,
     {
       email,
@@ -1429,14 +1450,10 @@ function SignUp({
       availableProviders: emailConfig?.oAuthProviders || [],
       onOAuthClick: handleOAuth,
       emailAuthConfig: emailConfig,
+      showVerificationStep: step === "awaiting-verification",
+      onVerifyCode: handleVerifyCode,
       ...uiProps
     }
-  ) : /* @__PURE__ */ jsx(
-    AuthEmailVerificationStep,
-    {
-      email,
-      onVerifyCode: handleVerifyCode
-    }
   );
 }
 function ForgotPasswordForm({
@@ -1659,13 +1676,18 @@ function ResetPasswordForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("p", { className: appearance.backToSignIn || "text-center text-sm text-gray-600 dark:text-gray-400", children: [
-          backToSignInText && /* @__PURE__ */ jsxs("span", { children: [
-            backToSignInText,
-            " "
-          ] }),
-          /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "text-black dark:text-white font-medium", children: "Back to Sign In" })
-        ] })
+        /* @__PURE__ */ jsx(
+          AuthLink,
+          {
+            text: backToSignInText,
+            linkText: "Back to Sign In",
+            href: backToSignInUrl,
+            appearance: {
+              containerClassName: appearance.link?.container,
+              linkClassName: appearance.link?.link
+            }
+          }
+        )
       ]
     }
   );