feat(ui): add Mosaic Pagination component

.changeset/mosaic-pagination.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/components/pagination/index.ts

@@ -0,0 +1,2 @@
+export { Pagination } from './pagination';
+export type { PaginationProps } from './pagination';

packages/mosaic/src/components/pagination/page-items.ts

@@ -0,0 +1,33 @@
+export type PageItem = number | 'start-ellipsis' | 'end-ellipsis';
+
+function range(start: number, end: number): number[] {
+  const pages: number[] = [];
+  for (let page = start; page <= end; page++) {
+    pages.push(page);
+  }
+  return pages;
+}
+
+export function getPageItems(page: number, pageCount: number, siblingCount: number): PageItem[] {
+  if (pageCount <= 1) {
+    return [1];
+  }
+
+  const windowStart = Math.max(Math.min(page - siblingCount, pageCount - 2 * siblingCount - 2), 3);
+  const windowEnd = Math.min(Math.max(page + siblingCount, 2 * siblingCount + 3), pageCount - 2);
+
+  const items: PageItem[] = [1];
+  if (windowStart > 3) {
+    items.push('start-ellipsis');
+  } else if (pageCount > 3) {
+    items.push(2);
+  }
+  items.push(...range(windowStart, windowEnd));
+  if (windowEnd < pageCount - 2) {
+    items.push('end-ellipsis');
+  } else if (pageCount > 2) {
+    items.push(pageCount - 1);
+  }
+  items.push(pageCount);
+  return items;
+}

packages/mosaic/src/components/pagination/pagination.styles.ts

@@ -0,0 +1,53 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { colorVars, space, typeScaleVars } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  root: {
+    gap: space['4'],
+    alignItems: 'center',
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  controls: {
+    gap: space['1'],
+    alignItems: 'center',
+    display: 'flex',
+  },
+  hitTarget: {
+    position: 'relative',
+    '::after': {
+      insetBlock: 0,
+      insetInline: `calc(${space['1']} / -2)`,
+      content: '""',
+      position: 'absolute',
+    },
+  },
+  page: {
+    color: {
+      default: colorVars['--cl-color-foreground-secondary'],
+      ':where([aria-current="page"])': colorVars['--cl-color-foreground'],
+    },
+  },
+  ellipsis: {
+    alignItems: 'center',
+    color: colorVars['--cl-color-foreground-secondary'],
+    display: 'inline-flex',
+    justifyContent: 'center',
+    height: space['7'],
+    width: space['7'],
+  },
+  pageSize: {
+    gap: space['2'],
+    alignItems: 'center',
+    display: 'flex',
+  },
+  pageSizeOption: {
+    paddingBlock: 0,
+    paddingInline: space['2'],
+    fontSize: typeScaleVars['--cl-text-xs-size'],
+    lineHeight: typeScaleVars['--cl-text-xs-leading'],
+    minHeight: space['7'],
+  },
+});