better-auth-ui-svelte 0.8.3 → 0.10.0

package/README.md

@@ -226,7 +226,7 @@ For applications using the Better Auth admin plugin, create an admin interface w
 
 ```svelte
 <!-- src/routes/app/admin/[path]/+page.svelte -->
-<script lang=\"ts\">
+<script lang="\"ts\"">
 	import { AdminView } from 'better-auth-ui-svelte';
 	import type { PageProps } from './$types.js';
 
@@ -237,6 +237,7 @@ For applications using the Better Auth admin plugin, create an admin interface w
 ```
 
 This creates admin routes at:
+
 - `/app/admin/dashboard` - Overview with stats and charts
 - `/app/admin/users` - User management table
 - `/app/admin/organizations` - Organization management table

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

@@ -13,7 +13,6 @@
 		Users,
 		Building2,
 		ShieldBan,
-		UserPlus,
 		TrendingUp,
 		TrendingDown,
 		ArrowRight
@@ -174,7 +173,7 @@
 			});
 
 			if (usersResponse.data) {
-				const users = usersResponse.data.users as any[];
+				const users = usersResponse.data.users as Record<string, unknown>[];
 				const total = usersResponse.data.total ?? users.length;
 
 				// Calculate date ranges
@@ -184,20 +183,20 @@
 				const ninetyDaysAgo = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000);
 
 				// Count new users in different periods
-				const newUsers30d = users.filter((u: any) => {
+				const newUsers30d = users.filter((u: Record<string, unknown>) => {
 					if (!u.createdAt) return false;
-					const created = new Date(u.createdAt);
+					const created = new Date(u.createdAt as string | number);
 					return created >= thirtyDaysAgo;
 				}).length;
 
-				const newUsersPrevious30d = users.filter((u: any) => {
+				const newUsersPrevious30d = users.filter((u: Record<string, unknown>) => {
 					if (!u.createdAt) return false;
-					const created = new Date(u.createdAt);
+					const created = new Date(u.createdAt as string | number);
 					return created >= sixtyDaysAgo && created < thirtyDaysAgo;
 				}).length;
 
 				// Count banned users
-				const bannedCount = users.filter((u: any) => u.banned).length;
+				const bannedCount = users.filter((u: Record<string, unknown>) => u.banned).length;
 
 				// Calculate growth percentages
 				const newUsersGrowth =
@@ -220,9 +219,9 @@
 				}
 
 				// Count users by creation date
-				users.forEach((user: any) => {
+				users.forEach((user: Record<string, unknown>) => {
 					if (user.createdAt) {
-						const createdDate = new Date(user.createdAt);
+						const createdDate = new Date(user.createdAt as string | number);
 						if (createdDate >= ninetyDaysAgo) {
 							const dateStr = createdDate.toISOString().split('T')[0];
 							dailyCounts.set(dateStr, (dailyCounts.get(dateStr) ?? 0) + 1);
@@ -445,111 +444,109 @@
 			{#if customChart}
 				{@render customChart()}
 			{:else}
-
-					<Card.Root class="@container/card">
-						<Card.Header>
-							<Card.Title>User Growth</Card.Title>
-							<Card.Description>
-								<span class="hidden @[540px]/card:block"> New user registrations over time </span>
-								<span class="@[540px]/card:hidden">New registrations</span>
-							</Card.Description>
-							<Card.Action>
-								<ToggleGroup.Root
-									type="single"
-									bind:value={timeRange}
-									variant="outline"
-									class="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
+				<Card.Root class="@container/card">
+					<Card.Header>
+						<Card.Title>User Growth</Card.Title>
+						<Card.Description>
+							<span class="hidden @[540px]/card:block"> New user registrations over time </span>
+							<span class="@[540px]/card:hidden">New registrations</span>
+						</Card.Description>
+						<Card.Action>
+							<ToggleGroup.Root
+								type="single"
+								bind:value={timeRange}
+								variant="outline"
+								class="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
+							>
+								<ToggleGroup.Item value="90d">Last 3 months</ToggleGroup.Item>
+								<ToggleGroup.Item value="30d">Last 30 days</ToggleGroup.Item>
+								<ToggleGroup.Item value="7d">Last 7 days</ToggleGroup.Item>
+							</ToggleGroup.Root>
+							<Select.Root type="single" bind:value={timeRange}>
+								<Select.Trigger
+									size="sm"
+									class="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
+									aria-label="Select a value"
 								>
-									<ToggleGroup.Item value="90d">Last 3 months</ToggleGroup.Item>
-									<ToggleGroup.Item value="30d">Last 30 days</ToggleGroup.Item>
-									<ToggleGroup.Item value="7d">Last 7 days</ToggleGroup.Item>
-								</ToggleGroup.Root>
-								<Select.Root type="single" bind:value={timeRange}>
-									<Select.Trigger
-										size="sm"
-										class="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
-										aria-label="Select a value"
-									>
-										<span data-slot="select-value">
-											{selectedLabel}
-										</span>
-									</Select.Trigger>
-									<Select.Content class="rounded-xl">
-										<Select.Item value="90d" class="rounded-lg">Last 3 months</Select.Item>
-										<Select.Item value="30d" class="rounded-lg">Last 30 days</Select.Item>
-										<Select.Item value="7d" class="rounded-lg">Last 7 days</Select.Item>
-									</Select.Content>
-								</Select.Root>
-							</Card.Action>
-						</Card.Header>
-						<Card.Content class="px-2 pt-4 sm:px-6 sm:pt-6">
-							{#if isLoading}
-								<Skeleton class="h-[250px] w-full" />
-							{:else if hasUserGrowthData}
-								<Chart.Container config={chartConfig} class="aspect-auto h-[250px] w-full">
-									<AreaChart
-										data={filteredChartData}
-										x="date"
-										xScale={scaleUtc()}
-										series={[
-											{
-												key: 'users',
-												label: 'New Users',
-												color: chartConfig.users.color
+									<span data-slot="select-value">
+										{selectedLabel}
+									</span>
+								</Select.Trigger>
+								<Select.Content class="rounded-xl">
+									<Select.Item value="90d" class="rounded-lg">Last 3 months</Select.Item>
+									<Select.Item value="30d" class="rounded-lg">Last 30 days</Select.Item>
+									<Select.Item value="7d" class="rounded-lg">Last 7 days</Select.Item>
+								</Select.Content>
+							</Select.Root>
+						</Card.Action>
+					</Card.Header>
+					<Card.Content class="px-2 pt-4 sm:px-6 sm:pt-6">
+						{#if isLoading}
+							<Skeleton class="h-[250px] w-full" />
+						{:else if hasUserGrowthData}
+							<Chart.Container config={chartConfig} class="aspect-auto h-[250px] w-full">
+								<AreaChart
+									data={filteredChartData}
+									x="date"
+									xScale={scaleUtc()}
+									series={[
+										{
+											key: 'users',
+											label: 'New Users',
+											color: chartConfig.users.color
+										}
+									]}
+									axis="x"
+									props={{
+										area: {
+											curve: curveNatural,
+											'fill-opacity': 0.4,
+											line: { class: 'stroke-1' },
+											motion: 'tween'
+										},
+										xAxis: {
+											ticks: timeRange === '7d' ? 7 : undefined,
+											format: (v) => {
+												return v.toLocaleDateString('en-US', {
+													month: 'short',
+													day: 'numeric'
+												});
 											}
-										]}
-										axis="x"
-										props={{
-											area: {
-												curve: curveNatural,
-												'fill-opacity': 0.4,
-												line: { class: 'stroke-1' },
-												motion: 'tween'
-											},
-											xAxis: {
-												ticks: timeRange === '7d' ? 7 : undefined,
-												format: (v) => {
-													return v.toLocaleDateString('en-US', {
-														month: 'short',
-														day: 'numeric'
-													});
-												}
-											},
-											yAxis: { format: () => '' }
-										}}
-									>
-										{#snippet marks({ series, getAreaProps })}
-											<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}
-										{/snippet}
-										{#snippet tooltip()}
-											<Chart.Tooltip
-												labelFormatter={(v: Date) => {
-													return v.toLocaleDateString('en-US', {
-														month: 'short',
-														day: 'numeric'
-													});
-												}}
-												indicator="line"
-											/>
-										{/snippet}
-									</AreaChart>
-								</Chart.Container>
-							{:else}
-								<div class="flex h-[250px] items-center justify-center">
-									<p class="text-muted-foreground">No data available</p>
-								</div>
-							{/if}
-						</Card.Content>
-					</Card.Root>
-
+										},
+										yAxis: { format: () => '' }
+									}}
+								>
+									{#snippet marks({ series, getAreaProps })}
+										<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}
+									{/snippet}
+									{#snippet tooltip()}
+										<Chart.Tooltip
+											labelFormatter={(v: Date) => {
+												return v.toLocaleDateString('en-US', {
+													month: 'short',
+													day: 'numeric'
+												});
+											}}
+											indicator="line"
+										/>
+									{/snippet}
+								</AreaChart>
+							</Chart.Container>
+						{:else}
+							<div class="flex h-[250px] items-center justify-center">
+								<p class="text-muted-foreground">No data available</p>
+							</div>
+						{/if}
+					</Card.Content>
+				</Card.Root>
 			{/if}
 		{/if}
 
@@ -560,76 +557,74 @@
 
 		<!-- Tables with Tabs -->
 		{#if showUsersTable || showOrgsTable}
-
-				<Tabs.Root value="users">
-					<Tabs.List class="grid w-full max-w-md grid-cols-2">
-						{#if showUsersTable}
-							<Tabs.Trigger value="users">Users</Tabs.Trigger>
-						{/if}
-						{#if showOrgsTable}
-							<Tabs.Trigger value="organizations">Organizations</Tabs.Trigger>
-						{/if}
-					</Tabs.List>
-
+			<Tabs.Root value="users">
+				<Tabs.List class="grid w-full max-w-md grid-cols-2">
 					{#if showUsersTable}
-						<Tabs.Content value="users" class="mt-6">
-							<!-- Before Users Table Extension Point -->
-							{#if beforeUsersTable}
-								{@render beforeUsersTable()}
-							{/if}
-
-							<UsersAdminTable initialPageSize={usersTableLimit} {...usersTableProps} />
-
-							<!-- View All Button -->
-							{#if showViewAllActions}
-								{@const LinkComponent = Link}
-								<div class="mt-4 flex justify-center">
-									<LinkComponent href={usersViewAllHref}>
-										<Button variant="outline">
-											View All Users
-											<ArrowRight class="ml-2 size-4" />
-										</Button>
-									</LinkComponent>
-								</div>
-							{/if}
-
-							<!-- After Users Table Extension Point -->
-							{#if afterUsersTable}
-								{@render afterUsersTable()}
-							{/if}
-						</Tabs.Content>
+						<Tabs.Trigger value="users">Users</Tabs.Trigger>
 					{/if}
-
 					{#if showOrgsTable}
-						<Tabs.Content value="organizations" class="mt-6">
-							<!-- Before Orgs Table Extension Point -->
-							{#if beforeOrgsTable}
-								{@render beforeOrgsTable()}
-							{/if}
+						<Tabs.Trigger value="organizations">Organizations</Tabs.Trigger>
+					{/if}
+				</Tabs.List>
 
-							<OrganizationsAdminTable initialPageSize={orgsTableLimit} {...orgsTableProps} />
-
-							<!-- View All Button -->
-							{#if showViewAllActions}
-								{@const LinkComponent = Link}
-								<div class="mt-4 flex justify-center">
-									<LinkComponent href={orgsViewAllHref}>
-										<Button variant="outline">
-											View All Organizations
-											<ArrowRight class="ml-2 size-4" />
-										</Button>
-									</LinkComponent>
-								</div>
-							{/if}
+				{#if showUsersTable}
+					<Tabs.Content value="users" class="mt-6">
+						<!-- Before Users Table Extension Point -->
+						{#if beforeUsersTable}
+							{@render beforeUsersTable()}
+						{/if}
 
-							<!-- After Orgs Table Extension Point -->
-							{#if afterOrgsTable}
-								{@render afterOrgsTable()}
-							{/if}
-						</Tabs.Content>
-					{/if}
-				</Tabs.Root>
+						<UsersAdminTable initialPageSize={usersTableLimit} {...usersTableProps} />
+
+						<!-- View All Button -->
+						{#if showViewAllActions}
+							{@const LinkComponent = Link}
+							<div class="mt-4 flex justify-center">
+								<LinkComponent href={usersViewAllHref}>
+									<Button variant="outline">
+										View All Users
+										<ArrowRight class="ml-2 size-4" />
+									</Button>
+								</LinkComponent>
+							</div>
+						{/if}
+
+						<!-- After Users Table Extension Point -->
+						{#if afterUsersTable}
+							{@render afterUsersTable()}
+						{/if}
+					</Tabs.Content>
+				{/if}
+
+				{#if showOrgsTable}
+					<Tabs.Content value="organizations" class="mt-6">
+						<!-- Before Orgs Table Extension Point -->
+						{#if beforeOrgsTable}
+							{@render beforeOrgsTable()}
+						{/if}
 
+						<OrganizationsAdminTable initialPageSize={orgsTableLimit} {...orgsTableProps} />
+
+						<!-- View All Button -->
+						{#if showViewAllActions}
+							{@const LinkComponent = Link}
+							<div class="mt-4 flex justify-center">
+								<LinkComponent href={orgsViewAllHref}>
+									<Button variant="outline">
+										View All Organizations
+										<ArrowRight class="ml-2 size-4" />
+									</Button>
+								</LinkComponent>
+							</div>
+						{/if}
+
+						<!-- After Orgs Table Extension Point -->
+						{#if afterOrgsTable}
+							{@render afterOrgsTable()}
+						{/if}
+					</Tabs.Content>
+				{/if}
+			</Tabs.Root>
 		{/if}
 
 		<!-- Children Extension Point -->

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

@@ -1,7 +1,5 @@
 <script lang="ts" module>
-	import type { AdminViewProps } from '../../types/admin.js';
-
-	export type { AdminViewProps };
+	export type { AdminViewProps } from '../../types/admin.js';
 </script>
 
 <script lang="ts">
@@ -13,6 +11,7 @@
 	import UsersAdminTable from './users-admin-table.svelte';
 	import OrganizationsAdminTable from './organizations-admin-table.svelte';
 	import { adminViewPaths } from '../../utils/view-paths.js';
+	import type { AdminViewProps } from '../../types/admin.js';
 
 	type Props = AdminViewProps;
 
@@ -37,20 +36,22 @@
 
 	const path = $derived(pathProp ?? pathname?.split('/').pop());
 
-	const view = $derived(
-		viewProp || getViewByPath(adminViewPaths, path!) || 'DASHBOARD'
-	);
+	const view = $derived(viewProp || getViewByPath(adminViewPaths, path!) || 'DASHBOARD');
 
 	// Use adminBasePath from config, default to '/admin'
 	const basePath = $derived(adminBasePath ?? '/admin');
 
 	const navItems = $derived([
-		{ view: 'DASHBOARD', label: localization.DASHBOARD || 'Dashboard', value: 'dashboard' },
-		{ view: 'USERS', label: localization.USERS || 'Users', value: 'users' },
-		{ view: 'ORGANIZATIONS', label: localization.ORGANIZATIONS || 'Organizations', value: 'organizations' }
+		{ view: 'DASHBOARD', label: (localization as Record<string, string>).DASHBOARD || 'Dashboard', value: 'dashboard' },
+		{ view: 'USERS', label: (localization as Record<string, string>).USERS || 'Users', value: 'users' },
+		{
+			view: 'ORGANIZATIONS',
+			label: localization.ORGANIZATIONS || 'Organizations',
+			value: 'organizations'
+		}
 	] as const);
 
-	const currentTabValue = $derived(adminViewPaths[view] || 'dashboard');
+	const currentTabValue = $derived(adminViewPaths[view as keyof typeof adminViewPaths] || 'dashboard');
 </script>
 
 <div class={cn('flex w-full grow flex-col gap-4', className, classNames?.base)}>
@@ -77,7 +78,11 @@
 		{:else if view === 'USERS'}
 			<UsersAdminTable syncWithUrl={true} />
 		{:else if view === 'ORGANIZATIONS'}
-			<OrganizationsAdminTable syncWithUrl={true} customActions={organizationCustomActions} {fetchOrganizations} />
+			<OrganizationsAdminTable
+				syncWithUrl={true}
+				customActions={organizationCustomActions}
+				{fetchOrganizations}
+			/>
 		{/if}
 	</div>
 </div>

package/dist/components/admin/admin-view.svelte.d.ts

@@ -1,5 +1,5 @@
+export type { AdminViewProps } from '../../types/admin.js';
 import type { AdminViewProps } from '../../types/admin.js';
-export type { AdminViewProps };
 declare const AdminView: import("svelte").Component<AdminViewProps, {}, "">;
 type AdminView = ReturnType<typeof AdminView>;
 export default AdminView;

package/dist/components/admin/ban-user-dialog.svelte

@@ -90,7 +90,7 @@
 							bind:checked={isPermanent}
 							class="h-4 w-4 rounded border-gray-300"
 						/>
-						<Label for="permanent" class="font-normal cursor-pointer">Permanent ban</Label>
+						<Label for="permanent" class="cursor-pointer font-normal">Permanent ban</Label>
 					</div>
 				</div>
 

package/dist/components/admin/bulk-delete-dialog.svelte

@@ -42,7 +42,8 @@
 		<Dialog.Header>
 			<Dialog.Title class="flex items-center gap-2">
 				<Trash2 class="h-5 w-5" />
-				Delete {itemCount} {itemCount === 1 ? itemLabel : itemLabelPlural}
+				Delete {itemCount}
+				{itemCount === 1 ? itemLabel : itemLabelPlural}
 			</Dialog.Title>
 			<Dialog.Description>
 				This action cannot be undone. This will permanently delete the selected {itemCount === 1
@@ -67,9 +68,9 @@
 					<div class="text-sm font-medium">
 						{itemCount === 1 ? itemLabel : itemLabelPlural} to delete:
 					</div>
-					<div class="rounded-md border p-3 max-h-[200px] overflow-y-auto">
+					<div class="max-h-[200px] overflow-y-auto rounded-md border p-3">
 						<ul class="space-y-1 text-sm">
-							{#each items as item}
+							{#each items as item (item.name)}
 								<li class="py-1">• {item.name}</li>
 							{/each}
 						</ul>

package/dist/components/admin/create-user-dialog.svelte

@@ -21,7 +21,7 @@
 			password: string,
 			name: string,
 			role?: string,
-			data?: Record<string, any>
+			data?: Record<string, unknown>
 		) => void | Promise<void>;
 		onCancel: () => void;
 	} = $props();
@@ -68,7 +68,7 @@
 		if (customData.trim()) {
 			try {
 				JSON.parse(customData);
-			} catch (e) {
+			} catch {
 				newErrors.customData = 'Invalid JSON format';
 			}
 		}
@@ -82,11 +82,11 @@
 
 		isLoading = true;
 		try {
-			let parsedData: Record<string, any> | undefined;
+			let parsedData: Record<string, unknown> | undefined;
 			if (customData.trim()) {
 				try {
 					parsedData = JSON.parse(customData);
-				} catch (e) {
+				} catch {
 					// Already validated, this shouldn't happen
 				}
 			}

package/dist/components/admin/create-user-dialog.svelte.d.ts

@@ -1,7 +1,7 @@
 type $$ComponentProps = {
     open: boolean;
     roles: string[];
-    onCreate: (email: string, password: string, name: string, role?: string, data?: Record<string, any>) => void | Promise<void>;
+    onCreate: (email: string, password: string, name: string, role?: string, data?: Record<string, unknown>) => void | Promise<void>;
     onCancel: () => void;
 };
 declare const CreateUserDialog: import("svelte").Component<$$ComponentProps, {}, "open">;

package/dist/components/admin/delete-organization-dialog.svelte

@@ -55,14 +55,14 @@
 
 				<div class="grid gap-2">
 					<div class="text-sm font-medium">Organization to Delete</div>
-					<div class="rounded-md border p-3 space-y-2">
+					<div class="space-y-2 rounded-md border p-3">
 						<div class="flex justify-between">
 							<span class="text-sm text-muted-foreground">Name:</span>
 							<span class="text-sm font-medium">{organization.name}</span>
 						</div>
 						<div class="flex justify-between">
 							<span class="text-sm text-muted-foreground">Slug:</span>
-							<span class="text-sm font-medium font-mono">{organization.slug}</span>
+							<span class="font-mono text-sm font-medium">{organization.slug}</span>
 						</div>
 					</div>
 				</div>

package/dist/components/admin/delete-user-dialog.svelte

@@ -55,7 +55,7 @@
 
 				<div class="grid gap-2">
 					<div class="text-sm font-medium">User to Delete</div>
-					<div class="rounded-md border p-3 space-y-2">
+					<div class="space-y-2 rounded-md border p-3">
 						<div class="flex justify-between">
 							<span class="text-sm text-muted-foreground">Email:</span>
 							<span class="text-sm font-medium">{user.email}</span>

package/dist/components/admin/impersonate-user-dialog.svelte

@@ -55,7 +55,7 @@
 
 				<div class="grid gap-2">
 					<div class="text-sm font-medium">User Details</div>
-					<div class="rounded-md border p-3 space-y-2">
+					<div class="space-y-2 rounded-md border p-3">
 						<div class="flex justify-between">
 							<span class="text-sm text-muted-foreground">Email:</span>
 							<span class="text-sm font-medium">{user.email}</span>

package/dist/components/admin/organization-members-detail.svelte

@@ -20,7 +20,7 @@
 	import RemoveMemberDialog from './remove-member-dialog.svelte';
 
 	let {
-		organizationId,
+		organizationId, // eslint-disable-line @typescript-eslint/no-unused-vars
 		organizationName,
 		open = $bindable(false),
 		onOpenChange,
@@ -188,7 +188,7 @@
 									</Table.Cell>
 									<Table.Cell>
 										<DropdownMenu.Root>
-											<DropdownMenu.Trigger asChild>
+											<DropdownMenu.Trigger>
 												{#snippet child({ props })}
 													<Button {...props} variant="ghost" size="icon" class="h-8 w-8 p-0">
 														<span class="sr-only">Open menu</span>
@@ -267,7 +267,7 @@
 									<div>
 										<div class="font-medium">{invitation.email}</div>
 										<div class="text-xs text-muted-foreground">
-											Role: {invitation.role} • Expires:{' '}
+											Role: {invitation.role} • Expires:
 											{(() => {
 												if (!invitation.expiresAt) return 'N/A';
 												const date =