@trycompai/design-system 1.0.28 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/molecules/table.tsx

@@ -1,22 +1,235 @@
 import * as React from 'react';
 
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from './pagination';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
+import { Text } from '../atoms/text';
+
+type PaginationConfig = {
+  page: number;
+  pageCount: number;
+  onPageChange: (page: number) => void;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  onPageSizeChange?: (pageSize: number) => void;
+  siblingCount?: number;
+  showPrevNext?: boolean;
+  showEdges?: boolean;
+};
+
+type PaginationItemValue = number | 'ellipsis';
+
+function getPaginationRange({
+  page,
+  pageCount,
+  siblingCount,
+  showEdges,
+}: {
+  page: number;
+  pageCount: number;
+  siblingCount: number;
+  showEdges: boolean;
+}): PaginationItemValue[] {
+  if (pageCount <= 1) {
+    return [];
+  }
+
+  const totalNumbers = siblingCount * 2 + (showEdges ? 5 : 3);
+  if (pageCount <= totalNumbers) {
+    return Array.from({ length: pageCount }, (_, index) => index + 1);
+  }
+
+  const leftSibling = Math.max(page - siblingCount, 1);
+  const rightSibling = Math.min(page + siblingCount, pageCount);
+  const showLeftEllipsis = showEdges ? leftSibling > 2 : leftSibling > 1;
+  const showRightEllipsis = showEdges ? rightSibling < pageCount - 1 : rightSibling < pageCount;
+
+  const range: PaginationItemValue[] = [];
+  if (showEdges) {
+    range.push(1);
+  }
+
+  if (showLeftEllipsis) {
+    range.push('ellipsis');
+  }
+
+  const start = showEdges ? Math.max(leftSibling, 2) : leftSibling;
+  const end = showEdges ? Math.min(rightSibling, pageCount - 1) : rightSibling;
+  for (let current = start; current <= end; current += 1) {
+    range.push(current);
+  }
+
+  if (showRightEllipsis) {
+    range.push('ellipsis');
+  }
+
+  if (showEdges) {
+    range.push(pageCount);
+  }
+
+  return range;
+}
+
+function renderPagination({
+  page,
+  pageCount,
+  onPageChange,
+  siblingCount = 1,
+  showPrevNext = true,
+  showEdges = true,
+}: PaginationConfig) {
+  if (pageCount <= 1) {
+    return null;
+  }
+
+  const range = getPaginationRange({
+    page,
+    pageCount,
+    siblingCount,
+    showEdges,
+  });
+
+  return (
+    <Pagination>
+      <PaginationContent>
+        {showPrevNext && page > 1 && (
+          <PaginationItem>
+            <PaginationPrevious
+              href="#"
+              onClick={(event) => {
+                event.preventDefault();
+                onPageChange(page - 1);
+              }}
+            />
+          </PaginationItem>
+        )}
+        {range.map((item, index) =>
+          item === 'ellipsis' ? (
+            <PaginationItem key={`ellipsis-${index}`}>
+              <PaginationEllipsis />
+            </PaginationItem>
+          ) : (
+            <PaginationItem key={item}>
+              <PaginationLink
+                href="#"
+                isActive={item === page}
+                onClick={(event) => {
+                  event.preventDefault();
+                  onPageChange(item);
+                }}
+              >
+                {item}
+              </PaginationLink>
+            </PaginationItem>
+          ),
+        )}
+        {showPrevNext && page < pageCount && (
+          <PaginationItem>
+            <PaginationNext
+              href="#"
+              onClick={(event) => {
+                event.preventDefault();
+                onPageChange(page + 1);
+              }}
+            />
+          </PaginationItem>
+        )}
+      </PaginationContent>
+    </Pagination>
+  );
+}
+
 function Table({
   variant = 'default',
+  pagination,
   ...props
 }: Omit<React.ComponentProps<'table'>, 'className'> & {
   variant?: 'default' | 'bordered';
+  pagination?: PaginationConfig;
 }) {
+  const [internalPage, setInternalPage] = React.useState(pagination?.page ?? 1);
+  React.useEffect(() => {
+    if (pagination && pagination.page !== internalPage) {
+      setInternalPage(pagination.page);
+    }
+  }, [pagination, internalPage]);
+
+  const paginationContent = pagination
+    ? renderPagination({
+        ...pagination,
+        page: internalPage,
+        onPageChange: (nextPage) => {
+          setInternalPage(nextPage);
+          pagination.onPageChange(nextPage);
+        },
+      })
+    : null;
+  const showPageSizeSelector = Boolean(pagination?.pageSize && pagination?.onPageSizeChange);
+  const rawPageSize = pagination?.pageSize ?? 20;
+  const pageSizeOptions = pagination?.pageSizeOptions ?? [20, 50, 100];
+  const normalizedPageSizeOptions = pageSizeOptions.includes(rawPageSize)
+    ? pageSizeOptions
+    : [rawPageSize, ...pageSizeOptions];
+
   return (
     <div
       data-slot="table-container"
       data-variant={variant}
-      className="relative w-full overflow-x-auto data-[variant=bordered]:border data-[variant=bordered]:rounded-lg"
+      className="relative w-full data-[variant=bordered]:border data-[variant=bordered]:rounded-lg"
     >
-      <table
-        data-slot="table"
-        className="w-full caption-bottom text-sm [&_[data-slot=text][data-default-size=true]]:text-sm"
-        {...props}
-      />
+      <div data-slot="table-scroll" className="w-full overflow-x-auto">
+        <table
+          data-slot="table"
+          className="w-full caption-bottom text-sm [&_[data-slot=text][data-default-size=true]]:text-sm"
+          {...props}
+        />
+      </div>
+      {paginationContent && (
+        <div
+          data-slot="table-pagination"
+          data-has-size={showPageSizeSelector ? 'true' : 'false'}
+          className="grid items-center border-t bg-muted/40 px-3 py-2 data-[variant=bordered]:rounded-b-lg grid-cols-[1fr_auto_1fr] gap-3"
+        >
+          {showPageSizeSelector && (
+            <div
+              data-slot="table-pagination-size"
+              className="flex items-center gap-2 whitespace-nowrap"
+            >
+              <Text as="span" size="xs" variant="muted">
+                Rows per page
+              </Text>
+              <div className="w-20">
+                <Select
+                  value={String(rawPageSize)}
+                  onValueChange={(value) => pagination?.onPageSizeChange?.(Number(value))}
+                >
+                  <SelectTrigger size="sm">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent align="start">
+                    {normalizedPageSizeOptions.map((option) => (
+                      <SelectItem key={option} value={String(option)}>
+                        {option}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          )}
+          <div data-slot="table-pagination-controls" className="flex items-center justify-center">
+            {paginationContent}
+          </div>
+          <div data-slot="table-pagination-spacer" />
+        </div>
+      )}
     </div>
   );
 }

package/src/components/organisms/sheet.tsx

@@ -53,7 +53,7 @@ function SheetContent({
           <SheetPrimitive.Close
             data-slot="sheet-close"
             render={<Button variant="ghost" size="icon-sm" />}
-            className="absolute top-4 right-4"
+            className="absolute top-4 right-6"
           >
             <Close className="size-4" />
             <span className="sr-only">Close</span>
@@ -65,18 +65,18 @@ function SheetContent({
 }
 
 function SheetHeader({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
-  return <div data-slot="sheet-header" className="gap-0.5 px-4 pt-4 flex flex-col" {...props} />;
+  return <div data-slot="sheet-header" className="gap-0.5 px-6 pt-4 flex flex-col" {...props} />;
 }
 
 function SheetBody({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
-  return <div data-slot="sheet-body" className="flex-1 min-h-0 overflow-y-auto px-4 py-4" {...props} />;
+  return <div data-slot="sheet-body" className="flex-1 min-h-0 overflow-y-auto px-6 py-4" {...props} />;
 }
 
 function SheetFooter({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="sheet-footer"
-      className="gap-2 px-4 py-4 mt-auto flex flex-col border-t bg-background sticky bottom-0"
+      className="gap-2 px-6 py-4 mt-auto flex flex-col border-t bg-background sticky bottom-0"
       {...props}
     />
   );