@main12/auth-login 0.4.2 → 1.0.1

package/dist/components/forms/LoginForm.js

@@ -0,0 +1,247 @@
+'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 { getUiTranslations } from '../ui/translations.js';
+function LoginFormContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl, locale, messages, onStepChange }) {
+    const searchParams = useSearchParams();
+    const resolvedRedirect = searchParams.get('redirect') || redirectTo;
+    const translations = getUiTranslations(locale, messages);
+    const t = translations.login;
+    const errors = translations.errors;
+    // Helper to translate error keys
+    const getErrorMessage = (err)=>{
+        if (!err) return null;
+        // Check if it's a known error key
+        if (err in errors) return errors[err];
+        // Return as-is if it's already a message
+        return err;
+    };
+    const { step, email, password, error, isLoading, isSendingOtp, setEmail, setPassword, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail, handleGoogleLogin } = useLoginFlow({
+        redirectTo: resolvedRedirect,
+        onPasswordLogin
+    });
+    // Notify parent of step changes for dynamic title/subtitle
+    React.useEffect(()=>{
+        if (onStepChange) {
+            const title = step === 'otp-prompt' ? t.otpPromptTitle : step === 'email' ? t.title : t.passwordStepTitle;
+            const subtitle = step === 'otp-prompt' ? t.otpPromptSubtitle : step === 'email' ? t.subtitle : t.passwordStepSubtitle;
+            onStepChange(step, title, subtitle);
+        }
+    }, [
+        step,
+        onStepChange,
+        t
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        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: "secondary",
+                                size: "lg",
+                                className: "mb-4",
+                                onPress: handleGoogleLogin,
+                                children: [
+                                    /*#__PURE__*/ _jsxs("svg", {
+                                        width: "20",
+                                        height: "20",
+                                        viewBox: "0 0 48 48",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("path", {
+                                                fill: "#EA4335",
+                                                d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+                                            }),
+                                            /*#__PURE__*/ _jsx("path", {
+                                                fill: "#4285F4",
+                                                d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+                                            }),
+                                            /*#__PURE__*/ _jsx("path", {
+                                                fill: "#FBBC05",
+                                                d: "M10.53 28.59a14.5 14.5 0 0 1 0-9.18l-7.98-6.19a24.01 24.01 0 0 0 0 21.56l7.98-6.19z"
+                                            }),
+                                            /*#__PURE__*/ _jsx("path", {
+                                                fill: "#34A853",
+                                                d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+                                            })
+                                        ]
+                                    }),
+                                    t.continueWithGoogle
+                                ]
+                            }),
+                            /*#__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: t.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: getErrorMessage(error)
+                            }),
+                            /*#__PURE__*/ _jsx(Input, {
+                                type: "email",
+                                label: t.emailLabel,
+                                value: email,
+                                onValueChange: setEmail,
+                                isRequired: true,
+                                variant: "secondary"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "submit",
+                                variant: "primary",
+                                isLoading: isLoading,
+                                children: t.continue
+                            })
+                        ]
+                    }),
+                    signupUrl && /*#__PURE__*/ _jsxs("p", {
+                        className: "text-center text-gray-600 text-sm mt-6",
+                        children: [
+                            t.noAccount,
+                            ' ',
+                            /*#__PURE__*/ _jsx("a", {
+                                href: signupUrl,
+                                className: "text-gray-900 font-medium hover:underline",
+                                children: t.signUpLink
+                            })
+                        ]
+                    })
+                ]
+            }),
+            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: t.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: getErrorMessage(error)
+                            }),
+                            /*#__PURE__*/ _jsx(Input, {
+                                type: "password",
+                                label: t.passwordLabel,
+                                value: password,
+                                onValueChange: setPassword,
+                                isRequired: true,
+                                autoFocus: true,
+                                variant: "secondary"
+                            }),
+                            /*#__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: t.forgotPassword
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "submit",
+                                variant: "primary",
+                                isLoading: isLoading,
+                                children: t.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: t.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: getErrorMessage(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: t.verificationNotice
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "primary",
+                        isLoading: isSendingOtp,
+                        onPress: handleSendOtp,
+                        children: isSendingOtp ? t.sendingCode : t.sendCode
+                    })
+                ]
+            })
+        ]
+    });
+}
+export function LoginForm(props) {
+    return /*#__PURE__*/ _jsx(Suspense, {
+        fallback: /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center justify-center py-8",
+            children: /*#__PURE__*/ _jsx(Spinner, {
+                size: "lg"
+            })
+        }),
+        children: /*#__PURE__*/ _jsx(LoginFormContent, {
+            ...props
+        })
+    });
+}

package/dist/components/forms/SetPasswordForm.d.ts

@@ -0,0 +1,7 @@
+import { type DeepPartial, type UiTranslations } from '../ui/translations';
+export interface SetPasswordFormProps {
+    redirectTo?: string;
+    locale?: string;
+    messages?: Record<string, DeepPartial<UiTranslations>>;
+}
+export declare function SetPasswordForm({ redirectTo, locale, messages, }: SetPasswordFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/SetPasswordForm.js

@@ -0,0 +1,75 @@
+'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 { getUiTranslations } from '../ui/translations.js';
+export function SetPasswordForm({ redirectTo = '/', 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 translations = getUiTranslations(locale, messages);
+    const t = translations.setPassword;
+    const errors = translations.errors;
+    // Helper to translate error keys
+    const getErrorMessage = (err)=>{
+        if (!err) return null;
+        if (err in errors) return errors[err];
+        return err;
+    };
+    return /*#__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: getErrorMessage(error)
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "relative",
+                children: [
+                    /*#__PURE__*/ _jsx(Input, {
+                        type: showPassword ? 'text' : 'password',
+                        label: t.newPasswordLabel,
+                        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: t.passwordRequirements
+            }),
+            /*#__PURE__*/ _jsx(Input, {
+                type: showPassword ? 'text' : 'password',
+                label: t.confirmPasswordLabel,
+                value: confirmPassword,
+                onValueChange: setConfirmPassword,
+                isRequired: true
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                type: "submit",
+                variant: "primary",
+                isLoading: isLoading,
+                children: t.setPassword
+            })
+        ]
+    });
+}

package/dist/components/forms/SignupForm.d.ts

@@ -0,0 +1,13 @@
+import { type DeepPartial, type UiTranslations } from '../ui/translations';
+export interface SignupFormProps {
+    onSignup: (data: {
+        name: string;
+        email: string;
+    }) => Promise<void>;
+    showGoogleOAuth?: boolean;
+    loginUrl?: string;
+    verifyOtpUrl?: string;
+    locale?: string;
+    messages?: Record<string, DeepPartial<UiTranslations>>;
+}
+export declare function SignupForm({ onSignup, showGoogleOAuth, loginUrl, verifyOtpUrl, locale, messages, }: SignupFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/SignupForm.js

@@ -0,0 +1,152 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Button, Input, Divider } from '../ui/index.js';
+import { getUiTranslations } from '../ui/translations.js';
+export function SignupForm({ onSignup, showGoogleOAuth = true, loginUrl = '/login', verifyOtpUrl = '/verify-otp', 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 translations = getUiTranslations(locale, messages);
+    const t = translations.signup;
+    const errors = translations.errors;
+    // Helper to translate error keys
+    const getErrorMessage = (err)=>{
+        if (!err) return null;
+        if (err in errors) return errors[err];
+        return err;
+    };
+    const handleSubmit = async (e)=>{
+        e.preventDefault();
+        setIsLoading(true);
+        setError(null);
+        try {
+            await onSignup({
+                name,
+                email
+            });
+            window.location.href = `${verifyOtpUrl}?email=${encodeURIComponent(email)}&purpose=signup`;
+        } catch (err) {
+            setError(err.message || 'Signup failed');
+        } finally{
+            setIsLoading(false);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxs(Button, {
+                        fullWidth: true,
+                        variant: "bordered",
+                        size: "lg",
+                        className: "mb-4",
+                        children: [
+                            /*#__PURE__*/ _jsxs("svg", {
+                                width: "20",
+                                height: "20",
+                                viewBox: "0 0 48 48",
+                                children: [
+                                    /*#__PURE__*/ _jsx("path", {
+                                        fill: "#EA4335",
+                                        d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+                                    }),
+                                    /*#__PURE__*/ _jsx("path", {
+                                        fill: "#4285F4",
+                                        d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+                                    }),
+                                    /*#__PURE__*/ _jsx("path", {
+                                        fill: "#FBBC05",
+                                        d: "M10.53 28.59a14.5 14.5 0 0 1 0-9.18l-7.98-6.19a24.01 24.01 0 0 0 0 21.56l7.98-6.19z"
+                                    }),
+                                    /*#__PURE__*/ _jsx("path", {
+                                        fill: "#34A853",
+                                        d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+                                    })
+                                ]
+                            }),
+                            t.continueWithGoogle
+                        ]
+                    }),
+                    /*#__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: t.or
+                            }),
+                            /*#__PURE__*/ _jsx(Divider, {
+                                className: "flex-1"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__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: getErrorMessage(error)
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        label: t.fullNameLabel,
+                        value: name,
+                        onValueChange: setName,
+                        isRequired: true
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        type: "email",
+                        label: t.emailLabel,
+                        value: email,
+                        onValueChange: setEmail,
+                        isRequired: true
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: "text-xs text-gray-600 text-center",
+                        children: [
+                            t.termsNotice,
+                            ' ',
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "/terms",
+                                className: "text-gray-900 hover:underline",
+                                children: t.termsLink
+                            }),
+                            " ",
+                            t.andSeparator,
+                            ' ',
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "/privacy",
+                                className: "text-gray-900 hover:underline",
+                                children: t.privacyLink
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "submit",
+                        variant: "primary",
+                        isLoading: isLoading,
+                        children: t.createAccount
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("p", {
+                className: "text-center text-gray-600 text-sm mt-6",
+                children: [
+                    t.haveAccount,
+                    ' ',
+                    /*#__PURE__*/ _jsx("a", {
+                        href: loginUrl,
+                        className: "text-gray-900 font-medium hover:underline",
+                        children: t.loginLink
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/components/forms/VerifyOtpForm.d.ts

@@ -0,0 +1,9 @@
+import { type DeepPartial, type UiTranslations } from '../ui/translations';
+export interface VerifyOtpFormProps {
+    loginUrl?: string;
+    locale?: string;
+    messages?: Record<string, DeepPartial<UiTranslations>>;
+    /** Callback to update the card title based on purpose */
+    onPurposeChange?: (purpose: 'login' | 'signup' | 'password-reset', title: string, subtitle: string) => void;
+}
+export declare function VerifyOtpForm(props: VerifyOtpFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/VerifyOtpForm.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { Button, OtpInput, Spinner } from '../ui/index.js';
+import { useVerifyOtpFlow } from '../../auth/application/hooks/useVerifyOtpFlow.js';
+import { getUiTranslations } from '../ui/translations.js';
+function VerifyOtpFormContent({ loginUrl = '/login', locale, messages, onPurposeChange }) {
+    const searchParams = useSearchParams();
+    const email = searchParams.get('email') || '';
+    const purpose = searchParams.get('purpose') || 'login';
+    const redirectTo = searchParams.get('redirect') || '/';
+    const { otp, error, isLoading, isResending, resendCooldown, setOtp, handleSubmit, handleResendCode } = useVerifyOtpFlow({
+        email,
+        purpose,
+        redirectTo
+    });
+    const translations = getUiTranslations(locale, messages);
+    const t = translations.verifyOtp;
+    const errors = translations.errors;
+    // Helper to translate error keys
+    const getErrorMessage = (err)=>{
+        if (!err) return null;
+        if (err in errors) return errors[err];
+        return err;
+    };
+    const isPasswordReset = purpose === 'password-reset';
+    // Notify parent of purpose for dynamic title/subtitle
+    React.useEffect(()=>{
+        if (onPurposeChange) {
+            const title = isPasswordReset ? t.passwordResetTitle : t.title;
+            const subtitle = isPasswordReset ? t.passwordResetSubtitle : t.subtitle;
+            onPurposeChange(purpose, title, subtitle);
+        }
+    }, [
+        purpose,
+        onPurposeChange,
+        t,
+        isPasswordReset
+    ]);
+    if (!email) return null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col items-center gap-4",
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: "text-gray-700 text-sm font-medium",
+                children: email
+            }),
+            /*#__PURE__*/ _jsx(OtpInput, {
+                value: otp,
+                onValueChange: setOtp,
+                isDisabled: isLoading,
+                autoFocus: true
+            }),
+            error && /*#__PURE__*/ _jsx("div", {
+                className: "w-full bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm animate-[fadeIn_0.2s_ease-out]",
+                children: getErrorMessage(error)
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                variant: "primary",
+                isLoading: isLoading,
+                isDisabled: otp.length !== 6,
+                onPress: handleSubmit,
+                children: t.verify
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "text-center",
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "text-gray-600 text-sm mb-2",
+                        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 ? t.resending : resendCooldown > 0 ? t.resendIn.replace('{seconds}', String(resendCooldown)) : t.resendCode
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "text-center mt-2",
+                children: /*#__PURE__*/ _jsxs("a", {
+                    href: loginUrl,
+                    className: "text-sm text-gray-600 hover:text-gray-900 flex items-center gap-1 justify-center",
+                    children: [
+                        "← ",
+                        t.backToLogin
+                    ]
+                })
+            })
+        ]
+    });
+}
+export function VerifyOtpForm(props) {
+    return /*#__PURE__*/ _jsx(Suspense, {
+        fallback: /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center justify-center py-8",
+            children: /*#__PURE__*/ _jsx(Spinner, {
+                size: "lg"
+            })
+        }),
+        children: /*#__PURE__*/ _jsx(VerifyOtpFormContent, {
+            ...props
+        })
+    });
+}

package/dist/components/forms/index.d.ts

@@ -0,0 +1,19 @@
+import { LoginForm } from './LoginForm';
+import { SignupForm } from './SignupForm';
+import { ForgotPasswordForm } from './ForgotPasswordForm';
+import { VerifyOtpForm } from './VerifyOtpForm';
+import { SetPasswordForm } from './SetPasswordForm';
+export { LoginForm, type LoginFormProps } from './LoginForm';
+export { SignupForm, type SignupFormProps } from './SignupForm';
+export { ForgotPasswordForm, type ForgotPasswordFormProps } from './ForgotPasswordForm';
+export { VerifyOtpForm, type VerifyOtpFormProps } from './VerifyOtpForm';
+export { SetPasswordForm, type SetPasswordFormProps } from './SetPasswordForm';
+export type AuthFormSlug = 'login' | 'signup' | 'forgot-password' | 'verify-otp' | 'set-password';
+export declare const AUTH_FORMS: {
+    readonly login: typeof LoginForm;
+    readonly signup: typeof SignupForm;
+    readonly 'forgot-password': typeof ForgotPasswordForm;
+    readonly 'verify-otp': typeof VerifyOtpForm;
+    readonly 'set-password': typeof SetPasswordForm;
+};
+export declare function getFormBySlug(slug: string | string[] | undefined): React.ComponentType<any>;

package/dist/components/forms/index.js

@@ -0,0 +1,21 @@
+import { LoginForm } from './LoginForm.js';
+import { SignupForm } from './SignupForm.js';
+import { ForgotPasswordForm } from './ForgotPasswordForm.js';
+import { VerifyOtpForm } from './VerifyOtpForm.js';
+import { SetPasswordForm } from './SetPasswordForm.js';
+export { LoginForm } from './LoginForm.js';
+export { SignupForm } from './SignupForm.js';
+export { ForgotPasswordForm } from './ForgotPasswordForm.js';
+export { VerifyOtpForm } from './VerifyOtpForm.js';
+export { SetPasswordForm } from './SetPasswordForm.js';
+export const AUTH_FORMS = {
+    'login': LoginForm,
+    'signup': SignupForm,
+    'forgot-password': ForgotPasswordForm,
+    'verify-otp': VerifyOtpForm,
+    'set-password': SetPasswordForm
+};
+export function getFormBySlug(slug) {
+    const normalizedSlug = Array.isArray(slug) ? slug[0] : slug;
+    return AUTH_FORMS[normalizedSlug] ?? LoginForm;
+}

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

@@ -1,5 +1,6 @@
 import type { AuthLayoutConfig } from '../AuthLayout';
-export interface ForgotPasswordPageProps extends AuthLayoutConfig {
+import type { AuthCardConfig } from '../AuthCard';
+export interface ForgotPasswordPageProps extends AuthLayoutConfig, AuthCardConfig {
     loginUrl?: string;
 }
 export default function ForgotPasswordPage(props: ForgotPasswordPageProps): import("react/jsx-runtime").JSX.Element;