@salutejs/plasma-new-hope 0.84.2-canary.1217.9256888978.0 → 0.85.0-canary.1208.9252417590.0

package/styled-components/es/components/Range/variations/_size/tokens.json

@@ -0,0 +1,26 @@
+[
+    "--plasma-range-border-radius",
+    "--plasma-range__left-content-margin",
+    "--plasma-range__right-content-margin",
+    "--plasma-range__label-offset",
+    "--plasma-range__label-font-family",
+    "--plasma-range__label-font-style",
+    "--plasma-range__label-font-size",
+    "--plasma-range__label-font-weight",
+    "--plasma-range__label-letter-spacing",
+    "--plasma-range__label-line-height",
+    "--plasma-range__left-helper-offset",
+    "--plasma-range__left-helper-font-family",
+    "--plasma-range__left-helper-font-style",
+    "--plasma-range__left-helper-font-size",
+    "--plasma-range__left-helper-font-weight",
+    "--plasma-range__left-helper-letter-spacing",
+    "--plasma-range__left-helper-line-height",
+    "--plasma-range__divider-padding",
+    "--plasma-range__divider-font-family",
+    "--plasma-range__divider-font-style",
+    "--plasma-range__divider-font-size",
+    "--plasma-range__divider-font-weight",
+    "--plasma-range__divider-letter-spacing",
+    "--plasma-range__divider-line-height"
+]

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

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../Range.tokens';
+import { StyledLabel, LeftHelper, StyledDivider, ContentWrapper } from '../../Range.styles';
+export var base = /*#__PURE__*/css(["", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");&.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}", "{color:var(", ");}", "{display:block;color:var(", ");}", "{color:var(", ");}"], ContentWrapper, tokens.background, tokens.borderWidth, tokens.borderColor, classes.rangeError, tokens.backgroundError, tokens.borderWidth, tokens.borderColorError, classes.rangeSuccess, tokens.backgroundSuccess, tokens.borderWidth, tokens.borderColorSuccess, StyledDivider, tokens.dividerColor, StyledLabel, tokens.labelColor, LeftHelper, tokens.leftHelperColor);

package/styled-components/es/components/Range/variations/_view/tokens.json

@@ -0,0 +1,6 @@
+[
+    "--plasma-range-background",
+    "--plasma-range__label-color",
+    "--plasma-range__left-helper-color",
+    "--plasma-range__divider-color"
+]

package/styled-components/es/components/TextField/TextField.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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."); }
@@ -17,7 +17,7 @@ import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as readOnlyCSS } from './variations/_read-only/base';
 import { base as labelPlacementCSS } from './variations/_label-placement/base';
-import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips } from './TextField.styles';
+import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter } from './TextField.styles';
 import { classes } from './TextField.tokens';
 import { TextFieldChip } from './ui';
 import { useKeyNavigation } from './hooks';
@@ -31,6 +31,8 @@ export var textFieldRoot = function textFieldRoot(Root) {
       contentRight = _ref.contentRight,
       label = _ref.label,
       labelPlacement = _ref.labelPlacement,
+      textBefore = _ref.textBefore,
+      textAfter = _ref.textAfter,
       placeholder = _ref.placeholder,
       leftHelper = _ref.leftHelper,
       _ref$enumerationType = _ref.enumerationType,
@@ -111,14 +113,12 @@ export var textFieldRoot = function textFieldRoot(Root) {
       if (readOnly || disabled || !(inputRef !== null && inputRef !== void 0 && inputRef.current)) {
         return;
       }
-      inputRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'center'
-      });
-      inputRef.current.focus({
-        preventScroll: true
+      inputRef.current.scrollTo({
+        top: 0,
+        left: inputRef.current.offsetLeft,
+        behavior: 'smooth'
       });
+      inputRef.current.focus();
     };
     var getRef = function getRef(element, index) {
       if (element && chipsRefs !== null && chipsRefs !== void 0 && chipsRefs.current) {
@@ -160,7 +160,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
       ref: contentRef,
       onKeyDown: handleContentKeyDown,
       className: withHasChips
-    }, isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/React.createElement(StyledChips, null, chips === null || chips === void 0 ? void 0 : chips.map(function (_ref2, index) {
+    }, textBefore && /*#__PURE__*/React.createElement(StyledTextBefore, null, textBefore), isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/React.createElement(StyledChips, null, chips === null || chips === void 0 ? void 0 : chips.map(function (_ref2, index) {
       var chipId = _ref2.id,
         text = _ref2.text;
       return /*#__PURE__*/React.createElement(TextFieldChip, {
@@ -194,7 +194,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
     })), labelInside && /*#__PURE__*/React.createElement(Label, {
       id: labelId,
       htmlFor: innerId
-    }, innerLabelValue)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
+    }, innerLabelValue), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
       id: helperTextId
     }, leftHelper));
   });

package/styled-components/es/components/TextField/TextField.styles.js

@@ -23,4 +23,10 @@ export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
 })(["margin:var(", ");"], tokens.rightContentMargin);
 export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-7"
+})([""]);
+export var StyledTextBefore = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-8"
+})([""]);
+export var StyledTextAfter = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-9"
 })([""]);

package/styled-components/es/components/TextField/TextField.tokens.js

@@ -62,6 +62,11 @@ export var tokens = {
   leftHelperFontWeight: '--plasma-textfield__left-helper-font-weight',
   leftHelperLetterSpacing: '--plasma-textfield__left-helper-letter-spacing',
   leftHelperLineHeight: '--plasma-textfield__left-helper-line-height',
+  /** Токены вспомогательного текста */
+  textBeforeColor: '--plasma-textfield__before-text-color',
+  textAfterColor: '--plasma-textfield__after-text-color',
+  textBeforeMargin: '--plasma-textfield__before-text-margin',
+  textAfterMargin: '--plasma-textfield__after-text-margin',
   /** Прозрачность для всего компонента в состоянии disabled */
   disabledOpacity: '--plasma-textfield-disabled-opacity',
   /** Токены чипа */

package/styled-components/es/components/TextField/variations/_label-placement/inner.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
-import { Input, Label } from '../../TextField.styles';
+import { Input, Label, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
 import { tokens } from '../../TextField.tokens';
-export var labelPlacement_inner = /*#__PURE__*/css(["", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], Input, tokens.contentLabelInnerPadding, Input, Label, Input, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Input, Input, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.height);
+export var labelPlacement_inner = /*#__PURE__*/css(["", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], Input, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Input, Input, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.height);

package/styled-components/es/components/TextField/variations/_size/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../TextField.tokens';
-import { Input, InputWrapper, Label, LeftHelper } from '../../TextField.styles';
-export var base = /*#__PURE__*/css(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], Input, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);
+import { Input, InputWrapper, Label, LeftHelper, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");}"], Input, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, StyledTextBefore, StyledTextAfter, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, StyledTextBefore, tokens.textBeforeMargin, StyledTextAfter, tokens.textAfterMargin);

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../../TextField.tokens';
-import { Input, InputWrapper, LeftHelper } from '../../TextField.styles';
-export var base = /*#__PURE__*/css(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], InputWrapper, /*#__PURE__*/String(tokens.borderColor), /*#__PURE__*/String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.caretColor, InputWrapper, tokens.borderColorHover, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorHover, /*#__PURE__*/String(tokens.backgroundColor), InputWrapper, tokens.borderColorFocus, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorFocus, /*#__PURE__*/String(tokens.backgroundColor), Input, tokens.placeholderColor, Input, tokens.color, LeftHelper, tokens.leftHelperColor);
+import { Input, InputWrapper, LeftHelper, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], InputWrapper, /*#__PURE__*/String(tokens.borderColor), /*#__PURE__*/String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.caretColor, InputWrapper, tokens.borderColorHover, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorHover, /*#__PURE__*/String(tokens.backgroundColor), InputWrapper, tokens.borderColorFocus, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorFocus, /*#__PURE__*/String(tokens.backgroundColor), Input, tokens.placeholderColor, Input, tokens.color, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor);

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

@@ -0,0 +1,25 @@
+import { css } from 'styled-components';
+import { rangeTokens as tokens } from '../../../../components/Range';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":0.875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0.375rem 0 1rem;", ":0;", ":0 0 0.75rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":0.875rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin),
+      m: /*#__PURE__*/css(["", ":0.75rem;", ":0 0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0 0.375rem 0 0.875rem;", ":0;", ":0 0 0.625rem 0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":3rem;", ":0.75rem;", ":0.875rem 1rem 0.875rem 1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin),
+      s: /*#__PURE__*/css(["", ":0.625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0 0.375rem 0 0.75rem;", ":0;", ":0 0 0.5rem 0;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":2.5rem;", ":0.625rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin),
+      xs: /*#__PURE__*/css(["", ":0.5rem;", ":0 0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0 0.25rem 0 0.5rem;", ":0;", ":0 0 0.375rem 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":2rem;", ":0.5rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
+    },
+    readOnly: {
+      "true": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
+    }
+  }
+};

package/styled-components/es/examples/plasma_b2c/components/Range/Range.js

@@ -0,0 +1,5 @@
+import { component, mergeConfig } from '../../../../engines';
+import { rangeConfig } from '../../../../components/Range';
+import { config } from './Range.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(rangeConfig, config);
+export var Range = /*#__PURE__*/component(mergedConfig);

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

@@ -0,0 +1,312 @@
+import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+import { IconChevronLeft } from '../../../../components/_Icon';
+import { IconButton } from '../IconButton/IconButton';
+
+import { Range } from './Range';
+
+const onChangeFirstValue = action('onChangeFirstValue');
+const onChangeSecondValue = action('onChangeSecondValue');
+const onSearchFirstValue = action('onSearchFirstValue');
+const onSearchSecondValue = action('onSearchSecondValue');
+const onFocusFirstTextfield = action('onFocusFirstTextfield');
+const onFocusSecondTextfield = action('onFocusSecondTextfield');
+const onBlurFirstTextfield = action('onBlurFirstTextfield');
+const onBlurSecondTextfield = action('onBlurSecondTextfield');
+
+const sizes = ['l', 'm', 's', 'xs'];
+const views = ['default'];
+const dividers = ['none', 'dash', 'icon'];
+
+const meta: Meta<typeof Range> = {
+    title: 'plasma_b2c/Range',
+    component: Range,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof Range> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+    enableFirstTextfieldContentLeft: boolean;
+    enableSecondTextfieldContentLeft: boolean;
+    enableFirstTextfieldContentRight: boolean;
+    enableSecondTextfieldContentRight: boolean;
+};
+
+const getSizeForIcon = (size) => {
+    const map = {
+        m: 's',
+        l: 's',
+        s: 's',
+        xs: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
+    }
+
+    return size;
+};
+
+const ActionButton = ({ size }) => {
+    return (
+        <IconButton view="clear" size={size}>
+            <IconChevronLeft color="inherit" size={getSizeForIcon(size)} />
+        </IconButton>
+    );
+};
+
+const StoryDefault = ({
+    dividerVariant,
+    enableContentLeft,
+    enableContentRight,
+    firstTextfieldTextBefore,
+    secondTextfieldTextBefore,
+    enableFirstTextfieldContentLeft,
+    enableSecondTextfieldContentLeft,
+    enableFirstTextfieldContentRight,
+    enableSecondTextfieldContentRight,
+    size,
+    ...rest
+}: StoryPropsDefault) => {
+    const [firstValue, setFirstValue] = useState('');
+    const [secondValue, setSecondValue] = useState('');
+
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    const showDividerIcon = dividerVariant === 'icon';
+    const showDefaultTextBefore = dividerVariant === 'none';
+
+    const dividerIconProps = {
+        dividerIcon: showDividerIcon ? <IconPlaceholder size="s" /> : null,
+        dividerVariant,
+    };
+
+    return (
+        <Range
+            size={size}
+            firstValue={firstValue}
+            secondValue={secondValue}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
+            firstTextfieldContentLeft={
+                enableFirstTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
+            }
+            firstTextfieldContentRight={
+                enableFirstTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
+            }
+            secondTextfieldContentLeft={
+                enableSecondTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
+            }
+            secondTextfieldContentRight={
+                enableSecondTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
+            }
+            firstTextfieldTextBefore={
+                showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore
+            }
+            secondTextfieldTextBefore={
+                showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
+            }
+            onChangeFirstValue={(e) => {
+                setFirstValue(e.target.value);
+                onChangeFirstValue(e, e.target.value);
+            }}
+            onChangeSecondValue={(e) => {
+                setSecondValue(e.target.value);
+                onChangeSecondValue(e, e.target.value);
+            }}
+            onSearchFirstValue={onSearchFirstValue}
+            onSearchSecondValue={onSearchSecondValue}
+            onFocusFirstTextfield={onFocusFirstTextfield}
+            onFocusSecondTextfield={onFocusSecondTextfield}
+            onBlurFirstTextfield={onBlurFirstTextfield}
+            onBlurSecondTextfield={onBlurSecondTextfield}
+            {...dividerIconProps}
+            {...rest}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    argTypes: {
+        dividerVariant: {
+            options: dividers,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    args: {
+        label: 'Лейбл',
+        leftHelper: 'Подсказка к полю',
+        firstPlaceholder: 'Заполните поле 1',
+        secondPlaceholder: 'Заполните поле 2',
+        size: 'l',
+        view: 'default',
+        disabled: false,
+        readOnly: false,
+        firstTextfieldTextBefore: 'С',
+        secondTextfieldTextBefore: 'ПО',
+        enableContentLeft: true,
+        enableContentRight: true,
+        dividerVariant: 'dash',
+        enableFirstTextfieldContentLeft: false,
+        enableFirstTextfieldContentRight: false,
+        enableSecondTextfieldContentLeft: false,
+        enableSecondTextfieldContentRight: false,
+        firstValueError: false,
+        secondValueError: false,
+        firstValueSuccess: false,
+        secondValueSuccess: false,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryDemo = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
+    const [firstValue, setFirstValue] = useState('');
+    const [secondValue, setSecondValue] = useState('');
+
+    const [firstValueError, setFirstValueError] = useState(false);
+    const [secondValueError, setSecondValueError] = useState(false);
+
+    const [firstValueSuccess, setFirstValueSuccess] = useState(false);
+    const [secondValueSuccess, setSecondValueSuccess] = useState(false);
+
+    const checkValue = (value: string) => /^([1-9][0-9]*|)$/.test(value);
+
+    const handleChangeValue = (
+        e: ChangeEvent<HTMLInputElement>,
+        setter: Dispatch<SetStateAction<string>>,
+        error: boolean,
+        errorSetter: Dispatch<SetStateAction<boolean>>,
+        success: boolean,
+        successSetter: Dispatch<SetStateAction<boolean>>,
+    ) => {
+        const { value } = e.target;
+        if (!checkValue(value)) {
+            return;
+        }
+
+        if (error) {
+            errorSetter(false);
+        }
+
+        if (success) {
+            successSetter(false);
+        }
+
+        setter(value);
+    };
+
+    const firstValueConstraint = (value: number) =>
+        value <= 0 || value >= 9 || (secondValue && value >= Number(secondValue) && !secondValueError);
+    const secondValueConstraint = (value: number) =>
+        value <= 0 || value > 10 || (firstValue && value <= Number(firstValue) && !firstValueError);
+
+    const handleCommitValue = (
+        value: string,
+        constraint: (currentValue: number) => boolean,
+        errorSetter: Dispatch<SetStateAction<boolean>>,
+        successSetter: Dispatch<SetStateAction<boolean>>,
+    ) => {
+        if (!value) {
+            return;
+        }
+
+        if (!checkValue(value)) {
+            return errorSetter(true);
+        }
+
+        if (constraint(Number(value))) {
+            return errorSetter(true);
+        }
+
+        successSetter(true);
+    };
+
+    const iconSize = size === 'xs' ? 'xs' : 's';
+
+    return (
+        <Range
+            dividerVariant="dash"
+            size={size}
+            firstValue={firstValue}
+            secondValue={secondValue}
+            firstValueError={firstValueError}
+            secondValueError={secondValueError}
+            firstValueSuccess={firstValueSuccess}
+            secondValueSuccess={secondValueSuccess}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
+            onChangeFirstValue={(e) => {
+                handleChangeValue(
+                    e,
+                    setFirstValue,
+                    firstValueError,
+                    setFirstValueError,
+                    firstValueSuccess,
+                    setFirstValueSuccess,
+                );
+            }}
+            onChangeSecondValue={(e) => {
+                handleChangeValue(
+                    e,
+                    setSecondValue,
+                    secondValueError,
+                    setSecondValueError,
+                    secondValueSuccess,
+                    setSecondValueSuccess,
+                );
+            }}
+            onSearchFirstValue={(e) => {
+                const { value } = e.target as HTMLInputElement;
+                handleCommitValue(value, firstValueConstraint, setFirstValueError, setFirstValueSuccess);
+            }}
+            onSearchSecondValue={(e) => {
+                const { value } = e.target as HTMLInputElement;
+                handleCommitValue(value, secondValueConstraint, setSecondValueError, setSecondValueSuccess);
+            }}
+            onFocusFirstTextfield={onFocusFirstTextfield}
+            onFocusSecondTextfield={onFocusSecondTextfield}
+            onBlurFirstTextfield={onBlurFirstTextfield}
+            onBlurSecondTextfield={onBlurSecondTextfield}
+            {...rest}
+        />
+    );
+};
+
+export const Demo: StoryObj<StoryPropsDefault> = {
+    args: {
+        label: 'Введите кол-во товара',
+        leftHelper: 'Кол-во товара не может быть меньше 1 и превышать 10',
+        firstPlaceholder: '1',
+        secondPlaceholder: '5',
+        size: 'l',
+        view: 'default',
+        disabled: false,
+        readOnly: false,
+        firstTextfieldTextBefore: '',
+        secondTextfieldTextBefore: '',
+        enableContentLeft: true,
+        enableContentRight: true,
+    },
+    render: (args) => <StoryDemo {...args} />,
+};