{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pager-dots",
  "title": "Pager dots",
  "description": "page indicator · HorizontalPager renders them for you",
  "dependencies": [
    "cn@^0.4.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/pager-dots.tsx",
      "content": "import { cn } from 'cn';\n\ntype Props = { count: number; activeIndex: number; className?: string };\n\n/** Page indicator for pagers and intro sliders. Active dot is a short bar. */\nexport function PagerDots({ count, activeIndex, className }: Props) {\n  return (\n    <div role=\"img\" aria-label={`Page ${activeIndex + 1} of ${count}`} className={cn('flex items-center justify-center gap-1.5', className)}>\n      {Array.from({ length: count }).map((_, i) => (\n        <span key={i} className={cn('h-1.5 rounded-full transition-[width] motion-reduce:transition-none', i === activeIndex ? 'bg-foreground w-4' : 'bg-border w-1.5')} />\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/pager-dots.tsx"
    }
  ],
  "meta": {
    "exports": [
      "PagerDots"
    ],
    "api": "<PagerDots count activeIndex />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "navigation"
  ],
  "type": "registry:component"
}