@mantine/core 8.0.0-alpha.2 → 8.0.0-alpha.3

package/lib/core/MantineProvider/theme.types.d.ts

@@ -119,18 +119,35 @@ export interface HeadingStyle {
     lineHeight: string;
 }
 export type MantineSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type MantineBreakpointsValues = Record<MantineSize | (string & {}), string>;
-export type MantineFontSizesValues = Record<MantineSize | (string & {}), string>;
-export type MantineRadiusValues = Record<MantineSize | (string & {}), string>;
-export type MantineSpacingValues = Record<MantineSize | (string & {}), string>;
-export type MantineShadowsValues = Record<MantineSize | (string & {}), string>;
-export type MantineLineHeightValues = Record<MantineSize | (string & {}), string>;
-export type MantineBreakpoint = keyof MantineBreakpointsValues;
-export type MantineFontSize = keyof MantineFontSizesValues;
-export type MantineRadius = keyof MantineRadiusValues | (string & {}) | number;
-export type MantineSpacing = keyof MantineSpacingValues | (string & {}) | number;
-export type MantineShadow = keyof MantineShadowsValues | (string & {});
-export type MantineLineHeight = keyof MantineLineHeightValues;
+export type DefaultMantineSize = MantineSize;
+export interface MantineThemeSizesOverride {
+}
+export type MantineBreakpoint = (MantineThemeSizesOverride extends {
+    breakpoints: Record<infer CustomBreakpoints, string>;
+} ? CustomBreakpoints : MantineSize) | (string & {});
+export type MantineBreakpointsValues = Record<MantineBreakpoint, string>;
+export type MantineFontSize = (MantineThemeSizesOverride extends {
+    fontSizes: Record<infer CustomFontSizes, string>;
+} ? CustomFontSizes : MantineSize) | (string & {});
+export type MantineFontSizesValues = Record<MantineFontSize, string>;
+type _MantineRadius = (MantineThemeSizesOverride extends {
+    radius: Record<infer CustomRadius, string>;
+} ? CustomRadius : MantineSize) | (string & {});
+export type MantineRadius = _MantineRadius | number;
+export type MantineRadiusValues = Record<_MantineRadius, string>;
+type _MantineSpacing = (MantineThemeSizesOverride extends {
+    spacing: Record<infer CustomSpacing, string>;
+} ? CustomSpacing : MantineSize) | (string & {});
+export type MantineSpacing = _MantineSpacing | number;
+export type MantineSpacingValues = Record<MantineSpacing, string>;
+export type MantineShadow = (MantineThemeSizesOverride extends {
+    shadows: Record<infer CustomShadow, string>;
+} ? CustomShadow : MantineSize) | (string & {});
+export type MantineShadowsValues = Record<MantineShadow, string>;
+export type MantineLineHeight = (MantineThemeSizesOverride extends {
+    lineHeights: Record<infer CustomLineHeight, string>;
+} ? CustomLineHeight : MantineSize) | (string & {});
+export type MantineLineHeightValues = Record<MantineLineHeight, string>;
 export interface MantineThemeOther {
     [key: string]: any;
 }
@@ -164,3 +181,4 @@ export type MantineThemeColors = MantineThemeColorsOverride extends {
     colors: Record<infer CustomColors, MantineColorsTuple>;
 } ? Record<CustomColors, MantineColorsTuple> : Record<DefaultMantineColor, MantineColorsTuple>;
 export type MantineColor = keyof MantineThemeColors;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "8.0.0-alpha.2",
+    "@mantine/hooks": "8.0.0-alpha.3",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },

package/styles/AppShell.css

@@ -4,6 +4,8 @@
   .m_89ab340[data-disabled] {
     --app-shell-header-offset: 0rem !important;
     --app-shell-navbar-offset: 0rem !important;
+    --app-shell-aside-offset: 0rem !important;
+    --app-shell-footer-offset: 0rem !important;
   }
   [data-mantine-color-scheme='light'] .m_89ab340 {
     --app-shell-border-color: var(--mantine-color-gray-3);

package/styles/AppShell.layer.css

@@ -4,6 +4,8 @@
   .m_89ab340[data-disabled] {
     --app-shell-header-offset: 0rem !important;
     --app-shell-navbar-offset: 0rem !important;
+    --app-shell-aside-offset: 0rem !important;
+    --app-shell-footer-offset: 0rem !important;
   }
   [data-mantine-color-scheme='light'] .m_89ab340 {
     --app-shell-border-color: var(--mantine-color-gray-3);

package/styles/Notification.css

@@ -35,10 +35,6 @@
     background-color: var(--mantine-color-dark-6);
 }
 
-  .m_a513464:where([data-with-icon]) {
-    padding-inline-start: var(--mantine-spacing-xs);
-  }
-
   .m_a513464:where([data-with-icon])::before {
       display: none;
     }

package/styles/Notification.layer.css

@@ -35,10 +35,6 @@
     background-color: var(--mantine-color-dark-6);
 }
 
-  .m_a513464:where([data-with-icon]) {
-    padding-inline-start: var(--mantine-spacing-xs);
-  }
-
   .m_a513464:where([data-with-icon])::before {
       display: none;
     }

package/styles/Paper.css

@@ -11,10 +11,14 @@
   background-color: var(--mantine-color-body);
 }
 
-  :where([data-mantine-color-scheme='light']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+  [data-mantine-color-scheme='light'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-gray-3);
 }
 
-  :where([data-mantine-color-scheme='dark']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+  [data-mantine-color-scheme='dark'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-dark-4);
 }
+
+  .m_1b7284a3:where([data-with-border]) {
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--paper-border-color);
+  }

package/styles/Paper.layer.css

@@ -11,11 +11,15 @@
   background-color: var(--mantine-color-body);
 }
 
-  :where([data-mantine-color-scheme='light']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+  [data-mantine-color-scheme='light'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-gray-3);
 }
 
-  :where([data-mantine-color-scheme='dark']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+  [data-mantine-color-scheme='dark'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-dark-4);
 }
+
+  .m_1b7284a3:where([data-with-border]) {
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--paper-border-color);
+  }
 }

package/styles/Table.css

@@ -102,9 +102,18 @@
 
 .m_b242d975:where([data-sticky]) {
     position: sticky;
-    background-color: var(--mantine-color-body);
   }
 
+.m_b242d975:where([data-sticky]) .m_4e7aa4f3 {
+      position: sticky;
+      top: var(--table-sticky-header-offset, 0);
+      background-color: var(--mantine-color-body);
+    }
+
+:where([data-with-table-border]) .m_b242d975[data-sticky] .m_4e7aa4f3 {
+  top: initial;
+}
+
 .m_9e5a3ac7 {
   color: var(--mantine-color-dimmed);
 }
@@ -123,4 +132,5 @@
 
 .m_62259741 {
   min-width: var(--table-min-width);
+  max-height: var(--table-max-height);
 }

package/styles/Table.layer.css

@@ -102,9 +102,18 @@
 
 .m_b242d975:where([data-sticky]) {
     position: sticky;
-    background-color: var(--mantine-color-body);
   }
 
+.m_b242d975:where([data-sticky]) .m_4e7aa4f3 {
+      position: sticky;
+      top: var(--table-sticky-header-offset, 0);
+      background-color: var(--mantine-color-body);
+    }
+
+:where([data-with-table-border]) .m_b242d975[data-sticky] .m_4e7aa4f3 {
+  top: initial;
+}
+
 .m_9e5a3ac7 {
   color: var(--mantine-color-dimmed);
 }
@@ -123,5 +132,6 @@
 
 .m_62259741 {
   min-width: var(--table-min-width);
+  max-height: var(--table-max-height);
 }
 }

package/styles/TypographyStylesProvider.css

@@ -7,6 +7,7 @@
   .m_d6493fad :where(h1, h2, h3, h4, h5, h6) {
     margin-bottom: var(--mantine-spacing-xs);
     text-wrap: var(--mantine-heading-text-wrap);
+    font-family: var(--mantine-font-family-headings);
   }
   .m_d6493fad :where(h1) {
     margin-top: calc(1.5 * var(--mantine-spacing-xl));

package/styles/TypographyStylesProvider.layer.css

@@ -7,6 +7,7 @@
   .m_d6493fad :where(h1, h2, h3, h4, h5, h6) {
     margin-bottom: var(--mantine-spacing-xs);
     text-wrap: var(--mantine-heading-text-wrap);
+    font-family: var(--mantine-font-family-headings);
   }
   .m_d6493fad :where(h1) {
     margin-top: calc(1.5 * var(--mantine-spacing-xl));

package/styles.css

@@ -817,14 +817,18 @@ fieldset:disabled .mantine-active:active {
   background-color: var(--mantine-color-body);
 }
 
-  :where([data-mantine-color-scheme='light']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+  [data-mantine-color-scheme='light'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-gray-3);
 }
 
-  :where([data-mantine-color-scheme='dark']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+  [data-mantine-color-scheme='dark'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-dark-4);
 }
 
+  .m_1b7284a3:where([data-with-border]) {
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--paper-border-color);
+  }
+
 .m_9814e45f {
   inset: 0;
   position: absolute;
@@ -2149,6 +2153,8 @@ fieldset:disabled .mantine-active:active {
   .m_89ab340[data-disabled] {
     --app-shell-header-offset: 0rem !important;
     --app-shell-navbar-offset: 0rem !important;
+    --app-shell-aside-offset: 0rem !important;
+    --app-shell-footer-offset: 0rem !important;
   }
   [data-mantine-color-scheme='light'] .m_89ab340 {
     --app-shell-border-color: var(--mantine-color-gray-3);
@@ -4828,10 +4834,6 @@ fieldset:disabled .m_d3ea56bb,
     background-color: var(--mantine-color-dark-6);
 }
 
-  .m_a513464:where([data-with-icon]) {
-    padding-inline-start: var(--mantine-spacing-xs);
-  }
-
   .m_a513464:where([data-with-icon])::before {
       display: none;
     }
@@ -6797,9 +6799,18 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 
 .m_b242d975:where([data-sticky]) {
     position: sticky;
-    background-color: var(--mantine-color-body);
   }
 
+.m_b242d975:where([data-sticky]) .m_4e7aa4f3 {
+      position: sticky;
+      top: var(--table-sticky-header-offset, 0);
+      background-color: var(--mantine-color-body);
+    }
+
+:where([data-with-table-border]) .m_b242d975[data-sticky] .m_4e7aa4f3 {
+  top: initial;
+}
+
 .m_9e5a3ac7 {
   color: var(--mantine-color-dimmed);
 }
@@ -6818,6 +6829,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 
 .m_62259741 {
   min-width: var(--table-min-width);
+  max-height: var(--table-max-height);
 }
 
 .m_bcaa9990 {
@@ -7485,6 +7497,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   .m_d6493fad :where(h1, h2, h3, h4, h5, h6) {
     margin-bottom: var(--mantine-spacing-xs);
     text-wrap: var(--mantine-heading-text-wrap);
+    font-family: var(--mantine-font-family-headings);
   }
   .m_d6493fad :where(h1) {
     margin-top: calc(1.5 * var(--mantine-spacing-xl));

package/styles.layer.css

@@ -817,14 +817,18 @@ fieldset:disabled .mantine-active:active {
   background-color: var(--mantine-color-body);
 }
 
-  :where([data-mantine-color-scheme='light']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+  [data-mantine-color-scheme='light'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-gray-3);
 }
 
-  :where([data-mantine-color-scheme='dark']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+  [data-mantine-color-scheme='dark'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-dark-4);
 }
 
+  .m_1b7284a3:where([data-with-border]) {
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--paper-border-color);
+  }
+
 .m_9814e45f {
   inset: 0;
   position: absolute;
@@ -2149,6 +2153,8 @@ fieldset:disabled .mantine-active:active {
   .m_89ab340[data-disabled] {
     --app-shell-header-offset: 0rem !important;
     --app-shell-navbar-offset: 0rem !important;
+    --app-shell-aside-offset: 0rem !important;
+    --app-shell-footer-offset: 0rem !important;
   }
   [data-mantine-color-scheme='light'] .m_89ab340 {
     --app-shell-border-color: var(--mantine-color-gray-3);
@@ -4828,10 +4834,6 @@ fieldset:disabled .m_d3ea56bb,
     background-color: var(--mantine-color-dark-6);
 }
 
-  .m_a513464:where([data-with-icon]) {
-    padding-inline-start: var(--mantine-spacing-xs);
-  }
-
   .m_a513464:where([data-with-icon])::before {
       display: none;
     }
@@ -6797,9 +6799,18 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 
 .m_b242d975:where([data-sticky]) {
     position: sticky;
-    background-color: var(--mantine-color-body);
   }
 
+.m_b242d975:where([data-sticky]) .m_4e7aa4f3 {
+      position: sticky;
+      top: var(--table-sticky-header-offset, 0);
+      background-color: var(--mantine-color-body);
+    }
+
+:where([data-with-table-border]) .m_b242d975[data-sticky] .m_4e7aa4f3 {
+  top: initial;
+}
+
 .m_9e5a3ac7 {
   color: var(--mantine-color-dimmed);
 }
@@ -6818,6 +6829,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 
 .m_62259741 {
   min-width: var(--table-min-width);
+  max-height: var(--table-max-height);
 }
 
 .m_bcaa9990 {
@@ -7485,6 +7497,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   .m_d6493fad :where(h1, h2, h3, h4, h5, h6) {
     margin-bottom: var(--mantine-spacing-xs);
     text-wrap: var(--mantine-heading-text-wrap);
+    font-family: var(--mantine-font-family-headings);
   }
   .m_d6493fad :where(h1) {
     margin-top: calc(1.5 * var(--mantine-spacing-xl));