React Compound Components Pattern

I want to create compound components for a flexible API.

**Component to Build:**
[Describe: Tabs, Accordion, Menu, Select, etc.]

**Desired Usage:**
```jsx
<Component>
  <Component.Item>...</Component.Item>
  <Component.Item>...</Component.Item>
</Component>
```

**Requirements:**
- Shared state: [describe what state needs sharing]
- Controlled/uncontrolled: [both/one]
- TypeScript: [yes/no]
- Flexibility needed: [describe customization needs]

**Current Implementation (if any):**
```jsx
[paste current non-compound implementation]
```

Please provide:
1. Compound component structure
2. Context for shared state
3. Controlled and uncontrolled modes
4. TypeScript types for all parts
5. Flexible styling approach
6. Usage examples
7. Testing compound components