@better-auth-ui/heroui 1.6.24 → 1.6.26

package/dist/lib/auth/organization-plugin.d.ts

@@ -8,6 +8,7 @@ export declare const organizationPlugin: ((options?: OrganizationPluginOptions |
         component: typeof OrganizationsSettings;
     }[];
     slug: string | null | undefined;
+    slugPrefix: string;
     checkSlug: boolean;
     logo: {
         delete?: (url: string) => Promise<void>;

package/dist/lib/auth/username-plugin.d.ts

@@ -44,6 +44,7 @@ export declare const usernamePlugin: ((options?: UsernamePluginOptions | undefin
     };
     minUsernameLength: number;
     maxUsernameLength: number;
+    usernamePrefix: string;
     localization: {
         username: string;
         usernamePlaceholder: string;

package/dist/plugins.js

@@ -1,7 +1,7 @@
 "use client";
 import { a as e, r as t, t as n } from "./user-view--47tVtJ3.js";
 import { authMutationKeys as r, authQueryKeys as i, createAuthPlugin as a, fileToBase64 as o } from "@better-auth-ui/core";
-import { ThemePreviewDark as s, ThemePreviewLight as c, ThemePreviewSystem as l, useAcceptInvitation as u, useActiveOrganization as d, useAddPasskey as f, useAuth as p, useAuthPlugin as m, useAuthenticate as h, useCancelInvitation as g, useCheckSlug as _, useCreateApiKey as v, useCreateOrganization as y, useDeleteApiKey as b, useDeleteOrganization as x, useDeletePasskey as S, useDeleteUser as C, useFetchOptions as ee, useHasPermission as w, useInviteMember as te, useIsUsernameAvailable as ne, useLeaveOrganization as re, useListAccounts as ie, useListApiKeys as T, useListDeviceSessions as ae, useListOrganizationInvitations as oe, useListOrganizationMembers as se, useListOrganizations as ce, useListPasskeys as le, useListUserInvitations as ue, useRejectInvitation as de, useRemoveMember as fe, useRevokeMultiSession as pe, useSession as E, useSetActiveOrganization as me, useSetActiveSession as he, useSignInEmail as ge, useSignInMagicLink as _e, useSignInPasskey as ve, useSignInUsername as ye, useUpdateMemberRole as be, useUpdateOrganization as xe, useUser as Se } from "@better-auth-ui/react";
+import { ThemePreviewDark as s, ThemePreviewLight as c, ThemePreviewSystem as l, useAcceptInvitation as u, useActiveOrganization as d, useAddPasskey as f, useAuth as p, useAuthPlugin as m, useAuthenticate as h, useCancelInvitation as g, useCheckSlug as _, useCreateApiKey as v, useCreateOrganization as y, useDeleteApiKey as b, useDeleteOrganization as x, useDeletePasskey as S, useDeleteUser as C, useFetchOptions as ee, useHasPermission as w, useInviteMember as T, useIsUsernameAvailable as te, useLeaveOrganization as ne, useListAccounts as re, useListApiKeys as ie, useListDeviceSessions as ae, useListOrganizationInvitations as oe, useListOrganizationMembers as se, useListOrganizations as ce, useListPasskeys as le, useListUserInvitations as ue, useRejectInvitation as de, useRemoveMember as fe, useRevokeMultiSession as pe, useSession as E, useSetActiveOrganization as me, useSetActiveSession as he, useSignInEmail as ge, useSignInMagicLink as _e, useSignInPasskey as ve, useSignInUsername as ye, useUpdateMemberRole as be, useUpdateOrganization as xe, useUser as Se } from "@better-auth-ui/react";
 import { ArrowRightArrowLeft as Ce, ArrowRightFromSquare as we, Briefcase as Te, Check as Ee, ChevronsExpandVertical as De, CirclePlus as Oe, Clock as ke, CloudArrowUpIn as Ae, Copy as je, Display as Me, Ellipsis as Ne, Envelope as Pe, Fingerprint as Fe, Funnel as Ie, Gear as Le, Key as Re, Lock as ze, Moon as Be, Palette as Ve, PaperPlane as He, Pencil as Ue, Person as We, PersonPlus as Ge, Sun as Ke, TrashBin as qe, TriangleExclamation as Je, Xmark as D } from "@gravity-ui/icons";
 import { AlertDialog as O, Avatar as Ye, Button as k, Card as A, Checkbox as Xe, Chip as j, Description as Ze, Dropdown as M, EmptyState as Qe, FieldError as N, Form as P, Input as F, InputGroup as I, Label as L, Link as $e, ListBox as et, Radio as R, RadioGroup as tt, SearchField as z, Select as nt, Skeleton as B, Spinner as V, Table as H, Tabs as U, TextField as W, cn as G, toast as K, useIsHydrated as rt } from "@heroui/react";
 import { useEffect as it, useMemo as at, useRef as ot, useState as q } from "react";
@@ -300,7 +300,7 @@ function Tt({ isOpen: e, onOpenChange: t, organizationId: n }) {
 //#endregion
 //#region src/components/auth/api-key/api-keys.tsx
 function Et({ className: e, variant: t, organizationId: n, isPending: r, hideCreate: i, hideDelete: a }) {
-	let { authClient: o } = p(), { localization: s } = m(yt), { data: c, isPending: l } = T(o, {
+	let { authClient: o } = p(), { localization: s } = m(yt), { data: c, isPending: l } = ie(o, {
 		enabled: !r,
 		...n ? { query: {
 			organizationId: n,
@@ -351,7 +351,7 @@ var Dt = a(ut.id, (e = {}) => ({
 //#endregion
 //#region src/components/auth/delete-user/delete-account.tsx
 function Ot({ className: e, variant: t, ...n }) {
-	let { authClient: r, basePaths: a, localization: o, navigate: s, viewPaths: c } = p(), { localization: l, sendDeleteAccountVerification: u } = m(Dt), { data: d } = ie(r), f = st(), [h, g] = q(!1), [_, v] = q(""), y = d?.some((e) => e.providerId === "credential"), b = !u && y, { mutate: x, isPending: S } = C(r), ee = (e) => {
+	let { authClient: r, basePaths: a, localization: o, navigate: s, viewPaths: c } = p(), { localization: l, sendDeleteAccountVerification: u } = m(Dt), { data: d } = re(r), f = st(), [h, g] = q(!1), [_, v] = q(""), y = d?.some((e) => e.providerId === "credential"), b = !u && y, { mutate: x, isPending: S } = C(r), ee = (e) => {
 		g(e), v("");
 	}, w = async (e) => {
 		e.preventDefault(), x({ ...b ? { password: _ } : {} }, { onSuccess: () => {
@@ -686,18 +686,18 @@ function zt(e) {
 	return e.toLowerCase().replace(/[^a-z0-9]+/g, "-");
 }
 function Bt({ value: e, onChange: t, currentSlug: n, variant: r, ...i }) {
-	let { authClient: a, localization: o } = p(), { localization: s, checkSlug: c } = m($), { mutate: l, data: u, error: d, reset: f } = _(a), h = _t((e) => {
-		!c || !e.trim() || e.trim() === n || l({ slug: e.trim() });
+	let { authClient: a, localization: o } = p(), { localization: s, checkSlug: c, slugPrefix: l } = m($), { mutate: u, data: d, error: f, reset: h } = _(a), g = _t((e) => {
+		!c || !e.trim() || e.trim() === n || u({ slug: e.trim() });
 	}, { wait: 500 });
 	it(() => {
-		c && (f(), h.maybeExecute(e));
+		c && (h(), g.maybeExecute(e));
 	}, [
 		c,
 		e,
-		h.maybeExecute,
-		f
+		g.maybeExecute,
+		h
 	]);
-	let g = (e) => {
+	let v = (e) => {
 		t(zt(e));
 	};
 	return /* @__PURE__ */ X(W, {
@@ -705,7 +705,7 @@ function Bt({ value: e, onChange: t, currentSlug: n, variant: r, ...i }) {
 		name: "slug",
 		...i,
 		value: e,
-		onChange: g,
+		onChange: v,
 		validate: (e) => {
 			if (!e) return o.auth.fieldRequired;
 		},
@@ -713,16 +713,23 @@ function Bt({ value: e, onChange: t, currentSlug: n, variant: r, ...i }) {
 			/* @__PURE__ */ Y(L, { children: s.slug }),
 			/* @__PURE__ */ X(I, {
 				variant: r,
-				children: [/* @__PURE__ */ Y(I.Input, {
-					placeholder: s.slugPlaceholder,
-					required: !0
-				}), c && !!e.trim() && e.trim() !== n && /* @__PURE__ */ Y(I.Suffix, {
-					className: "px-2",
-					children: u?.status ? /* @__PURE__ */ Y(Ee, { className: "text-success" }) : d ? /* @__PURE__ */ Y(D, { className: "text-danger" }) : /* @__PURE__ */ Y(V, {
-						size: "sm",
-						color: "current"
+				children: [
+					l && /* @__PURE__ */ Y(I.Prefix, {
+						className: "pr-1.5 text-muted",
+						children: l
+					}),
+					/* @__PURE__ */ Y(I.Input, {
+						placeholder: s.slugPlaceholder,
+						required: !0
+					}),
+					c && !!e.trim() && e.trim() !== n && /* @__PURE__ */ Y(I.Suffix, {
+						className: "px-2",
+						children: d?.status ? /* @__PURE__ */ Y(Ee, { className: "text-success" }) : f ? /* @__PURE__ */ Y(D, { className: "text-danger" }) : /* @__PURE__ */ Y(V, {
+							size: "sm",
+							color: "current"
+						})
 					})
-				})]
+				]
 			}),
 			/* @__PURE__ */ Y(N, {})
 		]
@@ -848,11 +855,11 @@ function Ut({ className: e, hideSlug: t, size: n = "md", ...r }) {
 //#endregion
 //#region src/components/auth/organization/organization-view.tsx
 function Q({ className: e, isPending: t, size: n = "md", hideSlug: r, hideRole: i, organization: a, ...o }) {
-	let { authClient: s } = p(), { roles: c } = m($), { data: l } = E(s), { data: u, isPending: f } = d(s, { enabled: !a && !t }), h = a ?? u, { data: g, isPending: _ } = se(s, {
-		query: { organizationId: h?.id },
-		enabled: !!h?.id && !i
-	}), v = g?.members?.find((e) => e.userId === l?.user.id);
-	return t || !a && f || !i && h?.id && _ ? /* @__PURE__ */ Y(Ut, {
+	let { authClient: s } = p(), { roles: c, slugPrefix: l } = m($), { data: u } = E(s), { data: f, isPending: h } = d(s, { enabled: !a && !t }), g = a ?? f, { data: _, isPending: v } = se(s, {
+		query: { organizationId: g?.id },
+		enabled: !!g?.id && !i
+	}), y = _?.members?.find((e) => e.userId === u?.user.id);
+	return t || !a && h || !i && g?.id && v ? /* @__PURE__ */ Y(Ut, {
 		className: e,
 		hideSlug: r,
 		size: n,
@@ -861,7 +868,7 @@ function Q({ className: e, isPending: t, size: n = "md", hideSlug: r, hideRole:
 		className: G("flex min-w-0 items-center gap-2", e),
 		...o,
 		children: [/* @__PURE__ */ Y(Ht, {
-			organization: h,
+			organization: g,
 			className: n === "sm" ? "size-5 [&>span]:text-xs" : void 0,
 			size: n === "lg" ? "md" : "sm"
 		}), /* @__PURE__ */ X("div", {
@@ -870,15 +877,15 @@ function Q({ className: e, isPending: t, size: n = "md", hideSlug: r, hideRole:
 				className: "flex min-w-0 items-center gap-2",
 				children: [/* @__PURE__ */ Y("p", {
 					className: "text-foreground text-sm font-medium truncate leading-tight",
-					children: h?.name
-				}), !i && !!v && /* @__PURE__ */ Y(j, {
+					children: g?.name
+				}), !i && !!y && /* @__PURE__ */ Y(j, {
 					className: "shrink-0 -my-0.5",
 					size: "sm",
-					children: c?.[v.role] ?? v.role
+					children: c?.[y.role] ?? y.role
 				})]
-			}), !r && /* @__PURE__ */ Y("p", {
+			}), !r && !!g?.slug && /* @__PURE__ */ X("p", {
 				className: "text-muted text-xs truncate overflow-x-hidden font-mono leading-tight",
-				children: h?.slug
+				children: [l, g.slug]
 			})]
 		})]
 	});
@@ -886,11 +893,11 @@ function Q({ className: e, isPending: t, size: n = "md", hideSlug: r, hideRole:
 //#endregion
 //#region src/components/auth/organization/organization-row.tsx
 function Wt({ organization: e }) {
-	let { authClient: t, basePaths: n, navigate: r } = p(), { localization: i, viewPaths: a, slug: o } = m($), { mutate: s, isPending: c } = me(t, { onSuccess: () => {
+	let { authClient: t, basePaths: n, navigate: r } = p(), { localization: i, viewPaths: a, slug: o, slugPrefix: s } = m($), { mutate: c, isPending: l } = me(t, { onSuccess: () => {
 		r({ to: `${n.organization}/${a.organization.settings}` });
 	} });
-	function l() {
-		o === void 0 ? s({ organizationId: e.id }) : r({ to: `${n.organization}/${e.slug}/${a.organization.settings}` });
+	function u() {
+		o === void 0 ? c({ organizationId: e.id }) : r({ to: `${n.organization}/${s}${e.slug}/${a.organization.settings}` });
 	}
 	return /* @__PURE__ */ X("div", {
 		className: "flex items-center gap-3",
@@ -898,10 +905,10 @@ function Wt({ organization: e }) {
 			className: "ml-auto shrink-0",
 			variant: "outline",
 			size: "sm",
-			isPending: c,
-			onPress: l,
+			isPending: l,
+			onPress: u,
 			"aria-label": i.manage,
-			children: [c ? /* @__PURE__ */ Y(V, {
+			children: [l ? /* @__PURE__ */ Y(V, {
 				color: "current",
 				size: "sm"
 			}) : /* @__PURE__ */ Y(Le, {}), i.manage]
@@ -1284,7 +1291,7 @@ function rn({ isOpen: e, onOpenChange: t }) {
 			return t.includes(e) ? e : nn(t);
 		});
 	}, [a]);
-	let { mutate: c, isPending: l } = te(n, { onSuccess: () => {
+	let { mutate: c, isPending: l } = T(n, { onSuccess: () => {
 		t(!1), K.success(i.inviteMemberSuccess);
 	} }), u = Object.keys(a).includes(o);
 	return /* @__PURE__ */ Y(O.Backdrop, {
@@ -1373,7 +1380,7 @@ function rn({ isOpen: e, onOpenChange: t }) {
 //#endregion
 //#region src/components/auth/organization/leave-organization-dialog.tsx
 function an({ isOpen: e, onOpenChange: t, organization: n }) {
-	let { authClient: r, basePaths: i, localization: a, navigate: o } = p(), { localization: s, viewPaths: c } = m($), { mutate: l, isPending: u } = re(r, { onSuccess: () => {
+	let { authClient: r, basePaths: i, localization: a, navigate: o } = p(), { localization: s, viewPaths: c } = m($), { mutate: l, isPending: u } = ne(r, { onSuccess: () => {
 		t(!1), K.success(s.leftOrganization), o({
 			to: `${i.settings}/${c.settings.organizations}`,
 			replace: !0
@@ -1845,7 +1852,7 @@ function mn({ className: e, ...t }) {
 	]), C = at(() => !g || !S ? S : [...S].sort((e, t) => {
 		let n = g.column, r = n === "user" ? e.user.name || e.user.email : String(e[n]), i = n === "user" ? t.user.name || t.user.email : String(t[n]), a = r.localeCompare(i);
 		return g.direction === "descending" && (a *= -1), a;
-	}), [g, S]), [ee, te] = q(!1), ne = c?.members.some((e) => e.role === "owner" && e.userId === a?.user.id);
+	}), [g, S]), [ee, T] = q(!1), te = c?.members.some((e) => e.role === "owner" && e.userId === a?.user.id);
 	return /* @__PURE__ */ X("div", {
 		className: G("flex flex-col gap-3", e),
 		...t,
@@ -1859,7 +1866,7 @@ function mn({ className: e, ...t }) {
 					className: "shrink-0",
 					size: "sm",
 					isDisabled: h,
-					onPress: () => te(!0),
+					onPress: () => T(!0),
 					children: r.inviteMember
 				})]
 			}),
@@ -1955,7 +1962,7 @@ function mn({ className: e, ...t }) {
 							})
 						] }), /* @__PURE__ */ Y(H.Body, { children: h ? /* @__PURE__ */ Y(dn, {}) : !!o && C?.map((e) => /* @__PURE__ */ Y(pn, {
 							member: e,
-							isOwner: ne,
+							isOwner: te,
 							organization: o
 						}, e.id)) })]
 					}) }) })
@@ -1963,7 +1970,7 @@ function mn({ className: e, ...t }) {
 			}),
 			/* @__PURE__ */ Y(rn, {
 				isOpen: ee,
-				onOpenChange: te
+				onOpenChange: T
 			})
 		]
 	});
@@ -2084,32 +2091,32 @@ function yn({ 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, navigate: l } = p();
 	h(o);
-	let { localization: u, viewPaths: f, slug: g } = m($), { data: _, isPending: v } = d(o);
+	let { localization: u, viewPaths: f, slug: g, slugPrefix: _ } = m($), { data: v, isPending: y } = d(o);
 	it(() => {
-		!v && !_ && l({
+		!y && !v && l({
 			to: `${s.settings}/${f.settings?.organizations}`,
 			replace: !0
 		});
 	}, [
 		s.settings,
-		v,
+		y,
 		l,
 		f.settings?.organizations,
-		_
+		v
 	]);
-	let y = at(() => i || Object.entries(f.organization).find(([, e]) => e === n)?.[0], [
+	let b = at(() => i || Object.entries(f.organization).find(([, e]) => e === n)?.[0], [
 		i,
 		n,
 		f.organization
 	]);
-	if (!y) {
+	if (!b) {
 		let e = Object.values(f.organization).join(", ");
 		throw Error(`[Better Auth UI] Unknown organization path "${n}". Valid paths are: ${e}`);
 	}
-	return !v && !_ ? null : /* @__PURE__ */ X(U, {
+	return !y && !v ? null : /* @__PURE__ */ X(U, {
 		className: G(e),
 		orientation: "horizontal",
-		selectedKey: y,
+		selectedKey: b,
 		...a,
 		children: [
 			!t && /* @__PURE__ */ Y(U.ListContainer, { children: /* @__PURE__ */ X(U.List, {
@@ -2117,7 +2124,7 @@ function yn({ className: e, hideNav: t, path: n, variant: r, view: i, ...a }) {
 				className: "max-w-fit overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
 				children: [/* @__PURE__ */ X(U.Tab, {
 					id: "settings",
-					href: g ? `${s.organization}/${g}/${f.organization.settings}` : `${s.organization}/${f.organization.settings}`,
+					href: g ? `${s.organization}/${_}${g}/${f.organization.settings}` : `${s.organization}/${f.organization.settings}`,
 					className: "gap-2",
 					onPress: (e) => e.target.scrollIntoView({
 						behavior: "smooth",
@@ -2130,7 +2137,7 @@ function yn({ className: e, hideNav: t, path: n, variant: r, view: i, ...a }) {
 					]
 				}), /* @__PURE__ */ X(U.Tab, {
 					id: "people",
-					href: g ? `${s.organization}/${g}/${f.organization.people}` : `${s.organization}/${f.organization.people}`,
+					href: g ? `${s.organization}/${_}${g}/${f.organization.people}` : `${s.organization}/${f.organization.people}`,
 					className: "gap-2",
 					onPress: (e) => e.target.scrollIntoView({
 						behavior: "smooth",
@@ -2159,25 +2166,25 @@ function yn({ className: e, hideNav: t, path: n, variant: r, view: i, ...a }) {
 //#endregion
 //#region src/components/auth/organization/organization-switcher.tsx
 function bn({ className: e, hideCreate: t, hidePersonal: r, hideSettings: i, hideSlug: a = !0, setActive: o, placement: s, variant: c = "ghost", size: l = "md", trigger: u, ...f }) {
-	let { authClient: h, navigate: g, basePaths: _, localization: v, viewPaths: y } = p(), { data: b, isPending: x } = E(h), { localization: S, viewPaths: C, slug: ee } = m($), { data: w, isPending: te } = d(h), { data: ne, isPending: re } = ce(h), { mutate: ie } = me(h), T = x || !!b && (re || te), [ae, oe] = q(!1), [se, le] = q(!1);
-	function ue(e) {
-		o ? o(e) : ee === void 0 ? ie({ organizationId: e?.id ?? null }) : g({ to: e ? `${_.organization}/${e.slug}/${C.organization.settings}` : `${_.settings}/${y.settings.account}` });
+	let { authClient: h, navigate: g, basePaths: _, localization: v, viewPaths: y } = p(), { data: b, isPending: x } = E(h), { localization: S, viewPaths: C, slug: ee, slugPrefix: w } = m($), { data: T, isPending: te } = d(h), { data: ne, isPending: re } = ce(h), { mutate: ie } = me(h), ae = x || !!b && (re || te), [oe, se] = q(!1), [le, ue] = q(!1);
+	function de(e) {
+		o ? o(e) : ee === void 0 ? ie({ organizationId: e?.id ?? null }) : g({ to: e ? `${_.organization}/${w}${e.slug}/${C.organization.settings}` : `${_.settings}/${y.settings.account}` });
 	}
 	return /* @__PURE__ */ X(J, { children: [/* @__PURE__ */ X(M, {
-		isOpen: se,
-		onOpenChange: le,
+		isOpen: le,
+		onOpenChange: ue,
 		children: [u ? /* @__PURE__ */ Y(M.Trigger, { children: u }) : /* @__PURE__ */ X(k, {
 			variant: c,
 			className: G("h-auto px-2 py-2 text-left", e),
-			isDisabled: !b || T,
+			isDisabled: !b || ae,
 			"aria-label": S.organization,
 			...f,
-			children: [T ? /* @__PURE__ */ Y(Q, {
+			children: [ae ? /* @__PURE__ */ Y(Q, {
 				size: l,
 				isPending: !0,
 				hideRole: !0,
 				hideSlug: a
-			}) : w ? /* @__PURE__ */ Y(Q, {
+			}) : T ? /* @__PURE__ */ Y(Q, {
 				size: l,
 				hideRole: !0,
 				hideSlug: a
@@ -2193,22 +2200,22 @@ function bn({ className: e, hideCreate: t, hidePersonal: r, hideSettings: i, hid
 		}), /* @__PURE__ */ X(M.Popover, {
 			placement: s,
 			className: "max-w-svw",
-			children: [w ? /* @__PURE__ */ X("div", {
+			children: [T ? /* @__PURE__ */ X("div", {
 				className: "flex items-center justify-between gap-4 px-4 pt-3",
 				children: [/* @__PURE__ */ Y(Q, {
 					hideRole: !0,
 					hideSlug: a,
-					organization: w
+					organization: T
 				}), !i && /* @__PURE__ */ X($e, {
-					href: ee ? `${_.organization}/${ee}/${C.organization.settings}` : `${_.organization}/${C.organization.settings}`,
+					href: ee ? `${_.organization}/${w}${ee}/${C.organization.settings}` : `${_.organization}/${C.organization.settings}`,
 					className: G(ct({
 						variant: "outline",
 						size: "sm"
 					}), "shrink-0 gap-2"),
-					onPress: () => le(!1),
+					onPress: () => ue(!1),
 					children: [/* @__PURE__ */ Y(Le, { className: "text-muted" }), S.manage]
 				})]
-			}) : !T && b?.user && !r ? /* @__PURE__ */ X("div", {
+			}) : !ae && b?.user && !r ? /* @__PURE__ */ X("div", {
 				className: "flex items-center justify-between gap-4 px-4 pt-3",
 				children: [/* @__PURE__ */ Y(n, { hideSubtitle: a }), !i && /* @__PURE__ */ X($e, {
 					href: `${_.settings}/${y.settings.account}`,
@@ -2216,18 +2223,18 @@ function bn({ className: e, hideCreate: t, hidePersonal: r, hideSettings: i, hid
 						variant: "outline",
 						size: "sm"
 					}), "shrink-0 gap-2"),
-					onPress: () => le(!1),
+					onPress: () => ue(!1),
 					children: [/* @__PURE__ */ Y(Le, { className: "text-muted" }), v.settings.settings]
 				})]
 			}) : null, /* @__PURE__ */ X(M.Menu, { children: [
-				!!w && !r && /* @__PURE__ */ Y(M.Item, {
+				!!T && !r && /* @__PURE__ */ Y(M.Item, {
 					textValue: S.personalAccount,
-					onPress: () => ue(null),
+					onPress: () => de(null),
 					children: /* @__PURE__ */ Y(n, { hideSubtitle: a })
 				}),
-				ne?.filter((e) => e.id !== w?.id)?.map((e) => /* @__PURE__ */ Y(M.Item, {
+				ne?.filter((e) => e.id !== T?.id)?.map((e) => /* @__PURE__ */ Y(M.Item, {
 					textValue: e.name,
-					onPress: () => ue(e),
+					onPress: () => de(e),
 					children: /* @__PURE__ */ Y(Q, {
 						hideRole: !0,
 						hideSlug: a,
@@ -2236,14 +2243,14 @@ function bn({ className: e, hideCreate: t, hidePersonal: r, hideSettings: i, hid
 				}, e.id)),
 				!t && /* @__PURE__ */ X(M.Item, {
 					textValue: S.createOrganization,
-					onPress: () => oe(!0),
+					onPress: () => se(!0),
 					children: [/* @__PURE__ */ Y(Oe, { className: "text-muted" }), /* @__PURE__ */ Y(L, { children: S.createOrganization })]
 				})
 			] })]
 		})]
 	}), /* @__PURE__ */ Y(Vt, {
-		isOpen: ae,
-		onOpenChange: oe
+		isOpen: oe,
+		onOpenChange: se
 	})] });
 }
 //#endregion
@@ -2627,18 +2634,18 @@ function Mn({ className: e, variant: t, ...n }) {
 //#endregion
 //#region src/components/auth/username/username-field.tsx
 function Nn({ name: e, field: t, isPending: n, variant: r }) {
-	let { authClient: i } = p(), { localization: a, minUsernameLength: o, maxUsernameLength: s, isUsernameAvailable: c } = m(Pn), l = String(t.defaultValue ?? ""), [u, d] = q(l), { mutate: f, data: h, error: g, reset: _ } = ne(i, { onError: () => {} }), v = _t((e) => {
+	let { authClient: i } = p(), { localization: a, minUsernameLength: o, maxUsernameLength: s, isUsernameAvailable: c, usernamePrefix: l } = m(Pn), u = String(t.defaultValue ?? ""), [d, f] = q(u), { mutate: h, data: g, error: _, reset: v } = te(i, { onError: () => {} }), y = _t((e) => {
 		let t = e.trim();
-		if (!t || t === l) {
-			_();
+		if (!t || t === u) {
+			v();
 			return;
 		}
-		f({ username: t });
+		h({ username: t });
 	}, { wait: 500 });
-	function y(e) {
-		d(e), _(), c && v.maybeExecute(e);
+	function b(e) {
+		f(e), v(), c && y.maybeExecute(e);
 	}
-	let b = !!c && !!u.trim() && u.trim() !== l, { localization: x } = p();
+	let x = !!c && !!d.trim() && d.trim() !== u, { localization: S } = p();
 	return /* @__PURE__ */ X(W, {
 		name: e,
 		type: "text",
@@ -2647,28 +2654,35 @@ function Nn({ name: e, field: t, isPending: n, variant: r }) {
 		maxLength: s,
 		isDisabled: n,
 		isReadOnly: t.readOnly,
-		value: u,
-		onChange: y,
+		value: d,
+		onChange: b,
 		validate: (e) => {
-			if (!e) return t.required ? x.auth.fieldRequired : void 0;
-			if (o && e.length < o) return x.auth.tooShort.replace("{{min}}", String(o));
-			if (s && e.length > s) return x.auth.tooLong.replace("{{max}}", String(s));
+			if (!e) return t.required ? S.auth.fieldRequired : void 0;
+			if (o && e.length < o) return S.auth.tooShort.replace("{{min}}", String(o));
+			if (s && e.length > s) return S.auth.tooLong.replace("{{max}}", String(s));
 		},
 		children: [
 			/* @__PURE__ */ Y(L, { children: t.label }),
 			/* @__PURE__ */ X(I, {
 				variant: r === "transparent" ? "primary" : "secondary",
-				children: [/* @__PURE__ */ Y(I.Input, {
-					placeholder: t.placeholder,
-					required: t.required
-				}), b && /* @__PURE__ */ Y(I.Suffix, {
-					"aria-label": h?.available ? a.usernameAvailable : h?.available === !1 ? a.usernameTaken : void 0,
-					className: "px-2",
-					children: h?.available ? /* @__PURE__ */ Y(Ee, { className: "text-success" }) : g || h?.available === !1 ? /* @__PURE__ */ Y(D, { className: "text-danger" }) : /* @__PURE__ */ Y(V, {
-						size: "sm",
-						color: "current"
+				children: [
+					l && /* @__PURE__ */ Y(I.Prefix, {
+						className: "pr-1.5 text-muted",
+						children: l
+					}),
+					/* @__PURE__ */ Y(I.Input, {
+						placeholder: t.placeholder,
+						required: t.required
+					}),
+					x && /* @__PURE__ */ Y(I.Suffix, {
+						"aria-label": g?.available ? a.usernameAvailable : g?.available === !1 ? a.usernameTaken : void 0,
+						className: "px-2",
+						children: g?.available ? /* @__PURE__ */ Y(Ee, { className: "text-success" }) : _ || g?.available === !1 ? /* @__PURE__ */ Y(D, { className: "text-danger" }) : /* @__PURE__ */ Y(V, {
+							size: "sm",
+							color: "current"
+						})
 					})
-				})]
+				]
 			}),
 			/* @__PURE__ */ Y(N, {})
 		]
@@ -2694,17 +2708,17 @@ function Fn({ className: n, socialLayout: i, socialPosition: a = "bottom", varia
 	function C(e) {
 		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 	}
-	let { mutate: w, isPending: te } = ge(s, {
+	let { mutate: w, isPending: T } = ge(s, {
 		onError: (e, { email: t }) => {
 			S(""), e.error?.code === "EMAIL_NOT_VERIFIED" && (sessionStorage.setItem("better-auth-ui.verify-email", t), _({ to: `${c.auth}/${g.auth.verifyEmail}` })), y();
 		},
 		onSuccess: () => _({ to: f })
-	}), { mutate: ne, isPending: re } = ye(s, {
+	}), { mutate: te, isPending: ne } = ye(s, {
 		onError: () => {
 			S(""), y();
 		},
 		onSuccess: () => _({ to: f })
-	}), ie = (e) => {
+	}), re = (e) => {
 		e.preventDefault();
 		let t = new FormData(e.currentTarget), n = t.get("email"), r = t.get("rememberMe") === "on";
 		C(n) ? w({
@@ -2712,13 +2726,13 @@ function Fn({ className: n, socialLayout: i, socialPosition: a = "bottom", varia
 			password: x,
 			...l?.rememberMe ? { rememberMe: r } : {},
 			fetchOptions: v
-		}) : ne({
+		}) : te({
 			username: n,
 			password: x,
 			...l?.rememberMe ? { rememberMe: r } : {},
 			fetchOptions: v
 		});
-	}, T = Z({ mutationKey: r.signIn.all }) + Z({ mutationKey: r.signUp.all }) > 0, ae = te || re, oe = d.find((e) => e.captchaComponent)?.captchaComponent, se = l?.enabled && !!h?.length;
+	}, ie = Z({ mutationKey: r.signIn.all }) + Z({ mutationKey: r.signUp.all }) > 0, ae = T || ne, oe = d.find((e) => e.captchaComponent)?.captchaComponent, se = l?.enabled && !!h?.length;
 	return /* @__PURE__ */ X(A, {
 		className: G("w-full max-w-sm gap-4 md:p-6", n),
 		variant: o,
@@ -2732,14 +2746,14 @@ function Fn({ className: n, socialLayout: i, socialPosition: a = "bottom", varia
 				children: [
 					a === "top" && /* @__PURE__ */ X(J, { children: [!!h?.length && /* @__PURE__ */ Y(t, { socialLayout: i }), se && /* @__PURE__ */ Y(e, { children: u.auth.or })] }),
 					l?.enabled && /* @__PURE__ */ X(P, {
-						onSubmit: ie,
+						onSubmit: re,
 						className: "flex flex-col gap-4",
 						children: [
 							/* @__PURE__ */ X(W, {
 								name: "email",
 								type: "text",
 								autoComplete: "username email",
-								isDisabled: T,
+								isDisabled: ie,
 								validate: (e) => {
 									if (!e) return u.auth.fieldRequired;
 								},
@@ -2759,7 +2773,7 @@ function Fn({ className: n, socialLayout: i, socialPosition: a = "bottom", varia
 								name: "password",
 								type: "password",
 								autoComplete: "current-password",
-								isDisabled: T,
+								isDisabled: ie,
 								value: x,
 								onChange: S,
 								validate: (e) => {
@@ -2780,7 +2794,7 @@ function Fn({ className: n, socialLayout: i, socialPosition: a = "bottom", varia
 							}),
 							l?.rememberMe && /* @__PURE__ */ Y(Xe, {
 								name: "rememberMe",
-								isDisabled: T,
+								isDisabled: ie,
 								variant: o === "transparent" ? "primary" : "secondary",
 								children: /* @__PURE__ */ X(Xe.Content, { children: [/* @__PURE__ */ Y(Xe.Control, { children: /* @__PURE__ */ Y(Xe.Indicator, {}) }), u.auth.rememberMe] })
 							}),
@@ -2793,7 +2807,7 @@ function Fn({ className: n, socialLayout: i, socialPosition: a = "bottom", varia
 								children: [/* @__PURE__ */ X(k, {
 									type: "submit",
 									className: "w-full",
-									isPending: ae || T,
+									isPending: ae || ie,
 									children: [ae && /* @__PURE__ */ Y(V, {
 										color: "current",
 										size: "sm"

package/package.json

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

package/src/components/auth/organization/organization-row.tsx

@@ -23,7 +23,8 @@ export function OrganizationRow({ organization }: OrganizationRowProps) {
   const {
     localization: organizationLocalization,
     viewPaths: organizationViewPaths,
-    slug
+    slug,
+    slugPrefix
   } = useAuthPlugin(organizationPlugin)
 
   const { mutate: setActiveOrganization, isPending: setActivePending } =
@@ -38,7 +39,7 @@ export function OrganizationRow({ organization }: OrganizationRowProps) {
   function manageOrganization() {
     if (slug !== undefined) {
       navigate({
-        to: `${basePaths.organization}/${organization.slug}/${organizationViewPaths.organization.settings}`
+        to: `${basePaths.organization}/${slugPrefix}${organization.slug}/${organizationViewPaths.organization.settings}`
       })
     } else {
       setActiveOrganization({ organizationId: organization.id })

package/src/components/auth/organization/organization-switcher.tsx

@@ -60,7 +60,8 @@ export function OrganizationSwitcher({
   const {
     localization: organizationLocalization,
     viewPaths: organizationViewPaths,
-    slug
+    slug,
+    slugPrefix
   } = useAuthPlugin(organizationPlugin)
 
   const { data: activeOrganization, isPending: activeOrganizationPending } =
@@ -86,7 +87,7 @@ export function OrganizationSwitcher({
     } else if (slug !== undefined) {
       navigate({
         to: organization
-          ? `${basePaths.organization}/${organization.slug}/${organizationViewPaths.organization.settings}`
+          ? `${basePaths.organization}/${slugPrefix}${organization.slug}/${organizationViewPaths.organization.settings}`
           : `${basePaths.settings}/${viewPaths.settings.account}`
       })
     } else {
@@ -146,7 +147,7 @@ export function OrganizationSwitcher({
                 <Link
                   href={
                     slug
-                      ? `${basePaths.organization}/${slug}/${organizationViewPaths.organization.settings}`
+                      ? `${basePaths.organization}/${slugPrefix}${slug}/${organizationViewPaths.organization.settings}`
                       : `${basePaths.organization}/${organizationViewPaths.organization.settings}`
                   }
                   className={cn(

package/src/components/auth/organization/organization-view.tsx

@@ -36,7 +36,7 @@ export function OrganizationView({
   ...props
 }: OrganizationViewProps & ComponentProps<"div">) {
   const { authClient } = useAuth()
-  const { roles } = useAuthPlugin(organizationPlugin)
+  const { roles, slugPrefix } = useAuthPlugin(organizationPlugin)
 
   const { data: session } = useSession(authClient)
 
@@ -98,9 +98,10 @@ export function OrganizationView({
           )}
         </div>
 
-        {!hideSlug && (
+        {!hideSlug && !!resolvedOrganization?.slug && (
           <p className="text-muted text-xs truncate overflow-x-hidden font-mono leading-tight">
-            {resolvedOrganization?.slug}
+            {slugPrefix}
+            {resolvedOrganization.slug}
           </p>
         )}
       </div>

package/src/components/auth/organization/organization.tsx

@@ -45,7 +45,8 @@ export function Organization({
   const {
     localization: organizationLocalization,
     viewPaths: organizationViewPaths,
-    slug
+    slug,
+    slugPrefix
   } = useAuthPlugin(organizationPlugin)
 
   const { data: activeOrganization, isPending } = useActiveOrganization(
@@ -107,7 +108,7 @@ export function Organization({
               id="settings"
               href={
                 slug
-                  ? `${basePaths.organization}/${slug}/${organizationViewPaths.organization.settings}`
+                  ? `${basePaths.organization}/${slugPrefix}${slug}/${organizationViewPaths.organization.settings}`
                   : `${basePaths.organization}/${organizationViewPaths.organization.settings}`
               }
               className="gap-2"
@@ -129,7 +130,7 @@ export function Organization({
               id="people"
               href={
                 slug
-                  ? `${basePaths.organization}/${slug}/${organizationViewPaths.organization.people}`
+                  ? `${basePaths.organization}/${slugPrefix}${slug}/${organizationViewPaths.organization.people}`
                   : `${basePaths.organization}/${organizationViewPaths.organization.people}`
               }
               className="gap-2"

package/src/components/auth/organization/slug-field.tsx

@@ -48,8 +48,11 @@ export function SlugField({
   ...props
 }: SlugFieldProps & TextFieldProps) {
   const { authClient, localization: authLocalization } = useAuth()
-  const { localization, checkSlug: checkSlugEnabled } =
-    useAuthPlugin(organizationPlugin)
+  const {
+    localization,
+    checkSlug: checkSlugEnabled,
+    slugPrefix
+  } = useAuthPlugin(organizationPlugin)
 
   const {
     mutate: checkSlug,
@@ -93,6 +96,12 @@ export function SlugField({
       <Label>{localization.slug}</Label>
 
       <InputGroup variant={variant}>
+        {slugPrefix && (
+          <InputGroup.Prefix className="pr-1.5 text-muted">
+            {slugPrefix}
+          </InputGroup.Prefix>
+        )}
+
         <InputGroup.Input placeholder={localization.slugPlaceholder} required />
 
         {checkSlugEnabled && !!value.trim() && value.trim() !== currentSlug && (

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

@@ -34,7 +34,8 @@ export function UsernameField({
     localization,
     minUsernameLength,
     maxUsernameLength,
-    isUsernameAvailable: checkAvailability
+    isUsernameAvailable: checkAvailability,
+    usernamePrefix
   } = useAuthPlugin(usernamePlugin)
 
   const currentUsername = String(field.defaultValue ?? "")
@@ -109,6 +110,12 @@ export function UsernameField({
       <Label>{field.label}</Label>
 
       <InputGroup variant={variant === "transparent" ? "primary" : "secondary"}>
+        {usernamePrefix && (
+          <InputGroup.Prefix className="pr-1.5 text-muted">
+            {usernamePrefix}
+          </InputGroup.Prefix>
+        )}
+
         <InputGroup.Input
           placeholder={field.placeholder}
           required={field.required}