Tabs with compound components

Context & Patterns — Intermediate React challenge.

Build a Tabs component using the 'compound components' pattern — Tabs, Tabs.List, Tabs.Tab, Tabs.Panels, and Tabs.Panel work together, sharing active-tab state implicitly through Context instead of the consumer wiring up index/state props by hand.

Requirements

• Tabs owns the active-index state, starting from `defaultIndex` (default 0), and shares it with descendants via Context.
• Tabs.List and Tabs.Panels are plain layout wrappers.
• Tabs.Tab renders a button (data-testid="tab") with aria-selected reflecting whether its index is active, and sets the active index on click.
• Tabs.Panel only renders its children (inside data-testid="panel") when its index matches the active index.
• Tab, List, Panels, and Panel are exposed as static properties on Tabs (Tabs.Tab, Tabs.List, etc.).
• Using Tabs.Tab or Tabs.Panel outside of a <Tabs> tree throws a clear error.

Signature

function Tabs({ defaultIndex?: number; children: React.ReactNode }): JSX.Element
Tabs.List, Tabs.Tab({ index }), Tabs.Panels, Tabs.Panel({ index })

Example

<Tabs defaultIndex={0}>
  <Tabs.List>
    <Tabs.Tab index={0}>Profile</Tabs.Tab>
    <Tabs.Tab index={1}>Settings</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel index={0}>Profile content</Tabs.Panel>
    <Tabs.Panel index={1}>Settings content</Tabs.Panel>
  </Tabs.Panels>
</Tabs>
// clicking the "Settings" tab swaps the visible panel

Constraints

• Do not pass activeIndex/setActiveIndex down as explicit props — use Context internally.
• Only one Tabs.Panel is ever visible at a time.