@better-auth-ui/solid 1.6.19

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

@@ -0,0 +1,326 @@
+import e from "./email-styles.js";
+import { createComponent as t, ssr as n } from "solid-js/web";
+import { Body as r, Button as i, Container as a, Head as o, Heading as s, Hr as c, Html as l, Img as u, Preview as d, Section as f, Tailwind as p, Text as m } from "@solidjs-email/main";
+import { Show as h } from "solid-js";
+//#region src/components/auth/email/new-device.tsx
+var g = "<meta content=\"light dark\" name=\"color-scheme\">", _ = "<meta content=\"light dark\" name=\"supported-color-schemes\">";
+function v(...e) {
+	return e.filter(Boolean).join(" ");
+}
+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}"
+};
+function b(e) {
+	return e.replace(/\s{2,}/g, " ").replace(" .", ".");
+}
+function x(y) {
+	let S = () => y.darkMode ?? !0, C = () => ({
+		...x.localization,
+		...y.localization
+	}), w = () => b(C().NEW_SIGN_IN_TO_YOUR_ACCOUNT.replace("{appName}", y.appName || "").replace("{userEmail}", y.userEmail || "")), T = () => b(C().IF_YOU_DIDNT_SIGN_IN.replace("{supportEmail}", y.supportEmail || ""));
+	return t(l, { get children() {
+		return [
+			t(o, { get children() {
+				return [
+					n(g),
+					n(_),
+					t(e, {
+						get colors() {
+							return y.colors;
+						},
+						get darkMode() {
+							return S();
+						}
+					}),
+					y.head
+				];
+			} }),
+			t(d, { get children() {
+				return C().NEW_SIGN_IN_DETECTED;
+			} }),
+			t(p, { get children() {
+				return t(r, {
+					get class() {
+						return v("bg-background", y.classNames?.body);
+					},
+					style: { "font-family": "Arial, Helvetica, sans-serif" },
+					get children() {
+						return t(a, {
+							get class() {
+								return v("mx-auto my-auto max-w-xl px-2 py-10", y.classNames?.container);
+							},
+							get children() {
+								return t(f, {
+									get class() {
+										return v("rounded-none border border-border bg-card p-8 text-card-foreground", y.classNames?.card);
+									},
+									get children() {
+										return [
+											y.logoURL && (typeof y.logoURL == "string" ? t(u, {
+												get alt() {
+													return y.appName || C().LOGO;
+												},
+												get class() {
+													return v("mx-auto mb-8", y.classNames?.logo);
+												},
+												height: 48,
+												get src() {
+													return y.logoURL;
+												},
+												width: 48
+											}) : [t(u, {
+												get alt() {
+													return y.appName || C().LOGO;
+												},
+												get class() {
+													return v("logo-light mx-auto mb-8", y.classNames?.logo);
+												},
+												height: 48,
+												get src() {
+													return y.logoURL.light;
+												},
+												width: 48
+											}), t(u, {
+												get alt() {
+													return y.appName || C().LOGO;
+												},
+												get class() {
+													return v("logo-dark hidden mx-auto mb-8", y.classNames?.logo);
+												},
+												height: 48,
+												get src() {
+													return y.logoURL.dark;
+												},
+												width: 48
+											})]),
+											t(s, {
+												get class() {
+													return v("m-0 mb-5 font-semibold text-2xl", y.classNames?.title);
+												},
+												get children() {
+													return C().NEW_SIGN_IN_DETECTED;
+												}
+											}),
+											t(m, {
+												get class() {
+													return v("font-normal text-sm", y.classNames?.content);
+												},
+												get children() {
+													return w();
+												}
+											}),
+											t(h, {
+												get when() {
+													return y.deviceInfo;
+												},
+												children: (e) => t(f, {
+													get class() {
+														return v("my-6 border border-border bg-muted p-4", y.classNames?.codeBlock);
+													},
+													get children() {
+														return [
+															t(m, {
+																get class() {
+																	return v("m-0 mb-3 text-muted-foreground text-xs", y.classNames?.description);
+																},
+																get children() {
+																	return [C().DEVICE_DETAILS, ":"];
+																}
+															}),
+															t(h, {
+																get when() {
+																	return e().browser;
+																},
+																children: (e) => t(m, {
+																	get class() {
+																		return v("m-0 mb-2 text-sm", y.classNames?.content);
+																	},
+																	get children() {
+																		return [
+																			C().BROWSER,
+																			": ",
+																			e()
+																		];
+																	}
+																})
+															}),
+															t(h, {
+																get when() {
+																	return e().os;
+																},
+																children: (e) => t(m, {
+																	get class() {
+																		return v("m-0 mb-2 text-sm", y.classNames?.content);
+																	},
+																	get children() {
+																		return [
+																			C().OPERATING_SYSTEM,
+																			": ",
+																			e()
+																		];
+																	}
+																})
+															}),
+															t(h, {
+																get when() {
+																	return e().location;
+																},
+																children: (e) => t(m, {
+																	get class() {
+																		return v("m-0 mb-2 text-sm", y.classNames?.content);
+																	},
+																	get children() {
+																		return [
+																			C().LOCATION,
+																			": ",
+																			e()
+																		];
+																	}
+																})
+															}),
+															t(h, {
+																get when() {
+																	return e().ipAddress;
+																},
+																children: (e) => t(m, {
+																	get class() {
+																		return v("m-0 mb-2 text-sm", y.classNames?.content);
+																	},
+																	get children() {
+																		return [
+																			C().IP_ADDRESS,
+																			": ",
+																			e()
+																		];
+																	}
+																})
+															}),
+															t(h, {
+																get when() {
+																	return e().timestamp;
+																},
+																children: (e) => t(m, {
+																	get class() {
+																		return v("m-0 text-sm", y.classNames?.content);
+																	},
+																	get children() {
+																		return [
+																			C().TIME,
+																			": ",
+																			e()
+																		];
+																	}
+																})
+															})
+														];
+													}
+												})
+											}),
+											t(m, {
+												get class() {
+													return v("font-normal text-sm", y.classNames?.content);
+												},
+												get children() {
+													return C().IF_THIS_WAS_YOU;
+												}
+											}),
+											t(h, {
+												get when() {
+													return y.secureAccountLink;
+												},
+												children: (e) => t(f, {
+													class: "mt-6",
+													get children() {
+														return t(i, {
+															get class() {
+																return v("inline-block whitespace-nowrap rounded-none bg-primary px-6 py-2.5 font-medium text-primary-foreground text-sm no-underline", y.classNames?.button);
+															},
+															get href() {
+																return e();
+															},
+															get children() {
+																return C().SECURE_MY_ACCOUNT;
+															}
+														});
+													}
+												})
+											}),
+											t(c, { get class() {
+												return v("my-6 w-full border border-border border-solid", y.classNames?.separator);
+											} }),
+											t(h, {
+												get when() {
+													return y.appName;
+												},
+												children: (e) => t(m, {
+													get class() {
+														return v("mb-3 text-muted-foreground text-xs", y.classNames?.description);
+													},
+													get children() {
+														return C().EMAIL_SENT_BY.replace("{appName}", e());
+													}
+												})
+											}),
+											t(m, {
+												get class() {
+													return v("mt-3 text-muted-foreground text-xs", y.classNames?.description);
+												},
+												get children() {
+													return T();
+												}
+											}),
+											t(h, {
+												get when() {
+													return y.poweredBy;
+												},
+												get children() {
+													return t(m, {
+														get class() {
+															return v("mt-4 mb-0 text-center text-[11px] text-muted-foreground", y.classNames?.poweredBy);
+														},
+														get children() {
+															return C().POWERED_BY_BETTER_AUTH.replace("{betterAuth}", "better-auth");
+														}
+													});
+												}
+											})
+										];
+									}
+								});
+							}
+						});
+					}
+				});
+			} })
+		];
+	} });
+}
+x.localization = y, x.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
+};
+//#endregion
+export { x as default };

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

@@ -0,0 +1,70 @@
+import { JSX } from 'solid-js';
+import { EmailClassNames, 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;
+};
+export type OrganizationInvitationEmailLocalization = typeof organizationInvitationEmailLocalization;
+export interface OrganizationInvitationEmailProps {
+    url: string;
+    email?: string;
+    inviterName?: string;
+    inviterEmail?: string;
+    organizationName?: string;
+    organizationLogoURL?: string | {
+        light: string;
+        dark: string;
+    };
+    role?: string;
+    appName?: string;
+    expirationHours?: number;
+    logoURL?: string | {
+        light: string;
+        dark: string;
+    };
+    classNames?: EmailClassNames;
+    colors?: EmailColors;
+    poweredBy?: boolean;
+    darkMode?: boolean;
+    head?: JSX.Element;
+    localization?: Partial<OrganizationInvitationEmailLocalization>;
+}
+export declare function OrganizationInvitationEmail(props: OrganizationInvitationEmailProps): JSX.Element;
+export declare namespace OrganizationInvitationEmail {
+    var 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;
+    };
+    var PreviewProps: {
+        url: string;
+        email: string;
+        inviterName: string;
+        inviterEmail: string;
+        organizationName: string;
+        role: string;
+        appName: string;
+        expirationHours: number;
+        darkMode: true;
+    };
+}
+export default OrganizationInvitationEmail;

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

@@ -0,0 +1,260 @@
+import e from "./email-styles.js";
+import { createComponent as t, ssr as n } from "solid-js/web";
+import { Body as r, Button as i, Container as a, Head as o, Heading as s, Hr as c, Html as l, Img as u, Link as d, Preview as f, Section as p, Tailwind as m, Text as h } from "@solidjs-email/main";
+import { Show as g } from "solid-js";
+//#region src/components/auth/email/organization-invitation.tsx
+var _ = "<meta content=\"light dark\" name=\"color-scheme\">", v = "<meta content=\"light dark\" name=\"supported-color-schemes\">";
+function y(...e) {
+	return e.filter(Boolean).join(" ");
+}
+var b = {
+	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}"
+};
+function x(e) {
+	return e.replace(/\s{2,}/g, " ").replace(" .", ".");
+}
+function S(b) {
+	let C = () => b.expirationHours ?? 48, w = () => b.darkMode ?? !0, T = () => ({
+		...S.localization,
+		...b.localization
+	}), E = () => b.organizationName ? T().YOU_RE_INVITED_TO_ORGANIZATION.replace("{organizationName}", b.organizationName) : T().YOU_RE_INVITED, D = () => {
+		let e = b.inviterName || "Someone", t = b.inviterEmail || "";
+		return x(T().INVITED_TO_JOIN_ORGANIZATION.replace("{inviterName}", e).replace("{inviterEmail}", t).replace("{organizationName}", b.organizationName || "").replace("{appName}", b.appName || "").replace("{role}", b.role || "").replace("()", ""));
+	};
+	return t(l, { get children() {
+		return [
+			t(o, { get children() {
+				return [
+					n(_),
+					n(v),
+					t(e, {
+						get colors() {
+							return b.colors;
+						},
+						get darkMode() {
+							return w();
+						}
+					}),
+					b.head
+				];
+			} }),
+			t(f, { get children() {
+				return E();
+			} }),
+			t(m, { get children() {
+				return t(r, {
+					get class() {
+						return y("bg-background", b.classNames?.body);
+					},
+					style: { "font-family": "Arial, Helvetica, sans-serif" },
+					get children() {
+						return t(a, {
+							get class() {
+								return y("mx-auto my-auto max-w-xl px-2 py-10", b.classNames?.container);
+							},
+							get children() {
+								return t(p, {
+									get class() {
+										return y("rounded-none border border-border bg-card p-8 text-card-foreground", b.classNames?.card);
+									},
+									get children() {
+										return [
+											b.logoURL && (typeof b.logoURL == "string" ? t(u, {
+												get alt() {
+													return b.appName || T().LOGO;
+												},
+												get class() {
+													return y("mx-auto mb-8", b.classNames?.logo);
+												},
+												height: 48,
+												get src() {
+													return b.logoURL;
+												},
+												width: 48
+											}) : [t(u, {
+												get alt() {
+													return b.appName || T().LOGO;
+												},
+												get class() {
+													return y("logo-light mx-auto mb-8", b.classNames?.logo);
+												},
+												height: 48,
+												get src() {
+													return b.logoURL.light;
+												},
+												width: 48
+											}), t(u, {
+												get alt() {
+													return b.appName || T().LOGO;
+												},
+												get class() {
+													return y("logo-dark hidden mx-auto mb-8", b.classNames?.logo);
+												},
+												height: 48,
+												get src() {
+													return b.logoURL.dark;
+												},
+												width: 48
+											})]),
+											t(s, {
+												get class() {
+													return y("m-0 mb-5 font-semibold text-2xl", b.classNames?.title);
+												},
+												get children() {
+													return E();
+												}
+											}),
+											b.organizationLogoURL && (typeof b.organizationLogoURL == "string" ? t(u, {
+												get alt() {
+													return b.organizationName || T().ORGANIZATION_LOGO;
+												},
+												get class() {
+													return y("mb-5 rounded-md", b.classNames?.logo);
+												},
+												height: 56,
+												get src() {
+													return b.organizationLogoURL;
+												},
+												width: 56
+											}) : [t(u, {
+												get alt() {
+													return b.organizationName || T().ORGANIZATION_LOGO;
+												},
+												get class() {
+													return y("logo-light mb-5 rounded-md", b.classNames?.logo);
+												},
+												height: 56,
+												get src() {
+													return b.organizationLogoURL.light;
+												},
+												width: 56
+											}), t(u, {
+												get alt() {
+													return b.organizationName || T().ORGANIZATION_LOGO;
+												},
+												get class() {
+													return y("logo-dark hidden mb-5 rounded-md", b.classNames?.logo);
+												},
+												height: 56,
+												get src() {
+													return b.organizationLogoURL.dark;
+												},
+												width: 56
+											})]),
+											t(h, {
+												get class() {
+													return y("m-0 font-normal text-sm", b.classNames?.content);
+												},
+												get children() {
+													return D();
+												}
+											}),
+											t(p, {
+												class: "my-6",
+												get children() {
+													return t(i, {
+														get class() {
+															return y("inline-block whitespace-nowrap rounded-none bg-primary px-6 py-2.5 font-medium text-primary-foreground text-sm no-underline", b.classNames?.button);
+														},
+														get href() {
+															return b.url;
+														},
+														get children() {
+															return T().ACCEPT_INVITATION;
+														}
+													});
+												}
+											}),
+											t(h, {
+												get class() {
+													return y("m-0 mb-3 text-muted-foreground text-xs", b.classNames?.description);
+												},
+												get children() {
+													return T().OR_COPY_AND_PASTE_URL;
+												}
+											}),
+											t(d, {
+												get class() {
+													return y("break-all text-primary text-xs", b.classNames?.link);
+												},
+												get href() {
+													return b.url;
+												},
+												get children() {
+													return b.url;
+												}
+											}),
+											t(c, { get class() {
+												return y("my-6 w-full border border-border border-solid", b.classNames?.separator);
+											} }),
+											t(h, {
+												get class() {
+													return y("m-0 mb-3 text-muted-foreground text-xs", b.classNames?.description);
+												},
+												get children() {
+													return [T().THIS_INVITATION_EXPIRES_IN_HOURS.replace("{expirationHours}", C().toString()), t(g, {
+														get when() {
+															return b.appName;
+														},
+														children: (e) => ` ${T().EMAIL_SENT_BY.replace("{appName}", e())}`
+													})];
+												}
+											}),
+											t(h, {
+												get class() {
+													return y("m-0 text-muted-foreground text-xs", b.classNames?.description);
+												},
+												get children() {
+													return T().IF_YOU_DIDNT_EXPECT_THIS_INVITATION;
+												}
+											}),
+											t(g, {
+												get when() {
+													return b.poweredBy;
+												},
+												get children() {
+													return t(h, {
+														get class() {
+															return y("m-0 mt-4 text-center text-[11px] text-muted-foreground", b.classNames?.poweredBy);
+														},
+														get children() {
+															return T().POWERED_BY_BETTER_AUTH.replace("{betterAuth}", "better-auth");
+														}
+													});
+												}
+											})
+										];
+									}
+								});
+							}
+						});
+					}
+				});
+			} })
+		];
+	} });
+}
+S.localization = b, S.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: !0
+};
+//#endregion
+export { S as default };

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

@@ -0,0 +1,49 @@
+import { JSX } from 'solid-js';
+import { EmailClassNames, EmailColors } from './email-styles';
+declare const otpEmailLocalization: {
+    YOUR_VERIFICATION_CODE_IS_CODE: string;
+    LOGO: string;
+    VERIFY_YOUR_EMAIL: string;
+    WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS: string;
+    THIS_CODE_EXPIRES_IN_MINUTES: string;
+    EMAIL_SENT_BY: string;
+    IF_YOU_DIDNT_REQUEST_THIS_EMAIL: string;
+    POWERED_BY_BETTER_AUTH: string;
+};
+export type OtpEmailEmailLocalization = typeof otpEmailLocalization;
+export interface OtpEmailProps {
+    verificationCode: string;
+    email?: string;
+    appName?: string;
+    expirationMinutes?: number;
+    logoURL?: string | {
+        light: string;
+        dark: string;
+    };
+    classNames?: EmailClassNames;
+    colors?: EmailColors;
+    poweredBy?: boolean;
+    darkMode?: boolean;
+    head?: JSX.Element;
+    localization?: Partial<OtpEmailEmailLocalization>;
+}
+export declare function OtpEmail(props: OtpEmailProps): JSX.Element;
+export declare namespace OtpEmail {
+    var localization: {
+        YOUR_VERIFICATION_CODE_IS_CODE: string;
+        LOGO: string;
+        VERIFY_YOUR_EMAIL: string;
+        WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS: string;
+        THIS_CODE_EXPIRES_IN_MINUTES: string;
+        EMAIL_SENT_BY: string;
+        IF_YOU_DIDNT_REQUEST_THIS_EMAIL: string;
+        POWERED_BY_BETTER_AUTH: string;
+    };
+    var PreviewProps: {
+        verificationCode: string;
+        email: string;
+        appName: string;
+        darkMode: true;
+    };
+}
+export default OtpEmail;