{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "power-badge",
  "title": "Power badge",
  "description": "The power/light readout: the angular power glyph + the value in gold, with an optional `cap`.",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/power-badge.tsx",
      "content": "import type { HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface PowerBadgeProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\"> {\n  /** The power / light value. */\n  power: number;\n  /** The current power cap; when reached the badge reads as maxed (glows). */\n  cap?: number;\n  /** Number color. Defaults to the gold power token. */\n  color?: string;\n  /** Pixel font size for the number. */\n  size?: number;\n}\n\n/** The angular Destiny power glyph (shared with the Nameplate readout). */\nfunction PowerGlyph({ size, className }: { size: number; className?: string }) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 32 32\"\n      fill=\"currentColor\"\n      role=\"img\"\n      aria-label=\"Power\"\n      className={className}\n    >\n      <path d=\"M22.962 8.863c-2.628-2.576-4.988-5.407-7.045-8.458l-0.123-0.193c-2.234 3.193-4.556 5.993-7.083 8.592l0.015-0.016c-2.645 2.742-5.496 5.245-8.542 7.499l-0.184 0.13c3.341 2.271 6.262 4.682 8.943 7.335l-0.005-0.005c2.459 2.429 4.71 5.055 6.731 7.858l0.125 0.182c4.324-6.341 9.724-11.606 15.986-15.649l0.219-0.133c-3.401-2.168-6.359-4.524-9.048-7.153l0.010 0.010zM18.761 18.998c-1.036 1.024-1.971 2.145-2.792 3.35l-0.050 0.078c-0.884-1.215-1.8-2.285-2.793-3.279l0 0c-1.090-1.075-2.28-2.055-3.552-2.923l-0.088-0.057c1.326-0.969 2.495-1.988 3.571-3.097l0.007-0.007c1.010-1.051 1.947-2.191 2.794-3.399l0.061-0.092c0.882 1.32 1.842 2.471 2.912 3.51l0.005 0.005c1.089 1.072 2.293 2.034 3.589 2.864l0.088 0.053c-1.412 0.905-2.641 1.891-3.754 2.994l0.002-0.002z\" />\n    </svg>\n  );\n}\n\n/**\n * The power/light readout: the angular power glyph + the value in gold, with an\n * optional `cap`. When `power` reaches the cap the number glows (the \"at cap\"\n * state); otherwise the remaining cap shows faintly as `/cap`.\n */\nexport function PowerBadge({\n  power,\n  cap,\n  color = \"var(--engram-gold)\",\n  size = 18,\n  className,\n  style,\n  ...props\n}: PowerBadgeProps) {\n  const capped = cap != null && power >= cap;\n  return (\n    <span\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      style={{ color, ...style }}\n      {...props}\n    >\n      <PowerGlyph size={Math.round(size * 0.82)} />\n      <b\n        className=\"font-engram-display font-bold leading-none tabular-nums\"\n        style={{\n          fontSize: size,\n          textShadow: capped\n            ? `0 0 8px color-mix(in oklch, ${color} 60%, transparent)`\n            : undefined,\n        }}\n      >\n        {power}\n      </b>\n      {cap != null && !capped ? (\n        <span\n          className=\"font-engram-display text-engram-faint tabular-nums\"\n          style={{ fontSize: Math.round(size * 0.66) }}\n        >\n          /{cap}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/power-badge.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": [
    "item"
  ],
  "type": "registry:component"
}