@mantine/core 9.6.3 → 9.7.0

package/styles/AppShell.css

@@ -176,6 +176,7 @@
   padding-bottom: env(safe-area-inset-bottom);
   transform: var(--app-shell-footer-transform);
   z-index: var(--app-shell-footer-z-index);
+  --app-shell-footer-safe-area: env(safe-area-inset-bottom);
 }
 
 :where([data-mode='static']) .m_3840c879 {
@@ -199,3 +200,70 @@
 .m_6dcfc7c7:where([data-grow]) {
     flex-grow: 1;
   }
+
+.m_3b25945a {
+  position: absolute;
+  z-index: 1;
+  outline: none;
+  touch-action: none;
+  background-color: transparent;
+}
+
+.m_3b25945a::after {
+    content: '';
+    position: absolute;
+    background-color: transparent;
+    transition: background-color 100ms ease;
+  }
+
+.m_3b25945a:where(:hover, [data-active])::after, .m_3b25945a:where(:focus-visible)::after {
+    background-color: var(--mantine-primary-color-filled);
+  }
+
+.m_3b25945a:where([data-orientation='vertical']) {
+    top: 0;
+    bottom: 0;
+    width: var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale)));
+    cursor: col-resize;
+  }
+
+.m_3b25945a:where([data-orientation='vertical'])::after {
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: calc(0.125rem * var(--mantine-scale));
+      transform: translateX(-50%);
+    }
+
+.m_3b25945a:where([data-orientation='horizontal']) {
+    inset-inline: 0;
+    height: var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale)));
+    cursor: row-resize;
+  }
+
+.m_3b25945a:where([data-orientation='horizontal'])::after {
+      inset-inline: 0;
+      top: 50%;
+      height: calc(0.125rem * var(--mantine-scale));
+      transform: translateY(-50%);
+    }
+
+.m_3b25945a:where([data-section='navbar']) {
+    inset-inline-end: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-navbar-resize-handle-display, block);
+  }
+
+.m_3b25945a:where([data-section='aside']) {
+    inset-inline-start: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-aside-resize-handle-display, block);
+  }
+
+.m_3b25945a:where([data-section='header']) {
+    bottom: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-header-resize-handle-display, block);
+  }
+
+.m_3b25945a:where([data-section='footer']) {
+    top: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-footer-resize-handle-display, block);
+  }

package/styles/AppShell.layer.css

@@ -176,6 +176,7 @@
   padding-bottom: env(safe-area-inset-bottom);
   transform: var(--app-shell-footer-transform);
   z-index: var(--app-shell-footer-z-index);
+  --app-shell-footer-safe-area: env(safe-area-inset-bottom);
 }
 
 :where([data-mode='static']) .m_3840c879 {
@@ -199,4 +200,71 @@
 .m_6dcfc7c7:where([data-grow]) {
     flex-grow: 1;
   }
+
+.m_3b25945a {
+  position: absolute;
+  z-index: 1;
+  outline: none;
+  touch-action: none;
+  background-color: transparent;
+}
+
+.m_3b25945a::after {
+    content: '';
+    position: absolute;
+    background-color: transparent;
+    transition: background-color 100ms ease;
+  }
+
+.m_3b25945a:where(:hover, [data-active])::after, .m_3b25945a:where(:focus-visible)::after {
+    background-color: var(--mantine-primary-color-filled);
+  }
+
+.m_3b25945a:where([data-orientation='vertical']) {
+    top: 0;
+    bottom: 0;
+    width: var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale)));
+    cursor: col-resize;
+  }
+
+.m_3b25945a:where([data-orientation='vertical'])::after {
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: calc(0.125rem * var(--mantine-scale));
+      transform: translateX(-50%);
+    }
+
+.m_3b25945a:where([data-orientation='horizontal']) {
+    inset-inline: 0;
+    height: var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale)));
+    cursor: row-resize;
+  }
+
+.m_3b25945a:where([data-orientation='horizontal'])::after {
+      inset-inline: 0;
+      top: 50%;
+      height: calc(0.125rem * var(--mantine-scale));
+      transform: translateY(-50%);
+    }
+
+.m_3b25945a:where([data-section='navbar']) {
+    inset-inline-end: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-navbar-resize-handle-display, block);
+  }
+
+.m_3b25945a:where([data-section='aside']) {
+    inset-inline-start: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-aside-resize-handle-display, block);
+  }
+
+.m_3b25945a:where([data-section='header']) {
+    bottom: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-header-resize-handle-display, block);
+  }
+
+.m_3b25945a:where([data-section='footer']) {
+    top: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-footer-resize-handle-display, block);
+  }
 }

package/styles/Checkbox.css

@@ -17,6 +17,10 @@
     --checkbox-icon-color: var(--checkbox-color);
   }
 
+  .m_bf2d988c:where([data-variant='light']) {
+    --checkbox-icon-color: var(--checkbox-color);
+  }
+
 .m_26062bec {
   position: relative;
   width: var(--checkbox-size);
@@ -79,6 +83,22 @@
       color: var(--mantine-color-disabled-color);
     }
 
+.m_595ab216 + .m_bf295423 {
+    color: var(--checkbox-color);
+  }
+
+.m_595ab216[data-indeterminate]:not(:disabled),
+  .m_595ab216:checked:not(:disabled) {
+    background-color: var(--checkbox-bg);
+    border-color: transparent;
+  }
+
+.m_595ab216[data-indeterminate]:not(:disabled) + .m_bf295423, .m_595ab216:checked:not(:disabled) + .m_bf295423 {
+      color: var(--checkbox-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
 .m_215c4542 + .m_bf295423 {
     color: var(--checkbox-color);
   }

package/styles/Checkbox.layer.css

@@ -17,6 +17,10 @@
     --checkbox-icon-color: var(--checkbox-color);
   }
 
+  .m_bf2d988c:where([data-variant='light']) {
+    --checkbox-icon-color: var(--checkbox-color);
+  }
+
 .m_26062bec {
   position: relative;
   width: var(--checkbox-size);
@@ -79,6 +83,22 @@
       color: var(--mantine-color-disabled-color);
     }
 
+.m_595ab216 + .m_bf295423 {
+    color: var(--checkbox-color);
+  }
+
+.m_595ab216[data-indeterminate]:not(:disabled),
+  .m_595ab216:checked:not(:disabled) {
+    background-color: var(--checkbox-bg);
+    border-color: transparent;
+  }
+
+.m_595ab216[data-indeterminate]:not(:disabled) + .m_bf295423, .m_595ab216:checked:not(:disabled) + .m_bf295423 {
+      color: var(--checkbox-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
 .m_215c4542 + .m_bf295423 {
     color: var(--checkbox-color);
   }

package/styles/CheckboxIndicator.css

@@ -17,6 +17,10 @@
     --checkbox-icon-color: var(--checkbox-color);
   }
 
+  .m_5e5256ee:where([data-variant='light']) {
+    --checkbox-icon-color: var(--checkbox-color);
+  }
+
   .m_5e5256ee {
 
   position: relative;
@@ -72,6 +76,18 @@
         color: var(--mantine-color-dark-3);
 }
 
+.m_193e54c8[data-indeterminate]:not([data-disabled]),
+  .m_193e54c8[data-checked]:not([data-disabled]) {
+    background-color: var(--checkbox-bg);
+    border-color: transparent;
+  }
+
+.m_193e54c8[data-indeterminate]:not([data-disabled]) > .m_1b1c543a, .m_193e54c8[data-checked]:not([data-disabled]) > .m_1b1c543a {
+      color: var(--checkbox-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
 .m_76e20374[data-indeterminate]:not([data-disabled]),
   .m_76e20374[data-checked]:not([data-disabled]) {
     background-color: transparent;

package/styles/CheckboxIndicator.layer.css

@@ -17,6 +17,10 @@
     --checkbox-icon-color: var(--checkbox-color);
   }
 
+  .m_5e5256ee:where([data-variant='light']) {
+    --checkbox-icon-color: var(--checkbox-color);
+  }
+
   .m_5e5256ee {
 
   position: relative;
@@ -72,6 +76,18 @@
         color: var(--mantine-color-dark-3);
 }
 
+.m_193e54c8[data-indeterminate]:not([data-disabled]),
+  .m_193e54c8[data-checked]:not([data-disabled]) {
+    background-color: var(--checkbox-bg);
+    border-color: transparent;
+  }
+
+.m_193e54c8[data-indeterminate]:not([data-disabled]) > .m_1b1c543a, .m_193e54c8[data-checked]:not([data-disabled]) > .m_1b1c543a {
+      color: var(--checkbox-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
 .m_76e20374[data-indeterminate]:not([data-disabled]),
   .m_76e20374[data-checked]:not([data-disabled]) {
     background-color: transparent;

package/styles/Dialog.css

@@ -10,6 +10,7 @@
   width: var(--dialog-size);
   max-width: calc(100vw - var(--mantine-spacing-xl) * 2);
   min-height: 50px;
+  padding: var(--mantine-spacing-md);
 }
 
 .m_5abab665 {

package/styles/Dialog.layer.css

@@ -10,6 +10,7 @@
   width: var(--dialog-size);
   max-width: calc(100vw - var(--mantine-spacing-xl) * 2);
   min-height: 50px;
+  padding: var(--mantine-spacing-md);
 }
 
 .m_5abab665 {

package/styles/Radio.css

@@ -94,6 +94,16 @@
     border-color: var(--mantine-color-error);
   }
 
+.m_99d09bcd:checked:not(:disabled) {
+    background-color: var(--radio-bg);
+    border-color: transparent;
+  }
+
+.m_99d09bcd:checked:not(:disabled) + .m_f3ed6b2b {
+      --radio-icon-opacity: 1;
+      --radio-icon-transform: none;
+    }
+
 .m_1bfe9d39 + .m_f3ed6b2b {
     --radio-icon-color: var(--radio-color);
   }

package/styles/Radio.layer.css

@@ -94,6 +94,16 @@
     border-color: var(--mantine-color-error);
   }
 
+.m_99d09bcd:checked:not(:disabled) {
+    background-color: var(--radio-bg);
+    border-color: transparent;
+  }
+
+.m_99d09bcd:checked:not(:disabled) + .m_f3ed6b2b {
+      --radio-icon-opacity: 1;
+      --radio-icon-transform: none;
+    }
+
 .m_1bfe9d39 + .m_f3ed6b2b {
     --radio-icon-color: var(--radio-color);
   }

package/styles/RadioIndicator.css

@@ -64,6 +64,17 @@
       color: var(--mantine-color-disabled-color);
     }
 
+.m_7eec72c0[data-checked]:not([data-disabled]) {
+    background-color: var(--radio-bg);
+    border-color: transparent;
+  }
+
+.m_7eec72c0[data-checked]:not([data-disabled]) > .m_3e4da632 {
+      color: var(--radio-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
 .m_2980836c[data-checked]:not([data-disabled]) {
     background-color: transparent;
     border-color: var(--radio-color);

package/styles/RadioIndicator.layer.css

@@ -64,6 +64,17 @@
       color: var(--mantine-color-disabled-color);
     }
 
+.m_7eec72c0[data-checked]:not([data-disabled]) {
+    background-color: var(--radio-bg);
+    border-color: transparent;
+  }
+
+.m_7eec72c0[data-checked]:not([data-disabled]) > .m_3e4da632 {
+      color: var(--radio-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
 .m_2980836c[data-checked]:not([data-disabled]) {
     background-color: transparent;
     border-color: var(--radio-color);

package/styles/Toggle.css

@@ -0,0 +1,98 @@
+.m_ba2e839b {
+  --toggle-size-xs: 22px;
+  --toggle-size-sm: 26px;
+  --toggle-size-md: 30px;
+  --toggle-size-lg: 36px;
+  --toggle-size-xl: 42px;
+
+  --toggle-size: var(--toggle-size-md);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid;
+  border-radius: var(--toggle-radius, var(--mantine-radius-default));
+  cursor: pointer;
+  appearance: none;
+  text-decoration: none;
+  line-height: 1;
+  user-select: none;
+  font-size: var(--mantine-font-size-xs);
+  width: var(--toggle-size);
+  min-width: var(--toggle-size);
+  height: var(--toggle-size);
+  padding: calc(var(--toggle-size) / 5);
+  font-weight: var(--mantine-font-weight-medium);
+}
+
+  .m_ba2e839b:where([data-auto-width]) {
+    width: auto;
+    padding: 0 calc(var(--toggle-size) / 4);
+  }
+
+  :where([data-mantine-color-scheme='light']) .m_ba2e839b {
+    background-color: var(--mantine-color-white);
+    border-color: var(--mantine-color-gray-4);
+    color: var(--mantine-color-gray-7);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_ba2e839b {
+    background-color: var(--mantine-color-dark-6);
+    border-color: var(--mantine-color-dark-4);
+    color: var(--mantine-color-dark-1);
+}
+
+  @media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_ba2e839b:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_ba2e839b:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+  @media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_ba2e839b:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_ba2e839b:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+  .m_ba2e839b:where([data-active]) {
+    background-color: var(--toggle-active-bg, var(--mantine-primary-color-light));
+    color: var(--toggle-active-color, var(--mantine-primary-color-light-color));
+    border-color: transparent;
+  }
+
+  @media (hover: hover) {
+      .m_ba2e839b:where([data-active]):hover:where(:not([data-disabled])) {
+        background-color: var(--toggle-active-hover, var(--mantine-primary-color-light-hover));
+      }
+}
+
+  @media (hover: none) {
+      .m_ba2e839b:where([data-active]):active:where(:not([data-disabled])) {
+        background-color: var(--toggle-active-hover, var(--mantine-primary-color-light-hover));
+      }
+}
+
+  .m_ba2e839b:where([data-disabled]) {
+    cursor: not-allowed;
+    color: var(--mantine-color-disabled-color);
+    background-color: var(--mantine-color-disabled);
+    border-color: transparent;
+  }
+
+  :where([data-mantine-color-scheme='light']) .m_ba2e839b:where([data-disabled][data-active]) {
+      background-color: var(--mantine-color-gray-4);
+      color: var(--mantine-color-gray-6);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_ba2e839b:where([data-disabled][data-active]) {
+      background-color: var(--mantine-color-dark-4);
+      color: var(--mantine-color-dark-2);
+}

package/styles/Toggle.layer.css

@@ -0,0 +1,99 @@
+@layer mantine {.m_ba2e839b {
+  --toggle-size-xs: 22px;
+  --toggle-size-sm: 26px;
+  --toggle-size-md: 30px;
+  --toggle-size-lg: 36px;
+  --toggle-size-xl: 42px;
+
+  --toggle-size: var(--toggle-size-md);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid;
+  border-radius: var(--toggle-radius, var(--mantine-radius-default));
+  cursor: pointer;
+  appearance: none;
+  text-decoration: none;
+  line-height: 1;
+  user-select: none;
+  font-size: var(--mantine-font-size-xs);
+  width: var(--toggle-size);
+  min-width: var(--toggle-size);
+  height: var(--toggle-size);
+  padding: calc(var(--toggle-size) / 5);
+  font-weight: var(--mantine-font-weight-medium);
+}
+
+  .m_ba2e839b:where([data-auto-width]) {
+    width: auto;
+    padding: 0 calc(var(--toggle-size) / 4);
+  }
+
+  :where([data-mantine-color-scheme='light']) .m_ba2e839b {
+    background-color: var(--mantine-color-white);
+    border-color: var(--mantine-color-gray-4);
+    color: var(--mantine-color-gray-7);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_ba2e839b {
+    background-color: var(--mantine-color-dark-6);
+    border-color: var(--mantine-color-dark-4);
+    color: var(--mantine-color-dark-1);
+}
+
+  @media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_ba2e839b:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_ba2e839b:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+  @media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_ba2e839b:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_ba2e839b:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+  .m_ba2e839b:where([data-active]) {
+    background-color: var(--toggle-active-bg, var(--mantine-primary-color-light));
+    color: var(--toggle-active-color, var(--mantine-primary-color-light-color));
+    border-color: transparent;
+  }
+
+  @media (hover: hover) {
+      .m_ba2e839b:where([data-active]):hover:where(:not([data-disabled])) {
+        background-color: var(--toggle-active-hover, var(--mantine-primary-color-light-hover));
+      }
+}
+
+  @media (hover: none) {
+      .m_ba2e839b:where([data-active]):active:where(:not([data-disabled])) {
+        background-color: var(--toggle-active-hover, var(--mantine-primary-color-light-hover));
+      }
+}
+
+  .m_ba2e839b:where([data-disabled]) {
+    cursor: not-allowed;
+    color: var(--mantine-color-disabled-color);
+    background-color: var(--mantine-color-disabled);
+    border-color: transparent;
+  }
+
+  :where([data-mantine-color-scheme='light']) .m_ba2e839b:where([data-disabled][data-active]) {
+      background-color: var(--mantine-color-gray-4);
+      color: var(--mantine-color-gray-6);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_ba2e839b:where([data-disabled][data-active]) {
+      background-color: var(--mantine-color-dark-4);
+      color: var(--mantine-color-dark-2);
+}
+}