import { o as ne } from "./rolldown-runtime.js";
import { i as oe, n as ae, t as ie } from "./vendor/react.js";
import { t as ce } from "./chevron-down.js";
import { t as w } from "./dist.js";
import { t as o } from "./utils.js";
import { t as de } from "./Kbd.js";
import { a as A, c as V, i as I, n as L, o as H, r as R, s as q } from "./command.js";
import { n as D, r as G, t as Z } from "./popover2.js";
var d = /* @__PURE__ */ ne(oe(), 1), r = ie(), le = w("inline-flex items-center justify-between gap-2 whitespace-nowrap", {
  variants: {
    size: {
      sm: "h-8 px-3 text-sm",
      md: "h-9 px-3.5 py-2.5 text-sm",
      lg: "h-10 px-4 text-base"
    },
    variant: {
      default: "border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors duration-200 ease-smooth motion-reduce:transition-none",
      outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground transition-colors duration-200 ease-smooth motion-reduce:transition-none",
      ghost: "hover:bg-accent hover:text-accent-foreground transition-colors duration-200 ease-smooth motion-reduce:transition-none",
      primary: "bg-primary text-primary-foreground hover:bg-primary/90 border-0 transition-colors duration-200 ease-smooth motion-reduce:transition-none"
    }
  },
  defaultVariants: {
    size: "md",
    variant: "default"
  }
}), me = w("", {
  variants: { width: {
    auto: "w-auto min-w-[200px]",
    sm: "w-[200px]",
    md: "w-[248px]",
    lg: "w-[320px]",
    full: "w-[var(--transform-origin-x)]"
  } },
  defaultVariants: { width: "auto" }
}), Te = w("relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", {
  variants: { variant: {
    default: "text-foreground data-[selected=true]:bg-muted data-[selected=true]:text-foreground",
    destructive: "text-destructive data-[selected=true]:bg-destructive/10 data-[selected=true]:text-destructive"
  } },
  defaultVariants: { variant: "default" }
});
function $({ avatar: e, title: t, subtitle: s, children: a, className: i, ...l }) {
  return a ? /* @__PURE__ */ (0, r.jsx)("div", {
    "data-slot": "combobox-header",
    className: o("border-b border-border px-4 py-3", i),
    ...l,
    children: a
  }) : /* @__PURE__ */ (0, r.jsx)("div", {
    "data-slot": "combobox-header",
    className: o("border-b border-border px-4 py-3", i),
    ...l,
    children: /* @__PURE__ */ (0, r.jsxs)("div", {
      className: "flex items-center gap-3",
      children: [e, /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex min-w-0 flex-col",
        children: [t && /* @__PURE__ */ (0, r.jsx)("span", {
          className: "truncate text-sm font-semibold text-foreground",
          children: t
        }), s && /* @__PURE__ */ (0, r.jsx)("span", {
          className: "truncate text-sm text-muted-foreground",
          children: s
        })]
      })]
    })
  });
}
function E({ className: e, children: t, ...s }) {
  return /* @__PURE__ */ (0, r.jsx)(de, {
    variant: "outline",
    size: "xs",
    className: o("ms-auto", e),
    ...s,
    children: t
  });
}
function F({ options: e = [], groups: t = [], value: s, onValueChange: a, placeholder: i = "Select an option...", searchPlaceholder: l = "Search...", emptyText: p = "No results found.", multiple: c = !1, disabled: h = !1, searchable: b = !0, trigger: C, header: x, dir: j = "ltr", size: W, variant: k, width: B, triggerClassName: K, contentClassName: X, open: S, onOpenChange: T, side: Q = "bottom", align: y = "start", maxHeight: U = 256 }) {
  const [Y, ee] = d.useState(!1), N = S !== void 0, z = N ? S : Y, _ = d.useCallback((n) => {
    N || ee(n), T?.(n);
  }, [N, T]), u = d.useMemo(() => s ? Array.isArray(s) ? s : [s] : [], [s]), M = d.useMemo(() => t.length > 0 ? t.flatMap((n) => n.options) : e, [e, t]), O = d.useMemo(() => u.map((n) => M.find((m) => m.value === n)?.label).filter(Boolean).join(", "), [u, M]), te = d.useCallback((n) => {
    if (c) {
      const m = u.includes(n) ? u.filter((se) => se !== n) : [...u, n];
      a?.(m);
    } else
      a?.(n), _(!1);
  }, [
    c,
    u,
    a,
    _
  ]), f = j === "rtl", v = (n) => {
    const m = u.includes(n.value);
    return /* @__PURE__ */ (0, r.jsxs)(A, {
      value: n.value,
      onSelect: () => te(n.value),
      disabled: n.disabled,
      "data-checked": m,
      className: o("mx-1.5 my-px cursor-pointer", "flex items-center gap-2 overflow-hidden rounded-sm p-2", "text-base leading-6", "bg-card! data-selected:bg-card! hover:bg-accent!", "transition-colors duration-150 ease-smooth motion-reduce:transition-none", m && "bg-primary/10! data-selected:bg-primary/10! hover:bg-primary/20!", n.disabled && "text-muted-foreground", f && "text-right"),
      dir: j,
      children: [
        n.icon && /* @__PURE__ */ (0, r.jsx)("span", {
          className: o("size-4 shrink-0 text-muted-foreground", n.disabled && "opacity-50"),
          children: n.icon
        }),
        /* @__PURE__ */ (0, r.jsxs)("div", {
          className: "flex flex-1 items-center gap-2",
          children: [/* @__PURE__ */ (0, r.jsx)("span", {
            className: "font-medium text-foreground",
            children: n.label
          }), n.subtitle && /* @__PURE__ */ (0, r.jsx)("span", {
            className: "font-normal text-secondary-foreground",
            children: n.subtitle
          })]
        }),
        n.description && /* @__PURE__ */ (0, r.jsx)("span", {
          className: "text-xs text-muted-foreground",
          children: n.description
        }),
        n.shortcut && /* @__PURE__ */ (0, r.jsx)(E, { children: n.shortcut })
      ]
    }, n.value);
  }, re = () => t.length > 0 ? t.map((n, m) => /* @__PURE__ */ (0, r.jsxs)(d.Fragment, { children: [
    n.label && /* @__PURE__ */ (0, r.jsx)(R, {
      heading: n.label,
      children: n.options.map(v)
    }),
    !n.label && n.options.map(v),
    m < t.length - 1 && /* @__PURE__ */ (0, r.jsx)(V, { className: "my-1" })
  ] }, n.label)) : e.map(v);
  return /* @__PURE__ */ (0, r.jsxs)(Z, {
    open: z,
    onOpenChange: _,
    children: [/* @__PURE__ */ (0, r.jsx)(G, {
      disabled: h,
      className: o(!C && le({
        size: W,
        variant: k
      }), !C && "rounded-full font-semibold", K),
      render: C,
      children: !C && /* @__PURE__ */ (0, r.jsxs)(r.Fragment, { children: [/* @__PURE__ */ (0, r.jsx)("span", {
        className: o("truncate", !O && "text-muted-foreground"),
        children: O || i
      }), /* @__PURE__ */ (0, r.jsx)(ce, { className: o("size-5 shrink-0 transition-transform duration-200 ease-smooth motion-reduce:transition-none", k === "primary" ? "opacity-100" : "opacity-50", z && "rotate-180") })] })
    }), /* @__PURE__ */ (0, r.jsxs)(D, {
      side: Q,
      align: f ? y === "start" ? "end" : y === "end" ? "start" : y : y,
      className: o("p-0 shadow-lg", me({ width: B }), X),
      children: [x && /* @__PURE__ */ (0, r.jsx)($, {
        avatar: x.avatar,
        title: x.title,
        subtitle: x.subtitle,
        children: x.children
      }), /* @__PURE__ */ (0, r.jsxs)(q, {
        dir: j,
        className: o(f && "[&_[cmdk-input-wrapper]]:flex-row-reverse"),
        children: [b && /* @__PURE__ */ (0, r.jsx)(I, {
          placeholder: l,
          className: o(f && "text-right")
        }), /* @__PURE__ */ (0, r.jsxs)(H, {
          style: { maxHeight: U },
          className: "py-1",
          children: [/* @__PURE__ */ (0, r.jsx)(L, {
            className: o(f && "text-right"),
            children: p
          }), re()]
        })]
      })]
    })]
  });
}
function ue({ children: e, open: t, onOpenChange: s, defaultOpen: a = !1 }) {
  return /* @__PURE__ */ (0, r.jsx)(Z, {
    open: t,
    onOpenChange: s,
    defaultOpen: a,
    children: e
  });
}
function pe({ className: e, children: t, ...s }) {
  return /* @__PURE__ */ (0, r.jsx)(G, {
    className: e,
    ...s,
    children: t
  });
}
function be({ className: e, children: t, dir: s = "ltr", searchable: a = !0, searchPlaceholder: i = "Search...", emptyText: l = "No results found.", side: p = "bottom", align: c = "start", ...h }) {
  const b = s === "rtl";
  return /* @__PURE__ */ (0, r.jsx)(D, {
    side: p,
    align: b ? c === "start" ? "end" : c === "end" ? "start" : c : c,
    className: o("w-[248px] p-0 shadow-lg", e),
    ...h,
    children: /* @__PURE__ */ (0, r.jsxs)(q, {
      dir: s,
      className: o(b && "[&_[cmdk-input-wrapper]]:flex-row-reverse"),
      children: [a && /* @__PURE__ */ (0, r.jsx)(I, {
        placeholder: i,
        className: o(b && "text-right")
      }), /* @__PURE__ */ (0, r.jsxs)(H, { children: [/* @__PURE__ */ (0, r.jsx)(L, {
        className: o(b && "text-right"),
        children: l
      }), t] })]
    })
  });
}
function he({ className: e, children: t, icon: s, subtitle: a, shortcut: i, selected: l, destructive: p = !1, dir: c = "ltr", ...h }) {
  return /* @__PURE__ */ (0, r.jsxs)(A, {
    "data-checked": l,
    dir: c,
    className: o("mx-1.5 my-px cursor-pointer", "flex items-center gap-2 overflow-hidden rounded-sm p-2", "text-base leading-6", "bg-card! data-selected:bg-card! hover:bg-accent!", "transition-colors duration-150 ease-smooth motion-reduce:transition-none", l && "bg-primary/10! data-selected:bg-primary/10! hover:bg-primary/20!", p && "text-destructive focus:text-destructive", c === "rtl" && "text-right", e),
    ...h,
    children: [
      s && /* @__PURE__ */ (0, r.jsx)("span", {
        className: o("size-4 shrink-0", p ? "text-destructive" : "text-muted-foreground"),
        children: s
      }),
      /* @__PURE__ */ (0, r.jsx)("span", {
        className: "flex-1 font-medium text-foreground",
        children: t
      }),
      a && /* @__PURE__ */ (0, r.jsx)("span", {
        className: "font-normal text-muted-foreground",
        children: a
      }),
      i && /* @__PURE__ */ (0, r.jsx)(E, { children: i })
    ]
  });
}
var xe = ({ className: e, dir: t = "ltr", ...s }) => /* @__PURE__ */ (0, r.jsx)(R, {
  className: o(t === "rtl" && "[&_[cmdk-group-heading]]:text-right", e),
  ...s
});
function fe(e) {
  return /* @__PURE__ */ (0, r.jsx)(V, {
    className: "my-1",
    ...e
  });
}
F.displayName = "ComboboxMenu";
ue.displayName = "ComboboxRoot";
pe.displayName = "ComboboxTrigger";
be.displayName = "ComboboxContent";
he.displayName = "ComboboxItem";
xe.displayName = "ComboboxGroup";
fe.displayName = "ComboboxSeparator";
$.displayName = "ComboboxHeader";
E.displayName = "ComboboxShortcut";
var ge = ae();
function Ce(e) {
  return {
    onValueChange: (t) => {
      e.dispatchEvent(new CustomEvent("value-change", {
        detail: t,
        bubbles: !0,
        composed: !0
      }));
    },
    onOpenChange: (t) => {
      e.dispatchEvent(new CustomEvent("open-change", {
        detail: t,
        bubbles: !0,
        composed: !0
      }));
    }
  };
}
function ye(e) {
  const { _hostElement: t, ...s } = e, a = d.useMemo(() => t ? Ce(t) : {}, [t]);
  return d.createElement(F, {
    ...s,
    ...a
  });
}
var g = {
  variant: "string",
  size: "string",
  options: "json",
  groups: "json",
  value: "json",
  placeholder: "string",
  searchPlaceholder: "string",
  emptyText: "string",
  multiple: "boolean",
  disabled: "boolean",
  searchable: "boolean",
  trigger: "json",
  header: "string",
  dir: "string",
  triggerClassName: "string",
  contentClassName: "string",
  open: "boolean",
  side: "string",
  align: "string",
  maxHeight: "number"
};
function P(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 J = 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 s of Array.from(this.childNodes))
      s.nodeType === Node.TEXT_NODE && !s.textContent?.trim() || e.push(s);
    const t = document.createElement("div");
    for (t.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((s) => this._childrenContainer.appendChild(s)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(t), this._root = (0, ge.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, s) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(g).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const s = g[e] || "string";
    this._props[e] = this._parseValue(t, s), 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(), s = g[e] || "string";
    return P(this.getAttribute(t), s);
  }
  _render() {
    if (!this._root) return;
    const e = {};
    for (const [s, a] of Object.entries(g)) if (s in this._props) e[s] = this._props[s];
    else {
      const i = s.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[s] = P(this.getAttribute(i), a);
    }
    const t = d.createElement(ye, {
      ...e,
      _hostElement: this
    });
    this._root.render(t);
  }
};
for (const e of Object.keys(g)) Object.defineProperty(J.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-combobox-menu") && customElements.define("hf-combobox-menu", J);
export {
  J as ComboboxMenuWC,
  J as default
};

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