@better-auth-ui/heroui 1.6.0 → 1.6.2

package/dist/components/auth/sign-up.js

@@ -1,71 +1,241 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useSignInSocial, useSignUpEmail } from "@better-auth-ui/react";
-import { Eye, EyeSlash } from "@gravity-ui/icons";
-import { Button, Card, cn, Description, FieldError, Form, Input, InputGroup, Label, Link, Spinner, TextField, toast } from "@heroui/react";
-import { useState } from "react";
-import { FieldSeparator } from "./field-separator";
-import { MagicLinkButton } from "./magic-link-button";
-import { ProviderButtons } from "./provider-buttons";
-/**
- * Render a sign-up form with name, email, password (and optional confirm password) fields, optional social provider buttons, and password visibility controls.
- *
- * The component reflects request state by disabling inputs and showing a pending indicator during sign-up or social sign-in.
- *
- * @param className - Additional CSS classes applied to the outer card container
- * @param socialLayout - Social layout to apply to the provider buttons component
- * @param socialPosition - Position of social provider buttons relative to the form; `"top"` or `"bottom"` (default `"bottom"`)
- * @returns The sign-up form React element
- */
-export function SignUp({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
-    const { basePaths, emailAndPassword, localization, magicLink, redirectTo, socialProviders, viewPaths, navigate } = useAuth();
-    const [password, setPassword] = useState("");
-    const [confirmPassword, setConfirmPassword] = useState("");
-    const { mutate: signUpEmail, isPending: signUpPending } = useSignUpEmail({
-        onError: (error) => {
-            setPassword("");
-            setConfirmPassword("");
-            toast.danger(error.error?.message || error.message);
-        },
-        onSuccess: () => {
-            if (emailAndPassword?.requireEmailVerification) {
-                toast.success(localization.auth.verifyYourEmail);
-                navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
-            }
-            else {
-                navigate({ to: redirectTo });
-            }
-        }
-    });
-    const [socialRedirecting, setSocialRedirecting] = useState(false);
-    const { mutate: signInSocial, isPending: socialPending } = useSignInSocial({
-        onError: (error) => toast.danger(error.error?.message || error.message),
-        onSuccess: () => {
-            setSocialRedirecting(true);
-            setTimeout(() => {
-                setSocialRedirecting(false);
-            }, 5000);
-        }
-    });
-    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-    const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
-    const isPending = signUpPending || socialPending || socialRedirecting;
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        const name = formData.get("name");
-        const email = formData.get("email");
-        if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
-            toast.danger(localization.auth.passwordsDoNotMatch);
-            setPassword("");
-            setConfirmPassword("");
-            return;
-        }
-        signUpEmail({ name, email, password });
-    };
-    const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length;
-    return (_jsxs(Card, { className: cn("w-full max-w-sm p-4 md:p-6", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl font-semibold mb-1", children: localization.auth.signUp }) }), _jsxs(Card.Content, { className: "gap-4", children: [socialPosition === "top" && (_jsxs(_Fragment, { children: [!!socialProviders?.length && (_jsx(ProviderButtons, { isPending: isPending, socialLayout: socialLayout, signInSocial: signInSocial })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), emailAndPassword?.enabled && (_jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "name", type: "text", autoComplete: "name", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.name }), _jsx(Input, { placeholder: localization.auth.namePlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), _jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", autoComplete: "new-password", isDisabled: isPending, value: password, onChange: setPassword, children: [_jsx(Label, { children: localization.auth.password }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { placeholder: localization.auth.passwordPlaceholder, type: isPasswordVisible ? "text" : "password", name: "password", required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isPasswordVisible
-                                                        ? localization.auth.hidePassword
-                                                        : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsPasswordVisible(!isPasswordVisible), isDisabled: isPending, children: isPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, {})] }), emailAndPassword?.confirmPassword && (_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "confirmPassword", autoComplete: "new-password", isDisabled: isPending, value: confirmPassword, onChange: setConfirmPassword, children: [_jsx(Label, { children: localization.auth.confirmPassword }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "confirmPassword", placeholder: localization.auth.confirmPasswordPlaceholder, type: isConfirmPasswordVisible ? "text" : "password", required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isConfirmPasswordVisible
-                                                        ? localization.auth.hidePassword
-                                                        : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsConfirmPasswordVisible(!isConfirmPasswordVisible), isDisabled: isPending, children: isConfirmPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, {})] })), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.signUp] }), magicLink && (_jsx(MagicLinkButton, { view: "signUp", isPending: isPending }))] })] })), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending }))] }))] }), _jsx(Card.Footer, { className: "flex-col", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.alreadyHaveAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signIn })] }) })] }));
+import { FieldSeparator as e } from "./field-separator.js";
+import { MagicLinkButton as t } from "./magic-link-button.js";
+import { ProviderButtons as n } from "./provider-buttons.js";
+import { useAuth as r, useIsUsernameAvailable as i, useSignInSocial as ee, useSignUpEmail as te } from "@better-auth-ui/react";
+import { Button as a, Card as o, Description as ne, FieldError as s, Form as c, Input as l, InputGroup as u, Label as d, Link as re, Spinner as f, TextField as p, cn as m, toast as h } from "@heroui/react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useState as y } from "react";
+import { Check as ie, Eye as b, EyeSlash as x, Xmark as S } from "@gravity-ui/icons";
+import { useDebouncer as C } from "@tanstack/react-pacer";
+//#region src/components/auth/sign-up.tsx
+function w({ className: w, socialLayout: T, socialPosition: E = "bottom", variant: D, ...ae }) {
+	let { basePaths: O, emailAndPassword: k, localization: A, magicLink: j, redirectTo: M, socialProviders: N, username: P, viewPaths: F, navigate: I } = r(), [L, R] = y(""), [z, B] = y(""), [V, H] = y(""), { mutate: U, data: W, error: G, reset: K } = i(), q = C((e) => {
+		if (!e.trim()) {
+			K();
+			return;
+		}
+		U({ username: e.trim() });
+	}, { wait: 500 });
+	function oe(e) {
+		H(e), K(), P?.isUsernameAvailable && q.maybeExecute(e);
+	}
+	let { mutate: se, isPending: ce } = te({
+		onError: (e) => {
+			R(""), B(""), h.danger(e.error?.message || e.message);
+		},
+		onSuccess: () => {
+			k?.requireEmailVerification ? (h.success(A.auth.verifyYourEmail), I({ to: `${O.auth}/${F.auth.signIn}` })) : I({ to: M });
+		}
+	}), [le, J] = y(!1), { mutate: Y, isPending: ue } = ee({
+		onError: (e) => h.danger(e.error?.message || e.message),
+		onSuccess: () => {
+			J(!0), setTimeout(() => {
+				J(!1);
+			}, 5e3);
+		}
+	}), [X, de] = y(!1), [Z, fe] = y(!1), Q = ce || ue || le, pe = (e) => {
+		e.preventDefault();
+		let t = new FormData(e.currentTarget), n = t.get("name"), r = t.get("email");
+		if (k?.confirmPassword && L !== z) {
+			h.danger(A.auth.passwordsDoNotMatch), R(""), B("");
+			return;
+		}
+		se({
+			name: n,
+			email: r,
+			password: L,
+			...P?.enabled ? {
+				username: V.trim(),
+				...P.displayUsername ? { displayUsername: V.trim() } : {}
+			} : {}
+		});
+	}, $ = k?.enabled && !!N?.length;
+	return /* @__PURE__ */ v(o, {
+		className: m("w-full max-w-sm p-4 md:p-6", w),
+		variant: D,
+		...ae,
+		children: [
+			/* @__PURE__ */ _(o.Header, { children: /* @__PURE__ */ _(o.Title, {
+				className: "text-xl font-semibold mb-1",
+				children: A.auth.signUp
+			}) }),
+			/* @__PURE__ */ v(o.Content, {
+				className: "gap-4",
+				children: [
+					E === "top" && /* @__PURE__ */ v(g, { children: [!!N?.length && /* @__PURE__ */ _(n, {
+						isPending: Q,
+						socialLayout: T,
+						signInSocial: Y
+					}), $ && /* @__PURE__ */ _(e, { children: A.auth.or })] }),
+					k?.enabled && /* @__PURE__ */ v(c, {
+						onSubmit: pe,
+						className: "flex flex-col gap-4",
+						children: [
+							/* @__PURE__ */ v(p, {
+								name: "name",
+								type: "text",
+								autoComplete: "name",
+								isDisabled: Q,
+								children: [
+									/* @__PURE__ */ _(d, { children: A.auth.name }),
+									/* @__PURE__ */ _(l, {
+										placeholder: A.auth.namePlaceholder,
+										required: !0,
+										variant: D === "transparent" ? "primary" : "secondary"
+									}),
+									/* @__PURE__ */ _(s, {})
+								]
+							}),
+							P?.enabled && /* @__PURE__ */ v(p, {
+								name: "username",
+								type: "text",
+								autoComplete: "username",
+								minLength: P.minUsernameLength,
+								maxLength: P.maxUsernameLength,
+								isDisabled: Q,
+								value: V,
+								onChange: oe,
+								isInvalid: !!G || W && !W.available,
+								children: [
+									/* @__PURE__ */ _(d, { children: A.auth.username }),
+									/* @__PURE__ */ v(u, {
+										variant: D === "transparent" ? "primary" : "secondary",
+										children: [/* @__PURE__ */ _(u.Input, {
+											placeholder: A.auth.usernamePlaceholder,
+											required: !0
+										}), P.isUsernameAvailable && V.trim() && /* @__PURE__ */ _(u.Suffix, {
+											className: "px-2",
+											children: W?.available ? /* @__PURE__ */ _(ie, { className: "text-success" }) : G || W?.available === !1 ? /* @__PURE__ */ _(S, { className: "text-danger" }) : /* @__PURE__ */ _(f, {
+												size: "sm",
+												color: "current"
+											})
+										})]
+									}),
+									/* @__PURE__ */ _(s, { children: G?.error?.message || G?.message || W?.available === !1 && A.auth.usernameTaken })
+								]
+							}),
+							/* @__PURE__ */ v(p, {
+								name: "email",
+								type: "email",
+								autoComplete: "email",
+								isDisabled: Q,
+								children: [
+									/* @__PURE__ */ _(d, { children: A.auth.email }),
+									/* @__PURE__ */ _(l, {
+										placeholder: A.auth.emailPlaceholder,
+										required: !0,
+										variant: D === "transparent" ? "primary" : "secondary"
+									}),
+									/* @__PURE__ */ _(s, {})
+								]
+							}),
+							/* @__PURE__ */ v(p, {
+								minLength: k?.minPasswordLength,
+								maxLength: k?.maxPasswordLength,
+								name: "password",
+								autoComplete: "new-password",
+								isDisabled: Q,
+								value: L,
+								onChange: R,
+								children: [
+									/* @__PURE__ */ _(d, { children: A.auth.password }),
+									/* @__PURE__ */ v(u, {
+										variant: D === "transparent" ? "primary" : "secondary",
+										children: [/* @__PURE__ */ _(u.Input, {
+											placeholder: A.auth.passwordPlaceholder,
+											type: X ? "text" : "password",
+											name: "password",
+											required: !0
+										}), /* @__PURE__ */ _(u.Suffix, {
+											className: "px-0",
+											children: /* @__PURE__ */ _(a, {
+												isIconOnly: !0,
+												"aria-label": X ? A.auth.hidePassword : A.auth.showPassword,
+												size: "sm",
+												variant: "ghost",
+												onPress: () => de(!X),
+												isDisabled: Q,
+												children: _(X ? x : b, {})
+											})
+										})]
+									}),
+									/* @__PURE__ */ _(s, {})
+								]
+							}),
+							k?.confirmPassword && /* @__PURE__ */ v(p, {
+								minLength: k?.minPasswordLength,
+								maxLength: k?.maxPasswordLength,
+								name: "confirmPassword",
+								autoComplete: "new-password",
+								isDisabled: Q,
+								value: z,
+								onChange: B,
+								children: [
+									/* @__PURE__ */ _(d, { children: A.auth.confirmPassword }),
+									/* @__PURE__ */ v(u, {
+										variant: D === "transparent" ? "primary" : "secondary",
+										children: [/* @__PURE__ */ _(u.Input, {
+											name: "confirmPassword",
+											placeholder: A.auth.confirmPasswordPlaceholder,
+											type: Z ? "text" : "password",
+											required: !0
+										}), /* @__PURE__ */ _(u.Suffix, {
+											className: "px-0",
+											children: /* @__PURE__ */ _(a, {
+												isIconOnly: !0,
+												"aria-label": Z ? A.auth.hidePassword : A.auth.showPassword,
+												size: "sm",
+												variant: "ghost",
+												onPress: () => fe(!Z),
+												isDisabled: Q,
+												children: _(Z ? x : b, {})
+											})
+										})]
+									}),
+									/* @__PURE__ */ _(s, {})
+								]
+							}),
+							/* @__PURE__ */ v("div", {
+								className: "flex flex-col gap-3",
+								children: [/* @__PURE__ */ v(a, {
+									type: "submit",
+									className: "w-full",
+									isPending: Q,
+									children: [Q && /* @__PURE__ */ _(f, {
+										color: "current",
+										size: "sm"
+									}), A.auth.signUp]
+								}), j && /* @__PURE__ */ _(t, {
+									view: "signUp",
+									isPending: Q
+								})]
+							})
+						]
+					}),
+					E === "bottom" && /* @__PURE__ */ v(g, { children: [$ && /* @__PURE__ */ _(e, { children: A.auth.or }), !!N?.length && /* @__PURE__ */ _(n, {
+						socialLayout: T,
+						signInSocial: Y,
+						isPending: Q
+					})] })
+				]
+			}),
+			/* @__PURE__ */ _(o.Footer, {
+				className: "flex-col",
+				children: /* @__PURE__ */ v(ne, {
+					className: "text-sm",
+					children: [
+						A.auth.alreadyHaveAnAccount,
+						" ",
+						/* @__PURE__ */ _(re, {
+							href: `${O.auth}/${F.auth.signIn}`,
+							className: "text-accent decoration-accent no-underline hover:underline",
+							children: A.auth.signIn
+						})
+					]
+				})
+			})
+		]
+	});
 }
+//#endregion
+export { w as SignUp };

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

@@ -1,3 +1,3 @@
-import { type EmailChangedEmailProps } from "@better-auth-ui/react";
-export type { EmailChangedEmailProps } from "@better-auth-ui/react";
+import { EmailChangedEmailProps } from '@better-auth-ui/react';
+export type { EmailChangedEmailProps } from '@better-auth-ui/react';
 export declare function EmailChangedEmail({ colors, classNames, ...props }: EmailChangedEmailProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,23 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { EmailChangedEmail as EmailChangedEmailPrimitive } from "@better-auth-ui/react";
-import { cn } from "@heroui/react";
-export function EmailChangedEmail({ colors, classNames, ...props }) {
-    return (_jsx(EmailChangedEmailPrimitive, { colors: {
-            light: {
-                background: "#F5F5F5",
-                primary: "#0285F7",
-                primaryForeground: "#FCFCFC",
-                ...colors?.light
-            },
-            dark: {
-                background: "#060607",
-                primary: "#0584F6",
-                primaryForeground: "#FCFCFC",
-                ...colors?.dark
-            }
-        }, classNames: {
-            ...classNames,
-            card: cn("border-none rounded-3xl", classNames?.card),
-            button: cn("rounded-full", classNames?.button)
-        }, ...props }));
+import { EmailChangedEmail as e } from "@better-auth-ui/react";
+import { cn as t } from "@heroui/react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/email/email-changed-email.tsx
+function r({ colors: r, classNames: i, ...a }) {
+	return /* @__PURE__ */ n(e, {
+		colors: {
+			light: {
+				background: "#F5F5F5",
+				primary: "#0285F7",
+				primaryForeground: "#FCFCFC",
+				...r?.light
+			},
+			dark: {
+				background: "#060607",
+				primary: "#0584F6",
+				primaryForeground: "#FCFCFC",
+				...r?.dark
+			}
+		},
+		classNames: {
+			...i,
+			card: t("border-none rounded-3xl", i?.card),
+			button: t("rounded-full", i?.button)
+		},
+		...a
+	});
 }
+//#endregion
+export { r as EmailChangedEmail };

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

@@ -1,3 +1,3 @@
-import { type EmailVerificationEmailProps } from "@better-auth-ui/react";
-export type { EmailVerificationEmailProps } from "@better-auth-ui/react";
+import { EmailVerificationEmailProps } from '@better-auth-ui/react';
+export type { EmailVerificationEmailProps } from '@better-auth-ui/react';
 export declare function EmailVerificationEmail({ colors, classNames, ...props }: EmailVerificationEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/email/email-verification-email.js

@@ -1,23 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { EmailVerificationEmail as EmailVerificationEmailPrimitive } from "@better-auth-ui/react";
-import { cn } from "@heroui/react";
-export function EmailVerificationEmail({ colors, classNames, ...props }) {
-    return (_jsx(EmailVerificationEmailPrimitive, { colors: {
-            light: {
-                background: "#F5F5F5",
-                primary: "#0285F7",
-                primaryForeground: "#FCFCFC",
-                ...colors?.light
-            },
-            dark: {
-                background: "#060607",
-                primary: "#0584F6",
-                primaryForeground: "#FCFCFC",
-                ...colors?.dark
-            }
-        }, classNames: {
-            ...classNames,
-            card: cn("border-none rounded-3xl", classNames?.card),
-            button: cn("rounded-full", classNames?.button)
-        }, ...props }));
+import { EmailVerificationEmail as e } from "@better-auth-ui/react";
+import { cn as t } from "@heroui/react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/email/email-verification-email.tsx
+function r({ colors: r, classNames: i, ...a }) {
+	return /* @__PURE__ */ n(e, {
+		colors: {
+			light: {
+				background: "#F5F5F5",
+				primary: "#0285F7",
+				primaryForeground: "#FCFCFC",
+				...r?.light
+			},
+			dark: {
+				background: "#060607",
+				primary: "#0584F6",
+				primaryForeground: "#FCFCFC",
+				...r?.dark
+			}
+		},
+		classNames: {
+			...i,
+			card: t("border-none rounded-3xl", i?.card),
+			button: t("rounded-full", i?.button)
+		},
+		...a
+	});
 }
+//#endregion
+export { r as EmailVerificationEmail };

package/dist/components/email/magic-link-email.d.ts

@@ -1,3 +1,3 @@
-import { type MagicLinkEmailProps } from "@better-auth-ui/react";
-export type { MagicLinkEmailProps } from "@better-auth-ui/react";
+import { MagicLinkEmailProps } from '@better-auth-ui/react';
+export type { MagicLinkEmailProps } from '@better-auth-ui/react';
 export declare function MagicLinkEmail({ colors, classNames, ...props }: MagicLinkEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/email/magic-link-email.js

@@ -1,23 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MagicLinkEmail as MagicLinkEmailPrimitive } from "@better-auth-ui/react";
-import { cn } from "@heroui/react";
-export function MagicLinkEmail({ colors, classNames, ...props }) {
-    return (_jsx(MagicLinkEmailPrimitive, { colors: {
-            light: {
-                background: "#F5F5F5",
-                primary: "#0285F7",
-                primaryForeground: "#FCFCFC",
-                ...colors?.light
-            },
-            dark: {
-                background: "#060607",
-                primary: "#0584F6",
-                primaryForeground: "#FCFCFC",
-                ...colors?.dark
-            }
-        }, classNames: {
-            ...classNames,
-            card: cn("border-none rounded-3xl", classNames?.card),
-            button: cn("rounded-full", classNames?.button)
-        }, ...props }));
+import { MagicLinkEmail as e } from "@better-auth-ui/react";
+import { cn as t } from "@heroui/react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/email/magic-link-email.tsx
+function r({ colors: r, classNames: i, ...a }) {
+	return /* @__PURE__ */ n(e, {
+		colors: {
+			light: {
+				background: "#F5F5F5",
+				primary: "#0285F7",
+				primaryForeground: "#FCFCFC",
+				...r?.light
+			},
+			dark: {
+				background: "#060607",
+				primary: "#0584F6",
+				primaryForeground: "#FCFCFC",
+				...r?.dark
+			}
+		},
+		classNames: {
+			...i,
+			card: t("border-none rounded-3xl", i?.card),
+			button: t("rounded-full", i?.button)
+		},
+		...a
+	});
 }
+//#endregion
+export { r as MagicLinkEmail };

package/dist/components/email/new-device-email.d.ts

@@ -1,3 +1,3 @@
-import { type NewDeviceEmailProps } from "@better-auth-ui/react";
-export type { NewDeviceEmailProps } from "@better-auth-ui/react";
+import { NewDeviceEmailProps } from '@better-auth-ui/react';
+export type { NewDeviceEmailProps } from '@better-auth-ui/react';
 export declare function NewDeviceEmail({ colors, classNames, ...props }: NewDeviceEmailProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,23 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { NewDeviceEmail as NewDeviceEmailPrimitive } from "@better-auth-ui/react";
-import { cn } from "@heroui/react";
-export function NewDeviceEmail({ colors, classNames, ...props }) {
-    return (_jsx(NewDeviceEmailPrimitive, { colors: {
-            light: {
-                background: "#F5F5F5",
-                primary: "#0285F7",
-                primaryForeground: "#FCFCFC",
-                ...colors?.light
-            },
-            dark: {
-                background: "#060607",
-                primary: "#0584F6",
-                primaryForeground: "#FCFCFC",
-                ...colors?.dark
-            }
-        }, classNames: {
-            ...classNames,
-            card: cn("border-none rounded-3xl", classNames?.card),
-            button: cn("rounded-full", classNames?.button)
-        }, ...props }));
+import { NewDeviceEmail as e } from "@better-auth-ui/react";
+import { cn as t } from "@heroui/react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/email/new-device-email.tsx
+function r({ colors: r, classNames: i, ...a }) {
+	return /* @__PURE__ */ n(e, {
+		colors: {
+			light: {
+				background: "#F5F5F5",
+				primary: "#0285F7",
+				primaryForeground: "#FCFCFC",
+				...r?.light
+			},
+			dark: {
+				background: "#060607",
+				primary: "#0584F6",
+				primaryForeground: "#FCFCFC",
+				...r?.dark
+			}
+		},
+		classNames: {
+			...i,
+			card: t("border-none rounded-3xl", i?.card),
+			button: t("rounded-full", i?.button)
+		},
+		...a
+	});
 }
+//#endregion
+export { r as NewDeviceEmail };

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

@@ -1,3 +1,3 @@
-import { type OtpEmailProps } from "@better-auth-ui/react";
-export type { OtpEmailProps } from "@better-auth-ui/react";
+import { OtpEmailProps } from '@better-auth-ui/react';
+export type { OtpEmailProps } from '@better-auth-ui/react';
 export declare function OtpEmail({ colors, classNames, ...props }: OtpEmailProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,22 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { OtpEmail as OtpEmailPrimitive } from "@better-auth-ui/react";
-import { cn } from "@heroui/react";
-export function OtpEmail({ colors, classNames, ...props }) {
-    return (_jsx(OtpEmailPrimitive, { colors: {
-            light: {
-                background: "#F5F5F5",
-                primary: "#0285F7",
-                primaryForeground: "#FCFCFC",
-                ...colors?.light
-            },
-            dark: {
-                background: "#060607",
-                primary: "#0584F6",
-                primaryForeground: "#FCFCFC",
-                ...colors?.dark
-            }
-        }, classNames: {
-            ...classNames,
-            card: cn("border-none rounded-3xl", classNames?.card)
-        }, ...props }));
+import { OtpEmail as e } from "@better-auth-ui/react";
+import { cn as t } from "@heroui/react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/email/otp-email.tsx
+function r({ colors: r, classNames: i, ...a }) {
+	return /* @__PURE__ */ n(e, {
+		colors: {
+			light: {
+				background: "#F5F5F5",
+				primary: "#0285F7",
+				primaryForeground: "#FCFCFC",
+				...r?.light
+			},
+			dark: {
+				background: "#060607",
+				primary: "#0584F6",
+				primaryForeground: "#FCFCFC",
+				...r?.dark
+			}
+		},
+		classNames: {
+			...i,
+			card: t("border-none rounded-3xl", i?.card)
+		},
+		...a
+	});
 }
+//#endregion
+export { r as OtpEmail };

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

@@ -1,3 +1,3 @@
-import { type PasswordChangedEmailProps } from "@better-auth-ui/react";
-export type { PasswordChangedEmailProps } from "@better-auth-ui/react";
+import { PasswordChangedEmailProps } from '@better-auth-ui/react';
+export type { PasswordChangedEmailProps } from '@better-auth-ui/react';
 export declare function PasswordChangedEmail({ colors, classNames, ...props }: PasswordChangedEmailProps): import("react/jsx-runtime").JSX.Element;