@better-auth-ui/heroui 1.6.8 → 1.6.9

package/src/components/auth/settings/settings.tsx

@@ -1,8 +1,8 @@
 import type { SettingsView } from "@better-auth-ui/core"
 import { useAuth, useAuthenticate } from "@better-auth-ui/react"
+import { Person, Shield } from "@gravity-ui/icons"
 import { type CardProps, cn, Tabs } from "@heroui/react"
 import { type ComponentProps, useMemo } from "react"
-
 import { AccountSettings } from "./account/account-settings"
 import { SecuritySettings } from "./security/security-settings"
 
@@ -25,7 +25,7 @@ export type SettingsProps = {
  * @param variant - Card variant forwarded to each settings section card
  * @returns A DOM tree containing the responsive settings tabs and the currently selected settings panel
  *
- * @throws Error if neither `view` nor `path` is provided
+ * @throws Error if neither `view` nor `path` is provided, or if `path` does not match any settings view
  */
 export function Settings({
   className,
@@ -35,22 +35,39 @@ export function Settings({
   view,
   ...props
 }: SettingsProps & ComponentProps<"div">) {
-  const { authClient, basePaths, localization, viewPaths } = useAuth()
-  useAuthenticate(authClient)
-
   if (!view && !path) {
     throw new Error("[Better Auth UI] Either `view` or `path` must be provided")
   }
 
-  const settingsPathViews = useMemo(
-    () =>
-      Object.fromEntries(
-        Object.entries(viewPaths.settings).map(([k, v]) => [v, k])
-      ) as Record<string, SettingsView>,
-    [viewPaths.settings]
-  )
+  const { authClient, basePaths, localization, viewPaths, plugins } = useAuth()
+  useAuthenticate(authClient)
+
+  // Built-ins first, then plugin segments
+  const currentView = useMemo(() => {
+    if (view) return view
+    if (!path) return undefined
 
-  const currentView = view || (path ? settingsPathViews[path] : undefined)
+    const match = [
+      viewPaths.settings,
+      ...plugins.map((plugin) => plugin.viewPaths?.settings)
+    ]
+      .flatMap((source) => Object.entries(source ?? {}))
+      .find(([, segment]) => segment === path)
+
+    return match?.[0] as SettingsView | undefined
+  }, [view, path, viewPaths.settings, plugins])
+
+  if (!currentView) {
+    const validPaths = [
+      viewPaths.settings,
+      ...plugins.map((plugin) => plugin.viewPaths?.settings)
+    ]
+      .flatMap((source) => Object.values(source ?? {}))
+      .join(", ")
+    throw new Error(
+      `[Better Auth UI] Unknown settings path "${path}". Valid paths are: ${validPaths}`
+    )
+  }
 
   return (
     <Tabs
@@ -62,12 +79,18 @@ export function Settings({
       <Tabs.ListContainer>
         <Tabs.List
           aria-label={localization.settings.settings}
-          className="overflow-auto w-fit"
+          className="max-w-fit overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
         >
           <Tabs.Tab
             id="account"
             href={`${basePaths.settings}/${viewPaths.settings.account}`}
+            className="gap-2"
+            onPress={(e) =>
+              e.target.scrollIntoView({ behavior: "smooth", inline: "center" })
+            }
           >
+            <Person className="text-muted" />
+
             {localization.settings.account}
 
             <Tabs.Indicator />
@@ -76,11 +99,39 @@ export function Settings({
           <Tabs.Tab
             id="security"
             href={`${basePaths.settings}/${viewPaths.settings.security}`}
+            className="gap-2"
+            onPress={(e) =>
+              e.target.scrollIntoView({ behavior: "smooth", inline: "center" })
+            }
           >
+            <Shield className="text-muted" />
+
             {localization.settings.security}
 
             <Tabs.Indicator />
           </Tabs.Tab>
+
+          {plugins.flatMap(
+            (plugin) =>
+              plugin.settingsTabs?.map((settingsTab, index) => (
+                <Tabs.Tab
+                  key={`${plugin.id}-${index.toString()}`}
+                  id={settingsTab.view}
+                  href={`${basePaths.settings}/${plugin.viewPaths?.settings?.[settingsTab.view]}`}
+                  className="gap-2"
+                  onPress={(e) =>
+                    e.target.scrollIntoView({
+                      behavior: "smooth",
+                      inline: "center"
+                    })
+                  }
+                >
+                  {settingsTab.label}
+
+                  <Tabs.Indicator />
+                </Tabs.Tab>
+              )) ?? []
+          )}
         </Tabs.List>
       </Tabs.ListContainer>
 
@@ -91,6 +142,18 @@ export function Settings({
       <Tabs.Panel id="security" className="px-0">
         <SecuritySettings variant={variant} />
       </Tabs.Panel>
+
+      {plugins.flatMap((plugin) =>
+        plugin.settingsTabs?.map((settingsTab, index) => (
+          <Tabs.Panel
+            key={`${plugin.id}-${index.toString()}`}
+            id={settingsTab.view}
+            className="px-0"
+          >
+            <settingsTab.component variant={variant} />
+          </Tabs.Panel>
+        ))
+      )}
     </Tabs>
   )
 }

package/src/components/auth/user/user-avatar.tsx

@@ -13,7 +13,10 @@ export type UserAvatarProps = {
   fallback?: ReactNode
   isPending?: boolean
   /** @remarks `User` */
-  user?: User & { username?: string | null; displayUsername?: string | null }
+  user?: Partial<User> & {
+    username?: string | null
+    displayUsername?: string | null
+  }
   size?: AvatarProps["size"]
 }
 

package/src/components/auth/user/user-button.tsx

@@ -46,16 +46,15 @@ export type UserButtonLink = {
 export type UserButtonProps = {
   className?: string
   size?: "default" | "icon"
-  /**
-   * The placement of the element with respect to its anchor element.
-   * @default "bottom"
-   */
+  /** The placement of the element with respect to its anchor element. */
   placement?: DropdownPopoverProps["placement"]
   variant?: ButtonProps["variant"]
   /** Additional menu entries rendered above the built-in items. */
   links?: (UserButtonLink | ReactElement)[]
   /** Hide the built-in "Settings" link. Useful when replacing it via `links`. */
   hideSettings?: boolean
+  /** When true, the subtitle line (email when name/username is shown) is hidden. */
+  hideSubtitle?: boolean
 }
 
 function renderUserLink(
@@ -91,11 +90,12 @@ function renderUserLink(
  */
 export function UserButton({
   className,
-  placement = "bottom",
+  placement,
   size = "default",
   variant = "ghost",
   links,
-  hideSettings = false
+  hideSettings,
+  hideSubtitle
 }: UserButtonProps) {
   const { authClient, basePaths, viewPaths, localization, plugins } = useAuth()
 
@@ -104,7 +104,10 @@ export function UserButton({
   const userMenuItems = plugins.flatMap(
     (plugin) =>
       plugin.userMenuItems?.map((Item, index) => (
-        <Item key={`${plugin.id}-${index.toString()}`} />
+        <Item
+          key={`${plugin.id}-${index.toString()}`}
+          hideSubtitle={hideSubtitle}
+        />
       )) ?? []
   )
 
@@ -127,12 +130,12 @@ export function UserButton({
         <Button
           variant={variant}
           className={cn(
-            "h-auto font-normal justify-start px-3 py-2 text-left",
+            "h-auto font-normal justify-start px-2 py-2 text-left",
             className
           )}
         >
           {session || sessionPending ? (
-            <UserView isPending={sessionPending} />
+            <UserView isPending={sessionPending} hideSubtitle={hideSubtitle} />
           ) : (
             <>
               <UserAvatar />
@@ -141,7 +144,7 @@ export function UserButton({
             </>
           )}
 
-          <ChevronsExpandVertical className="ml-auto size-3.5" />
+          <ChevronsExpandVertical className="ml-auto size-3 text-muted" />
         </Button>
       )}
 
@@ -151,7 +154,7 @@ export function UserButton({
       >
         {session && (
           <div className="px-3 pt-3 pb-1">
-            <UserView />
+            <UserView hideSubtitle={hideSubtitle} />
           </div>
         )}
 

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

@@ -12,22 +12,32 @@ export type UserViewProps = {
   className?: string
   isPending?: boolean
   size?: AvatarProps["size"]
+  /**
+   * When true, the subtitle line (email when name/username is shown) is hidden.
+   * @default false
+   */
+  hideSubtitle?: boolean
   /** @remarks `User` */
-  user?: User & { username?: string | null; displayUsername?: string | null }
+  user?: Partial<User> & {
+    username?: string | null
+    displayUsername?: string | null
+  }
 }
 
 /**
- * Render a compact user item with an avatar, a primary label (display username, name, or email), and an optional secondary email line.
+ * Render a compact user item with an avatar, a primary label (display username, name, or email), and an optional subtitle (email).
  *
  * @param isPending - If true and no `user` prop is provided, renders a loading skeleton instead of user details
- * @param size - Avatar size variant; defaults to `"sm"`
+ * @param size - Avatar size variant; defaults to `"md"`
+ * @param hideSubtitle - When true, omits the muted subtitle row under the primary label
  * @param user - Optional user to display; when omitted the current session user is used if available
  * @returns A React element containing the user's avatar and text labels
  */
 export function UserView({
   className,
   isPending,
-  size = "sm",
+  size = "md",
+  hideSubtitle = false,
   user,
   ...props
 }: UserViewProps & ComponentProps<"div">) {
@@ -47,11 +57,16 @@ export function UserView({
         className={cn("flex items-center gap-2 min-w-0", className)}
         {...props}
       >
-        <UserAvatar isPending size={size} />
+        <UserAvatar
+          isPending
+          className={size === "sm" ? "size-5 [&>span]:text-xs" : undefined}
+          size={size === "lg" ? "md" : "sm"}
+        />
 
         <div className="flex flex-col gap-1 min-w-0">
           <Skeleton className="h-3.5 w-24 rounded-lg" />
-          <Skeleton className="h-3 w-32 rounded-lg" />
+
+          {!hideSubtitle ? <Skeleton className="h-3 w-32 rounded-lg" /> : null}
         </div>
       </div>
     )
@@ -62,20 +77,25 @@ export function UserView({
       className={cn("flex items-center gap-2 min-w-0", className)}
       {...props}
     >
-      <UserAvatar user={resolvedUser} size={size} />
+      <UserAvatar
+        className={size === "sm" ? "size-5 [&>span]:text-xs" : undefined}
+        user={resolvedUser}
+        size={size === "lg" ? "md" : "sm"}
+      />
 
-      <div className="min-w-0">
-        <p className="text-sm font-medium truncate leading-tight">
+      <div className="flex flex-col min-w-0">
+        <p className="text-foreground text-sm font-medium leading-tight truncate">
           {resolvedUser?.displayUsername ||
             resolvedUser?.name ||
             resolvedUser?.email}
         </p>
 
-        {(resolvedUser?.displayUsername || resolvedUser?.name) && (
-          <p className="text-muted text-xs mb-0.5 truncate overflow-x-hidden">
+        {!hideSubtitle &&
+        (resolvedUser?.displayUsername || resolvedUser?.name) ? (
+          <p className="text-muted text-xs leading-tight truncate overflow-x-hidden">
             {resolvedUser?.email}
           </p>
-        )}
+        ) : null}
       </div>
     </div>
   )

package/src/email.ts

@@ -4,6 +4,7 @@ export * from "./components/auth/email/email-changed-email"
 export * from "./components/auth/email/email-verification-email"
 export * from "./components/auth/email/magic-link-email"
 export * from "./components/auth/email/new-device-email"
+export * from "./components/auth/email/organization-invitation-email"
 export * from "./components/auth/email/otp-email"
 export * from "./components/auth/email/password-changed-email"
 export * from "./components/auth/email/reset-password-email"

package/src/lib/auth/api-key-plugin.ts

@@ -5,11 +5,17 @@ import {
 } from "@better-auth-ui/core/plugins"
 
 import { ApiKeys } from "../../components/auth/api-key/api-keys"
+import { OrganizationApiKeys } from "../../components/auth/api-key/organization-api-keys"
 
 export const apiKeyPlugin = createAuthPlugin(
   coreApiKeyPlugin.id,
-  (options: ApiKeyPluginOptions = {}) => ({
-    ...coreApiKeyPlugin(options),
-    securityCards: [ApiKeys]
-  })
+  (options: ApiKeyPluginOptions = {}) => {
+    const core = coreApiKeyPlugin(options)
+
+    return {
+      ...core,
+      securityCards: [ApiKeys],
+      ...(core.organization ? { organizationCards: [OrganizationApiKeys] } : {})
+    }
+  }
 )

package/src/lib/auth/auth-plugin.ts

@@ -3,6 +3,7 @@ import type {
   AccountCardProps,
   AuthPlugin as AuthPluginPrimitive,
   AuthPluginComponents as BaseAuthPluginComponents,
+  OrganizationCardProps,
   SecurityCardProps,
   UserMenuItemProps
 } from "@better-auth-ui/react"
@@ -36,7 +37,7 @@ declare module "@better-auth-ui/core" {
 /** Heroui slot component shapes — inherits from the framework-agnostic defaults and narrows slots that receive a heroui variant from the host. */
 export type AuthPluginComponents = Omit<
   BaseAuthPluginComponents,
-  "securityCards" | "accountCards"
+  "securityCards" | "accountCards" | "organizationCards"
 > & {
   /** Rendered as cards inside security settings */
   securityCards?: ComponentType<
@@ -46,6 +47,10 @@ export type AuthPluginComponents = Omit<
   accountCards?: ComponentType<
     AccountCardProps & { variant?: CardProps["variant"] }
   >[]
+  /** Rendered as cards inside the active organization's settings */
+  organizationCards?: ComponentType<
+    OrganizationCardProps & { variant?: CardProps["variant"] }
+  >[]
   /** Rendered as items inside the `UserButton` dropdown (e.g. account switcher). */
   userMenuItems?: ComponentType<UserMenuItemProps>[]
 }

package/src/lib/auth/organization-plugin.tsx

@@ -0,0 +1,32 @@
+import { createAuthPlugin } from "@better-auth-ui/core"
+import {
+  organizationPlugin as coreOrganizationPlugin,
+  type OrganizationLocalization,
+  type OrganizationPluginOptions
+} from "@better-auth-ui/core/plugins"
+import { Briefcase } from "@gravity-ui/icons"
+import { OrganizationsSettings } from "../../components/auth/organization/organizations-settings"
+
+export const organizationPlugin = createAuthPlugin(
+  coreOrganizationPlugin.id,
+  (options: OrganizationPluginOptions = {}) => {
+    const coreOptions = coreOrganizationPlugin(options)
+
+    return {
+      ...coreOptions,
+      localization: coreOptions.localization as OrganizationLocalization,
+      settingsTabs: [
+        {
+          view: "organizations",
+          label: (
+            <>
+              <Briefcase className="text-muted" />
+              {coreOptions.localization.organizations}
+            </>
+          ),
+          component: OrganizationsSettings
+        }
+      ]
+    }
+  }
+)

package/src/plugins.ts

@@ -1,8 +1,9 @@
 "use client"
 
 export * from "./components/auth/api-key/api-keys"
+export * from "./components/auth/api-key/organization-api-keys"
 export * from "./components/auth/delete-user/danger-zone"
-export * from "./components/auth/delete-user/delete-user"
+export * from "./components/auth/delete-user/delete-account"
 // Plugin-contributed components that may be used standalone
 export * from "./components/auth/magic-link/magic-link"
 export * from "./components/auth/multi-session/manage-account"
@@ -10,6 +11,28 @@ export * from "./components/auth/multi-session/manage-accounts"
 export * from "./components/auth/multi-session/switch-account-submenu"
 export * from "./components/auth/multi-session/switch-account-submenu-content"
 export * from "./components/auth/multi-session/switch-account-submenu-item"
+export * from "./components/auth/organization/change-organization-logo"
+export * from "./components/auth/organization/create-organization-dialog"
+export * from "./components/auth/organization/delete-organization"
+export * from "./components/auth/organization/delete-organization-skeleton"
+export * from "./components/auth/organization/invite-member-dialog"
+export * from "./components/auth/organization/leave-organization"
+export * from "./components/auth/organization/organization"
+export * from "./components/auth/organization/organization-danger-zone"
+export * from "./components/auth/organization/organization-invitations"
+export * from "./components/auth/organization/organization-invitations-empty"
+export * from "./components/auth/organization/organization-logo"
+export * from "./components/auth/organization/organization-members"
+export * from "./components/auth/organization/organization-people"
+export * from "./components/auth/organization/organization-profile"
+export * from "./components/auth/organization/organization-row"
+export * from "./components/auth/organization/organization-settings"
+export * from "./components/auth/organization/organization-switcher"
+export * from "./components/auth/organization/organization-view"
+export * from "./components/auth/organization/organization-view-skeleton"
+export * from "./components/auth/organization/organizations"
+export * from "./components/auth/organization/organizations-settings"
+export * from "./components/auth/organization/user-invitations"
 export * from "./components/auth/passkey/passkeys"
 export * from "./components/auth/theme/appearance"
 export * from "./components/auth/theme/theme-toggle-item"
@@ -20,6 +43,7 @@ export * from "./lib/auth/auth-plugin"
 export * from "./lib/auth/delete-user-plugin"
 export * from "./lib/auth/magic-link-plugin"
 export * from "./lib/auth/multi-session-plugin"
+export * from "./lib/auth/organization-plugin"
 export * from "./lib/auth/passkey-plugin"
 export * from "./lib/auth/theme-plugin"
 export * from "./lib/auth/username-plugin"

package/dist/components/auth/delete-user/delete-user.d.ts

@@ -1,9 +0,0 @@
-import { CardProps } from '@heroui/react';
-export type DeleteUserProps = {
-    className?: string;
-    variant?: CardProps["variant"];
-};
-/**
- * Danger-zone card to delete the authenticated account, with a confirmation dialog and toasts.
- */
-export declare function DeleteUser({ className, variant, ...props }: DeleteUserProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/delete-user/delete-user.js

@@ -1,95 +0,0 @@
-import { deleteUserPlugin as e } from "../../../lib/auth/delete-user-plugin.js";
-import { authQueryKeys as t } from "@better-auth-ui/core";
-import { useAuth as n, useAuthPlugin as r, useDeleteUser as i, useListAccounts as a } from "@better-auth-ui/react";
-import { TriangleExclamation as o } from "@gravity-ui/icons";
-import { AlertDialog as s, Button as c, Card as l, FieldError as u, Form as d, Input as f, Label as p, Spinner as m, TextField as h, toast as g } from "@heroui/react";
-import { useState as _ } from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { useQueryClient as b } from "@tanstack/react-query";
-//#region src/components/auth/delete-user/delete-user.tsx
-function x({ className: x, variant: S, ...C }) {
-	let { authClient: w, basePaths: T, localization: E, navigate: D, viewPaths: O } = n(), { localization: k, sendDeleteAccountVerification: A } = r(e), { data: j } = a(w), M = b(), [N, P] = _(!1), [F, I] = _(""), L = j?.some((e) => e.providerId === "credential"), R = !A && L, { mutate: z, isPending: B } = i(w), V = (e) => {
-		P(e), I("");
-	}, H = async (e) => {
-		e.preventDefault(), z({ ...R ? { password: F } : {} }, { onSuccess: () => {
-			P(!1), I(""), A ? g.success(k.deleteUserVerificationSent) : (g.success(k.deleteUserSuccess), M.removeQueries({ queryKey: t.all }), D({
-				to: `${T.auth}/${O.auth.signIn}`,
-				replace: !0
-			}));
-		} });
-	};
-	return /* @__PURE__ */ v(l, {
-		className: x,
-		variant: S,
-		...C,
-		children: /* @__PURE__ */ y(l.Content, {
-			className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-			children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-				className: "text-sm font-medium leading-tight",
-				children: k.deleteUser
-			}), /* @__PURE__ */ v("p", {
-				className: "text-muted text-xs mt-0.5",
-				children: k.deleteUserDescription
-			})] }), /* @__PURE__ */ y(s, { children: [/* @__PURE__ */ v(c, {
-				isDisabled: !j,
-				size: "sm",
-				variant: "danger-soft",
-				onPress: () => P(!0),
-				children: k.deleteUser
-			}), /* @__PURE__ */ v(s.Backdrop, {
-				isOpen: N,
-				onOpenChange: V,
-				children: /* @__PURE__ */ v(s.Container, { children: /* @__PURE__ */ v(s.Dialog, { children: /* @__PURE__ */ y(d, {
-					onSubmit: H,
-					children: [
-						/* @__PURE__ */ v(s.CloseTrigger, {}),
-						/* @__PURE__ */ y(s.Header, { children: [/* @__PURE__ */ v(s.Icon, {
-							status: "danger",
-							children: /* @__PURE__ */ v(o, {})
-						}), /* @__PURE__ */ v(s.Heading, { children: k.deleteUser })] }),
-						/* @__PURE__ */ y(s.Body, {
-							className: "overflow-visible",
-							children: [/* @__PURE__ */ v("p", {
-								className: "text-muted text-sm",
-								children: k.deleteUserDescription
-							}), R && /* @__PURE__ */ y(h, {
-								className: "mt-4",
-								name: "password",
-								type: "password",
-								isDisabled: B,
-								value: F,
-								onChange: I,
-								children: [
-									/* @__PURE__ */ v(p, { children: E.auth.password }),
-									/* @__PURE__ */ v(f, {
-										autoComplete: "current-password",
-										placeholder: E.auth.passwordPlaceholder,
-										required: !0,
-										variant: "secondary"
-									}),
-									/* @__PURE__ */ v(u, {})
-								]
-							})]
-						}),
-						/* @__PURE__ */ y(s.Footer, { children: [/* @__PURE__ */ v(c, {
-							slot: "close",
-							variant: "tertiary",
-							isDisabled: B,
-							children: E.settings.cancel
-						}), /* @__PURE__ */ y(c, {
-							type: "submit",
-							variant: "danger",
-							isPending: B,
-							children: [B && /* @__PURE__ */ v(m, {
-								color: "current",
-								size: "sm"
-							}), k.deleteUser]
-						})] })
-					]
-				}) }) })
-			})] })]
-		})
-	});
-}
-//#endregion
-export { x as DeleteUser };