@catalystsoftware/ui 1.0.5 → 1.0.6

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

@@ -1,574 +0,0 @@
-/**import { TableCaption ,Table, TableHeader,TableRow,TableHead,TableBody, TableCell, TableFooter   } from "../primitives"
-
-
-
-const TableDemo = () => {
-  return (
-    <Table>
-      <TableCaption>Default table.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead className='w-25'>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className='text-right'>Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map(invoice => (
-          <TableRow key={invoice.invoice}>
-            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className='text-right'>$2,500.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  )
-}
-
-const TableBorderDemo = () => {
-  return (
-    <Table className='border'>
-      <TableCaption>Bordered table.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead className='w-25'>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className='text-right'>Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map(invoice => (
-          <TableRow key={invoice.invoice}>
-            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className='text-right'>$2,500.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  )
-}
-
-const TableRoundedCornerDemo = () => {
-  return (
-    <div className='w-full'>
-      <div className='overflow-hidden rounded-md border'>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className='w-25'>Invoice</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Method</TableHead>
-              <TableHead className='text-right'>Amount</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {invoices.map(invoice => (
-              <TableRow key={invoice.invoice}>
-                <TableCell className='font-medium'>{invoice.invoice}</TableCell>
-                <TableCell>{invoice.paymentStatus}</TableCell>
-                <TableCell>{invoice.paymentMethod}</TableCell>
-                <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TableCell colSpan={3}>Total</TableCell>
-              <TableCell className='text-right'>$2,500.00</TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Rounded corner table</p>
-    </div>
-  )
-}
-
-const TableWithVerticalLinesDemo = () => {
-  return (
-    <Table>
-      <TableCaption>Table with vertical lines.</TableCaption>
-      <TableHeader>
-        <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
-          <TableHead className='w-25'>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className='text-right'>Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map(invoice => (
-          <TableRow key={invoice.invoice} className='*:border-border [&>:not(:last-child)]:border-r'>
-            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className='text-right'>$2,500.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  )
-}
-
-const TableWithOutBorderDemo = () => {
-  return (
-    <Table>
-      <TableCaption>Table without border.</TableCaption>
-      <TableHeader>
-        <TableRow className='bg-muted/50 border-none'>
-          <TableHead className='w-25'>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className='text-right'>Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map(invoice => (
-          <TableRow key={invoice.invoice} className='border-none'>
-            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter className='border-none'>
-        <TableRow>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className='text-right'>$2,500.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  )
-}
-
-const StripedRowsTableDemo = () => {
-  return (
-    <Table>
-      <TableCaption>Striped rows table.</TableCaption>
-      <TableHeader>
-        <TableRow className='hover:bg-transparent'>
-          <TableHead className='w-25'>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className='text-right'>Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map(invoice => (
-          <TableRow key={invoice.invoice} className='odd:bg-muted/50 odd:hover:bg-muted/50 hover:bg-transparent'>
-            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter className='bg-transparent'>
-        <TableRow className='hover:bg-transparent'>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className='text-right'>$2,500.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  )
-}
-
-const StrippedColumnTableDemo = () => {
-  return (
-    <Table>
-      <TableCaption>Striped columns table.</TableCaption>
-      <TableHeader>
-        <TableRow className='[&_th]:even:bg-muted/50 hover:bg-transparent'>
-          <TableHead className='w-25'>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className='text-right'>Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map(invoice => (
-          <TableRow key={invoice.invoice} className='[&_td]:even:bg-muted/50 hover:bg-transparent'>
-            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter className='bg-transparent'>
-        <TableRow className='hover:bg-transparent'>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className='text-right'>$2,500.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  )
-}
-
-const TableHighlightedRowDemo = () => {
-  return (
-    <Table>
-      <TableCaption>Highlight row table.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead className='w-25'>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className='text-right'>Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map(invoice => (
-          <TableRow
-            key={invoice.invoice}
-            className='nth-3:bg-sky-600/10 nth-3:hover:bg-sky-600/20 nth-3:dark:bg-sky-400/10 nth-3:dark:hover:bg-sky-400/20'
-          >
-            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className='text-right'>$2,500.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  )
-}
-
-const OverflowScrollTableDemo = () => {
-  return (
-    <div className='w-full'>
-      <div className='grid [&>div]:max-h-70 [&>div]:rounded-sm [&>div]:border'>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className='w-25'>Invoice</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Method</TableHead>
-              <TableHead className='text-right'>Amount</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {invoices.map(invoice => (
-              <TableRow key={invoice.invoice}>
-                <TableCell className='font-medium'>{invoice.invoice}</TableCell>
-                <TableCell>{invoice.paymentStatus}</TableCell>
-                <TableCell>{invoice.paymentMethod}</TableCell>
-                <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TableCell colSpan={3}>Total</TableCell>
-              <TableCell className='text-right'>$2,500.00</TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Overflow scroll table</p>
-    </div>
-  )
-}
-
-const StickyHeaderTableDemo = () => {
-  return (
-    <div className='w-full'>
-      <div className='[&>div]:max-h-70 [&>div]:rounded-sm [&>div]:border'>
-        <Table>
-          <TableHeader>
-            <TableRow className='bg-background sticky top-0'>
-              <TableHead className='w-25'>Invoice</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Method</TableHead>
-              <TableHead className='text-right'>Amount</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {invoices.map(invoice => (
-              <TableRow key={invoice.invoice}>
-                <TableCell className='font-medium'>{invoice.invoice}</TableCell>
-                <TableCell>{invoice.paymentStatus}</TableCell>
-                <TableCell>{invoice.paymentMethod}</TableCell>
-                <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TableCell colSpan={3}>Total</TableCell>
-              <TableCell className='text-right'>$2,500.00</TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Sticky header table</p>
-    </div>
-  )
-}
-
-const StickyColumnTableDemo = () => {
-  return (
-    <div className='w-full'>
-      <div className='mx-auto max-w-2xl [&>div]:rounded-sm [&>div]:border'>
-        <Table>
-          <TableHeader>
-            <TableRow className='hover:bg-transparent'>
-              <TableHead className='bg-background sticky left-0'>ID</TableHead>
-              <TableHead className='bg-background sticky left-7.5'>Name</TableHead>
-              <TableHead>Occupation</TableHead>
-              <TableHead>Employer</TableHead>
-              <TableHead>Email</TableHead>
-              <TableHead>Location</TableHead>
-              <TableHead>Last Access</TableHead>
-              <TableHead>Salary</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {invoices.map(invoice => (
-              <TableRow key={invoice.id} className='hover:bg-transparent'>
-                <TableCell className='bg-background sticky left-0 font-medium'>{invoice.id}</TableCell>
-                <TableCell className='bg-background sticky left-7.5'>{invoice.name}</TableCell>
-                <TableCell>{invoice.occupation}</TableCell>
-                <TableCell>{invoice.employer}</TableCell>
-                <TableCell>{invoice.email}</TableCell>
-                <TableCell>{invoice.location}</TableCell>
-                <TableCell>{invoice.lastaccess}</TableCell>
-                <TableCell>{invoice.salary}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Sticky column table</p>
-    </div>
-  )
-}
-
-const VerticalTableDemo = () => {
-  return (
-    <div className='mx-auto w-full max-w-lg'>
-      <div className='overflow-hidden rounded-md border'>
-        <Table>
-          <TableBody>
-            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
-              <TableCell className='bg-muted/50 py-2 font-medium'>Product Name</TableCell>
-              <TableCell className='py-2'>Iphone 16 PRO</TableCell>
-            </TableRow>
-            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
-              <TableCell className='bg-muted/50 py-2 font-medium'>Serial Number</TableCell>
-              <TableCell className='py-2'>DF121543309KU</TableCell>
-            </TableRow>
-            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
-              <TableCell className='bg-muted/50 py-2 font-medium'>Category</TableCell>
-              <TableCell className='py-2'>Smartphone</TableCell>
-            </TableRow>
-            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
-              <TableCell className='bg-muted/50 py-2 font-medium'>Purchase Date</TableCell>
-              <TableCell className='py-2'>15/06/205</TableCell>
-            </TableRow>
-            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
-              <TableCell className='bg-muted/50 py-2 font-medium'>Warranty Expiry</TableCell>
-              <TableCell className='py-2'>15/06/2026</TableCell>
-            </TableRow>
-            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
-              <TableCell className='bg-muted/50 py-2 font-medium'>Origin</TableCell>
-              <TableCell className='py-2'>China</TableCell>
-            </TableRow>
-            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
-              <TableCell className='bg-muted/50 py-2 font-medium'>Assign User</TableCell>
-              <TableCell className='py-2'>Alice Johnson</TableCell>
-            </TableRow>
-            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
-              <TableCell className='bg-muted/50 py-2 font-medium'>Value</TableCell>
-              <TableCell className='py-2'>$1,120.0</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Vertical table</p>
-    </div>
-  )
-}
-
-const TableWithAvatarDemo = () => {
-  return (
-    <div className='w-full'>
-      <div className='[&>div]:rounded-sm [&>div]:border'>
-        <Table>
-          <TableHeader>
-            <TableRow className='hover:bg-transparent'>
-              <TableHead>Name</TableHead>
-              <TableHead>Email</TableHead>
-              <TableHead>Location</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead className='text-right'>Balance</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.map(item => (
-              <TableRow key={item.id}>
-                <TableCell>
-                  <div className='flex items-center gap-3'>
-                    <Avatar>
-                      <AvatarImage src={item.src} alt={item.fallback} />
-                      <AvatarFallback className='text-xs'>{item.fallback}</AvatarFallback>
-                    </Avatar>
-                    <div className='font-medium'>{item.name}</div>
-                  </div>
-                </TableCell>
-                <TableCell>{item.email}</TableCell>
-                <TableCell>{item.location}</TableCell>
-                <TableCell>{item.status}</TableCell>
-                <TableCell className='text-right'>{item.balance}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Table with avatar</p>
-    </div>
-  )
-}
-
-const TableSelectableRowDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full'>
-      <div className='overflow-hidden rounded-md border'>
-        <Table>
-          <TableHeader>
-            <TableRow className='hover:bg-transparent'>
-              <TableHead>
-                <Checkbox id={id} aria-label='select-all' />
-              </TableHead>
-              <TableHead>Name</TableHead>
-              <TableHead>Email</TableHead>
-              <TableHead>Location</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead className='text-right'>Balance</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.map(item => (
-              <TableRow key={item.id} className='has-data-[state=checked]:bg-muted/50'>
-                <TableCell>
-                  <Checkbox id={`table-checkbox-${item.id}`} aria-label={`user-checkbox-${item.id}`} />
-                </TableCell>
-                <TableCell className='font-medium'>{item.name}</TableCell>
-                <TableCell>{item.email}</TableCell>
-                <TableCell>{item.location}</TableCell>
-                <TableCell>{item.status}</TableCell>
-                <TableCell className='text-right'>{item.balance}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-          <TableFooter className='bg-transparent'>
-            <TableRow className='hover:bg-transparent'>
-              <TableCell colSpan={5}>Total</TableCell>
-              <TableCell className='text-right'>$2,500.00</TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Table with row selection</p>
-    </div>
-  )
-}
-
-const ProductTableDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full'>
-      <div className='[&>div]:rounded-sm [&>div]:border'>
-        <Table>
-          <TableHeader>
-            <TableRow className='hover:bg-transparent'>
-              <TableHead>
-                <Checkbox id={id} aria-label='select-all' />
-              </TableHead>
-              <TableHead>Product</TableHead>
-              <TableHead>Color</TableHead>
-              <TableHead>Category</TableHead>
-              <TableHead>Price</TableHead>
-              <TableHead className='w-0'>Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.map(item => (
-              <TableRow key={item.id} className='has-data-[state=checked]:bg-muted/50'>
-                <TableCell>
-                  <Checkbox id={`table-checkbox-${item.id}`} aria-label={`product-checkbox-${item.id}`} />
-                </TableCell>
-                <TableCell>
-                  <div className='flex items-center gap-3'>
-                    <Avatar className='rounded-sm'>
-                      <AvatarImage src={item.src} alt={item.model} />
-                      <AvatarFallback className='text-xs'>{item.fallback}</AvatarFallback>
-                    </Avatar>
-                    <div>
-                      <div className='font-medium'>{item.productName}</div>
-                      <span className='text-muted-foreground mt-0.5 text-xs'>{item.model}</span>
-                    </div>
-                  </div>
-                </TableCell>
-                <TableCell>{item.color}</TableCell>
-                <TableCell>{item.category}</TableCell>
-                <TableCell>{item.price}</TableCell>
-                <TableCell className='flex items-center gap-1'>
-                  <Button variant='ghost' size='icon' className='rounded-full' aria-label={`product-${item.id}-edit`}>
-                    <PencilIcon />
-                  </Button>
-                  <Button variant='ghost' size='icon' className='rounded-full' aria-label={`product-${item.id}-remove`}>
-                    <Trash2Icon />
-                  </Button>
-                  <Button
-                    variant='ghost'
-                    size='icon'
-                    className='rounded-full'
-                    aria-label={`product-${item.id}-archive`}
-                  >
-                    <ArchiveIcon />
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Product Table</p>
-    </div>
-  )
-} */