Components aren't complex. They're composed.

import { useRef } from "react";
import { useRovingFocus } from "./hooks";

export function RovingRing({ items }) {
  const containerRef = useRef(null);
  const { activeIndex, onKeyDown } =
    useRovingFocus(items.length);

  return (
    <div
      ref={containerRef}
      role="radiogroup"
      onKeyDown={onKeyDown}
      style={{ display: "flex", gap: 6 }}
    >
      {items.map((item, i) => {
        const isActive = i === activeIndex;
        return (
          <button
            key={item.id}
            tabIndex={isActive ? 0 : -1}
            aria-checked={isActive}
            style={{
              width: 40,
              height: 40,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              borderRadius: 8,
              border: isActive
                ? "2px solid #1C1917"
                : "1px solid #E7E5E4",
              background: isActive
                ? "#1C1917" : "#FFFFFF",
              color: isActive
                ? "#FAFAF9" : "#57534E",
              fontSize: 14,
              fontWeight: 500,
              fontFamily: "system-ui, sans-serif",
              cursor: "pointer",
              outline: "none",
              transition: "all 150ms ease",
            }}
          >
            {item.label}
          </button>
        );
      })}
    </div>
  );
}