{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "leaderboard",
  "title": "leaderboard",
  "description": "leaderboard",
  "dependencies": [
    "react-aria-components",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive"
  ],
  "files": [
    {
      "path": "src/components/ui/leaderboard.tsx",
      "content": "'use client'\n\nimport { Label, type LabelProps } from 'react-aria-components/Label'\nimport { ProgressBar, type ProgressBarProps } from 'react-aria-components/ProgressBar'\nimport { twJoin, twMerge } from 'tailwind-merge'\nimport { cx } from '@/lib/primitive'\n\nexport function Leaderboard({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={twMerge('flex flex-col gap-y-(--leaderboard-gutter,--spacing(4))', className)}\n      {...props}\n    />\n  )\n}\n\nexport function LeaderboardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"leaderboard-header\"\n      className={twMerge(\n        'grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 px-(--gutter) has-data-[slot=card-action]:grid-cols-[1fr_auto]',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function LeaderboardTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"leaderboard-title\"\n      className={twMerge('text-balance font-semibold text-base/6', className)}\n      {...props}\n    />\n  )\n}\n\nexport function LeaderboardAction({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"leaderboard-action\"\n      className={twMerge(\n        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function LeaderboardContent({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"leaderboard-content\"\n      className={twMerge('flex max-h-96 list-none flex-col gap-y-1', className)}\n      {...props}\n    />\n  )\n}\n\ninterface LeaderboardItemProps extends ProgressBarProps {\n  onAction?: () => void\n}\n\nexport function LeaderboardItem({\n  minValue = 0,\n  className,\n  children,\n  onAction,\n  ...props\n}: LeaderboardItemProps) {\n  return (\n    <li className=\"group\" data-slot=\"leaderboard-item\">\n      <ProgressBar\n        onClick={onAction}\n        minValue={minValue}\n        className={cx(\n          'relative cursor-default overflow-hidden rounded-md px-1.5 py-1 text-sm/6 outline-hidden focus-visible:ring focus-visible:ring-ring',\n          \"[&_svg:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {(values) => (\n          <>\n            <span className=\"relative z-2 flex items-center justify-between font-medium\">\n              {typeof children === 'function' ? children(values) : children}\n            </span>\n            <span\n              className={twJoin(\n                'absolute inset-y-0 start-0 z-1 rounded-e-md bg-secondary/60',\n                onAction ? 'cursor-default group-hover:bg-secondary' : ''\n              )}\n              style={{ width: `${values.percentage}%` }}\n            />\n          </>\n        )}\n      </ProgressBar>\n    </li>\n  )\n}\n\nexport function LeaderboardStart({ className, ...props }: LabelProps) {\n  return (\n    <Label\n      data-slot=\"leaderboard-start\"\n      className={twMerge('flex items-center gap-x-2', className)}\n      {...props}\n    />\n  )\n}\n\nexport function LeaderboardEnd({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"leaderboard-start\" className={twMerge('tabular-nums', className)} {...props} />\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}