<script>
import theme from "#build/b24ui/kbd";
</script>

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { useAppConfig } from "#imports";
import { useKbd } from "../composables/useKbd";
import { tv } from "../utils/tv";
const props = defineProps({
  as: { type: null, required: false, default: "kbd" },
  value: { type: null, required: false },
  accent: { type: null, required: false, default: "default" },
  size: { type: null, required: false },
  class: { type: null, required: false }
});
defineSlots();
const { getKbdKey } = useKbd();
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.kbd || {} })({
  accent: props.accent,
  size: props.size
}));
</script>

<template>
  <Primitive :as="as" data-slot="base" :class="b24ui.base({ class: props.class })">
    <slot>
      {{ getKbdKey(value) }}
    </slot>
  </Primitive>
</template>
