Dialog

/** @jsxImportSource @bext-stack/framework */
// src/components/ui/dialog.tsx — opened by data-ui="open" data-target, closed by data-ui="close"
export function Dialog(o) {
  return \`<button data-ui="open" data-target="#\${o.id}" class="\${o.triggerClass}">\${o.trigger}</button>
    <div id="\${o.id}" data-overlay hidden class="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div data-ui="overlay-bg" class="absolute inset-0 bg-black/80"></div>
      <div class="relative z-10 grid w-full max-w-lg gap-4 rounded-lg border bg-background p-6 shadow-lg">
        <button data-ui="close" class="absolute right-4 top-4 opacity-70 hover:opacity-100">✕</button>\${o.children}</div></div>\`;
}