@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/auth/LoginBlock05.svelte

@@ -0,0 +1,101 @@
+<!--
+  LoginBlock05.svelte
+  Login form with divider and inline footer text.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    Input,
+    Label,
+    Separator
+  } from '$lib/components/ui';
+  import { BrandIcon } from '$lib/components/ui/icon';
+
+  let {
+    class: className = '',
+    onSubmit = undefined,
+    onGoogleLogin = undefined,
+    onForgotPassword = undefined,
+    onSignUp = undefined
+  }: {
+    class?: string;
+    onSubmit?: ((email: string, password: string) => void) | undefined;
+    onGoogleLogin?: (() => void) | undefined;
+    onForgotPassword?: (() => void) | undefined;
+    onSignUp?: (() => void) | undefined;
+  } = $props();
+
+  let email = $state('');
+  let password = $state('');
+
+  function handleSubmit() {
+    onSubmit?.(email, password);
+  }
+</script>
+
+<div class={cn('flex min-h-screen items-center justify-center p-4', className)}>
+  <Card class="w-full max-w-md">
+    <CardHeader>
+      <CardTitle class="text-2xl">Login to your account</CardTitle>
+      <CardDescription>Enter your email below to login to your account</CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-4">
+      <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+        <div class="space-y-2">
+          <Label htmlFor="login05-email">Email</Label>
+          <Input
+            type="email"
+            placeholder="m@example.com"
+            bind:value={email}
+          />
+        </div>
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <Label htmlFor="login05-password">Password</Label>
+            <button
+              type="button"
+              class="text-sm text-muted-foreground underline-offset-4 hover:underline"
+              onclick={onForgotPassword}
+            >
+              Forgot your password?
+            </button>
+          </div>
+          <Input
+            type="password"
+            bind:value={password}
+          />
+        </div>
+        <Button type="submit" class="w-full">Login</Button>
+      </form>
+
+      <div class="relative">
+        <Separator />
+        <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-2 text-xs uppercase text-muted-foreground">
+          Or continue with
+        </span>
+      </div>
+
+      <Button variant="outline" class="w-full" onclick={onGoogleLogin}>
+        <BrandIcon name="google" size={16} colored class="mr-2" />
+        Login with Google
+      </Button>
+
+      <p class="text-center text-sm text-muted-foreground">
+        Don't have an account?
+        <button
+          type="button"
+          class="text-primary underline-offset-4 hover:underline"
+          onclick={onSignUp}
+        >
+          Sign up
+        </button>
+      </p>
+    </CardContent>
+  </Card>
+</div>

package/src/registry/blocks/auth/OtpBlock01.svelte

@@ -0,0 +1,115 @@
+<!--
+  OtpBlock01.svelte
+  OTP verification with 6 individual digit inputs and email display.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardFooter,
+    Label
+  } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    onVerify = undefined,
+    onResend = undefined,
+    email = ''
+  }: {
+    class?: string;
+    onVerify?: ((code: string) => void) | undefined;
+    onResend?: (() => void) | undefined;
+    email?: string;
+  } = $props();
+
+  let digits: string[] = $state(['', '', '', '', '', '']);
+  let inputs: HTMLInputElement[] = $state([]);
+
+  function handleInput(index: number, event: Event) {
+    const target = event.target as HTMLInputElement;
+    const value = target.value;
+
+    if (value.length > 1) {
+      digits[index] = value.slice(-1);
+    }
+
+    if (value && index < 5) {
+      inputs[index + 1]?.focus();
+    }
+  }
+
+  function handleKeydown(index: number, event: KeyboardEvent) {
+    if (event.key === 'Backspace' && !digits[index] && index > 0) {
+      inputs[index - 1]?.focus();
+    }
+  }
+
+  function handlePaste(event: ClipboardEvent) {
+    event.preventDefault();
+    const pasted = event.clipboardData?.getData('text') ?? '';
+    const chars = pasted.replace(/\D/g, '').slice(0, 6).split('');
+    chars.forEach((char, i) => {
+      digits[i] = char;
+    });
+    const nextIndex = Math.min(chars.length, 5);
+    inputs[nextIndex]?.focus();
+  }
+
+  function handleSubmit() {
+    onVerify?.(digits.join(''));
+  }
+
+  let code = $derived(digits.join(''));
+</script>
+
+<div class={cn('flex min-h-screen items-center justify-center p-4', className)}>
+  <Card class="w-full max-w-md">
+    <CardHeader>
+      <CardTitle class="text-2xl">Enter verification code</CardTitle>
+      <CardDescription>
+        We sent a 6-digit code to {email || 'your email'}.
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+        <div class="space-y-2">
+          <Label>Verification code</Label>
+          <div class="flex gap-2 justify-center">
+            {#each digits as digit, i}
+              <input
+                bind:this={inputs[i]}
+                bind:value={digits[i]}
+                type="text"
+                inputmode="numeric"
+                maxlength="1"
+                class="flex h-12 w-12 items-center justify-center rounded-md border border-input bg-background text-center text-lg font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                oninput={(e) => handleInput(i, e)}
+                onkeydown={(e) => handleKeydown(i, e)}
+                onpaste={handlePaste}
+              />
+            {/each}
+          </div>
+          <p class="text-xs text-muted-foreground text-center">Enter the 6-digit code sent to your email.</p>
+        </div>
+        <Button type="submit" class="w-full">Verify</Button>
+      </form>
+    </CardContent>
+    <CardFooter class="justify-center">
+      <p class="text-sm text-muted-foreground">
+        Didn't receive the code?
+        <button
+          type="button"
+          class="text-primary underline-offset-4 hover:underline"
+          onclick={onResend}
+        >
+          Resend
+        </button>
+      </p>
+    </CardFooter>
+  </Card>
+</div>

package/src/registry/blocks/auth/OtpBlock02.svelte

@@ -0,0 +1,113 @@
+<!--
+  OtpBlock02.svelte
+  OTP verification with phone number display instead of email.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardFooter,
+    Label
+  } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    onVerify = undefined,
+    onResend = undefined,
+    phone = ''
+  }: {
+    class?: string;
+    onVerify?: ((code: string) => void) | undefined;
+    onResend?: (() => void) | undefined;
+    phone?: string;
+  } = $props();
+
+  let digits: string[] = $state(['', '', '', '', '', '']);
+  let inputs: HTMLInputElement[] = $state([]);
+
+  function handleInput(index: number, event: Event) {
+    const target = event.target as HTMLInputElement;
+    const value = target.value;
+
+    if (value.length > 1) {
+      digits[index] = value.slice(-1);
+    }
+
+    if (value && index < 5) {
+      inputs[index + 1]?.focus();
+    }
+  }
+
+  function handleKeydown(index: number, event: KeyboardEvent) {
+    if (event.key === 'Backspace' && !digits[index] && index > 0) {
+      inputs[index - 1]?.focus();
+    }
+  }
+
+  function handlePaste(event: ClipboardEvent) {
+    event.preventDefault();
+    const pasted = event.clipboardData?.getData('text') ?? '';
+    const chars = pasted.replace(/\D/g, '').slice(0, 6).split('');
+    chars.forEach((char, i) => {
+      digits[i] = char;
+    });
+    const nextIndex = Math.min(chars.length, 5);
+    inputs[nextIndex]?.focus();
+  }
+
+  function handleSubmit() {
+    onVerify?.(digits.join(''));
+  }
+</script>
+
+<div class={cn('flex min-h-screen items-center justify-center p-4', className)}>
+  <Card class="w-full max-w-md">
+    <CardHeader>
+      <CardTitle class="text-2xl">Enter verification code</CardTitle>
+      <CardDescription>
+        We sent a 6-digit code to {phone || 'your phone number'}.
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+        <div class="space-y-2">
+          <Label>Verification code</Label>
+          <div class="flex gap-2 justify-center">
+            {#each digits as digit, i}
+              <input
+                bind:this={inputs[i]}
+                bind:value={digits[i]}
+                type="text"
+                inputmode="numeric"
+                maxlength="1"
+                class="flex h-12 w-12 items-center justify-center rounded-md border border-input bg-background text-center text-lg font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                oninput={(e) => handleInput(i, e)}
+                onkeydown={(e) => handleKeydown(i, e)}
+                onpaste={handlePaste}
+              />
+            {/each}
+          </div>
+          <p class="text-xs text-muted-foreground text-center">Enter the 6-digit code sent to your phone.</p>
+        </div>
+        <Button type="submit" class="w-full">Verify</Button>
+      </form>
+    </CardContent>
+    <CardFooter class="justify-center">
+      <p class="text-sm text-muted-foreground">
+        Didn't receive the code?
+        <button
+          type="button"
+          class="text-primary underline-offset-4 hover:underline"
+          onclick={onResend}
+        >
+          Resend
+        </button>
+      </p>
+    </CardFooter>
+  </Card>
+</div>

package/src/registry/blocks/auth/OtpBlock03.svelte

@@ -0,0 +1,143 @@
+<!--
+  OtpBlock03.svelte
+  OTP verification with countdown timer for resend.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardFooter,
+    Label
+  } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    onVerify = undefined,
+    onResend = undefined,
+    email = '',
+    countdownSeconds = 60
+  }: {
+    class?: string;
+    onVerify?: ((code: string) => void) | undefined;
+    onResend?: (() => void) | undefined;
+    email?: string;
+    countdownSeconds?: number;
+  } = $props();
+
+  let digits: string[] = $state(['', '', '', '', '', '']);
+  let inputs: HTMLInputElement[] = $state([]);
+  let remainingSeconds = $state(countdownSeconds);
+
+  function startCountdown() {
+    remainingSeconds = countdownSeconds;
+  }
+
+  $effect(() => {
+    startCountdown();
+    const intervalId = setInterval(() => {
+      remainingSeconds -= 1;
+      if (remainingSeconds <= 0) {
+        clearInterval(intervalId);
+      }
+    }, 1000);
+    return () => clearInterval(intervalId);
+  });
+
+  function handleResend() {
+    onResend?.();
+    startCountdown();
+  }
+
+  function handleInput(index: number, event: Event) {
+    const target = event.target as HTMLInputElement;
+    const value = target.value;
+
+    if (value.length > 1) {
+      digits[index] = value.slice(-1);
+    }
+
+    if (value && index < 5) {
+      inputs[index + 1]?.focus();
+    }
+  }
+
+  function handleKeydown(index: number, event: KeyboardEvent) {
+    if (event.key === 'Backspace' && !digits[index] && index > 0) {
+      inputs[index - 1]?.focus();
+    }
+  }
+
+  function handlePaste(event: ClipboardEvent) {
+    event.preventDefault();
+    const pasted = event.clipboardData?.getData('text') ?? '';
+    const chars = pasted.replace(/\D/g, '').slice(0, 6).split('');
+    chars.forEach((char, i) => {
+      digits[i] = char;
+    });
+    const nextIndex = Math.min(chars.length, 5);
+    inputs[nextIndex]?.focus();
+  }
+
+  function handleSubmit() {
+    onVerify?.(digits.join(''));
+  }
+
+  let canResend = $derived(remainingSeconds <= 0);
+  let timerDisplay = $derived(`${Math.floor(remainingSeconds / 60)}:${String(remainingSeconds % 60).padStart(2, '0')}`);
+</script>
+
+<div class={cn('flex min-h-screen items-center justify-center p-4', className)}>
+  <Card class="w-full max-w-md">
+    <CardHeader>
+      <CardTitle class="text-2xl">Enter verification code</CardTitle>
+      <CardDescription>
+        We sent a 6-digit code to {email || 'your email'}.
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+        <div class="space-y-2">
+          <Label>Verification code</Label>
+          <div class="flex gap-2 justify-center">
+            {#each digits as digit, i}
+              <input
+                bind:this={inputs[i]}
+                bind:value={digits[i]}
+                type="text"
+                inputmode="numeric"
+                maxlength="1"
+                class="flex h-12 w-12 items-center justify-center rounded-md border border-input bg-background text-center text-lg font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                oninput={(e) => handleInput(i, e)}
+                onkeydown={(e) => handleKeydown(i, e)}
+                onpaste={handlePaste}
+              />
+            {/each}
+          </div>
+          <p class="text-xs text-muted-foreground text-center">Enter the 6-digit code sent to your email.</p>
+        </div>
+        <Button type="submit" class="w-full">Verify</Button>
+      </form>
+    </CardContent>
+    <CardFooter class="justify-center">
+      <p class="text-sm text-muted-foreground">
+        {#if canResend}
+          Didn't receive the code?
+          <button
+            type="button"
+            class="text-primary underline-offset-4 hover:underline"
+            onclick={handleResend}
+          >
+            Resend
+          </button>
+        {:else}
+          Resend code in {timerDisplay}
+        {/if}
+      </p>
+    </CardFooter>
+  </Card>
+</div>

package/src/registry/blocks/auth/OtpBlock04.svelte

@@ -0,0 +1,122 @@
+<!--
+  OtpBlock04.svelte
+  OTP verification with "Try another method" link.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardFooter,
+    Label
+  } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    onVerify = undefined,
+    onResend = undefined,
+    onTryAnotherMethod = undefined,
+    email = ''
+  }: {
+    class?: string;
+    onVerify?: ((code: string) => void) | undefined;
+    onResend?: (() => void) | undefined;
+    onTryAnotherMethod?: (() => void) | undefined;
+    email?: string;
+  } = $props();
+
+  let digits: string[] = $state(['', '', '', '', '', '']);
+  let inputs: HTMLInputElement[] = $state([]);
+
+  function handleInput(index: number, event: Event) {
+    const target = event.target as HTMLInputElement;
+    const value = target.value;
+
+    if (value.length > 1) {
+      digits[index] = value.slice(-1);
+    }
+
+    if (value && index < 5) {
+      inputs[index + 1]?.focus();
+    }
+  }
+
+  function handleKeydown(index: number, event: KeyboardEvent) {
+    if (event.key === 'Backspace' && !digits[index] && index > 0) {
+      inputs[index - 1]?.focus();
+    }
+  }
+
+  function handlePaste(event: ClipboardEvent) {
+    event.preventDefault();
+    const pasted = event.clipboardData?.getData('text') ?? '';
+    const chars = pasted.replace(/\D/g, '').slice(0, 6).split('');
+    chars.forEach((char, i) => {
+      digits[i] = char;
+    });
+    const nextIndex = Math.min(chars.length, 5);
+    inputs[nextIndex]?.focus();
+  }
+
+  function handleSubmit() {
+    onVerify?.(digits.join(''));
+  }
+</script>
+
+<div class={cn('flex min-h-screen items-center justify-center p-4', className)}>
+  <Card class="w-full max-w-md">
+    <CardHeader>
+      <CardTitle class="text-2xl">Enter verification code</CardTitle>
+      <CardDescription>
+        We sent a 6-digit code to {email || 'your email'}.
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+        <div class="space-y-2">
+          <Label>Verification code</Label>
+          <div class="flex gap-2 justify-center">
+            {#each digits as digit, i}
+              <input
+                bind:this={inputs[i]}
+                bind:value={digits[i]}
+                type="text"
+                inputmode="numeric"
+                maxlength="1"
+                class="flex h-12 w-12 items-center justify-center rounded-md border border-input bg-background text-center text-lg font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                oninput={(e) => handleInput(i, e)}
+                onkeydown={(e) => handleKeydown(i, e)}
+                onpaste={handlePaste}
+              />
+            {/each}
+          </div>
+          <p class="text-xs text-muted-foreground text-center">Enter the 6-digit code sent to your email.</p>
+        </div>
+        <Button type="submit" class="w-full">Verify</Button>
+      </form>
+    </CardContent>
+    <CardFooter class="flex-col space-y-2">
+      <p class="text-sm text-muted-foreground">
+        Didn't receive the code?
+        <button
+          type="button"
+          class="text-primary underline-offset-4 hover:underline"
+          onclick={onResend}
+        >
+          Resend
+        </button>
+      </p>
+      <button
+        type="button"
+        class="text-sm text-muted-foreground underline-offset-4 hover:underline"
+        onclick={onTryAnotherMethod}
+      >
+        Try another method
+      </button>
+    </CardFooter>
+  </Card>
+</div>

package/src/registry/blocks/auth/OtpBlock05.svelte

@@ -0,0 +1,81 @@
+<!--
+  OtpBlock05.svelte
+  Compact OTP verification with single-line input.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardFooter,
+    Input,
+    Label
+  } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    onVerify = undefined,
+    onResend = undefined,
+    email = ''
+  }: {
+    class?: string;
+    onVerify?: ((code: string) => void) | undefined;
+    onResend?: (() => void) | undefined;
+    email?: string;
+  } = $props();
+
+  let code = $state('');
+
+  function handleInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    code = target.value.replace(/\D/g, '').slice(0, 6);
+  }
+
+  function handleSubmit() {
+    onVerify?.(code);
+  }
+</script>
+
+<div class={cn('flex min-h-screen items-center justify-center p-4', className)}>
+  <Card class="w-full max-w-md">
+    <CardHeader>
+      <CardTitle class="text-2xl">Enter verification code</CardTitle>
+      <CardDescription>
+        We sent a 6-digit code to {email || 'your email'}.
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+        <div class="space-y-2">
+          <Label>Verification code</Label>
+          <Input
+            type="text"
+            inputmode="numeric"
+            placeholder="000000"
+            value={code}
+            class="text-center text-lg tracking-[0.5em] font-mono"
+            oninput={handleInput}
+          />
+          <p class="text-xs text-muted-foreground text-center">Enter the 6-digit code sent to your email.</p>
+        </div>
+        <Button type="submit" class="w-full">Verify</Button>
+      </form>
+    </CardContent>
+    <CardFooter class="justify-center">
+      <p class="text-sm text-muted-foreground">
+        Didn't receive the code?
+        <button
+          type="button"
+          class="text-primary underline-offset-4 hover:underline"
+          onclick={onResend}
+        >
+          Resend
+        </button>
+      </p>
+    </CardFooter>
+  </Card>
+</div>