@better-auth-ui/heroui 1.6.9 → 1.6.11

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

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

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.9",
+  "version": "1.6.11",
   "type": "module",
   "scripts": {
-    "build": "tsc && bun run styles",
-    "styles": "mkdir -p dist && cp src/styles.css dist/styles.css",
+    "build": "vite build",
     "test": "vitest"
   },
   "files": [
@@ -62,8 +61,7 @@
     "@tanstack/react-query": ">=5.100.14",
     "better-auth": ">=1.6.11",
     "react": ">=19.2.6",
-    "react-dom": ">=19.2.6",
-    "bowser": ">=2.11.0"
+    "react-dom": ">=19.2.6"
   },
   "repository": {
     "type": "git",

package/dist/components/auth/additional-field.js

@@ -1,137 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { resolveInputType } from "@better-auth-ui/core";
-import { useAuth } from "@better-auth-ui/react";
-import { Check, Copy } from "@gravity-ui/icons";
-import { Button, Calendar, Checkbox, ComboBox, DateField, DatePicker, FieldError, Input, InputGroup, Label, ListBox, NumberField, Select, Slider, Switch, TextArea, TextField, TimeField, toast } from "@heroui/react";
-import { fromDate, getLocalTimeZone, parseDate, parseDateTime, toCalendarDate, toCalendarDateTime } from "@internationalized/date";
-import { useRef, useState } from "react";
-/** Convert a `defaultValue` into a `CalendarDate` for HeroUI date inputs. */
-function toDateValue(value) {
-    if (value instanceof Date) {
-        return toCalendarDate(fromDate(value, getLocalTimeZone()));
-    }
-    if (typeof value === "string") {
-        try {
-            return parseDate(value.slice(0, 10));
-        }
-        catch {
-            return undefined;
-        }
-    }
-    return undefined;
-}
-/** Convert a `defaultValue` into a `CalendarDateTime` for datetime inputs. */
-function toDateTimeValue(value) {
-    if (value instanceof Date) {
-        return toCalendarDateTime(fromDate(value, getLocalTimeZone()));
-    }
-    if (typeof value === "string") {
-        try {
-            // Strip trailing `Z` or timezone offset for `parseDateTime`.
-            return parseDateTime(value.replace(/(Z|[+-]\d{2}:?\d{2})$/, ""));
-        }
-        catch {
-            return undefined;
-        }
-    }
-    return undefined;
-}
-/**
- * Icon-only copy button used as an `InputGroup.Suffix`. `getValue` is invoked
- * lazily on click so the button copies the input's *live* value rather than a
- * stale snapshot — important when paired with editable inputs.
- */
-function CopyButton({ getValue, isDisabled }) {
-    const { localization } = useAuth();
-    const [copied, setCopied] = useState(false);
-    async function handleCopy() {
-        const value = getValue();
-        if (!value)
-            return;
-        try {
-            await navigator.clipboard.writeText(value);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 1500);
-        }
-        catch (error) {
-            toast.danger(error instanceof Error ? error.message : String(error));
-        }
-    }
-    return (_jsx(Button, { isIconOnly: true, "aria-label": localization.settings.copyToClipboard, size: "sm", variant: "ghost", isDisabled: isDisabled, onPress: handleCopy, children: copied ? _jsx(Check, { className: "size-4" }) : _jsx(Copy, { className: "size-4" }) }));
-}
-/** Renders a single additional user field via HeroUI v3 components. */
-export function AdditionalField({ name, field, isPending, variant }) {
-    const { localization } = useAuth();
-    const inputType = resolveInputType(field);
-    const inputVariant = variant === "transparent" ? "primary" : "secondary";
-    // Used by `inputType: "input"` with `copyable: true` so the copy button
-    // reads the input's *live* value rather than a stale `defaultValue`.
-    const inputRef = useRef(null);
-    if (field.render) {
-        return _jsx(_Fragment, { children: field.render({ name, field, isPending, variant }) });
-    }
-    if (inputType === "hidden") {
-        return (_jsx("input", { type: "hidden", name: name, value: field.defaultValue == null
-                ? ""
-                : field.defaultValue instanceof Date
-                    ? field.defaultValue.toISOString()
-                    : String(field.defaultValue) }));
-    }
-    if (inputType === "textarea") {
-        return (_jsxs(TextField, { name: name, defaultValue: field.defaultValue == null ? undefined : String(field.defaultValue), isDisabled: isPending, isReadOnly: field.readOnly, children: [_jsx(Label, { children: field.label }), _jsx(TextArea, { placeholder: field.placeholder, required: field.required, variant: inputVariant }), _jsx(FieldError, {})] }));
-    }
-    if (inputType === "number") {
-        const maxFractionDigits = field.formatOptions?.maximumFractionDigits;
-        return (_jsxs(NumberField, { name: name, defaultValue: typeof field.defaultValue === "number"
-                ? field.defaultValue
-                : field.defaultValue != null && field.defaultValue !== ""
-                    ? Number(field.defaultValue)
-                    : undefined, minValue: field.min, maxValue: field.max, step: field.step ?? (maxFractionDigits ? 1 / 10 ** maxFractionDigits : 1), formatOptions: field.formatOptions, isDisabled: isPending, isReadOnly: field.readOnly, variant: inputVariant, children: [_jsx(Label, { children: field.label }), _jsxs(NumberField.Group, { children: [_jsx(NumberField.DecrementButton, {}), _jsx(NumberField.Input, { placeholder: field.placeholder, required: field.required }), _jsx(NumberField.IncrementButton, {})] }), _jsx(FieldError, {})] }));
-    }
-    if (inputType === "slider") {
-        const maxFractionDigits = field.formatOptions?.maximumFractionDigits;
-        return (_jsxs(Slider, { defaultValue: typeof field.defaultValue === "number"
-                ? field.defaultValue
-                : field.defaultValue != null
-                    ? Number(field.defaultValue)
-                    : undefined, minValue: field.min ?? 0, maxValue: field.max ?? 100, step: field.step ?? (maxFractionDigits ? 1 / 10 ** maxFractionDigits : 1), formatOptions: field.formatOptions, isDisabled: isPending || field.readOnly, className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(Label, { children: field.label }), _jsx(Slider.Output, { className: "text-sm text-muted" })] }), _jsxs(Slider.Track, { children: [_jsx(Slider.Fill, {}), _jsx(Slider.Thumb, { name: name })] })] }));
-    }
-    if (inputType === "switch") {
-        return (_jsxs(Switch, { name: name, defaultSelected: field.defaultValue === true || field.defaultValue === "true", isDisabled: isPending, isReadOnly: field.readOnly, children: [_jsx(Switch.Control, { children: _jsx(Switch.Thumb, {}) }), _jsx(Label, { children: field.label })] }));
-    }
-    if (inputType === "checkbox") {
-        return (_jsxs(Checkbox, { name: name, defaultSelected: field.defaultValue === true || field.defaultValue === "true", isDisabled: isPending, isReadOnly: field.readOnly, isRequired: field.required, variant: inputVariant, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, {}) }), _jsx(Checkbox.Content, { children: _jsx(Label, { children: field.label }) })] }));
-    }
-    if (inputType === "select") {
-        return (_jsxs(Select, { className: "[&[data-required=true]>.label]:after:content-none", name: name, defaultValue: field.defaultValue != null ? String(field.defaultValue) : undefined, placeholder: field.placeholder, isDisabled: isPending || field.readOnly, isRequired: field.required, variant: inputVariant, fullWidth: true, children: [_jsx(Label, { children: field.label }), _jsxs(Select.Trigger, { children: [_jsx(Select.Value, {}), _jsx(Select.Indicator, {})] }), _jsx(Select.Popover, { children: _jsx(ListBox, { children: field.options?.map((option) => (_jsxs(ListBox.Item, { id: option.value, textValue: typeof option.label === "string" ? option.label : option.value, children: [option.label, _jsx(ListBox.ItemIndicator, {})] }, option.value))) }) }), _jsx(FieldError, {})] }));
-    }
-    if (inputType === "combobox") {
-        return (_jsxs(ComboBox, { className: "[&[data-required=true]>.label]:after:content-none", name: name, defaultSelectedKey: field.defaultValue != null ? String(field.defaultValue) : undefined, isDisabled: isPending, isReadOnly: field.readOnly, isRequired: field.required, variant: inputVariant, fullWidth: true, children: [_jsx(Label, { children: field.label }), _jsxs(ComboBox.InputGroup, { children: [_jsx(Input, { placeholder: field.placeholder }), _jsx(ComboBox.Trigger, {})] }), _jsx(ComboBox.Popover, { children: _jsx(ListBox, { children: field.options?.map((option) => (_jsxs(ListBox.Item, { id: option.value, textValue: typeof option.label === "string" ? option.label : option.value, children: [option.label, _jsx(ListBox.ItemIndicator, {})] }, option.value))) }) }), _jsx(FieldError, {})] }));
-    }
-    if (inputType === "date" || inputType === "datetime") {
-        const isDateTime = inputType === "datetime";
-        const defaultValue = isDateTime
-            ? toDateTimeValue(field.defaultValue)
-            : toDateValue(field.defaultValue);
-        return (_jsx(DatePicker, { className: "w-full [&[data-required=true]>.label]:after:content-none", name: name, defaultValue: defaultValue, granularity: isDateTime ? "minute" : "day", isDisabled: isPending, isReadOnly: field.readOnly, isRequired: field.required, children: ({ state }) => (_jsxs(_Fragment, { children: [_jsx(Label, { children: field.label }), _jsxs(DateField.Group, { variant: inputVariant, fullWidth: true, children: [_jsx(DateField.Input, { children: (segment) => _jsx(DateField.Segment, { segment: segment }) }), _jsx(DateField.Suffix, { children: _jsx(DatePicker.Trigger, { children: _jsx(DatePicker.TriggerIndicator, {}) }) })] }), _jsx(FieldError, {}), _jsxs(DatePicker.Popover, { className: "flex flex-col gap-3", children: [_jsxs(Calendar, { "aria-label": typeof field.label === "string" ? field.label : name, children: [_jsxs(Calendar.Header, { children: [_jsxs(Calendar.YearPickerTrigger, { children: [_jsx(Calendar.YearPickerTriggerHeading, {}), _jsx(Calendar.YearPickerTriggerIndicator, {})] }), _jsx(Calendar.NavButton, { slot: "previous" }), _jsx(Calendar.NavButton, { slot: "next" })] }), _jsxs(Calendar.Grid, { children: [_jsx(Calendar.GridHeader, { children: (day) => _jsx(Calendar.HeaderCell, { children: day }) }), _jsx(Calendar.GridBody, { children: (date) => _jsx(Calendar.Cell, { date: date }) })] }), _jsx(Calendar.YearPickerGrid, { children: _jsx(Calendar.YearPickerGridBody, { children: ({ year }) => _jsx(Calendar.YearPickerCell, { year: year }) }) })] }), isDateTime && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { children: localization.settings.time }), _jsx(TimeField, { "aria-label": localization.settings.time, granularity: "minute", value: state.timeValue, onChange: (v) => state.setTimeValue(v), children: _jsx(TimeField.Group, { variant: "secondary", children: _jsx(TimeField.Input, { children: (segment) => _jsx(TimeField.Segment, { segment: segment }) }) }) })] }))] })] })) }));
-    }
-    // inputType === "input"
-    const hasPrefix = field.prefix != null;
-    const hasSuffix = field.suffix != null || field.copyable;
-    // When `inputType: "input"` is paired with `type: "number"`, restrict the
-    // native input to numbers. `formatOptions.maximumFractionDigits` enables
-    // fractional input via `step`.
-    const isNumeric = field.type === "number";
-    const maxFractionDigits = field.formatOptions?.maximumFractionDigits;
-    const nativeInputType = isNumeric ? "number" : undefined;
-    const nativeInputMode = isNumeric
-        ? maxFractionDigits
-            ? "decimal"
-            : "numeric"
-        : undefined;
-    const nativeStep = maxFractionDigits ? 1 / 10 ** maxFractionDigits : undefined;
-    if (hasPrefix || hasSuffix) {
-        return (_jsxs(TextField, { name: name, defaultValue: field.defaultValue == null ? undefined : String(field.defaultValue), isDisabled: isPending, isReadOnly: field.readOnly, children: [_jsx(Label, { children: field.label }), _jsxs(InputGroup, { variant: inputVariant, children: [hasPrefix && _jsx(InputGroup.Prefix, { children: field.prefix }), _jsx(InputGroup.Input, { ref: inputRef, placeholder: field.placeholder, required: field.required, type: nativeInputType, inputMode: nativeInputMode, step: nativeStep }), field.copyable ? (_jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(CopyButton, { getValue: () => inputRef.current?.value, isDisabled: isPending }) })) : (field.suffix != null && (_jsx(InputGroup.Suffix, { children: field.suffix })))] }), _jsx(FieldError, {})] }));
-    }
-    return (_jsxs(TextField, { name: name, defaultValue: field.defaultValue == null ? undefined : String(field.defaultValue), isDisabled: isPending, isReadOnly: field.readOnly, children: [_jsx(Label, { children: field.label }), _jsx(Input, { placeholder: field.placeholder, required: field.required, variant: inputVariant, type: nativeInputType, inputMode: nativeInputMode, step: nativeStep }), _jsx(FieldError, {})] }));
-}

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

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from "@heroui/react";
-export function ApiKeySkeleton() {
-    return (_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 rounded-xl" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-28 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-36 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-32 rounded-lg" })] })] }) }));
-}

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

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { 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 function ApiKey({ apiKey, hideDelete, organizationId }) {
-    const { localization } = useAuth();
-    const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin);
-    const [deleteOpen, setDeleteOpen] = useState(false);
-    const preview = `${apiKey.start}${"*".repeat(16)}`;
-    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary", children: _jsx(Key, { className: "size-4.5" }) }), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("span", { className: "text-sm font-medium leading-tight truncate", children: apiKey.name || apiKeyLocalization.apiKey }), _jsx("span", { className: "text-xs text-muted font-mono truncate", children: preview }), _jsx("span", { className: "text-xs text-muted", children: new Date(apiKey.createdAt).toLocaleString(undefined, {
-                            dateStyle: "medium",
-                            timeStyle: "short"
-                        }) })] }), !hideDelete && (_jsxs(_Fragment, { children: [_jsxs(Button, { className: "ml-auto shrink-0", variant: "outline", size: "sm", onPress: () => setDeleteOpen(true), "aria-label": apiKeyLocalization.deleteApiKey, children: [_jsx(Xmark, {}), localization.settings.delete] }), _jsx(DeleteApiKeyDialog, { isOpen: deleteOpen, onOpenChange: setDeleteOpen, apiKey: apiKey, organizationId: organizationId })] }))] }));
-}

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

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 function ApiKeysEmpty({ onCreatePress, hideCreate }) {
-    const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin);
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4", children: [_jsx("div", { className: "flex size-10 items-center justify-center rounded-xl bg-surface-secondary", children: _jsx(Key, { className: "size-4.5" }) }), _jsxs("div", { className: "flex flex-col items-center justify-center gap-1 text-center", children: [_jsx("p", { className: "text-sm font-semibold", children: apiKeyLocalization.noApiKeys }), _jsx("p", { className: "text-muted text-xs", children: apiKeyLocalization.apiKeysDescription })] }), !hideCreate && (_jsx(Button, { size: "sm", onPress: onCreatePress, children: apiKeyLocalization.createApiKey }))] }));
-}

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

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useAuthPlugin, useListApiKeys } from "@better-auth-ui/react";
-import { Button, Card, 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 function ApiKeys({ className, variant, organizationId, isPending: isPendingProp, hideCreate, hideDelete }) {
-    const { authClient } = useAuth();
-    const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin);
-    const { data: listData, isPending: isListPending } = useListApiKeys(authClient, {
-        enabled: !isPendingProp,
-        ...(organizationId
-            ? { query: { organizationId, configId: "organization" } }
-            : {})
-    });
-    const isPending = isPendingProp || isListPending;
-    const [createOpen, setCreateOpen] = useState(false);
-    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsxs("div", { className: "flex items-end justify-between gap-3", children: [_jsx("h2", { className: "text-sm font-semibold truncate", children: apiKeyLocalization.apiKeys }), !hideCreate && (_jsx(Button, { className: "shrink-0", size: "sm", isDisabled: isPending, onPress: () => setCreateOpen(true), children: apiKeyLocalization.createApiKey }))] }), _jsx(Card, { variant: variant, children: _jsx(Card.Content, { children: isPending ? (_jsx(ApiKeySkeleton, {})) : !listData?.apiKeys.length ? (_jsx(ApiKeysEmpty, { onCreatePress: () => setCreateOpen(true), hideCreate: hideCreate })) : (listData?.apiKeys.map((key, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 my-4" })), _jsx(ApiKey, { apiKey: key, hideDelete: hideDelete, organizationId: organizationId })] }, key.id)))) }) }), !hideCreate && (_jsx(CreateApiKeyDialog, { isOpen: createOpen, onOpenChange: setCreateOpen, organizationId: organizationId }))] }));
-}

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

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

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

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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 function DeleteApiKeyDialog({ isOpen, onOpenChange, apiKey, organizationId }) {
-    const { authClient, localization } = useAuth();
-    const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin);
-    const preview = `${apiKey.start}${"*".repeat(16)}`;
-    const { mutate: deleteApiKey, isPending: isDeleting } = useDeleteApiKey(authClient, {
-        onSuccess: () => onOpenChange(false)
-    });
-    return (_jsx(AlertDialog.Backdrop, { isOpen: isOpen, onOpenChange: onOpenChange, children: _jsx(AlertDialog.Container, { children: _jsxs(AlertDialog.Dialog, { children: [_jsx(AlertDialog.CloseTrigger, {}), _jsxs(AlertDialog.Header, { children: [_jsx(AlertDialog.Icon, { status: "danger", children: _jsx(Key, {}) }), _jsx(AlertDialog.Heading, { children: apiKeyLocalization.deleteApiKey })] }), _jsxs(AlertDialog.Body, { className: "flex flex-col gap-4 overflow-visible", children: [_jsx("p", { className: "text-muted text-sm", children: apiKeyLocalization.deleteApiKeyWarning }), _jsxs(TextField, { value: preview, className: "font-mono text-xs", variant: "secondary", children: [_jsx(Label, { children: apiKey.name || apiKeyLocalization.apiKey }), _jsx(Input, { readOnly: true, className: "font-mono text-xs" })] })] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { slot: "close", variant: "tertiary", isDisabled: isDeleting, children: localization.settings.cancel }), _jsxs(Button, { variant: "danger", onPress: () => deleteApiKey({
-                                    keyId: apiKey.id,
-                                    ...(organizationId ? { configId: "organization" } : {})
-                                }), isPending: isDeleting, children: [isDeleting && _jsx(Spinner, { color: "current", size: "sm" }), apiKeyLocalization.deleteApiKey] })] })] }) }) }));
-}

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

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 function NewApiKeyDialog({ isOpen, onOpenChange, name, secretKey }) {
-    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 (_jsx(AlertDialog.Backdrop, { isOpen: isOpen, onOpenChange: onOpenChange, children: _jsx(AlertDialog.Container, { children: _jsxs(AlertDialog.Dialog, { children: [_jsx(AlertDialog.CloseTrigger, {}), _jsxs(AlertDialog.Header, { children: [_jsx(AlertDialog.Icon, { status: "warning", children: _jsx(Key, {}) }), _jsx(AlertDialog.Heading, { children: apiKeyLocalization.newApiKey })] }), _jsxs(AlertDialog.Body, { className: "flex flex-col gap-4 overflow-visible", children: [_jsx("p", { className: "text-muted text-sm", children: apiKeyLocalization.newApiKeyWarning }), _jsxs(TextField, { value: secretKey ?? "", className: "font-mono text-xs", children: [_jsx(Label, { children: name || apiKeyLocalization.apiKey }), _jsxs(InputGroup, { variant: "secondary", children: [_jsx(InputGroup.Input, { readOnly: true, className: "font-mono text-xs" }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": localization.settings.copyToClipboard, size: "sm", variant: "ghost", onPress: copySecretKey, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) }) })] })] })] }), _jsx(AlertDialog.Footer, { children: _jsx(Button, { slot: "close", children: apiKeyLocalization.dismissNewKey }) })] }) }) }));
-}

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

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

package/dist/components/auth/auth-provider.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AuthProvider as AuthProviderPrimitive } from "@better-auth-ui/react";
-import { RouterProvider } from "@heroui/react";
-import { ErrorToaster } from "./error-toaster";
-/**
- * Heroui-flavored `AuthProvider`. Wraps the primitive provider with a
- * heroui `RouterProvider` and the heroui `ErrorToaster`.
- */
-export function AuthProvider({ children, navigate, ...config }) {
-    return (_jsx(AuthProviderPrimitive, { navigate: navigate, ...config, children: _jsxs(RouterProvider, { navigate: (path) => navigate({ to: path }), children: [children, _jsx(ErrorToaster, {})] }) }));
-}

package/dist/components/auth/auth.js

@@ -1,88 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useAuth } from "@better-auth-ui/react";
-import { useEffect } from "react";
-import { ForgotPassword } from "./forgot-password";
-import { ResetPassword } from "./reset-password";
-import { SignIn } from "./sign-in";
-import { SignOut } from "./sign-out";
-import { SignUp } from "./sign-up";
-/**
- * Built-in views that only make sense when email + password auth is enabled.
- * When it's disabled, the `<Auth>` router redirects these to `signIn` so a
- * plugin's `fallbackViews.auth.signIn` (e.g. magic link) takes over.
- */
-const PASSWORD_ONLY_VIEWS = ["signUp", "forgotPassword", "resetPassword"];
-const AUTH_VIEWS = {
-    signIn: SignIn,
-    signOut: SignOut,
-    signUp: SignUp,
-    forgotPassword: ForgotPassword,
-    resetPassword: ResetPassword
-};
-/**
- * Render the appropriate authentication view based on the provided `view` or `path`.
- *
- * @param path - Route path used to resolve an auth view when `view` is not provided
- * @param socialLayout - Social layout to apply to sign-in/sign-up/magic-link views
- * @param socialPosition - Position for social buttons ("top" or "bottom")
- * @param variant - Variant to apply to the card
- * @param view - Explicit auth view to render (e.g., "signIn", "signUp")
- * @returns The React element for the resolved authentication view
- */
-export function Auth({ path, socialLayout, socialPosition, view, ...props }) {
-    const { basePaths, emailAndPassword, plugins, viewPaths, navigate } = useAuth();
-    if (!view && !path) {
-        throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
-    }
-    const authView = view ||
-        Object.keys(viewPaths.auth).find((key) => viewPaths.auth[key] === path);
-    // When email + password auth is disabled, password-only views (signUp,
-    // forgotPassword, resetPassword) have no meaning. Redirect them to signIn,
-    // where a plugin's `fallbackViews.auth.signIn` (e.g. magic link) takes
-    // over as the primary entry point.
-    const shouldRedirectToSignIn = !emailAndPassword?.enabled &&
-        authView &&
-        PASSWORD_ONLY_VIEWS.includes(authView);
-    useEffect(() => {
-        if (shouldRedirectToSignIn) {
-            navigate({
-                to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
-                replace: true
-            });
-        }
-    }, [shouldRedirectToSignIn, navigate, basePaths.auth, viewPaths.auth.signIn]);
-    if (shouldRedirectToSignIn) {
-        return null;
-    }
-    // 1. Plugin overrides (`views.auth[currentView]`) — first plugin wins,
-    //    including over built-in views. Resolves the view key from `view`,
-    //    then `authView` (built-in path match), then plugin-introduced paths
-    //    (e.g. `magicLink` → `/auth/magic-link`).
-    for (const plugin of plugins) {
-        const pluginAuthPaths = plugin.viewPaths?.auth;
-        const pluginView = view ??
-            authView ??
-            (pluginAuthPaths &&
-                Object.keys(pluginAuthPaths).find((key) => pluginAuthPaths[key] === path));
-        if (!pluginView)
-            continue;
-        const PluginView = plugin.views?.auth?.[pluginView];
-        if (!PluginView)
-            continue;
-        return (_jsx(PluginView, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
-    }
-    // 2. Plugin fallbacks — only when the built-in `signIn` isn't viable
-    //    (password auth is off). Used by `magicLinkPlugin` to render the
-    //    magic-link form as the primary passwordless sign-in surface.
-    if (authView === "signIn" && !emailAndPassword?.enabled) {
-        const Fallback = plugins.find((plugin) => plugin.fallbackViews?.auth?.signIn)?.fallbackViews?.auth?.signIn;
-        if (Fallback) {
-            return (_jsx(Fallback, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
-        }
-    }
-    const AuthView = authView ? AUTH_VIEWS[authView] : undefined;
-    if (!AuthView) {
-        throw new Error(`[Better Auth UI] Unknown view "${authView}". Valid views are: ${Object.keys(AUTH_VIEWS).join(", ")}`);
-    }
-    return (_jsx(AuthView, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
-}

package/dist/components/auth/delete-user/danger-zone.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth } from "@better-auth-ui/react";
-import { cn } from "@heroui/react";
-import { DeleteAccount } from "./delete-account";
-/**
- * Renders the danger zone heading and {@link DeleteAccount}.
- * Registered as a `securityCard` by `deleteUserPlugin()`; gate by registering the plugin.
- */
-export function DangerZone({ className, variant, ...props }) {
-    const { localization } = useAuth();
-    return (_jsxs("div", { className: cn("flex w-full flex-col", className), ...props, children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3 text-danger"), children: localization.settings.dangerZone }), _jsx(DeleteAccount, { variant: variant })] }));
-}

package/dist/components/auth/delete-user/delete-account.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { authQueryKeys } from "@better-auth-ui/core";
-import { useAuth, useAuthPlugin, useDeleteUser, useListAccounts } from "@better-auth-ui/react";
-import { TriangleExclamation } from "@gravity-ui/icons";
-import { AlertDialog, Button, Card, FieldError, Form, Input, Label, Spinner, TextField, toast } from "@heroui/react";
-import { useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-import { deleteUserPlugin } from "../../../lib/auth/delete-user-plugin";
-/**
- * Danger-zone card to delete the authenticated account, with a confirmation dialog and toasts.
- */
-export function DeleteAccount({ className, variant, ...props }) {
-    const { authClient, basePaths, localization, navigate, viewPaths } = useAuth();
-    const { localization: deleteUserLocalization, sendDeleteAccountVerification } = useAuthPlugin(deleteUserPlugin);
-    const { data: accounts } = useListAccounts(authClient);
-    const queryClient = useQueryClient();
-    const [confirmOpen, setConfirmOpen] = useState(false);
-    const [password, setPassword] = useState("");
-    const hasCredentialAccount = accounts?.some((account) => account.providerId === "credential");
-    const needsPassword = !sendDeleteAccountVerification && hasCredentialAccount;
-    const { mutate: deleteUser, isPending } = useDeleteUser(authClient);
-    const handleDialogOpenChange = (open) => {
-        setConfirmOpen(open);
-        setPassword("");
-    };
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        const params = {
-            ...(needsPassword ? { password } : {})
-        };
-        deleteUser(params, {
-            onSuccess: () => {
-                setConfirmOpen(false);
-                setPassword("");
-                if (sendDeleteAccountVerification) {
-                    toast.success(deleteUserLocalization.deleteUserVerificationSent);
-                }
-                else {
-                    toast.success(deleteUserLocalization.deleteUserSuccess);
-                    queryClient.removeQueries({ queryKey: authQueryKeys.all });
-                    navigate({
-                        to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
-                        replace: true
-                    });
-                }
-            }
-        });
-    };
-    return (_jsx(Card, { className: className, variant: variant, ...props, children: _jsxs(Card.Content, { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: deleteUserLocalization.deleteAccount }), _jsx("p", { className: "text-muted text-xs mt-0.5", children: deleteUserLocalization.deleteAccountDescription })] }), _jsxs(AlertDialog, { children: [_jsx(Button, { isDisabled: !accounts, size: "sm", variant: "danger-soft", onPress: () => setConfirmOpen(true), children: deleteUserLocalization.deleteAccount }), _jsx(AlertDialog.Backdrop, { isOpen: confirmOpen, onOpenChange: handleDialogOpenChange, children: _jsx(AlertDialog.Container, { children: _jsx(AlertDialog.Dialog, { children: _jsxs(Form, { onSubmit: handleSubmit, children: [_jsx(AlertDialog.CloseTrigger, {}), _jsxs(AlertDialog.Header, { children: [_jsx(AlertDialog.Icon, { status: "danger", children: _jsx(TriangleExclamation, {}) }), _jsx(AlertDialog.Heading, { children: deleteUserLocalization.deleteAccount })] }), _jsxs(AlertDialog.Body, { className: "overflow-visible", children: [_jsx("p", { className: "text-muted text-sm", children: deleteUserLocalization.deleteAccountDescription }), needsPassword && (_jsxs(TextField, { className: "mt-4", name: "password", type: "password", isDisabled: isPending, value: password, onChange: setPassword, children: [_jsx(Label, { children: localization.auth.password }), _jsx(Input, { autoComplete: "current-password", placeholder: localization.auth.passwordPlaceholder, required: true, variant: "secondary" }), _jsx(FieldError, {})] }))] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { slot: "close", variant: "tertiary", isDisabled: isPending, children: localization.settings.cancel }), _jsxs(Button, { type: "submit", variant: "danger", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), deleteUserLocalization.deleteAccount] })] })] }) }) }) })] })] }) }));
-}