better-auth-ui-svelte 0.1.2 → 0.2.3

package/README.md

@@ -8,11 +8,11 @@
 
 Pre-built, customizable authentication UI components for [Better Auth](https://www.better-auth.com) in Svelte 5.
 
-This is a Svelte 5 port of the [Better Auth UI React library](https://github.com/daveyplate/better-auth-ui). The API is nearly identical to the original React library, making it easy to follow the [official documentation](https://better-auth-ui.com). All credits for the original design and architecture go to [daveycodez](https://github.com/daveycodez).
+This is a **complete Svelte 5 port** of the [Better Auth UI React library](https://github.com/daveyplate/better-auth-ui) with **full feature parity**. The API is nearly identical to the original React library, making it easy to follow the [official documentation](https://better-auth-ui.com). All credits for the original design and architecture go to [daveycodez](https://github.com/daveycodez).
 
-## Warning
+## ⚠️ Early Stage Warning
 
-This library is currently in **active development** and not yet on NPM. Breaking changes may occur.
+> **Important:** This library is in early stage development. While we have achieved full feature parity with the React version and all components have been ported, the library has not been battle-tested in production environments yet. Issues may arise. **Use at your own risk until we reach v1.0 stable.**
 
 ## Why Choose Better Auth UI?
 
@@ -22,6 +22,7 @@ This library is currently in **active development** and not yet on NPM. Breaking
 
 ## Key Features
 
+- ✨ **Full Feature Parity** - Complete port of all React components and functionality
 - 🚀 **Svelte 5 Runes** - Built with the latest Svelte 5 reactive primitives
 - 🔐 **Better Auth Integration** - Native integration with Better Auth's Svelte client
 - 🛣️ **Path Helpers** - Server & client-side path utilities (unique to Svelte port)
@@ -33,7 +34,9 @@ This library is currently in **active development** and not yet on NPM. Breaking
 
 ## Installation
 
-Install the package using your preferred package manager:
+> **Note:** The package is not yet published to NPM. For now, you can clone the repository and link it locally.
+
+Once published, install the package using your preferred package manager:
 
 ```bash
 pnpm install better-auth-ui-svelte better-auth zod svelte-sonner
@@ -233,10 +236,46 @@ Display a user button with avatar and dropdown menu:
 - **`<SignedIn />`** - Renders children only when authenticated
 - **`<SignedOut />`** - Renders children only when not authenticated
 
-### Other Components
+### Settings Components
+
+#### Account Settings
+
+- **`<AccountSettingsCards />`** - Complete account settings UI
+- **`<AccountsCard />`** - Manage connected accounts
+- **`<UpdateAvatarCard />`** - Avatar upload and management
+- **`<UpdateNameCard />`** - Update user name
+- **`<UpdateUsernameCard />`** - Update username
+- **`<UpdateFieldCard />`** - Generic field update card
+- **`<DeleteAccountCard />`** - Account deletion with confirmation
+
+#### Security Settings
+
+- **`<SecuritySettingsCards />`** - Complete security settings UI
+- **`<ChangeEmailCard />`** - Email change with verification
+- **`<ChangePasswordCard />`** - Password change with validation
+- **`<SessionsCard />`** - Active sessions management
+- **`<PasskeysCard />`** - Passkey authentication management
+- **`<TwoFactorCard />`** - Two-factor authentication setup
+- **`<ApiKeysCard />`** - API key management
+
+### Organization Components
+
+- **`<OrganizationSwitcher />`** - Switch between organizations
+- **`<CreateOrganizationDialog />`** - Create new organization
+- **`<OrganizationView />`** - Organization details view
+- **`<OrganizationSettingsCards />`** - Organization settings
+- **`<OrganizationMembersCard />`** - Member management
+- **`<OrganizationInvitationsCard />`** - Invitation management
+- **`<UserInvitationsCard />`** - User's received invitations
+
+### Utility Components
 
 - **`<AuthCallback />`** - OAuth callback handler
 - **`<SignOut />`** - Sign out component
+- **`<RedirectToSignIn />`** - Redirect unauthenticated users to sign in
+- **`<RedirectToSignUp />`** - Redirect users to sign up
+- **`<PasswordInput />`** - Password input with visibility toggle
+- **`<FormError />`** - Form error display component
 
 ## Customization
 
@@ -579,7 +618,7 @@ Better Auth UI for Svelte is built with:
 
 ## Differences from React Version
 
-While the API is nearly identical, there are some Svelte-specific differences:
+This Svelte port maintains **full feature parity** with the React version. The API is nearly identical, with these framework-specific differences:
 
 1. **Path Helpers**: Unique to this Svelte port - utility functions for generating auth paths that work client and server-side (see [Path Helpers](#path-helpers-svelte-specific-feature))
 2. **Navigation**: Instead of Next.js router, use SvelteKit's `goto` function
@@ -587,6 +626,7 @@ While the API is nearly identical, there are some Svelte-specific differences:
 4. **Dynamic Routes**: Use SvelteKit's `[path]` syntax instead of Next.js `[path]`
 5. **Reactivity**: Built with Svelte 5 runes instead of React hooks
 6. **Link Component**: SvelteKit doesn't need a custom Link component
+7. **Form Handling**: Uses TanStack Svelte Form instead of React Hook Form (same API)
 
 ## Contributing
 
@@ -599,7 +639,7 @@ MIT
 ## Credits
 
 - Original React version by [daveycodez](https://github.com/daveyplate/better-auth-ui)
-- Svelte 5 port by Chris Jayden [multiplehats](https://github.com/multiplehats)
+- Complete Svelte 5 port with full feature parity by Chris Jayden [multiplehats](https://github.com/multiplehats)
 - Built with [Better Auth](https://www.better-auth.com)
 - UI components from [shadcn-svelte](https://www.shadcn-svelte.com)
 

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

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-	import type { Snippet } from 'svelte';
 	import type { AuthLocalization } from '../../types/index.js';
 	import type { AccountViewPath } from '../../utils/view-paths.js';
 	import type { SettingsCardClassNames } from '../settings/shared/settings-card.svelte';
@@ -26,10 +25,8 @@
 	import { cn, getViewByPath } from '../../utils/utils.js';
 	import { useAuthenticate } from '../../hooks/use-authenticate.svelte.js';
 	import { AccountSettingsCards } from '../settings/account/index.js';
-	// TODO: Import SecuritySettingsCards when security directory is ported
 	import SecuritySettingsCards from '../settings/security-settings-cards.svelte';
-	// TODO: Import ApiKeysCard when api-key directory is ported
-	// import ApiKeysCard from '../settings/api-key/api-keys-card.svelte';
+	import ApiKeysCard from '../settings/api-key/api-keys-card.svelte';
 	import OrganizationsCard from '../organization/organizations-card.svelte';
 	import UserInvitationsCard from '../organization/user-invitations-card.svelte';
 	import { Button } from '../ui/button/index.js';
@@ -183,9 +180,7 @@
 		{:else if view === 'SECURITY'}
 			<SecuritySettingsCards {classNames} {localization} />
 		{:else if view === 'API_KEYS'}
-			<!-- TODO: Uncomment when ApiKeysCard is ported -->
-			<div class="text-muted-foreground">API Keys coming soon (ApiKeysCard not yet ported)</div>
-			<!-- <ApiKeysCard classNames={classNames?.card} localization={localization} /> -->
+			<ApiKeysCard classNames={classNames?.card} {localization} /> -->
 		{:else if view === 'ORGANIZATIONS' && organization}
 			<div class="grid w-full gap-4 md:gap-6">
 				<OrganizationsCard classNames={classNames?.card} {localization} />

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

@@ -19,6 +19,7 @@
 	import SignOut from './sign-out.svelte';
 	import type { AuthViewPath } from '../../utils/view-paths.js';
 	import type { AuthLocalization } from '../../localization/auth-localization.js';
+	import AcceptInvitationCard from '../organization/accept-invitation-card.svelte';
 
 	export interface AuthViewClassNames {
 		base?: string;
@@ -128,8 +129,7 @@
 {:else if view === 'SIGN_OUT'}
 	<SignOut />
 {:else if view === 'ACCEPT_INVITATION'}
-	<!-- TODO: Import and render AcceptInvitationCard when it's created -->
-	<div>Accept Invitation (not yet implemented)</div>
+	<AcceptInvitationCard {localization} />
 {:else}
 	<!-- Main card layout for all other views -->
 	<Card.Root class={cn('w-full max-w-sm', className, classNames?.base)}>

package/dist/components/form-error.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import AlertCircle from '@lucide/svelte/icons/alert-circle';
+	import { cn } from '../utils/utils.js';
+	import type { AuthFormClassNames } from './auth/auth-form.svelte';
+	import Alert from './ui/alert/alert.svelte';
+	import AlertTitle from './ui/alert/alert-title.svelte';
+	import AlertDescription from './ui/alert/alert-description.svelte';
+
+	export interface FormErrorProps {
+		/**
+		 * Optional form instance from @tanstack/svelte-form
+		 * Used to access form-level errors from form state
+		 */
+		form?: {
+			state: {
+				errorMap?: Record<string, unknown>;
+			};
+		};
+		/**
+		 * Optional error message to display directly
+		 * If provided, this takes precedence over form errors
+		 */
+		message?: string | null;
+		/**
+		 * Optional title for the error alert
+		 * @default "Error"
+		 */
+		title?: string;
+		/**
+		 * Optional class names for styling
+		 */
+		classNames?: AuthFormClassNames;
+	}
+
+	let { form, message, title, classNames }: FormErrorProps = $props();
+
+	// Determine error message from props or form state
+	// Priority: message prop > form.state.errorMap
+	const errorMessage = $derived(
+		message ||
+			(form?.state.errorMap?.onSubmit
+				? String(form.state.errorMap.onSubmit)
+				: form?.state.errorMap?.root
+					? String(form.state.errorMap.root)
+					: null)
+	);
+</script>
+
+{#if errorMessage}
+	<Alert variant="destructive" class={cn(classNames?.error)}>
+		<AlertCircle class="self-center" />
+		<AlertTitle>{title || 'Error'}</AlertTitle>
+		<AlertDescription>{errorMessage}</AlertDescription>
+	</Alert>
+{/if}

package/dist/components/form-error.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { AuthFormClassNames } from './auth/auth-form.svelte';
+export interface FormErrorProps {
+    /**
+     * Optional form instance from @tanstack/svelte-form
+     * Used to access form-level errors from form state
+     */
+    form?: {
+        state: {
+            errorMap?: Record<string, unknown>;
+        };
+    };
+    /**
+     * Optional error message to display directly
+     * If provided, this takes precedence over form errors
+     */
+    message?: string | null;
+    /**
+     * Optional title for the error alert
+     * @default "Error"
+     */
+    title?: string;
+    /**
+     * Optional class names for styling
+     */
+    classNames?: AuthFormClassNames;
+}
+declare const FormError: import("svelte").Component<FormErrorProps, {}, "">;
+type FormError = ReturnType<typeof FormError>;
+export default FormError;

package/dist/components/redirect-to-sign-in.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { useAuthenticate } from '../hooks/use-authenticate.svelte.js';
+
+	/**
+	 * Redirects the user to the sign-in page
+	 *
+	 * Renders nothing and automatically redirects the current user to the authentication
+	 * sign-in page. Useful for protecting routes that require authentication or
+	 * redirecting users to sign in from various parts of the application.
+	 */
+	useAuthenticate({ authView: 'SIGN_IN' });
+</script>

package/dist/components/redirect-to-sign-in.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RedirectToSignIn: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RedirectToSignIn = InstanceType<typeof RedirectToSignIn>;
+export default RedirectToSignIn;

package/dist/components/redirect-to-sign-up.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { useAuthenticate } from '../hooks/use-authenticate.svelte.js';
+
+	/**
+	 * Redirects the user to the sign-up page
+	 *
+	 * Renders nothing and automatically redirects the current user to the authentication
+	 * sign-up page. Useful for directing new users to create an account or
+	 * for redirecting from marketing pages to the registration flow.
+	 */
+	useAuthenticate({ authView: 'SIGN_UP' });
+</script>

package/dist/components/redirect-to-sign-up.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RedirectToSignUp: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RedirectToSignUp = InstanceType<typeof RedirectToSignUp>;
+export default RedirectToSignUp;

package/dist/components/settings/api-key/api-key-cell.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import KeyRound from '@lucide/svelte/icons/key-round';
+	import { getAuthUIConfig } from '../../../context/auth-ui-config.svelte.js';
+	import { cn } from '../../../utils/utils.js';
+	import type { AuthLocalization, ApiKey, Refetch } from '../../../types/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { Card } from '../../ui/card/index.js';
+	import type { SettingsCardClassNames } from '../shared/settings-card.svelte';
+	import ApiKeyDeleteDialog from './api-key-delete-dialog.svelte';
+	import { useLang } from '../../../hooks/use-lang.svelte.js';
+
+	export interface ApiKeyCellProps {
+		className?: string;
+		classNames?: SettingsCardClassNames;
+		apiKey: ApiKey;
+		localization?: Partial<AuthLocalization>;
+		refetch?: Refetch;
+	}
+
+	interface Props extends ApiKeyCellProps {}
+
+	let {
+		className,
+		classNames,
+		apiKey,
+		localization: propLocalization,
+		refetch
+	}: Props = $props();
+
+	const { localization: contextLocalization } = getAuthUIConfig();
+
+	const mergedLocalization = $derived({ ...contextLocalization, ...propLocalization });
+
+	const { lang } = useLang();
+
+	let showDeleteDialog = $state(false);
+
+	// Format expiration date or show "Never expires"
+	const formatExpiration = () => {
+		if (!apiKey.expiresAt) return mergedLocalization.NEVER_EXPIRES;
+
+		const expiresDate = new Date(apiKey.expiresAt);
+		return `${mergedLocalization.EXPIRES} ${expiresDate.toLocaleDateString(
+			lang ?? 'en',
+			{
+				month: 'short',
+				day: 'numeric',
+				year: 'numeric'
+			}
+		)}`;
+	};
+</script>
+
+<Card class={cn('flex-row items-center gap-3 truncate px-4 py-3', className, classNames?.cell)}>
+	<KeyRound class={cn('size-4 flex-shrink-0', classNames?.icon)} />
+
+	<div class="flex flex-col truncate">
+		<div class="flex items-center gap-2">
+			<span class="truncate font-semibold text-sm">
+				{apiKey.name}
+			</span>
+
+			<span class="flex-1 truncate text-muted-foreground text-sm">
+				{apiKey.start}{'******'}
+			</span>
+		</div>
+
+		<div class="truncate text-muted-foreground text-xs">
+			{formatExpiration()}
+		</div>
+	</div>
+
+	<Button
+		class={cn('relative ms-auto', classNames?.button, classNames?.outlineButton)}
+		size="sm"
+		variant="outline"
+		onclick={() => (showDeleteDialog = true)}
+	>
+		{mergedLocalization.DELETE}
+	</Button>
+</Card>
+
+<ApiKeyDeleteDialog
+	{classNames}
+	{apiKey}
+	localization={mergedLocalization}
+	open={showDeleteDialog}
+	onOpenChange={(open) => (showDeleteDialog = open)}
+	{refetch}
+/>

package/dist/components/settings/api-key/api-key-cell.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { AuthLocalization, ApiKey, Refetch } from '../../../types/index.js';
+import type { SettingsCardClassNames } from '../shared/settings-card.svelte';
+export interface ApiKeyCellProps {
+    className?: string;
+    classNames?: SettingsCardClassNames;
+    apiKey: ApiKey;
+    localization?: Partial<AuthLocalization>;
+    refetch?: Refetch;
+}
+interface Props extends ApiKeyCellProps {
+}
+declare const ApiKeyCell: import("svelte").Component<Props, {}, "">;
+type ApiKeyCell = ReturnType<typeof ApiKeyCell>;
+export default ApiKeyCell;

package/dist/components/settings/api-key/api-key-delete-dialog.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import KeyRound from '@lucide/svelte/icons/key-round';
+	import Loader2 from '@lucide/svelte/icons/loader-2';
+	import { getAuthUIConfig, getLocalization } from '../../../context/auth-ui-config.svelte.js';
+	import { useLang } from '../../../hooks/use-lang.svelte.js';
+	import { cn, getLocalizedError } from '../../../utils/utils.js';
+	import type { AuthLocalization } from '../../../types/index.js';
+	import type { ApiKey } from '../../../types/api-key.js';
+	import type { Refetch } from '../../../types/refetch.js';
+	import { Button } from '../../ui/button/index.js';
+	import { Card } from '../../ui/card/index.js';
+	import * as Dialog from '../../ui/dialog/index.js';
+	import type { SettingsCardClassNames } from '../shared/settings-card.svelte';
+
+	interface Props {
+		classNames?: SettingsCardClassNames;
+		apiKey: ApiKey;
+		localization?: Partial<AuthLocalization>;
+		refetch?: Refetch;
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let {
+		classNames,
+		apiKey,
+		localization: propLocalization,
+		refetch,
+		open = $bindable(false),
+		onOpenChange
+	}: Props = $props();
+
+	const config = getAuthUIConfig();
+	const contextLocalization = getLocalization();
+
+	const toast = config.toast;
+	const mutators = config.mutators;
+
+	const localization = $derived({ ...contextLocalization, ...propLocalization });
+
+	const { lang } = useLang();
+	let isLoading = $state(false);
+
+	async function handleDelete() {
+		isLoading = true;
+
+		try {
+			await mutators.deleteApiKey({ keyId: apiKey.id });
+			await refetch?.();
+			handleOpenChange(false);
+		} catch (error) {
+			toast.error(getLocalizedError({ error, localization }));
+		}
+
+		isLoading = false;
+	}
+
+	// Format expiration date or show "Never expires"
+	function formatExpiration() {
+		if (!apiKey.expiresAt) return localization.NEVER_EXPIRES;
+
+		const expiresDate = new Date(apiKey.expiresAt);
+		return `${localization.EXPIRES} ${expiresDate.toLocaleDateString(lang ?? 'en', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		})}`;
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+		onOpenChange?.(newOpen);
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Content class={classNames?.dialog?.content} onOpenAutoFocus={(e) => e.preventDefault()}>
+		<Dialog.Header class={classNames?.dialog?.header}>
+			<Dialog.Title class={cn('text-lg md:text-xl', classNames?.title)}>
+				{localization.DELETE} {localization.API_KEY}
+			</Dialog.Title>
+
+			<Dialog.Description class={cn('text-xs md:text-sm', classNames?.description)}>
+				{localization.DELETE_API_KEY_CONFIRM}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<Card class={cn('my-2 flex-row items-center gap-3 px-4 py-3', classNames?.cell)}>
+			<KeyRound class={cn('size-4', classNames?.icon)} />
+
+			<div class="flex flex-col">
+				<div class="flex items-center gap-2">
+					<span class="text-sm font-semibold">
+						{apiKey.name}
+					</span>
+
+					<span class="text-sm text-muted-foreground">
+						{apiKey.start}{'******'}
+					</span>
+				</div>
+
+				<div class="text-xs text-muted-foreground">
+					{formatExpiration()}
+				</div>
+			</div>
+		</Card>
+
+		<Dialog.Footer class={classNames?.dialog?.footer}>
+			<Button
+				type="button"
+				variant="secondary"
+				onclick={() => handleOpenChange(false)}
+				disabled={isLoading}
+				class={cn(classNames?.button, classNames?.secondaryButton)}
+			>
+				{localization.CANCEL}
+			</Button>
+
+			<Button
+				type="button"
+				variant="destructive"
+				onclick={handleDelete}
+				disabled={isLoading}
+				class={cn(classNames?.button, classNames?.destructiveButton)}
+			>
+				{#if isLoading}
+					<Loader2 class="animate-spin" />
+				{/if}
+				{localization.DELETE}
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/components/settings/api-key/api-key-delete-dialog.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { AuthLocalization } from '../../../types/index.js';
+import type { ApiKey } from '../../../types/api-key.js';
+import type { Refetch } from '../../../types/refetch.js';
+import type { SettingsCardClassNames } from '../shared/settings-card.svelte';
+interface Props {
+    classNames?: SettingsCardClassNames;
+    apiKey: ApiKey;
+    localization?: Partial<AuthLocalization>;
+    refetch?: Refetch;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const ApiKeyDeleteDialog: import("svelte").Component<Props, {}, "open">;
+type ApiKeyDeleteDialog = ReturnType<typeof ApiKeyDeleteDialog>;
+export default ApiKeyDeleteDialog;

package/dist/components/settings/api-key/api-key-display-dialog.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import Check from '@lucide/svelte/icons/check';
+	import Copy from '@lucide/svelte/icons/copy';
+	import { getLocalization } from '../../../context/auth-ui-config.svelte';
+	import { cn } from '../../../utils/utils.js';
+	import type { AuthLocalization } from '../../../types/index.js';
+	import type { SettingsCardClassNames } from '../shared/settings-card.svelte';
+	import { Button } from '../../ui/button/index.js';
+	import * as Dialog from '../../ui/dialog/index.js';
+
+	interface Props {
+		classNames?: SettingsCardClassNames;
+		localization?: Partial<AuthLocalization>;
+		apiKey: string;
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let {
+		classNames,
+		apiKey,
+		localization: propLocalization,
+		open = $bindable(false),
+		onOpenChange
+	}: Props = $props();
+
+	const contextLocalization = getLocalization();
+	const localization = $derived({ ...contextLocalization, ...propLocalization });
+
+	let copied = $state(false);
+
+	function handleCopy() {
+		navigator.clipboard.writeText(apiKey);
+		copied = true;
+		setTimeout(() => {
+			copied = false;
+		}, 2000);
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+		onOpenChange?.(newOpen);
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Content onOpenAutoFocus={(e) => e.preventDefault()} class={classNames?.dialog?.content}>
+		<Dialog.Header class={classNames?.dialog?.header}>
+			<Dialog.Title class={cn('text-lg md:text-xl', classNames?.title)}>
+				{localization.API_KEY_CREATED}
+			</Dialog.Title>
+
+			<Dialog.Description class={cn('text-xs md:text-sm', classNames?.description)}>
+				{localization.CREATE_API_KEY_SUCCESS}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="break-all rounded-md bg-muted p-4 font-mono text-sm">
+			{apiKey}
+		</div>
+
+		<Dialog.Footer class={classNames?.dialog?.footer}>
+			<Button
+				type="button"
+				variant="outline"
+				onclick={handleCopy}
+				disabled={copied}
+				class={cn(classNames?.button, classNames?.outlineButton)}
+			>
+				{#if copied}
+					<Check class={classNames?.icon} />
+					{localization.COPIED_TO_CLIPBOARD}
+				{:else}
+					<Copy class={classNames?.icon} />
+					{localization.COPY_TO_CLIPBOARD}
+				{/if}
+			</Button>
+
+			<Button
+				type="button"
+				variant="default"
+				onclick={() => handleOpenChange(false)}
+				class={cn(classNames?.button, classNames?.primaryButton)}
+			>
+				{localization.DONE}
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/components/settings/api-key/api-key-display-dialog.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { AuthLocalization } from '../../../types/index.js';
+import type { SettingsCardClassNames } from '../shared/settings-card.svelte';
+interface Props {
+    classNames?: SettingsCardClassNames;
+    localization?: Partial<AuthLocalization>;
+    apiKey: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const ApiKeyDisplayDialog: import("svelte").Component<Props, {}, "open">;
+type ApiKeyDisplayDialog = ReturnType<typeof ApiKeyDisplayDialog>;
+export default ApiKeyDisplayDialog;

package/dist/components/settings/api-key/api-keys-card.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { getAuthUIConfig } from '../../../context/auth-ui-config.svelte.js';
+	import { cn } from '../../../utils/utils.js';
+	import type { AuthLocalization } from '../../../types/index.js';
+	import { CardContent } from '../../ui/card/index.js';
+	import SettingsCard, { type SettingsCardClassNames } from '../shared/settings-card.svelte';
+	import ApiKeyCell from './api-key-cell.svelte';
+	import ApiKeyDisplayDialog from './api-key-display-dialog.svelte';
+	import CreateApiKeyDialog from './create-api-key-dialog.svelte';
+
+	export interface ApiKeysCardProps {
+		className?: string;
+		classNames?: SettingsCardClassNames;
+		localization?: Partial<AuthLocalization>;
+		organizationId?: string;
+	}
+
+	interface Props extends ApiKeysCardProps {}
+
+	let {
+		className,
+		classNames,
+		localization: propLocalization,
+		organizationId,
+		...restProps
+	}: Props = $props();
+
+	const {
+		hooks: { useListApiKeys },
+		localization: contextLocalization
+	} = getAuthUIConfig();
+
+	const mergedLocalization = $derived({ ...contextLocalization, ...propLocalization });
+
+	const listApiKeys = useListApiKeys();
+	const apiKeys = $derived(listApiKeys.data);
+	const isPending = $derived(listApiKeys.isPending);
+	const refetch = $derived(listApiKeys.refetch);
+
+	// Filter API keys by organizationId
+	const filteredApiKeys = $derived(
+		!apiKeys ? null : !organizationId ? apiKeys : apiKeys.filter(
+			(apiKey) => organizationId === apiKey.metadata?.organizationId
+		)
+	);
+
+	let createDialogOpen = $state(false);
+	let displayDialogOpen = $state(false);
+	let createdApiKey = $state('');
+
+	const handleCreateApiKey = (apiKey: string) => {
+		createdApiKey = apiKey;
+		displayDialogOpen = true;
+	};
+</script>
+
+<SettingsCard
+	{className}
+	{classNames}
+	actionLabel={mergedLocalization.CREATE_API_KEY}
+	description={mergedLocalization.API_KEYS_DESCRIPTION}
+	instructions={mergedLocalization.API_KEYS_INSTRUCTIONS}
+	{isPending}
+	title={mergedLocalization.API_KEYS}
+	action={() => (createDialogOpen = true)}
+	{...restProps}
+>
+	{#if filteredApiKeys && filteredApiKeys.length > 0}
+		<CardContent class={cn('grid gap-4', classNames?.content)}>
+			{#each filteredApiKeys as apiKey (apiKey.id)}
+				<ApiKeyCell
+					{classNames}
+					{apiKey}
+					localization={mergedLocalization}
+					{refetch}
+				/>
+			{/each}
+		</CardContent>
+	{/if}
+</SettingsCard>
+
+<CreateApiKeyDialog
+	{classNames}
+	localization={mergedLocalization}
+	open={createDialogOpen}
+	onOpenChange={(open) => (createDialogOpen = open)}
+	onSuccess={handleCreateApiKey}
+	{refetch}
+	{organizationId}
+/>
+
+<ApiKeyDisplayDialog
+	{classNames}
+	apiKey={createdApiKey}
+	localization={mergedLocalization}
+	open={displayDialogOpen}
+	onOpenChange={(open) => (displayDialogOpen = open)}
+/>

package/dist/components/settings/api-key/api-keys-card.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { AuthLocalization } from '../../../types/index.js';
+import { type SettingsCardClassNames } from '../shared/settings-card.svelte';
+export interface ApiKeysCardProps {
+    className?: string;
+    classNames?: SettingsCardClassNames;
+    localization?: Partial<AuthLocalization>;
+    organizationId?: string;
+}
+interface Props extends ApiKeysCardProps {
+}
+declare const ApiKeysCard: import("svelte").Component<Props, {}, "">;
+type ApiKeysCard = ReturnType<typeof ApiKeysCard>;
+export default ApiKeysCard;

package/dist/components/settings/api-key/create-api-key-dialog.svelte

@@ -0,0 +1,337 @@
+<script lang="ts">
+	import { z } from 'zod';
+	import { createForm } from '@tanstack/svelte-form';
+	import Loader2 from '@lucide/svelte/icons/loader-2';
+	import type { Organization } from 'better-auth/plugins/organization';
+	import {
+		getAuthClient,
+		getAuthUIConfig,
+		getLocalization
+	} from '../../../context/auth-ui-config.svelte';
+	import { useLang } from '../../../hooks/use-lang.svelte.js';
+	import { cn, getLocalizedError, getFieldError } from '../../../utils/utils.js';
+	import type { AuthLocalization } from '../../../types/index.js';
+	import type { SettingsCardClassNames } from '../shared/settings-card.svelte';
+	import { Button } from '../../ui/button/index.js';
+	import * as Dialog from '../../ui/dialog/index.js';
+	import { Input } from '../../ui/input/index.js';
+	import { Label } from '../../ui/label/index.js';
+	import * as Select from '../../ui/select/index.js';
+	import OrganizationCellView from '../../organization/organization-cell-view.svelte';
+	import PersonalAccountView from '../../organization/personal-account-view.svelte';
+
+	interface Props {
+		class?: string;
+		classNames?: SettingsCardClassNames;
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		localization?: Partial<AuthLocalization>;
+		onSuccess: (key: string) => void;
+		refetch?: import('../../../types/refetch.js').Refetch;
+		organizationId?: string;
+	}
+
+	let {
+		class: className,
+		classNames,
+		open = $bindable(false),
+		onOpenChange,
+		localization: propLocalization,
+		onSuccess,
+		refetch,
+		organizationId
+	}: Props = $props();
+
+	const authClient = getAuthClient();
+	const config = getAuthUIConfig();
+	const contextLocalization = getLocalization();
+
+	const { hooks, toast, apiKey, organization: contextOrganization } = config;
+
+	const localization = $derived({ ...contextLocalization, ...propLocalization });
+
+	// Use the lang hook
+	const { lang } = useLang();
+
+	// Get current user from session - must be at top level
+	const sessionStore = hooks.useSession();
+	const sessionData = $derived('data' in $sessionStore ? $sessionStore.data : undefined);
+	const user = $derived(sessionData?.user);
+
+	// Fetch organizations if organization plugin is available - must be at top level
+	const organizationsStore = contextOrganization ? hooks.useListOrganizations() : null;
+	const organizations = $derived(
+		organizationsStore && 'data' in organizationsStore
+			? (organizationsStore.data as Organization[] | null | undefined)
+			: undefined
+	);
+
+	const showOrganizationSelect = $derived(contextOrganization?.apiKey);
+
+	// Form validation schema
+	const formSchema = $derived(
+		z.object({
+			name: z.string().min(1, `${localization.NAME} ${localization.IS_REQUIRED}`),
+			expiresInDays: z.string().optional(),
+			organizationId: showOrganizationSelect
+				? z.string().min(1, `${localization.ORGANIZATION} ${localization.IS_REQUIRED}`)
+				: z.string().optional()
+		})
+	);
+
+	// Track selected values for Select components
+	let selectedExpiresInDays = $state('none');
+	let selectedOrganizationId = $state(organizationId ?? 'personal');
+
+	// Create form
+	const form = createForm(() => ({
+		defaultValues: {
+			name: '',
+			expiresInDays: 'none',
+			organizationId: organizationId ?? 'personal'
+		},
+		onSubmit: async ({ value }) => {
+			try {
+				const expiresIn =
+					value.expiresInDays && value.expiresInDays !== 'none'
+						? Number.parseInt(value.expiresInDays) * 60 * 60 * 24
+						: undefined;
+
+				const selectedOrgId =
+					value.organizationId === 'personal' ? undefined : value.organizationId;
+
+				const metadata = {
+					...(typeof apiKey === 'object' ? apiKey.metadata : {}),
+					...(contextOrganization && selectedOrgId ? { organizationId: selectedOrgId } : {})
+				};
+
+				const result = await (authClient as any).apiKey.create({
+					name: value.name,
+					expiresIn,
+					prefix: typeof apiKey === 'object' ? apiKey.prefix : undefined,
+					metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
+					fetchOptions: { throw: true }
+				});
+
+				await refetch?.();
+				onSuccess(result.key);
+				handleOpenChange(false);
+				form.reset();
+				selectedExpiresInDays = 'none';
+				selectedOrganizationId = organizationId ?? 'personal';
+			} catch (error) {
+				toast.error(getLocalizedError({ error, localization }));
+			}
+		}
+	}));
+
+	const isSubmitting = $derived(form.state.isSubmitting);
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+		onOpenChange?.(newOpen);
+
+		// Reset form when dialog closes
+		if (!newOpen) {
+			form.reset();
+			selectedExpiresInDays = 'none';
+			selectedOrganizationId = organizationId ?? 'personal';
+		}
+	}
+
+	// Create relative time formatter
+	const rtf = $derived(new Intl.RelativeTimeFormat(lang ?? 'en'));
+
+	// Expiration options
+	const expirationDays = [1, 7, 30, 60, 90, 180, 365];
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Content
+		class={classNames?.dialog?.content}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+	>
+		<Dialog.Header class={classNames?.dialog?.header}>
+			<Dialog.Title class={cn('text-lg md:text-xl', classNames?.title)}>
+				{localization.CREATE_API_KEY}
+			</Dialog.Title>
+
+			<Dialog.Description class={cn('text-xs md:text-sm', classNames?.description)}>
+				{localization.CREATE_API_KEY_DESCRIPTION}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<form
+			onsubmit={(e) => {
+				e.preventDefault();
+				form.handleSubmit();
+			}}
+			class="space-y-6"
+		>
+			{#if showOrganizationSelect}
+				<form.Field name="organizationId">
+					{#snippet children(field)}
+						<div class="space-y-2">
+							<Label for="organizationId" class={classNames?.label}>
+								{localization.ORGANIZATION}
+							</Label>
+
+							<Select.Root
+								type="single"
+								value={selectedOrganizationId}
+								onValueChange={(value?: string) => {
+									if (value) {
+										selectedOrganizationId = value;
+										field.handleChange(value);
+									}
+								}}
+								disabled={isSubmitting}
+							>
+								<Select.Trigger id="organizationId" class={cn('w-full p-2', classNames?.input)}>
+									{#snippet children()}
+										{#if selectedOrganizationId === 'personal'}
+											<PersonalAccountView {user} {localization} size="sm" />
+										{:else}
+											{@const org = organizations?.find((o) => o.id === selectedOrganizationId)}
+											{#if org}
+												<OrganizationCellView organization={org} {localization} size="sm" />
+											{/if}
+										{/if}
+									{/snippet}
+								</Select.Trigger>
+
+								<Select.Content class="w-[--radix-select-trigger-width]">
+									<Select.Item value="personal" label="">
+										{#snippet children()}
+											<PersonalAccountView {user} {localization} size="sm" />
+										{/snippet}
+									</Select.Item>
+
+									{#if organizations}
+										{#each organizations as org (org.id)}
+											<Select.Item value={org.id} label="">
+												{#snippet children()}
+													<OrganizationCellView organization={org} {localization} size="sm" />
+												{/snippet}
+											</Select.Item>
+										{/each}
+									{/if}
+								</Select.Content>
+							</Select.Root>
+
+							{#if field.state.meta.errors.length > 0}
+								<p class="text-sm font-medium text-destructive">
+									{getFieldError(field.state.meta.errors[0])}
+								</p>
+							{/if}
+						</div>
+					{/snippet}
+				</form.Field>
+			{/if}
+
+			<div class="flex gap-4">
+				<form.Field name="name" validators={{ onChange: formSchema.shape.name }}>
+					{#snippet children(field)}
+						<div class="flex-1 space-y-2">
+							<Label for="name" class={classNames?.label}>
+								{localization.NAME}
+							</Label>
+
+							<Input
+								id="name"
+								placeholder={localization.API_KEY_NAME_PLACEHOLDER}
+								autofocus
+								value={field.state.value}
+								oninput={(e) => field.handleChange(e.currentTarget.value)}
+								onblur={field.handleBlur}
+								disabled={isSubmitting}
+								class={classNames?.input}
+							/>
+
+							{#if field.state.meta.errors.length > 0}
+								<p class="text-sm font-medium text-destructive">
+									{getFieldError(field.state.meta.errors[0])}
+								</p>
+							{/if}
+						</div>
+					{/snippet}
+				</form.Field>
+
+				<form.Field name="expiresInDays">
+					{#snippet children(field)}
+						<div class="space-y-2">
+							<Label for="expiresInDays" class={classNames?.label}>
+								{localization.EXPIRES}
+							</Label>
+
+							<Select.Root
+								type="single"
+								value={selectedExpiresInDays}
+								onValueChange={(value?: string) => {
+									if (value !== undefined) {
+										selectedExpiresInDays = value;
+										field.handleChange(value);
+									}
+								}}
+								disabled={isSubmitting}
+							>
+								<Select.Trigger id="expiresInDays" class={classNames?.input}>
+									{#snippet children()}
+										{#if selectedExpiresInDays === 'none'}
+											{localization.NO_EXPIRATION}
+										{:else if selectedExpiresInDays === '365'}
+											{rtf.format(1, 'year')}
+										{:else}
+											{rtf.format(Number.parseInt(selectedExpiresInDays), 'day')}
+										{/if}
+									{/snippet}
+								</Select.Trigger>
+
+								<Select.Content>
+									<Select.Item value="none" label={localization.NO_EXPIRATION} />
+
+									{#each expirationDays as days (days)}
+										<Select.Item
+											value={days.toString()}
+											label={days === 365 ? rtf.format(1, 'year') : rtf.format(days, 'day')}
+										/>
+									{/each}
+								</Select.Content>
+							</Select.Root>
+
+							{#if field.state.meta.errors.length > 0}
+								<p class="text-sm font-medium text-destructive">
+									{getFieldError(field.state.meta.errors[0])}
+								</p>
+							{/if}
+						</div>
+					{/snippet}
+				</form.Field>
+			</div>
+
+			<Dialog.Footer class={classNames?.dialog?.footer}>
+				<Button
+					type="button"
+					variant="outline"
+					onclick={() => handleOpenChange(false)}
+					class={cn(classNames?.button, classNames?.outlineButton)}
+					disabled={isSubmitting}
+				>
+					{localization.CANCEL}
+				</Button>
+
+				<Button
+					type="submit"
+					variant="default"
+					class={cn(classNames?.button, classNames?.primaryButton)}
+					disabled={isSubmitting}
+				>
+					{#if isSubmitting}
+						<Loader2 class="animate-spin" />
+					{/if}
+					{localization.CREATE_API_KEY}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/components/settings/api-key/create-api-key-dialog.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { AuthLocalization } from '../../../types/index.js';
+import type { SettingsCardClassNames } from '../shared/settings-card.svelte';
+interface Props {
+    class?: string;
+    classNames?: SettingsCardClassNames;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    localization?: Partial<AuthLocalization>;
+    onSuccess: (key: string) => void;
+    refetch?: import('../../../types/refetch.js').Refetch;
+    organizationId?: string;
+}
+declare const CreateApiKeyDialog: import("svelte").Component<Props, {}, "open">;
+type CreateApiKeyDialog = ReturnType<typeof CreateApiKeyDialog>;
+export default CreateApiKeyDialog;

package/dist/components/settings/api-key/index.d.ts

@@ -0,0 +1,7 @@
+export { default as ApiKeysCard } from './api-keys-card.svelte';
+export { default as ApiKeyCell } from './api-key-cell.svelte';
+export { default as ApiKeyDisplayDialog } from './api-key-display-dialog.svelte';
+export { default as ApiKeyDeleteDialog } from './api-key-delete-dialog.svelte';
+export { default as CreateApiKeyDialog } from './create-api-key-dialog.svelte';
+export type { ApiKeysCardProps } from './api-keys-card.svelte';
+export type { ApiKeyCellProps } from './api-key-cell.svelte';

package/dist/components/settings/api-key/index.js

@@ -0,0 +1,5 @@
+export { default as ApiKeysCard } from './api-keys-card.svelte';
+export { default as ApiKeyCell } from './api-key-cell.svelte';
+export { default as ApiKeyDisplayDialog } from './api-key-display-dialog.svelte';
+export { default as ApiKeyDeleteDialog } from './api-key-delete-dialog.svelte';
+export { default as CreateApiKeyDialog } from './create-api-key-dialog.svelte';

package/dist/components/settings/index.d.ts

@@ -4,5 +4,6 @@ export * from './security/index.js';
 export * from './providers/index.js';
 export * from './two-factor/index.js';
 export * from './passkey/index.js';
+export * from './api-key/index.js';
 export { default as SecuritySettingsCards } from './security-settings-cards.svelte';
 export type { SecuritySettingsCardsProps } from './security-settings-cards.svelte';

package/dist/components/settings/index.js

@@ -4,4 +4,5 @@ export * from './security/index.js';
 export * from './providers/index.js';
 export * from './two-factor/index.js';
 export * from './passkey/index.js';
+export * from './api-key/index.js';
 export { default as SecuritySettingsCards } from './security-settings-cards.svelte';

package/dist/index.d.ts

@@ -6,6 +6,9 @@ export { default as UserButton } from './components/user-button.svelte';
 export { default as UserView } from './components/user-view.svelte';
 export { default as AuthLoading } from './components/auth-loading.svelte';
 export * as ProviderIcons from './components/provider-icons/index.js';
+export { default as PasswordInput } from './components/password-input.svelte';
+export { default as RedirectToSignIn } from './components/redirect-to-sign-in.svelte';
+export { default as RedirectToSignUp } from './components/redirect-to-sign-up.svelte';
 export * from './components/account/index.js';
 export { default as AuthCallback } from './components/auth/auth-callback.svelte';
 export { default as AuthForm } from './components/auth/auth-form.svelte';
@@ -18,6 +21,8 @@ export { default as ResetPasswordForm } from './components/auth/forms/reset-pass
 export { default as SignInForm } from './components/auth/forms/sign-in-form.svelte';
 export { default as SignUpForm } from './components/auth/forms/sign-up-form.svelte';
 export { default as TwoFactorForm } from './components/auth/forms/two-factor-form.svelte';
+export { default as FormError } from './components/form-error.svelte';
+export type { FormErrorProps } from './components/form-error.svelte';
 export { default as CreateOrganizationDialog } from './components/organization/create-organization-dialog.svelte';
 export { default as DeleteOrganizationCard } from './components/organization/delete-organization-card.svelte';
 export { default as DeleteOrganizationDialog } from './components/organization/delete-organization-dialog.svelte';
@@ -49,9 +54,18 @@ export { default as UpdateFieldCard } from './components/settings/account/update
 export { default as UpdateNameCard } from './components/settings/account/update-name-card.svelte';
 export { default as UpdateUsernameCard } from './components/settings/account/update-username-card.svelte';
 export { default as AccountSettingsCards } from './components/settings/account/account-settings-cards.svelte';
+export { default as ApiKeysCard } from './components/settings/api-key/api-keys-card.svelte';
+export type { ApiKeysCardProps } from './components/settings/api-key/api-keys-card.svelte';
+export { default as PasskeysCard } from './components/settings/passkey/passkeys-card.svelte';
 export { default as ProvidersCard } from './components/settings/providers/providers-card.svelte';
 export type { ProvidersCardProps } from './components/settings/providers/providers-card.svelte';
+export { default as ChangeEmailCard } from './components/settings/security/change-email-card.svelte';
+export { default as ChangePasswordCard } from './components/settings/security/change-password-card.svelte';
+export { default as SessionsCard } from './components/settings/security/sessions-card.svelte';
+export { default as SecuritySettingsCards } from './components/settings/security-settings-cards.svelte';
+export { default as SettingsCard } from './components/settings/shared/settings-card.svelte';
 export { default as SettingsCellSkeleton } from './components/settings/skeletons/settings-cell-skeleton.svelte';
+export { default as TwoFactorCard } from './components/settings/two-factor/two-factor-card.svelte';
 export * from './stores/use-auth-data.svelte.js';
 export * from './hooks/use-authenticate.svelte.js';
 export * from './hooks/use-current-organization.svelte.js';

package/dist/index.js

@@ -7,9 +7,9 @@ export { default as UserButton } from './components/user-button.svelte';
 export { default as UserView } from './components/user-view.svelte';
 export { default as AuthLoading } from './components/auth-loading.svelte';
 export * as ProviderIcons from './components/provider-icons/index.js';
-// export { default as PasswordInput } from './components/password-input.svelte';
-// export { default as RedirectToSignIn } from './components/redirect-to-sign-in.svelte';
-// export { default as RedirectToSignUp } from './components/redirect-to-sign-up.svelte';
+export { default as PasswordInput } from './components/password-input.svelte';
+export { default as RedirectToSignIn } from './components/redirect-to-sign-in.svelte';
+export { default as RedirectToSignUp } from './components/redirect-to-sign-up.svelte';
 // Account Components
 export * from './components/account/index.js';
 // Auth Components
@@ -25,6 +25,8 @@ export { default as ResetPasswordForm } from './components/auth/forms/reset-pass
 export { default as SignInForm } from './components/auth/forms/sign-in-form.svelte';
 export { default as SignUpForm } from './components/auth/forms/sign-up-form.svelte';
 export { default as TwoFactorForm } from './components/auth/forms/two-factor-form.svelte';
+// Form Utilities
+export { default as FormError } from './components/form-error.svelte';
 // Organization Components
 // export { default as AcceptInvitationCard } from './components/organization/accept-invitation-card.svelte';
 export { default as CreateOrganizationDialog } from './components/organization/create-organization-dialog.svelte';
@@ -60,23 +62,23 @@ export { default as UpdateNameCard } from './components/settings/account/update-
 export { default as UpdateUsernameCard } from './components/settings/account/update-username-card.svelte';
 export { default as AccountSettingsCards } from './components/settings/account/account-settings-cards.svelte';
 // Settings Components - API Key
-// export { default as ApiKeysCard } from './components/settings/api-key/api-keys-card.svelte';
+export { default as ApiKeysCard } from './components/settings/api-key/api-keys-card.svelte';
 // Settings Components - Passkey
-// export { default as PasskeysCard } from './components/settings/passkey/passkeys-card.svelte';
+export { default as PasskeysCard } from './components/settings/passkey/passkeys-card.svelte';
 // Settings Components - Providers
 export { default as ProvidersCard } from './components/settings/providers/providers-card.svelte';
 // Settings Components - Security
-// export { default as ChangeEmailCard } from './components/settings/security/change-email-card.svelte';
-// export { default as ChangePasswordCard } from './components/settings/security/change-password-card.svelte';
-// export { default as SessionsCard } from './components/settings/security/sessions-card.svelte';
-// export { default as SecuritySettingsCards } from './components/settings/security-settings-cards.svelte';
+export { default as ChangeEmailCard } from './components/settings/security/change-email-card.svelte';
+export { default as ChangePasswordCard } from './components/settings/security/change-password-card.svelte';
+export { default as SessionsCard } from './components/settings/security/sessions-card.svelte';
+export { default as SecuritySettingsCards } from './components/settings/security-settings-cards.svelte';
 // Settings Components - Shared
-// export { default as SettingsCard } from './components/settings/shared/settings-card.svelte';
+export { default as SettingsCard } from './components/settings/shared/settings-card.svelte';
 // Settings Components - Skeletons
 // export { default as InputFieldSkeleton } from './components/settings/skeletons/input-field-skeleton.svelte';
 export { default as SettingsCellSkeleton } from './components/settings/skeletons/settings-cell-skeleton.svelte';
 // Settings Components - Two Factor
-// export { default as TwoFactorCard } from './components/settings/two-factor/two-factor-card.svelte';
+export { default as TwoFactorCard } from './components/settings/two-factor/two-factor-card.svelte';
 // Hooks
 export * from './stores/use-auth-data.svelte.js';
 export * from './hooks/use-authenticate.svelte.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "better-auth-ui-svelte",
-  "version": "0.1.2",
+  "version": "0.2.3",
   "description": "Pre-built authentication UI components for Better Auth in Svelte 5",
   "files": [
     "dist",
@@ -14,6 +14,7 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "exports": {
+    "./css": "./dist/style.css",
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"