feat: add Tabs compound component

[IzumiSy]

Add Tabs compound component for tab-based navigation, backed by Base UI's Tabs primitive.

Screen shots

Usage

import { Tabs } from "@tailor-platform/app-shell";

<Tabs.Root defaultValue="overview">
  <Tabs.List>
    <Tabs.Tab value="overview">Overview</Tabs.Tab>
    <Tabs.Tab value="projects">Projects</Tabs.Tab>
    <Tabs.Tab value="settings">Settings</Tabs.Tab>
    <Tabs.Tab value="archived" disabled>Archived</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="overview">Overview content</Tabs.Panel>
  <Tabs.Panel value="projects">Projects content</Tabs.Panel>
  <Tabs.Panel value="settings">Settings content</Tabs.Panel>
  <Tabs.Panel value="archived">Archived content</Tabs.Panel>
</Tabs.Root>

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@tailor-platform/app-shell@284

npm i https://pkg.pr.new/@tailor-platform/app-shell-sdk-plugin@284

npm i https://pkg.pr.new/@tailor-platform/app-shell-vite-plugin@284

commit: dc6b436

[erickteowarang]

LGTM!

[erickteowarang]

Super minor, but you can probably just pull the example icons from lucide instead for a more "realistic" example

[IzumiSy]

Ah, right. Let me quickly updated that before merging this PR. It won't need the extra review again.

[IzumiSy]

Found the other examples are using SVG icons too, so will work in a different PR to eradicate those things with lucide-react all at once.

[erickteowarang]

Same nested ternary issue 😅, would be great to split this off into it's own function but not that big of a deal.

I can see that the BaseTabs.List component has the same nested class names, you can probably just make a function that accepts an argument of variant and componentType and then return the right class names but it's not that important.

[IzumiSy]

Created a seperated ticket to eradicate the nested ternaries 👍