@salutejs/plasma-new-hope 0.187.0-canary.1539.11742294440.0 → 0.187.0-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (370) hide show
  1. package/cjs/components/NumberInput/NumberInput.css +52 -0
  2. package/cjs/components/NumberInput/NumberInput.js +205 -0
  3. package/cjs/components/NumberInput/NumberInput.js.map +1 -0
  4. package/cjs/components/NumberInput/NumberInput.styles.js +9 -0
  5. package/cjs/components/NumberInput/NumberInput.styles.js.map +1 -0
  6. package/cjs/components/NumberInput/NumberInput.styles_jeawjl.css +1 -0
  7. package/cjs/components/NumberInput/NumberInput.tokens.js +102 -0
  8. package/cjs/components/NumberInput/NumberInput.tokens.js.map +1 -0
  9. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.js +19 -0
  10. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.js.map +1 -0
  11. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles.js +22 -0
  12. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles.js.map +1 -0
  13. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles_x642ct.css +1 -0
  14. package/cjs/components/NumberInput/ui/Input/Input.css +15 -0
  15. package/cjs/components/NumberInput/ui/Input/Input.js +205 -0
  16. package/cjs/components/NumberInput/ui/Input/Input.js.map +1 -0
  17. package/cjs/components/NumberInput/ui/Input/Input.styles.js +96 -0
  18. package/cjs/components/NumberInput/ui/Input/Input.styles.js.map +1 -0
  19. package/cjs/components/NumberInput/ui/Input/Input.styles_fhgb95.css +8 -0
  20. package/cjs/components/NumberInput/utils/index.js +12 -0
  21. package/cjs/components/NumberInput/utils/index.js.map +1 -0
  22. package/cjs/components/{Switch/_toggleSize → NumberInput/variations/_background-type}/base.js +2 -2
  23. package/cjs/components/NumberInput/variations/_background-type/base.js.map +1 -0
  24. package/cjs/components/NumberInput/variations/_background-type/base_dx9knv.css +1 -0
  25. package/cjs/components/NumberInput/variations/_disabled/base.js +9 -0
  26. package/cjs/components/NumberInput/variations/_disabled/base.js.map +1 -0
  27. package/cjs/components/NumberInput/variations/_disabled/base_1sl0mh8.css +1 -0
  28. package/cjs/components/NumberInput/variations/_segmentation/base.js +9 -0
  29. package/cjs/components/NumberInput/variations/_segmentation/base.js.map +1 -0
  30. package/cjs/components/NumberInput/variations/_segmentation/base_14s5rot.css +1 -0
  31. package/cjs/components/NumberInput/variations/_shape/base.js +9 -0
  32. package/cjs/components/NumberInput/variations/_shape/base.js.map +1 -0
  33. package/cjs/components/NumberInput/variations/_shape/base_k05biw.css +1 -0
  34. package/cjs/components/NumberInput/variations/_size/base.js +9 -0
  35. package/cjs/components/NumberInput/variations/_size/base.js.map +1 -0
  36. package/cjs/components/NumberInput/variations/_size/base_yqdmk4.css +1 -0
  37. package/cjs/components/NumberInput/variations/_view/base.js +9 -0
  38. package/cjs/components/NumberInput/variations/_view/base.js.map +1 -0
  39. package/cjs/components/NumberInput/variations/_view/base_tnfbb5.css +1 -0
  40. package/cjs/components/Switch/Switch.css +7 -11
  41. package/cjs/components/Switch/Switch.js +7 -16
  42. package/cjs/components/Switch/Switch.js.map +1 -1
  43. package/cjs/components/Switch/Switch.styles.js +4 -16
  44. package/cjs/components/Switch/Switch.styles.js.map +1 -1
  45. package/cjs/components/Switch/Switch.styles_1kk0qzz.css +4 -0
  46. package/cjs/components/Switch/Switch.tokens.js +0 -11
  47. package/cjs/components/Switch/Switch.tokens.js.map +1 -1
  48. package/cjs/components/Switch/_focused/base.js +1 -1
  49. package/{es/components/Switch/_focused/base_sz3n0x.css → cjs/components/Switch/_focused/base_j4murk.css} +1 -1
  50. package/cjs/components/Switch/_size/base.js +1 -1
  51. package/cjs/components/Switch/_size/base.js.map +1 -1
  52. package/cjs/components/Switch/_size/base_1rjzpi4.css +1 -0
  53. package/cjs/components/Switch/_view/base.js +1 -1
  54. package/cjs/components/Switch/_view/base.js.map +1 -1
  55. package/cjs/components/Switch/_view/base_1mtyz12.css +1 -0
  56. package/cjs/index.css +30 -11
  57. package/cjs/index.js +6 -0
  58. package/cjs/index.js.map +1 -1
  59. package/emotion/cjs/components/NumberInput/NumberInput.js +214 -0
  60. package/emotion/cjs/components/NumberInput/NumberInput.styles.js +17 -0
  61. package/emotion/cjs/components/NumberInput/NumberInput.template-doc.mdx +214 -0
  62. package/emotion/cjs/components/NumberInput/NumberInput.tokens.js +99 -0
  63. package/emotion/cjs/components/NumberInput/NumberInput.types.js +5 -0
  64. package/emotion/cjs/components/NumberInput/index.js +31 -0
  65. package/emotion/cjs/components/NumberInput/ui/ActionButton/ActionButton.js +18 -0
  66. package/emotion/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles.js +16 -0
  67. package/emotion/cjs/components/NumberInput/ui/ActionButton/ActionButton.types.js +5 -0
  68. package/emotion/cjs/components/NumberInput/ui/Input/Input.js +213 -0
  69. package/emotion/cjs/components/NumberInput/ui/Input/Input.styles.js +81 -0
  70. package/emotion/cjs/components/NumberInput/ui/Input/Input.types.js +5 -0
  71. package/emotion/cjs/components/NumberInput/ui/index.js +19 -0
  72. package/emotion/cjs/components/NumberInput/utils/index.js +9 -0
  73. package/emotion/cjs/components/NumberInput/variations/_background-type/base.js +10 -0
  74. package/emotion/cjs/components/NumberInput/variations/_background-type/tokens.json +6 -0
  75. package/emotion/cjs/components/NumberInput/variations/_disabled/base.js +9 -0
  76. package/emotion/cjs/components/NumberInput/variations/_disabled/tokens.json +4 -0
  77. package/emotion/cjs/components/NumberInput/variations/_segmentation/base.js +12 -0
  78. package/emotion/cjs/components/NumberInput/variations/_segmentation/tokens.json +1 -0
  79. package/emotion/cjs/components/NumberInput/variations/_shape/base.js +11 -0
  80. package/emotion/cjs/components/NumberInput/variations/_shape/tokens.json +1 -0
  81. package/emotion/cjs/components/NumberInput/variations/_size/base.js +13 -0
  82. package/emotion/cjs/components/NumberInput/variations/_size/tokens.json +22 -0
  83. package/emotion/cjs/components/NumberInput/variations/_view/base.js +13 -0
  84. package/emotion/cjs/components/NumberInput/variations/_view/tokens.json +14 -0
  85. package/emotion/cjs/components/Switch/Switch.js +8 -17
  86. package/emotion/cjs/components/Switch/Switch.styles.js +5 -21
  87. package/emotion/cjs/components/Switch/Switch.template-doc.mdx +1 -37
  88. package/emotion/cjs/components/Switch/Switch.tokens.js +0 -11
  89. package/emotion/cjs/components/Switch/_size/base.js +1 -1
  90. package/emotion/cjs/components/Switch/_view/base.js +1 -1
  91. package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +46 -0
  92. package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.js +11 -0
  93. package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +108 -0
  94. package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +4 -11
  95. package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
  96. package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.config.js +46 -0
  97. package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.js +11 -0
  98. package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +108 -0
  99. package/emotion/cjs/examples/plasma_web/components/Switch/Switch.config.js +4 -11
  100. package/emotion/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
  101. package/emotion/cjs/index.js +11 -0
  102. package/emotion/es/components/NumberInput/NumberInput.js +206 -0
  103. package/emotion/es/components/NumberInput/NumberInput.styles.js +11 -0
  104. package/emotion/es/components/NumberInput/NumberInput.template-doc.mdx +214 -0
  105. package/emotion/es/components/NumberInput/NumberInput.tokens.js +93 -0
  106. package/emotion/es/components/NumberInput/NumberInput.types.js +1 -0
  107. package/emotion/es/components/NumberInput/index.js +2 -0
  108. package/emotion/es/components/NumberInput/ui/ActionButton/ActionButton.js +11 -0
  109. package/emotion/es/components/NumberInput/ui/ActionButton/ActionButton.styles.js +9 -0
  110. package/emotion/es/components/NumberInput/ui/ActionButton/ActionButton.types.js +1 -0
  111. package/emotion/es/components/NumberInput/ui/Input/Input.js +204 -0
  112. package/emotion/es/components/NumberInput/ui/Input/Input.styles.js +74 -0
  113. package/emotion/es/components/NumberInput/ui/Input/Input.types.js +1 -0
  114. package/emotion/es/components/NumberInput/ui/index.js +2 -0
  115. package/emotion/es/components/NumberInput/utils/index.js +3 -0
  116. package/emotion/es/components/NumberInput/variations/_background-type/base.js +4 -0
  117. package/emotion/es/components/NumberInput/variations/_background-type/tokens.json +6 -0
  118. package/emotion/es/components/NumberInput/variations/_disabled/base.js +3 -0
  119. package/emotion/es/components/NumberInput/variations/_disabled/tokens.json +4 -0
  120. package/emotion/es/components/NumberInput/variations/_segmentation/base.js +6 -0
  121. package/emotion/es/components/NumberInput/variations/_segmentation/tokens.json +1 -0
  122. package/emotion/es/components/NumberInput/variations/_shape/base.js +5 -0
  123. package/emotion/es/components/NumberInput/variations/_shape/tokens.json +1 -0
  124. package/emotion/es/components/NumberInput/variations/_size/base.js +7 -0
  125. package/emotion/es/components/NumberInput/variations/_size/tokens.json +22 -0
  126. package/emotion/es/components/NumberInput/variations/_view/base.js +7 -0
  127. package/emotion/es/components/NumberInput/variations/_view/tokens.json +14 -0
  128. package/emotion/es/components/Switch/Switch.js +4 -13
  129. package/emotion/es/components/Switch/Switch.styles.js +4 -20
  130. package/emotion/es/components/Switch/Switch.template-doc.mdx +1 -37
  131. package/emotion/es/components/Switch/Switch.tokens.js +0 -11
  132. package/emotion/es/components/Switch/_size/base.js +2 -2
  133. package/emotion/es/components/Switch/_view/base.js +2 -2
  134. package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +40 -0
  135. package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.js +5 -0
  136. package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +108 -0
  137. package/emotion/es/examples/plasma_b2c/components/Switch/Switch.config.js +4 -11
  138. package/emotion/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
  139. package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.config.js +40 -0
  140. package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.js +5 -0
  141. package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +108 -0
  142. package/emotion/es/examples/plasma_web/components/Switch/Switch.config.js +4 -11
  143. package/emotion/es/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
  144. package/emotion/es/index.js +2 -1
  145. package/es/components/NumberInput/NumberInput.css +52 -0
  146. package/es/components/NumberInput/NumberInput.js +200 -0
  147. package/es/components/NumberInput/NumberInput.js.map +1 -0
  148. package/es/components/NumberInput/NumberInput.styles.js +5 -0
  149. package/es/components/NumberInput/NumberInput.styles.js.map +1 -0
  150. package/es/components/NumberInput/NumberInput.styles_jeawjl.css +1 -0
  151. package/es/components/NumberInput/NumberInput.tokens.js +96 -0
  152. package/es/components/NumberInput/NumberInput.tokens.js.map +1 -0
  153. package/es/components/NumberInput/ui/ActionButton/ActionButton.js +15 -0
  154. package/es/components/NumberInput/ui/ActionButton/ActionButton.js.map +1 -0
  155. package/es/components/NumberInput/ui/ActionButton/ActionButton.styles.js +18 -0
  156. package/es/components/NumberInput/ui/ActionButton/ActionButton.styles.js.map +1 -0
  157. package/es/components/NumberInput/ui/ActionButton/ActionButton.styles_x642ct.css +1 -0
  158. package/es/components/NumberInput/ui/Input/Input.css +15 -0
  159. package/es/components/NumberInput/ui/Input/Input.js +201 -0
  160. package/es/components/NumberInput/ui/Input/Input.js.map +1 -0
  161. package/es/components/NumberInput/ui/Input/Input.styles.js +85 -0
  162. package/es/components/NumberInput/ui/Input/Input.styles.js.map +1 -0
  163. package/es/components/NumberInput/ui/Input/Input.styles_fhgb95.css +8 -0
  164. package/es/components/NumberInput/utils/index.js +6 -0
  165. package/es/components/NumberInput/utils/index.js.map +1 -0
  166. package/es/components/{Switch/_toggleSize → NumberInput/variations/_background-type}/base.js +2 -2
  167. package/es/components/NumberInput/variations/_background-type/base.js.map +1 -0
  168. package/es/components/NumberInput/variations/_background-type/base_dx9knv.css +1 -0
  169. package/es/components/NumberInput/variations/_disabled/base.js +5 -0
  170. package/es/components/NumberInput/variations/_disabled/base.js.map +1 -0
  171. package/es/components/NumberInput/variations/_disabled/base_1sl0mh8.css +1 -0
  172. package/es/components/NumberInput/variations/_segmentation/base.js +5 -0
  173. package/es/components/NumberInput/variations/_segmentation/base.js.map +1 -0
  174. package/es/components/NumberInput/variations/_segmentation/base_14s5rot.css +1 -0
  175. package/es/components/NumberInput/variations/_shape/base.js +5 -0
  176. package/es/components/NumberInput/variations/_shape/base.js.map +1 -0
  177. package/es/components/NumberInput/variations/_shape/base_k05biw.css +1 -0
  178. package/es/components/NumberInput/variations/_size/base.js +5 -0
  179. package/es/components/NumberInput/variations/_size/base.js.map +1 -0
  180. package/es/components/NumberInput/variations/_size/base_yqdmk4.css +1 -0
  181. package/es/components/NumberInput/variations/_view/base.js +5 -0
  182. package/es/components/NumberInput/variations/_view/base.js.map +1 -0
  183. package/es/components/NumberInput/variations/_view/base_tnfbb5.css +1 -0
  184. package/es/components/Switch/Switch.css +7 -11
  185. package/es/components/Switch/Switch.js +8 -17
  186. package/es/components/Switch/Switch.js.map +1 -1
  187. package/es/components/Switch/Switch.styles.js +5 -15
  188. package/es/components/Switch/Switch.styles.js.map +1 -1
  189. package/es/components/Switch/Switch.styles_1kk0qzz.css +4 -0
  190. package/es/components/Switch/Switch.tokens.js +0 -11
  191. package/es/components/Switch/Switch.tokens.js.map +1 -1
  192. package/es/components/Switch/_focused/base.js +1 -1
  193. package/{cjs/components/Switch/_focused/base_sz3n0x.css → es/components/Switch/_focused/base_j4murk.css} +1 -1
  194. package/es/components/Switch/_size/base.js +1 -1
  195. package/es/components/Switch/_size/base.js.map +1 -1
  196. package/es/components/Switch/_size/base_1rjzpi4.css +1 -0
  197. package/es/components/Switch/_view/base.js +1 -1
  198. package/es/components/Switch/_view/base.js.map +1 -1
  199. package/es/components/Switch/_view/base_1mtyz12.css +1 -0
  200. package/es/index.css +30 -11
  201. package/es/index.js +2 -0
  202. package/es/index.js.map +1 -1
  203. package/package.json +2 -2
  204. package/styled-components/cjs/components/NumberInput/NumberInput.js +214 -0
  205. package/styled-components/cjs/components/NumberInput/NumberInput.styles.js +8 -0
  206. package/styled-components/cjs/components/NumberInput/NumberInput.template-doc.mdx +214 -0
  207. package/styled-components/cjs/components/NumberInput/NumberInput.tokens.js +99 -0
  208. package/styled-components/cjs/components/NumberInput/NumberInput.types.js +5 -0
  209. package/styled-components/cjs/components/NumberInput/index.js +31 -0
  210. package/styled-components/cjs/components/NumberInput/ui/ActionButton/ActionButton.js +18 -0
  211. package/styled-components/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles.js +15 -0
  212. package/styled-components/cjs/components/NumberInput/ui/ActionButton/ActionButton.types.js +5 -0
  213. package/styled-components/cjs/components/NumberInput/ui/Input/Input.js +213 -0
  214. package/styled-components/cjs/components/NumberInput/ui/Input/Input.styles.js +48 -0
  215. package/styled-components/cjs/components/NumberInput/ui/Input/Input.types.js +5 -0
  216. package/styled-components/cjs/components/NumberInput/ui/index.js +19 -0
  217. package/styled-components/cjs/components/NumberInput/utils/index.js +9 -0
  218. package/styled-components/cjs/components/NumberInput/variations/_background-type/base.js +10 -0
  219. package/styled-components/cjs/components/NumberInput/variations/_background-type/tokens.json +6 -0
  220. package/styled-components/cjs/components/NumberInput/variations/_disabled/base.js +9 -0
  221. package/styled-components/cjs/components/NumberInput/variations/_disabled/tokens.json +4 -0
  222. package/styled-components/cjs/components/NumberInput/variations/_segmentation/base.js +12 -0
  223. package/styled-components/cjs/components/NumberInput/variations/_segmentation/tokens.json +1 -0
  224. package/styled-components/cjs/components/NumberInput/variations/_shape/base.js +11 -0
  225. package/styled-components/cjs/components/NumberInput/variations/_shape/tokens.json +1 -0
  226. package/styled-components/cjs/components/NumberInput/variations/_size/base.js +13 -0
  227. package/styled-components/cjs/components/NumberInput/variations/_size/tokens.json +22 -0
  228. package/styled-components/cjs/components/NumberInput/variations/_view/base.js +13 -0
  229. package/styled-components/cjs/components/NumberInput/variations/_view/tokens.json +14 -0
  230. package/styled-components/cjs/components/Switch/Switch.js +8 -17
  231. package/styled-components/cjs/components/Switch/Switch.styles.js +5 -11
  232. package/styled-components/cjs/components/Switch/Switch.template-doc.mdx +1 -37
  233. package/styled-components/cjs/components/Switch/Switch.tokens.js +0 -11
  234. package/styled-components/cjs/components/Switch/_size/base.js +1 -1
  235. package/styled-components/cjs/components/Switch/_view/base.js +1 -1
  236. package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +46 -0
  237. package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.js +11 -0
  238. package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +108 -0
  239. package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +2 -9
  240. package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
  241. package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.config.js +46 -0
  242. package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.js +11 -0
  243. package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +108 -0
  244. package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.config.js +2 -9
  245. package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
  246. package/styled-components/cjs/index.js +11 -0
  247. package/styled-components/es/components/NumberInput/NumberInput.js +206 -0
  248. package/styled-components/es/components/NumberInput/NumberInput.styles.js +2 -0
  249. package/styled-components/es/components/NumberInput/NumberInput.template-doc.mdx +214 -0
  250. package/styled-components/es/components/NumberInput/NumberInput.tokens.js +93 -0
  251. package/styled-components/es/components/NumberInput/NumberInput.types.js +1 -0
  252. package/styled-components/es/components/NumberInput/index.js +2 -0
  253. package/styled-components/es/components/NumberInput/ui/ActionButton/ActionButton.js +11 -0
  254. package/styled-components/es/components/NumberInput/ui/ActionButton/ActionButton.styles.js +8 -0
  255. package/styled-components/es/components/NumberInput/ui/ActionButton/ActionButton.types.js +1 -0
  256. package/styled-components/es/components/NumberInput/ui/Input/Input.js +204 -0
  257. package/styled-components/es/components/NumberInput/ui/Input/Input.styles.js +41 -0
  258. package/styled-components/es/components/NumberInput/ui/Input/Input.types.js +1 -0
  259. package/styled-components/es/components/NumberInput/ui/index.js +2 -0
  260. package/styled-components/es/components/NumberInput/utils/index.js +3 -0
  261. package/styled-components/es/components/NumberInput/variations/_background-type/base.js +4 -0
  262. package/styled-components/es/components/NumberInput/variations/_background-type/tokens.json +6 -0
  263. package/styled-components/es/components/NumberInput/variations/_disabled/base.js +3 -0
  264. package/styled-components/es/components/NumberInput/variations/_disabled/tokens.json +4 -0
  265. package/styled-components/es/components/NumberInput/variations/_segmentation/base.js +6 -0
  266. package/styled-components/es/components/NumberInput/variations/_segmentation/tokens.json +1 -0
  267. package/styled-components/es/components/NumberInput/variations/_shape/base.js +5 -0
  268. package/styled-components/es/components/NumberInput/variations/_shape/tokens.json +1 -0
  269. package/styled-components/es/components/NumberInput/variations/_size/base.js +7 -0
  270. package/styled-components/es/components/NumberInput/variations/_size/tokens.json +22 -0
  271. package/styled-components/es/components/NumberInput/variations/_view/base.js +7 -0
  272. package/styled-components/es/components/NumberInput/variations/_view/tokens.json +14 -0
  273. package/styled-components/es/components/Switch/Switch.js +4 -13
  274. package/styled-components/es/components/Switch/Switch.styles.js +4 -10
  275. package/styled-components/es/components/Switch/Switch.template-doc.mdx +1 -37
  276. package/styled-components/es/components/Switch/Switch.tokens.js +0 -11
  277. package/styled-components/es/components/Switch/_size/base.js +2 -2
  278. package/styled-components/es/components/Switch/_view/base.js +2 -2
  279. package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +40 -0
  280. package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.js +5 -0
  281. package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +108 -0
  282. package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.config.js +2 -9
  283. package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
  284. package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.config.js +40 -0
  285. package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.js +5 -0
  286. package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +108 -0
  287. package/styled-components/es/examples/plasma_web/components/Switch/Switch.config.js +2 -9
  288. package/styled-components/es/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
  289. package/styled-components/es/index.js +2 -1
  290. package/types/components/NumberInput/NumberInput.d.ts +38 -0
  291. package/types/components/NumberInput/NumberInput.d.ts.map +1 -0
  292. package/types/components/NumberInput/NumberInput.styles.d.ts +2 -0
  293. package/types/components/NumberInput/NumberInput.styles.d.ts.map +1 -0
  294. package/types/components/NumberInput/NumberInput.tokens.d.ts +88 -0
  295. package/types/components/NumberInput/NumberInput.tokens.d.ts.map +1 -0
  296. package/types/components/NumberInput/NumberInput.types.d.ts +112 -0
  297. package/types/components/NumberInput/NumberInput.types.d.ts.map +1 -0
  298. package/types/components/NumberInput/index.d.ts +3 -0
  299. package/types/components/NumberInput/index.d.ts.map +1 -0
  300. package/types/components/NumberInput/ui/ActionButton/ActionButton.d.ts +4 -0
  301. package/types/components/NumberInput/ui/ActionButton/ActionButton.d.ts.map +1 -0
  302. package/types/components/NumberInput/ui/ActionButton/ActionButton.styles.d.ts +45 -0
  303. package/types/components/NumberInput/ui/ActionButton/ActionButton.styles.d.ts.map +1 -0
  304. package/types/components/NumberInput/ui/ActionButton/ActionButton.types.d.ts +7 -0
  305. package/types/components/NumberInput/ui/ActionButton/ActionButton.types.d.ts.map +1 -0
  306. package/types/components/NumberInput/ui/Input/Input.d.ts +19 -0
  307. package/types/components/NumberInput/ui/Input/Input.d.ts.map +1 -0
  308. package/types/components/NumberInput/ui/Input/Input.styles.d.ts +30 -0
  309. package/types/components/NumberInput/ui/Input/Input.styles.d.ts.map +1 -0
  310. package/types/components/NumberInput/ui/Input/Input.types.d.ts +19 -0
  311. package/types/components/NumberInput/ui/Input/Input.types.d.ts.map +1 -0
  312. package/types/components/NumberInput/ui/index.d.ts +3 -0
  313. package/types/components/NumberInput/ui/index.d.ts.map +1 -0
  314. package/types/components/NumberInput/utils/index.d.ts +4 -0
  315. package/types/components/NumberInput/utils/index.d.ts.map +1 -0
  316. package/types/components/NumberInput/variations/_background-type/base.d.ts.map +1 -0
  317. package/types/components/NumberInput/variations/_disabled/base.d.ts +2 -0
  318. package/types/components/NumberInput/variations/_disabled/base.d.ts.map +1 -0
  319. package/types/components/NumberInput/variations/_segmentation/base.d.ts +2 -0
  320. package/types/components/NumberInput/variations/_segmentation/base.d.ts.map +1 -0
  321. package/types/components/NumberInput/variations/_shape/base.d.ts +2 -0
  322. package/types/components/NumberInput/variations/_shape/base.d.ts.map +1 -0
  323. package/types/components/NumberInput/variations/_size/base.d.ts +2 -0
  324. package/types/components/NumberInput/variations/_size/base.d.ts.map +1 -0
  325. package/types/components/NumberInput/variations/_view/base.d.ts +2 -0
  326. package/types/components/NumberInput/variations/_view/base.d.ts.map +1 -0
  327. package/types/components/Switch/Switch.d.ts +0 -3
  328. package/types/components/Switch/Switch.d.ts.map +1 -1
  329. package/types/components/Switch/Switch.styles.d.ts +0 -2
  330. package/types/components/Switch/Switch.styles.d.ts.map +1 -1
  331. package/types/components/Switch/Switch.tokens.d.ts +0 -9
  332. package/types/components/Switch/Switch.tokens.d.ts.map +1 -1
  333. package/types/components/Switch/Switch.types.d.ts +2 -10
  334. package/types/components/Switch/Switch.types.d.ts.map +1 -1
  335. package/types/components/Switch/_size/base.d.ts.map +1 -1
  336. package/types/components/Switch/_view/base.d.ts.map +1 -1
  337. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.config.d.ts +39 -0
  338. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.config.d.ts.map +1 -0
  339. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.d.ts +82 -0
  340. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.d.ts.map +1 -0
  341. package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts +0 -7
  342. package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts.map +1 -1
  343. package/types/examples/plasma_b2c/components/Switch/Switch.d.ts +0 -6
  344. package/types/examples/plasma_b2c/components/Switch/Switch.d.ts.map +1 -1
  345. package/types/examples/plasma_web/components/NumberInput/NumberInput.config.d.ts +39 -0
  346. package/types/examples/plasma_web/components/NumberInput/NumberInput.config.d.ts.map +1 -0
  347. package/types/examples/plasma_web/components/NumberInput/NumberInput.d.ts +82 -0
  348. package/types/examples/plasma_web/components/NumberInput/NumberInput.d.ts.map +1 -0
  349. package/types/examples/plasma_web/components/Switch/Switch.config.d.ts +0 -7
  350. package/types/examples/plasma_web/components/Switch/Switch.config.d.ts.map +1 -1
  351. package/types/examples/plasma_web/components/Switch/Switch.d.ts +0 -6
  352. package/types/examples/plasma_web/components/Switch/Switch.d.ts.map +1 -1
  353. package/types/index.d.ts +1 -0
  354. package/types/index.d.ts.map +1 -1
  355. package/cjs/components/Switch/Switch.styles_bei7bh.css +0 -6
  356. package/cjs/components/Switch/_size/base_1tcl212.css +0 -1
  357. package/cjs/components/Switch/_toggleSize/base.js.map +0 -1
  358. package/cjs/components/Switch/_toggleSize/base_6i0904.css +0 -1
  359. package/cjs/components/Switch/_view/base_yxkf3s.css +0 -1
  360. package/emotion/cjs/components/Switch/_toggleSize/base.js +0 -10
  361. package/emotion/es/components/Switch/_toggleSize/base.js +0 -4
  362. package/es/components/Switch/Switch.styles_bei7bh.css +0 -6
  363. package/es/components/Switch/_size/base_1tcl212.css +0 -1
  364. package/es/components/Switch/_toggleSize/base.js.map +0 -1
  365. package/es/components/Switch/_toggleSize/base_6i0904.css +0 -1
  366. package/es/components/Switch/_view/base_yxkf3s.css +0 -1
  367. package/styled-components/cjs/components/Switch/_toggleSize/base.js +0 -10
  368. package/styled-components/es/components/Switch/_toggleSize/base.js +0 -4
  369. package/types/components/Switch/_toggleSize/base.d.ts.map +0 -1
  370. /package/types/components/{Switch/_toggleSize → NumberInput/variations/_background-type}/base.d.ts +0 -0
@@ -0,0 +1,7 @@
1
+ import { css } from 'styled-components';
2
+ import { classes, privateTokens, tokens } from '../../NumberInput.tokens';
3
+ import { iconButtonTokens } from '../../../IconButton';
4
+ import { StyledIconButton } from '../../ui/ActionButton/ActionButton.styles';
5
+ import { AdditionalText, DynamicInput, Input, InputWrapper, StyledSpinner, TextWrapper } from '../../ui/Input/Input.styles';
6
+ import { spinnerTokens } from '../../../Spinner';
7
+ export var base = /*#__PURE__*/css(["width:var(", ");min-width:var(", ");", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}", "{margin:var(", ");}", "{height:var(", ");padding:var(", ");}", ",", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{&.", "{margin-right:var(", ");}&.", "{margin-left:var(", ");}}", "{", ":var(", ");}"], privateTokens.inputWidth, tokens.rootMinWidth, StyledIconButton, iconButtonTokens.iconButtonHeight, tokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, tokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, tokens.iconButtonPadding, iconButtonTokens.iconButtonFontFamily, tokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, tokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, tokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, tokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, tokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, tokens.iconButtonLineHeight, InputWrapper, tokens.inputWrapperMargin, TextWrapper, tokens.textWrapperHeight, tokens.textWrapperPadding, DynamicInput, Input, AdditionalText, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, AdditionalText, classes.textBefore, tokens.textBeforeMarginRight, classes.textAfter, tokens.textAfterMarginLeft, StyledSpinner, spinnerTokens.size, tokens.loaderSpinnerSize);
@@ -0,0 +1,22 @@
1
+ [
2
+ "--plasma-number-input_icon-button_height",
3
+ "--plasma-number-input_icon-button_width",
4
+ "--plasma-number-input_icon-button_padding",
5
+ "--plasma-number-input_icon-button_font-family",
6
+ "--plasma-number-input_icon-button_font-size",
7
+ "--plasma-number-input_icon-button_font-style",
8
+ "--plasma-number-input_icon-button_font-weight",
9
+ "--plasma-number-input_icon-button_letter-spacing",
10
+ "--plasma-number-input_icon-button_line-height",
11
+ "--plasma-number-input_font-family",
12
+ "--plasma-number-input_font-style",
13
+ "--plasma-number-input_font-size",
14
+ "--plasma-number-input_font-weight",
15
+ "--plasma-number-input_letter-spacing",
16
+ "--plasma-number-input_line-height",
17
+ "--plasma-number-input_text-wrapper_height",
18
+ "--plasma-number-input_text-wrapper_padding",
19
+ "--plasma-number-input_loader-spinner_size",
20
+ "--plasma-number-input_text-before_margin-right",
21
+ "--plasma-number-input_text-after_margin-left"
22
+ ]
@@ -0,0 +1,7 @@
1
+ import { css } from 'styled-components';
2
+ import { classes, tokens } from '../../NumberInput.tokens';
3
+ import { iconButtonTokens } from '../../../IconButton';
4
+ import { StyledIconButton } from '../../ui/ActionButton/ActionButton.styles';
5
+ import { AdditionalText, Input, InputWrapper, StyledSpinner } from '../../ui/Input/Input.styles';
6
+ import { spinnerTokens } from '../../../Spinner';
7
+ export var base = /*#__PURE__*/css(["", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", ",&.", "{opacity:var(", ");cursor:not-allowed;:hover,:active{scale:none;color:var(", ");background-color:var(", ");}}}&& ", "{&.", ":focus-within{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", ".", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");animation:shakingError 0.3s forwards;", "{color:var(", ");animation:fadeError 0.3s forwards;}&:focus-within{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{opacity:1;}100%{opacity:0;}}}", "{", ":var(", ");}", "{color:var(", ");caret-color:var(", ");}", "{color:var(", ");}"], StyledIconButton, iconButtonTokens.iconButtonColor, tokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, tokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, tokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, tokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, tokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive, tokens.iconButtonBackgroundColorActive, classes.actionButtonDecrementDisabled, classes.actionButtonIncrementDisabled, tokens.actionButtonDisabledOpacity, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, InputWrapper, classes.manualInput, tokens.backgroundColorFocus, tokens.inputWrapperBorderWidth, tokens.borderColorFocus, classes.manualInput, classes.errorAnimation, tokens.backgroundErrorColor, tokens.inputWrapperBorderWidth, tokens.borderErrorColor, Input, tokens.errorColor, tokens.backgroundErrorColor, tokens.inputWrapperBorderWidth, tokens.borderErrorColor, StyledSpinner, spinnerTokens.color, tokens.loaderSpinnerColor, Input, tokens.color, tokens.caretColor, AdditionalText, tokens.additionalTextColor);
@@ -0,0 +1,14 @@
1
+ [
2
+ "--plasma-number-input_icon-button_color",
3
+ "--plasma-number-input_icon-button_background-color",
4
+ "--plasma-number-input_icon-button_color-hover",
5
+ "--plasma-number-input_icon-button_background-color-hover",
6
+ "--plasma-number-input_icon-button_color-active",
7
+ "--plasma-number-input_icon-button_background-color-active",
8
+ "--plasma-number-input_loader-spinner_color",
9
+ "--plasma-number-input_color",
10
+ "--plasma-number-input_additional-text_color",
11
+ "--plasma-number-input_action-button_disabled-opacity",
12
+ "--plasma-number-input_background-color-focus",
13
+ "--plasma-number-input_border-color-focus"
14
+ ]
@@ -1,28 +1,25 @@
1
1
  var _StyledTrigger;
2
- var _excluded = ["size", "toggleSize", "view", "focused", "outlined", "disabled", "labelPosition", "label", "description", "id", "style", "className", "checked", "pressed", "defaultChecked"];
2
+ var _excluded = ["size", "view", "focused", "outlined", "disabled", "labelPosition", "label", "id", "style", "className", "checked", "pressed", "defaultChecked"];
3
3
  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); }
4
4
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
5
5
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
6
6
  import React, { forwardRef } from 'react';
7
7
  import { base as sizeCSS } from '../Switch/_size/base';
8
- import { base as toggleSizeCSS } from '../Switch/_toggleSize/base';
9
8
  import { base as viewCSS } from '../Switch/_view/base';
10
9
  import { base as focusedCSS } from '../Switch/_focused/base';
11
10
  import { base as disabledCSS } from '../Switch/_disabled/base';
12
11
  import { cx } from '../../utils';
13
- import { StyledContent, StyledDescription, StyledInput, StyledLabel, StyledTrigger, base } from './Switch.styles';
12
+ import { StyledInput, StyledLabel, StyledTrigger, base } from './Switch.styles';
14
13
  import { classes } from './Switch.tokens';
15
14
  export var switchRoot = function switchRoot(Root) {
16
15
  return /*#__PURE__*/forwardRef(function (props, ref) {
17
16
  var size = props.size,
18
- toggleSize = props.toggleSize,
19
17
  view = props.view,
20
18
  focused = props.focused,
21
19
  outlined = props.outlined,
22
20
  disabled = props.disabled,
23
21
  labelPosition = props.labelPosition,
24
22
  label = props.label,
25
- description = props.description,
26
23
  id = props.id,
27
24
  style = props.style,
28
25
  className = props.className,
@@ -34,15 +31,12 @@ export var switchRoot = function switchRoot(Root) {
34
31
  return /*#__PURE__*/React.createElement(Root, {
35
32
  view: view,
36
33
  size: size,
37
- toggleSize: toggleSize,
38
34
  disabled: disabled,
39
35
  focused: focused !== null && focused !== void 0 ? focused : outlined,
40
36
  labelPosition: labelPosition,
41
37
  id: id,
42
38
  style: style,
43
- className: cx(className)
44
- }, /*#__PURE__*/React.createElement(StyledContent, {
45
- className: cx(classes["".concat(labelPosition, "SwitchLabelPosition")])
39
+ className: cx(className, classes["".concat(labelPosition, "SwitchLabelPosition")])
46
40
  }, /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
47
41
  ref: ref,
48
42
  role: "switch",
@@ -55,7 +49,7 @@ export var switchRoot = function switchRoot(Root) {
55
49
  tabIndex: -1
56
50
  }, label), _StyledTrigger || (_StyledTrigger = /*#__PURE__*/React.createElement(StyledTrigger, {
57
51
  "aria-hidden": true
58
- }))), description && /*#__PURE__*/React.createElement(StyledDescription, null, description));
52
+ })));
59
53
  });
60
54
  };
61
55
  export var switchConfig = {
@@ -70,9 +64,6 @@ export var switchConfig = {
70
64
  view: {
71
65
  css: viewCSS
72
66
  },
73
- toggleSize: {
74
- css: toggleSizeCSS
75
- },
76
67
  disabled: {
77
68
  css: disabledCSS,
78
69
  attrs: true
@@ -2,19 +2,13 @@ import styled from 'styled-components';
2
2
  import { css } from 'styled-components';
3
3
  import { applyEllipsis } from '../../mixins';
4
4
  import { classes, tokens } from './Switch.tokens';
5
- export var base = /*#__PURE__*/css(["position:relative;display:flex;flex-direction:column;gap:var(", ");cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:focus{outline:0 none;}"], tokens.verticalGap);
6
- export var StyledContent = /*#__PURE__*/styled.div.withConfig({
7
- componentId: "plasma-new-hope__sc-i4fgom-0"
8
- })(["width:100%;position:relative;display:flex;align-items:center;&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], classes.beforeSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset, classes.afterSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset);
9
- export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
10
- componentId: "plasma-new-hope__sc-i4fgom-1"
11
- })(["position:relative;"]);
5
+ export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:focus{outline:0 none;}&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], classes.beforeSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset, classes.afterSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset);
12
6
  export var StyledInput = /*#__PURE__*/styled.input.withConfig({
13
- componentId: "plasma-new-hope__sc-i4fgom-2"
7
+ componentId: "plasma-new-hope__sc-i4fgom-0"
14
8
  })(["position:absolute;right:0;margin:0;opacity:0;&:focus{outline:0 none;}"]);
15
9
  export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
16
- componentId: "plasma-new-hope__sc-i4fgom-3"
10
+ componentId: "plasma-new-hope__sc-i4fgom-1"
17
11
  })(["user-select:none;", ""], /*#__PURE__*/applyEllipsis());
18
12
  export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
19
- componentId: "plasma-new-hope__sc-i4fgom-4"
13
+ componentId: "plasma-new-hope__sc-i4fgom-2"
20
14
  })(["position:relative;display:flex;align-items:center;transition:background-color 0.15s ease-in-out 0.1s;::after{content:'';position:absolute;right:auto;left:0;transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;}", ":checked ~ &::after{right:0;left:auto;}"], StyledInput);
@@ -18,43 +18,7 @@ import { Switch } from '@salutejs/{{ package }}';
18
18
 
19
19
  export function App() {
20
20
  return (
21
- <Switch description="Описание переключателя" label="Переключатель" defaultChecked />
22
- );
23
- }
24
- ```
25
-
26
- ## Примеры
27
-
28
- ### Размер Switch
29
- Размер компонента задается с помощью свойства `size`.
30
-
31
- ```tsx live
32
- import React from 'react';
33
- import { Button } from '@salutejs/{{ package }}';
34
-
35
- export function App() {
36
- return (
37
- <div>
38
- <Switch size="s" description="Описание переключателя" label="Переключатель" defaultChecked />
39
- <Switch size="m" description="Описание переключателя" label="Переключатель" defaultChecked />
40
- <Switch size="l" description="Описание переключателя" label="Переключатель" defaultChecked />
41
- </div>
42
- );
43
- }
44
- ```
45
-
46
- Размер переключателя задается с помощью свойства `toggleSize`.
47
-
48
- ```tsx live
49
- import React from 'react';
50
- import { Button } from '@salutejs/{{ package }}';
51
-
52
- export function App() {
53
- return (
54
- <div style=\{{ alignItems: "center" }}>
55
- <Switch toggleSize="s" label="Переключатель" defaultChecked />
56
- <Switch toggleSize="l" label="Переключатель" defaultChecked />
57
- </div>
21
+ <Switch label="Переключатель" defaultChecked />
58
22
  );
59
23
  }
60
24
  ```
@@ -5,22 +5,11 @@ export var tokens = {
5
5
  fontWeight: '--plasma-switch-font-weight',
6
6
  letterSpacing: '--plasma-switch-letter-spacing',
7
7
  lineHeight: '--plasma-switch-line-height',
8
- /* Токены description */
9
- descriptionFontFamily: '--plasma-switch-description-font-family',
10
- descriptionFontStyle: '--plasma-switch-description-font-style',
11
- descriptionFontSize: '--plasma-switch-description-font-size',
12
- descriptionFontWeight: '--plasma-switch-description-font-weight',
13
- descriptionLetterSpacing: '--plasma-switch-description-letter-spacing',
14
- descriptionLineHeight: '--plasma-switch-description-line-height',
15
8
  /* Цвет подписи */
16
9
  labelColor: '--plasma-switch__label-color',
17
10
  labelOffset: '--plasma-switch__label-offset',
18
- /* Цвет описания */
19
- descriptionColor: '--plasma-switch__description-color',
20
- descriptionOffset: '--plasma-switch__description-offset',
21
11
  /** Прозрачность для всего компонента в состоянии disabled */
22
12
  disabledOpacity: '--plasma-switch-disabled-opacity',
23
- verticalGap: '--plasma-switch-vertical-gap',
24
13
  trackWidth: '--plasma-switch__track-width',
25
14
  trackHeight: '--plasma-switch__track-height',
26
15
  trackBorderRadius: '--plasma-switch__track-border-radius',
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
2
  import { tokens } from '../Switch.tokens';
3
- import { StyledContent, StyledDescription, StyledLabel } from '../Switch.styles';
4
- export var base = /*#__PURE__*/css(["", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");}", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");}", "{margin:var(", ",0);}"], StyledContent, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.fontSize, StyledDescription, tokens.descriptionFontFamily, tokens.descriptionFontStyle, tokens.descriptionFontWeight, tokens.descriptionLetterSpacing, tokens.descriptionLineHeight, tokens.descriptionFontSize, StyledLabel, tokens.labelOffsetPrivate);
3
+ import { StyledLabel, StyledTrigger } from '../Switch.styles';
4
+ export var base = /*#__PURE__*/css(["font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}", "{margin:var(", ",0);}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.fontSize, StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledLabel, tokens.labelOffsetPrivate, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
2
  import { tokens } from '../Switch.tokens';
3
- import { StyledTrigger, StyledInput, StyledLabel, StyledDescription } from '../Switch.styles';
4
- export var base = /*#__PURE__*/css(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}", "{color:var(", ");}", "{color:var(", ");}"], StyledTrigger, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, StyledTrigger, tokens.thumbBackgroundColor, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow, StyledLabel, tokens.labelColor, StyledDescription, tokens.descriptionColor);
3
+ import { StyledTrigger, StyledInput } from '../Switch.styles';
4
+ export var base = /*#__PURE__*/css(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}"], StyledTrigger, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, StyledTrigger, tokens.thumbBackgroundColor, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow);
@@ -0,0 +1,40 @@
1
+ import { css } from 'styled-components';
2
+ import { numberInputTokens as tokens } from '../../../../components/NumberInput';
3
+ export var config = {
4
+ defaults: {
5
+ view: 'default',
6
+ size: 'l',
7
+ shape: 'cornered',
8
+ inputBackgroundType: 'fill'
9
+ },
10
+ variations: {
11
+ view: {
12
+ "default": /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-tertiary);", ":var(--inverse-text-tertiary);", ":var(--surface-transparent-secondary);", ":var(--inverse-surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-active);", ":var(--surface-solid-default-active);", ":0.4;", ":inherit;", ":inherit;"], tokens.caretColor, tokens.errorColor, tokens.backgroundErrorColor, tokens.color, tokens.colorSolid, tokens.additionalTextColor, tokens.additionalTextColorSolid, tokens.backgroundColorFocus, tokens.backgroundColorSolidFocus, tokens.backgroundColorSolid, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonColorSolidHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonColorSolidActive, tokens.iconButtonBackgroundColorActive, tokens.actionButtonDisabledOpacity, tokens.loaderSpinnerColor, tokens.loaderSpinnerColorSolid),
13
+ secondary: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--text-primary-active);", ":var(--surface-transparent-secondary-active);", ":0.4;", ":inherit;", ":inherit;"], tokens.caretColor, tokens.errorColor, tokens.backgroundErrorColor, tokens.color, tokens.colorSolid, tokens.additionalTextColor, tokens.additionalTextColorSolid, tokens.backgroundColorFocus, tokens.backgroundColorSolidFocus, tokens.backgroundColorSolid, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonColorSolidHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonColorSolidActive, tokens.iconButtonBackgroundColorActive, tokens.actionButtonDisabledOpacity, tokens.loaderSpinnerColor, tokens.loaderSpinnerColorSolid),
14
+ accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--inverse-text-primary);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--on-dark-text-primary);", ":var(--text-tertiary);", ":var(--on-dark-text-tertiary);", ":var(--surface-transparent-secondary);", ":var(--on-dark-surface-transparent-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--inverse-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--surface-accent-hover);", ":var(--inverse-text-primary);", ":var(--on-dark-text-primary-active);", ":var(--surface-accent-active);", ":0.4;", ":inherit;", ":inherit;"], tokens.caretColor, tokens.caretColorSolid, tokens.errorColor, tokens.backgroundErrorColor, tokens.color, tokens.colorSolid, tokens.additionalTextColor, tokens.additionalTextColorSolid, tokens.backgroundColorFocus, tokens.backgroundColorSolidFocus, tokens.backgroundColorSolid, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonColorSolidHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonColorSolidActive, tokens.iconButtonBackgroundColorActive, tokens.actionButtonDisabledOpacity, tokens.loaderSpinnerColor, tokens.loaderSpinnerColorSolid),
15
+ clear: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--text-accent);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-primary-active);", ":transparent;", ":0.4;", ":inherit;", ":inherit;"], tokens.caretColor, tokens.caretColorSolid, tokens.errorColor, tokens.backgroundErrorColor, tokens.color, tokens.colorSolid, tokens.iconButtonColorSolidHover, tokens.additionalTextColor, tokens.additionalTextColorSolid, tokens.backgroundColorFocus, tokens.backgroundColorSolidFocus, tokens.backgroundColorSolid, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.actionButtonDisabledOpacity, tokens.loaderSpinnerColor, tokens.loaderSpinnerColorSolid)
16
+ },
17
+ size: {
18
+ l: /*#__PURE__*/css(["", ":11.75rem;", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.875rem;", ":0.375rem;", ":0 0.125rem;", ":0.875rem;", ":3.5rem;", ":1.063rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":0.25rem;", ":1.375rem;"], tokens.rootMinWidth, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonFontFamily, tokens.iconButtonFontSize, tokens.iconButtonFontStyle, tokens.iconButtonFontWeight, tokens.iconButtonLetterSpacing, tokens.iconButtonLineHeight, tokens.iconButtonRadius, tokens.iconButtonSegmentationRadius, tokens.inputWrapperMargin, tokens.inputWrapperBorderRadius, tokens.textWrapperHeight, tokens.textWrapperPadding, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.textBeforeMarginRight, tokens.textAfterMarginLeft, tokens.loaderSpinnerSize),
19
+ m: /*#__PURE__*/css(["", ":10.25rem;", ":3rem;", ":3rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.25rem;", ":0 0.125rem;", ":0.75rem;", ":3rem;", ":0.875rem 1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":0.25rem;", ":1.375rem;"], tokens.rootMinWidth, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonFontFamily, tokens.iconButtonFontSize, tokens.iconButtonFontStyle, tokens.iconButtonFontWeight, tokens.iconButtonLetterSpacing, tokens.iconButtonLineHeight, tokens.iconButtonRadius, tokens.iconButtonSegmentationRadius, tokens.inputWrapperMargin, tokens.inputWrapperBorderRadius, tokens.textWrapperHeight, tokens.textWrapperPadding, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.textBeforeMarginRight, tokens.textAfterMarginLeft, tokens.loaderSpinnerSize),
20
+ s: /*#__PURE__*/css(["", ":8.75rem;", ":2.5rem;", ":2.5rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.625rem;", ":0.25rem;", ":0 0.125rem;", ":0.625rem;", ":2.5rem;", ":0.688rem 0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":0.25rem;", ":1.375rem;"], tokens.rootMinWidth, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonFontFamily, tokens.iconButtonFontSize, tokens.iconButtonFontStyle, tokens.iconButtonFontWeight, tokens.iconButtonLetterSpacing, tokens.iconButtonLineHeight, tokens.iconButtonRadius, tokens.iconButtonSegmentationRadius, tokens.inputWrapperMargin, tokens.inputWrapperBorderRadius, tokens.textWrapperHeight, tokens.textWrapperPadding, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.textBeforeMarginRight, tokens.textAfterMarginLeft, tokens.loaderSpinnerSize),
21
+ xs: /*#__PURE__*/css(["", ":6.875rem;", ":2rem;", ":2rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5rem;", ":0.125rem;", ":0 0.125rem;", ":0.5rem;", ":2rem;", ":0.563rem 0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":0.25rem;", ":1rem;"], tokens.rootMinWidth, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonFontFamily, tokens.iconButtonFontSize, tokens.iconButtonFontStyle, tokens.iconButtonFontWeight, tokens.iconButtonLetterSpacing, tokens.iconButtonLineHeight, tokens.iconButtonRadius, tokens.iconButtonSegmentationRadius, tokens.inputWrapperMargin, tokens.inputWrapperBorderRadius, tokens.textWrapperHeight, tokens.textWrapperPadding, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.textBeforeMarginRight, tokens.textAfterMarginLeft, tokens.loaderSpinnerSize)
22
+ },
23
+ shape: {
24
+ cornered: /*#__PURE__*/css([""]),
25
+ pilled: /*#__PURE__*/css(["", ":50%;"], tokens.iconButtonRadius)
26
+ },
27
+ inputBackgroundType: {
28
+ fill: /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary);"], tokens.backgroundColor, tokens.backgroundColorHover),
29
+ clear: /*#__PURE__*/css(["", ":transparent;", ":transparent;"], tokens.backgroundColor, tokens.backgroundColorHover)
30
+ },
31
+ segmentation: {
32
+ "default": /*#__PURE__*/css([""]),
33
+ segmented: /*#__PURE__*/css([""]),
34
+ solid: /*#__PURE__*/css(["", ":0;"], tokens.iconButtonSegmentationRadius)
35
+ },
36
+ disabled: {
37
+ "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
38
+ }
39
+ }
40
+ };
@@ -0,0 +1,5 @@
1
+ import { numberInputConfig } from '../../../../components/NumberInput';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ import { config } from './NumberInput.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(numberInputConfig, config);
5
+ export var NumberInput = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,108 @@
1
+ import React, { ComponentProps, useState } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import { action } from '@storybook/addon-actions';
4
+
5
+ import { WithTheme } from '../../../_helpers';
6
+
7
+ import { NumberInput } from './NumberInput';
8
+
9
+ const onChange = action('onChange');
10
+ const onDecrement = action('onDecrement');
11
+ const onIncrement = action('onIncrement');
12
+
13
+ const views = ['default', 'secondary', 'accent', 'clear'];
14
+ const sizes = ['l', 'm', 's', 'xs'];
15
+ const shapes = ['cornered', 'pilled'];
16
+ const inputBackgroundTypes = ['fill', 'clear'];
17
+ const segmentation = ['default', 'segmented', 'solid'];
18
+
19
+ const meta: Meta<typeof NumberInput> = {
20
+ title: 'plasma_b2c/NumberInput',
21
+ component: NumberInput,
22
+ decorators: [WithTheme],
23
+ argTypes: {
24
+ min: {
25
+ control: {
26
+ type: 'number',
27
+ },
28
+ },
29
+ max: {
30
+ control: {
31
+ type: 'number',
32
+ },
33
+ },
34
+ view: {
35
+ options: views,
36
+ control: {
37
+ type: 'select',
38
+ },
39
+ },
40
+ size: {
41
+ options: sizes,
42
+ control: {
43
+ type: 'inline-radio',
44
+ },
45
+ },
46
+ shape: {
47
+ options: shapes,
48
+ control: {
49
+ type: 'inline-radio',
50
+ },
51
+ },
52
+ inputBackgroundType: {
53
+ options: inputBackgroundTypes,
54
+ control: {
55
+ type: 'inline-radio',
56
+ },
57
+ },
58
+ segmentation: {
59
+ options: segmentation,
60
+ control: {
61
+ type: 'select',
62
+ },
63
+ },
64
+ },
65
+ };
66
+
67
+ export default meta;
68
+
69
+ type StoryPropsDefault = ComponentProps<typeof NumberInput>;
70
+
71
+ const StoryDefault = (args: StoryPropsDefault) => {
72
+ const [value, setValue] = useState(5);
73
+
74
+ const handleChange = (_: any, newValue: number) => {
75
+ setValue(newValue);
76
+ onChange(newValue);
77
+ };
78
+
79
+ return (
80
+ <NumberInput
81
+ {...args}
82
+ value={value}
83
+ onChange={handleChange}
84
+ onDecrement={onDecrement}
85
+ onIncrement={onIncrement}
86
+ />
87
+ );
88
+ };
89
+
90
+ export const Default: StoryObj<StoryPropsDefault> = {
91
+ args: {
92
+ view: 'default',
93
+ size: 'l',
94
+ shape: 'cornered',
95
+ inputBackgroundType: 'fill',
96
+ segmentation: 'default',
97
+ min: 0,
98
+ max: 9,
99
+ step: 1,
100
+ width: 188,
101
+ isManualInput: false,
102
+ textBefore: '',
103
+ textAfter: '',
104
+ isLoading: false,
105
+ disabled: false,
106
+ },
107
+ render: StoryDefault,
108
+ };
@@ -4,22 +4,15 @@ export var config = {
4
4
  defaults: {
5
5
  view: 'default',
6
6
  size: 'm',
7
- toggleSize: 'l',
8
7
  labelPosition: 'before',
9
8
  focused: 'true'
10
9
  },
11
10
  variations: {
12
11
  size: {
13
- s: /*#__PURE__*/css(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset),
14
- m: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset),
15
- l: /*#__PURE__*/css(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset)
16
- },
17
- toggleSize: {
18
- l: /*#__PURE__*/css(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale),
19
- s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
12
+ m: /*#__PURE__*/css(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale, switchTokens.labelOffset)
20
13
  },
21
14
  view: {
22
- "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.thumbBackgroundColor, switchTokens.thumbBoxShadow)
15
+ "default": /*#__PURE__*/css(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.thumbBackgroundColor, switchTokens.thumbBoxShadow)
23
16
  },
24
17
  disabled: {
25
18
  "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)
@@ -18,7 +18,7 @@ const meta: Meta<SwitchProps> = {
18
18
  decorators: [WithTheme],
19
19
  component: Switch,
20
20
  argTypes: {
21
- ...argTypesFromConfig(mergeConfig(switchConfig, config), ['view', 'focused']),
21
+ ...argTypesFromConfig(mergeConfig(switchConfig, config), ['size', 'view', 'focused']),
22
22
  labelPosition: {
23
23
  options: ['before', 'after'],
24
24
  control: { type: 'select' },
@@ -26,7 +26,6 @@ const meta: Meta<SwitchProps> = {
26
26
  },
27
27
  args: {
28
28
  label: 'Label',
29
- description: 'Description',
30
29
  labelPosition: 'before',
31
30
  },
32
31
  };
@@ -65,10 +64,5 @@ const StoryDefault = (args: SwitchProps) => {
65
64
  };
66
65
 
67
66
  export const Default: StoryObj<SwitchProps> = {
68
- args: {
69
- size: 'm',
70
- toggleSize: 'l',
71
- disabled: false,
72
- },
73
67
  render: (args) => <StoryDefault {...args} />,
74
68
  };
@@ -0,0 +1,40 @@
1
+ import { css } from 'styled-components';
2
+ import { numberInputTokens as tokens } from '../../../../components/NumberInput';
3
+ export var config = {
4
+ defaults: {
5
+ view: 'default',
6
+ size: 'l',
7
+ shape: 'cornered',
8
+ inputBackgroundType: 'fill'
9
+ },
10
+ variations: {
11
+ view: {
12
+ "default": /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-tertiary);", ":var(--inverse-text-tertiary);", ":var(--surface-accent);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-active);", ":var(--surface-solid-default-active);", ":0.4;", ":inherit;", ":inherit;"], tokens.caretColor, tokens.errorColor, tokens.borderErrorColor, tokens.color, tokens.colorSolid, tokens.additionalTextColor, tokens.additionalTextColorSolid, tokens.borderColorFocus, tokens.borderColorSolidFocus, tokens.backgroundColorSolid, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonColorSolidHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonColorSolidActive, tokens.iconButtonBackgroundColorActive, tokens.actionButtonDisabledOpacity, tokens.loaderSpinnerColor, tokens.loaderSpinnerColorSolid),
13
+ secondary: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--surface-accent);", ":var(--surface-accent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--text-primary-active);", ":var(--surface-transparent-secondary-active);", ":0.4;", ":inherit;", ":inherit;"], tokens.caretColor, tokens.errorColor, tokens.borderErrorColor, tokens.color, tokens.colorSolid, tokens.additionalTextColor, tokens.additionalTextColorSolid, tokens.borderColorFocus, tokens.borderColorSolidFocus, tokens.backgroundColorSolid, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonColorSolidHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonColorSolidActive, tokens.iconButtonBackgroundColorActive, tokens.actionButtonDisabledOpacity, tokens.loaderSpinnerColor, tokens.loaderSpinnerColorSolid),
14
+ accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--inverse-text-primary);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-tertiary);", ":var(--inverse-text-tertiary);", ":var(--surface-accent);", ":var(--light-background-primary);", ":var(--surface-accent);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--surface-accent-hover);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-active);", ":var(--surface-accent-active);", ":0.4;", ":inherit;", ":inherit;"], tokens.caretColor, tokens.caretColorSolid, tokens.errorColor, tokens.borderErrorColor, tokens.color, tokens.colorSolid, tokens.additionalTextColor, tokens.additionalTextColorSolid, tokens.borderColorFocus, tokens.borderColorSolidFocus, tokens.backgroundColorSolid, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonColorSolidHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonColorSolidActive, tokens.iconButtonBackgroundColorActive, tokens.actionButtonDisabledOpacity, tokens.loaderSpinnerColor, tokens.loaderSpinnerColorSolid),
15
+ clear: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--surface-accent);", ":var(--surface-accent);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":var(--text-primary-hover);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":transparent;", ":0.4;", ":inherit;", ":inherit;"], tokens.caretColor, tokens.errorColor, tokens.borderErrorColor, tokens.color, tokens.colorSolid, tokens.additionalTextColor, tokens.additionalTextColorSolid, tokens.borderColorFocus, tokens.borderColorSolidFocus, tokens.backgroundColorSolid, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonColorSolidHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.backgroundColorFocus, tokens.iconButtonBackgroundColorActive, tokens.actionButtonDisabledOpacity, tokens.loaderSpinnerColor, tokens.loaderSpinnerColorSolid)
16
+ },
17
+ size: {
18
+ l: /*#__PURE__*/css(["", ":11.75rem;", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.875rem;", ":0.375rem;", ":0 0.125rem;", ":0.875rem;", ":3.5rem;", ":0.063rem;", ":1.063rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":0.25rem;", ":1.375rem;"], tokens.rootMinWidth, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonFontFamily, tokens.iconButtonFontSize, tokens.iconButtonFontStyle, tokens.iconButtonFontWeight, tokens.iconButtonLetterSpacing, tokens.iconButtonLineHeight, tokens.iconButtonRadius, tokens.iconButtonSegmentationRadius, tokens.inputWrapperMargin, tokens.inputWrapperBorderRadius, tokens.textWrapperHeight, tokens.inputWrapperBorderWidth, tokens.textWrapperPadding, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.textBeforeMarginRight, tokens.textAfterMarginLeft, tokens.loaderSpinnerSize),
19
+ m: /*#__PURE__*/css(["", ":10.25rem;", ":3rem;", ":3rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.25rem;", ":0 0.125rem;", ":0.75rem;", ":3rem;", ":0.063rem;", ":0.875rem 1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":0.25rem;", ":1.375rem;"], tokens.rootMinWidth, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonFontFamily, tokens.iconButtonFontSize, tokens.iconButtonFontStyle, tokens.iconButtonFontWeight, tokens.iconButtonLetterSpacing, tokens.iconButtonLineHeight, tokens.iconButtonRadius, tokens.iconButtonSegmentationRadius, tokens.inputWrapperMargin, tokens.inputWrapperBorderRadius, tokens.textWrapperHeight, tokens.inputWrapperBorderWidth, tokens.textWrapperPadding, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.textBeforeMarginRight, tokens.textAfterMarginLeft, tokens.loaderSpinnerSize),
20
+ s: /*#__PURE__*/css(["", ":8.75rem;", ":2.5rem;", ":2.5rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.625rem;", ":0.25rem;", ":0 0.125rem;", ":0.625rem;", ":2.5rem;", ":0.063rem;", ":0.688rem 0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":0.25rem;", ":1.375rem;"], tokens.rootMinWidth, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonFontFamily, tokens.iconButtonFontSize, tokens.iconButtonFontStyle, tokens.iconButtonFontWeight, tokens.iconButtonLetterSpacing, tokens.iconButtonLineHeight, tokens.iconButtonRadius, tokens.iconButtonSegmentationRadius, tokens.inputWrapperMargin, tokens.inputWrapperBorderRadius, tokens.textWrapperHeight, tokens.inputWrapperBorderWidth, tokens.textWrapperPadding, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.textBeforeMarginRight, tokens.textAfterMarginLeft, tokens.loaderSpinnerSize),
21
+ xs: /*#__PURE__*/css(["", ":6.875rem;", ":2rem;", ":2rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5rem;", ":0.125rem;", ":0 0.125rem;", ":0.5rem;", ":2rem;", ":0.063rem;", ":0.563rem 0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":0.25rem;", ":1rem;"], tokens.rootMinWidth, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonFontFamily, tokens.iconButtonFontSize, tokens.iconButtonFontStyle, tokens.iconButtonFontWeight, tokens.iconButtonLetterSpacing, tokens.iconButtonLineHeight, tokens.iconButtonRadius, tokens.iconButtonSegmentationRadius, tokens.inputWrapperMargin, tokens.inputWrapperBorderRadius, tokens.textWrapperHeight, tokens.inputWrapperBorderWidth, tokens.textWrapperPadding, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.textBeforeMarginRight, tokens.textAfterMarginLeft, tokens.loaderSpinnerSize)
22
+ },
23
+ shape: {
24
+ cornered: /*#__PURE__*/css([""]),
25
+ pilled: /*#__PURE__*/css(["", ":50%;"], tokens.iconButtonRadius)
26
+ },
27
+ inputBackgroundType: {
28
+ fill: /*#__PURE__*/css(["", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);"], tokens.borderColor, tokens.borderColorHover),
29
+ clear: /*#__PURE__*/css(["", ":transparent;", ":transparent;"], tokens.borderColor, tokens.borderColorHover)
30
+ },
31
+ segmentation: {
32
+ "default": /*#__PURE__*/css([""]),
33
+ segmented: /*#__PURE__*/css([""]),
34
+ solid: /*#__PURE__*/css(["", ":0;"], tokens.iconButtonSegmentationRadius)
35
+ },
36
+ disabled: {
37
+ "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
38
+ }
39
+ }
40
+ };
@@ -0,0 +1,5 @@
1
+ import { numberInputConfig } from '../../../../components/NumberInput';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ import { config } from './NumberInput.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(numberInputConfig, config);
5
+ export var NumberInput = /*#__PURE__*/component(mergedConfig);