rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250416

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 (484) hide show
  1. package/AutoComplete/styles/index.css +112 -62
  2. package/AutoComplete/styles/index.less +1 -1
  3. package/Box/styles/index.css +12 -0
  4. package/CHANGELOG.md +24 -0
  5. package/Calendar/styles/index.css +11 -9
  6. package/Calendar/styles/index.less +3 -1
  7. package/Cascader/styles/index.css +112 -62
  8. package/CheckPicker/styles/index.css +112 -62
  9. package/CheckPicker/styles/index.less +1 -1
  10. package/CheckTree/styles/index.css +113 -63
  11. package/CheckTree/styles/index.less +1 -1
  12. package/CheckTreePicker/styles/index.css +113 -63
  13. package/DateInput/styles/index.css +0 -7
  14. package/DatePicker/styles/index.css +122 -74
  15. package/DatePicker/styles/index.less +5 -11
  16. package/DateRangeInput/styles/index.css +0 -7
  17. package/DateRangePicker/styles/index.css +132 -78
  18. package/DateRangePicker/styles/index.less +10 -4
  19. package/Divider/styles/index.css +2 -2
  20. package/Divider/styles/index.less +2 -2
  21. package/Grid/styles/columns.less +1 -2
  22. package/Grid/styles/grid-framework.less +1 -0
  23. package/Grid/styles/index.css +9 -4
  24. package/Grid/styles/row.less +2 -2
  25. package/Input/styles/index.css +0 -7
  26. package/Input/styles/index.less +0 -6
  27. package/Input/styles/mixin.less +0 -4
  28. package/InputGroup/styles/index.css +1 -1
  29. package/InputGroup/styles/index.less +1 -1
  30. package/InputNumber/styles/index.css +1 -8
  31. package/InputPicker/styles/index.css +121 -70
  32. package/InputPicker/styles/index.less +4 -4
  33. package/Link/package.json +7 -0
  34. package/Link/styles/index.css +32 -0
  35. package/Link/styles/index.less +39 -0
  36. package/Message/styles/index.css +9 -0
  37. package/Message/styles/index.less +11 -0
  38. package/MultiCascadeTree/styles/index.css +112 -62
  39. package/MultiCascader/styles/index.css +112 -62
  40. package/Nav/styles/index.css +1 -0
  41. package/Nav/styles/index.less +1 -0
  42. package/Pagination/styles/index.css +114 -64
  43. package/PasswordInput/package.json +7 -0
  44. package/PasswordInput/styles/index.css +172 -0
  45. package/PasswordInput/styles/index.less +1 -0
  46. package/PasswordStrengthMeter/package.json +7 -0
  47. package/PasswordStrengthMeter/styles/index.css +33 -0
  48. package/PasswordStrengthMeter/styles/index.less +39 -0
  49. package/README.md +3 -3
  50. package/RadioGroup/styles/index.css +1 -0
  51. package/RadioGroup/styles/index.less +1 -0
  52. package/RangeSlider/styles/index.css +76 -43
  53. package/Rate/styles/index.css +48 -34
  54. package/Rate/styles/index.less +32 -21
  55. package/SelectPicker/styles/index.css +112 -62
  56. package/SelectPicker/styles/index.less +1 -1
  57. package/Slider/styles/index.css +76 -43
  58. package/Slider/styles/index.less +95 -48
  59. package/Tabs/styles/index.css +1 -0
  60. package/TagInput/styles/index.css +152 -91
  61. package/TagInput/styles/index.less +1 -1
  62. package/TagPicker/styles/index.css +151 -90
  63. package/TagPicker/styles/index.less +52 -41
  64. package/Textarea/package.json +7 -0
  65. package/Textarea/styles/index.css +6 -0
  66. package/Textarea/styles/index.less +7 -0
  67. package/TimePicker/styles/index.css +122 -74
  68. package/TimeRangePicker/styles/index.css +132 -78
  69. package/Toggle/styles/index.css +146 -87
  70. package/Toggle/styles/index.less +66 -38
  71. package/Tree/styles/index.css +113 -63
  72. package/Tree/styles/index.less +1 -1
  73. package/TreePicker/styles/index.css +113 -63
  74. package/cjs/AutoComplete/AutoComplete.d.ts +1 -1
  75. package/cjs/AutoComplete/AutoComplete.js +13 -11
  76. package/cjs/Avatar/Avatar.d.ts +3 -4
  77. package/cjs/Breadcrumb/Breadcrumb.js +2 -2
  78. package/cjs/Breadcrumb/BreadcrumbItem.js +1 -1
  79. package/cjs/Button/Button.js +9 -10
  80. package/cjs/Calendar/CalendarProvider.js +0 -0
  81. package/cjs/Calendar/hooks/useCalendar.js +0 -0
  82. package/cjs/Carousel/Carousel.js +2 -2
  83. package/cjs/Cascader/Cascader.js +42 -45
  84. package/cjs/Cascader/useActive.d.ts +6 -4
  85. package/cjs/Cascader/useActive.js +10 -8
  86. package/cjs/CheckPicker/CheckPicker.js +38 -41
  87. package/cjs/CheckTreePicker/CheckTreePicker.js +20 -22
  88. package/cjs/CustomProvider/CustomProvider.d.ts +1 -4
  89. package/cjs/CustomProvider/types.d.ts +10 -2
  90. package/cjs/DatePicker/DatePicker.d.ts +1 -1
  91. package/cjs/DatePicker/DatePicker.js +28 -25
  92. package/cjs/DatePicker/utils.d.ts +3 -3
  93. package/cjs/DatePicker/utils.js +3 -3
  94. package/cjs/DateRangePicker/DateRangePicker.js +39 -33
  95. package/cjs/DateRangePicker/utils.js +0 -0
  96. package/cjs/Divider/Divider.d.ts +3 -2
  97. package/cjs/Divider/Divider.js +2 -2
  98. package/cjs/Form/hooks/useFormValidate.js +0 -0
  99. package/cjs/Form/hooks/useSchemaModel.js +2 -54
  100. package/cjs/Form/utils/constructFlatSchema.d.ts +4 -0
  101. package/cjs/Form/utils/constructFlatSchema.js +41 -0
  102. package/cjs/FormControl/hooks/useField.js +0 -0
  103. package/cjs/FormControl/utils.js +0 -0
  104. package/cjs/Grid/Row.d.ts +2 -2
  105. package/cjs/Grid/Row.js +2 -20
  106. package/cjs/Grid/types.d.ts +1 -0
  107. package/cjs/Grid/utils/styles.d.ts +6 -0
  108. package/cjs/Grid/utils/styles.js +43 -0
  109. package/cjs/Image/Image.js +12 -11
  110. package/cjs/Image/hooks/useImage.d.ts +2 -0
  111. package/cjs/Image/hooks/useImage.js +19 -43
  112. package/cjs/InlineEdit/InlineEdit.js +3 -1
  113. package/cjs/InlineEdit/useEditState.d.ts +2 -0
  114. package/cjs/InlineEdit/useEditState.js +8 -0
  115. package/cjs/Input/Input.d.ts +3 -12
  116. package/cjs/Input/Input.js +12 -73
  117. package/cjs/InputPicker/InputPicker.js +27 -28
  118. package/cjs/Link/ExternalLinkIcon.d.ts +3 -0
  119. package/cjs/Link/ExternalLinkIcon.js +23 -0
  120. package/cjs/Link/Link.d.ts +14 -0
  121. package/cjs/Link/Link.js +52 -0
  122. package/cjs/Link/index.d.ts +4 -0
  123. package/cjs/Link/index.js +11 -0
  124. package/cjs/List/List.js +6 -2
  125. package/cjs/List/helper/useSortHelper.d.ts +7 -5
  126. package/cjs/List/helper/useSortHelper.js +109 -16
  127. package/cjs/List/helper/utils.js +14 -6
  128. package/cjs/MultiCascader/MultiCascader.js +40 -43
  129. package/cjs/Nav/NavItem.js +1 -1
  130. package/cjs/Nav/NavMegaMenu.d.ts +5 -0
  131. package/cjs/Nav/NavMegaMenu.js +5 -0
  132. package/cjs/Navbar/NavbarItem.js +1 -1
  133. package/cjs/Navbar/NavbarMegaMenu.js +1 -1
  134. package/cjs/PasswordInput/PasswordInput.d.ts +14 -0
  135. package/cjs/PasswordInput/PasswordInput.js +71 -0
  136. package/cjs/PasswordInput/index.d.ts +4 -0
  137. package/cjs/PasswordInput/index.js +11 -0
  138. package/cjs/PasswordStrengthMeter/PasswordStrengthMeter.d.ts +12 -0
  139. package/cjs/PasswordStrengthMeter/PasswordStrengthMeter.js +50 -0
  140. package/cjs/PasswordStrengthMeter/index.d.ts +4 -0
  141. package/cjs/PasswordStrengthMeter/index.js +11 -0
  142. package/cjs/RangeSlider/RangeSlider.js +18 -3
  143. package/cjs/Rate/Character.d.ts +4 -3
  144. package/cjs/Rate/Character.js +19 -15
  145. package/cjs/Rate/Rate.d.ts +10 -2
  146. package/cjs/Rate/Rate.js +47 -42
  147. package/cjs/Rate/types.d.ts +8 -0
  148. package/cjs/Rate/types.js +4 -0
  149. package/cjs/Rate/useRatingStates.d.ts +20 -0
  150. package/cjs/Rate/useRatingStates.js +48 -0
  151. package/cjs/Rate/utils.d.ts +14 -3
  152. package/cjs/Rate/utils.js +50 -9
  153. package/cjs/SelectPicker/SelectPicker.js +45 -46
  154. package/cjs/Sidenav/ExpandedSidenavDropdownItem.js +1 -1
  155. package/cjs/Sidenav/SidenavItem.js +1 -1
  156. package/cjs/Slider/Graduated.d.ts +4 -0
  157. package/cjs/Slider/Graduated.js +43 -20
  158. package/cjs/Slider/Handle.d.ts +1 -1
  159. package/cjs/Slider/Handle.js +12 -12
  160. package/cjs/Slider/Slider.d.ts +16 -1
  161. package/cjs/Slider/Slider.js +7 -2
  162. package/cjs/Slider/useDrag.d.ts +1 -0
  163. package/cjs/Slider/useDrag.js +8 -3
  164. package/cjs/Steps/Steps.js +2 -2
  165. package/cjs/Tabs/Tabs.js +2 -2
  166. package/cjs/Textarea/Textarea.d.ts +32 -0
  167. package/cjs/Textarea/Textarea.js +51 -0
  168. package/cjs/Textarea/index.d.ts +4 -0
  169. package/cjs/Textarea/index.js +11 -0
  170. package/cjs/Timeline/Timeline.js +2 -2
  171. package/cjs/Toggle/Toggle.d.ts +10 -1
  172. package/cjs/Toggle/Toggle.js +12 -9
  173. package/cjs/TreePicker/TreePicker.js +18 -19
  174. package/cjs/index.d.ts +4 -1
  175. package/cjs/index.js +24 -6
  176. package/cjs/internals/Box/Box.d.ts +4 -0
  177. package/cjs/internals/Box/Box.js +1 -1
  178. package/cjs/internals/Box/utils.js +5 -1
  179. package/cjs/internals/InputBase/InputBase.d.ts +45 -0
  180. package/cjs/internals/InputBase/InputBase.js +96 -0
  181. package/cjs/internals/InputBase/index.d.ts +3 -0
  182. package/cjs/internals/InputBase/index.js +8 -0
  183. package/cjs/internals/Overlay/Modal.d.ts +1 -1
  184. package/cjs/internals/Overlay/OverlayTrigger.d.ts +4 -3
  185. package/cjs/internals/Overlay/OverlayTrigger.js +8 -3
  186. package/cjs/internals/Picker/Listbox.js +7 -9
  187. package/cjs/internals/Picker/PickerDrawer.d.ts +8 -0
  188. package/cjs/internals/Picker/PickerDrawer.js +31 -0
  189. package/cjs/internals/Picker/PickerPopup.js +5 -3
  190. package/cjs/internals/Picker/PickerToggle.d.ts +1 -0
  191. package/cjs/internals/Picker/PickerToggle.js +10 -3
  192. package/cjs/internals/Picker/PickerToggleTrigger.d.ts +51 -11
  193. package/cjs/internals/Picker/PickerToggleTrigger.js +59 -13
  194. package/cjs/internals/Picker/hooks/index.d.ts +0 -1
  195. package/cjs/internals/Picker/hooks/index.js +2 -4
  196. package/cjs/internals/Picker/hooks/useCombobox.d.ts +1 -0
  197. package/cjs/internals/Picker/hooks/useCombobox.js +3 -1
  198. package/cjs/internals/Picker/index.d.ts +1 -2
  199. package/cjs/internals/Picker/index.js +10 -12
  200. package/{esm → cjs/internals}/SafeAnchor/SafeAnchor.d.ts +2 -2
  201. package/cjs/{SafeAnchor → internals/SafeAnchor}/SafeAnchor.js +3 -3
  202. package/cjs/internals/Tree/TreeView.js +3 -4
  203. package/cjs/internals/hooks/useRootClose.js +4 -4
  204. package/cjs/internals/index.d.ts +4 -0
  205. package/cjs/internals/index.js +13 -1
  206. package/cjs/internals/types/html.d.ts +2 -0
  207. package/cjs/internals/utils/{dom.d.ts → html/dom.d.ts} +1 -0
  208. package/cjs/internals/utils/{dom.js → html/dom.js} +8 -0
  209. package/cjs/internals/utils/{events.js → html/events.js} +0 -0
  210. package/cjs/internals/utils/{htmlPropsUtils.js → html/htmlPropsUtils.js} +0 -0
  211. package/cjs/internals/utils/html/index.d.ts +4 -0
  212. package/cjs/internals/utils/html/index.js +28 -0
  213. package/cjs/internals/utils/{safeSetSelection.js → html/safeSetSelection.js} +1 -1
  214. package/cjs/internals/utils/index.d.ts +3 -15
  215. package/cjs/internals/utils/index.js +20 -49
  216. package/cjs/internals/utils/{ReactChildren.d.ts → react/ReactChildren.d.ts} +2 -8
  217. package/cjs/internals/utils/{ReactChildren.js → react/ReactChildren.js} +5 -25
  218. package/cjs/internals/utils/react/ReactIs.d.ts +7 -0
  219. package/cjs/internals/utils/react/ReactIs.js +26 -0
  220. package/{esm/internals/utils → cjs/internals/utils/react}/createComponent.d.ts +2 -2
  221. package/cjs/internals/utils/{createComponent.js → react/createComponent.js} +3 -3
  222. package/cjs/internals/utils/{deprecateComponent.js → react/deprecateComponent.js} +1 -1
  223. package/cjs/internals/utils/{forwardRef.d.ts → react/forwardRef.d.ts} +1 -1
  224. package/cjs/internals/utils/react/index.d.ts +7 -0
  225. package/cjs/internals/utils/react/index.js +46 -0
  226. package/cjs/internals/utils/{mergeRefs.js → react/mergeRefs.js} +0 -0
  227. package/cjs/internals/utils/{getStringLength.d.ts → string/getStringLength.d.ts} +0 -1
  228. package/cjs/internals/utils/{getStringLength.js → string/getStringLength.js} +1 -3
  229. package/cjs/internals/utils/string/index.d.ts +4 -0
  230. package/cjs/internals/utils/string/index.js +28 -0
  231. package/cjs/internals/utils/{stringifyReactNode.js → string/stringifyReactNode.js} +0 -0
  232. package/cjs/internals/utils/{tplTransform.js → string/tplTransform.js} +0 -0
  233. package/cjs/locales/en_GB.js +2 -2
  234. package/cjs/locales/en_US.js +2 -2
  235. package/cjs/locales/index.js +0 -0
  236. package/cjs/locales/pl_PL.js +2 -3
  237. package/cjs/useBreakpointValue/useBreakpointValue.d.ts +6 -2
  238. package/cjs/useBreakpointValue/useBreakpointValue.js +9 -4
  239. package/cjs/useMediaQuery/breakpoints.d.ts +24 -0
  240. package/cjs/useMediaQuery/breakpoints.js +248 -0
  241. package/cjs/useMediaQuery/index.d.ts +1 -1
  242. package/cjs/useMediaQuery/types.d.ts +45 -0
  243. package/cjs/useMediaQuery/types.js +4 -0
  244. package/cjs/useMediaQuery/useMediaQuery.d.ts +4 -13
  245. package/cjs/useMediaQuery/useMediaQuery.js +30 -12
  246. package/cjs/useToaster/useToaster.d.ts +1 -1
  247. package/cjs/useToaster/useToaster.js +1 -1
  248. package/dist/rsuite-no-reset-rtl.css +565 -276
  249. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  250. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  251. package/dist/rsuite-no-reset.css +565 -276
  252. package/dist/rsuite-no-reset.min.css +1 -1
  253. package/dist/rsuite-no-reset.min.css.map +1 -1
  254. package/dist/rsuite-rtl.css +565 -276
  255. package/dist/rsuite-rtl.min.css +1 -1
  256. package/dist/rsuite-rtl.min.css.map +1 -1
  257. package/dist/rsuite.css +565 -276
  258. package/dist/rsuite.js +508 -211
  259. package/dist/rsuite.js.map +1 -1
  260. package/dist/rsuite.min.css +1 -1
  261. package/dist/rsuite.min.css.map +1 -1
  262. package/dist/rsuite.min.js +1 -1
  263. package/dist/rsuite.min.js.map +1 -1
  264. package/esm/AutoComplete/AutoComplete.d.ts +1 -1
  265. package/esm/AutoComplete/AutoComplete.js +13 -11
  266. package/esm/Avatar/Avatar.d.ts +3 -4
  267. package/esm/Breadcrumb/Breadcrumb.js +3 -3
  268. package/esm/Breadcrumb/BreadcrumbItem.js +1 -1
  269. package/esm/Button/Button.js +10 -11
  270. package/esm/Calendar/CalendarProvider.js +0 -0
  271. package/esm/Calendar/hooks/useCalendar.js +0 -0
  272. package/esm/Carousel/Carousel.js +3 -3
  273. package/esm/Cascader/Cascader.js +43 -46
  274. package/esm/Cascader/useActive.d.ts +6 -4
  275. package/esm/Cascader/useActive.js +10 -8
  276. package/esm/CheckPicker/CheckPicker.js +39 -42
  277. package/esm/CheckTreePicker/CheckTreePicker.js +21 -23
  278. package/esm/CustomProvider/CustomProvider.d.ts +1 -4
  279. package/esm/CustomProvider/types.d.ts +10 -2
  280. package/esm/DatePicker/DatePicker.d.ts +1 -1
  281. package/esm/DatePicker/DatePicker.js +29 -26
  282. package/esm/DatePicker/utils.d.ts +3 -3
  283. package/esm/DatePicker/utils.js +4 -4
  284. package/esm/DateRangePicker/DateRangePicker.js +35 -29
  285. package/esm/DateRangePicker/utils.js +0 -0
  286. package/esm/Divider/Divider.d.ts +3 -2
  287. package/esm/Divider/Divider.js +2 -2
  288. package/esm/Form/hooks/useFormValidate.js +0 -0
  289. package/esm/Form/hooks/useSchemaModel.js +3 -55
  290. package/esm/Form/utils/constructFlatSchema.d.ts +4 -0
  291. package/esm/Form/utils/constructFlatSchema.js +37 -0
  292. package/esm/FormControl/hooks/useField.js +0 -0
  293. package/esm/FormControl/utils.js +0 -0
  294. package/esm/Grid/Row.d.ts +2 -2
  295. package/esm/Grid/Row.js +2 -20
  296. package/esm/Grid/types.d.ts +1 -0
  297. package/esm/Grid/utils/styles.d.ts +6 -0
  298. package/esm/Grid/utils/styles.js +37 -0
  299. package/esm/Image/Image.js +12 -11
  300. package/esm/Image/hooks/useImage.d.ts +2 -0
  301. package/esm/Image/hooks/useImage.js +20 -43
  302. package/esm/InlineEdit/InlineEdit.js +3 -1
  303. package/esm/InlineEdit/useEditState.d.ts +2 -0
  304. package/esm/InlineEdit/useEditState.js +8 -0
  305. package/esm/Input/Input.d.ts +3 -12
  306. package/esm/Input/Input.js +12 -74
  307. package/esm/InputPicker/InputPicker.js +28 -29
  308. package/esm/Link/ExternalLinkIcon.d.ts +3 -0
  309. package/esm/Link/ExternalLinkIcon.js +18 -0
  310. package/esm/Link/Link.d.ts +14 -0
  311. package/esm/Link/Link.js +47 -0
  312. package/esm/Link/index.d.ts +4 -0
  313. package/esm/Link/index.js +8 -0
  314. package/esm/List/List.js +6 -2
  315. package/esm/List/helper/useSortHelper.d.ts +7 -5
  316. package/esm/List/helper/useSortHelper.js +109 -16
  317. package/esm/List/helper/utils.js +14 -6
  318. package/esm/MultiCascader/MultiCascader.js +41 -44
  319. package/esm/Nav/NavItem.js +1 -1
  320. package/esm/Nav/NavMegaMenu.d.ts +5 -0
  321. package/esm/Nav/NavMegaMenu.js +5 -0
  322. package/esm/Navbar/NavbarItem.js +1 -1
  323. package/esm/Navbar/NavbarMegaMenu.js +1 -1
  324. package/esm/PasswordInput/PasswordInput.d.ts +14 -0
  325. package/esm/PasswordInput/PasswordInput.js +66 -0
  326. package/esm/PasswordInput/index.d.ts +4 -0
  327. package/esm/PasswordInput/index.js +8 -0
  328. package/esm/PasswordStrengthMeter/PasswordStrengthMeter.d.ts +12 -0
  329. package/esm/PasswordStrengthMeter/PasswordStrengthMeter.js +45 -0
  330. package/esm/PasswordStrengthMeter/index.d.ts +4 -0
  331. package/esm/PasswordStrengthMeter/index.js +8 -0
  332. package/esm/RangeSlider/RangeSlider.js +18 -3
  333. package/esm/Rate/Character.d.ts +4 -3
  334. package/esm/Rate/Character.js +20 -16
  335. package/esm/Rate/Rate.d.ts +10 -2
  336. package/esm/Rate/Rate.js +49 -42
  337. package/esm/Rate/types.d.ts +8 -0
  338. package/esm/Rate/types.js +2 -0
  339. package/esm/Rate/useRatingStates.d.ts +20 -0
  340. package/esm/Rate/useRatingStates.js +43 -0
  341. package/esm/Rate/utils.d.ts +14 -3
  342. package/esm/Rate/utils.js +46 -7
  343. package/esm/SelectPicker/SelectPicker.js +46 -47
  344. package/esm/Sidenav/ExpandedSidenavDropdownItem.js +1 -1
  345. package/esm/Sidenav/SidenavItem.js +1 -1
  346. package/esm/Slider/Graduated.d.ts +4 -0
  347. package/esm/Slider/Graduated.js +43 -20
  348. package/esm/Slider/Handle.d.ts +1 -1
  349. package/esm/Slider/Handle.js +12 -12
  350. package/esm/Slider/Slider.d.ts +16 -1
  351. package/esm/Slider/Slider.js +7 -2
  352. package/esm/Slider/useDrag.d.ts +1 -0
  353. package/esm/Slider/useDrag.js +8 -3
  354. package/esm/Steps/Steps.js +3 -3
  355. package/esm/Tabs/Tabs.js +3 -3
  356. package/esm/Textarea/Textarea.d.ts +32 -0
  357. package/esm/Textarea/Textarea.js +46 -0
  358. package/esm/Textarea/index.d.ts +4 -0
  359. package/esm/Textarea/index.js +8 -0
  360. package/esm/Timeline/Timeline.js +3 -3
  361. package/esm/Toggle/Toggle.d.ts +10 -1
  362. package/esm/Toggle/Toggle.js +12 -9
  363. package/esm/TreePicker/TreePicker.js +19 -20
  364. package/esm/index.d.ts +4 -1
  365. package/esm/index.js +4 -1
  366. package/esm/internals/Box/Box.d.ts +4 -0
  367. package/esm/internals/Box/Box.js +1 -1
  368. package/esm/internals/Box/utils.js +5 -1
  369. package/esm/internals/InputBase/InputBase.d.ts +45 -0
  370. package/esm/internals/InputBase/InputBase.js +89 -0
  371. package/esm/internals/InputBase/index.d.ts +3 -0
  372. package/esm/internals/InputBase/index.js +3 -0
  373. package/esm/internals/Overlay/Modal.d.ts +1 -1
  374. package/esm/internals/Overlay/OverlayTrigger.d.ts +4 -3
  375. package/esm/internals/Overlay/OverlayTrigger.js +8 -2
  376. package/esm/internals/Picker/Listbox.js +8 -10
  377. package/esm/internals/Picker/PickerDrawer.d.ts +8 -0
  378. package/esm/internals/Picker/PickerDrawer.js +26 -0
  379. package/esm/internals/Picker/PickerPopup.js +5 -3
  380. package/esm/internals/Picker/PickerToggle.d.ts +1 -0
  381. package/esm/internals/Picker/PickerToggle.js +10 -3
  382. package/esm/internals/Picker/PickerToggleTrigger.d.ts +51 -11
  383. package/esm/internals/Picker/PickerToggleTrigger.js +59 -12
  384. package/esm/internals/Picker/hooks/index.d.ts +0 -1
  385. package/esm/internals/Picker/hooks/index.js +1 -2
  386. package/esm/internals/Picker/hooks/useCombobox.d.ts +1 -0
  387. package/esm/internals/Picker/hooks/useCombobox.js +3 -1
  388. package/esm/internals/Picker/index.d.ts +1 -2
  389. package/esm/internals/Picker/index.js +1 -2
  390. package/{cjs → esm/internals}/SafeAnchor/SafeAnchor.d.ts +2 -2
  391. package/esm/{SafeAnchor → internals/SafeAnchor}/SafeAnchor.js +3 -3
  392. package/esm/internals/Tree/TreeView.js +4 -5
  393. package/esm/internals/hooks/useRootClose.js +1 -1
  394. package/esm/internals/index.d.ts +4 -0
  395. package/esm/internals/index.js +5 -0
  396. package/esm/internals/types/html.d.ts +2 -0
  397. package/esm/internals/utils/{dom.d.ts → html/dom.d.ts} +1 -0
  398. package/esm/internals/utils/{dom.js → html/dom.js} +7 -0
  399. package/esm/internals/utils/{events.js → html/events.js} +0 -0
  400. package/esm/internals/utils/{htmlPropsUtils.js → html/htmlPropsUtils.js} +0 -0
  401. package/esm/internals/utils/html/index.d.ts +4 -0
  402. package/esm/internals/utils/html/index.js +5 -0
  403. package/esm/internals/utils/{safeSetSelection.js → html/safeSetSelection.js} +1 -1
  404. package/esm/internals/utils/index.d.ts +3 -15
  405. package/esm/internals/utils/index.js +3 -14
  406. package/esm/internals/utils/{ReactChildren.d.ts → react/ReactChildren.d.ts} +2 -8
  407. package/esm/internals/utils/{ReactChildren.js → react/ReactChildren.js} +3 -21
  408. package/esm/internals/utils/react/ReactIs.d.ts +7 -0
  409. package/esm/internals/utils/react/ReactIs.js +22 -0
  410. package/{cjs/internals/utils → esm/internals/utils/react}/createComponent.d.ts +2 -2
  411. package/esm/internals/utils/{createComponent.js → react/createComponent.js} +3 -3
  412. package/esm/internals/utils/{deprecateComponent.js → react/deprecateComponent.js} +1 -1
  413. package/esm/internals/utils/{forwardRef.d.ts → react/forwardRef.d.ts} +1 -1
  414. package/esm/internals/utils/react/index.d.ts +7 -0
  415. package/esm/internals/utils/react/index.js +8 -0
  416. package/esm/internals/utils/{mergeRefs.js → react/mergeRefs.js} +0 -0
  417. package/esm/internals/utils/{getStringLength.d.ts → string/getStringLength.d.ts} +0 -1
  418. package/esm/internals/utils/{getStringLength.js → string/getStringLength.js} +1 -2
  419. package/esm/internals/utils/string/index.d.ts +4 -0
  420. package/esm/internals/utils/string/index.js +5 -0
  421. package/esm/internals/utils/{stringifyReactNode.js → string/stringifyReactNode.js} +0 -0
  422. package/esm/internals/utils/{tplTransform.js → string/tplTransform.js} +0 -0
  423. package/esm/locales/en_GB.js +2 -2
  424. package/esm/locales/en_US.js +2 -2
  425. package/esm/locales/index.js +0 -0
  426. package/esm/locales/pl_PL.js +1 -1
  427. package/esm/useBreakpointValue/useBreakpointValue.d.ts +6 -2
  428. package/esm/useBreakpointValue/useBreakpointValue.js +9 -4
  429. package/esm/useMediaQuery/breakpoints.d.ts +24 -0
  430. package/esm/useMediaQuery/breakpoints.js +244 -0
  431. package/esm/useMediaQuery/index.d.ts +1 -1
  432. package/esm/useMediaQuery/types.d.ts +45 -0
  433. package/esm/useMediaQuery/types.js +2 -0
  434. package/esm/useMediaQuery/useMediaQuery.d.ts +4 -13
  435. package/esm/useMediaQuery/useMediaQuery.js +29 -11
  436. package/esm/useToaster/useToaster.d.ts +1 -1
  437. package/esm/useToaster/useToaster.js +1 -1
  438. package/internals/Box/styles/index.less +4 -0
  439. package/internals/Picker/styles/index.less +105 -23
  440. package/internals/Picker/styles/mixin.less +6 -6
  441. package/package.json +3 -2
  442. package/styles/color-modes/dark.less +2 -2
  443. package/styles/color-modes/high-contrast.less +2 -2
  444. package/styles/color-modes/light.less +2 -2
  445. package/styles/index.less +3 -0
  446. package/styles/root.less +2 -0
  447. package/styles/variables.less +0 -24
  448. package/SafeAnchor/package.json +0 -7
  449. package/cjs/Form/hooks/useFormClassNames.d.ts +0 -5
  450. package/cjs/Form/hooks/useFormClassNames.js +0 -29
  451. package/cjs/internals/Picker/hooks/usePickerClassName.d.ts +0 -19
  452. package/cjs/internals/Picker/hooks/usePickerClassName.js +0 -45
  453. package/esm/Form/hooks/useFormClassNames.d.ts +0 -5
  454. package/esm/Form/hooks/useFormClassNames.js +0 -25
  455. package/esm/internals/Picker/hooks/usePickerClassName.d.ts +0 -19
  456. package/esm/internals/Picker/hooks/usePickerClassName.js +0 -40
  457. /package/cjs/{SafeAnchor → internals/SafeAnchor}/index.d.ts +0 -0
  458. /package/cjs/{SafeAnchor → internals/SafeAnchor}/index.js +0 -0
  459. /package/cjs/internals/utils/{events.d.ts → html/events.d.ts} +0 -0
  460. /package/cjs/internals/utils/{htmlPropsUtils.d.ts → html/htmlPropsUtils.d.ts} +0 -0
  461. /package/cjs/internals/utils/{safeSetSelection.d.ts → html/safeSetSelection.d.ts} +0 -0
  462. /package/cjs/internals/utils/{deprecateComponent.d.ts → react/deprecateComponent.d.ts} +0 -0
  463. /package/cjs/internals/utils/{forwardRef.js → react/forwardRef.js} +0 -0
  464. /package/cjs/internals/utils/{getDOMNode.d.ts → react/getDOMNode.d.ts} +0 -0
  465. /package/cjs/internals/utils/{getDOMNode.js → react/getDOMNode.js} +0 -0
  466. /package/cjs/internals/utils/{mergeRefs.d.ts → react/mergeRefs.d.ts} +0 -0
  467. /package/cjs/internals/utils/{getSafeRegExpString.d.ts → string/getSafeRegExpString.d.ts} +0 -0
  468. /package/cjs/internals/utils/{getSafeRegExpString.js → string/getSafeRegExpString.js} +0 -0
  469. /package/cjs/internals/utils/{stringifyReactNode.d.ts → string/stringifyReactNode.d.ts} +0 -0
  470. /package/cjs/internals/utils/{tplTransform.d.ts → string/tplTransform.d.ts} +0 -0
  471. /package/esm/{SafeAnchor → internals/SafeAnchor}/index.d.ts +0 -0
  472. /package/esm/{SafeAnchor → internals/SafeAnchor}/index.js +0 -0
  473. /package/esm/internals/utils/{events.d.ts → html/events.d.ts} +0 -0
  474. /package/esm/internals/utils/{htmlPropsUtils.d.ts → html/htmlPropsUtils.d.ts} +0 -0
  475. /package/esm/internals/utils/{safeSetSelection.d.ts → html/safeSetSelection.d.ts} +0 -0
  476. /package/esm/internals/utils/{deprecateComponent.d.ts → react/deprecateComponent.d.ts} +0 -0
  477. /package/esm/internals/utils/{forwardRef.js → react/forwardRef.js} +0 -0
  478. /package/esm/internals/utils/{getDOMNode.d.ts → react/getDOMNode.d.ts} +0 -0
  479. /package/esm/internals/utils/{getDOMNode.js → react/getDOMNode.js} +0 -0
  480. /package/esm/internals/utils/{mergeRefs.d.ts → react/mergeRefs.d.ts} +0 -0
  481. /package/esm/internals/utils/{getSafeRegExpString.d.ts → string/getSafeRegExpString.d.ts} +0 -0
  482. /package/esm/internals/utils/{getSafeRegExpString.js → string/getSafeRegExpString.js} +0 -0
  483. /package/esm/internals/utils/{stringifyReactNode.d.ts → string/stringifyReactNode.d.ts} +0 -0
  484. /package/esm/internals/utils/{tplTransform.d.ts → string/tplTransform.d.ts} +0 -0
package/Toggle/styles/index.css CHANGED
@@ -12,10 +12,12 @@
12
12
  box-sizing: border-box;
13
13
  }
14
14
  :root {
15
+ --rs-font-size-3xs: 0.5rem;
15
16
  --rs-font-size-2xs: 0.625rem;
16
17
  --rs-font-size-xs: 0.75rem;
17
18
  --rs-font-size-sm: 0.875rem;
18
19
  --rs-font-size-md: 1rem;
20
+ --rs-font-size-lg: 1.125rem;
19
21
  --rs-radius-full: calc(infinity * 1px);
20
22
  }
21
23
  :root,
@@ -25,7 +27,6 @@
25
27
  --rs-gray-100: #f2f2f5;
26
28
  --rs-gray-200: #e5e5ea;
27
29
  --rs-gray-300: #d9d9d9;
28
- --rs-gray-400: #b6b7b8;
29
30
  --rs-gray-500: #939393;
30
31
  --rs-gray-600: #717273;
31
32
  --rs-gray-800: #343434;
@@ -52,7 +53,7 @@
52
53
  --rs-violet-600: #5f2bb3;
53
54
  --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
54
55
  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
55
- --rs-toggle-bg: var(--rs-gray-400);
56
+ --rs-toggle-bg: var(--rs-gray-500);
56
57
  --rs-toggle-thumb: #fff;
57
58
  --rs-toggle-loader-ring: rgb(from var(--rs-gray-50) r g b / 30%);
58
59
  --rs-toggle-loader-rotor: var(--rs-gray-0);
@@ -79,7 +80,6 @@
79
80
  --rs-gray-100: #cbced4;
80
81
  --rs-gray-200: #a4a9b3;
81
82
  --rs-gray-300: #858b94;
82
- --rs-gray-400: #6a6f76;
83
83
  --rs-gray-500: #5c6066;
84
84
  --rs-gray-600: #3c3f43;
85
85
  --rs-gray-800: #1a1d24;
@@ -106,7 +106,7 @@
106
106
  --rs-violet-600: #5f2bb3;
107
107
  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
108
108
  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
109
- --rs-toggle-bg: var(--rs-gray-400);
109
+ --rs-toggle-bg: var(--rs-gray-500);
110
110
  --rs-toggle-thumb: #fff;
111
111
  --rs-toggle-hover-bg: var(--rs-gray-300);
112
112
  --rs-toggle-disabled-bg: var(--rs-gray-600);
@@ -129,7 +129,6 @@
129
129
  --rs-gray-100: #cbced4;
130
130
  --rs-gray-200: #a4a9b3;
131
131
  --rs-gray-300: #858b94;
132
- --rs-gray-400: #6a6f76;
133
132
  --rs-gray-500: #5c6066;
134
133
  --rs-gray-600: #3c3f43;
135
134
  --rs-gray-800: #1a1d24;
@@ -169,28 +168,152 @@
169
168
  }
170
169
  .rs-toggle {
171
170
  --rs-toggle-transition: 0.2s ease-in-out;
171
+ --rs-toggle-gap: 10px;
172
+ --rs-toggle-font-size-xs: var(--rs-font-size-2xs);
173
+ --rs-toggle-inner-font-size-xs: var(--rs-font-size-3xs);
174
+ --rs-toggle-line-height-xs: 1;
175
+ --rs-toggle-gap-xs: 4px;
176
+ --rs-toggle-handle-gap-xs: 2px;
177
+ --rs-toggle-size-xs: 14px;
178
+ --rs-toggle-inner-margin-xs: 4px;
172
179
  --rs-toggle-font-size-sm: var(--rs-font-size-xs);
173
180
  --rs-toggle-inner-font-size-sm: var(--rs-font-size-2xs);
174
181
  --rs-toggle-line-height-sm: 1.4;
182
+ --rs-toggle-gap-sm: 6px;
183
+ --rs-toggle-handle-gap-sm: 2px;
184
+ --rs-toggle-size-sm: 18px;
185
+ --rs-toggle-inner-margin-sm: 6px;
175
186
  --rs-toggle-font-size-md: var(--rs-font-size-sm);
176
187
  --rs-toggle-inner-font-size-md: var(--rs-font-size-xs);
177
188
  --rs-toggle-line-height-md: 2;
189
+ --rs-toggle-gap-md: 8px;
190
+ --rs-toggle-handle-gap-md: 3px;
191
+ --rs-toggle-size-md: 22px;
192
+ --rs-toggle-inner-margin-md: 8px;
178
193
  --rs-toggle-font-size-lg: var(--rs-font-size-md);
179
194
  --rs-toggle-inner-font-size-lg: var(--rs-font-size-sm);
180
195
  --rs-toggle-line-height-lg: 2.14285714;
196
+ --rs-toggle-gap-lg: 10px;
197
+ --rs-toggle-handle-gap-lg: 4px;
198
+ --rs-toggle-size-lg: 28px;
199
+ --rs-toggle-inner-margin-lg: 10px;
200
+ --rs-toggle-font-size-xl: var(--rs-font-size-lg);
201
+ --rs-toggle-inner-font-size-xl: var(--rs-font-size-md);
202
+ --rs-toggle-line-height-xl: 2.14285714;
203
+ --rs-toggle-gap-xl: 12px;
204
+ --rs-toggle-handle-gap-xl: 5px;
205
+ --rs-toggle-size-xl: 34px;
206
+ --rs-toggle-inner-margin-xl: 12px;
181
207
  position: relative;
182
208
  display: inline-flex;
183
209
  align-items: center;
184
210
  font-size: var(--rs-toggle-font-size);
211
+ gap: var(--rs-toggle-gap);
212
+ }
213
+ .rs-toggle-xs {
214
+ --rs-toggle-font-size: var(--rs-toggle-font-size-xs);
215
+ --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-xs);
216
+ --rs-toggle-line-height: var(--rs-toggle-line-height-xs);
217
+ --rs-toggle-inner-margin: var(--rs-toggle-inner-margin-xs);
218
+ --rs-toggle-handle-size: calc(var(--rs-toggle-size-xs) - var(--rs-toggle-handle-gap-xs) * 2);
219
+ --rs-toggle-handle-gap: var(--rs-toggle-handle-gap-xs);
220
+ --rs-toggle-gap: var(--rs-toggle-gap-xs);
221
+ --rs-toggle-min-width: calc(var(--rs-toggle-size-xs) * 2 - var(--rs-toggle-handle-gap));
222
+ --rs-toggle-size: var(--rs-toggle-size-xs);
223
+ --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
224
+ --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * 1.2 - var(--rs-toggle-handle-gap)) * -1);
225
+ }
226
+ .rs-toggle-sm {
227
+ --rs-toggle-font-size: var(--rs-toggle-font-size-sm);
228
+ --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-sm);
229
+ --rs-toggle-line-height: var(--rs-toggle-line-height-sm);
230
+ --rs-toggle-inner-margin: var(--rs-toggle-inner-margin-sm);
231
+ --rs-toggle-handle-size: calc(var(--rs-toggle-size-sm) - var(--rs-toggle-handle-gap-sm) * 2);
232
+ --rs-toggle-handle-gap: var(--rs-toggle-handle-gap-sm);
233
+ --rs-toggle-gap: var(--rs-toggle-gap-sm);
234
+ --rs-toggle-min-width: calc(var(--rs-toggle-size-sm) * 2 - var(--rs-toggle-handle-gap));
235
+ --rs-toggle-size: var(--rs-toggle-size-sm);
236
+ --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
237
+ --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * 1.2 - var(--rs-toggle-handle-gap)) * -1);
238
+ }
239
+ .rs-toggle-md {
240
+ --rs-toggle-font-size: var(--rs-toggle-font-size-md);
241
+ --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-md);
242
+ --rs-toggle-line-height: var(--rs-toggle-line-height-md);
243
+ --rs-toggle-inner-margin: var(--rs-toggle-inner-margin-md);
244
+ --rs-toggle-handle-size: calc(var(--rs-toggle-size-md) - var(--rs-toggle-handle-gap-md) * 2);
245
+ --rs-toggle-handle-gap: var(--rs-toggle-handle-gap-md);
246
+ --rs-toggle-gap: var(--rs-toggle-gap-md);
247
+ --rs-toggle-min-width: calc(var(--rs-toggle-size-md) * 2 - var(--rs-toggle-handle-gap));
248
+ --rs-toggle-size: var(--rs-toggle-size-md);
249
+ --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
250
+ --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * 1.2 - var(--rs-toggle-handle-gap)) * -1);
251
+ }
252
+ .rs-toggle-lg {
253
+ --rs-toggle-font-size: var(--rs-toggle-font-size-lg);
254
+ --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-lg);
255
+ --rs-toggle-line-height: var(--rs-toggle-line-height-lg);
256
+ --rs-toggle-inner-margin: var(--rs-toggle-inner-margin-lg);
257
+ --rs-toggle-handle-size: calc(var(--rs-toggle-size-lg) - var(--rs-toggle-handle-gap-lg) * 2);
258
+ --rs-toggle-handle-gap: var(--rs-toggle-handle-gap-lg);
259
+ --rs-toggle-gap: var(--rs-toggle-gap-lg);
260
+ --rs-toggle-min-width: calc(var(--rs-toggle-size-lg) * 2 - var(--rs-toggle-handle-gap));
261
+ --rs-toggle-size: var(--rs-toggle-size-lg);
262
+ --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
263
+ --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * 1.2 - var(--rs-toggle-handle-gap)) * -1);
264
+ }
265
+ .rs-toggle-xl {
266
+ --rs-toggle-font-size: var(--rs-toggle-font-size-xl);
267
+ --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-xl);
268
+ --rs-toggle-line-height: var(--rs-toggle-line-height-xl);
269
+ --rs-toggle-inner-margin: var(--rs-toggle-inner-margin-xl);
270
+ --rs-toggle-handle-size: calc(var(--rs-toggle-size-xl) - var(--rs-toggle-handle-gap-xl) * 2);
271
+ --rs-toggle-handle-gap: var(--rs-toggle-handle-gap-xl);
272
+ --rs-toggle-gap: var(--rs-toggle-gap-xl);
273
+ --rs-toggle-min-width: calc(var(--rs-toggle-size-xl) * 2 - var(--rs-toggle-handle-gap));
274
+ --rs-toggle-size: var(--rs-toggle-size-xl);
275
+ --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
276
+ --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * 1.2 - var(--rs-toggle-handle-gap)) * -1);
277
+ }
278
+ .rs-toggle-red {
279
+ --rs-toggle-checked-bg: var(--rs-red-500);
280
+ --rs-toggle-checked-hover-bg: var(--rs-red-600);
281
+ }
282
+ .rs-toggle-orange {
283
+ --rs-toggle-checked-bg: var(--rs-orange-500);
284
+ --rs-toggle-checked-hover-bg: var(--rs-orange-600);
285
+ }
286
+ .rs-toggle-yellow {
287
+ --rs-toggle-checked-bg: var(--rs-yellow-500);
288
+ --rs-toggle-checked-hover-bg: var(--rs-yellow-600);
289
+ }
290
+ .rs-toggle-green {
291
+ --rs-toggle-checked-bg: var(--rs-green-500);
292
+ --rs-toggle-checked-hover-bg: var(--rs-green-600);
293
+ }
294
+ .rs-toggle-cyan {
295
+ --rs-toggle-checked-bg: var(--rs-cyan-500);
296
+ --rs-toggle-checked-hover-bg: var(--rs-cyan-600);
297
+ }
298
+ .rs-toggle-blue {
299
+ --rs-toggle-checked-bg: var(--rs-blue-500);
300
+ --rs-toggle-checked-hover-bg: var(--rs-blue-600);
301
+ }
302
+ .rs-toggle-violet {
303
+ --rs-toggle-checked-bg: var(--rs-violet-500);
304
+ --rs-toggle-checked-hover-bg: var(--rs-violet-600);
305
+ }
306
+ .rs-toggle:where([data-placement='start']) {
307
+ flex-direction: row-reverse;
185
308
  }
186
309
  .rs-toggle-label {
187
310
  cursor: pointer;
188
311
  font-size: inherit;
189
- margin-inline-start: 10px;
190
312
  }
191
313
  .rs-toggle-inner {
192
314
  display: flex;
193
315
  align-items: center;
316
+ justify-content: center;
194
317
  transition: margin var(--rs-toggle-transition);
195
318
  font-size: var(--rs-toggle-inner-font-size);
196
319
  line-height: var(--rs-toggle-line-height);
@@ -207,7 +330,7 @@
207
330
  inset: 0;
208
331
  opacity: 0;
209
332
  }
210
- .rs-toggle-presentation {
333
+ .rs-toggle-track {
211
334
  position: relative;
212
335
  display: inline-block;
213
336
  box-sizing: border-box;
@@ -224,69 +347,69 @@
224
347
  min-width: var(--rs-toggle-min-width);
225
348
  border-radius: var(--rs-radius-full);
226
349
  }
227
- .rs-toggle-presentation::after {
350
+ .rs-toggle-track::after {
228
351
  width: var(--rs-toggle-handle-size);
229
352
  height: var(--rs-toggle-handle-size);
230
353
  inset-inline-start: var(--rs-toggle-handle-gap);
231
354
  top: var(--rs-toggle-handle-gap);
232
355
  border-radius: var(--rs-radius-full);
233
356
  }
234
- .rs-toggle-presentation:active::after {
357
+ .rs-toggle-track:active::after {
235
358
  width: calc(var(--rs-toggle-handle-size) * 1.2);
236
359
  }
237
- .rs-theme-high-contrast .rs-toggle-presentation {
360
+ .rs-theme-high-contrast .rs-toggle-track {
238
361
  transition: none;
239
362
  box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb);
240
363
  }
241
- .rs-toggle-input:focus-visible + .rs-toggle-presentation {
364
+ .rs-toggle-input:focus-visible + .rs-toggle-track {
242
365
  outline: 3px solid var(--rs-color-focus-ring);
243
366
  }
244
- .rs-theme-high-contrast .rs-toggle-input:focus-visible + .rs-toggle-presentation {
367
+ .rs-theme-high-contrast .rs-toggle-input:focus-visible + .rs-toggle-track {
245
368
  outline-offset: 2px;
246
369
  }
247
- .rs-theme-high-contrast .rs-toggle-input:focus-visible + .rs-toggle-presentation {
370
+ .rs-theme-high-contrast .rs-toggle-input:focus-visible + .rs-toggle-track {
248
371
  box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb), var(--rs-state-focus-shadow);
249
372
  }
250
- .rs-toggle-presentation:hover {
373
+ .rs-toggle-track:hover {
251
374
  background-color: var(--rs-toggle-hover-bg);
252
375
  }
253
- .rs-toggle-presentation::after {
376
+ .rs-toggle-track::after {
254
377
  content: '';
255
378
  cursor: pointer;
256
379
  position: absolute;
257
380
  background-color: currentColor;
258
381
  transition: left var(--rs-toggle-transition), margin-left var(--rs-toggle-transition), width var(--rs-toggle-transition);
259
382
  }
260
- .rs-toggle-disabled .rs-toggle-presentation {
383
+ .rs-toggle-disabled .rs-toggle-track {
261
384
  background-color: var(--rs-toggle-disabled-bg);
262
385
  color: var(--rs-toggle-disabled-thumb);
263
386
  box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
264
387
  pointer-events: none;
265
388
  }
266
- .rs-toggle-checked .rs-toggle-presentation {
389
+ .rs-toggle-checked .rs-toggle-track {
267
390
  background-color: var(--rs-toggle-checked-bg);
268
391
  color: var(--rs-toggle-checked-thumb);
269
392
  box-shadow: none;
270
393
  }
271
- .rs-toggle-checked .rs-toggle-presentation::after {
394
+ .rs-toggle-checked .rs-toggle-track::after {
272
395
  inset-inline-start: 100%;
273
396
  margin-inline-start: var(--rs-toggle-checked-margin-left);
274
397
  }
275
- .rs-toggle-checked .rs-toggle-presentation:active::after {
398
+ .rs-toggle-checked .rs-toggle-track:active::after {
276
399
  margin-inline-start: var(--rs-toggle-active-checked-margin-left);
277
400
  }
278
- .rs-toggle-checked .rs-toggle-presentation .rs-toggle-inner {
401
+ .rs-toggle-checked .rs-toggle-track .rs-toggle-inner {
279
402
  margin-inline-end: var(--rs-toggle-size);
280
403
  margin-inline-start: var(--rs-toggle-inner-margin);
281
404
  }
282
- .rs-toggle-checked .rs-toggle-presentation:hover {
405
+ .rs-toggle-checked .rs-toggle-track:hover {
283
406
  background-color: var(--rs-toggle-checked-hover-bg);
284
407
  }
285
- .rs-toggle-disabled.rs-toggle-checked .rs-toggle-presentation {
408
+ .rs-toggle-disabled.rs-toggle-checked .rs-toggle-track {
286
409
  background-color: var(--rs-toggle-checked-disabled-bg);
287
410
  color: var(--rs-toggle-checked-disabled-thumb);
288
411
  }
289
- .rs-toggle-loading .rs-toggle-presentation::after {
412
+ .rs-toggle-loading .rs-toggle-track::after {
290
413
  display: none;
291
414
  }
292
415
  .rs-toggle-loader {
@@ -319,67 +442,3 @@
319
442
  .rs-theme-high-contrast .rs-toggle-checked .rs-toggle-loader .rs-loader-spin::after {
320
443
  border-top-color: var(--rs-gray-500);
321
444
  }
322
- .rs-toggle-red {
323
- --rs-toggle-checked-bg: var(--rs-red-500);
324
- --rs-toggle-checked-hover-bg: var(--rs-red-600);
325
- }
326
- .rs-toggle-orange {
327
- --rs-toggle-checked-bg: var(--rs-orange-500);
328
- --rs-toggle-checked-hover-bg: var(--rs-orange-600);
329
- }
330
- .rs-toggle-yellow {
331
- --rs-toggle-checked-bg: var(--rs-yellow-500);
332
- --rs-toggle-checked-hover-bg: var(--rs-yellow-600);
333
- }
334
- .rs-toggle-green {
335
- --rs-toggle-checked-bg: var(--rs-green-500);
336
- --rs-toggle-checked-hover-bg: var(--rs-green-600);
337
- }
338
- .rs-toggle-cyan {
339
- --rs-toggle-checked-bg: var(--rs-cyan-500);
340
- --rs-toggle-checked-hover-bg: var(--rs-cyan-600);
341
- }
342
- .rs-toggle-blue {
343
- --rs-toggle-checked-bg: var(--rs-blue-500);
344
- --rs-toggle-checked-hover-bg: var(--rs-blue-600);
345
- }
346
- .rs-toggle-violet {
347
- --rs-toggle-checked-bg: var(--rs-violet-500);
348
- --rs-toggle-checked-hover-bg: var(--rs-violet-600);
349
- }
350
- .rs-toggle-sm {
351
- --rs-toggle-font-size: var(--rs-toggle-font-size-sm);
352
- --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-sm);
353
- --rs-toggle-line-height: var(--rs-toggle-line-height-sm);
354
- --rs-toggle-inner-margin: 6px;
355
- --rs-toggle-handle-size: 10px;
356
- --rs-toggle-handle-gap: 2px;
357
- --rs-toggle-min-width: 26px;
358
- --rs-toggle-size: 14px;
359
- --rs-toggle-checked-margin-left: -12px;
360
- --rs-toggle-active-checked-margin-left: -14.8px;
361
- }
362
- .rs-toggle-md {
363
- --rs-toggle-font-size: var(--rs-toggle-font-size-md);
364
- --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-md);
365
- --rs-toggle-line-height: var(--rs-toggle-line-height-md);
366
- --rs-toggle-inner-margin: 8px;
367
- --rs-toggle-handle-size: 18px;
368
- --rs-toggle-handle-gap: 3px;
369
- --rs-toggle-min-width: 44px;
370
- --rs-toggle-size: 24px;
371
- --rs-toggle-checked-margin-left: -21px;
372
- --rs-toggle-active-checked-margin-left: -25.8px;
373
- }
374
- .rs-toggle-lg {
375
- --rs-toggle-font-size: var(--rs-toggle-font-size-lg);
376
- --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-lg);
377
- --rs-toggle-line-height: var(--rs-toggle-line-height-lg);
378
- --rs-toggle-inner-margin: 10px;
379
- --rs-toggle-handle-size: 22px;
380
- --rs-toggle-handle-gap: 4px;
381
- --rs-toggle-min-width: 55px;
382
- --rs-toggle-size: 30px;
383
- --rs-toggle-checked-margin-left: -26px;
384
- --rs-toggle-active-checked-margin-left: -32px;
385
- }
package/Toggle/styles/index.less CHANGED
@@ -8,36 +8,100 @@
8
8
  .rs-toggle {
9
9
  // CSS Variables
10
10
  --rs-toggle-transition: 0.2s ease-in-out;
11
+ --rs-toggle-gap: 10px;
12
+
13
+ // Extra small size
14
+ --rs-toggle-font-size-xs: var(--rs-font-size-2xs);
15
+ --rs-toggle-inner-font-size-xs: var(--rs-font-size-3xs);
16
+ --rs-toggle-line-height-xs: 1;
17
+ --rs-toggle-gap-xs: 4px;
18
+ --rs-toggle-handle-gap-xs: 2px;
19
+ --rs-toggle-size-xs: 14px;
20
+ --rs-toggle-inner-margin-xs: 4px;
11
21
 
12
22
  // Small size
13
23
  --rs-toggle-font-size-sm: var(--rs-font-size-xs);
14
24
  --rs-toggle-inner-font-size-sm: var(--rs-font-size-2xs);
15
25
  --rs-toggle-line-height-sm: 1.4;
26
+ --rs-toggle-gap-sm: 6px;
27
+ --rs-toggle-handle-gap-sm: 2px;
28
+ --rs-toggle-size-sm: 18px;
29
+ --rs-toggle-inner-margin-sm: 6px;
16
30
 
17
31
  // Medium size
18
32
  --rs-toggle-font-size-md: var(--rs-font-size-sm);
19
33
  --rs-toggle-inner-font-size-md: var(--rs-font-size-xs);
20
34
  --rs-toggle-line-height-md: 2;
35
+ --rs-toggle-gap-md: 8px;
36
+ --rs-toggle-handle-gap-md: 3px;
37
+ --rs-toggle-size-md: 22px;
38
+ --rs-toggle-inner-margin-md: 8px;
21
39
 
22
40
  // Large size
23
41
  --rs-toggle-font-size-lg: var(--rs-font-size-md);
24
42
  --rs-toggle-inner-font-size-lg: var(--rs-font-size-sm);
25
43
  --rs-toggle-line-height-lg: 2.14285714;
44
+ --rs-toggle-gap-lg: 10px;
45
+ --rs-toggle-handle-gap-lg: 4px;
46
+ --rs-toggle-size-lg: 28px;
47
+ --rs-toggle-inner-margin-lg: 10px;
48
+
49
+ // Extra large size
50
+ --rs-toggle-font-size-xl: var(--rs-font-size-lg);
51
+ --rs-toggle-inner-font-size-xl: var(--rs-font-size-md);
52
+ --rs-toggle-line-height-xl: 2.14285714;
53
+ --rs-toggle-gap-xl: 12px;
54
+ --rs-toggle-handle-gap-xl: 5px;
55
+ --rs-toggle-size-xl: 34px;
56
+ --rs-toggle-inner-margin-xl: 12px;
57
+
58
+ // Size variants
59
+ @sizes: xs, sm, md, lg, xl;
60
+
61
+ each(@sizes, .(@size) {
62
+ &-@{size} {
63
+
64
+ --rs-toggle-font-size: var(~'--rs-toggle-font-size-@{size}');
65
+ --rs-toggle-inner-font-size: var(~'--rs-toggle-inner-font-size-@{size}');
66
+ --rs-toggle-line-height: var(~'--rs-toggle-line-height-@{size}');
67
+ --rs-toggle-inner-margin: var(~'--rs-toggle-inner-margin-@{size}');
68
+ --rs-toggle-handle-size: calc(var(~'--rs-toggle-size-@{size}') - var(~'--rs-toggle-handle-gap-@{size}') * 2);
69
+ --rs-toggle-handle-gap: var(~'--rs-toggle-handle-gap-@{size}');
70
+ --rs-toggle-gap: var(~'--rs-toggle-gap-@{size}');
71
+ --rs-toggle-min-width: calc(var(~'--rs-toggle-size-@{size}') * 2 - var(--rs-toggle-handle-gap));
72
+ --rs-toggle-size: var(~'--rs-toggle-size-@{size}');
73
+ --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
74
+ --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * @toggle-active-scale - var(--rs-toggle-handle-gap)) * -1);
75
+ }
76
+ });
77
+
78
+ // Colorful
79
+ each(@spectrum, .(@color) {
80
+ &-@{color} {
81
+ --rs-toggle-checked-bg: var(~'--rs-@{color}-500');
82
+ --rs-toggle-checked-hover-bg: var(~'--rs-@{color}-600');
83
+ }
84
+ });
26
85
 
27
86
  position: relative;
28
87
  display: inline-flex;
29
88
  align-items: center;
30
89
  font-size: var(--rs-toggle-font-size);
90
+ gap: var(--rs-toggle-gap);
91
+
92
+ &:where([data-placement='start']) {
93
+ flex-direction: row-reverse;
94
+ }
31
95
 
32
96
  &-label {
33
97
  cursor: pointer;
34
98
  font-size: inherit;
35
- margin-inline-start: 10px;
36
99
  }
37
100
 
38
101
  &-inner {
39
102
  display: flex;
40
103
  align-items: center;
104
+ justify-content: center;
41
105
  transition: margin var(--rs-toggle-transition);
42
106
  font-size: var(--rs-toggle-inner-font-size);
43
107
  line-height: var(--rs-toggle-line-height);
@@ -57,7 +121,7 @@
57
121
  opacity: 0;
58
122
  }
59
123
 
60
- &-presentation {
124
+ &-track {
61
125
  position: relative;
62
126
  display: inline-block;
63
127
  box-sizing: border-box;
@@ -212,40 +276,4 @@
212
276
  }
213
277
  }
214
278
  }
215
-
216
- // Colorful
217
- each(@spectrum, .(@color) {
218
- &-@{color} {
219
- --rs-toggle-checked-bg: var(~'--rs-@{color}-500');
220
- --rs-toggle-checked-hover-bg: var(~'--rs-@{color}-600');
221
- }
222
- });
223
-
224
- // Size variants
225
- @sizes: sm, md, lg;
226
-
227
- each(@sizes, .(@size) {
228
- &-@{size} {
229
-
230
- @height: ~'toggle-@{size}-height';
231
- @min-width: ~'toggle-@{size}-min-width';
232
- @handle-gap: ~'toggle-@{size}-handle-gap';
233
- @inner-margin: ~'toggle-@{size}-inner-margin';
234
- @handle-diameter: (@@height - @@handle-gap * 2);
235
- @margin-left: (0 - (@@height - @@handle-gap));
236
- @active-margin-left: (0 - (@@height * @toggle-active-scale - @@handle-gap));
237
-
238
- --rs-toggle-font-size: var(~'--rs-toggle-font-size-@{size}');
239
- --rs-toggle-inner-font-size: var(~'--rs-toggle-inner-font-size-@{size}');
240
- --rs-toggle-line-height: var(~'--rs-toggle-line-height-@{size}');
241
- --rs-toggle-inner-margin: @@inner-margin;
242
- --rs-toggle-handle-size: @handle-diameter;
243
- --rs-toggle-handle-gap: @@handle-gap;
244
- --rs-toggle-min-width: @@min-width;
245
- --rs-toggle-size: @@height;
246
-
247
- --rs-toggle-checked-margin-left: @margin-left;
248
- --rs-toggle-active-checked-margin-left: @active-margin-left;
249
- }
250
- });
251
279
  }