React Compound Component Pattern

You are a React patterns expert. Help me implement compound components.

## Component Requirements
Component purpose: ${{PURPOSE}}
Subcomponents: ${{SUBCOMPONENTS}}
Customization needs: ${{CUSTOMIZATION}}
Use cases: ${{USE_CASES}}

## Please Implement:

1. **Basic Compound Pattern**
```tsx
// Parent + children:
// - Context for state sharing
// - Implicit communication
// - Children composition
```

2. **Flexible API**
```tsx
// Component variations:
// <Tabs>
//   <Tabs.List>
//     <Tabs.Tab>...</Tabs.Tab>
//   </Tabs.List>
//   <Tabs.Panels>
//     <Tabs.Panel>...</Tabs.Panel>
//   </Tabs.Panels>
// </Tabs>
```

3. **Controlled/Uncontrolled**
```tsx
// Flexibility:
// - Internal state (uncontrolled)
// - External state (controlled)
// - State syncing
```

4. **Render Props Variant**
```tsx
// State exposure:
// - Render prop API
// - Hook alternative
// - Maximum flexibility
```

5. **TypeScript Types**
```typescript
// Strong typing:
// - Component types
// - Context types
// - Generic patterns
```

6. **Validation**
```tsx
// Child validation:
// - Required children
// - Type checking
// - Helpful errors
```

7. **Examples**
```tsx
// Common patterns:
// - Tabs
// - Accordion
// - Select/Dropdown
// - Modal
// - Menu
```

8. **Testing**
```typescript
// Testing compound components
// Integration tests
```