@main12/auth-login 0.3.8 → 0.4.1

package/dist/components/pages/LoginPageTailwind.js

@@ -5,15 +5,17 @@ import { useSearchParams } from 'next/navigation';
 import { Button, Input, Divider, Spinner } from '../ui/index.js';
 import { useLoginFlow } from '../../auth/application/hooks/useLoginFlow.js';
 import { AuthLayout } from '../AuthLayout.js';
-function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, backgroundClass }) {
+import { getUiTranslations } from '../ui/translations.js';
+function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
     const searchParams = useSearchParams();
     const resolvedRedirect = searchParams.get('redirect') || redirectTo;
+    const t = getUiTranslations(locale, messages).login;
     const { step, email, password, error, isLoading, isSendingOtp, showPassword, setEmail, setPassword, setShowPassword, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail, handleGoogleLogin } = useLoginFlow({
         redirectTo: resolvedRedirect,
         onPasswordLogin
     });
-    const stepTitle = step === 'otp-prompt' ? 'Verify Identity' : step === 'email' ? 'Welcome Back' : 'Enter Password';
-    const stepSubtitle = step === 'otp-prompt' ? "We need to verify it's you." : step === 'email' ? 'Sign in with your email to continue.' : 'Enter your password to sign in.';
+    const stepTitle = step === 'otp-prompt' ? t.otpPromptTitle : step === 'email' ? t.title : t.passwordStepTitle;
+    const stepSubtitle = step === 'otp-prompt' ? t.otpPromptSubtitle : step === 'email' ? t.subtitle : t.passwordStepSubtitle;
     return /*#__PURE__*/ _jsxs(AuthLayout, {
         logo: logo,
         title: stepTitle,
@@ -24,12 +26,12 @@ function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = tru
         footer: signupUrl ? /*#__PURE__*/ _jsxs("p", {
             className: "text-center text-gray-600 text-sm",
             children: [
-                "Don't have an account?",
+                t.noAccount,
                 ' ',
                 /*#__PURE__*/ _jsx("a", {
                     href: signupUrl,
                     className: "text-gray-900 font-medium hover:underline",
-                    children: "Sign up"
+                    children: t.signUpLink
                 })
             ]
         }) : undefined,
@@ -69,7 +71,7 @@ function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = tru
                                             })
                                         ]
                                     }),
-                                    "Continue with Google"
+                                    t.continueWithGoogle
                                 ]
                             }),
                             /*#__PURE__*/ _jsxs("div", {
@@ -80,7 +82,7 @@ function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = tru
                                     }),
                                     /*#__PURE__*/ _jsx("span", {
                                         className: "text-gray-500 text-sm",
-                                        children: "or"
+                                        children: t.or
                                     }),
                                     /*#__PURE__*/ _jsx(Divider, {
                                         className: "flex-1"
@@ -99,7 +101,7 @@ function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = tru
                             }),
                             /*#__PURE__*/ _jsx(Input, {
                                 type: "email",
-                                label: "Email",
+                                label: t.emailLabel,
                                 value: email,
                                 onValueChange: setEmail,
                                 isRequired: true,
@@ -109,7 +111,7 @@ function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = tru
                                 type: "submit",
                                 variant: "primary",
                                 isLoading: isLoading,
-                                children: "Continue"
+                                children: t.continue
                             })
                         ]
                     })
@@ -129,7 +131,7 @@ function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = tru
                                 type: "button",
                                 onClick: handleEditEmail,
                                 className: "text-gray-600 text-sm font-medium hover:text-gray-900",
-                                children: "Edit"
+                                children: t.edit
                             })
                         ]
                     }),
@@ -143,7 +145,7 @@ function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = tru
                             }),
                             /*#__PURE__*/ _jsx(Input, {
                                 type: showPassword ? 'text' : 'password',
-                                label: "Password",
+                                label: t.passwordLabel,
                                 value: password,
                                 onValueChange: setPassword,
                                 isRequired: true,
@@ -155,14 +157,14 @@ function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = tru
                                 children: /*#__PURE__*/ _jsx("a", {
                                     href: "/forgot-password",
                                     className: "text-sm text-gray-700 hover:text-gray-900 hover:underline",
-                                    children: "Forgot password?"
+                                    children: t.forgotPassword
                                 })
                             }),
                             /*#__PURE__*/ _jsx(Button, {
                                 type: "submit",
                                 variant: "primary",
                                 isLoading: isLoading,
-                                children: "Continue"
+                                children: t.continue
                             })
                         ]
                     })
@@ -182,7 +184,7 @@ function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = tru
                                 type: "button",
                                 onClick: handleEditEmail,
                                 className: "text-gray-600 text-sm font-medium hover:text-gray-900",
-                                children: "Edit"
+                                children: t.edit
                             })
                         ]
                     }),
@@ -201,7 +203,7 @@ function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = tru
                                 }),
                                 /*#__PURE__*/ _jsx("p", {
                                     className: "text-sm text-blue-700",
-                                    children: "We'll send a verification code to this email."
+                                    children: t.verificationNotice
                                 })
                             ]
                         })
@@ -210,7 +212,7 @@ function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = tru
                         variant: "primary",
                         isLoading: isSendingOtp,
                         onPress: handleSendOtp,
-                        children: isSendingOtp ? 'Sending...' : 'Send Code'
+                        children: isSendingOtp ? t.sendingCode : t.sendCode
                     })
                 ]
             })

package/dist/components/pages/SetPasswordPageHero.d.ts

@@ -2,4 +2,4 @@ import type { AuthLayoutConfig } from '../AuthLayout';
 export interface SetPasswordPageHeroProps extends AuthLayoutConfig {
     redirectTo?: string;
 }
-export default function SetPasswordPageHero({ redirectTo, logo, poweredBy, cardClassName, backgroundClass }: SetPasswordPageHeroProps): import("react/jsx-runtime").JSX.Element;
+export default function SetPasswordPageHero({ redirectTo, logo, poweredBy, cardClassName, backgroundClass, locale, messages }: SetPasswordPageHeroProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/SetPasswordPageHero.js

@@ -6,17 +6,19 @@ import { Icon } from '@iconify/react';
 import { motion } from 'framer-motion';
 import { useSetPasswordFlow } from '../../auth/application/hooks/useSetPasswordFlow.js';
 import { AuthLayout } from '../AuthLayout.js';
-export default function SetPasswordPageHero({ redirectTo = '/', logo, poweredBy, cardClassName, backgroundClass }) {
+import { getUiTranslations } from '../ui/translations.js';
+export default function SetPasswordPageHero({ redirectTo = '/', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
     const { password, confirmPassword, error, isLoading, showPassword, strength, setPassword, setConfirmPassword, setShowPassword, handleSubmit } = useSetPasswordFlow({
         redirectTo
     });
     const bars = Array.from({
         length: 5
     }, (_, i)=>i < strength.score);
+    const t = getUiTranslations(locale, messages).setPassword;
     return /*#__PURE__*/ _jsx(AuthLayout, {
         logo: logo,
-        title: "Set Your Password",
-        subtitle: "Create a secure password for your account",
+        title: t.title,
+        subtitle: t.subtitle,
         poweredBy: poweredBy,
         cardClassName: cardClassName,
         backgroundClass: backgroundClass,
@@ -44,7 +46,7 @@ export default function SetPasswordPageHero({ redirectTo = '/', logo, poweredBy,
                     children: [
                         /*#__PURE__*/ _jsx(Label, {
                             className: "text-gray-600",
-                            children: "New Password"
+                            children: t.newPasswordLabel
                         }),
                         /*#__PURE__*/ _jsxs("div", {
                             className: "relative",
@@ -82,7 +84,7 @@ export default function SetPasswordPageHero({ redirectTo = '/', logo, poweredBy,
                     children: [
                         /*#__PURE__*/ _jsx(Label, {
                             className: "text-gray-600",
-                            children: "Confirm Password"
+                            children: t.confirmPasswordLabel
                         }),
                         /*#__PURE__*/ _jsx(Input, {
                             variant: "secondary",
@@ -102,7 +104,7 @@ export default function SetPasswordPageHero({ redirectTo = '/', logo, poweredBy,
                                     color: "current",
                                     size: "sm"
                                 }),
-                                "Set Password"
+                                t.setPassword
                             ]
                         })
                 })

package/dist/components/pages/SetPasswordPageTailwind.d.ts

@@ -2,4 +2,4 @@ import type { AuthLayoutConfig } from '../AuthLayout';
 export interface SetPasswordPageProps extends AuthLayoutConfig {
     redirectTo?: string;
 }
-export default function SetPasswordPage({ redirectTo, logo, poweredBy, cardClassName, backgroundClass, }: SetPasswordPageProps): import("react/jsx-runtime").JSX.Element;
+export default function SetPasswordPage({ redirectTo, logo, poweredBy, cardClassName, backgroundClass, locale, messages, }: SetPasswordPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/SetPasswordPageTailwind.js

@@ -4,17 +4,19 @@ import React from 'react';
 import { Button, Input } from '../ui/index.js';
 import { useSetPasswordFlow } from '../../auth/application/hooks/useSetPasswordFlow.js';
 import { AuthLayout } from '../AuthLayout.js';
-export default function SetPasswordPage({ redirectTo = '/', logo, poweredBy, cardClassName, backgroundClass }) {
+import { getUiTranslations } from '../ui/translations.js';
+export default function SetPasswordPage({ redirectTo = '/', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
     const { password, confirmPassword, error, isLoading, showPassword, strength, setPassword, setConfirmPassword, setShowPassword, handleSubmit } = useSetPasswordFlow({
         redirectTo
     });
     const strengthBars = Array.from({
         length: 5
     }, (_, i)=>i < strength.score);
+    const t = getUiTranslations(locale, messages).setPassword;
     return /*#__PURE__*/ _jsx(AuthLayout, {
         logo: logo,
-        title: "Set Your Password",
-        subtitle: "Create a secure password for your account",
+        title: t.title,
+        subtitle: t.subtitle,
         poweredBy: poweredBy,
         cardClassName: cardClassName,
         backgroundClass: backgroundClass,
@@ -31,7 +33,7 @@ export default function SetPasswordPage({ redirectTo = '/', logo, poweredBy, car
                     children: [
                         /*#__PURE__*/ _jsx(Input, {
                             type: showPassword ? 'text' : 'password',
-                            label: "New Password",
+                            label: t.newPasswordLabel,
                             value: password,
                             onValueChange: setPassword,
                             isRequired: true,
@@ -53,11 +55,11 @@ export default function SetPasswordPage({ redirectTo = '/', logo, poweredBy, car
                 }),
                 password.length > 0 && !strength.isValid && /*#__PURE__*/ _jsx("p", {
                     className: "text-xs text-gray-500",
-                    children: "At least 8 chars with 3 of: uppercase, lowercase, number, special character"
+                    children: t.passwordRequirements
                 }),
                 /*#__PURE__*/ _jsx(Input, {
                     type: showPassword ? 'text' : 'password',
-                    label: "Confirm Password",
+                    label: t.confirmPasswordLabel,
                     value: confirmPassword,
                     onValueChange: setConfirmPassword,
                     isRequired: true
@@ -66,7 +68,7 @@ export default function SetPasswordPage({ redirectTo = '/', logo, poweredBy, car
                     type: "submit",
                     variant: "primary",
                     isLoading: isLoading,
-                    children: "Set Password"
+                    children: t.setPassword
                 })
             ]
         })

package/dist/components/pages/SignupPageHero.d.ts

@@ -7,4 +7,4 @@ export interface SignupPageHeroProps extends AuthLayoutConfig {
     showGoogleOAuth?: boolean;
     loginUrl?: string;
 }
-export default function SignupPageHero({ onSignup, showGoogleOAuth, loginUrl, logo, poweredBy, cardClassName, backgroundClass }: SignupPageHeroProps): import("react/jsx-runtime").JSX.Element;
+export default function SignupPageHero({ onSignup, showGoogleOAuth, loginUrl, logo, poweredBy, cardClassName, backgroundClass, locale, messages }: SignupPageHeroProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/SignupPageHero.js

@@ -5,11 +5,13 @@ import { Button, Input, Label, TextField, Separator, Spinner } from '@heroui/rea
 import { Icon } from '@iconify/react';
 import { motion } from 'framer-motion';
 import { AuthLayout } from '../AuthLayout.js';
-export default function SignupPageHero({ onSignup, showGoogleOAuth = true, loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+import { getUiTranslations } from '../ui/translations.js';
+export default function SignupPageHero({ onSignup, showGoogleOAuth = true, loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
     const [name, setName] = React.useState('');
     const [email, setEmail] = React.useState('');
     const [isLoading, setIsLoading] = React.useState(false);
     const [error, setError] = React.useState(null);
+    const t = getUiTranslations(locale, messages).signup;
     const handleSubmit = async (e)=>{
         e.preventDefault();
         setIsLoading(true);
@@ -28,19 +30,20 @@ export default function SignupPageHero({ onSignup, showGoogleOAuth = true, login
     };
     return /*#__PURE__*/ _jsxs(AuthLayout, {
         logo: logo,
-        title: "Create Account",
-        subtitle: "Enter your details to get started",
+        title: t.title,
+        subtitle: t.subtitle,
         poweredBy: poweredBy,
         cardClassName: cardClassName,
         backgroundClass: backgroundClass,
         footer: /*#__PURE__*/ _jsxs("p", {
             className: "text-center text-gray-600 text-sm",
             children: [
-                "Already have an account? ",
+                t.haveAccount,
+                " ",
                 /*#__PURE__*/ _jsx("a", {
                     href: loginUrl,
                     className: "text-gray-900 font-medium hover:underline",
-                    children: "Login"
+                    children: t.loginLink
                 })
             ]
         }),
@@ -57,7 +60,7 @@ export default function SignupPageHero({ onSignup, showGoogleOAuth = true, login
                                 icon: "flat-color-icons:google",
                                 width: 20
                             }),
-                            "Continue with Google"
+                            t.continueWithGoogle
                         ]
                     }),
                     /*#__PURE__*/ _jsxs("div", {
@@ -68,7 +71,7 @@ export default function SignupPageHero({ onSignup, showGoogleOAuth = true, login
                             }),
                             /*#__PURE__*/ _jsx("span", {
                                 className: "text-gray-500 text-sm",
-                                children: "or"
+                                children: t.or
                             }),
                             /*#__PURE__*/ _jsx(Separator, {
                                 className: "flex-1"
@@ -100,7 +103,7 @@ export default function SignupPageHero({ onSignup, showGoogleOAuth = true, login
                         children: [
                             /*#__PURE__*/ _jsx(Label, {
                                 className: "text-gray-600",
-                                children: "Full Name"
+                                children: t.fullNameLabel
                             }),
                             /*#__PURE__*/ _jsx(Input, {
                                 variant: "secondary"
@@ -116,7 +119,7 @@ export default function SignupPageHero({ onSignup, showGoogleOAuth = true, login
                         children: [
                             /*#__PURE__*/ _jsx(Label, {
                                 className: "text-gray-600",
-                                children: "Email"
+                                children: t.emailLabel
                             }),
                             /*#__PURE__*/ _jsx(Input, {
                                 variant: "secondary"
@@ -126,17 +129,20 @@ export default function SignupPageHero({ onSignup, showGoogleOAuth = true, login
                     /*#__PURE__*/ _jsxs("p", {
                         className: "text-xs text-gray-600 text-center",
                         children: [
-                            "By signing up, you agree to our ",
+                            t.termsNotice,
+                            " ",
                             /*#__PURE__*/ _jsx("a", {
                                 href: "/terms",
                                 className: "text-gray-900 hover:underline",
-                                children: "Terms"
+                                children: t.termsLink
                             }),
-                            " and ",
+                            " ",
+                            t.andSeparator,
+                            " ",
                             /*#__PURE__*/ _jsx("a", {
                                 href: "/privacy",
                                 className: "text-gray-900 hover:underline",
-                                children: "Privacy"
+                                children: t.privacyLink
                             })
                         ]
                     }),
@@ -152,7 +158,7 @@ export default function SignupPageHero({ onSignup, showGoogleOAuth = true, login
                                         color: "current",
                                         size: "sm"
                                     }),
-                                    "Create Account"
+                                    t.createAccount
                                 ]
                             })
                     })

package/dist/components/pages/SignupPageTailwind.d.ts

@@ -7,4 +7,4 @@ export interface SignupPageProps extends AuthLayoutConfig {
     showGoogleOAuth?: boolean;
     loginUrl?: string;
 }
-export default function SignupPage({ onSignup, showGoogleOAuth, loginUrl, logo, poweredBy, cardClassName, backgroundClass, }: SignupPageProps): import("react/jsx-runtime").JSX.Element;
+export default function SignupPage({ onSignup, showGoogleOAuth, loginUrl, logo, poweredBy, cardClassName, backgroundClass, locale, messages, }: SignupPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/SignupPageTailwind.js

@@ -3,11 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { Button, Input, Divider } from '../ui/index.js';
 import { AuthLayout } from '../AuthLayout.js';
-export default function SignupPage({ onSignup, showGoogleOAuth = true, loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+import { getUiTranslations } from '../ui/translations.js';
+export default function SignupPage({ onSignup, showGoogleOAuth = true, loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
     const [name, setName] = React.useState('');
     const [email, setEmail] = React.useState('');
     const [isLoading, setIsLoading] = React.useState(false);
     const [error, setError] = React.useState(null);
+    const t = getUiTranslations(locale, messages).signup;
     const handleSubmit = async (e)=>{
         e.preventDefault();
         setIsLoading(true);
@@ -26,20 +28,20 @@ export default function SignupPage({ onSignup, showGoogleOAuth = true, loginUrl
     };
     return /*#__PURE__*/ _jsxs(AuthLayout, {
         logo: logo,
-        title: "Create Account",
-        subtitle: "Enter your details to get started",
+        title: t.title,
+        subtitle: t.subtitle,
         poweredBy: poweredBy,
         cardClassName: cardClassName,
         backgroundClass: backgroundClass,
         footer: /*#__PURE__*/ _jsxs("p", {
             className: "text-center text-gray-600 text-sm",
             children: [
-                "Already have an account?",
+                t.haveAccount,
                 ' ',
                 /*#__PURE__*/ _jsx("a", {
                     href: loginUrl,
                     className: "text-gray-900 font-medium hover:underline",
-                    children: "Login"
+                    children: t.loginLink
                 })
             ]
         }),
@@ -75,7 +77,7 @@ export default function SignupPage({ onSignup, showGoogleOAuth = true, loginUrl
                                     })
                                 ]
                             }),
-                            "Continue with Google"
+                            t.continueWithGoogle
                         ]
                     }),
                     /*#__PURE__*/ _jsxs("div", {
@@ -86,7 +88,7 @@ export default function SignupPage({ onSignup, showGoogleOAuth = true, loginUrl
                             }),
                             /*#__PURE__*/ _jsx("span", {
                                 className: "text-gray-500 text-sm",
-                                children: "or"
+                                children: t.or
                             }),
                             /*#__PURE__*/ _jsx(Divider, {
                                 className: "flex-1"
@@ -104,14 +106,14 @@ export default function SignupPage({ onSignup, showGoogleOAuth = true, loginUrl
                         children: error
                     }),
                     /*#__PURE__*/ _jsx(Input, {
-                        label: "Full Name",
+                        label: t.fullNameLabel,
                         value: name,
                         onValueChange: setName,
                         isRequired: true
                     }),
                     /*#__PURE__*/ _jsx(Input, {
                         type: "email",
-                        label: "Email",
+                        label: t.emailLabel,
                         value: email,
                         onValueChange: setEmail,
                         isRequired: true
@@ -119,19 +121,20 @@ export default function SignupPage({ onSignup, showGoogleOAuth = true, loginUrl
                     /*#__PURE__*/ _jsxs("p", {
                         className: "text-xs text-gray-600 text-center",
                         children: [
-                            "By signing up, you agree to our",
+                            t.termsNotice,
                             ' ',
                             /*#__PURE__*/ _jsx("a", {
                                 href: "/terms",
                                 className: "text-gray-900 hover:underline",
-                                children: "Terms of Service"
+                                children: t.termsLink
                             }),
-                            " and",
+                            " ",
+                            t.andSeparator,
                             ' ',
                             /*#__PURE__*/ _jsx("a", {
                                 href: "/privacy",
                                 className: "text-gray-900 hover:underline",
-                                children: "Privacy Policy"
+                                children: t.privacyLink
                             })
                         ]
                     }),
@@ -139,7 +142,7 @@ export default function SignupPage({ onSignup, showGoogleOAuth = true, loginUrl
                         type: "submit",
                         variant: "primary",
                         isLoading: isLoading,
-                        children: "Create Account"
+                        children: t.createAccount
                     })
                 ]
             })

package/dist/components/pages/VerifyOtpPageHero.js

@@ -7,7 +7,8 @@ import { Icon } from '@iconify/react';
 import { motion } from 'framer-motion';
 import { useVerifyOtpFlow } from '../../auth/application/hooks/useVerifyOtpFlow.js';
 import { AuthLayout } from '../AuthLayout.js';
-function VerifyOtpHeroContent({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+import { getUiTranslations } from '../ui/translations.js';
+function VerifyOtpHeroContent({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
     const searchParams = useSearchParams();
     const email = searchParams.get('email') || '';
     const purpose = searchParams.get('purpose') || 'login';
@@ -17,11 +18,12 @@ function VerifyOtpHeroContent({ loginUrl = '/login', logo, poweredBy, cardClassN
         purpose,
         redirectTo
     });
+    const t = getUiTranslations(locale, messages).verifyOtp;
     if (!email) return null;
     return /*#__PURE__*/ _jsx(AuthLayout, {
         logo: logo,
-        title: purpose === 'password-reset' ? 'Reset Password' : 'Check Your Email',
-        subtitle: purpose === 'password-reset' ? 'Enter the code to reset your password' : 'We sent a 6-digit code to',
+        title: purpose === 'password-reset' ? t.passwordResetTitle : t.title,
+        subtitle: purpose === 'password-reset' ? t.passwordResetSubtitle : t.subtitle,
         poweredBy: poweredBy,
         cardClassName: cardClassName,
         backgroundClass: backgroundClass,
@@ -33,7 +35,7 @@ function VerifyOtpHeroContent({ loginUrl = '/login', logo, poweredBy, cardClassN
                     icon: "lucide:arrow-left",
                     width: 16
                 }),
-                "Back to Login"
+                t.backToLogin
             ]
         }),
         children: /*#__PURE__*/ _jsxs("div", {
@@ -103,7 +105,7 @@ function VerifyOtpHeroContent({ loginUrl = '/login', logo, poweredBy, cardClassN
                                     color: "current",
                                     size: "sm"
                                 }),
-                                "Verify"
+                                t.verify
                             ]
                         })
                 }),
@@ -112,13 +114,13 @@ function VerifyOtpHeroContent({ loginUrl = '/login', logo, poweredBy, cardClassN
                     children: [
                         /*#__PURE__*/ _jsx("p", {
                             className: "text-gray-600 text-sm mb-2",
-                            children: "Didn't receive a code?"
+                            children: t.noCodeReceived
                         }),
                         /*#__PURE__*/ _jsx("button", {
                             onClick: handleResendCode,
                             disabled: isResending || resendCooldown > 0,
                             className: "text-primary font-medium text-sm hover:underline disabled:opacity-50",
-                            children: isResending ? 'Sending...' : resendCooldown > 0 ? `Resend in ${resendCooldown}s` : 'Resend Code'
+                            children: isResending ? t.resending : resendCooldown > 0 ? t.resendIn.replace('{seconds}', String(resendCooldown)) : t.resendCode
                         })
                     ]
                 })

package/dist/components/pages/VerifyOtpPageTailwind.js

@@ -5,7 +5,8 @@ import { useSearchParams } from 'next/navigation';
 import { Button, OtpInput, Spinner } from '../ui/index.js';
 import { useVerifyOtpFlow } from '../../auth/application/hooks/useVerifyOtpFlow.js';
 import { AuthLayout } from '../AuthLayout.js';
-function VerifyOtpContent({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+import { getUiTranslations } from '../ui/translations.js';
+function VerifyOtpContent({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
     const searchParams = useSearchParams();
     const email = searchParams.get('email') || '';
     const purpose = searchParams.get('purpose') || 'login';
@@ -15,19 +16,23 @@ function VerifyOtpContent({ loginUrl = '/login', logo, poweredBy, cardClassName,
         purpose,
         redirectTo
     });
+    const t = getUiTranslations(locale, messages).verifyOtp;
     if (!email) return null;
     const isPasswordReset = purpose === 'password-reset';
     return /*#__PURE__*/ _jsx(AuthLayout, {
         logo: logo,
-        title: isPasswordReset ? 'Reset Password' : 'Check Your Email',
-        subtitle: isPasswordReset ? 'Enter the code to reset your password' : 'We sent a 6-digit code to',
+        title: isPasswordReset ? t.passwordResetTitle : t.title,
+        subtitle: isPasswordReset ? t.passwordResetSubtitle : t.subtitle,
         poweredBy: poweredBy,
         cardClassName: cardClassName,
         backgroundClass: backgroundClass,
-        footer: /*#__PURE__*/ _jsx("a", {
+        footer: /*#__PURE__*/ _jsxs("a", {
             href: loginUrl,
             className: "text-sm text-gray-600 hover:text-gray-900 flex items-center gap-1",
-            children: "← Back to Login"
+            children: [
+                "← ",
+                t.backToLogin
+            ]
         }),
         children: /*#__PURE__*/ _jsxs("div", {
             className: "flex flex-col items-center gap-4",
@@ -51,20 +56,20 @@ function VerifyOtpContent({ loginUrl = '/login', logo, poweredBy, cardClassName,
                     isLoading: isLoading,
                     isDisabled: otp.length !== 6,
                     onPress: handleSubmit,
-                    children: "Verify"
+                    children: t.verify
                 }),
                 /*#__PURE__*/ _jsxs("div", {
                     className: "text-center",
                     children: [
                         /*#__PURE__*/ _jsx("p", {
                             className: "text-gray-600 text-sm mb-2",
-                            children: "Didn't receive a code?"
+                            children: t.noCodeReceived
                         }),
                         /*#__PURE__*/ _jsx("button", {
                             onClick: handleResendCode,
                             disabled: isResending || resendCooldown > 0,
                             className: "text-[#0071e3] font-medium text-sm hover:underline disabled:opacity-50 disabled:cursor-not-allowed",
-                            children: isResending ? 'Sending...' : resendCooldown > 0 ? `Resend in ${resendCooldown}s` : 'Resend Code'
+                            children: isResending ? t.resending : resendCooldown > 0 ? t.resendIn.replace('{seconds}', String(resendCooldown)) : t.resendCode
                         })
                     ]
                 })

package/dist/components/ui/locale.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Zero-dependency locale detection.
+ *
+ * The plugin never imports next-intl, next-i18next, or any i18n library —
+ * instead it reads the same conventional signals those libraries already
+ * write, so `locale` "just works" automatically for consumers using them,
+ * while still defaulting sanely (`en`) for consumers with no i18n setup.
+ *
+ * Priority order:
+ *   1. Explicit `locale` prop passed to `<AuthPages />` (always wins, handled by caller)
+ *   2. `NEXT_LOCALE` cookie — written by next-intl, next-i18next, and most
+ *      i18n routing middlewares by convention
+ *   3. `Accept-Language` request header (server-side only)
+ *   4. `<html lang="...">` attribute (client-side only)
+ *   5. Fallback: 'en'
+ */
+/**
+ * Server-side locale detection — reads `Cookie` and `Accept-Language` headers.
+ * Use inside an RSC (e.g. `AuthPagesServer`) where `next/headers` is available.
+ */
+export declare function detectServerLocale(headers: {
+    get(name: string): string | null;
+}): string;
+/**
+ * Client-side locale detection — reads the `NEXT_LOCALE` cookie or falls back
+ * to `<html lang>`. Use inside client components when no explicit locale was
+ * passed down from the server.
+ */
+export declare function detectClientLocale(): string;