@better-auth-ui/heroui 1.6.21 → 1.6.23

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { a as e, i as t, n, r, t as i } from "./user-view--47tVtJ3.js";
 import { authMutationKeys as a, authQueryKeys as o, fileToBase64 as s, getProviderName as c, parseAdditionalFieldValue as l, resolveInputType as u } from "@better-auth-ui/core";
-import { AuthProvider as d, providerIcons as f, useAccountInfo as p, useAuth as m, useAuthenticate as h, useChangeEmail as g, useChangePassword as _, useFetchOptions as v, useLinkSocial as y, useListAccounts as b, useListSessions as x, useRequestPasswordReset as S, useResetPassword as ee, useRevokeSession as te, useSendVerificationEmail as ne, useSession as C, useSignInEmail as re, useSignOut as w, useSignUpEmail as ie, useUnlinkAccount as ae, useUpdateUser as T } from "@better-auth-ui/react";
+import { AuthProvider as d, providerIcons as f, useAccountInfo as p, useAuth as m, useAuthenticate as h, useChangeEmail as g, useChangePassword as _, useFetchOptions as v, useLinkSocial as y, useListAccounts as ee, useListSessions as b, useRequestPasswordReset as x, useResetPassword as S, useRevokeSession as te, useSendVerificationEmail as ne, useSession as C, useSignInEmail as re, useSignOut as w, useSignUpEmail as ie, useUnlinkAccount as ae, useUpdateUser as T } from "@better-auth-ui/react";
 import { ArrowRightFromSquare as oe, ArrowRightToSquare as E, Check as se, ChevronsExpandVertical as ce, CloudArrowUpIn as le, Copy as ue, Display as de, Eye as D, EyeSlash as O, Gear as fe, Link as pe, LinkSlash as me, Person as he, PersonPlus as ge, PlugConnection as _e, Shield as ve, Smartphone as ye, TrashBin as be, Xmark as xe } from "@gravity-ui/icons";
 import { Button as k, Calendar as A, Card as j, Checkbox as M, Chip as Se, ComboBox as Ce, DateField as we, DatePicker as Te, Description as Ee, Dropdown as N, FieldError as P, Fieldset as F, Form as I, Input as L, InputGroup as R, Label as z, Link as B, ListBox as V, NumberField as H, RouterProvider as De, Select as U, Skeleton as W, Slider as Oe, Spinner as G, Switch as ke, Tabs as K, TextArea as Ae, TextField as q, TimeField as je, cn as J, toast as Y } from "@heroui/react";
 import { fromDate as Me, getLocalTimeZone as Ne, parseDate as Pe, parseDateTime as Fe, toCalendarDate as Ie, toCalendarDateTime as Le } from "@internationalized/date";
@@ -47,13 +47,16 @@ function Ye({ getValue: e, isDisabled: t }) {
 	});
 }
 function Xe({ name: e, field: t, isPending: n, variant: r }) {
-	let { localization: i } = m(), a = u(t), o = r === "transparent" ? "primary" : "secondary", s = Ve(null);
-	if (t.render) return /* @__PURE__ */ Q(Z, { children: t.render({
-		name: e,
-		field: t,
-		isPending: n,
-		variant: r
-	}) });
+	let { localization: i } = m(), a = u(t), o = r === "transparent" ? "primary" : "secondary";
+	if (t.render) {
+		let i = t.render;
+		return /* @__PURE__ */ Q(i, {
+			name: e,
+			field: t,
+			isPending: n,
+			variant: r
+		});
+	}
 	if (a === "hidden") return /* @__PURE__ */ Q("input", {
 		type: "hidden",
 		name: e,
@@ -220,8 +223,16 @@ function Xe({ name: e, field: t, isPending: n, variant: r }) {
 			] })
 		});
 	}
-	let c = t.prefix != null, l = t.suffix != null || t.copyable, d = t.type === "number", f = t.formatOptions?.maximumFractionDigits, p = d ? "number" : void 0, h = d ? f ? "decimal" : "numeric" : void 0, g = f ? 1 / 10 ** f : void 0;
-	return c || l ? /* @__PURE__ */ $(q, {
+	return /* @__PURE__ */ Q(Ze, {
+		name: e,
+		field: t,
+		isPending: n,
+		variant: r
+	});
+}
+function Ze({ name: e, field: t, isPending: n, variant: r }) {
+	let i = Ve(null), a = r === "transparent" ? "primary" : "secondary", o = t.prefix != null, s = t.suffix != null || t.copyable, c = t.type === "number", l = t.formatOptions?.maximumFractionDigits, u = c ? "number" : void 0, d = c ? l ? "decimal" : "numeric" : void 0, f = l ? 1 / 10 ** l : void 0;
+	return o || s ? /* @__PURE__ */ $(q, {
 		name: e,
 		defaultValue: t.defaultValue == null ? void 0 : String(t.defaultValue),
 		isDisabled: n,
@@ -229,21 +240,21 @@ function Xe({ name: e, field: t, isPending: n, variant: r }) {
 		children: [
 			/* @__PURE__ */ Q(z, { children: t.label }),
 			/* @__PURE__ */ $(R, {
-				variant: o,
+				variant: a,
 				children: [
-					c && /* @__PURE__ */ Q(R.Prefix, { children: t.prefix }),
+					o && /* @__PURE__ */ Q(R.Prefix, { children: t.prefix }),
 					/* @__PURE__ */ Q(R.Input, {
-						ref: s,
+						ref: i,
 						placeholder: t.placeholder,
 						required: t.required,
-						type: p,
-						inputMode: h,
-						step: g
+						type: u,
+						inputMode: d,
+						step: f
 					}),
 					t.copyable ? /* @__PURE__ */ Q(R.Suffix, {
 						className: "px-0",
 						children: /* @__PURE__ */ Q(Ye, {
-							getValue: () => s.current?.value,
+							getValue: () => i.current?.value,
 							isDisabled: n
 						})
 					}) : t.suffix != null && /* @__PURE__ */ Q(R.Suffix, { children: t.suffix })
@@ -261,10 +272,10 @@ function Xe({ name: e, field: t, isPending: n, variant: r }) {
 			/* @__PURE__ */ Q(L, {
 				placeholder: t.placeholder,
 				required: t.required,
-				variant: o,
-				type: p,
-				inputMode: h,
-				step: g
+				variant: a,
+				type: u,
+				inputMode: d,
+				step: f
 			}),
 			/* @__PURE__ */ Q(P, {})
 		]
@@ -272,8 +283,8 @@ function Xe({ name: e, field: t, isPending: n, variant: r }) {
 }
 //#endregion
 //#region src/components/auth/forgot-password.tsx
-function Ze({ className: e, variant: t }) {
-	let { authClient: n, baseURL: r, basePaths: i, localization: a, viewPaths: o, navigate: s, plugins: c } = m(), { fetchOptions: l, resetFetchOptions: u } = v(), { mutate: d, isPending: f } = S(n, {
+function Qe({ className: e, variant: t }) {
+	let { authClient: n, baseURL: r, basePaths: i, localization: a, viewPaths: o, navigate: s, plugins: c } = m(), { fetchOptions: l, resetFetchOptions: u } = v(), { mutate: d, isPending: f } = x(n, {
 		onError: () => {
 			u();
 		},
@@ -361,8 +372,8 @@ function Ze({ className: e, variant: t }) {
 }
 //#endregion
 //#region src/components/auth/reset-password.tsx
-function Qe({ className: e, variant: t }) {
-	let { authClient: n, basePaths: r, emailAndPassword: i, localization: a, viewPaths: o, navigate: s } = m(), { mutate: c, isPending: l } = ee(n, { onSuccess: () => {
+function $e({ className: e, variant: t }) {
+	let { authClient: n, basePaths: r, emailAndPassword: i, localization: a, viewPaths: o, navigate: s } = m(), { mutate: c, isPending: l } = S(n, { onSuccess: () => {
 		Y.success(a.auth.passwordResetSuccess), s({ to: `${r.auth}/${o.auth.signIn}` });
 	} }), [u, d] = X(!1), [f, p] = X(!1);
 	ze(() => {
@@ -513,16 +524,16 @@ function Qe({ className: e, variant: t }) {
 }
 //#endregion
 //#region src/components/auth/sign-in.tsx
-function $e({ className: t, socialLayout: n, socialPosition: i = "bottom", variant: o }) {
-	let { authClient: s, basePaths: c, baseURL: l, emailAndPassword: u, localization: d, plugins: f, redirectTo: p, socialProviders: h, viewPaths: g, navigate: _ } = m(), { fetchOptions: y, resetFetchOptions: b } = v(), [x, S] = X(""), { mutate: ee } = ne(s, { onSuccess: () => Y.success(d.auth.verificationEmailSent) }), { mutate: te, isPending: C } = re(s, {
+function et({ className: t, socialLayout: n, socialPosition: i = "bottom", variant: o }) {
+	let { authClient: s, basePaths: c, baseURL: l, emailAndPassword: u, localization: d, plugins: f, redirectTo: p, socialProviders: h, viewPaths: g, navigate: _ } = m(), { fetchOptions: y, resetFetchOptions: ee } = v(), [b, x] = X(""), { mutate: S } = ne(s, { onSuccess: () => Y.success(d.auth.verificationEmailSent) }), { mutate: te, isPending: C } = re(s, {
 		onError: (e, { email: t }) => {
-			S(""), e.error?.code === "EMAIL_NOT_VERIFIED" && Y.danger(e.error?.message || e.message, { actionProps: {
+			x(""), e.error?.code === "EMAIL_NOT_VERIFIED" && Y.danger(e.error?.message || e.message, { actionProps: {
 				children: d.auth.resend,
-				onClick: () => ee({
+				onClick: () => S({
 					email: t,
 					callbackURL: `${l}${p}`
 				})
-			} }), b();
+			} }), ee();
 		},
 		onSuccess: () => _({ to: p })
 	}), w = (e) => {
@@ -530,7 +541,7 @@ function $e({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 		let t = new FormData(e.currentTarget), n = t.get("email"), r = t.get("rememberMe") === "on";
 		te({
 			email: n,
-			password: x,
+			password: b,
 			...u?.rememberMe ? { rememberMe: r } : {},
 			fetchOptions: y
 		});
@@ -577,8 +588,8 @@ function $e({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 								type: "password",
 								autoComplete: "current-password",
 								isDisabled: ie,
-								value: x,
-								onChange: S,
+								value: b,
+								onChange: x,
 								validate: (e) => {
 									if (!e) return d.auth.fieldRequired;
 									let t = u?.minPasswordLength, n = u?.maxPasswordLength;
@@ -646,7 +657,7 @@ function $e({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 }
 //#endregion
 //#region src/components/auth/sign-out.tsx
-function et({ className: e }) {
+function tt({ className: e }) {
 	let { authClient: t, basePaths: n, navigate: r, viewPaths: i } = m(), { mutate: a } = w(t, {
 		onError: () => {
 			r({
@@ -668,10 +679,10 @@ function et({ className: e }) {
 }
 //#endregion
 //#region src/components/auth/sign-up.tsx
-function tt({ className: t, socialLayout: n, socialPosition: i = "bottom", variant: o }) {
-	let { additionalFields: s, authClient: c, basePaths: u, emailAndPassword: d, localization: f, plugins: p, redirectTo: h, socialProviders: g, viewPaths: _, navigate: y } = m(), { fetchOptions: b, resetFetchOptions: x } = v(), [S, ee] = X(""), [te, ne] = X(""), { mutate: C, isPending: re } = ie(c, {
+function nt({ className: t, socialLayout: n, socialPosition: i = "bottom", variant: o }) {
+	let { additionalFields: s, authClient: c, basePaths: u, emailAndPassword: d, localization: f, plugins: p, redirectTo: h, socialProviders: g, viewPaths: _, navigate: y } = m(), { fetchOptions: ee, resetFetchOptions: b } = v(), [x, S] = X(""), [te, ne] = X(""), { mutate: C, isPending: re } = ie(c, {
 		onError: () => {
-			ee(""), ne(""), x();
+			S(""), ne(""), b();
 		},
 		onSuccess: () => {
 			d?.requireEmailVerification ? (Y.success(f.auth.verifyYourEmail), y({ to: `${u.auth}/${_.auth.signIn}` })) : y({ to: h });
@@ -679,8 +690,8 @@ function tt({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 	}), [w, ae] = X(!1), [T, oe] = X(!1), E = We({ mutationKey: a.signIn.all }) + We({ mutationKey: a.signUp.all }) > 0, se = p.find((e) => e.captchaComponent)?.captchaComponent, ce = async (e) => {
 		e.preventDefault();
 		let t = new FormData(e.currentTarget), n = t.get("name") ?? "", r = t.get("email");
-		if (d?.confirmPassword && S !== te) {
-			Y.danger(f.auth.passwordsDoNotMatch), ee(""), ne("");
+		if (d?.confirmPassword && x !== te) {
+			Y.danger(f.auth.passwordsDoNotMatch), S(""), ne("");
 			return;
 		}
 		let i = {};
@@ -698,9 +709,9 @@ function tt({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 		C({
 			name: n,
 			email: r,
-			password: S,
+			password: x,
 			...i,
-			fetchOptions: b
+			fetchOptions: ee
 		});
 	}, le = d?.enabled && !!g?.length;
 	return /* @__PURE__ */ $(j, {
@@ -768,8 +779,8 @@ function tt({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 								name: "password",
 								autoComplete: "new-password",
 								isDisabled: E,
-								value: S,
-								onChange: ee,
+								value: x,
+								onChange: S,
 								validate: (e) => {
 									if (!e) return f.auth.fieldRequired;
 									let t = d?.minPasswordLength, n = d?.maxPasswordLength;
@@ -887,21 +898,21 @@ function tt({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 }
 //#endregion
 //#region src/components/auth/auth.tsx
-var nt = [
+var rt = [
 	"signUp",
 	"forgotPassword",
 	"resetPassword"
-], rt = {
-	signIn: $e,
-	signOut: et,
-	signUp: tt,
-	forgotPassword: Ze,
-	resetPassword: Qe
+], it = {
+	signIn: et,
+	signOut: tt,
+	signUp: nt,
+	forgotPassword: Qe,
+	resetPassword: $e
 };
-function it({ className: e, path: t, socialLayout: n, socialPosition: r, variant: i, view: a }) {
+function at({ className: e, path: t, socialLayout: n, socialPosition: r, variant: i, view: a }) {
 	let { basePaths: o, emailAndPassword: s, plugins: c, viewPaths: l, navigate: u } = m();
 	if (!a && !t) throw Error("[Better Auth UI] Either `view` or `path` must be provided");
-	let d = a || Object.keys(l.auth).find((e) => l.auth[e] === t), f = !s?.enabled && d && nt.includes(d);
+	let d = a || Object.keys(l.auth).find((e) => l.auth[e] === t), f = !s?.enabled && d && rt.includes(d);
 	if (ze(() => {
 		f && u({
 			to: `${o.auth}/${l.auth.signIn}`,
@@ -933,8 +944,8 @@ function it({ className: e, path: t, socialLayout: n, socialPosition: r, variant
 			variant: i
 		});
 	}
-	let p = d ? rt[d] : void 0;
-	if (!p) throw Error(`[Better Auth UI] Unknown view "${d}". Valid views are: ${Object.keys(rt).join(", ")}`);
+	let p = d ? it[d] : void 0;
+	if (!p) throw Error(`[Better Auth UI] Unknown view "${d}". Valid views are: ${Object.keys(it).join(", ")}`);
 	return /* @__PURE__ */ Q(p, {
 		className: e,
 		socialLayout: n,
@@ -944,7 +955,7 @@ function it({ className: e, path: t, socialLayout: n, socialPosition: r, variant
 }
 //#endregion
 //#region src/components/auth/error-toaster.tsx
-function at() {
+function ot() {
 	let e = Ge();
 	return ze(() => {
 		let t = e.getQueryCache(), n = t.config.onError;
@@ -965,19 +976,19 @@ function at() {
 }
 //#endregion
 //#region src/components/auth/auth-provider.tsx
-function ot({ children: e, navigate: t, ...n }) {
+function st({ children: e, navigate: t, ...n }) {
 	return /* @__PURE__ */ Q(d, {
 		navigate: t,
 		...n,
 		children: /* @__PURE__ */ $(De, {
 			navigate: (e) => t({ to: e }),
-			children: [e, /* @__PURE__ */ Q(at, {})]
+			children: [e, /* @__PURE__ */ Q(ot, {})]
 		})
 	});
 }
 //#endregion
 //#region src/components/auth/settings/account/change-email.tsx
-function st({ className: e, variant: t, ...n }) {
+function ct({ className: e, variant: t, ...n }) {
 	let { authClient: r, localization: i, baseURL: a, viewPaths: o } = m(), { data: s } = C(r), { mutate: c, isPending: l } = g(r, { onSuccess: () => Y.success(i.settings.changeEmailSuccess) });
 	function u(e) {
 		e.preventDefault(), c({
@@ -1027,7 +1038,7 @@ function st({ className: e, variant: t, ...n }) {
 }
 //#endregion
 //#region src/components/auth/settings/account/change-avatar.tsx
-function ct({ className: e }) {
+function lt({ className: e }) {
 	let { authClient: t, localization: r, avatar: i } = m(), { data: a } = C(t), { mutate: o, isPending: c } = T(t), l = Ve(null), [u, d] = X(!1), [f, p] = X(!1), h = c || u || f;
 	async function g(e) {
 		let t = e.target.files?.[0];
@@ -1108,7 +1119,7 @@ function ct({ className: e }) {
 }
 //#endregion
 //#region src/components/auth/settings/account/user-profile.tsx
-function lt({ className: e, variant: t, ...n }) {
+function ut({ className: e, variant: t, ...n }) {
 	let { additionalFields: r, authClient: i, localization: a } = m(), { data: o } = C(i), { mutate: s, isPending: c } = T(i, { onSuccess: () => Y.success(a.settings.profileUpdatedSuccess) });
 	async function u(e) {
 		e.preventDefault();
@@ -1140,7 +1151,7 @@ function lt({ className: e, variant: t, ...n }) {
 			onSubmit: u,
 			className: "flex flex-col gap-4",
 			children: [
-				/* @__PURE__ */ Q(ct, {}),
+				/* @__PURE__ */ Q(lt, {}),
 				/* @__PURE__ */ $(q, {
 					name: "name",
 					defaultValue: o?.user.name,
@@ -1187,21 +1198,21 @@ function lt({ className: e, variant: t, ...n }) {
 }
 //#endregion
 //#region src/components/auth/settings/account/account-settings.tsx
-function ut({ className: e, variant: t, ...n }) {
+function dt({ className: e, variant: t, ...n }) {
 	let { emailAndPassword: r, plugins: i } = m(), a = i.some((e) => e.id === "magicLink");
 	return /* @__PURE__ */ $("div", {
 		className: J("flex w-full flex-col gap-4 md:gap-6", e),
 		...n,
 		children: [
-			/* @__PURE__ */ Q(lt, { variant: t }),
-			(r?.enabled || a) && /* @__PURE__ */ Q(st, { variant: t }),
+			/* @__PURE__ */ Q(ut, { variant: t }),
+			(r?.enabled || a) && /* @__PURE__ */ Q(ct, { variant: t }),
 			i.flatMap((e) => e.accountCards?.map((n, r) => /* @__PURE__ */ Q(n, { variant: t }, `${e.id}-${r.toString()}`)))
 		]
 	});
 }
 //#endregion
 //#region src/components/auth/settings/security/active-session.tsx
-function dt(e) {
+function ft(e) {
 	let t = Math.floor((Date.now() - e.getTime()) / 1e3), n = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
 	for (let [e, r] of [
 		["year", 31536e3],
@@ -1214,7 +1225,7 @@ function dt(e) {
 	]) if (t >= r) return n.format(-Math.floor(t / r), e);
 	return n.format(0, "second");
 }
-function ft({ activeSession: e }) {
+function pt({ activeSession: e }) {
 	let { authClient: t, basePaths: n, localization: r, viewPaths: i, navigate: a } = m(), { data: o } = C(t, { refetchOnMount: !1 }), { mutate: s, isPending: c } = te(t, { onSuccess: () => Y.success(r.settings.revokeSessionSuccess) }), l = e.token === o?.session.token, u = Ke.parse(e.userAgent || "");
 	return /* @__PURE__ */ $("div", {
 		className: "flex items-center gap-3",
@@ -1234,7 +1245,7 @@ function ft({ activeSession: e }) {
 					children: r.settings.currentSession
 				}) : e.createdAt && /* @__PURE__ */ Q("span", {
 					className: "text-xs text-muted capitalize",
-					children: dt(e.createdAt)
+					children: ft(e.createdAt)
 				})]
 			}),
 			/* @__PURE__ */ $(k, {
@@ -1254,8 +1265,8 @@ function ft({ activeSession: e }) {
 }
 //#endregion
 //#region src/components/auth/settings/security/active-sessions.tsx
-function pt({ className: e, variant: t, ...n }) {
-	let { authClient: r, localization: i } = m(), { data: a } = C(r), { data: o, isPending: s } = x(r), c = o && [...o].sort((e, t) => e.id === a?.session.id ? -1 : +(t.id === a?.session.id));
+function mt({ className: e, variant: t, ...n }) {
+	let { authClient: r, localization: i } = m(), { data: a } = C(r), { data: o, isPending: s } = b(r), c = o && [...o].sort((e, t) => e.id === a?.session.id ? -1 : +(t.id === a?.session.id));
 	return /* @__PURE__ */ $("div", { children: [/* @__PURE__ */ Q("h2", {
 		className: J("text-sm font-semibold mb-3"),
 		children: i.settings.activeSessions
@@ -1265,11 +1276,11 @@ function pt({ className: e, variant: t, ...n }) {
 		...n,
 		children: /* @__PURE__ */ Q(j.Content, {
 			className: "gap-0",
-			children: s ? /* @__PURE__ */ Q(mt, {}) : c?.map((e, t) => /* @__PURE__ */ $("div", { children: [t > 0 && /* @__PURE__ */ Q("div", { className: "border-b border-dashed -mx-4 my-4" }), /* @__PURE__ */ Q(ft, { activeSession: e })] }, e.id))
+			children: s ? /* @__PURE__ */ Q(ht, {}) : c?.map((e, t) => /* @__PURE__ */ $("div", { children: [t > 0 && /* @__PURE__ */ Q("div", { className: "border-b border-dashed -mx-4 my-4" }), /* @__PURE__ */ Q(pt, { activeSession: e })] }, e.id))
 		})
 	})] });
 }
-function mt() {
+function ht() {
 	return /* @__PURE__ */ Q("div", {
 		className: "flex items-center justify-between",
 		children: /* @__PURE__ */ $("div", {
@@ -1283,13 +1294,13 @@ function mt() {
 }
 //#endregion
 //#region src/components/auth/settings/security/change-password.tsx
-function ht({ className: e, variant: t, ...n }) {
-	let { authClient: r, emailAndPassword: i, localization: a } = m(), { data: o } = C(r), { data: s, isPending: c } = b(r), l = s?.some((e) => e.providerId === "credential");
-	return !c && !l ? /* @__PURE__ */ Q(gt, {
+function gt({ className: e, variant: t, ...n }) {
+	let { authClient: r, emailAndPassword: i, localization: a } = m(), { data: o } = C(r), { data: s, isPending: c } = ee(r), l = s?.some((e) => e.providerId === "credential");
+	return !c && !l ? /* @__PURE__ */ Q(_t, {
 		className: e,
 		variant: t,
 		...n
-	}) : /* @__PURE__ */ Q(_t, {
+	}) : /* @__PURE__ */ Q(vt, {
 		className: e,
 		variant: t,
 		emailAndPassword: i,
@@ -1298,8 +1309,8 @@ function ht({ className: e, variant: t, ...n }) {
 		...n
 	});
 }
-function gt({ className: e, variant: t, ...n }) {
-	let { authClient: r, localization: i, plugins: a } = m(), { data: o } = C(r), { fetchOptions: s, resetFetchOptions: c } = v(), { mutate: l, isPending: u } = S(r, {
+function _t({ className: e, variant: t, ...n }) {
+	let { authClient: r, localization: i, plugins: a } = m(), { data: o } = C(r), { fetchOptions: s, resetFetchOptions: c } = v(), { mutate: l, isPending: u } = x(r, {
 		onError: () => {
 			c();
 		},
@@ -1341,7 +1352,7 @@ function gt({ className: e, variant: t, ...n }) {
 		})
 	})] });
 }
-function _t({ className: e, variant: t, emailAndPassword: n, localization: r, session: i, ...a }) {
+function vt({ className: e, variant: t, emailAndPassword: n, localization: r, session: i, ...a }) {
 	let { authClient: o } = m(), [s, c] = X(""), [l, u] = X(""), [d, f] = X(""), { mutate: p, isPending: h } = _(o, {
 		onError: () => {
 			c(""), u(""), f("");
@@ -1349,7 +1360,7 @@ function _t({ className: e, variant: t, emailAndPassword: n, localization: r, se
 		onSuccess: () => {
 			c(""), u(""), f(""), Y.success(r.settings.changePasswordSuccess);
 		}
-	}), [g, v] = X(!1), [y, b] = X(!1), x = (e) => {
+	}), [g, v] = X(!1), [y, ee] = X(!1), b = (e) => {
 		if (e.preventDefault(), n?.confirmPassword && l !== d) {
 			c(""), u(""), f(""), Y.danger(r.auth.passwordsDoNotMatch);
 			return;
@@ -1368,7 +1379,7 @@ function _t({ className: e, variant: t, emailAndPassword: n, localization: r, se
 		variant: t,
 		...a,
 		children: /* @__PURE__ */ Q(j.Content, { children: /* @__PURE__ */ Q(I, {
-			onSubmit: x,
+			onSubmit: b,
 			children: /* @__PURE__ */ $(F, {
 				className: "w-full gap-4",
 				children: [/* @__PURE__ */ $(F.Group, { children: [
@@ -1451,7 +1462,7 @@ function _t({ className: e, variant: t, emailAndPassword: n, localization: r, se
 										"aria-label": y ? r.auth.hidePassword : r.auth.showPassword,
 										size: "sm",
 										variant: "ghost",
-										onPress: () => b(!y),
+										onPress: () => ee(!y),
 										isDisabled: h,
 										children: Q(y ? O : D, {})
 									})
@@ -1477,7 +1488,7 @@ function _t({ className: e, variant: t, emailAndPassword: n, localization: r, se
 }
 //#endregion
 //#region src/components/auth/settings/security/linked-account.tsx
-function vt({ account: e, provider: t }) {
+function yt({ account: e, provider: t }) {
 	let { authClient: n, baseURL: r, localization: i } = m(), { data: a, isPending: o } = p(n, { query: { accountId: e?.accountId } }), { mutate: s, isPending: l } = y(n), { mutate: u, isPending: d } = ae(n, { onSuccess: () => Y.success(i.settings.accountUnlinked) }), h = f[t], g = c(t), _ = a?.data?.login || a?.data?.username || a?.user?.email || a?.user?.name || e?.accountId;
 	return /* @__PURE__ */ $("div", {
 		className: "flex items-center gap-3",
@@ -1527,8 +1538,8 @@ function vt({ account: e, provider: t }) {
 }
 //#endregion
 //#region src/components/auth/settings/security/linked-accounts.tsx
-function yt({ className: e, variant: t, ...n }) {
-	let { authClient: r, localization: i, multipleAccountsPerProvider: a, socialProviders: o } = m(), { data: s, isPending: c } = b(r), l = s?.filter((e) => e.providerId !== "credential"), u = new Set(l?.map((e) => e.providerId)), d = a === !1 ? o?.filter((e) => !u.has(e)) : o, f = [...l?.map((e) => ({
+function bt({ className: e, variant: t, ...n }) {
+	let { authClient: r, localization: i, multipleAccountsPerProvider: a, socialProviders: o } = m(), { data: s, isPending: c } = ee(r), l = s?.filter((e) => e.providerId !== "credential"), u = new Set(l?.map((e) => e.providerId)), d = a === !1 ? o?.filter((e) => !u.has(e)) : o, f = [...l?.map((e) => ({
 		key: e.id,
 		account: e,
 		provider: e.providerId
@@ -1546,14 +1557,14 @@ function yt({ className: e, variant: t, ...n }) {
 		...n,
 		children: /* @__PURE__ */ Q(j.Content, {
 			className: "gap-0",
-			children: c ? o?.map((e, t) => /* @__PURE__ */ $("div", { children: [t > 0 && /* @__PURE__ */ Q("div", { className: "border-b border-dashed -mx-4 my-4" }), /* @__PURE__ */ Q(bt, {})] }, e)) : f.map((e, t) => /* @__PURE__ */ $("div", { children: [t > 0 && /* @__PURE__ */ Q("div", { className: "border-b border-dashed -mx-4 my-4" }), /* @__PURE__ */ Q(vt, {
+			children: c ? o?.map((e, t) => /* @__PURE__ */ $("div", { children: [t > 0 && /* @__PURE__ */ Q("div", { className: "border-b border-dashed -mx-4 my-4" }), /* @__PURE__ */ Q(xt, {})] }, e)) : f.map((e, t) => /* @__PURE__ */ $("div", { children: [t > 0 && /* @__PURE__ */ Q("div", { className: "border-b border-dashed -mx-4 my-4" }), /* @__PURE__ */ Q(yt, {
 				account: e.account,
 				provider: e.provider
 			})] }, e.key))
 		})
 	})] });
 }
-function bt() {
+function xt() {
 	return /* @__PURE__ */ Q("div", {
 		className: "flex items-center justify-between",
 		children: /* @__PURE__ */ $("div", {
@@ -1567,22 +1578,22 @@ function bt() {
 }
 //#endregion
 //#region src/components/auth/settings/security/security-settings.tsx
-function xt({ className: e, variant: t, ...n }) {
+function St({ className: e, variant: t, ...n }) {
 	let { emailAndPassword: r, plugins: i, socialProviders: a } = m();
 	return /* @__PURE__ */ $("div", {
 		className: J("flex w-full flex-col gap-4 md:gap-6", e),
 		...n,
 		children: [
-			r?.enabled && /* @__PURE__ */ Q(ht, { variant: t }),
-			!!a?.length && /* @__PURE__ */ Q(yt, { variant: t }),
-			/* @__PURE__ */ Q(pt, { variant: t }),
+			r?.enabled && /* @__PURE__ */ Q(gt, { variant: t }),
+			!!a?.length && /* @__PURE__ */ Q(bt, { variant: t }),
+			/* @__PURE__ */ Q(mt, { variant: t }),
 			i.flatMap((e) => e.securityCards?.map((n, r) => /* @__PURE__ */ Q(n, { variant: t }, `${e.id}-${r.toString()}`)))
 		]
 	});
 }
 //#endregion
 //#region src/components/auth/settings/settings.tsx
-function St({ className: e, hideNav: t, path: n, variant: r, view: i, ...a }) {
+function Ct({ className: e, hideNav: t, path: n, variant: r, view: i, ...a }) {
 	if (!i && !n) throw Error("[Better Auth UI] Either `view` or `path` must be provided");
 	let { authClient: o, basePaths: s, localization: c, viewPaths: l, plugins: u } = m();
 	h(o);
@@ -1652,12 +1663,12 @@ function St({ className: e, hideNav: t, path: n, variant: r, view: i, ...a }) {
 			/* @__PURE__ */ Q(K.Panel, {
 				id: "account",
 				className: "px-0",
-				children: /* @__PURE__ */ Q(ut, { variant: r })
+				children: /* @__PURE__ */ Q(dt, { variant: r })
 			}),
 			/* @__PURE__ */ Q(K.Panel, {
 				id: "security",
 				className: "px-0",
-				children: /* @__PURE__ */ Q(xt, { variant: r })
+				children: /* @__PURE__ */ Q(St, { variant: r })
 			}),
 			u.flatMap((e) => e.settingsTabs?.map((t, n) => /* @__PURE__ */ Q(K.Panel, {
 				id: t.view,
@@ -1669,7 +1680,7 @@ function St({ className: e, hideNav: t, path: n, variant: r, view: i, ...a }) {
 }
 //#endregion
 //#region src/components/auth/user/user-button.tsx
-function Ct(e, t) {
+function wt(e, t) {
 	if (Re(e)) return e;
 	let { label: n, href: r, icon: i, variant: a } = e;
 	return /* @__PURE__ */ $(N.Item, {
@@ -1679,13 +1690,13 @@ function Ct(e, t) {
 		children: [i, /* @__PURE__ */ Q(z, { children: n })]
 	}, t);
 }
-function wt({ className: e, placement: t, size: r = "default", variant: a = "ghost", links: o, hideSettings: s, hideSubtitle: c }) {
+function Tt({ className: e, placement: t, size: r = "default", variant: a = "ghost", links: o, hideSettings: s, hideSubtitle: c }) {
 	let { authClient: l, basePaths: u, viewPaths: d, localization: f, plugins: p } = m(), { data: h, isPending: g } = C(l), _ = p.flatMap((e) => e.userMenuItems?.map((t, n) => /* @__PURE__ */ Q(t, { hideSubtitle: c }, `${e.id}-${n.toString()}`)) ?? []), v = o?.flatMap((e, t) => {
 		if (!Re(e)) {
 			let t = e.visibility ?? "always";
 			if (t === "authenticated" && !h || t === "unauthenticated" && h) return [];
 		}
-		return [Ct(e, `user-button-link-${t.toString()}`)];
+		return [wt(e, `user-button-link-${t.toString()}`)];
 	});
 	return /* @__PURE__ */ $(N, { children: [r === "icon" ? /* @__PURE__ */ Q(N.Trigger, {
 		className: J("rounded-full"),
@@ -1737,4 +1748,4 @@ function wt({ className: e, placement: t, size: r = "default", variant: a = "gho
 	})] });
 }
 //#endregion
-export { ut as AccountSettings, pt as ActiveSessions, Xe as AdditionalField, it as Auth, ot as AuthProvider, st as ChangeEmail, ht as ChangePassword, Ze as ForgotPassword, yt as LinkedAccounts, t as ProviderButton, r as ProviderButtons, Qe as ResetPassword, xt as SecuritySettings, St as Settings, $e as SignIn, et as SignOut, tt as SignUp, n as UserAvatar, wt as UserButton, lt as UserProfile, i as UserView };
+export { dt as AccountSettings, mt as ActiveSessions, Xe as AdditionalField, at as Auth, st as AuthProvider, ct as ChangeEmail, gt as ChangePassword, Qe as ForgotPassword, bt as LinkedAccounts, t as ProviderButton, r as ProviderButtons, $e as ResetPassword, St as SecuritySettings, Ct as Settings, et as SignIn, tt as SignOut, nt as SignUp, n as UserAvatar, Tt as UserButton, ut as UserProfile, i as UserView };

package/dist/plugins.js

@@ -731,17 +731,17 @@ function Vt({ value: e, onChange: t, currentSlug: n, variant: r, ...i }) {
 //#endregion
 //#region src/components/auth/organization/create-organization-dialog.tsx
 function Ht({ isOpen: e, onOpenChange: t }) {
-	let { authClient: n, localization: r } = p(), { localization: i } = m($), [a, o] = q(""), [s, c] = q(""), { mutate: l, isPending: u } = y(n, { onSuccess: () => t(!1) });
+	let { authClient: n, localization: r } = p(), { localization: i } = m($), [a, o] = q(""), [s, c] = q(""), [l, u] = q(!1), { mutate: d, isPending: f } = y(n, { onSuccess: () => t(!1) });
 	return at(() => {
-		e || (c(""), o(""));
+		e || (c(""), o(""), u(!1));
 	}, [e]), at(() => {
-		c(Bt(a));
-	}, [a]), /* @__PURE__ */ Y(O.Backdrop, {
+		l || c(Bt(a));
+	}, [a, l]), /* @__PURE__ */ Y(O.Backdrop, {
 		isOpen: e,
 		onOpenChange: t,
 		children: /* @__PURE__ */ Y(O.Container, { children: /* @__PURE__ */ Y(O.Dialog, { children: /* @__PURE__ */ X(P, {
 			onSubmit: (e) => {
-				e.preventDefault(), l({
+				e.preventDefault(), d({
 					name: a,
 					slug: s
 				});
@@ -762,7 +762,7 @@ function Ht({ isOpen: e, onOpenChange: t }) {
 						/* @__PURE__ */ X(W, {
 							id: "name",
 							name: "name",
-							isDisabled: u,
+							isDisabled: f,
 							value: a,
 							onChange: o,
 							validate: (e) => {
@@ -781,8 +781,10 @@ function Ht({ isOpen: e, onOpenChange: t }) {
 						}),
 						/* @__PURE__ */ Y(Vt, {
 							value: s,
-							onChange: c,
-							isDisabled: u,
+							onChange: (e) => {
+								c(e), u(!0);
+							},
+							isDisabled: f,
 							variant: "secondary"
 						})
 					]
@@ -790,12 +792,12 @@ function Ht({ isOpen: e, onOpenChange: t }) {
 				/* @__PURE__ */ X(O.Footer, { children: [/* @__PURE__ */ Y(k, {
 					slot: "close",
 					variant: "tertiary",
-					isDisabled: u,
+					isDisabled: f,
 					children: r.settings.cancel
 				}), /* @__PURE__ */ X(k, {
 					type: "submit",
-					isPending: u,
-					children: [u && /* @__PURE__ */ Y(V, {
+					isPending: f,
+					children: [f && /* @__PURE__ */ Y(V, {
 						color: "current",
 						size: "sm"
 					}), i.createOrganization]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.21",
+  "version": "1.6.23",
   "type": "module",
   "scripts": {
     "build": "vite build",

package/src/components/auth/additional-field.tsx

@@ -34,7 +34,7 @@ import {
   toCalendarDate,
   toCalendarDateTime
 } from "@internationalized/date"
-import { useRef, useState } from "react"
+import { type ComponentType, useRef, useState } from "react"
 
 import type { AdditionalFieldProps } from "../../lib/auth/auth-plugin"
 
@@ -128,12 +128,17 @@ export function AdditionalField({
   const { localization } = useAuth()
   const inputType = resolveInputType(field)
   const inputVariant = variant === "transparent" ? "primary" : "secondary"
-  // Used by `inputType: "input"` with `copyable: true` so the copy button
-  // reads the input's *live* value rather than a stale `defaultValue`.
-  const inputRef = useRef<HTMLInputElement>(null)
 
   if (field.render) {
-    return <>{field.render({ name, field, isPending, variant })}</>
+    const FieldRenderer = field.render as ComponentType<AdditionalFieldProps>
+    return (
+      <FieldRenderer
+        name={name}
+        field={field}
+        isPending={isPending}
+        variant={variant}
+      />
+    )
   }
 
   if (inputType === "hidden") {
@@ -471,13 +476,28 @@ export function AdditionalField({
     )
   }
 
-  // inputType === "input"
+  return (
+    <HeroInputField
+      name={name}
+      field={field}
+      isPending={isPending}
+      variant={variant}
+    />
+  )
+}
+
+function HeroInputField({
+  name,
+  field,
+  isPending,
+  variant
+}: AdditionalFieldProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const inputVariant = variant === "transparent" ? "primary" : "secondary"
+
   const hasPrefix = field.prefix != null
   const hasSuffix = field.suffix != null || field.copyable
 
-  // When `inputType: "input"` is paired with `type: "number"`, restrict the
-  // native input to numbers. `formatOptions.maximumFractionDigits` enables
-  // fractional input via `step`.
   const isNumeric = field.type === "number"
   const maxFractionDigits = field.formatOptions?.maximumFractionDigits
   const nativeInputType = isNumeric ? "number" : undefined

package/src/components/auth/organization/create-organization-dialog.tsx

@@ -43,6 +43,7 @@ export function CreateOrganizationDialog({
 
   const [name, setName] = useState("")
   const [slug, setSlug] = useState("")
+  const [slugEdited, setSlugEdited] = useState(false)
 
   const { mutate: createOrganization, isPending: isCreating } =
     useCreateOrganization(authClient as OrganizationAuthClient, {
@@ -58,12 +59,14 @@ export function CreateOrganizationDialog({
     if (!isOpen) {
       setSlug("")
       setName("")
+      setSlugEdited(false)
     }
   }, [isOpen])
 
   useEffect(() => {
+    if (slugEdited) return
     setSlug(sanitizeSlug(name))
-  }, [name])
+  }, [name, slugEdited])
 
   return (
     <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
@@ -111,7 +114,10 @@ export function CreateOrganizationDialog({
 
               <SlugField
                 value={slug}
-                onChange={setSlug}
+                onChange={(value) => {
+                  setSlug(value)
+                  setSlugEdited(true)
+                }}
                 isDisabled={isCreating}
                 variant="secondary"
               />