indicator-ui 0.0.327 → 0.0.329

package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-white.scss

@@ -1,35 +1,40 @@
 @use '../../../../../styles' as *;
 
-@mixin tertiaryWhiteButton {
-  border: 1px solid transparent;
-  .icon {
-    @include modify-svg($stroke: var(--blue-dark-100));
+@mixin tertiaryWhiteButton-hover-state {
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--base-white));
+    }
   }
 
-  .text {
-    @include fnt-flex($weight: 400, $color: var(--blue-dark-100));
+  .icon {
+    @include modify-svg($stroke: var(--base-white));
   }
+}
 
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled) {
-      .text {
-        color: var(--base-white);
-      }
+@mixin tertiaryWhiteButton {
+  border: 1px solid transparent;
 
-      .icon {
-        @include modify-svg($stroke: var(--base-white));
-      }
+  .icon {
+    @include modify-svg($stroke: var(--primary-100));
+  }
+
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--primary-100));
     }
   }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      .text {
-        color: var(--base-white);
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
+        @include tertiaryWhiteButton-hover-state;
       }
+    }
 
-      .icon {
-        @include modify-svg($stroke: var(--base-white));
+    @include tablet {
+      &:active {
+        @include tertiaryWhiteButton-hover-state;
       }
     }
   }

package/dist/scss/ui/Buttons/styles/mixins/properties/ultra.scss

@@ -14,8 +14,16 @@
     }
   }
 
-  .text {
+  .content {
     padding: 0 12px;
-    @include fnt-flex($size: 18, $line-height: 24, $family: $golos-ui);
+    gap: 4px;
+
+    .text {
+      @include fnt-flex($size: 18, $line-height: 24, $weight: 500, $family: $golos-ui);
+    }
+
+    .textSecondary {
+      @include fnt-flex($size: 18, $line-height: 24, $weight: 400, $family: $golos-ui);
+    }
   }
 }

package/dist/scss/ui/Buttons/styles/mixins/properties/warning-link-color.scss

@@ -5,31 +5,36 @@
     @include modify-svg($stroke: var(--error-500));
   }
 
-  .text {
+  .content {
     padding: 0 !important;
-    @include fnt-flex($weight: 400, $color: var(--error-500));
+
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--error-500));
+    }
   }
 
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled):not(:active) {
-      .text {
-        color: var(--error-700);
-      }
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
+        .text {
+          color: var(--error-700);
+        }
 
-      .icon {
-        @include modify-svg($stroke: var(--error-700));
+        .icon {
+          @include modify-svg($stroke: var(--error-700));
+        }
       }
     }
-  }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      .text {
-        color: var(--error-700);
-      }
+    @include tablet {
+      &:active {
+        .text {
+          color: var(--error-700);
+        }
 
-      .icon {
-        @include modify-svg($stroke: var(--error-700));
+        .icon {
+          @include modify-svg($stroke: var(--error-700));
+        }
       }
     }
   }

package/dist/scss/ui/Buttons/styles/mixins/properties/warning-primary.scss

@@ -6,22 +6,24 @@
   border: 1px solid transparent;
   box-shadow: 0 1px 2px 0 #1018280D;
 
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled) {
-      border: 1px solid var(--error-600);
-      background-color: var(--error-600);
-    }
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
+        border: 1px solid var(--error-600);
+        background-color: var(--error-600);
+      }
 
-    &:active:not(.disabled):not(:disabled) {
-      border: 1px solid var(--error-500);
-      background-color: var(--error-500);
+      &:active {
+        border: 1px solid var(--error-500);
+        background-color: var(--error-500);
+      }
     }
-  }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      border: 1px solid var(--error-600);
-      background-color: var(--error-600);
+    @include tablet {
+      &:active {
+        border: 1px solid var(--error-600);
+        background-color: var(--error-600);
+      }
     }
   }
 

package/dist/scss/ui/Buttons/styles/mixins/properties/warning-secondary-color.scss

@@ -9,21 +9,25 @@
     @include modify-svg($stroke: var(--error-500));
   }
 
-  .text {
-    color: var(--error-500);
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--error-500));
+    }
   }
 
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled):not(:active) {
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
         background-color: var(--error-50);
         border: 1px solid var(--error-400);
+      }
     }
-  }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
+    @include tablet {
+      &:active {
         background-color: var(--error-50);
         border: 1px solid var(--error-400);
+      }
     }
   }
 

package/dist/scss/ui/CheckboxMark/styles/mixins/base.scss

@@ -1,8 +1,8 @@
 @use '../../../../styles' as *;
 
 @mixin checkbox-mark-base-hover() {
-  background-color: var(--blue-dark-50);
-  border: 1px solid var(--blue-dark-200);
+  background-color: var(--primary-50);
+  border: 1px solid var(--primary-200);
 }
 
 @mixin checkbox-mark-base() {

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/checked.scss

@@ -1,14 +1,14 @@
 @use '../../../../../styles' as *;
 
 @mixin checked-hover() {
-  border: 1px solid var(--blue-dark-400);
+  border: 1px solid var(--primary-400);
 }
 
 @mixin checked() {
-  background-color: var(--blue-dark-50);
-  border: 1px solid var(--blue-dark-200);
+  background-color: var(--primary-50);
+  border: 1px solid var(--primary-200);
 
-  @include modify-svg($stroke: var(--blue-dark-500));
+  @include modify-svg($stroke: var(--primary-500));
 
   &:after {
     display: block;

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/correct.scss

@@ -1,7 +1,7 @@
 @use '../../../../../styles' as *;
 
 @mixin correct-checked-hover() {
-  background-color: var(--blue-dark-600);
+  background-color: var(--primary-600);
 
   border: transparent;
 }
@@ -13,7 +13,7 @@
 }
 
 @mixin correct-checked() {
-  background-color: var(--blue-dark-500);
+  background-color: var(--primary-500);
 
   border: transparent;
   @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--base-white));

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/indeterminate.scss

@@ -1,15 +1,15 @@
 @use '../../../../../styles' as *;
 
 @mixin indeterminate-hover() {
-  border: 1px solid var(--blue-dark-400);
+  border: 1px solid var(--primary-400);
 }
 
 @mixin indeterminate() {
-  background-color: var(--blue-dark-50);
-  border: 1px solid var(--blue-dark-200);
+  background-color: var(--primary-50);
+  border: 1px solid var(--primary-200);
 
-  @include modify-svg($stroke: var(--blue-dark-500));
-  @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--blue-dark-500));
+  @include modify-svg($stroke: var(--primary-500));
+  @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--primary-500));
 
   @include tablet-plus {
     &:hover {

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/radio.scss

@@ -10,6 +10,6 @@
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background-color: var(--blue-dark-500);
+    background-color: var(--primary-500);
   }
 }

package/dist/scss/ui/InputFields/InputFieldWrapper/styles/mixins/inputFieldWrapper.scss

@@ -41,8 +41,8 @@
       padding: 0 12px;
       gap: 2px;
       cursor: pointer;
-      @include changeSvg($width: 20, $height: 20, $stroke: var(--blue-dark-500), $flex: none);
-      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: var(--blue-dark-500));
+      @include changeSvg($width: 20, $height: 20, $stroke: var(--primary-500), $flex: none);
+      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: var(--primary-500));
     }
 
     @content;

package/dist/scss/ui/MicroButton/styles/mixins/properties/blue-light.scss

@@ -3,17 +3,17 @@
 @mixin blue-light() {
   background: none;
   border: 1px solid transparent;
-  @include modify-svg($stroke: var(--blue-dark-50));
+  @include modify-svg($stroke: var(--primary-50));
 
   @include tablet-plus {
     &:not(&:disabled):hover {
-      @include modify-svg($stroke: var(--blue-dark-200));
+      @include modify-svg($stroke: var(--primary-200));
     }
   }
 
   @include tablet {
     &:active {
-      @include modify-svg($stroke: var(--blue-dark-200));
+      @include modify-svg($stroke: var(--primary-200));
     }
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/color-fill.scss

@@ -2,20 +2,20 @@
 
 @mixin color-fill() {
   background: var(--base-white);
-  border: 1px solid var(--blue-dark-200);
-  @include modify-svg($stroke: var(--blue-dark-500));
+  border: 1px solid var(--primary-200);
+  @include modify-svg($stroke: var(--primary-500));
 
   @include tablet-plus {
     &:not(&:disabled):hover {
-      background: var(--blue-dark-50);
-      @include modify-svg($stroke: var(--blue-dark-500));
+      background: var(--primary-50);
+      @include modify-svg($stroke: var(--primary-500));
     }
   }
 
   @include tablet {
     &:active {
-      background: var(--blue-dark-50);
-      @include modify-svg($stroke: var(--blue-dark-500));
+      background: var(--primary-50);
+      @include modify-svg($stroke: var(--primary-500));
     }
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/color-hover.scss

@@ -3,19 +3,19 @@
 @mixin color-hover() {
   background: none;
   border: 1px solid transparent;
-  @include modify-svg($stroke: var(--blue-dark-400));
+  @include modify-svg($stroke: var(--primary-400));
 
   @include tablet-plus {
     &:not(&:disabled):hover {
-      background-color: var(--blue-dark-100);
-      @include modify-svg($stroke: var(--blue-dark-500));
+      background-color: var(--primary-100);
+      @include modify-svg($stroke: var(--primary-500));
     }
   }
 
   @include tablet {
     &:active {
-      background-color: var(--blue-dark-100);
-      @include modify-svg($stroke: var(--blue-dark-500));
+      background-color: var(--primary-100);
+      @include modify-svg($stroke: var(--primary-500));
     }
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/color.scss

@@ -3,19 +3,19 @@
 @mixin color() {
   background: none;
   border: 1px solid transparent;
-  @include modify-svg($stroke: var(--blue-dark-500));
+  @include modify-svg($stroke: var(--primary-500));
 
   @include tablet-plus {
     &:not(&:disabled):hover {
       background-color: var(--base-white);
-      @include modify-svg($stroke: var(--blue-dark-600));
+      @include modify-svg($stroke: var(--primary-600));
     }
   }
 
   @include tablet {
     &:active {
       background-color: var(--base-white);
-      @include modify-svg($stroke: var(--blue-dark-600));
+      @include modify-svg($stroke: var(--primary-600));
     }
   }
 }

package/dist/scss/ui/Tag/styles/properties/active.scss

@@ -1,16 +1,16 @@
 @use '../../../../styles' as *;
 
 @mixin active() {
-  border: 1px solid var(--blue-dark-200);
-  background-color: var(--blue-dark-50);
+  border: 1px solid var(--primary-200);
+  background-color: var(--primary-50);
 
   &:hover {
-    border: 1px solid var(--blue-dark-300);
-    background-color: var(--blue-dark-100);
+    border: 1px solid var(--primary-300);
+    background-color: var(--primary-100);
   }
 }
 
 @mixin active-hover() {
-  border: 1px solid var(--blue-dark-300);
-  background-color: var(--blue-dark-100);
+  border: 1px solid var(--primary-300);
+  background-color: var(--primary-100);
 }

package/dist/scss/ui/ToggleBase/styles/mixins/active.scss

@@ -1,5 +1,5 @@
 @mixin active() {
-  background-color: var(--blue-dark-500);
+  background-color: var(--primary-500);
 }
 
 @mixin active-spacer() {

package/dist/scss/ui/ToggleBase/styles/mixins/disabled.scss

@@ -1,4 +1,5 @@
 @mixin disabled-base() {
   cursor: default;
+  pointer-events: none;
   opacity: 0.5;
 }

package/dist/scss/ui/ToggleBase/styles/mixins/hover.scss

@@ -3,7 +3,7 @@
 }
 
 @mixin hover-active() {
-  background-color: var(--blue-dark-600);
+  background-color: var(--primary-600);
 }
 
 @mixin hover-error() {

package/dist/types/src/hooks/useSmartPosition.d.ts

@@ -26,6 +26,12 @@ type PropsType = [
         weights?: WeightTableType;
     }
 ];
+type FunReturnType = {
+    /**
+     * Вызывайте для пересчета позиции, пригодиться если поменяли рефки.
+     * */
+    recalc: () => void;
+};
 /**
  * Хук для умного позиционирования элемента.
  *
@@ -37,10 +43,10 @@ type PropsType = [
  * @param [options.position='fixed']
  * @param [options.offset=4]
  *
- * @returns void
+ * @returns FunReturnType
  *
  * @example
  * @param args
  */
-export declare function useSmartPosition(...args: PropsType): void;
+export declare function useSmartPosition(...args: PropsType): FunReturnType;
 export {};

package/dist/types/src/ui/Buttons/types/ButtonTypes.d.ts

@@ -13,6 +13,8 @@ export type ButtonPropsType = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     children?: React.ReactNode;
     /** Текст внутри кнопки */
     text?: React.ReactNode;
+    /** Второй текст внутри кнопки */
+    textSecondary?: React.ReactNode;
     /** Иконка слева */
     iconLeft?: React.ReactNode;
     /** Иконка справа */

package/dist/types/src/ui/Buttons/ui/Button.d.ts

@@ -4,6 +4,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<React.ButtonHT
     hierarchy?: import("../types").ButtonHierarchyType;
     children?: React.ReactNode;
     text?: React.ReactNode;
+    textSecondary?: React.ReactNode;
     iconLeft?: React.ReactNode;
     iconRight?: React.ReactNode;
     warning?: boolean;

package/dist/types/src/ui/DateTimePicker/ui/DateTimePickerSmart.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { DateTimePicker } from "../../../ui";
+import { PropsOf } from "../../../../../types";
+import { useSmartPosition } from "../../../hooks";
+type PositionType = Parameters<typeof useSmartPosition>[1]['position'];
+type PropsType<T extends HTMLElement = HTMLElement> = PropsOf<typeof DateTimePicker> & {
+    isShow: boolean;
+    close: () => void;
+    parentRef: React.RefObject<T>;
+    className?: string;
+    position?: PositionType;
+};
+export declare function DateTimePickerSmart(props: PropsType): JSX.Element;
+export {};

package/dist/types/src/ui/DateTimePicker/ui/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./DateTimePicker";
+export * from "./DateTimePickerSmart";
 export * from "./components";
 export * from "./parts";
 export * from "./pickers";

package/dist/types/src/ui/InputFields/DateTimeField/types/DateFieldTypes.d.ts

@@ -1,2 +1,11 @@
 import { DateTimeFieldPropsType } from "../../../../ui";
-export type DateFieldPropsType = Omit<DateTimeFieldPropsType, 'iconTime' | 'textTime' | 'timePlaceholder' | 'timeFormat'>;
+import { useSmartPosition } from "../../../../hooks";
+type PositionType = Parameters<typeof useSmartPosition>[1]['position'];
+export type DateFieldPropsType = Omit<DateTimeFieldPropsType, 'iconTime' | 'textTime' | 'timePlaceholder' | 'timeFormat'> & {
+    /** Определяет, как будет располагать пикер даты (fixed, absolute).
+     * В нужной ситуации можно использовать разные подходы,
+     * но стоит учитывать, что поведение у них немного разное.
+     * */
+    position?: PositionType;
+};
+export {};

package/dist/types/src/ui/InputFields/DateTimeField/types/DateTimeFieldTypes.d.ts

@@ -1,6 +1,8 @@
 import { FieldsBasePropsType } from "../../FieldsBase";
 import { FormatNameType } from "../../../../lib";
 import React from "react";
+import { useSmartPosition } from "../../../../hooks";
+type PositionType = Parameters<typeof useSmartPosition>[1]['position'];
 export type DateTimeFieldValueType = string;
 export type DateTimeFieldPropsType = FieldsBasePropsType<DateTimeFieldValueType> & {
     /**
@@ -43,4 +45,10 @@ export type DateTimeFieldPropsType = FieldsBasePropsType<DateTimeFieldValueType>
     /** Показать или спрятать кнопку отчистки поля */
     clearButton?: boolean;
     width?: 'fill' | 'hug';
+    /** Определяет, как будет располагать пикер даты (fixed, absolute).
+     * В нужной ситуации можно использовать разные подходы,
+     * но стоит учитывать, что поведение у них немного разное.
+     * */
+    position?: PositionType;
 };
+export {};

package/dist/types/src/ui/InputFields/DateTimeField/types/TimeFieldTypes.d.ts

@@ -1,2 +1,11 @@
 import { DateTimeFieldPropsType } from "../../../../ui";
-export type TimeFieldPropsType = Omit<DateTimeFieldPropsType, 'iconDate' | 'textDate' | 'datePlaceholder' | 'dateFormat'>;
+import { useSmartPosition } from "../../../../hooks";
+type PositionType = Parameters<typeof useSmartPosition>[1]['position'];
+export type TimeFieldPropsType = Omit<DateTimeFieldPropsType, 'iconDate' | 'textDate' | 'datePlaceholder' | 'dateFormat'> & {
+    /** Определяет, как будет располагать пикер даты (fixed, absolute).
+     * В нужной ситуации можно использовать разные подходы,
+     * но стоит учитывать, что поведение у них немного разное.
+     * */
+    position?: PositionType;
+};
+export {};

package/dist/types/src/ui/InputFields/DateTimeField/ui/DateField.d.ts

@@ -1,2 +1,2 @@
 import { DateFieldPropsType } from "../../../../ui";
-export declare function DateField({ value, onChange, dateFormat, outFormat, additionStyle, datePlaceholder, iconDate, textDate, clearButton, isError, disabled, onFocus, onBlur, width, ...props }: DateFieldPropsType): JSX.Element;
+export declare function DateField({ value, onChange, dateFormat, outFormat, additionStyle, datePlaceholder, iconDate, textDate, clearButton, isError, disabled, onFocus, onBlur, width, position, ...props }: DateFieldPropsType): JSX.Element;

package/dist/types/src/ui/InputFields/DateTimeField/ui/DateTimeField.d.ts

@@ -1,2 +1,2 @@
 import { DateTimeFieldPropsType } from "../types";
-export declare function DateTimeField({ value, onChange, dateFormat, timeFormat, outFormat, additionStyle, datePlaceholder, timePlaceholder, iconDate, iconTime, textDate, textTime, clearButton, isError, disabled, onFocus, onBlur, width, ...props }: DateTimeFieldPropsType): JSX.Element;
+export declare function DateTimeField({ value, onChange, dateFormat, timeFormat, outFormat, additionStyle, datePlaceholder, timePlaceholder, iconDate, iconTime, textDate, textTime, clearButton, isError, disabled, onFocus, onBlur, width, position, ...props }: DateTimeFieldPropsType): JSX.Element;

package/dist/types/src/ui/InputFields/DateTimeField/ui/TimeField.d.ts

@@ -1,2 +1,2 @@
 import { TimeFieldPropsType } from "../../../../ui";
-export declare function TimeField({ value, onChange, timeFormat, outFormat, additionStyle, timePlaceholder, iconTime, textTime, clearButton, isError, disabled, onFocus, onBlur, width, ...props }: TimeFieldPropsType): JSX.Element;
+export declare function TimeField({ value, onChange, timeFormat, outFormat, additionStyle, timePlaceholder, iconTime, textTime, clearButton, isError, disabled, onFocus, onBlur, width, position, ...props }: TimeFieldPropsType): JSX.Element;

package/dist/types/src/ui/InputFields/DateTimeRangeField/types/DateRangeFieldTypes.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import { FieldsBasePropsType } from "../../../../ui";
 import { DateTimeRangeFieldValueType } from "./DateTimeRangeFieldTypes";
+import { useSmartPosition } from "../../../../hooks";
+type PositionType = Parameters<typeof useSmartPosition>[1]['position'];
 export type DateRangeFieldPropsType = FieldsBasePropsType<DateTimeRangeFieldValueType> & {
     firstPlaceholder?: string;
     secondPlaceholder?: string;
@@ -12,4 +14,10 @@ export type DateRangeFieldPropsType = FieldsBasePropsType<DateTimeRangeFieldValu
     clearButton?: boolean;
     width?: 'fill' | 'hug';
     additionsStyles?: string[] | string;
+    /** Определяет, как будет располагать пикер даты (fixed, absolute).
+     * В нужной ситуации можно использовать разные подходы,
+     * но стоит учитывать, что поведение у них немного разное.
+     * */
+    position?: PositionType;
 };
+export {};

package/dist/types/src/ui/InputFields/DateTimeRangeField/ui/DateRangeField.d.ts

@@ -1,2 +1,2 @@
 import { DateRangeFieldPropsType } from "../types";
-export declare function DateRangeField({ value, onChange, secondPlaceholder, firstPlaceholder, secondIcon, disabled, dateFormat, required, firstIcon, onBlur, firstText, secondText, onFocus, isError, clearButton, width, additionsStyles, }: DateRangeFieldPropsType): JSX.Element;
+export declare function DateRangeField({ value, onChange, secondPlaceholder, firstPlaceholder, secondIcon, disabled, dateFormat, required, firstIcon, onBlur, firstText, secondText, onFocus, isError, clearButton, width, additionsStyles, position, }: DateRangeFieldPropsType): JSX.Element;

package/dist/types/src/ui/InputFields/FlexField/index.d.ts

@@ -1,2 +1,2 @@
-export { default as FlexField } from './ui/FlexField';
+export * from './ui';
 export * from './types';

package/dist/types/src/ui/InputFields/FlexField/ui/FlexField.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare const FlexField: React.ForwardRefExoticComponent<import("../../../../ui").FieldsBasePropsType<string> & {
+export declare const FlexField: React.ForwardRefExoticComponent<import("../../../../ui").FieldsBasePropsType<string> & {
     type?: string;
     display?: import("../../../../ui").DisplayTypes;
     name?: string;
@@ -23,4 +23,3 @@ declare const FlexField: React.ForwardRefExoticComponent<import("../../../../ui"
     onButtonClick?: () => void;
     additionStyles?: string | string[];
 } & React.RefAttributes<HTMLDivElement>>;
-export default FlexField;

package/dist/types/src/ui/InputFields/FlexField/ui/index.d.ts

@@ -0,0 +1 @@
+export * from './FlexField';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indicator-ui",
-  "version": "0.0.327",
+  "version": "0.0.329",
   "main": "dist/index.js",
   "types": "dist/types/src/index.d.ts",
   "style": "dist/index.css",