npm - @tanglemedia/svelte-starter-auth-shadcn - Versions diffs - 0.0.1 - Mend

@tanglemedia/svelte-starter-auth-shadcn 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,7 @@
+Copyright 2024 Tangle Media
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,21 @@
+# @tanglemedia/svelte-starter-auth-shadcn
+<p align="center" style="align: center;">
+  <a href="https://npm.im/@tanglemedia/svelte-starter-auth-shadcn">
+    <img src="https://img.shields.io/badge/TypeScript-blue?style=flat-square" alt="TypeScript" />
+  </a>
+  <img alt="NPM Version" src="https://img.shields.io/npm/v/%40tanglemedia%2Fsvelte-starter-auth-shadcn">
+  <a href="https://bitbucket.org/tanglemediainc/svelte-starter/src/master/packages/core/">
+    <img alt="Repo Bitbucket" src="https://img.shields.io/badge/repo-bitbucket-blue">
+  </a>
+  <img alt="Bitbucket open pull requests " src="https://img.shields.io/bitbucket/pr/tanglemediainc/svelte-starter">
+  <a href="https://choosealicense.com/licenses/mit/">
+  <img alt="NPM License" src="https://img.shields.io/npm/l/%40tanglemedia%2Fsvelte-starter-auth-shadcn">
+  </a>
+</p>
+The [Auth-Shadcn](https://tanglemedia-svelte-docs.netlify.app) package is responsible for the main UI of unauthorized routes components of your app. This specific package uses ui components and component api from Shadcn and Bits-UI.

package/dist/app.html ADDED Viewed

@@ -0,0 +1,13 @@
+// src/app.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Auth</title>
+    %sveltekit.head%
+  </head>
+  <body>
+    <!-- your auth editor content here -->
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

package/dist/lib/components/ui/auth-layout/auth-layout.svelte ADDED Viewed

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { Button } from '@tanglemedia/svelte-starter-ui-shadcn/Button';
+	// import { getConfig } from '@tanglemedia/svelte-starter-core';
+	interface Props {
+		logo?: string;
+		name?: string;
+		quote?: string;
+		quoteAuthor?: string;
+		layoutMode?: string;
+		leftSideBackground?: string;
+		rightSideBackground?: string;
+		opacity?: number;
+		logoClass?: string;
+		filterClass?: string;
+		imageClass?: string;
+	}
+  let {
+		logo,
+		name,
+		quote,
+		quoteAuthor,
+		layoutMode,
+		leftSideBackground,
+		rightSideBackground,
+		opacity,
+		logoClass,
+		filterClass,
+		imageClass,
+		children
+	}: Props = $props();
+</script>
+<div
+	class="container relative h-[100vh] flex-col items-center justify-center grid lg:max-w-none lg:grid-cols-2 lg:px-0"
+>
+	<div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
+		<div
+			class="absolute inset-0 bg-background"
+			style="
+				background-image:
+					url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80);"
+		></div>
+		<div class="relative z-20 flex items-center text-lg font-medium text-shadow-lg">
+			Acme Inc
+		</div>
+		<div class="relative z-20 mt-auto">
+			<blockquote class="space-y-2">
+				<p class="text-lg text-shadow-lg">
+					&ldquo;This library has saved me countless hours of work and helped me deliver
+					stunning designs to my clients faster than ever before. Highly
+					recommended!&rdquo;
+				</p>
+				<footer class="text-sm text-shadow-lg">Sofia Davis</footer>
+			</blockquote>
+		</div>
+    <div class="absolute top-0 bottom-0 left-0 right-0 bg-primary-500/10 filter blur(2px)"></div>
+	</div>
+  <div class="lg:hidden absolute top-0 left-0 right-0 bottom-1/2 z-[-1]" style="
+	mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+  background-image:
+    url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx);
+  background-size: cover;
+  background-position: center">
+    <div class="text-white top-6 left-6 absolute text-lg font-medium z-20 text-shadow-lg">
+      Acme Inc
+      <blockquote class="space-y-2 mt-2 mr-4">
+				<p class="text-sm text-shadow-lg">
+					&ldquo;This library has saved me countless hours of work and helped me deliver
+					stunning designs to my clients faster than ever before. Highly
+					recommended!&rdquo;
+				</p>
+				<footer class="text-xs text-shadow-lg">Sofia Davis</footer>
+			</blockquote>
+    </div>
+    <div class="absolute top-0 bottom-0 left-0 right-0 bg-primary-500/10 filter blur(2px)"></div>
+    <div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-b from-gray-900/10 to-background transition duration-500 ease-in-out"></div>
+  </div>
+	<div class="lg:p-8">
+		<div class="mx-auto flex w-full flex-col justify-center space-y-6">
+			{@render children()}
+		</div>
+	</div>
+</div>
+<style>
+	.text-shadow-lg {
+		text-shadow: 0 2px 2px rgb(0 0 0 / 0.4);
+	}
+</style>

package/dist/lib/components/ui/auth-layout/auth-layout.svelte.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+interface Props {
+    logo?: string;
+    name?: string;
+    quote?: string;
+    quoteAuthor?: string;
+    layoutMode?: string;
+    leftSideBackground?: string;
+    rightSideBackground?: string;
+    opacity?: number;
+    logoClass?: string;
+    filterClass?: string;
+    imageClass?: string;
+}
+declare const AuthLayout: import("svelte").Component<Props, {}, "">;
+type AuthLayout = ReturnType<typeof AuthLayout>;
+export default AuthLayout;

package/dist/lib/components/ui/auth-layout/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import AuthLayout from './auth-layout.svelte';
2	+ export { AuthLayout };

package/dist/lib/components/ui/auth-layout/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import AuthLayout from './auth-layout.svelte';
2	+ export { AuthLayout };

package/dist/lib/components/ui/forgot-password/forgot-password-form.svelte ADDED Viewed

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import * as Card from '@tanglemedia/svelte-starter-ui-shadcn/Card';
+	import { Button } from '@tanglemedia/svelte-starter-ui-shadcn/Button';
+	import { Input } from '@tanglemedia/svelte-starter-ui-shadcn/Input';
+	import { Label } from '@tanglemedia/svelte-starter-ui-shadcn/Label';
+  import * as Form from '@tanglemedia/svelte-starter-ui-shadcn/Form';
+  import type { Snippet } from 'svelte';
+  interface Props {
+    superform: any;
+    card?: boolean;
+    cardClass?: string;
+    title?: string;
+    description?: string;
+    login?: boolean;
+    loginLink?: string;
+    formTail?: Snippet;
+    formHead?: Snippet;
+    children?: Snippet;
+  }
+  let {
+    superform,
+    card = false,
+    cardClass = "mx-auto max-w-sm",
+    title = "Forgot Password",
+    description = "Enter your email below to request a password reset",
+    login = true,
+    loginLink = "/login",
+    formTail,
+    formHead,
+    children
+  }: Props = $props();
+  const { form: formData, enhance } = superform;
+</script>
+{#if card}
+  <Card.Root class={cardClass}>
+    <Card.Header>
+      <Card.Title class="text-2xl">{title}</Card.Title>
+      <Card.Description>{description}</Card.Description>
+    </Card.Header>
+    <Card.Content>
+      <form method="POST" use:enhance class="grid gap-4">
+        {@render formHead?.()}
+        {#if children}
+          {@render children?.()}
+        {:else}
+          <Form.Field form={superform} name="email">
+            <Form.Control>
+              {#snippet children({ props })}
+                <Form.Label>Email</Form.Label>
+                <Input {...props} bind:value={$formData.email} type="email" required />
+              {/snippet}
+            </Form.Control>
+            <Form.FieldErrors />
+          </Form.Field>
+        {/if}
+        <Form.Button type="submit" class="w-full">Request Password</Form.Button>
+        {@render formTail?.()}
+      </form>
+      {#if login}
+        <div class="mt-4 text-center text-sm">
+          Remember your password?
+          <a href={loginLink} class="underline"> Sign in </a>
+        </div>
+      {/if}
+    </Card.Content>
+  </Card.Root>
+{:else}
+  <div class={cardClass}>
+    <div class="flex flex-col space-y-1.5 p-6 pb-0">
+      <h3 class="font-semibold tracking-tight text-2xl">{title}</h3>
+      <p class="text-muted-foreground text-sm">{description}</p>
+    </div>
+    <form method="POST" use:enhance class="grid gap-4 p-6">
+      {@render formHead?.()}
+      {#if children}
+        {@render children?.()}
+      {:else}
+        <Form.Field form={superform} name="email">
+          <Form.Control>
+            {#snippet children({ props })}
+              <Form.Label>Email</Form.Label>
+              <Input {...props} bind:value={$formData.email} type="email" required />
+            {/snippet}
+          </Form.Control>
+          <Form.FieldErrors />
+        </Form.Field>
+      {/if}
+      <Form.Button type="submit" class="w-full">Request Password</Form.Button>
+      {@render formTail?.()}
+    </form>
+    {#if login}
+      <div class="mt-4 text-center text-sm">
+        Remember your password?
+        <a href={loginLink} class="underline"> Sign in </a>
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/lib/components/ui/forgot-password/forgot-password-form.svelte.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    superform: any;
+    card?: boolean;
+    cardClass?: string;
+    title?: string;
+    description?: string;
+    login?: boolean;
+    loginLink?: string;
+    formTail?: Snippet;
+    formHead?: Snippet;
+    children?: Snippet;
+}
+declare const ForgotPasswordForm: import("svelte").Component<Props, {}, "">;
+type ForgotPasswordForm = ReturnType<typeof ForgotPasswordForm>;
+export default ForgotPasswordForm;

package/dist/lib/components/ui/forgot-password/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import ForgotPasswordForm from './forgot-password-form.svelte';
2	+ export { ForgotPasswordForm };

package/dist/lib/components/ui/forgot-password/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import ForgotPasswordForm from './forgot-password-form.svelte';
2	+ export { ForgotPasswordForm };

package/dist/lib/components/ui/login-form/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import LoginForm from './login-form.svelte';
2	+ export { LoginForm };

package/dist/lib/components/ui/login-form/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import LoginForm from './login-form.svelte';
2	+ export { LoginForm };

package/dist/lib/components/ui/login-form/login-form.svelte ADDED Viewed

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import * as Card from '@tanglemedia/svelte-starter-ui-shadcn/Card';
+	import { Button } from '@tanglemedia/svelte-starter-ui-shadcn/Button';
+	import { Input } from '@tanglemedia/svelte-starter-ui-shadcn/Input';
+	import { Label } from '@tanglemedia/svelte-starter-ui-shadcn/Label';
+  import * as Form from '@tanglemedia/svelte-starter-ui-shadcn/Form';
+  import type { Snippet } from 'svelte';
+  interface Props {
+    superform: any;
+    card?: boolean;
+    cardClass?: string;
+    title?: string;
+    description?: string;
+    forgotPassword?: boolean;
+    forgotPasswordLink?: string;
+    register?: boolean;
+    registerLink?: string;
+    formTail?: Snippet;
+    formHead?: Snippet;
+    children?: Snippet;
+  }
+  let {
+    superform,
+    card = false,
+    cardClass = "mx-auto max-w-sm",
+    title = "Login",
+    description = "Enter your information below to register a new account",
+    forgotPassword = true,
+    forgotPasswordLink = "/forgot-password",
+    register = true,
+    registerLink = "/register",
+    formTail,
+    formHead,
+    children
+  }: Props = $props();
+  const { form: formData, enhance } = superform;
+</script>
+{#if card}
+  <Card.Root class={cardClass}>
+    <Card.Header>
+      <Card.Title class="text-2xl">{title}</Card.Title>
+      <Card.Description>{description}</Card.Description>
+    </Card.Header>
+    <Card.Content>
+      <form method="POST" use:enhance class="grid gap-4">
+        {@render formHead?.()}
+        {#if children}
+          {@render children?.()}
+        {:else}
+          <Form.Field form={superform} name="email">
+            <Form.Control>
+              {#snippet children({ props })}
+                <Form.Label>Email</Form.Label>
+                <Input {...props} bind:value={$formData.email} type="email" required />
+              {/snippet}
+            </Form.Control>
+            <Form.FieldErrors />
+          </Form.Field>
+          <Form.Field form={superform} name="password">
+            <Form.Control>
+              {#snippet children({ props })}
+              <div class="flex items-center">
+                  <Form.Label>Password</Form.Label>
+                  {#if forgotPassword}
+                    <a href={forgotPasswordLink} class="ml-auto inline-block text-sm underline">
+                      Forgot your password?
+                    </a>
+                  {/if}
+                </div>
+                <Input {...props} bind:value={$formData.password} type="password" required />
+              {/snippet}
+            </Form.Control>
+            <Form.FieldErrors />
+          </Form.Field>
+        {/if}
+        <Form.Button type="submit" class="w-full">Login</Form.Button>
+        {@render formTail?.()}
+      </form>
+      {#if register}
+        <div class="mt-4 text-center text-sm">
+          Don't have an account?
+          <a href={registerLink} class="underline"> Sign up </a>
+        </div>
+      {/if}
+    </Card.Content>
+  </Card.Root>
+{:else}
+  <div class={cardClass}>
+    <div class="flex flex-col space-y-1.5 p-6 pb-0">
+      <h3 class="font-semibold tracking-tight text-2xl">{title}</h3>
+      <p class="text-muted-foreground text-sm">{description}</p>
+    </div>
+    <form method="POST" use:enhance class="grid gap-4 p-6">
+      {@render formHead?.()}
+      {#if children}
+        {@render children?.()}
+      {:else}
+        <Form.Field form={superform} name="email">
+          <Form.Control>
+            {#snippet children({ props })}
+              <Form.Label>Email</Form.Label>
+              <Input {...props} bind:value={$formData.email} type="email" required />
+            {/snippet}
+          </Form.Control>
+          <Form.FieldErrors />
+        </Form.Field>
+        <Form.Field form={superform} name="password">
+          <Form.Control>
+            {#snippet children({ props })}
+            <div class="flex items-center">
+                <Form.Label>Password</Form.Label>
+                {#if forgotPassword}
+                  <a href={forgotPasswordLink} class="ml-auto inline-block text-sm underline">
+                    Forgot your password?
+                  </a>
+                {/if}
+              </div>
+              <Input {...props} bind:value={$formData.password} type="password" required />
+            {/snippet}
+          </Form.Control>
+          <Form.FieldErrors />
+        </Form.Field>
+      {/if}
+      <Form.Button type="submit" class="w-full">Login</Form.Button>
+      {@render formTail?.()}
+    </form>
+    {#if register}
+      <div class="mt-4 text-center text-sm">
+        Don't have an account?
+        <a href={registerLink} class="underline"> Sign up </a>
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/lib/components/ui/login-form/login-form.svelte.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    superform: any;
+    card?: boolean;
+    cardClass?: string;
+    title?: string;
+    description?: string;
+    forgotPassword?: boolean;
+    forgotPasswordLink?: string;
+    register?: boolean;
+    registerLink?: string;
+    formTail?: Snippet;
+    formHead?: Snippet;
+    children?: Snippet;
+}
+declare const LoginForm: import("svelte").Component<Props, {}, "">;
+type LoginForm = ReturnType<typeof LoginForm>;
+export default LoginForm;

package/dist/lib/components/ui/register-form/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import RegisterForm from './register-form.svelte';
2	+ export { RegisterForm };

package/dist/lib/components/ui/register-form/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import RegisterForm from './register-form.svelte';
2	+ export { RegisterForm };

package/dist/lib/components/ui/register-form/register-form.svelte ADDED Viewed

@@ -0,0 +1,197 @@
+<script lang="ts">
+  import * as Card from '@tanglemedia/svelte-starter-ui-shadcn/Card';
+	import { Button } from '@tanglemedia/svelte-starter-ui-shadcn/Button';
+	import { Input } from '@tanglemedia/svelte-starter-ui-shadcn/Input';
+	import { Label } from '@tanglemedia/svelte-starter-ui-shadcn/Label';
+  import * as Form from '@tanglemedia/svelte-starter-ui-shadcn/Form';
+  interface Props {
+    superform: any;
+    card?: boolean;
+    cardClass?: string;
+    title?: string;
+    description?: string;
+    login?: boolean;
+    loginLink?: string;
+    formTail?: Snippet;
+    formHead?: Snippet;
+    children?: Snippet;
+  }
+  let {
+    superform,
+    card = false,
+    cardClass = "mx-auto max-w-sm",
+    title = "Register",
+    description = "Enter your information below to register a new account",
+    login = true,
+    loginLink = "/login",
+    formTail,
+    formHead,
+    children
+  }: Props = $props();
+  const { form: formData, enhance } = superform;
+</script>
+{#if card}
+  <Card.Root class={cardClass}>
+    <Card.Header>
+      <Card.Title class="text-2xl">{title}</Card.Title>
+      <Card.Description>{description}</Card.Description>
+    </Card.Header>
+    <Card.Content>
+      <form method="POST" use:enhance class="grid gap-4">
+        {@render formHead?.()}
+        {#if children}
+          {@render children?.()}
+        {:else}
+          <div class="grid grid-cols-2 gap-4">
+            <Form.Field form={superform} name="first_name">
+              <Form.Control >
+                {#snippet children({ props })}
+                  <Form.Label>
+                    First Name
+                  </Form.Label>
+                  <Input {...props} bind:value={$formData.first_name}  />
+                {/snippet}
+              </Form.Control>
+              <Form.FieldErrors />
+            </Form.Field>
+            <Form.Field form={superform} name="last_name">
+              <Form.Control >
+                {#snippet children({ props })}
+                  <Form.Label>
+                    Last Name
+                  </Form.Label>
+                  <Input {...props} bind:value={$formData.last_name}  />
+                {/snippet}
+              </Form.Control>
+              <Form.FieldErrors />
+            </Form.Field>
+          </div>
+          <Form.Field form={superform} name="email">
+            <Form.Control >
+              {#snippet children({ props })}
+                <Form.Label>
+                  Email
+                </Form.Label>
+                <Input {...props} bind:value={$formData.email} type="email"  />
+              {/snippet}
+            </Form.Control>
+            <Form.FieldErrors />
+          </Form.Field>
+          <Form.Field form={superform} name="password">
+            <Form.Control >
+              {#snippet children({ props })}
+                <Form.Label>
+                  Password
+                </Form.Label>
+                <Input {...props} bind:value={$formData.password} type="password"  />
+              {/snippet}
+            </Form.Control>
+            <Form.FieldErrors />
+          </Form.Field>
+          <Form.Field form={superform} name="confirm_password">
+            <Form.Control >
+              {#snippet children({ props })}
+                <Form.Label>
+                  Confirm Password
+                </Form.Label>
+                <Input {...props} bind:value={$formData.confirm_password} type="password"  />
+              {/snippet}
+            </Form.Control>
+            <Form.FieldErrors />
+          </Form.Field>
+        {/if}
+        <Form.Button type="submit" class="w-full">Register</Form.Button>
+        {@render formTail?.()}
+      </form>
+      {#if login}
+        <div class="mt-4 text-center text-sm">
+          Already have an account?
+          <a href={loginLink} class="underline"> Sign in </a>
+        </div>
+      {/if}
+    </Card.Content>
+  </Card.Root>
+{:else}
+  <div class={cardClass}>
+    <div class="flex flex-col space-y-1.5">
+      <h3 class="font-semibold tracking-tight text-2xl">{title}</h3>
+      <p class="text-muted-foreground text-sm">{description}</p>
+    </div>
+    <form method="POST" use:enhance class="grid gap-4">
+      {@render formHead?.()}
+      {#if children}
+        {@render children?.()}
+      {:else}
+        <div class="grid grid-cols-2 gap-4">
+          <Form.Field form={superform} name="first_name">
+            <Form.Control >
+              {#snippet children({ props })}
+                <Form.Label>
+                  First Name
+                </Form.Label>
+                <Input {...props} bind:value={$formData.first_name}  />
+              {/snippet}
+            </Form.Control>
+            <Form.FieldErrors />
+          </Form.Field>
+          <Form.Field form={superform} name="last_name">
+            <Form.Control >
+              {#snippet children({ props })}
+                <Form.Label>
+                  Last Name
+                </Form.Label>
+                <Input {...props} bind:value={$formData.last_name}  />
+              {/snippet}
+            </Form.Control>
+            <Form.FieldErrors />
+          </Form.Field>
+        </div>
+        <Form.Field form={superform} name="email">
+          <Form.Control >
+            {#snippet children({ props })}
+              <Form.Label>
+                Email
+              </Form.Label>
+              <Input {...props} bind:value={$formData.email} type="email"  />
+            {/snippet}
+          </Form.Control>
+          <Form.FieldErrors />
+        </Form.Field>
+        <Form.Field form={superform} name="password">
+          <Form.Control >
+            {#snippet children({ props })}
+              <Form.Label>
+                Password
+              </Form.Label>
+              <Input {...props} bind:value={$formData.password} type="password"  />
+            {/snippet}
+          </Form.Control>
+          <Form.FieldErrors />
+        </Form.Field>
+        <Form.Field form={superform} name="confirm_password">
+          <Form.Control >
+            {#snippet children({ props })}
+              <Form.Label>
+                Confirm Password
+              </Form.Label>
+              <Input {...props} bind:value={$formData.confirm_password} type="password"  />
+            {/snippet}
+          </Form.Control>
+          <Form.FieldErrors />
+        </Form.Field>
+      {/if}
+      <Form.Button type="submit" class="w-full">Register</Form.Button>
+      {@render formTail?.()}
+    </form>
+    {#if login}
+      <div class="mt-4 text-center text-sm">
+        Already have an account?
+        <a href={loginLink} class="underline"> Sign in </a>
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/lib/components/ui/register-form/register-form.svelte.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+interface Props {
+    superform: any;
+    card?: boolean;
+    cardClass?: string;
+    title?: string;
+    description?: string;
+    login?: boolean;
+    loginLink?: string;
+    formTail?: Snippet;
+    formHead?: Snippet;
+    children?: Snippet;
+}
+declare const RegisterForm: import("svelte").Component<Props, {}, "">;
+type RegisterForm = ReturnType<typeof RegisterForm>;
+export default RegisterForm;