@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/navigation/CommandPalette.js

@@ -0,0 +1,509 @@
+import FocusScope, { FocusScopeAutoFocus } from "../a11y/FocusScope.js";
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import Flex, { AlignItems } from "../layout/Flex.js";
+import Portal from "../layout/Portal.js";
+import { OverlayLayer, useOverlay } from "../overlay/useOverlay.js";
+import Kbd, { KbdSize, KbdVariant } from "../text/Kbd.js";
+import Divider from "../layout/Divider.js";
+import { OverlayNode } from "../overlay/OverlayProvider.js";
+import ScaleFade from "../transform/ScaleFade.js";
+import { useHotkey } from "../hooks/useHotkey.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import Fade from "../transform/Fade.js";
+import { useDebouncedValue } from "../hooks/useDebouncedValue.js";
+import { useLocalStorage } from "../hooks/useLocalStorage.js";
+import { InputSize } from "../inputs/Input.js";
+import SearchInput from "../inputs/SearchInput.js";
+/* empty css                         */
+import { styled } from "@linaria/react";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/navigation/CommandPalette.tsx
+/**
+* The app-wide "type to do anything" dialog, usually opened with ⌘K: a modal panel near the top of
+* the screen with a search field and a list of commands. Typing filters the list; the arrow keys
+* move a highlight while focus stays in the field; Enter runs the highlighted command and closes
+* the palette. Commands come from the app as data (`items`), each with its own `onSelect`.
+*
+* Built from Modal's primitives (Portal, the overlay stack, Fade, ScaleFade, FocusScope, the
+* backdrop and its scroll lock), not by rendering `Modal`, and its rows copy Menu's `MEDIUM` look
+* in a `role="listbox"` driven by `aria-activedescendant`. It does not route, fetch or rank:
+* `onSearch` hands the term to the app, and commands do the work in `onSelect`.
+*
+* SSR: nothing renders on the server (closed by default; `Portal` renders nothing there).
+* `useHotkey` and `useLocalStorage` are SSR-safe; nothing touches `window`, `document` or
+* `localStorage` at module scope.
+*/
+/** Panel width (no width token; the Menu / Tooltip module-constant precedent). */
+/** Distance of the panel from the top of the viewport, at least `space[48]`. */
+/** The list's own cap; the panel's max height caps it further on short screens. */
+/** How many chosen commands recents keep. */
+var COMMAND_PALETTE_RECENT_LIMIT = 5;
+/** Option icon px: the `MEDIUM` rung's icon, one step below III-A.4 (Mitch, 2026-10-04). */
+var COMMAND_PALETTE_ICON_PX = 14;
+/** Quiet period before the result count is announced. */
+var COMMAND_PALETTE_ANNOUNCE_DELAY_MS = 500;
+/** The key `useLocalStorage` gets while recents are off (it reads an in-memory adapter then). */
+var COMMAND_PALETTE_NO_STORAGE_KEY = "gx-command-palette:off";
+/** The default open shortcut. */
+var COMMAND_PALETTE_DEFAULT_HOT_KEYS = ["mod", "k"];
+/** The fixed English strings (Decision 15). */
+var RECENT_HEADING = "Recent";
+var LIST_LABEL = "Commands";
+/** A per-instance in-memory storage, used while `storageKey` is not set. */
+function createMemoryStorage() {
+	const values = /* @__PURE__ */ new Map();
+	return {
+		getItem: (key) => values.get(key) ?? null,
+		setItem: (key, value) => {
+			values.set(key, value);
+		},
+		removeItem: (key) => {
+			values.delete(key);
+		}
+	};
+}
+/**
+* Focuses `target` outside the palette while the palette's FocusScope is still mounted for its
+* exit. The exiting panel keeps the props it had while open (ScaleFade freezes them), so its trap
+* would pull this focus back; the one `focusin` this call dispatches is stopped before it reaches
+* the trap's document listener.
+*/
+function focusPastExitingTrap(target) {
+	const stop = (event) => event.stopImmediatePropagation();
+	window.addEventListener("focusin", stop, true);
+	try {
+		target.focus();
+	} finally {
+		window.removeEventListener("focusin", stop, true);
+	}
+}
+/** Whether an item matches the normalized term (label, description or keywords; `includes`). */
+function matches(item, normalized) {
+	if (normalized === "") return true;
+	return [
+		item.label,
+		item.description ?? "",
+		...item.keywords ?? []
+	].some((field) => field.toLocaleLowerCase().includes(normalized));
+}
+/**
+* Scroll lock: while the backdrop is mounted (open or exiting) the page does not scroll. Keyed on
+* this module's backdrop, so it holds until the last modal backdrop is gone.
+*/
+var Backdrop = /*#__PURE__*/ styled("div")({
+	name: "Backdrop",
+	class: "gx-CommandPalette-Backdrop-brnx8g7",
+	propsAsIs: false
+});
+/** The backdrop's Fade root: positioned just under the panel. Sets no opacity or visibility. */
+var BACKDROP_FRAME_CSS = "gx-CommandPalette-BACKDROP_FRAME_CSS-bt8eslj";
+/** Top-anchors the panel, so the search field never moves as results change. */
+var Positioner = /*#__PURE__*/ styled("div")({
+	name: "Positioner",
+	class: "gx-CommandPalette-Positioner-pjnwubt",
+	propsAsIs: false
+});
+/** The panel's ScaleFade root: it grows from the top center. */
+var FRAME_CSS = "gx-CommandPalette-FRAME_CSS-f1kamwsl";
+var FOCUS_SCOPE_CSS = "gx-CommandPalette-FOCUS_SCOPE_CSS-fi5b22w";
+var Panel = /*#__PURE__*/ styled("div")({
+	name: "Panel",
+	class: "gx-CommandPalette-Panel-p1prc77",
+	propsAsIs: false
+});
+var SearchRow = /*#__PURE__*/ styled("div")({
+	name: "SearchRow",
+	class: "gx-CommandPalette-SearchRow-sdnz5av",
+	propsAsIs: false
+});
+var List = /*#__PURE__*/ styled("div")({
+	name: "List",
+	class: "gx-CommandPalette-List-l1g0qafo",
+	propsAsIs: false
+});
+var SectionRoot = /*#__PURE__*/ styled("div")({
+	name: "SectionRoot",
+	class: "gx-CommandPalette-SectionRoot-sdve7ff",
+	propsAsIs: false
+});
+/** Menu's `MEDIUM` group label. */
+var GroupLabel = /*#__PURE__*/ styled("div")({
+	name: "GroupLabel",
+	class: "gx-CommandPalette-GroupLabel-g1ovrvxh",
+	propsAsIs: false
+});
+/** A row, with Menu's `MEDIUM` metrics. Declared before the state classes composed onto it. */
+var Option = /*#__PURE__*/ styled("div")({
+	name: "Option",
+	class: "gx-CommandPalette-Option-o3t756v",
+	propsAsIs: false
+});
+/** The highlighted row (state class, not an attribute selector). */
+var ACTIVE_OPTION_CSS = "gx-CommandPalette-ACTIVE_OPTION_CSS-aw5unga";
+/** Press on an enabled row. */
+var ENABLED_OPTION_CSS = "gx-CommandPalette-ENABLED_OPTION_CSS-ee1ftms";
+/** A disabled row: never highlighted, cannot be chosen. */
+var DISABLED_OPTION_CSS = "gx-CommandPalette-DISABLED_OPTION_CSS-dam55s1";
+/** `leading`: never squeezed. */
+var Slot = /*#__PURE__*/ styled("span")({
+	name: "Slot",
+	class: "gx-CommandPalette-Slot-s1qhom4i",
+	propsAsIs: false
+});
+/** Label and description, stacked; the only part that shrinks. */
+var Content = /*#__PURE__*/ styled("span")({
+	name: "Content",
+	class: "gx-CommandPalette-Content-ch398je",
+	propsAsIs: false
+});
+/** Icons and caps never shrink. */
+var NO_SHRINK_CSS = "gx-CommandPalette-NO_SHRINK_CSS-n1x8ztqn";
+var EmptyRow = /*#__PURE__*/ styled("div")({
+	name: "EmptyRow",
+	class: "gx-CommandPalette-EmptyRow-e102shtd",
+	propsAsIs: false
+});
+/** The empty message sits where the first row's label would. */
+var EmptyLine = /*#__PURE__*/ styled("span")({
+	name: "EmptyLine",
+	class: "gx-CommandPalette-EmptyLine-e10x9e8c",
+	propsAsIs: false
+});
+var Hints = /*#__PURE__*/ styled("div")({
+	name: "Hints",
+	class: "gx-CommandPalette-Hints-h1qfhkvy",
+	propsAsIs: false
+});
+/** The key hints in the footer: caps and what they do. */
+var HINTS = [
+	{
+		keys: [["up"], ["down"]],
+		label: "to navigate"
+	},
+	{
+		keys: [["enter"]],
+		label: "to select"
+	},
+	{
+		keys: [["esc"]],
+		label: "to close"
+	}
+];
+/** A modal search-and-run dialog over a list of commands. */
+var CommandPalette = forwardRef(function CommandPalette({ items, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, placeholder = "Type a command or search", onSearch, isLoading = false, emptyMessage = "No results", storageKey, hotKeys = COMMAND_PALETTE_DEFAULT_HOT_KEYS, shouldBindHotKey = false, ariaLabel = "Command palette", id, className, style, ...rest }, ref) {
+	const generatedId = useId();
+	const listId = useId();
+	const headingIdBase = useId();
+	const { isOpen, setOpen } = useControlledOpenState({
+		isOpen: isOpenProp,
+		defaultIsOpen,
+		onOpenChange
+	});
+	const close = () => setOpen(false);
+	const { zIndex, isTopmost, overlayId } = useOverlay({
+		isOpen,
+		layer: OverlayLayer.MODAL,
+		onEscape: close
+	});
+	useHotkey(hotKeys.join("+"), () => setOpen(!isOpen), {
+		isEnabled: shouldBindHotKey && hotKeys.length > 0,
+		shouldPreventDefault: true
+	});
+	const [memoryStorage] = useState(createMemoryStorage);
+	const [recentIds, setRecentIds] = useLocalStorage(storageKey ?? COMMAND_PALETTE_NO_STORAGE_KEY, [], { storage: storageKey === void 0 ? memoryStorage : void 0 });
+	const [term, setTerm] = useState("");
+	const [activeId, setActiveId] = useState(null);
+	const [hasTyped, setHasTyped] = useState(false);
+	const [scrollRequest, setScrollRequest] = useState(0);
+	const readFocus = () => typeof document === "undefined" ? null : document.activeElement;
+	const [focusBeforeOpen, setFocusBeforeOpen] = useState(() => isOpen ? readFocus() : null);
+	const [wasOpen, setWasOpen] = useState(isOpen);
+	if (wasOpen !== isOpen) {
+		setWasOpen(isOpen);
+		if (isOpen) {
+			setTerm("");
+			setActiveId(null);
+			setHasTyped(false);
+			setFocusBeforeOpen(readFocus());
+		}
+	}
+	const reportedTermRef = useRef("");
+	const handleSearch = (next) => {
+		reportedTermRef.current = next;
+		onSearch?.(next);
+	};
+	const onSearchRef = useRef(onSearch);
+	useEffect(() => {
+		onSearchRef.current = onSearch;
+	});
+	useEffect(() => {
+		if (isOpen || reportedTermRef.current === "") return;
+		reportedTermRef.current = "";
+		onSearchRef.current?.("");
+	}, [isOpen]);
+	const handleTermChange = (next) => {
+		setTerm(next);
+		setActiveId(null);
+		setHasTyped(true);
+	};
+	const normalized = term.trim().toLocaleLowerCase();
+	const visibleItems = onSearch === void 0 ? items.filter((item) => matches(item, normalized)) : items;
+	const recentItems = storageKey !== void 0 && term === "" ? recentIds.flatMap((recentId) => {
+		const item = items.find((candidate) => candidate.id === recentId);
+		return item !== void 0 && !item.isDisabled ? [item] : [];
+	}) : [];
+	const recentSet = new Set(recentItems.map((item) => item.id));
+	const sections = [];
+	if (recentItems.length > 0) sections.push({
+		key: "recent",
+		heading: RECENT_HEADING,
+		items: recentItems
+	});
+	const ungrouped = [];
+	const groups = /* @__PURE__ */ new Map();
+	for (const item of visibleItems) {
+		if (recentSet.has(item.id)) continue;
+		if (item.group === void 0) ungrouped.push(item);
+		else {
+			const groupItems = groups.get(item.group) ?? [];
+			groupItems.push(item);
+			groups.set(item.group, groupItems);
+		}
+	}
+	if (ungrouped.length > 0) sections.push({
+		key: "ungrouped",
+		heading: null,
+		items: ungrouped
+	});
+	for (const [group, groupItems] of groups) sections.push({
+		key: `group:${group}`,
+		heading: group,
+		items: groupItems
+	});
+	const rows = sections.flatMap((section) => section.items);
+	const enabledRows = rows.filter((item) => !item.isDisabled);
+	const rowCount = rows.length;
+	const resolvedActiveId = enabledRows.some((item) => item.id === activeId) ? activeId : enabledRows[0]?.id ?? null;
+	if (isOpen && resolvedActiveId !== activeId) setActiveId(resolvedActiveId);
+	const activeIndex = rows.findIndex((item) => item.id === resolvedActiveId);
+	const optionId = (index) => `${listId}-${index}`;
+	const activeOptionId = activeIndex === -1 ? void 0 : optionId(activeIndex);
+	useEffect(() => {
+		if (scrollRequest === 0 || activeOptionId === void 0) return;
+		document.getElementById(activeOptionId)?.scrollIntoView({ block: "nearest" });
+	}, [scrollRequest, activeOptionId]);
+	const debouncedCount = useDebouncedValue(rowCount, COMMAND_PALETTE_ANNOUNCE_DELAY_MS);
+	const announcement = !hasTyped || isLoading ? "" : debouncedCount === 0 ? emptyMessage : `${debouncedCount} ${debouncedCount === 1 ? "result" : "results"}`;
+	const choose = (item) => {
+		if (item.isDisabled) return;
+		if (storageKey !== void 0) setRecentIds((previous) => [item.id, ...previous.filter((recentId) => recentId !== item.id)].slice(0, COMMAND_PALETTE_RECENT_LIMIT));
+		setOpen(false);
+		if ((focusBeforeOpen instanceof HTMLElement || focusBeforeOpen instanceof SVGElement) && focusBeforeOpen.isConnected) focusPastExitingTrap(focusBeforeOpen);
+		item.onSelect();
+	};
+	const move = (step) => {
+		if (enabledRows.length === 0) return;
+		const current = enabledRows.findIndex((item) => item.id === resolvedActiveId);
+		const next = enabledRows[current === -1 ? step === 1 ? 0 : enabledRows.length - 1 : (current + step + enabledRows.length) % enabledRows.length];
+		if (next === void 0) return;
+		setActiveId(next.id);
+		setScrollRequest((count) => count + 1);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			move(event.key === "ArrowDown" ? 1 : -1);
+			return;
+		}
+		if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+			event.preventDefault();
+			const item = rows[activeIndex];
+			if (item !== void 0) choose(item);
+		}
+	};
+	const [hasOpened, setHasOpened] = useState(isOpen);
+	if (isOpen && !hasOpened) setHasOpened(true);
+	const [isOpenOnFirstRender] = useState(isOpen);
+	const shouldAnimateOnMount = !isOpenOnFirstRender;
+	/** Whether the current press started on the backdrop while this palette was topmost. */
+	const isBackdropPressRef = useRef(false);
+	const handleBackdropPointerDown = (event) => {
+		isBackdropPressRef.current = event.target === event.currentTarget && isTopmost;
+	};
+	const handleBackdropClick = (_event) => {
+		const isBackdropPress = isBackdropPressRef.current;
+		isBackdropPressRef.current = false;
+		if (isBackdropPress) close();
+	};
+	if (!hasOpened) return null;
+	const labelling = rest["aria-labelledby"] !== void 0 ? {} : { "aria-label": ariaLabel };
+	const zStyle = { "--gx-command-palette-z": zIndex };
+	const hasList = rowCount > 0 || isLoading;
+	let rowIndex = 0;
+	const renderOption = (item) => {
+		const index = rowIndex;
+		rowIndex += 1;
+		const isActive = item.id === resolvedActiveId;
+		const isDisabled = item.isDisabled === true;
+		return /* @__PURE__ */ jsxs(Option, {
+			id: optionId(index),
+			role: "option",
+			"aria-selected": isActive,
+			"aria-disabled": isDisabled || void 0,
+			className: cx(isDisabled ? DISABLED_OPTION_CSS : ENABLED_OPTION_CSS, isActive && ACTIVE_OPTION_CSS),
+			onMouseDown: (event) => event.preventDefault(),
+			onPointerMove: () => {
+				if (!isDisabled && !isActive) setActiveId(item.id);
+			},
+			onClick: () => choose(item),
+			children: [
+				item.leading !== void 0 && /* @__PURE__ */ jsx(Slot, { children: item.leading }),
+				item.icon !== void 0 && /* @__PURE__ */ jsx(Icon, {
+					component: item.icon,
+					size: COMMAND_PALETTE_ICON_PX,
+					variant: isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY,
+					className: NO_SHRINK_CSS,
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsxs(Content, { children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: TextSize.BODY_MD,
+					variant: isDisabled ? TextVariant.DISABLED : TextVariant.PRIMARY,
+					lineClamp: 1,
+					children: item.label
+				}), item.description !== void 0 && /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: TextSize.BODY_SM,
+					variant: isDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY,
+					lineClamp: 1,
+					children: item.description
+				})] }),
+				item.hotKeys !== void 0 && item.hotKeys.length > 0 && /* @__PURE__ */ jsx(Kbd, {
+					hotKeys: item.hotKeys,
+					size: KbdSize.MEDIUM,
+					variant: KbdVariant.PRIMARY,
+					isDisabled,
+					className: NO_SHRINK_CSS,
+					"aria-hidden": true
+				})
+			]
+		}, item.id);
+	};
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(OverlayNode, {
+		overlayId,
+		children: [/* @__PURE__ */ jsx(Fade, {
+			isOpen,
+			shouldAnimateOnMount,
+			className: BACKDROP_FRAME_CSS,
+			style: zStyle,
+			children: /* @__PURE__ */ jsx(Backdrop, {
+				"aria-hidden": true,
+				onPointerDown: handleBackdropPointerDown,
+				onClick: handleBackdropClick
+			})
+		}), /* @__PURE__ */ jsx(Positioner, {
+			style: zStyle,
+			children: /* @__PURE__ */ jsx(ScaleFade, {
+				isOpen,
+				shouldAnimateOnMount,
+				className: FRAME_CSS,
+				children: /* @__PURE__ */ jsx(FocusScope, {
+					autoFocus: FocusScopeAutoFocus.FIRST,
+					className: FOCUS_SCOPE_CSS,
+					children: /* @__PURE__ */ jsxs(Panel, {
+						...rest,
+						...labelling,
+						ref,
+						id: id ?? generatedId,
+						role: "dialog",
+						"aria-modal": "true",
+						className,
+						style,
+						children: [
+							/* @__PURE__ */ jsx(SearchRow, { children: /* @__PURE__ */ jsx(SearchInput, {
+								value: term,
+								onChange: handleTermChange,
+								...onSearch === void 0 ? {} : { onSearch: handleSearch },
+								isLoading,
+								placeholder,
+								size: InputSize.LARGE,
+								isGhost: true,
+								fillWidth: true,
+								autoComplete: "off",
+								spellCheck: false,
+								ariaLabel,
+								...hasList ? { "aria-controls": listId } : {},
+								"aria-autocomplete": "list",
+								...activeOptionId === void 0 ? {} : { "aria-activedescendant": activeOptionId },
+								onKeyDown: handleKeyDown
+							}) }),
+							/* @__PURE__ */ jsx(Divider, {}),
+							hasList ? /* @__PURE__ */ jsx(List, {
+								id: listId,
+								role: "listbox",
+								"aria-label": LIST_LABEL,
+								children: sections.map((section, sectionIndex) => {
+									const headingId = `${headingIdBase}-${sectionIndex}`;
+									return section.heading === null ? /* @__PURE__ */ jsx(SectionRoot, {
+										role: "presentation",
+										children: section.items.map(renderOption)
+									}, section.key) : /* @__PURE__ */ jsxs(SectionRoot, {
+										role: "group",
+										"aria-labelledby": headingId,
+										children: [/* @__PURE__ */ jsx(GroupLabel, {
+											role: "presentation",
+											id: headingId,
+											children: /* @__PURE__ */ jsx(Text, {
+												as: "span",
+												size: TextSize.BODY_SM,
+												weight: TextWeight.MEDIUM,
+												variant: TextVariant.TERTIARY,
+												lineClamp: 1,
+												children: section.heading
+											})
+										}), section.items.map(renderOption)]
+									}, section.key);
+								})
+							}) : /* @__PURE__ */ jsx(EmptyRow, { children: /* @__PURE__ */ jsx(EmptyLine, { children: /* @__PURE__ */ jsx(Text, {
+								size: TextSize.BODY_MD,
+								variant: TextVariant.TERTIARY,
+								children: emptyMessage
+							}) }) }),
+							/* @__PURE__ */ jsx(Divider, {}),
+							/* @__PURE__ */ jsx(Hints, {
+								"aria-hidden": "true",
+								children: HINTS.map((hint) => /* @__PURE__ */ jsxs(Flex, {
+									as: "span",
+									alignItems: AlignItems.CENTER,
+									gap: 4,
+									children: [hint.keys.map((keys) => /* @__PURE__ */ jsx(Kbd, {
+										hotKeys: keys,
+										size: KbdSize.SMALL,
+										variant: KbdVariant.PRIMARY
+									}, keys.join("+"))), /* @__PURE__ */ jsx(Text, {
+										as: "span",
+										size: TextSize.BODY_SM,
+										variant: TextVariant.TERTIARY,
+										children: hint.label
+									})]
+								}, hint.label))
+							}),
+							/* @__PURE__ */ jsx(VisuallyHidden, {
+								"aria-live": "polite",
+								"aria-atomic": "true",
+								children: announcement
+							})
+						]
+					})
+				})
+			})
+		})]
+	}) });
+});
+CommandPalette.displayName = "CommandPalette";
+//#endregion
+export { CommandPalette as default };

package/dist/navigation/Pagination.d.ts

@@ -0,0 +1,87 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+/** Canonical rungs; Pagination supports all five (the rung of every button and the select). */
+export declare enum PaginationSize {
+    /** 20px controls, caption text. */
+    X_SMALL = "X_SMALL",
+    /** 24px controls, body_sm text. The usual size in a table footer or a Topbar. */
+    SMALL = "SMALL",
+    /** 32px controls, body_md text. The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px controls, body_lg text. */
+    LARGE = "LARGE",
+    /** 40px controls, body_lg text. */
+    X_LARGE = "X_LARGE"
+}
+/** Every prop except the page-size pair. */
+interface PaginationBaseProps extends AriaAttributes {
+    /** Number of items across all pages. The page count is `ceil(total / pageSize)`, at least 1. */
+    total: number;
+    /** Controlled current page, 1-based. Values outside `1…pageCount` render as the nearest page. */
+    value?: number;
+    /**
+     * Initial page while uncontrolled.
+     * @default 1
+     */
+    defaultValue?: number;
+    /** Called with the page the user picks, and with the page that keeps the first visible item in view when the page size changes. Not called for the current page. */
+    onChange?: (page: number) => void;
+    /**
+     * Items per page. Controlled: the app slices or fetches with it.
+     * @default 25
+     */
+    pageSize?: number;
+    /**
+     * Shows the range of items on this page, "1–25 of 312", before the controls.
+     * @default false
+     */
+    hasSummary?: boolean;
+    /**
+     * Replaces the page-number buttons with "3 of 13" between the arrows, for narrow toolbars and panels.
+     * @default false
+     */
+    isCompact?: boolean;
+    /**
+     * Control rung of every button and the select: 20 / 24 / 32 / 36 / 40px tall.
+     * @default PaginationSize.MEDIUM
+     */
+    size?: PaginationSize;
+    /**
+     * Disables every control (while a page loads). The summary stays.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Stretch to the parent's width, with the summary at the start and the controls at the end.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /**
+     * Name of the `<nav>` landmark. Set it when a page has more than one paginated list ("Runs pagination").
+     * @default Pagination
+     */
+    ariaLabel?: string;
+    /** DOM id of the `<nav>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<nav>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the `<nav>`. */
+    className?: string;
+    /** Inline style on the `<nav>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** The rows-per-page select appears only when its choice can be reported. */
+type PaginationPageSize = {
+    /** Shows a "Rows per page" select with these sizes, in this order. Requires `onPageSizeChange`. */
+    pageSizeOptions: number[];
+    /** Called with the size chosen in the select. */
+    onPageSizeChange: (pageSize: number) => void;
+} | {
+    /** Shows a "Rows per page" select with these sizes, in this order. Requires `onPageSizeChange`. */
+    pageSizeOptions?: undefined;
+    /** Called with the size chosen in the select. */
+    onPageSizeChange?: (pageSize: number) => void;
+};
+export type PaginationProps = PaginationBaseProps & PaginationPageSize;
+/** Moves between the pages of a list or table, with an optional summary and page-size select. */
+declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;
+export default Pagination;