@loke/design-system/dist/components/pagination/index.mjs

A design system with individually importable components

import{buttonVariants}from"@loke/design-system/button";import{cn}from"@loke/design-system/cn";import{ChevronLeft,ChevronRight,Ellipsis}from"@loke/icons";import{forwardRef}from"react";import{jsx,jsxs}from"react/jsx-runtime";var Pagination=({className,...props})=>jsx("nav",{"aria-label":"pagination",className:cn("mx-auto flex w-full justify-center",className),...props});Pagination.displayName="Pagination";var PaginationContent=forwardRef(({className,...props},ref)=>jsx("ul",{className:cn("flex flex-row items-center gap-1",className),ref,...props}));PaginationContent.displayName="PaginationContent";var PaginationItem=forwardRef(({className,...props},ref)=>jsx("li",{className:cn("",className),ref,...props}));PaginationItem.displayName="PaginationItem";var PaginationLink=({className,isActive,size="sm",disabled,...props})=>jsx("a",{"aria-current":isActive?"page":void 0,className:cn(buttonVariants({size,variant:isActive?"outline":"ghost"}),disabled&&"pointer-events-none opacity-50",className),...props});PaginationLink.displayName="PaginationLink";var PaginationPrevious=({className,...props})=>jsxs(PaginationLink,{"aria-label":"Go to previous page",className:cn("gap-1 pl-2.5",className),size:"default",...props,children:[jsx(ChevronLeft,{className:"h-4 w-4"}),jsx("span",{children:"Previous"})]});PaginationPrevious.displayName="PaginationPrevious";var PaginationNext=({className,...props})=>jsxs(PaginationLink,{"aria-label":"Go to next page",className:cn("gap-1 pr-2.5",className),size:"default",...props,children:[jsx("span",{children:"Next"}),jsx(ChevronRight,{className:"h-4 w-4"})]});PaginationNext.displayName="PaginationNext";var PaginationEllipsis=({className,...props})=>jsxs("span",{"aria-hidden":!0,className:cn("flex h-9 w-9 items-center justify-center",className),...props,children:[jsx(Ellipsis,{className:"h-4 w-4"}),jsx("span",{className:"sr-only",children:"More pages"})]});PaginationEllipsis.displayName="PaginationEllipsis";export{PaginationPrevious,PaginationNext,PaginationLink,PaginationItem,PaginationEllipsis,PaginationContent,Pagination};