{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "register-01",
  "title": "SSO Registration Card",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/register-01/Register01.svelte",
      "content": "<script lang=\"ts\">\n  import { Button } from '$lib/components/ui/button'\n  import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$lib/components/ui/card'\n  import { Checkbox } from '$lib/components/ui/checkbox'\n  import { Input } from '$lib/components/ui/input'\n  import { Label } from '$lib/components/ui/label'\n  import { Separator } from '$lib/components/ui/separator'\n\n  interface Props {\n    onSubmit?: (payload: { name: string; email: string; password: string }) => void\n    onSignIn?: () => void\n    onOauth?: (provider: 'github' | 'google') => void\n    onViewTerms?: () => void\n    onViewPrivacy?: () => void\n  }\n\n  let { onSubmit, onSignIn, onOauth, onViewTerms, onViewPrivacy }: Props = $props()\n\n  let name = $state('')\n  let email = $state('')\n  let password = $state('')\n  let confirmPassword = $state('')\n  let acceptTerms = $state(false)\n\n  const passwordsMatch = $derived(!confirmPassword || password === confirmPassword)\n\n  const canSubmit = $derived(\n    name.length > 0 && email.length > 0 && password.length >= 8 && passwordsMatch && acceptTerms,\n  )\n\n  function handleSubmit(e: SubmitEvent) {\n    e.preventDefault()\n    if (!canSubmit) return\n    onSubmit?.({ name, email, password })\n  }\n\n  // ----- Optional: zod validation -----\n  // The `canSubmit` derived already guards basic shape (lengths +\n  // matching passwords + terms checked), but for typed parsing,\n  // regex-driven password rules, or shared schema with the backend,\n  // drop in zod. Add `zod` to your project and uncomment below.\n  //\n  // import { z } from 'zod'\n  // const registerSchema = z\n  //   .object({\n  //     name: z.string().min(1, 'Name is required'),\n  //     email: z.string().email('Enter a valid email'),\n  //     password: z\n  //       .string()\n  //       .min(8, 'At least 8 characters')\n  //       .regex(/[A-Z]/, 'One uppercase letter')\n  //       .regex(/[0-9]/, 'One number'),\n  //     confirmPassword: z.string(),\n  //     acceptTerms: z.literal(true, { errorMap: () => ({ message: 'Required' }) }),\n  //   })\n  //   .refine((d) => d.password === d.confirmPassword, {\n  //     path: ['confirmPassword'],\n  //     message: \"Passwords don't match\",\n  //   })\n  // function handleSubmit(e: SubmitEvent) {\n  //   e.preventDefault()\n  //   const parsed = registerSchema.safeParse({ name, email, password, confirmPassword, acceptTerms })\n  //   if (!parsed.success) {\n  //     // parsed.error.flatten().fieldErrors -> { email: [...], password: [...], ... }\n  //     return\n  //   }\n  //   onSubmit?.({ name: parsed.data.name, email: parsed.data.email, password: parsed.data.password })\n  // }\n</script>\n\n<div data-slot=\"register-01\" class=\"bg-muted/30 flex min-h-svh items-center justify-center p-6\">\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader class=\"text-center\">\n      <CardTitle class=\"text-2xl\">Create your account</CardTitle>\n      <CardDescription>Free for personal projects. No credit card.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"space-y-4\">\n      <form class=\"space-y-4\" onsubmit={handleSubmit}>\n        <div class=\"space-y-2\">\n          <Label for=\"r-name\">Full name</Label>\n          <Input id=\"r-name\" bind:value={name} type=\"text\" placeholder=\"Ada Lovelace\" autocomplete=\"name\" required />\n        </div>\n        <div class=\"space-y-2\">\n          <Label for=\"r-email\">Email</Label>\n          <Input\n            id=\"r-email\"\n            bind:value={email}\n            type=\"email\"\n            placeholder=\"you@example.com\"\n            autocomplete=\"email\"\n            required\n          />\n        </div>\n        <div class=\"space-y-2\">\n          <Label for=\"r-password\">Password</Label>\n          <Input\n            id=\"r-password\"\n            bind:value={password}\n            type=\"password\"\n            autocomplete=\"new-password\"\n            minlength={8}\n            required\n          />\n          <p class=\"text-muted-foreground text-xs\">Minimum 8 characters.</p>\n        </div>\n        <div class=\"space-y-2\">\n          <Label for=\"r-confirm\">Confirm password</Label>\n          <Input id=\"r-confirm\" bind:value={confirmPassword} type=\"password\" autocomplete=\"new-password\" required />\n          {#if !passwordsMatch}\n            <p class=\"text-destructive text-xs\" role=\"alert\">Passwords don't match.</p>\n          {/if}\n        </div>\n\n        <div class=\"flex items-start gap-2.5 pt-1\">\n          <Checkbox id=\"r-terms\" bind:checked={acceptTerms} />\n          <Label for=\"r-terms\" class=\"text-muted-foreground cursor-pointer text-xs leading-relaxed font-normal\">\n            I agree to the\n            <button type=\"button\" class=\"text-foreground mx-0.5 hover:underline\" onclick={() => onViewTerms?.()}>\n              Terms of Service\n            </button>\n            and\n            <button type=\"button\" class=\"text-foreground mx-0.5 hover:underline\" onclick={() => onViewPrivacy?.()}>\n              Privacy Policy</button\n            >.\n          </Label>\n        </div>\n\n        <Button type=\"submit\" class=\"w-full\" disabled={!canSubmit}>Create account</Button>\n      </form>\n\n      <div class=\"relative\">\n        <Separator />\n        <span\n          class=\"bg-card text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-xs tracking-wider uppercase\"\n        >\n          Or continue with\n        </span>\n      </div>\n\n      <div class=\"grid grid-cols-2 gap-2\">\n        <Button type=\"button\" variant=\"outline\" onclick={() => onOauth?.('google')}>\n          <svg viewBox=\"0 0 24 24\" class=\"size-4\" aria-hidden=\"true\">\n            <path\n              fill=\"#4285F4\"\n              d=\"M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z\"\n            />\n            <path\n              fill=\"#34A853\"\n              d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n            />\n            <path\n              fill=\"#FBBC05\"\n              d=\"M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z\"\n            />\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 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z\"\n            />\n          </svg>\n          Google\n        </Button>\n        <Button type=\"button\" variant=\"outline\" onclick={() => onOauth?.('github')}>\n          <svg viewBox=\"0 0 24 24\" class=\"size-4\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n            />\n          </svg>\n          GitHub\n        </Button>\n      </div>\n    </CardContent>\n    <CardFooter class=\"justify-center\">\n      <p class=\"text-muted-foreground text-xs\">\n        Already have an account?\n        <button type=\"button\" class=\"text-foreground ml-1 font-medium hover:underline\" onclick={() => onSignIn?.()}>\n          Sign in\n        </button>\n      </p>\n    </CardFooter>\n  </Card>\n</div>\n",
      "type": "registry:page",
      "target": "~/src/lib/components/blocks/register-01/Register01.svelte"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/checkbox.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/label.json",
    "https://uipkge.dev/r/svelte/separator.json"
  ],
  "description": "Centered sign-up card. Name + email + password + confirm with inline mismatch warning, terms checkbox gating the submit, divider, and a 2-button SSO row (Google + GitHub). Footer links back to sign-in. Pass onSubmit, onSignIn, onOauth, onViewTerms, onViewPrivacy callbacks.",
  "categories": [
    "auth"
  ]
}