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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (280) hide show
  1. package/cjs/components/Combobox/hooks/useFocusController.js +1 -0
  2. package/cjs/components/Combobox/hooks/useFocusController.js.map +1 -1
  3. package/cjs/components/Slider/Slider.css +69 -0
  4. package/cjs/components/Slider/Slider.js +48 -0
  5. package/cjs/components/Slider/Slider.js.map +1 -0
  6. package/cjs/components/Slider/Slider.tokens.js +79 -0
  7. package/cjs/components/Slider/Slider.tokens.js.map +1 -0
  8. package/cjs/components/Slider/components/Double/Double.css +62 -0
  9. package/cjs/components/Slider/components/Double/Double.js +306 -0
  10. package/cjs/components/Slider/components/Double/Double.js.map +1 -0
  11. package/cjs/components/Slider/components/Double/Double.styles.js +61 -0
  12. package/cjs/components/Slider/components/Double/Double.styles.js.map +1 -0
  13. package/cjs/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
  14. package/cjs/components/Slider/components/Single/Single.css +16 -0
  15. package/cjs/components/Slider/components/Single/Single.js +164 -0
  16. package/cjs/components/Slider/components/Single/Single.js.map +1 -0
  17. package/cjs/components/Slider/components/Single/Single.styles.js +45 -0
  18. package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -0
  19. package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
  20. package/cjs/components/Slider/components/SliderBase/SliderBase.css +4 -0
  21. package/cjs/components/Slider/components/SliderBase/SliderBase.js +82 -0
  22. package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
  23. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +33 -0
  24. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
  25. package/cjs/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
  26. package/cjs/components/Slider/ui/Handler/Handler.css +4 -0
  27. package/cjs/components/Slider/ui/Handler/Handler.js +168 -0
  28. package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -0
  29. package/cjs/components/Slider/ui/Handler/Handler.styles.js +21 -0
  30. package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -0
  31. package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
  32. package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -0
  33. package/cjs/components/Slider/ui/Thumb/Thumb.js +31 -0
  34. package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -0
  35. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +15 -0
  36. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
  37. package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
  38. package/cjs/components/Slider/utils/index.js +56 -0
  39. package/cjs/components/Slider/utils/index.js.map +1 -0
  40. package/cjs/components/Slider/variations/_disabled/base.js +9 -0
  41. package/cjs/components/Slider/variations/_disabled/base.js.map +1 -0
  42. package/cjs/components/Slider/variations/_disabled/base_x642ct.css +1 -0
  43. package/cjs/components/Slider/variations/_size/base.js +9 -0
  44. package/cjs/components/Slider/variations/_size/base.js.map +1 -0
  45. package/cjs/components/Slider/variations/_size/base_x642ct.css +1 -0
  46. package/cjs/components/Slider/variations/_view/base.js +9 -0
  47. package/cjs/components/Slider/variations/_view/base.js.map +1 -0
  48. package/cjs/components/Slider/variations/_view/base_x642ct.css +1 -0
  49. package/cjs/components/TextField/TextField.js +12 -3
  50. package/cjs/components/TextField/TextField.js.map +1 -1
  51. package/cjs/engines/common.js +4 -0
  52. package/cjs/engines/common.js.map +1 -1
  53. package/cjs/engines/index.js.map +1 -1
  54. package/cjs/hooks/useIsomorphicLayoutEffect.js +15 -0
  55. package/cjs/hooks/useIsomorphicLayoutEffect.js.map +1 -0
  56. package/cjs/index.css +25 -0
  57. package/cjs/index.js +14 -0
  58. package/cjs/index.js.map +1 -1
  59. package/cjs/utils/canUseDOM.js +12 -0
  60. package/cjs/utils/canUseDOM.js.map +1 -0
  61. package/cjs/utils/index.js.map +1 -1
  62. package/es/components/Combobox/hooks/useFocusController.js +1 -0
  63. package/es/components/Combobox/hooks/useFocusController.js.map +1 -1
  64. package/es/components/Slider/Slider.css +69 -0
  65. package/es/components/Slider/Slider.js +43 -0
  66. package/es/components/Slider/Slider.js.map +1 -0
  67. package/es/components/Slider/Slider.tokens.js +74 -0
  68. package/es/components/Slider/Slider.tokens.js.map +1 -0
  69. package/es/components/Slider/components/Double/Double.css +62 -0
  70. package/es/components/Slider/components/Double/Double.js +302 -0
  71. package/es/components/Slider/components/Double/Double.js.map +1 -0
  72. package/es/components/Slider/components/Double/Double.styles.js +51 -0
  73. package/es/components/Slider/components/Double/Double.styles.js.map +1 -0
  74. package/es/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
  75. package/es/components/Slider/components/Single/Single.css +16 -0
  76. package/es/components/Slider/components/Single/Single.js +160 -0
  77. package/es/components/Slider/components/Single/Single.js.map +1 -0
  78. package/es/components/Slider/components/Single/Single.styles.js +36 -0
  79. package/es/components/Slider/components/Single/Single.styles.js.map +1 -0
  80. package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
  81. package/es/components/Slider/components/SliderBase/SliderBase.css +4 -0
  82. package/es/components/Slider/components/SliderBase/SliderBase.js +78 -0
  83. package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
  84. package/es/components/Slider/components/SliderBase/SliderBase.styles.js +26 -0
  85. package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
  86. package/es/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
  87. package/es/components/Slider/ui/Handler/Handler.css +4 -0
  88. package/es/components/Slider/ui/Handler/Handler.js +164 -0
  89. package/es/components/Slider/ui/Handler/Handler.js.map +1 -0
  90. package/es/components/Slider/ui/Handler/Handler.styles.js +16 -0
  91. package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -0
  92. package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
  93. package/es/components/Slider/ui/Thumb/Thumb.css +1 -0
  94. package/es/components/Slider/ui/Thumb/Thumb.js +27 -0
  95. package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -0
  96. package/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
  97. package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
  98. package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
  99. package/es/components/Slider/utils/index.js +50 -0
  100. package/es/components/Slider/utils/index.js.map +1 -0
  101. package/es/components/Slider/variations/_disabled/base.js +5 -0
  102. package/es/components/Slider/variations/_disabled/base.js.map +1 -0
  103. package/es/components/Slider/variations/_disabled/base_x642ct.css +1 -0
  104. package/es/components/Slider/variations/_size/base.js +5 -0
  105. package/es/components/Slider/variations/_size/base.js.map +1 -0
  106. package/es/components/Slider/variations/_size/base_x642ct.css +1 -0
  107. package/es/components/Slider/variations/_view/base.js +5 -0
  108. package/es/components/Slider/variations/_view/base.js.map +1 -0
  109. package/es/components/Slider/variations/_view/base_x642ct.css +1 -0
  110. package/es/components/TextField/TextField.js +12 -3
  111. package/es/components/TextField/TextField.js.map +1 -1
  112. package/es/engines/common.js +4 -0
  113. package/es/engines/common.js.map +1 -1
  114. package/es/engines/index.js.map +1 -1
  115. package/es/hooks/useIsomorphicLayoutEffect.js +11 -0
  116. package/es/hooks/useIsomorphicLayoutEffect.js.map +1 -0
  117. package/es/index.css +25 -0
  118. package/es/index.js +8 -0
  119. package/es/index.js.map +1 -1
  120. package/es/utils/canUseDOM.js +8 -0
  121. package/es/utils/canUseDOM.js.map +1 -0
  122. package/es/utils/index.js.map +1 -1
  123. package/package.json +3 -2
  124. package/styled-components/cjs/components/Slider/Slider.js +47 -0
  125. package/styled-components/cjs/components/Slider/Slider.tokens.js +77 -0
  126. package/styled-components/cjs/components/Slider/Slider.types.js +5 -0
  127. package/styled-components/cjs/components/Slider/components/Double/Double.js +318 -0
  128. package/styled-components/cjs/components/Slider/components/Double/Double.styles.js +36 -0
  129. package/styled-components/cjs/components/Slider/components/Double/Double.types.js +5 -0
  130. package/styled-components/cjs/components/Slider/components/Single/Single.js +176 -0
  131. package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +27 -0
  132. package/styled-components/cjs/components/Slider/components/Single/Single.types.js +5 -0
  133. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +83 -0
  134. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +21 -0
  135. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.types.js +5 -0
  136. package/styled-components/cjs/components/Slider/components/index.js +27 -0
  137. package/styled-components/cjs/components/Slider/index.js +32 -0
  138. package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +177 -0
  139. package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +15 -0
  140. package/styled-components/cjs/components/Slider/ui/Handler/Handler.types.js +5 -0
  141. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +32 -0
  142. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +18 -0
  143. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.types.js +5 -0
  144. package/styled-components/cjs/components/Slider/ui/index.js +63 -0
  145. package/styled-components/cjs/components/Slider/utils/index.js +55 -0
  146. package/styled-components/cjs/components/Slider/variations/_disabled/base.js +8 -0
  147. package/styled-components/cjs/components/Slider/variations/_disabled/tokens.json +4 -0
  148. package/styled-components/cjs/components/Slider/variations/_size/base.js +8 -0
  149. package/styled-components/cjs/components/Slider/variations/_size/tokens.json +0 -0
  150. package/styled-components/cjs/components/Slider/variations/_view/base.js +8 -0
  151. package/styled-components/cjs/components/Slider/variations/_view/tokens.json +0 -0
  152. package/styled-components/cjs/components/TextField/TextField.js +12 -3
  153. package/styled-components/cjs/engines/common.js +4 -0
  154. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +29 -0
  155. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.js +16 -0
  156. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
  157. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +29 -0
  158. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.js +16 -0
  159. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
  160. package/styled-components/cjs/hooks/index.js +8 -1
  161. package/styled-components/cjs/hooks/useIsomorphicLayoutEffect.js +12 -0
  162. package/styled-components/cjs/index.js +11 -0
  163. package/styled-components/cjs/utils/canUseDOM.js +11 -0
  164. package/styled-components/cjs/utils/index.js +7 -0
  165. package/styled-components/es/components/Slider/Slider.js +38 -0
  166. package/styled-components/es/components/Slider/Slider.tokens.js +71 -0
  167. package/styled-components/es/components/Slider/Slider.types.js +1 -0
  168. package/styled-components/es/components/Slider/components/Double/Double.js +310 -0
  169. package/styled-components/es/components/Slider/components/Double/Double.styles.js +29 -0
  170. package/styled-components/es/components/Slider/components/Double/Double.types.js +1 -0
  171. package/styled-components/es/components/Slider/components/Single/Single.js +168 -0
  172. package/styled-components/es/components/Slider/components/Single/Single.styles.js +20 -0
  173. package/styled-components/es/components/Slider/components/Single/Single.types.js +1 -0
  174. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +74 -0
  175. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +14 -0
  176. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.types.js +1 -0
  177. package/styled-components/es/components/Slider/components/index.js +3 -0
  178. package/styled-components/es/components/Slider/index.js +3 -0
  179. package/styled-components/es/components/Slider/ui/Handler/Handler.js +168 -0
  180. package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -0
  181. package/styled-components/es/components/Slider/ui/Handler/Handler.types.js +1 -0
  182. package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +25 -0
  183. package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
  184. package/styled-components/es/components/Slider/ui/Thumb/Thumb.types.js +1 -0
  185. package/styled-components/es/components/Slider/ui/index.js +5 -0
  186. package/styled-components/es/components/Slider/utils/index.js +47 -0
  187. package/styled-components/es/components/Slider/variations/_disabled/base.js +2 -0
  188. package/styled-components/es/components/Slider/variations/_disabled/tokens.json +4 -0
  189. package/styled-components/es/components/Slider/variations/_size/base.js +2 -0
  190. package/styled-components/es/components/Slider/variations/_size/tokens.json +0 -0
  191. package/styled-components/es/components/Slider/variations/_view/base.js +2 -0
  192. package/styled-components/es/components/Slider/variations/_view/tokens.json +0 -0
  193. package/styled-components/es/components/TextField/TextField.js +12 -3
  194. package/styled-components/es/engines/common.js +4 -0
  195. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +23 -0
  196. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.js +10 -0
  197. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
  198. package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +23 -0
  199. package/styled-components/es/examples/plasma_web/components/Slider/Slider.js +10 -0
  200. package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
  201. package/styled-components/es/hooks/index.js +2 -1
  202. package/styled-components/es/hooks/useIsomorphicLayoutEffect.js +7 -0
  203. package/styled-components/es/index.js +2 -1
  204. package/styled-components/es/utils/canUseDOM.js +5 -0
  205. package/styled-components/es/utils/index.js +1 -0
  206. package/types/components/Slider/Slider.d.ts +27 -0
  207. package/types/components/Slider/Slider.d.ts.map +1 -0
  208. package/types/components/Slider/Slider.tokens.d.ts +72 -0
  209. package/types/components/Slider/Slider.tokens.d.ts.map +1 -0
  210. package/types/components/Slider/Slider.types.d.ts +3 -0
  211. package/types/components/Slider/Slider.types.d.ts.map +1 -0
  212. package/types/components/Slider/components/Double/Double.d.ts +4 -0
  213. package/types/components/Slider/components/Double/Double.d.ts.map +1 -0
  214. package/types/components/Slider/components/Double/Double.styles.d.ts +43 -0
  215. package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -0
  216. package/types/components/Slider/components/Double/Double.types.d.ts +65 -0
  217. package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -0
  218. package/types/components/Slider/components/Single/Single.d.ts +4 -0
  219. package/types/components/Slider/components/Single/Single.d.ts.map +1 -0
  220. package/types/components/Slider/components/Single/Single.styles.d.ts +8 -0
  221. package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -0
  222. package/types/components/Slider/components/Single/Single.types.d.ts +55 -0
  223. package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -0
  224. package/types/components/Slider/components/SliderBase/SliderBase.d.ts +4 -0
  225. package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -0
  226. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +6 -0
  227. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -0
  228. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +45 -0
  229. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -0
  230. package/types/components/Slider/components/index.d.ts +6 -0
  231. package/types/components/Slider/components/index.d.ts.map +1 -0
  232. package/types/components/Slider/index.d.ts +6 -0
  233. package/types/components/Slider/index.d.ts.map +1 -0
  234. package/types/components/Slider/ui/Handler/Handler.d.ts +9 -0
  235. package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -0
  236. package/types/components/Slider/ui/Handler/Handler.styles.d.ts +4 -0
  237. package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -0
  238. package/types/components/Slider/ui/Handler/Handler.types.d.ts +24 -0
  239. package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -0
  240. package/types/components/Slider/ui/Thumb/Thumb.d.ts +4 -0
  241. package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -0
  242. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts +5 -0
  243. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -0
  244. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +12 -0
  245. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -0
  246. package/types/components/Slider/ui/index.d.ts +6 -0
  247. package/types/components/Slider/ui/index.d.ts.map +1 -0
  248. package/types/components/Slider/utils/index.d.ts +33 -0
  249. package/types/components/Slider/utils/index.d.ts.map +1 -0
  250. package/types/components/Slider/variations/_disabled/base.d.ts +2 -0
  251. package/types/components/Slider/variations/_disabled/base.d.ts.map +1 -0
  252. package/types/components/Slider/variations/_size/base.d.ts +2 -0
  253. package/types/components/Slider/variations/_size/base.d.ts.map +1 -0
  254. package/types/components/Slider/variations/_view/base.d.ts +2 -0
  255. package/types/components/Slider/variations/_view/base.d.ts.map +1 -0
  256. package/types/components/TextField/TextField.d.ts.map +1 -1
  257. package/types/engines/common.d.ts +3 -3
  258. package/types/engines/common.d.ts.map +1 -1
  259. package/types/engines/index.d.ts +1 -1
  260. package/types/engines/index.d.ts.map +1 -1
  261. package/types/engines/types.d.ts +4 -0
  262. package/types/engines/types.d.ts.map +1 -1
  263. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts +22 -0
  264. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -0
  265. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +21 -0
  266. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -0
  267. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts +22 -0
  268. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -0
  269. package/types/examples/plasma_web/components/Slider/Slider.d.ts +21 -0
  270. package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -0
  271. package/types/hooks/index.d.ts +1 -0
  272. package/types/hooks/index.d.ts.map +1 -1
  273. package/types/hooks/useIsomorphicLayoutEffect.d.ts +6 -0
  274. package/types/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
  275. package/types/index.d.ts +1 -0
  276. package/types/index.d.ts.map +1 -1
  277. package/types/utils/canUseDOM.d.ts +6 -0
  278. package/types/utils/canUseDOM.d.ts.map +1 -0
  279. package/types/utils/index.d.ts +1 -0
  280. package/types/utils/index.d.ts.map +1 -1
@@ -21,6 +21,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
21
21
  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
22
22
  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
23
23
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
24
+ //
25
+ // Тип HTMLAttributesOmitOnChange требуется чтобы использовать компонент с кастомным пропсом onChange
26
+ //
27
+
24
28
  var getStaticVariants = exports.getStaticVariants = function getStaticVariants(config) {
25
29
  if (!config.variations) {
26
30
  return [];
@@ -0,0 +1,29 @@
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 _Slider = /*#__PURE__*/require("../../../../components/Slider");
9
+ var config = exports.config = {
10
+ defaults: {
11
+ view: 'default',
12
+ size: 'm'
13
+ },
14
+ variations: {
15
+ view: {
16
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-solid-default);", ":var(--surface-solid-tertiary);", ":var(--surface-solid-default);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor),
17
+ accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent);", ":var(--surface-solid-tertiary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor),
18
+ gradient: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent-gradient);", ":var(--surface-solid-tertiary);", ":var(--surface-accent-gradient);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor)
19
+ },
20
+ size: {
21
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.625rem;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3.5rem;", ":1.25rem 1rem 1.25rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
22
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.75rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
23
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.5rem;", ":-1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":0.125rem solid;", ":1.25rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":2.5rem;", ":0.5rem 1rem 0.5rem 1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight)
24
+ },
25
+ disabled: {
26
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Slider.sliderTokens.disabledOpacity)
27
+ }
28
+ }
29
+ };
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Slider = void 0;
7
+ var _Slider = /*#__PURE__*/require("../../../../components/Slider");
8
+ var _engines = /*#__PURE__*/require("../../../../engines");
9
+ var _Slider2 = /*#__PURE__*/require("./Slider.config");
10
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Slider.sliderConfig, _Slider2.config);
11
+ var Slider = exports.Slider = /*#__PURE__*/(0, _engines.component)(mergedConfig);
12
+
13
+ /**
14
+ * Слайдер позволяет определить числовое значение в пределах указанного промежутка.
15
+ * Можно указать два значения.
16
+ */
@@ -0,0 +1,169 @@
1
+ import React, { useState } from 'react';
2
+ import type { ComponentProps } from 'react';
3
+ import styled from 'styled-components';
4
+ import { disableProps } from '@salutejs/plasma-sb-utils';
5
+ import type { StoryObj, Meta } from '@storybook/react';
6
+ import { action } from '@storybook/addon-actions';
7
+
8
+ import { WithTheme } from '../../../_helpers';
9
+
10
+ import { Slider } from './Slider';
11
+
12
+ const sizes = ['l', 'm', 's'];
13
+ const views = ['default', 'accent', 'gradient'];
14
+ const labelPlacements = ['outer', 'inner'];
15
+ const rangeValuesPlacement = ['outer', 'inner'];
16
+
17
+ const meta: Meta<typeof Slider> = {
18
+ title: 'plasma_b2c/Slider',
19
+ component: Slider,
20
+ decorators: [WithTheme],
21
+ argTypes: {
22
+ view: {
23
+ options: views,
24
+ control: {
25
+ type: 'select',
26
+ },
27
+ },
28
+ size: {
29
+ options: sizes,
30
+ control: {
31
+ type: 'inline-radio',
32
+ },
33
+ },
34
+ ...disableProps([
35
+ 'value',
36
+ 'onChangeCommitted',
37
+ 'ariaLabel',
38
+ 'onChange',
39
+ 'fontSizeMultiplier',
40
+ 'gap',
41
+ 'settings',
42
+ 'hasHoverAnimation',
43
+ ]),
44
+ },
45
+ };
46
+
47
+ export default meta;
48
+
49
+ type StoryProps = Omit<ComponentProps<typeof Slider>, 'value' | 'onChangeCommitted'>;
50
+ type StorySingleProps = StoryProps;
51
+
52
+ type StorySingle = StoryObj<StorySingleProps>;
53
+ type StoryDouble = StoryObj<StoryProps>;
54
+
55
+ const SliderWrapper = styled.div`
56
+ width: 25rem;
57
+ `;
58
+
59
+ const StoryDefault = (args: StorySingleProps) => {
60
+ const [value, setValue] = useState(30);
61
+
62
+ const onChangeCommittedHandle = (values) => {
63
+ setValue(values);
64
+ };
65
+
66
+ const onChangeHandle = (values) => {
67
+ setValue(values);
68
+ };
69
+
70
+ return (
71
+ <SliderWrapper>
72
+ <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={onChangeHandle} {...args} />
73
+ </SliderWrapper>
74
+ );
75
+ };
76
+
77
+ export const Default: StorySingle = {
78
+ argTypes: {
79
+ labelPlacement: {
80
+ options: labelPlacements,
81
+ control: {
82
+ type: 'inline-radio',
83
+ },
84
+ },
85
+ rangeValuesPlacement: {
86
+ options: rangeValuesPlacement,
87
+ control: {
88
+ type: 'inline-radio',
89
+ },
90
+ },
91
+ },
92
+ args: {
93
+ view: 'default',
94
+ size: 'm',
95
+ min: 0,
96
+ max: 100,
97
+ disabled: false,
98
+ ariaLabel: 'Цена товара',
99
+ multipleStepSize: 10,
100
+ label: 'Цена товара',
101
+ labelPlacement: 'outer',
102
+ rangeValuesPlacement: 'outer',
103
+ showRangeValues: true,
104
+ showCurrentValue: false,
105
+ },
106
+ render: (args) => <StoryDefault {...args} />,
107
+ };
108
+
109
+ const StoryMultipleValues = (args: StoryProps) => {
110
+ const [value, setValue] = useState([10, 80]);
111
+ const sortValues = (values) => {
112
+ return values
113
+ .map((val) => {
114
+ if (val < args.min) {
115
+ return args.min;
116
+ }
117
+ if (val > args.max) {
118
+ return args.max;
119
+ }
120
+ return val;
121
+ })
122
+ .sort((a, b) => a - b);
123
+ };
124
+
125
+ const onChangeHandle = (values) => {
126
+ setValue(sortValues(values));
127
+ };
128
+
129
+ const onChangeCommitedHandle = (values) => {
130
+ setValue(sortValues(values));
131
+ };
132
+
133
+ const onBlurTextField = (values) => {
134
+ setValue(sortValues(values));
135
+ };
136
+
137
+ const onKeyDownTextField = (values, event) => {
138
+ if (event.key === 'Enter') {
139
+ setValue(sortValues(values));
140
+ }
141
+ };
142
+
143
+ return (
144
+ <SliderWrapper>
145
+ <Slider
146
+ value={value}
147
+ onKeyDownTextField={onKeyDownTextField}
148
+ onBlurTextField={onBlurTextField}
149
+ onChangeCommitted={onChangeCommitedHandle}
150
+ onChange={onChangeHandle}
151
+ {...args}
152
+ />
153
+ </SliderWrapper>
154
+ );
155
+ };
156
+
157
+ export const MultipleValues: StoryDouble = {
158
+ args: {
159
+ view: 'default',
160
+ size: 'm',
161
+ min: 0,
162
+ max: 100,
163
+ disabled: false,
164
+ label: 'Цена товара',
165
+ ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
166
+ multipleStepSize: 10,
167
+ },
168
+ render: (args) => <StoryMultipleValues {...args} />,
169
+ };
@@ -0,0 +1,29 @@
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 _Slider = /*#__PURE__*/require("../../../../components/Slider");
9
+ var config = exports.config = {
10
+ defaults: {
11
+ view: 'default',
12
+ size: 'm'
13
+ },
14
+ variations: {
15
+ view: {
16
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-solid-default);", ":var(--surface-solid-tertiary);", ":var(--surface-solid-default);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor),
17
+ accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent);", ":var(--surface-solid-tertiary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor),
18
+ gradient: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent-gradient);", ":var(--surface-solid-tertiary);", ":var(--surface-accent-gradient);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor)
19
+ },
20
+ size: {
21
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.625rem;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3.5rem;", ":1.25rem 1rem 1.25rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
22
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.75rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
23
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.5rem;", ":-1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":0.125rem solid;", ":1.25rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":2.5rem;", ":0.5rem 1rem 0.5rem 1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight)
24
+ },
25
+ disabled: {
26
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Slider.sliderTokens.disabledOpacity)
27
+ }
28
+ }
29
+ };
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Slider = void 0;
7
+ var _Slider = /*#__PURE__*/require("../../../../components/Slider");
8
+ var _engines = /*#__PURE__*/require("../../../../engines");
9
+ var _Slider2 = /*#__PURE__*/require("./Slider.config");
10
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Slider.sliderConfig, _Slider2.config);
11
+ var Slider = exports.Slider = /*#__PURE__*/(0, _engines.component)(mergedConfig);
12
+
13
+ /**
14
+ * Слайдер позволяет определить числовое значение в пределах указанного промежутка.
15
+ * Можно указать два значения.
16
+ */
@@ -0,0 +1,168 @@
1
+ import React, { useState } from 'react';
2
+ import type { ComponentProps } from 'react';
3
+ import styled from 'styled-components';
4
+ import { disableProps } from '@salutejs/plasma-sb-utils';
5
+ import type { StoryObj, Meta } from '@storybook/react';
6
+
7
+ import { WithTheme } from '../../../_helpers';
8
+
9
+ import { Slider } from './Slider';
10
+
11
+ const sizes = ['l', 'm', 's'];
12
+ const views = ['default', 'accent', 'gradient'];
13
+ const labelPlacements = ['outer', 'inner'];
14
+ const rangeValuesPlacement = ['outer', 'inner'];
15
+
16
+ const meta: Meta<typeof Slider> = {
17
+ title: 'plasma_web/Slider',
18
+ component: Slider,
19
+ decorators: [WithTheme],
20
+ argTypes: {
21
+ view: {
22
+ options: views,
23
+ control: {
24
+ type: 'select',
25
+ },
26
+ },
27
+ size: {
28
+ options: sizes,
29
+ control: {
30
+ type: 'inline-radio',
31
+ },
32
+ },
33
+ ...disableProps([
34
+ 'value',
35
+ 'onChangeCommitted',
36
+ 'ariaLabel',
37
+ 'onChange',
38
+ 'fontSizeMultiplier',
39
+ 'gap',
40
+ 'settings',
41
+ 'hasHoverAnimation',
42
+ ]),
43
+ },
44
+ };
45
+
46
+ export default meta;
47
+
48
+ type StoryProps = Omit<ComponentProps<typeof Slider>, 'value' | 'onChangeCommitted'>;
49
+ type StorySingleProps = StoryProps;
50
+
51
+ type StorySingle = StoryObj<StorySingleProps>;
52
+ type StoryDouble = StoryObj<StoryProps>;
53
+
54
+ const SliderWrapper = styled.div`
55
+ width: 25rem;
56
+ `;
57
+
58
+ const StoryDefault = (args: StorySingleProps) => {
59
+ const [value, setValue] = useState(30);
60
+
61
+ const onChangeCommittedHandle = (values) => {
62
+ setValue(values);
63
+ };
64
+
65
+ const onChangeHandle = (values) => {
66
+ setValue(values);
67
+ };
68
+
69
+ return (
70
+ <SliderWrapper>
71
+ <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={onChangeHandle} {...args} />
72
+ </SliderWrapper>
73
+ );
74
+ };
75
+
76
+ export const Default: StorySingle = {
77
+ argTypes: {
78
+ labelPlacement: {
79
+ options: labelPlacements,
80
+ control: {
81
+ type: 'inline-radio',
82
+ },
83
+ },
84
+ rangeValuesPlacement: {
85
+ options: rangeValuesPlacement,
86
+ control: {
87
+ type: 'inline-radio',
88
+ },
89
+ },
90
+ },
91
+ args: {
92
+ view: 'default',
93
+ size: 'm',
94
+ min: 0,
95
+ max: 100,
96
+ disabled: false,
97
+ ariaLabel: 'Цена товара',
98
+ multipleStepSize: 10,
99
+ label: 'Цена товара',
100
+ labelPlacement: 'outer',
101
+ rangeValuesPlacement: 'outer',
102
+ showRangeValues: true,
103
+ showCurrentValue: false,
104
+ },
105
+ render: (args) => <StoryDefault {...args} />,
106
+ };
107
+
108
+ const StoryMultipleValues = (args: StoryProps) => {
109
+ const [value, setValue] = useState([10, 80]);
110
+ const sortValues = (values) => {
111
+ return values
112
+ .map((val) => {
113
+ if (val < args.min) {
114
+ return args.min;
115
+ }
116
+ if (val > args.max) {
117
+ return args.max;
118
+ }
119
+ return val;
120
+ })
121
+ .sort((a, b) => a - b);
122
+ };
123
+
124
+ const onChangeHandle = (values) => {
125
+ setValue(sortValues(values));
126
+ };
127
+
128
+ const onChangeCommitedHandle = (values) => {
129
+ setValue(sortValues(values));
130
+ };
131
+
132
+ const onBlurTextField = (values) => {
133
+ setValue(sortValues(values));
134
+ };
135
+
136
+ const onKeyDownTextField = (values, event) => {
137
+ if (event.key === 'Enter') {
138
+ setValue(sortValues(values));
139
+ }
140
+ };
141
+
142
+ return (
143
+ <SliderWrapper>
144
+ <Slider
145
+ value={value}
146
+ onKeyDownTextField={onKeyDownTextField}
147
+ onBlurTextField={onBlurTextField}
148
+ onChangeCommitted={onChangeCommitedHandle}
149
+ onChange={onChangeHandle}
150
+ {...args}
151
+ />
152
+ </SliderWrapper>
153
+ );
154
+ };
155
+
156
+ export const MultipleValues: StoryDouble = {
157
+ args: {
158
+ view: 'default',
159
+ size: 'm',
160
+ min: 0,
161
+ max: 100,
162
+ disabled: false,
163
+ label: 'Цена товара',
164
+ ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
165
+ multipleStepSize: 10,
166
+ },
167
+ render: (args) => <StoryMultipleValues {...args} />,
168
+ };
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "useForceUpdate", {
15
15
  return _useForceUpdate.useForceUpdate;
16
16
  }
17
17
  });
18
+ Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
22
+ }
23
+ });
18
24
  Object.defineProperty(exports, "usePreviousValue", {
19
25
  enumerable: true,
20
26
  get: function get() {
@@ -30,4 +36,5 @@ Object.defineProperty(exports, "useUniqId", {
30
36
  var _useUniqId = /*#__PURE__*/require("./useUniqId");
31
37
  var _usePreviousValue = /*#__PURE__*/require("./usePreviousValue");
32
38
  var _useForceUpdate = /*#__PURE__*/require("./useForceUpdate");
33
- var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
39
+ var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
40
+ var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useIsomorphicLayoutEffect = void 0;
7
+ var _react = /*#__PURE__*/require("react");
8
+ var _utils = /*#__PURE__*/require("../utils");
9
+ /**
10
+ * Runs effect safely on server.
11
+ */
12
+ var useIsomorphicLayoutEffect = exports.useIsomorphicLayoutEffect = _utils.canUseDOM ? _react.useLayoutEffect : _react.useEffect;
@@ -508,4 +508,15 @@ Object.keys(_Toolbar).forEach(function (key) {
508
508
  return _Toolbar[key];
509
509
  }
510
510
  });
511
+ });
512
+ var _Slider = /*#__PURE__*/require("./components/Slider");
513
+ Object.keys(_Slider).forEach(function (key) {
514
+ if (key === "default" || key === "__esModule") return;
515
+ if (key in exports && exports[key] === _Slider[key]) return;
516
+ Object.defineProperty(exports, key, {
517
+ enumerable: true,
518
+ get: function get() {
519
+ return _Slider[key];
520
+ }
521
+ });
511
522
  });
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.canUseDOM = void 0;
7
+ /**
8
+ * This constant tells you whether can DOM be used.
9
+ * https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
10
+ */
11
+ var canUseDOM = exports.canUseDOM = /*#__PURE__*/Boolean(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
@@ -9,6 +9,12 @@ Object.defineProperty(exports, "IS_REACT_18", {
9
9
  return _react.IS_REACT_18;
10
10
  }
11
11
  });
12
+ Object.defineProperty(exports, "canUseDOM", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _canUseDOM.canUseDOM;
16
+ }
17
+ });
12
18
  exports.cx = exports.composableStyle = void 0;
13
19
  Object.defineProperty(exports, "extractTextFrom", {
14
20
  enumerable: true,
@@ -34,6 +40,7 @@ Object.defineProperty(exports, "safeUseId", {
34
40
  return _react.safeUseId;
35
41
  }
36
42
  });
43
+ var _canUseDOM = /*#__PURE__*/require("./canUseDOM");
37
44
  var _extractTextFrom = /*#__PURE__*/require("./extractTextFrom");
38
45
  var _getSizeValueFromProp = /*#__PURE__*/require("./getSizeValueFromProp");
39
46
  var _react = /*#__PURE__*/require("./react");
@@ -0,0 +1,38 @@
1
+ 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); }
2
+ import React, { forwardRef } from 'react';
3
+ import { base as viewCSS } from './variations/_view/base';
4
+ import { base as sizeCSS } from './variations/_size/base';
5
+ import { base as disabledCSS } from './variations/_disabled/base';
6
+ import { SingleSlider, DoubleSlider } from './components';
7
+ var isSingleValueProps = function isSingleValueProps(props) {
8
+ return typeof props.value === 'number';
9
+ };
10
+ export var sliderRoot = function sliderRoot(Root) {
11
+ return /*#__PURE__*/forwardRef(function (props, ref) {
12
+ return /*#__PURE__*/React.createElement(Root, _extends({
13
+ ref: ref
14
+ }, props), isSingleValueProps(props) && /*#__PURE__*/React.createElement(SingleSlider, props), !isSingleValueProps(props) && /*#__PURE__*/React.createElement(DoubleSlider, props));
15
+ });
16
+ };
17
+ export var sliderConfig = {
18
+ name: 'Slider',
19
+ tag: 'div',
20
+ layout: sliderRoot,
21
+ base: '',
22
+ variations: {
23
+ view: {
24
+ css: viewCSS
25
+ },
26
+ size: {
27
+ css: sizeCSS
28
+ },
29
+ disabled: {
30
+ css: disabledCSS,
31
+ attrs: true
32
+ }
33
+ },
34
+ defaults: {
35
+ view: 'default',
36
+ size: 'm'
37
+ }
38
+ };