fix(ts): 添加ts配置

2024-06-03 14:42:23 +08:00 · 2024-06-03 14:42:23 +08:00 · 3d8959891e
commit 3d8959891e
parent f5ff6e760f
49 changed files with 12902 additions and 0 deletions
--- a/packages/meta/src/pagination/Pagination.tsx
+++ b/packages/meta/src/pagination/Pagination.tsx
@ -0,0 +1,151 @@
+import * as React from 'react';
+import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined';
+import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined';
+import LeftOutlined from '@ant-design/icons/LeftOutlined';
+import RightOutlined from '@ant-design/icons/RightOutlined';
+import classNames from 'classnames';
+import type { PaginationLocale, PaginationProps as RcPaginationProps } from 'rc-pagination';
+import RcPagination from 'rc-pagination';
+import enUS from 'rc-pagination/lib/locale/en_US';
+
+import { ConfigContext } from '../config-provider';
+import useSize from '../config-provider/hooks/useSize';
+import useBreakpoint from '../grid/hooks/useBreakpoint';
+import { useLocale } from '../locale';
+import { useToken } from '../theme/internal';
+import { MiddleSelect, MiniSelect } from './Select';
+import useStyle from './style';
+import BorderedStyle from './style/bordered';
+
+export interface PaginationProps extends RcPaginationProps {
+  showQuickJumper?: boolean | { goButton?: React.ReactNode };
+  size?: 'default' | 'small';
+  responsive?: boolean;
+  role?: string;
+  totalBoundaryShowSizeChanger?: number;
+  rootClassName?: string;
+}
+
+export type PaginationPosition = 'top' | 'bottom' | 'both';
+
+export type PaginationAlign = 'start' | 'center' | 'end';
+
+export interface PaginationConfig extends Omit<PaginationProps, 'rootClassName'> {
+  position?: PaginationPosition;
+  align?: PaginationAlign;
+}
+
+export type { PaginationLocale };
+
+const Pagination: React.FC<PaginationProps> = (props) => {
+  const {
+    prefixCls: customizePrefixCls,
+    selectPrefixCls: customizeSelectPrefixCls,
+    className,
+    rootClassName,
+    style,
+    size: customizeSize,
+    locale: customLocale,
+    selectComponentClass,
+    responsive,
+    showSizeChanger,
+    ...restProps
+  } = props;
+  const { xs } = useBreakpoint(responsive);
+  const [, token] = useToken();
+
+  const { getPrefixCls, direction, pagination = {} } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('pagination', customizePrefixCls);
+
+  // Style
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+
+  const mergedShowSizeChanger = showSizeChanger ?? pagination.showSizeChanger;
+
+  const iconsProps = React.useMemo<Record<PropertyKey, React.ReactNode>>(() => {
+    const ellipsis = <span className={`${prefixCls}-item-ellipsis`}>•••</span>;
+    const prevIcon = (
+      <button className={`${prefixCls}-item-link`} type="button" tabIndex={-1}>
+        {direction === 'rtl' ? <RightOutlined /> : <LeftOutlined />}
+      </button>
+    );
+    const nextIcon = (
+      <button className={`${prefixCls}-item-link`} type="button" tabIndex={-1}>
+        {direction === 'rtl' ? <LeftOutlined /> : <RightOutlined />}
+      </button>
+    );
+    const jumpPrevIcon = (
+      <a className={`${prefixCls}-item-link`}>
+        <div className={`${prefixCls}-item-container`}>
+          {direction === 'rtl' ? (
+            <DoubleRightOutlined className={`${prefixCls}-item-link-icon`} />
+          ) : (
+            <DoubleLeftOutlined className={`${prefixCls}-item-link-icon`} />
+          )}
+          {ellipsis}
+        </div>
+      </a>
+    );
+    const jumpNextIcon = (
+      <a className={`${prefixCls}-item-link`}>
+        <div className={`${prefixCls}-item-container`}>
+          {direction === 'rtl' ? (
+            <DoubleLeftOutlined className={`${prefixCls}-item-link-icon`} />
+          ) : (
+            <DoubleRightOutlined className={`${prefixCls}-item-link-icon`} />
+          )}
+          {ellipsis}
+        </div>
+      </a>
+    );
+    return { prevIcon, nextIcon, jumpPrevIcon, jumpNextIcon };
+  }, [direction, prefixCls]);
+
+  const [contextLocale] = useLocale('Pagination', enUS);
+
+  const locale = { ...contextLocale, ...customLocale };
+
+  const mergedSize = useSize(customizeSize);
+
+  const isSmall = mergedSize === 'small' || !!(xs && !mergedSize && responsive);
+
+  const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
+
+  const extendedClassName = classNames(
+    {
+      [`${prefixCls}-mini`]: isSmall,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+      [`${prefixCls}-bordered`]: token.wireframe,
+    },
+    pagination?.className,
+    className,
+    rootClassName,
+    hashId,
+    cssVarCls,
+  );
+
+  const mergedStyle: React.CSSProperties = { ...pagination?.style, ...style };
+
+  return wrapCSSVar(
+    <>
+      {token.wireframe && <BorderedStyle prefixCls={prefixCls} />}
+      <RcPagination
+        {...iconsProps}
+        {...restProps}
+        style={mergedStyle}
+        prefixCls={prefixCls}
+        selectPrefixCls={selectPrefixCls}
+        className={extendedClassName}
+        selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : MiddleSelect)}
+        locale={locale}
+        showSizeChanger={mergedShowSizeChanger}
+      />
+    </>,
+  );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  Pagination.displayName = 'Pagination';
+}
+
+export default Pagination;
--- a/packages/meta/src/pagination/Select.tsx
+++ b/packages/meta/src/pagination/Select.tsx
@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import type { SelectProps } from '../select';
+import Select from '../select';
+
+type CompoundedComponent = React.FC<SelectProps> & {
+  Option: typeof Select.Option;
+};
+
+const MiniSelect: CompoundedComponent = (props) => <Select {...props} showSearch size="small" />;
+const MiddleSelect: CompoundedComponent = (props) => <Select {...props} showSearch size="middle" />;
+
+MiniSelect.Option = Select.Option;
+MiddleSelect.Option = Select.Option;
+
+export { MiniSelect, MiddleSelect };
--- a/packages/meta/src/pagination/tests/snapshots/demo-extend.test.ts.snap
+++ b/packages/meta/src/pagination/tests/snapshots/demo-extend.test.ts.snap
--- a/packages/meta/src/pagination/tests/snapshots/demo.test.ts.snap
+++ b/packages/meta/src/pagination/tests/snapshots/demo.test.ts.snap
--- a/packages/meta/src/pagination/tests/snapshots/index.test.tsx.snap
+++ b/packages/meta/src/pagination/tests/snapshots/index.test.tsx.snap
@ -0,0 +1,398 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pagination ConfigProvider should be rendered correctly in RTL 1`] = `
+<ul
+  class="ant-pagination ant-pagination-rtl"
+>
+  <li
+    aria-disabled="true"
+    class="ant-pagination-prev ant-pagination-disabled"
+    title="Previous Page"
+  >
+    <button
+      class="ant-pagination-item-link"
+      disabled=""
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-label="right"
+        class="anticon anticon-right"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="right"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+    tabindex="0"
+    title="1"
+  >
+    <a
+      rel="nofollow"
+    >
+      1
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-2"
+    tabindex="0"
+    title="2"
+  >
+    <a
+      rel="nofollow"
+    >
+      2
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-3"
+    tabindex="0"
+    title="3"
+  >
+    <a
+      rel="nofollow"
+    >
+      3
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-4"
+    tabindex="0"
+    title="4"
+  >
+    <a
+      rel="nofollow"
+    >
+      4
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-5"
+    tabindex="0"
+    title="5"
+  >
+    <a
+      rel="nofollow"
+    >
+      5
+    </a>
+  </li>
+  <li
+    aria-disabled="false"
+    class="ant-pagination-next"
+    tabindex="0"
+    title="Next Page"
+  >
+    <button
+      class="ant-pagination-item-link"
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-label="left"
+        class="anticon anticon-left"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="left"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+</ul>
+`;
+
+exports[`Pagination ConfigProvider should be rendered correctly when componentSize is large 1`] = `
+<ul
+  class="ant-pagination"
+>
+  <li
+    aria-disabled="true"
+    class="ant-pagination-prev ant-pagination-disabled"
+    title="Previous Page"
+  >
+    <button
+      class="ant-pagination-item-link"
+      disabled=""
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-label="left"
+        class="anticon anticon-left"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="left"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+    tabindex="0"
+    title="1"
+  >
+    <a
+      rel="nofollow"
+    >
+      1
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-2"
+    tabindex="0"
+    title="2"
+  >
+    <a
+      rel="nofollow"
+    >
+      2
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-3"
+    tabindex="0"
+    title="3"
+  >
+    <a
+      rel="nofollow"
+    >
+      3
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-4"
+    tabindex="0"
+    title="4"
+  >
+    <a
+      rel="nofollow"
+    >
+      4
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-5"
+    tabindex="0"
+    title="5"
+  >
+    <a
+      rel="nofollow"
+    >
+      5
+    </a>
+  </li>
+  <li
+    aria-disabled="false"
+    class="ant-pagination-next"
+    tabindex="0"
+    title="Next Page"
+  >
+    <button
+      class="ant-pagination-item-link"
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-label="right"
+        class="anticon anticon-right"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="right"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+  <li
+    class="ant-pagination-options"
+  >
+    <div
+      aria-label="Page Size"
+      class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="Page Size"
+            aria-owns="rc_select_TEST_OR_SSR_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
+            role="combobox"
+            type="search"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-item"
+          title="10 / page"
+        >
+          10 / page
+        </span>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select: none;"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </li>
+</ul>
+`;
+
+exports[`Pagination rtl render component should be rendered correctly in RTL direction 1`] = `
+<ul
+  class="ant-pagination ant-pagination-rtl"
+>
+  <li
+    aria-disabled="true"
+    class="ant-pagination-prev ant-pagination-disabled"
+    title="Previous Page"
+  >
+    <button
+      class="ant-pagination-item-link"
+      disabled=""
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-label="right"
+        class="anticon anticon-right"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="right"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-disabled"
+    tabindex="0"
+    title="1"
+  >
+    <a
+      rel="nofollow"
+    >
+      1
+    </a>
+  </li>
+  <li
+    aria-disabled="true"
+    class="ant-pagination-next ant-pagination-disabled"
+    title="Next Page"
+  >
+    <button
+      class="ant-pagination-item-link"
+      disabled=""
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-label="left"
+        class="anticon anticon-left"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="left"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+</ul>
+`;
--- a/packages/meta/src/pagination/tests/demo-extend.test.ts
+++ b/packages/meta/src/pagination/tests/demo-extend.test.ts
@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('pagination');
--- a/packages/meta/src/pagination/tests/demo.test.ts
+++ b/packages/meta/src/pagination/tests/demo.test.ts
@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('pagination');
--- a/packages/meta/src/pagination/tests/image.test.ts
+++ b/packages/meta/src/pagination/tests/image.test.ts
@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Pagination image', () => {
+  imageDemoTest('pagination');
+});
--- a/packages/meta/src/pagination/tests/index.test.tsx
+++ b/packages/meta/src/pagination/tests/index.test.tsx
@ -0,0 +1,92 @@
+import React from 'react';
+import type { OptionFC } from 'rc-select/lib/Option';
+
+import type { PaginationProps } from '..';
+import Pagination from '..';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { fireEvent, render } from '../../../tests/utils';
+import ConfigProvider from '../../config-provider';
+import Select from '../../select';
+
+describe('Pagination', () => {
+  mountTest(Pagination);
+  rtlTest(Pagination);
+
+  it('should pass disabled to prev and next buttons', () => {
+    const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
+      if (type === 'prev') {
+        return <button type="button">prev</button>;
+      }
+      if (type === 'next') {
+        return <button type="button">next</button>;
+      }
+      return originalElement;
+    };
+    const { container } = render(
+      <Pagination defaultCurrent={1} total={50} itemRender={itemRender} />,
+    );
+    expect(container.querySelector('button')?.disabled).toBe(true);
+  });
+
+  it('should automatically be small when size is not specified', async () => {
+    const { container } = render(<Pagination responsive />);
+    expect(container.querySelector('ul')?.className.includes('ant-pagination-mini')).toBe(true);
+  });
+
+  // https://github.com/ant-design/ant-design/issues/24913
+  // https://github.com/ant-design/ant-design/issues/24501
+  it('should onChange called when pageSize change', () => {
+    const onChange = jest.fn();
+    const onShowSizeChange = jest.fn();
+    const { container } = render(
+      <Pagination
+        defaultCurrent={1}
+        total={500}
+        onChange={onChange}
+        onShowSizeChange={onShowSizeChange}
+      />,
+    );
+
+    fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
+
+    expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
+    fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
+    expect(onChange).toHaveBeenCalledWith(1, 20);
+  });
+
+  it('should support custom selectComponentClass', () => {
+    const CustomSelect: React.FC<{ className?: string }> & { Option: OptionFC } = ({
+      className,
+      ...props
+    }) => <Select className={`${className} custom-select`} {...props} />;
+
+    CustomSelect.Option = Select.Option;
+
+    const { container } = render(
+      <Pagination defaultCurrent={1} total={500} selectComponentClass={CustomSelect} />,
+    );
+    expect(container.querySelectorAll('.custom-select').length).toBeTruthy();
+  });
+
+  describe('ConfigProvider', () => {
+    it('should be rendered correctly in RTL', () => {
+      const { asFragment } = render(
+        <ConfigProvider direction="rtl">
+          <Pagination defaultCurrent={1} total={50} />
+        </ConfigProvider>,
+      );
+      expect(asFragment().firstChild).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly when componentSize is large', () => {
+      const { container, asFragment } = render(
+        <ConfigProvider componentSize="large">
+          <Pagination defaultCurrent={1} total={50} showSizeChanger />
+        </ConfigProvider>,
+      );
+      expect(asFragment().firstChild).toMatchSnapshot();
+      expect(container.querySelectorAll('.ant-select-lg').length).toBe(0);
+    });
+  });
+});
--- a/packages/meta/src/pagination/tests/simple.test.tsx
+++ b/packages/meta/src/pagination/tests/simple.test.tsx
@ -0,0 +1,19 @@
+import React from 'react';
+
+import Pagination from '..';
+import { render } from '../../../tests/utils';
+
+describe('Pagination simple mode', () => {
+  it('should support showTotal in simple mode', () => {
+    const { container } = render(
+      <Pagination
+        simple
+        total={100}
+        showTotal={(total: number, range: number[]) => `${range[0]}-${range[1]} of ${total} items`}
+      />,
+    );
+    expect(container?.querySelector('.ant-pagination-total-text')).toHaveTextContent(
+      '1-10 of 100 items',
+    );
+  });
+});
--- a/packages/meta/src/pagination/demo/all.md
+++ b/packages/meta/src/pagination/demo/all.md
@ -0,0 +1,7 @@
+## zh-CN
+
+展示所有配置选项。
+
+## en-US
+
+Show all configured prop.
--- a/packages/meta/src/pagination/demo/all.tsx
+++ b/packages/meta/src/pagination/demo/all.tsx
@ -0,0 +1,13 @@
+import React from 'react';
+import { Pagination } from 'antd';
+
+const App: React.FC = () => (
+  <Pagination
+    total={85}
+    showSizeChanger
+    showQuickJumper
+    showTotal={(total) => `Total ${total} items`}
+  />
+);
+
+export default App;
--- a/packages/meta/src/pagination/demo/basic.md
+++ b/packages/meta/src/pagination/demo/basic.md
@ -0,0 +1,7 @@
+## zh-CN
+
+基础分页。
+
+## en-US
+
+Basic pagination.
--- a/packages/meta/src/pagination/demo/basic.tsx
+++ b/packages/meta/src/pagination/demo/basic.tsx
@ -0,0 +1,6 @@
+import React from 'react';
+import { Pagination } from 'antd';
+
+const App: React.FC = () => <Pagination defaultCurrent={1} total={50} />;
+
+export default App;
--- a/packages/meta/src/pagination/demo/changer.md
+++ b/packages/meta/src/pagination/demo/changer.md
@ -0,0 +1,7 @@
+## zh-CN
+
+改变每页显示条目数。
+
+## en-US
+
+Change `pageSize`.
--- a/packages/meta/src/pagination/demo/changer.tsx
+++ b/packages/meta/src/pagination/demo/changer.tsx
@ -0,0 +1,28 @@
+import React from 'react';
+import type { PaginationProps } from 'antd';
+import { Pagination } from 'antd';
+
+const onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {
+  console.log(current, pageSize);
+};
+
+const App: React.FC = () => (
+  <>
+    <Pagination
+      showSizeChanger
+      onShowSizeChange={onShowSizeChange}
+      defaultCurrent={3}
+      total={500}
+    />
+    <br />
+    <Pagination
+      showSizeChanger
+      onShowSizeChange={onShowSizeChange}
+      defaultCurrent={3}
+      total={500}
+      disabled
+    />
+  </>
+);
+
+export default App;
--- a/packages/meta/src/pagination/demo/component-token.md
+++ b/packages/meta/src/pagination/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
--- a/packages/meta/src/pagination/demo/component-token.tsx
+++ b/packages/meta/src/pagination/demo/component-token.tsx
@ -0,0 +1,44 @@
+import React from 'react';
+import type { PaginationProps } from 'antd';
+import { ConfigProvider, Pagination } from 'antd';
+
+const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
+  if (type === 'prev') {
+    return <a>Previous</a>;
+  }
+  if (type === 'next') {
+    return <a>Next</a>;
+  }
+  return originalElement;
+};
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Pagination: {
+          itemSize: 20,
+          itemSizeSM: 12,
+          itemActiveBg: '#e7cc87',
+          itemLinkBg: '#344324',
+          itemActiveBgDisabled: '#9c1515',
+          itemInputBg: '#9c1515',
+          miniOptionsSizeChangerTop: 0,
+          itemBg: '#333',
+        },
+      },
+    }}
+  >
+    <Pagination
+      showSizeChanger
+      defaultCurrent={3}
+      total={500}
+      itemRender={itemRender}
+      showQuickJumper
+      showTotal={(total) => `Total ${total} items`}
+    />
+    <br />
+    <Pagination showSizeChanger defaultCurrent={3} total={500} disabled />
+  </ConfigProvider>
+);
+
+export default App;
--- a/packages/meta/src/pagination/demo/controlled.md
+++ b/packages/meta/src/pagination/demo/controlled.md
@ -0,0 +1,7 @@
+## zh-CN
+
+受控制的页码。
+
+## en-US
+
+Controlled page number.
--- a/packages/meta/src/pagination/demo/controlled.tsx
+++ b/packages/meta/src/pagination/demo/controlled.tsx
@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import type { PaginationProps } from 'antd';
+import { Pagination } from 'antd';
+
+const App: React.FC = () => {
+  const [current, setCurrent] = useState(3);
+
+  const onChange: PaginationProps['onChange'] = (page) => {
+    console.log(page);
+    setCurrent(page);
+  };
+
+  return <Pagination current={current} onChange={onChange} total={50} />;
+};
+
+export default App;
--- a/packages/meta/src/pagination/demo/itemRender.md
+++ b/packages/meta/src/pagination/demo/itemRender.md
@ -0,0 +1,7 @@
+## zh-CN
+
+修改上一步和下一步为文字链接。
+
+## en-US
+
+Use text link for prev and next button.
--- a/packages/meta/src/pagination/demo/itemRender.tsx
+++ b/packages/meta/src/pagination/demo/itemRender.tsx
@ -0,0 +1,17 @@
+import React from 'react';
+import type { PaginationProps } from 'antd';
+import { Pagination } from 'antd';
+
+const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
+  if (type === 'prev') {
+    return <a>Previous</a>;
+  }
+  if (type === 'next') {
+    return <a>Next</a>;
+  }
+  return originalElement;
+};
+
+const App: React.FC = () => <Pagination total={500} itemRender={itemRender} />;
+
+export default App;
--- a/packages/meta/src/pagination/demo/jump.md
+++ b/packages/meta/src/pagination/demo/jump.md
@ -0,0 +1,7 @@
+## zh-CN
+
+快速跳转到某一页。
+
+## en-US
+
+Jump to a page directly.
--- a/packages/meta/src/pagination/demo/jump.tsx
+++ b/packages/meta/src/pagination/demo/jump.tsx
@ -0,0 +1,17 @@
+import React from 'react';
+import type { PaginationProps } from 'antd';
+import { Pagination } from 'antd';
+
+const onChange: PaginationProps['onChange'] = (pageNumber) => {
+  console.log('Page: ', pageNumber);
+};
+
+const App: React.FC = () => (
+  <>
+    <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} />
+    <br />
+    <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} disabled />
+  </>
+);
+
+export default App;
--- a/packages/meta/src/pagination/demo/mini.md
+++ b/packages/meta/src/pagination/demo/mini.md
@ -0,0 +1,13 @@
+## zh-CN
+
+迷你版本。
+
+## en-US
+
+Mini size pagination.
+
+<style>
+#components-pagination-demo-mini .ant-pagination:not(:last-child) {
+  margin-bottom: 24px;
+}
+</style>
--- a/packages/meta/src/pagination/demo/mini.tsx
+++ b/packages/meta/src/pagination/demo/mini.tsx
@ -0,0 +1,23 @@
+import React from 'react';
+import type { PaginationProps } from 'antd';
+import { Pagination } from 'antd';
+
+const showTotal: PaginationProps['showTotal'] = (total) => `Total ${total} items`;
+
+const App: React.FC = () => (
+  <>
+    <Pagination size="small" total={50} />
+    <Pagination size="small" total={50} showSizeChanger showQuickJumper />
+    <Pagination size="small" total={50} showTotal={showTotal} />
+    <Pagination
+      size="small"
+      total={50}
+      disabled
+      showTotal={showTotal}
+      showSizeChanger
+      showQuickJumper
+    />
+  </>
+);
+
+export default App;
--- a/packages/meta/src/pagination/demo/more.md
+++ b/packages/meta/src/pagination/demo/more.md
@ -0,0 +1,7 @@
+## zh-CN
+
+更多分页。
+
+## en-US
+
+More pages.
--- a/packages/meta/src/pagination/demo/more.tsx
+++ b/packages/meta/src/pagination/demo/more.tsx
@ -0,0 +1,6 @@
+import React from 'react';
+import { Pagination } from 'antd';
+
+const App: React.FC = () => <Pagination defaultCurrent={6} total={500} />;
+
+export default App;
--- a/packages/meta/src/pagination/demo/simple.md
+++ b/packages/meta/src/pagination/demo/simple.md
@ -0,0 +1,7 @@
+## zh-CN
+
+简单的翻页。
+
+## en-US
+
+Simple mode.
--- a/packages/meta/src/pagination/demo/simple.tsx
+++ b/packages/meta/src/pagination/demo/simple.tsx
@ -0,0 +1,12 @@
+import React from 'react';
+import { Pagination } from 'antd';
+
+const App: React.FC = () => (
+  <>
+    <Pagination simple defaultCurrent={2} total={50} />
+    <br />
+    <Pagination disabled simple defaultCurrent={2} total={50} />
+  </>
+);
+
+export default App;
--- a/packages/meta/src/pagination/demo/total.md
+++ b/packages/meta/src/pagination/demo/total.md
@ -0,0 +1,7 @@
+## zh-CN
+
+通过设置 `showTotal` 展示总共有多少数据。
+
+## en-US
+
+You can show the total number of data by setting `showTotal`.
--- a/packages/meta/src/pagination/demo/total.tsx
+++ b/packages/meta/src/pagination/demo/total.tsx
@ -0,0 +1,22 @@
+import React from 'react';
+import { Pagination } from 'antd';
+
+const App: React.FC = () => (
+  <>
+    <Pagination
+      total={85}
+      showTotal={(total) => `Total ${total} items`}
+      defaultPageSize={20}
+      defaultCurrent={1}
+    />
+    <br />
+    <Pagination
+      total={85}
+      showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
+      defaultPageSize={20}
+      defaultCurrent={1}
+    />
+  </>
+);
+
+export default App;
--- a/packages/meta/src/pagination/demo/wireframe.md
+++ b/packages/meta/src/pagination/demo/wireframe.md
@ -0,0 +1,7 @@
+## zh-CN
+
+线框化样式。
+
+## en-US
+
+Wireframe style.
--- a/packages/meta/src/pagination/demo/wireframe.tsx
+++ b/packages/meta/src/pagination/demo/wireframe.tsx
@ -0,0 +1,16 @@
+import React from 'react';
+import { ConfigProvider, Pagination } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider theme={{ token: { wireframe: true } }}>
+    <Pagination showSizeChanger defaultCurrent={3} total={500} />
+    <br />
+    <Pagination showSizeChanger defaultCurrent={3} total={500} disabled />
+    <br />
+    <Pagination size="small" defaultCurrent={50} total={500} />
+    <br />
+    <Pagination disabled size="small" defaultCurrent={50} total={500} />
+  </ConfigProvider>
+);
+
+export default App;
--- a/packages/meta/src/pagination/design/behavior-pattern.tsx
+++ b/packages/meta/src/pagination/design/behavior-pattern.tsx
@ -0,0 +1,39 @@
+import React from 'react';
+
+import BehaviorMap from '../../../.dumi/theme/common/BehaviorMap';
+
+const BehaviorPattern: React.FC = () => (
+  <BehaviorMap
+    data={{
+      id: '200000004',
+      label: '跳转页面',
+      children: [
+        {
+          id: '500000061',
+          label: '跳转至指定页面',
+          targetType: 'mvp',
+        },
+        {
+          id: '200000005',
+          label: '调整单页展示条数',
+          targetType: 'extension',
+          link: 'components-pagination-index-tab-design-demo-page-size',
+        },
+        {
+          id: '200000006',
+          label: '快速跳转',
+          targetType: 'extension',
+          link: 'components-pagination-index-tab-design-demo-quick-jump',
+        },
+        {
+          id: '200000007',
+          label: '了解数据总量',
+          targetType: 'extension',
+          link: 'components-pagination-index-tab-design-demo-total',
+        },
+      ],
+    }}
+  />
+);
+
+export default BehaviorPattern;
--- a/packages/meta/src/pagination/design/demo/basic.tsx
+++ b/packages/meta/src/pagination/design/demo/basic.tsx
@ -0,0 +1,6 @@
+import React from 'react';
+import { Pagination } from 'antd';
+
+const App: React.FC = () => <Pagination defaultCurrent={2} total={50} showSizeChanger={false} />;
+
+export default App;
--- a/packages/meta/src/pagination/design/demo/large-amount.tsx
+++ b/packages/meta/src/pagination/design/demo/large-amount.tsx
@ -0,0 +1,6 @@
+import React from 'react';
+import { Pagination } from 'antd';
+
+const App: React.FC = () => <Pagination defaultCurrent={5} total={100} showSizeChanger={false} />;
+
+export default App;
--- a/packages/meta/src/pagination/design/demo/mini.tsx
+++ b/packages/meta/src/pagination/design/demo/mini.tsx
@ -0,0 +1,20 @@
+import React from 'react';
+import { Flex, Pagination } from 'antd';
+
+const App: React.FC = () => (
+  <Flex vertical gap="middle">
+    <Pagination defaultCurrent={1} total={50} showSizeChanger={false} size="small" />
+    <Pagination defaultCurrent={1} total={100} showSizeChanger={false} size="small" />
+    <Pagination defaultCurrent={1} total={100} size="small" />
+    <Pagination defaultCurrent={1} total={100} showQuickJumper size="small" />
+    <Pagination
+      defaultCurrent={1}
+      total={100}
+      showQuickJumper
+      size="small"
+      showTotal={(total, range) => `第 ${range.join('-')} 条 / 共 ${total} 条`}
+    />
+  </Flex>
+);
+
+export default App;
--- a/packages/meta/src/pagination/design/demo/page-size.tsx
+++ b/packages/meta/src/pagination/design/demo/page-size.tsx
@ -0,0 +1,6 @@
+import React from 'react';
+import { Pagination } from 'antd';
+
+const App: React.FC = () => <Pagination defaultCurrent={3} total={500} />;
+
+export default App;
--- a/packages/meta/src/pagination/design/demo/quick-jump.tsx
+++ b/packages/meta/src/pagination/design/demo/quick-jump.tsx
@ -0,0 +1,6 @@
+import React from 'react';
+import { Pagination } from 'antd';
+
+const App: React.FC = () => <Pagination defaultCurrent={3} total={500} showQuickJumper />;
+
+export default App;
--- a/packages/meta/src/pagination/design/demo/simple.tsx
+++ b/packages/meta/src/pagination/design/demo/simple.tsx
@ -0,0 +1,8 @@
+import React from 'react';
+import { Pagination } from 'antd';
+
+const App: React.FC = () => (
+  <Pagination defaultCurrent={2} total={50} showSizeChanger={false} simple />
+);
+
+export default App;
--- a/packages/meta/src/pagination/design/demo/total.tsx
+++ b/packages/meta/src/pagination/design/demo/total.tsx
@ -0,0 +1,13 @@
+import React from 'react';
+import { Pagination } from 'antd';
+
+const App: React.FC = () => (
+  <Pagination
+    defaultCurrent={3}
+    total={500}
+    showQuickJumper
+    showTotal={(total, range) => `第 ${range.join('-')} 条 / 共 ${total} 条`}
+  />
+);
+
+export default App;
--- a/packages/meta/src/pagination/index.ts
+++ b/packages/meta/src/pagination/index.ts
@ -0,0 +1,4 @@
+import Pagination from './Pagination';
+
+export type { PaginationConfig, PaginationProps } from './Pagination';
+export default Pagination;
--- a/packages/meta/src/pagination/index.zh-CN.md
+++ b/packages/meta/src/pagination/index.zh-CN.md
@ -0,0 +1,62 @@
+---
+category: Components
+group: 导航
+title: Pagination
+subtitle: 分页
+description: 分页器用于分隔长列表，每次只加载一个页面。
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAAAAAAAAAAAADrJ8AQ/original
+---
+
+## 何时使用
+
+- 当加载/渲染所有数据将花费很多时间时；
+- 可切换页码浏览数据。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/basic.tsx">基本</code>
+<code src="./demo/more.tsx">更多</code>
+<code src="./demo/changer.tsx">改变</code>
+<code src="./demo/jump.tsx">跳转</code>
+<code src="./demo/mini.tsx">迷你</code>
+<code src="./demo/simple.tsx">简洁</code>
+<code src="./demo/controlled.tsx">受控</code>
+<code src="./demo/total.tsx">总数</code>
+<code src="./demo/all.tsx">全部展示</code>
+<code src="./demo/itemRender.tsx">上一步和下一步</code>
+<code src="./demo/wireframe.tsx" debug>线框风格</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+```js
+<Pagination onChange={onChange} total={50} />
+```
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| current | 当前页数 | number | - |  |
+| defaultCurrent | 默认的当前页数 | number | 1 |  |
+| defaultPageSize | 默认的每页条数 | number | 10 |  |
+| disabled | 禁用分页 | boolean | - |  |
+| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |  |
+| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |  |
+| pageSize | 每页条数 | number | - |  |
+| pageSizeOptions | 指定每页可以显示多少条 | string\[] \| number\[] | \[`10`, `20`, `50`, `100`] |  |
+| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - |  |
+| showLessItems | 是否显示较少页面内容 | boolean | false |  |
+| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false |  |
+| showSizeChanger | 是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true | boolean | - |  |
+| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true |  |
+| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - |  |
+| simple | 当添加该属性时，显示为简单分页 | boolean | - |  |
+| size | 当为 `small` 时，是小尺寸分页 | `default` \| `small` | `default` |  |
+| total | 数据总数 | number | 0 |  |
+| onChange | 页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - |  |
+| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - |  |
+
+## 主题变量（Design Token）
--- a/packages/meta/src/pagination/style/bordered.ts
+++ b/packages/meta/src/pagination/style/bordered.ts
@ -0,0 +1,112 @@
+import { unit } from '@ant-design/cssinjs';
+
+import type { PaginationToken } from '.';
+import { prepareComponentToken, prepareToken } from '.';
+import type { GenerateStyle } from '../../theme/interface';
+import { genSubStyleComponent } from '../../theme/util/genComponentStyleHook';
+
+const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}${componentCls}-bordered${componentCls}-disabled:not(${componentCls}-mini)`]: {
+      '&, &:hover': {
+        [`${componentCls}-item-link`]: {
+          borderColor: token.colorBorder,
+        },
+      },
+
+      '&:focus-visible': {
+        [`${componentCls}-item-link`]: {
+          borderColor: token.colorBorder,
+        },
+      },
+
+      [`${componentCls}-item, ${componentCls}-item-link`]: {
+        backgroundColor: token.colorBgContainerDisabled,
+        borderColor: token.colorBorder,
+
+        [`&:hover:not(${componentCls}-item-active)`]: {
+          backgroundColor: token.colorBgContainerDisabled,
+          borderColor: token.colorBorder,
+
+          a: {
+            color: token.colorTextDisabled,
+          },
+        },
+
+        [`&${componentCls}-item-active`]: {
+          backgroundColor: token.itemActiveBgDisabled,
+        },
+      },
+
+      [`${componentCls}-prev, ${componentCls}-next`]: {
+        '&:hover button': {
+          backgroundColor: token.colorBgContainerDisabled,
+          borderColor: token.colorBorder,
+          color: token.colorTextDisabled,
+        },
+
+        [`${componentCls}-item-link`]: {
+          backgroundColor: token.colorBgContainerDisabled,
+          borderColor: token.colorBorder,
+        },
+      },
+    },
+
+    [`${componentCls}${componentCls}-bordered:not(${componentCls}-mini)`]: {
+      [`${componentCls}-prev, ${componentCls}-next`]: {
+        '&:hover button': {
+          borderColor: token.colorPrimaryHover,
+          backgroundColor: token.itemBg,
+        },
+
+        [`${componentCls}-item-link`]: {
+          backgroundColor: token.itemLinkBg,
+          borderColor: token.colorBorder,
+        },
+
+        [`&:hover ${componentCls}-item-link`]: {
+          borderColor: token.colorPrimary,
+          backgroundColor: token.itemBg,
+          color: token.colorPrimary,
+        },
+
+        [`&${componentCls}-disabled`]: {
+          [`${componentCls}-item-link`]: {
+            borderColor: token.colorBorder,
+            color: token.colorTextDisabled,
+          },
+        },
+      },
+
+      [`${componentCls}-item`]: {
+        backgroundColor: token.itemBg,
+        border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
+
+        [`&:hover:not(${componentCls}-item-active)`]: {
+          borderColor: token.colorPrimary,
+          backgroundColor: token.itemBg,
+
+          a: {
+            color: token.colorPrimary,
+          },
+        },
+
+        '&-active': {
+          borderColor: token.colorPrimary,
+        },
+      },
+    },
+  };
+};
+
+export default genSubStyleComponent(
+  ['Pagination', 'bordered'],
+  (token) => {
+    const paginationToken = prepareToken(token);
+
+    return [genBorderedStyle(paginationToken)];
+  },
+  prepareComponentToken,
+);
--- a/packages/meta/src/pagination/style/index.ts
+++ b/packages/meta/src/pagination/style/index.ts
@ -0,0 +1,697 @@
+import { unit } from '@ant-design/cssinjs';
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenStyleFn } from 'antd/es/theme/util/genComponentStyleHook';
+
+import {
+  genBasicInputStyle,
+  genInputSmallStyle,
+  initComponentToken,
+  initInputToken,
+} from '../../input/style';
+import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
+import { genBaseOutlinedStyle, genDisabledStyle } from '../../input/style/variants';
+import { genFocusOutline, genFocusStyle, resetComponent } from '../../style';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+
+export interface ComponentToken {
+  /**
+   * @desc 页码选项背景色
+   * @descEN Background color of Pagination item
+   */
+  itemBg: string;
+  /**
+   * @desc 页码尺寸
+   * @descEN Size of Pagination item
+   */
+  itemSize: number;
+  /**
+   * @desc 页码激活态背景色
+   * @descEN Background color of active Pagination item
+   */
+  itemActiveBg: string;
+  /**
+   * @desc 小号页码尺寸
+   * @descEN Size of small Pagination item
+   */
+  itemSizeSM: number;
+  /**
+   * @desc 页码链接背景色
+   * @descEN Background color of Pagination item link
+   */
+  itemLinkBg: string;
+  /**
+   * @desc 页码激活态禁用状态背景色
+   * @descEN Background color of disabled active Pagination item
+   */
+  itemActiveBgDisabled: string;
+  /**
+   * @desc 页码激活态禁用状态文字颜色
+   * @descEN Text color of disabled active Pagination item
+   */
+  itemActiveColorDisabled: string;
+  /**
+   * @desc 输入框背景色
+   * @descEN Background color of input
+   */
+  itemInputBg: string;
+  /**
+   * @desc 每页展示数量选择器 top
+   * @descEN Top of Pagination size changer
+   */
+  miniOptionsSizeChangerTop: number;
+}
+
+export interface PaginationToken
+  extends FullToken<'Pagination'>,
+    SharedComponentToken,
+    SharedInputToken {
+  inputOutlineOffset: number;
+  paginationMiniOptionsMarginInlineStart: number | string;
+  paginationMiniQuickJumperInputWidth: number | string;
+  paginationItemPaddingInline: number | string;
+  paginationEllipsisLetterSpacing: number | string;
+  paginationEllipsisTextIndent: string;
+  paginationSlashMarginInlineStart: number;
+  paginationSlashMarginInlineEnd: number;
+}
+
+const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-disabled`]: {
+      '&, &:hover': {
+        cursor: 'not-allowed',
+
+        [`${componentCls}-item-link`]: {
+          color: token.colorTextDisabled,
+          cursor: 'not-allowed',
+        },
+      },
+
+      '&:focus-visible': {
+        cursor: 'not-allowed',
+
+        [`${componentCls}-item-link`]: {
+          color: token.colorTextDisabled,
+          cursor: 'not-allowed',
+        },
+      },
+    },
+
+    [`&${componentCls}-disabled`]: {
+      cursor: 'not-allowed',
+      [`${componentCls}-item`]: {
+        cursor: 'not-allowed',
+
+        '&:hover, &:active': {
+          backgroundColor: 'transparent',
+        },
+
+        a: {
+          color: token.colorTextDisabled,
+          backgroundColor: 'transparent',
+          border: 'none',
+          cursor: 'not-allowed',
+        },
+
+        '&-active': {
+          borderColor: token.colorBorder,
+          backgroundColor: token.itemActiveBgDisabled,
+
+          '&:hover, &:active': {
+            backgroundColor: token.itemActiveBgDisabled,
+          },
+
+          a: {
+            color: token.itemActiveColorDisabled,
+          },
+        },
+      },
+
+      [`${componentCls}-item-link`]: {
+        color: token.colorTextDisabled,
+        cursor: 'not-allowed',
+        '&:hover, &:active': {
+          backgroundColor: 'transparent',
+        },
+        [`${componentCls}-simple&`]: {
+          backgroundColor: 'transparent',
+          '&:hover, &:active': {
+            backgroundColor: 'transparent',
+          },
+        },
+      },
+
+      [`${componentCls}-simple-pager`]: {
+        color: token.colorTextDisabled,
+      },
+
+      [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
+        [`${componentCls}-item-link-icon`]: {
+          opacity: 0,
+        },
+
+        [`${componentCls}-item-ellipsis`]: {
+          opacity: 1,
+        },
+      },
+    },
+    [`&${componentCls}-simple`]: {
+      [`${componentCls}-prev, ${componentCls}-next`]: {
+        [`&${componentCls}-disabled ${componentCls}-item-link`]: {
+          '&:hover, &:active': {
+            backgroundColor: 'transparent',
+          },
+        },
+      },
+    },
+  };
+};
+
+const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
+  const { componentCls } = token;
+
+  return {
+    [`&${componentCls}-mini ${componentCls}-total-text, &${componentCls}-mini ${componentCls}-simple-pager`]:
+      {
+        height: token.itemSizeSM,
+        lineHeight: unit(token.itemSizeSM),
+      },
+
+    [`&${componentCls}-mini ${componentCls}-item`]: {
+      minWidth: token.itemSizeSM,
+      height: token.itemSizeSM,
+      margin: 0,
+      lineHeight: unit(token.calc(token.itemSizeSM).sub(2).equal()),
+    },
+
+    [`&${componentCls}-mini:not(${componentCls}-disabled) ${componentCls}-item:not(${componentCls}-item-active)`]:
+      {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        '&:hover': {
+          backgroundColor: token.colorBgTextHover,
+        },
+        '&:active': {
+          backgroundColor: token.colorBgTextActive,
+        },
+      },
+
+    [`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
+      minWidth: token.itemSizeSM,
+      height: token.itemSizeSM,
+      margin: 0,
+      lineHeight: unit(token.itemSizeSM),
+    },
+
+    [`&${componentCls}-mini:not(${componentCls}-disabled)`]: {
+      [`${componentCls}-prev, ${componentCls}-next`]: {
+        [`&:hover ${componentCls}-item-link`]: {
+          backgroundColor: token.colorBgTextHover,
+        },
+        [`&:active ${componentCls}-item-link`]: {
+          backgroundColor: token.colorBgTextActive,
+        },
+        [`&${componentCls}-disabled:hover ${componentCls}-item-link`]: {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+
+    [`
+    &${componentCls}-mini ${componentCls}-prev ${componentCls}-item-link,
+    &${componentCls}-mini ${componentCls}-next ${componentCls}-item-link
+    `]: {
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+
+      '&::after': {
+        height: token.itemSizeSM,
+        lineHeight: unit(token.itemSizeSM),
+      },
+    },
+
+    [`&${componentCls}-mini ${componentCls}-jump-prev, &${componentCls}-mini ${componentCls}-jump-next`]:
+      {
+        height: token.itemSizeSM,
+        marginInlineEnd: 0,
+        lineHeight: unit(token.itemSizeSM),
+      },
+
+    [`&${componentCls}-mini ${componentCls}-options`]: {
+      marginInlineStart: token.paginationMiniOptionsMarginInlineStart,
+
+      [`&-size-changer`]: {
+        top: token.miniOptionsSizeChangerTop,
+      },
+
+      [`&-quick-jumper`]: {
+        height: token.itemSizeSM,
+        lineHeight: unit(token.itemSizeSM),
+
+        input: {
+          ...genInputSmallStyle(token),
+
+          width: token.paginationMiniQuickJumperInputWidth,
+          height: token.controlHeightSM,
+        },
+      },
+    },
+  };
+};
+
+const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
+  const { componentCls } = token;
+
+  return {
+    [`
+    &${componentCls}-simple ${componentCls}-prev,
+    &${componentCls}-simple ${componentCls}-next
+    `]: {
+      height: token.itemSizeSM,
+      lineHeight: unit(token.itemSizeSM),
+      verticalAlign: 'top',
+      [`${componentCls}-item-link`]: {
+        height: token.itemSizeSM,
+        backgroundColor: 'transparent',
+        border: 0,
+        '&:hover': {
+          backgroundColor: token.colorBgTextHover,
+        },
+        '&:active': {
+          backgroundColor: token.colorBgTextActive,
+        },
+        '&::after': {
+          height: token.itemSizeSM,
+          lineHeight: unit(token.itemSizeSM),
+        },
+      },
+    },
+
+    [`&${componentCls}-simple ${componentCls}-simple-pager`]: {
+      display: 'inline-block',
+      height: token.itemSizeSM,
+      marginInlineEnd: token.marginXS,
+
+      input: {
+        boxSizing: 'border-box',
+        height: '100%',
+        marginInlineEnd: token.marginXS,
+        padding: `0 ${unit(token.paginationItemPaddingInline)}`,
+        textAlign: 'center',
+        backgroundColor: token.itemInputBg,
+        border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
+        borderRadius: token.borderRadius,
+        outline: 'none',
+        transition: `border-color ${token.motionDurationMid}`,
+        color: 'inherit',
+
+        '&:hover': {
+          borderColor: token.colorPrimary,
+        },
+
+        '&:focus': {
+          borderColor: token.colorPrimaryHover,
+          boxShadow: `${unit(token.inputOutlineOffset)} 0 ${unit(token.controlOutlineWidth)} ${
+            token.controlOutline
+          }`,
+        },
+
+        '&[disabled]': {
+          color: token.colorTextDisabled,
+          backgroundColor: token.colorBgContainerDisabled,
+          borderColor: token.colorBorder,
+          cursor: 'not-allowed',
+        },
+      },
+    },
+  };
+};
+
+const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
+      outline: 0,
+
+      [`${componentCls}-item-container`]: {
+        position: 'relative',
+
+        [`${componentCls}-item-link-icon`]: {
+          color: token.colorPrimary,
+          fontSize: token.fontSizeSM,
+          opacity: 0,
+          transition: `all ${token.motionDurationMid}`,
+
+          '&-svg': {
+            top: 0,
+            insetInlineEnd: 0,
+            bottom: 0,
+            insetInlineStart: 0,
+            margin: 'auto',
+          },
+        },
+
+        [`${componentCls}-item-ellipsis`]: {
+          position: 'absolute',
+          top: 0,
+          insetInlineEnd: 0,
+          bottom: 0,
+          insetInlineStart: 0,
+          display: 'block',
+          margin: 'auto',
+          color: token.colorTextDisabled,
+          fontFamily: 'Arial, Helvetica, sans-serif',
+          letterSpacing: token.paginationEllipsisLetterSpacing,
+          textAlign: 'center',
+          textIndent: token.paginationEllipsisTextIndent,
+          opacity: 1,
+          transition: `all ${token.motionDurationMid}`,
+        },
+      },
+
+      '&:hover': {
+        [`${componentCls}-item-link-icon`]: {
+          opacity: 1,
+        },
+        [`${componentCls}-item-ellipsis`]: {
+          opacity: 0,
+        },
+      },
+    },
+
+    [`
+    ${componentCls}-prev,
+    ${componentCls}-jump-prev,
+    ${componentCls}-jump-next
+    `]: {
+      marginInlineEnd: token.marginXS,
+    },
+
+    [`
+    ${componentCls}-prev,
+    ${componentCls}-next,
+    ${componentCls}-jump-prev,
+    ${componentCls}-jump-next
+    `]: {
+      display: 'inline-block',
+      minWidth: token.itemSize,
+      height: token.itemSize,
+      color: token.colorText,
+      fontFamily: token.fontFamily,
+      lineHeight: `${unit(token.itemSize)}`,
+      textAlign: 'center',
+      verticalAlign: 'middle',
+      listStyle: 'none',
+      borderRadius: token.borderRadius,
+      cursor: 'pointer',
+      transition: `all ${token.motionDurationMid}`,
+    },
+
+    [`${componentCls}-prev, ${componentCls}-next`]: {
+      fontFamily: 'Arial, Helvetica, sans-serif',
+      outline: 0,
+
+      button: {
+        color: token.colorText,
+        cursor: 'pointer',
+        userSelect: 'none',
+      },
+
+      [`${componentCls}-item-link`]: {
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        padding: 0,
+        fontSize: token.fontSizeSM,
+        textAlign: 'center',
+        backgroundColor: 'transparent',
+        border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
+        borderRadius: token.borderRadius,
+        outline: 'none',
+        transition: `all ${token.motionDurationMid}`,
+      },
+
+      [`&:hover ${componentCls}-item-link`]: {
+        backgroundColor: token.colorBgTextHover,
+      },
+
+      [`&:active ${componentCls}-item-link`]: {
+        backgroundColor: token.colorBgTextActive,
+      },
+
+      [`&${componentCls}-disabled:hover`]: {
+        [`${componentCls}-item-link`]: {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+
+    [`${componentCls}-slash`]: {
+      marginInlineEnd: token.paginationSlashMarginInlineEnd,
+      marginInlineStart: token.paginationSlashMarginInlineStart,
+    },
+
+    [`${componentCls}-options`]: {
+      display: 'inline-block',
+      marginInlineStart: token.margin,
+      verticalAlign: 'middle',
+
+      '&-size-changer': {
+        display: 'inline-block',
+        width: 'auto',
+      },
+
+      '&-quick-jumper': {
+        display: 'inline-block',
+        height: token.controlHeight,
+        marginInlineStart: token.marginXS,
+        lineHeight: unit(token.controlHeight),
+        verticalAlign: 'top',
+
+        input: {
+          ...genBasicInputStyle(token),
+          ...genBaseOutlinedStyle(token, {
+            borderColor: token.colorBorder,
+            hoverBorderColor: token.colorPrimaryHover,
+            activeBorderColor: token.colorPrimary,
+            activeShadow: token.activeShadow,
+          }),
+          '&[disabled]': {
+            ...genDisabledStyle(token),
+          },
+
+          width: token.calc(token.controlHeightLG).mul(1.25).equal(),
+          height: token.controlHeight,
+          boxSizing: 'border-box',
+          margin: 0,
+          marginInlineStart: token.marginXS,
+          marginInlineEnd: token.marginXS,
+        },
+      },
+    },
+  };
+};
+
+const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-item`]: {
+      display: 'inline-block',
+      minWidth: token.itemSize,
+      height: token.itemSize,
+      marginInlineEnd: token.marginXS,
+      fontFamily: token.fontFamily,
+      lineHeight: unit(token.calc(token.itemSize).sub(2).equal()),
+      textAlign: 'center',
+      verticalAlign: 'middle',
+      listStyle: 'none',
+      backgroundColor: 'transparent',
+      border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
+      borderRadius: token.borderRadius,
+      outline: 0,
+      cursor: 'pointer',
+      userSelect: 'none',
+
+      a: {
+        display: 'block',
+        padding: `0 ${unit(token.paginationItemPaddingInline)}`,
+        color: token.colorText,
+
+        '&:hover': {
+          textDecoration: 'none',
+        },
+      },
+
+      [`&:not(${componentCls}-item-active)`]: {
+        '&:hover': {
+          transition: `all ${token.motionDurationMid}`,
+          backgroundColor: token.colorBgTextHover,
+        },
+
+        '&:active': {
+          backgroundColor: token.colorBgTextActive,
+        },
+      },
+
+      '&-active': {
+        fontWeight: token.fontWeightStrong,
+        backgroundColor: token.itemActiveBg,
+        borderColor: token.colorPrimary,
+
+        a: {
+          color: token.colorPrimary,
+        },
+
+        '&:hover': {
+          borderColor: token.colorPrimaryHover,
+        },
+
+        '&:hover a': {
+          color: token.colorPrimaryHover,
+        },
+      },
+    },
+  };
+};
+
+const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
+  const { componentCls } = token;
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+
+      'ul, ol': {
+        margin: 0,
+        padding: 0,
+        listStyle: 'none',
+      },
+
+      '&::after': {
+        display: 'block',
+        clear: 'both',
+        height: 0,
+        overflow: 'hidden',
+        visibility: 'hidden',
+        content: '""',
+      },
+
+      [`${componentCls}-total-text`]: {
+        display: 'inline-block',
+        height: token.itemSize,
+        marginInlineEnd: token.marginXS,
+        lineHeight: unit(token.calc(token.itemSize).sub(2).equal()),
+        verticalAlign: 'middle',
+      },
+
+      // item style
+      ...genPaginationItemStyle(token),
+
+      // jump btn style
+      ...genPaginationJumpStyle(token),
+
+      // simple style
+      ...genPaginationSimpleStyle(token),
+
+      // mini style
+      ...genPaginationMiniStyle(token),
+
+      // disabled style
+      ...genPaginationDisabledStyle(token),
+
+      // media query style
+      [`@media only screen and (max-width: ${token.screenLG}px)`]: {
+        [`${componentCls}-item`]: {
+          '&-after-jump-prev, &-before-jump-next': {
+            display: 'none',
+          },
+        },
+      },
+
+      [`@media only screen and (max-width: ${token.screenSM}px)`]: {
+        [`${componentCls}-options`]: {
+          display: 'none',
+        },
+      },
+    },
+
+    // rtl style
+    [`&${token.componentCls}-rtl`]: {
+      direction: 'rtl',
+    },
+  };
+};
+
+const genPaginationFocusStyle: GenerateStyle<PaginationToken> = (token) => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}:not(${componentCls}-disabled)`]: {
+      [`${componentCls}-item`]: {
+        ...genFocusStyle(token),
+      },
+
+      [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
+        '&:focus-visible': {
+          [`${componentCls}-item-link-icon`]: {
+            opacity: 1,
+          },
+          [`${componentCls}-item-ellipsis`]: {
+            opacity: 0,
+          },
+          ...genFocusOutline(token),
+        },
+      },
+
+      [`${componentCls}-prev, ${componentCls}-next`]: {
+        [`&:focus-visible ${componentCls}-item-link`]: {
+          ...genFocusOutline(token),
+        },
+      },
+    },
+  };
+};
+
+export const prepareComponentToken: GetDefaultToken<'Pagination'> = (token) => ({
+  itemBg: token.colorBgContainer,
+  itemSize: token.controlHeight,
+  itemSizeSM: token.controlHeightSM,
+  itemActiveBg: token.colorBgContainer,
+  itemLinkBg: token.colorBgContainer,
+  itemActiveColorDisabled: token.colorTextDisabled,
+  itemActiveBgDisabled: token.controlItemBgActiveDisabled,
+  itemInputBg: token.colorBgContainer,
+  miniOptionsSizeChangerTop: 0,
+  ...initComponentToken(token),
+});
+
+export const prepareToken = (token: Parameters<GenStyleFn<'Pagination'>>[0]) =>
+  mergeToken<PaginationToken>(
+    token,
+    {
+      inputOutlineOffset: 0,
+      paginationMiniOptionsMarginInlineStart: token.calc(token.marginXXS).div(2).equal(),
+      paginationMiniQuickJumperInputWidth: token.calc(token.controlHeightLG).mul(1.1).equal(),
+      paginationItemPaddingInline: token.calc(token.marginXXS).mul(1.5).equal(),
+      paginationEllipsisLetterSpacing: token.calc(token.marginXXS).div(2).equal(),
+      paginationSlashMarginInlineStart: token.marginXXS,
+      paginationSlashMarginInlineEnd: token.marginSM,
+      paginationEllipsisTextIndent: '0.13em', // magic for ui experience
+    },
+    initInputToken(token),
+  );
+
+// ============================== Export ==============================
+export default genStyleHooks(
+  'Pagination',
+  (token) => {
+    const paginationToken = prepareToken(token);
+    return [genPaginationStyle(paginationToken), genPaginationFocusStyle(paginationToken)];
+  },
+  prepareComponentToken,
+);
--- a/packages/meta/src/transfer/ListItem.tsx
+++ b/packages/meta/src/transfer/ListItem.tsx
@ -43,6 +43,7 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
    title = String(renderedText);
  }

+  // @ts-ignore
  const [contextLocale] = useLocale('Transfer', defaultLocale.Transfer);

  const liProps: React.HTMLAttributes<HTMLLIElement> = { className, title };
@ -56,6 +57,7 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
        <TransButton
          disabled={disabled || item.disabled}
          className={`${prefixCls}-content-item-remove`}
+          // @ts-ignore
          aria-label={contextLocale?.remove}
          onClick={() => {
            onRemove?.(item);
--- a/packages/meta/src/transfer/index.tsx
+++ b/packages/meta/src/transfer/index.tsx
@ -422,12 +422,15 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
    cssVarCls,
  );

+  // @ts-ignore
  const [contextLocale] = useLocale('Transfer', defaultLocale.Transfer);

+  // @ts-ignore
  const listLocale = getLocale(contextLocale!);

  const [leftTitle, rightTitle] = getTitles(listLocale);

+  // @ts-ignore
  const mergedSelectionsIcon = selectionsIcon ?? transfer?.selectionsIcon;

  return wrapCSSVar(
--- a/packages/meta/src/transfer/style/index.ts
+++ b/packages/meta/src/transfer/style/index.ts
@ -38,6 +38,7 @@ export interface ComponentToken {
  headerHeight: number;
 }

+  // @ts-ignore
 interface TransferToken extends FullToken<'Transfer'> {
  transferHeaderVerticalPadding: number;
 }
@ -45,6 +46,7 @@ interface TransferToken extends FullToken<'Transfer'> {
 const genTransferCustomizeStyle: GenerateStyle<TransferToken> = (
  token: TransferToken,
 ): CSSObject => {
+  // @ts-ignore
  const { antCls, componentCls, listHeight, controlHeightLG } = token;

  const tableCls = `${antCls}-table`;
@ -115,14 +117,20 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
    colorBorder,
    colorSplit,
    lineWidth,
+  // @ts-ignore
    itemHeight,
+  // @ts-ignore
    headerHeight,
    transferHeaderVerticalPadding,
+  // @ts-ignore
    itemPaddingBlock,
    controlItemBgActive,
    colorTextDisabled,
+  // @ts-ignore
    listHeight,
+  // @ts-ignore
    listWidth,
+  // @ts-ignore
    listWidthLG,
    fontSizeIcon,
    marginXS,
@ -376,6 +384,7 @@ const genTransferRTLStyle: GenerateStyle<TransferToken> = (token: TransferToken)
  };
 };

+  // @ts-ignore
 export const prepareComponentToken: GetDefaultToken<'Transfer'> = (token) => {
  const { fontSize, lineHeight, controlHeight, controlHeightLG, lineWidth } = token;
  const fontHeight = Math.round(fontSize * lineHeight);
@ -392,6 +401,7 @@ export const prepareComponentToken: GetDefaultToken<'Transfer'> = (token) => {

 // ============================== Export ==============================
 export default genStyleHooks(
+  // @ts-ignore
  'Transfer',
  (token) => {
    const transferToken = mergeToken<TransferToken>(token);