@better-auth-ui/heroui 1.6.6 → 1.6.8

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")?.trim();
+				C(t ? { name: t } : 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/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
 			})
 		]
 	});