spb/agent-os

1'use client';2import { cn } from '@/lib/cn';3import { haptic } from '@/lib/haptic';45/** Single-choice filter chips (horizontally scrollable). */6export function FilterChips<T extends string>({ value, onChange, options, label }: { value: T; onChange: (v: T) => void; options: { id: T; label: string; count?: number }[]; label: string }) {7  return (8    <div role="radiogroup" aria-label={label} className="no-scrollbar -mx-4 flex gap-2 overflow-x-auto px-4">9      {options.map((o) => (10        <button11          key={o.id}12          role="radio"13          aria-checked={value === o.id}14          onClick={() => { haptic(5); onChange(o.id); }}15          className={cn('pressable tnum flex h-9 shrink-0 items-center gap-1.5 rounded-full px-3.5 text-[13px] font-medium transition-colors', value === o.id ? 'bg-text text-bg' : 'bg-surface text-text-2 shadow-card')}16        >17          {o.label}18          {o.count != null && o.count > 0 && <span className={cn('rounded-full px-1.5 text-[11px]', value === o.id ? 'bg-bg/20' : 'bg-surface-2')}>{o.count}</span>}19        </button>20      ))}21    </div>22  );23}24