@mantine/core 8.0.0 → 8.0.2

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 (117) hide show
  1. package/cjs/components/AngleSlider/AngleSlider.cjs +22 -10
  2. package/cjs/components/AngleSlider/AngleSlider.cjs.map +1 -1
  3. package/cjs/components/Collapse/use-collapse.cjs +10 -2
  4. package/cjs/components/Collapse/use-collapse.cjs.map +1 -1
  5. package/cjs/components/FileButton/FileButton.cjs +2 -2
  6. package/cjs/components/FileButton/FileButton.cjs.map +1 -1
  7. package/cjs/components/List/List.cjs.map +1 -1
  8. package/cjs/components/Menu/MenuSub/MenuSub.cjs +1 -1
  9. package/cjs/components/Menu/MenuSub/MenuSub.cjs.map +1 -1
  10. package/cjs/components/MultiSelect/MultiSelect.cjs +0 -1
  11. package/cjs/components/MultiSelect/MultiSelect.cjs.map +1 -1
  12. package/cjs/components/PasswordInput/PasswordInput.cjs +9 -2
  13. package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
  14. package/cjs/components/Popover/Popover.cjs +2 -1
  15. package/cjs/components/Popover/Popover.cjs.map +1 -1
  16. package/cjs/components/Popover/use-popover.cjs +2 -2
  17. package/cjs/components/Popover/use-popover.cjs.map +1 -1
  18. package/cjs/components/ScrollArea/ScrollArea.cjs +1 -1
  19. package/cjs/components/ScrollArea/ScrollArea.cjs.map +1 -1
  20. package/cjs/components/Select/Select.cjs +2 -2
  21. package/cjs/components/Select/Select.cjs.map +1 -1
  22. package/cjs/components/Slider/Track/Track.cjs +1 -1
  23. package/cjs/components/Slider/Track/Track.cjs.map +1 -1
  24. package/cjs/components/Switch/Switch.cjs +1 -0
  25. package/cjs/components/Switch/Switch.cjs.map +1 -1
  26. package/cjs/components/Table/TableScrollContainer.cjs +2 -1
  27. package/cjs/components/Table/TableScrollContainer.cjs.map +1 -1
  28. package/cjs/components/Tabs/Tabs.module.css.cjs +1 -1
  29. package/cjs/components/Transition/use-transition.cjs +8 -4
  30. package/cjs/components/Transition/use-transition.cjs.map +1 -1
  31. package/cjs/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.cjs +8 -2
  32. package/cjs/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.cjs.map +1 -1
  33. package/cjs/core/utils/units-converters/rem.cjs +0 -3
  34. package/cjs/core/utils/units-converters/rem.cjs.map +1 -1
  35. package/esm/components/AngleSlider/AngleSlider.mjs +22 -10
  36. package/esm/components/AngleSlider/AngleSlider.mjs.map +1 -1
  37. package/esm/components/Collapse/use-collapse.mjs +7 -3
  38. package/esm/components/Collapse/use-collapse.mjs.map +1 -1
  39. package/esm/components/FileButton/FileButton.mjs +2 -2
  40. package/esm/components/FileButton/FileButton.mjs.map +1 -1
  41. package/esm/components/List/List.mjs.map +1 -1
  42. package/esm/components/Menu/MenuSub/MenuSub.mjs +1 -1
  43. package/esm/components/Menu/MenuSub/MenuSub.mjs.map +1 -1
  44. package/esm/components/MultiSelect/MultiSelect.mjs +0 -1
  45. package/esm/components/MultiSelect/MultiSelect.mjs.map +1 -1
  46. package/esm/components/PasswordInput/PasswordInput.mjs +9 -2
  47. package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
  48. package/esm/components/Popover/Popover.mjs +2 -1
  49. package/esm/components/Popover/Popover.mjs.map +1 -1
  50. package/esm/components/Popover/use-popover.mjs +2 -2
  51. package/esm/components/Popover/use-popover.mjs.map +1 -1
  52. package/esm/components/ScrollArea/ScrollArea.mjs +1 -1
  53. package/esm/components/ScrollArea/ScrollArea.mjs.map +1 -1
  54. package/esm/components/Select/Select.mjs +2 -2
  55. package/esm/components/Select/Select.mjs.map +1 -1
  56. package/esm/components/Slider/Track/Track.mjs +1 -1
  57. package/esm/components/Slider/Track/Track.mjs.map +1 -1
  58. package/esm/components/Switch/Switch.mjs +1 -0
  59. package/esm/components/Switch/Switch.mjs.map +1 -1
  60. package/esm/components/Table/TableScrollContainer.mjs +2 -1
  61. package/esm/components/Table/TableScrollContainer.mjs.map +1 -1
  62. package/esm/components/Tabs/Tabs.module.css.mjs +1 -1
  63. package/esm/components/Transition/use-transition.mjs +8 -4
  64. package/esm/components/Transition/use-transition.mjs.map +1 -1
  65. package/esm/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.mjs +8 -2
  66. package/esm/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.mjs.map +1 -1
  67. package/esm/core/utils/units-converters/rem.mjs +0 -3
  68. package/esm/core/utils/units-converters/rem.mjs.map +1 -1
  69. package/lib/components/Collapse/use-collapse.d.ts +1 -0
  70. package/lib/components/List/List.d.ts +1 -1
  71. package/lib/components/Menu/MenuSub/MenuSub.d.ts +8 -0
  72. package/lib/components/Popover/use-popover.d.ts +2 -1
  73. package/lib/components/Table/TableScrollContainer.d.ts +3 -0
  74. package/lib/core/types.d.ts +1 -1
  75. package/package.json +2 -2
  76. package/styles/ActionIcon.css +2 -10
  77. package/styles/ActionIcon.layer.css +2 -10
  78. package/styles/AngleSlider.css +3 -4
  79. package/styles/AngleSlider.layer.css +3 -4
  80. package/styles/Button.css +2 -10
  81. package/styles/Button.layer.css +2 -10
  82. package/styles/Checkbox.css +5 -17
  83. package/styles/Checkbox.layer.css +5 -17
  84. package/styles/CheckboxIndicator.css +2 -10
  85. package/styles/CheckboxIndicator.layer.css +2 -10
  86. package/styles/Chip.css +2 -10
  87. package/styles/Chip.layer.css +2 -10
  88. package/styles/InlineInput.css +4 -7
  89. package/styles/InlineInput.layer.css +4 -7
  90. package/styles/Input.css +2 -10
  91. package/styles/Input.layer.css +2 -10
  92. package/styles/Menu.css +1 -1
  93. package/styles/Menu.layer.css +1 -1
  94. package/styles/ModalBase.css +1 -1
  95. package/styles/ModalBase.layer.css +1 -1
  96. package/styles/NumberInput.css +1 -8
  97. package/styles/NumberInput.layer.css +1 -8
  98. package/styles/Pill.css +2 -2
  99. package/styles/Pill.layer.css +2 -2
  100. package/styles/Radio.css +5 -17
  101. package/styles/Radio.layer.css +5 -17
  102. package/styles/RadioIndicator.css +5 -17
  103. package/styles/RadioIndicator.layer.css +5 -17
  104. package/styles/SegmentedControl.css +5 -18
  105. package/styles/SegmentedControl.layer.css +5 -18
  106. package/styles/Slider.css +8 -16
  107. package/styles/Slider.layer.css +8 -16
  108. package/styles/Stepper.css +21 -45
  109. package/styles/Stepper.layer.css +21 -45
  110. package/styles/Switch.css +3 -3
  111. package/styles/Switch.layer.css +3 -3
  112. package/styles/Tabs.css +5 -0
  113. package/styles/Tabs.layer.css +5 -0
  114. package/styles/default-css-variables.css +6 -0
  115. package/styles/default-css-variables.layer.css +6 -0
  116. package/styles.css +85 -206
  117. package/styles.layer.css +85 -206
package/styles/Stepper.layer.css CHANGED
@@ -11,6 +11,15 @@
11
11
  --stepper-spacing: var(--mantine-spacing-md);
12
12
  --stepper-radius: 1000px;
13
13
  --stepper-fz: var(--mantine-font-size-md);
14
+ --stepper-outline-thickness: 2px;
15
+ }
16
+
17
+ [data-mantine-color-scheme='light'] .m_cbb4ea7e {
18
+ --stepper-outline-color: var(--mantine-color-gray-2);
19
+ }
20
+
21
+ [data-mantine-color-scheme='dark'] .m_cbb4ea7e {
22
+ --stepper-outline-color: var(--mantine-color-dark-5);
14
23
  }
15
24
 
16
25
  .m_aaf89d0b {
@@ -41,43 +50,17 @@
41
50
  }
42
51
 
43
52
  .m_2a371ac9 {
44
- --separator-offset: calc(var(--stepper-icon-size) / 2 - calc(0.0625rem * var(--mantine-scale)));
45
-
46
53
  transition: background-color 150ms ease;
47
54
  flex: 1;
48
- }
49
-
50
- :where([data-mantine-color-scheme='light']) .m_2a371ac9 {
51
- background-color: var(--mantine-color-gray-2);
52
- }
53
-
54
- :where([data-mantine-color-scheme='dark']) .m_2a371ac9 {
55
- background-color: var(--mantine-color-dark-2);
55
+ height: var(--stepper-outline-thickness);
56
+ margin-inline: var(--mantine-spacing-md);
57
+ background-color: var(--stepper-outline-color);
56
58
  }
57
59
 
58
60
  .m_2a371ac9:where([data-active]) {
59
61
  background-color: var(--stepper-color);
60
62
  }
61
63
 
62
- .m_2a371ac9:where([data-orientation='horizontal']) {
63
- height: 2px;
64
- margin-inline: var(--mantine-spacing-md);
65
- }
66
-
67
- .m_2a371ac9:where([data-orientation='vertical']) {
68
- width: 2px;
69
- margin-top: calc(var(--mantine-spacing-xs) / 2);
70
- margin-bottom: calc(var(--mantine-spacing-xs) - calc(0.125rem * var(--mantine-scale)));
71
- }
72
-
73
- .m_2a371ac9:where([data-orientation='vertical']):where([data-icon-position='left']) {
74
- margin-inline-start: var(--separator-offset);
75
- }
76
-
77
- .m_2a371ac9:where([data-orientation='vertical']):where([data-icon-position='right']) {
78
- margin-inline-end: var(--separator-offset);
79
- }
80
-
81
64
  .m_78da155d {
82
65
  padding-top: var(--stepper-content-padding);
83
66
  }
@@ -118,10 +101,14 @@
118
101
  margin-top: 0;
119
102
  }
120
103
 
121
- .m_833edb7e:where(:last-of-type) .m_6496b3f3 {
122
- display: none;
104
+ .m_833edb7e:where(:last-of-type) {
105
+ min-height: auto;
123
106
  }
124
107
 
108
+ .m_833edb7e:where(:last-of-type) .m_6496b3f3 {
109
+ display: none;
110
+ }
111
+
125
112
  .m_818e70b {
126
113
  position: relative;
127
114
  }
@@ -131,15 +118,7 @@
131
118
  inset-inline-start: calc(var(--stepper-icon-size) / 2);
132
119
  height: 100vh;
133
120
  position: absolute;
134
- border-inline-start: 2px solid;
135
- }
136
-
137
- :where([data-mantine-color-scheme='light']) .m_6496b3f3 {
138
- border-color: var(--mantine-color-gray-1);
139
- }
140
-
141
- :where([data-mantine-color-scheme='dark']) .m_6496b3f3 {
142
- border-color: var(--mantine-color-dark-5);
121
+ border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
143
122
  }
144
123
 
145
124
  .m_6496b3f3:where([data-active]) {
@@ -161,18 +140,15 @@
161
140
  transition:
162
141
  background-color 150ms ease,
163
142
  border-color 150ms ease;
164
- border: 2px solid;
143
+ border: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
144
+ background-color: var(--stepper-outline-color);
165
145
  }
166
146
 
167
147
  :where([data-mantine-color-scheme='light']) .m_1959ad01 {
168
- background-color: var(--mantine-color-gray-1);
169
- border-color: var(--mantine-color-gray-1);
170
148
  color: var(--mantine-color-gray-7);
171
149
  }
172
150
 
173
151
  :where([data-mantine-color-scheme='dark']) .m_1959ad01 {
174
- background-color: var(--mantine-color-dark-5);
175
- border-color: var(--mantine-color-dark-5);
176
152
  color: var(--mantine-color-dark-1);
177
153
  }
178
154
 
package/styles/Switch.css CHANGED
@@ -36,6 +36,7 @@
36
36
  --switch-track-label-padding: var(--switch-track-label-padding-sm);
37
37
  --switch-radius: 1000px;
38
38
  --switch-color: var(--mantine-primary-color-filled);
39
+ --switch-disabled-color: var(--mantine-color-disabled);
39
40
 
40
41
  position: relative;
41
42
  }
@@ -99,13 +100,11 @@
99
100
  [data-mantine-color-scheme='light'] .m_9307d992 {
100
101
  --switch-bg: var(--mantine-color-gray-3);
101
102
  --switch-text-color: var(--mantine-color-gray-6);
102
- --switch-disabled-color: var(--mantine-color-gray-2);
103
103
  }
104
104
 
105
105
  [data-mantine-color-scheme='dark'] .m_9307d992 {
106
106
  --switch-bg: var(--mantine-color-dark-5);
107
107
  --switch-text-color: var(--mantine-color-dark-1);
108
- --switch-disabled-color: var(--mantine-color-dark-4);
109
108
  }
110
109
 
111
110
  .m_9307d992[data-label-position='left'] {
@@ -131,7 +130,8 @@
131
130
  background-color: var(--switch-bg);
132
131
  position: absolute;
133
132
  border-radius: var(--switch-radius);
134
- inset: 50%;
133
+ top: 50%;
134
+ left: 50%;
135
135
  transform: translate(-50%, -50%);
136
136
  }
137
137
 
package/styles/Switch.layer.css CHANGED
@@ -36,6 +36,7 @@
36
36
  --switch-track-label-padding: var(--switch-track-label-padding-sm);
37
37
  --switch-radius: 1000px;
38
38
  --switch-color: var(--mantine-primary-color-filled);
39
+ --switch-disabled-color: var(--mantine-color-disabled);
39
40
 
40
41
  position: relative;
41
42
  }
@@ -99,13 +100,11 @@
99
100
  [data-mantine-color-scheme='light'] .m_9307d992 {
100
101
  --switch-bg: var(--mantine-color-gray-3);
101
102
  --switch-text-color: var(--mantine-color-gray-6);
102
- --switch-disabled-color: var(--mantine-color-gray-2);
103
103
  }
104
104
 
105
105
  [data-mantine-color-scheme='dark'] .m_9307d992 {
106
106
  --switch-bg: var(--mantine-color-dark-5);
107
107
  --switch-text-color: var(--mantine-color-dark-1);
108
- --switch-disabled-color: var(--mantine-color-dark-4);
109
108
  }
110
109
 
111
110
  .m_9307d992[data-label-position='left'] {
@@ -131,7 +130,8 @@
131
130
  background-color: var(--switch-bg);
132
131
  position: absolute;
133
132
  border-radius: var(--switch-radius);
134
- inset: 50%;
133
+ top: 50%;
134
+ left: 50%;
135
135
  transform: translate(-50%, -50%);
136
136
  }
137
137
 
package/styles/Tabs.css CHANGED
@@ -151,6 +151,11 @@
151
151
  margin-inline-start: var(--mantine-spacing-xs);
152
152
  }
153
153
 
154
+ .m_42bbd1ae {
155
+ flex: 1;
156
+ text-align: center;
157
+ }
158
+
154
159
  /*************************************** default variant ***************************************/
155
160
  .m_576c9d4 {
156
161
  position: relative;
package/styles/Tabs.layer.css CHANGED
@@ -151,6 +151,11 @@
151
151
  margin-inline-start: var(--mantine-spacing-xs);
152
152
  }
153
153
 
154
+ .m_42bbd1ae {
155
+ flex: 1;
156
+ text-align: center;
157
+ }
158
+
154
159
  /*************************************** default variant ***************************************/
155
160
  .m_576c9d4 {
156
161
  position: relative;
package/styles/default-css-variables.css CHANGED
@@ -264,6 +264,9 @@
264
264
  --mantine-color-default-color: var(--mantine-color-white);
265
265
  --mantine-color-default-border: var(--mantine-color-dark-4);
266
266
  --mantine-color-dimmed: var(--mantine-color-dark-2);
267
+ --mantine-color-disabled: var(--mantine-color-dark-6);
268
+ --mantine-color-disabled-color: var(--mantine-color-dark-3);
269
+ --mantine-color-disabled-border: var(--mantine-color-gray-6);
267
270
  --mantine-color-dark-text: var(--mantine-color-dark-4);
268
271
  --mantine-color-dark-filled: var(--mantine-color-dark-8);
269
272
  --mantine-color-dark-filled-hover: var(--mantine-color-dark-9);
@@ -392,6 +395,9 @@
392
395
  --mantine-color-default-color: var(--mantine-color-black);
393
396
  --mantine-color-default-border: var(--mantine-color-gray-4);
394
397
  --mantine-color-dimmed: var(--mantine-color-gray-6);
398
+ --mantine-color-disabled: var(--mantine-color-gray-2);
399
+ --mantine-color-disabled-color: var(--mantine-color-gray-5);
400
+ --mantine-color-disabled-border: var(--mantine-color-gray-3);
395
401
  --mantine-color-dark-text: var(--mantine-color-dark-filled);
396
402
  --mantine-color-dark-filled: var(--mantine-color-dark-6);
397
403
  --mantine-color-dark-filled-hover: var(--mantine-color-dark-7);
package/styles/default-css-variables.layer.css CHANGED
@@ -264,6 +264,9 @@
264
264
  --mantine-color-default-color: var(--mantine-color-white);
265
265
  --mantine-color-default-border: var(--mantine-color-dark-4);
266
266
  --mantine-color-dimmed: var(--mantine-color-dark-2);
267
+ --mantine-color-disabled: var(--mantine-color-dark-6);
268
+ --mantine-color-disabled-color: var(--mantine-color-dark-3);
269
+ --mantine-color-disabled-border: var(--mantine-color-gray-6);
267
270
  --mantine-color-dark-text: var(--mantine-color-dark-4);
268
271
  --mantine-color-dark-filled: var(--mantine-color-dark-8);
269
272
  --mantine-color-dark-filled-hover: var(--mantine-color-dark-9);
@@ -392,6 +395,9 @@
392
395
  --mantine-color-default-color: var(--mantine-color-black);
393
396
  --mantine-color-default-border: var(--mantine-color-gray-4);
394
397
  --mantine-color-dimmed: var(--mantine-color-gray-6);
398
+ --mantine-color-disabled: var(--mantine-color-gray-2);
399
+ --mantine-color-disabled-color: var(--mantine-color-gray-5);
400
+ --mantine-color-disabled-border: var(--mantine-color-gray-3);
395
401
  --mantine-color-dark-text: var(--mantine-color-dark-filled);
396
402
  --mantine-color-dark-filled: var(--mantine-color-dark-6);
397
403
  --mantine-color-dark-filled-hover: var(--mantine-color-dark-7);