@main12/auth-login 0.4.2 → 1.0.1

package/dist/components/pages/LoginPageHero.js

@@ -7,8 +7,9 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { Icon } from '@iconify/react';
 import { useLoginFlow } from '../../auth/application/hooks/useLoginFlow.js';
 import { AuthLayout } from '../AuthLayout.js';
+import { AuthCard } from '../AuthCard.js';
 import { getUiTranslations } from '../ui/translations.js';
-function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
+function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, removeBorder, removeShadow, mobileVariant, backgroundClass, locale, messages }) {
     const searchParams = useSearchParams();
     const resolvedRedirect = searchParams.get('redirect') || redirectTo;
     const t = getUiTranslations(locale, messages).login;
@@ -19,300 +20,305 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
     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__*/ _jsx(AuthLayout, {
-        logo: logo,
-        title: stepTitle,
-        subtitle: stepSubtitle,
-        poweredBy: poweredBy,
-        cardClassName: cardClassName,
         backgroundClass: backgroundClass,
-        footer: signupUrl ? /*#__PURE__*/ _jsxs("p", {
-            className: "text-center text-gray-600 text-sm",
-            children: [
-                t.noAccount,
-                ' ',
-                /*#__PURE__*/ _jsx("a", {
-                    href: signupUrl,
-                    className: "text-gray-900 font-medium hover:underline",
-                    children: t.signUpLink
-                })
-            ]
-        }) : undefined,
-        children: /*#__PURE__*/ _jsxs(AnimatePresence, {
-            mode: "wait",
-            children: [
-                step === 'email' && /*#__PURE__*/ _jsxs(motion.div, {
-                    initial: {
-                        opacity: 0,
-                        x: -20
-                    },
-                    animate: {
-                        opacity: 1,
-                        x: 0
-                    },
-                    exit: {
-                        opacity: 0,
-                        x: 20
-                    },
-                    transition: {
-                        duration: 0.3
-                    },
-                    children: [
-                        showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
-                            children: [
-                                /*#__PURE__*/ _jsxs(Button, {
-                                    fullWidth: true,
-                                    variant: "secondary",
-                                    onPress: handleGoogleLogin,
-                                    className: "[--button-fg:var(--foreground)]",
-                                    children: [
-                                        /*#__PURE__*/ _jsx(Icon, {
-                                            icon: "flat-color-icons:google",
-                                            width: 20
-                                        }),
-                                        t.continueWithGoogle
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    className: "flex items-center gap-4 my-4",
-                                    children: [
-                                        /*#__PURE__*/ _jsx(Separator, {
-                                            className: "flex-1"
-                                        }),
-                                        /*#__PURE__*/ _jsx("span", {
-                                            className: "text-gray-500 text-sm",
-                                            children: t.or
-                                        }),
-                                        /*#__PURE__*/ _jsx(Separator, {
-                                            className: "flex-1"
-                                        })
-                                    ]
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsxs("form", {
-                            onSubmit: handleEmailSubmit,
-                            className: "space-y-4",
-                            children: [
-                                error && /*#__PURE__*/ _jsx(motion.div, {
-                                    className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
-                                    initial: {
-                                        opacity: 0
-                                    },
-                                    animate: {
-                                        opacity: 1
-                                    },
-                                    children: error
-                                }),
-                                /*#__PURE__*/ _jsxs(TextField, {
-                                    type: "email",
-                                    value: email,
-                                    onChange: setEmail,
-                                    isRequired: true,
-                                    fullWidth: true,
-                                    children: [
-                                        /*#__PURE__*/ _jsx(Label, {
-                                            className: "text-gray-600",
-                                            children: t.emailLabel
-                                        }),
-                                        /*#__PURE__*/ _jsx(Input, {
-                                            variant: "secondary"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    type: "submit",
-                                    fullWidth: true,
-                                    size: "lg",
-                                    isPending: isLoading,
-                                    children: ({ isPending })=>/*#__PURE__*/ _jsxs(_Fragment, {
-                                            children: [
-                                                isPending && /*#__PURE__*/ _jsx(Spinner, {
-                                                    color: "current",
-                                                    size: "sm"
-                                                }),
-                                                t.continue
-                                            ]
-                                        })
-                                })
-                            ]
-                        })
-                    ]
-                }, "email"),
-                step === 'password' && /*#__PURE__*/ _jsxs(motion.div, {
-                    initial: {
-                        opacity: 0,
-                        x: 20
-                    },
-                    animate: {
-                        opacity: 1,
-                        x: 0
-                    },
-                    exit: {
-                        opacity: 0,
-                        x: -20
-                    },
-                    transition: {
-                        duration: 0.3
-                    },
-                    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(motion.div, {
-                                    className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
-                                    initial: {
-                                        opacity: 0
-                                    },
-                                    animate: {
-                                        opacity: 1
-                                    },
-                                    children: error
-                                }),
-                                /*#__PURE__*/ _jsxs(TextField, {
-                                    type: showPassword ? 'text' : 'password',
-                                    value: password,
-                                    onChange: setPassword,
-                                    isRequired: true,
-                                    autoFocus: true,
-                                    fullWidth: true,
-                                    children: [
-                                        /*#__PURE__*/ _jsx(Label, {
-                                            className: "text-gray-600",
-                                            children: t.passwordLabel
-                                        }),
-                                        /*#__PURE__*/ _jsxs("div", {
-                                            className: "relative",
-                                            children: [
-                                                /*#__PURE__*/ _jsx(Input, {
-                                                    variant: "secondary"
-                                                }),
-                                                /*#__PURE__*/ _jsx("button", {
-                                                    type: "button",
-                                                    className: "absolute right-3 top-1/2 -translate-y-1/2",
-                                                    onClick: ()=>setShowPassword(!showPassword),
-                                                    children: /*#__PURE__*/ _jsx(Icon, {
-                                                        icon: showPassword ? 'lucide:eye-off' : 'lucide:eye',
-                                                        className: "text-gray-400",
-                                                        width: 20
+        children: /*#__PURE__*/ _jsx(AuthCard, {
+            logo: logo,
+            title: stepTitle,
+            subtitle: stepSubtitle,
+            poweredBy: poweredBy,
+            cardClassName: cardClassName,
+            removeBorder: removeBorder,
+            removeShadow: removeShadow,
+            mobileVariant: mobileVariant,
+            footer: signupUrl ? /*#__PURE__*/ _jsxs("p", {
+                className: "text-center text-gray-600 text-sm",
+                children: [
+                    t.noAccount,
+                    ' ',
+                    /*#__PURE__*/ _jsx("a", {
+                        href: signupUrl,
+                        className: "text-gray-900 font-medium hover:underline",
+                        children: t.signUpLink
+                    })
+                ]
+            }) : undefined,
+            children: /*#__PURE__*/ _jsxs(AnimatePresence, {
+                mode: "wait",
+                children: [
+                    step === 'email' && /*#__PURE__*/ _jsxs(motion.div, {
+                        initial: {
+                            opacity: 0,
+                            x: -20
+                        },
+                        animate: {
+                            opacity: 1,
+                            x: 0
+                        },
+                        exit: {
+                            opacity: 0,
+                            x: 20
+                        },
+                        transition: {
+                            duration: 0.3
+                        },
+                        children: [
+                            showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Button, {
+                                        fullWidth: true,
+                                        variant: "secondary",
+                                        onPress: handleGoogleLogin,
+                                        className: "[--button-fg:var(--foreground)]",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Icon, {
+                                                icon: "flat-color-icons:google",
+                                                width: 20
+                                            }),
+                                            t.continueWithGoogle
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex items-center gap-4 my-4",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Separator, {
+                                                className: "flex-1"
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "text-gray-500 text-sm",
+                                                children: t.or
+                                            }),
+                                            /*#__PURE__*/ _jsx(Separator, {
+                                                className: "flex-1"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("form", {
+                                onSubmit: handleEmailSubmit,
+                                className: "space-y-4",
+                                children: [
+                                    error && /*#__PURE__*/ _jsx(motion.div, {
+                                        className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
+                                        initial: {
+                                            opacity: 0
+                                        },
+                                        animate: {
+                                            opacity: 1
+                                        },
+                                        children: error
+                                    }),
+                                    /*#__PURE__*/ _jsxs(TextField, {
+                                        type: "email",
+                                        value: email,
+                                        onChange: setEmail,
+                                        isRequired: true,
+                                        fullWidth: true,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Label, {
+                                                className: "text-gray-600",
+                                                children: t.emailLabel
+                                            }),
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                variant: "secondary"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        type: "submit",
+                                        fullWidth: true,
+                                        size: "lg",
+                                        isPending: isLoading,
+                                        children: ({ isPending })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                                                children: [
+                                                    isPending && /*#__PURE__*/ _jsx(Spinner, {
+                                                        color: "current",
+                                                        size: "sm"
+                                                    }),
+                                                    t.continue
+                                                ]
+                                            })
+                                    })
+                                ]
+                            })
+                        ]
+                    }, "email"),
+                    step === 'password' && /*#__PURE__*/ _jsxs(motion.div, {
+                        initial: {
+                            opacity: 0,
+                            x: 20
+                        },
+                        animate: {
+                            opacity: 1,
+                            x: 0
+                        },
+                        exit: {
+                            opacity: 0,
+                            x: -20
+                        },
+                        transition: {
+                            duration: 0.3
+                        },
+                        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(motion.div, {
+                                        className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
+                                        initial: {
+                                            opacity: 0
+                                        },
+                                        animate: {
+                                            opacity: 1
+                                        },
+                                        children: error
+                                    }),
+                                    /*#__PURE__*/ _jsxs(TextField, {
+                                        type: showPassword ? 'text' : 'password',
+                                        value: password,
+                                        onChange: setPassword,
+                                        isRequired: true,
+                                        autoFocus: true,
+                                        fullWidth: true,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Label, {
+                                                className: "text-gray-600",
+                                                children: t.passwordLabel
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "relative",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Input, {
+                                                        variant: "secondary"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("button", {
+                                                        type: "button",
+                                                        className: "absolute right-3 top-1/2 -translate-y-1/2",
+                                                        onClick: ()=>setShowPassword(!showPassword),
+                                                        children: /*#__PURE__*/ _jsx(Icon, {
+                                                            icon: showPassword ? 'lucide:eye-off' : 'lucide:eye',
+                                                            className: "text-gray-400",
+                                                            width: 20
+                                                        })
                                                     })
-                                                })
-                                            ]
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "text-left",
+                                        children: /*#__PURE__*/ _jsx("a", {
+                                            href: "/forgot-password",
+                                            className: "text-sm text-gray-700 hover:underline",
+                                            children: t.forgotPassword
                                         })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsx("div", {
-                                    className: "text-left",
-                                    children: /*#__PURE__*/ _jsx("a", {
-                                        href: "/forgot-password",
-                                        className: "text-sm text-gray-700 hover:underline",
-                                        children: t.forgotPassword
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        type: "submit",
+                                        fullWidth: true,
+                                        size: "lg",
+                                        isPending: isLoading,
+                                        className: "h-12 font-semibold",
+                                        children: ({ isPending })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                                                children: [
+                                                    isPending && /*#__PURE__*/ _jsx(Spinner, {
+                                                        color: "current",
+                                                        size: "sm"
+                                                    }),
+                                                    t.continue
+                                                ]
+                                            })
                                     })
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    type: "submit",
-                                    fullWidth: true,
-                                    size: "lg",
-                                    isPending: isLoading,
-                                    className: "h-12 font-semibold",
-                                    children: ({ isPending })=>/*#__PURE__*/ _jsxs(_Fragment, {
-                                            children: [
-                                                isPending && /*#__PURE__*/ _jsx(Spinner, {
-                                                    color: "current",
-                                                    size: "sm"
-                                                }),
-                                                t.continue
-                                            ]
-                                        })
-                                })
-                            ]
-                        })
-                    ]
-                }, "password"),
-                step === 'otp-prompt' && /*#__PURE__*/ _jsxs(motion.div, {
-                    initial: {
-                        opacity: 0,
-                        x: 20
-                    },
-                    animate: {
-                        opacity: 1,
-                        x: 0
-                    },
-                    exit: {
-                        opacity: 0,
-                        x: -20
-                    },
-                    transition: {
-                        duration: 0.3
-                    },
-                    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: error
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: "bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4 flex gap-3",
-                            children: [
-                                /*#__PURE__*/ _jsx(Icon, {
-                                    icon: "lucide:mail",
-                                    className: "text-blue-500 mt-0.5",
-                                    width: 20
-                                }),
-                                /*#__PURE__*/ _jsx("p", {
-                                    className: "text-sm text-blue-700",
-                                    children: t.verificationNotice
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsx(Button, {
-                            fullWidth: true,
-                            size: "lg",
-                            isPending: isSendingOtp,
-                            onPress: handleSendOtp,
-                            className: "h-12 font-semibold",
-                            children: ({ isPending })=>/*#__PURE__*/ _jsxs(_Fragment, {
-                                    children: [
-                                        isPending && /*#__PURE__*/ _jsx(Spinner, {
-                                            color: "current",
-                                            size: "sm"
-                                        }),
-                                        isPending ? t.sendingCode : t.sendCode
-                                    ]
-                                })
-                        })
-                    ]
-                }, "otp-prompt")
-            ]
+                                ]
+                            })
+                        ]
+                    }, "password"),
+                    step === 'otp-prompt' && /*#__PURE__*/ _jsxs(motion.div, {
+                        initial: {
+                            opacity: 0,
+                            x: 20
+                        },
+                        animate: {
+                            opacity: 1,
+                            x: 0
+                        },
+                        exit: {
+                            opacity: 0,
+                            x: -20
+                        },
+                        transition: {
+                            duration: 0.3
+                        },
+                        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: error
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4 flex gap-3",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Icon, {
+                                        icon: "lucide:mail",
+                                        className: "text-blue-500 mt-0.5",
+                                        width: 20
+                                    }),
+                                    /*#__PURE__*/ _jsx("p", {
+                                        className: "text-sm text-blue-700",
+                                        children: t.verificationNotice
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                fullWidth: true,
+                                size: "lg",
+                                isPending: isSendingOtp,
+                                onPress: handleSendOtp,
+                                className: "h-12 font-semibold",
+                                children: ({ isPending })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            isPending && /*#__PURE__*/ _jsx(Spinner, {
+                                                color: "current",
+                                                size: "sm"
+                                            }),
+                                            isPending ? t.sendingCode : t.sendCode
+                                        ]
+                                    })
+                            })
+                        ]
+                    }, "otp-prompt")
+                ]
+            })
         })
     });
 }

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

@@ -1,5 +1,6 @@
 import type { AuthLayoutConfig } from '../AuthLayout';
-export interface LoginPageProps extends AuthLayoutConfig {
+import type { AuthCardConfig } from '../AuthCard';
+export interface LoginPageProps extends AuthLayoutConfig, AuthCardConfig {
     onPasswordLogin: (credentials: {
         email: string;
         password: string;