indicator-ui 0.1.122 → 0.1.124

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

@@ -1,21 +1,23 @@
 @use '../../../../../styles' as *;
+@use './utils/micro-button-color' as *;
 
 @mixin red-fill() {
-  background: var(--base-white);
-  border: 1px solid var(--error-300);
-  @include modify-svg($stroke: var(--error-500));
+  @include micro-button-color(
+          $prefix: 'red-fill',
+          $background-color: var(--base-white),
+          $border-color: var(--error-300),
+          $icon-color: var(--error-500)
+  );
 
-  @include tablet-plus {
+  @include hover {
+    &:active,
     &:not(&:disabled):hover {
-      background: var(--error-50);
-      @include modify-svg($stroke: var(--error-600));
-    }
-  }
-
-  @include tablet {
-    &:active {
-      background: var(--error-50);
-      @include modify-svg($stroke: var(--error-600));
+      @include micro-button-color(
+              $prefix: 'red-fill-hover',
+              $background-color: var(--error-50),
+              $border-color: var(--error-300),
+              $icon-color: var(--error-600)
+      );
     }
   }
 }

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

@@ -1,21 +1,23 @@
 @use '../../../../../styles' as *;
+@use './utils/micro-button-color' as *;
 
 @mixin red-hover() {
-  background: none;
-  border: 1px solid transparent;
-  @include modify-svg($stroke: var(--error-400));
+  @include micro-button-color(
+          $prefix: 'error-hover',
+          $background-color: transparent,
+          $border-color: transparent,
+          $icon-color: var(--error-400)
+  );
 
-  @include tablet-plus {
+  @include hover {
+    &:active,
     &:not(&:disabled):hover {
-      background-color: var(--error-100);
-      @include modify-svg($stroke: var(--error-500));
-    }
-  }
-
-  @include tablet {
-    &:active {
-      background-color: var(--error-100);
-      @include modify-svg($stroke: var(--error-500));
+      @include micro-button-color(
+              $prefix: 'error-hover-hover',
+              $background-color: var(--error-100),
+              $border-color: transparent,
+              $icon-color: var(--error-500)
+      );
     }
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/utils/micro-button-color.scss

@@ -0,0 +1,20 @@
+@use '../../../../../../styles' as *;
+
+@mixin micro-button-color(
+  $prefix, 
+  $background-color: null,
+  $border-color: null,
+  $icon-color: null) {
+
+  & {
+    @if ($background-color != null) {
+      background-color: var(--ui-micro-button-#{$prefix}-background-color, $background-color);
+    }
+    @if ($border-color != null) {
+      border: 1px solid var(--ui-micro-button-#{$prefix}-border-color, $border-color);
+    }
+    @if ($icon-color != null) {
+      @include modify-svg($stroke: var(--ui-micro-button-#{$prefix}-icon-color, $icon-color));
+    }
+  }
+}

package/dist/scss/ui/formFields/FormField/styles/mixins/states/formFieldDefault.scss

@@ -0,0 +1,24 @@
+@use '../../../../../../styles' as *;
+@use '../utils/formFieldColor' as fieldColor;
+
+@mixin formFieldDefault {
+  @include fieldColor.formFieldColor(
+          $background-color: var(--base-white),
+          $border-color: var(--gray-300),
+          $text-color: var(--gray-900),
+          $icon-color: var(--gray-400),
+          $placeholder-color: var(--gray-400),
+          $box-shadow: 0 1px 2px 0 #1018280D,
+  );
+
+  @include darkTheme {
+    @include fieldColor.formFieldColor(
+            $background-color: var(--gray-950),
+            $border-color: var(--gray-800),
+            $text-color: var(--gray-25),
+            $icon-color: var(--gray-500),
+            $placeholder-color: var(--gray-500),
+            $box-shadow: 0 1px 2px 0 #1018280D,
+    );
+  }
+}

package/dist/scss/ui/formFields/FormField/styles/mixins/states/formFieldDisabled.scss

@@ -0,0 +1,26 @@
+@use '../../../../../../styles' as *;
+@use '../utils/formFieldColor' as fieldColor;
+
+@mixin formFieldDisabled {
+  @include fieldColor.formFieldColor(
+          $prefix: 'disabled',
+          $background-color: var(--gray-50),
+          $border-color: var(--gray-300),
+          $text-color: var(--gray-500),
+          $icon-color: var(--gray-400),
+          $placeholder-color: transparent,
+          $box-shadow: 0 1px 2px 0 #1018280D,
+  );
+
+  @include darkTheme {
+    @include fieldColor.formFieldColor(
+            $prefix: 'disabled',
+            $background-color: var(--gray-950),
+            $border-color: var(--gray-800),
+            $text-color: var(--gray-25),
+            $icon-color: var(--gray-400),
+            $placeholder-color: transparent,
+            $box-shadow: 0 1px 2px 0 #1018280D,
+    );
+  }
+}

package/dist/scss/ui/formFields/FormField/styles/mixins/states/formFieldError.scss

@@ -0,0 +1,26 @@
+@use '../../../../../../styles' as *;
+@use '../utils/formFieldColor' as fieldColor;
+
+@mixin formFieldError {
+  @include fieldColor.formFieldColor(
+          $prefix: 'error',
+          $background-color: var(--ui-form-field-background-color, var(--base-white)),
+          $border-color: var(--error-300),
+          $text-color: var(--ui-form-field-text-color, var(--gray-900)),
+          $icon-color: var(--ui-form-field-icon-color, var(--gray-400)),
+          $placeholder-color: var(--ui-form-field-placeholder-color, var(--gray-400)),
+          $box-shadow: 0 1px 2px 0 #1018280D,
+  );
+
+  @include darkTheme {
+    @include fieldColor.formFieldColor(
+            $prefix: 'error',
+            $background-color: var(--ui-form-field-background-color, var(--gray-950)),
+            $border-color: var(--error-900),
+            $text-color: var(--ui-form-field-text-color, var(--gray-25)),
+            $icon-color: var(--ui-form-field-icon-color, var(--gray-500)),
+            $placeholder-color: var(--ui-form-field-placeholder-color, var(--gray-500)),
+            $box-shadow: 0 1px 2px 0 #1018280D,
+    );
+  }
+}

package/dist/scss/ui/formFields/FormField/styles/mixins/states/formFieldErrorFocus.scss

@@ -0,0 +1,26 @@
+@use '../../../../../../styles' as *;
+@use '../utils/formFieldColor' as fieldColor;
+
+@mixin formFieldErrorFocus {
+  @include fieldColor.formFieldColor(
+          $prefix: 'error-focus',
+          $background-color: var(--ui-form-field-error-background-color, var(--ui-form-field-background-color, var(--base-white))),
+          $border-color: var(--error-400),
+          $text-color: var(--ui-form-field-error-text-color, var(--ui-form-field-text-color, var(--gray-900))),
+          $icon-color: var(--ui-form-field-error-icon-color, var(--ui-form-field-icon-color, var(--gray-400))),
+          $placeholder-color: var(--ui-form-field-error-placeholder-color, var(--ui-form-field-placeholder-color, var(--gray-400))),
+          $box-shadow: 0 1px 2px 0 #1018280D,
+  );
+
+  @include darkTheme {
+    @include fieldColor.formFieldColor(
+            $prefix: 'error-focus',
+            $background-color: var(--ui-form-field-error-background-color, var(--ui-form-field-background-color, var(--gray-950))),
+            $border-color: var(--error-700),
+            $text-color: var(--ui-form-field-error-text-color, var(--ui-form-field-text-color, var(--gray-25))),
+            $icon-color: var(--ui-form-field-error-icon-color, var(--ui-form-field-icon-color, var(--gray-500))),
+            $placeholder-color: var(--ui-form-field-error-placeholder-color, var(--ui-form-field-placeholder-color, var(--gray-500))),
+            $box-shadow: 0 1px 2px 0 #1018280D,
+    );
+  }
+}

package/dist/scss/ui/formFields/FormField/styles/mixins/states/formFieldFocus.scss

@@ -0,0 +1,26 @@
+@use '../../../../../../styles' as *;
+@use '../utils/formFieldColor' as fieldColor;
+
+@mixin formFieldFocus {
+  @include fieldColor.formFieldColor(
+          $prefix: 'focus',
+          $background-color: var(--base-white),
+          $border-color: var(--gray-400),
+          $text-color: var(--gray-900),
+          $icon-color: var(--gray-400),
+          $placeholder-color: var(--gray-400),
+          $box-shadow: 0 1px 2px 0 #1018280D,
+  );
+
+  @include darkTheme {
+    @include fieldColor.formFieldColor(
+            $prefix: 'focus',
+            $background-color: var(--gray-950),
+            $border-color: var(--gray-700),
+            $text-color: var(--gray-25),
+            $icon-color: var(--gray-500),
+            $placeholder-color: var(--gray-500),
+            $box-shadow: 0 1px 2px 0 #1018280D,
+    );
+  }
+}

package/dist/scss/ui/formFields/FormField/styles/mixins/states/index.scss

@@ -0,0 +1,5 @@
+@forward "formFieldDefault";
+@forward "formFieldDisabled";
+@forward "formFieldFocus";
+@forward "formFieldError";
+@forward "formFieldErrorFocus";

package/dist/scss/ui/formFields/FormField/styles/mixins/utils/formFieldColor.scss

@@ -0,0 +1,59 @@
+@use '../../../../../../styles' as *;
+@use "@/ui/formFields/mixins" as color;
+
+@mixin formFieldColor(
+  $prefix: null,
+  $background-color,
+  $border-color,
+  $icon-color,
+  $text-color,
+  $placeholder-color,
+  $box-shadow: null) {
+
+  $component: 'form-field';
+
+  & {
+    @include color.input-color(
+            $component: $component,
+            $prefix: $prefix,
+            $background-color: $background-color,
+            $border-color: $border-color,
+            $text-color: $text-color,
+            $box-shadow: $box-shadow,
+    );
+
+    .textSupport {
+      @include color.input-color(
+              $component: $component,
+              $prefix: $prefix,
+              $text-color: $text-color,
+      );
+    }
+
+    .inputField {
+      @include color.input-color(
+              $component: $component,
+              $prefix: $prefix,
+              $background-color: $background-color,
+              $text-color: $text-color,
+              $autofill: true
+      );
+
+      &::placeholder, &.placeholder {
+        @include color.input-color(
+                $component: $component,
+                $prefix: $prefix,
+                $placeholder-color: $placeholder-color,
+        )
+      }
+    }
+
+    .icon {
+      @include color.input-color(
+              $component: $component,
+              $prefix: $prefix,
+              $icon-color: $icon-color,
+      );
+    }
+  }
+}

package/dist/scss/ui/formFields/mixins/index.scss

@@ -0,0 +1 @@
+@forward "input-color";

package/dist/scss/ui/formFields/mixins/input-color.scss

@@ -0,0 +1,71 @@
+@use '../../../styles' as *;
+
+@mixin input-color(
+  $component,
+  $prefix: null,
+  $background-color: null,
+  $border-color: null,
+  $icon-color: null,
+  $text-color: null,
+  $placeholder-color: null,
+  $box-shadow: null,
+  $autofill: false,
+) {
+
+  $css-prefix: '';
+  @if ($prefix != null) {
+    $css-prefix: #{$prefix}-;
+  }
+
+  & {
+    @if ($background-color != null) {
+      background-color: var(--ui-#{$component}-#{$css-prefix}background-color, $background-color);
+    }
+
+    @if ($border-color != null) {
+      border: 1px solid var(--ui-#{$component}-#{$css-prefix}border-color, $border-color);
+    }
+
+    @if ($box-shadow != null) {
+      box-shadow: var(--ui-#{$component}-#{$css-prefix}box-shadow, $box-shadow);
+    }
+
+    @if ($text-color != null) {
+      caret: $text-color;
+      @include fnt-flex($color: var(--ui-#{$component}-#{$css-prefix}text-color, $text-color));
+    }
+
+    @if ($placeholder-color != null) {
+      @include fnt-flex($color: var(--ui-#{$component}-#{$css-prefix}placeholder-color, $placeholder-color));
+    }
+
+    @if ($icon-color != null) {
+      @include modify-svg($stroke: var(--ui-#{$component}-#{$css-prefix}icon-color, $icon-color));
+    }
+
+    @if ($autofill) {
+      &:-webkit-autofill,
+      &:-webkit-autofill:hover,
+      &:-webkit-autofill:active {
+        transition: none;
+        @if ($text-color != null) {
+          -webkit-text-fill-color: var(--ui-#{$component}-#{$css-prefix}-text-color, $text-color) !important;
+        }
+        @if ($background-color != null) {
+          -webkit-box-shadow: 0 0 0 40rem var(--ui-#{$component}-#{$css-prefix}-background-color, $background-color) inset;
+        }
+      }
+      @if ($background-color != null) {
+        &:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 40rem var(--ui-#{$component}-#{$css-prefix}-background-color, $background-color) inset;
+        }
+      }
+      &:auto-fill,
+      &:autofill {
+        @if ($text-color != null) {
+          color: var(--ui-#{$component}-#{$css-prefix}-text-color, $text-color) !important;
+        }
+      }
+    }
+  }
+}

package/dist/ts/src/hooks/index.d.ts

@@ -12,6 +12,7 @@ export * from './useSmartPosition';
 export * from './useSmartScroll';
 export * from './useInteractiveZone';
 export * from './useScrollIndicators';
+export * from './useLoading';
 export * from './ui-animations';
 export * from './modalWindows';
 export * from './controlsInput';

package/dist/ts/src/hooks/useLoading.d.ts

@@ -0,0 +1,17 @@
+type FunBaseType = (...args: any) => any;
+type PropsType<T extends FunBaseType> = [
+    fun: T,
+    initState?: boolean
+];
+type ActionsType = {
+    startLoading: () => void;
+    stopLoading: () => void;
+    getIsLoading: () => boolean;
+};
+type FunReturnType<T extends FunBaseType> = [
+    fun: T,
+    isLoading: boolean,
+    actions: ActionsType
+];
+export declare function useLoading<T extends FunBaseType>(...args: PropsType<T>): FunReturnType<T>;
+export {};

package/dist/ts/src/test/pages/index.d.ts

@@ -1,6 +1,6 @@
 export * from './HomePage';
 export * from './ButtonsPage/ButtonsPage';
-export * from './MicroButtonsPage';
+export * from './MicroButtonsPage/MicroButtonsPage';
 export * from './FieldsPage/FieldsPage';
 export * from './CheckboxMarkPage';
 export * from './FormBuilderPage';

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

@@ -6,7 +6,7 @@ export type ButtonHierarchyType = 'primary' | 'secondary-color' | 'secondary-gra
  * Компонент кнопки
  */
 export type ButtonPropsType<T extends React.ElementType> = AsProps<T, {
-    /** Размер кнопки (small, medium, large) */
+    /** Размер кнопки (small, medium, large, ultra) */
     size?: ButtonSizeType;
     /** Иерархия (primary, secondary, etc.) */
     hierarchy?: ButtonHierarchyType;

package/dist/ts/src/ui/formFields/FormPaginatedSelectField/hooks/useFormPaginatedSelectField.d.ts

@@ -50,7 +50,6 @@ export declare function useFormPaginatedSelectField<D, M extends boolean = false
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
-        onResize?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
         onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
         key?: React.Key | null | undefined;
@@ -216,6 +215,7 @@ export declare function useFormPaginatedSelectField<D, M extends boolean = false
         onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onResize?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onResizeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;