{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "auth-sign-up",
  "title": "Auth Sign Up",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-angular/blocks/auth-sign-up/auth-sign-up.component.ts",
      "content": "// Full-page sign-up surface: name/email/password/confirm form with password-match\n// validation, T&C acceptance gate, GitHub + Google OAuth row, and a link back to\n// sign-in. Port of the Vue/React block 1:1 — emits `submit` with the validated\n// payload and `oauth` with the chosen provider; the consumer wires the actual auth call.\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 AuthSignUpOauthProvider = 'github' | 'google'\n\nexport interface AuthSignUpPayload {\n  name: string\n  email: string\n  password: string\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-auth-sign-up, [ui-auth-sign-up]',\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=\"auth-sign-up\" [class]=\"rootClass\">\n      <div ui-card class=\"w-full max-w-md\">\n        <div ui-card-header class=\"text-center\">\n          <h2 ui-card-title class=\"text-2xl\">{{ title }}</h2>\n          <p ui-card-description>{{ description }}</p>\n        </div>\n        <div ui-card-content>\n          <form class=\"space-y-4\" (submit)=\"onSubmit($event)\">\n            <div class=\"grid gap-2\">\n              <label ui-label for=\"signup-name\">Full name</label>\n              <ui-input\n                id=\"signup-name\"\n                [value]=\"name()\"\n                (valueChange)=\"name.set($event)\"\n                autoComplete=\"name\"\n                required\n              />\n            </div>\n            <div class=\"grid gap-2\">\n              <label ui-label for=\"signup-email\">Email</label>\n              <ui-input\n                id=\"signup-email\"\n                [value]=\"email()\"\n                (valueChange)=\"email.set($event)\"\n                type=\"email\"\n                placeholder=\"you@company.com\"\n                autoComplete=\"email\"\n                required\n              />\n            </div>\n            <div class=\"grid gap-2\">\n              <label ui-label for=\"signup-password\">Password</label>\n              <ui-input\n                id=\"signup-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\">8+ characters, mix of letters, numbers and symbols.</p>\n            </div>\n            <div class=\"grid gap-2\">\n              <label ui-label for=\"signup-confirm\">Confirm password</label>\n              <ui-input\n                id=\"signup-confirm\"\n                [value]=\"confirm()\"\n                (valueChange)=\"confirm.set($event)\"\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&apos;t match.</p>\n              }\n            </div>\n            <div class=\"flex items-start gap-2\">\n              <ui-checkbox id=\"signup-accept\" [checked]=\"accept()\" (checkedChange)=\"accept.set(!!$event)\" />\n              <label ui-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 ui-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              <ui-separator class=\"flex-1\" />\n              <span class=\"text-muted-foreground text-xs uppercase\">or continue with</span>\n              <ui-separator class=\"flex-1\" />\n            </div>\n            <div class=\"grid gap-2\" [class.sm:grid-cols-2]=\"oauthProviders.length > 1\">\n              @if (showsProvider('github')) {\n                <button ui-button variant=\"outline\" type=\"button\" (click)=\"oauth.emit('github')\">\n                  <lucide-icon [img]=\"Github\" class=\"mr-2 size-4\" />\n                  GitHub\n                </button>\n              }\n              @if (showsProvider('google')) {\n                <button ui-button variant=\"outline\" type=\"button\" (click)=\"oauth.emit('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>\n                  Google\n                </button>\n              }\n            </div>\n          }\n        </div>\n        <div ui-card-footer 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        </div>\n      </div>\n    </div>\n  `,\n})\nexport class UiAuthSignUpComponent {\n  protected readonly Github = Github\n\n  @Input() title = 'Create your account'\n  @Input() description = 'Start your 14-day free trial. No credit card required.'\n  @Input() signInHref = '/login'\n  @Input() termsHref = '#'\n  @Input() privacyHref = '#'\n  @Input() oauthProviders: AuthSignUpOauthProvider[] = ['github', 'google']\n  @Input('class') className?: string\n\n  @Output() readonly submit = new EventEmitter<AuthSignUpPayload>()\n  @Output() readonly oauth = new EventEmitter<AuthSignUpOauthProvider>()\n\n  readonly name = signal('')\n  readonly email = signal('')\n  readonly password = signal('')\n  readonly confirm = signal('')\n  readonly accept = signal(false)\n\n  readonly passwordsMatch = computed(() => !this.confirm() || this.password() === this.confirm())\n  readonly canSubmit = computed(() =>\n    Boolean(this.name() && this.email() && this.password() && this.passwordsMatch() && this.accept()),\n  )\n\n  get rootClass(): string {\n    return cn('bg-background flex min-h-svh items-center justify-center p-6', this.className)\n  }\n\n  showsProvider(provider: AuthSignUpOauthProvider): boolean {\n    return this.oauthProviders.includes(provider)\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/auth-sign-up/auth-sign-up.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/auth-sign-up/index.ts",
      "content": "export { UiAuthSignUpComponent, type AuthSignUpOauthProvider, type AuthSignUpPayload } from './auth-sign-up.component'\n",
      "type": "registry:page",
      "target": "~/src/app/components/blocks/auth-sign-up/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": "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. Emits `submit` with the validated payload and `oauth` with provider; consumer wires the actual auth call.",
  "categories": [
    "auth"
  ]
}