@better-auth-ui/heroui 1.6.8 → 1.6.10

package/dist/user-view--47tVtJ3.js

@@ -0,0 +1,113 @@
+import { authMutationKeys as e, getProviderName as t } from "@better-auth-ui/core";
+import { providerIcons as n, useAuth as r, useSession as i, useSignInSocial as a } from "@better-auth-ui/react";
+import { Person as o } from "@gravity-ui/icons";
+import { Avatar as s, Button as c, Separator as l, Skeleton as u, Spinner as d, cn as f } from "@heroui/react";
+import { useMemo as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useIsMutating as g } from "@tanstack/react-query";
+//#region src/components/auth/field-separator.tsx
+function _({ children: e }) {
+	return /* @__PURE__ */ h("div", {
+		className: "flex items-center gap-4",
+		children: [
+			/* @__PURE__ */ m(l, { className: "flex-1" }),
+			/* @__PURE__ */ m("p", {
+				className: "text-xs text-muted shrink-0",
+				children: e
+			}),
+			/* @__PURE__ */ m(l, { className: "flex-1" })
+		]
+	});
+}
+//#endregion
+//#region src/components/auth/provider-button.tsx
+function v({ provider: i, display: o = "full", variant: s = "tertiary", ...l }) {
+	let { authClient: u, baseURL: f, localization: p, redirectTo: _ } = r(), v = `${f}${_}`, { mutate: y, isPending: b } = a(u), x = n[i];
+	return /* @__PURE__ */ h(c, {
+		variant: s,
+		isPending: g({ mutationKey: e.signIn.all }) + g({ mutationKey: e.signUp.all }) > 0,
+		onPress: () => y({
+			provider: i,
+			callbackURL: v
+		}),
+		...l,
+		"aria-label": t(i),
+		children: [b ? /* @__PURE__ */ m(d, {
+			color: "current",
+			size: "sm"
+		}) : /* @__PURE__ */ m(x, {}), o === "full" ? p.auth.continueWith.replace("{{provider}}", t(i)) : o === "name" ? t(i) : null]
+	});
+}
+//#endregion
+//#region src/components/auth/provider-buttons.tsx
+function y({ socialLayout: e = "auto" }) {
+	let { socialProviders: t } = r(), n = p(() => e === "auto" ? t?.length && t.length >= 4 ? "horizontal" : "vertical" : e, [e, t?.length]);
+	return /* @__PURE__ */ m("div", {
+		className: f("gap-3", n === "grid" && "grid grid-cols-2", n === "vertical" && "flex flex-col", n === "horizontal" && "flex flex-wrap"),
+		children: t?.map((e) => /* @__PURE__ */ m(v, {
+			provider: e,
+			display: n === "vertical" ? "full" : n === "grid" ? "name" : "icon",
+			className: f("w-full", n === "horizontal" && "flex-1")
+		}, e))
+	});
+}
+//#endregion
+//#region src/components/auth/user/user-avatar.tsx
+function b({ className: e, fallback: t, isPending: n, user: a, size: c = "sm", style: l, ...d }) {
+	let { authClient: p } = r(), { data: g, isPending: _ } = i(p, { enabled: !a && !n });
+	if ((n || _) && !a) return /* @__PURE__ */ m(u, {
+		className: f("rounded-full", c === "sm" ? "size-8" : c === "md" ? "size-10" : "size-12", e),
+		style: l
+	});
+	let v = a ?? g?.user, y = (v?.username || v?.name || v?.email)?.slice(0, 2).toUpperCase();
+	return /* @__PURE__ */ h(s, {
+		size: c,
+		className: f("rounded-full", e),
+		style: l,
+		...d,
+		children: [/* @__PURE__ */ m(s.Image, {
+			alt: v?.displayUsername || v?.name || v?.email,
+			src: v?.image ?? void 0
+		}), /* @__PURE__ */ m(s.Fallback, {
+			className: f(c === "lg" ? "text-xl" : c === "md" ? "text-base" : "text-sm"),
+			delayMs: v?.image ? 600 : void 0,
+			children: t || y || /* @__PURE__ */ m(o, { className: "size-4" })
+		})]
+	});
+}
+//#endregion
+//#region src/components/auth/user/user-view.tsx
+function x({ className: e, isPending: t, size: n = "md", hideSubtitle: a = !1, user: o, ...s }) {
+	let { authClient: c } = r(), { data: l, isPending: d } = i(c, { enabled: !o && !t }), p = o ?? l?.user;
+	return (t || d) && !o ? /* @__PURE__ */ h("div", {
+		className: f("flex items-center gap-2 min-w-0", e),
+		...s,
+		children: [/* @__PURE__ */ m(b, {
+			isPending: !0,
+			className: n === "sm" ? "size-5 [&>span]:text-xs" : void 0,
+			size: n === "lg" ? "md" : "sm"
+		}), /* @__PURE__ */ h("div", {
+			className: "flex flex-col gap-1 min-w-0",
+			children: [/* @__PURE__ */ m(u, { className: "h-3.5 w-24 rounded-lg" }), a ? null : /* @__PURE__ */ m(u, { className: "h-3 w-32 rounded-lg" })]
+		})]
+	}) : /* @__PURE__ */ h("div", {
+		className: f("flex items-center gap-2 min-w-0", e),
+		...s,
+		children: [/* @__PURE__ */ m(b, {
+			className: n === "sm" ? "size-5 [&>span]:text-xs" : void 0,
+			user: p,
+			size: n === "lg" ? "md" : "sm"
+		}), /* @__PURE__ */ h("div", {
+			className: "flex flex-col min-w-0",
+			children: [/* @__PURE__ */ m("p", {
+				className: "text-foreground text-sm font-medium leading-tight truncate",
+				children: p?.displayUsername || p?.name || p?.email
+			}), !a && (p?.displayUsername || p?.name) ? /* @__PURE__ */ m("p", {
+				className: "text-muted text-xs leading-tight truncate overflow-x-hidden",
+				children: p?.email
+			}) : null]
+		})]
+	});
+}
+//#endregion
+export { _ as a, v as i, b as n, y as r, x as t };

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.8",
+  "version": "1.6.10",
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "dev": "tsc --watch",
     "test": "vitest"
   },
   "files": [
@@ -13,48 +12,54 @@
   ],
   "exports": {
     ".": {
+      "development": "./src/index.tsx",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
     "./email": {
+      "development": "./src/email.ts",
       "types": "./dist/email.d.ts",
       "import": "./dist/email.js"
     },
     "./plugins": {
+      "development": "./src/plugins.ts",
       "types": "./dist/plugins.d.ts",
       "import": "./dist/plugins.js"
     },
-    "./styles": "./dist/styles.css"
+    "./styles": {
+      "development": "./src/styles.css",
+      "default": "./dist/styles.css"
+    }
   },
   "devDependencies": {
     "@gravity-ui/icons": "^2.18.0",
-    "@heroui/react": "^3.0.4",
-    "@heroui/styles": "^3.0.4",
+    "@heroui/react": "^3.1.0",
+    "@heroui/styles": "^3.1.0",
     "@internationalized/date": "^3.12.1",
-    "@tanstack/react-pacer": "^0.22.0",
-    "@tanstack/react-query": "^5.100.9",
+    "@tanstack/react-pacer": "^0.22.1",
+    "@tanstack/react-query": "^5.100.14",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^19.2.14",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/browser-playwright": "^4.1.5",
-    "better-auth": "^1.6.10",
+    "@types/react": "^19.2.15",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser-playwright": "^4.1.7",
+    "better-auth": "^1.6.11",
     "bowser": "^2.11.0",
-    "playwright": "^1.59.1",
+    "playwright": "^1.60.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "vitest": "^4.1.5"
+    "vitest": "^4.1.7"
   },
   "peerDependencies": {
     "@better-auth-ui/core": "*",
     "@better-auth-ui/react": "*",
     "@gravity-ui/icons": ">=2.18.0",
-    "@heroui/react": ">=3.0.4",
-    "@heroui/styles": ">=3.0.4",
+    "@heroui/react": ">=3.1.0",
+    "@heroui/styles": ">=3.1.0",
     "@internationalized/date": ">=3.12.1",
-    "@tanstack/react-pacer": ">=0.22.0",
-    "@tanstack/react-query": ">=5.100.9",
-    "better-auth": ">=1.6.10",
+    "@tanstack/react-pacer": ">=0.22.1",
+    "@tanstack/react-query": ">=5.100.14",
+    "better-auth": ">=1.6.11",
     "react": ">=19.2.6",
     "react-dom": ">=19.2.6",
     "bowser": ">=2.11.0"

package/src/components/auth/api-key/api-key.tsx

@@ -12,9 +12,13 @@ import { DeleteApiKeyDialog } from "./delete-api-key-dialog"
 
 export type ApiKeyProps = {
   apiKey: ListedApiKey
+  /** Hide the row's delete button (e.g., when caller lacks `apiKey:delete`). */
+  hideDelete?: boolean
+  /** Scope the delete payload to an organization (sets `configId`). */
+  organizationId?: string
 }
 
-export function ApiKey({ apiKey }: ApiKeyProps) {
+export function ApiKey({ apiKey, hideDelete, organizationId }: ApiKeyProps) {
   const { localization } = useAuth()
   const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
   const [deleteOpen, setDeleteOpen] = useState(false)
@@ -42,23 +46,28 @@ export function ApiKey({ apiKey }: ApiKeyProps) {
         </span>
       </div>
 
-      <Button
-        className="ml-auto shrink-0"
-        variant="outline"
-        size="sm"
-        onPress={() => setDeleteOpen(true)}
-        aria-label={apiKeyLocalization.deleteApiKey}
-      >
-        <Xmark />
+      {!hideDelete && (
+        <>
+          <Button
+            className="ml-auto shrink-0"
+            variant="outline"
+            size="sm"
+            onPress={() => setDeleteOpen(true)}
+            aria-label={apiKeyLocalization.deleteApiKey}
+          >
+            <Xmark />
 
-        {localization.settings.delete}
-      </Button>
+            {localization.settings.delete}
+          </Button>
 
-      <DeleteApiKeyDialog
-        isOpen={deleteOpen}
-        onOpenChange={setDeleteOpen}
-        apiKey={apiKey}
-      />
+          <DeleteApiKeyDialog
+            isOpen={deleteOpen}
+            onOpenChange={setDeleteOpen}
+            apiKey={apiKey}
+            organizationId={organizationId}
+          />
+        </>
+      )}
     </div>
   )
 }

package/src/components/auth/api-key/api-keys-empty.tsx

@@ -6,9 +6,11 @@ import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
 
 export type ApiKeysEmptyProps = {
   onCreatePress: () => void
+  /** Hide the empty-state "Create API key" button. */
+  hideCreate?: boolean
 }
 
-export function ApiKeysEmpty({ onCreatePress }: ApiKeysEmptyProps) {
+export function ApiKeysEmpty({ onCreatePress, hideCreate }: ApiKeysEmptyProps) {
   const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
 
   return (
@@ -25,9 +27,11 @@ export function ApiKeysEmpty({ onCreatePress }: ApiKeysEmptyProps) {
         </p>
       </div>
 
-      <Button size="sm" onPress={onCreatePress}>
-        {apiKeyLocalization.createApiKey}
-      </Button>
+      {!hideCreate && (
+        <Button size="sm" onPress={onCreatePress}>
+          {apiKeyLocalization.createApiKey}
+        </Button>
+      )}
     </div>
   )
 }

package/src/components/auth/api-key/api-keys.tsx

@@ -16,16 +16,39 @@ import { CreateApiKeyDialog } from "./create-api-key-dialog"
 export type ApiKeysProps = {
   className?: string
   variant?: CardProps["variant"]
+  /** Scope the list and create payload to an organization. */
+  organizationId?: string
+  /** Force the loading skeleton and disable the list query. */
+  isPending?: boolean
+  /** Hide the "Create API key" button (header + empty state). */
+  hideCreate?: boolean
+  /** Hide the per-row delete button on listed keys. */
+  hideDelete?: boolean
 }
 
-export function ApiKeys({ className, variant }: ApiKeysProps) {
+export function ApiKeys({
+  className,
+  variant,
+  organizationId,
+  isPending: isPendingProp,
+  hideCreate,
+  hideDelete
+}: ApiKeysProps) {
   const { authClient } = useAuth()
   const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
 
-  const { data: listData, isPending } = useListApiKeys(
-    authClient as ApiKeyAuthClient
+  const { data: listData, isPending: isListPending } = useListApiKeys(
+    authClient as ApiKeyAuthClient,
+    {
+      enabled: !isPendingProp,
+      ...(organizationId
+        ? { query: { organizationId, configId: "organization" } }
+        : {})
+    }
   )
 
+  const isPending = isPendingProp || isListPending
+
   const [createOpen, setCreateOpen] = useState(false)
 
   return (
@@ -35,14 +58,16 @@ export function ApiKeys({ className, variant }: ApiKeysProps) {
           {apiKeyLocalization.apiKeys}
         </h2>
 
-        <Button
-          className="shrink-0"
-          size="sm"
-          isDisabled={isPending}
-          onPress={() => setCreateOpen(true)}
-        >
-          {apiKeyLocalization.createApiKey}
-        </Button>
+        {!hideCreate && (
+          <Button
+            className="shrink-0"
+            size="sm"
+            isDisabled={isPending}
+            onPress={() => setCreateOpen(true)}
+          >
+            {apiKeyLocalization.createApiKey}
+          </Button>
+        )}
       </div>
 
       <Card variant={variant}>
@@ -50,7 +75,10 @@ export function ApiKeys({ className, variant }: ApiKeysProps) {
           {isPending ? (
             <ApiKeySkeleton />
           ) : !listData?.apiKeys.length ? (
-            <ApiKeysEmpty onCreatePress={() => setCreateOpen(true)} />
+            <ApiKeysEmpty
+              onCreatePress={() => setCreateOpen(true)}
+              hideCreate={hideCreate}
+            />
           ) : (
             listData?.apiKeys.map((key, index) => (
               <div key={key.id}>
@@ -58,14 +86,24 @@ export function ApiKeys({ className, variant }: ApiKeysProps) {
                   <div className="border-b border-dashed -mx-4 my-4" />
                 )}
 
-                <ApiKey apiKey={key} />
+                <ApiKey
+                  apiKey={key}
+                  hideDelete={hideDelete}
+                  organizationId={organizationId}
+                />
               </div>
             ))
           )}
         </Card.Content>
       </Card>
 
-      <CreateApiKeyDialog isOpen={createOpen} onOpenChange={setCreateOpen} />
+      {!hideCreate && (
+        <CreateApiKeyDialog
+          isOpen={createOpen}
+          onOpenChange={setCreateOpen}
+          organizationId={organizationId}
+        />
+      )}
     </div>
   )
 }

package/src/components/auth/api-key/create-api-key-dialog.tsx

@@ -24,11 +24,14 @@ import { NewApiKeyDialog } from "./new-api-key-dialog"
 export type CreateApiKeyDialogProps = {
   isOpen: boolean
   onOpenChange: (open: boolean) => void
+  /** Create an organization-owned key by passing the organization id. */
+  organizationId?: string
 }
 
 export function CreateApiKeyDialog({
   isOpen,
-  onOpenChange
+  onOpenChange,
+  organizationId
 }: CreateApiKeyDialogProps) {
   const { authClient, localization } = useAuth()
   const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
@@ -56,7 +59,17 @@ export function CreateApiKeyDialog({
     const formData = new FormData(e.target as HTMLFormElement)
     const name = (formData.get("name") as string)?.trim()
 
-    createApiKey(name ? { name } : undefined, {
+    const payload =
+      name || organizationId
+        ? {
+            ...(name ? { name } : {}),
+            ...(organizationId
+              ? { organizationId, configId: "organization" }
+              : {})
+          }
+        : undefined
+
+    createApiKey(payload, {
       onSuccess: (result) => {
         handleOpenChange(false)
         setKeyName(name)

package/src/components/auth/api-key/delete-api-key-dialog.tsx

@@ -21,12 +21,15 @@ export type DeleteApiKeyDialogProps = {
   isOpen: boolean
   onOpenChange: (open: boolean) => void
   apiKey: ListedApiKey
+  /** Scope the delete payload to an organization (sets `configId`). */
+  organizationId?: string
 }
 
 export function DeleteApiKeyDialog({
   isOpen,
   onOpenChange,
-  apiKey
+  apiKey,
+  organizationId
 }: DeleteApiKeyDialogProps) {
   const { authClient, localization } = useAuth()
   const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
@@ -77,7 +80,12 @@ export function DeleteApiKeyDialog({
 
             <Button
               variant="danger"
-              onPress={() => deleteApiKey({ keyId: apiKey.id })}
+              onPress={() =>
+                deleteApiKey({
+                  keyId: apiKey.id,
+                  ...(organizationId ? { configId: "organization" } : {})
+                })
+              }
               isPending={isDeleting}
             >
               {isDeleting && <Spinner color="current" size="sm" />}

package/src/components/auth/api-key/organization-api-keys.tsx

@@ -0,0 +1,55 @@
+import {
+  type OrganizationAuthClient,
+  useActiveOrganization,
+  useAuth,
+  useListOrganizationMembers,
+  useSession
+} from "@better-auth-ui/react"
+import type { CardProps } from "@heroui/react"
+
+import { ApiKeys } from "./api-keys"
+
+export type OrganizationApiKeysProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * {@link ApiKeys} scoped to the active organization.
+ *
+ * Hidden for members whose role isn't `owner`. Better Auth's
+ * `/organization/has-permission` endpoint isn't usable for `apiKey:*` checks
+ * (it doesn't pass `allowCreatorAllPermissions` and the default org AC has no
+ * `apiKey` statements), so we gate on role directly.
+ */
+export function OrganizationApiKeys({
+  className,
+  variant
+}: OrganizationApiKeysProps) {
+  const { authClient } = useAuth()
+  const { data: session } = useSession(authClient)
+
+  const { data: activeOrganization, isPending: activeOrganizationPending } =
+    useActiveOrganization(authClient as OrganizationAuthClient)
+
+  const { data: membersData } = useListOrganizationMembers(
+    authClient as OrganizationAuthClient
+  )
+
+  const canManageApiKeys = membersData?.members.some(
+    (member) => member.role === "owner" && member.userId === session?.user.id
+  )
+
+  if (!canManageApiKeys) {
+    return null
+  }
+
+  return (
+    <ApiKeys
+      className={className}
+      variant={variant}
+      organizationId={activeOrganization?.id}
+      isPending={activeOrganizationPending}
+    />
+  )
+}

package/src/components/auth/delete-user/danger-zone.tsx

@@ -2,7 +2,7 @@ import { useAuth } from "@better-auth-ui/react"
 import { type CardProps, cn } from "@heroui/react"
 import type { ComponentProps } from "react"
 
-import { DeleteUser } from "./delete-user"
+import { DeleteAccount } from "./delete-account"
 
 export type DangerZoneProps = {
   className?: string
@@ -10,7 +10,7 @@ export type DangerZoneProps = {
 }
 
 /**
- * Renders the danger zone heading and {@link DeleteUser}.
+ * Renders the danger zone heading and {@link DeleteAccount}.
  * Registered as a `securityCard` by `deleteUserPlugin()`; gate by registering the plugin.
  */
 export function DangerZone({
@@ -26,7 +26,7 @@ export function DangerZone({
         {localization.settings.dangerZone}
       </h2>
 
-      <DeleteUser variant={variant} />
+      <DeleteAccount variant={variant} />
     </div>
   )
 }

package/src/components/auth/delete-user/{delete-user.tsx → delete-account.tsx}

@@ -24,7 +24,7 @@ import { type SyntheticEvent, useState } from "react"
 
 import { deleteUserPlugin } from "../../../lib/auth/delete-user-plugin"
 
-export type DeleteUserProps = {
+export type DeleteAccountProps = {
   className?: string
   variant?: CardProps["variant"]
 }
@@ -32,11 +32,11 @@ export type DeleteUserProps = {
 /**
  * Danger-zone card to delete the authenticated account, with a confirmation dialog and toasts.
  */
-export function DeleteUser({
+export function DeleteAccount({
   className,
   variant,
   ...props
-}: DeleteUserProps & Omit<CardProps, "children">) {
+}: DeleteAccountProps & Omit<CardProps, "children">) {
   const { authClient, basePaths, localization, navigate, viewPaths } = useAuth()
 
   const {
@@ -94,11 +94,11 @@ export function DeleteUser({
       <Card.Content className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <p className="text-sm font-medium leading-tight">
-            {deleteUserLocalization.deleteUser}
+            {deleteUserLocalization.deleteAccount}
           </p>
 
           <p className="text-muted text-xs mt-0.5">
-            {deleteUserLocalization.deleteUserDescription}
+            {deleteUserLocalization.deleteAccountDescription}
           </p>
         </div>
 
@@ -109,7 +109,7 @@ export function DeleteUser({
             variant="danger-soft"
             onPress={() => setConfirmOpen(true)}
           >
-            {deleteUserLocalization.deleteUser}
+            {deleteUserLocalization.deleteAccount}
           </Button>
 
           <AlertDialog.Backdrop
@@ -127,13 +127,13 @@ export function DeleteUser({
                     </AlertDialog.Icon>
 
                     <AlertDialog.Heading>
-                      {deleteUserLocalization.deleteUser}
+                      {deleteUserLocalization.deleteAccount}
                     </AlertDialog.Heading>
                   </AlertDialog.Header>
 
                   <AlertDialog.Body className="overflow-visible">
                     <p className="text-muted text-sm">
-                      {deleteUserLocalization.deleteUserDescription}
+                      {deleteUserLocalization.deleteAccountDescription}
                     </p>
 
                     {needsPassword && (
@@ -175,7 +175,7 @@ export function DeleteUser({
                     >
                       {isPending && <Spinner color="current" size="sm" />}
 
-                      {deleteUserLocalization.deleteUser}
+                      {deleteUserLocalization.deleteAccount}
                     </Button>
                   </AlertDialog.Footer>
                 </Form>

package/src/components/auth/email/organization-invitation-email.tsx

@@ -0,0 +1,38 @@
+import {
+  OrganizationInvitationEmail as OrganizationInvitationEmailPrimitive,
+  type OrganizationInvitationEmailProps
+} from "@better-auth-ui/react/email"
+import { cn } from "@heroui/react"
+
+export type { OrganizationInvitationEmailProps } from "@better-auth-ui/react/email"
+
+export function OrganizationInvitationEmail({
+  colors,
+  classNames,
+  ...props
+}: OrganizationInvitationEmailProps) {
+  return (
+    <OrganizationInvitationEmailPrimitive
+      colors={{
+        light: {
+          background: "#F5F5F5",
+          primary: "#0285F7",
+          primaryForeground: "#FCFCFC",
+          ...colors?.light
+        },
+        dark: {
+          background: "#060607",
+          primary: "#0584F6",
+          primaryForeground: "#FCFCFC",
+          ...colors?.dark
+        }
+      }}
+      classNames={{
+        ...classNames,
+        card: cn("border-none rounded-3xl", classNames?.card),
+        button: cn("rounded-full", classNames?.button)
+      }}
+      {...props}
+    />
+  )
+}