@better-auth-ui/heroui 1.6.7 → 1.6.8

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

@@ -16,8 +16,8 @@ function v({ isOpen: v, onOpenChange: y }) {
 		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) => {
+				let t = new FormData(e.target).get("name")?.trim();
+				C(t ? { name: t } : void 0, { onSuccess: (e) => {
 					j(!1), O(t), A(e.key), E(!0);
 				} });
 			},

package/dist/components/auth/passkey/add-passkey-dialog.d.ts

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

package/dist/components/auth/passkey/add-passkey-dialog.js

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

package/dist/components/auth/passkey/delete-passkey-dialog.d.ts

@@ -0,0 +1,11 @@
+export type ListedPasskey = {
+    id: string;
+    name?: string | null;
+    createdAt: Date;
+};
+export type DeletePasskeyDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    passkey: ListedPasskey;
+};
+export declare function DeletePasskeyDialog({ isOpen, onOpenChange, passkey }: DeletePasskeyDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/passkey/delete-passkey-dialog.js

@@ -0,0 +1,47 @@
+import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
+import { useAuth as t, useAuthPlugin as n, useDeletePasskey as r } from "@better-auth-ui/react";
+import { Fingerprint 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/passkey/delete-passkey-dialog.tsx
+function p({ isOpen: p, onOpenChange: m, passkey: h }) {
+	let { authClient: g, localization: _ } = t(), { localization: v } = n(e), y = h.name || v.passkey, { 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.deletePasskeyTitle })] }),
+			/* @__PURE__ */ f(a.Body, {
+				className: "flex flex-col gap-4 overflow-visible",
+				children: [/* @__PURE__ */ d("p", {
+					className: "text-muted text-sm",
+					children: v.deletePasskeyWarning
+				}), /* @__PURE__ */ f(u, {
+					value: y,
+					variant: "secondary",
+					children: [/* @__PURE__ */ d(c, { children: h.name || v.passkey }), /* @__PURE__ */ d(s, { readOnly: !0 })]
+				})]
+			}),
+			/* @__PURE__ */ f(a.Footer, { children: [/* @__PURE__ */ d(o, {
+				slot: "close",
+				variant: "tertiary",
+				isDisabled: x,
+				children: _.settings.cancel
+			}), /* @__PURE__ */ f(o, {
+				variant: "danger",
+				onPress: () => b({ id: h.id }),
+				isPending: x,
+				children: [x && /* @__PURE__ */ d(l, {
+					color: "current",
+					size: "sm"
+				}), v.deletePasskeyTitle]
+			})] })
+		] }) })
+	});
+}
+//#endregion
+export { p as DeletePasskeyDialog };

package/dist/components/auth/passkey/passkey-skeleton.d.ts

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

package/dist/components/auth/passkey/passkey-skeleton.js

@@ -0,0 +1,17 @@
+import { Skeleton as e } from "@heroui/react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/auth/passkey/passkey-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-32 rounded-lg" })]
+			})]
+		})
+	});
+}
+//#endregion
+export { r as PasskeySkeleton };

package/dist/components/auth/passkey/passkey.d.ts

@@ -1,8 +1,5 @@
+import { ListedPasskey } from './delete-passkey-dialog';
 export type PasskeyProps = {
-    passkey: {
-        id: string;
-        name?: string | null;
-        createdAt: Date;
-    };
+    passkey: ListedPasskey;
 };
 export declare function Passkey({ passkey }: PasskeyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/passkey/passkey.js

@@ -1,11 +1,13 @@
 import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
-import { useAuth as t, useAuthPlugin as n, useDeletePasskey as r } from "@better-auth-ui/react";
+import { DeletePasskeyDialog as t } from "./delete-passkey-dialog.js";
+import { useAuth as n, useAuthPlugin as r } from "@better-auth-ui/react";
 import { Fingerprint as i, Xmark as a } from "@gravity-ui/icons";
-import { Button as o, Spinner as s } from "@heroui/react";
+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/passkey/passkey.tsx
 function u({ passkey: u }) {
-	let { authClient: d, localization: f } = t(), { localization: p } = n(e), { mutate: m, isPending: h } = r(d), g = u.name || p.passkey;
+	let { localization: d } = n(), { localization: f } = r(e), [p, m] = s(!1), h = u.name || f.passkey;
 	return /* @__PURE__ */ l("div", {
 		className: "flex items-center gap-3",
 		children: [
@@ -14,10 +16,10 @@ function u({ passkey: u }) {
 				children: /* @__PURE__ */ c(i, { className: "size-4.5" })
 			}),
 			/* @__PURE__ */ l("div", {
-				className: "flex flex-col min-w-0",
+				className: "flex min-w-0 flex-col",
 				children: [/* @__PURE__ */ c("span", {
-					className: "text-sm font-medium leading-tight",
-					children: g
+					className: "truncate text-sm font-medium leading-tight",
+					children: h
 				}), /* @__PURE__ */ c("span", {
 					className: "text-xs text-muted",
 					children: new Date(u.createdAt).toLocaleString(void 0, {
@@ -30,13 +32,14 @@ function u({ passkey: u }) {
 				className: "ml-auto shrink-0",
 				variant: "outline",
 				size: "sm",
-				isPending: h,
-				onPress: () => m({ id: u.id }),
-				"aria-label": p.deletePasskey.replace("{{name}}", g),
-				children: [h ? /* @__PURE__ */ c(s, {
-					color: "current",
-					size: "sm"
-				}) : /* @__PURE__ */ c(a, {}), f.settings.delete]
+				onPress: () => m(!0),
+				"aria-label": f.deletePasskey.replace("{{name}}", h),
+				children: [/* @__PURE__ */ c(a, {}), d.settings.delete]
+			}),
+			/* @__PURE__ */ c(t, {
+				isOpen: p,
+				onOpenChange: m,
+				passkey: u
 			})
 		]
 	});

package/dist/components/auth/passkey/passkeys-empty.d.ts

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

package/dist/components/auth/passkey/passkeys-empty.js

@@ -0,0 +1,35 @@
+import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
+import { useAuthPlugin as t } from "@better-auth-ui/react";
+import { Fingerprint 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/passkey/passkeys-empty.tsx
+function o({ onAddPress: 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.noPasskeys
+				}), /* @__PURE__ */ i("p", {
+					className: "text-muted text-xs",
+					children: s.passkeysDescription
+				})]
+			}),
+			/* @__PURE__ */ i(r, {
+				size: "sm",
+				onPress: o,
+				children: s.addPasskey
+			})
+		]
+	});
+}
+//#endregion
+export { o as PasskeysEmpty };

package/dist/components/auth/passkey/passkeys.js

@@ -1,106 +1,42 @@
 import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
-import { Passkey as t } from "./passkey.js";
-import { useAddPasskey as n, useAuth as r, useAuthPlugin as i, useListPasskeys as a } from "@better-auth-ui/react";
-import { Fingerprint 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, Skeleton as m, Spinner as h, TextField as g, cn as _ } from "@heroui/react";
-import { useState as v } from "react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { AddPasskeyDialog as t } from "./add-passkey-dialog.js";
+import { Passkey as n } from "./passkey.js";
+import { PasskeySkeleton as r } from "./passkey-skeleton.js";
+import { PasskeysEmpty as i } from "./passkeys-empty.js";
+import { useAuth as a, useAuthPlugin as o, useListPasskeys 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/passkey/passkeys.tsx
-function S({ className: m, variant: S, ...w }) {
-	let { authClient: T, localization: E } = r(), { localization: D } = i(e), { data: O, isPending: k } = a(T), { mutate: A, isPending: j } = n(T), [M, N] = v(!1), [P, F] = v(""), I = (e) => {
-		N(e), F("");
-	}, L = async (e) => {
-		e.preventDefault(), A({ name: P.trim() || void 0 }, { onSuccess: () => {
-			N(!1), F("");
-		} });
-	};
-	return /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h2", {
-		className: _("text-sm font-semibold mb-3"),
-		children: D.passkeys
-	}), /* @__PURE__ */ b(l, {
-		className: _(m),
-		variant: S,
-		...w,
-		children: /* @__PURE__ */ x(l.Content, {
-			className: "gap-0",
-			children: [/* @__PURE__ */ x("div", {
-				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-					className: "text-sm font-medium leading-tight",
-					children: D.passkeysDescription
-				}), /* @__PURE__ */ b("p", {
-					className: "text-muted text-xs mt-0.5",
-					children: D.passkeysInstructions
-				})] }), /* @__PURE__ */ x(s, { children: [/* @__PURE__ */ b(c, {
+function m({ className: m, variant: h, ...g }) {
+	let { authClient: _ } = a(), { localization: v } = o(e), { data: y, isPending: b } = s(_), [x, S] = 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: v.passkeys
+				}), /* @__PURE__ */ f(c, {
 					className: "shrink-0",
 					size: "sm",
-					isDisabled: k,
-					onPress: () => N(!0),
-					children: D.addPasskey
-				}), /* @__PURE__ */ b(s.Backdrop, {
-					isOpen: M,
-					onOpenChange: I,
-					children: /* @__PURE__ */ b(s.Container, { children: /* @__PURE__ */ b(s.Dialog, { children: /* @__PURE__ */ x(d, {
-						onSubmit: L,
-						children: [
-							/* @__PURE__ */ b(s.CloseTrigger, {}),
-							/* @__PURE__ */ x(s.Header, { children: [/* @__PURE__ */ b(s.Icon, {
-								status: "default",
-								children: /* @__PURE__ */ b(o, {})
-							}), /* @__PURE__ */ b(s.Heading, { children: D.addPasskey })] }),
-							/* @__PURE__ */ x(s.Body, {
-								className: "overflow-visible",
-								children: [/* @__PURE__ */ b("p", {
-									className: "text-muted text-sm",
-									children: D.passkeysInstructions
-								}), /* @__PURE__ */ x(g, {
-									className: "mt-4",
-									name: "passkey-name",
-									isDisabled: j,
-									value: P,
-									onChange: F,
-									children: [
-										/* @__PURE__ */ b(p, { children: D.passkey }),
-										/* @__PURE__ */ b(f, {
-											autoFocus: !0,
-											placeholder: E.settings.optional,
-											variant: "secondary"
-										}),
-										/* @__PURE__ */ b(u, {})
-									]
-								})]
-							}),
-							/* @__PURE__ */ x(s.Footer, { children: [/* @__PURE__ */ b(c, {
-								slot: "close",
-								variant: "tertiary",
-								isDisabled: j,
-								children: E.settings.cancel
-							}), /* @__PURE__ */ x(c, {
-								type: "submit",
-								isPending: j,
-								children: [j && /* @__PURE__ */ b(h, {
-									color: "current",
-									size: "sm"
-								}), D.addPasskey]
-							})] })
-						]
-					}) }) })
-				})] })]
-			}), k ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ b(C, {})] }) : O?.map((e) => /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ b(t, { passkey: e })] }, e.id))]
-		})
-	})] });
-}
-function C() {
-	return /* @__PURE__ */ b("div", {
-		className: "flex items-center justify-between",
-		children: /* @__PURE__ */ x("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ b(m, { className: "size-10 rounded-xl" }), /* @__PURE__ */ x("div", {
-				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ b(m, { className: "h-4 w-24 rounded-lg" }), /* @__PURE__ */ b(m, { className: "h-3 w-20 rounded-lg" })]
-			})]
-		})
+					isDisabled: b,
+					onPress: () => S(!0),
+					children: v.addPasskey
+				})]
+			}),
+			/* @__PURE__ */ f(l, {
+				variant: h,
+				...g,
+				children: /* @__PURE__ */ f(l.Content, { children: b ? /* @__PURE__ */ f(r, {}) : y?.length ? y.map((e, t) => /* @__PURE__ */ p("div", { children: [t > 0 && /* @__PURE__ */ f("div", { className: "border-b border-dashed -mx-4 my-4" }), /* @__PURE__ */ f(n, { passkey: e })] }, e.id)) : /* @__PURE__ */ f(i, { onAddPress: () => S(!0) }) })
+			}),
+			/* @__PURE__ */ f(t, {
+				isOpen: x,
+				onOpenChange: S
+			})
+		]
 	});
 }
 //#endregion
-export { S as Passkeys };
+export { m as Passkeys };

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

@@ -8,9 +8,12 @@ export declare const passkeyPlugin: ((options?: PasskeyPluginOptions | undefined
         passkey: string;
         addPasskey: string;
         deletePasskey: string;
+        deletePasskeyTitle: string;
+        deletePasskeyWarning: string;
         passkeys: string;
         passkeysDescription: string;
-        passkeysInstructions: string;
+        noPasskeys: string;
+        name: string;
     };
     id: "passkey";
 }, "id"> & {

package/package.json

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

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

@@ -54,9 +54,9 @@ export function CreateApiKeyDialog({
     e.preventDefault()
 
     const formData = new FormData(e.target as HTMLFormElement)
-    const name = formData.get("name") as string
+    const name = (formData.get("name") as string)?.trim()
 
-    createApiKey(name ? { name: name.trim() } : undefined, {
+    createApiKey(name ? { name } : undefined, {
       onSuccess: (result) => {
         handleOpenChange(false)
         setKeyName(name)

package/src/components/auth/passkey/add-passkey-dialog.tsx

@@ -0,0 +1,109 @@
+import {
+  type PasskeyAuthClient,
+  useAddPasskey,
+  useAuth,
+  useAuthPlugin
+} from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+import type { SyntheticEvent } from "react"
+
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+
+export type AddPasskeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function AddPasskeyDialog({
+  isOpen,
+  onOpenChange
+}: AddPasskeyDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
+
+  const { mutate: addPasskey, isPending: isAdding } = useAddPasskey(
+    authClient as PasskeyAuthClient
+  )
+
+  const handleOpenChange = (open: boolean) => {
+    onOpenChange(open)
+  }
+
+  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const formData = new FormData(e.target as HTMLFormElement)
+    const name = (formData.get("name") as string)?.trim()
+
+    addPasskey(name ? { name } : undefined, {
+      onSuccess: () => handleOpenChange(false)
+    })
+  }
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={handleOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <Form onSubmit={handleSubmit}>
+            <AlertDialog.CloseTrigger />
+
+            <AlertDialog.Header>
+              <AlertDialog.Icon status="default">
+                <Fingerprint />
+              </AlertDialog.Icon>
+
+              <AlertDialog.Heading>
+                {passkeyLocalization.addPasskey}
+              </AlertDialog.Heading>
+            </AlertDialog.Header>
+
+            <AlertDialog.Body className="overflow-visible">
+              <p className="text-muted text-sm">
+                {passkeyLocalization.passkeysDescription}
+              </p>
+
+              <TextField
+                className="mt-4"
+                id="name"
+                name="name"
+                isDisabled={isAdding}
+              >
+                <Label>{passkeyLocalization.name}</Label>
+
+                <Input
+                  autoFocus
+                  placeholder={localization.settings.optional}
+                  variant="secondary"
+                />
+
+                <FieldError />
+              </TextField>
+            </AlertDialog.Body>
+
+            <AlertDialog.Footer>
+              <Button slot="close" variant="tertiary" isDisabled={isAdding}>
+                {localization.settings.cancel}
+              </Button>
+
+              <Button type="submit" isPending={isAdding}>
+                {isAdding && <Spinner color="current" size="sm" />}
+
+                {passkeyLocalization.addPasskey}
+              </Button>
+            </AlertDialog.Footer>
+          </Form>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/passkey/delete-passkey-dialog.tsx

@@ -0,0 +1,95 @@
+import {
+  type PasskeyAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useDeletePasskey
+} from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+
+export type ListedPasskey = {
+  id: string
+  name?: string | null
+  createdAt: Date
+}
+
+export type DeletePasskeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  passkey: ListedPasskey
+}
+
+export function DeletePasskeyDialog({
+  isOpen,
+  onOpenChange,
+  passkey
+}: DeletePasskeyDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
+
+  const passkeyName = passkey.name || passkeyLocalization.passkey
+
+  const { mutate: deletePasskey, isPending: isDeleting } = useDeletePasskey(
+    authClient as PasskeyAuthClient,
+    {
+      onSuccess: () => onOpenChange(false)
+    }
+  )
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <AlertDialog.CloseTrigger />
+
+          <AlertDialog.Header>
+            <AlertDialog.Icon status="danger">
+              <Fingerprint />
+            </AlertDialog.Icon>
+
+            <AlertDialog.Heading>
+              {passkeyLocalization.deletePasskeyTitle}
+            </AlertDialog.Heading>
+          </AlertDialog.Header>
+
+          <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+            <p className="text-muted text-sm">
+              {passkeyLocalization.deletePasskeyWarning}
+            </p>
+
+            <TextField value={passkeyName} variant="secondary">
+              <Label>{passkey.name || passkeyLocalization.passkey}</Label>
+
+              <Input readOnly />
+            </TextField>
+          </AlertDialog.Body>
+
+          <AlertDialog.Footer>
+            <Button slot="close" variant="tertiary" isDisabled={isDeleting}>
+              {localization.settings.cancel}
+            </Button>
+
+            <Button
+              variant="danger"
+              onPress={() => deletePasskey({ id: passkey.id })}
+              isPending={isDeleting}
+            >
+              {isDeleting && <Spinner color="current" size="sm" />}
+
+              {passkeyLocalization.deletePasskeyTitle}
+            </Button>
+          </AlertDialog.Footer>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/passkey/passkey-skeleton.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from "@heroui/react"
+
+export function PasskeySkeleton() {
+  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-32 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/auth/passkey/passkey.tsx

@@ -1,29 +1,22 @@
-import {
-  type PasskeyAuthClient,
-  useAuth,
-  useAuthPlugin,
-  useDeletePasskey
-} from "@better-auth-ui/react"
+import { useAuth, useAuthPlugin } from "@better-auth-ui/react"
 import { Fingerprint, Xmark } from "@gravity-ui/icons"
-import { Button, Spinner } from "@heroui/react"
+import { Button } from "@heroui/react"
+import { useState } from "react"
 
 import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+import {
+  DeletePasskeyDialog,
+  type ListedPasskey
+} from "./delete-passkey-dialog"
 
 export type PasskeyProps = {
-  passkey: {
-    id: string
-    name?: string | null
-    createdAt: Date
-  }
+  passkey: ListedPasskey
 }
 
 export function Passkey({ passkey }: PasskeyProps) {
-  const { authClient, localization } = useAuth()
+  const { localization } = useAuth()
   const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
-
-  const { mutate: deletePasskey, isPending } = useDeletePasskey(
-    authClient as PasskeyAuthClient
-  )
+  const [deleteOpen, setDeleteOpen] = useState(false)
 
   const passkeyName = passkey.name || passkeyLocalization.passkey
 
@@ -33,8 +26,10 @@ export function Passkey({ passkey }: PasskeyProps) {
         <Fingerprint className="size-4.5" />
       </div>
 
-      <div className="flex flex-col min-w-0">
-        <span className="text-sm font-medium leading-tight">{passkeyName}</span>
+      <div className="flex min-w-0 flex-col">
+        <span className="truncate text-sm font-medium leading-tight">
+          {passkeyName}
+        </span>
 
         <span className="text-xs text-muted">
           {new Date(passkey.createdAt).toLocaleString(undefined, {
@@ -48,16 +43,22 @@ export function Passkey({ passkey }: PasskeyProps) {
         className="ml-auto shrink-0"
         variant="outline"
         size="sm"
-        isPending={isPending}
-        onPress={() => deletePasskey({ id: passkey.id })}
+        onPress={() => setDeleteOpen(true)}
         aria-label={passkeyLocalization.deletePasskey.replace(
           "{{name}}",
           passkeyName
         )}
       >
-        {isPending ? <Spinner color="current" size="sm" /> : <Xmark />}
+        <Xmark />
+
         {localization.settings.delete}
       </Button>
+
+      <DeletePasskeyDialog
+        isOpen={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        passkey={passkey}
+      />
     </div>
   )
 }

package/src/components/auth/passkey/passkeys-empty.tsx

@@ -0,0 +1,35 @@
+import { useAuthPlugin } from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import { Button } from "@heroui/react"
+
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+
+export type PasskeysEmptyProps = {
+  onAddPress: () => void
+}
+
+export function PasskeysEmpty({ onAddPress }: PasskeysEmptyProps) {
+  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
+
+  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">
+        <Fingerprint className="size-4.5" />
+      </div>
+
+      <div className="flex flex-col items-center justify-center gap-1 text-center">
+        <p className="text-sm font-semibold">
+          {passkeyLocalization.noPasskeys}
+        </p>
+
+        <p className="text-muted text-xs">
+          {passkeyLocalization.passkeysDescription}
+        </p>
+      </div>
+
+      <Button size="sm" onPress={onAddPress}>
+        {passkeyLocalization.addPasskey}
+      </Button>
+    </div>
+  )
+}

package/src/components/auth/passkey/passkeys.tsx

@@ -1,29 +1,17 @@
 import {
   type PasskeyAuthClient,
-  useAddPasskey,
   useAuth,
   useAuthPlugin,
   useListPasskeys
 } from "@better-auth-ui/react"
-import { Fingerprint } from "@gravity-ui/icons"
-import {
-  AlertDialog,
-  Button,
-  Card,
-  type CardProps,
-  cn,
-  FieldError,
-  Form,
-  Input,
-  Label,
-  Skeleton,
-  Spinner,
-  TextField
-} from "@heroui/react"
-import { type SyntheticEvent, useState } from "react"
+import { Button, Card, type CardProps, cn } from "@heroui/react"
+import { useState } from "react"
 
 import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+import { AddPasskeyDialog } from "./add-passkey-dialog"
 import { Passkey } from "./passkey"
+import { PasskeySkeleton } from "./passkey-skeleton"
+import { PasskeysEmpty } from "./passkeys-empty"
 
 export type PasskeysProps = {
   className?: string
@@ -35,162 +23,53 @@ export function Passkeys({
   variant,
   ...props
 }: PasskeysProps & Omit<CardProps, "children">) {
-  const { authClient, localization } = useAuth()
+  const { authClient } = useAuth()
   const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
 
   const { data: passkeys, isPending } = useListPasskeys(
     authClient as PasskeyAuthClient
   )
-  const { mutate: addPasskey, isPending: isAdding } = useAddPasskey(
-    authClient as PasskeyAuthClient
-  )
-
-  const [nameOpen, setNameOpen] = useState(false)
-  const [name, setName] = useState("")
 
-  const handleDialogOpenChange = (open: boolean) => {
-    setNameOpen(open)
-    setName("")
-  }
-
-  const handleSubmit = async (e: SyntheticEvent<HTMLFormElement>) => {
-    e.preventDefault()
-
-    addPasskey(
-      { name: name.trim() || undefined },
-      {
-        onSuccess: () => {
-          setNameOpen(false)
-          setName("")
-        }
-      }
-    )
-  }
+  const [addOpen, setAddOpen] = useState(false)
 
   return (
-    <div>
-      <h2 className={cn("text-sm font-semibold mb-3")}>
-        {passkeyLocalization.passkeys}
-      </h2>
-
-      <Card className={cn(className)} variant={variant} {...props}>
-        <Card.Content className="gap-0">
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-            <div>
-              <p className="text-sm font-medium leading-tight">
-                {passkeyLocalization.passkeysDescription}
-              </p>
-
-              <p className="text-muted text-xs mt-0.5">
-                {passkeyLocalization.passkeysInstructions}
-              </p>
-            </div>
-
-            <AlertDialog>
-              <Button
-                className="shrink-0"
-                size="sm"
-                isDisabled={isPending}
-                onPress={() => setNameOpen(true)}
-              >
-                {passkeyLocalization.addPasskey}
-              </Button>
-
-              <AlertDialog.Backdrop
-                isOpen={nameOpen}
-                onOpenChange={handleDialogOpenChange}
-              >
-                <AlertDialog.Container>
-                  <AlertDialog.Dialog>
-                    <Form onSubmit={handleSubmit}>
-                      <AlertDialog.CloseTrigger />
-
-                      <AlertDialog.Header>
-                        <AlertDialog.Icon status="default">
-                          <Fingerprint />
-                        </AlertDialog.Icon>
-
-                        <AlertDialog.Heading>
-                          {passkeyLocalization.addPasskey}
-                        </AlertDialog.Heading>
-                      </AlertDialog.Header>
-
-                      <AlertDialog.Body className="overflow-visible">
-                        <p className="text-muted text-sm">
-                          {passkeyLocalization.passkeysInstructions}
-                        </p>
-
-                        <TextField
-                          className="mt-4"
-                          name="passkey-name"
-                          isDisabled={isAdding}
-                          value={name}
-                          onChange={setName}
-                        >
-                          <Label>{passkeyLocalization.passkey}</Label>
-
-                          <Input
-                            autoFocus
-                            placeholder={localization.settings.optional}
-                            variant="secondary"
-                          />
-
-                          <FieldError />
-                        </TextField>
-                      </AlertDialog.Body>
-
-                      <AlertDialog.Footer>
-                        <Button
-                          slot="close"
-                          variant="tertiary"
-                          isDisabled={isAdding}
-                        >
-                          {localization.settings.cancel}
-                        </Button>
-
-                        <Button type="submit" isPending={isAdding}>
-                          {isAdding && <Spinner color="current" size="sm" />}
-
-                          {passkeyLocalization.addPasskey}
-                        </Button>
-                      </AlertDialog.Footer>
-                    </Form>
-                  </AlertDialog.Dialog>
-                </AlertDialog.Container>
-              </AlertDialog.Backdrop>
-            </AlertDialog>
-          </div>
+    <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">
+          {passkeyLocalization.passkeys}
+        </h2>
+
+        <Button
+          className="shrink-0"
+          size="sm"
+          isDisabled={isPending}
+          onPress={() => setAddOpen(true)}
+        >
+          {passkeyLocalization.addPasskey}
+        </Button>
+      </div>
 
+      <Card variant={variant} {...props}>
+        <Card.Content>
           {isPending ? (
-            <>
-              <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
-              <PasskeySkeleton />
-            </>
+            <PasskeySkeleton />
+          ) : !passkeys?.length ? (
+            <PasskeysEmpty onAddPress={() => setAddOpen(true)} />
           ) : (
-            passkeys?.map((passkey) => (
+            passkeys.map((passkey, index) => (
               <div key={passkey.id}>
-                <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+                {index > 0 && (
+                  <div className="border-b border-dashed -mx-4 my-4" />
+                )}
+
                 <Passkey passkey={passkey} />
               </div>
             ))
           )}
         </Card.Content>
       </Card>
-    </div>
-  )
-}
 
-function PasskeySkeleton() {
-  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-24 rounded-lg" />
-          <Skeleton className="h-3 w-20 rounded-lg" />
-        </div>
-      </div>
+      <AddPasskeyDialog isOpen={addOpen} onOpenChange={setAddOpen} />
     </div>
   )
 }