@cloud-ru/ds-pagination 1.0.0

package/dist/cjs/style.css

@@ -0,0 +1,295 @@
+.pagination{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  margin:0;
+  padding:0;
+  list-style-type:none;
+}
+.pagination[data-size=s]{
+  gap:var(--sn-pagination-anatomy-size-s-paginationNumber-gap, var(--sn-primitive-dimension-4, 4px));
+}
+.pagination[data-size=m]{
+  gap:var(--sn-pagination-anatomy-size-m-paginationNumber-gap, var(--sn-primitive-dimension-4, 4px));
+}
+.pagination > li{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+@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;
+}
+.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;
+}
+.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/cjs/types.d.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { PAGINATION_SIZE, PAGINATION_SLIDER_SIZE, VARIANT } from './constants';
+export type PaginationSize = ValueOf<typeof PAGINATION_SIZE>;
+export type PaginationSliderSize = ValueOf<typeof PAGINATION_SLIDER_SIZE>;
+export type Variant = ValueOf<typeof VARIANT>;

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/utils/getPaginationEntries.d.ts

@@ -0,0 +1,20 @@
+export declare enum PaginationEntryKind {
+    Page = "page",
+    Break = "break"
+}
+export type PaginationEntry = {
+    kind: PaginationEntryKind.Page;
+    page: number;
+} | {
+    kind: PaginationEntryKind.Break;
+    start: number;
+    end: number;
+};
+type PaginationOptions = {
+    firstPage: number;
+    lastPage: number;
+    currentPage: number;
+    maxLength: number;
+};
+export declare function getPaginationEntries(options: PaginationOptions): PaginationEntry[];
+export {};

package/dist/cjs/utils/getPaginationEntries.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationEntryKind = void 0;
+exports.getPaginationEntries = getPaginationEntries;
+const getRange_1 = require("./getRange");
+var PaginationEntryKind;
+(function (PaginationEntryKind) {
+    PaginationEntryKind["Page"] = "page";
+    PaginationEntryKind["Break"] = "break";
+})(PaginationEntryKind || (exports.PaginationEntryKind = PaginationEntryKind = {}));
+function createPageEntry(page) {
+    return { kind: PaginationEntryKind.Page, page };
+}
+function createBreakEntry(start, end) {
+    return { kind: PaginationEntryKind.Break, start, end };
+}
+var GroupPosition;
+(function (GroupPosition) {
+    GroupPosition["Left"] = "left";
+    GroupPosition["Middle"] = "middle";
+    GroupPosition["Right"] = "right";
+})(GroupPosition || (GroupPosition = {}));
+function getPaginationState(options) {
+    const { firstPage, lastPage, currentPage, maxLength } = options;
+    const currentPageSiblingsCount = maxLength - 5; /* First page, break, current page, break and last page. */
+    const displayedPagesCount = maxLength - 2; /* First or last page and break. */
+    function getGroupPosition() {
+        if (lastPage <= maxLength) {
+            return null;
+        }
+        if (currentPage < displayedPagesCount) {
+            return GroupPosition.Left;
+        }
+        if (lastPage + firstPage - currentPage < displayedPagesCount) {
+            return GroupPosition.Right;
+        }
+        return GroupPosition.Middle;
+    }
+    return {
+        firstPage,
+        lastPage,
+        currentPage,
+        currentPageSiblingsCount,
+        displayedPagesCount,
+        groupPosition: getGroupPosition(),
+    };
+}
+function getEntriesGroupedOnTheLeft(state) {
+    const { firstPage, lastPage, displayedPagesCount } = state;
+    const groupFirstPage = firstPage;
+    const groupLastPage = displayedPagesCount;
+    const group = (0, getRange_1.getRange)(groupFirstPage, groupLastPage).map(createPageEntry);
+    return [...group, createBreakEntry(groupLastPage + 1, lastPage - 1), createPageEntry(lastPage)];
+}
+function getEntriesGroupedInTheMiddle(state) {
+    const { firstPage, lastPage, currentPage, currentPageSiblingsCount } = state;
+    const groupFirstPage = Math.floor(currentPage - currentPageSiblingsCount / 2);
+    const groupLastPage = Math.floor(currentPage + currentPageSiblingsCount / 2);
+    const group = (0, getRange_1.getRange)(groupFirstPage, groupLastPage).map(createPageEntry);
+    return [
+        createPageEntry(firstPage),
+        createBreakEntry(firstPage + 1, groupFirstPage - 1),
+        ...group,
+        createBreakEntry(groupLastPage + 1, lastPage - 1),
+        createPageEntry(lastPage),
+    ];
+}
+function getEntriesGroupedOnTheRight(state) {
+    const { firstPage, lastPage, displayedPagesCount } = state;
+    const groupFirstPage = lastPage + firstPage - displayedPagesCount;
+    const groupLastPage = lastPage;
+    const group = (0, getRange_1.getRange)(groupFirstPage, groupLastPage).map(createPageEntry);
+    return [createPageEntry(firstPage), createBreakEntry(firstPage + 1, groupFirstPage - 1), ...group];
+}
+const getGroupedEntriesByGroupPosition = {
+    [GroupPosition.Left]: getEntriesGroupedOnTheLeft,
+    [GroupPosition.Middle]: getEntriesGroupedInTheMiddle,
+    [GroupPosition.Right]: getEntriesGroupedOnTheRight,
+};
+function getPaginationEntries(options) {
+    const state = getPaginationState(options);
+    return state.groupPosition === null
+        ? (0, getRange_1.getRange)(state.firstPage, state.lastPage).map(createPageEntry)
+        : getGroupedEntriesByGroupPosition[state.groupPosition](state);
+}

package/dist/cjs/utils/getRange.d.ts

@@ -0,0 +1 @@
+export declare function getRange(start: number, end: number): number[];

package/dist/cjs/utils/getRange.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRange = getRange;
+function getRange(start, end) {
+    return Array.from({ length: end - start + 1 }, (_, value) => value + start);
+}

package/dist/cjs/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './getRange';
+export * from './getPaginationEntries';

package/dist/cjs/utils/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./getRange"), exports);
+__exportStar(require("./getPaginationEntries"), exports);

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

@@ -0,0 +1,24 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { MouseEvent } from 'react';
+import { PaginationSize, Variant } from '../../types.js';
+export type PaginationProps = WithSupportProps<{
+    /** Общее количество страниц */
+    total: number;
+    /** Текущая страница */
+    page: number;
+    /** Варианты тега кнопок: <a/> или <button/> */
+    variant?: Variant;
+    /** Максимальное количество страниц/элементов, помещающихся до транкейта */
+    maxLength?: number;
+    /** Колбэк смены значения */
+    onChange(page: number, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
+    /** Колбэк форматирования ссылки */
+    hrefFormatter?(page: number): string;
+    /** CSS класснейм */
+    className?: string;
+    /** Размер
+     * @default 'm'
+     */
+    size?: PaginationSize;
+}>;
+export declare function Pagination({ total, page, onChange, hrefFormatter, className, variant, size, maxLength, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Pagination/Pagination.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { ChevronLeftSVG, ChevronRightSVG } from '@cloud-ru/ds-icons/interface/system';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import { useEffect, useRef, useState } from 'react';
+import { getPageMoreTestId, getPageNumberTestId, PAGINATION_SIZE, TEST_IDS, VARIANT } from '../../constants.js';
+import { PaginationContext } from '../../contexts.js';
+import { getPaginationEntries, PaginationEntryKind } from '../../utils/index.js';
+import { PaginationNumberItem } from '../PaginationNumberItem/index.js';
+import styles from './styles.module.css';
+const FIRST_PAGE = 1;
+const ARROW_STEP = 1;
+const MAX_LENGTH = 7;
+export function Pagination({ total, page, onChange, hrefFormatter, className, variant = VARIANT.Button, size = PAGINATION_SIZE.M, maxLength = MAX_LENGTH, ...rest }) {
+    const entries = getPaginationEntries({
+        firstPage: FIRST_PAGE,
+        lastPage: total,
+        currentPage: page,
+        maxLength,
+    });
+    const buttonRefs = useRef([]);
+    const [buttonToFocus, setButtonToFocus] = useState(-1);
+    useEffect(() => {
+        buttonRefs.current[buttonToFocus]?.focus();
+    }, [buttonToFocus]);
+    const handlePreviousPageButtonClick = () => {
+        const newPage = page - ARROW_STEP;
+        onChange(newPage);
+        if (newPage === FIRST_PAGE) {
+            setButtonToFocus(FIRST_PAGE);
+        }
+    };
+    const handleNextPageButtonClick = () => {
+        const newPage = page + ARROW_STEP;
+        onChange(newPage);
+        if (newPage === total) {
+            setButtonToFocus(total);
+        }
+    };
+    const handleMoreButtonClick = (start, end) => {
+        const targetPage = Math.floor((start + end) / 2);
+        onChange(targetPage);
+        setButtonToFocus(targetPage);
+    };
+    const renderEntry = (entry) => {
+        if (entry.kind === PaginationEntryKind.Page) {
+            return (_jsx("li", { children: _jsx(PaginationNumberItem, { label: entry.page, activated: entry.page === page, onClick: e => onChange(entry.page, e), setButtonRef: (el) => {
+                        buttonRefs.current[entry.page] = el;
+                    }, href: hrefFormatter?.(entry.page), "aria-current": entry.page === page ? 'page' : undefined, "data-test-id": getPageNumberTestId(entry.page) }) }, entry.page));
+        }
+        if (entry.kind === PaginationEntryKind.Break) {
+            return (_jsx("li", { children: _jsx(PaginationNumberItem, { label: '...', onClick: () => handleMoreButtonClick(entry.start, entry.end), "data-test-id": getPageMoreTestId(entry.start, entry.end) }) }, `${entry.start}-${entry.end}`));
+        }
+        return null;
+    };
+    const buttonSize = size === PAGINATION_SIZE.M ? 'm' : 's';
+    return (_jsx(PaginationContext.Provider, { value: { size, variant }, children: _jsx("nav", { className: className, "aria-label": 'Pagination', "data-size": size, "data-variant": variant, ...extractSupportProps(rest), children: _jsxs("ul", { className: styles.pagination, "data-size": size, children: [_jsx("li", { children: _jsx(Button, { view: 'simple', appearance: 'neutral', icon: _jsx(ChevronLeftSVG, {}), onClick: handlePreviousPageButtonClick, disabled: page === FIRST_PAGE, size: buttonSize, "aria-label": 'Previous page', "data-test-id": TEST_IDS.prev }) }), entries.map(renderEntry), _jsx("li", { children: _jsx(Button, { view: 'simple', appearance: 'neutral', icon: _jsx(ChevronRightSVG, {}), onClick: handleNextPageButtonClick, disabled: page === total, size: buttonSize, "aria-label": 'Next page', "data-test-id": TEST_IDS.next }) })] }) }) }));
+}

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

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

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

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

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

@@ -0,0 +1,19 @@
+.pagination{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  margin:0;
+  padding:0;
+  list-style-type:none;
+}
+.pagination[data-size=s]{
+  gap:var(--sn-pagination-anatomy-size-s-paginationNumber-gap, var(--sn-primitive-dimension-4, 4px));
+}
+.pagination[data-size=m]{
+  gap:var(--sn-pagination-anatomy-size-m-paginationNumber-gap, var(--sn-primitive-dimension-4, 4px));
+}
+.pagination > li{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}

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

@@ -0,0 +1,10 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { MouseEvent, Ref } from 'react';
+export type PaginationNumberItemProps = WithSupportProps<{
+    label: number | string;
+    activated?: boolean;
+    onClick(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
+    href?: string;
+    setButtonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+}>;
+export declare function PaginationNumberItem({ label, activated, onClick, href, setButtonRef, ...rest }: PaginationNumberItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PaginationNumberItem/PaginationNumberItem.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import { usePaginationContext } from '../../contexts.js';
+import styles from './styles.module.css';
+export function PaginationNumberItem({ label, activated, onClick, href, setButtonRef, ...rest }) {
+    const { size, variant } = usePaginationContext();
+    const stateLayer = activated ? 'activatedOnBackground' : 'emptyNeutralOnBackground';
+    if (variant === 'link') {
+        return (_jsxs("a", { role: 'button', className: styles.root, onClick: onClick, ref: setButtonRef, "data-size": size, ...extractSupportProps(rest), "data-activated": activated || undefined, href: href, children: [_jsx("span", { className: styles.stateLayer, "aria-hidden": true, "data-state": stateLayer }), _jsx("span", { className: styles.textWrapper, children: label })] }));
+    }
+    return (_jsxs("button", { type: 'button', className: styles.root, onClick: onClick, ref: setButtonRef, "data-size": size, ...extractSupportProps(rest), "data-activated": activated || undefined, children: [_jsx("span", { className: styles.stateLayer, "aria-hidden": true, "data-state": stateLayer }), _jsx("span", { className: styles.textWrapper, children: label })] }));
+}

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

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

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

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