{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "register-01",
  "title": "SSO Registration Card",
  "type": "registry:page",
  "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"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/register-01/register-01.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 interface Register01Payload {\n  name: string\n  email: string\n  password: string\n}\n\n/**\n * <uip-register-01> — the registry Register01 block as a web component.\n *\n * Class strings are React's Register01 verbatim. React state becomes @state\n * fields; the `canSubmit` gate is a getter. `onSubmit` (payload) / `onSignIn`\n * / `onOauth` (provider) / `onViewTerms` / `onViewPrivacy` become `submit` /\n * `sign-in` / `oauth` / `view-terms` / `view-privacy` CustomEvents (bubbles,\n * composed). The commented zod sketch is not ported (code comment only).\n */\nexport class UipRegister01 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    name: { state: true },\n    email: { state: true },\n    password: { state: true },\n    confirmPassword: { state: true },\n    acceptTerms: { state: true },\n  }\n\n  private name = ''\n  private email = ''\n  private password = ''\n  private confirmPassword = ''\n  private acceptTerms = 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', 'register-01')\n  }\n\n  private get passwordsMatch(): boolean {\n    return !this.confirmPassword || this.password === this.confirmPassword\n  }\n\n  private get canSubmit(): boolean {\n    return (\n      this.name.length > 0 &&\n      this.email.length > 0 &&\n      this.password.length >= 8 &&\n      this.passwordsMatch &&\n      this.acceptTerms\n    )\n  }\n\n  private handleSubmit(e: Event) {\n    e.preventDefault()\n    if (!this.canSubmit) return\n    this.dispatchEvent(\n      new CustomEvent<Register01Payload>('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    return html`\n      <div data-slot=\"register-01\" class=${cn('bg-muted/30 flex min-h-svh items-center justify-center p-6')}>\n        <uip-card class=\"w-full max-w-sm\">\n          <uip-card-header class=\"text-center\">\n            <uip-card-title class=\"text-2xl\">Create your account</uip-card-title>\n            <uip-card-description>Free for personal projects. No credit card.</uip-card-description>\n          </uip-card-header>\n          <uip-card-content class=\"space-y-4\">\n            <form class=\"space-y-4\" @submit=${this.handleSubmit}>\n              <div class=\"space-y-2\">\n                <uip-label for=\"r-name\">Full name</uip-label>\n                <uip-input\n                  id=\"r-name\"\n                  .value=${this.name}\n                  type=\"text\"\n                  placeholder=\"Ada Lovelace\"\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=\"space-y-2\">\n                <uip-label for=\"r-email\">Email</uip-label>\n                <uip-input\n                  id=\"r-email\"\n                  .value=${this.email}\n                  type=\"email\"\n                  placeholder=\"you@example.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=\"space-y-2\">\n                <uip-label for=\"r-password\">Password</uip-label>\n                <uip-input\n                  id=\"r-password\"\n                  .value=${this.password}\n                  type=\"password\"\n                  autocomplete=\"new-password\"\n                  minlength=\"8\"\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\">Minimum 8 characters.</p>\n              </div>\n              <div class=\"space-y-2\">\n                <uip-label for=\"r-confirm\">Confirm password</uip-label>\n                <uip-input\n                  id=\"r-confirm\"\n                  .value=${this.confirmPassword}\n                  type=\"password\"\n                  autocomplete=\"new-password\"\n                  required\n                  @input=${(e: Event) => {\n                    this.confirmPassword = (e.target as UipInput).value\n                  }}\n                ></uip-input>\n                ${!this.passwordsMatch\n                  ? html`<p class=\"text-destructive text-xs\" role=\"alert\">Passwords don't match.</p>`\n                  : ''}\n              </div>\n\n              <div class=\"flex items-start gap-2.5 pt-1\">\n                <uip-checkbox\n                  id=\"r-terms\"\n                  .checked=${this.acceptTerms}\n                  @checked-change=${(e: CustomEvent<{ checked: boolean }>) => {\n                    this.acceptTerms = e.detail.checked\n                  }}\n                ></uip-checkbox>\n                <uip-label for=\"r-terms\" class=\"text-muted-foreground cursor-pointer text-xs leading-relaxed font-normal\">\n                  I agree to the\n                  <button\n                    type=\"button\"\n                    class=\"text-foreground mx-0.5 hover:underline\"\n                    @click=${() => this.dispatchEvent(new CustomEvent('view-terms', { bubbles: true, composed: true }))}\n                  >\n                    Terms of Service\n                  </button>\n                  and\n                  <button\n                    type=\"button\"\n                    class=\"text-foreground mx-0.5 hover:underline\"\n                    @click=${() =>\n                      this.dispatchEvent(new CustomEvent('view-privacy', { bubbles: true, composed: true }))}\n                  >\n                    Privacy Policy\n                  </button>\n                  .\n                </uip-label>\n              </div>\n\n              <uip-button type=\"submit\" class=\"w-full\" ?disabled=${!this.canSubmit}>Create account</uip-button>\n            </form>\n\n            <div class=\"relative\">\n              <uip-separator></uip-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                >Or continue with</span\n              >\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-2\">\n              <uip-button\n                type=\"button\"\n                variant=\"outline\"\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('oauth', { detail: 'google', bubbles: true, composed: true }))}\n              >\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              </uip-button>\n              <uip-button\n                type=\"button\"\n                variant=\"outline\"\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('oauth', { detail: 'github', bubbles: true, composed: true }))}\n              >\n                <svg class=\"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            </div>\n          </uip-card-content>\n          <uip-card-footer class=\"justify-center\">\n            <p class=\"text-muted-foreground text-xs\">\n              Already have an account?\n              <button\n                type=\"button\"\n                class=\"text-foreground ml-1 font-medium hover:underline\"\n                @click=${() => this.dispatchEvent(new CustomEvent('sign-in', { bubbles: true, composed: true }))}\n              >\n                Sign in\n              </button>\n            </p>\n          </uip-card-footer>\n        </uip-card>\n      </div>\n    `\n  }\n}\n\ncustomElements.get('uip-register-01') || customElements.define('uip-register-01', UipRegister01)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-register-01': UipRegister01\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/register-01/register-01.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"
  ]
}