{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "achievement-grid",
  "title": "Achievement Grid",
  "description": "Responsive React achievement grid for displaying collections of badges with progress and rarity across breakpoints. Ideal achievement UI design for galleries and showcases in consumer apps. Open source, built on shadcn/ui + Tailwind.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "achievement-badge"
  ],
  "files": [
    {
      "path": "registry/trophy/ui/achievement-grid.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { AchievementBadge } from \"@/components/ui/achievement-badge\"\n\n// Types (inlined - only fields used by this component)\ninterface Achievement {\n  id: string\n  name: string\n  trigger: \"metric\" | \"api\" | \"streak\"\n  badgeUrl?: string | null\n  progress?: number\n  rarity?: number\n}\n\ninterface UserAchievement extends Achievement {\n  achievedAt: string | null // null = locked\n}\n\n// Variants\nconst achievementGridVariants = cva(\"grid\", {\n  variants: {\n    columns: {\n      2: \"grid-cols-2\",\n      3: \"grid-cols-3\",\n      4: \"grid-cols-4\",\n      auto: \"grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5\",\n    },\n    gap: {\n      sm: \"gap-2\",\n      default: \"gap-4\",\n      lg: \"gap-6\",\n    },\n  },\n  defaultVariants: {\n    columns: \"auto\",\n    gap: \"default\",\n  },\n})\n\n// Badge size mapping\n// Props\ninterface AchievementGridProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof achievementGridVariants> {\n  /** Array of achievements */\n  achievements: UserAchievement[]\n  /** Size of achievement badges */\n  badgeSize?: \"sm\" | \"default\" | \"lg\"\n  /** Callback when achievement clicked */\n  onAchievementClick?: (achievement: UserAchievement) => void\n}\n\nconst AchievementGrid = React.forwardRef<HTMLDivElement, AchievementGridProps>(\n  (\n    {\n      className,\n      columns,\n      gap,\n      achievements,\n      badgeSize = \"default\",\n      onAchievementClick,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"list\"\n        aria-label=\"Achievements\"\n        className={cn(achievementGridVariants({ columns, gap }), className)}\n        {...props}\n      >\n        {achievements.map((achievement) => {\n          return (\n            <AchievementBadge\n              key={achievement.id}\n              achievement={achievement}\n              badgeSize={badgeSize}\n              onAchievementClick={onAchievementClick}\n            />\n          )\n        })}\n      </div>\n    )\n  }\n)\nAchievementGrid.displayName = \"AchievementGrid\"\n\nexport { AchievementGrid, achievementGridVariants }\nexport type { AchievementGridProps, Achievement, UserAchievement }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}