@vonall/auth 0.2.1 → 0.3.1

package/dist/ui/SettingsTabsList.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import * as Tabs from "../components/ui/tabs/index.js";
+	import type { SettingsTabDef } from "./tabs.js";
+
+	let { tabs }: { tabs: SettingsTabDef[] } = $props();
+</script>
+
+<!-- Labels at every width: where they don't fit, the bar scrolls sideways (icons alone were not found); w-0 min-w-full
+     keeps its labels from widening the page -->
+<Tabs.List class="flex h-12 w-0 min-w-full justify-start overflow-x-auto bg-muted p-1">
+	{#each tabs as tab (tab.id)}
+		<Tabs.Trigger value={tab.id} class="flex-1 shrink-0 px-3 data-[state=active]:bg-background {tab.id === 'deletion' ? 'text-destructive' : ''}">
+			<tab.icon class="size-4" />
+			<span>{tab.label}</span>
+		</Tabs.Trigger>
+	{/each}
+</Tabs.List>

package/dist/ui/SettingsTabsList.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SettingsTabDef } from "./tabs.js";
+type $$ComponentProps = {
+    tabs: SettingsTabDef[];
+};
+declare const SettingsTabsList: import("svelte").Component<$$ComponentProps, {}, "">;
+type SettingsTabsList = ReturnType<typeof SettingsTabsList>;
+export default SettingsTabsList;

package/dist/ui/SocialButton.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Button } from "../components/ui/button/index.js";
+	import { m } from "../messages.js";
+	import { authUi } from "./context.js";
+	import { href } from "./href.js";
+	import IconGithub from "./IconGithub.svelte";
+	import IconGoogle from "./IconGoogle.svelte";
+
+	/** "Continue with GitHub/Google": starts the social sign-in with the Product's client. */
+	let { provider, callbackURL = href("/home") }: { provider: "github" | "google"; callbackURL?: string } = $props();
+	const { authClient } = authUi();
+	const names = { github: "GitHub", google: "Google" };
+
+	async function login() {
+		await authClient.signIn.social({ provider, callbackURL, errorCallbackURL: href("/auth/login") });
+	}
+</script>
+
+<Button variant="outline" class="w-full cursor-pointer" onclick={login}>
+	{#if provider === "github"}<IconGithub />{:else}<IconGoogle />{/if}
+	{m().continueWith(names[provider])}
+</Button>

package/dist/ui/SocialButton.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    provider: "github" | "google";
+    callbackURL?: string;
+};
+declare const SocialButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type SocialButton = ReturnType<typeof SocialButton>;
+export default SocialButton;

package/dist/ui/TwoFactorAuthenticationCard.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+	import { Check, Copy, Shield, ShieldAlert, ShieldCheck } from "@lucide/svelte";
+	import { page } from "$app/state";
+	import { toast } from "svelte-sonner";
+	import { renderSVG } from "uqr";
+	import { Button } from "../components/ui/button/index.js";
+	import { Input } from "../components/ui/input/index.js";
+	import { Label } from "../components/ui/label/index.js";
+	import { m } from "../messages.js";
+	import { authUi } from "./context.js";
+	import { messageOf } from "../util/messageOf.js";
+
+	const { authClient } = authUi();
+	const user = $derived(page.data.user as { twoFactorEnabled?: boolean | null } | undefined);
+
+	let twoFAInputPassword = $state("");
+	let twoFATOTPCode = $state("");
+	let isEnabling2FA = $state(false);
+	let isRequestingEnable = $state(false);
+	let isVerifyingTotp = $state(false);
+	let isDisabling2FA = $state(false);
+
+	let totpURI = $state("");
+	let backupCodes = $state<string[]>([]);
+	let isCopied = $state(false);
+	// Rendered here: the TOTP secret must never leave the browser for a QR service
+	const qrSrc = $derived(totpURI ? `data:image/svg+xml;utf8,${encodeURIComponent(renderSVG(totpURI))}` : "");
+
+	async function handleStartEnable() {
+		if (!twoFAInputPassword) {
+			toast.error(m().enterPasswordOn);
+			return;
+		}
+		isRequestingEnable = true;
+		try {
+			const res = await authClient.twoFactor.enable({ password: twoFAInputPassword });
+			const data = res.data as { method?: string; totpURI?: string; backupCodes?: string[] } | null | undefined;
+			if (res.error) {
+				toast.error(res.error.message || m().twoFactorNotOn);
+			} else if (data && data.method === "totp" && data.totpURI) {
+				totpURI = data.totpURI;
+				backupCodes = data.backupCodes || [];
+				isEnabling2FA = true;
+				toast.success(m().twoFactorEnterCode);
+			}
+		} catch (e) {
+			toast.error(messageOf(e, m().setupNotStarted));
+		} finally {
+			isRequestingEnable = false;
+		}
+	}
+
+	async function handleVerifyTotp() {
+		if (!twoFATOTPCode || twoFATOTPCode.length < 6) {
+			toast.error(m().invalidCode);
+			return;
+		}
+		isVerifyingTotp = true;
+		try {
+			const res = await authClient.twoFactor.verifyTotp({ code: twoFATOTPCode, trustDevice: true });
+			if (res.error) {
+				toast.error(res.error.message || m().wrongCode);
+			} else {
+				toast.success(m().twoFactorIsOn);
+				isEnabling2FA = false;
+				twoFAInputPassword = "";
+				twoFATOTPCode = "";
+				totpURI = "";
+				window.location.reload();
+			}
+		} catch (e) {
+			toast.error(messageOf(e, m().codeNotVerified));
+		} finally {
+			isVerifyingTotp = false;
+		}
+	}
+
+	async function handleDisable2FA() {
+		if (!twoFAInputPassword) {
+			toast.error(m().enterPasswordOff);
+			return;
+		}
+		isRequestingEnable = true;
+		try {
+			const res = await authClient.twoFactor.disable({ password: twoFAInputPassword });
+			if (res.error) {
+				toast.error(res.error.message || m().twoFactorNotOff);
+			} else {
+				toast.success(m().twoFactorIsOff);
+				isDisabling2FA = false;
+				twoFAInputPassword = "";
+				window.location.reload();
+			}
+		} catch (e) {
+			toast.error(messageOf(e, m().twoFactorNotOff));
+		} finally {
+			isRequestingEnable = false;
+		}
+	}
+
+	async function handleCopyBackupCodes() {
+		try {
+			await navigator.clipboard.writeText(backupCodes.join("\n"));
+			isCopied = true;
+			toast.success(m().backupCodesCopied);
+			setTimeout(() => (isCopied = false), 2000);
+		} catch {
+			toast.error(m().copyLinkFailed);
+		}
+	}
+</script>
+
+<div class="panel space-y-6 p-6 md:p-8">
+	<div class="flex items-center justify-between border-b pb-4">
+		<div>
+			<h3 class="flex items-center gap-2 text-lg font-semibold">
+				<Shield class="size-5 text-muted-foreground" />
+				{m().twoFactorHeading}
+			</h3>
+			<p class="mt-1 text-sm text-muted-foreground">{m().twoFactorIntro}</p>
+		</div>
+		<div>
+			{#if user?.twoFactorEnabled}
+				<span class="inline-flex items-center gap-1.5 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1.5 text-xs font-semibold text-emerald-600 dark:text-emerald-400">
+					<ShieldCheck class="size-4" />
+					{m().on}
+				</span>
+			{:else}
+				<span class="inline-flex items-center gap-1.5 rounded-full border border-amber-500/20 bg-amber-500/10 px-3 py-1.5 text-xs font-semibold text-amber-600 dark:text-amber-400">
+					<ShieldAlert class="size-4" />
+					{m().off}
+				</span>
+			{/if}
+		</div>
+	</div>
+
+	{#if user?.twoFactorEnabled}
+		<div class="space-y-4">
+			<p class="text-sm text-muted-foreground">{m().twoFactorProtects}</p>
+			{#if isDisabling2FA}
+				<div class="space-y-4 border-t pt-4">
+					<div class="space-y-2">
+						<Label for="disable2faPassword" class="text-sm font-medium">{m().yourPassword}</Label>
+						<Input id="disable2faPassword" type="password" bind:value={twoFAInputPassword} placeholder="••••••••" class="max-w-md bg-muted/30" />
+					</div>
+					<div class="flex gap-3">
+						<Button variant="destructive" onclick={handleDisable2FA} disabled={isRequestingEnable} class="cursor-pointer">
+							{isRequestingEnable ? m().turningOff : m().turnOff}
+						</Button>
+						<Button
+							variant="outline"
+							onclick={() => {
+								isDisabling2FA = false;
+								twoFAInputPassword = "";
+							}}
+							class="cursor-pointer"
+						>
+							{m().cancel}
+						</Button>
+					</div>
+				</div>
+			{:else}
+				<Button variant="destructive" onclick={() => (isDisabling2FA = true)} class="cursor-pointer">{m().turnOff2fa}</Button>
+			{/if}
+		</div>
+	{:else if isEnabling2FA}
+		<div class="grid grid-cols-1 gap-8 pt-4 md:grid-cols-2">
+			<div class="flex flex-col items-center justify-center space-y-4 rounded-xl border border-dashed bg-muted/20 p-4 text-center">
+				<p class="text-xs font-semibold tracking-wider text-muted-foreground uppercase">{m().scanQr}</p>
+				<img src={qrSrc} width="180" height="180" alt={m().qrAlt} class="rounded-lg border bg-white p-2 shadow-xs" />
+				<p class="max-w-[220px] text-xs text-muted-foreground">{m().scanWithApp}</p>
+			</div>
+			<div class="space-y-6">
+				<div>
+					<h4 class="mb-2 text-sm font-semibold">{m().saveBackupCodes}</h4>
+					<p class="mb-3 text-xs text-muted-foreground">{m().backupCodesIntro}</p>
+					<div class="flex items-center gap-2">
+						<code class="block flex-1 truncate rounded-lg border bg-muted/60 p-2.5 font-mono text-xs select-all">{backupCodes.slice(0, 3).join(", ")}...</code>
+						<Button variant="outline" size="icon" onclick={handleCopyBackupCodes} title={m().copyBackupCodes} class="cursor-pointer">
+							{#if isCopied}<Check class="size-4 text-emerald-500" />{:else}<Copy class="size-4" />{/if}
+						</Button>
+					</div>
+				</div>
+
+				<div class="space-y-3">
+					<h4 class="text-sm font-semibold">{m().confirmSetup}</h4>
+					<div class="space-y-2">
+						<Label for="totpCode" class="text-sm font-medium">{m().enterCodeFromApp}</Label>
+						<Input id="totpCode" type="text" maxlength={6} bind:value={twoFATOTPCode} placeholder="123456" class="max-w-sm bg-muted/30 text-center text-lg font-bold tracking-widest" />
+					</div>
+					<div class="flex gap-3">
+						<Button onclick={handleVerifyTotp} disabled={isVerifyingTotp} class="cursor-pointer">{isVerifyingTotp ? m().checking : m().turnOn2fa}</Button>
+						<Button
+							variant="outline"
+							onclick={() => {
+								isEnabling2FA = false;
+								twoFAInputPassword = "";
+								totpURI = "";
+							}}
+							class="cursor-pointer"
+						>
+							{m().cancel}
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	{:else}
+		<div class="space-y-4">
+			<p class="text-sm text-muted-foreground">{m().setup2faIntro}</p>
+			<div class="space-y-4">
+				<div class="space-y-2">
+					<Label for="enable2faPassword" class="text-sm font-medium">{m().yourPassword}</Label>
+					<Input id="enable2faPassword" type="password" bind:value={twoFAInputPassword} placeholder="••••••••" class="max-w-md bg-muted/30" />
+				</div>
+				<Button onclick={handleStartEnable} disabled={isRequestingEnable} class="cursor-pointer">{isRequestingEnable ? m().starting : m().start2faSetup}</Button>
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/ui/TwoFactorAuthenticationCard.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TwoFactorAuthenticationCard: import("svelte").Component<Record<string, never>, {}, "">;
+type TwoFactorAuthenticationCard = ReturnType<typeof TwoFactorAuthenticationCard>;
+export default TwoFactorAuthenticationCard;

package/dist/ui/Verify2FAForm.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { LoaderCircle } from "@lucide/svelte";
+	import { Button } from "../components/ui/button/index.js";
+	import { Input } from "../components/ui/input/index.js";
+	import { Label } from "../components/ui/label/index.js";
+	import { m } from "../messages.js";
+	import { authUi } from "./context.js";
+	import { messageOf } from "../util/messageOf.js";
+
+	type Props = {
+		/** Gets the response data: during an MCP client authorisation it carries the next URL, which the auth client follows. */
+		onSuccess: (data?: { redirect?: boolean; url?: string } | null) => void;
+		onCancel: () => void;
+	};
+
+	let { onSuccess, onCancel }: Props = $props();
+	const { authClient } = authUi();
+
+	let totpCode = $state("");
+	let isVerifyingTotp = $state(false);
+	let errorMessage = $state("");
+
+	async function verify2FA(e: SubmitEvent) {
+		e.preventDefault();
+		if (!totpCode || totpCode.length < 6) {
+			errorMessage = m().invalidCode;
+			return;
+		}
+		isVerifyingTotp = true;
+		errorMessage = "";
+		try {
+			const res = await authClient.twoFactor.verifyTotp({ code: totpCode });
+			if (res.error) errorMessage = res.error.message || m().wrongCode;
+			else onSuccess(res.data as { redirect?: boolean; url?: string } | null);
+		} catch (err) {
+			errorMessage = messageOf(err, m().codeNotVerified);
+		} finally {
+			isVerifyingTotp = false;
+		}
+	}
+</script>
+
+<form onsubmit={verify2FA}>
+	<div class="grid gap-6">
+		<div class="space-y-2 text-center">
+			<Label class="text-sm font-medium">{m().twoFactorTitle}</Label>
+			<p class="text-xs text-muted-foreground">{m().twoFactorEnterCode}</p>
+		</div>
+		<div class="grid gap-2">
+			<Input id="totpCode" type="text" maxlength={6} bind:value={totpCode} placeholder="123456" required class="bg-muted/30 text-center text-lg font-bold tracking-widest" autocomplete="one-time-code" />
+		</div>
+		{#if errorMessage}
+			<div class="rounded-md text-center text-sm text-destructive">{errorMessage}</div>
+		{/if}
+		<div class="flex flex-col gap-2">
+			<Button type="submit" class="w-full cursor-pointer" disabled={isVerifyingTotp}>
+				{#if isVerifyingTotp}<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />{/if}
+				{m().confirm}
+			</Button>
+			<Button variant="outline" class="w-full cursor-pointer" onclick={onCancel}>{m().cancel}</Button>
+		</div>
+	</div>
+</form>

package/dist/ui/Verify2FAForm.svelte.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    /** Gets the response data: during an MCP client authorisation it carries the next URL, which the auth client follows. */
+    onSuccess: (data?: {
+        redirect?: boolean;
+        url?: string;
+    } | null) => void;
+    onCancel: () => void;
+};
+declare const Verify2FAForm: import("svelte").Component<Props, {}, "">;
+type Verify2FAForm = ReturnType<typeof Verify2FAForm>;
+export default Verify2FAForm;

package/dist/ui/context.d.ts

@@ -0,0 +1,93 @@
+import type { SignupMode } from "../types.js";
+type Outcome<T = unknown> = Promise<{
+    data?: T | null;
+    error?: {
+        message?: string;
+        code?: string;
+        status?: number;
+    } | null;
+}>;
+type FetchCallbacks = {
+    onRequest?: () => void;
+    onSuccess?: (ctx: {
+        data: unknown;
+    }) => void | Promise<void>;
+    onError?: (ctx: {
+        error: {
+            code?: string;
+            message?: string;
+            status?: number;
+        };
+    }) => void | Promise<void>;
+};
+/**
+ * The better-auth client as these components use it (method syntax, so the Product's client with its exact
+ * parameter types is assignable).
+ */
+export type AuthClientLike = {
+    signIn: {
+        email(body: {
+            email: string;
+            password: string;
+        }, callbacks?: FetchCallbacks): Outcome;
+        social(body: {
+            provider: string;
+            callbackURL?: string;
+            errorCallbackURL?: string;
+        }): Outcome;
+    };
+    signUp: {
+        email(body: {
+            email: string;
+            password: string;
+            name: string;
+            callbackURL?: string;
+        }, callbacks?: FetchCallbacks): Outcome;
+    };
+    signOut(options?: {
+        fetchOptions?: FetchCallbacks;
+    }): Outcome;
+    requestPasswordReset(body: {
+        email: string;
+        redirectTo?: string;
+    }): Outcome;
+    resetPassword(body: {
+        newPassword: string;
+        token: string;
+    }): Outcome;
+    twoFactor: {
+        verifyTotp(body: {
+            code: string;
+            trustDevice?: boolean;
+        }): Outcome;
+        enable(body: {
+            password: string;
+        }): Outcome<{
+            method?: string;
+            totpURI?: string;
+            backupCodes?: string[];
+        } | Record<string, unknown>>;
+        disable(body: {
+            password: string;
+        }): Outcome;
+    };
+    linkSocial(body: {
+        provider: string;
+        callbackURL?: string;
+    }): Outcome;
+    unlinkAccount(body: {
+        accountId: string;
+        providerId?: string;
+    }): Outcome;
+};
+export type AuthUi = {
+    authClient: AuthClientLike;
+    appName: string;
+    /** For dates, e.g. "de-CH". */
+    locale: string;
+    signupMode: SignupMode;
+};
+/** In the Product's root layout. */
+export declare function setAuthUi(ui: AuthUi): AuthUi;
+export declare function authUi(): AuthUi;
+export {};

package/dist/ui/context.js

@@ -0,0 +1,17 @@
+/**
+ * What the auth components need from the Product, set once in its root layout (`setAuthUi({ … })` during component
+ * init): the better-auth client (the Product builds it, see `src/lib/auth-client.ts`), the app's name, its locale and
+ * signup mode.
+ */
+import { getContext, setContext } from "svelte";
+const KEY = Symbol("vonall-auth-ui");
+/** In the Product's root layout. */
+export function setAuthUi(ui) {
+    return setContext(KEY, ui);
+}
+export function authUi() {
+    const ui = getContext(KEY);
+    if (!ui)
+        throw new Error("@vonall/auth: setAuthUi({ authClient, appName, locale, signupMode }) has not run in the root layout");
+    return ui;
+}

package/dist/ui/href.d.ts

@@ -0,0 +1,2 @@
+/** A link to one of the Product's paths, with SvelteKit's base path (this package has no route ids to type `resolve` against). */
+export declare function href(path: string): string;

package/dist/ui/href.js

@@ -0,0 +1,5 @@
+import { resolve } from "$app/paths";
+/** A link to one of the Product's paths, with SvelteKit's base path (this package has no route ids to type `resolve` against). */
+export function href(path) {
+    return resolve(path);
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,10 @@
+export { default as AdminView } from "./AdminView.svelte";
+export { authUi, setAuthUi, type AuthClientLike, type AuthUi } from "./context.js";
+export { default as EinladungErstellen } from "./EinladungErstellen.svelte";
+export { default as EinladungPage } from "./EinladungPage.svelte";
+export { default as LoginForm } from "./LoginForm.svelte";
+export { default as RegisterForm } from "./RegisterForm.svelte";
+export { default as ResetPasswordForm } from "./ResetPasswordForm.svelte";
+export { default as SettingsPage } from "./SettingsPage.svelte";
+export { default as SocialButton } from "./SocialButton.svelte";
+export { deletionTab, settingsTabs, visibleTabs, type SettingsTabDef } from "./tabs.js";

package/dist/ui/index.js

@@ -0,0 +1,11 @@
+// The pages and the settings of accounts, for a Product's routes; `setAuthUi({ … })` in its root layout first
+export { default as AdminView } from "./AdminView.svelte";
+export { authUi, setAuthUi } from "./context.js";
+export { default as EinladungErstellen } from "./EinladungErstellen.svelte";
+export { default as EinladungPage } from "./EinladungPage.svelte";
+export { default as LoginForm } from "./LoginForm.svelte";
+export { default as RegisterForm } from "./RegisterForm.svelte";
+export { default as ResetPasswordForm } from "./ResetPasswordForm.svelte";
+export { default as SettingsPage } from "./SettingsPage.svelte";
+export { default as SocialButton } from "./SocialButton.svelte";
+export { deletionTab, settingsTabs, visibleTabs } from "./tabs.js";

package/dist/ui/tabs.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from "svelte";
+/** One settings tab: the desktop tab bar and the mobile menu are built from the list. */
+export type SettingsTabDef = {
+    id: string;
+    label: string;
+    hint: string;
+    icon: Component<{
+        size?: number | string;
+        class?: string;
+    }>;
+};
+/** This package's tabs, in order, in the configured language; a Product adds its own (e.g. the AI assistants) through `SettingsPage`. */
+export declare function settingsTabs(): SettingsTabDef[];
+/** The deletion tab comes last, after a Product's own. */
+export declare function deletionTab(): SettingsTabDef;
+/** The tabs this user sees: Invitations only when the signup mode lets them invite (`einladen` in the page data). */
+export declare function visibleTabs(einladen: boolean, extra?: SettingsTabDef[]): SettingsTabDef[];

package/dist/ui/tabs.js

@@ -0,0 +1,21 @@
+import { Link as LinkIcon, Monitor, Shield, Trash2, User, UserPlus } from "@lucide/svelte";
+import { m } from "../messages.js";
+/** This package's tabs, in order, in the configured language; a Product adds its own (e.g. the AI assistants) through `SettingsPage`. */
+export function settingsTabs() {
+    const t = m();
+    return [
+        { id: "profile", label: t.tabProfile, hint: t.tabProfileHint, icon: User },
+        { id: "security", label: t.tabSecurity, hint: t.tabSecurityHint, icon: Shield },
+        { id: "sessions", label: t.tabSessions, hint: t.tabSessionsHint, icon: Monitor },
+        { id: "links", label: t.tabLinks, hint: t.tabLinksHint, icon: LinkIcon },
+        { id: "invitations", label: t.tabInvitations, hint: t.tabInvitationsHint, icon: UserPlus },
+    ];
+}
+/** The deletion tab comes last, after a Product's own. */
+export function deletionTab() {
+    return { id: "deletion", label: m().tabDeletion, hint: m().tabDeletionHint, icon: Trash2 };
+}
+/** The tabs this user sees: Invitations only when the signup mode lets them invite (`einladen` in the page data). */
+export function visibleTabs(einladen, extra = []) {
+    return [...settingsTabs().filter((tab) => tab.id !== "invitations" || einladen), ...extra, deletionTab()];
+}

package/dist/util/fresh.js

@@ -12,7 +12,7 @@ export function isSessionNotFresh(e) {
 }
 /** The login page that signs out a stale session and then returns to `redirectTo`. */
 export function reauthPath(redirectTo) {
-    return `/auth/login?error=${SESSION_NOT_FRESH.toLowerCase()}&redirectTo=${encodeURIComponent(redirectTo)}`;
+    return `/auth/login?error=${SESSION_NOT_FRESH.toLowerCase()}&redirectTo=${encodeURIComponent(redirectTo)}`; // the Product's loads prefix the base path
 }
 /** better-auth's own check: a `freshAge` of 0 turns it off. */
 export function isStale(createdAt, freshAgeSeconds, now = new Date()) {

package/dist/utils.d.ts

@@ -0,0 +1,12 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, "child"> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/dist/utils.js

@@ -0,0 +1,6 @@
+// Needs to be located in the lib directory to be used by shadcn
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonall/auth",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Accounts for a Web App Factory Product: better-auth with the hooks, the protected helpers, Einladungen, Konto, the auth pages and the settings; Admin as an option",
   "license": "MIT",
   "repository": {
@@ -44,20 +44,29 @@
     "./testing": {
       "types": "./dist/testing/index.d.ts",
       "default": "./dist/testing/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "svelte": "./dist/ui/index.js",
+      "default": "./dist/ui/index.js"
     }
   },
   "peerDependencies": {
+    "@node-rs/argon2": "^2.2.2",
     "@sveltejs/kit": "^3.1.0",
     "drizzle-orm": "^0.45.4",
     "neverthrow": "^8.2.0",
     "pg": "^8.23.1",
     "svelte": "^5.57.2",
     "zod": "^4.6.7",
-    "@node-rs/argon2": "^2.2.2"
+    "svelte-sonner": "^1.2.1",
+    "bits-ui": "^2.19.5",
+    "@lucide/svelte": "^1.22.0"
   },
   "devDependencies": {
     "@better-auth/mcp": "^1.7.12",
     "@better-auth/oauth-provider": "^1.7.12",
+    "@node-rs/argon2": "^2.2.2",
     "@sveltejs/kit": "^3.1.0",
     "@sveltejs/package": "^3.0.1",
     "@sveltejs/vite-plugin-svelte": "7.3.1",
@@ -73,7 +82,9 @@
     "vite": "8.3.4",
     "vitest": "^5.0.5",
     "zod": "^4.6.7",
-    "@node-rs/argon2": "^2.2.2"
+    "svelte-sonner": "^1.2.1",
+    "bits-ui": "^2.19.5",
+    "@lucide/svelte": "^1.22.0"
   },
   "imports": {
     "#lib": "./src/lib/index.js",
@@ -87,6 +98,10 @@
   },
   "dependencies": {
     "better-auth": "^1.7.12",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0",
+    "tailwind-variants": "^3.3.1",
+    "uqr": "^0.1.3",
     "@vonall/mail": "^0.1.1"
   },
   "scripts": {