chore(Kbd): new component

docs/components/content/examples/CommandPaletteExampleGroups.vue

@@ -10,10 +10,10 @@ const users = [
 ]
 
 const actions = [
-  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => alert('New file') },
-  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => alert('New folder') },
-  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => alert('Add hashtag') },
-  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => alert('Add label') }
+  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => alert('New file'), shortcuts: ['⌘', 'N'] },
+  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => alert('New folder'), shortcuts: ['⌘', 'F'] },
+  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => alert('Add hashtag'), shortcuts: ['⌘', 'H'] },
+  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => alert('Add label'), shortcuts: ['⌘', 'L'] }
 ]
 
 const groups = computed(() => commandPaletteRef.value?.query

docs/components/content/examples/DropdownExample.vue

@@ -7,10 +7,12 @@ const items = [
     }
   }], [{
     label: 'Edit',
-    icon: 'i-heroicons-pencil-square-20-solid'
+    icon: 'i-heroicons-pencil-square-20-solid',
+    shortcuts: ['E']
   }, {
     label: 'Duplicate',
-    icon: 'i-heroicons-document-duplicate-20-solid'
+    icon: 'i-heroicons-document-duplicate-20-solid',
+    shortcuts: ['D']
   }], [{
     label: 'Archive',
     icon: 'i-heroicons-archive-box-20-solid'
@@ -19,7 +21,8 @@ const items = [
     icon: 'i-heroicons-arrow-right-circle-20-solid'
   }], [{
     label: 'Delete',
-    icon: 'i-heroicons-trash-20-solid'
+    icon: 'i-heroicons-trash-20-solid',
+    shortcuts: ['⌘', 'D']
   }]
 ]
 </script>

docs/components/content/examples/KbdExample.vue

@@ -0,0 +1,10 @@
+<script setup>
+const { metaSymbol } = useShortcuts()
+</script>
+
+<template>
+  <div class="flex items-center gap-0.5">
+    <UKbd>{{ metaSymbol }}</UKbd>
+    <UKbd>U</UKbd>
+  </div>
+</template>

docs/components/content/examples/TooltipExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <UTooltip text="Tooltip">
-    <UButton color="gray" label="Button" />
+  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
+    <UButton color="gray" label="Hover me" />
   </UTooltip>
 </template>

docs/components/docs/DocsAside.vue

@@ -14,9 +14,9 @@
           >
             Search
 
-            <div class="hidden lg:flex items-center gap-1 ml-auto -my-1">
-              <Shortcut value="meta" />
-              <Shortcut value="K" />
+            <div class="hidden lg:flex items-center gap-0.5 ml-auto -my-1">
+              <UKbd>{{ metaSymbol }}</UKbd>
+              <UKbd>K</UKbd>
             </div>
           </UButton>
         </div>
@@ -30,4 +30,5 @@
 
 <script setup lang="ts">
 const { isSearchModalOpen } = useDocs()
+const { metaSymbol } = useShortcuts()
 </script>

docs/content/2.elements/4.dropdown.md

@@ -22,10 +22,12 @@ const items = [
     }
   }], [{
     label: 'Edit',
-    icon: 'i-heroicons-pencil-square-20-solid'
+    icon: 'i-heroicons-pencil-square-20-solid',
+    shortcuts: ['E']
   }, {
     label: 'Duplicate',
-    icon: 'i-heroicons-document-duplicate-20-solid'
+    icon: 'i-heroicons-document-duplicate-20-solid',
+    shortcuts: ['D']
   }], [{
     label: 'Archive',
     icon: 'i-heroicons-archive-box-20-solid'
@@ -34,7 +36,8 @@ const items = [
     icon: 'i-heroicons-arrow-right-circle-20-solid'
   }], [{
     label: 'Delete',
-    icon: 'i-heroicons-trash-20-solid'
+    icon: 'i-heroicons-trash-20-solid',
+    shortcuts: ['⌘', 'D']
   }]
 ]
 </script>

docs/content/2.elements/5.kbd.md

@@ -0,0 +1,48 @@
+---
+github: true
+title: 'Keyboard Key'
+navigation:
+  title: 'Kbd'
+---
+
+## Usage
+
+::component-example
+#default
+:kbd-example
+
+#code
+```vue
+<script setup>
+const { metaSymbol } = useShortcuts()
+</script>
+
+<template>
+  <div class="flex items-center gap-0.5">
+    <UKbd>{{ metaSymbol }}</UKbd>
+    <UKbd>U</UKbd>
+  </div>
+</template>
+```
+::
+
+### Size
+
+Use the `size` prop to change the size of the Kbd.
+
+::component-card
+---
+props:
+  size: 'sm'
+---
+
+U
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/4.navigation/2.command-palette.md

@@ -118,10 +118,10 @@ const users = [
 ]
 
 const actions = [
-  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => alert('New file') },
-  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => alert('New folder') },
-  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => alert('Add hashtag') },
-  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => alert('Add label') }
+  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => alert('New file'), shortcuts: ['⌘', 'N'] },
+  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => alert('New folder'), shortcuts: ['⌘', 'F'] },
+  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => alert('Add hashtag'), shortcuts: ['⌘', 'H'] },
+  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => alert('Add label'), shortcuts: ['⌘', 'L'] }
 ]
 
 const groups = computed(() => commandPaletteRef.value?.query

docs/content/5.overlays/4.tooltip.md

@@ -10,8 +10,8 @@ github: true
 #code
 ```vue
 <template>
-  <UTooltip text="Tooltip">
-    <UButton color="gray" label="Button" />
+  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
+    <UButton color="gray" label="Hover me" />
   </UTooltip>
 </template>
 ```