@catalystsoftware/ui 1.0.5 → 1.0.6

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

@@ -1,622 +0,0 @@
-'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