@itcase/ui 1.0.5 → 1.0.7

package/dist/css/components/Icon/Icon.css

@@ -127,15 +127,15 @@
 }
 .icon {
   &_type {
-    &_with-counter {
+    &_with-badge {
       position: relative;
       ^^&__link,
       ^^&__item {
         text-decoration: none;
         @each $size in 14, 16, 24, 32, 40, 56, 60, 72 {
           &^^^&_size_$(size) {
-            & .counter {
-              transform: translate(var(--icon-size-$(size)-counter-position));
+            & .badge {
+              transform: translate(var(--icon-size-$(size)-badge-position));
             }
           }
         }
@@ -145,5 +145,5 @@
 }
 :root {
   --icon-transition: all 0.2s ease 0s;
-  --icon-size-24-counter-position: 12px, 12px;
+  --icon-size-24-badge-position: 12px, 12px;
 }

package/dist/css/components/Input/Input.css

@@ -28,6 +28,12 @@
       border-radius: 4px;
       position: relative;
     }
+    &_underline {
+      position: relative;
+      border-left: none !important;
+      border-right: none !important;
+      border-top: none !important;
+    }
   }
 }
 .input {

package/dist/css/components/List/List.css

@@ -95,13 +95,13 @@
 }
 .list {
   &_style_number {
-    counter-reset: number-counter;
+    badge-reset: number-badge;
     & li {
       position: relative;
-      counter-increment: number-counter;
+      badge-increment: number-badge;
       padding: 0 0 0 1.5em;
       &::before {
-        content: counter(number-counter) '. ';
+        content: badge(number-badge) '. ';
         position: absolute;
         left: 0;
         top: 0;

package/dist/css/components/Logo/Logo.css

@@ -8,6 +8,18 @@
     }
   }
 }
+.logo {
+  &_size {
+    @each $size in s, m, l {
+      &_$(size) {
+        ^^&__image {
+          width: var(--logo-size-$(size)-width);
+          height: var(--logo-size-$(size)-height);
+        }
+      }
+    }
+  }
+}
 .logo {
   @each $val in stretch, flex-start, flex-end, center, baseline, auto {
     &_align-items_$(val) {
@@ -15,3 +27,14 @@
     }
   }
 }
+:root {
+  --logo-size-l-width: 240px;
+  --logo-size-l-height: 90px;
+
+  --logo-size-m-width: 200px;
+  --logo-size-m-height: 75px;
+
+  --logo-size-s-width: 140px;
+  --logo-size-s-height: 52px;
+}
+

package/dist/css/components/{Popup/Popup.css → Modal/Modal.css}

@@ -1,4 +1,4 @@
-.popup {
+.modal {
   width: 100%;
   min-height: 100%;
   position: fixed;
@@ -15,12 +15,13 @@
     display: flex;
   }
 }
-.popup-content {
+.modal-content {
   width: 100%;
-  max-width: var(--popup-max-width);
+  max-width: var(--modal-max-width);
   border-radius: 8px;
   position: relative;
-  @mixin elevation-8;
+  height: 200px;
+  width: 200px;
   &__close {
     position: absolute;
     top: 8px;

package/dist/css/components/RadioButton/RadioButton.css

@@ -1,40 +1,60 @@
 .radio-button {
-  position: relative;
-  cursor: pointer;
-  font-size: 0;
-  line-height: 0;
-  display: flex;
-  min-height: 16px;
-  min-width: 16px;
-  &__button {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 4px;
+  &__item {
+    position: relative;
     cursor: pointer;
-    appearance: none;
-    border: 0;
-    margin: 0;
     font-size: 0;
     line-height: 0;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 3;
-  }
-  &__bg {
-    flex: 1;
     display: flex;
-    z-index: 1;
-  }
-  &__mark {
-    height: calc(100% - 6px);
-    width: calc(100% - 6px);
-    position: absolute;
-    z-index: 2;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    display: none;
-    border-radius: 50%;
+    min-height: 16px;
+    min-width: 16px;
+    grid-row-start: span 2;
+    align-self: start;
+    ^&__input {
+      cursor: pointer;
+      appearance: none;
+      border: 0;
+      margin: 0;
+      font-size: 0;
+      line-height: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 3;
+    }
+    ^&__state {
+      flex: 1;
+      display: flex;
+      z-index: 1;
+      &_shape {
+        &_rounded {
+          border-radius: 4px;
+          position: relative;
+          overflow: hidden;
+        }
+        &_circular {
+          border-radius: 50%;
+          position: relative;
+          overflow: hidden;
+        }
+      }
+    }
+    ^&__state-checkmark {
+      height: calc(100% - 6px);
+      width: calc(100% - 6px);
+      position: absolute;
+      z-index: 2;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      display: none;
+      border-radius: 50%;
+    }
   }
 }
 .radio-button {
@@ -52,39 +72,20 @@
   }
 }
 .radio-button {
-  &_fill {
-    &_checked {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
-        &_$(type) {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
-            &-$(color) {
-              & ^^^^&__button {
-                &:checked {
-                  & + ^^^^^^&__bg {
-                    background: var(--color-$(type)-$(color));
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.radio-button {
-  &_fill {
-    &_checkmark {
+  &_checkmark {
+    &_fill {
       @each $type in accent, primary, secondary, tertiary, surface, success, error {
         &_$(type) {
           &-item {
             @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
               &-$(color) {
-                & ^^^^^&__button {
+                & ^^^^^&__input {
                   &:checked {
-                    & ~ ^^^^^^^&__mark {
-                      display: block;
-                      background: var(--color-$(type)-item-$(color));
+                    & ~ ^^^^^^^&__state {
+                      &-checkmark {
+                        display: block;
+                        background: var(--color-$(type)-item-$(color));
+                      }
                     }
                   }
                 }

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

@@ -0,0 +1,97 @@
+.segmented {
+  display: flex;
+  align-items: center;
+  border: solid 1px red;
+  &__wrapper {
+    border: solid 1px var(--color-surface-border-tertiary);
+    border-radius: 8px;
+    ^&__list {
+      margin: 2px;
+      position: relative;
+      display: flex;
+      &::before {
+        width: var(--segmented-active-width);
+        height: 100%;
+        background: #438ffe;
+        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: 104px;
+        padding: 8px 24px;
+        position: relative;
+        display: flex;
+        &::after {
+          width: 1px;
+          height: 100%;
+          background: var(--color-surface-border-tertiary);
+          content: '';
+          display: block;
+          top: 0;
+          transform: translate(24px, 0);
+        }
+        &:last-child {
+          &::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;
+        }
+        & label {
+          text-align: center;
+          position: relative;
+          display: block;
+          z-index: 3;
+          transition: color 0.5s ease;
+          cursor: pointer;
+          @mixin text-l;
+        }
+      }
+    }
+  }
+  &__range {
+    margin: 0 0 0 24px;
+    border: solid 1px var(--color-surface-border-tertiary);
+    border-radius: 8px;
+    position: relative;
+    &-value {
+      text-align: center;
+      padding: 10px 24px;
+      border-radius: 8px;
+      cursor: pointer;
+      @mixin text-l;
+      &_state_active {
+        color: #fff;
+        background: #438ffe;
+      }
+    }
+    ^&__modal {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+}

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

@@ -1,53 +1,63 @@
 .switch {
   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 {
+  &_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;
       }
-      & ~ .switch__toggle {
-        left: 100%;
-        margin: 0 0 0 -3px;
-        background: var(--color-accent-item-primary);
-        transform: translate(-100%, -50%);
+      ^^&__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;
       }
     }
-  }
-  &__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;
+    }
   }
 }

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

@@ -0,0 +1,49 @@
+.tab {
+  &__label {
+    display: flex;
+    align-items: center;
+    align-content: center;
+  }
+}
+.tab {
+  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
+    &_justify-content_$(val) {
+      & > a {
+        justify-content: $(val);
+      }
+    }
+  }
+}
+.tab {
+  &_shape {
+    &_rounded {
+      border-radius: 12px;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.tab {
+  &_size {
+    @each $size in normal, compact {
+      &_$(size) {
+        ^^&__label {
+          padding: var(--tab-size-$(size)-padding);
+          gap: var(--tab-size-$(size)-gap);
+        }
+      }
+    }
+  }
+}
+.tab-group {
+  position: relative;
+}
+: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/Tile/Tile.css

@@ -1,14 +1,6 @@
 .tile {
-
-}
-.tile {
-  &_type {
-    &_icon {
-      padding: 16px;
-      ^^&__icon {
-        margin: 0 0 16px 0;
-      }
-    }
+  &__wrapper {
+    position: relative;
   }
 }
 .tile {
@@ -21,3 +13,28 @@
     }
   }
 }
+.tile {
+  &_size {
+    @each $size in normal, compact {
+      &_$(size) {
+        padding: var(--tile-size-$(size)-padding);
+        min-width: var(--tile-size-$(size)-min-width);
+        & ^^&__wrapper {
+          display: flex;
+          flex-flow: column;
+          gap: var(--tile-size-$(size)-gap);
+        }
+      }
+    }
+  }
+}
+.tile {
+  &_type {
+    &_icon {
+      padding: 16px;
+      ^^&__icon {
+        margin: 0 0 16px 0;
+      }
+    }
+  }
+}

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

@@ -2,7 +2,7 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-border {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
           &-$(color) {
             border-width: 1px;
             border-style: solid;
@@ -14,7 +14,7 @@
     &_hover {
       &_$(type) {
         &-border {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
             &-$(color) {
               &:hover {
                 border-color: var(--color-$(type)-border-$(color));

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

@@ -0,0 +1,13 @@
+.border {
+  &_type {
+    &_outline {
+      border-style: solid;
+    }
+    &_solid {
+      border-style: solid;
+    }
+    &_none {
+      border: none;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+.border-width {
+  @each $width in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
+    &_$(width) {
+      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.5",
+  "version": "1.0.7",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -85,6 +85,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",