{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd",
  "type": "registry:ui",
  "title": "Kbd",
  "description": "Keyboard shortcut chip and chord group.",
  "dependencies": [],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/kbd-knobs.ts",
      "target": "@components/control-ui/knob-contracts/kbd-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/kbd.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const kbdKnobs = [\n  \"--cui-kbd-radius\",\n  \"--cui-kbd-background\",\n  \"--cui-kbd-foreground\",\n  \"--cui-kbd-border-color\",\n  \"--cui-kbd-shadow\",\n] as const;\nexport type KbdKnobStyle = Partial<Record<(typeof kbdKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/kbd.css",
      "target": "@components/control-ui/styles/recipes/kbd.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"kbd\"][data-slot=\"root\"]) {\n    --cui-kbd-radius: var(--radius-control);\n    --cui-kbd-background: oklch(from var(--card) l c h / 0.6);\n    --cui-kbd-foreground: var(--muted-foreground);\n    --cui-kbd-border-color: var(--border);\n    --cui-kbd-shadow: var(--shadow-sm);\n    border-radius: var(--cui-kbd-radius);\n    background: var(--cui-kbd-background);\n    box-shadow:\n      inset 0 0 0 1px var(--cui-kbd-border-color),\n      var(--cui-kbd-shadow);\n    color: var(--cui-kbd-foreground);\n    font-size: var(--text-micro);\n    font-family: var(--font-sans);\n    font-weight: var(--font-weight-medium);\n  }\n}\n\n@property --cui-kbd-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-kbd-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-kbd-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-kbd-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-kbd-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/kbd.tsx",
      "target": "@components/control-ui/ui/kbd.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, CSSProperties } from \"react\";\n\nimport type { KbdKnobStyle } from \"@/components/control-ui/knob-contracts/kbd-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport type KbdProps = Omit<ComponentProps<\"kbd\">, \"style\"> & { style?: CSSProperties & KbdKnobStyle };\n\nexport function Kbd({ className, ...props }: KbdProps) {\n  return (\n    <kbd\n      data-control-ui=\"kbd\"\n      data-control-family=\"kbd\"\n      data-slot=\"root\"\n      className={cn(\"inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 px-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function KbdGroup({ className, ...props }: ComponentProps<\"span\"> & { style?: CSSProperties & KbdKnobStyle }) {\n  return (\n    <span\n      data-control-ui=\"kbd\"\n      data-control-family=\"kbd\"\n      data-slot=\"group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/kbd.css\"": {}
  },
  "meta": {}
}