<!-- source-hash: b0e5b6389fabb9232cd48e08b608bcb8 -->
A reusable toggle button component that renders a chevron icon with animated rotation to indicate expanded/collapsed state.

## Key Components

### `ChevronButton`
The primary exported component. Wraps the base `Button` with a `ChevronDown` icon that rotates 180° when `isExpanded` is `true`.

### `ChevronButtonProps`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `isExpanded` | `boolean` | `false` | Controls chevron rotation (0° → 180°) |
| `size` | `'sm' \| 'default' \| 'lg' \| 'icon'` | `'icon'` | Sets button and icon dimensions |
| `backgroundColor` | `string` | `'transparent'` | Custom background color (clears on hover) |
| `borderColor` | `string` | `'transparent'` | Custom border color and style |
| `className` | `string` | — | Additional Tailwind classes |
| `onClick` | `(e: React.MouseEvent) => void` | — | Click handler |

## Usage Example

```typescript
import { ChevronButton } from './chevron-button';

// Basic expand/collapse toggle
const [isOpen, setIsOpen] = React.useState(false);

<ChevronButton
  isExpanded={isOpen}
  onClick={() => setIsOpen(!isOpen)}
/>

// Custom styled with border and size
<ChevronButton
  isExpanded={isOpen}
  size="default"
  backgroundColor="#1a1a2e"
  borderColor="#FFC008"
  onClick={() => setIsOpen(!isOpen)}
/>
```

## Behavior Notes

- **Hover state**: Background color resets to `transparent` on hover regardless of `backgroundColor` prop.
- **Rotation**: Chevron smoothly rotates via `transition-transform` when `isExpanded` toggles.
- **Border**: Border width/style are only applied when `borderColor` is not `'transparent'`.