@itcase/ui 1.3.36 → 1.4.0

package/dist/css/components/Divider/Divider.css

@@ -7,8 +7,8 @@
   &_size {
     @each $size in xs, s, m, l, xl {
       &_$(size) {
-        height: var(--divider-size-$(size)-height);
-        min-height: var(--divider-size-$(size)-height);
+        height: var(--divider-$(size)-height);
+        min-height: var(--divider-$(size)-height);
       }
     }
   }
@@ -17,8 +17,8 @@
       &^^&_size {
         @each $size in xs, s, m, l, xl {
           &_$(size) {
-            height: var(--divider-size-$(size)-height);
-            min-height: var(--divider-size-$(size)-height);
+            height: var(--divider-$(size)-height);
+            min-height: var(--divider-$(size)-height);
           }
         }
       }
@@ -27,9 +27,9 @@
       &^^&_size {
         @each $size in xs, s, m, l, xl {
           &_$(size) {
-            width: var(--divider-size-$(size)-width);
+            width: var(--divider-$(size)-width);
             height: auto;
-            min-width: var(--divider-size-$(size)-height);
+            min-width: var(--divider-$(size)-height);
           }
         }
       }
@@ -50,3 +50,16 @@
     }
   }
 }
+:root {
+  --divider-xl-height: 5px;
+  --divider-l-height: 4px;
+  --divider-m-height: 3px;
+  --divider-s-height: 2px;
+  --divider-xs-height: 1px;
+
+  --divider-xl-width: 5px;
+  --divider-l-width: 4px;
+  --divider-m-width: 3px;
+  --divider-s-width: 2px;
+  --divider-xs-width: 1px;
+}

package/dist/css/components/Divider/Divider.tokens.css

@@ -1,12 +1,13 @@
 :root {
-  --divider-size-xs-height: 1px;
-  --divider-size-s-height: 2px;
-  --divider-size-m-height: 3px;
-  --divider-size-l-height: 4px;
-  --divider-size-xl-height: 5px;
-  --divider-size-xs-width: 1px;
-  --divider-size-s-width: 2px;
-  --divider-size-m-width: 3px;
-  --divider-size-l-width: 4px;
-  --divider-size-xl-width: 5px;
-}
+  --divider-xl-height: 5px;
+  --divider-l-height: 4px;
+  --divider-m-height: 3px;
+  --divider-s-height: 2px;
+  --divider-xs-height: 1px;
+
+  --divider-xl-width: 5px;
+  --divider-l-width: 4px;
+  --divider-m-width: 3px;
+  --divider-s-width: 2px;
+  --divider-xs-width: 1px;
+}

package/dist/css/components/Dot/Dot.css

@@ -25,3 +25,13 @@
     }
   }
 }
+:root {
+  --dot-size-s-width: 12px;
+  --dot-size-s-height: 12px;
+
+  --dot-size-m-width: 16px;
+  --dot-size-m-height: 16px;
+
+  --dot-size-l-width: 20px;
+  --dot-size-l-height: 20px;
+}

package/dist/css/components/Drawer/Drawer.css

@@ -50,3 +50,7 @@
     }
   }
 }
+:root {
+  --drawer-overlay-background: none;
+  --drawer-overlay-filter: blur(0);
+}

package/dist/css/components/Drawer/Drawer.tokens.css

@@ -0,0 +1,4 @@
+:root {
+  --drawer-overlay-background: none;
+  --drawer-overlay-filter: blur(0);
+}

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

@@ -127,3 +127,40 @@
     }
   }
 }
+:root {
+  --dropdown-item-size-xs-padding: 0;
+  --dropdown-item-size-xs-gap: 8px;
+
+  --dropdown-item-size-m-padding: 0px;
+  --dropdown-item-size-m-gap: 0px;
+
+  --dropdown-item-size-l-padding: 10px 12px;
+  --dropdown-item-size-l-gap: 12px;
+
+  --dropdown-normal-padding: 16px;
+  --dropdown-normal-gap: 16px;
+}
+@keyframes dropDownAnimationOpen {
+  0% {
+    visibility: hidden;
+    transform: translate3d(0, 8px, 0);
+    opacity: 0%;
+  }
+  100% {
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+    opacity: 100%;
+  }
+}
+@keyframes dropDownAnimationClose {
+  0% {
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+    opacity: 100%;
+  }
+  100% {
+    visibility: hidden;
+    transform: translate3d(0, 8px, 0);
+    opacity: 0%;
+  }
+}

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

@@ -2,8 +2,14 @@
   --dropdown-item-size-xs-padding: 0;
   --dropdown-item-size-xs-gap: 8px;
 
+  --dropdown-item-size-m-padding: 0px;
+  --dropdown-item-size-m-gap: 0px;
+
   --dropdown-item-size-l-padding: 10px 12px;
   --dropdown-item-size-l-gap: 12px;
+
+  --dropdown-normal-padding: 16px;
+  --dropdown-normal-gap: 16px;
 }
 
 @keyframes dropDownAnimationOpen {

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

@@ -132,3 +132,8 @@
     }
   }
 }
+:root {
+  --icon-transition: all 0.2s ease 0s;
+  --icon-size-24-badge-position: 12px, 12px;
+  --icon-shape-rounded: 6px;
+}

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

@@ -1,4 +1,5 @@
 :root {
   --icon-transition: all 0.2s ease 0s;
   --icon-size-24-badge-position: 12px, 12px;
+  --icon-shape-rounded: 6px;
 }

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

@@ -83,3 +83,32 @@
     }
   }
 }
+:root {
+  --input-shape-rounded: 8px;
+
+  --input-size-xs-padding: 1px 8px;
+  --input-size-s-padding: 5px 10px;
+  --input-size-m-padding: 7px 12px;
+  --input-size-l-padding: 9px 15px;
+  --input-size-xl-padding: 13px 20px;
+  --input-size-xxl-padding: 17px 25px;
+
+  --input-size-tiny-padding: 1px 8px;
+  --input-size-compact-padding: 5px 10px;
+  --input-size-normal-padding: 7px 12px;
+  --input-size-large-padding: 9px 15px;
+
+  --input-success-border: var(--color-surface-border-tertiary);
+
+  --input-state-focus-border: var(--color-surface-border-quaternary);
+  --input-state-focus-background: none;
+  --input-state-error-border: var(--color-error-border-primary);
+  --input-state-error-background: none;
+  --input-state-required-border: var(--color-warning-text-primary);
+  --input-state-required-background: none;
+  --input-state-custom-border: var(--color-info-primary);
+  --input-state-custom-background: none;
+  --input-state-hover-border: var(--color-surface-border-quaternary);
+  --input-state-hover-background: none;
+  --input-caret-color: var(--color-accent-primary);
+}

package/dist/css/components/InputPassword/InputPassword.css

@@ -66,3 +66,26 @@
     }
   }
 }
+:root {
+  --input-password-size-xs-padding: 4px 8px;
+  --input-password-size-s-padding: 5px 10px;
+  --input-password-size-m-padding: 7px 12px;
+  --input-password-size-l-padding: 9px 15px;
+  --input-password-size-xl-padding: 15px 20px;
+  --input-password-size-xxl-padding: 18px 25px;
+
+  --input-password-size-tiny-padding: 4px 8px;
+  --input-password-size-compact-padding: 5px 10px;
+  --input-password-size-normal-padding: 7px 12px;
+  --input-password-size-large-padding: 9px 15px;
+
+  --input-password-state-focus-border: var(--color-active-border-primary);
+  --input-password-state-focus-background: none;
+  --input-password-state-error-border: var(--color-error-border-primary);
+  --input-password-state-error-background: none;
+  --input-password-state-success-border: var(--color-success-border-primary);
+  --input-password-state-success-background: none;
+  --input-password-state-hover-border: var(--color-surface-border-quaternary);
+  --input-password-state-hover-background: none;
+  --input-password-caret-color: var(--color-accent-primary);
+}

package/dist/css/components/Label/Label.css

@@ -81,3 +81,22 @@ div.label {
     }
   }
 }
+:root {
+  --label-shape-rounded-default: 6px;
+
+  --label-size-xxl-shape-rounded: 12px;
+  --label-size-xl-shape-rounded: 6px;
+  --label-size-l-shape-rounded: 6px;
+  --label-size-m-shape-rounded: 12px;
+  --label-size-s-shape-rounded: 12px;
+  --label-size-xs-shape-rounded: 12px;
+  --label-size-xxs-shape-rounded: 12px;
+
+  --label-size-xxl-padding: 10px 10px;
+  --label-size-xl-padding: 7px 8px;
+  --label-size-l-padding: 4px 6px;
+  --label-size-m-padding: 2px 8px;
+  --label-size-s-padding: 2px 6px;
+  --label-size-xs-padding: 0px 4px;
+  --label-size-xxs-padding: 0px 4px;
+}

package/dist/css/components/Label/Label.tokens.css

@@ -7,13 +7,13 @@
   --label-size-m-shape-rounded: 12px;
   --label-size-s-shape-rounded: 12px;
   --label-size-xs-shape-rounded: 12px;
-  --label-size-xxs-shape-rounded: 6px;
+  --label-size-xxs-shape-rounded: 12px;
 
   --label-size-xxl-padding: 10px 10px;
   --label-size-xl-padding: 7px 8px;
   --label-size-l-padding: 4px 6px;
   --label-size-m-padding: 2px 8px;
   --label-size-s-padding: 2px 6px;
-  --label-size-xs-padding: 1px 4px;
-  --label-size-xxs-padding: 1px 4px;
+  --label-size-xs-padding: 0px 4px;
+  --label-size-xxs-padding: 0px 4px;
 }

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

@@ -1,10 +1,25 @@
 :root {
-  --logo-size-l-width: 240px;
+  /* --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;
+  --logo-size-s-height: 52px; */
+
+  --logo-size-xl-width: 194px;
+  --logo-size-xl-height: 102px;
+
+  --logo-size-l-width: 145px;
+  --logo-size-l-height: 77px;
+
+  --logo-size-m-width: 100px;
+  --logo-size-m-height: 53px;
+
+  --logo-size-s-width: 82px;
+  --logo-size-s-height: 43px;
+
+  --logo-size-xs-width: 52px;
+  --logo-size-xs-height: 27px;
 }

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

@@ -2,16 +2,16 @@
   --menu-item-size-xxs-padding: 0 4px;
   --menu-item-size-xs-padding: 0 4px;
   --menu-item-size-s-padding: 3px 4px;
-  --menu-item-size-m-padding: 4px 4px;
+  --menu-item-size-m-padding: 4px 12px;
   --menu-item-size-l-padding: 6px 6px;
   --menu-item-size-xl-padding: 10px 8px;
   --menu-item-size-xxl-padding: 12px 10px;
-  --menu-item-shape-rounded: 6px;
+
+  --menu-item-shape-rounded: 20px;
+  --menu-item-set-subitem-padding-left: 36px;
 
   --menu-item-set-filter-padding: 10px 16px;
   --menu-item-set-filter-border-right: 1px solid
     var(--color-surface-border-tertiary);
   --menu-item-set-filter-active-color: var(--color-surface-item-accent);
-
-  --menu-item-set-subitem-padding-left: 32px;
 }

package/dist/css/components/Modal/Modal.css

@@ -37,3 +37,6 @@
     width: 100%;
   }
 }
+:root {
+  --modal-max-width: 450px;
+}

package/dist/css/components/Modal/Modal.tokens.css

@@ -0,0 +1,3 @@
+:root {
+  --modal-max-width: 450px;
+}

package/dist/css/components/Pagination/Pagination.css

@@ -106,3 +106,28 @@
     }
   }
 }
+:root {
+  --paginator-margin: 0;
+
+  --paginator-item-width: 32px;
+  --paginator-item-height: 32px;
+  --paginator-item-border: none;
+  --paginator-item-border-radius: 50%;
+
+  --pagination-item-state-disabled-display: none;
+
+  --paginator-item-transition: all 0.2s ease 0s;
+
+  --paginator-item-default-fill: var(--color-surface-primary);
+  --paginator-item-default-fill-hover: var(--color-surface-primary-hover);
+  --paginator-item-default-text: var(--color-surface-text-primary);
+
+  --paginator-item-active-fill: var(--color-accent-primary);
+  --paginator-item-active-fill-hover: var(--color-accent-primary);
+  --paginator-item-active-text: var(--color-accent-text-primary);
+
+  --paginator-item-disabled-fill: none;
+  --paginator-item-disabled-fill-hover: none;
+  --paginator-item-disabled-text: var(--color-surface-text-primary);
+  --paginator-item-disabled-icon: var(--color-surface-item-disabled);
+}

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

@@ -113,3 +113,19 @@
     }
   }
 }
+:root {
+  --search-input-normal-padding: 8px;
+  --search-input-normal-gap: 8px;
+  --search-input-normal-line-height: 24px;
+
+  --search-input-compact-padding: 8px;
+  --search-input-compact-gap: 4px;
+
+  --search-input-l-padding: 8px 7px;
+  --search-input-l-gap: 6px;
+
+  --search-input-s-padding: 2px 7px;
+  --search-input-s-gap: 6px;
+
+  --search-shape-rounded: 8px;
+}

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

@@ -6,8 +6,11 @@
   --search-input-compact-padding: 8px;
   --search-input-compact-gap: 4px;
 
-  --search-input-l-padding: 6px 12px;
-  --search-input-l-gap: 4px;
+  --search-input-l-padding: 8px 7px;
+  --search-input-l-gap: 6px;
 
-  --search-shape-rounded: 4px;
+  --search-input-s-padding: 2px 7px;
+  --search-input-s-gap: 6px;
+
+  --search-shape-rounded: 8px;
 }

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

@@ -115,3 +115,9 @@
     }
   }
 }
+:root {
+  --segmented-item-size-normal-padding: 12px 24px;
+  --segmented-item-size-compact-padding: 6px 16px;
+
+  --segmented-item-size-s-padding: 4px 16px;
+}

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

@@ -1,4 +1,6 @@
 :root {
   --segmented-item-size-normal-padding: 12px 24px;
   --segmented-item-size-compact-padding: 6px 16px;
+
+  --segmented-item-size-s-padding: 4px 16px;
 }

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

@@ -32,20 +32,20 @@
 
 .select {
   &&_size {
-    @each $size in xs, s, m, l, xl, xxl, tiny, compact, normal, large {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         ^^&__control {
-          padding: var(--select-size-$(size)-padding);
+          padding: var(--select-$(size)-padding);
         }
         ^^&__option {
-          padding: var(--select-size-$(size)-padding);
+          padding: var(--select-$(size)-padding);
         }
         ^^&__menu {
           &-notice {
-            padding: var(--select-size-$(size)-padding);
+            padding: var(--select-$(size)-padding);
           }
           &-group-heading {
-            padding: var(--select-size-$(size)-padding);
+            padding: var(--select-$(size)-padding);
           }
         }
       }
@@ -111,9 +111,11 @@
 .select {
   &__control {
     &_fill {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, surface, success,
+        error {
         &_$(type) {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover {
             &-$(color) {
               background: var(--color-$(type)-$(color));
             }
@@ -206,7 +208,7 @@
         &_size {
           @each $size in xs, s, m, l, xl, xxl {
             &_$(size) {
-              padding: var(--select-menu-list-item-size-$(size)-padding, 5px 10px);
+              padding: var(--select-menu-list-item-$(size)-padding, 5px 10px);
             }
           }
         }
@@ -373,12 +375,12 @@
 }
 
 :root {
-  --select-size-xxl-padding: 15px 25px;
-  --select-size-xl-padding: 9px 20px;
-  --select-size-xs-padding: 0px 8px;
-  --select-size-m-padding: 5px 12px;
-  --select-size-s-padding: 0 4px;
-  --select-size-l-padding: 7px 15px;
+  --select-xxl-padding: 15px 25px;
+  --select-xl-padding: 9px 20px;
+  --select-xs-padding: 0px 8px;
+  --select-m-padding: 5px 12px;
+  --select-s-padding: 1px 4px;
+  --select-l-padding: 7px 15px;
 
   --select-menu-border-radius: 12px;
   --select-menu-margin: 0;
@@ -389,10 +391,10 @@
 
   --select-success-border: var(--color-surface-border-tertiary);
 
-  --select-menu-list-item-size-xxl-padding: 18px 25px;
-  --select-menu-list-item-size-xl-padding: 14px 20px;
-  --select-menu-list-item-size-l-padding: 10px 12px;
-  --select-menu-list-item-size-m-padding: 8px 12px;
-  --select-menu-list-item-size-s-padding: 6px 10px;
-  --select-menu-list-item-size-xs-padding: 2px 8px;
+  --select-menu-list-item-xxl-padding: 18px 25px;
+  --select-menu-list-item-xl-padding: 14px 20px;
+  --select-menu-list-item-l-padding: 10px 12px;
+  --select-menu-list-item-m-padding: 8px 12px;
+  --select-menu-list-item-s-padding: 6px 10px;
+  --select-menu-list-item-xs-padding: 2px 8px;
 }

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

@@ -1,10 +1,10 @@
 :root {
-  --select-size-xxl-padding: 15px 25px;
-  --select-size-xl-padding: 9px 20px;
-  --select-size-xs-padding: 0px 8px;
-  --select-size-m-padding: 5px 12px;
-  --select-size-s-padding: 0 4px;
-  --select-size-l-padding: 7px 15px;
+  --select-xxl-padding: 15px 25px;
+  --select-xl-padding: 9px 20px;
+  --select-xs-padding: 0px 8px;
+  --select-m-padding: 5px 12px;
+  --select-s-padding: 1px 4px;
+  --select-l-padding: 7px 15px;
 
   --select-menu-border-radius: 12px;
   --select-menu-margin: 0;
@@ -15,10 +15,10 @@
 
   --select-success-border: var(--color-surface-border-tertiary);
 
-  --select-menu-list-item-size-xxl-padding: 18px 25px;
-  --select-menu-list-item-size-xl-padding: 14px 20px;
-  --select-menu-list-item-size-l-padding: 10px 12px;
-  --select-menu-list-item-size-m-padding: 8px 12px;
-  --select-menu-list-item-size-s-padding: 6px 10px;
-  --select-menu-list-item-size-xs-padding: 2px 8px;
+  --select-menu-list-item-xxl-padding: 18px 25px;
+  --select-menu-list-item-xl-padding: 14px 20px;
+  --select-menu-list-item-l-padding: 10px 12px;
+  --select-menu-list-item-m-padding: 8px 12px;
+  --select-menu-list-item-s-padding: 6px 10px;
+  --select-menu-list-item-xs-padding: 2px 8px;
 }

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

@@ -1,9 +1,11 @@
 .select {
   &__control {
     &_fill {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, surface, success,
+        error {
         &_$(type) {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover {
             &-$(color) {
               background: var(--color-$(type)-$(color));
             }

package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css

@@ -5,7 +5,7 @@
         &_size {
           @each $size in xs, s, m, l, xl, xxl {
             &_$(size) {
-              padding: var(--select-menu-list-item-size-$(size)-padding, 5px 10px);
+              padding: var(--select-menu-list-item-$(size)-padding, 5px 10px);
             }
           }
         }

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

@@ -68,3 +68,31 @@ div.tab-reset {
     }
   }
 }
+:root {
+  --tab-size-normal-padding: 12px;
+  --tab-size-normal-gap: 4px;
+
+  --tab-size-compact-padding: 12px;
+  --tab-size-compact-gap: 4px;
+
+  --tab-size-xxs-padding: 0px;
+  --tab-size-xxs-gap: 4px;
+
+  --tab-size-xs-padding: 3px;
+  --tab-size-xs-gap: 4px;
+
+  --tab-size-s-padding: 5px;
+  --tab-size-s-gap: 4px;
+
+  --tab-size-m-padding: 7px;
+  --tab-size-m-gap: 4px;
+
+  --tab-size-l-padding: 11px;
+  --tab-size-l-gap: 4px;
+
+  --tab-size-xl-padding: 15px;
+  --tab-size-xl-gap: 4px;
+
+  --tab-size-xxl-padding: 19px;
+  --tab-size-xxl-gap: 4px;
+}

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

@@ -38,3 +38,10 @@
     }
   }
 }
+:root {
+  --textarea-shape-rounded: 8px;
+  --textarea-size-m-padding: 8px 12px;
+  --textarea-min-height: 80px;
+  --textarea-max-height: 80px;
+  --textarea-success-border: var(--color-surface-border-tertiary);
+}

package/dist/stories/Overview.mdx

@@ -1,11 +1,11 @@
 import { Meta, Story } from '@storybook/blocks'
 
-import * as TitleStories from '../stories/Title.stories.tsx'
+import * as TooltipStories from '../stories/Tooltip.stories.tsx'
 
-<Meta title="Atoms / Title / Overview" />
+<Meta title="Atoms / Tooltip / Overview" />
 
-# Title
+# Tooltip
 
-`Title` отображает заголовки.
+`Tooltip` - это небольшой фрагмент контекстной информации, который появляется, когда пользователи наводят курсор мыши на элемент пользовательского интерфейса.
 
-<Story of={TitleStories.SizeH3} />
+<Story of={TooltipStories.surfacePrimary} />

package/dist/stories/Playground.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
 
-import * as TitleStories from '../stories/Title.stories.tsx'
+import * as TooltipStories from '../stories/Tooltip.stories.tsx'
 
-<Meta title="Atoms / Title / Playground" />
+<Meta title="Atoms / Tooltip / Playground" />
 
 # Playground
 
-<Canvas sourceState="shown" of={TitleStories.SizeH4} />
-<Controls of={TitleStories.SizeH4} />
+<Canvas sourceState="shown" of={TooltipStories.surfacePrimary} />
+<Controls of={TooltipStories.surfacePrimary} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.3.36",
+  "version": "1.4.0",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -125,7 +125,7 @@
     "@babel/preset-react": "^7.26.3",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@itcase/lint": "^1.0.48",
+    "@itcase/lint": "^1.0.49",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-image": "^3.0.3",