{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "description": "Crawlable pagination links with a page-range helper.",
  "dependencies": [
    "lucide-react",
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/pagination.tsx",
      "content": "import * as React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Pages to show for `current` of `total`: always the first and last, `siblings` around the current one,\n * and `\"…\"` for the gaps. e.g. `pageRange(6, 20)` → `[1, \"…\", 5, 6, 7, \"…\", 20]`.\n */\nfunction pageRange(current: number, total: number, siblings = 1): (number | \"…\")[] {\n  const start = Math.max(2, current - siblings);\n  const end = Math.min(total - 1, current + siblings);\n  const pages: (number | \"…\")[] = [1];\n  if (start > 2) pages.push(\"…\");\n  for (let p = start; p <= end; p++) pages.push(p);\n  if (end < total - 1) pages.push(\"…\");\n  if (total > 1) pages.push(total);\n  return pages;\n}\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"Pagination\" data-slot=\"pagination\" className={cn(\"mx-auto flex w-full justify-center\", className)} {...props} />;\n}\n\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return <ul data-slot=\"pagination-content\" className={cn(\"flex flex-row items-center gap-1\", className)} {...props} />;\n}\n\nfunction PaginationItem(props: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = React.ComponentProps<\"a\"> & { isActive?: boolean; asChild?: boolean };\n\n/** Use real links (`href=\"?page=3\"`) so every page is crawlable; `asChild` takes your router's Link. */\nfunction PaginationLink({ className, isActive, asChild, ...props }: PaginationLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <Comp\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        \"inline-flex h-ctl-sm min-w-ctl-sm items-center justify-center gap-1 rounded-md px-2 font-mono text-[0.8125rem] tabular-nums outline-none transition-[background-color,color,box-shadow] duration-150 hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 data-[active=true]:bg-card data-[active=true]:text-foreground data-[active=true]:shadow-raised data-[active=true]:ring-1 data-[active=true]:ring-border [&_svg]:size-4\",\n        !isActive && \"text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationPrevious({ className, children = \"Previous\", ...props }: PaginationLinkProps) {\n  return (\n    <PaginationLink aria-label=\"Go to previous page\" className={cn(\"px-2.5 font-sans\", className)} {...props}>\n      <ChevronLeftIcon />\n      <span className=\"hidden sm:block\">{children}</span>\n    </PaginationLink>\n  );\n}\n\nfunction PaginationNext({ className, children = \"Next\", ...props }: PaginationLinkProps) {\n  return (\n    <PaginationLink aria-label=\"Go to next page\" className={cn(\"px-2.5 font-sans\", className)} {...props}>\n      <span className=\"hidden sm:block\">{children}</span>\n      <ChevronRightIcon />\n    </PaginationLink>\n  );\n}\n\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span aria-hidden=\"true\" data-slot=\"pagination-ellipsis\" className={cn(\"flex size-ctl-sm items-center justify-center text-muted-foreground\", className)} {...props}>\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, pageRange };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/pagination",
  "categories": [
    "navigation"
  ],
  "type": "registry:ui"
}