{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "type": "registry:ui",
  "title": "Pagination",
  "description": "Notebook page numbers, the current one circled.",
  "categories": [
    "core"
  ],
  "files": [
    {
      "path": "ui/pagination.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nconst type = { fontFamily: \"var(--font-type, 'Courier New', ui-monospace, monospace)\" };\n\n/** Page numbers like the corner of a notebook; the current page is circled in pen. */\nexport function Pagination({ className = \"\", ...props }: React.HTMLAttributes<HTMLElement>) {\n  return <nav role=\"navigation\" aria-label=\"pagination\" className={`flex w-full justify-center ${className}`} {...props} />;\n}\n\nexport function PaginationContent({ className = \"\", ...props }: React.HTMLAttributes<HTMLUListElement>) {\n  return <ul className={`flex items-center gap-1 ${className}`} {...props} />;\n}\n\nexport function PaginationItem(props: React.LiHTMLAttributes<HTMLLIElement>) {\n  return <li {...props} />;\n}\n\nexport function PaginationLink({\n  isActive,\n  className = \"\",\n  style,\n  children,\n  ...props\n}: React.AnchorHTMLAttributes<HTMLAnchorElement> & { isActive?: boolean }) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      className={`relative inline-flex h-9 min-w-9 cursor-pointer items-center justify-center rounded-full px-2 text-[14px] tabular-nums text-(--ink) outline-none transition-colors hover:bg-(--paper-sunk) focus-visible:ring-2 focus-visible:ring-(--pen) ${\n        isActive ? \"font-bold\" : \"text-(--ink-muted)\"\n      } ${className}`}\n      style={{ ...type, ...style }}\n      {...props}\n    >\n      {children}\n      {isActive && (\n        <svg viewBox=\"0 0 40 40\" aria-hidden className=\"pointer-events-none absolute -inset-0.5 overflow-visible text-(--pen)\">\n          <path\n            d=\"M 22 5 C 9 4, 3 13, 5 23 C 7 33, 20 37, 29 33 C 37 29, 38 17, 32 10 C 27 5, 18 4, 12 8\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2.2\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      )}\n    </a>\n  );\n}\n\nexport function PaginationPrevious({ className = \"\", children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {\n  return (\n    <PaginationLink aria-label=\"Go to previous page\" className={`gap-1 px-3 text-[11.5px] uppercase tracking-[0.14em] ${className}`} {...props}>\n      ‹ {children ?? \"Prev\"}\n    </PaginationLink>\n  );\n}\n\nexport function PaginationNext({ className = \"\", children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {\n  return (\n    <PaginationLink aria-label=\"Go to next page\" className={`gap-1 px-3 text-[11.5px] uppercase tracking-[0.14em] ${className}`} {...props}>\n      {children ?? \"Next\"} ›\n    </PaginationLink>\n  );\n}\n\nexport function PaginationEllipsis({ className = \"\", ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span aria-hidden className={`inline-flex h-9 w-9 items-center justify-center text-(--ink-faint) ${className}`} style={type} {...props}>\n      …\n    </span>\n  );\n}\n"
    }
  ]
}