Select

/** @jsxImportSource @bext-stack/framework */
// src/components/ui/select.tsx — opened/selected by the island (data-ui="select-*")
export function Select(o) {
  const items = o.options.map((op) => \`<div data-ui="select-item" data-value="\${op.value}" class="relative flex cursor-pointer items-center rounded-sm py-1.5 pl-8 pr-2 text-sm hover:bg-accent">\${op.label}</div>\`).join("");
  return \`<div data-ui="select" class="relative \${o.class || ""}">
    <button data-ui="select-trigger" class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm">
      <span data-ui="select-value" class="text-muted-foreground">\${o.placeholder}</span></button>
    <div data-ui="select-content" hidden class="absolute z-50 mt-1 w-full rounded-md border bg-popover p-1 shadow-md">\${items}</div></div>\`;
}