Switch with badges

<!--
  Оригинал использует базовый (не reui) `registry/bases/radix/ui/badge.tsx` —
  он не портирован во Vue отдельным компонентом (в `@revueui/ui` есть только
  `reui/badge`, другая cva-схема), поэтому разметка и `cn-badge*`-классы
  инлайнены буквально, тот же приём, что и в `block-checkbox` (паттерн 22).
-->
<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
</script>

<template>
  <div class="flex flex-col gap-4">
    <Field orientation="horizontal">
      <Switch id="sw-badge-1" :default-value="true" />
      <div class="flex items-center gap-2">
        <FieldLabel for="sw-badge-1">AI Copilot</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">
      <Switch id="sw-badge-2" />
      <div class="flex items-center gap-2">
        <FieldLabel for="sw-badge-2">Smart suggestions</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>