react-compositional

# React Compositional Components

Build functional, compositional React components following headless UI patterns with proper state separation and react-query integration.

## Core Workflow

When creating compositional components:

1. **Identify state types** - Separate UI state from server state
2. **Extract logic to hooks** - Create headless hooks for reusable logic  
3. **Design composition API** - Plan how components combine (compound, slots, render props)
4. **Implement pure components** - Ensure idempotency and no side effects in render
5. **Integrate react-query** - Add server state management where needed
6. **Support both patterns** - Allow controlled and uncontrolled usage

## State Management Strategy

### UI State vs Server State

**UI State** (component-local):
- Modal open/closed
- Selected tab
- Highlighted index
- Form draft values
- Use: `useState`, `useReducer`, context

**Server State** (react-query):
- User data from API
- Product listings
- Search results
- Posted form submissions
- Use: `useQuery`, `useMutation`, `useInfiniteQuery`

Keep these concerns strictly separated.

## Design Patterns

### Choose the Right Pattern

**Compound Components** - When sub-components work together:
```typescript
<Tabs>
  <Tabs.List>
    <Tabs.Tab value="a">Tab A</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="a">Content A</Tabs.Panel>
</Tabs>
```

**Render Props** - When consumers need full control:
```typescript
<DataList data={users}>
  {(user) => <UserCard user={user} />}
</DataList>
```

**Headless Hook** - When logic is reusable without UI:
```typescript
const { isOpen, toggle } = useDisclosure();
```

### Implementation Guidelines

**Create Context for Compound Components:**
```typescript
const Context = createContext<ContextValue | null>(null);

function useComponentContext() {
  const ctx = useContext(Context);
  if (!ctx) throw new Error('Must use within Parent');
  return ctx;
}
```

**Extract Headless Logic:**
```typescript
function useComponentLogic(