@salutejs/plasma-new-hope 0.163.1-canary.1476.11274907051.0 → 0.164.0-canary.1452.11274846938.0

package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js

@@ -1,8 +1,11 @@
 import styled from 'styled-components';
-import { tokens } from '../../Slider.tokens';
-export var HandlerStyled = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-a1py3c-0"
-})(["cursor:pointer;position:absolute;z-index:1;top:0;left:0;"]);
+import { classes, tokens } from '../../Slider.tokens';
 export var StyledValue = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-a1py3c-0"
+})(["position:absolute;z-index:1;top:var(", ");text-align:center;width:100%;margin-left:-0.125rem;display:flex;justify-content:center;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.currentValueTopOffset, tokens.currentValueFontFamily, tokens.currentValueFontSize, tokens.currentValueFontStyle, tokens.currentValueFontWeight, tokens.currentValueLetterSpacing, tokens.currentValueLineHeight);
+export var HandlerStyled = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-a1py3c-1"
-})(["position:absolute;z-index:1;top:var(", ");text-align:center;width:100%;margin-left:-0.125rem;display:flex;justify-content:center;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.currentValueTopOffset, tokens.currentValueFontFamily, tokens.currentValueFontSize, tokens.currentValueFontStyle, tokens.currentValueFontWeight, tokens.currentValueLetterSpacing, tokens.currentValueLineHeight);
+})(["cursor:pointer;position:absolute;z-index:1;top:0;left:0;bottom:0;display:flex;align-items:center;justify-content:center;--thumb-size:", ";&.", "{left:0.125rem;right:0;bottom:auto;align-items:flex-start;justify-content:center;", "{margin:0;top:0;bottom:0;right:0;left:calc(var(", ") - (var(", ") - var(--thumb-size)) / 2 + 0.25rem);align-items:center;justify-content:flex-start;}}&.", "{", "{left:auto;right:calc(var(", ") - (var(", ") - var(--thumb-size)) / 2 + 0.3125rem);justify-content:flex-end;}}"], function (_ref) {
+  var isLarge = _ref.isLarge;
+  return isLarge ? "var(".concat(tokens.thumbSizeLarge, ")") : "var(".concat(tokens.thumbSize, ")");
+}, classes.verticalOrientation, StyledValue, tokens.size, tokens.size, classes.valuePlacementLeft, StyledValue, tokens.size, tokens.size);

package/styled-components/es/components/Slider/ui/Handler/computeKeyPressData.js

@@ -0,0 +1,115 @@
+var KeyboardSupport = {
+  PageUp: 33,
+  PageDown: 34,
+  End: 35,
+  Home: 36,
+  ArrowLeft: 37,
+  ArrowUp: 38,
+  ArrowRight: 39,
+  ArrowDown: 40
+};
+var ArrowUp = KeyboardSupport.ArrowUp,
+  ArrowRight = KeyboardSupport.ArrowRight,
+  ArrowDown = KeyboardSupport.ArrowDown,
+  ArrowLeft = KeyboardSupport.ArrowLeft,
+  Home = KeyboardSupport.Home,
+  End = KeyboardSupport.End,
+  PageDown = KeyboardSupport.PageDown,
+  PageUp = KeyboardSupport.PageUp;
+var computeVerticalMovement = function computeVerticalMovement(event, _ref) {
+  var stepSize = _ref.stepSize,
+    position = _ref.position,
+    max = _ref.max,
+    computedMultipleSteps = _ref.computedMultipleSteps;
+  var keyCode = event.keyCode,
+    target = event.target;
+  var data = {
+    x: 0,
+    deltaX: 0,
+    lastX: 0,
+    y: 0,
+    deltaY: stepSize,
+    lastY: position,
+    node: target
+  };
+  switch (keyCode) {
+    case ArrowUp:
+    case ArrowRight:
+      data.y = position - stepSize;
+      data.deltaY = -stepSize;
+      break;
+    case ArrowDown:
+    case ArrowLeft:
+      data.y = position + stepSize;
+      break;
+    case PageUp:
+      data.y = position - computedMultipleSteps;
+      data.deltaY = -computedMultipleSteps;
+      break;
+    case PageDown:
+      data.y = position + computedMultipleSteps;
+      data.deltaY = computedMultipleSteps;
+      break;
+    case End:
+      data.y = max * stepSize;
+      break;
+    case Home:
+      data.y = 0;
+      break;
+    default:
+      data.y = 0;
+  }
+  return data;
+};
+var computeHorizontalMovement = function computeHorizontalMovement(event, _ref2) {
+  var stepSize = _ref2.stepSize,
+    position = _ref2.position,
+    max = _ref2.max,
+    computedMultipleSteps = _ref2.computedMultipleSteps;
+  var keyCode = event.keyCode,
+    target = event.target;
+  var data = {
+    x: 0,
+    deltaX: stepSize,
+    lastX: position,
+    y: 0,
+    deltaY: 0,
+    lastY: 0,
+    node: target
+  };
+  switch (keyCode) {
+    case ArrowUp:
+    case ArrowRight:
+      data.x = position + stepSize;
+      break;
+    case ArrowDown:
+    case ArrowLeft:
+      data.x = position - stepSize;
+      data.deltaX = -stepSize;
+      break;
+    case PageUp:
+      data.x = position + computedMultipleSteps;
+      data.deltaX = computedMultipleSteps;
+      break;
+    case PageDown:
+      data.x = position - computedMultipleSteps;
+      data.deltaX = -computedMultipleSteps;
+      break;
+    case End:
+      data.x = max * stepSize;
+      break;
+    case Home:
+      data.x = 0;
+      break;
+    default:
+      data.x = 0;
+  }
+  return data;
+};
+export var computeKeyPressData = function computeKeyPressData(event, params) {
+  var keyCode = event.keyCode;
+  if (!Object.values(KeyboardSupport).includes(keyCode)) {
+    return null;
+  }
+  return params.isVertical ? computeVerticalMovement(event, params) : computeHorizontalMovement(event, params);
+};

package/styled-components/es/components/Slider/ui/Thumb/Thumb.js

@@ -1,4 +1,4 @@
-var _excluded = ["min", "max", "value", "ariaValueMin", "ariaLabel", "disabled"];
+var _excluded = ["min", "max", "value", "ariaValueMin", "ariaLabel", "disabled", "orientation"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -12,6 +12,7 @@ export var Thumb = function Thumb(_ref) {
     ariaValueMin = _ref$ariaValueMin === void 0 ? min : _ref$ariaValueMin,
     ariaLabel = _ref.ariaLabel,
     disabled = _ref.disabled,
+    orientation = _ref.orientation,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(ThumbBase, _extends({
     role: "slider",
@@ -20,6 +21,6 @@ export var Thumb = function Thumb(_ref) {
     "aria-valuemax": max,
     "aria-valuenow": value,
     disabled: disabled,
-    "aria-orientation": "horizontal"
+    "aria-orientation": orientation
   }, rest));
 };

package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js

@@ -3,8 +3,8 @@ import { addFocus } from '../../../../mixins';
 import { tokens } from '../../Slider.tokens';
 export var ThumbBase = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-13botku-0"
-})(["width:var(", ");height:var(", ");position:relative;left:-0.125rem;top:-0.125rem;border-radius:50%;box-sizing:border-box;background:var(", ");margin:0.125rem;transition:border-color 0.1s ease-in-out;&:after{background:var(", ");margin:-0.125rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}&:not([disabled]):hover:after,&:not([disabled]):active:after{background:var(", ");}&[disabled]{cursor:not-allowed;}&:focus{outline:none;}", ""], tokens.thumbSize, tokens.thumbSize, tokens.thumbBackgroundColor, tokens.thumbBorderColor, tokens.thumbFocusBorderColor, /*#__PURE__*/addFocus({
-  outlineOffset: '0.125rem',
+})(["width:var(--thumb-size);height:var(--thumb-size);min-width:var(--thumb-size);min-height:var(--thumb-size);position:relative;border-radius:50%;box-sizing:border-box;background:var(", ");margin:0.0625rem;transition:border-color 0.1s ease-in-out;&:after{background:var(", ");margin:-0.0625rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}&:not([disabled]):hover:after,&:not([disabled]):active:after{background:var(", ");}&[disabled]{cursor:not-allowed;}&:focus{outline:none;}", ""], tokens.thumbBackgroundColor, tokens.thumbBorderColor, tokens.thumbFocusBorderColor, /*#__PURE__*/addFocus({
+  outlineOffset: '0.0625rem',
   outlineSize: '0.125rem',
   outlineRadius: '50%',
   outlineColor: /*#__PURE__*/"var(".concat(tokens.thumbFocusBorderColor, ")")

package/styled-components/es/components/Slider/utils/index.js

@@ -6,8 +6,8 @@
  * @param {number} max
  * @return {number}
  */
-export function getSliderThumbValue(handleCenterXRelative, stepSize, min, max) {
-  var newValue = Math.round(handleCenterXRelative / stepSize) + min;
+export function getSliderThumbValue(handleCenterPosRelative, stepSize, min, max) {
+  var newValue = Math.round(handleCenterPosRelative / stepSize) + min;
   return Math.min(Math.max(newValue, min), max);
 }
 
@@ -18,11 +18,11 @@ export function getSliderThumbValue(handleCenterXRelative, stepSize, min, max) {
  * @param {'left' | 'right'} side
  * @return Array<number>
  */
-export function getOffsets(ref, side) {
+export function getOffsets(ref, side, isVertical) {
   if (!ref || !('current' in ref) || !ref.current || !side) {
     return [0, 0];
   }
-  var size = ref.current.clientWidth;
+  var size = isVertical ? ref.current.clientHeight : ref.current.clientWidth;
   if (side === 'left') {
     return [0, size];
   }
@@ -33,15 +33,33 @@ export function getOffsets(ref, side) {
 }
 export var sizeData = {
   s: {
-    indent: 0.5,
-    fontSizeMultiplier: 16
+    small: {
+      indent: 0.5,
+      fontSizeMultiplier: 16
+    },
+    large: {
+      indent: 0.625,
+      fontSizeMultiplier: 16
+    }
   },
   m: {
-    indent: 0.75,
-    fontSizeMultiplier: 16
+    small: {
+      indent: 0.5,
+      fontSizeMultiplier: 16
+    },
+    large: {
+      indent: 0.625,
+      fontSizeMultiplier: 16
+    }
   },
   l: {
-    indent: 0.75,
-    fontSizeMultiplier: 16
+    small: {
+      indent: 0.5,
+      fontSizeMultiplier: 16
+    },
+    large: {
+      indent: 0.625,
+      fontSizeMultiplier: 16
+    }
   }
 };

package/styled-components/es/components/Slider/variations/_view/base.js

@@ -1,2 +1,3 @@
 import { css } from 'styled-components';
-export var base = /*#__PURE__*/css([""]);
+import { classes } from '../../Slider.tokens';
+export var base = /*#__PURE__*/css(["&.", "{height:100%;display:inline-flex;}"], classes.verticalOrientation);

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js

@@ -83,7 +83,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       });
       firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
         block: 'nearest',
-        inline: 'start'
+        inline: 'nearest'
       });
     }, [disabled, scrollRef, refs]);
     var onNext = useCallback(function () {
@@ -101,7 +101,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       });
       lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
         block: 'nearest',
-        inline: 'end'
+        inline: 'nearest'
       });
     }, [disabled, scrollRef, refs]);
     var PreviousButton = useMemo(function () {

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js

@@ -76,7 +76,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
         return tabStartY < scrollTop;
       });
       firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
-        block: 'start',
+        block: 'nearest',
         inline: 'nearest'
       });
     }, [disabled, scrollRef, refs]);
@@ -94,7 +94,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
         return tabEndY > scrollBottom;
       });
       lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
-        block: 'end',
+        block: 'nearest',
         inline: 'nearest'
       });
     }, [disabled, scrollRef, refs]);

package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js

@@ -12,9 +12,9 @@ export var config = {
       gradient: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent-gradient);", ":var(--surface-solid-tertiary);", ":var(--surface-accent-gradient);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], sliderTokens.labelColor, sliderTokens.rangeValueColor, sliderTokens.thumbBorderColor, sliderTokens.thumbBackgroundColor, sliderTokens.thumbFocusBorderColor, sliderTokens.railBackgroundColor, sliderTokens.fillColor, sliderTokens.textFieldColor, sliderTokens.textFieldBackgroundColor, sliderTokens.textFieldCaretColor, sliderTokens.textFieldPlaceholderColor, sliderTokens.textFiledFocusColor, sliderTokens.textFieldActiveColor)
     },
     size: {
-      l: /*#__PURE__*/css(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.625rem;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3.5rem;", ":1.25rem 1rem 1.25rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], sliderTokens.height, sliderTokens.doubleWrapperGap, sliderTokens.labelWrapperGap, sliderTokens.labelWrapperMarginBottom, sliderTokens.labelWrapperMarginRight, sliderTokens.labelFontFamily, sliderTokens.labelFontSize, sliderTokens.labelFontStyle, sliderTokens.labelFontWeight, sliderTokens.labelLetterSpacing, sliderTokens.labelLineHeight, sliderTokens.rangeMinValueMargin, sliderTokens.rangeMaxValueMargin, sliderTokens.rangeValueBottomOffset, sliderTokens.rangeValueFontFamily, sliderTokens.rangeValueFontSize, sliderTokens.rangeValueFontStyle, sliderTokens.rangeValueFontWeight, sliderTokens.rangeValueLetterSpacing, sliderTokens.rangeValueLineHeight, sliderTokens.thumbSize, sliderTokens.thumbBorder, sliderTokens.currentValueTopOffset, sliderTokens.currentValueFontFamily, sliderTokens.currentValueFontSize, sliderTokens.currentValueFontStyle, sliderTokens.currentValueFontWeight, sliderTokens.currentValueLetterSpacing, sliderTokens.currentValueLineHeight, sliderTokens.railHeight, sliderTokens.railBorderRadius, sliderTokens.railIndent, sliderTokens.textFieldWrapperGap, sliderTokens.textFieldHeight, sliderTokens.textFieldPadding, sliderTokens.textFieldBorderRadius, sliderTokens.textFieldFontFamily, sliderTokens.textFieldFontSize, sliderTokens.textFieldFontStyle, sliderTokens.textFieldFontWeight, sliderTokens.textFieldLetterSpacing, sliderTokens.textFieldLineHeight),
-      m: /*#__PURE__*/css(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.75rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], sliderTokens.height, sliderTokens.doubleWrapperGap, sliderTokens.labelWrapperGap, sliderTokens.labelWrapperMarginBottom, sliderTokens.labelWrapperMarginRight, sliderTokens.labelFontFamily, sliderTokens.labelFontSize, sliderTokens.labelFontStyle, sliderTokens.labelFontWeight, sliderTokens.labelLetterSpacing, sliderTokens.labelLineHeight, sliderTokens.rangeMinValueMargin, sliderTokens.rangeMaxValueMargin, sliderTokens.rangeValueBottomOffset, sliderTokens.rangeValueFontFamily, sliderTokens.rangeValueFontSize, sliderTokens.rangeValueFontStyle, sliderTokens.rangeValueFontWeight, sliderTokens.rangeValueLetterSpacing, sliderTokens.rangeValueLineHeight, sliderTokens.thumbSize, sliderTokens.thumbBorder, sliderTokens.currentValueTopOffset, sliderTokens.currentValueFontFamily, sliderTokens.currentValueFontSize, sliderTokens.currentValueFontStyle, sliderTokens.currentValueFontWeight, sliderTokens.currentValueLetterSpacing, sliderTokens.currentValueLineHeight, sliderTokens.railHeight, sliderTokens.railBorderRadius, sliderTokens.railIndent, sliderTokens.textFieldWrapperGap, sliderTokens.textFieldHeight, sliderTokens.textFieldPadding, sliderTokens.textFieldBorderRadius, sliderTokens.textFieldFontFamily, sliderTokens.textFieldFontSize, sliderTokens.textFieldFontStyle, sliderTokens.textFieldFontWeight, sliderTokens.textFieldLetterSpacing, sliderTokens.textFieldLineHeight),
-      s: /*#__PURE__*/css(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.5rem;", ":-1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":0.125rem solid;", ":1.25rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":2.5rem;", ":0.5rem 1rem 0.5rem 1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], sliderTokens.height, sliderTokens.doubleWrapperGap, sliderTokens.labelWrapperGap, sliderTokens.labelWrapperMarginBottom, sliderTokens.labelWrapperMarginRight, sliderTokens.labelFontFamily, sliderTokens.labelFontSize, sliderTokens.labelFontStyle, sliderTokens.labelFontWeight, sliderTokens.labelLetterSpacing, sliderTokens.labelLineHeight, sliderTokens.rangeMinValueMargin, sliderTokens.rangeMaxValueMargin, sliderTokens.rangeValueBottomOffset, sliderTokens.rangeValueFontFamily, sliderTokens.rangeValueFontSize, sliderTokens.rangeValueFontStyle, sliderTokens.rangeValueFontWeight, sliderTokens.rangeValueLetterSpacing, sliderTokens.rangeValueLineHeight, sliderTokens.thumbSize, sliderTokens.thumbBorder, sliderTokens.currentValueTopOffset, sliderTokens.currentValueFontFamily, sliderTokens.currentValueFontSize, sliderTokens.currentValueFontStyle, sliderTokens.currentValueFontWeight, sliderTokens.currentValueLetterSpacing, sliderTokens.currentValueLineHeight, sliderTokens.railHeight, sliderTokens.railBorderRadius, sliderTokens.railIndent, sliderTokens.textFieldWrapperGap, sliderTokens.textFieldHeight, sliderTokens.textFieldPadding, sliderTokens.textFieldBorderRadius, sliderTokens.textFieldFontFamily, sliderTokens.textFieldFontSize, sliderTokens.textFieldFontStyle, sliderTokens.textFieldFontWeight, sliderTokens.textFieldLetterSpacing, sliderTokens.textFieldLineHeight)
+      l: /*#__PURE__*/css(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1rem;", ":1.25rem;", ":0.0625rem solid;", ":1.625rem;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3.5rem;", ":1.25rem 1rem 1.25rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], sliderTokens.size, sliderTokens.doubleWrapperGap, sliderTokens.labelWrapperGap, sliderTokens.labelWrapperMarginBottom, sliderTokens.labelWrapperMarginRight, sliderTokens.labelWrapperVerticalMargin, sliderTokens.labelFontFamily, sliderTokens.labelFontSize, sliderTokens.labelFontStyle, sliderTokens.labelFontWeight, sliderTokens.labelLetterSpacing, sliderTokens.labelLineHeight, sliderTokens.rangeValueHorizontalMargin, sliderTokens.rangeValueBottomOffset, sliderTokens.rangeValueLeftRightMargin, sliderTokens.rangeValueVerticalMargin, sliderTokens.rangeValueFontFamily, sliderTokens.rangeValueFontSize, sliderTokens.rangeValueFontStyle, sliderTokens.rangeValueFontWeight, sliderTokens.rangeValueLetterSpacing, sliderTokens.rangeValueLineHeight, sliderTokens.thumbSize, sliderTokens.thumbSizeLarge, sliderTokens.thumbBorder, sliderTokens.currentValueTopOffset, sliderTokens.currentValueFontFamily, sliderTokens.currentValueFontSize, sliderTokens.currentValueFontStyle, sliderTokens.currentValueFontWeight, sliderTokens.currentValueLetterSpacing, sliderTokens.currentValueLineHeight, sliderTokens.railThickness, sliderTokens.railBorderRadius, sliderTokens.railIndent, sliderTokens.textFieldWrapperGap, sliderTokens.textFieldHeight, sliderTokens.textFieldPadding, sliderTokens.textFieldBorderRadius, sliderTokens.textFieldFontFamily, sliderTokens.textFieldFontSize, sliderTokens.textFieldFontStyle, sliderTokens.textFieldFontWeight, sliderTokens.textFieldLetterSpacing, sliderTokens.textFieldLineHeight),
+      m: /*#__PURE__*/css(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1rem;", ":1.25rem;", ":0.0625rem solid;", ":1.75rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], sliderTokens.size, sliderTokens.doubleWrapperGap, sliderTokens.labelWrapperGap, sliderTokens.labelWrapperMarginBottom, sliderTokens.labelWrapperMarginRight, sliderTokens.labelWrapperVerticalMargin, sliderTokens.labelFontFamily, sliderTokens.labelFontSize, sliderTokens.labelFontStyle, sliderTokens.labelFontWeight, sliderTokens.labelLetterSpacing, sliderTokens.labelLineHeight, sliderTokens.rangeValueHorizontalMargin, sliderTokens.rangeValueBottomOffset, sliderTokens.rangeValueLeftRightMargin, sliderTokens.rangeValueVerticalMargin, sliderTokens.rangeValueFontFamily, sliderTokens.rangeValueFontSize, sliderTokens.rangeValueFontStyle, sliderTokens.rangeValueFontWeight, sliderTokens.rangeValueLetterSpacing, sliderTokens.rangeValueLineHeight, sliderTokens.thumbSize, sliderTokens.thumbSizeLarge, sliderTokens.thumbBorder, sliderTokens.currentValueTopOffset, sliderTokens.currentValueFontFamily, sliderTokens.currentValueFontSize, sliderTokens.currentValueFontStyle, sliderTokens.currentValueFontWeight, sliderTokens.currentValueLetterSpacing, sliderTokens.currentValueLineHeight, sliderTokens.railThickness, sliderTokens.railBorderRadius, sliderTokens.railIndent, sliderTokens.textFieldWrapperGap, sliderTokens.textFieldHeight, sliderTokens.textFieldPadding, sliderTokens.textFieldBorderRadius, sliderTokens.textFieldFontFamily, sliderTokens.textFieldFontSize, sliderTokens.textFieldFontStyle, sliderTokens.textFieldFontWeight, sliderTokens.textFieldLetterSpacing, sliderTokens.textFieldLineHeight),
+      s: /*#__PURE__*/css(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.625rem;", ":0.625rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":1.25rem;", ":0.0625rem solid;", ":1.25rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":2.5rem;", ":0.5rem 1rem 0.5rem 1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], sliderTokens.size, sliderTokens.doubleWrapperGap, sliderTokens.labelWrapperGap, sliderTokens.labelWrapperMarginBottom, sliderTokens.labelWrapperMarginRight, sliderTokens.labelWrapperVerticalMargin, sliderTokens.labelFontFamily, sliderTokens.labelFontSize, sliderTokens.labelFontStyle, sliderTokens.labelFontWeight, sliderTokens.labelLetterSpacing, sliderTokens.labelLineHeight, sliderTokens.rangeValueHorizontalMargin, sliderTokens.rangeValueBottomOffset, sliderTokens.rangeValueLeftRightMargin, sliderTokens.rangeValueVerticalMargin, sliderTokens.rangeValueFontFamily, sliderTokens.rangeValueFontSize, sliderTokens.rangeValueFontStyle, sliderTokens.rangeValueFontWeight, sliderTokens.rangeValueLetterSpacing, sliderTokens.rangeValueLineHeight, sliderTokens.thumbSize, sliderTokens.thumbSizeLarge, sliderTokens.thumbBorder, sliderTokens.currentValueTopOffset, sliderTokens.currentValueFontFamily, sliderTokens.currentValueFontSize, sliderTokens.currentValueFontStyle, sliderTokens.currentValueFontWeight, sliderTokens.currentValueLetterSpacing, sliderTokens.currentValueLineHeight, sliderTokens.railThickness, sliderTokens.railBorderRadius, sliderTokens.railIndent, sliderTokens.textFieldWrapperGap, sliderTokens.textFieldHeight, sliderTokens.textFieldPadding, sliderTokens.textFieldBorderRadius, sliderTokens.textFieldFontFamily, sliderTokens.textFieldFontSize, sliderTokens.textFieldFontStyle, sliderTokens.textFieldFontWeight, sliderTokens.textFieldLetterSpacing, sliderTokens.textFieldLineHeight)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], sliderTokens.disabledOpacity)

package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx

@@ -3,16 +3,19 @@ import type { ComponentProps } from 'react';
 import styled from 'styled-components';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
 
+import { IconMic } from '../../../../components/_Icon';
 import { WithTheme } from '../../../_helpers';
 
 import { Slider } from './Slider';
 
 const sizes = ['l', 'm', 's'];
+const pointerSizes = ['small', 'large', 'none'];
 const views = ['default', 'accent', 'gradient'];
-const labelPlacements = ['outer', 'inner'];
-const rangeValuesPlacement = ['outer', 'inner'];
+const sliderAligns = ['center', 'left', 'right', 'none'];
+const labelPlacements = ['top', 'left'];
+const scaleAligns = ['side', 'bottom'];
+const orientations: Array<string> = ['vertical', 'horizontal'];
 
 const meta: Meta<typeof Slider> = {
     title: 'plasma_b2c/Slider',
@@ -31,9 +34,24 @@ const meta: Meta<typeof Slider> = {
                 type: 'inline-radio',
             },
         },
+        pointerSize: {
+            options: pointerSizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        orientation: {
+            options: orientations,
+            control: {
+                type: 'select',
+            },
+        },
         ...disableProps([
             'value',
             'onChangeCommitted',
+            'onChangeTextField',
+            'onBlurTextField',
+            'onKeyDownTextField',
             'ariaLabel',
             'onChange',
             'fontSizeMultiplier',
@@ -53,8 +71,9 @@ type StorySingleProps = StoryProps;
 type StorySingle = StoryObj<StorySingleProps>;
 type StoryDouble = StoryObj<StoryProps>;
 
-const SliderWrapper = styled.div`
-    width: 25rem;
+const SliderWrapper = styled.div<{ isVertical?: boolean }>`
+    width: ${({ isVertical }) => (isVertical ? 'auto' : '25rem')};
+    height: ${({ isVertical }) => (isVertical ? '25rem' : 'auto')};
 `;
 
 const StoryDefault = (args: StorySingleProps) => {
@@ -68,41 +87,86 @@ const StoryDefault = (args: StorySingleProps) => {
         setValue(values);
     };
 
+    const { hasIcon, showIcon, orientation, labelPlacement, labelVerticalPlacement, ...rest } = args;
+    const isVertical = orientation === 'vertical';
+
     return (
-        <SliderWrapper>
-            <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={onChangeHandle} {...args} />
+        <SliderWrapper isVertical={isVertical}>
+            <Slider
+                value={value}
+                orientation={orientation}
+                labelPlacement={labelPlacement}
+                labelContent={showIcon ? <IconMic size={rest.size === 's' ? 'xs' : 's'} /> : null}
+                onChangeCommitted={onChangeCommittedHandle}
+                onChange={onChangeHandle}
+                {...rest}
+            />
         </SliderWrapper>
     );
 };
 
 export const Default: StorySingle = {
     argTypes: {
+        sliderAlign: {
+            options: sliderAligns,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'orientation', eq: 'vertical' },
+        },
         labelPlacement: {
             options: labelPlacements,
             control: {
                 type: 'inline-radio',
             },
+            if: { arg: 'orientation', eq: 'horizontal' },
+        },
+        labelReversed: {
+            control: {
+                type: 'boolean',
+                expanded: true,
+            },
+            if: { arg: 'orientation', eq: 'vertical' },
+        },
+        scaleAlign: {
+            options: scaleAligns,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'orientation', eq: 'horizontal' },
         },
-        rangeValuesPlacement: {
-            options: rangeValuesPlacement,
+        orientation: {
+            options: orientations,
             control: {
                 type: 'inline-radio',
             },
         },
+        reversed: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'orientation', eq: 'vertical' },
+        },
     },
     args: {
         view: 'default',
         size: 'm',
+        pointerSize: 'small',
         min: 0,
         max: 100,
-        disabled: false,
-        ariaLabel: 'Цена товара',
+        orientation: 'horizontal',
+        ariaLabel: 'Цена микрофона',
         multipleStepSize: 10,
-        label: 'Цена товара',
-        labelPlacement: 'outer',
-        rangeValuesPlacement: 'outer',
-        showRangeValues: true,
+        label: 'Цена микрофона',
+        labelPlacement: 'top',
+        sliderAlign: 'center',
+        scaleAlign: 'bottom',
+        showScale: true,
         showCurrentValue: false,
+        showIcon: true,
+        reversed: false,
+        labelReversed: false,
+        disabled: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -142,7 +206,7 @@ const StoryMultipleValues = (args: StoryProps) => {
     };
 
     return (
-        <SliderWrapper>
+        <SliderWrapper isVertical={args.orientation === 'vertical'}>
             <Slider
                 value={value}
                 onKeyDownTextField={onKeyDownTextField}
@@ -159,6 +223,7 @@ export const MultipleValues: StoryDouble = {
     args: {
         view: 'default',
         size: 'm',
+        pointerSize: 'small',
         min: 0,
         max: 100,
         disabled: false,
@@ -166,5 +231,14 @@ export const MultipleValues: StoryDouble = {
         ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
         multipleStepSize: 10,
     },
+    argTypes: {
+        pointerSize: {
+            options: ['small', 'large'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ...disableProps(['orientation']),
+    },
     render: (args) => <StoryMultipleValues {...args} />,
 };