{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "bar-list",
  "title": "bar-list",
  "description": "bar-list",
  "dependencies": [
    "react-aria-components",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://intentui.com/r/link"
  ],
  "files": [
    {
      "path": "src/components/ui/bar-list.tsx",
      "content": "'use client'\n\nimport { useMemo } from 'react'\nimport { Button } from 'react-aria-components/Button'\nimport { twJoin, twMerge } from 'tailwind-merge'\nimport { Link } from './link'\n\ntype Bar<T> = T & {\n  key?: string\n  href?: string\n  value: number\n  name: string\n}\n\ninterface BarListProps<T = unknown> extends React.ComponentProps<'div'> {\n  data: Bar<T>[]\n  valueFormatter?: (value: number) => string\n  onValueChange?: (payload: Bar<T>) => void\n  sortOrder?: 'ascending' | 'descending' | 'none'\n}\n\n/** @deprecated Use Leaderboard component instead */\nexport function BarList<T>({\n  data = [],\n  valueFormatter = (value) => value.toString(),\n  onValueChange,\n  sortOrder = 'descending',\n  className,\n  ref,\n  ...props\n}: BarListProps<T>) {\n  const Component = onValueChange ? Button : 'div'\n  const sortedData = useMemo(() => {\n    if (sortOrder === 'none') {\n      return data\n    }\n    return [...data].sort((a, b) => {\n      return sortOrder === 'ascending' ? a.value - b.value : b.value - a.value\n    })\n  }, [data, sortOrder])\n\n  const widths = useMemo(() => {\n    const maxValue = Math.max(...sortedData.map((item) => item.value), 0)\n    return sortedData.map((item) =>\n      item.value === 0 ? 0 : Math.max((item.value / maxValue) * 100, 2)\n    )\n  }, [sortedData])\n\n  const rowHeight = 'h-8'\n\n  return (\n    <div ref={ref} className={twMerge('flex justify-between space-x-6', className)} {...props}>\n      <div className=\"relative w-full space-y-1.5\">\n        {sortedData.map((item, index) => (\n          <Component\n            key={item.key ?? item.name}\n            onClick={() => {\n              onValueChange?.(item)\n            }}\n            className={twJoin(\n              'group w-full rounded-sm',\n              'focus:inset-ring focus:inset-ring-ring focus:outline-hidden focus:ring-2 focus:ring-ring/20',\n              onValueChange ? 'm-0! cursor-pointer hover:bg-secondary' : ''\n            )}\n          >\n            <div\n              className={twJoin(\n                'flex items-center rounded-sm bg-primary/30',\n                rowHeight,\n                onValueChange ? 'group-hover:bg-primary/40 dark:group-hover:bg-primary/40' : '',\n                index === sortedData.length - 1 && 'mb-0'\n              )}\n              style={{ width: `${widths[index]}%` }}\n            >\n              <div className=\"absolute start-2 flex max-w-full pe-3 sm:pe-2\">\n                {item.href ? (\n                  <Link\n                    href={item.href}\n                    className={twJoin(\n                      'truncate whitespace-nowrap rounded-sm font-normal text-base/6 text-fg sm:text-sm/6',\n                      'hover:underline hover:underline-offset-2',\n                      'focus:inset-ring focus:inset-ring-ring focus:outline-hidden focus:ring-2 focus:ring-ring/20'\n                    )}\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                    onClick={(event) => event.stopPropagation()}\n                  >\n                    {item.name}\n                  </Link>\n                ) : (\n                  <p className=\"truncate whitespace-nowrap text-base/6 text-fg sm:text-sm/6\">\n                    {item.name}\n                  </p>\n                )}\n              </div>\n            </div>\n          </Component>\n        ))}\n      </div>\n      <div>\n        {sortedData.map((item, index) => (\n          <div\n            key={item.key ?? item.name}\n            className={twJoin(\n              'flex items-center justify-end',\n              rowHeight,\n              index === sortedData.length - 1 ? 'mb-0' : 'mb-1.5'\n            )}\n          >\n            <p className=\"truncate whitespace-nowrap text-fg text-sm leading-none\">\n              {valueFormatter(item.value)}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}