Dropdown Menu

/** @jsxImportSource @bext-stack/framework */
// src/components/ui/dropdown-menu.tsx — toggled by data-ui="toggle-pop" (closes on outside click)
export function DropdownMenu(o) {
  const items = o.items.map((it) => it === "-" ? '<div class="-mx-1 my-1 h-px bg-muted"></div>'
    : \`<div class="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent">\${it}</div>\`).join("");
  return \`<div class="relative inline-block"><button data-ui="toggle-pop" data-target="#\${o.id}" class="\${o.triggerClass}">\${o.trigger}</button>
    <div id="\${o.id}" data-overlay data-light hidden class="absolute z-50 mt-2 min-w-[12rem] rounded-md border bg-popover p-1 shadow-md">\${items}</div></div>\`;
}