@recursica/mantine-adapter 0.35.1 → 0.36.0

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 (57) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/mantine-adapter.cjs +2 -2
  3. package/dist/mantine-adapter.cjs.map +1 -1
  4. package/dist/mantine-adapter.css +1 -1
  5. package/dist/mantine-adapter.js +1104 -1023
  6. package/dist/mantine-adapter.js.map +1 -1
  7. package/dist/src/components/Tree/Tree.d.ts +9 -5
  8. package/package.json +1 -1
  9. package/src/components/Accordion/Accordion.module.css +123 -62
  10. package/src/components/Accordion/Accordion.stories.tsx +65 -33
  11. package/src/components/Accordion/Accordion.tsx +1 -0
  12. package/src/components/AutoComplete/AutoComplete.module.css +50 -49
  13. package/src/components/AutoComplete/AutoComplete.tsx +2 -2
  14. package/src/components/Avatar/Avatar.module.css +7 -7
  15. package/src/components/Badge/Badge.module.css +8 -8
  16. package/src/components/Button/Button.module.css +22 -89
  17. package/src/components/Card/Card.module.css +3 -3
  18. package/src/components/Checkbox/Checkbox.module.css +54 -15
  19. package/src/components/Chip/Chip.module.css +27 -26
  20. package/src/components/DatePicker/DatePicker.module.css +25 -30
  21. package/src/components/Dropdown/Dropdown.module.css +47 -44
  22. package/src/components/Dropdown/Dropdown.tsx +2 -2
  23. package/src/components/FormControlWrapper/FormControlWrapper.module.css +12 -12
  24. package/src/components/HoverCard/HoverCard.module.css +1 -1
  25. package/src/components/Label/Label.module.css +7 -3
  26. package/src/components/Link/IMPLEMENTATION_NOTES.md +2 -9
  27. package/src/components/Link/Link.module.css +15 -76
  28. package/src/components/Link/USAGE.md +2 -9
  29. package/src/components/Loader/Loader.module.css +3 -3
  30. package/src/components/Menu/Menu.module.css +34 -41
  31. package/src/components/Modal/Modal.module.css +27 -11
  32. package/src/components/NumberInput/NumberInput.module.css +39 -37
  33. package/src/components/NumberInput/NumberInput.tsx +2 -2
  34. package/src/components/Pagination/Pagination.module.css +10 -43
  35. package/src/components/Panel/Panel.module.css +3 -3
  36. package/src/components/Popover/Popover.module.css +1 -1
  37. package/src/components/Radio/Radio.module.css +31 -14
  38. package/src/components/ReadOnlyField/ReadOnlyField.module.css +1 -1
  39. package/src/components/SegmentedControl/SegmentedControl.module.css +29 -29
  40. package/src/components/Slider/IMPLEMENTATION_NOTES.md +9 -0
  41. package/src/components/Slider/Slider.module.css +44 -48
  42. package/src/components/Stepper/Stepper.module.css +3 -3
  43. package/src/components/Switch/Switch.module.css +26 -10
  44. package/src/components/Table/Table.module.css +53 -21
  45. package/src/components/Tabs/Tabs.module.css +309 -170
  46. package/src/components/TextArea/TextArea.module.css +36 -21
  47. package/src/components/TextArea/TextArea.tsx +2 -2
  48. package/src/components/TextField/TextField.module.css +38 -35
  49. package/src/components/TextField/TextField.tsx +2 -2
  50. package/src/components/Timeline/Timeline.module.css +41 -34
  51. package/src/components/Toast/Toast.module.css +19 -11
  52. package/src/components/Tooltip/Tooltip.module.css +4 -2
  53. package/src/components/Tree/IMPLEMENTATION_NOTES.md +17 -0
  54. package/src/components/Tree/Tree.module.css +173 -39
  55. package/src/components/Tree/Tree.stories.tsx +81 -4
  56. package/src/components/Tree/Tree.tsx +117 -15
  57. package/src/components/Tree/USAGE.md +36 -3
package/src/components/Switch/Switch.module.css CHANGED
@@ -25,8 +25,17 @@
25
25
 
26
26
  .root:has(input:disabled) {
27
27
  cursor: not-allowed;
28
+ }
29
+
30
+ /* Track/thumb dim per selection state; label dims via its own (single, state-agnostic) token */
31
+ .root:has(input:checked:disabled) .track {
32
+ opacity: var(
33
+ --recursica_ui-kit_components_switch_variants_selection-states_selected_variants_states_disabled_properties_opacity
34
+ );
35
+ }
36
+ .root:has(input:disabled):not(:has(input:checked)) .track {
28
37
  opacity: var(
29
- --recursica_ui-kit_components_switch-item_properties_disabled-opacity
38
+ --recursica_ui-kit_components_switch_variants_selection-states_unselected_variants_states_disabled_properties_opacity
30
39
  );
31
40
  }
32
41
 
@@ -39,12 +48,12 @@
39
48
  /* HARDCODE: disable native hover color transitions applied by Mantine */
40
49
  .track:hover {
41
50
  background-color: var(
42
- --recursica_ui-kit_components_switch_properties_colors_track-unselected
51
+ --recursica_ui-kit_components_switch_variants_selection-states_unselected_properties_colors_track-color
43
52
  );
44
53
  }
45
54
  .root input:checked + .track:hover {
46
55
  background-color: var(
47
- --recursica_ui-kit_components_switch_properties_colors_track-selected
56
+ --recursica_ui-kit_components_switch_variants_selection-states_selected_properties_colors_track-color
48
57
  );
49
58
  }
50
59
 
@@ -55,7 +64,7 @@
55
64
  --recursica_ui-kit_components_switch_properties_track-border-radius
56
65
  );
57
66
  background-color: var(
58
- --recursica_ui-kit_components_switch_properties_colors_track-unselected
67
+ --recursica_ui-kit_components_switch_variants_selection-states_unselected_properties_colors_track-color
59
68
  );
60
69
  box-shadow: var(
61
70
  --recursica_ui-kit_components_switch_properties_track-elevation
@@ -79,7 +88,7 @@
79
88
 
80
89
  .root input:checked + .track {
81
90
  background-color: var(
82
- --recursica_ui-kit_components_switch_properties_colors_track-selected
91
+ --recursica_ui-kit_components_switch_variants_selection-states_selected_properties_colors_track-color
83
92
  );
84
93
  border-color: transparent;
85
94
  }
@@ -91,7 +100,7 @@
91
100
  --recursica_ui-kit_components_switch_properties_thumb-border-radius
92
101
  );
93
102
  background-color: var(
94
- --recursica_ui-kit_components_switch_properties_colors_thumb-unselected
103
+ --recursica_ui-kit_components_switch_variants_selection-states_unselected_properties_colors_thumb-color
95
104
  );
96
105
  box-shadow: var(
97
106
  --recursica_ui-kit_components_switch_properties_thumb-elevation
@@ -103,7 +112,7 @@
103
112
 
104
113
  .root input:checked + .track .thumb {
105
114
  background-color: var(
106
- --recursica_ui-kit_components_switch_properties_colors_thumb-selected
115
+ --recursica_ui-kit_components_switch_variants_selection-states_selected_properties_colors_thumb-color
107
116
  );
108
117
  }
109
118
 
@@ -114,6 +123,11 @@
114
123
  --recursica_ui-kit_components_switch-item_properties_label-max-width
115
124
  );
116
125
  }
126
+ .root:has(input:disabled) .labelWrapper {
127
+ opacity: var(
128
+ --recursica_ui-kit_components_switch-item_variants_states_disabled_properties_opacity
129
+ );
130
+ }
117
131
 
118
132
  .label {
119
133
  font-family: var(
@@ -140,7 +154,9 @@
140
154
  text-decoration: var(
141
155
  --recursica_ui-kit_components_switch-item_properties_text_text-decoration
142
156
  );
143
- color: var(--recursica_ui-kit_components_switch-item_properties_colors_text);
157
+ color: var(
158
+ --recursica_ui-kit_components_switch-item_properties_colors_text-color
159
+ );
144
160
  cursor: inherit;
145
161
  }
146
162
 
@@ -174,7 +190,7 @@
174
190
  opacity: 0;
175
191
  transform: scale(0.5);
176
192
  color: var(
177
- --recursica_ui-kit_components_switch_properties_colors_icon-selected
193
+ --recursica_ui-kit_components_switch_variants_selection-states_selected_properties_colors_icon-color
178
194
  );
179
195
  }
180
196
 
@@ -182,7 +198,7 @@
182
198
  opacity: 1;
183
199
  transform: scale(1);
184
200
  color: var(
185
- --recursica_ui-kit_components_switch_properties_colors_icon-unselected
201
+ --recursica_ui-kit_components_switch_variants_selection-states_unselected_properties_colors_icon-color
186
202
  );
187
203
  }
188
204
 
package/src/components/Table/Table.module.css CHANGED
@@ -75,18 +75,13 @@
75
75
  }
76
76
 
77
77
  /* Hover rows */
78
+ /* Table's dedicated highlight-on-hover token was removed from the schema; hover feedback now
79
+ uses the generic cross-component overlay tokens instead. */
78
80
  .root tbody tr:hover td {
79
81
  background-color: color-mix(
80
82
  in srgb,
81
- var(
82
- --recursica_ui-kit_components_table_properties_colors_highlight-on-hover-color
83
- )
84
- calc(
85
- var(
86
- --recursica_ui-kit_components_table_properties_opacities_highlight-on-hover-opacity
87
- ) *
88
- 100%
89
- ),
83
+ var(--recursica_brand_states_hover_color)
84
+ calc(var(--recursica_brand_states_hover_opacity) * 100%),
90
85
  transparent
91
86
  );
92
87
  }
@@ -97,10 +92,10 @@
97
92
 
98
93
  .root thead th {
99
94
  background-color: var(
100
- --recursica_ui-kit_components_table-header_properties_colors_cell-color-enabled
95
+ --recursica_ui-kit_components_table-header_properties_colors_cell-color
101
96
  );
102
97
  color: var(
103
- --recursica_ui-kit_components_table-header_properties_colors_text-color-enabled
98
+ --recursica_ui-kit_components_table-header_properties_colors_text-color
104
99
  );
105
100
  padding: var(
106
101
  --recursica_ui-kit_components_table-header_properties_padding-vertical
@@ -207,10 +202,13 @@
207
202
  /* Disabled Header */
208
203
  .root thead th[data-disabled="true"] {
209
204
  background-color: var(
210
- --recursica_ui-kit_components_table-header_properties_colors_cell-color-disabled
205
+ --recursica_ui-kit_components_table-header_variants_states_disabled_properties_colors_cell-color
211
206
  );
212
207
  color: var(
213
- --recursica_ui-kit_components_table-header_properties_colors_text-color-disabled
208
+ --recursica_ui-kit_components_table-header_variants_states_disabled_properties_colors_text-color
209
+ );
210
+ opacity: var(
211
+ --recursica_ui-kit_components_table-header_variants_states_disabled_properties_opacity
214
212
  );
215
213
  }
216
214
 
@@ -229,10 +227,10 @@
229
227
 
230
228
  .root tbody td {
231
229
  background-color: var(
232
- --recursica_ui-kit_components_table-cell_properties_colors_cell-color-enabled
230
+ --recursica_ui-kit_components_table-cell_properties_colors_cell-color
233
231
  );
234
232
  color: var(
235
- --recursica_ui-kit_components_table-cell_properties_colors_text-color-enabled
233
+ --recursica_ui-kit_components_table-cell_properties_colors_text-color
236
234
  );
237
235
  padding: var(
238
236
  --recursica_ui-kit_components_table-cell_properties_padding-vertical
@@ -305,10 +303,13 @@
305
303
  .root tbody tr[data-disabled="true"] td,
306
304
  .root tbody td[data-disabled="true"] {
307
305
  background-color: var(
308
- --recursica_ui-kit_components_table-cell_properties_colors_cell-color-disabled
306
+ --recursica_ui-kit_components_table-cell_variants_states_disabled_properties_colors_cell-color
309
307
  );
310
308
  color: var(
311
- --recursica_ui-kit_components_table-cell_properties_colors_text-color-disabled
309
+ --recursica_ui-kit_components_table-cell_variants_states_disabled_properties_colors_text-color
310
+ );
311
+ opacity: var(
312
+ --recursica_ui-kit_components_table-cell_variants_states_disabled_properties_opacity
312
313
  );
313
314
  }
314
315
 
@@ -318,10 +319,10 @@
318
319
 
319
320
  .root tfoot td {
320
321
  background-color: var(
321
- --recursica_ui-kit_components_table-footer_properties_colors_cell-color-enabled
322
+ --recursica_ui-kit_components_table-footer_properties_colors_cell-color
322
323
  );
323
324
  color: var(
324
- --recursica_ui-kit_components_table-footer_properties_colors_text-color-enabled
325
+ --recursica_ui-kit_components_table-footer_properties_colors_text-color
325
326
  );
326
327
  padding: var(
327
328
  --recursica_ui-kit_components_table-footer_properties_padding-vertical
@@ -380,13 +381,44 @@
380
381
  );
381
382
  }
382
383
 
384
+ /* Currency formatted footer cell layout override */
385
+ .root tfoot td[data-currency="true"] {
386
+ font-family: var(
387
+ --recursica_ui-kit_components_table-footer_properties_currency-style_font-family
388
+ );
389
+ font-size: var(
390
+ --recursica_ui-kit_components_table-footer_properties_currency-style_font-size
391
+ );
392
+ font-style: var(
393
+ --recursica_ui-kit_components_table-footer_properties_currency-style_font-style
394
+ );
395
+ font-weight: var(
396
+ --recursica_ui-kit_components_table-footer_properties_currency-style_font-weight
397
+ );
398
+ letter-spacing: var(
399
+ --recursica_ui-kit_components_table-footer_properties_currency-style_letter-spacing
400
+ );
401
+ line-height: var(
402
+ --recursica_ui-kit_components_table-footer_properties_currency-style_line-height
403
+ );
404
+ text-decoration: var(
405
+ --recursica_ui-kit_components_table-footer_properties_currency-style_text-decoration
406
+ );
407
+ text-transform: var(
408
+ --recursica_ui-kit_components_table-footer_properties_currency-style_text-transform
409
+ );
410
+ }
411
+
383
412
  /* Disabled Footer Row/Cells */
384
413
  .root tfoot tr[data-disabled="true"] td,
385
414
  .root tfoot td[data-disabled="true"] {
386
415
  background-color: var(
387
- --recursica_ui-kit_components_table-footer_properties_colors_cell-color-disabled
416
+ --recursica_ui-kit_components_table-footer_variants_states_disabled_properties_colors_cell-color
388
417
  );
389
418
  color: var(
390
- --recursica_ui-kit_components_table-footer_properties_colors_text-color-disabled
419
+ --recursica_ui-kit_components_table-footer_variants_states_disabled_properties_colors_text-color
420
+ );
421
+ opacity: var(
422
+ --recursica_ui-kit_components_table-footer_variants_states_disabled_properties_opacity
391
423
  );
392
424
  }