{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "auth-password-reset",
  "title": "Auth Password Reset",
  "type": "registry:page",
  "description": "Four-stage password reset surface in a single card: request (email form) -> sent (check-your-inbox confirmation with \"Open reset form\" demo button) -> reset (new password + confirm with match validation) -> done (success confirmation linking back to sign-in). Emits `request` (email) when the link is asked for and `reset` (password) when the new password is set; consumer wires the actual mail/db calls.",
  "categories": [
    "auth"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/auth-password-reset/auth-password-reset.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { ArrowLeft, MailCheck } from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\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/input/input'\nimport '../../components/label/label'\nimport type { UipInput } from '../../components/input/input'\n\ntype Stage = 'request' | 'sent' | 'reset' | 'done'\n\n/**\n * <uip-auth-password-reset> — the registry AuthPasswordReset block as a web component.\n *\n * Class strings are React's AuthPasswordReset verbatim. React state becomes\n * @state fields. `onRequest` (email) / `onReset` (password) become `request`\n * / `reset` CustomEvents (bubbles, composed). The sent-stage \"Open reset\n * form\" demo button and the stage machine are unchanged.\n */\nexport class UipAuthPasswordReset 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    signInHref: { attribute: 'sign-in-href' },\n    stage: { state: true },\n    email: { state: true },\n    password: { state: true },\n    confirm: { state: true },\n  }\n\n  signInHref = '/login'\n  private stage: Stage = 'request'\n  private email = ''\n  private password = ''\n  private confirm = ''\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-password-reset')\n  }\n\n  private submitRequest(e: Event) {\n    e.preventDefault()\n    if (!this.email) return\n    this.dispatchEvent(new CustomEvent('request', { detail: this.email, bubbles: true, composed: true }))\n    this.stage = 'sent'\n  }\n\n  private submitReset(e: Event) {\n    e.preventDefault()\n    const match = !this.confirm || this.password === this.confirm\n    if (!this.password || !match) return\n    this.dispatchEvent(new CustomEvent('reset', { detail: this.password, bubbles: true, composed: true }))\n    this.stage = 'done'\n  }\n\n  render() {\n    const passwordsMatch = !this.confirm || this.password === this.confirm\n    return html`\n      <div data-slot=\"auth-password-reset\" class=${cn('bg-background flex min-h-svh items-center justify-center p-6')}>\n        <uip-card class=\"w-full max-w-sm\">\n          ${this.stage === 'request'\n            ? html`\n                <uip-card-header class=\"text-center\">\n                  <uip-card-title class=\"text-2xl\">Forgot password?</uip-card-title>\n                  <uip-card-description>Enter your email and we'll send you a reset link.</uip-card-description>\n                </uip-card-header>\n                <uip-card-content>\n                  <form class=\"space-y-4\" @submit=${this.submitRequest}>\n                    <div class=\"grid gap-2\">\n                      <uip-label for=\"reset-email\">Email</uip-label>\n                      <uip-input\n                        id=\"reset-email\"\n                        .value=${this.email}\n                        type=\"email\"\n                        placeholder=\"you@company.com\"\n                        required\n                        @input=${(e: Event) => {\n                          this.email = (e.target as UipInput).value\n                        }}\n                      ></uip-input>\n                    </div>\n                    <uip-button type=\"submit\" class=\"w-full\">Send reset link</uip-button>\n                  </form>\n                </uip-card-content>\n                <uip-card-footer class=\"justify-center\">\n                  <a\n                    href=${this.signInHref}\n                    class=\"text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-sm\"\n                  >\n                    ${icon(ArrowLeft, 'arrow-left', 'size-3')} Back to sign in\n                  </a>\n                </uip-card-footer>\n              `\n            : ''}\n          ${this.stage === 'sent'\n            ? html`\n                <uip-card-content class=\"space-y-4 pt-6 text-center\">\n                  <div class=\"bg-primary/10 text-primary mx-auto flex size-12 items-center justify-center rounded-full\">\n                    ${icon(MailCheck, 'mail-check', 'size-6')}\n                  </div>\n                  <div class=\"space-y-1\">\n                    <h3 class=\"text-lg font-semibold\">Check your inbox</h3>\n                    <p class=\"text-muted-foreground text-sm\">\n                      We've sent a reset link to <span class=\"text-foreground font-medium\">${this.email}</span>.\n                    </p>\n                  </div>\n                  <uip-button\n                    variant=\"outline\"\n                    class=\"w-full\"\n                    @click=${() => {\n                      this.stage = 'reset'\n                    }}\n                    >Open reset form (demo)</uip-button\n                  >\n                  <button\n                    class=\"text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline\"\n                    @click=${() => {\n                      this.stage = 'request'\n                    }}\n                  >\n                    Wrong email?\n                  </button>\n                </uip-card-content>\n              `\n            : ''}\n          ${this.stage === 'reset'\n            ? html`\n                <uip-card-header class=\"text-center\">\n                  <uip-card-title class=\"text-2xl\">Set new password</uip-card-title>\n                  <uip-card-description>Pick a strong password you haven't used before.</uip-card-description>\n                </uip-card-header>\n                <uip-card-content>\n                  <form class=\"space-y-4\" @submit=${this.submitReset}>\n                    <div class=\"grid gap-2\">\n                      <uip-label for=\"reset-pw\">New password</uip-label>\n                      <uip-input\n                        id=\"reset-pw\"\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                    </div>\n                    <div class=\"grid gap-2\">\n                      <uip-label for=\"reset-confirm\">Confirm password</uip-label>\n                      <uip-input\n                        id=\"reset-confirm\"\n                        .value=${this.confirm}\n                        type=\"password\"\n                        autocomplete=\"new-password\"\n                        aria-invalid=${passwordsMatch ? 'false' : 'true'}\n                        required\n                        @input=${(e: Event) => {\n                          this.confirm = (e.target as UipInput).value\n                        }}\n                      ></uip-input>\n                      ${!passwordsMatch\n                        ? html`<p class=\"text-destructive text-xs\">Passwords don't match.</p>`\n                        : ''}\n                    </div>\n                    <uip-button type=\"submit\" class=\"w-full\">Reset password</uip-button>\n                  </form>\n                </uip-card-content>\n              `\n            : ''}\n          ${this.stage === 'done'\n            ? html`\n                <uip-card-content class=\"space-y-4 pt-6 text-center\">\n                  <div class=\"bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full\">\n                    ${icon(MailCheck, 'mail-check', 'size-6')}\n                  </div>\n                  <div class=\"space-y-1\">\n                    <h3 class=\"text-lg font-semibold\">All set</h3>\n                    <p class=\"text-muted-foreground text-sm\">\n                      Your password has been updated. You can now sign in with the new password.\n                    </p>\n                  </div>\n                  <a href=${this.signInHref}><uip-button class=\"w-full\">Continue to sign in</uip-button></a>\n                </uip-card-content>\n              `\n            : ''}\n        </uip-card>\n      </div>\n    `\n  }\n}\n\ncustomElements.get('uip-auth-password-reset') || customElements.define('uip-auth-password-reset', UipAuthPasswordReset)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-auth-password-reset': UipAuthPasswordReset\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/auth-password-reset/auth-password-reset.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/card.json",
    "https://uipkge.dev/r/lit/input.json",
    "https://uipkge.dev/r/lit/label.json",
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}