{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd",
  "type": "registry:component",
  "title": "Kbd",
  "description": "Labels a keyboard key. Monospace cap with a 1px frame and heavier bottom edge.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/kbd.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\n\nconst styles = stylex.create({\n  kbd: {\n    fontFamily: \"ui-monospace, SFMono-Regular, Menlo, monospace\",\n    fontSize: \"0.6875rem\",\n    fontWeight: 500,\n    color: vlak.gray,\n    backgroundColor: vlak.paper,\n    borderWidth: vlak.hairline,\n    borderStyle: \"solid\",\n    borderColor: vlak.divider,\n    borderBottomWidth: 2,\n    borderRadius: vlak.radiusSm,\n    paddingBlock: 2,\n    paddingInline: \"0.375rem\",\n    lineHeight: 1.2,\n  },\n  pair: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    gap: \"0.25rem\",\n  },\n});\n\nexport const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(function Kbd(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-kbd\", className], styles.kbd);\n  return <kbd ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n\nexport const KbdPair = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(function KbdPair(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-kbd-pair\", className], styles.pair);\n  return <span ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n",
      "type": "registry:component",
      "target": "components/vlak/kbd.tsx"
    },
    {
      "path": "vlak/styles/kbd.css",
      "content": "/* ── kbd: generated from packages/react/src/components/kbd.tsx ── */\n.rs-kbd{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.6875rem;font-weight:500;color:var(--text-secondary);background-color:var(--bg);border-width:1px;border-style:solid;border-color:var(--divider);border-bottom-width:2px;border-radius:var(--radius-sm);padding-block:2px;padding-inline:0.375rem;line-height:1.2}\n.rs-kbd-pair{display:inline-flex;align-items:center;gap:0.25rem}\n",
      "type": "registry:file",
      "target": "styles/vlak/kbd.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "content",
      "classes": [
        "rs-kbd",
        "rs-kbd-pair"
      ],
      "snippet": "<kbd class=\"rs-kbd\">⌘</kbd> <kbd class=\"rs-kbd\">K</kbd>",
      "cssOnly": false,
      "registryDependencies": [
        "vlak-lib"
      ],
      "aliases": [
        "Kbd",
        "Keyboard key",
        "Key cap",
        "Shortcut"
      ],
      "example": "import { Kbd, KbdPair } from \"@noorddev/vlak-react\";\n\n<KbdPair><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdPair>",
      "usage": {
        "use": [
          "Showing a shortcut next to a command or in help copy.",
          "KbdPair to keep a chord together."
        ],
        "avoid": [
          "Code; use Chip.",
          "Buttons; a key cap is not a control."
        ]
      },
      "a11y": [
        "Renders a native <kbd>; screen readers read the characters. Spell out modifier symbols in surrounding text when they matter."
      ]
    }
  }
}