<script setup lang="ts">
const props = withDefaults(defineProps<{
  size?: keyof typeof sizeClasses
}>(), {
  size: 'sm',
})

const sizeClasses = {
  xs: 'h-4 min-w-[16px] text-[10px]',
  sm: 'h-5 min-w-[20px] text-[11px]',
  md: 'h-6 min-w-[24px] text-[12px]',
}

const classes = computed(() => {
  return [
    sizeClasses[props.size],
  ]
})
</script>

<template>
  <kbd :class="classes" class="inline-flex items-center justify-center px-1 rounded font-medium font-sans text-muted-foreground bg-muted ring-1 ring-border ring-inset">
    <slot />
  </kbd>
</template>
