@alfalab/core-components-pagination 2.0.21 → 2.1.1

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: sk2y7 */
+/* hash: 1gpcn */
 :root {
 } /* deprecated */ :root {
     --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,7 +16,7 @@
     --gap-xs: 8px;
 } :root {
 } :root {
-} .pagination__component_gdi2e {
+} .pagination__component_ynqhf {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -24,10 +24,9 @@
     display: flex;
     align-items: center;
     color: var(--color-light-text-primary);
-    font-feature-settings: "tnum";
     font-variant-numeric: tabular-nums;
-} .pagination__defaultView_gdi2e > * {
+} .pagination__defaultView_ynqhf > * {
         margin-right: var(--gap-xs)
-    } .pagination__defaultView_gdi2e > *:last-child {
+    } .pagination__defaultView_ynqhf > *:last-child {
             margin-right: 0;
         }

package/esm/index.js

@@ -6,5 +6,5 @@ import '@alfalab/icons-glyph/ChevronForwardMIcon';
 import './components/default-view/index.js';
 import './components/tag/index.js';
 import 'tslib';
-import '@alfalab/core-components-tag/esm';
+import '@alfalab/core-components-tag/esm/desktop';
 import './components/per-page-view/index.js';

package/index.css

@@ -1,4 +1,4 @@
-/* hash: sk2y7 */
+/* hash: 1gpcn */
 :root {
 } /* deprecated */ :root {
     --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,7 +16,7 @@
     --gap-xs: 8px;
 } :root {
 } :root {
-} .pagination__component_gdi2e {
+} .pagination__component_ynqhf {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -24,10 +24,9 @@
     display: flex;
     align-items: center;
     color: var(--color-light-text-primary);
-    font-feature-settings: "tnum";
     font-variant-numeric: tabular-nums;
-} .pagination__defaultView_gdi2e > * {
+} .pagination__defaultView_ynqhf > * {
         margin-right: var(--gap-xs)
-    } .pagination__defaultView_gdi2e > *:last-child {
+    } .pagination__defaultView_ynqhf > *:last-child {
             margin-right: 0;
         }

package/index.js

@@ -10,7 +10,7 @@ require('@alfalab/icons-glyph/ChevronForwardMIcon');
 require('./components/default-view/index.js');
 require('./components/tag/index.js');
 require('tslib');
-require('@alfalab/core-components-tag');
+require('@alfalab/core-components-tag/desktop');
 require('./components/per-page-view/index.js');
 
 

package/modern/Component.js

@@ -5,9 +5,9 @@ import { ChevronForwardMIcon } from '@alfalab/icons-glyph/ChevronForwardMIcon';
 import { DefaultView } from './components/default-view/index.js';
 import { PerPageView } from './components/per-page-view/index.js';
 import { Tag } from './components/tag/index.js';
-import '@alfalab/core-components-tag/modern';
+import '@alfalab/core-components-tag/modern/desktop';
 
-const styles = {"component":"pagination__component_gdi2e","defaultView":"pagination__defaultView_gdi2e"};
+const styles = {"component":"pagination__component_ynqhf","defaultView":"pagination__defaultView_ynqhf"};
 require('./index.css')
 
 const Pagination = ({ currentPageIndex = 0, pagesCount, className, sidePadding = 1, activePadding = 2, hideArrows = true, view = 'default', onPageChange = () => null, dataTestId, }) => {

package/modern/components/default-view/index.css

@@ -1,4 +1,4 @@
-/* hash: 1lgn5 */
+/* hash: 16zr9 */
 :root {
 } /* deprecated */ :root {
     --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,7 +15,7 @@
 } :root {
 } :root {
 } :root {
-} .pagination__dots_1x6os {
+} .pagination__dots_hcm4n {
     width: 32px;
     height: 32px;
     text-align: center;

package/modern/components/default-view/index.js

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 import { Tag } from '../tag/index.js';
 import 'classnames';
-import '@alfalab/core-components-tag/modern';
+import '@alfalab/core-components-tag/modern/desktop';
 
-const styles = {"dots":"pagination__dots_1x6os"};
+const styles = {"dots":"pagination__dots_hcm4n"};
 require('./index.css')
 
 /* eslint-disable react/no-array-index-key */

package/modern/components/per-page-view/index.css

@@ -1,4 +1,4 @@
-/* hash: 19fqc */
+/* hash: dfv3v */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,7 +15,7 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .pagination__component_1f89s {
+} .pagination__component_12vfs {
     display: block;
     margin: 0 var(--gap-m);
 }

package/modern/components/per-page-view/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const styles = {"component":"pagination__component_1f89s"};
+const styles = {"component":"pagination__component_12vfs"};
 require('./index.css')
 
 const PerPageView = ({ pagesCount, currentPageIndex }) => (React.createElement("span", { className: styles.component },

package/modern/components/tag/index.css

@@ -1,4 +1,4 @@
-/* hash: 13vx4 */
+/* hash: 1whx5 */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-quaternary: #dcdcdd;
@@ -21,7 +21,7 @@
 } :root {
 } :root {
 } :root {
-} .pagination__tag_e3qeb.pagination__tag_e3qeb {
+} button.pagination__tag_11495.pagination__tag_11495 {
     color: var(--color-light-text-secondary);
     border-radius: var(--border-radius-m);
     border: none;
@@ -31,19 +31,19 @@
     width: 32px;
     height: 32px;
     padding: 0
-} .pagination__tag_e3qeb.pagination__tag_e3qeb:disabled:not(.pagination__checked_e3qeb) {
+} button.pagination__tag_11495.pagination__tag_11495:disabled:not(.pagination__checked_11495) {
         opacity: 0.3;
-    } .pagination__tag_e3qeb.pagination__tag_e3qeb:hover:not(:disabled) {
+    } button.pagination__tag_11495.pagination__tag_11495:hover:not(:disabled) {
         background-color: var(--color-light-bg-tertiary);
         color: var(--color-light-text-primary);
-    } .pagination__tag_e3qeb.pagination__tag_e3qeb:active:not(:disabled) {
+    } button.pagination__tag_11495.pagination__tag_11495:active:not(:disabled) {
         background-color: var(--color-light-bg-quaternary);
-    } .pagination__tag_e3qeb.pagination__tag_e3qeb.pagination__checked_e3qeb {
+    } button.pagination__tag_11495.pagination__tag_11495.pagination__checked_11495 {
         cursor: default;
         background-color: var(--color-light-bg-secondary-inverted);
         color: var(--color-light-text-primary-inverted);
-    } .pagination__tag_e3qeb.pagination__tag_e3qeb.pagination__checked_e3qeb:hover:not(:disabled) {
+    } button.pagination__tag_11495.pagination__tag_11495.pagination__checked_11495:hover:not(:disabled) {
         color: var(--color-light-text-primary-inverted);
-    } .pagination__tag_e3qeb.pagination__tag_e3qeb.pagination__checked_e3qeb:active:not(:disabled) {
+    } button.pagination__tag_11495.pagination__tag_11495.pagination__checked_11495:active:not(:disabled) {
         color: var(--color-light-text-primary);
     }

package/modern/components/tag/index.d.ts

@@ -1,4 +1,85 @@
-import { FC } from 'react';
-import { TagProps } from "@alfalab/core-components-tag";
+/// <reference types="react" />
+import React from 'react';
+import { FC, ButtonHTMLAttributes, ReactNode, RefObject } from "react";
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type NativeProps = ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseTagProps = Omit<NativeProps, "onClick"> & {
+    /**
+     * Отображение кнопки в отмеченном (зажатом) состоянии
+     */
+    checked?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "xxs" | "xs" | "s" | "m" | "l" | "xl";
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс для обёртки children
+     */
+    childrenClassName?: string;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Обработчик нажатия
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        checked: boolean;
+        name?: string;
+    }) => void;
+    /**
+     * ref на children
+     */
+    childrenRef?: RefObject<HTMLSpanElement>;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Используйте props shape и view
+     * Вариант тега
+     */
+    variant?: "default" | "alt";
+    /**
+     * Форма тега
+     */
+    shape?: "rounded" | "rectangular";
+    /**
+     * Стиль тега
+     */
+    view?: "outlined" | "filled";
+    /**
+     * Основные стили компонента.
+     */
+    styles?: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap?: StyleColors;
+};
+type TagDesktopProps = Omit<BaseTagProps, "styles">;
+type TagProps = TagDesktopProps;
 declare const Tag: FC<TagProps>;
 export { Tag };

package/modern/components/tag/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import cn from 'classnames';
-import { Tag as Tag$1 } from '@alfalab/core-components-tag/modern';
+import { TagDesktop } from '@alfalab/core-components-tag/modern/desktop';
 
-const styles = {"tag":"pagination__tag_e3qeb","checked":"pagination__checked_e3qeb"};
+const styles = {"tag":"pagination__tag_11495","checked":"pagination__checked_11495"};
 require('./index.css')
 
-const Tag = ({ className, checked, ...restProps }) => (React.createElement(Tag$1, { ...restProps, checked: checked, size: 'xxs', className: cn(className, styles.tag, { [styles.checked]: checked }) }));
+const Tag = ({ className, checked, ...restProps }) => (React.createElement(TagDesktop, { ...restProps, checked: checked, size: 'xxs', className: cn(className, styles.tag, { [styles.checked]: checked }) }));
 
 export { Tag };

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: sk2y7 */
+/* hash: 1gpcn */
 :root {
 } /* deprecated */ :root {
     --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,7 +16,7 @@
     --gap-xs: 8px;
 } :root {
 } :root {
-} .pagination__component_gdi2e {
+} .pagination__component_ynqhf {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -24,10 +24,9 @@
     display: flex;
     align-items: center;
     color: var(--color-light-text-primary);
-    font-feature-settings: "tnum";
     font-variant-numeric: tabular-nums;
-} .pagination__defaultView_gdi2e > * {
+} .pagination__defaultView_ynqhf > * {
         margin-right: var(--gap-xs)
-    } .pagination__defaultView_gdi2e > *:last-child {
+    } .pagination__defaultView_ynqhf > *:last-child {
             margin-right: 0;
         }

package/modern/index.js

@@ -5,5 +5,5 @@ import '@alfalab/icons-glyph/ChevronBackMIcon';
 import '@alfalab/icons-glyph/ChevronForwardMIcon';
 import './components/default-view/index.js';
 import './components/tag/index.js';
-import '@alfalab/core-components-tag/modern';
+import '@alfalab/core-components-tag/modern/desktop';
 import './components/per-page-view/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pagination",
-    "version": "2.0.21",
+    "version": "2.1.1",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,7 +15,7 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-tag": "^5.4.1",
+        "@alfalab/core-components-tag": "^6.0.0",
         "@alfalab/icons-glyph": "^2.108.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"

package/src/Component.tsx

@@ -0,0 +1,127 @@
+import React, { FC } from 'react';
+import cn from 'classnames';
+
+import { ChevronBackMIcon } from '@alfalab/icons-glyph/ChevronBackMIcon';
+import { ChevronForwardMIcon } from '@alfalab/icons-glyph/ChevronForwardMIcon';
+
+import { DefaultView } from './components/default-view';
+import { PerPageView } from './components/per-page-view';
+import { Tag } from './components/tag';
+
+import styles from './index.module.css';
+
+export type PaginationProps = {
+    /**
+     * Текущая страница (с нуля)
+     */
+    currentPageIndex: number;
+
+    /**
+     * Количество страниц
+     */
+    pagesCount: number;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Скрывает стрелки, если выбрана первая или последняя страница
+     */
+    hideArrows?: boolean;
+
+    /**
+     * Количество видимых страниц по бокам
+     */
+    sidePadding?: number;
+
+    /**
+     * Количество видимых страниц вокруг выбранной
+     */
+    activePadding?: number;
+
+    /**
+     * Режим пагинации
+     */
+    view?: 'default' | 'per-page';
+
+    /**
+     * Обработчик переключения страницы
+     */
+    onPageChange?: (pageIndex: number) => void;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Pagination: FC<PaginationProps> = ({
+    currentPageIndex = 0,
+    pagesCount,
+    className,
+    sidePadding = 1,
+    activePadding = 2,
+    hideArrows = true,
+    view = 'default',
+    onPageChange = () => null,
+    dataTestId,
+}) => {
+    const handlePageClick = (pageIndex: number) => {
+        onPageChange(pageIndex);
+    };
+
+    const handleNextPageClick = () => {
+        handlePageClick(Math.min(pagesCount - 1, currentPageIndex + 1));
+    };
+
+    const handlePrevPageClick = () => {
+        handlePageClick(Math.max(0, currentPageIndex - 1));
+    };
+
+    const shouldRenderPrevArrow = view === 'per-page' || !hideArrows || currentPageIndex > 0;
+    const shouldRenderNextArrow =
+        view === 'per-page' || !hideArrows || currentPageIndex < pagesCount - 1;
+
+    const viewClassName = view === 'default' ? 'defaultView' : view;
+
+    return (
+        <div
+            className={cn(styles.component, className, styles[viewClassName])}
+            data-test-id={dataTestId}
+        >
+            {shouldRenderPrevArrow && (
+                <Tag
+                    className={styles.arrow}
+                    disabled={currentPageIndex <= 0}
+                    onClick={handlePrevPageClick}
+                    rightAddons={<ChevronBackMIcon width={16} height={16} />}
+                />
+            )}
+
+            {view === 'default' && (
+                <DefaultView
+                    activePadding={activePadding}
+                    sidePadding={sidePadding}
+                    currentPageIndex={currentPageIndex}
+                    pagesCount={pagesCount}
+                    onPageChange={handlePageClick}
+                />
+            )}
+
+            {view === 'per-page' && (
+                <PerPageView currentPageIndex={currentPageIndex} pagesCount={pagesCount} />
+            )}
+
+            {shouldRenderNextArrow && (
+                <Tag
+                    className={styles.arrow}
+                    disabled={currentPageIndex >= pagesCount - 1}
+                    onClick={handleNextPageClick}
+                    rightAddons={<ChevronForwardMIcon width={16} height={16} />}
+                />
+            )}
+        </div>
+    );
+};

package/src/components/default-view/index.module.css

@@ -0,0 +1,12 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.dots {
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-text-secondary);
+    cursor: default;
+}

package/src/components/default-view/index.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable react/no-array-index-key */
+import React, { FC, useCallback } from 'react';
+
+import { PaginationProps } from '../../Component';
+import { Tag } from '../tag';
+
+import styles from './index.module.css';
+
+type DefaultViewProps = Pick<
+    PaginationProps,
+    'sidePadding' | 'activePadding' | 'pagesCount' | 'currentPageIndex' | 'onPageChange'
+>;
+
+export const DefaultView: FC<DefaultViewProps> = ({
+    sidePadding = 2,
+    activePadding = 1,
+    pagesCount,
+    currentPageIndex,
+    onPageChange = () => null,
+}) => {
+    const maxHalfCount = sidePadding + activePadding + 1;
+    const maxElementsCount = maxHalfCount * 2 + 1;
+    const itemsFit = pagesCount <= maxElementsCount;
+    const elementsCount = itemsFit ? pagesCount : maxElementsCount;
+
+    const getPageIndex = useCallback(
+        (elementIndex: number) => {
+            const lastIndex = pagesCount - 1;
+            const reverseIndex = lastIndex - currentPageIndex;
+            const lastElementIndex = elementsCount - 1;
+            const reverseElementIndex = lastElementIndex - elementIndex;
+
+            const hasCollapsedItems = (index: number) => !itemsFit && index >= maxHalfCount;
+
+            if (elementIndex < sidePadding) {
+                return elementIndex;
+            }
+
+            if (elementIndex === sidePadding && hasCollapsedItems(currentPageIndex)) {
+                return null;
+            }
+
+            if (reverseElementIndex === sidePadding && hasCollapsedItems(reverseIndex)) {
+                return null;
+            }
+
+            if (reverseElementIndex < sidePadding) {
+                return lastIndex - reverseElementIndex;
+            }
+
+            const computedIndex = currentPageIndex - maxHalfCount + elementIndex;
+
+            return Math.min(lastIndex - reverseElementIndex, Math.max(elementIndex, computedIndex));
+        },
+        [currentPageIndex, elementsCount, itemsFit, maxHalfCount, pagesCount, sidePadding],
+    );
+
+    return (
+        <React.Fragment>
+            {Array(elementsCount)
+                .fill('')
+                .map((_, i) => {
+                    const pageIndex = getPageIndex(i);
+
+                    if (pageIndex === null) {
+                        return (
+                            <div key={i.toString()} className={styles.dots}>
+                                ...
+                            </div>
+                        );
+                    }
+
+                    const active = currentPageIndex === pageIndex;
+
+                    return (
+                        <Tag
+                            key={i.toString()}
+                            checked={active}
+                            disabled={active}
+                            onClick={() => onPageChange(pageIndex)}
+                        >
+                            {pageIndex + 1}
+                        </Tag>
+                    );
+                })}
+        </React.Fragment>
+    );
+};

package/src/components/per-page-view/index.module.css

@@ -0,0 +1,6 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    display: block;
+    margin: 0 var(--gap-m);
+}

package/src/components/per-page-view/index.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+
+import { PaginationProps } from '../../Component';
+
+import styles from './index.module.css';
+
+type PerPageViewProps = Pick<PaginationProps, 'pagesCount' | 'currentPageIndex'>;
+
+export const PerPageView: FC<PerPageViewProps> = ({ pagesCount, currentPageIndex }) => (
+    <span className={styles.component}>
+        {currentPageIndex + 1} из {pagesCount} страниц
+    </span>
+);

package/src/components/tag/index.module.css

@@ -0,0 +1,40 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+button.tag.tag {
+    color: var(--color-light-text-secondary);
+    border-radius: var(--border-radius-m);
+    border: none;
+    flex-shrink: 0;
+    min-width: auto;
+    min-height: auto;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+
+    &:disabled:not(.checked) {
+        opacity: 0.3;
+    }
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-light-bg-tertiary);
+        color: var(--color-light-text-primary);
+    }
+
+    &:active:not(:disabled) {
+        background-color: var(--color-light-bg-quaternary);
+    }
+
+    &.checked {
+        cursor: default;
+        background-color: var(--color-light-bg-secondary-inverted);
+        color: var(--color-light-text-primary-inverted);
+    }
+
+    &.checked:hover:not(:disabled) {
+        color: var(--color-light-text-primary-inverted);
+    }
+
+    &.checked:active:not(:disabled) {
+        color: var(--color-light-text-primary);
+    }
+}

package/src/components/tag/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import cn from 'classnames';
+
+import {
+    TagDesktop as CoreTag,
+    TagDesktopProps as TagProps,
+} from '@alfalab/core-components-tag/desktop';
+
+import styles from './index.module.css';
+
+export const Tag: FC<TagProps> = ({ className, checked, ...restProps }) => (
+    <CoreTag
+        {...restProps}
+        checked={checked}
+        size='xxs'
+        className={cn(className, styles.tag, { [styles.checked]: checked })}
+    />
+);