rsuite 6.0.0-canary-20250624 → 6.0.0-canary-20250702

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 (247) hide show
  1. package/AutoComplete/styles/index.css +156 -161
  2. package/AvatarGroup/styles/index.css +1 -10
  3. package/Badge/styles/index.css +21 -21
  4. package/Button/styles/index.css +78 -63
  5. package/ButtonGroup/styles/index.css +15 -12
  6. package/ButtonToolbar/styles/index.css +1 -10
  7. package/CHANGELOG.md +9 -0
  8. package/Calendar/styles/index.css +92 -67
  9. package/Card/styles/index.css +7 -7
  10. package/CascadeTree/styles/index.css +8 -9
  11. package/Cascader/styles/index.css +160 -164
  12. package/CheckPicker/styles/index.css +173 -178
  13. package/CheckTree/styles/index.css +175 -180
  14. package/CheckTreePicker/styles/index.css +175 -180
  15. package/Checkbox/styles/index.css +21 -28
  16. package/CheckboxGroup/styles/index.css +1 -1
  17. package/DateInput/styles/index.css +8 -18
  18. package/DatePicker/styles/index.css +173 -168
  19. package/DateRangeInput/styles/index.css +8 -18
  20. package/DateRangePicker/styles/index.css +173 -168
  21. package/Dropdown/styles/index.css +110 -94
  22. package/IconButton/styles/index.css +95 -79
  23. package/InlineEdit/styles/index.css +12 -19
  24. package/Input/styles/index.css +8 -18
  25. package/InputGroup/styles/index.css +31 -38
  26. package/InputNumber/styles/index.css +115 -100
  27. package/InputPicker/styles/index.css +156 -161
  28. package/List/styles/index.css +10 -10
  29. package/Loader/styles/index.css +16 -16
  30. package/Menu/styles/index.css +2 -2
  31. package/Message/styles/index.css +2 -2
  32. package/MultiCascadeTree/styles/index.css +178 -191
  33. package/MultiCascader/styles/index.css +178 -200
  34. package/Nav/styles/index.css +162 -146
  35. package/Navbar/styles/index.css +140 -124
  36. package/NumberInput/styles/index.css +115 -100
  37. package/Pagination/styles/index.css +177 -200
  38. package/PasswordInput/styles/index.css +36 -43
  39. package/PinInput/styles/index.css +12 -22
  40. package/Radio/styles/index.css +22 -29
  41. package/RadioGroup/styles/index.css +11 -11
  42. package/SelectPicker/styles/index.css +156 -161
  43. package/Sidenav/styles/index.css +122 -129
  44. package/Stack/styles/index.css +1 -10
  45. package/Stat/styles/index.css +95 -79
  46. package/Steps/styles/index.css +26 -25
  47. package/Table/styles/index.css +11 -0
  48. package/Tabs/styles/index.css +162 -146
  49. package/Tag/styles/index.css +112 -96
  50. package/TagInput/styles/index.css +174 -179
  51. package/TagPicker/styles/index.css +174 -179
  52. package/TimePicker/styles/index.css +173 -168
  53. package/TimeRangePicker/styles/index.css +173 -168
  54. package/Toggle/styles/index.css +27 -30
  55. package/Tree/styles/index.css +157 -162
  56. package/TreePicker/styles/index.css +157 -162
  57. package/Uploader/styles/index.css +94 -65
  58. package/cjs/Badge/Badge.js +16 -11
  59. package/cjs/Breadcrumb/Breadcrumb.d.ts +2 -2
  60. package/cjs/Button/Button.js +9 -7
  61. package/cjs/ButtonGroup/ButtonGroup.js +7 -7
  62. package/cjs/Card/Card.js +6 -6
  63. package/cjs/Checkbox/Checkbox.js +6 -7
  64. package/cjs/CheckboxGroup/CheckboxGroup.js +3 -4
  65. package/cjs/Dropdown/Dropdown.js +3 -4
  66. package/cjs/Dropdown/DropdownItem.js +4 -4
  67. package/cjs/Dropdown/DropdownMenu.js +9 -10
  68. package/cjs/FormControl/FormControl.d.ts +1 -1
  69. package/cjs/FormControlLabel/FormControlLabel.d.ts +1 -1
  70. package/cjs/FormHelpText/FormHelpText.d.ts +1 -1
  71. package/cjs/IconButton/IconButton.d.ts +1 -1
  72. package/cjs/IconButton/IconButton.js +9 -9
  73. package/cjs/Image/Image.d.ts +1 -1
  74. package/cjs/InlineEdit/InlineEdit.js +3 -2
  75. package/cjs/InputGroup/InputGroup.js +12 -14
  76. package/cjs/InputGroup/InputGroupAddon.d.ts +2 -2
  77. package/cjs/InputPicker/InputAutosize.js +4 -6
  78. package/cjs/List/List.d.ts +1 -1
  79. package/cjs/List/List.js +7 -8
  80. package/cjs/List/ListItem.d.ts +2 -2
  81. package/cjs/List/ListItem.js +4 -4
  82. package/cjs/Loader/Loader.js +8 -7
  83. package/cjs/Menu/MenuSeparator.d.ts +2 -2
  84. package/cjs/Nav/Nav.d.ts +2 -2
  85. package/cjs/Nav/Nav.js +12 -13
  86. package/cjs/Nav/NavDropdownItem.js +4 -4
  87. package/cjs/Nav/NavDropdownMenu.js +10 -13
  88. package/cjs/Nav/NavItem.d.ts +2 -2
  89. package/cjs/Nav/NavItem.js +6 -8
  90. package/cjs/Navbar/Navbar.js +6 -6
  91. package/cjs/Navbar/NavbarDropdown.d.ts +1 -1
  92. package/cjs/Navbar/NavbarDropdown.js +3 -4
  93. package/cjs/Navbar/NavbarDropdownItem.js +4 -4
  94. package/cjs/Navbar/NavbarDropdownMenu.js +8 -11
  95. package/cjs/NumberInput/NumberInput.d.ts +1 -1
  96. package/cjs/Pagination/Pagination.js +3 -2
  97. package/cjs/Pagination/PaginationButton.d.ts +3 -3
  98. package/cjs/Pagination/PaginationButton.js +9 -17
  99. package/cjs/Pagination/PaginationGroup.js +2 -1
  100. package/cjs/Panel/PanelHeader.d.ts +1 -1
  101. package/cjs/Radio/Radio.js +6 -6
  102. package/cjs/RadioGroup/RadioGroup.js +4 -4
  103. package/cjs/Sidenav/ExpandedSidenavDropdown.d.ts +1 -1
  104. package/cjs/Sidenav/Sidenav.js +3 -2
  105. package/cjs/Sidenav/SidenavDropdown.js +3 -5
  106. package/cjs/Sidenav/SidenavDropdownItem.js +4 -4
  107. package/cjs/Sidenav/SidenavDropdownMenu.js +10 -13
  108. package/cjs/Sidenav/SidenavItem.d.ts +2 -2
  109. package/cjs/Sidenav/SidenavItem.js +4 -5
  110. package/cjs/Slider/Handle.d.ts +1 -1
  111. package/cjs/Stack/Stack.d.ts +1 -17
  112. package/cjs/Stack/Stack.js +3 -4
  113. package/cjs/Stack/StackItem.d.ts +4 -5
  114. package/cjs/Stack/StackItem.js +4 -10
  115. package/cjs/Steps/StepItem.js +7 -8
  116. package/cjs/Steps/Steps.d.ts +2 -1
  117. package/cjs/Steps/Steps.js +32 -34
  118. package/cjs/Tabs/Tabs.js +1 -1
  119. package/cjs/Tag/Tag.js +5 -2
  120. package/cjs/Toggle/Toggle.d.ts +1 -1
  121. package/cjs/Toggle/Toggle.js +7 -6
  122. package/cjs/Tree/types.d.ts +2 -2
  123. package/cjs/Uploader/Uploader.d.ts +2 -2
  124. package/cjs/internals/Box/Box.d.ts +1 -0
  125. package/cjs/internals/Box/index.d.ts +1 -1
  126. package/cjs/internals/Box/utils.js +5 -4
  127. package/cjs/internals/InputBase/InputBase.d.ts +1 -1
  128. package/cjs/internals/InputBase/InputBase.js +3 -2
  129. package/cjs/internals/Menu/MenuItem.js +1 -1
  130. package/cjs/internals/Overlay/Modal.d.ts +1 -1
  131. package/cjs/internals/Picker/PickerToggle.js +2 -4
  132. package/cjs/internals/SafeAnchor/SafeAnchor.d.ts +2 -2
  133. package/cjs/internals/Tree/TreeView.d.ts +2 -2
  134. package/cjs/internals/hooks/useCustom.js +24 -7
  135. package/cjs/internals/styled-system/css-alias.d.ts +7 -0
  136. package/cjs/internals/styled-system/css-alias.js +391 -0
  137. package/cjs/internals/styled-system/css-properties.d.ts +6 -0
  138. package/cjs/internals/styled-system/css-properties.js +30 -0
  139. package/cjs/internals/styled-system/index.d.ts +1 -1
  140. package/cjs/internals/styled-system/index.js +4 -4
  141. package/cjs/internals/styled-system/responsive.d.ts +0 -4
  142. package/cjs/internals/styled-system/responsive.js +12 -33
  143. package/cjs/internals/styled-system/types.d.ts +59 -5
  144. package/cjs/internals/styled-system/useStyled.js +3 -3
  145. package/cjs/internals/types/html.d.ts +6 -6
  146. package/cjs/internals/types/picker.d.ts +1 -1
  147. package/dist/rsuite-no-reset.css +641 -641
  148. package/dist/rsuite-no-reset.min.css +1 -1
  149. package/dist/rsuite.css +641 -641
  150. package/dist/rsuite.js +60 -60
  151. package/dist/rsuite.min.css +1 -1
  152. package/dist/rsuite.min.js +1 -1
  153. package/dist/rsuite.min.js.map +1 -1
  154. package/esm/Badge/Badge.js +16 -11
  155. package/esm/Breadcrumb/Breadcrumb.d.ts +2 -2
  156. package/esm/Button/Button.js +9 -7
  157. package/esm/ButtonGroup/ButtonGroup.js +7 -7
  158. package/esm/Card/Card.js +6 -6
  159. package/esm/Checkbox/Checkbox.js +6 -7
  160. package/esm/CheckboxGroup/CheckboxGroup.js +3 -4
  161. package/esm/Dropdown/Dropdown.js +3 -4
  162. package/esm/Dropdown/DropdownItem.js +4 -4
  163. package/esm/Dropdown/DropdownMenu.js +9 -10
  164. package/esm/FormControl/FormControl.d.ts +1 -1
  165. package/esm/FormControlLabel/FormControlLabel.d.ts +1 -1
  166. package/esm/FormHelpText/FormHelpText.d.ts +1 -1
  167. package/esm/IconButton/IconButton.d.ts +1 -1
  168. package/esm/IconButton/IconButton.js +9 -9
  169. package/esm/Image/Image.d.ts +1 -1
  170. package/esm/InlineEdit/InlineEdit.js +3 -2
  171. package/esm/InputGroup/InputGroup.js +12 -14
  172. package/esm/InputGroup/InputGroupAddon.d.ts +2 -2
  173. package/esm/InputPicker/InputAutosize.js +4 -6
  174. package/esm/List/List.d.ts +1 -1
  175. package/esm/List/List.js +7 -8
  176. package/esm/List/ListItem.d.ts +2 -2
  177. package/esm/List/ListItem.js +4 -4
  178. package/esm/Loader/Loader.js +8 -7
  179. package/esm/Menu/MenuSeparator.d.ts +2 -2
  180. package/esm/Nav/Nav.d.ts +2 -2
  181. package/esm/Nav/Nav.js +12 -13
  182. package/esm/Nav/NavDropdownItem.js +4 -4
  183. package/esm/Nav/NavDropdownMenu.js +10 -13
  184. package/esm/Nav/NavItem.d.ts +2 -2
  185. package/esm/Nav/NavItem.js +6 -8
  186. package/esm/Navbar/Navbar.js +7 -7
  187. package/esm/Navbar/NavbarDropdown.d.ts +1 -1
  188. package/esm/Navbar/NavbarDropdown.js +3 -4
  189. package/esm/Navbar/NavbarDropdownItem.js +4 -4
  190. package/esm/Navbar/NavbarDropdownMenu.js +8 -11
  191. package/esm/NumberInput/NumberInput.d.ts +1 -1
  192. package/esm/Pagination/Pagination.js +3 -2
  193. package/esm/Pagination/PaginationButton.d.ts +3 -3
  194. package/esm/Pagination/PaginationButton.js +9 -16
  195. package/esm/Pagination/PaginationGroup.js +2 -1
  196. package/esm/Panel/PanelHeader.d.ts +1 -1
  197. package/esm/Radio/Radio.js +6 -6
  198. package/esm/RadioGroup/RadioGroup.js +4 -4
  199. package/esm/Sidenav/ExpandedSidenavDropdown.d.ts +1 -1
  200. package/esm/Sidenav/Sidenav.js +3 -2
  201. package/esm/Sidenav/SidenavDropdown.js +3 -5
  202. package/esm/Sidenav/SidenavDropdownItem.js +4 -4
  203. package/esm/Sidenav/SidenavDropdownMenu.js +10 -13
  204. package/esm/Sidenav/SidenavItem.d.ts +2 -2
  205. package/esm/Sidenav/SidenavItem.js +4 -5
  206. package/esm/Slider/Handle.d.ts +1 -1
  207. package/esm/Stack/Stack.d.ts +1 -17
  208. package/esm/Stack/Stack.js +3 -4
  209. package/esm/Stack/StackItem.d.ts +4 -5
  210. package/esm/Stack/StackItem.js +5 -11
  211. package/esm/Steps/StepItem.js +7 -8
  212. package/esm/Steps/Steps.d.ts +2 -1
  213. package/esm/Steps/Steps.js +31 -34
  214. package/esm/Tabs/Tabs.js +1 -1
  215. package/esm/Tag/Tag.js +5 -2
  216. package/esm/Toggle/Toggle.d.ts +1 -1
  217. package/esm/Toggle/Toggle.js +7 -6
  218. package/esm/Tree/types.d.ts +2 -2
  219. package/esm/Uploader/Uploader.d.ts +2 -2
  220. package/esm/internals/Box/Box.d.ts +1 -0
  221. package/esm/internals/Box/index.d.ts +1 -1
  222. package/esm/internals/Box/utils.js +6 -5
  223. package/esm/internals/InputBase/InputBase.d.ts +1 -1
  224. package/esm/internals/InputBase/InputBase.js +3 -2
  225. package/esm/internals/Menu/MenuItem.js +1 -1
  226. package/esm/internals/Overlay/Modal.d.ts +1 -1
  227. package/esm/internals/Picker/PickerToggle.js +2 -4
  228. package/esm/internals/SafeAnchor/SafeAnchor.d.ts +2 -2
  229. package/esm/internals/Tree/TreeView.d.ts +2 -2
  230. package/esm/internals/hooks/useCustom.js +24 -7
  231. package/esm/internals/styled-system/css-alias.d.ts +7 -0
  232. package/esm/internals/styled-system/css-alias.js +387 -0
  233. package/esm/internals/styled-system/css-properties.d.ts +6 -0
  234. package/esm/internals/styled-system/css-properties.js +26 -0
  235. package/esm/internals/styled-system/index.d.ts +1 -1
  236. package/esm/internals/styled-system/index.js +1 -1
  237. package/esm/internals/styled-system/responsive.d.ts +0 -4
  238. package/esm/internals/styled-system/responsive.js +11 -31
  239. package/esm/internals/styled-system/types.d.ts +59 -5
  240. package/esm/internals/styled-system/useStyled.js +3 -3
  241. package/esm/internals/types/html.d.ts +6 -6
  242. package/esm/internals/types/picker.d.ts +1 -1
  243. package/package.json +1 -1
  244. package/cjs/internals/styled-system/css-property.d.ts +0 -6
  245. package/cjs/internals/styled-system/css-property.js +0 -289
  246. package/esm/internals/styled-system/css-property.d.ts +0 -6
  247. package/esm/internals/styled-system/css-property.js +0 -285
package/PasswordInput/styles/index.css CHANGED
@@ -33,7 +33,7 @@ body{
33
33
  --rs-text-secondary:var(--rs-gray-600);
34
34
  --rs-text-disabled:var(--rs-gray-600);
35
35
  --rs-border-primary:var(--rs-gray-200);
36
- --rs-color-focus-ring:rgb(from var(--rs-primary-500) r g b / 25%);
36
+ --rs-focus-ring-color:rgb(from var(--rs-primary-500) r g b / 25%);
37
37
  --rs-btn-default-bg:var(--rs-gray-50);
38
38
  --rs-btn-subtle-text:var(--rs-gray-800);
39
39
  --rs-btn-subtle-hover-bg:var(--rs-gray-200);
@@ -47,7 +47,7 @@ body{
47
47
  }
48
48
  @supports not (color: rgb(from white r g b)){
49
49
  :root{
50
- --rs-color-focus-ring:rgba(52, 152, 255, 0.25);
50
+ --rs-focus-ring-color:rgba(52, 152, 255, 0.25);
51
51
  }
52
52
  }
53
53
 
@@ -71,7 +71,6 @@ body{
71
71
  --rs-text-secondary:var(--rs-gray-200);
72
72
  --rs-text-disabled:var(--rs-gray-400);
73
73
  --rs-border-primary:var(--rs-gray-600);
74
- --rs-color-focus-ring:0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
75
74
  --rs-btn-default-bg:var(--rs-gray-600);
76
75
  --rs-btn-subtle-text:var(--rs-gray-200);
77
76
  --rs-btn-subtle-hover-bg:var(--rs-gray-500);
@@ -83,12 +82,6 @@ body{
83
82
  --rs-input-focus-border:var(--rs-primary-500);
84
83
  --rs-input-disabled-bg:var(--rs-gray-700);
85
84
  }
86
- @supports not (color: rgb(from white r g b)){
87
- [data-theme=dark],
88
- .rs-theme-dark{
89
- --rs-color-focus-ring:0 0 0 2px rgba(52, 195, 255, 0.25);
90
- }
91
- }
92
85
 
93
86
  [data-theme=high-contrast],
94
87
  .rs-theme-high-contrast{
@@ -110,7 +103,7 @@ body{
110
103
  --rs-text-secondary:var(--rs-gray-200);
111
104
  --rs-text-disabled:var(--rs-gray-400);
112
105
  --rs-border-primary:var(--rs-gray-100);
113
- --rs-color-focus-ring:var(--rs-gray-0);
106
+ --rs-focus-ring-color:var(--rs-gray-0);
114
107
  --rs-btn-default-bg:transparent;
115
108
  --rs-btn-subtle-text:var(--rs-primary-500);
116
109
  --rs-btn-subtle-hover-bg:transparent;
@@ -245,32 +238,32 @@ body{
245
238
  border-color:var(--rs-input-focus-border);
246
239
  }
247
240
  .rs-input:focus-visible{
248
- outline:2px solid var(--rs-color-focus-ring);
241
+ outline:2px solid var(--rs-focus-ring-color);
249
242
  outline-offset:-1px;
250
243
  }
251
244
  .rs-input:disabled{
252
245
  background-color:var(--rs-input-disabled-bg);
253
246
  color:var(--rs-text-disabled);
254
247
  }
255
- .rs-input.rs-input-xs{
248
+ .rs-input[data-size=xs]{
256
249
  --rs-input-font-size:var(--rs-input-font-size-xs);
257
250
  --rs-input-line-height:var(--rs-input-line-height-xs);
258
251
  --rs-input-padding-block:var(--rs-input-padding-block-xs);
259
252
  --rs-input-padding-inline:var(--rs-input-padding-inline-xs);
260
253
  }
261
- .rs-input.rs-input-sm{
254
+ .rs-input[data-size=sm]{
262
255
  --rs-input-font-size:var(--rs-input-font-size-sm);
263
256
  --rs-input-line-height:var(--rs-input-line-height-sm);
264
257
  --rs-input-padding-block:var(--rs-input-padding-block-sm);
265
258
  --rs-input-padding-inline:var(--rs-input-padding-inline-sm);
266
259
  }
267
- .rs-input.rs-input-md{
260
+ .rs-input[data-size=md]{
268
261
  --rs-input-font-size:var(--rs-input-font-size-md);
269
262
  --rs-input-line-height:var(--rs-input-line-height-md);
270
263
  --rs-input-padding-block:var(--rs-input-padding-block-md);
271
264
  --rs-input-padding-inline:var(--rs-input-padding-inline-md);
272
265
  }
273
- .rs-input.rs-input-lg{
266
+ .rs-input[data-size=lg]{
274
267
  --rs-input-font-size:var(--rs-input-font-size-lg);
275
268
  --rs-input-line-height:var(--rs-input-line-height-lg);
276
269
  --rs-input-padding-block:var(--rs-input-padding-block-lg);
@@ -310,25 +303,25 @@ body{
310
303
  border:1px solid var(--rs-border-primary);
311
304
  overflow:hidden;
312
305
  }
313
- .rs-input-group.rs-input-group-xs{
306
+ .rs-input-group[data-size=xs]{
314
307
  --rs-input-group-input-height:var(--rs-input-group-input-height-xs);
315
308
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-xs);
316
309
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-xs);
317
310
  --rs-input-group-font-size:var(--rs-input-group-font-size-xs);
318
311
  }
319
- .rs-input-group.rs-input-group-sm{
312
+ .rs-input-group[data-size=sm]{
320
313
  --rs-input-group-input-height:var(--rs-input-group-input-height-sm);
321
314
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-sm);
322
315
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-sm);
323
316
  --rs-input-group-font-size:var(--rs-input-group-font-size-sm);
324
317
  }
325
- .rs-input-group.rs-input-group-md{
318
+ .rs-input-group[data-size=md]{
326
319
  --rs-input-group-input-height:var(--rs-input-group-input-height-md);
327
320
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-md);
328
321
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-md);
329
322
  --rs-input-group-font-size:var(--rs-input-group-font-size-md);
330
323
  }
331
- .rs-input-group.rs-input-group-lg{
324
+ .rs-input-group[data-size=lg]{
332
325
  --rs-input-group-input-height:var(--rs-input-group-input-height-lg);
333
326
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-lg);
334
327
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-lg);
@@ -337,11 +330,11 @@ body{
337
330
  [data-theme=high-contrast] .rs-input-group, .rs-theme-high-contrast .rs-input-group{
338
331
  transition:none;
339
332
  }
340
- .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus, .rs-input-group:focus-within{
333
+ .rs-input-group:not([data-disabled=true]).rs-input-group-focus, .rs-input-group:focus-within{
341
334
  border-color:var(--rs-input-focus-border);
342
335
  }
343
- .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus, .rs-input-group:focus-within{
344
- outline:2px solid var(--rs-color-focus-ring);
336
+ .rs-input-group:not([data-disabled=true]).rs-input-group-focus, .rs-input-group:focus-within{
337
+ outline:2px solid var(--rs-focus-ring-color);
345
338
  outline-offset:-1px;
346
339
  }
347
340
  .rs-input-group .rs-input-group{
@@ -376,23 +369,23 @@ body{
376
369
  .rs-input-group > .rs-input-group-addon > .rs-icon{
377
370
  font-size:inherit;
378
371
  }
379
- .rs-input-group.rs-input-group-inside{
372
+ .rs-input-group[data-inside=true]{
380
373
  width:var(--rs-input-group-width);
381
374
  align-items:center;
382
375
  background-color:var(--rs-input-bg);
383
376
  }
384
- .rs-input-group.rs-input-group-inside .rs-input{
377
+ .rs-input-group[data-inside=true] .rs-input{
385
378
  display:block;
386
379
  width:100%;
387
380
  border:none;
388
381
  outline:none;
389
382
  }
390
- .rs-input-group.rs-input-group-inside .rs-input-group-btn,
391
- .rs-input-group.rs-input-group-inside .rs-input-group-addon{
383
+ .rs-input-group[data-inside=true] .rs-input-group-btn,
384
+ .rs-input-group[data-inside=true] .rs-input-group-addon{
392
385
  flex:0 0 auto;
393
386
  width:auto;
394
387
  }
395
- .rs-input-group.rs-input-group-inside .rs-input-group-btn{
388
+ .rs-input-group[data-inside=true] .rs-input-group-btn{
396
389
  border-radius:var(--rs-input-group-border-radius);
397
390
  height:calc(var(--rs-input-group-input-height) - var(--rs-input-group-inside-btn-spacing) * 2);
398
391
  margin-inline:var(--rs-input-group-inside-btn-spacing);
@@ -401,42 +394,42 @@ body{
401
394
  background-color:transparent;
402
395
  color:inherit;
403
396
  }
404
- .rs-input-group.rs-input-group-inside .rs-input-group-btn:hover{
397
+ .rs-input-group[data-inside=true] .rs-input-group-btn:hover{
405
398
  color:var(--rs-btn-subtle-hover-text);
406
399
  background-color:var(--rs-btn-subtle-hover-bg);
407
400
  }
408
- .rs-input-group.rs-input-group-inside .rs-input-group-btn:active, .rs-input-group.rs-input-group-inside .rs-input-group-btn.rs-btn-active{
401
+ .rs-input-group[data-inside=true] .rs-input-group-btn:active, .rs-input-group[data-inside=true] .rs-input-group-btn[data-active=true]{
409
402
  color:var(--rs-btn-subtle-active-text);
410
403
  background-color:var(--rs-btn-subtle-active-bg);
411
404
  }
412
- .rs-input-group.rs-input-group-inside .rs-input-group-btn:disabled, .rs-input-group.rs-input-group-inside .rs-input-group-btn.rs-btn-disabled{
405
+ .rs-input-group[data-inside=true] .rs-input-group-btn:disabled, .rs-input-group[data-inside=true] .rs-input-group-btn[data-disabled=true]{
413
406
  color:var(--rs-btn-subtle-disabled-text);
414
407
  background:none;
415
408
  }
416
- .rs-input-group.rs-input-group-inside .rs-input-group-btn:focus{
409
+ .rs-input-group[data-inside=true] .rs-input-group-btn:focus{
417
410
  outline:none;
418
411
  }
419
- .rs-input-group.rs-input-group-inside .rs-input-group-addon{
412
+ .rs-input-group[data-inside=true] .rs-input-group-addon{
420
413
  background:none;
421
414
  border:none;
422
415
  }
423
- .rs-input-group.rs-input-group-inside .rs-input:not(:first-child),
424
- .rs-input-group.rs-input-group-inside .rs-auto-complete:not(:first-child) .rs-input{
416
+ .rs-input-group[data-inside=true] .rs-input:not(:first-child),
417
+ .rs-input-group[data-inside=true] .rs-auto-complete:not(:first-child) .rs-input{
425
418
  padding-inline-start:0;
426
419
  }
427
- .rs-input-group.rs-input-group-inside .rs-input:not(:last-child),
428
- .rs-input-group.rs-input-group-inside .rs-auto-complete:not(:last-child) .rs-input{
420
+ .rs-input-group[data-inside=true] .rs-input:not(:last-child),
421
+ .rs-input-group[data-inside=true] .rs-auto-complete:not(:last-child) .rs-input{
429
422
  padding-inline-end:0;
430
423
  }
431
424
 
432
- .rs-input-group.rs-input-group-disabled{
425
+ .rs-input-group[data-disabled=true]{
433
426
  background-color:var(--rs-input-disabled-bg);
434
427
  color:var(--rs-text-disabled);
435
428
  cursor:not-allowed;
436
429
  }
437
- .rs-input-group.rs-input-group-disabled .rs-input,
438
- .rs-input-group.rs-input-group-disabled .rs-input-group-btn,
439
- .rs-input-group.rs-input-group-disabled .rs-input-group-addon{
430
+ .rs-input-group[data-disabled=true] .rs-input,
431
+ .rs-input-group[data-disabled=true] .rs-input-group-btn,
432
+ .rs-input-group[data-disabled=true] .rs-input-group-addon{
440
433
  color:inherit;
441
434
  }
442
435
 
@@ -456,16 +449,16 @@ body{
456
449
  padding-inline:var(--rs-spacing);
457
450
  min-width:var(--rs-input-group-input-height);
458
451
  }
459
- .rs-input-group-addon.rs-input-sm{
452
+ .rs-input-group-addon[data-size=sm]{
460
453
  padding-block:var(--rs-spacing-block-sm);
461
454
  padding-inline:var(--rs-spacing-inline-sm);
462
455
  font-size:var(--rs-font-size-sm);
463
456
  }
464
- .rs-input-group-addon.rs-input-xs{
457
+ .rs-input-group-addon[data-size=xs]{
465
458
  padding:var(--rs-spacing-inline-xs);
466
459
  font-size:var(--rs-font-size-xs);
467
460
  }
468
- .rs-input-group-addon.rs-input-lg{
461
+ .rs-input-group-addon[data-size=lg]{
469
462
  padding-block:var(--rs-spacing-block-lg);
470
463
  padding-inline:var(--rs-spacing-inline-lg);
471
464
  font-size:var(--rs-font-size-md);
package/PinInput/styles/index.css CHANGED
@@ -20,7 +20,6 @@ body{
20
20
  --rs-gray-100:#f2f2f5;
21
21
  --rs-gray-200:#e5e5ea;
22
22
  --rs-gray-400:#b6b7b8;
23
- --rs-gray-500:#939393;
24
23
  --rs-gray-600:#717273;
25
24
  --rs-gray-700:#575757;
26
25
  --rs-gray-800:#343434;
@@ -31,14 +30,14 @@ body{
31
30
  --rs-text-secondary:var(--rs-gray-600);
32
31
  --rs-text-disabled:var(--rs-gray-600);
33
32
  --rs-border-primary:var(--rs-gray-200);
34
- --rs-color-focus-ring:rgb(from var(--rs-primary-500) r g b / 25%);
33
+ --rs-focus-ring-color:rgb(from var(--rs-primary-500) r g b / 25%);
35
34
  --rs-input-bg:var(--rs-gray-0);
36
35
  --rs-input-focus-border:var(--rs-primary-500);
37
36
  --rs-input-disabled-bg:var(--rs-gray-50);
38
37
  }
39
38
  @supports not (color: rgb(from white r g b)){
40
39
  :root{
41
- --rs-color-focus-ring:rgba(52, 152, 255, 0.25);
40
+ --rs-focus-ring-color:rgba(52, 152, 255, 0.25);
42
41
  }
43
42
  }
44
43
 
@@ -49,7 +48,6 @@ body{
49
48
  --rs-gray-100:#cbced4;
50
49
  --rs-gray-200:#a4a9b3;
51
50
  --rs-gray-400:#6a6f76;
52
- --rs-gray-500:#5c6066;
53
51
  --rs-gray-600:#3c3f43;
54
52
  --rs-gray-700:#292d33;
55
53
  --rs-gray-800:#1a1d24;
@@ -60,17 +58,10 @@ body{
60
58
  --rs-text-secondary:var(--rs-gray-200);
61
59
  --rs-text-disabled:var(--rs-gray-400);
62
60
  --rs-border-primary:var(--rs-gray-600);
63
- --rs-color-focus-ring:0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
64
61
  --rs-input-bg:var(--rs-gray-800);
65
62
  --rs-input-focus-border:var(--rs-primary-500);
66
63
  --rs-input-disabled-bg:var(--rs-gray-700);
67
64
  }
68
- @supports not (color: rgb(from white r g b)){
69
- [data-theme=dark],
70
- .rs-theme-dark{
71
- --rs-color-focus-ring:0 0 0 2px rgba(52, 195, 255, 0.25);
72
- }
73
- }
74
65
 
75
66
  [data-theme=high-contrast],
76
67
  .rs-theme-high-contrast{
@@ -79,7 +70,6 @@ body{
79
70
  --rs-gray-100:#cbced4;
80
71
  --rs-gray-200:#a4a9b3;
81
72
  --rs-gray-400:#6a6f76;
82
- --rs-gray-500:#5c6066;
83
73
  --rs-gray-600:#3c3f43;
84
74
  --rs-gray-700:#292d33;
85
75
  --rs-gray-800:#1a1d24;
@@ -90,7 +80,7 @@ body{
90
80
  --rs-text-secondary:var(--rs-gray-200);
91
81
  --rs-text-disabled:var(--rs-gray-400);
92
82
  --rs-border-primary:var(--rs-gray-100);
93
- --rs-color-focus-ring:var(--rs-gray-0);
83
+ --rs-focus-ring-color:var(--rs-gray-0);
94
84
  --rs-input-bg:var(--rs-gray-800);
95
85
  --rs-input-focus-border:var(--rs-primary-500);
96
86
  --rs-input-disabled-bg:var(--rs-gray-700);
@@ -211,32 +201,32 @@ body{
211
201
  border-color:var(--rs-input-focus-border);
212
202
  }
213
203
  .rs-input:focus-visible{
214
- outline:2px solid var(--rs-color-focus-ring);
204
+ outline:2px solid var(--rs-focus-ring-color);
215
205
  outline-offset:-1px;
216
206
  }
217
207
  .rs-input:disabled{
218
208
  background-color:var(--rs-input-disabled-bg);
219
209
  color:var(--rs-text-disabled);
220
210
  }
221
- .rs-input.rs-input-xs{
211
+ .rs-input[data-size=xs]{
222
212
  --rs-input-font-size:var(--rs-input-font-size-xs);
223
213
  --rs-input-line-height:var(--rs-input-line-height-xs);
224
214
  --rs-input-padding-block:var(--rs-input-padding-block-xs);
225
215
  --rs-input-padding-inline:var(--rs-input-padding-inline-xs);
226
216
  }
227
- .rs-input.rs-input-sm{
217
+ .rs-input[data-size=sm]{
228
218
  --rs-input-font-size:var(--rs-input-font-size-sm);
229
219
  --rs-input-line-height:var(--rs-input-line-height-sm);
230
220
  --rs-input-padding-block:var(--rs-input-padding-block-sm);
231
221
  --rs-input-padding-inline:var(--rs-input-padding-inline-sm);
232
222
  }
233
- .rs-input.rs-input-md{
223
+ .rs-input[data-size=md]{
234
224
  --rs-input-font-size:var(--rs-input-font-size-md);
235
225
  --rs-input-line-height:var(--rs-input-line-height-md);
236
226
  --rs-input-padding-block:var(--rs-input-padding-block-md);
237
227
  --rs-input-padding-inline:var(--rs-input-padding-inline-md);
238
228
  }
239
- .rs-input.rs-input-lg{
229
+ .rs-input[data-size=lg]{
240
230
  --rs-input-font-size:var(--rs-input-font-size-lg);
241
231
  --rs-input-line-height:var(--rs-input-line-height-lg);
242
232
  --rs-input-padding-block:var(--rs-input-padding-block-lg);
@@ -258,16 +248,16 @@ body{
258
248
  width:var(--rs-pin-input-size);
259
249
  caret-color:transparent;
260
250
  }
261
- .rs-pin-input-segment.rs-input-lg{
251
+ .rs-pin-input-segment[data-size=lg]{
262
252
  --rs-pin-input-size:var(--rs-pin-input-size-lg);
263
253
  }
264
- .rs-pin-input-segment.rs-input-md{
254
+ .rs-pin-input-segment[data-size=md]{
265
255
  --rs-pin-input-size:var(--rs-pin-input-size-md);
266
256
  }
267
- .rs-pin-input-segment.rs-input-sm{
257
+ .rs-pin-input-segment[data-size=sm]{
268
258
  --rs-pin-input-size:var(--rs-pin-input-size-sm);
269
259
  }
270
- .rs-pin-input-segment.rs-input-xs{
260
+ .rs-pin-input-segment[data-size=xs]{
271
261
  --rs-pin-input-size:var(--rs-pin-input-size-xs);
272
262
  }
273
263
  .rs-pin-input-masked{
package/Radio/styles/index.css CHANGED
@@ -35,7 +35,7 @@ body{
35
35
  --rs-body:var(--rs-gray-0);
36
36
  --rs-text-primary:var(--rs-gray-800);
37
37
  --rs-text-disabled:var(--rs-gray-600);
38
- --rs-color-focus-ring:rgb(from var(--rs-primary-500) r g b / 25%);
38
+ --rs-focus-ring-color:rgb(from var(--rs-primary-500) r g b / 25%);
39
39
  --rs-checkbox-checked-bg:var(--rs-primary-500);
40
40
  --rs-radio-marker:#fff;
41
41
  --rs-radio-border:var(--rs-gray-300);
@@ -44,7 +44,7 @@ body{
44
44
  }
45
45
  @supports not (color: rgb(from white r g b)){
46
46
  :root{
47
- --rs-color-focus-ring:rgba(52, 152, 255, 0.25);
47
+ --rs-focus-ring-color:rgba(52, 152, 255, 0.25);
48
48
  }
49
49
  }
50
50
 
@@ -70,19 +70,12 @@ body{
70
70
  --rs-body:var(--rs-gray-900);
71
71
  --rs-text-primary:var(--rs-gray-50);
72
72
  --rs-text-disabled:var(--rs-gray-400);
73
- --rs-color-focus-ring:0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
74
73
  --rs-checkbox-checked-bg:var(--rs-primary-500);
75
74
  --rs-radio-marker:var(--rs-gray-800);
76
75
  --rs-radio-border:var(--rs-gray-400);
77
76
  --rs-radio-checked-bg:var(--rs-primary-500);
78
77
  --rs-radio-disabled-bg:var(--rs-gray-500);
79
78
  }
80
- @supports not (color: rgb(from white r g b)){
81
- [data-theme=dark],
82
- .rs-theme-dark{
83
- --rs-color-focus-ring:0 0 0 2px rgba(52, 195, 255, 0.25);
84
- }
85
- }
86
79
 
87
80
  [data-theme=high-contrast],
88
81
  .rs-theme-high-contrast{
@@ -106,7 +99,7 @@ body{
106
99
  --rs-body:var(--rs-gray-900);
107
100
  --rs-text-primary:var(--rs-gray-50);
108
101
  --rs-text-disabled:var(--rs-gray-400);
109
- --rs-color-focus-ring:var(--rs-gray-0);
102
+ --rs-focus-ring-color:var(--rs-gray-0);
110
103
  --rs-checkbox-checked-bg:var(--rs-primary-500);
111
104
  --rs-radio-marker:var(--rs-gray-800);
112
105
  --rs-radio-border:var(--rs-gray-100);
@@ -184,7 +177,7 @@ body{
184
177
  position:relative;
185
178
  align-items:center;
186
179
  }
187
- .rs-radio-disabled label{
180
+ .rs-radio[data-disabled=true] label{
188
181
  cursor:var(--rs-cursor-disabled);
189
182
  }
190
183
  .rs-radio label{
@@ -194,16 +187,19 @@ body{
194
187
  .rs-radio-inner::before{
195
188
  border-color:var(--rs-checkbox-checked-bg);
196
189
  }
197
- .rs-radio-disabled label{
190
+ .rs-radio[data-disabled=true] label{
198
191
  cursor:var(--rs-cursor-disabled);
199
192
  }
200
- .rs-radio-disabled > .rs-radio-checker > label{
193
+ .rs-radio[data-disabled=true] > .rs-radio-checker > label{
201
194
  color:var(--rs-text-disabled);
202
195
  }
203
196
  .rs-radio [type=radio]:focus ~ .rs-radio-inner::before{
204
- outline:2px solid var(--rs-color-focus-ring);
197
+ outline:2px solid var(--rs-focus-ring-color);
205
198
  outline-offset:-1px;
206
199
  }
200
+ .rs-radio[data-disabled=true]{
201
+ cursor:var(--rs-cursor-disabled);
202
+ }
207
203
 
208
204
  .rs-radio-checker{
209
205
  position:relative;
@@ -224,9 +220,6 @@ body{
224
220
  width:var(--rs-radio-size);
225
221
  height:var(--rs-radio-size);
226
222
  }
227
- .rs-radio-control [type=radio]:disabled{
228
- cursor:var(--rs-cursor-disabled);
229
- }
230
223
  .rs-radio-control::before,
231
224
  .rs-radio-control .rs-radio-inner::before,
232
225
  .rs-radio-control .rs-radio-inner::after{
@@ -253,7 +246,7 @@ body{
253
246
  [data-theme=high-contrast] .rs-radio-control::before, .rs-theme-high-contrast .rs-radio-control::before{
254
247
  transition:none;
255
248
  }
256
- .rs-radio-checked .rs-radio-control::before{
249
+ .rs-radio[data-checked=true] .rs-radio-control::before{
257
250
  transform:scale(1.5);
258
251
  opacity:0;
259
252
  visibility:visible;
@@ -271,15 +264,15 @@ body{
271
264
  .rs-radio:hover .rs-radio-inner::before{
272
265
  border-color:var(--rs-radio-checked-bg);
273
266
  }
274
- .rs-radio.rs-radio-disabled .rs-radio-inner::before{
267
+ .rs-radio[data-disabled=true] .rs-radio-inner::before{
275
268
  border-color:var(--rs-radio-disabled-bg);
276
269
  background-color:var(--rs-radio-disabled-bg);
277
270
  }
278
- .rs-radio.rs-radio-checked .rs-radio-inner::before{
271
+ .rs-radio[data-checked=true] .rs-radio-inner::before{
279
272
  border-color:var(--rs-radio-checked-bg);
280
273
  background-color:var(--rs-radio-checked-bg);
281
274
  }
282
- .rs-radio.rs-radio-disabled.rs-radio-checked .rs-radio-inner::before{
275
+ .rs-radio[data-disabled=true][data-checked=true] .rs-radio-inner::before{
283
276
  opacity:0.5;
284
277
  }
285
278
  .rs-radio-inner::after{
@@ -296,42 +289,42 @@ body{
296
289
  [data-theme=high-contrast] .rs-radio-inner::after, .rs-theme-high-contrast .rs-radio-inner::after{
297
290
  transition:none;
298
291
  }
299
- .rs-radio-checked .rs-radio-inner::after{
292
+ .rs-radio[data-checked=true] .rs-radio-inner::after{
300
293
  transform:scale(1);
301
294
  opacity:1;
302
295
  }
303
296
 
304
- .rs-radio-red{
297
+ .rs-radio[data-color=red]{
305
298
  --rs-radio-checked-bg:var(--rs-red-500);
306
299
  --rs-radio-border:var(--rs-red-500);
307
300
  }
308
301
 
309
- .rs-radio-orange{
302
+ .rs-radio[data-color=orange]{
310
303
  --rs-radio-checked-bg:var(--rs-orange-500);
311
304
  --rs-radio-border:var(--rs-orange-500);
312
305
  }
313
306
 
314
- .rs-radio-yellow{
307
+ .rs-radio[data-color=yellow]{
315
308
  --rs-radio-checked-bg:var(--rs-yellow-500);
316
309
  --rs-radio-border:var(--rs-yellow-500);
317
310
  }
318
311
 
319
- .rs-radio-green{
312
+ .rs-radio[data-color=green]{
320
313
  --rs-radio-checked-bg:var(--rs-green-500);
321
314
  --rs-radio-border:var(--rs-green-500);
322
315
  }
323
316
 
324
- .rs-radio-cyan{
317
+ .rs-radio[data-color=cyan]{
325
318
  --rs-radio-checked-bg:var(--rs-cyan-500);
326
319
  --rs-radio-border:var(--rs-cyan-500);
327
320
  }
328
321
 
329
- .rs-radio-blue{
322
+ .rs-radio[data-color=blue]{
330
323
  --rs-radio-checked-bg:var(--rs-blue-500);
331
324
  --rs-radio-border:var(--rs-blue-500);
332
325
  }
333
326
 
334
- .rs-radio-violet{
327
+ .rs-radio[data-color=violet]{
335
328
  --rs-radio-checked-bg:var(--rs-violet-500);
336
329
  --rs-radio-border:var(--rs-violet-500);
337
330
  }
package/RadioGroup/styles/index.css CHANGED
@@ -142,11 +142,11 @@ body{
142
142
  flex-direction:var(--rs-radio-group-direction);
143
143
  gap:var(--rs-radio-group-spacing);
144
144
  }
145
- .rs-radio-group.rs-radio-group-inline{
145
+ .rs-radio-group[data-inline=true]{
146
146
  --rs-radio-group-direction:row;
147
147
  }
148
148
 
149
- .rs-radio-group-picker{
149
+ .rs-radio-group[data-appearance=picker]{
150
150
  display:inline-flex;
151
151
  align-items:center;
152
152
  flex-wrap:wrap;
@@ -155,18 +155,18 @@ body{
155
155
  border-radius:var(--rs-radio-group-picker-border-radius);
156
156
  padding-inline:calc(var(--rs-spacing) * 3);
157
157
  }
158
- .rs-radio-group-picker .rs-radio-inline{
158
+ .rs-radio-group[data-appearance=picker] .rs-radio[data-inline=true]{
159
159
  padding-inline:var(--rs-spacing);
160
160
  margin:0;
161
161
  }
162
- .rs-radio-group-picker .rs-radio-checker{
162
+ .rs-radio-group[data-appearance=picker] .rs-radio-checker{
163
163
  padding:0;
164
164
  min-height:auto;
165
165
  }
166
- .rs-radio-group-picker .rs-radio-control{
166
+ .rs-radio-group[data-appearance=picker] .rs-radio-control{
167
167
  display:none;
168
168
  }
169
- .rs-radio-group-picker .rs-radio-checker > label{
169
+ .rs-radio-group[data-appearance=picker] .rs-radio-checker > label{
170
170
  display:inline-block;
171
171
  white-space:nowrap;
172
172
  font-size:var(--rs-font-size-sm);
@@ -180,21 +180,21 @@ body{
180
180
  padding-block-end:calc(var(--rs-padding-block-md) - var(--rs-radio-group-border-width) - var(--rs-radio-active-underline-width));
181
181
  border-bottom:var(--rs-radio-active-underline-width) solid var(--rs-radio-checker-border-color);
182
182
  }
183
- [data-theme=high-contrast] .rs-radio-group-picker .rs-radio-checker > label, .rs-theme-high-contrast .rs-radio-group-picker .rs-radio-checker > label{
183
+ [data-theme=high-contrast] .rs-radio-group[data-appearance=picker] .rs-radio-checker > label, .rs-theme-high-contrast .rs-radio-group[data-appearance=picker] .rs-radio-checker > label{
184
184
  transition:none;
185
185
  }
186
- .rs-radio-group-picker .rs-radio-checker > label:hover, .rs-radio-group-picker .rs-radio-checker > label:active{
186
+ .rs-radio-group[data-appearance=picker] .rs-radio-checker > label:hover, .rs-radio-group[data-appearance=picker] .rs-radio-checker > label:active{
187
187
  color:var(--rs-text-active);
188
188
  background:none;
189
189
  }
190
- .rs-radio-group-picker .rs-radio-checked .rs-radio-checker > label{
190
+ .rs-radio-group[data-appearance=picker] .rs-radio-checked .rs-radio-checker > label{
191
191
  --rs-radio-checker-label-color:var(--rs-text-active);
192
192
  --rs-radio-checker-border-color:var(--rs-text-active);
193
193
  }
194
- .rs-radio-group-picker .rs-radio-disabled .rs-radio-checker{
194
+ .rs-radio-group[data-appearance=picker] .rs-radio[data-disabled=true] .rs-radio-checker{
195
195
  opacity:0.3;
196
196
  cursor:not-allowed;
197
197
  }
198
- .rs-radio-group-picker .rs-radio-disabled:not(.rs-radio-checked) .rs-radio-checker > label{
198
+ .rs-radio-group[data-appearance=picker] .rs-radio[data-disabled=true][data-checked=false] .rs-radio-checker > label{
199
199
  color:var(--rs-text-secondary);
200
200
  }