@itcase/ui 1.8.90 → 1.8.92

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

@@ -40,6 +40,9 @@
         ^^&__option {
           padding: var(--select-$(size)-padding);
         }
+        ^^&__multi-value-item {
+          padding: var(--select-multi-item-$(size)-padding);
+        }
         ^^&__menu {
           &-notice {
             padding: var(--select-$(size)-padding);
@@ -117,37 +120,6 @@
   }
 }
 
-.select {
-  &__control {
-    &_fill {
-      @each $type in accent, primary, secondary, tertiary, surface, success,
-        error {
-        &_$(type) {
-          @each $color in primary, secondary, tertiary, quaternary, quinary,
-            senary, accent, disabled, hover {
-            &-$(color) {
-              background: var(--color-$(type)-fill-$(color));
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.select {
-  &__control {
-    &_shape {
-      &_rounded {
-        border-radius: var(--select-control-shape-rounded);
-      }
-      &_circular {
-        border-radius: 50%;
-      }
-    }
-  }
-}
-
 .select {
   &__placeholder {
     position: absolute;
@@ -230,10 +202,7 @@
 .select {
   &__menu {
     width: 100%;
-    background: var(--color-surface-fill-primary);
     padding: 12px 0;
-    margin: var(--select-menu-margin);
-    border-radius: var(--select-menu-border-radius);
     border-top: none;
     position: absolute;
     left: 0;
@@ -269,7 +238,6 @@
           bottom: 0;
         }
       }
-
       &--is-multi {
         ^^^&__option {
           &--is-selected {
@@ -289,9 +257,7 @@
 }
 
 .select__multi-value {
-  &-wrapper {
-    padding: var(--select-multi-value-padding);
-    border-radius: var(--select-multi-value-border-radius);
+  &-item {
     ^&__label {
       display: flex;
     }
@@ -302,63 +268,12 @@
   &__option {
     display: flex;
     cursor: pointer;
-    /* &-label {
-      width: 100%;
-      position: relative;
-      display: block;
-      z-index: 100;
-      cursor: pointer;
-    }
-    &-checkbox {
-      opacity: 0%;
-      &:checked {
-        & + .form-select {
-          &__option-state {
-            &::before {
-              width: 8px;
-              height: 8px;
-              border-radius: 50%;
-              position: absolute;
-              content: '';
-              display: block;
-              left: 2px;
-              top: 2px;
-              z-index: 2;
-            }
-          }
-        }
-      }
-    }
-    &-state {
-      width: 14px;
-      height: 14px;
-      background: none;
-      border-radius: 2px;
-      position: absolute;
-      content: '';
-      display: block;
-      left: 0;
-      top: 2px;
-      z-index: 1;
-    }
-    &-text {
-      padding: 0 0 0 8px;
-    } */
-    &--is-selected {
-      /* color: var(--color-surface-text-primary);
-      background: var(--color-surface-primary-hover); */
-    }
-    &--is-focused {
-      /* color: var(--color-surface-text-primary);
-      background: var(--color-surface-primary-hover); */
-    }
   }
 }
 
 .select {
   &__single-value {
     display: flex;
-    /* position: absolute; */
   }
 }
 
@@ -385,26 +300,18 @@
 }
 
 :root {
-  --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;
+  --select-xxl-padding: 16px 12px;
+  --select-xl-padding: 12px 12px;
+  --select-m-padding: 8px 12px;
+  --select-s-padding: 2px 12px;
+  --select-xs-padding: 2px 12px;
 
-  --select-control-shape-rounded: 8px;
-
-  --select-background: var(--color-surface-fill-primary);
-  --select-background-hover: var(--color-surface-fill-hover);
-  --select-focus-background: var(--color-surface-fill-primary);
-  --select-focus-border: var(--color-surface-border-quaternary);
-  --select-success-border: var(--color-success-border-secondary);
-  --select-success-border-hover: var(--color-surface-border-quaternary);
-  --select-error-border: var(--color-error-border-secondary);
-  --select-error-hover: var(--color-error-border-secondary);
+  --select-multi-item-xxl-padding: 5px;
+  --select-multi-item-xl-padding: 5px;
+  --select-multi-item-l-padding: 5px;
+  --select-multi-item-m-padding: 5px;
+  --select-multi-item-s-padding: 5px;
+  --select-multi-item-xs-padding: 5px;
 
   --select-menu-list-item-xxl-padding: 18px 25px;
   --select-menu-list-item-xl-padding: 14px 20px;
@@ -412,7 +319,4 @@
   --select-menu-list-item-m-padding: 8px 12px;
   --select-menu-list-item-s-padding: 6px 10px;
   --select-menu-list-item-xs-padding: 2px 8px;
-
-  --select-multi-value-padding: 2px 6px;
-  --select-multi-value-border-radius: 0;
 }

package/dist/css/components/Select/css/__menu/select__menu.css

@@ -1,10 +1,7 @@
 .select {
   &__menu {
     width: 100%;
-    background: var(--color-surface-fill-primary);
     padding: 12px 0;
-    margin: var(--select-menu-margin);
-    border-radius: var(--select-menu-border-radius);
     border-top: none;
     position: absolute;
     left: 0;
@@ -40,7 +37,6 @@
           bottom: 0;
         }
       }
-
       &--is-multi {
         ^^^&__option {
           &--is-selected {

package/dist/css/components/Select/css/__multi-value/select__multi-value.css

@@ -1,7 +1,5 @@
 .select__multi-value {
-  &-wrapper {
-    padding: var(--select-multi-value-padding);
-    border-radius: var(--select-multi-value-border-radius);
+  &-item {
     ^&__label {
       display: flex;
     }

package/dist/css/components/Select/css/__option/select__option.css

@@ -2,55 +2,5 @@
   &__option {
     display: flex;
     cursor: pointer;
-    /* &-label {
-      width: 100%;
-      position: relative;
-      display: block;
-      z-index: 100;
-      cursor: pointer;
-    }
-    &-checkbox {
-      opacity: 0%;
-      &:checked {
-        & + .form-select {
-          &__option-state {
-            &::before {
-              width: 8px;
-              height: 8px;
-              border-radius: 50%;
-              position: absolute;
-              content: '';
-              display: block;
-              left: 2px;
-              top: 2px;
-              z-index: 2;
-            }
-          }
-        }
-      }
-    }
-    &-state {
-      width: 14px;
-      height: 14px;
-      background: none;
-      border-radius: 2px;
-      position: absolute;
-      content: '';
-      display: block;
-      left: 0;
-      top: 2px;
-      z-index: 1;
-    }
-    &-text {
-      padding: 0 0 0 8px;
-    } */
-    &--is-selected {
-      /* color: var(--color-surface-text-primary);
-      background: var(--color-surface-primary-hover); */
-    }
-    &--is-focused {
-      /* color: var(--color-surface-text-primary);
-      background: var(--color-surface-primary-hover); */
-    }
   }
 }

package/dist/css/components/Select/css/__single-value/select__single-value.css

@@ -1,6 +1,5 @@
 .select {
   &__single-value {
     display: flex;
-    /* position: absolute; */
   }
 }

package/dist/types/components/Select/SelectLoadingIndicator.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { GroupBase, LoadingIndicatorProps } from 'react-select';
-declare const SelectLoadingIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: LoadingIndicatorProps<Option, IsMulti, Group>) => React.ReactNode;
+declare const SelectLoadingIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: LoadingIndicatorProps<Option, IsMulti, Group>) => false | import("react/jsx-runtime").JSX.Element;
 export { SelectLoadingIndicator };

package/dist/types/components/Select/SelectLoadingMessage.d.ts

@@ -0,0 +1,3 @@
+import { GroupBase, NoticeProps } from 'react-select';
+declare const SelectLoadingMessage: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: NoticeProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;
+export { SelectLoadingMessage };

package/dist/types/components/Select/appearance/selectDefault.d.ts

@@ -1,21 +1,39 @@
 declare const selectAppearanceDefault: {
     defaultPrimary: {
         elevation: number;
+        errorInputBorderColor: string;
+        optionFillDisabled: string;
+        optionTextColorDisabled: string;
+        badgeAppearance: string;
+        clearIconFill: string;
+        dropdownIconFill: string;
+        groupFill: string;
+        groupTextColor: string;
+        groupTextWeight: string;
         inputBorderColor: string;
         inputBorderColorHover: string;
+        inputCaretColor: string;
         inputFill: string;
-        inputShape: string;
         inputTextColor: string;
+        loaderAppearance: string;
+        loadingMessageTextColor: string;
+        menuFill: string;
         multipleItemFill: string;
         multipleItemFillHover: string;
+        multipleItemIconFill: string;
+        multipleItemTextColor: string;
         multipleTextColor: string;
-        noOptionsText: string;
         noOptionsTextColor: string;
+        optionBorder: string;
         optionFill: string;
+        optionFillActive: string;
+        optionFillActiveHover: string;
         optionFillHover: string;
+        optionSelectedIconFillIcon: string;
         optionTextColor: string;
-        placeholder: string;
+        optionTextColorActive: string;
         placeholderTextColor: string;
+        requiredInputBorderColor: string;
     };
 };
 export { selectAppearanceDefault };

package/dist/types/components/Select/appearance/selectDisabled.d.ts

@@ -0,0 +1,31 @@
+declare const selectAppearanceDisabled: {
+    disabledPrimary: {
+        elevation: number;
+        errorInputBorderColor: string;
+        badgeAppearance: string;
+        clearIconFill: string;
+        dropdownIconFill: string;
+        headingFill: string;
+        headingTextColor: string;
+        inputBorderColor: string;
+        inputBorderColorHover: string;
+        inputCaretColor: string;
+        inputFill: string;
+        inputShape: string;
+        inputTextColor: string;
+        multipleItemFill: string;
+        multipleItemFillHover: string;
+        multipleItemIconFill: string;
+        multipleItemTextColor: string;
+        multipleTextColor: string;
+        noOptionsTextColor: string;
+        optionBorder: string;
+        optionFill: string;
+        optionFillHover: string;
+        optionShape: string;
+        optionTextColor: string;
+        placeholderTextColor: string;
+        requiredInputBorderColor: string;
+    };
+};
+export { selectAppearanceDisabled };

package/dist/types/components/Select/appearance/selectError.d.ts

@@ -0,0 +1,31 @@
+declare const selectAppearanceError: {
+    errorPrimary: {
+        elevation: number;
+        errorInputBorderColor: string;
+        badgeAppearance: string;
+        clearIconFill: string;
+        dropdownIconFill: string;
+        headingFill: string;
+        headingTextColor: string;
+        inputBorderColor: string;
+        inputBorderColorHover: string;
+        inputCaretColor: string;
+        inputFill: string;
+        inputShape: string;
+        inputTextColor: string;
+        multipleItemFill: string;
+        multipleItemFillHover: string;
+        multipleItemIconFill: string;
+        multipleItemTextColor: string;
+        multipleTextColor: string;
+        noOptionsTextColor: string;
+        optionBorder: string;
+        optionFill: string;
+        optionFillHover: string;
+        optionShape: string;
+        optionTextColor: string;
+        placeholderTextColor: string;
+        requiredInputBorderColor: string;
+    };
+};
+export { selectAppearanceError };

package/dist/types/components/Select/appearance/selectRequire.d.ts

@@ -0,0 +1,31 @@
+declare const selectAppearanceRequire: {
+    requirePrimary: {
+        elevation: number;
+        errorInputBorderColor: string;
+        badgeAppearance: string;
+        clearIconFill: string;
+        dropdownIconFill: string;
+        headingFill: string;
+        headingTextColor: string;
+        inputBorderColor: string;
+        inputBorderColorHover: string;
+        inputCaretColor: string;
+        inputFill: string;
+        inputShape: string;
+        inputTextColor: string;
+        multipleItemFill: string;
+        multipleItemFillHover: string;
+        multipleItemIconFill: string;
+        multipleItemTextColor: string;
+        multipleTextColor: string;
+        noOptionsTextColor: string;
+        optionBorder: string;
+        optionFill: string;
+        optionFillHover: string;
+        optionShape: string;
+        optionTextColor: string;
+        placeholderTextColor: string;
+        requiredInputBorderColor: string;
+    };
+};
+export { selectAppearanceRequire };

package/dist/types/components/Select/appearance/selectShape.d.ts

@@ -0,0 +1,22 @@
+declare const selectAppearanceShape: {
+    rounded: {
+        shape: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+};
+export { selectAppearanceShape };

package/dist/types/components/Select/appearance/selectSize.d.ts

@@ -1,7 +1,108 @@
 declare const selectAppearanceSize: {
+    sizeXXL: {
+        size: string;
+        textLoadingMessageAppearance: string;
+        badgeSize: string;
+        badgeTextSize: string;
+        clearIcon: string;
+        dividerSize: string;
+        dropdownIcon: string;
+        groupTextSize: string;
+        headingTextWeight: string;
+        inputTextSize: string;
+        menuItemSize: string;
+        multipleItemIcon: string;
+        multipleItemTextSize: string;
+        noOptionsTextSize: string;
+        optionTextSize: string;
+        placeholderTextSize: string;
+    };
+    sizeXL: {
+        size: string;
+        textLoadingMessageAppearance: string;
+        badgeSize: string;
+        badgeTextSize: string;
+        clearIcon: string;
+        dividerSize: string;
+        dropdownIcon: string;
+        groupTextSize: string;
+        headingTextWeight: string;
+        inputTextSize: string;
+        menuItemSize: string;
+        multipleItemIcon: string;
+        multipleItemTextSize: string;
+        noOptionsTextSize: string;
+        optionTextSize: string;
+        placeholderTextSize: string;
+    };
     sizeM: {
         size: string;
+        textLoadingMessageAppearance: string;
+        badgeSize: string;
+        badgeTextSize: string;
+        clearIcon: string;
+        dividerSize: string;
+        dropdownIcon: string;
+        groupTextSize: string;
+        inputTextSize: string;
+        loadingMessageTextSize: string;
+        menuItemSize: string;
+        multipleItemIcon: string;
+        multipleItemTextSize: string;
+        noOptionsTextSize: string;
+        optionSelectedIcon: string;
+        optionTextSize: string;
+        placeholderTextSize: string;
+    };
+    sizeS: {
+        size: string;
+        textLoadingMessageAppearance: string;
+        badgeSize: string;
+        badgeTextSize: string;
+        clearIcon: string;
+        dividerSize: string;
+        dropdownIcon: string;
+        groupTextSize: string;
+        headingTextWeight: string;
+        inputTextSize: string;
+        menuItemSize: string;
+        multipleItemIcon: string;
+        multipleItemTextSize: string;
+        noOptionsTextSize: string;
+        optionTextSize: string;
+        placeholderTextSize: string;
+    };
+    sizeXS: {
+        size: string;
+        textLoadingMessageAppearance: string;
+        badgeSize: string;
+        badgeTextSize: string;
+        clearIcon: string;
+        dividerSize: string;
+        dropdownIcon: string;
+        groupTextSize: string;
+        headingTextWeight: string;
+        inputTextSize: string;
+        menuItemSize: string;
+        multipleItemIcon: string;
+        multipleItemTextSize: string;
+        noOptionsTextSize: string;
+        optionTextSize: string;
+        placeholderTextSize: string;
+    };
+    sizeXXS: {
+        size: string;
+        textLoadingMessageAppearance: string;
+        badgeSize: string;
+        badgeTextSize: string;
+        clearIcon: string;
+        dividerSize: string;
+        dropdownIcon: string;
+        groupTextSize: string;
+        headingTextWeight: string;
         inputTextSize: string;
+        menuItemSize: string;
+        multipleItemIcon: string;
         multipleItemTextSize: string;
         noOptionsTextSize: string;
         optionTextSize: string;

package/dist/types/components/Select/appearance/selectStyle.d.ts

@@ -0,0 +1,16 @@
+declare const selectAppearanceStyle: {
+    solid: {
+        inputBorderColor: string;
+        inputBorderColorHover: string;
+    };
+    outlined: {
+        fill: string;
+    };
+    full: {};
+    ghost: {
+        fill: string;
+        inputBorderColor: string;
+        inputBorderColorHover: string;
+    };
+};
+export { selectAppearanceStyle };

package/dist/types/components/Select/appearance/selectSuccess.d.ts

@@ -0,0 +1,33 @@
+declare const selectAppearanceSuccess: {
+    successPrimary: {
+        elevation: number;
+        errorInputBorderColor: string;
+        badgeAppearance: string;
+        clearIconFill: string;
+        dropdownIconFill: string;
+        headingFill: string;
+        headingTextColor: string;
+        inputBorderColor: string;
+        inputBorderColorHover: string;
+        inputCaretColor: string;
+        inputFill: string;
+        inputShape: string;
+        inputTextColor: string;
+        multipleItemFill: string;
+        multipleItemFillHover: string;
+        multipleItemIconFill: string;
+        multipleItemTextColor: string;
+        multipleTextColor: string;
+        noOptionsText: string;
+        noOptionsTextColor: string;
+        optionBorder: string;
+        optionFill: string;
+        optionFillHover: string;
+        optionShape: string;
+        optionTextColor: string;
+        placeholder: string;
+        placeholderTextColor: string;
+        requiredInputBorderColor: string;
+    };
+};
+export { selectAppearanceSuccess };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.90",
+  "version": "1.8.92",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -101,9 +101,9 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
-    "@itcase/common": "^1.2.28",
+    "@itcase/common": "^1.2.29",
     "@itcase/icons": "^1.2.19",
-    "@itcase/storybook-config": "^1.1.78",
+    "@itcase/storybook-config": "^1.1.91",
     "@itcase/tokens-am": "^1.1.19",
     "@itcase/tokens-baikal": "^1.1.17",
     "@itcase/tokens-palette": "^1.1.11",
@@ -168,9 +168,9 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^9.1.0",
-    "eslint": "9.32.0",
+    "eslint": "9.33.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.4",
+    "lint-staged": "^16.1.5",
     "prettier": "^3.6.2",
     "react-docgen-typescript": "^2.4.0",
     "rollup": "^4.46.2",
@@ -179,8 +179,8 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.7",
-    "storybook": "^9.1.1",
-    "stylelint": "^16.23.0",
+    "storybook": "^9.1.2",
+    "stylelint": "^16.23.1",
     "typescript": "^5.9.2"
   }
 }

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

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

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

@@ -1,12 +0,0 @@
-.select {
-  &__control {
-    &_shape {
-      &_rounded {
-        border-radius: var(--select-control-shape-rounded);
-      }
-      &_circular {
-        border-radius: 50%;
-      }
-    }
-  }
-}