@salutejs/plasma-new-hope 0.174.0-dev.0 → 0.175.0-canary.1452.11541985977.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/Slider/Slider.css +15 -13
  2. package/cjs/components/Slider/Slider.js +11 -2
  3. package/cjs/components/Slider/Slider.js.map +1 -1
  4. package/cjs/components/Slider/Slider.tokens.js +23 -17
  5. package/cjs/components/Slider/Slider.tokens.js.map +1 -1
  6. package/cjs/components/Slider/components/Double/Double.css +8 -8
  7. package/cjs/components/Slider/components/Double/Double.js +58 -23
  8. package/cjs/components/Slider/components/Double/Double.js.map +1 -1
  9. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +98 -0
  10. package/cjs/components/Slider/components/Single/Single.css +14 -14
  11. package/cjs/components/Slider/components/Single/Single.js +64 -33
  12. package/cjs/components/Slider/components/Single/Single.js.map +1 -1
  13. package/cjs/components/Slider/components/Single/Single.styles.js +4 -4
  14. package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -1
  15. package/cjs/components/Slider/components/Single/Single.styles_1h7n2s2.css +6 -0
  16. package/cjs/components/Slider/components/SliderBase/SliderBase.css +5 -5
  17. package/cjs/components/Slider/components/SliderBase/SliderBase.js +31 -12
  18. package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
  19. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
  20. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
  21. package/cjs/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css +5 -0
  22. package/cjs/components/Slider/ui/Handler/Handler.css +3 -3
  23. package/cjs/components/Slider/ui/Handler/Handler.js +49 -88
  24. package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -1
  25. package/cjs/components/Slider/ui/Handler/Handler.styles.js +17 -7
  26. package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
  27. package/cjs/components/Slider/ui/Handler/Handler.styles_irtcgm.css +2 -0
  28. package/cjs/components/Slider/ui/Handler/computeKeyPressData.js +122 -0
  29. package/cjs/components/Slider/ui/Handler/computeKeyPressData.js.map +1 -0
  30. package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -1
  31. package/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
  32. package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -1
  33. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
  34. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
  35. package/cjs/components/Slider/ui/Thumb/Thumb.styles_uyn20e.css +1 -0
  36. package/cjs/components/Slider/utils/index.js +28 -10
  37. package/cjs/components/Slider/utils/index.js.map +1 -1
  38. package/cjs/components/Slider/variations/_view/base.js +1 -1
  39. package/cjs/components/Slider/variations/_view/base.js.map +1 -1
  40. package/cjs/components/Slider/variations/_view/base_1s3f6q8.css +1 -0
  41. package/cjs/index.css +15 -13
  42. package/cjs/utils/index.js.map +1 -1
  43. package/emotion/cjs/components/Slider/Slider.js +10 -2
  44. package/emotion/cjs/components/Slider/Slider.template-doc.mdx +26 -0
  45. package/emotion/cjs/components/Slider/Slider.tokens.js +23 -17
  46. package/emotion/cjs/components/Slider/components/Double/Double.js +54 -19
  47. package/emotion/cjs/components/Slider/components/Single/Single.js +64 -33
  48. package/emotion/cjs/components/Slider/components/Single/Single.styles.js +18 -9
  49. package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.js +31 -12
  50. package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +10 -10
  51. package/emotion/cjs/components/Slider/ui/Handler/Handler.js +52 -88
  52. package/emotion/cjs/components/Slider/ui/Handler/Handler.styles.js +9 -15
  53. package/emotion/cjs/components/Slider/ui/Handler/computeKeyPressData.js +121 -0
  54. package/emotion/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
  55. package/emotion/cjs/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
  56. package/emotion/cjs/components/Slider/utils/index.js +28 -10
  57. package/emotion/cjs/components/Slider/variations/_view/base.js +2 -1
  58. package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
  59. package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +98 -16
  60. package/emotion/cjs/examples/plasma_web/components/Slider/Slider.config.js +7 -7
  61. package/emotion/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +98 -15
  62. package/emotion/es/components/Slider/Slider.js +11 -2
  63. package/emotion/es/components/Slider/Slider.template-doc.mdx +26 -0
  64. package/emotion/es/components/Slider/Slider.tokens.js +23 -17
  65. package/emotion/es/components/Slider/components/Double/Double.js +54 -19
  66. package/emotion/es/components/Slider/components/Single/Single.js +65 -34
  67. package/emotion/es/components/Slider/components/Single/Single.styles.js +17 -8
  68. package/emotion/es/components/Slider/components/SliderBase/SliderBase.js +31 -12
  69. package/emotion/es/components/Slider/components/SliderBase/SliderBase.styles.js +11 -11
  70. package/emotion/es/components/Slider/ui/Handler/Handler.js +51 -86
  71. package/emotion/es/components/Slider/ui/Handler/Handler.styles.js +10 -16
  72. package/emotion/es/components/Slider/ui/Handler/computeKeyPressData.js +115 -0
  73. package/emotion/es/components/Slider/ui/Thumb/Thumb.js +3 -2
  74. package/emotion/es/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
  75. package/emotion/es/components/Slider/utils/index.js +28 -10
  76. package/emotion/es/components/Slider/variations/_view/base.js +2 -1
  77. package/emotion/es/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
  78. package/emotion/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +98 -16
  79. package/emotion/es/examples/plasma_web/components/Slider/Slider.config.js +7 -7
  80. package/emotion/es/examples/plasma_web/components/Slider/Slider.stories.tsx +98 -15
  81. package/es/components/Slider/Slider.css +15 -13
  82. package/es/components/Slider/Slider.js +11 -2
  83. package/es/components/Slider/Slider.js.map +1 -1
  84. package/es/components/Slider/Slider.tokens.js +23 -17
  85. package/es/components/Slider/Slider.tokens.js.map +1 -1
  86. package/es/components/Slider/components/Double/Double.css +8 -8
  87. package/es/components/Slider/components/Double/Double.js +54 -19
  88. package/es/components/Slider/components/Double/Double.js.map +1 -1
  89. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +98 -0
  90. package/es/components/Slider/components/Single/Single.css +14 -14
  91. package/es/components/Slider/components/Single/Single.js +65 -34
  92. package/es/components/Slider/components/Single/Single.js.map +1 -1
  93. package/es/components/Slider/components/Single/Single.styles.js +4 -4
  94. package/es/components/Slider/components/Single/Single.styles.js.map +1 -1
  95. package/es/components/Slider/components/Single/Single.styles_1h7n2s2.css +6 -0
  96. package/es/components/Slider/components/SliderBase/SliderBase.css +5 -5
  97. package/es/components/Slider/components/SliderBase/SliderBase.js +31 -12
  98. package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
  99. package/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
  100. package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
  101. package/es/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css +5 -0
  102. package/es/components/Slider/ui/Handler/Handler.css +3 -3
  103. package/es/components/Slider/ui/Handler/Handler.js +48 -87
  104. package/es/components/Slider/ui/Handler/Handler.js.map +1 -1
  105. package/es/components/Slider/ui/Handler/Handler.styles.js +17 -7
  106. package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
  107. package/es/components/Slider/ui/Handler/Handler.styles_irtcgm.css +2 -0
  108. package/es/components/Slider/ui/Handler/computeKeyPressData.js +118 -0
  109. package/es/components/Slider/ui/Handler/computeKeyPressData.js.map +1 -0
  110. package/es/components/Slider/ui/Thumb/Thumb.css +1 -1
  111. package/es/components/Slider/ui/Thumb/Thumb.js +3 -2
  112. package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -1
  113. package/es/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
  114. package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
  115. package/es/components/Slider/ui/Thumb/Thumb.styles_uyn20e.css +1 -0
  116. package/es/components/Slider/utils/index.js +28 -10
  117. package/es/components/Slider/utils/index.js.map +1 -1
  118. package/es/components/Slider/variations/_view/base.js +1 -1
  119. package/es/components/Slider/variations/_view/base.js.map +1 -1
  120. package/es/components/Slider/variations/_view/base_1s3f6q8.css +1 -0
  121. package/es/index.css +15 -13
  122. package/es/utils/index.js.map +1 -1
  123. package/package.json +2 -2
  124. package/styled-components/cjs/components/Slider/Slider.js +10 -2
  125. package/styled-components/cjs/components/Slider/Slider.template-doc.mdx +26 -0
  126. package/styled-components/cjs/components/Slider/Slider.tokens.js +23 -17
  127. package/styled-components/cjs/components/Slider/components/Double/Double.js +54 -19
  128. package/styled-components/cjs/components/Slider/components/Single/Single.js +64 -33
  129. package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +6 -6
  130. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +31 -12
  131. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +6 -6
  132. package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +52 -88
  133. package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +7 -4
  134. package/styled-components/cjs/components/Slider/ui/Handler/computeKeyPressData.js +121 -0
  135. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
  136. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
  137. package/styled-components/cjs/components/Slider/utils/index.js +28 -10
  138. package/styled-components/cjs/components/Slider/variations/_view/base.js +2 -1
  139. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
  140. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +98 -16
  141. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +3 -3
  142. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +98 -15
  143. package/styled-components/es/components/Slider/Slider.js +11 -2
  144. package/styled-components/es/components/Slider/Slider.template-doc.mdx +26 -0
  145. package/styled-components/es/components/Slider/Slider.tokens.js +23 -17
  146. package/styled-components/es/components/Slider/components/Double/Double.js +54 -19
  147. package/styled-components/es/components/Slider/components/Single/Single.js +65 -34
  148. package/styled-components/es/components/Slider/components/Single/Single.styles.js +5 -5
  149. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +31 -12
  150. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
  151. package/styled-components/es/components/Slider/ui/Handler/Handler.js +51 -86
  152. package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -5
  153. package/styled-components/es/components/Slider/ui/Handler/computeKeyPressData.js +115 -0
  154. package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +3 -2
  155. package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
  156. package/styled-components/es/components/Slider/utils/index.js +28 -10
  157. package/styled-components/es/components/Slider/variations/_view/base.js +2 -1
  158. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
  159. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +98 -16
  160. package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +3 -3
  161. package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +98 -15
  162. package/types/components/Slider/Slider.d.ts.map +1 -1
  163. package/types/components/Slider/Slider.tokens.d.ts +22 -16
  164. package/types/components/Slider/Slider.tokens.d.ts.map +1 -1
  165. package/types/components/Slider/components/Double/Double.d.ts.map +1 -1
  166. package/types/components/Slider/components/Double/Double.types.d.ts +1 -0
  167. package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -1
  168. package/types/components/Slider/components/Single/Single.d.ts.map +1 -1
  169. package/types/components/Slider/components/Single/Single.styles.d.ts +1 -1
  170. package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -1
  171. package/types/components/Slider/components/Single/Single.types.d.ts +79 -7
  172. package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -1
  173. package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -1
  174. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +1 -1
  175. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -1
  176. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +6 -0
  177. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -1
  178. package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -1
  179. package/types/components/Slider/ui/Handler/Handler.styles.d.ts +6 -2
  180. package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -1
  181. package/types/components/Slider/ui/Handler/Handler.types.d.ts +5 -1
  182. package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -1
  183. package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts +12 -0
  184. package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts.map +1 -0
  185. package/types/components/Slider/ui/Thumb/Thumb.d.ts +1 -1
  186. package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -1
  187. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -1
  188. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +1 -0
  189. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -1
  190. package/types/components/Slider/utils/index.d.ts +26 -8
  191. package/types/components/Slider/utils/index.d.ts.map +1 -1
  192. package/types/components/Slider/variations/_view/base.d.ts.map +1 -1
  193. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -1
  194. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +80 -2
  195. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -1
  196. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -1
  197. package/types/examples/plasma_web/components/Slider/Slider.d.ts +80 -2
  198. package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -1
  199. package/types/utils/index.d.ts +1 -1
  200. package/types/utils/index.d.ts.map +1 -1
  201. package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
  202. package/cjs/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +0 -5
  203. package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +0 -2
  204. package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +0 -1
  205. package/cjs/components/Slider/variations/_view/base_x642ct.css +0 -1
  206. package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
  207. package/es/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +0 -5
  208. package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +0 -2
  209. package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +0 -1
  210. package/es/components/Slider/variations/_view/base_x642ct.css +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/Slider/utils/index.ts"],"sourcesContent":["import { MutableRefObject } from 'react';\n\n/**\n * Расчитать значение слайдера с учетом его координат и шага изменений.\n * @param {number} handleCenterXRelative\n * @param {number} stepSize\n * @param {number} min\n * @param {number} max\n * @return {number}\n */\nexport function getSliderThumbValue(handleCenterXRelative: number, stepSize: number, min: number, max: number) {\n const newValue = Math.round(handleCenterXRelative / stepSize) + min;\n\n return Math.min(Math.max(newValue, min), max);\n}\n\n/**\n * Расчитывает значение отступа слайдера на основе его положения (справа, слева) на отрезке слайдера.\n * Значение используется для правильного расчета ограничения движения слайдера.\n * @param ref\n * @param {'left' | 'right'} side\n * @return Array<number>\n */\nexport function getOffsets(\n ref: ((instance: HTMLDivElement | null) => void) | MutableRefObject<HTMLDivElement | null> | null,\n side?: 'left' | 'right',\n): number[] {\n if (!ref || !('current' in ref) || !ref.current || !side) {\n return [0, 0];\n }\n\n const size = ref.current.clientWidth;\n\n if (side === 'left') {\n return [0, size];\n }\n\n if (side === 'right') {\n return [size, 0];\n }\n\n return [0, 0];\n}\n\nexport const sizeData = {\n s: {\n indent: 0.5,\n fontSizeMultiplier: 16,\n },\n m: {\n indent: 0.75,\n fontSizeMultiplier: 16,\n },\n l: {\n indent: 0.75,\n fontSizeMultiplier: 16,\n },\n};\n"],"names":["getSliderThumbValue","handleCenterXRelative","stepSize","min","max","newValue","Math","round","getOffsets","ref","side","current","size","clientWidth","sizeData","s","indent","fontSizeMultiplier","m","l"],"mappings":";;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,mBAAmBA,CAACC,qBAA6B,EAAEC,QAAgB,EAAEC,GAAW,EAAEC,GAAW,EAAE;EAC3G,IAAMC,QAAQ,GAAGC,IAAI,CAACC,KAAK,CAACN,qBAAqB,GAAGC,QAAQ,CAAC,GAAGC,GAAG,CAAA;AAEnE,EAAA,OAAOG,IAAI,CAACH,GAAG,CAACG,IAAI,CAACF,GAAG,CAACC,QAAQ,EAAEF,GAAG,CAAC,EAAEC,GAAG,CAAC,CAAA;AACjD,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,UAAUA,CACtBC,GAAiG,EACjGC,IAAuB,EACf;AACR,EAAA,IAAI,CAACD,GAAG,IAAI,EAAE,SAAS,IAAIA,GAAG,CAAC,IAAI,CAACA,GAAG,CAACE,OAAO,IAAI,CAACD,IAAI,EAAE;AACtD,IAAA,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACjB,GAAA;AAEA,EAAA,IAAME,IAAI,GAAGH,GAAG,CAACE,OAAO,CAACE,WAAW,CAAA;EAEpC,IAAIH,IAAI,KAAK,MAAM,EAAE;AACjB,IAAA,OAAO,CAAC,CAAC,EAAEE,IAAI,CAAC,CAAA;AACpB,GAAA;EAEA,IAAIF,IAAI,KAAK,OAAO,EAAE;AAClB,IAAA,OAAO,CAACE,IAAI,EAAE,CAAC,CAAC,CAAA;AACpB,GAAA;AAEA,EAAA,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACjB,CAAA;AAEO,IAAME,QAAQ,GAAG;AACpBC,EAAAA,CAAC,EAAE;AACCC,IAAAA,MAAM,EAAE,GAAG;AACXC,IAAAA,kBAAkB,EAAE,EAAA;GACvB;AACDC,EAAAA,CAAC,EAAE;AACCF,IAAAA,MAAM,EAAE,IAAI;AACZC,IAAAA,kBAAkB,EAAE,EAAA;GACvB;AACDE,EAAAA,CAAC,EAAE;AACCH,IAAAA,MAAM,EAAE,IAAI;AACZC,IAAAA,kBAAkB,EAAE,EAAA;AACxB,GAAA;AACJ;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/Slider/utils/index.ts"],"sourcesContent":["import { MutableRefObject } from 'react';\n\n/**\n * Расчитать значение слайдера с учетом его координат и шага изменений.\n * @param {number} handleCenterXRelative\n * @param {number} stepSize\n * @param {number} min\n * @param {number} max\n * @return {number}\n */\nexport function getSliderThumbValue(handleCenterPosRelative: number, stepSize: number, min: number, max: number) {\n const newValue = Math.round(handleCenterPosRelative / stepSize) + min;\n\n return Math.min(Math.max(newValue, min), max);\n}\n\n/**\n * Расчитывает значение отступа слайдера на основе его положения (справа, слева) на отрезке слайдера.\n * Значение используется для правильного расчета ограничения движения слайдера.\n * @param ref\n * @param {'left' | 'right'} side\n * @return Array<number>\n */\nexport function getOffsets(\n ref: ((instance: HTMLDivElement | null) => void) | MutableRefObject<HTMLDivElement | null> | null,\n side?: 'left' | 'right',\n isVertical?: boolean,\n): number[] {\n if (!ref || !('current' in ref) || !ref.current || !side) {\n return [0, 0];\n }\n\n const size = isVertical ? ref.current.clientHeight : ref.current.clientWidth;\n\n if (side === 'left') {\n return [0, size];\n }\n\n if (side === 'right') {\n return [size, 0];\n }\n\n return [0, 0];\n}\n\nexport const sizeData = {\n s: {\n small: {\n indent: 0.5,\n fontSizeMultiplier: 16,\n },\n large: {\n indent: 0.625,\n fontSizeMultiplier: 16,\n },\n },\n m: {\n small: {\n indent: 0.5,\n fontSizeMultiplier: 16,\n },\n large: {\n indent: 0.625,\n fontSizeMultiplier: 16,\n },\n },\n l: {\n small: {\n indent: 0.5,\n fontSizeMultiplier: 16,\n },\n large: {\n indent: 0.625,\n fontSizeMultiplier: 16,\n },\n },\n};\n"],"names":["getSliderThumbValue","handleCenterPosRelative","stepSize","min","max","newValue","Math","round","getOffsets","ref","side","isVertical","current","size","clientHeight","clientWidth","sizeData","s","small","indent","fontSizeMultiplier","large","m","l"],"mappings":";;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,mBAAmBA,CAACC,uBAA+B,EAAEC,QAAgB,EAAEC,GAAW,EAAEC,GAAW,EAAE;EAC7G,IAAMC,QAAQ,GAAGC,IAAI,CAACC,KAAK,CAACN,uBAAuB,GAAGC,QAAQ,CAAC,GAAGC,GAAG,CAAA;AAErE,EAAA,OAAOG,IAAI,CAACH,GAAG,CAACG,IAAI,CAACF,GAAG,CAACC,QAAQ,EAAEF,GAAG,CAAC,EAAEC,GAAG,CAAC,CAAA;AACjD,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,UAAUA,CACtBC,GAAiG,EACjGC,IAAuB,EACvBC,UAAoB,EACZ;AACR,EAAA,IAAI,CAACF,GAAG,IAAI,EAAE,SAAS,IAAIA,GAAG,CAAC,IAAI,CAACA,GAAG,CAACG,OAAO,IAAI,CAACF,IAAI,EAAE;AACtD,IAAA,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACjB,GAAA;AAEA,EAAA,IAAMG,IAAI,GAAGF,UAAU,GAAGF,GAAG,CAACG,OAAO,CAACE,YAAY,GAAGL,GAAG,CAACG,OAAO,CAACG,WAAW,CAAA;EAE5E,IAAIL,IAAI,KAAK,MAAM,EAAE;AACjB,IAAA,OAAO,CAAC,CAAC,EAAEG,IAAI,CAAC,CAAA;AACpB,GAAA;EAEA,IAAIH,IAAI,KAAK,OAAO,EAAE;AAClB,IAAA,OAAO,CAACG,IAAI,EAAE,CAAC,CAAC,CAAA;AACpB,GAAA;AAEA,EAAA,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACjB,CAAA;AAEO,IAAMG,QAAQ,GAAG;AACpBC,EAAAA,CAAC,EAAE;AACCC,IAAAA,KAAK,EAAE;AACHC,MAAAA,MAAM,EAAE,GAAG;AACXC,MAAAA,kBAAkB,EAAE,EAAA;KACvB;AACDC,IAAAA,KAAK,EAAE;AACHF,MAAAA,MAAM,EAAE,KAAK;AACbC,MAAAA,kBAAkB,EAAE,EAAA;AACxB,KAAA;GACH;AACDE,EAAAA,CAAC,EAAE;AACCJ,IAAAA,KAAK,EAAE;AACHC,MAAAA,MAAM,EAAE,GAAG;AACXC,MAAAA,kBAAkB,EAAE,EAAA;KACvB;AACDC,IAAAA,KAAK,EAAE;AACHF,MAAAA,MAAM,EAAE,KAAK;AACbC,MAAAA,kBAAkB,EAAE,EAAA;AACxB,KAAA;GACH;AACDG,EAAAA,CAAC,EAAE;AACCL,IAAAA,KAAK,EAAE;AACHC,MAAAA,MAAM,EAAE,GAAG;AACXC,MAAAA,kBAAkB,EAAE,EAAA;KACvB;AACDC,IAAAA,KAAK,EAAE;AACHF,MAAAA,MAAM,EAAE,KAAK;AACbC,MAAAA,kBAAkB,EAAE,EAAA;AACxB,KAAA;AACJ,GAAA;AACJ;;;;;;"}
@@ -1,4 +1,4 @@
1
- import './base_x642ct.css';
1
+ import './base_1s3f6q8.css';
2
2
  'use strict';
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
@@ -1 +1 @@
1
- {"version":3,"file":"base.js","sources":["../../../../../src/components/Slider/variations/_view/base.tsx"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":";;;;AAEO,IAAMA,IAAI,GAAQ;;;;"}
1
+ {"version":3,"file":"base.js","sources":["../../../../../src/components/Slider/variations/_view/base.tsx"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes } from '../../Slider.tokens';\n\nexport const base = css`\n &.${classes.verticalOrientation} {\n height: 100%;\n display: inline-flex;\n }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAKhB;;;;"}
@@ -0,0 +1 @@
1
+ .b1c93yiw.slider-vertical-orientation{height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
package/cjs/index.css CHANGED
@@ -659,18 +659,20 @@
659
659
 
660
660
  .Sheet_styles_o73i75_sqp1ccu__24445093{width:100%;z-index:1;padding-bottom:1rem;position:var(--sqp1ccu-0);bottom:var(--sqp1ccu-1);background-color:var(--sqp1ccu-2);}
661
661
 
662
- .SliderBase_styles_9s4eb3_s33crq1__d6fac54b{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:var(--plasma-slider-height);}
663
- .SliderBase_styles_9s4eb3_rnaoqfb__d6fac54b{height:100%;}
664
- .SliderBase_styles_9s4eb3_r1bro5xo__d6fac54b{position:relative;top:50%;height:var(--plasma-slider-rail-height);border-radius:var(--plasma-slider-rail-border-radius);background-color:var(--plasma-slider-rail-background-color);overflow:hidden;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
665
- .SliderBase_styles_9s4eb3_fdg7yhg__d6fac54b{position:absolute;height:100%;top:0;left:0;background:var(--plasma-slider-fill-color);width:0;}
666
- .SliderBase_styles_9s4eb3_i17ya4q3__d6fac54b{visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;border:none;}
662
+ .base_1s3f6q8_b1c93yiw__8f5ba4a1.base_1s3f6q8_sliderVerticalOrientation__8f5ba4a1{height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
667
663
 
668
- .Single_styles_1r9f1e0_l1p4kc08__4db690dd{color:var(--plasma-slider-label-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-slider-label-wrapper-gap);}
664
+ .SliderBase_styles_1qt1224_r33crq1__8fd7c64a{position:relative;top:50%;height:var(--plasma-slider-rail-thickness);border-radius:var(--plasma-slider-rail-border-radius);background-color:var(--plasma-slider-rail-background-color);overflow:hidden;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
665
+ .SliderBase_styles_1qt1224_snaoqfb__8fd7c64a{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:var(--plasma-slider-size);}.SliderBase_styles_1qt1224_snaoqfb__8fd7c64a.SliderBase_styles_1qt1224_sliderVerticalOrientation__8fd7c64a{width:var(--plasma-slider-size);height:auto;}.SliderBase_styles_1qt1224_snaoqfb__8fd7c64a.SliderBase_styles_1qt1224_sliderVerticalOrientation__8fd7c64a .SliderBase_styles_1qt1224_r33crq1__8fd7c64a{top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:var(--plasma-slider-rail-thickness);height:100%;}
666
+ .SliderBase_styles_1qt1224_r1bro5xo__8fd7c64a{height:100%;}
667
+ .SliderBase_styles_1qt1224_fdg7yhg__8fd7c64a{position:absolute;height:100%;top:0;left:0;background:var(--plasma-slider-fill-color);width:0;}
668
+ .SliderBase_styles_1qt1224_i17ya4q3__8fd7c64a{visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;border:none;}
669
669
 
670
- .Single_styles_1r9f1e0_lozb535__4db690dd{font-family:var(--plasma-slider-label-font-family);font-size:var(--plasma-slider-label-font-size);font-style:var(--plasma-slider-label-font-style);font-weight:var(--plasma-slider-label-font-weight);-webkit-letter-spacing:var(--plasma-slider-label-letter-spacing);-moz-letter-spacing:var(--plasma-slider-label-letter-spacing);-ms-letter-spacing:var(--plasma-slider-label-letter-spacing);letter-spacing:var(--plasma-slider-label-letter-spacing);line-height:var(--plasma-slider-label-line-height);}
671
- .Single_styles_1r9f1e0_s1w9icbd__4db690dd{color:var(--plasma-slider-range-value-color);font-family:var(--plasma-slider-range-value-font-family);font-size:var(--plasma-slider-range-value-font-size);font-style:var(--plasma-slider-range-value-font-style);font-weight:var(--plasma-slider-range-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-range-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-range-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-range-value-letter-spacing);letter-spacing:var(--plasma-slider-range-value-letter-spacing);line-height:var(--plasma-slider-range-value-line-height);-webkit-transition:opacity 0.1s ease-in-out;transition:opacity 0.1s ease-in-out;}.Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderHideMinValue__4db690dd,.Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderHideMaxValue__4db690dd{opacity:0;}.Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderActiveRangeValue__4db690dd{color:var(--plasma-slider-label-color);}
672
- .Single_styles_1r9f1e0_s1d2sfgl__4db690dd{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementOuter__4db690dd .Single_styles_1r9f1e0_s1w9icbd__4db690dd{position:absolute;bottom:var(--plasma-slider-range-value-bottom-offset);left:0;}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementOuter__4db690dd .Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderMaxRangeValue__4db690dd{left:unset;right:0;}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementInner__4db690dd{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementInner__4db690dd .Single_styles_1r9f1e0_s1w9icbd__4db690dd{margin-right:var(--plasma-slider-range-min-value-margin);}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementInner__4db690dd .Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderMaxRangeValue__4db690dd{margin-right:0;margin-left:var(--plasma-slider-range-max-value-margin);}
673
- .Single_styles_1r9f1e0_ss3ujqx__4db690dd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;opacity:var(--plasma-slider-disabled-opacity);}.Single_styles_1r9f1e0_ss3ujqx__4db690dd.Single_styles_1r9f1e0_sliderLabelPlacementOuter__4db690dd{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Single_styles_1r9f1e0_ss3ujqx__4db690dd.Single_styles_1r9f1e0_sliderLabelPlacementOuter__4db690dd .Single_styles_1r9f1e0_l1p4kc08__4db690dd{margin-bottom:var(--plasma-slider-label-wrapper-margin-bottom);}.Single_styles_1r9f1e0_ss3ujqx__4db690dd.Single_styles_1r9f1e0_sliderLabelPlacementInner__4db690dd .Single_styles_1r9f1e0_l1p4kc08__4db690dd{margin-right:var(--plasma-slider-label-wrapper-margin-right);}
670
+ .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{color:var(--plasma-slider-label-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-slider-label-wrapper-gap);}
671
+ .Single_styles_1h7n2s2_ly2gexi__5fe9b6cf{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
672
+ .Single_styles_1h7n2s2_lozb535__5fe9b6cf{font-family:var(--plasma-slider-label-font-family);font-size:var(--plasma-slider-label-font-size);font-style:var(--plasma-slider-label-font-style);font-weight:var(--plasma-slider-label-font-weight);-webkit-letter-spacing:var(--plasma-slider-label-letter-spacing);-moz-letter-spacing:var(--plasma-slider-label-letter-spacing);-ms-letter-spacing:var(--plasma-slider-label-letter-spacing);letter-spacing:var(--plasma-slider-label-letter-spacing);line-height:var(--plasma-slider-label-line-height);}
673
+ .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf{color:var(--plasma-slider-range-value-color);font-family:var(--plasma-slider-value-font-family);font-size:var(--plasma-slider-value-font-size);font-style:var(--plasma-slider-value-font-style);font-weight:var(--plasma-slider-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-value-letter-spacing);letter-spacing:var(--plasma-slider-value-letter-spacing);line-height:var(--plasma-slider-value-line-height);-webkit-transition:opacity 0.1s ease-in-out;transition:opacity 0.1s ease-in-out;}.Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderHideMinValue__5fe9b6cf,.Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderHideMaxValue__5fe9b6cf{opacity:0;}.Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderActiveRangeValue__5fe9b6cf{color:var(--plasma-slider-label-color);}
674
+ .Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;}.Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf.Single_styles_1h7n2s2_sliderRangeValuesPlacementOuter__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf{position:absolute;bottom:calc(var(--plasma-slider-rail-thickness) * -1.5 - var(--plasma-slider-range-value-bottom-offset));left:0;}.Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf.Single_styles_1h7n2s2_sliderRangeValuesPlacementOuter__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderMaxRangeValue__5fe9b6cf{left:unset;right:0;}.Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf.Single_styles_1h7n2s2_sliderRangeValuesPlacementInner__5fe9b6cf{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf.Single_styles_1h7n2s2_sliderRangeValuesPlacementInner__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf{margin-right:var(--plasma-slider-range-value-horizontal-margin);}.Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf.Single_styles_1h7n2s2_sliderRangeValuesPlacementInner__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderMaxRangeValue__5fe9b6cf{margin-right:0;margin-left:var(--plasma-slider-range-value-horizontal-margin);}
675
+ .Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;opacity:var(--plasma-slider-disabled-opacity);}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementOuter__5fe9b6cf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementOuter__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{margin-bottom:var(--plasma-slider-label-wrapper-margin-bottom);}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementInner__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{margin-right:var(--plasma-slider-label-wrapper-margin-right);}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignCenter__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignCenter__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementBottom__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignCenter__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementBottom__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelContentReversed__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignCenter__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelContentReversed__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf .Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf{width:var(--plasma-slider-size);}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementInner__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{margin-right:0;margin-bottom:var(--plasma-slider-label-wrapper-vertical-margin);}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignLeft__5fe9b6cf{-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignLeft__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignRight__5fe9b6cf{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementBottom__5fe9b6cf{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementBottom__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{margin-top:var(--plasma-slider-label-wrapper-vertical-margin);margin-right:0;margin-bottom:0;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf .Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignCenter__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf{position:static;bottom:0;left:0;margin-bottom:var(--plasma-slider-range-value-vertical-margin);}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignCenter__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderMaxRangeValue__5fe9b6cf{left:0;right:0;bottom:0;margin-top:var(--plasma-slider-range-value-vertical-margin);margin-bottom:0;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignLeft__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf,.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignRight__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf{margin-right:0;margin-bottom:0;position:absolute;top:0;right:calc( var(--plasma-slider-rail-thickness) / 2 + var(--plasma-slider-size) / 2 + var(--plasma-slider-range-value-horizontal-offset) );}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignLeft__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderMaxRangeValue__5fe9b6cf,.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignRight__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderMaxRangeValue__5fe9b6cf{margin-right:0;margin-left:0;top:auto;bottom:0;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignRight__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf{left:calc(var(--plasma-slider-size) + var(--plasma-slider-rail-thickness));}
674
676
 
675
677
  .Double_styles_1jhda4u_lcs82cd__5dc981f4{color:var(--plasma-slider-label-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-slider-label-wrapper-gap);margin-bottom:var(--plasma-slider-label-wrapper-margin-bottom);}
676
678
 
@@ -680,10 +682,10 @@
680
682
  .Double_styles_1jhda4u_d3kvcjo__5dc981f4{opacity:var(--plasma-slider-disabled-opacity);}
681
683
 
682
684
 
683
- .Handler_styles_8crx5z_h1tnrnip__2d4342c7{cursor:pointer;position:absolute;z-index:1;top:0;left:0;}
684
- .Handler_styles_8crx5z_s12uu2lj__2d4342c7{position:absolute;z-index:1;top:var(--plasma-slider-current-value-top-offset);text-align:center;width:100%;margin-left:-0.125rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-family:var(--plasma-slider-current-value-font-family);font-size:var(--plasma-slider-current-value-font-size);font-style:var(--plasma-slider-current-value-font-style);font-weight:var(--plasma-slider-current-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-current-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-current-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-current-value-letter-spacing);letter-spacing:var(--plasma-slider-current-value-letter-spacing);line-height:var(--plasma-slider-current-value-line-height);}
685
+ .Handler_styles_irtcgm_s1tnrnip__e8f853c5{position:absolute;z-index:1;top:var(--plasma-slider-current-value-top-offset);text-align:center;width:100%;margin-left:-0.125rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-family:var(--plasma-slider-value-font-family);font-size:var(--plasma-slider-value-font-size);font-style:var(--plasma-slider-value-font-style);font-weight:var(--plasma-slider-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-value-letter-spacing);letter-spacing:var(--plasma-slider-value-letter-spacing);line-height:var(--plasma-slider-value-line-height);}
686
+ .Handler_styles_irtcgm_h12uu2lj__e8f853c5{cursor:pointer;position:absolute;z-index:1;top:0;left:0;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;--thumb-size:var(--h12uu2lj-0);}.Handler_styles_irtcgm_h12uu2lj__e8f853c5.Handler_styles_irtcgm_sliderVerticalOrientation__e8f853c5{right:0;bottom:auto;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.Handler_styles_irtcgm_h12uu2lj__e8f853c5.Handler_styles_irtcgm_sliderVerticalOrientation__e8f853c5 .Handler_styles_irtcgm_s1tnrnip__e8f853c5{margin:0;top:0;bottom:0;right:0;left:calc(var(--plasma-slider-size) - (var(--plasma-slider-size) - var(--thumb-size)) / 2 + 0.25rem);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}.Handler_styles_irtcgm_h12uu2lj__e8f853c5.Handler_styles_irtcgm_sliderValuePlacementLeft__e8f853c5 .Handler_styles_irtcgm_s1tnrnip__e8f853c5{left:auto;right:calc(var(--plasma-slider-size) - (var(--plasma-slider-size) - var(--thumb-size)) / 2 + 0.3125rem);-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}
685
687
 
686
- .Thumb_styles_4w4gzn_tqbdf8b__14129a5b{width:var(--plasma-slider-thumb-size);height:var(--plasma-slider-thumb-size);position:relative;left:-0.125rem;top:-0.125rem;border-radius:50%;box-sizing:border-box;background:var(--plasma-slider-thumb-background-color);margin:0.125rem;-webkit-transition:border-color 0.1s ease-in-out;transition:border-color 0.1s ease-in-out;position:relative;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:after{background:var(--plasma-slider-thumb-border-color);margin:-0.125rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:not([disabled]):hover:after,.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:not([disabled]):active:after{background:var(--plasma-slider-thumb-focus-border-color);}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b[disabled]{cursor:not-allowed;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:focus{outline:none;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b::before{content:'';position:absolute;top:0.125rem;left:0.125rem;right:0.125rem;bottom:0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:50%;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b.Thumb_styles_4w4gzn_focusVisible__14129a5b:focus::before,.Thumb_styles_4w4gzn_tqbdf8b__14129a5b[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem var(--plasma-slider-thumb-focus-border-color);}
688
+ .Thumb_styles_uyn20e_tqbdf8b__de0962c7{width:var(--thumb-size);height:var(--thumb-size);min-width:var(--thumb-size);min-height:var(--thumb-size);position:relative;border-radius:50%;box-sizing:border-box;background:var(--plasma-slider-thumb-background-color);margin:0.0625rem;-webkit-transition:border-color 0.1s ease-in-out;transition:border-color 0.1s ease-in-out;position:relative;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7:after{background:var(--plasma-slider-thumb-border-color);margin:-0.0625rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7:not([disabled]):hover:after,.Thumb_styles_uyn20e_tqbdf8b__de0962c7:not([disabled]):active:after{background:var(--plasma-slider-thumb-focus-border-color);}.Thumb_styles_uyn20e_tqbdf8b__de0962c7[disabled]{cursor:not-allowed;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7:focus{outline:none;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:50%;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7.Thumb_styles_uyn20e_focusVisible__de0962c7:focus::before,.Thumb_styles_uyn20e_tqbdf8b__de0962c7[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem var(--plasma-slider-thumb-focus-border-color);}
687
689
 
688
690
  .StepItem_styles_sp9rcd_snf9dn9__20446152{--plasma-spinner-size:var(--snf9dn9-0);--plasma-spinner-color:var(--plasma-step-item-active-indicator-color);}
689
691
  .StepItem_styles_sp9rcd_sv5tpso__20446152{padding-top:var(--plasma-step-item-title-padding-top);padding-right:var(--plasma-step-item-content-side-padding);font-family:var(--plasma-step-item-title-font-family);font-size:var(--plasma-step-item-title-font-size);font-style:var(--plasma-step-item-title-font-style);font-weight:var(--plasma-step-item-title-font-weight);-webkit-letter-spacing:var(--plasma-step-item-title-letter-spacing);-moz-letter-spacing:var(--plasma-step-item-title-letter-spacing);-ms-letter-spacing:var(--plasma-step-item-title-letter-spacing);letter-spacing:var(--plasma-step-item-title-letter-spacing);line-height:var(--plasma-step-item-title-line-height);word-break:break-word;}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from '@linaria/core';\n\nexport { canUseDOM } from './canUseDOM';\nexport { extractTextFrom } from './extractTextFrom';\nexport { getSizeValueFromProp } from './getSizeValueFromProp';\nexport { IS_REACT_18, safeUseId } from './react';\nexport { isNumber } from './isNumber';\nexport { mergeRefs, setRefList } from './setRefList';\nexport { isEmpty } from './isEmpty';\nexport * as constants from './constants';\nexport * from './getPopoverPlacement';\nexport { noop } from './noop';\n\nexport const cx = (...classes: (string | undefined)[]) => classes.filter((classItem) => classItem).join(' ');\n\nexport const composableStyle = (s: TemplateStringsArray, ...expr: Array<string | number | CSSProperties>): string => {\n let res = '';\n for (let i = 0; i < Math.max(s.length, expr.length); ++i) {\n res += s[i] ?? '';\n res += expr[i] ?? '';\n }\n\n return res;\n};\n"],"names":["cx","_len","arguments","length","classes","Array","_key","filter","classItem","join","composableStyle","s","res","i","Math","max","_s$i","_ref","undefined"],"mappings":";;;;AAaaA,IAAAA,EAAE,GAAG,SAALA,EAAEA,GAAA;AAAA,EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAOC,OAAO,GAAAC,IAAAA,KAAA,CAAAJ,IAAA,GAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAPF,IAAAA,OAAO,CAAAE,IAAA,CAAAJ,GAAAA,SAAA,CAAAI,IAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,OAA6BF,OAAO,CAACG,MAAM,CAAC,UAACC,SAAS,EAAA;AAAA,IAAA,OAAKA,SAAS,CAAA;AAAA,GAAA,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;AAAA,EAAA;IAE/FC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,CAAuB,EAA8D;EACjH,IAAIC,GAAG,GAAG,EAAE,CAAA;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,CAAC,CAACR,MAAM,EAAAD,SAAA,CAAAC,MAAA,IAAA,CAAA,GAAA,CAAA,GAAAD,SAAA,CAAAC,MAAA,GAAA,CAAa,CAAC,EAAE,EAAEU,CAAC,EAAE;IAAA,IAAAG,IAAA,EAAAC,IAAA,CAAA;AACtDL,IAAAA,GAAG,IAAAI,CAAAA,IAAA,GAAIL,CAAC,CAACE,CAAC,CAAC,MAAA,IAAA,IAAAG,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAI,EAAE,CAAA;IACjBJ,GAAG,IAAA,CAAAK,IAAA,GAASJ,CAAC,YAAAX,SAAA,CAAAC,MAAA,IAADU,CAAC,OAAAK,SAAA,GAAAhB,SAAA,CAADW,CAAC,mBAAAI,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAK,EAAE,CAAA;AACxB,GAAA;AAEA,EAAA,OAAOL,GAAG,CAAA;AACd;;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from '@linaria/core';\n\nexport { canUseDOM } from './canUseDOM';\nexport { extractTextFrom } from './extractTextFrom';\nexport { getSizeValueFromProp } from './getSizeValueFromProp';\nexport { IS_REACT_18, safeUseId } from './react';\nexport { isNumber } from './isNumber';\nexport { mergeRefs, setRefList } from './setRefList';\nexport { isEmpty } from './isEmpty';\nexport * as constants from './constants';\nexport * from './getPopoverPlacement';\nexport { noop } from './noop';\n\nexport const cx = (...classes: (string | boolean | undefined)[]) => classes.filter((classItem) => classItem).join(' ');\n\nexport const composableStyle = (s: TemplateStringsArray, ...expr: Array<string | number | CSSProperties>): string => {\n let res = '';\n for (let i = 0; i < Math.max(s.length, expr.length); ++i) {\n res += s[i] ?? '';\n res += expr[i] ?? '';\n }\n\n return res;\n};\n"],"names":["cx","_len","arguments","length","classes","Array","_key","filter","classItem","join","composableStyle","s","res","i","Math","max","_s$i","_ref","undefined"],"mappings":";;;;AAaaA,IAAAA,EAAE,GAAG,SAALA,EAAEA,GAAA;AAAA,EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAOC,OAAO,GAAAC,IAAAA,KAAA,CAAAJ,IAAA,GAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAPF,IAAAA,OAAO,CAAAE,IAAA,CAAAJ,GAAAA,SAAA,CAAAI,IAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,OAAuCF,OAAO,CAACG,MAAM,CAAC,UAACC,SAAS,EAAA;AAAA,IAAA,OAAKA,SAAS,CAAA;AAAA,GAAA,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;AAAA,EAAA;IAEzGC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,CAAuB,EAA8D;EACjH,IAAIC,GAAG,GAAG,EAAE,CAAA;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,CAAC,CAACR,MAAM,EAAAD,SAAA,CAAAC,MAAA,IAAA,CAAA,GAAA,CAAA,GAAAD,SAAA,CAAAC,MAAA,GAAA,CAAa,CAAC,EAAE,EAAEU,CAAC,EAAE;IAAA,IAAAG,IAAA,EAAAC,IAAA,CAAA;AACtDL,IAAAA,GAAG,IAAAI,CAAAA,IAAA,GAAIL,CAAC,CAACE,CAAC,CAAC,MAAA,IAAA,IAAAG,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAI,EAAE,CAAA;IACjBJ,GAAG,IAAA,CAAAK,IAAA,GAASJ,CAAC,YAAAX,SAAA,CAAAC,MAAA,IAADU,CAAC,OAAAK,SAAA,GAAAhB,SAAA,CAADW,CAAC,mBAAAI,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAK,EAAE,CAAA;AACxB,GAAA;AAEA,EAAA,OAAOL,GAAG,CAAA;AACd;;;;;"}
@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.sliderRoot = exports.sliderConfig = void 0;
7
7
  var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
8
+ var _utils = /*#__PURE__*/require("../../utils");
8
9
  var _base = /*#__PURE__*/require("./variations/_view/base");
9
10
  var _base2 = /*#__PURE__*/require("./variations/_size/base");
10
11
  var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
11
12
  var _components = /*#__PURE__*/require("./components");
13
+ var _Slider = /*#__PURE__*/require("./Slider.tokens");
12
14
  var _excluded = ["type"];
13
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
16
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -29,9 +31,15 @@ var sliderRoot = exports.sliderRoot = function sliderRoot(Root) {
29
31
  var _ref$type = _ref.type,
30
32
  type = _ref$type === void 0 ? 'single' : _ref$type,
31
33
  props = _objectWithoutProperties(_ref, _excluded);
32
- return /*#__PURE__*/_react["default"].createElement(Root, _extends({}, props, {
34
+ if (isSingleValueProps(props, type)) {
35
+ return /*#__PURE__*/_react["default"].createElement(Root, _extends({}, props, {
36
+ className: (0, _utils.cx)(props.orientation === 'vertical' && _Slider.classes.verticalOrientation, props.className),
37
+ ref: ref
38
+ }), /*#__PURE__*/_react["default"].createElement(_components.SingleSlider, props));
39
+ }
40
+ return /*#__PURE__*/_react["default"].createElement(Root, _extends({
33
41
  ref: ref
34
- }), isSingleValueProps(props, type) && /*#__PURE__*/_react["default"].createElement(_components.SingleSlider, props), isDoubleValueProps(props, type) && /*#__PURE__*/_react["default"].createElement(_components.DoubleUncontrolled, props));
42
+ }, props), isDoubleValueProps(props, type) && /*#__PURE__*/_react["default"].createElement(_components.DoubleUncontrolled, props));
35
43
  });
36
44
  };
37
45
  var sliderConfig = exports.sliderConfig = {
@@ -76,3 +76,29 @@ export function App() {
76
76
  );
77
77
  }
78
78
  ```
79
+
80
+ # Вертикальное отображение
81
+
82
+ ```tsx live
83
+ import React from 'react';
84
+ import { Slider } from '@salutejs/{{ package }}';
85
+ import { IconMic } from '@salutejs/plasma-icons';
86
+
87
+ export function App() {
88
+ return (
89
+ <section style={{ minHeight: '300px' }}>
90
+ <Slider
91
+ onChangeCommitted={() => {}}
92
+ min={0}
93
+ max={100}
94
+ value={30}
95
+ label="Громкость"
96
+ labelContent={<IconMic size="s" />}
97
+ orientation="vertical"
98
+ sliderAlign="center"
99
+ size="m"
100
+ />
101
+ </section>
102
+ );
103
+ }
104
+ ```
@@ -7,6 +7,12 @@ exports.tokens = exports.classes = void 0;
7
7
  var classes = exports.classes = {
8
8
  labelPlacementOuter: 'slider-label-placement-outer',
9
9
  labelPlacementInner: 'slider-label-placement-inner',
10
+ labelPlacementBottom: 'slider-label-placement-bottom',
11
+ labelAlignLeft: 'slider-label-align-left',
12
+ labelAlignCenter: 'slider-label-align-center',
13
+ labelAlignRight: 'slider-label-align-right',
14
+ labelAlignNone: 'slider-label-align-none',
15
+ labelContentReversed: 'slider-label-content-reversed',
10
16
  rangeValuesPlacementOuter: 'slider-range-values-placement-outer',
11
17
  rangeValuesPlacementInner: 'slider-range-values-placement-inner',
12
18
  maxRangeValue: 'slider-max-range-value',
@@ -15,13 +21,17 @@ var classes = exports.classes = {
15
21
  textFieldActive: 'slider-text-field-active',
16
22
  firstTextField: 'slider-first-text-field',
17
23
  secondTextField: 'slider-second-text-field',
18
- activeRangeValue: 'slider-active-range-value'
24
+ activeRangeValue: 'slider-active-range-value',
25
+ verticalOrientation: 'slider-vertical-orientation',
26
+ valuePlacementLeft: 'slider-value-placement-left',
27
+ reversed: 'slider-reversed'
19
28
  };
20
29
  var tokens = exports.tokens = {
21
- height: '--plasma-slider-height',
30
+ size: '--plasma-slider-size',
22
31
  labelWrapperGap: '--plasma-slider-label-wrapper-gap',
23
32
  labelWrapperMarginBottom: '--plasma-slider-label-wrapper-margin-bottom',
24
33
  labelWrapperMarginRight: '--plasma-slider-label-wrapper-margin-right',
34
+ labelWrapperVerticalMargin: '--plasma-slider-label-wrapper-vertical-margin',
25
35
  labelColor: '--plasma-slider-label-color',
26
36
  labelFontFamily: '--plasma-slider-label-font-family',
27
37
  labelFontSize: '--plasma-slider-label-font-size',
@@ -29,31 +39,27 @@ var tokens = exports.tokens = {
29
39
  labelFontWeight: '--plasma-slider-label-font-weight',
30
40
  labelLetterSpacing: '--plasma-slider-label-letter-spacing',
31
41
  labelLineHeight: '--plasma-slider-label-line-height',
32
- rangeMinValueMargin: '--plasma-slider-range-min-value-margin',
33
- rangeMaxValueMargin: '--plasma-slider-range-max-value-margin',
34
42
  rangeValueBottomOffset: '--plasma-slider-range-value-bottom-offset',
43
+ rangeValueHorizontalMargin: '--plasma-slider-range-value-horizontal-margin',
44
+ rangeValueHorizontalOffset: '--plasma-slider-range-value-horizontal-offset',
45
+ rangeValueVerticalMargin: '--plasma-slider-range-value-vertical-margin',
35
46
  rangeValueColor: '--plasma-slider-range-value-color',
36
- rangeValueFontFamily: '--plasma-slider-range-value-font-family',
37
- rangeValueFontSize: '--plasma-slider-range-value-font-size',
38
- rangeValueFontStyle: '--plasma-slider-range-value-font-style',
39
- rangeValueFontWeight: '--plasma-slider-range-value-font-weight',
40
- rangeValueLetterSpacing: '--plasma-slider-range-value-letter-spacing',
41
- rangeValueLineHeight: '--plasma-slider-range-value-line-height',
47
+ valueFontFamily: '--plasma-slider-value-font-family',
48
+ valueFontSize: '--plasma-slider-value-font-size',
49
+ valueFontStyle: '--plasma-slider-value-font-style',
50
+ valueFontWeight: '--plasma-slider-value-font-weight',
51
+ valueLetterSpacing: '--plasma-slider-value-letter-spacing',
52
+ valueLineHeight: '--plasma-slider-value-line-height',
42
53
  doubleWrapperGap: '--plasma-slider-double-wrapper-gap',
43
54
  thumbSize: '--plasma-slider-thumb-size',
55
+ thumbSizeLarge: '--plasma-slider-thumb-size-large',
44
56
  thumbBorder: '--plasma-slider-thumb-border',
45
57
  thumbBorderColor: '--plasma-slider-thumb-border-color',
46
58
  thumbBackgroundColor: '--plasma-slider-thumb-background-color',
47
59
  thumbFocusBorderColor: '--plasma-slider-thumb-focus-border-color',
48
60
  currentValueTopOffset: '--plasma-slider-current-value-top-offset',
49
- currentValueFontFamily: '--plasma-slider-current-value-font-family',
50
- currentValueFontSize: '--plasma-slider-current-value-font-size',
51
- currentValueFontStyle: '--plasma-slider-current-value-font-style',
52
- currentValueFontWeight: '--plasma-slider-current-value-font-weight',
53
- currentValueLetterSpacing: '--plasma-slider-current-value-letter-spacing',
54
- currentValueLineHeight: '--plasma-slider-current-value-line-height',
55
61
  railBackgroundColor: '--plasma-slider-rail-background-color',
56
- railHeight: '--plasma-slider-rail-height',
62
+ railThickness: '--plasma-slider-rail-thickness',
57
63
  railBorderRadius: '--plasma-slider-rail-border-radius',
58
64
  railIndent: '--plasma-slider-rail-indent',
59
65
  fillColor: '--plasma-slider-fill-color',
@@ -13,7 +13,7 @@ var _utils2 = /*#__PURE__*/require("../../utils");
13
13
  var _Slider = /*#__PURE__*/require("../../Slider.tokens");
14
14
  var _SliderBase2 = /*#__PURE__*/require("../SliderBase/SliderBase.styles");
15
15
  var _Double = /*#__PURE__*/require("./Double.styles");
16
- var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
16
+ var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "pointerSize", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
17
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
18
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
19
19
  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); }
@@ -46,6 +46,8 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
46
46
  labelContentLeft = _ref.labelContentLeft,
47
47
  _ref$size = _ref.size,
48
48
  size = _ref$size === void 0 ? 'm' : _ref$size,
49
+ _ref$pointerSize = _ref.pointerSize,
50
+ pointerSize = _ref$pointerSize === void 0 ? 'small' : _ref$pointerSize,
49
51
  onChangeCommitted = _ref.onChangeCommitted,
50
52
  onChangeTextField = _ref.onChangeTextField,
51
53
  onBlurTextField = _ref.onBlurTextField,
@@ -72,20 +74,30 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
72
74
  setState = _useState2[1];
73
75
  var _useState3 = (0, _react.useState)(false),
74
76
  _useState4 = _slicedToArray(_useState3, 2),
75
- firstInputActive = _useState4[0],
76
- setFirstInputActive = _useState4[1];
77
+ firstInputHovered = _useState4[0],
78
+ setFirstInputHovered = _useState4[1];
77
79
  var _useState5 = (0, _react.useState)(false),
78
80
  _useState6 = _slicedToArray(_useState5, 2),
79
- secondInputActive = _useState6[0],
80
- setSecondInputActive = _useState6[1];
81
- var _useState7 = (0, _react.useState)(value[0]),
81
+ firstInputFocused = _useState6[0],
82
+ setFirstInputFocused = _useState6[1];
83
+ var _useState7 = (0, _react.useState)(false),
82
84
  _useState8 = _slicedToArray(_useState7, 2),
83
- firstValue = _useState8[0],
84
- setFirstValue = _useState8[1];
85
- var _useState9 = (0, _react.useState)(value[1]),
85
+ secondInputHovered = _useState8[0],
86
+ setSecondInputHovered = _useState8[1];
87
+ var _useState9 = (0, _react.useState)(false),
86
88
  _useState10 = _slicedToArray(_useState9, 2),
87
- secondValue = _useState10[0],
88
- setSecondValue = _useState10[1];
89
+ secondInputFocused = _useState10[0],
90
+ setSecondInputFocused = _useState10[1];
91
+ var firstInputActive = firstInputHovered || firstInputFocused;
92
+ var secondInputActive = secondInputHovered || secondInputFocused;
93
+ var _useState11 = (0, _react.useState)(value[0]),
94
+ _useState12 = _slicedToArray(_useState11, 2),
95
+ firstValue = _useState12[0],
96
+ setFirstValue = _useState12[1];
97
+ var _useState13 = (0, _react.useState)(value[1]),
98
+ _useState14 = _slicedToArray(_useState13, 2),
99
+ secondValue = _useState14[0],
100
+ setSecondValue = _useState14[1];
89
101
  var firstHandleRef = (0, _react.useRef)(null);
90
102
  var secondHandleRef = (0, _react.useRef)(null);
91
103
  var firstHandleValue = (0, _react.useRef)(value[0]);
@@ -110,6 +122,16 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
110
122
  });
111
123
  });
112
124
  }, [value, stepSize, min, max, setFirstValue, setSecondValue]);
125
+ (0, _react.useEffect)(function () {
126
+ var onMouseUp = function onMouseUp() {
127
+ setFirstInputFocused(false);
128
+ setSecondInputFocused(false);
129
+ };
130
+ window.addEventListener('mouseup', onMouseUp);
131
+ return function () {
132
+ window.removeEventListener('mouseup', onMouseUp);
133
+ };
134
+ }, []);
113
135
  var setStepSize = (0, _react.useCallback)(function (newStepSize) {
114
136
  setState(function (prevState) {
115
137
  return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -251,16 +273,20 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
251
273
  ariaLabelLeft = _ref3[0],
252
274
  ariaLabelRight = _ref3[1];
253
275
  var currentFirstSliderValue = Math.max(state.firstValue, min);
276
+ var settings = _utils2.sizeData[size][pointerSize === 'large' ? 'large' : 'small'];
254
277
  return /*#__PURE__*/_react["default"].createElement(_Double.DoubleWrapper, null, hasLabelContent && /*#__PURE__*/_react["default"].createElement(_Double.LabelWrapper, null, labelContentLeft && /*#__PURE__*/_react["default"].createElement(_Double.LabelContentLeft, null, labelContentLeft), label && /*#__PURE__*/_react["default"].createElement(_Double.Label, null, label)), /*#__PURE__*/_react["default"].createElement(_Double.SliderWrapper, null, /*#__PURE__*/_react["default"].createElement(_SliderBase.SliderBase, _extends({
255
278
  min: min,
256
279
  max: max,
280
+ size: size,
257
281
  disabled: disabled,
258
282
  setStepSize: setStepSize,
259
283
  railFillWidth: state.railFillWidth,
260
- settings: _utils2.sizeData[size],
261
- railFillXPosition: state.railFillXPosition
284
+ settings: settings,
285
+ railFillXPosition: state.railFillXPosition,
286
+ orientation: "horizontal"
262
287
  }, rest), /*#__PURE__*/_react["default"].createElement(_ui.Handler, {
263
288
  ref: firstHandleRef,
289
+ size: pointerSize,
264
290
  stepSize: state.stepSize,
265
291
  multipleStepSize: multipleStepSize,
266
292
  onChangeCommitted: onFirstHandleChangeCommitted,
@@ -270,18 +296,23 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
270
296
  disabled: disabled,
271
297
  bounds: [min, state.secondValue],
272
298
  side: "left",
273
- xPosition: state.xFirstHandle,
299
+ orientation: "horizontal",
300
+ position: state.xFirstHandle,
274
301
  zIndex: state.firstHandleZIndex,
275
302
  value: currentFirstSliderValue,
276
303
  ariaLabel: ariaLabelLeft,
304
+ onMouseDown: function onMouseDown() {
305
+ return setFirstInputFocused(true);
306
+ },
277
307
  onMouseEnter: function onMouseEnter() {
278
- return setFirstInputActive(true);
308
+ return setFirstInputHovered(true);
279
309
  },
280
310
  onMouseLeave: function onMouseLeave() {
281
- return setFirstInputActive(false);
311
+ return setFirstInputHovered(false);
282
312
  }
283
313
  }), /*#__PURE__*/_react["default"].createElement(_ui.Handler, {
284
314
  ref: secondHandleRef,
315
+ size: pointerSize,
285
316
  stepSize: state.stepSize,
286
317
  multipleStepSize: multipleStepSize,
287
318
  onChangeCommitted: onSecondHandleChangeCommitted,
@@ -292,15 +323,19 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
292
323
  disabled: disabled,
293
324
  bounds: [state.firstValue, max],
294
325
  side: "right",
295
- xPosition: state.xSecondHandle,
326
+ orientation: "horizontal",
327
+ position: state.xSecondHandle,
296
328
  zIndex: state.secondHandleZIndex,
297
329
  value: Math.max(state.secondValue, min),
298
330
  ariaLabel: ariaLabelRight,
331
+ onMouseDown: function onMouseDown() {
332
+ return setSecondInputFocused(true);
333
+ },
299
334
  onMouseEnter: function onMouseEnter() {
300
- return setSecondInputActive(true);
335
+ return setSecondInputHovered(true);
301
336
  },
302
337
  onMouseLeave: function onMouseLeave() {
303
- return setSecondInputActive(false);
338
+ return setSecondInputHovered(false);
304
339
  }
305
340
  })), /*#__PURE__*/_react["default"].createElement(_Double.InputsWrapper, null, /*#__PURE__*/_react["default"].createElement(_Double.StyledInput, {
306
341
  className: (0, _utils.cx)(_Slider.classes.firstTextField, firstInputActiveClass),