better-auth-ui-svelte 0.12.4 → 0.12.6

package/dist/components/admin/admin-dashboard.svelte

@@ -516,15 +516,15 @@
 										yAxis: { format: () => '' }
 									}}
 								>
-									{#snippet marks({ series, getAreaProps })}
+									{#snippet marks({ context })}
 										<defs>
 											<linearGradient id="fillUsers" x1="0" y1="0" x2="0" y2="1">
 												<stop offset="5%" stop-color="var(--color-users)" stop-opacity={1.0} />
 												<stop offset="95%" stop-color="var(--color-users)" stop-opacity={0.1} />
 											</linearGradient>
 										</defs>
-										{#each series as s, i (s.key)}
-											<Area {...getAreaProps(s, i)} fill="url(#fillUsers)" />
+										{#each context.series.visibleSeries as s (s.key)}
+											<Area seriesKey={s.key} fill="url(#fillUsers)" />
 										{/each}
 									{/snippet}
 									{#snippet tooltip()}

package/dist/components/auth/forms/email-otp-form.svelte

@@ -45,9 +45,8 @@
 	let verifiedEmail = $state<string | undefined>(undefined);
 
 	// Transition for OTP verification success
-	const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
-		redirectTo
-	});
+	const transition = useOnSuccessTransition({ redirectTo });
+	const { onSuccess } = transition;
 
 	// Reactive validation schemas
 	const emailFormSchema = $derived(
@@ -106,10 +105,13 @@
 		}
 	}));
 
+	const emailFormIsSubmitting = emailForm.useStore((s) => s.isSubmitting);
+	const otpFormIsSubmitting = otpForm.useStore((s) => s.isSubmitting);
+
 	// Computed submitting states
-	const emailFormSubmitting = $derived(isSubmittingProp || emailForm.state.isSubmitting);
+	const emailFormSubmitting = $derived(isSubmittingProp || emailFormIsSubmitting.current);
 	const otpFormSubmitting = $derived(
-		isSubmittingProp || otpForm.state.isSubmitting || transitionPending
+		isSubmittingProp || otpFormIsSubmitting.current || transition.isPending
 	);
 
 	// Handle email form submission with error handling
@@ -137,7 +139,7 @@
 	// Update parent isSubmitting state
 	$effect(() => {
 		setIsSubmitting?.(
-			emailForm.state.isSubmitting || otpForm.state.isSubmitting || transitionPending
+			emailFormIsSubmitting.current || otpFormIsSubmitting.current || transition.isPending
 		);
 	});
 

package/dist/components/auth/forms/forgot-password-form.svelte

@@ -103,10 +103,12 @@
 		}
 	}));
 
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
+
 	// Sync isSubmitting state
 	$effect(() => {
-		isSubmitting = form.state.isSubmitting;
-		setIsSubmitting?.(form.state.isSubmitting);
+		isSubmitting = formIsSubmitting.current;
+		setIsSubmitting?.(formIsSubmitting.current);
 	});
 </script>
 
@@ -130,7 +132,7 @@
 					value={field.state.value}
 					oninput={(e) => field.handleChange(e.currentTarget.value)}
 					onblur={field.handleBlur}
-					disabled={form.state.isSubmitting}
+					disabled={formIsSubmitting.current}
 					class={classNames?.input}
 				/>
 
@@ -147,10 +149,10 @@
 
 	<Button
 		type="submit"
-		disabled={form.state.isSubmitting}
+		disabled={formIsSubmitting.current}
 		class={cn('w-full', classNames?.button, classNames?.primaryButton)}
 	>
-		{#if form.state.isSubmitting}
+		{#if formIsSubmitting.current}
 			<Loader2 class="animate-spin" />
 		{:else}
 			{localization.FORGOT_PASSWORD_ACTION}

package/dist/components/auth/forms/magic-link-form.svelte

@@ -129,11 +129,12 @@
 		}
 	}));
 
-	const isSubmitting = $derived(isSubmittingProp || form.state.isSubmitting);
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
+	const isSubmitting = $derived(isSubmittingProp || formIsSubmitting.current);
 
 	// Update parent isSubmitting state
 	$effect(() => {
-		setIsSubmitting?.(form.state.isSubmitting);
+		setIsSubmitting?.(formIsSubmitting.current);
 	});
 </script>
 

package/dist/components/auth/forms/recover-account-form.svelte

@@ -41,9 +41,8 @@
 	// Merge localization from context and props
 	const localization = { ...contextLocalization, ...localizationProp };
 
-	const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
-		redirectTo
-	});
+	const transition = useOnSuccessTransition({ redirectTo });
+	const { onSuccess } = transition;
 
 	const schema = z.object({
 		code: z.string().min(1, { message: localization.BACKUP_CODE_REQUIRED })
@@ -71,11 +70,12 @@
 	}));
 
 	// Compute final isSubmitting state
-	const isSubmitting = $derived(isSubmittingProp ?? (form.state.isSubmitting || transitionPending));
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
+	const isSubmitting = $derived(isSubmittingProp ?? (formIsSubmitting.current || transition.isPending));
 
 	// Sync isSubmitting state
 	$effect(() => {
-		setIsSubmitting?.(form.state.isSubmitting || transitionPending);
+		setIsSubmitting?.(formIsSubmitting.current || transition.isPending);
 	});
 </script>
 

package/dist/components/auth/forms/reset-password-form.svelte

@@ -125,6 +125,8 @@
 			}
 		}
 	}));
+
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
 </script>
 
 <form
@@ -147,7 +149,7 @@
 					value={field.state.value}
 					oninput={(e) => field.handleChange(e.currentTarget.value)}
 					onblur={field.handleBlur}
-					disabled={form.state.isSubmitting}
+					disabled={formIsSubmitting.current}
 					class={classNames?.input}
 				/>
 				{#if field.state.meta.errors.length > 0}
@@ -183,7 +185,7 @@
 						value={field.state.value}
 						oninput={(e) => field.handleChange(e.currentTarget.value)}
 						onblur={field.handleBlur}
-						disabled={form.state.isSubmitting}
+						disabled={formIsSubmitting.current}
 						class={classNames?.input}
 					/>
 					{#if field.state.meta.errors.length > 0}
@@ -198,10 +200,10 @@
 
 	<Button
 		type="submit"
-		disabled={form.state.isSubmitting}
+		disabled={formIsSubmitting.current}
 		class={cn('w-full', classNames?.button, classNames?.primaryButton)}
 	>
-		{#if form.state.isSubmitting}
+		{#if formIsSubmitting.current}
 			<Loader2 class="animate-spin" />
 		{:else}
 			{loc.RESET_PASSWORD_ACTION}

package/dist/components/auth/forms/sign-in-form.svelte

@@ -79,9 +79,8 @@
 		captchaHook.captchaRef = captchaRef;
 	});
 
-	const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
-		redirectTo
-	});
+	const transition = useOnSuccessTransition({ redirectTo });
+	const { onSuccess } = transition;
 
 	// Form schema
 	const formSchema = $derived(
@@ -162,11 +161,12 @@
 		}
 	}));
 
-	const isSubmitting = $derived(isSubmittingProp || form.state.isSubmitting || transitionPending);
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
+	const isSubmitting = $derived(isSubmittingProp || formIsSubmitting.current || transition.isPending);
 
 	// Update parent isSubmitting state
 	$effect(() => {
-		setIsSubmitting?.(form.state.isSubmitting || transitionPending);
+		setIsSubmitting?.(formIsSubmitting.current || transition.isPending);
 	});
 </script>
 

package/dist/components/auth/forms/sign-up-form.svelte

@@ -98,9 +98,8 @@
 	});
 
 	// Success transition for navigation
-	const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
-		redirectTo
-	});
+	const transition = useOnSuccessTransition({ redirectTo });
+	const { onSuccess } = transition;
 
 	// Helper functions
 	function getRedirectTo() {
@@ -391,7 +390,8 @@
 	}
 
 	// Combine isSubmitting states
-	const isSubmitting = $derived(form.state.isSubmitting || transitionPending);
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
+	const isSubmitting = $derived(formIsSubmitting.current || transition.isPending);
 
 	// Sync external isSubmitting
 	$effect(() => {

package/dist/components/auth/forms/two-factor-form.svelte

@@ -56,9 +56,8 @@
 
 	const localization = $derived({ ...contextLocalization, ...localizationProp });
 
-	const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
-		redirectTo
-	});
+	const transition = useOnSuccessTransition({ redirectTo });
+	const { onSuccess } = transition;
 
 	// Get session data to check if 2FA is being enabled
 	const sessionQuery = hooks?.useSession?.();
@@ -128,12 +127,13 @@
 		}
 	}));
 
-	const isSubmitting = $derived(isSubmittingProp || form.state.isSubmitting || transitionPending);
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
+	const isSubmitting = $derived(isSubmittingProp || formIsSubmitting.current || transition.isPending);
 
 	// Update parent isSubmitting state
 	$effect(() => {
 		if (setIsSubmitting) {
-			setIsSubmitting(form.state.isSubmitting || transitionPending);
+			setIsSubmitting(formIsSubmitting.current || transition.isPending);
 		}
 	});
 

package/dist/components/auth/magic-link-sent.svelte

@@ -5,6 +5,7 @@
 	import * as Card from '../ui/card/index.js';
 	import { Button } from '../ui/button/index.js';
 	import type { AuthLocalization } from '../../localization/auth-localization.js';
+	import Loader2 from '@lucide/svelte/icons/loader-2';
 	import MailOpen from '@lucide/svelte/icons/mail-open';
 
 	interface Props {
@@ -186,10 +187,10 @@
 				onclick={handleResendMagicLink}
 				class="w-full"
 			>
-				{#if countdown > 0}
+				{#if isResending}
+					<Loader2 class="animate-spin" />
+				{:else if countdown > 0}
 					{localization.RESEND_MAGIC_LINK} ({countdown}s)
-				{:else if isResending}
-					{localization.RESEND_MAGIC_LINK}...
 				{:else}
 					{localization.RESEND_MAGIC_LINK}
 				{/if}

package/dist/components/auth/passkey-button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Fingerprint from '@lucide/svelte/icons/fingerprint';
+	import Loader2 from '@lucide/svelte/icons/loader-2';
 	import {
 		getAuthClient,
 		getAuthUIConfig,
@@ -31,8 +32,11 @@
 
 	const { onSuccess } = useOnSuccessTransition({ redirectTo });
 
+	let isPending = $state(false);
+
 	async function signInPasskey() {
 		setIsSubmitting?.(true);
+		isPending = true;
 
 		try {
 			const response = await authClient.signIn.passkey({
@@ -48,6 +52,7 @@
 				);
 
 				setIsSubmitting?.(false);
+				isPending = false;
 			} else {
 				await onSuccess();
 			}
@@ -55,6 +60,7 @@
 			config.toast.error(getLocalizedError({ error, localization: loc }));
 
 			setIsSubmitting?.(false);
+			isPending = false;
 		}
 	}
 </script>
@@ -67,7 +73,11 @@
 	variant="secondary"
 	onclick={signInPasskey}
 >
-	<Fingerprint class={classNames?.form?.icon} />
-	{loc.SIGN_IN_WITH}
-	{loc.PASSKEY}
+	{#if isPending}
+		<Loader2 class="animate-spin" />
+	{:else}
+		<Fingerprint class={classNames?.form?.icon} />
+		{loc.SIGN_IN_WITH}
+		{loc.PASSKEY}
+	{/if}
 </Button>

package/dist/components/auth/provider-button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Loader2 from '@lucide/svelte/icons/loader-2';
 	import { Button } from '../ui/button/index.js';
 	import { getAuthClient, getAuthUIConfig } from '../../context/auth-ui-config.svelte';
 	import { cn } from '../../utils/ui.js';
@@ -37,6 +38,8 @@
 	const authClient = getAuthClient();
 	const config = getAuthUIConfig();
 
+	let isPending = $state(false);
+
 	function getRedirectTo() {
 		return redirectToProp || getSearchParam('redirectTo') || config.redirectTo;
 	}
@@ -53,6 +56,7 @@
 
 	async function doSignInSocial() {
 		setIsSubmitting(true);
+		isPending = true;
 
 		try {
 			if (other) {
@@ -94,6 +98,7 @@
 			config.toast.error(getLocalizedError({ error, localization }));
 
 			setIsSubmitting(false);
+			isPending = false;
 		}
 	}
 </script>
@@ -110,14 +115,18 @@
 	variant="outline"
 	onclick={doSignInSocial}
 >
-	{#if provider.icon}
-		<provider.icon class={classNames?.form?.icon} />
-	{/if}
+	{#if isPending}
+		<Loader2 class="animate-spin" />
+	{:else}
+		{#if provider.icon}
+			<provider.icon class={classNames?.form?.icon} />
+		{/if}
 
-	{#if socialLayout === 'grid'}
-		{provider.name}
-	{/if}
-	{#if socialLayout === 'vertical'}
-		{localization.SIGN_IN_WITH} {provider.name}
+		{#if socialLayout === 'grid'}
+			{provider.name}
+		{/if}
+		{#if socialLayout === 'vertical'}
+			{localization.SIGN_IN_WITH} {provider.name}
+		{/if}
 	{/if}
 </Button>

package/dist/components/auth/verify-email.svelte

@@ -5,6 +5,7 @@
 	import * as Card from '../ui/card/index.js';
 	import { Button } from '../ui/button/index.js';
 	import type { AuthLocalization } from '../../localization/auth-localization.js';
+	import Loader2 from '@lucide/svelte/icons/loader-2';
 	import MailOpen from '@lucide/svelte/icons/mail-open';
 	import CheckCircle from '@lucide/svelte/icons/check-circle';
 
@@ -274,7 +275,7 @@
 
 			<Button onclick={handleVerifyEmail} disabled={isVerifying} class="w-full">
 				{#if isVerifying}
-					{localization.VERIFYING || 'Verifying'}...
+					<Loader2 class="animate-spin" />
 				{:else}
 					{localization.VERIFY_EMAIL_BUTTON || 'Verify Email'}
 				{/if}
@@ -299,10 +300,10 @@
 					onclick={handleResendEmail}
 					class="w-full"
 				>
-					{#if countdown > 0}
+					{#if isResending}
+						<Loader2 class="animate-spin" />
+					{:else if countdown > 0}
 						{localization.RESEND_VERIFICATION_EMAIL} ({countdown}s)
-					{:else if isResending}
-						{localization.RESEND_VERIFICATION_EMAIL}...
 					{:else}
 						{localization.RESEND_VERIFICATION_EMAIL}
 					{/if}

package/dist/components/chart-area-interactive.svelte

@@ -214,7 +214,7 @@
 					yAxis: { format: () => '' }
 				}}
 			>
-				{#snippet marks({ series, getAreaProps })}
+				{#snippet marks({ context })}
 					<defs>
 						<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
 							<stop offset="5%" stop-color="var(--color-desktop)" stop-opacity={1.0} />
@@ -225,9 +225,9 @@
 							<stop offset="95%" stop-color="var(--color-mobile)" stop-opacity={0.1} />
 						</linearGradient>
 					</defs>
-					{#each series as s, i (s.key)}
+					{#each context.series.visibleSeries as s (s.key)}
 						<Area
-							{...getAreaProps(s, i)}
+							seriesKey={s.key}
 							fill={s.key === 'desktop' ? 'url(#fillDesktop)' : 'url(#fillMobile)'}
 						/>
 					{/each}

package/dist/components/ui/chart/chart-tooltip.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef, type WithoutChildren } from '../../../utils/ui.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from './chart-utils.js';
-	import { getTooltipContext, Tooltip as TooltipPrimitive } from 'layerchart';
+	import { getChartContext, Tooltip as TooltipPrimitive } from 'layerchart';
 	import type { Snippet } from 'svelte';
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -48,27 +48,33 @@
 	} = $props();
 
 	const chart = useChart();
-	const tooltipCtx = getTooltipContext();
+	const ctx = getChartContext();
+
+	const payload = $derived(ctx.tooltip.series.filter((s) => s.visible));
+
+	const headerLabel = $derived(
+		ctx.tooltip.data ? ctx.x(ctx.tooltip.data) : undefined
+	);
 
 	const formattedLabel = $derived.by(() => {
-		if (hideLabel || !tooltipCtx.payload?.length) return null;
+		if (hideLabel || !payload.length) return null;
 
-		const [item] = tooltipCtx.payload;
-		const key = labelKey ?? item?.label ?? item?.name ?? 'value';
+		const [item] = payload;
+		const key = labelKey ?? item?.label ?? item?.key ?? 'value';
 
 		const itemConfig = getPayloadConfigFromPayload(chart.config, item, key);
 
 		const value =
 			!labelKey && typeof label === 'string'
 				? (chart.config[label as keyof typeof chart.config]?.label ?? label)
-				: (itemConfig?.label ?? item.label);
+				: (itemConfig?.label ?? (headerLabel != null ? String(headerLabel) : undefined));
 
 		if (value === undefined) return null;
 		if (!labelFormatter) return value;
-		return labelFormatter(value, tooltipCtx.payload);
+		return labelFormatter(value, payload);
 	});
 
-	const nestLabel = $derived(tooltipCtx.payload.length === 1 && indicator !== 'dot');
+	const nestLabel = $derived(payload.length === 1 && indicator !== 'dot');
 </script>
 
 {#snippet TooltipLabel()}
@@ -95,23 +101,23 @@
 			{@render TooltipLabel()}
 		{/if}
 		<div class="grid gap-1.5">
-			{#each tooltipCtx.payload as item, i (item.key + i)}
-				{@const key = `${nameKey || item.key || item.name || 'value'}`}
+			{#each payload as item, i (item.key + i)}
+				{@const key = `${nameKey || item.key || 'value'}`}
 				{@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key)}
-				{@const indicatorColor = color || item.payload?.color || item.color}
+				{@const indicatorColor = color || item.color}
 				<div
 					class={cn(
 						'flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-muted-foreground',
 						indicator === 'dot' && 'items-center'
 					)}
 				>
-					{#if formatter && item.value !== undefined && item.name}
+					{#if formatter && item.value !== undefined && item.label}
 						{@render formatter({
 							value: item.value,
-							name: item.name,
+							name: item.label,
 							item,
 							index: i,
-							payload: tooltipCtx.payload
+							payload
 						})}
 					{:else}
 						{#if itemConfig?.icon}
@@ -138,12 +144,14 @@
 									{@render TooltipLabel()}
 								{/if}
 								<span class="text-muted-foreground">
-									{itemConfig?.label || item.name}
+									{itemConfig?.label || item.label}
 								</span>
 							</div>
 							{#if item.value !== undefined}
 								<span class="font-mono font-medium text-foreground tabular-nums">
-									{item.value.toLocaleString()}
+									{typeof item.value === 'number'
+										? item.value.toLocaleString()
+										: item.value}
 								</span>
 							{/if}
 						</div>

package/dist/components/ui/chart/chart-utils.d.ts

@@ -1,5 +1,4 @@
-import type { Tooltip } from 'layerchart';
-import { type Component, type ComponentProps, type Snippet } from 'svelte';
+import { type Component } from 'svelte';
 export declare const THEMES: {
     readonly light: "";
     readonly dark: ".dark";
@@ -16,8 +15,13 @@ export type ChartConfig = {
         theme: Record<keyof typeof THEMES, string>;
     });
 };
-export type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;
-export type TooltipPayload = ExtractSnippetParams<ComponentProps<typeof Tooltip.Root>['children']>['payload'][number];
+export type TooltipPayload = {
+    key: string;
+    label: string;
+    value: any;
+    color?: string;
+    visible: boolean;
+};
 export declare function getPayloadConfigFromPayload(config: ChartConfig, payload: TooltipPayload, key: string): ({
     label?: string;
     icon?: Component;

package/dist/components/ui/chart/chart-utils.js

@@ -4,24 +4,16 @@ export const THEMES = { light: '', dark: '.dark' };
 export function getPayloadConfigFromPayload(config, payload, key) {
     if (typeof payload !== 'object' || payload === null)
         return undefined;
-    const payloadPayload = 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null
-        ? payload.payload
-        : undefined;
     let configLabelKey = key;
     if (payload.key === key) {
         configLabelKey = payload.key;
     }
-    else if (payload.name === key) {
-        configLabelKey = payload.name;
+    else if (payload.label === key) {
+        configLabelKey = payload.label;
     }
     else if (key in payload && typeof payload[key] === 'string') {
         configLabelKey = payload[key];
     }
-    else if (payloadPayload !== undefined &&
-        key in payloadPayload &&
-        typeof payloadPayload[key] === 'string') {
-        configLabelKey = payloadPayload[key];
-    }
     return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 const chartContextKey = Symbol('chart-context');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "better-auth-ui-svelte",
-	"version": "0.12.4",
+	"version": "0.12.6",
 	"description": "Pre-built authentication UI components for Better Auth in Svelte 5",
 	"scripts": {
 		"dev": "vite dev",
@@ -55,7 +55,7 @@
 		"bits-ui": "^2.14.4",
 		"d3-scale": "^4.0.2",
 		"d3-shape": "^3.2.0",
-		"layerchart": "2.0.0-next.43",
+		"layerchart": "2.0.0-next.48",
 		"svelte": "^5.0.0",
 		"tailwindcss": "^4.0.0",
 		"zod": "^4.0.0"
@@ -100,7 +100,7 @@
 		"eslint-plugin-svelte": "^3.13.1",
 		"formsnap": "^2.0.1",
 		"globals": "^16.5.0",
-		"layerchart": "2.0.0-next.43",
+		"layerchart": "2.0.0-next.48",
 		"mode-watcher": "^1.1.0",
 		"paneforge": "^1.0.2",
 		"playwright": "^1.57.0",