{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "description": "Page links: borderless, with the current page filled with the accent color.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme",
    "@cupertinoui/button"
  ],
  "files": [
    {
      "path": "registry/macos/ui/pagination.tsx",
      "content": "import * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon, EllipsisIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/macos/ui/button\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return <nav role=\"navigation\" 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 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 = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\n// A page: borderless, or filled with the accent color when it is the\n// current one.\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"default\" : \"ghost\"}\n      size={size}\n      className={cn(\"tabular-nums\", className)}\n      nativeButton={false}\n      render={<a aria-current={isActive ? \"page\" : undefined} data-slot=\"pagination-link\" data-active={isActive} {...props} />}\n    />\n  )\n}\n\nfunction PaginationPrevious({ className, text = \"Previous\", ...props }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {\n  return (\n    <PaginationLink aria-label=\"Go to previous page\" size=\"default\" className={cn(\"gap-1 pl-1.5!\", className)} {...props}>\n      <ChevronLeftIcon strokeWidth={2.25} />\n      <span className=\"hidden sm:block\">{text}</span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({ className, text = \"Next\", ...props }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {\n  return (\n    <PaginationLink aria-label=\"Go to next page\" size=\"default\" className={cn(\"gap-1 pr-1.5!\", className)} {...props}>\n      <span className=\"hidden sm:block\">{text}</span>\n      <ChevronRightIcon strokeWidth={2.25} />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span aria-hidden data-slot=\"pagination-ellipsis\" className={cn(\"flex size-6 items-center justify-center text-mac-label-secondary [&_svg:not([class*='size-'])]:size-3.5\", className)} {...props}>\n      <EllipsisIcon />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}