@salutejs/plasma-new-hope 0.82.1-canary.1210.9186102644.0 → 0.83.0-canary.1194.9174145281.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (332) 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 +167 -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 +163 -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/Avatar/Avatar.template-doc.mdx +1 -3
  125. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
  126. package/styled-components/cjs/components/Button/Button.template-doc.mdx +9 -8
  127. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  128. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
  129. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
  130. package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
  131. package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
  132. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +261 -262
  133. package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
  134. package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
  135. package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +33 -85
  136. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +2 -1
  137. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
  138. package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +74 -70
  139. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +1 -2
  140. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
  141. package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  142. package/styled-components/cjs/components/Slider/Slider.js +47 -0
  143. package/styled-components/cjs/components/Slider/Slider.tokens.js +77 -0
  144. package/styled-components/cjs/components/Slider/Slider.types.js +5 -0
  145. package/styled-components/cjs/components/Slider/components/Double/Double.js +318 -0
  146. package/styled-components/cjs/components/Slider/components/Double/Double.styles.js +36 -0
  147. package/styled-components/cjs/components/Slider/components/Double/Double.types.js +5 -0
  148. package/styled-components/cjs/components/Slider/components/Single/Single.js +176 -0
  149. package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +27 -0
  150. package/styled-components/cjs/components/Slider/components/Single/Single.types.js +5 -0
  151. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +83 -0
  152. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +21 -0
  153. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.types.js +5 -0
  154. package/styled-components/cjs/components/Slider/components/index.js +27 -0
  155. package/styled-components/cjs/components/Slider/index.js +32 -0
  156. package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +176 -0
  157. package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +15 -0
  158. package/styled-components/cjs/components/Slider/ui/Handler/Handler.types.js +5 -0
  159. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +32 -0
  160. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +18 -0
  161. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.types.js +5 -0
  162. package/styled-components/cjs/components/Slider/ui/index.js +63 -0
  163. package/styled-components/cjs/components/Slider/utils/index.js +55 -0
  164. package/styled-components/cjs/components/Slider/variations/_disabled/base.js +8 -0
  165. package/styled-components/cjs/components/Slider/variations/_disabled/tokens.json +4 -0
  166. package/styled-components/cjs/components/Slider/variations/_size/base.js +8 -0
  167. package/styled-components/cjs/components/Slider/variations/_size/tokens.json +0 -0
  168. package/styled-components/cjs/components/Slider/variations/_view/base.js +8 -0
  169. package/styled-components/cjs/components/Slider/variations/_view/tokens.json +0 -0
  170. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
  171. package/styled-components/cjs/components/TextField/TextField.js +12 -3
  172. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
  173. package/styled-components/cjs/engines/common.js +4 -0
  174. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +29 -0
  175. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.js +16 -0
  176. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
  177. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +29 -0
  178. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.js +16 -0
  179. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
  180. package/styled-components/cjs/hooks/index.js +8 -1
  181. package/styled-components/cjs/hooks/useIsomorphicLayoutEffect.js +12 -0
  182. package/styled-components/cjs/index.js +11 -0
  183. package/styled-components/cjs/utils/canUseDOM.js +11 -0
  184. package/styled-components/cjs/utils/index.js +7 -0
  185. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +1 -3
  186. package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
  187. package/styled-components/es/components/Button/Button.template-doc.mdx +9 -8
  188. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  189. package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
  190. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
  191. package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
  192. package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
  193. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +261 -262
  194. package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
  195. package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
  196. package/styled-components/es/components/Modal/Modal.template-doc.mdx +33 -85
  197. package/styled-components/es/components/Notification/Notification.template-doc.mdx +2 -1
  198. package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
  199. package/styled-components/es/components/Popup/Popup.template-doc.mdx +74 -70
  200. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +1 -2
  201. package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
  202. package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  203. package/styled-components/es/components/Slider/Slider.js +38 -0
  204. package/styled-components/es/components/Slider/Slider.tokens.js +71 -0
  205. package/styled-components/es/components/Slider/Slider.types.js +1 -0
  206. package/styled-components/es/components/Slider/components/Double/Double.js +310 -0
  207. package/styled-components/es/components/Slider/components/Double/Double.styles.js +29 -0
  208. package/styled-components/es/components/Slider/components/Double/Double.types.js +1 -0
  209. package/styled-components/es/components/Slider/components/Single/Single.js +168 -0
  210. package/styled-components/es/components/Slider/components/Single/Single.styles.js +20 -0
  211. package/styled-components/es/components/Slider/components/Single/Single.types.js +1 -0
  212. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +74 -0
  213. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +14 -0
  214. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.types.js +1 -0
  215. package/styled-components/es/components/Slider/components/index.js +3 -0
  216. package/styled-components/es/components/Slider/index.js +3 -0
  217. package/styled-components/es/components/Slider/ui/Handler/Handler.js +167 -0
  218. package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -0
  219. package/styled-components/es/components/Slider/ui/Handler/Handler.types.js +1 -0
  220. package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +25 -0
  221. package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
  222. package/styled-components/es/components/Slider/ui/Thumb/Thumb.types.js +1 -0
  223. package/styled-components/es/components/Slider/ui/index.js +5 -0
  224. package/styled-components/es/components/Slider/utils/index.js +47 -0
  225. package/styled-components/es/components/Slider/variations/_disabled/base.js +2 -0
  226. package/styled-components/es/components/Slider/variations/_disabled/tokens.json +4 -0
  227. package/styled-components/es/components/Slider/variations/_size/base.js +2 -0
  228. package/styled-components/es/components/Slider/variations/_size/tokens.json +0 -0
  229. package/styled-components/es/components/Slider/variations/_view/base.js +2 -0
  230. package/styled-components/es/components/Slider/variations/_view/tokens.json +0 -0
  231. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
  232. package/styled-components/es/components/TextField/TextField.js +12 -3
  233. package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
  234. package/styled-components/es/engines/common.js +4 -0
  235. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +23 -0
  236. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.js +10 -0
  237. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
  238. package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +23 -0
  239. package/styled-components/es/examples/plasma_web/components/Slider/Slider.js +10 -0
  240. package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
  241. package/styled-components/es/hooks/index.js +2 -1
  242. package/styled-components/es/hooks/useIsomorphicLayoutEffect.js +7 -0
  243. package/styled-components/es/index.js +2 -1
  244. package/styled-components/es/utils/canUseDOM.js +5 -0
  245. package/styled-components/es/utils/index.js +1 -0
  246. package/types/components/Slider/Slider.d.ts +27 -0
  247. package/types/components/Slider/Slider.d.ts.map +1 -0
  248. package/types/components/Slider/Slider.tokens.d.ts +72 -0
  249. package/types/components/Slider/Slider.tokens.d.ts.map +1 -0
  250. package/types/components/Slider/Slider.types.d.ts +3 -0
  251. package/types/components/Slider/Slider.types.d.ts.map +1 -0
  252. package/types/components/Slider/components/Double/Double.d.ts +4 -0
  253. package/types/components/Slider/components/Double/Double.d.ts.map +1 -0
  254. package/types/components/Slider/components/Double/Double.styles.d.ts +43 -0
  255. package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -0
  256. package/types/components/Slider/components/Double/Double.types.d.ts +65 -0
  257. package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -0
  258. package/types/components/Slider/components/Single/Single.d.ts +4 -0
  259. package/types/components/Slider/components/Single/Single.d.ts.map +1 -0
  260. package/types/components/Slider/components/Single/Single.styles.d.ts +8 -0
  261. package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -0
  262. package/types/components/Slider/components/Single/Single.types.d.ts +55 -0
  263. package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -0
  264. package/types/components/Slider/components/SliderBase/SliderBase.d.ts +4 -0
  265. package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -0
  266. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +6 -0
  267. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -0
  268. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +45 -0
  269. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -0
  270. package/types/components/Slider/components/index.d.ts +6 -0
  271. package/types/components/Slider/components/index.d.ts.map +1 -0
  272. package/types/components/Slider/index.d.ts +6 -0
  273. package/types/components/Slider/index.d.ts.map +1 -0
  274. package/types/components/Slider/ui/Handler/Handler.d.ts +9 -0
  275. package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -0
  276. package/types/components/Slider/ui/Handler/Handler.styles.d.ts +4 -0
  277. package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -0
  278. package/types/components/Slider/ui/Handler/Handler.types.d.ts +24 -0
  279. package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -0
  280. package/types/components/Slider/ui/Thumb/Thumb.d.ts +4 -0
  281. package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -0
  282. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts +5 -0
  283. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -0
  284. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +12 -0
  285. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -0
  286. package/types/components/Slider/ui/index.d.ts +6 -0
  287. package/types/components/Slider/ui/index.d.ts.map +1 -0
  288. package/types/components/Slider/utils/index.d.ts +33 -0
  289. package/types/components/Slider/utils/index.d.ts.map +1 -0
  290. package/types/components/Slider/variations/_disabled/base.d.ts +2 -0
  291. package/types/components/Slider/variations/_disabled/base.d.ts.map +1 -0
  292. package/types/components/Slider/variations/_size/base.d.ts +2 -0
  293. package/types/components/Slider/variations/_size/base.d.ts.map +1 -0
  294. package/types/components/Slider/variations/_view/base.d.ts +2 -0
  295. package/types/components/Slider/variations/_view/base.d.ts.map +1 -0
  296. package/types/components/TextField/TextField.d.ts.map +1 -1
  297. package/types/engines/common.d.ts +3 -3
  298. package/types/engines/common.d.ts.map +1 -1
  299. package/types/engines/index.d.ts +1 -1
  300. package/types/engines/index.d.ts.map +1 -1
  301. package/types/engines/types.d.ts +4 -0
  302. package/types/engines/types.d.ts.map +1 -1
  303. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts +22 -0
  304. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -0
  305. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +21 -0
  306. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -0
  307. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts +22 -0
  308. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -0
  309. package/types/examples/plasma_web/components/Slider/Slider.d.ts +21 -0
  310. package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -0
  311. package/types/hooks/index.d.ts +1 -0
  312. package/types/hooks/index.d.ts.map +1 -1
  313. package/types/hooks/useIsomorphicLayoutEffect.d.ts +6 -0
  314. package/types/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
  315. package/types/index.d.ts +1 -0
  316. package/types/index.d.ts.map +1 -1
  317. package/types/utils/canUseDOM.d.ts +6 -0
  318. package/types/utils/canUseDOM.d.ts.map +1 -0
  319. package/types/utils/index.d.ts +1 -0
  320. package/types/utils/index.d.ts.map +1 -1
  321. package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +0 -68
  322. package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +0 -57
  323. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +0 -156
  324. package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +0 -130
  325. package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +0 -33
  326. package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +0 -120
  327. package/styled-components/es/components/Cell/Cell.template-doc.mdx +0 -68
  328. package/styled-components/es/components/Divider/Divider.template-docs.mdx +0 -57
  329. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +0 -156
  330. package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +0 -130
  331. package/styled-components/es/components/Progress/Progress.template-doc.mdx +0 -33
  332. package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +0 -120
@@ -1,156 +0,0 @@
1
- ---
2
- id: IconButton
3
- title: IconButton
4
- ---
5
-
6
- import { PropsTable, Description } from '@site/src/components';
7
-
8
- # IconButton
9
- Кнопки могут отображаться в нескольких размерах и цветах, могут содержать иконку.
10
-
11
- ## IconButton
12
- <Description name="IconButton" />
13
- <PropsTable name="IconButton" exclude={['css']} />
14
-
15
- ## Использование
16
- Компонент `IconButton` может содержать иконку, которая указывается напрямую через `children`.
17
-
18
- ```tsx live
19
- import React from 'react';
20
- import { IconButton } from '@salutejs/{{ package }}';
21
- import { IconClose } from '@salutejs/plasma-icons';
22
-
23
- export function App() {
24
- return (
25
- <div>
26
- <IconButton>
27
- <IconClose color="inherit" />
28
- </IconButton>
29
- </div>
30
- );
31
- }
32
- ```
33
-
34
- ## Примеры
35
-
36
- ### Размер кнопки
37
- Размер кнопки задается с помощью свойства `size`.
38
-
39
- ```tsx live
40
- import React from 'react';
41
- import { IconButton } from '@salutejs/{{ package }}';
42
- import { IconClose } from '@salutejs/plasma-icons';
43
-
44
- export function App() {
45
- return (
46
- <div>
47
- <IconButton size="l">
48
- <IconClose color="inherit" />
49
- </IconButton>
50
- <IconButton size="m">
51
- <IconClose color="inherit" />
52
- </IconButton>
53
- <IconButton size="s">
54
- <IconClose color="inherit" />
55
- </IconButton>
56
- <IconButton size="xs">
57
- <IconClose color="inherit" size="xs" />
58
- </IconButton>
59
- </div>
60
- );
61
- }
62
- ```
63
-
64
- ### Вид кнопки
65
- Вид кнопки задается с помощью свойства `view`.
66
-
67
- Возможные значения свойства `view`:
68
- + `"default"` – по умолчанию;
69
- + `"secondary"` – вторичная;
70
- + `"success"` – успешное завершение;
71
- + `"warning"` – предупреждение;
72
- + `"critical"` – ошибка;
73
- + `"clear"` – без цветового сопровождения;
74
- + `"dark"` – темная;
75
- + `"black"` – черная;
76
- + `"white"` – белая.
77
-
78
- ```tsx live
79
- import React from 'react';
80
- import { IconButton } from '@salutejs/{{ package }}';
81
- import { IconClose } from '@salutejs/plasma-icons';
82
-
83
- export function App() {
84
- return (
85
- <div>
86
- <IconButton size="s" view="default">
87
- <IconClose color="inherit" />
88
- </IconButton>
89
- <IconButton size="s" view="secondary">
90
- <IconClose color="inherit" />
91
- </IconButton>
92
- <IconButton size="s" view="success">
93
- <IconClose color="inherit" />
94
- </IconButton>
95
- <IconButton size="s" view="warning">
96
- <IconClose color="inherit" />
97
- </IconButton>
98
- <IconButton size="s" view="critical">
99
- <IconClose color="inherit" />
100
- </IconButton>
101
- <IconButton size="s" view="clear">
102
- <IconClose color="inherit" />
103
- </IconButton>
104
- <IconButton size="s" view="dark">
105
- <IconClose color="inherit" />
106
- </IconButton>
107
- <IconButton size="s" view="black">
108
- <IconClose color="inherit" />
109
- </IconButton>
110
- <IconButton size="s" view="white">
111
- <IconClose color="inherit" />
112
- </IconButton>
113
- </div>
114
- );
115
- }
116
- ```
117
-
118
- ### Границы кнопки
119
- Границы кнопки задаются с помощью свойства `pin`. Возможные значения свойства `pin`:
120
- + `square` – обычное скругление;
121
- + `circle` – сильное скругление;
122
- + `clear` – нет скругления.
123
-
124
- ```tsx live
125
- import React from 'react';
126
- import { IconButton } from '@salutejs/{{ package }}';
127
- import { IconClose } from '@salutejs/plasma-icons';
128
-
129
- export function App() {
130
- return (
131
- <div>
132
- <IconButton pin="square-square">
133
- <IconClose color="inherit" />
134
- </IconButton>
135
- <IconButton pin="square-clear">
136
- <IconClose color="inherit" />
137
- </IconButton>
138
- <IconButton pin="clear-square">
139
- <IconClose color="inherit" />
140
- </IconButton>
141
- <IconButton pin="clear-clear">
142
- <IconClose color="inherit" />
143
- </IconButton>
144
- <IconButton pin="clear-circle">
145
- <IconClose color="inherit" />
146
- </IconButton>
147
- <IconButton pin="circle-clear">
148
- <IconClose color="inherit" />
149
- </IconButton>
150
- <IconButton pin="circle-circle">
151
- <IconClose color="inherit" />
152
- </IconButton>
153
- </div>
154
- );
155
- }
156
- ```
@@ -1,130 +0,0 @@
1
- ---
2
- id: pagination
3
- title: Pagination
4
- ---
5
-
6
- import { PropsTable, Description } from '@site/src/components';
7
-
8
- # Pagination
9
-
10
- Pagination может отображаться в разных размерах и может содержать select с выбором количества элементов на странице
11
- и быстрый выбор страницы.
12
-
13
- ## Pagination
14
- <Description name="Pagination" />
15
- <PropsTable name="Pagination" exclude={['css', 'focused']} />
16
-
17
- ## Использование
18
- Компонент `Pagination` должен содержать параметр slots. Он обозначает количество кнопок в Pagination.
19
-
20
- Также компонент имеет параметр hasPerPage, логика работы такова:
21
-
22
- - если указан только параметр count, то он равен кол-ву страниц
23
- - если указан параметр hasPerPage или perPage, то count делится на perPage
24
-
25
- ```tsx live
26
- import React from 'react';
27
- import { Pagination } from '@salutejs/{{ package }}';
28
-
29
- export function App() {
30
- return (
31
- <div style=\{{display: "flex", "flex-direction": "column"}}>
32
- <div>
33
- <Pagination slots={7} count={200} />
34
- </div>
35
- <div>
36
- <Pagination slots={9} count={200} hasPerPage={true} perPage={20} />
37
- </div>
38
- <div>
39
- <Pagination slots={9} count={200} hasPerPage={true} />
40
- </div>
41
- <div>
42
- <Pagination slots={9} count={200} hasPerPage={false} />
43
- </div>
44
- </div>
45
- );
46
- }
47
- ```
48
-
49
- ## Примеры
50
-
51
- ### Размер Pagination
52
- Размер Pagination задается с помощью свойства `size`.
53
- Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
54
-
55
- ```tsx live
56
- import React from 'react';
57
- import { Pagination } from '@salutejs/{{ package }}';
58
-
59
- export function App() {
60
- return (
61
- <div style=\{{display: "flex", "flex-direction": "column"}}>
62
- <Pagination size="l" slots={9} count={200} hasPerPage={true} />
63
- <Pagination size="m" slots={9} count={200} hasPerPage={true} />
64
- <Pagination size="s" slots={9} count={200} hasPerPage={true} />
65
- <Pagination size="xs" slots={9} count={200} hasPerPage={true} />
66
- </div>
67
- );
68
- }
69
- ```
70
-
71
- ### Вид Pagination
72
- Вид Pagination задается с помощью свойства `view`. Возможные значения свойства `view`:
73
- + `"default"` – основная;
74
- + `"secondary"` – вторичная;
75
- + `"clear"` – чистая;
76
-
77
- ```tsx live
78
- import React from 'react';
79
- import { Pagination } from '@salutejs/{{ package }}';
80
-
81
- export function App() {
82
- return (
83
- <div style=\{{display: "flex", "flex-direction": "column"}}>
84
- <Pagination size="xs" view="default" slots={9} count={200} hasPerPage={true} />
85
- <Pagination size="xs" view="secondary" slots={9} count={200} hasPerPage={true} />
86
- <Pagination size="xs" view="clear" slots={9} count={200} hasPerPage={true} />
87
- </div>
88
- );
89
- }
90
- ```
91
-
92
- ### Вид активной кнопки Pagination
93
- Вид Pagination задается с помощью свойства `viewCurrentPage`. Возможные значения свойства `viewCurrentPage`:
94
- + `"default"` – основная;
95
- + `"secondary"` – вторичная;
96
- + `"clear"` – чистая;
97
-
98
- ```tsx live
99
- import React from 'react';
100
- import { Pagination } from '@salutejs/{{ package }}';
101
-
102
- export function App() {
103
- return (
104
- <div style=\{{display: "flex", "flex-direction": "column"}}>
105
- <Pagination size="xs" viewCurrentPage="default" slots={9} count={200} hasPerPage={true} />
106
- <Pagination size="xs" viewCurrentPage="secondary" slots={9} count={200} hasPerPage={true} />
107
- <Pagination size="xs" viewCurrentPage="clear" slots={9} count={200} hasPerPage={true} />
108
- </div>
109
- );
110
- }
111
- ```
112
-
113
- ### Типы Pagination
114
- Тип Pagination задается с помощью свойства `type`. Возможные значения свойства `type`:
115
- + `"default"` – обычная;
116
- + `"compact"` – компактная;
117
-
118
- ```tsx live
119
- import React from 'react';
120
- import { Pagination } from '@salutejs/{{ package }}';
121
-
122
- export function App() {
123
- return (
124
- <div style=\{{display: "flex", "flex-direction": "column"}}>
125
- <Pagination size="xs" type="default" slots={9} count={200} hasPerPage={true} />
126
- <Pagination size="xs" type="compact" slots={9} count={200} hasPerPage={true} />
127
- </div>
128
- );
129
- }
130
- ```
@@ -1,33 +0,0 @@
1
- ---
2
- id: progress
3
- title: Progress
4
- ---
5
-
6
- import { PropsTable, Description } from '@site/src/components';
7
-
8
- # Progress
9
- <Description name="Progress" />
10
- <PropsTable name="Progress" exclude={['css']} />
11
-
12
- ##Примеры
13
-
14
- ### Вид прогресса
15
- Вид прогресса задается с помощью свойства `view`. Возможные значения свойства `view`:
16
- + `"default"` – по умолчанию;
17
- + `"primary"` – основная;
18
- + `"secondary"` – вторичная;
19
- + `"accent"` – акцентная;
20
- + `"success"` – успешное завершение;
21
- + `"warning"` – предупреждение;
22
- + `"error"` – ошибка;
23
-
24
- ```tsx live
25
- import React from 'react';
26
- import { Progress } from '@salutejs/{{ package }}';
27
-
28
- export function App() {
29
- return (
30
- <Progress value={25} view="success" displayValue />
31
- );
32
- }
33
- ```
@@ -1,120 +0,0 @@
1
- ---
2
- id: toolbar
3
- title: Toolbar
4
- ---
5
-
6
- import { PropsTable, Description } from '@site/src/components';
7
-
8
- # Toolbar
9
- Toolbar может отображаться в горизонтальном и вертикальном положении с разными размерами.
10
-
11
- ## Toolbar
12
- <Description name="Toolbar" />
13
- <PropsTable name="Toolbar" exclude={['css', 'focused']} />
14
-
15
- ## Использование
16
- Компонент `Toolbar` должен содержать контент передаваемый в `children`.
17
- Для разделения элементов можно использовать ToolbarDivider.
18
-
19
- ```tsx live
20
- import React from 'react';
21
- import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
22
- import { IconEdit } from '@salutejs/plasma-icons';
23
-
24
- export function App() {
25
- return (
26
- <Toolbar>
27
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
28
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
29
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
30
- <ToolbarDivider />
31
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
32
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
33
- </Toolbar>
34
- );
35
- }
36
- ```
37
-
38
- ## Примеры
39
-
40
- ### Размер Toolbar
41
- Размер Toolbar задается с помощью свойства `size`.
42
-
43
- Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
44
-
45
- ```tsx live
46
- import React from 'react';
47
- import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
48
- import { IconEdit } from '@salutejs/plasma-icons';
49
-
50
- export function App() {
51
- return (
52
- <div>
53
- <Toolbar size="l">
54
- <Button square size="l" view="clear" contentLeft={<IconEdit />} />
55
- <Button square size="l" view="clear" contentLeft={<IconEdit />} />
56
- <ToolbarDivider />
57
- <Button square size="l" view="clear" contentLeft={<IconEdit />} />
58
- <Button square size="l" view="clear" contentLeft={<IconEdit />} />
59
- </Toolbar>
60
-
61
- <Toolbar size="m">
62
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
63
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
64
- <ToolbarDivider />
65
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
66
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
67
- </Toolbar>
68
-
69
- <Toolbar size="m">
70
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
71
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
72
- <ToolbarDivider />
73
- <Button square size="s" view="clear" contentLeft={<IconEdit />} />
74
- <Button square size="s" view="clear" contentLeft={<IconEdit />} />
75
- </Toolbar>
76
-
77
- <Toolbar size="xs">
78
- <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
79
- <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
80
- <ToolbarDivider />
81
- <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
82
- <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
83
- </Toolbar>
84
- </div>
85
- );
86
- }
87
- ```
88
-
89
- ### Положение Toolbar
90
- Положение Toolbar задается с помощью свойства `orientation`. Возможные значения свойства `orientation`:
91
- + `"vertical"` – вертикальное положение;
92
- + `"horizontal"` – горизонтальное положение;
93
-
94
- ```tsx live
95
- import React from 'react';
96
- import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
97
- import { IconEdit } from '@salutejs/plasma-icons';
98
-
99
- export function App() {
100
- return (
101
- <div>
102
- <Toolbar orientation="vertical">
103
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
104
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
105
- <ToolbarDivider />
106
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
107
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
108
- </Toolbar>
109
-
110
- <Toolbar orientation="horizontal">
111
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
112
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
113
- <ToolbarDivider />
114
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
115
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
116
- </Toolbar>
117
- </div>
118
- );
119
- }
120
- ```
@@ -1,68 +0,0 @@
1
- ---
2
- id: cell
3
- title: Cell
4
- ---
5
-
6
- import { PropsTable, Description } from '@site/src/components';
7
-
8
- # Cell
9
- <PropsTable name="Cell" />
10
- <Description name="Cell" />
11
-
12
- Компонент ячейки представляет собой стилизованные слоты для контента.
13
-
14
- Также имеются вспомогательные компоненты (Textbox, TextTitle, TextSubtitle, TextLabel).
15
-
16
- Они представляют собой стилизованный текст и слот для них.
17
-
18
- ## Примеры
19
-
20
- ### Базовое использование
21
-
22
- ```tsx live
23
- import React from 'react';
24
- import { Avatar, Cell } from '@salutejs/{{ package }}';
25
- import { IconChevronRight } from '@salutejs/plasma-icons';
26
-
27
- export function App() {
28
- return (
29
- <>
30
- <Cell
31
- contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
32
- size="m"
33
- contentRight={<IconChevronRight color="inheart" size="xs" />}
34
- title="Title"
35
- subtitle="Subtitle"
36
- label="Label"
37
- />
38
- </>
39
- );
40
- }
41
- ```
42
-
43
- ### С использованием своих стилей или встроенных компонентов
44
-
45
- ```tsx live
46
- import React from 'react';
47
- import { Avatar, Cell , CellTextboxLabel , CellTextboxTitle , CellTextboxSubtitle, CellTextbox } from '@salutejs/{{ package }}';
48
- import { IconChevronRight } from '@salutejs/plasma-icons';
49
-
50
- export function App() {
51
- return (
52
- <>
53
- <Cell
54
- contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
55
- size="m"
56
- contentRight={<IconChevronRight color="inheart" size="xs" />}
57
- >
58
- <CellTextbox>
59
- <CellTextboxLabel>Label</CellTextboxLabel>
60
- <CellTextboxTitle>Title</CellTextboxTitle>
61
- <CellTextboxSubtitle>Subtitle</CellTextboxSubtitle>
62
- <div style=\{{'font-size': '12px', opacity: 0.4}}>Caption</div>
63
- </CellTextbox>
64
- </Cell>
65
- </>
66
- );
67
- }
68
- ```
@@ -1,57 +0,0 @@
1
- ---
2
- id: divider
3
- title: Divider
4
- ---
5
-
6
- import { PropsTable, Description } from '@site/src/components';
7
-
8
- ## Divider
9
- <Description name="Divider" />
10
- <PropsTable name="Divider" exclude={['css']} />
11
-
12
- ## Использование
13
- Компонент `Divider` используется для визуального разделения компонент.
14
-
15
- ### Ориентация разделителя
16
- Ориентация разделителя задается с помощью свойства orientation.
17
-
18
- Возможные значения свойства orientation:
19
- + "horizontal" – горизонтальная (по умолчанию);
20
- + "vertical" – вертикальная;
21
-
22
- ```tsx live
23
- import React from 'react';
24
- import { BodyS, Divider } from '@salutejs/{{ package }}';
25
-
26
- export function App() {
27
- const Demo = ({
28
- orientation = 'horizontal',
29
- length = '100%',
30
- beforeText = 'Before',
31
- afterText = 'After',
32
- }) => {
33
- const wrapperStyle = {
34
- display: "inline-flex",
35
- gap: "0.5rem",
36
- alignItems: "center",
37
- justifyContent: "center",
38
- flexDirection: orientation === "horizontal" ? "column" : "row"
39
- }
40
-
41
- return (
42
- <div style={wrapperStyle}>
43
- <BodyS>{beforeText}</BodyS>
44
- <Divider orientation={orientation} length={length} />
45
- <BodyS>{afterText}</BodyS>
46
- </div>
47
- );
48
- };
49
-
50
- return (
51
- <div style=\{{ display: "flex", gap: "2rem" }}>
52
- <Demo />
53
- <Demo orientation="vertical" />
54
- </div>
55
- );
56
- }
57
- ```