{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "prob-bar",
  "title": "ProbBar",
  "description": "Labelled probability bar that fills.",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "@jbm/tokens",
    "@jbm/motion-hooks",
    "@jbm/pop"
  ],
  "files": [
    {
      "path": "registry/jbm/motion/prob-bar.tsx",
      "content": "import { color, font } from \"../lib/tokens\";\nimport { useProgress } from \"./hooks\";\nimport { Pop } from \"./pop\";\n\n/** Labelled probability bar: mono label, bar filling to `p`, value to two decimals. */\nexport function ProbBar({ label, p, at, w = 520, labelW = 230 }: { label: string; p: number; at: number; w?: number; labelW?: number }) {\n  const f = useProgress(at, p, 0.7);\n  return (\n    <Pop at={at} from=\"left\" dist={12}>\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 18 }}>\n        <div style={{ fontFamily: font.mono, fontSize: 24, color: color.ink, width: labelW }}>{label}</div>\n        <div style={{ width: w - labelW - 90, height: 22, background: color.line, borderRadius: 11, overflow: \"hidden\" }}>\n          <div style={{ width: `${f * 100}%`, height: \"100%\", background: color.accent }} />\n        </div>\n        <div style={{ fontFamily: font.mono, fontSize: 24, color: color.accent, fontWeight: 700, width: 80 }}>{f.toFixed(2)}</div>\n      </div>\n    </Pop>\n  );\n}\n",
      "type": "registry:component",
      "target": "src/jbm/motion/prob-bar.tsx"
    }
  ],
  "type": "registry:component"
}