[Feature Request] Allow separating the tab from the tab panel

[criskell]

Is your feature request related to a problem? Please describe.

It is currently not possible to decouple a tab from its tab panel in the React tree, making tasks such as placing a button next to the tab list difficult.

Describe the solution you'd like

Maybe one solution is to release TabPanel publicly.

heroui/packages/components/tabs/src/tabs.tsx

Line 59 in 11b939d

<TabPanel

The react-aria-components component library allows us to accomplish this:

<Tabs>
  <TabList aria-label="History of Ancient Rome">
    <Tab id="FoR">Founding of Rome</Tab>
    <Tab id="MaR">Monarchy and Republic</Tab>
    <Tab id="Emp">Empire</Tab>
  </TabList>

  <TabPanel id="FoR">
    Arma virumque cano, Troiae qui primus ab oris.
  </TabPanel>
  <TabPanel id="MaR">
    Senatus Populusque Romanus.
  </TabPanel>
  <TabPanel id="Emp">
    Alea jacta est.
  </TabPanel>
</Tabs>

Describe alternatives you've considered

A solution to this is to use controlled tabs and perform manual checks, showing only the current tab.

Screenshots or Videos

No response

[linear[bot]]

ENG-1985 [Feature Request] Allow separating the tab from the tab panel