{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rarity-gem",
  "title": "Rarity gem",
  "description": "A small diamond gem in the rarity's token color.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/cn",
    "@engram/token-utils",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/rarity-gem.tsx",
      "content": "import type { Rarity } from \"@engram/core\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { rarityVar } from \"../lib/tokens.js\";\n\nexport interface RarityGemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\"> {\n  rarity: Rarity;\n  /** Pixel size. */\n  size?: number;\n}\n\n/** A small diamond gem in the rarity's token color. */\nexport function RarityGem({\n  rarity,\n  size = 12,\n  className,\n  style,\n  ...props\n}: RarityGemProps) {\n  return (\n    <span\n      role=\"img\"\n      aria-label={rarity}\n      title={rarity}\n      className={cn(\"inline-block\", className)}\n      style={{\n        width: size,\n        height: size,\n        background: rarityVar(rarity),\n        transform: \"rotate(45deg)\",\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/rarity-gem.tsx"
    }
  ],
  "meta": {
    "level": "atom"
  },
  "docs": "Extend without forking: edit the copied source, use `asChild` (Radix Slot) to change the rendered element, pass the typed `annotations` prop for curated data (verdict/tags/per-plug), or use slot / render-prop props for arbitrary content. Requires the @engram/tokens theme (--engram-* CSS variables).",
  "categories": [
    "item"
  ],
  "type": "registry:component"
}