@main12/auth-login 0.3.8 → 0.4.0

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;

package/dist/components/ui/locale.js

@@ -0,0 +1,53 @@
+/**
+ * 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'
+ */ const SUPPORTED_FALLBACK = 'en';
+/** Extract the primary language code from a locale string, e.g. 'es-MX' -> 'es'. */ function normalize(locale) {
+    if (!locale) return undefined;
+    const primary = locale.split(/[-_]/)[0]?.toLowerCase();
+    return primary || undefined;
+}
+/** Parse the `NEXT_LOCALE` cookie value from a raw `Cookie` header string. */ function parseCookieLocale(cookieHeader) {
+    if (!cookieHeader) return undefined;
+    const match = cookieHeader.match(/(?:^|;\s*)NEXT_LOCALE=([^;]+)/);
+    return match ? normalize(decodeURIComponent(match[1])) : undefined;
+}
+/** Parse the first preferred language from an `Accept-Language` header. */ function parseAcceptLanguage(header) {
+    if (!header) return undefined;
+    const first = header.split(',')[0]?.trim();
+    return normalize(first);
+}
+/**
+ * Server-side locale detection — reads `Cookie` and `Accept-Language` headers.
+ * Use inside an RSC (e.g. `AuthPagesServer`) where `next/headers` is available.
+ */ export function detectServerLocale(headers) {
+    const fromCookie = parseCookieLocale(headers.get('cookie'));
+    if (fromCookie) return fromCookie;
+    const fromAcceptLanguage = parseAcceptLanguage(headers.get('accept-language'));
+    if (fromAcceptLanguage) return fromAcceptLanguage;
+    return SUPPORTED_FALLBACK;
+}
+/**
+ * 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 function detectClientLocale() {
+    if (typeof document === 'undefined') return SUPPORTED_FALLBACK;
+    const fromCookie = parseCookieLocale(document.cookie);
+    if (fromCookie) return fromCookie;
+    const fromHtmlLang = normalize(document.documentElement?.lang);
+    if (fromHtmlLang) return fromHtmlLang;
+    return SUPPORTED_FALLBACK;
+}

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

@@ -0,0 +1,91 @@
+/**
+ * UI copy for the auth pages (login, signup, forgot-password, verify-otp, set-password).
+ *
+ * Built-in support for English (`en`) and Spanish (`es`) out of the box — no
+ * configuration required. Consumers can override any subset of keys, and/or add
+ * entirely new locales, via the `messages` prop on `<AuthPages />` / individual
+ * page components. Missing keys always fall back to the built-in English copy.
+ */
+export interface UiTranslations {
+    login: {
+        title: string;
+        subtitle: string;
+        passwordStepTitle: string;
+        passwordStepSubtitle: string;
+        otpPromptTitle: string;
+        otpPromptSubtitle: string;
+        continueWithGoogle: string;
+        or: string;
+        emailLabel: string;
+        passwordLabel: string;
+        continue: string;
+        forgotPassword: string;
+        edit: string;
+        verificationNotice: string;
+        sendCode: string;
+        sendingCode: string;
+        noAccount: string;
+        signUpLink: string;
+    };
+    signup: {
+        title: string;
+        subtitle: string;
+        fullNameLabel: string;
+        emailLabel: string;
+        continueWithGoogle: string;
+        or: string;
+        termsNotice: string;
+        termsLink: string;
+        andSeparator: string;
+        privacyLink: string;
+        createAccount: string;
+        haveAccount: string;
+        loginLink: string;
+    };
+    forgotPassword: {
+        title: string;
+        subtitle: string;
+        emailLabel: string;
+        sendResetCode: string;
+        backToLogin: string;
+    };
+    verifyOtp: {
+        title: string;
+        passwordResetTitle: string;
+        subtitle: string;
+        passwordResetSubtitle: string;
+        verify: string;
+        noCodeReceived: string;
+        resendCode: string;
+        resending: string;
+        resendIn: string;
+        backToLogin: string;
+    };
+    setPassword: {
+        title: string;
+        subtitle: string;
+        newPasswordLabel: string;
+        confirmPasswordLabel: string;
+        passwordRequirements: string;
+        setPassword: string;
+    };
+}
+/** Deep partial — every field at every level is optional, for override objects. */
+export type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+/** Built-in dictionaries. Consumers can add more locales via the `messages` prop. */
+export declare const uiTranslations: Record<string, UiTranslations>;
+/**
+ * Resolve the final UI translations for a given locale, applying any consumer
+ * overrides on top of the built-in dictionaries.
+ *
+ * Resolution order per key: `messages[locale]` → `messages.en` → built-in
+ * `[locale]` → built-in `en`. Consumers may pass a partial override object —
+ * any key they don't specify falls back automatically.
+ *
+ * @param locale - Target locale, e.g. 'en', 'es', or any custom locale defined in `messages`.
+ * @param messages - Optional map of locale -> partial translation overrides. Can also
+ *   introduce brand-new locales not built into the plugin.
+ */
+export declare function getUiTranslations(locale?: string, messages?: Record<string, DeepPartial<UiTranslations>>): UiTranslations;