import { o as N } from "./rolldown-runtime.js";
import { i as _, n as y, t as j } from "./vendor/react.js";
import { t as C } from "./createLucideIcon.js";
import { t as A } from "./chevron-right.js";
import { t as M } from "./Switch.js";
import { t as w } from "./dist.js";
import { t as a } from "./utils.js";
import { t as k } from "./use-controllable-state.js";
import { t as E } from "./create-safe-context.js";
import { a as T, i as O, s as S } from "./Popover.js";
import { t as z } from "./Kbd.js";
var P = [
  ["path", {
    d: "m16 17 5-5-5-5",
    key: "1bji2h"
  }],
  ["path", {
    d: "M21 12H9",
    key: "dn1m92"
  }],
  ["path", {
    d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4",
    key: "1uf3rs"
  }]
], V = C("log-out", P), d = /* @__PURE__ */ N(_(), 1), n = j(), [L, g] = E("NavAccountMenu");
function b({ type: e = "card", open: t, defaultOpen: r = !1, onOpenChange: o, children: s }) {
  const [i, c] = k({
    value: t,
    defaultValue: r,
    onChange: o
  }), u = d.useMemo(() => ({
    type: e,
    open: i,
    onOpenChange: c
  }), [
    e,
    i,
    c
  ]);
  return /* @__PURE__ */ (0, n.jsx)(L.Provider, {
    value: u,
    children: /* @__PURE__ */ (0, n.jsx)(T, {
      open: i,
      onOpenChange: c,
      children: /* @__PURE__ */ (0, n.jsx)("div", {
        "data-slot": "nav-account-menu",
        children: s
      })
    })
  });
}
var H = w("flex items-center gap-4 w-full text-left cursor-pointer transition-colors duration-200 ease-smooth outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none", {
  variants: { type: {
    card: "bg-card-alt border border-border rounded-xl shadow-xs p-3 hover:bg-card-hover",
    simple: "border-t border-border pt-5 hover:bg-card-hover rounded-lg px-2"
  } },
  defaultVariants: { type: "card" }
});
function $({ avatar: e, name: t, email: r, badge: o, showLogoutButton: s, onLogout: i, compact: c = !1, className: u }) {
  const { type: m, open: p } = g(), f = (h) => {
    h.stopPropagation(), i?.();
  };
  return /* @__PURE__ */ (0, n.jsxs)(S, {
    render: /* @__PURE__ */ (0, n.jsx)("button", {
      type: "button",
      "data-slot": "nav-account-menu-trigger",
      "aria-haspopup": "true",
      "aria-label": c ? `${t} account menu` : void 0,
      className: a(H({ type: m }), "group/trigger", c ? "w-auto justify-center" : "w-[280px]", u)
    }),
    children: [e && /* @__PURE__ */ (0, n.jsx)("div", {
      className: "shrink-0",
      children: e
    }), !c && /* @__PURE__ */ (0, n.jsxs)(n.Fragment, { children: [/* @__PURE__ */ (0, n.jsxs)("div", {
      className: "flex flex-col min-w-0 flex-1",
      children: [/* @__PURE__ */ (0, n.jsxs)("div", {
        className: "flex items-center gap-2",
        children: [/* @__PURE__ */ (0, n.jsx)("span", {
          className: "text-sm font-semibold text-foreground truncate",
          children: t
        }), o]
      }), r && /* @__PURE__ */ (0, n.jsx)("span", {
        className: "text-sm text-muted-foreground truncate",
        children: r
      })]
    }), m === "simple" && s ? /* @__PURE__ */ (0, n.jsx)("button", {
      type: "button",
      onClick: f,
      className: "shrink-0 p-1.5 rounded-md hover:bg-muted text-quaternary-foreground hover:text-secondary-foreground transition-colors duration-200 ease-smooth focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none",
      "aria-label": "Sign out",
      children: /* @__PURE__ */ (0, n.jsx)(V, { className: "size-5" })
    }) : /* @__PURE__ */ (0, n.jsx)(A, { className: a("size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth motion-reduce:transition-none", p ? "rotate-180" : "rtl:rotate-180") })] })]
  });
}
function q({ side: e = "right", align: t = "end", sideOffset: r = 8, children: o, className: s }) {
  return /* @__PURE__ */ (0, n.jsx)(O, {
    side: e,
    align: t,
    sideOffset: r,
    "aria-label": "Account menu",
    "data-slot": "nav-account-menu-content",
    className: a("w-[300px] max-w-[calc(100vw-2rem)] p-0 gap-0 bg-popover border border-border rounded-[14px] overflow-hidden", "shadow-[0px_12px_16px_-4px_color-mix(in_srgb,var(--foreground)_8%,transparent),0px_4px_6px_-2px_color-mix(in_srgb,var(--foreground)_3%,transparent),0px_2px_2px_-1px_color-mix(in_srgb,var(--foreground)_4%,transparent)]", "data-open:animate-in data-closed:animate-out", "data-closed:fade-out-0 data-open:fade-in-0", "data-closed:zoom-out-95 data-open:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", "duration-200 motion-reduce:animate-none", s),
    children: /* @__PURE__ */ (0, n.jsx)("div", {
      className: "flex flex-col py-5",
      role: "menu",
      "aria-label": "Account menu",
      children: o
    })
  });
}
function F({ title: e, subtitle: t, className: r }) {
  return /* @__PURE__ */ (0, n.jsxs)("div", {
    "data-slot": "nav-account-menu-header",
    className: a("px-6 pb-3 delight-fade-in", r),
    children: [/* @__PURE__ */ (0, n.jsx)("p", {
      className: "text-base font-semibold text-foreground",
      children: e
    }), t && (typeof t == "string" ? /* @__PURE__ */ (0, n.jsx)("p", {
      className: "mt-2 text-sm text-muted-foreground",
      children: t
    }) : /* @__PURE__ */ (0, n.jsx)("div", {
      className: "mt-2",
      children: t
    }))]
  });
}
function I({ label: e, bordered: t = !1, children: r, className: o }) {
  return /* @__PURE__ */ (0, n.jsxs)("div", {
    "data-slot": "nav-account-menu-section",
    role: "group",
    "aria-label": e,
    className: a("flex flex-col gap-1 py-1.5", t && "border-t border-border", o),
    children: [e && /* @__PURE__ */ (0, n.jsx)("div", {
      className: "px-3 pt-1.5 pb-1",
      children: /* @__PURE__ */ (0, n.jsx)("span", {
        className: "text-xs font-semibold text-muted-foreground",
        children: e
      })
    }), r]
  });
}
function R({ icon: e, shortcut: t, destructive: r = !1, disabled: o = !1, onSelect: s, render: i, children: c, className: u }) {
  const { onOpenChange: m } = g(), p = () => {
    o || (s?.(), m(!1));
  }, f = /* @__PURE__ */ (0, n.jsxs)("div", {
    className: "flex flex-1 gap-2 items-center overflow-hidden p-2 rounded-md transition-[background-color] duration-200 ease-smooth delight-selection-press motion-reduce:transition-none",
    children: [/* @__PURE__ */ (0, n.jsxs)("div", {
      className: "flex flex-1 gap-2 items-center min-w-0",
      children: [e && /* @__PURE__ */ (0, n.jsx)("span", {
        className: a("shrink-0 [&>svg]:size-4 transition-transform duration-200 ease-smooth group-hover/menuitem:translate-x-0.5 motion-reduce:transition-none", r ? "text-destructive" : "text-foreground"),
        children: e
      }), /* @__PURE__ */ (0, n.jsx)("span", {
        className: a("flex-1 text-sm truncate", r ? "text-destructive" : "text-secondary-foreground"),
        children: c
      })]
    }), t && /* @__PURE__ */ (0, n.jsx)(z, {
      variant: "outline",
      size: "xs",
      className: "shrink-0",
      children: t
    })]
  }), h = a("group/menuitem flex items-center px-1.5 py-0 w-full text-left cursor-pointer outline-none", "hover:[&>div]:bg-muted focus-visible:[&>div]:bg-muted", "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring", o && "pointer-events-none opacity-50", u);
  return i ? i({
    className: h,
    onClick: p,
    children: f
  }) : /* @__PURE__ */ (0, n.jsx)("button", {
    type: "button",
    role: "menuitem",
    "data-slot": "nav-account-menu-item",
    className: h,
    onClick: p,
    disabled: o,
    "aria-disabled": o || void 0,
    children: f
  });
}
function W({ avatar: e, name: t, email: r, selected: o = !1, onSelect: s, className: i }) {
  return /* @__PURE__ */ (0, n.jsx)("div", {
    "data-slot": "nav-account-menu-account",
    className: a("flex items-center px-1.5 py-0 w-full", i),
    children: /* @__PURE__ */ (0, n.jsxs)("button", {
      type: "button",
      role: "menuitemradio",
      "aria-checked": o,
      "aria-label": `Switch to ${t} (${r})`,
      className: a("relative flex flex-1 gap-2 items-center overflow-hidden px-2 py-1.5 rounded-md cursor-pointer outline-none", "hover:bg-muted focus-visible:bg-muted", "transition-colors duration-200 ease-smooth motion-reduce:transition-none", "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring", "text-left", o && "bg-card-hover"),
      onClick: s,
      children: [
        e && /* @__PURE__ */ (0, n.jsx)("div", {
          className: "shrink-0",
          children: e
        }),
        /* @__PURE__ */ (0, n.jsxs)("div", {
          className: "flex flex-col min-w-0 flex-1",
          children: [/* @__PURE__ */ (0, n.jsx)("span", {
            className: "text-sm font-semibold text-foreground truncate",
            children: t
          }), /* @__PURE__ */ (0, n.jsx)("span", {
            className: "text-sm text-muted-foreground truncate",
            children: r
          })]
        }),
        /* @__PURE__ */ (0, n.jsx)("div", {
          "aria-hidden": "true",
          className: a("size-4 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors duration-200 ease-smooth motion-reduce:transition-none", o ? "bg-primary border-bg-brand-solid" : "border-border bg-transparent"),
          children: o && /* @__PURE__ */ (0, n.jsx)("div", { className: "size-1.5 rounded-full bg-fg-white delight-check-bounce" })
        })
      ]
    })
  });
}
function Z({ className: e }) {
  return /* @__PURE__ */ (0, n.jsx)("hr", {
    "data-slot": "nav-account-menu-separator",
    className: a("h-px border-0 bg-border mx-5", e)
  });
}
function D({ children: e, className: t }) {
  return /* @__PURE__ */ (0, n.jsx)("div", {
    "data-slot": "nav-account-menu-footer",
    className: a("flex items-center justify-center px-5 pt-4", t),
    children: e
  });
}
function J({ variant: e = "theme-gradient", size: t = "sm", checked: r, onCheckedChange: o, label: s, className: i }) {
  return /* @__PURE__ */ (0, n.jsx)("div", {
    "data-slot": "nav-account-menu-theme-switch",
    className: a("flex items-center px-1.5 py-0", i),
    children: /* @__PURE__ */ (0, n.jsxs)("label", {
      className: "flex items-center gap-2.5 p-2 cursor-pointer",
      children: [/* @__PURE__ */ (0, n.jsx)(M, {
        variant: e,
        size: t,
        checked: r,
        onCheckedChange: o,
        "aria-label": s ? void 0 : "Theme selector"
      }), s && /* @__PURE__ */ (0, n.jsx)("span", {
        className: "text-sm text-secondary-foreground",
        children: s
      })]
    })
  });
}
b.displayName = "NavAccountMenu";
$.displayName = "NavAccountMenuTrigger";
q.displayName = "NavAccountMenuContent";
F.displayName = "NavAccountMenuHeader";
I.displayName = "NavAccountMenuSection";
R.displayName = "NavAccountMenuItem";
W.displayName = "NavAccountMenuAccount";
Z.displayName = "NavAccountMenuSeparator";
D.displayName = "NavAccountMenuFooter";
J.displayName = "NavAccountMenuThemeSwitch";
var K = y();
function X(e) {
  return { onOpenChange: (t) => {
    e.dispatchEvent(new CustomEvent("open-change", {
      detail: t,
      bubbles: !0,
      composed: !0
    }));
  } };
}
function B(e) {
  const { _hostElement: t, ...r } = e, o = d.useMemo(() => t ? X(t) : {}, [t]);
  return d.createElement(b, {
    ...r,
    ...o
  });
}
var l = {
  type: "string",
  open: "boolean",
  defaultOpen: "boolean"
};
function x(e, t) {
  if (e !== null)
    switch (t) {
      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 v = 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 r of Array.from(this.childNodes))
      r.nodeType === Node.TEXT_NODE && !r.textContent?.trim() || e.push(r);
    const t = document.createElement("div");
    for (t.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((r) => this._childrenContainer.appendChild(r)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(t), this._root = (0, K.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(l).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const r = l[e] || "string";
    this._props[e] = this._parseValue(t, r), this._render();
  }
  _parseValue(e, t) {
    if (t === "boolean" && typeof e == "boolean" || t === "number" && typeof e == "number" || t === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (t) {
      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 t = e.replace(/([A-Z])/g, "-$1").toLowerCase(), r = l[e] || "string";
    return x(this.getAttribute(t), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [r, o] of Object.entries(l)) if (r in this._props) e[r] = this._props[r];
    else {
      const s = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[r] = x(this.getAttribute(s), o);
    }
    const t = d.createElement(B, {
      ...e,
      _hostElement: this
    }, d.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(t);
  }
};
for (const e of Object.keys(l)) Object.defineProperty(v.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-nav-account-menu") && customElements.define("hf-nav-account-menu", v);
export {
  v as NavAccountMenuWC,
  v as default
};

//# sourceMappingURL=hf-nav-account-menu.js.map