import { o as Z } from "./rolldown-runtime.js";
import { i as D, n as J, t as K } from "./vendor/react.js";
import { t as U } from "./arrow-left.js";
import { a as G, c as T, i as x, n as X, o as F, r as Q, s as Y, t as ee } from "./Breadcrumb.js";
import { t as te } from "./search.js";
import { t as re } from "./Avatar.js";
import { t as H } from "./Button.js";
import { t as b } from "./dist.js";
import { t as o } from "./utils.js";
import { t as O } from "./separator2.js";
import { t as ne } from "./Kbd.js";
var l = /* @__PURE__ */ Z(D(), 1), t = K(), S = b("flex flex-col w-full", {
  variants: { variant: {
    simple: "gap-5",
    avatar: "gap-5",
    "banner-avatar": "gap-0",
    "banner-simple": "gap-0",
    "banner-avatar-centered": "gap-0",
    "banner-simple-centered": "gap-0"
  } },
  defaultVariants: { variant: "simple" }
}), $ = b("flex flex-wrap items-start w-full", {
  variants: { variant: {
    simple: "gap-4",
    avatar: "gap-4 md:gap-5",
    "banner-avatar": "gap-4 md:gap-6",
    "banner-simple": "gap-4 md:gap-6",
    "banner-avatar-centered": "flex-col items-center text-center gap-4 md:gap-6",
    "banner-simple-centered": "flex-col items-center text-center gap-4 md:gap-6"
  } },
  defaultVariants: { variant: "simple" }
}), se = b("relative w-full overflow-hidden bg-gradient-to-br from-secondary to-muted", {
  variants: { variant: {
    default: "h-40 md:h-60",
    centered: "h-40 md:h-60"
  } },
  defaultVariants: { variant: "default" }
}), q = l.forwardRef(({ variant: e = "simple", title: r, supportingText: n, breadcrumbs: i, actions: d, searchPlaceholder: f, searchShortcut: j = "⌘K", onSearch: R, showDivider: v = !0, avatarSrc: g, avatarFallback: p, avatarStatusIcon: y = "verified", onBackClick: _, backLabel: N = "Back", className: C }, w) => {
  const W = l.useId(), E = e?.startsWith("banner"), m = e?.includes("centered"), h = e?.includes("avatar"), z = () => !i || i.length === 0 ? null : /* @__PURE__ */ (0, t.jsx)(ee, {
    className: "hidden md:flex delight-fade-in motion-reduce:!animate-none",
    children: /* @__PURE__ */ (0, t.jsxs)(F, { children: [/* @__PURE__ */ (0, t.jsx)(x, { children: /* @__PURE__ */ (0, t.jsx)(Q, { href: "/" }) }), i.map((s, a) => {
      const c = a === i.length - 1, L = i.length > 3;
      return L && a === 1 ? /* @__PURE__ */ (0, t.jsxs)(l.Fragment, { children: [/* @__PURE__ */ (0, t.jsx)(T, {}), /* @__PURE__ */ (0, t.jsx)(x, { children: /* @__PURE__ */ (0, t.jsx)(X, {}) })] }, `ellipsis-${a}`) : L && a > 1 && !c ? null : /* @__PURE__ */ (0, t.jsxs)(l.Fragment, { children: [/* @__PURE__ */ (0, t.jsx)(T, {}), /* @__PURE__ */ (0, t.jsx)(x, { children: c || s.isCurrent ? /* @__PURE__ */ (0, t.jsx)(Y, { children: s.label }) : /* @__PURE__ */ (0, t.jsx)(G, {
        href: s.href,
        children: s.label
      }) })] }, s.label);
    })] })
  }), k = () => !_ || !i || i.length === 0 ? null : /* @__PURE__ */ (0, t.jsx)(H, {
    appearance: "link",
    variant: "primary",
    size: "sm",
    startIcon: /* @__PURE__ */ (0, t.jsx)(U, { className: "size-5" }),
    onClick: _,
    "aria-label": `Go back: ${N}`,
    className: "md:hidden text-secondary-foreground px-0 hover:no-underline",
    children: N
  }), B = () => !d || d.length === 0 ? null : /* @__PURE__ */ (0, t.jsx)("div", {
    className: "flex items-center gap-3 delight-stagger motion-reduce:!animate-none",
    style: { "--delight-delay": "120ms" },
    children: d.map((s, a) => /* @__PURE__ */ (0, t.jsx)(H, {
      variant: s.variant ?? (a === d.length - 1 ? "primary" : "secondary"),
      onClick: s.onClick,
      ...s.buttonProps,
      children: s.label
    }, s.label))
  }), A = () => f ? /* @__PURE__ */ (0, t.jsx)("search", {
    className: "relative flex-1 min-w-0 max-w-xs delight-stagger motion-reduce:!animate-none",
    style: { "--delight-delay": "180ms" },
    children: /* @__PURE__ */ (0, t.jsxs)("div", {
      className: "group/search relative",
      children: [
        /* @__PURE__ */ (0, t.jsx)(te, {
          className: "absolute start-3 top-1/2 -translate-y-1/2 size-5 text-quaternary-foreground pointer-events-none transition-colors duration-150 group-focus-within/search:text-primary motion-reduce:transition-none",
          "aria-hidden": "true"
        }),
        /* @__PURE__ */ (0, t.jsx)("input", {
          id: W,
          type: "text",
          placeholder: f,
          "aria-label": f,
          onChange: (s) => R?.(s.target.value),
          className: o("peer w-full rounded-lg border border-border bg-background py-2.5 pe-10 ps-10", "text-base text-foreground placeholder:text-muted-foreground", "shadow-xs transition-[border-color,box-shadow] duration-150 motion-reduce:transition-none", "focus-visible:border-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary")
        }),
        j && /* @__PURE__ */ (0, t.jsx)(ne, {
          variant: "outline",
          size: "xs",
          className: "absolute end-3 top-1/2 -translate-y-1/2 transition-opacity duration-150 peer-focus-visible:opacity-0 motion-reduce:transition-none",
          "aria-hidden": "true",
          children: j
        })
      ]
    })
  }) : null, P = () => {
    if (!h) return null;
    if (E) {
      const s = (a) => {
        if (!a) return "";
        const c = a.split(" ").filter(Boolean);
        return c.length >= 2 ? `${c[0][0]}${c[1][0]}`.toUpperCase() : a.slice(0, 2).toUpperCase();
      };
      return /* @__PURE__ */ (0, t.jsxs)("div", {
        className: o("relative shrink-0 rounded-full ring-4 ring-bg-primary shadow-lg", "size-24 md:size-40", "delight-fade-in motion-reduce:!animate-none"),
        children: [g ? /* @__PURE__ */ (0, t.jsx)("img", {
          src: g,
          alt: p || "",
          className: "size-full rounded-full object-cover"
        }) : /* @__PURE__ */ (0, t.jsx)("div", {
          className: "flex size-full items-center justify-center rounded-full bg-accent text-2xl font-semibold text-muted-foreground md:text-4xl",
          children: s(p)
        }), y === "verified" && /* @__PURE__ */ (0, t.jsx)("div", {
          className: "absolute bottom-0 end-0 flex size-6 items-center justify-center rounded-full border-2 border-bg-primary bg-primary/10 md:size-10",
          children: /* @__PURE__ */ (0, t.jsxs)("svg", {
            className: "size-3 text-primary md:size-5",
            fill: "currentColor",
            viewBox: "0 0 20 20",
            "aria-hidden": "true",
            children: [/* @__PURE__ */ (0, t.jsx)("title", { children: "Verified" }), /* @__PURE__ */ (0, t.jsx)("path", {
              fillRule: "evenodd",
              d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
              clipRule: "evenodd"
            })]
          })
        })]
      });
    }
    return /* @__PURE__ */ (0, t.jsx)(re, {
      src: g,
      fallback: p,
      alt: p,
      size: "xl",
      indicator: y
    });
  }, V = () => /* @__PURE__ */ (0, t.jsxs)("div", {
    className: o("flex flex-col min-w-0", m ? "items-center" : "flex-1"),
    children: [/* @__PURE__ */ (0, t.jsx)("h1", {
      className: "text-xl font-semibold text-foreground leading-relaxed delight-stagger motion-reduce:!animate-none",
      style: { "--delight-delay": "0ms" },
      children: r
    }), n && /* @__PURE__ */ (0, t.jsx)("p", {
      className: "text-base text-muted-foreground leading-6 max-w-prose delight-stagger motion-reduce:!animate-none",
      style: { "--delight-delay": "60ms" },
      children: n
    })]
  });
  return E ? /* @__PURE__ */ (0, t.jsxs)("header", {
    ref: w,
    "data-slot": "page-header",
    className: o(S({ variant: e }), C),
    children: [
      /* @__PURE__ */ (0, t.jsxs)("div", {
        className: "relative",
        children: [/* @__PURE__ */ (0, t.jsx)("div", {
          className: se({ variant: m ? "centered" : "default" }),
          "aria-hidden": "true"
        }), h && /* @__PURE__ */ (0, t.jsx)("div", {
          className: o("absolute inset-x-0 px-4 md:px-8", "-bottom-12 md:-bottom-20", m && "flex justify-center"),
          children: P()
        })]
      }),
      /* @__PURE__ */ (0, t.jsxs)("div", {
        className: o("px-4 md:px-8", h ? "pt-16 md:pt-24" : "pt-6", m && "flex flex-col items-center"),
        children: [
          /* @__PURE__ */ (0, t.jsx)("div", {
            className: "md:hidden mb-4",
            children: k()
          }),
          !m && /* @__PURE__ */ (0, t.jsx)("div", {
            className: "hidden md:block",
            children: z()
          }),
          /* @__PURE__ */ (0, t.jsxs)("div", {
            className: o($({ variant: e }), "mt-4 md:mt-6"),
            children: [
              V(),
              B(),
              A()
            ]
          })
        ]
      }),
      v && /* @__PURE__ */ (0, t.jsx)(O, { className: "mt-5 delight-connector-fill motion-reduce:!animate-none" })
    ]
  }) : /* @__PURE__ */ (0, t.jsxs)("header", {
    ref: w,
    "data-slot": "page-header",
    className: o(S({ variant: e }), C),
    children: [
      i && i.length > 0 && /* @__PURE__ */ (0, t.jsxs)("div", { children: [z(), k()] }),
      /* @__PURE__ */ (0, t.jsxs)("div", {
        className: o($({ variant: e })),
        children: [
          /* @__PURE__ */ (0, t.jsxs)("div", {
            className: o("flex gap-4 items-center flex-1 min-w-0", h && "flex-row"),
            children: [P(), V()]
          }),
          B(),
          A()
        ]
      }),
      v && /* @__PURE__ */ (0, t.jsx)(O, { className: "delight-connector-fill motion-reduce:!animate-none" })
    ]
  });
});
q.displayName = "PageHeader";
var ie = J();
function ae(e) {
  return {
    onSearch: (r) => {
      e.dispatchEvent(new CustomEvent("search", {
        detail: r,
        bubbles: !0,
        composed: !0
      }));
    },
    onBackClick: (r) => {
      e.dispatchEvent(new CustomEvent("back-click", {
        detail: r,
        bubbles: !0,
        composed: !0
      }));
    }
  };
}
function oe(e) {
  const { _hostElement: r, ...n } = e, i = l.useMemo(() => r ? ae(r) : {}, [r]);
  return l.createElement(q, {
    ...n,
    ...i
  });
}
var u = {
  variant: "string",
  size: "string",
  title: "string",
  supportingText: "string",
  breadcrumbs: "json",
  actions: "json",
  searchPlaceholder: "string",
  searchShortcut: "string",
  showDivider: "boolean",
  avatarSrc: "string",
  avatarFallback: "string",
  avatarStatusIcon: "string",
  backLabel: "string",
  className: "string"
};
function I(e, r) {
  if (e !== null)
    switch (r) {
      case "number":
        return Number(e);
      case "boolean":
        return e !== "false" && e !== "0";
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
}
var M = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const e = [];
    for (const n of Array.from(this.childNodes))
      n.nodeType === Node.TEXT_NODE && !n.textContent?.trim() || e.push(n);
    const r = document.createElement("div");
    for (r.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((n) => this._childrenContainer.appendChild(n)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(r), this._root = (0, ie.createRoot)(r), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, r, n) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(u).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, r) {
    const n = u[e] || "string";
    this._props[e] = this._parseValue(r, n), this._render();
  }
  _parseValue(e, r) {
    if (r === "boolean" && typeof e == "boolean" || r === "number" && typeof e == "number" || r === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (r) {
      case "boolean":
        return e !== "false" && e !== "0" && e !== "";
      case "number":
        return Number(e);
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
    return e;
  }
  _getProp(e) {
    if (e in this._props) return this._props[e];
    const r = e.replace(/([A-Z])/g, "-$1").toLowerCase(), n = u[e] || "string";
    return I(this.getAttribute(r), n);
  }
  _render() {
    if (!this._root) return;
    const e = {};
    for (const [n, i] of Object.entries(u)) if (n in this._props) e[n] = this._props[n];
    else {
      const d = n.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[n] = I(this.getAttribute(d), i);
    }
    const r = l.createElement(oe, {
      ...e,
      _hostElement: this
    });
    this._root.render(r);
  }
};
for (const e of Object.keys(u)) Object.defineProperty(M.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(r) {
    this._setProp(e, r);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-page-header") && customElements.define("hf-page-header", M);
export {
  M as PageHeaderWC,
  M as default
};

//# sourceMappingURL=hf-page-header.js.map