| 14 | } |
| 15 | |
| 16 | export function ToggleGroup<T extends string>({ |
| 17 | options, |
| 18 | value, |
| 19 | onChange, |
| 20 | compact = false, |
| 21 | }: ToggleGroupProps<T>) { |
| 22 | // Compact mode: show only active option, click cycles to next option |
| 23 | if (compact) { |
| 24 | const currentIndex = options.findIndex((opt) => opt.value === value); |
| 25 | const activeOption = options[currentIndex]; |
| 26 | const nextOption = options[(currentIndex + 1) % options.length]; |
| 27 | |
| 28 | return ( |
| 29 | <button |
| 30 | onClick={() => onChange(nextOption.value)} |
| 31 | type="button" |
| 32 | className={cn( |
| 33 | "px-1.5 py-0.5 text-[11px] font-sans rounded-sm border-none cursor-pointer transition-all duration-150", |
| 34 | "text-toggle-text-active bg-toggle-active font-medium", |
| 35 | activeOption?.activeClassName |
| 36 | )} |
| 37 | aria-label={`${activeOption.label} mode. Click to switch to ${nextOption.label}.`} |
| 38 | > |
| 39 | {activeOption.label} |
| 40 | </button> |
| 41 | ); |
| 42 | } |
| 43 | |
| 44 | return ( |
| 45 | <div className="bg-toggle-bg flex gap-0 rounded"> |
| 46 | {options.map((option) => { |
| 47 | const isActive = value === option.value; |
| 48 | return ( |
| 49 | <button |
| 50 | key={option.value} |
| 51 | onClick={() => onChange(option.value)} |
| 52 | aria-pressed={isActive} |
| 53 | type="button" |
| 54 | className={cn( |
| 55 | "px-1.5 py-0.5 text-[11px] font-sans rounded-sm border-none cursor-pointer transition-all duration-150 bg-transparent", |
| 56 | isActive |
| 57 | ? "text-toggle-text-active bg-toggle-active font-medium" |
| 58 | : "text-toggle-text font-normal hover:text-toggle-text-hover hover:bg-toggle-hover", |
| 59 | isActive && option.activeClassName |
| 60 | )} |
| 61 | > |
| 62 | {option.label} |
| 63 | </button> |
| 64 | ); |
| 65 | })} |
| 66 | </div> |
| 67 | ); |
| 68 | } |