@better-auth-ui/react 1.6.7 → 1.6.9

package/dist/components/auth/email/new-device.js

@@ -1,223 +1,90 @@
-import { cn as e } from "../../../lib/utils.js";
-import t from "./email-styles.js";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Body as a, Button as o, Container as s, Head as c, Heading as l, Hr as u, Html as d, Img as f, Link as p, Preview as m, Section as h, Tailwind as g, Text as _, pixelBasedPreset as v } from "@react-email/components";
-//#region src/components/auth/email/new-device.tsx
-var y = {
-	NEW_SIGN_IN_DETECTED: "New sign-in detected",
-	LOGO: "Logo",
-	NEW_SIGN_IN_TO_YOUR_ACCOUNT: "We detected a new sign-in to your {appName} account {userEmail} from a device we don't recognize.",
-	DEVICE_DETAILS: "Device details",
-	BROWSER: "Browser",
-	OPERATING_SYSTEM: "Operating System",
-	LOCATION: "Location",
-	IP_ADDRESS: "IP Address",
-	TIME: "Time",
-	IF_THIS_WAS_YOU: "If this was you, you can safely ignore this email. If you don't recognize this activity, please secure your account immediately.",
-	SECURE_MY_ACCOUNT: "Secure my account",
-	EMAIL_SENT_BY: "Email sent by {appName}.",
-	IF_YOU_DIDNT_SIGN_IN: "If you didn't sign in, please contact support immediately {supportEmail} to secure your account.",
-	POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
-}, b = ({ userEmail: y, deviceInfo: x, secureAccountLink: S, appName: C, supportEmail: w, logoURL: T, colors: E, classNames: D, darkMode: O = !0, poweredBy: k, head: A, ...j }) => {
-	let M = {
-		...b.localization,
-		...j.localization
-	}, N = M.NEW_SIGN_IN_DETECTED;
-	return /* @__PURE__ */ i(d, { children: [
-		/* @__PURE__ */ i(c, { children: [
-			/* @__PURE__ */ r("meta", {
-				content: "light dark",
-				name: "color-scheme"
-			}),
-			/* @__PURE__ */ r("meta", {
-				content: "light dark",
-				name: "supported-color-schemes"
-			}),
-			/* @__PURE__ */ r(t, {
-				colors: E,
-				darkMode: O
-			}),
-			A
-		] }),
-		/* @__PURE__ */ r(m, { children: N }),
-		/* @__PURE__ */ r(g, {
-			config: { presets: [v] },
-			children: /* @__PURE__ */ r(a, {
-				className: e("bg-background font-sans", D?.body),
-				children: /* @__PURE__ */ r(s, {
-					className: e("mx-auto my-auto max-w-xl px-2 py-10", D?.container),
-					children: /* @__PURE__ */ i(h, {
-						className: e("bg-card text-card-foreground rounded-none border border-border p-8", D?.card),
-						children: [
-							T && (typeof T == "string" ? /* @__PURE__ */ r(f, {
-								src: T,
-								width: 48,
-								height: 48,
-								alt: C || M.LOGO,
-								className: e("mx-auto mb-8", D?.logo)
-							}) : /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(f, {
-								src: T.light,
-								width: 48,
-								height: 48,
-								alt: C || M.LOGO,
-								className: e("mx-auto mb-8 logo-light", D?.logo)
-							}), /* @__PURE__ */ r(f, {
-								src: T.dark,
-								width: 48,
-								height: 48,
-								alt: C || M.LOGO,
-								className: e("hidden mx-auto mb-8 logo-dark", D?.logo)
-							})] })),
-							/* @__PURE__ */ r(l, {
-								className: e("m-0 mb-5 text-2xl font-semibold", D?.title),
-								children: M.NEW_SIGN_IN_DETECTED
-							}),
-							/* @__PURE__ */ r(_, {
-								className: e("text-sm font-normal", D?.content),
-								children: (() => {
-									let e = M.NEW_SIGN_IN_TO_YOUR_ACCOUNT.replace("{appName}", C || "").replace(/\s{2,}/g, " ").replace(" .", "."), [t, a] = e.split("{userEmail}");
-									return y ? /* @__PURE__ */ i(n, { children: [
-										t,
-										/* @__PURE__ */ r(p, {
-											href: `mailto:${y}`,
-											className: "text-primary font-medium",
-											children: y
-										}),
-										a
-									] }) : e.replace("{userEmail}", "").replace(/\s{2,}/g, " ").replace(" .", ".");
-								})()
-							}),
-							x && /* @__PURE__ */ i(h, {
-								className: e("my-6 border border-border bg-muted p-4", D?.codeBlock),
-								children: [
-									/* @__PURE__ */ i(_, {
-										className: e("m-0 mb-3 text-xs text-muted-foreground", D?.description),
-										children: [M.DEVICE_DETAILS, ":"]
-									}),
-									x.browser && /* @__PURE__ */ i(_, {
-										className: e("m-0 mb-2 text-sm", D?.content),
-										children: [
-											/* @__PURE__ */ i("span", {
-												className: "font-semibold",
-												children: [M.BROWSER, ":"]
-											}),
-											" ",
-											x.browser
-										]
-									}),
-									x.os && /* @__PURE__ */ i(_, {
-										className: e("m-0 mb-2 text-sm", D?.content),
-										children: [
-											/* @__PURE__ */ i("span", {
-												className: "font-semibold",
-												children: [M.OPERATING_SYSTEM, ":"]
-											}),
-											" ",
-											x.os
-										]
-									}),
-									x.location && /* @__PURE__ */ i(_, {
-										className: e("m-0 mb-2 text-sm", D?.content),
-										children: [
-											/* @__PURE__ */ i("span", {
-												className: "font-semibold",
-												children: [M.LOCATION, ":"]
-											}),
-											" ",
-											x.location
-										]
-									}),
-									x.ipAddress && /* @__PURE__ */ i(_, {
-										className: e("m-0 mb-2 text-sm", D?.content),
-										children: [
-											/* @__PURE__ */ i("span", {
-												className: "font-semibold",
-												children: [M.IP_ADDRESS, ":"]
-											}),
-											" ",
-											x.ipAddress
-										]
-									}),
-									x.timestamp && /* @__PURE__ */ i(_, {
-										className: e("m-0 text-sm", D?.content),
-										children: [
-											/* @__PURE__ */ i("span", {
-												className: "font-semibold",
-												children: [M.TIME, ":"]
-											}),
-											" ",
-											x.timestamp
-										]
-									})
-								]
-							}),
-							/* @__PURE__ */ r(_, {
-								className: e("text-sm font-normal", D?.content),
-								children: M.IF_THIS_WAS_YOU
-							}),
-							S && /* @__PURE__ */ r(h, {
-								className: "mt-6",
-								children: /* @__PURE__ */ r(o, {
-									href: S,
-									className: e("inline-block whitespace-nowrap rounded-none text-sm font-medium py-2.5 px-6 bg-primary text-primary-foreground no-underline", D?.button),
-									children: M.SECURE_MY_ACCOUNT
-								})
-							}),
-							/* @__PURE__ */ r(u, { className: e("my-6 w-full border border-solid border-border", D?.separator) }),
-							C && /* @__PURE__ */ r(_, {
-								className: e("mb-3 text-xs text-muted-foreground", D?.description),
-								children: M.EMAIL_SENT_BY.replace("{appName}", C)
-							}),
-							/* @__PURE__ */ r(_, {
-								className: e("mt-3 text-xs text-muted-foreground", D?.description),
-								children: (() => {
-									let [t, a] = M.IF_YOU_DIDNT_SIGN_IN.split("{supportEmail}");
-									return w ? /* @__PURE__ */ i(n, { children: [
-										t,
-										/* @__PURE__ */ r(p, {
-											href: `mailto:${w}`,
-											className: e("text-primary underline", D?.link),
-											children: w
-										}),
-										a
-									] }) : M.IF_YOU_DIDNT_SIGN_IN.replace("{supportEmail}", "").replace(/\s{2,}/g, " ").replace(" .", ".");
-								})()
-							}),
-							k && /* @__PURE__ */ r(_, {
-								className: e("mt-4 mb-0 text-center text-[11px] text-muted-foreground", D?.poweredBy),
-								children: (() => {
-									let [t, a] = M.POWERED_BY_BETTER_AUTH.split("{betterAuth}");
-									return /* @__PURE__ */ i(n, { children: [
-										t,
-										/* @__PURE__ */ r(p, {
-											href: "https://better-auth.com",
-											className: e("text-primary underline", D?.link),
-											children: "better-auth"
-										}),
-										a
-									] });
-								})()
-							})
-						]
-					})
-				})
-			})
-		})
-	] });
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Body, Button, Container, Head, Heading, Hr, Html, Img, Link, Preview, pixelBasedPreset, Section, Tailwind, Text } from "@react-email/components";
+import { cn } from "../../../lib/utils";
+import { EmailStyles } from "./email-styles";
+const newDeviceEmailLocalization = {
+    NEW_SIGN_IN_DETECTED: "New sign-in detected",
+    LOGO: "Logo",
+    NEW_SIGN_IN_TO_YOUR_ACCOUNT: "We detected a new sign-in to your {appName} account {userEmail} from a device we don't recognize.",
+    DEVICE_DETAILS: "Device details",
+    BROWSER: "Browser",
+    OPERATING_SYSTEM: "Operating System",
+    LOCATION: "Location",
+    IP_ADDRESS: "IP Address",
+    TIME: "Time",
+    IF_THIS_WAS_YOU: "If this was you, you can safely ignore this email. If you don't recognize this activity, please secure your account immediately.",
+    SECURE_MY_ACCOUNT: "Secure my account",
+    EMAIL_SENT_BY: "Email sent by {appName}.",
+    IF_YOU_DIDNT_SIGN_IN: "If you didn't sign in, please contact support immediately {supportEmail} to secure your account.",
+    POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
 };
-b.localization = y, b.PreviewProps = {
-	userEmail: "m@example.com",
-	deviceInfo: {
-		browser: "Chrome on macOS",
-		os: "macOS 26.2",
-		location: "San Francisco, CA, United States",
-		ipAddress: "127.0.0.1",
-		timestamp: "February 10, 2025 at 4:20 PM UTC"
-	},
-	secureAccountLink: "https://better-auth-ui.com/auth/secure-account",
-	appName: "Better Auth",
-	supportEmail: "support@example.com",
-	darkMode: !0
+/**
+ * Email template component that notifies users when a new device signs into their account.
+ *
+ * This email includes:
+ * - Device information display (browser, OS, location, IP, timestamp)
+ * - Secure account action button
+ * - Security warnings and support contact information
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <NewDeviceEmail
+ *   userEmail="user@example.com"
+ *   deviceInfo={{
+ *     browser: "Chrome on macOS",
+ *     os: "macOS 14.0",
+ *     location: "San Francisco, CA",
+ *     ipAddress: "192.168.1.1",
+ *     timestamp: "February 10, 2025 at 4:20 PM UTC"
+ *   }}
+ *   secureAccountLink="https://example.com/secure-account"
+ *   appName="My App"
+ *   supportEmail="support@example.com"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const NewDeviceEmail = ({ userEmail, deviceInfo, secureAccountLink, appName, supportEmail, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
+    const localization = {
+        ...NewDeviceEmail.localization,
+        ...props.localization
+    };
+    const previewText = localization.NEW_SIGN_IN_DETECTED;
+    return (_jsxs(Html, { children: [_jsxs(Head, { children: [_jsx("meta", { content: "light dark", name: "color-scheme" }), _jsx("meta", { content: "light dark", name: "supported-color-schemes" }), _jsx(EmailStyles, { colors: colors, darkMode: darkMode }), head] }), _jsx(Preview, { children: previewText }), _jsx(Tailwind, { config: { presets: [pixelBasedPreset] }, children: _jsx(Body, { className: cn("bg-background font-sans", classNames?.body), children: _jsx(Container, { className: cn("mx-auto my-auto max-w-xl px-2 py-10", classNames?.container), children: _jsxs(Section, { className: cn("bg-card text-card-foreground rounded-none border border-border p-8", classNames?.card), children: [logoURL &&
+                                    (typeof logoURL === "string" ? (_jsx(Img, { src: logoURL, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8", classNames?.logo) })) : (_jsxs(_Fragment, { children: [_jsx(Img, { src: logoURL.light, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8 logo-light", classNames?.logo) }), _jsx(Img, { src: logoURL.dark, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("hidden mx-auto mb-8 logo-dark", classNames?.logo) })] }))), _jsx(Heading, { className: cn("m-0 mb-5 text-2xl font-semibold", classNames?.title), children: localization.NEW_SIGN_IN_DETECTED }), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: (() => {
+                                        const textWithAppName = localization.NEW_SIGN_IN_TO_YOUR_ACCOUNT.replace("{appName}", appName || "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", ".");
+                                        const [beforeUserEmail, afterUserEmail] = textWithAppName.split("{userEmail}");
+                                        return userEmail ? (_jsxs(_Fragment, { children: [beforeUserEmail, _jsx(Link, { href: `mailto:${userEmail}`, className: "text-primary font-medium", children: userEmail }), afterUserEmail] })) : (textWithAppName
+                                            .replace("{userEmail}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), deviceInfo && (_jsxs(Section, { className: cn("my-6 border border-border bg-muted p-4", classNames?.codeBlock), children: [_jsxs(Text, { className: cn("m-0 mb-3 text-xs text-muted-foreground", classNames?.description), children: [localization.DEVICE_DETAILS, ":"] }), deviceInfo.browser && (_jsxs(Text, { className: cn("m-0 mb-2 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.BROWSER, ":"] }), " ", deviceInfo.browser] })), deviceInfo.os && (_jsxs(Text, { className: cn("m-0 mb-2 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.OPERATING_SYSTEM, ":"] }), " ", deviceInfo.os] })), deviceInfo.location && (_jsxs(Text, { className: cn("m-0 mb-2 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.LOCATION, ":"] }), " ", deviceInfo.location] })), deviceInfo.ipAddress && (_jsxs(Text, { className: cn("m-0 mb-2 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.IP_ADDRESS, ":"] }), " ", deviceInfo.ipAddress] })), deviceInfo.timestamp && (_jsxs(Text, { className: cn("m-0 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.TIME, ":"] }), " ", deviceInfo.timestamp] }))] })), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: localization.IF_THIS_WAS_YOU }), secureAccountLink && (_jsx(Section, { className: "mt-6", children: _jsx(Button, { href: secureAccountLink, className: cn("inline-block whitespace-nowrap rounded-none text-sm font-medium py-2.5 px-6 bg-primary text-primary-foreground no-underline", classNames?.button), children: localization.SECURE_MY_ACCOUNT }) })), _jsx(Hr, { className: cn("my-6 w-full border border-solid border-border", classNames?.separator) }), appName && (_jsx(Text, { className: cn("mb-3 text-xs text-muted-foreground", classNames?.description), children: localization.EMAIL_SENT_BY.replace("{appName}", appName) })), _jsx(Text, { className: cn("mt-3 text-xs text-muted-foreground", classNames?.description), children: (() => {
+                                        const [beforeSupportEmail, afterSupportEmail] = localization.IF_YOU_DIDNT_SIGN_IN.split("{supportEmail}");
+                                        return supportEmail ? (_jsxs(_Fragment, { children: [beforeSupportEmail, _jsx(Link, { href: `mailto:${supportEmail}`, className: cn("text-primary underline", classNames?.link), children: supportEmail }), afterSupportEmail] })) : (localization.IF_YOU_DIDNT_SIGN_IN.replace("{supportEmail}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), poweredBy && (_jsx(Text, { className: cn("mt-4 mb-0 text-center text-[11px] text-muted-foreground", classNames?.poweredBy), children: (() => {
+                                        const [beforeBetterAuth, afterBetterAuth] = localization.POWERED_BY_BETTER_AUTH.split("{betterAuth}");
+                                        return (_jsxs(_Fragment, { children: [beforeBetterAuth, _jsx(Link, { href: "https://better-auth.com", className: cn("text-primary underline", classNames?.link), children: "better-auth" }), afterBetterAuth] }));
+                                    })() }))] }) }) }) })] }));
 };
-//#endregion
-export { b as default };
+NewDeviceEmail.localization = newDeviceEmailLocalization;
+NewDeviceEmail.PreviewProps = {
+    userEmail: "m@example.com",
+    deviceInfo: {
+        browser: "Chrome on macOS",
+        os: "macOS 26.2",
+        location: "San Francisco, CA, United States",
+        ipAddress: "127.0.0.1",
+        timestamp: "February 10, 2025 at 4:20 PM UTC"
+    },
+    secureAccountLink: "https://better-auth-ui.com/auth/secure-account",
+    appName: "Better Auth",
+    supportEmail: "support@example.com",
+    darkMode: true
+};
+export default NewDeviceEmail;

package/dist/components/auth/email/organization-invitation.d.ts

@@ -0,0 +1,121 @@
+import type { ReactNode } from "react";
+import { type EmailClassNames, type EmailColors } from "./email-styles";
+declare const organizationInvitationEmailLocalization: {
+    YOU_RE_INVITED_TO_ORGANIZATION: string;
+    YOU_RE_INVITED: string;
+    LOGO: string;
+    ORGANIZATION_LOGO: string;
+    INVITED_TO_JOIN_ORGANIZATION: string;
+    ACCEPT_INVITATION: string;
+    VIEW_INVITATION: string;
+    OR_COPY_AND_PASTE_URL: string;
+    THIS_INVITATION_EXPIRES_IN_HOURS: string;
+    EMAIL_SENT_BY: string;
+    IF_YOU_DIDNT_EXPECT_THIS_INVITATION: string;
+    POWERED_BY_BETTER_AUTH: string;
+};
+/**
+ * Localization strings for the OrganizationInvitationEmail component.
+ *
+ * Contains all text content used in the organization invitation email template.
+ */
+export type OrganizationInvitationEmailLocalization = typeof organizationInvitationEmailLocalization;
+/**
+ * Props for the OrganizationInvitationEmail component.
+ */
+export interface OrganizationInvitationEmailProps {
+    /**
+     * URL where the invitee can review and accept the invitation.
+     *
+     * @remarks Pass `{baseUrl}/settings/organizations` — this is where pending
+     * organization invitations are listed in the settings UI.
+     */
+    url: string;
+    /** Email address of the user being invited */
+    email?: string;
+    /** Name of the person who sent the invitation */
+    inviterName?: string;
+    /** Email address of the person who sent the invitation */
+    inviterEmail?: string;
+    /** Name of the organization the user is being invited to */
+    organizationName?: string;
+    /** Organization logo URL(s) - a single string or light/dark variants. */
+    organizationLogoURL?: string | {
+        light: string;
+        dark: string;
+    };
+    /** Role being offered to the invitee (e.g. "member", "admin", "owner") */
+    role?: string;
+    /** Name of the application sending the email */
+    appName?: string;
+    /** Number of hours until the invitation expires */
+    expirationHours?: number;
+    /** Logo URL(s) - a single string or light/dark variants. If omitted, no logo is shown. */
+    logoURL?: string | {
+        light: string;
+        dark: string;
+    };
+    /** Custom CSS class names for styling specific parts of the email */
+    classNames?: EmailClassNames;
+    /** Custom color scheme for light and dark modes */
+    colors?: EmailColors;
+    /** Whether to show the "Powered by better-auth" footer */
+    poweredBy?: boolean;
+    /** Whether to enable dark mode support */
+    darkMode?: boolean;
+    /** Additional React nodes to inject into the email head */
+    head?: ReactNode;
+    /**
+     * Localization overrides for customizing email text
+     * @remarks `OrganizationInvitationEmailLocalization`
+     */
+    localization?: Partial<OrganizationInvitationEmailLocalization>;
+}
+/**
+ * Email template component that invites a user to join an organization.
+ *
+ * This email includes:
+ * - Inviter and organization details
+ * - Role being offered
+ * - Accept invitation button linking to `{baseUrl}/settings/organizations`
+ * - Fallback URL for manual copy/paste
+ * - Optional expiration time information
+ * - Security notice for unexpected invitations
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <OrganizationInvitationEmail
+ *   url="https://example.com/settings/organizations"
+ *   email="invitee@example.com"
+ *   inviterName="Jane Doe"
+ *   inviterEmail="jane@example.com"
+ *   organizationName="Acme Inc."
+ *   organizationLogoURL="https://example.com/acme-logo.png"
+ *   role="member"
+ *   appName="My App"
+ *   expirationHours={48}
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export declare const OrganizationInvitationEmail: {
+    ({ url, email, inviterName, inviterEmail, organizationName, organizationLogoURL, role, appName, expirationHours, logoURL, colors, classNames, darkMode, poweredBy, head, ...props }: OrganizationInvitationEmailProps): import("react/jsx-runtime").JSX.Element;
+    localization: {
+        YOU_RE_INVITED_TO_ORGANIZATION: string;
+        YOU_RE_INVITED: string;
+        LOGO: string;
+        ORGANIZATION_LOGO: string;
+        INVITED_TO_JOIN_ORGANIZATION: string;
+        ACCEPT_INVITATION: string;
+        VIEW_INVITATION: string;
+        OR_COPY_AND_PASTE_URL: string;
+        THIS_INVITATION_EXPIRES_IN_HOURS: string;
+        EMAIL_SENT_BY: string;
+        IF_YOU_DIDNT_EXPECT_THIS_INVITATION: string;
+        POWERED_BY_BETTER_AUTH: string;
+    };
+    PreviewProps: OrganizationInvitationEmailProps;
+};
+export default OrganizationInvitationEmail;

package/dist/components/auth/email/organization-invitation.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Body, Button, Container, Head, Heading, Hr, Html, Img, Link, Preview, pixelBasedPreset, Section, Tailwind, Text } from "@react-email/components";
+import { cn } from "../../../lib/utils";
+import { EmailStyles } from "./email-styles";
+const organizationInvitationEmailLocalization = {
+    YOU_RE_INVITED_TO_ORGANIZATION: "You're invited to {organizationName}",
+    YOU_RE_INVITED: "You're invited",
+    LOGO: "Logo",
+    ORGANIZATION_LOGO: "Organization logo",
+    INVITED_TO_JOIN_ORGANIZATION: "{inviterName} ({inviterEmail}) has invited you to join {organizationName} on {appName} as a {role}.",
+    ACCEPT_INVITATION: "Accept invitation",
+    VIEW_INVITATION: "View invitation",
+    OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
+    THIS_INVITATION_EXPIRES_IN_HOURS: "This invitation expires in {expirationHours} hours.",
+    EMAIL_SENT_BY: "Email sent by {appName}.",
+    IF_YOU_DIDNT_EXPECT_THIS_INVITATION: "If you didn't expect this invitation, you can safely ignore this email.",
+    POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
+};
+/**
+ * Email template component that invites a user to join an organization.
+ *
+ * This email includes:
+ * - Inviter and organization details
+ * - Role being offered
+ * - Accept invitation button linking to `{baseUrl}/settings/organizations`
+ * - Fallback URL for manual copy/paste
+ * - Optional expiration time information
+ * - Security notice for unexpected invitations
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <OrganizationInvitationEmail
+ *   url="https://example.com/settings/organizations"
+ *   email="invitee@example.com"
+ *   inviterName="Jane Doe"
+ *   inviterEmail="jane@example.com"
+ *   organizationName="Acme Inc."
+ *   organizationLogoURL="https://example.com/acme-logo.png"
+ *   role="member"
+ *   appName="My App"
+ *   expirationHours={48}
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const OrganizationInvitationEmail = ({ url, email, inviterName, inviterEmail, organizationName, organizationLogoURL, role, appName, expirationHours = 48, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
+    const localization = {
+        ...OrganizationInvitationEmail.localization,
+        ...props.localization
+    };
+    const previewText = organizationName
+        ? localization.YOU_RE_INVITED_TO_ORGANIZATION.replace("{organizationName}", organizationName)
+        : localization.YOU_RE_INVITED;
+    return (_jsxs(Html, { children: [_jsxs(Head, { children: [_jsx("meta", { content: "light dark", name: "color-scheme" }), _jsx("meta", { content: "light dark", name: "supported-color-schemes" }), _jsx(EmailStyles, { colors: colors, darkMode: darkMode }), head] }), _jsx(Preview, { children: previewText }), _jsx(Tailwind, { config: { presets: [pixelBasedPreset] }, children: _jsx(Body, { className: cn("bg-background font-sans", classNames?.body), children: _jsx(Container, { className: cn("mx-auto my-auto max-w-xl px-2 py-10", classNames?.container), children: _jsxs(Section, { className: cn("bg-card text-card-foreground rounded-none border border-border p-8", classNames?.card), children: [logoURL &&
+                                    (typeof logoURL === "string" ? (_jsx(Img, { src: logoURL, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8", classNames?.logo) })) : (_jsxs(_Fragment, { children: [_jsx(Img, { src: logoURL.light, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8 logo-light", classNames?.logo) }), _jsx(Img, { src: logoURL.dark, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("hidden mx-auto mb-8 logo-dark", classNames?.logo) })] }))), _jsx(Heading, { className: cn("m-0 mb-5 text-2xl font-semibold", classNames?.title), children: organizationName
+                                        ? localization.YOU_RE_INVITED_TO_ORGANIZATION.replace("{organizationName}", organizationName)
+                                        : localization.YOU_RE_INVITED }), organizationLogoURL &&
+                                    (typeof organizationLogoURL === "string" ? (_jsx(Img, { src: organizationLogoURL, width: 56, height: 56, alt: organizationName || localization.ORGANIZATION_LOGO, className: cn("mb-5 rounded-md", classNames?.logo) })) : (_jsxs(_Fragment, { children: [_jsx(Img, { src: organizationLogoURL.light, width: 56, height: 56, alt: organizationName || localization.ORGANIZATION_LOGO, className: cn("mb-5 rounded-md logo-light", classNames?.logo) }), _jsx(Img, { src: organizationLogoURL.dark, width: 56, height: 56, alt: organizationName || localization.ORGANIZATION_LOGO, className: cn("hidden mb-5 rounded-md logo-dark", classNames?.logo) })] }))), _jsx(Text, { className: cn("m-0 text-sm font-normal", classNames?.content), children: (() => {
+                                        let text = localization.INVITED_TO_JOIN_ORGANIZATION.replace("{appName}", appName || "")
+                                            .replace("{organizationName}", organizationName || "")
+                                            .replace("{role}", role || "");
+                                        // If we have no inviter info, drop the parenthetical and name placeholders cleanly.
+                                        if (!inviterName && !inviterEmail) {
+                                            text = text
+                                                .replace("{inviterName} ({inviterEmail})", "Someone")
+                                                .replace("{inviterName}", "Someone")
+                                                .replace("({inviterEmail})", "");
+                                        }
+                                        const [beforeInviterName, afterInviterName] = text.split("{inviterName}");
+                                        const renderInviterEmail = (segment) => {
+                                            const [beforeInviterEmail, afterInviterEmail] = segment.split("{inviterEmail}");
+                                            if (!inviterEmail) {
+                                                return segment
+                                                    .replace("({inviterEmail})", "")
+                                                    .replace("{inviterEmail}", "")
+                                                    .replace(/\s{2,}/g, " ")
+                                                    .replace(" .", ".");
+                                            }
+                                            return (_jsxs(_Fragment, { children: [beforeInviterEmail, _jsx(Link, { href: `mailto:${inviterEmail}`, className: "text-primary font-medium", children: inviterEmail }), afterInviterEmail] }));
+                                        };
+                                        if (!inviterName) {
+                                            return renderInviterEmail(text
+                                                .replace("{inviterName}", "")
+                                                .replace(/\s{2,}/g, " ")
+                                                .replace(" .", "."));
+                                        }
+                                        return (_jsxs(_Fragment, { children: [beforeInviterName, _jsx("span", { className: "font-medium", children: inviterName }), renderInviterEmail(afterInviterName ?? "")] }));
+                                    })() }), _jsx(Section, { className: "my-6", children: _jsx(Button, { href: url, className: cn("inline-block whitespace-nowrap rounded-none text-sm font-medium py-2.5 px-6 bg-primary text-primary-foreground no-underline", classNames?.button), children: localization.ACCEPT_INVITATION }) }), _jsx(Text, { className: cn("m-0 mb-3 text-xs text-muted-foreground", classNames?.description), children: localization.OR_COPY_AND_PASTE_URL }), _jsx(Link, { className: cn("break-all text-xs text-primary", classNames?.link), href: url, children: url }), _jsx(Hr, { className: cn("my-6 w-full border border-solid border-border", classNames?.separator) }), expirationHours || appName ? (_jsxs(Text, { className: cn("m-0 mb-3 text-xs text-muted-foreground", classNames?.description), children: [expirationHours
+                                            ? localization.THIS_INVITATION_EXPIRES_IN_HOURS.replace("{expirationHours}", expirationHours.toString())
+                                            : null, appName && (_jsxs(_Fragment, { children: [expirationHours ? " " : "", localization.EMAIL_SENT_BY.replace("{appName}", appName)] }))] })) : null, _jsx(Text, { className: cn("m-0 text-xs text-muted-foreground", classNames?.description), children: localization.IF_YOU_DIDNT_EXPECT_THIS_INVITATION }), poweredBy && (_jsx(Text, { className: cn("m-0 mt-4 text-center text-[11px] text-muted-foreground", classNames?.poweredBy), children: (() => {
+                                        const [beforeBetterAuth, afterBetterAuth] = localization.POWERED_BY_BETTER_AUTH.split("{betterAuth}");
+                                        return (_jsxs(_Fragment, { children: [beforeBetterAuth, _jsx(Link, { href: "https://better-auth.com", className: cn("text-primary underline", classNames?.link), children: "better-auth" }), afterBetterAuth] }));
+                                    })() }))] }) }) }) })] }));
+};
+OrganizationInvitationEmail.localization =
+    organizationInvitationEmailLocalization;
+OrganizationInvitationEmail.PreviewProps = {
+    url: "https://better-auth-ui.com/settings/organizations",
+    email: "m@example.com",
+    inviterName: "Jane Doe",
+    inviterEmail: "jane@example.com",
+    organizationName: "Acme Inc.",
+    role: "member",
+    appName: "Better Auth",
+    expirationHours: 48,
+    darkMode: true
+};
+export default OrganizationInvitationEmail;

package/dist/components/auth/email/otp-email.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { EmailClassNames, EmailColors } from './email-styles';
+import type { ReactNode } from "react";
+import { type EmailClassNames, type EmailColors } from "./email-styles";
 declare const otpEmailLocalization: {
     YOUR_VERIFICATION_CODE_IS_CODE: string;
     LOGO: string;