[FR] Add `RadioCardGroup` for layout of multiple `RadioCard`s

[mm-wang]

Description

The RadioCard documentation mentions that "RadioCard is usually contained in a RadioCardGroup," but RadioCardGroup does not exist as a component. Additionally, unlike RadioGroup which supports inline={true} for horizontal layout of regular Radio buttons, there's no equivalent built-in layout support for RadioCard components.

Currently, to display RadioCard components in a horizontal/grid layout, users must either:

1. Add custom CSS classes with display: flex or display: grid
2. Use layout components like Flex from @blueprintjs/labs

Current behavior

// RadioGroup inline={true} works for Radio buttons
<RadioGroup inline={true}>
  <Radio label="Option 1" value="1" />
  <Radio label="Option 2" value="2" />
</RadioGroup>
// ✅ Displays horizontally

// But there's no equivalent for RadioCard
<RadioGroup inline={true}>
  <RadioCard label="Option 1" value="1" />
  <RadioCard label="Option 2" value="2" />
</RadioGroup>
// ❌ Does NOT display horizontally - inline prop has no effect on cards

Expected behavior

Either:

1. A RadioCardGroup component with inline prop support, or
2. RadioGroup should apply inline layout to RadioCard children the same way it does for Radio
   children

  // Option 1: New component
  <RadioCardGroup inline={true}>
    <RadioCard label="Option 1" value="1" />
    <RadioCard label="Option 2" value="2" />
  </RadioCardGroup>

  // Option 2: Existing component works with cards
  <RadioGroup inline={true}>
    <RadioCard label="Option 1" value="1" />
    <RadioCard label="Option 2" value="2" />
  </RadioGroup>

Rationale

1. Consistency: Regular radio buttons have built-in layout control via inline prop, but radio cards
   don't - this is inconsistent
2. Common pattern: Displaying radio cards in a horizontal/grid layout is a very common UI pattern
3. Documentation mismatch: The docs reference RadioCardGroup which doesn't exist
4. Ergonomics: While layout components (Flex, Box) can achieve this, having a dedicated prop is more
   ergonomic and discoverable

Current workarounds

Using layout components from @blueprintjs/labs: https://codesandbox.io/p/devbox/little-currying-gjglpf

  <Flex asChild={true} flexDirection="row" gap={4} width={100}>
    <RadioGroup onChange={handleChange}>
      <RadioCard label="Soup" value="soup" />
      <RadioCard label="Salad" value="salad" />
      <RadioCard label="Sandwich" value="sandwich" />
    </RadioGroup>
  </Flex>

Using custom CSS:

  <RadioGroup className="my-radio-card-row" onChange={handleChange}>
    <RadioCard label="Soup" value="soup" />
    <RadioCard label="Salad" value="salad" />
  </RadioGroup>

  // CSS
  .my-radio-card-row {
    display: flex;
    gap: 16px;
  }

Additional context

This also applies to CheckboxCard and SwitchCard - a CheckboxCardGroup or SwitchCardGroup with
layout support would provide similar value.