Combine compound child components with compound parent component

[dibenso]

Motivation

The current README shows that related components are not part of the parent export:

import { createRoot } from "react-dom/client";
import {
  Button,
  Dialog,
  DialogHeading,
  DialogDescription,
  useDialogState,
} from "ariakit";

function App() {
  const dialog = useDialogState();
  return (
    <>
      <Button onClick={dialog.toggle}>Open dialog</Button>
      <Dialog state={dialog}>
        <DialogHeading>Welcome</DialogHeading>
        <DialogDescription>Welcome to Reakit!</DialogDescription>
      </Dialog>
    </>
  );
}

createRoot(document.getElementById("root")).render(<App />);

It would be nice to import just the parent component of a compound instead of importing the parent component + the child components of that compound.

Usage example

import { createRoot } from "react-dom/client";
import {
  Button,
  Dialog,
  useDialogState,
} from "ariakit";

function App() {
  const dialog = useDialogState();
  return (
    <>
      <Button onClick={dialog.toggle}>Open dialog</Button>
      <Dialog state={dialog}>
        <Dialog.Heading>Welcome</Dialog.Heading>
        <Dialog.Description>Welcome to Reakit!</Dialog.Description>
      </Dialog>
    </>
  );
}

createRoot(document.getElementById("root")).render(<App />);

Requirements

When importing the parent component of a compound, all child components of that parent should be part of that imported object.

Workaround

Currently no workaround as we are forced to import the desired components of a compound instead of just the parent.

Possible implementations

No response

[diegohaz]

See https://github.com/ariakit/ariakit/issues/894#issuecomment-894523032