@better-auth-ui/heroui 1.6.6 → 1.6.7

package/dist/components/auth/api-key/api-key-skeleton.d.ts

@@ -0,0 +1 @@
+export declare function ApiKeySkeleton(): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/api-key/api-key-skeleton.js

@@ -0,0 +1,21 @@
+import { Skeleton as e } from "@heroui/react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/auth/api-key/api-key-skeleton.tsx
+function r() {
+	return /* @__PURE__ */ t("div", {
+		className: "flex items-center justify-between",
+		children: /* @__PURE__ */ n("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ t(e, { className: "size-10 rounded-xl" }), /* @__PURE__ */ n("div", {
+				className: "flex flex-col gap-1",
+				children: [
+					/* @__PURE__ */ t(e, { className: "h-4 w-28 rounded-lg" }),
+					/* @__PURE__ */ t(e, { className: "h-3 w-36 rounded-lg" }),
+					/* @__PURE__ */ t(e, { className: "h-3 w-32 rounded-lg" })
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { r as ApiKeySkeleton };

package/dist/components/auth/api-key/api-key.d.ts

@@ -0,0 +1,5 @@
+import { ListedApiKey } from '@better-auth-ui/react';
+export type ApiKeyProps = {
+    apiKey: ListedApiKey;
+};
+export declare function ApiKey({ apiKey }: ApiKeyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/api-key/api-key.js

@@ -0,0 +1,55 @@
+import { apiKeyPlugin as e } from "../../../lib/auth/api-key-plugin.js";
+import { DeleteApiKeyDialog as t } from "./delete-api-key-dialog.js";
+import { useAuth as n, useAuthPlugin as r } from "@better-auth-ui/react";
+import { Key as i, Xmark as a } from "@gravity-ui/icons";
+import { Button as o } from "@heroui/react";
+import { useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/auth/api-key/api-key.tsx
+function u({ apiKey: u }) {
+	let { localization: d } = n(), { localization: f } = r(e), [p, m] = s(!1), h = `${u.start}${"*".repeat(16)}`;
+	return /* @__PURE__ */ l("div", {
+		className: "flex items-center gap-3",
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary",
+				children: /* @__PURE__ */ c(i, { className: "size-4.5" })
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "flex flex-col min-w-0",
+				children: [
+					/* @__PURE__ */ c("span", {
+						className: "text-sm font-medium leading-tight truncate",
+						children: u.name || f.apiKey
+					}),
+					/* @__PURE__ */ c("span", {
+						className: "text-xs text-muted font-mono truncate",
+						children: h
+					}),
+					/* @__PURE__ */ c("span", {
+						className: "text-xs text-muted",
+						children: new Date(u.createdAt).toLocaleString(void 0, {
+							dateStyle: "medium",
+							timeStyle: "short"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ l(o, {
+				className: "ml-auto shrink-0",
+				variant: "outline",
+				size: "sm",
+				onPress: () => m(!0),
+				"aria-label": f.deleteApiKey,
+				children: [/* @__PURE__ */ c(a, {}), d.settings.delete]
+			}),
+			/* @__PURE__ */ c(t, {
+				isOpen: p,
+				onOpenChange: m,
+				apiKey: u
+			})
+		]
+	});
+}
+//#endregion
+export { u as ApiKey };

package/dist/components/auth/api-key/api-keys-empty.d.ts

@@ -0,0 +1,4 @@
+export type ApiKeysEmptyProps = {
+    onCreatePress: () => void;
+};
+export declare function ApiKeysEmpty({ onCreatePress }: ApiKeysEmptyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/api-key/api-keys-empty.js

@@ -0,0 +1,35 @@
+import { apiKeyPlugin as e } from "../../../lib/auth/api-key-plugin.js";
+import { useAuthPlugin as t } from "@better-auth-ui/react";
+import { Key as n } from "@gravity-ui/icons";
+import { Button as r } from "@heroui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/auth/api-key/api-keys-empty.tsx
+function o({ onCreatePress: o }) {
+	let { localization: s } = t(e);
+	return /* @__PURE__ */ a("div", {
+		className: "flex flex-col items-center justify-center gap-4",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex size-10 items-center justify-center rounded-xl bg-surface-secondary",
+				children: /* @__PURE__ */ i(n, { className: "size-4.5" })
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "flex flex-col items-center justify-center gap-1 text-center",
+				children: [/* @__PURE__ */ i("p", {
+					className: "text-sm font-semibold",
+					children: s.noApiKeys
+				}), /* @__PURE__ */ i("p", {
+					className: "text-muted text-xs",
+					children: s.apiKeysDescription
+				})]
+			}),
+			/* @__PURE__ */ i(r, {
+				size: "sm",
+				onPress: o,
+				children: s.createApiKey
+			})
+		]
+	});
+}
+//#endregion
+export { o as ApiKeysEmpty };

package/dist/components/auth/api-key/api-keys.d.ts

@@ -0,0 +1,6 @@
+import { CardProps } from '@heroui/react';
+export type ApiKeysProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+export declare function ApiKeys({ className, variant }: ApiKeysProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/api-key/api-keys.js

@@ -0,0 +1,41 @@
+import { apiKeyPlugin as e } from "../../../lib/auth/api-key-plugin.js";
+import { ApiKey as t } from "./api-key.js";
+import { ApiKeySkeleton as n } from "./api-key-skeleton.js";
+import { ApiKeysEmpty as r } from "./api-keys-empty.js";
+import { CreateApiKeyDialog as i } from "./create-api-key-dialog.js";
+import { useAuth as a, useAuthPlugin as o, useListApiKeys as s } from "@better-auth-ui/react";
+import { Button as c, Card as l, cn as u } from "@heroui/react";
+import { useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/auth/api-key/api-keys.tsx
+function m({ className: m, variant: h }) {
+	let { authClient: g } = a(), { localization: _ } = o(e), { data: v, isPending: y } = s(g), [b, x] = d(!1);
+	return /* @__PURE__ */ p("div", {
+		className: u("flex flex-col gap-3", m),
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "flex items-end justify-between gap-3",
+				children: [/* @__PURE__ */ f("h2", {
+					className: "text-sm font-semibold truncate",
+					children: _.apiKeys
+				}), /* @__PURE__ */ f(c, {
+					className: "shrink-0",
+					size: "sm",
+					isDisabled: y,
+					onPress: () => x(!0),
+					children: _.createApiKey
+				})]
+			}),
+			/* @__PURE__ */ f(l, {
+				variant: h,
+				children: /* @__PURE__ */ f(l.Content, { children: y ? /* @__PURE__ */ f(n, {}) : v?.apiKeys.length ? v?.apiKeys.map((e, n) => /* @__PURE__ */ p("div", { children: [n > 0 && /* @__PURE__ */ f("div", { className: "border-b border-dashed -mx-4 my-4" }), /* @__PURE__ */ f(t, { apiKey: e })] }, e.id)) : /* @__PURE__ */ f(r, { onCreatePress: () => x(!0) }) })
+			}),
+			/* @__PURE__ */ f(i, {
+				isOpen: b,
+				onOpenChange: x
+			})
+		]
+	});
+}
+//#endregion
+export { m as ApiKeys };

package/dist/components/auth/api-key/create-api-key-dialog.d.ts

@@ -0,0 +1,5 @@
+export type CreateApiKeyDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+};
+export declare function CreateApiKeyDialog({ isOpen, onOpenChange }: CreateApiKeyDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/api-key/create-api-key-dialog.js

@@ -0,0 +1,74 @@
+import { apiKeyPlugin as e } from "../../../lib/auth/api-key-plugin.js";
+import { NewApiKeyDialog as t } from "./new-api-key-dialog.js";
+import { useAuth as n, useAuthPlugin as r, useCreateApiKey as i } from "@better-auth-ui/react";
+import { Key as a } from "@gravity-ui/icons";
+import { AlertDialog as o, Button as s, FieldError as c, Form as l, Input as u, Label as d, Spinner as f, TextField as p } from "@heroui/react";
+import { useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/auth/api-key/create-api-key-dialog.tsx
+function v({ isOpen: v, onOpenChange: y }) {
+	let { authClient: b, localization: x } = n(), { localization: S } = r(e), { mutate: C, isPending: w } = i(b), [T, E] = m(!1), [D, O] = m(null), [k, A] = m(null), j = (e) => {
+		e || (O(null), A(null)), y(e);
+	};
+	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(o.Backdrop, {
+		isOpen: v,
+		onOpenChange: j,
+		children: /* @__PURE__ */ g(o.Container, { children: /* @__PURE__ */ g(o.Dialog, { children: /* @__PURE__ */ _(l, {
+			onSubmit: (e) => {
+				e.preventDefault();
+				let t = new FormData(e.target).get("name");
+				C(t ? { name: t.trim() } : void 0, { onSuccess: (e) => {
+					j(!1), O(t), A(e.key), E(!0);
+				} });
+			},
+			children: [
+				/* @__PURE__ */ g(o.CloseTrigger, {}),
+				/* @__PURE__ */ _(o.Header, { children: [/* @__PURE__ */ g(o.Icon, {
+					status: "default",
+					children: /* @__PURE__ */ g(a, {})
+				}), /* @__PURE__ */ g(o.Heading, { children: S.createApiKey })] }),
+				/* @__PURE__ */ _(o.Body, {
+					className: "overflow-visible",
+					children: [/* @__PURE__ */ g("p", {
+						className: "text-muted text-sm",
+						children: S.apiKeysDescription
+					}), /* @__PURE__ */ _(p, {
+						className: "mt-4",
+						id: "name",
+						name: "name",
+						isDisabled: w,
+						children: [
+							/* @__PURE__ */ g(d, { children: S.name }),
+							/* @__PURE__ */ g(u, {
+								autoFocus: !0,
+								placeholder: x.settings.optional,
+								variant: "secondary"
+							}),
+							/* @__PURE__ */ g(c, {})
+						]
+					})]
+				}),
+				/* @__PURE__ */ _(o.Footer, { children: [/* @__PURE__ */ g(s, {
+					slot: "close",
+					variant: "tertiary",
+					isDisabled: w,
+					children: x.settings.cancel
+				}), /* @__PURE__ */ _(s, {
+					type: "submit",
+					isPending: w,
+					children: [w && /* @__PURE__ */ g(f, {
+						color: "current",
+						size: "sm"
+					}), S.createApiKey]
+				})] })
+			]
+		}) }) })
+	}), /* @__PURE__ */ g(t, {
+		isOpen: T,
+		onOpenChange: E,
+		secretKey: k,
+		name: D
+	})] });
+}
+//#endregion
+export { v as CreateApiKeyDialog };

package/dist/components/auth/api-key/delete-api-key-dialog.d.ts

@@ -0,0 +1,7 @@
+import { ListedApiKey } from '@better-auth-ui/react';
+export type DeleteApiKeyDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    apiKey: ListedApiKey;
+};
+export declare function DeleteApiKeyDialog({ isOpen, onOpenChange, apiKey }: DeleteApiKeyDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/api-key/delete-api-key-dialog.js

@@ -0,0 +1,51 @@
+import { apiKeyPlugin as e } from "../../../lib/auth/api-key-plugin.js";
+import { useAuth as t, useAuthPlugin as n, useDeleteApiKey as r } from "@better-auth-ui/react";
+import { Key as i } from "@gravity-ui/icons";
+import { AlertDialog as a, Button as o, Input as s, Label as c, Spinner as l, TextField as u } from "@heroui/react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/auth/api-key/delete-api-key-dialog.tsx
+function p({ isOpen: p, onOpenChange: m, apiKey: h }) {
+	let { authClient: g, localization: _ } = t(), { localization: v } = n(e), y = `${h.start}${"*".repeat(16)}`, { mutate: b, isPending: x } = r(g, { onSuccess: () => m(!1) });
+	return /* @__PURE__ */ d(a.Backdrop, {
+		isOpen: p,
+		onOpenChange: m,
+		children: /* @__PURE__ */ d(a.Container, { children: /* @__PURE__ */ f(a.Dialog, { children: [
+			/* @__PURE__ */ d(a.CloseTrigger, {}),
+			/* @__PURE__ */ f(a.Header, { children: [/* @__PURE__ */ d(a.Icon, {
+				status: "danger",
+				children: /* @__PURE__ */ d(i, {})
+			}), /* @__PURE__ */ d(a.Heading, { children: v.deleteApiKey })] }),
+			/* @__PURE__ */ f(a.Body, {
+				className: "flex flex-col gap-4 overflow-visible",
+				children: [/* @__PURE__ */ d("p", {
+					className: "text-muted text-sm",
+					children: v.deleteApiKeyWarning
+				}), /* @__PURE__ */ f(u, {
+					value: y,
+					className: "font-mono text-xs",
+					variant: "secondary",
+					children: [/* @__PURE__ */ d(c, { children: h.name || v.apiKey }), /* @__PURE__ */ d(s, {
+						readOnly: !0,
+						className: "font-mono text-xs"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ f(a.Footer, { children: [/* @__PURE__ */ d(o, {
+				slot: "close",
+				variant: "tertiary",
+				isDisabled: x,
+				children: _.settings.cancel
+			}), /* @__PURE__ */ f(o, {
+				variant: "danger",
+				onPress: () => b({ keyId: h.id }),
+				isPending: x,
+				children: [x && /* @__PURE__ */ d(l, {
+					color: "current",
+					size: "sm"
+				}), v.deleteApiKey]
+			})] })
+		] }) })
+	});
+}
+//#endregion
+export { p as DeleteApiKeyDialog };

package/dist/components/auth/api-key/new-api-key-dialog.d.ts

@@ -0,0 +1,7 @@
+export type NewApiKeyDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    name: string | null;
+    secretKey: string | null;
+};
+export declare function NewApiKeyDialog({ isOpen, onOpenChange, name, secretKey }: NewApiKeyDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/api-key/new-api-key-dialog.js

@@ -0,0 +1,60 @@
+import { apiKeyPlugin as e } from "../../../lib/auth/api-key-plugin.js";
+import { useAuth as t, useAuthPlugin as n } from "@better-auth-ui/react";
+import { Check as r, Copy as i, Key as a } from "@gravity-ui/icons";
+import { AlertDialog as o, Button as s, InputGroup as c, Label as l, TextField as u, toast as d } from "@heroui/react";
+import { useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/auth/api-key/new-api-key-dialog.tsx
+function h({ isOpen: h, onOpenChange: g, name: _, secretKey: v }) {
+	let { localization: y } = t(), { localization: b } = n(e), [x, S] = f(!1);
+	return /* @__PURE__ */ p(o.Backdrop, {
+		isOpen: h,
+		onOpenChange: g,
+		children: /* @__PURE__ */ p(o.Container, { children: /* @__PURE__ */ m(o.Dialog, { children: [
+			/* @__PURE__ */ p(o.CloseTrigger, {}),
+			/* @__PURE__ */ m(o.Header, { children: [/* @__PURE__ */ p(o.Icon, {
+				status: "warning",
+				children: /* @__PURE__ */ p(a, {})
+			}), /* @__PURE__ */ p(o.Heading, { children: b.newApiKey })] }),
+			/* @__PURE__ */ m(o.Body, {
+				className: "flex flex-col gap-4 overflow-visible",
+				children: [/* @__PURE__ */ p("p", {
+					className: "text-muted text-sm",
+					children: b.newApiKeyWarning
+				}), /* @__PURE__ */ m(u, {
+					value: v ?? "",
+					className: "font-mono text-xs",
+					children: [/* @__PURE__ */ p(l, { children: _ || b.apiKey }), /* @__PURE__ */ m(c, {
+						variant: "secondary",
+						children: [/* @__PURE__ */ p(c.Input, {
+							readOnly: !0,
+							className: "font-mono text-xs"
+						}), /* @__PURE__ */ p(c.Suffix, {
+							className: "px-0",
+							children: /* @__PURE__ */ p(s, {
+								isIconOnly: !0,
+								"aria-label": y.settings.copyToClipboard,
+								size: "sm",
+								variant: "ghost",
+								onPress: async () => {
+									if (v) try {
+										await navigator.clipboard.writeText(v), S(!0), setTimeout(() => S(!1), 1500);
+									} catch (e) {
+										d.danger(e instanceof Error ? e.message : String(e));
+									}
+								},
+								children: p(x ? r : i, {})
+							})
+						})]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ p(o.Footer, { children: /* @__PURE__ */ p(s, {
+				slot: "close",
+				children: b.dismissNewKey
+			}) })
+		] }) })
+	});
+}
+//#endregion
+export { h as NewApiKeyDialog };

package/dist/components/auth/multi-session/switch-account-submenu-content.js

@@ -3,27 +3,26 @@ import { SwitchAccountSubmenuItem as t } from "./switch-account-submenu-item.js"
 import { multiSessionPlugin as n } from "../../../lib/auth/multi-session-plugin.js";
 import { useAuth as r, useAuthPlugin as i, useListDeviceSessions as a, useSession as o } from "@better-auth-ui/react";
 import { Check as s, CirclePlus as c } from "@gravity-ui/icons";
-import { Dropdown as l, Label as u, Separator as d } from "@heroui/react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Dropdown as l, Label as u } from "@heroui/react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/auth/multi-session/switch-account-submenu-content.tsx
-function m() {
-	let { authClient: m, basePaths: h, viewPaths: g } = r(), { localization: _ } = i(n), { data: v } = o(m), { data: y, isPending: b } = a(m);
-	return /* @__PURE__ */ f(l.Popover, {
+function p() {
+	let { authClient: p, basePaths: m, viewPaths: h } = r(), { localization: g } = i(n), { data: _ } = o(p), { data: v, isPending: y } = a(p);
+	return /* @__PURE__ */ d(l.Popover, {
 		className: "min-w-40 md:min-w-56 max-w-[48svw]",
-		children: /* @__PURE__ */ p(l.Menu, { children: [
-			/* @__PURE__ */ p(l.Item, {
+		children: /* @__PURE__ */ f(l.Menu, { children: [
+			/* @__PURE__ */ f(l.Item, {
 				className: "px-2",
-				children: [/* @__PURE__ */ f(e, { isPending: b }), !b && /* @__PURE__ */ f(s, { className: "ml-auto" })]
+				children: [/* @__PURE__ */ d(e, { isPending: y }), !y && /* @__PURE__ */ d(s, { className: "ml-auto" })]
 			}),
-			y?.filter((e) => e.session.id !== v?.session?.id).map((e) => /* @__PURE__ */ f(t, { deviceSession: e }, e.session.id)),
-			/* @__PURE__ */ f(d, {}),
-			/* @__PURE__ */ p(l.Item, {
-				textValue: _.addAccount,
-				href: `${h.auth}/${g.auth.signIn}`,
-				children: [/* @__PURE__ */ f(c, { className: "text-muted" }), /* @__PURE__ */ f(u, { children: _.addAccount })]
+			v?.filter((e) => e.session.id !== _?.session?.id).map((e) => /* @__PURE__ */ d(t, { deviceSession: e }, e.session.id)),
+			/* @__PURE__ */ f(l.Item, {
+				textValue: g.addAccount,
+				href: `${m.auth}/${h.auth.signIn}`,
+				children: [/* @__PURE__ */ d(c, { className: "text-muted" }), /* @__PURE__ */ d(u, { children: g.addAccount })]
 			})
 		] })
 	});
 }
 //#endregion
-export { m as SwitchAccountSubmenuContent };
+export { p as SwitchAccountSubmenuContent };

package/dist/components/auth/settings/security/linked-account.js

@@ -11,7 +11,7 @@ function g({ account: g, provider: _ }) {
 		children: [
 			/* @__PURE__ */ m("div", {
 				className: f("flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary"),
-				children: m(D || c, { className: f("size-4.5", !g && "opacity-50") })
+				children: m(D || c, { className: "size-4.5" })
 			}),
 			/* @__PURE__ */ h("div", {
 				className: "flex flex-col min-w-0",

package/dist/lib/auth/api-key-plugin.d.ts

@@ -0,0 +1,23 @@
+import { ApiKeyPluginOptions } from '@better-auth-ui/core/plugins';
+import { ApiKeys } from '../../components/auth/api-key/api-keys';
+export declare const apiKeyPlugin: ((options?: ApiKeyPluginOptions | undefined) => Omit<{
+    securityCards: (typeof ApiKeys)[];
+    localization: {
+        apiKey: string;
+        apiKeys: string;
+        apiKeysDescription: string;
+        createApiKey: string;
+        noApiKeys: string;
+        name: string;
+        newApiKey: string;
+        newApiKeyWarning: string;
+        deleteApiKey: string;
+        deleteApiKeyWarning: string;
+        dismissNewKey: string;
+    };
+    id: "apiKey";
+}, "id"> & {
+    id: "apiKey";
+}) & {
+    id: "apiKey";
+};

package/dist/lib/auth/api-key-plugin.js

@@ -0,0 +1,10 @@
+import { ApiKeys as e } from "../../components/auth/api-key/api-keys.js";
+import { createAuthPlugin as t } from "@better-auth-ui/core";
+import { apiKeyPlugin as n } from "@better-auth-ui/core/plugins";
+//#region src/lib/auth/api-key-plugin.ts
+var r = t(n.id, (t = {}) => ({
+	...n(t),
+	securityCards: [e]
+}));
+//#endregion
+export { r as apiKeyPlugin };

package/dist/plugins.d.ts

@@ -1,3 +1,4 @@
+export * from './components/auth/api-key/api-keys';
 export * from './components/auth/delete-user/danger-zone';
 export * from './components/auth/delete-user/delete-user';
 export * from './components/auth/magic-link/magic-link';
@@ -11,6 +12,7 @@ export * from './components/auth/theme/appearance';
 export * from './components/auth/theme/theme-toggle-item';
 export * from './components/auth/username/sign-in-username';
 export * from './components/auth/username/username-field';
+export * from './lib/auth/api-key-plugin';
 export * from './lib/auth/auth-plugin';
 export * from './lib/auth/delete-user-plugin';
 export * from './lib/auth/magic-link-plugin';

package/dist/plugins.js

@@ -1,21 +1,23 @@
 "use client";
-import { deleteUserPlugin as e } from "./lib/auth/delete-user-plugin.js";
-import { DeleteUser as t } from "./components/auth/delete-user/delete-user.js";
-import { DangerZone as n } from "./components/auth/delete-user/danger-zone.js";
-import { magicLinkPlugin as r } from "./lib/auth/magic-link-plugin.js";
-import { MagicLink as i } from "./components/auth/magic-link/magic-link.js";
-import { ManageAccounts as a } from "./components/auth/multi-session/manage-accounts.js";
-import { SwitchAccountSubmenuItem as o } from "./components/auth/multi-session/switch-account-submenu-item.js";
-import { SwitchAccountSubmenuContent as s } from "./components/auth/multi-session/switch-account-submenu-content.js";
-import { SwitchAccountSubmenu as c } from "./components/auth/multi-session/switch-account-submenu.js";
-import { multiSessionPlugin as l } from "./lib/auth/multi-session-plugin.js";
-import { ManageAccount as u } from "./components/auth/multi-session/manage-account.js";
-import { passkeyPlugin as d } from "./lib/auth/passkey-plugin.js";
-import { Passkeys as f } from "./components/auth/passkey/passkeys.js";
-import { ThemeToggleItem as p } from "./components/auth/theme/theme-toggle-item.js";
-import { themePlugin as m } from "./lib/auth/theme-plugin.js";
-import { Appearance as h } from "./components/auth/theme/appearance.js";
-import { UsernameField as g } from "./components/auth/username/username-field.js";
-import { usernamePlugin as _ } from "./lib/auth/username-plugin.js";
-import { SignInUsername as v } from "./components/auth/username/sign-in-username.js";
-export { h as Appearance, n as DangerZone, t as DeleteUser, i as MagicLink, u as ManageAccount, a as ManageAccounts, f as Passkeys, v as SignInUsername, c as SwitchAccountSubmenu, s as SwitchAccountSubmenuContent, o as SwitchAccountSubmenuItem, p as ThemeToggleItem, g as UsernameField, e as deleteUserPlugin, r as magicLinkPlugin, l as multiSessionPlugin, d as passkeyPlugin, m as themePlugin, _ as usernamePlugin };
+import { apiKeyPlugin as e } from "./lib/auth/api-key-plugin.js";
+import { ApiKeys as t } from "./components/auth/api-key/api-keys.js";
+import { deleteUserPlugin as n } from "./lib/auth/delete-user-plugin.js";
+import { DeleteUser as r } from "./components/auth/delete-user/delete-user.js";
+import { DangerZone as i } from "./components/auth/delete-user/danger-zone.js";
+import { magicLinkPlugin as a } from "./lib/auth/magic-link-plugin.js";
+import { MagicLink as o } from "./components/auth/magic-link/magic-link.js";
+import { ManageAccounts as s } from "./components/auth/multi-session/manage-accounts.js";
+import { SwitchAccountSubmenuItem as c } from "./components/auth/multi-session/switch-account-submenu-item.js";
+import { SwitchAccountSubmenuContent as l } from "./components/auth/multi-session/switch-account-submenu-content.js";
+import { SwitchAccountSubmenu as u } from "./components/auth/multi-session/switch-account-submenu.js";
+import { multiSessionPlugin as d } from "./lib/auth/multi-session-plugin.js";
+import { ManageAccount as f } from "./components/auth/multi-session/manage-account.js";
+import { passkeyPlugin as p } from "./lib/auth/passkey-plugin.js";
+import { Passkeys as m } from "./components/auth/passkey/passkeys.js";
+import { ThemeToggleItem as h } from "./components/auth/theme/theme-toggle-item.js";
+import { themePlugin as g } from "./lib/auth/theme-plugin.js";
+import { Appearance as _ } from "./components/auth/theme/appearance.js";
+import { UsernameField as v } from "./components/auth/username/username-field.js";
+import { usernamePlugin as y } from "./lib/auth/username-plugin.js";
+import { SignInUsername as b } from "./components/auth/username/sign-in-username.js";
+export { t as ApiKeys, _ as Appearance, i as DangerZone, r as DeleteUser, o as MagicLink, f as ManageAccount, s as ManageAccounts, m as Passkeys, b as SignInUsername, u as SwitchAccountSubmenu, l as SwitchAccountSubmenuContent, c as SwitchAccountSubmenuItem, h as ThemeToggleItem, v as UsernameField, e as apiKeyPlugin, n as deleteUserPlugin, a as magicLinkPlugin, d as multiSessionPlugin, p as passkeyPlugin, g as themePlugin, y as usernamePlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "type": "module",
   "scripts": {
     "build": "vite build",
@@ -38,7 +38,7 @@
     "@types/react": "^19.2.14",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser-playwright": "^4.1.5",
-    "better-auth": "^1.6.9",
+    "better-auth": "^1.6.10",
     "bowser": "^2.11.0",
     "playwright": "^1.59.1",
     "react": "^19.2.6",
@@ -54,7 +54,7 @@
     "@internationalized/date": ">=3.12.1",
     "@tanstack/react-pacer": ">=0.22.0",
     "@tanstack/react-query": ">=5.100.9",
-    "better-auth": ">=1.6.9",
+    "better-auth": ">=1.6.10",
     "react": ">=19.2.6",
     "react-dom": ">=19.2.6",
     "bowser": ">=2.11.0"

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

@@ -0,0 +1,17 @@
+import { Skeleton } from "@heroui/react"
+
+export function ApiKeySkeleton() {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <Skeleton className="size-10 rounded-xl" />
+
+        <div className="flex flex-col gap-1">
+          <Skeleton className="h-4 w-28 rounded-lg" />
+          <Skeleton className="h-3 w-36 rounded-lg" />
+          <Skeleton className="h-3 w-32 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,64 @@
+import {
+  type ListedApiKey,
+  useAuth,
+  useAuthPlugin
+} from "@better-auth-ui/react"
+import { Key, Xmark } from "@gravity-ui/icons"
+import { Button } from "@heroui/react"
+import { useState } from "react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+import { DeleteApiKeyDialog } from "./delete-api-key-dialog"
+
+export type ApiKeyProps = {
+  apiKey: ListedApiKey
+}
+
+export function ApiKey({ apiKey }: ApiKeyProps) {
+  const { localization } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+
+  const preview = `${apiKey.start}${"*".repeat(16)}`
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary">
+        <Key className="size-4.5" />
+      </div>
+
+      <div className="flex flex-col min-w-0">
+        <span className="text-sm font-medium leading-tight truncate">
+          {apiKey.name || apiKeyLocalization.apiKey}
+        </span>
+
+        <span className="text-xs text-muted font-mono truncate">{preview}</span>
+
+        <span className="text-xs text-muted">
+          {new Date(apiKey.createdAt).toLocaleString(undefined, {
+            dateStyle: "medium",
+            timeStyle: "short"
+          })}
+        </span>
+      </div>
+
+      <Button
+        className="ml-auto shrink-0"
+        variant="outline"
+        size="sm"
+        onPress={() => setDeleteOpen(true)}
+        aria-label={apiKeyLocalization.deleteApiKey}
+      >
+        <Xmark />
+
+        {localization.settings.delete}
+      </Button>
+
+      <DeleteApiKeyDialog
+        isOpen={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        apiKey={apiKey}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,33 @@
+import { useAuthPlugin } from "@better-auth-ui/react"
+import { Key } from "@gravity-ui/icons"
+import { Button } from "@heroui/react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+
+export type ApiKeysEmptyProps = {
+  onCreatePress: () => void
+}
+
+export function ApiKeysEmpty({ onCreatePress }: ApiKeysEmptyProps) {
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <div className="flex size-10 items-center justify-center rounded-xl bg-surface-secondary">
+        <Key className="size-4.5" />
+      </div>
+
+      <div className="flex flex-col items-center justify-center gap-1 text-center">
+        <p className="text-sm font-semibold">{apiKeyLocalization.noApiKeys}</p>
+
+        <p className="text-muted text-xs">
+          {apiKeyLocalization.apiKeysDescription}
+        </p>
+      </div>
+
+      <Button size="sm" onPress={onCreatePress}>
+        {apiKeyLocalization.createApiKey}
+      </Button>
+    </div>
+  )
+}

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

@@ -0,0 +1,71 @@
+import {
+  type ApiKeyAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useListApiKeys
+} from "@better-auth-ui/react"
+import { Button, Card, type CardProps, cn } from "@heroui/react"
+import { useState } from "react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+import { ApiKey } from "./api-key"
+import { ApiKeySkeleton } from "./api-key-skeleton"
+import { ApiKeysEmpty } from "./api-keys-empty"
+import { CreateApiKeyDialog } from "./create-api-key-dialog"
+
+export type ApiKeysProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+export function ApiKeys({ className, variant }: ApiKeysProps) {
+  const { authClient } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+
+  const { data: listData, isPending } = useListApiKeys(
+    authClient as ApiKeyAuthClient
+  )
+
+  const [createOpen, setCreateOpen] = useState(false)
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      <div className="flex items-end justify-between gap-3">
+        <h2 className="text-sm font-semibold truncate">
+          {apiKeyLocalization.apiKeys}
+        </h2>
+
+        <Button
+          className="shrink-0"
+          size="sm"
+          isDisabled={isPending}
+          onPress={() => setCreateOpen(true)}
+        >
+          {apiKeyLocalization.createApiKey}
+        </Button>
+      </div>
+
+      <Card variant={variant}>
+        <Card.Content>
+          {isPending ? (
+            <ApiKeySkeleton />
+          ) : !listData?.apiKeys.length ? (
+            <ApiKeysEmpty onCreatePress={() => setCreateOpen(true)} />
+          ) : (
+            listData?.apiKeys.map((key, index) => (
+              <div key={key.id}>
+                {index > 0 && (
+                  <div className="border-b border-dashed -mx-4 my-4" />
+                )}
+
+                <ApiKey apiKey={key} />
+              </div>
+            ))
+          )}
+        </Card.Content>
+      </Card>
+
+      <CreateApiKeyDialog isOpen={createOpen} onOpenChange={setCreateOpen} />
+    </div>
+  )
+}

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

@@ -0,0 +1,134 @@
+import {
+  type ApiKeyAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useCreateApiKey
+} from "@better-auth-ui/react"
+import { Key } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+import { type SyntheticEvent, useState } from "react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+
+import { NewApiKeyDialog } from "./new-api-key-dialog"
+
+export type CreateApiKeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function CreateApiKeyDialog({
+  isOpen,
+  onOpenChange
+}: CreateApiKeyDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+
+  const { mutate: createApiKey, isPending: isCreating } = useCreateApiKey(
+    authClient as ApiKeyAuthClient
+  )
+
+  const [isNewKeyDialogOpen, setIsNewKeyDialogOpen] = useState(false)
+  const [keyName, setKeyName] = useState<string | null>(null)
+  const [secretKey, setSecretKey] = useState<string | null>(null)
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      setKeyName(null)
+      setSecretKey(null)
+    }
+
+    onOpenChange(open)
+  }
+
+  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const formData = new FormData(e.target as HTMLFormElement)
+    const name = formData.get("name") as string
+
+    createApiKey(name ? { name: name.trim() } : undefined, {
+      onSuccess: (result) => {
+        handleOpenChange(false)
+        setKeyName(name)
+        setSecretKey(result.key)
+        setIsNewKeyDialogOpen(true)
+      }
+    })
+  }
+
+  return (
+    <>
+      <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={handleOpenChange}>
+        <AlertDialog.Container>
+          <AlertDialog.Dialog>
+            <Form onSubmit={handleSubmit}>
+              <AlertDialog.CloseTrigger />
+
+              <AlertDialog.Header>
+                <AlertDialog.Icon status="default">
+                  <Key />
+                </AlertDialog.Icon>
+
+                <AlertDialog.Heading>
+                  {apiKeyLocalization.createApiKey}
+                </AlertDialog.Heading>
+              </AlertDialog.Header>
+
+              <AlertDialog.Body className="overflow-visible">
+                <p className="text-muted text-sm">
+                  {apiKeyLocalization.apiKeysDescription}
+                </p>
+
+                <TextField
+                  className="mt-4"
+                  id="name"
+                  name="name"
+                  isDisabled={isCreating}
+                >
+                  <Label>{apiKeyLocalization.name}</Label>
+
+                  <Input
+                    autoFocus
+                    placeholder={localization.settings.optional}
+                    variant="secondary"
+                  />
+
+                  <FieldError />
+                </TextField>
+              </AlertDialog.Body>
+
+              <AlertDialog.Footer>
+                <Button slot="close" variant="tertiary" isDisabled={isCreating}>
+                  {localization.settings.cancel}
+                </Button>
+
+                <Button type="submit" isPending={isCreating}>
+                  {isCreating && <Spinner color="current" size="sm" />}
+
+                  {apiKeyLocalization.createApiKey}
+                </Button>
+              </AlertDialog.Footer>
+            </Form>
+          </AlertDialog.Dialog>
+        </AlertDialog.Container>
+      </AlertDialog.Backdrop>
+
+      <NewApiKeyDialog
+        isOpen={isNewKeyDialogOpen}
+        onOpenChange={setIsNewKeyDialogOpen}
+        secretKey={secretKey}
+        name={keyName}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,92 @@
+import {
+  type ApiKeyAuthClient,
+  type ListedApiKey,
+  useAuth,
+  useAuthPlugin,
+  useDeleteApiKey
+} from "@better-auth-ui/react"
+import { Key } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+
+export type DeleteApiKeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  apiKey: ListedApiKey
+}
+
+export function DeleteApiKeyDialog({
+  isOpen,
+  onOpenChange,
+  apiKey
+}: DeleteApiKeyDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+  const preview = `${apiKey.start}${"*".repeat(16)}`
+  const { mutate: deleteApiKey, isPending: isDeleting } = useDeleteApiKey(
+    authClient as ApiKeyAuthClient,
+    {
+      onSuccess: () => onOpenChange(false)
+    }
+  )
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <AlertDialog.CloseTrigger />
+
+          <AlertDialog.Header>
+            <AlertDialog.Icon status="danger">
+              <Key />
+            </AlertDialog.Icon>
+
+            <AlertDialog.Heading>
+              {apiKeyLocalization.deleteApiKey}
+            </AlertDialog.Heading>
+          </AlertDialog.Header>
+
+          <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+            <p className="text-muted text-sm">
+              {apiKeyLocalization.deleteApiKeyWarning}
+            </p>
+
+            <TextField
+              value={preview}
+              className="font-mono text-xs"
+              variant="secondary"
+            >
+              <Label>{apiKey.name || apiKeyLocalization.apiKey}</Label>
+
+              <Input readOnly className="font-mono text-xs" />
+            </TextField>
+          </AlertDialog.Body>
+
+          <AlertDialog.Footer>
+            <Button slot="close" variant="tertiary" isDisabled={isDeleting}>
+              {localization.settings.cancel}
+            </Button>
+
+            <Button
+              variant="danger"
+              onPress={() => deleteApiKey({ keyId: apiKey.id })}
+              isPending={isDeleting}
+            >
+              {isDeleting && <Spinner color="current" size="sm" />}
+
+              {apiKeyLocalization.deleteApiKey}
+            </Button>
+          </AlertDialog.Footer>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

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

@@ -0,0 +1,94 @@
+import { useAuth, useAuthPlugin } from "@better-auth-ui/react"
+import { Check, Copy, Key } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  InputGroup,
+  Label,
+  TextField,
+  toast
+} from "@heroui/react"
+import { useState } from "react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+
+export type NewApiKeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  name: string | null
+  secretKey: string | null
+}
+
+export function NewApiKeyDialog({
+  isOpen,
+  onOpenChange,
+  name,
+  secretKey
+}: NewApiKeyDialogProps) {
+  const { localization } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+
+  const [copied, setCopied] = useState(false)
+
+  const copySecretKey = async () => {
+    if (!secretKey) return
+
+    try {
+      await navigator.clipboard.writeText(secretKey)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch (error) {
+      toast.danger(error instanceof Error ? error.message : String(error))
+    }
+  }
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <AlertDialog.CloseTrigger />
+
+          <AlertDialog.Header>
+            <AlertDialog.Icon status="warning">
+              <Key />
+            </AlertDialog.Icon>
+
+            <AlertDialog.Heading>
+              {apiKeyLocalization.newApiKey}
+            </AlertDialog.Heading>
+          </AlertDialog.Header>
+
+          <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+            <p className="text-muted text-sm">
+              {apiKeyLocalization.newApiKeyWarning}
+            </p>
+
+            <TextField value={secretKey ?? ""} className="font-mono text-xs">
+              <Label>{name || apiKeyLocalization.apiKey}</Label>
+
+              <InputGroup variant="secondary">
+                <InputGroup.Input readOnly className="font-mono text-xs" />
+
+                <InputGroup.Suffix className="px-0">
+                  <Button
+                    isIconOnly
+                    aria-label={localization.settings.copyToClipboard}
+                    size="sm"
+                    variant="ghost"
+                    onPress={copySecretKey}
+                  >
+                    {copied ? <Check /> : <Copy />}
+                  </Button>
+                </InputGroup.Suffix>
+              </InputGroup>
+            </TextField>
+          </AlertDialog.Body>
+
+          <AlertDialog.Footer>
+            <Button slot="close">{apiKeyLocalization.dismissNewKey}</Button>
+          </AlertDialog.Footer>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/multi-session/switch-account-submenu-content.tsx

@@ -6,7 +6,7 @@ import {
   useSession
 } from "@better-auth-ui/react"
 import { Check, CirclePlus } from "@gravity-ui/icons"
-import { Dropdown, Label, Separator } from "@heroui/react"
+import { Dropdown, Label } from "@heroui/react"
 
 import { multiSessionPlugin } from "../../../lib/auth/multi-session-plugin"
 import { UserView } from "../user/user-view"
@@ -50,8 +50,6 @@ export function SwitchAccountSubmenuContent() {
             />
           ))}
 
-        <Separator />
-
         <Dropdown.Item
           textValue={multiSessionLocalization.addAccount}
           href={`${basePaths.auth}/${viewPaths.auth.signIn}`}

package/src/components/auth/settings/security/linked-account.tsx

@@ -60,11 +60,9 @@ export function LinkedAccount({ account, provider }: LinkedAccountProps) {
         )}
       >
         {ProviderIcon ? (
-          <ProviderIcon className={cn("size-4.5", !account && "opacity-50")} />
+          <ProviderIcon className="size-4.5" />
         ) : (
-          <PlugConnection
-            className={cn("size-4.5", !account && "opacity-50")}
-          />
+          <PlugConnection className="size-4.5" />
         )}
       </div>
 

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

@@ -0,0 +1,15 @@
+import { createAuthPlugin } from "@better-auth-ui/core"
+import {
+  type ApiKeyPluginOptions,
+  apiKeyPlugin as coreApiKeyPlugin
+} from "@better-auth-ui/core/plugins"
+
+import { ApiKeys } from "../../components/auth/api-key/api-keys"
+
+export const apiKeyPlugin = createAuthPlugin(
+  coreApiKeyPlugin.id,
+  (options: ApiKeyPluginOptions = {}) => ({
+    ...coreApiKeyPlugin(options),
+    securityCards: [ApiKeys]
+  })
+)

package/src/plugins.ts

@@ -1,5 +1,6 @@
 "use client"
 
+export * from "./components/auth/api-key/api-keys"
 export * from "./components/auth/delete-user/danger-zone"
 export * from "./components/auth/delete-user/delete-user"
 // Plugin-contributed components that may be used standalone
@@ -14,6 +15,7 @@ export * from "./components/auth/theme/appearance"
 export * from "./components/auth/theme/theme-toggle-item"
 export * from "./components/auth/username/sign-in-username"
 export * from "./components/auth/username/username-field"
+export * from "./lib/auth/api-key-plugin"
 export * from "./lib/auth/auth-plugin"
 export * from "./lib/auth/delete-user-plugin"
 export * from "./lib/auth/magic-link-plugin"