{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-kbd",
  "title": "Aurora Kbd",
  "author": "jmagar <https://github.com/jmagar>",
  "description": "Keyboard shortcut keycap for command labels, menus, and dense workbench controls.",
  "dependencies": [],
  "registryDependencies": [
    "@aurora/aurora-tokens"
  ],
  "files": [
    {
      "path": "registry/aurora/ui/kbd.tsx",
      "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type KbdVariant = \"raised\" | \"solid\" | \"outline\" | \"ghost\" | \"accent\"\n\nexport interface KbdProps extends React.ComponentProps<\"kbd\"> {\n  /**\n   * Visual treatment of the keycap chip.\n   * - `raised`  — recessed control surface with a top highlight + bottom inset (default).\n   * - `solid`   — flat filled panel surface, brighter label.\n   * - `outline` — transparent fill, border only.\n   * - `ghost`   — borderless translucent fill, softest.\n   * - `accent`  — cyan-tinted surface, cyan border + label.\n   * @default \"raised\"\n   */\n  variant?: KbdVariant\n  /**\n   * Escape hatch. When true, renders a bare `<kbd>` with only `className` and the\n   * forwarded props/ref — no inline style skin — so the consumer's CSS owns the\n   * appearance. The styled path (default) is unaffected.\n   * @default false\n   */\n  unstyled?: boolean\n}\n\nconst variantStyle: Record<KbdVariant, React.CSSProperties> = {\n  raised: {\n    background: \"var(--aurora-control-surface)\",\n    border: \"1px solid var(--aurora-border-strong)\",\n    boxShadow: \"inset 0 -1px 0 rgba(0,0,0,0.35), var(--aurora-highlight-medium)\",\n    color: \"var(--aurora-text-muted)\",\n  },\n  solid: {\n    background: \"var(--aurora-panel-strong)\",\n    border: \"1px solid var(--aurora-border-strong)\",\n    boxShadow: \"var(--aurora-highlight-medium)\",\n    color: \"var(--aurora-text-primary)\",\n  },\n  outline: {\n    background: \"transparent\",\n    border: \"1px solid var(--aurora-border-strong)\",\n    boxShadow: \"none\",\n    color: \"var(--aurora-text-muted)\",\n  },\n  ghost: {\n    background: \"color-mix(in srgb, var(--aurora-control-surface) 70%, transparent)\",\n    border: \"1px solid transparent\",\n    boxShadow: \"none\",\n    color: \"var(--aurora-text-muted)\",\n  },\n  accent: {\n    background: \"color-mix(in srgb, var(--aurora-accent-primary) 14%, var(--aurora-panel-medium))\",\n    border: \"1px solid color-mix(in srgb, var(--aurora-accent-primary) 38%, transparent)\",\n    boxShadow: \"var(--aurora-highlight-medium)\",\n    color: \"var(--aurora-accent-strong)\",\n  },\n}\n\nfunction Kbd({ className, style, variant = \"raised\", unstyled = false, ref, ...props }: KbdProps & { ref?: React.Ref<HTMLElement> }) {\n  if (unstyled) {\n    return <kbd ref={ref} className={className} {...props} />\n  }\n\n  return (\n    <kbd\n      ref={ref}\n      className={cn(\"inline-flex min-w-5 items-center justify-center rounded-[5px] px-1.5\", className)}\n      style={{\n        fontFamily: \"var(--aurora-font-mono)\",\n        fontSize: 11,\n        fontWeight: 600,\n        height: 20,\n        lineHeight: 1,\n        ...variantStyle[variant],\n        ...style,\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd }\nexport default Kbd\n",
      "type": "registry:ui",
      "target": "@ui/aurora/kbd.tsx"
    }
  ],
  "meta": {
    "namespace": "@aurora",
    "style": "aurora",
    "family": "ui",
    "requiresTokens": true,
    "sourcePath": "registry/aurora/ui/kbd.tsx",
    "installTarget": "@ui/aurora/kbd.tsx"
  },
  "docs": "Aurora component that expects `aurora-tokens` to be installed first.\n\nDefault install target: `@ui/aurora/kbd.tsx`.\n\nRegistry dependencies: `aurora-tokens`.",
  "categories": [
    "aurora",
    "ui"
  ],
  "type": "registry:ui"
}