@main12/auth-login 0.1.0 → 0.1.2

package/dist/components/pages/SignupPageHero.js

@@ -0,0 +1,150 @@
+'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 '@heroui/react';
+import { Icon } from '@iconify/react';
+import { motion } from 'framer-motion';
+import { AuthLayout } from '../AuthLayout.js';
+export default function SignupPageHero({ onSignup, showGoogleOAuth = true, loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+    const [name, setName] = React.useState('');
+    const [email, setEmail] = React.useState('');
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const handleSubmit = async (e)=>{
+        e.preventDefault();
+        setIsLoading(true);
+        setError(null);
+        try {
+            await onSignup({
+                name,
+                email
+            });
+            window.location.href = `/verify-otp?email=${encodeURIComponent(email)}&purpose=signup`;
+        } catch (err) {
+            setError(err.message || 'Signup failed');
+        } finally{
+            setIsLoading(false);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(AuthLayout, {
+        logo: logo,
+        title: "Create Account",
+        subtitle: "Enter your details to get started",
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        footer: /*#__PURE__*/ _jsxs("p", {
+            className: "text-center text-gray-600 text-sm",
+            children: [
+                "Already have an account? ",
+                /*#__PURE__*/ _jsx("a", {
+                    href: loginUrl,
+                    className: "text-gray-900 font-medium hover:underline",
+                    children: "Sign in"
+                })
+            ]
+        }),
+        children: [
+            showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        fullWidth: true,
+                        variant: "bordered",
+                        size: "lg",
+                        className: "mb-4 h-12 border-gray-300 rounded-full text-gray-700 hover:bg-gray-50",
+                        startContent: /*#__PURE__*/ _jsx(Icon, {
+                            icon: "flat-color-icons:google",
+                            width: 20
+                        }),
+                        children: "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: 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__*/ _jsx(Input, {
+                        type: "text",
+                        label: "Full Name",
+                        value: name,
+                        onValueChange: setName,
+                        variant: "bordered",
+                        size: "lg",
+                        isRequired: true,
+                        classNames: {
+                            input: 'text-gray-900',
+                            label: 'text-gray-600',
+                            inputWrapper: 'border-gray-300 bg-white'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        type: "email",
+                        label: "Email",
+                        value: email,
+                        onValueChange: setEmail,
+                        variant: "bordered",
+                        size: "lg",
+                        isRequired: true,
+                        classNames: {
+                            input: 'text-gray-900',
+                            label: 'text-gray-600',
+                            inputWrapper: 'border-gray-300 bg-white'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: "text-xs text-gray-600 text-center",
+                        children: [
+                            "By signing up, you agree to our ",
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "/terms",
+                                className: "text-gray-900 hover:underline",
+                                children: "Terms"
+                            }),
+                            " and ",
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "/privacy",
+                                className: "text-gray-900 hover:underline",
+                                children: "Privacy"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "submit",
+                        fullWidth: true,
+                        size: "lg",
+                        color: "primary",
+                        isLoading: isLoading,
+                        className: "h-12 font-semibold",
+                        children: "Create Account"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/components/pages/SignupPageTailwind.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;

package/dist/components/pages/SignupPageTailwind.js

@@ -0,0 +1,129 @@
+'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 { AuthLayout } from '../AuthLayout.js';
+export default function SignupPage({ onSignup, showGoogleOAuth = true, loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+    const [name, setName] = React.useState('');
+    const [email, setEmail] = React.useState('');
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const handleSubmit = async (e)=>{
+        e.preventDefault();
+        setIsLoading(true);
+        setError(null);
+        try {
+            await onSignup({
+                name,
+                email
+            });
+            window.location.href = `/verify-otp?email=${encodeURIComponent(email)}&purpose=signup`;
+        } catch (err) {
+            setError(err.message || 'Signup failed');
+        } finally{
+            setIsLoading(false);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(AuthLayout, {
+        logo: logo,
+        title: "Create Account",
+        subtitle: "Enter your details to get started",
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        footer: /*#__PURE__*/ _jsxs("p", {
+            className: "text-center text-gray-600 text-sm",
+            children: [
+                "Already have an account?",
+                ' ',
+                /*#__PURE__*/ _jsx("a", {
+                    href: loginUrl,
+                    className: "text-gray-900 font-medium hover:underline",
+                    children: "Sign in"
+                })
+            ]
+        }),
+        children: [
+            showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxs(Button, {
+                        fullWidth: true,
+                        variant: "bordered",
+                        size: "lg",
+                        className: "mb-4",
+                        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: 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, {
+                        label: "Full Name",
+                        value: name,
+                        onValueChange: setName,
+                        isRequired: true
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        type: "email",
+                        label: "Email",
+                        value: email,
+                        onValueChange: setEmail,
+                        isRequired: true
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: "text-xs text-gray-600 text-center",
+                        children: [
+                            "By signing up, you agree to our",
+                            ' ',
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "/terms",
+                                className: "text-gray-900 hover:underline",
+                                children: "Terms of Service"
+                            }),
+                            " and",
+                            ' ',
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "/privacy",
+                                className: "text-gray-900 hover:underline",
+                                children: "Privacy Policy"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "submit",
+                        variant: "primary",
+                        isLoading: isLoading,
+                        children: "Create Account"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/components/pages/VerifyOtpPage.js

@@ -1,87 +1,12 @@
 '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 { AuthLayout } from '../AuthLayout.js';
-function VerifyOtpContent({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
-    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
-    });
-    if (!email) return null;
-    const isPasswordReset = purpose === 'password-reset';
-    return /*#__PURE__*/ _jsx(AuthLayout, {
-        logo: logo,
-        title: isPasswordReset ? 'Reset Password' : 'Check Your Email',
-        subtitle: isPasswordReset ? 'Enter the code to reset your password' : 'We sent a 6-digit code to',
-        poweredBy: poweredBy,
-        cardClassName: cardClassName,
-        backgroundClass: backgroundClass,
-        footer: /*#__PURE__*/ _jsx("a", {
-            href: loginUrl,
-            className: "text-sm text-gray-600 hover:text-gray-900 flex items-center gap-1",
-            children: "← Back to Login"
-        }),
-        children: /*#__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: error
-                }),
-                /*#__PURE__*/ _jsx(Button, {
-                    variant: "primary",
-                    isLoading: isLoading,
-                    isDisabled: otp.length !== 6,
-                    onPress: handleSubmit,
-                    children: "Verify"
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: "text-center",
-                    children: [
-                        /*#__PURE__*/ _jsx("p", {
-                            className: "text-gray-600 text-sm mb-2",
-                            children: "Didn't receive a code?"
-                        }),
-                        /*#__PURE__*/ _jsx("button", {
-                            onClick: handleResendCode,
-                            disabled: isResending || resendCooldown > 0,
-                            className: "text-[#0071e3] font-medium text-sm hover:underline disabled:opacity-50 disabled:cursor-not-allowed",
-                            children: isResending ? 'Sending...' : resendCooldown > 0 ? `Resend in ${resendCooldown}s` : 'Resend Code'
-                        })
-                    ]
-                })
-            ]
-        })
-    });
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pluginConfig } from '../../config.js';
+import VerifyOtpPageTailwind from './VerifyOtpPageTailwind.js';
+import VerifyOtpPageHero from './VerifyOtpPageHero.js';
 export default function VerifyOtpPage(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(VerifyOtpContent, {
-            ...props
-        })
+    return pluginConfig.style === 'hero-ui' ? /*#__PURE__*/ _jsx(VerifyOtpPageHero, {
+        ...props
+    }) : /*#__PURE__*/ _jsx(VerifyOtpPageTailwind, {
+        ...props
     });
 }

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

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

package/dist/components/pages/VerifyOtpPageHero.js

@@ -0,0 +1,104 @@
+'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, InputOtp, Spinner as HSpinner } from '@heroui/react';
+import { Icon } from '@iconify/react';
+import { motion } from 'framer-motion';
+import { useVerifyOtpFlow } from '../../auth/application/hooks/useVerifyOtpFlow.js';
+import { AuthLayout } from '../AuthLayout.js';
+function VerifyOtpHeroContent({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+    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
+    });
+    if (!email) return null;
+    return /*#__PURE__*/ _jsx(AuthLayout, {
+        logo: logo,
+        title: purpose === 'password-reset' ? 'Reset Password' : 'Check Your Email',
+        subtitle: purpose === 'password-reset' ? 'Enter the code to reset your password' : 'We sent a 6-digit code to',
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        footer: /*#__PURE__*/ _jsxs("a", {
+            href: loginUrl,
+            className: "text-sm text-gray-600 hover:text-gray-900 flex items-center gap-1",
+            children: [
+                /*#__PURE__*/ _jsx(Icon, {
+                    icon: "lucide:arrow-left",
+                    width: 16
+                }),
+                "Back to Login"
+            ]
+        }),
+        children: /*#__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(InputOtp, {
+                    length: 6,
+                    value: otp,
+                    onValueChange: setOtp,
+                    isDisabled: isLoading,
+                    autoFocus: true
+                }),
+                error && /*#__PURE__*/ _jsx(motion.div, {
+                    className: "w-full 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__*/ _jsx(Button, {
+                    fullWidth: true,
+                    size: "lg",
+                    color: "primary",
+                    isLoading: isLoading,
+                    isDisabled: otp.length !== 6,
+                    onPress: handleSubmit,
+                    className: "h-12 font-semibold",
+                    children: "Verify"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "text-center",
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-gray-600 text-sm mb-2",
+                            children: "Didn't receive a code?"
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            onClick: handleResendCode,
+                            disabled: isResending || resendCooldown > 0,
+                            className: "text-primary font-medium text-sm hover:underline disabled:opacity-50",
+                            children: isResending ? 'Sending...' : resendCooldown > 0 ? `Resend in ${resendCooldown}s` : 'Resend Code'
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export default function VerifyOtpPageHero(props) {
+    return /*#__PURE__*/ _jsx(Suspense, {
+        fallback: /*#__PURE__*/ _jsx("div", {
+            className: "min-h-screen flex items-center justify-center",
+            children: /*#__PURE__*/ _jsx(HSpinner, {
+                size: "lg"
+            })
+        }),
+        children: /*#__PURE__*/ _jsx(VerifyOtpHeroContent, {
+            ...props
+        })
+    });
+}

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

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

package/dist/components/pages/VerifyOtpPageTailwind.js

@@ -0,0 +1,87 @@
+'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 { AuthLayout } from '../AuthLayout.js';
+function VerifyOtpContent({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+    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
+    });
+    if (!email) return null;
+    const isPasswordReset = purpose === 'password-reset';
+    return /*#__PURE__*/ _jsx(AuthLayout, {
+        logo: logo,
+        title: isPasswordReset ? 'Reset Password' : 'Check Your Email',
+        subtitle: isPasswordReset ? 'Enter the code to reset your password' : 'We sent a 6-digit code to',
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        footer: /*#__PURE__*/ _jsx("a", {
+            href: loginUrl,
+            className: "text-sm text-gray-600 hover:text-gray-900 flex items-center gap-1",
+            children: "← Back to Login"
+        }),
+        children: /*#__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: error
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    variant: "primary",
+                    isLoading: isLoading,
+                    isDisabled: otp.length !== 6,
+                    onPress: handleSubmit,
+                    children: "Verify"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "text-center",
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-gray-600 text-sm mb-2",
+                            children: "Didn't receive a code?"
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            onClick: handleResendCode,
+                            disabled: isResending || resendCooldown > 0,
+                            className: "text-[#0071e3] font-medium text-sm hover:underline disabled:opacity-50 disabled:cursor-not-allowed",
+                            children: isResending ? 'Sending...' : resendCooldown > 0 ? `Resend in ${resendCooldown}s` : 'Resend Code'
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export default function VerifyOtpPage(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(VerifyOtpContent, {
+            ...props
+        })
+    });
+}

package/dist/config.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Shared plugin configuration — set by the plugin factory at init time,
+ * read by all client components at render time.
+ */
+export type AuthStyle = 'tailwind' | 'hero-ui';
+export declare const pluginConfig: {
+    style: AuthStyle;
+};

package/dist/config.js

@@ -0,0 +1,6 @@
+/**
+ * Shared plugin configuration — set by the plugin factory at init time,
+ * read by all client components at render time.
+ */ export const pluginConfig = {
+    style: 'tailwind'
+};

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import type { Config } from 'payload';
+import { pluginConfig, type AuthStyle } from './config.js';
 export interface AuthLoginPluginOptions {
-    /** Enable/disable the plugin */
     enabled?: boolean;
-    /** Project name used in emails */
     projectName?: string;
-    /** Contact email used in email footers */
     contactEmail?: string;
-    /** Domain for links in emails */
     domain?: string;
+    /** UI style for auth pages: 'tailwind' (default) or 'hero-ui' */
+    style?: AuthStyle;
 }
 export declare const authLoginPlugin: (options?: AuthLoginPluginOptions) => (config: Config) => Config;
+export { pluginConfig };

package/dist/index.js

@@ -1,6 +1,9 @@
 import { authEndpoints } from './endpoints/authEndpoints.js';
+import { pluginConfig } from './config.js';
 export const authLoginPlugin = (options = {})=>(config)=>{
         if (options.enabled === false) return config;
+        // Set global style config — all page components read this at render time
+        pluginConfig.style = options.style || 'tailwind';
         // Register auth API endpoints
         config.endpoints = [
             ...config.endpoints || [],
@@ -10,7 +13,8 @@ export const authLoginPlugin = (options = {})=>(config)=>{
         const incomingOnInit = config.onInit;
         config.onInit = async (payload)=>{
             if (incomingOnInit) await incomingOnInit(payload);
-            payload.logger.info(`[auth-login] Plugin initialized for ${options.projectName || 'project'}`);
+            payload.logger.info(`[auth-login] Initialized (style: ${pluginConfig.style}) for ${options.projectName || 'project'}`);
         };
         return config;
     };
+export { pluginConfig };