✨ feat(kbd): add kbd component

docs/content/2.components/kbd.md

@@ -0,0 +1,50 @@
+---
+description: Display a keyboard keys such as shortcuts or hotkeys
+since: 1.3.3
+---
+
+## Usage
+
+Use the default slot to display the keyboard key.
+
+::ComponentPreview
+K
+::
+
+The `label` prop also can be used to do so.
+
+::ComponentPreview
+---
+props:
+  label: K
+---
+::
+
+### Sizes
+
+The `size` prop changes the size of the `kbd`.
+
+::ComponentPreview
+---
+props:
+  size: sm
+---
+K
+::
+
+### Shadow
+
+Add a shadow to the `kbd`.
+
+::ComponentPreview
+---
+props:
+  shadow: true
+---
+K
+::
+
+## Config
+
+::ComponentDefaults
+::

src/runtime/components/elements/Kbd.vue

@@ -0,0 +1,63 @@
+<script lang="ts">
+import { computed, defineComponent, toRef, type PropType } from 'vue'
+import { twJoin, twMerge } from 'tailwind-merge'
+import { kbd } from '../../ui.config'
+import type { DeepPartial, KbdSize, Strategy } from '../../types'
+import { useRayUI } from '#build/imports'
+
+const config = kbd
+
+export default defineComponent({
+  props: {
+    label: {
+      type: String,
+      default: null,
+    },
+    size: {
+      type: String as PropType<KbdSize>,
+      default: config.default.size,
+    },
+    shadow: {
+      type: Boolean,
+      default: false,
+    },
+    class: {
+      type: String,
+      default: '',
+    },
+    ui: {
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const { ui, attrs } = useRayUI('kbd', toRef(props, 'ui'), config)
+
+    const kbdClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.base,
+        ui.value.background,
+        ui.value.rounded,
+        ui.value.font,
+        ui.value.padding,
+        ui.value.ring,
+        props.shadow && ui.value.shadow,
+        ui.value.size[props.size],
+      ), props.class)
+    })
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      kbdClass,
+    }
+  },
+})
+</script>
+
+<template>
+  <kbd :class="kbdClass" v-bind="attrs">
+    <slot>{{ label }}</slot>
+  </kbd>
+</template>

src/runtime/types/index.ts

@@ -1,5 +1,6 @@
 export * from './button'
 export * from './message'
 export * from './input'
+export * from './kbd'
 
 export * from './utils'

src/runtime/types/kbd.d.ts

@@ -0,0 +1,7 @@
+import type { AppConfig } from 'nuxt/schema'
+import type { kbd } from '../ui.config'
+import type { ExtractDeepKey } from './utils'
+
+export type KbdSize =
+  | keyof typeof kbd.size
+  | ExtractDeepKey<AppConfig, ['rayui', 'kbd', 'size']>

src/runtime/ui.config/elements/kbd.ts

@@ -0,0 +1,17 @@
+export default {
+  base: 'inline-flex justify-center items-center text-gray-900 dark:text-gray-100 leading-none',
+  rounded: 'rounded',
+  font: 'font-medium',
+  background: 'bg-gray-100 dark:bg-gray-800',
+  ring: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700',
+  padding: 'px-1',
+  shadow: 'shadow-sm',
+  size: {
+    xs: 'h-4 min-w-4 text-[10px]',
+    sm: 'h-5 min-w-5 text-[11px]',
+    md: 'h-6 min-w-6 text-xs',
+  },
+  default: {
+    size: 'sm',
+  },
+}

src/runtime/ui.config/index.ts

@@ -3,6 +3,7 @@ export { default as standard } from './standard'
 
 // elements
 export { default as button } from './elements/button'
+export { default as kbd } from './elements/kbd'
 
 // forms
 export { default as input } from './forms/input'