{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd",
  "title": "Kbd",
  "description": "A kbd component.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/default/kbd/kbd.tsx",
      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst kbdVariants = cva(\n  // `bg-clip-padding` on `default` only: the translucent border needs the bg\n  // clipped to the padding box to composite correctly. Colored variants use\n  // opaque borders; ghost has no bg, so it would leave a 1px substrate halo.\n  \"inline-flex items-center justify-center rounded-sm border text-center font-medium tracking-tight shadow-[0_1px_2px_0_oklch(0_0_0/0.06)] transition-colors duration-150 font-mono\",\n  {\n    variants: {\n      size: {\n        sm: \"h-5 min-w-5 px-1.5 text-xs\",\n        md: \"h-6 min-w-6 px-2 text-xs\",\n        lg: \"h-7 min-w-7 px-2.5 text-sm\",\n      },\n      variant: {\n        default: \"bg-card bg-clip-padding text-foreground\",\n        primary: \"bg-primary text-primary-foreground border-primary\",\n        secondary: \"bg-secondary text-secondary-foreground border-secondary\",\n        outline: \"bg-transparent text-foreground shadow-none\",\n        ghost: \"border-transparent bg-muted text-muted-foreground shadow-none\",\n        danger: \"bg-destructive text-destructive-foreground border-destructive\",\n      },\n      pressed: {\n        true: \"translate-y-px bg-muted shadow-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n      pressed: false,\n    },\n  },\n);\n\nconst platformKeys = {\n  mac: {\n    cmd: \"⌘\",\n    option: \"⌥\",\n    alt: \"⌥\",\n    ctrl: \"⌃\",\n    shift: \"⇧\",\n    enter: \"↵\",\n    delete: \"⌫\",\n    backspace: \"⌫\",\n    escape: \"⎋\",\n    tab: \"⇥\",\n    space: \"⎵\",\n    up: \"↑\",\n    down: \"↓\",\n    left: \"←\",\n    right: \"→\",\n  },\n  windows: {\n    cmd: \"Ctrl\",\n    option: \"Alt\",\n    alt: \"Alt\",\n    ctrl: \"Ctrl\",\n    shift: \"Shift\",\n    enter: \"Enter\",\n    delete: \"Del\",\n    backspace: \"Backspace\",\n    escape: \"Esc\",\n    tab: \"Tab\",\n    space: \"Space\",\n    up: \"↑\",\n    down: \"↓\",\n    left: \"←\",\n    right: \"→\",\n  },\n};\n\nfunction useClientPlatform(): \"mac\" | \"windows\" {\n  const [platform, setPlatform] = React.useState<\"mac\" | \"windows\">(\"mac\");\n\n  React.useEffect(() => {\n    if (typeof navigator === \"undefined\") return;\n    // `navigator.platform` is deprecated; prefer userAgentData.platform\n    // (Chromium) with userAgent string as the universal fallback.\n    const uaData = (\n      navigator as Navigator & { userAgentData?: { platform?: string } }\n    ).userAgentData;\n    const platformHint = uaData?.platform ?? navigator.userAgent;\n    setPlatform(/mac/i.test(platformHint) ? \"mac\" : \"windows\");\n  }, []);\n\n  return platform;\n}\n\nexport interface KbdProps\n  extends React.ComponentProps<\"kbd\">, VariantProps<typeof kbdVariants> {\n  keys?: string[];\n  separator?: string;\n  platform?: \"mac\" | \"windows\" | \"auto\";\n  disabled?: boolean;\n  \"aria-label\"?: string;\n}\n\nfunction Kbd({\n  className,\n  size,\n  variant,\n  pressed,\n  keys,\n  separator = \"+\",\n  platform = \"auto\",\n  disabled = false,\n  children,\n  \"aria-label\": ariaLabel,\n  ...props\n}: KbdProps) {\n  const clientPlatform = useClientPlatform();\n  const detectedPlatform = platform === \"auto\" ? clientPlatform : platform;\n  const keyMap = platformKeys[detectedPlatform];\n\n  const renderKey = (key: string) => {\n    const normalizedKey = key.toLowerCase();\n    return keyMap[normalizedKey as keyof typeof keyMap] || key;\n  };\n\n  const content = keys ? (\n    <span className=\"flex items-center gap-1\">\n      {keys.map((key, index) => (\n        <React.Fragment key={index}>\n          {index > 0 && (\n            <span className=\"text-muted-foreground text-xs font-normal\">\n              {separator}\n            </span>\n          )}\n          <span>{renderKey(key)}</span>\n        </React.Fragment>\n      ))}\n    </span>\n  ) : (\n    children\n  );\n\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        kbdVariants({ size, variant, pressed }),\n        disabled && \"cursor-not-allowed opacity-60\",\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={disabled}\n      {...props}\n    >\n      {content}\n    </kbd>\n  );\n}\n\nexport { Kbd, kbdVariants };\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/kbd.tsx"
    }
  ],
  "type": "registry:ui"
}