{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "description": "Pagination with page navigation, next and previous links.",
  "dependencies": [
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/button.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/pagination.jsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/registry/optics/button\";\nimport {\n\tChevronLeftIcon,\n\tChevronRightIcon,\n\tMoreHorizontalIcon,\n} from \"lucide-react\";\n\nfunction Pagination({ className = \"\", ...props }) {\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 }) {\n\treturn (\n\t\t<ul\n\t\t\tdata-slot=\"pagination-content\"\n\t\t\tclassName={cn(\"gap-0.5 flex items-center\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction PaginationItem({ ...props } = {}) {\n\treturn <li data-slot=\"pagination-item\" {...props} />;\n}\n\nfunction PaginationLink({\n\tclassName = \"\",\n\tisActive = false,\n\tsize = \"icon\",\n\t...props\n}) {\n\treturn (\n\t\t<Button\n\t\t\tvariant={isActive ? \"raised\" : \"ghost\"}\n\t\t\tsize={size}\n\t\t\tclassName={cn(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\t{...props}\n\t\t\t\t/>\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction PaginationPrevious({ className = \"\", ...props }) {\n\treturn (\n\t\t<PaginationLink\n\t\t\taria-label=\"Go to previous page\"\n\t\t\tsize=\"default\"\n\t\t\tclassName={cn(\"pl-2!\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ChevronLeftIcon data-icon=\"inline-start\" />\n\t\t\t<span className=\"hidden sm:block\">Previous</span>\n\t\t</PaginationLink>\n\t);\n}\n\nfunction PaginationNext({ className = \"\", ...props }) {\n\treturn (\n\t\t<PaginationLink\n\t\t\taria-label=\"Go to next page\"\n\t\t\tsize=\"default\"\n\t\t\tclassName={cn(\"pr-2!\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"hidden sm:block\">Next</span>\n\t\t\t<ChevronRightIcon data-icon=\"inline-end\" />\n\t\t</PaginationLink>\n\t);\n}\n\nfunction PaginationEllipsis({ className = \"\", ...props }) {\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\"size-7 items-center justify-center [&_svg:not([class*='size-'])]:size-3.5 flex\",\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\nPagination.displayName = \"Pagination\";\nPaginationContent.displayName = \"PaginationContent\";\nPaginationEllipsis.displayName = \"PaginationEllipsis\";\nPaginationItem.displayName = \"PaginationItem\";\nPaginationLink.displayName = \"PaginationLink\";\nPaginationNext.displayName = \"PaginationNext\";\nPaginationPrevious.displayName = \"PaginationPrevious\";\n\nexport {\n\tPagination,\n\tPaginationContent,\n\tPaginationEllipsis,\n\tPaginationItem,\n\tPaginationLink,\n\tPaginationNext,\n\tPaginationPrevious,\n};\n",
      "type": "registry:component",
      "target": "components/optics/pagination.jsx"
    }
  ],
  "type": "registry:component"
}