feat(@clayui/tabs): add new API to configure browsing behavior between tabs

[matuzalemsteles]

Fixes #5151

In order to be able to control the automatic activation state of the tab when navigating, we have to have control of the active state, in the current implementation, the developer controls the state. In this PR I am applying the pattern from RFC 0002 Controlled and uncontrolled components to allow the component to have state visibility, this makes it possible during tab navigation when selecting a tab changes the current tab.

const [active, setActive] = useState(0);

<>
  <ClayTabs
    active={active}
    onActiveChange={setActive}
  >
    <ClayTabs.Item
      innerProps={{
        'aria-controls': 'tabpanel1',
      }}
    >
      Tab 1
    </ClayTabs.Item>
    <ClayTabs.Item
      innerProps={{
        'aria-controls': 'tabpanel2',
      }}
    >
      Tab 2
    </ClayTabs.Item>
  </ClayTabs>
  <ClayTabs.Content activeIndex={active} fade={args.fade}>
    <ClayTabs.TabPane id="tabpanel1">
      Tab 1
    </ClayTabs.TabPane>
    <ClayTabs.TabPane id="tabpanel2">
      Tab 2
    </ClayTabs.TabPane>
  </ClayTabs.Content>
</>

This makes it simpler to handle the active state of tabs. This component can be made simpler and provide some OOTB features, such as not needing to configure aria-controls to associate the tab with the panel, but this will only be possible when we start to apply the collection pattern in this component #5032.

Also before that we need to review this component to improve the composition so that the ClayTabs.Content component doesn't become like sibling of ClayTabs to improve the data flow, in this PR if the active is uncontrolled not work because it doesn't have how to pass the state of active to ClayTabs.Content for it to work correctly needs to be controlled, so this is one of the reasons to refresh the composition of Tabs.

[marcoscv-work]

It looks great!