{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/pagination/pagination.tsx",
      "content": "import * as React from 'react'\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, MoreHorizontal } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\n/**\n * Native React port of the Vue (reka-ui) pagination. reka-ui's PaginationRoot\n * owns the page-window/ellipsis logic and exposes it through slot props; React\n * (radix) has no pagination primitive, so — following shadcn-react — these are\n * presentational parts. The caller drives `currentPage` and renders the page\n * items. The Tailwind classes carried by the Vue parts are preserved 1:1.\n */\n\nconst Pagination = ({ className, 'aria-label': ariaLabel, ...props }: React.ComponentPropsWithoutRef<'nav'>) => (\n  <nav\n    aria-label={ariaLabel ?? 'Pagination'}\n    data-uipkge=\"\"\n    data-slot=\"pagination\"\n    className={cn('flex items-center gap-1', className)}\n    {...props}\n  />\n)\nPagination.displayName = 'Pagination'\n\nconst PaginationList = React.forwardRef<HTMLUListElement, React.ComponentPropsWithoutRef<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-uipkge=\"\"\n      data-slot=\"pagination-list\"\n      className={cn('flex items-center gap-1', className)}\n      {...props}\n    />\n  ),\n)\nPaginationList.displayName = 'PaginationList'\n\nconst PaginationListItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li ref={ref} data-uipkge=\"\" data-slot=\"pagination-list-item\" className={cn('shrink-0', className)} {...props} />\n  ),\n)\nPaginationListItem.displayName = 'PaginationListItem'\n\nconst PaginationFirst = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'>>(\n  ({ children, ...props }, ref) => (\n    <button ref={ref} type=\"button\" aria-label=\"Go to first page\" {...props}>\n      {children ?? <ChevronsLeft className=\"size-4\" aria-hidden=\"true\" />}\n    </button>\n  ),\n)\nPaginationFirst.displayName = 'PaginationFirst'\n\nconst PaginationPrev = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'>>(\n  ({ children, ...props }, ref) => (\n    <button ref={ref} type=\"button\" aria-label=\"Go to previous page\" {...props}>\n      {children ?? <ChevronLeft className=\"size-4\" aria-hidden=\"true\" />}\n    </button>\n  ),\n)\nPaginationPrev.displayName = 'PaginationPrev'\n\nconst PaginationNext = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'>>(\n  ({ children, ...props }, ref) => (\n    <button ref={ref} type=\"button\" aria-label=\"Go to next page\" {...props}>\n      {children ?? <ChevronRight className=\"size-4\" aria-hidden=\"true\" />}\n    </button>\n  ),\n)\nPaginationNext.displayName = 'PaginationNext'\n\nconst PaginationLast = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'>>(\n  ({ children, ...props }, ref) => (\n    <button ref={ref} type=\"button\" aria-label=\"Go to last page\" {...props}>\n      {children ?? <ChevronsRight className=\"size-4\" aria-hidden=\"true\" />}\n    </button>\n  ),\n)\nPaginationLast.displayName = 'PaginationLast'\n\nconst PaginationEllipsis = ({ children, ...props }: React.ComponentPropsWithoutRef<'span'>) => (\n  <span aria-hidden=\"true\" {...props}>\n    {children ?? <MoreHorizontal className=\"size-4\" aria-hidden=\"true\" />}\n  </span>\n)\nPaginationEllipsis.displayName = 'PaginationEllipsis'\n\nexport {\n  Pagination,\n  PaginationList,\n  PaginationListItem,\n  PaginationFirst,\n  PaginationPrev,\n  PaginationNext,\n  PaginationLast,\n  PaginationEllipsis,\n}\n",
      "type": "registry:ui",
      "target": "~/components/ui/pagination/pagination.tsx"
    },
    {
      "path": "packages/registry-react/components/pagination/index.ts",
      "content": "export {\n  Pagination,\n  PaginationList,\n  PaginationListItem,\n  PaginationFirst,\n  PaginationPrev,\n  PaginationNext,\n  PaginationLast,\n  PaginationEllipsis,\n} from './pagination'\n",
      "type": "registry:ui",
      "target": "~/components/ui/pagination/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Page-number bar with previous/next, ellipsis collapse, and a configurable visible-window size. Pair with a data-table or any paged list.",
  "categories": [
    "navigation"
  ]
}