@itcase/ui 1.0.80 → 1.0.81

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

@@ -899,6 +899,18 @@
                   border-radius: var(--date-picker-day-range-end-border-radius) !important;
                 }
               }
+              &-start.react-datepicker__day--range-end {
+                border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                &:hover {
+                  border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                }
+              }
+              &.react-datepicker__day--selecting-range-start.react-datepicker__day--selecting-range-end {
+                border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                &:hover {
+                  border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                }
+              }
             }
             &--today {
               background: var(--date-picker-day-today-background);
@@ -1069,6 +1081,14 @@
     }
   }
   &__input {
+    &-container {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      & .input {
+        min-width: 256px;
+      }
+    }
     &-time-container {
       text-align: center;
       padding: 4px;
@@ -1089,6 +1109,12 @@
       }
     }
   }
+  &__clear-icon {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+  }
   &-wrapper {
     width: 100%;
     ^&__input-container {
@@ -1160,6 +1186,7 @@
   --date-picker-day-range-border-radius: 0;
   --date-picker-day-range-start-border-radius: 12px 0 0 12px;
   --date-picker-day-range-end-border-radius: 0 12px 12px 0;
+  --date-picker-day-range-start-end-border-radius: 12px;
   --date-picker-day-today-background: var(--color-surface-secondary);
   --date-picker-day-today-text-color: var(--color-surface-text-primary);
   --date-picker-day-weekend-background: var(--color-surface-primary);

package/dist/css/components/Dropdown/Dropdown.css

@@ -85,3 +85,12 @@
     }
   }
 }
+.dropdown {
+  &__item {
+    &_shape {
+      &_rounded {
+        border-radius: var(--dropdown-item-shape-rounded, 4px);
+      }
+    }
+  }
+}

package/dist/css/components/MenuItem/MenuItem.css

@@ -37,7 +37,7 @@
 .menu-item {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--menu-item-shape-rounded, 12px);
     }
     &_circular {
       border-radius: 50%;
@@ -54,3 +54,13 @@
     }
   }
 }
+
+:root {
+  --menu-item-size-xxs-padding: 0 4px;
+  --menu-item-size-xs-padding: 0 4px;
+  --menu-item-size-s-padding: 1px 4px;
+  --menu-item-size-m-padding: 2px 4px;
+  --menu-item-size-l-padding: 4px 6px;
+  --menu-item-size-xl-padding: 7px 8px;
+  --menu-item-size-xxl-padding: 4px 10px;
+}

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

@@ -28,19 +28,12 @@
     &_float {
       width: 100%;
       border-radius: 8px;
+      padding: 12px 16px;
+      @mixin elevation-8;
       ^^&-wrapper {
-        padding: 12px 16px;
-        border-radius: 8px;
-        position: relative;
         display: flex;
         flex-direction: column;
         gap: 4px;
-        @mixin elevation-8;
-      }
-      ^^&-close {
-        position: absolute;
-        top: 16px;
-        right: 12px;
       }
     }
   }
@@ -51,7 +44,6 @@
       width: 100%;
       ^^&-wrapper {
         padding: 12px 0;
-        position: relative;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -65,11 +57,29 @@
   &_set {
     &_form {
       width: 100%;
+      padding: 12px 16px;
+      border-radius: 8px;
       ^^&-wrapper {
         text-align: left;
-        padding: 12px 16px;
-        border-radius: 8px;
-        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+    }
+  }
+}
+.notification__item {
+  &_set {
+    &_toast {
+      width: 100%;
+      background: var(--color-surface-primary);
+      padding: 12px 16px;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      @mixin elevation-8;
+      ^^&-wrapper {
         display: flex;
         flex-direction: column;
         gap: 4px;
@@ -80,8 +90,8 @@
 .notification__item {
   &_status {
     &_success {
+      background: var(--color-success-primary);
       ^^&-wrapper {
-        background: var(--color-success-primary);
         ^^^&-title {
           color: var(--color-success-text-secondary);
         }
@@ -91,8 +101,8 @@
       }
     }
     &_error {
+      background: var(--color-error-primary);
       ^^&-wrapper {
-        background: var(--color-error-primary);
         ^^^&-title {
           color: var(--color-error-text-secondary);
         }
@@ -102,8 +112,8 @@
       }
     }
     &_warning {
+      background: var(--color-primary-primary);
       ^^&-wrapper {
-        background: var(--color-primary-primary);
         ^^^&-title {
           color: var(--color-primary-text-primary);
         }
@@ -117,13 +127,16 @@
 .notification__item {
   &_type {
     &_close-button {
-      ^^&-title {
-        margin-right: 40px;
-      }
-      ^^&-close {
-        position: absolute;
-        top: 12px;
-        right: 16px;
+      ^^&-wrapper {
+        position: relative;
+        ^^^&-title {
+          margin-right: 40px;
+        }
+        ^^^&-close {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
       }
     }
   }

package/dist/css/components/Notification/css/__item/notification__item_set_float.css

@@ -3,19 +3,12 @@
     &_float {
       width: 100%;
       border-radius: 8px;
+      padding: 12px 16px;
+      @mixin elevation-8;
       ^^&-wrapper {
-        padding: 12px 16px;
-        border-radius: 8px;
-        position: relative;
         display: flex;
         flex-direction: column;
         gap: 4px;
-        @mixin elevation-8;
-      }
-      ^^&-close {
-        position: absolute;
-        top: 16px;
-        right: 12px;
       }
     }
   }

package/dist/css/components/Notification/css/__item/notification__item_set_form.css

@@ -2,11 +2,10 @@
   &_set {
     &_form {
       width: 100%;
+      padding: 12px 16px;
+      border-radius: 8px;
       ^^&-wrapper {
         text-align: left;
-        padding: 12px 16px;
-        border-radius: 8px;
-        position: relative;
         display: flex;
         flex-direction: column;
         gap: 4px;

package/dist/css/components/Notification/css/__item/notification__item_set_toast.css

@@ -0,0 +1,19 @@
+.notification__item {
+  &_set {
+    &_toast {
+      width: 100%;
+      background: var(--color-surface-primary);
+      padding: 12px 16px;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      @mixin elevation-8;
+      ^^&-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+    }
+  }
+}

package/dist/css/components/Notification/css/__item/notification__item_set_top.css

@@ -4,7 +4,6 @@
       width: 100%;
       ^^&-wrapper {
         padding: 12px 0;
-        position: relative;
         display: flex;
         flex-direction: column;
         justify-content: center;

package/dist/css/components/Notification/css/__item/notification__item_status.css

@@ -1,8 +1,8 @@
 .notification__item {
   &_status {
     &_success {
+      background: var(--color-success-primary);
       ^^&-wrapper {
-        background: var(--color-success-primary);
         ^^^&-title {
           color: var(--color-success-text-secondary);
         }
@@ -12,8 +12,8 @@
       }
     }
     &_error {
+      background: var(--color-error-primary);
       ^^&-wrapper {
-        background: var(--color-error-primary);
         ^^^&-title {
           color: var(--color-error-text-secondary);
         }
@@ -23,8 +23,8 @@
       }
     }
     &_warning {
+      background: var(--color-primary-primary);
       ^^&-wrapper {
-        background: var(--color-primary-primary);
         ^^^&-title {
           color: var(--color-primary-text-primary);
         }

package/dist/css/components/Notification/css/__item/notification__item_type_close-button.css

@@ -1,13 +1,16 @@
 .notification__item {
   &_type {
     &_close-button {
-      ^^&-title {
-        margin-right: 40px;
-      }
-      ^^&-close {
-        position: absolute;
-        top: 12px;
-        right: 16px;
+      ^^&-wrapper {
+        position: relative;
+        ^^^&-title {
+          margin-right: 40px;
+        }
+        ^^^&-close {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
       }
     }
   }

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

@@ -23,19 +23,19 @@
     width: 100%;
     position: relative;
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
     align-items: center;
+    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    grid-template-columns: 1fr 1fr;
   }
   &__value {
     background: none;
+    padding: 1px 0 !important;
     border: none;
     position: relative;
     display: block;
+    z-index: 2;
     grid-column: 1/3;
     grid-row-start: 1;
-    z-index: 2;
-    padding: 1.25px 0 !important;
     &:focus {
       outline: 0;
     }
@@ -49,7 +49,7 @@
     background: none;
     border: none;
     position: relative;
-    display: block;
+    display: grid;
     grid-column: 1/3;
     grid-row-start: 1;
     &:focus {
@@ -60,10 +60,10 @@
     margin: 0 4px 0 0;
     position: absolute;
     top: 50%;
-    transform: translate(0, -50%);
     right: 0;
-    cursor: pointer;
     z-index: 2;
+    transform: translate(0, -50%);
+    cursor: pointer;
   }
   &&_state_focus,
   &&_state_filled {

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

@@ -12,19 +12,19 @@
     width: 100%;
     position: relative;
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
     align-items: center;
+    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    grid-template-columns: 1fr 1fr;
   }
   &__value {
     background: none;
+    padding: 1px 0 !important;
     border: none;
     position: relative;
     display: block;
+    z-index: 2;
     grid-column: 1/3;
     grid-row-start: 1;
-    z-index: 2;
-    padding: 1.25px 0 !important;
     &:focus {
       outline: 0;
     }
@@ -38,7 +38,7 @@
     background: none;
     border: none;
     position: relative;
-    display: block;
+    display: grid;
     grid-column: 1/3;
     grid-row-start: 1;
     &:focus {
@@ -49,10 +49,10 @@
     margin: 0 4px 0 0;
     position: absolute;
     top: 50%;
-    transform: translate(0, -50%);
     right: 0;
-    cursor: pointer;
     z-index: 2;
+    transform: translate(0, -50%);
+    cursor: pointer;
   }
   &&_state_focus,
   &&_state_filled {

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

@@ -32,7 +32,7 @@
 
 .select {
   &&_size {
-    @each $size in normal, compaсt {
+    @each $size in xs, s, m, l, xl, xxl, tiny, compact, normal, large {
       &_$(size) {
         ^^&__control {
           padding: var(--select-size-$(size)-padding);
@@ -109,7 +109,7 @@
   &__control {
     &_shape {
       &_rounded {
-        border-radius: 6px;
+        border-radius: var(--select-control-shape-rounded, 6px);
       }
       &_circular {
         border-radius: 50%;
@@ -234,8 +234,11 @@
 
 .select__multi-value {
   &-wrapper {
-    padding: 4px 6px;
-    border-radius: 6px;
+    padding: var(--select-multi-value-padding, 4px 6px);
+    border-radius: var(--select-multi-value-border-radius, 6px);
+    ^&__label {
+      display: flex;
+    }
   }
 }
 

package/dist/css/components/Select/css/__control/select__control_shape.css

@@ -2,7 +2,7 @@
   &__control {
     &_shape {
       &_rounded {
-        border-radius: 6px;
+        border-radius: var(--select-control-shape-rounded, 6px);
       }
       &_circular {
         border-radius: 50%;

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

@@ -1,6 +1,9 @@
 .select__multi-value {
   &-wrapper {
-    padding: 4px 6px;
-    border-radius: 6px;
+    padding: var(--select-multi-value-padding, 4px 6px);
+    border-radius: var(--select-multi-value-border-radius, 6px);
+    ^&__label {
+      display: flex;
+    }
   }
 }

package/dist/css/components/Swiper/Swiper.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.0.3
+ * Swiper 11.0.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: October 26, 2023
+ * Released on: November 9, 2023
  */
 
 /* FONT_START */

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

@@ -59,19 +59,9 @@
     }
   }
 }
-.tab {
-  &_state {
-    &_active {
-      ^^&__label {
-        color: var(--color-surface-text-accent);
-      }
-    }
-  }
-}
 :root {
   --tab-size-normal-padding: 10px;
   --tab-size-normal-gap: 10px;
-
   --tab-size-compact-padding: 10px;
   --tab-size-compact-gap: 10px;
 }

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

@@ -18,7 +18,7 @@
 .textarea {
   &_shape {
     &_rounded {
-      border-radius: 4px;
+      border-radius: var(--textarea-shape-rounded, 4px);
       position: relative;
     }
     &_underline {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.80",
+  "version": "1.0.81",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -40,12 +40,12 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.1.9",
+    "@itcase/common": "^1.1.10",
     "clsx": "^2.0.0",
     "html5-boilerplate": "^8.0.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "luxon": "^3.4.3",
+    "luxon": "^3.4.4",
     "prop-types": "^15.8.1",
     "rc-slider": "^10.4.0",
     "react": "^18.2.0",
@@ -59,16 +59,16 @@
     "react-responsive": "^9.0.2",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.8.0",
-    "swiper": "^11.0.3",
+    "swiper": "^11.0.4",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/eslint-parser": "^7.22.15",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@commitlint/cli": "^18.2.0",
-    "@commitlint/config-conventional": "^18.1.0",
+    "@babel/core": "^7.23.3",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@commitlint/cli": "^18.4.2",
+    "@commitlint/config-conventional": "^18.4.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.0.1",
@@ -86,7 +86,7 @@
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-n": "^16.3.0",
+    "eslint-plugin-n": "^16.3.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-promise": "^6.1.1",
@@ -94,8 +94,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^8.0.3",
-    "lint-staged": "^15.0.2",
-    "npm": "^10.2.3",
+    "lint-staged": "^15.1.0",
+    "npm": "^10.2.4",
     "postcss": "^8.4.31",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^10.1.0",
@@ -118,9 +118,9 @@
     "postcss-pxtorem": "^6.0.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "react-datepicker": "^4.21.0",
-    "rollup": "^4.3.0",
+    "rollup": "^4.4.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^22.0.7",
     "stylelint": "^15.11.0",