@itcase/ui 1.8.5 → 1.8.10

package/dist/components/Tile.js

@@ -3,9 +3,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge } from '../Badge_es_Bx0NsdST.js';
+import { B as Badge } from '../Badge_es_uDX0eyDM.js';
 import { T as Text } from '../Text_es_FJGduy7Z.js';
-import { T as Title } from '../Title_es_ke3YylFm.js';
+import { T as Title } from '../Title_es_eejUqSJf.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -19,10 +19,10 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon_es_BBmoZ7_3.js';
+import '../Icon_es_B0sySEUu.js';
 import 'react-inlinesvg';
 import '../Link_es_DkW06IM-.js';
-import '../Tooltip_es_H976MIb7.js';
+import '../Tooltip_es_B9hN4Zlm.js';
 
 var tileAppearance = {
     dev: {},

package/dist/components/Title.js

@@ -1,19 +1,19 @@
-export { T as Title, a as titleAppearance, t as titleConfig } from '../Title_es_ke3YylFm.js';
+export { T as Title, a as titleAppearance, t as titleConfig } from '../Title_es_eejUqSJf.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import 'uuid';
 import '@itcase/common';
 import '../context/UIContext.js';
-import 'lodash/camelCase';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import 'lodash/castArray';
-import 'lodash/upperFirst';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip_es_H976MIb7.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip_es_B9hN4Zlm.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -18,4 +18,4 @@ import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Text_es_FJGduy7Z.js';
-import '../Title_es_ke3YylFm.js';
+import '../Title_es_eejUqSJf.js';

package/dist/css/components/Checkbox/Checkbox.css

@@ -121,4 +121,7 @@
 :root {
   --checkbox-column-gap: 12px;
   --checkbox-row-gap: 4px;
+  --checkbox-success-border: var(--color-success-border-secondary);
+  --checkbox-error-border: var(--color-error-border-secondary);
+  --checkbox-focus-border: var(--color-surface-border-quaternary);
 }

package/dist/css/components/Choice/Choice.css

@@ -66,9 +66,13 @@
   display: flex;
   &__before {
     margin: 2px 0;
+    display: flex;
+    align-items: center;
   }
   &__after {
     margin: 2px 0;
+    display: flex;
+    align-items: center;
   }
 }
 .choice {

package/dist/css/components/DadataHintField/DadataHintField.css

@@ -23,7 +23,7 @@
     }
   }
   &--highlighted {
-    color: var(--color-accent-primary);
+    color: var(--color-accent-fill-primary);
   }
   & .input_state {
     &_error {

package/dist/css/components/DatePicker/DatePicker.css

@@ -1242,6 +1242,7 @@ h2.react-datepicker__current-month {
   width: 100%;
   border-radius: var(--date-picker-day-border-radius);
   &__input {
+    width: 100%;
     border-radius: var(--date-picker-day-border-radius);
   }
 }
@@ -1290,14 +1291,11 @@ h2.react-datepicker__current-month {
   --date-picker-fill: var(--color-surface-fill-primary);
   --date-picker-box-shadow: 0px 4px 24px 0px rgb(0, 0, 0, 0.2);
   --date-picker-border-radius: 12px;
-  --date-picker-border: solid 1px var(--color-surface-tertiary);
+  --date-picker-border: solid 1px var(--color-surface-fill-tertiary);
 
   --date-picker-input-container-padding: 9px 15px;
   --date-picker-input-border-radius: 6px;
 
-  --date-picker-name-size: 16px;
-
-  --date-picker-name-weight: 400;
   --date-picker-selected-weight: 400;
   --date-picker-week-width: 40px;
   --date-picker-week-height: 40px;
@@ -1309,10 +1307,12 @@ h2.react-datepicker__current-month {
   --date-picker-week-number-fill-hover: #eee;
   --date-picker-week-number-text-color: var(--color-surface-text-quaternary);
 
+  --date-picker-name-size: 16px;
+  --date-picker-name-weight: 400;
   --date-picker-day-name-text-size: 16px;
   --date-picker-day-name-text-line-height: 18px;
   --date-picker-day-name-text-weight: normal;
-  --date-picker-day-name-text-color: var(--color-surface-text-secondary);
+  --date-picker-day-name-text-color: var(--color-surface-text-quaternary);
 
   --date-picker-day-width: 40px;
   --date-picker-day-height: 40px;
@@ -1321,16 +1321,16 @@ h2.react-datepicker__current-month {
   --date-picker-day-text-weight: normal;
   --date-picker-day-text-color: var(--color-surface-text-primary);
   --date-picker-day-padding: 8px 0;
-  --date-picker-day-hover-background: var(--color-accent-tertiary);
+  --date-picker-day-hover-background: var(--color-accent-fill-tertiary);
   --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
   --date-picker-day-border-radius: 8px;
 
-  --date-picker-day-today-background: var(--color-surface-secondary);
+  --date-picker-day-today-background: var(--color-surface-fill-secondary);
   --date-picker-day-today-border-radius: 12px;
   --date-picker-day-today-text-color: var(--color-surface-text-primary);
 
   --date-picker-day-range-start-end-border-radius: 8px;
-  --date-picker-day-range-background: var(--color-accent-tertiary);
+  --date-picker-day-range-background: var(--color-accent-fill-tertiary);
   --date-picker-day-range-text-color: var(--color-accent-text-secondary);
   --date-picker-day-range-border-radius: 0;
   --date-picker-day-range-start-border-radius: 12px 0 0 12px;
@@ -1342,10 +1342,8 @@ h2.react-datepicker__current-month {
     --color-secondary-text-disabled
   );
 
-  --date-picker-day-selected-background: var(--color-accent-primary);
-  --date-picker-day-selected-background-hover: var(
-    --color-accent-primary-hover
-  );
+  --date-picker-day-selected-background: var(--color-accent-fill-primary);
+  --date-picker-day-selected-background-hover: var(--color-accent-fill-hover);
   --date-picker-day-selected-text-color: var(--color-accent-text-primary);
   --date-picker-day-selected-text-hover-color: var(--color-accent-text-primary);
 

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/Input/Input.css

@@ -79,7 +79,7 @@
   --input-size-xl-padding: 13px 20px;
   --input-size-xxl-padding: 17px 25px;
 
-  --input-caret-color: var(--color-accent-primary);
+  --input-caret-color: var(--color-accent-fill-primary);
 
   /* State */
   --input-state-success-background: none;

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

@@ -87,6 +87,6 @@
   --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);
+  --input-password-caret-color: var(--color-accent-fill-primary);
   --input-password-shape-rounded: 0;
 }

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

@@ -131,11 +131,11 @@
   --paginator-item-transition: all 0.2s ease 0s;
 
   --paginator-item-default-fill: var(--color-surface-fill-primary);
-  --paginator-item-default-fill-hover: var(--color-surface-hover);
+  --paginator-item-default-fill-hover: var(--color-surface-fill-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-fill: var(--color-accent-fill-primary);
+  --paginator-item-active-fill-hover: var(--color-accent-fill-primary);
   --paginator-item-active-text: var(--color-accent-text-primary);
 
   --paginator-item-disabled-fill: none;

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/Switch/Switch.css

@@ -31,7 +31,7 @@
     appearance: none;
     &:checked {
       & + .switch__bg {
-        background: var(--color-accent-primary);
+        background: var(--color-accent-fill-primary);
       }
       & ~ .switch__toggle {
         background: var(--color-accent-item-primary);

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;
     };
 };