{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "register-01",
  "title": "Register 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/register-01/Register01.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nconst Github = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path 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  </svg>\n)\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\nexport interface Register01Props {\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\nexport function Register01({\n  onSubmit,\n  onSignIn,\n  onOauth,\n  onViewTerms,\n  onViewPrivacy,\n}: Register01Props) {\n  const [name, setName] = React.useState('')\n  const [email, setEmail] = React.useState('')\n  const [password, setPassword] = React.useState('')\n  const [confirmPassword, setConfirmPassword] = React.useState('')\n  const [acceptTerms, setAcceptTerms] = React.useState(false)\n\n  const passwordsMatch = !confirmPassword || password === confirmPassword\n\n  const canSubmit =\n    name.length > 0 &&\n    email.length > 0 &&\n    password.length >= 8 &&\n    passwordsMatch &&\n    acceptTerms\n\n  function handleSubmit(e: React.FormEvent) {\n    e.preventDefault()\n    if (!canSubmit) return\n    onSubmit?.({ name, email, password })\n  }\n\n  // ----- Optional: zod validation -----\n  // The `canSubmit` flag 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: React.FormEvent) {\n  //   e.preventDefault()\n  //   const parsed = registerSchema.safeParse({\n  //     name, email, password, confirmPassword, acceptTerms,\n  //   })\n  //   if (!parsed.success) {\n  //     // parsed.error.flatten().fieldErrors -> { email: [...], password: [...], ... }\n  //     return\n  //   }\n  //   onSubmit?.({\n  //     name: parsed.data.name,\n  //     email: parsed.data.email,\n  //     password: parsed.data.password,\n  //   })\n  // }\n\n  return (\n    <div className=\"bg-muted/30 flex min-h-svh items-center justify-center p-6\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader className=\"text-center\">\n          <CardTitle className=\"text-2xl\">Create your account</CardTitle>\n          <CardDescription>Free for personal projects. No credit card.</CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          <form className=\"space-y-4\" onSubmit={handleSubmit}>\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"r-name\">Full name</Label>\n              <Input\n                id=\"r-name\"\n                value={name}\n                onChange={(e) => setName(e.target.value)}\n                type=\"text\"\n                placeholder=\"Ada Lovelace\"\n                autoComplete=\"name\"\n                required\n              />\n            </div>\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"r-email\">Email</Label>\n              <Input\n                id=\"r-email\"\n                value={email}\n                onChange={(e) => setEmail(e.target.value)}\n                type=\"email\"\n                placeholder=\"you@example.com\"\n                autoComplete=\"email\"\n                required\n              />\n            </div>\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"r-password\">Password</Label>\n              <Input\n                id=\"r-password\"\n                value={password}\n                onChange={(e) => setPassword(e.target.value)}\n                type=\"password\"\n                autoComplete=\"new-password\"\n                minLength={8}\n                required\n              />\n              <p className=\"text-muted-foreground text-xs\">Minimum 8 characters.</p>\n            </div>\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"r-confirm\">Confirm password</Label>\n              <Input\n                id=\"r-confirm\"\n                value={confirmPassword}\n                onChange={(e) => setConfirmPassword(e.target.value)}\n                type=\"password\"\n                autoComplete=\"new-password\"\n                required\n              />\n              {!passwordsMatch && (\n                <p className=\"text-destructive text-xs\" role=\"alert\">\n                  Passwords don't match.\n                </p>\n              )}\n            </div>\n\n            <div className=\"flex items-start gap-2.5 pt-1\">\n              <Checkbox\n                id=\"r-terms\"\n                checked={acceptTerms}\n                onCheckedChange={(value) => setAcceptTerms(value === true)}\n              />\n              <Label\n                htmlFor=\"r-terms\"\n                className=\"text-muted-foreground cursor-pointer text-xs leading-relaxed font-normal\"\n              >\n                I agree to the\n                <button\n                  type=\"button\"\n                  className=\"text-foreground mx-0.5 hover:underline\"\n                  onClick={() => onViewTerms?.()}\n                >\n                  Terms of Service\n                </button>\n                and\n                <button\n                  type=\"button\"\n                  className=\"text-foreground mx-0.5 hover:underline\"\n                  onClick={() => onViewPrivacy?.()}\n                >\n                  Privacy Policy\n                </button>\n                .\n              </Label>\n            </div>\n\n            <Button type=\"submit\" className=\"w-full\" disabled={!canSubmit}>\n              Create account\n            </Button>\n          </form>\n\n          <div className=\"relative\">\n            <Separator />\n            <span className=\"bg-card text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-[11px] tracking-wider uppercase\">\n              Or continue with\n            </span>\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-2\">\n            <Button type=\"button\" variant=\"outline\" onClick={() => onOauth?.('google')}>\n              <svg viewBox=\"0 0 24 24\" className=\"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              <Github className=\"size-4\" />\n              GitHub\n            </Button>\n          </div>\n        </CardContent>\n        <CardFooter className=\"justify-center\">\n          <p className=\"text-muted-foreground text-xs\">\n            Already have an account?\n            <button\n              type=\"button\"\n              className=\"text-foreground ml-1 font-medium hover:underline\"\n              onClick={() => onSignIn?.()}\n            >\n              Sign in\n            </button>\n          </p>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/Register01.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/checkbox.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/label.json",
    "https://uipkge.dev/r/react/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"
  ]
}