@main12/auth-login 0.1.0

package/dist/components/email/templates/passwordReset.d.ts

@@ -0,0 +1,15 @@
+import { type SocialLink } from '../constants.js';
+import { type BaseTemplateOptions } from '../baseTemplate.js';
+import { type SupportedLanguage } from '../translations.js';
+export interface PasswordResetEmailParams {
+    userName: string;
+    otp: string;
+    language?: SupportedLanguage;
+    socialLinks?: SocialLink[];
+    baseOptions?: BaseTemplateOptions;
+}
+export interface PasswordResetEmailResult {
+    subject: string;
+    html: string;
+}
+export declare function generatePasswordResetEmail(params: PasswordResetEmailParams): PasswordResetEmailResult;

package/dist/components/email/templates/passwordReset.js

@@ -0,0 +1,36 @@
+import { DEFAULT_COLORS } from '../constants.js';
+import { wrapInBaseTemplate } from '../baseTemplate.js';
+import { getEmailTranslations } from '../translations.js';
+export function generatePasswordResetEmail(params) {
+    const { userName, otp, language = 'en', socialLinks, baseOptions } = params;
+    const t = getEmailTranslations(language);
+    const content = `
+    <tr>
+      <td style="text-align:center;padding-bottom:32px;">
+        <h1 style="margin:0 0 12px;font-size:28px;font-weight:600;color:${DEFAULT_COLORS.text};">${t.passwordReset.title}</h1>
+        <p style="margin:0;font-size:17px;color:${DEFAULT_COLORS.textSecondary};line-height:1.5;">${t.greeting} ${userName}, ${t.passwordReset.intro}</p>
+      </td>
+    </tr>
+    <tr>
+      <td style="text-align:center;padding-bottom:32px;">
+        <div style="display:inline-block;background-color:${DEFAULT_COLORS.backgroundSecondary};border-radius:12px;padding:20px 32px;">
+          <span style="font-size:32px;font-weight:600;letter-spacing:6px;color:${DEFAULT_COLORS.text};font-family:'SF Mono',SFMono-Regular,ui-monospace,Menlo,monospace;">${otp}</span>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td style="text-align:center;">
+        <p style="margin:0 0 8px;font-size:14px;color:${DEFAULT_COLORS.textTertiary};">${t.passwordReset.expiresIn} <span style="color:${DEFAULT_COLORS.textSecondary};">10 ${language === 'es' ? 'minutos' : 'minutes'}</span></p>
+        <p style="margin:0;font-size:13px;color:${DEFAULT_COLORS.textTertiary};">${t.passwordReset.warningMessage}</p>
+      </td>
+    </tr>`;
+    return {
+        subject: t.passwordReset.subject,
+        html: wrapInBaseTemplate(content, {
+            ...baseOptions,
+            preheader: `${t.passwordReset.preheader}: ${otp}`,
+            language,
+            socialLinks
+        })
+    };
+}

package/dist/components/email/templates/welcome.d.ts

@@ -0,0 +1,16 @@
+import { type SocialLink } from '../constants.js';
+import { type BaseTemplateOptions } from '../baseTemplate.js';
+import { type SupportedLanguage } from '../translations.js';
+export interface WelcomeEmailParams {
+    userName: string;
+    userEmail?: string;
+    loginUrl?: string;
+    language?: SupportedLanguage;
+    socialLinks?: SocialLink[];
+    baseOptions?: BaseTemplateOptions;
+}
+export interface WelcomeEmailResult {
+    subject: string;
+    html: string;
+}
+export declare function generateWelcomeEmail(params: WelcomeEmailParams): WelcomeEmailResult;

package/dist/components/email/templates/welcome.js

@@ -0,0 +1,38 @@
+import { DEFAULT_COLORS, getBaseUrl } from '../constants.js';
+import { wrapInBaseTemplate } from '../baseTemplate.js';
+import { getEmailTranslations } from '../translations.js';
+export function generateWelcomeEmail(params) {
+    const { userName, userEmail, loginUrl = `${getBaseUrl()}/login`, language = 'en', socialLinks, baseOptions } = params;
+    const t = getEmailTranslations(language);
+    const content = `
+    <tr>
+      <td style="text-align:center;padding:24px 16px 8px;">
+        <h1 style="margin:0;font-size:32px;font-weight:700;color:${DEFAULT_COLORS.text};letter-spacing:-0.02em;">${t.welcome.title}</h1>
+      </td>
+    </tr>
+    <tr>
+      <td style="text-align:center;padding:16px 16px 32px;line-height:1.6;color:${DEFAULT_COLORS.textSecondary};">
+        <p style="margin:0;font-size:16px;">${t.welcome.introMessage}</p>
+      </td>
+    </tr>
+    <tr>
+      <td style="text-align:center;padding:16px;">
+        <a href="${loginUrl}" style="display:inline-block;background-color:${DEFAULT_COLORS.primary};color:${DEFAULT_COLORS.primaryText};font-weight:600;text-decoration:none;padding:14px 40px;border-radius:980px;font-size:16px;">${t.welcome.ctaButton}</a>
+      </td>
+    </tr>
+    <tr>
+      <td style="text-align:center;padding:24px 16px 8px;">
+        <p style="margin:0;font-size:14px;color:${DEFAULT_COLORS.textTertiary};line-height:1.6;">${t.welcome.helpMessage}</p>
+      </td>
+    </tr>`;
+    return {
+        subject: t.welcome.subject,
+        html: wrapInBaseTemplate(content, {
+            ...baseOptions,
+            preheader: t.welcome.preheader,
+            language,
+            socialLinks,
+            userEmail
+        })
+    };
+}

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

@@ -0,0 +1,45 @@
+export type SupportedLanguage = 'en' | 'es';
+export interface EmailTranslations {
+    greeting: string;
+    footerCopyright: string;
+    footerTagline: string;
+    footerContactMessage: string;
+    footerEmailSentTo: string;
+    footerSecurityNotice: string;
+    otp: {
+        subjectLogin: string;
+        subjectPasswordReset: string;
+        preheader: string;
+        purposeLogin: string;
+        purposePasswordReset: string;
+        expiresIn: string;
+        ignoreMessage: string;
+    };
+    welcome: {
+        subject: string;
+        preheader: string;
+        title: string;
+        introMessage: string;
+        ctaButton: string;
+        helpMessage: string;
+    };
+    passwordReset: {
+        subject: string;
+        preheader: string;
+        title: string;
+        intro: string;
+        expiresIn: string;
+        warningMessage: string;
+    };
+    passwordChanged: {
+        subject: string;
+        preheader: string;
+        title: string;
+        message: string;
+        warningMessage: string;
+        ctaButton: string;
+    };
+}
+declare const translations: Record<SupportedLanguage, EmailTranslations>;
+export declare function getEmailTranslations(language?: SupportedLanguage): EmailTranslations;
+export default translations;

package/dist/components/email/translations.js

@@ -0,0 +1,88 @@
+const translations = {
+    en: {
+        greeting: 'Hi',
+        footerCopyright: 'All rights reserved.',
+        footerTagline: 'Powered by Main12',
+        footerContactMessage: 'If you have any issues, contact us at',
+        footerEmailSentTo: 'This email was sent to',
+        footerSecurityNotice: "If you don't recognize this action, please contact us.",
+        otp: {
+            subjectLogin: 'Your verification code',
+            subjectPasswordReset: 'Your password reset code',
+            preheader: 'Your verification code is',
+            purposeLogin: 'Use this code to sign in to your account:',
+            purposePasswordReset: 'Use this code to reset your password:',
+            expiresIn: 'This code expires in',
+            ignoreMessage: "If you didn't request this code, you can safely ignore this email."
+        },
+        welcome: {
+            subject: 'Welcome! 🎉',
+            preheader: 'Your account is ready',
+            title: 'Welcome',
+            introMessage: 'Your account is ready. Start exploring and get the most out of the platform.',
+            ctaButton: 'Get Started',
+            helpMessage: "Questions? We're here to help. Just reply to this email anytime."
+        },
+        passwordReset: {
+            subject: 'Reset your password',
+            preheader: 'Your password reset code is',
+            title: 'Reset your password',
+            intro: 'We received a request to reset your password. Use this code to continue:',
+            expiresIn: 'This code expires in',
+            warningMessage: "If you didn't request a password reset, please ignore this email or contact support."
+        },
+        passwordChanged: {
+            subject: 'Your password has been updated',
+            preheader: 'Your password has been changed successfully.',
+            title: 'Password updated',
+            message: 'Your password has been successfully changed. You can now use your new password to sign in.',
+            warningMessage: "If you didn't make this change, please reset your password immediately and contact support.",
+            ctaButton: 'Sign In'
+        }
+    },
+    es: {
+        greeting: 'Hola',
+        footerCopyright: 'Todos los derechos reservados.',
+        footerTagline: 'Desarrollado por Main12',
+        footerContactMessage: 'Si tienes algún problema, contáctanos a',
+        footerEmailSentTo: 'Este correo fue enviado a',
+        footerSecurityNotice: 'Si no reconoces esta acción, por favor contáctanos.',
+        otp: {
+            subjectLogin: 'Tu código de verificación',
+            subjectPasswordReset: 'Tu código para restablecer la contraseña',
+            preheader: 'Tu código de verificación es',
+            purposeLogin: 'Usa este código para iniciar sesión en tu cuenta:',
+            purposePasswordReset: 'Usa este código para restablecer tu contraseña:',
+            expiresIn: 'Este código expira en',
+            ignoreMessage: 'Si no solicitaste este código, puedes ignorar este correo.'
+        },
+        welcome: {
+            subject: '¡Bienvenido! 🎉',
+            preheader: 'Tu cuenta está lista',
+            title: 'Bienvenido',
+            introMessage: 'Tu cuenta está lista. Comienza a explorar y aprovecha la plataforma al máximo.',
+            ctaButton: 'Comenzar',
+            helpMessage: '¿Preguntas? Estamos aquí para ayudar. Solo responde a este correo.'
+        },
+        passwordReset: {
+            subject: 'Restablece tu contraseña',
+            preheader: 'Tu código para restablecer la contraseña es',
+            title: 'Restablece tu contraseña',
+            intro: 'Recibimos una solicitud para restablecer tu contraseña. Usa este código:',
+            expiresIn: 'Este código expira en',
+            warningMessage: 'Si no solicitaste restablecer tu contraseña, ignora este correo o contacta a soporte.'
+        },
+        passwordChanged: {
+            subject: 'Tu contraseña ha sido actualizada',
+            preheader: 'Tu contraseña ha sido cambiada exitosamente.',
+            title: 'Contraseña actualizada',
+            message: 'Tu contraseña ha sido cambiada exitosamente. Ahora puedes usar tu nueva contraseña.',
+            warningMessage: 'Si no realizaste este cambio, restablece tu contraseña inmediatamente y contacta a soporte.',
+            ctaButton: 'Iniciar Sesión'
+        }
+    }
+};
+export function getEmailTranslations(language = 'en') {
+    return translations[language] || translations.en;
+}
+export default translations;

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

@@ -0,0 +1,5 @@
+import type { AuthLayoutConfig } from '../AuthLayout.js';
+export interface ForgotPasswordPageProps extends AuthLayoutConfig {
+    loginUrl?: string;
+}
+export default function ForgotPasswordPage({ loginUrl, logo, poweredBy, cardClassName, backgroundClass, }: ForgotPasswordPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/ForgotPasswordPage.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Button, Input } from '../ui/index.js';
+import { useForgotPasswordFlow } from '../../auth/application/hooks/useForgotPasswordFlow.js';
+import { AuthLayout } from '../AuthLayout.js';
+export default function ForgotPasswordPage({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+    const { email, error, isLoading, setEmail, handleSubmit } = useForgotPasswordFlow();
+    return /*#__PURE__*/ _jsx(AuthLayout, {
+        logo: logo,
+        title: "Forgot Password",
+        subtitle: "Enter your email and we'll send you a reset code",
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        footer: /*#__PURE__*/ _jsx("a", {
+            href: loginUrl,
+            className: "text-sm text-gray-600 hover:text-gray-900 inline-flex items-center gap-1",
+            children: "← Back to Login"
+        }),
+        children: /*#__PURE__*/ _jsxs("form", {
+            onSubmit: handleSubmit,
+            className: "space-y-4",
+            children: [
+                error && /*#__PURE__*/ _jsx("div", {
+                    className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm animate-[fadeIn_0.2s_ease-out]",
+                    children: error
+                }),
+                /*#__PURE__*/ _jsx(Input, {
+                    type: "email",
+                    label: "Email",
+                    value: email,
+                    onChange: (e)=>setEmail(e.target.value),
+                    isRequired: true
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    type: "submit",
+                    variant: "primary",
+                    isLoading: isLoading,
+                    children: "Send Reset Code"
+                })
+            ]
+        })
+    });
+}

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

@@ -0,0 +1,11 @@
+import type { AuthLayoutConfig } from '../AuthLayout.js';
+export interface LoginPageProps extends AuthLayoutConfig {
+    onPasswordLogin: (credentials: {
+        email: string;
+        password: string;
+    }) => Promise<void>;
+    redirectTo?: string;
+    showGoogleOAuth?: boolean;
+    signupUrl?: string;
+}
+export default function LoginPage(props: LoginPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/LoginPage.js

@@ -0,0 +1,222 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { Suspense } from 'react';
+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 }) {
+    const searchParams = useSearchParams();
+    const resolvedRedirect = searchParams.get('redirect') || redirectTo;
+    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.';
+    return /*#__PURE__*/ _jsxs(AuthLayout, {
+        logo: logo,
+        title: stepTitle,
+        subtitle: stepSubtitle,
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        footer: /*#__PURE__*/ _jsxs("p", {
+            className: "text-center text-gray-600 text-sm",
+            children: [
+                "Don't have an account?",
+                ' ',
+                /*#__PURE__*/ _jsx("a", {
+                    href: signupUrl,
+                    className: "text-gray-900 font-medium hover:underline",
+                    children: "Sign up"
+                })
+            ]
+        }),
+        children: [
+            step === 'email' && /*#__PURE__*/ _jsxs("div", {
+                className: "animate-[fadeIn_0.3s_ease-out]",
+                children: [
+                    showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsxs(Button, {
+                                fullWidth: true,
+                                variant: "bordered",
+                                size: "lg",
+                                className: "mb-4",
+                                onPress: handleGoogleLogin,
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-lg",
+                                        children: "G"
+                                    }),
+                                    " Continue with Google"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-4 my-4",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Divider, {
+                                        className: "flex-1"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-gray-500 text-sm",
+                                        children: "or"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Divider, {
+                                        className: "flex-1"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("form", {
+                        onSubmit: handleEmailSubmit,
+                        className: "space-y-4",
+                        children: [
+                            error && /*#__PURE__*/ _jsx("div", {
+                                className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
+                                children: error
+                            }),
+                            /*#__PURE__*/ _jsx(Input, {
+                                type: "email",
+                                label: "Email",
+                                value: email,
+                                onValueChange: setEmail,
+                                isRequired: true
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "submit",
+                                variant: "primary",
+                                isLoading: isLoading,
+                                children: "Continue"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            step === 'password' && /*#__PURE__*/ _jsxs("div", {
+                className: "animate-[fadeIn_0.3s_ease-out]",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-gray-900 text-sm",
+                                children: email
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: handleEditEmail,
+                                className: "text-gray-600 text-sm font-medium hover:text-gray-900",
+                                children: "Edit"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("form", {
+                        onSubmit: handlePasswordSubmit,
+                        className: "space-y-4",
+                        children: [
+                            error && /*#__PURE__*/ _jsx("div", {
+                                className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
+                                children: error
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "relative",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Input, {
+                                        type: showPassword ? 'text' : 'password',
+                                        label: "Password",
+                                        value: password,
+                                        onValueChange: setPassword,
+                                        isRequired: true,
+                                        autoFocus: true
+                                    }),
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>setShowPassword(!showPassword),
+                                        className: "absolute right-4 top-9 text-gray-400 hover:text-gray-600",
+                                        children: showPassword ? '🙈' : '👁'
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "text-left",
+                                children: /*#__PURE__*/ _jsx("a", {
+                                    href: "/forgot-password",
+                                    className: "text-sm text-gray-700 hover:text-gray-900 hover:underline",
+                                    children: "Forgot password?"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "submit",
+                                variant: "primary",
+                                isLoading: isLoading,
+                                children: "Continue"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            step === 'otp-prompt' && /*#__PURE__*/ _jsxs("div", {
+                className: "animate-[fadeIn_0.3s_ease-out]",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-gray-900 text-sm",
+                                children: email
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: handleEditEmail,
+                                className: "text-gray-600 text-sm font-medium hover:text-gray-900",
+                                children: "Edit"
+                            })
+                        ]
+                    }),
+                    error && /*#__PURE__*/ _jsx("div", {
+                        className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm mb-4",
+                        children: error
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4",
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-3",
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "text-blue-500 text-lg",
+                                    children: "✉"
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: "text-sm text-blue-700",
+                                    children: "We'll send a verification code to this email."
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "primary",
+                        isLoading: isSendingOtp,
+                        onPress: handleSendOtp,
+                        children: isSendingOtp ? 'Sending...' : 'Send Code'
+                    })
+                ]
+            })
+        ]
+    });
+}
+export default function LoginPage(props) {
+    return /*#__PURE__*/ _jsx(Suspense, {
+        fallback: /*#__PURE__*/ _jsx("div", {
+            className: "min-h-screen flex items-center justify-center",
+            children: /*#__PURE__*/ _jsx(Spinner, {
+                size: "lg"
+            })
+        }),
+        children: /*#__PURE__*/ _jsx(LoginContent, {
+            ...props
+        })
+    });
+}

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

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

package/dist/components/pages/SetPasswordPage.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }) {
+    const { password, confirmPassword, error, isLoading, showPassword, strength, setPassword, setConfirmPassword, setShowPassword, handleSubmit } = useSetPasswordFlow({
+        redirectTo
+    });
+    const strengthBars = Array.from({
+        length: 5
+    }, (_, i)=>i < strength.score);
+    return /*#__PURE__*/ _jsx(AuthLayout, {
+        logo: logo,
+        title: "Set Your Password",
+        subtitle: "Create a secure password for your account",
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        children: /*#__PURE__*/ _jsxs("form", {
+            onSubmit: handleSubmit,
+            className: "space-y-4",
+            children: [
+                error && /*#__PURE__*/ _jsx("div", {
+                    className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm animate-[fadeIn_0.2s_ease-out]",
+                    children: error
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "relative",
+                    children: [
+                        /*#__PURE__*/ _jsx(Input, {
+                            type: showPassword ? 'text' : 'password',
+                            label: "New Password",
+                            value: password,
+                            onValueChange: setPassword,
+                            isRequired: true,
+                            autoFocus: true
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            onClick: ()=>setShowPassword(!showPassword),
+                            className: "absolute right-4 top-9 text-gray-400 hover:text-gray-600",
+                            children: showPassword ? '🙈' : '👁'
+                        })
+                    ]
+                }),
+                password.length > 0 && /*#__PURE__*/ _jsx("div", {
+                    className: "flex gap-1",
+                    children: strengthBars.map((active, i)=>/*#__PURE__*/ _jsx("div", {
+                            className: `h-1 flex-1 rounded-full ${active ? 'bg-[#D5E855]' : 'bg-gray-200'}`
+                        }, i))
+                }),
+                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"
+                }),
+                /*#__PURE__*/ _jsx(Input, {
+                    type: showPassword ? 'text' : 'password',
+                    label: "Confirm Password",
+                    value: confirmPassword,
+                    onValueChange: setConfirmPassword,
+                    isRequired: true
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    type: "submit",
+                    variant: "primary",
+                    isLoading: isLoading,
+                    children: "Set Password"
+                })
+            ]
+        })
+    });
+}

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

@@ -0,0 +1,10 @@
+import type { AuthLayoutConfig } from '../AuthLayout.js';
+export interface SignupPageProps extends AuthLayoutConfig {
+    onSignup: (data: {
+        name: string;
+        email: string;
+    }) => Promise<void>;
+    showGoogleOAuth?: boolean;
+    loginUrl?: string;
+}
+export default function SignupPage({ onSignup, showGoogleOAuth, loginUrl, logo, poweredBy, cardClassName, backgroundClass, }: SignupPageProps): import("react/jsx-runtime").JSX.Element;