{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "auth-sign-up",
  "title": "Auth Sign Up",
  "type": "registry:page",
  "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"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/auth-sign-up/auth-sign-up.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/button/button'\nimport '../../components/card/card'\nimport '../../components/checkbox/checkbox'\nimport '../../components/input/input'\nimport '../../components/label/label'\nimport '../../components/separator/separator'\nimport type { UipInput } from '../../components/input/input'\n\nexport type AuthSignUpProvider = 'github' | 'google'\n\nexport interface AuthSignUpPayload {\n  name: string\n  email: string\n  password: string\n}\n\n/**\n * <uip-auth-sign-up> — the registry AuthSignUp block as a web component.\n *\n * Class strings are React's AuthSignUp verbatim. React state becomes @state\n * fields; the `canSubmit` gate is a getter. `onSubmit` (validated payload) /\n * `onOauth` (provider) become `submit` / `oauth` CustomEvents (bubbles,\n * composed). GitHub/Google brand marks are copied from React's inline SVGs.\n * `oauth-providers` is a space-separated attribute (default: \"github google\").\n */\nexport class UipAuthSignUp extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    heading: {},\n    description: {},\n    signInHref: { attribute: 'sign-in-href' },\n    termsHref: { attribute: 'terms-href' },\n    privacyHref: { attribute: 'privacy-href' },\n    oauthProviders: { attribute: 'oauth-providers' },\n    name: { state: true },\n    email: { state: true },\n    password: { state: true },\n    confirm: { state: true },\n    accept: { state: true },\n  }\n\n  /** React's `title` (`title` is taken by HTMLElement). */\n  heading = 'Create your account'\n  description = 'Start your 14-day free trial. No credit card required.'\n  signInHref = '/login'\n  termsHref = '#'\n  privacyHref = '#'\n  oauthProviders = 'github google'\n  private name = ''\n  private email = ''\n  private password = ''\n  private confirm = ''\n  private accept = false\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'auth-sign-up')\n  }\n\n  private get providers(): AuthSignUpProvider[] {\n    return this.oauthProviders\n      .split(/\\s+/)\n      .filter((p): p is AuthSignUpProvider => p === 'github' || p === 'google')\n  }\n\n  private get passwordsMatch(): boolean {\n    return !this.confirm || this.password === this.confirm\n  }\n\n  private get canSubmit(): boolean {\n    return Boolean(this.name && this.email && this.password && this.passwordsMatch && this.accept)\n  }\n\n  private handleSubmit(e: Event) {\n    e.preventDefault()\n    if (!this.canSubmit) return\n    this.dispatchEvent(\n      new CustomEvent<AuthSignUpPayload>('submit', {\n        detail: { name: this.name, email: this.email, password: this.password },\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  render() {\n    const providers = this.providers\n    return html`\n      <div data-slot=\"auth-sign-up\" class=${cn('bg-background flex min-h-svh items-center justify-center p-6')}>\n        <uip-card class=\"w-full max-w-md\">\n          <uip-card-header class=\"text-center\">\n            <uip-card-title class=\"text-2xl\">${this.heading}</uip-card-title>\n            <uip-card-description>${this.description}</uip-card-description>\n          </uip-card-header>\n          <uip-card-content>\n            <form class=\"space-y-4\" @submit=${this.handleSubmit}>\n              <div class=\"grid gap-2\">\n                <uip-label for=\"signup-name\">Full name</uip-label>\n                <uip-input\n                  id=\"signup-name\"\n                  .value=${this.name}\n                  autocomplete=\"name\"\n                  required\n                  @input=${(e: Event) => {\n                    this.name = (e.target as UipInput).value\n                  }}\n                ></uip-input>\n              </div>\n              <div class=\"grid gap-2\">\n                <uip-label for=\"signup-email\">Email</uip-label>\n                <uip-input\n                  id=\"signup-email\"\n                  .value=${this.email}\n                  type=\"email\"\n                  placeholder=\"you@company.com\"\n                  autocomplete=\"email\"\n                  required\n                  @input=${(e: Event) => {\n                    this.email = (e.target as UipInput).value\n                  }}\n                ></uip-input>\n              </div>\n              <div class=\"grid gap-2\">\n                <uip-label for=\"signup-password\">Password</uip-label>\n                <uip-input\n                  id=\"signup-password\"\n                  .value=${this.password}\n                  type=\"password\"\n                  autocomplete=\"new-password\"\n                  required\n                  @input=${(e: Event) => {\n                    this.password = (e.target as UipInput).value\n                  }}\n                ></uip-input>\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                <uip-label for=\"signup-confirm\">Confirm password</uip-label>\n                <uip-input\n                  id=\"signup-confirm\"\n                  .value=${this.confirm}\n                  type=\"password\"\n                  autocomplete=\"new-password\"\n                  aria-invalid=${this.passwordsMatch ? 'false' : 'true'}\n                  required\n                  @input=${(e: Event) => {\n                    this.confirm = (e.target as UipInput).value\n                  }}\n                ></uip-input>\n                ${!this.passwordsMatch ? html`<p class=\"text-destructive text-xs\">Passwords don't match.</p>` : ''}\n              </div>\n              <div class=\"flex items-start gap-2\">\n                <uip-checkbox\n                  id=\"signup-accept\"\n                  .checked=${this.accept}\n                  @checked-change=${(e: CustomEvent<{ checked: boolean }>) => {\n                    this.accept = e.detail.checked\n                  }}\n                ></uip-checkbox>\n                <uip-label for=\"signup-accept\" class=\"text-sm leading-snug font-normal\">\n                  I agree to the\n                  <a href=${this.termsHref} class=\"text-foreground underline-offset-4 hover:underline\">\n                    Terms of Service\n                  </a>\n                  and\n                  <a href=${this.privacyHref} class=\"text-foreground underline-offset-4 hover:underline\">\n                    Privacy Policy\n                  </a>\n                  .\n                </uip-label>\n              </div>\n              <uip-button type=\"submit\" class=\"w-full\" ?disabled=${!this.canSubmit}>Create account</uip-button>\n            </form>\n\n            ${providers.length > 0\n              ? html`\n                  <div class=\"my-6 flex items-center gap-3\">\n                    <uip-separator class=\"flex-1\"></uip-separator>\n                    <span class=\"text-muted-foreground text-xs uppercase\">or continue with</span>\n                    <uip-separator class=\"flex-1\"></uip-separator>\n                  </div>\n                  <div class=${cn('grid gap-2', providers.length > 1 ? 'sm:grid-cols-2' : '')}>\n                    ${providers.includes('github')\n                      ? html`<uip-button\n                          variant=\"outline\"\n                          type=\"button\"\n                          @click=${() =>\n                            this.dispatchEvent(\n                              new CustomEvent('oauth', { detail: 'github', bubbles: true, composed: true }),\n                            )}\n                        >\n                          <svg class=\"mr-2 size-4\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path\n                              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                            />\n                          </svg>\n                          GitHub\n                        </uip-button>`\n                      : ''}\n                    ${providers.includes('google')\n                      ? html`<uip-button\n                          variant=\"outline\"\n                          type=\"button\"\n                          @click=${() =>\n                            this.dispatchEvent(\n                              new CustomEvent('oauth', { detail: 'google', bubbles: true, composed: true }),\n                            )}\n                        >\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\n                              fill=\"#FBBC05\"\n                              d=\"M5.84 14.1a6.6 6.6 0 010-4.2V7.06H2.18a11 11 0 000 9.88l3.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 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                        </uip-button>`\n                      : ''}\n                  </div>\n                `\n              : ''}\n          </uip-card-content>\n          <uip-card-footer class=\"justify-center\">\n            <p class=\"text-muted-foreground text-sm\">\n              Already have an account?\n              <a href=${this.signInHref} class=\"text-foreground font-medium underline-offset-4 hover:underline\">\n                Sign in\n              </a>\n            </p>\n          </uip-card-footer>\n        </uip-card>\n      </div>\n    `\n  }\n}\n\ncustomElements.get('uip-auth-sign-up') || customElements.define('uip-auth-sign-up', UipAuthSignUp)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-auth-sign-up': UipAuthSignUp\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/auth-sign-up/auth-sign-up.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/card.json",
    "https://uipkge.dev/r/lit/checkbox.json",
    "https://uipkge.dev/r/lit/input.json",
    "https://uipkge.dev/r/lit/label.json",
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/separator.json"
  ]
}