Design and build an accessible, reusable UI component

Design and implement a reusable [component name, e.g. "multi-select dropdown", "data table", "toast notification"] component.

Tech context: [React/Vue/etc.], TypeScript, styling with [Tailwind/CSS modules/styled-components], any existing design tokens: [describe, e.g. "colors defined as CSS variables --brand-600 etc." or "none yet"].

Functional requirements: [describe what it needs to do, e.g. "select multiple options from a searchable list, show selected items as removable chips, support a max selection count"]

Before implementing, list all the states and variants this component needs, including ones I didn't mention if they're implied — for example: default, hover, focus, disabled, loading, empty/no-results, error, and any size or visual variants.

Then implement it with:
1. A clear, typed props interface with sensible defaults
2. Full keyboard support (tab order, arrow keys where relevant, Escape to close/cancel, Enter/Space to activate)
3. Correct ARIA roles and attributes for its interaction pattern (look up the correct pattern rather than guessing — e.g. combobox, listbox, dialog)
4. Visible focus states that meet contrast requirements, not just default browser outline removed with nothing replacing it
5. Responsive behavior at small viewport widths
6. A composable API (children/slots or render props) if the component is likely to need content customization later

Finally, give me 2-3 usage examples showing different variants, and a short list of what I should manually test with a keyboard and a screen reader before shipping this.