How to do barrel export with react server components and client components in a package?

Question

If we have a package called @company/ui, how we should export components in a barrel index.js file in order to not mix client and server components?

like imagine I have:

import Button from '../components/Layout/segmentedControl'; // -> client specific
import Modal from '../components/Layout/entities'; // -> client specific

import avatar from '../components/avatar'; // -> shared one
import ErrorBoundary from '../components/error'; // -> shared one

import Layout from '../components/Layout'; // -> server specific
import Sidebar from '../components/Sidebar'; // -> server specific

How should we prevent poisoning react server components here?

If we use the way that server-only package follows, like adding this to package.json:

  "exports": {
    ".": {
      "react-server": "./server.js",
      "default": "./index.js"
    }
  }

then we will miss auto-completion in our editor.

are we have to create different packages for server and client? like: @company/ui-client, @company/ui-server