{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "subclass-diamond",
  "title": "Subclass diamond",
  "description": "The signature subclass node: a 45°-rotated diamond frame tinted by its damage type, with the subclass icon upright inside and an optional super overlay.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/bungie-image",
    "@engram/cn",
    "@engram/item-hover-card",
    "@engram/token-utils",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/subclass-diamond.tsx",
      "content": "import type { ElementType, ImageRef } from \"@engram/core\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { elementVar } from \"../lib/tokens.js\";\nimport { BungieImage } from \"./bungie-image.js\";\nimport { ItemHoverCard } from \"./item-hover-card.js\";\n\nexport interface SubclassDiamondProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"color\"> {\n  /** Subclass icon (rendered upright inside the diamond). */\n  icon?: ImageRef;\n  /** Damage type — tints the diamond frame + glow. */\n  element?: ElementType;\n  /** Super icon overlaid in the corner. */\n  super?: ImageRef;\n  /** Inspect content shown on hover (e.g. a {@link PlugPopup}). When set, the\n   *  diamond becomes the trigger of an {@link ItemHoverCard}. */\n  popup?: ReactNode;\n  /** Pixel size of the bounding box. */\n  size?: number;\n  /** Highlight as the active subclass. */\n  selected?: boolean;\n}\n\n/**\n * The signature subclass node: a 45°-rotated diamond frame tinted by its damage\n * type, with the subclass icon upright inside and an optional super overlay.\n * Renders as a button when `onClick` is supplied (subclass picker).\n */\nexport function SubclassDiamond({\n  icon,\n  element,\n  super: superIcon,\n  popup,\n  size = 56,\n  selected = false,\n  className,\n  onClick,\n  ...props\n}: SubclassDiamondProps) {\n  const tint = element ? elementVar(element) : \"var(--engram-accent-2)\";\n  const inner = Math.round(size * 0.72);\n  const diamond = (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-pressed={selected}\n      className={cn(\n        \"relative inline-grid shrink-0 place-items-center\",\n        onClick && \"cursor-pointer\",\n        className,\n      )}\n      style={{ width: size, height: size }}\n      {...props}\n    >\n      {/* Rotated frame */}\n      <span\n        aria-hidden\n        className=\"absolute\"\n        style={{\n          width: inner,\n          height: inner,\n          transform: \"rotate(45deg)\",\n          border: `2px solid ${tint}`,\n          background: `color-mix(in oklch, ${tint} 14%, var(--engram-raised))`,\n          boxShadow: selected\n            ? `0 0 10px color-mix(in oklch, ${tint} 65%, transparent)`\n            : undefined,\n        }}\n      />\n      {/* Upright icon on top of the diamond */}\n      {icon ? (\n        <BungieImage\n          src={icon}\n          alt=\"\"\n          aria-hidden\n          className=\"relative object-contain\"\n          style={{\n            width: Math.round(size * 0.5),\n            height: Math.round(size * 0.5),\n          }}\n        />\n      ) : null}\n      {superIcon ? (\n        <BungieImage\n          src={superIcon}\n          alt=\"\"\n          aria-hidden\n          className=\"absolute right-0 bottom-0 border border-engram-border-strong bg-engram-bg object-contain\"\n          style={{\n            width: Math.round(size * 0.3),\n            height: Math.round(size * 0.3),\n          }}\n        />\n      ) : null}\n    </button>\n  );\n\n  // The diamond is itself a <button>, so the hover wrapper renders a <span> to\n  // avoid nesting interactive elements; the diamond's own focus/click bubble up.\n  if (popup)\n    return (\n      <ItemHoverCard as=\"span\" popup={popup}>\n        {diamond}\n      </ItemHoverCard>\n    );\n  return diamond;\n}\n",
      "type": "registry:component",
      "target": "components/engram/subclass-diamond.tsx"
    }
  ],
  "meta": {
    "level": "component"
  },
  "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": [
    "loadout"
  ],
  "type": "registry:component"
}