Checkbox with feature badge

<!--
  Расхождение с апстримом: оригинал использует базовый (не reui) компонент
  `registry/bases/radix/ui/badge.tsx`. Он не портирован во Vue отдельным
  компонентом (в @revueui/ui есть только `reui/badge` — другая, более
  богатая cva-схема, см. c-checkbox-19.vue), поэтому разметка и cva-классы
  базового `Badge` инлайнены буквально (тот же приём, что и для примитивов
  `ComboboxList`/`ScrollArea` в `phone-input`, см. docs/PORTING.md §5).
  Классы `cn-badge*` — часть общей дизайн-системы (определены в
  `packages/ui/src/styles/themes/*.css`), уже используемой `Checkbox`.
-->
<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldLabel } from "@/components/ui/field"
</script>

<template>
  <div class="flex flex-col gap-4">
    <Field orientation="horizontal" class="w-auto">
      <Checkbox id="badge-1" :default-value="true" />
      <div class="flex items-center gap-2">
        <FieldLabel for="badge-1">AI-powered suggestions</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" class="w-auto">
      <Checkbox id="badge-2" />
      <div class="flex items-center gap-2">
        <FieldLabel for="badge-2">Beta feature access</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"
        >Beta</span>
      </div>
    </Field>
  </div>
</template>