Label with tooltip info icon

<script setup lang="ts">
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
</script>

<template>
  <Field class="w-full max-w-xs">
    <Label for="label-tooltip" class="gap-1">
      API Key
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger class="inline-flex items-center">
            <span class="text-muted-foreground inline-flex cursor-help">
              <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"
                class="lucide lucide-info size-3.5"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M12 16v-4" />
                <path d="M12 8h.01" />
              </svg>
            </span>
          </TooltipTrigger>
          <TooltipContent>
            <p>Your API key can be found in the developer settings.</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </Label>
    <Input
      id="label-tooltip"
      placeholder="sk_live_..."
      class="font-mono"
    />
  </Field>
</template>