appos 0.4.3-0 → 0.5.1-0

package/dist/exports/web/index.js

@@ -3,7 +3,7 @@ import i18n, { changeLanguage, createInstance, getFixedT, init, loadLanguages, l
 import { I18nextProvider, Trans, initReactI18next, initReactI18next as initReactI18next$1, useTranslation, useTranslation as useTranslation$1 } from "react-i18next";
 import { passkeyClient } from "@better-auth/passkey/client";
 import { ssoClient } from "@better-auth/sso/client";
-import { adminClient, anonymousClient, apiKeyClient, emailOTPClient, magicLinkClient, multiSessionClient, phoneNumberClient, twoFactorClient, usernameClient } from "better-auth/client/plugins";
+import { adminClient, anonymousClient, apiKeyClient, emailOTPClient, lastLoginMethodClient, magicLinkClient, multiSessionClient, phoneNumberClient, twoFactorClient, usernameClient } from "better-auth/client/plugins";
 import { createAuthClient } from "better-auth/react";
 import { Form, IDLE_FETCHER, Link, Link as Link$1, Links, Meta, NavLink, Outlet, Route, Scripts, ScrollRestoration, ServerRouter, href, isRouteErrorResponse, matchPath, matchRoutes, parsePath, redirect, redirect as redirect$1, redirectDocument, renderMatches, replace, resolvePath, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteError as useRouteError$1, useRouteLoaderData, useRoutes, useSearchParams, useSubmit, useViewTransitionState } from "react-router";
 import LanguageDetector from "i18next-browser-languagedetector";
@@ -13,22 +13,26 @@ import * as React from "react";
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import { z } from "zod";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { AlertCircleIcon, AlertTriangleIcon, ArrowLeftIcon, Building2Icon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, CircleIcon, EyeIcon, EyeOffIcon, FingerprintIcon, HomeIcon, InfoIcon, KeyIcon, Loader2Icon, LockIcon, MailIcon, MinusIcon, MoreHorizontalIcon, OctagonXIcon, PanelLeftIcon, PhoneIcon, PlusIcon, RefreshCwIcon, SearchIcon, SettingsIcon, ShieldCheckIcon, TriangleAlertIcon, UserIcon, XIcon } from "lucide-react";
+import { CaptchaFox } from "@captchafox/react";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
+import { Turnstile } from "@marsidev/react-turnstile";
+import { AlertCircleIcon, AlertTriangleIcon, ArrowLeftIcon, AtSignIcon, Building2Icon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, CircleIcon, EyeIcon, EyeOffIcon, FingerprintIcon, HomeIcon, InfoIcon, KeyIcon, Loader2Icon, LoaderCircleIcon, LockIcon, MailIcon, MinusIcon, MoreHorizontalIcon, OctagonXIcon, PanelLeftIcon, PhoneIcon, PlusIcon, RefreshCwIcon, SearchIcon, SettingsIcon, ShieldCheckIcon, TriangleAlertIcon, UserIcon, XIcon } from "lucide-react";
+import ReCAPTCHA from "react-google-recaptcha";
 import { Controller, FormProvider, useForm, useFormContext } from "react-hook-form";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
 import { Input as Input$1 } from "@base-ui/react/input";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import useEmblaCarousel from "embla-carousel-react";
 import * as RechartsPrimitive from "recharts";
@@ -77,10 +81,10 @@ function defineAuthFeatures(config) {
 		phoneOtp: config.methods?.phoneOtp !== void 0,
 		emailOtp: config.methods?.emailOtp !== void 0,
 		oauth: {
-			google: config.oauth?.google === true,
-			github: config.oauth?.github === true,
-			apple: config.oauth?.apple === true,
-			facebook: config.oauth?.facebook === true
+			google: config.methods?.oauth?.google === true,
+			github: config.methods?.oauth?.github === true,
+			apple: config.methods?.oauth?.apple === true,
+			facebook: config.methods?.oauth?.facebook === true
 		},
 		twoFactor: {
 			enabled: config.plugins?.twoFactor !== void 0,
@@ -91,7 +95,13 @@ function defineAuthFeatures(config) {
 		multiSession: config.plugins?.multiSession !== void 0,
 		username: config.plugins?.username !== void 0,
 		anonymous: config.plugins?.anonymous !== void 0,
-		sso: config.plugins?.sso !== void 0
+		sso: config.plugins?.sso !== void 0,
+		lastUsedMethod: config.plugins?.lastUsedMethod !== void 0,
+		captcha: {
+			enabled: config.plugins?.captcha !== void 0,
+			provider: config.plugins?.captcha?.provider ?? null,
+			siteKey: config.plugins?.captcha?.siteKey ?? null
+		}
 	};
 }
 /**
@@ -115,6 +125,7 @@ function defineAuthClient(opts) {
 	if (config.plugins?.anonymous) plugins.push(anonymousClient());
 	if (config.plugins?.multiSession) plugins.push(multiSessionClient());
 	if (config.plugins?.sso) plugins.push(ssoClient({ domainVerification: config.plugins.sso.domainVerification ? { enabled: true } : void 0 }));
+	if (config.plugins?.lastUsedMethod) plugins.push(lastLoginMethodClient());
 	return {
 		client: createAuthClient({
 			baseURL: (baseURL ?? config.baseURL ?? AUTH_BASE_URL) || void 0,
@@ -277,9 +288,70 @@ function useIsMobile(mobileBreakpoint = 768) {
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
+/**
+* Standard size variants used across UI components.
+*
+* @example
+* ```tsx
+* import { type Size, sizes } from "#src/web/lib/utils.ts";
+*
+* interface Props {
+*   size?: Size;
+* }
+*
+* // In stories
+* argTypes: {
+*   size: { control: "select", options: sizes },
+* }
+* ```
+*/
+const sizeSchema = z.enum([
+	"xs",
+	"sm",
+	"default",
+	"lg",
+	"xl"
+]);
+/** Available sizes for storybook controls. */
+const sizes = sizeSchema.options;
+/**
+* Standard orientation variants for layout components.
+*
+* @example
+* ```tsx
+* import { type Orientation, orientations } from "#src/web/lib/utils.ts";
+*
+* interface Props {
+*   orientation?: Orientation;
+* }
+* ```
+*/
+const orientationSchema = z.enum(["horizontal", "vertical"]);
+/** Available orientation keys for storybook controls. */
+const orientations = orientationSchema.options;
 
 //#endregion
 //#region src/web/ui/card.tsx
+/**
+* A container component for grouping related content and actions.
+*
+* Provides a visual boundary with optional header, content, and footer
+* sections. Supports multiple sizes for different layout needs.
+*
+* @example
+* ```tsx
+* <Card>
+*   <CardHeader>
+*     <CardTitle>Card Title</CardTitle>
+*     <CardDescription>Card description text.</CardDescription>
+*   </CardHeader>
+*   <CardContent>Main content goes here.</CardContent>
+*   <CardFooter>
+*     <Button>Action</Button>
+*   </CardFooter>
+* </Card>
+* ```
+*/
 function Card({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card",
@@ -288,6 +360,20 @@ function Card({ className, size = "default", ...props }) {
 		...props
 	});
 }
+/**
+* The header section of a Card containing title and description.
+*
+* Supports an optional CardAction slot for buttons or menus positioned
+* in the top-right corner.
+*
+* @example
+* ```tsx
+* <CardHeader>
+*   <CardTitle>Settings</CardTitle>
+*   <CardDescription>Manage your preferences.</CardDescription>
+* </CardHeader>
+* ```
+*/
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-header",
@@ -295,6 +381,17 @@ function CardHeader({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The title text displayed in a CardHeader.
+*
+* Renders with medium font weight and appropriate sizing based on the
+* parent Card's size prop.
+*
+* @example
+* ```tsx
+* <CardTitle>Account Settings</CardTitle>
+* ```
+*/
 function CardTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-title",
@@ -302,6 +399,16 @@ function CardTitle({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A secondary text element providing context for a Card.
+*
+* Displays in muted foreground color below the CardTitle.
+*
+* @example
+* ```tsx
+* <CardDescription>Manage your account settings and preferences.</CardDescription>
+* ```
+*/
 function CardDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-description",
@@ -309,6 +416,21 @@ function CardDescription({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A slot for action buttons positioned in the CardHeader.
+*
+* Automatically positioned in the top-right corner of the header.
+* Use for dropdown menus, edit buttons, or other quick actions.
+*
+* @example
+* ```tsx
+* <CardAction>
+*   <Button variant="ghost" size="icon-sm">
+*     <MoreHorizontalIcon />
+*   </Button>
+* </CardAction>
+* ```
+*/
 function CardAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-action",
@@ -316,6 +438,19 @@ function CardAction({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The main content area of a Card.
+*
+* Provides consistent horizontal padding. Use for the primary content
+* of the card such as forms, lists, or text.
+*
+* @example
+* ```tsx
+* <CardContent>
+*   <p>Your content goes here.</p>
+* </CardContent>
+* ```
+*/
 function CardContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-content",
@@ -323,6 +458,20 @@ function CardContent({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The footer section of a Card for actions or supplementary content.
+*
+* Typically contains action buttons aligned horizontally. Provides
+* consistent padding that adapts to the Card's size.
+*
+* @example
+* ```tsx
+* <CardFooter>
+*   <Button variant="outline">Cancel</Button>
+*   <Button>Save</Button>
+* </CardFooter>
+* ```
+*/
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-footer",
@@ -403,7 +552,7 @@ const brandVariants = cva("inline-flex items-center select-none shrink-0", {
 		size: {
 			xs: "gap-1",
 			sm: "gap-1",
-			md: "gap-1.5",
+			default: "gap-1.5",
 			lg: "gap-2",
 			xl: "gap-2"
 		},
@@ -413,7 +562,7 @@ const brandVariants = cva("inline-flex items-center select-none shrink-0", {
 		}
 	},
 	defaultVariants: {
-		size: "md",
+		size: "default",
 		orientation: "horizontal"
 	}
 });
@@ -421,21 +570,21 @@ const logoVariants = cva("shrink-0 flex items-center justify-center", {
 	variants: { size: {
 		xs: "size-6 [&>svg]:size-6",
 		sm: "size-7 [&>svg]:size-7",
-		md: "size-8 [&>svg]:size-8",
+		default: "size-8 [&>svg]:size-8",
 		lg: "size-10 [&>svg]:size-10",
 		xl: "size-12 [&>svg]:size-12"
 	} },
-	defaultVariants: { size: "md" }
+	defaultVariants: { size: "default" }
 });
 const nameVariants = cva("font-semibold tracking-tight text-foreground", {
 	variants: { size: {
 		xs: "text-sm",
 		sm: "text-base",
-		md: "text-lg",
+		default: "text-lg",
 		lg: "text-xl",
 		xl: "text-2xl"
 	} },
-	defaultVariants: { size: "md" }
+	defaultVariants: { size: "default" }
 });
 /**
 * Brand component for displaying app/company logo and name with proportionate sizing.
@@ -473,7 +622,7 @@ const nameVariants = cva("font-semibold tracking-tight text-foreground", {
 * </Link>
 * ```
 */
-function Brand({ className, logo, logoAlt, name, orientation = "horizontal", size = "md", to = "/" }) {
+function Brand({ className, logo, logoAlt, name, orientation = "horizontal", size = "default", to = "/" }) {
 	const renderLogo = () => {
 		if (!logo) return null;
 		if (typeof logo === "string") return /* @__PURE__ */ jsx("div", {
@@ -520,7 +669,7 @@ function Brand({ className, logo, logoAlt, name, orientation = "horizontal", siz
 * />
 * ```
 */
-function TrustSignals({ showSSL, showPrivacyLink, privacyUrl = "/privacy", showTermsLink, termsUrl = "/terms", complianceBadges, customBadges, securityMessage, className }) {
+function TrustSignals({ showSSL, showPrivacyLink, privacyUrl = "/legal/privacy-policy", showTermsLink, termsUrl = "/legal/terms", complianceBadges, customBadges, securityMessage, className }) {
 	const { t: t$1 } = useTranslation$1(["ui"]);
 	const hasLinks = showPrivacyLink || showTermsLink;
 	const hasBadges = complianceBadges && complianceBadges.length > 0 || customBadges && customBadges.length > 0;
@@ -695,7 +844,7 @@ function AuthLayout({ variant = "centered", children, brand, brandContent, trust
 				className: "flex justify-center",
 				children: /* @__PURE__ */ jsx(Brand, {
 					...brand,
-					size: brand.size ?? "md"
+					size: brand.size ?? "default"
 				})
 			}), children]
 		}), trustSignals && /* @__PURE__ */ jsx("div", {
@@ -869,8 +1018,330 @@ function useAuthContext() {
 	return context;
 }
 
+//#endregion
+//#region src/web/ui/auth/hooks.ts
+/**
+* Hook to access the Better Auth client, features, and config.
+*
+* Provides unified access to all auth-related context values:
+* - `client`: The Better Auth client for making auth API calls.
+* - `features`: Derived feature flags for conditional rendering based on enabled auth methods.
+* - `config`: The auth configuration values for forms and validation.
+*
+* @returns An object containing the auth client, features, and config.
+*
+* @example
+* ```tsx
+* // Access client for auth operations
+* const { client } = useAuth();
+* await client.signIn.email({ email, password });
+*
+* // Access features for conditional rendering
+* const { features } = useAuth();
+* if (features.oauth.google) {
+*   // Show Google login button
+* }
+*
+* // Access config for form validation
+* const { config } = useAuth();
+* const minPassword = config.methods?.emailPassword?.minPasswordLength ?? 8;
+* ```
+*/
+function useAuth() {
+	const { client, features, config } = useAuthContext();
+	return {
+		client,
+		features,
+		config
+	};
+}
+/**
+* Hook for managing auth form state.
+* Provides loading, error, and success state management.
+*
+* @example
+* ```tsx
+* const { state, execute, reset } = useAuthForm();
+*
+* const onSubmit = async (data) => {
+*   await execute(async () => {
+*     await client.signIn.email(data);
+*   });
+* };
+*
+* if (state.error) {
+*   // Show error message
+* }
+* ```
+*/
+function useAuthForm() {
+	const [state, setState] = useState({
+		isLoading: false,
+		error: null,
+		isSuccess: false
+	});
+	return {
+		state,
+		execute: useCallback(async (fn) => {
+			setState({
+				isLoading: true,
+				error: null,
+				isSuccess: false
+			});
+			try {
+				const result = await fn();
+				setState({
+					isLoading: false,
+					error: null,
+					isSuccess: true
+				});
+				return result;
+			} catch (err) {
+				setState({
+					isLoading: false,
+					error: err instanceof Error ? err.message : "An error occurred",
+					isSuccess: false
+				});
+				return;
+			}
+		}, []),
+		reset: useCallback(() => {
+			setState({
+				isLoading: false,
+				error: null,
+				isSuccess: false
+			});
+		}, []),
+		setError: useCallback((error) => {
+			setState((prev) => ({
+				...prev,
+				error,
+				isSuccess: false
+			}));
+		}, []),
+		isLoading: state.isLoading,
+		error: state.error,
+		isSuccess: state.isSuccess
+	};
+}
+/**
+* Hook to get and manage the last used login method.
+* Returns null values if the lastUsedMethod feature is not enabled.
+*
+* @returns An object with lastMethod, isLastMethod helper, and clearLastMethod function.
+*
+* @example
+* ```tsx
+* const { lastMethod, isLastMethod } = useLastUsedMethod();
+*
+* // Check if a specific method was last used
+* if (isLastMethod("google")) {
+*   // Highlight Google button
+* }
+*
+* // Display the last method
+* {lastMethod && <Badge>Last used: {lastMethod}</Badge>}
+* ```
+*/
+function useLastUsedMethod() {
+	const { client, features } = useAuthContext();
+	return useMemo(() => {
+		if (!features.lastUsedMethod) return {
+			lastMethod: null,
+			isLastMethod: () => false,
+			clearLastMethod: () => {}
+		};
+		const lastLoginMethodPlugin = client.lastLoginMethod;
+		if (!lastLoginMethodPlugin) return {
+			lastMethod: null,
+			isLastMethod: () => false,
+			clearLastMethod: () => {}
+		};
+		return {
+			lastMethod: lastLoginMethodPlugin.getLastUsedLoginMethod() ?? null,
+			isLastMethod: (method) => lastLoginMethodPlugin.isLastUsedLoginMethod(method),
+			clearLastMethod: () => lastLoginMethodPlugin.clearLastUsedLoginMethod()
+		};
+	}, [client, features.lastUsedMethod]);
+}
+/**
+* Hook to get captcha configuration for rendering widgets.
+*
+* Apps need to install and render the appropriate captcha widget based on the provider:
+* - `cloudflare-turnstile`: Use `@marsidev/react-turnstile`
+* - `google-recaptcha`: Use `react-google-recaptcha` (v2 or v3 based on server minScore)
+* - `hcaptcha`: Use `@hcaptcha/react-hcaptcha`
+* - `captchafox`: Use `@captchafox/react`
+*
+* Pass the captcha token to auth forms via the `captchaToken` prop.
+*
+* @returns Captcha configuration including provider and siteKey.
+*
+* @example
+* ```tsx
+* import { Turnstile } from "@marsidev/react-turnstile";
+*
+* function LoginPage() {
+*   const { enabled, provider, siteKey } = useCaptcha();
+*   const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+*
+*   return (
+*     <>
+*       {enabled && provider === "cloudflare-turnstile" && siteKey && (
+*         <Turnstile
+*           siteKey={siteKey}
+*           onSuccess={setCaptchaToken}
+*         />
+*       )}
+*       <LoginForm captchaToken={captchaToken} />
+*     </>
+*   );
+* }
+* ```
+*/
+function useCaptcha() {
+	const { features } = useAuthContext();
+	return features.captcha;
+}
+
+//#endregion
+//#region src/web/ui/auth/captcha-widget.tsx
+/**
+* Unified captcha widget that renders the appropriate provider based on config.
+* Supports Cloudflare Turnstile, Google reCAPTCHA, hCaptcha, and CaptchaFox.
+*
+* @example
+* ```tsx
+* const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+* const captchaResetRef = useRef<(() => void) | null>(null);
+*
+* <CaptchaWidget
+*   onSuccess={setCaptchaToken}
+*   onExpire={() => setCaptchaToken(null)}
+*   resetRef={captchaResetRef}
+* />
+*
+* // Reset on form error:
+* captchaResetRef.current?.();
+* ```
+*/
+function CaptchaWidget({ onSuccess, onError, onExpire, resetRef, className }) {
+	const { t: t$1 } = useTranslation$1(["ui"]);
+	const captcha = useCaptcha();
+	const turnstileRef = useRef(null);
+	const recaptchaRef = useRef(null);
+	const hcaptchaRef = useRef(null);
+	const captchafoxRef = useRef(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const handleReset = useCallback(() => {
+		turnstileRef.current?.reset();
+		recaptchaRef.current?.reset();
+		hcaptchaRef.current?.resetCaptcha();
+		captchafoxRef.current?.reset();
+	}, []);
+	const handleWidgetLoad = useCallback(() => {
+		setIsLoading(false);
+	}, []);
+	if (resetRef) resetRef.current = handleReset;
+	const handleSuccess = useCallback((token) => {
+		onSuccess(token);
+	}, [onSuccess]);
+	const handleError = useCallback(() => {
+		onError?.();
+	}, [onError]);
+	const handleExpire = useCallback(() => {
+		onExpire?.();
+	}, [onExpire]);
+	if (!captcha.enabled || !captcha.siteKey) return null;
+	const loadingIndicator = isLoading && /* @__PURE__ */ jsxs("div", {
+		className: "flex h-16.25 w-full items-center justify-center rounded-md border border-border bg-muted/30",
+		children: [/* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-5 animate-spin text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+			className: "ml-2 text-sm text-muted-foreground",
+			children: t$1("ui:captcha.loading")
+		})]
+	});
+	switch (captcha.provider) {
+		case "cloudflare-turnstile": return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col gap-2", className),
+			children: [loadingIndicator, /* @__PURE__ */ jsx("div", {
+				className: cn(isLoading && "sr-only"),
+				children: /* @__PURE__ */ jsx(Turnstile, {
+					ref: turnstileRef,
+					siteKey: captcha.siteKey,
+					onSuccess: handleSuccess,
+					onError: handleError,
+					onExpire: handleExpire,
+					onWidgetLoad: handleWidgetLoad,
+					options: {
+						theme: "auto",
+						size: "flexible"
+					}
+				})
+			})]
+		});
+		case "google-recaptcha": return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col gap-2", className),
+			children: [loadingIndicator, /* @__PURE__ */ jsx("div", {
+				className: cn(isLoading && "sr-only"),
+				children: /* @__PURE__ */ jsx(ReCAPTCHA, {
+					ref: recaptchaRef,
+					sitekey: captcha.siteKey,
+					onChange: (token) => {
+						if (token) handleSuccess(token);
+						else handleExpire();
+					},
+					onErrored: handleError,
+					onExpired: handleExpire,
+					asyncScriptOnLoad: handleWidgetLoad
+				})
+			})]
+		});
+		case "hcaptcha": return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col gap-2", className),
+			children: [loadingIndicator, /* @__PURE__ */ jsx("div", {
+				className: cn(isLoading && "sr-only"),
+				children: /* @__PURE__ */ jsx(HCaptcha, {
+					ref: hcaptchaRef,
+					sitekey: captcha.siteKey,
+					onVerify: handleSuccess,
+					onError: handleError,
+					onExpire: handleExpire,
+					onLoad: handleWidgetLoad
+				})
+			})]
+		});
+		case "captchafox": return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col gap-2", className),
+			children: [loadingIndicator, /* @__PURE__ */ jsx("div", {
+				className: cn(isLoading && "sr-only"),
+				children: /* @__PURE__ */ jsx(CaptchaFox, {
+					ref: captchafoxRef,
+					sitekey: captcha.siteKey,
+					onVerify: handleSuccess,
+					onError: handleError,
+					onExpire: handleExpire,
+					onLoad: handleWidgetLoad
+				})
+			})]
+		});
+		default: return null;
+	}
+}
+
 //#endregion
 //#region src/web/ui/label.tsx
+/**
+* A text label associated with a form control.
+*
+* Provides accessible labeling for inputs. Automatically handles disabled
+* states when used with peer or group patterns.
+*
+* @example
+* ```tsx
+* <Label htmlFor="email">Email Address</Label>
+* <Input id="email" type="email" />
+* ```
+*/
 function Label({ className, ...props }) {
 	return /* @__PURE__ */ jsx("label", {
 		"data-slot": "label",
@@ -881,6 +1352,18 @@ function Label({ className, ...props }) {
 
 //#endregion
 //#region src/web/ui/separator.tsx
+/**
+* A visual divider to separate content sections.
+*
+* Renders as a horizontal or vertical line depending on orientation.
+* Use to create visual boundaries between related content groups.
+*
+* @example
+* ```tsx
+* <Separator />
+* <Separator orientation="vertical" className="h-4" />
+* ```
+*/
 function Separator({ className, orientation = "horizontal", ...props }) {
 	return /* @__PURE__ */ jsx(Separator$1, {
 		"data-slot": "separator",
@@ -910,7 +1393,7 @@ function FieldLegend({ className, variant = "legend", ...props }) {
 function FieldGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "field-group",
-		className: cn("gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col", className),
+		className: cn("gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col", className),
 		...props
 	});
 }
@@ -941,7 +1424,7 @@ function FieldContent({ className, ...props }) {
 function FieldLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Label, {
 		"data-slot": "field-label",
-		className: cn("has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit leading-snug", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className),
+		className: cn("has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit leading-snug", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className),
 		...props
 	});
 }
@@ -955,7 +1438,7 @@ function FieldTitle({ className, ...props }) {
 function FieldDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "field-description",
-		className: cn("text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
+		className: cn("text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance", "last:mt-0 nth-last-2:-mt-1", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
 		...props
 	});
 }
@@ -998,8 +1481,19 @@ function FieldError({ className, children, errors, showIcon = true, ...props })
 
 //#endregion
 //#region src/web/ui/input.tsx
-function Input({ className, type, ...props }) {
-	return /* @__PURE__ */ jsx(Input$1, {
+/**
+* A text input field for user data entry.
+*
+* Supports all native input types including text, email, password, and file.
+* Includes focus and validation states with appropriate visual feedback.
+*
+* @example
+* ```tsx
+* <Input type="email" placeholder="Enter your email" />
+* ```
+*/
+function Input({ className, type, ...props }) {
+	return /* @__PURE__ */ jsx(Input$1, {
 		type,
 		"data-slot": "input",
 		className: cn("dark:bg-input/30 border-input hover:border-ring/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] focus-visible:shadow-[0_0_8px_rgba(0,0,0,0.04)] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", className),
@@ -1061,6 +1555,7 @@ function EmailInput({ name = "email", label, hideLabel = false, showIcon = false
 
 //#endregion
 //#region src/web/ui/alert.tsx
+/** Alert variant styles for different semantic meanings. */
 const alertVariants = cva("grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", {
 	variants: { variant: {
 		default: "bg-card text-card-foreground border-border",
@@ -1071,6 +1566,22 @@ const alertVariants = cva("grid gap-0.5 rounded-lg border px-4 py-3 text-left te
 	} },
 	defaultVariants: { variant: "default" }
 });
+/**
+* A contextual feedback message for user actions or system status.
+*
+* Supports semantic variants (info, success, warning, destructive) with
+* appropriate color coding. Use with AlertTitle and AlertDescription for
+* structured content, and AlertAction for dismissal or action buttons.
+*
+* @example
+* ```tsx
+* <Alert variant="info">
+*   <InfoIcon />
+*   <AlertTitle>Heads up!</AlertTitle>
+*   <AlertDescription>This is an informational alert.</AlertDescription>
+* </Alert>
+* ```
+*/
 function Alert({ className, variant, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert",
@@ -1079,6 +1590,17 @@ function Alert({ className, variant, ...props }) {
 		...props
 	});
 }
+/**
+* The title heading for an Alert component.
+*
+* Displays prominently with medium font weight. Automatically positioned
+* after any icon in the alert.
+*
+* @example
+* ```tsx
+* <AlertTitle>Success!</AlertTitle>
+* ```
+*/
 function AlertTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-title",
@@ -1086,6 +1608,19 @@ function AlertTitle({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The descriptive text content for an Alert component.
+*
+* Displays in muted foreground color with proper text wrapping. Supports
+* multiple paragraphs with automatic spacing.
+*
+* @example
+* ```tsx
+* <AlertDescription>
+*   Your changes have been saved successfully.
+* </AlertDescription>
+* ```
+*/
 function AlertDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-description",
@@ -1093,6 +1628,21 @@ function AlertDescription({ className, ...props }) {
 		...props
 	});
 }
+/**
+* An action slot positioned in the top-right corner of an Alert.
+*
+* Use for dismiss buttons or quick actions. Absolutely positioned to not
+* interfere with the alert content flow.
+*
+* @example
+* ```tsx
+* <AlertAction>
+*   <Button variant="ghost" size="icon-sm" aria-label="Dismiss">
+*     <XIcon />
+*   </Button>
+* </AlertAction>
+* ```
+*/
 function AlertAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-action",
@@ -1103,32 +1653,67 @@ function AlertAction({ className, ...props }) {
 
 //#endregion
 //#region src/web/ui/button.tsx
+/** Button variant styles. */
+const variants = {
+	default: "bg-primary text-primary-foreground hover:bg-primary/80",
+	outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs",
+	secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+	ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+	destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+	link: "text-primary underline-offset-4 hover:underline"
+};
+/** Button size styles. */
+const sizes$1 = {
+	default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+	xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+	sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+	lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+	icon: "size-9",
+	"icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+	"icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+	"icon-lg": "size-10"
+};
 const buttonVariants = cva("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none", {
 	variants: {
-		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/80",
-			outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-			ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-			destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
-			link: "text-primary underline-offset-4 hover:underline"
-		},
-		size: {
-			default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-			xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-			sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
-			lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-			icon: "size-9",
-			"icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
-			"icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
-			"icon-lg": "size-10"
-		}
+		variant: variants,
+		size: sizes$1
 	},
 	defaultVariants: {
 		variant: "default",
 		size: "default"
 	}
 });
+/** Available button variant keys. */
+const buttonVariantKeys = Object.keys(variants);
+/** Available button size keys. */
+const buttonSizeKeys = Object.keys(sizes$1);
+/**
+* A versatile button component with multiple visual variants and sizes.
+*
+* Supports different visual styles through the `variant` prop (default, secondary,
+* outline, ghost, destructive, link) and various sizes through the `size` prop.
+* Icon-only buttons should use `size="icon"` variants with an `aria-label` for accessibility.
+*
+* @example
+* ```tsx
+* // Default button
+* <Button>Click me</Button>
+*
+* // With variant and size
+* <Button variant="destructive" size="sm">Delete</Button>
+*
+* // With inline icon
+* <Button>
+*   <IconPlus data-icon="inline-start" />
+*   Create
+* </Button>
+*
+* // Icon-only button (requires aria-label)
+* <Button size="icon" variant="ghost" aria-label="Settings">
+*   <IconSettings />
+* </Button>
+* ```
+*/
 function Button({ className, variant = "default", size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Button$1, {
 		"data-slot": "button",
@@ -1143,120 +1728,25 @@ function Button({ className, variant = "default", size = "default", ...props })
 
 //#endregion
 //#region src/web/ui/spinner.tsx
-function Spinner({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Loader2Icon, {
-		role: "status",
-		"aria-label": "Loading",
-		className: cn("size-4 animate-spin", className),
-		...props
-	});
-}
-
-//#endregion
-//#region src/web/ui/auth/hooks.ts
 /**
-* Hook to access the Better Auth client, features, and config.
-*
-* Provides unified access to all auth-related context values:
-* - `client`: The Better Auth client for making auth API calls.
-* - `features`: Derived feature flags for conditional rendering based on enabled auth methods.
-* - `config`: The auth configuration values for forms and validation.
-*
-* @returns An object containing the auth client, features, and config.
-*
-* @example
-* ```tsx
-* // Access client for auth operations
-* const { client } = useAuth();
-* await client.signIn.email({ email, password });
-*
-* // Access features for conditional rendering
-* const { features } = useAuth();
-* if (features.oauth.google) {
-*   // Show Google login button
-* }
+* A spinning loading indicator.
 *
-* // Access config for form validation
-* const { config } = useAuth();
-* const minPassword = config.methods?.emailPassword?.minPasswordLength ?? 8;
-* ```
-*/
-function useAuth() {
-	const { client, features, config } = useAuthContext();
-	return {
-		client,
-		features,
-		config
-	};
-}
-/**
-* Hook for managing auth form state.
-* Provides loading, error, and success state management.
+* Use to indicate async operations in progress. Includes accessible
+* status role and label for screen readers.
 *
 * @example
 * ```tsx
-* const { state, execute, reset } = useAuthForm();
-*
-* const onSubmit = async (data) => {
-*   await execute(async () => {
-*     await client.signIn.email(data);
-*   });
-* };
-*
-* if (state.error) {
-*   // Show error message
-* }
+* <Spinner />
+* <Button disabled><Spinner className="mr-2" />Loading...</Button>
 * ```
 */
-function useAuthForm() {
-	const [state, setState] = useState({
-		isLoading: false,
-		error: null,
-		isSuccess: false
+function Spinner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		role: "status",
+		"aria-label": "Loading",
+		className: cn("size-4 animate-spin", className),
+		...props
 	});
-	return {
-		state,
-		execute: useCallback(async (fn) => {
-			setState({
-				isLoading: true,
-				error: null,
-				isSuccess: false
-			});
-			try {
-				const result = await fn();
-				setState({
-					isLoading: false,
-					error: null,
-					isSuccess: true
-				});
-				return result;
-			} catch (err) {
-				setState({
-					isLoading: false,
-					error: err instanceof Error ? err.message : "An error occurred",
-					isSuccess: false
-				});
-				return;
-			}
-		}, []),
-		reset: useCallback(() => {
-			setState({
-				isLoading: false,
-				error: null,
-				isSuccess: false
-			});
-		}, []),
-		setError: useCallback((error) => {
-			setState((prev) => ({
-				...prev,
-				error,
-				isSuccess: false
-			}));
-		}, []),
-		isLoading: state.isLoading,
-		error: state.error,
-		isSuccess: state.isSuccess
-	};
 }
 
 //#endregion
@@ -1418,6 +1908,9 @@ function defineEmailOtpSchema() {
 function EmailOTPForm({ callbackURL, className, title, description, logo, onSuccess }) {
 	const { t: t$1 } = useTranslation$1(["ui"]);
 	const { client, config, features } = useAuth();
+	const captcha = useCaptcha();
+	const [captchaToken, setCaptchaToken] = useState(null);
+	const captchaResetRef = useRef(null);
 	const { isLoading, error, execute, setError } = useAuthForm();
 	const [stage, setStage] = useState("email");
 	const [pendingEmail, setPendingEmail] = useState(null);
@@ -1458,16 +1951,21 @@ function EmailOTPForm({ callbackURL, className, title, description, logo, onSucc
 		}, 1e3);
 	};
 	const handleEmailSubmit = async (data) => {
-		await execute(async () => {
-			const result = await client.emailOtp.sendVerificationOtp({
+		if (!await execute(async () => {
+			const response = await client.emailOtp.sendVerificationOtp({
 				email: data.email,
-				type: "sign-in"
+				type: "sign-in",
+				fetchOptions: captchaToken ? { headers: { "x-captcha-response": captchaToken } } : void 0
 			});
-			if (result.error) throw new Error(result.error.message || t$1("ui:auth.errors.generic"));
+			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.generic"));
 			setPendingEmail(data.email);
 			setStage("verify");
 			startCountdown();
-		});
+			return response;
+		})) {
+			setCaptchaToken(null);
+			captchaResetRef.current?.();
+		}
 	};
 	const handleOtpSubmit = async (data) => {
 		if (!pendingEmail) return;
@@ -1482,14 +1980,20 @@ function EmailOTPForm({ callbackURL, className, title, description, logo, onSucc
 	};
 	const handleResend = async () => {
 		if (!pendingEmail) return;
-		if (await execute(async () => {
+		const result = await execute(async () => {
 			const response = await client.emailOtp.sendVerificationOtp({
 				email: pendingEmail,
-				type: "sign-in"
+				type: "sign-in",
+				fetchOptions: captchaToken ? { headers: { "x-captcha-response": captchaToken } } : void 0
 			});
 			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.generic"));
 			return response;
-		})) startCountdown();
+		});
+		if (!result) {
+			setCaptchaToken(null);
+			captchaResetRef.current?.();
+		}
+		if (result) startCountdown();
 	};
 	const handleBack = () => {
 		setError(null);
@@ -1566,10 +2070,16 @@ function EmailOTPForm({ callbackURL, className, title, description, logo, onSucc
 						label: t$1("ui:auth.login.email"),
 						showIcon: true
 					}),
+					captcha.enabled && /* @__PURE__ */ jsx(CaptchaWidget, {
+						onSuccess: setCaptchaToken,
+						onExpire: () => setCaptchaToken(null),
+						onError: () => setCaptchaToken(null),
+						resetRef: captchaResetRef
+					}),
 					/* @__PURE__ */ jsx(Button, {
 						type: "submit",
 						className: "h-10 w-full font-medium",
-						disabled: isLoading,
+						disabled: isLoading || captcha.enabled && !captchaToken,
 						children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }), t$1("ui:auth.emailOtp.sending")] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MailIcon, { className: "mr-2 size-4" }), t$1("ui:auth.emailOtp.send")] })
 					})
 				]
@@ -1590,10 +2100,10 @@ function EmailOTPForm({ callbackURL, className, title, description, logo, onSucc
 * <AnimatedCheck size="lg" color="green" />
 *
 * // Primary color variant
-* <AnimatedCheck size="md" color="primary" />
+* <AnimatedCheck size="default" color="primary" />
 * ```
 */
-function AnimatedCheck({ className, size = "md", color = "green" }) {
+function AnimatedCheck({ className, size = "default", color = "green" }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: `
 				@keyframes ac-scale-in {
 					from { transform: scale(0); opacity: 0; }
@@ -1604,9 +2114,11 @@ function AnimatedCheck({ className, size = "md", color = "green" }) {
 				}
 			` }), /* @__PURE__ */ jsxs("svg", {
 		className: cn({
+			xs: "size-6",
 			sm: "size-8",
-			md: "size-12",
-			lg: "size-16"
+			default: "size-12",
+			lg: "size-16",
+			xl: "size-20"
 		}[size], {
 			green: "text-green-600 dark:text-green-400",
 			primary: "text-primary"
@@ -1667,6 +2179,9 @@ function defineForgotPasswordSchema() {
 function ForgotPasswordForm({ callbackURL, className, loginLink = "/login", title, description, logo, onSuccess }) {
 	const { t: t$1 } = useTranslation$1(["ui"]);
 	const { client } = useAuth();
+	const captcha = useCaptcha();
+	const [captchaToken, setCaptchaToken] = useState(null);
+	const captchaResetRef = useRef(null);
 	const { isLoading, error, isSuccess, execute, reset: resetForm } = useAuthForm();
 	const form = useForm({
 		resolver: zodResolver(defineForgotPasswordSchema()),
@@ -1675,14 +2190,20 @@ function ForgotPasswordForm({ callbackURL, className, loginLink = "/login", titl
 	});
 	const submittedEmail = form.getValues("email");
 	const onSubmit = async (data) => {
-		if (await execute(async () => {
+		const result = await execute(async () => {
 			const response = await client.requestPasswordReset({
 				email: data.email,
-				redirectTo: callbackURL
+				redirectTo: callbackURL,
+				fetchOptions: captchaToken ? { headers: { "x-captcha-response": captchaToken } } : void 0
 			});
 			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.generic"));
 			return response;
-		})) onSuccess?.();
+		});
+		if (!result) {
+			setCaptchaToken(null);
+			captchaResetRef.current?.();
+		}
+		if (result) onSuccess?.();
 	};
 	const handleTryAgain = () => {
 		resetForm();
@@ -1750,10 +2271,16 @@ function ForgotPasswordForm({ callbackURL, className, loginLink = "/login", titl
 						label: t$1("ui:auth.forgotPassword.email"),
 						showIcon: true
 					}),
+					captcha.enabled && /* @__PURE__ */ jsx(CaptchaWidget, {
+						onSuccess: setCaptchaToken,
+						onExpire: () => setCaptchaToken(null),
+						onError: () => setCaptchaToken(null),
+						resetRef: captchaResetRef
+					}),
 					/* @__PURE__ */ jsx(Button, {
 						type: "submit",
 						className: "h-10 w-full font-medium",
-						disabled: isLoading,
+						disabled: isLoading || captcha.enabled && !captchaToken,
 						children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }), t$1("ui:auth.forgotPassword.submitting")] }) : t$1("ui:auth.forgotPassword.submit")
 					})
 				]
@@ -1764,6 +2291,18 @@ function ForgotPasswordForm({ callbackURL, className, loginLink = "/login", titl
 
 //#endregion
 //#region src/web/ui/checkbox.tsx
+/**
+* A control for toggling a boolean value on or off.
+*
+* Use for binary choices in forms like agreeing to terms, enabling features,
+* or selecting items. Supports validation states and disabled mode.
+*
+* @example
+* ```tsx
+* <Checkbox id="terms" />
+* <Label htmlFor="terms">Accept terms and conditions</Label>
+* ```
+*/
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		"data-slot": "checkbox",
@@ -1857,7 +2396,10 @@ function defineMagicLinkSchema() {
 function MagicLinkForm({ callbackURL, className, successMessage, onSuccess }) {
 	const { t: t$1 } = useTranslation$1(["ui"]);
 	const { client, features } = useAuth();
-	const { isLoading, error, isSuccess, execute, setError } = useAuthForm();
+	const captcha = useCaptcha();
+	const [captchaToken, setCaptchaToken] = useState(null);
+	const captchaResetRef = useRef(null);
+	const { isLoading, error, isSuccess, execute, reset } = useAuthForm();
 	const [sentEmail, setSentEmail] = useState(null);
 	const resolvedSuccessMessage = successMessage ?? t$1("ui:auth.magicLink.successDescription", { email: sentEmail });
 	const form = useForm({
@@ -1866,21 +2408,40 @@ function MagicLinkForm({ callbackURL, className, successMessage, onSuccess }) {
 		mode: "onBlur"
 	});
 	if (!features.magicLink) return null;
+	const handleTryDifferentEmail = () => {
+		reset();
+		form.reset();
+		setSentEmail(null);
+	};
 	const onSubmit = async (data) => {
-		if (await execute(async () => {
+		const result = await execute(async () => {
 			const response = await client.signIn.magicLink({
 				email: data.email,
-				callbackURL
+				callbackURL,
+				fetchOptions: captchaToken ? { headers: { "x-captcha-response": captchaToken } } : void 0
 			});
 			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.generic"));
 			setSentEmail(data.email);
 			return response;
-		})) onSuccess?.();
+		});
+		if (!result) {
+			setCaptchaToken(null);
+			captchaResetRef.current?.();
+		}
+		if (result) onSuccess?.();
 	};
-	if (isSuccess && sentEmail) return /* @__PURE__ */ jsxs(Alert, {
-		variant: "success",
-		className,
-		children: [/* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4" }), /* @__PURE__ */ jsx(AlertDescription, { children: resolvedSuccessMessage })]
+	if (isSuccess && sentEmail) return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-4", className),
+		children: [/* @__PURE__ */ jsxs(Alert, {
+			variant: "success",
+			children: [/* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4" }), /* @__PURE__ */ jsx(AlertDescription, { children: resolvedSuccessMessage })]
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			className: "h-10 w-full font-medium",
+			onClick: handleTryDifferentEmail,
+			children: t$1("ui:auth.magicLink.tryDifferentEmail")
+		})]
 	});
 	return /* @__PURE__ */ jsx(FormProvider, {
 		...form,
@@ -1896,10 +2457,16 @@ function MagicLinkForm({ callbackURL, className, successMessage, onSuccess }) {
 					name: "email",
 					label: t$1("ui:auth.login.email")
 				}),
+				captcha.enabled && /* @__PURE__ */ jsx(CaptchaWidget, {
+					onSuccess: setCaptchaToken,
+					onExpire: () => setCaptchaToken(null),
+					onError: () => setCaptchaToken(null),
+					resetRef: captchaResetRef
+				}),
 				/* @__PURE__ */ jsx(Button, {
 					type: "submit",
 					className: "h-10 w-full font-medium",
-					disabled: isLoading,
+					disabled: isLoading || captcha.enabled && !captchaToken,
 					children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }), t$1("ui:auth.magicLink.submitting")] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MailIcon, { className: "mr-2 size-4" }), t$1("ui:auth.magicLink.submit")] })
 				})
 			]
@@ -1907,6 +2474,49 @@ function MagicLinkForm({ callbackURL, className, successMessage, onSuccess }) {
 	});
 }
 
+//#endregion
+//#region src/web/ui/badge.tsx
+/** Badge variant styles for different visual appearances. */
+const badgeVariants = cva("h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge", {
+	variants: { variant: {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline"
+	} },
+	defaultVariants: { variant: "default" }
+});
+/**
+* A small label component for highlighting status, categories, or counts.
+*
+* Supports multiple visual variants and can render as different elements
+* using the `render` prop. Commonly used for tags, status indicators,
+* and notification counts.
+*
+* @example
+* ```tsx
+* <Badge>New</Badge>
+* <Badge variant="secondary">Draft</Badge>
+* <Badge variant="destructive">Error</Badge>
+* ```
+*/
+function Badge({ className, variant = "default", render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({ className: cn(badgeVariants({
+			className,
+			variant
+		})) }, props),
+		render,
+		state: {
+			slot: "badge",
+			variant
+		}
+	});
+}
+
 //#endregion
 //#region src/web/ui/auth/passkey-button.tsx
 /**
@@ -1923,8 +2533,10 @@ function MagicLinkForm({ callbackURL, className, successMessage, onSuccess }) {
 function PasskeyButton({ autoFill = true, className, disabled, label, onSuccess, onError }) {
 	const { t: t$1 } = useTranslation$1(["ui"]);
 	const { client, features } = useAuth();
+	const { isLastMethod } = useLastUsedMethod();
 	const [isLoading, setIsLoading] = useState(false);
 	if (!features.passkey) return null;
+	const isLast = isLastMethod("passkey");
 	const handleSignIn = async () => {
 		setIsLoading(true);
 		try {
@@ -1937,30 +2549,58 @@ function PasskeyButton({ autoFill = true, className, disabled, label, onSuccess,
 		}
 	};
 	return /* @__PURE__ */ jsxs(Button, {
-		variant: "outline",
+		variant: isLast ? "default" : "outline",
 		type: "button",
 		disabled: disabled || isLoading,
 		onClick: handleSignIn,
 		className: cn("h-10 w-full gap-3 font-medium transition-all hover:shadow-sm", className),
-		children: [isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "size-5" }) : /* @__PURE__ */ jsx(FingerprintIcon, { className: "size-5 text-primary" }), /* @__PURE__ */ jsx("span", { children: label || t$1("ui:auth.passkey.signIn") })]
+		children: [
+			isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "size-5" }) : /* @__PURE__ */ jsx(FingerprintIcon, { className: cn("size-5", !isLast && "text-primary") }),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 text-left",
+				children: label || t$1("ui:auth.passkey.signIn")
+			}),
+			isLast && /* @__PURE__ */ jsx(Badge, {
+				variant: "secondary",
+				className: "ml-1 text-xs",
+				children: t$1("ui:auth.common.lastUsed")
+			})
+		]
 	});
 }
 
 //#endregion
 //#region src/web/ui/auth/password-input.tsx
 /**
-* Calculates password strength based on common criteria.
-* Returns a strength level and score for the visual indicator.
+* Calculates password strength based on length thresholds relative to minLength
+* and character variety criteria. Uses proportional thresholds so strength
+* calculation scales with the configured minimum password length.
+*
+* @param password - The password to evaluate.
+* @param minLength - The minimum required password length from config.
+* @returns Object with strength level (weak/fair/good/strong) and numeric score (0-100).
+*
+* @example
+* ```typescript
+* // With default minLength of 8
+* calculatePasswordStrength("short", 8);      // { strength: "weak", score: 25 }
+* calculatePasswordStrength("LongP@ss123", 8); // { strength: "strong", score: 100 }
+*
+* // With custom minLength of 12
+* calculatePasswordStrength("Password123!", 12); // { strength: "fair", score: 50 }
+* ```
 */
-function calculatePasswordStrength(password) {
+function calculatePasswordStrength(password, minLength) {
 	if (!password) return {
 		strength: "weak",
 		score: 0
 	};
 	let score = 0;
-	if (password.length >= 8) score += 1;
-	if (password.length >= 12) score += 1;
-	if (password.length >= 16) score += 1;
+	const mediumLength = Math.floor(minLength * 1.5);
+	const longLength = minLength * 2;
+	if (password.length >= minLength) score += 1;
+	if (password.length >= mediumLength) score += 1;
+	if (password.length >= longLength) score += 1;
 	if (/[a-z]/.test(password)) score += 1;
 	if (/[A-Z]/.test(password)) score += 1;
 	if (/[0-9]/.test(password)) score += 1;
@@ -2011,7 +2651,7 @@ function PasswordInput({ name = "password", label, hideLabel = false, showToggle
 	const error = form?.formState?.errors?.[name];
 	const hasError = !!error;
 	const passwordValue = form?.watch(name) || "";
-	const { strength, score } = calculatePasswordStrength(passwordValue);
+	const { strength, score } = calculatePasswordStrength(passwordValue, minLength);
 	const strengthConfig = {
 		weak: {
 			label: t$1("ui:auth.password.weak"),
@@ -2194,9 +2834,16 @@ const PROVIDER_CONFIG = {
 function SocialButtons({ callbackURL, className, disabled, layout = "stack", onSuccess }) {
 	const { t: t$1 } = useTranslation$1(["ui"]);
 	const { client, features } = useAuth();
+	const { isLastMethod } = useLastUsedMethod();
 	const [loadingProvider, setLoadingProvider] = useState(null);
-	const enabledProviders = Object.keys(PROVIDER_CONFIG).filter((provider) => features.oauth[provider]);
-	if (enabledProviders.length === 0) return null;
+	const sortedProviders = useMemo(() => {
+		return [...Object.keys(PROVIDER_CONFIG).filter((provider) => features.oauth[provider])].sort((a, b) => {
+			if (isLastMethod(a)) return -1;
+			if (isLastMethod(b)) return 1;
+			return 0;
+		});
+	}, [features.oauth, isLastMethod]);
+	if (sortedProviders.length === 0) return null;
 	const handleSignIn = async (provider) => {
 		setLoadingProvider(provider);
 		try {
@@ -2210,17 +2857,29 @@ function SocialButtons({ callbackURL, className, disabled, layout = "stack", onS
 		}
 	};
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("grid gap-3", layout === "grid" && enabledProviders.length > 1 ? "grid-cols-2" : "grid-cols-1", className),
-		children: enabledProviders.map((provider) => {
+		className: cn("grid gap-3", layout === "grid" && sortedProviders.length > 1 ? "grid-cols-2" : "grid-cols-1", className),
+		children: sortedProviders.map((provider) => {
 			const config = PROVIDER_CONFIG[provider];
 			const isLoading = loadingProvider === provider;
+			const isLast = isLastMethod(provider);
 			return /* @__PURE__ */ jsxs(Button, {
-				variant: "outline",
+				variant: isLast ? "default" : "outline",
 				type: "button",
 				disabled: disabled || loadingProvider !== null,
 				onClick: () => handleSignIn(provider),
 				className: cn("h-10 w-full gap-3 font-medium transition-all hover:shadow-sm", config.hoverClass),
-				children: [isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "size-5" }) : config.icon, /* @__PURE__ */ jsx("span", { children: layout === "grid" && enabledProviders.length > 1 ? config.label : t$1("ui:auth.common.continueWith", { provider: config.label }) })]
+				children: [
+					isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "size-5" }) : config.icon,
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1 text-left",
+						children: layout === "grid" && sortedProviders.length > 1 ? config.label : t$1("ui:auth.common.continueWith", { provider: config.label })
+					}),
+					isLast && /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "ml-1 text-xs",
+						children: t$1("ui:auth.common.lastUsed")
+					})
+				]
 			}, provider);
 		})
 	});
@@ -2242,7 +2901,9 @@ function SocialButtons({ callbackURL, className, disabled, layout = "stack", onS
 function SSOButton({ email, domain, callbackURL, className, disabled, label }) {
 	const { t: t$1 } = useTranslation$1(["ui"]);
 	const { client, features } = useAuth();
+	const { isLastMethod } = useLastUsedMethod();
 	const [isLoading, setIsLoading] = useState(false);
+	const isLast = isLastMethod("sso");
 	if (!features.sso) return null;
 	const handleSignIn = async () => {
 		setIsLoading(true);
@@ -2257,84 +2918,72 @@ function SSOButton({ email, domain, callbackURL, className, disabled, label }) {
 		}
 	};
 	return /* @__PURE__ */ jsxs(Button, {
-		variant: "outline",
+		variant: isLast ? "default" : "outline",
 		type: "button",
 		disabled: disabled || isLoading,
 		onClick: handleSignIn,
 		className: cn("h-10 w-full gap-3 font-medium transition-all hover:shadow-sm", className),
-		children: [isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "size-5" }) : /* @__PURE__ */ jsx(Building2Icon, { className: "size-5 text-primary" }), /* @__PURE__ */ jsx("span", { children: label || t$1("ui:auth.sso.submit") })]
+		children: [
+			isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "size-5" }) : /* @__PURE__ */ jsx(Building2Icon, { className: cn("size-5", !isLast && "text-primary") }),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 text-left",
+				children: label || t$1("ui:auth.sso.submit")
+			}),
+			isLast && /* @__PURE__ */ jsx(Badge, {
+				variant: "secondary",
+				className: "ml-1 text-xs",
+				children: t$1("ui:auth.common.lastUsed")
+			})
+		]
 	});
 }
 
 //#endregion
-//#region src/web/ui/auth/forms/two-factor-form.tsx
-/**
-* Creates the two-factor TOTP verification schema with i18n-aware error messages.
-* Accepts optional TOTP digits config for customizing validation rules.
-*
-* @param digits - The expected TOTP code length (default: 6).
-* @returns A Zod schema for validating TOTP verification form data.
-*
-* @example
-* ```typescript
-* const config = useAuthConfig();
-* const digits = config.plugins?.twoFactor?.totp?.digits ?? 6;
-* const schema = defineTwoFactorTotpSchema(digits);
-* ```
-*/
-function defineTwoFactorTotpSchema(digits = 6) {
-	return z.object({
-		code: z.string().min(digits, i18n.t("ui:validation.codeLength", { length: digits })).max(digits, i18n.t("ui:validation.codeLength", { length: digits })).regex(/^\d+$/, i18n.t("ui:validation.codeDigitsOnly")),
-		trustDevice: z.boolean().optional()
-	});
-}
+//#region src/web/ui/auth/phone-input.tsx
 /**
-* Creates the two-factor backup code verification schema with i18n-aware error messages.
-* Accepts optional backup code length config for customizing validation rules.
-*
-* @param codeLength - The expected backup code length (default: 10).
-* @returns A Zod schema for validating backup code verification form data.
+* Phone number input field with react-hook-form integration.
+* Automatically handles validation errors from form context.
+* Accepts E.164 format phone numbers.
 *
 * @example
-* ```typescript
-* const config = useAuthConfig();
-* const codeLength = config.plugins?.twoFactor?.backupCodes?.length ?? 10;
-* const schema = defineTwoFactorBackupSchema(codeLength);
+* ```tsx
+* <FormProvider {...form}>
+*   <PhoneInput name="phoneNumber" label="Phone number" showIcon />
+* </FormProvider>
 * ```
 */
-function defineTwoFactorBackupSchema(codeLength = 10) {
-	return z.object({
-		code: z.string().min(1, i18n.t("ui:validation.backupCodeRequired")).max(codeLength * 2, i18n.t("ui:validation.backupCodeInvalid")),
-		trustDevice: z.boolean().optional()
-	});
-}
-function BackupCodeInput() {
+function PhoneInput({ name = "phoneNumber", label, hideLabel = false, showIcon = false, className, placeholder, ...props }) {
 	const id = useId();
 	const { t: t$1 } = useTranslation$1(["ui"]);
 	const form = useFormContext();
-	const error = form?.formState?.errors?.code;
+	const error = form?.formState?.errors?.[name];
 	const hasError = !!error;
+	const resolvedLabel = label ?? t$1("ui:auth.phoneOtp.number");
+	const resolvedPlaceholder = placeholder ?? t$1("ui:auth.phoneOtp.placeholder");
 	return /* @__PURE__ */ jsxs(Field, {
 		"data-invalid": hasError || void 0,
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				htmlFor: id,
-				children: t$1("ui:auth.twoFactor.backupCode")
+				className: cn(hideLabel && "sr-only"),
+				children: resolvedLabel
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ jsx("div", {
+				children: [showIcon && /* @__PURE__ */ jsx("div", {
 					className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2",
-					children: /* @__PURE__ */ jsx(KeyIcon, { className: "size-4 text-muted-foreground" })
+					children: /* @__PURE__ */ jsx(PhoneIcon, { className: "size-4 text-muted-foreground" })
 				}), /* @__PURE__ */ jsx(Input, {
 					id,
-					type: "text",
-					autoComplete: "one-time-code",
-					placeholder: t$1("ui:auth.twoFactor.backupPlaceholder"),
+					type: "tel",
+					inputMode: "tel",
+					autoComplete: "tel",
+					placeholder: resolvedPlaceholder,
 					"aria-invalid": hasError,
 					"aria-describedby": hasError ? `${id}-error` : void 0,
-					className: "h-10 pl-10 font-mono",
-					...form?.register("code")
+					className: cn(showIcon && "pl-10", "h-10", className),
+					...form?.register(name),
+					...props
 				})]
 			}),
 			error?.message && /* @__PURE__ */ jsx(FieldError, {
@@ -2344,123 +2993,425 @@ function BackupCodeInput() {
 		]
 	});
 }
+
+//#endregion
+//#region src/web/ui/auth/forms/phone-otp-form.tsx
 /**
-* Two-factor authentication form with improved UX.
-* Supports TOTP authenticator apps and backup codes.
+* Creates the OTP verification schema with i18n-aware error messages.
+* Accepts optional OTP length config for customizing validation rules.
+*
+* @param otpLength - The expected OTP code length (default: 6).
+* @returns A Zod schema for validating OTP verification form data.
+*
+* @example
+* ```typescript
+* const config = useAuthConfig();
+* const otpLength = config.methods?.phoneOtp?.otpLength ?? 6;
+* const schema = defineOtpSchema(otpLength);
+* ```
+*/
+function defineOtpSchema(otpLength = 6) {
+	return z.object({ code: z.string().min(otpLength, i18n.t("ui:validation.codeLength", { length: otpLength })).max(otpLength, i18n.t("ui:validation.codeLength", { length: otpLength })).regex(/^\d+$/, i18n.t("ui:validation.codeDigitsOnly")) });
+}
+/**
+* Creates the phone number schema with i18n-aware error messages.
+*
+* @returns A Zod schema for validating phone number form data.
+*/
+function definePhoneNumberSchema() {
+	return z.object({ phoneNumber: z.string().min(10, i18n.t("ui:validation.phoneTooShort")).regex(/^\+?[1-9]\d{1,14}$/, i18n.t("ui:validation.phoneInvalid")) });
+}
+/**
+* Phone OTP authentication form with two-stage flow.
+* Stage 1: Enter phone number to request OTP.
+* Stage 2: Enter the OTP code to verify.
 *
 * @example
 * ```tsx
 * <AuthProvider auth={auth}>
-*   <TwoFactorForm
-*     showTrustDevice
+*   <PhoneOTPForm
+*     callbackURL="/dashboard"
 *     onSuccess={() => navigate("/dashboard")}
 *   />
 * </AuthProvider>
 * ```
 */
-function TwoFactorForm({ className, title, description, logo, showTrustDevice = true, onSuccess, onBack }) {
+function PhoneOTPForm({ callbackURL, className, title, description, logo, onSuccess }) {
 	const { t: t$1 } = useTranslation$1(["ui"]);
-	const { client, config } = useAuth();
+	const { client, config, features } = useAuth();
+	const captcha = useCaptcha();
+	const [captchaToken, setCaptchaToken] = useState(null);
+	const captchaResetRef = useRef(null);
 	const { isLoading, error, execute, setError } = useAuthForm();
-	const [mode, setMode] = useState("totp");
-	const totpDigits = config.plugins?.twoFactor?.totp?.digits ?? 6;
-	const backupCodeLength = config.plugins?.twoFactor?.backupCodes?.length ?? 10;
-	const totpForm = useForm({
-		resolver: zodResolver(defineTwoFactorTotpSchema(totpDigits)),
-		defaultValues: {
-			code: "",
-			trustDevice: false
-		},
+	const [stage, setStage] = useState("phone");
+	const [pendingPhone, setPendingPhone] = useState(null);
+	const [countdown, setCountdown] = useState(0);
+	const countdownRef = useRef(null);
+	const otpLength = config.methods?.phoneOtp?.otpLength ?? 6;
+	useEffect(() => {
+		return () => {
+			if (countdownRef.current) clearInterval(countdownRef.current);
+		};
+	}, []);
+	const phoneForm = useForm({
+		resolver: zodResolver(definePhoneNumberSchema()),
+		defaultValues: { phoneNumber: "" },
 		mode: "onBlur"
 	});
-	const backupForm = useForm({
-		resolver: zodResolver(defineTwoFactorBackupSchema(backupCodeLength)),
-		defaultValues: {
-			code: "",
-			trustDevice: false
-		},
+	const otpForm = useForm({
+		resolver: zodResolver(defineOtpSchema(otpLength)),
+		defaultValues: { code: "" },
 		mode: "onBlur"
 	});
-	const handleTotpSubmit = async (data) => {
-		if (await execute(async () => {
-			const response = await client.twoFactor.verifyTotp({
-				code: data.code,
-				trustDevice: data.trustDevice
+	if (!features.phoneOtp) return null;
+	/**
+	* Starts a 30-second countdown timer for the resend button.
+	* Clears any existing timer before starting a new one.
+	*/
+	const startCountdown = () => {
+		if (countdownRef.current) clearInterval(countdownRef.current);
+		setCountdown(30);
+		countdownRef.current = setInterval(() => {
+			setCountdown((c) => {
+				if (c <= 1) {
+					if (countdownRef.current) clearInterval(countdownRef.current);
+					return 0;
+				}
+				return c - 1;
 			});
-			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.codeInvalid"));
+		}, 1e3);
+	};
+	const handlePhoneSubmit = async (data) => {
+		if (!await execute(async () => {
+			const response = await client.phoneNumber.sendOtp({
+				phoneNumber: data.phoneNumber,
+				fetchOptions: captchaToken ? { headers: { "x-captcha-response": captchaToken } } : void 0
+			});
+			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.generic"));
+			setPendingPhone(data.phoneNumber);
+			setStage("verify");
+			startCountdown();
 			return response;
-		})) onSuccess?.();
+		})) {
+			setCaptchaToken(null);
+			captchaResetRef.current?.();
+		}
 	};
-	const handleBackupSubmit = async (data) => {
+	const handleOtpSubmit = async (data) => {
+		if (!pendingPhone) return;
 		if (await execute(async () => {
-			const response = await client.twoFactor.verifyBackupCode({
-				code: data.code,
-				trustDevice: data.trustDevice
+			const response = await client.phoneNumber.verify({
+				phoneNumber: pendingPhone,
+				code: data.code
 			});
-			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.backupCodeInvalid"));
+			if (response.error) throw new Error(response.error.message || t$1("ui:auth.otp.invalid"));
 			return response;
 		})) onSuccess?.();
 	};
-	const switchMode = () => {
+	const handleResend = async () => {
+		if (!pendingPhone) return;
+		const result = await execute(async () => {
+			const response = await client.phoneNumber.sendOtp({
+				phoneNumber: pendingPhone,
+				fetchOptions: captchaToken ? { headers: { "x-captcha-response": captchaToken } } : void 0
+			});
+			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.generic"));
+			return response;
+		});
+		if (!result) {
+			setCaptchaToken(null);
+			captchaResetRef.current?.();
+		}
+		if (result) startCountdown();
+	};
+	const handleBack = () => {
 		setError(null);
-		setMode(mode === "totp" ? "backup" : "totp");
+		setStage("phone");
+		otpForm.reset();
 	};
-	if (mode === "backup") return /* @__PURE__ */ jsx(AuthCard, {
-		title: t$1("ui:auth.twoFactor.backupTitle"),
-		description: t$1("ui:auth.twoFactor.backupDescription"),
+	if (stage === "verify" && pendingPhone) return /* @__PURE__ */ jsx(AuthCard, {
+		title: t$1("ui:auth.otp.code"),
+		description: t$1("ui:auth.phoneOtp.codeSent", { phone: pendingPhone }),
 		logo,
 		className,
 		children: /* @__PURE__ */ jsx(FormProvider, {
-			...backupForm,
+			...otpForm,
 			children: /* @__PURE__ */ jsxs("form", {
-				onSubmit: backupForm.handleSubmit(handleBackupSubmit),
+				onSubmit: otpForm.handleSubmit(handleOtpSubmit),
 				className: "space-y-4",
 				children: [
 					error && /* @__PURE__ */ jsxs(Alert, {
 						variant: "destructive",
 						children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-4" }), /* @__PURE__ */ jsx(AlertDescription, { children: error })]
 					}),
-					/* @__PURE__ */ jsx(BackupCodeInput, {}),
-					showTrustDevice && /* @__PURE__ */ jsxs(Field, {
-						orientation: "horizontal",
-						className: "w-auto",
-						children: [/* @__PURE__ */ jsx(Checkbox, {
-							id: "trustDevice-backup",
-							...backupForm.register("trustDevice")
-						}), /* @__PURE__ */ jsx(FieldLabel, {
-							htmlFor: "trustDevice-backup",
-							className: "text-sm font-normal",
-							children: t$1("ui:auth.twoFactor.trustDevice")
-						})]
+					/* @__PURE__ */ jsx(OtpInput, {
+						name: "code",
+						label: t$1("ui:auth.otp.code"),
+						length: otpLength,
+						hideLabel: true,
+						showSeparator: true,
+						onComplete: () => otpForm.handleSubmit(handleOtpSubmit)()
 					}),
 					/* @__PURE__ */ jsx(Button, {
 						type: "submit",
 						className: "h-10 w-full font-medium",
 						disabled: isLoading,
-						children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }), t$1("ui:auth.twoFactor.submitting")] }) : t$1("ui:auth.twoFactor.submit")
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "ghost",
-						className: "w-full text-muted-foreground",
-						onClick: switchMode,
-						children: t$1("ui:auth.twoFactor.useAuthenticator")
+						children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }), t$1("ui:auth.otp.verifying")] }) : t$1("ui:auth.otp.verify")
 					}),
-					onBack && /* @__PURE__ */ jsxs(Button, {
-						type: "button",
-						variant: "ghost",
-						className: "w-full text-muted-foreground",
-						onClick: onBack,
-						children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { className: "mr-2 size-4" }), t$1("ui:auth.common.backButton")]
-					})
-				]
-			})
-		})
-	});
-	return /* @__PURE__ */ jsx(AuthCard, {
-		title: title || t$1("ui:auth.twoFactor.title"),
-		description: description || t$1("ui:auth.twoFactor.description"),
-		logo,
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "ghost",
+							className: "flex-1 text-muted-foreground",
+							onClick: handleBack,
+							children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { className: "mr-2 size-4" }), t$1("ui:auth.common.backButton")]
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							className: "flex-1 text-muted-foreground",
+							onClick: handleResend,
+							disabled: isLoading || countdown > 0,
+							children: countdown > 0 ? t$1("ui:auth.otp.resendIn", { seconds: countdown }) : t$1("ui:auth.phoneOtp.resend")
+						})]
+					})
+				]
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx(AuthCard, {
+		title: title || t$1("ui:auth.phoneOtp.title"),
+		description,
+		logo,
+		className,
+		children: /* @__PURE__ */ jsx(FormProvider, {
+			...phoneForm,
+			children: /* @__PURE__ */ jsxs("form", {
+				onSubmit: phoneForm.handleSubmit(handlePhoneSubmit),
+				className: "space-y-4",
+				children: [
+					error && /* @__PURE__ */ jsxs(Alert, {
+						variant: "destructive",
+						children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-4" }), /* @__PURE__ */ jsx(AlertDescription, { children: error })]
+					}),
+					/* @__PURE__ */ jsx(PhoneInput, {
+						name: "phoneNumber",
+						label: t$1("ui:auth.phoneOtp.number"),
+						showIcon: true
+					}),
+					captcha.enabled && /* @__PURE__ */ jsx(CaptchaWidget, {
+						onSuccess: setCaptchaToken,
+						onExpire: () => setCaptchaToken(null),
+						onError: () => setCaptchaToken(null),
+						resetRef: captchaResetRef
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						className: "h-10 w-full font-medium",
+						disabled: isLoading || captcha.enabled && !captchaToken,
+						children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }), t$1("ui:auth.phoneOtp.sending")] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PhoneIcon, { className: "mr-2 size-4" }), t$1("ui:auth.phoneOtp.send")] })
+					})
+				]
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/web/ui/auth/forms/two-factor-form.tsx
+/**
+* Creates the two-factor TOTP verification schema with i18n-aware error messages.
+* Accepts optional TOTP digits config for customizing validation rules.
+*
+* @param digits - The expected TOTP code length (default: 6).
+* @returns A Zod schema for validating TOTP verification form data.
+*
+* @example
+* ```typescript
+* const config = useAuthConfig();
+* const digits = config.plugins?.twoFactor?.totp?.digits ?? 6;
+* const schema = defineTwoFactorTotpSchema(digits);
+* ```
+*/
+function defineTwoFactorTotpSchema(digits = 6) {
+	return z.object({
+		code: z.string().min(digits, i18n.t("ui:validation.codeLength", { length: digits })).max(digits, i18n.t("ui:validation.codeLength", { length: digits })).regex(/^\d+$/, i18n.t("ui:validation.codeDigitsOnly")),
+		trustDevice: z.boolean().optional()
+	});
+}
+/**
+* Creates the two-factor backup code verification schema with i18n-aware error messages.
+* Accepts optional backup code length config for customizing validation rules.
+*
+* @param codeLength - The expected backup code length (default: 10).
+* @returns A Zod schema for validating backup code verification form data.
+*
+* @example
+* ```typescript
+* const config = useAuthConfig();
+* const codeLength = config.plugins?.twoFactor?.backupCodes?.length ?? 10;
+* const schema = defineTwoFactorBackupSchema(codeLength);
+* ```
+*/
+function defineTwoFactorBackupSchema(codeLength = 10) {
+	return z.object({
+		code: z.string().min(1, i18n.t("ui:validation.backupCodeRequired")).max(codeLength * 2, i18n.t("ui:validation.backupCodeInvalid")),
+		trustDevice: z.boolean().optional()
+	});
+}
+function BackupCodeInput() {
+	const id = useId();
+	const { t: t$1 } = useTranslation$1(["ui"]);
+	const form = useFormContext();
+	const error = form?.formState?.errors?.code;
+	const hasError = !!error;
+	return /* @__PURE__ */ jsxs(Field, {
+		"data-invalid": hasError || void 0,
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: id,
+				children: t$1("ui:auth.twoFactor.backupCode")
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2",
+					children: /* @__PURE__ */ jsx(KeyIcon, { className: "size-4 text-muted-foreground" })
+				}), /* @__PURE__ */ jsx(Input, {
+					id,
+					type: "text",
+					autoComplete: "one-time-code",
+					placeholder: t$1("ui:auth.twoFactor.backupPlaceholder"),
+					"aria-invalid": hasError,
+					"aria-describedby": hasError ? `${id}-error` : void 0,
+					className: "h-10 pl-10 font-mono",
+					...form?.register("code")
+				})]
+			}),
+			error?.message && /* @__PURE__ */ jsx(FieldError, {
+				id: `${id}-error`,
+				children: String(error.message)
+			})
+		]
+	});
+}
+/**
+* Two-factor authentication form with improved UX.
+* Supports TOTP authenticator apps and backup codes.
+*
+* @example
+* ```tsx
+* <AuthProvider auth={auth}>
+*   <TwoFactorForm
+*     showTrustDevice
+*     onSuccess={() => navigate("/dashboard")}
+*   />
+* </AuthProvider>
+* ```
+*/
+function TwoFactorForm({ className, title, description, logo, showTrustDevice = true, onSuccess, onBack }) {
+	const { t: t$1 } = useTranslation$1(["ui"]);
+	const { client, config } = useAuth();
+	const { isLoading, error, execute, setError } = useAuthForm();
+	const [mode, setMode] = useState("totp");
+	const totpDigits = config.plugins?.twoFactor?.totp?.digits ?? 6;
+	const backupCodeLength = config.plugins?.twoFactor?.backupCodes?.length ?? 10;
+	const totpForm = useForm({
+		resolver: zodResolver(defineTwoFactorTotpSchema(totpDigits)),
+		defaultValues: {
+			code: "",
+			trustDevice: false
+		},
+		mode: "onBlur"
+	});
+	const backupForm = useForm({
+		resolver: zodResolver(defineTwoFactorBackupSchema(backupCodeLength)),
+		defaultValues: {
+			code: "",
+			trustDevice: false
+		},
+		mode: "onBlur"
+	});
+	const handleTotpSubmit = async (data) => {
+		if (await execute(async () => {
+			const response = await client.twoFactor.verifyTotp({
+				code: data.code,
+				trustDevice: data.trustDevice
+			});
+			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.codeInvalid"));
+			return response;
+		})) onSuccess?.();
+	};
+	const handleBackupSubmit = async (data) => {
+		if (await execute(async () => {
+			const response = await client.twoFactor.verifyBackupCode({
+				code: data.code,
+				trustDevice: data.trustDevice
+			});
+			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.backupCodeInvalid"));
+			return response;
+		})) onSuccess?.();
+	};
+	const switchMode = () => {
+		setError(null);
+		setMode(mode === "totp" ? "backup" : "totp");
+	};
+	if (mode === "backup") return /* @__PURE__ */ jsx(AuthCard, {
+		title: t$1("ui:auth.twoFactor.backupTitle"),
+		description: t$1("ui:auth.twoFactor.backupDescription"),
+		logo,
+		className,
+		children: /* @__PURE__ */ jsx(FormProvider, {
+			...backupForm,
+			children: /* @__PURE__ */ jsxs("form", {
+				onSubmit: backupForm.handleSubmit(handleBackupSubmit),
+				className: "space-y-4",
+				children: [
+					error && /* @__PURE__ */ jsxs(Alert, {
+						variant: "destructive",
+						children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-4" }), /* @__PURE__ */ jsx(AlertDescription, { children: error })]
+					}),
+					/* @__PURE__ */ jsx(BackupCodeInput, {}),
+					showTrustDevice && /* @__PURE__ */ jsxs(Field, {
+						orientation: "horizontal",
+						className: "w-auto",
+						children: [/* @__PURE__ */ jsx(Checkbox, {
+							id: "trustDevice-backup",
+							...backupForm.register("trustDevice")
+						}), /* @__PURE__ */ jsx(FieldLabel, {
+							htmlFor: "trustDevice-backup",
+							className: "text-sm font-normal",
+							children: t$1("ui:auth.twoFactor.trustDevice")
+						})]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						className: "h-10 w-full font-medium",
+						disabled: isLoading,
+						children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }), t$1("ui:auth.twoFactor.submitting")] }) : t$1("ui:auth.twoFactor.submit")
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						className: "w-full text-muted-foreground",
+						onClick: switchMode,
+						children: t$1("ui:auth.twoFactor.useAuthenticator")
+					}),
+					onBack && /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "ghost",
+						className: "w-full text-muted-foreground",
+						onClick: onBack,
+						children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { className: "mr-2 size-4" }), t$1("ui:auth.common.backButton")]
+					})
+				]
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx(AuthCard, {
+		title: title || t$1("ui:auth.twoFactor.title"),
+		description: description || t$1("ui:auth.twoFactor.description"),
+		logo,
 		className,
 		children: /* @__PURE__ */ jsx(FormProvider, {
 			...totpForm,
@@ -2566,6 +3517,9 @@ function LoginForm({ callbackURL, className, forgotPasswordLink = "/forgot-passw
 	const { t: t$1 } = useTranslation$1(["ui"]);
 	const { client, features } = useAuth();
 	const { isLoading, error, execute } = useAuthForm();
+	const captcha = useCaptcha();
+	const [captchaToken, setCaptchaToken] = useState(null);
+	const captchaResetRef = useRef(null);
 	const [twoFactorPending, setTwoFactorPending] = useState(false);
 	const [emailVerificationRequired, setEmailVerificationRequired] = useState(false);
 	const [resendSuccess, setResendSuccess] = useState(false);
@@ -2579,7 +3533,7 @@ function LoginForm({ callbackURL, className, forgotPasswordLink = "/forgot-passw
 		mode: "onBlur"
 	});
 	const email = form.watch("email");
-	const hasAlternativeAuth = features.magicLink || features.passkey || features.sso || Object.values(features.oauth).some(Boolean);
+	const hasAlternativeAuth = features.magicLink || features.passkey || features.sso || features.phoneOtp || features.emailOtp || Object.values(features.oauth).some(Boolean);
 	const hasPasswordlessOnly = !features.emailPassword && hasAlternativeAuth;
 	const hasAnyAuthMethod = features.emailPassword || hasAlternativeAuth;
 	const handleResendVerification = async () => {
@@ -2603,7 +3557,8 @@ function LoginForm({ callbackURL, className, forgotPasswordLink = "/forgot-passw
 				email: data.email,
 				password: data.password,
 				rememberMe: data.rememberMe,
-				callbackURL
+				callbackURL,
+				fetchOptions: captchaToken ? { headers: { "x-captcha-response": captchaToken } } : void 0
 			});
 			if (response.error?.status === 403) {
 				setEmailVerificationRequired(true);
@@ -2614,410 +3569,173 @@ function LoginForm({ callbackURL, className, forgotPasswordLink = "/forgot-passw
 				return response;
 			}
 			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.invalidCredentials"));
-			return response;
-		});
-		if (result) {
-			if (!result.data?.twoFactorRedirect) onSuccess?.();
-		}
-	};
-	const footer = signupLink && /* @__PURE__ */ jsxs("span", { children: [
-		t$1("ui:auth.login.noAccount"),
-		" ",
-		/* @__PURE__ */ jsx(Link$1, {
-			to: signupLink,
-			className: "font-medium text-primary transition-colors hover:text-primary/80 hover:underline",
-			children: t$1("ui:auth.login.signUp")
-		})
-	] });
-	if (twoFactorPending) return /* @__PURE__ */ jsx(TwoFactorForm, {
-		className,
-		logo,
-		onSuccess,
-		onBack: () => setTwoFactorPending(false)
-	});
-	if (!hasAnyAuthMethod) return /* @__PURE__ */ jsx(AuthCard, {
-		title: title || t$1("ui:auth.login.title"),
-		description,
-		footer,
-		logo,
-		showSecurityIcon,
-		className,
-		children: /* @__PURE__ */ jsx(Empty, {
-			className: "border-none p-6",
-			children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
-				/* @__PURE__ */ jsx(EmptyMedia, {
-					variant: "icon",
-					children: /* @__PURE__ */ jsx(SettingsIcon, {})
-				}),
-				/* @__PURE__ */ jsx(EmptyTitle, { children: t$1("ui:auth.common.noMethodsConfigured") }),
-				/* @__PURE__ */ jsx(EmptyDescription, { children: t$1("ui:auth.common.noMethodsDescription") })
-			] })
-		})
-	});
-	return /* @__PURE__ */ jsx(AuthCard, {
-		title: title || t$1("ui:auth.login.title"),
-		description: description || t$1("ui:auth.login.description"),
-		footer,
-		logo,
-		showSecurityIcon,
-		className,
-		children: /* @__PURE__ */ jsx(FormProvider, {
-			...form,
-			children: /* @__PURE__ */ jsxs("form", {
-				onSubmit: form.handleSubmit(onSubmit),
-				className: "space-y-4",
-				children: [
-					error && !emailVerificationRequired && /* @__PURE__ */ jsxs(Alert, {
-						variant: "destructive",
-						children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-4" }), /* @__PURE__ */ jsx(AlertDescription, { children: error })]
-					}),
-					emailVerificationRequired && (resendSuccess ? /* @__PURE__ */ jsxs(Alert, {
-						variant: "success",
-						children: [/* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4" }), /* @__PURE__ */ jsx(AlertDescription, { children: t$1("ui:auth.verifyEmail.resendSuccess") })]
-					}) : /* @__PURE__ */ jsxs(Alert, {
-						variant: "warning",
-						children: [
-							/* @__PURE__ */ jsx(MailIcon, { className: "size-4" }),
-							/* @__PURE__ */ jsx(AlertDescription, { children: t$1("ui:auth.login.emailNotVerifiedDescription") }),
-							/* @__PURE__ */ jsx("div", {
-								className: "col-start-2 flex justify-end pt-2",
-								children: /* @__PURE__ */ jsxs(Button, {
-									type: "button",
-									size: "sm",
-									className: "h-7 bg-amber-900 text-white hover:bg-amber-800 dark:bg-amber-100 dark:text-amber-900 dark:hover:bg-amber-200",
-									onClick: handleResendVerification,
-									disabled: isLoading,
-									children: [isLoading && /* @__PURE__ */ jsx(Spinner, { className: "size-3" }), t$1("ui:auth.verifyEmail.resend")]
-								})
-							})
-						]
-					})),
-					hasPasswordlessOnly && /* @__PURE__ */ jsxs("div", {
-						className: "space-y-3",
-						children: [
-							/* @__PURE__ */ jsx(PasskeyButton, {
-								disabled: isLoading,
-								onSuccess
-							}),
-							/* @__PURE__ */ jsx(SocialButtons, {
-								callbackURL,
-								disabled: isLoading
-							}),
-							/* @__PURE__ */ jsx(SSOButton, {
-								email,
-								callbackURL,
-								disabled: isLoading
-							})
-						]
-					}),
-					features.emailPassword && /* @__PURE__ */ jsxs(Fragment, { children: [
-						(features.passkey || Object.values(features.oauth).some(Boolean)) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-							className: "space-y-3",
-							children: [/* @__PURE__ */ jsx(PasskeyButton, {
-								disabled: isLoading,
-								onSuccess
-							}), /* @__PURE__ */ jsx(SocialButtons, {
-								callbackURL,
-								disabled: isLoading
-							})]
-						}), /* @__PURE__ */ jsx(FieldSeparator, { children: t$1("ui:auth.login.orContinueWith") })] }),
-						/* @__PURE__ */ jsx(EmailInput, {
-							name: "email",
-							label: t$1("ui:auth.login.email"),
-							showIcon: true
-						}),
-						/* @__PURE__ */ jsx(PasswordInput, {
-							name: "password",
-							label: t$1("ui:auth.login.password"),
-							showIcon: true
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center justify-between",
-							children: [showRememberMe && /* @__PURE__ */ jsxs(Field, {
-								orientation: "horizontal",
-								className: "w-auto",
-								children: [/* @__PURE__ */ jsx(Checkbox, {
-									id: "rememberMe",
-									...form.register("rememberMe")
-								}), /* @__PURE__ */ jsx(FieldLabel, {
-									htmlFor: "rememberMe",
-									className: "text-sm font-normal",
-									children: t$1("ui:auth.login.rememberMe")
-								})]
-							}), forgotPasswordLink && /* @__PURE__ */ jsx(Link$1, {
-								to: forgotPasswordLink,
-								className: "text-sm text-muted-foreground transition-colors hover:text-primary",
-								children: t$1("ui:auth.login.forgotPassword")
-							})]
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							type: "submit",
-							className: "h-10 w-full font-medium",
-							disabled: isLoading,
-							children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }), t$1("ui:auth.login.submitting")] }) : t$1("ui:auth.login.submit")
-						}),
-						features.sso && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FieldSeparator, { children: t$1("ui:auth.common.or") }), /* @__PURE__ */ jsx(SSOButton, {
-							email,
-							callbackURL,
-							disabled: isLoading
-						})] })
-					] }),
-					features.magicLink && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FieldSeparator, { children: t$1("ui:auth.login.orSignInWith") }), /* @__PURE__ */ jsx(MagicLinkForm, { callbackURL })] })
-				]
-			})
-		})
-	});
-}
-
-//#endregion
-//#region src/web/ui/auth/phone-input.tsx
-/**
-* Phone number input field with react-hook-form integration.
-* Automatically handles validation errors from form context.
-* Accepts E.164 format phone numbers.
-*
-* @example
-* ```tsx
-* <FormProvider {...form}>
-*   <PhoneInput name="phoneNumber" label="Phone number" showIcon />
-* </FormProvider>
-* ```
-*/
-function PhoneInput({ name = "phoneNumber", label, hideLabel = false, showIcon = false, className, placeholder, ...props }) {
-	const id = useId();
-	const { t: t$1 } = useTranslation$1(["ui"]);
-	const form = useFormContext();
-	const error = form?.formState?.errors?.[name];
-	const hasError = !!error;
-	const resolvedLabel = label ?? t$1("ui:auth.phoneOtp.number");
-	const resolvedPlaceholder = placeholder ?? t$1("ui:auth.phoneOtp.placeholder");
-	return /* @__PURE__ */ jsxs(Field, {
-		"data-invalid": hasError || void 0,
-		children: [
-			/* @__PURE__ */ jsx(FieldLabel, {
-				htmlFor: id,
-				className: cn(hideLabel && "sr-only"),
-				children: resolvedLabel
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "relative",
-				children: [showIcon && /* @__PURE__ */ jsx("div", {
-					className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2",
-					children: /* @__PURE__ */ jsx(PhoneIcon, { className: "size-4 text-muted-foreground" })
-				}), /* @__PURE__ */ jsx(Input, {
-					id,
-					type: "tel",
-					inputMode: "tel",
-					autoComplete: "tel",
-					placeholder: resolvedPlaceholder,
-					"aria-invalid": hasError,
-					"aria-describedby": hasError ? `${id}-error` : void 0,
-					className: cn(showIcon && "pl-10", "h-10", className),
-					...form?.register(name),
-					...props
-				})]
-			}),
-			error?.message && /* @__PURE__ */ jsx(FieldError, {
-				id: `${id}-error`,
-				children: String(error.message)
-			})
-		]
-	});
-}
-
-//#endregion
-//#region src/web/ui/auth/forms/phone-otp-form.tsx
-/**
-* Creates the OTP verification schema with i18n-aware error messages.
-* Accepts optional OTP length config for customizing validation rules.
-*
-* @param otpLength - The expected OTP code length (default: 6).
-* @returns A Zod schema for validating OTP verification form data.
-*
-* @example
-* ```typescript
-* const config = useAuthConfig();
-* const otpLength = config.methods?.phoneOtp?.otpLength ?? 6;
-* const schema = defineOtpSchema(otpLength);
-* ```
-*/
-function defineOtpSchema(otpLength = 6) {
-	return z.object({ code: z.string().min(otpLength, i18n.t("ui:validation.codeLength", { length: otpLength })).max(otpLength, i18n.t("ui:validation.codeLength", { length: otpLength })).regex(/^\d+$/, i18n.t("ui:validation.codeDigitsOnly")) });
-}
-/**
-* Creates the phone number schema with i18n-aware error messages.
-*
-* @returns A Zod schema for validating phone number form data.
-*/
-function definePhoneNumberSchema() {
-	return z.object({ phoneNumber: z.string().min(10, i18n.t("ui:validation.phoneTooShort")).regex(/^\+?[1-9]\d{1,14}$/, i18n.t("ui:validation.phoneInvalid")) });
-}
-/**
-* Phone OTP authentication form with two-stage flow.
-* Stage 1: Enter phone number to request OTP.
-* Stage 2: Enter the OTP code to verify.
-*
-* @example
-* ```tsx
-* <AuthProvider auth={auth}>
-*   <PhoneOTPForm
-*     callbackURL="/dashboard"
-*     onSuccess={() => navigate("/dashboard")}
-*   />
-* </AuthProvider>
-* ```
-*/
-function PhoneOTPForm({ callbackURL, className, title, description, logo, onSuccess }) {
-	const { t: t$1 } = useTranslation$1(["ui"]);
-	const { client, config, features } = useAuth();
-	const { isLoading, error, execute, setError } = useAuthForm();
-	const [stage, setStage] = useState("phone");
-	const [pendingPhone, setPendingPhone] = useState(null);
-	const [countdown, setCountdown] = useState(0);
-	const countdownRef = useRef(null);
-	const otpLength = config.methods?.phoneOtp?.otpLength ?? 6;
-	useEffect(() => {
-		return () => {
-			if (countdownRef.current) clearInterval(countdownRef.current);
-		};
-	}, []);
-	const phoneForm = useForm({
-		resolver: zodResolver(definePhoneNumberSchema()),
-		defaultValues: { phoneNumber: "" },
-		mode: "onBlur"
-	});
-	const otpForm = useForm({
-		resolver: zodResolver(defineOtpSchema(otpLength)),
-		defaultValues: { code: "" },
-		mode: "onBlur"
-	});
-	if (!features.phoneOtp) return null;
-	/**
-	* Starts a 30-second countdown timer for the resend button.
-	* Clears any existing timer before starting a new one.
-	*/
-	const startCountdown = () => {
-		if (countdownRef.current) clearInterval(countdownRef.current);
-		setCountdown(30);
-		countdownRef.current = setInterval(() => {
-			setCountdown((c) => {
-				if (c <= 1) {
-					if (countdownRef.current) clearInterval(countdownRef.current);
-					return 0;
-				}
-				return c - 1;
-			});
-		}, 1e3);
-	};
-	const handlePhoneSubmit = async (data) => {
-		await execute(async () => {
-			const result = await client.phoneNumber.sendOtp({ phoneNumber: data.phoneNumber });
-			if (result.error) throw new Error(result.error.message || t$1("ui:auth.errors.generic"));
-			setPendingPhone(data.phoneNumber);
-			setStage("verify");
-			startCountdown();
-		});
-	};
-	const handleOtpSubmit = async (data) => {
-		if (!pendingPhone) return;
-		if (await execute(async () => {
-			const response = await client.phoneNumber.verify({
-				phoneNumber: pendingPhone,
-				code: data.code
-			});
-			if (response.error) throw new Error(response.error.message || t$1("ui:auth.otp.invalid"));
-			return response;
-		})) onSuccess?.();
-	};
-	const handleResend = async () => {
-		if (!pendingPhone) return;
-		if (await execute(async () => {
-			const response = await client.phoneNumber.sendOtp({ phoneNumber: pendingPhone });
-			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.generic"));
-			return response;
-		})) startCountdown();
-	};
-	const handleBack = () => {
-		setError(null);
-		setStage("phone");
-		otpForm.reset();
+			return response;
+		});
+		if (!result) {
+			setCaptchaToken(null);
+			captchaResetRef.current?.();
+		}
+		if (result) {
+			if (!result.data?.twoFactorRedirect) onSuccess?.();
+		}
 	};
-	if (stage === "verify" && pendingPhone) return /* @__PURE__ */ jsx(AuthCard, {
-		title: t$1("ui:auth.otp.code"),
-		description: t$1("ui:auth.phoneOtp.codeSent", { phone: pendingPhone }),
+	const footer = signupLink && /* @__PURE__ */ jsxs("span", { children: [
+		t$1("ui:auth.login.noAccount"),
+		" ",
+		/* @__PURE__ */ jsx(Link$1, {
+			to: signupLink,
+			className: "font-medium text-primary transition-colors hover:text-primary/80 hover:underline",
+			children: t$1("ui:auth.login.signUp")
+		})
+	] });
+	if (twoFactorPending) return /* @__PURE__ */ jsx(TwoFactorForm, {
+		className,
+		logo,
+		onSuccess,
+		onBack: () => setTwoFactorPending(false)
+	});
+	if (!hasAnyAuthMethod) return /* @__PURE__ */ jsx(AuthCard, {
+		title: title || t$1("ui:auth.login.title"),
+		description,
+		footer,
 		logo,
+		showSecurityIcon,
 		className,
-		children: /* @__PURE__ */ jsx(FormProvider, {
-			...otpForm,
-			children: /* @__PURE__ */ jsxs("form", {
-				onSubmit: otpForm.handleSubmit(handleOtpSubmit),
-				className: "space-y-4",
-				children: [
-					error && /* @__PURE__ */ jsxs(Alert, {
-						variant: "destructive",
-						children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-4" }), /* @__PURE__ */ jsx(AlertDescription, { children: error })]
-					}),
-					/* @__PURE__ */ jsx(OtpInput, {
-						name: "code",
-						label: t$1("ui:auth.otp.code"),
-						length: otpLength,
-						hideLabel: true,
-						showSeparator: true,
-						onComplete: () => otpForm.handleSubmit(handleOtpSubmit)()
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						type: "submit",
-						className: "h-10 w-full font-medium",
-						disabled: isLoading,
-						children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }), t$1("ui:auth.otp.verifying")] }) : t$1("ui:auth.otp.verify")
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex gap-2",
-						children: [/* @__PURE__ */ jsxs(Button, {
-							type: "button",
-							variant: "ghost",
-							className: "flex-1 text-muted-foreground",
-							onClick: handleBack,
-							children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { className: "mr-2 size-4" }), t$1("ui:auth.common.backButton")]
-						}), /* @__PURE__ */ jsx(Button, {
-							type: "button",
-							variant: "ghost",
-							className: "flex-1 text-muted-foreground",
-							onClick: handleResend,
-							disabled: isLoading || countdown > 0,
-							children: countdown > 0 ? t$1("ui:auth.otp.resendIn", { seconds: countdown }) : t$1("ui:auth.phoneOtp.resend")
-						})]
-					})
-				]
-			})
+		children: /* @__PURE__ */ jsx(Empty, {
+			className: "border-none p-6",
+			children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+				/* @__PURE__ */ jsx(EmptyMedia, {
+					variant: "icon",
+					children: /* @__PURE__ */ jsx(SettingsIcon, {})
+				}),
+				/* @__PURE__ */ jsx(EmptyTitle, { children: t$1("ui:auth.common.noMethodsConfigured") }),
+				/* @__PURE__ */ jsx(EmptyDescription, { children: t$1("ui:auth.common.noMethodsDescription") })
+			] })
 		})
 	});
 	return /* @__PURE__ */ jsx(AuthCard, {
-		title: title || t$1("ui:auth.phoneOtp.title"),
-		description,
+		title: title || t$1("ui:auth.login.title"),
+		description: description || t$1("ui:auth.login.description"),
+		footer,
 		logo,
+		showSecurityIcon,
 		className,
 		children: /* @__PURE__ */ jsx(FormProvider, {
-			...phoneForm,
+			...form,
 			children: /* @__PURE__ */ jsxs("form", {
-				onSubmit: phoneForm.handleSubmit(handlePhoneSubmit),
+				onSubmit: form.handleSubmit(onSubmit),
 				className: "space-y-4",
 				children: [
-					error && /* @__PURE__ */ jsxs(Alert, {
+					error && !emailVerificationRequired && /* @__PURE__ */ jsxs(Alert, {
 						variant: "destructive",
 						children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-4" }), /* @__PURE__ */ jsx(AlertDescription, { children: error })]
 					}),
-					/* @__PURE__ */ jsx(PhoneInput, {
-						name: "phoneNumber",
-						label: t$1("ui:auth.phoneOtp.number"),
-						showIcon: true
+					emailVerificationRequired && (resendSuccess ? /* @__PURE__ */ jsxs(Alert, {
+						variant: "success",
+						children: [/* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4" }), /* @__PURE__ */ jsx(AlertDescription, { children: t$1("ui:auth.verifyEmail.resendSuccess") })]
+					}) : /* @__PURE__ */ jsxs(Alert, {
+						variant: "warning",
+						children: [
+							/* @__PURE__ */ jsx(MailIcon, { className: "size-4" }),
+							/* @__PURE__ */ jsx(AlertDescription, { children: t$1("ui:auth.login.emailNotVerifiedDescription") }),
+							/* @__PURE__ */ jsx("div", {
+								className: "col-start-2 flex justify-end pt-2",
+								children: /* @__PURE__ */ jsxs(Button, {
+									type: "button",
+									size: "sm",
+									className: "h-7 bg-amber-900 text-white hover:bg-amber-800 dark:bg-amber-100 dark:text-amber-900 dark:hover:bg-amber-200",
+									onClick: handleResendVerification,
+									disabled: isLoading,
+									children: [isLoading && /* @__PURE__ */ jsx(Spinner, { className: "size-3" }), t$1("ui:auth.verifyEmail.resend")]
+								})
+							})
+						]
+					})),
+					hasPasswordlessOnly && /* @__PURE__ */ jsxs("div", {
+						className: "space-y-3",
+						children: [
+							/* @__PURE__ */ jsx(PasskeyButton, {
+								disabled: isLoading,
+								onSuccess
+							}),
+							/* @__PURE__ */ jsx(SocialButtons, {
+								callbackURL,
+								disabled: isLoading
+							}),
+							/* @__PURE__ */ jsx(SSOButton, {
+								email,
+								callbackURL,
+								disabled: isLoading
+							}),
+							features.phoneOtp && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FieldSeparator, { children: t$1("ui:auth.login.orSignInWith") }), /* @__PURE__ */ jsx(PhoneOTPForm, {
+								callbackURL,
+								onSuccess
+							})] }),
+							features.emailOtp && /* @__PURE__ */ jsxs(Fragment, { children: [!features.phoneOtp && /* @__PURE__ */ jsx(FieldSeparator, { children: t$1("ui:auth.login.orSignInWith") }), /* @__PURE__ */ jsx(EmailOTPForm, {
+								callbackURL,
+								onSuccess
+							})] })
+						]
 					}),
-					/* @__PURE__ */ jsx(Button, {
-						type: "submit",
-						className: "h-10 w-full font-medium",
-						disabled: isLoading,
-						children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }), t$1("ui:auth.phoneOtp.sending")] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PhoneIcon, { className: "mr-2 size-4" }), t$1("ui:auth.phoneOtp.send")] })
-					})
+					features.emailPassword && /* @__PURE__ */ jsxs(Fragment, { children: [
+						(features.passkey || Object.values(features.oauth).some(Boolean)) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+							className: "space-y-3",
+							children: [/* @__PURE__ */ jsx(PasskeyButton, {
+								disabled: isLoading,
+								onSuccess
+							}), /* @__PURE__ */ jsx(SocialButtons, {
+								callbackURL,
+								disabled: isLoading
+							})]
+						}), /* @__PURE__ */ jsx(FieldSeparator, { children: t$1("ui:auth.login.orContinueWith") })] }),
+						/* @__PURE__ */ jsx(EmailInput, {
+							name: "email",
+							label: t$1("ui:auth.login.email"),
+							showIcon: true
+						}),
+						/* @__PURE__ */ jsx(PasswordInput, {
+							name: "password",
+							label: t$1("ui:auth.login.password"),
+							showIcon: true
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [showRememberMe && /* @__PURE__ */ jsxs(Field, {
+								orientation: "horizontal",
+								className: "w-auto",
+								children: [/* @__PURE__ */ jsx(Checkbox, {
+									id: "rememberMe",
+									...form.register("rememberMe")
+								}), /* @__PURE__ */ jsx(FieldLabel, {
+									htmlFor: "rememberMe",
+									className: "text-sm font-normal",
+									children: t$1("ui:auth.login.rememberMe")
+								})]
+							}), forgotPasswordLink && /* @__PURE__ */ jsx(Link$1, {
+								to: forgotPasswordLink,
+								className: "text-sm text-muted-foreground transition-colors hover:text-primary",
+								children: t$1("ui:auth.login.forgotPassword")
+							})]
+						}),
+						captcha.enabled && /* @__PURE__ */ jsx(CaptchaWidget, {
+							onSuccess: setCaptchaToken,
+							onExpire: () => setCaptchaToken(null),
+							onError: () => setCaptchaToken(null),
+							resetRef: captchaResetRef
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							className: "h-10 w-full font-medium",
+							disabled: isLoading || captcha.enabled && !captchaToken,
+							children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }), t$1("ui:auth.login.submitting")] }) : t$1("ui:auth.login.submit")
+						}),
+						features.sso && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FieldSeparator, { children: t$1("ui:auth.common.or") }), /* @__PURE__ */ jsx(SSOButton, {
+							email,
+							callbackURL,
+							disabled: isLoading
+						})] })
+					] }),
+					features.magicLink && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FieldSeparator, { children: t$1("ui:auth.login.orSignInWith") }), /* @__PURE__ */ jsx(MagicLinkForm, { callbackURL })] })
 				]
 			})
 		})
@@ -3232,25 +3950,33 @@ function ResetPasswordForm({ token, className, loginLink = "/login", forgotPassw
 //#region src/web/ui/auth/forms/signup-form.tsx
 /**
 * Creates the signup form schema with i18n-aware error messages.
-* Accepts optional password config for customizing validation rules.
+* Accepts optional password and username config for customizing validation rules.
 *
-* @param passwordConfig - Optional password validation config from authConfig.methods.emailPassword.
+* @param options - Schema configuration options.
 * @returns A Zod schema for validating signup form data.
 *
 * @example
 * ```typescript
 * const config = useAuthConfig();
-* const schema = defineSignupSchema(config.methods?.emailPassword);
+* const schema = defineSignupSchema({
+*   passwordConfig: config.methods?.emailPassword,
+*   usernameConfig: config.plugins?.username,
+*   usernameEnabled: features.username,
+* });
 * ```
 */
-function defineSignupSchema(passwordConfig) {
-	const minPassword = passwordConfig?.minPasswordLength ?? 8;
-	const maxPassword = passwordConfig?.maxPasswordLength ?? 128;
-	return z.object({
+function defineSignupSchema(options) {
+	const minPassword = options?.passwordConfig?.minPasswordLength ?? 8;
+	const maxPassword = options?.passwordConfig?.maxPasswordLength ?? 128;
+	const minUsername = options?.usernameConfig?.minUsernameLength ?? 3;
+	const maxUsername = options?.usernameConfig?.maxUsernameLength ?? 32;
+	const baseSchema = z.object({
 		name: z.string().min(1, i18n.t("ui:validation.nameRequired")).max(100, i18n.t("ui:validation.nameMax", { max: 100 })),
 		email: z.email(i18n.t("ui:validation.emailInvalid")).min(1, i18n.t("ui:validation.emailRequired")),
 		password: z.string().min(minPassword, i18n.t("ui:validation.passwordMin", { min: minPassword })).max(maxPassword, i18n.t("ui:validation.passwordMax", { max: maxPassword }))
 	});
+	if (options?.usernameEnabled) return baseSchema.extend({ username: z.string().min(minUsername, i18n.t("ui:validation.usernameMin", { min: minUsername })).max(maxUsername, i18n.t("ui:validation.usernameMax", { max: maxUsername })).regex(/^[a-zA-Z0-9_-]+$/, i18n.t("ui:validation.usernameFormat")) });
+	return baseSchema;
 }
 function NameInput({ showIcon = false }) {
 	const id = useId();
@@ -3287,6 +4013,41 @@ function NameInput({ showIcon = false }) {
 		]
 	});
 }
+function UsernameInput({ showIcon = false }) {
+	const id = useId();
+	const { t: t$1 } = useTranslation$1(["ui"]);
+	const form = useFormContext();
+	const error = form?.formState?.errors?.username;
+	const hasError = !!error;
+	return /* @__PURE__ */ jsxs(Field, {
+		"data-invalid": hasError || void 0,
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: id,
+				children: t$1("ui:auth.signup.username")
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [showIcon && /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2",
+					children: /* @__PURE__ */ jsx(AtSignIcon, { className: "size-4 text-muted-foreground" })
+				}), /* @__PURE__ */ jsx(Input, {
+					id,
+					type: "text",
+					autoComplete: "username",
+					"aria-invalid": hasError,
+					"aria-describedby": hasError ? `${id}-error` : void 0,
+					className: cn(showIcon && "pl-10", "h-10"),
+					...form?.register("username")
+				})]
+			}),
+			error?.message && /* @__PURE__ */ jsx(FieldError, {
+				id: `${id}-error`,
+				children: String(error.message)
+			})
+		]
+	});
+}
 /**
 * Complete signup form with password strength indicator.
 * Renders based on enabled features in AuthFeatures.
@@ -3302,32 +4063,48 @@ function NameInput({ showIcon = false }) {
 * </AuthProvider>
 * ```
 */
-function SignupForm({ callbackURL, className, loginLink = "/login", title, description, logo, showSecurityIcon, showTermsCheckbox = false, termsUrl = "/terms", privacyUrl = "/privacy", onSuccess }) {
+function SignupForm({ callbackURL, className, loginLink = "/login", title, description, logo, showSecurityIcon, showTermsCheckbox = false, termsUrl = "/legal/terms", privacyUrl = "/legal/privacy-policy", onSuccess }) {
 	const { t: t$1 } = useTranslation$1(["ui"]);
 	const { client, config, features } = useAuth();
 	const { isLoading, error, execute } = useAuthForm();
+	const captcha = useCaptcha();
+	const [captchaToken, setCaptchaToken] = useState(null);
+	const captchaResetRef = useRef(null);
 	const form = useForm({
-		resolver: zodResolver(defineSignupSchema(config.methods?.emailPassword)),
+		resolver: zodResolver(defineSignupSchema({
+			passwordConfig: config.methods?.emailPassword,
+			usernameConfig: config.plugins?.username,
+			usernameEnabled: features.username
+		})),
 		defaultValues: {
 			name: "",
 			email: "",
-			password: ""
+			password: "",
+			...features.username && { username: "" }
 		},
 		mode: "onBlur"
 	});
 	const hasOAuth = Object.values(features.oauth).some(Boolean);
 	const hasAnyAuthMethod = features.emailPassword || hasOAuth;
 	const onSubmit = async (data) => {
-		if (await execute(async () => {
-			const response = await client.signUp.email({
+		const result = await execute(async () => {
+			const signUpData = {
 				name: data.name,
 				email: data.email,
 				password: data.password,
-				callbackURL
-			});
+				callbackURL,
+				fetchOptions: captchaToken ? { headers: { "x-captcha-response": captchaToken } } : void 0
+			};
+			if (features.username && "username" in data) signUpData.username = data.username;
+			const response = await client.signUp.email(signUpData);
 			if (response.error) throw new Error(response.error.message || t$1("ui:auth.common.signupFailed"));
 			return response;
-		})) onSuccess?.({ email: data.email });
+		});
+		if (!result) {
+			setCaptchaToken(null);
+			captchaResetRef.current?.();
+		}
+		if (result) onSuccess?.({ email: data.email });
 	};
 	const footer = loginLink && /* @__PURE__ */ jsxs("span", { children: [
 		t$1("ui:auth.signup.hasAccount"),
@@ -3380,6 +4157,7 @@ function SignupForm({ callbackURL, className, loginLink = "/login", title, descr
 					}), features.emailPassword && /* @__PURE__ */ jsx(FieldSeparator, { children: t$1("ui:auth.signup.orContinueWith") })] }),
 					features.emailPassword && /* @__PURE__ */ jsxs(Fragment, { children: [
 						/* @__PURE__ */ jsx(NameInput, { showIcon: true }),
+						features.username && /* @__PURE__ */ jsx(UsernameInput, { showIcon: true }),
 						/* @__PURE__ */ jsx(EmailInput, {
 							name: "email",
 							label: t$1("ui:auth.signup.email"),
@@ -3423,10 +4201,16 @@ function SignupForm({ callbackURL, className, loginLink = "/login", title, descr
 								]
 							})]
 						}),
+						captcha.enabled && /* @__PURE__ */ jsx(CaptchaWidget, {
+							onSuccess: setCaptchaToken,
+							onExpire: () => setCaptchaToken(null),
+							onError: () => setCaptchaToken(null),
+							resetRef: captchaResetRef
+						}),
 						/* @__PURE__ */ jsx(Button, {
 							type: "submit",
 							className: "h-10 w-full font-medium",
-							disabled: isLoading,
+							disabled: isLoading || captcha.enabled && !captchaToken,
 							children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }), t$1("ui:auth.signup.submitting")] }) : t$1("ui:auth.signup.submit")
 						})
 					] })
@@ -3457,6 +4241,9 @@ function SignupForm({ callbackURL, className, loginLink = "/login", title, descr
 function VerifyEmailForm({ token, email, callbackURL, className, loginLink = "/login", title, description, logo, onSuccess }) {
 	const { t: t$1 } = useTranslation$1(["ui"]);
 	const { client } = useAuth();
+	const captcha = useCaptcha();
+	const [captchaToken, setCaptchaToken] = useState(null);
+	const captchaResetRef = useRef(null);
 	const { isLoading, error, isSuccess, execute, setError } = useAuthForm();
 	const [resendSuccess, setResendSuccess] = useState(false);
 	const [countdown, setCountdown] = useState(0);
@@ -3507,14 +4294,20 @@ function VerifyEmailForm({ token, email, callbackURL, className, loginLink = "/l
 			return;
 		}
 		setResendSuccess(false);
-		if (await execute(async () => {
+		const result = await execute(async () => {
 			const response = await client.sendVerificationEmail({
 				email,
-				callbackURL
+				callbackURL,
+				fetchOptions: captchaToken ? { headers: { "x-captcha-response": captchaToken } } : void 0
 			});
 			if (response.error) throw new Error(response.error.message || t$1("ui:auth.errors.generic"));
 			return response;
-		})) {
+		});
+		if (!result) {
+			setCaptchaToken(null);
+			captchaResetRef.current?.();
+		}
+		if (result) {
 			setResendSuccess(true);
 			startCountdown();
 		}
@@ -3588,10 +4381,16 @@ function VerifyEmailForm({ token, email, callbackURL, className, loginLink = "/l
 					variant: "destructive",
 					children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-4" }), /* @__PURE__ */ jsx(AlertDescription, { children: error })]
 				}),
+				email && captcha.enabled && /* @__PURE__ */ jsx(CaptchaWidget, {
+					onSuccess: setCaptchaToken,
+					onExpire: () => setCaptchaToken(null),
+					onError: () => setCaptchaToken(null),
+					resetRef: captchaResetRef
+				}),
 				email && /* @__PURE__ */ jsxs(Button, {
 					className: "h-10 w-full font-medium",
 					onClick: handleResend,
-					disabled: isLoading || countdown > 0,
+					disabled: isLoading || countdown > 0 || captcha.enabled && !captchaToken,
 					children: [isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }) : /* @__PURE__ */ jsx(RefreshCwIcon, { className: "mr-2 size-4" }), countdown > 0 ? t$1("ui:auth.otp.resendIn", { seconds: countdown }) : t$1("ui:auth.verifyEmail.resend")]
 				})
 			]
@@ -3629,10 +4428,16 @@ function VerifyEmailForm({ token, email, callbackURL, className, loginLink = "/l
 					variant: "success",
 					children: [/* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4" }), /* @__PURE__ */ jsx(AlertDescription, { children: t$1("ui:auth.verifyEmail.resendSuccess") })]
 				}),
+				email && captcha.enabled && /* @__PURE__ */ jsx(CaptchaWidget, {
+					onSuccess: setCaptchaToken,
+					onExpire: () => setCaptchaToken(null),
+					onError: () => setCaptchaToken(null),
+					resetRef: captchaResetRef
+				}),
 				email && /* @__PURE__ */ jsxs(Button, {
 					className: "h-10 w-full font-medium",
 					onClick: handleResend,
-					disabled: isLoading || countdown > 0,
+					disabled: isLoading || countdown > 0 || captcha.enabled && !captchaToken,
 					children: [isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }) : /* @__PURE__ */ jsx(RefreshCwIcon, { className: "mr-2 size-4" }), countdown > 0 ? t$1("ui:auth.otp.resendIn", { seconds: countdown }) : t$1("ui:auth.verifyEmail.resend")]
 				})
 			]
@@ -3688,6 +4493,23 @@ function PasskeyRegisterButton({ className, disabled, label, onSuccess, onError
 
 //#endregion
 //#region src/web/ui/accordion.tsx
+/**
+* A vertically stacked set of interactive headings that reveal content sections.
+*
+* Use accordions to organize content into collapsible sections, reducing visual
+* clutter while keeping information accessible. Supports single or multiple
+* expanded items.
+*
+* @example
+* ```tsx
+* <Accordion>
+*   <AccordionItem value="item-1">
+*     <AccordionTrigger>Section Title</AccordionTrigger>
+*     <AccordionContent>Section content goes here.</AccordionContent>
+*   </AccordionItem>
+* </Accordion>
+* ```
+*/
 function Accordion({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Root, {
 		"data-slot": "accordion",
@@ -3695,6 +4517,20 @@ function Accordion({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A single collapsible section within an Accordion.
+*
+* Each item contains a trigger and content panel. The `value` prop uniquely
+* identifies this item for controlled state management.
+*
+* @example
+* ```tsx
+* <AccordionItem value="faq-1">
+*   <AccordionTrigger>What is this?</AccordionTrigger>
+*   <AccordionContent>This is an accordion item.</AccordionContent>
+* </AccordionItem>
+* ```
+*/
 function AccordionItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Item, {
 		"data-slot": "accordion-item",
@@ -3702,6 +4538,17 @@ function AccordionItem({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The clickable header that toggles the accordion content visibility.
+*
+* Includes an animated chevron icon that rotates based on the expanded state.
+* Supports keyboard navigation and focus management.
+*
+* @example
+* ```tsx
+* <AccordionTrigger>Click to expand</AccordionTrigger>
+* ```
+*/
 function AccordionTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Header, {
 		className: "flex",
@@ -3723,6 +4570,19 @@ function AccordionTrigger({ className, children, ...props }) {
 		})
 	});
 }
+/**
+* The collapsible content panel of an accordion item.
+*
+* Animates smoothly when expanding and collapsing. Content is hidden from
+* screen readers when collapsed.
+*
+* @example
+* ```tsx
+* <AccordionContent>
+*   <p>This content is revealed when the accordion is expanded.</p>
+* </AccordionContent>
+* ```
+*/
 function AccordionContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Panel, {
 		"data-slot": "accordion-content",
@@ -3737,24 +4597,72 @@ function AccordionContent({ className, children, ...props }) {
 
 //#endregion
 //#region src/web/ui/alert-dialog.tsx
+/**
+* A modal dialog that interrupts the user with important content and expects a response.
+*
+* Use for destructive actions or critical decisions that require explicit user
+* confirmation. Prevents interaction with the rest of the page until dismissed.
+*
+* @example
+* ```tsx
+* <AlertDialog>
+*   <AlertDialogTrigger render={<Button variant="destructive" />}>
+*     Delete Account
+*   </AlertDialogTrigger>
+*   <AlertDialogContent>
+*     <AlertDialogHeader>
+*       <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+*       <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+*     </AlertDialogHeader>
+*     <AlertDialogFooter>
+*       <AlertDialogCancel>Cancel</AlertDialogCancel>
+*       <AlertDialogAction>Continue</AlertDialogAction>
+*     </AlertDialogFooter>
+*   </AlertDialogContent>
+* </AlertDialog>
+* ```
+*/
 function AlertDialog({ ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Root, {
 		"data-slot": "alert-dialog",
 		...props
 	});
 }
+/**
+* The button that opens the alert dialog.
+*
+* Use the `render` prop to customize the trigger element while maintaining
+* proper accessibility attributes.
+*
+* @example
+* ```tsx
+* <AlertDialogTrigger render={<Button />}>Open Dialog</AlertDialogTrigger>
+* ```
+*/
 function AlertDialogTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
 		"data-slot": "alert-dialog-trigger",
 		...props
 	});
 }
+/**
+* Portals the dialog content to the end of the document body.
+*
+* Used internally by AlertDialogContent. Ensures the dialog renders above
+* other content regardless of DOM position.
+*/
 function AlertDialogPortal({ ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Portal, {
 		"data-slot": "alert-dialog-portal",
 		...props
 	});
 }
+/**
+* The backdrop overlay behind the alert dialog.
+*
+* Dims the background and prevents interaction with the page. Includes
+* blur effect on supported browsers. Used internally by AlertDialogContent.
+*/
 function AlertDialogOverlay({ className, ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
 		"data-slot": "alert-dialog-overlay",
@@ -3762,6 +4670,20 @@ function AlertDialogOverlay({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The container for the alert dialog content.
+*
+* Centers the dialog on screen with smooth open/close animations. Includes
+* the portal and overlay automatically.
+*
+* @example
+* ```tsx
+* <AlertDialogContent size="sm">
+*   <AlertDialogHeader>...</AlertDialogHeader>
+*   <AlertDialogFooter>...</AlertDialogFooter>
+* </AlertDialogContent>
+* ```
+*/
 function AlertDialogContent({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
 		"data-slot": "alert-dialog-content",
@@ -3770,6 +4692,19 @@ function AlertDialogContent({ className, size = "default", ...props }) {
 		...props
 	})] });
 }
+/**
+* The header section containing the dialog title and description.
+*
+* Handles layout for optional media icon and adapts to different dialog sizes.
+*
+* @example
+* ```tsx
+* <AlertDialogHeader>
+*   <AlertDialogTitle>Confirm Action</AlertDialogTitle>
+*   <AlertDialogDescription>This will affect your data.</AlertDialogDescription>
+* </AlertDialogHeader>
+* ```
+*/
 function AlertDialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-header",
@@ -3777,6 +4712,19 @@ function AlertDialogHeader({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The footer section containing dialog action buttons.
+*
+* Arranges buttons in a responsive layout with proper spacing.
+*
+* @example
+* ```tsx
+* <AlertDialogFooter>
+*   <AlertDialogCancel>Cancel</AlertDialogCancel>
+*   <AlertDialogAction>Confirm</AlertDialogAction>
+* </AlertDialogFooter>
+* ```
+*/
 function AlertDialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-footer",
@@ -3784,6 +4732,18 @@ function AlertDialogFooter({ className, ...props }) {
 		...props
 	});
 }
+/**
+* An optional media container for icons or images in the dialog header.
+*
+* Displays prominently above or beside the title depending on dialog size.
+*
+* @example
+* ```tsx
+* <AlertDialogMedia>
+*   <AlertTriangleIcon />
+* </AlertDialogMedia>
+* ```
+*/
 function AlertDialogMedia({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-media",
@@ -3791,6 +4751,16 @@ function AlertDialogMedia({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The title text for the alert dialog.
+*
+* Displayed prominently and announced by screen readers when the dialog opens.
+*
+* @example
+* ```tsx
+* <AlertDialogTitle>Delete Item</AlertDialogTitle>
+* ```
+*/
 function AlertDialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
 		"data-slot": "alert-dialog-title",
@@ -3798,13 +4768,35 @@ function AlertDialogTitle({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The descriptive text explaining the alert dialog purpose.
+*
+* Provides context about the action and its consequences.
+*
+* @example
+* ```tsx
+* <AlertDialogDescription>
+*   This action cannot be undone. Your data will be permanently removed.
+* </AlertDialogDescription>
+* ```
+*/
 function AlertDialogDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
 		"data-slot": "alert-dialog-description",
-		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className),
+		className: cn("text-foreground/70 *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className),
 		...props
 	});
 }
+/**
+* The primary action button that confirms the dialog action.
+*
+* Styled as the default button variant. Does not automatically close the dialog.
+*
+* @example
+* ```tsx
+* <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
+* ```
+*/
 function AlertDialogAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
 		"data-slot": "alert-dialog-action",
@@ -3812,6 +4804,16 @@ function AlertDialogAction({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The cancel button that dismisses the dialog without taking action.
+*
+* Automatically closes the dialog when clicked. Styled as outline variant by default.
+*
+* @example
+* ```tsx
+* <AlertDialogCancel>Cancel</AlertDialogCancel>
+* ```
+*/
 function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
 		"data-slot": "alert-dialog-cancel",
@@ -3826,6 +4828,19 @@ function AlertDialogCancel({ className, variant = "outline", size = "default", .
 
 //#endregion
 //#region src/web/ui/aspect-ratio.tsx
+/**
+* A container that maintains a specific aspect ratio for its content.
+*
+* Useful for images, videos, and embedded content that need to maintain
+* consistent proportions across different viewport sizes.
+*
+* @example
+* ```tsx
+* <AspectRatio ratio={16 / 9}>
+*   <img src="/image.jpg" alt="Landscape" className="object-cover" />
+* </AspectRatio>
+* ```
+*/
 function AspectRatio({ ratio, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "aspect-ratio",
@@ -3837,6 +4852,21 @@ function AspectRatio({ ratio, className, ...props }) {
 
 //#endregion
 //#region src/web/ui/avatar.tsx
+/**
+* A circular image element for representing users or entities.
+*
+* Supports multiple sizes and integrates with AvatarImage for the photo,
+* AvatarFallback for initials when no image is available, and AvatarBadge
+* for status indicators.
+*
+* @example
+* ```tsx
+* <Avatar>
+*   <AvatarImage src="/user.jpg" alt="John Doe" />
+*   <AvatarFallback>JD</AvatarFallback>
+* </Avatar>
+* ```
+*/
 function Avatar({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		"data-slot": "avatar",
@@ -3845,6 +4875,17 @@ function Avatar({ className, size = "default", ...props }) {
 		...props
 	});
 }
+/**
+* The image element displayed within an Avatar.
+*
+* Automatically scales to fill the avatar container and handles image loading.
+* Falls back to AvatarFallback when the image fails to load.
+*
+* @example
+* ```tsx
+* <AvatarImage src="/profile.jpg" alt="User profile" />
+* ```
+*/
 function AvatarImage({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Image, {
 		"data-slot": "avatar-image",
@@ -3852,6 +4893,17 @@ function AvatarImage({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A fallback element displayed when the Avatar image is unavailable.
+*
+* Typically contains user initials or a placeholder icon. Automatically shown
+* when AvatarImage fails to load or is not provided.
+*
+* @example
+* ```tsx
+* <AvatarFallback>JD</AvatarFallback>
+* ```
+*/
 function AvatarFallback({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
 		"data-slot": "avatar-fallback",
@@ -3859,6 +4911,20 @@ function AvatarFallback({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A status indicator badge positioned at the corner of an Avatar.
+*
+* Use for online/offline status, notification counts, or verification badges.
+* Automatically sizes based on the parent Avatar size.
+*
+* @example
+* ```tsx
+* <Avatar>
+*   <AvatarImage src="/user.jpg" alt="John Doe" />
+*   <AvatarBadge />
+* </Avatar>
+* ```
+*/
 function AvatarBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "avatar-badge",
@@ -3866,6 +4932,25 @@ function AvatarBadge({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A container for displaying multiple avatars in an overlapping stack.
+*
+* Automatically handles negative spacing and ring styles for visual separation.
+* Commonly used for displaying team members or participants.
+*
+* @example
+* ```tsx
+* <AvatarGroup>
+*   <Avatar>
+*     <AvatarImage src="/user1.jpg" alt="User 1" />
+*   </Avatar>
+*   <Avatar>
+*     <AvatarImage src="/user2.jpg" alt="User 2" />
+*   </Avatar>
+*   <AvatarGroupCount>+5</AvatarGroupCount>
+* </AvatarGroup>
+* ```
+*/
 function AvatarGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "avatar-group",
@@ -3873,6 +4958,17 @@ function AvatarGroup({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A count indicator for an AvatarGroup showing additional members.
+*
+* Displays remaining count when not all avatars are shown. Styled to match
+* the avatar sizes within the group.
+*
+* @example
+* ```tsx
+* <AvatarGroupCount>+12</AvatarGroupCount>
+* ```
+*/
 function AvatarGroupCount({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "avatar-group-count",
@@ -3881,36 +4977,29 @@ function AvatarGroupCount({ className, ...props }) {
 	});
 }
 
-//#endregion
-//#region src/web/ui/badge.tsx
-const badgeVariants = cva("h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge", {
-	variants: { variant: {
-		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-		destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
-		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-		link: "text-primary underline-offset-4 hover:underline"
-	} },
-	defaultVariants: { variant: "default" }
-});
-function Badge({ className, variant = "default", render, ...props }) {
-	return useRender({
-		defaultTagName: "span",
-		props: mergeProps({ className: cn(badgeVariants({
-			className,
-			variant
-		})) }, props),
-		render,
-		state: {
-			slot: "badge",
-			variant
-		}
-	});
-}
-
 //#endregion
 //#region src/web/ui/breadcrumb.tsx
+/**
+* A navigation component that shows the user's current location in a hierarchy.
+*
+* Helps users understand their position within a site structure and navigate
+* back to parent pages. Includes proper accessibility attributes.
+*
+* @example
+* ```tsx
+* <Breadcrumb>
+*   <BreadcrumbList>
+*     <BreadcrumbItem>
+*       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+*     </BreadcrumbItem>
+*     <BreadcrumbSeparator />
+*     <BreadcrumbItem>
+*       <BreadcrumbPage>Current Page</BreadcrumbPage>
+*     </BreadcrumbItem>
+*   </BreadcrumbList>
+* </Breadcrumb>
+* ```
+*/
 function Breadcrumb({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "breadcrumb",
@@ -3919,6 +5008,18 @@ function Breadcrumb({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The ordered list container for breadcrumb items.
+*
+* Wraps BreadcrumbItem components and handles flex layout with proper spacing.
+*
+* @example
+* ```tsx
+* <BreadcrumbList>
+*   <BreadcrumbItem>...</BreadcrumbItem>
+* </BreadcrumbList>
+* ```
+*/
 function BreadcrumbList({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ol", {
 		"data-slot": "breadcrumb-list",
@@ -3926,6 +5027,19 @@ function BreadcrumbList({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A single item in the breadcrumb navigation.
+*
+* Contains either a BreadcrumbLink for navigable items or BreadcrumbPage
+* for the current page indicator.
+*
+* @example
+* ```tsx
+* <BreadcrumbItem>
+*   <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+* </BreadcrumbItem>
+* ```
+*/
 function BreadcrumbItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx("li", {
 		"data-slot": "breadcrumb-item",
@@ -3933,6 +5047,17 @@ function BreadcrumbItem({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A navigable link within a breadcrumb item.
+*
+* Use for all breadcrumb levels except the current page. Supports custom
+* rendering via the `render` prop for integration with routing libraries.
+*
+* @example
+* ```tsx
+* <BreadcrumbLink href="/dashboard">Dashboard</BreadcrumbLink>
+* ```
+*/
 function BreadcrumbLink({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "a",
@@ -3941,6 +5066,17 @@ function BreadcrumbLink({ className, render, ...props }) {
 		state: { slot: "breadcrumb-link" }
 	});
 }
+/**
+* The current page indicator in a breadcrumb trail.
+*
+* Non-interactive element that represents the user's current location.
+* Includes proper ARIA attributes for accessibility.
+*
+* @example
+* ```tsx
+* <BreadcrumbPage>Settings</BreadcrumbPage>
+* ```
+*/
 function BreadcrumbPage({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "breadcrumb-page",
@@ -3951,6 +5087,18 @@ function BreadcrumbPage({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A visual separator between breadcrumb items.
+*
+* Displays a chevron icon by default but accepts custom children.
+* Hidden from screen readers as it's purely decorative.
+*
+* @example
+* ```tsx
+* <BreadcrumbSeparator />
+* <BreadcrumbSeparator>/</BreadcrumbSeparator>
+* ```
+*/
 function BreadcrumbSeparator({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx("li", {
 		"data-slot": "breadcrumb-separator",
@@ -3961,6 +5109,19 @@ function BreadcrumbSeparator({ children, className, ...props }) {
 		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
 	});
 }
+/**
+* An ellipsis indicator for truncated breadcrumb trails.
+*
+* Use when there are too many levels to display. Often combined with a
+* dropdown menu to show hidden items.
+*
+* @example
+* ```tsx
+* <BreadcrumbItem>
+*   <BreadcrumbEllipsis />
+* </BreadcrumbItem>
+* ```
+*/
 function BreadcrumbEllipsis({ className, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {
 		"data-slot": "breadcrumb-ellipsis",
@@ -4016,7 +5177,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 	const defaultClassNames = getDefaultClassNames();
 	return /* @__PURE__ */ jsx(DayPicker, {
 		showOutsideDays,
-		className: cn("p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
+		className: cn("p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
 		captionLayout,
 		formatters: {
 			formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
@@ -4389,30 +5550,85 @@ function CollapsibleContent({ ...props }) {
 
 //#endregion
 //#region src/web/ui/dialog.tsx
+/**
+* A modal window that appears above the page content.
+*
+* Use for focused tasks like forms, confirmations, or displaying detailed
+* information. Traps focus and prevents interaction with the background.
+*
+* @example
+* ```tsx
+* <Dialog>
+*   <DialogTrigger render={<Button />}>Open Dialog</DialogTrigger>
+*   <DialogContent>
+*     <DialogHeader>
+*       <DialogTitle>Edit Profile</DialogTitle>
+*       <DialogDescription>Make changes to your profile.</DialogDescription>
+*     </DialogHeader>
+*     <DialogFooter>
+*       <Button>Save changes</Button>
+*     </DialogFooter>
+*   </DialogContent>
+* </Dialog>
+* ```
+*/
 function Dialog({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Root, {
 		"data-slot": "dialog",
 		...props
 	});
 }
+/**
+* The button that opens the dialog.
+*
+* Use the `render` prop to customize the trigger element while maintaining
+* proper accessibility attributes.
+*
+* @example
+* ```tsx
+* <DialogTrigger render={<Button />}>Open</DialogTrigger>
+* ```
+*/
 function DialogTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
 		"data-slot": "dialog-trigger",
 		...props
 	});
 }
+/**
+* Portals the dialog content to the end of the document body.
+*
+* Used internally by DialogContent. Ensures the dialog renders above
+* other content regardless of DOM position.
+*/
 function DialogPortal({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
 		"data-slot": "dialog-portal",
 		...props
 	});
 }
+/**
+* A button that closes the dialog when clicked.
+*
+* Can be placed anywhere within the dialog content.
+*
+* @example
+* ```tsx
+* <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
+* ```
+*/
 function DialogClose({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Close, {
 		"data-slot": "dialog-close",
 		...props
 	});
 }
+/**
+* The backdrop overlay behind the dialog.
+*
+* Dims the background and prevents interaction with the page. Includes
+* blur effect on supported browsers. Used internally by DialogContent.
+*/
 function DialogOverlay({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
 		"data-slot": "dialog-overlay",
@@ -4420,6 +5636,20 @@ function DialogOverlay({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The container for the dialog content.
+*
+* Centers the dialog on screen with smooth open/close animations. Includes
+* the portal and overlay automatically. Optionally shows a close button.
+*
+* @example
+* ```tsx
+* <DialogContent>
+*   <DialogHeader>...</DialogHeader>
+*   <DialogFooter>...</DialogFooter>
+* </DialogContent>
+* ```
+*/
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
 		"data-slot": "dialog-content",
@@ -4439,6 +5669,19 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 		})]
 	})] });
 }
+/**
+* The header section containing the dialog title and description.
+*
+* Provides consistent spacing and layout for dialog headers.
+*
+* @example
+* ```tsx
+* <DialogHeader>
+*   <DialogTitle>Edit Settings</DialogTitle>
+*   <DialogDescription>Configure your preferences.</DialogDescription>
+* </DialogHeader>
+* ```
+*/
 function DialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-header",
@@ -4446,6 +5689,20 @@ function DialogHeader({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The footer section containing dialog action buttons.
+*
+* Arranges buttons in a responsive layout with proper spacing.
+* Optionally includes a close button.
+*
+* @example
+* ```tsx
+* <DialogFooter>
+*   <Button variant="outline">Cancel</Button>
+*   <Button>Save</Button>
+* </DialogFooter>
+* ```
+*/
 function DialogFooter({ className, showCloseButton = false, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "dialog-footer",
@@ -4457,6 +5714,16 @@ function DialogFooter({ className, showCloseButton = false, children, ...props }
 		})]
 	});
 }
+/**
+* The title text for the dialog.
+*
+* Displayed prominently and announced by screen readers when the dialog opens.
+*
+* @example
+* ```tsx
+* <DialogTitle>Confirm Action</DialogTitle>
+* ```
+*/
 function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Title, {
 		"data-slot": "dialog-title",
@@ -4464,6 +5731,18 @@ function DialogTitle({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The descriptive text explaining the dialog purpose.
+*
+* Provides context about the action or content within the dialog.
+*
+* @example
+* ```tsx
+* <DialogDescription>
+*   This action cannot be undone. Please confirm your choice.
+* </DialogDescription>
+* ```
+*/
 function DialogDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Description, {
 		"data-slot": "dialog-description",
@@ -4474,6 +5753,17 @@ function DialogDescription({ className, ...props }) {
 
 //#endregion
 //#region src/web/ui/textarea.tsx
+/**
+* A multi-line text input field.
+*
+* Use for longer text content like comments, descriptions, or messages.
+* Automatically expands based on content with a minimum height.
+*
+* @example
+* ```tsx
+* <Textarea placeholder="Enter your message..." />
+* ```
+*/
 function Textarea({ className, ...props }) {
 	return /* @__PURE__ */ jsx("textarea", {
 		"data-slot": "textarea",
@@ -5405,6 +6695,29 @@ function NavigationMenuIndicator({ className, ...props }) {
 
 //#endregion
 //#region src/web/ui/pagination.tsx
+/**
+* A navigation component for moving between pages of content.
+*
+* Provides a consistent interface for paginated data. Includes proper
+* ARIA attributes for accessibility.
+*
+* @example
+* ```tsx
+* <Pagination>
+*   <PaginationContent>
+*     <PaginationItem>
+*       <PaginationPrevious href="/page/1" />
+*     </PaginationItem>
+*     <PaginationItem>
+*       <PaginationLink href="/page/2">2</PaginationLink>
+*     </PaginationItem>
+*     <PaginationItem>
+*       <PaginationNext href="/page/3" />
+*     </PaginationItem>
+*   </PaginationContent>
+* </Pagination>
+* ```
+*/
 function Pagination({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "pagination",
@@ -5413,6 +6726,18 @@ function Pagination({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The container for pagination items.
+*
+* Wraps PaginationItem components in a horizontal flex layout.
+*
+* @example
+* ```tsx
+* <PaginationContent>
+*   <PaginationItem>...</PaginationItem>
+* </PaginationContent>
+* ```
+*/
 function PaginationContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "pagination-content",
@@ -5420,12 +6745,35 @@ function PaginationContent({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A single item wrapper in the pagination list.
+*
+* Contains a PaginationLink, PaginationPrevious, PaginationNext, or PaginationEllipsis.
+*
+* @example
+* ```tsx
+* <PaginationItem>
+*   <PaginationLink href="/page/1">1</PaginationLink>
+* </PaginationItem>
+* ```
+*/
 function PaginationItem({ ...props }) {
 	return /* @__PURE__ */ jsx("li", {
 		"data-slot": "pagination-item",
 		...props
 	});
 }
+/**
+* A clickable link to a specific page number.
+*
+* Displays as active when representing the current page. Renders as a
+* button styled anchor element.
+*
+* @example
+* ```tsx
+* <PaginationLink href="/page/1" isActive>1</PaginationLink>
+* ```
+*/
 function PaginationLink({ className, isActive, size = "icon", ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
 		variant: isActive ? "outline" : "ghost",
@@ -5440,6 +6788,16 @@ function PaginationLink({ className, isActive, size = "icon", ...props }) {
 		})
 	});
 }
+/**
+* A link to the previous page with chevron icon.
+*
+* Shows "Previous" text on larger screens. Includes accessible label.
+*
+* @example
+* ```tsx
+* <PaginationPrevious href="/page/1" />
+* ```
+*/
 function PaginationPrevious({ className, ...props }) {
 	return /* @__PURE__ */ jsxs(PaginationLink, {
 		"aria-label": "Go to previous page",
@@ -5452,6 +6810,16 @@ function PaginationPrevious({ className, ...props }) {
 		})]
 	});
 }
+/**
+* A link to the next page with chevron icon.
+*
+* Shows "Next" text on larger screens. Includes accessible label.
+*
+* @example
+* ```tsx
+* <PaginationNext href="/page/3" />
+* ```
+*/
 function PaginationNext({ className, ...props }) {
 	return /* @__PURE__ */ jsxs(PaginationLink, {
 		"aria-label": "Go to next page",
@@ -5464,6 +6832,19 @@ function PaginationNext({ className, ...props }) {
 		}), /* @__PURE__ */ jsx(ChevronRightIcon, { "data-icon": "inline-end" })]
 	});
 }
+/**
+* An ellipsis indicator for skipped page numbers.
+*
+* Use when there are too many pages to display all links. Hidden from
+* screen readers with accessible fallback text.
+*
+* @example
+* ```tsx
+* <PaginationItem>
+*   <PaginationEllipsis />
+* </PaginationItem>
+* ```
+*/
 function PaginationEllipsis({ className, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {
 		"aria-hidden": true,
@@ -5529,6 +6910,20 @@ function PopoverDescription({ className, ...props }) {
 
 //#endregion
 //#region src/web/ui/progress.tsx
+/**
+* A visual indicator showing the completion progress of a task.
+*
+* Displays a horizontal bar that fills based on the value prop.
+* Use for upload progress, multi-step forms, or loading states.
+*
+* @example
+* ```tsx
+* <Progress value={60}>
+*   <ProgressLabel>Uploading...</ProgressLabel>
+*   <ProgressValue />
+* </Progress>
+* ```
+*/
 function Progress({ className, children, value, ...props }) {
 	return /* @__PURE__ */ jsxs(Progress$1.Root, {
 		value,
@@ -5538,6 +6933,12 @@ function Progress({ className, children, value, ...props }) {
 		children: [children, /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) })]
 	});
 }
+/**
+* The background track of the progress bar.
+*
+* Contains the ProgressIndicator that shows the filled portion.
+* Used internally by Progress.
+*/
 function ProgressTrack({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Progress$1.Track, {
 		className: cn("bg-muted h-1.5 rounded-full relative flex w-full items-center overflow-x-hidden", className),
@@ -5545,6 +6946,12 @@ function ProgressTrack({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The filled portion of the progress bar.
+*
+* Animates width based on the parent Progress value.
+* Used internally by Progress.
+*/
 function ProgressIndicator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Progress$1.Indicator, {
 		"data-slot": "progress-indicator",
@@ -5552,6 +6959,16 @@ function ProgressIndicator({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A descriptive label for the progress bar.
+*
+* Displays above the progress track to describe what is being measured.
+*
+* @example
+* ```tsx
+* <ProgressLabel>Uploading files...</ProgressLabel>
+* ```
+*/
 function ProgressLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Progress$1.Label, {
 		className: cn("text-sm font-medium", className),
@@ -5559,6 +6976,16 @@ function ProgressLabel({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A numeric display of the progress percentage.
+*
+* Automatically shows the current progress value as a percentage.
+*
+* @example
+* ```tsx
+* <ProgressValue />
+* ```
+*/
 function ProgressValue({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Progress$1.Value, {
 		className: cn("text-muted-foreground ml-auto text-sm tabular-nums", className),
@@ -5647,7 +7074,39 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 
 //#endregion
 //#region src/web/ui/select.tsx
+/**
+* A dropdown for selecting a single value from a list of options.
+*
+* Provides a native-like select experience with custom styling. Supports
+* keyboard navigation, search, and grouping of options.
+*
+* @example
+* ```tsx
+* <Select>
+*   <SelectTrigger>
+*     <SelectValue placeholder="Select an option" />
+*   </SelectTrigger>
+*   <SelectContent>
+*     <SelectItem value="apple">Apple</SelectItem>
+*     <SelectItem value="banana">Banana</SelectItem>
+*   </SelectContent>
+* </Select>
+* ```
+*/
 const Select = Select$1.Root;
+/**
+* A container for grouping related SelectItem components.
+*
+* Use with SelectLabel to create labeled groups of options.
+*
+* @example
+* ```tsx
+* <SelectGroup>
+*   <SelectLabel>Fruits</SelectLabel>
+*   <SelectItem value="apple">Apple</SelectItem>
+* </SelectGroup>
+* ```
+*/
 function SelectGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Group, {
 		"data-slot": "select-group",
@@ -5655,6 +7114,16 @@ function SelectGroup({ className, ...props }) {
 		...props
 	});
 }
+/**
+* Displays the currently selected value in the trigger.
+*
+* Shows a placeholder when no value is selected.
+*
+* @example
+* ```tsx
+* <SelectValue placeholder="Select a fruit" />
+* ```
+*/
 function SelectValue({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Value, {
 		"data-slot": "select-value",
@@ -5662,6 +7131,19 @@ function SelectValue({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The button that opens the select dropdown.
+*
+* Displays the SelectValue and a dropdown indicator icon.
+* Supports multiple sizes.
+*
+* @example
+* ```tsx
+* <SelectTrigger>
+*   <SelectValue placeholder="Select..." />
+* </SelectTrigger>
+* ```
+*/
 function SelectTrigger({ className, size = "default", children, ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
 		"data-slot": "select-trigger",
@@ -5671,6 +7153,20 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
 		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground size-4 pointer-events-none" }) })]
 	});
 }
+/**
+* The dropdown popup containing the select options.
+*
+* Positions relative to the trigger with scroll buttons for long lists.
+* Supports alignment and side positioning options.
+*
+* @example
+* ```tsx
+* <SelectContent>
+*   <SelectItem value="1">Option 1</SelectItem>
+*   <SelectItem value="2">Option 2</SelectItem>
+* </SelectContent>
+* ```
+*/
 function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
 		side,
@@ -5691,6 +7187,16 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
 		})
 	}) });
 }
+/**
+* A label for a SelectGroup.
+*
+* Displays in muted style above the group's items.
+*
+* @example
+* ```tsx
+* <SelectLabel>Category</SelectLabel>
+* ```
+*/
 function SelectLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
 		"data-slot": "select-label",
@@ -5698,6 +7204,17 @@ function SelectLabel({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A single selectable option in the dropdown.
+*
+* Displays a checkmark when selected. Supports keyboard navigation
+* and focus states.
+*
+* @example
+* ```tsx
+* <SelectItem value="apple">Apple</SelectItem>
+* ```
+*/
 function SelectItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Item, {
 		"data-slot": "select-item",
@@ -5712,6 +7229,16 @@ function SelectItem({ className, children, ...props }) {
 		})]
 	});
 }
+/**
+* A horizontal line separating groups of select items.
+*
+* Use to visually divide different sections of options.
+*
+* @example
+* ```tsx
+* <SelectSeparator />
+* ```
+*/
 function SelectSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Separator, {
 		"data-slot": "select-separator",
@@ -5719,6 +7246,12 @@ function SelectSeparator({ className, ...props }) {
 		...props
 	});
 }
+/**
+* A scroll indicator button at the top of the select dropdown.
+*
+* Appears when content is scrollable and there are items above the viewport.
+* Used internally by SelectContent.
+*/
 function SelectScrollUpButton({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
 		"data-slot": "select-scroll-up-button",
@@ -5727,6 +7260,12 @@ function SelectScrollUpButton({ className, ...props }) {
 		children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
 	});
 }
+/**
+* A scroll indicator button at the bottom of the select dropdown.
+*
+* Appears when content is scrollable and there are items below the viewport.
+* Used internally by SelectContent.
+*/
 function SelectScrollDownButton({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
 		"data-slot": "select-scroll-down-button",
@@ -5820,6 +7359,18 @@ function SheetDescription({ className, ...props }) {
 
 //#endregion
 //#region src/web/ui/skeleton.tsx
+/**
+* A placeholder component showing a pulsing animation while content loads.
+*
+* Use to indicate loading states and reduce layout shift. Apply appropriate
+* width and height classes to match the expected content dimensions.
+*
+* @example
+* ```tsx
+* <Skeleton className="h-4 w-32" />
+* <Skeleton className="h-12 w-12 rounded-full" />
+* ```
+*/
 function Skeleton({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "skeleton",
@@ -5830,6 +7381,12 @@ function Skeleton({ className, ...props }) {
 
 //#endregion
 //#region src/web/ui/tooltip.tsx
+/**
+* Provides shared delay configuration for child tooltips.
+*
+* Used internally by Tooltip. Can be used explicitly to share delay
+* settings across multiple tooltips.
+*/
 function TooltipProvider({ delay = 0, ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
 		"data-slot": "tooltip-provider",
@@ -5837,18 +7394,59 @@ function TooltipProvider({ delay = 0, ...props }) {
 		...props
 	});
 }
+/**
+* A popup that displays information on hover or focus.
+*
+* Use for additional context about UI elements. Shows after a brief
+* delay when hovering or focusing the trigger.
+*
+* @example
+* ```tsx
+* <Tooltip>
+*   <TooltipTrigger>
+*     <Button variant="ghost" size="icon">?</Button>
+*   </TooltipTrigger>
+*   <TooltipContent>Help information</TooltipContent>
+* </Tooltip>
+* ```
+*/
 function Tooltip({ ...props }) {
 	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Tooltip$1.Root, {
 		"data-slot": "tooltip",
 		...props
 	}) });
 }
+/**
+* The element that triggers the tooltip on hover or focus.
+*
+* Wraps any interactive element to enable tooltip behavior.
+*
+* @example
+* ```tsx
+* <TooltipTrigger>
+*   <Button>Hover me</Button>
+* </TooltipTrigger>
+* ```
+*/
 function TooltipTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
 		"data-slot": "tooltip-trigger",
 		...props
 	});
 }
+/**
+* The popup content displayed when the tooltip is visible.
+*
+* Supports positioning relative to the trigger with smooth animations.
+* Includes an arrow pointing to the trigger.
+*
+* @example
+* ```tsx
+* <TooltipContent side="bottom">
+*   This is tooltip content
+* </TooltipContent>
+* ```
+*/
 function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
 		align,
@@ -6231,6 +7829,18 @@ function SidebarMenuSubButton({ render, size = "md", isActive = false, className
 
 //#endregion
 //#region src/web/ui/slider.tsx
+/**
+* A control for selecting a numeric value within a range.
+*
+* Supports single value or range selection with draggable thumbs.
+* Works with both horizontal and vertical orientations.
+*
+* @example
+* ```tsx
+* <Slider defaultValue={[50]} max={100} step={1} />
+* <Slider defaultValue={[25, 75]} max={100} />
+* ```
+*/
 function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
 	const _values = React.useMemo(() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [
 		value,
@@ -6291,6 +7901,18 @@ const Toaster = ({ ...props }) => {
 
 //#endregion
 //#region src/web/ui/switch.tsx
+/**
+* A toggle control for switching between on and off states.
+*
+* Use for binary settings that take effect immediately. Supports
+* multiple sizes and disabled states.
+*
+* @example
+* ```tsx
+* <Switch id="airplane" />
+* <Label htmlFor="airplane">Airplane Mode</Label>
+* ```
+*/
 function Switch({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Switch$1.Root, {
 		"data-slot": "switch",
@@ -6369,6 +7991,24 @@ function TableCaption({ className, ...props }) {
 
 //#endregion
 //#region src/web/ui/tabs.tsx
+/**
+* A set of layered content panels displayed one at a time.
+*
+* Organizes content into distinct views that users can switch between.
+* Supports horizontal and vertical orientations.
+*
+* @example
+* ```tsx
+* <Tabs defaultValue="account">
+*   <TabsList>
+*     <TabsTrigger value="account">Account</TabsTrigger>
+*     <TabsTrigger value="settings">Settings</TabsTrigger>
+*   </TabsList>
+*   <TabsContent value="account">Account content</TabsContent>
+*   <TabsContent value="settings">Settings content</TabsContent>
+* </Tabs>
+* ```
+*/
 function Tabs({ className, orientation = "horizontal", ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Root, {
 		"data-slot": "tabs",
@@ -6377,6 +8017,7 @@ function Tabs({ className, orientation = "horizontal", ...props }) {
 		...props
 	});
 }
+/** TabsList variant styles for different visual appearances. */
 const tabsListVariants = cva("rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", {
 	variants: { variant: {
 		default: "bg-muted",
@@ -6384,6 +8025,19 @@ const tabsListVariants = cva("rounded-lg p-[3px] group-data-horizontal/tabs:h-9
 	} },
 	defaultVariants: { variant: "default" }
 });
+/**
+* The container for tab triggers.
+*
+* Supports default (pill-style) and line variants. Arranges triggers
+* horizontally or vertically based on parent orientation.
+*
+* @example
+* ```tsx
+* <TabsList variant="line">
+*   <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+* </TabsList>
+* ```
+*/
 function TabsList({ className, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1.List, {
 		"data-slot": "tabs-list",
@@ -6392,6 +8046,16 @@ function TabsList({ className, variant = "default", ...props }) {
 		...props
 	});
 }
+/**
+* A button that activates its associated tab content panel.
+*
+* Displays active state styling and supports keyboard navigation.
+*
+* @example
+* ```tsx
+* <TabsTrigger value="settings">Settings</TabsTrigger>
+* ```
+*/
 function TabsTrigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
 		"data-slot": "tabs-trigger",
@@ -6399,6 +8063,19 @@ function TabsTrigger({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The content panel associated with a tab trigger.
+*
+* Only visible when its corresponding trigger is active. Hidden panels
+* are removed from the accessibility tree.
+*
+* @example
+* ```tsx
+* <TabsContent value="settings">
+*   <p>Settings panel content.</p>
+* </TabsContent>
+* ```
+*/
 function TabsContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
 		"data-slot": "tabs-content",
@@ -6409,6 +8086,7 @@ function TabsContent({ className, ...props }) {
 
 //#endregion
 //#region src/web/ui/toggle.tsx
+/** Toggle variant and size styles. */
 const toggleVariants = cva("hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
 	variants: {
 		variant: {
@@ -6426,6 +8104,19 @@ const toggleVariants = cva("hover:text-foreground aria-pressed:bg-muted focus-vi
 		size: "default"
 	}
 });
+/**
+* A button that can be toggled on or off.
+*
+* Use for toolbar buttons, formatting options, or any binary state toggle.
+* Shows a pressed state when active.
+*
+* @example
+* ```tsx
+* <Toggle aria-label="Toggle bold">
+*   <BoldIcon />
+* </Toggle>
+* ```
+*/
 function Toggle({ className, variant = "default", size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Toggle$1, {
 		"data-slot": "toggle",
@@ -6484,4 +8175,4 @@ function ToggleGroupItem({ className, children, variant = "default", size = "def
 }
 
 //#endregion
-export { AUTH_BASE_PATH, AUTH_BASE_URL, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedCheck, AspectRatio, AuthCard, AuthLayout, AuthProvider, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Brand, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_AUTH_PATHS, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailInput, EmailOTPForm, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, ErrorPage, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, ForgotPasswordForm, Form, HoverCard, HoverCardContent, HoverCardTrigger, HydratedRouter, I18nextProvider, IDLE_FETCHER, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, Link, Links, LoginForm, MagicLinkForm, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Meta, NavLink, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, OtpInput, Outlet, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasskeyButton, PasskeyRegisterButton, PasswordInput, PhoneInput, PhoneOTPForm, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, QueryClient, QueryClientProvider, RadioGroup, RadioGroupItem, ResetPasswordForm, ResizableHandle, ResizablePanel, ResizablePanelGroup, Route, SSOButton, Scripts, ScrollArea, ScrollBar, ScrollRestoration, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ServerRouter, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignupForm, Skeleton, Slider, SocialButtons, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Trans, TrustSignals, TwoFactorForm, VerifyEmailForm, badgeVariants, buttonGroupVariants, buttonVariants, changeLanguage, cn, createInstance, defaultI18nConfig, defineAuthClient, defineAuthFeatures, defineEmailOtpSchema, defineForgotPasswordSchema, defineI18nClient, defineLoginRedirect, defineLoginSchema, defineMagicLinkSchema, defineOtpSchema, definePhoneNumberSchema, definePostAuthRedirect, defineResetPasswordSchema, defineSignupSchema, defineTwoFactorBackupSchema, defineTwoFactorTotpSchema, getFixedT, href, init, initReactI18next, loadLanguages, loadNamespaces, loadResources, matchPath, matchRoutes, navigationMenuTriggerStyle, parsePath, redirect, redirectDocument, reloadResources, renderMatches, replace, resolvePath, setDefaultNamespace, t, tabsListVariants, toggleVariants, use, useActionData, useAsyncError, useAsyncValue, useAuth, useAuthContext, useAuthForm, useBeforeUnload, useBlocker, useCarousel, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useIsMobile, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useMutation, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useQuery, useQueryClient, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSidebar, useSubmit, useTranslation, useViewTransitionState };
+export { AUTH_BASE_PATH, AUTH_BASE_URL, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedCheck, AspectRatio, AuthCard, AuthLayout, AuthProvider, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Brand, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, CaptchaWidget, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_AUTH_PATHS, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailInput, EmailOTPForm, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, ErrorPage, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, ForgotPasswordForm, Form, HoverCard, HoverCardContent, HoverCardTrigger, HydratedRouter, I18nextProvider, IDLE_FETCHER, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, Link, Links, LoginForm, MagicLinkForm, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Meta, NavLink, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, OtpInput, Outlet, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasskeyButton, PasskeyRegisterButton, PasswordInput, PhoneInput, PhoneOTPForm, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, QueryClient, QueryClientProvider, RadioGroup, RadioGroupItem, ResetPasswordForm, ResizableHandle, ResizablePanel, ResizablePanelGroup, Route, SSOButton, Scripts, ScrollArea, ScrollBar, ScrollRestoration, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ServerRouter, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignupForm, Skeleton, Slider, SocialButtons, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Trans, TrustSignals, TwoFactorForm, VerifyEmailForm, badgeVariants, buttonGroupVariants, buttonSizeKeys, buttonVariantKeys, buttonVariants, changeLanguage, cn, createInstance, defaultI18nConfig, defineAuthClient, defineAuthFeatures, defineEmailOtpSchema, defineForgotPasswordSchema, defineI18nClient, defineLoginRedirect, defineLoginSchema, defineMagicLinkSchema, defineOtpSchema, definePhoneNumberSchema, definePostAuthRedirect, defineResetPasswordSchema, defineSignupSchema, defineTwoFactorBackupSchema, defineTwoFactorTotpSchema, getFixedT, href, init, initReactI18next, loadLanguages, loadNamespaces, loadResources, matchPath, matchRoutes, navigationMenuTriggerStyle, orientationSchema, orientations, parsePath, redirect, redirectDocument, reloadResources, renderMatches, replace, resolvePath, setDefaultNamespace, sizeSchema, sizes, t, tabsListVariants, toggleVariants, use, useActionData, useAsyncError, useAsyncValue, useAuth, useAuthContext, useAuthForm, useBeforeUnload, useBlocker, useCaptcha, useCarousel, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useIsMobile, useLastUsedMethod, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useMutation, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useQuery, useQueryClient, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSidebar, useSubmit, useTranslation, useViewTransitionState };