Alert

/** @jsxImportSource @bext-stack/framework */
// src/components/ui/alert.tsx
export function Alert(o) {
  const dest = o.variant === "destructive";
  const c = "relative w-full rounded-lg border px-4 py-3 text-sm grid grid-cols-[20px_1fr] gap-x-3 " + (dest ? "border-destructive/50 text-destructive" : "bg-card text-card-foreground");
  return \`<div role="alert" class="\${c}"><span class="mt-0.5">\${o.icon}</span>
    <div><div class="mb-1 font-medium">\${o.title}</div><div class="text-sm \${dest ? "" : "text-muted-foreground"}">\${o.children}</div></div></div>\`;
}