@cloud-ru/ds-pagination 1.0.0

package/dist/esm/components/PaginationNumberItem/styles.module.css

@@ -0,0 +1,149 @@
+@charset "UTF-8";
+.stateLayer{
+  visibility:initial;
+}
+
+.root{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  border:none;
+  font-family:inherit;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  text-decoration:none;
+  background-color:transparent;
+  outline:0;
+  outline-offset:0;
+}
+.root[data-size=s]{
+  border-radius:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+  min-width:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-minWidth, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-height, var(--sn-primitive-dimension-24, 24px));
+}
+.root[data-size=s] .textWrapper{
+  font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+  padding-left:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.root[data-size=m]{
+  min-width:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-minWidth, var(--sn-primitive-dimension-32, 32px));
+  border-radius:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
+  height:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-height, var(--sn-primitive-dimension-32, 32px));
+}
+.root[data-size=m] .textWrapper{
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  padding-left:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.root[data-activated]{
+  color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
+}
+.root:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+.root .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.root .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.root .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.root .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.root .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.root .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.root .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.root .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.root .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.root{
+}
+.root[data-loading] .stateLayer[data-state=borderOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.root[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading] .stateLayer[data-state=emptyVersionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading] .stateLayer[data-state=inversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading] .stateLayer[data-state=emptyInversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+
+.textWrapper{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  min-width:0;
+}

package/dist/esm/components/PaginationSlider/PaginationSlider.d.ts

@@ -0,0 +1,17 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PaginationSliderSize } from '../../types.js';
+export type PaginationSliderProps = WithSupportProps<{
+    /** Общее количество страниц */
+    total: number;
+    /** Текущая страница */
+    page: number;
+    /** Колбек смены значения */
+    onChange(page: number): void;
+    /** CSS класснейм */
+    className?: string;
+    /** Размер
+     * @default 's'
+     */
+    size?: PaginationSliderSize;
+}>;
+export declare function PaginationSlider({ total, page, onChange, className, size, ...rest }: PaginationSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PaginationSlider/PaginationSlider.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import { getSliderItemTestId, PAGINATION_SLIDER_SIZE } from '../../constants.js';
+import { getRange } from '../../utils/index.js';
+import { PaginationSliderItem } from '../PaginationSliderItem/index.js';
+import styles from './styles.module.css';
+const FIRST_PAGE = 1;
+export function PaginationSlider({ total, page, onChange, className, size = PAGINATION_SLIDER_SIZE.Xs, ...rest }) {
+    return (_jsx("nav", { className: className, "aria-label": 'Pagination slider', ...extractSupportProps(rest), children: _jsx("ul", { className: styles.paginationSlider, "data-size": size, children: getRange(FIRST_PAGE, total).map(value => (_jsx("li", { children: _jsx(PaginationSliderItem, { activated: value === page, onClick: () => onChange(value), size: size, "data-test-id": getSliderItemTestId(value) }) }, value))) }) }));
+}

package/dist/esm/components/PaginationSlider/index.d.ts

@@ -0,0 +1 @@
+export * from './PaginationSlider.js';

package/dist/esm/components/PaginationSlider/index.js

@@ -0,0 +1 @@
+export * from './PaginationSlider.js';

package/dist/esm/components/PaginationSlider/styles.module.css

@@ -0,0 +1,25 @@
+.paginationSlider{
+  display:flex;
+  flex-direction:row;
+  gap:0;
+  align-items:center;
+  width:-moz-fit-content;
+  width:fit-content;
+  margin:0;
+  padding:0;
+  list-style-type:none;
+}
+.paginationSlider[data-size=xs]{
+  border-radius:var(--sn-pagination-anatomy-size-xs-paginationSlider-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+}
+.paginationSlider[data-size=s]{
+  border-radius:var(--sn-pagination-anatomy-size-s-paginationSlider-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+}
+.paginationSlider{
+  background-color:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.paginationSlider > li{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}

package/dist/esm/components/PaginationSliderItem/PaginationSliderItem.d.ts

@@ -0,0 +1,10 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { Ref } from 'react';
+import { PaginationSliderSize } from '../../types.js';
+export type PaginationSliderItemProps = WithSupportProps<{
+    activated?: boolean;
+    onClick(): void;
+    size: PaginationSliderSize;
+    setButtonRef?: Ref<HTMLButtonElement>;
+}>;
+export declare function PaginationSliderItem({ activated, onClick, size, setButtonRef, ...rest }: PaginationSliderItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PaginationSliderItem/PaginationSliderItem.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import styles from './styles.module.css';
+export function PaginationSliderItem({ activated, onClick, size, setButtonRef, ...rest }) {
+    return (_jsx("button", { type: 'button', className: styles.root, onClick: onClick, ref: setButtonRef, "data-size": size, ...extractSupportProps(rest), "data-activated": activated || undefined, "aria-current": activated ? 'true' : undefined, children: _jsx("span", { className: styles.dot, "aria-hidden": true }) }));
+}

package/dist/esm/components/PaginationSliderItem/index.d.ts

@@ -0,0 +1 @@
+export * from './PaginationSliderItem.js';

package/dist/esm/components/PaginationSliderItem/index.js

@@ -0,0 +1 @@
+export * from './PaginationSliderItem.js';

package/dist/esm/components/PaginationSliderItem/styles.module.css

@@ -0,0 +1,102 @@
+.root{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  border:none;
+  background:transparent;
+  outline:0;
+  outline-offset:0;
+}
+.root[data-size=xs]{
+  min-width:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-minWidth, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-height, var(--sn-primitive-dimension-16, 16px));
+  padding:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-padding, var(--sn-primitive-dimension-4, 4px));
+  width:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-minWidth, var(--sn-primitive-dimension-16, 16px));
+}
+.root[data-size=xs]:not(.root[data-size=xs][data-activated]) .dot{
+  height:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-height, var(--sn-primitive-dimension-6, 6px));
+  width:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-width, var(--sn-primitive-dimension-6, 6px));
+  border-radius:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+  box-shadow:var(--sn-boxShadow-elevation-level1, var(--sn-theme-effect-shadow-level1-layer1-positionX, 0) var(--sn-theme-effect-shadow-level1-layer1-positionY, 0) var(--sn-theme-effect-shadow-level1-layer1-blur, 4px) var(--sn-theme-effect-shadow-level1-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level1-layer2-positionX, 0) var(--sn-theme-effect-shadow-level1-layer2-positionY, 2px) var(--sn-theme-effect-shadow-level1-layer2-blur, 4px) var(--sn-theme-effect-shadow-level1-layer2-speed, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
+}
+@media (hover: hover){
+  .root[data-size=xs]:not(.root[data-size=xs][data-activated]):hover .dot{
+    height:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-hovered-height, var(--sn-primitive-dimension-10, 10px));
+    width:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-hovered-width, var(--sn-primitive-dimension-10, 10px));
+    border-radius:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-hovered-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  }
+}
+.root[data-size=xs]:not(.root[data-size=xs][data-activated]){
+}
+.root[data-size=xs]:not(.root[data-size=xs][data-activated]):active .dot{
+  height:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-pressed-height, var(--sn-primitive-dimension-6, 6px));
+  width:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-pressed-width, var(--sn-primitive-dimension-6, 6px));
+  border-radius:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-pressed-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+}
+.root[data-size=xs][data-activated] .dot{
+  height:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-height, var(--sn-primitive-dimension-8, 8px));
+  width:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-width, var(--sn-primitive-dimension-8, 8px));
+  border-radius:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  box-shadow:none;
+}
+.root[data-size=xs]:focus-visible .dot{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+.root[data-size=s]{
+  height:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-height, var(--sn-primitive-dimension-24, 24px));
+  min-width:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-minWidth, var(--sn-primitive-dimension-24, 24px));
+  padding:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-padding, var(--sn-primitive-dimension-4, 4px));
+  width:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-minWidth, var(--sn-primitive-dimension-24, 24px));
+}
+.root[data-size=s]:not(.root[data-size=s][data-activated]) .dot{
+  width:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-width, var(--sn-primitive-dimension-8, 8px));
+  height:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-height, var(--sn-primitive-dimension-8, 8px));
+  border-radius:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+  box-shadow:var(--sn-boxShadow-elevation-level1, var(--sn-theme-effect-shadow-level1-layer1-positionX, 0) var(--sn-theme-effect-shadow-level1-layer1-positionY, 0) var(--sn-theme-effect-shadow-level1-layer1-blur, 4px) var(--sn-theme-effect-shadow-level1-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level1-layer2-positionX, 0) var(--sn-theme-effect-shadow-level1-layer2-positionY, 2px) var(--sn-theme-effect-shadow-level1-layer2-blur, 4px) var(--sn-theme-effect-shadow-level1-layer2-speed, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
+}
+@media (hover: hover){
+  .root[data-size=s]:not(.root[data-size=s][data-activated]):hover .dot{
+    width:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-hovered-width, var(--sn-primitive-dimension-12, 12px));
+    height:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-hovered-height, var(--sn-primitive-dimension-12, 12px));
+    border-radius:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-hovered-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  }
+}
+.root[data-size=s]:not(.root[data-size=s][data-activated]){
+}
+.root[data-size=s]:not(.root[data-size=s][data-activated]):active .dot{
+  width:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-pressed-width, var(--sn-primitive-dimension-8, 8px));
+  height:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-pressed-height, var(--sn-primitive-dimension-8, 8px));
+  border-radius:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-pressed-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+}
+.root[data-size=s][data-activated] .dot{
+  width:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-width, var(--sn-primitive-dimension-12, 12px));
+  height:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-height, var(--sn-primitive-dimension-12, 12px));
+  border-radius:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  box-shadow:none;
+}
+.root[data-size=s]:focus-visible .dot{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+
+.dot{
+  position:relative;
+  flex-shrink:0;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  border:none;
+  background:transparent;
+  outline:0;
+  outline-offset:0;
+}

package/dist/esm/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Pagination/index.js';
+export * from './PaginationSlider/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './Pagination/index.js';
+export * from './PaginationSlider/index.js';

package/dist/esm/constants.d.ts

@@ -0,0 +1,31 @@
+export declare const PAGINATION_SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+};
+export declare const PAGINATION_SLIDER_SIZE: {
+    readonly Xs: "xs";
+    readonly S: "s";
+};
+export declare const VARIANT: {
+    readonly Link: "link";
+    readonly Button: "button";
+};
+export declare const TEST_IDS: {
+    /** Корень `Pagination` (ставится потребителем через `data-test-id`). */
+    readonly root: "pagination";
+    /** Корень `PaginationSlider` (ставится потребителем через `data-test-id`). */
+    readonly sliderRoot: "pagination-slider";
+    /** Кнопка «предыдущая страница». */
+    readonly prev: "page-prev-button";
+    /** Кнопка «следующая страница». */
+    readonly next: "page-next-button";
+    /** Префикс для кнопки конкретной страницы. Полный id — `page-number-button-${page}`. */
+    readonly pageNumberPrefix: "page-number-button";
+    /** Префикс для кнопки «многоточие» (break). Полный id — `page-more-button-${start}-${end}`. */
+    readonly pageMorePrefix: "page-more-button";
+    /** Префикс для кнопки страницы в `PaginationSlider`. Полный id — `page-button-slider-${value}`. */
+    readonly sliderItemPrefix: "page-button-slider";
+};
+export declare const getPageNumberTestId: (page: number) => string;
+export declare const getPageMoreTestId: (start: number, end: number) => string;
+export declare const getSliderItemTestId: (value: number) => string;

package/dist/esm/constants.js

@@ -0,0 +1,31 @@
+export const PAGINATION_SIZE = {
+    S: 's',
+    M: 'm',
+};
+export const PAGINATION_SLIDER_SIZE = {
+    Xs: 'xs',
+    S: 's',
+};
+export const VARIANT = {
+    Link: 'link',
+    Button: 'button',
+};
+export const TEST_IDS = {
+    /** Корень `Pagination` (ставится потребителем через `data-test-id`). */
+    root: 'pagination',
+    /** Корень `PaginationSlider` (ставится потребителем через `data-test-id`). */
+    sliderRoot: 'pagination-slider',
+    /** Кнопка «предыдущая страница». */
+    prev: 'page-prev-button',
+    /** Кнопка «следующая страница». */
+    next: 'page-next-button',
+    /** Префикс для кнопки конкретной страницы. Полный id — `page-number-button-${page}`. */
+    pageNumberPrefix: 'page-number-button',
+    /** Префикс для кнопки «многоточие» (break). Полный id — `page-more-button-${start}-${end}`. */
+    pageMorePrefix: 'page-more-button',
+    /** Префикс для кнопки страницы в `PaginationSlider`. Полный id — `page-button-slider-${value}`. */
+    sliderItemPrefix: 'page-button-slider',
+};
+export const getPageNumberTestId = (page) => `${TEST_IDS.pageNumberPrefix}-${page}`;
+export const getPageMoreTestId = (start, end) => `${TEST_IDS.pageMorePrefix}-${start}-${end}`;
+export const getSliderItemTestId = (value) => `${TEST_IDS.sliderItemPrefix}-${value}`;

package/dist/esm/contexts.d.ts

@@ -0,0 +1,7 @@
+import { PaginationSize, Variant } from './types.js';
+export type PaginationContextValue = {
+    size: PaginationSize;
+    variant: Variant;
+};
+export declare const PaginationContext: import("react").Context<PaginationContextValue>;
+export declare const usePaginationContext: () => PaginationContextValue;

package/dist/esm/contexts.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+import { PAGINATION_SIZE, VARIANT } from './constants.js';
+export const PaginationContext = createContext({
+    size: PAGINATION_SIZE.S,
+    variant: VARIANT.Button,
+});
+export const usePaginationContext = () => useContext(PaginationContext);

package/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';
+export * from './utils/index.js';

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';
+export * from './utils/index.js';