{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "streak-calendar",
  "type": "registry:ui",
  "title": "Streak calendar",
  "description": "Streak calendar showing a 28-day grid in seven columns, with active days filled in accent. Useful for habit tracking, learning apps and activity views.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/streak-calendar.tsx",
      "type": "registry:ui",
      "target": "components/ui/streak-calendar.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction StreakCalendar({\n  active = [1, 2, 3, 5, 8, 9, 10, 12, 15, 16],\n  className,\n}: {\n  active?: number[]\n  className?: string\n}) {\n  const days = Array.from({ length: 28 }, (_, i) => i + 1)\n  return (\n    <div data-slot=\"streak-calendar\" className={cn(\"space-y-2\", className)}>\n      <p className=\"text-xs font-medium text-fg\">28-day streak</p>\n      <div className=\"grid grid-cols-7 gap-1.5\" role=\"img\" aria-label=\"Activity streak calendar\">\n        {days.map((d) => (\n          <div\n            key={d}\n            className={cn(\n              \"aspect-square rounded-md border border-border\",\n              active.includes(d) ? \"bg-accent border-accent/40\" : \"bg-sunken\"\n            )}\n            title={`Day ${d}`}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\nexport { StreakCalendar }\n"
    }
  ]
}