@main12/auth-login 0.4.2 → 1.0.1

package/dist/components/pages/SetPasswordPageHero.js

@@ -6,8 +6,9 @@ import { Icon } from '@iconify/react';
 import { motion } from 'framer-motion';
 import { useSetPasswordFlow } from '../../auth/application/hooks/useSetPasswordFlow.js';
 import { AuthLayout } from '../AuthLayout.js';
+import { AuthCard } from '../AuthCard.js';
 import { getUiTranslations } from '../ui/translations.js';
-export default function SetPasswordPageHero({ redirectTo = '/', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
+export default function SetPasswordPageHero({ redirectTo = '/', logo, poweredBy, cardClassName, removeBorder, removeShadow, mobileVariant, backgroundClass, locale, messages }) {
     const { password, confirmPassword, error, isLoading, showPassword, strength, setPassword, setConfirmPassword, setShowPassword, handleSubmit } = useSetPasswordFlow({
         redirectTo
     });
@@ -16,99 +17,104 @@ export default function SetPasswordPageHero({ redirectTo = '/', logo, poweredBy,
     }, (_, i)=>i < strength.score);
     const t = getUiTranslations(locale, messages).setPassword;
     return /*#__PURE__*/ _jsx(AuthLayout, {
-        logo: logo,
-        title: t.title,
-        subtitle: t.subtitle,
-        poweredBy: poweredBy,
-        cardClassName: cardClassName,
         backgroundClass: backgroundClass,
-        children: /*#__PURE__*/ _jsxs("form", {
-            onSubmit: handleSubmit,
-            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.newPasswordLabel
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: "relative",
-                            children: [
-                                /*#__PURE__*/ _jsx(Input, {
-                                    variant: "secondary",
-                                    className: "w-full pr-10"
-                                }),
-                                /*#__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: t.title,
+            subtitle: t.subtitle,
+            poweredBy: poweredBy,
+            cardClassName: cardClassName,
+            removeBorder: removeBorder,
+            removeShadow: removeShadow,
+            mobileVariant: mobileVariant,
+            children: /*#__PURE__*/ _jsxs("form", {
+                onSubmit: handleSubmit,
+                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.newPasswordLabel
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "relative",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Input, {
+                                        variant: "secondary",
+                                        className: "w-full pr-10"
+                                    }),
+                                    /*#__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
+                                        })
                                     })
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                password.length > 0 && /*#__PURE__*/ _jsx("div", {
-                    className: "flex gap-1",
-                    children: bars.map((a, i)=>/*#__PURE__*/ _jsx("div", {
-                            className: `h-1 flex-1 rounded-full ${a ? 'bg-[#D5E855]' : 'bg-gray-200'}`
-                        }, i))
-                }),
-                /*#__PURE__*/ _jsxs(TextField, {
-                    type: showPassword ? 'text' : 'password',
-                    value: confirmPassword,
-                    onChange: setConfirmPassword,
-                    isRequired: true,
-                    fullWidth: true,
-                    children: [
-                        /*#__PURE__*/ _jsx(Label, {
-                            className: "text-gray-600",
-                            children: t.confirmPasswordLabel
-                        }),
-                        /*#__PURE__*/ _jsx(Input, {
-                            variant: "secondary",
-                            className: "w-full"
-                        })
-                    ]
-                }),
-                /*#__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.setPassword
-                            ]
-                        })
-                })
-            ]
+                                ]
+                            })
+                        ]
+                    }),
+                    password.length > 0 && /*#__PURE__*/ _jsx("div", {
+                        className: "flex gap-1",
+                        children: bars.map((a, i)=>/*#__PURE__*/ _jsx("div", {
+                                className: `h-1 flex-1 rounded-full ${a ? 'bg-[#D5E855]' : 'bg-gray-200'}`
+                            }, i))
+                    }),
+                    /*#__PURE__*/ _jsxs(TextField, {
+                        type: showPassword ? 'text' : 'password',
+                        value: confirmPassword,
+                        onChange: setConfirmPassword,
+                        isRequired: true,
+                        fullWidth: true,
+                        children: [
+                            /*#__PURE__*/ _jsx(Label, {
+                                className: "text-gray-600",
+                                children: t.confirmPasswordLabel
+                            }),
+                            /*#__PURE__*/ _jsx(Input, {
+                                variant: "secondary",
+                                className: "w-full"
+                            })
+                        ]
+                    }),
+                    /*#__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.setPassword
+                                ]
+                            })
+                    })
+                ]
+            })
         })
     });
 }

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

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

package/dist/components/pages/SetPasswordPageTailwind.js

@@ -4,8 +4,9 @@ import React from 'react';
 import { Button, Input } from '../ui/index.js';
 import { useSetPasswordFlow } from '../../auth/application/hooks/useSetPasswordFlow.js';
 import { AuthLayout } from '../AuthLayout.js';
+import { AuthCard } from '../AuthCard.js';
 import { getUiTranslations } from '../ui/translations.js';
-export default function SetPasswordPage({ redirectTo = '/', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
+export default function SetPasswordPage({ redirectTo = '/', logo, poweredBy, cardClassName, removeBorder, removeShadow, mobileVariant, backgroundClass, locale, messages }) {
     const { password, confirmPassword, error, isLoading, showPassword, strength, setPassword, setConfirmPassword, setShowPassword, handleSubmit } = useSetPasswordFlow({
         redirectTo
     });
@@ -14,63 +15,68 @@ export default function SetPasswordPage({ redirectTo = '/', logo, poweredBy, car
     }, (_, i)=>i < strength.score);
     const t = getUiTranslations(locale, messages).setPassword;
     return /*#__PURE__*/ _jsx(AuthLayout, {
-        logo: logo,
-        title: t.title,
-        subtitle: t.subtitle,
-        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: 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
-                })
-            ]
+        children: /*#__PURE__*/ _jsx(AuthCard, {
+            logo: logo,
+            title: t.title,
+            subtitle: t.subtitle,
+            poweredBy: poweredBy,
+            cardClassName: cardClassName,
+            removeBorder: removeBorder,
+            removeShadow: removeShadow,
+            mobileVariant: mobileVariant,
+            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: 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/pages/SignupPage.d.ts

@@ -1,5 +1,6 @@
 import type { AuthLayoutConfig } from '../AuthLayout';
-export interface SignupPageProps extends AuthLayoutConfig {
+import type { AuthCardConfig } from '../AuthCard';
+export interface SignupPageProps extends AuthLayoutConfig, AuthCardConfig {
     onSignup: (data: {
         name: string;
         email: string;

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

@@ -1,5 +1,6 @@
 import type { AuthLayoutConfig } from '../AuthLayout';
-export interface SignupPageHeroProps extends AuthLayoutConfig {
+import type { AuthCardConfig } from '../AuthCard';
+export interface SignupPageHeroProps extends AuthLayoutConfig, AuthCardConfig {
     onSignup: (data: {
         name: string;
         email: string;
@@ -7,4 +8,4 @@ export interface SignupPageHeroProps extends AuthLayoutConfig {
     showGoogleOAuth?: boolean;
     loginUrl?: string;
 }
-export default function SignupPageHero({ onSignup, showGoogleOAuth, loginUrl, logo, poweredBy, cardClassName, backgroundClass, locale, messages }: SignupPageHeroProps): import("react/jsx-runtime").JSX.Element;
+export default function SignupPageHero({ onSignup, showGoogleOAuth, loginUrl, logo, poweredBy, cardClassName, removeBorder, removeShadow, mobileVariant, backgroundClass, locale, messages }: SignupPageHeroProps): import("react/jsx-runtime").JSX.Element;