colibri-ui 0.8.93 → 0.8.94

package/Pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { PaginationProps } from "./index.props";
+export declare const Pagination: ({ totalPages, page, defaultPage, onPageChange, siblingCount, boundaryCount, disabledPages, disabled, mode, size, pageSize, defaultPageSize, pageSizeOptions, onPageSizeChange, showPageSize, showQuickJump, helperText, previousLabel, nextLabel, pageLabel, quickJumpLabel, pageSizeLabel, className, ref, "aria-label": ariaLabel, ...props }: PaginationProps) => React.JSX.Element;

package/Pagination/Pagination.js

@@ -0,0 +1,162 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var clsx = require('clsx');
+var Chevron = require('../Icons/Chevron.js');
+var index = require('../Input/index.js');
+var index$1 = require('../Select/index.js');
+var helpers = require('./helpers.js');
+var styles = require('./Pagination.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const NO_PAGES = [];
+const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
+const defaultPageLabel = page => `Page ${page}`;
+const Pagination = _a => {
+  var {
+      totalPages,
+      page,
+      defaultPage = 1,
+      onPageChange,
+      siblingCount = 1,
+      boundaryCount = 1,
+      disabledPages = NO_PAGES,
+      disabled = false,
+      mode = "default",
+      size = "m",
+      pageSize,
+      defaultPageSize = 20,
+      pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+      onPageSizeChange,
+      showPageSize = false,
+      showQuickJump = false,
+      helperText,
+      previousLabel = "Previous page",
+      nextLabel = "Next page",
+      pageLabel = defaultPageLabel,
+      quickJumpLabel = "Go to page",
+      pageSizeLabel = "Per page",
+      className,
+      ref,
+      "aria-label": ariaLabel = "Pagination"
+    } = _a,
+    props = tslib.__rest(_a, ["totalPages", "page", "defaultPage", "onPageChange", "siblingCount", "boundaryCount", "disabledPages", "disabled", "mode", "size", "pageSize", "defaultPageSize", "pageSizeOptions", "onPageSizeChange", "showPageSize", "showQuickJump", "helperText", "previousLabel", "nextLabel", "pageLabel", "quickJumpLabel", "pageSizeLabel", "className", "ref", "aria-label"]);
+  const total = helpers.toTotalPages(totalPages);
+  const [internalPage, setInternalPage] = React.useState(() => helpers.clamp(defaultPage, 1, total));
+  const currentPage = helpers.clamp(page !== null && page !== void 0 ? page : internalPage, 1, total);
+  const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize);
+  const currentPageSize = pageSize !== null && pageSize !== void 0 ? pageSize : internalPageSize;
+  const [quickJumpDraft, setQuickJumpDraft] = React.useState(null);
+  const disabledSet = React.useMemo(() => new Set(disabledPages), [disabledPages]);
+  const items = React.useMemo(() => helpers.getPaginationItems(total, currentPage, siblingCount, boundaryCount), [total, currentPage, siblingCount, boundaryCount]);
+  const pageSizeSelectOptions = React.useMemo(() => pageSizeOptions.map(option => ({
+    value: String(option),
+    label: option
+  })), [pageSizeOptions]);
+  const previousPage = helpers.findEnabledPage(currentPage, -1, total, disabledSet);
+  const nextPage = helpers.findEnabledPage(currentPage, 1, total, disabledSet);
+  const changePage = nextValue => {
+    const next = helpers.clamp(Math.floor(nextValue), 1, total);
+    if (disabled || disabledSet.has(next) || next === currentPage) return;
+    if (page === undefined) setInternalPage(next);
+    onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(next);
+  };
+  const commitQuickJump = () => {
+    if (quickJumpDraft === null) return;
+    const parsed = Number(quickJumpDraft);
+    if (quickJumpDraft.trim() !== "" && Number.isInteger(parsed)) {
+      changePage(parsed);
+    }
+    setQuickJumpDraft(null);
+  };
+  const changePageSize = next => {
+    if (pageSize === undefined) setInternalPageSize(next);
+    onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(next);
+  };
+  const hasActions = showQuickJump || showPageSize || Boolean(helperText);
+  return /*#__PURE__*/React__default.default.createElement("nav", Object.assign({}, props, {
+    ref: ref,
+    "aria-label": ariaLabel,
+    className: clsx__default.default(styles__default.default.root, styles__default.default[`size_${size}`], {
+      [styles__default.default.root_disabled]: disabled
+    }, className)
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.main
+  }, /*#__PURE__*/React__default.default.createElement("button", {
+    type: "button",
+    className: styles__default.default.arrow,
+    "aria-label": previousLabel,
+    disabled: disabled || previousPage === undefined,
+    onClick: () => {
+      if (previousPage !== undefined) changePage(previousPage);
+    }
+  }, /*#__PURE__*/React__default.default.createElement(Chevron.Chevron, {
+    className: styles__default.default.arrow_previous,
+    width: 16,
+    height: 16,
+    "aria-hidden": "true"
+  })), mode === "compact" ? (/*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default.counter,
+    "aria-live": "polite"
+  }, /*#__PURE__*/React__default.default.createElement("strong", null, currentPage), /*#__PURE__*/React__default.default.createElement("span", null, "/"), total)) : (/*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.pages
+  }, items.map(item => typeof item === "number" ? (/*#__PURE__*/React__default.default.createElement("button", {
+    type: "button",
+    key: item,
+    className: clsx__default.default(styles__default.default.page, {
+      [styles__default.default.page_current]: item === currentPage
+    }),
+    "aria-label": pageLabel(item),
+    "aria-current": item === currentPage ? "page" : undefined,
+    disabled: disabled || disabledSet.has(item),
+    onClick: () => changePage(item)
+  }, item)) : (/*#__PURE__*/React__default.default.createElement("span", {
+    key: item,
+    className: styles__default.default.ellipsis,
+    "aria-hidden": "true"
+  }, "\u2026"))))), /*#__PURE__*/React__default.default.createElement("button", {
+    type: "button",
+    className: styles__default.default.arrow,
+    "aria-label": nextLabel,
+    disabled: disabled || nextPage === undefined,
+    onClick: () => {
+      if (nextPage !== undefined) changePage(nextPage);
+    }
+  }, /*#__PURE__*/React__default.default.createElement(Chevron.Chevron, {
+    className: styles__default.default.arrow_next,
+    width: 16,
+    height: 16,
+    "aria-hidden": "true"
+  }))), hasActions && (/*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.actions
+  }, showQuickJump && (/*#__PURE__*/React__default.default.createElement(index.Input, {
+    className: styles__default.default.jump,
+    size: size,
+    label: quickJumpLabel,
+    inputMode: "numeric",
+    value: quickJumpDraft !== null && quickJumpDraft !== void 0 ? quickJumpDraft : String(currentPage),
+    disabled: disabled,
+    onChange: (_, value) => setQuickJumpDraft(value),
+    onBlur: commitQuickJump,
+    onKeyDown: event => {
+      if (event.key === "Enter") commitQuickJump();
+    }
+  })), showPageSize && (/*#__PURE__*/React__default.default.createElement(index$1.Select, {
+    size: size,
+    label: pageSizeLabel,
+    options: pageSizeSelectOptions,
+    value: String(currentPageSize),
+    disabled: disabled,
+    onChange: value => changePageSize(Number(value))
+  })), helperText && /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.helper
+  }, helperText))));
+};
+
+exports.Pagination = Pagination;

package/Pagination/Pagination.module.css

@@ -0,0 +1,118 @@
+.root {
+  --pagination-item-size: var(--component-input-height-m);
+  --pagination-font-size: var(--font-size-text-md);
+  color: var(--component-pagination-text);
+  display: inline-flex;
+  flex-direction: column;
+  font-family: var(--font-family-ui);
+  gap: var(--space-3);
+  max-inline-size: 100%;
+}
+.root_disabled {
+  opacity: 0.55;
+}
+
+.size_s {
+  --pagination-item-size: var(--component-input-height-s);
+  --pagination-font-size: var(--font-size-text-sm);
+}
+.size_l {
+  --pagination-item-size: var(--component-input-height-l);
+}
+
+.main,
+.pages {
+  align-items: center;
+  display: flex;
+  gap: var(--space-1);
+}
+
+.page,
+.arrow {
+  align-items: center;
+  background: transparent;
+  block-size: var(--pagination-item-size);
+  border: none;
+  border-radius: var(--radius-sm);
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--pagination-font-size);
+  justify-content: center;
+  min-inline-size: var(--pagination-item-size);
+  padding: 0 var(--space-2);
+}
+.page:disabled,
+.arrow:disabled {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+.page:focus-visible,
+.arrow:focus-visible {
+  outline: var(--focus-ring-width) solid var(--component-pagination-focus-ring);
+  outline-offset: var(--focus-ring-width);
+}
+.page:hover:not(:disabled),
+.arrow:hover:not(:disabled) {
+  background: var(--component-pagination-bg-hover);
+}
+
+.page_current,
+.page_current:hover:not(:disabled) {
+  background: var(--component-pagination-bg-current);
+  color: var(--component-pagination-text-current);
+  cursor: default;
+}
+
+.arrow_previous {
+  transform: rotate(90deg);
+}
+
+.arrow_next {
+  transform: rotate(-90deg);
+}
+
+.ellipsis {
+  align-items: center;
+  block-size: var(--pagination-item-size);
+  color: var(--color-text-secondary);
+  display: inline-flex;
+  font-size: var(--pagination-font-size);
+  justify-content: center;
+  min-inline-size: var(--space-6);
+  -webkit-user-select: none;
+          user-select: none;
+}
+
+.counter {
+  align-items: center;
+  display: flex;
+  font-size: var(--pagination-font-size);
+  gap: var(--space-1);
+  justify-content: center;
+  min-inline-size: var(--space-20);
+}
+
+.actions {
+  align-items: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  min-inline-size: 0;
+}
+
+.jump {
+  inline-size: var(--space-20);
+}
+
+.helper {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-text-sm);
+  line-height: var(--pagination-item-size);
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/Pagination/helpers.d.ts

@@ -0,0 +1,5 @@
+import type { PaginationItem } from "./index.props";
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const toTotalPages: (totalPages: number) => number;
+export declare const getPaginationItems: (totalPages: number, page: number, siblingCount?: number, boundaryCount?: number) => PaginationItem[];
+export declare const findEnabledPage: (from: number, direction: -1 | 1, total: number, disabledPages: ReadonlySet<number>) => number | undefined;

package/Pagination/helpers.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const range = (start, end) => Array.from({
+  length: Math.max(0, end - start + 1)
+}, (_, index) => start + index);
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const toTotalPages = totalPages => Math.max(1, Math.floor(totalPages) || 1);
+const getPaginationItems = (totalPages, page, siblingCount = 1, boundaryCount = 1) => {
+  const total = toTotalPages(totalPages);
+  const current = clamp(Math.floor(page) || 1, 1, total);
+  const siblings = Math.max(0, Math.floor(siblingCount));
+  const boundaries = Math.max(0, Math.floor(boundaryCount));
+  const pages = [...new Set([...range(1, Math.min(boundaries, total)), ...range(Math.max(1, current - siblings), Math.min(total, current + siblings)), ...range(Math.max(1, total - boundaries + 1), total)])].sort((left, right) => left - right);
+  return pages.flatMap((visiblePage, index) => {
+    const previous = pages[index - 1];
+    if (previous === undefined) return [visiblePage];
+    if (visiblePage - previous === 2) return [previous + 1, visiblePage];
+    if (visiblePage - previous > 2) {
+      const ellipsis = visiblePage > current ? "end-ellipsis" : "start-ellipsis";
+      return [ellipsis, visiblePage];
+    }
+    return [visiblePage];
+  });
+};
+const findEnabledPage = (from, direction, total, disabledPages) => {
+  let candidate = from + direction;
+  while (candidate >= 1 && candidate <= total && disabledPages.has(candidate)) {
+    candidate += direction;
+  }
+  return candidate >= 1 && candidate <= total ? candidate : undefined;
+};
+
+exports.clamp = clamp;
+exports.findEnabledPage = findEnabledPage;
+exports.getPaginationItems = getPaginationItems;
+exports.toTotalPages = toTotalPages;

package/Pagination/index.d.ts

@@ -0,0 +1,3 @@
+export { Pagination } from "./Pagination";
+export { getPaginationItems } from "./helpers";
+export type { PaginationItem, PaginationMode, PaginationProps, PaginationSize, } from "./index.props";

package/Pagination/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var Pagination = require('./Pagination.js');
+var helpers = require('./helpers.js');
+
+
+
+exports.Pagination = Pagination.Pagination;
+exports.getPaginationItems = helpers.getPaginationItems;

package/Pagination/index.props.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+export type PaginationSize = "s" | "m" | "l";
+export type PaginationMode = "default" | "compact";
+export type PaginationItem = number | "start-ellipsis" | "end-ellipsis";
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "onChange" | "defaultValue"> {
+    totalPages: number;
+    page?: number;
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** Pages shown on each side of the current page. */
+    siblingCount?: number;
+    /** Pages always shown at the start and at the end. */
+    boundaryCount?: number;
+    disabledPages?: readonly number[];
+    disabled?: boolean;
+    mode?: PaginationMode;
+    size?: PaginationSize;
+    pageSize?: number;
+    defaultPageSize?: number;
+    pageSizeOptions?: readonly number[];
+    onPageSizeChange?: (pageSize: number) => void;
+    showPageSize?: boolean;
+    showQuickJump?: boolean;
+    helperText?: ReactNode;
+    previousLabel?: string;
+    nextLabel?: string;
+    pageLabel?: (page: number) => string;
+    quickJumpLabel?: ReactNode;
+    pageSizeLabel?: ReactNode;
+    ref?: Ref<HTMLElement>;
+}

package/Pagination/package.json

@@ -0,0 +1,9 @@
+{
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "module": "../esm/Pagination/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Theme/index.d.ts

@@ -687,6 +687,11 @@ export declare const THEMES: {
         "component-calendar-fade-inline-size": string;
         "component-calendar-day-size": string;
         "component-calendar-day-radius": string;
+        "component-pagination-text": string;
+        "component-pagination-text-current": string;
+        "component-pagination-bg-current": string;
+        "component-pagination-bg-hover": string;
+        "component-pagination-focus-ring": string;
         "component-navigation-item-bg-selected": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;
@@ -1526,6 +1531,11 @@ export declare const THEMES: {
         "component-calendar-fade-inline-size": string;
         "component-calendar-day-size": string;
         "component-calendar-day-radius": string;
+        "component-pagination-text": string;
+        "component-pagination-text-current": string;
+        "component-pagination-bg-current": string;
+        "component-pagination-bg-hover": string;
+        "component-pagination-focus-ring": string;
         "component-navigation-item-bg-selected": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;

package/Theme/themes/buenos_aires.d.ts

@@ -608,6 +608,11 @@ declare const _default: {
     "component-calendar-fade-inline-size": string;
     "component-calendar-day-size": string;
     "component-calendar-day-radius": string;
+    "component-pagination-text": string;
+    "component-pagination-text-current": string;
+    "component-pagination-bg-current": string;
+    "component-pagination-bg-hover": string;
+    "component-pagination-focus-ring": string;
     "component-navigation-item-bg-selected": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;

package/Theme/themes/buenos_aires.js

@@ -614,6 +614,11 @@ var THEME_BA = {
   "component-calendar-fade-inline-size": "2.5rem",
   "component-calendar-day-size": "2rem",
   "component-calendar-day-radius": "0.375rem",
+  "component-pagination-text": theme_buenos_aires.default.BRAND_BA_FOREST,
+  "component-pagination-text-current": theme_buenos_aires.default.BRAND_BA_LIME,
+  "component-pagination-bg-current": theme_buenos_aires.default.BRAND_BA_FOREST,
+  "component-pagination-bg-hover": theme_buenos_aires.default.NEUTRAL_BA_100,
+  "component-pagination-focus-ring": theme_buenos_aires.default.BRAND_BA_LIME,
   "component-navigation-item-bg-selected": theme_buenos_aires.default.BRAND_BA_FOREST,
   "component-chip-bg-selected": theme_buenos_aires.default.BRAND_BA_FOREST,
   "component-chip-bg-selected-strong": theme_buenos_aires.default.BRAND_BA_LIME,

package/Theme/themes/jaipur.d.ts

@@ -608,6 +608,11 @@ declare const _default: {
     "component-calendar-fade-inline-size": string;
     "component-calendar-day-size": string;
     "component-calendar-day-radius": string;
+    "component-pagination-text": string;
+    "component-pagination-text-current": string;
+    "component-pagination-bg-current": string;
+    "component-pagination-bg-hover": string;
+    "component-pagination-focus-ring": string;
     "component-navigation-item-bg-selected": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;

package/Theme/themes/jaipur.js

@@ -614,6 +614,11 @@ var theme_jaipur = {
   "component-calendar-fade-inline-size": "2.5rem",
   "component-calendar-day-size": "2rem",
   "component-calendar-day-radius": "0.375rem",
+  "component-pagination-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-pagination-text-current": theme_jaipur$1.default.BRAND_JP_PINK,
+  "component-pagination-bg-current": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-pagination-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
+  "component-pagination-focus-ring": theme_jaipur$1.default.BRAND_JP_PINK,
   "component-navigation-item-bg-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-chip-bg-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-chip-bg-selected-strong": theme_jaipur$1.default.BRAND_JP_PINK,

package/esm/Pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { PaginationProps } from "./index.props";
+export declare const Pagination: ({ totalPages, page, defaultPage, onPageChange, siblingCount, boundaryCount, disabledPages, disabled, mode, size, pageSize, defaultPageSize, pageSizeOptions, onPageSizeChange, showPageSize, showQuickJump, helperText, previousLabel, nextLabel, pageLabel, quickJumpLabel, pageSizeLabel, className, ref, "aria-label": ariaLabel, ...props }: PaginationProps) => React.JSX.Element;

package/esm/Pagination/Pagination.js

@@ -0,0 +1,154 @@
+import { __rest } from 'tslib';
+import React, { useState, useMemo } from 'react';
+import clsx from 'clsx';
+import { Chevron } from '../Icons/Chevron.js';
+import { Input } from '../Input/index.js';
+import { Select } from '../Select/index.js';
+import { clamp, getPaginationItems, findEnabledPage, toTotalPages } from './helpers.js';
+import styles from './Pagination.module.css';
+
+const NO_PAGES = [];
+const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
+const defaultPageLabel = page => `Page ${page}`;
+const Pagination = _a => {
+  var {
+      totalPages,
+      page,
+      defaultPage = 1,
+      onPageChange,
+      siblingCount = 1,
+      boundaryCount = 1,
+      disabledPages = NO_PAGES,
+      disabled = false,
+      mode = "default",
+      size = "m",
+      pageSize,
+      defaultPageSize = 20,
+      pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+      onPageSizeChange,
+      showPageSize = false,
+      showQuickJump = false,
+      helperText,
+      previousLabel = "Previous page",
+      nextLabel = "Next page",
+      pageLabel = defaultPageLabel,
+      quickJumpLabel = "Go to page",
+      pageSizeLabel = "Per page",
+      className,
+      ref,
+      "aria-label": ariaLabel = "Pagination"
+    } = _a,
+    props = __rest(_a, ["totalPages", "page", "defaultPage", "onPageChange", "siblingCount", "boundaryCount", "disabledPages", "disabled", "mode", "size", "pageSize", "defaultPageSize", "pageSizeOptions", "onPageSizeChange", "showPageSize", "showQuickJump", "helperText", "previousLabel", "nextLabel", "pageLabel", "quickJumpLabel", "pageSizeLabel", "className", "ref", "aria-label"]);
+  const total = toTotalPages(totalPages);
+  const [internalPage, setInternalPage] = useState(() => clamp(defaultPage, 1, total));
+  const currentPage = clamp(page !== null && page !== void 0 ? page : internalPage, 1, total);
+  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+  const currentPageSize = pageSize !== null && pageSize !== void 0 ? pageSize : internalPageSize;
+  const [quickJumpDraft, setQuickJumpDraft] = useState(null);
+  const disabledSet = useMemo(() => new Set(disabledPages), [disabledPages]);
+  const items = useMemo(() => getPaginationItems(total, currentPage, siblingCount, boundaryCount), [total, currentPage, siblingCount, boundaryCount]);
+  const pageSizeSelectOptions = useMemo(() => pageSizeOptions.map(option => ({
+    value: String(option),
+    label: option
+  })), [pageSizeOptions]);
+  const previousPage = findEnabledPage(currentPage, -1, total, disabledSet);
+  const nextPage = findEnabledPage(currentPage, 1, total, disabledSet);
+  const changePage = nextValue => {
+    const next = clamp(Math.floor(nextValue), 1, total);
+    if (disabled || disabledSet.has(next) || next === currentPage) return;
+    if (page === undefined) setInternalPage(next);
+    onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(next);
+  };
+  const commitQuickJump = () => {
+    if (quickJumpDraft === null) return;
+    const parsed = Number(quickJumpDraft);
+    if (quickJumpDraft.trim() !== "" && Number.isInteger(parsed)) {
+      changePage(parsed);
+    }
+    setQuickJumpDraft(null);
+  };
+  const changePageSize = next => {
+    if (pageSize === undefined) setInternalPageSize(next);
+    onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(next);
+  };
+  const hasActions = showQuickJump || showPageSize || Boolean(helperText);
+  return /*#__PURE__*/React.createElement("nav", Object.assign({}, props, {
+    ref: ref,
+    "aria-label": ariaLabel,
+    className: clsx(styles.root, styles[`size_${size}`], {
+      [styles.root_disabled]: disabled
+    }, className)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.main
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.arrow,
+    "aria-label": previousLabel,
+    disabled: disabled || previousPage === undefined,
+    onClick: () => {
+      if (previousPage !== undefined) changePage(previousPage);
+    }
+  }, /*#__PURE__*/React.createElement(Chevron, {
+    className: styles.arrow_previous,
+    width: 16,
+    height: 16,
+    "aria-hidden": "true"
+  })), mode === "compact" ? (/*#__PURE__*/React.createElement("span", {
+    className: styles.counter,
+    "aria-live": "polite"
+  }, /*#__PURE__*/React.createElement("strong", null, currentPage), /*#__PURE__*/React.createElement("span", null, "/"), total)) : (/*#__PURE__*/React.createElement("div", {
+    className: styles.pages
+  }, items.map(item => typeof item === "number" ? (/*#__PURE__*/React.createElement("button", {
+    type: "button",
+    key: item,
+    className: clsx(styles.page, {
+      [styles.page_current]: item === currentPage
+    }),
+    "aria-label": pageLabel(item),
+    "aria-current": item === currentPage ? "page" : undefined,
+    disabled: disabled || disabledSet.has(item),
+    onClick: () => changePage(item)
+  }, item)) : (/*#__PURE__*/React.createElement("span", {
+    key: item,
+    className: styles.ellipsis,
+    "aria-hidden": "true"
+  }, "\u2026"))))), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.arrow,
+    "aria-label": nextLabel,
+    disabled: disabled || nextPage === undefined,
+    onClick: () => {
+      if (nextPage !== undefined) changePage(nextPage);
+    }
+  }, /*#__PURE__*/React.createElement(Chevron, {
+    className: styles.arrow_next,
+    width: 16,
+    height: 16,
+    "aria-hidden": "true"
+  }))), hasActions && (/*#__PURE__*/React.createElement("div", {
+    className: styles.actions
+  }, showQuickJump && (/*#__PURE__*/React.createElement(Input, {
+    className: styles.jump,
+    size: size,
+    label: quickJumpLabel,
+    inputMode: "numeric",
+    value: quickJumpDraft !== null && quickJumpDraft !== void 0 ? quickJumpDraft : String(currentPage),
+    disabled: disabled,
+    onChange: (_, value) => setQuickJumpDraft(value),
+    onBlur: commitQuickJump,
+    onKeyDown: event => {
+      if (event.key === "Enter") commitQuickJump();
+    }
+  })), showPageSize && (/*#__PURE__*/React.createElement(Select, {
+    size: size,
+    label: pageSizeLabel,
+    options: pageSizeSelectOptions,
+    value: String(currentPageSize),
+    disabled: disabled,
+    onChange: value => changePageSize(Number(value))
+  })), helperText && /*#__PURE__*/React.createElement("div", {
+    className: styles.helper
+  }, helperText))));
+};
+
+export { Pagination };

package/esm/Pagination/Pagination.module.css

@@ -0,0 +1,118 @@
+.root {
+  --pagination-item-size: var(--component-input-height-m);
+  --pagination-font-size: var(--font-size-text-md);
+  color: var(--component-pagination-text);
+  display: inline-flex;
+  flex-direction: column;
+  font-family: var(--font-family-ui);
+  gap: var(--space-3);
+  max-inline-size: 100%;
+}
+.root_disabled {
+  opacity: 0.55;
+}
+
+.size_s {
+  --pagination-item-size: var(--component-input-height-s);
+  --pagination-font-size: var(--font-size-text-sm);
+}
+.size_l {
+  --pagination-item-size: var(--component-input-height-l);
+}
+
+.main,
+.pages {
+  align-items: center;
+  display: flex;
+  gap: var(--space-1);
+}
+
+.page,
+.arrow {
+  align-items: center;
+  background: transparent;
+  block-size: var(--pagination-item-size);
+  border: none;
+  border-radius: var(--radius-sm);
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--pagination-font-size);
+  justify-content: center;
+  min-inline-size: var(--pagination-item-size);
+  padding: 0 var(--space-2);
+}
+.page:disabled,
+.arrow:disabled {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+.page:focus-visible,
+.arrow:focus-visible {
+  outline: var(--focus-ring-width) solid var(--component-pagination-focus-ring);
+  outline-offset: var(--focus-ring-width);
+}
+.page:hover:not(:disabled),
+.arrow:hover:not(:disabled) {
+  background: var(--component-pagination-bg-hover);
+}
+
+.page_current,
+.page_current:hover:not(:disabled) {
+  background: var(--component-pagination-bg-current);
+  color: var(--component-pagination-text-current);
+  cursor: default;
+}
+
+.arrow_previous {
+  transform: rotate(90deg);
+}
+
+.arrow_next {
+  transform: rotate(-90deg);
+}
+
+.ellipsis {
+  align-items: center;
+  block-size: var(--pagination-item-size);
+  color: var(--color-text-secondary);
+  display: inline-flex;
+  font-size: var(--pagination-font-size);
+  justify-content: center;
+  min-inline-size: var(--space-6);
+  -webkit-user-select: none;
+          user-select: none;
+}
+
+.counter {
+  align-items: center;
+  display: flex;
+  font-size: var(--pagination-font-size);
+  gap: var(--space-1);
+  justify-content: center;
+  min-inline-size: var(--space-20);
+}
+
+.actions {
+  align-items: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  min-inline-size: 0;
+}
+
+.jump {
+  inline-size: var(--space-20);
+}
+
+.helper {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-text-sm);
+  line-height: var(--pagination-item-size);
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/esm/Pagination/helpers.d.ts

@@ -0,0 +1,5 @@
+import type { PaginationItem } from "./index.props";
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const toTotalPages: (totalPages: number) => number;
+export declare const getPaginationItems: (totalPages: number, page: number, siblingCount?: number, boundaryCount?: number) => PaginationItem[];
+export declare const findEnabledPage: (from: number, direction: -1 | 1, total: number, disabledPages: ReadonlySet<number>) => number | undefined;

package/esm/Pagination/helpers.js

@@ -0,0 +1,31 @@
+const range = (start, end) => Array.from({
+  length: Math.max(0, end - start + 1)
+}, (_, index) => start + index);
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const toTotalPages = totalPages => Math.max(1, Math.floor(totalPages) || 1);
+const getPaginationItems = (totalPages, page, siblingCount = 1, boundaryCount = 1) => {
+  const total = toTotalPages(totalPages);
+  const current = clamp(Math.floor(page) || 1, 1, total);
+  const siblings = Math.max(0, Math.floor(siblingCount));
+  const boundaries = Math.max(0, Math.floor(boundaryCount));
+  const pages = [...new Set([...range(1, Math.min(boundaries, total)), ...range(Math.max(1, current - siblings), Math.min(total, current + siblings)), ...range(Math.max(1, total - boundaries + 1), total)])].sort((left, right) => left - right);
+  return pages.flatMap((visiblePage, index) => {
+    const previous = pages[index - 1];
+    if (previous === undefined) return [visiblePage];
+    if (visiblePage - previous === 2) return [previous + 1, visiblePage];
+    if (visiblePage - previous > 2) {
+      const ellipsis = visiblePage > current ? "end-ellipsis" : "start-ellipsis";
+      return [ellipsis, visiblePage];
+    }
+    return [visiblePage];
+  });
+};
+const findEnabledPage = (from, direction, total, disabledPages) => {
+  let candidate = from + direction;
+  while (candidate >= 1 && candidate <= total && disabledPages.has(candidate)) {
+    candidate += direction;
+  }
+  return candidate >= 1 && candidate <= total ? candidate : undefined;
+};
+
+export { clamp, findEnabledPage, getPaginationItems, toTotalPages };

package/esm/Pagination/index.d.ts

@@ -0,0 +1,3 @@
+export { Pagination } from "./Pagination";
+export { getPaginationItems } from "./helpers";
+export type { PaginationItem, PaginationMode, PaginationProps, PaginationSize, } from "./index.props";

package/esm/Pagination/index.js

@@ -0,0 +1,2 @@
+export { Pagination } from './Pagination.js';
+export { getPaginationItems } from './helpers.js';

package/esm/Pagination/index.props.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+export type PaginationSize = "s" | "m" | "l";
+export type PaginationMode = "default" | "compact";
+export type PaginationItem = number | "start-ellipsis" | "end-ellipsis";
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "onChange" | "defaultValue"> {
+    totalPages: number;
+    page?: number;
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** Pages shown on each side of the current page. */
+    siblingCount?: number;
+    /** Pages always shown at the start and at the end. */
+    boundaryCount?: number;
+    disabledPages?: readonly number[];
+    disabled?: boolean;
+    mode?: PaginationMode;
+    size?: PaginationSize;
+    pageSize?: number;
+    defaultPageSize?: number;
+    pageSizeOptions?: readonly number[];
+    onPageSizeChange?: (pageSize: number) => void;
+    showPageSize?: boolean;
+    showQuickJump?: boolean;
+    helperText?: ReactNode;
+    previousLabel?: string;
+    nextLabel?: string;
+    pageLabel?: (page: number) => string;
+    quickJumpLabel?: ReactNode;
+    pageSizeLabel?: ReactNode;
+    ref?: Ref<HTMLElement>;
+}

package/esm/Theme/index.d.ts

@@ -687,6 +687,11 @@ export declare const THEMES: {
         "component-calendar-fade-inline-size": string;
         "component-calendar-day-size": string;
         "component-calendar-day-radius": string;
+        "component-pagination-text": string;
+        "component-pagination-text-current": string;
+        "component-pagination-bg-current": string;
+        "component-pagination-bg-hover": string;
+        "component-pagination-focus-ring": string;
         "component-navigation-item-bg-selected": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;
@@ -1526,6 +1531,11 @@ export declare const THEMES: {
         "component-calendar-fade-inline-size": string;
         "component-calendar-day-size": string;
         "component-calendar-day-radius": string;
+        "component-pagination-text": string;
+        "component-pagination-text-current": string;
+        "component-pagination-bg-current": string;
+        "component-pagination-bg-hover": string;
+        "component-pagination-focus-ring": string;
         "component-navigation-item-bg-selected": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;

package/esm/Theme/themes/buenos_aires.d.ts

@@ -608,6 +608,11 @@ declare const _default: {
     "component-calendar-fade-inline-size": string;
     "component-calendar-day-size": string;
     "component-calendar-day-radius": string;
+    "component-pagination-text": string;
+    "component-pagination-text-current": string;
+    "component-pagination-bg-current": string;
+    "component-pagination-bg-hover": string;
+    "component-pagination-focus-ring": string;
     "component-navigation-item-bg-selected": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;

package/esm/Theme/themes/buenos_aires.js

@@ -610,6 +610,11 @@ var THEME_BA = {
   "component-calendar-fade-inline-size": "2.5rem",
   "component-calendar-day-size": "2rem",
   "component-calendar-day-radius": "0.375rem",
+  "component-pagination-text": Color.BRAND_BA_FOREST,
+  "component-pagination-text-current": Color.BRAND_BA_LIME,
+  "component-pagination-bg-current": Color.BRAND_BA_FOREST,
+  "component-pagination-bg-hover": Color.NEUTRAL_BA_100,
+  "component-pagination-focus-ring": Color.BRAND_BA_LIME,
   "component-navigation-item-bg-selected": Color.BRAND_BA_FOREST,
   "component-chip-bg-selected": Color.BRAND_BA_FOREST,
   "component-chip-bg-selected-strong": Color.BRAND_BA_LIME,

package/esm/Theme/themes/jaipur.d.ts

@@ -608,6 +608,11 @@ declare const _default: {
     "component-calendar-fade-inline-size": string;
     "component-calendar-day-size": string;
     "component-calendar-day-radius": string;
+    "component-pagination-text": string;
+    "component-pagination-text-current": string;
+    "component-pagination-bg-current": string;
+    "component-pagination-bg-hover": string;
+    "component-pagination-focus-ring": string;
     "component-navigation-item-bg-selected": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;

package/esm/Theme/themes/jaipur.js

@@ -610,6 +610,11 @@ var theme_jaipur = {
   "component-calendar-fade-inline-size": "2.5rem",
   "component-calendar-day-size": "2rem",
   "component-calendar-day-radius": "0.375rem",
+  "component-pagination-text": Color.BRAND_JP_EGGPLANT,
+  "component-pagination-text-current": Color.BRAND_JP_PINK,
+  "component-pagination-bg-current": Color.BRAND_JP_EGGPLANT,
+  "component-pagination-bg-hover": Color.NEUTRAL_JP_100,
+  "component-pagination-focus-ring": Color.BRAND_JP_PINK,
   "component-navigation-item-bg-selected": Color.BRAND_JP_EGGPLANT,
   "component-chip-bg-selected": Color.BRAND_JP_EGGPLANT,
   "component-chip-bg-selected-strong": Color.BRAND_JP_PINK,

package/esm/index.d.ts

@@ -52,6 +52,8 @@ export { MultiSelect } from "./MultiSelect";
 export type { MultiSelectProps } from "./MultiSelect/index.props";
 export { NumberInput } from "./NumberInput";
 export type { NumberInputGroupStyle, NumberInputProps, NumberInputSize, NumberInputValues, } from "./NumberInput";
+export { Pagination, getPaginationItems } from "./Pagination";
+export type { PaginationItem, PaginationMode, PaginationProps, PaginationSize, } from "./Pagination";
 export { Portal } from "./Portal";
 export type { PortalProps } from "./Portal/index.props";
 export { Progress } from "./Progress";

package/esm/index.js

@@ -25,6 +25,8 @@ export { MenuItem } from './Menu/components/MenuItem/index.js';
 export { Modal } from './Modal/index.js';
 export { MultiSelect } from './MultiSelect/index.js';
 export { NumberInput } from './NumberInput/NumberInput.js';
+export { Pagination } from './Pagination/Pagination.js';
+export { getPaginationItems } from './Pagination/helpers.js';
 export { Portal } from './Portal/index.js';
 export { Progress } from './Progress/Progress.js';
 export { RadioGroup } from './RadioGroup/index.js';

package/esm/theme_ba_variables.css

@@ -608,6 +608,11 @@
 --component-calendar-fade-inline-size: 2.5rem;
 --component-calendar-day-size: 2rem;
 --component-calendar-day-radius: 0.375rem;
+--component-pagination-text: #163300;
+--component-pagination-text-current: #9FE870;
+--component-pagination-bg-current: #163300;
+--component-pagination-bg-hover: #EDF0EA;
+--component-pagination-focus-ring: #9FE870;
 --component-navigation-item-bg-selected: #163300;
 --component-chip-bg-selected: #163300;
 --component-chip-bg-selected-strong: #9FE870;

package/esm/theme_jaipur_variables.css

@@ -608,6 +608,11 @@
 --component-calendar-fade-inline-size: 2.5rem;
 --component-calendar-day-size: 2rem;
 --component-calendar-day-radius: 0.375rem;
+--component-pagination-text: #2C2242;
+--component-pagination-text-current: #FFA8CD;
+--component-pagination-bg-current: #2C2242;
+--component-pagination-bg-hover: #F2F1EE;
+--component-pagination-focus-ring: #FFA8CD;
 --component-navigation-item-bg-selected: #2C2242;
 --component-chip-bg-selected: #2C2242;
 --component-chip-bg-selected-strong: #FFA8CD;

package/index.d.ts

@@ -52,6 +52,8 @@ export { MultiSelect } from "./MultiSelect";
 export type { MultiSelectProps } from "./MultiSelect/index.props";
 export { NumberInput } from "./NumberInput";
 export type { NumberInputGroupStyle, NumberInputProps, NumberInputSize, NumberInputValues, } from "./NumberInput";
+export { Pagination, getPaginationItems } from "./Pagination";
+export type { PaginationItem, PaginationMode, PaginationProps, PaginationSize, } from "./Pagination";
 export { Portal } from "./Portal";
 export type { PortalProps } from "./Portal/index.props";
 export { Progress } from "./Progress";

package/index.js

@@ -27,6 +27,7 @@ var index$f = require('./Menu/components/MenuItem/index.js');
 var index$g = require('./Modal/index.js');
 var index$l = require('./MultiSelect/index.js');
 require('./NumberInput/index.js');
+require('./Pagination/index.js');
 var index$m = require('./Portal/index.js');
 require('./Progress/index.js');
 var index$n = require('./RadioGroup/index.js');
@@ -78,6 +79,7 @@ var index$j = require('./Modal/components/Header/index.js');
 var index$k = require('./Modal/components/Title/index.js');
 var More = require('./Icons/More.js');
 var NumberInput = require('./NumberInput/NumberInput.js');
+var Pagination = require('./Pagination/Pagination.js');
 var Plus = require('./Icons/Plus.js');
 var Progress = require('./Progress/Progress.js');
 var Rating = require('./Rating/Rating.js');
@@ -87,6 +89,7 @@ var Shield = require('./Icons/Shield.js');
 var Slider = require('./Slider/Slider.js');
 var Trash = require('./Icons/Trash.js');
 var User = require('./Icons/User.js');
+var helpers = require('./Pagination/helpers.js');
 
 
 
@@ -166,6 +169,7 @@ exports.ModalHeader = index$j.Header;
 exports.ModalTitle = index$k.Title;
 exports.More = More.More;
 exports.NumberInput = NumberInput.NumberInput;
+exports.Pagination = Pagination.Pagination;
 exports.Plus = Plus.Plus;
 exports.Progress = Progress.Progress;
 exports.Rating = Rating.Rating;
@@ -175,3 +179,4 @@ exports.Shield = Shield.Shield;
 exports.Slider = Slider.Slider;
 exports.Trash = Trash.Trash;
 exports.User = User.User;
+exports.getPaginationItems = helpers.getPaginationItems;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.93",
+  "version": "0.8.94",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",

package/theme_ba_variables.css

@@ -608,6 +608,11 @@
 --component-calendar-fade-inline-size: 2.5rem;
 --component-calendar-day-size: 2rem;
 --component-calendar-day-radius: 0.375rem;
+--component-pagination-text: #163300;
+--component-pagination-text-current: #9FE870;
+--component-pagination-bg-current: #163300;
+--component-pagination-bg-hover: #EDF0EA;
+--component-pagination-focus-ring: #9FE870;
 --component-navigation-item-bg-selected: #163300;
 --component-chip-bg-selected: #163300;
 --component-chip-bg-selected-strong: #9FE870;

package/theme_jaipur_variables.css

@@ -608,6 +608,11 @@
 --component-calendar-fade-inline-size: 2.5rem;
 --component-calendar-day-size: 2rem;
 --component-calendar-day-radius: 0.375rem;
+--component-pagination-text: #2C2242;
+--component-pagination-text-current: #FFA8CD;
+--component-pagination-bg-current: #2C2242;
+--component-pagination-bg-hover: #F2F1EE;
+--component-pagination-focus-ring: #FFA8CD;
 --component-navigation-item-bg-selected: #2C2242;
 --component-chip-bg-selected: #2C2242;
 --component-chip-bg-selected-strong: #FFA8CD;