@itcase/ui 1.8.34 → 1.8.36

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

@@ -3,6 +3,7 @@
   align-items: center;
   &__wrapper {
     width: 100%;
+    position: relative;
     display: flex;
     align-items: center;
     align-content: center;
@@ -36,28 +37,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 +79,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/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

@@ -30,7 +30,7 @@
         display: flex;
         align-items: center;
         &::after {
-          width: 1px;
+          /* width: 1px; */
           height: 100%;
           background: var(--color-surface-border-tertiary);
           content: '';
@@ -91,7 +91,9 @@
       &_$(size) {
         ^^&__item {
           &-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,58 @@
     background-position: -200%;
   }
 }
+.segmented__item {
+  position: relative;
+  display: flex;
+
+  /*
+  &:not(:last-child) {
+    border-right: var(--chioce-item-border-right);
+  }
+  */
+  & 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-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,31 @@
+.segmented__item {
+  position: relative;
+  display: flex;
+
+  /*
+  &:not(:last-child) {
+    border-right: var(--chioce-item-border-right);
+  }
+  */
+  & 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

@@ -2,21 +2,22 @@
   &_default {
     border-radius: 0.5m;
   }
-  &_0-5m {
+  &_0-5-m {
     border-radius: 0.5m;
   }
-  &_1m {
+  &_1-m {
     border-radius: 1m;
   }
-  &_1-5m {
+  &_1-5-m {
     border-radius: 1.5m;
   }
-  &_2m {
+  &_2-m {
     border-radius: 2m;
   }
-  /* @each $strength, $value in (0-5m, 1m, 1-5m, 2m), (0.5m, 1m, 1.5m, 2m) {
-    &_$(strength) {
-      border-radius: $value;
-    }
-  } */
+  &_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/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} />

package/dist/types/components/Breadcrumbs/appearance/breadcrumbsStyle.d.ts

@@ -1,15 +1,15 @@
 declare const breadcrumbsAppearanceStyle: {
-    full: {
+    solid: {
         borderColor: string;
     };
-    ghost: {
+    outlined: {
         fill: string;
+    };
+    full: {
         borderColor: string;
     };
-    outlined: {
+    ghost: {
         fill: string;
-    };
-    solid: {
         borderColor: string;
     };
 };

package/dist/types/components/Breadcrumbs/stories/__mock__/index.d.ts

@@ -7,4 +7,27 @@ declare const breadcrumbsListMock: {
         icon: any;
     }[];
 };
-export { breadcrumbsListMock };
+declare const breadcrumbsListMockSize: {
+    xl: {
+        icon: any;
+        id: string;
+        key: number;
+        text: string;
+        href: string;
+    }[];
+    l: {
+        icon: any;
+        id: string;
+        key: number;
+        text: string;
+        href: string;
+    }[];
+    m: {
+        id: string;
+        key: number;
+        text: string;
+        href: string;
+        icon: any;
+    }[];
+};
+export { breadcrumbsListMock, breadcrumbsListMockSize };

package/dist/types/components/Chips/Chips.interface.d.ts

@@ -41,6 +41,7 @@ interface ChipsProps extends ChipsThemeColor, StyleAttributes {
     style?: CSSProperties;
     type?: string;
     isActive?: boolean;
+    isSkeleton?: boolean;
     onClick?: () => void;
 }
 export type { ChipsThemeColor, ChipsAppearance, ChipsConfig, ChipsProps };

package/dist/types/components/Chips/appearance/chipsAccent.d.ts

@@ -5,11 +5,19 @@ declare const chipsAppearanceAccent: {
         labelTextColor: string;
         borderColor: string;
     };
+    accentMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
     accentPrimary: {
         fill: string;
-        fillHover: string;
         labelTextColor: string;
         borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
     };
 };
 export { chipsAppearanceAccent };

package/dist/types/components/Chips/appearance/chipsDanger.d.ts

@@ -1,2 +1,17 @@
-declare const chipsAppearanceDanger: {};
+declare const chipsAppearanceDanger: {
+    dangerMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    dangerPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+};
 export { chipsAppearanceDanger };