@itcase/ui 1.8.9 → 1.8.10

package/dist/css/components/HeroTitle/HeroTitle.css

@@ -25,12 +25,14 @@
     background-position: -200%;
   }
 }
-.hero-title_size {
-  @each $size in h1, h2, h3, h4, h5, h6 {
-    &_$(size) {
-      padding: 0;
-      margin: 0;
-      @mixin hero_$(size);
+.hero-title {
+  &_size {
+    @each $size in h1, h2, h3, h4, h5, h6 {
+      &_$(size) {
+        padding: 0;
+        margin: 0;
+        @mixin hero_$(size);
+      }
     }
   }
 }
@@ -43,15 +45,17 @@
     }
   }
 }
-.hero-title_direction {
-  &_horizontal {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-  }
-  &_vertical {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+.hero-title {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
   }
 }

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

@@ -91,6 +91,15 @@
   }
 }
 
+.select {
+  &_width {
+    &_fill {
+      width: 100%;
+      min-width: 0;
+    }
+  }
+}
+
 .select {
   &__control {
     position: relative;

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

@@ -1,4 +1,6 @@
 .textarea {
+  width: 100%;
+  min-width: 100%;
   &__input {
     width: 100%;
     min-width: 100%;

package/dist/css/components/Title/Title.css

@@ -25,12 +25,14 @@
     background-position: -200%;
   }
 }
-.title_size {
-  @each $size in h1, h2, h3, h4, h5, h6 {
-    &_$(size) {
-      padding: 0;
-      margin: 0;
-      @mixin $(size);
+.title {
+  &_size {
+    @each $size in h1, h2, h3, h4, h5, h6 {
+      &_$(size) {
+        padding: 0;
+        margin: 0;
+        @mixin $(size);
+      }
     }
   }
 }
@@ -43,15 +45,17 @@
     }
   }
 }
-.title_direction {
-  &_horizontal {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-  }
-  &_vertical {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+.title {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
   }
 }

package/dist/css/styles/placeholder-text-color/placeholder-text-color.css

@@ -14,4 +14,4 @@
       }
     }
   }
-}
+}

package/dist/hooks/useStyles/useStyles.js

@@ -42,6 +42,9 @@ function useStyles(props) {
     const resultStylesGroups = {};
     for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
       let value = null;
+      console.log('propKey');
+      console.log(propKey);
+      console.log('propKey=======');
       const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
       const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(deviceCurrentType.toLowerCase());
 

package/dist/types/components/Checkbox/Checkbox.appearance.d.ts

@@ -1,3 +1,2 @@
-import { CheckboxAppearance, CheckboxState } from 'src/components/Checkbox/Checkbox.interface';
+import { CheckboxAppearance } from './Checkbox.interface';
 export declare const checkboxAppearance: CheckboxAppearance;
-export declare const checkboxState: CheckboxState;

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

@@ -34,7 +34,6 @@ interface CheckboxThemeColor {
 interface CheckboxConfig {
     [key: number | string | symbol]: any;
     appearance: CheckboxAppearance | undefined;
-    state: CheckboxState | undefined;
     setAppearance: (newComponent: CheckboxAppearance) => void;
     setState: (newComponent: CheckboxState) => void;
 }
@@ -55,4 +54,4 @@ interface CheckboxProps extends CheckboxThemeColor, StyleAttributes {
     onChange?: (event?: React.ChangeEvent<HTMLInputElement>) => void;
     onFocus?: (event?: React.FocusEvent<HTMLInputElement>) => void;
 }
-export type { CheckboxThemeColor, CheckboxState, CheckboxAppearance, CheckboxConfig, CheckboxProps, };
+export type { CheckboxThemeColor, CheckboxAppearance, CheckboxConfig, CheckboxProps, };

package/dist/types/components/Checkbox/appearance/checkboxDefault.d.ts

@@ -0,0 +1,26 @@
+declare const checkboxAppearanceDefault: {
+    defaultPrimary: {
+        labelTextColor: string;
+        descTextColor: string;
+        errorStateBorderColor: string;
+        stateBorderColorDisabled: string;
+        stateBorderColorDisabledChecked: string;
+        stateCheckmarkFillDisabled: string;
+        stateFillDisabled: string;
+        stateFillDisabledChecked: string;
+        requiredStateBorderColor: string;
+        stateBorderColor: string;
+        stateBorderColorChecked: string;
+        stateCheckmarkFill: string;
+        stateFillChecked: string;
+    };
+    defaultSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { checkboxAppearanceDefault };

package/dist/types/components/Checkbox/appearance/checkboxDisabled.d.ts

@@ -0,0 +1,20 @@
+declare const checkboxAppearanceDisabled: {
+    disabledPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+    disabledSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { checkboxAppearanceDisabled };

package/dist/types/components/Checkbox/appearance/checkboxError.d.ts

@@ -0,0 +1,20 @@
+declare const checkboxAppearanceError: {
+    errorPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+    errorSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { checkboxAppearanceError };

package/dist/types/components/Checkbox/appearance/checkboxRequire.d.ts

@@ -0,0 +1,20 @@
+declare const checkboxAppearanceRequire: {
+    requirePrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+    requireSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { checkboxAppearanceRequire };

package/dist/types/components/Checkbox/appearance/checkboxSize.d.ts

@@ -0,0 +1,31 @@
+declare const checkboxAppearanceSize: {
+    sizeXXL: {
+        size: string;
+        textSize: string;
+    };
+    sizeXL: {
+        size: string;
+        textSize: string;
+    };
+    sizeL: {
+        size: string;
+        textSize: string;
+    };
+    sizeM: {
+        labelTextSize: string;
+        descTextSize: string;
+    };
+    sizeS: {
+        size: string;
+        textSize: string;
+    };
+    sizeXS: {
+        size: string;
+        textSize: string;
+    };
+    sizeXXS: {
+        size: string;
+        textSize: string;
+    };
+};
+export { checkboxAppearanceSize };

package/dist/types/components/Checkbox/appearance/checkboxStyle.d.ts

@@ -0,0 +1,14 @@
+declare const checkboxAppearanceStyle: {
+    full: {};
+    ghost: {
+        fill: string;
+        borderWidth: string;
+    };
+    outlined: {
+        fill: string;
+    };
+    solid: {
+        borderWidth: string;
+    };
+};
+export { checkboxAppearanceStyle };

package/dist/types/components/Checkbox/appearance/checkboxSuccess.d.ts

@@ -0,0 +1,20 @@
+declare const checkboxAppearanceSuccess: {
+    successPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+    successSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { checkboxAppearanceSuccess };

package/dist/types/components/Checkbox/index.d.ts

@@ -1,2 +1,2 @@
 export { Checkbox, checkboxConfig } from './Checkbox';
-export { checkboxAppearance, checkboxState } from './Checkbox.appearance';
+export { checkboxAppearance } from './Checkbox.appearance';

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

@@ -1,2 +1,7 @@
-declare const chipsAppearanceSize: {};
+declare const chipsAppearanceSize: {
+    sizeM: {
+        size: string;
+        labelTextSize: string;
+    };
+};
 export { chipsAppearanceSize };

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

@@ -8,6 +8,7 @@ declare const chipsAppearanceSurface: {
         labelTextColor: string;
         labelTextHoverColor: string;
         borderColor: string;
+        activeIconItemFill: string;
     };
     surfaceSecondary: {
         fill: string;

package/dist/types/components/DatePicker/DatePicker.appearance.d.ts

@@ -23,66 +23,41 @@ export declare const datePickerAppearance: {
         inputProps: {};
     };
     sizeS: {
-        datePickerProps: {
-            daySize: string;
-            dayTextSize: string;
-            iconFillSize: number;
-        };
-        inputProps: {
-            size: string;
-            textSize: string;
-            clearIconSize: number;
-            clearLabelTextSize: string;
-        };
+        daySize: string;
+        dayTextSize: string;
+        iconFillSize: number;
+        iconLeft: any;
+        iconRight: any;
     };
     sizeM: {
-        datePickerProps: {
-            daySize: string;
-            dayTextSize: string;
-            iconFillSize: number;
-        };
-        inputProps: {
-            size: string;
-            textSize: string;
-            clearIconSize: number;
-            clearLabelTextSize: string;
-        };
+        daySize: string;
+        dayTextSize: string;
+        iconFillSize: number;
+        iconSize: number;
+        monthTextSize: string;
+        yearTextSize: string;
+        iconLeft: any;
+        iconRight: any;
     };
     sizeL: {
-        datePickerProps: {
-            daySize: string;
-            dayTextSize: string;
-            iconFillSize: number;
-        };
-        inputProps: {
-            size: string;
-            textSize: string;
-            clearIconSize: number;
-            clearLabelTextSize: string;
-        };
+        daySize: string;
+        dayTextSize: string;
+        iconFillSize: number;
+        iconLeft: any;
+        iconRight: any;
     };
     surfacePrimary: {
-        datePickerProps: {
-            daySize: string;
-            dayTextColor: string;
-            dayTextShape: string;
-            dayTextSize: string;
-            iconFillHover: string;
-            iconItemFill: string;
-            iconShape: string;
-        };
-        inputProps: {
-            width: string;
-            fill: string;
-            fillHover: string;
-            borderColor: string;
-            textColor: string;
-            caret: string;
-            clearIconItemFill: string;
-            clearIconItemFillHover: string;
-            clearLabelTextColor: string;
-            clearLabelTextColorHover: string;
-            placeholderTextColor: string;
-        };
+        dayTextColor: string;
+        dayTextShape: string;
+        iconFillHover: string;
+        iconItemFill: string;
+        iconShape: string;
+        iconLeft: any;
+        iconRight: any;
+        monthTextColor: string;
+        monthTextWeight: number;
+        placeholderTextColor: string;
+        yearTextColor: string;
+        yearTextWeight: number;
     };
 };

package/dist/types/components/DatePicker/appearance/datePickerSize.d.ts

@@ -1,42 +1,27 @@
 declare const datePickerSize: {
     sizeS: {
-        datePickerProps: {
-            daySize: string;
-            dayTextSize: string;
-            iconFillSize: number;
-        };
-        inputProps: {
-            size: string;
-            textSize: string;
-            clearIconSize: number;
-            clearLabelTextSize: string;
-        };
+        daySize: string;
+        dayTextSize: string;
+        iconFillSize: number;
+        iconLeft: any;
+        iconRight: any;
     };
     sizeM: {
-        datePickerProps: {
-            daySize: string;
-            dayTextSize: string;
-            iconFillSize: number;
-        };
-        inputProps: {
-            size: string;
-            textSize: string;
-            clearIconSize: number;
-            clearLabelTextSize: string;
-        };
+        daySize: string;
+        dayTextSize: string;
+        iconFillSize: number;
+        iconSize: number;
+        monthTextSize: string;
+        yearTextSize: string;
+        iconLeft: any;
+        iconRight: any;
     };
     sizeL: {
-        datePickerProps: {
-            daySize: string;
-            dayTextSize: string;
-            iconFillSize: number;
-        };
-        inputProps: {
-            size: string;
-            textSize: string;
-            clearIconSize: number;
-            clearLabelTextSize: string;
-        };
+        daySize: string;
+        dayTextSize: string;
+        iconFillSize: number;
+        iconLeft: any;
+        iconRight: any;
     };
 };
 export { datePickerSize };

package/dist/types/components/DatePicker/appearance/datePickerSurface.d.ts

@@ -1,27 +1,17 @@
 declare const datePickerAppearanceSurface: {
     surfacePrimary: {
-        datePickerProps: {
-            daySize: string;
-            dayTextColor: string;
-            dayTextShape: string;
-            dayTextSize: string;
-            iconFillHover: string;
-            iconItemFill: string;
-            iconShape: string;
-        };
-        inputProps: {
-            width: string;
-            fill: string;
-            fillHover: string;
-            borderColor: string;
-            textColor: string;
-            caret: string;
-            clearIconItemFill: string;
-            clearIconItemFillHover: string;
-            clearLabelTextColor: string;
-            clearLabelTextColorHover: string;
-            placeholderTextColor: string;
-        };
+        dayTextColor: string;
+        dayTextShape: string;
+        iconFillHover: string;
+        iconItemFill: string;
+        iconShape: string;
+        iconLeft: any;
+        iconRight: any;
+        monthTextColor: string;
+        monthTextWeight: number;
+        placeholderTextColor: string;
+        yearTextColor: string;
+        yearTextWeight: number;
     };
 };
 export { datePickerAppearanceSurface };

package/dist/types/components/Input/appearance/inputDefault.d.ts

@@ -3,22 +3,22 @@ declare const inputAppearanceDefault: {
         fill: string;
         borderColor: string;
         borderHover: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
         textColor: string;
         textColorDisabled: string;
         caret: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
     };
     defaultSecondary: {
         fill: string;
         borderColor: string;
         borderHover: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
-        placeholderTextColor: string;
         textColor: string;
         textColorDisabled: string;
         caret: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
     };
 };
 export { inputAppearanceDefault };

package/package.json

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