<!-- source-hash: fe89e2561aca7887d4e55361b739f66e -->
Reusable pill-shaped filter chip component for displaying and managing active filters, category tags, and selection states across the UI.

## Key Components

### `FilterChip`
The sole export — a styled, accessible chip element built with Tailwind CSS classes via `cn`.

### `FilterChipProps`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `id` | `string` | — | Unique identifier |
| `label` | `string` | — | Display text (truncated with tooltip) |
| `variant` | `'selected' \| 'unselected' \| 'category' \| 'subcategory' \| 'tag' \| 'info'` | `'unselected'` | Visual style preset |
| `size` | `'sm' \| 'md'` | `'md'` | Controls padding and text sizing |
| `removable` | `boolean` | `false` | Shows an `×` remove button when `true` |
| `onRemove` | `() => void` | — | Callback fired when remove button is clicked |
| `onClick` | `() => void` | — | Makes the chip interactive as a toggle button |
| `disabled` | `boolean` | `false` | Dims chip and disables all interactions |
| `className` | `string` | — | Additional Tailwind classes |

**Variants summary:**
- `selected` / `category` / `subcategory` / `tag` — yellow (`#FFC008`) border at varying opacities for hierarchy
- `unselected` — neutral dark border
- `info` — static display only, hover/scale effects disabled

## Usage Example

```typescript
// Basic selectable filter
<FilterChip
  id="status-active"
  label="Active"
  variant="selected"
  onClick={() => toggleFilter('active')}
/>

// Removable tag chip
<FilterChip
  id="tag-windows"
  label="Windows"
  variant="tag"
  removable
  onRemove={() => removeTag('windows')}
/>

// Small category chip (disabled)
<FilterChip
  id="cat-networking"
  label="Networking"
  variant="category"
  size="sm"
  disabled
/>
```