@itcase/ui 1.8.35 → 1.8.37

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

@@ -1,8 +1,16 @@
 .menu-item {
   display: flex;
   align-items: center;
+  &:hover {
+    ^&__tooltip {
+      visibility: visible !important;
+      animation-duration: 0.2s !important;
+      animation-name: menuTooltipShowAnimation !important;
+    }
+  }
   &__wrapper {
     width: 100%;
+    position: relative;
     display: flex;
     align-items: center;
     align-content: center;
@@ -11,6 +19,30 @@
       align-items: center;
       flex-grow: 1;
     }
+    ^&__tooltip {
+      visibility: hidden !important;
+      animation-duration: 0.2s !important;
+      animation-name: menuTooltipHideAnimation !important;
+      opacity: 100% !important;
+    }
+  }
+}
+
+@keyframes menuTooltipShowAnimation {
+  0% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: visible;
+  }
+}
+
+@keyframes menuTooltipHideAnimation {
+  0% {
+    visibility: visible;
+  }
+  100% {
+    visibility: hidden;
   }
 }
 
@@ -36,28 +68,15 @@
   }
 }
 
-.menu-item {
-  &_shape {
-    &_rounded {
-      border-radius: var(--menu-item-shape-rounded);
-    }
-    &_circular {
-      border-radius: 50%;
-    }
-  }
-}
-
 .menu-item {
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         min-height: var(--menu-item-size-$(size)-min-height);
-        padding: var(--menu-item-size-$(size)-padding);
-        gap: var(--menu-item-size-$(size)-gap);
         ^^&__wrapper {
-          min-height: var(--menu-item-size-$(size)-min-height);
-          padding: var(--menu-item-size-$(size)-padding);
           gap: var(--menu-item-size-$(size)-gap);
+          padding: var(--menu-item-size-$(size)-padding);
+          border-radius: var(--menu-item-size-$(size)-rounded);
         }
       }
     }
@@ -91,23 +110,27 @@
 }
 
 :root {
-  --menu-item-size-xxs-padding: 2px;
-  --menu-item-size-xs-padding: 4px;
-  --menu-item-size-s-padding: 6px;
-  --menu-item-size-m-padding: 6px;
-  --menu-item-size-l-padding: 8px;
-  --menu-item-size-xl-padding: 10px;
   --menu-item-size-xxl-padding: 14px;
+  --menu-item-size-xl-padding: 10px;
+  --menu-item-size-l-padding: 8px;
+  --menu-item-size-m-padding: 6px;
+  --menu-item-size-s-padding: 6px;
+  --menu-item-size-xs-padding: 4px;
+  --menu-item-size-xxs-padding: 2px;
 
-  --menu-item-size-xxs-gap: 4px;
-  --menu-item-size-xs-gap: 4px;
-  --menu-item-size-s-gap: 6px;
-  --menu-item-size-m-gap: 6px;
-  --menu-item-size-l-gap: 8px;
-  --menu-item-size-xl-gap: 8px;
   --menu-item-size-xxl-gap: 8px;
+  --menu-item-size-xl-gap: 8px;
+  --menu-item-size-l-gap: 8px;
+  --menu-item-size-m-gap: 6px;
+  --menu-item-size-s-gap: 6px;
+  --menu-item-size-xs-gap: 4px;
+  --menu-item-size-xxs-gap: 4px;
 
-  --menu-item-size-m-min-height: 32px;
-
-  --menu-item-shape-rounded: 20px;
+  --menu-item-size-xxl-min-height: 48px;
+  --menu-item-size-xl-min-height: 40px;
+  --menu-item-size-l-min-height: 32px;
+  --menu-item-size-m-min-height: 28px;
+  --menu-item-size-s-min-height: 24px;
+  --menu-item-size-xs-min-height: 20px;
+  --menu-item-size-xxs-min-height: 16px;
 }

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

@@ -76,54 +76,6 @@
     }
   }
 }
-.notification__item {
-  &_status {
-    &_success {
-      /* background: var(--color-success-fill-primary);
-      ^^&-wrapper {
-        ^^^&-title {
-          color: var(--color-success-text-secondary);
-        }
-        ^^^&-text {
-          color: var(--color-success-text-secondary);
-        }
-      } */
-    }
-    &_error {
-      /* background: var(--color-error-fill-primary);
-      ^^&-wrapper {
-        ^^^&-title {
-          color: var(--color-error-text-secondary);
-        }
-        ^^^&-text {
-          color: var(--color-error-text-secondary);
-        }
-      } */
-    }
-    &_warning {
-      /* background: var(--color-primary-fill-primary);
-      ^^&-wrapper {
-        ^^^&-title {
-          color: var(--color-primary-text-primary);
-        }
-        ^^^&-text {
-          color: var(--color-primary-text-primary);
-        }
-      } */
-    }
-    &_info {
-      /* background: var(--color-info-fill-primary);
-      ^^&-wrapper {
-        ^^^&-title {
-          color: var(--color-info-text-primary);
-        }
-        ^^^&-text {
-          color: var(--color-info-text-primary);
-        }
-      } */
-    }
-  }
-}
 .notification__item {
   min-width: 240px;
   padding: 12px;

package/dist/css/components/ScrollOnDrag/ScrollOnDrag.css

@@ -7,21 +7,22 @@
     width: 100%;
     &.indiana-scroll-container {
       overflow: auto;
+      cursor: grab;
       &--dragging {
         scroll-behavior: auto;
       }
       &--hide-scrollbars {
-        overflow: hidden;
+        /* overflow: hidden;
         overflow: -moz-scrollbars-none;
         -ms-overflow-style: none;
-        scrollbar-width: none;
-        &::-webkit-scrollbar {
+        scrollbar-width: none; */
+        /* &::-webkit-scrollbar {
           width: 0 !important;
           height: 0 !important;
           background: transparent !important;
           display: none !important;
           appearance: none !important;
-        }
+        } */
       }
       &--native-scroll {
         overflow: auto;
@@ -29,3 +30,228 @@
     }
   }
 }
+
+[data-simplebar] {
+  width: 100%;
+  position: relative;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: flex-start;
+  align-items: flex-start;
+}
+
+.simplebar-wrapper {
+  overflow: hidden;
+  width: inherit;
+  height: inherit;
+  max-width: inherit;
+  max-height: inherit;
+}
+
+.simplebar-mask {
+  direction: inherit;
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: auto !important;
+  height: auto !important;
+  z-index: 0;
+}
+
+.simplebar-offset {
+  direction: inherit !important;
+  box-sizing: inherit !important;
+  resize: none !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 0;
+  margin: 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.simplebar-content-wrapper {
+  direction: inherit;
+  box-sizing: border-box !important;
+  position: relative;
+  display: block;
+  height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
+  width: auto;
+  max-width: 100%; /* Not required for horizontal scroll to trigger */
+  max-height: 100%; /* Needed for vertical scroll to trigger */
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.simplebar-content-wrapper::-webkit-scrollbar,
+.simplebar-hide-scrollbar::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.simplebar-content:before,
+.simplebar-content:after {
+  content: ' ';
+  display: table;
+}
+
+.simplebar-placeholder {
+  max-height: 100%;
+  max-width: 100%;
+  width: 100%;
+  pointer-events: none;
+}
+
+.simplebar-height-auto-observer-wrapper {
+  box-sizing: inherit !important;
+  height: 100%;
+  width: 100%;
+  max-width: 1px;
+  position: relative;
+  float: left;
+  max-height: 1px;
+  overflow: hidden;
+  z-index: -1;
+  padding: 0;
+  margin: 0;
+  pointer-events: none;
+  flex-grow: inherit;
+  flex-shrink: 0;
+  flex-basis: 0;
+}
+
+.simplebar-height-auto-observer {
+  box-sizing: inherit;
+  display: block;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 1000%;
+  width: 1000%;
+  min-height: 1px;
+  min-width: 1px;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.simplebar-track {
+  z-index: 1;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+[data-simplebar].simplebar-dragging {
+  pointer-events: none;
+
+  user-select: none;
+}
+
+[data-simplebar].simplebar-dragging .simplebar-content {
+  pointer-events: none;
+
+  user-select: none;
+}
+
+[data-simplebar].simplebar-dragging .simplebar-track {
+  pointer-events: all;
+}
+
+.simplebar-scrollbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  min-height: 10px;
+}
+
+.simplebar-scrollbar:before {
+  position: absolute;
+  content: '';
+  background: black;
+  border-radius: 7px;
+  left: 2px;
+  right: 2px;
+  opacity: 0;
+  transition: opacity 0.2s 0.5s linear;
+}
+
+.simplebar-scrollbar.simplebar-visible:before {
+  opacity: 0.5;
+  transition-delay: 0s;
+  transition-duration: 0s;
+}
+
+.simplebar-track.simplebar-vertical {
+  top: 0;
+  width: 11px;
+}
+
+.simplebar-scrollbar:before {
+  top: 2px;
+  bottom: 2px;
+  left: 2px;
+  right: 2px;
+}
+
+.simplebar-track.simplebar-horizontal {
+  left: 0;
+  height: 11px;
+}
+
+.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
+  right: auto;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-height: 0;
+  min-width: 10px;
+  width: auto;
+}
+
+/* Rtl support */
+
+[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
+  right: auto;
+  left: 0;
+}
+
+.simplebar-dummy-scrollbar-size {
+  direction: rtl;
+  position: fixed;
+  opacity: 0;
+  visibility: hidden;
+  height: 500px;
+  width: 500px;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  -ms-overflow-style: scrollbar !important;
+}
+
+.simplebar-dummy-scrollbar-size > div {
+  width: 200%;
+  height: 200%;
+  margin: 10px 0;
+}
+
+.simplebar-hide-scrollbar {
+  position: fixed;
+  left: 0;
+  visibility: hidden;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}

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

@@ -24,13 +24,11 @@
           width 0.3s ease;
       }
       ^^&__item {
-        min-width: 120px;
-        border-radius: 6px;
         position: relative;
         display: flex;
         align-items: center;
         &::after {
-          width: 1px;
+          /* width: 1px; */
           height: 100%;
           background: var(--color-surface-border-tertiary);
           content: '';
@@ -90,8 +88,12 @@
     @each $size in normal, compact, xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         ^^&__item {
+          min-width: var(--segmented-item-size-$(size)-min-width);
+          border-radius: var(--segmented-item-size-$(size)-border-radius);
           &-label {
+            min-height: var(--segmented-item-size-$(size)-min-height);
             padding: var(--segmented-item-size-$(size)-padding);
+            gap: var(--segmented-item-size-$(size)-gap);
           }
         }
       }
@@ -138,13 +140,67 @@
     background-position: -200%;
   }
 }
+.segmented__item {
+  position: relative;
+  display: flex;
+  &_icon {
+    min-width: auto;
+  }
+  & input {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    border: 0;
+    position: absolute;
+    inset: 0 0 0 0;
+    z-index: 2;
+    opacity: 0%;
+    cursor: pointer;
+  }
+  &-label {
+    width: 100%;
+    text-align: center;
+    position: relative;
+    display: flex;
+    align-items: center;
+    z-index: 3;
+    transition: color 0.5s ease;
+    cursor: pointer;
+  }
+}
 :root {
-  --segmented-item-size-l-padding: 14px 16px;
-  --segmented-item-size-m-padding: 12px 16px;
-  --segmented-item-size-s-padding: 8px 16px;
-  --segmented-item-size-xs-padding: 4px 16px;
-  --segmented-item-size-xxs-padding: 4px 16px;
+  --segmented-item-size-l-padding: 0 12px;
+  --segmented-item-size-m-padding: 0 10px;
+  --segmented-item-size-s-padding: 0 8px;
+  --segmented-item-size-xs-padding: 0 8px;
+  --segmented-item-size-xxs-padding: 0 4px;
+
+  --segmented-item-size-l-min-width: 120px;
+  --segmented-item-size-m-min-width: 120px;
+  --segmented-item-size-s-min-width: 80px;
+  --segmented-item-size-xs-min-width: 80px;
+  --segmented-item-size-xxs-min-width: 60px;
+
+  --segmented-item-size-l-border-radius: 6px;
+  --segmented-item-size-m-border-radius: 6px;
+  --segmented-item-size-s-border-radius: 6px;
+  --segmented-item-size-xs-border-radius: 6px;
+  --segmented-item-size-xxs-border-radius: 6px;
+
+  --segmented-item-size-l-gap: 12px;
+  --segmented-item-size-m-gap: 8px;
+  --segmented-item-size-s-gap: 8px;
+  --segmented-item-size-xs-gap: 4px;
+  --segmented-item-size-xxs-gap: 4px;
 
   --segmented-active-width: 0;
   --segmented-active-x-pos: 0;
+
+  --segmented-item-size-l-min-height: 40px;
+  --segmented-item-size-m-min-height: 36px;
+  --segmented-item-size-s-min-height: 28px;
+  --segmented-item-size-xs-min-height: 20px;
+  --segmented-item-size-xxs-min-height: 16px;
+
+  --segmented-shape-rounded: 8px;
 }

package/dist/css/components/Segmented/css/__item/segmaented__item.css

@@ -0,0 +1,28 @@
+.segmented__item {
+  position: relative;
+  display: flex;
+  &_icon {
+    min-width: auto;
+  }
+  & input {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    border: 0;
+    position: absolute;
+    inset: 0 0 0 0;
+    z-index: 2;
+    opacity: 0%;
+    cursor: pointer;
+  }
+  &-label {
+    width: 100%;
+    text-align: center;
+    position: relative;
+    display: flex;
+    align-items: center;
+    z-index: 3;
+    transition: color 0.5s ease;
+    cursor: pointer;
+  }
+}

package/dist/css/styles/centering/centering.css

@@ -0,0 +1,17 @@
+.centering {
+  &_horizontal {
+    display: flex;
+    justify-content: center;
+  }
+  &_vertical {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  &_both {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

package/dist/css/styles/shape-strength/shape-strength.css

@@ -14,4 +14,10 @@
   &_2-m {
     border-radius: 2m;
   }
+  &_2-5-m {
+    border-radius: 2.5m;
+  }
+  &_3-m {
+    border-radius: 3m;
+  }
 }

package/dist/hooks/useStyles/styleAttributes.js

@@ -2,7 +2,7 @@ var styleAttributes = [
 /**
  * Layout
  */
-'alignContent', 'alignItems', 'alignSelf', 'aspectRatio', 'border', 'borderBottomWidth', 'borderEndWidth', 'borderLeftWidth', 'borderRightWidth', 'borderStartWidth', 'borderTopWidth', 'borderWidth', 'bottom', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'gap', 'rowGap', 'columnGap', 'columnWidth', 'height', 'justifyContent', 'left', 'margin', 'marginBottom', 'marginEnd', 'marginHorizontal', 'marginLeft', 'marginRight', 'marginStart', 'marginTop', 'marginVertical', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflow', 'padding', 'paddingBottom', 'paddingEnd', 'paddingHorizontal', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'paddingVertical', 'position', 'right', 'top', ['width', {
+'alignContent', 'alignItems', 'alignSelf', 'aspectRatio', 'border', 'borderBottomWidth', 'borderEndWidth', 'borderLeftWidth', 'borderRightWidth', 'borderStartWidth', 'borderTopWidth', 'borderWidth', 'bottom', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'gap', 'rowGap', 'columnGap', 'columnWidth', 'height', 'justifyContent', 'left', 'margin', 'marginBottom', 'marginEnd', 'marginHorizontal', 'marginLeft', 'marginRight', 'marginStart', 'marginTop', 'marginVertical', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflow', 'overflowY', 'overflowX', 'padding', 'paddingBottom', 'paddingEnd', 'paddingHorizontal', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'paddingVertical', 'position', 'right', 'top', ['width', {
   validate: value => {
     // Pass only number value for "width" style.
     // If width have custom value, like "fill", we must set class by this value.

package/dist/stories/BreadcrumbsPlsyground.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { Canvas, Meta } from '@storybook/blocks'
 
 import * as BreadcrumbsStories from '../stories/BreadcrumbsDemo.stories'
 

package/dist/stories/ChipsOverview.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Canvas } from '@storybook/blocks'
 
-import * as ChipsStories from '../stories/ChipsAppearance.stories'
+import * as ChipsStories from '../stories/ChipsDefault.stories'
 
 <Meta title="Atoms / Chips / Overview" />
 
@@ -9,29 +9,41 @@ import * as ChipsStories from '../stories/ChipsAppearance.stories'
 `Chips` — это компактная альтернатива чекбоксам. Они позволяют пользователям выбирать несколько вариантов одновременно и в основном применяются на мобильных устройствах для переключений фильтров.
 Данный компонент может быть использован в компоненте множественного выбора (SelectMulti).
 
-<Canvas sourceState="shown"of={ChipsStories.Accent} />
+<Canvas sourceState="shown"of={ChipsStories.SurfacePrimary} />
 
 
-## Accent
+## SurfacePrimary
 
-<Canvas sourceState="shown" of={ChipsStories.Accent} />
+<Canvas sourceState="shown" of={ChipsStories.SurfacePrimary} />
 
-## Primary
+## AccentPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.Primary} />
+<Canvas sourceState="shown" of={ChipsStories.AccentPrimary} />
 
-## Secondary
+## ErrorPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.Secondary} />
+<Canvas sourceState="shown" of={ChipsStories.ErrorPrimary} />
 
-## SurfacePrimary
+## PrimaryPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.SurfacePrimary} />
+<Canvas sourceState="shown" of={ChipsStories.PrimaryPrimary} />
+
+## SecondaryPrimary
+
+<Canvas sourceState="shown" of={ChipsStories.SecondaryPrimary} />
+
+## SuccessPrimary
+
+<Canvas sourceState="shown" of={ChipsStories.SuccessPrimary} />
+
+## DangerPrimary
+
+<Canvas sourceState="shown" of={ChipsStories.DangerPrimary} />
 
-## SurfaceSecondary
+## WarningPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.SurfaceSecondary} />
+<Canvas sourceState="shown" of={ChipsStories.WarningPrimary} />
 
-## SurfaceTertiary
+## InfoPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.SurfaceTertiary} />
+<Canvas sourceState="shown" of={ChipsStories.InfoPrimary} />

package/dist/stories/ChipsPlayground.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
 
-import * as ChipsStories from '../stories/ChipsAppearance.stories'
+import * as ChipsStories from '../stories/ChipsDefault.stories'
 
 <Meta title="Atoms / Chips / Playground" />
 
 # Playground
 
-<Canvas sourceState="shown" of={ChipsStories.Accent} />
-<Controls of={ChipsStories.Accent} />
+<Canvas sourceState="shown" of={ChipsStories.SurfacePrimary} />
+<Controls of={ChipsStories.SurfacePrimary} />