@lobehub/ui 5.60.0 → 5.61.1

package/es/EmojiPicker/AvatarUploader.mjs

@@ -4,9 +4,9 @@ import Center from "../Flex/Center.mjs";
 import Icon from "../Icon/Icon.mjs";
 import Text from "../Text/Text.mjs";
 import Button from "../base-ui/Button/Button.mjs";
+import { useTranslation } from "../i18n/useTranslation.mjs";
 import UploadDragger from "../base-ui/Upload/UploadDragger.mjs";
 import Tag from "../base-ui/Tag/Tag.mjs";
-import { useTranslation } from "../i18n/useTranslation.mjs";
 import emojiPicker_default from "../i18n/resources/en/emojiPicker.mjs";
 import { ToastHost, toast } from "../base-ui/Toast/imperative.mjs";
 import { memo, useCallback, useRef, useState } from "react";

package/es/Form/components/FormSubmitFooter.mjs

@@ -2,8 +2,8 @@
 import { useMotionComponent } from "../../MotionProvider/index.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Icon from "../../Icon/Icon.mjs";
-import Button$1 from "../../Button/Button.mjs";
 import { useTranslation } from "../../i18n/useTranslation.mjs";
+import Button$1 from "../../Button/Button.mjs";
 import { submitFooterStyles } from "../style.mjs";
 import form_default from "../../i18n/resources/en/form.mjs";
 import { useFormContext } from "./FormProvider.mjs";

package/es/base-ui/Pagination/Pagination.mjs

@@ -1,26 +1,46 @@
 "use client";
+import Input_default from "../Input/Input.mjs";
 import Select from "../Select/Select.mjs";
 import { useEventCallback } from "../../hooks/useEventCallback.mjs";
 import { clampPage, getPageCount, getPaginationItems } from "./helpers.mjs";
 import { buttonVariants, ellipsisVariants, styles } from "./style.mjs";
-import { memo, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import useMergeState from "use-merge-value";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 //#region src/base-ui/Pagination/Pagination.tsx
-const Pagination = memo(({ className, current, defaultCurrent = 1, defaultPageSize = 10, disabled, hideOnSinglePage, onChange, onPageSizeChange, pageSize, pageSizeOptions = [
+const XS_QUERY = "(max-width: 575px)";
+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] = useMergeState(defaultPageSize, { value: pageSize });
 	const pageCount = getPageCount(total, mergedPageSize);
 	const [mergedCurrent, setMergedCurrent] = useMergeState(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) {
@@ -56,62 +76,159 @@ const Pagination = memo(({ className, current, defaultCurrent = 1, defaultPageSi
 		commitCurrent(nextCurrent, nextSize);
 		onPageSizeChange?.(nextCurrent, nextSize);
 	};
-	const items = getPaginationItems(displayCurrent, pageCount);
+	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 prevButton = /* @__PURE__ */ jsx("button", {
+		"aria-label": "Previous page",
+		className: buttonVariants({ size }),
+		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",
+		className: buttonVariants({ size }),
+		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",
-		className: cx(styles.root, className),
 		ref,
 		role: "navigation",
-		style,
+		style: {
+			...customStyles?.root,
+			...style
+		},
+		className: cx(styles.root, align && styles.aligned, align && styles[align], classNames?.root, className),
 		...rest,
 		children: [
 			showTotal && /* @__PURE__ */ jsx("span", {
 				className: styles.total,
 				children: showTotal(total, [rangeStart, rangeEnd])
 			}),
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": "Previous page",
-				className: buttonVariants({ size }),
-				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__ */ jsx("button", {
-				"aria-current": item === displayCurrent ? "page" : void 0,
-				className: buttonVariants({ size }),
-				disabled,
-				type: "button",
-				onClick: () => goTo(item),
-				children: item
-			}, item) : /* @__PURE__ */ jsx("span", {
-				className: ellipsisVariants({ size }),
-				children: "···"
-			}, item)),
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": "Next page",
-				className: buttonVariants({ size }),
-				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", {
+					className: styles.simplePager,
+					title: title(`${displayCurrent}/${pageCount}`),
+					children: [
+						simpleConfig.readOnly ? displayCurrent : /* @__PURE__ */ jsx(Input_default, {
+							"aria-label": "Current page",
+							className: styles.jumperInput,
+							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", {
+							className: 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,
+					className: cx(buttonVariants({ size }), classNames?.item),
+					disabled,
+					style: customStyles?.item,
+					title: title(String(item)),
+					type: "button",
+					onClick: () => goTo(item),
+					children: render(item, "page", item)
+				}, item) : /* @__PURE__ */ jsx("span", {
+					className: ellipsisVariants({ size }),
+					title: title(item === "ellipsis-prev" ? `Previous ${jumpStep} Pages` : `Next ${jumpStep} Pages`),
+					children: item === "ellipsis-prev" ? render(Math.max(1, displayCurrent - jumpStep), "jump-prev", "···") : render(Math.min(pageCount, displayCurrent + jumpStep), "jump-next", "···")
+				}, item)),
+				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", {
+				className: styles.jumper,
+				children: [
+					"Go to",
+					/* @__PURE__ */ jsx(Input_default, {
+						"aria-label": "Go to page",
+						className: styles.jumperInput,
+						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", {
+						className: buttonVariants({ size }),
+						disabled,
+						type: "button",
+						onClick: jump,
+						children: goButton === true ? "Go" : goButton
+					}) : goButton ? /* @__PURE__ */ jsx("span", {
+						onClick: jump,
+						children: goButton
+					}) : "Page"
+				]
 			})
 		]
 	});

package/es/base-ui/Pagination/Pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Select from '@/base-ui/Select';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { clampPage, getPageCount, getPaginationItems } from './helpers';\nimport { buttonVariants, ellipsisVariants, 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 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        className={cx(styles.root, className)}\n        ref={ref}\n        role=\"navigation\"\n        style={style}\n        {...rest}\n      >\n        {showTotal && (\n          <span className={styles.total}>{showTotal(total, [rangeStart, rangeEnd])}</span>\n        )}\n        <button\n          aria-label=\"Previous page\"\n          className={buttonVariants({ size })}\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              className={buttonVariants({ size })}\n              disabled={disabled}\n              key={item}\n              type=\"button\"\n              onClick={() => goTo(item)}\n            >\n              {item}\n            </button>\n          ) : (\n            <span className={ellipsisVariants({ size })} key={item}>\n              ···\n            </span>\n          ),\n        )}\n        <button\n          aria-label=\"Next page\"\n          className={buttonVariants({ size })}\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":["useControlledState","Input"],"sources":["../../../src/base-ui/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  type KeyboardEvent,\n  memo,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Input } from '@/base-ui/Input';\nimport Select from '@/base-ui/Select';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { clampPage, getPageCount, getPaginationItems } from './helpers';\nimport { buttonVariants, ellipsisVariants, styles } from './style';\nimport type { PaginationItemType, PaginationProps } from './type';\n\nconst XS_QUERY = '(max-width: 575px)';\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\n    const prevButton = (\n      <button\n        aria-label=\"Previous page\"\n        className={buttonVariants({ size })}\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        className={buttonVariants({ size })}\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        style={{ ...customStyles?.root, ...style }}\n        className={cx(\n          styles.root,\n          align && styles.aligned,\n          align && styles[align],\n          classNames?.root,\n          className,\n        )}\n        {...rest}\n      >\n        {showTotal && (\n          <span className={styles.total}>{showTotal(total, [rangeStart, rangeEnd])}</span>\n        )}\n        {simpleConfig ? (\n          <>\n            {prevButton}\n            <span className={styles.simplePager} title={title(`${displayCurrent}/${pageCount}`)}>\n              {simpleConfig.readOnly ? (\n                displayCurrent\n              ) : (\n                <Input\n                  aria-label=\"Current page\"\n                  className={styles.jumperInput}\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 className={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                  className={cx(buttonVariants({ size }), classNames?.item)}\n                  disabled={disabled}\n                  key={item}\n                  style={customStyles?.item}\n                  title={title(String(item))}\n                  type=\"button\"\n                  onClick={() => goTo(item)}\n                >\n                  {render(item, 'page', item)}\n                </button>\n              ) : (\n                <span\n                  className={ellipsisVariants({ size })}\n                  key={item}\n                  title={title(\n                    item === 'ellipsis-prev'\n                      ? `Previous ${jumpStep} Pages`\n                      : `Next ${jumpStep} Pages`,\n                  )}\n                >\n                  {item === 'ellipsis-prev'\n                    ? render(Math.max(1, displayCurrent - jumpStep), 'jump-prev', '···')\n                    : render(Math.min(pageCount, displayCurrent + jumpStep), 'jump-next', '···')}\n                </span>\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 className={styles.jumper}>\n            Go to\n            <Input\n              aria-label=\"Go to page\"\n              className={styles.jumperInput}\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\n                className={buttonVariants({ size })}\n                disabled={disabled}\n                type=\"button\"\n                onClick={jump}\n              >\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/base-ui/Pagination/helpers.mjs

@@ -1,11 +1,11 @@
 //#region src/base-ui/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/base-ui/Pagination/helpers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.mjs","names":[],"sources":["../../../src/base-ui/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/base-ui/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/base-ui/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/base-ui/Pagination/style.mjs

@@ -2,6 +2,10 @@ import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Pagination/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
+	aligned: css`
+    display: flex;
+    width: 100%;
+  `,
 	button: css`
     cursor: pointer;
 
@@ -40,6 +44,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       color: ${cssVar.colorText};
       background: ${cssVar.colorFillSecondary};
     }
+  `,
+	center: css`
+    justify-content: center;
   `,
 	ellipsis: css`
     display: inline-flex;
@@ -50,12 +57,41 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     color: ${cssVar.colorTextQuaternary};
     letter-spacing: 2px;
+  `,
+	end: css`
+    justify-content: flex-end;
+  `,
+	jumper: css`
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+
+    margin-inline-start: 8px;
+
+    font-size: 13px;
+    color: ${cssVar.colorTextSecondary};
+    white-space: nowrap;
+  `,
+	jumperInput: css`
+    width: 50px;
   `,
 	root: css`
     display: inline-flex;
     gap: 4px;
     align-items: center;
     font-variant-numeric: tabular-nums;
+  `,
+	simplePager: css`
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+
+    font-size: 13px;
+    color: ${cssVar.colorTextSecondary};
+    white-space: nowrap;
+  `,
+	simpleSlash: css`
+    color: ${cssVar.colorTextQuaternary};
   `,
 	small: css`
     min-width: 24px;
@@ -64,6 +100,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 	smallEllipsis: css`
     width: 24px;
+  `,
+	start: css`
+    justify-content: flex-start;
   `,
 	total: css`
     margin-inline-end: 8px;

package/es/base-ui/Pagination/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Pagination/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  button: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-width: 28px;\n    height: 28px;\n    padding-inline: 6px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: 13px;\n    font-weight: 500;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition: background-color 0.15s;\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:disabled {\n      cursor: default;\n      color: ${cssVar.colorTextQuaternary};\n      background: transparent;\n    }\n\n    &[aria-current='page'] {\n      font-weight: 600;\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  ellipsis: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 28px;\n\n    color: ${cssVar.colorTextQuaternary};\n    letter-spacing: 2px;\n  `,\n  root: css`\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n    font-variant-numeric: tabular-nums;\n  `,\n  small: css`\n    min-width: 24px;\n    height: 24px;\n    font-size: 12px;\n  `,\n  smallEllipsis: css`\n    width: 24px;\n  `,\n  total: css`\n    margin-inline-end: 8px;\n    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n    white-space: nowrap;\n  `,\n}));\n\nexport const buttonVariants = cva(styles.button, {\n  defaultVariants: {\n    size: 'middle',\n  },\n  variants: {\n    size: {\n      middle: null,\n      small: styles.small,\n    },\n  },\n});\n\nexport const ellipsisVariants = cva(styles.ellipsis, {\n  defaultVariants: {\n    size: 'middle',\n  },\n  variants: {\n    size: {\n      middle: null,\n      small: styles.smallEllipsis,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,aAAa;;;;;aAK5B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;;;eAK9B,OAAO,oBAAoB;;;;;;eAM3B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAG5C,UAAU,GAAG;;;;;;;aAOF,OAAO,oBAAoB;;;CAGtC,MAAM,GAAG;;;;;;CAMT,OAAO,GAAG;;;;;CAKV,eAAe,GAAG;;;CAGlB,OAAO,GAAG;;;aAGC,OAAO,kBAAkB;;;AAGtC,EAAE;AAEF,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO,OAAO;CAChB,EACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Pagination/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  aligned: css`\n    display: flex;\n    width: 100%;\n  `,\n  button: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-width: 28px;\n    height: 28px;\n    padding-inline: 6px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: 13px;\n    font-weight: 500;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition: background-color 0.15s;\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:disabled {\n      cursor: default;\n      color: ${cssVar.colorTextQuaternary};\n      background: transparent;\n    }\n\n    &[aria-current='page'] {\n      font-weight: 600;\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  center: css`\n    justify-content: center;\n  `,\n  ellipsis: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 28px;\n\n    color: ${cssVar.colorTextQuaternary};\n    letter-spacing: 2px;\n  `,\n  end: css`\n    justify-content: flex-end;\n  `,\n  jumper: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n\n    margin-inline-start: 8px;\n\n    font-size: 13px;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n  `,\n  jumperInput: css`\n    width: 50px;\n  `,\n  root: css`\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n    font-variant-numeric: tabular-nums;\n  `,\n  simplePager: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n\n    font-size: 13px;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n  `,\n  simpleSlash: css`\n    color: ${cssVar.colorTextQuaternary};\n  `,\n  small: css`\n    min-width: 24px;\n    height: 24px;\n    font-size: 12px;\n  `,\n  smallEllipsis: css`\n    width: 24px;\n  `,\n  start: css`\n    justify-content: flex-start;\n  `,\n  total: css`\n    margin-inline-end: 8px;\n    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n    white-space: nowrap;\n  `,\n}));\n\nexport const buttonVariants = cva(styles.button, {\n  defaultVariants: {\n    size: 'middle',\n  },\n  variants: {\n    size: {\n      middle: null,\n      small: styles.small,\n    },\n  },\n});\n\nexport const ellipsisVariants = cva(styles.ellipsis, {\n  defaultVariants: {\n    size: 'middle',\n  },\n  variants: {\n    size: {\n      middle: null,\n      small: styles.smallEllipsis,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;CAIZ,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,aAAa;;;;;aAK5B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;;;eAK9B,OAAO,oBAAoB;;;;;;eAM3B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAG5C,QAAQ,GAAG;;;CAGX,UAAU,GAAG;;;;;;;aAOF,OAAO,oBAAoB;;;CAGtC,KAAK,GAAG;;;CAGR,QAAQ,GAAG;;;;;;;;aAQA,OAAO,mBAAmB;;;CAGrC,aAAa,GAAG;;;CAGhB,MAAM,GAAG;;;;;;CAMT,aAAa,GAAG;;;;;;aAML,OAAO,mBAAmB;;;CAGrC,aAAa,GAAG;aACL,OAAO,oBAAoB;;CAEtC,OAAO,GAAG;;;;;CAKV,eAAe,GAAG;;;CAGlB,OAAO,GAAG;;;CAGV,OAAO,GAAG;;;aAGC,OAAO,kBAAkB;;;AAGtC,EAAE;AAEF,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO,OAAO;CAChB,EACF;AACF,CAAC"}

package/es/base-ui/Pagination/type.d.mts

@@ -1,22 +1,60 @@
-import { ComponentProps, ReactNode, Ref } from "react";
+import { SelectProps } from "../Select/type.mjs";
+import { CSSProperties, ComponentProps, ComponentType, ReactNode, Ref } from "react";
 //#region src/base-ui/Pagination/type.d.ts
 type PaginationSize = 'small' | 'middle';
+/** antd `PaginationSemanticType`: `root` is the `<nav>`, `item` each page-number button. */
+type PaginationSemanticName = 'item' | 'root';
+/** antd `itemRender` item types: `jump-prev` / `jump-next` are the ellipses. */
+type PaginationItemType = 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next';
+type PaginationAlign = 'start' | 'center' | 'end';
+/** Extra props of the page-size `Select` when `showSizeChanger` is an object. */
+interface PaginationSizeChangerProps extends Omit<SelectProps, 'mode' | 'onChange' | 'options' | 'value'> {
+  onChange?: (value: string) => void;
+}
 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
-export { PaginationProps, PaginationSize };
+export { PaginationAlign, PaginationItemType, PaginationProps, PaginationSemanticName, PaginationSize, PaginationSizeChangerProps };
 //# sourceMappingURL=type.d.mts.map

package/es/base-ui/QRCode/QRCode.mjs

@@ -1,7 +1,7 @@
 "use client";
 import Icon from "../../Icon/Icon.mjs";
-import Spin from "../Spin/Spin.mjs";
 import { useTranslation } from "../../i18n/useTranslation.mjs";
+import Spin from "../Spin/Spin.mjs";
 import { panelStyles } from "../panelStyles.mjs";
 import qrCode_default from "../../i18n/resources/en/qrCode.mjs";
 import { buildQrPath } from "./qrPath.mjs";

package/es/base-ui/Select/Select.mjs

@@ -2,7 +2,7 @@
 import { styles } from "../DropdownMenu/sharedStyle.mjs";
 import { styles as styles$1, triggerVariants } from "./style.mjs";
 import { SelectPositioner } from "./atoms.mjs";
-import { isValueEmpty } from "./helpers.mjs";
+import { isValueEmpty, shouldIgnoreRootValueChange } from "./helpers.mjs";
 import { usePortalContainer, useSelectOpen, useSelectSearch, useSelectValue, useSelectVirtual } from "./hooks.mjs";
 import { EmptyContent, SelectListSection, SelectSearchInput, SelectTriggerSuffix, createTriggerValueRenderer, resolveIconNode, resolveSuffixIcon } from "./parts.mjs";
 import { renderOptions } from "./renderOptions.mjs";
@@ -36,13 +36,6 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 		onOpenChange,
 		open
 	});
-	const handleRootValueChange = useCallback((nextValue) => {
-		if (!(isTags && !mergedOpen)) handleValueChange(nextValue);
-	}, [
-		handleValueChange,
-		isTags,
-		mergedOpen
-	]);
 	const handleRemoveTag = useCallback((index) => handleValueChange(valueArray.filter((_, itemIndex) => itemIndex !== index)), [handleValueChange, valueArray]);
 	const { filteredOptions, handleSearchChange, handleSearchKeyDown, searchValue, shouldShowSearch, stopSearchPropagation } = useSelectSearch({
 		appendTagValues,
@@ -54,6 +47,20 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 		showSearch,
 		tokenSeparators
 	});
+	const handleRootValueChange = useCallback((nextValue, eventDetails) => {
+		if (isTags && !mergedOpen) return;
+		if (shouldIgnoreRootValueChange({
+			mergedOpen,
+			reason: eventDetails?.reason,
+			searchValue
+		})) return;
+		handleValueChange(nextValue);
+	}, [
+		handleValueChange,
+		isTags,
+		mergedOpen,
+		searchValue
+	]);
 	const virtualState = useSelectVirtual({
 		filteredOptions,
 		listItemHeight,