Centered sign-in layout: heading, optional brand and footer.

Sign in

Welcome back.

No account? Ask your admin.

Usage

Example.svelte
<script lang="ts">
	import AuthShell from "@orochibraru/ui/blocks/auth-shell";
	import { Button } from "@orochibraru/ui/button";
	import * as Field from "@orochibraru/ui/field";
	import { Input } from "@orochibraru/ui/input";
</script>

<AuthShell heading="Sign in" subheading="Welcome back.">
	{#snippet brand()}
		<div class="bg-primary glow size-12 rounded-2xl"></div>
	{/snippet}
	<form class="grid gap-4">
		<Field.Field>
			<Field.Label for="auth-email">Email</Field.Label>
			<Input id="auth-email" type="email" autocomplete="email" />
		</Field.Field>
		<Button type="submit" class="h-11">Continue</Button>
	</form>
	{#snippet footer()}
		No account? Ask your admin.
	{/snippet}
</AuthShell>