{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "description": "Page navigation with previous/next, page links and ellipsis.",
  "dependencies": [
    "lucide-react@^1.48.0"
  ],
  "registryDependencies": [
    "https://rdf.dev.360online.com/r/button.json"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/pagination/pagination.tsx",
      "content": "import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react'\nimport type * as React from 'react'\n\nimport { Button } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\n\nfunction Pagination({ className, ...props }: React.ComponentProps<'nav'>) {\n\treturn (\n\t\t<nav\n\t\t\trole=\"navigation\"\n\t\t\taria-label=\"pagination\"\n\t\t\tdata-slot=\"pagination\"\n\t\t\tclassName={cn('mx-auto flex w-full justify-center', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {\n\treturn (\n\t\t<ul\n\t\t\tdata-slot=\"pagination-content\"\n\t\t\tclassName={cn('group/pagination flex items-center gap-0.5', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<'li'>) {\n\treturn <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n\tisActive?: boolean\n\t/** Total page count. When set, small screens show only the active link as \"current / total\" and hide the other page links and ellipses. */\n\ttotal?: number\n} & Pick<React.ComponentProps<typeof Button>, 'size'> &\n\tReact.ComponentProps<'a'>\n\nfunction PaginationLink({ className, isActive, size = 'icon', total, children, ...props }: PaginationLinkProps) {\n\tconst compact = total !== undefined\n\tconst showTotal = isActive && compact\n\treturn (\n\t\t<Button\n\t\t\tvariant={isActive ? 'outline' : 'ghost'}\n\t\t\tsize={size}\n\t\t\tclassName={cn(compact && !isActive && 'max-sm:hidden', showTotal && 'max-sm:w-auto max-sm:px-3', className)}\n\t\t\tnativeButton={false}\n\t\t\trender={\n\t\t\t\t<a\n\t\t\t\t\taria-current={isActive ? 'page' : undefined}\n\t\t\t\t\tdata-slot=\"pagination-link\"\n\t\t\t\t\tdata-active={isActive}\n\t\t\t\t\tdata-compact={compact || undefined}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t\t{showTotal && <span className=\"ms-1 sm:hidden\">/ {total}</span>}\n\t\t\t\t</a>\n\t\t\t}\n\t\t/>\n\t)\n}\n\nfunction PaginationPrevious({\n\tclassName,\n\ttext = 'Previous',\n\t...props\n}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {\n\treturn (\n\t\t<PaginationLink aria-label=\"Go to previous page\" size=\"default\" className={cn('pl-1.5!', className)} {...props}>\n\t\t\t<ChevronLeftIcon data-icon=\"inline-start\" />\n\t\t\t<span className=\"hidden sm:block\">{text}</span>\n\t\t</PaginationLink>\n\t)\n}\n\nfunction PaginationNext({\n\tclassName,\n\ttext = 'Next',\n\t...props\n}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {\n\treturn (\n\t\t<PaginationLink aria-label=\"Go to next page\" size=\"default\" className={cn('pr-1.5!', className)} {...props}>\n\t\t\t<span className=\"hidden sm:block\">{text}</span>\n\t\t\t<ChevronRightIcon data-icon=\"inline-end\" />\n\t\t</PaginationLink>\n\t)\n}\n\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tdata-slot=\"pagination-ellipsis\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex size-10 items-center justify-center max-sm:group-has-data-compact/pagination:hidden [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<MoreHorizontalIcon />\n\t\t\t<span className=\"sr-only\">More pages</span>\n\t\t</span>\n\t)\n}\n\nexport {\n\tPagination,\n\tPaginationContent,\n\tPaginationEllipsis,\n\tPaginationItem,\n\tPaginationLink,\n\tPaginationNext,\n\tPaginationPrevious,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/pagination.tsx"
    }
  ],
  "type": "registry:ui"
}