Enabled/disable option selectors based on API response

Hi there!

I’m trying to build a multiple option selector that enables/disables options based on the available combinations. For example, imagine the response below where there’s multiple combinations of size + color values, but not all the combinations are available. So for instance `Blue` + `XS` is available, but that size is not available in `Black`.

[
    {
        ...,
        "variant_values": [
            {
                "attribute": {
                    "id": 1,
                    "name": "Color"
                },
                "value": {
                    "id": 1,
                    "name": "Black"
                }
            },
            {
                "attribute": {
                    "id": 1499,
                    "name": "Size"
                },
                "value": {
                    "id": 15547,
                    "name": "XXXS"
                }
            }
        ]
    },
    {
        ...,
        "variant_values": [
            {
                "attribute": {
                    "id": 1,
                    "name": "Color"
                },
                "value": {
                    "id": 2,
                    "name": "Blue"
                }
            },
            {
                "attribute": {
                    "id": 1499,
                    "name": "Size"
                },
                "value": {
                    "id": 15547,
                    "name": "XXXS"
                }
            }
        ]
    },
    {
        ...,
        "variant_values": [
            {
                "attribute": {
                    "id": 1,
                    "name": "Color"
                },
                "value": {
                    "id": 1,
                    "name": "Black"
                }
            },
            {
                "attribute": {
                    "id": 1499,
                    "name": "Size"
                },
                "value": {
                    "id": 15548,
                    "name": "XXS"
                }
            }
        ]
    },
    {
        ...,
        "variant_values": [
            {
                "attribute": {
                    "id": 1,
                    "name": "Color"
                },
                "value": {
                    "id": 2,
                    "name": "Blue"
                }
            },
            {
                "attribute": {
                    "id": 1499,
                    "name": "Size"
                },
                "value": {
                    "id": 15548,
                    "name": "XXS"
                }
            }
        ]
    },
    {
        ...,
        "variant_values": [
            {
                "attribute": {
                    "id": 1,
                    "name": "Color"
                },
                "value": {
                    "id": 2,
                    "name": "Blue"
                }
            },
            {
                "attribute": {
                    "id": 1499,
                    "name": "Size"
                },
                "value": {
                    "id": 15549,
                    "name": "XS"
                }
            }
        ],
        ...
    }
],

I’ve got 2 questions:

1. How can I show multiple option selectors dynamically? In the example there’s Color and Size, but it could have more attributes like for instance `Shape` with its own options (round, squared, etc).

2. How can I enable/disable options mutually. For instance:
- If I select XXXS, then both Black and Blue are clickable.
The UI could look like:
Size
XXXS | XXS | XS
Color
Black | Blue

- If I select XS, then only Blue should be clickable.
The UI could look like:
Size
XXXS | XXS | XS
Color
Black | Blue

Any idea on how this can be achieved?

Thank you in advance!