Plain items and choice cards

// apps/docs/examples/ui/radio-group.tsx'use client';
import {useState} from 'react';
import {  Field,  FieldContent,  FieldDescription,  FieldLabel,  FieldLegend,  FieldSet,  FieldTitle,} from '@workspace/active-ui/components/primitives/field';import {  RadioGroup,  RadioGroupItem,} from '@workspace/active-ui/components/primitives/radio-group';
const PLANS = [  {    value: 'monthly',    title: 'Monthly',    description: 'Contributions are collected on the first working day.',  },  {    value: 'quarterly',    title: 'Quarterly',    description:      'Four collections a year, in January, April, July and October.',  },  {    value: 'yearly',    title: 'Yearly',    description: 'One collection in January.',  },];
/** * One choice out of a few, all visible: plain items beside their labels, and * choice cards with a description. The group is a `FieldSet` named by its * legend; the arrow keys move between the items. */export default function RadioGroupExample() {  const [plan, setPlan] = useState('monthly');  return (    <div className="grid w-full max-w-md gap-8">      <FieldSet>        <FieldLegend variant="label">Statement language</FieldLegend>        <RadioGroup defaultValue="en" aria-label="Statement language">          {[            ['en', 'English'],            ['nl', 'Dutch'],            ['de', 'German'],          ].map(([value, label]) => (            <Field key={value} orientation="horizontal">              <RadioGroupItem value={value} id={`language-${value}`} />              <FieldLabel htmlFor={`language-${value}`}>{label}</FieldLabel>            </Field>          ))}        </RadioGroup>      </FieldSet>
      <FieldSet>        <FieldLegend variant="label">Collection</FieldLegend>        <RadioGroup          value={plan}          onValueChange={(value) => setPlan(value as string)}          aria-label="Collection"        >          {PLANS.map((option) => (            <FieldLabel key={option.value} htmlFor={`plan-${option.value}`}>              <Field orientation="horizontal">                <RadioGroupItem                  value={option.value}                  id={`plan-${option.value}`}                />                <FieldContent>                  <FieldTitle>{option.title}</FieldTitle>                  <FieldDescription>{option.description}</FieldDescription>                </FieldContent>              </Field>            </FieldLabel>          ))}        </RadioGroup>        <p className="text-muted-foreground text-sm">Chosen: {plan}</p>      </FieldSet>    </div>  );}