{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-pagination-3",
  "description": "Pagination with select, and previous and next buttons",
  "registryDependencies": [
    "@coss/button",
    "@coss/pagination",
    "@coss/select"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-pagination-3.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\ntype PaginationProps = {\n  currentPage?: number;\n  totalPages?: number;\n  totalResults: number;\n  resultsPerPage?: number;\n};\n\nexport default function Particle({\n  currentPage: initialPage = 1,\n  totalPages = 10,\n  totalResults,\n  resultsPerPage = 10,\n}: PaginationProps) {\n  const [currentPage, setCurrentPage] = useState(initialPage);\n  const resultRanges = Array.from({ length: totalPages }, (_, i) => {\n    const start = i * resultsPerPage + 1;\n    const end = Math.min((i + 1) * resultsPerPage, totalResults);\n    const pageNum = i + 1;\n    return { label: `${start}-${end}`, value: pageNum };\n  });\n\n  return (\n    <div className=\"flex items-center justify-between gap-2\">\n      {/* Results range selector */}\n      <div className=\"flex items-center gap-2 whitespace-nowrap\">\n        <p className=\"text-muted-foreground text-sm\">Viewing</p>\n        <Select\n          items={resultRanges}\n          onValueChange={(value) => setCurrentPage(value as number)}\n          value={currentPage}\n        >\n          <SelectTrigger\n            aria-label=\"Select result range\"\n            className=\"w-fit min-w-none\"\n            size=\"sm\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectPopup>\n            {resultRanges.map(({ label, value }) => (\n              <SelectItem key={value} value={value}>\n                {label}\n              </SelectItem>\n            ))}\n          </SelectPopup>\n        </Select>\n        <p className=\"text-muted-foreground text-sm\">\n          of{\" \"}\n          <strong className=\"font-medium text-foreground\">\n            {totalResults}\n          </strong>{\" \"}\n          results\n        </p>\n      </div>\n\n      {/* Pagination */}\n      <div>\n        <Pagination>\n          <PaginationContent className=\"w-full justify-between gap-2\">\n            <PaginationItem>\n              <PaginationPrevious\n                className=\"sm:*:[svg]:hidden\"\n                render={\n                  <Button\n                    disabled={currentPage === 1 ? true : undefined}\n                    onClick={() =>\n                      currentPage > 1 && setCurrentPage(currentPage - 1)\n                    }\n                    size=\"sm\"\n                    variant=\"outline\"\n                  />\n                }\n              />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationNext\n                className=\"sm:*:[svg]:hidden\"\n                render={\n                  <Button\n                    disabled={currentPage === totalPages ? true : undefined}\n                    onClick={() =>\n                      currentPage < totalPages &&\n                      setCurrentPage(currentPage + 1)\n                    }\n                    size=\"sm\"\n                    variant=\"outline\"\n                  />\n                }\n              />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full"
  },
  "categories": [
    "pagination",
    "select"
  ],
  "type": "registry:block"
}