Radio group in card with separators

<script setup lang="ts">
import { Card } from "@/components/ui/card"
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>
  <Card class="w-full max-w-xs p-0">
    <RadioGroup default-value="standard">
      <FieldGroup class="gap-0">
        <Field>
          <FieldLabel class="px-4 py-3">
            <RadioGroupItem value="standard" id="ship-standard" />
            <FieldTitle>Standard Shipping</FieldTitle>
          </FieldLabel>
        </Field>
        <Separator />
        <Field>
          <FieldLabel class="px-4 py-3">
            <RadioGroupItem value="express" id="ship-express" />
            <FieldTitle>Express Shipping</FieldTitle>
          </FieldLabel>
        </Field>
        <Separator />
        <Field>
          <FieldLabel class="px-4 py-3">
            <RadioGroupItem value="overnight" id="ship-overnight" />
            <FieldTitle>Overnight Shipping</FieldTitle>
          </FieldLabel>
        </Field>
      </FieldGroup>
    </RadioGroup>
  </Card>
</template>