React 组件生成

帮我实现一个 React 组件。

【需求】{{组件需求}}
【技术栈】{{技术栈}}
【设计约束】{{设计约束}}
【使用场景】{{使用场景}}

请输出：
1. Props 定义：完整 TypeScript 接口，每个字段写 JSDoc 注释与默认值，说明必填与选填的理由。
2. 组件实现：函数组件 + hooks，包含：
   - value / onChange 的受控与非受控两种支持方式
   - 禁用态与只读态区分
   - 键盘交互（方向键切换、Enter/Space 选中、Tab 焦点顺序）
   - 必需的 ARIA 属性
3. 样式：给出样式文件内容，使用 CSS 变量以便主题化，包含 focus-visible 状态。
4. 边界处理：空选项、超长文案、单选项、选项数超过 6 个时的横向滚动，各写处理方式。
5. 使用示例：2 个调用示例（单选、多选），含 onChange 处理。
6. 测试用例：3 个 React Testing Library 用例（键盘切换、禁用不可选、受控值同步）。
7. 注意点：3 条容易被忽略的问题（重渲染、受控值抖动、SSR 水合），各给解决方式。

不要引入未在{{技术栈}}中的依赖，也不要用 any。