@xbg.solutions/create-frontend 1.1.1 → 1.2.0

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

@@ -0,0 +1,103 @@
+<!--
+  SignupBlock01.svelte
+  Full create account form with name, email, password, confirm password, and Google signup.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardFooter,
+    Input,
+    Label
+  } from '$lib/components/ui';
+  import { BrandIcon } from '$lib/components/ui/icon';
+
+  let {
+    class: className = '',
+    onSubmit = undefined,
+    onGoogleSignup = undefined,
+    onSignIn = undefined
+  }: {
+    class?: string;
+    onSubmit?: ((data: { name: string; email: string; password: string; confirmPassword: string }) => void) | undefined;
+    onGoogleSignup?: (() => void) | undefined;
+    onSignIn?: (() => void) | undefined;
+  } = $props();
+
+  let name = $state('');
+  let email = $state('');
+  let password = $state('');
+  let confirmPassword = $state('');
+
+  function handleSubmit() {
+    onSubmit?.({ name, email, password, confirmPassword });
+  }
+</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">Create an account</CardTitle>
+      <CardDescription>Enter your information below to create your account</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+        <div class="space-y-2">
+          <Label htmlFor="signup01-name">Full name</Label>
+          <Input
+            type="text"
+            placeholder="John Doe"
+            bind:value={name}
+          />
+        </div>
+        <div class="space-y-2">
+          <Label htmlFor="signup01-email">Email</Label>
+          <Input
+            type="email"
+            placeholder="m@example.com"
+            bind:value={email}
+          />
+          <p class="text-xs text-muted-foreground">We'll use this to contact you.</p>
+        </div>
+        <div class="space-y-2">
+          <Label htmlFor="signup01-password">Password</Label>
+          <Input
+            type="password"
+            bind:value={password}
+          />
+          <p class="text-xs text-muted-foreground">Must be at least 8 characters long.</p>
+        </div>
+        <div class="space-y-2">
+          <Label htmlFor="signup01-confirm-password">Confirm Password</Label>
+          <Input
+            type="password"
+            bind:value={confirmPassword}
+          />
+          <p class="text-xs text-muted-foreground">Please confirm your password.</p>
+        </div>
+        <Button type="submit" class="w-full">Create Account</Button>
+        <Button variant="outline" type="button" class="w-full" onclick={onGoogleSignup}>
+          <BrandIcon name="google" size={16} colored class="mr-2" />
+          Sign up with Google
+        </Button>
+      </form>
+    </CardContent>
+    <CardFooter class="justify-center">
+      <p class="text-sm text-muted-foreground">
+        Already have an account?
+        <button
+          type="button"
+          class="text-primary underline-offset-4 hover:underline"
+          onclick={onSignIn}
+        >
+          Sign in
+        </button>
+      </p>
+    </CardFooter>
+  </Card>
+</div>

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

@@ -0,0 +1,94 @@
+<!--
+  SignupBlock02.svelte
+  Create account form without confirm password field.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardFooter,
+    Input,
+    Label
+  } from '$lib/components/ui';
+  import { BrandIcon } from '$lib/components/ui/icon';
+
+  let {
+    class: className = '',
+    onSubmit = undefined,
+    onGoogleSignup = undefined,
+    onSignIn = undefined
+  }: {
+    class?: string;
+    onSubmit?: ((data: { name: string; email: string; password: string }) => void) | undefined;
+    onGoogleSignup?: (() => void) | undefined;
+    onSignIn?: (() => void) | undefined;
+  } = $props();
+
+  let name = $state('');
+  let email = $state('');
+  let password = $state('');
+
+  function handleSubmit() {
+    onSubmit?.({ name, 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">Create an account</CardTitle>
+      <CardDescription>Enter your information below to create your account</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+        <div class="space-y-2">
+          <Label htmlFor="signup02-name">Full name</Label>
+          <Input
+            type="text"
+            placeholder="John Doe"
+            bind:value={name}
+          />
+        </div>
+        <div class="space-y-2">
+          <Label htmlFor="signup02-email">Email</Label>
+          <Input
+            type="email"
+            placeholder="m@example.com"
+            bind:value={email}
+          />
+          <p class="text-xs text-muted-foreground">We'll use this to contact you.</p>
+        </div>
+        <div class="space-y-2">
+          <Label htmlFor="signup02-password">Password</Label>
+          <Input
+            type="password"
+            bind:value={password}
+          />
+          <p class="text-xs text-muted-foreground">Must be at least 8 characters long.</p>
+        </div>
+        <Button type="submit" class="w-full">Create Account</Button>
+        <Button variant="outline" type="button" class="w-full" onclick={onGoogleSignup}>
+          <BrandIcon name="google" size={16} colored class="mr-2" />
+          Sign up with Google
+        </Button>
+      </form>
+    </CardContent>
+    <CardFooter class="justify-center">
+      <p class="text-sm text-muted-foreground">
+        Already have an account?
+        <button
+          type="button"
+          class="text-primary underline-offset-4 hover:underline"
+          onclick={onSignIn}
+        >
+          Sign in
+        </button>
+      </p>
+    </CardFooter>
+  </Card>
+</div>

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

@@ -0,0 +1,120 @@
+<!--
+  SignupBlock03.svelte
+  Create account form with terms checkbox.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardFooter,
+    Input,
+    Label,
+    Checkbox
+  } from '$lib/components/ui';
+  import { BrandIcon } from '$lib/components/ui/icon';
+
+  let {
+    class: className = '',
+    onSubmit = undefined,
+    onGoogleSignup = undefined,
+    onSignIn = undefined,
+    onTermsClick = undefined,
+    onPrivacyClick = undefined
+  }: {
+    class?: string;
+    onSubmit?: ((data: { name: string; email: string; password: string; acceptedTerms: boolean }) => void) | undefined;
+    onGoogleSignup?: (() => void) | undefined;
+    onSignIn?: (() => void) | undefined;
+    onTermsClick?: (() => void) | undefined;
+    onPrivacyClick?: (() => void) | undefined;
+  } = $props();
+
+  let name = $state('');
+  let email = $state('');
+  let password = $state('');
+  let acceptedTerms = $state(false);
+
+  function handleSubmit() {
+    onSubmit?.({ name, email, password, acceptedTerms });
+  }
+</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">Create an account</CardTitle>
+      <CardDescription>Enter your information below to create your account</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+        <div class="space-y-2">
+          <Label htmlFor="signup03-name">Full name</Label>
+          <Input
+            type="text"
+            placeholder="John Doe"
+            bind:value={name}
+          />
+        </div>
+        <div class="space-y-2">
+          <Label htmlFor="signup03-email">Email</Label>
+          <Input
+            type="email"
+            placeholder="m@example.com"
+            bind:value={email}
+          />
+        </div>
+        <div class="space-y-2">
+          <Label htmlFor="signup03-password">Password</Label>
+          <Input
+            type="password"
+            bind:value={password}
+          />
+          <p class="text-xs text-muted-foreground">Must be at least 8 characters long.</p>
+        </div>
+        <div class="flex items-start space-x-2">
+          <Checkbox bind:checked={acceptedTerms} />
+          <label class="text-sm text-muted-foreground leading-none">
+            I agree to the
+            <button
+              type="button"
+              class="text-primary underline-offset-4 hover:underline"
+              onclick={onTermsClick}
+            >
+              Terms of Service
+            </button>
+            and
+            <button
+              type="button"
+              class="text-primary underline-offset-4 hover:underline"
+              onclick={onPrivacyClick}
+            >
+              Privacy Policy
+            </button>
+          </label>
+        </div>
+        <Button type="submit" class="w-full">Create Account</Button>
+        <Button variant="outline" type="button" class="w-full" onclick={onGoogleSignup}>
+          <BrandIcon name="google" size={16} colored class="mr-2" />
+          Sign up with Google
+        </Button>
+      </form>
+    </CardContent>
+    <CardFooter class="justify-center">
+      <p class="text-sm text-muted-foreground">
+        Already have an account?
+        <button
+          type="button"
+          class="text-primary underline-offset-4 hover:underline"
+          onclick={onSignIn}
+        >
+          Sign in
+        </button>
+      </p>
+    </CardFooter>
+  </Card>
+</div>

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

@@ -0,0 +1,112 @@
+<!--
+  SignupBlock04.svelte
+  Split layout signup form with image on the left and form on the right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardFooter,
+    Input,
+    Label
+  } from '$lib/components/ui';
+  import { BrandIcon } from '$lib/components/ui/icon';
+
+  let {
+    class: className = '',
+    onSubmit = undefined,
+    onGoogleSignup = undefined,
+    onSignIn = undefined,
+    imageSrc = '',
+    imageAlt = 'Sign up illustration'
+  }: {
+    class?: string;
+    onSubmit?: ((data: { name: string; email: string; password: string; confirmPassword: string }) => void) | undefined;
+    onGoogleSignup?: (() => void) | undefined;
+    onSignIn?: (() => void) | undefined;
+    imageSrc?: string;
+    imageAlt?: string;
+  } = $props();
+
+  let name = $state('');
+  let email = $state('');
+  let password = $state('');
+  let confirmPassword = $state('');
+
+  function handleSubmit() {
+    onSubmit?.({ name, email, password, confirmPassword });
+  }
+</script>
+
+<div class={cn('flex min-h-screen items-center justify-center p-4', className)}>
+  <div class="grid w-full max-w-4xl overflow-hidden rounded-lg border bg-card shadow-sm md:grid-cols-2">
+    <div class="hidden bg-muted md:block">
+      {#if imageSrc}
+        <img src={imageSrc} alt={imageAlt} class="h-full w-full object-cover" />
+      {:else}
+        <div class="flex h-full items-center justify-center bg-muted">
+          <p class="text-muted-foreground">Image placeholder</p>
+        </div>
+      {/if}
+    </div>
+    <div class="flex flex-col justify-center p-6 md:p-8">
+      <div class="space-y-1.5 pb-4">
+        <h2 class="text-2xl font-semibold leading-none tracking-tight">Create an account</h2>
+        <p class="text-sm text-muted-foreground">Enter your information below to create your account</p>
+      </div>
+      <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+        <div class="space-y-2">
+          <Label htmlFor="signup04-name">Full name</Label>
+          <Input
+            type="text"
+            placeholder="John Doe"
+            bind:value={name}
+          />
+        </div>
+        <div class="space-y-2">
+          <Label htmlFor="signup04-email">Email</Label>
+          <Input
+            type="email"
+            placeholder="m@example.com"
+            bind:value={email}
+          />
+        </div>
+        <div class="space-y-2">
+          <Label htmlFor="signup04-password">Password</Label>
+          <Input
+            type="password"
+            bind:value={password}
+          />
+          <p class="text-xs text-muted-foreground">Must be at least 8 characters long.</p>
+        </div>
+        <div class="space-y-2">
+          <Label htmlFor="signup04-confirm-password">Confirm Password</Label>
+          <Input
+            type="password"
+            bind:value={confirmPassword}
+          />
+        </div>
+        <Button type="submit" class="w-full">Create Account</Button>
+        <Button variant="outline" type="button" class="w-full" onclick={onGoogleSignup}>
+          <BrandIcon name="google" size={16} colored class="mr-2" />
+          Sign up with Google
+        </Button>
+      </form>
+      <p class="mt-4 text-center text-sm text-muted-foreground">
+        Already have an account?
+        <button
+          type="button"
+          class="text-primary underline-offset-4 hover:underline"
+          onclick={onSignIn}
+        >
+          Sign in
+        </button>
+      </p>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,77 @@
+<!--
+  SignupBlock05.svelte
+  Minimal signup form with just email and password.
+-->
+<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 = '',
+    onSubmit = undefined,
+    onSignIn = undefined
+  }: {
+    class?: string;
+    onSubmit?: ((data: { email: string; password: string }) => void) | undefined;
+    onSignIn?: (() => 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">Create an account</CardTitle>
+      <CardDescription>Enter your email and password to get started</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+        <div class="space-y-2">
+          <Label htmlFor="signup05-email">Email</Label>
+          <Input
+            type="email"
+            placeholder="m@example.com"
+            bind:value={email}
+          />
+        </div>
+        <div class="space-y-2">
+          <Label htmlFor="signup05-password">Password</Label>
+          <Input
+            type="password"
+            bind:value={password}
+          />
+          <p class="text-xs text-muted-foreground">Must be at least 8 characters long.</p>
+        </div>
+        <Button type="submit" class="w-full">Create Account</Button>
+      </form>
+    </CardContent>
+    <CardFooter class="justify-center">
+      <p class="text-sm text-muted-foreground">
+        Already have an account?
+        <button
+          type="button"
+          class="text-primary underline-offset-4 hover:underline"
+          onclick={onSignIn}
+        >
+          Sign in
+        </button>
+      </p>
+    </CardFooter>
+  </Card>
+</div>

package/src/registry/blocks/auth/index.ts

@@ -0,0 +1,31 @@
+/**
+ * src/lib/components/blocks/auth/index.ts
+ * Auth Block Components Export
+ *
+ * Import auth blocks from here:
+ * import { LoginBlock01, SignupBlock01 } from '$lib/components/blocks/auth';
+ */
+
+// Login blocks
+export { default as LoginBlock01 } from './LoginBlock01.svelte';
+export { default as LoginBlock02 } from './LoginBlock02.svelte';
+export { default as LoginBlock03 } from './LoginBlock03.svelte';
+export { default as LoginBlock04 } from './LoginBlock04.svelte';
+export { default as LoginBlock05 } from './LoginBlock05.svelte';
+
+// Signup blocks
+export { default as SignupBlock01 } from './SignupBlock01.svelte';
+export { default as SignupBlock02 } from './SignupBlock02.svelte';
+export { default as SignupBlock03 } from './SignupBlock03.svelte';
+export { default as SignupBlock04 } from './SignupBlock04.svelte';
+export { default as SignupBlock05 } from './SignupBlock05.svelte';
+
+// OTP verification blocks
+export { default as OtpBlock01 } from './OtpBlock01.svelte';
+export { default as OtpBlock02 } from './OtpBlock02.svelte';
+export { default as OtpBlock03 } from './OtpBlock03.svelte';
+export { default as OtpBlock04 } from './OtpBlock04.svelte';
+export { default as OtpBlock05 } from './OtpBlock05.svelte';
+
+// Layout blocks
+export { default as AuthSplitScreen } from './AuthSplitScreen.svelte';

package/src/registry/blocks/banner/Banner01.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		message?: string;
+		ctaLabel?: string;
+		onCta?: () => void;
+	}
+
+	let {
+		class: className,
+		message = 'New update · Pro blocks are now available in shadcn/ui kit for Figma!',
+		ctaLabel,
+		onCta
+	}: Props = $props();
+
+	let visible = $state(true);
+
+	const handleClose = () => {
+		visible = false;
+	};
+
+	const handleCta = () => {
+		if (onCta) {
+			onCta();
+		}
+	};
+</script>
+
+{#if visible}
+	<!-- Desktop -->
+	<div class="hidden sm:flex w-full bg-foreground text-background text-sm px-4 py-3 items-center justify-center gap-2 relative">
+		<p class="text-center">
+			<strong>{message.split('·')[0].trim()}</strong> · {message.split('·')[1]?.trim() || message} <span class="font-medium">»</span>
+		</p>
+		<button
+			onclick={handleClose}
+			class="absolute right-4 top-1/2 -translate-y-1/2 text-background/70 hover:text-background transition-colors"
+			aria-label="Close banner"
+		>
+			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<line x1="18" y1="6" x2="6" y2="18"></line>
+				<line x1="6" y1="6" x2="18" y2="18"></line>
+			</svg>
+		</button>
+	</div>
+
+	<!-- Mobile -->
+	<div class="sm:hidden fixed bottom-4 left-4 right-4 rounded-lg bg-foreground text-background p-4 shadow-lg flex items-start justify-between gap-3 z-50">
+		<div class="flex-1">
+			<p class="text-sm">
+				<strong>{message.split('·')[0].trim()}</strong> · {message.split('·')[1]?.trim() || message}
+			</p>
+		</div>
+		<button
+			onclick={handleClose}
+			class="flex-shrink-0 text-background/70 hover:text-background transition-colors mt-0.5"
+			aria-label="Close banner"
+		>
+			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<line x1="18" y1="6" x2="6" y2="18"></line>
+				<line x1="6" y1="6" x2="18" y2="18"></line>
+			</svg>
+		</button>
+	</div>
+{/if}

package/src/registry/blocks/banner/Banner02.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		message?: string;
+		ctaLabel?: string;
+		onCta?: () => void;
+	}
+
+	let {
+		class: className,
+		message = 'New update · Pro blocks are now available in shadcn/ui kit for Figma!',
+		ctaLabel,
+		onCta
+	}: Props = $props();
+
+	let visible = $state(true);
+
+	const handleClose = () => {
+		visible = false;
+	};
+
+	const handleCta = () => {
+		if (onCta) {
+			onCta();
+		}
+	};
+</script>
+
+{#if visible}
+	<!-- Desktop -->
+	<div class="hidden sm:flex w-full bg-foreground text-background text-sm px-6 py-3 items-center justify-between">
+		<p class="text-center flex-1">{message}</p>
+		<button
+			onclick={handleClose}
+			class="text-background/70 hover:text-background transition-colors flex-shrink-0"
+			aria-label="Close banner"
+		>
+			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<line x1="18" y1="6" x2="6" y2="18"></line>
+				<line x1="6" y1="6" x2="18" y2="18"></line>
+			</svg>
+		</button>
+	</div>
+
+	<!-- Mobile -->
+	<div class="sm:hidden rounded-lg bg-foreground text-background p-4 text-sm flex items-start justify-between gap-3">
+		<p class="flex-1">{message}</p>
+		<button
+			onclick={handleClose}
+			class="text-background/70 hover:text-background transition-colors flex-shrink-0 mt-0.5"
+			aria-label="Close banner"
+		>
+			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<line x1="18" y1="6" x2="6" y2="18"></line>
+				<line x1="6" y1="6" x2="18" y2="18"></line>
+			</svg>
+		</button>
+	</div>
+{/if}