@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/number-keyboard/style/index.css

@@ -0,0 +1,169 @@
+.am-number-keyboard {
+  --am-number-keyboard-z-index: var(--am-z-index-popup-base);
+  --am-number-keyboard-bg: var(--am-color-bg-layout);
+  --am-number-keyboard-key-height: 48px;
+  --am-number-keyboard-key-font-size: 24px;
+  --am-number-keyboard-key-bg: var(--am-color-bg-container);
+  --am-number-keyboard-key-active-bg: var(--am-color-fill);
+  --am-number-keyboard-key-radius: var(--am-border-radius);
+  --am-number-keyboard-gap: 6px;
+  --am-number-keyboard-padding: 6px;
+  --am-number-keyboard-title-height: 40px;
+  --am-number-keyboard-title-color: var(--am-color-text-secondary);
+  --am-number-keyboard-title-font-size: var(--am-font-size-lg);
+  --am-number-keyboard-close-color: var(--am-color-primary);
+  --am-number-keyboard-confirm-bg: var(--am-color-primary);
+  --am-number-keyboard-confirm-active-bg: var(--am-color-primary-active);
+  --am-number-keyboard-confirm-color: var(--am-color-text-light-solid);
+  --am-number-keyboard-confirm-font-size: var(--am-font-size-lg);
+
+  box-sizing: border-box;
+  width: 100%;
+  color: var(--am-color-text);
+  font-size: var(--am-font-size);
+  font-family: var(--am-font-family);
+  line-height: var(--am-line-height);
+  background: var(--am-number-keyboard-bg);
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.am-number-keyboard-fixed {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--am-number-keyboard-z-index);
+}
+
+.am-number-keyboard-safe-area {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.am-number-keyboard-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--am-number-keyboard-title-height);
+  padding-top: var(--am-number-keyboard-padding);
+  color: var(--am-number-keyboard-title-color);
+  font-size: var(--am-number-keyboard-title-font-size);
+}
+
+.am-number-keyboard-title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.am-number-keyboard-close {
+  position: absolute;
+  top: var(--am-number-keyboard-padding);
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0 var(--am-padding);
+  color: var(--am-number-keyboard-close-color);
+  font-size: var(--am-font-size);
+  font-family: inherit;
+  background: transparent;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+}
+
+.am-number-keyboard-close:active {
+  opacity: var(--am-opacity-active);
+}
+
+[dir='rtl'] .am-number-keyboard-close,
+[dir='rtl'].am-number-keyboard .am-number-keyboard-close {
+  right: auto;
+  left: 0;
+}
+
+.am-number-keyboard-body {
+  display: flex;
+  gap: var(--am-number-keyboard-gap);
+  padding: var(--am-number-keyboard-padding);
+  /* digits read left-to-right in every locale */
+  direction: ltr;
+}
+
+.am-number-keyboard-keys {
+  display: grid;
+  flex: 3;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--am-number-keyboard-gap);
+}
+
+.am-number-keyboard-sidebar {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--am-number-keyboard-gap);
+}
+
+.am-number-keyboard-sidebar .am-number-keyboard-key-wrapper {
+  flex: 1;
+}
+
+.am-number-keyboard-key-wrapper {
+  position: relative;
+  min-width: 0;
+}
+
+.am-number-keyboard-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--am-number-keyboard-key-height);
+  font-size: var(--am-number-keyboard-key-font-size);
+  line-height: 1.2;
+  background: var(--am-number-keyboard-key-bg);
+  border-radius: var(--am-number-keyboard-key-radius);
+  cursor: pointer;
+  font-variant-numeric: tabular-nums;
+}
+
+.am-number-keyboard-key:active,
+.am-number-keyboard-key-active {
+  background-image: linear-gradient(var(--am-number-keyboard-key-active-bg), var(--am-number-keyboard-key-active-bg));
+}
+
+.am-number-keyboard-key-large {
+  height: 100%;
+  min-height: var(--am-number-keyboard-key-height);
+}
+
+.am-number-keyboard-key-blank,
+.am-number-keyboard-key-blank:active {
+  background: transparent;
+  cursor: default;
+}
+
+.am-number-keyboard-key-delete {
+  font-size: var(--am-font-size-lg);
+}
+
+.am-number-keyboard-delete-icon {
+  width: 32px;
+  height: 22px;
+}
+
+.am-number-keyboard-key-confirm {
+  color: var(--am-number-keyboard-confirm-color);
+  font-size: var(--am-number-keyboard-confirm-font-size);
+  background: var(--am-number-keyboard-confirm-bg);
+}
+
+.am-number-keyboard-key-confirm:active,
+.am-number-keyboard-key-confirm.am-number-keyboard-key-active {
+  background: var(--am-number-keyboard-confirm-active-bg);
+}

package/dist/pagination/Pagination.js

@@ -0,0 +1,4 @@
+import Pagination_vue_vue_type_script_setup_true_lang_default from "./Pagination.vue_vue_type_script_setup_true_lang.js";
+// src/pagination/Pagination.vue
+var Pagination_default = Pagination_vue_vue_type_script_setup_true_lang_default;
+export { Pagination_default as default };

package/dist/pagination/Pagination.vue.d.ts

@@ -0,0 +1,34 @@
+import type { VNodeChild } from 'vue';
+import type { PaginationProps, PaginationSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = PaginationSlots;
+declare const __VLS_base: import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (page: number, pageSize: number) => any;
+    "update:current": (page: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
+    onChange?: ((page: number, pageSize: number) => any) | undefined;
+    "onUpdate:current"?: ((page: number) => any) | undefined;
+}>, {
+    disabled: boolean;
+    defaultCurrent: number;
+    total: number;
+    pageSize: number;
+    simple: boolean;
+    showLessItems: boolean;
+    hideOnSinglePage: boolean;
+    prevIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => VNodeChild) | null;
+    nextIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => VNodeChild) | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/pagination/Pagination.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,220 @@
+import { clamp } from "../_util/index.js";
+import { useControlled } from "../_util/hooks/useControlled.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { useDisabled, useSize } from "../config-provider/context.js";
+import { useLocale } from "../locale/index.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, unref, useSlots, withKeys } from "vue";
+import { EllipsisOutlined, LeftOutlined, RightOutlined } from "@antdv-next/icons";
+// src/pagination/Pagination.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-disabled"];
+var _hoisted_2 = {
+	key: 0,
+	class: "am-pagination-total"
+};
+var _hoisted_3 = { class: "am-pagination-list" };
+var _hoisted_4 = [
+	"tabindex",
+	"aria-label",
+	"aria-current",
+	"aria-disabled",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_5 = {
+	key: 0,
+	class: "am-pagination-simple-pager"
+};
+var _hoisted_6 = { class: "am-pagination-simple-current" };
+var Pagination_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmPagination",
+	inheritAttrs: false,
+	__name: "Pagination",
+	props: {
+		current: {},
+		defaultCurrent: { default: 1 },
+		total: { default: 0 },
+		pageSize: { default: 10 },
+		simple: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		size: {},
+		showLessItems: {
+			type: Boolean,
+			default: false
+		},
+		hideOnSinglePage: {
+			type: Boolean,
+			default: false
+		},
+		showTotal: {},
+		itemRender: {},
+		prevIcon: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		nextIcon: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: ["update:current", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const locale = useLocale("Pagination");
+		const size = useSize(() => props.size);
+		const disabled = useDisabled(() => props.disabled);
+		const pageCount = computed(() => Math.max(Math.ceil(props.total / (props.pageSize > 0 ? props.pageSize : 10)), 1));
+		const [innerCurrent, setCurrent] = useControlled(props, "current", {
+			defaultValue: () => props.defaultCurrent,
+			onChange: (page) => {
+				emit("update:current", page);
+				emit("change", page, props.pageSize);
+			}
+		});
+		const current = computed(() => clamp(Math.floor(Number(innerCurrent.value)) || 1, 1, pageCount.value));
+		const range = computed(() => [props.total === 0 ? 0 : (current.value - 1) * props.pageSize + 1, Math.min(current.value * props.pageSize, props.total)]);
+		const jumpStep = computed(() => props.showLessItems ? 3 : 5);
+		const pages = computed(() => {
+			const count = pageCount.value;
+			const sibling = props.showLessItems ? 0 : 1;
+			const page = (p) => ({
+				type: "page",
+				page: p
+			});
+			if (count <= sibling * 2 + 5) return Array.from({ length: count }, (_, i) => page(i + 1));
+			const start = Math.max(Math.min(current.value - sibling, count - sibling * 2 - 2), 3);
+			const end = Math.min(Math.max(current.value + sibling, sibling * 2 + 3), count - 2);
+			const list = [page(1)];
+			list.push(start > 3 ? {
+				type: "jump-prev",
+				page: Math.max(current.value - jumpStep.value, 1)
+			} : page(2));
+			for (let p = start; p <= end; p++) list.push(page(p));
+			list.push(end < count - 2 ? {
+				type: "jump-next",
+				page: Math.min(current.value + jumpStep.value, count)
+			} : page(count - 1));
+			list.push(page(count));
+			return list;
+		});
+		const prevItem = computed(() => ({
+			type: "prev",
+			page: Math.max(current.value - 1, 1),
+			disabled: current.value <= 1
+		}));
+		const nextItem = computed(() => ({
+			type: "next",
+			page: Math.min(current.value + 1, pageCount.value),
+			disabled: current.value >= pageCount.value
+		}));
+		function renderNode(node) {
+			return typeof node === "function" ? node() : node;
+		}
+		function getElement(item) {
+			switch (item.type) {
+				case "prev":
+					if (slots.prevIcon) return slots.prevIcon();
+					if (props.prevIcon !== void 0) return renderNode(props.prevIcon);
+					return props.simple ? locale.value.prev : h(LeftOutlined);
+				case "next":
+					if (slots.nextIcon) return slots.nextIcon();
+					if (props.nextIcon !== void 0) return renderNode(props.nextIcon);
+					return props.simple ? locale.value.next : h(RightOutlined);
+				case "jump-prev":
+				case "jump-next": return h(EllipsisOutlined);
+				default: return String(item.page);
+			}
+		}
+		function renderItem(item) {
+			const element = getElement(item);
+			return props.itemRender ? props.itemRender(item.page, item.type, element) : element;
+		}
+		function go(item) {
+			if (disabled.value || item.disabled || item.page === current.value) return;
+			setCurrent(item.page);
+		}
+		const ariaLabel = (item) => item.type === "prev" ? locale.value.prev : item.type === "next" ? locale.value.next : void 0;
+		const classNames = computed(() => [
+			"am-pagination",
+			{
+				"am-pagination-simple": props.simple,
+				"am-pagination-sm": size.value === "small",
+				"am-pagination-lg": size.value === "large",
+				"am-pagination-disabled": disabled.value
+			},
+			props.rootClass,
+			props.classes?.root
+		]);
+		const list = computed(() => props.simple ? [prevItem.value, nextItem.value] : [
+			prevItem.value,
+			...pages.value,
+			nextItem.value
+		]);
+		return (_ctx, _cache) => {
+			return !(__props.hideOnSinglePage && pageCount.value <= 1) ? (openBlock(), createElementBlock("nav", mergeProps({ key: 0 }, _ctx.$attrs, {
+				class: classNames.value,
+				style: __props.styles?.root,
+				"aria-disabled": unref(disabled) || void 0
+			}), [slots.showTotal || __props.showTotal ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "showTotal", {
+				total: __props.total,
+				range: range.value
+			}, () => [createVNode(unref(RenderNode_default), { node: __props.showTotal?.(__props.total, range.value) }, null, 8, ["node"])])])) : createCommentVNode("", true), createElementVNode("ul", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: `${item.type}-${item.type === "page" ? item.page : index}` }, [createElementVNode("li", {
+					class: normalizeClass(["am-pagination-item", [
+						`am-pagination-${item.type}`,
+						{
+							"am-pagination-item-active": item.type === "page" && item.page === current.value,
+							"am-pagination-item-disabled": unref(disabled) || item.disabled
+						},
+						__props.classes?.item
+					]]),
+					style: normalizeStyle(__props.styles?.item),
+					role: "button",
+					tabindex: unref(disabled) || item.disabled ? -1 : 0,
+					"aria-label": ariaLabel(item),
+					"aria-current": item.type === "page" && item.page === current.value ? "page" : void 0,
+					"aria-disabled": unref(disabled) || item.disabled || void 0,
+					onClick: ($event) => go(item),
+					onKeydown: withKeys(($event) => go(item), ["enter"])
+				}, [renderSlot(_ctx.$slots, "itemRender", {
+					page: item.page,
+					type: item.type,
+					element: getElement(item)
+				}, () => [createVNode(unref(RenderNode_default), { node: renderItem(item) }, null, 8, ["node"])])], 46, _hoisted_4), __props.simple && item.type === "prev" ? (openBlock(), createElementBlock("li", _hoisted_5, [
+					createElementVNode("span", _hoisted_6, toDisplayString(current.value), 1),
+					_cache[0] || (_cache[0] = createElementVNode("span", { class: "am-pagination-slash" }, "/", -1)),
+					createElementVNode("span", null, toDisplayString(pageCount.value), 1)
+				])) : createCommentVNode("", true)], 64);
+			}), 128))])], 16, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+export { Pagination_vue_vue_type_script_setup_true_lang_default as default };

package/dist/pagination/index.d.ts

@@ -0,0 +1,74 @@
+export type * from './interface';
+declare const Pagination: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").PaginationProps> & Readonly<{
+        onChange?: ((page: number, pageSize: number) => any) | undefined;
+        "onUpdate:current"?: ((page: number) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (page: number, pageSize: number) => any;
+        "update:current": (page: number) => any;
+    }, import("vue").PublicProps, {
+        disabled: boolean;
+        defaultCurrent: number;
+        total: number;
+        pageSize: number;
+        simple: boolean;
+        showLessItems: boolean;
+        hideOnSinglePage: boolean;
+        prevIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+        nextIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").PaginationProps> & Readonly<{
+        onChange?: ((page: number, pageSize: number) => any) | undefined;
+        "onUpdate:current"?: ((page: number) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        disabled: boolean;
+        defaultCurrent: number;
+        total: number;
+        pageSize: number;
+        simple: boolean;
+        showLessItems: boolean;
+        hideOnSinglePage: boolean;
+        prevIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+        nextIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").PaginationProps> & Readonly<{
+    onChange?: ((page: number, pageSize: number) => any) | undefined;
+    "onUpdate:current"?: ((page: number) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (page: number, pageSize: number) => any;
+    "update:current": (page: number) => any;
+}, string, {
+    disabled: boolean;
+    defaultCurrent: number;
+    total: number;
+    pageSize: number;
+    simple: boolean;
+    showLessItems: boolean;
+    hideOnSinglePage: boolean;
+    prevIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    nextIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").PaginationSlots;
+}), object>;
+export default Pagination;

package/dist/pagination/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "../_util/withInstall.js";
+import Pagination_default from "./Pagination.js";
+// src/pagination/index.ts
+var Pagination = withInstall(Pagination_default, "AmPagination");
+export { Pagination as default };

package/dist/pagination/interface.d.ts

@@ -0,0 +1,49 @@
+import type { CSSProperties, VNodeChild } from 'vue';
+import type { SizeType, VueNode } from '../_util/type';
+export type PaginationItemType = 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next';
+export interface PaginationSemanticClassNames {
+    root?: string;
+    item?: string;
+}
+export interface PaginationSemanticStyles {
+    root?: CSSProperties;
+    item?: CSSProperties;
+}
+export interface PaginationProps {
+    current?: number;
+    defaultCurrent?: number;
+    /** Total number of data items */
+    total?: number;
+    pageSize?: number;
+    /** `prev` / `next` buttons with `current / total` in the middle */
+    simple?: boolean;
+    disabled?: boolean;
+    size?: SizeType;
+    /** Show fewer page items (no siblings around the current page) */
+    showLessItems?: boolean;
+    hideOnSinglePage?: boolean;
+    showTotal?: (total: number, range: [number, number]) => VNodeChild;
+    itemRender?: (page: number, type: PaginationItemType, element: VNodeChild) => VNodeChild;
+    prevIcon?: VueNode;
+    nextIcon?: VueNode;
+    rootClass?: string;
+    classes?: PaginationSemanticClassNames;
+    styles?: PaginationSemanticStyles;
+}
+export interface PaginationEmits {
+    'update:current': [page: number];
+    'change': [page: number, pageSize: number];
+}
+export interface PaginationSlots {
+    itemRender?: (ctx: {
+        page: number;
+        type: PaginationItemType;
+        element: VNodeChild;
+    }) => any;
+    showTotal?: (ctx: {
+        total: number;
+        range: [number, number];
+    }) => any;
+    prevIcon?: () => any;
+    nextIcon?: () => any;
+}

package/dist/pagination/style/index.css

@@ -0,0 +1,137 @@
+.am-pagination {
+  /* component tokens */
+  --am-pagination-item-size: 34px;
+  --am-pagination-item-gap: 4px;
+  --am-pagination-font-size: var(--am-font-size);
+  --am-pagination-color: var(--am-color-text);
+  --am-pagination-item-background: transparent;
+  --am-pagination-item-active-color: var(--am-color-text-light-solid);
+  --am-pagination-item-active-background: var(--am-color-primary);
+  --am-pagination-item-border-radius: var(--am-border-radius);
+  --am-pagination-simple-button-background: var(--am-color-fill-tertiary);
+  --am-pagination-simple-button-padding-inline: var(--am-padding);
+
+  box-sizing: border-box;
+  color: var(--am-pagination-color);
+  font-size: var(--am-pagination-font-size);
+  font-family: var(--am-font-family);
+  line-height: 1.2;
+}
+
+.am-pagination-total {
+  margin-bottom: var(--am-margin-xs);
+  color: var(--am-color-text-secondary);
+  text-align: center;
+}
+
+.am-pagination-list {
+  display: flex;
+  gap: var(--am-pagination-item-gap);
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.am-pagination-item {
+  display: inline-flex;
+  flex: 0 1 var(--am-pagination-item-size);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 24px;
+  height: var(--am-pagination-item-size);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  background: var(--am-pagination-item-background);
+  border-radius: var(--am-pagination-item-border-radius);
+  outline: none;
+  cursor: pointer;
+  transition:
+    background-color var(--am-motion-duration-mid),
+    color var(--am-motion-duration-mid);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+.am-pagination-item:not(.am-pagination-item-active, .am-pagination-item-disabled):active {
+  background: var(--am-color-fill-secondary);
+}
+
+.am-pagination-item:focus-visible {
+  outline: 2px solid var(--am-color-primary-border);
+  outline-offset: 1px;
+}
+
+.am-pagination-item-active {
+  color: var(--am-pagination-item-active-color);
+  font-weight: 500;
+  background: var(--am-pagination-item-active-background);
+}
+
+.am-pagination-jump-prev,
+.am-pagination-jump-next {
+  color: var(--am-color-text-tertiary);
+}
+
+.am-pagination-item-disabled {
+  color: var(--am-color-text-disabled);
+  cursor: not-allowed;
+}
+
+[dir='rtl'] .am-pagination-prev .anticon,
+[dir='rtl'] .am-pagination-next .anticon {
+  transform: scaleX(-1);
+}
+
+/* ---------- simple ---------- */
+.am-pagination-simple .am-pagination-list {
+  justify-content: space-between;
+}
+
+.am-pagination-simple .am-pagination-item {
+  flex: none;
+  min-width: 72px;
+  padding: 0 var(--am-pagination-simple-button-padding-inline);
+  background: var(--am-pagination-simple-button-background);
+}
+
+.am-pagination-simple-pager {
+  display: inline-flex;
+  flex: 1 1 auto;
+  gap: var(--am-padding-xxs);
+  align-items: center;
+  justify-content: center;
+  color: var(--am-color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.am-pagination-simple-current {
+  color: var(--am-color-primary);
+  font-weight: 500;
+}
+
+/* ---------- sizes ---------- */
+.am-pagination-sm {
+  --am-pagination-item-size: 28px;
+  --am-pagination-font-size: var(--am-font-size-sm);
+  --am-pagination-item-border-radius: var(--am-border-radius-sm);
+  --am-pagination-simple-button-padding-inline: var(--am-padding-sm);
+}
+
+.am-pagination-lg {
+  --am-pagination-item-size: 40px;
+  --am-pagination-font-size: var(--am-font-size-lg);
+}
+
+/* ---------- disabled ---------- */
+.am-pagination-disabled .am-pagination-item-active {
+  color: var(--am-color-text-disabled);
+  background: var(--am-color-fill-secondary);
+}
+
+.am-pagination-disabled .am-pagination-simple-current {
+  color: inherit;
+}