@main12/auth-login 0.1.0

package/dist/auth/application/services/authService.js

@@ -0,0 +1,90 @@
+const API_PREFIX = '/api/auth';
+/**
+ * Check if a user exists and whether they have a password set.
+ * Used in the two-step login flow.
+ */ export async function checkEmail(email) {
+    const response = await fetch(`${API_PREFIX}/check-email`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            email: email.trim()
+        })
+    });
+    return response.json();
+}
+/**
+ * Send an OTP verification code to the user's email.
+ */ export async function sendOtp(email, purpose = 'login') {
+    const response = await fetch(`${API_PREFIX}/otp/send`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            email: email.trim(),
+            purpose
+        })
+    });
+    return response.json();
+}
+/**
+ * Verify an OTP code and receive an auth token.
+ */ export async function verifyOtp(email, otp) {
+    const response = await fetch(`${API_PREFIX}/otp/verify`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            email,
+            otp
+        })
+    });
+    return response.json();
+}
+/**
+ * Set a new user password (requires valid auth session).
+ */ export async function setUserPassword(password, confirmPassword) {
+    const response = await fetch(`${API_PREFIX}/set-password`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            password,
+            confirmPassword
+        })
+    });
+    return response.json();
+}
+/**
+ * Create a new user account.
+ */ export async function signup(name, email) {
+    const response = await fetch(`${API_PREFIX}/signup`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            name: name.trim(),
+            email: email.trim()
+        })
+    });
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.message || 'Signup failed');
+    }
+    return response.json();
+}
+/**
+ * Redirect the browser to the Google OAuth login endpoint.
+ */ export function initiateGoogleLogin(redirectTo = '/') {
+    const params = new URLSearchParams();
+    if (redirectTo !== '/') {
+        params.set('redirect', redirectTo);
+    }
+    const qs = params.toString();
+    window.location.href = `/api/users/oauth/google${qs ? `?${qs}` : ''}`;
+}

package/dist/auth/domain/otp.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Generates a cryptographically secure 6-digit OTP code.
+ */
+export declare function generateOtp(): string;
+/**
+ * Hashes an OTP code with SHA-256 for secure storage.
+ */
+export declare function hashOtp(otp: string): string;
+/**
+ * Constant-time comparison of an OTP against its hash.
+ * Uses crypto.timingSafeEqual to prevent timing attacks.
+ */
+export declare function verifyOtp(otp: string, hashedOtp: string): boolean;
+/**
+ * Returns expiry date (default: 10 minutes from now).
+ */
+export declare function getOtpExpiry(minutes?: number): Date;
+/**
+ * Checks if an OTP has expired.
+ */
+export declare function isOtpExpired(expiryDate: Date | string): boolean;
+/**
+ * Max OTP verification attempts before code is invalidated.
+ */
+export declare function getMaxOtpAttempts(): number;

package/dist/auth/domain/otp.js

@@ -0,0 +1,41 @@
+import crypto from 'crypto';
+/**
+ * Generates a cryptographically secure 6-digit OTP code.
+ */ export function generateOtp() {
+    return crypto.randomInt(100000, 999999).toString();
+}
+/**
+ * Hashes an OTP code with SHA-256 for secure storage.
+ */ export function hashOtp(otp) {
+    return crypto.createHash('sha256').update(otp).digest('hex');
+}
+/**
+ * Constant-time comparison of an OTP against its hash.
+ * Uses crypto.timingSafeEqual to prevent timing attacks.
+ */ export function verifyOtp(otp, hashedOtp) {
+    const inputHash = hashOtp(otp);
+    if (inputHash.length !== hashedOtp.length) {
+        return false;
+    }
+    try {
+        return crypto.timingSafeEqual(Buffer.from(inputHash), Buffer.from(hashedOtp));
+    } catch  {
+        return false;
+    }
+}
+/**
+ * Returns expiry date (default: 10 minutes from now).
+ */ export function getOtpExpiry(minutes = 10) {
+    return new Date(Date.now() + minutes * 60 * 1000);
+}
+/**
+ * Checks if an OTP has expired.
+ */ export function isOtpExpired(expiryDate) {
+    const expiry = typeof expiryDate === 'string' ? new Date(expiryDate) : expiryDate;
+    return new Date() > expiry;
+}
+/**
+ * Max OTP verification attempts before code is invalidated.
+ */ export function getMaxOtpAttempts() {
+    return parseInt(process.env.OTP_MAX_ATTEMPTS || '3', 10);
+}

package/dist/auth/domain/passwordRules.d.ts

@@ -0,0 +1,12 @@
+import type { PasswordStrengthResult } from './types.js';
+export declare const MIN_PASSWORD_LENGTH = 8;
+export declare const MIN_CRITERIA_COUNT = 3;
+/**
+ * Evaluate password strength against standard criteria.
+ * Returns a score 0-5 and individual flag checks.
+ */
+export declare function evaluatePasswordStrength(password: string): PasswordStrengthResult;
+/**
+ * Quick check: does password meet minimum requirements?
+ */
+export declare function isPasswordValid(password: string): boolean;

package/dist/auth/domain/passwordRules.js

@@ -0,0 +1,34 @@
+export const MIN_PASSWORD_LENGTH = 8;
+export const MIN_CRITERIA_COUNT = 3;
+/**
+ * Evaluate password strength against standard criteria.
+ * Returns a score 0-5 and individual flag checks.
+ */ export function evaluatePasswordStrength(password) {
+    const hasMinLength = password.length >= MIN_PASSWORD_LENGTH;
+    const hasUppercase = /[A-Z]/.test(password);
+    const hasLowercase = /[a-z]/.test(password);
+    const hasNumber = /[0-9]/.test(password);
+    const hasSpecial = /[^A-Za-z0-9]/.test(password);
+    const criteria = [
+        hasMinLength,
+        hasUppercase,
+        hasLowercase,
+        hasNumber,
+        hasSpecial
+    ];
+    const met = criteria.filter(Boolean).length;
+    return {
+        score: met,
+        hasMinLength,
+        hasUppercase,
+        hasLowercase,
+        hasNumber,
+        hasSpecial,
+        isValid: met >= MIN_CRITERIA_COUNT
+    };
+}
+/**
+ * Quick check: does password meet minimum requirements?
+ */ export function isPasswordValid(password) {
+    return evaluatePasswordStrength(password).isValid;
+}

package/dist/auth/domain/types.d.ts

@@ -0,0 +1,35 @@
+export type LoginStep = 'email' | 'password' | 'otp-prompt';
+export type OTPPurpose = 'login' | 'signup' | 'password-reset';
+export interface CheckEmailResponse {
+    exists: boolean;
+    hasPassword: boolean;
+    authProvider: string | null;
+}
+export interface SendOtpResponse {
+    success: boolean;
+    message?: string;
+}
+export interface VerifyOtpResponse {
+    success: boolean;
+    token?: string;
+    error?: string;
+    isNewUser?: boolean;
+}
+export interface SetPasswordResponse {
+    success: boolean;
+    message?: string;
+}
+export interface SignupResponse {
+    success: boolean;
+    message?: string;
+    userId?: string;
+}
+export interface PasswordStrengthResult {
+    score: number;
+    hasMinLength: boolean;
+    hasUppercase: boolean;
+    hasLowercase: boolean;
+    hasNumber: boolean;
+    hasSpecial: boolean;
+    isValid: boolean;
+}

package/dist/auth/domain/types.js

@@ -0,0 +1,2 @@
+// Auth domain types shared across the plugin
+export { };

package/dist/components/AuthLayout.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface AuthLayoutConfig {
+    logo: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    poweredBy?: {
+        enabled?: boolean;
+        logoUrl?: string;
+        linkUrl?: string;
+        width?: number;
+        height?: number;
+    };
+    cardClassName?: string;
+    backgroundClass?: string;
+}
+export interface AuthLayoutProps extends AuthLayoutConfig {
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+}
+export declare const AuthLayout: React.FC<AuthLayoutProps>;

package/dist/components/AuthLayout.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Card, CardContent, CardFooter } from './ui/index.js';
+import { PoweredBy } from './PoweredBy.js';
+export const AuthLayout = ({ children, logo, title, subtitle, footer, poweredBy, cardClassName = '', backgroundClass = 'bg-white md:bg-[#191919]' })=>{
+    return /*#__PURE__*/ _jsx("main", {
+        className: `flex flex-col min-h-screen ${backgroundClass}`,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "min-h-screen flex items-center justify-center px-4 py-12",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "w-full max-w-[400px] animate-[fadeIn_0.5s_ease-out]",
+                children: [
+                    /*#__PURE__*/ _jsxs(Card, {
+                        className: cardClassName,
+                        children: [
+                            (logo || title) && /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col items-center gap-2 pt-6 pb-2 px-6",
+                                children: [
+                                    logo && /*#__PURE__*/ _jsx("div", {
+                                        className: "flex justify-center mb-2",
+                                        children: logo
+                                    }),
+                                    title && /*#__PURE__*/ _jsx("h1", {
+                                        className: "text-xl font-semibold text-gray-900 text-center",
+                                        children: title
+                                    }),
+                                    subtitle && /*#__PURE__*/ _jsx("p", {
+                                        className: "text-gray-600 text-sm text-center",
+                                        children: subtitle
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(CardContent, {
+                                children: children
+                            }),
+                            footer && /*#__PURE__*/ _jsx(CardFooter, {
+                                children: footer
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(PoweredBy, {
+                        ...poweredBy
+                    })
+                ]
+            })
+        })
+    });
+};

package/dist/components/PoweredBy.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface PoweredByProps {
+    enabled?: boolean;
+    logoUrl?: string;
+    linkUrl?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+}
+export declare const PoweredBy: React.FC<PoweredByProps>;

package/dist/components/PoweredBy.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+const Main12LogoSVG = ({ width = 28, height = 28 })=>/*#__PURE__*/ _jsxs("svg", {
+        width: width,
+        height: height,
+        viewBox: "0 0 100 100",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("rect", {
+                width: "100",
+                height: "100",
+                rx: "20",
+                fill: "#D5E855"
+            }),
+            /*#__PURE__*/ _jsx("text", {
+                x: "50",
+                y: "68",
+                textAnchor: "middle",
+                fontSize: "52",
+                fontWeight: "700",
+                fill: "#1d1d1f",
+                fontFamily: "system-ui, sans-serif",
+                children: "12"
+            })
+        ]
+    });
+export const PoweredBy = ({ enabled = true, logoUrl, linkUrl = 'https://main12.com', width = 28, height = 28, className = '' })=>{
+    if (!enabled) return null;
+    return /*#__PURE__*/ _jsx("div", {
+        className: `mt-4 w-full flex justify-center transition-all duration-300 ${className}`,
+        children: /*#__PURE__*/ _jsx("a", {
+            href: linkUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "flex items-center justify-center hover:opacity-80",
+            children: logoUrl ? /*#__PURE__*/ _jsx("img", {
+                src: logoUrl,
+                alt: "Powered by",
+                width: width,
+                height: height,
+                className: "object-contain"
+            }) : /*#__PURE__*/ _jsx(Main12LogoSVG, {
+                width: width,
+                height: height
+            })
+        })
+    });
+};

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

@@ -0,0 +1,13 @@
+import { type EmailColors, type SocialLink } from './constants.js';
+import { type SupportedLanguage } from './translations.js';
+export interface BaseTemplateOptions {
+    logoUrl?: string;
+    projectName?: string;
+    domain?: string;
+    colors?: Partial<EmailColors>;
+    preheader?: string;
+    language?: SupportedLanguage;
+    socialLinks?: SocialLink[];
+    userEmail?: string;
+}
+export declare function wrapInBaseTemplate(content: string, options?: BaseTemplateOptions): string;

package/dist/components/email/baseTemplate.js

@@ -0,0 +1,69 @@
+import { DEFAULT_COLORS, SOCIAL_ICONS } from './constants.js';
+import { getEmailTranslations } from './translations.js';
+function getEmailHeader(logoUrl, projectName = '') {
+    const logoSrc = logoUrl || '';
+    const logoHtml = logoSrc ? `<img src="${logoSrc}" alt="${projectName}" width="200" style="max-width:200px;height:auto;display:block;margin:0 auto;">` : `<span style="font-size:28px;font-weight:bold;color:${DEFAULT_COLORS.primary};">${projectName}</span>`;
+    return `
+    <tr>
+      <td style="padding:24px 8px;text-align:center;">
+        ${logoHtml}
+      </td>
+    </tr>`;
+}
+function getSocialSection(socialLinks) {
+    if (!socialLinks?.length) return '';
+    const iconsHtml = socialLinks.map(({ platform, url })=>{
+        const icon = SOCIAL_ICONS[platform];
+        if (!icon) return '';
+        return `<a href="${url}" target="_blank" rel="noopener" style="display:inline-block;width:40px;height:40px;margin:0 6px;color:${DEFAULT_COLORS.textTertiary};text-decoration:none;">${icon}</a>`;
+    }).filter(Boolean).join('');
+    return `<tr><td style="padding:0 0 24px;text-align:center;">${iconsHtml}</td></tr>`;
+}
+function getEmailFooter(language = 'en', socialLinks, userEmail, contactEmail, projectName) {
+    const t = getEmailTranslations(language);
+    const year = new Date().getFullYear();
+    const emailLine = userEmail ? `<p style="margin:16px 0 0;font-size:14px;color:${DEFAULT_COLORS.textSecondary};line-height:1.5;">${t.footerEmailSentTo} <strong>${userEmail}</strong>. ${t.footerSecurityNotice}</p>` : '';
+    return `
+    <tr>
+      <td style="padding:16px;text-align:center;color:${DEFAULT_COLORS.textSecondary};font-size:14px;line-height:1.5;">
+        <p style="margin:0;">${t.footerContactMessage} <a href="mailto:${contactEmail || ''}" style="color:${DEFAULT_COLORS.text};text-decoration:none;font-weight:bold;">${contactEmail || ''}</a></p>
+        ${emailLine}
+      </td>
+    </tr>
+    ${getSocialSection(socialLinks || [])}
+    <tr>
+      <td style="padding:16px 0 32px;text-align:center;">
+        <p style="margin:0 0 8px;font-size:12px;color:${DEFAULT_COLORS.textTertiary};">© ${year} ${projectName || ''}. ${t.footerCopyright}</p>
+        <p style="margin:0;font-size:12px;color:${DEFAULT_COLORS.textTertiary};">${t.footerTagline}</p>
+      </td>
+    </tr>`;
+}
+export function wrapInBaseTemplate(content, options = {}) {
+    const { logoUrl, projectName = '', domain = '', preheader, language = 'en', socialLinks, userEmail } = options;
+    const contactEmail = options.colors ? undefined : undefined // will use env
+    ;
+    const preheaderHtml = preheader ? `<span style="display:none;font-size:1px;color:#fff;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">${preheader}</span>` : '';
+    return `<!DOCTYPE html>
+<html lang="${language}">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>${projectName}</title>
+</head>
+<body style="margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background-color:${DEFAULT_COLORS.background};-webkit-font-smoothing:antialiased;">
+  ${preheaderHtml}
+  <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background-color:${DEFAULT_COLORS.background};">
+    <tr>
+      <td style="padding:0 16px;">
+        <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:600px;margin:0 auto;">
+          ${getEmailHeader(logoUrl, projectName)}
+          ${content}
+          ${getEmailFooter(language, socialLinks, userEmail, undefined, projectName)}
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`.trim();
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Email constants — configurable per project via plugin options.
+ * These are the defaults; overridden by the host project's options.
+ */
+export interface EmailColors {
+    primary: string;
+    primaryText: string;
+    accent: string;
+    text: string;
+    textSecondary: string;
+    textTertiary: string;
+    background: string;
+    backgroundSecondary: string;
+    border: string;
+}
+export declare const DEFAULT_COLORS: EmailColors;
+export type SocialPlatform = 'facebook' | 'twitter' | 'instagram' | 'linkedin' | 'youtube' | 'tiktok' | 'github' | 'discord';
+export interface SocialLink {
+    platform: SocialPlatform;
+    url: string;
+}
+/** Minimal Material Design SVG icons for social platforms */
+export declare const SOCIAL_ICONS: Record<SocialPlatform, string>;
+/** Helper to build base URL from environment */
+export declare function getBaseUrl(): string;
+export declare function getSenderEmail(): string;

package/dist/components/email/constants.js

@@ -0,0 +1,30 @@
+/**
+ * Email constants — configurable per project via plugin options.
+ * These are the defaults; overridden by the host project's options.
+ */ export const DEFAULT_COLORS = {
+    primary: '#D5E855',
+    primaryText: '#1d1d1f',
+    accent: '#0071e3',
+    text: '#1d1d1f',
+    textSecondary: '#6e6e73',
+    textTertiary: '#86868b',
+    background: '#ffffff',
+    backgroundSecondary: '#f5f5f7',
+    border: '#d2d2d7'
+};
+/** Minimal Material Design SVG icons for social platforms */ export const SOCIAL_ICONS = {
+    facebook: '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>',
+    twitter: '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',
+    instagram: '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/></svg>',
+    linkedin: '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/></svg>',
+    youtube: '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z"/></svg>',
+    tiktok: '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M16.6 5.82s.51.5 0 0A4.278 4.278 0 0 1 15.54 3h-3.09v12.4a2.592 2.592 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6 0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64 0 3.33 2.76 5.7 5.69 5.7 3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48z"/></svg>',
+    github: '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"/></svg>',
+    discord: '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09-.01-.02-.04-.03-.07-.03-1.5.26-2.93.71-4.27 1.33-.01 0-.02.01-.03.02-2.72 4.07-3.47 8.03-3.1 11.95 0 .02.01.04.03.05 1.8 1.32 3.53 2.12 5.24 2.65.03.01.06 0 .07-.02.4-.55.76-1.13 1.07-1.74.02-.04 0-.08-.04-.09-.57-.22-1.11-.48-1.64-.78-.04-.02-.04-.08-.01-.11.11-.08.22-.17.33-.25.02-.02.05-.02.07-.01 3.44 1.57 7.15 1.57 10.55 0 .02-.01.05-.01.07.01.11.09.22.17.33.26.04.03.04.09-.01.11-.52.31-1.07.56-1.64.78-.04.01-.05.06-.04.09.32.61.68 1.19 1.07 1.74.03.01.06.02.09.01 1.72-.53 3.45-1.33 5.25-2.65.02-.01.03-.03.03-.05.44-4.53-.73-8.46-3.1-11.95-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.83 2.12-1.89 2.12z"/></svg>'
+};
+/** Helper to build base URL from environment */ export function getBaseUrl() {
+    return process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000';
+}
+export function getSenderEmail() {
+    return process.env.BREVO_SENDER_EMAIL || process.env.MAILGUN_SENDER_EMAIL || 'noreply@example.com';
+}

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

@@ -0,0 +1,7 @@
+export { wrapInBaseTemplate, type BaseTemplateOptions } from './baseTemplate.js';
+export { DEFAULT_COLORS, SOCIAL_ICONS, getBaseUrl, getSenderEmail, type EmailColors, type SocialLink, type SocialPlatform } from './constants.js';
+export { getEmailTranslations, type SupportedLanguage, type EmailTranslations } from './translations.js';
+export { generateOtpEmail, type OtpEmailParams, type OtpEmailResult } from './templates/otp.js';
+export { generateWelcomeEmail, type WelcomeEmailParams, type WelcomeEmailResult } from './templates/welcome.js';
+export { generatePasswordResetEmail, type PasswordResetEmailParams, type PasswordResetEmailResult } from './templates/passwordReset.js';
+export { generatePasswordChangedEmail, type PasswordChangedEmailParams, type PasswordChangedEmailResult } from './templates/passwordChanged.js';

package/dist/components/email/index.js

@@ -0,0 +1,7 @@
+export { wrapInBaseTemplate } from './baseTemplate.js';
+export { DEFAULT_COLORS, SOCIAL_ICONS, getBaseUrl, getSenderEmail } from './constants.js';
+export { getEmailTranslations } from './translations.js';
+export { generateOtpEmail } from './templates/otp.js';
+export { generateWelcomeEmail } from './templates/welcome.js';
+export { generatePasswordResetEmail } from './templates/passwordReset.js';
+export { generatePasswordChangedEmail } from './templates/passwordChanged.js';

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

@@ -0,0 +1,16 @@
+import { type SocialLink } from '../constants.js';
+import { type BaseTemplateOptions } from '../baseTemplate.js';
+import { type SupportedLanguage } from '../translations.js';
+export interface OtpEmailParams {
+    userName: string;
+    otp: string;
+    purpose?: 'login' | 'password-reset';
+    language?: SupportedLanguage;
+    socialLinks?: SocialLink[];
+    baseOptions?: BaseTemplateOptions;
+}
+export interface OtpEmailResult {
+    subject: string;
+    html: string;
+}
+export declare function generateOtpEmail(params: OtpEmailParams): OtpEmailResult;

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

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

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

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

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

@@ -0,0 +1,33 @@
+import { DEFAULT_COLORS, getBaseUrl } from '../constants.js';
+import { wrapInBaseTemplate } from '../baseTemplate.js';
+import { getEmailTranslations } from '../translations.js';
+export function generatePasswordChangedEmail(params) {
+    const { userName, loginUrl = `${getBaseUrl()}/login`, language = 'en', socialLinks, baseOptions } = params;
+    const t = getEmailTranslations(language);
+    const content = `
+    <tr>
+      <td style="text-align:center;padding-bottom:32px;">
+        <h1 style="margin:0 0 12px;font-size:28px;font-weight:600;color:${DEFAULT_COLORS.text};">${t.passwordChanged.title}</h1>
+        <p style="margin:0;font-size:17px;color:${DEFAULT_COLORS.textSecondary};line-height:1.5;">${t.greeting} ${userName}, ${t.passwordChanged.message}</p>
+      </td>
+    </tr>
+    <tr>
+      <td style="text-align:center;padding:16px;">
+        <a href="${loginUrl}" style="display:inline-block;background-color:${DEFAULT_COLORS.primary};color:${DEFAULT_COLORS.primaryText};font-weight:600;text-decoration:none;padding:14px 40px;border-radius:980px;font-size:16px;">${t.passwordChanged.ctaButton}</a>
+      </td>
+    </tr>
+    <tr>
+      <td style="text-align:center;padding:24px 16px 8px;">
+        <p style="margin:0;font-size:13px;color:${DEFAULT_COLORS.textTertiary};">${t.passwordChanged.warningMessage}</p>
+      </td>
+    </tr>`;
+    return {
+        subject: t.passwordChanged.subject,
+        html: wrapInBaseTemplate(content, {
+            ...baseOptions,
+            preheader: t.passwordChanged.preheader,
+            language,
+            socialLinks
+        })
+    };
+}