@itcase/ui 1.0.6 → 1.0.8

package/dist/css/components/Cell/Cell.css

@@ -22,6 +22,20 @@
     }
   }
 }
+.cell {
+  &_direction {
+    &_vertical {
+      ^^&__data {
+      }
+    }
+    &_horizontal {
+      ^^&__data {
+        flex-flow: row;
+        justify-content: space-between;
+      }
+    }
+  }
+}
 .cell {
  &&_state {
   &_active {
@@ -35,55 +49,3 @@
   }
  }
 }
-.cell {
-  &__wrapper {
-    min-width: 240px;
-    display: flex;
-    flex-flow: row nowrap;
-  }
-}
-.cell {
-  &__wrapper {
-    &_shape {
-      &_rounded {
-        border-radius: 8px;
-      }
-      &_circular {
-        border-radius: 50%;
-      }
-      &_geometric {
-        border-radius: 0;
-      }
-    }
-  }
-}
-.cell {
-  &_set {
-    &_default {
-      ^^&__wrapper {
-        padding: 8px 24px;
-        margin: 16px 24px;
-        ^^^&__data {
-          gap: 4px;
-        }
-      }
-    }
-  }
-}
-.cell {
-  &_set {
-    &_horizontal {
-      ^^&__wrapper {
-        padding: 8px 24px;
-        ^^^&__data {
-          gap: 4px;
-          flex-flow: row nowrap;
-          align-items: center;
-          ^^^^&_desc {
-            align-self: flex-start;
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,13 +1,9 @@
 .dropdown {
   display: flex;
-  align-items: center;
-  gap: 8px;
   position: relative;
   &__wrapper {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin: 16px 0 0 0;
+    padding: 12px 0;
+    gap: 8px;
   }
 }
 .dropdown {
@@ -16,28 +12,18 @@
       ^^&__wrapper {
         animation-name: dropDownAnimationClose;
       }
-      ^^&__button {
-        & .button__icon {
-          animation-name: dropDownButtonAnimationClose;
-        }
-      }
     }
     &_open {
       ^^&__wrapper {
         animation-name: dropDownAnimationOpen;
       }
-      ^^&__button {
-        & .button__icon {
-          animation-name: dropDownButtonAnimationOpen;
-        }
-      }
     }
   }
 }
 .dropdown {
   &_shape {
     &_rounded {
-      border-radius: 4px;
+      border-radius: 12px;
       position: relative;
     }
   }
@@ -52,7 +38,24 @@
 .dropdown {
   &&_state_open {
     ^&__wrapper {
-
     }
   }
 }
+.dropdown {
+  &__item {
+    min-width: 240px;
+    &-label {
+      display: block;
+    }
+    &_size {
+      @each $size in normal, compact {
+        &_$(size) {
+          ^^&-label {
+            padding: var(--dropdown-item-size-$(size)-padding);
+            gap: var(--dropdown-item-size-$(size)-gap);
+          }
+        }
+      }
+    }
+}
+}

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

@@ -206,3 +206,8 @@
     }
   }
 }
+.grid {
+  &__row {
+    display: grid;
+  }
+}

package/dist/css/components/Grid/css/__row/grid__row.css

@@ -0,0 +1,5 @@
+.grid {
+  &__row {
+    display: grid;
+  }
+}

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

@@ -11,7 +11,6 @@
 }
 .search-input {
   width: 100%;
-  grid-template-columns: 1fr 1fr;
   position: relative;
   overflow: hidden;
   display: flex;
@@ -19,9 +18,6 @@
   &__icon {
     display: flex;
     align-items: center;
-    &-before {
-      padding: 0 0 0 8px;
-    }
   }
   &__wrapper {
     width: 100%;
@@ -29,13 +25,10 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
-    padding: 7px 12px;
     align-items: center;
   }
   &__value {
-    color: var(--color-surface-text-primary);
     background: none;
-    padding: 7px 0;
     border: none;
     position: relative;
     display: block;
@@ -46,13 +39,12 @@
       outline: 0;
     }
     &:not([value='']) {
-       ~ .search-input__placeholder {
+      & ~ .search-input__placeholder {
         display: none;
       }
     }
   }
   &__placeholder {
-    color: var(--color-surface-text-primary);
     background: none;
     border: none;
     position: relative;
@@ -97,6 +89,16 @@
     }
   }
 }
+.search-input {
+  &_size {
+    @each $size in compact, normal {
+      &_$(size) {
+        padding: var(--search-input-$(size)-padding);
+        gap: var(--search-input-$(size)-gap);
+      }
+    }
+  }
+}
 .search-result {
   width: 100%;
   &__wrapper {

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

@@ -1,6 +1,5 @@
 .search-input {
   width: 100%;
-  grid-template-columns: 1fr 1fr;
   position: relative;
   overflow: hidden;
   display: flex;
@@ -8,9 +7,6 @@
   &__icon {
     display: flex;
     align-items: center;
-    &-before {
-      padding: 0 0 0 8px;
-    }
   }
   &__wrapper {
     width: 100%;
@@ -18,13 +14,10 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
-    padding: 7px 12px;
     align-items: center;
   }
   &__value {
-    color: var(--color-surface-text-primary);
     background: none;
-    padding: 7px 0;
     border: none;
     position: relative;
     display: block;
@@ -35,13 +28,12 @@
       outline: 0;
     }
     &:not([value='']) {
-       ~ .search-input__placeholder {
+      & ~ .search-input__placeholder {
         display: none;
       }
     }
   }
   &__placeholder {
-    color: var(--color-surface-text-primary);
     background: none;
     border: none;
     position: relative;

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

@@ -0,0 +1,10 @@
+.search-input {
+  &_size {
+    @each $size in compact, normal {
+      &_$(size) {
+        padding: var(--search-input-$(size)-padding);
+        gap: var(--search-input-$(size)-gap);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,95 @@
+.segmented {
+  display: flex;
+  align-items: center;
+  &__wrapper {
+    &-inner {
+      margin: 2px;
+      position: relative;
+      display: flex;
+      ^^&__indicator {
+        width: var(--segmented-active-width);
+        height: 100%;
+        padding: 8px 0;
+        border-radius: 8px;
+        position: absolute;
+        content: '';
+        display: block;
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
+        left: var(--segmented-active-x-pos);
+        top: 0;
+        z-index: 1;
+        transition: left 0.3s ease, width 0.3s ease;
+      }
+      ^^&__item {
+        min-width: 120px;
+        position: relative;
+        display: flex;
+        &::after {
+          width: 1px;
+          height: 100%;
+          background: var(--color-surface-border-tertiary);
+          content: '';
+          display: block;
+          top: 0;
+          right: 0;
+        }
+        &:nth-last-child(-n+2) {
+          &::after {
+            display: none;
+          }
+        }
+        &_state_active {
+          & label {
+            color: #fff;
+          }
+        }
+        & input {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          z-index: 2;
+          opacity: 0%;
+          cursor: pointer;
+          border: 0;
+          margin: 0;
+        }
+        &-label {
+          width: 100%;
+          text-align: center;
+          position: relative;
+          display: block;
+          z-index: 3;
+          transition: color 0.5s ease;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+.segmented {
+  &_shape {
+    &_rounded {
+      border-radius: 8px;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.segmented {
+  &_size {
+    @each $size in normal, compact {
+      &_$(size) {
+        ^^&__item {
+          &-label {
+            padding: var(--segmented-item-size-$(size)-padding);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -838,6 +838,12 @@ swiper-container .swiper-notification {
   }
 }
 
+.swiper-block {
+  &_type_center {
+    margin: 60px 0 0 0;
+  }
+}
+
 .swiper-block {
   &&_type_auto {
     & .swiper-slide {

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

@@ -1,63 +1,68 @@
 .switch {
   position: relative;
+  height: 100%;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: 0.4s;
+  overflow: hidden;
+  display: flex;
+  &__checkbox {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    cursor: pointer;
+    appearance: none;
+    border: 0;
+    margin: 0;
+    z-index: 2;
+    &:checked {
+      & + .switch__bg {
+        background: var(--color-accent-primary);
+      }
+      & ~ .switch__toggle {
+        left: 100%;
+        margin: 0 0 0 -3px;
+        background: var(--color-accent-item-primary);
+        transform: translate(-100%, -50%);
+      }
+    }
+    &:disabled {
+      & + .switch__bg {
+        background: var(--color-surface-disabled);
+      }
+    }
+  }
+  &__bg {
+    width: 100%;
+    flex: 1;
+    background: var(--color-surface-tertiary);
+    transition: all 0.25s;
+  }
+  &__toggle {
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    height: calc(100% - 6px);
+    position: absolute;
+    aspect-ratio: 1/1;
+    top: 50%;
+    transform: translate(3px, -50%);
+    left: 0;
+    background: #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    transition: all 0.25s;
+  }
 }
 .switch {
   &_size {
     &_normal {
-      position: relative;
       min-width: 52px;
-      height: 100%;
-      border-radius: 50px;
-      cursor: pointer;
-      transition: 0.4s;
       min-height: 32px;
-      overflow: hidden;
-      display: flex;
-      ^^&__checkbox {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        cursor: pointer;
-        appearance: none;
-        border: 0;
-        margin: 0;
-        z-index: 2;
-        &:checked {
-          & + .switch__bg {
-            background: var(--color-accent-primary);
-          }
-          & ~ .switch__toggle {
-            left: 100%;
-            margin: 0 0 0 -3px;
-            background: var(--color-accent-item-primary);
-            transform: translate(-100%, -50%);
-          }
-        }
-      }
-      ^^&__bg {
-        width: 100%;
-        flex: 1;
-        background: var(--color-surface-tertiary);
-        transition: all 0.25s;
-      }
-      ^^&__toggle {
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-        height: calc(100% - 6px);
-        position: absolute;
-        aspect-ratio: 1/1;
-        top: 50%;
-        transform: translate(3px, -50%);
-        left: 0;
-        background: #fff;
-        border-radius: 50%;
-        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-        transition: all 0.25s;
-      }
     }
     &_compact {
-      border: solid 1px red;
+      min-width: 40px;
+      min-height: 24px;
     }
   }
 }

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

@@ -36,6 +36,9 @@
     }
   }
 }
+.tab-group {
+  position: relative;
+}
 :root {
   --tab-size-normal-padding: 10px;
   --tab-size-normal-gap: 10px;

package/dist/css/styles/align/align.css

@@ -0,0 +1,6 @@
+.align {
+  border: solid 2px red;
+  &_center {
+    margin: 0 auto;
+  }
+}

package/dist/css/styles/border-width/border-width.css

@@ -1,6 +1,7 @@
 .border-width {
   @each $width in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
     &_$(width) {
+      border-style: solid;
       border-width: $(width)px ;
     }
   }

package/dist/css/styles/justify-content/justify-content.css

@@ -0,0 +1,7 @@
+.justify-content {
+  @each $val in flexStart, flexEnd, spaceBetween, spaceAround, spaceEvenly, flex-start, flex-end, center, space-between, space-around, space-evenly {
+    &_$(val) {
+      justify-content: $(val);
+    }
+  }
+}

package/dist/hooks/styleAttributes.js

@@ -28,6 +28,6 @@ var styleAttributes = [
 /**
  * Grid
  */
-'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows'];
+'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows'];
 
 exports.default = styleAttributes;

package/package.json

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

package/dist/css/components/Cell/css/__wrapper/cell__wrapper.css

@@ -1,7 +0,0 @@
-.cell {
-  &__wrapper {
-    min-width: 240px;
-    display: flex;
-    flex-flow: row nowrap;
-  }
-}

package/dist/css/components/Cell/css/__wrapper/cell__wrapper_shape.css

@@ -1,15 +0,0 @@
-.cell {
-  &__wrapper {
-    &_shape {
-      &_rounded {
-        border-radius: 8px;
-      }
-      &_circular {
-        border-radius: 50%;
-      }
-      &_geometric {
-        border-radius: 0;
-      }
-    }
-  }
-}