@mantine/dates 7.17.1 → 8.0.0-alpha.1

package/styles.css

@@ -26,6 +26,193 @@
       color: var(--mantine-color-white);
     }
 
+.m_7a8f1e6d {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  overflow: hidden;
+}
+
+  :where([dir="rtl"]) .m_7a8f1e6d {
+    flex-direction: row-reverse;
+}
+
+.m_d6bb0a54 {
+  display: flex;
+  align-items: center;
+  height: calc(var(--input-height) - 15px);
+}
+
+.m_b97ecb26 {
+  display: flex;
+  flex-direction: column;
+}
+
+.m_31fe42f9 {
+  display: flex;
+  gap: calc(0.25rem * var(--mantine-scale));
+}
+
+.m_9c4817c3 {
+  padding: calc(0.25rem * var(--mantine-scale));
+}
+
+.m_154c536b {
+  text-align: center;
+  width: 2.5em;
+  height: 2em;
+  border-radius: var(--mantine-radius-default);
+  font-size: var(--control-font-size, var(--mantine-font-size-sm));
+}
+
+.m_154c536b:where([data-active]) {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+  }
+
+@media (hover: hover) {
+    .m_154c536b:hover:where(:not([data-active])) {
+      color: var(--mantine-color-bright);
+    }
+
+      :where([data-mantine-color-scheme='dark']) .m_154c536b:hover:where(:not([data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+
+      :where([data-mantine-color-scheme='light']) .m_154c536b:hover:where(:not([data-active])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+}
+
+@media (hover: none) {
+    .m_154c536b:active:where(:not([data-active])) {
+      color: var(--mantine-color-bright);
+    }
+
+      :where([data-mantine-color-scheme='dark']) .m_154c536b:active:where(:not([data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+
+      :where([data-mantine-color-scheme='light']) .m_154c536b:active:where(:not([data-active])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+}
+
+.m_7be09d0c {
+  text-align: center;
+  height: 2em;
+  padding-inline: 0.5em;
+  border-radius: var(--mantine-radius-default);
+  font-size: var(--control-font-size, var(--mantine-font-size-sm));
+}
+
+.m_7be09d0c:where([data-active]) {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+  }
+
+@media (hover: hover) {
+    .m_7be09d0c:hover:where(:not([data-active])) {
+      color: var(--mantine-color-bright);
+    }
+
+      :where([data-mantine-color-scheme='dark']) .m_7be09d0c:hover:where(:not([data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+
+      :where([data-mantine-color-scheme='light']) .m_7be09d0c:hover:where(:not([data-active])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+}
+
+@media (hover: none) {
+    .m_7be09d0c:active:where(:not([data-active])) {
+      color: var(--mantine-color-bright);
+    }
+
+      :where([data-mantine-color-scheme='dark']) .m_7be09d0c:active:where(:not([data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+
+      :where([data-mantine-color-scheme='light']) .m_7be09d0c:active:where(:not([data-active])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+}
+
+.m_7d00001d + .m_7d00001d {
+    margin-top: var(--mantine-spacing-sm);
+  }
+
+.m_d8d918d7 {
+  margin-bottom: calc(0.25rem * var(--mantine-scale));
+  color: var(--mantine-color-dimmed);
+  font-size: calc(var(--control-font-size, var(--mantine-font-size-sm)) - 2px);
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  padding-inline-start: calc(0.4375rem * var(--mantine-scale));
+}
+
+.m_d8d918d7::after {
+    content: '';
+    width: 100%;
+    height: calc(0.0625rem * var(--mantine-scale));
+    flex: 1;
+    margin-inline-start: var(--mantine-spacing-xs);
+  }
+
+:where([data-mantine-color-scheme='light']) .m_d8d918d7::after {
+      background-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_d8d918d7::after {
+      background-color: var(--mantine-color-dark-4);
+}
+
+.m_6b43ba88 {
+  width: calc(2ch + 0.3em);
+  caret-color: transparent;
+  font-variant-numeric: tabular-nums;
+  position: relative;
+  height: 100%;
+  line-height: 1;
+  padding-inline: 0.15em;
+  border: 0;
+  text-align: center;
+  text-align-last: center;
+  background-color: transparent;
+  color: var(--input-color);
+  border-radius: calc(0.125rem * var(--mantine-scale));
+  appearance: none;
+}
+
+.m_6b43ba88:where([data-am-pm]) {
+    width: calc(3ch + 0.3em);
+  }
+
+.m_6b43ba88:where(:disabled) {
+    cursor: not-allowed;
+  }
+
+.m_6b43ba88::selection {
+    background-color: transparent;
+  }
+
+.m_6b43ba88::placeholder {
+    opacity: 1;
+    color: inherit;
+  }
+
+.m_6b43ba88:focus {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+    outline: 0;
+  }
+
+.m_6b43ba88:focus::placeholder {
+      color: var(--mantine-color-white);
+    }
+
 .m_396ce5cb {
   --day-size-xs: calc(1.875rem * var(--mantine-scale));
   --day-size-sm: calc(2.25rem * var(--mantine-scale));
@@ -339,22 +526,26 @@
   cursor: pointer;
 }
 
+.m_f6645d97:where([data-static]), .m_2351eeb0:where([data-static]) {
+    cursor: default;
+  }
+
 @media (hover: hover) {
-      [data-mantine-color-scheme='light'] .m_f6645d97:hover:where(:not([data-disabled], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:hover:where(:not([data-disabled], :disabled)) {
+      [data-mantine-color-scheme='light'] .m_f6645d97:hover:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:hover:where(:not([data-disabled], [data-static], :disabled)) {
         background-color: var(--mantine-color-gray-0);
   }
 
-      [data-mantine-color-scheme='dark'] .m_f6645d97:hover:where(:not([data-disabled], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:hover:where(:not([data-disabled], :disabled)) {
+      [data-mantine-color-scheme='dark'] .m_f6645d97:hover:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:hover:where(:not([data-disabled], [data-static], :disabled)) {
         background-color: var(--mantine-color-dark-5);
   }
 }
 
 @media (hover: none) {
-      [data-mantine-color-scheme='light'] .m_f6645d97:active:where(:not([data-disabled], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:active:where(:not([data-disabled], :disabled)) {
+      [data-mantine-color-scheme='light'] .m_f6645d97:active:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:active:where(:not([data-disabled], [data-static], :disabled)) {
         background-color: var(--mantine-color-gray-0);
   }
 
-      [data-mantine-color-scheme='dark'] .m_f6645d97:active:where(:not([data-disabled], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:active:where(:not([data-disabled], :disabled)) {
+      [data-mantine-color-scheme='dark'] .m_f6645d97:active:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:active:where(:not([data-disabled], [data-static], :disabled)) {
         background-color: var(--mantine-color-dark-5);
   }
 }
@@ -420,3 +611,49 @@
   flex: 1;
   margin-inline-end: var(--mantine-spacing-md);
 }
+
+.m_ac3f4d63 {
+  text-align: center;
+  padding-inline: 1em;
+  padding-block: 0.25em;
+  border: 1px solid var(--mantine-color-default-border);
+  background-color: var(--mantine-color-default);
+  color: var(--mantine-color-default-color);
+  border-radius: var(--time-grid-radius, var(--mantine-radius-default));
+  font-size: var(--time-grid-fz, var(--mantine-font-size-sm));
+}
+
+  @media (hover: hover) {
+    .m_ac3f4d63:hover:where(:not([data-disabled])) {
+      background-color: var(--mantine-color-default-hover);
+    }
+}
+
+  @media (hover: none) {
+    .m_ac3f4d63:active:where(:not([data-disabled])) {
+      background-color: var(--mantine-color-default-hover);
+    }
+}
+
+  .m_ac3f4d63:where([data-active]) {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+    border-color: transparent;
+  }
+
+  @media (hover: hover) {
+      .m_ac3f4d63:where([data-active]):hover:where(:not([data-disabled])) {
+        background-color: var(--mantine-primary-color-filled-hover);
+      }
+}
+
+  @media (hover: none) {
+      .m_ac3f4d63:where([data-active]):active:where(:not([data-disabled])) {
+        background-color: var(--mantine-primary-color-filled-hover);
+      }
+}
+
+  .m_ac3f4d63:where(:disabled, [data-disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }

package/styles.layer.css

@@ -26,6 +26,193 @@
       color: var(--mantine-color-white);
     }
 
+.m_7a8f1e6d {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  overflow: hidden;
+}
+
+  :where([dir="rtl"]) .m_7a8f1e6d {
+    flex-direction: row-reverse;
+}
+
+.m_d6bb0a54 {
+  display: flex;
+  align-items: center;
+  height: calc(var(--input-height) - 15px);
+}
+
+.m_b97ecb26 {
+  display: flex;
+  flex-direction: column;
+}
+
+.m_31fe42f9 {
+  display: flex;
+  gap: calc(0.25rem * var(--mantine-scale));
+}
+
+.m_9c4817c3 {
+  padding: calc(0.25rem * var(--mantine-scale));
+}
+
+.m_154c536b {
+  text-align: center;
+  width: 2.5em;
+  height: 2em;
+  border-radius: var(--mantine-radius-default);
+  font-size: var(--control-font-size, var(--mantine-font-size-sm));
+}
+
+.m_154c536b:where([data-active]) {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+  }
+
+@media (hover: hover) {
+    .m_154c536b:hover:where(:not([data-active])) {
+      color: var(--mantine-color-bright);
+    }
+
+      :where([data-mantine-color-scheme='dark']) .m_154c536b:hover:where(:not([data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+
+      :where([data-mantine-color-scheme='light']) .m_154c536b:hover:where(:not([data-active])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+}
+
+@media (hover: none) {
+    .m_154c536b:active:where(:not([data-active])) {
+      color: var(--mantine-color-bright);
+    }
+
+      :where([data-mantine-color-scheme='dark']) .m_154c536b:active:where(:not([data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+
+      :where([data-mantine-color-scheme='light']) .m_154c536b:active:where(:not([data-active])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+}
+
+.m_7be09d0c {
+  text-align: center;
+  height: 2em;
+  padding-inline: 0.5em;
+  border-radius: var(--mantine-radius-default);
+  font-size: var(--control-font-size, var(--mantine-font-size-sm));
+}
+
+.m_7be09d0c:where([data-active]) {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+  }
+
+@media (hover: hover) {
+    .m_7be09d0c:hover:where(:not([data-active])) {
+      color: var(--mantine-color-bright);
+    }
+
+      :where([data-mantine-color-scheme='dark']) .m_7be09d0c:hover:where(:not([data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+
+      :where([data-mantine-color-scheme='light']) .m_7be09d0c:hover:where(:not([data-active])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+}
+
+@media (hover: none) {
+    .m_7be09d0c:active:where(:not([data-active])) {
+      color: var(--mantine-color-bright);
+    }
+
+      :where([data-mantine-color-scheme='dark']) .m_7be09d0c:active:where(:not([data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+
+      :where([data-mantine-color-scheme='light']) .m_7be09d0c:active:where(:not([data-active])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+}
+
+.m_7d00001d + .m_7d00001d {
+    margin-top: var(--mantine-spacing-sm);
+  }
+
+.m_d8d918d7 {
+  margin-bottom: calc(0.25rem * var(--mantine-scale));
+  color: var(--mantine-color-dimmed);
+  font-size: calc(var(--control-font-size, var(--mantine-font-size-sm)) - 2px);
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  padding-inline-start: calc(0.4375rem * var(--mantine-scale));
+}
+
+.m_d8d918d7::after {
+    content: '';
+    width: 100%;
+    height: calc(0.0625rem * var(--mantine-scale));
+    flex: 1;
+    margin-inline-start: var(--mantine-spacing-xs);
+  }
+
+:where([data-mantine-color-scheme='light']) .m_d8d918d7::after {
+      background-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_d8d918d7::after {
+      background-color: var(--mantine-color-dark-4);
+}
+
+.m_6b43ba88 {
+  width: calc(2ch + 0.3em);
+  caret-color: transparent;
+  font-variant-numeric: tabular-nums;
+  position: relative;
+  height: 100%;
+  line-height: 1;
+  padding-inline: 0.15em;
+  border: 0;
+  text-align: center;
+  text-align-last: center;
+  background-color: transparent;
+  color: var(--input-color);
+  border-radius: calc(0.125rem * var(--mantine-scale));
+  appearance: none;
+}
+
+.m_6b43ba88:where([data-am-pm]) {
+    width: calc(3ch + 0.3em);
+  }
+
+.m_6b43ba88:where(:disabled) {
+    cursor: not-allowed;
+  }
+
+.m_6b43ba88::selection {
+    background-color: transparent;
+  }
+
+.m_6b43ba88::placeholder {
+    opacity: 1;
+    color: inherit;
+  }
+
+.m_6b43ba88:focus {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+    outline: 0;
+  }
+
+.m_6b43ba88:focus::placeholder {
+      color: var(--mantine-color-white);
+    }
+
 .m_396ce5cb {
   --day-size-xs: calc(1.875rem * var(--mantine-scale));
   --day-size-sm: calc(2.25rem * var(--mantine-scale));
@@ -339,22 +526,26 @@
   cursor: pointer;
 }
 
+.m_f6645d97:where([data-static]), .m_2351eeb0:where([data-static]) {
+    cursor: default;
+  }
+
 @media (hover: hover) {
-      [data-mantine-color-scheme='light'] .m_f6645d97:hover:where(:not([data-disabled], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:hover:where(:not([data-disabled], :disabled)) {
+      [data-mantine-color-scheme='light'] .m_f6645d97:hover:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:hover:where(:not([data-disabled], [data-static], :disabled)) {
         background-color: var(--mantine-color-gray-0);
   }
 
-      [data-mantine-color-scheme='dark'] .m_f6645d97:hover:where(:not([data-disabled], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:hover:where(:not([data-disabled], :disabled)) {
+      [data-mantine-color-scheme='dark'] .m_f6645d97:hover:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:hover:where(:not([data-disabled], [data-static], :disabled)) {
         background-color: var(--mantine-color-dark-5);
   }
 }
 
 @media (hover: none) {
-      [data-mantine-color-scheme='light'] .m_f6645d97:active:where(:not([data-disabled], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:active:where(:not([data-disabled], :disabled)) {
+      [data-mantine-color-scheme='light'] .m_f6645d97:active:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:active:where(:not([data-disabled], [data-static], :disabled)) {
         background-color: var(--mantine-color-gray-0);
   }
 
-      [data-mantine-color-scheme='dark'] .m_f6645d97:active:where(:not([data-disabled], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:active:where(:not([data-disabled], :disabled)) {
+      [data-mantine-color-scheme='dark'] .m_f6645d97:active:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:active:where(:not([data-disabled], [data-static], :disabled)) {
         background-color: var(--mantine-color-dark-5);
   }
 }
@@ -420,4 +611,50 @@
   flex: 1;
   margin-inline-end: var(--mantine-spacing-md);
 }
+
+.m_ac3f4d63 {
+  text-align: center;
+  padding-inline: 1em;
+  padding-block: 0.25em;
+  border: 1px solid var(--mantine-color-default-border);
+  background-color: var(--mantine-color-default);
+  color: var(--mantine-color-default-color);
+  border-radius: var(--time-grid-radius, var(--mantine-radius-default));
+  font-size: var(--time-grid-fz, var(--mantine-font-size-sm));
+}
+
+  @media (hover: hover) {
+    .m_ac3f4d63:hover:where(:not([data-disabled])) {
+      background-color: var(--mantine-color-default-hover);
+    }
+}
+
+  @media (hover: none) {
+    .m_ac3f4d63:active:where(:not([data-disabled])) {
+      background-color: var(--mantine-color-default-hover);
+    }
+}
+
+  .m_ac3f4d63:where([data-active]) {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+    border-color: transparent;
+  }
+
+  @media (hover: hover) {
+      .m_ac3f4d63:where([data-active]):hover:where(:not([data-disabled])) {
+        background-color: var(--mantine-primary-color-filled-hover);
+      }
+}
+
+  @media (hover: none) {
+      .m_ac3f4d63:where([data-active]):active:where(:not([data-disabled])) {
+        background-color: var(--mantine-primary-color-filled-hover);
+      }
+}
+
+  .m_ac3f4d63:where(:disabled, [data-disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }