colibri-ui 0.8.66 → 0.8.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (378) hide show
  1. package/Accordion/Accordion.module.css +8 -7
  2. package/Accordion/index.js +1 -1
  3. package/Avatar/Avatar.module.css +50 -33
  4. package/Avatar/index.js +74 -37
  5. package/Badge/Badge.module.css +7 -7
  6. package/Badge/index.js +3 -9
  7. package/Badge/index.props.d.ts +0 -2
  8. package/Button/Button.module.css +95 -135
  9. package/Calendar/Calendar.d.ts +43 -0
  10. package/Calendar/Calendar.js +511 -0
  11. package/Calendar/Calendar.module.css +322 -0
  12. package/Calendar/index.d.ts +2 -4
  13. package/Calendar/index.js +3 -376
  14. package/Card/Card.d.ts +25 -0
  15. package/Card/Card.js +70 -0
  16. package/Card/Card.module.css +90 -0
  17. package/Card/index.d.ts +2 -0
  18. package/Card/index.js +9 -0
  19. package/Card/package.json +6 -0
  20. package/Checkbox/Checkbox.module.css +38 -28
  21. package/Checkbox/index.js +1 -0
  22. package/Chip/Chip.module.css +34 -24
  23. package/CodeField/CodeField.d.ts +29 -0
  24. package/CodeField/CodeField.js +316 -0
  25. package/CodeField/CodeField.module.css +211 -0
  26. package/CodeField/index.d.ts +2 -0
  27. package/CodeField/index.js +13 -0
  28. package/CodeField/package.json +6 -0
  29. package/Counter/Counter.module.css +11 -10
  30. package/Datepicker/Datepicker.module.css +1 -1
  31. package/Datepicker/components/DatePicker/index.js +145 -30
  32. package/Datepicker/components/DatePicker/index.module.css +34 -45
  33. package/Datepicker/components/DatePicker/index.props.d.ts +12 -0
  34. package/Datepicker/index.d.ts +1 -1
  35. package/Datepicker/index.js +25 -8
  36. package/Datepicker/index.props.d.ts +15 -2
  37. package/DotsLoader/DotsLoader.module.css +5 -5
  38. package/DotsLoader/index.d.ts +1 -3
  39. package/DotsLoader/index.js +1 -14
  40. package/Drawer/Drawer.d.ts +43 -0
  41. package/Drawer/Drawer.js +227 -0
  42. package/Drawer/Drawer.module.css +280 -0
  43. package/Drawer/index.d.ts +2 -0
  44. package/Drawer/index.js +10 -0
  45. package/Drawer/package.json +6 -0
  46. package/Dropdown/Dropdown.module.css +6 -6
  47. package/Dropzone/Dropzone.d.ts +30 -0
  48. package/Dropzone/Dropzone.js +258 -0
  49. package/Dropzone/Dropzone.module.css +164 -0
  50. package/Dropzone/index.d.ts +2 -0
  51. package/Dropzone/index.js +7 -0
  52. package/Dropzone/package.json +6 -0
  53. package/Editable/Editable.d.ts +18 -0
  54. package/Editable/Editable.js +166 -0
  55. package/Editable/Editable.module.css +61 -0
  56. package/Editable/index.d.ts +2 -0
  57. package/Editable/index.js +10 -0
  58. package/Editable/package.json +6 -0
  59. package/Grid/Grid.module.css +2 -2
  60. package/Grid/Item/Grid-Item.module.css +3 -3
  61. package/Grid/index.js +9 -6
  62. package/Grid/index.props.d.ts +4 -3
  63. package/Icons/Check.js +1 -1
  64. package/InputRadio/InputRadio.module.css +37 -34
  65. package/Menu/Menu.module.css +2 -2
  66. package/Menu/components/MenuItem/MenuItem.module.css +8 -8
  67. package/Modal/Modal.module.css +11 -11
  68. package/Modal/components/Close/Close.module.css +1 -1
  69. package/Modal/components/Content/Content.module.css +1 -1
  70. package/MultiSelect/components/MenuOverlay/index.js +2 -4
  71. package/MultiSelect/components/MenuOverlay/index.module.css +3 -3
  72. package/MultiSelect/index.js +1 -0
  73. package/MultiSelect/index.module.css +5 -5
  74. package/Progress/Progress.d.ts +20 -0
  75. package/Progress/Progress.js +109 -0
  76. package/Progress/Progress.module.css +191 -0
  77. package/Progress/index.d.ts +2 -0
  78. package/Progress/index.js +7 -0
  79. package/Progress/package.json +6 -0
  80. package/README.md +91 -2
  81. package/RadioGroup/RadioGroup.module.css +4 -4
  82. package/Rating/Rating.d.ts +24 -0
  83. package/Rating/Rating.js +131 -0
  84. package/Rating/Rating.module.css +219 -0
  85. package/Rating/index.d.ts +2 -0
  86. package/Rating/index.js +10 -0
  87. package/Rating/package.json +6 -0
  88. package/Select/components/MenuOverlay/index.module.css +1 -1
  89. package/Select/index.js +1 -0
  90. package/Select/index.module.css +3 -3
  91. package/Separator/Separator.module.css +2 -2
  92. package/Skeleton/Skeleton.module.css +4 -4
  93. package/Skeleton/index.js +10 -6
  94. package/Skeleton/index.props.d.ts +2 -2
  95. package/Status/index.d.ts +1 -1
  96. package/Status/index.js +7 -1
  97. package/Status/index.module.css +37 -24
  98. package/Status/index.props.d.ts +3 -0
  99. package/Switch/Switch.module.css +41 -26
  100. package/Switch/index.js +1 -0
  101. package/TabsMenu/Tab/Tab.module.css +29 -26
  102. package/TabsMenu/TabsMenu.module.css +1 -1
  103. package/TextArea/TextArea.module.css +2 -2
  104. package/Theme/colors/index.d.ts +190 -38
  105. package/Theme/colors/theme_buenos_aires.d.ts +211 -31
  106. package/Theme/colors/theme_buenos_aires.js +139 -34
  107. package/Theme/colors/theme_jaipur.d.ts +251 -0
  108. package/Theme/colors/theme_jaipur.js +157 -0
  109. package/Theme/global.css +1 -1
  110. package/Theme/index.d.ts +973 -13
  111. package/Theme/index.js +2 -2
  112. package/Theme/themes/buenos_aires.d.ts +476 -0
  113. package/Theme/themes/buenos_aires.js +626 -150
  114. package/Theme/themes/jaipur.d.ts +628 -0
  115. package/Theme/themes/jaipur.js +635 -0
  116. package/Tooltip/Tooltip.module.css +8 -8
  117. package/Tooltip/index.js +4 -3
  118. package/Typography/Typography.module.css +151 -26
  119. package/Typography/index.props.d.ts +3 -3
  120. package/base/BaseInput/BaseInput.module.css +2 -2
  121. package/base/FormField/FormField.module.css +6 -2
  122. package/base/FormField/index.js +1 -0
  123. package/base/InputRoot/InputRoot.module.css +33 -26
  124. package/base/InputRoot/index.d.ts +1 -1
  125. package/base/InputRoot/index.js +3 -2
  126. package/base/InputRoot/index.props.d.ts +1 -0
  127. package/esm/Accordion/Accordion.module.css +8 -7
  128. package/esm/Accordion/index.js +9 -9
  129. package/esm/Avatar/Avatar.module.css +50 -33
  130. package/esm/Avatar/index.js +75 -38
  131. package/esm/Badge/Badge.module.css +7 -7
  132. package/esm/Badge/Control/index.js +2 -2
  133. package/esm/Badge/index.js +5 -11
  134. package/esm/Badge/index.props.d.ts +0 -2
  135. package/esm/Button/Button.module.css +95 -135
  136. package/esm/Button/index.js +6 -6
  137. package/esm/Calendar/Calendar.d.ts +43 -0
  138. package/esm/Calendar/Calendar.js +499 -0
  139. package/esm/Calendar/Calendar.module.css +322 -0
  140. package/esm/Calendar/index.d.ts +2 -4
  141. package/esm/Card/Card.d.ts +25 -0
  142. package/esm/Card/Card.js +61 -0
  143. package/esm/Card/Card.module.css +90 -0
  144. package/esm/Card/index.d.ts +2 -0
  145. package/esm/Checkbox/Checkbox.module.css +38 -28
  146. package/esm/Checkbox/index.js +8 -7
  147. package/esm/Chip/Chip.module.css +34 -24
  148. package/esm/Chip/index.js +6 -6
  149. package/esm/CodeField/CodeField.d.ts +29 -0
  150. package/esm/CodeField/CodeField.js +303 -0
  151. package/esm/CodeField/CodeField.module.css +211 -0
  152. package/esm/CodeField/index.d.ts +2 -0
  153. package/esm/Counter/Counter.module.css +11 -10
  154. package/esm/Counter/index.js +8 -8
  155. package/esm/Datepicker/Datepicker.module.css +1 -1
  156. package/esm/Datepicker/components/DatePicker/index.js +146 -31
  157. package/esm/Datepicker/components/DatePicker/index.module.css +34 -45
  158. package/esm/Datepicker/components/DatePicker/index.props.d.ts +12 -0
  159. package/esm/Datepicker/index.d.ts +1 -1
  160. package/esm/Datepicker/index.js +27 -10
  161. package/esm/Datepicker/index.props.d.ts +15 -2
  162. package/esm/DotsLoader/DotsLoader.module.css +5 -5
  163. package/esm/DotsLoader/index.d.ts +1 -3
  164. package/esm/DotsLoader/index.js +7 -20
  165. package/esm/Drawer/Drawer.d.ts +43 -0
  166. package/esm/Drawer/Drawer.js +216 -0
  167. package/esm/Drawer/Drawer.module.css +280 -0
  168. package/esm/Drawer/index.d.ts +2 -0
  169. package/esm/Dropdown/Dropdown.module.css +6 -6
  170. package/esm/Dropdown/index.js +6 -6
  171. package/esm/Dropzone/Dropzone.d.ts +30 -0
  172. package/esm/Dropzone/Dropzone.js +248 -0
  173. package/esm/Dropzone/Dropzone.module.css +164 -0
  174. package/esm/Dropzone/index.d.ts +2 -0
  175. package/esm/Editable/Editable.d.ts +18 -0
  176. package/esm/Editable/Editable.js +157 -0
  177. package/esm/Editable/Editable.module.css +61 -0
  178. package/esm/Editable/index.d.ts +2 -0
  179. package/esm/Grid/Grid.module.css +2 -2
  180. package/esm/Grid/Item/Grid-Item.module.css +3 -3
  181. package/esm/Grid/Item/index.js +2 -2
  182. package/esm/Grid/index.js +11 -8
  183. package/esm/Grid/index.props.d.ts +4 -3
  184. package/esm/Icons/ArrowNext.js +3 -3
  185. package/esm/Icons/Cart.js +3 -3
  186. package/esm/Icons/Check.js +7 -7
  187. package/esm/Icons/Chevron.js +3 -3
  188. package/esm/Icons/Close.js +3 -3
  189. package/esm/Icons/Cross.js +3 -3
  190. package/esm/Icons/CrossFill.js +3 -3
  191. package/esm/Icons/Edit.js +3 -3
  192. package/esm/Icons/Exit.js +3 -3
  193. package/esm/Icons/EyeClosed.js +3 -3
  194. package/esm/Icons/EyeOpen.js +4 -4
  195. package/esm/Icons/Help.js +3 -3
  196. package/esm/Icons/Info.js +3 -3
  197. package/esm/Icons/Minus.js +3 -3
  198. package/esm/Icons/More.js +5 -5
  199. package/esm/Icons/Plus.js +3 -3
  200. package/esm/Icons/Setting.js +5 -5
  201. package/esm/Icons/Shield.js +3 -3
  202. package/esm/Icons/Trash.js +3 -3
  203. package/esm/Icons/User.js +4 -4
  204. package/esm/Image/index.js +4 -4
  205. package/esm/Input/index.js +4 -4
  206. package/esm/InputRadio/InputRadio.module.css +37 -34
  207. package/esm/InputRadio/index.js +7 -7
  208. package/esm/Menu/Menu.module.css +2 -2
  209. package/esm/Menu/components/MenuItem/MenuItem.module.css +8 -8
  210. package/esm/Menu/components/MenuItem/index.js +2 -2
  211. package/esm/Menu/index.js +2 -2
  212. package/esm/Modal/Modal.module.css +11 -11
  213. package/esm/Modal/components/Close/Close.module.css +1 -1
  214. package/esm/Modal/components/Close/index.js +3 -3
  215. package/esm/Modal/components/Content/Content.module.css +1 -1
  216. package/esm/Modal/components/Content/index.js +2 -2
  217. package/esm/Modal/components/Title/index.js +3 -3
  218. package/esm/Modal/index.js +9 -9
  219. package/esm/MultiSelect/components/MenuOverlay/index.js +9 -11
  220. package/esm/MultiSelect/components/MenuOverlay/index.module.css +3 -3
  221. package/esm/MultiSelect/components/MenuOverlayItem/index.js +3 -3
  222. package/esm/MultiSelect/index.js +13 -12
  223. package/esm/MultiSelect/index.module.css +5 -5
  224. package/esm/Progress/Progress.d.ts +20 -0
  225. package/esm/Progress/Progress.js +102 -0
  226. package/esm/Progress/Progress.module.css +191 -0
  227. package/esm/Progress/index.d.ts +2 -0
  228. package/esm/RadioGroup/Radio.js +2 -2
  229. package/esm/RadioGroup/RadioGroup.module.css +4 -4
  230. package/esm/RadioGroup/index.js +3 -3
  231. package/esm/Rating/Rating.d.ts +24 -0
  232. package/esm/Rating/Rating.js +121 -0
  233. package/esm/Rating/Rating.module.css +219 -0
  234. package/esm/Rating/index.d.ts +2 -0
  235. package/esm/Select/components/MenuOverlay/index.js +4 -4
  236. package/esm/Select/components/MenuOverlay/index.module.css +1 -1
  237. package/esm/Select/components/MenuOverlayItem/index.js +3 -3
  238. package/esm/Select/index.js +11 -10
  239. package/esm/Select/index.module.css +3 -3
  240. package/esm/Separator/Separator.module.css +2 -2
  241. package/esm/Separator/index.js +2 -2
  242. package/esm/Skeleton/Skeleton.module.css +4 -4
  243. package/esm/Skeleton/index.js +13 -9
  244. package/esm/Skeleton/index.props.d.ts +2 -2
  245. package/esm/Status/index.d.ts +1 -1
  246. package/esm/Status/index.js +9 -3
  247. package/esm/Status/index.module.css +37 -24
  248. package/esm/Status/index.props.d.ts +3 -0
  249. package/esm/Switch/Switch.module.css +41 -26
  250. package/esm/Switch/index.js +9 -8
  251. package/esm/TabsMenu/Tab/Tab.js +2 -2
  252. package/esm/TabsMenu/Tab/Tab.module.css +29 -26
  253. package/esm/TabsMenu/TabsMenu.module.css +1 -1
  254. package/esm/TabsMenu/index.js +3 -3
  255. package/esm/TabsPanels/Panel/index.js +2 -2
  256. package/esm/TabsPanels/index.js +3 -3
  257. package/esm/TextArea/TextArea.module.css +2 -2
  258. package/esm/TextArea/index.js +4 -4
  259. package/esm/Theme/colors/index.d.ts +190 -38
  260. package/esm/Theme/colors/theme_buenos_aires.d.ts +211 -31
  261. package/esm/Theme/colors/theme_buenos_aires.js +132 -34
  262. package/esm/Theme/colors/theme_jaipur.d.ts +251 -0
  263. package/esm/Theme/colors/theme_jaipur.js +140 -0
  264. package/esm/Theme/global.css +1 -1
  265. package/esm/Theme/index.d.ts +973 -13
  266. package/esm/Theme/index.js +2 -2
  267. package/esm/Theme/themes/buenos_aires.d.ts +476 -0
  268. package/esm/Theme/themes/buenos_aires.js +618 -142
  269. package/esm/Theme/themes/jaipur.d.ts +628 -0
  270. package/esm/Theme/themes/jaipur.js +631 -0
  271. package/esm/TimeSelect/Label/index.js +2 -2
  272. package/esm/TimeSelect/index.js +3 -3
  273. package/esm/Tooltip/Tooltip.module.css +8 -8
  274. package/esm/Tooltip/index.js +8 -7
  275. package/esm/Typography/Typography.module.css +151 -26
  276. package/esm/Typography/index.js +2 -2
  277. package/esm/Typography/index.props.d.ts +3 -3
  278. package/esm/base/BaseInput/BaseInput.module.css +2 -2
  279. package/esm/base/BaseInput/index.js +2 -2
  280. package/esm/base/FormField/FormField.module.css +6 -2
  281. package/esm/base/FormField/index.js +5 -4
  282. package/esm/base/InputRoot/InputRoot.module.css +33 -26
  283. package/esm/base/InputRoot/index.d.ts +1 -1
  284. package/esm/base/InputRoot/index.js +8 -7
  285. package/esm/base/InputRoot/index.props.d.ts +1 -0
  286. package/esm/helpers/date/index.js +3 -53
  287. package/esm/hooks/useOnClickOutside/index.d.ts +1 -1
  288. package/esm/hooks/useOnClickOutside/index.js +2 -2
  289. package/esm/index.d.ts +13 -1
  290. package/esm/index.js +8 -2
  291. package/esm/theme_ba_variables.css +625 -149
  292. package/esm/theme_jaipur_variables.css +627 -0
  293. package/hooks/useOnClickOutside/index.d.ts +1 -1
  294. package/hooks/useOnClickOutside/index.js +2 -2
  295. package/index.d.ts +13 -1
  296. package/index.js +90 -65
  297. package/package.json +1 -1
  298. package/theme_ba_variables.css +625 -149
  299. package/theme_jaipur_variables.css +627 -0
  300. package/Avatar/assets/org-circle.svg.js +0 -64
  301. package/Avatar/assets/user-circle.svg.js +0 -43
  302. package/Calendar/components/ContinueButton/index.d.ts +0 -10
  303. package/Calendar/components/ContinueButton/index.js +0 -42
  304. package/Calendar/components/ContinueButton/index.module.css +0 -4
  305. package/Calendar/components/Month/Month.d.ts +0 -16
  306. package/Calendar/components/Month/Month.js +0 -203
  307. package/Calendar/components/Month/index.module.css +0 -143
  308. package/Calendar/components/Presets/index.d.ts +0 -19
  309. package/Calendar/components/Presets/index.js +0 -61
  310. package/Calendar/components/Presets/index.module.css +0 -28
  311. package/Calendar/index.module.css +0 -94
  312. package/Calendar/index.props.d.ts +0 -22
  313. package/Calendar/utils/getMonthWeeks.d.ts +0 -20
  314. package/Calendar/utils/getMonthWeeks.js +0 -81
  315. package/Calendar/utils/getNumberOfMonthsBetweenDates.d.ts +0 -4
  316. package/Calendar/utils/getNumberOfMonthsBetweenDates.js +0 -21
  317. package/Calendar/utils/getPresets.d.ts +0 -12
  318. package/Calendar/utils/getPresets.js +0 -99
  319. package/Calendar/utils/getStartMonth.d.ts +0 -6
  320. package/Calendar/utils/getStartMonth.js +0 -15
  321. package/Datepicker/components/TimePicker/Label/index.d.ts +0 -8
  322. package/Datepicker/components/TimePicker/Label/index.js +0 -27
  323. package/Datepicker/components/TimePicker/helpers.d.ts +0 -12
  324. package/Datepicker/components/TimePicker/helpers.js +0 -39
  325. package/Datepicker/components/TimePicker/index.d.ts +0 -4
  326. package/Datepicker/components/TimePicker/index.js +0 -69
  327. package/Datepicker/components/TimePicker/index.module.css +0 -58
  328. package/Datepicker/components/TimePicker/index.props.d.ts +0 -8
  329. package/Theme/colors/common.d.ts +0 -39
  330. package/Theme/colors/common.js +0 -32
  331. package/Theme/colors/index.js +0 -11
  332. package/Theme/colors/theme_default.d.ts +0 -47
  333. package/Theme/colors/theme_default.js +0 -38
  334. package/Theme/themes/default.d.ts +0 -144
  335. package/Theme/themes/default.js +0 -151
  336. package/esm/Avatar/assets/org-circle.svg.js +0 -5
  337. package/esm/Avatar/assets/user-circle.svg.js +0 -5
  338. package/esm/Calendar/components/ContinueButton/index.d.ts +0 -10
  339. package/esm/Calendar/components/ContinueButton/index.js +0 -35
  340. package/esm/Calendar/components/ContinueButton/index.module.css +0 -4
  341. package/esm/Calendar/components/Month/Month.d.ts +0 -16
  342. package/esm/Calendar/components/Month/Month.js +0 -175
  343. package/esm/Calendar/components/Month/index.module.css +0 -143
  344. package/esm/Calendar/components/Presets/index.d.ts +0 -19
  345. package/esm/Calendar/components/Presets/index.js +0 -36
  346. package/esm/Calendar/components/Presets/index.module.css +0 -28
  347. package/esm/Calendar/index.js +0 -371
  348. package/esm/Calendar/index.module.css +0 -94
  349. package/esm/Calendar/index.props.d.ts +0 -22
  350. package/esm/Calendar/utils/getMonthWeeks.d.ts +0 -20
  351. package/esm/Calendar/utils/getMonthWeeks.js +0 -79
  352. package/esm/Calendar/utils/getNumberOfMonthsBetweenDates.d.ts +0 -4
  353. package/esm/Calendar/utils/getNumberOfMonthsBetweenDates.js +0 -19
  354. package/esm/Calendar/utils/getPresets.d.ts +0 -12
  355. package/esm/Calendar/utils/getPresets.js +0 -87
  356. package/esm/Calendar/utils/getStartMonth.d.ts +0 -6
  357. package/esm/Calendar/utils/getStartMonth.js +0 -13
  358. package/esm/Datepicker/components/TimePicker/Label/index.d.ts +0 -8
  359. package/esm/Datepicker/components/TimePicker/Label/index.js +0 -19
  360. package/esm/Datepicker/components/TimePicker/helpers.d.ts +0 -12
  361. package/esm/Datepicker/components/TimePicker/helpers.js +0 -18
  362. package/esm/Datepicker/components/TimePicker/index.d.ts +0 -4
  363. package/esm/Datepicker/components/TimePicker/index.js +0 -58
  364. package/esm/Datepicker/components/TimePicker/index.module.css +0 -58
  365. package/esm/Datepicker/components/TimePicker/index.props.d.ts +0 -8
  366. package/esm/Theme/colors/common.d.ts +0 -39
  367. package/esm/Theme/colors/common.js +0 -24
  368. package/esm/Theme/colors/index.js +0 -7
  369. package/esm/Theme/colors/theme_default.d.ts +0 -47
  370. package/esm/Theme/colors/theme_default.js +0 -29
  371. package/esm/Theme/themes/default.d.ts +0 -144
  372. package/esm/Theme/themes/default.js +0 -147
  373. package/esm/libs/numbers/leadingZeros.js +0 -12
  374. package/esm/libs/requestIdleCallback/index.js +0 -8
  375. package/esm/theme_default_variables.css +0 -143
  376. package/libs/numbers/leadingZeros.js +0 -14
  377. package/libs/requestIdleCallback/index.js +0 -10
  378. package/theme_default_variables.css +0 -143
package/Button/Button.module.css CHANGED
@@ -1,42 +1,40 @@
1
1
  .root {
2
2
  align-items: center;
3
- border: 1px solid;
4
- border-radius: 1.125rem;
3
+ border: var(--border-width-hairline) solid;
4
+ border-radius: var(--component-button-radius);
5
5
  box-sizing: border-box;
6
6
  cursor: pointer;
7
7
  display: inline-flex;
8
8
  flex-shrink: 0;
9
- font-size: 15px;
9
+ font-size: var(--component-button-font-size-m);
10
10
  font-style: normal;
11
11
  font-weight: 400;
12
- gap: 8px;
13
- height: 36px;
12
+ gap: var(--space-2);
13
+ height: var(--component-button-height-m);
14
14
  justify-content: center;
15
- line-height: 36px;
15
+ line-height: var(--component-button-height-m);
16
16
  overflow: hidden;
17
- padding: 0 12px;
17
+ padding: 0 var(--space-3);
18
18
  text-overflow: ellipsis;
19
- transform: scale(1);
20
- transition: color 0.15s linear;
21
- transition: transform 0.1s ease-out;
19
+ transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;
22
20
  white-space: nowrap;
23
21
  width: fit-content;
24
22
  }
25
23
  .root_icon {
26
- border-radius: 50%;
27
- width: 36px;
24
+ border-radius: var(--radius-full);
25
+ width: var(--component-button-height-m);
28
26
  }
29
27
  .root_icon.size_xs {
30
- width: 29px;
28
+ width: var(--component-button-height-xs);
31
29
  }
32
30
  .root_icon.size_s {
33
- width: 32px;
31
+ width: var(--component-button-height-s);
34
32
  }
35
33
  .root_icon.size_m {
36
- width: 36px;
34
+ width: var(--component-button-height-m);
37
35
  }
38
36
  .root_icon.size_l {
39
- width: 42px;
37
+ width: var(--component-button-height-l);
40
38
  }
41
39
  .root_fullWidth {
42
40
  width: 100%;
@@ -47,174 +45,136 @@
47
45
  }
48
46
 
49
47
  .size_xs {
50
- font-size: 12px;
51
- height: 29px;
52
- line-height: 29px;
48
+ font-size: var(--component-button-font-size-xs);
49
+ height: var(--component-button-height-xs);
50
+ line-height: var(--component-button-height-xs);
53
51
  }
54
52
  .size_s {
55
- font-size: 13px;
56
- height: 32px;
57
- line-height: 32px;
53
+ font-size: var(--component-button-font-size-s);
54
+ height: var(--component-button-height-s);
55
+ line-height: var(--component-button-height-s);
58
56
  }
59
57
  .size_m {
60
- font-size: 15px;
61
- height: 36px;
62
- line-height: 36px;
58
+ font-size: var(--component-button-font-size-m);
59
+ height: var(--component-button-height-m);
60
+ line-height: var(--component-button-height-m);
63
61
  }
64
62
  .size_l {
65
- border-radius: 1.5rem;
66
- font-size: 18px;
67
- height: 42px;
68
- line-height: 42px;
63
+ border-radius: var(--component-button-radius-lg);
64
+ font-size: var(--component-button-font-size-l);
65
+ height: var(--component-button-height-l);
66
+ line-height: var(--component-button-height-l);
69
67
  }
70
68
 
71
69
  button.variant_primary {
72
- background-color: var(--button-primary-bg);
73
- border-color: var(--button-primary-border-color);
74
- color: var(--button-primary-color);
70
+ background-color: var(--component-button-primary-bg);
71
+ border-color: var(--component-button-primary-border);
72
+ color: var(--component-button-primary-text);
75
73
  }
76
74
  button.variant_primary:hover {
77
- background-color: var(--button-primary-bg-hovered);
78
- border-color: var(--button-primary-border-color-hovered);
79
- color: var(--button-primary-color-hovered);
75
+ background-color: var(--component-button-primary-bg-hover);
76
+ border-color: var(--component-button-primary-border-hover);
77
+ color: var(--component-button-primary-text-hover);
80
78
  }
81
79
  button.variant_primary:active {
82
- background-color: var(--button-primary-bg-active);
83
- border-color: var(--button-primary-border-color-active);
84
- color: var(--button-primary-color-active);
85
- }
86
- button.variant_primary_disabled {
87
- background-color: var(--button-primary-bg-disabled);
88
- border-color: var(--button-primary-border-color-disabled);
89
- color: var(--button-primary-color-disabled);
90
- cursor: not-allowed;
91
- pointer-events: none;
80
+ background-color: var(--component-button-primary-bg-pressed);
81
+ border-color: var(--component-button-primary-border-pressed);
82
+ color: var(--component-button-primary-text-pressed);
92
83
  }
93
84
  button.variant_secondary {
94
- background-color: var(--button-secondary-bg);
95
- border-color: var(--button-secondary-border-color);
96
- color: var(--button-secondary-color);
85
+ background-color: var(--component-button-secondary-bg);
86
+ border-color: var(--component-button-secondary-border);
87
+ color: var(--component-button-secondary-text);
97
88
  }
98
89
  button.variant_secondary:hover {
99
- background-color: var(--button-secondary-bg-hovered);
100
- border-color: var(--button-secondary-border-color-hovered);
101
- color: var(--button-secondary-color-hovered);
90
+ background-color: var(--component-button-secondary-bg-hover);
91
+ border-color: var(--component-button-secondary-border-hover);
92
+ color: var(--component-button-secondary-text-hover);
102
93
  }
103
94
  button.variant_secondary:active {
104
- background-color: var(--button-secondary-bg-active);
105
- border-color: var(--button-secondary-border-color-active);
106
- color: var(--button-secondary-color-active);
107
- }
108
- button.variant_secondary_disabled {
109
- background-color: var(--button-secondary-bg-disabled);
110
- border-color: var(--button-secondary-border-color-disabled);
111
- color: var(--button-secondary-color-disabled);
112
- cursor: not-allowed;
113
- pointer-events: none;
95
+ background-color: var(--component-button-secondary-bg-pressed);
96
+ border-color: var(--component-button-secondary-border-pressed);
97
+ color: var(--component-button-secondary-text-pressed);
114
98
  }
115
99
  button.variant_pseudo {
116
- background-color: var(--button-pseudo-bg);
117
- border-color: var(--button-pseudo-border-color);
118
- color: var(--button-pseudo-color);
100
+ background-color: var(--component-button-pseudo-bg);
101
+ border-color: var(--component-button-pseudo-border);
102
+ color: var(--component-button-pseudo-text);
119
103
  }
120
104
  button.variant_pseudo:hover {
121
- background-color: var(--button-pseudo-bg-hovered);
122
- border-color: var(--button-pseudo-border-color-hovered);
123
- color: var(--button-pseudo-color-hovered);
105
+ background-color: var(--component-button-pseudo-bg-hover);
106
+ border-color: var(--component-button-pseudo-border-hover);
107
+ color: var(--component-button-pseudo-text-hover);
124
108
  }
125
109
  button.variant_pseudo:active {
126
- background-color: var(--button-pseudo-bg-active);
127
- border-color: var(--button-pseudo-border-color-active);
128
- color: var(--button-pseudo-color-active);
129
- }
130
- button.variant_pseudo_disabled {
131
- background-color: var(--button-pseudo-bg-disabled);
132
- border-color: var(--button-pseudo-border-color-disabled);
133
- color: var(--button-pseudo-color-disabled);
134
- cursor: not-allowed;
135
- pointer-events: none;
110
+ background-color: var(--component-button-pseudo-bg-pressed);
111
+ border-color: var(--component-button-pseudo-border-pressed);
112
+ color: var(--component-button-pseudo-text-pressed);
136
113
  }
137
114
  button.variant_outline {
138
- background-color: var(--button-outline-bg);
139
- border-color: var(--button-outline-border-color);
140
- color: var(--button-outline-color);
115
+ background-color: var(--component-button-outline-bg);
116
+ border-color: var(--component-button-outline-border);
117
+ color: var(--component-button-outline-text);
141
118
  }
142
119
  button.variant_outline:hover {
143
- background-color: var(--button-outline-bg-hovered);
144
- border-color: var(--button-outline-border-color-hovered);
145
- color: var(--button-outline-color-hovered);
120
+ background-color: var(--component-button-outline-bg-hover);
121
+ border-color: var(--component-button-outline-border-hover);
122
+ color: var(--component-button-outline-text-hover);
146
123
  }
147
124
  button.variant_outline:active {
148
- background-color: var(--button-outline-bg-active);
149
- border-color: var(--button-outline-border-color-active);
150
- color: var(--button-outline-color-active);
151
- }
152
- button.variant_outline_disabled {
153
- background-color: var(--button-outline-bg-disabled);
154
- border-color: var(--button-outline-border-color-disabled);
155
- color: var(--button-outline-color-disabled);
156
- cursor: not-allowed;
157
- pointer-events: none;
125
+ background-color: var(--component-button-outline-bg-pressed);
126
+ border-color: var(--component-button-outline-border-pressed);
127
+ color: var(--component-button-outline-text-pressed);
158
128
  }
159
129
  button.variant_clear {
160
- background-color: transparent;
161
- border-color: transparent;
162
- color: var(--button-clear-color);
130
+ background-color: var(--component-button-clear-bg);
131
+ border-color: var(--component-button-clear-border);
132
+ color: var(--component-button-clear-text);
163
133
  }
164
134
  button.variant_clear:hover {
165
- color: var(--button-clear-color-hovered);
135
+ background-color: var(--component-button-clear-bg-hover);
136
+ border-color: var(--component-button-clear-border-hover);
137
+ color: var(--component-button-clear-text-hover);
166
138
  }
167
139
  button.variant_clear:active {
168
- color: var(--button-clear-color-active);
169
- }
170
- button.variant_clear_disabled {
171
- background-color: var(--button-clear-bg-disabled);
172
- border-color: var(--button-clear-border-color-disabled);
173
- color: var(--button-clear-color-disabled);
174
- cursor: not-allowed;
175
- pointer-events: none;
140
+ background-color: var(--component-button-clear-bg-pressed);
141
+ border-color: var(--component-button-clear-border-pressed);
142
+ color: var(--component-button-clear-text-pressed);
176
143
  }
177
144
  button.variant_alert {
178
- background-color: var(--button-alert-bg);
179
- border-color: var(--button-alert-border-color);
180
- color: var(--button-alert-color);
145
+ background-color: var(--component-button-alert-bg);
146
+ border-color: var(--component-button-alert-border);
147
+ color: var(--component-button-alert-text);
181
148
  }
182
149
  button.variant_alert:hover {
183
- background-color: var(--button-alert-bg-hovered);
184
- border-color: var(--button-alert-border-color-hovered);
185
- color: var(--button-alert-color-hovered);
150
+ background-color: var(--component-button-alert-bg-hover);
151
+ border-color: var(--component-button-alert-border-hover);
152
+ color: var(--component-button-alert-text-hover);
186
153
  }
187
154
  button.variant_alert:active {
188
- background-color: var(--button-alert-bg-active);
189
- border-color: var(--button-alert-border-color-active);
190
- color: var(--button-alert-color-active);
191
- }
192
- button.variant_alert_disabled {
193
- background-color: var(--button-alert-bg-disabled);
194
- border-color: var(--button-alert-border-color-disabled);
195
- color: var(--button-alert-color-disabled);
196
- cursor: not-allowed;
197
- pointer-events: none;
155
+ background-color: var(--component-button-alert-bg-pressed);
156
+ border-color: var(--component-button-alert-border-pressed);
157
+ color: var(--component-button-alert-text-pressed);
198
158
  }
199
159
  button.variant_success {
200
- background-color: var(--button-success-bg);
201
- border-color: var(--button-success-border-color);
202
- color: var(--button-success-color);
160
+ background-color: var(--component-button-success-bg);
161
+ border-color: var(--component-button-success-border);
162
+ color: var(--component-button-success-text);
203
163
  }
204
164
  button.variant_success:hover {
205
- background-color: var(--button-success-bg-hovered);
206
- border-color: var(--button-success-border-color-hovered);
207
- color: var(--button-success-color-hovered);
165
+ background-color: var(--component-button-success-bg-hover);
166
+ border-color: var(--component-button-success-border-hover);
167
+ color: var(--component-button-success-text-hover);
208
168
  }
209
169
  button.variant_success:active {
210
- background-color: var(--button-success-bg-active);
211
- border-color: var(--button-success-border-color-active);
212
- color: var(--button-success-color-active);
213
- }
214
- button.variant_success_disabled {
215
- background-color: var(--button-success-bg-disabled);
216
- border-color: var(--button-success-border-color-disabled);
217
- color: var(--button-success-color-disabled);
170
+ background-color: var(--component-button-success-bg-pressed);
171
+ border-color: var(--component-button-success-border-pressed);
172
+ color: var(--component-button-success-text-pressed);
173
+ }
174
+ button.variant_primary_disabled, button.variant_secondary_disabled, button.variant_pseudo_disabled, button.variant_outline_disabled, button.variant_clear_disabled, button.variant_alert_disabled, button.variant_success_disabled {
175
+ background-color: var(--component-button-bg-disabled);
176
+ border-color: var(--component-button-border-disabled);
177
+ color: var(--component-button-text-disabled);
218
178
  cursor: not-allowed;
219
179
  pointer-events: none;
220
180
  }
package/Calendar/Calendar.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ import React from "react";
2
+ import type { HTMLAttributes, ReactNode } from "react";
3
+ export type CalendarSize = "xs" | "s" | "m" | "l" | "xl";
4
+ export type CalendarSelectionMode = "single" | "range";
5
+ export type CalendarView = "days" | "months" | "years";
6
+ export interface CalendarEvent {
7
+ date: Date;
8
+ color?: string;
9
+ label?: ReactNode;
10
+ }
11
+ interface CalendarCommonProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
12
+ defaultVisibleMonth?: Date;
13
+ defaultView?: CalendarView;
14
+ disabledDates?: Date[] | ((date: Date) => boolean);
15
+ events?: CalendarEvent[];
16
+ locale?: string;
17
+ maxDate?: Date;
18
+ minDate?: Date;
19
+ monthLabel?: string;
20
+ monthsToShow?: 1 | 2;
21
+ nextMonthLabel?: string;
22
+ onVisibleMonthChange?: (month: Date) => void;
23
+ previousMonthLabel?: string;
24
+ showOutsideDays?: boolean;
25
+ size?: CalendarSize;
26
+ visibleMonth?: Date;
27
+ weekStartsOn?: 0 | 1;
28
+ yearLabel?: string;
29
+ yearRange?: [number, number];
30
+ }
31
+ export interface CalendarSingleProps extends CalendarCommonProps {
32
+ onChange: (value: Date) => void;
33
+ selectionMode?: "single";
34
+ value: Date | null;
35
+ }
36
+ export interface CalendarRangeProps extends CalendarCommonProps {
37
+ onChange: (value: [Date | null, Date | null]) => void;
38
+ selectionMode: "range";
39
+ value: [Date | null, Date | null];
40
+ }
41
+ export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
42
+ declare const Calendar: (props: CalendarProps) => React.JSX.Element;
43
+ export default Calendar;