{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"rank-progress","type":"registry:ui","title":"RankProgress","description":"Progress toward the next rank\/tier \u2014 current volume vs threshold, with the requirement gap.","package":"fancy-mlm-ui","dependencies":["@particle-academy\/react-fancy"],"registryDependencies":[],"files":[{"path":"components\/fancy\/rank-progress\/RankProgress.tsx","content":"import { cn, Badge } from \"@particle-academy\/react-fancy\";\n\nexport interface RankProgressProps {\n  \/** Current tier\/rank key. *\/\n  tier: string;\n  \/** The next tier (omit \/ null at the top tier). *\/\n  nextTier?: string | null;\n  \/** Progress toward the next tier (e.g. team volume, active referrals). *\/\n  value: number;\n  \/** Threshold that unlocks `nextTier`. *\/\n  target?: number | null;\n  unit?: string;\n  className?: string;\n}\n\n\/** Current rank + a progress bar toward the next tier's qualification threshold. *\/\nexport function RankProgress({ tier, nextTier, value, target, unit, className }: RankProgressProps) {\n  const hasTarget = typeof target === \"number\" && target > 0 && nextTier != null;\n  const pct = hasTarget ? Math.max(0, Math.min(100, (value \/ target) * 100)) : 100;\n  const remaining = hasTarget ? Math.max(0, target - value) : 0;\n  const suffix = unit ? ` ${unit}` : \"\";\n\n  return (\n    <div data-fancy-mlm=\"rank-progress\" className={cn(\"fancy-mlm-rank\", className)}>\n      <div className=\"fancy-mlm-rank__head\">\n        <Badge variant=\"soft\">{tier}<\/Badge>\n        {hasTarget ? (\n          <span className=\"fancy-mlm-rank__next\">\u2192 {nextTier}<\/span>\n        ) : (\n          <span className=\"fancy-mlm-rank__muted\">Top tier<\/span>\n        )}\n      <\/div>\n\n      <div\n        className=\"fancy-mlm-rank__bar\"\n        role=\"progressbar\"\n        aria-valuenow={Math.round(pct)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        data-mlm-rank-pct={Math.round(pct)}\n      >\n        <div className=\"fancy-mlm-rank__fill\" style={{ width: `${pct}%` }} \/>\n      <\/div>\n\n      {hasTarget ? (\n        <div className=\"fancy-mlm-rank__meta\">\n          {value.toLocaleString()} \/ {target.toLocaleString()}\n          {suffix} \u00b7 {remaining.toLocaleString()} to {nextTier}\n        <\/div>\n      ) : null}\n    <\/div>\n  );\n}\n","type":"registry:ui","target":"components\/fancy\/rank-progress\/RankProgress.tsx"}]}