import { o as V } from "./rolldown-runtime.js";
import { i as M, n as D, t as I } from "./vendor/react.js";
import { t as W } from "./createLucideIcon.js";
import { t as B } from "./arrow-left.js";
import { t as R } from "./circle-check-big.js";
import { t as Z } from "./lock.js";
import { t as $ } from "./mail.js";
import { t as i } from "./Button.js";
import { t as C } from "./dist.js";
import { t as j } from "./utils.js";
import { t as H } from "./FeaturedIcon.js";
import { t as u } from "./PageBackground.js";
import { t as w } from "./Input2.js";
var J = [
  ["path", {
    d: "m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4",
    key: "g0fldk"
  }],
  ["path", {
    d: "m21 2-9.6 9.6",
    key: "1j0ho8"
  }],
  ["circle", {
    cx: "7.5",
    cy: "15.5",
    r: "5.5",
    key: "yqb3hr"
  }]
], Y = W("key", J), l = /* @__PURE__ */ V(M(), 1), e = I(), K = C("flex min-h-screen w-full items-center justify-center bg-muted relative overflow-hidden", {
  variants: { variant: {
    default: "",
    sidebar: "lg:ps-64"
  } },
  defaultVariants: { variant: "default" }
}), X = C("flex size-5 shrink-0 items-center justify-center rounded-full", {
  variants: { state: {
    unchecked: "bg-surface-2",
    checked: "bg-success/10"
  } },
  defaultVariants: { state: "unchecked" }
}), f = ({ type: t }) => {
  const s = {
    key: Y,
    mail: $,
    lock: Z,
    success: R
  }[t];
  return /* @__PURE__ */ (0, e.jsx)(H, {
    icon: /* @__PURE__ */ (0, e.jsx)(s, {}),
    size: "lg"
  });
}, _ = ({ checked: t, label: s }) => /* @__PURE__ */ (0, e.jsxs)("li", {
  className: "flex w-full items-start gap-2 list-none",
  children: [/* @__PURE__ */ (0, e.jsx)("div", {
    className: j(X({ state: t ? "checked" : "unchecked" }), "transition-colors duration-200"),
    "aria-hidden": "true",
    children: t && /* @__PURE__ */ (0, e.jsx)("svg", {
      className: "size-3 text-success-foreground delight-check-bounce",
      fill: "none",
      viewBox: "0 0 12 12",
      xmlns: "http://www.w3.org/2000/svg",
      children: /* @__PURE__ */ (0, e.jsx)("path", {
        d: "M10 3L4.5 8.5L2 6",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      })
    })
  }), /* @__PURE__ */ (0, e.jsx)("p", {
    className: "flex-1 text-sm leading-5 text-muted-foreground",
    children: s
  })]
}), P = l.forwardRef(function({ className: s, variant: r, step: n = "email", email: g = "user@example.com", onSubmit: z, onBackToLogin: b, onResendEmail: L, passwordValidation: N = {
  minLength: !1,
  hasSpecialChar: !1
}, rtl: x = !1, title: d, subtitle: m, submitLabel: h, backToLoginLabel: F, resendText: T, resendLinkText: S, ...A }, q) {
  const [p, y] = l.useState({
    email: "",
    password: "",
    confirmPassword: ""
  }), v = (a) => {
    a.preventDefault(), z?.(p);
  }, O = () => {
    switch (n) {
      case "email":
        return /* @__PURE__ */ (0, e.jsxs)(e.Fragment, { children: [/* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex w-full flex-col items-center gap-6",
          children: [/* @__PURE__ */ (0, e.jsxs)("div", {
            className: "relative delight-stagger",
            "aria-hidden": "true",
            children: [/* @__PURE__ */ (0, e.jsx)(u, {
              pattern: "grid",
              offset: "icon-center",
              className: "-z-10"
            }), /* @__PURE__ */ (0, e.jsx)(f, { type: "key" })]
          }), /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex w-full flex-col gap-3 text-center delight-stagger",
            style: { "--delight-delay": "100ms" },
            children: [/* @__PURE__ */ (0, e.jsx)("h1", {
              className: "font-display text-display-xs md:text-display-sm font-semibold text-foreground",
              children: d ?? "Forgot password?"
            }), /* @__PURE__ */ (0, e.jsx)("p", {
              className: "text-md leading-6 text-muted-foreground",
              children: m ?? "No worries, we'll send you reset instructions."
            })]
          })]
        }), /* @__PURE__ */ (0, e.jsxs)("form", {
          onSubmit: v,
          className: "flex w-full flex-col gap-6 delight-stagger",
          style: { "--delight-delay": "200ms" },
          children: [/* @__PURE__ */ (0, e.jsx)(w, {
            label: "Email",
            required: !0,
            type: "email",
            placeholder: "Enter your email",
            value: p.email,
            onChange: (a) => y((o) => ({
              ...o,
              email: a.target.value
            }))
          }), /* @__PURE__ */ (0, e.jsx)(i, {
            type: "submit",
            size: "lg",
            className: "w-full",
            children: h ?? "Reset password"
          })]
        })] });
      case "check-email":
        return /* @__PURE__ */ (0, e.jsxs)(e.Fragment, { children: [
          /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex w-full flex-col items-center gap-6",
            children: [/* @__PURE__ */ (0, e.jsxs)("div", {
              className: "relative delight-stagger",
              "aria-hidden": "true",
              children: [/* @__PURE__ */ (0, e.jsx)(u, {
                pattern: "grid",
                offset: "icon-center",
                className: "-z-10"
              }), /* @__PURE__ */ (0, e.jsx)(f, { type: "mail" })]
            }), /* @__PURE__ */ (0, e.jsxs)("div", {
              className: "flex w-full flex-col gap-3 text-center delight-stagger",
              style: { "--delight-delay": "100ms" },
              children: [/* @__PURE__ */ (0, e.jsx)("h1", {
                className: "font-display text-display-xs md:text-display-sm font-semibold text-foreground",
                children: d ?? "Check your email"
              }), /* @__PURE__ */ (0, e.jsx)("p", {
                className: "text-md leading-6 text-muted-foreground",
                children: m ?? /* @__PURE__ */ (0, e.jsxs)(e.Fragment, { children: [
                  "We sent a password reset link to",
                  " ",
                  /* @__PURE__ */ (0, e.jsx)("span", {
                    className: "font-medium",
                    children: g
                  })
                ] })
              })]
            })]
          }),
          /* @__PURE__ */ (0, e.jsx)("div", {
            className: "w-full delight-stagger",
            style: { "--delight-delay": "200ms" },
            children: /* @__PURE__ */ (0, e.jsx)(i, {
              size: "lg",
              className: "w-full",
              children: h ?? "Open email app"
            })
          }),
          /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex w-full items-center justify-center gap-1 text-sm delight-stagger",
            style: { "--delight-delay": "300ms" },
            children: [/* @__PURE__ */ (0, e.jsx)("span", {
              className: "leading-5 text-muted-foreground",
              children: T ?? "Didn't receive the email?"
            }), /* @__PURE__ */ (0, e.jsx)(i, {
              appearance: "link",
              variant: "primary",
              size: "sm",
              onClick: L,
              children: S ?? "Click to resend"
            })]
          })
        ] });
      case "set-password":
        return /* @__PURE__ */ (0, e.jsxs)(e.Fragment, { children: [/* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex w-full flex-col items-center gap-6",
          children: [/* @__PURE__ */ (0, e.jsxs)("div", {
            className: "relative delight-stagger",
            "aria-hidden": "true",
            children: [/* @__PURE__ */ (0, e.jsx)(u, {
              pattern: "grid",
              offset: "icon-center",
              className: "-z-10"
            }), /* @__PURE__ */ (0, e.jsx)(f, { type: "lock" })]
          }), /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex w-full flex-col gap-3 text-center delight-stagger",
            style: { "--delight-delay": "100ms" },
            children: [/* @__PURE__ */ (0, e.jsx)("h1", {
              className: "font-display text-display-xs md:text-display-sm font-semibold text-foreground",
              children: d ?? "Set new password"
            }), /* @__PURE__ */ (0, e.jsx)("p", {
              className: "text-md leading-6 text-muted-foreground",
              children: m ?? "Your new password must be different to previously used passwords."
            })]
          })]
        }), /* @__PURE__ */ (0, e.jsxs)("form", {
          onSubmit: v,
          className: "flex w-full flex-col gap-6 delight-stagger",
          style: { "--delight-delay": "200ms" },
          children: [/* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex flex-col gap-5",
            children: [
              /* @__PURE__ */ (0, e.jsx)(w, {
                label: "Password",
                required: !0,
                type: "password",
                placeholder: "••••••••",
                value: p.password,
                onChange: (a) => y((o) => ({
                  ...o,
                  password: a.target.value
                }))
              }),
              /* @__PURE__ */ (0, e.jsx)(w, {
                label: "Confirm password",
                required: !0,
                type: "password",
                placeholder: "••••••••",
                value: p.confirmPassword,
                onChange: (a) => y((o) => ({
                  ...o,
                  confirmPassword: a.target.value
                }))
              }),
              /* @__PURE__ */ (0, e.jsxs)("ul", {
                className: "flex flex-col gap-3",
                "aria-label": "Password requirements",
                children: [/* @__PURE__ */ (0, e.jsx)(_, {
                  checked: N.minLength,
                  label: "Must be at least 8 characters"
                }), /* @__PURE__ */ (0, e.jsx)(_, {
                  checked: N.hasSpecialChar,
                  label: "Must contain one special character"
                })]
              })
            ]
          }), /* @__PURE__ */ (0, e.jsx)(i, {
            type: "submit",
            size: "lg",
            className: "w-full",
            children: h ?? "Reset password"
          })]
        })] });
      case "success":
        return /* @__PURE__ */ (0, e.jsxs)(e.Fragment, { children: [/* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex w-full flex-col items-center gap-6",
          children: [/* @__PURE__ */ (0, e.jsxs)("div", {
            className: "relative delight-bounce-in",
            "aria-hidden": "true",
            children: [/* @__PURE__ */ (0, e.jsx)(u, {
              pattern: "grid",
              offset: "icon-center",
              className: "-z-10"
            }), /* @__PURE__ */ (0, e.jsx)(f, { type: "success" })]
          }), /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex w-full flex-col gap-3 text-center delight-stagger",
            style: { "--delight-delay": "100ms" },
            children: [/* @__PURE__ */ (0, e.jsx)("h1", {
              className: "font-display text-display-xs md:text-display-sm font-semibold text-foreground",
              children: d ?? "Password reset"
            }), /* @__PURE__ */ (0, e.jsx)("p", {
              className: "text-md leading-6 text-muted-foreground",
              children: m ?? "Your password has been successfully reset. Click below to log in magically."
            })]
          })]
        }), /* @__PURE__ */ (0, e.jsx)("div", {
          className: "w-full delight-stagger",
          style: { "--delight-delay": "200ms" },
          children: /* @__PURE__ */ (0, e.jsx)(i, {
            size: "lg",
            className: "w-full",
            onClick: b,
            children: h ?? "Continue"
          })
        })] });
      default:
        return null;
    }
  };
  return /* @__PURE__ */ (0, e.jsx)("div", {
    ref: q,
    dir: x ? "rtl" : "ltr",
    "data-slot": "forgot-password-page",
    className: j(K({ variant: r }), s),
    ...A,
    children: /* @__PURE__ */ (0, e.jsxs)("main", {
      className: "relative z-10 mx-auto flex w-full max-w-[360px] flex-col items-center gap-8 px-4",
      "aria-live": "polite",
      children: [O(), /* @__PURE__ */ (0, e.jsx)("div", {
        className: "delight-stagger",
        style: { "--delight-delay": "400ms" },
        children: /* @__PURE__ */ (0, e.jsx)(i, {
          type: "button",
          appearance: "link",
          variant: "primary",
          size: "sm",
          onClick: b,
          startIcon: /* @__PURE__ */ (0, e.jsx)(B, {
            className: j("size-5", x && "rotate-180"),
            strokeWidth: 2,
            "aria-hidden": "true"
          }),
          className: x ? "flex-row-reverse" : "",
          children: F ?? "Back to log in"
        })
      })]
    })
  });
});
P.displayName = "ForgotPasswordPage";
var G = D();
function Q(t) {
  return {
    onSubmit: (s) => {
      t.dispatchEvent(new CustomEvent("submit", {
        detail: s,
        bubbles: !0,
        composed: !0
      }));
    },
    onBackToLogin: (s) => {
      t.dispatchEvent(new CustomEvent("back-to-login", {
        detail: s,
        bubbles: !0,
        composed: !0
      }));
    },
    onResendEmail: (s) => {
      t.dispatchEvent(new CustomEvent("resend-email", {
        detail: s,
        bubbles: !0,
        composed: !0
      }));
    }
  };
}
function U(t) {
  const { _hostElement: s, ...r } = t, n = l.useMemo(() => s ? Q(s) : {}, [s]);
  return l.createElement(P, {
    ...r,
    ...n
  });
}
var c = {
  variant: "string",
  size: "string",
  step: "string",
  email: "string",
  passwordValidation: "json",
  rtl: "boolean",
  title: "string",
  subtitle: "string",
  submitLabel: "string",
  backToLoginLabel: "string",
  resendText: "string",
  resendLinkText: "string"
};
function k(t, s) {
  if (t !== null)
    switch (s) {
      case "number":
        return Number(t);
      case "boolean":
        return t !== "false" && t !== "0";
      case "json":
        try {
          return JSON.parse(t);
        } catch {
          return t;
        }
      default:
        return t;
    }
}
var E = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const t = [];
    for (const r of Array.from(this.childNodes))
      r.nodeType === Node.TEXT_NODE && !r.textContent?.trim() || t.push(r);
    const s = document.createElement("div");
    for (s.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", t.forEach((r) => this._childrenContainer.appendChild(r)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(s), this._root = (0, G.createRoot)(s), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(t, s, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(c).map((t) => t.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(t, s) {
    const r = c[t] || "string";
    this._props[t] = this._parseValue(s, r), this._render();
  }
  _parseValue(t, s) {
    if (s === "boolean" && typeof t == "boolean" || s === "number" && typeof t == "number" || s === "string" && typeof t == "string") return t;
    if (typeof t == "string") switch (s) {
      case "boolean":
        return t !== "false" && t !== "0" && t !== "";
      case "number":
        return Number(t);
      case "json":
        try {
          return JSON.parse(t);
        } catch {
          return t;
        }
      default:
        return t;
    }
    return t;
  }
  _getProp(t) {
    if (t in this._props) return this._props[t];
    const s = t.replace(/([A-Z])/g, "-$1").toLowerCase(), r = c[t] || "string";
    return k(this.getAttribute(s), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const t = {};
    for (const [r, n] of Object.entries(c)) if (r in this._props) t[r] = this._props[r];
    else {
      const g = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      t[r] = k(this.getAttribute(g), n);
    }
    const s = l.createElement(U, {
      ...t,
      _hostElement: this
    }, l.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(s);
  }
};
for (const t of Object.keys(c)) Object.defineProperty(E.prototype, t, {
  get() {
    return this._getProp(t);
  },
  set(s) {
    this._setProp(t, s);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-forgot-password-page") && customElements.define("hf-forgot-password-page", E);
export {
  E as ForgotPasswordPageWC,
  E as default
};

//# sourceMappingURL=hf-forgot-password-page.js.map