Radio group with badges

<!--
  Расхождение с апстримом: оригинал использует базовый (не reui) компонент
  `registry/bases/radix/ui/badge.tsx`. Он не портирован во Vue отдельным
  компонентом (в @revueui/ui есть только `reui/badge` — другая cva-схема),
  поэтому разметка и cva-классы базового `Badge` инлайнены буквально
  (тот же приём, что и в `c-checkbox-22.vue`, см. docs/PORTING.md §5).
-->
<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
</script>

<template>
  <RadioGroup default-value="stable" class="w-fit">
    <Field orientation="horizontal">
      <RadioGroupItem value="stable" id="ch-stable" />
      <div class="flex items-center gap-2">
        <FieldLabel for="ch-stable">Stable</FieldLabel>
        <span
          data-slot="badge"
          data-variant="secondary"
          class="cn-badge group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none cn-badge-variant-secondary h-4.5 rounded-full px-1.5 text-[10px] tracking-wider uppercase"
          >Recommended</span
        >
      </div>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem value="beta" id="ch-beta" />
      <div class="flex items-center gap-2">
        <FieldLabel for="ch-beta">Beta</FieldLabel>
        <span
          data-slot="badge"
          data-variant="default"
          class="cn-badge group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none cn-badge-variant-default h-4.5 rounded-full px-1.5 text-[10px] tracking-wider uppercase"
          >New</span
        >
      </div>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem value="canary" id="ch-canary" />
      <FieldLabel for="ch-canary">Canary</FieldLabel>
    </Field>
  </RadioGroup>
</template>