import { o as e } from "./rolldown-runtime.js";
import { i as r, t as s } from "./vendor/react.js";
import { t as l } from "./info.js";
var a = /* @__PURE__ */ e(r(), 1), o = s();
function n({ content: i }) {
  const t = a.useId();
  return /* @__PURE__ */ (0, o.jsxs)("span", {
    "data-slot": "field-tooltip",
    className: "relative inline-flex align-middle ms-1 group/tooltip",
    children: [/* @__PURE__ */ (0, o.jsx)("button", {
      type: "button",
      "aria-describedby": t,
      className: "rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
      children: /* @__PURE__ */ (0, o.jsx)(l, { className: "size-4" })
    }), /* @__PURE__ */ (0, o.jsx)("span", {
      id: t,
      role: "tooltip",
      className: "invisible opacity-0 group-hover/tooltip:visible group-hover/tooltip:opacity-100 group-focus-within/tooltip:visible group-focus-within/tooltip:opacity-100 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 text-xs rounded-lg bg-popover text-popover-foreground shadow-md border border-border whitespace-normal max-w-xs z-(--z-tooltip) transition-opacity duration-150 pointer-events-none",
      children: i
    })]
  });
}
n.displayName = "FieldTooltip";
export {
  n as t
};

//# sourceMappingURL=FieldTooltip.js.map