Radio group with tooltip info

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "circle-question-mark", он же "help-circle") —
  см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
</script>

<template>
  <TooltipProvider>
    <RadioGroup default-value="public" class="w-full max-w-xs">
      <Field orientation="horizontal">
        <RadioGroupItem value="public" id="vis-public" />
        <div class="flex items-center gap-1.5">
          <FieldLabel for="vis-public">Public</FieldLabel>
          <Tooltip>
            <TooltipTrigger class="text-muted-foreground">
              <span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  aria-hidden="true"
                  class="lucide lucide-circle-question-mark size-3.5"
                >
                  <circle cx="12" cy="12" r="10" />
                  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                  <path d="M12 17h.01" />
                </svg>
              </span>
            </TooltipTrigger>
            <TooltipContent side="right">Anyone on the internet can see this.</TooltipContent>
          </Tooltip>
        </div>
      </Field>
      <Field orientation="horizontal">
        <RadioGroupItem value="private" id="vis-private" />
        <div class="flex items-center gap-1.5">
          <FieldLabel for="vis-private">Private</FieldLabel>
          <Tooltip>
            <TooltipTrigger class="text-muted-foreground">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
                class="lucide lucide-circle-question-mark size-3.5"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                <path d="M12 17h.01" />
              </svg>
            </TooltipTrigger>
            <TooltipContent side="right">Only you and collaborators can access this.</TooltipContent>
          </Tooltip>
        </div>
      </Field>
    </RadioGroup>
  </TooltipProvider>
</template>