@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.10

package/es/Pagination/Pagination.mjs

@@ -1,27 +1,62 @@
 "use client";
 import { styleProps } from "../styles/stylex/props.mjs";
 import { useEventCallback } from "../hooks/useEventCallback.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
+import Input_default from "../Input/Input.mjs";
 import Select from "../Select/Select.mjs";
 import { clampPage, getPageCount, getPaginationItems } from "./helpers.mjs";
+import { paginationJumpMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
-import { createElement, memo, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement, memo, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import useControlledState from "use-merge-value";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 //#region src/Pagination/Pagination.tsx
-const Pagination = memo(({ className, current, defaultCurrent = 1, defaultPageSize = 10, disabled, hideOnSinglePage, onChange, onPageSizeChange, pageSize, pageSizeOptions = [
+const XS_QUERY = "(max-width: 575px)";
+/** One-line dots that swap to a double chevron on hover / focus of the jump item. */
+const JumpIcon = ({ direction }) => {
+	const Icon = direction === "prev" ? ChevronsLeft : ChevronsRight;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		...stylex.props(styles.ellipsisDots),
+		children: "•••"
+	}), /* @__PURE__ */ jsx(Icon, {
+		"aria-hidden": true,
+		size: 14,
+		...stylex.props(styles.ellipsisIcon)
+	})] });
+};
+const canMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+const subscribeXs = (onChange) => {
+	if (!canMatchMedia()) return () => {};
+	const query = window.matchMedia(XS_QUERY);
+	query.addEventListener?.("change", onChange);
+	return () => query.removeEventListener?.("change", onChange);
+};
+const getXs = () => canMatchMedia() && window.matchMedia(XS_QUERY).matches;
+const getServerXs = () => false;
+/** Whether the viewport is antd's `xs` breakpoint; only tracked when `enabled`. */
+const useIsXs = (enabled) => {
+	const isXs = useSyncExternalStore(subscribeXs, getXs, getServerXs);
+	return enabled && isXs;
+};
+const Pagination = memo(({ align, className, classNames, components, current, defaultCurrent = 1, defaultPageSize = 10, disabled, hideOnSinglePage, itemRender, onChange, onPageSizeChange, pageSize, pageSizeOptions = [
 	10,
 	20,
 	50,
 	100
-], ref, showSizeChanger = false, showTotal, size = "middle", style, total, ...rest }) => {
+], ref, responsive, showLessItems, showQuickJumper, showSizeChanger, showTitle = true, showTotal, simple, size: sizeProp, style, styles: customStyles, total, totalBoundaryShowSizeChanger = 50, ...rest }) => {
 	const [mergedPageSize, setMergedPageSize] = useControlledState(defaultPageSize, { value: pageSize });
 	const pageCount = getPageCount(total, mergedPageSize);
 	const [mergedCurrent, setMergedCurrent] = useControlledState(defaultCurrent, { value: current });
 	const onChangeStable = useEventCallback((nextCurrent, nextPageSize) => {
 		onChange?.(nextCurrent, nextPageSize);
 	});
+	const isXs = useIsXs(!!responsive && !sizeProp);
+	const size = sizeProp ?? (isXs ? "small" : "middle");
+	const [jumperValue, setJumperValue] = useState("");
+	const [simpleValue, setSimpleValue] = useState(null);
 	const pendingNotifyRef = useRef(null);
 	const [prevPageCount, setPrevPageCount] = useState(pageCount);
 	if (pageCount !== prevPageCount) {
@@ -57,62 +92,167 @@ const Pagination = memo(({ className, current, defaultCurrent = 1, defaultPageSi
 		commitCurrent(nextCurrent, nextSize);
 		onPageSizeChange?.(nextCurrent, nextSize);
 	};
+	const jump = () => {
+		const page = Number(jumperValue);
+		setJumperValue("");
+		if (jumperValue.trim() === "" || !Number.isInteger(page)) return;
+		const nextCurrent = clampPage(page, pageCount);
+		if (nextCurrent !== displayCurrent) goTo(nextCurrent);
+	};
+	const goButton = typeof showQuickJumper === "object" ? showQuickJumper.goButton : void 0;
+	const mergedShowSizeChanger = showSizeChanger ?? total > totalBoundaryShowSizeChanger;
+	const sizeChangerProps = typeof showSizeChanger === "object" ? showSizeChanger : void 0;
+	const SizeChanger = components?.sizeChanger ?? Select;
+	const jumpStep = showLessItems ? 3 : 5;
+	const items = getPaginationItems(displayCurrent, pageCount, showLessItems ? 1 : 2);
+	const render = (page, type, element) => itemRender ? itemRender(page, type, element) : element;
+	const title = (text) => showTitle ? text : void 0;
+	const iconSize = size === "small" ? 14 : 16;
 	const buttonProps = stylex.props(styles.button, size === "small" && styles.small);
-	const items = getPaginationItems(displayCurrent, pageCount);
+	const jumperInputClassName = stylex.props(styles.jumperInput).className;
+	const prevButton = /* @__PURE__ */ jsx("button", {
+		"aria-label": "Previous page",
+		...buttonProps,
+		disabled: disabled || displayCurrent <= 1,
+		title: title("Previous Page"),
+		type: "button",
+		onClick: () => goTo(displayCurrent - 1),
+		children: render(Math.max(1, displayCurrent - 1), "prev", /* @__PURE__ */ jsx(ChevronLeft, { size: iconSize }))
+	});
+	const nextButton = /* @__PURE__ */ jsx("button", {
+		"aria-label": "Next page",
+		...buttonProps,
+		disabled: disabled || displayCurrent >= pageCount,
+		title: title("Next Page"),
+		type: "button",
+		onClick: () => goTo(displayCurrent + 1),
+		children: render(Math.min(pageCount, displayCurrent + 1), "next", /* @__PURE__ */ jsx(ChevronRight, { size: iconSize }))
+	});
+	const simpleConfig = simple ? typeof simple === "object" ? simple : {} : null;
+	const commitSimple = () => {
+		if (simpleValue === null) return;
+		const page = Number(simpleValue);
+		setSimpleValue(null);
+		if (simpleValue.trim() === "" || !Number.isInteger(page)) return;
+		const nextCurrent = clampPage(page, pageCount);
+		if (nextCurrent !== displayCurrent) goTo(nextCurrent);
+	};
 	const rangeStart = total === 0 ? 0 : (displayCurrent - 1) * mergedPageSize + 1;
 	const rangeEnd = Math.min(displayCurrent * mergedPageSize, total);
 	return /* @__PURE__ */ jsxs("nav", {
 		"aria-label": "Pagination",
 		ref,
 		role: "navigation",
-		...styleProps(styles.root, className, style),
+		...styleProps([
+			styles.root,
+			align && styles.aligned,
+			align && styles[align]
+		], clsx$1(classNames?.root, className), {
+			...customStyles?.root,
+			...style
+		}),
 		...rest,
 		children: [
 			showTotal && /* @__PURE__ */ jsx("span", {
 				...stylex.props(styles.total),
 				children: showTotal(total, [rangeStart, rangeEnd])
 			}),
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": "Previous page",
-				...buttonProps,
-				disabled: disabled || displayCurrent <= 1,
-				type: "button",
-				onClick: () => goTo(displayCurrent - 1),
-				children: /* @__PURE__ */ jsx(ChevronLeft, { size: size === "small" ? 14 : 16 })
-			}),
-			items.map((item) => typeof item === "number" ? /* @__PURE__ */ createElement("button", {
-				"aria-current": item === displayCurrent ? "page" : void 0,
-				...buttonProps,
-				disabled,
-				key: item,
-				type: "button",
-				onClick: () => goTo(item)
-			}, item) : /* @__PURE__ */ jsx("span", {
-				...stylex.props(styles.ellipsis, size === "small" && styles.smallEllipsis),
-				children: "···"
-			}, item)),
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": "Next page",
-				...buttonProps,
-				disabled: disabled || displayCurrent >= pageCount,
-				type: "button",
-				onClick: () => goTo(displayCurrent + 1),
-				children: /* @__PURE__ */ jsx(ChevronRight, { size: size === "small" ? 14 : 16 })
-			}),
-			showSizeChanger && /* @__PURE__ */ jsx(Select, {
+			simpleConfig ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				prevButton,
+				/* @__PURE__ */ jsxs("span", {
+					...stylex.props(styles.simplePager),
+					title: title(`${displayCurrent}/${pageCount}`),
+					children: [
+						simpleConfig.readOnly ? displayCurrent : /* @__PURE__ */ jsx(Input_default, {
+							"aria-label": "Current page",
+							className: jumperInputClassName,
+							disabled,
+							size: size === "small" ? "small" : "middle",
+							value: simpleValue ?? String(displayCurrent),
+							onBlur: commitSimple,
+							onChange: (event) => setSimpleValue(event.currentTarget.value),
+							onKeyUp: (event) => {
+								if (event.key === "Enter") commitSimple();
+							}
+						}),
+						/* @__PURE__ */ jsx("span", {
+							...stylex.props(styles.simpleSlash),
+							children: "/"
+						}),
+						pageCount
+					]
+				}),
+				nextButton
+			] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				prevButton,
+				items.map((item) => typeof item === "number" ? /* @__PURE__ */ jsx("button", {
+					"aria-current": item === displayCurrent ? "page" : void 0,
+					disabled,
+					...styleProps([styles.button, size === "small" && styles.small], classNames?.item, customStyles?.item),
+					title: title(String(item)),
+					type: "button",
+					onClick: () => goTo(item),
+					children: render(item, "page", item)
+				}, item) : /* @__PURE__ */ createElement("button", {
+					...stylex.props(paginationJumpMarker, styles.ellipsis, size === "small" && styles.smallEllipsis),
+					"data-pagination-jump": item === "ellipsis-prev" ? "prev" : "next",
+					disabled,
+					key: item,
+					type: "button",
+					title: title(item === "ellipsis-prev" ? `Previous ${jumpStep} Pages` : `Next ${jumpStep} Pages`),
+					onClick: () => goTo(item === "ellipsis-prev" ? Math.max(1, displayCurrent - jumpStep) : Math.min(pageCount, displayCurrent + jumpStep))
+				}, item === "ellipsis-prev" ? render(Math.max(1, displayCurrent - jumpStep), "jump-prev", /* @__PURE__ */ jsx(JumpIcon, { direction: "prev" })) : render(Math.min(pageCount, displayCurrent + jumpStep), "jump-next", /* @__PURE__ */ jsx(JumpIcon, { direction: "next" })))),
+				nextButton
+			] }),
+			!simpleConfig && mergedShowSizeChanger && /* @__PURE__ */ jsx(SizeChanger, {
 				disabled,
 				size: size === "small" ? "small" : "middle",
-				style: {
-					flex: "none",
-					marginInlineStart: 8,
-					width: "auto"
-				},
+				...sizeChangerProps,
 				value: String(mergedPageSize),
 				options: pageSizeOptions.map((option) => ({
 					label: `${option} / page`,
 					value: String(option)
 				})),
-				onChange: handlePageSizeChange
+				style: {
+					flex: "none",
+					marginInlineStart: 8,
+					width: "auto",
+					...sizeChangerProps?.style
+				},
+				onChange: (value) => {
+					handlePageSizeChange(value);
+					sizeChangerProps?.onChange?.(value);
+				}
+			}),
+			!simpleConfig && showQuickJumper && /* @__PURE__ */ jsxs("span", {
+				...stylex.props(styles.jumper),
+				children: [
+					"Go to",
+					/* @__PURE__ */ jsx(Input_default, {
+						"aria-label": "Go to page",
+						className: jumperInputClassName,
+						disabled,
+						size: size === "small" ? "small" : "middle",
+						value: jumperValue,
+						onChange: (event) => setJumperValue(event.currentTarget.value),
+						onBlur: () => {
+							if (!goButton) jump();
+						},
+						onKeyUp: (event) => {
+							if (event.key === "Enter") jump();
+						}
+					}),
+					goButton === true || typeof goButton === "string" ? /* @__PURE__ */ jsx("button", {
+						...buttonProps,
+						disabled,
+						type: "button",
+						onClick: jump,
+						children: goButton === true ? "Go" : goButton
+					}) : goButton ? /* @__PURE__ */ jsx("span", {
+						onClick: jump,
+						children: goButton
+					}) : "Page"
+				]
 			})
 		]
 	});

package/es/Pagination/Pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.mjs","names":[],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport Select from '@/Select';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { clampPage, getPageCount, getPaginationItems } from './helpers';\nimport { styles } from './style';\nimport type { PaginationProps } from './type';\n\nconst Pagination = memo<PaginationProps>(\n  ({\n    className,\n    current,\n    defaultCurrent = 1,\n    defaultPageSize = 10,\n    disabled,\n    hideOnSinglePage,\n    onChange,\n    onPageSizeChange,\n    pageSize,\n    pageSizeOptions = [10, 20, 50, 100],\n    ref,\n    showSizeChanger = false,\n    showTotal,\n    size = 'middle',\n    style,\n    total,\n    ...rest\n  }) => {\n    const [mergedPageSize, setMergedPageSize] = useControlledState(defaultPageSize, {\n      value: pageSize,\n    });\n    const pageCount = getPageCount(total, mergedPageSize);\n    const [mergedCurrent, setMergedCurrent] = useControlledState(defaultCurrent, {\n      value: current,\n    });\n    const onChangeStable = useEventCallback((nextCurrent: number, nextPageSize: number) => {\n      onChange?.(nextCurrent, nextPageSize);\n    });\n\n    const pendingNotifyRef = useRef<{ current: number; pageSize: number } | null>(null);\n    const [prevPageCount, setPrevPageCount] = useState(pageCount);\n\n    if (pageCount !== prevPageCount) {\n      setPrevPageCount(pageCount);\n\n      if (mergedCurrent > pageCount && pageCount >= 1) {\n        setMergedCurrent(pageCount);\n        pendingNotifyRef.current = { current: pageCount, pageSize: mergedPageSize };\n      }\n    }\n\n    useEffect(() => {\n      if (!pendingNotifyRef.current) return;\n\n      const { current: nextCurrent, pageSize: nextPageSize } = pendingNotifyRef.current;\n      pendingNotifyRef.current = null;\n      onChangeStable(nextCurrent, nextPageSize);\n    });\n\n    const displayCurrent = clampPage(mergedCurrent, pageCount);\n\n    if (hideOnSinglePage && pageCount <= 1) return null;\n\n    const commitCurrent = (nextCurrent: number, nextPageSize: number) => {\n      setMergedCurrent(nextCurrent);\n      onChange?.(nextCurrent, nextPageSize);\n    };\n\n    const goTo = (page: number) => {\n      commitCurrent(clampPage(page, pageCount), mergedPageSize);\n    };\n\n    const handlePageSizeChange = (value: string) => {\n      const nextSize = Number(value);\n      const nextPageCount = getPageCount(total, nextSize);\n      const nextCurrent = clampPage(displayCurrent, nextPageCount);\n\n      setMergedPageSize(nextSize);\n      commitCurrent(nextCurrent, nextSize);\n      onPageSizeChange?.(nextCurrent, nextSize);\n    };\n\n    const buttonProps = stylex.props(styles.button, size === 'small' && styles.small);\n    const items = getPaginationItems(displayCurrent, pageCount);\n    const rangeStart = total === 0 ? 0 : (displayCurrent - 1) * mergedPageSize + 1;\n    const rangeEnd = Math.min(displayCurrent * mergedPageSize, total);\n\n    return (\n      <nav\n        aria-label=\"Pagination\"\n        ref={ref}\n        role=\"navigation\"\n        {...styleProps(styles.root, className, style)}\n        {...rest}\n      >\n        {showTotal && (\n          <span {...stylex.props(styles.total)}>{showTotal(total, [rangeStart, rangeEnd])}</span>\n        )}\n        <button\n          aria-label=\"Previous page\"\n          {...buttonProps}\n          disabled={disabled || displayCurrent <= 1}\n          type=\"button\"\n          onClick={() => goTo(displayCurrent - 1)}\n        >\n          <ChevronLeft size={size === 'small' ? 14 : 16} />\n        </button>\n        {items.map((item) =>\n          typeof item === 'number' ? (\n            <button\n              aria-current={item === displayCurrent ? 'page' : undefined}\n              {...buttonProps}\n              disabled={disabled}\n              key={item}\n              type=\"button\"\n              onClick={() => goTo(item)}\n            >\n              {item}\n            </button>\n          ) : (\n            <span\n              key={item}\n              {...stylex.props(styles.ellipsis, size === 'small' && styles.smallEllipsis)}\n            >\n              ···\n            </span>\n          ),\n        )}\n        <button\n          aria-label=\"Next page\"\n          {...buttonProps}\n          disabled={disabled || displayCurrent >= pageCount}\n          type=\"button\"\n          onClick={() => goTo(displayCurrent + 1)}\n        >\n          <ChevronRight size={size === 'small' ? 14 : 16} />\n        </button>\n        {showSizeChanger && (\n          <Select\n            disabled={disabled}\n            size={size === 'small' ? 'small' : 'middle'}\n            style={{ flex: 'none', marginInlineStart: 8, width: 'auto' }}\n            value={String(mergedPageSize)}\n            options={pageSizeOptions.map((option) => ({\n              label: `${option} / page`,\n              value: String(option),\n            }))}\n            onChange={handlePageSizeChange}\n          />\n        )}\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n\nexport default Pagination;\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.mjs","names":["clsx","Input"],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';\nimport {\n  type KeyboardEvent,\n  memo,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { Input } from '@/Input';\nimport Select from '@/Select';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { clampPage, getPageCount, getPaginationItems } from './helpers';\nimport { paginationJumpMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { PaginationItemType, PaginationProps } from './type';\n\nconst XS_QUERY = '(max-width: 575px)';\n\n/** One-line dots that swap to a double chevron on hover / focus of the jump item. */\nconst JumpIcon = ({ direction }: { direction: 'next' | 'prev' }) => {\n  const Icon = direction === 'prev' ? ChevronsLeft : ChevronsRight;\n  return (\n    <>\n      <span aria-hidden {...stylex.props(styles.ellipsisDots)}>\n        •••\n      </span>\n      <Icon aria-hidden size={14} {...stylex.props(styles.ellipsisIcon)} />\n    </>\n  );\n};\n\nconst canMatchMedia = () =>\n  typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n\nconst subscribeXs = (onChange: () => void) => {\n  if (!canMatchMedia()) return () => {};\n  const query = window.matchMedia(XS_QUERY);\n  query.addEventListener?.('change', onChange);\n  return () => query.removeEventListener?.('change', onChange);\n};\nconst getXs = () => canMatchMedia() && window.matchMedia(XS_QUERY).matches;\nconst getServerXs = () => false;\n\n/** Whether the viewport is antd's `xs` breakpoint; only tracked when `enabled`. */\nconst useIsXs = (enabled: boolean) => {\n  const isXs = useSyncExternalStore(subscribeXs, getXs, getServerXs);\n  return enabled && isXs;\n};\n\nconst Pagination = memo<PaginationProps>(\n  ({\n    align,\n    className,\n    classNames,\n    components,\n    current,\n    defaultCurrent = 1,\n    defaultPageSize = 10,\n    disabled,\n    hideOnSinglePage,\n    itemRender,\n    onChange,\n    onPageSizeChange,\n    pageSize,\n    pageSizeOptions = [10, 20, 50, 100],\n    ref,\n    responsive,\n    showLessItems,\n    showQuickJumper,\n    showSizeChanger,\n    showTitle = true,\n    showTotal,\n    simple,\n    size: sizeProp,\n    style,\n    styles: customStyles,\n    total,\n    totalBoundaryShowSizeChanger = 50,\n    ...rest\n  }) => {\n    const [mergedPageSize, setMergedPageSize] = useControlledState(defaultPageSize, {\n      value: pageSize,\n    });\n    const pageCount = getPageCount(total, mergedPageSize);\n    const [mergedCurrent, setMergedCurrent] = useControlledState(defaultCurrent, {\n      value: current,\n    });\n    const onChangeStable = useEventCallback((nextCurrent: number, nextPageSize: number) => {\n      onChange?.(nextCurrent, nextPageSize);\n    });\n\n    const isXs = useIsXs(!!responsive && !sizeProp);\n    const size = sizeProp ?? (isXs ? 'small' : 'middle');\n\n    const [jumperValue, setJumperValue] = useState('');\n    const [simpleValue, setSimpleValue] = useState<string | null>(null);\n    const pendingNotifyRef = useRef<{ current: number; pageSize: number } | null>(null);\n    const [prevPageCount, setPrevPageCount] = useState(pageCount);\n\n    if (pageCount !== prevPageCount) {\n      setPrevPageCount(pageCount);\n\n      if (mergedCurrent > pageCount && pageCount >= 1) {\n        setMergedCurrent(pageCount);\n        pendingNotifyRef.current = { current: pageCount, pageSize: mergedPageSize };\n      }\n    }\n\n    useEffect(() => {\n      if (!pendingNotifyRef.current) return;\n\n      const { current: nextCurrent, pageSize: nextPageSize } = pendingNotifyRef.current;\n      pendingNotifyRef.current = null;\n      onChangeStable(nextCurrent, nextPageSize);\n    });\n\n    const displayCurrent = clampPage(mergedCurrent, pageCount);\n\n    if (hideOnSinglePage && pageCount <= 1) return null;\n\n    const commitCurrent = (nextCurrent: number, nextPageSize: number) => {\n      setMergedCurrent(nextCurrent);\n      onChange?.(nextCurrent, nextPageSize);\n    };\n\n    const goTo = (page: number) => {\n      commitCurrent(clampPage(page, pageCount), mergedPageSize);\n    };\n\n    const handlePageSizeChange = (value: string) => {\n      const nextSize = Number(value);\n      const nextPageCount = getPageCount(total, nextSize);\n      const nextCurrent = clampPage(displayCurrent, nextPageCount);\n\n      setMergedPageSize(nextSize);\n      commitCurrent(nextCurrent, nextSize);\n      onPageSizeChange?.(nextCurrent, nextSize);\n    };\n\n    // Like rc-pagination: invalid input is ignored, a valid page is clamped, the input is cleared.\n    const jump = () => {\n      const page = Number(jumperValue);\n      setJumperValue('');\n      if (jumperValue.trim() === '' || !Number.isInteger(page)) return;\n      const nextCurrent = clampPage(page, pageCount);\n      if (nextCurrent !== displayCurrent) goTo(nextCurrent);\n    };\n    const goButton = typeof showQuickJumper === 'object' ? showQuickJumper.goButton : undefined;\n    const mergedShowSizeChanger = showSizeChanger ?? total > totalBoundaryShowSizeChanger;\n    const sizeChangerProps = typeof showSizeChanger === 'object' ? showSizeChanger : undefined;\n    const SizeChanger = components?.sizeChanger ?? Select;\n\n    const jumpStep = showLessItems ? 3 : 5;\n    const items = getPaginationItems(displayCurrent, pageCount, showLessItems ? 1 : 2);\n    const render = (page: number, type: PaginationItemType, element: ReactNode) =>\n      itemRender ? itemRender(page, type, element) : element;\n    const title = (text: string) => (showTitle ? text : undefined);\n    const iconSize = size === 'small' ? 14 : 16;\n    const buttonProps = stylex.props(styles.button, size === 'small' && styles.small);\n    const jumperInputClassName = stylex.props(styles.jumperInput).className;\n\n    const prevButton = (\n      <button\n        aria-label=\"Previous page\"\n        {...buttonProps}\n        disabled={disabled || displayCurrent <= 1}\n        title={title('Previous Page')}\n        type=\"button\"\n        onClick={() => goTo(displayCurrent - 1)}\n      >\n        {render(Math.max(1, displayCurrent - 1), 'prev', <ChevronLeft size={iconSize} />)}\n      </button>\n    );\n    const nextButton = (\n      <button\n        aria-label=\"Next page\"\n        {...buttonProps}\n        disabled={disabled || displayCurrent >= pageCount}\n        title={title('Next Page')}\n        type=\"button\"\n        onClick={() => goTo(displayCurrent + 1)}\n      >\n        {render(Math.min(pageCount, displayCurrent + 1), 'next', <ChevronRight size={iconSize} />)}\n      </button>\n    );\n\n    const simpleConfig = simple ? (typeof simple === 'object' ? simple : {}) : null;\n    const commitSimple = () => {\n      if (simpleValue === null) return;\n      const page = Number(simpleValue);\n      setSimpleValue(null);\n      if (simpleValue.trim() === '' || !Number.isInteger(page)) return;\n      const nextCurrent = clampPage(page, pageCount);\n      if (nextCurrent !== displayCurrent) goTo(nextCurrent);\n    };\n    const rangeStart = total === 0 ? 0 : (displayCurrent - 1) * mergedPageSize + 1;\n    const rangeEnd = Math.min(displayCurrent * mergedPageSize, total);\n\n    return (\n      <nav\n        aria-label=\"Pagination\"\n        ref={ref}\n        role=\"navigation\"\n        {...styleProps(\n          [styles.root, align && styles.aligned, align && styles[align]],\n          clsx(classNames?.root, className),\n          { ...customStyles?.root, ...style },\n        )}\n        {...rest}\n      >\n        {showTotal && (\n          <span {...stylex.props(styles.total)}>{showTotal(total, [rangeStart, rangeEnd])}</span>\n        )}\n        {simpleConfig ? (\n          <>\n            {prevButton}\n            <span\n              {...stylex.props(styles.simplePager)}\n              title={title(`${displayCurrent}/${pageCount}`)}\n            >\n              {simpleConfig.readOnly ? (\n                displayCurrent\n              ) : (\n                <Input\n                  aria-label=\"Current page\"\n                  className={jumperInputClassName}\n                  disabled={disabled}\n                  size={size === 'small' ? 'small' : 'middle'}\n                  value={simpleValue ?? String(displayCurrent)}\n                  onBlur={commitSimple}\n                  onChange={(event) => setSimpleValue(event.currentTarget.value)}\n                  onKeyUp={(event: KeyboardEvent<HTMLInputElement>) => {\n                    if (event.key === 'Enter') commitSimple();\n                  }}\n                />\n              )}\n              <span {...stylex.props(styles.simpleSlash)}>/</span>\n              {pageCount}\n            </span>\n            {nextButton}\n          </>\n        ) : (\n          <>\n            {prevButton}\n            {items.map((item) =>\n              typeof item === 'number' ? (\n                <button\n                  aria-current={item === displayCurrent ? 'page' : undefined}\n                  disabled={disabled}\n                  key={item}\n                  {...styleProps(\n                    [styles.button, size === 'small' && styles.small],\n                    classNames?.item,\n                    customStyles?.item,\n                  )}\n                  title={title(String(item))}\n                  type=\"button\"\n                  onClick={() => goTo(item)}\n                >\n                  {render(item, 'page', item)}\n                </button>\n              ) : (\n                <button\n                  {...stylex.props(\n                    paginationJumpMarker,\n                    styles.ellipsis,\n                    size === 'small' && styles.smallEllipsis,\n                  )}\n                  data-pagination-jump={item === 'ellipsis-prev' ? 'prev' : 'next'}\n                  disabled={disabled}\n                  key={item}\n                  type=\"button\"\n                  title={title(\n                    item === 'ellipsis-prev'\n                      ? `Previous ${jumpStep} Pages`\n                      : `Next ${jumpStep} Pages`,\n                  )}\n                  onClick={() =>\n                    goTo(\n                      item === 'ellipsis-prev'\n                        ? Math.max(1, displayCurrent - jumpStep)\n                        : Math.min(pageCount, displayCurrent + jumpStep),\n                    )\n                  }\n                >\n                  {item === 'ellipsis-prev'\n                    ? render(\n                        Math.max(1, displayCurrent - jumpStep),\n                        'jump-prev',\n                        <JumpIcon direction=\"prev\" />,\n                      )\n                    : render(\n                        Math.min(pageCount, displayCurrent + jumpStep),\n                        'jump-next',\n                        <JumpIcon direction=\"next\" />,\n                      )}\n                </button>\n              ),\n            )}\n            {nextButton}\n          </>\n        )}\n        {!simpleConfig && mergedShowSizeChanger && (\n          <SizeChanger\n            disabled={disabled}\n            size={size === 'small' ? 'small' : 'middle'}\n            {...sizeChangerProps}\n            value={String(mergedPageSize)}\n            options={pageSizeOptions.map((option) => ({\n              label: `${option} / page`,\n              value: String(option),\n            }))}\n            style={{\n              flex: 'none',\n              marginInlineStart: 8,\n              width: 'auto',\n              ...sizeChangerProps?.style,\n            }}\n            onChange={(value: string) => {\n              handlePageSizeChange(value);\n              sizeChangerProps?.onChange?.(value);\n            }}\n          />\n        )}\n        {!simpleConfig && showQuickJumper && (\n          <span {...stylex.props(styles.jumper)}>\n            Go to\n            <Input\n              aria-label=\"Go to page\"\n              className={jumperInputClassName}\n              disabled={disabled}\n              size={size === 'small' ? 'small' : 'middle'}\n              value={jumperValue}\n              onChange={(event) => setJumperValue(event.currentTarget.value)}\n              onBlur={() => {\n                if (!goButton) jump();\n              }}\n              onKeyUp={(event: KeyboardEvent<HTMLInputElement>) => {\n                if (event.key === 'Enter') jump();\n              }}\n            />\n            {goButton === true || typeof goButton === 'string' ? (\n              <button {...buttonProps} disabled={disabled} type=\"button\" onClick={jump}>\n                {goButton === true ? 'Go' : goButton}\n              </button>\n            ) : goButton ? (\n              <span onClick={jump}>{goButton}</span>\n            ) : (\n              'Page'\n            )}\n          </span>\n        )}\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n\nexport default Pagination;\n"],"mappings":"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"}

package/es/Pagination/helpers.mjs

@@ -1,11 +1,11 @@
 //#region src/Pagination/helpers.ts
 const getPageCount = (total, pageSize) => Math.max(1, Math.ceil(total / pageSize));
 const clampPage = (page, pageCount) => Math.min(Math.max(page, 1), pageCount);
-const getPaginationItems = (current, pageCount) => {
+const getPaginationItems = (current, pageCount, buffer = 2) => {
 	if (pageCount <= 1) return [1];
 	const items = [1];
-	const start = Math.max(2, current - 2);
-	const end = Math.min(pageCount - 1, current + 2);
+	const start = Math.max(2, current - buffer);
+	const end = Math.min(pageCount - 1, current + buffer);
 	if (start > 2) items.push("ellipsis-prev");
 	for (let page = start; page <= end; page += 1) items.push(page);
 	if (end < pageCount - 1) items.push("ellipsis-next");

package/es/Pagination/helpers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.mjs","names":[],"sources":["../../src/Pagination/helpers.ts"],"sourcesContent":["export type PaginationItem = number | 'ellipsis-prev' | 'ellipsis-next';\n\nexport const getPageCount = (total: number, pageSize: number) =>\n  Math.max(1, Math.ceil(total / pageSize));\n\nexport const clampPage = (page: number, pageCount: number) =>\n  Math.min(Math.max(page, 1), pageCount);\n\nexport const getPaginationItems = (current: number, pageCount: number): PaginationItem[] => {\n  if (pageCount <= 1) return [1];\n\n  const items: PaginationItem[] = [1];\n  const start = Math.max(2, current - 2);\n  const end = Math.min(pageCount - 1, current + 2);\n\n  if (start > 2) items.push('ellipsis-prev');\n  for (let page = start; page <= end; page += 1) items.push(page);\n  if (end < pageCount - 1) items.push('ellipsis-next');\n\n  items.push(pageCount);\n\n  return items;\n};\n"],"mappings":";AAEA,MAAa,gBAAgB,OAAe,aAC1C,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,QAAQ,CAAC;AAEzC,MAAa,aAAa,MAAc,cACtC,KAAK,IAAI,KAAK,IAAI,MAAM,CAAC,GAAG,SAAS;AAEvC,MAAa,sBAAsB,SAAiB,cAAwC;CAC1F,IAAI,aAAa,GAAG,OAAO,CAAC,CAAC;CAE7B,MAAM,QAA0B,CAAC,CAAC;CAClC,MAAM,QAAQ,KAAK,IAAI,GAAG,UAAU,CAAC;CACrC,MAAM,MAAM,KAAK,IAAI,YAAY,GAAG,UAAU,CAAC;CAE/C,IAAI,QAAQ,GAAG,MAAM,KAAK,eAAe;CACzC,KAAK,IAAI,OAAO,OAAO,QAAQ,KAAK,QAAQ,GAAG,MAAM,KAAK,IAAI;CAC9D,IAAI,MAAM,YAAY,GAAG,MAAM,KAAK,eAAe;CAEnD,MAAM,KAAK,SAAS;CAEpB,OAAO;AACT"}
+{"version":3,"file":"helpers.mjs","names":[],"sources":["../../src/Pagination/helpers.ts"],"sourcesContent":["export type PaginationItem = number | 'ellipsis-prev' | 'ellipsis-next';\n\nexport const getPageCount = (total: number, pageSize: number) =>\n  Math.max(1, Math.ceil(total / pageSize));\n\nexport const clampPage = (page: number, pageCount: number) =>\n  Math.min(Math.max(page, 1), pageCount);\n\nexport const getPaginationItems = (\n  current: number,\n  pageCount: number,\n  buffer = 2,\n): PaginationItem[] => {\n  if (pageCount <= 1) return [1];\n\n  const items: PaginationItem[] = [1];\n  const start = Math.max(2, current - buffer);\n  const end = Math.min(pageCount - 1, current + buffer);\n\n  if (start > 2) items.push('ellipsis-prev');\n  for (let page = start; page <= end; page += 1) items.push(page);\n  if (end < pageCount - 1) items.push('ellipsis-next');\n\n  items.push(pageCount);\n\n  return items;\n};\n"],"mappings":";AAEA,MAAa,gBAAgB,OAAe,aAC1C,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,QAAQ,CAAC;AAEzC,MAAa,aAAa,MAAc,cACtC,KAAK,IAAI,KAAK,IAAI,MAAM,CAAC,GAAG,SAAS;AAEvC,MAAa,sBACX,SACA,WACA,SAAS,MACY;CACrB,IAAI,aAAa,GAAG,OAAO,CAAC,CAAC;CAE7B,MAAM,QAA0B,CAAC,CAAC;CAClC,MAAM,QAAQ,KAAK,IAAI,GAAG,UAAU,MAAM;CAC1C,MAAM,MAAM,KAAK,IAAI,YAAY,GAAG,UAAU,MAAM;CAEpD,IAAI,QAAQ,GAAG,MAAM,KAAK,eAAe;CACzC,KAAK,IAAI,OAAO,OAAO,QAAQ,KAAK,QAAQ,GAAG,MAAM,KAAK,IAAI;CAC9D,IAAI,MAAM,YAAY,GAAG,MAAM,KAAK,eAAe;CAEnD,MAAM,KAAK,SAAS;CAEpB,OAAO;AACT"}

package/es/Pagination/index.d.mts

@@ -1,3 +1,3 @@
-import { PaginationProps, PaginationSize } from "./type.mjs";
+import { PaginationAlign, PaginationItemType, PaginationProps, PaginationSemanticName, PaginationSize, PaginationSizeChangerProps } from "./type.mjs";
 import Pagination from "./Pagination.mjs";
-export { type PaginationProps, type PaginationSize, Pagination as default };
+export { type PaginationAlign, type PaginationItemType, type PaginationProps, type PaginationSemanticName, type PaginationSize, type PaginationSizeChangerProps, Pagination as default };

package/es/Pagination/marker.stylex.mjs

@@ -0,0 +1,9 @@
+//#region src/Pagination/marker.stylex.ts
+const paginationJumpMarker = {
+	lb14grpiv: "lb14grpiv",
+	$$css: true
+};
+//#endregion
+export { paginationJumpMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

package/es/Pagination/marker.stylex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../src/Pagination/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const paginationJumpMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,uBAAuB;CAClC,WAAW;CACX,OAAO;AACT"}

package/es/Pagination/style.mjs

@@ -1,5 +1,10 @@
 //#region src/Pagination/style.ts
 const styles = {
+	aligned: {
+		k1xSpc: "lb78zum5",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
 	button: {
 		kVAM5u: "lb181nr7w",
 		kaIpWk: "lb1sbi92r",
@@ -20,13 +25,60 @@ const styles = {
 		k7Eaqz: "lb1264ykn",
 		$$css: true
 	},
+	center: {
+		kjj79g: "lbl56j7k",
+		$$css: true
+	},
 	ellipsis: {
+		kVVagm: "lbln7xf2",
+		kmVPX3: "lb1717udv",
+		kVAM5u: "lb181nr7w",
+		kaIpWk: "lb1sbi92r",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbfn42iu",
+		kUk6DE: "lb1okw0bk",
+		kgQiWS: "lb1ku5rj1",
+		kWkggS: "lbjbqb8w",
+		kMwMTN: "lbybvley lb1q0do8j lb8qk002",
+		kkrTdU: "lb1ypdohk lbtgyt42",
+		k1xSpc: "lbwz0xwf",
+		kLWn49: "lbo5v014",
+		khDVqt: "lbuxw1ft",
+		kZKoxP: "lb1fgtraw",
+		kzqmXN: "lbgd8bvy",
+		$$css: true
+	},
+	ellipsisDots: {
+		kBCFzs: "lbgkxs2y",
+		kbNqZ1: "lb1ms6mhf",
+		kGuDYH: "lbdzlmae",
+		kb6lSQ: "lbl5zsmt",
+		kTHuQy: "lb4gbaf0",
+		k33iCy: "lbnpuxes lb1qhljkn lb1f60oaf",
+		$$css: true
+	},
+	ellipsisIcon: {
+		kBCFzs: "lbgkxs2y",
+		kbNqZ1: "lb1ms6mhf",
+		k33iCy: "lblshs6z lbzq8171 lbowlo31",
+		$$css: true
+	},
+	end: {
+		kjj79g: "lb13a6bvl",
+		$$css: true
+	},
+	jumper: {
+		kOIVth: "lb17d4w8g",
 		kGNEyG: "lb6s0dn4",
-		kMwMTN: "lbybvley",
+		kMwMTN: "lbc77et8",
 		k1xSpc: "lb3nfvp2",
-		kjj79g: "lbl56j7k",
-		kb6lSQ: "lbl5zsmt",
-		kzqmXN: "lbgd8bvy",
+		kGuDYH: "lb4z9k3i",
+		keTefX: "lb13fj5qh",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	jumperInput: {
+		kzqmXN: "lb1pju0fl",
 		$$css: true
 	},
 	root: {
@@ -36,6 +88,19 @@ const styles = {
 		kcqcaj: "lbss6m8b",
 		$$css: true
 	},
+	simplePager: {
+		kOIVth: "lb17d4w8g",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lbc77et8",
+		k1xSpc: "lb3nfvp2",
+		kGuDYH: "lb4z9k3i",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	simpleSlash: {
+		kMwMTN: "lbybvley",
+		$$css: true
+	},
 	small: {
 		kGuDYH: "lbfifm61",
 		kZKoxP: "lbxk0z11",
@@ -43,9 +108,14 @@ const styles = {
 		$$css: true
 	},
 	smallEllipsis: {
+		kZKoxP: "lbxk0z11",
 		kzqmXN: "lbvy4d1p",
 		$$css: true
 	},
+	start: {
+		kjj79g: "lb1nhvcw1",
+		$$css: true
+	},
 	total: {
 		kMwMTN: "lb53gy9q",
 		kGuDYH: "lbfifm61",

package/es/Pagination/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Pagination/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst enabledHover = ':hover:not(:disabled)';\nconst currentAtRest = ':is([aria-current=\"page\"]):is(:disabled, :not(:hover))';\n\nexport const styles = stylex.create({\n  button: {\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    paddingInline: 6,\n    transition: 'background-color 0.15s',\n    alignItems: 'center',\n    backgroundColor: {\n      [currentAtRest]: cssVar.colorFillSecondary,\n      default: 'transparent',\n      [enabledHover]: cssVar.colorFillTertiary,\n    },\n    color: {\n      'default': cssVar.colorTextSecondary,\n      [enabledHover]: cssVar.colorText,\n      ':disabled:not([aria-current=\"page\"])': cssVar.colorTextQuaternary,\n      ':is([aria-current=\"page\"]):not(:hover:not(:disabled))': cssVar.colorText,\n    },\n    cursor: { 'default': 'pointer', ':disabled': 'default' },\n    display: 'inline-flex',\n    fontSize: 13,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: { 'default': 500, ':is([aria-current=\"page\"])': 600 },\n    justifyContent: 'center',\n    height: 28,\n    minWidth: 28,\n  },\n  ellipsis: {\n    alignItems: 'center',\n    color: cssVar.colorTextQuaternary,\n    display: 'inline-flex',\n    justifyContent: 'center',\n    letterSpacing: 2,\n    width: 28,\n  },\n  root: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'inline-flex',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  small: {\n    fontSize: 12,\n    height: 24,\n    minWidth: 24,\n  },\n  smallEllipsis: {\n    width: 24,\n  },\n  total: {\n    color: cssVar.colorTextTertiary,\n    fontSize: 12,\n    marginInlineEnd: 8,\n    whiteSpace: 'nowrap',\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Pagination/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { paginationJumpMarker } from './marker.stylex';\n\nconst enabledHover = ':hover:not(:disabled)';\nconst currentAtRest = ':is([aria-current=\"page\"]):is(:disabled, :not(:hover))';\n\nexport const styles = stylex.create({\n  aligned: {\n    display: 'flex',\n    width: '100%',\n  },\n  button: {\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    paddingInline: 6,\n    transition: 'background-color 0.15s',\n    alignItems: 'center',\n    backgroundColor: {\n      [currentAtRest]: cssVar.colorFillSecondary,\n      default: 'transparent',\n      [enabledHover]: cssVar.colorFillTertiary,\n    },\n    color: {\n      'default': cssVar.colorTextSecondary,\n      [enabledHover]: cssVar.colorText,\n      ':disabled:not([aria-current=\"page\"])': cssVar.colorTextQuaternary,\n      ':is([aria-current=\"page\"]):not(:hover:not(:disabled))': cssVar.colorText,\n    },\n    cursor: { 'default': 'pointer', ':disabled': 'default' },\n    display: 'inline-flex',\n    fontSize: 13,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: { 'default': 500, ':is([aria-current=\"page\"])': 600 },\n    justifyContent: 'center',\n    height: 28,\n    minWidth: 28,\n  },\n  center: {\n    justifyContent: 'center',\n  },\n  ellipsis: {\n    font: 'inherit',\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    flex: 'none',\n    placeItems: 'center',\n    backgroundColor: 'transparent',\n    color: {\n      'default': cssVar.colorTextQuaternary,\n      ':focus-visible': cssVar.colorText,\n      ':hover:not(:disabled)': cssVar.colorText,\n    },\n    cursor: { 'default': 'pointer', ':disabled': 'default' },\n    display: 'inline-grid',\n    lineHeight: 1,\n    whiteSpace: 'nowrap',\n    height: 28,\n    width: 28,\n  },\n  ellipsisDots: {\n    gridColumn: 1,\n    gridRow: 1,\n    fontSize: 8,\n    letterSpacing: 2,\n    textIndent: 2,\n    visibility: {\n      default: 'visible',\n      [stylex.when.ancestor(':focus-visible', paginationJumpMarker)]: 'hidden',\n      [stylex.when.ancestor(':hover:not(:disabled)', paginationJumpMarker)]: 'hidden',\n    },\n  },\n  ellipsisIcon: {\n    gridColumn: 1,\n    gridRow: 1,\n    visibility: {\n      default: 'hidden',\n      [stylex.when.ancestor(':focus-visible', paginationJumpMarker)]: 'visible',\n      [stylex.when.ancestor(':hover:not(:disabled)', paginationJumpMarker)]: 'visible',\n    },\n  },\n  end: {\n    justifyContent: 'flex-end',\n  },\n  jumper: {\n    gap: 6,\n    alignItems: 'center',\n    color: cssVar.colorTextSecondary,\n    display: 'inline-flex',\n    fontSize: 13,\n    marginInlineStart: 8,\n    whiteSpace: 'nowrap',\n  },\n  jumperInput: {\n    width: 50,\n  },\n  root: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'inline-flex',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  simplePager: {\n    gap: 6,\n    alignItems: 'center',\n    color: cssVar.colorTextSecondary,\n    display: 'inline-flex',\n    fontSize: 13,\n    whiteSpace: 'nowrap',\n  },\n  simpleSlash: {\n    color: cssVar.colorTextQuaternary,\n  },\n  small: {\n    fontSize: 12,\n    height: 24,\n    minWidth: 24,\n  },\n  smallEllipsis: {\n    height: 24,\n    width: 24,\n  },\n  start: {\n    justifyContent: 'flex-start',\n  },\n  total: {\n    color: cssVar.colorTextTertiary,\n    fontSize: 12,\n    marginInlineEnd: 8,\n    whiteSpace: 'nowrap',\n  },\n});\n"],"mappings":";AAOA,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Pagination/type.d.mts

@@ -1,21 +1,59 @@
-import { ComponentProps, ReactNode, Ref } from "react";
+import { SelectProps } from "../Select/type.mjs";
+import { CSSProperties, ComponentProps, ComponentType, ReactNode, Ref } from "react";
 //#region src/Pagination/type.d.ts
 export type PaginationSize = 'small' | 'middle';
+/** antd `PaginationSemanticType`: `root` is the `<nav>`, `item` each page-number button. */
+export type PaginationSemanticName = 'item' | 'root';
+/** antd `itemRender` item types: `jump-prev` / `jump-next` are the ellipses. */
+export type PaginationItemType = 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next';
+export type PaginationAlign = 'start' | 'center' | 'end';
+/** Extra props of the page-size `Select` when `showSizeChanger` is an object. */
+export interface PaginationSizeChangerProps extends Omit<SelectProps, 'mode' | 'onChange' | 'options' | 'value'> {
+  onChange?: (value: string) => void;
+}
 export interface PaginationProps extends Omit<ComponentProps<'nav'>, 'onChange'> {
+  /** Lays the pager out as a full-width row aligned to `start`, `center` or `end`. */
+  align?: PaginationAlign;
+  classNames?: Partial<Record<PaginationSemanticName, string>>;
+  /** Replaces the page-size `Select`; it receives the same props. */
+  components?: {
+    sizeChanger?: ComponentType<any>;
+  };
   current?: number;
   defaultCurrent?: number;
   defaultPageSize?: number;
   disabled?: boolean;
   hideOnSinglePage?: boolean;
+  /** Custom content of each item; `element` is the default content. */
+  itemRender?: (page: number, type: PaginationItemType, element: ReactNode) => ReactNode;
   onChange?: (page: number, pageSize: number) => void;
   onPageSizeChange?: (current: number, size: number) => void;
   pageSize?: number;
-  pageSizeOptions?: number[];
+  /** @default [10, 20, 50, 100] */
+  pageSizeOptions?: (number | string)[];
   ref?: Ref<HTMLElement>;
-  showSizeChanger?: boolean;
+  /** Use the `small` size on extra-small screens (< 576px) when `size` is not set. */
+  responsive?: boolean;
+  /** Show one page on each side of the current page instead of two. */
+  showLessItems?: boolean;
+  /** Show a "Go to" page input; `goButton` adds a confirm button (the input then applies on Enter or the button only). */
+  showQuickJumper?: boolean | {
+    goButton?: ReactNode;
+  };
+  /** Defaults to `true` when `total` is greater than `totalBoundaryShowSizeChanger`. */
+  showSizeChanger?: boolean | PaginationSizeChangerProps;
+  /** Show native `title` tooltips on the items. @default true */
+  showTitle?: boolean;
   showTotal?: (total: number, range: [number, number]) => ReactNode;
+  /** Compact `prev [current] / pages next` mode; `readOnly` shows the current page as text. */
+  simple?: boolean | {
+    readOnly?: boolean;
+  };
   size?: PaginationSize;
+  styles?: Partial<Record<PaginationSemanticName, CSSProperties>>;
   total: number;
+  /** `total` above which `showSizeChanger` defaults to on. @default 50 */
+  totalBoundaryShowSizeChanger?: number;
 }
 //#endregion
 //# sourceMappingURL=type.d.mts.map

package/es/Popover/PopoverInGroup.mjs

@@ -1,14 +1,14 @@
 "use client";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { mergeRefs } from "../utils/mergeRefs.mjs";
 import { parseTrigger } from "../utils/parseTrigger.mjs";
 import { PopoverGroupHandleContext } from "./groupContext.mjs";
 import { HOVER_ONLY_TRIGGER_ATTR } from "./hoverOnlyPress.mjs";
 import { useMergedPopoverProps } from "./useMergedPopoverProps.mjs";
 import { cloneElement, isValidElement, use, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { mergeRefs } from "react-merge-refs";
 import { Popover } from "@base-ui/react/popover";
 //#region src/Popover/PopoverInGroup.tsx
 const PopoverInGroup = ({ children, ref: refProp, ...props }) => {
@@ -46,7 +46,7 @@ const PopoverInGroup = ({ children, ref: refProp, ...props }) => {
 			const mergedProps = mergeProps(children.props, resolvedProps);
 			return cloneElement(children, {
 				...mergedProps,
-				className: clsx(mergedProps.className, triggerClassName),
+				className: clsx$1(mergedProps.className, triggerClassName),
 				ref: mergeRefs([
 					children.ref,
 					renderProps.ref,

package/es/Popover/PopoverInGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverInGroup.mjs","names":["BasePopover"],"sources":["../../src/Popover/PopoverInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport clsx from 'clsx';\nimport { cloneElement, type FC, isValidElement, useMemo } from 'react';\nimport { use } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport { PopoverGroupHandleContext } from './groupContext';\nimport { HOVER_ONLY_TRIGGER_ATTR } from './hoverOnlyPress';\nimport { type PopoverProps } from './type';\nimport { useMergedPopoverProps } from './useMergedPopoverProps';\n\nexport const PopoverInGroup: FC<PopoverProps> = ({ children, ref: refProp, ...props }) => {\n  const group = use(PopoverGroupHandleContext);\n  const item = useMergedPopoverProps(props);\n\n  const { openOnClick, openOnHover } = useMemo(\n    () => parseTrigger(item.trigger ?? 'hover'),\n    [item.trigger],\n  );\n\n  const resolvedOpenDelay = item.openDelay ?? (item.mouseEnterDelay ?? 0.1) * 1000;\n  const resolvedCloseDelay = item.closeDelay ?? (item.mouseLeaveDelay ?? 0.1) * 1000;\n  const disabled = Boolean(item.disabled);\n\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton: item.nativeButton,\n  });\n\n  // Don't render trigger behavior if no content\n  if (!item.content) {\n    return children as any;\n  }\n\n  const triggerProps = {\n    [HOVER_ONLY_TRIGGER_ATTR]: openOnClick ? undefined : '',\n    closeDelay: resolvedCloseDelay,\n    delay: resolvedOpenDelay,\n    disabled,\n    openOnHover: openOnHover && !disabled,\n    ...item.triggerProps,\n    payload: item,\n  };\n\n  const triggerClassName = item.classNames?.trigger;\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        handle={group ?? undefined}\n        {...triggerProps}\n        nativeButton={resolvedNativeButton}\n        render={(renderProps) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return renderProps as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = renderProps as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(mergedProps.className, triggerClassName),\n            ref: mergeRefs([(children as any).ref, (renderProps as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      handle={group ?? undefined}\n      {...triggerProps}\n      className={triggerClassName}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverInGroup.displayName = 'PopoverInGroup';\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,kBAAoC,EAAE,UAAU,KAAK,SAAS,GAAG,YAAY;CACxF,MAAM,QAAQ,IAAI,yBAAyB;CAC3C,MAAM,OAAO,sBAAsB,KAAK;CAExC,MAAM,EAAE,aAAa,gBAAgB,cAC7B,aAAa,KAAK,WAAW,OAAO,GAC1C,CAAC,KAAK,OAAO,CACf;CAEA,MAAM,oBAAoB,KAAK,cAAc,KAAK,mBAAmB,MAAO;CAC5E,MAAM,qBAAqB,KAAK,eAAe,KAAK,mBAAmB,MAAO;CAC9E,MAAM,WAAW,QAAQ,KAAK,QAAQ;CAEtC,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA,cAAc,KAAK;CACrB,CAAC;CAGD,IAAI,CAAC,KAAK,SACR,OAAO;CAGT,MAAM,eAAe;GAClB,0BAA0B,cAAc,KAAA,IAAY;EACrD,YAAY;EACZ,OAAO;EACP;EACA,aAAa,eAAe,CAAC;EAC7B,GAAG,KAAK;EACR,SAAS;CACX;CAEA,MAAM,mBAAmB,KAAK,YAAY;CAE1C,IAAI,eAAe,QAAQ,GACzB,OACE,oBAACA,QAAY,SAAb;EACE,QAAQ,SAAS,KAAA;EACjB,GAAI;EACJ,cAAc;EACd,SAAS,gBAAgB;GAGvB,MAAM,uBAAuB;IAC3B,IAAI,8BAA8B,OAAO;IAEzC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc;IAChD,OAAO;GACT,EAAA,CAAG;GAEH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;GACrE,OAAO,aAAa,UAAiB;IACnC,GAAG;IACH,WAAW,KAAK,YAAY,WAAW,gBAAgB;IACvD,KAAK,UAAU;KAAE,SAAiB;KAAM,YAAoB;KAAK;IAAO,CAAC;GAC3E,CAAC;EACH;CACD,CAAA;CAIL,OACE,oBAACA,QAAY,SAAb;EACE,QAAQ,SAAS,KAAA;EACjB,GAAI;EACJ,WAAW;EACX,cAAc;EACd,KAAK;EAEJ;CACkB,CAAA;AAEzB;AAEA,eAAe,cAAc"}
+{"version":3,"file":"PopoverInGroup.mjs","names":["BasePopover","clsx"],"sources":["../../src/Popover/PopoverInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport clsx from 'clsx';\nimport { cloneElement, type FC, isValidElement, useMemo } from 'react';\nimport { use } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport { PopoverGroupHandleContext } from './groupContext';\nimport { HOVER_ONLY_TRIGGER_ATTR } from './hoverOnlyPress';\nimport { type PopoverProps } from './type';\nimport { useMergedPopoverProps } from './useMergedPopoverProps';\n\nexport const PopoverInGroup: FC<PopoverProps> = ({ children, ref: refProp, ...props }) => {\n  const group = use(PopoverGroupHandleContext);\n  const item = useMergedPopoverProps(props);\n\n  const { openOnClick, openOnHover } = useMemo(\n    () => parseTrigger(item.trigger ?? 'hover'),\n    [item.trigger],\n  );\n\n  const resolvedOpenDelay = item.openDelay ?? (item.mouseEnterDelay ?? 0.1) * 1000;\n  const resolvedCloseDelay = item.closeDelay ?? (item.mouseLeaveDelay ?? 0.1) * 1000;\n  const disabled = Boolean(item.disabled);\n\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton: item.nativeButton,\n  });\n\n  // Don't render trigger behavior if no content\n  if (!item.content) {\n    return children as any;\n  }\n\n  const triggerProps = {\n    [HOVER_ONLY_TRIGGER_ATTR]: openOnClick ? undefined : '',\n    closeDelay: resolvedCloseDelay,\n    delay: resolvedOpenDelay,\n    disabled,\n    openOnHover: openOnHover && !disabled,\n    ...item.triggerProps,\n    payload: item,\n  };\n\n  const triggerClassName = item.classNames?.trigger;\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        handle={group ?? undefined}\n        {...triggerProps}\n        nativeButton={resolvedNativeButton}\n        render={(renderProps) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return renderProps as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = renderProps as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(mergedProps.className, triggerClassName),\n            ref: mergeRefs([(children as any).ref, (renderProps as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      handle={group ?? undefined}\n      {...triggerProps}\n      className={triggerClassName}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverInGroup.displayName = 'PopoverInGroup';\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,kBAAoC,EAAE,UAAU,KAAK,SAAS,GAAG,YAAY;CACxF,MAAM,QAAQ,IAAI,yBAAyB;CAC3C,MAAM,OAAO,sBAAsB,KAAK;CAExC,MAAM,EAAE,aAAa,gBAAgB,cAC7B,aAAa,KAAK,WAAW,OAAO,GAC1C,CAAC,KAAK,OAAO,CACf;CAEA,MAAM,oBAAoB,KAAK,cAAc,KAAK,mBAAmB,MAAO;CAC5E,MAAM,qBAAqB,KAAK,eAAe,KAAK,mBAAmB,MAAO;CAC9E,MAAM,WAAW,QAAQ,KAAK,QAAQ;CAEtC,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA,cAAc,KAAK;CACrB,CAAC;CAGD,IAAI,CAAC,KAAK,SACR,OAAO;CAGT,MAAM,eAAe;GAClB,0BAA0B,cAAc,KAAA,IAAY;EACrD,YAAY;EACZ,OAAO;EACP;EACA,aAAa,eAAe,CAAC;EAC7B,GAAG,KAAK;EACR,SAAS;CACX;CAEA,MAAM,mBAAmB,KAAK,YAAY;CAE1C,IAAI,eAAe,QAAQ,GACzB,OACE,oBAACA,QAAY,SAAb;EACE,QAAQ,SAAS,KAAA;EACjB,GAAI;EACJ,cAAc;EACd,SAAS,gBAAgB;GAGvB,MAAM,uBAAuB;IAC3B,IAAI,8BAA8B,OAAO;IAEzC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc;IAChD,OAAO;GACT,EAAA,CAAG;GAEH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;GACrE,OAAO,aAAa,UAAiB;IACnC,GAAG;IACH,WAAWC,OAAK,YAAY,WAAW,gBAAgB;IACvD,KAAK,UAAU;KAAE,SAAiB;KAAM,YAAoB;KAAK;IAAO,CAAC;GAC3E,CAAC;EACH;CACD,CAAA;CAIL,OACE,oBAACD,QAAY,SAAb;EACE,QAAQ,SAAS,KAAA;EACjB,GAAI;EACJ,WAAW;EACX,cAAc;EACd,KAAK;EAEJ;CACkB,CAAA;AAEzB;AAEA,eAAe,cAAc"}