@better-auth-ui/solid 1.6.19

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

@@ -0,0 +1,59 @@
+import { JSX } from 'solid-js';
+import { EmailClassNames, EmailColors } from './email-styles';
+declare const emailChangedEmailLocalization: {
+    YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: string;
+    LOGO: string;
+    EMAIL_ADDRESS_CHANGED: string;
+    EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED: string;
+    PREVIOUS_EMAIL: string;
+    NEW_EMAIL: string;
+    IF_YOU_MADE_THIS_CHANGE: string;
+    I_DIDNT_MAKE_THIS_CHANGE: string;
+    EMAIL_SENT_BY: string;
+    IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE: string;
+    POWERED_BY_BETTER_AUTH: string;
+};
+export type EmailChangedEmailLocalization = typeof emailChangedEmailLocalization;
+export interface EmailChangedEmailProps {
+    oldEmail?: string;
+    newEmail?: string;
+    revertURL?: string;
+    appName?: string;
+    supportEmail?: string;
+    logoURL?: string | {
+        light: string;
+        dark: string;
+    };
+    classNames?: EmailClassNames;
+    colors?: EmailColors;
+    poweredBy?: boolean;
+    darkMode?: boolean;
+    head?: JSX.Element;
+    localization?: Partial<EmailChangedEmailLocalization>;
+}
+export declare function EmailChangedEmail(props: EmailChangedEmailProps): JSX.Element;
+export declare namespace EmailChangedEmail {
+    var localization: {
+        YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: string;
+        LOGO: string;
+        EMAIL_ADDRESS_CHANGED: string;
+        EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED: string;
+        PREVIOUS_EMAIL: string;
+        NEW_EMAIL: string;
+        IF_YOU_MADE_THIS_CHANGE: string;
+        I_DIDNT_MAKE_THIS_CHANGE: string;
+        EMAIL_SENT_BY: string;
+        IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE: string;
+        POWERED_BY_BETTER_AUTH: string;
+    };
+    var PreviewProps: {
+        oldEmail: string;
+        newEmail: string;
+        supportEmail: string;
+        revertURL: string;
+        appName: string;
+        poweredBy: true;
+        darkMode: true;
+    };
+}
+export default EmailChangedEmail;

package/dist/components/auth/email/email-changed.js

@@ -0,0 +1,264 @@
+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/email-changed.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 = {
+	YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: "Your email address has been changed",
+	LOGO: "Logo",
+	EMAIL_ADDRESS_CHANGED: "Email address changed",
+	EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED: "The email address for your {appName} account has been changed.",
+	PREVIOUS_EMAIL: "Previous email:",
+	NEW_EMAIL: "New email:",
+	IF_YOU_MADE_THIS_CHANGE: "If you made this change, you can safely ignore this email.",
+	I_DIDNT_MAKE_THIS_CHANGE: "I didn't make this change",
+	EMAIL_SENT_BY: "Email sent by {appName}.",
+	IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE: "If you didn't authorize this change, 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().EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED.replace("{appName}", y.appName || "")), T = () => b(C().IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE.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().YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED;
+			} }),
+			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().EMAIL_ADDRESS_CHANGED;
+												}
+											}),
+											t(m, {
+												get class() {
+													return v("font-normal text-sm", y.classNames?.content);
+												},
+												get children() {
+													return w();
+												}
+											}),
+											t(h, {
+												get when() {
+													return y.oldEmail || y.newEmail;
+												},
+												get children() {
+													return t(f, {
+														get class() {
+															return v("my-6 border border-border bg-muted p-4", y.classNames?.codeBlock);
+														},
+														get children() {
+															return [t(h, {
+																get when() {
+																	return y.oldEmail;
+																},
+																children: (e) => [t(m, {
+																	get class() {
+																		return v("m-0 mb-2 text-muted-foreground text-xs", y.classNames?.description);
+																	},
+																	get children() {
+																		return C().PREVIOUS_EMAIL;
+																	}
+																}), t(m, {
+																	get class() {
+																		return v("m-0 mb-4 font-semibold text-sm", y.classNames?.content);
+																	},
+																	get children() {
+																		return e();
+																	}
+																})]
+															}), t(h, {
+																get when() {
+																	return y.newEmail;
+																},
+																children: (e) => [t(m, {
+																	get class() {
+																		return v("m-0 mb-2 text-muted-foreground text-xs", y.classNames?.description);
+																	},
+																	get children() {
+																		return C().NEW_EMAIL;
+																	}
+																}), t(m, {
+																	get class() {
+																		return v("m-0 font-semibold text-primary text-sm", y.classNames?.content);
+																	},
+																	get children() {
+																		return e();
+																	}
+																})]
+															})];
+														}
+													});
+												}
+											}),
+											t(m, {
+												get class() {
+													return v("font-normal text-sm", y.classNames?.content);
+												},
+												get children() {
+													return C().IF_YOU_MADE_THIS_CHANGE;
+												}
+											}),
+											t(h, {
+												get when() {
+													return y.revertURL;
+												},
+												children: (e) => t(f, {
+													class: "my-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().I_DIDNT_MAKE_THIS_CHANGE;
+															}
+														});
+													}
+												})
+											}),
+											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 = {
+	oldEmail: "old@example.com",
+	newEmail: "new@example.com",
+	supportEmail: "support@example.com",
+	revertURL: "https://better-auth-ui.com/auth/revert-email?token=example-token",
+	appName: "Better Auth",
+	poweredBy: !0,
+	darkMode: !0
+};
+//#endregion
+export { x as default };

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

@@ -0,0 +1,48 @@
+export declare const defaultColors: {
+    light: {
+        background: string;
+        border: string;
+        card: string;
+        cardForeground: string;
+        foreground: string;
+        muted: string;
+        mutedForeground: string;
+        primary: string;
+        primaryForeground: string;
+    };
+    dark: {
+        background: string;
+        border: string;
+        card: string;
+        cardForeground: string;
+        foreground: string;
+        muted: string;
+        mutedForeground: string;
+        primary: string;
+        primaryForeground: string;
+    };
+};
+export type EmailClassNames = {
+    body?: string;
+    container?: string;
+    card?: string;
+    logo?: string;
+    title?: string;
+    content?: string;
+    button?: string;
+    description?: string;
+    separator?: string;
+    link?: string;
+    poweredBy?: string;
+    codeBlock?: string;
+};
+export type EmailColors = {
+    light?: Partial<typeof defaultColors.light>;
+    dark?: Partial<typeof defaultColors.dark>;
+};
+type EmailStylesProps = {
+    colors?: EmailColors;
+    darkMode?: boolean;
+};
+export declare function EmailStyles(props: EmailStylesProps): import("solid-js").JSX.Element;
+export default EmailStyles;

package/dist/components/auth/email/email-styles.js

@@ -0,0 +1,107 @@
+import { ssr as e } from "solid-js/web";
+//#region src/components/auth/email/email-styles.tsx
+var t = ["<style type=\"text/css\">", "</style>"], n = {
+	light: {
+		background: "#F5F5F5",
+		border: "#E5E5E5",
+		card: "#FFFFFF",
+		cardForeground: "#0A0A0A",
+		foreground: "#262626",
+		muted: "#F5F5F5",
+		mutedForeground: "#737373",
+		primary: "#171717",
+		primaryForeground: "#FAFAFA"
+	},
+	dark: {
+		background: "#0A0A0A",
+		border: "#2E2E2E",
+		card: "#171717",
+		cardForeground: "#FAFAFA",
+		foreground: "#D4D4D4",
+		muted: "#212121",
+		mutedForeground: "#A1A1A1",
+		primary: "#E5E5E5",
+		primaryForeground: "#171717"
+	}
+};
+function r(r) {
+	return e(t, `
+      .font-sans {
+        font-family: Arial, Helvetica, sans-serif !important;
+      }
+      .bg-background {
+        background-color: ${r.colors?.light?.background || n.light.background} !important;
+      }
+      .bg-card {
+        background-color: ${r.colors?.light?.card || n.light.card} !important;
+      }
+      .bg-primary {
+        background-color: ${r.colors?.light?.primary || n.light.primary} !important;
+      }
+      .bg-muted {
+        background-color: ${r.colors?.light?.muted || n.light.muted} !important;
+      }
+      .border-border {
+        border-color: ${r.colors?.light?.border || n.light.border} !important;
+      }
+      .text-card-foreground {
+        color: ${r.colors?.light?.cardForeground || n.light.cardForeground} !important;
+      }
+      .text-muted-foreground {
+        color: ${r.colors?.light?.mutedForeground || n.light.mutedForeground} !important;
+      }
+      .text-primary {
+        color: ${r.colors?.light?.primary || n.light.primary} !important;
+      }
+      .text-primary-foreground {
+        color: ${r.colors?.light?.primaryForeground || n.light.primaryForeground} !important;
+      }
+      .logo-dark {
+        display: none !important;
+      }
+      .logo-light {
+        display: block !important;
+      }
+
+      ${r.darkMode ?? !0 ? `@media (prefers-color-scheme: dark) {
+        .bg-background {
+          background-color: ${r.colors?.dark?.background || n.dark.background} !important;
+        }
+        .bg-card {
+          background-color: ${r.colors?.dark?.card || n.dark.card} !important;
+        }
+        .bg-primary {
+          background-color: ${r.colors?.dark?.primary || n.dark.primary} !important;
+        }
+        .bg-muted {
+          background-color: ${r.colors?.dark?.muted || n.dark.muted} !important;
+        }
+        .border-border {
+          border-color: ${r.colors?.dark?.border || n.dark.border} !important;
+        }
+        .text-card-foreground {
+          color: ${r.colors?.dark?.cardForeground || n.dark.cardForeground} !important;
+        }
+        .text-muted-foreground {
+          color: ${r.colors?.dark?.mutedForeground || n.dark.mutedForeground} !important;
+        }
+        .text-primary {
+          color: ${r.colors?.dark?.primary || n.dark.primary} !important;
+        }
+        .text-primary-foreground {
+          color: ${r.colors?.dark?.primaryForeground || n.dark.primaryForeground} !important;
+        }
+        .logo-dark {
+          display: block !important;
+        }
+        .logo-light {
+          display: none !important;
+        }
+        * {
+          box-shadow: none !important;
+        }
+      }` : ""}
+    `);
+}
+//#endregion
+export { r as default, n as defaultColors };

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

@@ -0,0 +1,51 @@
+import { JSX } from 'solid-js';
+import { EmailClassNames, EmailColors } from './email-styles';
+declare const emailVerificationEmailLocalization: {
+    VERIFY_YOUR_EMAIL_ADDRESS: string;
+    LOGO: string;
+    CLICK_BUTTON_TO_VERIFY_EMAIL: string;
+    VERIFY_EMAIL_ADDRESS: string;
+    OR_COPY_AND_PASTE_URL: string;
+    THIS_LINK_EXPIRES_IN_MINUTES: string;
+    EMAIL_SENT_BY: string;
+    IF_YOU_DIDNT_REQUEST_THIS_EMAIL: string;
+    POWERED_BY_BETTER_AUTH: string;
+};
+export type EmailVerificationEmailLocalization = typeof emailVerificationEmailLocalization;
+export interface EmailVerificationEmailProps {
+    url: 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<EmailVerificationEmailLocalization>;
+}
+export declare function EmailVerificationEmail(props: EmailVerificationEmailProps): JSX.Element;
+export declare namespace EmailVerificationEmail {
+    var localization: {
+        VERIFY_YOUR_EMAIL_ADDRESS: string;
+        LOGO: string;
+        CLICK_BUTTON_TO_VERIFY_EMAIL: string;
+        VERIFY_EMAIL_ADDRESS: string;
+        OR_COPY_AND_PASTE_URL: string;
+        THIS_LINK_EXPIRES_IN_MINUTES: string;
+        EMAIL_SENT_BY: string;
+        IF_YOU_DIDNT_REQUEST_THIS_EMAIL: string;
+        POWERED_BY_BETTER_AUTH: string;
+    };
+    var PreviewProps: {
+        url: string;
+        appName: string;
+        email: string;
+        darkMode: true;
+    };
+}
+export default EmailVerificationEmail;