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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (210) hide show
  1. package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
  2. package/cjs/components/Radiobox/Radiobox.js.map +1 -1
  3. package/cjs/components/Range/Range.css +63 -0
  4. package/cjs/components/Range/Range.js +146 -0
  5. package/cjs/components/Range/Range.js.map +1 -0
  6. package/cjs/components/Range/Range.styles.js +63 -0
  7. package/cjs/components/Range/Range.styles.js.map +1 -0
  8. package/cjs/components/Range/Range.styles_mc4w65.css +8 -0
  9. package/cjs/components/Range/Range.tokens.js +106 -0
  10. package/cjs/components/Range/Range.tokens.js.map +1 -0
  11. package/cjs/components/Range/utils/index.js +24 -0
  12. package/cjs/components/Range/utils/index.js.map +1 -0
  13. package/cjs/components/Range/variations/_disabled/base.js +9 -0
  14. package/cjs/components/Range/variations/_disabled/base.js.map +1 -0
  15. package/cjs/components/Range/variations/_disabled/base_1ufizo4.css +1 -0
  16. package/cjs/components/Range/variations/_readonly/base.js +9 -0
  17. package/cjs/components/Range/variations/_readonly/base.js.map +1 -0
  18. package/cjs/components/Range/variations/_readonly/base_tzdxy8.css +1 -0
  19. package/cjs/components/Range/variations/_size/base.js +9 -0
  20. package/cjs/components/Range/variations/_size/base.js.map +1 -0
  21. package/cjs/components/Range/variations/_size/base_16xiubi.css +1 -0
  22. package/cjs/components/Range/variations/_view/base.js +9 -0
  23. package/cjs/components/Range/variations/_view/base.js.map +1 -0
  24. package/cjs/components/Range/variations/_view/base_5iz3nr.css +1 -0
  25. package/cjs/components/Slider/Slider.css +11 -9
  26. package/cjs/components/Slider/components/Double/Double.css +11 -9
  27. package/cjs/components/TextField/TextField.js +10 -10
  28. package/cjs/components/TextField/TextField.js.map +1 -1
  29. package/cjs/components/TextField/TextField.styles.js +13 -1
  30. package/cjs/components/TextField/TextField.styles.js.map +1 -1
  31. package/cjs/components/TextField/{TextField.styles_1b1mddp.css → TextField.styles_aqmut.css} +2 -0
  32. package/cjs/components/TextField/TextField.tokens.js +5 -0
  33. package/cjs/components/TextField/TextField.tokens.js.map +1 -1
  34. package/cjs/components/TextField/variations/_label-placement/inner.js +1 -1
  35. package/cjs/components/TextField/variations/_label-placement/inner.js.map +1 -1
  36. package/cjs/components/TextField/variations/_label-placement/inner_7c08qb.css +1 -0
  37. package/cjs/components/TextField/variations/_size/base.js +1 -1
  38. package/cjs/components/TextField/variations/_size/base.js.map +1 -1
  39. package/{es/components/TextField/variations/_size/base_1khzr9t.css → cjs/components/TextField/variations/_size/base_ntoddv.css} +1 -1
  40. package/cjs/components/TextField/variations/_view/base.js +1 -1
  41. package/cjs/components/TextField/variations/_view/base.js.map +1 -1
  42. package/{es/components/TextField/variations/_view/base_1qd77x6.css → cjs/components/TextField/variations/_view/base_19gxyva.css} +1 -1
  43. package/cjs/index.css +28 -9
  44. package/cjs/index.js +5 -0
  45. package/cjs/index.js.map +1 -1
  46. package/es/components/Checkbox/Checkbox.styles.js.map +1 -1
  47. package/es/components/Radiobox/Radiobox.js.map +1 -1
  48. package/es/components/Range/Range.css +63 -0
  49. package/es/components/Range/Range.js +141 -0
  50. package/es/components/Range/Range.js.map +1 -0
  51. package/es/components/Range/Range.styles.js +52 -0
  52. package/es/components/Range/Range.styles.js.map +1 -0
  53. package/es/components/Range/Range.styles_mc4w65.css +8 -0
  54. package/es/components/Range/Range.tokens.js +101 -0
  55. package/es/components/Range/Range.tokens.js.map +1 -0
  56. package/es/components/Range/utils/index.js +19 -0
  57. package/es/components/Range/utils/index.js.map +1 -0
  58. package/es/components/Range/variations/_disabled/base.js +5 -0
  59. package/es/components/Range/variations/_disabled/base.js.map +1 -0
  60. package/es/components/Range/variations/_disabled/base_1ufizo4.css +1 -0
  61. package/es/components/Range/variations/_readonly/base.js +5 -0
  62. package/es/components/Range/variations/_readonly/base.js.map +1 -0
  63. package/es/components/Range/variations/_readonly/base_tzdxy8.css +1 -0
  64. package/es/components/Range/variations/_size/base.js +5 -0
  65. package/es/components/Range/variations/_size/base.js.map +1 -0
  66. package/es/components/Range/variations/_size/base_16xiubi.css +1 -0
  67. package/es/components/Range/variations/_view/base.js +5 -0
  68. package/es/components/Range/variations/_view/base.js.map +1 -0
  69. package/es/components/Range/variations/_view/base_5iz3nr.css +1 -0
  70. package/es/components/Slider/Slider.css +11 -9
  71. package/es/components/Slider/components/Double/Double.css +11 -9
  72. package/es/components/TextField/TextField.js +11 -11
  73. package/es/components/TextField/TextField.js.map +1 -1
  74. package/es/components/TextField/TextField.styles.js +12 -2
  75. package/es/components/TextField/TextField.styles.js.map +1 -1
  76. package/es/components/TextField/{TextField.styles_1b1mddp.css → TextField.styles_aqmut.css} +2 -0
  77. package/es/components/TextField/TextField.tokens.js +5 -0
  78. package/es/components/TextField/TextField.tokens.js.map +1 -1
  79. package/es/components/TextField/variations/_label-placement/inner.js +1 -1
  80. package/es/components/TextField/variations/_label-placement/inner.js.map +1 -1
  81. package/es/components/TextField/variations/_label-placement/inner_7c08qb.css +1 -0
  82. package/es/components/TextField/variations/_size/base.js +1 -1
  83. package/es/components/TextField/variations/_size/base.js.map +1 -1
  84. package/{cjs/components/TextField/variations/_size/base_1khzr9t.css → es/components/TextField/variations/_size/base_ntoddv.css} +1 -1
  85. package/es/components/TextField/variations/_view/base.js +1 -1
  86. package/es/components/TextField/variations/_view/base.js.map +1 -1
  87. package/{cjs/components/TextField/variations/_view/base_1qd77x6.css → es/components/TextField/variations/_view/base_19gxyva.css} +1 -1
  88. package/es/index.css +28 -9
  89. package/es/index.js +2 -0
  90. package/es/index.js.map +1 -1
  91. package/package.json +2 -2
  92. package/styled-components/cjs/components/Range/Range.js +148 -0
  93. package/styled-components/cjs/components/Range/Range.styles.js +39 -0
  94. package/styled-components/cjs/components/Range/Range.template-doc.mdx +323 -0
  95. package/styled-components/cjs/components/Range/Range.tokens.js +104 -0
  96. package/styled-components/cjs/components/Range/Range.types.js +5 -0
  97. package/styled-components/cjs/components/Range/index.js +25 -0
  98. package/styled-components/cjs/components/Range/utils/index.js +22 -0
  99. package/styled-components/cjs/components/Range/variations/_disabled/base.js +9 -0
  100. package/styled-components/cjs/components/Range/variations/_disabled/tokens.json +4 -0
  101. package/styled-components/cjs/components/Range/variations/_readonly/base.js +10 -0
  102. package/styled-components/cjs/components/Range/variations/_readonly/tokens.json +4 -0
  103. package/styled-components/cjs/components/Range/variations/_size/base.js +10 -0
  104. package/styled-components/cjs/components/Range/variations/_size/tokens.json +26 -0
  105. package/styled-components/cjs/components/Range/variations/_view/base.js +10 -0
  106. package/styled-components/cjs/components/Range/variations/_view/tokens.json +6 -0
  107. package/styled-components/cjs/components/TextField/TextField.js +10 -10
  108. package/styled-components/cjs/components/TextField/TextField.styles.js +7 -1
  109. package/styled-components/cjs/components/TextField/TextField.tokens.js +5 -0
  110. package/styled-components/cjs/components/TextField/variations/_label-placement/inner.js +1 -1
  111. package/styled-components/cjs/components/TextField/variations/_size/base.js +1 -1
  112. package/styled-components/cjs/components/TextField/variations/_view/base.js +1 -1
  113. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.config.js +31 -0
  114. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.js +11 -0
  115. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.stories.tsx +312 -0
  116. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
  117. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -0
  118. package/styled-components/cjs/examples/plasma_web/components/Range/Range.config.js +31 -0
  119. package/styled-components/cjs/examples/plasma_web/components/Range/Range.js +11 -0
  120. package/styled-components/cjs/examples/plasma_web/components/Range/Range.stories.tsx +312 -0
  121. package/styled-components/cjs/index.js +11 -0
  122. package/styled-components/es/components/Range/Range.js +139 -0
  123. package/styled-components/es/components/Range/Range.styles.js +31 -0
  124. package/styled-components/es/components/Range/Range.template-doc.mdx +323 -0
  125. package/styled-components/es/components/Range/Range.tokens.js +98 -0
  126. package/styled-components/es/components/Range/Range.types.js +1 -0
  127. package/styled-components/es/components/Range/index.js +2 -0
  128. package/styled-components/es/components/Range/utils/index.js +16 -0
  129. package/styled-components/es/components/Range/variations/_disabled/base.js +3 -0
  130. package/styled-components/es/components/Range/variations/_disabled/tokens.json +4 -0
  131. package/styled-components/es/components/Range/variations/_readonly/base.js +4 -0
  132. package/styled-components/es/components/Range/variations/_readonly/tokens.json +4 -0
  133. package/styled-components/es/components/Range/variations/_size/base.js +4 -0
  134. package/styled-components/es/components/Range/variations/_size/tokens.json +26 -0
  135. package/styled-components/es/components/Range/variations/_view/base.js +4 -0
  136. package/styled-components/es/components/Range/variations/_view/tokens.json +6 -0
  137. package/styled-components/es/components/TextField/TextField.js +11 -11
  138. package/styled-components/es/components/TextField/TextField.styles.js +6 -0
  139. package/styled-components/es/components/TextField/TextField.tokens.js +5 -0
  140. package/styled-components/es/components/TextField/variations/_label-placement/inner.js +2 -2
  141. package/styled-components/es/components/TextField/variations/_size/base.js +2 -2
  142. package/styled-components/es/components/TextField/variations/_view/base.js +2 -2
  143. package/styled-components/es/examples/plasma_b2c/components/Range/Range.config.js +25 -0
  144. package/styled-components/es/examples/plasma_b2c/components/Range/Range.js +5 -0
  145. package/styled-components/es/examples/plasma_b2c/components/Range/Range.stories.tsx +312 -0
  146. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
  147. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -0
  148. package/styled-components/es/examples/plasma_web/components/Range/Range.config.js +25 -0
  149. package/styled-components/es/examples/plasma_web/components/Range/Range.js +5 -0
  150. package/styled-components/es/examples/plasma_web/components/Range/Range.stories.tsx +312 -0
  151. package/styled-components/es/index.js +2 -1
  152. package/types/components/Radiobox/Radiobox.d.ts +3 -3
  153. package/types/components/Radiobox/Radiobox.d.ts.map +1 -1
  154. package/types/components/Range/Range.d.ts +31 -0
  155. package/types/components/Range/Range.d.ts.map +1 -0
  156. package/types/components/Range/Range.styles.d.ts +48 -0
  157. package/types/components/Range/Range.styles.d.ts.map +1 -0
  158. package/types/components/Range/Range.tokens.d.ts +99 -0
  159. package/types/components/Range/Range.tokens.d.ts.map +1 -0
  160. package/types/components/Range/Range.types.d.ts +143 -0
  161. package/types/components/Range/Range.types.d.ts.map +1 -0
  162. package/types/components/Range/index.d.ts +4 -0
  163. package/types/components/Range/index.d.ts.map +1 -0
  164. package/types/components/Range/utils/index.d.ts +5 -0
  165. package/types/components/Range/utils/index.d.ts.map +1 -0
  166. package/types/components/Range/variations/_disabled/base.d.ts +2 -0
  167. package/types/components/Range/variations/_disabled/base.d.ts.map +1 -0
  168. package/types/components/Range/variations/_readonly/base.d.ts +2 -0
  169. package/types/components/Range/variations/_readonly/base.d.ts.map +1 -0
  170. package/types/components/Range/variations/_size/base.d.ts +2 -0
  171. package/types/components/Range/variations/_size/base.d.ts.map +1 -0
  172. package/types/components/Range/variations/_view/base.d.ts +2 -0
  173. package/types/components/Range/variations/_view/base.d.ts.map +1 -0
  174. package/types/components/Slider/components/Double/Double.styles.d.ts +4 -0
  175. package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
  176. package/types/components/TextField/TextField.d.ts.map +1 -1
  177. package/types/components/TextField/TextField.styles.d.ts +2 -0
  178. package/types/components/TextField/TextField.styles.d.ts.map +1 -1
  179. package/types/components/TextField/TextField.tokens.d.ts +5 -0
  180. package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
  181. package/types/components/TextField/TextField.types.d.ts +8 -0
  182. package/types/components/TextField/TextField.types.d.ts.map +1 -1
  183. package/types/components/TextField/variations/_label-placement/inner.d.ts.map +1 -1
  184. package/types/components/TextField/variations/_size/base.d.ts.map +1 -1
  185. package/types/components/TextField/variations/_view/base.d.ts.map +1 -1
  186. package/types/examples/plasma_b2c/components/Radiobox/Radiobox.d.ts +1 -1
  187. package/types/examples/plasma_b2c/components/Radiobox/Radiobox.d.ts.map +1 -1
  188. package/types/examples/plasma_b2c/components/Range/Range.config.d.ts +24 -0
  189. package/types/examples/plasma_b2c/components/Range/Range.config.d.ts.map +1 -0
  190. package/types/examples/plasma_b2c/components/Range/Range.d.ts +127 -0
  191. package/types/examples/plasma_b2c/components/Range/Range.d.ts.map +1 -0
  192. package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts.map +1 -1
  193. package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +4 -0
  194. package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
  195. package/types/examples/plasma_web/components/Radiobox/Radiobox.d.ts +1 -1
  196. package/types/examples/plasma_web/components/Radiobox/Radiobox.d.ts.map +1 -1
  197. package/types/examples/plasma_web/components/Range/Range.config.d.ts +24 -0
  198. package/types/examples/plasma_web/components/Range/Range.config.d.ts.map +1 -0
  199. package/types/examples/plasma_web/components/Range/Range.d.ts +127 -0
  200. package/types/examples/plasma_web/components/Range/Range.d.ts.map +1 -0
  201. package/types/examples/plasma_web/components/TextField/TextField.d.ts +4 -0
  202. package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
  203. package/types/examples/sds_engineer/components/Radiobox/Radiobox.d.ts +1 -1
  204. package/types/examples/sds_engineer/components/Radiobox/Radiobox.d.ts.map +1 -1
  205. package/types/examples/sds_engineer/components/TextField/TextField.d.ts +4 -0
  206. package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +1 -1
  207. package/types/index.d.ts +1 -0
  208. package/types/index.d.ts.map +1 -1
  209. package/cjs/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
  210. package/es/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
@@ -8,19 +8,19 @@ export var config = {
8
8
  },
9
9
  variations: {
10
10
  view: {
11
- "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
11
+ "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
12
12
  // TODO заменить --surface-transparent-positive на корректный токен
13
- positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
13
+ positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
14
14
  // // TODO заменить --surface-transparent-warning на корректный токен
15
- warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
15
+ warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
16
16
  // // TODO заменить --surface-transparent-negative на корректный токен
17
- negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor)
17
+ negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor)
18
18
  },
19
19
  size: {
20
- l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
21
- m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
22
- s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
23
- xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight)
20
+ l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-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;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.textBeforeMargin, tokens.textAfterMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
21
+ m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-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;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.textBeforeMargin, tokens.textAfterMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
22
+ s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":-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;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.textBeforeMargin, tokens.textAfterMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
23
+ xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-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;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.textBeforeMargin, tokens.textAfterMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight)
24
24
  },
25
25
  labelPlacement: {
26
26
  inner: [labelPlacement_inner, /*#__PURE__*/css(["&.", "{", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);}"], labelPlacement_inner, tokens.placeholderColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight)],
@@ -105,6 +105,8 @@ export const Default: StoryObj<StoryPropsDefault> = {
105
105
  view: 'default',
106
106
  label: 'Лейбл',
107
107
  labelPlacement: 'outer',
108
+ textBefore: '',
109
+ textAfter: '',
108
110
  placeholder: 'Заполните поле',
109
111
  leftHelper: 'Подсказка к полю',
110
112
  disabled: false,
@@ -0,0 +1,25 @@
1
+ import { css } from 'styled-components';
2
+ import { rangeTokens as tokens } from '../../../../components/Range';
3
+ export var config = {
4
+ defaults: {
5
+ view: 'default',
6
+ size: 'l'
7
+ },
8
+ variations: {
9
+ view: {
10
+ "default": /*#__PURE__*/css(["", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--surface-negative);", ":var(--surface-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-accent);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);"], tokens.background, tokens.borderColor, tokens.borderColorError, tokens.borderColorSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBorderColorFocus, tokens.textFieldBorderColorError, tokens.textFieldBorderColorErrorFocus, tokens.textFieldBorderColorSuccess, tokens.textFieldBorderColorSuccessFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor)
11
+ },
12
+ size: {
13
+ l: /*#__PURE__*/css(["", ":0.875rem;", ":0.0625rem;", ":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;", ":0.0625rem;", ":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.borderWidth, 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.textFieldBorderWidth, 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),
14
+ m: /*#__PURE__*/css(["", ":0.75rem;", ":0.0625rem;", ":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.0625rem;", ":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.borderWidth, 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.textFieldBorderWidth, 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),
15
+ s: /*#__PURE__*/css(["", ":0.625rem;", ":0.0625rem;", ":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.0625rem;", ":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.borderWidth, 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.textFieldBorderWidth, 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),
16
+ xs: /*#__PURE__*/css(["", ":0.5rem;", ":0.0625rem;", ":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.0625rem;", ":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.borderWidth, 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.textFieldBorderWidth, 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)
17
+ },
18
+ disabled: {
19
+ "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
20
+ },
21
+ readOnly: {
22
+ "true": /*#__PURE__*/css(["", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], tokens.backgroundReadOnly, tokens.borderColorReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
23
+ }
24
+ }
25
+ };
@@ -0,0 +1,5 @@
1
+ import { component, mergeConfig } from '../../../../engines';
2
+ import { rangeConfig } from '../../../../components/Range';
3
+ import { config } from './Range.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(rangeConfig, config);
5
+ export var Range = /*#__PURE__*/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_web/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 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
+ };
@@ -46,4 +46,5 @@ export * from './components/Progress';
46
46
  export * from './components/Select';
47
47
  export * from './components/Divider';
48
48
  export * from './components/Toolbar';
49
- export * from './components/Slider';
49
+ export * from './components/Slider';
50
+ export * from './components/Range';
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
- import type { InputHTMLAttributes } from 'react';
2
+ import type { InputHTMLAttributes } from '@salutejs/plasma-core';
3
3
  import type { Filter, RootProps } from '../../engines/types';
4
4
  import { BaseboxProps } from '../Checkbox/Checkbox.types';
5
5
  declare type RadioboxProps = Filter<InputHTMLAttributes<HTMLInputElement>, 'size'> & Omit<BaseboxProps, 'indeterminate'>;
6
- export declare const radioboxRoot: (Root: RootProps<HTMLInputElement, RadioboxProps>) => React.ForwardRefExoticComponent<Filter<React.InputHTMLAttributes<HTMLInputElement>, "size"> & Omit<BaseboxProps, "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
6
+ export declare const radioboxRoot: (Root: RootProps<HTMLInputElement, RadioboxProps>) => React.ForwardRefExoticComponent<Filter<InputHTMLAttributes<HTMLInputElement>, "size"> & Omit<BaseboxProps, "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
7
7
  export declare const radioboxConfig: {
8
8
  name: string;
9
9
  tag: string;
10
- layout: (Root: RootProps<HTMLInputElement, RadioboxProps>) => React.ForwardRefExoticComponent<Filter<React.InputHTMLAttributes<HTMLInputElement>, "size"> & Omit<BaseboxProps, "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
10
+ layout: (Root: RootProps<HTMLInputElement, RadioboxProps>) => React.ForwardRefExoticComponent<Filter<InputHTMLAttributes<HTMLInputElement>, "size"> & Omit<BaseboxProps, "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
11
11
  base: import("@linaria/core").LinariaClassName;
12
12
  variations: {
13
13
  size: {
@@ -1 +1 @@
1
- {"version":3,"file":"Radiobox.d.ts","sourceRoot":"","sources":["../../../src/components/Radiobox/Radiobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAS7D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAU1D,aAAK,aAAa,GAAG,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;AAEjH,eAAO,MAAM,YAAY,SAAU,UAAU,gBAAgB,EAAE,aAAa,CAAC,+KA0EvE,CAAC;AAEP,eAAO,MAAM,cAAc;;;mBA5EQ,UAAU,gBAAgB,EAAE,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;CAmG5E,CAAC"}
1
+ {"version":3,"file":"Radiobox.d.ts","sourceRoot":"","sources":["../../../src/components/Radiobox/Radiobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAS7D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAU1D,aAAK,aAAa,GAAG,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;AAEjH,eAAO,MAAM,YAAY,SAAU,UAAU,gBAAgB,EAAE,aAAa,CAAC,yKA0EvE,CAAC;AAEP,eAAO,MAAM,cAAc;;;mBA5EQ,UAAU,gBAAgB,EAAE,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;CAmG5E,CAAC"}
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import type { RootProps } from '../../engines';
3
+ import type { RangeProps } from './Range.types';
4
+ export declare const rangeRoot: (Root: RootProps<HTMLDivElement, RangeProps>) => React.ForwardRefExoticComponent<RangeProps & React.RefAttributes<HTMLInputElement>>;
5
+ export declare const rangeConfig: {
6
+ name: string;
7
+ tag: string;
8
+ layout: (Root: RootProps<HTMLDivElement, RangeProps>) => React.ForwardRefExoticComponent<RangeProps & React.RefAttributes<HTMLInputElement>>;
9
+ base: import("@linaria/core").LinariaClassName;
10
+ variations: {
11
+ view: {
12
+ css: import("@linaria/core").LinariaClassName;
13
+ };
14
+ size: {
15
+ css: import("@linaria/core").LinariaClassName;
16
+ };
17
+ disabled: {
18
+ css: import("@linaria/core").LinariaClassName;
19
+ attrs: boolean;
20
+ };
21
+ readOnly: {
22
+ css: import("@linaria/core").LinariaClassName;
23
+ attrs: boolean;
24
+ };
25
+ };
26
+ defaults: {
27
+ size: string;
28
+ view: string;
29
+ };
30
+ };
31
+ //# sourceMappingURL=Range.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAkBhD,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,wFAkHhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBApHQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;CA6IpE,CAAC"}
@@ -0,0 +1,48 @@
1
+ /// <reference types="react" />
2
+ export declare const StyledInput: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../engines/types").PropsType<import("../../engines/types").Variants> & (({
3
+ size?: string | undefined;
4
+ view?: string | undefined;
5
+ readOnly?: boolean | undefined;
6
+ disabled?: boolean | undefined;
7
+ } & {
8
+ label?: string | undefined;
9
+ labelPlacement?: "inner" | "outer" | undefined;
10
+ leftHelper?: string | undefined;
11
+ contentLeft?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
12
+ contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
13
+ textBefore?: string | undefined;
14
+ textAfter?: string | undefined;
15
+ onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
16
+ } & {
17
+ chips?: undefined;
18
+ onChangeChips?: undefined;
19
+ enumerationType?: "plain" | undefined;
20
+ onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
21
+ } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>) | ({
22
+ size?: string | undefined;
23
+ view?: string | undefined;
24
+ readOnly?: boolean | undefined;
25
+ disabled?: boolean | undefined;
26
+ } & {
27
+ label?: string | undefined;
28
+ labelPlacement?: "inner" | "outer" | undefined;
29
+ leftHelper?: string | undefined;
30
+ contentLeft?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
31
+ contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
32
+ textBefore?: string | undefined;
33
+ textAfter?: string | undefined;
34
+ onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
35
+ } & {
36
+ enumerationType: "chip";
37
+ onSearch?: undefined;
38
+ chips?: import("../TextField/TextField.types").TextFieldPrimitiveValue[] | undefined;
39
+ onChangeChips?: ((value: import("../TextField/TextField.types").TextFieldPrimitiveValue[]) => void) | undefined;
40
+ } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>))>;
41
+ export declare const base: import("@linaria/core").LinariaClassName;
42
+ export declare const StyledLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLLabelElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & Record<never, unknown>>;
43
+ export declare const LeftHelper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
44
+ export declare const ContentWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
45
+ export declare const StyledDivider: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
46
+ export declare const StyledContentLeft: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
47
+ export declare const StyledContentRight: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
48
+ //# sourceMappingURL=Range.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Range.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.styles.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4HA+DvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAAQ,CAAC;AAE1B,eAAO,MAAM,WAAW,8KAAiB,CAAC;AAE1C,eAAO,MAAM,UAAU,qKAAe,CAAC;AAEvC,eAAO,MAAM,cAAc,qKAG1B,CAAC;AAEF,eAAO,MAAM,aAAa,qKAAe,CAAC;AAE1C,eAAO,MAAM,iBAAiB,qKAAe,CAAC;AAE9C,eAAO,MAAM,kBAAkB,qKAAe,CAAC"}