{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-list",
  "title": "Stats List",
  "description": "Generic home/away match stats comparison, one row per stat, sport-agnostic.",
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/mrdoge-ui/stats-list/stats-list.tsx",
      "content": "import { cn } from \"@/lib/utils\"\n\nexport interface StatsListEntry {\n  label: string\n  /** Pre-formatted for display, e.g. \"62%\", \"14\", \"Yamal (3)\". */\n  home: string\n  away: string\n  /** Raw numeric values for the two sides: every row is a comparison bar, sized from these. */\n  homeValue: number\n  awayValue: number\n}\n\nexport interface StatsListProps {\n  /** Rows in display order. Sport-specific: see the adapter for which stats each sport contributes. */\n  entries: StatsListEntry[]\n  /**\n   * Omits the comparison bar under every row, keeping just the numbers\n   * and label, for entries where the two sides aren't a meaningful\n   * proportional split, e.g. two different players' individual totals.\n   *\n   * @defaultValue true\n   */\n  showBars?: boolean\n  className?: string\n}\n\nfunction StatsListRow({ entry, showBar }: { entry: StatsListEntry; showBar: boolean }) {\n  const total = entry.homeValue + entry.awayValue\n  const homeShare = total > 0 ? (entry.homeValue / total) * 100 : 0\n  const awayShare = total > 0 ? (entry.awayValue / total) * 100 : 0\n  const homeLeading = entry.homeValue > entry.awayValue\n  const awayLeading = entry.awayValue > entry.homeValue\n\n  return (\n    <li className=\"flex flex-col gap-1.5 py-2.5\">\n      <div className=\"flex items-center justify-between gap-3 text-sm\">\n        <span className={cn(\"tabular-nums\", homeLeading ? \"font-semibold\" : \"text-muted-foreground\")}>\n          {entry.home}\n        </span>\n        <span className=\"text-xs text-muted-foreground\">{entry.label}</span>\n        <span className={cn(\"tabular-nums\", awayLeading ? \"font-semibold\" : \"text-muted-foreground\")}>\n          {entry.away}\n        </span>\n      </div>\n      {showBar ? (\n        <div className=\"flex items-center gap-1\">\n          <div className=\"flex flex-1 justify-end\">\n            <div\n              className={cn(\n                \"h-1 rounded-full transition-[width] duration-300\",\n                total === 0 ? \"invisible\" : homeLeading ? \"bg-foreground\" : \"bg-muted-foreground/25\"\n              )}\n              style={{ width: `${homeShare}%` }}\n            />\n          </div>\n          <div className=\"flex flex-1 justify-start\">\n            <div\n              className={cn(\n                \"h-1 rounded-full transition-[width] duration-300\",\n                total === 0 ? \"invisible\" : awayLeading ? \"bg-foreground\" : \"bg-muted-foreground/25\"\n              )}\n              style={{ width: `${awayShare}%` }}\n            />\n          </div>\n        </div>\n      ) : null}\n    </li>\n  )\n}\n\nexport function StatsListSkeleton({ rowCount = 4, className }: { rowCount?: number; className?: string }) {\n  return (\n    <ul className={cn(\"flex flex-col\", className)}>\n      {Array.from({ length: rowCount }).map((_, index) => (\n        <li key={index} className=\"flex flex-col gap-1.5 py-2.5\">\n          <div className=\"flex items-center justify-between gap-3\">\n            {/* h-5, not h-3: matches text-sm's real 1.25rem line-height, not just its font-size */}\n            <span className=\"h-5 w-6 animate-pulse rounded bg-muted\" />\n            {/* h-4, not h-3: matches text-xs' real 1rem line-height, not just its font-size */}\n            <span className=\"h-4 w-24 animate-pulse rounded bg-muted\" />\n            <span className=\"h-5 w-6 animate-pulse rounded bg-muted\" />\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <div className=\"h-1 flex-1 animate-pulse rounded-full bg-muted\" />\n            <div className=\"h-1 flex-1 animate-pulse rounded-full bg-muted\" />\n          </div>\n        </li>\n      ))}\n    </ul>\n  )\n}\n\n/** Renders nothing when `entries` is empty, same convention as Match Timeline: leaves messaging (e.g. \"no stats for this match\") to the caller, since only the caller knows why. */\nexport function StatsList({ entries, showBars = true, className }: StatsListProps) {\n  return (\n    <ul className={cn(\"flex flex-col\", className)}>\n      {entries.map((entry, index) => (\n        <StatsListRow key={index} entry={entry} showBar={showBars} />\n      ))}\n    </ul>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}