indicator-ui 0.1.109 → 0.1.111

package/dist/scss/styles/mixins/fnt.scss

@@ -6,7 +6,7 @@ $golos-text: var(--golos);
   $line-height: 24,
   $color: black,
   $weight: 400,
-  $family: $golos-ui,
+  $family: var(--golos),
   $stretch: normal,
   $style: normal,
   $variant: normal,

package/dist/scss/ui/Buttons/styles/mixins/baseButton.scss

@@ -4,12 +4,22 @@
   cursor: pointer;
   transition: background-color ease-out 0.2s;
   border-radius: 8px;
-  @include modify-flex(row, center, center);
+  position: relative;
+  @include modify-flex($align-items: center, $justify-content: center);
+
+  .loader {
+    width: fit-content;
+    height: fit-content;
+    @include modify-flex($align-items: center, $justify-content: center);
+    @include modify-svg {
+      animation: loading 0.9s linear infinite;
+    }
+  }
 
   .icon {
     width: fit-content;
     height: fit-content;
-    @include modify-flex(row, center, center);
+    @include modify-flex($align-items: center, $justify-content: center);
     @include modify-svg() {
       * {
         transition: stroke ease-out 0.2s;
@@ -17,6 +27,20 @@
     }
   }
 
+  .counter {
+    min-width: 24px;
+    height: 24px;
+    padding: 4px 2px;
+    border-radius: 12px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-2px, -2px);
+    text-align: center;
+    background-color: var(--blue-dark-500);
+    @include fnt($size: 14, $line-height: 16, $weight: 500, $color: var(--base-white));
+  }
+
   .content {
     @include modify-flex($align-items: center);
 
@@ -46,4 +70,13 @@
   &.heightHug {
     height: fit-content;
   }
+}
+
+@keyframes loading {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

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

@@ -4,13 +4,19 @@
   // С учетом border
   padding: 11px;
 
+  .loader {
+    @include modify-svg() {
+      flex: none;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
   .icon {
     @include modify-svg() {
-      & {
-        flex: none;
-        width: 20px;
-        height: 20px;
-      }
+      flex: none;
+      width: 20px;
+      height: 20px;
     }
   }
 
@@ -19,11 +25,11 @@
     gap: 4px;
 
     .text {
-      @include fnt-flex($size: 16, $line-height: 20, $weight: 500, $family: $golos-ui);
+      @include fnt-flex($size: 16, $line-height: 20, $weight: 500, $family: var(--golos));
     }
 
     .textSecondary {
-      @include fnt-flex($size: 16, $line-height: 20, $weight: 400, $family: $golos-ui);
+      @include fnt-flex($size: 16, $line-height: 20, $weight: 400, $family: var(--golos));
     }
   }
 }

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

@@ -16,6 +16,10 @@
   padding: 0 !important;
   gap: 4px;
 
+  .loader {
+    @include modify-svg($stroke: var(--gray-700));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--gray-700));
   }

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

@@ -16,6 +16,10 @@
   padding: 0 !important;
   gap: 4px;
 
+  .loader {
+    @include modify-svg($stroke: var(--primary-500));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--primary-500));
   }

package/dist/scss/ui/Buttons/styles/mixins/properties/link-dark-theme.scss

@@ -16,6 +16,10 @@
   padding: 0 !important;
   gap: 4px;
 
+  .loader {
+    @include modify-svg($stroke: var(--gray-iron-400));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--gray-iron-400));
   }

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

@@ -16,6 +16,10 @@
   padding: 0 !important;
   gap: 4px;
 
+  .loader {
+    @include modify-svg($stroke: var(--gray-400));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--gray-400));
   }

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

@@ -4,13 +4,19 @@
   // С учетом border
   padding: 9px;
 
+  .loader {
+    @include modify-svg() {
+      flex: none;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
   .icon {
     @include modify-svg() {
-      & {
-        flex: none;
-        width: 20px;
-        height: 20px;
-      }
+      flex: none;
+      width: 20px;
+      height: 20px;
     }
   }
 
@@ -19,11 +25,11 @@
     gap: 4px;
 
     .text {
-      @include fnt-flex($size: 14, $line-height: 20, $weight: 500, $family: $golos-ui);
+      @include fnt-flex($size: 14, $line-height: 20, $weight: 500, $family: var(--golos));
     }
 
     .textSecondary {
-      @include fnt-flex($size: 14, $line-height: 20, $weight: 400, $family: $golos-ui);
+      @include fnt-flex($size: 14, $line-height: 20, $weight: 400, $family: var(--golos));
     }
   }
 }

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

@@ -6,6 +6,10 @@
   border: 1px solid transparent;
   box-shadow: 0 1px 2px 0 #1018280D;
 
+  .loader {
+    @include modify-svg($stroke: var(--base-white));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--base-white));
   }

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

@@ -6,6 +6,10 @@
   border: 1px solid var(--primary-200);
   box-shadow: 0 1px 2px 0 #1018280D;
 
+  .loader {
+    @include modify-svg($stroke: var(--primary-500));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--primary-500));
   }
@@ -45,6 +49,10 @@
   background-color: transparent;
   border: 1px solid var(--rose-900);
 
+  .loader {
+    @include modify-svg($stroke: var(--rose-500));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--rose-500));
   }

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

@@ -6,6 +6,10 @@
   box-shadow: 0 1px 2px 0 #1018280D;
   border: 1px solid var(--gray-300);
 
+  .loader {
+    @include modify-svg($stroke: var(--gray-700));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--gray-700));
   }
@@ -54,6 +58,10 @@
   background-color: transparent;
   border: 1px solid var(--gray-iron-700);
 
+  .loader {
+    @include modify-svg($stroke: var(--gray-iron-200));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--gray-iron-200));
   }

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

@@ -4,13 +4,19 @@
   // С учетом border
   padding: 9px;
 
+  .loader {
+    @include modify-svg() {
+      flex: none;
+      width: 16px;
+      height: 16px;
+    }
+  }
+
   .icon {
     @include modify-svg() {
-      & {
-        flex: none;
-        width: 16px;
-        height: 16px;
-      }
+      flex: none;
+      width: 16px;
+      height: 16px;
     }
   }
 
@@ -19,11 +25,11 @@
     gap: 4px;
 
     .text {
-      @include fnt-flex($size: 14, $line-height: 16, $weight: 500, $family: $golos-ui);
+      @include fnt-flex($size: 14, $line-height: 16, $weight: 500, $family: var(--golos));
     }
 
     .textSecondary {
-      @include fnt-flex($size: 14, $line-height: 16, $weight: 400, $family: $golos-ui);
+      @include fnt-flex($size: 14, $line-height: 16, $weight: 400, $family: var(--golos));
     }
   }
 }

package/dist/scss/ui/Buttons/styles/mixins/properties/tab-active.scss

@@ -6,6 +6,10 @@
   border: 1px solid transparent;
   box-shadow: 0 1px 2px 0 #1018280D;
 
+  .loader {
+    @include modify-svg($stroke: var(--gray-700));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--gray-700));
   }

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

@@ -6,6 +6,10 @@
   border: 1px solid transparent;
   box-shadow: 0 1px 2px 0 #1018280D;
 
+  .loader {
+    @include modify-svg($stroke: var(--gray-500));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--gray-500));
   }

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

@@ -14,6 +14,11 @@
 
 @mixin tertiaryColorButton {
   border: 1px solid transparent;
+
+  .loader {
+    @include modify-svg($stroke: var(--primary-500));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--primary-500));
   }
@@ -57,6 +62,10 @@
 }
 
 @mixin tertiaryColorDarkThemeButton {
+  .loader {
+    @include modify-svg($stroke: var(--rose-500));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--rose-500));
   }

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

@@ -13,6 +13,11 @@
 
 @mixin tertiaryGrayButton {
   border: 1px solid transparent;
+
+  .loader {
+    @include modify-svg($stroke: var(--gray-700));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--gray-700));
   }

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

@@ -15,6 +15,10 @@
 @mixin tertiaryWhiteButton {
   border: 1px solid transparent;
 
+  .loader {
+    @include modify-svg($stroke: var(--primary-100));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--primary-100));
   }
@@ -58,6 +62,10 @@
 }
 
 @mixin tertiaryWhiteDarkThemeButton {
+  .loader {
+    @include modify-svg($stroke: var(--rose-100));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--rose-100));
   }

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

@@ -4,13 +4,19 @@
   // С учетом border
   padding: 17px;
 
+  .loader {
+    @include modify-svg() {
+      flex: none;
+      width: 24px;
+      height: 24px;
+    }
+  }
+
   .icon {
     @include modify-svg() {
-      & {
-        flex: none;
-        width: 24px;
-        height: 24px;
-      }
+      flex: none;
+      width: 24px;
+      height: 24px;
     }
   }
 
@@ -19,11 +25,11 @@
     gap: 4px;
 
     .text {
-      @include fnt-flex($size: 18, $line-height: 24, $weight: 500, $family: $golos-ui);
+      @include fnt-flex($size: 18, $line-height: 24, $weight: 500, $family: var(--golos));
     }
 
     .textSecondary {
-      @include fnt-flex($size: 18, $line-height: 24, $weight: 400, $family: $golos-ui);
+      @include fnt-flex($size: 18, $line-height: 24, $weight: 400, $family: var(--golos));
     }
   }
 }

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

@@ -5,6 +5,10 @@
     @include modify-svg($stroke: var(--error-500));
   }
 
+  .loader {
+    @include modify-svg($stroke: var(--error-500));
+  }
+
   .content {
     padding: 0 !important;
 

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

@@ -5,6 +5,10 @@
   background-color: var(--base-white);
   box-shadow: 0 1px 2px 0 #1018280D;
 
+  .loader {
+    @include modify-svg($stroke: var(--error-500));
+  }
+
   .icon {
     @include modify-svg($stroke: var(--error-500));
   }

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

@@ -3,7 +3,7 @@
 @mixin medium() {
   // С учетом border
   padding: 1px 8px;
-  @include fnt-flex($size: 14, $line-height: 20, $weight: 500, $family: $golos-ui);
+  @include fnt-flex($size: 14, $line-height: 20, $weight: 500, $family: var(--golos));
 
   .main {
     gap: 5px;

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

@@ -3,7 +3,7 @@
 @mixin small() {
   // С учетом border
   padding: 2px 7px;
-  @include fnt-flex($size: 12, $line-height: 18, $weight: 500, $family: $golos-ui);
+  @include fnt-flex($size: 12, $line-height: 18, $weight: 500, $family: var(--golos));
 
   .main {
     gap: 4px;

package/dist/ts/src/assets/icons/index.d.ts

@@ -88,3 +88,5 @@ export { default as CalendarCheck01SVG } from './calendar-check-01.svg';
 export { default as HelpCircleSVG } from './help-circle.svg';
 export { default as AlertCircleSVG } from './alert-circle.svg';
 export { default as SlashDividerSVG } from './slash-divider.svg';
+export { default as Loading01SVG } from './loading-01.svg';
+export { default as Loading02SVG } from './loading-02.svg';

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

@@ -2,3 +2,4 @@ export * from './useControlInput';
 export * from './useKeyboardInput';
 export * from './useKeyboardPressing';
 export * from './useTouchpadInput';
+export * from './useDrag';

package/dist/ts/src/hooks/controlsInput/useDrag.d.ts

@@ -0,0 +1,16 @@
+import { useSimpleRefElementWork } from "../../hooks";
+type DragStateType = {
+    fromX: number;
+    fromY: number;
+    toX: number;
+    toY: number;
+    status: 'start' | 'moving' | 'end';
+};
+type PropsType = [
+    ref: Parameters<typeof useSimpleRefElementWork>[number],
+    callback: (data: DragStateType) => void
+];
+export declare function useDrag(...args: PropsType): {
+    isDrag: boolean;
+};
+export {};

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

@@ -0,0 +1 @@
+export declare function UseDragPage(): JSX.Element;

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

@@ -26,3 +26,4 @@ export * from './UiAnimationsPage';
 export * from './FormPage';
 export * from './SelectFieldPage';
 export * from './BreadcrumbsPage';
+export * from './UseDragPage';

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

@@ -1,10 +1,11 @@
 import React, { ReactElement, ReactNode } from "react";
+import { AsProps, Merge } from "../../../types";
 export type ButtonSizeType = 'small' | 'medium' | 'large' | 'ultra';
 export type ButtonHierarchyType = 'primary' | 'secondary-color' | 'secondary-gray' | 'tertiary-white' | 'tertiary-color' | 'tertiary-gray' | 'link-color' | 'link-black' | 'link-gray' | 'tab-active' | 'tab' | 'link-dark-theme';
 /**
  * Компонент кнопки
  */
-export type ButtonPropsType = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> & {
+export type ButtonPropsType<T extends React.ElementType> = Merge<AsProps<T>, {
     /** Размер кнопки (small, medium, large) */
     size?: ButtonSizeType;
     /** Иерархия (primary, secondary, etc.) */
@@ -36,4 +37,6 @@ export type ButtonPropsType = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     additionStyles?: string | string[];
     /** Тема кнопки: светлая (primary: blue-dark) или темная (primary: rose)*/
     theme?: "light" | "dark" | undefined;
-};
+    isLoading?: boolean;
+    counter?: React.ReactNode;
+}>;

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

@@ -1,21 +1,4 @@
 import React from "react";
-export declare const Button: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className"> & {
-    size?: import("../types").ButtonSizeType;
-    hierarchy?: import("../types").ButtonHierarchyType;
-    children?: React.ReactNode;
-    text?: React.ReactNode;
-    textSecondary?: React.ReactNode;
-    iconLeft?: React.ReactNode;
-    iconRight?: React.ReactNode;
-    warning?: boolean;
-    width?: "fill" | "hug";
-    height?: "fill" | "hug";
-    customComponent?: React.ReactElement<{
-        children?: React.ReactNode;
-        className?: string;
-    } & {
-        [key: string]: any;
-    }>;
-    additionStyles?: string | string[];
-    theme?: "light" | "dark" | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
+import { ButtonPropsType } from '../types';
+export declare const _Button: <T extends React.ElementType>(_props: ButtonPropsType<T>, ref: React.ElementRef<T>) => JSX.Element;
+export declare const Button: <T extends React.ElementType>(props: ButtonPropsType<T> & React.RefAttributes<React.ElementRef<T>>) => JSX.Element;

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

@@ -28,7 +28,7 @@ export declare function useFormPaginatedSelectField<D, M extends boolean = false
     canSearch: boolean;
     canPaginate: boolean;
     isLoading: boolean;
-    fieldState: "view" | "search";
+    fieldState: "search" | "view";
     setIsFocus: React.Dispatch<React.SetStateAction<boolean>>;
     isShow: boolean;
     getIsShow: () => boolean;
@@ -40,15 +40,15 @@ export declare function useFormPaginatedSelectField<D, M extends boolean = false
     modalRef: React.MutableRefObject<HTMLDivElement | null>;
     targetRef: React.MutableRefObject<HTMLDivElement | null>;
     otherProps: {
-        ref?: React.LegacyRef<HTMLDivElement> | undefined;
-        slot?: string | undefined | undefined;
-        style?: React.CSSProperties | undefined;
-        title?: string | undefined | undefined;
         id?: string | undefined | undefined;
+        ref?: React.LegacyRef<HTMLDivElement> | undefined;
         color?: string | undefined | undefined;
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: React.CSSProperties | undefined;
+        title?: string | undefined | undefined;
         key?: React.Key | null | undefined;
         onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
         onReset?: React.FormEventHandler<HTMLDivElement> | undefined;

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

@@ -1,4 +1,4 @@
 export declare function useSelectFieldState(): {
-    fieldState: "view" | "search";
+    fieldState: "search" | "view";
     setIsFocus: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };

package/package.json

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

package/dist/scss/ui/Buttons/index.scss

@@ -1 +0,0 @@
-@forward "styles";

package/dist/scss/ui/Buttons/styles/index.scss

@@ -1 +0,0 @@
-@forward "mixins";