@better-auth-ui/heroui 1.6.7 → 1.6.9

package/dist/components/auth/additional-field.d.ts

@@ -1,4 +1,4 @@
-import { AdditionalFieldProps } from '../../lib/auth/auth-plugin';
-export type { AdditionalFieldProps } from '../../lib/auth/auth-plugin';
+import type { AdditionalFieldProps } from "../../lib/auth/auth-plugin";
+export type { AdditionalFieldProps } from "../../lib/auth/auth-plugin";
 /** Renders a single additional user field via HeroUI v3 components. */
 export declare function AdditionalField({ name, field, isPending, variant }: AdditionalFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,270 +1,137 @@
-import { resolveInputType as e } from "@better-auth-ui/core";
-import { useAuth as t } from "@better-auth-ui/react";
-import { Check as n, Copy as r } from "@gravity-ui/icons";
-import { Button as i, Calendar as a, Checkbox as o, ComboBox as s, DateField as c, DatePicker as l, FieldError as u, Input as d, InputGroup as f, Label as p, ListBox as m, NumberField as h, Select as g, Slider as _, Switch as v, TextArea as y, TextField as b, TimeField as x, toast as S } from "@heroui/react";
-import { fromDate as C, getLocalTimeZone as w, parseDate as T, parseDateTime as E, toCalendarDate as D, toCalendarDateTime as O } from "@internationalized/date";
-import { useRef as k, useState as A } from "react";
-import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
-//#region src/components/auth/additional-field.tsx
-function P(e) {
-	if (e instanceof Date) return D(C(e, w()));
-	if (typeof e == "string") try {
-		return T(e.slice(0, 10));
-	} catch {
-		return;
-	}
+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;
 }
-function F(e) {
-	if (e instanceof Date) return O(C(e, w()));
-	if (typeof e == "string") try {
-		return E(e.replace(/(Z|[+-]\d{2}:?\d{2})$/, ""));
-	} catch {
-		return;
-	}
+/** 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;
 }
-function I({ getValue: e, isDisabled: a }) {
-	let { localization: o } = t(), [s, c] = A(!1);
-	async function l() {
-		let t = e();
-		if (t) try {
-			await navigator.clipboard.writeText(t), c(!0), setTimeout(() => c(!1), 1500);
-		} catch (e) {
-			S.danger(e instanceof Error ? e.message : String(e));
-		}
-	}
-	return /* @__PURE__ */ M(i, {
-		isIconOnly: !0,
-		"aria-label": o.settings.copyToClipboard,
-		size: "sm",
-		variant: "ghost",
-		isDisabled: a,
-		onPress: l,
-		children: M(s ? n : r, { className: "size-4" })
-	});
+/**
+ * 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" }) }));
 }
-function L({ name: n, field: r, isPending: i, variant: S }) {
-	let { localization: C } = t(), w = e(r), T = S === "transparent" ? "primary" : "secondary", E = k(null);
-	if (r.render) return /* @__PURE__ */ M(j, { children: r.render({
-		name: n,
-		field: r,
-		isPending: i,
-		variant: S
-	}) });
-	if (w === "hidden") return /* @__PURE__ */ M("input", {
-		type: "hidden",
-		name: n,
-		value: r.defaultValue == null ? "" : r.defaultValue instanceof Date ? r.defaultValue.toISOString() : String(r.defaultValue)
-	});
-	if (w === "textarea") return /* @__PURE__ */ N(b, {
-		name: n,
-		defaultValue: r.defaultValue == null ? void 0 : String(r.defaultValue),
-		isDisabled: i,
-		isReadOnly: r.readOnly,
-		children: [
-			/* @__PURE__ */ M(p, { children: r.label }),
-			/* @__PURE__ */ M(y, {
-				placeholder: r.placeholder,
-				required: r.required,
-				variant: T
-			}),
-			/* @__PURE__ */ M(u, {})
-		]
-	});
-	if (w === "number") {
-		let e = r.formatOptions?.maximumFractionDigits;
-		return /* @__PURE__ */ N(h, {
-			name: n,
-			defaultValue: typeof r.defaultValue == "number" ? r.defaultValue : r.defaultValue != null && r.defaultValue !== "" ? Number(r.defaultValue) : void 0,
-			minValue: r.min,
-			maxValue: r.max,
-			step: r.step ?? (e ? 1 / 10 ** e : 1),
-			formatOptions: r.formatOptions,
-			isDisabled: i,
-			isReadOnly: r.readOnly,
-			variant: T,
-			children: [
-				/* @__PURE__ */ M(p, { children: r.label }),
-				/* @__PURE__ */ N(h.Group, { children: [
-					/* @__PURE__ */ M(h.DecrementButton, {}),
-					/* @__PURE__ */ M(h.Input, {
-						placeholder: r.placeholder,
-						required: r.required
-					}),
-					/* @__PURE__ */ M(h.IncrementButton, {})
-				] }),
-				/* @__PURE__ */ M(u, {})
-			]
-		});
-	}
-	if (w === "slider") {
-		let e = r.formatOptions?.maximumFractionDigits;
-		return /* @__PURE__ */ N(_, {
-			defaultValue: typeof r.defaultValue == "number" ? r.defaultValue : r.defaultValue == null ? void 0 : Number(r.defaultValue),
-			minValue: r.min ?? 0,
-			maxValue: r.max ?? 100,
-			step: r.step ?? (e ? 1 / 10 ** e : 1),
-			formatOptions: r.formatOptions,
-			isDisabled: i || r.readOnly,
-			className: "flex flex-col gap-2",
-			children: [/* @__PURE__ */ N("div", {
-				className: "flex items-center justify-between gap-2",
-				children: [/* @__PURE__ */ M(p, { children: r.label }), /* @__PURE__ */ M(_.Output, { className: "text-sm text-muted" })]
-			}), /* @__PURE__ */ N(_.Track, { children: [/* @__PURE__ */ M(_.Fill, {}), /* @__PURE__ */ M(_.Thumb, { name: n })] })]
-		});
-	}
-	if (w === "switch") return /* @__PURE__ */ N(v, {
-		name: n,
-		defaultSelected: r.defaultValue === !0 || r.defaultValue === "true",
-		isDisabled: i,
-		isReadOnly: r.readOnly,
-		children: [/* @__PURE__ */ M(v.Control, { children: /* @__PURE__ */ M(v.Thumb, {}) }), /* @__PURE__ */ M(p, { children: r.label })]
-	});
-	if (w === "checkbox") return /* @__PURE__ */ N(o, {
-		name: n,
-		defaultSelected: r.defaultValue === !0 || r.defaultValue === "true",
-		isDisabled: i,
-		isReadOnly: r.readOnly,
-		isRequired: r.required,
-		variant: T,
-		children: [/* @__PURE__ */ M(o.Control, { children: /* @__PURE__ */ M(o.Indicator, {}) }), /* @__PURE__ */ M(o.Content, { children: /* @__PURE__ */ M(p, { children: r.label }) })]
-	});
-	if (w === "select") return /* @__PURE__ */ N(g, {
-		className: "[&[data-required=true]>.label]:after:content-none",
-		name: n,
-		defaultValue: r.defaultValue == null ? void 0 : String(r.defaultValue),
-		placeholder: r.placeholder,
-		isDisabled: i || r.readOnly,
-		isRequired: r.required,
-		variant: T,
-		fullWidth: !0,
-		children: [
-			/* @__PURE__ */ M(p, { children: r.label }),
-			/* @__PURE__ */ N(g.Trigger, { children: [/* @__PURE__ */ M(g.Value, {}), /* @__PURE__ */ M(g.Indicator, {})] }),
-			/* @__PURE__ */ M(g.Popover, { children: /* @__PURE__ */ M(m, { children: r.options?.map((e) => /* @__PURE__ */ N(m.Item, {
-				id: e.value,
-				textValue: typeof e.label == "string" ? e.label : e.value,
-				children: [e.label, /* @__PURE__ */ M(m.ItemIndicator, {})]
-			}, e.value)) }) }),
-			/* @__PURE__ */ M(u, {})
-		]
-	});
-	if (w === "combobox") return /* @__PURE__ */ N(s, {
-		className: "[&[data-required=true]>.label]:after:content-none",
-		name: n,
-		defaultSelectedKey: r.defaultValue == null ? void 0 : String(r.defaultValue),
-		isDisabled: i,
-		isReadOnly: r.readOnly,
-		isRequired: r.required,
-		variant: T,
-		fullWidth: !0,
-		children: [
-			/* @__PURE__ */ M(p, { children: r.label }),
-			/* @__PURE__ */ N(s.InputGroup, { children: [/* @__PURE__ */ M(d, { placeholder: r.placeholder }), /* @__PURE__ */ M(s.Trigger, {})] }),
-			/* @__PURE__ */ M(s.Popover, { children: /* @__PURE__ */ M(m, { children: r.options?.map((e) => /* @__PURE__ */ N(m.Item, {
-				id: e.value,
-				textValue: typeof e.label == "string" ? e.label : e.value,
-				children: [e.label, /* @__PURE__ */ M(m.ItemIndicator, {})]
-			}, e.value)) }) }),
-			/* @__PURE__ */ M(u, {})
-		]
-	});
-	if (w === "date" || w === "datetime") {
-		let e = w === "datetime";
-		return /* @__PURE__ */ M(l, {
-			className: "w-full [&[data-required=true]>.label]:after:content-none",
-			name: n,
-			defaultValue: e ? F(r.defaultValue) : P(r.defaultValue),
-			granularity: e ? "minute" : "day",
-			isDisabled: i,
-			isReadOnly: r.readOnly,
-			isRequired: r.required,
-			children: ({ state: t }) => /* @__PURE__ */ N(j, { children: [
-				/* @__PURE__ */ M(p, { children: r.label }),
-				/* @__PURE__ */ N(c.Group, {
-					variant: T,
-					fullWidth: !0,
-					children: [/* @__PURE__ */ M(c.Input, { children: (e) => /* @__PURE__ */ M(c.Segment, { segment: e }) }), /* @__PURE__ */ M(c.Suffix, { children: /* @__PURE__ */ M(l.Trigger, { children: /* @__PURE__ */ M(l.TriggerIndicator, {}) }) })]
-				}),
-				/* @__PURE__ */ M(u, {}),
-				/* @__PURE__ */ N(l.Popover, {
-					className: "flex flex-col gap-3",
-					children: [/* @__PURE__ */ N(a, {
-						"aria-label": typeof r.label == "string" ? r.label : n,
-						children: [
-							/* @__PURE__ */ N(a.Header, { children: [
-								/* @__PURE__ */ N(a.YearPickerTrigger, { children: [/* @__PURE__ */ M(a.YearPickerTriggerHeading, {}), /* @__PURE__ */ M(a.YearPickerTriggerIndicator, {})] }),
-								/* @__PURE__ */ M(a.NavButton, { slot: "previous" }),
-								/* @__PURE__ */ M(a.NavButton, { slot: "next" })
-							] }),
-							/* @__PURE__ */ N(a.Grid, { children: [/* @__PURE__ */ M(a.GridHeader, { children: (e) => /* @__PURE__ */ M(a.HeaderCell, { children: e }) }), /* @__PURE__ */ M(a.GridBody, { children: (e) => /* @__PURE__ */ M(a.Cell, { date: e }) })] }),
-							/* @__PURE__ */ M(a.YearPickerGrid, { children: /* @__PURE__ */ M(a.YearPickerGridBody, { children: ({ year: e }) => /* @__PURE__ */ M(a.YearPickerCell, { year: e }) }) })
-						]
-					}), e && /* @__PURE__ */ N("div", {
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ M(p, { children: C.settings.time }), /* @__PURE__ */ M(x, {
-							"aria-label": C.settings.time,
-							granularity: "minute",
-							value: t.timeValue,
-							onChange: (e) => t.setTimeValue(e),
-							children: /* @__PURE__ */ M(x.Group, {
-								variant: "secondary",
-								children: /* @__PURE__ */ M(x.Input, { children: (e) => /* @__PURE__ */ M(x.Segment, { segment: e }) })
-							})
-						})]
-					})]
-				})
-			] })
-		});
-	}
-	let D = r.prefix != null, O = r.suffix != null || r.copyable, A = r.type === "number", L = r.formatOptions?.maximumFractionDigits, R = A ? "number" : void 0, z = A ? L ? "decimal" : "numeric" : void 0, B = L ? 1 / 10 ** L : void 0;
-	return D || O ? /* @__PURE__ */ N(b, {
-		name: n,
-		defaultValue: r.defaultValue == null ? void 0 : String(r.defaultValue),
-		isDisabled: i,
-		isReadOnly: r.readOnly,
-		children: [
-			/* @__PURE__ */ M(p, { children: r.label }),
-			/* @__PURE__ */ N(f, {
-				variant: T,
-				children: [
-					D && /* @__PURE__ */ M(f.Prefix, { children: r.prefix }),
-					/* @__PURE__ */ M(f.Input, {
-						ref: E,
-						placeholder: r.placeholder,
-						required: r.required,
-						type: R,
-						inputMode: z,
-						step: B
-					}),
-					r.copyable ? /* @__PURE__ */ M(f.Suffix, {
-						className: "px-0",
-						children: /* @__PURE__ */ M(I, {
-							getValue: () => E.current?.value,
-							isDisabled: i
-						})
-					}) : r.suffix != null && /* @__PURE__ */ M(f.Suffix, { children: r.suffix })
-				]
-			}),
-			/* @__PURE__ */ M(u, {})
-		]
-	}) : /* @__PURE__ */ N(b, {
-		name: n,
-		defaultValue: r.defaultValue == null ? void 0 : String(r.defaultValue),
-		isDisabled: i,
-		isReadOnly: r.readOnly,
-		children: [
-			/* @__PURE__ */ M(p, { children: r.label }),
-			/* @__PURE__ */ M(d, {
-				placeholder: r.placeholder,
-				required: r.required,
-				variant: T,
-				type: R,
-				inputMode: z,
-				step: B
-			}),
-			/* @__PURE__ */ M(u, {})
-		]
-	});
+/** 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, {})] }));
 }
-//#endregion
-export { L as AdditionalField };

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

@@ -1,21 +1,5 @@
-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" })
-				]
-			})]
-		})
-	});
+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" })] })] }) }));
 }
-//#endregion
-export { r as ApiKeySkeleton };

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

@@ -1,5 +1,9 @@
-import { ListedApiKey } from '@better-auth-ui/react';
+import { type ListedApiKey } from "@better-auth-ui/react";
 export type ApiKeyProps = {
     apiKey: ListedApiKey;
+    /** Hide the row's delete button (e.g., when caller lacks `apiKey:delete`). */
+    hideDelete?: boolean;
+    /** Scope the delete payload to an organization (sets `configId`). */
+    organizationId?: string;
 };
-export declare function ApiKey({ apiKey }: ApiKeyProps): import("react/jsx-runtime").JSX.Element;
+export declare function ApiKey({ apiKey, hideDelete, organizationId }: ApiKeyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,55 +1,17 @@
-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
-			})
-		]
-	});
+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 })] }))] }));
 }
-//#endregion
-export { u as ApiKey };

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

@@ -1,4 +1,6 @@
 export type ApiKeysEmptyProps = {
     onCreatePress: () => void;
+    /** Hide the empty-state "Create API key" button. */
+    hideCreate?: boolean;
 };
-export declare function ApiKeysEmpty({ onCreatePress }: ApiKeysEmptyProps): import("react/jsx-runtime").JSX.Element;
+export declare function ApiKeysEmpty({ onCreatePress, hideCreate }: ApiKeysEmptyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,35 +1,9 @@
-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
-			})
-		]
-	});
+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 }))] }));
 }
-//#endregion
-export { o as ApiKeysEmpty };

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

@@ -1,6 +1,14 @@
-import { CardProps } from '@heroui/react';
+import { type CardProps } from "@heroui/react";
 export type ApiKeysProps = {
     className?: string;
     variant?: CardProps["variant"];
+    /** Scope the list and create payload to an organization. */
+    organizationId?: string;
+    /** Force the loading skeleton and disable the list query. */
+    isPending?: boolean;
+    /** Hide the "Create API key" button (header + empty state). */
+    hideCreate?: boolean;
+    /** Hide the per-row delete button on listed keys. */
+    hideDelete?: boolean;
 };
-export declare function ApiKeys({ className, variant }: ApiKeysProps): import("react/jsx-runtime").JSX.Element;
+export declare function ApiKeys({ className, variant, organizationId, isPending: isPendingProp, hideCreate, hideDelete }: ApiKeysProps): import("react/jsx-runtime").JSX.Element;