Popover with form.

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/ui/popover"
</script>

<template>
  <div class="flex items-center justify-center">
    <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline">Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent class="w-64" align="start">
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
        </PopoverHeader>
        <FieldGroup class="gap-2">
          <Field orientation="horizontal">
            <FieldLabel for="width" class="w-1/2">Width</FieldLabel>
            <Input id="width" value="100%" />
          </Field>
          <Field orientation="horizontal">
            <FieldLabel for="height" class="w-1/2">Height</FieldLabel>
            <Input id="height" value="25px" />
          </Field>
        </FieldGroup>
      </PopoverContent>
    </Popover>
  </div>
</template>