Merge pull request #89 from selemondev/docs/kbd

docs(app): #72 kbd

docs/docs/.vitepress/config.ts

@@ -59,6 +59,7 @@ export default defineConfig({
             { text: 'Divider', link: '/guide/components/divider.md'},
             { text: 'Icon', link: '/guide/components/icon.md'},
             { text: 'Input', link: '/guide/components/input.md'},
+            { text: 'Kbd', link: '/guide/components/kbd.md'}
           ]
         }
       ],

docs/docs/components/Kbd/kbd.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="grid place-items-center w-full">
+        <div class="flex space-x-2">
+            <WKbd>A</WKbd>
+            <WKbd>B</WKbd>
+            <WKbd>C</WKbd>
+            <WKbd>D</WKbd>
+            <WKbd>E</WKbd>
+            <WKbd>F</WKbd>
+            <WKbd>G</WKbd>
+            <WKbd>H</WKbd>
+            <WKbd>I</WKbd>
+            <WKbd>J</WKbd>
+            <WKbd>@</WKbd>
+        </div>
+    </div>
+</template>

docs/docs/components/Kbd/kbdSize.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="grid place-items-center w-full">
+        <div class="flex space-x-2">
+            <WKbd size="xs">A</WKbd>
+            <WKbd size="sm">B</WKbd>
+            <WKbd size="md">C</WKbd>
+            <WKbd size="lg">D</WKbd>
+            <WKbd size="xl">E</WKbd>
+        </div>
+    </div>
+</template>

docs/docs/guide/components/kbd.md

@@ -0,0 +1,55 @@
+---
+title: Kbd
+lang: en-US
+---
+
+# Kbd
+
+A Kbd, also known as a keyboard UI component, is a user interface element that is designed to represent a keyboard or keyboard-like input.
+
+## Basic Usage
+
+You can use the default slot to set the text of the `WKbd` component as shown below:
+
+<demo src="../../components/Kbd/kbd.vue" />
+
+## Size
+
+You can set the size of the `WKbd` component by using the `size` prop as shown below:
+
+<demo src="../../components/Kbd/kbdSize.vue" />
+
+By default, the `WKbd` component's size is set to `sm`.
+
+## Preset
+
+```js
+
+WKbd: {
+    base: {
+      root: 'inline-flex items-center justify-center text-gray-900 px-1 dark:text-white',
+      KbdRounded: 'rounded',
+      KbdFont: 'font-medium',
+      KbdBackground: 'bg-gray-100 dark:bg-gray-800',
+      KbdRing: 'ring-1 ring-gray-300 ring-inset dark:ring-gray-700',
+      KbdSize: {
+        xs: 'h-4 min-w-[16px] text-[10px]',
+        sm: 'h-5 min-w-[20px] text-[11px]',
+        md: 'h-6 min-w-[24px] text-[12px]',
+        lg: 'h-7 min-w-[28px] text-[13px]',
+        xl: 'h-8 min-w-[32px] text-[14px]',
+      },
+    },
+
+    variants: {
+      default: {
+        root: 'inline-flex items-center justify-center text-gray-900 px-1 dark:text-white',
+        KbdRounded: 'rounded',
+        KbdFont: 'font-medium',
+        KbdBackground: 'bg-gray-100 dark:bg-gray-800',
+        KbdRing: 'ring-1 ring-gray-300 ring-inset dark:ring-gray-700',
+      },
+    },
+},
+
+```

packages/windi/src/App.vue

@@ -1,16 +1,9 @@
 <script setup lang='ts'>
 import { useDark, useToggle } from '@vueuse/core'
-import { ref } from 'vue'
 
 const isDark = useDark()
 
 const toggle = useToggle(isDark)
-
-const searchTerm = ref('')
-
-function clearSearchTerm() {
-  return searchTerm.value = ''
-}
 </script>
 
 <template>
@@ -20,11 +13,7 @@ function clearSearchTerm() {
     </button>
     <div>
       <div class="space-y-6">
-        <WInput v-model="searchTerm" icon="carbon:search" placeholder="Search">
-          <template v-if="searchTerm !== ''" #trailing>
-            <WIcon name="heroicons:x-mark-20-solid" class="text-gray-500" @click="clearSearchTerm()" />
-          </template>
-        </WInput>
+        <WKbd>K</WKbd>
       </div>
     </div>
   </div>