{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "register-01",
  "title": "Register 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/register-01/Register01.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Github } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Separator } from '@/components/ui/separator'\n\nconst name = ref('')\nconst email = ref('')\nconst password = ref('')\nconst confirmPassword = ref('')\nconst acceptTerms = ref(false)\n\nconst passwordsMatch = computed(() => !confirmPassword.value || password.value === confirmPassword.value)\n\nconst canSubmit = computed(\n  () =>\n    name.value.length > 0 &&\n    email.value.length > 0 &&\n    password.value.length >= 8 &&\n    passwordsMatch.value &&\n    acceptTerms.value,\n)\n\nconst emit = defineEmits<{\n  (e: 'submit', payload: { name: string; email: string; password: string }): void\n  (e: 'sign-in'): void\n  (e: 'oauth', provider: 'github' | 'google'): void\n  (e: 'view-terms'): void\n  (e: 'view-privacy'): void\n}>()\n\nfunction onSubmit() {\n  if (!canSubmit.value) return\n  emit('submit', { name: name.value, email: email.value, password: password.value })\n}\n\n// ----- Optional: zod validation -----\n// The `canSubmit` computed 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 onSubmit() {\n//   const parsed = registerSchema.safeParse({\n//     name: name.value,\n//     email: email.value,\n//     password: password.value,\n//     confirmPassword: confirmPassword.value,\n//     acceptTerms: acceptTerms.value,\n//   })\n//   if (!parsed.success) {\n//     // parsed.error.flatten().fieldErrors -> { email: [...], password: [...], ... }\n//     return\n//   }\n//   emit('submit', {\n//     name: parsed.data.name,\n//     email: parsed.data.email,\n//     password: parsed.data.password,\n//   })\n// }\n</script>\n\n<template>\n  <div 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\" @submit.prevent=\"onSubmit\">\n          <div class=\"space-y-2\">\n            <Label for=\"r-name\">Full name</Label>\n            <Input id=\"r-name\" v-model=\"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              v-model=\"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              v-model=\"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\" v-model=\"confirmPassword\" type=\"password\" autocomplete=\"new-password\" required />\n            <p v-if=\"!passwordsMatch\" class=\"text-destructive text-xs\" role=\"alert\">Passwords don't match.</p>\n          </div>\n\n          <div class=\"flex items-start gap-2.5 pt-1\">\n            <Checkbox id=\"r-terms\" :model-value=\"acceptTerms\" @update:model-value=\"acceptTerms = $event === true\" />\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\" @click=\"emit('view-terms')\">\n                Terms of Service\n              </button>\n              and\n              <button type=\"button\" class=\"text-foreground mx-0.5 hover:underline\" @click=\"emit('view-privacy')\">\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-[11px] 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\" @click=\"emit('oauth', '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\" @click=\"emit('oauth', 'github')\">\n            <Github class=\"size-4\" />\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\" @click=\"emit('sign-in')\">\n            Sign in\n          </button>\n        </p>\n      </CardFooter>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/Register01.vue"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/checkbox.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/label.json",
    "https://uipkge.dev/r/vue/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. Emits submit, sign-in, oauth, view-terms, view-privacy.",
  "categories": [
    "auth"
  ]
}