fix: type check from pagination component.

Author: SupakornNetsuwan

examples/ui-playground/src/app/playground/shadcn/pagination-section.tsx

@@ -194,14 +194,13 @@ function WithEllipsisPagination() {
     <div className="space-y-4">
       <Pagination>
         <PaginationContent>
-          <PaginationItem>
+          <PaginationItem disabled={currentPage === 1}>
             <PaginationPrevious
               href="#"
               onClick={(e) => {
                 e.preventDefault()
                 setCurrentPage(Math.max(1, currentPage - 1))
               }}
-              className={currentPage === 1 ? 'pointer-events-none opacity-50' : ''}
             />
           </PaginationItem>
 
@@ -261,14 +260,13 @@ function WithEllipsisPagination() {
             </>
           )}
 
-          <PaginationItem>
+          <PaginationItem disabled={currentPage === totalPages}>
             <PaginationNext
               href="#"
               onClick={(e) => {
                 e.preventDefault()
                 setCurrentPage(Math.min(totalPages, currentPage + 1))
               }}
-              className={currentPage === totalPages ? 'pointer-events-none opacity-50' : ''}
             />
           </PaginationItem>
         </PaginationContent>

packages/ui/src/components/primitives/pagination.tsx

@@ -4,8 +4,9 @@ import * as React from 'react'
 import { ArrowLeftIcon, ArrowRightIcon, DotsThreeIcon } from '@phosphor-icons/react'
 import { Slot } from '@radix-ui/react-slot'
 import { useControllableState } from '@radix-ui/react-use-controllable-state'
+import type { VariantProps } from 'class-variance-authority'
 
-import { type Button, buttonVariants } from './button'
+import { buttonVariants } from './button'
 import { ButtonGroup, buttonGroupVariants } from './button-group'
 import {
   Select,
@@ -41,13 +42,20 @@ function PaginationContent({ className, ...props }: React.ComponentProps<typeof
   )
 }
 
+interface PaginationItemProps
+  extends React.ComponentProps<typeof Slot>,
+    VariantProps<typeof buttonVariants> {
+  isActive?: boolean
+  disabled?: boolean
+}
+
 function PaginationItem({
   className,
   variant = 'outline',
   size = 'icon',
   isActive,
   ...props
-}: { isActive?: boolean } & React.ComponentProps<typeof Button>) {
+}: PaginationItemProps) {
   return (
     <Slot
       {...props}