@better-auth-ui/heroui 1.6.7 → 1.6.9

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 };