@vibesdotdev/auth 0.0.0-stage → 1.0.0-rc.4

package/dist/svelte/components/mfa-setup/RecoveryCodesStep.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import * as Alert from '@vibesdotdev/kit/components/ui/alert';
+	import { recoveryCodeVariants } from '../../auth-variants';
+	import type { RecoveryCodesStepProps } from './schemas';
+
+	let {
+		recoveryCodes,
+		copyStatus = 'idle',
+		onCopy,
+		onDownload,
+		onComplete
+	}: RecoveryCodesStepProps = $props();
+</script>
+
+<div class="space-y-4">
+	<h3 class="text-xl font-semibold">Step 4: Save Recovery Codes</h3>
+	<Alert.Root variant="destructive" class="mb-4">
+		<Alert.Description>
+			<strong>Important:</strong> Save these recovery codes in a safe place. You can use them to access
+			your account if you lose access to your authenticator app.
+		</Alert.Description>
+	</Alert.Root>
+
+	<div class="my-6 grid grid-cols-2 gap-2">
+		{#each recoveryCodes as code}
+			<code class={recoveryCodeVariants()}>{code}</code>
+		{/each}
+	</div>
+
+	<div class="mt-6 flex justify-end gap-2">
+		<Button type="button" variant="outline" onclick={() => onCopy?.()}>Copy Codes</Button>
+		<Button type="button" variant="outline" onclick={() => onDownload?.()}>Download Codes</Button>
+		<Button type="button" onclick={() => onComplete?.()}>I've Saved the Codes</Button>
+	</div>
+
+	{#if copyStatus === 'copied'}
+		<p class="text-sm text-muted-foreground" role="status">Recovery codes copied</p>
+	{:else if copyStatus === 'failed'}
+		<p class="text-sm text-destructive" role="alert">Recovery codes could not be copied</p>
+	{/if}
+</div>

package/dist/svelte/components/mfa-setup/RecoveryCodesStep.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { RecoveryCodesStepProps } from './schemas';
+declare const RecoveryCodesStep: import("svelte").Component<RecoveryCodesStepProps, {}, "">;
+type RecoveryCodesStep = ReturnType<typeof RecoveryCodesStep>;
+export default RecoveryCodesStep;
+//# sourceMappingURL=RecoveryCodesStep.svelte.d.ts.map

package/dist/svelte/components/mfa-setup/RecoveryCodesStep.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecoveryCodesStep.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/mfa-setup/RecoveryCodesStep.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AA+CxD,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/mfa-setup/VerifyStep.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Field, FieldError } from '@vibesdotdev/kit/components/ui/field';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import type { VerifyStepProps } from './schemas';
+
+	let {
+		totpCode,
+		totpCodeError = null,
+		isLoading,
+		onTotpCodeInput,
+		onBack,
+		onSubmit
+	}: VerifyStepProps = $props();
+	const instanceId = $props.id();
+	const inputId = `${instanceId}-totp-code`;
+
+	function handleTotpCodeInput(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		onTotpCodeInput?.(event.currentTarget.value);
+	}
+</script>
+
+<div class="space-y-4">
+	<h3 class="text-xl font-semibold">Step 3: Verify Setup</h3>
+	<p class="text-muted-foreground text-sm">
+		Enter the 6-digit code from your authenticator app to verify the setup.
+	</p>
+
+	<form
+		onsubmit={(event) => {
+			event.preventDefault();
+			onSubmit?.();
+		}}
+		class="space-y-4"
+	>
+		<Field>
+			<Label for={inputId}>Verification Code</Label>
+			<Input
+				id={inputId}
+				type="text"
+				value={totpCode}
+				oninput={handleTotpCodeInput}
+				class="text-center font-mono text-lg tracking-widest"
+				aria-invalid={Boolean(totpCodeError)}
+				placeholder="000000"
+				maxlength={6}
+				pattern={'[0-9]{6}'}
+				inputmode="numeric"
+				autocomplete="one-time-code"
+				required
+			/>
+			{#if totpCodeError}
+				<FieldError>{totpCodeError}</FieldError>
+			{/if}
+			<p class="text-muted-foreground text-sm">
+				Enter the 6-digit code shown in your authenticator app
+			</p>
+		</Field>
+
+		<div class="mt-6 flex justify-end gap-2">
+			<Button type="button" variant="outline" onclick={() => onBack?.()}>Back</Button>
+			<Button type="submit" disabled={isLoading || totpCode.length !== 6}>
+				{isLoading ? 'Verifying...' : 'Verify & Enable Two-Factor'}
+			</Button>
+		</div>
+	</form>
+</div>

package/dist/svelte/components/mfa-setup/VerifyStep.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { VerifyStepProps } from './schemas';
+declare const VerifyStep: import("svelte").Component<VerifyStepProps, {}, "">;
+type VerifyStep = ReturnType<typeof VerifyStep>;
+export default VerifyStep;
+//# sourceMappingURL=VerifyStep.svelte.d.ts.map

package/dist/svelte/components/mfa-setup/VerifyStep.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerifyStep.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/mfa-setup/VerifyStep.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAyDjD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/mfa-setup/schemas/index.d.ts

@@ -0,0 +1,35 @@
+export interface PasswordStepProps {
+    password: string;
+    passwordError?: string | string[] | null;
+    isGenerating: boolean;
+    onPasswordInput?: (value: string) => void;
+    onCancel?: () => void;
+    onSubmit?: () => void;
+}
+export interface QrCodeStepProps {
+    qrCodeDataUrl?: string | null;
+    showManualEntry: boolean;
+    secret?: string | null;
+    onToggleManualEntry?: () => void;
+    onBack?: () => void;
+    onContinue?: () => void;
+}
+export interface VerifyStepProps {
+    totpCode: string;
+    totpCodeError?: string | string[] | null;
+    isLoading: boolean;
+    onTotpCodeInput?: (value: string) => void;
+    onBack?: () => void;
+    onSubmit?: () => void;
+}
+export interface RecoveryCodesStepProps {
+    recoveryCodes: string[];
+    copyStatus?: 'idle' | 'copied' | 'failed';
+    onCopy?: () => void;
+    onDownload?: () => void;
+    onComplete?: () => void;
+}
+export interface CompleteStepProps {
+    onDone?: () => void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/svelte/components/mfa-setup/schemas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/svelte/components/mfa-setup/schemas/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACzC,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC/B,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACtC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,iBAAiB;IACjC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB"}

package/dist/svelte/components/mfa-setup/schemas/index.js

@@ -0,0 +1 @@
+export {};

package/dist/svelte/components/phone-auth/OtpCodeFields.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { cn } from '@vibesdotdev/kit/utils';
+	import { PHONE_AUTH_CONFIG } from '@vibesdotdev/auth/schemas/flows/phone';
+	import { otpInputVariants } from '../../auth-variants';
+	import type { OtpCodeFieldsProps } from './schemas';
+
+	let { error = null, disabled = false, onChange, onComplete }: OtpCodeFieldsProps = $props();
+
+	const otpLength = PHONE_AUTH_CONFIG.OTP_LENGTH;
+	const instanceId = $props.id();
+	const errorId = `${instanceId}-otp-error`;
+
+	let digits = $state<string[]>(Array.from({ length: otpLength }, () => ''));
+	let inputElements = $state<HTMLInputElement[]>([]);
+
+	function emitCode() {
+		const value = digits.join('');
+		onChange?.(value);
+		if (value.length === otpLength) {
+			onComplete?.(value);
+		}
+	}
+
+	function focusInput(index: number) {
+		inputElements[index]?.focus();
+	}
+
+	function clearDigits() {
+		digits = Array.from({ length: otpLength }, () => '');
+		onChange?.('');
+		focusInput(0);
+	}
+
+	function handleInput(index: number, event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		const value = event.currentTarget.value.replace(/\D/g, '');
+
+		if (value.length > 1) {
+			const nextDigits = [...digits];
+			for (let offset = 0; offset < value.length && index + offset < otpLength; offset += 1) {
+				nextDigits[index + offset] = value[offset];
+			}
+			digits = nextDigits;
+			focusInput(Math.min(index + value.length, otpLength - 1));
+			emitCode();
+			return;
+		}
+
+		digits[index] = value;
+		if (value && index < otpLength - 1) {
+			focusInput(index + 1);
+		}
+		emitCode();
+	}
+
+	function handleKeyDown(index: number, event: KeyboardEvent) {
+		if (event.key === 'Backspace' && !digits[index] && index > 0) {
+			focusInput(index - 1);
+			return;
+		}
+
+		if (event.key === 'ArrowLeft' && index > 0) {
+			focusInput(index - 1);
+			return;
+		}
+
+		if (event.key === 'ArrowRight' && index < otpLength - 1) {
+			focusInput(index + 1);
+		}
+	}
+</script>
+
+<div class="flex justify-center gap-2">
+	{#each digits as digit, index}
+		<input
+			bind:this={inputElements[index]}
+			type="text"
+			inputmode="numeric"
+			pattern="[0-9]"
+			maxlength="1"
+			value={digit}
+			oninput={(event) => handleInput(index, event)}
+			onkeydown={(event) => handleKeyDown(index, event)}
+			{disabled}
+			class={otpInputVariants({ error: !!error, disabled })}
+			aria-label={`Digit ${index + 1} of ${otpLength}`}
+			aria-describedby={error ? errorId : undefined}
+			autocomplete="one-time-code"
+		/>
+	{/each}
+</div>
+
+{#if error}
+	<div id={errorId} class="text-center">
+		<p class="text-destructive text-sm" role="alert">
+			{error}
+		</p>
+		<button
+			type="button"
+			onclick={clearDigits}
+			class="text-primary mt-1 text-xs underline hover:opacity-80"
+			{disabled}
+		>
+			Clear and try again
+		</button>
+	</div>
+{/if}
+
+<style lang="postcss">
+	input[type='text']::-webkit-outer-spin-button,
+	input[type='text']::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	input[type='text'] {
+		-moz-appearance: textfield;
+		appearance: textfield;
+	}
+</style>

package/dist/svelte/components/phone-auth/OtpCodeFields.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { OtpCodeFieldsProps } from './schemas';
+declare const OtpCodeFields: import("svelte").Component<OtpCodeFieldsProps, {}, "">;
+type OtpCodeFields = ReturnType<typeof OtpCodeFields>;
+export default OtpCodeFields;
+//# sourceMappingURL=OtpCodeFields.svelte.d.ts.map

package/dist/svelte/components/phone-auth/OtpCodeFields.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpCodeFields.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/phone-auth/OtpCodeFields.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AA8FpD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/phone-auth/OtpInput.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { PHONE_AUTH_CONFIG } from '@vibesdotdev/auth/schemas/flows/phone';
+	import OtpCodeFields from './OtpCodeFields.svelte';
+	import type { OtpInputProps } from './schemas';
+
+	let {
+		phoneNumber,
+		isLoading = false,
+		error = null,
+		disabled = false,
+		attemptsRemaining = PHONE_AUTH_CONFIG.MAX_ATTEMPTS,
+		canResend = false,
+		resendCooldown = 0,
+		onverify,
+		onresend,
+		onback
+	}: OtpInputProps = $props();
+
+	let otpCode = $state('');
+	let submittedCode = $state<string | null>(null);
+	let resendInFlight = $state(false);
+	let resendLoadingRoundTripStarted = $state(false);
+	let lastResendPhoneNumber = $state<string | null>(null);
+	let lastCanResend = $state<boolean | null>(null);
+	let lastResendCooldown = $state<number | null>(null);
+	let resendCountdown = $state(0);
+	let countdownInterval: ReturnType<typeof setInterval> | null = null;
+
+	$effect(() => {
+		const resendStateChanged =
+			phoneNumber !== lastResendPhoneNumber ||
+			canResend !== lastCanResend ||
+			resendCooldown !== lastResendCooldown;
+
+		if (resendStateChanged) {
+			resendInFlight = false;
+			lastResendPhoneNumber = phoneNumber;
+			lastCanResend = canResend;
+			lastResendCooldown = resendCooldown;
+		}
+
+		if (isLoading) {
+			resendLoadingRoundTripStarted = true;
+		} else if (resendLoadingRoundTripStarted) {
+			resendInFlight = false;
+			resendLoadingRoundTripStarted = false;
+		}
+	});
+
+	$effect(() => {
+		if (countdownInterval) {
+			clearInterval(countdownInterval);
+			countdownInterval = null;
+		}
+
+		resendCountdown = resendCooldown;
+		if (resendCooldown <= 0) {
+			return;
+		}
+
+		countdownInterval = setInterval(() => {
+			resendCountdown -= 1;
+			if (resendCountdown <= 0 && countdownInterval) {
+				clearInterval(countdownInterval);
+				countdownInterval = null;
+			}
+		}, 1000);
+
+		return () => {
+			if (countdownInterval) {
+				clearInterval(countdownInterval);
+				countdownInterval = null;
+			}
+		};
+	});
+
+	function handleVerify(code = otpCode) {
+		if (
+			code.length !== PHONE_AUTH_CONFIG.OTP_LENGTH ||
+			isLoading ||
+			disabled ||
+			submittedCode === code
+		) {
+			return;
+		}
+
+		submittedCode = code;
+		onverify?.({ phoneNumber, otpCode: code });
+	}
+
+	function handleCodeChange(value: string) {
+		otpCode = value;
+		if (submittedCode !== null && submittedCode !== value) {
+			submittedCode = null;
+		}
+	}
+
+	function handleResend() {
+		if (!canResend || isLoading || disabled || resendInFlight || !onresend) {
+			return;
+		}
+
+		resendInFlight = true;
+		onresend({ phoneNumber });
+	}
+
+	function maskPhoneNumber(phone: string): string {
+		if (phone.length < 4) return phone;
+		return `****${phone.slice(-4)}`;
+	}
+</script>
+
+<div class="space-y-6">
+	<div class="text-center">
+		<h2 class="text-lg font-semibold text-foreground">Enter Verification Code</h2>
+		<p class="mt-2 text-sm text-muted-foreground">
+			We sent a 6-digit code to {maskPhoneNumber(phoneNumber)}
+		</p>
+		{#if attemptsRemaining < PHONE_AUTH_CONFIG.MAX_ATTEMPTS}
+			<p class="mt-1 text-sm text-yellow-600 dark:text-yellow-400">
+				{attemptsRemaining} attempt{attemptsRemaining !== 1 ? 's' : ''} remaining
+			</p>
+		{/if}
+	</div>
+
+	<form
+		onsubmit={(event) => {
+			event.preventDefault();
+			handleVerify();
+		}}
+		class="space-y-4"
+	>
+		<OtpCodeFields
+			{error}
+			disabled={disabled || isLoading}
+			onChange={handleCodeChange}
+			onComplete={handleVerify}
+		/>
+
+		<Button
+			type="submit"
+			variant="default"
+			size="lg"
+			class="w-full"
+			disabled={otpCode.length !== PHONE_AUTH_CONFIG.OTP_LENGTH || isLoading || disabled}
+		>
+			{#if isLoading}
+				<div class="flex items-center gap-2">
+					<div
+						class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
+					></div>
+					<span>Verifying...</span>
+				</div>
+			{:else}
+				Verify Code
+			{/if}
+		</Button>
+	</form>
+
+	<div class="flex flex-col gap-3">
+		<div class="text-center">
+			{#if resendCountdown > 0}
+				<p class="text-muted-foreground text-sm">Resend code in {resendCountdown}s</p>
+			{:else if canResend}
+				<button
+					type="button"
+					onclick={handleResend}
+					disabled={isLoading || disabled || resendInFlight}
+					class="text-primary text-sm underline transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					Resend verification code
+				</button>
+			{:else}
+				<p class="text-muted-foreground text-sm">
+					Didn't receive the code? Check your messages or try again in a few minutes.
+				</p>
+			{/if}
+		</div>
+
+		<div class="text-center">
+			<button
+				type="button"
+				onclick={() => onback?.()}
+				disabled={isLoading || disabled}
+				class="text-muted-foreground text-sm underline transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				&larr; Use a different phone number
+			</button>
+		</div>
+	</div>
+</div>

package/dist/svelte/components/phone-auth/OtpInput.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { OtpInputProps } from './schemas';
+declare const OtpInput: import("svelte").Component<OtpInputProps, {}, "">;
+type OtpInput = ReturnType<typeof OtpInput>;
+export default OtpInput;
+//# sourceMappingURL=OtpInput.svelte.d.ts.map

package/dist/svelte/components/phone-auth/OtpInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/phone-auth/OtpInput.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAyK/C,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/components/phone-auth/PhoneAuthFlow.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import PhoneInput from './PhoneInput.svelte';
+	import OtpInput from './OtpInput.svelte';
+	import type { PhoneInput as PhoneInputType } from '@vibesdotdev/auth/schemas/flows/phone';
+	import type { PhoneAuthFlowProps, PhoneNumberPayload } from './schemas';
+
+	let {
+		state,
+		disabled = false,
+		onphoneSubmit,
+		onotpVerify,
+		onresendOtp,
+		onback,
+		onsuccess,
+		onphoneInput
+	}: PhoneAuthFlowProps = $props();
+
+	function handlePhoneSubmit(data: PhoneInputType) {
+		onphoneSubmit?.(data);
+	}
+
+	function handlePhoneInput(value: string) {
+		onphoneInput?.(value);
+	}
+
+	function handleOtpVerify(data: { phoneNumber: string; otpCode: string }) {
+		onotpVerify?.({
+			phoneNumber: data.phoneNumber,
+			otpCode: data.otpCode
+		});
+	}
+
+	function handleResendOtp(data: PhoneNumberPayload) {
+		onresendOtp?.(data);
+	}
+
+	function handleBack() {
+		onback?.();
+	}
+
+	function handleSuccess() {
+		if (state.phoneNumber) {
+			onsuccess?.({ phoneNumber: state.phoneNumber });
+		}
+	}
+</script>
+
+<div class="mx-auto max-w-md">
+	{#if state.step === 'phone_input'}
+		<div class="space-y-4">
+			<div class="text-center">
+				<h1 class="text-2xl font-bold text-foreground">Phone Verification</h1>
+				<p class="mt-2 text-sm text-muted-foreground">
+					We'll send you a verification code to confirm your phone number.
+				</p>
+			</div>
+
+			<PhoneInput
+				phoneNumber={state.phoneNumber || ''}
+				isLoading={state.isLoading}
+				error={state.error}
+				{disabled}
+				onsubmit={handlePhoneSubmit}
+				oninput={handlePhoneInput}
+			/>
+		</div>
+	{:else if state.step === 'otp_verification'}
+		{#if state.phoneNumber}
+			<OtpInput
+				phoneNumber={state.phoneNumber}
+				isLoading={state.isLoading}
+				error={state.error}
+				{disabled}
+				attemptsRemaining={state.attemptsRemaining}
+				canResend={state.canResend}
+				resendCooldown={state.resendCooldown}
+				onverify={handleOtpVerify}
+				onresend={handleResendOtp}
+				onback={handleBack}
+			/>
+		{:else}
+			<div class="space-y-4 text-center" role="alert">
+				<h2 class="text-xl font-semibold">Phone number missing</h2>
+				<p class="text-sm text-destructive">
+					We can't verify a code without a phone number. Start over and enter your number again.
+				</p>
+				<Button type="button" variant="outline" class="w-full" onclick={handleBack}>
+					Start over
+				</Button>
+			</div>
+		{/if}
+	{:else if state.step === 'success'}
+		<div class="space-y-4 text-center">
+			<div
+				class="mx-auto flex size-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30"
+			>
+				<Icon icon="lucide:check" class="size-8 text-green-600 dark:text-green-400" />
+			</div>
+
+			<div>
+				<h2 class="text-xl font-semibold text-foreground">Phone Verified Successfully!</h2>
+				<p class="mt-2 text-sm text-muted-foreground">
+					Your phone number {state.phoneNumber} has been verified.
+				</p>
+			</div>
+
+			<Button type="button" class="w-full" onclick={handleSuccess}>Continue</Button>
+		</div>
+	{:else if state.step === 'error'}
+		<div class="space-y-4 text-center">
+			<div
+				class="mx-auto flex size-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30"
+			>
+				<Icon icon="lucide:x" class="size-8 text-destructive" />
+			</div>
+
+			<div>
+				<h2 class="text-xl font-semibold text-foreground">Verification Failed</h2>
+				<p class="mt-2 text-sm text-destructive">
+					{state.error || 'Something went wrong. Please try again.'}
+				</p>
+			</div>
+
+			<Button type="button" variant="outline" class="w-full" onclick={handleBack}>Try Again</Button>
+		</div>
+	{/if}
+</div>
+
+{#if state.step !== 'error'}
+	<div class="mt-8 flex justify-center">
+		<div class="flex gap-2">
+			<div
+				class="size-2 rounded-full {state.step === 'phone_input'
+					? 'bg-primary'
+					: 'bg-muted-foreground/30'}"
+			></div>
+			<div
+				class="size-2 rounded-full {state.step === 'otp_verification'
+					? 'bg-primary'
+					: 'bg-muted-foreground/30'}"
+			></div>
+			<div
+				class="size-2 rounded-full {state.step === 'success'
+					? 'bg-primary'
+					: 'bg-muted-foreground/30'}"
+			></div>
+		</div>
+	</div>
+{/if}

package/dist/svelte/components/phone-auth/PhoneAuthFlow.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { PhoneAuthFlowProps } from './schemas';
+declare const PhoneAuthFlow: import("svelte").Component<PhoneAuthFlowProps, {}, "">;
+type PhoneAuthFlow = ReturnType<typeof PhoneAuthFlow>;
+export default PhoneAuthFlow;
+//# sourceMappingURL=PhoneAuthFlow.svelte.d.ts.map

package/dist/svelte/components/phone-auth/PhoneAuthFlow.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneAuthFlow.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/phone-auth/PhoneAuthFlow.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAsB,MAAM,WAAW,CAAC;AAgIxE,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}