import { o as O } from "./rolldown-runtime.js";
import { i as H, n as I, t as L } from "./vendor/react.js";
import { t as B } from "./createLucideIcon.js";
import { t as D } from "./arrow-down.js";
import { t as $ } from "./arrow-up.js";
import { t as V } from "./search.js";
import { t as G } from "./settings.js";
import { t as W } from "./Avatar.js";
import { t as Z } from "./Button.js";
import { t as i } from "./utils.js";
import { t as E } from "./Kbd.js";
import { a as J, c as K, i as R, n as U, o as X, r as Q, s as Y, t as ee } from "./command.js";
var te = [["path", {
  d: "M20 4v7a4 4 0 0 1-4 4H4",
  key: "6o5b7l"
}], ["path", {
  d: "m9 10-5 5 5 5",
  key: "1kshq7"
}]], re = B("corner-down-left", te), d = /* @__PURE__ */ O(H(), 1), r = L();
function S() {
  const [e, t] = d.useState("⌘/");
  return d.useEffect(() => {
    /Mac|iPhone|iPad/i.test(navigator.userAgent) || t("Ctrl /");
  }, []), e;
}
function v({ children: e, className: t }) {
  return /* @__PURE__ */ (0, r.jsx)(E, {
    variant: "solid",
    size: "sm",
    className: i("shadow-xs", t),
    children: e
  });
}
v.displayName = "CommandMenu.ShortcutBadge";
function j({ children: e, className: t }) {
  return /* @__PURE__ */ (0, r.jsx)(E, {
    variant: "footer",
    size: "sm",
    className: i("p-1.5", t),
    children: e
  });
}
j.displayName = "CommandMenu.FooterNavIcon";
function M({ children: e, className: t }) {
  return /* @__PURE__ */ (0, r.jsx)("span", {
    className: i("text-sm font-semibold text-quaternary-foreground", t),
    children: e
  });
}
M.displayName = "CommandMenu.FooterNavText";
var ne = [
  {
    keys: /* @__PURE__ */ (0, r.jsxs)("div", {
      className: "flex items-center gap-1",
      children: [/* @__PURE__ */ (0, r.jsx)(j, { children: /* @__PURE__ */ (0, r.jsx)($, { className: "size-2.5 text-quaternary-foreground" }) }), /* @__PURE__ */ (0, r.jsx)(j, { children: /* @__PURE__ */ (0, r.jsx)(D, { className: "size-2.5 text-quaternary-foreground" }) })]
    }),
    label: "to navigate"
  },
  {
    keys: /* @__PURE__ */ (0, r.jsx)(j, { children: /* @__PURE__ */ (0, r.jsx)(re, { className: "size-2.5 text-quaternary-foreground" }) }),
    label: "to select"
  },
  {
    keys: /* @__PURE__ */ (0, r.jsx)(j, {
      className: "px-1.5 py-1",
      children: /* @__PURE__ */ (0, r.jsx)("span", {
        className: "text-xs font-semibold text-quaternary-foreground",
        children: "esc"
      })
    }),
    label: "to close"
  }
];
function z({ hints: e = ne, showSettingsButton: t = !1, onSettingsClick: n, className: a }) {
  return /* @__PURE__ */ (0, r.jsxs)("div", {
    "data-slot": "command-menu-footer",
    className: i("flex items-center gap-3 border-t border-border bg-card/80 py-2 pe-2 ps-[18px] supports-backdrop-filter:backdrop-blur", a),
    children: [/* @__PURE__ */ (0, r.jsx)("div", {
      className: "hidden flex-1 items-start gap-4 [@media(hover:hover)]:flex",
      children: e.map((o) => /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex items-center gap-2",
        children: [o.keys, /* @__PURE__ */ (0, r.jsx)(M, { children: o.label })]
      }, o.label))
    }), t && /* @__PURE__ */ (0, r.jsx)(Z, {
      appearance: "ghost",
      variant: "secondary",
      size: "icon",
      className: "group ms-auto rounded-full bg-muted",
      onClick: n,
      "aria-label": "Settings",
      children: /* @__PURE__ */ (0, r.jsx)(G, { className: "size-5 text-muted-foreground transition-transform duration-300 ease-out group-hover:rotate-90 motion-reduce:transition-none" })
    })]
  });
}
z.displayName = "CommandMenu.Footer";
function T({ option: e, onSelect: t, className: n, ...a }) {
  return /* @__PURE__ */ (0, r.jsxs)(J, {
    value: e.id,
    disabled: e.disabled,
    onSelect: () => t?.(e.id, e),
    className: i("mx-2 my-0.5 flex cursor-pointer items-center gap-2 rounded-lg py-2.5 pe-2 ps-2.5 transition-[color,background-color,border-color,transform] duration-150 motion-reduce:transition-none active:scale-[0.98]", n),
    ...a,
    children: [
      e.avatar && /* @__PURE__ */ (0, r.jsx)(W, {
        src: e.avatar.src,
        fallback: e.avatar.fallback || e.label.charAt(0),
        size: "sm",
        className: "size-6 shrink-0 ring-2 ring-transparent transition-shadow duration-150 group-data-selected/command-item:ring-brand-500/20"
      }),
      e.icon && !e.avatar && /* @__PURE__ */ (0, r.jsx)("span", {
        className: "size-6 shrink-0 text-muted-foreground transition-colors duration-150 group-data-selected/command-item:text-brand-500",
        children: e.icon
      }),
      /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex flex-1 items-baseline gap-2 text-sm",
        children: [/* @__PURE__ */ (0, r.jsx)("span", {
          className: "font-medium text-foreground transition-[font-weight] duration-150 group-data-selected/command-item:font-semibold",
          children: e.label
        }), e.subtitle && /* @__PURE__ */ (0, r.jsx)("span", {
          className: "font-normal text-muted-foreground transition-colors duration-150 group-data-selected/command-item:text-foreground/60",
          children: e.subtitle
        })]
      }),
      e.shortcut && /* @__PURE__ */ (0, r.jsx)(v, {
        className: "transition-colors duration-150 group-data-selected/command-item:bg-brand-500/10 group-data-selected/command-item:text-brand-600",
        children: e.shortcut
      })
    ]
  });
}
T.displayName = "CommandMenu.Item";
function A({ children: e, className: t, ...n }) {
  return /* @__PURE__ */ (0, r.jsx)("h3", {
    "data-slot": "command-menu-group-header",
    className: i("px-[18px] pt-3 pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", t),
    ...n,
    children: e
  });
}
A.displayName = "CommandMenu.GroupHeader";
function w({ children: e, groups: t, options: n, onSelect: a, placeholder: o, emptyText: c, emptyState: l, showShortcut: u, shortcutText: p, showFooter: h, footerHints: f, showSettingsButton: x, onSettingsClick: b, maxHeight: g, filter: N }) {
  const m = (s) => /* @__PURE__ */ (0, r.jsx)(T, {
    option: s,
    onSelect: a
  }, s.id), C = () => e || (t.length > 0 ? t.map((s, _) => /* @__PURE__ */ (0, r.jsxs)(d.Fragment, { children: [_ > 0 && /* @__PURE__ */ (0, r.jsx)(K, {}), /* @__PURE__ */ (0, r.jsxs)(Q, {
    "aria-labelledby": `cmd-group-${s.id}`,
    children: [/* @__PURE__ */ (0, r.jsx)(A, {
      id: `cmd-group-${s.id}`,
      children: s.label
    }), /* @__PURE__ */ (0, r.jsx)("div", {
      className: "flex flex-col",
      children: s.options.map(m)
    })]
  })] }, s.id)) : n.map(m));
  return /* @__PURE__ */ (0, r.jsxs)(Y, {
    filter: N,
    className: "rounded-xl",
    "data-slot": "command-menu",
    children: [
      /* @__PURE__ */ (0, r.jsxs)("search", {
        "aria-label": "Command menu search",
        className: "flex items-center gap-2 border-b border-border bg-background p-4",
        children: [
          /* @__PURE__ */ (0, r.jsx)(V, {
            className: "size-5 shrink-0 text-secondary-foreground animate-in fade-in-0 zoom-in-75 duration-300 motion-reduce:animate-none",
            "aria-hidden": "true"
          }),
          /* @__PURE__ */ (0, r.jsx)(R, { render: (s) => /* @__PURE__ */ (0, r.jsx)("input", {
            ...s,
            placeholder: o,
            "aria-label": o,
            className: "flex-1 bg-transparent text-base leading-6 text-foreground placeholder:text-muted-foreground outline-none",
            "data-slot": "command-menu-input"
          }) }),
          u && /* @__PURE__ */ (0, r.jsx)(v, { children: p })
        ]
      }),
      /* @__PURE__ */ (0, r.jsxs)(X, {
        style: { maxHeight: g },
        className: "overflow-y-auto py-2",
        children: [/* @__PURE__ */ (0, r.jsx)(U, {
          className: "py-6 text-center text-sm text-muted-foreground animate-in fade-in-0 duration-200 motion-reduce:animate-none",
          children: l || c
        }), C()]
      }),
      h && /* @__PURE__ */ (0, r.jsx)(z, {
        hints: f,
        showSettingsButton: x,
        onSettingsClick: b
      })
    ]
  });
}
w.displayName = "CommandMenu.Body";
function P({ open: e, onOpenChange: t, placeholder: n = "Search", emptyText: a = "No results found.", emptyState: o, options: c = [], groups: l = [], onSelect: u, showShortcut: p = !0, shortcutText: h, showFooter: f = !0, footerHints: x, showSettingsButton: b = !1, onSettingsClick: g, className: N, maxHeight: m = 288, filter: C, children: s }) {
  const _ = S(), F = h ?? _;
  return /* @__PURE__ */ (0, r.jsx)(ee, {
    open: e,
    onOpenChange: t,
    className: i("max-w-[640px]", N),
    children: /* @__PURE__ */ (0, r.jsx)(w, {
      placeholder: n,
      emptyText: a,
      emptyState: o,
      options: c,
      groups: l,
      onSelect: u,
      showShortcut: p,
      shortcutText: F,
      showFooter: f,
      footerHints: x,
      showSettingsButton: b,
      onSettingsClick: g,
      maxHeight: m,
      filter: C,
      children: s
    })
  });
}
P.displayName = "CommandMenu";
function se({ placeholder: e = "Search", emptyText: t = "No results found.", emptyState: n, options: a = [], groups: o = [], onSelect: c, showShortcut: l = !0, shortcutText: u, showFooter: p = !0, footerHints: h, showSettingsButton: f = !1, onSettingsClick: x, className: b, maxHeight: g = 288, filter: N, children: m }) {
  const C = S(), s = u ?? C;
  return /* @__PURE__ */ (0, r.jsx)("div", {
    "data-slot": "command-menu-panel",
    className: i("w-full max-w-[640px] overflow-hidden rounded-xl bg-background shadow-medium", b),
    children: /* @__PURE__ */ (0, r.jsx)(w, {
      placeholder: e,
      emptyText: t,
      emptyState: n,
      options: a,
      groups: o,
      onSelect: c,
      showShortcut: l,
      shortcutText: s,
      showFooter: p,
      footerHints: h,
      showSettingsButton: f,
      onSettingsClick: x,
      maxHeight: g,
      filter: N,
      children: m
    })
  });
}
se.displayName = "CommandMenu.Panel";
var ae = I();
function oe(e) {
  return {
    onOpenChange: (t) => {
      e.dispatchEvent(new CustomEvent("open-change", {
        detail: t,
        bubbles: !0,
        composed: !0
      }));
    },
    onSelect: (t) => {
      e.dispatchEvent(new CustomEvent("select", {
        detail: t,
        bubbles: !0,
        composed: !0
      }));
    },
    onSettingsClick: (t) => {
      e.dispatchEvent(new CustomEvent("settings-click", {
        detail: t,
        bubbles: !0,
        composed: !0
      }));
    }
  };
}
function ie(e) {
  const { _hostElement: t, ...n } = e, a = d.useMemo(() => t ? oe(t) : {}, [t]);
  return d.createElement(P, {
    ...n,
    ...a
  });
}
var y = {
  open: "boolean",
  placeholder: "string",
  emptyText: "string",
  emptyState: "json",
  options: "json",
  groups: "json",
  showShortcut: "boolean",
  shortcutText: "string",
  showFooter: "boolean",
  footerHints: "json",
  showSettingsButton: "boolean",
  className: "string",
  maxHeight: "number",
  filter: "json"
};
function k(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 q = 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 t = document.createElement("div");
    for (t.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(t), this._root = (0, ae.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, n) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(y).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const n = y[e] || "string";
    this._props[e] = this._parseValue(t, n), 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(), n = y[e] || "string";
    return k(this.getAttribute(t), n);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [n, a] of Object.entries(y)) if (n in this._props) e[n] = this._props[n];
    else {
      const o = n.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[n] = k(this.getAttribute(o), a);
    }
    const t = d.createElement(ie, {
      ...e,
      _hostElement: this
    }, d.createElement("span", {
      ref: (n) => {
        n && this._childrenContainer && n.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(t);
  }
};
for (const e of Object.keys(y)) Object.defineProperty(q.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-command-menu") && customElements.define("hf-command-menu", q);
export {
  q as CommandMenuWC,
  q as default
};

//# sourceMappingURL=hf-command-menu.js.map