{"name":"signup-01","type":"registry:block","description":"A signup form with password strength.","meta":{"description":"A signup form with password strength.","iframeHeight":"870px"},"files":[{"type":"registry:page","target":"routes/signup-01/+page.svelte","highlightedContent":"

<script lang=\"ts\">\n  import SignupForm from '$lib/components/signup-form.svelte';\n</script>\n\n<div class=\"flex min-h-svh w-full items-center justify-center bg-(--bg) p-6 md:p-10\">\n  <div class=\"w-full max-w-sm\">\n    <SignupForm />\n  </div>\n</div>\n

"},{"type":"registry:component","target":"components/signup-form.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Button } from '$lib/components/ui/button/index.js';\n  import * as Card from '$lib/components/ui/card/index.js';\n  import { Input } from '$lib/components/ui/input/index.js';\n  import { Password } from '$lib/components/ui/password/index.js';\n  import { Field, FieldGroup, FieldLabel, FieldDescription } from '$lib/components/ui/field/index.js';\n\n  const id = $props.id();\n\n  let password = $state('');\n</script>\n\n<Card.Root>\n  <Card.Header>\n    <Card.Title class=\"text-xl\">Create an account</Card.Title>\n    <Card.Description>Enter your details below to create your account</Card.Description>\n  </Card.Header>\n  <Card.Content>\n    <form>\n      <FieldGroup>\n        <Field>\n          <FieldLabel for=\"name-{id}\">Full name</FieldLabel>\n          <Input id=\"name-{id}\" type=\"text\" placeholder=\"Lily Bloom\" required />\n        </Field>\n        <Field>\n          <FieldLabel for=\"email-{id}\">Email</FieldLabel>\n          <Input id=\"email-{id}\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <FieldLabel for=\"password-{id}\">Password</FieldLabel>\n          <Password id=\"password-{id}\" bind:value={password} showStrength required />\n          <FieldDescription>Use at least 8 characters.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\" class=\"w-full\">Create account</Button>\n          <FieldDescription class=\"text-center\">\n            Already have an account?\n            <a\n              href=\"##\"\n              class=\"text-(--text) underline underline-offset-4 transition-colors duration-150\"\n            >\n              Login\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  </Card.Content>\n</Card.Root>\n

"}]}

Blocks