@cube-dev/ui-kit 0.155.0 → 0.157.0

package/dist/components/layout/Board/use-board-selection.js

@@ -0,0 +1,113 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useI18n } from "../../../i18n/useI18n.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+//#region src/components/layout/Board/use-board-selection.ts
+const EMPTY_KEYS = [];
+/** Zero-width space. See `announce` below. */
+const ANNOUNCEMENT_NUDGE = "​";
+/**
+* Headless selection state for a single board.
+*
+* Deliberately shaped like `useBoardLayout`: controlled (`selectedKeys`) or
+* uncontrolled (`defaultSelectedKeys`), with a synchronous ref mirror for the
+* drag engine and a single commit path so every entry point — click, keyboard,
+* marquee, pruning — produces exactly one `onSelectionChange` and one
+* announcement.
+*/
+function useBoardSelection(options) {
+	const { selectionMode, selectedKeys: controlledKeys, defaultSelectedKeys, onSelectionChange, layout, getLabel } = options;
+	const { t } = useI18n();
+	const isControlled = controlledKeys !== void 0;
+	const isEnabled = selectionMode !== "none";
+	const [uncontrolledKeys, setUncontrolledKeys] = useState(() => defaultSelectedKeys ?? EMPTY_KEYS);
+	const orderedIds = useMemo(() => layout.map((it) => it.i), [layout]);
+	const selectedKeys = useMemo(() => {
+		if (!isEnabled) return EMPTY_KEYS;
+		const requested = new Set(controlledKeys ?? uncontrolledKeys);
+		return orderedIds.filter((id) => requested.has(id));
+	}, [
+		isEnabled,
+		controlledKeys,
+		uncontrolledKeys,
+		orderedIds
+	]);
+	const selectedKeySet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+	const selectedKeysRef = useRef(selectedKeySet);
+	selectedKeysRef.current = selectedKeySet;
+	const onSelectionChangeEvent = useEvent((next) => onSelectionChange?.(next));
+	const [announcement, setAnnouncement] = useState("");
+	const announcementParityRef = useRef(false);
+	const announce = useEvent((keys, hadSelection) => {
+		let message;
+		if (keys.length === 0) {
+			if (!hadSelection) return;
+			message = t("board.selectionCleared", "Selection cleared");
+		} else if (keys.length === 1) message = t("board.widgetSelected", "{{name}} selected", { name: getLabel(keys[0]) });
+		else message = t("board.widgetsSelected", "{{count}} widgets selected", { count: keys.length });
+		announcementParityRef.current = !announcementParityRef.current;
+		setAnnouncement(announcementParityRef.current ? message : `${message}${ANNOUNCEMENT_NUDGE}`);
+	});
+	const commit = useEvent((nextKeys) => {
+		const requested = new Set(nextKeys);
+		const next = orderedIds.filter((id) => requested.has(id));
+		const current = selectedKeysRef.current;
+		if (next.length === current.size && next.every((id) => current.has(id))) return;
+		selectedKeysRef.current = new Set(next);
+		if (!isControlled) setUncontrolledKeys(next);
+		announce(next, current.size > 0);
+		onSelectionChangeEvent(next);
+	});
+	useEffect(() => {
+		if (isControlled || !isEnabled || uncontrolledKeys.length === 0) return;
+		const live = new Set(orderedIds);
+		const pruned = uncontrolledKeys.filter((key) => live.has(key));
+		if (pruned.length !== uncontrolledKeys.length) {
+			selectedKeysRef.current = new Set(pruned);
+			setUncontrolledKeys(pruned);
+			onSelectionChangeEvent(pruned);
+		}
+	}, [
+		isControlled,
+		isEnabled,
+		uncontrolledKeys,
+		orderedIds,
+		onSelectionChangeEvent
+	]);
+	return {
+		selectedKeySet,
+		selectedKeysRef,
+		setSelection: useEvent((keys) => {
+			if (!isEnabled) return;
+			commit(selectionMode === "single" ? firstOf(keys) : keys);
+		}),
+		select: useEvent((key, additive) => {
+			if (!isEnabled) return;
+			if (selectionMode === "single") {
+				commit(additive && selectedKeysRef.current.has(key) ? [] : [key]);
+				return;
+			}
+			if (!additive) {
+				commit([key]);
+				return;
+			}
+			const next = new Set(selectedKeysRef.current);
+			if (!next.delete(key)) next.add(key);
+			commit(next);
+		}),
+		clearSelection: useEvent(() => {
+			if (!isEnabled) return;
+			commit([]);
+		}),
+		announcement
+	};
+}
+function firstOf(keys) {
+	for (const key of keys) return [key];
+	return [];
+}
+
+//#endregion
+export { useBoardSelection };
+//# sourceMappingURL=use-board-selection.js.map

package/dist/components/layout/Board/use-board-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-board-selection.js","names":[],"sources":["../../../../src/components/layout/Board/use-board-selection.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\n\nimport type { MutableRefObject } from 'react';\nimport type { LayoutItem } from './grid-core';\n\nexport type BoardSelectionMode = 'none' | 'single' | 'multiple';\n\nexport interface UseBoardSelectionOptions {\n  selectionMode: BoardSelectionMode;\n  /** Controlled selection. */\n  selectedKeys?: string[];\n  /** Initial selection for uncontrolled usage. */\n  defaultSelectedKeys?: string[];\n  onSelectionChange?: (keys: string[]) => void;\n  /** Live layout — supplies both the key order and the set of valid keys. */\n  layout: LayoutItem[];\n  /** Accessible name of a widget, for the single-selection announcement. */\n  getLabel: (key: string) => string;\n}\n\nexport interface UseBoardSelectionResult {\n  /** The effective selection: provided keys ∩ live layout, in layout order. */\n  selectedKeySet: ReadonlySet<string>;\n  /**\n   * Synchronously-updated mirror of `selectedKeySet`. Handlers that run before\n   * React re-renders — notably `useMove`'s `onMoveStart`, which has to decide\n   * single-drag vs. group-drag on the spot — must read this rather than the\n   * state, which would be one render stale.\n   */\n  selectedKeysRef: MutableRefObject<ReadonlySet<string>>;\n  /** Replace the selection wholesale (marquee, programmatic). */\n  setSelection: (keys: Iterable<string>) => void;\n  /**\n   * Apply a single-key gesture.\n   *\n   * `additive` (a modifier-held click, or any keyboard toggle) flips the key's\n   * membership. A plain gesture replaces the selection with just this key — it\n   * never clears, because a widget is a large surface the user also clicks to\n   * work with, and having the second click silently deselect reads as a bug.\n   * Deselecting is <kbd>Escape</kbd>, or an additive gesture.\n   */\n  select: (key: string, additive: boolean) => void;\n  clearSelection: () => void;\n  /** Live-region text. Only changes when the selection commits. */\n  announcement: string;\n}\n\nconst EMPTY_KEYS: readonly string[] = [];\n\n/** Zero-width space. See `announce` below. */\nconst ANNOUNCEMENT_NUDGE = '\\u200B';\n\n/**\n * Headless selection state for a single board.\n *\n * Deliberately shaped like `useBoardLayout`: controlled (`selectedKeys`) or\n * uncontrolled (`defaultSelectedKeys`), with a synchronous ref mirror for the\n * drag engine and a single commit path so every entry point — click, keyboard,\n * marquee, pruning — produces exactly one `onSelectionChange` and one\n * announcement.\n */\nexport function useBoardSelection(\n  options: UseBoardSelectionOptions,\n): UseBoardSelectionResult {\n  const {\n    selectionMode,\n    selectedKeys: controlledKeys,\n    defaultSelectedKeys,\n    onSelectionChange,\n    layout,\n    getLabel,\n  } = options;\n\n  const { t } = useI18n();\n  const isControlled = controlledKeys !== undefined;\n  const isEnabled = selectionMode !== 'none';\n\n  const [uncontrolledKeys, setUncontrolledKeys] = useState<readonly string[]>(\n    () => defaultSelectedKeys ?? EMPTY_KEYS,\n  );\n\n  // Layout order, not click order: a marquee has no meaningful click order, and\n  // a stable order makes group operations reproducible for consumers.\n  const orderedIds = useMemo(() => layout.map((it) => it.i), [layout]);\n\n  const selectedKeys = useMemo(() => {\n    if (!isEnabled) {\n      return EMPTY_KEYS as string[];\n    }\n\n    const requested = new Set(controlledKeys ?? uncontrolledKeys);\n\n    // Intersecting with the live layout on every render is what makes a stale\n    // key harmless: it simply highlights nothing. No effect, no flash, and no\n    // need for the consumer to clean up after removing a widget.\n    return orderedIds.filter((id) => requested.has(id));\n  }, [isEnabled, controlledKeys, uncontrolledKeys, orderedIds]);\n\n  const selectedKeySet = useMemo(() => new Set(selectedKeys), [selectedKeys]);\n\n  const selectedKeysRef = useRef<ReadonlySet<string>>(selectedKeySet);\n  selectedKeysRef.current = selectedKeySet;\n\n  const onSelectionChangeEvent = useEvent((next: string[]) =>\n    onSelectionChange?.(next),\n  );\n\n  // ---- Announcements --------------------------------------------------------\n\n  const [announcement, setAnnouncement] = useState('');\n  // Screen readers skip a live-region update whose text is identical to the\n  // previous one, which would silently drop the very common select → deselect →\n  // reselect sequence. Alternating an invisible suffix keeps every update\n  // distinct without changing what is spoken.\n  const announcementParityRef = useRef(false);\n\n  const announce = useEvent((keys: string[], hadSelection: boolean) => {\n    let message: string;\n\n    if (keys.length === 0) {\n      if (!hadSelection) {\n        return;\n      }\n      message = t('board.selectionCleared', 'Selection cleared');\n    } else if (keys.length === 1) {\n      message = t('board.widgetSelected', '{{name}} selected', {\n        name: getLabel(keys[0]!),\n      });\n    } else {\n      message = t('board.widgetsSelected', '{{count}} widgets selected', {\n        count: keys.length,\n      });\n    }\n\n    announcementParityRef.current = !announcementParityRef.current;\n    setAnnouncement(\n      announcementParityRef.current\n        ? message\n        : `${message}${ANNOUNCEMENT_NUDGE}`,\n    );\n  });\n\n  // ---- Commit ---------------------------------------------------------------\n\n  const commit = useEvent((nextKeys: Iterable<string>) => {\n    const requested = new Set(nextKeys);\n    const next = orderedIds.filter((id) => requested.has(id));\n    const current = selectedKeysRef.current;\n\n    if (next.length === current.size && next.every((id) => current.has(id))) {\n      return;\n    }\n\n    // Keep the ref in step *before* the state lands, so a gesture that reads it\n    // later in the same tick sees the new selection.\n    selectedKeysRef.current = new Set(next);\n\n    if (!isControlled) {\n      setUncontrolledKeys(next);\n    }\n\n    announce(next, current.size > 0);\n    onSelectionChangeEvent(next);\n  });\n\n  // ---- Pruning --------------------------------------------------------------\n\n  // Uncontrolled state is the only copy of the selection, so a removed widget\n  // has to be dropped from it and the change reported. In controlled mode the\n  // consumer removed the widget and owns its own state — emitting here would\n  // fight the controlled contract and can loop.\n  useEffect(() => {\n    if (isControlled || !isEnabled || uncontrolledKeys.length === 0) {\n      return;\n    }\n\n    const live = new Set(orderedIds);\n    const pruned = uncontrolledKeys.filter((key) => live.has(key));\n\n    if (pruned.length !== uncontrolledKeys.length) {\n      selectedKeysRef.current = new Set(pruned);\n      setUncontrolledKeys(pruned);\n      onSelectionChangeEvent(pruned);\n    }\n  }, [\n    isControlled,\n    isEnabled,\n    uncontrolledKeys,\n    orderedIds,\n    onSelectionChangeEvent,\n  ]);\n\n  // ---- Gestures -------------------------------------------------------------\n\n  const setSelection = useEvent((keys: Iterable<string>) => {\n    if (!isEnabled) {\n      return;\n    }\n    commit(selectionMode === 'single' ? firstOf(keys) : keys);\n  });\n\n  const select = useEvent((key: string, additive: boolean) => {\n    if (!isEnabled) {\n      return;\n    }\n\n    if (selectionMode === 'single') {\n      // A modifier can still toggle the one selected widget off; a plain\n      // gesture always lands on the widget the user aimed at.\n      commit(additive && selectedKeysRef.current.has(key) ? [] : [key]);\n\n      return;\n    }\n\n    if (!additive) {\n      commit([key]);\n\n      return;\n    }\n\n    const next = new Set(selectedKeysRef.current);\n    if (!next.delete(key)) {\n      next.add(key);\n    }\n    commit(next);\n  });\n\n  const clearSelection = useEvent(() => {\n    if (!isEnabled) {\n      return;\n    }\n    commit([]);\n  });\n\n  return {\n    selectedKeySet,\n    selectedKeysRef,\n    setSelection,\n    select,\n    clearSelection,\n    announcement,\n  };\n}\n\nfunction firstOf(keys: Iterable<string>): string[] {\n  for (const key of keys) {\n    return [key];\n  }\n\n  return [];\n}\n"],"mappings":"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"}

package/dist/components/layout/Flex.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/layout/Flow.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/layout/Grid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/layout/Panel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/layout/Prefix.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";

package/dist/components/layout/ResizablePanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../_internal/hooks/use-event.js";

package/dist/components/layout/Space.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/layout/Suffix.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { CONTAINER_STYLES, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";

package/dist/components/navigation/Pagination/Pagination.d.ts

@@ -0,0 +1,9 @@
+
+import { CubePaginationProps } from "./types.js";
+import * as react from "react";
+
+//#region src/components/navigation/Pagination/Pagination.d.ts
+declare const _Pagination: react.ForwardRefExoticComponent<CubePaginationProps & react.RefAttributes<HTMLElement>>;
+//#endregion
+export { _Pagination };
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/components/navigation/Pagination/Pagination.js

@@ -0,0 +1,258 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useI18n } from "../../../i18n/useI18n.js";
+import { useFormatter } from "../../../i18n/useFormatter.js";
+import { BackwardIcon } from "../../../icons/BackwardIcon.js";
+import { ForwardIcon } from "../../../icons/ForwardIcon.js";
+import { LeftIcon } from "../../../icons/LeftIcon.js";
+import { RightIcon } from "../../../icons/RightIcon.js";
+import { Button } from "../../actions/index.js";
+import { __Select } from "../../fields/Select/Select.js";
+import { clampPage, getPageInfo, getPaginationRange } from "./use-pagination.js";
+import { OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useControlledState } from "@react-stately/utils";
+
+//#region src/components/navigation/Pagination/Pagination.tsx
+const PaginationElement = tasty({
+	qa: "Pagination",
+	as: "nav",
+	styles: {
+		display: "flex",
+		flow: "row",
+		gap: "1x",
+		placeItems: "center",
+		placeContent: "start",
+		Summary: {
+			preset: {
+				"": "t3",
+				"size=xsmall": "t4"
+			},
+			color: "#dark-03",
+			whiteSpace: "nowrap"
+		},
+		Controls: {
+			display: "flex",
+			flow: "row",
+			gap: ".5x",
+			placeItems: "center"
+		},
+		Gap: {
+			display: "grid",
+			placeItems: "center",
+			width: "min $gap-size",
+			height: "$gap-size",
+			preset: "t3",
+			color: "#dark-04",
+			userSelect: "none"
+		},
+		Pages: {
+			display: "flex",
+			flow: "row",
+			gap: "1bw",
+			placeItems: "center"
+		},
+		"$gap-size": {
+			"": "$size-sm",
+			"size=xsmall": "$size-xs",
+			"size=medium": "$size-md"
+		}
+	},
+	styleProps: OUTER_STYLES
+});
+const NavButton = tasty(Button, {
+	type: "clear",
+	styles: { border: true }
+});
+const PageButton = tasty(Button, { type: "clear" });
+function formatRange(info) {
+	return `${(info.page - 1) * info.pageSize + 1}–${info.total > 0 ? Math.min(info.page * info.pageSize, info.total) : info.page * info.pageSize}`;
+}
+function Pagination(props, ref) {
+	const { page: pageProp, defaultPage, onPageChange, totalPages: totalPagesProp, total, pageSize: pageSizeProp, defaultPageSize, pageSizeOptions, onPageSizeChange, type = "numbers", siblingCount = 1, boundaryCount = 1, size = "small", isDisabled, hasNextPage, isCompact = false, summary = false, labelFormatter, ariaLabel, pageSizeSelectStyles, qa, mods, ...rest } = props;
+	const { t } = useI18n();
+	const { formatNumber } = useFormatter();
+	const [pageSize, setPageSize] = useControlledState(pageSizeProp, defaultPageSize ?? 50, onPageSizeChange);
+	const [page, setPage] = useControlledState(pageProp, defaultPage ?? 1, onPageChange);
+	const isCountable = totalPagesProp != null || total != null;
+	const info = isCountable ? getPageInfo({
+		page,
+		pageSize,
+		total: total ?? 0,
+		totalPages: totalPagesProp
+	}) : {
+		page: clampPage(page, Number.MAX_SAFE_INTEGER),
+		pageSize,
+		totalPages: 0,
+		total: 0,
+		from: 0,
+		to: 0
+	};
+	const { totalPages } = info;
+	const goTo = useEvent((next) => {
+		const clamped = isCountable ? clampPage(next, totalPages) : Math.max(next, 1);
+		if (clamped !== info.page) setPage(clamped);
+	});
+	const onPageSizeSelectionChange = useEvent((value) => {
+		setPageSize(Number(value));
+		setPage(1);
+	});
+	const onPageSelectionChange = useEvent((value) => {
+		goTo(Number(value));
+	});
+	const pageItems = useMemo(() => type === "numbers" && isCountable ? getPaginationRange({
+		page: info.page,
+		totalPages,
+		siblingCount,
+		boundaryCount
+	}) : [], [
+		type,
+		isCountable,
+		info.page,
+		totalPages,
+		siblingCount,
+		boundaryCount
+	]);
+	const selectEntries = useMemo(() => type === "select" && isCountable && totalPages <= 200 ? Array.from({ length: totalPages }, (_, i) => i + 1) : null, [
+		type,
+		isCountable,
+		totalPages
+	]);
+	const isFirst = info.page <= 1;
+	const isLast = isCountable ? info.page >= totalPages : !hasNextPage;
+	const styles = extractStyles(props, OUTER_STYLES);
+	const summaryNode = summary === false ? null : typeof summary === "function" ? summary(info) : info.total > 0 ? t("pagination.summary", "{{from}}–{{to}} of {{total}}", {
+		from: formatNumber(info.from),
+		to: formatNumber(info.to),
+		total: formatNumber(info.total)
+	}) : null;
+	function renderPageControl() {
+		if (selectEntries) return /* @__PURE__ */ jsx(__Select, {
+			qa: "PaginationPageSelect",
+			size,
+			isDisabled,
+			"aria-label": t("pagination.selectPage", "Select page"),
+			selectedKey: String(info.page),
+			width: "min 15x",
+			styles: pageSizeSelectStyles,
+			onSelectionChange: onPageSelectionChange,
+			children: selectEntries.map((entry) => {
+				const entryInfo = {
+					...info,
+					page: entry
+				};
+				const label = labelFormatter?.(entryInfo) ?? (info.total > 0 ? formatRange(entryInfo) : t("pagination.page", "Page {{page}}", { page: entry }));
+				return /* @__PURE__ */ jsx(__Select.Item, {
+					textValue: String(label),
+					children: label
+				}, entry);
+			})
+		});
+		if (type === "numbers" && pageItems.length > 0) return /* @__PURE__ */ jsx("div", {
+			"data-element": "Pages",
+			children: pageItems.map((entry, index) => entry === "gap" ? /* @__PURE__ */ jsx("div", {
+				"data-element": "Gap",
+				"aria-hidden": "true",
+				children: "…"
+			}, `gap-${index}`) : /* @__PURE__ */ jsx(PageButton, {
+				qa: `PaginationPage_${entry}`,
+				size,
+				type: entry === info.page ? "outline" : "clear",
+				isDisabled,
+				"aria-label": t("pagination.page", "Page {{page}}", { page: entry }),
+				"aria-current": entry === info.page ? "page" : void 0,
+				onPress: () => goTo(entry),
+				children: entry
+			}, entry))
+		});
+		if (!isCountable) return null;
+		return /* @__PURE__ */ jsx("div", {
+			"data-element": "Summary",
+			"data-qa": "PaginationPageLabel",
+			children: t("pagination.pageOf", "{{page}} of {{totalPages}}", {
+				page: info.page,
+				totalPages
+			})
+		});
+	}
+	const showEdgeButtons = !isCompact && isCountable;
+	return /* @__PURE__ */ jsxs(PaginationElement, {
+		...filterBaseProps(rest, { eventProps: true }),
+		ref,
+		qa: qa || "Pagination",
+		styles,
+		mods: {
+			size,
+			...mods
+		},
+		"aria-label": ariaLabel ?? t("pagination.ariaLabel", "Pagination"),
+		children: [
+			summaryNode ? /* @__PURE__ */ jsx("div", {
+				"data-element": "Summary",
+				children: summaryNode
+			}) : null,
+			pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsx(__Select, {
+				qa: "PaginationPageSizeSelect",
+				size,
+				isDisabled,
+				"aria-label": t("pagination.itemsPerPage", "Items per page"),
+				selectedKey: String(pageSize),
+				styles: pageSizeSelectStyles,
+				onSelectionChange: onPageSizeSelectionChange,
+				children: pageSizeOptions.map((option) => {
+					const label = t("pagination.itemsPerPageOption", "{{size}} / page", { size: option });
+					return /* @__PURE__ */ jsx(__Select.Item, {
+						textValue: label,
+						children: label
+					}, option);
+				})
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				"data-element": "Controls",
+				children: [
+					showEdgeButtons ? /* @__PURE__ */ jsx(NavButton, {
+						qa: "PaginationFirstButton",
+						size,
+						icon: /* @__PURE__ */ jsx(BackwardIcon, {}),
+						isDisabled: isFirst || isDisabled,
+						"aria-label": t("pagination.firstPage", "First page"),
+						onPress: () => goTo(1)
+					}) : null,
+					/* @__PURE__ */ jsx(NavButton, {
+						qa: "PaginationPrevButton",
+						size,
+						icon: /* @__PURE__ */ jsx(LeftIcon, {}),
+						isDisabled: isFirst || isDisabled,
+						"aria-label": t("pagination.previousPage", "Previous page"),
+						onPress: () => goTo(info.page - 1)
+					}),
+					renderPageControl(),
+					/* @__PURE__ */ jsx(NavButton, {
+						qa: "PaginationNextButton",
+						size,
+						icon: /* @__PURE__ */ jsx(RightIcon, {}),
+						isDisabled: isLast || isDisabled,
+						"aria-label": t("pagination.nextPage", "Next page"),
+						onPress: () => goTo(info.page + 1)
+					}),
+					showEdgeButtons ? /* @__PURE__ */ jsx(NavButton, {
+						qa: "PaginationLastButton",
+						size,
+						icon: /* @__PURE__ */ jsx(ForwardIcon, {}),
+						isDisabled: isLast || isDisabled,
+						"aria-label": t("pagination.lastPage", "Last page"),
+						onPress: () => goTo(totalPages)
+					}) : null
+				]
+			})
+		]
+	});
+}
+const _Pagination = forwardRef(Pagination);
+_Pagination.displayName = "Pagination";
+
+//#endregion
+export { _Pagination };
+//# sourceMappingURL=Pagination.js.map

package/dist/components/navigation/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","names":["Select"],"sources":["../../../../src/components/navigation/Pagination/Pagination.tsx"],"sourcesContent":["import { useControlledState } from '@react-stately/utils';\nimport { filterBaseProps, OUTER_STYLES, tasty } from '@tenphi/tasty';\nimport { forwardRef, useMemo } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useFormatter, useI18n } from '../../../i18n';\nimport { BackwardIcon, ForwardIcon, LeftIcon, RightIcon } from '../../../icons';\nimport { extractStyles } from '../../../utils/styles';\nimport { Button } from '../../actions';\nimport { Select } from '../../fields/Select';\n\nimport { clampPage, getPageInfo, getPaginationRange } from './use-pagination';\n\nimport type { ForwardedRef, ReactElement } from 'react';\nimport type { CubePaginationProps, CubeTablePageInfo } from './types';\n\nconst PaginationElement = tasty({\n  qa: 'Pagination',\n  as: 'nav',\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    gap: '1x',\n    placeItems: 'center',\n    placeContent: 'start',\n\n    Summary: {\n      // Follows the control's size rather than being fixed, so the summary\n      // matches whatever the buttons beside it are.\n      preset: { '': 't3', 'size=xsmall': 't4' },\n      color: '#dark-03',\n      whiteSpace: 'nowrap',\n    },\n\n    Controls: {\n      display: 'flex',\n      flow: 'row',\n      gap: '.5x',\n      placeItems: 'center',\n    },\n\n    Gap: {\n      display: 'grid',\n      placeItems: 'center',\n      width: 'min $gap-size',\n      height: '$gap-size',\n      preset: 't3',\n      color: '#dark-04',\n      userSelect: 'none',\n    },\n\n    /**\n     * The page numbers sit tighter than the nav buttons around them: they read\n     * as one run of pages, not as separate controls, and a hairline is enough\n     * to keep the current page's outline off its neighbours.\n     */\n    Pages: {\n      display: 'flex',\n      flow: 'row',\n      gap: '1bw',\n      placeItems: 'center',\n    },\n\n    '$gap-size': {\n      '': '$size-sm',\n      'size=xsmall': '$size-xs',\n      'size=medium': '$size-md',\n    },\n  },\n  styleProps: OUTER_STYLES,\n});\n\nconst NavButton = tasty(Button, {\n  type: 'clear',\n  styles: { border: true },\n});\n\n// Page buttons are borderless so the current page — which renders as `outline`\n// and therefore draws its own border — is the only bordered one in the run.\nconst PageButton = tasty(Button, {\n  type: 'clear',\n});\n\nfunction formatRange(info: CubeTablePageInfo): string {\n  const start = (info.page - 1) * info.pageSize + 1;\n  const end =\n    info.total > 0\n      ? Math.min(info.page * info.pageSize, info.total)\n      : info.page * info.pageSize;\n\n  return `${start}–${end}`;\n}\n\nfunction Pagination(\n  props: CubePaginationProps,\n  ref: ForwardedRef<HTMLElement>,\n): ReactElement {\n  const {\n    page: pageProp,\n    defaultPage,\n    onPageChange,\n    totalPages: totalPagesProp,\n    total,\n    pageSize: pageSizeProp,\n    defaultPageSize,\n    pageSizeOptions,\n    onPageSizeChange,\n    type = 'numbers',\n    siblingCount = 1,\n    boundaryCount = 1,\n    size = 'small',\n    isDisabled,\n    hasNextPage,\n    isCompact = false,\n    summary = false,\n    labelFormatter,\n    ariaLabel,\n    pageSizeSelectStyles,\n    qa,\n    mods,\n    ...rest\n  } = props;\n\n  const { t } = useI18n();\n  const { formatNumber } = useFormatter();\n\n  const [pageSize, setPageSize] = useControlledState<number>(\n    pageSizeProp as number,\n    defaultPageSize ?? 50,\n    onPageSizeChange as (v: number) => void,\n  );\n  const [page, setPage] = useControlledState<number>(\n    pageProp as number,\n    defaultPage ?? 1,\n    onPageChange as (v: number) => void,\n  );\n\n  // Unknown total: prev/next only, with `hasNextPage` driving the next button.\n  // The page must NOT be clamped in that mode — there is nothing to clamp to.\n  const isCountable = totalPagesProp != null || total != null;\n\n  const info: CubeTablePageInfo = isCountable\n    ? getPageInfo({\n        page,\n        pageSize,\n        total: total ?? 0,\n        totalPages: totalPagesProp,\n      })\n    : {\n        page: clampPage(page, Number.MAX_SAFE_INTEGER),\n        pageSize,\n        totalPages: 0,\n        total: 0,\n        from: 0,\n        to: 0,\n      };\n\n  const { totalPages } = info;\n\n  const goTo = useEvent((next: number) => {\n    const clamped = isCountable\n      ? clampPage(next, totalPages)\n      : Math.max(next, 1);\n\n    if (clamped !== info.page) setPage(clamped);\n  });\n\n  const onPageSizeSelectionChange = useEvent((value: any) => {\n    setPageSize(Number(value));\n    setPage(1);\n  });\n\n  const onPageSelectionChange = useEvent((value: any) => {\n    goTo(Number(value));\n  });\n\n  const pageItems = useMemo(\n    () =>\n      type === 'numbers' && isCountable\n        ? getPaginationRange({\n            page: info.page,\n            totalPages,\n            siblingCount,\n            boundaryCount,\n          })\n        : [],\n    [type, isCountable, info.page, totalPages, siblingCount, boundaryCount],\n  );\n\n  // `type=\"select\"` materializes one entry per page, so it is only safe for\n  // small page counts. Above the cap we fall back to `compact`, which reads the\n  // same but renders a single label.\n  const selectEntries = useMemo(\n    () =>\n      type === 'select' && isCountable && totalPages <= 200\n        ? Array.from({ length: totalPages }, (_, i) => i + 1)\n        : null,\n    [type, isCountable, totalPages],\n  );\n\n  const isFirst = info.page <= 1;\n  const isLast = isCountable ? info.page >= totalPages : !hasNextPage;\n\n  const styles = extractStyles(props, OUTER_STYLES);\n\n  const summaryNode =\n    summary === false\n      ? null\n      : typeof summary === 'function'\n        ? summary(info)\n        : info.total > 0\n          ? // Numbers are formatted here rather than left to i18next, which\n            // interpolates them raw (\"1204\", not \"1,204\").\n            t('pagination.summary', '{{from}}–{{to}} of {{total}}', {\n              from: formatNumber(info.from),\n              to: formatNumber(info.to),\n              total: formatNumber(info.total),\n            })\n          : null;\n\n  function renderPageControl() {\n    if (selectEntries) {\n      return (\n        <Select\n          qa=\"PaginationPageSelect\"\n          size={size}\n          isDisabled={isDisabled}\n          aria-label={t('pagination.selectPage', 'Select page')}\n          selectedKey={String(info.page)}\n          width=\"min 15x\"\n          styles={pageSizeSelectStyles}\n          onSelectionChange={onPageSelectionChange}\n        >\n          {selectEntries.map((entry) => {\n            const entryInfo = { ...info, page: entry };\n            const label =\n              labelFormatter?.(entryInfo) ??\n              (info.total > 0\n                ? formatRange(entryInfo)\n                : t('pagination.page', 'Page {{page}}', { page: entry }));\n\n            return (\n              <Select.Item key={entry} textValue={String(label)}>\n                {label}\n              </Select.Item>\n            );\n          })}\n        </Select>\n      );\n    }\n\n    if (type === 'numbers' && pageItems.length > 0) {\n      return (\n        <div data-element=\"Pages\">\n          {pageItems.map((entry, index) =>\n            entry === 'gap' ? (\n              <div key={`gap-${index}`} data-element=\"Gap\" aria-hidden=\"true\">\n                {'…'}\n              </div>\n            ) : (\n              <PageButton\n                key={entry}\n                qa={`PaginationPage_${entry}`}\n                size={size}\n                type={entry === info.page ? 'outline' : 'clear'}\n                isDisabled={isDisabled}\n                aria-label={t('pagination.page', 'Page {{page}}', {\n                  page: entry,\n                })}\n                aria-current={entry === info.page ? 'page' : undefined}\n                onPress={() => goTo(entry)}\n              >\n                {entry}\n              </PageButton>\n            ),\n          )}\n        </div>\n      );\n    }\n\n    if (!isCountable) return null;\n\n    return (\n      <div data-element=\"Summary\" data-qa=\"PaginationPageLabel\">\n        {t('pagination.pageOf', '{{page}} of {{totalPages}}', {\n          page: info.page,\n          totalPages,\n        })}\n      </div>\n    );\n  }\n\n  const showEdgeButtons = !isCompact && isCountable;\n\n  return (\n    <PaginationElement\n      {...filterBaseProps(rest, { eventProps: true })}\n      ref={ref}\n      qa={qa || 'Pagination'}\n      styles={styles}\n      mods={{ size, ...mods }}\n      aria-label={ariaLabel ?? t('pagination.ariaLabel', 'Pagination')}\n    >\n      {summaryNode ? <div data-element=\"Summary\">{summaryNode}</div> : null}\n\n      {pageSizeOptions && onPageSizeChange ? (\n        <Select\n          qa=\"PaginationPageSizeSelect\"\n          size={size}\n          isDisabled={isDisabled}\n          aria-label={t('pagination.itemsPerPage', 'Items per page')}\n          selectedKey={String(pageSize)}\n          styles={pageSizeSelectStyles}\n          onSelectionChange={onPageSizeSelectionChange}\n        >\n          {pageSizeOptions.map((option) => {\n            const label = t(\n              'pagination.itemsPerPageOption',\n              '{{size}} / page',\n              {\n                size: option,\n              },\n            );\n\n            return (\n              <Select.Item key={option} textValue={label}>\n                {label}\n              </Select.Item>\n            );\n          })}\n        </Select>\n      ) : null}\n\n      <div data-element=\"Controls\">\n        {showEdgeButtons ? (\n          <NavButton\n            qa=\"PaginationFirstButton\"\n            size={size}\n            icon={<BackwardIcon />}\n            isDisabled={isFirst || isDisabled}\n            aria-label={t('pagination.firstPage', 'First page')}\n            onPress={() => goTo(1)}\n          />\n        ) : null}\n\n        <NavButton\n          qa=\"PaginationPrevButton\"\n          size={size}\n          icon={<LeftIcon />}\n          isDisabled={isFirst || isDisabled}\n          aria-label={t('pagination.previousPage', 'Previous page')}\n          onPress={() => goTo(info.page - 1)}\n        />\n\n        {renderPageControl()}\n\n        <NavButton\n          qa=\"PaginationNextButton\"\n          size={size}\n          icon={<RightIcon />}\n          isDisabled={isLast || isDisabled}\n          aria-label={t('pagination.nextPage', 'Next page')}\n          onPress={() => goTo(info.page + 1)}\n        />\n\n        {showEdgeButtons ? (\n          <NavButton\n            qa=\"PaginationLastButton\"\n            size={size}\n            icon={<ForwardIcon />}\n            isDisabled={isLast || isDisabled}\n            aria-label={t('pagination.lastPage', 'Last page')}\n            onPress={() => goTo(totalPages)}\n          />\n        ) : null}\n      </div>\n    </PaginationElement>\n  );\n}\n\nconst _Pagination = forwardRef(Pagination);\n\n_Pagination.displayName = 'Pagination';\n\nexport { _Pagination as Pagination };\n"],"mappings":"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"}

package/dist/components/navigation/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+
+import { CubePaginationItem, CubePaginationProps, CubePaginationType, CubeTablePageInfo } from "./types.js";
+import { _Pagination } from "./Pagination.js";
+import { PaginationRangeOptions, UsePaginationOptions, UsePaginationResult, clampPage, getPageInfo, getPaginationRange, usePagination } from "./use-pagination.js";

package/dist/components/navigation/Pagination/types.d.ts

@@ -0,0 +1,81 @@
+
+import { BaseProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { ReactNode } from "react";
+
+//#region src/components/navigation/Pagination/types.d.ts
+/**
+ * How the page control is rendered.
+ *
+ * - `numbers` — `1 2 3 … 42` buttons. Correct for large page counts because it
+ *   never materializes one element per page.
+ * - `select` — a `Select` listing every page (or item range). Only viable when
+ *   the page count is small.
+ * - `compact` — `‹ 3 of 42 ›`, no page buttons at all.
+ */
+type CubePaginationType = 'numbers' | 'select' | 'compact';
+/** Everything a summary or label renderer needs to describe the current page. */
+interface CubeTablePageInfo {
+  /** 1-based. */
+  page: number;
+  pageSize: number;
+  totalPages: number;
+  /** Total items across all pages. `0` when unknown. */
+  total: number;
+  /** 1-based index of the first item on this page. */
+  from: number;
+  /** 1-based index of the last item on this page. */
+  to: number;
+}
+/**
+ * A `'gap'` entry stands for the ellipsis between two runs of page numbers.
+ * Exported because `Pagination` and its tests both need to reason about it.
+ */
+type CubePaginationItem = number | 'gap';
+interface CubePaginationProps extends BaseProps, OuterStyleProps {
+  /** Controlled current page. 1-based. */
+  page?: number;
+  /** Initial page for uncontrolled usage. @default 1 */
+  defaultPage?: number;
+  onPageChange?: (page: number) => void;
+  /**
+   * Total number of pages. Supply this, or `total` + `pageSize` and it is
+   * derived. When neither is available the control falls back to prev/next
+   * only, driven by `hasNextPage`.
+   */
+  totalPages?: number;
+  /** Total items across all pages. Preferred over `totalPages`. */
+  total?: number;
+  /** Controlled page size. */
+  pageSize?: number;
+  /** Initial page size for uncontrolled usage. @default 50 */
+  defaultPageSize?: number;
+  /** Supplying this together with `onPageSizeChange` renders the size selector. */
+  pageSizeOptions?: number[];
+  onPageSizeChange?: (pageSize: number) => void;
+  /** @default 'numbers' */
+  type?: CubePaginationType;
+  /** Page buttons rendered either side of the current page. @default 1 */
+  siblingCount?: number;
+  /** Page buttons pinned at each end. @default 1 */
+  boundaryCount?: number;
+  /** @default 'small' */
+  size?: 'xsmall' | 'small' | 'medium';
+  isDisabled?: boolean;
+  /**
+   * Cursor pagination with an unknown total: keeps "next" enabled while there
+   * is more to fetch. Ignored when `totalPages` is known.
+   */
+  hasNextPage?: boolean;
+  /** Hide the first/last jump buttons. @default false */
+  isCompact?: boolean;
+  /** `true` renders the localized "1–50 of 1,204". @default false */
+  summary?: boolean | ((info: CubeTablePageInfo) => ReactNode);
+  /** Labels the entries of `type="select"`. Defaults to item ranges. */
+  labelFormatter?: (info: CubeTablePageInfo) => ReactNode;
+  ariaLabel?: string;
+  styles?: Styles;
+  pageSizeSelectStyles?: Styles;
+}
+//#endregion
+export { CubePaginationItem, CubePaginationProps, CubePaginationType, CubeTablePageInfo };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/navigation/Pagination/use-pagination.d.ts

@@ -0,0 +1,52 @@
+
+import { CubePaginationItem, CubeTablePageInfo } from "./types.js";
+
+//#region src/components/navigation/Pagination/use-pagination.d.ts
+declare function clampPage(page: number, totalPages: number): number;
+interface PaginationRangeOptions {
+  page: number;
+  totalPages: number;
+  /** Page buttons either side of the current page. @default 1 */
+  siblingCount?: number;
+  /** Page buttons pinned at each end. @default 1 */
+  boundaryCount?: number;
+}
+/**
+ * Page numbers to render, with `'gap'` marking an elided run. The output length
+ * is bounded by `boundaryCount * 2 + siblingCount * 2 + 3` regardless of
+ * `totalPages` — which is the whole point of `type="numbers"`: a 100k-row table
+ * at 100 per page renders ~7 buttons, not 1000 `Select` items.
+ */
+declare function getPaginationRange({
+  page,
+  totalPages,
+  siblingCount,
+  boundaryCount
+}: PaginationRangeOptions): CubePaginationItem[];
+declare function getPageInfo(options: {
+  page: number;
+  pageSize: number;
+  total: number;
+  totalPages?: number;
+}): CubeTablePageInfo;
+interface UsePaginationOptions {
+  page?: number;
+  defaultPage?: number;
+  onPageChange?: (page: number) => void;
+  pageSize?: number;
+  defaultPageSize?: number;
+  onPageSizeChange?: (pageSize: number) => void;
+}
+type UsePaginationResult<T> = CubeTablePageInfo & {
+  /** The current page's slice of `items`. */pageItems: T[];
+  setPage: (page: number) => void; /** Also resets to page 1, since the old page index no longer means anything. */
+  setPageSize: (pageSize: number) => void;
+};
+/**
+ * Client-side pagination over an in-memory array. Standalone — `ItemTable` uses
+ * it internally, but it works on its own for any paged list.
+ */
+declare function usePagination<T>(items: readonly T[], options?: UsePaginationOptions): UsePaginationResult<T>;
+//#endregion
+export { PaginationRangeOptions, UsePaginationOptions, UsePaginationResult, clampPage, getPageInfo, getPaginationRange, usePagination };
+//# sourceMappingURL=use-pagination.d.ts.map