{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination-with-dots",
  "title": "Pagination with Dots",
  "description": "Compact pagination controls with arrows and dots by default, plus optional page numbers.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/navigation/PaginationWithDots.tsx",
      "content": "'use client';\n\nimport { ArrowLeft, ArrowRight } from 'lucide-react';\n\ntype PaginationWithDotsProps = {\n  pageCount?: number;\n  page?: number;\n  showArrows?: boolean;\n  showNumbers?: boolean;\n  onPageChange?: (page: number) => void;\n  className?: string;\n};\n\nexport default function PaginationWithDots({\n  pageCount = 3,\n  page = 0,\n  showArrows = true,\n  showNumbers = false,\n  onPageChange,\n  className = '',\n}: PaginationWithDotsProps) {\n  const totalPages = Math.max(1, pageCount);\n  const activePage = Math.max(0, Math.min(page, totalPages - 1));\n\n  return (\n    <nav\n      className={['flex justify-center gap-2', className].filter(Boolean).join(' ')}\n      aria-label='Pagination'\n    >\n      {showArrows ? (\n        <button\n          type='button'\n          aria-label='Previous page'\n          disabled={activePage === 0}\n          onClick={() => onPageChange?.(activePage - 1)}\n          className='flex h-7 w-7 items-center justify-center rounded-full text-[color:var(--color-muted-foreground,#6b7280)] transition-colors hover:bg-[var(--color-muted,#f3f4f6)] hover:text-[color:var(--color-foreground,#111827)] disabled:cursor-not-allowed disabled:opacity-30'\n        >\n          <ArrowLeft className='h-3.5 w-3.5' aria-hidden='true' />\n        </button>\n      ) : null}\n\n      {Array.from({ length: totalPages }, (_, index) => (\n        <button\n          key={index}\n          type='button'\n          aria-label={`Go to page ${index + 1}`}\n          aria-current={activePage === index ? 'page' : undefined}\n          onClick={() => onPageChange?.(index)}\n          className={[\n            'flex h-7 items-center justify-center rounded-full text-xs font-medium transition-colors',\n            showNumbers ? 'min-w-7 px-2' : 'w-7',\n            activePage === index\n              ? 'bg-[var(--color-primary,#111827)] text-[color:var(--color-primary-foreground,#fff)]'\n              : 'bg-[var(--color-muted,#f3f4f6)] text-[color:var(--color-muted-foreground,#6b7280)] hover:opacity-80 hover:text-[color:var(--color-foreground,#111827)]',\n          ].join(' ')}\n        >\n          {showNumbers ? index + 1 : <span className='h-1.5 w-1.5 rounded-full bg-current' />}\n        </button>\n      ))}\n\n      {showArrows ? (\n        <button\n          type='button'\n          aria-label='Next page'\n          disabled={activePage === totalPages - 1}\n          onClick={() => onPageChange?.(activePage + 1)}\n          className='flex h-7 w-7 items-center justify-center rounded-full text-[color:var(--color-muted-foreground,#6b7280)] transition-colors hover:bg-[var(--color-muted,#f3f4f6)] hover:text-[color:var(--color-foreground,#111827)] disabled:cursor-not-allowed disabled:opacity-30'\n        >\n          <ArrowRight className='h-3.5 w-3.5' aria-hidden='true' />\n        </button>\n      ) : null}\n    </nav>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/navigation/PaginationWithDots.tsx"
    }
  ],
  "categories": [
    "navigation"
  ],
  "type": "registry:component"
}