{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "type": "registry:ui",
  "description": "Navigate through paginated content with page indicators.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "button"
  ],
  "files": [
    {
      "path": "components/ui/pagination.tsx",
      "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement>\r\n\r\nconst Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(\r\n    ({ className, onKeyDown, ...props }, ref) => {\r\n        const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n            onKeyDown?.(event)\r\n            if (event.defaultPrevented) return\r\n\r\n            if (![\"ArrowRight\", \"ArrowLeft\", \"Home\", \"End\"].includes(event.key)) return\r\n\r\n            const items = Array.from(\r\n                event.currentTarget.querySelectorAll<HTMLButtonElement>(\"button:not(:disabled)\")\r\n            )\r\n            if (items.length === 0) return\r\n\r\n            const activeElement = document.activeElement as HTMLElement | null\r\n            const currentIndex = items.findIndex((item) => item === activeElement)\r\n\r\n            let nextIndex = currentIndex\r\n            if (event.key === \"Home\") {\r\n                nextIndex = 0\r\n            } else if (event.key === \"End\") {\r\n                nextIndex = items.length - 1\r\n            } else if (event.key === \"ArrowRight\") {\r\n                nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % items.length\r\n            } else if (event.key === \"ArrowLeft\") {\r\n                nextIndex = currentIndex < 0 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length\r\n            }\r\n\r\n            items[nextIndex]?.focus()\r\n            event.preventDefault()\r\n        }\r\n\r\n        return (\r\n            <nav\r\n                ref={ref}\r\n                aria-label=\"Pagination\"\r\n                className={cn(\"flex items-center justify-center border-2 border-black rounded-base\", className)}\r\n                onKeyDown={handleKeyDown}\r\n                {...props}\r\n            />\r\n        )\r\n    }\r\n)\r\nPagination.displayName = \"Pagination\"\r\n\r\nexport type PaginationItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\r\n    isActive?: boolean\r\n}\r\n\r\nconst PaginationItem = React.forwardRef<HTMLButtonElement, PaginationItemProps>(\r\n    ({ className, isActive, ...props }, ref) => (\r\n        <button\r\n            ref={ref}\r\n            className={cn(\r\n                \"inline-flex h-10 w-10 items-center justify-center text-sm font-bold transition-colors focus-brutal border-r-2 border-black last:border-r-0\",\r\n                isActive\r\n                    ? \"bg-main text-black\"\r\n                    : \"bg-white text-black hover:bg-neutral-50\",\r\n                className\r\n            )}\r\n            aria-current={isActive ? \"page\" : undefined}\r\n            {...props}\r\n        />\r\n    )\r\n)\r\nPaginationItem.displayName = \"PaginationItem\"\r\n\r\nexport { Pagination, PaginationItem }\r\n",
      "type": "registry:ui"
    }
  ]
}