@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/components/catalyst-ui/x/pagination-x.tsx

@@ -0,0 +1,622 @@
+'use client'
+
+import React, { useId } from 'react'
+import { ChevronLeft, ChevronRight, ChevronFirst, ChevronLast } from 'lucide-react'
+import { cn } from "~/components/catalyst-ui"
+import { 
+  Pagination, 
+  PaginationContent, 
+  PaginationItem, 
+  PaginationLink, 
+  PaginationPrevious, 
+  PaginationNext,
+  PaginationEllipsis
+} from "~/components/catalyst-ui"
+import { Button, buttonVariants } from "~/components/catalyst-ui"
+import { Label } from "~/components/catalyst-ui"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/catalyst-ui"
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/catalyst-ui"
+
+// #region PARENT FUNCTION
+export function PaginationX({ pagination = 'default', ...props }: any) {
+  switch (pagination) {
+    case 'WithIcon':
+      return <WithIcon {...props} />
+    case 'PrimaryButton':
+      return <PrimaryButton {...props} />
+    case 'SecondaryButton':
+      return <SecondaryButton {...props} />
+    case 'Bordered':
+      return <Bordered {...props} />
+    case 'Rounded':
+      return <Rounded {...props} />
+    case 'FirstLast':
+      return <FirstLast {...props} />
+    case 'WithEllipsis':
+      return <WithEllipsis {...props} />
+    case 'Underline':
+      return <Underline {...props} />
+    case 'Card':
+      return <Card {...props} />
+    case 'Numberless':
+      return <Numberless {...props} />
+    case 'NumberlessWithText':
+      return <NumberlessWithText {...props} />
+    case 'Mini':
+      return <Mini {...props} />
+    case 'WithSelect':
+      return <WithSelect {...props} />
+    case 'Table':
+      return <Table {...props} />
+    default:
+      return <DefaultPagination {...props} />
+  }
+}
+// #endregion
+
+// #region SUPPORTING FUNCTIONS
+const DefaultPagination = ({ currentPage = 2, totalPages = 3, className, ...props }: any) => {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+  
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href='#' />
+        </PaginationItem>
+        {pages.map(page => (
+          <PaginationItem key={page}>
+            <PaginationLink href={`#${page}`} isActive={page === currentPage}>
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationNext href='#' />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const WithIcon = ({ currentPage = 2, totalPages = 3, className, ...props }: any) => {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+  
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationLink href='#' aria-label='Go to previous page' size='icon'>
+            <ChevronLeft className='size-4' />
+          </PaginationLink>
+        </PaginationItem>
+        {pages.map(page => (
+          <PaginationItem key={page}>
+            <PaginationLink href={`#${page}`} isActive={page === currentPage}>
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationLink href='#' aria-label='Go to next page' size='icon'>
+            <ChevronRight className='size-4' />
+          </PaginationLink>
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const PrimaryButton = ({ currentPage = 2, totalPages = 3, className, ...props }: any) => {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+  
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href='#' />
+        </PaginationItem>
+        {pages.map(page => (
+          <PaginationItem key={page}>
+            <PaginationLink
+              href={`#${page}`}
+              isActive={page === currentPage}
+              className={cn(
+                page === currentPage && buttonVariants({
+                  variant: 'default',
+                  size: 'icon'
+                }),
+                page === currentPage && 'hover:!text-primary-foreground dark:bg-primary dark:text-primary-foreground dark:hover:text-primary-foreground dark:hover:bg-primary/90 !shadow-none dark:border-transparent'
+              )}
+            >
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationNext href='#' />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const SecondaryButton = ({ currentPage = 2, totalPages = 3, className, ...props }: any) => {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+  
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href='#' />
+        </PaginationItem>
+        {pages.map(page => (
+          <PaginationItem key={page}>
+            <PaginationLink
+              href={`#${page}`}
+              isActive={page === currentPage}
+              className={cn(
+                page === currentPage && 'hover:!text-secondary-foreground !border-none !shadow-none',
+                page === currentPage && buttonVariants({
+                  variant: 'secondary',
+                  size: 'icon'
+                })
+              )}
+            >
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationNext href='#' />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const Bordered = ({ currentPage = 2, totalPages = 3, className, ...props }: any) => {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+  
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent className='gap-0 divide-x overflow-hidden rounded-lg border'>
+        <PaginationItem>
+          <PaginationPrevious href='#' className='rounded-none' />
+        </PaginationItem>
+        {pages.map(page => {
+          const isActive = page === currentPage
+          return (
+            <PaginationItem key={page}>
+              <PaginationLink
+                href={`#${page}`}
+                className={cn(
+                  {
+                    [buttonVariants({
+                      variant: 'default',
+                      className: 'hover:!text-primary-foreground dark:bg-primary dark:text-primary-foreground dark:hover:text-primary-foreground dark:hover:bg-primary/90 dark:border-transparent'
+                    })]: isActive
+                  },
+                  'rounded-none border-none'
+                )}
+                isActive={isActive}
+              >
+                {page}
+              </PaginationLink>
+            </PaginationItem>
+          )
+        })}
+        <PaginationItem>
+          <PaginationNext href='#' className='rounded-none' />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const Rounded = ({ currentPage = 2, totalPages = 3, className, ...props }: any) => {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+  
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href='#' className='rounded-full' />
+        </PaginationItem>
+        {pages.map(page => (
+          <PaginationItem key={page}>
+            <PaginationLink href={`#${page}`} isActive={page === currentPage} className='rounded-full'>
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationNext href='#' className='rounded-full' />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const FirstLast = ({ currentPage = 2, totalPages = 3, className, ...props }: any) => {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+  
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationLink href='#' aria-label='Go to first page' size='icon' className='rounded-full'>
+            <ChevronFirst className='size-4' />
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#' aria-label='Go to previous page' size='icon' className='rounded-full'>
+            <ChevronLeft className='size-4' />
+          </PaginationLink>
+        </PaginationItem>
+        {pages.map(page => (
+          <PaginationItem key={page}>
+            <PaginationLink href={`#${page}`} isActive={page === currentPage} className='rounded-full'>
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationLink href='#' aria-label='Go to next page' size='icon' className='rounded-full'>
+            <ChevronRight className='size-4' />
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#' aria-label='Go to last page' size='icon' className='rounded-full'>
+            <ChevronLast className='size-4' />
+          </PaginationLink>
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const WithEllipsis = ({ currentPage = 2, className, ...props }: any) => {
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href='#' />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#'>1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#' isActive={currentPage === 2}>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PaginationEllipsis />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>8 other pages</p>
+            </TooltipContent>
+          </Tooltip>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href='#' />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const Underline = ({ currentPage = 1, totalPages = 3, className, ...props }: any) => {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+  
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href='#' className='rounded-none' />
+        </PaginationItem>
+        {pages.map(page => (
+          <PaginationItem key={page}>
+            <PaginationLink
+              href={`#${page}`}
+              isActive={page === currentPage}
+              className={cn(
+                'rounded-none',
+                page === currentPage && 'border-primary! border-0 border-b-2 bg-transparent! !shadow-none'
+              )}
+            >
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationNext href='#' className='rounded-none' />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const Card = ({ currentPage = 2, totalPages = 3, className, ...props }: any) => {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+  
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent className='rounded-md border p-1 shadow-xs'>
+        <PaginationItem>
+          <PaginationPrevious href='#' />
+        </PaginationItem>
+        {pages.map(page => (
+          <PaginationItem key={page}>
+            <PaginationLink href={`#${page}`} isActive={page === currentPage}>
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationNext href='#' />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const Numberless = ({ className, ...props }: any) => {
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent className='w-full justify-between'>
+        <PaginationItem>
+          <PaginationPrevious href='#' className='border' />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href='#' className='border' />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const NumberlessWithText = ({ currentPage = 2, totalPages = 5, className, ...props }: any) => {
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent className='w-full justify-between'>
+        <PaginationItem>
+          <PaginationPrevious href='#' className='border' />
+        </PaginationItem>
+        <PaginationItem>
+          <p className='text-muted-foreground text-sm' aria-live='polite'>
+            Page <span className='text-foreground'>{currentPage}</span> of <span className='text-foreground'>{totalPages}</span>
+          </p>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href='#' className='border' />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const Mini = ({ currentPage = 2, totalPages = 5, className, ...props }: any) => {
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationLink href='#' aria-label='Go to previous page' size='icon'>
+            <ChevronLeft className='size-4' />
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <p className='text-muted-foreground text-sm' aria-live='polite'>
+            Page <span className='text-foreground'>{currentPage}</span> of <span className='text-foreground'>{totalPages}</span>
+          </p>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#' aria-label='Go to next page' size='icon'>
+            <ChevronRight className='size-4' />
+          </PaginationLink>
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const WithSelect = ({ className, ...props }: any) => {
+  return (
+    <Pagination className={className} {...props}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationLink href='#' aria-label='Go to first page' size='icon' className='rounded-full'>
+            <ChevronFirst className='size-4' />
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#' aria-label='Go to previous page' size='icon' className='rounded-full'>
+            <ChevronLeft className='size-4' />
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <Select defaultValue={String(1)} aria-label='Select page'>
+            <SelectTrigger id='select-page' className='w-fit whitespace-nowrap' aria-label='Select page'>
+              <SelectValue placeholder='Select page' />
+            </SelectTrigger>
+            <SelectContent>
+              {Array.from({ length: 10 }, (_, i) => i + 1).map(page => (
+                <SelectItem key={page} value={String(page)}>
+                  Page {page}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#' aria-label='Go to next page' size='icon' className='rounded-full'>
+            <ChevronRight className='size-4' />
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#' aria-label='Go to last page' size='icon' className='rounded-full'>
+            <ChevronLast className='size-4' />
+          </PaginationLink>
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const Table = ({ currentPage = 2, totalPages = 3, className, ...props }: any) => {
+  const id = useId()
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+
+  return (
+    <div className='flex w-full flex-wrap items-center justify-between gap-6 max-sm:justify-center'>
+      <div className='flex shrink-0 items-center gap-3'>
+        <Label htmlFor={id}>Rows per page</Label>
+        <Select defaultValue='10'>
+          <SelectTrigger id={id} className='w-fit whitespace-nowrap'>
+            <SelectValue placeholder='Select number of results' />
+          </SelectTrigger>
+          <SelectContent className='[&_*[role=option]]:pr-8 [&_*[role=option]]:pl-2 [&_*[role=option]>span]:right-2 [&_*[role=option]>span]:left-auto'>
+            <SelectItem value='10'>10</SelectItem>
+            <SelectItem value='25'>25</SelectItem>
+            <SelectItem value='50'>50</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className='text-muted-foreground flex grow items-center justify-end whitespace-nowrap max-sm:justify-center'>
+        <p className='text-muted-foreground text-sm whitespace-nowrap' aria-live='polite'>
+          Showing <span className='text-foreground'>1</span> to <span className='text-foreground'>10</span> of{' '}
+          <span className='text-foreground'>100</span> products
+        </p>
+      </div>
+      <Pagination className='w-fit max-sm:mx-0'>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationLink href='#' aria-label='Go to first page' size='icon' className='rounded-full'>
+              <ChevronFirst className='size-4' />
+            </PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href='#' aria-label='Go to previous page' size='icon' className='rounded-full'>
+              <ChevronLeft className='size-4' />
+            </PaginationLink>
+          </PaginationItem>
+          {pages.map(page => (
+            <PaginationItem key={page}>
+              <PaginationLink href={`#${page}`} isActive={page === currentPage} className='rounded-full'>
+                {page}
+              </PaginationLink>
+            </PaginationItem>
+          ))}
+          <PaginationItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <PaginationEllipsis />
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>2 other pages</p>
+              </TooltipContent>
+            </Tooltip>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href='#' aria-label='Go to next page' size='icon' className='rounded-full'>
+              <ChevronRight className='size-4' />
+            </PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href='#' aria-label='Go to last page' size='icon' className='rounded-full'>
+              <ChevronLast className='size-4' />
+            </PaginationLink>
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  )
+}
+// #endregion
+
+// #region DEMO
+export function PaginationXDemo() {
+  return (
+    <div className='space-y-12 p-6 max-w-4xl mx-auto'>
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Default</h3>
+        <PaginationX />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>With Icon</h3>
+        <PaginationX pagination='WithIcon' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Primary Button</h3>
+        <PaginationX pagination='PrimaryButton' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Secondary Button</h3>
+        <PaginationX pagination='SecondaryButton' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Bordered</h3>
+        <PaginationX pagination='Bordered' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Rounded</h3>
+        <PaginationX pagination='Rounded' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>First & Last Navigation</h3>
+        <PaginationX pagination='FirstLast' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>With Ellipsis</h3>
+        <PaginationX pagination='WithEllipsis' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Underline</h3>
+        <PaginationX pagination='Underline' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Card</h3>
+        <PaginationX pagination='Card' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Numberless</h3>
+        <PaginationX pagination='Numberless' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Numberless with Text</h3>
+        <PaginationX pagination='NumberlessWithText' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Mini</h3>
+        <PaginationX pagination='Mini' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>With Select</h3>
+        <PaginationX pagination='WithSelect' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Table Pagination</h3>
+        <PaginationX pagination='Table' />
+      </div>
+    </div>
+  )
+}
+
+// #endregion