{
  "name": "kbd",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Kbd.vue",
      "content": "<script setup lang=\"ts\">\nimport { cva } from 'class-variance-authority'\nimport { computed } from 'vue'\n\ninterface KbdProps {\n  as?: string\n  size?: 'xs' | 'sm' | 'md'\n}\n\nconst props = withDefaults(defineProps<KbdProps>(), {\n  as: 'kbd',\n  size: 'sm',\n})\n\nconst kbdClass = computed(() => {\n  return cva(\n    'inline-flex items-center font-sans justify-center text-foreground rounded font-semibold bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',\n    {\n      variants: {\n        size: {\n          xs: 'min-h-4 text-[10px] h-4 px-1',\n          sm: 'min-h-5 text-[11px] h-5 px-1',\n          md: 'min-h-6 text-[12px] h-6 px-1.5',\n        },\n      },\n    },\n  )({\n    size: props.size,\n  })\n})\n</script>\n\n<template>\n  <component :is=\"props.as\" :class=\"kbdClass\">\n    <slot />\n  </component>\n</template>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as Kbd } from './Kbd.vue'\n"
    }
  ],
  "type": "components:ui"
}