{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "token-list",
  "type": "registry:ui",
  "title": "Apocalypse Token List",
  "description": "A responsive token list component with header and customizable rows, supporting light and dark modes.",
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/apocalypseui/token-list/token-list.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/registry/apocalypseui/lib/utils\";\nimport { TokenListItem } from \"./token-list-item\";\nimport type { TokenData } from \"./types\";\n\nconst tokenListVariants = cva(\n  \"w-full bg-neutral-100 dark:bg-neutral-800 rounded-2xl shadow-[0px_4px_16px_0px_rgba(0,0,0,0.25)] backdrop-blur-md flex flex-col overflow-hidden\",\n  {\n    variants: {\n      size: {\n        sm: \"text-sm\",\n        md: \"text-base\",\n        lg: \"text-lg\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n);\n\n\nexport interface TokenListProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof tokenListVariants> {\n  tokens: TokenData[];\n  showHeader?: boolean;\n  headerLabels?: {\n    rank?: string;\n    token?: string;\n    price?: string;\n  };\n}\n\nconst TokenList = React.forwardRef<HTMLDivElement, TokenListProps>(\n  (\n    {\n      className,\n      size,\n      tokens,\n      showHeader = true,\n      headerLabels = {\n        rank: \"#\",\n        token: \"Token\",\n        price: \"Price\",\n      },\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn(tokenListVariants({ size }), className)} {...props}>\n        {showHeader && (\n          <div className=\"self-stretch p-2 sm:p-4 rounded-lg flex justify-center items-center gap-1.5 sm:gap-3 overflow-hidden border-b border-neutral-200 dark:border-neutral-700\">\n            <div className=\"w-6 sm:w-8 flex justify-start text-neutral-500 dark:text-neutral-400 text-xs sm:text-sm font-medium font-mono leading-4 flex-shrink-0\">\n              {headerLabels.rank}\n            </div>\n            <div className=\"w-10 sm:w-14 flex-shrink-0\" />\n            <div className=\"flex-1 justify-start text-neutral-500 dark:text-neutral-400 text-xs sm:text-sm font-medium font-mono leading-4\">\n              {headerLabels.token}\n            </div>\n            <div className=\"flex-shrink-0 min-w-[80px] sm:min-w-[120px] text-right justify-start text-neutral-500 dark:text-neutral-400 text-xs sm:text-sm font-medium font-mono leading-4\">\n              {headerLabels.price}\n            </div>\n          </div>\n        )}\n        <div className=\"flex flex-col\">\n          {tokens.map((token, index) => (\n            <TokenListItem\n              key={token.rank || index}\n              token={token}\n              size={size ?? \"md\"}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nTokenList.displayName = \"TokenList\";\n\nexport { TokenList, tokenListVariants };\nexport type { TokenData } from \"./types\";\nexport type { TokenListItemProps } from \"./token-list-item\";\n\n",
      "type": "registry:component"
    },
    {
      "path": "registry/apocalypseui/token-list/token-list-item.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport Image from \"next/image\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/registry/apocalypseui/lib/utils\";\nimport type { TokenData } from \"./types\";\n\nexport type TokenListSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface TokenListItemProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  token: TokenData;\n  size?: TokenListSize;\n}\n\nconst TokenListItem = React.forwardRef<HTMLDivElement, TokenListItemProps>(\n  ({ className, token, size, ...props }, ref) => {\n    const changeType =\n      token.changeType || (token.change >= 0 ? \"positive\" : \"negative\");\n    const changeColor =\n      changeType === \"positive\"\n        ? \"text-emerald-500 dark:text-emerald-500\"\n        : \"text-red-500 dark:text-red-500\";\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"self-stretch p-2 sm:p-4 rounded-lg flex justify-center items-center gap-1.5 sm:gap-3 overflow-hidden hover:bg-neutral-200/50 dark:hover:bg-neutral-700/50 transition-colors\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"w-6 sm:w-8 flex justify-center items-center flex-shrink-0\">\n          <div className=\"w-6 h-6 flex items-center justify-center text-neutral-600 dark:text-neutral-400 text-xs sm:text-sm font-medium font-mono leading-4\">\n            {token.rank}\n          </div>\n        </div>\n\n        <div className=\"w-10 h-10 sm:w-14 sm:h-14 flex-shrink-0 relative flex justify-center items-center\">\n          {token.icon ? (\n            token.icon\n          ) : (\n            <>\n              <Image\n                src=\"https://apocalypseui.com/images/placeholder.png\"\n                alt=\"Token icon\"\n                width={56}\n                height={56}\n                className=\"w-10 h-10 sm:w-14 sm:h-14 rounded-full object-cover\"\n              />\n              <Image\n                src=\"https://apocalypseui.com/images/placeholder-chain.png\"\n                alt=\"Chain icon\"\n                width={20}\n                height={20}\n                className=\"w-4 h-4 sm:w-5 sm:h-5 absolute bottom-0 right-0 rounded-md object-cover\"\n              />\n            </>\n          )}\n        </div>\n\n        <div className=\"flex-1 flex flex-row justify-start items-center gap-2 sm:gap-5 min-w-0\">\n          <div className=\"flex-1 inline-flex flex-col justify-center items-start gap-0.5 min-w-0\">\n            <div className=\"self-stretch justify-start text-neutral-900 dark:text-white text-xs sm:text-base font-medium font-mono leading-4 sm:leading-6 truncate w-full\">\n              {token.name}\n            </div>\n            <div className=\"inline-flex justify-start items-center gap-1.5 sm:gap-2 flex-wrap\">\n              {token.marketCap && (\n                <div className=\"justify-start text-neutral-500 dark:text-neutral-400 text-[10px] sm:text-sm font-medium font-mono leading-4 sm:leading-6\">\n                  {token.marketCap} MC\n                </div>\n              )}\n              {token.holders !== undefined && (\n                <div className=\"flex justify-start items-center gap-1\">\n                  <div className=\"w-1 h-1 bg-emerald-500 rounded-full\" />\n                  <div className=\"justify-start text-neutral-500 dark:text-neutral-400 text-[10px] sm:text-sm font-medium font-mono leading-4 sm:leading-6\">\n                    {token.holders}\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n\n          <div className=\"flex-shrink-0 min-w-[80px] sm:min-w-[120px] inline-flex flex-col justify-center items-end gap-0.5\">\n            <div className=\"self-stretch text-right justify-start text-neutral-900 dark:text-white text-xs sm:text-base font-medium font-mono leading-4 sm:leading-6\">\n              {token.price}\n            </div>\n            <div\n              className={cn(\n                \"self-stretch text-right justify-start text-[10px] sm:text-sm font-normal font-mono leading-4 sm:leading-6\",\n                changeColor\n              )}\n            >\n              {changeType === \"positive\" ? \"+\" : \"\"}\n              {token.change.toFixed(2)}%\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nTokenListItem.displayName = \"TokenListItem\";\n\nexport { TokenListItem };\nexport type { TokenData } from \"./types\";\n",
      "type": "registry:component"
    },
    {
      "path": "registry/apocalypseui/token-list/types.ts",
      "content": "import * as React from \"react\";\n\nexport interface TokenData {\n  rank: number;\n  icon?: React.ReactNode;\n  name: string;\n  marketCap?: string;\n  holders?: number;\n  price: string;\n  change: number;\n  changeType?: \"positive\" | \"negative\";\n}\n\n",
      "type": "registry:component"
    },
    {
      "path": "registry/apocalypseui/lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n",
      "type": "registry:lib"
    }
  ]
}