Kbd

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <kbd
    data-slot="kbd"
    :class="cn('cn-kbd pointer-events-none inline-flex items-center justify-center select-none', props.class)"
  >
    <slot />
  </kbd>
</template>

<!--
  Верность оригиналу: в апстриме `KbdGroup` типизирован как
  `React.ComponentProps<"div">`, но фактически рендерит тег `<kbd>` (а не
  `<div>`). Это выглядит как недосмотр апстрима, но правило 4a требует
  сначала повторить поведение буква в букву, а не «исправлять» на автомате.
-->
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <kbd data-slot="kbd-group" :class="cn('cn-kbd-group inline-flex items-center', props.class)">
    <slot />
  </kbd>
</template>

export { default as Kbd } from "./Kbd.vue"
export { default as KbdGroup } from "./KbdGroup.vue"