colibri-ui 0.8.92 → 0.8.94

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/Select/index.d.ts

@@ -1,3 +1,3 @@
 import type { JSX } from "react";
 import type { SelectProps } from "./index.props";
-export declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, }: SelectProps<T>) => JSX.Element;
+export declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, "aria-label": ariaLabel, }: SelectProps<T>) => JSX.Element;

package/esm/Select/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useId, useMemo } from 'react';
 import clsx from 'clsx';
 import { Chevron } from '../Icons/Chevron.js';
 import { InputRoot } from '../base/InputRoot/index.js';
@@ -23,9 +23,14 @@ const Select = ({
   fullWidth = false,
   customInputRoot,
   className,
-  onChange
+  onChange,
+  "aria-label": ariaLabel
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const id = useId();
+  const labelId = label ? `${id}-label` : undefined;
+  const valueId = `${id}-value`;
+  const hintId = hint ? `${id}-hint` : undefined;
   const preparedOptions = useMemo(() => options.map(({
     value: lvalue,
     label: llabel,
@@ -48,7 +53,9 @@ const Select = ({
     }, className),
     required: required,
     label: label,
+    labelId: labelId,
     hint: hint,
+    hintId: hintId,
     hasError: hasError
   }, /*#__PURE__*/React.createElement(Dropdown, {
     placement: "bottom-start",
@@ -64,7 +71,11 @@ const Select = ({
     }),
     samewidth: true
   }, customInputRoot ? customInputRoot : (/*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
+    "aria-describedby": hintId,
+    "aria-disabled": disabled || undefined,
+    "aria-label": labelId ? undefined : ariaLabel,
+    "aria-labelledby": labelId ? `${labelId} ${valueId}` : undefined,
+    tabIndex: disabled ? -1 : 0,
     role: "button",
     style: {
       width: fullWidth ? "100%" : "fit-content"
@@ -84,6 +95,7 @@ const Select = ({
     }),
     disabled: Boolean(disabled)
   }, /*#__PURE__*/React.createElement("div", {
+    id: valueId,
     className: styles["base-input"],
     "data-testid": "base-input"
   }, preparedLabel !== null && preparedLabel !== void 0 ? preparedLabel : (/*#__PURE__*/React.createElement("span", {

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

@@ -10,7 +10,9 @@ export interface IOption<T extends string> {
     label: ReactNode;
     value: T;
 }
-export interface SelectProps<T extends string> extends Omit<FormFieldProps, "children"> {
+export interface SelectProps<T extends string> extends Omit<FormFieldProps, "children" | "labelId"> {
+    /** Accessible name of the trigger when no visible `label` is passed. */
+    "aria-label"?: string;
     className?: string;
     customInputRoot?: ReactNode;
     disabled?: boolean;

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/TimeSelect/index.js

@@ -22,7 +22,8 @@ const TimeSelect = ({
   size,
   zIndex,
   hasError,
-  hint
+  hint,
+  "aria-label": ariaLabel
 }) => {
   const baseOptions = useMemo(() => generateSuggest(interval).map(item => ({
     value: item.time,
@@ -37,6 +38,7 @@ const TimeSelect = ({
     });
   }), [baseOptions, currentDate, selectedDate, allowedTimeRange, interval]);
   return /*#__PURE__*/React.createElement(Select, {
+    "aria-label": ariaLabel,
     className: className,
     customInputRoot: customInputRoot,
     fontSize: fontSize,

package/esm/base/FormField/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { FormFieldProps } from "./index.props";
-export declare const FormField: ({ label, hint, children, hasError, hintId, htmlFor, required, className, ref, }: FormFieldProps) => React.JSX.Element;
+export declare const FormField: ({ label, hint, children, hasError, hintId, htmlFor, labelId, required, className, ref, }: FormFieldProps) => React.JSX.Element;

package/esm/base/FormField/index.js

@@ -10,6 +10,7 @@ const FormField = ({
   hasError,
   hintId,
   htmlFor,
+  labelId,
   required,
   className,
   ref
@@ -21,7 +22,8 @@ const FormField = ({
     [styles.label_required]: Boolean(required)
   }),
   tag: "label",
-  htmlFor: htmlFor
+  htmlFor: htmlFor,
+  id: labelId
 }, label)), children, hint && (/*#__PURE__*/React.createElement(Typography, {
   id: hintId,
   className: clsx({

package/esm/base/FormField/index.props.d.ts

@@ -9,6 +9,8 @@ export type FormFieldProps = PropsWithChildren<{
     /** Id of the control the label belongs to. */
     htmlFor?: string;
     label?: ReactNode;
+    /** Id of the label, referenced by the control's `aria-labelledby`. */
+    labelId?: string;
     ref?: React.Ref<HTMLDivElement>;
     required?: boolean;
 }>;

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.92",
+  "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;