Radio group in frame

<script setup lang="ts">
import { Frame, FrameHeader, FramePanel, FrameTitle } from "@/components/reui/frame"
import { Field, FieldGroup, FieldLabel, FieldTitle } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Separator } from "@/components/ui/separator"
</script>

<template>
  <Frame class="w-full max-w-xs" spacing="sm">
    <FrameHeader>
      <FrameTitle>Language</FrameTitle>
    </FrameHeader>
    <FramePanel class="overflow-hidden p-0!">
      <RadioGroup default-value="en">
        <FieldGroup class="gap-0">
          <Field>
            <FieldLabel class="p-3">
              <RadioGroupItem value="en" id="lang-en" />
              <FieldTitle>English</FieldTitle>
            </FieldLabel>
          </Field>
          <Separator />
          <Field>
            <FieldLabel class="p-3">
              <RadioGroupItem value="es" id="lang-es" />
              <FieldTitle>Spanish</FieldTitle>
            </FieldLabel>
          </Field>
          <Separator />
          <Field>
            <FieldLabel class="p-3">
              <RadioGroupItem value="fr" id="lang-fr" />
              <FieldTitle>French</FieldTitle>
            </FieldLabel>
          </Field>
          <Separator />
          <Field>
            <FieldLabel class="p-3">
              <RadioGroupItem value="de" id="lang-de" />
              <FieldTitle>German</FieldTitle>
            </FieldLabel>
          </Field>
        </FieldGroup>
      </RadioGroup>
    </FramePanel>
  </Frame>
</template>