@itcase/ui 1.0.15 → 1.0.17

package/dist/css/components/DatePicker/DatePicker.css

@@ -721,109 +721,155 @@
   vertical-align: -0.125em;
 }
 .react-datepicker {
-  background: var(--date-picker-container-background);
-  border-radius: var(--date-picker-month-border-radius);
-  border: none;
-  box-shadow: var(--date-picker-container-box-shadow);
-  &-popper {
-    z-index: 1000 !important;
-  }
+  background: var(--date-picker-background);
+  border-radius: var(--date-picker-border-radius);
+  border: var(--date-picker-border);
+  box-shadow: var(--date-picker-box-shadow);
+  font-size: inherit;
   &__triangle {
     display: none;
   }
-  &__header {
-    padding: 0;
-    background-color: var(--date-picker-container-background);
-    border-bottom: none;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    &--div {
-      display: flex;
-      justify-content: space-between;
-    }
-    &--time {
-      padding: 0;
+  &-wrapper {
+    width: 100%;
+    ^&-popper {
+      z-index: 1000 !important;
     }
   }
   &__month {
     margin: 0;
-    background-color: var(--date-picker-container-background);
     &-container {
       margin: 0;
-      padding: var(--date-picker-container-padding);
-    }
-  }
-  &__data {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-  &__month {
-    &:first-letter {
-      text-transform: uppercase;
-    }
-  }
-  &__day {
-    margin: 0;
-    min-width: var(--date-picker-day-width);
-    max-height: var(--date-picker-day-height);
-    border-radius: var(--date-picker-day-border-radius);
-    & .button__wrapper {
-      padding: 0;
-    }
-    &:has(button) {
-      padding: var(--date-picker-day-padding);
-    }
-    &:hover {
-      background: var(--date-picker-day-background-hover);
-      color: var(--date-picker-day-color-hover);
-    }
-    &-names {
-      margin: 0;
-    }
-    &-name {
-      margin: 0;
-      padding: var(--date-picker-day-padding);
-      min-width: var(--date-picker-day-width);
-      max-height: var(--date-picker-day-height);
-      color: var(--date-picker-name-color);
-      font-size: var(--date-picker-name-size);
-    }
-    &--selected {
-      background: var(--date-picker-selected-background);
-      ^^^& .button__label {
-        color: var(--date-picker-selected-color);
-      }
-    }
-    &--selected:hover,
-    &--in-range:hover {
-      background: var(--date-picker-selected-background-hover);
-    }
-    &--outside-month {
-      ^^^& .button__label {
-        color: var(--date-picker-outside-color);
-      }
-    }
-    &--weekend {
-      ^^^& .button__label {
-        color: var(--date-picker-weekend-color);
-      }
-    }
-    &--outside-month&--weekend {
-      ^^^& .button__label {
-        color: var(--date-picker-outside-weekend-color);
-      }
-    }
-    &--in-range {
-      background: var(--date-picker-selected-background);
-      ^^^& .button__label {
-        color: var(--date-picker-selected-color);
+      padding: var(--date-picker-padding);
+      ^^&__header {
+        padding: 0;
+        border-bottom: none;
+        border-radius: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        background-color: transparent;
+        &--div {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          ^^^^&__data {
+            flex: 1;
+            justify-content: center;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            ^^^^^&__month {
+              &:first-letter {
+                text-transform: uppercase;
+              }
+            }
+          }
+        }
+        &--time {
+          padding: 0;
+        }
+        ^^^&__day {
+          &-names {
+            margin: 0;
+            display: flex;
+          }
+          &-name {
+            display: flex;
+            width: var(--date-picker-day-width);
+            height: var(--date-picker-day-height);
+            margin: 0;
+            justify-content: center;
+            align-items: center;
+            line-height: normal;
+          }
+        }
       }
-    }
-    &--in-range&--weekend {
-      ^^^& .button__label {
-        color: var(--date-picker-weekend-color);
+      ^^&__month {
+        ^^^&__week {
+          display: flex;
+          ^^^^&__day {
+            width: var(--date-picker-day-width);
+            height: var(--date-picker-day-height);
+            margin: 0;
+            border-radius: var(--date-picker-day-border-radius);
+            &:hover {
+              background: var(--date-picker-day-hover-background);
+              color: var(--date-picker-day-hover-text-color);
+            }
+            &--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range) {
+              background: var(--date-picker-day-selected-background);
+              & .button__label {
+                color: var(--date-picker-day-selected-text-color);
+              }
+            }
+            &--in-range {
+              border-radius: 0;
+              background: var(--date-picker-day-selected-background);
+              & .button__label {
+                color: var(--date-picker-day-selected-text-color);
+              }
+              &:hover {
+                background: var(--date-picker-day-selected-background) !important;
+                & .button__label {
+                  color: var(--date-picker-day-selected-text-color) !important;
+                }
+              }
+            }
+            &--in-selecting-range,
+            &--selecting-range,
+            &--range {
+              background-color: var(--date-picker-day-range-background) !important;
+              border-radius: var(--date-picker-day-range-border-radius) !important;
+              & .button__label {
+                color: var(--date-picker-day-range-text-color) !important;
+              }
+              &-start {
+                border-radius: var(--date-picker-day-range-start-border-radius) !important;
+                &:hover {
+                  border-radius: var(--date-picker-day-range-start-border-radius) !important;
+                }
+              }
+              &-end {
+                border-radius: var(--date-picker-day-range-end-border-radius) !important;
+                &:hover {
+                  border-radius: var(--date-picker-day-range-end-border-radius) !important;
+                }
+              }
+            }
+            &--today {
+              background: var(--date-picker-day-today-background);
+              & .button__label {
+                color: var(--date-picker-day-today-text-color);
+              }
+            }
+            &--today.react-datepicker__day--selecting-range-start.react-datepicker__day--selecting-range-end {
+              border-radius: var(--date-picker-day-border-radius) !important;
+              background: var(--date-picker-day-today-background);
+              & .button__label {
+                color: var(--date-picker-day-today-text-color);
+              }
+            }
+            &--keyboard-selected {
+              background: transparent;
+            }
+            &--selected {
+              background: var(--date-picker-day-selected-background);
+              & .button__label {
+                color: var(--date-picker-day-selected-text-color);
+              }
+            }
+            &--outside-month {
+              background: var(--date-picker-day-outside-background) !important;
+              & .button__label {
+                color: var(--date-picker-day-outside-text-color) !important;
+              }
+            }
+            &-button {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
       }
     }
   }
@@ -842,13 +888,16 @@
       height: 300px !important;
       &-item {
         border-radius: var(--date-picker-day-border-radius);
-        font-size: 18px;
+        font-size: var(--date-picker-name-size);
+        line-height: 30px;
         max-height: var(--date-picker-height);
         &:hover {
           background: var(--date-picker-day-background-hover) !important;
         }
         &--selected {
           background: var(--date-picker-selected-background) !important;
+          color: var(--date-picker-selected-color) !important;
+          font-weight: var(--date-picker-selected-weight) !important;
         }
         &--selected:hover {
           background: var(--date-picker-selected-background-hover) !important;
@@ -885,16 +934,32 @@
   }
 }
 .datepicker {
+  width: 100%;
   border-radius: var(--date-picker-day-border-radius);
   ^^^^^& .input {
     border-radius: var(--date-picker-day-border-radius);
   }
 }
-.datepicker {
-  &&_type_multiple-months {
-    & .react-datepicker {
-      &__month-container {
-        border: solid 2px red;
+.datepicker_type_multiple-months {
+  & .react-datepicker {
+    &__month-container {
+      &:nth-last-child(2) {
+        & .react-datepicker__header--div {
+          & .react-datepicker__icon {
+            &:last-child {
+              display: none;
+            }
+          }
+        }
+      }
+      &:last-child {
+        & .react-datepicker__header--div {
+          & .react-datepicker__icon {
+            &:first-child {
+              display: none;
+            }
+          }
+        }
       }
     }
   }
@@ -916,6 +981,7 @@
   --date-picker-name-size: 18px;
   --date-picker-name-weight: 400;
   --date-picker-selected-color: var(--color-accent-text-primary);
+  --date-picker-selected-weight: 400;
   --date-picker-selected-background: var(--color-accent-primary);
   --date-picker-selected-background-hover: var(--color-accent-primary-hover);
   --date-picker-outside-color: var(--color-surface-text-quaternary);

package/dist/css/components/Empty/Empty.css

@@ -4,6 +4,8 @@
   justify-content: center;
   align-items: center;
   gap: 32px;
+  align-self: center;
+  margin-top: 200px;
   &__message {
     text-align: center;
   }

package/dist/css/components/Grid/Grid.css

@@ -1,4 +1,5 @@
 .grid {
+  display: grid;
   width: 100%;
   position: relative;
   &__before {

package/dist/css/components/Loader/Loader.css

@@ -3,8 +3,10 @@
   display: flex;
   flex-flow: column wrap;
   align-items: center;
+  justify-content: center;
   &__inner {
     position: relative;
+    display: flex;
   }
   &__text {
   }

package/dist/css/components/Notification/Notification.css

@@ -1,18 +1,61 @@
 .notification {
-  &__item {
-    padding: 12px;
-    &-text {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-    }
-  }
 }
 .notification {
   &&_type_global {
-    position: absolute;
-    left: 0;
+    position: fixed;
+    right: 0;
     top: 0;
+    padding: 0;
+    background: none;
+    z-index: 1000;
+    ^&__wrapper {
+      width: 100%;
+      align-items: flex-end;
+      display: flex;
+    }
+  }
+}
+.notification__item {
+  &_set {
+    &_float {
+      width: 320px;
+      margin: 16px 24px;
+    }
+  }
+}
+.notification__item {
+  &_status {
+    &_success {
+      ^^&-wrapper {
+        border-radius: 8px;
+        @mixin elevation-8;
+        padding: 12px 16px;
+        background: var(--color-success-primary);
+        ^^^&-title {
+          color: var(--color-success-text-secondary);
+          @mixin h5;
+        }
+        ^^^&-text {
+          color: var(--color-success-text-secondary);
+          @mixin text-s;
+        }
+      }
+    }
+    &_error {
+      ^^&-wrapper {
+        border-radius: 8px;
+        @mixin elevation-8;
+        padding: 12px 16px;
+        background: var(--color-error-primary);
+        ^^^&-title {
+          color: var(--color-error-text-secondary);
+          @mixin h5;
+        }
+        ^^^&-text {
+          color: var(--color-error-text-secondary);
+          @mixin text-s;
+        }
+      }
+    }
   }
 }

package/dist/css/components/Search/Search.css

@@ -35,6 +35,7 @@
     grid-column: 1/3;
     grid-row-start: 1;
     z-index: 2;
+    padding: 1.25px 0 !important;
     &:focus {
       outline: 0;
     }
@@ -65,7 +66,7 @@
     z-index: 2;
   }
   &&_state_focus,
-  &&_state_filled, {
+  &&_state_filled {
     ^&__input {
       &-wrapper {
         left: 0;

package/dist/css/components/Search/css/search-input/search-input.css

@@ -24,6 +24,7 @@
     grid-column: 1/3;
     grid-row-start: 1;
     z-index: 2;
+    padding: 1.25px 0 !important;
     &:focus {
       outline: 0;
     }
@@ -54,7 +55,7 @@
     z-index: 2;
   }
   &&_state_focus,
-  &&_state_filled, {
+  &&_state_filled {
     ^&__input {
       &-wrapper {
         left: 0;

package/dist/css/components/Segmented/Segmented.css

@@ -24,6 +24,7 @@
         min-width: 120px;
         position: relative;
         display: flex;
+        align-items: center;
         &::after {
           width: 1px;
           height: 100%;
@@ -33,7 +34,7 @@
           top: 0;
           right: 0;
         }
-        &:nth-last-child(-n+2) {
+        &:nth-last-child(-n + 2) {
           &::after {
             display: none;
           }

package/dist/css/components/Select/Select.css

@@ -1,4 +1,5 @@
 .select {
+  width: 100%;
   position: relative;
   min-width: 240px;
 }
@@ -185,6 +186,13 @@
   }
 }
 
+.select__multi-value {
+  &-wrapper {
+    padding: 4px 6px;
+    border-radius: 6px;
+  }
+}
+
 .select {
   &__option {
     display: flex;
@@ -257,6 +265,10 @@
     flex-wrap: wrap;
     align-items: center;
     &--is-multi {
+      gap: 8px;
+      & .select__input-container {
+        display: none;
+      }
     }
   }
 }

package/dist/css/components/Select/css/__multi-value/select__multi-value.css

@@ -0,0 +1,6 @@
+.select__multi-value {
+  &-wrapper {
+    padding: 4px 6px;
+    border-radius: 6px;
+  }
+}

package/dist/css/components/Select/css/__value-container/select__value-container.css

@@ -7,6 +7,10 @@
     flex-wrap: wrap;
     align-items: center;
     &--is-multi {
+      gap: 8px;
+      & .select__input-container {
+        display: none;
+      }
     }
   }
 }

package/dist/css/components/Switch/Switch.css

@@ -55,14 +55,21 @@
   }
 }
 .switch {
-  &_size {
-    &_normal {
-      min-width: 52px;
-      min-height: 32px;
-    }
-    &_compact {
-      min-width: 40px;
-      min-height: 24px;
+  &&_size {
+    @each $size in normal, compact {
+      &_$(size) {
+        min-width: var(--switch-size-$(size)-width);
+        min-height: var(--switch-size-$(size)-height);
+        max-width: var(--switch-size-$(size)-width);
+        max-height: var(--switch-size-$(size)-height);
+      }
     }
   }
 }
+:root {
+  --switch-size-normal-width: 52px;
+  --switch-size-normal-height: 32px;
+
+  --switch-size-compact-width: 40px;
+  --switch-size-compact-height: 24px;
+}

package/dist/css/components/Tab/Tab.css

@@ -28,7 +28,7 @@
   &_size {
     @each $size in normal, compact {
       &_$(size) {
-        ^^&__label {
+        ^^&__wrapper {
           padding: var(--tab-size-$(size)-padding);
           gap: var(--tab-size-$(size)-gap);
         }
@@ -38,6 +38,23 @@
 }
 .tab-group {
   position: relative;
+  display: flex;
+  align-items: stretch;
+  & .tab {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-end;
+    &__wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+    }
+    &__label {
+      flex: 1;
+      display: flex;
+    }
+  }
 }
 :root {
   --tab-size-normal-padding: 10px;

package/dist/css/components/Textarea/Textarea.css

@@ -14,9 +14,6 @@
   &:read-only {
     color: var(--color-surface-text-tertiary);
   }
-  &:focus {
-    background: var(--color-surface-primary-hover);
-  }
 }
 .textarea {
   &_shape {
@@ -30,10 +27,7 @@
   &&_size {
     @each $sizeValue in xs, s, m, l, xl, xxl {
       &_$(sizeValue) {
-        padding-top: var(--textarea-size-$(sizeValue)-padding-top);
-        padding-right: var(--textarea-size-$(sizeValue)-padding-right);
-        padding-bottom: var(--textarea-size-$(sizeValue)-padding-bottom);
-        padding-left: var(--textarea-size-$(sizeValue)-padding-left);
+        padding: var(--textarea-size-$(sizeValue)-padding);
       }
     }
   }

package/dist/css/styles/fill/fill.css

@@ -11,6 +11,18 @@
           }
         }
       }
+      &-item {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            background: var(--color-$(type)-item-$(color));
+            @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95  {
+              &$(alpha) {
+                background: var(--color-$(type)-item-$(color)-$(alpha));
+              }
+            }
+          }
+        }
+      }
     }
   }
   @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",