@salutejs/plasma-new-hope 0.83.0-dev.0 → 0.84.0-canary.1208.9187471531.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (192) hide show
  1. package/cjs/components/Range/Range.css +63 -0
  2. package/cjs/components/Range/Range.js +146 -0
  3. package/cjs/components/Range/Range.js.map +1 -0
  4. package/cjs/components/Range/Range.styles.js +63 -0
  5. package/cjs/components/Range/Range.styles.js.map +1 -0
  6. package/cjs/components/Range/Range.styles_mc4w65.css +8 -0
  7. package/cjs/components/Range/Range.tokens.js +106 -0
  8. package/cjs/components/Range/Range.tokens.js.map +1 -0
  9. package/cjs/components/Range/utils/index.js +24 -0
  10. package/cjs/components/Range/utils/index.js.map +1 -0
  11. package/cjs/components/Range/variations/_disabled/base.js +9 -0
  12. package/cjs/components/Range/variations/_disabled/base.js.map +1 -0
  13. package/cjs/components/Range/variations/_disabled/base_1ufizo4.css +1 -0
  14. package/cjs/components/Range/variations/_readonly/base.js +9 -0
  15. package/cjs/components/Range/variations/_readonly/base.js.map +1 -0
  16. package/cjs/components/Range/variations/_readonly/base_tzdxy8.css +1 -0
  17. package/cjs/components/Range/variations/_size/base.js +9 -0
  18. package/cjs/components/Range/variations/_size/base.js.map +1 -0
  19. package/cjs/components/Range/variations/_size/base_16xiubi.css +1 -0
  20. package/cjs/components/Range/variations/_view/base.js +9 -0
  21. package/cjs/components/Range/variations/_view/base.js.map +1 -0
  22. package/cjs/components/Range/variations/_view/base_5iz3nr.css +1 -0
  23. package/cjs/components/TextField/TextField.js +10 -4
  24. package/cjs/components/TextField/TextField.js.map +1 -1
  25. package/cjs/components/TextField/TextField.styles.js +13 -1
  26. package/cjs/components/TextField/TextField.styles.js.map +1 -1
  27. package/cjs/components/TextField/{TextField.styles_1b1mddp.css → TextField.styles_aqmut.css} +2 -0
  28. package/cjs/components/TextField/TextField.tokens.js +5 -0
  29. package/cjs/components/TextField/TextField.tokens.js.map +1 -1
  30. package/cjs/components/TextField/variations/_label-placement/inner.js +1 -1
  31. package/cjs/components/TextField/variations/_label-placement/inner.js.map +1 -1
  32. package/cjs/components/TextField/variations/_label-placement/inner_7c08qb.css +1 -0
  33. package/cjs/components/TextField/variations/_size/base.js +1 -1
  34. package/cjs/components/TextField/variations/_size/base.js.map +1 -1
  35. package/{es/components/TextField/variations/_size/base_1khzr9t.css → cjs/components/TextField/variations/_size/base_ntoddv.css} +1 -1
  36. package/cjs/components/TextField/variations/_view/base.js +1 -1
  37. package/cjs/components/TextField/variations/_view/base.js.map +1 -1
  38. package/{es/components/TextField/variations/_view/base_1qd77x6.css → cjs/components/TextField/variations/_view/base_19gxyva.css} +1 -1
  39. package/cjs/index.css +28 -9
  40. package/cjs/index.js +5 -0
  41. package/cjs/index.js.map +1 -1
  42. package/es/components/Range/Range.css +63 -0
  43. package/es/components/Range/Range.js +141 -0
  44. package/es/components/Range/Range.js.map +1 -0
  45. package/es/components/Range/Range.styles.js +52 -0
  46. package/es/components/Range/Range.styles.js.map +1 -0
  47. package/es/components/Range/Range.styles_mc4w65.css +8 -0
  48. package/es/components/Range/Range.tokens.js +101 -0
  49. package/es/components/Range/Range.tokens.js.map +1 -0
  50. package/es/components/Range/utils/index.js +19 -0
  51. package/es/components/Range/utils/index.js.map +1 -0
  52. package/es/components/Range/variations/_disabled/base.js +5 -0
  53. package/es/components/Range/variations/_disabled/base.js.map +1 -0
  54. package/es/components/Range/variations/_disabled/base_1ufizo4.css +1 -0
  55. package/es/components/Range/variations/_readonly/base.js +5 -0
  56. package/es/components/Range/variations/_readonly/base.js.map +1 -0
  57. package/es/components/Range/variations/_readonly/base_tzdxy8.css +1 -0
  58. package/es/components/Range/variations/_size/base.js +5 -0
  59. package/es/components/Range/variations/_size/base.js.map +1 -0
  60. package/es/components/Range/variations/_size/base_16xiubi.css +1 -0
  61. package/es/components/Range/variations/_view/base.js +5 -0
  62. package/es/components/Range/variations/_view/base.js.map +1 -0
  63. package/es/components/Range/variations/_view/base_5iz3nr.css +1 -0
  64. package/es/components/TextField/TextField.js +11 -5
  65. package/es/components/TextField/TextField.js.map +1 -1
  66. package/es/components/TextField/TextField.styles.js +12 -2
  67. package/es/components/TextField/TextField.styles.js.map +1 -1
  68. package/es/components/TextField/{TextField.styles_1b1mddp.css → TextField.styles_aqmut.css} +2 -0
  69. package/es/components/TextField/TextField.tokens.js +5 -0
  70. package/es/components/TextField/TextField.tokens.js.map +1 -1
  71. package/es/components/TextField/variations/_label-placement/inner.js +1 -1
  72. package/es/components/TextField/variations/_label-placement/inner.js.map +1 -1
  73. package/es/components/TextField/variations/_label-placement/inner_7c08qb.css +1 -0
  74. package/es/components/TextField/variations/_size/base.js +1 -1
  75. package/es/components/TextField/variations/_size/base.js.map +1 -1
  76. package/{cjs/components/TextField/variations/_size/base_1khzr9t.css → es/components/TextField/variations/_size/base_ntoddv.css} +1 -1
  77. package/es/components/TextField/variations/_view/base.js +1 -1
  78. package/es/components/TextField/variations/_view/base.js.map +1 -1
  79. package/{cjs/components/TextField/variations/_view/base_1qd77x6.css → es/components/TextField/variations/_view/base_19gxyva.css} +1 -1
  80. package/es/index.css +28 -9
  81. package/es/index.js +2 -0
  82. package/es/index.js.map +1 -1
  83. package/package.json +2 -2
  84. package/styled-components/cjs/components/Range/Range.js +148 -0
  85. package/styled-components/cjs/components/Range/Range.styles.js +39 -0
  86. package/styled-components/cjs/components/Range/Range.template-doc.mdx +323 -0
  87. package/styled-components/cjs/components/Range/Range.tokens.js +104 -0
  88. package/styled-components/cjs/components/Range/Range.types.js +5 -0
  89. package/styled-components/cjs/components/Range/index.js +25 -0
  90. package/styled-components/cjs/components/Range/utils/index.js +22 -0
  91. package/styled-components/cjs/components/Range/variations/_disabled/base.js +9 -0
  92. package/styled-components/cjs/components/Range/variations/_disabled/tokens.json +4 -0
  93. package/styled-components/cjs/components/Range/variations/_readonly/base.js +10 -0
  94. package/styled-components/cjs/components/Range/variations/_readonly/tokens.json +4 -0
  95. package/styled-components/cjs/components/Range/variations/_size/base.js +10 -0
  96. package/styled-components/cjs/components/Range/variations/_size/tokens.json +26 -0
  97. package/styled-components/cjs/components/Range/variations/_view/base.js +10 -0
  98. package/styled-components/cjs/components/Range/variations/_view/tokens.json +6 -0
  99. package/styled-components/cjs/components/TextField/TextField.js +10 -4
  100. package/styled-components/cjs/components/TextField/TextField.styles.js +7 -1
  101. package/styled-components/cjs/components/TextField/TextField.tokens.js +5 -0
  102. package/styled-components/cjs/components/TextField/variations/_label-placement/inner.js +1 -1
  103. package/styled-components/cjs/components/TextField/variations/_size/base.js +1 -1
  104. package/styled-components/cjs/components/TextField/variations/_view/base.js +1 -1
  105. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.config.js +31 -0
  106. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.js +11 -0
  107. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.stories.tsx +312 -0
  108. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
  109. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -0
  110. package/styled-components/cjs/examples/plasma_web/components/Range/Range.config.js +31 -0
  111. package/styled-components/cjs/examples/plasma_web/components/Range/Range.js +11 -0
  112. package/styled-components/cjs/examples/plasma_web/components/Range/Range.stories.tsx +312 -0
  113. package/styled-components/cjs/index.js +11 -0
  114. package/styled-components/es/components/Range/Range.js +139 -0
  115. package/styled-components/es/components/Range/Range.styles.js +31 -0
  116. package/styled-components/es/components/Range/Range.template-doc.mdx +323 -0
  117. package/styled-components/es/components/Range/Range.tokens.js +98 -0
  118. package/styled-components/es/components/Range/Range.types.js +1 -0
  119. package/styled-components/es/components/Range/index.js +2 -0
  120. package/styled-components/es/components/Range/utils/index.js +16 -0
  121. package/styled-components/es/components/Range/variations/_disabled/base.js +3 -0
  122. package/styled-components/es/components/Range/variations/_disabled/tokens.json +4 -0
  123. package/styled-components/es/components/Range/variations/_readonly/base.js +4 -0
  124. package/styled-components/es/components/Range/variations/_readonly/tokens.json +4 -0
  125. package/styled-components/es/components/Range/variations/_size/base.js +4 -0
  126. package/styled-components/es/components/Range/variations/_size/tokens.json +26 -0
  127. package/styled-components/es/components/Range/variations/_view/base.js +4 -0
  128. package/styled-components/es/components/Range/variations/_view/tokens.json +6 -0
  129. package/styled-components/es/components/TextField/TextField.js +11 -5
  130. package/styled-components/es/components/TextField/TextField.styles.js +6 -0
  131. package/styled-components/es/components/TextField/TextField.tokens.js +5 -0
  132. package/styled-components/es/components/TextField/variations/_label-placement/inner.js +2 -2
  133. package/styled-components/es/components/TextField/variations/_size/base.js +2 -2
  134. package/styled-components/es/components/TextField/variations/_view/base.js +2 -2
  135. package/styled-components/es/examples/plasma_b2c/components/Range/Range.config.js +25 -0
  136. package/styled-components/es/examples/plasma_b2c/components/Range/Range.js +5 -0
  137. package/styled-components/es/examples/plasma_b2c/components/Range/Range.stories.tsx +312 -0
  138. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
  139. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -0
  140. package/styled-components/es/examples/plasma_web/components/Range/Range.config.js +25 -0
  141. package/styled-components/es/examples/plasma_web/components/Range/Range.js +5 -0
  142. package/styled-components/es/examples/plasma_web/components/Range/Range.stories.tsx +312 -0
  143. package/styled-components/es/index.js +2 -1
  144. package/types/components/Range/Range.d.ts +31 -0
  145. package/types/components/Range/Range.d.ts.map +1 -0
  146. package/types/components/Range/Range.styles.d.ts +48 -0
  147. package/types/components/Range/Range.styles.d.ts.map +1 -0
  148. package/types/components/Range/Range.tokens.d.ts +99 -0
  149. package/types/components/Range/Range.tokens.d.ts.map +1 -0
  150. package/types/components/Range/Range.types.d.ts +143 -0
  151. package/types/components/Range/Range.types.d.ts.map +1 -0
  152. package/types/components/Range/index.d.ts +4 -0
  153. package/types/components/Range/index.d.ts.map +1 -0
  154. package/types/components/Range/utils/index.d.ts +5 -0
  155. package/types/components/Range/utils/index.d.ts.map +1 -0
  156. package/types/components/Range/variations/_disabled/base.d.ts +2 -0
  157. package/types/components/Range/variations/_disabled/base.d.ts.map +1 -0
  158. package/types/components/Range/variations/_readonly/base.d.ts +2 -0
  159. package/types/components/Range/variations/_readonly/base.d.ts.map +1 -0
  160. package/types/components/Range/variations/_size/base.d.ts +2 -0
  161. package/types/components/Range/variations/_size/base.d.ts.map +1 -0
  162. package/types/components/Range/variations/_view/base.d.ts +2 -0
  163. package/types/components/Range/variations/_view/base.d.ts.map +1 -0
  164. package/types/components/TextField/TextField.d.ts.map +1 -1
  165. package/types/components/TextField/TextField.styles.d.ts +2 -0
  166. package/types/components/TextField/TextField.styles.d.ts.map +1 -1
  167. package/types/components/TextField/TextField.tokens.d.ts +5 -0
  168. package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
  169. package/types/components/TextField/TextField.types.d.ts +8 -0
  170. package/types/components/TextField/TextField.types.d.ts.map +1 -1
  171. package/types/components/TextField/variations/_label-placement/inner.d.ts.map +1 -1
  172. package/types/components/TextField/variations/_size/base.d.ts.map +1 -1
  173. package/types/components/TextField/variations/_view/base.d.ts.map +1 -1
  174. package/types/examples/plasma_b2c/components/Range/Range.config.d.ts +24 -0
  175. package/types/examples/plasma_b2c/components/Range/Range.config.d.ts.map +1 -0
  176. package/types/examples/plasma_b2c/components/Range/Range.d.ts +127 -0
  177. package/types/examples/plasma_b2c/components/Range/Range.d.ts.map +1 -0
  178. package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts.map +1 -1
  179. package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +4 -0
  180. package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
  181. package/types/examples/plasma_web/components/Range/Range.config.d.ts +24 -0
  182. package/types/examples/plasma_web/components/Range/Range.config.d.ts.map +1 -0
  183. package/types/examples/plasma_web/components/Range/Range.d.ts +127 -0
  184. package/types/examples/plasma_web/components/Range/Range.d.ts.map +1 -0
  185. package/types/examples/plasma_web/components/TextField/TextField.d.ts +4 -0
  186. package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
  187. package/types/examples/sds_engineer/components/TextField/TextField.d.ts +4 -0
  188. package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +1 -1
  189. package/types/index.d.ts +1 -0
  190. package/types/index.d.ts.map +1 -1
  191. package/cjs/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
  192. package/es/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getSearchHandler = exports.getChangeHandler = void 0;
7
+ var getChangeHandler = exports.getChangeHandler = function getChangeHandler(changeHandler, disabled, readOnly) {
8
+ return function (event) {
9
+ if (disabled || readOnly) {
10
+ return;
11
+ }
12
+ changeHandler === null || changeHandler === void 0 || changeHandler(event, event.target.value);
13
+ };
14
+ };
15
+ var getSearchHandler = exports.getSearchHandler = function getSearchHandler(searchHandler, disabled, readOnly) {
16
+ return function (value, event) {
17
+ if (disabled || readOnly) {
18
+ return;
19
+ }
20
+ searchHandler === null || searchHandler === void 0 || searchHandler(event, value);
21
+ };
22
+ };
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _Range = /*#__PURE__*/require("../../Range.tokens");
9
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[disabled]{opacity:var(", ");cursor:not-allowed;}"], _Range.tokens.disabledOpacity);
@@ -0,0 +1,4 @@
1
+ {
2
+ "type": "boolean",
3
+ "tokens": ["--plasma-range-disabled-opacity"]
4
+ }
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _Range = /*#__PURE__*/require("../../Range.tokens");
9
+ var _Range2 = /*#__PURE__*/require("../../Range.styles");
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[readonly]{cursor:default;", "{background:var(", ");}", "{display:block;color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", ",", "{color:var(", ");}}"], _Range2.ContentWrapper, _Range.tokens.backgroundReadOnly, _Range2.StyledLabel, _Range.tokens.labelColorReadOnly, _Range2.LeftHelper, _Range.tokens.leftHelperColorReadOnly, _Range2.StyledDivider, _Range.tokens.dividerColorReadOnly, _Range2.StyledContentLeft, _Range2.StyledContentRight, _Range.tokens.textFieldColorReadOnly);
@@ -0,0 +1,4 @@
1
+ {
2
+ "type": "boolean",
3
+ "tokens": ["--plasma-range-background-read-only"]
4
+ }
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _Range = /*#__PURE__*/require("../../Range.tokens");
9
+ var _Range2 = /*#__PURE__*/require("../../Range.styles");
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{width:inherit;border-radius:var(", ");}", "{padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], _Range2.ContentWrapper, _Range.tokens.borderRadius, _Range2.StyledDivider, _Range.tokens.dividerPadding, _Range.tokens.dividerFontFamily, _Range.tokens.dividerFontSize, _Range.tokens.dividerFontStyle, _Range.tokens.dividerFontWeight, _Range.tokens.dividerLetterSpacing, _Range.tokens.dividerLineHeight, _Range2.StyledLabel, _Range.tokens.labelOffset, _Range.tokens.labelFontFamily, _Range.tokens.labelFontSize, _Range.tokens.labelFontStyle, _Range.tokens.labelFontWeight, _Range.tokens.labelLetterSpacing, _Range.tokens.labelLineHeight, _Range2.StyledContentLeft, _Range.tokens.leftContentMargin, _Range2.StyledContentRight, _Range.tokens.rightContentMargin, _Range2.LeftHelper, _Range.tokens.leftHelperOffset, _Range.tokens.leftHelperFontFamily, _Range.tokens.leftHelperFontSize, _Range.tokens.leftHelperFontStyle, _Range.tokens.leftHelperFontWeight, _Range.tokens.leftHelperLetterSpacing, _Range.tokens.leftHelperLineHeight);
@@ -0,0 +1,26 @@
1
+ [
2
+ "--plasma-range-border-radius",
3
+ "--plasma-range__left-content-margin",
4
+ "--plasma-range__right-content-margin",
5
+ "--plasma-range__label-offset",
6
+ "--plasma-range__label-font-family",
7
+ "--plasma-range__label-font-style",
8
+ "--plasma-range__label-font-size",
9
+ "--plasma-range__label-font-weight",
10
+ "--plasma-range__label-letter-spacing",
11
+ "--plasma-range__label-line-height",
12
+ "--plasma-range__left-helper-offset",
13
+ "--plasma-range__left-helper-font-family",
14
+ "--plasma-range__left-helper-font-style",
15
+ "--plasma-range__left-helper-font-size",
16
+ "--plasma-range__left-helper-font-weight",
17
+ "--plasma-range__left-helper-letter-spacing",
18
+ "--plasma-range__left-helper-line-height",
19
+ "--plasma-range__divider-padding",
20
+ "--plasma-range__divider-font-family",
21
+ "--plasma-range__divider-font-style",
22
+ "--plasma-range__divider-font-size",
23
+ "--plasma-range__divider-font-weight",
24
+ "--plasma-range__divider-letter-spacing",
25
+ "--plasma-range__divider-line-height"
26
+ ]
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _Range = /*#__PURE__*/require("../../Range.tokens");
9
+ var _Range2 = /*#__PURE__*/require("../../Range.styles");
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");}"], _Range2.ContentWrapper, _Range.tokens.background, _Range.tokens.borderWidth, _Range.tokens.borderColor, _Range.classes.rangeError, _Range.tokens.backgroundError, _Range.tokens.borderWidth, _Range.tokens.borderColorError, _Range.classes.rangeSuccess, _Range.tokens.backgroundSuccess, _Range.tokens.borderWidth, _Range.tokens.borderColorSuccess, _Range2.StyledDivider, _Range.tokens.dividerColor, _Range2.StyledLabel, _Range.tokens.labelColor, _Range2.LeftHelper, _Range.tokens.leftHelperColor);
@@ -0,0 +1,6 @@
1
+ [
2
+ "--plasma-range-background",
3
+ "--plasma-range__label-color",
4
+ "--plasma-range__left-helper-color",
5
+ "--plasma-range__divider-color"
6
+ ]
@@ -18,7 +18,7 @@ var _TextField = /*#__PURE__*/require("./TextField.styles");
18
18
  var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
19
19
  var _ui = /*#__PURE__*/require("./ui");
20
20
  var _hooks = /*#__PURE__*/require("./hooks");
21
- var _excluded = ["id", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch"];
21
+ var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch"];
22
22
  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); }
23
23
  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; }
24
24
  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); }
@@ -34,10 +34,14 @@ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:bloc
34
34
  var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
35
35
  return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
36
36
  var id = _ref.id,
37
+ className = _ref.className,
38
+ style = _ref.style,
37
39
  contentLeft = _ref.contentLeft,
38
40
  contentRight = _ref.contentRight,
39
41
  label = _ref.label,
40
42
  labelPlacement = _ref.labelPlacement,
43
+ textBefore = _ref.textBefore,
44
+ textAfter = _ref.textAfter,
41
45
  placeholder = _ref.placeholder,
42
46
  leftHelper = _ref.leftHelper,
43
47
  _ref$enumerationType = _ref.enumerationType,
@@ -149,7 +153,9 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
149
153
  disabled: disabled,
150
154
  readOnly: !disabled && readOnly,
151
155
  labelPlacement: innerLabelPlacementValue,
152
- onClick: handleInputFocus
156
+ onClick: handleInputFocus,
157
+ className: className,
158
+ style: style
153
159
  }, labelInside || innerLabelValue && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
154
160
  id: labelId,
155
161
  htmlFor: id
@@ -160,7 +166,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
160
166
  ref: contentRef,
161
167
  onKeyDown: handleContentKeyDown,
162
168
  className: withHasChips
163
- }, isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/_react["default"].createElement(_TextField.StyledChips, null, chips === null || chips === void 0 ? void 0 : chips.map(function (_ref2, index) {
169
+ }, textBefore && /*#__PURE__*/_react["default"].createElement(_TextField.StyledTextBefore, null, textBefore), isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/_react["default"].createElement(_TextField.StyledChips, null, chips === null || chips === void 0 ? void 0 : chips.map(function (_ref2, index) {
164
170
  var chipId = _ref2.id,
165
171
  text = _ref2.text;
166
172
  return /*#__PURE__*/_react["default"].createElement(_ui.TextFieldChip, {
@@ -194,7 +200,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
194
200
  })), labelInside && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
195
201
  id: labelId,
196
202
  htmlFor: innerId
197
- }, innerLabelValue)), contentRight && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_TextField.LeftHelper, {
203
+ }, innerLabelValue), textAfter && /*#__PURE__*/_react["default"].createElement(_TextField.StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_TextField.LeftHelper, {
198
204
  id: helperTextId
199
205
  }, leftHelper));
200
206
  });
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledContentRight = exports.StyledContentLeft = exports.StyledChips = exports.LeftHelper = exports.Label = exports.InputWrapper = exports.InputLabelWrapper = exports.Input = void 0;
6
+ exports.StyledTextBefore = exports.StyledTextAfter = exports.StyledContentRight = exports.StyledContentLeft = exports.StyledChips = exports.LeftHelper = exports.Label = exports.InputWrapper = exports.InputLabelWrapper = exports.Input = void 0;
7
7
  var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
8
8
  var _TextField = /*#__PURE__*/require("./TextField.tokens");
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -30,4 +30,10 @@ var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledCompon
30
30
  })(["margin:var(", ");"], _TextField.tokens.rightContentMargin);
31
31
  var LeftHelper = exports.LeftHelper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
32
32
  componentId: "plasma-new-hope__sc-g4vxbb-7"
33
+ })([""]);
34
+ var StyledTextBefore = exports.StyledTextBefore = /*#__PURE__*/_styledComponents["default"].div.withConfig({
35
+ componentId: "plasma-new-hope__sc-g4vxbb-8"
36
+ })([""]);
37
+ var StyledTextAfter = exports.StyledTextAfter = /*#__PURE__*/_styledComponents["default"].div.withConfig({
38
+ componentId: "plasma-new-hope__sc-g4vxbb-9"
33
39
  })([""]);
@@ -68,6 +68,11 @@ var tokens = exports.tokens = {
68
68
  leftHelperFontWeight: '--plasma-textfield__left-helper-font-weight',
69
69
  leftHelperLetterSpacing: '--plasma-textfield__left-helper-letter-spacing',
70
70
  leftHelperLineHeight: '--plasma-textfield__left-helper-line-height',
71
+ /** Токены вспомогательного текста */
72
+ textBeforeColor: '--plasma-textfield__before-text-color',
73
+ textAfterColor: '--plasma-textfield__after-text-color',
74
+ textBeforeMargin: '--plasma-textfield__before-text-margin',
75
+ textAfterMargin: '--plasma-textfield__after-text-margin',
71
76
  /** Прозрачность для всего компонента в состоянии disabled */
72
77
  disabledOpacity: '--plasma-textfield-disabled-opacity',
73
78
  /** Токены чипа */
@@ -7,4 +7,4 @@ exports.labelPlacement_inner = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _TextField = /*#__PURE__*/require("../../TextField.styles");
9
9
  var _TextField2 = /*#__PURE__*/require("../../TextField.tokens");
10
- var labelPlacement_inner = exports.labelPlacement_inner = /*#__PURE__*/(0, _styledComponents.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);}"], _TextField.Input, _TextField2.tokens.contentLabelInnerPadding, _TextField.Input, _TextField.Label, _TextField.Input, _TextField.Label, _TextField2.tokens.labelInnerPadding, _TextField2.tokens.labelInnerFontFamily, _TextField2.tokens.labelInnerFontSize, _TextField2.tokens.labelInnerFontStyle, _TextField2.tokens.labelInnerFontWeight, _TextField2.tokens.labelInnerLetterSpacing, _TextField2.tokens.labelInnerLineHeight, _TextField.Input, _TextField.Input, _TextField.Label, _TextField2.tokens.placeholderColor, _TextField2.tokens.height, _TextField2.tokens.height, _TextField2.tokens.height);
10
+ var labelPlacement_inner = exports.labelPlacement_inner = /*#__PURE__*/(0, _styledComponents.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);}"], _TextField.Input, _TextField2.tokens.contentLabelInnerPadding, _TextField.StyledTextAfter, _TextField.StyledTextBefore, _TextField2.tokens.contentLabelInnerPadding, _TextField.Input, _TextField.Label, _TextField.Input, _TextField.Label, _TextField2.tokens.labelInnerPadding, _TextField2.tokens.labelInnerFontFamily, _TextField2.tokens.labelInnerFontSize, _TextField2.tokens.labelInnerFontStyle, _TextField2.tokens.labelInnerFontWeight, _TextField2.tokens.labelInnerLetterSpacing, _TextField2.tokens.labelInnerLineHeight, _TextField.Input, _TextField.Input, _TextField.Label, _TextField2.tokens.placeholderColor, _TextField2.tokens.height, _TextField2.tokens.height, _TextField2.tokens.height);
@@ -7,4 +7,4 @@ exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _TextField = /*#__PURE__*/require("../../TextField.tokens");
9
9
  var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
10
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");}"], _TextField2.Input, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.InputWrapper, _TextField.tokens.height, _TextField.tokens.borderRadius, _TextField.tokens.padding, _TextField.classes.hasChips, _TextField.tokens.paddingWithChips, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentLeft, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentRight, _TextField.tokens.paddingWithChips, _TextField2.Label, _TextField.tokens.labelFontFamily, _TextField.tokens.labelFontSize, _TextField.tokens.labelFontStyle, _TextField.tokens.labelFontWeight, _TextField.tokens.labelLetterSpacing, _TextField.tokens.labelLineHeight, _TextField2.LeftHelper, _TextField.tokens.leftHelperOffset, _TextField.tokens.leftHelperFontFamily, _TextField.tokens.leftHelperFontSize, _TextField.tokens.leftHelperFontStyle, _TextField.tokens.leftHelperFontWeight, _TextField.tokens.leftHelperLetterSpacing, _TextField.tokens.leftHelperLineHeight);
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");}"], _TextField2.Input, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.InputWrapper, _TextField.tokens.height, _TextField.tokens.borderRadius, _TextField.tokens.padding, _TextField.classes.hasChips, _TextField.tokens.paddingWithChips, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentLeft, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentRight, _TextField.tokens.paddingWithChips, _TextField2.Label, _TextField.tokens.labelFontFamily, _TextField.tokens.labelFontSize, _TextField.tokens.labelFontStyle, _TextField.tokens.labelFontWeight, _TextField.tokens.labelLetterSpacing, _TextField.tokens.labelLineHeight, _TextField2.LeftHelper, _TextField.tokens.leftHelperOffset, _TextField.tokens.leftHelperFontFamily, _TextField.tokens.leftHelperFontSize, _TextField.tokens.leftHelperFontStyle, _TextField.tokens.leftHelperFontWeight, _TextField.tokens.leftHelperLetterSpacing, _TextField.tokens.leftHelperLineHeight, _TextField2.StyledTextBefore, _TextField2.StyledTextAfter, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.StyledTextBefore, _TextField.tokens.textBeforeMargin, _TextField2.StyledTextAfter, _TextField.tokens.textAfterMargin);
@@ -7,4 +7,4 @@ exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _TextField = /*#__PURE__*/require("../../TextField.tokens");
9
9
  var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
10
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");}"], _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.borderColor), /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField.tokens.color, _TextField.tokens.borderWidth, _TextField.tokens.caretColor, _TextField2.InputWrapper, _TextField.tokens.borderColorHover, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorHover, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.InputWrapper, _TextField.tokens.borderColorFocus, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorFocus, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.Input, _TextField.tokens.placeholderColor, _TextField2.Input, _TextField.tokens.color, _TextField2.LeftHelper, _TextField.tokens.leftHelperColor);
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");}"], _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.borderColor), /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField.tokens.color, _TextField.tokens.borderWidth, _TextField.tokens.caretColor, _TextField2.InputWrapper, _TextField.tokens.borderColorHover, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorHover, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.InputWrapper, _TextField.tokens.borderColorFocus, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorFocus, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.Input, _TextField.tokens.placeholderColor, _TextField2.Input, _TextField.tokens.color, _TextField2.LeftHelper, _TextField.tokens.leftHelperColor, _TextField2.StyledTextBefore, _TextField.tokens.textBeforeColor, _TextField2.StyledTextAfter, _TextField.tokens.textAfterColor);
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.config = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _Range = /*#__PURE__*/require("../../../../components/Range");
9
+ var config = exports.config = {
10
+ defaults: {
11
+ view: 'default',
12
+ size: 'l'
13
+ },
14
+ variations: {
15
+ view: {
16
+ "default": /*#__PURE__*/(0, _styledComponents.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);"], _Range.rangeTokens.background, _Range.rangeTokens.backgroundError, _Range.rangeTokens.backgroundSuccess, _Range.rangeTokens.dividerColor, _Range.rangeTokens.labelColor, _Range.rangeTokens.leftHelperColor, _Range.rangeTokens.textFieldColor, _Range.rangeTokens.textFieldPlaceholderColor, _Range.rangeTokens.textFieldCaretColor, _Range.rangeTokens.textFieldBackgroundColorFocus, _Range.rangeTokens.textFieldBackgroundErrorColor, _Range.rangeTokens.textFieldBackgroundErrorColorFocus, _Range.rangeTokens.textFieldBackgroundSuccessColor, _Range.rangeTokens.textFieldBackgroundSuccessColorFocus, _Range.rangeTokens.textFieldTextBeforeColor, _Range.rangeTokens.textFieldTextAfterColor, _Range.rangeTokens.focusColor)
17
+ },
18
+ size: {
19
+ l: /*#__PURE__*/(0, _styledComponents.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;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin),
20
+ m: /*#__PURE__*/(0, _styledComponents.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;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin),
21
+ s: /*#__PURE__*/(0, _styledComponents.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;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin),
22
+ xs: /*#__PURE__*/(0, _styledComponents.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;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin)
23
+ },
24
+ disabled: {
25
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Range.rangeTokens.disabledOpacity)
26
+ },
27
+ readOnly: {
28
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Range.rangeTokens.backgroundReadOnly, _Range.rangeTokens.labelColorReadOnly, _Range.rangeTokens.leftHelperColorReadOnly, _Range.rangeTokens.dividerColorReadOnly, _Range.rangeTokens.textFieldColorReadOnly, _Range.rangeTokens.textFieldBackgroundColorReadOnly, _Range.rangeTokens.textFieldPlaceholderColorReadOnly)
29
+ }
30
+ }
31
+ };
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Range = void 0;
7
+ var _engines = /*#__PURE__*/require("../../../../engines");
8
+ var _Range = /*#__PURE__*/require("../../../../components/Range");
9
+ var _Range2 = /*#__PURE__*/require("./Range.config");
10
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Range.rangeConfig, _Range2.config);
11
+ var Range = exports.Range = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -0,0 +1,312 @@
1
+ import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import { action } from '@storybook/addon-actions';
4
+ import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
5
+
6
+ import { WithTheme } from '../../../_helpers';
7
+ import { IconChevronLeft } from '../../../../components/_Icon';
8
+ import { IconButton } from '../IconButton/IconButton';
9
+
10
+ import { Range } from './Range';
11
+
12
+ const onChangeFirstValue = action('onChangeFirstValue');
13
+ const onChangeSecondValue = action('onChangeSecondValue');
14
+ const onSearchFirstValue = action('onSearchFirstValue');
15
+ const onSearchSecondValue = action('onSearchSecondValue');
16
+ const onFocusFirstTextfield = action('onFocusFirstTextfield');
17
+ const onFocusSecondTextfield = action('onFocusSecondTextfield');
18
+ const onBlurFirstTextfield = action('onBlurFirstTextfield');
19
+ const onBlurSecondTextfield = action('onBlurSecondTextfield');
20
+
21
+ const sizes = ['l', 'm', 's', 'xs'];
22
+ const views = ['default'];
23
+ const dividers = ['none', 'dash', 'icon'];
24
+
25
+ const meta: Meta<typeof Range> = {
26
+ title: 'plasma_b2c/Range',
27
+ component: Range,
28
+ decorators: [WithTheme],
29
+ argTypes: {
30
+ view: {
31
+ options: views,
32
+ control: {
33
+ type: 'inline-radio',
34
+ },
35
+ },
36
+ size: {
37
+ options: sizes,
38
+ control: {
39
+ type: 'inline-radio',
40
+ },
41
+ },
42
+ },
43
+ };
44
+
45
+ export default meta;
46
+
47
+ type StoryPropsDefault = ComponentProps<typeof Range> & {
48
+ enableContentLeft: boolean;
49
+ enableContentRight: boolean;
50
+ enableFirstTextfieldContentLeft: boolean;
51
+ enableSecondTextfieldContentLeft: boolean;
52
+ enableFirstTextfieldContentRight: boolean;
53
+ enableSecondTextfieldContentRight: boolean;
54
+ };
55
+
56
+ const getSizeForIcon = (size) => {
57
+ const map = {
58
+ m: 's',
59
+ l: 's',
60
+ s: 's',
61
+ xs: 'xs',
62
+ };
63
+ if (map[size]) {
64
+ return map[size];
65
+ }
66
+
67
+ return size;
68
+ };
69
+
70
+ const ActionButton = ({ size }) => {
71
+ return (
72
+ <IconButton view="clear" size={size}>
73
+ <IconChevronLeft color="inherit" size={getSizeForIcon(size)} />
74
+ </IconButton>
75
+ );
76
+ };
77
+
78
+ const StoryDefault = ({
79
+ dividerVariant,
80
+ enableContentLeft,
81
+ enableContentRight,
82
+ firstTextfieldTextBefore,
83
+ secondTextfieldTextBefore,
84
+ enableFirstTextfieldContentLeft,
85
+ enableSecondTextfieldContentLeft,
86
+ enableFirstTextfieldContentRight,
87
+ enableSecondTextfieldContentRight,
88
+ size,
89
+ ...rest
90
+ }: StoryPropsDefault) => {
91
+ const [firstValue, setFirstValue] = useState('');
92
+ const [secondValue, setSecondValue] = useState('');
93
+
94
+ const iconSize = size === 'xs' ? 'xs' : 's';
95
+ const showDividerIcon = dividerVariant === 'icon';
96
+ const showDefaultTextBefore = dividerVariant === 'none';
97
+
98
+ const dividerIconProps = {
99
+ dividerIcon: showDividerIcon ? <IconPlaceholder size="s" /> : null,
100
+ dividerVariant,
101
+ };
102
+
103
+ return (
104
+ <Range
105
+ size={size}
106
+ firstValue={firstValue}
107
+ secondValue={secondValue}
108
+ contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
109
+ contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
110
+ firstTextfieldContentLeft={
111
+ enableFirstTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
112
+ }
113
+ firstTextfieldContentRight={
114
+ enableFirstTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
115
+ }
116
+ secondTextfieldContentLeft={
117
+ enableSecondTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
118
+ }
119
+ secondTextfieldContentRight={
120
+ enableSecondTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
121
+ }
122
+ firstTextfieldTextBefore={
123
+ showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore
124
+ }
125
+ secondTextfieldTextBefore={
126
+ showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
127
+ }
128
+ onChangeFirstValue={(e) => {
129
+ setFirstValue(e.target.value);
130
+ onChangeFirstValue(e, e.target.value);
131
+ }}
132
+ onChangeSecondValue={(e) => {
133
+ setSecondValue(e.target.value);
134
+ onChangeSecondValue(e, e.target.value);
135
+ }}
136
+ onSearchFirstValue={onSearchFirstValue}
137
+ onSearchSecondValue={onSearchSecondValue}
138
+ onFocusFirstTextfield={onFocusFirstTextfield}
139
+ onFocusSecondTextfield={onFocusSecondTextfield}
140
+ onBlurFirstTextfield={onBlurFirstTextfield}
141
+ onBlurSecondTextfield={onBlurSecondTextfield}
142
+ {...dividerIconProps}
143
+ {...rest}
144
+ />
145
+ );
146
+ };
147
+
148
+ export const Default: StoryObj<StoryPropsDefault> = {
149
+ argTypes: {
150
+ dividerVariant: {
151
+ options: dividers,
152
+ control: {
153
+ type: 'inline-radio',
154
+ },
155
+ },
156
+ },
157
+ args: {
158
+ label: 'Лейбл',
159
+ leftHelper: 'Подсказка к полю',
160
+ firstPlaceholder: 'Заполните поле 1',
161
+ secondPlaceholder: 'Заполните поле 2',
162
+ size: 'l',
163
+ view: 'default',
164
+ disabled: false,
165
+ readOnly: false,
166
+ firstTextfieldTextBefore: 'С',
167
+ secondTextfieldTextBefore: 'ПО',
168
+ enableContentLeft: true,
169
+ enableContentRight: true,
170
+ dividerVariant: 'dash',
171
+ enableFirstTextfieldContentLeft: false,
172
+ enableFirstTextfieldContentRight: false,
173
+ enableSecondTextfieldContentLeft: false,
174
+ enableSecondTextfieldContentRight: false,
175
+ firstValueError: false,
176
+ secondValueError: false,
177
+ firstValueSuccess: false,
178
+ secondValueSuccess: false,
179
+ },
180
+ render: (args) => <StoryDefault {...args} />,
181
+ };
182
+
183
+ const StoryDemo = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
184
+ const [firstValue, setFirstValue] = useState('');
185
+ const [secondValue, setSecondValue] = useState('');
186
+
187
+ const [firstValueError, setFirstValueError] = useState(false);
188
+ const [secondValueError, setSecondValueError] = useState(false);
189
+
190
+ const [firstValueSuccess, setFirstValueSuccess] = useState(false);
191
+ const [secondValueSuccess, setSecondValueSuccess] = useState(false);
192
+
193
+ const checkValue = (value: string) => /^([1-9][0-9]*|)$/.test(value);
194
+
195
+ const handleChangeValue = (
196
+ e: ChangeEvent<HTMLInputElement>,
197
+ setter: Dispatch<SetStateAction<string>>,
198
+ error: boolean,
199
+ errorSetter: Dispatch<SetStateAction<boolean>>,
200
+ success: boolean,
201
+ successSetter: Dispatch<SetStateAction<boolean>>,
202
+ ) => {
203
+ const { value } = e.target;
204
+ if (!checkValue(value)) {
205
+ return;
206
+ }
207
+
208
+ if (error) {
209
+ errorSetter(false);
210
+ }
211
+
212
+ if (success) {
213
+ successSetter(false);
214
+ }
215
+
216
+ setter(value);
217
+ };
218
+
219
+ const firstValueConstraint = (value: number) =>
220
+ value <= 0 || value >= 9 || (secondValue && value >= Number(secondValue) && !secondValueError);
221
+ const secondValueConstraint = (value: number) =>
222
+ value <= 0 || value > 10 || (firstValue && value <= Number(firstValue) && !firstValueError);
223
+
224
+ const handleCommitValue = (
225
+ value: string,
226
+ constraint: (currentValue: number) => boolean,
227
+ errorSetter: Dispatch<SetStateAction<boolean>>,
228
+ successSetter: Dispatch<SetStateAction<boolean>>,
229
+ ) => {
230
+ if (!value) {
231
+ return;
232
+ }
233
+
234
+ if (!checkValue(value)) {
235
+ return errorSetter(true);
236
+ }
237
+
238
+ if (constraint(Number(value))) {
239
+ return errorSetter(true);
240
+ }
241
+
242
+ successSetter(true);
243
+ };
244
+
245
+ const iconSize = size === 'xs' ? 'xs' : 's';
246
+
247
+ return (
248
+ <Range
249
+ dividerVariant="dash"
250
+ size={size}
251
+ firstValue={firstValue}
252
+ secondValue={secondValue}
253
+ firstValueError={firstValueError}
254
+ secondValueError={secondValueError}
255
+ firstValueSuccess={firstValueSuccess}
256
+ secondValueSuccess={secondValueSuccess}
257
+ contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
258
+ contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
259
+ onChangeFirstValue={(e) => {
260
+ handleChangeValue(
261
+ e,
262
+ setFirstValue,
263
+ firstValueError,
264
+ setFirstValueError,
265
+ firstValueSuccess,
266
+ setFirstValueSuccess,
267
+ );
268
+ }}
269
+ onChangeSecondValue={(e) => {
270
+ handleChangeValue(
271
+ e,
272
+ setSecondValue,
273
+ secondValueError,
274
+ setSecondValueError,
275
+ secondValueSuccess,
276
+ setSecondValueSuccess,
277
+ );
278
+ }}
279
+ onSearchFirstValue={(e) => {
280
+ const { value } = e.target as HTMLInputElement;
281
+ handleCommitValue(value, firstValueConstraint, setFirstValueError, setFirstValueSuccess);
282
+ }}
283
+ onSearchSecondValue={(e) => {
284
+ const { value } = e.target as HTMLInputElement;
285
+ handleCommitValue(value, secondValueConstraint, setSecondValueError, setSecondValueSuccess);
286
+ }}
287
+ onFocusFirstTextfield={onFocusFirstTextfield}
288
+ onFocusSecondTextfield={onFocusSecondTextfield}
289
+ onBlurFirstTextfield={onBlurFirstTextfield}
290
+ onBlurSecondTextfield={onBlurSecondTextfield}
291
+ {...rest}
292
+ />
293
+ );
294
+ };
295
+
296
+ export const Demo: StoryObj<StoryPropsDefault> = {
297
+ args: {
298
+ label: 'Введите кол-во товара',
299
+ leftHelper: 'Кол-во товара не может быть меньше 1 и превышать 10',
300
+ firstPlaceholder: '1',
301
+ secondPlaceholder: '5',
302
+ size: 'l',
303
+ view: 'default',
304
+ disabled: false,
305
+ readOnly: false,
306
+ firstTextfieldTextBefore: '',
307
+ secondTextfieldTextBefore: '',
308
+ enableContentLeft: true,
309
+ enableContentRight: true,
310
+ },
311
+ render: (args) => <StoryDemo {...args} />,
312
+ };