{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "auth-sign-up",
  "title": "Auth Sign Up",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/auth-sign-up/AuthSignUp.svelte",
      "content": "<script lang=\"ts\" module>\n  export type OauthProvider = 'github' | 'google'\n\n  export interface AuthSignUpProps {\n    title?: string\n    description?: string\n    signInHref?: string\n    termsHref?: string\n    privacyHref?: string\n    oauthProviders?: OauthProvider[]\n    /** Called with the validated payload when the form submits. Wire your auth call here. */\n    onSubmit?: (payload: { name: string; email: string; password: string }) => void\n    /** Called with the chosen provider when an OAuth button is clicked. */\n    onOauth?: (provider: OauthProvider) => void\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$lib/components/ui/card'\n  import { Input } from '$lib/components/ui/input'\n  import { Label } from '$lib/components/ui/label'\n  import { Button } from '$lib/components/ui/button'\n  import { Checkbox } from '$lib/components/ui/checkbox'\n  import { Separator } from '$lib/components/ui/separator'\n\n  let {\n    title = 'Create your account',\n    description = 'Start your 14-day free trial. No credit card required.',\n    signInHref = '/login',\n    termsHref = '#',\n    privacyHref = '#',\n    oauthProviders = ['github', 'google'],\n    onSubmit,\n    onOauth,\n  }: AuthSignUpProps = $props()\n\n  let name = $state('')\n  let email = $state('')\n  let password = $state('')\n  let confirm = $state('')\n  let accept = $state(false)\n\n  const passwordsMatch = $derived(!confirm || password === confirm)\n  const canSubmit = $derived(Boolean(name && email && password && passwordsMatch && accept))\n\n  function handleSubmit(e: SubmitEvent) {\n    e.preventDefault()\n    if (!canSubmit) return\n    onSubmit?.({ name, email, password })\n  }\n</script>\n\n<div data-slot=\"auth-sign-up\" class=\"bg-background flex min-h-svh items-center justify-center p-6\">\n  <Card class=\"w-full max-w-md\">\n    <CardHeader class=\"text-center\">\n      <CardTitle class=\"text-2xl\">{title}</CardTitle>\n      <CardDescription>{description}</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form class=\"space-y-4\" onsubmit={handleSubmit}>\n        <div class=\"grid gap-2\">\n          <Label for=\"signup-name\">Full name</Label>\n          <Input id=\"signup-name\" bind:value={name} autocomplete=\"name\" required />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"signup-email\">Email</Label>\n          <Input\n            id=\"signup-email\"\n            bind:value={email}\n            type=\"email\"\n            placeholder=\"you@company.com\"\n            autocomplete=\"email\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"signup-password\">Password</Label>\n          <Input id=\"signup-password\" bind:value={password} type=\"password\" autocomplete=\"new-password\" required />\n          <p class=\"text-muted-foreground text-xs\">8+ characters, mix of letters, numbers and symbols.</p>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"signup-confirm\">Confirm password</Label>\n          <Input\n            id=\"signup-confirm\"\n            bind:value={confirm}\n            type=\"password\"\n            autocomplete=\"new-password\"\n            aria-invalid={!passwordsMatch}\n            required\n          />\n          {#if !passwordsMatch}\n            <p class=\"text-destructive text-xs\">Passwords don't match.</p>\n          {/if}\n        </div>\n        <div class=\"flex items-start gap-2\">\n          <Checkbox id=\"signup-accept\" bind:checked={accept} />\n          <Label for=\"signup-accept\" class=\"text-sm leading-snug font-normal\">\n            I agree to the\n            <a href={termsHref} class=\"text-foreground underline-offset-4 hover:underline\">Terms of Service</a>\n            and\n            <a href={privacyHref} class=\"text-foreground underline-offset-4 hover:underline\">Privacy Policy</a>.\n          </Label>\n        </div>\n        <Button type=\"submit\" class=\"w-full\" disabled={!canSubmit}>Create account</Button>\n      </form>\n\n      {#if oauthProviders.length > 0}\n        <div class=\"my-6 flex items-center gap-3\">\n          <Separator class=\"flex-1\" />\n          <span class=\"text-muted-foreground text-xs uppercase\">or continue with</span>\n          <Separator class=\"flex-1\" />\n        </div>\n        <div class=\"grid gap-2\" class:sm:grid-cols-2={oauthProviders.length > 1}>\n          {#if oauthProviders.includes('github')}\n            <Button variant=\"outline\" type=\"button\" onclick={() => onOauth?.('github')}>\n              <svg class=\"mr-2 size-4\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  d=\"M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z\"\n                />\n              </svg>GitHub\n            </Button>\n          {/if}\n          {#if oauthProviders.includes('google')}\n            <Button variant=\"outline\" type=\"button\" onclick={() => onOauth?.('google')}>\n              <svg class=\"mr-2 size-4\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path\n                  fill=\"#4285F4\"\n                  d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z\"\n                />\n                <path\n                  fill=\"#34A853\"\n                  d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0012 23z\"\n                />\n                <path fill=\"#FBBC05\" d=\"M5.84 14.1a6.6 6.6 0 010-4.2V7.06H2.18a11 11 0 000 9.88l3.66-2.84z\" />\n                <path\n                  fill=\"#EA4335\"\n                  d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 002.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z\"\n                />\n              </svg>Google\n            </Button>\n          {/if}\n        </div>\n      {/if}\n    </CardContent>\n    <CardFooter class=\"justify-center\">\n      <p class=\"text-muted-foreground text-sm\">\n        Already have an account?\n        <a href={signInHref} class=\"text-foreground font-medium underline-offset-4 hover:underline\">Sign in</a>\n      </p>\n    </CardFooter>\n  </Card>\n</div>\n",
      "type": "registry:page",
      "target": "~/src/lib/components/blocks/auth-sign-up/AuthSignUp.svelte"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/label.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/checkbox.json",
    "https://uipkge.dev/r/svelte/separator.json"
  ],
  "description": "Full-page sign-up surface. Name/email/password/confirm form with password-match validation, T&C acceptance gate, optional OAuth row, link back to sign-in. Calls `onSubmit` with the validated payload and `onOauth` with provider; consumer wires the actual auth call.",
  "categories": [
    "auth"
  ]
}