<!-- source-hash: 266230e3eb0a6c70e91f5bde060a9529 -->
A accessible, interactive filter list UI component built with Radix UI checkboxes, supporting both single and multi-select modes with keyboard navigation.

## Key Components

### `FilterListItem`
A single selectable row with a title, optional metadata badges, and a Radix UI checkbox. Supports keyboard interaction (`Enter`/`Space`), disabled state, and selected highlighting using ODS design tokens.

**Props (`FilterListItemProps`):**

| Prop | Type | Description |
|------|------|-------------|
| `title` | `string` | Display label for the item |
| `meta` | `Array<string \| number>` | Optional bullet-separated metadata |
| `selected` | `boolean` | Whether the item is checked |
| `onToggle` | `(selected: boolean) => void` | Callback on selection change |
| `disabled` | `boolean` | Disables interaction |
| `className` | `string` | Additional CSS classes |

### `FilterList<T>`
A container that manages a collection of `FilterListItem` entries with controlled selection state. Supports generic item `data` typing for strongly-typed payloads.

**Props (`FilterListProps<T>`):**

| Prop | Type | Description |
|------|------|-------------|
| `items` | `Array<{ id, title, meta?, disabled?, data? }>` | List of items to render |
| `selectedIds` | `string[]` | Currently selected item IDs |
| `onChange` | `(selectedIds: string[]) => void` | Fires when selection changes |
| `multiple` | `boolean` | Enables multi-select (default: `true`) |

## Usage Example

```typescript
import { FilterList } from "@/components/filter-list"

const items = [
  { id: "win", title: "Windows", meta: ["Workstation", 42] },
  { id: "mac", title: "macOS", meta: ["Laptop", 18] },
  { id: "linux", title: "Linux", meta: ["Server", 7], disabled: true },
]

function DeviceFilter() {
  const [selected, setSelected] = React.useState<string[]>(["win"])

  return (
    <FilterList
      items={items}
      selectedIds={selected}
      onChange={setSelected}
      multiple={true}
    />
  )
}
```

> For single-select mode (e.g. priority filters), set `multiple={false}` — selecting a new item automatically deselects the previous one.