Tabs

/** @jsxImportSource @bext-stack/framework */
// src/components/ui/tabs.tsx — driven by the island (data-ui="tab-trigger"/"tab-content")
export function Tabs(o) {
  const tl = o.tabs.map((t, i) => \`<button data-ui="tab-trigger" data-tab="\${t.value}" data-state="\${i ? "inactive" : "active"}"
    class="inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium \${i ? "text-muted-foreground" : "bg-background text-foreground shadow"}">\${t.label}</button>\`).join("");
  const tp = o.tabs.map((t, i) => \`<div data-ui="tab-content" data-tab="\${t.value}" \${i ? "hidden" : ""} class="mt-2">\${t.content}</div>\`).join("");
  return \`<div data-ui="tabs" class="\${o.class || ""}"><div role="tablist" class="inline-flex h-9 items-center rounded-lg bg-muted p-1 text-muted-foreground">\${tl}</div>\${tp}</div>\`;
}