{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "register-01",
  "title": "SSO Registration Card",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-angular/blocks/register-01/register-01.component.ts",
      "content": "// Centered sign-up card: name + email + password + confirm with inline mismatch warning,\n// terms checkbox gating the submit, divider, and a 2-button SSO row (Google + GitHub).\n// Footer links back to sign-in. Port of the Vue/React block 1:1 — emits `submit` with the\n// validated payload, `signIn`, `oauth` with the provider, and `viewTerms` / `viewPrivacy`.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'\nimport { Github, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n  UiCardComponent,\n  UiCardContentComponent,\n  UiCardDescriptionComponent,\n  UiCardFooterComponent,\n  UiCardHeaderComponent,\n  UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiLabelComponent } from '@/ui/label/label.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type Register01OauthProvider = 'github' | 'google'\n\nexport interface Register01Payload {\n  name: string\n  email: string\n  password: string\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-register-01, [ui-register-01]',\n  standalone: true,\n  // The block renders its own full-page root <div>: keep the host out of layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiCardDescriptionComponent,\n    UiCardFooterComponent,\n    UiCardHeaderComponent,\n    UiCardTitleComponent,\n    UiCheckboxComponent,\n    UiInputComponent,\n    UiLabelComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <div data-slot=\"register-01\" [class]=\"rootClass\">\n      <div ui-card class=\"w-full max-w-sm\">\n        <div ui-card-header class=\"text-center\">\n          <h2 ui-card-title class=\"text-2xl\">Create your account</h2>\n          <p ui-card-description>Free for personal projects. No credit card.</p>\n        </div>\n        <div ui-card-content class=\"space-y-4\">\n          <form class=\"space-y-4\" (submit)=\"onSubmit($event)\">\n            <div class=\"space-y-2\">\n              <label ui-label for=\"r-name\">Full name</label>\n              <ui-input\n                id=\"r-name\"\n                [value]=\"name()\"\n                (valueChange)=\"name.set($event)\"\n                type=\"text\"\n                placeholder=\"Ada Lovelace\"\n                autoComplete=\"name\"\n                required\n              />\n            </div>\n            <div class=\"space-y-2\">\n              <label ui-label for=\"r-email\">Email</label>\n              <ui-input\n                id=\"r-email\"\n                [value]=\"email()\"\n                (valueChange)=\"email.set($event)\"\n                type=\"email\"\n                placeholder=\"you@example.com\"\n                autoComplete=\"email\"\n                required\n              />\n            </div>\n            <div class=\"space-y-2\">\n              <label ui-label for=\"r-password\">Password</label>\n              <ui-input\n                id=\"r-password\"\n                [value]=\"password()\"\n                (valueChange)=\"password.set($event)\"\n                type=\"password\"\n                autoComplete=\"new-password\"\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 ui-label for=\"r-confirm\">Confirm password</label>\n              <ui-input\n                id=\"r-confirm\"\n                [value]=\"confirmPassword()\"\n                (valueChange)=\"confirmPassword.set($event)\"\n                type=\"password\"\n                autoComplete=\"new-password\"\n                required\n              />\n              @if (!passwordsMatch()) {\n                <p class=\"text-destructive text-xs\" role=\"alert\">Passwords don&apos;t match.</p>\n              }\n            </div>\n\n            <div class=\"flex items-start gap-2.5 pt-1\">\n              <ui-checkbox id=\"r-terms\" [checked]=\"acceptTerms()\" (checkedChange)=\"acceptTerms.set(!!$event)\" />\n              <label\n                ui-label\n                for=\"r-terms\"\n                class=\"text-muted-foreground cursor-pointer text-xs leading-relaxed font-normal\"\n              >\n                I agree to the\n                <button type=\"button\" class=\"text-foreground mx-0.5 hover:underline\" (click)=\"viewTerms.emit()\">\n                  Terms of Service\n                </button>\n                and\n                <button type=\"button\" class=\"text-foreground mx-0.5 hover:underline\" (click)=\"viewPrivacy.emit()\">\n                  Privacy Policy</button\n                >.\n              </label>\n            </div>\n\n            <button ui-button type=\"submit\" class=\"w-full\" [disabled]=\"!canSubmit()\">Create account</button>\n          </form>\n\n          <div class=\"relative\">\n            <ui-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 ui-button type=\"button\" variant=\"outline\" (click)=\"oauth.emit('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 ui-button type=\"button\" variant=\"outline\" (click)=\"oauth.emit('github')\">\n              <lucide-icon [img]=\"Github\" class=\"size-4\" />\n              GitHub\n            </button>\n          </div>\n        </div>\n        <div ui-card-footer 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)=\"signIn.emit()\">\n              Sign in\n            </button>\n          </p>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class UiRegister01Component {\n  protected readonly Github = Github\n\n  @Input('class') className?: string\n\n  @Output() readonly submit = new EventEmitter<Register01Payload>()\n  @Output() readonly signIn = new EventEmitter<void>()\n  @Output() readonly oauth = new EventEmitter<Register01OauthProvider>()\n  @Output() readonly viewTerms = new EventEmitter<void>()\n  @Output() readonly viewPrivacy = new EventEmitter<void>()\n\n  readonly name = signal('')\n  readonly email = signal('')\n  readonly password = signal('')\n  readonly confirmPassword = signal('')\n  readonly acceptTerms = signal(false)\n\n  readonly passwordsMatch = computed(() => !this.confirmPassword() || this.password() === this.confirmPassword())\n  readonly canSubmit = computed(\n    () =>\n      this.name().length > 0 &&\n      this.email().length > 0 &&\n      this.password().length >= 8 &&\n      this.passwordsMatch() &&\n      this.acceptTerms(),\n  )\n\n  get rootClass(): string {\n    return cn('bg-muted/30 flex min-h-svh items-center justify-center p-6', this.className)\n  }\n\n  onSubmit(event: Event): void {\n    event.preventDefault()\n    if (!this.canSubmit()) return\n    this.submit.emit({ name: this.name(), email: this.email(), password: this.password() })\n  }\n}\n",
      "type": "registry:page",
      "target": "~/src/app/components/blocks/register-01/register-01.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/register-01/index.ts",
      "content": "export { UiRegister01Component, type Register01OauthProvider, type Register01Payload } from './register-01.component'\n",
      "type": "registry:page",
      "target": "~/src/app/components/blocks/register-01/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/checkbox.json",
    "https://uipkge.dev/r/angular/input.json",
    "https://uipkge.dev/r/angular/label.json",
    "https://uipkge.dev/r/angular/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"
  ]
}