@salutejs/plasma-new-hope 0.322.0-canary.1944.14662885061.0 → 0.322.0-canary.1947.14664713311.0

package/styled-components/cjs/components/PaginationDots/PaginationDots.js

@@ -0,0 +1,321 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.paginationDotsRoot = exports.paginationDotsConfig = exports.getVisualOffsets = void 0;
+var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
+var _classnames = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("classnames"));
+var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
+var _hooks = /*#__PURE__*/require("../../hooks");
+var _base = /*#__PURE__*/require("../PaginationDots/variations/_view/base");
+var _base2 = /*#__PURE__*/require("../PaginationDots/variations/_size/base");
+var _PaginationDots = /*#__PURE__*/require("./PaginationDots.styles");
+var _PaginationDots2 = /*#__PURE__*/require("./PaginationDots.tokens");
+var _getDotSize = /*#__PURE__*/require("./utils/getDotSize");
+var _useAnimation2 = /*#__PURE__*/require("./hooks/useAnimation");
+var _excluded = ["view", "size", "activeElementView", "orientation", "centered", "value", "count", "visibleCount", "onChange"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var sizesMap = {
+  xs: 18,
+  s: 20,
+  m: 24
+};
+var getInitialOffset = function getInitialOffset(value, visibleCount, count) {
+  var middle = Math.floor(visibleCount / 2);
+  if (value < middle) {
+    return 0;
+  }
+  if (count - value <= middle) {
+    return count - visibleCount;
+  }
+  return value - middle;
+};
+var getVisualOffsets = exports.getVisualOffsets = function getVisualOffsets(dots, innerViewValue) {
+  var before = dots.slice(0, innerViewValue).reduce(function (acc, size) {
+    return acc + sizesMap[size];
+  }, 0);
+  var after = dots.slice(innerViewValue + 1).reduce(function (acc, size) {
+    return acc + sizesMap[size];
+  }, 0);
+  return (after - before) / 2;
+};
+var getFirstAnimatedDotsOffset = function getFirstAnimatedDotsOffset(dots, prevDots) {
+  var sizeBefore = sizesMap[prevDots[0]];
+  var sizeAfter = sizesMap[dots[0]];
+  return sizeBefore - sizeAfter;
+};
+var getLastAnimatedDotsOffset = function getLastAnimatedDotsOffset(dots, prevDots) {
+  var sizeBefore = sizesMap[prevDots[prevDots.length - 1]];
+  var sizeAfter = sizesMap[dots[dots.length - 1]];
+  return sizeBefore - sizeAfter;
+};
+
+/*
+        (m) m m s xs  value: 0, offset: 0
+      m (m) m s xs    value: 1, offset: 0
+    m m (m) s xs      value: 2, offset: 0
+    s m (m) s xs      value: 3, offset: 1
+   xs s (m) s xs      value: 4, offset: 2
+
+ */
+
+var isDebug = false;
+var paginationDotsRoot = exports.paginationDotsRoot = function paginationDotsRoot(Root) {
+  return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRef) {
+    var view = _ref.view,
+      size = _ref.size,
+      _ref$activeElementVie = _ref.activeElementView,
+      activeElementView = _ref$activeElementVie === void 0 ? 'dot' : _ref$activeElementVie,
+      _ref$orientation = _ref.orientation,
+      orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
+      _ref$centered = _ref.centered,
+      centered = _ref$centered === void 0 ? false : _ref$centered,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value,
+      _ref$count = _ref.count,
+      count = _ref$count === void 0 ? 0 : _ref$count,
+      visibleCount = _ref.visibleCount,
+      onChange = _ref.onChange,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    var innerRef = (0, _react.useRef)(null);
+    var wrapperRef = (0, _react.useRef)(null);
+    var activeElementRef = (0, _react.useRef)(null);
+    var animatedDotsWrapperRef = (0, _react.useRef)(null);
+    (0, _plasmaCore.useForkRef)(outerRef, innerRef);
+    var innerValue = Math.min(value, count - 1);
+    var innerVisibleCount = Math.min(visibleCount || count, count);
+    var isLineView = activeElementView === 'line';
+    var isVertical = orientation === 'vertical';
+    var hasScroll = innerVisibleCount < count;
+    var _useState = (0, _react.useState)(innerValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1];
+    var _useState3 = (0, _react.useState)(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      prevValue = _useState4[0],
+      setPrevValue = _useState4[1];
+    var _useState5 = (0, _react.useState)(function () {
+        return getInitialOffset(innerValue, innerVisibleCount, count);
+      }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      offset = _useState6[0],
+      setOffset = _useState6[1];
+    var prevOffset = (0, _hooks.usePreviousValue)(offset);
+    var prevDotsRef = (0, _react.useRef)([]);
+    var dots = new Array(innerVisibleCount).fill(null).map(function (_, index) {
+      return (0, _getDotSize.getDotSize)(size, index + offset, offset, count, innerVisibleCount);
+    });
+    var setVisualOffset = function setVisualOffset(currentValueNew, newOffset) {
+      var innerViewValue = currentValueNew - newOffset;
+
+      // canScrollBackward || canScrollForward
+      var withAnimation = centered ? true : newOffset !== offset;
+      if (!animatedDotsWrapperRef.current || !withAnimation) {
+        if (wrapperRef.current) {
+          wrapperRef.current.style.transform = 'none';
+        }
+        return;
+      }
+      var visualOffset = getVisualOffsets(dots, innerViewValue);
+      if (wrapperRef.current) {
+        wrapperRef.current.style.transform = isVertical ? "translateY(".concat(visualOffset, "px)") : "translateX(".concat(visualOffset, "px)");
+      }
+    };
+    if (isDebug) {
+      console.log('!!!', JSON.stringify({
+        prevValue: prevValue,
+        prevOffset: prevOffset,
+        value: innerValue,
+        offset: offset
+      }));
+    }
+    var canScrollForward = prevValue !== undefined ? !!offset && count - innerVisibleCount > prevOffset : false;
+    var canScrollBackward = Boolean(prevOffset && offset + innerVisibleCount !== count);
+    var _useAnimation = (0, _useAnimation2.useAnimation)({
+        innerViewIndex: currentValue - offset,
+        dots: dots,
+        prevDots: prevDotsRef.current,
+        canScrollBackward: canScrollBackward,
+        canScrollForward: canScrollForward,
+        isVertical: isVertical,
+        activeElementRef: activeElementRef,
+        animatedDotsWrapperRef: animatedDotsWrapperRef,
+        onAnimationEnd: function onAnimationEnd() {
+          console.log('!!! onAnimationEnd');
+          var newOffset = getInitialOffset(innerValue, innerVisibleCount, count);
+          setOffset(newOffset);
+          setPrevValue(undefined);
+          setSkipAnimation(true);
+        }
+      }),
+      skipAnimation = _useAnimation.skipAnimation,
+      hasAnimation = _useAnimation.hasAnimation,
+      hasForwardAnimation = _useAnimation.hasForwardAnimation,
+      hasBackwardAnimation = _useAnimation.hasBackwardAnimation,
+      setSkipAnimation = _useAnimation.setSkipAnimation,
+      setHasForwardAnimation = _useAnimation.setHasForwardAnimation,
+      setHasBackwardAnimation = _useAnimation.setHasBackwardAnimation,
+      handleAnimationEnd = _useAnimation.handleAnimationEnd;
+    var hasAnimatedDot = hasAnimation && innerVisibleCount > 2 && (hasBackwardAnimation && canScrollBackward || hasForwardAnimation && canScrollForward);
+    var calcOffset = function calcOffset(currentValue, prevValue) {
+      if (prevValue === undefined || centered && !hasScroll) {
+        return;
+      }
+      var toFront = currentValue > prevValue;
+      var toBack = currentValue < prevValue;
+      var newOffset = getInitialOffset(currentValue, innerVisibleCount, count);
+      var withAnimation = centered ? true : newOffset !== offset;
+      if (toFront) {
+        if (withAnimation) {
+          setHasForwardAnimation(true);
+          prevDotsRef.current = _toConsumableArray(dots);
+          setOffset(newOffset);
+        } else {
+          setOffset(newOffset);
+        }
+      } else if (toBack) {
+        if (withAnimation) {
+          setHasBackwardAnimation(true);
+          prevDotsRef.current = _toConsumableArray(dots);
+          setOffset(newOffset);
+        } else {
+          setOffset(newOffset);
+        }
+      }
+    };
+    (0, _react.useLayoutEffect)(function () {
+      setVisualOffset(innerValue, offset);
+    }, [isVertical, centered]);
+    (0, _react.useLayoutEffect)(function () {
+      if (prevValue === undefined) {
+        setVisualOffset(innerValue, offset);
+        if (animatedDotsWrapperRef.current) {
+          animatedDotsWrapperRef.current.style.transition = 'none';
+          animatedDotsWrapperRef.current.style.transform = 'none';
+        }
+      }
+    }, [innerValue, offset, prevValue]);
+    (0, _react.useLayoutEffect)(function () {
+      setSkipAnimation(true);
+      setPrevValue(undefined);
+    }, [count, innerVisibleCount, isVertical, isLineView, hasScroll]);
+    (0, _react.useEffect)(function () {
+      // setSkipAnimation(true);
+      // setPrevValue(undefined);
+    }, []);
+    var onMove = function onMove(newValue) {
+      setSkipAnimation(false);
+      calcOffset(newValue, currentValue);
+      setCurrentValue(newValue);
+      setPrevValue(currentValue);
+      onChange === null || onChange === void 0 || onChange(newValue);
+    };
+    if (!innerVisibleCount || innerVisibleCount <= 0) {
+      return null;
+    }
+    var dotsNodes = dots.map(function (dotSize, viewIndex) {
+      var dotIndex = viewIndex + offset;
+      var isCurrent = dotIndex === currentValue;
+      var isClickable = dotIndex === currentValue - 1 || dotIndex === currentValue + 1;
+      var onClick = isClickable && !hasAnimation ? function () {
+        return onMove(dotIndex);
+      } : undefined;
+      if (isCurrent) {
+        var ActiveElement = activeElementView === 'dot' ? _PaginationDots.Dot : _PaginationDots.Line;
+        return /*#__PURE__*/_react["default"].createElement(ActiveElement, {
+          key: viewIndex,
+          ref: activeElementRef,
+          "data-size": size,
+          "data-view": activeElementView,
+          className: (0, _classnames["default"])(_PaginationDots2.classes.active, isVertical && _PaginationDots2.classes.vertical, skipAnimation && _PaginationDots2.classes.skipAnimation)
+        }, isDebug ? dotIndex : null);
+      }
+      var isPrevActive = prevValue === dotIndex;
+      var innerViewValue = dotIndex - offset;
+      var isFirst = innerViewValue === 0;
+      var isLast = innerViewValue === innerVisibleCount - 1;
+      return /*#__PURE__*/_react["default"].createElement(_PaginationDots.Dot, {
+        key: viewIndex,
+        className: (0, _classnames["default"])(isVertical && _PaginationDots2.classes.vertical, isClickable && _PaginationDots2.classes.clickable, isPrevActive && _PaginationDots2.classes.prevActive, skipAnimation && _PaginationDots2.classes.skipAnimation),
+        style: {
+          visibility: isLast && hasForwardAnimation && canScrollForward || isFirst && hasBackwardAnimation && canScrollBackward ? 'hidden' : 'visible'
+        },
+        "data-size": dotSize,
+        "data-view": activeElementView,
+        onClick: onClick
+      }, isDebug ? dotIndex : null);
+    });
+    return /*#__PURE__*/_react["default"].createElement(Root, _extends({
+      size: size,
+      view: view,
+      className: (0, _classnames["default"])(centered && _PaginationDots2.classes.centered, isVertical && _PaginationDots2.classes.vertical),
+      ref: innerRef
+    }, rest), /*#__PURE__*/_react["default"].createElement(_PaginationDots.Wrapper, {
+      ref: wrapperRef,
+      "data-size": size
+    }, hasAnimatedDot && /*#__PURE__*/_react["default"].createElement(_PaginationDots.Dot, {
+      className: (0, _classnames["default"])(isVertical && _PaginationDots2.classes.vertical, {
+        hidden: hasForwardAnimation,
+        showed: hasBackwardAnimation
+      }),
+      "data-view": activeElementView,
+      "data-size": dots[0],
+      style: isVertical ? {
+        top: "".concat(getFirstAnimatedDotsOffset(dots, prevDotsRef.current), "px")
+      } : {
+        left: "".concat(getFirstAnimatedDotsOffset(dots, prevDotsRef.current), "px")
+      }
+    }, isDebug ? offset + (hasForwardAnimation ? -1 : 0) : null), /*#__PURE__*/_react["default"].createElement(_PaginationDots.AnimatedDotsWrapper, {
+      ref: animatedDotsWrapperRef,
+      onTransitionEnd: handleAnimationEnd
+    }, dotsNodes), hasAnimatedDot && /*#__PURE__*/_react["default"].createElement(_PaginationDots.Dot, {
+      className: (0, _classnames["default"])(isVertical && _PaginationDots2.classes.vertical, {
+        hidden: hasBackwardAnimation,
+        showed: hasForwardAnimation
+      }),
+      "data-view": activeElementView,
+      "data-size": dots[dots.length - 1],
+      style: isVertical ? {
+        bottom: "".concat(getLastAnimatedDotsOffset(dots, prevDotsRef.current), "px")
+      } : {
+        right: "".concat(getLastAnimatedDotsOffset(dots, prevDotsRef.current), "px")
+      }
+    }, isDebug ? offset + innerVisibleCount + (hasForwardAnimation ? -1 : 0) : null)));
+  });
+};
+var paginationDotsConfig = exports.paginationDotsConfig = {
+  name: 'PaginationDots',
+  tag: 'div',
+  layout: paginationDotsRoot,
+  base: _PaginationDots.base,
+  variations: {
+    view: {
+      css: _base.base
+    },
+    size: {
+      css: _base2.base
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

package/styled-components/cjs/components/PaginationDots/PaginationDots.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = exports.Wrapper = exports.Line = exports.Dot = exports.AnimatedDotsWrapper = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("styled-components"));
+var _PaginationDots = /*#__PURE__*/require("./PaginationDots.tokens");
+var _templateObject;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-b6xerq-0"
+})(["position:relative;display:flex;align-items:center;justify-content:center;"]);
+var AnimatedDotsWrapper = exports.AnimatedDotsWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-b6xerq-1"
+})(["display:flex;align-items:center;justify-content:center;"]);
+var Dot = exports.Dot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-b6xerq-2"
+})(["box-sizing:border-box;padding:var(", ");&:before{content:'';display:block;border-radius:var(", ");background-color:var(", ");transition:width 0.3s linear,height 0.3s linear;}&.", "{&:before{background-color:var(", ");}}&[data-size='xs']{&:before{--plasma-private-dot-size:var(", ");width:var(", ");height:var(", ");}}&[data-size='s']{&:before{--plasma-private-dot-size:var(", ");width:var(", ");height:var(", ");}}&[data-size='m']{&:before{--plasma-private-dot-size:var(", ");width:var(", ");height:var(", ");}}&.", "{cursor:pointer;}@keyframes showAnimation{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}@keyframes showWithColor{from{background-color:var(", ");}to{background-color:var(", ");}}@keyframes hideWithColor{from{background-color:var(", ");}to{background-color:var(", ");}}@keyframes hideAnimation{from{transform:scale(1);opacity:1;}to{transform:scale(0);opacity:0;}}@keyframes reversedWidthAnimation{from{width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");}to{width:var(--plasma-private-dot-size);height:var(--plasma-private-dot-size);border-radius:var(", ");background-color:var(", ");}}@keyframes reversedHeightAnimation{from{width:var(", ");height:var(", ");border-radius:var(", ");}to{width:var(--plasma-private-dot-size);height:var(--plasma-private-dot-size);border-radius:var(", ");}}&.", "{&[data-view='line']{&:before{animation-name:reversedWidthAnimation;animation-duration:0.3s;animation-iteration-count:1;animation-play-state:running;animation-timing-function:linear;}&.", "{&:before{animation-name:reversedHeightAnimation;}}}&[data-view='dot']{&:before{animation-name:hideWithColor;animation-duration:0.3s;animation-iteration-count:1;animation-play-state:running;animation-timing-function:linear;animation-timing-function:ease-out;}}}&.hidden{position:absolute;animation-name:hideAnimation;animation-duration:calc(0.3s + 0.1s);animation-iteration-count:1;animation-play-state:running;animation-timing-function:linear;}&.showed{position:absolute;animation-name:showAnimation;animation-duration:0.3s;animation-iteration-count:1;animation-play-state:running;animation-timing-function:linear;}&.", "{&[data-view='dot']{&:before{animation-name:showWithColor;animation-duration:0.3s;animation-iteration-count:1;animation-play-state:running;animation-timing-function:linear;animation-timing-function:ease-in;}}}&.", "{transition:none;animation-name:none !important;&:before{transition:none;animation-name:none !important;}}"], _PaginationDots.tokens.dotPadding, _PaginationDots.tokens.dotBorderRadius, _PaginationDots.tokens.itemBackground, _PaginationDots.classes.active, _PaginationDots.tokens.activeItemBackground, _PaginationDots.tokens.dotSizeXS, _PaginationDots.tokens.dotSizeXS, _PaginationDots.tokens.dotSizeXS, _PaginationDots.tokens.dotSizeS, _PaginationDots.tokens.dotSizeS, _PaginationDots.tokens.dotSizeS, _PaginationDots.tokens.dotSizeM, _PaginationDots.tokens.dotSizeM, _PaginationDots.tokens.dotSizeM, _PaginationDots.classes.clickable, _PaginationDots.tokens.itemBackground, _PaginationDots.tokens.activeItemBackground, _PaginationDots.tokens.activeItemBackground, _PaginationDots.tokens.itemBackground, _PaginationDots.tokens.lineWidth, _PaginationDots.tokens.lineHeight, _PaginationDots.tokens.lineBorderRadius, _PaginationDots.tokens.activeItemBackground, _PaginationDots.tokens.lineBorderRadius, _PaginationDots.tokens.itemBackground, _PaginationDots.tokens.verticalLineWidth, _PaginationDots.tokens.verticalLineHeight, _PaginationDots.tokens.lineBorderRadius, _PaginationDots.tokens.lineBorderRadius, _PaginationDots.classes.prevActive, _PaginationDots.classes.vertical, _PaginationDots.classes.active, _PaginationDots.classes.skipAnimation);
+var Line = exports.Line = /*#__PURE__*/(0, _styledComponents["default"])(Dot).withConfig({
+  componentId: "plasma-new-hope__sc-b6xerq-3"
+})(["@keyframes widthAnimation{from{width:var(", ");height:var(", ");background-color:var(", ");}to{width:var(", ");height:var(", ");background-color:var(", ");}}@keyframes heightAnimation{from{width:var(", ");height:var(", ");background-color:var(", ");}to{width:var(", ");height:var(", ");background-color:var(", ");}}&[data-size='s']{&:before{width:var(", ");height:var(", ");border-radius:var(", ");}}&[data-size='m']{&:before{width:var(", ");height:var(", ");border-radius:var(", ");}}&.", "{&[data-size='s']{&:before{width:var(", ");height:var(", ");}}&[data-size='m']{&:before{width:var(", ");height:var(", ");}}}&.", "{&:before{animation-name:widthAnimation;animation-duration:0.3s;animation-iteration-count:1;animation-play-state:running;animation-timing-function:linear;}&.", "{&:before{animation-name:heightAnimation;}}}&.", "{animation-name:none !important;&:before{animation-name:none !important;}}"], _PaginationDots.tokens.lineHeight, _PaginationDots.tokens.lineHeight, _PaginationDots.tokens.itemBackground, _PaginationDots.tokens.lineWidth, _PaginationDots.tokens.lineHeight, _PaginationDots.tokens.activeItemBackground, _PaginationDots.tokens.lineHeight, _PaginationDots.tokens.lineHeight, _PaginationDots.tokens.itemBackground, _PaginationDots.tokens.verticalLineWidth, _PaginationDots.tokens.verticalLineHeight, _PaginationDots.tokens.activeItemBackground, _PaginationDots.tokens.lineWidth, _PaginationDots.tokens.lineHeight, _PaginationDots.tokens.lineBorderRadius, _PaginationDots.tokens.lineWidth, _PaginationDots.tokens.lineHeight, _PaginationDots.tokens.lineBorderRadius, _PaginationDots.classes.vertical, _PaginationDots.tokens.verticalLineWidth, _PaginationDots.tokens.verticalLineHeight, _PaginationDots.tokens.verticalLineWidth, _PaginationDots.tokens.verticalLineHeight, _PaginationDots.classes.active, _PaginationDots.classes.vertical, _PaginationDots.classes.skipAnimation);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n\n    &.", " {\n        width: 100%;\n        justify-content: center;\n    }\n\n    &.", " {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n\n        ", " {\n            padding: var(", ");\n        }\n\n        ", " {\n            flex-direction: column;\n        }\n\n        &.", " {\n            width: auto;\n            height: 100%;\n\n            position: relative;\n        }\n    }\n"])), _PaginationDots.classes.centered, _PaginationDots.classes.vertical, Dot, _PaginationDots.tokens.verticalDotPadding, AnimatedDotsWrapper, _PaginationDots.classes.centered);

package/styled-components/cjs/components/PaginationDots/PaginationDots.template-doc.mdx

@@ -0,0 +1,95 @@
+---
+id: segment
+title: Segment
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# PaginationDots
+Элементы переключения. Oтображают возможность перемещения между небольшим количеством однородных элементов контента.
+
+## PaginationDots
+
+<Description name="PaginationDots" />
+<PropsTable name="PaginationDots"  exclude={['css']} />
+
+```tsx live
+import React from 'react';
+import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = Array(8).fill(0);
+
+    const SegmentTemplate = () => {
+        const {selectedSegmentItems} = useSegment();
+
+        return (
+            <>
+                <div>Выбранный элемент: {selectedSegmentItems.join(', ')}</div>
+                <br />
+                <SegmentGroup hasBackground pilled clip={false}>
+                    {items.map((_, i) => (
+                        <SegmentItem
+                            label={`Label ${i}`}
+                            value={`label_${i}`}
+                            key={`label_${i}`}
+                            view='default'
+                            pilled
+                        />
+                    ))}
+                </SegmentGroup>
+            </>
+        )
+    }
+
+    return (
+        <div style={{ display: "block" }} >
+            <SegmentProvider defaultSelected={['label_1']}>
+                <SegmentTemplate/>
+            </SegmentProvider>
+        </div>
+    );
+}
+```
+
+### Вертикальное отображение
+
+Для смены ориентации передаем `orientation: 'vertical'`
+
+```tsx live
+import React from 'react';
+import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = Array(8).fill(0);
+
+    const SegmentTemplate = () => {
+        const {selectedSegmentItems} = useSegment();
+
+        return (
+            <>
+                <div>Выбранный элемент: {selectedSegmentItems.join(', ')}</div>
+                <br />
+                <SegmentGroup hasBackground clip={false}>
+                    {items.map((_, i) => (
+                        <SegmentItem
+                            label={`Label ${i}`}
+                            value={`label_${i}`}
+                            key={`label_${i}`}
+                            view='secondary'
+                        />
+                    ))}
+                </SegmentGroup>
+            </>
+        )
+    }
+
+    return (
+        <div style={{ display: "block" }} >
+            <SegmentProvider defaultSelected={['label_1']}>
+                <SegmentTemplate/>
+            </SegmentProvider>
+        </div>
+    );
+}
+```

package/styled-components/cjs/components/PaginationDots/PaginationDots.tokens.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tokens = exports.classes = void 0;
+var classes = exports.classes = {
+  active: 'active',
+  prevActive: 'prevActive',
+  centered: 'centered',
+  vertical: 'vertical',
+  clickable: 'clickable',
+  skipAnimation: 'skipAnimation'
+};
+var tokens = exports.tokens = {
+  paginationWidth: '--plasma-pagination-width',
+  dotPadding: '--plasma-pagination-dots-dot-padding',
+  verticalDotPadding: '--plasma-pagination-dots-vertical-dot-padding',
+  dotSizeM: '--plasma-pagination-dots-dot-size-m',
+  dotSizeS: '--plasma-pagination-dots-dot-size-s',
+  dotSizeXS: '--plasma-pagination-dots-dot-size-xs',
+  dotBorderRadius: '--plasma-pagination-dots-dot-border-radius',
+  lineWidth: '--plasma-pagination-dots-line-width',
+  lineHeight: '--plasma-pagination-dots-line-height',
+  lineBorderRadius: '--plasma-pagination-dots-line-border-radius',
+  verticalLineWidth: '--plasma-pagination-dots-vertical-line-width',
+  verticalLineHeight: '--plasma-pagination-dots-vertical-line-height',
+  itemBackground: '--plasma-pagination-dots-item-background',
+  activeItemBackground: '--plasma-pagination-dots-active-item-background'
+};

package/styled-components/cjs/components/PaginationDots/PaginationDots.types.js

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

package/styled-components/cjs/components/PaginationDots/hooks/useAnimation.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimation = void 0;
+var _react = /*#__PURE__*/require("react");
+var _PaginationDots = /*#__PURE__*/require("../PaginationDots");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var useAnimation = exports.useAnimation = function useAnimation(_ref) {
+  var isVertical = _ref.isVertical,
+    onAnimationEnd = _ref.onAnimationEnd,
+    activeElementRef = _ref.activeElementRef,
+    animatedDotsWrapperRef = _ref.animatedDotsWrapperRef,
+    canScrollForward = _ref.canScrollForward,
+    canScrollBackward = _ref.canScrollBackward,
+    dots = _ref.dots,
+    prevDots = _ref.prevDots,
+    innerViewIndex = _ref.innerViewIndex;
+  var isAnimationRunningRef = (0, _react.useRef)(false);
+  var _useState = (0, _react.useState)(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    skipAnimation = _useState2[0],
+    setSkipAnimation = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasForwardAnimation = _useState4[0],
+    setHasForwardAnimation = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasBackwardAnimation = _useState6[0],
+    setHasBackwardAnimation = _useState6[1];
+  var hasAnimation = hasForwardAnimation || hasBackwardAnimation;
+  var handleAnimationEnd = function handleAnimationEnd() {
+    if (isAnimationRunningRef.current) {
+      isAnimationRunningRef.current = false;
+      onAnimationEnd();
+    }
+    setHasForwardAnimation(false);
+    setHasBackwardAnimation(false);
+  };
+  (0, _react.useLayoutEffect)(function () {
+    var _activeElementRef$cur, _activeElementRef$cur2;
+    var animatedEl = animatedDotsWrapperRef.current;
+    if (!animatedEl || !hasForwardAnimation && !hasBackwardAnimation) {
+      return;
+    }
+    var before = (0, _PaginationDots.getVisualOffsets)(prevDots, innerViewIndex);
+    var after = (0, _PaginationDots.getVisualOffsets)(dots, innerViewIndex);
+    var diff = before - after;
+    var _ref2 = activeElementRef.current,
+      activeWidth = _ref2.offsetWidth,
+      activeHeight = _ref2.offsetHeight;
+    var _ref3 = (hasBackwardAnimation ? (_activeElementRef$cur = activeElementRef.current) === null || _activeElementRef$cur === void 0 ? void 0 : _activeElementRef$cur.previousSibling : (_activeElementRef$cur2 = activeElementRef.current) === null || _activeElementRef$cur2 === void 0 ? void 0 : _activeElementRef$cur2.nextSibling) || {},
+      width = _ref3.offsetWidth,
+      height = _ref3.offsetHeight;
+    animatedEl.style.transition = 'none';
+    if (hasForwardAnimation) {
+      if (canScrollForward) {
+        animatedEl.style.transform = isVertical ? "translateY(".concat(height, "px)") : "translateX(".concat(width, "px)");
+      } else {
+        animatedEl.style.transform = isVertical ? "translateY(".concat(height - activeHeight, "px)") : "translateX(".concat(width - activeWidth, "px)");
+      }
+      requestAnimationFrame(function () {
+        animatedEl.style.transition = 'transform 0.3s linear';
+        if (canScrollForward) {
+          animatedEl.style.transform = isVertical ? "translateY(".concat(-diff, "px)") : "translateX(".concat(-diff, "px)");
+        } else {
+          animatedEl.style.transform = isVertical ? "translateY(-".concat(activeHeight, "px)") : "translateX(-".concat(activeWidth, "px)");
+        }
+        isAnimationRunningRef.current = true;
+      });
+    }
+    if (hasBackwardAnimation) {
+      if (canScrollBackward) {
+        animatedEl.style.transform = isVertical ? "translateY(".concat(-height, "px)") : "translateX(".concat(-width, "px)");
+      } else {
+        animatedEl.style.transform = isVertical ? "translateY(".concat(-height + activeHeight, "px)") : "translateX(".concat(-width + activeWidth, "px)");
+      }
+      requestAnimationFrame(function () {
+        if (animatedEl) {
+          animatedEl.style.transition = 'transform 0.3s linear';
+          if (canScrollBackward) {
+            animatedEl.style.transform = isVertical ? "translateY(".concat(-diff, "px)") : "translateX(".concat(-diff, "px)");
+          } else {
+            animatedEl.style.transform = isVertical ? "translateY(".concat(activeHeight, "px)") : "translateX(".concat(activeWidth, "px)");
+          }
+          isAnimationRunningRef.current = true;
+        }
+      });
+    }
+  }, [isVertical, innerViewIndex, hasForwardAnimation, hasBackwardAnimation]);
+  return {
+    skipAnimation: skipAnimation,
+    hasAnimation: hasAnimation,
+    hasBackwardAnimation: hasBackwardAnimation,
+    hasForwardAnimation: hasForwardAnimation,
+    setSkipAnimation: setSkipAnimation,
+    setHasForwardAnimation: setHasForwardAnimation,
+    setHasBackwardAnimation: setHasBackwardAnimation,
+    handleAnimationEnd: handleAnimationEnd
+  };
+};

package/styled-components/cjs/components/PaginationDots/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "paginationDotsClasses", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationDots2.classes;
+  }
+});
+Object.defineProperty(exports, "paginationDotsConfig", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationDots.paginationDotsConfig;
+  }
+});
+Object.defineProperty(exports, "paginationDotsRoot", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationDots.paginationDotsRoot;
+  }
+});
+Object.defineProperty(exports, "paginationDotsTokens", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationDots2.tokens;
+  }
+});
+var _PaginationDots = /*#__PURE__*/require("./PaginationDots");
+var _PaginationDots2 = /*#__PURE__*/require("./PaginationDots.tokens");